吉鹏 / gulu-vue

Browse Code »

Commit 1a4cad719648876059924d3cdaff6a25c9efe96f

Authored by BigBoss 2020-06-10 23:15:37 +0800

1 parent 0df2ead740

Exists in master

修改待付款支付跳转逻辑&新增已完成订单详情

Showing 4 changed files with 82 additions and 32 deletions Show diff stats

src/pages/cart/cart.vue

Diff comments View file @1a4cad7

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

src/pages/confirmOrder/confirmOrder.vue

Diff comments View file @1a4cad7

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

src/pages/myOrder/components/OrderCard.vue

Diff comments View file @1a4cad7

 <template>
   <view>
     <view
       class="card"
       v-if="current == status"
       @click="toOrderInfo(status,order.pay_id)"
     >
       <view class="cardHeader">
         <text
           class="orderId"
           v-if="status == '0'||status == '1'"
         >订单号：{{order.pay_id}}</text>
         <text
           class="orderId"
           v-if="status == '2'||status == '3'"
         >下单时间：{{order.pay_time}}</text>
         <text
           class="orderType"
           v-if="status=='0'"
         >待付款</text>
         <text
           class="orderType"
           v-if="status=='1'"
         >待收货</text>
         <text
           class="orderType"
           v-if="status == '2'||status == '3'"
         >已完成</text>
         <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
       </view>
       <view
         class="orderCardInfo"
         v-for="(orderInfo, index) in orderInfoList"
         :key="index"
       >
         <image
           :src="orderInfo.imgUrl"
           mode="aspectFill"
         ></image>
         <view class="infoText">
           <view class="orderName">{{orderInfo.p_name}}</view>
           <view class="orderDescrib">{{orderInfo.p_name}}</view>
           <view class="infoText-bottom">
             <view class="markPrice">{{orderInfo.nowPrice}}</view>
             <view class="buy-num">X {{orderInfo.num}}</view>
           </view>
         </view>
       </view>
       <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
       <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
       <view
         class="btns"
         v-if="status == '0'"
       >
-        <view class="btn-type1">取消订单</view>
+        <view class="btn-type1" @click="cancleOrder">取消订单</view>
-        <view class="btn-type2">去支付</view>
+        <view class="btn-type2" @click="paylog">去支付</view>
       </view>
       <view
         class="btns"
         v-if="status == '1'"
       >
         <view class="btn-type2">确认收货</view>
       </view>
       <view
         class="btns"
         v-if="status == '2'"
       >
         <view class="btn-type2" @click="toDetail">再次购买</view>
       </view>
       <!-- 	<view class="btns" v-if="status == '3'">
 				<view class="btn-type2">再次购买</view>
 			</view> -->
 		</view>
 		<view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
 			<view class="cardHeader">
 				<text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.pay_id}}</text>
 				<text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
 				<text class="orderType" v-if="status=='0'">待付款</text>
 				<text class="orderType" v-if="status=='1'">待收货</text>
 				<text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
 				<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
 			</view>
 			<view class="orderCardInfo"  v-for="(orderInfo) in orderInfoList" :key="orderInfo">
 				<image :src="orderInfo.imgUrl" mode="aspectFill"></image>
 				<view class="infoText">
 					<view class="orderName">{{orderInfo.p_name}}</view>
 					<view class="orderDescrib">{{orderInfo.p_name}}</view>
 					<view class="infoText-bottom">
 						<view class="markPrice">{{orderInfo.nowPrice}}</view>
 						<view class="buy-num">X {{orderInfo.num}}</view>
 					</view>
 				</view>
 			</view>
 			<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
 			<view class="btns" v-if="status == '0'">
 				<view class="btn-type1" >取消订单</view>
 				<view class="btn-type2">去支付</view>
 			</view>
 			<view class="btns" v-if="status == '1'">
 				<view class="btn-type2">确认收货</view>
 			</view>
 			<view class="btns" v-if="status == '2'||status == '3'">
 				<view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>
 			</view>
 			<!-- <view class="btns" v-if="status == '3'">
 				<view class="btn-type2">再次购买</view>
 			</view> -->
     </view>
   </view>
 </template>
 <script>
 	export default {
 		props: {
 			/**
 			 * 订单数据
 			 */
 			order: {},
 			/**
 			 * 当前选择
 			 */
 			current:Number
 		},
 		created() {
 			console.log('order',this.order);
 			// console.log(this.order.status );
 			// console.log(this.current);
 		},
 		computed:{
 			status(){
 				return this.order.status
 			},
 			orderInfoList(){
 				return this.order.order_info
 			}
 		},
 		data() {
 			return {
 			};
 		},
 		methods:{
+			cancleOrder() {
+				// const openid = uni.getStorageSync('openid')
+			 //  const uid = this.order.uid;
+			 //  const openid = openid;
+			 //  const keyname = this.orderInfo.order_info.keyname
+			 //  // console.log('keyname',this.orderInfo.keyname)
+			 //  uni.showModal({
+			 //    title: "提示",
+			 //    content: "现在取消，订单不可恢复哦，确认取消吗？",
+			 //    success: function(res) {
+			 //      if (res.confirm) {
+			 //        store.dispatch("cancelOrder/cancel", {
+			 //          keyname: keyname,
+			 //          uid: uid,
+			 //          openid: openid
+			 //        });
+			 //      } else if (res.cancel) {
+			 //        console.log("用户点击取消");
+			 //      }
+			 //    }
+			 //  });
+			},
 			toDetail(pid){
 				console.log('pid',pid)
 				uni.navigateTo({
 					url: '../details/details?pid='+pid,
 					fail: (res) => {console.log(res)},
 				});
 			},
 			toRefundment(){
 				uni.navigateTo({
 					url: '../refundment/refundment',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
 			},
 			toOrderInfo(status,payId){
 				console.log(status,payId)
 				switch(status){
 					// 0待付款  1待收货  2已收货 3 已评价
 					case '0':
 						uni.navigateTo({
 							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
 							fail(errMsg) {
 								console.log(errMsg)
 							}
 						})
 					break;
 					case '1':
 						uni.navigateTo({
 							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
 							fail(errMsg) {
 								console.log(errMsg)
 							}
 						})
 					break;
-					case '2 || 3':
+					case '2' || '3':
 						uni.navigateTo({
 							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
 							fail(errMsg) {
 								console.log(errMsg)
 							}
 						})
 					break;
 					default:
 					break;
 				}
 			}
 		}
 	}
 </script>
 <style lang="scss">
 .card {
   width: 670rpx;
   height: 478rpx;
   background: #ffffff;
   box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
   border-radius: 8px;
   border-radius: 8px;
   margin-top: 20rpx;
   padding: 40rpx;
   box-sizing: border-box;
   .cardHeader {
     width: 100%;
     height: 40rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .orderId {
       font-size: 12px;
       color: #999999;
     }
     .orderType {
       font-size: 14px;
       color: #ff6b4a;
     }
   }
   .orderCardInfo {
     width: 100%;
     height: 188rpx;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     margin-top: 40rpx;
     image {
       height: 188rpx;
       width: 188rpx;
       margin-right: 24rpx;
     }
     .infoText {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: flex-start;
       height: 188rpx;
       width: 368rpx;
     }
     .orderName {
       font-size: 14px;
       color: #333333;
       display: -webkit-box;
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
     .orderDescrib {
       font-size: 12px;
       color: #999999;
       display: -webkit-box;
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
     .infoText-bottom {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
       width: 100%;
       .markPrice {
         font-size: 14px;
         color: #ff6b4a;
         margin-right: 20rpx;
       }
       .buy-num {
         font-size: 12px;
         color: #999999;
       }
     }
   }
   .payPrice {
     text-align: right;
     margin: 20rpx 0;
     font-size: 14px;
     color: #333333;
     .priceNum {
       font-size: 14px;
       color: #ff6b4a;
     }
   }
   .btns {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     .btn-type1 {
       height: 48rpx;
       width: 156rpx;
       border: 1px solid #ff6b4a;
       border-radius: 12px;
       border-radius: 12px;
       text-align: center;
       line-height: 48rpx;
       font-size: 12px;
       color: #ff6b4a;
     }
     .btn-type2 {
       height: 48rpx;
       width: 140rpx;
       background: #ff6b4a;
       border-radius: 12px;
       border-radius: 12px;
       text-align: center;
       line-height: 48rpx;
       font-size: 12px;
       color: #ffffff;
       margin-left: 20rpx;
     }
   }
 }
 </style>

src/pages/myOrderPaying/myOrderPaying.vue

Diff comments View file @1a4cad7

1	<!-- 订单待付款待收货 -->	1	<!-- 订单待付款待收货 -->
2	<template>	2	<template>
3	<view class="content">	3	<view class="content">
		4	<view
		5	class="headerBanner"
		6	v-if="status == '2'\|\|'3'"
		7	>
		8	<view class="bannerLeft">
		9	<view class="T1">订单已完成</view>
		10	</view>
		11	<image
		12	src="../../static/car.png"
		13	mode="aspectFill"
		14	></image>
		15	</view>
4	<!-- 待付款 -->	16	<!-- 待付款 -->
5	<view	17	<view class="order-time" v-if="status == '0'" >
6	class="order-time"
7	v-if="status == '0'"
8	>
9	<text>请在</text>	18	<text>请在</text>
10	<uni-countdown	19	<uni-countdown
11	color="#EC5D3B"	20	color="#EC5D3B"
12	splitor-color="#EC5D3B"	21	splitor-color="#EC5D3B"
13	:show-day="false"	22	:show-day="false"
14	:hour="0"	23	:hour="0"
15	:second="getTime"	24	:second="getTime"
16	@timeup=timeup	25	@timeup=timeup >
17	></uni-countdown>	26	</uni-countdown>
		27
18	<text>内完成付款</text>	28	<text>内完成付款</text>
19	</view>	29	</view>
20	<!-- 待收货 -->	30
21	<view	31	<view class="headerBanner" v-if="status == '1'">
22	class="headerBanner"
23	v-if="status == '1'"
24	>
25	<view class="bannerLeft">	32	<view class="bannerLeft">
26	<view class="T1">卖家已发货</view>	33	<view class="T1">卖家已发货</view>
27	<view class="T2">还剩确认收货</view>	34	<!-- <view class="T2">还剩确认收货</view> -->
28	</view>	35	</view>
29	<image	36	<image
30	src="../../static/car.png"	37	src="../../static/car.png"
31	mode="aspectFill"	38	mode="aspectFill"
32	></image>	39	></image>
33	</view>	40	</view>
		41
		42
34	<view class="order">	43	<view class="order">
35	<view class="order-user">	44	<view class="order-user">
36	<view class="order-user-head">	45	<view class="order-user-head">
37	<text class="p1">{{orderAddressInfo.userName}}</text>	46	<text class="p1">{{orderAddressInfo.userName}}</text>
38	<text class="p2">{{orderAddressInfo.telNumber}}</text>	47	<text class="p2">{{orderAddressInfo.telNumber}}</text>
39	</view>	48	</view>
40	<view class="order-user-body">	49	<view class="order-user-body">
41	<image src="../../static/myorder-paying-location.png"></image>	50	<image src="../../static/myorder-paying-location.png"></image>
42	<text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>	51	<text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
43	</view>	52	</view>
44	</view>	53	</view>
45	<view class="order-info">	54	<view class="order-info">
46	<view	55	<view
47	class="order-info-head"	56	class="order-info-head"
48	v-for="(orderInfoListItem,index) in orderInfoList"	57	v-for="(orderInfoListItem,index) in orderInfoList"
49	:key="index"	58	:key="index"
50	>	59	>
51	<image	60	<image
52	:src="orderInfoListItem.imgUrl"	61	:src="orderInfoListItem.imgUrl"
53	mode="aspectFill"	62	mode="aspectFill"
54	></image>	63	></image>
55	<view class="order-info-head-r">	64	<view class="order-info-head-r">
56	<text class="p1">{{orderInfoListItem.p_name}}</text>	65	<text class="p1">{{orderInfoListItem.p_name}}</text>
57	<view	66	<view
58	class="p2"	67	class="p2"
59	style="margin: 0;"	68	style="margin: 0;"
60	>	69	>
61	规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻	70	规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
62	<!-- <view class="arrow"></view> -->	71	<!-- <view class="arrow"></view> -->
63	</view>	72	</view>
64	<view class="infoText-bottom">	73	<view class="infoText-bottom">
65	<view class="markPrice">{{orderInfoListItem.nowPrice}}</view>	74	<view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
66	<view class="buy-num">X {{orderInfoListItem.num}}</view>	75	<view class="buy-num">X {{orderInfoListItem.num}}</view>
67	</view>	76	</view>
68	</view>	77	</view>
69	</view>	78	</view>
70	<!-- <view class="order-info-goodsnum">	79	<!-- <view class="order-info-goodsnum">
71	<text>X1</text>	80	<text>X1</text>
72	</view> -->	81	</view> -->
73	<text class="order-info-freight">	82	<text class="order-info-freight">
74	<text class="p1">运费</text>	83	<text class="p1">运费</text>
75	<text class="p2">免运费</text>	84	<text class="p2">免运费</text>
76	</text>	85	</text>
77	<text class="order-info-discount">	86	<text class="order-info-discount">
78	<text class="p1">优惠</text>	87	<text class="p1">优惠</text>
79	<text class="p2">-￥{{totalDiscount}}</text>	88	<text class="p2">-￥{{totalDiscount}}</text>
80	</text>	89	</text>
81	<text class="order-info-price">	90	<text class="order-info-price">
82	<text class="p1">实付</text>	91	<text class="p1">实付</text>
83	<text class="p2">￥{{orderInfo.order_info.total_fee}}</text>	92	<text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
84		93
85	</text>	94	</text>
86	<text class="order-info-num">	95	<text class="order-info-num">
87	<text>订单号：{{payId}}</text>	96	<text>订单号：{{payId}}</text>
88	</text>	97	</text>
89	<text class="order-info-time">	98	<text class="order-info-time">
90	<text>下单时间：{{orderInfo.order_info.pay_time \| timerChange}}</text>	99	<text>下单时间：{{orderInfo.order_info.pay_time \| timerChange}}</text>
91		100
92	</text>	101	</text>
93	<view class="order-info-hr"></view>	102	<view class="order-info-hr"></view>
94	<view class="order-info-contact">	103	<view class="order-info-contact">
95	<image src="../../static/myorder-paying-contact.png"></image>	104	<image src="../../static/myorder-paying-contact.png"></image>
96	<text>联系客服</text>	105	<text>联系客服</text>
97	</view>	106	</view>
98	</view>	107	</view>
99	</view>	108	</view>
100	<view	109	<view
101	class="order-confim"	110	class="order-confim"
102	v-if="status == '0'"	111	v-if="status == '0'"
103	>	112	>
104	<button	113	<button
105	class="b1"	114	class="b1"
106	@click="cancleOrder"	115	@click="cancleOrder"
107	>取消订单</button>	116	>取消订单</button>
108	<button	117	<button
109	class="b2"	118	class="b2"
110	@click="paylog"	119	@click="paylog"
111	>立即支付</button>	120	>立即支付</button>
112	</view>	121	</view>
113		122
114	<view	123	<view
115	class="order-confim"	124	class="order-confim"
116	v-if="status == '1'"	125	v-if="status == '1'"
117	>	126	>
118	<!-- <button class="b1">取消订单</button> -->	127	<!-- <button class="b1">取消订单</button> -->
119	<button	128	<button
120	class="b2"	129	class="b2"
121	@click="confirmOrder"	130	@click="confirmOrder"
122	>确认收货</button>	131	>确认收货</button>
123	</view>	132	</view>
		133	<view
		134	class="order-confim"
		135	v-if="status == '2'"
		136	>
		137	<button
		138	class="b2"
		139	@click="toDetail"
		140	>再次购买</button>
		141	</view>
		142
124	</view>	143	</view>
125	</template>	144	</template>
126		145
127	<script>	146	<script>
128	import store from "@/store";	147	import store from "@/store";
129	import MD5Util from '../../utils/md5'	148	import MD5Util from '../../utils/md5'
130	import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";	149	import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";
131	export default {	150	export default {
132	components: {	151	components: {
133	UniCountdown	152	UniCountdown
134	},	153	},
135	data() {	154	data() {
136	return {	155	return {
137	payId: "",	156	payId: "",
138	payTime: "",	157	payTime: "",
139	status: "", // status 0 待付款 1 已发货	158	status: "", // status 0 待付款 1 已发货
140	uid: "",	159	uid: "",
141	openid: "",	160	openid: "",
142	lefttime: 0,	161	lefttime: 0,
143	isPay: 0,	162	isPay: 0,
144	orderInfo:Object,	163	orderInfo:Object,
145	totalPrice:0,	164	totalPrice:0,
146	};	165	};
147	},	166	},
148	onLoad:async function ({payId,status,isPay}) {	167	onLoad:async function ({payId,status,isPay}) {
149	// console.log('++++++++++++++++++',payId,status,isPay)
150	this.payId = payId	168	this.payId = payId
151	this.status = status	169	this.status = status
152	this.isPay = isPay	170	this.isPay = isPay
		171	console.log('++++++++++++++++++',this.status)
153	const openid = uni.getStorageSync('openid')	172	const openid = uni.getStorageSync('openid')
154	const uid = this.$store.state.user.userInfo.uid	173	const uid = this.$store.state.user.userInfo.uid
155	this.uid = uid	174	this.uid = uid
156	this.openid = openid	175	this.openid = openid
157	await store.dispatch('orderRead/getOrderInfo', {	176	await store.dispatch('orderRead/getOrderInfo', {
158	pay_id: this.payId,	177	pay_id: this.payId,
159	uid: uid,	178	uid: uid,
160	openid: openid	179	openid: openid
161	});	180	});
162	// console.log(this.$store.state.orderRead.orderInfo)	181	// console.log(this.$store.state.orderRead.orderInfo)
163	this.orderInfo = this.$store.state.orderRead.orderInfo	182	this.orderInfo = this.$store.state.orderRead.orderInfo
164	this.totalPrice = this.orderInfo.total_fee	183	this.totalPrice = this.orderInfo.total_fee
165	},	184	},
166	// 若从支付页面跳转过来，返回直接返回到首页	185	// 若从支付页面跳转过来，返回直接返回到首页
167	onBackPress(option) {	186	onBackPress(option) {
168	if (option.from === "backbutton" && this.isPay) {	187	if (option.from === "backbutton" && this.isPay) {
169	uni.switchTab({	188	uni.switchTab({
170	url: "/pages/index/index"	189	url: "/pages/index/index"
171	});	190	});
172	return true; // 阻止默认返回行为	191	return true; // 阻止默认返回行为
173	}	192	}
174	},	193	},
175	computed: {	194	computed: {
176	orderInfoList () {	195	orderInfoList () {
177	return this.orderInfo.order_info.list	196	return this.orderInfo.order_info.list
178	},	197	},
179	// 获取订单地址信息	198	// 获取订单地址信息
180	orderAddressInfo () {	199	orderAddressInfo () {
181	return this.orderInfo.order_info.address	200	return this.orderInfo.order_info.address
182	},	201	},
183	// 订单付款时间	202	// 订单付款时间
184	getTime () {	203	getTime () {
185	return this.orderInfo.order_info.lefttime	204	return this.orderInfo.order_info.lefttime
186		205
187	},	206	},
188	// 计算总优惠额	207	// 计算总优惠额
189	totalDiscount() {	208	totalDiscount() {
190	const discountInfoList = this.orderInfo.discount_info;	209	const discountInfoList = this.orderInfo.discount_info;
191	let totalDiscount = 0;	210	let totalDiscount = 0;
192	if (discountInfoList) {	211	if (discountInfoList) {
193	discountInfoList.map((discountItem, index) => {	212	discountInfoList.map((discountItem, index) => {
194	totalDiscount += Number(discountItem.value);	213	totalDiscount += Number(discountItem.value);
195	});	214	});
196	}	215	}
197	// console.log(totalDiscount)	216	// console.log(totalDiscount)
198	return totalDiscount;	217	return totalDiscount;
199	}	218	}
200	},	219	},
201	methods: {	220
		221	methods: {
		222	//再次购买暂时只支持跳转第一个商品
		223	toDetail(){
		224	const pid = this.orderInfo.order_info.list[0].pid
		225	uni.navigateTo({
		226	url: '../details/details?pid='+pid,
		227	fail: (res) => {console.log(res)},
		228	});
		229	},
202	// 取消订单	230	// 取消订单
203	timeup() {	231	timeup() {
204	this.cancleOrder();	232	this.cancleOrder();
205	},	233	},
206	cancleOrder() {	234	cancleOrder() {
207	const uid = this.uid;	235	const uid = this.uid;
208	const openid = this.openid;	236	const openid = this.openid;
209	const keyname = this.orderInfo.order_info.keyname	237	const keyname = this.orderInfo.order_info.keyname
210	// console.log('keyname',this.orderInfo.keyname)	238	// console.log('keyname',this.orderInfo.keyname)
211	uni.showModal({	239	uni.showModal({
212	title: "提示",	240	title: "提示",
213	content: "现在取消，订单不可恢复哦，确认取消吗？",	241	content: "现在取消，订单不可恢复哦，确认取消吗？",
214	success: function(res) {	242	success: function(res) {
215	if (res.confirm) {	243	if (res.confirm) {
216	store.dispatch("cancelOrder/cancel", {	244	store.dispatch("cancelOrder/cancel", {
217	keyname: keyname,	245	keyname: keyname,
218	uid: uid,	246	uid: uid,
219	openid: openid	247	openid: openid
220	});	248	});
221	uni.navigateBack({	249	uni.navigateBack({
222	delta:1	250	delta:1
223	})	251	})
224	} else if (res.cancel) {	252	} else if (res.cancel) {
225	console.log("用户点击取消");	253	console.log("用户点击取消");
226	}	254	}
227	}	255	}
228	});	256	});
229	},	257	},
230	paylog() {	258	paylog() {
231	console.log('pay',this.orderInfo)	259	console.log('pay',this.orderInfo)
232	const { data, exKeyName: keyName } = this.orderInfo	260	const { data, exKeyName: keyName } = this.orderInfo
233	const uid = uni.getStorageSync('uid')	261	const uid = uni.getStorageSync('uid')
234	const timeStamp = new Date().getTime().toString()	262	const timeStamp = new Date().getTime().toString()
235	const nonceStr = 'asfafasfasfasfasf'	263	const nonceStr = 'asfafasfasfasfasf'
236	// 支付参数	264	// 支付参数
237	const fieldSet = {	265	const fieldSet = {
238	openid: this.$store.state.user.userInfo.openid,	266	openid: this.$store.state.user.userInfo.openid,
239	uid: this.$store.state.user.userInfo.uid,	267	uid: this.$store.state.user.userInfo.uid,
240	shopid: 0,	268	shopid: 0,
241	payCate: 2020,	269	payCate: 2020,
242	payMoney: this.totalPrice,	270	payMoney: this.totalPrice,
243	payWoodId: `fcdj-${uid}-${keyName}`,	271	payWoodId: `fcdj-${uid}-${keyName}`,
244	payWoodDesc: '在【非常戴镜】的微信付款凭证',	272	payWoodDesc: '在【非常戴镜】的微信付款凭证',
245	nonceStr,	273	nonceStr,
246	signType: 'MD5',	274	signType: 'MD5',
247	app_uid: 2020,	275	app_uid: 2020,
248	timeStamp,	276	timeStamp,
249	keyname: keyName,	277	keyname: keyName,
250	billInfo: JSON.stringify(data),	278	billInfo: JSON.stringify(data),
251	}	279	}
252	// 请求后台支付接口	280	// 请求后台支付接口
253	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {	281	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
254	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {	282	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
255	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`	283	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
256	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'	284	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
257		285
258	// 微信支付接口	286	// 微信支付接口
259	uni.requestPayment({	287	uni.requestPayment({
260	appId: data.appid,	288	appId: data.appid,
261	timeStamp,	289	timeStamp,
262	nonceStr,	290	nonceStr,
263	total_fee: this.totalPrice,	291	total_fee: this.totalPrice,
264	package: `prepay_id=${data.prepay_id}`,	292	package: `prepay_id=${data.prepay_id}`,
265	signType: 'MD5',	293	signType: 'MD5',
266	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),	294	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
267	success: (res) => {	295	success: (res) => {
268	// 支付成功	296	// 支付成功
269	uni.showModal({	297	uni.showModal({
270	content: '支付成功',	298	content: '支付成功',
271	showCancel: false,	299	showCancel: false,
272	})	300	})
273	// 跳转订单详情页->状态待收货	301	// 跳转订单详情页->状态待收货
274	uni.reLaunch({	302	uni.reLaunch({
275	url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=2&isPay=1`,	303	url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
276	})	304	})
277	},	305	},
278	fail: (res) => {	306	fail: (res) => {
279	// 支付失败	307	// 支付失败
280	uni.showModal({	308	uni.showModal({
281	content: '支付失败',	309	content: '支付失败',
282	showCancel: false,	310	showCancel: false,
283	})	311	})
284	// 跳转订单详情页->刷新本页面	312	// 跳转订单详情页->刷新本页面
285	uni.redirectTo({	313	// uni.redirectTo({
286	url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,	314	// url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
287	})	315	// })
288	},	316	},
289	complete: () => {	317	complete: () => {
290	uni.hideLoading()	318	uni.hideLoading()
291	},	319	},
292	})	320	})
293	} else {	321	} else {
294	uni.showModal({	322	uni.showModal({
295	content: '支付失败',	323	content: '支付失败',
296	showCancel: false,	324	showCancel: false,
297	})	325	})
298	console.log('支付失败')	326	console.log('支付失败')
299	uni.hideLoading()	327	uni.hideLoading()
300	uni.redirectTo({	328	// uni.redirectTo({
301	url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,	329	// url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
302	})	330	// })
303	}	331	}
304	})	332	})
305		333
306	//修改订单状态待付款==>待收货	334	//修改订单状态待付款==>待收货
307	store.dispatch("statusConfirm/confirm", {	335	store.dispatch("statusConfirm/confirm", {
308	uid: this.uid,	336	uid: this.uid,
309	openid: this.openid,	337	openid: this.openid,
310	oldway: "0",	338	oldway: "0",
311	way: "1",	339	way: "1",
312	pay_id: this.payId,	340	pay_id: this.payId,
313	judgeContent: "",	341	judgeContent: "",
314	orderInfo: this.orderInfo.order_info	342	orderInfo: this.orderInfo.order_info
315	})	343	})
316	.then(	344	.then(
317	// setTimeout(() => {	345	// setTimeout(() => {
318	// uni.navigateBack();	346	// uni.navigateBack();
319	// }, 1500)	347	// }, 1500)
320	);	348	);
321	},	349	},
322	confirmOrder() {	350	confirmOrder() {
323	//确认收货 way1 ==>way2	351	//确认收货 way1 ==>way2
324	store	352	store
325	.dispatch("statusConfirm/confirm", {	353	.dispatch("statusConfirm/confirm", {
326	uid: this.uid,	354	uid: this.uid,
327	openid: this.openid,	355	openid: this.openid,
328	oldway: "1",	356	oldway: "1",
329	way: "2",	357	way: "2",
330	pay_id: this.payId,	358	pay_id: this.payId,
331	judgeContent: "",	359	judgeContent: "",
332	orderInfo: this.orderInfo.order_info	360	orderInfo: this.orderInfo.order_info
333	})	361	})
334	.then((res)=>{	362	.then((res)=>{
335	if(res.data.code === 1){	363	if(res.data.code === 1){
336	uni.showToast({	364	uni.showToast({
337	title:'已确认',	365	title:'已确认',
338	mask:true,	366	mask:true,
339	duration:1500,	367	duration:1500,
340	icon:'success'	368	icon:'success'
341	})	369	})
342	}else{	370	}else{
343	uni-uni.showToast({	371	uni-uni.showToast({
344	title: '服务器错误，确认失败!',	372	title: '服务器错误，确认失败!',
345	mask:true	373	mask:true
346	});	374	});
347	}	375	}
348	setTimeout(() => {	376	setTimeout(() => {
349	uni.navigateBack();	377	uni.navigateBack();
350	}, 1500)	378	}, 1500)
351	});	379	});
352	}	380	}
353	},	381	},
354	filters: {	382	filters: {
355	timerChange: function(value) {	383	timerChange: function(value) {
356	var newDate = new Date();	384	var newDate = new Date();
357	newDate.setTime(value * 1000);	385	newDate.setTime(value * 1000);
358	return newDate.toLocaleString();	386	return newDate.toLocaleString();
359	}	387	}
360	}	388	}
361	};	389	};
362	</script>	390	</script>
363		391
364	<style lang="scss" scoped>	392	<style lang="scss" scoped>
365	.content {	393	.content {
366	min-height: 100vh;	394	min-height: 100vh;
367	display: flex;	395	display: flex;
368	flex-direction: column;	396	flex-direction: column;
369	justify-content: flex-start;	397	justify-content: flex-start;
370	align-items: center;	398	align-items: center;
371	background-color: #f2f2f2;	399	background-color: #f2f2f2;
372	}	400	}
373		401
374	.order {	402	.order {
375	margin-bottom: 112rpx;	403	margin-bottom: 112rpx;
376	background: #f2f2f2;	404	background: #f2f2f2;
377	margin-top: 140rpx;	405	margin-top: 140rpx;
378	width: 670rpx;	406	width: 670rpx;
379	}	407	}
380		408
381	.order-time {	409	.order-time {
382	width: 100%;	410	width: 100%;
383	height: 140rpx;	411	height: 140rpx;
384	background-color: #fff;	412	background-color: #fff;
385	display: flex;	413	display: flex;
386	justify-content: center;	414	justify-content: center;
387	align-items: center;	415	align-items: center;
388	position: fixed;	416	position: fixed;
389	top: 0;	417	top: 0;
390	left: 0;	418	left: 0;
391	text {	419	text {
392	// font-family: PingFangSC-Regular;	420	// font-family: PingFangSC-Regular;
393	// margin-top: 48rpx;	421	// margin-top: 48rpx;
394	font-size: 14px;	422	font-size: 14px;
395	color: #333333;	423	color: #333333;
396	letter-spacing: -0.26px;	424	letter-spacing: -0.26px;
397	}	425	}
398	.p2 {	426	.p2 {
399	// font-family: DINAlternate-Bold;	427	// font-family: DINAlternate-Bold;
400	margin: 42rpx 20rpx 0 20rpx;	428	margin: 42rpx 20rpx 0 20rpx;
401	font-size: 18px;	429	font-size: 18px;
402	color: #ec5d3b;	430	color: #ec5d3b;
403	letter-spacing: -0.34px;	431	letter-spacing: -0.34px;
404	}	432	}
405	}	433	}
406	.headerBanner {	434	.headerBanner {
407	width: 100%;	435	width: 100%;
408	height: 140rpx;	436	height: 140rpx;
409	background: #4a90e2;	437	background: #4a90e2;
410	padding: 26rpx 60rpx 24rpx 60rpx;	438	padding: 26rpx 60rpx 24rpx 60rpx;
411	box-sizing: border-box;	439	box-sizing: border-box;
412	color: #ffffff;	440	color: #ffffff;
413	display: flex;	441	display: flex;
414	justify-content: space-between;	442	justify-content: space-between;
415	align-items: center;	443	align-items: center;
416	position: fixed;	444	position: fixed;
417	top: 0;	445	top: 0;
418	left: 0;	446	left: 0;
419	.bannerLeft {	447	.bannerLeft {
420	font-size: 36rpx;	448	font-size: 36rpx;
421	display: flex;	449	display: flex;
422	flex-direction: column;	450	flex-direction: column;
423	justify-content: center;	451	justify-content: center;
424	align-items: center;	452	align-items: center;
425	.T2 {	453	.T2 {
426	font-size: 24rpx;	454	font-size: 24rpx;
427	}	455	}
428	}	456	}
429	image {	457	image {
430	height: 56rpx;	458	height: 56rpx;
431	width: 72rpx;	459	width: 72rpx;
432	}	460	}
433	}	461	}
434		462
435	.order-user {	463	.order-user {
436	height: 228rpx;	464	height: 228rpx;
437	background: #ffffff;	465	background: #ffffff;
438	border-radius: 14rpx;	466	border-radius: 14rpx;
439	margin: 0 auto;	467	margin: 0 auto;
440	margin-top: 20rpx;	468	margin-top: 20rpx;
441	margin-bottom: 20rpx;	469	margin-bottom: 20rpx;
442	.order-user-head {	470	.order-user-head {
443	display: flex;	471	display: flex;
444	height: 108rpx;	472	height: 108rpx;
445	align-items: center;	473	align-items: center;
446	margin-left: 126rpx;	474	margin-left: 126rpx;
447	.p1 {	475	.p1 {
448	// font-family: PingFangSC-Regular;	476	// font-family: PingFangSC-Regular;
449	font-size: 14px;	477	font-size: 14px;
450	color: #333333;	478	color: #333333;
451	letter-spacing: -0.26px;	479	letter-spacing: -0.26px;
452	margin-right: 20rpx;	480	margin-right: 20rpx;
453	}	481	}
454	.p2 {	482	.p2 {
455	// font-family: PingFangSC-Regular;	483	// font-family: PingFangSC-Regular;
456	font-size: 14px;	484	font-size: 14px;
457	color: #999999;	485	color: #999999;
458	letter-spacing: -0.26px;	486	letter-spacing: -0.26px;
459	}	487	}
460	}	488	}
461	.order-user-body {	489	.order-user-body {
462	display: flex;	490	display: flex;
463	width: 100%;	491	width: 100%;
464	image {	492	image {
465	width: 24px;	493	width: 24px;
466	height: 26px;	494	height: 26px;
467	margin: 12rpx 32rpx 0 40rpx;	495	margin: 12rpx 32rpx 0 40rpx;
468	}	496	}
469	.p3 {	497	.p3 {
470	// font-family: PingFangSC-Semibold;	498	// font-family: PingFangSC-Semibold;
471	font-size: 14px;	499	font-size: 14px;
472	color: #333333;	500	color: #333333;
473	letter-spacing: -0.26px;	501	letter-spacing: -0.26px;
474	}	502	}
475	}	503	}
476	}	504	}
477		505
478	.order-info {	506	.order-info {
479	background-color: #fff;	507	background-color: #fff;
480	box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);	508	box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
481	border-radius: 16rpx;	509	border-radius: 16rpx;
482	margin: 0 auto;	510	margin: 0 auto;
483	view {	511	view {
484	margin-left: 40rpx;	512	margin-left: 40rpx;
485	}	513	}
486	text {	514	text {
487	font-size: 14px;	515	font-size: 14px;
488	}	516	}
489	.order-info-head {	517	.order-info-head {
490	display: flex;	518	display: flex;
491	padding-top: 40rpx;	519	padding-top: 40rpx;
492	image {	520	image {
493	height: 188rpx;	521	height: 188rpx;
494	width: 188rpx;	522	width: 188rpx;
495	}	523	}
496	.order-info-head-r {	524	.order-info-head-r {
497	margin: 0;	525	margin: 0;
498	width: 368rpx;	526	width: 368rpx;
499	margin-left: 24rpx;	527	margin-left: 24rpx;
500	// margin-top: 40rpx;	528	// margin-top: 40rpx;
501	text {	529	text {
502	display: block;	530	display: block;
503	}	531	}
504	// .arrow{	532	// .arrow{
505	// width: 0;	533	// width: 0;
506	// height: 0;	534	// height: 0;
507	// border-left: 5px transparent;	535	// border-left: 5px transparent;
508	// border-right: 5px transparent;	536	// border-right: 5px transparent;
509	// border-top: 5px #979797;	537	// border-top: 5px #979797;
510	// border-bottom: 0 transparent;	538	// border-bottom: 0 transparent;
511	// border-style: solid;	539	// border-style: solid;
512	// position: relative;	540	// position: relative;
513	// // transform: scaleY(-1);	541	// // transform: scaleY(-1);
514	// }	542	// }
515	// .arrow::after{	543	// .arrow::after{
516	// content: '';	544	// content: '';
517	// position: absolute;	545	// position: absolute;
518	// top: -6.5px;	546	// top: -6.5px;
519	// left: -5px;	547	// left: -5px;
520	// border-left: 5px transparent;	548	// border-left: 5px transparent;
521	// border-right: 5px transparent;	549	// border-right: 5px transparent;
522	// border-top: 5px #FFFFFF;	550	// border-top: 5px #FFFFFF;
523	// border-bottom: 0 transparent;	551	// border-bottom: 0 transparent;
524	// border-style: solid;	552	// border-style: solid;
525	// }	553	// }
526	.p1 {	554	.p1 {
527	min-height: 40px;	555	min-height: 40px;
528	// font-family: PingFangSC-Regular;	556	// font-family: PingFangSC-Regular;
529	font-size: 14px;	557	font-size: 14px;
530	color: #333333;	558	color: #333333;
531	letter-spacing: -0.26px;	559	letter-spacing: -0.26px;
532	line-height: 18px;	560	line-height: 18px;
533	// line-height: 20px;	561	// line-height: 20px;
534	}	562	}
535	.p2 {	563	.p2 {
536	height: 34px;	564	height: 34px;
537	padding: 1px 0 3px 0;	565	padding: 1px 0 3px 0;
538	// font-family: PingFangSC-Regular;	566	// font-family: PingFangSC-Regular;
539	font-size: 12px;	567	font-size: 12px;
540	color: #999999;	568	color: #999999;
541	letter-spacing: -0.23px;	569	letter-spacing: -0.23px;
542	}	570	}
543	.infoText-bottom {	571	.infoText-bottom {
544	display: flex;	572	display: flex;
545	flex-direction: row;	573	flex-direction: row;
546	justify-content: flex-start;	574	justify-content: flex-start;
547	align-items: center;	575	align-items: center;
548	width: 100%;	576	width: 100%;
549	margin-left: 0;	577	margin-left: 0;
550	.markPrice {	578	.markPrice {
551	font-size: 14px;	579	font-size: 14px;
552	color: #ff6b4a;	580	color: #ff6b4a;
553	margin-right: 20rpx;	581	margin-right: 20rpx;
554	margin-left: 0rpx;	582	margin-left: 0rpx;
555	}	583	}
556	.buy-num {	584	.buy-num {
557	font-size: 12px;	585	font-size: 12px;
558	color: #999999;	586	color: #999999;
559	}	587	}
560	}	588	}
561	}	589	}
562	}	590	}
563	// .order-info-goodsnum {	591	// .order-info-goodsnum {
564	// display: flex;	592	// display: flex;
565	// align-items: center;	593	// align-items: center;
566	// justify-content: flex-end;	594	// justify-content: flex-end;
567	// text {	595	// text {
568	// margin-right: 44rpx;	596	// margin-right: 44rpx;
569	// // ont-family: PingFangSC-Regular;	597	// // ont-family: PingFangSC-Regular;
570	// font-size: 12px;	598	// font-size: 12px;
571	// color: #999999;	599	// color: #999999;
572	// letter-spacing: -0.23px;	600	// letter-spacing: -0.23px;
573	// }	601	// }
574	// }	602	// }
575	.order-info-freight {	603	.order-info-freight {
576	display: block;	604	display: block;
577	margin-left: 40rpx;	605	margin-left: 40rpx;
578	margin-top: 22rpx;	606	margin-top: 22rpx;
579	.p1 {	607	.p1 {
580	// font-family: PingFangSC-Regular;	608	// font-family: PingFangSC-Regular;
581	font-size: 14px;	609	font-size: 14px;
582	color: #333333;	610	color: #333333;
583	letter-spacing: -0.26px;	611	letter-spacing: -0.26px;
584	line-height: 18px;	612	line-height: 18px;
585	margin-right: 24px;	613	margin-right: 24px;
586	}	614	}
587	.p2 {	615	.p2 {
588	// font-family: PingFangSC-Regular;	616	// font-family: PingFangSC-Regular;
589	font-size: 14px;	617	font-size: 14px;
590	color: #ff6b4a;	618	color: #ff6b4a;
591	letter-spacing: -0.26px;	619	letter-spacing: -0.26px;
592	}	620	}
593	}	621	}
594	.order-info-discount {	622	.order-info-discount {
595	display: block;	623	display: block;
596	margin-left: 40rpx;	624	margin-left: 40rpx;
597	margin-top: 24rpx;	625	margin-top: 24rpx;
598	.p1 {	626	.p1 {
599	// font-family: PingFangSC-Regular;	627	// font-family: PingFangSC-Regular;
600	font-size: 14px;	628	font-size: 14px;
601	color: #333333;	629	color: #333333;
602	letter-spacing: -0.26px;	630	letter-spacing: -0.26px;
603	line-height: 18px;	631	line-height: 18px;
604	margin-right: 24px;	632	margin-right: 24px;
605	}	633	}
606	.p2 {	634	.p2 {
607	// font-family: PingFangSC-Regular;	635	// font-family: PingFangSC-Regular;
608	font-size: 14px;	636	font-size: 14px;
609	color: #ff6b4a;	637	color: #ff6b4a;
610	letter-spacing: -0.26px;	638	letter-spacing: -0.26px;
611	}	639	}
612	}	640	}
613	.order-info-price {	641	.order-info-price {
614	display: block;	642	display: block;
615	margin-left: 40rpx;	643	margin-left: 40rpx;
616	margin-top: 24rpx;	644	margin-top: 24rpx;
617	.p1 {	645	.p1 {
618	// font-family: PingFangSC-Semibold;	646	// font-family: PingFangSC-Semibold;
619	font-size: 14px;	647	font-size: 14px;
620	color: #333333;	648	color: #333333;
621	letter-spacing: -0.26px;	649	letter-spacing: -0.26px;
622	line-height: 18px;	650	line-height: 18px;
623	margin-right: 24px;	651	margin-right: 24px;
624	}	652	}
625	.p2 {	653	.p2 {
626	// font-family: PingFangSC-Semibold;	654	// font-family: PingFangSC-Semibold;
627	font-size: 14px;	655	font-size: 14px;
628	color: #ff6b4a;	656	color: #ff6b4a;
629	letter-spacing: -0.26px;	657	letter-spacing: -0.26px;
630	}	658	}
631	}	659	}
632	.order-info-num {	660	.order-info-num {
633	display: block;	661	display: block;
634	margin-left: 40rpx;	662	margin-left: 40rpx;
635	margin-top: 44rpx;	663	margin-top: 44rpx;
636	text {	664	text {
637	// font-family: PingFangSC-Regular;	665	// font-family: PingFangSC-Regular;
638	font-size: 12px;	666	font-size: 12px;
639	color: #999999;	667	color: #999999;
640	letter-spacing: -0.23px;	668	letter-spacing: -0.23px;
641	}	669	}
642	}	670	}
643	.order-info-time {	671	.order-info-time {
644	display: block;	672	display: block;
645	margin: 8rpx 0 48rpx 40rpx;	673	margin: 8rpx 0 48rpx 40rpx;
646	text {	674	text {
647	// font-family: PingFangSC-Regular;	675	// font-family: PingFangSC-Regular;
648	font-size: 12px;	676	font-size: 12px;
649	color: #999999;	677	color: #999999;
650	letter-spacing: -0.23px;	678	letter-spacing: -0.23px;
651	}	679	}
652	}	680	}
653	.order-info-hr {	681	.order-info-hr {
654	width: 520rpx;	682	width: 520rpx;
655	height: 1px;	683	height: 1px;
656	background-color: #e9e9e9;	684	background-color: #e9e9e9;
657	margin-bottom: 20rpx;	685	margin-bottom: 20rpx;
658	}	686	}
659	.order-info-contact {	687	.order-info-contact {
660	display: flex;	688	display: flex;
661	padding-bottom: 28rpx;	689	padding-bottom: 28rpx;
662	image {	690	image {
663	width: 19px;	691	width: 19px;
664	height: 16px;	692	height: 16px;
665	}	693	}
666	text {	694	text {
667	// font-family: PingFangSC-Regular;	695	// font-family: PingFangSC-Regular;
668	margin-left: 20rpx;	696	margin-left: 20rpx;
669	font-size: 14px;	697	font-size: 14px;
670	color: #333333;	698	color: #333333;
671	letter-spacing: -0.26px;	699	letter-spacing: -0.26px;
672	line-height: 18px;	700	line-height: 18px;
673	}	701	}
674	}	702	}
675	}	703	}
676		704
677	.order-confim {	705	.order-confim {
678	display: flex;	706	display: flex;
679	align-items: center;	707	align-items: center;
680	justify-content: flex-end;	708	justify-content: flex-end;
681	// z-index: 999;	709	// z-index: 999;
682	width: 100%;	710	width: 100%;
683	height: 112rpx;	711	height: 112rpx;
684	position: fixed;	712	position: fixed;
685	bottom: 0;	713	bottom: 0;
686	background: #ffffff;	714	background: #ffffff;
687	button {	715	button {
688	width: 204rpx;	716	width: 204rpx;
689	height: 80rpx;	717	height: 80rpx;
690	border: 1px solid #ff6b4a;	718	border: 1px solid #ff6b4a;
691	border-radius: 40rpx;	719	border-radius: 40rpx;
692	font-size: 32rpx;	720	font-size: 32rpx;
693	letter-spacing: -0.3px;	721	letter-spacing: -0.3px;
694	margin-right: 0;	722	margin-right: 0;
695	}	723	}
696	.b1 {	724	.b1 {
697	// font-family: PingFangSC-Regular;	725	// font-family: PingFangSC-Regular;
698	color: #ff6b4a;	726	color: #ff6b4a;
699	background-color: #ffffff;	727	background-color: #ffffff;
700	}	728	}
701	.b2 {	729	.b2 {
702	// font-family: PingFangSC-Regular;	730	// font-family: PingFangSC-Regular;