Client-Teapay/src/pages/product/p_details.vue

<template>
    <view class="container">
        <!-- 轮播图 -->
        <swiper-banner imgScale="1:1" :imgArr="detail.goods_img" :duration="1000" :interval="5000" :circular="true" :autoplay="true" :indicator-dots="true" indicator-active-color="#12B280" indicator-color="rgba(255, 255, 255, .82)"></swiper-banner>
        <!-- 轮播图-end -->
        <!-- 价格信息栏 -->
        <view class="price_info flex_r flex_ac flex_jb">
            <view v-if="type == 5" class="price">
                <span v-if="Number(detail.cost_price) != 0">{{ detail.cost_price }}元</span>
                <span v-if="Number(detail.cha_bao) != 0 && Number(detail.cost_price) != 0">+</span>
                <span v-if="Number(detail.cha_bao) != 0">{{ detail.cha_bao }}茶宝</span>
            </view>
            <view v-else class="price" :class="type == 2 ? 'samll' : ''">
				<text class="p_favour" v-if="type == 1">￥{{ detail.total_amount }}</text>
				<text class="p_favour" v-if="type == 2">￥{{ detail.trade_price }} + {{detail.trade_num}}批发券 + {{detail.treasure_price}}茶宝</text>
				<text class="p_favour" v-if="type == 3">￥{{ detail.cost_price }}</text>
				<text class="p_favour" v-if="type == 4">￥{{ $h.Sub(detail.cost_price,detail.consume) }}</text>
				<text class="p_favour" v-if="type == 5">￥{{ detail.cost_price }} + {{ detail.treasure_price }}茶宝</text>
				<template v-if="type == 6">
					<text class="p_favour">￥{{ detail.cost_price }}</text>
					<text class="un_p_favour">￥{{ detail.original_price }}</text>
				</template>
				<!-- <text class="p_trade" v-if="type == 1">送 {{detail.trade_give_num}} 批发券</text> -->
				<text class="p_trade" v-if="(type == 3 || type == 4)">送 {{detail.give_cha_bao}} 茶宝</text>
                <view v-if="type == 4">
					<text class="un_p_favour un_p">{{ detail.cost_price }}</text>
				    <text class="p_trade">消费金抵扣 {{detail.consume}}</text>
                </view>
            </view>
            <view class="price_span flex_r flex_ac flex_je">
                <view class="triangle"></view>
                <view class="span_conten flex_r flex_ac flex_jc">{{ tidyTpye(goodsDa.type) }}</view>
            </view>
        </view>
        <!-- 价格信息栏-end -->
        <!-- 标题信息栏 -->
        <view class="title_info">
            <view class="goods_name">{{ detail.goods_name }}</view>
            <view class="goods_teac flex_r flex_jb" v-if="['3','4'].includes(type)">
                <view class="product-txt">限时赠送{{ detail.teac }}TeaC</view>
                <view class="product-txt fenxiang">
                    <text class="iconfont red">&#xe62b;</text>
                    <text class="red">分享约获得 {{ detail.first_teac }} {{type==3?'TeaC':'现金'}}</text>
                </view>
            </view>
            <view class="goods_subName">{{ detail.goodsMsg }}</view>
        </view>
        <!-- 标题信息栏-end -->
        <!-- 产品简介 -->
        <view class="brief mar_t20">
            <view class="brief_title flex_r flex_ac">产品简介</view>
            <view class="brief_con">
                <mp-html :content="detail.goods_content" ref="jyf"></mp-html>
                <!-- <image :lazy-load="true" style="width: 100%;display: block;" v-for="(item,index) in detail.goodsDetailesImage" :key="index" :src="item" mode="widthFix"></image> -->
            </view>
        </view>
        <!-- 产品简介-end -->
        <!-- 底部导航组件 -->
        <view class="option">
            <uni-goods-nav :fill="true" :options="options" :buttonGroup="type == 5 ? buttonGroupTea : buttonGroup" @click="onClick" @buttonClick="buttonClick" />
        </view>
        <!-- 底部导航组件-end -->
        <!-- 授权 -->
        <authorize-module v-if="showAuth" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" />
        <!-- 授权-end -->
        <!-- 购买或加入购物车弹窗 -->
        <uni-popup ref="shopping" type="bottom">
            <view class="shopping">
                <view class="close_con flex_r flex_je">
                    <view class="iconfont close_img" @tap="closeBtn">&#xe609;</view>
                </view>
                <view class="goods_info flex_r">
                    <image class="goods_img" :src="detail.original_img" mode=""></image>
                    <view class="goods_con flex_c flex_jb">
                        <view class="shop_names">{{ detail.goods_name }}</view>
                        <view class="goods_msg" v-if="type == 1">￥{{ detail.total_amount }}</view>
                        <view class="goods_msg" v-else-if="type == 2">{{ detail.trade_price }}元+{{ detail.trade_num }}批发券+{{ detail.treasure_price }}茶宝</view>
                        <view class="goods_msg" v-else>￥{{ detail.cost_price }}</view>
                        <view class="num_con flex_r flex_je" v-if="type != 6">
                            <uni-number-box :min="1" @change="bindChange" :value="buyNum"></uni-number-box>
                        </view>
                        <view class="num_str flex_r flex_je" v-else>x 1</view>
                    </view>
                </view>
                <view class="goods_option flex_r flex_ac flex_jse" v-if="type == 1">
                    <view class="goods_raido flex_r flex_ac" @tap="setWay('0')">
                        <view class="raido_img" :class="pfway == '0' ? 'raido_box' : ''"></view>
                        <view class="raido_text">零售产品邮寄</view>
                    </view>
                    <view class="goods_raido flex_r flex_ac" @tap="setWay('1')">
                        <view class="raido_img" :class="pfway == '1' ? 'raido_box' : ''"></view>
                        <view class="raido_text">零售产品置换</view>
                    </view>
                </view>
                <checkbox-group class="flex_r flex_ac flex_jc" @change="checkboxChange">
                    <label class="option_box">
                        <checkbox value="1" :checked="checked" color="#2DB389" style="transform: scale(0.7)" />
                        我已阅读同意<text @tap.stop="getProPage" v-if="type != 5 && type != 6">《购买协议》</text>
                        <text @tap.stop="getProPage" v-else-if="type == 5">《兑换协议》</text>
                        <text @tap.stop="getProPage" v-else-if="type == 6">《天天捡漏协议》</text>
                    </label>
                </checkbox-group>
                <view class="confim flex_r flex_ac flex_jc" @tap="ToPayPage">确定</view>
            </view>
        </uni-popup>
        <!-- 购买或加入购物车弹窗-end -->
    </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import { post } from "@/request/api.js";
import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue"
import swiperBanner from "@/components/swiperBanner/index.vue";
import uniGoodsNav from "@/components/uni-goods-nav/uni-goods-nav.vue";
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue";
import authorizeModule from "@/components/authorize-module/index";
export default {
    components: {
        mpHtml,
        uniGoodsNav,
        swiperBanner,
        uniNumberBox,
        authorizeModule,
    },
    data() {
        return {
            imgArr: ["/static/goods5.jpg"],
            content: "",
            options: [
                // 底部导航跳转
                {
                    icon: "home",
                    text: "主页",
                },
                // {
                //  icon: 'cart',
                //  text: '购物车',
                //  info: 0
                // }
            ],
            buttonGroup: [
                // 底部操作按钮
                // {
                //  text: '加入购物车',
                //  backgroundColor: '#ff0000',
                //  color: '#fff'
                // },
                {
                    text: "立即购买",
                    backgroundColor: "#ffa200",
                    color: "#fff",
                },
            ],
            buttonGroupTea: [
                // 底部操作按钮
                // {
                //  text: '加入购物车',
                //  backgroundColor: '#ff0000',
                //  color: '#fff'
                // },
                {
                    text: "立即兑换",
                    backgroundColor: "#ffa200",
                    color: "#fff",
                },
            ],
            btnIndex: 0, // 用户点击按钮事件判断 0：加入购物车；1：立即购买
            type: null, // 商品类型，1零售 2批发 3精品 4今日值买
            goodsId: "", // 商品ID
            id: "", //合伙人套餐ID
            detail: {
                goods: {},
            }, // 商品详情
            checked: false, //是否选中协议
            buyNum: 1, //购买数量
            pfway: "1", // 批发
            qhway: "0", //提货方式
            shopInfo: {}, // 商铺信息
            // showAuth: false,

            userinfo: {},
            goodsDa: {},
            unid: "",
        };
    },
    onLoad: function(e) {
        this.userinfo = uni.getStorageSync("userinfo");
        let token = uni.getStorageSync("token");
        this.type = e.type;
        this.goodsDa = e;
        this.loadData(e);

        if (e.invite && !token) this.login(e.invite);
    },
    onShow: function() {},
    methods: {
        // 商品详情信息
        loadData(da) {
            post("v1/goods/goodsDetail", da).then((res) => {
                if (res.code === 0) {
                    this.detail = res.data.data;
                    let imgs = [];
                    imgs.push(this.detail.original_img);
                    imgs.push(...this.detail.goods_img);
                    this.detail.goods_img = imgs;
                } else {
                    uni.showModal({
                        title: "提示",
                        content: res.msg,
                        showCancel: false,
                        success: function(res) {
                            if (res) {
                                uni.navigateBack({
                                    delta: 1,
                                });
                            }
                        },
                    });
                }
            });
        },
        // 去购买
        ToPayPage: function() {
            if (!this.checked) {
                appEv.errTips("请阅读并同意购买协议");
                return;
            }
            if (this.btnIndex == 0) {
                this.toPayOrder();
            }
        },
        // 创建购买订单
        toPayOrder: function() {
            let da = {
                ...this.goodsDa,
                num: Number(this.buyNum),
                is_sell: ['1','2'].includes(this.type) ? this.pfway : "0",
            };
            this.goto("/pages/to-pay-list/index", da);
        },
        // 添加到购物车
        SetCartGoodsList() {},
        // 购买数量更改
        bindChange(e) {
            this.buyNum = e;
        },
        // 更改批发方式
        setWay(e) {
            this.pfway = e;
        },
        setQhWay(e) {
            this.qhway = e
        },
        // 点击同意协议
        checkboxChange(e) {
            let index = e.detail.value.indexOf("1");
            if (index != -1) {
                this.checked = true;
            } else {
                this.checked = false;
            }
        },
        // 点击底部主页购物车等按钮
        onClick(e) {
            if (e.index === 0) {
                uni.switchTab({ url: "/pages/index/index" });
            }
        },
        // 点击立即购买或加入购物车
        buttonClick: function(e) {
            this.btnIndex = e.index;
            this.$refs.shopping.open();
        },
        // 点击关闭弹窗
        closeBtn: function() {
            this.$refs.shopping.close();
        },
        getProPage() {
            uni.navigateTo({
                url: "/pages/pay-agreement/index?type=" + this.goodsDa.type,
            });
        },
        SoHAuth(){
            this.$refs.autho.onSoHAuth();
        },
        login(invite) {
            let that = this;
            // #ifdef  MP-WEIXIN
            wx.login({
                success(res) {
                    if (res.code) {
                        post("v1/appletLogin", {
                            invite,
                            code: res.code,
                        }).then((res) => {
                            if (res.code === 0) {
                                if (res.data.token) {
                                    uni.setStorageSync("token", res.data.token);
                                    that.getuserInfo();
                                } else {
                                    that.unid = res.data.unid;
                                    that.shopInfo = app.globalData.shopInfo;
                                    that.SoHAuth(); //调取授权弹窗
                                }
                            }
                        });
                    }
                },
            });
            // #endif
        },
        onauthGetTelSuccess(da) {
            this.SoHAuth();
            post("v1/getMobile", {
                unid: this.unid,
                ...da.detail,
            }).then((res) => {
                if (res.code === 0) {
                    uni.setStorageSync("token", res.data.token);
                    this.getuserInfo();
                }
            });
        },
        async getuserInfo() {
            this.userinfo = await uni.userfun();
        },
    },
    onShareAppMessage: function() {
        let userinfo = uni.getStorageSync("userinfo");
        var path =
            "/pages/product/p_details?agentId=1" +
            "&id=" +
            this.goodsDa.id +
            "&type=" +
            this.goodsDa.type;
        if (userinfo.invite) {
            path =
                "/pages/product/p_details?invite=" +
                userinfo.invite +
                "&id=" +
                this.goodsDa.id +
                "&type=" +
                this.goodsDa.type;
        }
        var title = `让数字经济赋能美好生活！`;
        return {
            title: title,
            path: path,
        };
    },
};
</script>
<style lang="scss">
// 页面配置
page {
    background: #f5f5f5;
}

.container {
    padding-bottom: 90rpx;
}

// 页面配置-end

// 价格信息栏
.price_span {
    width: 283rpx;
    height: 100%;
    position: relative;
}

.price text {
    // font-size: 24rpx;
    color: #fff;
    font-family: "SourceHanSansCN-Medium";
}

.price_info {
    background: #ff6d44;
    height: 92rpx;
    width: 100%;
    box-sizing: border-box;
}

.price {
    color: #fff;
    margin-left: 20rpx;
	width: 400rpx;

    .p_favour {
        font-size: 36rpx;
    }

    .un_p_favour {
        font-size: 26rpx;
        text-decoration: line-through;
		margin-left: 16rpx;
        &.un_p{
            margin-left: 0;
        }
    }

    .p_trade {
        font-size: 20rpx;
        margin-left: 20rpx;
    }
}

.span_conten {
    width: calc(283rpx - 46rpx);
    height: 100%;
    background: #ffcabb;
    position: relative;
    font-size: 34rpx;
    font-family: "SourceHanSansCN-Medium";
    color: #682918;
}

.triangle {
    width: 0px;
    height: 0px;
    border-top: 92rpx solid rgba(0, 0, 0, 0);
    border-right: 92rpx solid rgba(0, 0, 0, 0);
    border-bottom: 92rpx solid #ffcabb;
    border-left: 92rpx solid rgba(0, 0, 0, 0);
    transform: translate(-46rpx, -92rpx);
    position: absolute;
    top: 0;
    left: 0;
}

.samll {
	.p_favour{
		font-size: 28rpx;
	}
}

// 价格信息栏-end

// 标题信息栏
.goods_subName {
    width: 100%;
    overflow: hidden;
    font-size: 22rpx;
    color: #787878;
}

.title_info {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    padding: 20rpx;
    box-sizing: border-box;
}

.goods_name {
    width: 100%;
    overflow: hidden;
    font-size: 32rpx;
    color: #1b1b1b;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
    margin-bottom: 20rpx;
}

// 标题信息栏-end

// 产品简介
.brief {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}

.brief_con {
    width: 100%;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;
}

.brief_title {
    width: 100%;
    overflow: hidden;
    font-size: 26rpx;
    color: #1b1b1b;
    padding: 0 20rpx;
    box-sizing: border-box;
    border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
    height: 74rpx;
}

// 产品简介-end

// 底部导航组件
.option {
    position: fixed;
    width: 100%;
    overflow: hidden;
    left: 0;
    bottom: 0;
}

// 底部导航组件-end

// 购买或加入购物车弹窗
.option_box text {
    color: #2db389;
}

.close_img {
    font-size: 38rpx;
    color: #999;
}

.option_box {
    font-size: 26rpx;
    margin-top: 80rpx;
}

.goods_raido:nth-last-child(1) {
    margin-right: 0;
}

.num_con {
    width: 100%;
    overflow: hidden;
    padding-bottom: 3rpx;
}

.num_str {
    font-size: 14px;
    color: #989898;
}

.goods_option {
    width: 100%;
    overflow: hidden;
    padding-top: 50rpx;
}

.close_con {
    width: 100%;
    overflow: hidden;
    margin-bottom: 35rpx;
}

.raido_text {
    font-size: 26rpx;
    color: #545454;
    margin-left: 18rpx;
}

.goods_con {
    width: calc(100% - 202rpx - 30rpx);
    overflow: hidden;
}

.goods_img {
    width: 202rpx;
    height: 187rpx;
    margin-right: 30rpx;
    border-radius: 12rpx;
}

.confim {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background: #2db389;
    color: #fff;
    font-size: 26rpx;
    margin-top: 44rpx;
}

.shopping {
    width: 100%;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0;
    background: #fff;
}

.goods_info {
    width: 100%;
    overflow: hidden;
    align-items: inherit;
    padding-bottom: 48rpx;
    border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
}

.shop_names {
    width: 100%;
    overflow: hidden;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
    color: #1b1b1b;
    font-size: 32rpx;
}

.goods_msg {
    width: 100%;
    overflow: hidden;
    font-size: 28rpx;
    color: #18bb88;
    font-family: "SourceHanSansCN-Medium";
    font-weight: 500;
}

.raido_img {
    width: 39rpx;
    height: 35rpx;
    background: url(~@/static/img/weixuanzhong.png);
    background-repeat: no-repeat;
    background-size: 35rpx 35rpx;
    background-position: center center;
}

.raido_box {
    background: url(~@/static/img/consent.png);
    background-repeat: no-repeat;
    background-size: 39rpx 35rpx;
    background-position: center center;
}

// 购买或加入购物车弹窗-end

.goods_teac {

    .product-txt,
    .product-text {
        font-size: 22rpx;
        color: #787878;
    }

    .product-text {
        margin-left: 16rpx;
    }

    .red {
        color: #FA2E18;
    }

    .fenxiang {
        font-size: 22rpx;
        background: rgba(250, 46, 24, 0.08);
        display: inline-block;
        border-radius: 6rpx;
        padding: 0 16rpx;
    }
}
</style>