小程序邀请新人界面

作者: 追逐繁星的阿忠 | 来源:发表于2021-01-15 14:10 被阅读0次

小程序邀请新人界面
微信小程序我的界面
小程序界面问题
微信“小程序”进行内测，木有收到邀请函者必看？
微信小程序开发(一)环境搭建
微信小程序界面传值之JSON解析错误
微信小程序界面传值之JSON解析错误
微信小程序：界面传值、取值
《小程序开发指南》笔记第4章 - 场景应用
小程序让他们卷土重来！你还在犹豫？

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>

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