商品详情

This commit is contained in:
luyuan 2020-07-07 14:45:57 +08:00
parent d94fb80ee2
commit 2910af7bd7
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
5 changed files with 110 additions and 42 deletions

View File

@ -119,6 +119,11 @@ export default {
return vm.$u.post('Store/getStoreImgVideoList', {
id: id
});
},
goodsInfo({id}){
return vm.$u.post('goods/goodsInfo', {
goods_id: id
});
}
}
}

View File

@ -91,7 +91,7 @@
"https" : false
},
"router" : {
"base" : "history"
"base" : ""
}
}
}

View File

@ -1,12 +1,14 @@
<template>
<view class="guige">
<view class="title">
选择尺码
{{title}}
</view>
<view class="item">
<text>均码</text>
<text :class="select == 1 ? 'xuanzhong' : ''">S</text>
<text>M</text>
<text v-for="(i,j) in item" @click="select = j" :class="select == j ? 'xuanzhong' : ''" :key="j">
{{i}}
</text>
<!-- <text @click="select = 1" :class="select == 1 ? 'xuanzhong' : ''">S</text> -->
<!-- <text @click="select = 2" :class="select == 2 ? 'xuanzhong' : ''">M</text> -->
</view>
</view>
</template>
@ -48,7 +50,14 @@ export default {
name:"guige",
data(){
return {
select:true
select:0
}
},
props:['item','title'],
watch:{
select(){
// console.log(this.select)
this.$emit("sel",this.select)
}
}
}

View File

@ -12,33 +12,27 @@
<view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
<view class="button" style="background:rgba(253,211,96,1);" @click="buy(2)">加入购物车</view>
<view class="button" style="background:rgba(255,120,15,1);" @click="buy(1)">立即购买</view>
<u-toast ref="uToast" />
</view>
<u-popup v-model="show" mode="bottom">
<scroll-view scroll-y="true" class="popup">
<view>
<view class="head">
<image class="image"></image>
<image class="image" :src="info.goods_image"></image>
<view class="info">
<text class="u-line-2">套装新款小个子春季时尚韩版短袖衬
衫套装新款小个子春季时尚韩版...套装新款小个子春季时尚韩版短袖衬衫套装新款小个子春季时尚韩版...</text>
<text>99</text>
<text class="u-line-2">{{info.goods_name}}</text>
<text>{{info.goods_price}}</text>
</view>
</view>
<guige></guige>
<guige></guige>
<guige></guige>
<guige></guige>
<guige></guige>
<guige></guige>
<guige></guige>
<guige @sel="self" ref="guige" v-for="(item,index) in info.spec_value" :key="index" :title="info.spec_name[index]" :item="item"></guige>
<view class="num">
<text>购买数量</text>
<u-number-box v-model="value" @change="valChange"></u-number-box>
</view>
<view style="height:180rpx"></view>
</view>
<u-toast ref="uToast" />
</scroll-view>
</u-popup>
</view>
@ -48,36 +42,68 @@
import guige from "./guige"
export default {
name:"tloos",
props: ['id'],
props: ['id','info'],
components:{
guige
},
data(){
return {
show:true,
value:1
show:false,
value:1,
sel:"",
quanxuan:false
}
},
methods: {
//
addCart() {
this.$u.api.addCart({
goods_id: this.id,
quantity: 1,
}).then(res => {
this.$refs.uToast.show({
title: res.message,
type: res.errCode == 0 ? 'success' : 'warning',
})
})
},
buy(type){
let that = this;
if(this.show){
if(this.info.spec_value == null){
this.$emit("buy",{type,value:that.value})
}else if(this.quanxuan){
this.$emit("buy",{type,value:that.value})
}else{
this.$refs.uToast.show({
title: '请选择规格',
type: 'warning',
})
}
}else{
this.show = true
}
},
valChange(e) {
console.log('当前值为: ' + e.value)
console.log(this.value)
},
self(){
// console.log(this.$refs.guige)
let index = 0;
let arr = [];
for(let i in this.info.spec_value){
// console.log(i)
// console.log(this.$refs.guige[index++].select)
// index++;
let sel = this.$refs.guige[index++].select
if(sel != 0){
arr.push(sel)
}
}
// console.log(arr.length)
if(arr.length == index){
this.sel = arr.join("|")
this.quanxuan = true
// console.log(this.sel)
}
}
},
watch:{
sel(){
// console.log(this.sel)
this.$emit('xuanze',this.sel)
}
}
}
</script>
<style lang="scss" scoped>

View File

@ -23,7 +23,8 @@
<view class="rich">
<rich-text :nodes="goodsInfo.mobile_body"></rich-text>
</view>
<tloos :id="goodsInfo.goods_commonid"></tloos>
<tloos @buy="buy" @xuanze="xuanze" :id="goodsInfo.goods_commonid" :info="info"></tloos>
<u-toast ref="uToast" />
</view>
</template>
<script>
@ -35,6 +36,9 @@ export default {
return {
list: [],
goodsInfo: {},
info:{},
glist:[],
id:0
}
},
components:{
@ -43,9 +47,24 @@ export default {
},
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;
@ -59,6 +78,15 @@ export default {
}
})
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])
}
},
}