刘文博 / gulu-vue

Browse Code »

Commit c338b4909b35f1ad5bad2844fc5ede34bbd12fa8

Authored by BigBoss 2020-05-12 23:56:00 +0800

2 parents 912dd06afc ab4209caf5

Exists in master

完善页面跳转逻辑

Showing 9 changed files Show diff stats

src/components/CommodityCard/CommodityCard.vue

Diff comments View file @c338b49

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

src/components/UniCountdown/UniCountdown.vue

Diff comments View file @c338b49

File was created	1	<template>
	2	<view class="uni-countdown">
	3	<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
	4	<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
	5	<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
	6	<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
	7	<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
	8	<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
	9	<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
	10	<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
	11	</view>
	12	</template>
	13	<script>
	14	export default {
	15	name: 'UniCountdown',
	16	props: {
	17
	18	showDay: {
	19	type: Boolean,
	20	default: true
	21	},
	22	showColon: {
	23	type: Boolean,
	24	default: true
	25	},
	26	backgroundColor: {
	27	type: String,
	28	default: '#FFFFFF'
	29	},
	30	borderColor: {
	31	type: String,
	32	default: '#000000'
	33	},
	34	color: {
	35	type: String,
	36	default: '#000000'
	37	},
	38	splitorColor: {
	39	type: String,
	40	default: '#000000'
	41	},
	42	day: {
	43	type: Number,
	44	default: 0
	45	},
	46	hour: {
	47	type: Number,
	48	default: 0
	49	},
	50	minute: {
	51	type: Number,
	52	default: 0
	53	},
	54	second: {
	55	type: Number,
	56	default: 0
	57	}
	58	},
	59	data() {
	60	return {
	61	timer: null,
	62	syncFlag: false,
	63	d: '00',
	64	h: '00',
	65	i: '00',
	66	s: '00',
	67	leftTime: 0,
	68	seconds: 0
	69	}
	70	},
	71	watch: {
	72	day(val) {
	73	this.changeFlag()
	74	},
	75	hour(val) {
	76	this.changeFlag()
	77	},
	78	minute(val) {
	79	this.changeFlag()
	80	},
	81	second(val) {
	82	this.changeFlag()
	83	}
	84	},
	85	created: function(e) {
	86	this.startData();
	87	},
	88	beforeDestroy() {
	89	clearInterval(this.timer)
	90	},
	91	methods: {
	92	toSeconds(day, hours, minutes, seconds) {
	93	return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
	94	},
	95	timeUp() {
	96	clearInterval(this.timer)
	97	this.$emit('timeup')
	98	},
	99	countDown() {
	100	let seconds = this.seconds
	101	let [day, hour, minute, second] = [0, 0, 0, 0]
	102	if (seconds > 0) {
	103	day = Math.floor(seconds / (60 * 60 * 24))
	104	hour = Math.floor(seconds / (60 * 60)) - (day * 24)
	105	minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
	106	second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
	107	} else {
	108	this.timeUp()
	109	}
	110	if (day < 10) {
	111	day = '0' + day
	112	}
	113	if (hour < 10) {
	114	hour = '0' + hour
	115	}
	116	if (minute < 10) {
	117	minute = '0' + minute
	118	}
	119	if (second < 10) {
	120	second = '0' + second
	121	}
	122	this.d = day
	123	this.h = hour
	124	this.i = minute
	125	this.s = second
	126	},
	127	startData() {
	128	this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
	129	if (this.seconds <= 0) {
	130	return
	131	}
	132	this.countDown()
	133	this.timer = setInterval(() => {
	134	this.seconds--
	135	if (this.seconds < 0) {
	136	this.timeUp()
	137	return
	138	}
	139	this.countDown()
	140	}, 1000)
	141	},
	142	changeFlag() {
	143	if (!this.syncFlag) {
	144	this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
	145	this.startData();
	146	this.syncFlag = true;
	147	}
	148	clearInterval(this.timer)
	149	}
	150	}
	151	}
	152	</script>
	153	<style lang="scss" scoped>
	154	@import '~@/uni.scss';
	155	$countdown-height: 48rpx;
	156	$countdown-width: 52rpx;
	157
	158	.uni-countdown {
	159	/* #ifndef APP-NVUE */
	160	display: flex;
	161	/* #endif */
	162	flex-direction: row;
	163	justify-content: flex-start;
	164	padding: 2rpx 0;
	165	}
	166
	167	.uni-countdown__splitor {
	168	/* #ifndef APP-NVUE */
	169	display: flex;
	170	/* #endif */
	171	justify-content: center;
	172	line-height: $countdown-height;
	173	padding: 5rpx;
	174	font-size: 18px;
	175	}
	176
	177	.uni-countdown__number {
	178	/* #ifndef APP-NVUE */
	179	display: flex;
	180	/* #endif */
	181	justify-content: center;
	182	align-items: center;
	183	width: $countdown-width;
	184	height: $countdown-height;
	185	line-height: $countdown-height;
	186	margin: 5rpx;
	187	text-align: center;
	188	font-size: 18px;
	189	}
	190	</style>
	191

src/pages.json

Diff comments View file @c338b49

1	{	1	{
2	"pages": [	2	"pages": [
3	{	3	{
4	"path": "pages/index/index",	4	"path": "pages/index/index",
5	"style": {	5	"style": {
6	"navigationBarTitleText": "商城一览"	6	"navigationBarTitleText": "商城一览"
7	}	7	}
8	},	8	},
9	{	9	{
10	"path" : "pages/myOrder/myOrder",	10	"path" : "pages/myOrder/myOrder",
11	"style" : {	11	"style" : {
12	"navigationBarTitleText": "我的订单"}	12	"navigationBarTitleText": "我的订单"}
13	},	13	},
14	{	14	{
15	"path": "pages/frameDetail/frameDetail",	15	"path": "pages/frameDetail/frameDetail",
16	"style": {	16	"style": {
17	"navigationBarTitleText": "产品详情"	17	"navigationBarTitleText": "产品详情"
18	}	18	}
19	},	19	},
20	{	20	{
21	"path": "pages/lensDetails/lensDetails",	21	"path": "pages/lensDetails/lensDetails",
22	"style": {	22	"style": {
23	"navigationBarTitleText": "产品详情"	23	"navigationBarTitleText": "产品详情"
24	}	24	}
25	},	25	},
26	{	26	{
27	"path": "pages/cart/cart",	27	"path": "pages/cart/cart",
28	"style": {	28	"style": {
29	"navigationBarTitleText": "购物车"	29	"navigationBarTitleText": "购物车"
30	}	30	}
31	},	31	},
32	{	32	{
33	"path" : "pages/purchaseLenses/purchaseLenses",	33	"path" : "pages/purchaseLenses/purchaseLenses",
34	"style" : {	34	"style" : {
35	"navigationBarTitleText": "产品选购"	35	"navigationBarTitleText": "产品选购"
36	}	36	}
37	},	37	},
38	{	38	{
39	"path" : "pages/refundProgress/refundProgress",	39	"path" : "pages/refundProgress/refundProgress",
40	"style": {	40	"style": {
41	"navigationBarTitleText": "申请退款"	41	"navigationBarTitleText": "申请退款"
42	}	42	}
43	},	43	},
44	{	44	{
45	"path": "pages/addAddress/addAddress",	45	"path": "pages/addAddress/addAddress",
46	"style": {	46	"style": {
47	"navigationBarTitleText": "新增地址"	47	"navigationBarTitleText": "新增地址"
48	}	48	}
49	},	49	},
50	{	50	{
51	"path" : "pages/confirmOrder/confirmOrder",	51	"path" : "pages/confirmOrder/confirmOrder",
52	"style" : {	52	"style" : {
53	"navigationBarTitleText": "确认订单"	53	"navigationBarTitleText": "确认订单"
54	}	54	}
55	},	55	},
56	{	56	{
57	"path": "pages/user/user",	57	"path": "pages/user/user",
58	"style": {	58	"style": {
59	"navigationBarTitleText": "我的"	59	"navigationBarTitleText": "我的"
60	}	60	}
61	},	61	},
62	{	62	{
63	"path": "pages/refundment/refundWays"	63	"path": "pages/refundment/refundWays"
64	},	64	},
65	{	65	{
66	"path": "pages/refundment/refundment"	66	"path": "pages/refundment/refundment"
67	},	67	},
68	{	68	{
69	"path": "pages/predelivery/predelivery"	69	"path": "pages/predelivery/predelivery"
70	},	70	},
71	{	71	{
		72	"path": "pages/customerService/customerService",
		73	"style":{
		74	"navigationBarTitleText" : "在线客服"
72	"path": "pages/customerService/customerService"	75	}
73	},	76	},
74	{	77	{
		78	"path": "pages/myOrderPaying/myOrderPaying",
		79	"style":{
		80	"navigationBarTitleText" : "我的订单"
		81	}
		82	},
		83	{
		84	"path": "pages/detailsChoiceArgs/detailsChoiceArgs",
		85	"style":{
		86	"navigationBarTitleText" : "镜片名称名称"
75	"path": "pages/myOrderPaying/myOrderPaying",	87	}
76	"style": {	88	},
77	"navigationBarTitleText": "待付款"	89	{
78	}	90	"path" : "pages/detailStandard/detailStandard_sun",
79	},	91	"style": {
80	{	92	"navigationBarTitleText": "太阳镜选购页"
81	"path" : "pages/detailStandard/detailStandard_sun",	93	}
82	"style": {	94	},
83	"navigationBarTitleText": "太阳镜选购页"	95	{
84	}	96	"path" : "pages/detailStandard/detailStandard_k",
85	},	97	"style": {
86	{	98	"navigationBarTitleText": "镜框选购页"
87	"path" : "pages/detailStandard/detailStandard_k",	99	}
88	"style": {	100	}
89	"navigationBarTitleText": "镜框选购页"	101
90	}	102	],
91	}	103	"globalStyle": {
92		104	"navigationBarTextStyle": "black",
93	],	105	"navigationBarTitleText": "uni-app",
94	"globalStyle": {	106	"navigationBarBackgroundColor": "#F8F8F8",
95	"navigationBarTextStyle": "black",	107	"backgroundColor": "#F8F8F8"
96	"navigationBarTitleText": "uni-app",	108	},
97	"navigationBarBackgroundColor": "#F8F8F8",	109	"tabBar": {
98	"backgroundColor": "#F8F8F8"	110	"color": "#C0C4CC",
99	},	111	"selectedColor": "#fa436a",
100	"tabBar": {	112	"borderStyle": "black",
101	"color": "#C0C4CC",	113	"backgroundColor": "#ffffff",
102	"selectedColor": "#fa436a",	114	"list": [{
103	"borderStyle": "black",	115	"pagePath": "pages/index/index",
104	"backgroundColor": "#ffffff",	116	"iconPath": "static/tab-home.png",
105	"list": [{	117	"selectedIconPath": "static/tab-home-current.png",
106	"pagePath": "pages/index/index",	118	"text": "首页"
107	"iconPath": "static/tab-home.png",	119	},
108	"selectedIconPath": "static/tab-home-current.png",	120	{
109	"text": "首页"	121	"pagePath": "pages/cart/cart",
110	},	122	"iconPath": "static/tab-cart.png",
111	{	123	"selectedIconPath": "static/tab-cart-current.png",
112	"pagePath": "pages/cart/cart",	124	"text": "购物车"
113	"iconPath": "static/tab-cart.png",	125	},
114	"selectedIconPath": "static/tab-cart-current.png",	126	{
115	"text": "购物车"	127	"pagePath": "pages/user/user",
116	},	128	"iconPath": "static/tab-my.png",
117	{	129	"selectedIconPath": "static/tab-my-current.png",
118	"pagePath": "pages/user/user",	130	"text": "我的"
119	"iconPath": "static/tab-my.png",	131	}
		132	]
		133	},
		134	"condition" : { //模式配置，仅开发期间生效
		135	"current": 0, //当前激活的模式(list 的索引项)
		136	"list": [
		137	{
		138	"name": "", //模式名称
		139	"path": "", //启动页面，必选
		140	"query": "" //启动参数，在页面的onLoad函数里面得到
		141	}
120	"selectedIconPath": "static/tab-my-current.png",	142	]
121	"text": "我的"	143	}
122	}	144	}
123	]	145

src/pages/cart/cart.vue

Diff comments View file @c338b49

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<checkbox-group name="">	3
4	<label>	4	<view class="card">
5	<view class="card">	5	<view class="cardHeader">
6	<view class="cardHeader">	6	<!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
7	<checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)"/>	7	<block v-if="pIsoPen">
8	<image src="../../static/customerService-btn.png" mode="aspectFill"></image>	8	<view class="partentChecked" @click="pChange(pIsoPen)">
9	<text>非常戴镜</text>	9	<span class="status correct"></span>
10	</view>	10	</view>
11	<view class="cardBody">	11	</block>
12	<checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" />	12	<block v-else>
13	<view class="goodInfo">	13	<view class="partentCheck" @click="pChange(pIsoPen)"></view>
14	<view class="imageWrap">	14	</block>
15	<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>	15	<image src="../../static/store.png" mode="aspectFill"></image>
16	</view>	16	<text>非常戴镜</text>
17	<view class="infoRight">	17	</view>
18	<text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>	18
19	<view class="describ"><text>支持7天无理由退货顺丰发货支持7天无理由退货顺丰发货支持7天无理由退货顺丰发货</text>	19	<view class="cardBody">
20	<!-- <text class="icon">></text> -->	20	<!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
21	</view>	21	<template v-if="childIsOpen.child1">
22	<view class="priceBox">	22	<view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
23	<view class="price">￥198</view>	23	<span class="status correct"></span>
24	<text>(限购{{maxCount}}副)</text>	24	</view>
25	<view class="counter">	25	</template>
26	<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>	26	<template v-else>
27	<text>{{count}}</text>	27	<view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
28	<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>	28	</template>
29	</view>	29	<view class="goodInfo">
30	</view>	30	<view class="imageWrap">
		31	<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
		32	</view>
		33	<view class="infoRight">
		34	<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
		35	<view class="describ"><text>颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射 … </text>
		36	<!-- <text class="icon">></text> -->
		37	</view>
		38	<view class="priceBox">
		39	<view class="price">￥{{198*this.count}}</view>
		40	<text>(限购{{maxCount}}副)</text>
		41	<view class="counter">
		42	<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
		43	<text>{{count}}</text>
		44	<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
31	</view>	45	</view>
32	</view>	46	</view>
33	</view>	47	</view>
34	</view>	48	</view>
35	</label>	49	</view>
36	</checkbox-group>	50	<view class="cardBody">
37		51	<!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
		52	<template v-if="childIsOpen.child2">
		53	<view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
		54	<span class="status correct"></span>
		55	</view>
		56	</template>
		57	<template v-else>
		58	<view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
		59	</template>
		60	<view class="goodInfo">
		61	<view class="imageWrap">
		62	<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
		63	</view>
		64	<view class="infoRight">
		65	<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
		66	<view class="describ"><text>颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射 … </text>
		67	<!-- <text class="icon">></text> -->
		68	</view>
		69	<view class="priceBox">
		70	<view class="price">￥{{198*this.count}}</view>
		71	<text>(限购{{maxCount}}副)</text>
		72	<view class="counter">
		73	<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
		74	<text>{{count}}</text>
		75	<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
		76	</view>
		77	</view>
		78	</view>
		79	</view>
		80	</view>
		81	</view>
38		82
39	<view class="footer">	83	<view class="footer">
40	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>	84	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
41	<view class="footerRight">	85	<view class="footerRight">
42	<view class="paybtn">立即支付</view>	86	<navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
		87	<view class="paybtn">立即支付</view>
		88	</navigator>
43	</view>	89	</view>
44	</view>	90	</view>
		91
45	</view>	92	</view>
46	</template>	93	</template>
47		94
48	<script>	95	<script>
49	export default {	96	export default {
		97
50	data() {	98	data() {
51	return {	99	return {
52	totalPrice: 360,	100	totalPrice: 360,
53	count:1,	101	count:1,
54	maxCount:20,	102	maxCount:20,
		103	pIsoPen: false,
		104	childIsOpen:{
		105	"child1":true,
		106	"child2":true
		107	},
55	}	108	}
56	},	109	},
57	onLoad() {	110	onLoad() {
58		111
59	},	112	}
		113	,
60	methods: {	114	methods: {
61	counter(isadd){	115	counter(isadd){
62	if(isadd){	116	if(isadd){
63	this.count >= this.maxCount? this.addDisabled = true:this.count++;	117	this.count >= this.maxCount? this.addDisabled = true:this.count++;
64	}else{	118	}else{
65	this.count <= 1? this.desDisabled = true:this.count--;	119	this.count <= 1? this.desDisabled = true:this.count--;
66	}	120	}
67	},	121	},
		122	pChange(isopen){
		123	// console.log(isopen)
		124	this.pIsoPen=!isopen
		125	this.childIsOpen.child1=!isopen
		126	this.childIsOpen.child2=!isopen
		127	},
		128	cChange(isopen,child){
		129	// console.log(child)
		130	if(child==='child1'){
		131	this.childIsOpen.child1=!isopen
		132	}
		133	if(child==='child2'){
		134	this.childIsOpen.child2=!isopen
		135	}
		136	}
68	}	137	}
69	}	138	}
70	</script>	139	</script>
71		140
72	<style lang="scss">	141	<style lang="scss">
73	.content {	142	.content {
74	min-height: 100vh;	143	min-height: 100vh;
75	background-color: #F7F6F6;	144	background-color: #f2f2f2;
76	display: flex;	145	display: flex;
77	flex-direction: column;	146	flex-direction: column;
78	align-items: center;	147	align-items: center;
79	justify-content: space-between;	148	justify-content: space-between;
80	padding: 20rpx 40rpx;	149	padding: 20rpx 40rpx;
81	box-sizing: border-box;	150	box-sizing: border-box;
82		151
		152	.partentCheck{
		153	width: 16px;
		154	height: 16px;
		155	border-radius: 18px;
		156	border: 1px solid #CFCFCF;
		157	background-color: #FFFFFF;
		158	}
		159	.partentChecked{
		160	width: 18px;
		161	height: 18px;
		162	border-radius: 18px;
		163	background-color: #FF6B4A;
		164	.correct {
		165	display: inline-block;
		166	width: 5px;
		167	height: 1px;
		168	background: #FFFFFF;
		169	line-height: 0;
		170	font-size: 0;
		171	position: relative;
		172	top: -10px;
		173	left: 4px;
		174	-webkit-transform: rotate(45deg);
		175	}
		176	.correct:after {
		177	content: '/';
		178	display: block;
		179	width: 8px;
		180	height: 1px;
		181	background: #FFFFFF;
		182	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
		183	}
		184	}
		185
83	.card{	186	.card{
84	background-color: #FFFFFF;	187	background-color: #FFFFFF;
85	border-radius: 16rpx;	188	border-radius: 16rpx;
86	box-sizing: border-box;	189	box-sizing: border-box;
87	padding: 36rpx 36rpx 36rpx 18rpx;	190	padding: 36rpx 36rpx 36rpx 18rpx;
88	display: flex;	191	display: flex;
89	flex-direction: column;	192	flex-direction: column;
90	align-items: center;	193	align-items: center;
91	justify-content: space-between;	194	justify-content: space-between;
92	.cardHeader{	195	.cardHeader{
93	width: 100%;	196	width: 100%;
94	height: 36rpx;	197	height: 36rpx;
95	display: flex;	198	display: flex;
96	align-items: center;	199	align-items: center;
97	justify-content: flex-start;	200	justify-content: flex-start;
98	image{	201	image{
99	height: 32rpx;	202	height: 32rpx;
100	width: 32rpx;	203	width: 32rpx;
		204	padding-left: 6px;
		205	padding-right: 10px;
		206	}
		207	text{
		208	// font-family: PingFangSC-Regular;
		209	font-size: 14px;
		210	color: #333333;
		211	letter-spacing: -0.26px;
101	}	212	}
102	}	213	}
103	.cardBody{	214	.cardBody{
104	width: 100%;	215	width: 100%;
105	height: 300rpx;	216	height: 300rpx;
106	display: flex;	217	display: flex;
107	align-items: center;	218	align-items: center;
108	justify-content: space-between;	219	justify-content: space-between;
109	.goodInfo{	220	.goodInfo{
110	width: 95%;	221	width: 95%;
111	display: flex;	222	display: flex;
112	flex-direction: row;	223	flex-direction: row;
113	justify-content: flex-start;	224	justify-content: flex-start;
		225	padding-left: 6px;
114	.imageWrap{	226	.imageWrap{
115	height: 188rpx;	227	height: 188rpx;
116	width: 188rpx;	228	width: 188rpx;
117	margin-right: 28rpx;	229	margin-right: 28rpx;
118	image{	230	image{
		231	border-radius: 4px;
119	height: 188rpx;	232	height: 188rpx;
120	width: 188rpx;	233	width: 188rpx;
121	}	234	}
122	}	235	}
123	.infoRight{	236	.infoRight{
124	display: flex;	237	display: flex;
125	flex-direction: column;	238	flex-direction: column;
126	align-items: flex-start;	239	align-items: flex-start;
127	justify-content: space-between;	240	justify-content: space-between;
128	height: 220rpx;	241	height: 240rpx;
129	.goodName{	242	.goodName{
130	font-size: 28rpx;	243	font-size: 28rpx;
131	color: #333333;	244	color: #333333;
132	}	245	}
133	.describ{	246	.describ{
134	width: 100%;	247	width: 100%;
135	height: 80rpx;	248	height: 80rpx;
136	box-sizing: border-box;	249	box-sizing: border-box;
137	padding: 10rpx;	250	padding: 10rpx;
138	font-size: 20rpx;	251	font-size: 20rpx;
139	color: #999999;	252	color: #999999;
140	background: #F2F2F2;	253	background: #F2F2F2;
141	text{	254	text{
142	text-overflow: -o-ellipsis-lastline;	255	text-overflow: -o-ellipsis-lastline;
143	overflow: hidden;	256	overflow: hidden;
144	text-overflow: ellipsis;	257	text-overflow: ellipsis;
145	display: -webkit-box;	258	display: -webkit-box;
146	-webkit-line-clamp: 2;	259	-webkit-line-clamp: 2;
147	line-clamp: 2;	260	line-clamp: 2;
148	-webkit-box-orient: vertical;	261	-webkit-box-orient: vertical;
149	}	262	}
150	// .icon{	263	// .icon{
151	// transform: rotate(90deg);	264	// transform: rotate(90deg);
152	// }	265	// }
153	}	266	}
154	.priceBox{	267	.priceBox{
155	display: flex;	268	display: flex;
156	justify-content: space-between;	269	justify-content: space-between;
157	align-items: center;	270	align-items: center;
		271	// margin-top: 26px;
158	width: 100%;	272	width: 100%;
159	font-size: 14px;	273	font-size: 14px;
160	color: #999999;	274	color: #999999;
161	.price{	275	.price{
162	color: #FF6B4A;	276	color: #FF6B4A;
163	font-size: 28rpx;	277	font-size: 28rpx;
164	}	278	}
165	.counter{	279	.counter{
166	display: flex;	280	display: flex;
167	flex-direction: row;	281	flex-direction: row;
168	justify-content: space-between;	282	justify-content: space-between;
169	align-items: center;	283	align-items: center;
170	font-size: 28rpx;	284	font-size: 28rpx;
171	color: #333333;	285	color: #333333;
172	width: 122rpx;	286	width: 122rpx;
173	.btn{	287	.btn{
174	display: flex;	288	display: flex;
175	justify-content: center;	289	justify-content: center;
176	line-height: 32rpx;	290	line-height: 32rpx;
177	height: 32rpx;	291	height: 32rpx;
178	width: 32rpx;	292	width: 32rpx;
179	background-color: #F2F2F2;	293	background-color: #F2F2F2;
180	color: #CFCFCF;	294	color: #CFCFCF;
181	}	295	}
182	}	296	}
183	}	297	}
184	}	298	}
185	}	299	}
186	}	300	}
187	}	301	}
188		302
189	.footer{	303	.footer{
190	position: fixed;	304	position: fixed;
191	left: 0;	305	left: 0;
192	bottom: 0;	306	bottom: 50px;
193	height: 112rpx;	307	height: 112rpx;
194	width: 100%;	308	width: 100%;
195	background-color: #FFFFFF;	309	background-color: #FFFFFF;
196	font-size: 16px;	310	font-size: 16px;
197	display: flex;	311	display: flex;
198	justify-content: space-between;	312	justify-content: space-between;
199	align-items: center;	313	align-items: center;
200	.footerLeft{	314	.footerLeft{
201	display: flex;	315	display: flex;
202	justify-content: center;	316	justify-content: center;
203	align-items: center;	317	align-items: center;
204	width: 50%;	318	width: 50%;
205	color: #333333;	319	color: #333333;
206	text{	320	text{
207	color: #FF6B4A;	321	color: #FF6B4A;
208	}	322	}
209	}	323	}
210	.footerRight{	324	.footerRight{
211	display: flex;	325	display: flex;
212	justify-content: flex-end;	326	justify-content: flex-end;
213	align-items: center;	327	align-items: center;
214	width: 50%;	328	width: 50%;
215	margin-right: 26rpx;	329	margin-right: 26rpx;
216	.paybtn{	330	.paybtn{
217	display: flex;	331	display: flex;
218	justify-content: center;	332	justify-content: center;
219	align-items: center;	333	align-items: center;
220	background: #FF6B4A;	334	background: #FF6B4A;
221	border-radius: 20px;	335	border-radius: 20px;
222	border-radius: 20px;	336	border-radius: 20px;
223	color: #FFFFFF;	337	color: #FFFFFF;
224	width: 204rpx;	338	width: 204rpx;
225	height: 80rpx;	339	height: 80rpx;
226	}	340	}
227	}	341	}
228		342
229	}	343	}
230	}	344	}
231		345
		346
		347
232	</style>	348	</style>
233		349

src/pages/detailsChoiceArgs/compoents/MyCollapse.vue

Diff comments View file @c338b49

File was created	1	<template>
	2	<!-- 折叠框 -->
	3	<view class="myCollapse">
	4	<view class="head">
	5	<view>{{title}}</view>
	6	<view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
	7	<view class="headRighted" v-if="this.isOpen" @click="myCollapseChange(isOpen)"></view>
	8	<view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view>
	9	</view>
	10	<view class="body">
	11	<block v-if="this.isOpen">
	12	<view style="background-color: #FFFFFF;" class="funBox">
	13	<template v-if="title==='镜片种类'">
	14	<view class="noRange">
	15	<block v-for="(item,index) in funList" :key="item.key">
	16	<view class="boxChoiced" v-if="item.isChioce" @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
	17	<view class="boxChoice" v-else @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
	18	</block>
	19	</view>
	20	<view class="noRange">
	21	<block v-for="(item,index) in funList2" :key="item.key">
	22	<view class="boxChoiced-C" :style="colorList[index]" v-if="item.isChioce" @click="choice2(index,item.key-1,item.isChioce)"></view>
	23	<view class="boxChoice-C" :style="colorList[index]" v-else @click="choice2(index,item.key-1,item.isChioce)"></view>
	24	</block>
	25	</view>
	26	</template>
	27	<template v-else>
	28	<view class="range" v-for="(item,index) in funList" :key="item.key">{{item.range}}</view>
	29	<view class="noRange">
	30	<block v-for="(item,index) in funList" :key="item.key">
	31	<view class="boxChoiced" v-if="item.isChioce" @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
	32	<view class="boxChoice" v-else @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
	33	</block>
	34	</view>
	35	<!-- 手动换行 -->
	36	<view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
	37	<view class="noRange" style="max-width: 624rpx">
	38	<block v-for="(item,index) in funList2" :key="item.key">
	39	<view class="boxChoiced" v-if="item.isChioce" @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view>
	40	<view class="boxChoice" v-else @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view>
	41	</block>
	42	</view>
	43	</template>
	44
	45	</view>
	46	</block>
	47	<block v-else>
	48	*<text v-for="(item,index) in funContent" :key="index">{{item}}</text>
	49	</block>
	50	</view>
	51	</view>
	52
	53	</template>
	54
	55	<script>
	56	export default {
	57	props:{
	58	isOpenProps:{
	59	// 是否展开，默认 true
	60	type: Boolean,
	61	default: true
	62	},
	63	funList:{
	64	type: Array,
	65	default: []
	66	},
	67	funList2:{
	68	type:Array,
	69
	70	}
	71	,
	72	funContent: {
	73	type: Array,
	74	default: []
	75	},
	76	title:{
	77	type: String,
	78	default: ''
	79	}
	80	},
	81	data() {
	82	return {
	83	isOpen:this.isOpenProps,
	84	// 颜色数组要与传入的值手动相同
	85	colorList:[
	86	"background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
	87	"background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
	88	"background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
	89	"background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
	90	"background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
	91	]
	92	};
	93	},
	94	methods:{
	95	myCollapseChange(isopen){
	96	this.isOpen = !isopen
	97	},
	98	choice(index,isChoice){
	99	this.funList[index].isChioce = !isChoice
	100	if(!isChoice){
	101	this.funContent[index] = this.funList[index].name
	102	}
	103	else{
	104	this.funContent[index] = ''
	105	}
	106	},
	107	choice2(index,conIndex,isChoice){
	108	this.funList2[index].isChioce = !isChoice
	109	if(!isChoice){
	110	this.funContent[conIndex] = this.funList2[index].name
	111	}
	112	else{
	113	this.funContent[conIndex] = ''
	114	}
	115	}
	116	}
	117	}
	118	</script>
	119
	120	<style lang="scss">
	121	.myCollapse{
	122	width: 100%;
	123	padding-bottom: 28rpx;
	124	margin-top: 7px;
	125	border-bottom: 1px solid #E9E9E9;
	126	.head{
	127	display: flex;
	128	justify-content: space-between;
	129	height: 24px;
	130	// font-family: PingFangSC-Medium;
	131	font-size: 16px;
	132	color: #333333;
	133	letter-spacing: -0.3px;
	134	text-align: justify;
	135	line-height: 24px;
	136	margin-bottom: 18rpx;
	137	.headRighted{
	138	width: 0;
	139	height: 0;
	140	border-left: 4px solid transparent;
	141	border-right: 4px solid transparent;
	142	border-bottom: 4px solid #CFCFCF;
	143	transform: scaleY(-1);
	144	margin-top: 10px;
	145	}
	146	.headMid{
	147	// font-family: PingFangSC-Regular;
	148	font-size: 10px;
	149	color: #999999;
	150	letter-spacing: -0.19px;
	151	margin-left: -120rpx;
	152	}
	153	.headRight{
	154	width: 0;
	155	height: 0;
	156	border-left: 4px solid transparent;
	157	border-right: 4px solid transparent;
	158	border-bottom: 4px solid #CFCFCF;
	159	margin-top: 10px;
	160	}
	161	}
	162	.body{
	163	// font-family: PingFangSC-Regular;
	164	font-size: 12px;
	165	color: #666666;
	166	letter-spacing: 0;
	167	display: flex;
	168	flex-wrap: wrap;
	169	text{
	170	padding-left: 4px;
	171	}
	172	}
	173	}
	174	.funBox {
	175	// display: flex;
	176	width: 100%;
	177	// flex-wrap: wrap;
	178	// max-width: 624rpx;
	179	.range{
	180	// font-family: PingFangSC-Regular;
	181	font-size: 10px;
	182	color: #999999;
	183	letter-spacing: -0.19px;
	184	margin-bottom: 5px;
	185	}
	186	.noRange{
	187	display: flex;
	188	flex-wrap: wrap;
	189	// max-width: 624rpx;
	190	// margin-bottom: 28rpx;
	191	.boxChoiced,.boxChoice{
	192	height: 60rpx;
	193	border-radius: 4rpx;
	194	// font-family: PingFangSC-Regular;
	195	font-size: 12px;
	196	letter-spacing: 0;
	197	line-height: 60rpx;
	198	box-sizing: border-box;
	199	padding: 0 20rpx;
	200	margin-right: 20rpx;
	201	margin-bottom: 13rpx;
	202	}
	203	.boxChoiced{
	204	background: rgba(255,107,74,0.15);
	205	color: #FF6B4A;
	206	}
	207	.boxChoice{
	208	background: #F2F2F2;
	209	color: #666666;
	210	}
	211	.boxChoiced-C,.boxChoice-C{
	212	width: 64rpx;
	213	height: 64rpx;
	214	border-radius: 32rpx;
	215	margin-right: 8px;
	216	}
	217	.boxChoiced-C{
	218	opacity: 0.7;
	219	border: 1px solid #FF6B4A;
	220	}
	221	.boxChoice-C{
	222	opacity: 0.7;
	223	border: 1px solid #FFFFFF;
	224	}
	225	}
	226
	227	}
	228	</style>
	229

src/pages/detailsChoiceArgs/detailsChoiceArgs.vue

Diff comments View file @c338b49

File was created	1	<template>
	2	<view class="content">
	3	<view class="goods-info">
	4	<image src="../../static/myorder-paying-pic.png"></image>
	5	<view class="box-right">
	6	<text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
	7	<text class="p2">支持7天无理由退货顺丰发货</text>
	8	<view class="priceBox">
	9	<view class="price">￥{{price*count}}</view>
	10	<view class="counter">
	11	<view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
	12	<text>{{count}}</text>
	13	<view class="btn" @click="counter(true)">+</view>
	14	</view>
	15	</view>
	16	</view>
	17	</view>
	18	<view class="goods-data">
	19	<!-- 实用功能折叠框 -->
	20	<MyCollapse :isOpenProps="funIsOpen" :funList="funList" :funContent="funContent" title="实用功能"></MyCollapse>
	21	<MyCollapse :isOpenProps="kindIsOpen" :funList="kindList1" :funList2="kindList2" :funContent="kindContent" title="镜片种类"></MyCollapse>
	22	<MyCollapse :isOpenProps="maIsOpen" :funList="maList1" :funList2="maList2" :funContent="maContent" title="材质选择"></MyCollapse>
	23	<MyCollapse :isOpenProps="reIsOpen" :funList="reList1" :funList2="reList2" :funContent="reContent" title="折射率"></MyCollapse>
	24
	25	<view class="opCollapse">
	26	<view class="head">
	27	<view v-if="!opIsOpen">填写验光数据</view>
	28	<view v-else></view>
	29	<view class="headRighted" v-if="this.opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
	30	<view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
	31	</view>
	32	<view class="body">
	33	<block v-if="this.opIsOpen">
	34
	35	<view class="goods-form">
	36	<text class="p1">填写验光数据</text>
	37	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
	38	<view class="picker" >
	39	<view class="picker-choice">
	40	<view class="choice-left">
	41	<text class="p11">{{pickerInfoList[0].nameC}}</text>
	42	<text class="p12">{{pickerInfoList[0].nameE}}</text>
	43	</view>
	44	<text class="p13">左   (OD)</text>
	45	<text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
	46	<picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
	47	<image src="../../static/detail-tabicon.png" ></image>
	48	</picker>
	49	<text class="p13">右   (OS)</text>
	50	<text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
	51	<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
	52	<image src="../../static/detail-tabicon.png" ></image>
	53	</picker>
	54	</view>
	55	</view>
	56	<view class="picker" >
	57	<view class="picker-choice">
	58	<view class="choice-left">
	59	<text class="p11">{{pickerInfoList[1].nameC}}</text>
	60	<text class="p12">{{pickerInfoList[1].nameE}}</text>
	61	</view>
	62	<text class="p13">左   (OD)</text>
	63	<text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
	64	<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
	65	<image src="../../static/detail-tabicon.png" ></image>
	66	</picker>
	67	<text class="p13">右   (OS)</text>
	68	<text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
	69	<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
	70	<image src="../../static/detail-tabicon.png" ></image>
	71	</picker>
	72	</view>
	73	</view>
	74	<view class="picker" >
	75	<view class="picker-choice">
	76	<view class="choice-left">
	77	<text class="p11">{{pickerInfoList[2].nameC}}</text>
	78	<text class="p12">{{pickerInfoList[2].nameE}}</text>
	79	</view>
	80	<text class="p13">左   (OD)</text>
	81	<text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
	82	<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
	83	<image src="../../static/detail-tabicon.png" ></image>
	84	</picker>
	85	<text class="p13">右   (OS)</text>
	86	<text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
	87	<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
	88	<image src="../../static/detail-tabicon.png" ></image>
	89	</picker>
	90	</view>
	91	</view>
	92	<view class="picker" >
	93	<view class="picker-choice">
	94	<view class="choice-left">
	95	<text class="p11">{{pickerInfoList[3].nameC}}</text>
	96	<text class="p12">{{pickerInfoList[3].nameE}}</text>
	97	</view>
	98	<text class="p13">左   (OD)</text>
	99	<text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
	100	<picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
	101	<image src="../../static/detail-tabicon.png" ></image>
	102	</picker>
	103	<text class="p13">右   (OS)</text>
	104	<text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
	105	<picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
	106	<image src="../../static/detail-tabicon.png" ></image>
	107	</picker>
	108	</view>
	109	</view>
	110	<view class="picker" >
	111	<view class="picker-choice">
	112	<view class="choice-left">
	113	<text class="p11">{{pickerInfoList[4].nameC}}</text>
	114	</view>
	115	<text class="p13-date">年   (Y)</text>
	116	<text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
	117	<picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
	118	<image src="../../static/detail-tabicon.png" ></image>
	119	</picker>
	120	<text class="p13-date">月   (M)</text>
	121	<text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
	122	<picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
	123	<image src="../../static/detail-tabicon.png" ></image>
	124	</picker>
	125	<text class="p13-date">日   (D)</text>
	126	<text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
	127	<picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
	128	<image src="../../static/detail-tabicon.png" ></image>
	129	</picker>
	130	</view>
	131	</view>
	132	<view class="confirm">
	133	<image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
	134	<text>确认以上输入信息来源于我的验光数据!</text>
	135	</view>
	136	</view>
	137
	138	</block>
	139	<block v-else>
	140	<view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
	141	<template v-if="item.nameC==='验光日期'">
	142	<text class="names">{{item.nameC}}</text>
	143	<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
	144	<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
	145	<text>{{item.nameArray3[item.nameIndex2]}}日</text>
	146	</template>
	147	<template v-else>
	148	<template v-if="item.nameC==='度数'">
	149	<text style="display: inline;">*</text>
	150	</template>
	151
	152	<text class="names">{{item.nameC}}</text>
	153	<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>
	154	<text>右 {{item.nameArray2[item.nameIndex2]}}</text>
	155	</template>
	156	</view>
	157	</block>
	158	</view>
	159	</view>
	160
	161	</view>
	162	<view class="submit">立即结算</view>
	163	</view>
	164	</template>
	165
	166	<script>
	167	import MyCollapse from './compoents/MyCollapse.vue'
	168	export default {
	169	components: {
	170	MyCollapse
	171	},
	172	data() {
	173	return {
	174	count:1,
	175	disabled:false,
	176	price:180,
	177	// 实用功能参数
	178	funIsOpen:true, // 默认myCollapse开启
	179	funList: [
	180	{"name":"防紫外线","isChioce":false,key:1},
	181	{"name":"防蓝光","isChioce":false,key:2},
	182	{"name":"智能变色","isChioce":false,key:3},
	183	{"name":"易清洁","isChioce":false,key:4},
	184	{"name":"防辐射","isChioce":false,key:5},
	185	{"name":"抗疲劳","isChioce":false,key:6},
	186	],
	187	funContent:[],
	188
	189	// 镜片种类参数
	190	kindIsOpen:false, // 默认myCollapse开启
	191	kindList1: [
	192	{"name":"染色","isChioce":false,key:1},
	193	{"name":"渐变","isChioce":false,key:2},
	194	],
	195	kindList2: [
	196	{"name":"JB234759","isChioce":false,key:3},
	197	{"name":"JB234759","isChioce":false,key:4},
	198	{"name":"JB234759","isChioce":false,key:5},
	199	{"name":"JB234759","isChioce":false,key:6},
	200	{"name":"JB234759","isChioce":false,key:7},
	201	],
	202	kindContent:[],
	203	// 材质选择
	204	maIsOpen:false,
	205	maList1: [
	206	{"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
	207	{"name":"特殊镜片","isChioce":false,key:2},
	208	],
	209	maList2: [
	210	{"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
	211	{"name":"玻璃镜片","isChioce":false,key:4},
	212	],
	213	maContent:[],
	214	// 折射率参数
	215	reIsOpen:false,
	216	reList1: [
	217	{"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
	218	{"name":"1.60","isChioce":false,key:2},
	219	],
	220	reList2: [
	221	{"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
	222	{"name":"1.67","isChioce":false,key:4},
	223	{"name":"1.71","isChioce":false,key:5},
	224	{"name":"1.74","isChioce":false,key:6},
	225	],
	226	reContent:[],
	227	// 验光参数
	228	opIsOpen:false,
	229	tablist: {
	230	// read: true,
	231	// seeLong: false,
	232	confirm: false
	233	},
	234	tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
	235	// 度数相关数据
	236	pickerInfoList:[
	237	{nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
	238	{nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
	239	{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
	240	{nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
	241	{nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
	242	],
	243
	244	}
	245	},
	246	methods: {
	247	counter(isadd){
	248	if(isadd){
	249	this.count++
	250	}else{
	251	this.count <= 1? this.disabled = true:this.count--
	252	}
	253	},
	254	myCollapseChange(isopen){
	255	// console.log(isopen)
	256	this.opIsOpen = !isopen
	257	},
	258	changeConfirm() {
	259	this.tablist.confirm = !this.tablist.confirm
	260	},
	261
	262	bindPickerChange01: function(e) {
	263	this.pickerInfoList[0].nameIndex1 = e.target.value
	264	},
	265	bindPickerChange02: function(e) {
	266	this.pickerInfoList[0].nameIndex2 = e.target.value
	267	},
	268
	269	bindPickerChange11: function(e) {
	270	this.pickerInfoList[1].nameIndex1 = e.target.value
	271	},
	272	bindPickerChange12: function(e) {
	273	this.pickerInfoList[1].nameIndex2 = e.target.value
	274	},
	275
	276	bindPickerChange21: function(e) {
	277	this.pickerInfoList[2].nameIndex1 = e.target.value
	278	},
	279	bindPickerChange22: function(e) {
	280	this.pickerInfoList[2].nameIndex2 = e.target.value
	281	},
	282
	283	bindPickerChange31: function(e) {
	284	this.pickerInfoList[3].nameIndex1 = e.target.value
	285	},
	286	bindPickerChange32: function(e) {
	287	this.pickerInfoList[3].nameIndex2 = e.target.value
	288	},
	289
	290	bindPickerChange41: function(e) {
	291	this.pickerInfoList[4].nameIndex1 = e.target.value
	292	},
	293	bindPickerChange42: function(e) {
	294	this.pickerInfoList[4].nameIndex2 = e.target.value
	295	},
	296	bindPickerChange43: function(e) {
	297	this.pickerInfoList[4].nameIndex3 = e.target.value
	298	},
	299	}
	300	}
	301	</script>
	302
	303	<style lang="scss" scoped>
	304	.content{
	305	width: 100%;
	306	background-color: #F2F2F2;
	307	display: flex;
	308	flex-direction: column;
	309	align-items: center;
	310	}
	311
	312	.goods-info{
	313	width: 100%;
	314	height: 272rpx;
	315	box-sizing: border-box;
	316	padding: 40rpx 40rpx 36rpx 36rpx;
	317	margin: 36rpx 0 18rpx 0;
	318	// margin-bottom: -18rpx;
	319	// margin-top: -36rpx;
	320	background: #FFFFFF;
	321	border-radius: 16rpx;
	322	display: flex;
	323	image{
	324	width: 94px;
	325	height: 94px;
	326	margin-right: 28rpx;
	327	}
	328	.box-right{
	329	width: 458rpx;
	330	display: flex;
	331	flex-direction: column;
	332	align-items: flex-start;
	333	justify-content: space-between;
	334	.p1 {
	335	// font-family: PingFangSC-Regular;
	336	font-size: 14px;
	337	color: #333333;
	338	letter-spacing: -0.26px;
	339	text-align: justify;
	340	line-height: 18px;
	341	}
	342	.p2 {
	343	// font-family: PingFangSC-Regular;
	344	font-size: 10px;
	345	color: #999999;
	346	letter-spacing: -0.19px;
	347	margin-top: -20rpx;
	348	}
	349	.priceBox{
	350	display: flex;
	351	flex-direction: row;
	352	justify-content: space-between;
	353	width: 100%;
	354	.price{
	355	color: #FF6B4A;
	356	font-size: 28rpx;
	357	}
	358	.counter{
	359	display: flex;
	360	flex-direction: row;
	361	justify-content: space-between;
	362	font-size: 28rpx;
	363	color: #333333;
	364	width: 122rpx;
	365	.btn{
	366	display: flex;
	367	justify-content: center;
	368	line-height: 32rpx;
	369	height: 32rpx;
	370	width: 32rpx;
	371	background-color: #F2F2F2;
	372	color: #CFCFCF;
	373	}
	374	}
	375	}
	376	}
	377	}
	378
	379	.goods-data{
	380	width: 100%;
	381	box-sizing: border-box;
	382	padding: 37rpx 40rpx 0 40rpx;
	383	background: #FFFFFF;
	384	border-radius: 12rpx;
	385	margin-bottom: 92px;
	386	.opCollapse{
	387	width: 100%;
	388	padding-bottom: 28rpx;
	389	margin-top: 7px;
	390	border-bottom: 1px solid #E9E9E9;
	391	.head{
	392	display: flex;
	393	justify-content: space-between;
	394	height: 24px;
	395	// font-family: PingFangSC-Medium;
	396	font-size: 16px;
	397	color: #333333;
	398	letter-spacing: -0.3px;
	399	text-align: justify;
	400	line-height: 24px;
	401	margin-bottom: 18rpx;
	402	.headRighted{
	403	width: 0;
	404	height: 0;
	405	border-left: 4px solid transparent;
	406	border-right: 4px solid transparent;
	407	border-bottom: 4px solid #CFCFCF;
	408	transform: scaleY(-1);
	409	margin-top: 10px;
	410	}
	411	.headMid{
	412	// font-family: PingFangSC-Regular;
	413	font-size: 10px;
	414	color: #999999;
	415	letter-spacing: -0.19px;
	416	margin-left: -120rpx;
	417	}
	418	.headRight{
	419	width: 0;
	420	height: 0;
	421	border-left: 4px solid transparent;
	422	border-right: 4px solid transparent;
	423	border-bottom: 4px solid #CFCFCF;
	424	margin-top: 10px;
	425	}
	426	}
	427	.body{
	428	// font-family: PingFangSC-Regular;
	429	font-size: 12px;
	430	color: #666666;
	431	letter-spacing: 0;
	432	.bodyBox{
	433	margin-top: 15px;
	434	.names{
	435	// font-family: PingFangSC-Regular;
	436	font-size: 12px;
	437	color: #151515;
	438	letter-spacing: 0;
	439	text-align: justify;
	440	line-height: 17px;
	441	margin-left: 5px;
	442	margin-right: 10px;
	443	}
	444	text{
	445	// font-family: PingFangSC-Regular;
	446	font-size: 12px;
	447	color: #666666;
	448	letter-spacing: 0;
	449	text-align: justify;
	450	}
	451	}
	452
	453	}
	454	}
	455
	456	}
	457
	458	.goods-form {
	459	display: flex;
	460	flex-direction: column;
	461	align-items: center;
	462	justify-content: center;
	463	background-color: #fff;
	464	width: 100%;
	465
	466	.p1 {
	467	font-size: 16px;
	468	color: #333333;
	469	letter-spacing: -0.3px;
	470	text-align: justify;
	471	line-height: 24px;
	472	margin: 4px 0;
	473
	474	}
	475	.p2 {
	476	font-size: 12px;
	477	color: #999999;
	478	letter-spacing: -0.23px;
	479	margin-bottom: 18rpx;
	480	}
	481	image{
	482	width: 28rpx;
	483	height: 26rpx;
	484	}
	485	.confirm {
	486	display: flex;
	487	align-items: center;
	488	font-size: 12px;
	489	color: #666666;
	490	letter-spacing: -0.23px;
	491	width: 684rpx;
	492	image{
	493	margin-right:25rpx;
	494	}
	495	}
	496	.picker{
	497	display: flex;
	498	flex-direction: column;
	499	justify-content: center;
	500	align-items: center;
	501	width: 100%;
	502	image{
	503	width: 10px;
	504	height: 10px;
	505	margin-right: 5px;
	506	}
	507	.picker-choice{
	508	display: flex;
	509	width: 684rpx;
	510	align-items: center;
	511	margin-bottom: 40rpx;
	512	.choice-left{
	513	width: 210rpx;
	514	.p11 {
	515	font-size: 14px;
	516	color: #333333;
	517	letter-spacing: -0.26px;
	518	text-align: justify;
	519	line-height: 24px;
	520	// margin-right: 10px;
	521	}
	522	.p12 {
	523	font-size: 10px;
	524	color: #3F3F3F;
	525	letter-spacing: -0.19px;
	526	text-align: justify;
	527	line-height: 24px;
	528	}
	529
	530
	531	}
	532	.p13 {
	533	font-size: 10px;
	534	color: #999999;
	535	letter-spacing: -0.19px;
	536	margin-right: 10px;
	537	}
	538	.p13-date {
	539	font-size: 10px;
	540	color: #999999;
	541	letter-spacing: -0.19px;
	542	margin-right: 5px;
	543	}
	544	.p14 {
	545	font-size: 14px;
	546	color: #666666;
	547	letter-spacing: -0.26px;
	548	text-align: center;
	549	width: 124rpx;
	550	border-bottom: 1px solid #CFCFCF;
	551	}
	552
	553	}
	554	}
	555	}
	556
	557	.submit{
	558	width: 100%;
	559	height: 112rpx;
	560	background: #FF6B4A;
	561	position: fixed;
	562	bottom: 0;
	563	text-align: center;
	564	line-height: 112rpx;
	565	// font-family: PingFangSC-Regular;
	566	font-size: 16px;
	567	color: #FFFFFF;
	568	letter-spacing: -0.3px;
	569	}
	570
	571	</style>
	572

src/pages/myOrder/myOrder.vue

Diff comments View file @c338b49

 <template>
 	<view class="content">
 		<view class="header">
 			<!-- 搜索-->
 			<view class="searchBar">
 				<icon class="searchIcon" type="search" size="14"></icon>
 				<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
 			</view>
 			<view class="screenBar">
 				<view  v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"  >
 						<view class="screenItem"  v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
 				</view>
 			</view>
 		</view>
 		<view class="orderList" >
 			<view
 			  v-for="(order) in orderList"
 			  :key="order.orderId"
 			>
 				<OrderCard :order = "order" :current="current"></OrderCard>
 			</view>
 		</view>
-		<view class="footer">已显示全部</view>
+		<navigator url="/pages/user/user" open-type="switchTab"><view class="footer">已显示全部</view></navigator>
+		<!-- <view class="footer">已显示全部</view> -->
 	</view>
 </template>
 <script>
 	import OrderCard from './components/OrderCard.vue';
 	import store from '@/store';
 	export default {
 		components:{
 			'OrderCard': OrderCard
 		},
 		data() {
 			return {
 				screenItems: [
 					{current:0,text:'全部'},
 					{current:1,text:'待付款'},
 					{current:2,text:'待发货'},
 					{current:3,text:'待收货'},
 					{current:4,text:'退款售后'},
 					],
 				current: 0,
 				//订单数据
 				// orderList:[
 				// 	{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
 				// 	{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
 				// 	{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
 				// 	{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
 				// 	{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
 				// 	{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
 				// 	{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
 				// 	{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
 				// 	{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
 				// ],
 			};
 		},
 		onLoad: function() {
 			store.dispatch('myOrder/getList', {
 				uid: "1",
 				way: "0",
 			});
 		},
 		computed: {
 			orderList() {
 				console.log('orderList', this.$store.state.myOrder.orderlist);
 				return this.$store.state.myOrder.orderlist;
 			}
 		},
 		methods:{
 			onClickItem(e) {
 				if (this.current !== e) {
 					this.current = e;
 				}
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		background-color: #F7F6F6;
 		min-height: 100vh;
 		.header{
 			background-color: #ffffff;
 			width: 100%;
 			height: 232rpx;
 			padding: 40rpx 40rpx 36rpx 40rpx;
 			box-sizing: border-box;
 			position: fixed;
 			top: 0;
 			left: 0;
 			.searchBar {
 				width: 670rpx;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				box-sizing: border-box;
 				padding: 0rpx 16rpx;
 				border: 1px solid #FF6B4A;
 				border-radius: 8rpx;
 				background-color: #ffffff;
 			}
 			.screenBar{
 				width: 670rpx;
 				height: 110rpx;
 				display: flex;
 				flex-direction: row;
 				justify-content: space-between;
 				align-items: center;
 				color: #333333;
 				font-size: 32rpx;
 			}
 			.screenItem{
 				height: 50rpx;
 				font-size: 32rpx;
 				color: #333333;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				transition:all 0.2s;
 			}
 			.active{
 				// font-size: 34rpx;
 				color: #EC5D3B;
 			}
 			.searchIpt {
 				height: 68rpx;
 				width: 670rpx;
 				padding: 16rpx;
 				font-size: 28rpx;
 				box-sizing: border-box;
 			}
 		}
 		.orderList{
 			margin-top: 232rpx;
 		}
 		.footer{
 			font-size: 14px;
 			color: #B8B8B8;
 			margin: 40rpx 0;
 		}
 	}
 </style>

src/pages/myOrderPaying/myOrderPaying.vue

Diff comments View file @c338b49

1	<template>	1	<template>
2	<view class="content">	2
3	<!-- <view class="header">	3	<view class="content">
4	<view class="header-name">	4	<view class="order-hr"></view>
5	<navigator open-type="navigateBack" hover-class="navigator-hover">	5	<view class="order-time">
6	<image src="/static/back.png"></image>	6	<text>请在</text>
7	</navigator>	7	<!-- <text class="p2"></text> -->
8	<text>我的订单</text>	8	<uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
9	</view>	9	:hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
10	</view> -->	10	<text>内完成付款</text>
11	<scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }">	11	</view>
12	<view class="order-hr"></view>
13	<view class="order-time">
14	<text>请在</text>
15	<text class="p2">00:59:58 </text>
16	<text>内完成付款</text>
17	</view>
18	<view class="order-user">	12	<view class="order">
19	<view class="order-user-head">	13	<view class="order-user">
20	<text class="p1">钱大大</text>	14	<view class="order-user-head">
21	<text class="p2">18823749843</text>	15	<text class="p1">钱大大</text>
22	</view>	16	<text class="p2">18823749843</text>
23	<view class="order-user-body">	17	</view>
24	<image src="../../static/myorder-paying-location.png"></image>	18	<view class="order-user-body">
25	<text class="p3">四川省德阳市旌阳区</br>黄河西路碧桂园3期 4单元 202</text>	19	<image src="../../static/myorder-paying-location.png"></image>
26	</view>	20	<text class="p3">四川省德阳市旌阳区</br>黄河西路碧桂园3期 4单元 202</text>
27	</view>	21	</view>
28	<view class="order-info">	22	</view>
29	<view class="order-info-head">	23	<view class="order-info">
30	<image src="../../static/myorder-paying-pic.png"></image>	24	<view class="order-info-head">
31	<view class="order-info-head-r">	25	<image src="../../static/myorder-paying-pic.png"></image>
32	<text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>	26	<view class="order-info-head-r">
33	<text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text>	27	<text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
34	<text class="p3">￥180</text>	28	<view class="p2" style="margin: 0;">
		29	规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
		30	<!-- <view class="arrow"></view> -->
		31	</view>
35	</view>	32	<text class="p3"><span>￥180</span><span class="p4">X1</span></text>
36	</view>	33	</view>
37	<view class="order-info-goodsnum">	34	</view>
38	<text>X1</text>	35	<!-- <view class="order-info-goodsnum">
39	</view>	36	<text>X1</text>
40	<text class="order-info-freight">	37	</view> -->
41	<text class="p1">运费</text>	38	<text class="order-info-freight">
42	<text class="p2">0.00</text>	39	<text class="p1">运费</text>
43	</text>	40	<text class="p2">0.00</text>
44	<text class="order-info-discount">	41	</text>
45	<text class="p1">优惠</text>	42	<text class="order-info-discount">
46	<text class="p2">-￥70.00</text>	43	<text class="p1">优惠</text>
47	</text>	44	<text class="p2">-￥70.00</text>
48	<text class="order-info-price">	45	</text>
49	<text class="p1">实付</text>	46	<text class="order-info-price">
50	<text class="p2">￥110</text>	47	<text class="p1">实付</text>
51	</text>	48	<text class="p2">￥110</text>
52	<text class="order-info-num">	49	</text>
53	<text>订单号：203486795859605849</text>	50	<text class="order-info-num">
54	</text>	51	<text>订单号：203486795859605849</text>
55	<text class="order-info-time">	52	</text>
56	<text>下单时间：2020-10-22 14:32:42</text>	53	<text class="order-info-time">
57	</text>	54	<text>下单时间：2020-10-22 14:32:42</text>
58	<view class="order-info-hr"></view>	55	</text>
59	<view class="order-info-contact">	56	<view class="order-info-hr"></view>
60	<image src="../../static/myorder-paying-contact.png"></image>	57	<view class="order-info-contact">
61	<text>联系客服</text>	58	<image src="../../static/myorder-paying-contact.png"></image>
62	</view>	59	<text>联系客服</text>
63	</view>	60	</view>
64	</scroll-view>	61	</view>
65	<view class="order-confim">	62	</view>
66	<button class="b1">取消订单</button>	63	<view class="order-confim">
67	<button class="b2">立即支付</button>	64	<button class="b1">取消订单</button>
68	</view>	65	<button class="b2">立即支付</button>
69	</view>	66	</view>
70	</template>	67	</view>
71		68	</template>
72	<script>	69
		70	<script>
73	export default {	71	import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
		72	export default {
		73	components: {
		74	UniCountdown
74	data() {	75	},
75	return {	76	data() {
76	scrollHeight: false,	77	return {
77	}	78	scrollHeight: false,
78	},	79	}
79	methods: {	80	},
80		81	methods: {
81	}	82
82	}	83	}
83	</script>	84	}
84		85	</script>
85	<style lang="scss" scoped>	86
86	.content{	87	<style lang="scss" scoped>
87	display: flex;	88	.content{
88	flex-direction: column;	89	display: flex;
89	justify-content: center;	90	flex-direction: column;
90	align-items: center;	91	justify-content: center;
		92	align-items: center;
91	}	93	background-color: #f2f2f2;
92		94	}
93	.header{
94	display: flex;
95	flex-direction: column;
96	align-items: center;
97	justify-content: center;
98	width: 100%;
99	height: 44px;
100	position: fixed;
101	top: 0;
102	z-index: 999;
103	background-color: #fff;
104	.header-name{
105	display: flex;
106	align-items: center;
107	width: 670rpx;
108	image {
109	width: 11px;
110	height: 18px;
111	}
112	text {
113	// font-family: PingFangSC-Regular;
114	font-size: 36rpx;
115	color: #333333;
116	letter-spacing: -0.34px;
117	margin: 0 0 10rpx 54rpx;
118	}
119	}
120	}
121		95
122	.scroll-view {	96
123	// height: 1760rpx; // 测试	97	.order {
		98	min-height: 1196rpx;
124	background: #F2F2F2;	99	margin-bottom: 112rpx;
125	}	100	background: #F2F2F2;
126	.order-hr {	101	}
127	width: 100%;	102	.order-hr {
128	height: 1px;	103	width: 100%;
129	background-color: #E9E9E9;	104	height: 1px;
130	}	105	background-color: #E9E9E9;
131	.order-time {	106	}
132	width: 100%;	107	.order-time {
133	height: 140rpx;	108	width: 100%;
134	background-color: #fff;	109	height: 140rpx;
135	display: flex;	110	background-color: #fff;
136	justify-content: center;	111	display: flex;
137	text {	112	justify-content: center;
138	// font-family: PingFangSC-Regular;	113	text {
139	margin-top: 48rpx;	114	// font-family: PingFangSC-Regular;
140	font-size: 14px;	115	margin-top: 48rpx;
141	color: #333333;	116	font-size: 14px;
142	letter-spacing: -0.26px;	117	color: #333333;
143	}	118	letter-spacing: -0.26px;
144	.p2 {	119	}
145	// font-family: DINAlternate-Bold;	120	.p2 {
146	margin: 42rpx 20rpx 0 20rpx;	121	// font-family: DINAlternate-Bold;
147	font-size: 18px;	122	margin: 42rpx 20rpx 0 20rpx;
148	color: #EC5D3B;	123	font-size: 18px;
149	letter-spacing: -0.34px;	124	color: #EC5D3B;
150	}	125	letter-spacing: -0.34px;
151	}	126	}
152		127	}
153	.order-user {	128
154	width: 670rpx;	129	.order-user {
155	height: 228rpx;	130	width: 670rpx;
156	background: #FFFFFF;	131	height: 228rpx;
157	border-radius: 14rpx;	132	background: #FFFFFF;
158	margin: 0 auto;	133	border-radius: 14rpx;
159	margin-top: 20rpx;	134	margin: 0 auto;
160	margin-bottom: 20rpx;	135	margin-top: 20rpx;
161	.order-user-head {	136	margin-bottom: 20rpx;
162	display: flex;	137	.order-user-head {
163	height: 108rpx;	138	display: flex;
164	width: 100%;	139	height: 108rpx;
165	align-items: center;	140	width: 100%;
166	margin-left: 126rpx;	141	align-items: center;
167	.p1 {	142	margin-left: 126rpx;
168	// font-family: PingFangSC-Regular;	143	.p1 {
169	font-size: 14px;	144	// font-family: PingFangSC-Regular;
170	color: #333333;	145	font-size: 14px;
171	letter-spacing: -0.26px;	146	color: #333333;
172	margin-right: 20rpx;	147	letter-spacing: -0.26px;
173	}	148	margin-right: 20rpx;
174	.p2 {	149	}
175	// font-family: PingFangSC-Regular;	150	.p2 {
176	font-size: 14px;	151	// font-family: PingFangSC-Regular;
177	color: #999999;	152	font-size: 14px;
178	letter-spacing: -0.26px;	153	color: #999999;
179	}	154	letter-spacing: -0.26px;
180	}	155	}
181	.order-user-body {	156	}
182	display: flex;	157	.order-user-body {
183	width: 100%;	158	display: flex;
184	image{	159	width: 100%;
185	width: 24px;	160	image{
186	height: 26px;	161	width: 24px;
187	margin: 12rpx 32rpx 0 40rpx;	162	height: 26px;
188	}	163	margin: 12rpx 32rpx 0 40rpx;
189	.p3 {	164	}
190	// font-family: PingFangSC-Semibold;	165	.p3 {
191	font-size: 14px;	166	// font-family: PingFangSC-Semibold;
192	color: #333333;	167	font-size: 14px;
193	letter-spacing: -0.26px;	168	color: #333333;
194	}	169	letter-spacing: -0.26px;
195	}	170	}
196	}	171	}
197		172	}
198	.order-info {	173
199	width: 670rpx;	174	.order-info {
200	background-color: #fff;	175	width: 670rpx;
201	box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);	176	background-color: #fff;
202	border-radius: 16rpx;	177	box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
203	margin: 0 auto;	178	border-radius: 16rpx;
204	view{	179	margin: 0 auto;
205	margin-left: 40rpx;	180	view{
206	}	181	margin-left: 40rpx;
207	text{	182	}
208	font-size: 14px;	183	text{
209	}	184	font-size: 14px;
210	.order-info-head {	185	}
211	display: flex;	186	.order-info-head {
212	padding-top: 40rpx;	187	display: flex;
213	image{	188	padding-top: 40rpx;
214	height: 188rpx;	189	image{
215	width: 188rpx;	190	height: 188rpx;
216	}	191	width: 188rpx;
217	.order-info-head-r{	192	}
218	margin: 0;	193	.order-info-head-r{
219	width: 368rpx;	194	margin: 0;
220	margin-left: 24rpx;	195	width: 368rpx;
221	// margin-top: 40rpx;	196	margin-left: 24rpx;
222	text{	197	// margin-top: 40rpx;
223	display: block;	198	text{
224	}	199	display: block;
		200	}
		201	// .arrow{
		202	// width: 0;
		203	// height: 0;
		204	// border-left: 5px transparent;
		205	// border-right: 5px transparent;
		206	// border-top: 5px #979797;
		207	// border-bottom: 0 transparent;
		208	// border-style: solid;
		209	// position: relative;
		210	// // transform: scaleY(-1);
		211	// }
		212	// .arrow::after{
		213	// content: '';
		214	// position: absolute;
		215	// top: -6.5px;
		216	// left: -5px;
		217	// border-left: 5px transparent;
		218	// border-right: 5px transparent;
		219	// border-top: 5px #FFFFFF;
		220	// border-bottom: 0 transparent;
		221	// border-style: solid;
225	.p1 {	222	// }
226	height: 40px;	223	.p1 {
227	// font-family: PingFangSC-Regular;	224	min-height: 40px;
228	font-size: 14px;	225	// font-family: PingFangSC-Regular;
229	color: #333333;	226	font-size: 14px;
230	letter-spacing: -0.26px;	227	color: #333333;
231	line-height: 18px;	228	letter-spacing: -0.26px;
232	// line-height: 20px;	229	line-height: 18px;
233	}	230	// line-height: 20px;
234	.p2 {	231	}
235	height: 34px;	232	.p2 {
236	padding: 1px 0 3px 0;	233	height: 34px;
237	// font-family: PingFangSC-Regular;	234	padding: 1px 0 3px 0;
238	font-size: 12px;	235	// font-family: PingFangSC-Regular;
239	color: #999999;	236	font-size: 12px;
240	letter-spacing: -0.23px;	237	color: #999999;
241	}	238	letter-spacing: -0.23px;
242	.p3 {	239	}
243	height: 20px;	240	.p3 {
244	// font-family: PingFangSC-Regular;	241	height: 20px;
245	font-size: 14px;	242	// font-family: PingFangSC-Regular;
246	color: #FF6B4A;	243	font-size: 14px;
247	letter-spacing: -0.26px;	244	color: #FF6B4A;
248	}	245	letter-spacing: -0.26px;
		246	}
		247	.p4{
		248	font-size: 12px;
		249	color: #999999;
		250	letter-spacing: -0.23px;
		251	margin-left: 10px;
249	}	252	}
250		253	}
251	}	254
252	.order-info-goodsnum {	255	}
253	display: flex;	256	// .order-info-goodsnum {
254	align-items: center;	257	// display: flex;
255	justify-content: flex-end;	258	// align-items: center;
256	text {	259	// justify-content: flex-end;
257	margin-right: 44rpx;	260	// text {
258	// ont-family: PingFangSC-Regular;	261	// margin-right: 44rpx;
259	font-size: 12px;	262	// // ont-family: PingFangSC-Regular;
260	color: #999999;	263	// font-size: 12px;
261	letter-spacing: -0.23px;	264	// color: #999999;
262	}	265	// letter-spacing: -0.23px;
263	}	266	// }
264	.order-info-freight {	267	// }
265	display: block;	268	.order-info-freight {
266	margin-left: 40rpx;	269	display: block;
267	margin-top: 22rpx;	270	margin-left: 40rpx;
268	.p1{	271	margin-top: 22rpx;
269	// font-family: PingFangSC-Regular;	272	.p1{
270	font-size: 14px;	273	// font-family: PingFangSC-Regular;
271	color: #333333;	274	font-size: 14px;
272	letter-spacing: -0.26px;	275	color: #333333;
273	line-height: 18px;	276	letter-spacing: -0.26px;
274	margin-right: 24px;	277	line-height: 18px;
275	}	278	margin-right: 24px;
276	.p2 {	279	}
277	// font-family: PingFangSC-Regular;	280	.p2 {
278	font-size: 14px;	281	// font-family: PingFangSC-Regular;
279	color: #FF6B4A;	282	font-size: 14px;
280	letter-spacing: -0.26px;	283	color: #FF6B4A;
281	}	284	letter-spacing: -0.26px;
282	}	285	}
283	.order-info-discount {	286	}
284	display: block;	287	.order-info-discount {
285	margin-left: 40rpx;	288	display: block;
286	margin-top: 24rpx;	289	margin-left: 40rpx;
287	.p1 {	290	margin-top: 24rpx;
288	// font-family: PingFangSC-Regular;	291	.p1 {
289	font-size: 14px;	292	// font-family: PingFangSC-Regular;
290	color: #333333;	293	font-size: 14px;
291	letter-spacing: -0.26px;	294	color: #333333;
292	line-height: 18px;	295	letter-spacing: -0.26px;
293	margin-right: 24px;	296	line-height: 18px;
294	}	297	margin-right: 24px;
295	.p2 {	298	}
296	// font-family: PingFangSC-Regular;	299	.p2 {
297	font-size: 14px;	300	// font-family: PingFangSC-Regular;
298	color: #FF6B4A;	301	font-size: 14px;
299	letter-spacing: -0.26px;	302	color: #FF6B4A;
300	}	303	letter-spacing: -0.26px;
301	}	304	}
302	.order-info-price {	305	}
303	display: block;	306	.order-info-price {
304	margin-left: 40rpx;	307	display: block;
305	margin-top: 24rpx;	308	margin-left: 40rpx;
306	.p1 {	309	margin-top: 24rpx;
307	// font-family: PingFangSC-Semibold;	310	.p1 {
308	font-size: 14px;	311	// font-family: PingFangSC-Semibold;
309	color: #333333;	312	font-size: 14px;
310	letter-spacing: -0.26px;	313	color: #333333;
311	line-height: 18px;	314	letter-spacing: -0.26px;
312	margin-right: 24px;	315	line-height: 18px;
313	}	316	margin-right: 24px;
314	.p2 {	317	}
315	// font-family: PingFangSC-Semibold;	318	.p2 {
316	font-size: 14px;	319	// font-family: PingFangSC-Semibold;
317	color: #FF6B4A;	320	font-size: 14px;
318	letter-spacing: -0.26px;	321	color: #FF6B4A;
319	}	322	letter-spacing: -0.26px;
320	}	323	}
321	.order-info-num{	324	}
322	display: block;	325	.order-info-num{
323	margin-left: 40rpx;	326	display: block;
324	margin-top: 44rpx;	327	margin-left: 40rpx;
325	text{	328	margin-top: 44rpx;
326	// font-family: PingFangSC-Regular;	329	text{
327	font-size: 12px;	330	// font-family: PingFangSC-Regular;
328	color: #999999;	331	font-size: 12px;
329	letter-spacing: -0.23px;	332	color: #999999;
330	}	333	letter-spacing: -0.23px;
331	}	334	}
332	.order-info-time {	335	}
333	display: block;	336	.order-info-time {
334	margin: 8rpx 0 48rpx 40rpx;	337	display: block;
335	text{	338	margin: 8rpx 0 48rpx 40rpx;
336	// font-family: PingFangSC-Regular;	339	text{
337	font-size: 12px;	340	// font-family: PingFangSC-Regular;
338	color: #999999;	341	font-size: 12px;
339	letter-spacing: -0.23px;	342	color: #999999;
340	}	343	letter-spacing: -0.23px;
341	}	344	}
342	.order-info-hr{	345	}
343	width: 520rpx;	346	.order-info-hr{
344	height: 1px;	347	width: 520rpx;
345	background-color: #E9E9E9;	348	height: 1px;
346	margin-bottom: 20rpx;	349	background-color: #E9E9E9;
347	}	350	margin-bottom: 20rpx;
348	.order-info-contact {	351	}
349	display: flex;	352	.order-info-contact {
350	padding-bottom: 28rpx;	353	display: flex;
351	image{	354	padding-bottom: 28rpx;
352	width: 19px;	355	image{
353	height: 16px;	356	width: 19px;
354	}	357	height: 16px;
355	text {	358	}
356	// font-family: PingFangSC-Regular;	359	text {
357	margin-left: 20rpx;	360	// font-family: PingFangSC-Regular;
358	font-size: 14px;	361	margin-left: 20rpx;
359	color: #333333;	362	font-size: 14px;
360	letter-spacing: -0.26px;	363	color: #333333;
361	line-height: 18px;	364	letter-spacing: -0.26px;
362	}	365	line-height: 18px;
363	}	366	}
364	}	367	}
365		368	}

src/pages/user/user.vue

Diff comments View file @c338b49

 <template>
 	<view class="wrap">
 		<view class="content">
 			<view class="userInfo">
 				<view class="info">
 					<image src="../../static/img/detail/d10.png" mode="aspectFill"></image>
 					<view class="infoText">
 						<text class="userName">{{userName}}</text>
 						<text class="nickName">用户名：骆驼不死的祥子</text>
 					</view>
 				</view>
 				<view class="service">
 					<image src="../../static/serviceLogo.png" mode="aspectFill"></image>
 				</view>
 			</view>
 			<view class="myOrder">
 				<view class="orderHeader">
 					<text>全部订单</text>
 					<view class="btn" @click="toMyOrder">
 						全部
 						<image src="../../static/right.png" mode="aspectFill"></image>
 					</view>
 				</view>
 				<view class="orderBody">
-					<view class="item,waitPay" @click=toMyOrderPaying>
+					<view class="item waitPay" @click="toMyOrderPaying">
-						<image src="../../static/waitPay.png" mode="aspectFill"></image>
+						<image src="../../static/waitDeliver.png" mode="aspectFill"></image>
 						<text>待付款</text>
 					</view>
-					<view class="item,waitDeliver" @click=toPredelivery>
+					<view class="item waitDeliver" @click="toPredelivery" >
 						<image src="../../static/waitDeliver.png" mode="aspectFill"></image>
 						<text>待发货</text>
 					</view>
-					<view class="item,waitReceive">
+					<view class="item waitReceive" @click="torefunProgress">
 						<image src="../../static/waitReceive.png" mode="aspectFill"></image>
 						<text>待收货</text>
 					</view>
-					<view class="item,service">
+					<view class="item service" @click="torefundment">
 						<image src="../../static/service.png" mode="aspectFill"></image>
 						<text>退换/售后</text>
 					</view>
 				</view>
 			</view>
 			<view class="recommend">
 				<view class="title">
 					<view class="line"></view>
 					<view class="text">精选推荐</view>
 					<view class="line"></view>
 				</view>
 				<!-- 商品列表 -->
 				<view class="goods-list">
 					<view class="product-list">
 						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
 							<Card :goods = "goods"></Card>
 						</view>
 					</view>
 					<view class="loading-text">{{loadingText}}</view>
 				</view>
 			</view>
 		</view>
 	</view>
 </template>
 <script>
 	import Card from "@/components/CommodityCard/CommodityCard.vue"
 	export default {
 		components: {
 			'Card':Card
 			},
 		data() {
 			return {
 				//商品数据
 				goodsList:[
-					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
 				],
 				headerphoto:'',
 				userName:'Adam'
 			}
 		},
 		onLoad() {
 		},
 		methods: {
 			toMyOrder(){
 				uni.navigateTo({
 					url: '../myOrder/myOrder?current=0',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
 			},
 			toPredelivery(){
 				uni.navigateTo({
 					url: '../myOrder/myOrder?current=2',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
 			},
 			toMyOrderPaying(){
 				uni.navigateTo({
 					url: '../myOrder/myOrder?current=1',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
+			},
+			torefundment(){
+				uni.navigateTo({
+					url:'../refundment/refundment',
+				})
+			},
+			torefunProgress(){
+				uni.navigateTo({
+					url:'../refundProgress/refundProgress'
+				})
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	.warp{
 		font-size: 24rpx;
 		background-color: #f2f2f2;
 		height: 100vh;
 	}
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		background-color: #F2F2F2;
 	}
 	.userInfo{
 		background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
 		width: 100%;
 		height: 240rpx;
 		color: #FFFFFF;
 		padding: 60rpx 82rpx 80rpx 44rpx;
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: flex-start;
 		.info{
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
 			image{
 				border-radius: 50rpx;
 				height: 100rpx ;
 				width: 100rpx;
 				margin-right: 40rpx;
 			}
 			.infoText{
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
 				align-items: flex-scetart;
 				.userName{
 					font-size: 18px;
 					color: #FFFFFF;
 					margin-bottom: 8rpx;
 				}
 				.nickName{
 					font-size: 12px;
 					color: #FFFFFF;
 				}
 			}
 		}
 		.service{
 			image{
 				height: 36rpx;
 				width: 36rpx;
 			}
 		}
 	}
 	.myOrder{
 		width: 100%;
 		height: 296rpx;
 		margin-top: 20rpx;
 		margin-bottom: 20rpx;
 		padding: 0 40rpx;
 		box-sizing: border-box;
 		background: #FFFFFF;
 		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
 		border-radius: 6px;
 		border-radius: 6px;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-around;
 		align-items: center;
 		.orderHeader{
 			width: 100%;
 			height: 100rpx;
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
 			border-bottom: 1px solid #E9E9E9;;
 			font-weight: bold;
 			font-size: 18px;
 			color: #333333;
 			.btn{
 				font-size: 12px;
 				color: #999999;
 				image{
 					margin-left: 20rpx;
 					height: 16rpx;
 					width: 8rpx;
 				}
 			}
 		}
 		.orderBody{
 			width: 100%;
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
 			.item{
 				display: flex;
 				flex-direction: column;
 				align-items: center;
 				image{
 					width: 46rpx;
 					height: 46rpx;
 				}
 				text{
 					margin-top: 24rpx;
 					font-size: 12px;
 					color: #333333;
 				}
 			}
 		}
 	}
 	.recommend{
 		background: #FFFFFF;
 		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
 		border-radius: 6px;
 		border-radius: 6px;
+		width: 100%;
 		.title{
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 			justify-content: space-between;
 			padding: 20rpx 40rpx;
 			.line{
 				width: 264rpx;
 				height: 1rpx;
 				border-bottom: 1px solid #EAEAEA;
 			}
 			.text{
 				font-family: PingFangSC-Medium;
 				font-size: 14px;
 				color: #333333;
 				letter-spacing: -0.26px;
 				text-align: justify;
 				line-height: 24px;
 			}
 		}
 		.goods-list{
 			.loading-text{
 				width: 100%;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				height: 30px;
 				color: #979797;
 				font-size: 12px;
 			}
 			.product-list{
 				width: 92%;
 				padding: 0 4% 3vw 4%;
 				display: flex;
 				justify-content: space-between;
 				flex-wrap: wrap;
 				.product{
 					width: 48%;
 					margin: 0 0 20rpx 0;
 					background: #FFFFFF;
 					border: 1px solid #F2F2F2;
 				}
 			}
 		}
 	}
 </style>