吉鹏 / gulu-vue

Compare View

Commits (2)

b9fb65756 购物车和推荐产品根据sk_id来对应价格 Browse Code »

喻鹏
2020-05-27 00:13:07 +0800
30ace3024 Merge branch 'master' of http://121.40.31.31:8888/jp/gulu-vue Browse Code »

喻鹏
2020-05-27 00:13:33 +0800

Showing 5 changed files Show diff stats

src/components/CommodityCard/CommodityCard.vue

1	<template>	1	<template>
2	<view	2	<view
3	class="card"	3	class="card"
4	@tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"	4	@tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5	>	5	>
6	<image	6	<image
7	mode="widthFix"	7	mode="widthFix"
8	:src="goods.imgurl?goods.imgurl:goods.pic"	8	:src="goods.imgurl?goods.imgurl:goods.pic"
9	></image>	9	></image>
10	<view class="name">{{goods.name?goods.name:goods.p_name}}</view>	10	<view class="name">{{goods.name?goods.name:goods.p_name}}</view>
11	<view class="info">	11	<view class="info">
12	<view class="priceBox">	12	<view class="priceBox">
13	<view class="price">{{goods.oldPrice !== undefined?goods.oldPrice:goods.real_price}}</view>	13	<view class="price">{{goods.oldPrice !== undefined?goods.oldPrice:goods.real_price}}</view>
14	<view class="originCost">	14	<view class="originCost">
15	{{goods.price !== undefined?goods.price:goods.old_price}}	15	{{goods.price !== undefined?goods.price:goods.old_price}}
16	</view>	16	</view>
17	</view>	17	</view>
18	<view class="trade_num">{{goods.trade_num}}人购买</view>	18	<view class="trade_num">{{goods.trade_num}}人购买</view>
19	</view>	19	</view>
20	</view>	20	</view>
21	</template>	21	</template>
22		22
23	<script>	23	<script>
24	export default {	24	export default {
25	props: {	25	props: {
26	/**	26	/**
27	* 商品数据	27	* 商品数据
28	*/	28	*/
29	goods: {	29	goods: {
30	id: Number,	30	id: Number,
31	imgurl: String,	31	imgurl: String,
32	name: String,	32	name: String,
33	rsSon: Object,	33	rsSon: Object,
34	originCost: String,	34	originCost: String,
35	price: String,	35	price: String,
36	trade_num: String,	36	trade_num: String,
37	goodType: String	37	goodType: String
38	}	38	}
39		39
40	},	40	},
41	created () {	41	created () {
42	},	42	},
43	data () {	43	data () {
44	return {	44	return {
45		45
46	}	46	}
47	},	47	},
48	methods: {	48	methods: {
49	toGoods (id,sk_id) {	49	toGoods (id,sk_id) {
50	console.log('---', '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id)	50	console.log('---', '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id)
51	uni.navigateTo({	51	uni.navigateTo({
52	url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,	52	url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,
53	success: res => {},	53	success: res => {},
54	fail: () => {},	54	fail: () => {},
55	complete: () => {}	55	complete: () => {}
56	})	56	})
57	}	57	}
58	}	58	}
59	}	59	}
60	</script>	60	</script>
61		61
62	<style lang="scss">	62	<style lang="scss">
63	image {	63	image {
64	width: 100%;	64	width: 100%;
65	height: 120rpx;	65	height: 120rpx;
66	}	66	}
67	.name {	67	.name {
68	width: 92%;	68	width: 92%;
69	height: 54rpx;	69	height: 54rpx;
70	padding: 5px 4%;	70	padding: 5px 4%;
71	display: -webkit-box;	71	display: -webkit-box;
72	-webkit-box-orient: vertical;	72	-webkit-box-orient: vertical;
73	-webkit-line-clamp: 2;	73	-webkit-line-clamp: 2;
74	text-align: justify;	74	text-align: justify;
75	overflow: hidden;	75	overflow: hidden;
76	font-size: 24rpx;	76	font-size: 24rpx;
77	color: #333333;	77	color: #333333;
78	}	78	}
79	.info {	79	.info {
80	display: flex;	80	display: flex;
81	justify-content: space-between;	81	justify-content: space-between;
82	align-items: center;	82	align-items: center;
83	width: 92%;	83	width: 92%;
84	padding: 5px 4% 5px 4%;	84	padding: 5px 4% 5px 4%;
85	.priceBox {	85	.priceBox {
86	display: flex;	86	display: flex;
87	justify-content: space-between;	87	justify-content: space-between;
88	align-items: center;	88	align-items: center;
89	.price {	89	.price {
90	color: #eb5d3b;	90	color: #eb5d3b;
91	font-size: 28rpx;	91	font-size: 28rpx;
92	font-weight: 600;	92	font-weight: 600;
93	margin-right: 10rpx;	93	margin-right: 10rpx;
94	}	94	}
95	.originCost {	95	.originCost {
96	text-decoration: line-through;	96	text-decoration: line-through;
97	color: #999999;	97	color: #999999;
98	font-size: 20rpx;	98	font-size: 20rpx;
99	}	99	}
100	}	100	}
101	.trade_num {	101	.trade_num {
102	color: #999999;	102	color: #999999;
103	font-size: 20rpx;	103	font-size: 20rpx;
104	}	104	}
105	}	105	}
106	</style>	106	</style>
107		107

src/pages/cart/cart.vue

Diff comments View file @30ace30

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<block v-if="cartList.length==0">	3	<block v-if="cartList.length==0">
4		4
5	</block>	5	</block>
6	<block v-else>	6	<block v-else>
7	<view class="card">	7	<view class="card">
8	<view class="cardHeader">	8	<view class="cardHeader">
9	<view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"	9	<view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10	@tap="pChange(pIsoPen)">	10	@tap="pChange(pIsoPen)">
11	<span class="correct"></span>	11	<span class="correct"></span>
12	</view>	12	</view>
13	<image src="../../static/store.png" mode="aspectFill"></image>	13	<image src="../../static/store.png" mode="aspectFill"></image>
14	<text>非常戴镜</text>	14	<text>非常戴镜</text>
15	</view>	15	</view>
16		16
17	<view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"	17	<view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
18	@longpress="delCart(item.cart_id,index)">	18	@longpress="delCart(item.cart_id,index)">
19	<view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"	19	<view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20	@tap="Change(childIsOpen[index],index)">	20	@tap="Change(childIsOpen[index],index)">
21	<span class="correct"></span>	21	<span class="correct"></span>
22	</view>	22	</view>
23	<view class="imageWrap">	23	<view class="imageWrap">
24	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>	24	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
25	</view>	25	</view>
26	<view class="goodInfo">	26	<view class="goodInfo">
27	<!-- <view class="imageWrap">	27	<!-- <view class="imageWrap">
28	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>	28	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
29	</view> -->	29	</view> -->
30	<view class="infoRight">	30	<view class="infoRight">
31	<view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view>	31	<view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view>
32	<!-- <view class="describ"> -->	32	<!-- <view class="describ"> -->
33	<uni-collapse accordion="true" >	33	<uni-collapse accordion="true" >
34	<uni-collapse-item showAnimation='true'	34	<uni-collapse-item showAnimation='true'
35	:title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' \|\| '暂无'" >	35	:title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' \|\| '暂无'" >
36	<text class="describ">	36	<text class="describ">
37	<block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">	37	<block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
38	{{tag.label+`  `}}	38	{{tag.label+`  `}}
39	</block>	39	</block>
40	</text>	40	</text>
41	<!-- <text>	41	<!-- <text>
42	<block v-for="tag in item.tag.prod_tag_style" :key="tag.value">	42	<block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
43	{{tag.label+`  `}}	43	{{tag.label+`  `}}
44	</block>	44	</block>
45	</text> -->	45	</text> -->
46	</uni-collapse-item>	46	</uni-collapse-item>
47	</uni-collapse>	47	</uni-collapse>
48	<!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->	48	<!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
49	<!-- </view> -->	49	<!-- </view> -->
50	<view class="priceBox">	50	<view class="priceBox">
51	<view class="price">￥{{item.nowPrice*item.num}}</view>	51	<view class="price">￥{{item.nowPrice*item.num}}</view>
52	<text class="maxCount">(限购{{maxCount}}副)</text>	52	<text class="maxCount">(限购{{maxCount}}副)</text>
53	<view class="counter">	53	<view class="counter">
54	<view class="btn" disabled="this.addDisabled" type="default"	54	<view class="btn" disabled="this.addDisabled" type="default"
55	@tap="counter(index,false,item)">-</view>	55	@tap="counter(index,false,item)">-</view>
56	<text>{{item.num}}</text>	56	<text>{{item.num}}</text>
57	<view class="btn" disabled="this.desDisabled" type="default"	57	<view class="btn" disabled="this.desDisabled" type="default"
58	@tap="counter(index,true,item)">+</view>	58	@tap="counter(index,true,item)">+</view>
59	</view>	59	</view>
60	</view>	60	</view>
61	</view>	61	</view>
62	</view>	62	</view>
63	</view>	63	</view>
64	</view>	64	</view>
65	</block>	65	</block>
66	<view class="footer">	66	<view class="footer">
67	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>	67	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
68	<view class="footerRight">	68	<view class="footerRight">
69	<navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">	69	<navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
70	<view class="paybtn" >立即结算</view>	70	<view class="paybtn" >立即结算</view>
71	</navigator>	71	</navigator>
72	</view>	72	</view>
73	</view>	73	</view>
74		74
75	</view>	75	</view>
76	</template>	76	</template>
77		77
78	<script>	78	<script>
79	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'	79	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
80	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'	80	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
81	import store from '@/store'	81	import store from '@/store'
82		82
83	export default {	83	export default {
84	components: { UniCollapse, UniCollapseItem },	84	components: { UniCollapse, UniCollapseItem },
85	data() {	85	data() {
86	return {	86	return {
87	totalPrice: 0,	87	totalPrice: 0,
88	pIsoPen: false,	88	pIsoPen: false,
89	// childIsOpen:[],	89	// childIsOpen:[],
90	maxCount: 20	90	maxCount: 20
91	}	91	}
92	},	92	},
93	computed: {	93	computed: {
94		94
95	cartList() {	95	cartList() {
96	// console.log('cart-list', this.$store.state.cart.cartList);	96	// console.log('cart-list', this.$store.state.cart.cartList);
97	return this.$store.state.cart.cartList	97	return this.$store.state.cart.cartList
98	},	98	},
99	childIsOpen() {	99	childIsOpen() {
100	const temp = []	100	const temp = []
101	temp.length = this.$store.state.cart.cartList.length	101	temp.length = this.$store.state.cart.cartList.length
102	for (let i = 0; i < temp.length; i++) {	102	for (let i = 0; i < temp.length; i++) {
103	temp[i] = false	103	temp[i] = false
104	}	104	}
105	console.log('this.childisOPne===>', temp)	105	console.log('this.childisOPne===>', temp)
106	return temp	106	return temp
107	}	107	}
108	},	108	},
109	onLoad: function() {	109	onLoad: function() {
110	// store.dispatch('cart/addCart', {	110	// store.dispatch('cart/addCart', {
111	// uid: this.$store.state.user.userInfo.uid,	111	// uid: this.$store.state.user.userInfo.uid,
112	// openid: this.$store.state.user.userInfo.openid,	112	// openid: this.$store.state.user.userInfo.openid,
113	// mp_id: 7,	113	// mp_id: 7,
114	// sk_id: 7,	114	// sk_id: 7,
115	// num: 1,	115	// num: 1,
116	// pid: 8,	116	// pid: 8,
117	// price: 128,	117	// price: 128,
118	// checkedSKU:{},	118	// checkedSKU:{},
119	// })	119	// })
120	store.dispatch('cart/getCartList', {	120	store.dispatch('cart/getCartList', {
121	uid: this.$store.state.user.userInfo.uid // 用户id	121	uid: this.$store.state.user.userInfo.uid // 用户id
122	})	122	})
123	},	123	},
124		124
125	methods: {	125	methods: {
126		126
127	toGoods(id, sk_id) {	127	toGoods(id, sk_id) {
128	console.log('cart-list', this.$store.state.cart.cartList);	128	console.log('cart-list', this.$store.state.cart.cartList);
		129	console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id)
129	console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id)	130	uni.navigateTo({
130	uni.navigateTo({	131	url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,
131	url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,	132	success: res => {},
132	success: res => {},	133	fail: () => {},
133	fail: () => {},	134	complete: () => {}
134	complete: () => {}	135	})
135	})	136	// uni.navigateTo({
136	// uni.navigateTo({	137	// url: '../frameDetail/frameDetail?oderId=' + id,
137	// url: '../frameDetail/frameDetail?oderId=' + id,	138	// success: res => {},
138	// success: res => {},	139	// fail: () => {},
139	// fail: () => {},	140	// complete: () => {}
140	// complete: () => {}	141	// })
141	// })	142	// console.log('toGoods =====> id:' + id + '======>type:' + type)
142	// console.log('toGoods =====> id:' + id + '======>type:' + type)	143	// switch (type) {
143	// switch (type) {	144	// case 1:
144	// case 1:	145	// uni.navigateTo({
145	// uni.navigateTo({	146	// url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
146	// url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,	147	// success: res => {},
147	// success: res => {},	148	// fail: () => {},
148	// fail: () => {},	149	// complete: () => {}
149	// complete: () => {}	150	// })
150	// })	151	// break
151	// break	152	// case 2:
152	// case 2:	153	// uni.navigateTo({
153	// uni.navigateTo({	154	// url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
154	// url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,	155	// success: res => {},
155	// success: res => {},	156	// fail: () => {},
156	// fail: () => {},	157	// complete: () => {}
157	// complete: () => {}	158	// })
158	// })	159	// break
159	// break	160	// case 3:
160	// case 3:	161	// uni.navigateTo({
161	// uni.navigateTo({	162	// url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
162	// url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,	163	// success: res => {},
163	// success: res => {},	164	// fail: () => {},
164	// fail: () => {},	165	// complete: () => {}
165	// complete: () => {}	166	// })
166	// })	167	// break
167	// break	168	// case 4:
168	// case 4:	169	// uni.navigateTo({
169	// uni.navigateTo({	170	// url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
170	// url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,	171	// success: res => {},
171	// success: res => {},	172	// fail: () => {},
172	// fail: () => {},	173	// complete: () => {}
173	// complete: () => {}	174	// })
174	// })	175	// break
175	// break	176	// default :
176	// default :	177	// break
177	// break	178	// }
178	// }	179	},
179	},	180
180		181	counter(index, isadd, item) {
181	counter(index, isadd, item) {	182	// console.log('===>>counter ===>num',num)
182	// console.log('===>>counter ===>num',num)	183	// console.log('===>>counter ===>isadd',isadd)
183	// console.log('===>>counter ===>isadd',isadd)	184	console.log('item=====>',item)
184	console.log('item=====>',item)	185	console.log('num=====>',item.num)
185	console.log('num=====>',item.num)	186	let nums = parseInt(item.num)
186	let nums = parseInt(item.num)	187	if (isadd) {
187	if (isadd) {	188	if (nums >= this.maxCount) {
188	if (nums >= this.maxCount) {	189	this.addDisabled = true
189	this.addDisabled = true	190	} else {
190	} else {	191	this.addDisabled = true
191	this.addDisabled = true	192	// 修改num
192	// 修改num	193	if (this.childIsOpen[index]) {
193	if (this.childIsOpen[index]) {	194	this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
194	this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice	195	}
195	}	196	store.dispatch('cart/modiCart', {
196	store.dispatch('cart/modiCart', {	197	uid: this.$store.state.user.userInfo.uid,
197	uid: this.$store.state.user.userInfo.uid,	198	openid: this.$store.state.user.userInfo.openid,
198	openid: this.$store.state.user.userInfo.openid,	199	mp_id: item.mp_id,
199	mp_id: item.mp_id,	200	sk_id: item.sk_id,
200	sk_id: item.sk_id,	201	price: item.nowPrice,
201	price: item.nowPrice,	202	pid: item.pid,
202	pid: item.pid,	203	num: nums + 1,
203	num: nums + 1,	204	cart_id: item.cart_id,
204	cart_id: item.cart_id,	205	args: {
205	args: {	206	index: index,
206	index: index,	207	isadd: isadd
207	isadd: isadd	208	}
208	}	209	})
209	})	210	this.addDisabled = false
210	this.addDisabled = false	211	}
211	}	212	} else {
212	} else {	213	if (nums <= 1) {
213	if (nums <= 1) {	214	this.desDisabled = true
214	this.desDisabled = true	215	} else {
215	} else {	216	this.desDisabled = false
216	this.desDisabled = false	217	// post 请求修改相关参数
217	// post 请求修改相关参数	218	if (this.childIsOpen[index]) {
218	if (this.childIsOpen[index]) {	219	this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
219	this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice	220	}
220	}	221	store.dispatch('cart/modiCart', {
221	store.dispatch('cart/modiCart', {	222	uid: this.$store.state.user.userInfo.uid,
222	uid: this.$store.state.user.userInfo.uid,	223	openid: this.$store.state.user.userInfo.openid,
223	openid: this.$store.state.user.userInfo.openid,	224	mp_id: item.mp_id,
224	mp_id: item.mp_id,	225	sk_id: item.sk_id,
225	sk_id: item.sk_id,	226	price: item.nowPrice,
226	price: item.nowPrice,	227	pid: item.pid,
227	pid: item.pid,	228	num: nums - 1,
228	num: nums - 1,	229	cart_id: item.cart_id,
229	cart_id: item.cart_id,	230	args: {
230	args: {	231	index: index,
231	index: index,	232	isadd: isadd
232	isadd: isadd	233	}
233	}	234	})
234	})	235	this.desDisabled = true
235	this.desDisabled = true	236	}
236	}	237	}
237	}	238	// store.dispatch('cart/getCartList', {
238	// store.dispatch('cart/getCartList', {	239	// uid: this.$store.state.user.userInfo.uid // 用户id
239	// uid: this.$store.state.user.userInfo.uid // 用户id	240	// })
240	// })	241	},
241	},	242
242		243	Change(isopen, indexC) {
243	Change(isopen, indexC) {	244	// console.log('lalla===>',isopen)
244	// console.log('lalla===>',isopen)	245	this.childIsOpen[indexC] = !isopen
245	this.childIsOpen[indexC] = !isopen	246	if (!isopen) {
246	if (!isopen) {	247	this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
247	this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)	248	} else {
248	} else {	249	this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
249	this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)	250	}
250	}	251	let m = true
251	let m = true	252	for (let i = 0; i < this.childIsOpen.length; i++) {
252	for (let i = 0; i < this.childIsOpen.length; i++) {	253	m = m & this.childIsOpen[i]
253	m = m & this.childIsOpen[i]	254	}
254	}	255	if (m == 1) {
255	if (m == 1) {	256	this.pIsoPen = true
256	this.pIsoPen = true	257	} else {
257	} else {	258	this.pIsoPen = false
258	this.pIsoPen = false	259	}
259	}	260	},
260	},	261	pChange(isopen) {
261	pChange(isopen) {	262	this.pIsoPen = !isopen
262	this.pIsoPen = !isopen	263	for (let i = 0; i < this.childIsOpen.length; i++) {
263	for (let i = 0; i < this.childIsOpen.length; i++) {	264	this.childIsOpen[i] = !isopen
264	this.childIsOpen[i] = !isopen	265	}
265	}	266	if (this.pIsoPen) {
266	if (this.pIsoPen) {	267	// 计算总价逻辑
267	// 计算总价逻辑	268	if (this.childIsOpen.length != 0) {
268	if (this.childIsOpen.length != 0) {	269	for (let i = 0; i < this.childIsOpen.length; i++) {
269	for (let i = 0; i < this.childIsOpen.length; i++) {	270	if (this.childIsOpen[i]) {
270	if (this.childIsOpen[i]) {	271	this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
271	this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)	272	}
272	}	273	}
273	}	274	}
274	}	275	} else {
275	} else {	276	this.totalPrice = 0
276	this.totalPrice = 0	277	}
277	}	278	},
278	},	279	delCart(cart_id, index) {
279	delCart(cart_id, index) {	280	// console.log('userInfo',this.$store.state.user.userInfo)
280	// console.log('userInfo',this.$store.state.user.userInfo)	281	cart_id = parseInt(cart_id)
281	cart_id = parseInt(cart_id)	282	// console.log('delcart------>cart_id',cart_id)
282	// console.log('delcart------>cart_id',cart_id)	283	// console.log('cartlist====>delcart',this.$store.state.cart.cartList)
283	// console.log('cartlist====>delcart',this.$store.state.cart.cartList)	284	// console.log('delcart======>index',index)
284	// console.log('delcart======>index',index)	285	const uid=this.$store.state.user.userInfo.uid
285	const uid=this.$store.state.user.userInfo.uid	286	const openid=this.$store.state.user.userInfo.openid
286	const openid=this.$store.state.user.userInfo.openid	287	uni.showModal({
287	uni.showModal({	288	title: '是否删除该商品',
288	title: '是否删除该商品',	289	// content: '是否删除该商品',
289	// content: '是否删除该商品',	290	success: function (res) {
290	success: function (res) {	291	if (res.confirm) {
291	if (res.confirm) {	292	// this.$store.state.cart.cartList.splice(index,1)
292	// this.$store.state.cart.cartList.splice(index,1)	293	store.dispatch('cart/delCart', {
293	store.dispatch('cart/delCart', {	294	uid: uid,
294	uid: uid,	295	openid: openid,
295	openid: openid,	296	cart_id: cart_id, // 要修改的购物车id
296	cart_id: cart_id, // 要修改的购物车id	297	arg: index // 由于action 传参是能接收两参数，因此将index放入对象
297	arg: index // 由于action 传参是能接收两参数，因此将index放入对象	298	})
298	})	299	console.log('用户点击确定')
299	console.log('用户点击确定')	300	}
300	}	301	}
301	}	302	})
302	})	303	}
303	}	304	}
304	}	305	}
305	}	306	</script>
306	</script>	307
307		308	<style lang="scss">
308	<style lang="scss">	309	.content {
309	.content {	310	min-height: 100vh;
310	min-height: 100vh;	311	background-color: #f2f2f2;
311	background-color: #f2f2f2;	312	display: flex;
312	display: flex;	313	flex-direction: column;
313	flex-direction: column;	314	align-items: center;
314	align-items: center;	315	justify-content: space-between;
315	justify-content: space-between;	316	padding: 20rpx 40rpx;
316	padding: 20rpx 40rpx;	317	box-sizing: border-box;
317	box-sizing: border-box;	318
318		319	.partentCheck{
319	.partentCheck{	320	width: 16px;
320	width: 16px;	321	height: 16px;
321	height: 16px;	322	border-radius: 22px;
322	border-radius: 22px;	323	border: 1px solid #CFCFCF;
323	border: 1px solid #CFCFCF;	324	background-color: #FFFFFF;
324	background-color: #FFFFFF;	325	margin: 6px;
325	margin: 6px;	326	}
326	}	327	.partentChecked{
327	.partentChecked{	328	width: 18px;
328	width: 18px;	329	height: 18px;
329	height: 18px;	330	border-radius: 22px;
330	border-radius: 22px;	331	background-color: #FF6B4A;
331	background-color: #FF6B4A;	332	margin: 6px;
332	margin: 6px;	333	.correct {
333	.correct {	334	display: inline-block;
334	display: inline-block;	335	position: relative;
335	position: relative;	336	width: 10rpx;
336	width: 10rpx;	337	height: 2rpx;
337	height: 2rpx;	338	background: #FFFFFF;
338	background: #FFFFFF;	339	line-height: 0;
339	line-height: 0;	340	font-size: 0;
340	font-size: 0;	341	position: relative;
341	position: relative;	342	top: -7px;
342	top: -7px;	343	left: 4px;
343	left: 4px;	344	-webkit-transform: rotate(45deg);
344	-webkit-transform: rotate(45deg);	345	}
345	}	346	.correct:after {
346	.correct:after {	347	content: '/';
347	content: '/';	348	display: block;
348	display: block;	349	width: 16rpx;
349	width: 16rpx;	350	height: 2rpx;
350	height: 2rpx;	351	background: #FFFFFF;
351	background: #FFFFFF;	352	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
352	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);	353	}
353	}	354	}
354	}	355
355		356	.card{
356	.card{	357	background-color: #FFFFFF;
357	background-color: #FFFFFF;	358	border-radius: 16rpx;
358	border-radius: 16rpx;	359	box-sizing: border-box;
359	box-sizing: border-box;	360	padding: 36rpx 36rpx 36rpx 18rpx;
360	padding: 36rpx 36rpx 36rpx 18rpx;	361	display: flex;
361	display: flex;	362	flex-direction: column;
362	flex-direction: column;	363	align-items: center;
363	align-items: center;	364	justify-content: space-between;
364	justify-content: space-between;	365	margin-bottom: 180rpx;
365	margin-bottom: 180rpx;	366	.cardHeader{
366	.cardHeader{	367	width: 100%;
367	width: 100%;	368	height: 36rpx;
368	height: 36rpx;	369	display: flex;
369	display: flex;	370	align-items: center;
370	align-items: center;	371	justify-content: flex-start;
371	justify-content: flex-start;	372	margin-bottom: 20rpx;
372	margin-bottom: 20rpx;	373	image{
373	image{	374	height: 32rpx;
374	height: 32rpx;	375	width: 32rpx;
375	width: 32rpx;	376	padding-left: 6px;
376	padding-left: 6px;	377	padding-right: 10px;
377	padding-right: 10px;	378	}
378	}	379	text{
379	text{	380	// font-family: PingFangSC-Regular;
380	// font-family: PingFangSC-Regular;	381	font-size: 14px;
381	font-size: 14px;	382	color: #333333;
382	color: #333333;	383	letter-spacing: -0.26px;
383	letter-spacing: -0.26px;	384	}
384	}	385	}
385	}	386	.cardBody{
386	.cardBody{	387	width: 100%;
387	width: 100%;	388	min-height: 300rpx;
388	min-height: 300rpx;	389	display: flex;
389	display: flex;	390	align-items: center;
390	align-items: center;	391	justify-content: space-between;
391	justify-content: space-between;	392	.goodInfo{
392	.goodInfo{	393	width: 390rpx;
393	width: 390rpx;	394	display: flex;
394	display: flex;	395	flex-direction: row;
395	flex-direction: row;	396	justify-content: flex-start;
396	justify-content: flex-start;	397	padding-left: 6px;
397	padding-left: 6px;	398
398		399	.imageWrap{
399	.imageWrap{	400	height: 188rpx;
400	height: 188rpx;	401	width: 188rpx;
401	width: 188rpx;	402	margin-right: 28rpx;
402	margin-right: 28rpx;	403
403		404	image{
404	image{	405	border-radius: 4px;
405	border-radius: 4px;	406	height: 188rpx;
406	height: 188rpx;	407	width: 188rpx;
407	width: 188rpx;	408	}
408	}	409	}
409	}	410	.infoRight{
410	.infoRight{	411	display: flex;
411	display: flex;	412	flex-direction: column;
412	flex-direction: column;	413	align-items: flex-start;
413	align-items: flex-start;	414	justify-content: space-between;
414	justify-content: space-between;	415	min-height: 240rpx;
415	min-height: 240rpx;	416	.goodName{
416	.goodName{	417	display: -webkit-box;
417	display: -webkit-box;	418	-webkit-box-orient: vertical;
418	-webkit-box-orient: vertical;	419	-webkit-line-clamp: 2;
419	-webkit-line-clamp: 2;	420	text-align: justify;
420	text-align: justify;	421	overflow: hidden;
421	overflow: hidden;	422	font-size: 28rpx;
422	font-size: 28rpx;	423	color: #333333;
423	color: #333333;	424	}
424	}	425	.describ{
425	.describ{	426	width: 100%;
426	width: 100%;	427	// min-height: 80rpx;
427	// min-height: 80rpx;	428	// box-sizing: border-box;
428	// box-sizing: border-box;	429	// padding: 10rpx;
429	// padding: 10rpx;	430	font-size: 20rpx;
430	font-size: 20rpx;	431	letter-spacing: -0.23px;
431	letter-spacing: -0.23px;	432	text-align: justify;
432	text-align: justify;	433	color: #999999;
433	color: #999999;	434	// background: #F9F9F9;
434	// background: #F9F9F9;	435	// display: flex;
435	// display: flex;	436	// justify-content: center;
436	// justify-content: center;	437	// align-items: center;
437	// align-items: center;	438	// text{
438	// text{	439	// text-overflow: -o-ellipsis-lastline;
439	// text-overflow: -o-ellipsis-lastline;	440	// overflow: hidden;
440	// overflow: hidden;	441	// text-overflow: ellipsis;
441	// text-overflow: ellipsis;	442	// display: -webkit-box;
442	// display: -webkit-box;	443	// -webkit-line-clamp: 2;
443	// -webkit-line-clamp: 2;	444	// line-clamp: 2;
444	// line-clamp: 2;	445	// -webkit-box-orient: vertical;
445	// -webkit-box-orient: vertical;	446	// }
446	// }	447	// .icon {
447	// .icon {	448	// width: 0;
448	// width: 0;	449	// height: 0;
449	// height: 0;	450	// border-left: 5px transparent;
450	// border-left: 5px transparent;	451	// border-right: 5px transparent;
451	// border-right: 5px transparent;	452	// border-top: 5px #979797;
452	// border-top: 5px #979797;	453	// border-bottom: 0 transparent;
453	// border-bottom: 0 transparent;	454	// border-style: solid;
454	// border-style: solid;	455	// position: relative;
455	// position: relative;	456	// margin-left: 10px;
456	// margin-left: 10px;	457	// // transform: scaleY(-1);
457	// // transform: scaleY(-1);	458	// }
458	// }	459	// .icon::after{
459	// .icon::after{	460	// content: '';
460	// content: '';	461	// position: absolute;
461	// position: absolute;	462	// top: -6.5px;
462	// top: -6.5px;	463	// left: -5px;
463	// left: -5px;	464	// border-left: 5px transparent;
464	// border-left: 5px transparent;	465	// border-right: 5px transparent;
465	// border-right: 5px transparent;	466	// border-top: 5px #FFFFFF;
466	// border-top: 5px #FFFFFF;	467	// border-bottom: 0 transparent;
467	// border-bottom: 0 transparent;	468	// border-style: solid;
468	// border-style: solid;	469	// }
469	// }	470	}
470	}	471	.priceBox{
471	.priceBox{	472	display: flex;
472	display: flex;	473	justify-content: space-between;
473	justify-content: space-between;	474	align-items: center;
474	align-items: center;	475	// margin-top: 26px;
475	// margin-top: 26px;	476	width: 100%;
476	width: 100%;	477	font-size: 14px;
477	font-size: 14px;	478	color: #999999;
478	color: #999999;	479	.maxCount{
479	.maxCount{	480	color: #999999;
480	color: #999999;	481	font-size: 24rpx;
481	font-size: 24rpx;	482	}
482	}	483	.price{
483	.price{	484	color: #FF6B4A;
484	color: #FF6B4A;	485	font-size: 28rpx;
485	font-size: 28rpx;	486	}
486	}	487	.counter{
487	.counter{	488	display: flex;
488	display: flex;	489	flex-direction: row;
489	flex-direction: row;	490	justify-content: space-between;
490	justify-content: space-between;	491	align-items: center;
491	align-items: center;	492	font-size: 28rpx;
492	font-size: 28rpx;	493	color: #333333;
493	color: #333333;	494	width: 122rpx;
494	width: 122rpx;	495	.btn{
495	.btn{	496	display: flex;
496	display: flex;	497	justify-content: center;
497	justify-content: center;	498	line-height: 32rpx;
498	line-height: 32rpx;	499	height: 32rpx;
499	height: 32rpx;	500	width: 32rpx;
500	width: 32rpx;	501	background-color: #F2F2F2;
501	background-color: #F2F2F2;	502	color: #CFCFCF;
502	color: #CFCFCF;	503	}
503	}	504	}
504	}	505	}
505	}	506	}
506	}	507	}
507	}	508	}
508	}	509	}
509	}	510
510		511	.footer{
511	.footer{	512	position: fixed;
512	position: fixed;	513	left: 0;
513	left: 0;	514	bottom: 0px;
514	bottom: 0px;	515	height: 112rpx;
515	height: 112rpx;	516	width: 100%;
516	width: 100%;	517	background-color: #FFFFFF;
517	background-color: #FFFFFF;	518	font-size: 16px;
518	font-size: 16px;	519	display: flex;
519	display: flex;	520	justify-content: space-between;
520	justify-content: space-between;	521	align-items: center;
521	align-items: center;	522	.footerLeft{
522	.footerLeft{	523	display: flex;
523	display: flex;	524	justify-content: center;
524	justify-content: center;	525	align-items: center;
525	align-items: center;	526	width: 50%;
526	width: 50%;	527	color: #333333;
527	color: #333333;	528	text{
528	text{	529	color: #FF6B4A;
529	color: #FF6B4A;	530	}
530	}	531	}
531	}	532	.footerRight{
532	.footerRight{	533	display: flex;
533	display: flex;	534	justify-content: flex-end;
534	justify-content: flex-end;	535	align-items: center;
535	align-items: center;	536	width: 50%;
536	width: 50%;	537	margin-right: 26rpx;
537	margin-right: 26rpx;	538	.paybtn{
538	.paybtn{	539	display: flex;
539	display: flex;	540	justify-content: center;
540	justify-content: center;	541	align-items: center;
541	align-items: center;	542	background: #FF6B4A;
542	background: #FF6B4A;	543	border-radius: 20px;
543	border-radius: 20px;	544	border-radius: 20px;
544	border-radius: 20px;	545	color: #FFFFFF;
545	color: #FFFFFF;	546	width: 204rpx;
546	width: 204rpx;	547	height: 80rpx;
547	height: 80rpx;	548	}
548	}	549	}
549	}	550
550		551	}
551	}	552	}
552	}	553
553		554	</style>
554	</style>	555

src/pages/frameDetail/frameDetail.vue

Diff comments View file @30ace30

1	<template>	1	<template>
2	<view class="container">	2	<view class="container">
3	<view class="D1">	3	<view class="D1">
4	<!-- 轮播图 -->	4	<!-- 轮播图 -->
5	<swiper	5	<swiper
6	class="swiperImage"	6	class="swiperImage"
7	:indicator-dots="true"	7	:indicator-dots="true"
8	:autoplay="true"	8	:autoplay="true"
9	:interval="4000"	9	:interval="4000"
10	:duration="500"	10	:duration="500"
11	>	11	>
12	<swiper-item	12	<swiper-item
13	v-for="(item, index) in goodInfo.pics"	13	v-for="(item, index) in goodInfo.pics"
14	:key="index"	14	:key="index"
15	>	15	>
16	<image	16	<image
17	:src="item"	17	:src="item"
18	mode="scaleToFill"	18	mode="scaleToFill"
19	></image>	19	></image>
20	</swiper-item>	20	</swiper-item>
21	</swiper>	21	</swiper>
22	<view class="D1_price">￥{{goodInfo.p_sale_price \|\| '暂无'}}<span class="D1_number">{{goodInfo.trade_num \|\| '暂无'}}人购买过</span></view>	22	<view class="D1_price">￥{{goodInfo.p_sale_price \|\| '暂无'}}<span class="D1_number">{{goodInfo.trade_num \|\| '暂无'}}人购买过</span></view>
23	<view class="D1_name"><span class="D1_name1">{{goodInfo.p_name \|\| '暂无'}}</span></view>	23	<view class="D1_name"><span class="D1_name1">{{goodInfo.p_name \|\| '暂无'}}</span></view>
24	<view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>	24	<view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25	</view>	25	</view>
26	<view	26	<view
27	class="D2"	27	class="D2"
28	v-if="updateGoodType == 2 \|\| updateGoodType == 4"	28	v-if="updateGoodType == 2 \|\| updateGoodType == 4"
29	>	29	>
30	<view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>	30	<view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31	<view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>	31	<view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32	<view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>	32	<view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33	</view>	33	</view>
34	<view	34	<view
35	class="D2"	35	class="D2"
36	v-if="updateGoodType == 1"	36	v-if="updateGoodType == 1"
37	>	37	>
38	<view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>	38	<view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39	<view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>	39	<view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40	<view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>	40	<view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41	</view>	41	</view>
42	<view	42	<view
43	class="D2"	43	class="D2"
44	v-if="updateGoodType == 3"	44	v-if="updateGoodType == 3"
45	>	45	>
46	<view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>	46	<view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47	<view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>	47	<view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48	<view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>	48	<view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49	</view>	49	</view>
50	<view class="D3">	50	<view class="D3">
51	<view class="screenBar">	51	<view class="screenBar">
52	<view	52	<view
53	v-for="item in screenItems"	53	v-for="item in screenItems"
54	:key="item.current"	54	:key="item.current"
55	@click="tabChange(item.current)"	55	@click="tabChange(item.current)"
56	>	56	>
57	<view	57	<view
58	class="screenItem"	58	class="screenItem"
59	v-bind:class="{ active: current === item.current }"	59	v-bind:class="{ active: current === item.current }"
60	>{{ item.text \|\| '暂无' }}</view>	60	>{{ item.text \|\| '暂无' }}</view>
61	</view>	61	</view>
62	</view>	62	</view>
63	<view	63	<view
64	class="screen-item"	64	class="screen-item"
65	v-if="current === 1"	65	v-if="current === 1"
66	>	66	>
67	<view class="D3_list">	67	<view class="D3_list">
68	<view	68	<view
69	v-for="(item) in parameter"	69	v-for="(item) in parameter"
70	:key="item.key"	70	:key="item.key"
71	>	71	>
72	<image	72	<image
73	class="D3_image"	73	class="D3_image"
74	v-bind:src="item.img"	74	v-bind:src="item.img"
75	></image>	75	></image>
76	<span>{{item.standard \|\| '暂无'}}</span>	76	<span>{{item.standard \|\| '暂无'}}</span>
77	<span>{{item.slength \|\| '暂无'}}</span>	77	<span>{{item.slength \|\| '暂无'}}</span>
78	</view>	78	</view>
79	</view>	79	</view>
80	</view>	80	</view>
81	<view	81	<view
82	class="screen-item"	82	class="screen-item"
83	v-if="current === 0"	83	v-if="current === 0"
84	>	84	>
85	<view class="D3_list">	85	<view class="D3_list">
86	<!-- <block>	86	<!-- <block>
87	<view>主体</view>	87	<view>主体</view>
88	<view>商品产地：韩国</view>	88	<view>商品产地：韩国</view>
89	<view>包装清单：彩色隐形 * 1</view>	89	<view>包装清单：彩色隐形 * 1</view>
90	</block> -->	90	</block> -->
91	<!-- 迭代时建议配合接口修改为数组 -->	91	<!-- 迭代时建议配合接口修改为数组 -->
92	<view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">	92	<view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93	<view class="">	93	<view class="">
94	年龄：<view	94	年龄：<view
95	v-for="(item,index) in tag.prod_tag_age"	95	v-for="(item,index) in tag.prod_tag_age"
96	:key="index"	96	:key="index"
97	>	97	>
98	{{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>	98	{{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99	</view>	99	</view>
100	</view>	100	</view>
101	</view>	101	</view>
102	<view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">	102	<view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103	<view class="">	103	<view class="">
104	颜色：<view	104	颜色：<view
105	v-for="(item,index) in tag.prod_tag_color"	105	v-for="(item,index) in tag.prod_tag_color"
106	:key="index"	106	:key="index"
107	>	107	>
108	{{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>	108	{{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109	</view>	109	</view>
110	</view>	110	</view>
111	</view>	111	</view>
112	<view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">	112	<view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113	<view class="">	113	<view class="">
114	脸型：<view	114	脸型：<view
115	v-for="(item,index) in tag.prod_tag_face"	115	v-for="(item,index) in tag.prod_tag_face"
116	:key="index"	116	:key="index"
117	>	117	>
118	{{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>	118	{{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119	</view>	119	</view>
120	</view>	120	</view>
121	</view>	121	</view>
122	<view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">	122	<view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123	<view class="">	123	<view class="">
124	赠品：<view	124	赠品：<view
125	v-for="(item,index) in tag.prod_tag_freesend"	125	v-for="(item,index) in tag.prod_tag_freesend"
126	:key="index"	126	:key="index"
127	>	127	>
128	{{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>	128	{{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129	</view>	129	</view>
130	</view>	130	</view>
131	</view>	131	</view>
132	<view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">	132	<view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133	<view class="">	133	<view class="">
134	保险：<view	134	保险：<view
135	v-for="(item,index) in tag.prod_tag_insurance"	135	v-for="(item,index) in tag.prod_tag_insurance"
136	:key="index"	136	:key="index"
137	>	137	>
138	{{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>	138	{{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139	</view>	139	</view>
140	</view>	140	</view>
141	</view>	141	</view>
142	<view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">	142	<view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143	<view class="">	143	<view class="">
144	材质：<view	144	材质：<view
145	v-for="(item,index) in tag.prod_tag_metal"	145	v-for="(item,index) in tag.prod_tag_metal"
146	:key="index"	146	:key="index"
147	>	147	>
148	{{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>	148	{{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149	</view>	149	</view>
150	</view>	150	</view>
151	</view>	151	</view>
152	<view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">	152	<view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153	<view class="">	153	<view class="">
154	个性：<view	154	个性：<view
155	v-for="(item,index) in tag.prod_tag_personal"	155	v-for="(item,index) in tag.prod_tag_personal"
156	:key="index"	156	:key="index"
157	>	157	>
158	{{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>	158	{{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159	</view>	159	</view>
160	</view>	160	</view>
161	</view>	161	</view>
162	<view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">	162	<view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163	<view class="">	163	<view class="">
164	场景：<view	164	场景：<view
165	v-for="(item,index) in tag.prod_tag_sense"	165	v-for="(item,index) in tag.prod_tag_sense"
166	:key="index"	166	:key="index"
167	>	167	>
168	{{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>	168	{{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169	</view>	169	</view>
170	</view>	170	</view>
171	</view>	171	</view>
172	<view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">	172	<view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173	<view class="">	173	<view class="">
174	性别：<view	174	性别：<view
175	v-for="(item,index) in tag.prod_tag_sex"	175	v-for="(item,index) in tag.prod_tag_sex"
176	:key="index"	176	:key="index"
177	>	177	>
178	{{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>	178	{{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179	</view>	179	</view>
180	</view>	180	</view>
181	</view>	181	</view>
182	<view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">	182	<view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183	<view class="">	183	<view class="">
184	风格：<view	184	风格：<view
185	v-for="(item,index) in tag.prod_tag_style"	185	v-for="(item,index) in tag.prod_tag_style"
186	:key="index"	186	:key="index"
187	>	187	>
188	{{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>	188	{{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189	</view>	189	</view>
190	</view>	190	</view>
191	</view>	191	</view>
192	<view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">	192	<view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193	<view class="">	193	<view class="">
194	重量：<view	194	重量：<view
195	v-for="(item,index) in tag.prod_tag_weight"	195	v-for="(item,index) in tag.prod_tag_weight"
196	:key="index"	196	:key="index"
197	>	197	>
198	{{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>	198	{{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199	</view>	199	</view>
200	</view>	200	</view>
201	</view>	201	</view>
202	</view>	202	</view>
203	</view>	203	</view>
204	<view	204	<view
205	class="screen-item "	205	class="screen-item "
206	v-if="current ===2"	206	v-if="current ===2"
207	>	207	>
208	<view class="customerService">	208	<view class="customerService">
209	<view class="serviceItem">	209	<view class="serviceItem">
210	<view class="title">	210	<view class="title">
211	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>	211	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212	<text class="titleText">卖家服务</text>	212	<text class="titleText">卖家服务</text>
213	</view>	213	</view>
214	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>	214	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215	</view>	215	</view>
216	<view class="serviceItem">	216	<view class="serviceItem">
217	<view class="title">	217	<view class="title">
218	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>	218	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219	<text class="titleText">平台承诺</text>	219	<text class="titleText">平台承诺</text>
220	</view>	220	</view>
221	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>	221	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222	</view>	222	</view>
223	<view class="serviceItem">	223	<view class="serviceItem">
224	<view class="title">	224	<view class="title">
225	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>	225	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226	<text class="titleText">正品保证</text>	226	<text class="titleText">正品保证</text>
227	</view>	227	</view>
228	<view class="itemContent">向您保证所售商品均为正品行货</view>	228	<view class="itemContent">向您保证所售商品均为正品行货</view>
229	</view>	229	</view>
230	<view class="serviceItem2">	230	<view class="serviceItem2">
231	<view class="title">	231	<view class="title">
232	<text class="titleText">权利申明</text>	232	<text class="titleText">权利申明</text>
233	</view>	233	</view>
234	<view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>	234	<view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235	</view>	235	</view>
236	<view class="serviceItem2">	236	<view class="serviceItem2">
237	<view class="title">	237	<view class="title">
238	<text class="titleText">价格保证</text>	238	<text class="titleText">价格保证</text>
239	</view>	239	</view>
240	<view class="itemContent">	240	<view class="itemContent">
241	<view class="itemContent-child">	241	<view class="itemContent-child">
242	<text class="contentTitle">平台价:</text>	242	<text class="contentTitle">平台价:</text>
243	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>	243	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244	</view>	244	</view>
245	<view class="itemContent-child">	245	<view class="itemContent-child">
246	<text class="contentTitle">划线价:</text>	246	<text class="contentTitle">划线价:</text>
247	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>	247	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248	</view>	248	</view>
249	<view class="itemContent-child">	249	<view class="itemContent-child">
250	<text class="contentTitle">平折扣:</text>	250	<text class="contentTitle">平折扣:</text>
251	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>	251	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252	</view>	252	</view>
253	<view class="itemContent-child">	253	<view class="itemContent-child">
254	<text class="contentTitle">异常问题:</text>	254	<text class="contentTitle">异常问题:</text>
255	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>	255	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256	</view>	256	</view>
257		257
258	</view>	258	</view>
259	</view>	259	</view>
260	</view>	260	</view>
261	</view>	261	</view>
262	</view>	262	</view>
263	<view	263	<view
264	class="D4"	264	class="D4"
265	v-if="current !==2"	265	v-if="current !==2"
266	>	266	>
267	<view class="D4_esvalue">	267	<view class="D4_esvalue">
268	<view>{{esvalue}}  {{goodInfo.judgeInfo.good}}</view>	268	<view>{{esvalue}}  {{goodInfo.judgeInfo.good}}</view>
269	<view class="D4_2">	269	<view class="D4_2">
270	<view	270	<view
271	class="star"	271	class="star"
272	v-for="o in starCount"	272	v-for="o in starCount"
273	:key="o"	273	:key="o"
274	>	274	>
275	<image	275	<image
276	src="../../static/img/detail/d_star.png"	276	src="../../static/img/detail/d_star.png"
277	mode="aspectFill"	277	mode="aspectFill"
278	style="height: 26rpx; width: 28rpx;"	278	style="height: 26rpx; width: 28rpx;"
279	></image>	279	></image>
280	</view>	280	</view>
281	</view>	281	</view>
282	</view>	282	</view>
283	<view class="D4_list">	283	<view class="D4_list">
284	<view	284	<view
285	v-for="(assess) in goodInfo.judge_tag"	285	v-for="(assess) in goodInfo.judge_tag"
286	:key="assess.key"	286	:key="assess.key"
287	>{{assess.name}}</view>	287	>{{assess.name}}</view>
288	</view>	288	</view>
289	</view>	289	</view>
290	<view	290	<view
291	class="D5"	291	class="D5"
292	v-if="current !==2"	292	v-if="current !==2"
293	>	293	>
294	<view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">	294	<view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295	<image src="/static/img/detail/hr.png"></image>	295	<image src="/static/img/detail/hr.png"></image>
296	<view>商品详细</view>	296	<view>商品详细</view>
297	<image src="/static/img/detail/hr.png"></image>	297	<image src="/static/img/detail/hr.png"></image>
298	</view>	298	</view>
299	<view class="D5_all" v-html="test">	299	<view class="D5_all" v-html="test">
300	<!-- <block>	300	<!-- <block>
301	<rich-text :nodes="goodInfo.prodIntro1"></rich-text>	301	<rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302	</block> -->	302	</block> -->
303	</view>	303	</view>
304	</view>	304	</view>
305		305	<!-- 底部菜单 -->
306	<!-- 底部菜单 -->	306	<view class="botton">
307	<view class="botton">	307	<view
308	<view	308	@tap="toCart()"
309	@tap="toCart()"	309	class="botton_1"
310	class="botton_1"	310	>
311	>	311	<image v-bind:src="imgShop.img"></image>
312	<image v-bind:src="imgShop.img"></image>	312	<view class="botton_image">购物车</view>
313	<view class="botton_image">购物车</view>	313	</view>
314	</view>	314	<view class="botton_2">
315	<view class="botton_2">	315	<view
316	<view	316	class="botton_input"
317	class="botton_input"	317	@tap="addCart()"
318	@tap="addCart()"	318	>加入购物车</view>
319	>加入购物车</view>	319	<view
320	<view	320	class="botton_now"
321	class="botton_now"	321	@tap="goPerchase()"
322	@tap="goPerchase()"	322	>立即购买</view>
323	>立即购买</view>	323	</view>
324	</view>	324	</view>
325	</view>	325	</view>
326	</view>	326	</template>
327	</template>	327
328		328	<script>
329	<script>	329	import store from '@/store'
330	import store from '@/store'	330	export default {
331	export default {	331	data () {
332	data () {	332	return {
333	return {	333	test: '',
334	test: '',	334	goodType: 2,
335	goodType: 2,	335	pid: 0,
336	pid: 0,	336	// 购物车数据
337	// 购物车数据	337	addCartList: {
338	addCartList: {	338	mp_id: 0,
339	mp_id: 335,	339	uid: 0,
340	sk_id: 0,	340	sk_id: 0,
341	num: 1,	341	num: 1,
342	price: ''	342	price: ''
343	},	343	},
344	screenItems: [	344	screenItems: [
345	{ current: 0, text: '商品介绍' },	345	{ current: 0, text: '商品介绍' },
346	{ current: 1, text: '规格参数' },	346	{ current: 1, text: '规格参数' },
347	{ current: 2, text: '售后保障' }	347	{ current: 2, text: '售后保障' }
348	],	348	],
349	current: 0,	349	current: 0,
350	starCount: 5,	350	starCount: 5,
351	parameter: [	351	parameter: [
352	{ key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },	352	{ key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
353	{ key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },	353	{ key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
354	{ key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },	354	{ key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
355	{ key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },	355	{ key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
356	{ key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },	356	{ key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
357	{ key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }	357	{ key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }
358	],	358	],
359	esvalue: '宝贝好评率',	359	esvalue: '宝贝好评率',
360	introduction: {	360	introduction: {
361	material: '钛合金',	361	material: '钛合金',
362	func: '抗疲劳/防辐射',	362	func: '抗疲劳/防辐射',
363	rate: '男/女'	363	rate: '男/女'
364	},	364	},
365	imgAll: '/static/img/detail/d8.png',	365	imgAll: '/static/img/detail/d8.png',
366	photoes: [	366	photoes: [
367	{ value: '日常办公', img: '/static/img/detail/d9.png' },	367	{ value: '日常办公', img: '/static/img/detail/d9.png' },
368	{ value: '上网', img: '/static/img/detail/d10.png' },	368	{ value: '上网', img: '/static/img/detail/d10.png' },
369	{ value: '追剧', img: '/static/img/detail/d11.png' },	369	{ value: '追剧', img: '/static/img/detail/d11.png' },
370	{ value: '玩游戏', img: '/static/img/detail/d12.png' }	370	{ value: '玩游戏', img: '/static/img/detail/d12.png' }
371	],	371	],
372	imgDetail: '/static/img/detail/d13.png',	372	imgDetail: '/static/img/detail/d13.png',
373	imgShop: {	373	imgShop: {
374	img: '/static/tab-cart.png',	374	img: '/static/tab-cart.png',
375	IsShown: false	375	IsShown: false
376	},	376	},
377	tag: {	377	tag: {
378	prod_tag_freesend: [{	378	prod_tag_freesend: [{
379	label: '眼镜盒',	379	label: '眼镜盒',
380	value: '262'	380	value: '262'
381	}]	381	}]
382	}	382	}
383	}	383	}
384	},	384	},
385	onLoad: function ({ pid,sk_id }) {	385	onLoad: function ({ pid,sk_id }) {
386	this.pid = pid	386	this.pid = pid
		387	// console.log('sk_id=====>',sk_id)
387	// console.log('sk_id=====>',sk_id)	388	store.dispatch('read/fetch', {
388	store.dispatch('read/fetch', {	389	pid,
		390	sk_id
389	pid,	391	}).then(() => {
390	sk_id	392	this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
391	}).then(() => {	393	this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
392	this.parameter[0].slength = `${this.goodInfo.frame_width}mm`	394	this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
393	this.parameter[1].slength = `${this.goodInfo.glass_width}mm`	395	this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
394	this.parameter[2].slength = `${this.goodInfo.glass_height}mm`	396	this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
395	this.parameter[3].slength = `${this.goodInfo.nose_width}mm`	397	this.parameter[5].slength = `${this.goodInfo.weight}mm`
396	this.parameter[4].slength = `${this.goodInfo.leg_long}mm`	398	this.tag = this.goodInfo.tag
397	this.parameter[5].slength = `${this.goodInfo.weight}mm`	399	this.test = this.goodInfo.prodIntro1
398	this.tag = this.goodInfo.tag	400	this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
399	this.addCartList.price = this.goodInfo.p_sale_price	401	// addCart
400	this.test = this.goodInfo.prodIntro1	402	this.addCartList.price = this.goodInfo.p_sale_price
401	this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')	403	this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
402	})	404	this.addCartList.mp_id = this.goodInfo.glassData.mp_id
403	},	405	this.addCartList.uid = this.$store.state.user.userInfo.uid
404	computed: {	406	})
405	updateGoodType () {	407	// console.log(this.$store.state.user.userInfo.uid + 'ssss')
406	return this.goodType	408	},
407	},	409	computed: {
408	goodInfo () {	410	updateGoodType () {
409	console.log(this.$store.state.read.goodInfo)	411	return this.goodType
410	return this.$store.state.read.goodInfo	412	},
411	}	413	goodInfo () {
412	},	414	console.log(this.$store.state.read.goodInfo)
413	methods: {	415	return this.$store.state.read.goodInfo
414	// 前往购物车	416	}
415	toCart() {	417	},
416	uni.switchTab({	418	methods: {
417	url: '/pages/cart/cart',	419	// 前往购物车
418	success: res => {},	420	toCart() {
419	fail: (error) => { console.log('跳转购物车失败======>', error) },	421	uni.switchTab({
420	complete: () => { console.log('toCart') }	422	url: '/pages/cart/cart',
421	})	423	success: res => {},
422	},	424	fail: (error) => { console.log('跳转购物车失败======>', error) },
423	// 加入购物车	425	complete: () => { console.log('toCart') }
424	addCart () {	426	})
425	store.dispatch('cart/addCart', {	427	},
426	uid: this.$store.state.user.userInfo.uid,	428	// 加入购物车
427	openid: this.$store.state.user.userInfo.openid,	429	addCart () {
428	mp_id: this.addCartList.mp_id,	430	store.dispatch('cart/addCart', {
429	sk_id: this.addCartList.sk_id,	431	uid: this.$store.state.user.userInfo.uid,
430	num: this.addCartList.num,	432	openid: this.$store.state.user.userInfo.openid,
431	pid: this.pid,	433	mp_id: this.addCartList.mp_id,
432	price: this.addCartList.price,	434	sk_id: this.addCartList.sk_id,
433	checkedSKU: {}	435	num: this.addCartList.num,
434	})	436	pid: this.pid,
435	store.dispatch('cart/getCartList', {	437	price: this.addCartList.price
436	uid: this.$store.state.user.userInfo.uid // 用户id	438	})
437	})	439	store.dispatch('cart/getCartList', {
438	},	440	uid: this.$store.state.user.userInfo.uid // 用户id
439	goPerchase () {	441	})
440	// switch (this.updateGoodType) {	442	},
441	// case '1':	443	goPerchase () {
442	console.log('goPerchase')	444	// switch (this.updateGoodType) {
443	uni.navigateTo({	445	// case '1':
444	url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,	446	console.log('goPerchase')
445	success: res => {},	447	uni.navigateTo({
446	fail: (error) => { console.log('跳转参数选择失败======>', error) },	448	url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
447	complete: () => { console.log('goPerchase') }	449	success: res => {},
448	})	450	fail: (error) => { console.log('跳转参数选择失败======>', error) },
449	// break	451	complete: () => { console.log('goPerchase') }
450	// case '2':	452	})
451	// uni.navigateTo({	453	// break
452	// url: '../detailStandard/detailStandard_k',	454	// case '2':
453	// success: res => {},	455	// uni.navigateTo({
454	// fail: () => {},	456	// url: '../detailStandard/detailStandard_k',
455	// complete: () => {}	457	// success: res => {},
456	// })	458	// fail: () => {},
457	// break	459	// complete: () => {}
458	// case '3':	460	// })
459	// uni.navigateTo({	461	// break
460	// url: '../purchaseLenses/purchaseLenses',	462	// case '3':
461	// success: res => {},	463	// uni.navigateTo({
462	// fail: () => {},	464	// url: '../purchaseLenses/purchaseLenses',
463	// complete: () => {}	465	// success: res => {},
464	// })	466	// fail: () => {},
465	// break	467	// complete: () => {}
466	// case '4':	468	// })
467	// uni.navigateTo({	469	// break
468	// url: '../detailStandard/detailStandard_sun',	470	// case '4':
469	// success: res => {},	471	// uni.navigateTo({
470	// fail: () => {},	472	// url: '../detailStandard/detailStandard_sun',
471	// complete: () => {}	473	// success: res => {},
472	// })	474	// fail: () => {},
473	// break	475	// complete: () => {}
474	// default :	476	// })
475	// break	477	// break
476	// }	478	// default :
477	},	479	// break
478	// 加入购物车	480	// }
479	addCart () {	481	},
480	store.dispatch('cart/addCart', {	482	tabChange (e) {
481	uid: this.$store.state.user.userInfo.uid,	483	if (this.current !== e) {
482	openid: this.$store.state.user.userInfo.openid,	484	this.current = e
483	pid: this.pid,	485	}
484	checkedSKU: {}	486	}
485	})	487	}
486	store.dispatch('cart/getCartList', {	488	}
487	uid: this.$store.state.user.userInfo.uid // 用户id	489	</script>
488	})	490	<style lang='scss'>
489	},	491	.container {
490	tabChange (e) {	492	background-color: #f8f8f8;
491	if (this.current !== e) {	493	}
492	this.current = e	494	.D1,
493	}	495	.D2,
494	}	496	.D3,
495	}	497	.D4,
496	}	498	.D6 {
497	</script>	499	background: #ffffff;
498	<style lang='scss'>	500	margin-bottom: 10px;
499	.container {	501	padding: 8px 20px 8px 20px;
500	background-color: #f8f8f8;	502	box-sizing: border-box;
501	}	503	.swiperImage {
502	.D1,	504	width: 684rpx;
503	.D2,	505	height: 480rpx;
504	.D3,	506	image {
505	.D4,	507	max-width: 100%;
506	.D6 {	508	max-height: 100%;
507	background: #ffffff;	509	border-radius: 16rpx;
508	margin-bottom: 10px;	510	}
509	padding: 8px 20px 8px 20px;	511	}
510	box-sizing: border-box;	512	}
511	.swiperImage {	513	.D5 {
512	width: 684rpx;	514	background: #ffffff;
513	height: 480rpx;	515	padding: 8px 20px 8px 20px;
514	image {	516	box-sizing: border-box;
515	max-width: 100%;	517	}
516	max-height: 100%;	518	.swiperImage {
517	border-radius: 16rpx;	519	width: 100%;
518	}	520	height: 560rpx;
519	}	521	.swiper-item {
520	}	522	width: 100%;
521	.D5 {	523	image {
522	background: #ffffff;	524	width: 100%;
523	padding: 8px 20px 8px 20px;	525	}
524	box-sizing: border-box;	526	}
525	}	527	}
526	.swiperImage {	528	.D1 {
527	width: 100%;	529	.D1_price {
528	height: 560rpx;	530	color: #eb5d3b;
529	.swiper-item {	531	font-size: 18px;
530	width: 100%;	532	margin-top: 5px;
531	image {	533	font-family: "PingFangSC-Semibold";
532	width: 100%;	534	display: flex;
533	}	535	justify-content: space-between;
534	}	536	.D1_number {
535	}	537	color: #999999;
536	.D1 {	538	font-size: 14px;
537	.D1_price {	539	font-family: "PingFangSC-Regular";
538	color: #eb5d3b;	540	}
539	font-size: 18px;	541	}
540	margin-top: 5px;	542	.D1_name {
541	font-family: "PingFangSC-Semibold";	543	font-size: 16px;
542	display: flex;	544	font-family: "PingFangSC-Semibold";
543	justify-content: space-between;	545	margin-top: 5px;
544	.D1_number {	546	.D1_name1 {
545	color: #999999;	547	font-weight: bold;
546	font-size: 14px;	548	font-size: 16px;
547	font-family: "PingFangSC-Regular";	549	color: #333333;
548	}	550	}
549	}	551	}
550	.D1_name {	552	.D1_spans {
551	font-size: 16px;	553	font-size: 10px;
552	font-family: "PingFangSC-Semibold";	554	color: #999999;
553	margin-top: 5px;	555	margin-top: 5px;
554	.D1_name1 {	556	span {
555	font-weight: bold;	557	height: 14px;
556	font-size: 16px;	558	margin-right: 10px;
557	color: #333333;	559	}
558	}	560	}
559	}	561	}
560	.D1_spans {	562	.D2 {
561	font-size: 10px;	563	font-size: 14px;
562	color: #999999;	564	font-family: "PingFangSC-Regular";
563	margin-top: 5px;	565	view {
564	span {	566	height: 24px;
565	height: 14px;	567	}
566	margin-right: 10px;	568	.D2_span1 {
567	}	569	color: #999999;
568	}	570	}
569	}	571	.D2_span2 {
570	.D2 {	572	color: #333333;
571	font-size: 14px;	573	}
572	font-family: "PingFangSC-Regular";	574	}
573	view {	575	.D3 {
574	height: 24px;	576	.screenBar {
575	}	577	width: 670rpx;
576	.D2_span1 {	578	margin-top: 20rpx;
577	color: #999999;	579	margin-bottom: 24rpx;
578	}	580	display: flex;
579	.D2_span2 {	581	flex-direction: row;
580	color: #333333;	582	justify-content: space-between;
581	}	583	align-items: center;
582	}	584	font-size: 14px;
583	.D3 {	585	color: #333333;
584	.screenBar {	586	transition: all 0.2s;
585	width: 670rpx;	587	}
586	margin-top: 20rpx;	588	.screen-item {
587	margin-bottom: 24rpx;	589	font-size: 32rpx;
588	display: flex;	590	color: #333333;
589	flex-direction: row;	591	display: flex;
590	justify-content: space-between;	592	transition: all 0.2s;
591	align-items: center;	593	.D3_list {
592	font-size: 14px;	594	margin-bottom: 4px;
593	color: #333333;	595	}
594	transition: all 0.2s;	596	.D3_list view {
595	}	597	display: flex;
596	.screen-item {	598	align-content: center;
597	font-size: 32rpx;	599	font-size: 14px;
598	color: #333333;	600	color: #333333;
599	display: flex;	601	}
600	transition: all 0.2s;	602	.D3_list image {
601	.D3_list {	603	width: 50px;
602	margin-bottom: 4px;	604	height: 25px;
603	}	605	margin-right: 6px;
604	.D3_list view {	606	}
605	display: flex;	607	.D3_list span {
606	align-content: center;	608	margin-left: 6px;
607	font-size: 14px;	609	margin-right: 5px;
608	color: #333333;	610	font-family: "PingFangSC-Regular";
609	}	611	}
610	.D3_list image {	612	}
611	width: 50px;	613	.active {
612	height: 25px;	614	border-bottom: 4rpx solid #ff6b4a;
613	margin-right: 6px;	615	}
614	}	616	.customerService {
615	.D3_list span {	617	margin-bottom: 90rpx;
616	margin-left: 6px;	618	.serviceItem {
617	margin-right: 5px;	619	margin-bottom: 32rpx;
618	font-family: "PingFangSC-Regular";	620	.title {
619	}	621	display: flex;
620	}	622	flex-direction: row;
621	.active {	623	align-items: center;
622	border-bottom: 4rpx solid #ff6b4a;	624	.titleText {
623	}	625	font-size: 14px;
624	.customerService {	626	color: #333333;
625	margin-bottom: 90rpx;	627	margin-bottom: 12rpx;
626	.serviceItem {	628	}
627	margin-bottom: 32rpx;	629	}
628	.title {	630	.itemContent {
629	display: flex;	631	font-size: 14px;
630	flex-direction: row;	632	color: #999999;
631	align-items: center;	633	margin-left: 18rpx;
632	.titleText {	634	}
633	font-size: 14px;	635	}
634	color: #333333;	636	.serviceItem2 {
635	margin-bottom: 12rpx;	637	margin-left: 18rpx;
636	}	638	margin-bottom: 32rpx;
637	}	639	.titleText {
638	.itemContent {	640	font-size: 14px;
639	font-size: 14px;	641	color: #ff6b4a;
640	color: #999999;	642	}
641	margin-left: 18rpx;	643	.itemContent {
642	}	644	font-size: 14px;
643	}	645	color: #999999;
644	.serviceItem2 {	646	.itemContent-child {
645	margin-left: 18rpx;	647	margin-bottom: 40rpx;
646	margin-bottom: 32rpx;	648	.contentTitle {
647	.titleText {	649	border-bottom: 1px solid #ff6b4a;
648	font-size: 14px;	650	}
649	color: #ff6b4a;	651	}
650	}	652	}
651	.itemContent {	653	}
652	font-size: 14px;	654	}
653	color: #999999;	655	}
654	.itemContent-child {	656	.D4 {
655	margin-bottom: 40rpx;	657	.D4_esvalue {
656	.contentTitle {	658	font-size: 14px;
657	border-bottom: 1px solid #ff6b4a;	659	color: #333333;
658	}	660	display: flex;
659	}	661	justify-content: space-between;
660	}	662	margin-bottom: 10px;
661	}	663	.D4_2 {
662	}	664	width: 90px;
663	}	665	display: flex;
664	.D4 {	666	align-items: center;
665	.D4_esvalue {	667	justify-content: space-between;
666	font-size: 14px;	668	}
667	color: #333333;	669	}
668	display: flex;	670	.D4_esvalue view {
669	justify-content: space-between;	671	font-size: 14px;
670	margin-bottom: 10px;	672	color: #333333;
671	.D4_2 {	673	font-weight: bold;
672	width: 90px;	674	}
673	display: flex;	675	.D4_list{
674	align-items: center;	676	display: grid;
675	justify-content: space-between;	677	grid-row-gap: 10px;
676	}	678	grid-column-gap: 4px;
677	}	679	}
678	.D4_esvalue view {	680	.D4_list view {
679	font-size: 14px;	681	display: flex;
680	color: #333333;	682	justify-content: center;
681	font-weight: bold;	683	align-items: center;
682	}	684	font-size: 12px;
683	.D4_list{	685	width: 118px;
684	display: grid;	686	height: 24px;
685	grid-row-gap: 10px;	687	border-radius: 2px;
686	grid-column-gap: 4px;	688	background: #f2f2f2;
687	}	689	color: #666666;
688	.D4_list view {	690	// letter-spacing: 1px;
689	display: flex;	691	}
690	justify-content: center;	692	}
691	align-items: center;	693	.D5 {
692	font-size: 12px;	694	.D5_fixed1 {
693	width: 118px;	695	display: flex;
694	height: 24px;	696	justify-content: space-between;
695	border-radius: 2px;	697	align-content: center;
696	background: #f2f2f2;	698	margin-bottom: 12px;
697	color: #666666;	699	view {
698	// letter-spacing: 1px;	700	font-size: 14px;
699	}	701	color: #333333;
700	}	702	font-weight: bold;
701	.D5 {	703	font-family: "PingFangSC-Medium";
702	.D5_fixed1 {	704	line-height: 24px;
703	display: flex;	705	}
704	justify-content: space-between;	706	image {
705	align-content: center;	707	width: 240rpx;
706	margin-bottom: 12px;	708	height: 3px;
707	view {	709	margin-top: 10px;
708	font-size: 14px;	710	}
709	color: #333333;	711	}
710	font-weight: bold;	712	.D5_all {
711	font-family: "PingFangSC-Medium";	713	width: 100%;
712	line-height: 24px;	714	margin-top: 30rpx;
713	}	715	margin-right: 30rpx;
714	image {	716	margin-bottom: 180rpx;
715	width: 240rpx;	717	font-family: "PingFangSC-Regular";
716	height: 3px;	718	// border: #999999 solid 1.5px;
717	margin-top: 10px;	719	}
718	}	720	}
719	}	721	.D6 {
720	.D5_all {	722	width: 100%;
721	width: 100%;	723	height: 430px;
722	margin-top: 30rpx;	724	background: #f9f6ed;
723	margin-right: 30rpx;	725	margin-bottom: 74px;
724	margin-bottom: 180rpx;	726	view {
725	font-family: "PingFangSC-Regular";	727	text-align: center;
726	// border: #999999 solid 1.5px;	728	}
727	}	729	.D6_v1 {
728	}	730	font-weight: bold;
729	.D6 {	731	}
730	width: 100%;	732	.D6_v2 {
731	height: 430px;	733	font-size: 14px;
732	background: #f9f6ed;	734	margin-bottom: 30px;
733	margin-bottom: 74px;	735	}
734	view {	736	.D6_v5 {
735	text-align: center;	737	.D6_v5_s1 {
736	}	738	font-weight: bold;
737	.D6_v1 {	739	}
738	font-weight: bold;	740	.D6_v5_s2 {
739	}	741	font-size: 14px;
740	.D6_v2 {	742	}
741	font-size: 14px;	743	}
742	margin-bottom: 30px;	744	}
743	}	745	.botton {
744	.D6_v5 {	746	position: fixed;
745	.D6_v5_s1 {	747	bottom: 0;
746	font-weight: bold;	748	height: 74px;
747	}	749	width: 100%;
748	.D6_v5_s2 {	750	background: #ffffff;
749	font-size: 14px;	751	padding: 20px 20px 8px 20px;
750	}	752	font-family: "PingFangSC-Regular";
751	}	753	box-sizing: border-box;
752	}	754	display: flex;
753	.botton {	755	justify-content: space-between;
754	position: fixed;	756	align-content: center;
755	bottom: 0;	757	.botton_1 {
756	height: 74px;	758	width: 20%;
757	width: 100%;	759	height: 100%;
758	background: #ffffff;	760	text-align: center;
759	padding: 20px 20px 8px 20px;	761	color: #989898;
760	font-family: "PingFangSC-Regular";	762	}
761	box-sizing: border-box;	763	image {
762	display: flex;	764	width: 60%;
763	justify-content: space-between;	765	height: 30px;
764	align-content: center;	766	}
765	.botton_1 {	767	.botton_image {
766	width: 20%;	768	font-size: 12px;
767	height: 100%;	769	text-align: center;
768	text-align: center;	770	}
769	color: #989898;	771	.botton_2 {
770	}	772	width: 74%;
771	image {	773	height: 86%;
772	width: 60%;	774	display: grid;
773	height: 30px;	775	grid-template-columns: 50% 50%;
774	}	776	}
775	.botton_image {	777	.botton_input {
776	font-size: 12px;	778	display: inline-flex;
777	text-align: center;	779	align-items: center;
778	}	780	justify-content: space-around;
779	.botton_2 {	781	background: #fff0ec;
780	width: 74%;	782	font-size: 16px;
781	height: 86%;	783	color: #ff6b4a;
782	display: grid;	784	border-radius: 20px 0 0 20px;
783	grid-template-columns: 50% 50%;	785	}
784	}	786	.botton_now {
785	.botton_input {	787	display: inline-flex;
786	display: inline-flex;	788	align-items: center;
787	align-items: center;	789	justify-content: space-around;
788	justify-content: space-around;	790	background: #ff6b4a;
789	background: #fff0ec;	791	font-size: 16px;
790	font-size: 16px;	792	color: #ffffff;
791	color: #ff6b4a;	793	border-radius: 0 20px 20px 0;
792	border-radius: 20px 0 0 20px;	794	}
793	}	795	}
794	.botton_now {	796	</style>
795	display: inline-flex;	797
796	align-items: center;
797	justify-content: space-around;
798	background: #ff6b4a;
799	font-size: 16px;
800	color: #ffffff;
801	border-radius: 0 20px 20px 0;
802	}
803	}

src/pages/index/index.vue

Diff comments View file @30ace30

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="header">	3	<view class="header">
4	<!-- 搜索-->	4	<!-- 搜索-->
5	<view class="searchBar">	5	<view class="searchBar">
6	<icon	6	<icon
7	class="searchIcon"	7	class="searchIcon"
8	type="search"	8	type="search"
9	size="14"	9	size="14"
10	></icon>	10	></icon>
11	<input	11	<input
12	v-model="searchText"	12	v-model="searchText"
13	class="searchIpt"	13	class="searchIpt"
14	placeholder="老花镜"	14	placeholder="老花镜"
15	confirm-type="search"	15	confirm-type="search"
16	@blur="searchKey"	16	@blur="searchKey"
17	/>	17	/>
18	</view>	18	</view>
19		19
20	<!-- 筛选栏-->	20	<!-- 筛选栏-->
21	<!-- <view class="screenBar">	21	<!-- <view class="screenBar">
22	<view	22	<view
23	v-for="item in screenItems"	23	v-for="item in screenItems"
24	:key="item.current"	24	:key="item.current"
25	@click="onClickItem(item.current)"	25	@click="onClickItem(item.current)"
26	>	26	>
27	<view	27	<view
28	class="screenItem"	28	class="screenItem"
29	v-bind:class="{ active: current === item.current }"	29	v-bind:class="{ active: current === item.current }"
30	v-if="item.current === 2"	30	v-if="item.current === 2"
31	@click="dropDown"	31	@click="dropDown"
32	>	32	>
33	{{ item.text }}	33	{{ item.text }}
34	<icon	34	<icon
35	type="info"	35	type="info"
36	size="14"	36	size="14"
37	></icon>	37	></icon>
38	</view>	38	</view>
39	<view	39	<view
40	class="screenItem"	40	class="screenItem"
41	v-bind:class="{ active: current === item.current }"	41	v-bind:class="{ active: current === item.current }"
42	v-if="item.current === 4"	42	v-if="item.current === 4"
43	@click="showDrawer('showRight')"	43	@click="showDrawer('showRight')"
44	>	44	>
45	{{ item.text }}	45	{{ item.text }}
46	<icon	46	<icon
47	type="info"	47	type="info"
48	size="14"	48	size="14"
49	></icon>	49	></icon>
50	</view>	50	</view>
51	<view v-if="item.current !== 2&&item.current!==4">	51	<view v-if="item.current !== 2&&item.current!==4">
52	<view	52	<view
53	class="screenItem"	53	class="screenItem"
54	v-bind:class="{ active: current === item.current }"	54	v-bind:class="{ active: current === item.current }"
55	>{{ item.text }}</view>	55	>{{ item.text }}</view>
56	</view>	56	</view>
57	</view>	57	</view>
58	</view> -->	58	</view> -->
59	</view>	59	</view>
60	<Uni-drawer	60	<Uni-drawer
61	ref="showRight"	61	ref="showRight"
62	mask="true"	62	mask="true"
63	maskClick="true"	63	maskClick="true"
64	mode="right"	64	mode="right"
65	:width="320"	65	:width="320"
66	@change="change($event,'showRight')"	66	@change="change($event,'showRight')"
67	>	67	>
68	<view class="close">	68	<view class="close">
69	<view @click="closeDrawer('showRight')">	69	<view @click="closeDrawer('showRight')">
70	<text class="word-btn-white">关闭</text>	70	<text class="word-btn-white">关闭</text>
71	</view>	71	</view>
72	</view>	72	</view>
73	</Uni-drawer>	73	</Uni-drawer>
74		74
75	<!-- 筛选菜单-->	75	<!-- 筛选菜单-->
76	<view class="content-wrap">	76	<view class="content-wrap">
77	<view>	77	<view>
78	<HMfilterDropdown	78	<HMfilterDropdown
79	:filterData="categoryList"	79	:filterData="categoryList"
80	:defaultSelected="filterDropdownValue"	80	:defaultSelected="filterDropdownValue"
81	:updateMenuName="true"	81	:updateMenuName="true"
82	@search="search"	82	@search="search"
83	@getList="getList"	83	@getList="getList"
84	data-format="Object"	84	data-format="Object"
85	></HMfilterDropdown>	85	></HMfilterDropdown>
86	<!-- 商品列表 -->	86	<!-- 商品列表 -->
87	<view class="goods-list">	87	<view class="goods-list">
88	<view class="product-list">	88	<view class="product-list">
89	<view	89	<view
90	class="product"	90	class="product"
91	v-for="(goods) in goodsList"	91	v-for="(goods) in goodsList"
92	:key="goods.id"	92	:key="goods.id"
93	>	93	>
94	<Card :goods="goods"></Card>	94	<Card :goods="goods"></Card>
95	</view>	95	</view>
96	</view>	96	</view>
97	<view class="loading-text">{{loadingText}}</view>	97	<view class="loading-text">{{loadingText}}</view>
98	</view>	98	</view>
99	</view>	99	</view>
100	</view>	100	</view>
101	</view>	101	</view>
102	</template>	102	</template>
103		103
104	<script>	104	<script>
105	import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'	105	import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
106	import Card from '@/components/CommodityCard/CommodityCard.vue'	106	import Card from '@/components/CommodityCard/CommodityCard.vue'
107	import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'	107	import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
108	import store from '@/store'	108	import store from '@/store'
109		109
110	export default {	110	export default {
111	components: {	111	components: {
112	UniDrawer: UniDrawer,	112	UniDrawer: UniDrawer,
113	HMfilterDropdown: HMfilterDropdown,	113	HMfilterDropdown: HMfilterDropdown,
114	Card: Card	114	Card: Card
115	},	115	},
116	data () {	116	data () {
117	return {	117	return {
118	indexArr: '',	118	indexArr: '',
119	valueArr: '',	119	valueArr: '',
120	loadingText: '~~到底了~~',	120	loadingText: '~~到底了~~',
121	filterDropdownValue: [],	121	filterDropdownValue: [],
122	filterData: [],	122	filterData: [],
123	searchText: ''	123	searchText: ''
124	}	124	}
125	},	125	},
126	computed: {	126	computed: {
127	goodsList () {	127	goodsList () {
128	// 也可以从 getters 获取	128	// 也可以从 getters 获取
		129	// console.log('index-list=====>',this.$store.state.index.list)
129	// console.log('index-list=====>',this.$store.state.index.list)	130	return this.$store.state.index.list
130	return this.$store.state.index.list	131	},
131	},	132	categoryList () {
132	categoryList () {	133	return this.$store.state.index.categoryList
133	return this.$store.state.index.categoryList	134	}
134	}	135	},
135	},	136	filters: {
136	filters: {	137	outData (value) {
137	outData (value) {	138	return JSON.stringify(value)
138	return JSON.stringify(value)	139	}
139	}	140	},
140	},	141	onLoad () {
141	onLoad () {	142	store.dispatch('index/category')
142	store.dispatch('index/category')	143	// this.getList();
143	// this.getList();	144	store.dispatch('index/list')
144	store.dispatch('index/list')	145	},
145	},	146	methods: {
146	methods: {	147	showDrawer (e) {
147	showDrawer (e) {	148	this.$refs[e].open()
148	this.$refs[e].open()	149	},
149	},	150	getList () {
150	getList () {	151	store.dispatch('index/list')
151	store.dispatch('index/list')	152	},
152	},	153	// search(params) {
153	// search(params) {	154	// this.$store.index.
154	// this.$store.index.	155	// },
155	// },	156	closeDrawer (e) {
156	closeDrawer (e) {	157	this.$refs[e].close()
157	this.$refs[e].close()	158	},
158	},	159	change (e, type) {
159	change (e, type) {	160	this[type] = e
160	this[type] = e	161	},
161	},	162	onClickItem (e) {
162	onClickItem (e) {	163	if (this.current !== e) {
163	if (this.current !== e) {	164	this.current = e
164	this.current = e	165	}
165	}	166	},
166	},	167	dropDown () {
167	dropDown () {	168	console.log('下拉')
168	console.log('下拉')	169	},
169	},	170	searchKey (e) {
170	searchKey (e) {	171	const { value: keyword } = e.detail
171	const { value: keyword } = e.detail	172	this.keyWords = keyword
172	this.keyWords = keyword	173	store.dispatch('index/search', {
173	store.dispatch('index/search', {	174	params: {},
174	params: {},	175	keyword
175	keyword	176	})
176	})	177	},
177	},	178	// 接收菜单结果
178	// 接收菜单结果	179	search (e) {
179	search (e) {	180	const { on, value, selectedData } = e
180	const { on, value, selectedData } = e	181	let params = {}
181	let params = {}	182	const selectedPayload = {}
182	const selectedPayload = {}	183	for (const key in selectedData) {
183	for (const key in selectedData) {	184	if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
184	if (Object.prototype.hasOwnProperty.call(selectedData, key)) {	185	selectedPayload[key] = selectedData[key].toString()
185	selectedPayload[key] = selectedData[key].toString()	186	}
186	}	187	}
187	}	188	if (on[0] === 1) {
188	if (on[0] === 1) {	189	// 若点击全部
189	// 若点击全部	190	this.searchText = ''
190	this.searchText = ''	191	store.dispatch('index/list')
191	store.dispatch('index/list')	192	} else {
192	} else {	193	for (let i = 1; i <= on.length; i++) { // on[0]是全部
193	for (let i = 1; i <= on.length; i++) { // on[0]是全部	194	if (on[i] === 1) { // 若该选项被选中
194	if (on[i] === 1) { // 若该选项被选中	195	if (this.categoryList[i].value === 'filter') {
195	if (this.categoryList[i].value === 'filter') {	196	params = {
196	params = {	197	...selectedPayload,
197	...selectedPayload,	198	...params
198	...params	199	}
199	}	200	} else {
200	} else {	201	params[`${this.categoryList[i].value}`] = value[i][0]
201	params[`${this.categoryList[i].value}`] = value[i][0]	202	}
202	}	203	}
203	}	204	}
204	}	205	store.dispatch('index/search', {
205	store.dispatch('index/search', {	206	params,
206	params,	207	keyword: this.keyWords
207	keyword: this.keyWords	208	})
208	})	209	}
209	}	210	}
210	}	211	}
211	}	212
212		213	}
213	}	214	</script>
214	</script>	215
215		216	<style lang="scss">
216	<style lang="scss">	217	.content {
217	.content {	218	display: flex;
218	display: flex;	219	flex-direction: column;
219	flex-direction: column;	220	align-items: center;
220	align-items: center;	221	justify-content: center;
221	justify-content: center;	222	background-color: #f7f6f6;
222	background-color: #f7f6f6;	223	}
223	}	224	.header {
224	.header {	225	display: flex;
225	display: flex;	226	flex-direction: column;
226	flex-direction: column;	227	align-items: center;
227	align-items: center;	228	justify-content: center;
228	justify-content: center;	229	background-color: #f7f6f6;
229	background-color: #f7f6f6;	230	height: 178rpx;
230	height: 178rpx;	231	width: 100%;
231	width: 100%;	232	z-index: 999;
232	z-index: 999;	233	position: fixed;
233	position: fixed;	234	top: 0;
234	top: 0;	235	left: 0;
235	left: 0;	236	}
236	}	237	.searchBar {
237	.searchBar {	238	width: 670rpx;
238	width: 670rpx;	239	display: flex;
239	display: flex;	240	justify-content: center;
240	justify-content: center;	241	align-items: center;
241	align-items: center;	242	box-sizing: border-box;
242	box-sizing: border-box;	243	padding: 0rpx 16rpx;
243	padding: 0rpx 16rpx;	244	border: 1px solid #ff6b4a;
244	border: 1px solid #ff6b4a;	245	border-radius: 8rpx;
245	border-radius: 8rpx;	246	background-color: #ffffff;
246	background-color: #ffffff;	247	}
247	}	248
248		249	.searchIpt {
249	.searchIpt {	250	height: 68rpx;
250	height: 68rpx;	251	width: 670rpx;
251	width: 670rpx;	252	padding: 16rpx;
252	padding: 16rpx;	253	font-size: 28rpx;
253	font-size: 28rpx;	254	box-sizing: border-box;
254	box-sizing: border-box;	255	}
255	}	256	.screenBar {
256	.screenBar {	257	width: 670rpx;
257	width: 670rpx;	258	height: 110rpx;
258	height: 110rpx;	259	display: flex;
259	display: flex;	260	flex-direction: row;
260	flex-direction: row;	261	justify-content: space-between;
261	justify-content: space-between;	262	align-items: center;
262	align-items: center;	263	color: #333333;
263	color: #333333;	264	font-size: 32rpx;
264	font-size: 32rpx;	265	}
265	}	266	.active {
266	.active {	267	color: #ff6b4a;
267	color: #ff6b4a;	268	}
268	}	269	.screenItem {
269	.screenItem {	270	display: flex;
270	display: flex;	271	justify-content: center;
271	justify-content: center;	272	align-items: center;
272	align-items: center;	273	}
273	}	274	.content-wrap {
274	.content-wrap {	275	width: 100%;
275	width: 100%;	276	background-color: #ffffff;
276	background-color: #ffffff;	277	}
277	}	278
278		279	.HMfilterDropdown {
279	.HMfilterDropdown {	280	top: 178rpx !important;
280	top: 178rpx !important;	281	}
281	}	282
282		283	.goods-list {
283	.goods-list {	284	padding-top: 286rpx;
284	padding-top: 286rpx;	285	.loading-text {
285	.loading-text {	286	width: 100%;
286	width: 100%;	287	display: flex;
287	display: flex;	288	justify-content: center;
288	justify-content: center;	289	align-items: center;
289	align-items: center;	290	height: 30px;
290	height: 30px;	291	color: #979797;
291	color: #979797;	292	font-size: 12px;
292	font-size: 12px;	293	}
293	}	294	.product-list {
294	.product-list {	295	width: 92%;
295	width: 92%;	296	padding: 0 4% 3vw 4%;
296	padding: 0 4% 3vw 4%;	297	display: flex;
297	display: flex;	298	justify-content: space-between;
298	justify-content: space-between;	299	flex-wrap: wrap;
299	flex-wrap: wrap;	300	.product {
300	.product {	301	width: 48%;
301	width: 48%;	302	margin: 0 0 20rpx 0;
302	margin: 0 0 20rpx 0;	303	background: #ffffff;
303	background: #ffffff;	304	border: 1px solid #f2f2f2;
304	border: 1px solid #f2f2f2;	305	}
305	}	306	}
306	}	307	}
307	}	308	</style>
308	</style>	309

src/store/modules/read.js

Diff comments View file @30ace30

1	import urlAlias from '../url'	1	import urlAlias from '../url'
2	import request from '../request'	2	import request from '../request'
3		3
4	const {	4	const {
5	read	5	read
6	} = urlAlias	6	} = urlAlias
7		7
8	const state = {	8	const state = {
9	goodInfo: {}	9	goodInfo: {}
10	}	10	}
11		11
12	const mutations = {	12	const mutations = {
13	INIT: (state, goodInfo) => {	13	INIT: (state, goodInfo) => {
14	state.goodInfo = goodInfo	14	state.goodInfo = goodInfo
15	}	15	}
16	}	16	}
17		17
18	const actions = {	18	const actions = {
19	fetch({ commit }, param) {	19	fetch({ commit }, param) {
		20	// 由于购物车和用户推荐的价格要根据sk_id来获取
		21	const arg=Object.assign({},param)
		22	delete param.sk_id
20	// 由于购物车和用户推荐的价格要根据sk_id来获取	23	return new Promise((resolve, reject) => request({
21	const arg=Object.assign({},param)	24	url: read,
22	delete param.sk_id	25	data: param,
23	return new Promise((resolve, reject) => request({	26	success: (res) => {
24	url: read,	27	console.log('readParm====>',arg)
		28	console.log('read====>',res.data.data)
		29	// 用一个新的对象来接收sk_id找的值
		30	const Res=Object.assign({},res.data.data)
		31	if(arg.sk_id!=undefined){
		32	for (let i = 0; i < res.data.data.skuList.length; i++) {
		33	if(res.data.data.skuList[i].sk_id==arg.sk_id){
		34	Res.p_sale_price= res.data.data.skuList[i].real_price
		35	console.log('陈工了')
		36	}
		37	}
		38	}
		39	console.log(Res)
		40	commit('INIT', Res)
25	data: param,	41	resolve()
26	success: (res) => {	42	},
27	console.log('readParm====>',arg)	43	fail: (res) => {
28	console.log('read====>',res.data.data)	44	console.log('fail status === > ', res)
29	// 用一个新的对象来接收sk_id找的值	45	},
30	const Res=Object.assign({},res.data.data)	46	complete: (res) => {
31	if(arg.sk_id!=undefined){	47	console.log('complete status === > ', res)
32	for (let i = 0; i < res.data.data.skuList.length; i++) {	48	}
33	if(res.data.data.skuList[i].sk_id==arg.sk_id){	49	}))
34	Res.p_sale_price= res.data.data.skuList[i].real_price	50	}
35	console.log('陈工了')	51	}
36	}	52
37	}	53	export default {
38	}	54	namespaced: true,
39	console.log(Res)	55	state,
40	commit('INIT', Res)	56	mutations,
41	resolve()	57	actions
42	},	58	}
43	fail: (res) => {	59