xbx #50
@ -127,6 +127,11 @@ export default {
|
||||
return vm.$u.post('Store/getStoreImgVideoList', {
|
||||
id: id
|
||||
});
|
||||
},
|
||||
goodsInfo({id}){
|
||||
return vm.$u.post('goods/goodsInfo', {
|
||||
goods_id: id
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
64
pageB/components/sdetails/guige.vue
Normal file
64
pageB/components/sdetails/guige.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<view class="guige">
|
||||
<view class="title">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="item">
|
||||
<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>
|
||||
<style lang="scss" scoped>
|
||||
.guige{
|
||||
margin-top: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: #ececec solid 2rpx;
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 29rpx;
|
||||
|
||||
}
|
||||
.item{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
>text{
|
||||
min-width: 120rpx;
|
||||
height: 60rpx;
|
||||
background-color: #ececec;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 26rpx;
|
||||
}
|
||||
.xuanzhong{
|
||||
border: #ff780f 1rpx solid;
|
||||
color: #FF780F;
|
||||
background-color: #FFF1E6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name:"guige",
|
||||
data(){
|
||||
return {
|
||||
select:0
|
||||
}
|
||||
},
|
||||
props:['item','title'],
|
||||
watch:{
|
||||
select(){
|
||||
// console.log(this.select)
|
||||
this.$emit("sel",this.select)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,36 +1,109 @@
|
||||
<template>
|
||||
<view class="tloos">
|
||||
<view class="navs">
|
||||
<image></image>
|
||||
店铺
|
||||
<view>
|
||||
<view class="tloos">
|
||||
<view class="navs">
|
||||
<image></image>
|
||||
店铺
|
||||
</view>
|
||||
<view class="navs" style="margin-right:30rpx">
|
||||
<image></image>
|
||||
客服
|
||||
</view>
|
||||
<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>
|
||||
|
||||
</view>
|
||||
<view class="navs" style="margin-right:30rpx">
|
||||
<image></image>
|
||||
客服
|
||||
</view>
|
||||
<view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
|
||||
<view class="button" style="background:rgba(253,211,96,1);" @click="addCart">加入购物车</view>
|
||||
<view class="button" style="background:rgba(255,120,15,1);">立即购买</view>
|
||||
<u-toast ref="uToast" />
|
||||
<u-popup v-model="show" mode="bottom">
|
||||
<scroll-view scroll-y="true" class="popup">
|
||||
<view>
|
||||
<view class="head">
|
||||
<image class="image" :src="info.goods_image"></image>
|
||||
<view class="info">
|
||||
<text class="u-line-2">{{info.goods_name}}</text>
|
||||
<text>￥{{info.goods_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<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>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import guige from "./guige"
|
||||
export default {
|
||||
name:"tloos",
|
||||
props: ['id'],
|
||||
props: ['id','info'],
|
||||
components:{
|
||||
guige
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
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(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>
|
||||
@ -42,6 +115,7 @@ export default {
|
||||
width: 100%;
|
||||
bottom:0;
|
||||
border-top: 1rpx solid #ececec;
|
||||
z-index: 1000000;
|
||||
.navs{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -67,5 +141,48 @@ export default {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.popup{
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
max-height: 750rpx;
|
||||
.head{
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
.image{
|
||||
width: 195rpx;
|
||||
height: 195rpx;
|
||||
border-radius: 10rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
padding: 21rpx 0;
|
||||
justify-content: space-between;
|
||||
margin-left: 27rpx;
|
||||
flex-direction: column;
|
||||
>text:first-child{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 30rpx;
|
||||
color: #ff3131;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num{
|
||||
height: 84rpx;
|
||||
display: flex;
|
||||
border-bottom: #ececec solid 2rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
>text{
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -23,18 +23,22 @@
|
||||
<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>
|
||||
import navs from "../components/sdetails/navs"
|
||||
import tloos from "../components/sdetails/tloos"
|
||||
export default {
|
||||
export default {
|
||||
name:"sdetails",
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
goodsInfo: {},
|
||||
goodsInfo: {},
|
||||
info:{},
|
||||
glist:[],
|
||||
id:0
|
||||
}
|
||||
},
|
||||
components:{
|
||||
@ -42,10 +46,25 @@ export default {
|
||||
tloos
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getGoodsDetails(option.id);
|
||||
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;
|
||||
@ -58,8 +77,17 @@ export default {
|
||||
// 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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user