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-if="type == 1" class="price flex_c">
                <text class="p_favour_teac" v-if="type == 1">￥: {{ $h.Add(detail.teac,$h.Mul(detail.trade_teac, 2))||0 }} TeaC +{{ detail.treasure_price||0 }} 茶宝</text>
                <text class="p_trade_teac" v-if="type == 1">寄卖服务费：{{$h.Mul(detail.service,2)}} 元</text>
            </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">（含服务费{{$h.Mul(detail.service,2)}}元）</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 -->
        <!-- 购买或加入购物车弹窗 -->
        <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">￥: {{ $h.Add(detail.teac,$h.Mul(detail.trade_teac, 2))||0 }}TeaC + {{ detail.treasure_price }}茶宝</view>
                        <view class="goods_smsg" v-if="type == 1">寄卖服务费：{{$h.Mul(detail.service,2)}} 元</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>￥{{ afterSpecPrice }}</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>
                <view>
                    <view v-if="detail.goods_spec_list.length > 0">
                        <view class="goods_spec">
                            <text>{{detail.goods_spec}}</text>
                        </view>
                        <view class="goods_spec_list">
                            <view class="goods_spec_list_item"  
                                v-for="(item,index) in detail.goods_spec_list" :key="index"
                                :class="goodsSpecIndex == index ? 'goods_spec_list_item_active' : ''"
                                @click="goodsSpecChange(item,index)">
                                <span>{{item.spec_name}}</span>
                            </view>
                        </view>
                    </view>
                    <view v-if="detail.goods_spec_list.length > 0">
                        <view class="goods_spec">
                            <text>{{detail.goods_attr}}</text>
                        </view>
                        <view class="goods_spec_list">
                            <view class="goods_spec_list_item"  
                                v-for="(item,index) in detail.goods_spec_list[goodsSpecIndex].attr_list" :key="index"
                                :class="goodsAttrIndex == index ? 'goods_spec_list_item_active' : ''"
                                @click="goodsAttrChange(item,index)">
                                <span>{{item.attr_name}}</span>
                            </view>
                        </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" v-if="type == 1" @tap="ToPayPage">立即支付</view>
                <view class="confim flex_r flex_ac flex_jc" v-else @tap="ToPayPage">立即支付 ￥{{afterSpecPrice * buyNum}}</view>
            </view>
        </uni-popup>
        <!-- 购买或加入购物车弹窗-end -->
        <!-- 授权 -->
        <authorize-module ref="autho" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" />
        <!-- 授权-end -->
    </view>
</template>
<script>
let app = getApp();
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: {},
                goods_spec_list: [],
                
            }, // 商品详情
            checked: false, //是否选中协议
            buyNum: 1, //购买数量
            pfway: "1", // 批发
            qhway: "0", //提货方式
            shopInfo: {}, // 商铺信息
            // showAuth: false,

            userinfo: {},
            goodsDa: {},
            unid: "",
            goodsSpecIndex: 0,
            goodsAttrIndex: 0,
            specId: "0",
            attrId: "0",
            afterSpecPrice: 0, // 规格选择后显示价格
        };
    },
    onLoad: function(e) {
        this.userinfo = uni.getStorageSync("userinfo");
        let token = uni.getStorageSync("token");
        this.type = e.type;
        this.goodsDa = e;
        this.loadData(e);

        if (!token) this.login();
    },
    onShow: function() {},
    methods: {
        // 商品详情信息
        loadData(da) {
            post("v1/goods/goodsDetail", da).then((res) => {
                if (res.code === 0) {
                    this.detail = res.data.data;
                    this.afterSpecPrice = this.detail.cost_price
                    let imgs = [];
                    imgs.push(this.detail.original_img);
                    imgs.push(...this.detail.goods_img);
                    this.detail.goods_img = imgs;
                    if (this.detail.goods_spec_list.length > 0) {
                        this.specId = this.detail.goods_spec_list[0].id

                        if (this.detail.goods_spec_list[0].attr_list.length > 0) {
                            this.attrId = this.detail.goods_spec_list[0].attr_list[0].id
                        }
                    }
                    
                    this.getPrice()
                } else {
                    uni.showModal({
                        title: "提示",
                        content: res.msg,
                        showCancel: false,
                        success: function(res) {
                            if (res) {
                                uni.navigateBack({
                                    delta: 1,
                                });
                            }
                        },
                    });
                }
            });
        },
        // 去购买
        ToPayPage: function() {
            if (!this.checked) {
                this.$toast("请阅读并同意购买协议");
                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",
                spec_id: this.specId,
                attr_id: this.attrId,
                goods_id: this.detail.goods_id,
                
            };
            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", {
                            code: res.code,
                            invite: uni.getStorageSync("inviteCode") || "XHCYGNZM"
                        }).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();
        },
        // 选择规格
        goodsSpecChange(item,index){
            this.goodsSpecIndex = index;
            this.specId = item.id
            this.goodsAttrIndex = 0
            if(this.detail.goods_spec_list[this.goodsSpecIndex].attr_list.length > 0){
                this.attrId = this.detail.goods_spec_list[this.goodsSpecIndex].attr_list[0].id
            }else{
                this.attrId = "0"
            }
            this.getPrice()
        },
        goodsAttrChange(item,index){
            this.goodsAttrIndex = index
            this.attrId = item.id
            this.getPrice()
        },
        getPrice(){
            post("v1/goods/getPrice", {
                goods_id: this.detail.goods_id,
                spec_id: this.specId,
                attr_id: this.attrId,
                type: this.type
            }).then((res) => {
                if (res.code === 0) {
                    if(res.data){
                        this.afterSpecPrice = res.data.cost_price
                    }
                }
            });
            
        }
    },
    onShareAppMessage() {
        let userinfo = uni.getStorageSync("userinfo");
        var path = "/pages/product/p_details?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;
    }
    .p_favour_teac{
        font-size: 30rpx;
    }
    .p_trade_teac {
        font-size: 20rpx;
        // margin-left: 20rpx;
    }

    .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 {
    width: 100%;
    overflow: hidden;
    position: fixed;
    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;
}
.quota_text{
    font-size: 28rpx;
    color: #545454;
    padding-left: 6rpx;
}
.quota_num_text{
    font-size: 24rpx;
    color: #545454;
    padding-left: 6rpx;
}
.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: 34rpx;
    color: #18bb88;
    font-family: "SourceHanSansCN-Medium";
    font-weight: 500;
}
.goods_smsg{
    font-size: 22rpx;
    color: #ff6d44;
}

.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;
    }
}

// 商品规格样式-start
.goods_spec{
    font-size: 28rpx;
    padding-top: 28rpx;
}
.goods_spec_list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 20rpx;

    &_item{
        font-size: 24rpx;
        padding: 14rpx 28rpx;
        border-radius: 10rpx;
        border: 2rpx solid #F7F7F7;
        margin-right: 12rpx;
        margin-bottom: 14rpx;
        background-color: #F7F7F7;
        
    }
    &_item_active{
            color: #ff6d44;
            border: 2rpx solid #ff6d44;
            background-color: #FFF8F2;
        }
}

// 商品规格样式-end

::v-deep .uni-numbox{
    border-radius: 10rpx !important;
    background-color: #F7F7F7 !important;
    
}
::v-deep .uni-numbox__value{
    border-radius: 10rpx !important;
    background-color: #F7F7F7 !important;
}
::v-deep .uni-numbox__minus, ::v-deep .uni-numbox__plus{
    // border: 1rpx solid #888888 !important;
    // color: #fff !important;
    background-color: #f0f0f0 !important;
}
// ::v-deep .uni-numbox--text{
//     color: #fff !important;
// }
// ::v-deep .uni-numbox--disabled{
//     color: #cecece !important;
// }
</style>