jiaju/pages/commodity/commodity.vue

<template>
    <view class="content">
           <page-head text="详情" navState="true"></page-head>
        <swiper class="swiper" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)"
            :indicator-dots="indicatorDots">
            <swiper-item v-for="(item,index) in commodityData.detail.images">
                <view class="swiper-item uni-bg-red">
                    <image class="img" :src="item" mode="aspectFill"></image>
                </view>
            </swiper-item>
       
        </swiper>
        <view class="commodityTitle">
            <view class="title">
               {{ commodityData.detail.name}}
            </view> 
            
            <view class="dz" v-if="item.customized==1">
                可定制
            </view>
            <view class="money" style="display: flex;">
               <text >￥</text>{{ commodityData.detail.price}}
			   <view v-if="ifMember && ifMemberPrice && commodityData.detail.vip_price" style="margin-left: 40rpx;">会员价：<text >￥</text> {{ commodityData.detail.vip_price}}</view>
            </view>
            <view class="specification" @click="specificationFun()">
                <view class="text">
                    <image src="../../static/guig.png" class="img" mode=""></image>
                    <view class="p">
                        规格：查看详细规格
                    </view>
                </view>
                <image class="jt" src="../../static/jta.png" mode=""></image>
            </view>
        </view>

        <view class="commodityCon">
            <view class="title">
                商品信息
            </view>

            <view class="">
                <view class="p" v-html="commodityData.detail.content"></view>
       <!--         <view class="p">类别：布艺沙发 </view>
                <view class="p">型号：1502 </view>
                <view class="p">家具材质：布艺 </view>
                <view class="p">国产/进口：国产 </view>
                <view class="p">家装风格：简约现代 </view>
                <view class="p">是否可定制：不可定制 </view>
                <view class="p">是否可拆洗：不可拆洗 </view>
                <view class="p">面料材质：其它 </view>
                <view class="p">沙发骨架材质：实木 是否带储物空间：不带储物空间 沙发
                </view> -->
              
            </view>

        </view>
        <view class="similarity">
            <view class="title">
                为您找到以下相似商品
            </view>
        </view>
        <view class="classifyConList">
            <view class="list" v-for="(item,index) in commodityData.similarGoods" @click="details(item.id)">
                <image class="img" :src="item.cover" mode="aspectFill"></image>
                <view class="text">
                    {{item.name}}
                </view>
                <view class="textA">
                    <view class="money">
						<text >￥</text>{{item.price}}
                    </view>
                    <view class="btn" v-if="item.customized==1">
                        可定制
                    </view>
                </view>
				<view class="memberPrice" v-if="ifMember && ifMemberPrice && item.vip_price">
				    会员价：￥{{item.vip_price}}
				</view>
            </view>
        
        
        </view>
    
        <view class="subscriptionButton" @click="makePhoneCallFun()">
        立即订购
        </view>
         <view class="make" :class="popupState?'makedis':''">
             
         </view>
        <view class="popup" :class="popupState?'popupB':''">
            <image class="imgGb" @click="specificationFunState()" src="../../static/47.png" mode=""></image>
            <view class="popupTitle">
                  <image class="img" @click="previewImg(commodityData.sku[current].picture || commodityData.detail.cover)" :src="commodityData.sku[current].picture || commodityData.detail.cover" mode="aspectFill"></image>
                  <view class="money" v-if="money">
                       <text >￥</text> {{money}}
					   <view v-if="ifMember && ifMemberPrice && vip_price" style="margin-left: 40rpx;margin-bottom: 10rpx;">会员价：<text >￥</text> {{vip_price}}</view>
                  </view>
                  <view class="money textmoney" v-else>
                      暂无报价
                  </view>
                 
                  <view class="text">
                      （点击上方封面可查看大图）
                  </view>
            </view>
            
            <view class="popupList">
                 <view class="tit">
                     规格
                 </view>
                 
                 <view class="" style="height: 460rpx;overflow: hidden;overflow-y: scroll;margin-top: 20rpx;">
                     <view class="list" @click="popupListFun(index)" :class="item.state?'on':''" v-for="(item,index) in commodityData.sku">
                         {{item.title}}
                     </view>
                 </view>
                 <view class="button" @click="makePhoneCallFun()">
                     立即订购
                 </view>
            </view>
           
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                indicatorDots: true,
                commodityData:{},
                money:"",
				vip_price:"",
                popupState:false,
				ifMember:false,
				ifMemberPrice:false,
				current:0
            }
        },
		onShow() {
			this.ifMember = uni.getStorageSync('ifMember');
			this.ifMemberPrice = uni.getStorageSync('ifMemberPrice');
		},
        onLoad(option) {
             this.id=option.id
             this.getData()
        },
        methods: {
            makePhoneCallFun(){
                uni.makePhoneCall({
                	phoneNumber: this.commodityData.purchase_phone //仅为示例
                });
            },
             specificationFun(){
					this.popupState=true
					this.money=this.commodityData.sku[0].price
					this.vip_price=this.commodityData.sku[0].vip_price
               for (var i = 0; i < this.commodityData.sku.length; i++) {
                  this.commodityData.sku[i].state=false
               }
                this.commodityData.sku[0].state =true
             },
             specificationFunState(){
                    this.popupState=false
             },
           
               previewImg(logourl) {
                             let _this = this;
                             let imgsArray = [];
                             imgsArray[0] = logourl
                             uni.previewImage({
                                 current: 0,
                                 urls: imgsArray
                             });
                         },
             popupListFun(index){
                for (var i = 0; i < this.commodityData.sku.length; i++) {
                   this.commodityData.sku[i].state=false
                } 
				this.commodityData.sku[index].state =true
				this.money=this.commodityData.sku[index].price;
				this.vip_price = this.commodityData.sku[index].vip_price;
				this.current = index;
				this.commodityData.sku=[...this.commodityData.sku]
             },
             details(id) {
                 uni.navigateTo({
                     url: '/pages/commodity/commodity?id=' + id
                 });
             },
               getData() {
                   this.request({
                       url: this.host + "/api/spu/detail",
                       type: "post",
                       data: {
                           id: this.id,
                       },
                       success: (res) => {
                           this.commodityData=res.data.data
                       }
                   })
               },
        }
    }
</script>

<style>
    .swiper {
        width: 100%;
        height: 480rpx;
    }

    .swiper .img {
        width: 100%;
        height: 480rpx;
    }

    .title {
        font-size: 40rpx;
        color: #000000;
        font-weight: bold;
        line-height: 70rpx;
    }

    .commodityTitle {
        background-color: #FFFFFF;
        padding: 40rpx 40rpx 40rpx;
    }

    .commodityCon {
        padding: 40rpx 40rpx 40rpx;
    }

    .commodityTitle .dz {
        width: 100rpx;
        height: 32rpx;
        color: #FFFFFF;
        margin-top: 20rpx;
        font-size: 20rpx;
        border-radius: 25rpx;
        background-color: #D33333;
        text-align: center;
        line-height: 32rpx;
    }

    .commodityTitle .money {
        font-size: 48rpx;
        font-weight: bold;
        color: #D33333;
        margin-top: 15rpx;
    }

    .specification {
        width: 100%;
        height: 86rpx;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 0 20rpx;
        align-items: center;
        border: 4rpx solid #000000;
        margin-top: 25rpx;
    }

    .specification .text {
        display: flex;
        align-items: center;
    }

    .specification .img {
        width: 37rpx;
        height: 37rpx;
        margin-right: 25rpx;
    }

    .specification .p {
        font-size: 30rpx;
    }

    .specification .jt {
        width: 14rpx;
        height: 26rpx;
    }

    .content {
        background-color: #F5F5F5;
    }

    .commodityCon .title {
        font-size: 36rpx;
        text-align: center;
    }

    .commodityCon .p {
        margin-top: 20rpx;
        color: #8c8c9b;
        line-height: 46rpx;
        font-size: 24rpx;
    }

    .similarity .title {
        font-size: 36rpx;
        text-align: center;
        color: #d33333;
        font-weight: bold;
        margin-bottom: 32rpx;

    }
    .subscriptionButton{
         width: 668rpx;
         height: 98rpx;
         background-color: #D33333;color: #FFFFFF;
         text-align: center;
         line-height: 98rpx;
         font-size: 36rpx;
         position: fixed;
         bottom: 10rpx;
         left: 50%;
         border-radius: 25rpx;
         margin: auto;
         margin-bottom: 20rpx;
         margin-left: -334rpx;
    }
    .popup{
        position: fixed;
        left: 0rpx;
        background-color: #FFFFFF;
        width: 100%;
        height: 950rpx;
        padding: 0 40rpx;
        box-sizing: border-box;
        border-radius: 30rpx;
        z-index: 5;
    bottom: -1200rpx;
        border: 0rpx;
        transition: all 1s;
    }
    .popupB{
           bottom: -0rpx;
    }
    .make{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        display: none;
        background-color: rgba(0,0,0,0.5);
    }
    .makedis{
        display: block;
    }
    .popupTitle .img{
        width: 284rpx;
        height: 284rpx;
        margin: auto;
        border-radius: 30rpx;
        margin-top: -184rpx;
    }
    .popupTitle{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .popupTitle .money{
        font-size: 48rpx;
        text-align: center;
        font-weight: bold;
            line-height: 58rpx;
        color: #D33333;
    }
    .popupTitle .text{
        font-size: 24rpx;
        text-align: center;
        color: #c0c0c0;
    }
    .popupList .tit{
        margin-top: 32rpx;
        font-size: 30rpx
    }
    .popupList .list{
        border: 2rpx solid #666666;
        width: 100%;
        height: 106rpx;
        margin-bottom: 20rpx;
        padding: 0 42rpx;
        font-size: 24rpx;line-height: 45rpx;
        padding-top: 10rpx;
        box-sizing: border-box;
              color: #666666;
    }
	.popupList .list:last-child{
		margin-bottom: 0;
	}
    .popupList .button{
        width: 668rpx;
        height: 98rpx;
        background-color: #D33333;border-radius: 30rpx;
        margin-top: 60rpx;
        text-align: center;
        position: absolute;
        bottom: 34rpx;
        line-height: 98rpx;
        color: #FFFFFF;
        font-size: 36rpx
    }
    .popupList .on{
            background-color: #D33333;
            color: #FFFFFF;
    }
    .popup .imgGb{
        width: 66rpx;
        height: 66rpx;
        position: absolute;
        right: 20rpx;
        top: 20rpx;
    }
    
    .classifyConList {
        display: flex;
        box-sizing: border-box;
        flex-wrap: wrap;
        padding: 0 40rpx;
     
        padding-bottom: 150rpx;
        align-content: flex-start;
        justify-content: space-between;
    }
    
    .classifyConList .list {
        width: 320rpx;
        /* height: 433rpx; */
        margin-top: 30rpx;
        border-radius: 30rpx;
        background-color: #FFFFFF;
		padding-bottom: 30rpx;
    }
    
    .classifyConList .list .img {
        width: 100%;
        height: 214rpx;
        border-radius: 30rpx;
    }
    
    .classifyConList .list .text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        font-size: 28rpx;
        margin-top: 15rpx;
        line-height: 40rpx;
        padding: 0 12rpx;
        font-weight: bold;
    }
    
    .classifyConList .list .textA {
        display: flex;
        margin-top: 10rpx;
        padding: 0 12rpx;
        align-items: center;
        justify-content: space-between;
    }
    
    .classifyConList .list .textA .money {
        font-size: 28rpx;
        font-weight: bold;
    }
    
    .classifyConList .list .textA .btn {
        font-size: 18rpx;
        font-weight: bold;
        width: 86rpx;
        height: 28rpx;
        border-radius: 14rpx;
        color: #FFFFFF;
        line-height: 28rpx;
        text-align: center;
        line-height: 28rpx;
        background-color: #D33333;
    }
    .popupTitle .textmoney{
        font-size: 40rpx;
        line-height: 48rpx;
            line-height: 58rpx;
        
    }
	.memberPrice{
		font-size: 28rpx;font-weight: bold;padding-left: 20rpx;margin-top: 10rpx;
	}
</style>