小程序 邀请新人界面

image.png
<template>
    <view class="main-container">
        <u-navbar :is-back="false" :background="bg" class="home-top" @tap="goBack">
            <!-- 导航栏自定义胶囊 -->
            <image src="../../static/order_arrow_left.png" mode="aspectFit" class="header-img"></image>
            <view class="title">
                参与拼团
            </view>
        </u-navbar>

        <view class="tl-section">
            <view>
                <button class="tl-btn tl-font-42-172">立即邀请</button>
            </view>
        </view>

        <view class="tl-section2">
            <view class="tl-font-32-red">邀请记录</view>
            <view class="tl-font-28-a0a mt-64">成功邀请10人</view>

            <view class="tl-user-row">
                <view>
                    <image :src="userImg" class="tl-invite-img"></image>
                </view>
                <view>
                    <view class="tl-font-32-434">乘风破浪</view>
                    <view class="tl-font-28-a0a">2020-2-5 12:50</view>
                </view>
            </view>

            <view class="tl-user-row">
                <view>
                    <image :src="userImg" class="tl-invite-img"></image>
                </view>
                <view>
                    <view class="tl-font-32-434">乘风破浪</view>
                    <view class="tl-font-28-a0a">2020-2-5 12:50</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                page: 1,
                inviteImg:'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/invite.png',
                userImg: 'https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/test.jpg',
            }
        },

        onLoad(options){
            this.goodsId = options.goodsId;
            this.pinOrderId = options.pinOrderId;
            this.getPinOrderDetail();
            this.getDetail();
        },

        methods: {
            // 商品详情
            getDetail() {
                let self = this;
                this.$http.post('getGoodsDetail', {
                    goodsId: self.goodsId
                }).then(([error, res]) => {
                    self.fullLoading = false
                    if (res.data.code == 1) {
                        let obj = res.data.data;

                    } else {
                        this.$common.toast(res.data.msg)
                    }
                })

                return this;
            },


            // 返回上一页
            goBack() {
                uni.navigateBack();
            },
        },

        //分享给微信好友
        onShareAppMessage(res) {
            if (res.from === 'button') {// 来自页面内分享按钮
                console.log(res.target)
            }
            //let storeId = this.storeInfo.storeId;
            let self = this;
            let goodsId = self.goodsId;
            let pinOrderId = self.pinOrderId;
            return {
                title: self.goodsInfo.goods_name,
                imageUrl: self.goodsInfo.goods_image,
                path: `/pages/detail/detail?goodsId=${goodsId}&pinOrderId=${pinOrderId}`
            }
        },

        //分享朋友圈
        onShareTimeline(res) {
            let self = this;
            let goodsId = self.goodsId;
            let pinOrderId = self.pinOrderId;
            return {
                title: self.goodsInfo.goods_name,
                type: 0,
                query: `/pages/detail/detail?goodsId=${goodsId}&pinOrderId=${pinOrderId}`,
                summary: "",
                imageUrl: self.goodsInfo.goods_image
            }
        },

    }
</script>

<style lang="scss">
    .u-border-bottom:after{
        /*border: 0;*/
    }
    .u-navbar-fixed{
        background: #fff;
    }

    .main-container {
        width: 100vw;
        background: #FFF4F2;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
    }

    /**
     * 顶部导航
     */
    .home-top {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 50rpx;
        background-color: #FFFFFF;
        color: #0C0900;
        opacity: 1;
    }

    .home-top .title {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
    }

    .header-img {
        width: 44rpx;
        height: 44rpx;
        margin-left: 20rpx;
    }
    .tl-section{
        position: relative;
        width: 100%;
        height: 1110rpx;
        background: url("https://wkresource.oss-cn-hangzhou.aliyuncs.com/wkfiles/wxapp/shopmall/invite.png") no-repeat;
        background-size: 100% 100%;
    }
    .tl-btn{
        position: absolute;
        top: 950rpx;
        left: 50%;
        transform: translate(-50%);
        width: 304rpx;
        height: 86rpx;
        line-height: 86rpx;
        background: linear-gradient(180deg, #EFF2FF 0%, #FEFEFF 100%);
        border-radius: 50rpx;
    }
    .tl-font-42-172{
        font-size: 42rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #0D1E72;
    }
    .tl-section2{
        width: 670rpx;
        min-height: 718rpx;
        background: #fff;
        padding: 32rpx 40rpx;
        border-radius: 36rpx;
        margin-top: 32rpx;
        margin-bottom: 64rpx;
    }
    /*邀请记录*/
    .tl-font-32-red{
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #F86341;
        text-align: center;
    }
    .tl-font-28-a0a{
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #A1A09D;
        text-align: center;
    }
    .mt-64{
        margin-bottom: 24rpx;
    }
    .tl-user-row{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 32rpx;
        border-bottom: 2rpx solid #E7E9EE;
        margin-bottom: 40rpx;
    }
    .tl-invite-img{
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 16rpx;
    }
    .tl-font-32-434{
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #43413C;
    }
</style>


君不见,黄河之水天上来,奔流到海不复回。
君不见,高堂明镜悲白发,朝如青丝暮成雪。
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。
与君歌一曲,请君为我倾耳听。
钟鼓馔玉不足贵,但愿长醉不复醒。
古来圣贤皆寂寞,惟有饮者留其名。
陈王昔时宴平乐,斗酒十千恣欢谑。
主人何为言少钱,径须沽取对君酌。
五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。

君不见,黄河之水天上来,奔流到海不复回。
君不见,高堂明镜悲白发,朝如青丝暮成雪。
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。
与君歌一曲,请君为我倾耳听。
钟鼓馔玉不足贵,但愿长醉不复醒。
古来圣贤皆寂寞,惟有饮者留其名。
陈王昔时宴平乐,斗酒十千恣欢谑。
主人何为言少钱,径须沽取对君酌。
五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。

推荐阅读更多精彩内容