jzhw_uni/pages/member/card/received/receivedCard.vue

<template>
    <view class="container">
        <image style="height: 332rpx; width: 750rpx" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-received.png" mode="aspectFit"></image>
        <view class="first-buy-title" style="margin-bottom: 24rpx">
            <view>会员特惠</view>
            <view class="remark">领券后可再减</view>
        </view>
        <view class="good-list">
            <view class="good-item" v-for="(item, index) in imgList1" :key="index">
                <!-- url="/pages/goods/goods?id={{item.id}}" -->

                <navigator :url="item.link">
                    <image class="good-img" :src="item.url" background-size="cover"></image>
                </navigator>
            </view>
        </view>
        <view class="first-buy-title" style="margin: 0rpx 0 36rpx">
            <view>会员活动</view>
        </view>
        <view class="banner-item" v-for="(item, index) in imgList2" :key="index">
            <navigator :url="item.link">
                <image class="banner-img" :src="item.url" background-size="cover"></image>
            </navigator>
        </view>

        <image
            style="height: 370rpx; width: 706rpx; margin: 0 auto"
            src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/member/add_qw.png"
            mode="aspectFit"
            :show-menu-by-longpress="true"
        ></image>
        <!-- <view class="recevie">
    <image class="arvator" src="{{avatarUrl}}"></image>
    <view class="content">
      <text class="name">好友「{{userName}}」</text>
      <text class="gift">送你价值199元超级鲸会员年卡</text>

      <image mode="widthFix" src="https://6a7a-jzmall-3gi3t6y452ddb0ff-1306484940.tcb.qcloud.la/member/received.png"></image>
      <view class="btn" bindtap="goIndex">立即下单 </view>
      <view class="des">你可以在鲸致生活小程序“我的-超级鲸会员”中查看</view>
    </view>
  </view> -->
        <!-- <view style="margin: 30rpx auto;display: flex;justify-content: center"> 
    <view style="width:400rpx">
      <cell bind:startmessage='startmessage' bind:completemessage="completemessage" plugid='{{plugid}}' />
    </view>
     
  </view> -->

        <!-- <view class="bottom">
    <text class="salgon">家政用鲸致，生活有品质</text>
    <text>在线点 · 鲸致到家 | 好服务送好友</text>
  </view> -->
    </view>
</template>

<script>
var util = require('../../../../utils/util.js');
var api = require('../../../../config/api');
var user = require('../../../../utils/user.js');
var app = getApp();
export default {
    components: {},
    data() {
        return {
            rId: 0,
            userName: '',
            avatarUrl: '/static/images/member/get.png',
            plugid: '0775f898abc4d932f5e9a2f2b8f88bcb',
            //企微id
            imgList1: [],
            imgList2: []
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let rid = options.rId;
        if (rid) {
            this.setData({
                rId: rid
            });
        }
        this.getReferee();
        this.getMemberAd();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        goIndex() {
            uni.switchTab({
                url: '/pages/index/index'
            });
        },

        getReferee() {
            util.request(
                api.ReferrerRidInfo,
                {
                    rId: this.rId
                },
                'GET'
            ).then((res) => {
                if (res.errno == 0) {
                    this.setData({
                        userName: res.data.applyName,
                        avatarUrl: res.data.avatar
                    });
                    app.globalData.recommend = {
                        userName: res.data.applyName,
                        avatarUrl: res.data.avatar
                    };
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        },

        getMemberAd() {
            util.request(api.GetMemberAd, {}, 'GET').then((res) => {
                if (res.errno === 0) {
                    this.setData({
                        imgList1: res.data.firstPurchase,
                        imgList2: res.data.memberActivity
                    });
                }
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    /* background: rgba(255, 216, 174, 1); */
}

.container {
    text-align: center;
    padding-bottom: 80rpx;
    /* margin: 20rpx; */
}
.first-buy-title {
    height: 34px;
    line-height: 34rpx;
    padding: 0 34rpx;
    display: flex;
    align-items: flex-end;
    font-size: 34rpx;
    font-weight: bold;
}
.first-buy-title .remark {
    margin-left: 16rpx;
    font-size: 20rpx;
    font-weight: normal;
}
.good-list {
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.good-item {
    margin-bottom: 10rpx;
}
.good-img {
    width: 350rpx;
    height: 224rpx;
}
.banner-item {
    margin-bottom: 10rpx;
}
.banner-img {
    width: 712rpx;
    height: 190rpx;
    margin: 0 auto;
}

.arvator {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    margin-top: -80rpx;
}

.recevie {
    margin: 0 50rpx;
    margin-top: 120rpx;
    background: #ffffff;
    border-radius: 40px;
}

.content {
    display: flex;
    flex-direction: column;
}

.name {
    font-size: 18px;
    font-weight: 400;
    color: #333;
}

.gift {
    height: 39px;
    font-size: 22px;
    font-weight: 400;
    color: #333;
    margin: 10rpx;
}

.content image {
    width: 360rpx;
    margin: 0 auto;
}

.btn {
    width: 302px;
    height: 45px;
    background: rgba(182, 117, 86, 1);
    border-radius: 22.5px;
    margin: 0 auto;
    line-height: 45px;
    font-size: 32rpx;
    font-size: 36rpx;
    color: #fff;
    margin-bottom: 20rpx;
}

.des {
    margin-bottom: 50rpx;
    color: rgba(171, 171, 171, 1);
}

.title {
    font-size: 30px;
    line-height: 39rpx;
    font-weight: 400;
    color: #b67556;
    margin: 20rpx 0rpx;
}

.txt {
    font-size: 15px;
    font-weight: 400;
    color: rgba(46, 46, 46, 1);
    margin: 30rpx;
}

.bottom {
    position: fixed;
    bottom: 20rpx;
    /* z-index: -1; */
    /* bottom: 0rpx; */
    width: 100%;
    height: 180rpx;
    /* background: #EECFB1; */
    text-align: center;
    padding-top: 20rpx;
    display: flex;
    flex-direction: column;
}

.salgon {
    height: 34px;
    font-size: 30px;
    font-weight: 600;
    color: #b67556;
    line-height: 42px;
}

.bottom text {
    height: 80rpx;
    line-height: 80rpx;
    color: rgba(182, 117, 86, 1);
}
</style>