刘文博 / gulu-vue

Browse Code »

Commit 387a4dd4779d448607c12479e6b42330d11237d8

Authored by BigBoss 2020-05-06 00:01:31 +0800

2 parents f7e3068a18 768c40b1e1

Exists in master

Merge branch 'master' of http://121.40.31.31:8888/jp/gulu-vue

Showing 21 changed files Show diff stats

src/pages.json

Diff comments View file @387a4dd

 {
 	"pages": [
 		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "商城一览"
 				// "enablePullDownRefresh":true
 			}
 		},
 		{
             "path" : "pages/refund/refund",
 			"style": {
 				"navigationBarTitleText": "申请退款"
 			}
         },
         {
             "path" : "pages/myOrder/myOrder",
             "style" : {
 				"navigationBarTitleText": "我的订单"}
         },
 		{
 			"path": "pages/addArddess/addArddess",
 			"style": {
 				"navigationBarTitleText": "新增地址"
 			}
 		},
         {
             "path" : "pages/confirmOrder/confirmOrder",
             "style" : {
 				"navigationBarTitleText": "确认订单"}
         },
 		{
 			"path": "pages/cart/cart",
 			"style": {
 				"navigationBarTitleText": "购物车"
 			}
 		},
 		{
 			"path": "pages/user/user",
 			"style": {
 				"navigationBarTitleText": "我的"
+			}
+		},
+		{
+			"path": "pages/details-3/details-3"
+		},
+		{
+			"path": "pages/refundment/Refundways"
+		},
+		{
+			"path": "pages/refundment/refundment"
+		},
+		{
-			}
+			"path": "pages/customerService/customerService"
 		},
 		{
-			"path": "pages/details-3/details-3"
+			"path": "pages/myorder-paying/myorder-paying"
 		},
 		{
 			"path": "pages/detail/detail"
 		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	},
 	"tabBar": {
 		"color": "#C0C4CC",
 		"selectedColor": "#fa436a",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{
 				"pagePath": "pages/index/index",
 				"iconPath": "static/tab-home.png",
 				"selectedIconPath": "static/tab-home-current.png",
 				"text": "首页"
 			},
 			{
 				"pagePath": "pages/cart/cart",
 				"iconPath": "static/tab-cart.png",
 				"selectedIconPath": "static/tab-cart-current.png",
 				"text": "购物车"
 			},
 			{
 				"pagePath": "pages/user/user",
 				"iconPath": "static/tab-my.png",
 				"selectedIconPath": "static/tab-my-current.png",
 				"text": "我的"
 			}
 		]
 	}
 }

src/pages/addArddess/addArddess.vue

Diff comments View file @387a4dd

1	<template>	1	<template>
2	<view class="wrap">	2	<view class="wrap">
3	<view class="content">	3	<view class="content">
4	<view class="item,name" >	4	<view class="item,name" >
5	<text class="itemText">姓名</text>	5	<text class="itemText">姓名</text>
6	<input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/>	6	<input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/>
7	</view>	7	</view>
8	<view class="item,phone">	8	<view class="item,phone">
9	<text class="itemText">电话</text>	9	<text class="itemText">电话</text>
10	<input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/>	10	<input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/>
11	</view>	11	</view>
12	<view class="item,area" >	12	<view class="item,area" >
13	<text class="itemText">地区</text>	13	<text class="itemText">地区</text>
14	<view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view>	14	<view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view>
15	<view class="btn" v-else @tap="openAddres">{{pickerText}}</view>	15	<view class="btn" v-else @tap="openAddres">{{pickerText}}</view>
16	<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>	16	<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
17	</view>	17	</view>
18	<view class="item,address" >	18	<view class="item,address" >
19	<text class="itemText">详细地址</text>	19	<text class="itemText">详细地址</text>
20	<input placeholder="街道、小区门牌等详细地址"/>	20	<input placeholder="街道、小区门牌等详细地址"/>
21	</view>	21	</view>
22	<view class="item,check" >	22	<view class="item,check" >
23	<text class="itemText">设为默认地址</text>	23	<text class="itemText">设为默认地址</text>
24	<switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" />	24	<switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" />
25	</view>	25	</view>
26	<input />	26	<input />
27	</view>	27	</view>
28	<view class="button">保存并使用</view>	28	<view class="button">保存并使用</view>
29	</view>	29	</view>
30	</template>	30	</template>
31		31
32	<script>	32	<script>
33	import simpleAddress from '@/components/Simple-address/Simple-address.vue';	33	import simpleAddress from '@/components/Simple-address/simple-address.vue';
34	export default {	34	export default {
35	data() {	35	data() {
36	return {	36	return {
37	cityPickerValueDefault: [0, 0, 1],	37	cityPickerValueDefault: [0, 0, 1],
38	pickerText: '',	38	pickerText: '',
39	isDefalutAddress:true	39	isDefalutAddress:true
40		40
41	};	41	};
42	},	42	},
43	components: {	43	components: {
44	simpleAddress	44	simpleAddress
45	},	45	},
46	methods: {	46	methods: {
47	openAddres() {	47	openAddres() {
48	this.cityPickerValueDefault = [0,0,1]	48	this.cityPickerValueDefault = [0,0,1]
49	this.$refs.simpleAddress.open();	49	this.$refs.simpleAddress.open();
50	},	50	},
51	onConfirm(e) {	51	onConfirm(e) {
52	this.pickerText = e.label;	52	this.pickerText = e.label;
53	},	53	},
54	changeDefalutAddress(e){	54	changeDefalutAddress(e){
55	this.isDefalutAddress = e.target.value	55	this.isDefalutAddress = e.target.value
56	}	56	}
57	}	57	}
58	}	58	}
59	</script>	59	</script>
60		60
61	<style lang="scss">	61	<style lang="scss">
62	.wrap{	62	.wrap{
63	height: 100vh;	63	height: 100vh;
64	background-color:#F2F2F2 ;	64	background-color:#F2F2F2 ;
65	font-family: PingFangSC-Regular;	65	font-family: PingFangSC-Regular;
66	letter-spacing: -0.23px;	66	letter-spacing: -0.23px;
67	padding-top: 19rpx;	67	padding-top: 19rpx;
68	}	68	}
69	.content{	69	.content{
70	background-color: #FFFFFF;	70	background-color: #FFFFFF;
71	border-radius: 8px;	71	border-radius: 8px;
72	border-radius: 8px;	72	border-radius: 8px;
73	padding: 40rpx 56rpx;	73	padding: 40rpx 56rpx;
74	margin-left: 40rpx;	74	margin-left: 40rpx;
75	width: 670rpx;	75	width: 670rpx;
76	box-sizing: border-box;	76	box-sizing: border-box;
77	.item{	77	.item{
78	display: flex;	78	display: flex;
79	justify-content: flex-start;	79	justify-content: flex-start;
80	font-size: 14px;	80	font-size: 14px;
81	align-items: center;	81	align-items: center;
82	height: 112rpx;	82	height: 112rpx;
83	border-bottom: 1rpx solid #E9E9E9;	83	border-bottom: 1rpx solid #E9E9E9;
84	.itemText{	84	.itemText{
85	width: 162rpx;	85	width: 162rpx;
86	font-family: PingFangSC-Regular;	86	font-family: PingFangSC-Regular;
87	letter-spacing: -0.26px;	87	letter-spacing: -0.26px;
88	}	88	}
89	.btn{	89	.btn{
90	color: #333333 !important;	90	color: #333333 !important;
91	}	91	}
92	}	92	}
93	.check{	93	.check{
94	justify-content: space-between;	94	justify-content: space-between;
95	}	95	}
96	}	96	}
97	.button{	97	.button{
98	position: fixed;	98	position: fixed;
99	bottom: 0;	99	bottom: 0;
100	left: 0;	100	left: 0;
101	height: 112rpx;	101	height: 112rpx;
102	width: 100%;	102	width: 100%;
103	background: #FF6B4A;	103	background: #FF6B4A;
104	display: flex;	104	display: flex;
105	justify-content: center;	105	justify-content: center;
106	align-items: center;	106	align-items: center;
107	font-size: 16px;	107	font-size: 16px;
108	color: #FFFFFF;	108	color: #FFFFFF;
109	letter-spacing: -0.3px;	109	letter-spacing: -0.3px;
110	}	110	}
111	</style>	111	</style>
112		112

src/pages/customerService/customerService.vue

Diff comments View file @387a4dd

File was created	1	<template>
	2	<view class="content">
	3	<view class="header">
	4	<view class="header-name">
	5	<navigator open-type="navigateBack" hover-class="navigator-hover">
	6	<image src="/static/back.png"></image>
	7	</navigator>
	8	<text>在线客服</text>
	9	</view>
	10	</view>
	11	<view class="hr"></view>
	12	<!-- <scroll-view scroll-y class="srcollview"> -->
	13	<view class="customer">
	14	<template>
	15	<view class="talk-time">
	16	<text>2020-10-22 12:34:58</text>
	17	</view>
	18	<view class="servicer"><image src="../../static/customerService-pic.png"></image><text>亲，请问有什么需要？</text></view>
	19	<view class="user"><image src="../../static/customerService-pic.png"></image><text>我想问下我买的货发了么</text></view>
	20	<view class="servicer"><image src="../../static/customerService-pic.png"></image><text>请问是昨天晚上下单的吗？</text></view>
	21	<view class="user"><image src="../../static/customerService-pic.png"></image><text>嗯嗯,对,是的</text></view>
	22	</template>
	23
	24	</view>
	25	<!-- </scroll-view> -->
	26	<view class="bottom-input">
	27	<image src="../../static/customerService-horn.png" class="img1"></image>
	28	<input />
	29	<image src="../../static/customerService-simle.png" class="img2"></image>
	30	<image src="../../static/customerService-btn.png" class="img3"></image>
	31	</view>
	32	</view>
	33	</template>
	34
	35	<script>
	36	export default {
	37	data() {
	38	return {
	39
	40	}
	41	},
	42	methods: {
	43
	44	}
	45	}
	46	</script>
	47
	48	<style lang="scss">
	49	.content {
	50	display: flex;
	51	flex-direction: column;
	52	justify-content: center;
	53	align-items: center;
	54
	55	}
	56
	57	.header{
	58	display: flex;
	59	flex-direction: column;
	60	align-items: center;
	61	justify-content: center;
	62	width: 100%;
	63	height: 44px;
	64	position: fixed;
	65	top: 0;
	66	z-index: 999;
	67	background-color: #fff;
	68	.header-name{
	69	display: flex;
	70	align-items: center;
	71	width: 670rpx;
	72	image {
	73	width: 11px;
	74	height: 18px;
	75	}
	76	text {
	77	// font-family: "PingFangSC-Regular";
	78	font-size: 36rpx;
	79	color: #333333;
	80	letter-spacing: -0.34px;
	81	margin: 0 0 10rpx 54rpx;
	82	}
	83	}
	84	}
	85	.hr {
	86	width: 100%;
	87	border-bottom: 1px solid #E9E9E9;
	88	}
	89	.customer {
	90	width: 100%;
	91	min-height: 1335rpx;
	92	background-color: #f2f2f2;
	93	box-sizing: border-box;
	94	padding: 0 40rpx;
	95	.talk-time{
	96	display: flex;
	97	align-items: center;
	98	justify-content: center;
	99	margin-top: 54rpx;
	100	margin-bottom: 2rpx;
	101	text{
	102	// font-family: PingFangSC-Regular;
	103	font-size: 12px;
	104	color: #999999;
	105	letter-spacing: -0.23px;
	106	}
	107	}
	108	.user {
	109	display: flex;
	110	flex-direction: row-reverse;
	111	align-items: center;
	112	margin-top: 48rpx;
	113	image{
	114	width: 30px;
	115	height: 30px;
	116	margin-top: -14rpx;
	117	margin-left: 16rpx;
	118	}
	119	text{
	120	min-height: 80rpx;
	121	max-width: 512rpx;
	122	box-sizing: border-box;
	123	padding: 22rpx 36rpx 22rpx 38rpx;
	124	margin-top: 14rpx;
	125	// ont-family: PingFangSC-Regular;
	126	font-size: 12px;
	127	color: #333333;
	128	letter-spacing: -0.23px;
	129	background: #FFFFFF;
	130	border: 1px solid #E9E9E9;
	131	border-radius: 16rpx 0 16rpx 16rpx;
	132	}
	133	}
	134	.servicer {
	135	display: flex;
	136	flex-direction: row;
	137	align-items: center;
	138	margin-top: 42rpx;
	139	image{
	140	width: 30px;
	141	height: 30px;
	142	margin-top: -14rpx;
	143	margin-right: 16rpx;
	144	}
	145	text{
	146	min-height: 80rpx;
	147	max-width: 512rpx;
	148	box-sizing: border-box;
	149	padding: 22rpx 36rpx 22rpx 38rpx;
	150	margin-top: 14rpx;
	151	// font-family: PingFangSC-Regular;
	152	font-size: 12px;
	153	color: #FFFFFF;
	154	letter-spacing: -0.23px;
	155	background: #FF6B4A;
	156	border-radius: 0 16rpx 16rpx 16rpx;
	157	}
	158	}
	159	}
	160
	161	// .srcollview {
	162	// // min-height: 1335rpx;
	163	// background-color: #f2f2f2;
	164	// }
	165	.bottom-input {
	166	width: 100%;
	167	height: 112rpx;
	168	background: #F7F7F7;
	169	box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.06);
	170	position: fixed;
	171	bottom: 0;
	172	z-index: 999;
	173	display: flex;
	174	align-items: center;
	175	box-sizing: border-box;
	176	padding: 19rpx 40rpx 15rpx 40rpx;
	177	.img1{
	178	width: 19px;
	179	height: 28px;
	180	margin-right: 10px;
	181	}
	182	input {
	183	width: 536rpx;
	184	min-height: 78rpx;
	185	background: #FFFFFF;
	186	border: 1px solid #999999;
	187	border-radius: 4px;
	188	box-sizing: border-box;
	189	padding-right: 30px;
	190	}
	191	.img2 {
	192	width: 21px;
	193	height: 21px;
	194	margin-left: -30px;
	195	margin-right: 19px;
	196	}
	197	.img3{
	198	width: 28px;
	199	height: 28px;
	200	}
	201	}
	202
	203	</style>
	204

src/pages/details-3/details-3.vue

Diff comments View file @387a4dd

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="header">	3	<view class="header">
4	<view class="header-name">	4	<view class="header-name">
5	<navigator open-type="navigateBack" hover-class="navigator-hover">	5	<navigator open-type="navigateBack" hover-class="navigator-hover">
6	<image src="/static/back.png"></image>	6	<image src="/static/back.png"></image>
7	</navigator>	7	</navigator>
8	<text>{{name}}</text>	8	<text>{{name}}</text>
9	</view>	9	</view>
10	</view>	10	</view>
11	<scroll-view scroll-y class="sroll-view">	11	<scroll-view scroll-y class="sroll-view">
12	<view class="goods-details">	12	<view class="goods-details">
13	<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >	13	<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
14	<swiper-item v-for="(item) in infos" :key="item.goods_id">	14	<swiper-item v-for="(item) in infos" :key="item.goods_id">
15	<image :src="item.img" mode="scaleToFill"></image>	15	<image :src="item.img" mode="scaleToFill"></image>
16	</swiper-item>	16	</swiper-item>
17	</swiper>	17	</swiper>
18	<view class="goods-price">	18	<view class="goods-price">
19	<text class="now-price">￥120</text>	19	<text class="now-price">￥120</text>
20	<text class="old-price">￥198</text>	20	<text class="old-price">￥198</text>
21	<text class="buy-num">349人购买过</text>	21	<text class="buy-num">349人购买过</text>
22	</view>	22	</view>
23	<view class="goods-name">	23	<view class="goods-name">
24	<text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text>	24	<text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text>
25	</view>	25	</view>
26	<view class="goods-courier">	26	<view class="goods-courier">
27	<text>支持7天无理由退货</text>	27	<text>支持7天无理由退货</text>
28	<text class="courier-support">顺丰发货</text>	28	<text class="courier-support">顺丰发货</text>
29	</view>	29	</view>
30	</view>	30	</view>
31	<view class="goods-form">	31	<view class="goods-form">
32	<text class="p1">填写验光数据</text>	32	<text class="p1">填写验光数据</text>
33	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>	33	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
34	<view class="choice-use">	34	<view class="choice-use">
35	<text class="p3">您一般用眼镜:</text>	35	<text class="p3">您一般用眼镜:</text>
36	<image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image>	36	<image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image>
37	<text class="p4">阅读</text>	37	<text class="p4">阅读</text>
38	<image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image>	38	<image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image>
39	<text class="p5">看远处</text>	39	<text class="p5">看远处</text>
40	</view>	40	</view>
41	<view class="picker" >	41	<view class="picker" >
42	<view class="picker-choice">	42	<view class="picker-choice">
43	<view class="choice-left">	43	<view class="choice-left">
44	<text class="p11">{{pickerInfoList[0].nameC}}</text>	44	<text class="p11">{{pickerInfoList[0].nameC}}</text>
45	<text class="p12">{{pickerInfoList[0].nameE}}</text>	45	<text class="p12">{{pickerInfoList[0].nameE}}</text>
46	</view>	46	</view>
47	<text class="p13">左   (OD)</text>	47	<text class="p13">左   (OD)</text>
48	<text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>	48	<text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
49	<picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">	49	<picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
50	<image src="../../static/detail-tabicon.png" ></image>	50	<image src="../../static/detail-tabicon.png" ></image>
51	</picker>	51	</picker>
52	<text class="p13">右   (OS)</text>	52	<text class="p13">右   (OS)</text>
53	<text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>	53	<text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
54	<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">	54	<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
55	<image src="../../static/detail-tabicon.png" ></image>	55	<image src="../../static/detail-tabicon.png" ></image>
56	</picker>	56	</picker>
57	</view>	57	</view>
58	</view>	58	</view>
59	<view class="picker" >	59	<view class="picker" >
60	<view class="picker-choice">	60	<view class="picker-choice">
61	<view class="choice-left">	61	<view class="choice-left">
62	<text class="p11">{{pickerInfoList[1].nameC}}</text>	62	<text class="p11">{{pickerInfoList[1].nameC}}</text>
63	<text class="p12">{{pickerInfoList[1].nameE}}</text>	63	<text class="p12">{{pickerInfoList[1].nameE}}</text>
64	</view>	64	</view>
65	<text class="p13">左   (OD)</text>	65	<text class="p13">左   (OD)</text>
66	<text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>	66	<text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
67	<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">	67	<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
68	<image src="../../static/detail-tabicon.png" ></image>	68	<image src="../../static/detail-tabicon.png" ></image>
69	</picker>	69	</picker>
70	<text class="p13">右   (OS)</text>	70	<text class="p13">右   (OS)</text>
71	<text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>	71	<text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
72	<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">	72	<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
73	<image src="../../static/detail-tabicon.png" ></image>	73	<image src="../../static/detail-tabicon.png" ></image>
74	</picker>	74	</picker>
75	</view>	75	</view>
76	</view>	76	</view>
77	<view class="picker" >	77	<view class="picker" >
78	<view class="picker-choice">	78	<view class="picker-choice">
79	<view class="choice-left">	79	<view class="choice-left">
80	<text class="p11">{{pickerInfoList[2].nameC}}</text>	80	<text class="p11">{{pickerInfoList[2].nameC}}</text>
81	<text class="p12">{{pickerInfoList[2].nameE}}</text>	81	<text class="p12">{{pickerInfoList[2].nameE}}</text>
82	</view>	82	</view>
83	<text class="p13">左   (OD)</text>	83	<text class="p13">左   (OD)</text>
84	<text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>	84	<text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
85	<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">	85	<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
86	<image src="../../static/detail-tabicon.png" ></image>	86	<image src="../../static/detail-tabicon.png" ></image>
87	</picker>	87	</picker>
88	<text class="p13">右   (OS)</text>	88	<text class="p13">右   (OS)</text>
89	<text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>	89	<text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
90	<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">	90	<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
91	<image src="../../static/detail-tabicon.png" ></image>	91	<image src="../../static/detail-tabicon.png" ></image>
92	</picker>	92	</picker>
93	</view>	93	</view>
94	</view>	94	</view>
95	<view class="picker" >	95	<view class="picker" >
96	<view class="picker-choice">	96	<view class="picker-choice">
97	<view class="choice-left">	97	<view class="choice-left">
98	<text class="p11">{{pickerInfoList[3].nameC}}</text>	98	<text class="p11">{{pickerInfoList[3].nameC}}</text>
99	<text class="p12">{{pickerInfoList[3].nameE}}</text>	99	<text class="p12">{{pickerInfoList[3].nameE}}</text>
100	</view>	100	</view>
101	<text class="p13">左   (OD)</text>	101	<text class="p13">左   (OD)</text>
102	<text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>	102	<text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
103	<picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">	103	<picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
104	<image src="../../static/detail-tabicon.png" ></image>	104	<image src="../../static/detail-tabicon.png" ></image>
105	</picker>	105	</picker>
106	<text class="p13">右   (OS)</text>	106	<text class="p13">右   (OS)</text>
107	<text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>	107	<text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
108	<picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">	108	<picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
109	<image src="../../static/detail-tabicon.png" ></image>	109	<image src="../../static/detail-tabicon.png" ></image>
110	</picker>	110	</picker>
111	</view>	111	</view>
112	</view>	112	</view>
113	<view class="picker" >	113	<view class="picker" >
114	<view class="picker-choice">	114	<view class="picker-choice">
115	<view class="choice-left">	115	<view class="choice-left">
116	<text class="p11">{{pickerInfoList[4].nameC}}</text>	116	<text class="p11">{{pickerInfoList[4].nameC}}</text>
117	</view>	117	</view>
118	<text class="p13-date">年   (Y)</text>	118	<text class="p13-date">年   (Y)</text>
119	<text class="p14">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>	119	<text class="p14">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
120	<picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">	120	<picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
121	<image src="../../static/detail-tabicon.png" ></image>	121	<image src="../../static/detail-tabicon.png" ></image>
122	</picker>	122	</picker>
123	<text class="p13-date">月   (M)</text>	123	<text class="p13-date">月   (M)</text>
124	<text class="p14">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>	124	<text class="p14">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
125	<picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">	125	<picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
126	<image src="../../static/detail-tabicon.png" ></image>	126	<image src="../../static/detail-tabicon.png" ></image>
127	</picker>	127	</picker>
128	<text class="p13-date">日   (D)</text>	128	<text class="p13-date">日   (D)</text>
129	<text class="p14">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>	129	<text class="p14">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
130	<picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">	130	<picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
131	<image src="../../static/detail-tabicon.png" ></image>	131	<image src="../../static/detail-tabicon.png" ></image>
132	</picker>	132	</picker>
133	</view>	133	</view>
134	</view>	134	</view>
135	<view class="confirm">	135	<view class="confirm">
136	<image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>	136	<image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
137	<text>确认以上输入信息来源于我的验光数据!</text>	137	<text>确认以上输入信息来源于我的验光数据!</text>
138	</view>	138	</view>
139	</view>	139	</view>
140	</scroll-view>	140	</scroll-view>
141	<view class="goods-submit">	141	<view class="goods-submit">
142	<button>下一步</button>	142	<button>下一步</button>
143	</view>	143	</view>
144	</view>	144	</view>
145	</template>	145	</template>
146		146
147	<script>	147	<script>
148		148
149	export default {	149	export default {
150	components: {	150	components: {
151		151
152	},	152	},
153	data() {	153	data() {
154	return {	154	return {
155	name: '眼镜名称名称',	155	name: '眼镜名称名称',
156	infos: [	156	infos: [
157	{ goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },	157	{ goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
158	{ goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },	158	{ goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
159	{ goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },	159	{ goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
160	{ goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },	160	{ goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
161	],	161	],
162	tablist: {	162	tablist: {
163	read: true,	163	read: true,
164	seeLong: false,	164	seeLong: false,
165	confirm: false	165	confirm: false
166	},	166	},
167	tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],	167	tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
168	// 度数相关数据	168	// 度数相关数据
169	pickerInfoList:[	169	pickerInfoList:[
170	{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},	170	{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},
171	{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},	171	{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},
172	{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},	172	{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},
173	{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},	173	{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},
174	{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}	174	{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}
175	],	175	],
176	}	176	}
177	},	177	},
178	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数	178	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
179		179
180	},	180	},
181	methods: {	181	methods: {
182	changeRead() {	182	changeRead() {
183	this.tablist.read = !this.tablist.read	183	this.tablist.read = !this.tablist.read
184	// this.current = e.detail.current;	184	// this.current = e.detail.current;
185	},	185	},
186	changeSeeLong() {	186	changeSeeLong() {
187	this.tablist.seeLong = !this.tablist.seeLong	187	this.tablist.seeLong = !this.tablist.seeLong
188	},	188	},
189	changeConfirm() {	189	changeConfirm() {
190	this.tablist.confirm = !this.tablist.confirm	190	this.tablist.confirm = !this.tablist.confirm
191	},	191	},
192		192
193	bindPickerChange01: function(e) {	193	bindPickerChange01: function(e) {
194	this.pickerInfoList[0].nameIndex1 = e.target.value	194	this.pickerInfoList[0].nameIndex1 = e.target.value
195	},	195	},
196	bindPickerChange02: function(e) {	196	bindPickerChange02: function(e) {
197	this.pickerInfoList[0].nameIndex2 = e.target.value	197	this.pickerInfoList[0].nameIndex2 = e.target.value
198	},	198	},
199		199
200	bindPickerChange11: function(e) {	200	bindPickerChange11: function(e) {
201	this.pickerInfoList[1].nameIndex1 = e.target.value	201	this.pickerInfoList[1].nameIndex1 = e.target.value
202	},	202	},
203	bindPickerChange12: function(e) {	203	bindPickerChange12: function(e) {
204	this.pickerInfoList[1].nameIndex2 = e.target.value	204	this.pickerInfoList[1].nameIndex2 = e.target.value
205	},	205	},
206		206
207	bindPickerChange21: function(e) {	207	bindPickerChange21: function(e) {
208	this.pickerInfoList[2].nameIndex1 = e.target.value	208	this.pickerInfoList[2].nameIndex1 = e.target.value
209	},	209	},
210	bindPickerChange22: function(e) {	210	bindPickerChange22: function(e) {
211	this.pickerInfoList[2].nameIndex2 = e.target.value	211	this.pickerInfoList[2].nameIndex2 = e.target.value
212	},	212	},
213		213
214	bindPickerChange31: function(e) {	214	bindPickerChange31: function(e) {
215	this.pickerInfoList[3].nameIndex1 = e.target.value	215	this.pickerInfoList[3].nameIndex1 = e.target.value
216	},	216	},
217	bindPickerChange32: function(e) {	217	bindPickerChange32: function(e) {
218	this.pickerInfoList[3].nameIndex2 = e.target.value	218	this.pickerInfoList[3].nameIndex2 = e.target.value
219	},	219	},
220		220
221	bindPickerChange41: function(e) {	221	bindPickerChange41: function(e) {
222	this.pickerInfoList[4].nameIndex1 = e.target.value	222	this.pickerInfoList[4].nameIndex1 = e.target.value
223	},	223	},
224	bindPickerChange42: function(e) {	224	bindPickerChange42: function(e) {
225	this.pickerInfoList[4].nameIndex2 = e.target.value	225	this.pickerInfoList[4].nameIndex2 = e.target.value
226	},	226	},
227	bindPickerChange43: function(e) {	227	bindPickerChange43: function(e) {
228	this.pickerInfoList[4].nameIndex3 = e.target.value	228	this.pickerInfoList[4].nameIndex3 = e.target.value
229	},	229	},
230	}	230	}
231	}	231	}
232	</script>	232	</script>
233		233
234	<style lang="scss">	234	<style lang="scss" scoped>
235	.content {	235	.content {
236	display: flex;	236	display: flex;
237	flex-direction: column;	237	flex-direction: column;
238	align-items: center;	238	align-items: center;
239	justify-content: center;	239	justify-content: center;
240		240
241	}	241	}
242	.header{	242	.header{
243	display: flex;	243	display: flex;
244	flex-direction: column;	244	flex-direction: column;
245	align-items: center;	245	align-items: center;
246	background-color: #fff;	246	background-color: #fff;
247	width: 100%;	247	width: 100%;
248	height: 64rpx;	248	height: 64rpx;
249	z-index: 999;	249	z-index: 999;
250	position: fixed;	250	position: fixed;
251	top: 0;	251	top: 0;
252	.header-name {	252	.header-name {
253	display: flex;	253	display: flex;
254	width: 684rpx;	254	width: 684rpx;
255	text {	255	text {
256	font-size: 36rpx;	256	font-size: 36rpx;
257	color: #333333;	257	color: #333333;
258	letter-spacing: -0.34px;	258	letter-spacing: -0.34px;
259	margin-left: 54rpx;	259	margin-left: 54rpx;
260	}	260	}
261	image {	261	image {
262	width: 11px;	262	width: 11px;
263	height: 18px;	263	height: 18px;
264	border-radius: 16px;	264	border-radius: 16px;
265	}	265	}
266	}	266	}
267		267
268	}	268	}
269		269
270	.sroll-view{	270	.sroll-view{
271	height: 1760rpx;	271	height: 1760rpx;
272	}	272	}
273		273
274	.goods-details{	274	.goods-details{
275	display: flex;	275	display: flex;
276	flex-direction: column;	276	flex-direction: column;
277	align-items: center;	277	align-items: center;
278	justify-content: center;	278	justify-content: center;
279	background-color: #fff;	279	background-color: #fff;
280	margin-bottom: 40rpx;	280	margin-bottom: 40rpx;
281	.swiper {	281	.swiper {
282	width: 684rpx;	282	width: 684rpx;
283	height: 512rpx;	283	height: 512rpx;
284	image {	284	image {
285	width: 100%;	285	width: 100%;
286	height: 100%;	286	height: 100%;
287	border-radius: 16rpx;	287	border-radius: 16rpx;
288	}	288	}
289	}	289	}
290	.goods-price {	290	.goods-price {
291	display: flex;	291	display: flex;
292	justify-content: space-between;	292	justify-content: space-between;
293	padding: 40rpx 0 30rpx 0;	293	padding: 40rpx 0 30rpx 0;
294	align-items: center;	294	align-items: center;
295	width: 684rpx;	295	width: 684rpx;
296	.now-price {	296	.now-price {
297	font-size: 18px;	297	font-size: 18px;
298	color: #EB5D3B;	298	color: #EB5D3B;
299	}	299	}
300	.old-price {	300	.old-price {
301	font-size: 14px;	301	font-size: 14px;
302	color: #999999;	302	color: #999999;
303	letter-spacing: -0.26px;	303	letter-spacing: -0.26px;
304	margin-left: -156px;	304	margin-left: -156px;
305	text-decoration: line-through;	305	text-decoration: line-through;
306	}	306	}
307	.buy-num {	307	.buy-num {
308	font-size: 14px;	308	font-size: 14px;
309	color: #999999;	309	color: #999999;
310	letter-spacing: -0.26px;	310	letter-spacing: -0.26px;
311	text-align: justify;	311	text-align: justify;
312	}	312	}
313	}	313	}
314	.goods-name {	314	.goods-name {
315	font-size: 16px;	315	font-size: 16px;
316	color: #333333;	316	color: #333333;
317	letter-spacing: -0.3px;	317	letter-spacing: -0.3px;
318	text-align: justify;	318	text-align: justify;
319	width: 684rpx;	319	width: 684rpx;
320	}	320	}
321	.goods-courier {	321	.goods-courier {
322	width: 684rpx;	322	width: 684rpx;
323	font-size: 10px;	323	font-size: 10px;
324	color: #999999;	324	color: #999999;
325	letter-spacing: -0.19px;	325	letter-spacing: -0.19px;
326	padding: 10rpx 0;	326	padding: 10rpx 0;
327	.courier-support {	327	.courier-support {
328	padding-left: 20rpx;	328	padding-left: 20rpx;
329	}	329	}
330	}	330	}
331		331
332	}	332	}
333	.goods-form {	333	.goods-form {
334	display: flex;	334	display: flex;
335	flex-direction: column;	335	flex-direction: column;
336	align-items: center;	336	align-items: center;
337	justify-content: center;	337	justify-content: center;
338	background-color: #fff;	338	background-color: #fff;
339	width: 100%;	339	width: 100%;
340	.choice-use{	340	.choice-use{
341	display: flex;	341	display: flex;
342	margin-bottom: 40rpx;	342	margin-bottom: 40rpx;
343	width: 684rpx;	343	width: 684rpx;
344	align-items: center;	344	align-items: center;
345	.p3 {	345	.p3 {
346	font-size: 14px;	346	font-size: 14px;
347	color: #333333;	347	color: #333333;
348	letter-spacing: -0.26px;	348	letter-spacing: -0.26px;
349	text-align: justify;	349	text-align: justify;
350	line-height: 24px;	350	line-height: 24px;
351	width: 164px;	351	width: 164px;
352	}	352	}
353	.p4 {	353	.p4 {
354	font-size: 14px;	354	font-size: 14px;
355	color: #666666;	355	color: #666666;
356	letter-spacing: -0.26px;	356	letter-spacing: -0.26px;
357	margin: 0 71rpx 0 24rpx ;	357	margin: 0 71rpx 0 24rpx ;
358	}	358	}
359	.p5 {	359	.p5 {
360	font-size: 14px;	360	font-size: 14px;
361	color: #666666;	361	color: #666666;
362	letter-spacing: -0.26px;	362	letter-spacing: -0.26px;
363	margin-left: 24rpx;	363	margin-left: 24rpx;
364	}	364	}
365	}	365	}
366	.p1 {	366	.p1 {
367	font-size: 16px;	367	font-size: 16px;
368	color: #333333;	368	color: #333333;
369	letter-spacing: -0.3px;	369	letter-spacing: -0.3px;
370	text-align: justify;	370	text-align: justify;
371	line-height: 24px;	371	line-height: 24px;
372	margin: 4px 0;	372	margin: 4px 0;
373		373
374	}	374	}
375	.p2 {	375	.p2 {
376	font-size: 12px;	376	font-size: 12px;
377	color: #999999;	377	color: #999999;
378	letter-spacing: -0.23px;	378	letter-spacing: -0.23px;
379	margin-bottom: 18rpx;	379	margin-bottom: 18rpx;
380	}	380	}
381	image{	381	image{
382	width: 28rpx;	382	width: 28rpx;
383	height: 26rpx;	383	height: 26rpx;
384	}	384	}
385	.confirm {	385	.confirm {
386	display: flex;	386	display: flex;
387	align-items: center;	387	align-items: center;
388	font-size: 12px;	388	font-size: 12px;
389	color: #666666;	389	color: #666666;
390	letter-spacing: -0.23px;	390	letter-spacing: -0.23px;
391	width: 684rpx;	391	width: 684rpx;
392	image{	392	image{
393	margin-right:25rpx;	393	margin-right:25rpx;
394	}	394	}
395	}	395	}
396	.picker{	396	.picker{
397	display: flex;	397	display: flex;
398	flex-direction: column;	398	flex-direction: column;
399	justify-content: center;	399	justify-content: center;
400	align-items: center;	400	align-items: center;
401	width: 100%;	401	width: 100%;
402	image{	402	image{
403	width: 10px;	403	width: 10px;
404	height: 10px;	404	height: 10px;
405	margin-right: 5px;	405	margin-right: 5px;
406	}	406	}
407	.picker-choice{	407	.picker-choice{
408	display: flex;	408	display: flex;
409	width: 684rpx;	409	width: 684rpx;
410	align-items: center;	410	align-items: center;
411	margin-bottom: 40rpx;	411	margin-bottom: 40rpx;
412	.choice-left{	412	.choice-left{
413	width: 210rpx;	413	width: 210rpx;
414	.p11 {	414	.p11 {
415	font-size: 14px;	415	font-size: 14px;
416	color: #333333;	416	color: #333333;
417	letter-spacing: -0.26px;	417	letter-spacing: -0.26px;
418	text-align: justify;	418	text-align: justify;
419	line-height: 24px;	419	line-height: 24px;
420	margin-right: 10px;	420	margin-right: 10px;
421	}	421	}
422	.p12 {	422	.p12 {
423	font-size: 10px;	423	font-size: 10px;
424	color: #3F3F3F;	424	color: #3F3F3F;
425	letter-spacing: -0.19px;	425	letter-spacing: -0.19px;
426	text-align: justify;	426	text-align: justify;
427	line-height: 24px;	427	line-height: 24px;
428	}	428	}
429		429
430		430
431	}	431	}
432	.p13 {	432	.p13 {
433	font-size: 10px;	433	font-size: 10px;
434	color: #999999;	434	color: #999999;
435	letter-spacing: -0.19px;	435	letter-spacing: -0.19px;
436	margin-right: 10px;	436	margin-right: 10px;
437	}	437	}
438	.p13-date {	438	.p13-date {
439	font-size: 10px;	439	font-size: 10px;
440	color: #999999;	440	color: #999999;
441	letter-spacing: -0.19px;	441	letter-spacing: -0.19px;
442	margin-right: 5px;	442	margin-right: 5px;
443	}	443	}
444	.p14 {	444	.p14 {
445	font-size: 14px;	445	font-size: 14px;
446	color: #666666;	446	color: #666666;
447	letter-spacing: -0.26px;	447	letter-spacing: -0.26px;
448	text-align: center;	448	text-align: center;
449	width: 124rpx;	449	width: 124rpx;
450	border-bottom: 1px solid #CFCFCF;	450	border-bottom: 1px solid #CFCFCF;
451	}	451	}
452		452
453	}	453	}
454	}	454	}
455	}	455	}
456	.goods-submit{	456	.goods-submit{
457	display: flex;	457	display: flex;
458	flex-direction: column;	458	flex-direction: column;
459	align-items: center;	459	align-items: center;
460	justify-content: center;	460	justify-content: center;
461	position: fixed;	461	position: fixed;
462	bottom: 0;	462	bottom: 0;
463	z-index: 999;	463	z-index: 999;
464	width: 100%;	464	width: 100%;
465	height: 120rpx;	465	height: 120rpx;
466	background-color: #fff;	466	background-color: #fff;
467	button{	467	button{
468	width: 540rpx;	468	width: 540rpx;
469	height: 80rpx;	469	height: 80rpx;
470	font-size: 32rpx;	470	font-size: 32rpx;
471	color: #fff;	471	color: #fff;
472	background: #FF6B4A;	472	background: #FF6B4A;
473	border-radius: 20px;	473	border-radius: 20px;
474	border-radius: 20px;	474	border-radius: 20px;
475	}	475	}
476	}	476	}
477		477
478	</style>	478	</style>

src/pages/index/index.vue

Diff comments View file @387a4dd

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="header">	3	<view class="header">
4	<!-- 搜索-->	4	<!-- 搜索-->
5	<view class="searchBar">	5	<view class="searchBar">
6	<icon class="searchIcon" type="search" size="14"></icon>	6	<icon class="searchIcon" type="search" size="14"></icon>
7	<input class="searchIpt" placeholder="老花镜" confirm-type="search"/>	7	<input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
8	</view>	8	</view>
9		9
10	<!-- 筛选栏-->	10	<!-- 筛选栏-->
11	<view class="screenBar">	11	<view class="screenBar">
12	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >	12	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
13	<view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">	13	<view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
14	{{ item.text }}<icon type="info" size="14"></icon>	14	{{ item.text }}<icon type="info" size="14"></icon>
15	</view>	15	</view>
16	<view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')">	16	<view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')">
17	{{ item.text }}<icon type="info" size="14"></icon>	17	{{ item.text }}<icon type="info" size="14"></icon>
18	</view>	18	</view>
19	<view v-if="item.current !== 2&&item.current!==4">	19	<view v-if="item.current !== 2&&item.current!==4">
20	<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>	20	<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
21	</view>	21	</view>
22	</view>	22	</view>
23	</view>	23	</view>
24	</view>	24	</view>
25	<Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">	25	<uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
26	<view class="close">	26	<view class="close">
27	<view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>	27	<view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
28	</view>	28	</view>
29	</Uni-drawer>	29	</uni-drawer>
30		30
31		31
32		32
33	<!-- 筛选菜单-->	33	<!-- 筛选菜单-->
34	<view class="content-wrap">	34	<view class="content-wrap">
35	<view>	35	<view>
36	<HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>	36	<HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
37	<!-- 商品列表 -->	37	<!-- 商品列表 -->
38	<view class="goods-list">	38	<view class="goods-list">
39	<view class="product-list">	39	<view class="product-list">
40	<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >	40	<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
41	<Card :goods = "goods"></Card>	41	<Card :goods = "goods"></Card>
42	</view>	42	</view>
43	</view>	43	</view>
44	<view class="loading-text">{{loadingText}}</view>	44	<view class="loading-text">{{loadingText}}</view>
45	</view>	45	</view>
46		46
47	</view>	47	</view>
48	</view>	48	</view>
49	</view>	49	</view>
50	</template>	50	</template>
51		51
52	<script>	52	<script>
53	import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";	53	import UniDrawer from "@/components/uni-drawer/uni-drawer.vue";
54	import Card from "../../components/Card/Card.vue"	54	import Card from "../../components/Card/Card.vue"
55	import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";	55	import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
56	import data from '@/common/data.js';//筛选菜单数据	56	import data from '@/common/data.js';//筛选菜单数据
57	export default {	57	export default {
58	components: {	58	components: {
59	'UniDrawer':UniDrawer,	59	'UniDrawer':UniDrawer,
60	'HMfilterDropdown':HMfilterDropdown,	60	'HMfilterDropdown':HMfilterDropdown,
61	'Card':Card	61	'Card':Card
62	},	62	},
63	data() {	63	data() {
64	return {	64	return {
65	screenItems: [	65	screenItems: [
66	{current:0,text:'全部',hasIcon:false},	66	{current:0,text:'全部',hasIcon:false},
67	{current:1,text:'销量',hasIcon:false},	67	{current:1,text:'销量',hasIcon:false},
68	{current:2,text:'价格',hasIcon:true},	68	{current:2,text:'价格',hasIcon:true},
69	{current:3,text:'折扣',hasIcon:false},	69	{current:3,text:'折扣',hasIcon:false},
70	{current:4,text:'筛选',hasIcon:true},	70	{current:4,text:'筛选',hasIcon:true},
71	],	71	],
72	current: 0,	72	current: 0,
73	showRight: false,	73	showRight: false,
74	indexArr:'',	74	indexArr:'',
75	valueArr:'',	75	valueArr:'',
76	//商品数据	76	//商品数据
77	goodsList:[	77	goodsList:[
78	{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	78	{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
79	{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	79	{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
80	{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	80	{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
81	{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	81	{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
82	{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	82	{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
83	{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	83	{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
84	{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	84	{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
85	{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	85	{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
86	{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	86	{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
87	{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }	87	{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
88	],	88	],
89	loadingText:"正在加载...",	89	loadingText:"正在加载...",
90	filterDropdownValue:[],	90	filterDropdownValue:[],
91	filterData:[]	91	filterData:[]
92	}	92	}
93	},	93	},
94	filters: {	94	filters: {
95	outData(value) {	95	outData(value) {
96	return JSON.stringify(value);	96	return JSON.stringify(value);
97	}	97	}
98	},	98	},
99	onLoad: function () {	99	onLoad: function () {
100	//定时器模拟ajax异步请求数据	100	//定时器模拟ajax异步请求数据
101	// setTimeout(()=>{	101	// setTimeout(()=>{
102	// //传入defaultSelected的结构不能错，错了就报错运行异常。不选中的项目传入null	102	// //传入defaultSelected的结构不能错，错了就报错运行异常。不选中的项目传入null
103	// this.filterDropdownValue = [	103	// this.filterDropdownValue = [
104	// [1,1,0], //第0个菜单选中一级菜单的第1项，二级菜单的第1项，三级菜单的第3项	104	// [1,1,0], //第0个菜单选中一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
105	// [null,null], //第1个菜单选中都不选中	105	// [null,null], //第1个菜单选中都不选中
106	// [1], //第2个菜单选中一级菜单的第1项	106	// [1], //第2个菜单选中一级菜单的第1项
107	// [[0],[1,2,7],[1,0]], //筛选菜单选中第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项	107	// [[0],[1,2,7],[1,0]], //筛选菜单选中第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
108	// [[0],[1],[1]], //单选菜单选中第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项	108	// [[0],[1],[1]], //单选菜单选中第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
109	// ];	109	// ];
110	this.filterData = data;	110	this.filterData = data;
111	// },100);	111	// },100);
112	// 模拟ajax请求子菜单数据。	112	// 模拟ajax请求子菜单数据。
113	// setTimeout(()=>{	113	// setTimeout(()=>{
114	// this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];	114	// this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
115	// },5000)	115	// },5000)
116	},	116	},
117	methods: {	117	methods: {
118	showDrawer(e) {	118	showDrawer(e) {
119	this.$refs[e].open()	119	this.$refs[e].open()
120	},	120	},
121	closeDrawer(e) {	121	closeDrawer(e) {
122	this.$refs[e].close()	122	this.$refs[e].close()
123	},	123	},
124	change(e, type) {	124	change(e, type) {
125	this[type] = e	125	this[type] = e
126	},	126	},
127	onClickItem(e) {	127	onClickItem(e) {
128	if (this.current !== e) {	128	if (this.current !== e) {
129	this.current = e;	129	this.current = e;
130	}	130	}
131	},	131	},
132	dropDown(){	132	dropDown(){
133	console.log('下拉')	133	console.log('下拉')
134	},	134	},
135	//接收菜单结果	135	//接收菜单结果
136	confirm(e){	136	confirm(e){
137	this.indexArr = e.index;	137	this.indexArr = e.index;
138	this.valueArr = e.value;	138	this.valueArr = e.value;
139	return;	139	return;
140	console.log('修改菜单');	140	console.log('修改菜单');
141	this.filterData[4].submenu[1] = {	141	this.filterData[4].submenu[1] = {
142	"name": "项目2",	142	"name": "项目2",
143	"submenu": [	143	"submenu": [
144		144
145	]	145	]
146	}	146	}
147	}	147	}
148	},	148	},
149	onNavigationBarButtonTap(e) {	149	onNavigationBarButtonTap(e) {
150	this.showRight = !this.showRight	150	this.showRight = !this.showRight
151	},	151	},
152	//上拉加载，	152	//上拉加载，
153	onReachBottom(){	153	onReachBottom(){
154	console.log('到底加载')	154	console.log('到底加载')
155	let len = this.goodsList.length;	155	let len = this.goodsList.length;
156	if(len>=30){	156	if(len>=30){
157	this.loadingText="~~到底了~~";	157	this.loadingText="~~到底了~~";
158	return false;	158	return false;
159	}else{	159	}else{
160	this.loadingText="正在加载...";	160	this.loadingText="正在加载...";
161	}	161	}
162	let end_goods_id = this.goodsList[len-1].goods_id;	162	let end_goods_id = this.goodsList[len-1].goods_id;
163	for(let i=1;i<=10;i++){	163	for(let i=1;i<=10;i++){
164	let goods_id = end_goods_id+i;	164	let goods_id = end_goods_id+i;
165	let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' };	165	let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' };
166	this.goodsList.push(p);	166	this.goodsList.push(p);
167	}	167	}
168	},	168	},
169	}	169	}
170	</script>	170	</script>
171		171
172	<style lang="scss">	172	<style lang="scss">
173	.content {	173	.content {
174	display: flex;	174	display: flex;
175	flex-direction: column;	175	flex-direction: column;
176	align-items: center;	176	align-items: center;
177	justify-content: center;	177	justify-content: center;
178	background-color: #F7F6F6;	178	background-color: #F7F6F6;
179	}	179	}
180	.header{	180	.header{
181	display: flex;	181	display: flex;
182	flex-direction: column;	182	flex-direction: column;
183	align-items: center;	183	align-items: center;
184	justify-content: center;	184	justify-content: center;
185	background-color: #F7F6F6;	185	background-color: #F7F6F6;
186	height:178rpx ;	186	height:178rpx ;
187	width: 100%;	187	width: 100%;
188	z-index: 999;	188	z-index: 999;
189	position: fixed;	189	position: fixed;
190	top: 0;	190	top: 0;
191	left: 0;	191	left: 0;
192	}	192	}
193	.searchBar {	193	.searchBar {
194	width: 670rpx;	194	width: 670rpx;
195	display: flex;	195	display: flex;
196	justify-content: center;	196	justify-content: center;
197	align-items: center;	197	align-items: center;
198	box-sizing: border-box;	198	box-sizing: border-box;
199	padding: 0rpx 16rpx;	199	padding: 0rpx 16rpx;
200	border: 1px solid #FF6B4A;	200	border: 1px solid #FF6B4A;
201	border-radius: 8rpx;	201	border-radius: 8rpx;
202	background-color: #ffffff;	202	background-color: #ffffff;
203	}	203	}
204		204
205	.searchIpt {	205	.searchIpt {
206	height: 68rpx;	206	height: 68rpx;
207	width: 670rpx;	207	width: 670rpx;
208	padding: 16rpx;	208	padding: 16rpx;
209	font-size: 28rpx;	209	font-size: 28rpx;
210	box-sizing: border-box;	210	box-sizing: border-box;
211	}	211	}
212	.screenBar{	212	.screenBar{
213	width: 670rpx;	213	width: 670rpx;
214	height: 110rpx;	214	height: 110rpx;
215	display: flex;	215	display: flex;
216	flex-direction: row;	216	flex-direction: row;
217	justify-content: space-between;	217	justify-content: space-between;
218	align-items: center;	218	align-items: center;
219	color: #333333;	219	color: #333333;
220	font-size: 32rpx;	220	font-size: 32rpx;
221	}	221	}
222	.active{	222	.active{
223	color: #FF6B4A;	223	color: #FF6B4A;
224	}	224	}
225	.screenItem{	225	.screenItem{
226	display: flex;	226	display: flex;
227	justify-content: center;	227	justify-content: center;
228	align-items: center;	228	align-items: center;
229	}	229	}
230	.content-wrap{	230	.content-wrap{
231	width: 100%;	231	width: 100%;
232	background-color: #FFFFFF;	232	background-color: #FFFFFF;
233	}	233	}
234		234
235	.HMfilterDropdown{	235	.HMfilterDropdown{
236	top: 178rpx !important;	236	top: 178rpx !important;
237	}	237	}
238		238
239	.goods-list{	239	.goods-list{
240	padding-top: 286rpx;	240	padding-top: 286rpx;
241	.loading-text{	241	.loading-text{
242	width: 100%;	242	width: 100%;
243	display: flex;	243	display: flex;
244	justify-content: center;	244	justify-content: center;
245	align-items: center;	245	align-items: center;
246	height: 30px;	246	height: 30px;
247	color: #979797;	247	color: #979797;
248	font-size: 12px;	248	font-size: 12px;
249	}	249	}
250	.product-list{	250	.product-list{
251	width: 92%;	251	width: 92%;
252	padding: 0 4% 3vw 4%;	252	padding: 0 4% 3vw 4%;
253	display: flex;	253	display: flex;
254	justify-content: space-between;	254	justify-content: space-between;
255	flex-wrap: wrap;	255	flex-wrap: wrap;
256	.product{	256	.product{
257	width: 48%;	257	width: 48%;
258	margin: 0 0 20rpx 0;	258	margin: 0 0 20rpx 0;
259	background: #FFFFFF;	259	background: #FFFFFF;
260	border: 1px solid #F2F2F2;	260	border: 1px solid #F2F2F2;
261	}	261	}
262	}	262	}
263	}	263	}
264		264
265	</style>	265	</style>
266		266

src/pages/myOrder/myOrder.vue

Diff comments View file @387a4dd

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="header">	3	<view class="header">
4	<!-- 搜索-->	4	<!-- 搜索-->
5	<view class="searchBar">	5	<view class="searchBar">
6	<icon class="searchIcon" type="search" size="14"></icon>	6	<icon class="searchIcon" type="search" size="14"></icon>
7	<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>	7	<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8	</view>	8	</view>
9	<view class="screenBar">	9	<view class="screenBar">
10	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >	10	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11	<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>	11	<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
12	</view>	12	</view>
13	</view>	13	</view>
14	</view>	14	</view>
15	<view class="orderList" >	15	<view class="orderList" >
16	<view v-for="(order) in orderList" :key="order.orderId">	16	<view v-for="(order) in orderList" :key="order.orderId">
17	<OrderCard :order = "order" :current="current"></OrderCard>	17	<OrderCard :order = "order" :current="current"></OrderCard>
18	</view>	18	</view>
19	</view>	19	</view>
20	<view class="footer">已显示全部</view>	20	<view class="footer">已显示全部</view>
21	</view>	21	</view>
22	</template>	22	</template>
23	<script>	23	<script>
24	import OrderCard from './OrderCard.vue'	24	import OrderCard from './orderCard.vue'
25	export default {	25	export default {
26	components:{	26	components:{
27	'OrderCard':OrderCard	27	'OrderCard':OrderCard
28	},	28	},
29	data() {	29	data() {
30	return {	30	return {
31	screenItems: [	31	screenItems: [
32	{current:0,text:'全部'},	32	{current:0,text:'全部'},
33	{current:1,text:'待付款'},	33	{current:1,text:'待付款'},
34	{current:2,text:'待发货'},	34	{current:2,text:'待发货'},
35	{current:3,text:'待收货'},	35	{current:3,text:'待收货'},
36	{current:4,text:'退款售后'},	36	{current:4,text:'退款售后'},
37	],	37	],
38	current: 0,	38	current: 0,
39	//订单数据	39	//订单数据
40	orderList:[	40	orderList:[
41	{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},	41	{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
42	{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},	42	{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
43	{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},	43	{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
44	{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},	44	{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
45	{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},	45	{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
46	{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},	46	{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
47	{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},	47	{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
48	{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},	48	{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
49	{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}	49	{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
50	],	50	],
51		51
52	};	52	};
53	},	53	},
54	methods:{	54	methods:{
55	onClickItem(e) {	55	onClickItem(e) {
56	if (this.current !== e) {	56	if (this.current !== e) {
57	this.current = e;	57	this.current = e;
58	}	58	}
59	}	59	}
60	}	60	}
61	}	61	}
62	</script>	62	</script>
63		63
64	<style lang="scss">	64	<style lang="scss">
65	.content {	65	.content {
66	display: flex;	66	display: flex;
67	flex-direction: column;	67	flex-direction: column;
68	align-items: center;	68	align-items: center;
69	background-color: #F7F6F6;	69	background-color: #F7F6F6;
70	min-height: 100vh;	70	min-height: 100vh;
71	.header{	71	.header{
72	background-color: #ffffff;	72	background-color: #ffffff;
73	width: 100%;	73	width: 100%;
74	height: 232rpx;	74	height: 232rpx;
75	padding: 40rpx 40rpx 36rpx 40rpx;	75	padding: 40rpx 40rpx 36rpx 40rpx;
76	box-sizing: border-box;	76	box-sizing: border-box;
77	position: fixed;	77	position: fixed;
78	top: 0;	78	top: 0;
79	left: 0;	79	left: 0;
80	.searchBar {	80	.searchBar {
81	width: 670rpx;	81	width: 670rpx;
82	display: flex;	82	display: flex;
83	justify-content: center;	83	justify-content: center;
84	align-items: center;	84	align-items: center;
85	box-sizing: border-box;	85	box-sizing: border-box;
86	padding: 0rpx 16rpx;	86	padding: 0rpx 16rpx;
87	border: 1px solid #FF6B4A;	87	border: 1px solid #FF6B4A;
88	border-radius: 8rpx;	88	border-radius: 8rpx;
89	background-color: #ffffff;	89	background-color: #ffffff;
90	}	90	}
91		91
92	.screenBar{	92	.screenBar{
93	width: 670rpx;	93	width: 670rpx;
94	height: 110rpx;	94	height: 110rpx;
95	display: flex;	95	display: flex;
96	flex-direction: row;	96	flex-direction: row;
97	justify-content: space-between;	97	justify-content: space-between;
98	align-items: center;	98	align-items: center;
99	color: #333333;	99	color: #333333;
100	font-size: 32rpx;	100	font-size: 32rpx;
101	}	101	}
102	.screenItem{	102	.screenItem{
103	height: 50rpx;	103	height: 50rpx;
104	font-size: 32rpx;	104	font-size: 32rpx;
105	color: #333333;	105	color: #333333;
106	display: flex;	106	display: flex;
107	justify-content: center;	107	justify-content: center;
108	align-items: center;	108	align-items: center;
109	transition:all 0.2s;	109	transition:all 0.2s;
110	}	110	}
111	.active{	111	.active{
112	// font-size: 34rpx;	112	// font-size: 34rpx;
113	color: #EC5D3B;	113	color: #EC5D3B;
114	}	114	}
115	.searchIpt {	115	.searchIpt {
116	height: 68rpx;	116	height: 68rpx;
117	width: 670rpx;	117	width: 670rpx;
118	padding: 16rpx;	118	padding: 16rpx;
119	font-size: 28rpx;	119	font-size: 28rpx;
120	box-sizing: border-box;	120	box-sizing: border-box;
121	}	121	}
122	}	122	}
123	.orderList{	123	.orderList{
124	margin-top: 232rpx;	124	margin-top: 232rpx;
125	}	125	}
126	.footer{	126	.footer{
127	font-size: 14px;	127	font-size: 14px;
128	color: #B8B8B8;	128	color: #B8B8B8;
129	margin: 40rpx 0;	129	margin: 40rpx 0;
130	}	130	}
131	}	131	}
132	</style>	132	</style>
133		133

src/pages/myorder-paying/myorder-paying.vue

Diff comments View file @387a4dd

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

src/pages/refundment/Refundways.vue

Diff comments View file @387a4dd

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

src/pages/refundment/refundment.vue

Diff comments View file @387a4dd

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