吉鹏 / gulu-vue

Browse Code »

Commit e92e93f736dc5fa6b70e21912657ba890c6955ef

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

2 parents 31b5bebd40 7614465095

Exists in master

合并冲突

Showing 12 changed files Show diff stats

src/components/BottomSheet/BottomSheet.vue

Diff comments View file @e92e93f

1	<template>	1	<template>
2	<view class="BottomSheetContent">	2	<view class="BottomSheetContent">
3	<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">	3	<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">
4	<scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" >	4	<scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" >
5	<view class="BottomSheetContent">	5	<view class="BottomSheetContent">
6	<view class="goodInfo">	6	<view class="goodInfo">
7	<view class="imageWrap">	7	<view class="imageWrap">
8	<image	8	<image
9	:src="skuItem.pic"	9	:src="skuItem.pic"
10	mode="aspectFill"	10	mode="aspectFill"
11	style="width: 188rpx;height: 168rpx;"	11	style="width: 188rpx;height: 168rpx;"
12		12
13	></image>	13	></image>
14		14
15	</view>	15	</view>
16	<view class="infoRight">	16	<view class="infoRight">
17	<text class="goodName">{{goodInfo.p_name}}</text>	17	<text class="goodName">{{goodInfo.p_name}}</text>
18	<text class="remarks">支持7天无理由退货顺丰发货</text>	18	<text class="remarks">支持7天无理由退货顺丰发货</text>
19	<view class="priceBox">	19	<view class="priceBox">
20	<view class="price">￥{{skuItem.real_price \|\| '暂无'}}</view>	20	<view class="price">￥{{skuItem.real_price \|\| '暂无'}}</view>
21	<text>(限购{{maxCount}}副)</text>	21	<text>(限购{{maxCount}}副)</text>
22	<view class="counter">	22	<view class="counter">
23	<view	23	<view
24	class="btn"	24	class="btn"
25	disabled="this.addDisabled"	25	disabled="this.addDisabled"
26	type="default"	26	type="default"
27	@click="counter(false)"	27	@click="counter(false)"
28	>-</view>	28	>-</view>
29	<text>{{count}}</text>	29	<text>{{count}}</text>
30	<view	30	<view
31	class="btn"	31	class="btn"
32	disabled="this.desDisabled"	32	disabled="this.desDisabled"
33	type="default"	33	type="default"
34	@click="counter(true)"	34	@click="counter(true)"
35	>+</view>	35	>+</view>
36	</view>	36	</view>
37	</view>	37	</view>
38	</view>	38	</view>
39	</view>	39	</view>
40	<view class="peopleChoose">	40	<view class="peopleChoose">
41	<view class="title">选择使用人</view>	41	<view class="title">选择使用人</view>
42	<view class="loveList">	42	<view class="loveList">
43	<view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"	43	<view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
44	@click="onClickLoveItem(index,item.name)">	44	@click="onClickLoveItem(index,item.name)">
45	{{item.name}}	45	{{item.name}}
46	</view>	46	</view>
47	</view>	47	</view>
48	</view>	48	</view>
49	<view class="goods-data" v-if="isCart !== 3">	49	<view class="goods-data" v-if="isCart !== 3">
50	<view class="opCollapse">	50	<view class="opCollapse">
51	<view class="body">	51	<view class="body">
52	<template v-if="opIsOpen">	52	<template v-if="opIsOpen">
53	<view class="goods-form">	53	<view class="goods-form">
54	<view class="p1">	54	<view class="p1">
55	<image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>	55	<image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
56	填写验光数据	56	填写验光数据
57	</view>	57	</view>
58	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>	58	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
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="pd">验光单取名:</text>	62	<text class="pd">验光单取名:</text>
63	</view>	63	</view>
64	<input type="text" @blur="handleInput" class="input"	64	<input type="text" @blur="handleInput" class="input"
65	placeholder="请输入名称" maxlength="20" :value="name" />	65	placeholder="请输入名称" maxlength="20" :value="name" />
66	</view>	66	</view>
67	</view>	67	</view>
68	<view class="picker" >	68	<view class="picker" >
69	<view class="picker-choice">	69	<view class="picker-choice">
70	<view class="choice-left">	70	<view class="choice-left">
71	<text class="p11">{{pickerInfoList[0].nameC}}</text>	71	<text class="p11">{{pickerInfoList[0].nameC}}</text>
72	<text class="p12">{{pickerInfoList[0].nameE}}</text>	72	<text class="p12">{{pickerInfoList[0].nameE}}</text>
73	</view>	73	</view>
74	<text class="p13">左   (OD)</text>	74	<text class="p13">左   (OD)</text>
75	<!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->	75	<!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
76	<picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">	76	<picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
77	<view class="p14">	77	<view class="p14">
78	{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}	78	{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
79	<image src="../../static/detail-tabicon.png" ></image>	79	<image src="../../static/detail-tabicon.png" ></image>
80	</view>	80	</view>
81	<!-- <image src="../../static/detail-tabicon.png" ></image> -->	81	<!-- <image src="../../static/detail-tabicon.png" ></image> -->
82	</picker>	82	</picker>
83	<text class="p13">右   (OS)</text>	83	<text class="p13">右   (OS)</text>
84	<!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->	84	<!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
85	<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">	85	<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
86	<view class="p14">	86	<view class="p14">
87	{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}	87	{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
88	<image src="../../static/detail-tabicon.png" ></image>	88	<image src="../../static/detail-tabicon.png" ></image>
89	</view>	89	</view>
90	<!-- <image src="../../static/detail-tabicon.png" ></image> -->	90	<!-- <image src="../../static/detail-tabicon.png" ></image> -->
91	</picker>	91	</picker>
92	</view>	92	</view>
93	</view>	93	</view>
94	<view class="picker" >	94	<view class="picker" >
95	<view class="picker-choice">	95	<view class="picker-choice">
96	<view class="choice-left">	96	<view class="choice-left">
97	<text class="p11">{{pickerInfoList[1].nameC}}</text>	97	<text class="p11">{{pickerInfoList[1].nameC}}</text>
98	<text class="p12">{{pickerInfoList[1].nameE}}</text>	98	<text class="p12">{{pickerInfoList[1].nameE}}</text>
99	</view>	99	</view>
100	<text class="p13">左   (OD)</text>	100	<text class="p13">左   (OD)</text>
101	<!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->	101	<!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
102	<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">	102	<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
103	<view class="p14">	103	<view class="p14">
104	{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}	104	{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
105	<image src="../../static/detail-tabicon.png" ></image>	105	<image src="../../static/detail-tabicon.png" ></image>
106	</view>	106	</view>
107	<!-- <image src="../../static/detail-tabicon.png" ></image> -->	107	<!-- <image src="../../static/detail-tabicon.png" ></image> -->
108	</picker>	108	</picker>
109	<text class="p13">右   (OS)</text>	109	<text class="p13">右   (OS)</text>
110	<!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->	110	<!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
111	<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">	111	<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
112	<view class="p14">	112	<view class="p14">
113	{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}	113	{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
114	<image src="../../static/detail-tabicon.png" ></image>	114	<image src="../../static/detail-tabicon.png" ></image>
115	</view>	115	</view>
116	<!-- <image src="../../static/detail-tabicon.png" ></image> -->	116	<!-- <image src="../../static/detail-tabicon.png" ></image> -->
117	</picker>	117	</picker>
118	</view>	118	</view>
119	</view>	119	</view>
120	<view class="picker" >	120	<view class="picker" >
121	<view class="picker-choice">	121	<view class="picker-choice">
122	<view class="choice-left">	122	<view class="choice-left">
123	<text class="p11">{{pickerInfoList[2].nameC}}</text>	123	<text class="p11">{{pickerInfoList[2].nameC}}</text>
124	<text class="p12">{{pickerInfoList[2].nameE}}</text>	124	<text class="p12">{{pickerInfoList[2].nameE}}</text>
125	</view>	125	</view>
126	<text class="p13">左   (OD)</text>	126	<text class="p13">左   (OD)</text>
127	<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">	127	<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
128	<view class="p14">	128	<view class="p14">
129	{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}	129	{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
130	<image src="../../static/detail-tabicon.png" ></image>	130	<image src="../../static/detail-tabicon.png" ></image>
131	</view>	131	</view>
132	</picker>	132	</picker>
133	<text class="p13">右   (OS)</text>	133	<text class="p13">右   (OS)</text>
134	<!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->	134	<!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
135	<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">	135	<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
136	<view class="p14">	136	<view class="p14">
137	{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}	137	{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
138	<image src="../../static/detail-tabicon.png" ></image>	138	<image src="../../static/detail-tabicon.png" ></image>
139	</view>	139	</view>
140	<!-- <image src="../../static/detail-tabicon.png" ></image> -->	140	<!-- <image src="../../static/detail-tabicon.png" ></image> -->
141	</picker>	141	</picker>
142	</view>	142	</view>
143	</view>	143	</view>
144	<view class="picker">	144	<view class="picker">
145	<view class="picker-choice">	145	<view class="picker-choice">
146	<view class="choice-left">	146	<view class="choice-left">
147	<text class="pd">瞳距:</text>	147	<text class="pd">瞳距:</text>
148	</view>	148	</view>
149	<input type="digit" @change="handleInputPd" class="input"	149	<input type="digit" @change="handleInputPd" class="input"
150	placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />	150	placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
151	</view>	151	</view>
152	</view>	152	</view>
153	<view class="picker" >	153	<view class="picker" >
154	<view class="picker-choice">	154	<view class="picker-choice">
155	<view class="choice-left">	155	<view class="choice-left">
156	<text class="p11">{{pickerInfoList[3].nameC}}</text>	156	<text class="p11">{{pickerInfoList[3].nameC}}</text>
157	</view>	157	</view>
158	<text class="p13-date">年   (Y)</text>	158	<text class="p13-date">年   (Y)</text>
159	<picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">	159	<picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
160	<view class="p14" style="width: 30px;">	160	<view class="p14" style="width: 30px;">
161	{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}	161	{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
162	<image src="../../static/detail-tabicon.png" ></image>	162	<image src="../../static/detail-tabicon.png" ></image>
163	</view>	163	</view>
164	</picker>	164	</picker>
165	<text class="p13-date">月   (M)</text>	165	<text class="p13-date">月   (M)</text>
166	<picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">	166	<picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
167	<view class="p14" style="width: 30px;">	167	<view class="p14" style="width: 30px;">
168	{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}	168	{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
169	<image src="../../static/detail-tabicon.png" ></image>	169	<image src="../../static/detail-tabicon.png" ></image>
170	</view>	170	</view>
171	</picker>	171	</picker>
172	<text class="p13-date">日   (D)</text>	172	<text class="p13-date">日   (D)</text>
173	<picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">	173	<picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
174	<view class="p14" style="width: 30px;">	174	<view class="p14" style="width: 30px;">
175	{{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}	175	{{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
176	<image src="../../static/detail-tabicon.png" ></image>	176	<image src="../../static/detail-tabicon.png" ></image>
177	</view>	177	</view>
178	</picker>	178	</picker>
179	</view>	179	</view>
180	</view>	180	</view>
181	<view class="ipts">	181	<view class="ipts">
182	<view class="inputItem">	182	<view class="inputItem">
183	<text class="text">镜片宽度</text>	183	<text class="text">镜片宽度</text>
184	<input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth" placeholder="请输入镜片宽度"/>	184	<input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth!=='0'?glassInfo.glassWidth:''" placeholder="请输入镜片宽度"/>
185	</view>	185	</view>
186	<view class="inputItem">	186	<view class="inputItem">
187	<text class="text">鼻梁宽度</text>	187	<text class="text">鼻梁宽度</text>
188	<input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth" placeholder="请输入鼻梁宽度"/>	188	<input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth!=='0'?glassInfo.norseWidth:''" placeholder="请输入鼻梁宽度"/>
189	</view>	189	</view>
190	<view class="inputItem">	190	<view class="inputItem">
191	<text class="text">镜腿长度</text>	191	<text class="text">镜腿长度</text>
192	<input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth" placeholder="请输入镜腿长度"/>	192	<input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth!=='0'?glassInfo.legWidth:''" placeholder="请输入镜腿长度"/>
193	</view>	193	</view>
194		194
195	</view>	195	</view>
196	<view class="confirm">	196	<!-- <view class="confirm">
197	<image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>	197	<image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
198	<text>确认以上输入信息来源于我的验光数据!</text>	198	<text>确认以上输入信息来源于我的验光数据!</text>
199	</view>	199	</view> -->
200	</view>	200	</view>
201	</template>	201	</template>
202	<template v-else>	202	<template v-else>
203	<view	203	<view
204	v-for="item in pickerInfoList"	204	v-for="item in pickerInfoList"
205	:key="item.key"	205	:key="item.key"
206	class="bodyBox"	206	class="bodyBox"
207	>	207	>
208	<template v-if="item.nameC==='验光日期'">	208	<template v-if="item.nameC==='验光日期'">
209	<text class="names">{{item.nameC}}</text>	209	<text class="names">{{item.nameC}}</text>
210	<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>	210	<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
211	<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>	211	<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
212	<text>{{item.nameArray3[item.nameIndex2]}}日</text>	212	<text>{{item.nameArray3[item.nameIndex2]}}日</text>
213	</template>	213	</template>
214	<template v-else>	214	<template v-else>
215	<template v-if="item.nameC==='度数'">	215	<template v-if="item.nameC==='度数'">
216	<text style="display: inline;">*</text>	216	<text style="display: inline;">*</text>
217	</template>	217	</template>
218		218
219	<text class="names">{{item.nameC}}</text>	219	<text class="names">{{item.nameC}}</text>
220	<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>	220	<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>
221	<text>右 {{item.nameArray2[item.nameIndex2]}}</text>	221	<text>右 {{item.nameArray2[item.nameIndex2]}}</text>
222	</template>	222	</template>
223	</view>	223	</view>
224	</template>	224	</template>
225	</view>	225	</view>
226	</view>	226	</view>
227	</view>	227	</view>
228	<view class="choose">	228	<view class="choose">
229	<view	229	<view
230	class="chooseItem_1_content"	230	class="chooseItem_1_content"
231	v-for="(item,index) in attrList"	231	v-for="(item,index) in attrList"
232	:key="index"	232	:key="index"
233	>	233	>
234	<UniCollapse @change="changeShow(index)">	234	<UniCollapse @change="changeShow(index)">
235	<UniCollapseItem	235	<UniCollapseItem
236	:open="show[index]"	236	:open="show[index]"
237	:title="item.meta_name"	237	:title="item.meta_name"
238	showAnimation=false	238	showAnimation=false
239	>	239	>
240	<view class="chooseItem_1_content">	240	<view class="chooseItem_1_content">
241	<view class="itemsWrap" v-if="isCart ==3">	241	<view class="itemsWrap" v-if="isCart ==3">
242	<view	242	<view
243	class="item2"	243	class="item2"
244	v-for="(one,i) in item.attr"	244	v-for="(one,i) in item.attr"
245	:key="i"	245	:key="i"
246	:class="{ active2: current[index] === i}"	246	:class="{ active2: current[index] === i}"
247	@click="cartOnClickItem(index, i,one.aid)"	247	@click="cartOnClickItem(index, i,one.aid)"
248	>{{one.name}}</view>	248	>{{one.name}}</view>
249	</view>	249	</view>
250	<view class="itemsWrap" v-else>	250	<view class="itemsWrap" v-else>
251	<view	251	<view
252	class="item2"	252	class="item2"
253	v-for="(one,i) in item.attr"	253	v-for="(one,i) in item.attr"
254	:key="i"	254	:key="i"
255	:class="{ active2: current[index] === i }"	255	:class="{ active2: current[index] === i }"
256	@click="cartOnClickItem(index, i,one.aid)"	256	@click="cartOnClickItem(index, i,one.aid)"
257	>{{one.name}}</view>	257	>{{one.name}}</view>
258	</view>	258	</view>
259	</view>	259	</view>
260	</UniCollapseItem>	260	</UniCollapseItem>
261	</UniCollapse>	261	</UniCollapse>
262	<view	262	<view
263	class="chooseRes"	263	class="chooseRes"
264	v-show="!show[index]"	264	v-show="!show[index]"
265	>* {{attrList[index].attr[current[index]].name}}</view>	265	>* {{attrList[index].attr[current[index]].name}}</view>
266	</view>	266	</view>
267	</view>	267	</view>
268	<view	268	<view
269	class="button"	269	class="button"
270	@click.native="addCart"	270	@click.native="addCart"
271	v-if="isCart == 1"	271	v-if="isCart == 1"
272	>	272	>
273	加入购物车	273	加入购物车
274	</view>	274	</view>
275	<view	275	<view
276	class="button"	276	class="button"
277	@click="toComfirmOrder"	277	@click="toComfirmOrder"
278	v-if="isCart == 2"	278	v-if="isCart == 2"
279	>	279	>
280	立即结算	280	立即结算
281	</view>	281	</view>
282	<view	282	<view
283	class="button"	283	class="button"
284	@click="comfirmChoose"	284	@click="comfirmChoose"
285	v-if="isCart == 3"	285	v-if="isCart == 3"
286	>	286	>
287	确定	287	确定
288	</view>	288	</view>
289	</view>	289	</view>
290	</scroll-view>	290	</scroll-view>
291	</view>	291	</view>
292	</view>	292	</view>
293	</template>	293	</template>
294	<script>	294	<script>
295	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'	295	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
296	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'	296	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
297	import store from '@/store'	297	import store from '@/store'
298	export default {	298	export default {
299	components: {	299	components: {
300	UniCollapse,	300	UniCollapse,
301	UniCollapseItem,	301	UniCollapseItem,
302	},	302	},
303	props: {	303	props: {
304	isShowBottom : Boolean,	304	isShowBottom : Boolean,
305	pid: Number,	305	pid: Number,
306	sk_id:String,	306	sk_id:String,
307	propMpId:String,	307	propMpId:String,
308	goodInfo:Object,	308	goodInfo:Object,
309	isCart:Number,	309	isCart:Number,
310	cart_id:Number,	310	cart_id:Number,
311	index:Number	311	index:Number
312	},	312	},
313	data() {	313	data() {
314	return {	314	return {
315	loveCurrent:Number,	315	loveCurrent:Number,
316	count: 1,	316	count: 1,
317	// pid: 0,	317	// pid: 0,
318	maxCount: 20,	318	maxCount: 20,
319	dataName: '', // 验光数据人员名称	319	dataName: '', // 验光数据人员名称
320	isDataName: false, // 是否是已存在的人员数据	320	isDataName: false, // 是否是已存在的人员数据
321	dataConfirm: false, // 已确认所输入验光数据	321	dataConfirm: false, // 已确认所输入验光数据
322	opIsOpen: true,	322	opIsOpen: true,
323	addDisabled: false,	323	addDisabled: false,
324	desDisabled: false,	324	desDisabled: false,
325	current: [],	325	current: [],
326	show: [true,true],	326	show: [true,true],
327	checkedData: {},	327	checkedData: {},
328	// 度数相关数据	328	// 度数相关数据
329	pickerInfoList: [	329	pickerInfoList: [
330	{ nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },	330	{ nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
331	{ nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },	331	{ nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
332	{ nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },	332	{ nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
333	{ nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },	333	{ nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
334	],	334	],
335	confirm: false, // 用户是否确认	335	// confirm: false, // 用户是否确认
336	tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],	336	// tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
337	name: '',	337	name: '',
338	oldname: '', // 用于判读用户是否改变名字	338	oldname: '', // 用于判读用户是否改变名字
339	pickerInfoChioce: {	339	pickerInfoChioce: {
340	leftSph: '',	340	leftSph: '',
341	rightSph: '',	341	rightSph: '',
342	leftCyl: '',	342	leftCyl: '',
343	rightCyl: '',	343	rightCyl: '',
344	leftAxi: '',	344	leftAxi: '',
345	rightAxi: '',	345	rightAxi: '',
346	time: {	346	time: {
347	year: 0,	347	year: 0,
348	month: 0,	348	month: 0,
349	day: 0,	349	day: 0,
350	},	350	},
351	},	351	},
352	glassInfo:{	352	glassInfo:{
353	norseWidth:Number,//鼻宽
354	glassWidth:Number,//镜片宽度	353	glassWidth:Number,//镜片宽度
		354	norseWidth:Number,//鼻宽
355	legWidth:Number//镜腿长度	355	legWidth:Number//镜腿长度
356	},	356	},
357	pd: '', // 瞳距	357	pd: '', // 瞳距
358	oldpd: '', // 用于判断用户是否改变瞳距	358	oldpd: '', // 用于判断用户是否改变瞳距
359	kinds: 1, // kinds=1，提交为新增验光，2为修改	359	kinds: 1, // kinds=1，提交为新增验光，2为修改
360	mp_id: Number,	360	mp_id: Number,
361	skuValueArray:[],	361	skuValueArray:[],
362	skId:String	362	skId:String
363	}	363	}
364	},	364	},
365	computed: {	365	computed: {
366	//进购物车选择的人的index	366	//进购物车选择的人的index
367	p_current(){	367	p_current(){
368	const getLoveItemIndex = (item) => item.mp_id == this.propMpId	368	const getLoveItemIndex = (item) => item.mp_id == this.propMpId
369	const p_current = this.$store.state.myLoveList.loveList.findIndex(getLoveItemIndex )	369	const p_current = this.$store.state.myLoveList.loveList.findIndex(getLoveItemIndex )
370	if(this.isCart == 3){	370	if(this.isCart == 3){
371	this.loveCurrent = p_current	371	this.loveCurrent = p_current
372	}	372	}
373	return p_current	373	return p_current
374	},	374	},
375	arr_current(){	375	arr_current(){
376	if(this.isCart == 3){	376	if(this.isCart == 3){
377	const skId = this.sk_id	377	const skId = this.sk_id
378	const skuValue = this.skuItem.sku_value	378	const skuValue = this.skuItem.sku_value
379	const skuValueArray = skuValue.split('_')	379	const skuValueArray = skuValue.split('_')
380	this.skuValueArray = skuValueArray	380	this.skuValueArray = skuValueArray
381	const attrList = this.$store.state.read.goodInfo.attrList	381	const attrList = this.$store.state.read.goodInfo.attrList
382	for (let i = 0;i<attrList.length;i++) {	382	for (let i = 0;i<attrList.length;i++) {
383	const getArrIndex = (item) => item.aid == skuValueArray[i]	383	const getArrIndex = (item) => item.aid == skuValueArray[i]
384	const arr_current = this.$store.state.read.goodInfo.attrList[i].attr.findIndex(getArrIndex )	384	const arr_current = this.$store.state.read.goodInfo.attrList[i].attr.findIndex(getArrIndex )
385	// console.log('arr_current',arr_current)	385	// console.log('arr_current',arr_current)
386	this.current.push(arr_current)	386	this.current.push(arr_current)
387	}	387	}
388	}else{	388	}else{
389	return null	389	return null
390	}	390	}
391	},	391	},
392	loveList() {	392	loveList() {
393	return this.$store.state.myLoveList.loveList \|\| []	393	return this.$store.state.myLoveList.loveList \|\| []
394	},	394	},
395	attrList() {	395	attrList() {
396	// console.log('attrList',this.$store.state.read.goodInfo.attrList)	396	// console.log('attrList',this.$store.state.read.goodInfo.attrList)
397	let attrList = this.$store.state.read.goodInfo.attrList	397	let attrList = this.$store.state.read.goodInfo.attrList
398	if(attrList !== undefined){	398	if(attrList !== undefined){
399	return attrList	399	return attrList
400	}else{	400	}else{
401	return []	401	return []
402	}	402	}
403	},	403	},
404	skuList() {	404	skuList() {
405	// console.log('skuList',this.$store.state.read.goodInfo.skuList)	405	// console.log('skuList',this.$store.state.read.goodInfo.skuList)
406	return this.$store.state.read.goodInfo.skuList	406	return this.$store.state.read.goodInfo.skuList
407	},	407	},
408	skuItem(){	408	skuItem(){
409	// if(this.isCart == 3){	409	// if(this.isCart == 3){
410	const skuList = this.$store.state.read.goodInfo.skuList	410	const skuList = this.$store.state.read.goodInfo.skuList
411	const skuItem = skuList.filter(item => item.sk_id === this.skId)[0]	411	const skuItem = skuList.filter(item => item.sk_id === this.skId)[0]
412	return skuItem	412	return skuItem
413	// }else{	413	// }else{
414	// const skuList = this.$store.state.read.goodInfo.skuList	414	// const skuList = this.$store.state.read.goodInfo.skuList
415	// const skuItem = skuList[0]	415	// const skuItem = skuList[0]
416	// return skuItem	416	// return skuItem
417	// }	417	// }
418	},	418	},
419	mpList() {	419	mpList() {
420		420
421	return this.$store.state.myLoveList.loveList	421	return this.$store.state.myLoveList.loveList
422	},	422	},
		423	glassInfoRight(){
		424	const glassInfoArr = Object.values(this.glassInfo)
		425	// console.log('glassInfoArr',glassInfoArr.find(item => item == '0'))
		426	return glassInfoArr.find(item => item == '0') ==undefined
		427	}
423	},	428	},
424	created() {	429	created() {
425	this.skuValueArray = this.skuList[0].sku_value.split("_")	430	this.skuValueArray = this.skuList[0].sku_value.split("_")
426	// console.log(this.sk_id)	431	// console.log(this.sk_id)
427	this.mp_id = this.propMpId	432	this.mp_id = this.propMpId
428	const pid = this.pid	433	const pid = this.pid
429	if(this.isCart!==3){	434	if(this.isCart!==3){
430	this.skId = this.skuList[0].sk_id	435	this.skId = this.skuList[0].sk_id
431	const current = []	436	const current = []
432	const show = []	437	const show = []
433	for (let index = 0; index < this.attrList.length; index++) {	438	for (let index = 0; index < this.attrList.length; index++) {
434	current.push(0)	439	current.push(0)
435	show.push(true)	440	show.push(true)
436	}	441	}
437	this.current = current	442	this.current = current
438	this.show = show	443	this.show = show
439	}else{	444	}else{
440	this.skId = this.sk_id	445	this.skId = this.sk_id
441	}	446	}
442
443	//获取关心的人列表	447	//获取关心的人列表
444	store.dispatch('myLoveList/getLoveList', {	448	store.dispatch('myLoveList/getLoveList', {
445	uid: this.$store.state.user.userInfo.uid,	449	uid: this.$store.state.user.userInfo.uid,
446	});	450	});
447
448
449	// 初始化SPL、CYL、AXI的值	451	// 初始化SPL、CYL、AXI的值
450	for (let j = 0; j < 3; j++) {	452	for (let j = 0; j < 3; j++) {
451	for (let i = -12; i < 6; i++) {	453	for (let i = -12; i < 6; i++) {
452	this.pickerInfoList[j].nameArray1.push(i)	454	this.pickerInfoList[j].nameArray1.push(i)
453	this.pickerInfoList[j].nameArray1.push(i + 0.5)	455	this.pickerInfoList[j].nameArray1.push(i + 0.5)
454	this.pickerInfoList[j].nameArray2.push(i)	456	this.pickerInfoList[j].nameArray2.push(i)
455	this.pickerInfoList[j].nameArray2.push(i + 0.5)	457	this.pickerInfoList[j].nameArray2.push(i + 0.5)
456	if (i >= -6) {	458	if (i >= -6) {
457	this.pickerInfoList[j].nameArray1.push(i + 0.25)	459	this.pickerInfoList[j].nameArray1.push(i + 0.25)
458	this.pickerInfoList[j].nameArray1.push(i + 0.75)	460	this.pickerInfoList[j].nameArray1.push(i + 0.75)
459	this.pickerInfoList[j].nameArray2.push(i + 0.25)	461	this.pickerInfoList[j].nameArray2.push(i + 0.25)
460	this.pickerInfoList[j].nameArray2.push(i + 0.75)	462	this.pickerInfoList[j].nameArray2.push(i + 0.75)
461	}	463	}
462	if (i === 5) {	464	if (i === 5) {
463	this.pickerInfoList[j].nameArray1.push(i + 1)	465	this.pickerInfoList[j].nameArray1.push(i + 1)
464	this.pickerInfoList[j].nameArray2.push(i + 1)	466	this.pickerInfoList[j].nameArray2.push(i + 1)
465	}	467	}
466	}	468	}
467	}	469	}
468	// 初始化日期值	470	// 初始化日期值
469	for (let i = 1; i < 32; i++) {	471	for (let i = 1; i < 32; i++) {
470	this.pickerInfoList[3].nameArray3.push(i)	472	this.pickerInfoList[3].nameArray3.push(i)
471	}	473	}
472	// 初始化年份前后五年	474	// 初始化年份前后五年
473	const myDate = new Date()	475	const myDate = new Date()
474	const nowYear = myDate.getFullYear()	476	const nowYear = myDate.getFullYear()
475	for (let i = 0; i < 5; i++) {	477	for (let i = 0; i < 5; i++) {
476	this.pickerInfoList[3].nameArray1.push(nowYear - i)	478	this.pickerInfoList[3].nameArray1.push(nowYear - i)
477	}	479	}
478	},	480	},
479	name : "bottomSheet",	481	name : "bottomSheet",
480	methods: {	482	methods: {
		483	//判断眼镜数据是否为0
481	checkGlassInfo(){	484	checkGlassInfo(){
482	const glassInfoArr = Object.values(this.glassInfo)	485	// const glassInfoArr = Object.values(this.glassInfo)
483	if(glassInfoArr.find(item => item == '0') !=='undefind'){	486	// console.log(this.glassInfoRight)
484	uni.showModal({	487	if(!this.glassInfoRight){
485	title:'请完善镜框数据~'	488	uni.showToast({
		489	title:'请完善镜框数据~',
		490	icon:'none'
486	})	491	})
487	}	492	}
488	},	493	},
489	updateMylove(){	494	updateMylove(){
490	const loveItem = this.loveList[this.loveCurrent]	495	const loveItem = this.loveList[this.loveCurrent]
491	const glassWidth = this.glassInfo.glassWidth	496	const glassWidth = this.glassInfo.glassWidth
492	const norseWidth = this.glassInfo.norseWidth	497	const norseWidth = this.glassInfo.norseWidth
493	const legWidth = this.glassInfo.legWidth	498	const legWidth = this.glassInfo.legWidth
494	console.log(loveItem.glassWidth)
495	console.log(glassWidth)
496	if(loveItem.glassWidth !== glassWidth){	499	if(loveItem.glassWidth !== glassWidth){
497	store.dispatch('myLoveList/updateMylove', {	500	store.dispatch('myLoveList/updateMylove', {
498	uid: this.$store.state.user.userInfo.uid,	501	uid: this.$store.state.user.userInfo.uid,
499	openid: this.$store.state.user.userInfo.openid,	502	openid: this.$store.state.user.userInfo.openid,
500	mp_id: this.mp_id,	503	mp_id: this.mp_id,
501	keyname: 'glassWidth',	504	keyname: 'glassWidth',
502	keyvalue: glassWidth	505	keyvalue: glassWidth
503	});	506	});
504	}	507	}
505	if(loveItem.norseWidth !== norseWidth){	508	if(loveItem.norseWidth !== norseWidth){
506	store.dispatch('myLoveList/updateMylove', {	509	store.dispatch('myLoveList/updateMylove', {
507	uid: this.$store.state.user.userInfo.uid,	510	uid: this.$store.state.user.userInfo.uid,
508	openid: this.$store.state.user.userInfo.openid,	511	openid: this.$store.state.user.userInfo.openid,
509	mp_id: this.mp_id,	512	mp_id: this.mp_id,
510	keyname: 'norseWidth',	513	keyname: 'norseWidth',
511	keyvalue: norseWidth	514	keyvalue: norseWidth
512	});	515	});
513	}	516	}
514	if(loveItem.legWidth !== legWidth){	517	if(loveItem.legWidth !== legWidth){
515	store.dispatch('myLoveList/updateMylove', {	518	store.dispatch('myLoveList/updateMylove', {
516	uid: this.$store.state.user.userInfo.uid,	519	uid: this.$store.state.user.userInfo.uid,
517	openid: this.$store.state.user.userInfo.openid,	520	openid: this.$store.state.user.userInfo.openid,
518	mp_id: this.mp_id,	521	mp_id: this.mp_id,
519	keyname: 'legWidth',	522	keyname: 'legWidth',
520	keyvalue: legWidth	523	keyvalue: legWidth
521	});	524	});
522	}	525	}
523	},	526	},
524	glassInfoInput(e,type){	527	glassInfoInput(e,type){
525	switch(type){	528	switch(type){
526	case 0:	529	case 0:
527	this.glassInfo.glassWidth = e.detail.value	530	this.glassInfo.glassWidth = e.detail.value
528	break;	531	break;
529	case 1:	532	case 1:
530	this.glassInfo.norseWidth = e.detail.value	533	this.glassInfo.norseWidth = e.detail.value
531	break;	534	break;
532	case 2:	535	case 2:
533	this.glassInfo.legWidth = e.detail.value	536	this.glassInfo.legWidth = e.detail.value
534	break;	537	break;
535	default:	538	default:
536	break;	539	break;
537	}	540	}
538	},	541	},
539	//参数点击事件==》改变对应图片	542	//参数点击事件==》改变对应图片
540	cartOnClickItem(index, i,aid) {	543	cartOnClickItem(index, i,aid) {
541	//根据aid拼接skuValue	544	//根据aid拼接skuValue
542	this.skuValueArray[index] = aid	545	this.skuValueArray[index] = aid
543	const sku_value = this.skuValueArray.join('_')	546	const sku_value = this.skuValueArray.join('_')
544	//根据sku_value获取对应的sk_id	547	//根据sku_value获取对应的sk_id
545	const itemSk_id = this.skuList.filter(item=>item.sku_value == sku_value)[0].sk_id	548	const itemSk_id = this.skuList.filter(item=>item.sku_value == sku_value)[0].sk_id
546	//修改sk_id	549	//修改sk_id
547	this.skId = itemSk_id	550	this.skId = itemSk_id
548	if (this.current[index] !== i) {	551	if (this.current[index] !== i) {
549	this.current[index] = i	552	this.current[index] = i
550	}	553	}
551	this.$forceUpdate()	554	this.$forceUpdate()
552	},	555	},
553	comfirmChoose(){	556	comfirmChoose(){
554	this.checkGlassInfo()	557	this.checkGlassInfo()
555	this.updateMylove()	558	if(this.glassInfoRight){
556	const price = this.skuList.filter(item=>item.sk_id == this.skId)[0].real_price	559	this.updateMylove()
557	this.$emit("chooseCartModi",this.mp_id,this.skId,price,this.pid,this.count,this.cart_id,this.index)//添加购物车	560	const price = this.skuList.filter(item=>item.sk_id == this.skId)[0].real_price
558	this.$emit("closeBottom")	561	this.$emit("chooseCartModi",this.mp_id,this.skId,price,this.pid,this.count,this.cart_id,this.index)//添加购物车
		562	this.$emit("closeBottom")
		563	}
559	},	564	},
560	addCart(){	565	addCart(){
561	this.checkGlassInfo()	566	this.checkGlassInfo()
562	this.updateMylove()	567	if(this.glassInfoRight){
563	const that = this	568	this.updateMylove()
564	const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name]	569	const that = this
565	const checkedSKU = []	570	const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name]
566	let j;	571	const checkedSKU = []
567	for (let i = 0;i<that.current.length;i++) {	572	let j;
568	checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])	573	for (let i = 0;i<that.current.length;i++) {
569	// console.log('i', i, j, i !== this.current.length - 1)	574	checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
570	if (i !== this.current.length - 1) {	575	// console.log('i', i, j, i !== this.current.length - 1)
571	// 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应	576	if (i !== this.current.length - 1) {
572	j = this.current[i] * this.attrList[1].attr.length	577	// 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
573	} else {	578	j = this.current[i] * this.attrList[1].attr.length
574	j += this.current[i]	579	} else {
575	}	580	j += this.current[i]
		581	}
		582	}
		583	const price = this.skuList.filter(item=>item.sk_id == this.skuList[j].sk_id)[0].real_price
		584	let sk_id = this.skuList[j].sk_id
		585	// console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
		586	// console.log('mp_id',this.mp_id,'数量',this.count)
		587	this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id,price)//添加购物车
		588	this.$emit("closeBottom")//关闭弹窗
576	}	589	}
577	const price = this.skuList.filter(item=>item.sk_id == this.skuList[j].sk_id)[0].real_price
578	let sk_id = this.skuList[j].sk_id
579	// console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
580	// console.log('mp_id',this.mp_id,'数量',this.count)
581	this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id,price)//添加购物车
582	this.$emit("closeBottom")//关闭弹窗
583	},	590	},
584	onClickLoveItem(index,name){	591	onClickLoveItem(index,name){
585	const loveList = this.loveList	592	const loveList = this.loveList
586	this.glassInfo.glassWidth = loveList[index].glassWidth	593	this.glassInfo.glassWidth = loveList[index].glassWidth
587	this.glassInfo.norseWidth = loveList[index].norseWidth	594	this.glassInfo.norseWidth = loveList[index].norseWidth
588	this.glassInfo.legWidth = loveList[index].legWidth	595	this.glassInfo.legWidth = loveList[index].legWidth
589	for (let index = 0; index < loveList.length; index++) {	596	for (let index = 0; index < loveList.length; index++) {
590	if (name === loveList[index].name && name!==this.name) {	597	if (name === loveList[index].name && name!==this.name) {
591	this.isDataName = true	598	this.isDataName = true
592	this.kinds = 2	599	this.kinds = 2
593	this.name = loveList[index].name	600	this.name = loveList[index].name
594	this.pd = loveList[index].pd	601	this.pd = loveList[index].pd
595	this.mp_id = loveList[index].mp_id	602	this.mp_id = loveList[index].mp_id
596	this.oldname = loveList[index].name	603	this.oldname = loveList[index].name
597	this.oldpd = loveList[index].pd	604	this.oldpd = loveList[index].pd
598	this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)	605	this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
599	this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)	606	this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
600	this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)	607	this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
601	this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)	608	this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
602	this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)	609	this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
603	this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)	610	this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
604	this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))	611	this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
605	if (loveList[index].in_time.toString().slice(5, 6) === 0) {	612	if (loveList[index].in_time.toString().slice(5, 6) === 0) {
606	this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))	613	this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
607	} else {	614	} else {
608	this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))	615	this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
609	}	616	}
610	if (loveList[index].in_time.toString().slice(8, 9) === 0) {	617	if (loveList[index].in_time.toString().slice(8, 9) === 0) {
611	this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))	618	this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
612	} else {	619	} else {
613	this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))	620	this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
614	}	621	}
615	}	622	}
616	}	623	}
617	this.name = name;	624	this.name = name;
618	this.loveCurrent = index;	625	this.loveCurrent = index;
619	},	626	},
620	closeSheet(){	627	closeSheet(){
621	this.$emit('closeBottom');	628	this.$emit('closeBottom');
622	},	629	},
623	stopEvent(){ //@click.stop防止事件冒泡	630	stopEvent(){ //@click.stop防止事件冒泡
624		631
625	},	632	},
626	moveHandle(){ //不让页面滚动	633	moveHandle(){ //不让页面滚动
627		634
628	},	635	},
629	// picker相关功能	636	// picker相关功能
630	handleInput(e) {	637	handleInput(e) {
631	this.name = e.target.value	638	this.name = e.target.value
632	this.isDataName = false	639	this.isDataName = false
633	const mpList = this.mpList	640	const mpList = this.mpList
634	// console.log('mpList===>', mpList)	641	// console.log('mpList===>', mpList)
635	for (let index = 0; index < mpList.length; index++) {	642	for (let index = 0; index < mpList.length; index++) {
636	if (e.detail.value === mpList[index].name) {	643	if (e.detail.value === mpList[index].name) {
637	this.isDataName = true	644	this.isDataName = true
638	uni.showModal({	645	uni.showModal({
639	title: '提示',	646	title: '提示',
640	content: `是否填充已有的"${e.detail.value}"的数据`,	647	content: `是否填充已有的"${e.detail.value}"的数据`,
641	success: (res) => {	648	success: (res) => {
642	if (res.confirm) {	649	if (res.confirm) {
643	this.kinds = 2	650	this.kinds = 2
644	// console.log('args===>', index)	651	// console.log('args===>', index)
645	// const mpList=Object.assign({},this.$store.state.mympList.mpList)	652	// const mpList=Object.assign({},this.$store.state.mympList.mpList)
646	this.name = mpList[index].name	653	this.name = mpList[index].name
647	this.pd = mpList[index].pd	654	this.pd = mpList[index].pd
648	this.mp_id = mpList[index].mp_id	655	this.mp_id = mpList[index].mp_id
649	this.oldname = mpList[index].name	656	this.oldname = mpList[index].name
650	this.oldpd = mpList[index].pd	657	this.oldpd = mpList[index].pd
651	// 将kinds =2时的值传到该页面	658	// 将kinds =2时的值传到该页面
652	this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)	659	this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
653	this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)	660	this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
654	this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)	661	this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
655	this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)	662	this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
656	this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)	663	this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
657	this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)	664	this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
658	this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))	665	this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
659	if (mpList[index].in_time.toString().slice(5, 6) === 0) {	666	if (mpList[index].in_time.toString().slice(5, 6) === 0) {
660	this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))	667	this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
661	} else {	668	} else {
662	this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))	669	this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
663	}	670	}
664	if (mpList[index].in_time.toString().slice(8, 9) === 0) {	671	if (mpList[index].in_time.toString().slice(8, 9) === 0) {
665	this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))	672	this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
666	} else {	673	} else {
667	this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))	674	this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
668	}	675	}
669	// this.checkedData = mpList[index]	676	// this.checkedData = mpList[index]
670	// console.log('checkedData', this.checkedData)	677	// console.log('checkedData', this.checkedData)
671	} else if (res.cancel) {	678	} else if (res.cancel) {
672	this.kinds = 2	679	this.kinds = 2
673	}	680	}
674	},	681	},
675	})	682	})
676	}	683	}
677	}	684	}
678	},	685	},
679	handleInputPd(e) {	686	handleInputPd(e) {
680	// 只能输入正浮点数或正数	687	// 只能输入正浮点数或正数
681	if (/^\d+(\.\d+)?$/.test(e.target.value)) {	688	if (/^\d+(\.\d+)?$/.test(e.target.value)) {
682	this.pd = e.target.value	689	this.pd = e.target.value
683	} else {	690	} else {
684	uni.showToast({	691	uni.showToast({
685	title: '请输入有效数据;示例:89',	692	title: '请输入有效数据;示例:89',
686	icon: 'none',	693	icon: 'none',
687	duration: 2000,	694	duration: 2000,
688	})	695	})
689	this.pd = ''	696	this.pd = ''
690	}	697	}
691	},	698	},
692	changeConfirm() {	699	// changeConfirm() {
693	this.confirm = !this.confirm	700	// this.confirm = !this.confirm
694	},	701	// },
695	bindPickerChange01: function(e) {	702	bindPickerChange01: function(e) {
696	this.pickerInfoList[0].nameIndex1 = e.target.value	703	this.pickerInfoList[0].nameIndex1 = e.target.value
697	this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]	704	this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
698	},	705	},
699	bindPickerChange02: function(e) {	706	bindPickerChange02: function(e) {
700	this.pickerInfoList[0].nameIndex2 = e.target.value	707	this.pickerInfoList[0].nameIndex2 = e.target.value
701	this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]	708	this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
702	},	709	},
703		710
704	bindPickerChange11: function(e) {	711	bindPickerChange11: function(e) {
705	this.pickerInfoList[1].nameIndex1 = e.target.value	712	this.pickerInfoList[1].nameIndex1 = e.target.value
706	this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]	713	this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
707	},	714	},
708	bindPickerChange12: function(e) {	715	bindPickerChange12: function(e) {
709	this.pickerInfoList[1].nameIndex2 = e.target.value	716	this.pickerInfoList[1].nameIndex2 = e.target.value
710	this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]	717	this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
711	},	718	},
712		719
713	bindPickerChange21: function(e) {	720	bindPickerChange21: function(e) {
714	this.pickerInfoList[2].nameIndex1 = e.target.value	721	this.pickerInfoList[2].nameIndex1 = e.target.value
715	this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]	722	this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
716	},	723	},
717	bindPickerChange22: function(e) {	724	bindPickerChange22: function(e) {
718	this.pickerInfoList[2].nameIndex2 = e.target.value	725	this.pickerInfoList[2].nameIndex2 = e.target.value
719	this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]	726	this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
720	},	727	},
721		728
722	bindPickerChange41: function(e) {	729	bindPickerChange41: function(e) {
723	this.pickerInfoList[3].nameIndex1 = e.target.value	730	this.pickerInfoList[3].nameIndex1 = e.target.value
724	this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]	731	this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
725	},	732	},
726	bindPickerChange42: function(e) {	733	bindPickerChange42: function(e) {
727	this.pickerInfoList[3].nameIndex2 = e.target.value	734	this.pickerInfoList[3].nameIndex2 = e.target.value
728	this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]	735	this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
729	},	736	},
730	bindPickerChange43: function(e) {	737	bindPickerChange43: function(e) {
731	this.pickerInfoList[3].nameIndex3 = e.target.value	738	this.pickerInfoList[3].nameIndex3 = e.target.value
732	this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]	739	this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
733	},	740	},
734	changeShow(num) {	741	changeShow(num) {
735	this.show[num] = !this.show[num]	742	this.show[num] = !this.show[num]
736	this.$forceUpdate()	743	this.$forceUpdate()
737	},	744	},
738	counter(isadd) {	745	counter(isadd) {
739	if (isadd) {	746	if (isadd) {
740	this.count >= this.maxCount ? this.addDisabled = true : this.count++	747	this.count >= this.maxCount ? this.addDisabled = true : this.count++
741	} else {	748	} else {
742	this.count <= 1 ? this.desDisabled = true : this.count--	749	this.count <= 1 ? this.desDisabled = true : this.count--
743	}	750	}
744	},	751	},
745	toComfirmOrder() {	752	toComfirmOrder() {
746	this.checkGlassInfo()	753	this.checkGlassInfo()
747	this.updateMylove()	754	this.updateMylove()
748	// 先处理验光部分的逻辑，如果ok在跳转	755	// 先处理验光部分的逻辑，如果ok在跳转
749	let flag = 0	756	let flag = 0
750	if (this.name === '') {	757	if (this.name === '') {
751	uni.showToast({	758	uni.showToast({
752	title: '请输入验光单取名',	759	title: '请输入验光单取名',
753	icon: 'none',	760	icon: 'none',
754	duration: 2000,	761	duration: 2000,
755	})	762	})
756	} else {	763	} else {
757	if (this.pd === '') {	764	if (this.pd === '') {
758	uni.showToast({	765	uni.showToast({
759	title: '请输入瞳距',	766	title: '请输入瞳距',
760	icon: 'none',	767	icon: 'none',
761	duration: 2000,	768	duration: 2000,
762	})	769	})
763	} else {	770	} else {
764	if (this.kinds === 1) {	771	if (this.kinds === 1) {
765	// 添加用户验光单	772	// 添加用户验光单
766	console.log('kinds====>', this.pickerInfoChioce.leftSph)
767	console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
768	console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
769	if (this.pickerInfoChioce.rightSph === '' \|\| this.pickerInfoChioce.leftSph === '' \|\|	773	if (this.pickerInfoChioce.rightSph === '' \|\| this.pickerInfoChioce.leftSph === '' \|\|
770	this.pickerInfoChioce.leftCyl === '' \|\| this.pickerInfoChioce.rightCyl === '' \|\|	774	this.pickerInfoChioce.leftCyl === '' \|\| this.pickerInfoChioce.rightCyl === '' \|\|
771	this.pickerInfoChioce.leftAxi === '' \|\| this.pickerInfoChioce.rightAxi === ''	775	this.pickerInfoChioce.leftAxi === '' \|\| this.pickerInfoChioce.rightAxi === ''
772	) {	776	) {
773	uni.showToast({	777	uni.showToast({
774	title: '请输入您的验光数据',	778	title: '请输入您的验光数据',
775	icon: 'none',	779	icon: 'none',
776	duration: 2000,	780	duration: 2000,
777	})	781	})
778	} else {	782	} else {
779	if (this.confirm) {	783	// if (this.confirm) {
780	store.dispatch('myLoveList/addMylove', {	784	store.dispatch('myLoveList/addMylove', {
781	uid: this.$store.state.user.userInfo.uid,	785	uid: this.$store.state.user.userInfo.uid,
782	openid: this.$store.state.user.userInfo.openid,	786	openid: this.$store.state.user.userInfo.openid,
783	// mp_name: this.$store.state.user.userInfo.mp_name,	787	// mp_name: this.$store.state.user.userInfo.mp_name,
784	leftSph: this.pickerInfoChioce.leftSph,	788	leftSph: this.pickerInfoChioce.leftSph,
785	rightSph: this.pickerInfoChioce.rightSph,	789	rightSph: this.pickerInfoChioce.rightSph,
786	leftCyl: this.pickerInfoChioce.leftCyl,	790	leftCyl: this.pickerInfoChioce.leftCyl,
787	rightCyl: this.pickerInfoChioce.rightCyl,	791	rightCyl: this.pickerInfoChioce.rightCyl,
788	leftAxi: this.pickerInfoChioce.leftAxi,	792	leftAxi: this.pickerInfoChioce.leftAxi,
789	rightAxi: this.pickerInfoChioce.rightAxi,	793	rightAxi: this.pickerInfoChioce.rightAxi,
790	pd: this.pd, // 瞳距	794	pd: this.pd, // 瞳距
791	mp_name: this.name,	795	mp_name: this.name,
792	// time: this.pickerInfoChioce.time,	796	// time: this.pickerInfoChioce.time,
793	// img_url2: "http://localhost:8087/images/shop_1/1/",	797	// img_url2: "http://localhost:8087/images/shop_1/1/",
794	}).then(({ mp_id: mpId }) => {	798	}).then(({ mp_id: mpId }) => {
795	this.mp_id = mpId	799	this.mp_id = mpId
796	})	800	})
797	flag = 1	801	flag = 1
798	} else {
799	uni.showToast({
800	title: '请确认您的验光数据',
801	icon: 'none',
802	duration: 3000,
803	})
804	}
805	}	802	}
806	}	803	}
807	if (this.kinds === 2) {	804	if (this.kinds === 2) {
808	if (this.confirm) {	805	// if (this.confirm) {
809	const leftList = ['leftSph', 'leftCyl', 'leftAxi']	806	const leftList = ['leftSph', 'leftCyl', 'leftAxi']
810	const rightList = ['rightSph', 'rightCyl', 'rightAxi']	807	const rightList = ['rightSph', 'rightCyl', 'rightAxi']
811	// let flag=0;	808	// let flag=0;
812	if (this.name !== this.oldname) {	809	if (this.name !== this.oldname) {
813	store.dispatch('myLoveList/updateMylove', {	810	store.dispatch('myLoveList/updateMylove', {
814	uid: this.$store.state.user.userInfo.uid,	811	uid: this.$store.state.user.userInfo.uid,
815	openid: this.$store.state.user.userInfo.openid,	812	openid: this.$store.state.user.userInfo.openid,
816	mp_id: this.mp_id,	813	mp_id: this.mp_id,
817	keyname: 'name',	814	keyname: 'name',
818	keyvalue: this.name,	815	keyvalue: this.name,
819	})	816	})
820	flag = 1	817	flag = 1
821	}	818	}
822	if (this.pd !== this.oldpd) {	819	if (this.pd !== this.oldpd) {
823	store.dispatch('myLoveList/updateMylove', {	820	store.dispatch('myLoveList/updateMylove', {
824	uid: this.$store.state.user.userInfo.uid,	821	uid: this.$store.state.user.userInfo.uid,
825	openid: this.$store.state.user.userInfo.openid,	822	openid: this.$store.state.user.userInfo.openid,
826	mp_id: this.mp_id,	823	mp_id: this.mp_id,
827	keyname: 'pd',	824	keyname: 'pd',
828	keyvalue: this.pd,	825	keyvalue: this.pd,
829	})	826	})
830	flag = 1	827	flag = 1
831	}	828	}
832	// 先验证是否输入有无空	829	// 先验证是否输入有无空
833	let q = true	830	let q = true
834	for (let k = 0; k < 3; k++) {	831	for (let k = 0; k < 3; k++) {
835	q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&	832	q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
836	this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')	833	this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
837	}	834	}
838	if (q) {	835	if (q) {
839	for (let j = 0; j < 3; j++) {	836	for (let j = 0; j < 3; j++) {
840	if (this.pickerInfoList[j].nameIndex1 !== 0) {	837	if (this.pickerInfoList[j].nameIndex1 !== 0) {
841	store.dispatch('myLoveList/updateMylove', {	838	store.dispatch('myLoveList/updateMylove', {
842	uid: this.$store.state.user.userInfo.uid,	839	uid: this.$store.state.user.userInfo.uid,
843	openid: this.$store.state.user.userInfo.openid,	840	openid: this.$store.state.user.userInfo.openid,
844	mp_id: this.mp_id,	841	mp_id: this.mp_id,
845	keyname: leftList[j],	842	keyname: leftList[j],
846	keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],	843	keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
847	})	844	})
848	}	845	}
849	if (this.pickerInfoList[j].nameIndex2 !== 0) {	846	if (this.pickerInfoList[j].nameIndex2 !== 0) {
850	store.dispatch('myLoveList/updateMylove', {	847	store.dispatch('myLoveList/updateMylove', {
851	uid: this.$store.state.user.userInfo.uid,	848	uid: this.$store.state.user.userInfo.uid,
852	openid: this.$store.state.user.userInfo.openid,	849	openid: this.$store.state.user.userInfo.openid,
853	mp_id: this.mp_id,	850	mp_id: this.mp_id,
854	keyname: rightList[j],	851	keyname: rightList[j],
855	keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],	852	keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
856	})	853	})
857	}	854	}
858	flag = 1	855	flag = 1
859	}	856	}
860	} else {	857	} else {
861	flag = 0	858	flag = 0
862	uni.showToast({	859	uni.showToast({
863	title: '请输入您的验光数据',	860	title: '请输入您的验光数据',
864	icon: 'none',	861	icon: 'none',
865	duration: 2000,	862	duration: 2000,
866	})	863	})
867	}	864	}
868	if (flag !== 0) {	865
869	store.dispatch('myLoveList/getLoveList', {	866	// } else {
870	uid: this.$store.state.user.userInfo.uid,	867	// uni.showToast({
871	})	868	// title: '请确认您的验光数据',
872	}	869	// icon: 'none',
873	} else {	870	// duration: 3000,
874	uni.showToast({	871	// })
875	title: '请确认您的验光数据',	872	// }
876	icon: 'none',
877	duration: 3000,
878	})
879	}
880	}	873	}
881	}	874	}
882	}	875	}
883	if (flag !== 0) {	876	if (flag !== 0) {
884	// 如果数据验证无误，那么更新验光单的数据	877	// 如果数据验证无误，那么更新验光单的数据
885	store.dispatch('myLoveList/getLoveList', {	878	store.dispatch('myLoveList/getLoveList', {
886	uid: this.$store.state.user.userInfo.uid,	879	uid: this.$store.state.user.userInfo.uid,
887	})	880	})
888	let i = 0	881	let i = 0
889	// 判断出是哪一个sku被选中	882	// 判断出是哪一个sku被选中
890	for (let index = 0; index < this.current.length; index++) {	883	for (let index = 0; index < this.current.length; index++) {
891	// console.log('index', index, i, index !== this.current.length - 1)	884	// console.log('index', index, i, index !== this.current.length - 1)
892	if (index !== this.current.length - 1) {	885	if (index !== this.current.length - 1) {
893	// 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应	886	// 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
894	i = this.current[index] * this.attrList[1].attr.length	887	i = this.current[index] * this.attrList[1].attr.length
895	} else {	888	} else {
896	i += this.current[index]	889	i += this.current[index]
897	}	890	}
898	}	891	}
899	// 判断是否其输入的人员数据是否已存在	892	// 判断是否其输入的人员数据是否已存在
900	store.dispatch('order/saveParams', {	893	store.dispatch('order/saveParams', {
901	sk_id_arr: this.skuList[i],	894	sk_id_arr: this.skuList[i],
902	current: this.current,	895	current: this.current,
903	mp_id: this.mp_id,	896	mp_id: this.mp_id,
904	attrList: this.attrList,	897	attrList: this.attrList,
905	})	898	})
906	this.$store.state.cart.buyItem = this.skuItem	899	this.$store.state.cart.buyItem = this.skuItem
907	// 跳转到确认订单页面	900	// 跳转到确认订单页面
908	uni.navigateTo({	901	uni.navigateTo({
909	url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}&isCart=false`,	902	url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}&isCart=false`,
910	})	903	})
911	}	904	}
912	},	905	},
913	}	906	}
914	}	907	}
915	</script>	908	</script>
916		909
917	<style lang="scss">	910	<style lang="scss">
918	.BottomSheetContent {	911	.BottomSheetContent {
919	min-height: 100vh;	912	min-height: 100vh;
920	background-color: #f2f2f2;	913	background-color: #f2f2f2;
921	// padding-top: 20rpx;	914	// padding-top: 20rpx;
922	.goodInfo {	915	.goodInfo {
923	width: 100%;	916	width: 100%;
924	height: 272rpx;	917	height: 272rpx;
925	border-radius: 16rpx;	918	border-radius: 16rpx;
926	background-color: #ffffff;	919	background-color: #ffffff;
927	box-sizing: border-box;	920	box-sizing: border-box;
928	padding: 36rpx;	921	padding: 36rpx;
929	display: flex;	922	display: flex;
930	flex-direction: row;	923	flex-direction: row;
931	justify-content: flex-start;	924	justify-content: flex-start;
932	position: sticky;	925	position: sticky;
933	top: 0rpx;	926	top: 0rpx;
934	left: 0rpx;	927	left: 0rpx;
935	z-index: 99999;	928	z-index: 99999;
936	.imageWrap {	929	.imageWrap {
937	height: 188rpx;	930	height: 188rpx;
938	width: 188rpx;	931	width: 188rpx;
939	margin-right: 28rpx;	932	margin-right: 28rpx;
940	image {	933	image {
941	height: 188rpx;	934	height: 188rpx;
942	width: 188rpx;	935	width: 188rpx;
943	}	936	}
944	}	937	}
945	.infoRight {	938	.infoRight {
946	display: flex;	939	display: flex;
947	flex-direction: column;	940	flex-direction: column;
948	align-items: flex-start;	941	align-items: flex-start;
949	justify-content: space-between;	942	justify-content: space-between;
950	width: 100%;	943	width: 100%;
951	.goodName {	944	.goodName {
952	font-size: 28rpx;	945	font-size: 28rpx;
953	color: #333333;	946	color: #333333;
954	}	947	}
955	.remarks {	948	.remarks {
956	font-size: 20rpx;	949	font-size: 20rpx;
957	color: #999999;	950	color: #999999;
958	}	951	}
959	.priceBox {	952	.priceBox {
960	display: flex;	953	display: flex;
961	justify-content: space-between;	954	justify-content: space-between;
962	align-items: center;	955	align-items: center;
963	width: 100%;	956	width: 100%;
964	font-size: 14px;	957	font-size: 14px;
965	color: #999999;	958	color: #999999;
966	.price {	959	.price {
967	color: #ff6b4a;	960	color: #ff6b4a;
968	font-size: 28rpx;	961	font-size: 28rpx;
969	}	962	}
970	.counter {	963	.counter {
971	display: flex;	964	display: flex;
972	flex-direction: row;	965	flex-direction: row;
973	justify-content: space-between;	966	justify-content: space-between;
974	align-items: center;	967	align-items: center;
975	font-size: 28rpx;	968	font-size: 28rpx;
976	color: #333333;	969	color: #333333;
977	width: 122rpx;	970	width: 122rpx;
978	.btn {	971	.btn {
979	display: flex;	972	display: flex;
980	justify-content: center;	973	justify-content: center;
981	line-height: 32rpx;	974	line-height: 32rpx;
982	height: 32rpx;	975	height: 32rpx;
983	width: 32rpx;	976	width: 32rpx;
984	background-color: #f2f2f2;	977	background-color: #f2f2f2;
985	color: #cfcfcf;	978	color: #cfcfcf;
986	}	979	}
987	}	980	}
988	}	981	}
989	}	982	}
990	}	983	}
991	.peopleChoose{	984	.peopleChoose{
992	width: 100%;	985	width: 100%;
993	min-height: 200rpx;	986	min-height: 200rpx;
994	border-radius: 16rpx;	987	border-radius: 16rpx;
995	background-color: #ffffff;	988	background-color: #ffffff;
996	box-sizing: border-box;	989	box-sizing: border-box;
997	padding: 36rpx;	990	padding: 36rpx;
998	margin: 10px 0;	991	margin: 10px 0;
999	display: flex;	992	display: flex;
1000	flex-direction: column;	993	flex-direction: column;
1001	justify-content: flex-start;	994	justify-content: flex-start;
1002	align-items: center;	995	align-items: center;
1003	.title{	996	.title{
1004	font-size: 16px;	997	font-size: 16px;
1005	color: #333333;	998	color: #333333;
1006	letter-spacing: -0.3px;	999	letter-spacing: -0.3px;
1007	text-align: justify;	1000	text-align: justify;
1008	line-height: 24px;	1001	line-height: 24px;
1009	margin: 4px 0;	1002	margin: 4px 0;
1010	}	1003	}
1011	.loveList{	1004	.loveList{
1012	display: flex;	1005	display: flex;
1013	flex-direction: row;	1006	flex-direction: row;
1014	flex-wrap: wrap;	1007	flex-wrap: wrap;
1015	justify-content: flex-start;	1008	justify-content: flex-start;
1016	align-items: center;	1009	align-items: center;
1017	padding-top: 24rpx;	1010	padding-top: 24rpx;
1018	width: 100%;	1011	width: 100%;
1019	.peopleName {	1012	.peopleName {
1020	padding: 0 30rpx;	1013	padding: 0 30rpx;
1021	height: 60rpx;	1014	height: 60rpx;
1022	margin: 0 20rpx 20rpx 0;	1015	margin: 0 20rpx 20rpx 0;
1023	transition: all 0.3s;	1016	transition: all 0.3s;
1024	background: #f2f2f2;	1017	background: #f2f2f2;
1025	border-radius: 2px;	1018	border-radius: 2px;
1026	border-radius: 2px;	1019	border-radius: 2px;
1027	line-height: 60rpx;	1020	line-height: 60rpx;
1028	text-align: center;	1021	text-align: center;
1029	color: #666666;	1022	color: #666666;
1030	font-size: 12px;	1023	font-size: 12px;
1031	}	1024	}
1032	.active2 {	1025	.active2 {
1033	background: rgba(255, 107, 74, 0.15);	1026	background: rgba(255, 107, 74, 0.15);
1034	color: #ff6b4a;	1027	color: #ff6b4a;
1035	}	1028	}
1036	}	1029	}
1037	}	1030	}
1038	.goods-data {	1031	.goods-data {
1039	width: 100%;	1032	width: 100%;
1040	box-sizing: border-box;	1033	box-sizing: border-box;
1041	padding: 37rpx 40rpx 0 40rpx;	1034	padding: 37rpx 40rpx 0 40rpx;
1042	background: #ffffff;	1035	background: #ffffff;
1043	border-radius: 12rpx;	1036	border-radius: 12rpx;
1044	.opCollapse {	1037	.opCollapse {
1045	width: 100%;	1038	width: 100%;
1046	padding-bottom: 28rpx;	1039	padding-bottom: 28rpx;
1047	margin-top: 7px;	1040	margin-top: 7px;
1048	border-bottom: 1px solid #e9e9e9;	1041	border-bottom: 1px solid #e9e9e9;
1049	.head {	1042	.head {
1050	display: flex;	1043	display: flex;
1051	justify-content: space-between;	1044	justify-content: space-between;
1052	height: 24px;	1045	height: 24px;
1053	// font-family: PingFangSC-Medium;	1046	// font-family: PingFangSC-Medium;
1054	font-size: 16px;	1047	font-size: 16px;
1055	color: #333333;	1048	color: #333333;
1056	letter-spacing: -0.3px;	1049	letter-spacing: -0.3px;
1057	text-align: justify;	1050	text-align: justify;
1058	line-height: 24px;	1051	line-height: 24px;
1059	margin-bottom: 18rpx;	1052	margin-bottom: 18rpx;
1060	.headRighted {	1053	.headRighted {
1061	width: 0;	1054	width: 0;
1062	height: 0;	1055	height: 0;
1063	border-left: 4px solid transparent;	1056	border-left: 4px solid transparent;
1064	border-right: 4px solid transparent;	1057	border-right: 4px solid transparent;
1065	border-bottom: 4px solid #cfcfcf;	1058	border-bottom: 4px solid #cfcfcf;
1066	transform: scaleY(-1);	1059	transform: scaleY(-1);
1067	margin-top: 10px;	1060	margin-top: 10px;
1068	}	1061	}
1069	.headMid {	1062	.headMid {
1070	font-size: 10px;	1063	font-size: 10px;
1071	color: #999999;	1064	color: #999999;
1072	letter-spacing: -0.19px;	1065	letter-spacing: -0.19px;
1073	margin-left: -120rpx;	1066	margin-left: -120rpx;
1074	}	1067	}
1075	.headRight {	1068	.headRight {
1076	width: 0;	1069	width: 0;
1077	height: 0;	1070	height: 0;
1078	border-left: 4px solid transparent;	1071	border-left: 4px solid transparent;
1079	border-right: 4px solid transparent;	1072	border-right: 4px solid transparent;
1080	border-bottom: 4px solid #cfcfcf;	1073	border-bottom: 4px solid #cfcfcf;
1081	margin-top: 10px;	1074	margin-top: 10px;
1082	}	1075	}
1083	}	1076	}
1084	.body {	1077	.body {
1085	font-size: 12px;	1078	font-size: 12px;
1086	color: #666666;	1079	color: #666666;
1087	letter-spacing: 0;	1080	letter-spacing: 0;
1088	.bodyBox {	1081	.bodyBox {
1089	margin-top: 15px;	1082	margin-top: 15px;
1090	.names {	1083	.names {
1091	font-size: 12px;	1084	font-size: 12px;
1092	color: #151515;	1085	color: #151515;
1093	letter-spacing: 0;	1086	letter-spacing: 0;
1094	text-align: justify;	1087	text-align: justify;
1095	line-height: 17px;	1088	line-height: 17px;
1096	margin-left: 5px;	1089	margin-left: 5px;
1097	margin-right: 10px;	1090	margin-right: 10px;
1098	}	1091	}
1099	text {	1092	text {
1100	font-size: 12px;	1093	font-size: 12px;
1101	color: #666666;	1094	color: #666666;
1102	letter-spacing: 0;	1095	letter-spacing: 0;
1103	text-align: justify;	1096	text-align: justify;
1104	}	1097	}
1105	}	1098	}
1106	}	1099	}
1107	.goods-form {	1100	.goods-form {
1108	display: flex;	1101	display: flex;
1109	flex-direction: column;	1102	flex-direction: column;
1110	align-items: center;	1103	align-items: center;
1111	justify-content: center;	1104	justify-content: center;
1112	background-color: #fff;	1105	background-color: #fff;
1113	width: 100%;	1106	width: 100%;
1114	padding: 40rpx 0;	1107	padding: 40rpx 0;
1115	.p1 {	1108	.p1 {
1116	font-size: 16px;	1109	font-size: 16px;
1117	color: #333333;	1110	color: #333333;
1118	letter-spacing: -0.3px;	1111	letter-spacing: -0.3px;
1119	text-align: justify;	1112	text-align: justify;
1120	line-height: 24px;	1113	line-height: 24px;
1121	margin: 4px 0;	1114	margin: 4px 0;
1122		1115
1123	}	1116	}
1124	.p2 {	1117	.p2 {
1125	font-size: 12px;	1118	font-size: 12px;
1126	color: #999999;	1119	color: #999999;
1127	letter-spacing: -0.23px;	1120	letter-spacing: -0.23px;
1128	margin-bottom: 32rpx;	1121	margin-bottom: 32rpx;
1129	}	1122	}
1130	.image2{	1123	.image2{
1131	width: 42rpx;	1124	width: 42rpx;
1132	height: 34rpx;	1125	height: 34rpx;
1133	margin-right: 12rpx;	1126	margin-right: 12rpx;
1134	}	1127	}
1135	.confirm {	1128	.confirm {
1136	display: flex;	1129	display: flex;
1137	align-items: center;	1130	align-items: center;
1138	font-size: 12px;	1131	font-size: 12px;
1139	color: #666666;	1132	color: #666666;
1140	letter-spacing: -0.23px;	1133	letter-spacing: -0.23px;
1141	width: 684rpx;	1134	width: 684rpx;
1142	.image1{	1135	.image1{
1143	margin-right:25rpx;	1136	margin-right:25rpx;
1144	width: 42rpx;	1137	width: 42rpx;
1145	height: 38rpx;	1138	height: 38rpx;
1146	}	1139	}
1147	}	1140	}
1148	.picker{	1141	.picker{
1149	display: flex;	1142	display: flex;
1150	flex-direction: column;	1143	flex-direction: column;
1151	justify-content: center;	1144	justify-content: center;
1152	align-items: center;	1145	align-items: center;
1153	width: 100%;	1146	width: 100%;
1154		1147
1155	.picker-choice{	1148	.picker-choice{
1156	display: flex;	1149	display: flex;
1157	width: 684rpx;	1150	width: 684rpx;
1158	align-items: center;	1151	align-items: center;
1159	margin-bottom: 40rpx;	1152	margin-bottom: 40rpx;
1160	.input{	1153	.input{
1161	border-bottom: 1px solid #CFCFCF;	1154	border-bottom: 1px solid #CFCFCF;
1162	height: 40rpx;	1155	height: 40rpx;
1163	}	1156	}
1164	.choice-left{	1157	.choice-left{
1165	width: 210rpx;	1158	width: 210rpx;
1166	.pd{	1159	.pd{
1167	font-size: 14px;	1160	font-size: 14px;
1168	color: #333333;	1161	color: #333333;
1169	letter-spacing: -0.26px;	1162	letter-spacing: -0.26px;
1170	text-align: justify;	1163	text-align: justify;
1171	line-height: 24px;	1164	line-height: 24px;
1172	margin-right: 44rpx;	1165	margin-right: 44rpx;
1173	}	1166	}
1174	.p11 {	1167	.p11 {
1175	font-size: 14px;	1168	font-size: 14px;
1176	color: #333333;	1169	color: #333333;
1177	letter-spacing: -0.26px;	1170	letter-spacing: -0.26px;
1178	text-align: justify;	1171	text-align: justify;
1179	line-height: 24px;	1172	line-height: 24px;
1180	// margin-right: 10px;	1173	// margin-right: 10px;
1181	}	1174	}
1182	.p12 {	1175	.p12 {
1183	font-size: 10px;	1176	font-size: 10px;
1184	color: #3F3F3F;	1177	color: #3F3F3F;
1185	letter-spacing: -0.19px;	1178	letter-spacing: -0.19px;
1186	text-align: justify;	1179	text-align: justify;
1187	line-height: 24px;	1180	line-height: 24px;
1188	}	1181	}
1189		1182
1190	}	1183	}
1191	.p13 {	1184	.p13 {
1192	font-size: 10px;	1185	font-size: 10px;
1193	color: #999999;	1186	color: #999999;
1194	letter-spacing: -0.19px;	1187	letter-spacing: -0.19px;
1195	margin-right: 10px;	1188	margin-right: 10px;
1196	}	1189	}
1197	.p13-date {	1190	.p13-date {
1198	font-size: 10px;	1191	font-size: 10px;
1199	color: #999999;	1192	color: #999999;
1200	letter-spacing: -0.19px;	1193	letter-spacing: -0.19px;
1201	margin-right: 5px;	1194	margin-right: 5px;
1202	}	1195	}
1203	picker{	1196	picker{
1204	width: 144rpx;	1197	width: 144rpx;
1205	height: 40rpx;	1198	height: 40rpx;
1206	display: flex;	1199	display: flex;
1207	position: relative;	1200	position: relative;
1208	.p14 {	1201	.p14 {
1209	font-size: 14px;	1202	font-size: 14px;
1210	color: #666666;	1203	color: #666666;
1211	letter-spacing: -0.26px;	1204	letter-spacing: -0.26px;
1212	text-align: center;	1205	text-align: center;
1213	width: 124rpx;	1206	width: 124rpx;
1214	border-bottom: 1px solid #CFCFCF;	1207	border-bottom: 1px solid #CFCFCF;
1215	height: 38rpx;	1208	height: 38rpx;
1216	}	1209	}
1217	image{	1210	image{
1218	width: 20rpx;	1211	width: 20rpx;
1219	height: 20rpx;	1212	height: 20rpx;
1220	position: absolute;	1213	position: absolute;
1221	right: 20rpx;	1214	right: 20rpx;
1222	top: 8rpx;	1215	top: 8rpx;
1223	}	1216	}
1224	}	1217	}
1225		1218
1226	}	1219	}
1227	}	1220	}
1228		1221
1229	.ipts{	1222	.ipts{
1230	width: 100%;	1223	width: 100%;
1231	display: flex;	1224	display: flex;
1232	flex-direction: column;	1225	flex-direction: column;
1233	justify-content: center;	1226	justify-content: center;
1234	align-items: flex-start;	1227	align-items: flex-start;
1235	// padding: 20rpx 36rpx;	1228	// padding: 20rpx 36rpx;
1236	box-sizing: border-box;	1229	box-sizing: border-box;
1237	.inputItem{	1230	.inputItem{
1238	display: flex;	1231	display: flex;
1239	flex-direction: row;	1232	flex-direction: row;
1240	justify-content: center;	1233	justify-content: center;
1241	align-items: center;	1234	align-items: center;
1242	margin-bottom: 36rpx;	1235	margin-bottom: 36rpx;
1243	.text{	1236	.text{
1244	margin-right: 100rpx;	1237	margin-right: 100rpx;
1245	}	1238	}
1246	.input{	1239	.input{
1247	border-bottom: 1px solid #CFCFCF;	1240	border-bottom: 1px solid #CFCFCF;
1248	}	1241	}
1249	}	1242	}
1250		1243
1251	}	1244	}
1252	}	1245	}
1253	}	1246	}
1254	}	1247	}
1255	.choose {	1248	.choose {
1256	width: 100%;	1249	width: 100%;
1257	background: #ffffff;	1250	background: #ffffff;
1258	border-radius: 12rpx;	1251	border-radius: 12rpx;
1259	margin-top: 20rpx;	1252	margin-top: 20rpx;
1260	padding: 40rpx 40rpx 112rpx 40rpx;	1253	padding: 40rpx 40rpx 112rpx 40rpx;
1261	box-sizing: border-box;	1254	box-sizing: border-box;
1262	.chooseItem {	1255	.chooseItem {
1263	width: 100%;	1256	width: 100%;
1264	padding-bottom: 32rpx;	1257	padding-bottom: 32rpx;
1265	border-bottom: 1px solid #e9e9e9;	1258	border-bottom: 1px solid #e9e9e9;
1266	margin-bottom: 28rpx;	1259	margin-bottom: 28rpx;
1267	}	1260	}
1268	.chooseRes {	1261	.chooseRes {
1269	font-size: 12px;	1262	font-size: 12px;
1270	color: #666666;	1263	color: #666666;
1271	}	1264	}
1272	.itemsWrap {	1265	.itemsWrap {
1273	display: flex;	1266	display: flex;
1274	flex-direction: row;	1267	flex-direction: row;
1275	flex-wrap: wrap;	1268	flex-wrap: wrap;
1276	justify-content: flex-start;	1269	justify-content: flex-start;
1277	align-items: center;	1270	align-items: center;
1278	padding-top: 24rpx;	1271	padding-top: 24rpx;
1279	.item1 {	1272	.item1 {
1280	width: 64rpx;	1273	width: 64rpx;
1281	height: 64rpx;	1274	height: 64rpx;
1282	border-radius: 32rpx;	1275	border-radius: 32rpx;
1283	margin: 0 36rpx 24rpx 0;	1276	margin: 0 36rpx 24rpx 0;
1284	transition: all 0.3s;	1277	transition: all 0.3s;
1285	border: 1px solid #ffffff;	1278	border: 1px solid #ffffff;
1286	}	1279	}
1287	.item2 {	1280	.item2 {
1288	// width: 100rpx;	1281	// width: 100rpx;
1289	padding: 0 30rpx;	1282	padding: 0 30rpx;
1290	height: 60rpx;	1283	height: 60rpx;
1291	margin: 0 20rpx 20rpx 0;	1284	margin: 0 20rpx 20rpx 0;
1292	transition: all 0.3s;	1285	transition: all 0.3s;
1293	background: #f2f2f2;	1286	background: #f2f2f2;
1294	border-radius: 2px;	1287	border-radius: 2px;
1295	border-radius: 2px;	1288	border-radius: 2px;
1296	line-height: 60rpx;	1289	line-height: 60rpx;
1297	text-align: center;	1290	text-align: center;
1298	color: #666666;	1291	color: #666666;
1299	font-size: 12px;	1292	font-size: 12px;
1300	}	1293	}
1301	.active1 {	1294	.active1 {
1302	opacity: 0.7;	1295	opacity: 0.7;
1303	border: 1px solid #ff6b4a;	1296	border: 1px solid #ff6b4a;
1304	}	1297	}
1305	.active2 {	1298	.active2 {
1306	background: rgba(255, 107, 74, 0.15);	1299	background: rgba(255, 107, 74, 0.15);
1307	color: #ff6b4a;	1300	color: #ff6b4a;
1308	}	1301	}
1309	}	1302	}
1310	}	1303	}
1311	.button {	1304	.button {
1312	width: 100%;	1305	width: 100%;
1313	height: 112rpx;	1306	height: 112rpx;
1314	background-color: #ff6b4a;	1307	background-color: #ff6b4a;
1315	font-size: 16px;	1308	font-size: 16px;
1316	color: #ffffff;	1309	color: #ffffff;
1317	line-height: 112rpx;	1310	line-height: 112rpx;
1318	text-align: center;	1311	text-align: center;
1319	position: sticky;	1312	position: sticky;
1320	bottom: 0rpx;	1313	bottom: 0rpx;
1321	left: 0rpx;	1314	left: 0rpx;
1322	z-index: 9999;	1315	z-index: 9999;
1323	}	1316	}
1324	}	1317	}
1325	/* sheet弹窗 */	1318	/* sheet弹窗 */
1326	.sheet{	1319	.sheet{
1327	width: 100%;	1320	width: 100%;
1328	height: 100%;	1321	height: 100%;
1329	position: fixed;	1322	position: fixed;
1330	top: 150%;	1323	top: 150%;
1331	left: 0upx;	1324	left: 0upx;
1332	bottom: 0upx;	1325	bottom: 0upx;
1333	right: 0upx;	1326	right: 0upx;
1334	background:rgba(0,0,0,0.3);	1327	background:rgba(0,0,0,0.3);
1335	z-index: 10000;	1328	z-index: 10000;
1336	}	1329	}
1337		1330
1338	/* 显示时候的动画默认0.5s */	1331	/* 显示时候的动画默认0.5s */
1339	.sheetView{	1332	.sheetView{
1340	width: 100%;	1333	width: 100%;
1341	height: 0upx;	1334	height: 0upx;
1342	position: absolute;	1335	position: absolute;
1343	bottom: 0upx;	1336	bottom: 0upx;
1344	background: white;	1337	background: white;

src/pages/addOpticsData/addOpticsData.vue

Diff comments View file @e92e93f

1	<template>	1	<template>
2	<view class="wrap">	2	<view class="wrap">
3	<!-- 弹窗 -->	3	<!-- 弹窗 -->
4	<uni-popup ref="popup" type="center">	4	<uni-popup ref="popup" type="center">
5	<!-- 给一个左边弹窗的样式 -->	5	<!-- 给一个左边弹窗的样式 -->
6	<view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}">	6	<view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}">
7	<!-- 关闭弹窗按钮 -->	7	<!-- 关闭弹窗按钮 -->
8	<view class="closeBtn" @click="this.$refs.popup.close()"></view>	8	<view class="closeBtn" @click="this.$refs.popup.close()"></view>
9	<!-- 左 -->	9	<!-- 左 -->
10	<image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image>	10	<image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image>
11	<!-- 右 -->	11	<!-- 右 -->
12	<image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image>	12	<image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image>
13	</view>	13	</view>
14	</uni-popup>	14	</uni-popup>
15	<!-- 点击弹窗部分 -->	15	<!-- 点击弹窗部分 -->
16	<view class="header">	16	<view class="header">
17	<view class="headerLeft" @click=changeTap(1)>	17	<view class="headerLeft" @click=changeTap(1)>
18	<text>如何查看验光单？</text>	18	<text>如何查看验光单？</text>
19	<image src="../../static/dataLook.png" mode="aspectFit"></image>	19	<image src="../../static/dataLook.png" mode="aspectFit"></image>
20	</view>	20	</view>
21	<view class="headerRight" @click=changeTap(0)>	21	<view class="headerRight" @click=changeTap(0)>
22	<text>如何查看眼镜框架？</text>	22	<text>如何查看眼镜框架？</text>
23	<image src="../../static/glassLook.png" mode="aspectFit"></image>	23	<image src="../../static/glassLook.png" mode="aspectFit"></image>
24	</view>	24	</view>
25	</view>	25	</view>
26	<!-- 数据展示部分 -->	26	<!-- 数据展示部分 -->
27	<view class="dataMenu">	27	<view class="dataMenu">
28	<uni-collapse accordion="true">	28	<uni-collapse accordion="true">
29	<view class="item" v-for="(loveItem,index) in loveList" :key="index" >	29	<view class="item" v-for="(loveItem,index) in loveList" :key="index" >
30	<uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>	30	<uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
31	<view class="loveDataInfo" @click="toNewData(2,index)">	31	<view class="loveDataInfo" @click="toNewData(2,index)">
32	<view class="dataInfoItem">	32	<view class="dataInfoItem">
33	<text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>	33	<text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
34	</view>	34	</view>
35	<view class="dataInfoItem">	35	<view class="dataInfoItem">
36	<text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>	36	<text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>
37	</view>	37	</view>
38	<view class="dataInfoItem">	38	<view class="dataInfoItem">
39	<text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>	39	<text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>
40	</view>	40	</view>
41	<view class="dataInfoItem">	41	<view class="dataInfoItem">
42	<text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>	42	<text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
43	</view>	43	</view>
44	<view class="dataInfoItem">	44	<view class="dataInfoItem">
45	<text>镜片宽度：</text><text>{{loveItem.glassWidth!=='0'?loveItem.glassWidth:'暂无数据'}}</text>	45	<text>镜片宽度：</text><text>{{loveItem.glassWidth!=''?loveItem.glassWidth:'暂无数据'}}</text>
46	</view>	46	</view>
47	<view class="dataInfoItem">	47	<view class="dataInfoItem">
48	<text>鼻梁宽度：</text><text>{{loveItem.norseWidth!=='0'?loveItem.norseWidth:'暂无数据'}}</text>	48	<text>鼻梁宽度：</text><text>{{loveItem.norseWidth!=''?loveItem.norseWidth:'暂无数据'}}</text>
49	</view>	49	</view>
50	<view class="dataInfoItem">	50	<view class="dataInfoItem">
51	<text>镜腿长度：</text><text>{{loveItem.legWidth!=='0'?loveItem.legWidth:'暂无数据'}}</text>	51	<text>镜腿长度：</text><text>{{loveItem.legWidth!=''?loveItem.legWidth:'暂无数据'}}</text>
52	</view>	52	</view>
53	</view>	53	</view>
54	</uni-collapse-item>	54	</uni-collapse-item>
55	</view>	55	</view>
56	</uni-collapse>	56	</uni-collapse>
57	</view>	57	</view>
58	<view class="footer">	58	<view class="footer">
59	<button class="btn" type="default" @click="toNewData(1)">新建验光单</button>	59	<button class="btn" type="default" @click="toNewData(1)">新建验光单</button>
60	</view>	60	</view>
61	</view>	61	</view>
62	</template>	62	</template>
63		63
64	<script>	64	<script>
65	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'	65	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
66	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'	66	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
67	import UniPopup from '@/components/UniPopup/uni-popup.vue'	67	import UniPopup from '@/components/UniPopup/uni-popup.vue'
68	import store from '@/store';	68	import store from '@/store';
69	export default {	69	export default {
70	components: {UniCollapse,UniCollapseItem,UniPopup},	70	components: {UniCollapse,UniCollapseItem,UniPopup},
71	data() {	71	data() {
72	return {	72	return {
73	whichTap:0	73	whichTap:0
74	};	74	};
75	},	75	},
76	onShow() {	76	onShow() {
77	//获取关心的人列表	77	//获取关心的人列表
78	store.dispatch('myLoveList/getLoveList', {	78	store.dispatch('myLoveList/getLoveList', {
79	uid: this.$store.state.user.userInfo.uid,	79	uid: this.$store.state.user.userInfo.uid,
80	});	80	});
81	},	81	},
82	onLoad: function(option) {	82	onLoad: function(option) {
83	// //获取关心的人列表	83	// //获取关心的人列表
84	// store.dispatch('myLoveList/getLoveList', {	84	// store.dispatch('myLoveList/getLoveList', {
85	// uid: this.$store.state.user.userInfo.uid,	85	// uid: this.$store.state.user.userInfo.uid,
86	// });	86	// });
87	},	87	},
88	computed:{	88	computed:{
89	loveList() {	89	loveList() {
90	console.log(this.$store.state.myLoveList.loveList)	90	// console.log(this.$store.state.myLoveList.loveList)
91	return this.$store.state.myLoveList.loveList \|\| []	91	return this.$store.state.myLoveList.loveList \|\| []
92	},	92	},
93	},	93	},
94	methods:{	94	methods:{
95	changeTap(item){	95	changeTap(item){
96	this.whichTap = item	96	this.whichTap = item
97	this.$refs.popup.open()	97	this.$refs.popup.open()
98	},	98	},
99	//给时间搞一个nice的格式	99	//给时间搞一个的格式
100	getRightTime(time){	100	getRightTime(time){
101	//如果小于10 则返回'0'+m	101	//如果小于10 则返回'0'+m
102	// function add(m){return m<10?'0'+m:m}	102	// function add(m){return m<10?'0'+m:m}
103	//传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧	103	//传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧
104	// const oldTime = (new Date(time)).getTime()	104	// const oldTime = (new Date(time)).getTime()
105	// const year = new Date(oldTime).getFullYear()	105	// const year = new Date(oldTime).getFullYear()
106	// const month = new Date(oldTime).getMonth()+1	106	// const month = new Date(oldTime).getMonth()+1
107	// const day = new Date(oldTime).getDate()	107	// const day = new Date(oldTime).getDate()
108	// const newTime = add(year)+'-'+add(month)+'-'+add(day)	108	// const newTime = add(year)+'-'+add(month)+'-'+add(day)
109		109
110	// console.log(newTime)	110	// console.log(newTime)
111	// return newTime.replace(/-/g, '/')	111	// return newTime.replace(/-/g, '/')
112	return time	112	return time
113	},	113	},
114	getFirstName(name){	114	getFirstName(name){
115	return name.substring(0,1)	115	return name.substring(0,1)
116	},	116	},
117	toNewData(item,index){	117	toNewData(item,index){
118	// const args={	118	// const args={
119	// name:loveItem.name,	119	// name:loveItem.name,
120	// pd:loveItem.pd,	120	// pd:loveItem.pd,
121	// leftSph:loveItem.leftSph,	121	// leftSph:loveItem.leftSph,
122	// rightSph:loveItem.rightSph,	122	// rightSph:loveItem.rightSph,
123	// leftCyl:loveItem.leftCyl,	123	// leftCyl:loveItem.leftCyl,
124	// rightCyl:loveItem.rightCyl,	124	// rightCyl:loveItem.rightCyl,
125	// leftAxi:loveItem.leftAxi,	125	// leftAxi:loveItem.leftAxi,
126	// rightAxi:loveItem.rightAxi	126	// rightAxi:loveItem.rightAxi
127	// }	127	// }
128	uni.navigateTo({	128	uni.navigateTo({
129	// kinds 参数为 1 表示添加新的验光单， 2 表示更新验光单	129	// kinds 参数为 1 表示添加新的验光单， 2 表示更新验光单
130	// name 表示修改的人名儿，pd瞳距	130	// name 表示修改的人名儿，pd瞳距
131	url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index	131	url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index
132	})	132	})
133	}	133	}
134	}	134	}
135	}	135	}
136	</script>	136	</script>
137		137
138	<style lang="scss">	138	<style lang="scss">
139	.wrap{	139	.wrap{
140	min-height: 100vh;	140	min-height: 100vh;
141	width: 100%;	141	width: 100%;
142	background-color: #F2F2F2;	142	background-color: #F2F2F2;
143	.header{	143	.header{
144	height: 304rpx;	144	height: 304rpx;
145	width: 100%;	145	width: 100%;
146	background-color: #FFFFFF;	146	background-color: #FFFFFF;
147	display: flex;	147	display: flex;
148	justify-content: space-around;	148	justify-content: space-around;
149	align-items: center;	149	align-items: center;
150	view{	150	view{
151	height: 210rpx;	151	height: 210rpx;
152	width: 304rpx;	152	width: 304rpx;
153	background: #FDF7F5;	153	background: #FDF7F5;
154	border-radius: 4px;	154	border-radius: 4px;
155	border-radius: 4px;	155	border-radius: 4px;
156	display: flex;	156	display: flex;
157	flex-direction: column;	157	flex-direction: column;
158	align-items: center;	158	align-items: center;
159	justify-content: center;	159	justify-content: center;
160	text{	160	text{
161	font-size: 12px;	161	font-size: 12px;
162	color: #333333;	162	color: #333333;
163	}	163	}
164	image{	164	image{
165	height: 144rpx;	165	height: 144rpx;
166	width: 144rpx;	166	width: 144rpx;
167	}	167	}
168	}	168	}
169	}	169	}
170	.dataMenu{	170	.dataMenu{
171	margin-top: 20rpx;	171	margin-top: 20rpx;
172	box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);	172	box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
173	width: 100%;	173	width: 100%;
174	background-color: #FFFFFF;	174	background-color: #FFFFFF;
175	margin-bottom: 120rpx;	175	margin-bottom: 120rpx;
176	.item{	176	.item{
177	padding: 0 40rpx;	177	padding: 0 40rpx;
178	.loveDataInfo{	178	.loveDataInfo{
179	padding: 0 44rpx 0 70rpx;	179	padding: 0 44rpx 0 70rpx;
180	display: flex;	180	display: flex;
181	justify-content: space-around;	181	justify-content: space-around;
182	flex-direction: column;	182	flex-direction: column;
183	align-items: flex-start;	183	align-items: flex-start;
184	.dataInfoItem{	184	.dataInfoItem{
185	font-size: 12px;	185	font-size: 12px;
186	color: #333333;	186	color: #333333;
187	margin-bottom: 34rpx;	187	margin-bottom: 34rpx;
188	text{	188	text{
189	font-size: 12px;	189	font-size: 12px;
190	color: #2A2A2A;	190	color: #2A2A2A;
191	margin-right: 20rpx;	191	margin-right: 20rpx;
192	}	192	}
193	}	193	}
194	}	194	}
195	}	195	}
196	}	196	}
197	.footer{	197	.footer{
198	width: 100%;	198	width: 100%;
199	position: fixed;	199	position: fixed;
200	bottom: 0;	200	bottom: 0;
201	left: 0;	201	left: 0;
202	.btn{	202	.btn{
203	width: 100%;	203	width: 100%;
204	height: 112rpx;	204	height: 112rpx;
205	line-height: 112rpx;	205	line-height: 112rpx;
206	background: #FF6B4A;	206	background: #FF6B4A;
207	font-size: 16px;	207	font-size: 16px;
208	color: #FFFFFF;	208	color: #FFFFFF;
209	}	209	}
210	}	210	}
211	}	211	}
212	.popUpWrap{	212	.popUpWrap{
213	height: 850rpx;	213	height: 850rpx;
214	width: 542rpx;	214	width: 542rpx;
215	background-color: #FFFFFF;	215	background-color: #FFFFFF;
216	border-radius: 4px;	216	border-radius: 4px;
217	border: 1px solid #979797;	217	border: 1px solid #979797;
218	.closeBtn{	218	.closeBtn{
219	height: 28rpx;	219	height: 28rpx;
220	width: 28rpx;	220	width: 28rpx;
221	// border: 1px solid red;	221	// border: 1px solid red;
222	position: absolute;	222	position: absolute;
223	top: 20rpx;	223	top: 20rpx;
224	right: 20rpx;	224	right: 20rpx;
225	}	225	}
226	.glassInfo{	226	.glassInfo{
227	height: 474rpx;	227	height: 474rpx;
228	width: 528rpx;	228	width: 528rpx;
229	}	229	}
230	.dataInfo{	230	.dataInfo{
231	height: 850rpx;	231	height: 850rpx;
232	width: 542rpx;	232	width: 542rpx;
233	}	233	}
234	}	234	}
235	.popUpWrap1{	235	.popUpWrap1{
236	height: 474rpx;	236	height: 474rpx;
237	width: 528rpx;	237	width: 528rpx;
238	border-radius: 4px;	238	border-radius: 4px;
239	border: 1px solid #979797;	239	border: 1px solid #979797;
240	}	240	}
241		241
242	</style>	242	</style>
243		243

src/pages/cart/cart.vue

Diff comments View file @e92e93f

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

src/pages/confirmOrder/confirmOrder.vue

Diff comments View file @e92e93f

 <template>
   <view class="wrap">
     <view></view>
     <view
       class="addAddress"
       @tap="toaddAddress"
       v-if="this.showAddress"
     >
       <view class="addIcon">
         <image
           src="../../static/add.png"
           mode="aspectFill"
         ></image>
       </view>
       <view class="addressText">{{addAddress}}</view>
       <image
         src="../../static/right.png"
         mode="aspectFill"
       ></image>
     </view>
     <view
       v-else
       @tap="toaddAddress"
       class="list order-user"
     >
       <view class="order-user-head">
         <view class="name">
           <view
             v-if="addressInfo.default === '1'"
             class="default"
           ><text>默认</text></view>{{addressInfo.name}}
         </view>
         <text class="mobile">{{addressInfo.mobile}}</text>
       </view>
       <view class="order-user-body">
         <image src="../../static/myorder-paying-location.png"></image>
         <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
       </view>
       <image
         class="arrow"
         src="../../static/right.png"
         mode="aspectFill"
       ></image>
     </view>
     <view class="content">
       <view class="orderInfo">
         <view class="title">
           <image
             src="../../static/store.png"
             mode="aspectFill"
             style="width: 40rpx;height: 40rpx;"
           ></image>
           <text>非常戴镜</text>
         </view>
         <view
           class="infoBox"
           v-if="isCart == 'true'"
           v-for="(item, index) in checkedCartLst"
           :key="index"
         >
           <view class="infoTop">
             <image
               :src="item.img_index_url"
               mode="aspectFill"
             ></image>
             <view class="infoRight">
               <text class="goodName">{{item.p_name}}</text>
               <text class="remarks">支持7天无理由退货 顺丰发货</text>
               <view class="priceBox">
                 <view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost">
                     ¥{{item.oldPrice*item.num}}
                   </text></view>
                 <view class="counter">
                   <view
                     class="btn"
                     disabled="this.disabled"
                     type="default"
                     @click="counter(false,index)"
                   >-</view>
                   <text>{{checkedCartLst[index].num}}</text>
                   <view
                     class="btn"
                     type="default"
                     @click="counter(true,index)"
                   >+</view>
                 </view>
               </view>
             </view>
           </view>
           <view class="infoBottom">
             <view class="norm">规格 <text>
                 <!-- 长度超出变省略号未做 -->
                 <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
                 </block>
               </text></view>
             <view class="shippingMethod">使用人 <text>
                 {{item.peopleName}}
               </text></view>
             <view class="shippingMethod">配送方式 <text>快递</text></view>
             <view class="message">买家留言
               <input
                 type="text"
                 :value="note"
                 placeholder="建议提前协商(50字以内)"
               />
             </view>
           </view>
         </view>
         <view
           class="infoBox"
           v-if="isCart !== 'true'"
         >
           <view class="infoTop">
             <image
               :src="buyItem.pic"
               mode="aspectFill"
             ></image>
             <view class="infoRight">
               <text class="goodName">{{goodInfo.p_name}}</text>
               <text class="remarks">支持7天无理由退货 顺丰发货</text>
               <view class="priceBox">
                 <view class="price">¥{{buyItem.real_price * count}}<text class="originCost">
                     ¥{{buyItem.out_price * count}}
                   </text></view>
                 <view class="counter">
                   <view
                     class="btn"
                     disabled="this.disabled"
                     type="default"
                     @click="counter(false)"
                   >-</view>
                   <text>{{count}}</text>
                   <view
                     class="btn"
                     type="default"
                     @click="counter(true)"
                   >+</view>
                 </view>
               </view>
             </view>
           </view>
           <view class="infoBottom">
             <view class="norm">规格 <text>
                 <!-- 长度超出变省略号未做 -->
                 <block
                   v-for="(item, index) in current"
                   :key="index"
                 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
                 </block>
               </text></view>
             <view class="shippingMethod">使用人 <text>
                 {{name}}
               </text></view>
             <view class="shippingMethod">配送方式 <text>快递</text></view>
             <view class="message">买家留言
               <input
                 type="text"
                 :value="note"
                 placeholder="建议提前协商(50字以内)"
               />
             </view>
           </view>
         </view>
       </view>
       <view class="payWay">
         <view class="item">
           <text>支付方式</text>
           <view class="itemRight">
             <view class="rightText">
               <view class="choosePayWay">
                 <image
                   src="../../static/chat_logo.png"
                   mode="aspectFill"
                 ></image>
                 <text>微信支付</text>
               </view>
               <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
             </view>
             <!-- <image
               src="../../static/right.png"
               mode="aspectFill"
             ></image> -->
           </view>
         </view>
         <!-- <view class="item">
           <text>优惠券</text>
           <view class="itemRight">
             <view class="rightText">
               <view class="chooseOffers">
                 <text>-￥70.00</text>
               </view>
               <view class="preferentialWay">最大优惠</view>
             </view>
             <image
               src="../../static/right.png"
               mode="aspectFill"
             ></image>
           </view>
         </view> -->
         <view class="item">
           <text>运费</text>
           <view class="itemRight">
             <view class="freight">免运费</view>
           </view>
         </view>
         <view class="item">
           <text>合计</text>
           <view class="itemRight">
             <view class="total">¥{{totalPrice}}</view>
             <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->
           </view>
         </view>
       </view>
       <!--
       <view class="checkBox">
         <checkbox-group>
           <label>
             <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
           </label>
         </checkbox-group>
       </view> -->
     </view>
     <view class="last_zhanwei"></view>
     <view class="footer">
       <view class="footerLeft">实付金额:
         <text>¥{{totalPrice}}</text>
         <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
       </view>
       <view class="footerRight">
         <view
           class="paybtn"
           @tap="orderBuild"
         >立即支付</view>
       </view>
     </view>
   </view>
 </template>
 <script>
 import store from '@/store'
 import MD5Util from '../../utils/md5'
 export default {
   data() {
     return {
       name: String,
       addAddress: '添加收货地址',
       count: 1,
       pid: 0,
       disabled: false,
       freight: 0.0,
       showAddress: false,
       note: '',
       addressInfo: {
         address: '',
       },
 	  isCart: Boolean,
       // isAnonymous:
 	  checkedCartLst: [],
     }
   },
   onShow(addressId) {
   	// console.log('+-+-*-*-+-+',addressId)
     if (addressId) {
 	  store
 	    .dispatch('address/details', {
 	      add_id: addressId,
 	    })
 	    .then(({ code, data }) => {
 	      if (code === 1) {
 	        // console.log('code', code, data)
 	        this.showAddress = true
 	        this.addressInfo = data
 	      }
 	    })
     }
   },
   onLoad({ pid, addressId, isCart, count, name }) {
 	  if (isCart == 'false') {
       this.pid = pid
-      store.dispatch('read/fetch', {
+    //   store.dispatch('read/fetch', {
-		  pid,
+		  // pid,
-      })
+    //   })
 	  }
     this.count = count
     this.name = name
     this.isCart = isCart
     console.log('++++++++++++' + pid, addressId, isCart)
     this.checkedCartLst = this.$store.state.cart.checkedCartLst
     // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)
     // 若已经选择地址
     if (addressId) {
       store
         .dispatch('address/details', {
           add_id: addressId,
         })
         .then(({ code, data }) => {
           if (code === 1) {
             // console.log('code', code, data)
             this.showAddress = true
             this.addressInfo = data
           }
         })
     } else {
       store.dispatch('address/default').then(({ code, data }) => {
         if (code === 1) {
           // console.log('code', code, data)
           this.showAddress = true
           this.addressInfo = data
         }
       })
     }
   },
   computed: {
 	  totalPrice() {
 		  if (this.isCart == 'true') {
 			  let total = 0
 			  this.$store.state.cart.checkedCartLst.map(item => {
 			  	total += item.nowPrice * item.num
 			  })
         return total
 		  } else {
 			  return this.buyItem.real_price * this.count
 		  }
 	  },
 	  buyItem() {
 		  return this.$store.state.cart.buyItem
 	  },
 	  // checkedCartLst(){
 		 //  console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)
 		 //  return this.$store.state.cart.checkedCartLst
 	  // },
     goodInfo() {
-      console.log('state', this.$store.state.read.goodInfo)
+      // console.log('state', this.$store.state.read.goodInfo)
       return this.$store.state.read.goodInfo
     },
     skuInfo() {
       return this.$store.state.order.param.sk_id_arr
     },
     attrList() {
       return this.$store.state.order.param.attrList
     },
     current() {
       return this.$store.state.order.param.current
     },
   },
   methods: {
     counter(isadd, index) {
       if (isadd) {
 		  if (this.isCart == 'true') {
 			  this.checkedCartLst[index].num++
 		  } else {
           this.count++
 		  }
       } else {
 		  if (this.isCart == 'true') {
 		   this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--
 		  } else {
 		  	this.count <= 1 ? (this.disabled = true) : this.count--
 		  }
       }
     },
     // 跳转添加地址页面
     toaddAddress() {
       uni.navigateTo({
         url: `../address/addressList?edit=${1}`,
         success: res => {},
         fail: error => {
           console.log('跳转到地址列表页面失败====>', error)
         },
         complete: () => {},
       })
     },
     // 下单
     orderBuild() {
       uni.showLoading({
         title: '支付中',
       })
 	  if (this.isCart === 'true') {
 		  const checkedGoods = []
 		  const sk_id_arr = []
 		  this.checkedCartLst.map(item => {
 			  checkedGoods.push(item.cart_id)
 			  sk_id_arr.push(item.sk_id)
 		  })
 		  store.dispatch('order/build', {
           uid: this.$store.state.user.userInfo.uid,
 		    address: JSON.stringify(this.addressInfo),
           checkedGoods: checkedGoods,
 		    sk_id_arr: sk_id_arr,
 		    totalPrice: this.totalPrice,
 		  }).then((res) => {
 		    this.pay(res)
 		  })
 	  }
 	  if (this.isCart === 'false') {
 		  const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
 		  store.dispatch('order/buyNow', {
 		    pid: skId.pid,
 		    sk_id: skId.sk_id,
 		    number: this.count,
 		    mp_id: mpId,
 		    address: JSON.stringify(this.addressInfo),
 		    totalPrice: this.totalPrice,
 		    liuyan: this.note,
 		    dir: 1,
 		  }).then((res) => {
 		    this.pay(res)
 		  })
 	  }
     },
     // 支付
     pay(res) {
       console.log('pay', res)
       const { data, exKeyName: keyName } = res
       const uid = uni.getStorageSync('uid')
       const timeStamp = new Date().getTime().toString()
       const nonceStr = 'asfafasfasfasfasf'
       // 支付参数
       const fieldSet = {
         openid: this.$store.state.user.userInfo.openid,
         uid: this.$store.state.user.userInfo.uid,
         shopid: 0,
         payCate: 2020,
         payMoney: this.totalPrice,
         payWoodId: `fcdj-${uid}-${keyName}`,
         payWoodDesc: '在【非常戴镜】的微信付款凭证',
         nonceStr,
         signType: 'MD5',
         app_uid: 2020,
         timeStamp,
         keyname: keyName,
         billInfo: JSON.stringify(data),
       }
       // 请求后台支付接口
       store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
         if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
           const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
           const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
           // 微信支付接口
           uni.requestPayment({
             appId: data.appid,
             timeStamp,
             nonceStr,
             total_fee: this.totalPrice,
             package: `prepay_id=${data.prepay_id}`,
             signType: 'MD5',
             paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
             success: (res) => {
               // 支付成功
               uni.showModal({
                 content: '支付成功',
                 showCancel: false,
               })
               // 跳转订单详情页->状态 待收货
               uni.reLaunch({
                 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
               })
             },
             fail: (res) => {
               // 支付失败
               uni.showModal({
                 content: '支付失败',
                 showCancel: false,
               })
               // 跳转订单详情页->状态 待付款
               uni.reLaunch({
                 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
               })
             },
             complete: () => {
               uni.hideLoading()
             },
           })
         } else {
           uni.showModal({
             content: '支付失败',
             showCancel: false,
           })
           console.log('支付失败')
           uni.hideLoading()
         }
       })
     },
   },
 }
 </script>
 <style lang="scss">
 .wrap {
   height: 100vh;
   background-color: #f2f2f2;
   font-family: PingFangSC-Regular;
   letter-spacing: -0.23px;
   position: absolute;
 }
 .addAddress {
   background-color: #ffffff;
   box-sizing: border-box;
   height: 124rpx;
   width: 100%;
   display: flex;
   align-items: center;
   padding: 0 40rpx;
   .addIcon {
     background-color: #f2f2f2;
     height: 56rpx;
     width: 60rpx;
     border-radius: 4rpx;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 40rpx;
   }
   image {
     height: 28rpx;
     width: 30rpx;
   }
   .addressText {
     font-size: 28rpx;
     color: #333333;
     margin-right: 364rpx;
   }
 }
 .content {
   background-color: #f2f2f2;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 40rpx;
   box-sizing: border-box;
   .orderInfo {
     width: 670rpx;
     min-height: 488rpx;
     background-color: #ffffff;
     border-radius: 20rpx;
     box-sizing: border-box;
     padding: 0 40rpx 40rpx 40rpx;
     .title {
       display: flex;
       align-items: center;
       font-size: 28rpx;
       color: #333333;
       height: 60rpx;
       line-height: 40rpx;
       padding: 10rpx 10rpx 10rpx 0rpx;
       image {
         margin-right: 20rpx;
       }
     }
     .infoBox {
       margin-top: 42rpx;
       .infoTop {
         display: flex;
         flex-direction: row;
         image {
           height: 188rpx;
           width: 188rpx;
           margin-right: 24rpx;
         }
         .infoRight {
           width: 374rpx;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           justify-content: space-between;
           .goodName {
             font-size: 28rpx;
             color: #333333;
           }
           .remarks {
             font-size: 20rpx;
             color: #999999;
           }
           .priceBox {
             display: flex;
             justify-content: space-between;
             align-items: center;
             width: 100%;
             .price {
               color: #ff6b4a;
               font-size: 28rpx;
+			  text{
+				  margin-left: 10rpx;
+			  }
             }
             .originCost {
               text-decoration: line-through;
               color: #999999;
               font-size: 20rpx;
             }
             .counter {
               display: flex;
               flex-direction: row;
               justify-content: space-between;
               font-size: 28rpx;
               color: #333333;
               width: 122rpx;
               .btn {
                 display: flex;
                 justify-content: center;
                 line-height: 32rpx;
                 height: 32rpx;
                 width: 32rpx;
                 background-color: #f2f2f2;
                 color: #cfcfcf;
               }
             }
           }
         }
       }
       .infoBottom {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         font-size: 24rpx;
         color: #333333;
         text {
           color: #999999;
           margin-left: 20rpx;
         }
         .norm {
           margin-top: 28rpx;
         }
         .shippingMethod {
           margin-top: 12rpx;
         }
         .message {
           display: flex;
           flex-direction: row;
           align-items: center;
           margin-top: 18rpx;
           input {
             margin-left: 20rpx;
             width: 75%;
           }
         }
       }
     }
   }
   .payWay {
     height: 464rpx;
     width: 670rpx;
     background-color: #ffffff;
     color: #333333;
     font-size: 24rpx;
     border-radius: 20rpx;
     box-sizing: border-box;
     padding: 0 52rpx 0rpx 40rpx;
     margin-top: 20rpx;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     .item {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       height: 115rpx;
       .itemRight {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         image {
           height: 24rpx;
           width: 12rpx;
         }
         .rightText {
           margin-right: 20rpx;
           text-align: right;
           .choosePayWay {
             display: flex;
             align-items: center;
             text {
               color: #333333;
             }
             image {
               height: 36rpx;
               width: 40rpx;
               margin-right: 8px;
             }
           }
           .randomSubstraction {
             color: #ff6b4a;
           }
           .preferentialWay {
             color: #999999;
           }
         }
         .freight,
         .total {
           margin-right: 32rpx;
         }
         text {
           color: #ff6b4a;
         }
       }
     }
   }
   // .checkBox {
   //   height: 58rpx;
   //   line-height: 58rpx;
   //   width: 100%;
   //   margin-top: 36rpx;
   //   margin-left: 40rpx;
   //   font-size: 12px;
   //   color: #999999;
   // }
 }
 .footer {
   height: 112rpx;
   width: 100%;
   background-color: #fff;
   font-size: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   bottom: 0;
   z-index: 9999;
   .footerLeft {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50%;
     color: #333333;
     text {
       color: #ff6b4a;
     }
   }
   .footerRight {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     width: 50%;
     margin-right: 26rpx;
     .paybtn {
       display: flex;
       justify-content: center;
       align-items: center;
       background: #ff6b4a;
       border-radius: 20px;
       border-radius: 20px;
       color: #ffffff;
       width: 204rpx;
       height: 80rpx;
     }
   }
 }
 // 地址信息样式
 .order-user {
   width: 670rpx;
   height: 228rpx;
   background: #ffffff;
   border-radius: 14rpx;
   margin: 0 auto;
   margin-top: 20rpx;
   position: relative;
   .order-user-head {
     display: flex;
     height: 108rpx;
     width: 100%;
     align-items: center;
     padding-left: 126rpx;
     box-sizing: border-box;
     .name {
       display: flex;
       justify-content: space-between;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       margin-right: 20rpx;
       .default {
         height: 40rpx;
         width: 80rpx;
         background-color: #4a90e2;
         border-radius: 13px;
         border-radius: 13px;
         text-align: center;
         margin-right: 20rpx;
         text {
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 12px;
           color: #ffffff;
           letter-spacing: -0.23px;
         }
       }
     }
     .mobile {
       font-size: 14px;
       color: #999999;
       letter-spacing: -0.26px;
     }
   }
   .order-user-body {
     display: flex;
     width: 100%;
     image {
       width: 24px;
       height: 28px;
       margin: 12rpx 32rpx 0 40rpx;
     }
     .address {
       font-weight: bold;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
     }
   }
   .arrow {
     width: 12px;
     height: 12px;
     position: absolute;
     right: 40rpx;
     bottom: 104rpx;
   }
 }
 .last_zhanwei {
   background: #f2f2f2;
   height: 60px;
 }
 </style>

src/pages/details/details.vue

Diff comments View file @e92e93f

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

src/pages/myOrder/components/OrderCard.vue

Diff comments View file @e92e93f

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

src/pages/myOrder/myOrder.vue

Diff comments View file @e92e93f

 <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.pay_id"
       >
         <OrderCard
           :order="order"
           :current="current"
+		  v-if="order.order_info !== null"
         ></OrderCard>
       </view>
     </view>
     <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: "10", text: "全部" },
         { current: "0", text: "待付款" },
         { current: "1", text: "待收货" },
         { current: "2", text: "已完成" }
         // {current:"3",text:'已评价'},
         // {current:"4",text:'退款'},
       ],
       // 当前所在item 默认10-->全部
       current: "10"
     };
   },
 onShow() {
 	store.dispatch("myOrder/getList", {
 	  way: ""
 	});
 },
   onLoad: function(option) {
     // 获取订单列表
     // store.dispatch("myOrder/getList", {
     //   way: ""
     // });
     // 从user过来传的status，给current，以显示对应item
     this.current = option.status;
   },
   computed: {
     orderList() {
       console.log('orderList', this.$store.state.myOrder.orderList);
       return this.$store.state.myOrder.orderList;
     }
   },
   methods: {
     // tab点击事件
     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: 20rpx 40rpx 16rpx 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;
       height: 70rpx;
       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;
     margin-top: 132rpx;
   }
   .footer {
     font-size: 14px;
     color: #b8b8b8;
     margin: 40rpx 0;
   }
 }
 </style>

src/pages/myOrderPaying/myOrderPaying.vue

Diff comments View file @e92e93f

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

src/pages/newOpticsData/newOpticsData.vue

Diff comments View file @e92e93f

 <template>
 	<view class="wrap">
 		<view class="body">
 			<template >
 				<view class="goods-form">
 					<view class="p1">
 						<image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
 						填写验光数据
 					</view>
 					<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
 					<view class="picker">
 						<view class="picker-choice">
 							<view class="choice-left">
 								<text class="pd">验光单取名:</text>
 							</view>
 							<input type="text" @change="handleInput" class="input"
 							placeholder="请输入名称" maxlength="20" :value="name" />
 						</view>
 					</view>
 					<view class="picker" >
 						<view class="picker-choice">
 							<view class="choice-left">
 								<text class="p11">{{pickerInfoList[0].nameC}}</text>
 								<text class="p12">{{pickerInfoList[0].nameE}}</text>
 							</view>
 							<text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 							<!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
 							<picker  @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
 								<view class="p14">
 								{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
 								<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 								<!-- <image src="../../static/detail-tabicon.png" ></image> -->
 							</picker>
 							<text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 							<!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
 							<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
 								<view class="p14">
 								{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
 								<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 								<!-- <image src="../../static/detail-tabicon.png" ></image> -->
 							</picker>
 						</view>
 					</view>
 					<view class="picker" >
 						<view class="picker-choice">
 							<view class="choice-left">
 								<text class="p11">{{pickerInfoList[1].nameC}}</text>
 								<text class="p12">{{pickerInfoList[1].nameE}}</text>
 							</view>
 							<text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 							<!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
 							<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
 								<view class="p14">
 									{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
 									<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 								<!-- <image src="../../static/detail-tabicon.png" ></image> -->
 							</picker>
 							<text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 							<!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
 							<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
 								<view class="p14">
 									{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
 									<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 								<!-- <image src="../../static/detail-tabicon.png" ></image> -->
 							</picker>
 						</view>
 					</view>
 					<view class="picker" >
 						<view class="picker-choice">
 							<view class="choice-left">
 								<text class="p11">{{pickerInfoList[2].nameC}}</text>
 								<text class="p12">{{pickerInfoList[2].nameE}}</text>
 							</view>
 							<text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 							<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
 								<view class="p14">
 									{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
 									<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 							</picker>
 							<text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 							<!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
 							<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
 								<view class="p14">
 									{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
 									<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 								<!-- <image src="../../static/detail-tabicon.png" ></image> -->
 							</picker>
 						</view>
 					</view>
 					<view class="picker">
 						<view class="picker-choice">
 							<view class="choice-left">
 								<text class="pd">瞳距:</text>
 							</view>
 							<input type="digit" @change="handleInputPd" class="input"
 							placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
 						</view>
 					</view>
 					<view class="picker" >
 						<view class="picker-choice">
 							<view class="choice-left">
 								<text class="p11">{{pickerInfoList[3].nameC}}</text>
 							</view>
 							<text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
 							<picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
 								<view class="p14" style="width: 30px;">
 									{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
 									<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 							</picker>
 							<text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
 							<picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
 								<view class="p14" style="width: 30px;">
 									{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
 									<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 							</picker>
 							<text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
 							<picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
 								<view class="p14" style="width: 30px;">
 									{{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
 									<image src="../../static/detail-tabicon.png" ></image>
 								</view>
 							</picker>
 						</view>
 					</view>
 					<view class="ipts">
 						<view class="inputItem">
 							<text class="text">镜片宽度</text>
-							<input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth" placeholder="请输入镜片宽度"/>
+							<input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth!='0'?glassInfo.glassWidth:''" placeholder="请输入镜片宽度"/>
 						</view>
 						<view class="inputItem">
 							<text class="text">鼻梁宽度</text>
-							<input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth" placeholder="请输入鼻梁宽度"/>
+							<input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth!='0'?glassInfo.norseWidth:''" placeholder="请输入鼻梁宽度"/>
 						</view>
 						<view class="inputItem">
 							<text class="text">镜腿长度</text>
-							<input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth" placeholder="请输入镜腿长度"/>
+							<input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth!='0'?glassInfo.legWidth:''" placeholder="请输入镜腿长度"/>
 						</view>
 					</view>
 					<view class="confirm">
 						<image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
 						<text>确认以上输入信息来源于我的验光数据!</text>
 					</view>
 				</view>
 				</template>
 			</view>
 		<view class="footer" @click="handleSubmit">
 			<button class="btn" type="default">提 交</button>
 		</view>
 	</view>
 </template>
 <script>
 	import store from '@/store';
 	export default {
 		data() {
 			return {
 				pickerInfoList:[
 				{nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0},
 				{nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1},
 				{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2},
 				{nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0}
 				],
 				confirm: false, // 用户是否确认
 				tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
 				name: '请输入W姓名',
 				oldname:'',// 用于判读用户是否改变名字
 				pickerInfoChioce:{
 					"leftSph": '',
 					"rightSph": '',
 					"leftCyl": '',
 					"rightCyl": '',
 					"leftAxi": '',
 					"rightAxi": '',
 					"time":{
 						"year":0,
 						"month": 0,
 						"day":0 ,
 					}
 				},
 				glassInfo:{
 					norseWidth:0,//鼻宽
 					glassWidth:0,//镜片宽度
 					legWidth:0//镜腿长度
 				},
 				pd: '',// 瞳距
 				oldpd: '',// 用于判断用户是否改变瞳距
 				kinds:Number, // kinds=1，提交为新增验光，2为修改
-				mp_id: Number
+				mp_id: Number,
+				loveItem:Object
 			};
 		},
 		onLoad: function (option) {
 			//option为object类型，会序列化上个页面传递的参数
 			// 初始化SPL、CYL、AXI的值
 			for (let j = 0; j < 3; j++) {
 				for(let i=-12;i<6;i++){
 					this.pickerInfoList[j].nameArray1.push(i)
 					this.pickerInfoList[j].nameArray1.push(i+0.5)
 					this.pickerInfoList[j].nameArray2.push(i)
 					this.pickerInfoList[j].nameArray2.push(i+0.5)
 					if(i>=-6){
 						this.pickerInfoList[j].nameArray1.push(i+0.25)
 						this.pickerInfoList[j].nameArray1.push(i+0.75)
 						this.pickerInfoList[j].nameArray2.push(i+0.25)
 						this.pickerInfoList[j].nameArray2.push(i+0.75)
 					}
 					if(i==5){
 						this.pickerInfoList[j].nameArray1.push(i+1)
 						this.pickerInfoList[j].nameArray2.push(i+1)
 					}
 				}
 			}
 			// 初始化日期值
 			for (let i = 1; i < 32; i++){
 				this.pickerInfoList[3].nameArray3.push(i)
 			}
 			// 初始化年份前后五年
 			let myDate = new Date();
 			let nowYear = myDate.getFullYear();
 			for(let i=0;i<5;i++){
 				this.pickerInfoList[3].nameArray1.push(nowYear-i)
 			}
 			this.kinds=option.kinds
 			if(option.kinds==1){
 				this.name= '';
 				this.pd= '';
 			} else{
 				console.log('args===>',option.index)
 				const loveList=Object.assign({},this.$store.state.myLoveList.loveList)
-				console.log('args===>',loveList[option.index].in_time)
+				// console.log('args===>',loveList[option.index].in_time)
-				console.log('args===>',loveList[option.index].in_time.toString().slice(0,4))
+				// console.log('args===>',loveList[option.index].in_time.toString().slice(0,4))
-				console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0)
+				// console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0)
-				console.log('args===>',loveList[option.index].in_time.toString().slice(8,10))
+				// console.log('args===>',loveList[option.index].in_time.toString().slice(8,10))
 				this.name=loveList[option.index].name
 				this.pd=loveList[option.index].pd
 				this.mp_id=loveList[option.index].mp_id
 				this.oldname=loveList[option.index].name
 				this.oldpd=loveList[option.index].pd
 				// 将kinds =2时的值传到该页面
 				this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph)
 				this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph)
 				this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl)
 				this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl)
 				this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi)
 				this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi)
 				this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4))
 				if(loveList[option.index].in_time.toString().slice(5,6)==0){
 					this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7))
 				} else{
 					this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7))
 				}
 				if(loveList[option.index].in_time.toString().slice(8,9)==0){
 					this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10))
 				} else{
 					this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10))
 				}
+				this.glassInfo.glassWidth = loveList[option.index].glassWidth
+				this.glassInfo.norseWidth = loveList[option.index].norseWidth
+				this.glassInfo.legWidth = loveList[option.index].legWidth
+				this.loveItem = loveList[option.index]
+			}
+		},
+		computed:{
+			//判断当前眼镜信息是否有0
+			glassInfoRight(){
+				const glassInfoArr = Object.values(this.glassInfo)
+				return glassInfoArr.find(item => item == '0') ==undefined
 			}
 		},
 		methods:{
 			glassInfoInput(e,type){
 				switch(type){
 					case 0:
 						this.glassInfo.glassWidth = e.detail.value
 					break;
 					case 1:
 						this.glassInfo.norseWidth = e.detail.value
 					break;
 					case 2:
 						this.glassInfo.legWidth = e.detail.value
 					break;
 					default:
 					break;
 				}
 			},
 			handleInput(e){
 				this.name=e.target.value
 			},
 			handleInputPd(e){
 				// 只能输入正浮点数或正数
 				if(/^\d+(\.\d+)?$/.test(e.target.value)){
 					this.pd=e.target.value
 				} else {
 					uni.showToast({
 						title:"请输入有效数据;示例:89",
 						icon: "none",
 						duration: 2000,
 					})
 					this.pd = ''
 				}
 			},
+			updateMylove(){
+				const loveItem = this.loveItem
+				const glassWidth = this.glassInfo.glassWidth
+				const norseWidth = this.glassInfo.norseWidth
+				const legWidth = this.glassInfo.legWidth
+				// console.log(loveItem.glassWidth)
+				// console.log(glassWidth)
+				if(loveItem.glassWidth !== glassWidth){
+					store.dispatch('myLoveList/updateMylove', {
+						uid: this.$store.state.user.userInfo.uid,
+						openid: this.$store.state.user.userInfo.openid,
+						mp_id: this.mp_id,
+						keyname: 'glassWidth',
+						keyvalue: glassWidth
+					});
+				}
+				if(loveItem.norseWidth !== norseWidth){
+					store.dispatch('myLoveList/updateMylove', {
+						uid: this.$store.state.user.userInfo.uid,
+						openid: this.$store.state.user.userInfo.openid,
+						mp_id: this.mp_id,
+						keyname: 'norseWidth',
+						keyvalue: norseWidth
+					});
+				}
+				if(loveItem.legWidth !== legWidth){
+					store.dispatch('myLoveList/updateMylove', {
+						uid: this.$store.state.user.userInfo.uid,
+						openid: this.$store.state.user.userInfo.openid,
+						mp_id: this.mp_id,
+						keyname: 'legWidth',
+						keyvalue: legWidth
+					});
+				}
+			},
 			// 用户提交
 			handleSubmit(){
 				if(this.name==''){
 					uni.showToast({
 						title:"请输入验光单取名",
 						icon: "none",
 						duration: 2000,
 					})
 				}else{
 					if(this.pd==''){
 							uni.showToast({
 								title:"请输入瞳距",
 								icon: "none",
 								duration: 2000,
 							})
 					}else{
 						if(this.kinds==1){
 							// 添加用户验光单
-							console.log('kinds====>',this.pickerInfoChioce.leftSph)
-							console.log('kinds====>',this.pickerInfoChioce.leftSph==Number)
-							console.log('kinds====>',this.pickerInfoChioce.rightSph==Number)
 							if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''||
 							this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''||
-							this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi==''
+							this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi=='' ||!this.glassInfoRight
 							){
 								uni.showToast({
-									title:"请输入您的验光数据",
+									title:"请完善您的数据~",
 									icon: "none",
 									duration: 2000,
 								})
 							}else{
 								if(this.confirm){
 									store.dispatch('myLoveList/addMylove', {
 										uid: this.$store.state.user.userInfo.uid,
 										openid: this.$store.state.user.userInfo.openid,
 										// mp_name: this.$store.state.user.userInfo.mp_name,
 										leftSph: this.pickerInfoChioce.leftSph,
 										rightSph: this.pickerInfoChioce.rightSph,
 										leftCyl: this.pickerInfoChioce.leftCyl,
 										rightCyl: this.pickerInfoChioce.rightCyl,
 										leftAxi: this.pickerInfoChioce.leftAxi,
 										rightAxi: this.pickerInfoChioce.rightAxi,
 										pd: this.pd,// 瞳距
 										mp_name:this.name,
 										glassWidth:this.glassInfo.glassWidth,
 										norseWidth:this.glassInfo.norseWidth,
 										legWidth:this.glassInfo.legWidth
 										// time: this.pickerInfoChioce.time,
 										// img_url2: "http://localhost:8087/images/shop_1/1/",
 									});
-									// store.dispatch('myLoveList/getLoveList', {
-									// 	uid: this.$store.state.user.userInfo.uid,
-									// });
 									uni.navigateBack({
 										delta:1,
 										animationDuration:2000
 									})
 								} else{
 									uni.showToast({
 										title:"请确认您的验光数据",
 										icon: "none",
 										duration: 3000,
 									})
 								}
 							}
 						}
 						if(this.kinds==2){
-							// console.log('kinds====>',this.kinds)
-							// console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
-							// console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
 							if(this.confirm){
 								const leftList = ["leftSph","leftCyl","leftAxi"];
 								const rightList = ["rightSph", "rightCyl", "rightAxi"];
 								let flag=0;
 								if(this.name!=this.oldname){
 									store.dispatch('myLoveList/updateMylove', {
 										uid: this.$store.state.user.userInfo.uid,
 										openid: this.$store.state.user.userInfo.openid,
 										mp_id: this.mp_id,
 										keyname: 'name',
 										keyvalue: this.name,
 									});
 									flag=1
 								}
 								if(this.pd!=this.oldpd){
 									store.dispatch('myLoveList/updateMylove', {
 										uid: this.$store.state.user.userInfo.uid,
 										openid: this.$store.state.user.userInfo.openid,
 										mp_id: this.mp_id,
 										keyname: 'pd',
 										keyvalue: this.pd,
 									});
 									flag=1
 								}
 								//  先验证是否有改动项，
 								for (let j=0; j<3; j++) {
 									if(this.pickerInfoList[j].nameIndex1!=0||this.pickerInfoList[j].nameIndex2!=0){
 										if(this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1]!=''&&
 										this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]!=''){
 											if(this.pickerInfoList[j].nameIndex1!=0){
 												store.dispatch('myLoveList/updateMylove', {
 													uid: this.$store.state.user.userInfo.uid,
 													openid: this.$store.state.user.userInfo.openid,
 													mp_id: this.mp_id,
 													keyname: leftList[j],
 													keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
 												});
 											}
 											if(this.pickerInfoList[j].nameIndex2!=0){
 												store.dispatch('myLoveList/updateMylove', {
 													uid: this.$store.state.user.userInfo.uid,
 													openid: this.$store.state.user.userInfo.openid,
 													mp_id: this.mp_id,
 													keyname: rightList[j],
 													keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]
 												});
 											}
 											flag=1;
 										} else{
 											flag=0;
 											uni.showToast({
 												title:"请输入您的验光数据",
 												icon: "none",
 												duration: 2000,
 											})
 										}
 									}
 								}
+								this.updateMylove()
+								flag=1
 								if(flag!=0){
-									store.dispatch('myLoveList/getLoveList', {
-										uid: this.$store.state.user.userInfo.uid,
-									});
 									uni.navigateBack({
 										delta:1,
 										animationDuration:2000
 									})
 								}
 							} else{
 								uni.showToast({
 									title:"请确认您的验光数据",
 									icon: "none",
 									duration: 3000,
 								})
 							}
 						}
 					}
 				}
 			},
 			changeConfirm() {
 			    this.confirm = !this.confirm
 			},
 			bindPickerChange01: function(e) {
 			    this.pickerInfoList[0].nameIndex1 = e.target.value
 				this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value]
 			},
 			bindPickerChange02: function(e) {
 			    this.pickerInfoList[0].nameIndex2 = e.target.value
 				this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value]
 			},
 			bindPickerChange11: function(e) {
 			    this.pickerInfoList[1].nameIndex1 = e.target.value
 				this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value]
 			},
 			bindPickerChange12: function(e) {
 			    this.pickerInfoList[1].nameIndex2 = e.target.value
 				this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value]
 			},
 			bindPickerChange21: function(e) {
 			    this.pickerInfoList[2].nameIndex1 = e.target.value
 				this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value]
 			},
 			bindPickerChange22: function(e) {
 			    this.pickerInfoList[2].nameIndex2 = e.target.value
 				 this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value]
 			},
 			bindPickerChange41: function(e) {
 			    this.pickerInfoList[3].nameIndex1 = e.target.value
 				this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value]
 			},
 			bindPickerChange42: function(e) {
 			    this.pickerInfoList[3].nameIndex2 = e.target.value
 				 this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value]
 			},
 			bindPickerChange43: function(e) {
 			    this.pickerInfoList[3].nameIndex3 = e.target.value
 				this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value]
 			},
 		}
 	}
 </script>
 <style lang="scss">
 	.wrap{
 		min-height: 100vh;
 		background-color: #F2F2F2;
 		.body{
 			// font-family: PingFangSC-Regular;
 			font-size: 12px;
 			color: #666666;
 			letter-spacing: 0;
 			.bodyBox{
 				margin-top: 15px;
 				.names{
 					// font-family: PingFangSC-Regular;
 					font-size: 12px;
 					color: #151515;
 					letter-spacing: 0;
 					text-align: justify;
 					line-height: 17px;
 					margin-left: 5px;
 					margin-right: 10px;
 				}
 				text{
 					// font-family: PingFangSC-Regular;
 					font-size: 12px;
 					color: #666666;
 					letter-spacing: 0;
 					text-align: justify;
 				}
 			}
 		}
 		.goods-form {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
 			background-color: #fff;
 		    width: 100%;
 		    padding: 40rpx 0;
 			.p1 {
 		        font-size: 16px;
 		        color: #333333;
 		        letter-spacing: -0.3px;
 		        text-align: justify;
 		        line-height: 24px;
 		        margin: 4px 0;
 		    }
 		    .p2 {
 		        font-size: 12px;
 		        color: #999999;
 		        letter-spacing: -0.23px;
 		        margin-bottom: 32rpx;
 		    }
 		    .image2{
 		        width: 42rpx;
 		        height: 34rpx;
 				margin-right: 12rpx;
 		    }
 		    .confirm {
 		        display: flex;
 		        align-items: center;
 		        font-size: 12px;
 		        color: #666666;
 		        letter-spacing: -0.23px;
 		        width: 684rpx;
 		        .image1{
 		            margin-right:25rpx;
 					width: 42rpx;
 					height: 38rpx;
 		        }
 		    }
 		    .picker{
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 			align-items: center;
 			width: 100%;
 			.picker-choice{
 				display: flex;
 				width: 684rpx;
 				align-items: center;
 		        margin-bottom: 40rpx;
 				.input{
 					border-bottom: 1px solid #CFCFCF;
 					height: 40rpx;
 				}
 				.choice-left{
 					width: 210rpx;
 					.pd{
 						font-size: 14px;
 						color: #333333;
 						letter-spacing: -0.26px;
 						text-align: justify;
 						line-height: 24px;
 						margin-right: 44rpx;
 					}
 					.p11 {
 						font-size: 14px;
 						color: #333333;
 						letter-spacing: -0.26px;
 						text-align: justify;
 						line-height: 24px;
 						// margin-right: 10px;
 					}
 					.p12 {
 						font-size: 10px;
 						color: #3F3F3F;
 						letter-spacing: -0.19px;
 						text-align: justify;
 						line-height: 24px;
 					}
 				}
 				.p13 {
 					font-size: 10px;
 					color: #999999;
 					letter-spacing: -0.19px;
 					margin-right: 10px;
 				}
 		        .p13-date {
 		            font-size: 10px;
 					color: #999999;
 					letter-spacing: -0.19px;
 					margin-right: 5px;
 		        }
 				picker{
 					width: 144rpx;
 					height: 40rpx;
 					display: flex;
 					position: relative;
 					.p14 {
 						font-size: 14px;
 						color: #666666;
 						letter-spacing: -0.26px;
 						text-align: center;
 						width: 124rpx;
 						border-bottom: 1px solid #CFCFCF;
 						height: 38rpx;
 					}
 					image{
 						width: 20rpx;
 						height: 20rpx;
 						position: absolute;
 						right: 20rpx;
 						top: 8rpx;
 					}
 				}
 			}
 		}
 		.ipts{
 			width: 100%;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 			align-items: flex-start;
 			padding: 20rpx 36rpx;
 			box-sizing: border-box;
 			.inputItem{
 				display: flex;
 				flex-direction: row;
 				justify-content: center;
 				align-items: center;
 				margin-bottom: 36rpx;
 				.text{
 					margin-right: 100rpx;
 				}
 				.input{
 					border-bottom: 1px solid #CFCFCF;

src/pages/user/user.vue

Diff comments View file @e92e93f

 <template>
   <view class="wrap">
     <!-- 弹窗 -->
     <uni-popup
       ref="popup"
       type="center"
     >
       <!-- 给一个左边弹窗的样式 -->
       <!-- 关闭弹窗按钮 -->
       <view
         class="closeBtn"
         @tap="this.$refs.popup.close()"
       >x</view>
       <view
         class="popUpWrap"
         v-if="whichTap==0"
       >
         <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text>
         <!-- 左 -->
         <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> -->
         <!-- 右 -->
         <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> -->
       </view>
       <view
         class="popUpWrap"
         v-if="whichTap==1"
       >
         <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text>
       </view>
       <view
         class="popUpWrap"
         v-if="whichTap==2"
       >
         <button @tap="chatOur(1)">客服1</button>
         <button @tap="chatOur(2)">客服2</button>
       </view>
     </uni-popup>
     <!-- 	<scroll-view
 	  enable-flex
 	  @scrolltolower="handleScrolltolower"
 	  scroll-y
 	  style="height: 1000px;"
 	> -->
     <view
       v-if="isAuth"
       class="content"
     >
       <view class="userInfo">
         <view class="info">
           <image
             :src="headerphoto"
             mode="aspectFill"
           ></image>
           <view class="infoText">
             <text class="userName">{{nickName}}</text>
           </view>
         </view>
         <!-- <view class="service">
           <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
         </view> -->
       </view>
       <view
         class="myOpticsData"
         @tap="toOpticsData"
       >
         <view class="left">
           <image
             src="../../static/img/user/dataWrite.png"
             mode="aspectFit"
           ></image>
           <text>验光数据</text>
         </view>
         <image
           src="../../static/right.png"
           mode="aspectFit"
         ></image>
       </view>
       <view class="myOrder">
-        <view class="orderHeader">
+        <view class="orderHeader"  @click="toMyOrder('10')" >
           <text>我的订单</text>
-          <view
+          <view class="btn">
-            class="btn"
-            @click="toMyOrder('10')"
-          >
             全部
             <image
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
         <view class="orderBody">
           <view
             class="item waitPay"
             @click="toMyOrder('0')"
           >
             <image
               src="../../static/img/user/waitDeliver.png"
               mode="aspectFit"
             ></image>
             <text>待付款</text>
           </view>
           <view
             class="item waitDeliver"
             @click="toMyOrder('1')"
           >
             <image
               src="../../static/img/user/waitPay.png"
               mode="aspectFit"
             ></image>
             <text>待收货</text>
           </view>
           <view
             class="item waitReceive"
             @click="toMyOrder('2')"
           >
             <image
               src="../../static/img/user/waitReceive.png"
               mode="aspectFit"
             ></image>
             <text>已完成</text>
           </view>
           <!-- <view class="item service" @click="toMyOrder('3')">
             <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
             <text>已评价</text>
           </view> -->
         </view>
       </view>
       <view class="someItem">
         <!-- <view class="item">
           <view class="left">
             <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
             <text>推广记录与收益</text>
           </view>
           <image src="../../static/right.png" mode="aspectFit"></image>
         </view> -->
         <view
           @tap="toAddress"
           class="item"
         >
           <image
             src="../../static/address-icon.png"
             mode="aspectFit"
           ></image>
           <view class="left">
             <text>地址管理</text>
             <image
               class="image2"
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
         <view
           @tap="introduce"
           class="item"
         >
           <image
             src="../../static/img/user/introduce.png"
             mode="aspectFit"
           ></image>
           <view class="left">
             <text>系统介绍</text>
             <image
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
         <view
           @tap="joinUs"
           class="item"
         >
           <image
             src="../../static/img/user/joinUs.png"
             mode="aspectFit"
           ></image>
           <view class="left">
             <text>加入我们</text>
             <image
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </view>
         </view>
         <view class="item">
           <image
             src="../../static/img/user/service.png"
             mode="aspectFit"
           ></image>
           <view class="left lastLeft">
             <text>联系客服</text>
             <image
               src="../../static/right.png"
               mode="aspectFit"
             ></image>
           </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">
           <!--          <scroll-view
             enable-flex
             @scrolltolower="handleScrolltolower"
             scroll-y
             class="product-list"
           > -->
           <view class="product-list">
             <view
               class="product"
               v-for="(item, index) in userRecommandList"
               :key="index"
             >
               <Card
                 :goods="item"
                 :scrollTop="scrollTop"
                 :viewHeight="viewHeight"
               ></Card>
             </view>
           </view>
           <!-- </scroll-view> -->
           <view class="loading-text">{{loadingText}}</view>
         </view>
       </view>
     </view>
     <view
       v-else
       class="auth"
     >
       <view class="icon"></view>
       <view class="divider"></view>
       <view class="title">申请获取以下权限</view>
       <view class="text">获得您的公开信息(昵称、头像等)</view>
       <button
         type="primary"
         open-type="getUserInfo"
         @getuserinfo="onGotUserInfo"
       >授权登陆</button>
     </view>
     <!-- </scroll-view> -->
   </view>
 </template>
 <script>
 import Card from '@/components/CommodityCard/CommodityCard.vue'
 import store from '@/store'
 import UniPopup from '@/components/UniPopup/uni-popup.vue'
 export default {
   components: {
     Card,
     UniPopup,
   },
   data() {
     return {
       isAuth: true, // 是否显示授权页面,
       pagesnum: 1, // 分页请求初始值
       whichTap: 0, // 弹窗渲染选择条件
 	  loadingText: '到底了',
 	  scrollTop: 0,
 	  viewHeight: uni.getSystemInfoSync().windowHeight,
     }
   },
   onPageScroll({ scrollTop }) {
   	  // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
   	  this.scrollTop = scrollTop
   },
   onLoad() {
     const that = this
     // 判断是否授权
     uni.getSetting({
       success(res) {
         console.log('authSetting', res.authSetting)
         if (res.authSetting['scope.userInfo'] === true) {
           that.isAuth = true
         } else {
           that.isAuth = false
         }
       },
     })
     store.dispatch('userRecommand/getRecommandList', {
       uid: that.$store.state.user.userInfo.uid,
       openid: that.$store.state.user.userInfo.openid,
       page: that.pagesnum,
     })
   },
   onReachBottom() {
     // console.log('usr-my',this.$store.state.user.userInfo)
     this.pagesnum++
     store.dispatch('userRecommand/getRecommandList', {
 	  uid: this.$store.state.user.userInfo.uid,
 	  openid: this.$store.state.user.userInfo.openid,
 	  page: this.pagesnum,
     })
   },
   computed: {
     nickName() {
       return this.$store.state.user.userInfo.nickName
     },
     headerphoto() {
       return this.$store.state.user.userInfo.headerphoto
     },
     userRecommandList() {
 	  console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList)
       return this.$store.state.userRecommand.recommandList
     },
   },
   methods: {
     // 弹窗
     changeTap(item) {
       this.whichTap = item
       this.$refs.popup.open()
     },
     chatOur(item) {
       if (item === 1) {
         uni.makePhoneCall({
           phoneNumber: 13376189297, // 客服1 电话
         })
       } else {
         uni.makePhoneCall({
           phoneNumber: 18014995101, // 客服2 电话
         })
       }
     },
     // 授权
     onGotUserInfo(e) {
       if (e.detail.errMsg === 'getUserInfo:ok') {
         const { fromInfo } = this.$store.state.user
         // 用户授权成功
         store.dispatch('user/getUserInfo', fromInfo)
         this.isAuth = true
       }
     },
     toAddress() {
       uni.navigateTo({
         url: '../address/addressList',
         success: res => {},
         fail: () => {},
         complete: () => {},
       })
     },
     introduce() {
       uni.showModal({
         content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
         showCancel: false,
       })
     },
     joinUs() {
       uni.showModal({
         content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
         showCancel: false,
       })
     },
     toMyOrder(status) {
       uni.navigateTo({
         url: `../myOrder/myOrder?status=${status}`,
         success: res => {},
         fail: () => {},
         complete: () => {},
       })
     },
     toOpticsData() {
       uni.navigateTo({
         url: '../addOpticsData/addOpticsData',
       })
     },
   },
 }
 </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, #f79067 0%, #ff5f3b 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 {
   //   margin-top: 20rpx;
   //   image {
   //     height: 36rpx;
   //     width: 36rpx;
   //   }
   // }
 }
 .myOpticsData {
   width: 670rpx;
   height: 120rpx;
   background-color: #ffffff;
   border-radius: 6px;
   box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
   position: relative;
   bottom: 44rpx;
   padding: 40rpx;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
   .left {
     font-size: 14px;
     color: #333333;
     display: flex;
     align-items: center;
     image {
       margin-right: 32rpx;
       width: 40rpx;
       height: 44rpx;
     }
   }
   image {
     height: 16px;
     width: 8px;
   }
 }
 .myOrder {
   width: 100%;
   height: 296rpx;
   // margin-top: 116rpx;
   margin-bottom: 20rpx;
   padding: 0 40rpx;
   box-sizing: border-box;
   background: #ffffff;
   box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
   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 #f5f5f5;
     font-weight: bold;
     font-size: 18px;
     color: #333333;
     .btn {
       font-size: 12px;
       color: #999999;
       display: flex;
       align-items: center;
       image {
         margin-left: 20rpx;
         height: 32rpx;
         width: 16rpx;
       }
     }
   }
   .orderBody {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     .item {
       display: flex;
       flex-direction: column;
       align-items: center;
       image {
         width: 62rpx;
         height: 46rpx;
       }
       text {
         margin-top: 24rpx;
         font-size: 12px;
         color: #333333;
       }
     }
   }
 }
 .someItem {
   width: 100%;
   height: 336rpx;
   background: #ffffff;
   box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
   border-radius: 6px;
   border-radius: 6px;
   margin-bottom: 18rpx;
   box-sizing: border-box;
   padding: 21rpx 48rpx 21rpx 42rpx;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   .item {
     display: grid;
     grid-template-columns: 10% 90%;
     align-items: center;
     height: 72rpx;
     width: 100%;
     .left {
       font-size: 14px;
       color: #333333;
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 72rpx;
       border-bottom: 1px solid #f2f2f2;
       image {
         margin-right: 0;
         height: 16px;
         width: 8px;
       }
     }
     image {
       margin-right: 32rpx;
       width: 40rpx;
       height: 44rpx;
     }
     .lastLeft {
       border-bottom: none;
     }
   }
 }
 .recommend {
   background: #ffffff;
   box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
   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;
       }
     }
   }
 }
 .auth {
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   .icon {
     width: 140rpx;
     height: 140rpx;
     border-radius: 50%;
     margin-top: 100rpx;
     background-color: grey;
   }
   .divider {
     height: 1rpx;
     width: 600rpx;
     margin-top: 80rpx;
     background-color: #e6e3e3;
   }
   .title {
     width: 600rpx;
     margin-top: 50rpx;
     text-align: left;
   }
   .text {
     width: 600rpx;
     margin-top: 30rpx;
     text-align: left;
     color: #e6e3e3;
   }
   button {
     width: 450rpx;
     height: 80rpx;
     line-height: 80rpx;
     margin-top: 80rpx;
     border-radius: 30rpx;
   }
 }
 .closeBtn {
   height: 28rpx;
   width: 28rpx;
   // border: 1px solid red;
   position: absolute;
   top: 20rpx;
   right: 10rpx;
 }
 </style>

src/store/modules/cancelOrder.js

Diff comments View file @e92e93f

 import urlAlias from '../url';
 import request from '../request';
 const {
   cancelOrder
 } = urlAlias;
-const state = {
-  orderList: [],
-};
-const mutations = {
-  INIT: (state, data) => {
-    state.orderList = data;
-  },
-};
 const actions = {
   cancel({ commit }, param) {
-      request({
+    return new Promise((resolve)=>
-        url: cancelOrder,
+		request({
-        data: param,
+		    url: cancelOrder,
-        success: (res) => {
+		    data: param,
-          console.log(res.data);
+		    success: (res) => {
-          // commit("INIT", res.data.data);
+		      // console.log(res.data);
-        },
+			  resolve(res.data)
-    })
+		    },
+	})  )
   }
 }
 export default {
   namespaced: true,
-  state,
-  mutations,
   actions,

src/store/modules/orderRead.js

Diff comments View file @e92e93f

 import urlAlias from '../url'
 import request from '../request'
 const {
   orderRead
 } = urlAlias
 const state = {
   orderInfo: {}
 }
 const mutations = {
   INIT: (state, orderInfo) => {
     state.orderInfo = orderInfo
   }
 }
 const actions = {
   getOrderInfo({ commit }, param) {
     return new Promise ((resolve) =>  request({
       url: orderRead,
       data: param,
       success: (res) => {
+		  console.log(res)
         commit("INIT", res.data.data)
 		resolve(res.data.data)
       }
     }))
   }
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions
 }