吉鹏 / gulu-vue

Compare View

Commits (2)

31b5bebd4 订单样式修改 Browse Code »

范牧
2020-06-12 11:00:54 +0800
e92e93f73 合并冲突 Browse Code »

范牧
2020-06-12 11:05:01 +0800

Showing 5 changed files Show diff stats

src/pages/details/details.vue

1	<template>	1	<template>
2	<view class="container">	2	<view class="container">
3	<!-- 基础信息 -->	3	<!-- 基础信息 -->
4	<view class="basic_info">	4	<view class="basic_info">
5	<!-- 轮播图 -->	5	<!-- 轮播图 -->
6	<swiper	6	<swiper
7	class="swiperImage"	7	class="swiperImage"
8	:indicator-dots="true"	8	:indicator-dots="true"
9	:autoplay="true"	9	:autoplay="true"
10	:interval="4000"	10	:interval="4000"
11	:duration="500"	11	:duration="500"
12	>	12	>
13	<swiper-item	13	<swiper-item
14	v-for="(item, index) in carousel"	14	v-for="(item, index) in carousel"
15	:key="index"	15	:key="index"
16	>	16	>
17	<image	17	<image
18	:src="item"	18	:src="item"
19	mode="scaleToFill"	19	mode="scaleToFill"
20	></image>	20	></image>
21	</swiper-item>	21	</swiper-item>
22	</swiper>	22	</swiper>
23	<!-- 产品价格及购买人数 -->	23	<!-- 产品价格及购买人数 -->
24	<view class="info_pay">	24	<view class="info_pay">
25	<view>￥{{goodsInfo.price \|\| '暂无'}}<span	25	<view>￥{{goodsInfo.price \|\| '暂无'}}<span
26	v-if="goodsInfo.discountPrice"	26	v-if="goodsInfo.discountPrice"
27	class="info_pay_discount"	27	class="info_pay_discount"
28	>¥{{goodsInfo.discountPrice}}</span></view>	28	>¥{{goodsInfo.discountPrice}}</span></view>
29	<span class="info_pay_number">{{goodsInfo.tradeNumber \|\| '暂无'}}人购买过</span>	29	<span class="info_pay_number">{{goodsInfo.tradeNumber \|\| '暂无'}}人购买过</span>
30	</view>	30	</view>
31	<!-- 产品名称 -->	31	<!-- 产品名称 -->
32	<view class="info_name">	32	<view class="info_name">
33	<text class="info_name_name">{{goodsInfo.name \|\| '暂无'}}</text>	33	<text class="info_name_name">{{goodsInfo.name \|\| '暂无'}}</text>
34	<view	34	<view
35	@tap="confirmShare"	35	@tap="confirmShare"
36	class="info_name_share"	36	class="info_name_share"
37	>	37	>
38	<image src="/static/img/detail/share-icon.png"></image>	38	<image src="/static/img/detail/share-icon.png"></image>
39	<text>分享</text>	39	<text>分享</text>
40	</view>	40	</view>
41	</view>	41	</view>
42	<!-- 产品售后信息 -->	42	<!-- 产品售后信息 -->
43	<view class="info_after">	43	<view class="info_after">
44	<span>支持7天无理由退货</span>	44	<span>支持7天无理由退货</span>
45	<span>顺丰发货</span>	45	<span>顺丰发货</span>
46	<span>30天质量保证</span>	46	<span>30天质量保证</span>
47	</view>	47	</view>
48	</view>	48	</view>
49	<!-- 详细信息 -->	49	<!-- 详细信息 -->
50	<view class="detail_info">	50	<view class="detail_info">
51	<!-- 详细信息菜单 -->	51	<!-- 详细信息菜单 -->
52	<view class="screen_bar">	52	<view class="screen_bar">
53	<view	53	<view
54	v-for="(item, index) in screenItems"	54	v-for="(item, index) in screenItems"
55	:key="index"	55	:key="index"
56	@click="tabChange(index)"	56	@click="tabChange(index)"
57	>	57	>
58	<view	58	<view
59	class="screen_item"	59	class="screen_item"
60	v-bind:class="{ item_active: item_current === index }"	60	v-bind:class="{ item_active: item_current === index }"
61	>{{ screenItems[index] \|\| '暂无' }}</view>	61	>{{ screenItems[index] \|\| '暂无' }}</view>
62	</view>	62	</view>
63	</view>	63	</view>
64	<!-- 商品介绍 -->	64	<!-- 商品介绍 -->
65	<view	65	<view
66	class="screen_item"	66	class="screen_item"
67	v-if="item_current === 0"	67	v-if="item_current === 0"
68	>	68	>
69	<Introduce :tag="tag" />	69	<Introduce :tag="tag" />
70	</view>	70	</view>
71	<!-- 规格参数 -->	71	<!-- 规格参数 -->
72	<view	72	<view
73	class="screen_item"	73	class="screen_item"
74	v-if="item_current === 1"	74	v-if="item_current === 1"
75	>	75	>
76	<view class="specification">	76	<view class="specification">
77	<view	77	<view
78	class="spe_item"	78	class="spe_item"
79	v-for="(item, index) in specification"	79	v-for="(item, index) in specification"
80	:key="index"	80	:key="index"
81	>	81	>
82	<image	82	<image
83	class="spe_image"	83	class="spe_image"
84	v-bind:src="item.img"	84	v-bind:src="item.img"
85	></image>	85	></image>
86	<span>{{item.standard \|\| '暂无'}}</span>	86	<span>{{item.standard \|\| '暂无'}}</span>
87	<span>{{item.slength \|\| '暂无'}}</span>	87	<span>{{item.slength \|\| '暂无'}}</span>
88	</view>	88	</view>
89	</view>	89	</view>
90	</view>	90	</view>
91	<!-- 售后保障 -->	91	<!-- 售后保障 -->
92	<view	92	<view
93	class="screen_item"	93	class="screen_item"
94	v-if="item_current === 2"	94	v-if="item_current === 2"
95	>	95	>
96	<AfterSails />	96	<AfterSails />
97	</view>	97	</view>
98	</view>	98	</view>
99	<!-- 评价 -->	99	<!-- 评价 -->
100	<template v-if="item_current !== 2">	100	<template v-if="item_current !== 2">
101	<view class="evaluate">	101	<view class="evaluate">
102	<!-- 标题 -->	102	<!-- 标题 -->
103	<view class="evaluate_title">	103	<view class="evaluate_title">
104	<view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>	104	<view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
105	<!-- 星星 -->	105	<!-- 星星 -->
106	<view class="evaluate_star">	106	<view class="evaluate_star">
107	<view	107	<view
108	class="star"	108	class="star"
109	v-for="(item, index) in evaluate.star"	109	v-for="(item, index) in evaluate.star"
110	:key="index"	110	:key="index"
111	>	111	>
112	<image	112	<image
113	src="../../static/img/detail/d_star.png"	113	src="../../static/img/detail/d_star.png"
114	mode="aspectFill"	114	mode="aspectFill"
115	style="height: 26rpx; width: 28rpx;"	115	style="height: 26rpx; width: 28rpx;"
116	></image>	116	></image>
117	</view>	117	</view>
118	</view>	118	</view>
119	</view>	119	</view>
120	<!-- 标签 -->	120	<!-- 标签 -->
121	<view class="evaluate_tag">	121	<view class="evaluate_tag">
122	<view	122	<view
123	v-for="(item, index) in evaluate.tag"	123	v-for="(item, index) in evaluate.tag"
124	:key="index"	124	:key="index"
125	>{{item.name}}</view>	125	>{{item.name}}</view>
126	</view>	126	</view>
127	</view>	127	</view>
128	</template>	128	</template>
129	<!-- 商品详情页 -->	129	<!-- 商品详情页 -->
130	<template v-if="current !==2">	130	<template v-if="current !==2">
131	<view class="more_info">	131	<view class="more_info">
132	<view	132	<view
133	class="more_fixed1"	133	class="more_fixed1"
134	@click="consolg(goodInfo.prodIntro1)"	134	@click="consolg(goodInfo.prodIntro1)"
135	>	135	>
136	<image src="/static/img/detail/hr.png"></image>	136	<image src="/static/img/detail/hr.png"></image>
137	<view>商品详情</view>	137	<view>商品详情</view>
138	<image src="/static/img/detail/hr.png"></image>	138	<image src="/static/img/detail/hr.png"></image>
139	</view>	139	</view>
140	<view	140	<view
141	class="more_all"	141	class="more_all"
142	v-html="more"	142	v-html="more"
143	>	143	>
144	</view>	144	</view>
145	</view>	145	</view>
146	</template>	146	</template>
147	<!-- 底部菜单 -->	147	<!-- 底部菜单 -->
148	<view class="menu">	148	<view class="menu">
149	<view	149	<view
150	@tap="toCart()"	150	@tap="toCart()"
151	class="menu_1"	151	class="menu_1"
152	>	152	>
153	<view class="cart_icon">	153	<view class="cart_icon">
154	<image src="/static/tab-cart.png" />	154	<image src="/static/tab-cart.png" />
155	<text>{{cartNumber}}</text>	155	<text>{{cartNumber}}</text>
156	</view>	156	</view>
157	<view class="menu_image">购物车</view>	157	<view class="menu_image">购物车</view>
158	</view>	158	</view>
159	<view class="menu_2">	159	<view class="menu_2">
160	<view	160	<view
161	class="menu_input"	161	class="menu_input"
162	@tap="showBottom(1)"	162	@tap="showBottom(1)"
163	>加入购物车</view>	163	>加入购物车</view>
164	<view	164	<view
165	class="menu_now"	165	class="menu_now"
166	@click="showBottom(2)"	166	@click="showBottom(2)"
167	>立即购买</view>	167	>立即购买</view>
168	</view>	168	</view>
169	</view>	169	</view>
170	<!-- 参数选择 -->	170	<!-- 参数选择 -->
171	<template v-if="isShowBottom">	171	<template v-if="isShowBottom">
172	<BottomSheet	172	<BottomSheet
173	:isCart="isCart"	173	:isCart="isCart"
174	@addCart="addCart"	174	@addCart="addCart"
175	:pid="pid"	175	:pid="pid"
176	:goodInfo="goodInfo"	176	:goodInfo="goodInfo"
177	:isShowBottom="isShowBottom"	177	:isShowBottom="isShowBottom"
178	@closeBottom="closeBottom"	178	@closeBottom="closeBottom"
179	></BottomSheet>	179	></BottomSheet>
180	</template>	180	</template>
181	<!-- 分享 -->	181	<!-- 分享 -->
182	<template>	182	<template>
183	<uni-popup	183	<uni-popup
184	ref="popupShare"	184	ref="popupShare"
185	type="share"	185	type="share"
186	>	186	>
187	<uni-popup-share @select="selectShare"></uni-popup-share>	187	<uni-popup-share @select="selectShare"></uni-popup-share>
188	</uni-popup>	188	</uni-popup>
189	</template>	189	</template>
190	<!-- 分享海报 -->	190	<!-- 分享海报 -->
191	<template>	191	<template>
192	<uni-popup	192	<uni-popup
193	ref="uniPopupPost"	193	ref="uniPopupPost"
194	type="center"	194	type="center"
195	>	195	>
196	<uni-popup-post :postUrl="postUrl"></uni-popup-post>	196	<uni-popup-post :postUrl="postUrl"></uni-popup-post>
197	</uni-popup>	197	</uni-popup>
198	</template>	198	</template>
199	</view>	199	</view>
200	</template>	200	</template>
201		201
202	<script>	202	<script>
203	import store from '@/store'	203	import store from '@/store'
204	import Introduce from './components/Introduce' // 商品介绍基本信息组件	204	import Introduce from './components/Introduce' // 商品介绍基本信息组件
205	import AfterSails from './components/AfterSails' // 售后保障组件	205	import AfterSails from './components/AfterSails' // 售后保障组件
206	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件	206	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件
207	import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件	207	import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件
208	import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件	208	import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件
209		209
210	export default {	210	export default {
211	components: {	211	components: {
212	Introduce,	212	Introduce,
213	AfterSails,	213	AfterSails,
214	BottomSheet,	214	BottomSheet,
215	uniPopupShare,	215	uniPopupShare,
216	uniPopupPost,	216	uniPopupPost,
217	},	217	},
218	data () {	218	data () {
219	return {	219	return {
220	pid: 7, // 产品ID	220	pid: 7, // 产品ID
221	skId: undefined, // skuId	221	skId: undefined, // skuId
222	// 详细信息菜单	222	// 详细信息菜单
223	item_current: 0,	223	item_current: 0,
224	screenItems: [	224	screenItems: [
225	'商品介绍',	225	'商品介绍',
226	'规格参数',	226	'规格参数',
227	'售后保障',	227	'售后保障',
228	],	228	],
229	showPostImg: false, // 是否展示分享海报	229	showPostImg: false, // 是否展示分享海报
230	isShowBottom: false, // 是否展示参数选择	230	isShowBottom: false, // 是否展示参数选择
231	isCart: 1, // 参数选择按钮判断	231	isCart: 1, // 参数选择按钮判断
232	}	232	}
233	},	233	},
234	onLoad({ pid = this.pid, sk_id: skId }) {	234	onLoad({ pid = this.pid, sk_id: skId }) {
235	// 根据页面传参请求页面数据	235	// 根据页面传参请求页面数据
236	this.pid = pid	236	this.pid = pid
237	this.skId = skId	237	this.skId = skId
238		238
239	// 获取产品详情	239	// 获取产品详情
240	this.getDetails({ pid, skId })	240	this.getDetails({ pid, skId })
241	// 获取购物车数据	241	// 获取购物车数据
242	this.getCartNum()	242	this.getCartNum()
243	},	243	},
244	computed: {	244	computed: {
245	// 获取轮播图数据	245	// 获取轮播图数据
246	goodInfo() {	246	goodInfo() {
247	return this.$store.state.details.goodInfo	247	return this.$store.state.details.goodInfo
248	},	248	},
249	// 获取轮播图数据	249	// 获取轮播图数据
250	carousel() {	250	carousel() {
251	return this.$store.state.details.carousel	251	return this.$store.state.details.carousel
252	},	252	},
253	// 商品基本信息	253	// 商品基本信息
254	goodsInfo() {	254	goodsInfo() {
255	return this.$store.state.details.goodsInfo	255	return this.$store.state.details.goodsInfo
256	},	256	},
257	// 商品介绍商品标签	257	// 商品介绍商品标签
258	tag() {	258	tag() {
259	return this.$store.state.details.tag	259	return this.$store.state.details.tag
260	},	260	},
261	// 规格参数	261	// 规格参数
262	specification() {	262	specification() {
263	return this.$store.state.details.specification	263	return this.$store.state.details.specification
264	},	264	},
265	// 评价	265	// 评价
266	evaluate() {	266	evaluate() {
267	return this.$store.state.details.evaluate	267	return this.$store.state.details.evaluate
268	},	268	},
269	// 商品详情	269	// 商品详情
270	more() {	270	more() {
271	return this.$store.state.details.more	271	return this.$store.state.details.more
272	},	272	},
273	// 购物车数目	273	// 购物车数目
274	cartNumber() {	274	cartNumber() {
275	return this.$store.state.details.cartNumber	275	return this.$store.state.details.cartNumber
276	},	276	},
277	// 购物车数目	277	// 购物车数目
278	skuList() {	278	skuList() {
279	return this.$store.state.details.skuList	279	return this.$store.state.details.skuList
280	},	280	},
281	// 分享海报	281	// 分享海报
282	postUrl() {	282	postUrl() {
283	return this.$store.state.details.postUrl	283	return this.$store.state.details.postUrl
284	},	284	},
285	},	285	},
286	methods: {	286	methods: {
287	// 获取产品详情	287	// 获取产品详情
288	getDetails({ pid, skId }) {	288	getDetails({ pid, skId }) {
289	store.dispatch('details/details', {	289	store.dispatch('details/details', {
290	pid,	290	pid,
291	sk_id: skId,	291	sk_id: skId,
292	})	292	})
293	store.dispatch('read/fetch', {	293	store.dispatch('read/fetch', {
294	pid,	294	pid,
295	sk_id: skId,	295	sk_id: skId,
296	})	296	})
297	},	297	},
298	// 获取购物车数目	298	// 获取购物车数目
299	getCartNum() {	299	getCartNum() {
300	store.dispatch('details/getCartNumber')	300	store.dispatch('details/getCartNumber')
301	},	301	},
302	// 切换详细信息菜单	302	// 切换详细信息菜单
303	tabChange (e) {	303	tabChange (e) {
304	if (this.current !== e) {	304	if (this.current !== e) {
305	this.item_current = e	305	this.item_current = e
306	}	306	}
307	},	307	},
308	// 打开分享界面	308	// 打开分享界面
309	confirmShare() {	309	confirmShare() {
310	this.$refs.popupShare.open()	310	this.$refs.popupShare.open()
311	},	311	},
312	// 选择分享	312	// 选择分享
313	selectShare(e, done) {	313	selectShare(e, done) {
314	switch (e.item.name) {	314	switch (e.item.name) {
315	// 分享到好物圈	315	// 分享到好物圈
316	case 'recommend':	316	case 'recommend':
317	this.shareRecommend()	317	this.shareRecommend()
318	break	318	break
319	// 分享到朋友圈	319	// 分享到朋友圈
320	case 'friend':	320	case 'friend':
321	break	321	break
322	// 生成海报	322	// 生成海报
323	case 'poster':	323	case 'poster':
324	uni.showLoading({	324	uni.showLoading({
325	title: '生成图片中',	325	title: '生成图片中',
326	})	326	})
327	this.sharePost()	327	this.sharePost()
328	break	328	break
329	default:	329	default:
330	break	330	break
331	}	331	}
332	done()	332	done()
333	},	333	},
334	// 分享到好物圈	334	// 分享到好物圈
335	shareRecommend() {	335	shareRecommend() {
336	if (wx.openBusinessView) {	336	if (wx.openBusinessView) {
337	wx.openBusinessView({	337	wx.openBusinessView({
338	businessType: 'friendGoodsRecommend',	338	businessType: 'friendGoodsRecommend',
339	extraData: {	339	extraData: {
340	product: {	340	product: {
341	item_code: '58_68',	341	item_code: '58_68',
342	title: this.goodsInfo.name,	342	title: this.goodsInfo.name,
343	image_list: this.carousel,	343	image_list: this.carousel,
344	},	344	},
345	},	345	},
346	success: function (res) {	346	success: function (res) {
347	uni.showToast({	347	uni.showToast({
348	title: '好物圈分享成功！',	348	title: '好物圈分享成功！',
349	icon: 'none',	349	icon: 'none',
350	duration: 2000,	350	duration: 2000,
351	})	351	})
352	// 向服务器报告这个事情	352	// 向服务器报告这个事情
353	// TODO:::记录这个用户的推广过程。	353	// TODO:::记录这个用户的推广过程。
354	console.log('好物圈分享成功！', res)	354	console.log('好物圈分享成功！', res)
355	},	355	},
356	fail: function (res) {	356	fail: function (res) {
357	console.log('好物圈分享失败！', res)	357	console.log('好物圈分享失败！', res)
358	},	358	},
359	})	359	})
360	}	360	}
361	},	361	},
362	// 分享到朋友/圈	362	// 分享到朋友/圈
363	shareFriend() {	363	shareFriend() {
364	this.onShareAppMessage()	364	this.onShareAppMessage()
365	},	365	},
366	// 朋友圈设置页面	366	// 朋友圈设置页面
367	onShareAppMessage() {	367	onShareAppMessage() {
368	let myName = this.$store.state.user.userInfo.nickName	368	let myName = this.$store.state.user.userInfo.nickName
369	if (myName === '' \|\| myName.length < 1 \|\| myName === '匿名用户' \|\| typeof myName === 'undefined') {	369	if (myName === '' \|\| myName.length < 1 \|\| myName === '匿名用户' \|\| typeof myName === 'undefined') {
370	myName = '【神秘人】'	370	myName = '【神秘人】'
371	} else {	371	} else {
372	myName = '【' + myName + '】'	372	myName = '【' + myName + '】'
373	}	373	}
374	return {	374	return {
375	title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)	375	title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
376	path: '/pages/details/details?sid=0&pid=' + this.pid,	376	path: '/pages/details/details?sid=0&pid=' + this.pid,
377	imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4	377	imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
378	success: function (res) {	378	success: function (res) {
379	if (res.errMsg === 'shareAppMessage:ok') {	379	if (res.errMsg === 'shareAppMessage:ok') {
380	console.log('分享成功！', res)	380	console.log('分享成功！', res)
381	}	381	}
382	},	382	},
383	fail: function (res) {	383	fail: function (res) {
384	if (res.errMsg === 'shareAppMessage:fail cancel') {	384	if (res.errMsg === 'shareAppMessage:fail cancel') {
385	console.log('fail', '放弃分享')	385	console.log('fail', '放弃分享')
386	} else if (res.errMsg === 'shareAppMessage:fail') {	386	} else if (res.errMsg === 'shareAppMessage:fail') {
387	console.log('fail', '分享失败')	387	console.log('fail', '分享失败')
388	}	388	}
389	},	389	},
390	}	390	}
391	},	391	},
392	// 生成海报	392	// 生成海报
393	sharePost() {	393	sharePost() {
394	const fromsid = this.$store.state.user.fromInfo.fromsid \|\| 'undefined'	394	const fromsid = this.$store.state.user.fromInfo.fromsid \|\| 'undefined'
395		395
396	store.dispatch('details/post', {	396	store.dispatch('details/post', {
397	pid: this.pid,	397	pid: this.pid,
398	sid: fromsid === 'undefined' ? 0 : fromsid,	398	sid: fromsid === 'undefined' ? 0 : fromsid,
399	}).then((data) => {	399	}).then((data) => {
400	uni.hideLoading()	400	uni.hideLoading()
401	this.$refs.uniPopupPost.open()	401	this.$refs.uniPopupPost.open()
402	})	402	})
403	},	403	},
404	// 参数选择弹窗开关	404	// 参数选择弹窗开关
405	showBottom(isCart) {	405	showBottom(isCart) {
406	this.isCart = isCart	406	this.isCart = isCart
407	this.isShowBottom = true	407	this.isShowBottom = true
408	},	408	},
409	closeBottom() {	409	closeBottom() {
410	this.isShowBottom = false	410	this.isShowBottom = false
411	},	411	},
412	// 前往购物车	412	// 前往购物车
413	toCart() {	413	toCart() {
414	uni.switchTab({	414	uni.switchTab({
415	url: '/pages/cart/cart',	415	url: '/pages/cart/cart',
416	success: res => {},	416	success: res => {},
417	fail: (error) => { console.log('跳转购物车失败======>', error) },	417	fail: (error) => { console.log('跳转购物车失败======>', error) },
418	complete: () => { console.log('toCart') },	418	complete: () => { console.log('toCart') },
419	})	419	})
420	},	420	},
421	// 加入购物车	421	// 加入购物车
422	addCart (mpId, num, checkedSKU, skId, price) {	422	addCart (mpId, num, checkedSKU, skId, price) {
423	const addCartList = {}	423	const addCartList = {}
424	addCartList.mp_id = mpId	424	addCartList.mp_id = mpId
425	addCartList.sk_id = skId	425	addCartList.sk_id = skId
426	addCartList.num = num	426	addCartList.num = num
427	addCartList.checkedSKU = checkedSKU	427	// addCartList.checkedSKU = checkedSKU
428	addCartList.pid = this.pid	428	addCartList.pid = this.pid
429	addCartList.price = price	429	addCartList.price = price
430	console.log('添加购物车的参数', addCartList)	430	console.log('添加购物车的参数', addCartList)
431	store.dispatch('cart/addCart', addCartList).then((res) => {	431	store.dispatch('cart/addCart', addCartList).then((res) => {
432	if (res.code === 1) {	432	if (res.code === 1) {
433	uni.showToast({	433	uni.showToast({
434	title: '添加成功~',	434	title: '添加成功~',
435	icon: 'success',	435	icon: 'success',
436	})	436	})
437	}	437	}
438	// 再次请求购物车接口，实现实时更新	438	// 再次请求购物车接口，实现实时更新
439	store.dispatch('details/getCartNumber')	439	store.dispatch('details/getCartNumber')
440	})	440	})
441	},	441	},
442	},	442	},
443	}	443	}
444	</script>	444	</script>
445		445
446	<style lang="scss">	446	<style lang="scss">
447	.container {	447	.container {
448	background-color: #f8f8f8;	448	background-color: #f8f8f8;
449	font-family: "PingFangSC-Regular";	449	font-family: "PingFangSC-Regular";
450	// 板块样式	450	// 板块样式
451	> view {	451	> view {
452	background: #ffffff;	452	background: #ffffff;
453	margin-bottom: 10px;	453	margin-bottom: 10px;
454	padding: 8px 20px 8px 20px;	454	padding: 8px 20px 8px 20px;
455	box-sizing: border-box;	455	box-sizing: border-box;
456	}	456	}
457	// 基础信息板块	457	// 基础信息板块
458	.basic_info {	458	.basic_info {
459	// 轮播图	459	// 轮播图
460	.swiperImage {	460	.swiperImage {
461	width: 684rpx;	461	width: 684rpx;
462	height: 480rpx;	462	height: 480rpx;
463	text-align: center;	463	text-align: center;
464	image {	464	image {
465	max-width: 100%;	465	max-width: 100%;
466	max-height: 100%;	466	max-height: 100%;
467	border-radius: 16rpx;	467	border-radius: 16rpx;
468	}	468	}
469	}	469	}
470	// 产品价格及购买人数	470	// 产品价格及购买人数
471	.info_pay {	471	.info_pay {
472	color: #eb5d3b;	472	color: #eb5d3b;
473	font-size: 18px;	473	font-size: 18px;
474	margin-top: 5px;	474	margin-top: 5px;
475	font-family: "PingFangSC-Semibold";	475	font-family: "PingFangSC-Semibold";
476	display: flex;	476	display: flex;
477	justify-content: space-between;	477	justify-content: space-between;
478	.info_pay_discount {	478	.info_pay_discount {
479	text-decoration: line-through;	479	text-decoration: line-through;
480	margin-left: 8rpx;	480	margin-left: 8rpx;
481	color: #999;	481	color: #999;
482	font-size: 14px;	482	font-size: 14px;
483	}	483	}
484	.info_pay_number {	484	.info_pay_number {
485	color: #999;	485	color: #999;
486	font-size: 14px;	486	font-size: 14px;
487	font-family: PingFangSC-Regular;	487	font-family: PingFangSC-Regular;
488	}	488	}
489	}	489	}
490	// 产品名称	490	// 产品名称
491	.info_name {	491	.info_name {
492	margin-top: 5px;	492	margin-top: 5px;
493	display: flex;	493	display: flex;
494	justify-content: space-between;	494	justify-content: space-between;
495	.info_name_name {	495	.info_name_name {
496	margin-right: 10px;	496	margin-right: 10px;
497	font-size: 16px;	497	font-size: 16px;
498	font-family: "PingFangSC-Semibold";	498	font-family: "PingFangSC-Semibold";
499	max-width: 592rpx;	499	max-width: 592rpx;
500	}	500	}
501	.info_name_share {	501	.info_name_share {
502	display: flex;	502	display: flex;
503	flex-direction: column;	503	flex-direction: column;
504	justify-content: space-between;	504	justify-content: space-between;
505	align-items: center;	505	align-items: center;
506	margin-top: 14rpx;	506	margin-top: 14rpx;
507	> image {	507	> image {
508	height: 40rpx;	508	height: 40rpx;
509	width: 40rpx;	509	width: 40rpx;
510	}	510	}
511	> text {	511	> text {
512	font-family: PingFangSC-Regular;	512	font-family: PingFangSC-Regular;
513	font-size: 12px;	513	font-size: 12px;
514	color: #999;	514	color: #999;
515	letter-spacing: -0.23px;	515	letter-spacing: -0.23px;
516	}	516	}
517	}	517	}
518	}	518	}
519	// 售后服务	519	// 售后服务
520	.info_after {	520	.info_after {
521	font-size: 10px;	521	font-size: 10px;
522	color: #999;	522	color: #999;
523	margin-top: 20rpx;	523	margin-top: 20rpx;
524	> span {	524	> span {
525	height: 14px;	525	height: 14px;
526	margin-right: 10px;	526	margin-right: 10px;
527	}	527	}
528	}	528	}
529	}	529	}
530	// 详细信息	530	// 详细信息
531	.detail_info {	531	.detail_info {
532	margin-bottom: 20rpx;	532	margin-bottom: 20rpx;
533	.screen_bar {	533	.screen_bar {
534	width: 670rpx;	534	width: 670rpx;
535	margin-top: 20rpx;	535	margin-top: 20rpx;
536	margin-bottom: 24rpx;	536	margin-bottom: 24rpx;
537	display: flex;	537	display: flex;
538	flex-direction: row;	538	flex-direction: row;
539	justify-content: space-between;	539	justify-content: space-between;
540	align-items: center;	540	align-items: center;
541	font-size: 14px;	541	font-size: 14px;
542	color: #333333;	542	color: #333333;
543	transition: all 0.2s;	543	transition: all 0.2s;
544	}	544	}
545	.item_active {	545	.item_active {
546	border-bottom: 4rpx solid #ff6b4a;	546	border-bottom: 4rpx solid #ff6b4a;
547	}	547	}
548	.screen_item {	548	.screen_item {
549	font-size: 32rpx;	549	font-size: 32rpx;
550	color: #333333;	550	color: #333333;
551	display: flex;	551	display: flex;
552	transition: all 0.2s;	552	transition: all 0.2s;
553	// 规格参数	553	// 规格参数
554	.specification {	554	.specification {
555	margin-bottom: 4px;	555	margin-bottom: 4px;
556	.spe_item {	556	.spe_item {
557	image {	557	image {
558	width: 50px;	558	width: 50px;
559	height: 25px;	559	height: 25px;
560	margin-right: 6px;	560	margin-right: 6px;
561	vertical-align: middle;	561	vertical-align: middle;
562	}	562	}
563	span {	563	span {
564	margin-left: 24rpx;	564	margin-left: 24rpx;
565	}	565	}
566	}	566	}
567	}	567	}
568	}	568	}
569	//	569	//
570	}	570	}
571	// 宝贝好评率	571	// 宝贝好评率
572	.evaluate {	572	.evaluate {
573	.evaluate_title {	573	.evaluate_title {
574	font-size: 14px;	574	font-size: 14px;
575	color: #333333;	575	color: #333333;
576	display: flex;	576	display: flex;
577	justify-content: space-between;	577	justify-content: space-between;
578	.title_rate {	578	.title_rate {
579	margin-left: 10rpx;	579	margin-left: 10rpx;
580	}	580	}
581	.evaluate_star {	581	.evaluate_star {
582	width: 90px;	582	width: 90px;
583	display: flex;	583	display: flex;
584	align-items: center;	584	align-items: center;
585	justify-content: space-between;	585	justify-content: space-between;
586	}	586	}
587	view {	587	view {
588	font-size: 14px;	588	font-size: 14px;
589	color: #333333;	589	color: #333333;
590	font-weight: bold;	590	font-weight: bold;
591	}	591	}
592	}	592	}
593	.evaluate_tag {	593	.evaluate_tag {
594	view {	594	view {
595	display: inline-block;	595	display: inline-block;
596	margin-right: 20rpx;	596	margin-right: 20rpx;
597	min-width: 180rpx;	597	min-width: 180rpx;
598	margin-top: 10px;	598	margin-top: 10px;
599	height: 48rpx;	599	height: 48rpx;
600	background: #f2f2f2;	600	background: #f2f2f2;
601	border-radius: 2px;	601	border-radius: 2px;
602	font-family: PingFangSC-Regular;	602	font-family: PingFangSC-Regular;
603	font-size: 12px;	603	font-size: 12px;
604	color: #666666;	604	color: #666666;
605	letter-spacing: -0.23px;	605	letter-spacing: -0.23px;
606	text-align: center;	606	text-align: center;
607	padding: 0 48rpx;	607	padding: 0 48rpx;
608	line-height: 48rpx;	608	line-height: 48rpx;
609	}	609	}
610	}	610	}
611	}	611	}
612	// 商品详情	612	// 商品详情
613	.more_info {	613	.more_info {
614	.more_fixed1 {	614	.more_fixed1 {
615	display: flex;	615	display: flex;
616	justify-content: space-between;	616	justify-content: space-between;
617	align-content: center;	617	align-content: center;
618	margin-bottom: 12px;	618	margin-bottom: 12px;
619	view {	619	view {
620	font-size: 14px;	620	font-size: 14px;
621	color: #333333;	621	color: #333333;
622	font-weight: bold;	622	font-weight: bold;
623	font-family: "PingFangSC-Medium";	623	font-family: "PingFangSC-Medium";
624	line-height: 24px;	624	line-height: 24px;
625	}	625	}
626	image {	626	image {
627	width: 240rpx;	627	width: 240rpx;
628	height: 3px;	628	height: 3px;
629	margin-top: 10px;	629	margin-top: 10px;
630	}	630	}
631	}	631	}
632	.more_all {	632	.more_all {
633	width: 100%;	633	width: 100%;
634	margin-top: 30rpx;	634	margin-top: 30rpx;
635	margin-right: 30rpx;	635	margin-right: 30rpx;
636	margin-bottom: 180rpx;	636	margin-bottom: 180rpx;
637	font-family: "PingFangSC-Regular";	637	font-family: "PingFangSC-Regular";
638	}	638	}
639	}	639	}
640	// 菜单	640	// 菜单
641	.menu {	641	.menu {
642	position: fixed;	642	position: fixed;
643	bottom: 0;	643	bottom: 0;
644	min-height: 74px;	644	min-height: 74px;
645	width: 100%;	645	width: 100%;
646	background: #ffffff;	646	background: #ffffff;
647	padding: 20px 20px 8px 20px;	647	padding: 20px 20px 8px 20px;
648	font-family: "PingFangSC-Regular";	648	font-family: "PingFangSC-Regular";
649	box-sizing: border-box;	649	box-sizing: border-box;
650	display: flex;	650	display: flex;
651	justify-content: space-between;	651	justify-content: space-between;
652	align-content: center;	652	align-content: center;
653	margin: 0;	653	margin: 0;
654	/* iphonex 等安全区设置，底部安全区适配 */	654	/* iphonex 等安全区设置，底部安全区适配 */
655	/* #ifndef APP-NVUE */	655	/* #ifndef APP-NVUE */
656	padding-bottom: constant(safe-area-inset-bottom);	656	padding-bottom: constant(safe-area-inset-bottom);
657	padding-bottom: env(safe-area-inset-bottom);	657	padding-bottom: env(safe-area-inset-bottom);
		658	/* #endif */
658	/* #endif */	659	.menu_1 {
659	.menu_1 {	660	width: 20%;
660	width: 20%;	661	height: 100%;
661	height: 100%;	662	text-align: center;
662	text-align: center;	663	color: #989898;
663	color: #989898;	664	.cart_icon {
664	.cart_icon {	665	position: relative;
665	position: relative;	666	text {
666	text {	667	position: absolute;
667	position: absolute;	668	color: white;
668	color: white;	669	font-size: 17px;
669	font-size: 17px;	670	background-color: red;
670	background-color: red;	671	min-height: 24px;
671	min-height: 24px;	672	min-width: 24px;
672	min-width: 24px;	673	line-height: 24px;
673	line-height: 24px;	674	right: -12%;
674	right: -12%;	675	top: -12px;
675	top: -12px;	676	text-align: center;
676	text-align: center;	677	border-radius: 24px;
677	border-radius: 24px;	678	padding: 2px;
678	padding: 2px;	679	}
679	}	680	}
680	}	681	}
681	}	682	image {
682	image {	683	width: 42%;
683	width: 42%;	684	height: 26px;
684	height: 26px;	685	}
685	}	686	.menu_image {
686	.menu_image {	687	font-size: 12px;
687	font-size: 12px;	688	text-align: center;
688	text-align: center;	689	}
689	}	690	.menu_2 {
690	.menu_2 {	691	width: 74%;
691	width: 74%;	692	height: 80rpx;
692	height: 80rpx;	693	display: grid;
693	display: grid;	694	grid-template-columns: 50% 50%;
694	grid-template-columns: 50% 50%;	695	}
695	}	696	.menu_input {
696	.menu_input {	697	display: inline-flex;
697	display: inline-flex;	698	align-items: center;
698	align-items: center;	699	justify-content: space-around;
699	justify-content: space-around;	700	background: #fff0ec;
700	background: #fff0ec;	701	font-size: 16px;
701	font-size: 16px;	702	color: #ff6b4a;
702	color: #ff6b4a;	703	border-radius: 20px 0 0 20px;
703	border-radius: 20px 0 0 20px;	704	}
704	}	705	.menu_now {
705	.menu_now {	706	display: inline-flex;
706	display: inline-flex;	707	align-items: center;
707	align-items: center;	708	justify-content: space-around;
708	justify-content: space-around;	709	background: #ff6b4a;
709	background: #ff6b4a;	710	font-size: 16px;
710	font-size: 16px;	711	color: #ffffff;
711	color: #ffffff;	712	border-radius: 0 20px 20px 0;
712	border-radius: 0 20px 20px 0;	713	}
713	}	714	}
714	}	715	/* #endif */
715	}	716
716	</style>	717	}
717		718	</style>
		719

src/pages/index/index.vue

Diff comments View file @e92e93f

1	<template>	1	<template>
2	<view class="container">	2	<view class="container">
3	<view	3	<view
4	class="content skeleton"	4	class="content skeleton"
5	v-show="showContent"	5	v-show="showContent"
6	>	6	>
7	<view class="header">	7	<view class="header">
8	<!-- 搜索-->	8	<!-- 搜索-->
9	<view class="searchBar skeleton-rect">	9	<view class="searchBar skeleton-rect">
10	<icon	10	<icon
11	class="searchIcon"	11	class="searchIcon"
12	type="search"	12	type="search"
13	size="14"	13	size="14"
14	></icon>	14	></icon>
15	<input	15	<input
16	v-model="searchText"	16	v-model="searchText"
17	class="searchIpt"	17	class="searchIpt"
18	placeholder="老花镜"	18	placeholder="老花镜"
19	confirm-type="search"	19	confirm-type="search"
20	@blur="searchKey"	20	@blur="searchKey"
21	/>	21	/>
22	</view>	22	</view>
23		23
24	<!-- 筛选栏-->	24	<!-- 筛选栏-->
25	<!-- <view class="screenBar">	25	<!-- <view class="screenBar">
26	<view	26	<view
27	v-for="item in screenItems"	27	v-for="item in screenItems"
28	:key="item.current"	28	:key="item.current"
29	@click="onClickItem(item.current)"	29	@click="onClickItem(item.current)"
30	>	30	>
31	<view	31	<view
32	class="screenItem"	32	class="screenItem"
33	v-bind:class="{ active: current === item.current }"	33	v-bind:class="{ active: current === item.current }"
34	v-if="item.current === 2"	34	v-if="item.current === 2"
35	@click="dropDown"	35	@click="dropDown"
36	>	36	>
37	{{ item.text }}	37	{{ item.text }}
38	<icon	38	<icon
39	type="info"	39	type="info"
40	size="14"	40	size="14"
41	></icon>	41	></icon>
42	</view>	42	</view>
43	<view	43	<view
44	class="screenItem"	44	class="screenItem"
45	v-bind:class="{ active: current === item.current }"	45	v-bind:class="{ active: current === item.current }"
46	v-if="item.current === 4"	46	v-if="item.current === 4"
47	@click="showDrawer('showRight')"	47	@click="showDrawer('showRight')"
48	>	48	>
49	{{ item.text }}	49	{{ item.text }}
50	<icon	50	<icon
51	type="info"	51	type="info"
52	size="14"	52	size="14"
53	></icon>	53	></icon>
54	</view>	54	</view>
55	<view v-if="item.current !== 2&&item.current!==4">	55	<view v-if="item.current !== 2&&item.current!==4">
56	<view	56	<view
57	class="screenItem"	57	class="screenItem"
58	v-bind:class="{ active: current === item.current }"	58	v-bind:class="{ active: current === item.current }"
59	>{{ item.text }}</view>	59	>{{ item.text }}</view>
60	</view>	60	</view>
61	</view>	61	</view>
62	</view> -->	62	</view> -->
63	</view>	63	</view>
64	<Uni-drawer	64	<Uni-drawer
65	ref="showRight"	65	ref="showRight"
66	mask="true"	66	mask="true"
67	maskClick="true"	67	maskClick="true"
68	mode="right"	68	mode="right"
69	:width="320"	69	:width="320"
70	@change="change($event,'showRight')"	70	@change="change($event,'showRight')"
71	>	71	>
72	<view class="close">	72	<view class="close">
73	<view @click="closeDrawer('showRight')">	73	<view @click="closeDrawer('showRight')">
74	<text class="word-btn-white">关闭</text>	74	<text class="word-btn-white">关闭</text>
75	</view>	75	</view>
76	</view>	76	</view>
77	</Uni-drawer>	77	</Uni-drawer>
78		78
79	<!-- 筛选菜单-->	79	<!-- 筛选菜单-->
80	<view class="content-wrap skeleton-rect">	80	<view class="content-wrap skeleton-rect">
81	<view>	81	<view>
82	<HMfilterDropdown	82	<HMfilterDropdown
83	:filterData="categoryList"	83	:filterData="categoryList"
84	:defaultSelected="filterDropdownValue"	84	:defaultSelected="filterDropdownValue"
85	:updateMenuName="true"	85	:updateMenuName="true"
86	@search="search"	86	@search="search"
87	@getList="getList"	87	@getList="getList"
88	data-format="Object"	88	data-format="Object"
89	></HMfilterDropdown>	89	></HMfilterDropdown>
90	<!-- 商品列表 -->	90	<!-- 商品列表 -->
91	<!-- <scroll-view	91	<!-- <scroll-view
92	enable-flex	92	enable-flex
93	@scrolltolower="handleScrolltolower"	93	@scrolltolower="handleScrolltolower"
94	scroll-y	94	scroll-y
95	style="height: 1000px;margin-bottom: 20px;"	95	style="height: 1000px;margin-bottom: 20px;"
96	> -->	96	> -->
97	<view class="goods-list">	97	<view class="goods-list">
98	<view class="product-list">	98	<view class="product-list">
99	<view	99	<view
100	class="product skeleton-rect"	100	class="product skeleton-rect"
101	v-for="(goods) in goodsList"	101	v-for="(goods) in goodsList"
102	:key="goods.id"	102	:key="goods.id"
103	>	103	>
104	<Card	104	<Card
105	:goods="goods"	105	:goods="goods"
106	:scrollTop="scrollTop"	106	:scrollTop="scrollTop"
107	:viewHeight="viewHeight"	107	:viewHeight="viewHeight"
108	></Card>	108	></Card>
109	</view>	109	</view>
110	</view>	110	</view>
111	<view class="loading-text">	111	<view class="loading-text">
112	<text v-if="isLoading==true">{{loadingText}}</text>	112	<text v-if="isLoading==true">{{loadingText}}</text>
113	<text v-else>{{loadedText}}</text>	113	<text v-else>{{loadedText}}</text>
114	</view>	114	</view>
115	</view>	115	</view>
116	<!-- </scroll-view> -->	116	<!-- </scroll-view> -->
117	</view>	117	</view>
118	</view>	118	</view>
119	</view>	119	</view>
120	<!--引用组件-->	120	<!--引用组件-->
121	<skeleton	121	<skeleton
122	:show="showSkeleton"	122	:show="showSkeleton"
123	ref="skeleton"	123	ref="skeleton"
124	loading="chiaroscuro"	124	loading="chiaroscuro"
125	selector="skeleton"	125	selector="skeleton"
126	bgcolor="#FFF"	126	bgcolor="#FFF"
127	></skeleton>	127	></skeleton>
128	</view>	128	</view>
129	</template>	129	</template>
130		130
131	<script>	131	<script>
132	import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'	132	import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
133	import Card from '@/components/CommodityCard/CommodityCard.vue'	133	import Card from '@/components/CommodityCard/CommodityCard.vue'
134	import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'	134	import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
135	import skeleton from '@/components/quick-skeleton/quick-skeleton.vue'	135	import skeleton from '@/components/quick-skeleton/quick-skeleton.vue'
136	import store from '@/store'	136	import store from '@/store'
137		137
138	export default {	138	export default {
139	components: {	139	components: {
140	UniDrawer: UniDrawer,	140	UniDrawer: UniDrawer,
141	HMfilterDropdown: HMfilterDropdown,	141	HMfilterDropdown: HMfilterDropdown,
142	Card: Card,	142	Card: Card,
143	skeleton: skeleton,	143	skeleton: skeleton,
144	},	144	},
145	data() {	145	data() {
146	return {	146	return {
147	indexArr: '',	147	indexArr: '',
148	valueArr: '',	148	valueArr: '',
149	isLoading: true, // 初始化加载状态	149	isLoading: true, // 初始化加载状态
150	loadingText: 'data loading...',	150	loadingText: 'data loading...',
151	loadedText: '~~暂无更多数据~~',	151	loadedText: '~~暂无更多数据~~',
152	filterDropdownValue: [],	152	filterDropdownValue: [],
153	filterData: [],	153	filterData: [],
154	searchText: '',	154	searchText: '',
155	scrollTop: 0,	155	scrollTop: 0,
156	showContent: true,	156	showContent: true,
157	viewHeight: uni.getSystemInfoSync().windowHeight,	157	viewHeight: uni.getSystemInfoSync().windowHeight,
158	showSkeleton: false, // 骨架屏显示隐藏	158	showSkeleton: false, // 骨架屏显示隐藏
159	}	159	}
160	},	160	},
161	onPageScroll({ scrollTop }) {	161	onPageScroll({ scrollTop }) {
162	// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件	162	// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
163	this.scrollTop = scrollTop	163	this.scrollTop = scrollTop
164	},	164	},
165	computed: {	165	computed: {
166	goodsList() {	166	goodsList() {
167	// 也可以从 getters 获取	167	// 也可以从 getters 获取
168	// console.log('index-list=====>',this.$store.state.index.list)	168	// console.log('index-list=====>',this.$store.state.index.list)
169	const list = this.$store.state.index.list	169	const list = this.$store.state.index.list
170	if (list.length === 0) {	170	if (list.length === 0) {
171	this.isLoading = false	171	this.isLoading = false
172	}	172	}
173	this.scrollTop = 0.1	173	this.scrollTop = 0.1
174	return list	174	return list
175	},	175	},
176	categoryList() {	176	categoryList() {
177	return this.$store.state.index.categoryList	177	return this.$store.state.index.categoryList
178	},	178	},
179	},	179	},
180	filters: {	180	filters: {
181	outData(value) {	181	outData(value) {
182	return JSON.stringify(value)	182	return JSON.stringify(value)
183	},	183	},
184	},	184	},
185	/**	185	/**
186	* 页面载入完成后调用子组件的方法生成预加载效果	186	* 页面载入完成后调用子组件的方法生成预加载效果
187	*/	187	*/
188	onReady: function() {	188	onReady: function() {
189	this.getInitData()	189	this.getInitData()
190	},	190	},
191	methods: {	191	methods: {
192	async getInitData () {	192	async getInitData () {
193	this.showSkeleton = true	193	this.showSkeleton = true
194	await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')])	194	await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')])
195	this.showSkeleton = false	195	this.showSkeleton = false
196	this.showContent = true	196	this.showContent = true
197	},	197	},
198	showDrawer(e) {	198	showDrawer(e) {
199	this.$refs[e].open()	199	this.$refs[e].open()
200	},	200	},
201	// 朋友圈设置页面	201	// 朋友圈设置页面
202	onShareAppMessage() {	202	onShareAppMessage() {
203	let myName = this.$store.state.user.userInfo.nickName	203	let myName = this.$store.state.user.userInfo.nickName
204	if (myName === '' \|\| myName.length < 1 \|\| myName === '匿名用户' \|\| typeof myName === 'undefined') {	204	if (myName === '' \|\| myName.length < 1 \|\| myName === '匿名用户' \|\| typeof myName === 'undefined') {
205	myName = '【神秘人】'	205	myName = '【神秘人】'
206	} else {	206	} else {
207	myName = '【' + myName + '】'	207	myName = '【' + myName + '】'
208	}	208	}
209	return {	209	return {
210	title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)	210	title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
211	path: '/pages/index/index',	211	path: '/pages/index/index',
212	// imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4	212	// imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
213	success: function (res) {	213	success: function (res) {
214	if (res.errMsg === 'shareAppMessage:ok') {	214	if (res.errMsg === 'shareAppMessage:ok') {
215	console.log('分享成功！', res)	215	console.log('分享成功！', res)
216	}	216	}
217	},	217	},
218	fail: function (res) {	218	fail: function (res) {
219	if (res.errMsg === 'shareAppMessage:fail cancel') {	219	if (res.errMsg === 'shareAppMessage:fail cancel') {
220	console.log('fail', '放弃分享')	220	console.log('fail', '放弃分享')
221	} else if (res.errMsg === 'shareAppMessage:fail') {	221	} else if (res.errMsg === 'shareAppMessage:fail') {
222	console.log('fail', '分享失败')	222	console.log('fail', '分享失败')
223	}	223	}
224	},	224	},
225	}	225	}
226	},	226	},
227	getList() {	227	getList() {
228	store.dispatch('index/list')	228	store.dispatch('index/list')
229	this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。	229	this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。
230	// 把data里的isLoading 改为false就可以了	230	// 把data里的isLoading 改为false就可以了
231	},	231	},
232	// search(params) {	232	// search(params) {
233	// this.$store.index.	233	// this.$store.index.
234	// },	234	// },
235	closeDrawer(e) {	235	closeDrawer(e) {
236	this.$refs[e].close()	236	this.$refs[e].close()
237	},	237	},
238	change(e, type) {	238	change(e, type) {
239	this[type] = e	239	this[type] = e
240	},	240	},
241	onClickItem(e) {	241	onClickItem(e) {
242	if (this.current !== e) {	242	if (this.current !== e) {
243	this.current = e	243	this.current = e
244	}	244	}
245	},	245	},
246	dropDown() {	246	dropDown() {
247	console.log('下拉')	247	console.log('下拉')
248	},	248	},
249	searchKey(e) {	249	searchKey(e) {
250	const { value: keyword } = e.detail	250	const { value: keyword } = e.detail
251	this.keyWords = keyword	251	this.keyWords = keyword
252	store.dispatch('index/search', {	252	store.dispatch('index/search', {
253	params: {},	253	params: {},
254	keyword,	254	keyword,
255	})	255	})
256	},	256	},
257	// 接收菜单结果	257	// 接收菜单结果
258	search(e) {	258	search(e) {
259	const { on, value, selectedData } = e	259	const { on, value, selectedData } = e
260	let params = {}	260	let params = {}
261	const selectedPayload = {}	261	const selectedPayload = {}
262	for (const key in selectedData) {	262	for (const key in selectedData) {
263	if (Object.prototype.hasOwnProperty.call(selectedData, key)) {	263	if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
264	selectedPayload[key] = selectedData[key].toString()	264	selectedPayload[key] = selectedData[key].toString()
265	}	265	}
266	}	266	}
267	if (on[0] === 1) {	267	if (on[0] === 1) {
268	// 若点击全部	268	// 若点击全部
269	this.searchText = ''	269	this.searchText = ''
270	store.dispatch('index/list')	270	store.dispatch('index/list')
271	} else {	271	} else {
272	for (let i = 1; i <= on.length; i++) {	272	for (let i = 1; i <= on.length; i++) {
273	// on[0]是全部	273	// on[0]是全部
274	if (on[i] === 1) {	274	if (on[i] === 1) {
275	// 若该选项被选中	275	// 若该选项被选中
276	if (this.categoryList[i].value === 'filter') {	276	if (this.categoryList[i].value === 'filter') {
277	params = {	277	params = {
278	...selectedPayload,	278	...selectedPayload,
279	...params,	279	...params,
280	}	280	}
281	} else if (this.categoryList[i].value === 'px') {	281	} else if (this.categoryList[i].value === 'px') {
282	params.orderby = value[i][0]	282	params.orderby = value[i][0]
283	} else {	283	} else {
284	params[`${this.categoryList[i].value}`] = value[i][0]	284	params[`${this.categoryList[i].value}`] = value[i][0]
285	}	285	}
286	}	286	}
287	}	287	}
288	store.dispatch('index/search', {	288	store.dispatch('index/search', {
289	params,	289	params,
290	keyword: this.keyWords,	290	keyword: this.keyWords,
291	})	291	})
292	}	292	}
293	},	293	},
294	},	294	},
295	}	295	}
296	</script>	296	</script>
297		297
298	<style lang="scss">	298	<style lang="scss">
299	.content,	299	.content,
300	.container {	300	.container {
301	display: flex;	301	display: flex;
302	flex-direction: column;	302	flex-direction: column;
303	align-items: center;	303	align-items: center;
304	justify-content: center;	304	justify-content: center;
305	width: 100%;	305	width: 100%;
306	}	306	}
307	.header {	307	.header {
308	display: flex;	308	display: flex;
309	flex-direction: column;	309	flex-direction: column;
310	align-items: center;	310	align-items: center;
311	justify-content: center;	311	justify-content: center;
312	background-color: #f7f6f6;	312	background-color: #f7f6f6;
313	height: 178rpx;	313	height: 178rpx;
314	width: 100%;	314	width: 100%;
315	z-index: 999;	315	z-index: 999;
316	position: fixed;	316	position: fixed;
317	top: 0;	317	top: 0;
318	left: 0;	318	left: 0;
319	}	319	}
320	.searchBar {	320	.searchBar {
321	width: 670rpx;	321	width: 670rpx;
322	display: flex;	322	display: flex;
323	justify-content: center;	323	justify-content: center;
324	align-items: center;	324	align-items: center;
325	box-sizing: border-box;	325	box-sizing: border-box;
326	padding: 0rpx 16rpx;	326	padding: 0rpx 16rpx;
327	border: 1px solid #ff6b4a;	327	border: 1px solid #ff6b4a;
328	border-radius: 8rpx;	328	border-radius: 8rpx;
329	background-color: #ffffff;	329	background-color: #ffffff;
330	}	330	}
331		331
332	.searchIpt {	332	.searchIpt {
333	height: 68rpx;	333	height: 68rpx;
334	width: 670rpx;	334	width: 670rpx;
335	padding: 16rpx;	335	padding: 16rpx;
336	font-size: 28rpx;	336	font-size: 28rpx;
337	box-sizing: border-box;	337	box-sizing: border-box;
338	}	338	}
339	.screenBar {	339	.screenBar {
340	width: 670rpx;	340	width: 670rpx;
341	height: 110rpx;	341	height: 110rpx;
342	display: flex;	342	display: flex;
343	flex-direction: row;	343	flex-direction: row;
344	justify-content: space-between;	344	justify-content: space-between;
345	align-items: center;	345	align-items: center;
346	color: #333333;	346	color: #333333;
347	font-size: 32rpx;	347	font-size: 32rpx;
348	}	348	}
349	.active {	349	.active {
350	color: #ff6b4a;	350	color: #ff6b4a;
351	}	351	}
352	.screenItem {	352	.screenItem {
353	display: flex;	353	display: flex;
354	justify-content: center;	354	justify-content: center;
355	align-items: center;	355	align-items: center;
356	}	356	}
357	.content-wrap {	357	.content-wrap {
358	width: 100%;	358	width: 100%;
359	background-color: #ffffff;	359	background-color: #ffffff;
360	}	360	}
361		361
362	.HMfilterDropdown {	362	.HMfilterDropdown {
363	top: 178rpx !important;	363	top: 178rpx !important;
364	}	364	}
365		365
366	.goods-list {	366	.goods-list {
367	padding-top: 286rpx;	367	padding-top: 286rpx;
368	.loading-text {	368	.loading-text {
369	width: 100%;	369	width: 100%;
370	display: flex;	370	display: flex;
371	justify-content: center;	371	justify-content: center;
372	align-items: center;	372	align-items: center;
373	height: 30px;	373	height: 30px;
374	color: #979797;	374	color: #979797;
375	font-size: 12px;	375	font-size: 12px;
376	}	376	}
377	.product-list {	377	.product-list {
378	width: 92%;	378	width: 92%;
379	padding: 0 4% 3vw 4%;	379	padding: 0 4% 3vw 4%;
380	display: flex;	380	display: flex;
381	justify-content: space-between;	381	justify-content: space-between;
382	flex-wrap: wrap;	382	flex-wrap: wrap;
383	.product {	383	.product {
384	width: 48%;	384	width: 48%;
385	min-height: 120rpx;	385	min-height: 120rpx;
386	margin: 0 0 20rpx 0;	386	margin: 0 0 20rpx 0;
387	background: #ffffff;	387	background: #ffffff;
388	border: 1px solid #f2f2f2;	388	border: 1px solid #f2f2f2;
389	}	389	}
390	}	390	}
391	}	391	}
392	</style>	392	</style>
393		393

src/pages/myOrder/components/OrderCard.vue

Diff comments View file @e92e93f

1	<template>	1	<template>
2	<view>	2	<view>
3	<view	3	<view
4	class="card"	4	class="card"
5	v-if="current == status"	5	v-if="current == status"
6	@click="toOrderInfo(status,order.pay_id)"
7	>	6	>
8	<view class="cardHeader">	7	<view class="cardHeader">
9	<text	8	<text
10	class="orderId"	9	class="orderId"
11	v-if="status == '0'\|\|status == '1'"	10	v-if="status == '0'\|\|status == '1'"
12	>订单号：{{order.pay_id}}</text>	11	>订单号：{{order.pay_id}}</text>
13	<text	12	<text
14	class="orderId"	13	class="orderId"
15	v-if="status == '2'\|\|status == '3'"	14	v-if="status == '2'\|\|status == '3'"
16	>下单时间：{{order.pay_time}}</text>	15	>下单时间：{{order.pay_time}}</text>
17	<text	16	<text
18	class="orderType"	17	class="orderType"
19	v-if="status=='0'"	18	v-if="status=='0'"
20	>待付款</text>	19	>待付款</text>
21	<text	20	<text
22	class="orderType"	21	class="orderType"
23	v-if="status=='1'"	22	v-if="status=='1'"
24	>待收货</text>	23	>待收货</text>
25	<text	24	<text
26	class="orderType"	25	class="orderType"
27	v-if="status == '2'\|\|status == '3'"	26	v-if="status == '2'\|\|status == '3'"
28	>已完成</text>	27	>已完成</text>
29	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->	28	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
30	</view>	29	</view>
31	<view	30	<view
32	class="orderCardInfo"	31	class="orderCardInfo"
33	v-for="(orderInfo, index) in orderInfoList"	32	@click="toOrderInfo(status,order.pay_id)"
34	:key="index"	33	v-for="(orderInfo, index) in orderInfoList"
35	>	34	:key="index"
36	<image	35	>
37	:src="orderInfo.imgUrl"	36	<image
38	mode="aspectFill"	37	:src="orderInfo.imgUrl"
39	></image>	38	mode="aspectFill"
40	<view class="infoText">	39	></image>
41	<view class="orderName">{{orderInfo.p_name}}</view>	40	<view class="infoText">
42	<view class="orderDescrib">{{orderInfo.p_name}}</view>	41	<view class="orderName">{{orderInfo.p_name}}</view>
43	<view class="infoText-bottom">	42	<view class="orderDescrib">{{orderInfo.p_name}}</view>
44	<view class="markPrice">{{orderInfo.nowPrice}}</view>	43	<view class="infoText-bottom">
45	<view class="buy-num">X {{orderInfo.num}}</view>	44	<view class="markPrice">{{orderInfo.nowPrice}}</view>
46	</view>	45	<view class="buy-num">X {{orderInfo.num}}</view>
47	</view>	46	</view>
48	</view>	47	</view>
49	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>	48	</view>
50	<!-- 0待付款 1 已付款待收货 2 已收货待评价 3 已评价 -->	49	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
51	<view	50	<!-- 0待付款 1 已付款待收货 2 已收货待评价 3 已评价 -->
52	class="btns"	51	<view
53	v-if="status == '0'"	52	class="btns"
54	>	53	v-if="status == '0'"
55	<view class="btn-type1">取消订单</view>	54	>
56	<view class="btn-type2">去支付</view>	55	<view
57	</view>	56	class="btn-type1"
		57	@click="cancleOrder"
		58	>取消订单</view>
		59	<view
		60	class="btn-type2"
		61	@click="paylog"
		62	>去支付</view>
58	<view	63	</view>
59	class="btns"	64	<view
60	v-if="status == '1'"	65	class="btns"
61	>	66	v-if="status == '1'"
62	<view class="btn-type2">确认收货</view>	67	>
63	</view>	68	<view class="btn-type2">确认收货</view>
64	<view	69	</view>
65	class="btns"	70	<view
66	v-if="status == '2'"	71	class="btns"
67	>	72	v-if="status == '2'"
68	<view	73	>
69	class="btn-type2"	74	<view
		75	class="btn-type2"
		76	@click="toDetail(order.order_info[0].pid)"
		77	>再次购买</view>
		78	</view>
		79	<!-- <view class="btns" v-if="status == '3'">
		80	<view class="btn-type2">再次购买</view>
		81	</view> -->
		82	</view>
		83	<view
		84	class="card"
		85	v-if="current == '10'"
		86	>
		87	<view class="cardHeader">
		88	<text
		89	class="orderId"
		90	v-if="status == '0'\|\|status == '1'"
		91	>订单号：{{order.pay_id}}</text>
		92	<text
		93	class="orderId"
		94	v-if="status == '2'\|\|status == '3'"
		95	>下单时间：{{order.pay_time}}</text>
		96	<text
		97	class="orderType"
		98	v-if="status=='0'"
		99	>待付款</text>
		100	<text
		101	class="orderType"
		102	v-if="status=='1'"
		103	>待收货</text>
		104	<text
		105	class="orderType"
		106	v-if="status == '2'\|\|status == '3'"
		107	>已完成</text>
		108	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
		109	</view>
		110	<view
		111	class="orderCardInfo"
		112	@click="toOrderInfo(status,order.pay_id)"
		113	v-for="(orderInfo) in orderInfoList"
		114	:key="orderInfo"
		115	>
		116	<image
		117	:src="orderInfo.imgUrl"
		118	mode="aspectFill"
		119	></image>
		120	<view class="infoText">
		121	<view class="orderName">{{orderInfo.p_name}}</view>
		122	<view class="orderDescrib">{{orderInfo.p_name}}</view>
		123	<view class="infoText-bottom">
		124	<view class="markPrice">{{orderInfo.nowPrice}}</view>
		125	<view class="buy-num">X {{orderInfo.num}}</view>
		126	</view>
		127	</view>
		128	</view>
		129	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
		130	<view
		131	class="btns"
		132	v-if="status == '0'"
		133	>
		134	<view
		135	class="btn-type1"
		136	@click="cancleOrder"
		137	>取消订单</view>
		138	<view
		139	class="btn-type2"
		140	@click="paylog"
		141	>去支付</view>
		142	</view>
		143	<view
		144	class="btns"
		145	v-if="status == '1'"
		146	>
		147	<view class="btn-type2">确认收货</view>
		148	</view>
		149	<view
		150	class="btns"
		151	v-if="status == '2'\|\|status == '3'"
		152	>
		153	<view
		154	class="btn-type2"
		155	@click="toDetail(order.order_info[0].pid)"
		156	>再次购买</view>
70	@click="toDetail"	157	</view>
71	>再次购买</view>
72	</view>
73	<!-- <view class="btns" v-if="status == '3'">
74	<view class="btn-type2">再次购买</view>
75	</view> -->
76	</view>
77	<view
78	class="card"
79	v-if="current == '10'"
80	@click="toOrderInfo(status,order.pay_id)"
81	>
82	<view class="cardHeader">
83	<text
84	class="orderId"
85	v-if="status == '0'\|\|status == '1'"
86	>订单号：{{order.pay_id}}</text>
87	<text
88	class="orderId"
89	v-if="status == '2'\|\|status == '3'"
90	>下单时间：{{order.pay_time}}</text>
91	<text
92	class="orderType"
93	v-if="status=='0'"
94	>待付款</text>
95	<text
96	class="orderType"
97	v-if="status=='1'"
98	>待收货</text>
99	<text
100	class="orderType"
101	v-if="status == '2'\|\|status == '3'"
102	>已完成</text>
103	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
104	</view>
105	<view
106	class="orderCardInfo"	158	</view>
107	v-for="(orderInfo) in orderInfoList"	159	</view>
108	:key="orderInfo"	160	</template>
109	>	161
110	<image	162	<script>
111	:src="orderInfo.imgUrl"	163	import MD5Util from '../../../utils/md5'
112	mode="aspectFill"	164	import store from '@/store'
113	></image>	165	export default {
114	<view class="infoText">	166	data() {
115	<view class="orderName">{{orderInfo.p_name}}</view>	167	return {
116	<view class="orderDescrib">{{orderInfo.p_name}}</view>	168
117	<view class="infoText-bottom">	169	}
118	<view class="markPrice">{{orderInfo.nowPrice}}</view>	170	},
119	<view class="buy-num">X {{orderInfo.num}}</view>	171	props: {
120	</view>	172	/**
121	</view>	173	* 订单数据
122	</view>	174	*/
123	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>	175	order: {},
124	<view	176	/**
125	class="btns"	177	* 当前选择
126	v-if="status == '0'"	178	*/
127	>	179	current: Number,
128	<view class="btn-type1">取消订单</view>	180
129	<view class="btn-type2">去支付</view>	181	},
130	</view>	182	created() {
131	<view	183	console.log('order', this.order)
132	class="btns"	184	// console.log(this.order.status );
133	v-if="status == '1'"	185	// console.log(this.current);
134	>	186	},
135	<view class="btn-type2">确认收货</view>	187	computed: {
136	</view>	188	status() {
137	<view	189	return this.order.status
138	class="btns"	190	},
139	v-if="status == '2'\|\|status == '3'"	191	orderInfoList() {
140	>	192	const orderInfoList = this.order.order_info
141	<view	193	return Array.isArray(orderInfoList) ? orderInfoList : orderInfoList.data
142	class="btn-type2"	194	},
143	@click="toDetail(order.order_info[0].pid)"	195	},
144	>再次购买</view>	196	methods: {
145	</view>	197	async paylog() {
146	<!-- <view class="btns" v-if="status == '3'">	198	const openid = uni.getStorageSync('openid')
147		199	const uid = this.order.uid
148	<view class="btn-type2">再次购买</view>	200	// 先拿订单详情
149	</view> -->	201	await store.dispatch('orderRead/getOrderInfo', {
150	</view>	202	pay_id: this.order.pay_id,
151	</view>	203	uid: uid,
152	</template>	204	openid: openid,
153		205	}).then((res) => {
154	<script>	206	// console.log(res)
155	export default {	207	const { data, exKeyName: keyName } = res.order_info
156	props: {	208	const timeStamp = new Date().getTime().toString()
157	/**	209	const total_fee = res.total_fee
158	* 订单数据	210	const payId = res.pay_id
159	*/	211	const nonceStr = 'asfafasfasfasfasf'
160	order: {},	212	// 支付参数
161	/**	213	const fieldSet = {
162	* 当前选择	214	openid: openid,
163	*/	215	uid: uid,
164	current: Number,	216	shopid: 0,
165		217	payCate: 2020,
166	},	218	payMoney: total_fee,
167	created() {	219	payWoodId: `fcdj-${uid}-${keyName}`,
168	console.log('order', this.order)	220	payWoodDesc: '在【非常戴镜】的微信付款凭证',
169	// console.log(this.order.status );	221	nonceStr,
170	// console.log(this.current);	222	signType: 'MD5',
171	},	223	app_uid: 2020,
172	computed: {	224	timeStamp,
173	status() {	225	keyname: keyName,
174	return this.order.status	226	billInfo: JSON.stringify(data),
175	},	227	}
176	orderInfoList() {	228	// 请求后台支付接口
177	const orderInfoList = this.order.order_info	229	store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
178	return Array.isArray(orderInfoList) ? orderInfoList : orderInfoList.data	230	if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
179	},	231	const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
180	},	232	const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
181	data() {	233
182	return {	234	// 微信支付接口
183	}	235	uni.requestPayment({
184	},	236	appId: data.appid,
185	methods: {	237	timeStamp,
186	toDetail(pid) {	238	nonceStr,
187	console.log('pid', pid)	239	total_fee: total_fee,
188	uni.navigateTo({	240	package: `prepay_id=${data.prepay_id}`,
189	url: '../details/details?pid=' + pid,	241	signType: 'MD5',
190	fail: (res) => { console.log(res) },	242	paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
191	})	243	success: (res) => {
192	},	244	// 支付成功
193	toRefundment() {	245	uni.showModal({
194	uni.navigateTo({	246	content: '支付成功',
195	url: '../refundment/refundment',	247	showCancel: false,
196	success: res => {},	248	})
197	fail: () => {},	249	// //修改订单状态待付款==>待收货
198	complete: () => {},	250	// store.dispatch("statusConfirm/confirm", {
199	})	251	// uid: this.uid,
200	},	252	// openid: this.openid,
201	toOrderInfo(status, payId) {	253	// oldway: "0",
202	console.log(status, payId)	254	// way: "1",
203	switch (status) {	255	// pay_id: payId,
204	// 0待付款 1待收货 2已收货 3 已评价	256	// judgeContent: "",
205	case '0':	257	// orderInfo: this.orderInfo.order_info
206	uni.navigateTo({	258	// })
207	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,	259	},
208	fail(errMsg) {	260	fail: (res) => {
209	console.log(errMsg)	261	// 支付失败
210	},	262	uni.showModal({
211	})	263	content: '支付失败',
212	break	264	showCancel: false,
213	case '1':	265	})
214	uni.navigateTo({	266	},
215	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,	267	complete: () => {
216	fail(errMsg) {	268	uni.hideLoading()
217	console.log(errMsg)	269	},
218	},	270	})
219	})	271	} else {
220		272	uni.showModal({
221	break	273	content: '支付失败',
222	case '2 \|\| 3':	274	showCancel: false,
223	uni.navigateTo({	275	})
224	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,	276	console.log('支付失败')
225	fail(errMsg) {	277	uni.hideLoading()
226	console.log(errMsg)	278	}
227	},	279	})
228	})	280	// 修改订单状态待付款==>待收货
229	break	281	// store.dispatch("statusConfirm/confirm", {
230	default:	282	// uid: this.uid,
231	break	283	// openid: this.openid,
232	}	284	// oldway: "0",
233	},	285	// way: "1",
234	},	286	// pay_id: this.payId,
235	}	287	// judgeContent: "",
236		288	// orderInfo: this.orderInfo.order_info
237	</script>	289	// })
238		290	})
239	<style lang="scss">	291	},
240	.card {	292
241	width: 670rpx;	293	async cancleOrder(e) {
242	height: 478rpx;	294	const openid = uni.getStorageSync('openid')
243	background: #ffffff;	295	const uid = this.order.uid
244	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);	296	// 先从订单详情中拿到keyname
245	border-radius: 8px;	297	await store.dispatch('orderRead/getOrderInfo', {
246	border-radius: 8px;	298	pay_id: this.order.pay_id,
247	margin-top: 20rpx;	299	uid: uid,
248	padding: 40rpx;	300	openid: openid,
249	box-sizing: border-box;	301	}).then((res) => {
250	.cardHeader {	302	const keyname = res.order_info.keyname
251	width: 100%;	303	uni.showModal({
252	height: 40rpx;	304	title: '提示',
253	display: flex;	305	content: '现在取消，订单不可恢复哦，确认取消吗？',
254	justify-content: space-between;	306	success: function(res) {
255	align-items: center;	307	if (res.confirm) {
256	.orderId {	308	store.dispatch('cancelOrder/cancel', {
257	font-size: 12px;	309	keyname: keyname,
258	color: #999999;	310	uid: uid,
259	}	311	openid: openid,
260	.orderType {	312	}).then((res) => {
261	font-size: 14px;	313	console.log(res)
262	color: #ff6b4a;	314	if (res.code == 1) {
263	}	315	store.dispatch('myOrder/getList', {
264	}	316	way: '',
265	.orderCardInfo {	317	})
266	width: 100%;	318	} else {
267	height: 188rpx;	319	uni.showToast({
268	display: flex;	320	title: '取消失败，服务器错误!',
269	flex-direction: row;	321	icon: 'none',
270	justify-content: space-between;	322	})
271	align-items: center;	323	}
272	margin-top: 40rpx;	324	})
273	image {	325	} else if (res.cancel) {
274	height: 188rpx;	326	console.log('用户点击取消')
275	width: 188rpx;	327	}
276	margin-right: 24rpx;	328	},
277	}	329	})
278	.infoText {	330	})
279	display: flex;	331	},
280	flex-direction: column;	332	toDetail(pid) {
281	justify-content: space-between;	333	console.log('pid', pid)
282	align-items: flex-start;	334	uni.navigateTo({
283	height: 188rpx;	335	url: '../details/details?pid=' + pid,
284	width: 368rpx;	336	fail: (res) => { console.log(res) },
285	}	337	})
286	.orderName {	338	},
287	font-size: 14px;	339	toRefundment() {
288	color: #333333;	340	uni.navigateTo({
289	display: -webkit-box;	341	url: '../refundment/refundment',
290	overflow: hidden;	342	success: res => {},
291	-webkit-box-orient: vertical;	343	fail: () => {},
292	-webkit-line-clamp: 2;	344	complete: () => {},
293	}	345	})
294	.orderDescrib {	346	},
295	font-size: 12px;	347	toOrderInfo(status, payId) {
296	color: #999999;	348	console.log(status, payId)
297	display: -webkit-box;	349	switch (status) {
298	overflow: hidden;	350	// 0待付款 1待收货 2已收货 3 已评价
299	-webkit-box-orient: vertical;	351	case '0':
300	-webkit-line-clamp: 2;	352	uni.navigateTo({
301	}	353	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
302	.infoText-bottom {	354	fail(errMsg) {
303	display: flex;	355	console.log(errMsg)
304	flex-direction: row;	356	},
305	justify-content: flex-start;	357	})
306	align-items: center;	358	break
307	width: 100%;	359	case '1':
308	.markPrice {	360	uni.navigateTo({
309	font-size: 14px;	361	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
310	color: #ff6b4a;	362	fail(errMsg) {
311	margin-right: 20rpx;	363	console.log(errMsg)
312	}	364	},
313	.buy-num {	365	})
314	font-size: 12px;	366
315	color: #999999;	367	break
316	}	368	case '2' \|\| '3':
317	}	369	uni.navigateTo({
318	}	370	url: '../myOrderPaying/myOrderPaying?status=' + status + '&payId=' + payId,
319	.payPrice {	371	fail(errMsg) {
320	text-align: right;	372	console.log(errMsg)
321	margin: 20rpx 0;	373	},
322	font-size: 14px;	374	})
323	color: #333333;	375	break
324	.priceNum {	376	default:
325	font-size: 14px;	377	break
326	color: #ff6b4a;	378	}
327	}	379	},
328	}	380	},
329	.btns {	381	}
330	display: flex;
331	justify-content: flex-end;	382
332	align-items: center;	383	</script>
333	.btn-type1 {	384
334	height: 48rpx;	385	<style lang="scss">
335	width: 156rpx;	386	.card {
336	border: 1px solid #ff6b4a;	387	width: 670rpx;
337	border-radius: 12px;	388	// height: 478rpx;
338	border-radius: 12px;	389	background: #ffffff;
339	text-align: center;	390	box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
340	line-height: 48rpx;	391	border-radius: 8px;
341	font-size: 12px;	392	border-radius: 8px;
342	color: #ff6b4a;	393	margin-top: 20rpx;
343	}	394	padding: 40rpx;
344	.btn-type2 {	395	box-sizing: border-box;
345	height: 48rpx;	396	.cardHeader {
346	width: 140rpx;	397	width: 100%;
347	background: #ff6b4a;	398	height: 40rpx;
348	border-radius: 12px;	399	display: flex;
349	border-radius: 12px;	400	justify-content: space-between;
350	text-align: center;	401	align-items: center;
351	line-height: 48rpx;	402	.orderId {
352	font-size: 12px;	403	font-size: 12px;
353	color: #ffffff;	404	color: #999999;
354	margin-left: 20rpx;	405	}
355	}	406	.orderType {
356	}	407	font-size: 14px;
357	}	408	color: #ff6b4a;
358	</style>	409	}
359		410	}
		411	.orderCardInfo {
		412	width: 100%;
		413	height: 188rpx;
		414	display: flex;
		415	flex-direction: row;
		416	justify-content: space-between;
		417	align-items: center;
		418	margin-top: 40rpx;
		419	image {
		420	height: 188rpx;
		421	width: 188rpx;
		422	margin-right: 24rpx;
		423	}
		424	.infoText {
		425	display: flex;
		426	flex-direction: column;
		427	justify-content: space-between;
		428	align-items: flex-start;
		429	height: 188rpx;
		430	width: 368rpx;
		431	}
		432	.orderName {
		433	font-size: 14px;
		434	color: #333333;
		435	display: -webkit-box;
		436	overflow: hidden;
		437	-webkit-box-orient: vertical;
		438	-webkit-line-clamp: 2;
		439	}
		440	.orderDescrib {
		441	font-size: 12px;
		442	color: #999999;
		443	display: -webkit-box;
		444	overflow: hidden;
		445	-webkit-box-orient: vertical;
		446	-webkit-line-clamp: 2;
		447	}
		448	.infoText-bottom {
		449	display: flex;
		450	flex-direction: row;
		451	justify-content: flex-start;
		452	align-items: center;
		453	width: 100%;
		454	.markPrice {
		455	font-size: 14px;
		456	color: #ff6b4a;
		457	margin-right: 20rpx;
		458	}
		459	.buy-num {
		460	font-size: 12px;
		461	color: #999999;
		462	}
		463	}
		464	}
		465	.payPrice {
		466	text-align: right;
		467	margin: 20rpx 0;
		468	font-size: 14px;

src/store/modules/index.js

Diff comments View file @e92e93f

1	import urlAlias from '../url'	1	import urlAlias from '../url'
2	import request from '../request'	2	import request from '../request'
3		3
4	const {	4	const {
5	category,	5	category,
6	shopList,	6	shopList,
7	search,	7	search,
8	} = urlAlias	8	} = urlAlias
9		9
10	const initData = {	10	const initData = {
11	name: '志平防蓝光-防辐射电脑网课眼镜',	11	name: '志平防蓝光-防辐射电脑网课眼镜',
12	id: '9',	12	id: '9',
13	imgurl: '',	13	imgurl: '',
14	price: 0,	14	price: 0,
		15	trade_num: '102',
		16	rsSon: {
		17	pic: '9_FDB33D.jpg',
		18	model_pic: null,
		19	in_price: '6000',
		20	sku_value: '80_83',
		21	discount: '45',
		22	kc: '0',
		23	sku_name: '1.56非球面防蓝光_黑透+蓝纹',
		24	Max_Price: 158,
		25	Min_Price: 99,
		26	},
		27	}
		28	var initArr = [1, 2, 3, 4, 5, 6, 7, 8]
		29	const list = []
15	trade_num: '102',	30	initArr.forEach(function (value) {
16	rsSon: {	31	list.push(initData)
17	pic: '9_FDB33D.jpg',	32	})
18	model_pic: null,	33
19	in_price: '6000',	34	// let categoryList = [
20	sku_value: '80_83',	35	// {
21	discount: '45',	36	// "type": "checkbox",
22	kc: '0',	37	// "name": "产品",
23	sku_name: '1.56非球面防蓝光_黑透+蓝纹',	38	// "value": "category",
24	Max_Price: 158,	39	// "submenu": [
25	Min_Price: 99,	40	// {
26	},	41	// "label": "镜框",
27	}	42	// "name": "镜框",
28	var initArr = [1, 2, 3, 4, 5, 6, 7, 8]	43	// "value": "1"
29	const list = []	44	// },
30	initArr.forEach(function (value) {	45	// {
31	list.push(initData)	46	// "label": "镜片",
32	})	47	// "name": "镜片",
33		48	// "value": "2"
34	// let categoryList = [	49	// },
35	// {	50	// {
36	// "type": "checkbox",	51	// "label": "特种镜",
37	// "name": "产品",	52	// "name": "特种镜",
38	// "value": "category",	53	// "value": "146"
39	// "submenu": [	54	// }
40	// {	55	// ],
41	// "label": "镜框",	56	// "groups": [
42	// "name": "镜框",	57	// "001"
43	// "value": "1"	58	// ]
44	// },	59	// },
45	// {	60	// {
46	// "label": "镜片",	61	// "type": "radio",
47	// "name": "镜片",	62	// "name": "规则",
48	// "value": "2"	63	// "value": "px",
49	// },	64	// "submenu": [
50	// {	65	// {
51	// "label": "特种镜",	66	// "name": "按价格排",
52	// "name": "特种镜",	67	// "value": "1"
53	// "value": "146"	68	// },
54	// }	69	// {
55	// ],	70	// "name": "按销量排",
56	// "groups": [	71	// "value": "2"
57	// "001"	72	// }
58	// ]	73	// ],
59	// },	74	// "groups": [
60	// {	75	// "002"
61	// "type": "radio",	76	// ]
62	// "name": "规则",	77	// },
63	// "value": "px",	78	// {
64	// "submenu": [	79	// "type": "radio",
65	// {	80	// "name": "排序",
66	// "name": "按价格排",	81	// "value": "sort",
67	// "value": "1"	82	// "submenu": [
68	// },	83	// {
69	// {	84	// "name": "从高到低",
70	// "name": "按销量排",	85	// "value": "1"
71	// "value": "2"	86	// },
72	// }	87	// {
73	// ],	88	// "name": "从低到高",
74	// "groups": [	89	// "value": "2"
75	// "002"	90	// }
76	// ]	91	// ],
77	// },	92	// "groups": [
78	// {	93	// "003"
79	// "type": "radio",	94	// ]
80	// "name": "排序",	95	// },
81	// "value": "sort",	96	// {
82	// "submenu": [	97	// "type": "filter",
83	// {	98	// "name": "筛选",
84	// "name": "从高到低",	99	// "value": "filter",
85	// "value": "1"	100	// "submenu": [
86	// },	101	// {
87	// {	102	// "type": "checkbox",
88	// "name": "从低到高",	103	// "name": "性别",
89	// "value": "2"	104	// "value": "sex",
90	// }	105	// "submenu": [
91	// ],	106	// {
92	// "groups": [	107	// "label": "男性",
93	// "003"	108	// "name": "男性",
94	// ]	109	// "value": "27"
95	// },	110	// },
96	// {	111	// {
97	// "type": "filter",	112	// "label": "女性",
98	// "name": "筛选",	113	// "name": "女性",
99	// "value": "filter",	114	// "value": "28"
100	// "submenu": [	115	// }
101	// {	116	// ]
102	// "type": "checkbox",	117	// },
103	// "name": "性别",	118	// {
104	// "value": "sex",	119	// "type": "checkbox",
105	// "submenu": [	120	// "name": "年龄",
106	// {	121	// "value": "age",
107	// "label": "男性",	122	// "submenu": [
108	// "name": "男性",	123	// {
109	// "value": "27"	124	// "label": "通用",
110	// },	125	// "name": "通用",
111	// {	126	// "value": "24"
112	// "label": "女性",	127	// }
113	// "name": "女性",	128	// ]
114	// "value": "28"	129	// },
115	// }	130	// {
116	// ]	131	// "type": "checkbox",
117	// },	132	// "name": "适用场景",
118	// {	133	// "value": "sense",
119	// "type": "checkbox",	134	// "submenu": [
120	// "name": "年龄",	135	// {
121	// "value": "age",	136	// "label": "行政风",
122	// "submenu": [	137	// "name": "行政风",
123	// {	138	// "value": "53"
124	// "label": "通用",	139	// },
125	// "name": "通用",	140	// {
126	// "value": "24"	141	// "label": "青春学子风",
127	// }	142	// "name": "青春学子风",
128	// ]	143	// "value": "54"
129	// },	144	// },
130	// {	145	// {
131	// "type": "checkbox",	146	// "label": "运动风",
132	// "name": "适用场景",	147	// "name": "运动风",
133	// "value": "sense",	148	// "value": "55"
134	// "submenu": [	149	// },
135	// {	150	// {
136	// "label": "行政风",	151	// "label": "简约-极简文艺范",
137	// "name": "行政风",	152	// "name": "简约-极简文艺范",
138	// "value": "53"	153	// "value": "56"
139	// },	154	// },
140	// {	155	// {
141	// "label": "青春学子风",	156	// "label": "奶奶风",
142	// "name": "青春学子风",	157	// "name": "奶奶风",
143	// "value": "54"	158	// "value": "57"
144	// },	159	// },
145	// {	160	// {
146	// "label": "运动风",	161	// "label": "流线洛可可",
147	// "name": "运动风",	162	// "name": "流线洛可可",
148	// "value": "55"	163	// "value": "58"
149	// },	164	// },
150	// {	165	// {
151	// "label": "简约-极简文艺范",	166	// "label": "自然舒视角",
152	// "name": "简约-极简文艺范",	167	// "name": "自然舒视角",
153	// "value": "56"	168	// "value": "59"
154	// },	169	// },
155	// {	170	// {
156	// "label": "奶奶风",	171	// "label": "无界人文系",
157	// "name": "奶奶风",	172	// "name": "无界人文系",
158	// "value": "57"	173	// "value": "60"
159	// },	174	// },
160	// {	175	// {
161	// "label": "流线洛可可",	176	// "label": "有机未来时",
162	// "name": "流线洛可可",	177	// "name": "有机未来时",
163	// "value": "58"	178	// "value": "61"
164	// },	179	// },
165	// {	180	// {
166	// "label": "自然舒视角",	181	// "label": "立体巴洛克",
167	// "name": "自然舒视角",	182	// "name": "立体巴洛克",
168	// "value": "59"	183	// "value": "62"
169	// },	184	// },
170	// {	185	// {
171	// "label": "无界人文系",	186	// "label": "多元新风尚",
172	// "name": "无界人文系",	187	// "name": "多元新风尚",
173	// "value": "60"	188	// "value": "63"
174	// },	189	// },
175	// {	190	// {
176	// "label": "有机未来时",	191	// "label": "理性几何派",
177	// "name": "有机未来时",	192	// "name": "理性几何派",
178	// "value": "61"	193	// "value": "64"
179	// },	194	// },
180	// {	195	// {
181	// "label": "立体巴洛克",	196	// "label": "轻简北欧风",
182	// "name": "立体巴洛克",	197	// "name": "轻简北欧风",
183	// "value": "62"	198	// "value": "65"
184	// },	199	// },
185	// {	200	// {
186	// "label": "多元新风尚",	201	// "label": "质感哥特潮",
187	// "name": "多元新风尚",	202	// "name": "质感哥特潮",
188	// "value": "63"	203	// "value": "66"
189	// },	204	// },
190	// {	205	// {
191	// "label": "理性几何派",	206	// "label": "时尚",
192	// "name": "理性几何派",	207	// "name": "时尚",
193	// "value": "64"	208	// "value": "67"
194	// },	209	// },
195	// {	210	// {
196	// "label": "轻简北欧风",	211	// "label": "复古",
197	// "name": "轻简北欧风",	212	// "name": "复古",
198	// "value": "65"	213	// "value": "68"
199	// },	214	// },
200	// {	215	// {
201	// "label": "质感哥特潮",	216	// "label": "商务",
202	// "name": "质感哥特潮",	217	// "name": "商务",
203	// "value": "66"	218	// "value": "69"
204	// },	219	// },
205	// {	220	// {
206	// "label": "时尚",	221	// "label": "休闲",
207	// "name": "时尚",	222	// "name": "休闲",
208	// "value": "67"	223	// "value": "70"
209	// },	224	// },
210	// {	225	// {
211	// "label": "复古",	226	// "label": "折射率",
212	// "name": "复古",	227	// "name": "折射率",
213	// "value": "68"	228	// "value": "285"
214	// },	229	// }
215	// {	230	// ]
216	// "label": "商务",	231	// },
217	// "name": "商务",	232	// {
218	// "value": "69"	233	// "type": "checkbox",
219	// },	234	// "name": "价格",
220	// {	235	// "value": "price",
221	// "label": "休闲",	236	// "submenu": [
222	// "name": "休闲",	237	// {
223	// "value": "70"	238	// "name": "100以下",
224	// },	239	// "value": "1,100"
225	// {	240	// },
226	// "label": "折射率",	241	// {
227	// "name": "折射率",	242	// "name": "100-300",
228	// "value": "285"	243	// "value": "100,300"
229	// }	244	// },
230	// ]	245	// {
231	// },	246	// "name": "300-1000",
232	// {	247	// "value": "300,1000"
233	// "type": "checkbox",	248	// },
234	// "name": "价格",	249	// {
235	// "value": "price",	250	// "name": "1000以上",
236	// "submenu": [	251	// "value": "1000,-1"
237	// {	252	// }
238	// "name": "100以下",	253	// ]
239	// "value": "1,100"	254	// },
240	// },	255	// {
241	// {	256	// "type": "checkbox",
242	// "name": "100-300",	257	// "name": "材质",
243	// "value": "100,300"	258	// "value": "glasscate",
244	// },	259	// "submenu": [
245	// {	260	// {
246	// "name": "300-1000",	261	// "label": "购易",
247	// "value": "300,1000"	262	// "name": "购易",
248	// },	263	// "value": "72"
249	// {	264	// },
250	// "name": "1000以上",	265	// {
251	// "value": "1000,-1"	266	// "label": "海俪恩",
252	// }	267	// "name": "海俪恩",
253	// ]	268	// "value": "73"
254	// },	269	// },
255	// {	270	// {
256	// "type": "checkbox",	271	// "label": "沙漠风暴",
257	// "name": "材质",	272	// "name": "沙漠风暴",
258	// "value": "glasscate",	273	// "value": "74"
259	// "submenu": [	274	// },
260	// {	275	// {
261	// "label": "购易",	276	// "label": "古诗",
262	// "name": "购易",	277	// "name": "古诗",
263	// "value": "72"	278	// "value": "75"
264	// },	279	// },
265	// {	280	// {
266	// "label": "海俪恩",	281	// "label": "暴龙",
267	// "name": "海俪恩",	282	// "name": "暴龙",
268	// "value": "73"	283	// "value": "76"
269	// },	284	// },
270	// {	285	// {
271	// "label": "沙漠风暴",	286	// "label": "犀牛",
272	// "name": "沙漠风暴",	287	// "name": "犀牛",
273	// "value": "74"	288	// "value": "77"
274	// },	289	// },
275	// {	290	// {
276	// "label": "古诗",	291	// "label": "Ray-Ban雷朋",
277	// "name": "古诗",	292	// "name": "Ray-Ban雷朋",
278	// "value": "75"	293	// "value": "78"
279	// },	294	// },
280	// {	295	// {
281	// "label": "暴龙",	296	// "label": "PARIM派丽蒙",
282	// "name": "暴龙",	297	// "name": "PARIM派丽蒙",
283	// "value": "76"	298	// "value": "79"
284	// },	299	// },
285	// {	300	// {
286	// "label": "犀牛",	301	// "label": "石狼",
287	// "name": "犀牛",	302	// "name": "石狼",
288	// "value": "77"	303	// "value": "80"
289	// },	304	// },
290	// {	305	// {
291	// "label": "Ray-Ban雷朋",	306	// "label": "木九十",
292	// "name": "Ray-Ban雷朋",	307	// "name": "木九十",
293	// "value": "78"	308	// "value": "81"
294	// },	309	// }
295	// {	310	// ]
296	// "label": "PARIM派丽蒙",	311	// },
297	// "name": "PARIM派丽蒙",	312	// {
298	// "value": "79"	313	// "type": "checkbox",
299	// },	314	// "name": "品牌",
300	// {	315	// "value": "brand",
301	// "label": "石狼",	316	// "submenu": [
302	// "name": "石狼",	317	// {
303	// "value": "80"	318	// "label": "购易",
304	// },	319	// "name": "购易",
305	// {	320	// "value": "72"
306	// "label": "木九十",	321	// },
307	// "name": "木九十",	322	// {
308	// "value": "81"	323	// "label": "海俪恩",
309	// }	324	// "name": "海俪恩",
310	// ]	325	// "value": "73"
311	// },	326	// },
312	// {	327	// {
313	// "type": "checkbox",	328	// "label": "沙漠风暴",
314	// "name": "品牌",	329	// "name": "沙漠风暴",
315	// "value": "brand",	330	// "value": "74"
316	// "submenu": [	331	// },
317	// {	332	// {
318	// "label": "购易",	333	// "label": "古诗",
319	// "name": "购易",	334	// "name": "古诗",
320	// "value": "72"	335	// "value": "75"
321	// },	336	// },
322	// {	337	// {
323	// "label": "海俪恩",	338	// "label": "暴龙",
324	// "name": "海俪恩",	339	// "name": "暴龙",
325	// "value": "73"	340	// "value": "76"
326	// },	341	// },
327	// {	342	// {
328	// "label": "沙漠风暴",	343	// "label": "犀牛",
329	// "name": "沙漠风暴",	344	// "name": "犀牛",
330	// "value": "74"	345	// "value": "77"
331	// },	346	// },
332	// {	347	// {
333	// "label": "古诗",	348	// "label": "Ray-Ban雷朋",
334	// "name": "古诗",	349	// "name": "Ray-Ban雷朋",
335	// "value": "75"	350	// "value": "78"
336	// },	351	// },
337	// {	352	// {
338	// "label": "暴龙",	353	// "label": "PARIM派丽蒙",
339	// "name": "暴龙",	354	// "name": "PARIM派丽蒙",
340	// "value": "76"	355	// "value": "79"
341	// },	356	// },
342	// {	357	// {
343	// "label": "犀牛",	358	// "label": "石狼",
344	// "name": "犀牛",	359	// "name": "石狼",
345	// "value": "77"	360	// "value": "80"
346	// },	361	// },
347	// {	362	// {
348	// "label": "Ray-Ban雷朋",	363	// "label": "木九十",
349	// "name": "Ray-Ban雷朋",	364	// "name": "木九十",
350	// "value": "78"	365	// "value": "81"
351	// },	366	// }
352	// {	367	// ]
353	// "label": "PARIM派丽蒙",	368	// }
354	// "name": "PARIM派丽蒙",	369	// ],
355	// "value": "79"	370	// "groups": [
356	// },	371	// "001",
357	// {	372	// "002",
358	// "label": "石狼",	373	// "003"
359	// "name": "石狼",	374	// ],
360	// "value": "80"	375	// }
361	// },	376	// ]
362	// {	377
363	// "label": "木九十",	378	// 初始化数据是为了显示默认骨架
364	// "name": "木九十",	379	const state = {
365	// "value": "81"	380	categoryList: [],
366	// }	381	list: list,
367	// ]	382	}
368	// }
369	// ],
370	// "groups": [
371	// "001",
372	// "002",
373	// "003"
374	// ],
375	// }
376	// ]
377		383
378	// 初始化数据是为了显示默认骨架	384	const mutations = {
379	const state = {	385	LIST: (state, list) => {
380	categoryList: [],	386	state.list = list
381	list: list,	387	},
382	}	388	CATEGORY: (state, categoryList) => {
383		389	state.categoryList = categoryList
384	const mutations = {	390	},
385	LIST: (state, list) => {	391	}
386	state.list = list
387	},
388	CATEGORY: (state, categoryList) => {
389	state.categoryList = categoryList
390	},
391	}
392
393	const actions = {
394	category({
395	commit,
396	}, param) {
397	return new Promise((resolve) => request({
398	url: category,
399	success: (res) => {
400	const data = res.data.data
401	for (let i = 0; i <= data.length; i++) {
402	if (data[i] && data[i].type !== 'filter') {
403	data[i].type = 'hierarchy'
404	}
405	}
406	data.unshift({
407	type: 'hierarchy',
408	name: '全部',
409	value: 'all',
410	isNoPull: true,
411	})
412	commit('CATEGORY', data)
413	resolve(data)
414	},
415	fail: (res) => {
416	console.log('fail status === > ', res)
417	},
418	}))
419	},
420	list({
421	commit,
422	}, param) {
423	return new Promise((resolve) => request({
424	url: shopList,
425	success: (res) => {
426	commit('LIST', res.data.data)
427	resolve(res.data)
428	},
429	fail: (res) => {
430	console.log('fail status === > ', res)
431	},
432	complete: (res) => {
433	state.isLoading = false
434	},
435	}))
436	},
437	search({
438	commit,
439	}, {
440	params,
441	keyword,
442	}) {
443	const uid = uni.getStorageSync('uid')
444	return new Promise((resolve) => request({
445	url: search,
446	data: {
447	params: JSON.stringify(params),
448	uid,
449	way: JSON.stringify(params) === '{}' ? 0 : 1,	392
450	keyword,
451	},
452	success: (res) => {
453	commit('LIST', res.data.data)
454	resolve(res.data)

src/store/request.js

Diff comments View file @e92e93f

1	const DOMAIN = 'https://api.glass.xiuyetang.com'	1	const DOMAIN = 'https://api.glass.xiuyetang.com'
2		2
		3	let loading = false
		4
3	let loading = false	5	export default async function request({
4		6	url,
5	export default async function request({	7	method = 'post',
6	url,	8	data = {},
7	method = 'post',	9	header = {
8	data = {},	10	'Content-Type': 'application/x-www-form-urlencoded',
9	header = {	11	},
10	'Content-Type': 'application/x-www-form-urlencoded',	12	timeout = 3000,
11	},	13	withCredentials = false, // 跨域请求时是否携带凭证（cookies）
12	timeout = 3000,	14	// sslVerify: true, // 验证 ssl 证书
13	withCredentials = false, // 跨域请求时是否携带凭证（cookies）	15	success,
14	// sslVerify: true, // 验证 ssl 证书	16	fail = (res) => {
15	success,	17	console.log('fail status === > ', res)
16	fail = (res) => {	18	},
17	console.log('fail status === > ', res)	19	complete = (res) => {
18	},	20	console.log('complete status === > ', res)
		21	if (loading) {
		22	uni.hideLoading()
		23	}
19	complete = (res) => {	24	},
		25	isLoading = false,
		26	loadingText = '加载中',
20	console.log('complete status === > ', res)	27	}) {
		28	if (isLoading) {
		29	loading = isLoading
		30	uni.showLoading({
		31	title: loadingText,
		32	})
		33	}
21	if (loading) {	34	const uid = uni.getStorageSync('uid')
22	uni.hideLoading()	35	const openid = uni.getStorageSync('openid')
23	}	36	data = {
24	},	37	uid,
25	isLoading = false,	38	openid,
26	loadingText = '加载中',	39	...data,
27	}) {	40	}
28	if (isLoading) {	41	uni
29	loading = isLoading	42	.request({
30	uni.showLoading({	43	url: DOMAIN + url,
31	title: loadingText,	44	method,
32	})	45	data,
33	}	46	header,
34	const uid = uni.getStorageSync('uid')	47	timeout,
35	const openid = uni.getStorageSync('openid')	48	withCredentials,
36	data = {	49	success,
37	uid,	50	fail,
38	openid,	51	complete,
39	...data,	52	})
40	}	53	}
41	uni	54