152 lines
3.9 KiB
Vue
152 lines
3.9 KiB
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;
|
|
this.goodsInfo.goods_image_mobile.forEach(item => {
|
|
let temp = {
|
|
image: item
|
|
}
|
|
this.list.push(temp);
|
|
})
|
|
// 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> |