deming/pageB/sdetails/index.vue

<template>
    <view class="sdetails">
        <u-swiper :list="list" height="500" border-radius="0"></u-swiper>
        <view class="info">
            <view class="title">
                <text>{{ goodsInfo.store_name }}</text>{{ goodsInfo.goods_name }}        
            </view>
            <view class="pic">
                <text>￥{{ goodsInfo.goods_price }}</text>
                <s>￥{{ goodsInfo.goods_marketprice }}</s>
            </view>
        </view>
        <view class="hr"></view>
		<!-- <navs :value="领券"></navs> -->
        <navs :value="'产品规格'"></navs>
		<navs :value="'产品颜色'"></navs>
		<navs :value="'选择尺码'"></navs>
        <view class="xiangqing">
            <view class="heng"></view>
            <view class="title">商品详情</view>
            <view class="heng"></view>
        </view>
		<view class="rich">
			<rich-text :nodes="goodsInfo.mobile_body"></rich-text>
		</view>
        <tloos @buy="buy" @xuanze="xuanze" :id="goodsInfo.goods_commonid" :info="info"></tloos>
        <u-toast ref="uToast" />
    </view>
</template>
<script>
import navs from "../components/sdetails/navs"
import tloos from "../components/sdetails/tloos"
export default { 
    name:"sdetails",
    data() {
        return {
            list: [],
            goodsInfo: {},
            info:{},
            glist:[],
            id:0
        }
	},
    components:{
        navs,
        tloos
    },
	onLoad(option) {
        this.getGoodsDetails(option.id);
       
	},
	methods: {
        buy(info){
            if(info.type == 2){
                this.$u.api.addCart({
                    goods_id: this.id,
                    quantity: info.value,
                }).then(res => {
                    this.$refs.uToast.show({
                        title: res.errCode[1],
                        type: res.errCode == 0 ? 'success' : 'warning',
                    })
                })
            }
        },
		getGoodsDetails(id) {
            this.id = id;
			this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
				if (res.errCode == 0) {
					this.goodsInfo = res.data.goods;
					let list = [];
					res.data.goods_image[0].forEach(item => {
						let temp = {
							image: item
						}
						list.push(temp);
					})
					this.list = list;
					// console.log(this.goodsInfo.mobile_body);
				}
            })
            this.$u.api.goodsInfo({id}).then((res)=>{
                console.log(res)
                this.info = res.data.goods;
                this.glist = res.data.spec_list;
            })
        },
        xuanze(id){
            console.log(id)
            this.getGoodsDetails(this.glist[id])
        }
	},
}
</script>
<style lang="scss" scoped>
.sdetails{
	padding-bottom: 98rpx;
    .info{
        padding: 30rpx;
        .title{
            flex-wrap: wrap;
			margin-bottom: 30rpx;
            >text{
                padding: 13rpx;
                font-size: 24rpx;
                color:#fff;
                margin-right: 13rpx;
                background-color: #FF780F;
                display: inline-block;
                border-radius: 25rpx;
            }
        }
        .pic{
            >text{
                font-size: 32rpx;
                color: #FF3131;
            }
            >s{
                font-size: 26rpx;
                color: #999;
                display: inline-block;
                margin-left: 30rpx;
            }
        }
    }
    .hr{
        width: 100%;
        height: 20rpx;
        background-color: #ececec;
    }
    .xiangqing{
        display: flex;
        height: 85rpx;
        background-color: #ececec;
        align-items: center;
        justify-content: center;
        .heng{
            width: 79rpx;
            height: 2rpx;
            background-color: #a9a9a9;

        }
        font-size: 28rpx;
        color: #999;
        .title{
            margin: 0 20rpx;
        }
    }
	.rich {
		width: 100%;
	}
}
</style>