刘文博 / gulu-vue

Download as
Browse Code »

Commit e92e93f736dc5fa6b70e21912657ba890c6955ef

Authored by mullins
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">左&nbsp;&nbsp;&nbsp;(OD)</text> 74 <text class="p13">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(OS)</text> 83 <text class="p13">右&nbsp;&nbsp;&nbsp;(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">左&nbsp;&nbsp;&nbsp;(OD)</text> 100 <text class="p13">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(OS)</text> 109 <text class="p13">右&nbsp;&nbsp;&nbsp;(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">左&nbsp;&nbsp;&nbsp;(OD)</text> 126 <text class="p13">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(OS)</text> 133 <text class="p13">右&nbsp;&nbsp;&nbsp;(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">年&nbsp;&nbsp;&nbsp;(Y)</text> 158 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(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">月&nbsp;&nbsp;&nbsp;(M)</text> 165 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(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">日&nbsp;&nbsp;&nbsp;(D)</text> 172 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(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;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 220 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
221 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 221 <text>右&nbsp;{{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
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view></view> 3 <view></view>
4 <view 4 <view
5 class="addAddress" 5 class="addAddress"
6 @tap="toaddAddress" 6 @tap="toaddAddress"
7 v-if="this.showAddress" 7 v-if="this.showAddress"
8 > 8 >
9 <view class="addIcon"> 9 <view class="addIcon">
10 <image 10 <image
11 src="../../static/add.png" 11 src="../../static/add.png"
12 mode="aspectFill" 12 mode="aspectFill"
13 ></image> 13 ></image>
14 </view> 14 </view>
15 <view class="addressText">{{addAddress}}</view> 15 <view class="addressText">{{addAddress}}</view>
16 <image 16 <image
17 src="../../static/right.png" 17 src="../../static/right.png"
18 mode="aspectFill" 18 mode="aspectFill"
19 ></image> 19 ></image>
20 </view> 20 </view>
21 <view 21 <view
22 v-else 22 v-else
23 @tap="toaddAddress" 23 @tap="toaddAddress"
24 class="list order-user" 24 class="list order-user"
25 > 25 >
26 <view class="order-user-head"> 26 <view class="order-user-head">
27 <view class="name"> 27 <view class="name">
28 <view 28 <view
29 v-if="addressInfo.default === '1'" 29 v-if="addressInfo.default === '1'"
30 class="default" 30 class="default"
31 ><text>默认</text></view>{{addressInfo.name}} 31 ><text>默认</text></view>{{addressInfo.name}}
32 </view> 32 </view>
33 <text class="mobile">{{addressInfo.mobile}}</text> 33 <text class="mobile">{{addressInfo.mobile}}</text>
34 </view> 34 </view>
35 <view class="order-user-body"> 35 <view class="order-user-body">
36 <image src="../../static/myorder-paying-location.png"></image> 36 <image src="../../static/myorder-paying-location.png"></image>
37 <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text> 37 <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
38 </view> 38 </view>
39 <image 39 <image
40 class="arrow" 40 class="arrow"
41 src="../../static/right.png" 41 src="../../static/right.png"
42 mode="aspectFill" 42 mode="aspectFill"
43 ></image> 43 ></image>
44 </view> 44 </view>
45 <view class="content"> 45 <view class="content">
46 <view class="orderInfo"> 46 <view class="orderInfo">
47 <view class="title"> 47 <view class="title">
48 <image 48 <image
49 src="../../static/store.png" 49 src="../../static/store.png"
50 mode="aspectFill" 50 mode="aspectFill"
51 style="width: 40rpx;height: 40rpx;" 51 style="width: 40rpx;height: 40rpx;"
52 ></image> 52 ></image>
53 <text>非常戴镜</text> 53 <text>非常戴镜</text>
54 </view> 54 </view>
55 55
56 <view 56 <view
57 class="infoBox" 57 class="infoBox"
58 v-if="isCart == 'true'" 58 v-if="isCart == 'true'"
59 v-for="(item, index) in checkedCartLst" 59 v-for="(item, index) in checkedCartLst"
60 :key="index" 60 :key="index"
61 > 61 >
62 <view class="infoTop"> 62 <view class="infoTop">
63 <image 63 <image
64 :src="item.img_index_url" 64 :src="item.img_index_url"
65 mode="aspectFill" 65 mode="aspectFill"
66 ></image> 66 ></image>
67 <view class="infoRight"> 67 <view class="infoRight">
68 <text class="goodName">{{item.p_name}}</text> 68 <text class="goodName">{{item.p_name}}</text>
69 <text class="remarks">支持7天无理由退货 顺丰发货</text> 69 <text class="remarks">支持7天无理由退货 顺丰发货</text>
70 <view class="priceBox"> 70 <view class="priceBox">
71 <view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost"> 71 <view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost">
72 ¥{{item.oldPrice*item.num}} 72 ¥{{item.oldPrice*item.num}}
73 </text></view> 73 </text></view>
74 <view class="counter"> 74 <view class="counter">
75 <view 75 <view
76 class="btn" 76 class="btn"
77 disabled="this.disabled" 77 disabled="this.disabled"
78 type="default" 78 type="default"
79 @click="counter(false,index)" 79 @click="counter(false,index)"
80 >-</view> 80 >-</view>
81 <text>{{checkedCartLst[index].num}}</text> 81 <text>{{checkedCartLst[index].num}}</text>
82 <view 82 <view
83 class="btn" 83 class="btn"
84 type="default" 84 type="default"
85 @click="counter(true,index)" 85 @click="counter(true,index)"
86 >+</view> 86 >+</view>
87 </view> 87 </view>
88 </view> 88 </view>
89 </view> 89 </view>
90 </view> 90 </view>
91 <view class="infoBottom"> 91 <view class="infoBottom">
92 <view class="norm">规格 <text> 92 <view class="norm">规格 <text>
93 <!-- 长度超出变省略号未做 --> 93 <!-- 长度超出变省略号未做 -->
94 <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block> 94 <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
95 </block> 95 </block>
96 </text></view> 96 </text></view>
97 <view class="shippingMethod">使用人 <text> 97 <view class="shippingMethod">使用人 <text>
98 {{item.peopleName}} 98 {{item.peopleName}}
99 </text></view> 99 </text></view>
100 <view class="shippingMethod">配送方式 <text>快递</text></view> 100 <view class="shippingMethod">配送方式 <text>快递</text></view>
101 <view class="message">买家留言 101 <view class="message">买家留言
102 <input 102 <input
103 type="text" 103 type="text"
104 :value="note" 104 :value="note"
105 placeholder="建议提前协商(50字以内)" 105 placeholder="建议提前协商(50字以内)"
106 /> 106 />
107 </view> 107 </view>
108 </view> 108 </view>
109 </view> 109 </view>
110 110
111 <view 111 <view
112 class="infoBox" 112 class="infoBox"
113 v-if="isCart !== 'true'" 113 v-if="isCart !== 'true'"
114 > 114 >
115 <view class="infoTop"> 115 <view class="infoTop">
116 <image 116 <image
117 :src="buyItem.pic" 117 :src="buyItem.pic"
118 mode="aspectFill" 118 mode="aspectFill"
119 ></image> 119 ></image>
120 <view class="infoRight"> 120 <view class="infoRight">
121 <text class="goodName">{{goodInfo.p_name}}</text> 121 <text class="goodName">{{goodInfo.p_name}}</text>
122 <text class="remarks">支持7天无理由退货 顺丰发货</text> 122 <text class="remarks">支持7天无理由退货 顺丰发货</text>
123 <view class="priceBox"> 123 <view class="priceBox">
124 <view class="price">¥{{buyItem.real_price * count}}<text class="originCost"> 124 <view class="price">¥{{buyItem.real_price * count}}<text class="originCost">
125 ¥{{buyItem.out_price * count}} 125 ¥{{buyItem.out_price * count}}
126 </text></view> 126 </text></view>
127 <view class="counter"> 127 <view class="counter">
128 <view 128 <view
129 class="btn" 129 class="btn"
130 disabled="this.disabled" 130 disabled="this.disabled"
131 type="default" 131 type="default"
132 @click="counter(false)" 132 @click="counter(false)"
133 >-</view> 133 >-</view>
134 <text>{{count}}</text> 134 <text>{{count}}</text>
135 <view 135 <view
136 class="btn" 136 class="btn"
137 type="default" 137 type="default"
138 @click="counter(true)" 138 @click="counter(true)"
139 >+</view> 139 >+</view>
140 </view> 140 </view>
141 </view> 141 </view>
142 </view> 142 </view>
143 </view> 143 </view>
144 <view class="infoBottom"> 144 <view class="infoBottom">
145 <view class="norm">规格 <text> 145 <view class="norm">规格 <text>
146 <!-- 长度超出变省略号未做 --> 146 <!-- 长度超出变省略号未做 -->
147 <block 147 <block
148 v-for="(item, index) in current" 148 v-for="(item, index) in current"
149 :key="index" 149 :key="index"
150 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> 150 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
151 </block> 151 </block>
152 </text></view> 152 </text></view>
153 <view class="shippingMethod">使用人 <text> 153 <view class="shippingMethod">使用人 <text>
154 {{name}} 154 {{name}}
155 </text></view> 155 </text></view>
156 <view class="shippingMethod">配送方式 <text>快递</text></view> 156 <view class="shippingMethod">配送方式 <text>快递</text></view>
157 <view class="message">买家留言 157 <view class="message">买家留言
158 <input 158 <input
159 type="text" 159 type="text"
160 :value="note" 160 :value="note"
161 placeholder="建议提前协商(50字以内)" 161 placeholder="建议提前协商(50字以内)"
162 /> 162 />
163 </view> 163 </view>
164 </view> 164 </view>
165 </view> 165 </view>
166 </view> 166 </view>
167 <view class="payWay"> 167 <view class="payWay">
168 <view class="item"> 168 <view class="item">
169 <text>支付方式</text> 169 <text>支付方式</text>
170 <view class="itemRight"> 170 <view class="itemRight">
171 <view class="rightText"> 171 <view class="rightText">
172 <view class="choosePayWay"> 172 <view class="choosePayWay">
173 <image 173 <image
174 src="../../static/chat_logo.png" 174 src="../../static/chat_logo.png"
175 mode="aspectFill" 175 mode="aspectFill"
176 ></image> 176 ></image>
177 <text>微信支付</text> 177 <text>微信支付</text>
178 </view> 178 </view>
179 <!-- <view class="randomSubstraction">最高随机立减￥99</view> --> 179 <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
180 </view> 180 </view>
181 <!-- <image 181 <!-- <image
182 src="../../static/right.png" 182 src="../../static/right.png"
183 mode="aspectFill" 183 mode="aspectFill"
184 ></image> --> 184 ></image> -->
185 </view> 185 </view>
186 </view> 186 </view>
187 <!-- <view class="item"> 187 <!-- <view class="item">
188 <text>优惠券</text> 188 <text>优惠券</text>
189 <view class="itemRight"> 189 <view class="itemRight">
190 <view class="rightText"> 190 <view class="rightText">
191 <view class="chooseOffers"> 191 <view class="chooseOffers">
192 <text>-￥70.00</text> 192 <text>-￥70.00</text>
193 </view> 193 </view>
194 <view class="preferentialWay">最大优惠</view> 194 <view class="preferentialWay">最大优惠</view>
195 </view> 195 </view>
196 <image 196 <image
197 src="../../static/right.png" 197 src="../../static/right.png"
198 mode="aspectFill" 198 mode="aspectFill"
199 ></image> 199 ></image>
200 </view> 200 </view>
201 </view> --> 201 </view> -->
202 <view class="item"> 202 <view class="item">
203 <text>运费</text> 203 <text>运费</text>
204 <view class="itemRight"> 204 <view class="itemRight">
205 <view class="freight">免运费</view> 205 <view class="freight">免运费</view>
206 </view> 206 </view>
207 </view> 207 </view>
208 <view class="item"> 208 <view class="item">
209 <text>合计</text> 209 <text>合计</text>
210 <view class="itemRight"> 210 <view class="itemRight">
211 <view class="total">¥{{totalPrice}}</view> 211 <view class="total">¥{{totalPrice}}</view>
212 <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> --> 212 <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->
213 </view> 213 </view>
214 </view> 214 </view>
215 </view> 215 </view>
216 <!-- 216 <!--
217 <view class="checkBox"> 217 <view class="checkBox">
218 <checkbox-group> 218 <checkbox-group>
219 <label> 219 <label>
220 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 220 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
221 </label> 221 </label>
222 </checkbox-group> 222 </checkbox-group>
223 </view> --> 223 </view> -->
224 </view> 224 </view>
225 <view class="last_zhanwei"></view> 225 <view class="last_zhanwei"></view>
226 <view class="footer"> 226 <view class="footer">
227 <view class="footerLeft">实付金额: 227 <view class="footerLeft">实付金额:
228 <text>¥{{totalPrice}}</text> 228 <text>¥{{totalPrice}}</text>
229 <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> --> 229 <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
230 </view> 230 </view>
231 <view class="footerRight"> 231 <view class="footerRight">
232 <view 232 <view
233 class="paybtn" 233 class="paybtn"
234 @tap="orderBuild" 234 @tap="orderBuild"
235 >立即支付</view> 235 >立即支付</view>
236 </view> 236 </view>
237 </view> 237 </view>
238 </view> 238 </view>
239 </template> 239 </template>
240 240
241 <script> 241 <script>
242 import store from '@/store' 242 import store from '@/store'
243 import MD5Util from '../../utils/md5' 243 import MD5Util from '../../utils/md5'
244 244
245 export default { 245 export default {
246 data() { 246 data() {
247 return { 247 return {
248 name: String, 248 name: String,
249 addAddress: '添加收货地址', 249 addAddress: '添加收货地址',
250 count: 1, 250 count: 1,
251 pid: 0, 251 pid: 0,
252 disabled: false, 252 disabled: false,
253 freight: 0.0, 253 freight: 0.0,
254 showAddress: false, 254 showAddress: false,
255 note: '', 255 note: '',
256 addressInfo: { 256 addressInfo: {
257 address: '', 257 address: '',
258 }, 258 },
259 isCart: Boolean, 259 isCart: Boolean,
260 // isAnonymous: 260 // isAnonymous:
261 checkedCartLst: [], 261 checkedCartLst: [],
262 } 262 }
263 }, 263 },
264 onShow(addressId) { 264 onShow(addressId) {
265 // console.log('+-+-*-*-+-+',addressId) 265 // console.log('+-+-*-*-+-+',addressId)
266 if (addressId) { 266 if (addressId) {
267 store 267 store
268 .dispatch('address/details', { 268 .dispatch('address/details', {
269 add_id: addressId, 269 add_id: addressId,
270 }) 270 })
271 .then(({ code, data }) => { 271 .then(({ code, data }) => {
272 if (code === 1) { 272 if (code === 1) {
273 // console.log('code', code, data) 273 // console.log('code', code, data)
274 this.showAddress = true 274 this.showAddress = true
275 this.addressInfo = data 275 this.addressInfo = data
276 } 276 }
277 }) 277 })
278 } 278 }
279 }, 279 },
280 onLoad({ pid, addressId, isCart, count, name }) { 280 onLoad({ pid, addressId, isCart, count, name }) {
281 if (isCart == 'false') { 281 if (isCart == 'false') {
282 this.pid = pid 282 this.pid = pid
283 store.dispatch('read/fetch', { 283 // store.dispatch('read/fetch', {
284 pid, 284 // pid,
285 }) 285 // })
286 } 286 }
287 this.count = count 287 this.count = count
288 this.name = name 288 this.name = name
289 this.isCart = isCart 289 this.isCart = isCart
290 290
291 console.log('++++++++++++' + pid, addressId, isCart) 291 console.log('++++++++++++' + pid, addressId, isCart)
292 this.checkedCartLst = this.$store.state.cart.checkedCartLst 292 this.checkedCartLst = this.$store.state.cart.checkedCartLst
293 // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst) 293 // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)
294 // 若已经选择地址 294 // 若已经选择地址
295 if (addressId) { 295 if (addressId) {
296 store 296 store
297 .dispatch('address/details', { 297 .dispatch('address/details', {
298 add_id: addressId, 298 add_id: addressId,
299 }) 299 })
300 .then(({ code, data }) => { 300 .then(({ code, data }) => {
301 if (code === 1) { 301 if (code === 1) {
302 // console.log('code', code, data) 302 // console.log('code', code, data)
303 this.showAddress = true 303 this.showAddress = true
304 this.addressInfo = data 304 this.addressInfo = data
305 } 305 }
306 }) 306 })
307 } else { 307 } else {
308 store.dispatch('address/default').then(({ code, data }) => { 308 store.dispatch('address/default').then(({ code, data }) => {
309 if (code === 1) { 309 if (code === 1) {
310 // console.log('code', code, data) 310 // console.log('code', code, data)
311 this.showAddress = true 311 this.showAddress = true
312 this.addressInfo = data 312 this.addressInfo = data
313 } 313 }
314 }) 314 })
315 } 315 }
316 }, 316 },
317 computed: { 317 computed: {
318 totalPrice() { 318 totalPrice() {
319 if (this.isCart == 'true') { 319 if (this.isCart == 'true') {
320 let total = 0 320 let total = 0
321 this.$store.state.cart.checkedCartLst.map(item => { 321 this.$store.state.cart.checkedCartLst.map(item => {
322 total += item.nowPrice * item.num 322 total += item.nowPrice * item.num
323 }) 323 })
324 return total 324 return total
325 } else { 325 } else {
326 return this.buyItem.real_price * this.count 326 return this.buyItem.real_price * this.count
327 } 327 }
328 }, 328 },
329 buyItem() { 329 buyItem() {
330 return this.$store.state.cart.buyItem 330 return this.$store.state.cart.buyItem
331 }, 331 },
332 // checkedCartLst(){ 332 // checkedCartLst(){
333 // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst) 333 // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)
334 // return this.$store.state.cart.checkedCartLst 334 // return this.$store.state.cart.checkedCartLst
335 // }, 335 // },
336 goodInfo() { 336 goodInfo() {
337 console.log('state', this.$store.state.read.goodInfo) 337 // console.log('state', this.$store.state.read.goodInfo)
338 return this.$store.state.read.goodInfo 338 return this.$store.state.read.goodInfo
339 }, 339 },
340 skuInfo() { 340 skuInfo() {
341 return this.$store.state.order.param.sk_id_arr 341 return this.$store.state.order.param.sk_id_arr
342 }, 342 },
343 attrList() { 343 attrList() {
344 return this.$store.state.order.param.attrList 344 return this.$store.state.order.param.attrList
345 }, 345 },
346 current() { 346 current() {
347 return this.$store.state.order.param.current 347 return this.$store.state.order.param.current
348 }, 348 },
349 }, 349 },
350 methods: { 350 methods: {
351 counter(isadd, index) { 351 counter(isadd, index) {
352 if (isadd) { 352 if (isadd) {
353 if (this.isCart == 'true') { 353 if (this.isCart == 'true') {
354 this.checkedCartLst[index].num++ 354 this.checkedCartLst[index].num++
355 } else { 355 } else {
356 this.count++ 356 this.count++
357 } 357 }
358 } else { 358 } else {
359 if (this.isCart == 'true') { 359 if (this.isCart == 'true') {
360 this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num-- 360 this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--
361 } else { 361 } else {
362 this.count <= 1 ? (this.disabled = true) : this.count-- 362 this.count <= 1 ? (this.disabled = true) : this.count--
363 } 363 }
364 } 364 }
365 }, 365 },
366 // 跳转添加地址页面 366 // 跳转添加地址页面
367 toaddAddress() { 367 toaddAddress() {
368 uni.navigateTo({ 368 uni.navigateTo({
369 url: `../address/addressList?edit=${1}`, 369 url: `../address/addressList?edit=${1}`,
370 success: res => {}, 370 success: res => {},
371 fail: error => { 371 fail: error => {
372 console.log('跳转到地址列表页面失败====>', error) 372 console.log('跳转到地址列表页面失败====>', error)
373 }, 373 },
374 complete: () => {}, 374 complete: () => {},
375 }) 375 })
376 }, 376 },
377 // 下单 377 // 下单
378 orderBuild() { 378 orderBuild() {
379 uni.showLoading({ 379 uni.showLoading({
380 title: '支付中', 380 title: '支付中',
381 }) 381 })
382 if (this.isCart === 'true') { 382 if (this.isCart === 'true') {
383 const checkedGoods = [] 383 const checkedGoods = []
384 const sk_id_arr = [] 384 const sk_id_arr = []
385 this.checkedCartLst.map(item => { 385 this.checkedCartLst.map(item => {
386 checkedGoods.push(item.cart_id) 386 checkedGoods.push(item.cart_id)
387 sk_id_arr.push(item.sk_id) 387 sk_id_arr.push(item.sk_id)
388 }) 388 })
389 store.dispatch('order/build', { 389 store.dispatch('order/build', {
390 uid: this.$store.state.user.userInfo.uid, 390 uid: this.$store.state.user.userInfo.uid,
391 address: JSON.stringify(this.addressInfo), 391 address: JSON.stringify(this.addressInfo),
392 checkedGoods: checkedGoods, 392 checkedGoods: checkedGoods,
393 sk_id_arr: sk_id_arr, 393 sk_id_arr: sk_id_arr,
394 totalPrice: this.totalPrice, 394 totalPrice: this.totalPrice,
395 }).then((res) => { 395 }).then((res) => {
396 this.pay(res) 396 this.pay(res)
397 }) 397 })
398 } 398 }
399 if (this.isCart === 'false') { 399 if (this.isCart === 'false') {
400 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param 400 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
401 store.dispatch('order/buyNow', { 401 store.dispatch('order/buyNow', {
402 pid: skId.pid, 402 pid: skId.pid,
403 sk_id: skId.sk_id, 403 sk_id: skId.sk_id,
404 number: this.count, 404 number: this.count,
405 mp_id: mpId, 405 mp_id: mpId,
406 address: JSON.stringify(this.addressInfo), 406 address: JSON.stringify(this.addressInfo),
407 totalPrice: this.totalPrice, 407 totalPrice: this.totalPrice,
408 liuyan: this.note, 408 liuyan: this.note,
409 dir: 1, 409 dir: 1,
410 }).then((res) => { 410 }).then((res) => {
411 this.pay(res) 411 this.pay(res)
412 }) 412 })
413 } 413 }
414 }, 414 },
415 // 支付 415 // 支付
416 pay(res) { 416 pay(res) {
417 console.log('pay', res) 417 console.log('pay', res)
418 const { data, exKeyName: keyName } = res 418 const { data, exKeyName: keyName } = res
419 const uid = uni.getStorageSync('uid') 419 const uid = uni.getStorageSync('uid')
420 const timeStamp = new Date().getTime().toString() 420 const timeStamp = new Date().getTime().toString()
421 const nonceStr = 'asfafasfasfasfasf' 421 const nonceStr = 'asfafasfasfasfasf'
422 // 支付参数 422 // 支付参数
423 const fieldSet = { 423 const fieldSet = {
424 openid: this.$store.state.user.userInfo.openid, 424 openid: this.$store.state.user.userInfo.openid,
425 uid: this.$store.state.user.userInfo.uid, 425 uid: this.$store.state.user.userInfo.uid,
426 shopid: 0, 426 shopid: 0,
427 payCate: 2020, 427 payCate: 2020,
428 payMoney: this.totalPrice, 428 payMoney: this.totalPrice,
429 payWoodId: `fcdj-${uid}-${keyName}`, 429 payWoodId: `fcdj-${uid}-${keyName}`,
430 payWoodDesc: '在【非常戴镜】的微信付款凭证', 430 payWoodDesc: '在【非常戴镜】的微信付款凭证',
431 nonceStr, 431 nonceStr,
432 signType: 'MD5', 432 signType: 'MD5',
433 app_uid: 2020, 433 app_uid: 2020,
434 timeStamp, 434 timeStamp,
435 keyname: keyName, 435 keyname: keyName,
436 billInfo: JSON.stringify(data), 436 billInfo: JSON.stringify(data),
437 } 437 }
438 // 请求后台支付接口 438 // 请求后台支付接口
439 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { 439 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
440 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { 440 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
441 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` 441 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
442 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' 442 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
443 443
444 // 微信支付接口 444 // 微信支付接口
445 uni.requestPayment({ 445 uni.requestPayment({
446 appId: data.appid, 446 appId: data.appid,
447 timeStamp, 447 timeStamp,
448 nonceStr, 448 nonceStr,
449 total_fee: this.totalPrice, 449 total_fee: this.totalPrice,
450 package: `prepay_id=${data.prepay_id}`, 450 package: `prepay_id=${data.prepay_id}`,
451 signType: 'MD5', 451 signType: 'MD5',
452 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), 452 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
453 success: (res) => { 453 success: (res) => {
454 // 支付成功 454 // 支付成功
455 uni.showModal({ 455 uni.showModal({
456 content: '支付成功', 456 content: '支付成功',
457 showCancel: false, 457 showCancel: false,
458 }) 458 })
459 // 跳转订单详情页->状态 待收货 459 // 跳转订单详情页->状态 待收货
460 uni.reLaunch({ 460 uni.reLaunch({
461 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, 461 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
462 }) 462 })
463 }, 463 },
464 fail: (res) => { 464 fail: (res) => {
465 // 支付失败 465 // 支付失败
466 uni.showModal({ 466 uni.showModal({
467 content: '支付失败', 467 content: '支付失败',
468 showCancel: false, 468 showCancel: false,
469 }) 469 })
470 // 跳转订单详情页->状态 待付款 470 // 跳转订单详情页->状态 待付款
471 uni.reLaunch({ 471 uni.reLaunch({
472 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, 472 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
473 }) 473 })
474 }, 474 },
475 complete: () => { 475 complete: () => {
476 uni.hideLoading() 476 uni.hideLoading()
477 }, 477 },
478 }) 478 })
479 } else { 479 } else {
480 uni.showModal({ 480 uni.showModal({
481 content: '支付失败', 481 content: '支付失败',
482 showCancel: false, 482 showCancel: false,
483 }) 483 })
484 console.log('支付失败') 484 console.log('支付失败')
485 uni.hideLoading() 485 uni.hideLoading()
486 } 486 }
487 }) 487 })
488 }, 488 },
489 }, 489 },
490 } 490 }
491 </script> 491 </script>
492 492
493 <style lang="scss"> 493 <style lang="scss">
494 .wrap { 494 .wrap {
495 height: 100vh; 495 height: 100vh;
496 background-color: #f2f2f2; 496 background-color: #f2f2f2;
497 font-family: PingFangSC-Regular; 497 font-family: PingFangSC-Regular;
498 letter-spacing: -0.23px; 498 letter-spacing: -0.23px;
499 position: absolute; 499 position: absolute;
500 } 500 }
501 .addAddress { 501 .addAddress {
502 background-color: #ffffff; 502 background-color: #ffffff;
503 box-sizing: border-box; 503 box-sizing: border-box;
504 height: 124rpx; 504 height: 124rpx;
505 width: 100%; 505 width: 100%;
506 display: flex; 506 display: flex;
507 align-items: center; 507 align-items: center;
508 padding: 0 40rpx; 508 padding: 0 40rpx;
509 .addIcon { 509 .addIcon {
510 background-color: #f2f2f2; 510 background-color: #f2f2f2;
511 height: 56rpx; 511 height: 56rpx;
512 width: 60rpx; 512 width: 60rpx;
513 border-radius: 4rpx; 513 border-radius: 4rpx;
514 display: flex; 514 display: flex;
515 justify-content: center; 515 justify-content: center;
516 align-items: center; 516 align-items: center;
517 margin-right: 40rpx; 517 margin-right: 40rpx;
518 } 518 }
519 image { 519 image {
520 height: 28rpx; 520 height: 28rpx;
521 width: 30rpx; 521 width: 30rpx;
522 } 522 }
523 .addressText { 523 .addressText {
524 font-size: 28rpx; 524 font-size: 28rpx;
525 color: #333333; 525 color: #333333;
526 margin-right: 364rpx; 526 margin-right: 364rpx;
527 } 527 }
528 } 528 }
529 .content { 529 .content {
530 background-color: #f2f2f2; 530 background-color: #f2f2f2;
531 width: 100%; 531 width: 100%;
532 display: flex; 532 display: flex;
533 flex-direction: column; 533 flex-direction: column;
534 justify-content: center; 534 justify-content: center;
535 align-items: center; 535 align-items: center;
536 padding: 40rpx; 536 padding: 40rpx;
537 box-sizing: border-box; 537 box-sizing: border-box;
538 .orderInfo { 538 .orderInfo {
539 width: 670rpx; 539 width: 670rpx;
540 min-height: 488rpx; 540 min-height: 488rpx;
541 background-color: #ffffff; 541 background-color: #ffffff;
542 border-radius: 20rpx; 542 border-radius: 20rpx;
543 box-sizing: border-box; 543 box-sizing: border-box;
544 padding: 0 40rpx 40rpx 40rpx; 544 padding: 0 40rpx 40rpx 40rpx;
545 .title { 545 .title {
546 display: flex; 546 display: flex;
547 align-items: center; 547 align-items: center;
548 font-size: 28rpx; 548 font-size: 28rpx;
549 color: #333333; 549 color: #333333;
550 height: 60rpx; 550 height: 60rpx;
551 line-height: 40rpx; 551 line-height: 40rpx;
552 padding: 10rpx 10rpx 10rpx 0rpx; 552 padding: 10rpx 10rpx 10rpx 0rpx;
553 image { 553 image {
554 margin-right: 20rpx; 554 margin-right: 20rpx;
555 } 555 }
556 } 556 }
557 .infoBox { 557 .infoBox {
558 margin-top: 42rpx; 558 margin-top: 42rpx;
559 .infoTop { 559 .infoTop {
560 display: flex; 560 display: flex;
561 flex-direction: row; 561 flex-direction: row;
562 image { 562 image {
563 height: 188rpx; 563 height: 188rpx;
564 width: 188rpx; 564 width: 188rpx;
565 margin-right: 24rpx; 565 margin-right: 24rpx;
566 } 566 }
567 .infoRight { 567 .infoRight {
568 width: 374rpx; 568 width: 374rpx;
569 display: flex; 569 display: flex;
570 flex-direction: column; 570 flex-direction: column;
571 align-items: flex-start; 571 align-items: flex-start;
572 justify-content: space-between; 572 justify-content: space-between;
573 .goodName { 573 .goodName {
574 font-size: 28rpx; 574 font-size: 28rpx;
575 color: #333333; 575 color: #333333;
576 } 576 }
577 .remarks { 577 .remarks {
578 font-size: 20rpx; 578 font-size: 20rpx;
579 color: #999999; 579 color: #999999;
580 } 580 }
581 .priceBox { 581 .priceBox {
582 display: flex; 582 display: flex;
583 justify-content: space-between; 583 justify-content: space-between;
584 align-items: center; 584 align-items: center;
585 width: 100%; 585 width: 100%;
586 .price { 586 .price {
587 color: #ff6b4a; 587 color: #ff6b4a;
588 font-size: 28rpx; 588 font-size: 28rpx;
589 text{
590 margin-left: 10rpx;
591 }
589 } 592 }
590 .originCost { 593 .originCost {
591 text-decoration: line-through; 594 text-decoration: line-through;
592 color: #999999; 595 color: #999999;
593 font-size: 20rpx; 596 font-size: 20rpx;
594 } 597 }
595 .counter { 598 .counter {
596 display: flex; 599 display: flex;
597 flex-direction: row; 600 flex-direction: row;
598 justify-content: space-between; 601 justify-content: space-between;
599 font-size: 28rpx; 602 font-size: 28rpx;
600 color: #333333; 603 color: #333333;
601 width: 122rpx; 604 width: 122rpx;
602 .btn { 605 .btn {
603 display: flex; 606 display: flex;
604 justify-content: center; 607 justify-content: center;
605 line-height: 32rpx; 608 line-height: 32rpx;
606 height: 32rpx; 609 height: 32rpx;
607 width: 32rpx; 610 width: 32rpx;
608 background-color: #f2f2f2; 611 background-color: #f2f2f2;
609 color: #cfcfcf; 612 color: #cfcfcf;
610 } 613 }
611 } 614 }
612 } 615 }
613 } 616 }
614 } 617 }
615 .infoBottom { 618 .infoBottom {
616 display: flex; 619 display: flex;
617 flex-direction: column; 620 flex-direction: column;
618 justify-content: flex-start; 621 justify-content: flex-start;
619 font-size: 24rpx; 622 font-size: 24rpx;
620 color: #333333; 623 color: #333333;
621 text { 624 text {
622 color: #999999; 625 color: #999999;
623 margin-left: 20rpx; 626 margin-left: 20rpx;
624 } 627 }
625 628
626 .norm { 629 .norm {
627 margin-top: 28rpx; 630 margin-top: 28rpx;
628 } 631 }
629 .shippingMethod { 632 .shippingMethod {
630 margin-top: 12rpx; 633 margin-top: 12rpx;
631 } 634 }
632 .message { 635 .message {
633 display: flex; 636 display: flex;
634 flex-direction: row; 637 flex-direction: row;
635 align-items: center; 638 align-items: center;
636 margin-top: 18rpx; 639 margin-top: 18rpx;
637 input { 640 input {
638 margin-left: 20rpx; 641 margin-left: 20rpx;
639 width: 75%; 642 width: 75%;
640 } 643 }
641 } 644 }
642 } 645 }
643 } 646 }
644 } 647 }
645 .payWay { 648 .payWay {
646 height: 464rpx; 649 height: 464rpx;
647 width: 670rpx; 650 width: 670rpx;
648 background-color: #ffffff; 651 background-color: #ffffff;
649 color: #333333; 652 color: #333333;
650 font-size: 24rpx; 653 font-size: 24rpx;
651 border-radius: 20rpx; 654 border-radius: 20rpx;
652 box-sizing: border-box; 655 box-sizing: border-box;
653 padding: 0 52rpx 0rpx 40rpx; 656 padding: 0 52rpx 0rpx 40rpx;
654 margin-top: 20rpx; 657 margin-top: 20rpx;
655 display: flex; 658 display: flex;
656 flex-direction: column; 659 flex-direction: column;
657 justify-content: center; 660 justify-content: center;
658 align-items: flex-start; 661 align-items: flex-start;
659 .item { 662 .item {
660 display: flex; 663 display: flex;
661 flex-direction: row; 664 flex-direction: row;
662 justify-content: space-between; 665 justify-content: space-between;
663 align-items: center; 666 align-items: center;
664 width: 100%; 667 width: 100%;
665 height: 115rpx; 668 height: 115rpx;
666 .itemRight { 669 .itemRight {
667 display: flex; 670 display: flex;
668 flex-direction: row; 671 flex-direction: row;
669 justify-content: space-between; 672 justify-content: space-between;
670 align-items: center; 673 align-items: center;
671 image { 674 image {
672 height: 24rpx; 675 height: 24rpx;
673 width: 12rpx; 676 width: 12rpx;
674 } 677 }
675 .rightText { 678 .rightText {
676 margin-right: 20rpx; 679 margin-right: 20rpx;
677 text-align: right; 680 text-align: right;
678 .choosePayWay { 681 .choosePayWay {
679 display: flex; 682 display: flex;
680 align-items: center; 683 align-items: center;
681 text { 684 text {
682 color: #333333; 685 color: #333333;
683 } 686 }
684 image { 687 image {
685 height: 36rpx; 688 height: 36rpx;
686 width: 40rpx; 689 width: 40rpx;
687 margin-right: 8px; 690 margin-right: 8px;
688 } 691 }
689 } 692 }
690 .randomSubstraction { 693 .randomSubstraction {
691 color: #ff6b4a; 694 color: #ff6b4a;
692 } 695 }
693 .preferentialWay { 696 .preferentialWay {
694 color: #999999; 697 color: #999999;
695 } 698 }
696 } 699 }
697 .freight, 700 .freight,
698 .total { 701 .total {
699 margin-right: 32rpx; 702 margin-right: 32rpx;
700 } 703 }
701 text { 704 text {
702 color: #ff6b4a; 705 color: #ff6b4a;
703 } 706 }
704 } 707 }
705 } 708 }
706 } 709 }
707 // .checkBox { 710 // .checkBox {
708 // height: 58rpx; 711 // height: 58rpx;
709 // line-height: 58rpx; 712 // line-height: 58rpx;
710 // width: 100%; 713 // width: 100%;
711 // margin-top: 36rpx; 714 // margin-top: 36rpx;
712 // margin-left: 40rpx; 715 // margin-left: 40rpx;
713 // font-size: 12px; 716 // font-size: 12px;
714 // color: #999999; 717 // color: #999999;
715 // } 718 // }
716 } 719 }
717 .footer { 720 .footer {
718 height: 112rpx; 721 height: 112rpx;
719 width: 100%; 722 width: 100%;
720 background-color: #fff; 723 background-color: #fff;
721 font-size: 16px; 724 font-size: 16px;
722 display: flex; 725 display: flex;
723 justify-content: space-between; 726 justify-content: space-between;
724 align-items: center; 727 align-items: center;
725 position: fixed; 728 position: fixed;
726 bottom: 0; 729 bottom: 0;
727 z-index: 9999; 730 z-index: 9999;
728 .footerLeft { 731 .footerLeft {
729 display: flex; 732 display: flex;
730 justify-content: center; 733 justify-content: center;
731 align-items: center; 734 align-items: center;
732 width: 50%; 735 width: 50%;
733 color: #333333; 736 color: #333333;
734 text { 737 text {
735 color: #ff6b4a; 738 color: #ff6b4a;
736 } 739 }
737 } 740 }
738 .footerRight { 741 .footerRight {
739 display: flex; 742 display: flex;
740 justify-content: flex-end; 743 justify-content: flex-end;
741 align-items: center; 744 align-items: center;
742 width: 50%; 745 width: 50%;
743 margin-right: 26rpx; 746 margin-right: 26rpx;
744 .paybtn { 747 .paybtn {
745 display: flex; 748 display: flex;
746 justify-content: center; 749 justify-content: center;
747 align-items: center; 750 align-items: center;
748 background: #ff6b4a; 751 background: #ff6b4a;
749 border-radius: 20px; 752 border-radius: 20px;
750 border-radius: 20px; 753 border-radius: 20px;
751 color: #ffffff; 754 color: #ffffff;
752 width: 204rpx; 755 width: 204rpx;
753 height: 80rpx; 756 height: 80rpx;
754 } 757 }
755 } 758 }
756 } 759 }
757 // 地址信息样式 760 // 地址信息样式
758 .order-user { 761 .order-user {
759 width: 670rpx; 762 width: 670rpx;
760 height: 228rpx; 763 height: 228rpx;
761 background: #ffffff; 764 background: #ffffff;
762 border-radius: 14rpx; 765 border-radius: 14rpx;
763 margin: 0 auto; 766 margin: 0 auto;
764 margin-top: 20rpx; 767 margin-top: 20rpx;
765 position: relative; 768 position: relative;
766 .order-user-head { 769 .order-user-head {
767 display: flex; 770 display: flex;
768 height: 108rpx; 771 height: 108rpx;
769 width: 100%; 772 width: 100%;
770 align-items: center; 773 align-items: center;
771 padding-left: 126rpx; 774 padding-left: 126rpx;
772 box-sizing: border-box; 775 box-sizing: border-box;
773 .name { 776 .name {
774 display: flex; 777 display: flex;
775 justify-content: space-between; 778 justify-content: space-between;
776 font-size: 14px; 779 font-size: 14px;
777 color: #333333; 780 color: #333333;
778 letter-spacing: -0.26px; 781 letter-spacing: -0.26px;
779 margin-right: 20rpx; 782 margin-right: 20rpx;
780 .default { 783 .default {
781 height: 40rpx; 784 height: 40rpx;
782 width: 80rpx; 785 width: 80rpx;
783 background-color: #4a90e2; 786 background-color: #4a90e2;
784 border-radius: 13px; 787 border-radius: 13px;
785 border-radius: 13px; 788 border-radius: 13px;
786 text-align: center; 789 text-align: center;
787 margin-right: 20rpx; 790 margin-right: 20rpx;
788 text { 791 text {
789 display: flex; 792 display: flex;
790 justify-content: center; 793 justify-content: center;
791 align-items: center; 794 align-items: center;
792 font-size: 12px; 795 font-size: 12px;
793 color: #ffffff; 796 color: #ffffff;
794 letter-spacing: -0.23px; 797 letter-spacing: -0.23px;
795 } 798 }
796 } 799 }
797 } 800 }
798 .mobile { 801 .mobile {
799 font-size: 14px; 802 font-size: 14px;
800 color: #999999; 803 color: #999999;
801 letter-spacing: -0.26px; 804 letter-spacing: -0.26px;
802 } 805 }
803 } 806 }
804 .order-user-body { 807 .order-user-body {
805 display: flex; 808 display: flex;
806 width: 100%; 809 width: 100%;
807 image { 810 image {
808 width: 24px; 811 width: 24px;
809 height: 28px; 812 height: 28px;
810 margin: 12rpx 32rpx 0 40rpx; 813 margin: 12rpx 32rpx 0 40rpx;
811 } 814 }
812 .address { 815 .address {
813 font-weight: bold; 816 font-weight: bold;
814 font-size: 14px; 817 font-size: 14px;
815 color: #333333; 818 color: #333333;
816 letter-spacing: -0.26px; 819 letter-spacing: -0.26px;
817 } 820 }
818 } 821 }
819 .arrow { 822 .arrow {
820 width: 12px; 823 width: 12px;
821 height: 12px; 824 height: 12px;
822 position: absolute; 825 position: absolute;
823 right: 40rpx; 826 right: 40rpx;
824 bottom: 104rpx; 827 bottom: 104rpx;
825 } 828 }
826 } 829 }
827 .last_zhanwei { 830 .last_zhanwei {
828 background: #f2f2f2; 831 background: #f2f2f2;
829 height: 60px; 832 height: 60px;
830 } 833 }
831 </style> 834 </style>
832 835
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
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <!-- <view class="searchBar"> 5 <!-- <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> 7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8 </view> --> 8 </view> -->
9 <view class="screenBar"> 9 <view class="screenBar">
10 <view 10 <view
11 v-for="item in screenItems" 11 v-for="item in screenItems"
12 :key="item.current" 12 :key="item.current"
13 @click="onClickItem(item.current)" 13 @click="onClickItem(item.current)"
14 > 14 >
15 <view 15 <view
16 class="screenItem" 16 class="screenItem"
17 v-bind:class="{ active: current === item.current }" 17 v-bind:class="{ active: current === item.current }"
18 >{{ item.text }}</view> 18 >{{ item.text }}</view>
19 </view> 19 </view>
20 </view> 20 </view>
21 </view> 21 </view>
22 <view class="orderList"> 22 <view class="orderList">
23 <view 23 <view
24 v-for="(order) in orderList" 24 v-for="(order) in orderList"
25 :key="order.pay_id" 25 :key="order.pay_id"
26 > 26 >
27 <OrderCard 27 <OrderCard
28 :order="order" 28 :order="order"
29 :current="current" 29 :current="current"
30 v-if="order.order_info !== null"
30 ></OrderCard> 31 ></OrderCard>
31 </view> 32 </view>
32 </view> 33 </view>
33 <view class="footer">没有更多订单了，去商城看看吧~</view> 34 <view class="footer">没有更多订单了，去商城看看吧~</view>
34 </view> 35 </view>
35 </template> 36 </template>
36 <script> 37 <script>
37 import OrderCard from "./components/OrderCard.vue"; 38 import OrderCard from "./components/OrderCard.vue";
38 import store from "@/store"; 39 import store from "@/store";
39 40
40 export default { 41 export default {
41 components: { 42 components: {
42 OrderCard: OrderCard 43 OrderCard: OrderCard
43 }, 44 },
44 data() { 45 data() {
45 return { 46 return {
46 // 顶部筛选项 47 // 顶部筛选项
47 screenItems: [ 48 screenItems: [
48 { current: "10", text: "全部" }, 49 { current: "10", text: "全部" },
49 { current: "0", text: "待付款" }, 50 { current: "0", text: "待付款" },
50 { current: "1", text: "待收货" }, 51 { current: "1", text: "待收货" },
51 { current: "2", text: "已完成" } 52 { current: "2", text: "已完成" }
52 // {current:"3",text:'已评价'}, 53 // {current:"3",text:'已评价'},
53 // {current:"4",text:'退款'}, 54 // {current:"4",text:'退款'},
54 ], 55 ],
55 // 当前所在item 默认10-->全部 56 // 当前所在item 默认10-->全部
56 current: "10" 57 current: "10"
57 }; 58 };
58 }, 59 },
59 60
60 onShow() { 61 onShow() {
61 store.dispatch("myOrder/getList", { 62 store.dispatch("myOrder/getList", {
62 way: "" 63 way: ""
63 }); 64 });
64 }, 65 },
65 onLoad: function(option) { 66 onLoad: function(option) {
66 // 获取订单列表 67 // 获取订单列表
67 // store.dispatch("myOrder/getList", { 68 // store.dispatch("myOrder/getList", {
68 // way: "" 69 // way: ""
69 // }); 70 // });
70 // 从user过来传的status，给current，以显示对应item 71 // 从user过来传的status，给current，以显示对应item
71 this.current = option.status; 72 this.current = option.status;
72 }, 73 },
73 computed: { 74 computed: {
74 orderList() { 75 orderList() {
75 console.log('orderList', this.$store.state.myOrder.orderList); 76 console.log('orderList', this.$store.state.myOrder.orderList);
76 return this.$store.state.myOrder.orderList; 77 return this.$store.state.myOrder.orderList;
77 } 78 }
78 }, 79 },
79 methods: { 80 methods: {
80 // tab点击事件 81 // tab点击事件
81 onClickItem(e) { 82 onClickItem(e) {
82 if (this.current !== e) { 83 if (this.current !== e) {
83 this.current = e; 84 this.current = e;
84 } 85 }
85 } 86 }
86 } 87 }
87 }; 88 };
88 </script> 89 </script>
89 90
90 <style lang="scss"> 91 <style lang="scss">
91 .content { 92 .content {
92 display: flex; 93 display: flex;
93 flex-direction: column; 94 flex-direction: column;
94 align-items: center; 95 align-items: center;
95 background-color: #f7f6f6; 96 background-color: #f7f6f6;
96 min-height: 100vh; 97 min-height: 100vh;
97 .header { 98 .header {
98 background-color: #ffffff; 99 background-color: #ffffff;
99 width: 100%; 100 width: 100%;
100 // height: 232rpx; 101 // height: 232rpx;
101 padding: 20rpx 40rpx 16rpx 40rpx; 102 padding: 20rpx 40rpx 16rpx 40rpx;
102 box-sizing: border-box; 103 box-sizing: border-box;
103 position: fixed; 104 position: fixed;
104 top: 0; 105 top: 0;
105 left: 0; 106 left: 0;
106 // .searchBar { 107 // .searchBar {
107 // width: 670rpx; 108 // width: 670rpx;
108 // display: flex; 109 // display: flex;
109 // justify-content: center; 110 // justify-content: center;
110 // align-items: center; 111 // align-items: center;
111 // box-sizing: border-box; 112 // box-sizing: border-box;
112 // padding: 0rpx 16rpx; 113 // padding: 0rpx 16rpx;
113 // border: 1px solid #ff6b4a; 114 // border: 1px solid #ff6b4a;
114 // border-radius: 8rpx; 115 // border-radius: 8rpx;
115 // background-color: #ffffff; 116 // background-color: #ffffff;
116 // } 117 // }
117 118
118 .screenBar { 119 .screenBar {
119 width: 670rpx; 120 width: 670rpx;
120 // height: 110rpx; 121 // height: 110rpx;
121 height: 70rpx; 122 height: 70rpx;
122 display: flex; 123 display: flex;
123 flex-direction: row; 124 flex-direction: row;
124 justify-content: space-between; 125 justify-content: space-between;
125 align-items: center; 126 align-items: center;
126 color: #333333; 127 color: #333333;
127 font-size: 32rpx; 128 font-size: 32rpx;
128 } 129 }
129 .screenItem { 130 .screenItem {
130 height: 50rpx; 131 height: 50rpx;
131 font-size: 32rpx; 132 font-size: 32rpx;
132 color: #333333; 133 color: #333333;
133 display: flex; 134 display: flex;
134 justify-content: center; 135 justify-content: center;
135 align-items: center; 136 align-items: center;
136 transition: all 0.2s; 137 transition: all 0.2s;
137 } 138 }
138 .active { 139 .active {
139 // font-size: 34rpx; 140 // font-size: 34rpx;
140 color: #ec5d3b; 141 color: #ec5d3b;
141 } 142 }
142 .searchIpt { 143 .searchIpt {
143 height: 68rpx; 144 height: 68rpx;
144 width: 670rpx; 145 width: 670rpx;
145 padding: 16rpx; 146 padding: 16rpx;
146 font-size: 28rpx; 147 font-size: 28rpx;
147 box-sizing: border-box; 148 box-sizing: border-box;
148 } 149 }
149 } 150 }
150 .orderList { 151 .orderList {
151 // margin-top: 232rpx; 152 // margin-top: 232rpx;
152 margin-top: 132rpx; 153 margin-top: 132rpx;
153 } 154 }
154 .footer { 155 .footer {
155 font-size: 14px; 156 font-size: 14px;
156 color: #b8b8b8; 157 color: #b8b8b8;
157 margin: 40rpx 0; 158 margin: 40rpx 0;
158 } 159 }
159 } 160 }
160 </style> 161 </style>
161 162
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
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="body"> 3 <view class="body">
4 <template > 4 <template >
5 <view class="goods-form"> 5 <view class="goods-form">
6 <view class="p1"> 6 <view class="p1">
7 <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> 7 <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
8 填写验光数据 8 填写验光数据
9 </view> 9 </view>
10 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 10 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
11 <view class="picker"> 11 <view class="picker">
12 <view class="picker-choice"> 12 <view class="picker-choice">
13 <view class="choice-left"> 13 <view class="choice-left">
14 <text class="pd">验光单取名:</text> 14 <text class="pd">验光单取名:</text>
15 </view> 15 </view>
16 <input type="text" @change="handleInput" class="input" 16 <input type="text" @change="handleInput" class="input"
17 placeholder="请输入名称" maxlength="20" :value="name" /> 17 placeholder="请输入名称" maxlength="20" :value="name" />
18 </view> 18 </view>
19 </view> 19 </view>
20 <view class="picker" > 20 <view class="picker" >
21 <view class="picker-choice"> 21 <view class="picker-choice">
22 <view class="choice-left"> 22 <view class="choice-left">
23 <text class="p11">{{pickerInfoList[0].nameC}}</text> 23 <text class="p11">{{pickerInfoList[0].nameC}}</text>
24 <text class="p12">{{pickerInfoList[0].nameE}}</text> 24 <text class="p12">{{pickerInfoList[0].nameE}}</text>
25 </view> 25 </view>
26 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 26 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
27 <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> 27 <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
28 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 28 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
29 <view class="p14"> 29 <view class="p14">
30 {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} 30 {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
31 <image src="../../static/detail-tabicon.png" ></image> 31 <image src="../../static/detail-tabicon.png" ></image>
32 </view> 32 </view>
33 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 33 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
34 </picker> 34 </picker>
35 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 35 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
36 <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> 36 <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
37 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 37 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
38 <view class="p14"> 38 <view class="p14">
39 {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} 39 {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
40 <image src="../../static/detail-tabicon.png" ></image> 40 <image src="../../static/detail-tabicon.png" ></image>
41 </view> 41 </view>
42 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 42 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
43 </picker> 43 </picker>
44 </view> 44 </view>
45 </view> 45 </view>
46 <view class="picker" > 46 <view class="picker" >
47 <view class="picker-choice"> 47 <view class="picker-choice">
48 <view class="choice-left"> 48 <view class="choice-left">
49 <text class="p11">{{pickerInfoList[1].nameC}}</text> 49 <text class="p11">{{pickerInfoList[1].nameC}}</text>
50 <text class="p12">{{pickerInfoList[1].nameE}}</text> 50 <text class="p12">{{pickerInfoList[1].nameE}}</text>
51 </view> 51 </view>
52 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 52 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
53 <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> 53 <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
54 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 54 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
55 <view class="p14"> 55 <view class="p14">
56 {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} 56 {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
57 <image src="../../static/detail-tabicon.png" ></image> 57 <image src="../../static/detail-tabicon.png" ></image>
58 </view> 58 </view>
59 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 59 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
60 </picker> 60 </picker>
61 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 61 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
62 <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> 62 <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
63 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 63 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
64 <view class="p14"> 64 <view class="p14">
65 {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} 65 {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
66 <image src="../../static/detail-tabicon.png" ></image> 66 <image src="../../static/detail-tabicon.png" ></image>
67 </view> 67 </view>
68 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 68 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
69 </picker> 69 </picker>
70 </view> 70 </view>
71 </view> 71 </view>
72 <view class="picker" > 72 <view class="picker" >
73 <view class="picker-choice"> 73 <view class="picker-choice">
74 <view class="choice-left"> 74 <view class="choice-left">
75 <text class="p11">{{pickerInfoList[2].nameC}}</text> 75 <text class="p11">{{pickerInfoList[2].nameC}}</text>
76 <text class="p12">{{pickerInfoList[2].nameE}}</text> 76 <text class="p12">{{pickerInfoList[2].nameE}}</text>
77 </view> 77 </view>
78 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 78 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
79 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 79 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
80 <view class="p14"> 80 <view class="p14">
81 {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} 81 {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
82 <image src="../../static/detail-tabicon.png" ></image> 82 <image src="../../static/detail-tabicon.png" ></image>
83 </view> 83 </view>
84 </picker> 84 </picker>
85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
86 <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> 86 <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
88 <view class="p14"> 88 <view class="p14">
89 {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} 89 {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
90 <image src="../../static/detail-tabicon.png" ></image> 90 <image src="../../static/detail-tabicon.png" ></image>
91 </view> 91 </view>
92 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 92 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
93 </picker> 93 </picker>
94 </view> 94 </view>
95 </view> 95 </view>
96 <view class="picker"> 96 <view class="picker">
97 <view class="picker-choice"> 97 <view class="picker-choice">
98 <view class="choice-left"> 98 <view class="choice-left">
99 <text class="pd">瞳距:</text> 99 <text class="pd">瞳距:</text>
100 </view> 100 </view>
101 <input type="digit" @change="handleInputPd" class="input" 101 <input type="digit" @change="handleInputPd" class="input"
102 placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> 102 placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
103 </view> 103 </view>
104 </view> 104 </view>
105 <view class="picker" > 105 <view class="picker" >
106 <view class="picker-choice"> 106 <view class="picker-choice">
107 <view class="choice-left"> 107 <view class="choice-left">
108 <text class="p11">{{pickerInfoList[3].nameC}}</text> 108 <text class="p11">{{pickerInfoList[3].nameC}}</text>
109 </view> 109 </view>
110 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 110 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
111 <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 111 <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
112 <view class="p14" style="width: 30px;"> 112 <view class="p14" style="width: 30px;">
113 {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} 113 {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
114 <image src="../../static/detail-tabicon.png" ></image> 114 <image src="../../static/detail-tabicon.png" ></image>
115 </view> 115 </view>
116 </picker> 116 </picker>
117 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 117 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
118 <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 118 <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
119 <view class="p14" style="width: 30px;"> 119 <view class="p14" style="width: 30px;">
120 {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} 120 {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
121 <image src="../../static/detail-tabicon.png" ></image> 121 <image src="../../static/detail-tabicon.png" ></image>
122 </view> 122 </view>
123 </picker> 123 </picker>
124 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 124 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
125 <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> 125 <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
126 <view class="p14" style="width: 30px;"> 126 <view class="p14" style="width: 30px;">
127 {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} 127 {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
128 <image src="../../static/detail-tabicon.png" ></image> 128 <image src="../../static/detail-tabicon.png" ></image>
129 </view> 129 </view>
130 </picker> 130 </picker>
131 </view> 131 </view>
132 </view> 132 </view>
133 <view class="ipts"> 133 <view class="ipts">
134 <view class="inputItem"> 134 <view class="inputItem">
135 <text class="text">镜片宽度</text> 135 <text class="text">镜片宽度</text>
136 <input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth" placeholder="请输入镜片宽度"/> 136 <input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth!='0'?glassInfo.glassWidth:''" placeholder="请输入镜片宽度"/>
137 </view> 137 </view>
138 <view class="inputItem"> 138 <view class="inputItem">
139 <text class="text">鼻梁宽度</text> 139 <text class="text">鼻梁宽度</text>
140 <input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth" placeholder="请输入鼻梁宽度"/> 140 <input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth!='0'?glassInfo.norseWidth:''" placeholder="请输入鼻梁宽度"/>
141 </view> 141 </view>
142 <view class="inputItem"> 142 <view class="inputItem">
143 <text class="text">镜腿长度</text> 143 <text class="text">镜腿长度</text>
144 <input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth" placeholder="请输入镜腿长度"/> 144 <input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth!='0'?glassInfo.legWidth:''" placeholder="请输入镜腿长度"/>
145 </view> 145 </view>
146 146
147 </view> 147 </view>
148 <view class="confirm"> 148 <view class="confirm">
149 <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image> 149 <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
150 <text>确认以上输入信息来源于我的验光数据!</text> 150 <text>确认以上输入信息来源于我的验光数据!</text>
151 </view> 151 </view>
152 </view> 152 </view>
153 153
154 </template> 154 </template>
155 </view> 155 </view>
156 156
157 157
158 <view class="footer" @click="handleSubmit"> 158 <view class="footer" @click="handleSubmit">
159 <button class="btn" type="default">提 交</button> 159 <button class="btn" type="default">提 交</button>
160 </view> 160 </view>
161 </view> 161 </view>
162 </template> 162 </template>
163 163
164 <script> 164 <script>
165 import store from '@/store'; 165 import store from '@/store';
166 166
167 export default { 167 export default {
168 data() { 168 data() {
169 return { 169 return {
170 pickerInfoList:[ 170 pickerInfoList:[
171 {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0}, 171 {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0},
172 {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1}, 172 {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1},
173 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2}, 173 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2},
174 {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0} 174 {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0}
175 ], 175 ],
176 confirm: false, // 用户是否确认 176 confirm: false, // 用户是否确认
177 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 177 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
178 name: '请输入W姓名', 178 name: '请输入W姓名',
179 oldname:'',// 用于判读用户是否改变名字 179 oldname:'',// 用于判读用户是否改变名字
180 pickerInfoChioce:{ 180 pickerInfoChioce:{
181 "leftSph": '', 181 "leftSph": '',
182 "rightSph": '', 182 "rightSph": '',
183 "leftCyl": '', 183 "leftCyl": '',
184 "rightCyl": '', 184 "rightCyl": '',
185 "leftAxi": '', 185 "leftAxi": '',
186 "rightAxi": '', 186 "rightAxi": '',
187 "time":{ 187 "time":{
188 "year":0, 188 "year":0,
189 "month": 0, 189 "month": 0,
190 "day":0 , 190 "day":0 ,
191 } 191 }
192 }, 192 },
193 glassInfo:{ 193 glassInfo:{
194 norseWidth:0,//鼻宽 194 norseWidth:0,//鼻宽
195 glassWidth:0,//镜片宽度 195 glassWidth:0,//镜片宽度
196 legWidth:0//镜腿长度 196 legWidth:0//镜腿长度
197 }, 197 },
198 pd: '',// 瞳距 198 pd: '',// 瞳距
199 oldpd: '',// 用于判断用户是否改变瞳距 199 oldpd: '',// 用于判断用户是否改变瞳距
200 kinds:Number, // kinds=1，提交为新增验光，2为修改 200 kinds:Number, // kinds=1，提交为新增验光，2为修改
201 mp_id: Number 201 mp_id: Number,
202 loveItem:Object
202 }; 203 };
203 }, 204 },
204 onLoad: function (option) { 205 onLoad: function (option) {
205 //option为object类型，会序列化上个页面传递的参数 206 //option为object类型，会序列化上个页面传递的参数
206 // 初始化SPL、CYL、AXI的值 207 // 初始化SPL、CYL、AXI的值
207 for (let j = 0; j < 3; j++) { 208 for (let j = 0; j < 3; j++) {
208 for(let i=-12;i<6;i++){ 209 for(let i=-12;i<6;i++){
209 this.pickerInfoList[j].nameArray1.push(i) 210 this.pickerInfoList[j].nameArray1.push(i)
210 this.pickerInfoList[j].nameArray1.push(i+0.5) 211 this.pickerInfoList[j].nameArray1.push(i+0.5)
211 this.pickerInfoList[j].nameArray2.push(i) 212 this.pickerInfoList[j].nameArray2.push(i)
212 this.pickerInfoList[j].nameArray2.push(i+0.5) 213 this.pickerInfoList[j].nameArray2.push(i+0.5)
213 if(i>=-6){ 214 if(i>=-6){
214 this.pickerInfoList[j].nameArray1.push(i+0.25) 215 this.pickerInfoList[j].nameArray1.push(i+0.25)
215 this.pickerInfoList[j].nameArray1.push(i+0.75) 216 this.pickerInfoList[j].nameArray1.push(i+0.75)
216 this.pickerInfoList[j].nameArray2.push(i+0.25) 217 this.pickerInfoList[j].nameArray2.push(i+0.25)
217 this.pickerInfoList[j].nameArray2.push(i+0.75) 218 this.pickerInfoList[j].nameArray2.push(i+0.75)
218 } 219 }
219 if(i==5){ 220 if(i==5){
220 this.pickerInfoList[j].nameArray1.push(i+1) 221 this.pickerInfoList[j].nameArray1.push(i+1)
221 this.pickerInfoList[j].nameArray2.push(i+1) 222 this.pickerInfoList[j].nameArray2.push(i+1)
222 } 223 }
223 } 224 }
224 } 225 }
225 // 初始化日期值 226 // 初始化日期值
226 for (let i = 1; i < 32; i++){ 227 for (let i = 1; i < 32; i++){
227 this.pickerInfoList[3].nameArray3.push(i) 228 this.pickerInfoList[3].nameArray3.push(i)
228 } 229 }
229 // 初始化年份前后五年 230 // 初始化年份前后五年
230 let myDate = new Date(); 231 let myDate = new Date();
231 let nowYear = myDate.getFullYear(); 232 let nowYear = myDate.getFullYear();
232 for(let i=0;i<5;i++){ 233 for(let i=0;i<5;i++){
233 this.pickerInfoList[3].nameArray1.push(nowYear-i) 234 this.pickerInfoList[3].nameArray1.push(nowYear-i)
234 } 235 }
235 236
236 this.kinds=option.kinds 237 this.kinds=option.kinds
237 if(option.kinds==1){ 238 if(option.kinds==1){
238 this.name= ''; 239 this.name= '';
239 this.pd= ''; 240 this.pd= '';
240 } else{ 241 } else{
241 console.log('args===>',option.index) 242 console.log('args===>',option.index)
242 const loveList=Object.assign({},this.$store.state.myLoveList.loveList) 243 const loveList=Object.assign({},this.$store.state.myLoveList.loveList)
243 console.log('args===>',loveList[option.index].in_time) 244 // console.log('args===>',loveList[option.index].in_time)
244 console.log('args===>',loveList[option.index].in_time.toString().slice(0,4)) 245 // console.log('args===>',loveList[option.index].in_time.toString().slice(0,4))
245 console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0) 246 // console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0)
246 console.log('args===>',loveList[option.index].in_time.toString().slice(8,10)) 247 // console.log('args===>',loveList[option.index].in_time.toString().slice(8,10))
247 this.name=loveList[option.index].name 248 this.name=loveList[option.index].name
248 this.pd=loveList[option.index].pd 249 this.pd=loveList[option.index].pd
249 this.mp_id=loveList[option.index].mp_id 250 this.mp_id=loveList[option.index].mp_id
250 this.oldname=loveList[option.index].name 251 this.oldname=loveList[option.index].name
251 this.oldpd=loveList[option.index].pd 252 this.oldpd=loveList[option.index].pd
252 // 将kinds =2时的值传到该页面 253 // 将kinds =2时的值传到该页面
253 this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph) 254 this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph)
254 this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph) 255 this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph)
255 this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl) 256 this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl)
256 this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl) 257 this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl)
257 this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi) 258 this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi)
258 this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi) 259 this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi)
259 260
260 this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4)) 261 this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4))
261 if(loveList[option.index].in_time.toString().slice(5,6)==0){ 262 if(loveList[option.index].in_time.toString().slice(5,6)==0){
262 this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7)) 263 this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7))
263 } else{ 264 } else{
264 this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7)) 265 this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7))
265 } 266 }
266 if(loveList[option.index].in_time.toString().slice(8,9)==0){ 267 if(loveList[option.index].in_time.toString().slice(8,9)==0){
267 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10)) 268 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10))
268 } else{ 269 } else{
269 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10)) 270 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10))
270 } 271 }
272 this.glassInfo.glassWidth = loveList[option.index].glassWidth
273 this.glassInfo.norseWidth = loveList[option.index].norseWidth
274 this.glassInfo.legWidth = loveList[option.index].legWidth
275 this.loveItem = loveList[option.index]
276 }
277 },
278 computed:{
279 //判断当前眼镜信息是否有0
280 glassInfoRight(){
281 const glassInfoArr = Object.values(this.glassInfo)
282 return glassInfoArr.find(item => item == '0') ==undefined
271 } 283 }
272 }, 284 },
273 methods:{ 285 methods:{
274 glassInfoInput(e,type){ 286 glassInfoInput(e,type){
275 switch(type){ 287 switch(type){
276 case 0: 288 case 0:
277 this.glassInfo.glassWidth = e.detail.value 289 this.glassInfo.glassWidth = e.detail.value
278 break; 290 break;
279 case 1: 291 case 1:
280 this.glassInfo.norseWidth = e.detail.value 292 this.glassInfo.norseWidth = e.detail.value
281 break; 293 break;
282 case 2: 294 case 2:
283 this.glassInfo.legWidth = e.detail.value 295 this.glassInfo.legWidth = e.detail.value
284 break; 296 break;
285 default: 297 default:
286 break; 298 break;
287 } 299 }
288 }, 300 },
289 handleInput(e){ 301 handleInput(e){
290 this.name=e.target.value 302 this.name=e.target.value
291 }, 303 },
292 handleInputPd(e){ 304 handleInputPd(e){
293 // 只能输入正浮点数或正数 305 // 只能输入正浮点数或正数
294 if(/^\d+(\.\d+)?$/.test(e.target.value)){ 306 if(/^\d+(\.\d+)?$/.test(e.target.value)){
295 this.pd=e.target.value 307 this.pd=e.target.value
296 } else { 308 } else {
297 uni.showToast({ 309 uni.showToast({
298 title:"请输入有效数据;示例:89", 310 title:"请输入有效数据;示例:89",
299 icon: "none", 311 icon: "none",
300 duration: 2000, 312 duration: 2000,
301 }) 313 })
302 this.pd = '' 314 this.pd = ''
303 } 315 }
304 316
305 }, 317 },
318 updateMylove(){
319 const loveItem = this.loveItem
320 const glassWidth = this.glassInfo.glassWidth
321 const norseWidth = this.glassInfo.norseWidth
322 const legWidth = this.glassInfo.legWidth
323 // console.log(loveItem.glassWidth)
324 // console.log(glassWidth)
325 if(loveItem.glassWidth !== glassWidth){
326 store.dispatch('myLoveList/updateMylove', {
327 uid: this.$store.state.user.userInfo.uid,
328 openid: this.$store.state.user.userInfo.openid,
329 mp_id: this.mp_id,
330 keyname: 'glassWidth',
331 keyvalue: glassWidth
332 });
333 }
334 if(loveItem.norseWidth !== norseWidth){
335 store.dispatch('myLoveList/updateMylove', {
336 uid: this.$store.state.user.userInfo.uid,
337 openid: this.$store.state.user.userInfo.openid,
338 mp_id: this.mp_id,
339 keyname: 'norseWidth',
340 keyvalue: norseWidth
341 });
342 }
343 if(loveItem.legWidth !== legWidth){
344 store.dispatch('myLoveList/updateMylove', {
345 uid: this.$store.state.user.userInfo.uid,
346 openid: this.$store.state.user.userInfo.openid,
347 mp_id: this.mp_id,
348 keyname: 'legWidth',
349 keyvalue: legWidth
350 });
351 }
352 },
306 // 用户提交 353 // 用户提交
307 handleSubmit(){ 354 handleSubmit(){
308 if(this.name==''){ 355 if(this.name==''){
309 uni.showToast({ 356 uni.showToast({
310 title:"请输入验光单取名", 357 title:"请输入验光单取名",
311 icon: "none", 358 icon: "none",
312 duration: 2000, 359 duration: 2000,
313 }) 360 })
314 }else{ 361 }else{
315 362
316 if(this.pd==''){ 363 if(this.pd==''){
317 uni.showToast({ 364 uni.showToast({
318 title:"请输入瞳距", 365 title:"请输入瞳距",
319 icon: "none", 366 icon: "none",
320 duration: 2000, 367 duration: 2000,
321 }) 368 })
322 }else{ 369 }else{
323 370
324 if(this.kinds==1){ 371 if(this.kinds==1){
325 // 添加用户验光单 372 // 添加用户验光单
326 console.log('kinds====>',this.pickerInfoChioce.leftSph)
327 console.log('kinds====>',this.pickerInfoChioce.leftSph==Number)
328 console.log('kinds====>',this.pickerInfoChioce.rightSph==Number)
329 if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''|| 373 if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''||
330 this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''|| 374 this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''||
331 this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi=='' 375 this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi=='' ||!this.glassInfoRight
332 ){ 376 ){
333 uni.showToast({ 377 uni.showToast({
334 title:"请输入您的验光数据", 378 title:"请完善您的数据~",
335 icon: "none", 379 icon: "none",
336 duration: 2000, 380 duration: 2000,
337 }) 381 })
338 }else{ 382 }else{
339 if(this.confirm){ 383 if(this.confirm){
340 store.dispatch('myLoveList/addMylove', { 384 store.dispatch('myLoveList/addMylove', {
341 uid: this.$store.state.user.userInfo.uid, 385 uid: this.$store.state.user.userInfo.uid,
342 openid: this.$store.state.user.userInfo.openid, 386 openid: this.$store.state.user.userInfo.openid,
343 // mp_name: this.$store.state.user.userInfo.mp_name, 387 // mp_name: this.$store.state.user.userInfo.mp_name,
344 leftSph: this.pickerInfoChioce.leftSph, 388 leftSph: this.pickerInfoChioce.leftSph,
345 rightSph: this.pickerInfoChioce.rightSph, 389 rightSph: this.pickerInfoChioce.rightSph,
346 leftCyl: this.pickerInfoChioce.leftCyl, 390 leftCyl: this.pickerInfoChioce.leftCyl,
347 rightCyl: this.pickerInfoChioce.rightCyl, 391 rightCyl: this.pickerInfoChioce.rightCyl,
348 leftAxi: this.pickerInfoChioce.leftAxi, 392 leftAxi: this.pickerInfoChioce.leftAxi,
349 rightAxi: this.pickerInfoChioce.rightAxi, 393 rightAxi: this.pickerInfoChioce.rightAxi,
350 pd: this.pd,// 瞳距 394 pd: this.pd,// 瞳距
351 mp_name:this.name, 395 mp_name:this.name,
352 glassWidth:this.glassInfo.glassWidth, 396 glassWidth:this.glassInfo.glassWidth,
353 norseWidth:this.glassInfo.norseWidth, 397 norseWidth:this.glassInfo.norseWidth,
354 legWidth:this.glassInfo.legWidth 398 legWidth:this.glassInfo.legWidth
355 // time: this.pickerInfoChioce.time, 399 // time: this.pickerInfoChioce.time,
356 // img_url2: "http://localhost:8087/images/shop_1/1/", 400 // img_url2: "http://localhost:8087/images/shop_1/1/",
357 }); 401 });
358 // store.dispatch('myLoveList/getLoveList', {
359 // uid: this.$store.state.user.userInfo.uid,
360 // });
361 uni.navigateBack({ 402 uni.navigateBack({
362 delta:1, 403 delta:1,
363 animationDuration:2000 404 animationDuration:2000
364 }) 405 })
365
366 } else{ 406 } else{
367 uni.showToast({ 407 uni.showToast({
368 title:"请确认您的验光数据", 408 title:"请确认您的验光数据",
369 icon: "none", 409 icon: "none",
370 duration: 3000, 410 duration: 3000,
371 }) 411 })
372 } 412 }
373
374 } 413 }
375
376 } 414 }
377 if(this.kinds==2){ 415 if(this.kinds==2){
378 // console.log('kinds====>',this.kinds)
379 // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
380 // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
381 if(this.confirm){ 416 if(this.confirm){
382 const leftList = ["leftSph","leftCyl","leftAxi"]; 417 const leftList = ["leftSph","leftCyl","leftAxi"];
383 const rightList = ["rightSph", "rightCyl", "rightAxi"]; 418 const rightList = ["rightSph", "rightCyl", "rightAxi"];
384 let flag=0; 419 let flag=0;
385
386
387 if(this.name!=this.oldname){ 420 if(this.name!=this.oldname){
388 store.dispatch('myLoveList/updateMylove', { 421 store.dispatch('myLoveList/updateMylove', {
389 uid: this.$store.state.user.userInfo.uid, 422 uid: this.$store.state.user.userInfo.uid,
390 openid: this.$store.state.user.userInfo.openid, 423 openid: this.$store.state.user.userInfo.openid,
391 mp_id: this.mp_id, 424 mp_id: this.mp_id,
392 keyname: 'name', 425 keyname: 'name',
393 keyvalue: this.name, 426 keyvalue: this.name,
394 }); 427 });
395 flag=1 428 flag=1
396 } 429 }
397 if(this.pd!=this.oldpd){ 430 if(this.pd!=this.oldpd){
398 store.dispatch('myLoveList/updateMylove', { 431 store.dispatch('myLoveList/updateMylove', {
399 uid: this.$store.state.user.userInfo.uid, 432 uid: this.$store.state.user.userInfo.uid,
400 openid: this.$store.state.user.userInfo.openid, 433 openid: this.$store.state.user.userInfo.openid,
401 mp_id: this.mp_id, 434 mp_id: this.mp_id,
402 keyname: 'pd', 435 keyname: 'pd',
403 keyvalue: this.pd, 436 keyvalue: this.pd,
404 }); 437 });
405 flag=1 438 flag=1
406 } 439 }
407 // 先验证是否有改动项， 440 // 先验证是否有改动项，
408 for (let j=0; j<3; j++) { 441 for (let j=0; j<3; j++) {
409 if(this.pickerInfoList[j].nameIndex1!=0||this.pickerInfoList[j].nameIndex2!=0){ 442 if(this.pickerInfoList[j].nameIndex1!=0||this.pickerInfoList[j].nameIndex2!=0){
410 if(this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1]!=''&& 443 if(this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1]!=''&&
411 this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]!=''){ 444 this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]!=''){
412 if(this.pickerInfoList[j].nameIndex1!=0){ 445 if(this.pickerInfoList[j].nameIndex1!=0){
413 store.dispatch('myLoveList/updateMylove', { 446 store.dispatch('myLoveList/updateMylove', {
414 uid: this.$store.state.user.userInfo.uid, 447 uid: this.$store.state.user.userInfo.uid,
415 openid: this.$store.state.user.userInfo.openid, 448 openid: this.$store.state.user.userInfo.openid,
416 mp_id: this.mp_id, 449 mp_id: this.mp_id,
417 keyname: leftList[j], 450 keyname: leftList[j],
418 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], 451 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
419 }); 452 });
420 } 453 }
421 if(this.pickerInfoList[j].nameIndex2!=0){ 454 if(this.pickerInfoList[j].nameIndex2!=0){
422 store.dispatch('myLoveList/updateMylove', { 455 store.dispatch('myLoveList/updateMylove', {
423 uid: this.$store.state.user.userInfo.uid, 456 uid: this.$store.state.user.userInfo.uid,
424 openid: this.$store.state.user.userInfo.openid, 457 openid: this.$store.state.user.userInfo.openid,
425 mp_id: this.mp_id, 458 mp_id: this.mp_id,
426 keyname: rightList[j], 459 keyname: rightList[j],
427 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2] 460 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]
428 }); 461 });
429 } 462 }
430 flag=1; 463 flag=1;
431 } else{ 464 } else{
432 flag=0; 465 flag=0;
433 uni.showToast({ 466 uni.showToast({
434 title:"请输入您的验光数据", 467 title:"请输入您的验光数据",
435 icon: "none", 468 icon: "none",
436 duration: 2000, 469 duration: 2000,
437 }) 470 })
438 471
439 } 472 }
440 } 473 }
441 474
442 } 475 }
476 this.updateMylove()
477 flag=1
443 if(flag!=0){ 478 if(flag!=0){
444 store.dispatch('myLoveList/getLoveList', {
445 uid: this.$store.state.user.userInfo.uid,
446 });
447 uni.navigateBack({ 479 uni.navigateBack({
448 delta:1, 480 delta:1,
449 animationDuration:2000 481 animationDuration:2000
450 }) 482 })
451 } 483 }
452
453 } else{ 484 } else{
454 uni.showToast({ 485 uni.showToast({
455 title:"请确认您的验光数据", 486 title:"请确认您的验光数据",
456 icon: "none", 487 icon: "none",
457 duration: 3000, 488 duration: 3000,
458 }) 489 })
459 } 490 }
460
461 } 491 }
462
463
464 } 492 }
465
466 } 493 }
467
468 }, 494 },
469 changeConfirm() { 495 changeConfirm() {
470 this.confirm = !this.confirm 496 this.confirm = !this.confirm
471 }, 497 },
472 498
473 bindPickerChange01: function(e) { 499 bindPickerChange01: function(e) {
474 this.pickerInfoList[0].nameIndex1 = e.target.value 500 this.pickerInfoList[0].nameIndex1 = e.target.value
475 this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value] 501 this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value]
476 }, 502 },
477 bindPickerChange02: function(e) { 503 bindPickerChange02: function(e) {
478 this.pickerInfoList[0].nameIndex2 = e.target.value 504 this.pickerInfoList[0].nameIndex2 = e.target.value
479 this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value] 505 this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value]
480 }, 506 },
481 507
482 bindPickerChange11: function(e) { 508 bindPickerChange11: function(e) {
483 this.pickerInfoList[1].nameIndex1 = e.target.value 509 this.pickerInfoList[1].nameIndex1 = e.target.value
484 this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value] 510 this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value]
485 }, 511 },
486 bindPickerChange12: function(e) { 512 bindPickerChange12: function(e) {
487 this.pickerInfoList[1].nameIndex2 = e.target.value 513 this.pickerInfoList[1].nameIndex2 = e.target.value
488 this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value] 514 this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value]
489 }, 515 },
490 516
491 bindPickerChange21: function(e) { 517 bindPickerChange21: function(e) {
492 this.pickerInfoList[2].nameIndex1 = e.target.value 518 this.pickerInfoList[2].nameIndex1 = e.target.value
493 this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value] 519 this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value]
494 }, 520 },
495 bindPickerChange22: function(e) { 521 bindPickerChange22: function(e) {
496 this.pickerInfoList[2].nameIndex2 = e.target.value 522 this.pickerInfoList[2].nameIndex2 = e.target.value
497 this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value] 523 this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value]
498 }, 524 },
499 525
500 bindPickerChange41: function(e) { 526 bindPickerChange41: function(e) {
501 this.pickerInfoList[3].nameIndex1 = e.target.value 527 this.pickerInfoList[3].nameIndex1 = e.target.value
502 this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value] 528 this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value]
503 }, 529 },
504 bindPickerChange42: function(e) { 530 bindPickerChange42: function(e) {
505 this.pickerInfoList[3].nameIndex2 = e.target.value 531 this.pickerInfoList[3].nameIndex2 = e.target.value
506 this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value] 532 this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value]
507 }, 533 },
508 bindPickerChange43: function(e) { 534 bindPickerChange43: function(e) {
509 this.pickerInfoList[3].nameIndex3 = e.target.value 535 this.pickerInfoList[3].nameIndex3 = e.target.value
510 this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value] 536 this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value]
511 }, 537 },
512 } 538 }
513 } 539 }
514 </script> 540 </script>
515 541
516 <style lang="scss"> 542 <style lang="scss">
517 .wrap{ 543 .wrap{
518 min-height: 100vh; 544 min-height: 100vh;
519 background-color: #F2F2F2; 545 background-color: #F2F2F2;
520 .body{ 546 .body{
521 // font-family: PingFangSC-Regular; 547 // font-family: PingFangSC-Regular;
522 font-size: 12px; 548 font-size: 12px;
523 color: #666666; 549 color: #666666;
524 letter-spacing: 0; 550 letter-spacing: 0;
525 .bodyBox{ 551 .bodyBox{
526 margin-top: 15px; 552 margin-top: 15px;
527 .names{ 553 .names{
528 // font-family: PingFangSC-Regular; 554 // font-family: PingFangSC-Regular;
529 font-size: 12px; 555 font-size: 12px;
530 color: #151515; 556 color: #151515;
531 letter-spacing: 0; 557 letter-spacing: 0;
532 text-align: justify; 558 text-align: justify;
533 line-height: 17px; 559 line-height: 17px;
534 margin-left: 5px; 560 margin-left: 5px;
535 margin-right: 10px; 561 margin-right: 10px;
536 } 562 }
537 text{ 563 text{
538 // font-family: PingFangSC-Regular; 564 // font-family: PingFangSC-Regular;
539 font-size: 12px; 565 font-size: 12px;
540 color: #666666; 566 color: #666666;
541 letter-spacing: 0; 567 letter-spacing: 0;
542 text-align: justify; 568 text-align: justify;
543 } 569 }
544 } 570 }
545 571
546 } 572 }
547 .goods-form { 573 .goods-form {
548 display: flex; 574 display: flex;
549 flex-direction: column; 575 flex-direction: column;
550 align-items: center; 576 align-items: center;
551 justify-content: center; 577 justify-content: center;
552 background-color: #fff; 578 background-color: #fff;
553 width: 100%; 579 width: 100%;
554 padding: 40rpx 0; 580 padding: 40rpx 0;
555 .p1 { 581 .p1 {
556 font-size: 16px; 582 font-size: 16px;
557 color: #333333; 583 color: #333333;
558 letter-spacing: -0.3px; 584 letter-spacing: -0.3px;
559 text-align: justify; 585 text-align: justify;
560 line-height: 24px; 586 line-height: 24px;
561 margin: 4px 0; 587 margin: 4px 0;
562 588
563 } 589 }
564 .p2 { 590 .p2 {
565 font-size: 12px; 591 font-size: 12px;
566 color: #999999; 592 color: #999999;
567 letter-spacing: -0.23px; 593 letter-spacing: -0.23px;
568 margin-bottom: 32rpx; 594 margin-bottom: 32rpx;
569 } 595 }
570 .image2{ 596 .image2{
571 width: 42rpx; 597 width: 42rpx;
572 height: 34rpx; 598 height: 34rpx;
573 margin-right: 12rpx; 599 margin-right: 12rpx;
574 } 600 }
575 .confirm { 601 .confirm {
576 display: flex; 602 display: flex;
577 align-items: center; 603 align-items: center;
578 font-size: 12px; 604 font-size: 12px;
579 color: #666666; 605 color: #666666;
580 letter-spacing: -0.23px; 606 letter-spacing: -0.23px;
581 width: 684rpx; 607 width: 684rpx;
582 .image1{ 608 .image1{
583 margin-right:25rpx; 609 margin-right:25rpx;
584 width: 42rpx; 610 width: 42rpx;
585 height: 38rpx; 611 height: 38rpx;
586 } 612 }
587 } 613 }
588 .picker{ 614 .picker{
589 display: flex; 615 display: flex;
590 flex-direction: column; 616 flex-direction: column;
591 justify-content: center; 617 justify-content: center;
592 align-items: center; 618 align-items: center;
593 width: 100%; 619 width: 100%;
594 620
595 .picker-choice{ 621 .picker-choice{
596 display: flex; 622 display: flex;
597 width: 684rpx; 623 width: 684rpx;
598 align-items: center; 624 align-items: center;
599 margin-bottom: 40rpx; 625 margin-bottom: 40rpx;
600 .input{ 626 .input{
601 border-bottom: 1px solid #CFCFCF; 627 border-bottom: 1px solid #CFCFCF;
602 height: 40rpx; 628 height: 40rpx;
603 } 629 }
604 .choice-left{ 630 .choice-left{
605 width: 210rpx; 631 width: 210rpx;
606 .pd{ 632 .pd{
607 font-size: 14px; 633 font-size: 14px;
608 color: #333333; 634 color: #333333;
609 letter-spacing: -0.26px; 635 letter-spacing: -0.26px;
610 text-align: justify; 636 text-align: justify;
611 line-height: 24px; 637 line-height: 24px;
612 margin-right: 44rpx; 638 margin-right: 44rpx;
613 } 639 }
614 .p11 { 640 .p11 {
615 font-size: 14px; 641 font-size: 14px;
616 color: #333333; 642 color: #333333;
617 letter-spacing: -0.26px; 643 letter-spacing: -0.26px;
618 text-align: justify; 644 text-align: justify;
619 line-height: 24px; 645 line-height: 24px;
620 // margin-right: 10px; 646 // margin-right: 10px;
621 } 647 }
622 .p12 { 648 .p12 {
623 font-size: 10px; 649 font-size: 10px;
624 color: #3F3F3F; 650 color: #3F3F3F;
625 letter-spacing: -0.19px; 651 letter-spacing: -0.19px;
626 text-align: justify; 652 text-align: justify;
627 line-height: 24px; 653 line-height: 24px;
628 } 654 }
629 655
630 656
631 } 657 }
632 .p13 { 658 .p13 {
633 font-size: 10px; 659 font-size: 10px;
634 color: #999999; 660 color: #999999;
635 letter-spacing: -0.19px; 661 letter-spacing: -0.19px;
636 margin-right: 10px; 662 margin-right: 10px;
637 } 663 }
638 .p13-date { 664 .p13-date {
639 font-size: 10px; 665 font-size: 10px;
640 color: #999999; 666 color: #999999;
641 letter-spacing: -0.19px; 667 letter-spacing: -0.19px;
642 margin-right: 5px; 668 margin-right: 5px;
643 } 669 }
644 picker{ 670 picker{
645 width: 144rpx; 671 width: 144rpx;
646 height: 40rpx; 672 height: 40rpx;
647 display: flex; 673 display: flex;
648 position: relative; 674 position: relative;
649 .p14 { 675 .p14 {
650 font-size: 14px; 676 font-size: 14px;
651 color: #666666; 677 color: #666666;
652 letter-spacing: -0.26px; 678 letter-spacing: -0.26px;
653 text-align: center; 679 text-align: center;
654 width: 124rpx; 680 width: 124rpx;
655 border-bottom: 1px solid #CFCFCF; 681 border-bottom: 1px solid #CFCFCF;
656 height: 38rpx; 682 height: 38rpx;
657 } 683 }
658 image{ 684 image{
659 width: 20rpx; 685 width: 20rpx;
660 height: 20rpx; 686 height: 20rpx;
661 position: absolute; 687 position: absolute;
662 right: 20rpx; 688 right: 20rpx;
663 top: 8rpx; 689 top: 8rpx;
664 } 690 }
665 } 691 }
666 692
667 693
668 } 694 }
669 } 695 }
670 .ipts{ 696 .ipts{
671 width: 100%; 697 width: 100%;
672 display: flex; 698 display: flex;
673 flex-direction: column; 699 flex-direction: column;
674 justify-content: center; 700 justify-content: center;
675 align-items: flex-start; 701 align-items: flex-start;
676 padding: 20rpx 36rpx; 702 padding: 20rpx 36rpx;
677 box-sizing: border-box; 703 box-sizing: border-box;
678 .inputItem{ 704 .inputItem{
679 display: flex; 705 display: flex;
680 flex-direction: row; 706 flex-direction: row;
681 justify-content: center; 707 justify-content: center;
682 align-items: center; 708 align-items: center;
683 margin-bottom: 36rpx; 709 margin-bottom: 36rpx;
684 .text{ 710 .text{
685 margin-right: 100rpx; 711 margin-right: 100rpx;
686 } 712 }
687 .input{ 713 .input{
688 border-bottom: 1px solid #CFCFCF; 714 border-bottom: 1px solid #CFCFCF;
src/pages/user/user.vue
Diff comments   View file @e92e93f
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <!-- 弹窗 --> 3 <!-- 弹窗 -->
4 <uni-popup 4 <uni-popup
5 ref="popup" 5 ref="popup"
6 type="center" 6 type="center"
7 > 7 >
8 <!-- 给一个左边弹窗的样式 --> 8 <!-- 给一个左边弹窗的样式 -->
9 <!-- 关闭弹窗按钮 --> 9 <!-- 关闭弹窗按钮 -->
10 <view 10 <view
11 class="closeBtn" 11 class="closeBtn"
12 @tap="this.$refs.popup.close()" 12 @tap="this.$refs.popup.close()"
13 >x</view> 13 >x</view>
14 <view 14 <view
15 class="popUpWrap" 15 class="popUpWrap"
16 v-if="whichTap==0" 16 v-if="whichTap==0"
17 > 17 >
18 <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text> 18 <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text>
19 19
20 <!-- 左 --> 20 <!-- 左 -->
21 <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> 21 <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> -->
22 <!-- 右 --> 22 <!-- 右 -->
23 <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> 23 <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> -->
24 </view> 24 </view>
25 <view 25 <view
26 class="popUpWrap" 26 class="popUpWrap"
27 v-if="whichTap==1" 27 v-if="whichTap==1"
28 > 28 >
29 <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> 29 <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text>
30 </view> 30 </view>
31 <view 31 <view
32 class="popUpWrap" 32 class="popUpWrap"
33 v-if="whichTap==2" 33 v-if="whichTap==2"
34 > 34 >
35 <button @tap="chatOur(1)">客服1</button> 35 <button @tap="chatOur(1)">客服1</button>
36 <button @tap="chatOur(2)">客服2</button> 36 <button @tap="chatOur(2)">客服2</button>
37 </view> 37 </view>
38 </uni-popup> 38 </uni-popup>
39 <!-- <scroll-view 39 <!-- <scroll-view
40 enable-flex 40 enable-flex
41 @scrolltolower="handleScrolltolower" 41 @scrolltolower="handleScrolltolower"
42 scroll-y 42 scroll-y
43 style="height: 1000px;" 43 style="height: 1000px;"
44 > --> 44 > -->
45 <view 45 <view
46 v-if="isAuth" 46 v-if="isAuth"
47 class="content" 47 class="content"
48 > 48 >
49 <view class="userInfo"> 49 <view class="userInfo">
50 <view class="info"> 50 <view class="info">
51 <image 51 <image
52 :src="headerphoto" 52 :src="headerphoto"
53 mode="aspectFill" 53 mode="aspectFill"
54 ></image> 54 ></image>
55 <view class="infoText"> 55 <view class="infoText">
56 <text class="userName">{{nickName}}</text> 56 <text class="userName">{{nickName}}</text>
57 </view> 57 </view>
58 </view> 58 </view>
59 <!-- <view class="service"> 59 <!-- <view class="service">
60 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 60 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
61 </view> --> 61 </view> -->
62 </view> 62 </view>
63 <view 63 <view
64 class="myOpticsData" 64 class="myOpticsData"
65 @tap="toOpticsData" 65 @tap="toOpticsData"
66 > 66 >
67 <view class="left"> 67 <view class="left">
68 <image 68 <image
69 src="../../static/img/user/dataWrite.png" 69 src="../../static/img/user/dataWrite.png"
70 mode="aspectFit" 70 mode="aspectFit"
71 ></image> 71 ></image>
72 <text>验光数据</text> 72 <text>验光数据</text>
73 </view> 73 </view>
74 <image 74 <image
75 src="../../static/right.png" 75 src="../../static/right.png"
76 mode="aspectFit" 76 mode="aspectFit"
77 ></image> 77 ></image>
78 </view> 78 </view>
79 <view class="myOrder"> 79 <view class="myOrder">
80 <view class="orderHeader"> 80 <view class="orderHeader" @click="toMyOrder('10')" >
81 <text>我的订单</text> 81 <text>我的订单</text>
82 <view 82 <view class="btn">
83 class="btn"
84 @click="toMyOrder('10')"
85 >
86 全部 83 全部
87 <image 84 <image
88 src="../../static/right.png" 85 src="../../static/right.png"
89 mode="aspectFit" 86 mode="aspectFit"
90 ></image> 87 ></image>
91 </view> 88 </view>
92 </view> 89 </view>
93 <view class="orderBody"> 90 <view class="orderBody">
94 <view 91 <view
95 class="item waitPay" 92 class="item waitPay"
96 @click="toMyOrder('0')" 93 @click="toMyOrder('0')"
97 > 94 >
98 <image 95 <image
99 src="../../static/img/user/waitDeliver.png" 96 src="../../static/img/user/waitDeliver.png"
100 mode="aspectFit" 97 mode="aspectFit"
101 ></image> 98 ></image>
102 <text>待付款</text> 99 <text>待付款</text>
103 </view> 100 </view>
104 <view 101 <view
105 class="item waitDeliver" 102 class="item waitDeliver"
106 @click="toMyOrder('1')" 103 @click="toMyOrder('1')"
107 > 104 >
108 <image 105 <image
109 src="../../static/img/user/waitPay.png" 106 src="../../static/img/user/waitPay.png"
110 mode="aspectFit" 107 mode="aspectFit"
111 ></image> 108 ></image>
112 <text>待收货</text> 109 <text>待收货</text>
113 </view> 110 </view>
114 <view 111 <view
115 class="item waitReceive" 112 class="item waitReceive"
116 @click="toMyOrder('2')" 113 @click="toMyOrder('2')"
117 > 114 >
118 <image 115 <image
119 src="../../static/img/user/waitReceive.png" 116 src="../../static/img/user/waitReceive.png"
120 mode="aspectFit" 117 mode="aspectFit"
121 ></image> 118 ></image>
122 <text>已完成</text> 119 <text>已完成</text>
123 </view> 120 </view>
124 <!-- <view class="item service" @click="toMyOrder('3')"> 121 <!-- <view class="item service" @click="toMyOrder('3')">
125 <image src="../../static/img/user/refound.png" mode="aspectFit"></image> 122 <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
126 <text>已评价</text> 123 <text>已评价</text>
127 </view> --> 124 </view> -->
128 </view> 125 </view>
129 </view> 126 </view>
130 <view class="someItem"> 127 <view class="someItem">
131 <!-- <view class="item"> 128 <!-- <view class="item">
132 <view class="left"> 129 <view class="left">
133 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> 130 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
134 <text>推广记录与收益</text> 131 <text>推广记录与收益</text>
135 </view> 132 </view>
136 <image src="../../static/right.png" mode="aspectFit"></image> 133 <image src="../../static/right.png" mode="aspectFit"></image>
137 </view> --> 134 </view> -->
138 <view 135 <view
139 @tap="toAddress" 136 @tap="toAddress"
140 class="item" 137 class="item"
141 > 138 >
142 <image 139 <image
143 src="../../static/address-icon.png" 140 src="../../static/address-icon.png"
144 mode="aspectFit" 141 mode="aspectFit"
145 ></image> 142 ></image>
146 <view class="left"> 143 <view class="left">
147 <text>地址管理</text> 144 <text>地址管理</text>
148 <image 145 <image
149 class="image2" 146 class="image2"
150 src="../../static/right.png" 147 src="../../static/right.png"
151 mode="aspectFit" 148 mode="aspectFit"
152 ></image> 149 ></image>
153 </view> 150 </view>
154 151
155 </view> 152 </view>
156 <view 153 <view
157 @tap="introduce" 154 @tap="introduce"
158 class="item" 155 class="item"
159 > 156 >
160 <image 157 <image
161 src="../../static/img/user/introduce.png" 158 src="../../static/img/user/introduce.png"
162 mode="aspectFit" 159 mode="aspectFit"
163 ></image> 160 ></image>
164 <view class="left"> 161 <view class="left">
165 <text>系统介绍</text> 162 <text>系统介绍</text>
166 <image 163 <image
167 src="../../static/right.png" 164 src="../../static/right.png"
168 mode="aspectFit" 165 mode="aspectFit"
169 ></image> 166 ></image>
170 </view> 167 </view>
171 </view> 168 </view>
172 <view 169 <view
173 @tap="joinUs" 170 @tap="joinUs"
174 class="item" 171 class="item"
175 > 172 >
176 <image 173 <image
177 src="../../static/img/user/joinUs.png" 174 src="../../static/img/user/joinUs.png"
178 mode="aspectFit" 175 mode="aspectFit"
179 ></image> 176 ></image>
180 <view class="left"> 177 <view class="left">
181 <text>加入我们</text> 178 <text>加入我们</text>
182 <image 179 <image
183 src="../../static/right.png" 180 src="../../static/right.png"
184 mode="aspectFit" 181 mode="aspectFit"
185 ></image> 182 ></image>
186 </view> 183 </view>
187 </view> 184 </view>
188 <view class="item"> 185 <view class="item">
189 <image 186 <image
190 src="../../static/img/user/service.png" 187 src="../../static/img/user/service.png"
191 mode="aspectFit" 188 mode="aspectFit"
192 ></image> 189 ></image>
193 <view class="left lastLeft"> 190 <view class="left lastLeft">
194 <text>联系客服</text> 191 <text>联系客服</text>
195 <image 192 <image
196 src="../../static/right.png" 193 src="../../static/right.png"
197 mode="aspectFit" 194 mode="aspectFit"
198 ></image> 195 ></image>
199 </view> 196 </view>
200 </view> 197 </view>
201 </view> 198 </view>
202 <view class="recommend"> 199 <view class="recommend">
203 <view class="title"> 200 <view class="title">
204 <view class="line"></view> 201 <view class="line"></view>
205 <view class="text">精选推荐</view> 202 <view class="text">精选推荐</view>
206 <view class="line"></view> 203 <view class="line"></view>
207 </view> 204 </view>
208 <!-- 商品列表 --> 205 <!-- 商品列表 -->
209 <view class="goods-list"> 206 <view class="goods-list">
210 <!-- <scroll-view 207 <!-- <scroll-view
211 enable-flex 208 enable-flex
212 @scrolltolower="handleScrolltolower" 209 @scrolltolower="handleScrolltolower"
213 scroll-y 210 scroll-y
214 class="product-list" 211 class="product-list"
215 > --> 212 > -->
216 <view class="product-list"> 213 <view class="product-list">
217 <view 214 <view
218 class="product" 215 class="product"
219 v-for="(item, index) in userRecommandList" 216 v-for="(item, index) in userRecommandList"
220 :key="index" 217 :key="index"
221 > 218 >
222 <Card 219 <Card
223 :goods="item" 220 :goods="item"
224 :scrollTop="scrollTop" 221 :scrollTop="scrollTop"
225 :viewHeight="viewHeight" 222 :viewHeight="viewHeight"
226 ></Card> 223 ></Card>
227 </view> 224 </view>
228 </view> 225 </view>
229 <!-- </scroll-view> --> 226 <!-- </scroll-view> -->
230 <view class="loading-text">{{loadingText}}</view> 227 <view class="loading-text">{{loadingText}}</view>
231 </view> 228 </view>
232 </view> 229 </view>
233 </view> 230 </view>
234 <view 231 <view
235 v-else 232 v-else
236 class="auth" 233 class="auth"
237 > 234 >
238 <view class="icon"></view> 235 <view class="icon"></view>
239 <view class="divider"></view> 236 <view class="divider"></view>
240 <view class="title">申请获取以下权限</view> 237 <view class="title">申请获取以下权限</view>
241 <view class="text">获得您的公开信息(昵称、头像等)</view> 238 <view class="text">获得您的公开信息(昵称、头像等)</view>
242 <button 239 <button
243 type="primary" 240 type="primary"
244 open-type="getUserInfo" 241 open-type="getUserInfo"
245 @getuserinfo="onGotUserInfo" 242 @getuserinfo="onGotUserInfo"
246 >授权登陆</button> 243 >授权登陆</button>
247 </view> 244 </view>
248 <!-- </scroll-view> --> 245 <!-- </scroll-view> -->
249 </view> 246 </view>
250 </template> 247 </template>
251 248
252 <script> 249 <script>
253 import Card from '@/components/CommodityCard/CommodityCard.vue' 250 import Card from '@/components/CommodityCard/CommodityCard.vue'
254 import store from '@/store' 251 import store from '@/store'
255 import UniPopup from '@/components/UniPopup/uni-popup.vue' 252 import UniPopup from '@/components/UniPopup/uni-popup.vue'
256 253
257 export default { 254 export default {
258 components: { 255 components: {
259 Card, 256 Card,
260 UniPopup, 257 UniPopup,
261 }, 258 },
262 data() { 259 data() {
263 return { 260 return {
264 isAuth: true, // 是否显示授权页面, 261 isAuth: true, // 是否显示授权页面,
265 pagesnum: 1, // 分页请求初始值 262 pagesnum: 1, // 分页请求初始值
266 whichTap: 0, // 弹窗渲染选择条件 263 whichTap: 0, // 弹窗渲染选择条件
267 loadingText: '到底了', 264 loadingText: '到底了',
268 scrollTop: 0, 265 scrollTop: 0,
269 viewHeight: uni.getSystemInfoSync().windowHeight, 266 viewHeight: uni.getSystemInfoSync().windowHeight,
270 } 267 }
271 }, 268 },
272 onPageScroll({ scrollTop }) { 269 onPageScroll({ scrollTop }) {
273 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 270 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
274 this.scrollTop = scrollTop 271 this.scrollTop = scrollTop
275 }, 272 },
276 onLoad() { 273 onLoad() {
277 const that = this 274 const that = this
278 // 判断是否授权 275 // 判断是否授权
279 uni.getSetting({ 276 uni.getSetting({
280 success(res) { 277 success(res) {
281 console.log('authSetting', res.authSetting) 278 console.log('authSetting', res.authSetting)
282 if (res.authSetting['scope.userInfo'] === true) { 279 if (res.authSetting['scope.userInfo'] === true) {
283 that.isAuth = true 280 that.isAuth = true
284 } else { 281 } else {
285 that.isAuth = false 282 that.isAuth = false
286 } 283 }
287 }, 284 },
288 }) 285 })
289 store.dispatch('userRecommand/getRecommandList', { 286 store.dispatch('userRecommand/getRecommandList', {
290 uid: that.$store.state.user.userInfo.uid, 287 uid: that.$store.state.user.userInfo.uid,
291 openid: that.$store.state.user.userInfo.openid, 288 openid: that.$store.state.user.userInfo.openid,
292 page: that.pagesnum, 289 page: that.pagesnum,
293 }) 290 })
294 }, 291 },
295 onReachBottom() { 292 onReachBottom() {
296 // console.log('usr-my',this.$store.state.user.userInfo) 293 // console.log('usr-my',this.$store.state.user.userInfo)
297 this.pagesnum++ 294 this.pagesnum++
298 store.dispatch('userRecommand/getRecommandList', { 295 store.dispatch('userRecommand/getRecommandList', {
299 uid: this.$store.state.user.userInfo.uid, 296 uid: this.$store.state.user.userInfo.uid,
300 openid: this.$store.state.user.userInfo.openid, 297 openid: this.$store.state.user.userInfo.openid,
301 page: this.pagesnum, 298 page: this.pagesnum,
302 }) 299 })
303 }, 300 },
304 computed: { 301 computed: {
305 nickName() { 302 nickName() {
306 return this.$store.state.user.userInfo.nickName 303 return this.$store.state.user.userInfo.nickName
307 }, 304 },
308 headerphoto() { 305 headerphoto() {
309 return this.$store.state.user.userInfo.headerphoto 306 return this.$store.state.user.userInfo.headerphoto
310 }, 307 },
311 userRecommandList() { 308 userRecommandList() {
312 console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList) 309 console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList)
313 return this.$store.state.userRecommand.recommandList 310 return this.$store.state.userRecommand.recommandList
314 }, 311 },
315 }, 312 },
316 methods: { 313 methods: {
317 // 弹窗 314 // 弹窗
318 changeTap(item) { 315 changeTap(item) {
319 this.whichTap = item 316 this.whichTap = item
320 this.$refs.popup.open() 317 this.$refs.popup.open()
321 }, 318 },
322 chatOur(item) { 319 chatOur(item) {
323 if (item === 1) { 320 if (item === 1) {
324 uni.makePhoneCall({ 321 uni.makePhoneCall({
325 phoneNumber: 13376189297, // 客服1 电话 322 phoneNumber: 13376189297, // 客服1 电话
326 }) 323 })
327 } else { 324 } else {
328 uni.makePhoneCall({ 325 uni.makePhoneCall({
329 phoneNumber: 18014995101, // 客服2 电话 326 phoneNumber: 18014995101, // 客服2 电话
330 }) 327 })
331 } 328 }
332 }, 329 },
333 // 授权 330 // 授权
334 onGotUserInfo(e) { 331 onGotUserInfo(e) {
335 if (e.detail.errMsg === 'getUserInfo:ok') { 332 if (e.detail.errMsg === 'getUserInfo:ok') {
336 const { fromInfo } = this.$store.state.user 333 const { fromInfo } = this.$store.state.user
337 // 用户授权成功 334 // 用户授权成功
338 store.dispatch('user/getUserInfo', fromInfo) 335 store.dispatch('user/getUserInfo', fromInfo)
339 this.isAuth = true 336 this.isAuth = true
340 } 337 }
341 }, 338 },
342 toAddress() { 339 toAddress() {
343 uni.navigateTo({ 340 uni.navigateTo({
344 url: '../address/addressList', 341 url: '../address/addressList',
345 success: res => {}, 342 success: res => {},
346 fail: () => {}, 343 fail: () => {},
347 complete: () => {}, 344 complete: () => {},
348 }) 345 })
349 }, 346 },
350 introduce() { 347 introduce() {
351 uni.showModal({ 348 uni.showModal({
352 content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。', 349 content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
353 showCancel: false, 350 showCancel: false,
354 }) 351 })
355 }, 352 },
356 joinUs() { 353 joinUs() {
357 uni.showModal({ 354 uni.showModal({
358 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', 355 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
359 showCancel: false, 356 showCancel: false,
360 }) 357 })
361 }, 358 },
362 toMyOrder(status) { 359 toMyOrder(status) {
363 uni.navigateTo({ 360 uni.navigateTo({
364 url: `../myOrder/myOrder?status=${status}`, 361 url: `../myOrder/myOrder?status=${status}`,
365 success: res => {}, 362 success: res => {},
366 fail: () => {}, 363 fail: () => {},
367 complete: () => {}, 364 complete: () => {},
368 }) 365 })
369 }, 366 },
370 toOpticsData() { 367 toOpticsData() {
371 uni.navigateTo({ 368 uni.navigateTo({
372 url: '../addOpticsData/addOpticsData', 369 url: '../addOpticsData/addOpticsData',
373 }) 370 })
374 }, 371 },
375 }, 372 },
376 } 373 }
377 </script> 374 </script>
378 375
379 <style lang="scss"> 376 <style lang="scss">
380 .warp { 377 .warp {
381 font-size: 24rpx; 378 font-size: 24rpx;
382 background-color: #f2f2f2; 379 background-color: #f2f2f2;
383 height: 100vh; 380 height: 100vh;
384 } 381 }
385 .content { 382 .content {
386 display: flex; 383 display: flex;
387 flex-direction: column; 384 flex-direction: column;
388 align-items: center; 385 align-items: center;
389 justify-content: center; 386 justify-content: center;
390 background-color: #f2f2f2; 387 background-color: #f2f2f2;
391 } 388 }
392 .userInfo { 389 .userInfo {
393 background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%); 390 background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%);
394 width: 100%; 391 width: 100%;
395 height: 240rpx; 392 height: 240rpx;
396 color: #ffffff; 393 color: #ffffff;
397 padding: 60rpx 82rpx 80rpx 44rpx; 394 padding: 60rpx 82rpx 80rpx 44rpx;
398 box-sizing: border-box; 395 box-sizing: border-box;
399 display: flex; 396 display: flex;
400 flex-direction: row; 397 flex-direction: row;
401 justify-content: space-between; 398 justify-content: space-between;
402 align-items: flex-start; 399 align-items: flex-start;
403 .info { 400 .info {
404 display: flex; 401 display: flex;
405 flex-direction: row; 402 flex-direction: row;
406 justify-content: space-between; 403 justify-content: space-between;
407 align-items: center; 404 align-items: center;
408 image { 405 image {
409 border-radius: 50rpx; 406 border-radius: 50rpx;
410 height: 100rpx; 407 height: 100rpx;
411 width: 100rpx; 408 width: 100rpx;
412 margin-right: 40rpx; 409 margin-right: 40rpx;
413 } 410 }
414 .infoText { 411 .infoText {
415 display: flex; 412 display: flex;
416 flex-direction: column; 413 flex-direction: column;
417 justify-content: space-between; 414 justify-content: space-between;
418 align-items: flex-scetart; 415 align-items: flex-scetart;
419 .userName { 416 .userName {
420 font-size: 18px; 417 font-size: 18px;
421 color: #ffffff; 418 color: #ffffff;
422 margin-bottom: 8rpx; 419 margin-bottom: 8rpx;
423 } 420 }
424 .nickName { 421 .nickName {
425 font-size: 12px; 422 font-size: 12px;
426 color: #ffffff; 423 color: #ffffff;
427 } 424 }
428 } 425 }
429 } 426 }
430 // .service { 427 // .service {
431 // margin-top: 20rpx; 428 // margin-top: 20rpx;
432 // image { 429 // image {
433 // height: 36rpx; 430 // height: 36rpx;
434 // width: 36rpx; 431 // width: 36rpx;
435 // } 432 // }
436 // } 433 // }
437 } 434 }
438 .myOpticsData { 435 .myOpticsData {
439 width: 670rpx; 436 width: 670rpx;
440 height: 120rpx; 437 height: 120rpx;
441 background-color: #ffffff; 438 background-color: #ffffff;
442 border-radius: 6px; 439 border-radius: 6px;
443 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); 440 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
444 position: relative; 441 position: relative;
445 bottom: 44rpx; 442 bottom: 44rpx;
446 padding: 40rpx; 443 padding: 40rpx;
447 box-sizing: border-box; 444 box-sizing: border-box;
448 display: flex; 445 display: flex;
449 justify-content: space-between; 446 justify-content: space-between;
450 align-items: center; 447 align-items: center;
451 .left { 448 .left {
452 font-size: 14px; 449 font-size: 14px;
453 color: #333333; 450 color: #333333;
454 display: flex; 451 display: flex;
455 align-items: center; 452 align-items: center;
456 image { 453 image {
457 margin-right: 32rpx; 454 margin-right: 32rpx;
458 width: 40rpx; 455 width: 40rpx;
459 height: 44rpx; 456 height: 44rpx;
460 } 457 }
461 } 458 }
462 image { 459 image {
463 height: 16px; 460 height: 16px;
464 width: 8px; 461 width: 8px;
465 } 462 }
466 } 463 }
467 .myOrder { 464 .myOrder {
468 width: 100%; 465 width: 100%;
469 height: 296rpx; 466 height: 296rpx;
470 // margin-top: 116rpx; 467 // margin-top: 116rpx;
471 margin-bottom: 20rpx; 468 margin-bottom: 20rpx;
472 padding: 0 40rpx; 469 padding: 0 40rpx;
473 box-sizing: border-box; 470 box-sizing: border-box;
474 background: #ffffff; 471 background: #ffffff;
475 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 472 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
476 border-radius: 6px; 473 border-radius: 6px;
477 border-radius: 6px; 474 border-radius: 6px;
478 display: flex; 475 display: flex;
479 flex-direction: column; 476 flex-direction: column;
480 justify-content: space-around; 477 justify-content: space-around;
481 align-items: center; 478 align-items: center;
482 .orderHeader { 479 .orderHeader {
483 width: 100%; 480 width: 100%;
484 height: 100rpx; 481 height: 100rpx;
485 display: flex; 482 display: flex;
486 flex-direction: row; 483 flex-direction: row;
487 justify-content: space-between; 484 justify-content: space-between;
488 align-items: center; 485 align-items: center;
489 border-bottom: 1px solid #f5f5f5; 486 border-bottom: 1px solid #f5f5f5;
490 font-weight: bold; 487 font-weight: bold;
491 font-size: 18px; 488 font-size: 18px;
492 color: #333333; 489 color: #333333;
493 .btn { 490 .btn {
494 font-size: 12px; 491 font-size: 12px;
495 color: #999999; 492 color: #999999;
496 display: flex; 493 display: flex;
497 align-items: center; 494 align-items: center;
498 image { 495 image {
499 margin-left: 20rpx; 496 margin-left: 20rpx;
500 height: 32rpx; 497 height: 32rpx;
501 width: 16rpx; 498 width: 16rpx;
502 } 499 }
503 } 500 }
504 } 501 }
505 .orderBody { 502 .orderBody {
506 width: 100%; 503 width: 100%;
507 display: flex; 504 display: flex;
508 flex-direction: row; 505 flex-direction: row;
509 justify-content: space-around; 506 justify-content: space-around;
510 align-items: center; 507 align-items: center;
511 .item { 508 .item {
512 display: flex; 509 display: flex;
513 flex-direction: column; 510 flex-direction: column;
514 align-items: center; 511 align-items: center;
515 image { 512 image {
516 width: 62rpx; 513 width: 62rpx;
517 height: 46rpx; 514 height: 46rpx;
518 } 515 }
519 text { 516 text {
520 margin-top: 24rpx; 517 margin-top: 24rpx;
521 font-size: 12px; 518 font-size: 12px;
522 color: #333333; 519 color: #333333;
523 } 520 }
524 } 521 }
525 } 522 }
526 } 523 }
527 .someItem { 524 .someItem {
528 width: 100%; 525 width: 100%;
529 height: 336rpx; 526 height: 336rpx;
530 background: #ffffff; 527 background: #ffffff;
531 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 528 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
532 border-radius: 6px; 529 border-radius: 6px;
533 border-radius: 6px; 530 border-radius: 6px;
534 margin-bottom: 18rpx; 531 margin-bottom: 18rpx;
535 box-sizing: border-box; 532 box-sizing: border-box;
536 padding: 21rpx 48rpx 21rpx 42rpx; 533 padding: 21rpx 48rpx 21rpx 42rpx;
537 box-sizing: border-box; 534 box-sizing: border-box;
538 display: flex; 535 display: flex;
539 flex-direction: column; 536 flex-direction: column;
540 justify-content: space-between; 537 justify-content: space-between;
541 align-items: center; 538 align-items: center;
542 .item { 539 .item {
543 display: grid; 540 display: grid;
544 grid-template-columns: 10% 90%; 541 grid-template-columns: 10% 90%;
545 align-items: center; 542 align-items: center;
546 height: 72rpx; 543 height: 72rpx;
547 width: 100%; 544 width: 100%;
548 .left { 545 .left {
549 font-size: 14px; 546 font-size: 14px;
550 color: #333333; 547 color: #333333;
551 display: flex; 548 display: flex;
552 align-items: center; 549 align-items: center;
553 justify-content: space-between; 550 justify-content: space-between;
554 height: 72rpx; 551 height: 72rpx;
555 border-bottom: 1px solid #f2f2f2; 552 border-bottom: 1px solid #f2f2f2;
556 image { 553 image {
557 margin-right: 0; 554 margin-right: 0;
558 height: 16px; 555 height: 16px;
559 width: 8px; 556 width: 8px;
560 } 557 }
561 } 558 }
562 image { 559 image {
563 margin-right: 32rpx; 560 margin-right: 32rpx;
564 width: 40rpx; 561 width: 40rpx;
565 height: 44rpx; 562 height: 44rpx;
566 } 563 }
567 .lastLeft { 564 .lastLeft {
568 border-bottom: none; 565 border-bottom: none;
569 } 566 }
570 } 567 }
571 } 568 }
572 .recommend { 569 .recommend {
573 background: #ffffff; 570 background: #ffffff;
574 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 571 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
575 border-radius: 6px; 572 border-radius: 6px;
576 border-radius: 6px; 573 border-radius: 6px;
577 width: 100%; 574 width: 100%;
578 .title { 575 .title {
579 display: flex; 576 display: flex;
580 flex-direction: row; 577 flex-direction: row;
581 align-items: center; 578 align-items: center;
582 justify-content: space-between; 579 justify-content: space-between;
583 padding: 20rpx 40rpx; 580 padding: 20rpx 40rpx;
584 .line { 581 .line {
585 width: 264rpx; 582 width: 264rpx;
586 height: 1rpx; 583 height: 1rpx;
587 border-bottom: 1px solid #eaeaea; 584 border-bottom: 1px solid #eaeaea;
588 } 585 }
589 .text { 586 .text {
590 font-family: PingFangSC-Medium; 587 font-family: PingFangSC-Medium;
591 font-size: 14px; 588 font-size: 14px;
592 color: #333333; 589 color: #333333;
593 letter-spacing: -0.26px; 590 letter-spacing: -0.26px;
594 text-align: justify; 591 text-align: justify;
595 line-height: 24px; 592 line-height: 24px;
596 } 593 }
597 } 594 }
598 .goods-list { 595 .goods-list {
599 .loading-text { 596 .loading-text {
600 width: 100%; 597 width: 100%;
601 display: flex; 598 display: flex;
602 justify-content: center; 599 justify-content: center;
603 align-items: center; 600 align-items: center;
604 height: 30px; 601 height: 30px;
605 color: #979797; 602 color: #979797;
606 font-size: 12px; 603 font-size: 12px;
607 } 604 }
608 .product-list { 605 .product-list {
609 width: 92%; 606 width: 92%;
610 padding: 0 4% 3vw 4%; 607 padding: 0 4% 3vw 4%;
611 display: flex; 608 display: flex;
612 justify-content: space-between; 609 justify-content: space-between;
613 flex-wrap: wrap; 610 flex-wrap: wrap;
614 .product { 611 .product {
615 width: 48%; 612 width: 48%;
616 margin: 0 0 20rpx 0; 613 margin: 0 0 20rpx 0;
617 background: #ffffff; 614 background: #ffffff;
618 border: 1px solid #f2f2f2; 615 border: 1px solid #f2f2f2;
619 } 616 }
620 } 617 }
621 } 618 }
622 } 619 }
623 .auth { 620 .auth {
624 height: 100vh; 621 height: 100vh;
625 display: flex; 622 display: flex;
626 flex-direction: column; 623 flex-direction: column;
627 align-items: center; 624 align-items: center;
628 .icon { 625 .icon {
629 width: 140rpx; 626 width: 140rpx;
630 height: 140rpx; 627 height: 140rpx;
631 border-radius: 50%; 628 border-radius: 50%;
632 margin-top: 100rpx; 629 margin-top: 100rpx;
633 background-color: grey; 630 background-color: grey;
634 } 631 }
635 .divider { 632 .divider {
636 height: 1rpx; 633 height: 1rpx;
637 width: 600rpx; 634 width: 600rpx;
638 margin-top: 80rpx; 635 margin-top: 80rpx;
639 background-color: #e6e3e3; 636 background-color: #e6e3e3;
640 } 637 }
641 .title { 638 .title {
642 width: 600rpx; 639 width: 600rpx;
643 margin-top: 50rpx; 640 margin-top: 50rpx;
644 text-align: left; 641 text-align: left;
645 } 642 }
646 .text { 643 .text {
647 width: 600rpx; 644 width: 600rpx;
648 margin-top: 30rpx; 645 margin-top: 30rpx;
649 text-align: left; 646 text-align: left;
650 color: #e6e3e3; 647 color: #e6e3e3;
651 } 648 }
652 button { 649 button {
653 width: 450rpx; 650 width: 450rpx;
654 height: 80rpx; 651 height: 80rpx;
655 line-height: 80rpx; 652 line-height: 80rpx;
656 margin-top: 80rpx; 653 margin-top: 80rpx;
657 border-radius: 30rpx; 654 border-radius: 30rpx;
658 } 655 }
659 } 656 }
660 .closeBtn { 657 .closeBtn {
661 height: 28rpx; 658 height: 28rpx;
662 width: 28rpx; 659 width: 28rpx;
663 // border: 1px solid red; 660 // border: 1px solid red;
664 position: absolute; 661 position: absolute;
665 top: 20rpx; 662 top: 20rpx;
666 right: 10rpx; 663 right: 10rpx;
667 } 664 }
668 </style> 665 </style>
669 666
src/store/modules/cancelOrder.js
Diff comments   View file @e92e93f
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 cancelOrder 5 cancelOrder
6 } = urlAlias; 6 } = urlAlias;
7 7
8 const state = {
9 orderList: [],
10 };
11
12 const mutations = {
13 INIT: (state, data) => {
14 state.orderList = data;
15 },
16 };
17
18 const actions = { 8 const actions = {
19 cancel({ commit }, param) { 9 cancel({ commit }, param) {
20 request({ 10 return new Promise((resolve)=>
21 url: cancelOrder, 11 request({
22 data: param, 12 url: cancelOrder,
23 success: (res) => { 13 data: param,
24 console.log(res.data); 14 success: (res) => {
25 // commit("INIT", res.data.data); 15 // console.log(res.data);
26 }, 16 resolve(res.data)
27 }) 17 },
18 }) )
28 } 19 }
29 } 20 }
30 21
31 export default { 22 export default {
32 namespaced: true, 23 namespaced: true,
33 state,
34 mutations,
35 actions, 24 actions,
src/store/modules/orderRead.js
Diff comments   View file @e92e93f
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { 4 const {
5 orderRead 5 orderRead
6 } = urlAlias 6 } = urlAlias
7 7
8 const state = { 8 const state = {
9 orderInfo: {} 9 orderInfo: {}
10 } 10 }
11 11
12 const mutations = { 12 const mutations = {
13 INIT: (state, orderInfo) => { 13 INIT: (state, orderInfo) => {
14 state.orderInfo = orderInfo 14 state.orderInfo = orderInfo
15 } 15 }
16 } 16 }
17 17
18 const actions = { 18 const actions = {
19 getOrderInfo({ commit }, param) { 19 getOrderInfo({ commit }, param) {
20 return new Promise ((resolve) => request({ 20 return new Promise ((resolve) => request({
21 url: orderRead, 21 url: orderRead,
22 data: param, 22 data: param,
23 success: (res) => { 23 success: (res) => {
24 console.log(res)
24 commit("INIT", res.data.data) 25 commit("INIT", res.data.data)
25 resolve(res.data.data) 26 resolve(res.data.data)
26 } 27 }
27 })) 28 }))
28 } 29 }
29 } 30 }
30 31
31 export default { 32 export default {
32 namespaced: true, 33 namespaced: true,
33 state, 34 state,
34 mutations, 35 mutations,
35 actions 36 actions
36 } 37 }
37 38