GoodsAttr.vue
3.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<template>
<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
<view class="cu-dialog">
<view class="goods-data">
<view class="thumb">
<image src="https://axhub.im/pro/bb1f7bd347952764/images/%E9%A6%96%E9%A1%B5/u640-0.png" mode=""></image>
</view>
<view class="item">
<view class="title">
<text></text>
</view>
<view class="price">
<text class="min">￥</text>
<text class="max">299</text>
<text class="min">.00</text>
</view>
<view class="inventory">
<text>库存：3000</text>
</view>
</view>
</view>
<view class="attr-size">
<view class="attr-list" v-for="(item,index) in AttrSizeList" :key="index">
<view class="title">
<text>{{item.attr}}</text>
</view>
<view class="size-list">
<div class="list" v-for="(value,idx) in item.SizeList"
:class="{'action':AttrSizeList[index].index === idx}"
@click.stop="onAttrSize(item,value,index,idx)" :key="idx">
<text>{{value.size}}</text>
</div>
</view>
</view>
<view class="attr-number" @click.stop="onStop">
<view class="tit">数量</view>
<view class="number">
<text class="iconfont icon-jian"></text>
<input type="tel" value="1" maxlength="8">
<text class="iconfont icon-jia"></text>
</view>
</view>
</view>
<view class="attr-btn">
<view class="add-cart" v-if="BuyType === 1" @click="onConfirm(BuyType)">加入购物车</view>
<view class="add-buy" v-if="BuyType === 1" @click="onConfirm(BuyType)">立即购买</view>
<view class="confirm" v-if="BuyType === 2 || BuyType === 3" @click="onConfirm(BuyType)">确定</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShow: false,
AttrIndex: 0,
SizeIndex: 0,
AttrSizeList:[
{
index: 0,
attr: '颜色',
SizeList: [
{
index: 0,
size: '白色'
},{
index: 1,
size: '黑色'
},{
index: 2,
size: '粉丝'
},{
index: 3,
size: '灰色'
},
],
},{
index: 0,
attr: '尺码',
SizeList: [
{
index: 0,
size: 'M尺码'
},{
index: 1,
size: 'L尺码'
},{
index: 2,
size: 'XL尺码'
},{
index: 3,
size: 'XXL尺码'
},
],
}
],
// 购买类型
BuyType: 0,
};
},
methods:{
/**
* 显示
* @param {Number} type 1 点击选择 2 加入购物 3 立即购买
*/
show(type){
this.BuyType = type;
this.isShow = true;
},
hide(){
this.isShow = false;
},
onStop(){
},
/**
* 属性选择点击
*/
onAttrSize(item,value,index,idx){
this.AttrSizeList[index].index = idx;
this.AttrIndex = item.index;
this.SizeIndex = value.index;
},
/**
* 确认点击
*/
onConfirm(type){
uni.navigateTo({
url: '/pages/ConfirmOrder/ConfirmOrder'
})
}
}
}
</script>
<style scoped lang="scss">
@import 'GoodsAttr.scss';
</style>