Adam / gulu-vue

Browse Code »

Commit 55420a8a9636bc40bb12e8aa83ffd05812d0b93a

Authored by mullins 2020-05-27 23:32:04 +0800

2 parents a3d2beaa8c cb58acb8c1

Exists in master

解决冲突

Showing 6 changed files Show diff stats

src/pages/cart/cart.vue

Diff comments View file @55420a8

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

src/pages/confirmOrder/confirmOrder.vue

Diff comments View file @55420a8

1	<template>	1	<template>
2	<view class="wrap">	2	<view class="wrap">
3	<view></view>	3	<view></view>
4	<view	4	<view
5	class="addAddress"	5	class="addAddress"
6	@tap="toaddAddress"	6	@tap="toaddAddress"
7	v-if="this.showAddress"	7	v-if="this.showAddress"
8	>	8	>
9	<view class="addIcon">	9	<view class="addIcon">
10	<image	10	<image
11	src="../../static/add.png"	11	src="../../static/add.png"
12	mode="aspectFill"	12	mode="aspectFill"
13	></image>	13	></image>
14	</view>	14	</view>
15	<view class="addressText">{{addAddress}}</view>	15	<view class="addressText">{{addAddress}}</view>
16	<image	16	<image
17	src="../../static/right.png"	17	src="../../static/right.png"
18	mode="aspectFill"	18	mode="aspectFill"
19	></image>	19	></image>
20	</view>	20	</view>
21	<view	21	<view
22	v-else	22	v-else
23	@tap="toaddAddress"	23	@tap="toaddAddress"
24	class="list order-user"	24	class="list order-user"
25	>	25	>
26	<view class="order-user-head">	26	<view class="order-user-head">
27	<view class="name">	27	<view class="name">
28	<view	28	<view
29	v-if="addressInfo.default === '1'"	29	v-if="addressInfo.default === '1'"
30	class="default"	30	class="default"
31	><text>默认</text></view>{{addressInfo.name}}	31	><text>默认</text></view>{{addressInfo.name}}
32	</view>	32	</view>
33	<text class="mobile">{{addressInfo.mobile}}</text>	33	<text class="mobile">{{addressInfo.mobile}}</text>
34	</view>	34	</view>
35	<view class="order-user-body">	35	<view class="order-user-body">
36	<image src="../../static/myorder-paying-location.png"></image>	36	<image src="../../static/myorder-paying-location.png"></image>
37	<text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>	37	<text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
38	</view>	38	</view>
39	<image	39	<image
40	class="arrow"	40	class="arrow"
41	src="../../static/right.png"	41	src="../../static/right.png"
42	></image>	42	></image>
43	</view>	43	</view>
44	<view class="content">	44	<view class="content">
45	<view class="orderInfo">	45	<view class="orderInfo">
46	<view class="title">	46	<view class="title">
47	<image	47	<image
48	src="../../static/store.png"	48	src="../../static/store.png"
49	mode="aspectFill"	49	mode="aspectFill"
50	style="width: 40rpx;height: 40rpx;"	50	style="width: 40rpx;height: 40rpx;"
51	></image>	51	></image>
52	<text>非常戴镜</text>	52	<text>非常戴镜</text>
53	</view>	53	</view>
54	<view class="infoBox">	54	<view class="infoBox">
55	<view class="infoTop">	55	<view class="infoTop">
56	<image	56	<image
57	:src="goodInfo.img_index_url"	57	:src="goodInfo.img_index_url"
58	mode="aspectFill"	58	mode="aspectFill"
59	></image>	59	></image>
60	<view class="infoRight">	60	<view class="infoRight">
61	<text class="goodName">商品名称商品名称商品名称名称名称</text>	61	<text class="goodName">商品名称商品名称商品名称名称名称</text>
62	<text class="remarks">支持7天无理由退货顺丰发货</text>	62	<text class="remarks">支持7天无理由退货顺丰发货</text>
63	<view class="priceBox">	63	<view class="priceBox">
64	<view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">	64	<view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
65	¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}	65	¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
66	</text></view>	66	</text></view>
67	<view class="counter">	67	<view class="counter">
68	<view	68	<view
69	class="btn"	69	class="btn"
70	disabled="this.disabled"	70	disabled="this.disabled"
71	type="default"	71	type="default"
72	@click="counter(false)"	72	@click="counter(false)"
73	>-</view>	73	>-</view>
74	<text>{{count}}</text>	74	<text>{{count}}</text>
75	<view	75	<view
76	class="btn"	76	class="btn"
77	type="default"	77	type="default"
78	@click="counter(true)"	78	@click="counter(true)"
79	>+</view>	79	>+</view>
80	</view>	80	</view>
81	</view>	81	</view>
82	</view>	82	</view>
83	</view>	83	</view>
84	<view class="infoBottom">	84	<view class="infoBottom">
85	<view class="norm">规格 <text>	85	<view class="norm">规格 <text>
86	<!-- 长度超出变省略号未做 -->	86	<!-- 长度超出变省略号未做 -->
87	<block	87	<block
88	v-for="(item, index) in current"	88	v-for="(item, index) in current"
89	:key="index"	89	:key="index"
90	>{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>	90	>{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
		91	</block>
91	</block>	92	</text></view>
92	</text></view>	93	<view class="shippingMethod">配送方式 <text>快递</text></view>
93	<view class="shippingMethod">配送方式 <text>快递</text></view>	94	<view class="message">买家留言
94	<view class="message">买家留言	95	<input
95	<input	96	type="text"
96	type="text"	97	:value="note"
97	:value="note"	98	placeholder="建议提前协商(50字以内)"
98	placeholder="建议提前协商(50字以内)"	99	/>
99	/>	100	</view>
100	</view>	101	</view>
101	</view>	102	</view>
102	</view>	103	</view>
103	</view>	104	<view class="payWay">
104	<view class="payWay">	105	<view class="item">
105	<view class="item">	106	<text>支付方式</text>
106	<text>支付方式</text>	107	<view class="itemRight">
107	<view class="itemRight">	108	<view class="rightText">
108	<view class="rightText">	109	<view class="choosePayWay">
109	<view class="choosePayWay">	110	<image
110	<image	111	src="../../static/store.png"
111	src="../../static/store.png"	112	mode="aspectFill"
112	mode="aspectFill"	113	></image>
113	></image>	114	<text>微信支付</text>
114	<text>微信支付</text>	115	</view>
115	</view>	116	<!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
116	<!-- <view class="randomSubstraction">最高随机立减￥99</view> -->	117	</view>
117	</view>	118	<!-- <image
118	<!-- <image	119	src="../../static/right.png"
119	src="../../static/right.png"	120	mode="aspectFill"
120	mode="aspectFill"	121	></image> -->
121	></image> -->	122	</view>
122	</view>	123	</view>
123	</view>	124	<!-- <view class="item">
124	<!-- <view class="item">	125	<text>优惠券</text>
125	<text>优惠券</text>	126	<view class="itemRight">
126	<view class="itemRight">	127	<view class="rightText">
127	<view class="rightText">	128	<view class="chooseOffers">
128	<view class="chooseOffers">	129	<text>-￥70.00</text>
129	<text>-￥70.00</text>	130	</view>
130	</view>	131	<view class="preferentialWay">最大优惠</view>
131	<view class="preferentialWay">最大优惠</view>	132	</view>
132	</view>	133	<image
133	<image	134	src="../../static/right.png"
134	src="../../static/right.png"	135	mode="aspectFill"
135	mode="aspectFill"	136	></image>
136	></image>	137	</view>
137	</view>	138	</view> -->
138	</view> -->	139	<view class="item">
139	<view class="item">	140	<text>运费</text>
140	<text>运费</text>	141	<view class="itemRight">
141	<view class="itemRight">	142	<view class="freight">免运费</view>
142	<view class="freight">免运费</view>	143	</view>
143	</view>	144	</view>
144	</view>	145	<view class="item">
145	<view class="item">	146	<text>合计</text>
146	<text>合计</text>	147	<view class="itemRight">
147	<view class="itemRight">	148	<view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
148	<view class="total">¥{{Number(skuInfo.real_price) * count}}</view>	149	</view>
149	</view>	150	</view>
150	</view>	151	</view>
151	</view>	152	<!--
152	<!--	153	<view class="checkBox">
153	<view class="checkBox">	154	<checkbox-group>
154	<checkbox-group>	155	<label>
155	<label>	156	<checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
156	<checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买	157	</label>
157	</label>	158	</checkbox-group>
158	</checkbox-group>	159	</view> -->
159	</view> -->	160	</view>
160	</view>	161	<view class="footer">
161	<view class="footer">	162	<view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
162	<view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>	163	<view class="footerRight">
163	<view class="footerRight">	164	<view
164	<view	165	class="paybtn"
165	class="paybtn"	166	@tap="orderBuild"
166	@tap="orderBuild"	167	>立即支付</view>
167	>立即支付</view>	168	</view>
168	</view>	169	</view>
169	</view>	170	</view>
170	</view>	171	</template>
171	</template>	172
172		173	<script>
173	<script>	174	import store from '@/store'
174	import store from '@/store'	175	import MD5Util from '../../utils/md5'
175	import MD5Util from '../../utils/md5'	176
176		177	export default {
177	export default {	178	data() {
178	data() {	179	return {
179	return {	180	addAddress: '添加收货地址',
180	addAddress: '添加收货地址',	181	count: 1,
181	count: 1,	182	pid: 0,
182	pid: 0,	183	disabled: false,
183	disabled: false,	184	freight: 0.0,
184	freight: 0.00,	185	showAddress: false,
185	showAddress: false,	186	note: '',
186	note: '',	187	addressInfo: {
187	addressInfo: {	188	address: '',
188	address: '',	189	},
189	},	190	// isAnonymous:
190	// isAnonymous:	191	}
191	}	192	},
192	},	193	onLoad({ pid, addressId, isCart }) {
193	onLoad({ pid, addressId, isCart }) {	194	this.pid = pid
194	this.pid = pid	195	// 若已经选择地址
195	// 若已经选择地址	196	if (addressId) {
196	if (addressId) {	197	store
197	store.dispatch('address/details', {	198	.dispatch('address/details', {
198	add_id: addressId,	199	add_id: addressId,
199	}).then(({ code, data }) => {	200	})
200	if (code === 1) {	201	.then(({ code, data }) => {
201	console.log('code', code, data)	202	if (code === 1) {
202	this.showAddress = true	203	console.log('code', code, data)
203	this.addressInfo = data	204	this.showAddress = true
		205	this.addressInfo = data
		206	}
204	}	207	})
205	})	208	} else {
206	} else {	209	store.dispatch('address/default').then(({ code, data }) => {
207	store.dispatch('address/default').then(({ code, data }) => {	210	if (code === 1) {
208	if (code === 1) {	211	console.log('code', code, data)
209	console.log('code', code, data)	212	this.showAddress = true
210	this.showAddress = true	213	this.addressInfo = data
211	this.addressInfo = data	214	}
212	}	215	})
213	})	216	}
214	}	217	store.dispatch('read/fetch', {
215	store.dispatch('read/fetch', {	218	pid,
216	pid,	219	})
217	})	220	},
218	},	221	computed: {
219	computed: {	222	goodInfo() {
220	goodInfo () {	223	console.log('state', this.$store.state)
221	console.log('state', this.$store.state)
222	return this.$store.state.read.goodInfo
223	},
224	skuInfo () {	224	return this.$store.state.read.goodInfo
225	return this.$store.state.order.param.sk_id_arr	225	},
226	},	226	skuInfo() {
227	attrList () {	227	return this.$store.state.order.param.sk_id_arr
228	return this.$store.state.order.param.attrList	228	},
229	},	229	attrList() {
230	current () {	230	return this.$store.state.order.param.attrList
		231	},
		232	current() {
		233	return this.$store.state.order.param.current
231	return this.$store.state.order.param.current	234	},
232	},	235	},
233	},	236	methods: {
234	methods: {	237	counter(isadd) {
235	counter(isadd) {	238	if (isadd) {
236	if (isadd) {	239	this.count++
237	this.count++	240	} else {
238	} else {	241	this.count <= 1 ? (this.disabled = true) : this.count--
239	this.count <= 1 ? this.disabled = true : this.count--	242	}
240	}	243	},
241	},	244	// 跳转添加地址页面
242	// 跳转添加地址页面	245	toaddAddress() {
243	toaddAddress() {	246	uni.navigateTo({
244	uni.navigateTo({	247	url: `../address/addressList?edit=${1}`,
245	url: `../address/addressList?edit=${1}`,	248	success: res => {},
246	success: res => {},	249	fail: error => {
247	fail: (error) => { console.log('跳转到地址列表页面失败====>', error) },	250	console.log('跳转到地址列表页面失败====>', error)
		251	},
		252	complete: () => {},
248	complete: () => {},	253	})
249	})	254	},
250	},	255	// 下单
251	// 下单	256	orderBuild() {
252	orderBuild() {	257	uni.showLoading({
253	uni.showLoading({	258	title: '支付中',
254	title: '支付中',	259	})
255	})	260	console.log('this', this.$store.state)
256	console.log('this', this.$store.state)	261	const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
257	const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param	262	store.dispatch('order/buyNow', {
258	store.dispatch('order/buyNow', {	263	pid: skId.pid,
259	pid: skId.pid,	264	sk_id: skId.sk_id,
260	sk_id: skId.sk_id,	265	number: this.count,
261	number: this.count,	266	mp_id: mpId,
262	mp_id: mpId,	267	address: JSON.stringify(this.addressInfo),
263	address: JSON.stringify(this.addressInfo),	268	totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
264	totalPrice: Number(this.skuInfo.real_price) * this.count * 100,	269	liuyan: this.note,
		270	dir: 1,
		271	}).then((res) => {
265	liuyan: this.note,	272	this.pay(res.data)
266	dir: 1,	273	})
267	}).then((res) => {	274	},
268	this.pay(res.data)	275	// 支付
269	})	276	pay(res) {
270	},	277	console.log('pay', res)
271	// 支付	278	const { data, exKeyName: keyName } = res
272	pay(res) {	279	const uid = uni.getStorageSync('uid')
273	console.log('pay', res)	280	const timeStamp = new Date().getTime().toString()
274	const { data, exKeyName: keyName } = res	281	const nonceStr = 'asfafasfasfasfasf'
275	const uid = uni.getStorageSync('uid')	282	// 支付参数
276	const timeStamp = new Date().getTime().toString()	283	const fieldSet = {
277	const nonceStr = 'asfafasfasfasfasf'	284	openid: this.$store.state.user.userInfo.openid,
278	const fieldSet = {	285	uid: this.$store.state.user.userInfo.uid,
279	openid: this.$store.state.user.userInfo.openid,	286	shopid: 0,
280	uid: this.$store.state.user.userInfo.uid,	287	payCate: 2020,
281	shopid: 0,	288	payMoney: Number(this.skuInfo.real_price) * this.count * 100,
282	payCate: 2020,	289	payWoodId: `fcdj-${uid}-${keyName}`,
283	payMoney: Number(this.skuInfo.real_price) * this.count * 100,	290	payWoodDesc: '在【非常戴镜】的微信付款凭证',
284	payWoodId: `fcdj-${uid}-${keyName}`,	291	nonceStr,
285	payWoodDesc: '在【非常戴镜】的微信付款凭证',	292	signType: 'MD5',
286	nonceStr,	293	app_uid: 2020,
287	signType: 'MD5',	294	timeStamp,
288	app_uid: 2020,	295	keyname: keyName,
289	timeStamp,	296	billInfo: JSON.stringify(data),
290	keyname: keyName,	297	}
291	billInfo: JSON.stringify(data),	298	// 请求后台支付接口
292	}	299	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
293	console.log('fieldSet', fieldSet)	300	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
294	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {	301	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
295	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {	302	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
296	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`	303
297	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'	304	// 微信支付接口
298	uni.requestPayment({	305	uni.requestPayment({
299	appId: data.appid,	306	appId: data.appid,
300	timeStamp,	307	timeStamp,
301	nonceStr,	308	nonceStr,
302	total_fee: Number(this.skuInfo.real_price) * this.count * 100,	309	total_fee: Number(this.skuInfo.real_price) * this.count * 100,
303	package: `prepay_id=${data.prepay_id}`,	310	package: `prepay_id=${data.prepay_id}`,
304	signType: 'MD5',	311	signType: 'MD5',
305	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),	312	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
306	success: (res) => {	313	success: (res) => {
307	uni.showModal({	314	// 支付成功
308	content: '支付成功',	315	uni.showModal({
309	showCancel: false,	316	content: '支付成功',
310	})	317	showCancel: false,
311	console.log('res-----支付成功', res)	318	})
312	uni.reLaunch({	319	// 跳转订单详情页->状态待收货
313	url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`,	320	uni.reLaunch({
314	})	321	url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`,
315	},	322	})
316	fail: (res) => {	323	},
317	uni.showModal({	324	fail: (res) => {
318	content: '支付失败',	325	// 支付失败
319	showCancel: false,	326	uni.showModal({
320	})	327	content: '支付失败',
321	console.log('res------支付失败', res)	328	showCancel: false,
322	uni.reLaunch({	329	})
323	url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`,	330	// 跳转订单详情页->状态待付款
324	})	331	uni.reLaunch({
325	},	332	url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`,
326	complete: () => {	333	})
327	uni.hideLoading()	334	},
328	},	335	complete: () => {
329	})	336	uni.hideLoading()
330	} else {	337	},
331	console.log('支付失败')	338	})
332	uni.hideLoading()	339	} else {
333	}	340	uni.showModal({
334	})	341	content: '支付失败',
335	},	342	showCancel: false,
336	},	343	})
337	}	344	console.log('支付失败')
338	</script>	345	uni.hideLoading()
339		346	}
340	<style lang="scss">	347	})
341	.wrap {	348	},
342	height: 100vh;	349	},
343	background-color: #f2f2f2;	350	}
344	font-family: PingFangSC-Regular;	351	</script>
345	letter-spacing: -0.23px;	352
346	position: absolute;	353	<style lang="scss">
347	}	354	.wrap {
348	.addAddress {	355	height: 100vh;
349	background-color: #ffffff;	356	background-color: #f2f2f2;
350	box-sizing: border-box;	357	font-family: PingFangSC-Regular;
351	height: 124rpx;	358	letter-spacing: -0.23px;
352	width: 100%;	359	position: absolute;
353	display: flex;	360	}
354	align-items: center;	361	.addAddress {
355	padding: 0 40rpx;	362	background-color: #ffffff;
356	.addIcon {	363	box-sizing: border-box;
357	background-color: #f2f2f2;	364	height: 124rpx;
358	height: 56rpx;	365	width: 100%;
359	width: 60rpx;	366	display: flex;
360	border-radius: 4rpx;	367	align-items: center;
361	display: flex;	368	padding: 0 40rpx;
362	justify-content: center;	369	.addIcon {
363	align-items: center;	370	background-color: #f2f2f2;
364	margin-right: 40rpx;	371	height: 56rpx;
365	}	372	width: 60rpx;
366	image {	373	border-radius: 4rpx;
367	height: 28rpx;	374	display: flex;
368	width: 28rpx;	375	justify-content: center;
369	}	376	align-items: center;
370	.addressText {	377	margin-right: 40rpx;
371	font-size: 28rpx;	378	}
372	color: #333333;	379	image {
373	margin-right: 364rpx;	380	height: 28rpx;
374	}	381	width: 28rpx;
375	}	382	}
376	.content {	383	.addressText {
377	background-color: #f2f2f2;	384	font-size: 28rpx;
378	width: 100%;	385	color: #333333;
379	display: flex;	386	margin-right: 364rpx;
380	flex-direction: column;	387	}
381	justify-content: center;	388	}
382	align-items: center;	389	.content {
383	padding: 40rpx;	390	background-color: #f2f2f2;
384	box-sizing: border-box;	391	width: 100%;
385	.orderInfo {	392	display: flex;
386	width: 670rpx;	393	flex-direction: column;
387	height: 488rpx;	394	justify-content: center;
388	background-color: #ffffff;	395	align-items: center;
389	border-radius: 20rpx;	396	padding: 40rpx;
390	box-sizing: border-box;	397	box-sizing: border-box;
391	padding: 0 40rpx 40rpx 40rpx;	398	.orderInfo {
392	.title {	399	width: 670rpx;
393	display: flex;	400	height: 488rpx;
394	align-items: center;	401	background-color: #ffffff;
395	font-size: 28rpx;	402	border-radius: 20rpx;
396	color: #333333;	403	box-sizing: border-box;
397	height: 60rpx;	404	padding: 0 40rpx 40rpx 40rpx;
398	line-height: 40rpx;	405	.title {
399	padding: 10rpx 10rpx 10rpx 0rpx;	406	display: flex;
400	image {	407	align-items: center;
401	margin-right: 20rpx;	408	font-size: 28rpx;
402	}	409	color: #333333;
403	}	410	height: 60rpx;
404	.infoBox {	411	line-height: 40rpx;
405	margin-top: 42rpx;	412	padding: 10rpx 10rpx 10rpx 0rpx;
406	.infoTop {	413	image {
407	display: flex;	414	margin-right: 20rpx;
408	flex-direction: row;	415	}
409	image {	416	}
410	height: 188rpx;	417	.infoBox {
411	width: 188rpx;	418	margin-top: 42rpx;
412	margin-right: 24rpx;	419	.infoTop {
413	}	420	display: flex;
414	.infoRight {	421	flex-direction: row;
415	width: 374rpx;	422	image {
416	display: flex;	423	height: 188rpx;
417	flex-direction: column;	424	width: 188rpx;
418	align-items: flex-start;	425	margin-right: 24rpx;
419	justify-content: space-between;	426	}
420	.goodName {	427	.infoRight {
421	font-size: 28rpx;	428	width: 374rpx;
422	color: #333333;	429	display: flex;
423	}	430	flex-direction: column;
424	.remarks {	431	align-items: flex-start;
425	font-size: 20rpx;	432	justify-content: space-between;
426	color: #999999;	433	.goodName {
427	}	434	font-size: 28rpx;
428	.priceBox {	435	color: #333333;
429	display: flex;	436	}
430	justify-content: space-between;	437	.remarks {
431	align-items: center;	438	font-size: 20rpx;
432	width: 100%;	439	color: #999999;
433	.price {	440	}
434	color: #ff6b4a;	441	.priceBox {
435	font-size: 28rpx;	442	display: flex;
436	}	443	justify-content: space-between;
437	.originCost {	444	align-items: center;
438	text-decoration: line-through;	445	width: 100%;
439	color: #999999;	446	.price {
440	font-size: 20rpx;	447	color: #ff6b4a;
441	}	448	font-size: 28rpx;
442	.counter {	449	}
443	display: flex;	450	.originCost {
444	flex-direction: row;	451	text-decoration: line-through;
445	justify-content: space-between;	452	color: #999999;
446	font-size: 28rpx;	453	font-size: 20rpx;
447	color: #333333;	454	}
448	width: 122rpx;	455	.counter {
449	.btn {	456	display: flex;
450	display: flex;	457	flex-direction: row;
451	justify-content: center;	458	justify-content: space-between;
452	line-height: 32rpx;	459	font-size: 28rpx;
453	height: 32rpx;	460	color: #333333;
454	width: 32rpx;	461	width: 122rpx;
455	background-color: #f2f2f2;	462	.btn {
456	color: #cfcfcf;	463	display: flex;
457	}	464	justify-content: center;
458	}	465	line-height: 32rpx;
459	}	466	height: 32rpx;
460	}	467	width: 32rpx;
461	}	468	background-color: #f2f2f2;
462	.infoBottom {	469	color: #cfcfcf;
463	display: flex;	470	}
464	flex-direction: column;	471	}
465	justify-content: flex-start;	472	}
466	font-size: 24rpx;	473	}
467	color: #333333;	474	}
468	text {	475	.infoBottom {
469	color: #999999;	476	display: flex;
470	margin-left: 20rpx;	477	flex-direction: column;
471	}	478	justify-content: flex-start;
472		479	font-size: 24rpx;
473	.norm {	480	color: #333333;
474	margin-top: 28rpx;	481	text {
475	}	482	color: #999999;
476	.shippingMethod {	483	margin-left: 20rpx;
477	margin-top: 12rpx;	484	}
478	}	485
479	.message {	486	.norm {
480	display: flex;	487	margin-top: 28rpx;
481	flex-direction: row;	488	}
482	align-items: center;	489	.shippingMethod {
483	margin-top: 18rpx;	490	margin-top: 12rpx;
484	input {	491	}
485	margin-left: 20rpx;	492	.message {
486	width: 75%;	493	display: flex;
487	}	494	flex-direction: row;
488	}	495	align-items: center;
489	}	496	margin-top: 18rpx;
490	}	497	input {
491	}	498	margin-left: 20rpx;
492	.payWay {	499	width: 75%;
493	height: 464rpx;	500	}
494	width: 670rpx;	501	}
495	background-color: #ffffff;	502	}
496	color: #333333;	503	}
497	font-size: 24rpx;	504	}
498	border-radius: 20rpx;	505	.payWay {
499	box-sizing: border-box;	506	height: 464rpx;
500	padding: 0 52rpx 0rpx 40rpx;	507	width: 670rpx;
501	margin-top: 20rpx;	508	background-color: #ffffff;
502	display: flex;	509	color: #333333;
503	flex-direction: column;	510	font-size: 24rpx;
504	justify-content: center;	511	border-radius: 20rpx;
505	align-items: flex-start;	512	box-sizing: border-box;
506	.item {	513	padding: 0 52rpx 0rpx 40rpx;
507	display: flex;	514	margin-top: 20rpx;
508	flex-direction: row;	515	display: flex;
509	justify-content: space-between;	516	flex-direction: column;
510	align-items: center;	517	justify-content: center;
511	width: 100%;	518	align-items: flex-start;
512	height: 115rpx;	519	.item {
513	.itemRight {	520	display: flex;
514	display: flex;	521	flex-direction: row;
515	flex-direction: row;	522	justify-content: space-between;
516	justify-content: space-between;	523	align-items: center;
517	align-items: center;	524	width: 100%;
518	image {	525	height: 115rpx;
519	height: 24rpx;	526	.itemRight {
520	width: 12rpx;	527	display: flex;
521	}	528	flex-direction: row;
522	.rightText {	529	justify-content: space-between;
523	margin-right: 20rpx;	530	align-items: center;
524	text-align: right;	531	image {
525	.choosePayWay {	532	height: 24rpx;
526	text {	533	width: 12rpx;
527	color: #333333;	534	}
528	}	535	.rightText {
529	image {	536	margin-right: 20rpx;
530	height: 26rpx;	537	text-align: right;
531	width: 30rpx;	538	.choosePayWay {
532	margin-right: 20px;	539	text {
533	}	540	color: #333333;
534	}	541	}
535	.randomSubstraction {	542	image {
536	color: #ff6b4a;	543	height: 26rpx;
537	}	544	width: 30rpx;
538	.preferentialWay {	545	margin-right: 20px;
539	color: #999999;	546	}
540	}	547	}
541	}	548	.randomSubstraction {
542	.freight,	549	color: #ff6b4a;
543	.total {	550	}
544	margin-right: 32rpx;	551	.preferentialWay {
545	}	552	color: #999999;
546	text {	553	}
547	color: #ff6b4a;	554	}
548	}	555	.freight,
549	}	556	.total {
550	}	557	margin-right: 32rpx;
551	}	558	}
552	// .checkBox {	559	text {
553	// height: 58rpx;	560	color: #ff6b4a;
554	// line-height: 58rpx;	561	}
555	// width: 100%;	562	}
556	// margin-top: 36rpx;	563	}
557	// margin-left: 40rpx;	564	}
558	// font-size: 12px;	565	// .checkBox {
559	// color: #999999;	566	// height: 58rpx;
560	// }	567	// line-height: 58rpx;
561	}	568	// width: 100%;
562	.footer {	569	// margin-top: 36rpx;
563	height: 112rpx;	570	// margin-left: 40rpx;
564	width: 100%;	571	// font-size: 12px;
565	background-color: #fff;	572	// color: #999999;
566	font-size: 16px;	573	// }
567	display: flex;	574	}
568	justify-content: space-between;	575	.footer {
569	align-items: center;	576	height: 112rpx;
570	position: fixed;	577	width: 100%;
571	bottom: 0;	578	background-color: #fff;
572	.footerLeft {	579	font-size: 16px;
573	display: flex;	580	display: flex;
574	justify-content: center;	581	justify-content: space-between;
575	align-items: center;	582	align-items: center;
576	width: 50%;	583	position: fixed;
577	color: #333333;	584	bottom: 0;
578	text {	585	.footerLeft {
579	color: #ff6b4a;	586	display: flex;
580	}	587	justify-content: center;
581	}	588	align-items: center;
582	.footerRight {	589	width: 50%;
583	display: flex;	590	color: #333333;
584	justify-content: flex-end;	591	text {
585	align-items: center;	592	color: #ff6b4a;
586	width: 50%;	593	}
587	margin-right: 26rpx;	594	}
588	.paybtn {	595	.footerRight {
589	display: flex;	596	display: flex;
590	justify-content: center;	597	justify-content: flex-end;
591	align-items: center;	598	align-items: center;
592	background: #ff6b4a;	599	width: 50%;
593	border-radius: 20px;	600	margin-right: 26rpx;
594	border-radius: 20px;	601	.paybtn {
595	color: #ffffff;	602	display: flex;
596	width: 204rpx;	603	justify-content: center;
597	height: 80rpx;	604	align-items: center;
598	}	605	background: #ff6b4a;
599	}	606	border-radius: 20px;
600	}	607	border-radius: 20px;
601	// 地址信息样式	608	color: #ffffff;
602	.order-user {	609	width: 204rpx;
603	width: 670rpx;	610	height: 80rpx;
604	height: 228rpx;	611	}
605	background: #ffffff;	612	}
606	border-radius: 14rpx;	613	}
607	margin: 0 auto;	614	// 地址信息样式
608	margin-top: 20rpx;	615	.order-user {
609	position: relative;	616	width: 670rpx;
610	.order-user-head {	617	height: 228rpx;
611	display: flex;	618	background: #ffffff;
612	height: 108rpx;	619	border-radius: 14rpx;
613	width: 100%;	620	margin: 0 auto;
614	align-items: center;	621	margin-top: 20rpx;
615	margin-left: 126rpx;	622	position: relative;
616	.name {	623	.order-user-head {
617	display: flex;	624	display: flex;
618	justify-content: space-between;	625	height: 108rpx;
619	font-size: 14px;	626	width: 100%;
620	color: #333333;	627	align-items: center;
621	letter-spacing: -0.26px;	628	margin-left: 126rpx;
622	margin-right: 20rpx;	629	.name {
623	.default {	630	display: flex;
624	height: 40rpx;	631	justify-content: space-between;
625	width: 80rpx;	632	font-size: 14px;
626	background-color: #4a90e2;	633	color: #333333;
627	border-radius: 13px;	634	letter-spacing: -0.26px;
628	border-radius: 13px;	635	margin-right: 20rpx;
629	text-align: center;	636	.default {
630	margin-right: 20rpx;	637	height: 40rpx;
631	text {	638	width: 80rpx;
632	font-size: 12px;	639	background-color: #4a90e2;
633	color: #ffffff;	640	border-radius: 13px;
634	letter-spacing: -0.23px;	641	border-radius: 13px;
635	}	642	text-align: center;
636	}	643	margin-right: 20rpx;
637	}	644	text {
638	.mobile {	645	font-size: 12px;
639	font-size: 14px;	646	color: #ffffff;
640	color: #999999;	647	letter-spacing: -0.23px;
641	letter-spacing: -0.26px;	648	}
642	}	649	}
643	}	650	}
644	.order-user-body {	651	.mobile {
645	display: flex;	652	font-size: 14px;
646	width: 100%;	653	color: #999999;
647	image {	654	letter-spacing: -0.26px;
648	width: 24px;	655	}
649	height: 26px;	656	}
650	margin: 12rpx 32rpx 0 40rpx;	657	.order-user-body {
651	}	658	display: flex;
652	.address {	659	width: 100%;
653	font-weight: bold;	660	image {
654	font-size: 14px;	661	width: 24px;
655	color: #333333;	662	height: 26px;
656	letter-spacing: -0.26px;	663	margin: 12rpx 32rpx 0 40rpx;
657	}	664	}
658	}	665	.address {
659	.arrow {	666	font-weight: bold;
660	width: 6px;	667	font-size: 14px;
661	height: 12px;	668	color: #333333;
662	position: absolute;	669	letter-spacing: -0.26px;
663	right: 40rpx;	670	}
664	bottom: 104rpx;	671	}
665	}	672	.arrow {
666	}	673	width: 6px;
667	</style>	674	height: 12px;
668		675	position: absolute;
		676	right: 40rpx;
		677	bottom: 104rpx;
		678	}

src/pages/frameDetail/frameDetail.vue

Diff comments View file @55420a8

 <template>
   <view class="container">
     <view class="D1">
       <!-- 轮播图 -->
       <swiper
         class="swiperImage"
         :indicator-dots="true"
         :autoplay="true"
         :interval="4000"
         :duration="500"
       >
         <swiper-item
           v-for="(item, index) in goodInfo.pics"
           :key="index"
         >
           <image
             :src="item"
             mode="scaleToFill"
           ></image>
         </swiper-item>
       </swiper>
       <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
       <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
       <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
     </view>
     <view
       class="D2"
       v-if="updateGoodType == 2 || updateGoodType == 4"
     >
       <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
       <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
       <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
     </view>
     <!-- <view
       class="D2"
       v-if="updateGoodType == 1"
     >
       <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
       <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
       <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
     </view>
     <view
       class="D2"
       v-if="updateGoodType == 3"
     >
       <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
       <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
       <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
     </view> -->
     <view class="D3">
       <view class="screenBar">
         <view
           v-for="item in screenItems"
           :key="item.current"
           @click="tabChange(item.current)"
         >
           <view
             class="screenItem"
             v-bind:class="{ active: current === item.current }"
           >{{ item.text || '暂无' }}</view>
         </view>
       </view>
       <view
         class="screen-item"
         v-if="current === 1"
       >
         <view class="D3_list">
           <view
             v-for="(item) in parameter"
             :key="item.key"
           >
             <image
               class="D3_image"
               v-bind:src="item.img"
             ></image>
             <span>{{item.standard || '暂无'}}</span>
             <span>{{item.slength || '暂无'}}</span>
           </view>
         </view>
       </view>
       <view
         class="screen-item"
         v-if="current === 0"
       >
         <view class="D3_list">
           <!-- <block>
             <view>主体</view>
             <view>商品产地：韩国</view>
             <view>包装清单：彩色隐形 * 1</view>
           </block> -->
           <!-- 迭代时建议配合接口修改 为数组 -->
           <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
             <view class="">
               年龄：<view
                 v-for="(item,index) in tag.prod_tag_age"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
             <view class="">
               颜色：<view
                 v-for="(item,index) in tag.prod_tag_color"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
             <view class="">
               脸型：<view
                 v-for="(item,index) in tag.prod_tag_face"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
             <view class="">
               赠品：<view
                 v-for="(item,index) in tag.prod_tag_freesend"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
             <view class="">
               保险：<view
                 v-for="(item,index) in tag.prod_tag_insurance"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
             <view class="">
               材质：<view
                 v-for="(item,index) in tag.prod_tag_metal"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
             <view class="">
               个性：<view
                 v-for="(item,index) in tag.prod_tag_personal"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
             <view class="">
               场景：<view
                 v-for="(item,index) in tag.prod_tag_sense"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
             <view class="">
               性别：<view
                 v-for="(item,index) in tag.prod_tag_sex"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
             <view class="">
               风格：<view
                 v-for="(item,index) in tag.prod_tag_style"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
             <view class="">
               重量：<view
                 v-for="(item,index) in tag.prod_tag_weight"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
               </view>
             </view>
           </view>
         </view>
       </view>
       <view
         class="screen-item "
         v-if="current ===2"
       >
         <view class="customerService">
           <view class="serviceItem">
             <view class="title">
               <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
               <text class="titleText">卖家服务</text>
             </view>
             <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
           </view>
           <view class="serviceItem">
             <view class="title">
               <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
               <text class="titleText">平台承诺</text>
             </view>
             <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
           </view>
           <view class="serviceItem">
             <view class="title">
               <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
               <text class="titleText">正品保证</text>
             </view>
             <view class="itemContent">向您保证所售商品均为正品行货</view>
           </view>
           <view class="serviceItem2">
             <view class="title">
               <text class="titleText">权利申明</text>
             </view>
             <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
           </view>
           <view class="serviceItem2">
             <view class="title">
               <text class="titleText">价格保证</text>
             </view>
             <view class="itemContent">
               <view class="itemContent-child">
                 <text class="contentTitle">平台价:</text>
                 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
               </view>
               <view class="itemContent-child">
                 <text class="contentTitle">划线价:</text>
                 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
               </view>
               <view class="itemContent-child">
                 <text class="contentTitle">平折扣:</text>
                 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
               </view>
               <view class="itemContent-child">
                 <text class="contentTitle">异常问题:</text>
                 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
               </view>
             </view>
           </view>
         </view>
       </view>
     </view>
     <view
       class="D4"
       v-if="current !==2"
     >
       <view class="D4_esvalue">
         <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
         <view class="D4_2">
           <view
             class="star"
             v-for="o in starCount"
             :key="o"
           >
             <image
               src="../../static/img/detail/d_star.png"
               mode="aspectFill"
               style="height: 26rpx; width: 28rpx;"
             ></image>
           </view>
         </view>
       </view>
       <view class="D4_list">
         <view
           v-for="(assess) in goodInfo.judge_tag"
           :key="assess.key"
         >{{assess.name}}</view>
       </view>
     </view>
     <view
       class="D5"
       v-if="current !==2"
     >
       <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
         <image src="/static/img/detail/hr.png"></image>
         <view>商品详细</view>
         <image src="/static/img/detail/hr.png"></image>
       </view>
       <view class="D5_all" v-html="test">
         <!-- <block>
           <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
         </block> -->
       </view>
     </view>
     <!-- 底部菜单 -->
     <view class="botton">
       <view
         @tap="toCart()"
         class="botton_1"
       >
         <image v-bind:src="imgShop.img"></image>
         <view class="botton_image">购物车</view>
       </view>
       <view class="botton_2">
         <view
           class="botton_input"
           @tap="addCart()"
         >加入购物车</view>
         <view
           class="botton_now"
           @tap="goPerchase()"
         >立即购买</view>
       </view>
     </view>
   </view>
 </template>
 <script>
 import store from '@/store'
 export default {
   data () {
     return {
       test: '',
       goodType: 2,
       pid: 0,
       // 购物车数据
       addCartList: {
         mp_id: 0,
-        uid: 0,
         sk_id: 0,
         num: 1,
         price: '',
       },
       screenItems: [
         { current: 0, text: '商品介绍' },
         { current: 1, text: '规格参数' },
         { current: 2, text: '售后保障' },
       ],
       current: 0,
       starCount: 5,
       parameter: [
         { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
         { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
         { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
         { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
         { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
         { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
       ],
       esvalue: '宝贝好评率',
       introduction: {
         material: '钛合金',
         func: '抗疲劳/防辐射',
         rate: '男/女',
       },
       imgAll: '/static/img/detail/d8.png',
       photoes: [
         { value: '日常办公', img: '/static/img/detail/d9.png' },
         { value: '上网', img: '/static/img/detail/d10.png' },
         { value: '追剧', img: '/static/img/detail/d11.png' },
         { value: '玩游戏', img: '/static/img/detail/d12.png' },
       ],
       imgDetail: '/static/img/detail/d13.png',
       imgShop: {
         img: '/static/tab-cart.png',
         IsShown: false,
       },
       tag: {
         prod_tag_freesend: [{
           label: '眼镜盒',
           value: '262',
         }],
       },
     }
   },
   onLoad: function ({ pid, sk_id: skId }) {
     this.pid = pid
     // console.log('sk_id=====>',sk_id)
     store.dispatch('read/fetch', {
       pid,
       sk_id: skId,
     }).then(() => {
       this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
       this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
       this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
       this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
       this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
       this.parameter[5].slength = `${this.goodInfo.weight}mm`
       this.tag = this.goodInfo.tag
       this.test = this.goodInfo.prodIntro1
       this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
       // addCart
-      this.addCartList.price = this.goodInfo.p_sale_price
+      this.addCartList.price = this.goodInfo.priceArea.Min_Price
       this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
       this.addCartList.mp_id = this.goodInfo.glassData.mp_id
-      this.addCartList.uid = this.$store.state.user.userInfo.uid
     })
     // console.log(this.$store.state.user.userInfo.uid + 'ssss')
   },
   computed: {
     updateGoodType () {
       return this.goodType
     },
     goodInfo () {
       console.log(this.$store.state.read.goodInfo)
       return this.$store.state.read.goodInfo
     },
   },
   methods: {
     // 前往购物车
     toCart() {
       uni.switchTab({
         url: '/pages/cart/cart',
         success: res => {},
         fail: (error) => { console.log('跳转购物车失败======>', error) },
         complete: () => { console.log('toCart') },
       })
     },
     // 加入购物车
     addCart () {
       store.dispatch('cart/addCart', {
         uid: this.$store.state.user.userInfo.uid,
         openid: this.$store.state.user.userInfo.openid,
         mp_id: this.addCartList.mp_id,
         sk_id: this.addCartList.sk_id,
         num: this.addCartList.num,
         pid: this.pid,
         price: this.addCartList.price,
-        checkedSKU: {},
       })
+      // 再次请求购物车接口，实现实时更新
       store.dispatch('cart/getCartList', {
-        uid: this.$store.state.user.userInfo.uid, // 用户id
+        uid: this.$store.state.user.userInfo.uid,
       })
     },
     goPerchase () {
       // switch (this.updateGoodType) {
       //   case '1':
       console.log('goPerchase')
       uni.navigateTo({
         url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
         success: res => {},
         fail: (error) => { console.log('跳转参数选择失败======>', error) },
         complete: () => { console.log('goPerchase') },
       })
       // break
       // case '2':
       //   uni.navigateTo({
       //     url: '../detailStandard/detailStandard_k',
       //     success: res => {},
       //     fail: () => {},
       //     complete: () => {}
       //   })
       //   break
       // case '3':
       //   uni.navigateTo({
       //     url: '../purchaseLenses/purchaseLenses',
       //     success: res => {},
       //     fail: () => {},
       //     complete: () => {}
       //   })
       //   break
       // case '4':
       //   uni.navigateTo({
       //     url: '../detailStandard/detailStandard_sun',
       //     success: res => {},
       //     fail: () => {},
       //     complete: () => {}
       //   })
       //   break
       // default :
       //   break
       // }
     },
     // 加入购物车
     // addCart () {
     //   store.dispatch('cart/addCart', {
     //     uid: this.$store.state.user.userInfo.uid,
     //     openid: this.$store.state.user.userInfo.openid,
     //     pid: this.pid,
     //     checkedSKU: {},
     //   })
     //   store.dispatch('cart/getCartList', {
     //     uid: this.$store.state.user.userInfo.uid, // 用户id
     //   })
     // },
     tabChange (e) {
       if (this.current !== e) {
         this.current = e
       }
     },
   },
 }
 </script>
 <style lang='scss'>
 .container {
   background-color: #f8f8f8;
 }
 .D1,
 .D2,
 .D3,
 .D4,
 .D6 {
   background: #ffffff;
   margin-bottom: 10px;
   padding: 8px 20px 8px 20px;
   box-sizing: border-box;
   .swiperImage {
     width: 684rpx;
     height: 480rpx;
     image {
       max-width: 100%;
       max-height: 100%;
       border-radius: 16rpx;
     }
   }
 }
 .D5 {
   background: #ffffff;
   padding: 8px 20px 8px 20px;
   box-sizing: border-box;
 }
 .swiperImage {
   width: 100%;
   height: 560rpx;
   .swiper-item {
     width: 100%;
     image {
       width: 100%;
     }
   }
 }
 .D1 {
   .D1_price {
     color: #eb5d3b;
     font-size: 18px;
     margin-top: 5px;
     font-family: "PingFangSC-Semibold";
     display: flex;
     justify-content: space-between;
     .D1_number {
       color: #999999;
       font-size: 14px;
       font-family: "PingFangSC-Regular";
     }
   }
   .D1_name {
     font-size: 16px;
     font-family: "PingFangSC-Semibold";
     margin-top: 5px;
     .D1_name1 {
       font-weight: bold;
       font-size: 16px;
       color: #333333;
     }
   }
   .D1_spans {
     font-size: 10px;
     color: #999999;
     margin-top: 5px;
     span {
       height: 14px;
       margin-right: 10px;
     }
   }
 }
 .D2 {
   font-size: 14px;
   font-family: "PingFangSC-Regular";
   view {
     height: 24px;
   }
   .D2_span1 {
     color: #999999;
   }
   .D2_span2 {
     color: #333333;
   }
 }
 .D3 {
   .screenBar {
     width: 670rpx;
     margin-top: 20rpx;
     margin-bottom: 24rpx;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
     color: #333333;
     transition: all 0.2s;
   }
   .screen-item {
     font-size: 32rpx;
     color: #333333;
     display: flex;
     transition: all 0.2s;
     .D3_list {
       margin-bottom: 4px;
     }
     .D3_list view {
       display: flex;
       align-content: center;
       font-size: 14px;
       color: #333333;
     }
     .D3_list image {
       width: 50px;
       height: 25px;
       margin-right: 6px;
     }
     .D3_list span {
       margin-left: 6px;
       margin-right: 5px;
       font-family: "PingFangSC-Regular";
     }
   }
   .active {
     border-bottom: 4rpx solid #ff6b4a;
   }
   .customerService {
     margin-bottom: 90rpx;
     .serviceItem {
       margin-bottom: 32rpx;
       .title {
         display: flex;
         flex-direction: row;
         align-items: center;
         .titleText {
           font-size: 14px;
           color: #333333;
           margin-bottom: 12rpx;
         }
       }
       .itemContent {
         font-size: 14px;
         color: #999999;
         margin-left: 18rpx;
       }
     }
     .serviceItem2 {
       margin-left: 18rpx;
       margin-bottom: 32rpx;
       .titleText {
         font-size: 14px;
         color: #ff6b4a;
       }
       .itemContent {
         font-size: 14px;
         color: #999999;
         .itemContent-child {
           margin-bottom: 40rpx;
           .contentTitle {
             border-bottom: 1px solid #ff6b4a;
           }
         }
       }
     }
   }
 }
 .D4 {
   .D4_esvalue {
     font-size: 14px;
     color: #333333;
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
     .D4_2 {
       width: 90px;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
   }
   .D4_esvalue view {
     font-size: 14px;
     color: #333333;
     font-weight: bold;
   }
   .D4_list{
     display: grid;
     grid-row-gap: 10px;
     grid-column-gap: 4px;
   }
   .D4_list view {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
     width: 118px;
     height: 24px;
     border-radius: 2px;
     background: #f2f2f2;
     color: #666666;
     // letter-spacing: 1px;
   }
 }
 .D5 {
   .D5_fixed1 {
     display: flex;
     justify-content: space-between;
     align-content: center;
     margin-bottom: 12px;
     view {
       font-size: 14px;
       color: #333333;
       font-weight: bold;
       font-family: "PingFangSC-Medium";
       line-height: 24px;
     }
     image {
       width: 240rpx;
       height: 3px;
       margin-top: 10px;
     }
   }
   .D5_all {
     width: 100%;
     margin-top: 30rpx;
     margin-right: 30rpx;
     margin-bottom: 180rpx;
     font-family: "PingFangSC-Regular";
     // border: #999999 solid 1.5px;
   }
 }
 .D6 {
   width: 100%;
   height: 430px;
   background: #f9f6ed;
   margin-bottom: 74px;
   view {
     text-align: center;
   }
   .D6_v1 {
     font-weight: bold;
   }
   .D6_v2 {
     font-size: 14px;
     margin-bottom: 30px;
   }
   .D6_v5 {
     .D6_v5_s1 {
       font-weight: bold;
     }
     .D6_v5_s2 {
       font-size: 14px;
     }
   }
 }
 .botton {
   position: fixed;
   bottom: 0;
   height: 74px;
   width: 100%;
   background: #ffffff;
   padding: 20px 20px 8px 20px;
   font-family: "PingFangSC-Regular";
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-content: center;
   .botton_1 {
     width: 20%;
     height: 100%;
     text-align: center;
     color: #989898;
   }
   image {
     width: 60%;
     height: 30px;
   }
   .botton_image {
     font-size: 12px;
     text-align: center;
   }
   .botton_2 {
     width: 74%;
     height: 86%;
     display: grid;
     grid-template-columns: 50% 50%;
   }
   .botton_input {
     display: inline-flex;
     align-items: center;
     justify-content: space-around;
     background: #fff0ec;
     font-size: 16px;
     color: #ff6b4a;
     border-radius: 20px 0 0 20px;
   }
   .botton_now {
     display: inline-flex;
     align-items: center;
     justify-content: space-around;
     background: #ff6b4a;
     font-size: 16px;
     color: #ffffff;
     border-radius: 0 20px 20px 0;
   }
 }
 </style>

src/pages/refundment/Refundways.vue

Diff comments View file @55420a8

1	<template>	1	<template>
2	<view class="container" v-bind:style="{height: curheight+'px'}">	2	<view
3	<view class="refund" v-for="(items) in refund" :key="items.key">	3	class="container"
4	<view class="detail">	4	v-bind:style="{height: curheight+'px'}"
5	<view class="detail_img"><image v-bind:src="items.img"></image></view>	5	>
6	<view class="detail2">	6	<view
7	<view class="detail_name">{{items.name}}</view>	7	class="refund"
8	<view class="detail_standard">规格：{{items.standard}}</view>	8	v-for="(items) in refund"
9	<view class="detail_price">	9	:key="items.key"
10	<span>￥{{items.price}}</span>	10	>
11	<span>X{{items.number}}</span>	11	<view class="detail">
12	</view>	12	<view class="detail_img">
13	</view>	13	<image v-bind:src="items.img"></image>
14	</view>
15	<view class="refund_price">
16	<span class="refund_price1">退款金额</span>
17	<span class="refund_price2">￥{{items.refundprice}}</span>
18	</view>
19	<view class="refund_reason">
20	<view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
21	</view>
22	<view class="refund_reason">
23	<view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
24	</view>
25	<view class="refund_reason">
26	<view>换货<image src="/static/img/detail/xiala.png"></image></view>
27	</view>
28	</view>	14	</view>
		15	<view class="detail2">
		16	<view class="detail_name">{{items.name}}</view>
		17	<view class="detail_standard">规格：{{items.standard}}</view>
		18	<view class="detail_price">
		19	<span>￥{{items.price}}</span>
		20	<span>X{{items.number}}</span>
		21	</view>
		22	</view>
		23	</view>
		24	<view class="refund_price">
		25	<span class="refund_price1">退款金额</span>
		26	<span class="refund_price2">￥{{items.refundprice}}</span>
		27	</view>
		28	<view class="refund_reason">
		29	<view>仅退款<image src="/static/img/detail/xiala.png"></image>
		30	</view>
		31	</view>
		32	<view class="refund_reason">
		33	<view>退款退货<image src="/static/img/detail/xiala.png"></image>
		34	</view>
		35	</view>
		36	<view class="refund_reason">
		37	<view>换货<image src="/static/img/detail/xiala.png"></image>
		38	</view>
		39	</view>
29	</view>	40	</view>
		41	</view>
30	</template>	42	</template>
31		43
32	<script>	44	<script>
33	export default {	45	export default {
34	//获取浏览器高度	46	//获取浏览器高度
35	beforeMount(height){	47	beforeMount(height) {
36	var h = document.documentElement.clientHeight \|\| document.body.clientHeight;	48	var h = document.documentElement.clientHeight \|\| document.body.clientHeight;
37	this.curheight = h-44;	49	this.curheight = h - 44;
38		50	},
39	},	51	data() {
40	data(){	52	return {
41	return{	53	curheight: 0, //浏览器高度
42	curheight:0, //浏览器高度	54	refund: [
43	refund:[	55	{
44	{	56	key: 0,
45	key:0,	57	img: "/static/img/detail/d1.png",
46	img:'/static/img/detail/d1.png',	58	name: "商品名称",
47	name:'商品名称',	59	standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
48	standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',	60	price: 180,
49	price: 180,	61	number: 1,
50	number: 1,	62	refundprice: 110,
51	refundprice: 110,	63	refund_img: "/static/img/detail/refund_img.png"
52	refund_img:'/static/img/detail/refund_img.png',	64	}
53	}	65	]
54	],	66	};
55	}	67	}
56	}	68	};
57	}
58	</script>	69	</script>
59		70
60	<style lang="scss">	71	<style lang="scss">
61		72	.container {
62	.container{	73	background: #f2f2f2;
63	background: #F2F2F2;	74	padding-top: 10px;
64	padding-top: 10px;	75	box-sizing: border-box;
65	box-sizing: border-box;
66	}	76	}
67	.refund{	77	.refund {
68	width: 90%;	78	width: 90%;
69	height: 300px;	79	height: 300px;
70	margin: 0 auto;	80	margin: 0 auto;
71	background: #FFFFFF;	81	background: #ffffff;
72	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);	82	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
73	border-radius: 8px;	83	border-radius: 8px;
74	padding: 14px;	84	padding: 14px;
75	box-sizing: border-box;	85	box-sizing: border-box;
76	}	86	}
77	.detail{	87	.detail {
78	display: flex;	88	display: flex;
79	justify-content: space-between;	89	justify-content: space-between;
80	font-family: PingFangSC-Regular;	90	font-family: PingFangSC-Regular;
81	margin-bottom: 20px;	91	margin-bottom: 20px;
82	.detail2{	92	.detail2 {
83	width: 64%;	93	width: 64%;
84	view{	94	view {
85	margin-bottom: 8px;	95	margin-bottom: 8px;
86	}
87	.detail_name{
88	font-size: 14px;
89	color:#333333;
90	}
91	.detail_standard{
92	font-size: 12px;
93	color: #999999;
94	}
95	.detail_price{
96	font-size: 14px;
97	color: #999999;
98	display: flex;
99	justify-content: space-between;
100	}
101	}	96	}
102	.detail_img{	97	.detail_name {
103	width: 188rpx;	98	font-size: 14px;
104	height: 188rpx;	99	color: #333333;
105	border-radius: 40px;
106	image{
107	width: 100%;
108	height: 100%;
109	}
110	}	100	}
111	}	101	.detail_standard {
112		102	font-size: 12px;
113	.refund_price{	103	color: #999999;
114	font-family: PingFangSC-Semibold;	104	}
115	font-size: 14px;	105	.detail_price {
116	color: #333333;	106	font-size: 14px;
117	letter-spacing: -0.26px;	107	color: #999999;
118	line-height: 18px;	108	display: flex;
119	margin-bottom: 26px;	109	justify-content: space-between;
120	.refund_price1{
121	font-weight: bold;
122	margin-right: 16px;
123	}	110	}
124	.refund_price2{	111	}
125	color: #FF6B4A;	112	.detail_img {
		113	width: 188rpx;
		114	height: 188rpx;
		115	border-radius: 40px;
		116	image {
		117	width: 100%;
		118	height: 100%;
126	}	119	}
		120	}
127	}	121	}

src/pages/refundment/refundWays.vue

Diff comments View file @55420a8

1	<template>	1	<template>
2	<view class="container" v-bind:style="{height: curheight+'px'}">	2	<view
3	<view class="refund" v-for="(items) in refund" :key="items.key">	3	class="container"
4	<view class="detail">	4	v-bind:style="{height: curheight+'px'}"
5	<view class="detail_img"><image v-bind:src="items.img"></image></view>	5	>
6	<view class="detail2">	6	<view
7	<view class="detail_name">{{items.name}}</view>	7	class="refund"
8	<view class="detail_standard">规格：{{items.standard}}</view>	8	v-for="(items) in refund"
9	<view class="detail_price">	9	:key="items.key"
10	<span>￥{{items.price}}</span>	10	>
11	<span>X{{items.number}}</span>	11	<view class="detail">
12	</view>	12	<view class="detail_img">
13	</view>	13	<image v-bind:src="items.img"></image>
14	</view>
15	<view class="refund_price">
16	<span class="refund_price1">退款金额</span>
17	<span class="refund_price2">￥{{items.refundprice}}</span>
18	</view>
19	<view class="refund_reason">
20	<view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
21	</view>
22	<view class="refund_reason">
23	<view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
24	</view>
25	<view class="refund_reason">
26	<view>换货<image src="/static/img/detail/xiala.png"></image></view>
27	</view>
28	</view>	14	</view>
		15	<view class="detail2">
		16	<view class="detail_name">{{items.name}}</view>
		17	<view class="detail_standard">规格：{{items.standard}}</view>
		18	<view class="detail_price">
		19	<span>￥{{items.price}}</span>
		20	<span>X{{items.number}}</span>
		21	</view>
		22	</view>
		23	</view>
		24	<view class="refund_price">
		25	<span class="refund_price1">退款金额</span>
		26	<span class="refund_price2">￥{{items.refundprice}}</span>
		27	</view>
		28	<view class="refund_reason">
		29	<view>仅退款<image src="/static/img/detail/xiala.png"></image>
		30	</view>
		31	</view>
		32	<view class="refund_reason">
		33	<view>退款退货<image src="/static/img/detail/xiala.png"></image>
		34	</view>
		35	</view>
		36	<view class="refund_reason">
		37	<view>换货<image src="/static/img/detail/xiala.png"></image>
		38	</view>
		39	</view>
29	</view>	40	</view>
		41	</view>
30	</template>	42	</template>
31		43
32	<script>	44	<script>
33	export default {	45	export default {
34	//获取浏览器高度	46	//获取浏览器高度
35	beforeMount(height){	47	beforeMount(height) {
36	var h = document.documentElement.clientHeight \|\| document.body.clientHeight;	48	var h = document.documentElement.clientHeight \|\| document.body.clientHeight;
37	this.curheight = h-44;	49	this.curheight = h - 44;
38		50	},
39	},	51	data() {
40	data(){	52	return {
41	return{	53	curheight: 0, //浏览器高度
42	curheight:0, //浏览器高度	54	refund: [
43	refund:[	55	{
44	{	56	key: 0,
45	key:0,	57	img: "/static/img/detail/d1.png",
46	img:'/static/img/detail/d1.png',	58	name: "商品名称",
47	name:'商品名称',	59	standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
48	standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',	60	price: 180,
49	price: 180,	61	number: 1,
50	number: 1,	62	refundprice: 110,
51	refundprice: 110,	63	refund_img: "/static/img/detail/refund_img.png"
52	refund_img:'/static/img/detail/refund_img.png',	64	}
53	}	65	]
54	],	66	};
55	}	67	}
56	}	68	};
57	}
58	</script>	69	</script>
59		70
60	<style lang="scss">	71	<style lang="scss">
61		72	.container {
62	.container{	73	background: #f2f2f2;
63	background: #F2F2F2;	74	padding-top: 10px;
64	padding-top: 10px;	75	box-sizing: border-box;
65	box-sizing: border-box;
66	}	76	}
67	.refund{	77	.refund {
68	width: 90%;	78	width: 90%;
69	height: 300px;	79	height: 300px;
70	margin: 0 auto;	80	margin: 0 auto;
71	background: #FFFFFF;	81	background: #ffffff;
72	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);	82	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
73	border-radius: 8px;	83	border-radius: 8px;
74	padding: 14px;	84	padding: 14px;
75	box-sizing: border-box;	85	box-sizing: border-box;
76	}	86	}
77	.detail{	87	.detail {
78	display: flex;	88	display: flex;
79	justify-content: space-between;	89	justify-content: space-between;
80	font-family: PingFangSC-Regular;	90	font-family: PingFangSC-Regular;
81	margin-bottom: 20px;	91	margin-bottom: 20px;
82	.detail2{	92	.detail2 {
83	width: 64%;	93	width: 64%;
84	view{	94	view {
85	margin-bottom: 8px;	95	margin-bottom: 8px;
86	}
87	.detail_name{
88	font-size: 14px;
89	color:#333333;
90	}
91	.detail_standard{
92	font-size: 12px;
93	color: #999999;
94	}
95	.detail_price{
96	font-size: 14px;
97	color: #999999;
98	display: flex;
99	justify-content: space-between;
100	}
101	}	96	}
102	.detail_img{	97	.detail_name {
103	width: 188rpx;	98	font-size: 14px;
104	height: 188rpx;	99	color: #333333;
105	border-radius: 40px;
106	image{
107	width: 100%;
108	height: 100%;
109	}
110	}	100	}
111	}	101	.detail_standard {
112		102	font-size: 12px;
113	.refund_price{	103	color: #999999;
114	font-family: PingFangSC-Semibold;	104	}
115	font-size: 14px;	105	.detail_price {
116	color: #333333;	106	font-size: 14px;
117	letter-spacing: -0.26px;	107	color: #999999;
118	line-height: 18px;	108	display: flex;
119	margin-bottom: 26px;	109	justify-content: space-between;
120	.refund_price1{
121	font-weight: bold;
122	margin-right: 16px;
123	}	110	}
124	.refund_price2{	111	}
125	color: #FF6B4A;	112	.detail_img {
		113	width: 188rpx;
		114	height: 188rpx;
		115	border-radius: 40px;
		116	image {
		117	width: 100%;
		118	height: 100%;
126	}	119	}
		120	}
127	}	121	}

src/pages/refundment/refundment.vue

Diff comments View file @55420a8

1	<template>	1	<template>
2	<view class="container" v-bind:style="{height: curheight+'px'}">	2	<view
3	<view class="refund" v-for="(items) in refund" :key="items.key">	3	class="container"
4	<view class="detail">	4	v-bind:style="{height: curheight+'px'}"
5	<view class="detail_img"><image v-bind:src="items.img"></image></view>	5	>
6	<view class="detail2">	6	<view
7	<view class="detail_name">{{items.name}}</view>	7	class="refund"
8	<view class="detail_standard">规格：{{items.standard}}</view>	8	v-for="(items) in refund"
9	<view class="detail_price">	9	:key="items.key"
10	<span>￥{{items.price}}</span>	10	>
11	<span>X{{items.number}}</span>	11	<view class="detail">
12	</view>	12	<view class="detail_img">
13	</view>	13	<image v-bind:src="items.img"></image>
14	</view>
15	<view class="refund_price">
16	<span class="refund_price1">退款金额</span>
17	<span class="refund_price2">￥{{items.refundprice}}</span>
18	</view>
19	<view class="refund_reason">
20	<span >退款原因</span>
21	<!-- 跳转退款原因详细页 -->
22	<view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image></view>
23	</view>
24	<view class="refund_explain">
25	<span>退款说明</span>
26	<input placeholder="选填" value="">
27	</view>
28	<view class="refund_img">
29	<span class="refund_img1">上传图片</span>
30	<span class="refund_img2">（最多3张）</span>
31	<view><image v-bind:src="items.refund_img"></image></view>
32	</view>
33	</view>	14	</view>
34	<view class="button">	15	<view class="detail2">
35	<span>提交</span>	16	<view class="detail_name">{{items.name}}</view>
		17	<view class="detail_standard">规格：{{items.standard}}</view>
		18	<view class="detail_price">
		19	<span>￥{{items.price}}</span>
		20	<span>X{{items.number}}</span>
		21	</view>
36	</view>	22	</view>
		23	</view>
		24	<view class="refund_price">
		25	<span class="refund_price1">退款金额</span>
		26	<span class="refund_price2">￥{{items.refundprice}}</span>
		27	</view>
		28	<view class="refund_reason">
		29	<span>退款原因</span>
		30	<!-- 跳转退款原因详细页 -->
		31	<view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image>
		32	</view>
		33	</view>
		34	<view class="refund_explain">
		35	<span>退款说明</span>
		36	<input
		37	placeholder="选填"
		38	value=""
		39	>
		40	</view>
		41	<view class="refund_img">
		42	<span class="refund_img1">上传图片</span>
		43	<span class="refund_img2">（最多3张）</span>
		44	<view>
		45	<image v-bind:src="items.refund_img"></image>
		46	</view>
		47	</view>
		48	</view>
		49	<view class="button">
		50	<span>提交</span>
37	</view>	51	</view>
		52	</view>
38	</template>	53	</template>
39		54
40	<script>	55	<script>
41
42	export default {	56	export default {
43	//获取浏览器高度	57	//获取浏览器高度
44	beforeMount(height){	58	beforeMount(height) {
45	var h = document.documentElement.clientHeight \|\| document.body.clientHeight;	59	var h = document.documentElement.clientHeight \|\| document.body.clientHeight;
46	this.curheight = h-44;	60	this.curheight = h - 44;
47		61	},
48	},	62	methods: {
49	methods:{	63	Jump() {
50	Jump(){	64	this.$router.push({ path: "refundWays" });
51	this.$router.push({path: "Refundways"})
52	},
53	},
54	data(){
55	return{
56	curheight:0, //浏览器高度
57	refund:[
58	{
59	key:0,
60	img:'/static/img/detail/d1.png',
61	name:'商品名称',
62	standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
63	price: 180,
64	number: 1,
65	refundprice: 110,
66	refund_img:'/static/img/detail/refund_img.png',
67	}
68	],
69	}
70	}	65	}
71	}	66	},
		67	data() {
		68	return {
		69	curheight: 0, //浏览器高度
		70	refund: [
		71	{
		72	key: 0,
		73	img: "/static/img/detail/d1.png",
		74	name: "商品名称",
		75	standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
		76	price: 180,
		77	number: 1,
		78	refundprice: 110,
		79	refund_img: "/static/img/detail/refund_img.png"
		80	}
		81	]
		82	};
		83	}
		84	};
72	</script>	85	</script>
73		86
74	<style lang="scss">	87	<style lang="scss">
75		88	.container {
76	.container{	89	background: #f2f2f2;
77	background: #F2F2F2;	90	padding-top: 10px;
78	padding-top: 10px;	91	box-sizing: border-box;
79	box-sizing: border-box;
80	}	92	}
81	.refund{	93	.refund {
82	width: 90%;	94	width: 90%;
83	height: 353px;	95	height: 353px;
84	margin: 0 auto;	96	margin: 0 auto;
85	background: #FFFFFF;	97	background: #ffffff;
86	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);	98	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
87	border-radius: 8px;	99	border-radius: 8px;
88	padding: 14px;	100	padding: 14px;
89	box-sizing: border-box;	101	box-sizing: border-box;
90	}	102	}
91	.detail{	103	.detail {
92	display: flex;	104	display: flex;
93	justify-content: space-between;	105	justify-content: space-between;
94	font-family: PingFangSC-Regular;	106	font-family: PingFangSC-Regular;
95	margin-bottom: 20px;	107	margin-bottom: 20px;
96	.detail2{	108	.detail2 {
97	width: 64%;	109	width: 64%;
98	view{	110	view {
99	margin-bottom: 8px;	111	margin-bottom: 8px;
100	}
101	.detail_name{
102	font-size: 14px;
103	color:#333333;
104	}
105	.detail_standard{
106	font-size: 12px;
107	color: #999999;
108	}
109	.detail_price{
110	font-size: 14px;
111	color: #999999;
112	display: flex;
113	justify-content: space-between;
114	}
115	}	112	}
116	.detail_img{	113	.detail_name {
117	width: 188rpx;	114	font-size: 14px;
118	height: 188rpx;	115	color: #333333;
119	border-radius: 40px;
120	image{
121	width: 100%;
122	height: 100%;
123	}
124	}	116	}
125	}	117	.detail_standard {
126	.refund_explain,.refund_img,.refund_price,.refund_reason{	118	font-size: 12px;
127	margin-top: 16px;	119	color: #999999;
128	margin-bottom: 16px;	120	}
129	}	121	.detail_price {
130	.refund_price{	122	font-size: 14px;
131	font-family: PingFangSC-Semibold;	123	color: #999999;
132	font-size: 14px;	124	display: flex;
133	color: #333333;	125	justify-content: space-between;
134	letter-spacing: -0.26px;
135	line-height: 18px;
136	.refund_price1{
137	font-weight: bold;
138	margin-right: 16px;
139	}	126	}
140	.refund_price2{	127	}
141	color: #FF6B4A;	128	.detail_img {
		129	width: 188rpx;
		130	height: 188rpx;
		131	border-radius: 40px;
		132	image {
		133	width: 100%;
		134	height: 100%;
142	}	135	}
		136	}
143	}	137	}
144	.refund_reason,.refund_explain span,.refund_img1{	138	.refund_explain,
145	font-family: PingFangSC-Regular;	139	.refund_img,
146	font-size: 12px;	140	.refund_price,
147	color: #333333;	141	.refund_reason {
148	letter-spacing: -0.23px;	142	margin-top: 16px;
149	line-height: 18px;	143	margin-bottom: 16px;
150	}	144	}
151	.refund_explain{	145	.refund_price {
152	display: flex;	146	font-family: PingFangSC-Semibold;
153	justify-content: space-between;	147	font-size: 14px;
154	align-items: center;	148	color: #333333;
		149	letter-spacing: -0.26px;
		150	line-height: 18px;
		151	.refund_price1 {
		152	font-weight: bold;
		153	margin-right: 16px;
		154	}
		155	.refund_price2 {
		156	color: #ff6b4a;
		157	}
155	}	158	}
156	.refund_explain input,.refund_img2{	159	.refund_reason,
157	width: 78%;	160	.refund_explain span,
158	font-family: PingFangSC-Regular;	161	.refund_img1 {
159	font-size: 12px;	162	font-family: PingFangSC-Regular;
160	color: #B8B8B8;	163	font-size: 12px;
161	letter-spacing: -0.23px;	164	color: #333333;
		165	letter-spacing: -0.23px;
		166	line-height: 18px;
162	}	167	}
163	.refund_reason{	168	.refund_explain {
164	span{	169	display: flex;
165	margin-right: 20px;	170	justify-content: space-between;
166	}	171	align-items: center;