xmhjc-applet/pages/market/ProductDetails.vue

<template>
    <view class="ProductDetails">
        <view class="PDswiper">
            <u-swiper class="PDswiper"
                    height="750rpx"
					:list="swiperlist"
					indicatorMode="line"
                    keyName="fileUrl"
					circular
					indicator
                    radius='0'
				></u-swiper>
		</view>
    
        <view class="menus">
            <view class="menus_1">
                <view class="menus_1_right">
                    <text class="mr1">￥</text>
                    <text class="mr2">{{ ProductDetails.price || 0 }}</text>
                    <!-- <text class="mr1" v-if="ProductDetails.decimal">{{ '.'+ ProductDetails.decimal }}</text> -->
                </view>
                <view class="menus_1_left">
                    销量: {{ProductDetails.salesVolume || 0}}
                </view>
            </view>
            <!-- <view class="menus_2">
                每满200-30
            </view> -->
            <view class="menus_3">
                {{ProductDetails.title}}
            </view>
            <view class="menus_4">
                {{ProductDetails.subTitle}}
            </view>
        </view>

        <view class="ProductType">
            <!-- 商品类型 -->
            <ProductType ref="getProductType" :info='ProductDetails' />
        </view>
        <!-- 评论 -->
        <view class="comment">
            <view class="commentTop">
                <view class="commentTop_left">
                    评价 <text class="commentTop_left_num">({{reviewsTotal}})</text>
                </view>
                <view v-if="reviewsTotal!=0" @click="openLink('ProductEvaluate')" class="commentTop_right">
                    全部评论
                    <u--image width="40rpx" height="40rpx" src="/static/myinfo/btn_right.png" ></u--image>
                </view>
            </view>
            <view v-if="reviewsTotal!=0" class="commentTop">
                <view @click="checkCommentbtn(item,index)" :class="iscommentbtn==index?'check_commentbtn':'commentbtn'" v-for="(item,index) in commentbtnList" :key="index">
                    {{item.name}}
                </view>
            </view>
            <view v-if="reviewsTotal!=0" class="commentTop">
                <view class="commentUser">
                    <view class="Userimg">
                        <u--image width="60rpx" height="60rpx" src="/static/btn_mine.png" ></u--image>
                    </view>
                    <view class="Userimg_r">
                        <view style="font-size: 28rpx;font-weight: 500;color: #666666;margin-left: 8rpx;">
                            {{showtypetopl.author}}
                        </view>
                        <view>
                            <u-rate readonly active-color="#ffcf00" inactive-color="#b2b2b2" :count="5" v-model="showtypetopl.score"></u-rate>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="reviewsTotal!=0" class="commentTop">
                <view class="commentcontent">
                    {{showtypetopl.content}}
                </view>
            </view>
            <view style="margin-top:100rpx" v-if="reviewsTotal==0">
                该商品暂无评价
            </view>
        </view>

        <view class="parseBox">
            <view class="parseBox_title">详情</view>
            <u-parse class="vHtml" :content="ProductDetails.content"></u-parse>
        </view>

        <view class="parseBox">
            <view class="parseBox_title">服务条款</view>
            <u-parse class="vHtml" :content="ProductDetails.serviceTerms"></u-parse>
            <!-- <view class="parseBox_item" v-for="(item,index) in TermServiceList" :key="index">
                {{item}}
            </view> -->
        </view>

        <view class="tuijian">
            <view class="tj_title">为您推荐</view>
            <rowList :listdata="newsList" ></rowList>
        </view>

        <view style="height: 150rpx;"></view>


        <view class="bottomMeun">
            <view class="bm_item">
                <u--image width="48rpx" height="48rpx" src="/static/market/btn_kefu.png" ></u--image>
                客服
            </view>
            <view @click="toCollection()" class="bm_item">
                <u--image width="48rpx" height="48rpx" :src="ProductDetails.favorites?'/static/market/iconm_shoucang.png':'/static/market/btn_shoucang.png'" ></u--image>
                {{ProductDetails.favorites?'取消':'收藏'}}
            </view>
            <view @click="openLink('market')" class="bm_item" style="position: relative">
                <u--image width="48rpx" height="48rpx" src="/static/market/btn_gouwc.png" ></u--image>
                购物车
                <view class="gouwudot" v-if="shoppingCartTotal!=0" >
                    {{ shoppingCartTotal }}
                </view>
            </view>
            <view class="bm_btn">
                <view @click="addShoppingCart()" class="bm_btn1">加入购物车</view>
                <view @click="openLink('market')" class="bm_btn2">去结算</view>
            </view>
        </view>
        
    </view>
</template>
<script>
import {productPage,productdetail,productcollection,reviewsPage,addShoppingCart,cancelCollection} from '@/http/api/common.js'

import rowList from '@/pages/market/base/rowList.vue' //左右布局
import ProductType from './base/ProductType.vue'
import * as util from '@/pages/util/util.js'
export default {
    components:{
        rowList,
        ProductType
    },
data() {
return {
    newsList:[],
    rateValue:5,
    reviewsTotal:'0',
    swiperlist:[],
    TermServiceList:[],
    ProductDetails:{
        title:'',
        DESCRIPTION:'',
        serviceTerms:'',
        num:'999',
        decimal:"99",
        xiaoliang:'999',
        newsHtml:'',
        favorites:false
    },
    commentbtnList:[
        {
            name:'全部',
            key:''
        },
        {
            name:'好评',
            key:'3'
        },
        {
            name:'中评',
            key:'2'
        },
        {
            name:'差评',
            key:'1'
        },
    ],
    iscommentbtn:0,
    showtypetopl:{
        author:'',
        score:5,
        content:''
    },
    shoppingCartTotal:0,
    badgetype:'warning'
}
},
async onLoad(e) {
    if (e?.id) {
        //获取商品详情
        await this.getproductdetail(e?.id)
        //获取两条推荐商品
        await this.getProductPage()
        //获取评论列表
        await this.getreviewsPage()
    }
    this.shoppingCartTotal = uni.getStorageSync('shoppingCartTotal')
    
},
methods: {
     async getProductPage(){
        let data = {
            priceAsc:false, //价格正序排序
            priceDesc:false, //价格倒序排序
            salesVolumeDesc:false, //销量倒序排序
            keyword:'', //标题，副标题搜索
            pageSize:2,
            pageNum:1,
            categoryId:this.ProductDetails.categoryId //类目id
        }
        
        let res =  await productPage(data)
        if (res.data.code == 200) {
            let newrows = res.data.data?.rows || []

            this.newsList.push(...newrows)
        }
    },
    async getproductdetail(id){
        let res = await productdetail(id)
        if (res.data.code == 200) {
            this.ProductDetails = res.data.data
            
            if (this.ProductDetails.status == '0') {
                //状态为0 表示商品已下架
                util.toastFunc('该商品已下架',()=>{
                    // 返回上一级
                    uni.navigateBack({
                        delta: 1
                    });
                })
            }

            // 商品轮播图
            this.swiperlist = res.data.data?.fileList || []

            //服务条款
            // if (res.data.data?.serviceTerms) {
            //     this.TermServiceList = res.data.data?.serviceTerms.split(',')
            // }


        }else{
            util.toastFunc('该商品已下架',()=>{
                //请求商品详情失败 返回上一页
                uni.navigateBack({ delta: 1 })
            })
        }
    },
    async toCollection(){
        //收藏
        let res = null
        if (this.ProductDetails.favorites) {
            // favorites true 为收藏过了 调用取消收藏接口
            res = await cancelCollection(this.ProductDetails.id)
        }else{
            res = await productcollection(this.ProductDetails.id)
        }
        
        if (res.data.code == 200) {
            let  title = this.ProductDetails.favorites ? '取消收藏成功' :'收藏成功'
            uni.showToast({
                title: title,
                duration: 2000
            });
            
            this.ProductDetails.favorites = !this.ProductDetails.favorites
        }
    },
    async getreviewsPage(){
        //获取评论列表
        // 1=差评；2=中评；3=好评
        let res = await reviewsPage({
            rating:'',
            productId:this.ProductDetails.id
        })
        if (res.data.code == 200) {
            this.plList = res.data.data.rows
            this.reviewsTotal = res.data.data.total
            //默认选中全部类型
            this.checkCommentbtn(this.commentbtnList[0],0)
        }
    },
    checkCommentbtn(item,index){
        this.iscommentbtn = index
        if (item.key != '') {
            this.showtypetopl = this.plList.find(v=>v.rating == item.key)
        }else{
            this.showtypetopl = this.plList[0]
        }

        // //去评论列表
        // uni.navigateTo({
        //     url: '/pages/market/ProductEvaluate?checkindex='+index
        // });
    },
    async addShoppingCart(){
        //加入购物车
        if (this.$refs?.getProductType?.popupShow) {
            let refgetData = this.$refs?.getProductType?.getCheckData()
            if (refgetData) {
                // if (refgetData.num == '') {
                //     util.toastFunc('请选择商品数量')
                //     return
                // }
                // if (refgetData.porList.length>0) {
                //     console.log('refgetData.porList',refgetData.porList);
                //     let findQuantity = refgetData.porList.find(v => v.quantity == '')
                //     console.log(findQuantity);
                //     if (!findQuantity) {
                //         util.toastFunc('配方数量不能为空')
                //         return
                //     }
                // }
                let data = {
                    productId:this.ProductDetails.id , //产品id
                    specsId:refgetData.specsId, //规格id
                    num:refgetData.num , //个数
                    porList:refgetData.porList//配方id列表
                }
                
                let res =  await addShoppingCart(data)
                if (res.data.code == 200) {
                    this.$refs?.getProductType?.close()
                    uni.showToast({
                        title: '添加购物车成功',
                        duration: 2000
                    });
                }
            }
        }else{
            this.$refs?.getProductType?.openPopup()
        }
    },
    openLink(type){
        if (type == 'market') {
            //去购物车
            uni.switchTab({
                url: '/pages/market/market'
            });
        }else if (type == 'ProductEvaluate') {
            //去评论列表
            uni.navigateTo({
                url: '/pages/market/ProductEvaluate?id='+this.ProductDetails.id
            });
        }
    }
}
}
</script>

<style>
.ProductDetails{
    width: 750rpx;
    min-height: 100vh;
    background: #F1F1F1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.PDswiper{
    width: 750rpx;
    height: 750rpx;
}
.menus{
    width: 702rpx;
    max-height: 348rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    margin-top: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.menus_1{
    width: 654rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 24rpx;
}
.menus_1_right{
    display: flex;
    align-items: center;
}
.mr1{
    height: 33rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #F6514F;
    line-height: 36rpx;
}
.mr2{
    height: 47rpx;
    font-size: 40rpx;
    font-weight: bold;
    color: #F6514F;
    line-height: 36rpx;
}
.menus_1_left{
    width: 123rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;
}
.menus_2{
    width: 654rpx;
    height: 64rpx;
    background: #FFEDEC;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-top: 24rpx;
}
.menus_3{
    width: 640rpx;
    max-height: 85rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;
    margin-top: 24rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.menus_4{
    width: 640rpx;
    min-height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    margin: 24rpx 0;

    /* display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1; */
}
.ProductType{
    margin-top: 24rpx;
}
.comment{
    width: 702rpx;
    height: 434rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.commentTop{
    width: 640rpx;
    min-height: 45rpx;
    margin-top: 24rpx;
    display: flex;
    justify-content: space-between;
}
.commentTop_left{
    width: 220rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 36rpx;
    display: flex;
    justify-content: space-between;
}
.commentTop_left_num{
    width: 124rpx;
    height: 37rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;
}
.commentTop_right{
    display: flex;
    width: 160rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;
}
.commentbtn{
    width: 151rpx;
    height: 64rpx;
    background: #DDDDDD;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    line-height: 64rpx;
    text-align: center;
}
.check_commentbtn{
    width: 151rpx;
    height: 64rpx;
    background: #46A6FF;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFF;
    line-height: 64rpx;
    text-align: center;
}
.commentcontent{
    width: 644rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.Userimg{
    width: 80rpx;
    height: 80rpx;
    background: #EEEEEE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.commentUser{
    display: flex;
}
.Userimg_r{
    margin-left: 24rpx;
}
.parseBox{
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-top: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.parseBox_title{
    width: 654rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 36rpx;
    margin-top: 24rpx;
}
.vHtml{
    width: 654rpx;
    margin: 24rpx 0;
}
.vHtml >>> img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
    height: auto;
}

.TermService{
    margin-top: 24rpx;
    width: 702rpx;
    height: 410rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.parseBox_item{
    margin-top: 24rpx;
    width: 640rpx;
    height: 76rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
}
.tuijian{
    margin-top: 24rpx;
    /* background: #FFFFFF; */
}
.tj_title{
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    text-align: center;
    margin-top: 24rpx;
}
.bottomMeun{
    width: 750rpx;
    height: 98rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;

    position: fixed;
    z-index: 10088;
    bottom: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.bm_item{
    width: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 24rpx;
    font-weight: bold;
    color: #666666;
    line-height: 36rpx;
}
.bm_btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 450rpx;
    height: 72rpx;
    justify-content: space-evenly;
}
.bm_btn1{
    width: 200rpx;
    height: 72rpx;
    background: #FFB048;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 72rpx;
    text-align: center;
}
.bm_btn2{
    width: 200rpx;
    height: 72rpx;
    background: #46A6FF;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 72rpx;
    text-align: center;
}
.gouwudot{
    position: absolute;
    right: -8rpx;
    color: #fff;
    width: 32rpx;
    height: 32rpx;
    background: red;
    font-size: 20rpx;
    line-height: 32rpx;
    border-radius: 50%;
    text-align: center;
}
</style>