刘文博 / gulu-vue

Download as
Browse Code »

Commit 4cafd66026209bfd525de81d44899bb5214ac711

Authored by 尹聃
2 parents 637a02b079 f555383d95
Exists in master

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

Showing 7 changed files   Show diff stats
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path": "pages/index/index", 4 "path": "pages/index/index",
5 "style": { 5 "style": {
6 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path": "pages/user/user", 10 "path": "pages/user/user",
11 "style": { 11 "style": {
12 "navigationBarTitleText": "我的" 12 "navigationBarTitleText": "我的"
13 } 13 }
14 }, 14 },
15 { 15 {
16 "path": "pages/addOpticsData/addOpticsData", 16 "path": "pages/addOpticsData/addOpticsData",
17 "style": { 17 "style": {
18 "navigationBarTitleText": "验光数据" 18 "navigationBarTitleText": "验光数据"
19 } 19 }
20 }, 20 },
21 { 21 {
22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs", 22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
23 "style": { 23 "style": {
24 "navigationBarTitleText": "镜片名称名称" 24 "navigationBarTitleText": "镜片名称名称"
25 } 25 }
26 }, 26 },
27 { 27 {
28 "path": "pages/purchaseLenses/purchaseLenses", 28 "path": "pages/purchaseLenses/purchaseLenses",
29 "style": { 29 "style": {
30 "navigationBarTitleText": "产品选购" 30 "navigationBarTitleText": "参数选择"
31 } 31 }
32 }, 32 },
33 { 33 {
34 "path": "pages/lensDetails/lensDetails", 34 "path": "pages/lensDetails/lensDetails",
35 "style": { 35 "style": {
36 "navigationBarTitleText": "产品详情" 36 "navigationBarTitleText": "产品详情"
37 } 37 }
38 }, 38 },
39 { 39 {
40 "path": "pages/myOrderPaying/myOrderPaying", 40 "path": "pages/myOrderPaying/myOrderPaying",
41 "style": { 41 "style": {
42 "navigationBarTitleText": "我的订单" 42 "navigationBarTitleText": "我的订单"
43 } 43 }
44 }, 44 },
45 { 45 {
46 "path": "pages/myOrder/myOrder", 46 "path": "pages/myOrder/myOrder",
47 "style": { 47 "style": {
48 "navigationBarTitleText": "我的订单" 48 "navigationBarTitleText": "我的订单"
49 } 49 }
50 }, 50 },
51 { 51 {
52 "path": "pages/cart/cart", 52 "path": "pages/cart/cart",
53 "style": { 53 "style": {
54 "navigationBarTitleText": "购物车" 54 "navigationBarTitleText": "购物车"
55 } 55 }
56 }, 56 },
57 { 57 {
58 "path": "pages/frameDetail/frameDetail", 58 "path": "pages/frameDetail/frameDetail",
59 "style": { 59 "style": {
60 "navigationBarTitleText": "产品详情" 60 "navigationBarTitleText": "产品详情"
61 } 61 }
62 }, 62 },
63 { 63 {
64 "path": "pages/refundProgress/refundProgress", 64 "path": "pages/refundProgress/refundProgress",
65 "style": { 65 "style": {
66 "navigationBarTitleText": "申请退款" 66 "navigationBarTitleText": "申请退款"
67 } 67 }
68 }, 68 },
69 { 69 {
70 "path": "pages/address/addAddress", 70 "path": "pages/address/addAddress",
71 "style": { 71 "style": {
72 "navigationBarTitleText": "新增地址" 72 "navigationBarTitleText": "新增地址"
73 } 73 }
74 }, 74 },
75 { 75 {
76 "path": "pages/address/addressList", 76 "path": "pages/address/addressList",
77 "style": { 77 "style": {
78 "navigationBarTitleText": "地址管理" 78 "navigationBarTitleText": "地址管理"
79 } 79 }
80 }, 80 },
81 { 81 {
82 "path": "pages/confirmOrder/confirmOrder", 82 "path": "pages/confirmOrder/confirmOrder",
83 "style": { 83 "style": {
84 "navigationBarTitleText": "确认订单" 84 "navigationBarTitleText": "确认订单"
85 } 85 }
86 }, 86 },
87 { 87 {
88 "path": "pages/refundment/refundWays", 88 "path": "pages/refundment/refundWays",
89 "style": { 89 "style": {
90 "navigationBarTitleText": "退款方式" 90 "navigationBarTitleText": "退款方式"
91 } 91 }
92 }, 92 },
93 { 93 {
94 "path": "pages/refundment/refundment", 94 "path": "pages/refundment/refundment",
95 "style": { 95 "style": {
96 "navigationBarTitleText": "申请退款" 96 "navigationBarTitleText": "申请退款"
97 } 97 }
98 }, 98 },
99 { 99 {
100 "path": "pages/predelivery/predelivery", 100 "path": "pages/predelivery/predelivery",
101 "style": { 101 "style": {
102 "navigationBarTitleText": "待发货" 102 "navigationBarTitleText": "待发货"
103 } 103 }
104 }, 104 },
105 { 105 {
106 "path": "pages/customerService/customerService", 106 "path": "pages/customerService/customerService",
107 "style": { 107 "style": {
108 "navigationBarTitleText": "在线客服" 108 "navigationBarTitleText": "在线客服"
109 } 109 }
110 }, 110 },
111 { 111 {
112 "path": "pages/detailStandard/detailStandard_sun", 112 "path": "pages/detailStandard/detailStandard_sun",
113 "style": { 113 "style": {
114 "navigationBarTitleText": "太阳镜选购页" 114 "navigationBarTitleText": "太阳镜选购页"
115 } 115 }
116 }, 116 },
117 { 117 {
118 "path": "pages/detailStandard/detailStandard_k", 118 "path": "pages/detailStandard/detailStandard_k",
119 "style": { 119 "style": {
120 "navigationBarTitleText": "镜框选购页" 120 "navigationBarTitleText": "镜框选购页"
121 } 121 }
122 }, 122 },
123 { 123 {
124 "path": "pages/newOpticsData/newOpticsData", 124 "path": "pages/newOpticsData/newOpticsData",
125 "style": { 125 "style": {
126 "navigationBarTitleText": "验光数据" 126 "navigationBarTitleText": "验光数据"
127 } 127 }
128 } 128 }
129 ], 129 ],
130 "globalStyle": { 130 "globalStyle": {
131 "navigationBarTextStyle": "black", 131 "navigationBarTextStyle": "black",
132 "navigationBarTitleText": "uni-app", 132 "navigationBarTitleText": "uni-app",
133 "navigationBarBackgroundColor": "#F8F8F8", 133 "navigationBarBackgroundColor": "#F8F8F8",
134 "backgroundColor": "#F8F8F8" 134 "backgroundColor": "#F8F8F8"
135 }, 135 },
136 "tabBar": { 136 "tabBar": {
137 "color": "#C0C4CC", 137 "color": "#C0C4CC",
138 "selectedColor": "#fa436a", 138 "selectedColor": "#fa436a",
139 "borderStyle": "black", 139 "borderStyle": "black",
140 "backgroundColor": "#ffffff", 140 "backgroundColor": "#ffffff",
141 "list": [ 141 "list": [
142 { 142 {
143 "pagePath": "pages/index/index", 143 "pagePath": "pages/index/index",
144 "iconPath": "static/tab-home.png", 144 "iconPath": "static/tab-home.png",
145 "selectedIconPath": "static/tab-home-current.png", 145 "selectedIconPath": "static/tab-home-current.png",
146 "text": "首页" 146 "text": "首页"
147 }, 147 },
148 { 148 {
149 "pagePath": "pages/cart/cart", 149 "pagePath": "pages/cart/cart",
150 "iconPath": "static/tab-cart.png", 150 "iconPath": "static/tab-cart.png",
151 "selectedIconPath": "static/tab-cart-current.png", 151 "selectedIconPath": "static/tab-cart-current.png",
152 "text": "购物车" 152 "text": "购物车"
153 }, 153 },
154 { 154 {
155 "pagePath": "pages/user/user", 155 "pagePath": "pages/user/user",
156 "iconPath": "static/tab-my.png", 156 "iconPath": "static/tab-my.png",
157 "selectedIconPath": "static/tab-my-current.png", 157 "selectedIconPath": "static/tab-my-current.png",
158 "text": "我的" 158 "text": "我的"
159 } 159 }
160 ] 160 ]
161 }, 161 },
162 "condition": { 162 "condition": {
163 "current": 0, 163 "current": 0,
164 "list": [ 164 "list": [
165 { 165 {
166 "name": "首页", 166 "name": "首页",
167 "path": "pages/index/index", 167 "path": "pages/index/index",
168 "query": "" 168 "query": ""
169 }, 169 },
170 { 170 {
171 "name": "产品详情", 171 "name": "产品详情",
172 "path": "pages/frameDetail/frameDetail", 172 "path": "pages/frameDetail/frameDetail",
173 "query": "" 173 "query": ""
174 }, 174 },
175 { 175 {
176 "name": "镜片、美瞳参数选择", 176 "name": "镜片、美瞳参数选择",
177 "path": "pages/purchaseLenses/purchaseLenses", 177 "path": "pages/purchaseLenses/purchaseLenses",
178 "query": "" 178 "query": ""
179 }, 179 },
180 { 180 {
181 "name": "确认订单", 181 "name": "确认订单",
182 "path": "pages/confirmOrder/confirmOrder", 182 "path": "pages/confirmOrder/confirmOrder",
183 "query": "" 183 "query": ""
184 }, 184 },
185 { 185 {
186 "name": "新增地址", 186 "name": "新增地址",
187 "path": "pages/address/addAddress", 187 "path": "pages/address/addAddress",
188 "query": "" 188 "query": ""
189 }, 189 },
190 { 190 {
191 "name": "地址管理", 191 "name": "地址管理",
192 "path": "pages/address/addressList", 192 "path": "pages/address/addressList",
193 "query": "" 193 "query": ""
194 }, 194 },
195 { 195 {
196 "name": "我的订单", 196 "name": "我的订单",
197 "path": "pages/myOrder/myOrder", 197 "path": "pages/myOrder/myOrder",
198 "query": "" 198 "query": ""
199 }, 199 },
200 { 200 {
201 "name": "待付款订单详情", 201 "name": "待付款订单详情",
202 "path": "pages/myOrderPaying/myOrderPaying", 202 "path": "pages/myOrderPaying/myOrderPaying",
203 "query": "" 203 "query": ""
204 }, 204 },
205 { 205 {
206 "name": "我的", 206 "name": "我的",
207 "path": "pages/user/user", 207 "path": "pages/user/user",
208 "query": "" 208 "query": ""
209 } 209 }
210 ] 210 ]
211 } 211 }
212 } 212 }
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @4cafd66
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.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text> 37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\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 ></image> 42 ></image>
43 </view> 43 </view>
44 <view class="content"> 44 <view class="content">
45 <view class="orderInfo"> 45 <view class="orderInfo">
46 <view class="title"> 46 <view class="title">
47 <image 47 <image
48 src="../../static/store.png" 48 src="../../static/store.png"
49 mode="aspectFill" 49 mode="aspectFill"
50 style="width: 40rpx;height: 40rpx;" 50 style="width: 40rpx;height: 40rpx;"
51 ></image> 51 ></image>
52 <text>非常戴镜</text> 52 <text>非常戴镜</text>
53 </view> 53 </view>
54 <view class="infoBox"> 54 <view class="infoBox">
55 <view class="infoTop"> 55 <view class="infoTop">
56 <image 56 <image
57 :src="goodInfo.img_index_url" 57 :src="goodInfo.img_index_url"
58 mode="aspectFill" 58 mode="aspectFill"
59 ></image> 59 ></image>
60 <view class="infoRight"> 60 <view class="infoRight">
61 <text class="goodName">商品名称商品名称商品名称名称名称</text> 61 <text class="goodName">商品名称商品名称商品名称名称名称</text>
62 <text class="remarks">支持7天无理由退货 顺丰发货</text> 62 <text class="remarks">支持7天无理由退货 顺丰发货</text>
63 <view class="priceBox"> 63 <view class="priceBox">
64 <view class="price">￥198</view> 64 <view class="price">￥198</view>
65 <view class="counter"> 65 <view class="counter">
66 <view 66 <view
67 class="btn" 67 class="btn"
68 disabled="this.disabled" 68 disabled="this.disabled"
69 type="default" 69 type="default"
70 @click="counter(false)" 70 @click="counter(false)"
71 >-</view> 71 >-</view>
72 <text>{{count}}</text> 72 <text>{{count}}</text>
73 <view 73 <view
74 class="btn" 74 class="btn"
75 type="default" 75 type="default"
76 @click="counter(true)" 76 @click="counter(true)"
77 >+</view> 77 >+</view>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 </view> 81 </view>
82 <view class="infoBottom"> 82 <view class="infoBottom">
83 <view class="norm">规格 <text>玫瑰金/钛合金</text></view> 83 <view class="norm">规格 <text>玫瑰金/钛合金</text></view>
84 <view class="shippingMethod">配送方式 <text>快递</text></view> 84 <view class="shippingMethod">配送方式 <text>快递</text></view>
85 <view class="message">买家留言 85 <view class="message">买家留言
86 <input 86 <input
87 type="text" 87 type="text"
88 :value="note" 88 :value="note"
89 placeholder="建议提前协商(50字以内)" 89 placeholder="建议提前协商(50字以内)"
90 /> 90 />
91 </view> 91 </view>
92 </view> 92 </view>
93 </view> 93 </view>
94 </view> 94 </view>
95 <view class="payWay"> 95 <view class="payWay">
96 <view class="item"> 96 <view class="item">
97 <text>支付方式</text> 97 <text>支付方式</text>
98 <view class="itemRight"> 98 <view class="itemRight">
99 <view class="rightText"> 99 <view class="rightText">
100 <view class="choosePayWay"> 100 <view class="choosePayWay">
101 <image 101 <image
102 src="../../static/store.png" 102 src="../../static/store.png"
103 mode="aspectFill" 103 mode="aspectFill"
104 ></image> 104 ></image>
105 <text>微信支付</text> 105 <text>微信支付</text>
106 </view> 106 </view>
107 <view class="randomSubstraction">最高随机立减￥99</view> 107 <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
108 </view> 108 </view>
109 <image 109 <!-- <image
110 src="../../static/right.png" 110 src="../../static/right.png"
111 mode="aspectFill" 111 mode="aspectFill"
112 ></image> 112 ></image> -->
113 </view> 113 </view>
114 </view> 114 </view>
115 <view class="item"> 115 <!-- <view class="item">
116 <text>优惠券</text> 116 <text>优惠券</text>
117 <view class="itemRight"> 117 <view class="itemRight">
118 <view class="rightText"> 118 <view class="rightText">
119 <view class="chooseOffers"> 119 <view class="chooseOffers">
120 <text>-￥70.00</text> 120 <text>-￥70.00</text>
121 </view> 121 </view>
122 <view class="preferentialWay">最大优惠</view> 122 <view class="preferentialWay">最大优惠</view>
123 </view> 123 </view>
124 <image 124 <image
125 src="../../static/right.png" 125 src="../../static/right.png"
126 mode="aspectFill" 126 mode="aspectFill"
127 ></image> 127 ></image>
128 </view> 128 </view>
129 </view> 129 </view> -->
130 <view class="item"> 130 <view class="item">
131 <text>运费</text> 131 <text>运费</text>
132 <view class="itemRight"> 132 <view class="itemRight">
133 <view class="freight">￥{{freight}}</view> 133 <view class="freight">免运费</view>
134 </view> 134 </view>
135 </view> 135 </view>
136 <view class="item"> 136 <view class="item">
137 <text>合计</text> 137 <text>合计</text>
138 <view class="itemRight"> 138 <view class="itemRight">
139 <view class="total">￥{{total}}</view> 139 <view class="total">￥{{total}}</view>
140 </view> 140 </view>
141 </view> 141 </view>
142 </view> 142 </view>
143 <!-- 143 <!--
144 <view class="checkBox"> 144 <view class="checkBox">
145 <checkbox-group> 145 <checkbox-group>
146 <label> 146 <label>
147 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 147 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
148 </label> 148 </label>
149 </checkbox-group> 149 </checkbox-group>
150 </view> --> 150 </view> -->
151 </view> 151 </view>
152 <view class="footer"> 152 <view class="footer">
153 <view class="footerLeft">实付金额:<text>￥{{total}}</text></view> 153 <view class="footerLeft">实付金额:<text>￥{{total}}</text></view>
154 <view class="footerRight"> 154 <view class="footerRight">
155 <view 155 <view
156 class="paybtn" 156 class="paybtn"
157 @tap="orderBuild" 157 @tap="orderBuild"
158 >立即支付</view> 158 >立即支付</view>
159 </view> 159 </view>
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 addAddress: '添加收货地址', 170 addAddress: '添加收货地址',
171 count: 1, 171 count: 1,
172 pid: 0, 172 pid: 0,
173 disabled: false, 173 disabled: false,
174 total: 120, 174 total: 120,
175 freight: 0.00, 175 freight: 0.00,
176 showAddress: false, 176 showAddress: false,
177 note: '', 177 note: '',
178 addressInfo: { 178 addressInfo: {
179 address: '' 179 address: ''
180 } 180 }
181 // isAnonymous: 181 // isAnonymous:
182 } 182 }
183 }, 183 },
184 onLoad({ pid, addressId }) { 184 onLoad({ pid, addressId }) {
185 this.pid = pid 185 this.pid = pid
186 // 若已经选择地址 186 // 若已经选择地址
187 if (addressId) { 187 if (addressId) {
188 store.dispatch('address/details', { 188 store.dispatch('address/details', {
189 add_id: addressId 189 add_id: addressId
190 }).then(({ code, data }) => { 190 }).then(({ code, data }) => {
191 if (code === 1) { 191 if (code === 1) {
192 console.log('code', code, data) 192 console.log('code', code, data)
193 this.showAddress = true 193 this.showAddress = true
194 this.addressInfo = data 194 this.addressInfo = data
195 } 195 }
196 }) 196 })
197 } else { 197 } else {
198 store.dispatch('address/default').then(({ code, data }) => { 198 store.dispatch('address/default').then(({ code, data }) => {
199 if (code === 1) { 199 if (code === 1) {
200 console.log('code', code, data) 200 console.log('code', code, data)
201 this.showAddress = true 201 this.showAddress = true
202 this.addressInfo = data 202 this.addressInfo = data
203 } 203 }
204 }) 204 })
205 } 205 }
206 store.dispatch('read/fetch', { 206 store.dispatch('read/fetch', {
207 pid 207 pid
208 }) 208 })
209 }, 209 },
210 computed: { 210 computed: {
211 goodInfo () { 211 goodInfo () {
212 console.log(this.$store.state.read.goodInfo) 212 console.log(this.$store.state.read.goodInfo)
213 return this.$store.state.read.goodInfo 213 return this.$store.state.read.goodInfo
214 } 214 }
215 }, 215 },
216 methods: { 216 methods: {
217 counter(isadd) { 217 counter(isadd) {
218 if (isadd) { 218 if (isadd) {
219 this.count++ 219 this.count++
220 } else { 220 } else {
221 this.count <= 1 ? this.disabled = true : this.count-- 221 this.count <= 1 ? this.disabled = true : this.count--
222 } 222 }
223 }, 223 },
224 toaddAddress() { 224 toaddAddress() {
225 uni.navigateTo({ 225 uni.navigateTo({
226 url: `../address/addressList?edit=${1}`, 226 url: `../address/addressList?edit=${1}`,
227 success: res => {}, 227 success: res => {},
228 fail: (error) => { console.log('跳转到地址列表页面失败====>', error) }, 228 fail: (error) => { console.log('跳转到地址列表页面失败====>', error) },
229 complete: () => {} 229 complete: () => {}
230 }) 230 })
231 }, 231 },
232 // 加入购物车
233 addCart() {
234 console.log('this', this.$store.state)
235 store.dispatch('cart/')
236 },
237 // 下单
232 orderBuild() { 238 orderBuild() {
233 console.log('this', this.$store.state) 239 console.log('this', this.$store.state)
234 // store.dispatch('order/build', { 240 // store.dispatch('order/build', {
235 // address: this.addressInfo, 241 // address: this.addressInfo,
236 // checkedGoods: [], 242 // checkedGoods: [],
237 // sk_id_arr: [], 243 // sk_id_arr: [],
238 // totalPrice: 101 244 // totalPrice: 101
239 // }) 245 // })
240 } 246 }
247 // 支付
241 // pay() { 248 // pay() {
242 // const openId = uni.getStorageSync('openid') 249 // const openId = uni.getStorageSync('openid')
243 // const fieldSet = { 250 // const fieldSet = {
244 // 'openid': this.$store.state.user.userInfo.openid, 251 // 'openid': this.$store.state.user.userInfo.openid,
245 // 'uid': this.$store.state.user.userInfo.uid, 252 // 'uid': this.$store.state.user.userInfo.uid,
246 // 'shopid': 0, 253 // 'shopid': 0,
247 // 'payCate': 2020, 254 // 'payCate': 2020,
248 // 'payMoney': , 255 // 'payMoney': ,
249 // '' 256 // ''
250 // } 257 // }
251 // } 258 // }
252 } 259 }
253 } 260 }
254 </script> 261 </script>
255 262
256 <style lang="scss"> 263 <style lang="scss">
257 .wrap { 264 .wrap {
258 height: 100vh; 265 height: 100vh;
259 background-color: #f2f2f2; 266 background-color: #f2f2f2;
260 font-family: PingFangSC-Regular; 267 font-family: PingFangSC-Regular;
261 letter-spacing: -0.23px; 268 letter-spacing: -0.23px;
262 position: absolute; 269 position: absolute;
263 } 270 }
264 .addAddress { 271 .addAddress {
265 background-color: #ffffff; 272 background-color: #ffffff;
266 box-sizing: border-box; 273 box-sizing: border-box;
267 height: 124rpx; 274 height: 124rpx;
268 width: 100%; 275 width: 100%;
269 display: flex; 276 display: flex;
270 align-items: center; 277 align-items: center;
271 padding: 0 40rpx; 278 padding: 0 40rpx;
272 .addIcon { 279 .addIcon {
273 background-color: #f2f2f2; 280 background-color: #f2f2f2;
274 height: 56rpx; 281 height: 56rpx;
275 width: 60rpx; 282 width: 60rpx;
276 border-radius: 4rpx; 283 border-radius: 4rpx;
277 display: flex; 284 display: flex;
278 justify-content: center; 285 justify-content: center;
279 align-items: center; 286 align-items: center;
280 margin-right: 40rpx; 287 margin-right: 40rpx;
281 } 288 }
282 image { 289 image {
283 height: 28rpx; 290 height: 28rpx;
284 width: 28rpx; 291 width: 28rpx;
285 } 292 }
286 .addressText { 293 .addressText {
287 font-size: 28rpx; 294 font-size: 28rpx;
288 color: #333333; 295 color: #333333;
289 margin-right: 364rpx; 296 margin-right: 364rpx;
290 } 297 }
291 } 298 }
292 .content { 299 .content {
293 background-color: #f2f2f2; 300 background-color: #f2f2f2;
294 width: 100%; 301 width: 100%;
295 display: flex; 302 display: flex;
296 flex-direction: column; 303 flex-direction: column;
297 justify-content: center; 304 justify-content: center;
298 align-items: center; 305 align-items: center;
299 padding: 40rpx; 306 padding: 40rpx;
300 box-sizing: border-box; 307 box-sizing: border-box;
301 .orderInfo { 308 .orderInfo {
302 width: 670rpx; 309 width: 670rpx;
303 height: 488rpx; 310 height: 488rpx;
304 background-color: #ffffff; 311 background-color: #ffffff;
305 border-radius: 20rpx; 312 border-radius: 20rpx;
306 box-sizing: border-box; 313 box-sizing: border-box;
307 padding: 0 40rpx 40rpx 40rpx; 314 padding: 0 40rpx 40rpx 40rpx;
308 .title { 315 .title {
309 display: flex; 316 display: flex;
310 align-items: center; 317 align-items: center;
311 font-size: 28rpx; 318 font-size: 28rpx;
312 color: #333333; 319 color: #333333;
313 height: 60rpx; 320 height: 60rpx;
314 line-height: 40rpx; 321 line-height: 40rpx;
315 padding: 10rpx 10rpx 10rpx 0rpx; 322 padding: 10rpx 10rpx 10rpx 0rpx;
316 image { 323 image {
317 margin-right: 20rpx; 324 margin-right: 20rpx;
318 } 325 }
319 } 326 }
320 .infoBox { 327 .infoBox {
321 margin-top: 42rpx; 328 margin-top: 42rpx;
322 .infoTop { 329 .infoTop {
323 display: flex; 330 display: flex;
324 flex-direction: row; 331 flex-direction: row;
325 image { 332 image {
326 height: 188rpx; 333 height: 188rpx;
327 width: 188rpx; 334 width: 188rpx;
328 margin-right: 24rpx; 335 margin-right: 24rpx;
329 } 336 }
330 .infoRight { 337 .infoRight {
331 width: 374rpx; 338 width: 374rpx;
332 display: flex; 339 display: flex;
333 flex-direction: column; 340 flex-direction: column;
334 align-items: flex-start; 341 align-items: flex-start;
335 justify-content: space-between; 342 justify-content: space-between;
336 .goodName { 343 .goodName {
337 font-size: 28rpx; 344 font-size: 28rpx;
338 color: #333333; 345 color: #333333;
339 } 346 }
340 .remarks { 347 .remarks {
341 font-size: 20rpx; 348 font-size: 20rpx;
342 color: #999999; 349 color: #999999;
343 } 350 }
344 .priceBox { 351 .priceBox {
345 display: flex; 352 display: flex;
346 justify-content: space-between; 353 justify-content: space-between;
347 align-items: center; 354 align-items: center;
348 width: 100%; 355 width: 100%;
349 .price { 356 .price {
350 color: #ff6b4a; 357 color: #ff6b4a;
351 font-size: 28rpx; 358 font-size: 28rpx;
352 } 359 }
353 .counter { 360 .counter {
354 display: flex; 361 display: flex;
355 flex-direction: row; 362 flex-direction: row;
356 justify-content: space-between; 363 justify-content: space-between;
357 font-size: 28rpx; 364 font-size: 28rpx;
358 color: #333333; 365 color: #333333;
359 width: 122rpx; 366 width: 122rpx;
360 .btn { 367 .btn {
361 display: flex; 368 display: flex;
362 justify-content: center; 369 justify-content: center;
363 line-height: 32rpx; 370 line-height: 32rpx;
364 height: 32rpx; 371 height: 32rpx;
365 width: 32rpx; 372 width: 32rpx;
366 background-color: #f2f2f2; 373 background-color: #f2f2f2;
367 color: #cfcfcf; 374 color: #cfcfcf;
368 } 375 }
369 } 376 }
370 } 377 }
371 } 378 }
372 } 379 }
373 .infoBottom { 380 .infoBottom {
374 display: flex; 381 display: flex;
375 flex-direction: column; 382 flex-direction: column;
376 justify-content: flex-start; 383 justify-content: flex-start;
377 font-size: 24rpx; 384 font-size: 24rpx;
378 color: #333333; 385 color: #333333;
379 text { 386 text {
380 color: #999999; 387 color: #999999;
381 margin-left: 20rpx; 388 margin-left: 20rpx;
382 } 389 }
383 390
384 .norm { 391 .norm {
385 margin-top: 28rpx; 392 margin-top: 28rpx;
386 } 393 }
387 .shippingMethod { 394 .shippingMethod {
388 margin-top: 12rpx; 395 margin-top: 12rpx;
389 } 396 }
390 .message { 397 .message {
391 display: flex; 398 display: flex;
392 flex-direction: row; 399 flex-direction: row;
393 align-items: center; 400 align-items: center;
394 margin-top: 18rpx; 401 margin-top: 18rpx;
395 input { 402 input {
396 margin-left: 20rpx; 403 margin-left: 20rpx;
397 width: 75%; 404 width: 75%;
398 } 405 }
399 } 406 }
400 } 407 }
401 } 408 }
402 } 409 }
403 .payWay { 410 .payWay {
404 height: 464rpx; 411 height: 464rpx;
405 width: 670rpx; 412 width: 670rpx;
406 background-color: #ffffff; 413 background-color: #ffffff;
407 color: #333333; 414 color: #333333;
408 font-size: 24rpx; 415 font-size: 24rpx;
409 border-radius: 20rpx; 416 border-radius: 20rpx;
410 box-sizing: border-box; 417 box-sizing: border-box;
411 padding: 0 52rpx 0rpx 40rpx; 418 padding: 0 52rpx 0rpx 40rpx;
412 margin-top: 20rpx; 419 margin-top: 20rpx;
413 display: flex; 420 display: flex;
414 flex-direction: column; 421 flex-direction: column;
415 justify-content: center; 422 justify-content: center;
416 align-items: flex-start; 423 align-items: flex-start;
417 .item { 424 .item {
418 display: flex; 425 display: flex;
419 flex-direction: row; 426 flex-direction: row;
420 justify-content: space-between; 427 justify-content: space-between;
421 align-items: center; 428 align-items: center;
422 width: 100%; 429 width: 100%;
423 height: 115rpx; 430 height: 115rpx;
424 .itemRight { 431 .itemRight {
425 display: flex; 432 display: flex;
426 flex-direction: row; 433 flex-direction: row;
427 justify-content: space-between; 434 justify-content: space-between;
428 align-items: center; 435 align-items: center;
429 image { 436 image {
430 height: 24rpx; 437 height: 24rpx;
431 width: 12rpx; 438 width: 12rpx;
432 } 439 }
433 .rightText { 440 .rightText {
434 margin-right: 20rpx; 441 margin-right: 20rpx;
435 text-align: right; 442 text-align: right;
436 .choosePayWay { 443 .choosePayWay {
437 text { 444 text {
438 color: #333333; 445 color: #333333;
439 } 446 }
440 image { 447 image {
441 height: 26rpx; 448 height: 26rpx;
442 width: 30rpx; 449 width: 30rpx;
443 margin-right: 20px; 450 margin-right: 20px;
444 } 451 }
445 } 452 }
446 .randomSubstraction { 453 .randomSubstraction {
447 color: #ff6b4a; 454 color: #ff6b4a;
448 } 455 }
449 .preferentialWay { 456 .preferentialWay {
450 color: #999999; 457 color: #999999;
451 } 458 }
452 } 459 }
453 .freight, 460 .freight,
454 .total { 461 .total {
455 margin-right: 32rpx; 462 margin-right: 32rpx;
456 } 463 }
457 text { 464 text {
458 color: #ff6b4a; 465 color: #ff6b4a;
459 } 466 }
460 } 467 }
461 } 468 }
462 } 469 }
463 // .checkBox { 470 // .checkBox {
464 // height: 58rpx; 471 // height: 58rpx;
465 // line-height: 58rpx; 472 // line-height: 58rpx;
466 // width: 100%; 473 // width: 100%;
467 // margin-top: 36rpx; 474 // margin-top: 36rpx;
468 // margin-left: 40rpx; 475 // margin-left: 40rpx;
469 // font-size: 12px; 476 // font-size: 12px;
470 // color: #999999; 477 // color: #999999;
471 // } 478 // }
472 } 479 }
473 .footer { 480 .footer {
474 height: 112rpx; 481 height: 112rpx;
475 width: 100%; 482 width: 100%;
476 background-color: #fff; 483 background-color: #fff;
477 font-size: 16px; 484 font-size: 16px;
478 display: flex; 485 display: flex;
479 justify-content: space-between; 486 justify-content: space-between;
480 align-items: center; 487 align-items: center;
481 position: fixed; 488 position: fixed;
482 bottom: 0; 489 bottom: 0;
483 .footerLeft { 490 .footerLeft {
484 display: flex; 491 display: flex;
485 justify-content: center; 492 justify-content: center;
486 align-items: center; 493 align-items: center;
487 width: 50%; 494 width: 50%;
488 color: #333333; 495 color: #333333;
489 text { 496 text {
490 color: #ff6b4a; 497 color: #ff6b4a;
491 } 498 }
492 } 499 }
493 .footerRight { 500 .footerRight {
494 display: flex; 501 display: flex;
495 justify-content: flex-end; 502 justify-content: flex-end;
496 align-items: center; 503 align-items: center;
497 width: 50%; 504 width: 50%;
498 margin-right: 26rpx; 505 margin-right: 26rpx;
499 .paybtn { 506 .paybtn {
500 display: flex; 507 display: flex;
501 justify-content: center; 508 justify-content: center;
502 align-items: center; 509 align-items: center;
503 background: #ff6b4a; 510 background: #ff6b4a;
504 border-radius: 20px; 511 border-radius: 20px;
505 border-radius: 20px; 512 border-radius: 20px;
506 color: #ffffff; 513 color: #ffffff;
507 width: 204rpx; 514 width: 204rpx;
508 height: 80rpx; 515 height: 80rpx;
509 } 516 }
510 } 517 }
511 } 518 }
512 // 地址信息样式 519 // 地址信息样式
513 .order-user { 520 .order-user {
514 width: 670rpx; 521 width: 670rpx;
515 height: 228rpx; 522 height: 228rpx;
516 background: #ffffff; 523 background: #ffffff;
517 border-radius: 14rpx; 524 border-radius: 14rpx;
518 margin: 0 auto; 525 margin: 0 auto;
519 margin-top: 20rpx; 526 margin-top: 20rpx;
520 position: relative; 527 position: relative;
521 .order-user-head { 528 .order-user-head {
522 display: flex; 529 display: flex;
523 height: 108rpx; 530 height: 108rpx;
524 width: 100%; 531 width: 100%;
525 align-items: center; 532 align-items: center;
526 margin-left: 126rpx; 533 margin-left: 126rpx;
527 .name { 534 .name {
528 display: flex; 535 display: flex;
529 justify-content: space-between; 536 justify-content: space-between;
530 font-size: 14px; 537 font-size: 14px;
531 color: #333333; 538 color: #333333;
532 letter-spacing: -0.26px; 539 letter-spacing: -0.26px;
533 margin-right: 20rpx; 540 margin-right: 20rpx;
534 .default { 541 .default {
535 height: 40rpx; 542 height: 40rpx;
536 width: 80rpx; 543 width: 80rpx;
537 background-color: #4a90e2; 544 background-color: #4a90e2;
538 border-radius: 13px; 545 border-radius: 13px;
539 border-radius: 13px; 546 border-radius: 13px;
540 text-align: center; 547 text-align: center;
541 margin-right: 20rpx; 548 margin-right: 20rpx;
542 text { 549 text {
543 font-size: 12px; 550 font-size: 12px;
544 color: #ffffff; 551 color: #ffffff;
545 letter-spacing: -0.23px; 552 letter-spacing: -0.23px;
546 } 553 }
547 } 554 }
548 } 555 }
549 .mobile { 556 .mobile {
550 font-size: 14px; 557 font-size: 14px;
551 color: #999999; 558 color: #999999;
552 letter-spacing: -0.26px; 559 letter-spacing: -0.26px;
553 } 560 }
554 } 561 }
555 .order-user-body { 562 .order-user-body {
556 display: flex; 563 display: flex;
557 width: 100%; 564 width: 100%;
558 image { 565 image {
559 width: 24px; 566 width: 24px;
560 height: 26px; 567 height: 26px;
561 margin: 12rpx 32rpx 0 40rpx; 568 margin: 12rpx 32rpx 0 40rpx;
562 } 569 }
563 .address { 570 .address {
564 font-weight: bold; 571 font-weight: bold;
565 font-size: 14px; 572 font-size: 14px;
566 color: #333333; 573 color: #333333;
567 letter-spacing: -0.26px; 574 letter-spacing: -0.26px;
568 } 575 }
569 } 576 }
570 .arrow { 577 .arrow {
571 width: 6px; 578 width: 6px;
572 height: 12px; 579 height: 12px;
573 position: absolute; 580 position: absolute;
574 right: 40rpx; 581 right: 40rpx;
575 bottom: 104rpx; 582 bottom: 104rpx;
576 } 583 }
577 } 584 }
578 </style> 585 </style>
579 586
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @4cafd66
1 <!-- 订单待付款 待收货 --> 1 <!-- 订单待付款 待收货 -->
2 <template> 2 <template>
3 <view class="content"> 3 <view class="content">
4 <!-- 待付款 --> 4 <!-- 待付款 -->
5 <view 5 <view
6 class="order-time" 6 class="order-time"
7 v-if="status == '0'" 7 v-if="status == '0'"
8 > 8 >
9 <text>请在</text> 9 <text>请在</text>
10 <uni-countdown 10 <uni-countdown
11 color="#EC5D3B" 11 color="#EC5D3B"
12 splitor-color="#EC5D3B" 12 splitor-color="#EC5D3B"
13 :show-day="false" 13 :show-day="false"
14 :hour="0" 14 :hour="0"
15 :second="getTime" 15 :second="getTime"
16 @timeup=timeup 16 @timeup=timeup
17 ></uni-countdown> 17 ></uni-countdown>
18 <text>内完成付款</text> 18 <text>内完成付款</text>
19 </view> 19 </view>
20 <!-- 待收货 --> 20 <!-- 待收货 -->
21 <view 21 <view
22 class="headerBanner" 22 class="headerBanner"
23 v-if="status == '1'" 23 v-if="status == '1'"
24 > 24 >
25 <view class="bannerLeft"> 25 <view class="bannerLeft">
26 <view class="T1">卖家已发货</view> 26 <view class="T1">卖家已发货</view>
27 <view class="T2">还剩 确认收货</view> 27 <view class="T2">还剩 确认收货</view>
28 </view> 28 </view>
29 <image 29 <image
30 src="../../static/car.png" 30 src="../../static/car.png"
31 mode="aspectFill" 31 mode="aspectFill"
32 ></image> 32 ></image>
33 </view> 33 </view>
34 <view class="order"> 34 <view class="order">
35 <view class="order-user"> 35 <view class="order-user">
36 <view class="order-user-head"> 36 <view class="order-user-head">
37 <text class="p1">{{orderAddressInfo.userName}}</text> 37 <text class="p1">{{orderAddressInfo.userName}}</text>
38 <text class="p2">{{orderAddressInfo.telNumber}}</text> 38 <text class="p2">{{orderAddressInfo.telNumber}}</text>
39 </view> 39 </view>
40 <view class="order-user-body"> 40 <view class="order-user-body">
41 <image src="../../static/myorder-paying-location.png"></image> 41 <image src="../../static/myorder-paying-location.png"></image>
42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text> 42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
43 </view> 43 </view>
44 </view> 44 </view>
45 <view class="order-info"> 45 <view class="order-info">
46 <view 46 <view
47 class="order-info-head" 47 class="order-info-head"
48 v-for="(orderInfoListItem,index) in orderInfoList" 48 v-for="(orderInfoListItem,index) in orderInfoList"
49 :key="index" 49 :key="index"
50 > 50 >
51 <image 51 <image
52 :src="orderInfoListItem.imgUrl" 52 :src="orderInfoListItem.imgUrl"
53 mode="aspectFill" 53 mode="aspectFill"
54 ></image> 54 ></image>
55 <view class="order-info-head-r"> 55 <view class="order-info-head-r">
56 <text class="p1">{{orderInfoListItem.p_name}}</text> 56 <text class="p1">{{orderInfoListItem.p_name}}</text>
57 <view 57 <view
58 class="p2" 58 class="p2"
59 style="margin: 0;" 59 style="margin: 0;"
60 > 60 >
61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
62 <!-- <view class="arrow"></view> --> 62 <!-- <view class="arrow"></view> -->
63 </view> 63 </view>
64 <view class="infoText-bottom"> 64 <view class="infoText-bottom">
65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view> 65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
66 <view class="buy-num">X {{orderInfoListItem.num}}</view> 66 <view class="buy-num">X {{orderInfoListItem.num}}</view>
67 </view> 67 </view>
68 </view> 68 </view>
69 </view> 69 </view>
70 <!-- <view class="order-info-goodsnum"> 70 <!-- <view class="order-info-goodsnum">
71 <text>X1</text> 71 <text>X1</text>
72 </view> --> 72 </view> -->
73 <text class="order-info-freight"> 73 <text class="order-info-freight">
74 <text class="p1">运费</text> 74 <text class="p1">运费</text>
75 <text class="p2">{{orderInfo.trans_price}}</text> 75 <text class="p2">{{orderInfo.trans_price}}</text>
76 </text> 76 </text>
77 <text class="order-info-discount"> 77 <text class="order-info-discount">
78 <text class="p1">优惠</text> 78 <text class="p1">优惠</text>
79 <text class="p2">-￥{{totalDiscount}}</text> 79 <text class="p2">-￥{{totalDiscount}}</text>
80 </text> 80 </text>
81 <text class="order-info-price"> 81 <text class="order-info-price">
82 <text class="p1">实付</text> 82 <text class="p1">实付</text>
83 <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text> 83 <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text>
84 </text> 84 </text>
85 <text class="order-info-num"> 85 <text class="order-info-num">
86 <text>订单号：{{payId}}</text> 86 <text>订单号：{{payId}}</text>
87 </text> 87 </text>
88 <text class="order-info-time"> 88 <text class="order-info-time">
89 <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text> 89 <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text>
90 </text> 90 </text>
91 <view class="order-info-hr"></view> 91 <view class="order-info-hr"></view>
92 <view class="order-info-contact"> 92 <view class="order-info-contact">
93 <image src="../../static/myorder-paying-contact.png"></image> 93 <image src="../../static/myorder-paying-contact.png"></image>
94 <text>联系客服</text> 94 <text>联系客服</text>
95 </view> 95 </view>
96 </view> 96 </view>
97 </view> 97 </view>
98 <view 98 <view
99 class="order-confim" 99 class="order-confim"
100 v-if="status == '0'" 100 v-if="status == '0'"
101 > 101 >
102 <button 102 <button
103 class="b1" 103 class="b1"
104 @click="cancleOrder" 104 @click="cancleOrder"
105 >取消订单</button> 105 >取消订单</button>
106 <button 106 <button
107 class="b2" 107 class="b2"
108 @click="paylog" 108 @click="paylog"
109 >立即支付</button> 109 >立即支付</button>
110 </view> 110 </view>
111 111
112 <view 112 <view
113 class="order-confim" 113 class="order-confim"
114 v-if="status == '1'" 114 v-if="status == '1'"
115 > 115 >
116 <!-- <button class="b1">取消订单</button> --> 116 <!-- <button class="b1">取消订单</button> -->
117 <button 117 <button
118 class="b2" 118 class="b2"
119 @click="confirmOrder" 119 @click="confirmOrder"
120 >确认收货</button> 120 >确认收货</button>
121 </view> 121 </view>
122 </view> 122 </view>
123 </template> 123 </template>
124 124
125 <script> 125 <script>
126 import store from '@/store' 126 import store from '@/store'
127 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 127 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
128 export default { 128 export default {
129 components: { 129 components: {
130 UniCountdown 130 UniCountdown
131 }, 131 },
132 data () { 132 data () {
133 return { 133 return {
134 // orderInfo:{},
135 payId: '', 134 payId: '',
136 payTime: '', 135 payTime: '',
137 status: '', 136 status: '',
138 uid: '', 137 uid: '',
139 openid: '', 138 openid: '',
140 lefttime: 0 139 lefttime: 0
141
142 } 140 }
143 }, 141 },
144 onLoad: function (option) { 142 onLoad: function (option) {
145 console.log(option) 143 console.log(option)
146 this.payId = option.payId 144 this.payId = option.payId
147 this.status = option.status 145 this.status = option.status
148 const openid = uni.getStorageSync('openid') 146 const openid = uni.getStorageSync('openid')
149 const uid = this.$store.state.user.uid 147 const uid = this.$store.state.user.uid
150 this.uid = uid 148 this.uid = uid
151 this.openid = openid 149 this.openid = openid
152 store.dispatch('orderRead/getOrderInfo', { 150 store.dispatch('orderRead/getOrderInfo', {
153 pay_id: this.payId, 151 pay_id: this.payId,
154 uid: '1', 152 uid: '1',
155 openid: openid 153 openid: openid
156 }) 154 })
157 155
158 // this.orderInfo = this.$store.state.orderRead.orderInfo 156 // this.orderInfo = this.$store.state.orderRead.orderInfo
159 }, 157 },
160 computed: { 158 computed: {
161 // 获取订单详细信息 159 // 获取订单详细信息
162 orderInfo () { 160 orderInfo () {
163 console.log(this.$store.state.orderRead.orderInfo) 161 console.log('orderInfo', this.$store.state.orderRead.orderInfo)
164 return this.$store.state.orderRead.orderInfo || {} 162 return this.$store.state.orderRead.orderInfo || {}
165 }, 163 },
166 orderInfoList () { 164 orderInfoList () {
167 const orderInfoList = this.orderInfo.order_info[0].list 165 const orderInfoList = this.orderInfo.order_info[0].list
168 return orderInfoList 166 return orderInfoList
169 }, 167 },
170 // 获取订单地址信息 168 // 获取订单地址信息
171 orderAddressInfo () { 169 orderAddressInfo () {
172 return this.orderInfo.order_info[0].address 170 return this.orderInfo.order_info[0].address
173 }, 171 },
174 // 订单付款时间 172 // 订单付款时间
175 getTime () { 173 getTime () {
176 return this.orderInfo.order_info[0].lefttime 174 return this.orderInfo.order_info[0].lefttime
177 }, 175 },
178 // 计算总优惠额 176 // 计算总优惠额
179 totalDiscount () { 177 totalDiscount () {
180 const discountInfoList = this.orderInfo.discount_info 178 const discountInfoList = this.orderInfo.discount_info
181 let totalDiscount = 0 179 let totalDiscount = 0
182 if (discountInfoList) { 180 if (discountInfoList) {
183 discountInfoList.map((discountItem, index) => { 181 discountInfoList.map((discountItem, index) => {
184 totalDiscount += Number(discountItem.value) 182 totalDiscount += Number(discountItem.value)
185 }) 183 })
186 } 184 }
187 // console.log(totalDiscount) 185 // console.log(totalDiscount)
188 return totalDiscount 186 return totalDiscount
189 } 187 }
190 }, 188 },
191 methods: { 189 methods: {
192 // 取消订单 190 // 取消订单
193 timeup () { 191 timeup () {
194 this.cancleOrder() 192 this.cancleOrder()
195 }, 193 },
196 cancleOrder () { 194 cancleOrder () {
197 const uid = this.uid 195 const uid = this.uid
198 const openid = this.openid 196 const openid = this.openid
199 uni.showModal({ 197 uni.showModal({
200 title: '提示', 198 title: '提示',
201 content: '现在取消，订单不可恢复哦，确认取消吗？', 199 content: '现在取消，订单不可恢复哦，确认取消吗？',
202 success: function (res) { 200 success: function (res) {
203 if (res.confirm) { 201 if (res.confirm) {
204 store.dispatch('cancelOrder/cancel', { 202 store.dispatch('cancelOrder/cancel', {
205 keyname: '1', 203 keyname: '1',
206 uid: uid, 204 uid: uid,
207 openid: openid 205 openid: openid
208 }) 206 })
209 } else if (res.cancel) { 207 } else if (res.cancel) {
210 console.log('用户点击取消') 208 console.log('用户点击取消')
211 } 209 }
212 } 210 }
213 }) 211 })
214 }, 212 },
215 paylog () { 213 paylog () {
216 214
217 }, 215 },
218 confirmOrder () { 216 confirmOrder () {
219 store.dispatch('statusConfirm/confirm', { 217 store.dispatch('statusConfirm/confirm', {
220 uid: this.uid, 218 uid: this.uid,
221 openid: this.openid, 219 openid: this.openid,
222 oldway: '1', 220 oldway: '1',
223 way: '2', 221 way: '2',
224 pay_id: this.payId, 222 pay_id: this.payId,
225 judgeContent: '', 223 judgeContent: '',
226 orderInfo: this.orderInfo.order_info 224 orderInfo: this.orderInfo.order_info
227 }).then( 225 }).then(
228 setTimeout(() => { 226 setTimeout(() => {
229 uni.navigateBack() 227 uni.navigateBack()
230 }, 1500) 228 }, 1500)
231 ) 229 )
232 } 230 }
233 }, 231 },
234 filters: { 232 filters: {
235 timerChange: function(value) { 233 timerChange: function(value) {
236 var newDate = new Date() 234 var newDate = new Date()
237 newDate.setTime(value * 1000) 235 newDate.setTime(value * 1000)
238 return newDate.toLocaleString() 236 return newDate.toLocaleString()
239 } 237 }
240 } 238 }
241 } 239 }
242 </script> 240 </script>
243 241
244 <style lang="scss" scoped> 242 <style lang="scss" scoped>
245 .content { 243 .content {
246 min-height: 100vh; 244 min-height: 100vh;
247 display: flex; 245 display: flex;
248 flex-direction: column; 246 flex-direction: column;
249 justify-content: flex-start; 247 justify-content: flex-start;
250 align-items: center; 248 align-items: center;
251 background-color: #f2f2f2; 249 background-color: #f2f2f2;
252 } 250 }
253 251
254 .order { 252 .order {
255 margin-bottom: 112rpx; 253 margin-bottom: 112rpx;
256 background: #f2f2f2; 254 background: #f2f2f2;
257 margin-top: 140rpx; 255 margin-top: 140rpx;
258 width: 670rpx; 256 width: 670rpx;
259 } 257 }
260 258
261 .order-time { 259 .order-time {
262 width: 100%; 260 width: 100%;
263 height: 140rpx; 261 height: 140rpx;
264 background-color: #fff; 262 background-color: #fff;
265 display: flex; 263 display: flex;
266 justify-content: center; 264 justify-content: center;
267 align-items: center; 265 align-items: center;
268 position: fixed; 266 position: fixed;
269 top: 0; 267 top: 0;
270 left: 0; 268 left: 0;
271 text { 269 text {
272 // font-family: PingFangSC-Regular; 270 // font-family: PingFangSC-Regular;
273 // margin-top: 48rpx; 271 // margin-top: 48rpx;
274 font-size: 14px; 272 font-size: 14px;
275 color: #333333; 273 color: #333333;
276 letter-spacing: -0.26px; 274 letter-spacing: -0.26px;
277 } 275 }
278 .p2 { 276 .p2 {
279 // font-family: DINAlternate-Bold; 277 // font-family: DINAlternate-Bold;
280 margin: 42rpx 20rpx 0 20rpx; 278 margin: 42rpx 20rpx 0 20rpx;
281 font-size: 18px; 279 font-size: 18px;
282 color: #ec5d3b; 280 color: #ec5d3b;
283 letter-spacing: -0.34px; 281 letter-spacing: -0.34px;
284 } 282 }
285 } 283 }
286 .headerBanner { 284 .headerBanner {
287 width: 100%; 285 width: 100%;
288 height: 140rpx; 286 height: 140rpx;
289 background: #4a90e2; 287 background: #4a90e2;
290 padding: 26rpx 60rpx 24rpx 60rpx; 288 padding: 26rpx 60rpx 24rpx 60rpx;
291 box-sizing: border-box; 289 box-sizing: border-box;
292 color: #ffffff; 290 color: #ffffff;
293 display: flex; 291 display: flex;
294 justify-content: space-between; 292 justify-content: space-between;
295 align-items: center; 293 align-items: center;
296 position: fixed; 294 position: fixed;
297 top: 0; 295 top: 0;
298 left: 0; 296 left: 0;
299 .bannerLeft { 297 .bannerLeft {
300 font-size: 36rpx; 298 font-size: 36rpx;
301 display: flex; 299 display: flex;
302 flex-direction: column; 300 flex-direction: column;
303 justify-content: center; 301 justify-content: center;
304 align-items: center; 302 align-items: center;
305 .T2 { 303 .T2 {
306 font-size: 24rpx; 304 font-size: 24rpx;
307 } 305 }
308 } 306 }
309 image { 307 image {
310 height: 56rpx; 308 height: 56rpx;
311 width: 72rpx; 309 width: 72rpx;
312 } 310 }
313 } 311 }
314 312
315 .order-user { 313 .order-user {
316 height: 228rpx; 314 height: 228rpx;
317 background: #ffffff; 315 background: #ffffff;
318 border-radius: 14rpx; 316 border-radius: 14rpx;
319 margin: 0 auto; 317 margin: 0 auto;
320 margin-top: 20rpx; 318 margin-top: 20rpx;
321 margin-bottom: 20rpx; 319 margin-bottom: 20rpx;
322 .order-user-head { 320 .order-user-head {
323 display: flex; 321 display: flex;
324 height: 108rpx; 322 height: 108rpx;
325 align-items: center; 323 align-items: center;
326 margin-left: 126rpx; 324 margin-left: 126rpx;
327 .p1 { 325 .p1 {
328 // font-family: PingFangSC-Regular; 326 // font-family: PingFangSC-Regular;
329 font-size: 14px; 327 font-size: 14px;
330 color: #333333; 328 color: #333333;
331 letter-spacing: -0.26px; 329 letter-spacing: -0.26px;
332 margin-right: 20rpx; 330 margin-right: 20rpx;
333 } 331 }
334 .p2 { 332 .p2 {
335 // font-family: PingFangSC-Regular; 333 // font-family: PingFangSC-Regular;
336 font-size: 14px; 334 font-size: 14px;
337 color: #999999; 335 color: #999999;
338 letter-spacing: -0.26px; 336 letter-spacing: -0.26px;
339 } 337 }
340 } 338 }
341 .order-user-body { 339 .order-user-body {
342 display: flex; 340 display: flex;
343 width: 100%; 341 width: 100%;
344 image { 342 image {
345 width: 24px; 343 width: 24px;
346 height: 26px; 344 height: 26px;
347 margin: 12rpx 32rpx 0 40rpx; 345 margin: 12rpx 32rpx 0 40rpx;
348 } 346 }
349 .p3 { 347 .p3 {
350 // font-family: PingFangSC-Semibold; 348 // font-family: PingFangSC-Semibold;
351 font-size: 14px; 349 font-size: 14px;
352 color: #333333; 350 color: #333333;
353 letter-spacing: -0.26px; 351 letter-spacing: -0.26px;
354 } 352 }
355 } 353 }
356 } 354 }
357 355
358 .order-info { 356 .order-info {
359 background-color: #fff; 357 background-color: #fff;
360 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 358 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
361 border-radius: 16rpx; 359 border-radius: 16rpx;
362 margin: 0 auto; 360 margin: 0 auto;
363 view { 361 view {
364 margin-left: 40rpx; 362 margin-left: 40rpx;
365 } 363 }
366 text { 364 text {
367 font-size: 14px; 365 font-size: 14px;
368 } 366 }
369 .order-info-head { 367 .order-info-head {
370 display: flex; 368 display: flex;
371 padding-top: 40rpx; 369 padding-top: 40rpx;
372 image { 370 image {
373 height: 188rpx; 371 height: 188rpx;
374 width: 188rpx; 372 width: 188rpx;
375 } 373 }
376 .order-info-head-r { 374 .order-info-head-r {
377 margin: 0; 375 margin: 0;
378 width: 368rpx; 376 width: 368rpx;
379 margin-left: 24rpx; 377 margin-left: 24rpx;
380 // margin-top: 40rpx; 378 // margin-top: 40rpx;
381 text { 379 text {
382 display: block; 380 display: block;
383 } 381 }
384 // .arrow{ 382 // .arrow{
385 // width: 0; 383 // width: 0;
386 // height: 0; 384 // height: 0;
387 // border-left: 5px transparent; 385 // border-left: 5px transparent;
388 // border-right: 5px transparent; 386 // border-right: 5px transparent;
389 // border-top: 5px #979797; 387 // border-top: 5px #979797;
390 // border-bottom: 0 transparent; 388 // border-bottom: 0 transparent;
391 // border-style: solid; 389 // border-style: solid;
392 // position: relative; 390 // position: relative;
393 // // transform: scaleY(-1); 391 // // transform: scaleY(-1);
394 // } 392 // }
395 // .arrow::after{ 393 // .arrow::after{
396 // content: ''; 394 // content: '';
397 // position: absolute; 395 // position: absolute;
398 // top: -6.5px; 396 // top: -6.5px;
399 // left: -5px; 397 // left: -5px;
400 // border-left: 5px transparent; 398 // border-left: 5px transparent;
401 // border-right: 5px transparent; 399 // border-right: 5px transparent;
402 // border-top: 5px #FFFFFF; 400 // border-top: 5px #FFFFFF;
403 // border-bottom: 0 transparent; 401 // border-bottom: 0 transparent;
404 // border-style: solid; 402 // border-style: solid;
405 // } 403 // }
406 .p1 { 404 .p1 {
407 min-height: 40px; 405 min-height: 40px;
408 // font-family: PingFangSC-Regular; 406 // font-family: PingFangSC-Regular;
409 font-size: 14px; 407 font-size: 14px;
410 color: #333333; 408 color: #333333;
411 letter-spacing: -0.26px; 409 letter-spacing: -0.26px;
412 line-height: 18px; 410 line-height: 18px;
413 // line-height: 20px; 411 // line-height: 20px;
414 } 412 }
415 .p2 { 413 .p2 {
416 height: 34px; 414 height: 34px;
417 padding: 1px 0 3px 0; 415 padding: 1px 0 3px 0;
418 // font-family: PingFangSC-Regular; 416 // font-family: PingFangSC-Regular;
419 font-size: 12px; 417 font-size: 12px;
420 color: #999999; 418 color: #999999;
421 letter-spacing: -0.23px; 419 letter-spacing: -0.23px;
422 } 420 }
423 .infoText-bottom { 421 .infoText-bottom {
424 display: flex; 422 display: flex;
425 flex-direction: row; 423 flex-direction: row;
426 justify-content: flex-start; 424 justify-content: flex-start;
427 align-items: center; 425 align-items: center;
428 width: 100%; 426 width: 100%;
429 margin-left: 0; 427 margin-left: 0;
430 .markPrice { 428 .markPrice {
431 font-size: 14px; 429 font-size: 14px;
432 color: #ff6b4a; 430 color: #ff6b4a;
433 margin-right: 20rpx; 431 margin-right: 20rpx;
434 margin-left: 0rpx; 432 margin-left: 0rpx;
435 } 433 }
436 .buy-num { 434 .buy-num {
437 font-size: 12px; 435 font-size: 12px;
438 color: #999999; 436 color: #999999;
439 } 437 }
440 } 438 }
441 } 439 }
442 } 440 }
443 // .order-info-goodsnum { 441 // .order-info-goodsnum {
444 // display: flex; 442 // display: flex;
445 // align-items: center; 443 // align-items: center;
446 // justify-content: flex-end; 444 // justify-content: flex-end;
447 // text { 445 // text {
448 // margin-right: 44rpx; 446 // margin-right: 44rpx;
449 // // ont-family: PingFangSC-Regular; 447 // // ont-family: PingFangSC-Regular;
450 // font-size: 12px; 448 // font-size: 12px;
451 // color: #999999; 449 // color: #999999;
452 // letter-spacing: -0.23px; 450 // letter-spacing: -0.23px;
453 // } 451 // }
454 // } 452 // }
455 .order-info-freight { 453 .order-info-freight {
456 display: block; 454 display: block;
457 margin-left: 40rpx; 455 margin-left: 40rpx;
458 margin-top: 22rpx; 456 margin-top: 22rpx;
459 .p1 { 457 .p1 {
460 // font-family: PingFangSC-Regular; 458 // font-family: PingFangSC-Regular;
461 font-size: 14px; 459 font-size: 14px;
462 color: #333333; 460 color: #333333;
463 letter-spacing: -0.26px; 461 letter-spacing: -0.26px;
464 line-height: 18px; 462 line-height: 18px;
465 margin-right: 24px; 463 margin-right: 24px;
466 } 464 }
467 .p2 { 465 .p2 {
468 // font-family: PingFangSC-Regular; 466 // font-family: PingFangSC-Regular;
469 font-size: 14px; 467 font-size: 14px;
470 color: #ff6b4a; 468 color: #ff6b4a;
471 letter-spacing: -0.26px; 469 letter-spacing: -0.26px;
472 } 470 }
473 } 471 }
474 .order-info-discount { 472 .order-info-discount {
475 display: block; 473 display: block;
476 margin-left: 40rpx; 474 margin-left: 40rpx;
477 margin-top: 24rpx; 475 margin-top: 24rpx;
478 .p1 { 476 .p1 {
479 // font-family: PingFangSC-Regular; 477 // font-family: PingFangSC-Regular;
480 font-size: 14px; 478 font-size: 14px;
481 color: #333333; 479 color: #333333;
482 letter-spacing: -0.26px; 480 letter-spacing: -0.26px;
483 line-height: 18px; 481 line-height: 18px;
484 margin-right: 24px; 482 margin-right: 24px;
485 } 483 }
486 .p2 { 484 .p2 {
487 // font-family: PingFangSC-Regular; 485 // font-family: PingFangSC-Regular;
488 font-size: 14px; 486 font-size: 14px;
489 color: #ff6b4a; 487 color: #ff6b4a;
490 letter-spacing: -0.26px; 488 letter-spacing: -0.26px;
491 } 489 }
492 } 490 }
493 .order-info-price { 491 .order-info-price {
494 display: block; 492 display: block;
495 margin-left: 40rpx; 493 margin-left: 40rpx;
496 margin-top: 24rpx; 494 margin-top: 24rpx;
497 .p1 { 495 .p1 {
498 // font-family: PingFangSC-Semibold; 496 // font-family: PingFangSC-Semibold;
499 font-size: 14px; 497 font-size: 14px;
500 color: #333333; 498 color: #333333;
501 letter-spacing: -0.26px; 499 letter-spacing: -0.26px;
502 line-height: 18px; 500 line-height: 18px;
503 margin-right: 24px; 501 margin-right: 24px;
504 } 502 }
505 .p2 { 503 .p2 {
506 // font-family: PingFangSC-Semibold; 504 // font-family: PingFangSC-Semibold;
507 font-size: 14px; 505 font-size: 14px;
508 color: #ff6b4a; 506 color: #ff6b4a;
509 letter-spacing: -0.26px; 507 letter-spacing: -0.26px;
510 } 508 }
511 } 509 }
512 .order-info-num { 510 .order-info-num {
513 display: block; 511 display: block;
514 margin-left: 40rpx; 512 margin-left: 40rpx;
515 margin-top: 44rpx; 513 margin-top: 44rpx;
516 text { 514 text {
517 // font-family: PingFangSC-Regular; 515 // font-family: PingFangSC-Regular;
518 font-size: 12px; 516 font-size: 12px;
519 color: #999999; 517 color: #999999;
520 letter-spacing: -0.23px; 518 letter-spacing: -0.23px;
521 } 519 }
522 } 520 }
523 .order-info-time { 521 .order-info-time {
524 display: block; 522 display: block;
525 margin: 8rpx 0 48rpx 40rpx; 523 margin: 8rpx 0 48rpx 40rpx;
526 text { 524 text {
527 // font-family: PingFangSC-Regular; 525 // font-family: PingFangSC-Regular;
528 font-size: 12px; 526 font-size: 12px;
529 color: #999999; 527 color: #999999;
530 letter-spacing: -0.23px; 528 letter-spacing: -0.23px;
531 } 529 }
532 } 530 }
533 .order-info-hr { 531 .order-info-hr {
534 width: 520rpx; 532 width: 520rpx;
535 height: 1px; 533 height: 1px;
536 background-color: #e9e9e9; 534 background-color: #e9e9e9;
537 margin-bottom: 20rpx; 535 margin-bottom: 20rpx;
538 } 536 }
539 .order-info-contact { 537 .order-info-contact {
540 display: flex; 538 display: flex;
541 padding-bottom: 28rpx; 539 padding-bottom: 28rpx;
542 image { 540 image {
543 width: 19px; 541 width: 19px;
544 height: 16px; 542 height: 16px;
545 } 543 }
546 text { 544 text {
547 // font-family: PingFangSC-Regular; 545 // font-family: PingFangSC-Regular;
548 margin-left: 20rpx; 546 margin-left: 20rpx;
549 font-size: 14px; 547 font-size: 14px;
550 color: #333333; 548 color: #333333;
551 letter-spacing: -0.26px; 549 letter-spacing: -0.26px;
552 line-height: 18px; 550 line-height: 18px;
553 } 551 }
554 } 552 }
555 } 553 }
556 554
557 .order-confim { 555 .order-confim {
558 display: flex; 556 display: flex;
559 align-items: center; 557 align-items: center;
560 justify-content: flex-end; 558 justify-content: flex-end;
561 // z-index: 999; 559 // z-index: 999;
562 width: 100%; 560 width: 100%;
563 height: 112rpx; 561 height: 112rpx;
564 position: fixed; 562 position: fixed;
565 bottom: 0; 563 bottom: 0;
566 background: #ffffff; 564 background: #ffffff;
567 button { 565 button {
568 width: 204rpx; 566 width: 204rpx;
569 height: 80rpx; 567 height: 80rpx;
570 border: 1px solid #ff6b4a; 568 border: 1px solid #ff6b4a;
571 border-radius: 40rpx; 569 border-radius: 40rpx;
572 font-size: 32rpx; 570 font-size: 32rpx;
573 letter-spacing: -0.3px; 571 letter-spacing: -0.3px;
574 margin-right: 0; 572 margin-right: 0;
575 } 573 }
576 .b1 { 574 .b1 {
577 // font-family: PingFangSC-Regular; 575 // font-family: PingFangSC-Regular;
578 color: #ff6b4a; 576 color: #ff6b4a;
579 background-color: #ffffff; 577 background-color: #ffffff;
580 } 578 }
581 .b2 { 579 .b2 {
582 // font-family: PingFangSC-Regular; 580 // font-family: PingFangSC-Regular;
583 background-color: #ff6b4a; 581 background-color: #ff6b4a;
584 color: #ffffff; 582 color: #ffffff;
585 margin: 0 26rpx 0 20rpx; 583 margin: 0 26rpx 0 20rpx;
586 } 584 }
587 } 585 }
588 </style> 586 </style>
589 587
src/pages/purchaseLenses/purchaseLenses.vue
Diff comments   View file @4cafd66
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="goodInfo"> 3 <view class="goodInfo">
4 <view class="imageWrap"> 4 <view class="imageWrap">
5 <image 5 <image
6 src="../../static/img/detail/d1.png" 6 src="../../static/img/detail/d1.png"
7 mode="aspectFill" 7 mode="aspectFill"
8 style="width: 188rpx;height: 168rpx;" 8 style="width: 188rpx;height: 168rpx;"
9 ></image> 9 ></image>
10 </view> 10 </view>
11 <view class="infoRight"> 11 <view class="infoRight">
12 <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> 12 <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
13 <text class="remarks">支持7天无理由退货 顺丰发货</text> 13 <text class="remarks">支持7天无理由退货 顺丰发货</text>
14 <view class="priceBox"> 14 <view class="priceBox">
15 <view class="price">￥198</view> 15 <view class="price">￥198</view>
16 <text>(限购{{maxCount}}副)</text> 16 <text>(限购{{maxCount}}副)</text>
17 <view class="counter"> 17 <view class="counter">
18 <view 18 <view
19 class="btn" 19 class="btn"
20 disabled="this.addDisabled" 20 disabled="this.addDisabled"
21 type="default" 21 type="default"
22 @click="counter(false)" 22 @click="counter(false)"
23 >-</view> 23 >-</view>
24 <text>{{count}}</text> 24 <text>{{count}}</text>
25 <view 25 <view
26 class="btn" 26 class="btn"
27 disabled="this.desDisabled" 27 disabled="this.desDisabled"
28 type="default" 28 type="default"
29 @click="counter(true)" 29 @click="counter(true)"
30 >+</view> 30 >+</view>
31 </view> 31 </view>
32 </view> 32 </view>
33 </view> 33 </view>
34 </view> 34 </view>
35 <view class="goods-data"> 35 <view class="goods-data">
36 <view class="opCollapse"> 36 <view class="opCollapse">
37 <view class="body"> 37 <view class="body">
38 <template v-if="opIsOpen"> 38 <template v-if="opIsOpen">
39 <view class="goods-form"> 39 <view class="goods-form">
40 <view class="data-title"> 40 <view class="data-title">
41 <image src="../../static/icon-data.png"></image> 41 <image src="../../static/icon-data.png"></image>
42 <text class="p1">填写验光数据</text> 42 <text class="p1">填写验光数据</text>
43 </view> 43 </view>
44 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 44 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
45 <view class="picker"> 45 <view class="picker">
46 <view class="picker-choice"> 46 <view class="picker-choice">
47 <view class="choice-left"> 47 <view class="choice-left">
48 <text class="p11">验光单取名:</text> 48 <text class="p11">验光单取名:</text>
49 </view> 49 </view>
50 <input 50 <input
51 class="choice-name uni-input" 51 class="choice-name uni-input"
52 :value="dataName"
53 @blur="fillData"
52 placeholder="下系" 54 placeholder="下系"
53 /> 55 />
54 </view> 56 </view>
55 </view> 57 </view>
56 <view class="picker"> 58 <view class="picker">
57 <view class="picker-choice"> 59 <view class="picker-choice">
58 <view class="choice-left"> 60 <view class="choice-left">
59 <text class="p11">{{pickerInfoList[0].nameC}}</text> 61 <text class="p11">{{pickerInfoList[0].nameC}}</text>
60 <text class="p12">{{pickerInfoList[0].nameE}}</text> 62 <text class="p12">{{pickerInfoList[0].nameE}}</text>
61 </view> 63 </view>
62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 64 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
63 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 65 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
64 <picker 66 <picker
65 @change="bindPickerChange01" 67 @change="bindPickerChange01"
66 :value="pickerInfoList[0].nameIndex1" 68 :value="pickerInfoList[0].nameIndex1"
67 :range="pickerInfoList[0].nameArray1" 69 :range="pickerInfoList[0].nameArray1"
68 > 70 >
69 <image src="../../static/detail-tabicon.png"></image> 71 <image src="../../static/detail-tabicon.png"></image>
70 </picker> 72 </picker>
71 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 73 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
72 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 74 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
73 <picker 75 <picker
74 @change="bindPickerChange02" 76 @change="bindPickerChange02"
75 :value="pickerInfoList[0].nameIndex2" 77 :value="pickerInfoList[0].nameIndex2"
76 :range="pickerInfoList[0].nameArray2" 78 :range="pickerInfoList[0].nameArray2"
77 > 79 >
78 <image src="../../static/detail-tabicon.png"></image> 80 <image src="../../static/detail-tabicon.png"></image>
79 </picker> 81 </picker>
80 </view> 82 </view>
81 </view> 83 </view>
82 <view class="picker"> 84 <view class="picker">
83 <view class="picker-choice"> 85 <view class="picker-choice">
84 <view class="choice-left"> 86 <view class="choice-left">
85 <text class="p11">{{pickerInfoList[1].nameC}}</text> 87 <text class="p11">{{pickerInfoList[1].nameC}}</text>
86 <text class="p12">{{pickerInfoList[1].nameE}}</text> 88 <text class="p12">{{pickerInfoList[1].nameE}}</text>
87 </view> 89 </view>
88 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 90 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
89 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 91 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
90 <picker 92 <picker
91 @change="bindPickerChange11" 93 @change="bindPickerChange11"
92 :value="pickerInfoList[1].nameIndex1" 94 :value="pickerInfoList[1].nameIndex1"
93 :range="pickerInfoList[1].nameArray1" 95 :range="pickerInfoList[1].nameArray1"
94 > 96 >
95 <image src="../../static/detail-tabicon.png"></image> 97 <image src="../../static/detail-tabicon.png"></image>
96 </picker> 98 </picker>
97 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 99 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
98 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 100 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
99 <picker 101 <picker
100 @change="bindPickerChange12" 102 @change="bindPickerChange12"
101 :value="pickerInfoList[1].nameIndex2" 103 :value="pickerInfoList[1].nameIndex2"
102 :range="pickerInfoList[1].nameArray2" 104 :range="pickerInfoList[1].nameArray2"
103 > 105 >
104 <image src="../../static/detail-tabicon.png"></image> 106 <image src="../../static/detail-tabicon.png"></image>
105 </picker> 107 </picker>
106 </view> 108 </view>
107 </view> 109 </view>
108 <view class="picker"> 110 <view class="picker">
109 <view class="picker-choice"> 111 <view class="picker-choice">
110 <view class="choice-left"> 112 <view class="choice-left">
111 <text class="p11">{{pickerInfoList[2].nameC}}</text> 113 <text class="p11">{{pickerInfoList[2].nameC}}</text>
112 <text class="p12">{{pickerInfoList[2].nameE}}</text> 114 <text class="p12">{{pickerInfoList[2].nameE}}</text>
113 </view> 115 </view>
114 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 116 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
115 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 117 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
116 <picker 118 <picker
117 @change="bindPickerChange21" 119 @change="bindPickerChange21"
118 :value="pickerInfoList[2].nameIndex1" 120 :value="pickerInfoList[2].nameIndex1"
119 :range="pickerInfoList[2].nameArray1" 121 :range="pickerInfoList[2].nameArray1"
120 > 122 >
121 <image src="../../static/detail-tabicon.png"></image> 123 <image src="../../static/detail-tabicon.png"></image>
122 </picker> 124 </picker>
123 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 125 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
124 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 126 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
125 <picker 127 <picker
126 @change="bindPickerChange22" 128 @change="bindPickerChange22"
127 :value="pickerInfoList[2].nameIndex2" 129 :value="pickerInfoList[2].nameIndex2"
128 :range="pickerInfoList[2].nameArray2" 130 :range="pickerInfoList[2].nameArray2"
129 > 131 >
130 <image src="../../static/detail-tabicon.png"></image> 132 <image src="../../static/detail-tabicon.png"></image>
131 </picker> 133 </picker>
132 </view> 134 </view>
133 </view> 135 </view>
134 <view class="picker"> 136 <view class="picker">
135 <view class="picker-choice"> 137 <view class="picker-choice">
136 <view class="choice-left"> 138 <view class="choice-left">
137 <text class="p11">{{pickerInfoList[3].nameC}}</text> 139 <text class="p11">{{pickerInfoList[3].nameC}}</text>
138 <text class="p12">{{pickerInfoList[3].nameE}}</text> 140 <text class="p12">{{pickerInfoList[3].nameE}}</text>
139 </view> 141 </view>
140 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 142 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
141 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 143 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
142 <picker 144 <picker
143 @change="bindPickerChange31" 145 @change="bindPickerChange31"
144 :value="pickerInfoList[3].nameIndex1" 146 :value="pickerInfoList[3].nameIndex1"
145 :range="pickerInfoList[3].nameArray1" 147 :range="pickerInfoList[3].nameArray1"
146 > 148 >
147 <image src="../../static/detail-tabicon.png"></image> 149 <image src="../../static/detail-tabicon.png"></image>
148 </picker> 150 </picker>
149 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 151 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
150 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 152 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
151 <picker 153 <picker
152 @change="bindPickerChange32" 154 @change="bindPickerChange32"
153 :value="pickerInfoList[3].nameIndex2" 155 :value="pickerInfoList[3].nameIndex2"
154 :range="pickerInfoList[3].nameArray2" 156 :range="pickerInfoList[3].nameArray2"
155 > 157 >
156 <image src="../../static/detail-tabicon.png"></image> 158 <image src="../../static/detail-tabicon.png"></image>
157 </picker> 159 </picker>
158 </view> 160 </view>
159 </view> 161 </view>
160 <view class="picker"> 162 <view class="picker">
161 <view class="picker-choice"> 163 <view class="picker-choice">
162 <view class="choice-left"> 164 <view class="choice-left">
163 <text class="p11">{{pickerInfoList[4].nameC}}</text> 165 <text class="p11">{{pickerInfoList[4].nameC}}</text>
164 </view> 166 </view>
165 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 167 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
166 <text 168 <text
167 class="p14" 169 class="p14"
168 style="width: 34px;" 170 style="width: 34px;"
169 >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 171 >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
170 <picker 172 <picker
171 @change="bindPickerChange41" 173 @change="bindPickerChange41"
172 :value="pickerInfoList[4].nameIndex1" 174 :value="pickerInfoList[4].nameIndex1"
173 :range="pickerInfoList[4].nameArray1" 175 :range="pickerInfoList[4].nameArray1"
174 > 176 >
175 <image src="../../static/detail-tabicon.png"></image> 177 <image src="../../static/detail-tabicon.png"></image>
176 </picker> 178 </picker>
177 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 179 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
178 <text 180 <text
179 class="p14" 181 class="p14"
180 style="width: 30px;" 182 style="width: 30px;"
181 >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 183 >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
182 <picker 184 <picker
183 @change="bindPickerChange42" 185 @change="bindPickerChange42"
184 :value="pickerInfoList[4].nameIndex2" 186 :value="pickerInfoList[4].nameIndex2"
185 :range="pickerInfoList[4].nameArray2" 187 :range="pickerInfoList[4].nameArray2"
186 > 188 >
187 <image src="../../static/detail-tabicon.png"></image> 189 <image src="../../static/detail-tabicon.png"></image>
188 </picker> 190 </picker>
189 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 191 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
190 <text 192 <text
191 class="p14" 193 class="p14"
192 style="width: 30px;" 194 style="width: 30px;"
193 >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 195 >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
194 <picker 196 <picker
195 @change="bindPickerChange43" 197 @change="bindPickerChange43"
196 :value="pickerInfoList[4].nameIndex3" 198 :value="pickerInfoList[4].nameIndex3"
197 :range="pickerInfoList[4].nameArray3" 199 :range="pickerInfoList[4].nameArray3"
198 > 200 >
199 <image src="../../static/detail-tabicon.png"></image> 201 <image src="../../static/detail-tabicon.png"></image>
200 </picker> 202 </picker>
201 </view> 203 </view>
202 </view> 204 </view>
203 <view class="confirm"> 205 <view class="confirm">
204 <image 206 <image
205 :src="tablist.confirm ? tabicon[0] : tabicon[1]" 207 :src="tablist.confirm ? tabicon[0] : tabicon[1]"
206 @click="changeConfirm" 208 @click="changeConfirm"
207 ></image> 209 ></image>
208 <text>确认以上输入信息来源于我的验光数据!</text> 210 <text>确认以上输入信息来源于我的验光数据!</text>
209 </view> 211 </view>
210 </view> 212 </view>
211 213
212 </template> 214 </template>
213 <template v-else> 215 <template v-else>
214 <view 216 <view
215 v-for="item in pickerInfoList" 217 v-for="item in pickerInfoList"
216 :key="item.key" 218 :key="item.key"
217 class="bodyBox" 219 class="bodyBox"
218 > 220 >
219 <template v-if="item.nameC==='验光日期'"> 221 <template v-if="item.nameC==='验光日期'">
220 <text class="names">{{item.nameC}}</text> 222 <text class="names">{{item.nameC}}</text>
221 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 223 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
222 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 224 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
223 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 225 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
224 </template> 226 </template>
225 <template v-else> 227 <template v-else>
226 <template v-if="item.nameC==='度数'"> 228 <template v-if="item.nameC==='度数'">
227 <text style="display: inline;">*</text> 229 <text style="display: inline;">*</text>
228 </template> 230 </template>
229 231
230 <text class="names">{{item.nameC}}</text> 232 <text class="names">{{item.nameC}}</text>
231 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 233 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
232 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 234 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
233 </template> 235 </template>
234 </view> 236 </view>
235 </template> 237 </template>
236 </view> 238 </view>
237 </view> 239 </view>
238 </view> 240 </view>
239 <view class="choose"> 241 <view class="choose">
240 <view 242 <view
241 class="chooseItem_1_content" 243 class="chooseItem_1_content"
242 v-for="(item,index) in attrList" 244 v-for="(item,index) in attrList"
243 :key="index" 245 :key="index"
244 > 246 >
245 <UniCollapse @change="change(index)"> 247 <UniCollapse @change="change(index)">
246 <UniCollapseItem 248 <UniCollapseItem
247 :open="show[index]" 249 :open="show[index]"
248 :title="item.meta_name" 250 :title="item.meta_name"
249 showAnimation=false 251 showAnimation=false
250 > 252 >
251 <view class="chooseItem_1_content"> 253 <view class="chooseItem_1_content">
252 <view class="itemsWrap"> 254 <view class="itemsWrap">
253 <view 255 <view
254 class="item2" 256 class="item2"
255 v-for="(one,i) in item.attr" 257 v-for="(one,i) in item.attr"
256 :key="i" 258 :key="i"
257 :class="{ active2: current[index] === i }" 259 :class="{ active2: current[index] === i }"
258 @click="onClickItem(index, i)" 260 @click="onClickItem(index, i)"
259 >{{one.name}}</view> 261 >{{one.name}}</view>
260 </view> 262 </view>
261 </view> 263 </view>
262 </UniCollapseItem> 264 </UniCollapseItem>
263 </UniCollapse> 265 </UniCollapse>
264 <view 266 <view
265 class="chooseRes" 267 class="chooseRes"
266 v-show="!show[index]" 268 v-show="!show[index]"
267 >* {{attrList[index].attr[current[index]].name}}</view> 269 >* {{attrList[index].attr[current[index]].name}}</view>
268 </view> 270 </view>
269 <!-- <view class="chooseItem_1 chooseItem"> 271 <!-- <view class="chooseItem_1 chooseItem">
270 <UniCollapse @change="change(1)"> 272 <UniCollapse @change="change(1)">
271 <UniCollapseItem 273 <UniCollapseItem
272 open=true 274 open=true
273 title="款式挑选" 275 title="款式挑选"
274 showAnimation=false 276 showAnimation=false
275 > 277 >
276 <view 278 <view
277 class="chooseRes" 279 class="chooseRes"
278 v-show="show[1]" 280 v-show="show[1]"
279 >* {{chooseRes1}}</view> 281 >* {{chooseRes1}}</view>
280 <view class="chooseItem_1_content"> 282 <view class="chooseItem_1_content">
281 <view class="itemsWrap"> 283 <view class="itemsWrap">
282 <view 284 <view
283 class="item1" 285 class="item1"
284 v-for="(item,index) in chooseItem1" 286 v-for="(item,index) in chooseItem1"
285 :key="index" 287 :key="index"
286 :style="item.style" 288 :style="item.style"
287 :class="{ active1: current1 === index }" 289 :class="{ active1: current1 === index }"
288 @click="onClickItem1(index)" 290 @click="onClickItem1(index)"
289 ></view> 291 ></view>
290 </view> 292 </view>
291 </view> 293 </view>
292 </UniCollapseItem> 294 </UniCollapseItem>
293 </UniCollapse> 295 </UniCollapse>
294 <view 296 <view
295 class="chooseRes" 297 class="chooseRes"
296 v-show="show[1]" 298 v-show="show[1]"
297 >* {{chooseRes1}}</view> 299 >* {{chooseRes1}}</view>
298 </view> 300 </view>
299 <view class="chooseItem_2 chooseItem "> 301 <view class="chooseItem_2 chooseItem ">
300 <UniCollapse @change="change(2)"> 302 <UniCollapse @change="change(2)">
301 <UniCollapseItem 303 <UniCollapseItem
302 open=true 304 open=true
303 title="直径" 305 title="直径"
304 showAnimation=false 306 showAnimation=false
305 > 307 >
306 <view class="chooseItem_1_content"> 308 <view class="chooseItem_1_content">
307 <view class="itemsWrap"> 309 <view class="itemsWrap">
308 <view 310 <view
309 class="item2" 311 class="item2"
310 v-for="(item,index) in chooseItem2" 312 v-for="(item,index) in chooseItem2"
311 :key="index" 313 :key="index"
312 :class="{ active2: current2 === index }" 314 :class="{ active2: current2 === index }"
313 @click="onClickItem2(index)" 315 @click="onClickItem2(index)"
314 >{{item.num}}</view> 316 >{{item.num}}</view>
315 </view> 317 </view>
316 </view> 318 </view>
317 </UniCollapseItem> 319 </UniCollapseItem>
318 </UniCollapse> 320 </UniCollapse>
319 <view 321 <view
320 class="chooseRes" 322 class="chooseRes"
321 v-show="show[2]" 323 v-show="show[2]"
322 >* {{chooseRes2}}</view> 324 >* {{chooseRes2}}</view>
323 </view> 325 </view>
324 <view class="chooseItem_3 chooseItem"> 326 <view class="chooseItem_3 chooseItem">
325 <UniCollapse @change="change(3)"> 327 <UniCollapse @change="change(3)">
326 <UniCollapseItem 328 <UniCollapseItem
327 open=true 329 open=true
328 title="度数" 330 title="度数"
329 showAnimation=false 331 showAnimation=false
330 > 332 >
331 <view class="chooseItem_1_content"> 333 <view class="chooseItem_1_content">
332 <view class="itemsWrap"> 334 <view class="itemsWrap">
333 <view 335 <view
334 class="item2" 336 class="item2"
335 v-for="(item,index) in chooseItem3" 337 v-for="(item,index) in chooseItem3"
336 :key="index" 338 :key="index"
337 :class="{ active2: current3 === index }" 339 :class="{ active2: current3 === index }"
338 @click="onClickItem3(index)" 340 @click="onClickItem3(index)"
339 >{{item}}</view> 341 >{{item}}</view>
340 </view> 342 </view>
341 </view> 343 </view>
342 </UniCollapseItem> 344 </UniCollapseItem>
343 </UniCollapse> 345 </UniCollapse>
344 <view 346 <view
345 class="chooseRes" 347 class="chooseRes"
346 v-show="show[3]" 348 v-show="show[3]"
347 >* {{chooseRes3}}</view> 349 >* {{chooseRes3}}</view>
348 </view> --> 350 </view> -->
349 </view> 351 </view>
350 <view 352 <view
351 class="button" 353 class="button"
352 @click="toComfirmOrder" 354 @click="toComfirmOrder"
353 > 355 >
354 立即结算 356 立即结算
355 </view> 357 </view>
356 </view> 358 </view>
357 </template> 359 </template>
358 360
359 <script> 361 <script>
360 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 362 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
361 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 363 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
362 import store from '@/store' 364 import store from '@/store'
363 365
364 export default { 366 export default {
365 components: { 367 components: {
366 UniCollapse, 368 UniCollapse,
367 UniCollapseItem 369 UniCollapseItem
368 }, 370 },
369 data() { 371 data() {
370 return { 372 return {
371 count: 1, 373 count: 1,
372 pid: 0, 374 pid: 0,
373 maxCount: 20, 375 maxCount: 20,
374 isShow: true, 376 dataName: '', // 验光数据人员名称
377 isDataName: false,
375 opIsOpen: true, 378 opIsOpen: true,
376 addDisabled: false, 379 addDisabled: false,
377 desDisabled: false, 380 desDisabled: false,
378 current1: 0, 381 current1: 0,
379 current2: 0, 382 current2: 0,
380 current3: 0, 383 current3: 0,
381 current: [], 384 current: [],
382 show: [], 385 show: [],
383 chooseRes1: { 386 chooseRes1: {
384 sku_name: 'Miss 黑二代【减龄自然】', 387 sku_name: 'Miss 黑二代【减龄自然】',
385 sk_id: '128' 388 sk_id: '128'
386 }, 389 },
390 checkedData: {
391
392 },
387 chooseRes2: '14.0', 393 chooseRes2: '14.0',
388 chooseRes3: 0, 394 chooseRes3: 0,
389 chooseItem1: [ 395 chooseItem1: [
390 { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, 396 { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' },
391 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, 397 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' },
392 { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, 398 { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' },
393 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, 399 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
394 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, 400 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
395 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, 401 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
396 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, 402 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
397 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, 403 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
398 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, 404 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
399 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, 405 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
400 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, 406 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
401 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, 407 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
402 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, 408 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
403 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, 409 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
404 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' } 410 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }
405 ], 411 ],
406 chooseItem2: [ 412 chooseItem2: [
407 { num: '14.0' }, 413 { num: '14.0' },
408 { num: '14.2' }, 414 { num: '14.2' },
409 { num: '14.4' }, 415 { num: '14.4' },
410 { num: '14.5' } 416 { num: '14.5' }
411 ], 417 ],
412 chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], 418 chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000],
413 // 度数相关数据 419 // 度数相关数据
414 pickerInfoList: [ 420 pickerInfoList: [
415 { nameC: '度数', nameE: '(SPH)', nameArray1: [1.5, 2.5, 3.5, 4.5], nameIndex1: 0, nameArray2: [1.5, 2.5, 3.5, 4.5], nameIndex2: 0, key: 0 }, 421 { nameC: '度数', nameE: '(SPH)', nameArray1: [1.5, 2.5, 3.5, 4.5], nameIndex1: 0, nameArray2: [1.5, 2.5, 3.5, 4.5], nameIndex2: 0, key: 0 },
416 { nameC: '散光', nameE: '(CYL)', nameArray1: [1.5, 2.5, 3.5, 4.5], nameIndex1: 0, nameArray2: [1.5, 2.5, 3.5, 4.5], nameIndex2: 0, key: 1 }, 422 { nameC: '散光', nameE: '(CYL)', nameArray1: [1.5, 2.5, 3.5, 4.5], nameIndex1: 0, nameArray2: [1.5, 2.5, 3.5, 4.5], nameIndex2: 0, key: 1 },
417 { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [1.5, 2.5, 3.5, 4.5], nameIndex1: 0, nameArray2: [1.5, 2.5, 3.5, 4.5], nameIndex2: 0, key: 2 }, 423 { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [1.5, 2.5, 3.5, 4.5], nameIndex1: 0, nameArray2: [1.5, 2.5, 3.5, 4.5], nameIndex2: 0, key: 2 },
418 { nameC: '双眼瞳距', nameE: '(PD)', nameArray1: [1.5, 2.5, 3.5, 4.5], nameIndex1: 0, nameArray2: [1.5, 2.5, 3.5, 4.5], nameIndex2: 0, key: 3 }, 424 { nameC: '双眼瞳距', nameE: '(PD)', nameArray1: [1.5, 2.5, 3.5, 4.5], nameIndex1: 0, nameArray2: [1.5, 2.5, 3.5, 4.5], nameIndex2: 0, key: 3 },
419 { nameC: '验光日期', nameE: '', nameArray1: [2017, 2018, 2019, 2020, 2021], nameIndex1: 0, nameArray2: [1, 2, 3, 4, 5, 6, 7], nameIndex2: 0, nameArray3: [1, 2, 3, 4, 5, 6], nameIndex3: 0 } 425 { nameC: '验光日期', nameE: '', nameArray1: [2017, 2018, 2019, 2020, 2021], nameIndex1: 0, nameArray2: [1, 2, 3, 4, 5, 6, 7], nameIndex2: 0, nameArray3: [1, 2, 3, 4, 5, 6], nameIndex3: 0 }
420 ] 426 ]
421 } 427 }
422 }, 428 },
423 computed: { 429 computed: {
424 attrList() { 430 attrList() {
425 return this.$store.state.read.goodInfo.attrList 431 return this.$store.state.read.goodInfo.attrList
426 }, 432 },
427 skuList() { 433 skuList() {
428 return this.$store.state.read.goodInfo.skuList 434 return this.$store.state.read.goodInfo.skuList
435 },
436 mpList() {
437 return this.$store.state.myLoveList.loveList
429 } 438 }
430 }, 439 },
431 onLoad({ pid }) { 440 onLoad({ pid }) {
432 this.pid = pid 441 this.pid = pid
433 store.dispatch('read/fetch', { 442 store.dispatch('read/fetch', {
434 pid 443 pid
435 }).then(() => { 444 }).then(() => {
436 const current = [] 445 const current = []
437 const show = [] 446 const show = []
438 for (let index = 0; index < this.attrList.length; index++) { 447 for (let index = 0; index < this.attrList.length; index++) {
439 current.push(0) 448 current.push(0)
440 show.push(true) 449 show.push(true)
441 } 450 }
442 this.current = current 451 this.current = current
443 this.show = show 452 this.show = show
444 }) 453 })
454 store.dispatch('myLoveList/getLoveList')
445 }, 455 },
446 methods: { 456 methods: {
457 // 是否填充人员数据
458 fillData(e) {
459 this.isDataName = false
460 console.log('e---->', e)
461 const mpList = this.mpList
462
463 for (let index = 0; index < mpList.length; index++) {
464 if (e.detail.value === mpList[index].name) {
465 this.isDataName = true
466 uni.showModal({
467 title: '提示',
468 content: `是否填充已有的${e.detail.value}的数据`,
469 success: ({ confirm }) => {
470 if (confirm) {
471 this.checkedData = mpList[index]
472 console.log('checkedData', this.checkedData)
473 }
474 }
475 })
476 }
477 }
478 },
447 change(num) { 479 change(num) {
448 this.show[num] = !this.show[num] 480 this.show[num] = !this.show[num]
449 this.$forceUpdate() 481 this.$forceUpdate()
450 }, 482 },
451 onClickItem(index, i) { 483 onClickItem(index, i) {
452 if (this.current[index] !== i) { 484 if (this.current[index] !== i) {
453 this.current[index] = i 485 this.current[index] = i
454 } 486 }
455 this.$forceUpdate() 487 this.$forceUpdate()
456 }, 488 },
457 onClickItem1(index) { 489 onClickItem1(index) {
458 if (this.current1 !== index) { 490 if (this.current1 !== index) {
459 this.current1 = index 491 this.current1 = index
460 this.chooseRes1 = this.chooseItem1[index].describ 492 this.chooseRes1 = this.chooseItem1[index].describ
461 } 493 }
462 }, 494 },
463 onClickItem2(index) { 495 onClickItem2(index) {
464 if (this.current2 !== index) { 496 if (this.current2 !== index) {
465 this.current2 = index 497 this.current2 = index
466 this.chooseRes2 = this.chooseItem2[index].num 498 this.chooseRes2 = this.chooseItem2[index].num
467 } 499 }
468 }, 500 },
469 onClickItem3(index) { 501 onClickItem3(index) {
470 if (this.current3 !== index) { 502 if (this.current3 !== index) {
471 this.current3 = index 503 this.current3 = index
472 this.chooseRes3 = this.chooseItem3[index] 504 this.chooseRes3 = this.chooseItem3[index]
473 } 505 }
474 }, 506 },
475 counter(isadd) { 507 counter(isadd) {
476 if (isadd) { 508 if (isadd) {
477 this.count >= this.maxCount ? this.addDisabled = true : this.count++ 509 this.count >= this.maxCount ? this.addDisabled = true : this.count++
478 } else { 510 } else {
479 this.count <= 1 ? this.desDisabled = true : this.count-- 511 this.count <= 1 ? this.desDisabled = true : this.count--
480 } 512 }
481 }, 513 },
482 toComfirmOrder() { 514 toComfirmOrder() {
515 let i = 0
516 // 判断出是哪一个sku被选中
517 for (let index = 0; index < this.current.length; index++) {
518 console.log('index', index, i, index !== this.current.length - 1)
519 if (index !== this.current.length - 1) {
520 console.log('----', this.current[index], this.attrList[1].attr.length, this.attrList)
521 i = this.current[index] * this.attrList[1].attr.length
522 } else {
523 i += this.current[index]
524 }
525 console.log('i', i)
526 }
527 console.log('i------>', i)
528 // 判断是否其输入的人员数据是否已存在
483 store.dispatch('order/saveParams', { 529 store.dispatch('order/saveParams', {
530 sk_id_arr: this.skuList[i],
484 current: this.current 531 current: this.current
485 }) 532 })
533
486 uni.navigateTo({ 534 uni.navigateTo({
487 url: `../confirmOrder/confirmOrder?pid=${this.pid}` 535 url: `../confirmOrder/confirmOrder?pid=${this.pid}`
488 }) 536 })
489 } 537 }
490 } 538 }
491 } 539 }
492 </script> 540 </script>
493 541
494 <style lang="scss"> 542 <style lang="scss">
495 .content { 543 .content {
496 min-height: 100vh; 544 min-height: 100vh;
497 background-color: #f2f2f2; 545 background-color: #f2f2f2;
498 // padding-top: 20rpx; 546 // padding-top: 20rpx;
499 .goodInfo { 547 .goodInfo {
500 width: 100%; 548 width: 100%;
501 height: 272rpx; 549 height: 272rpx;
502 border-radius: 16rpx; 550 border-radius: 16rpx;
503 background-color: #ffffff; 551 background-color: #ffffff;
504 box-sizing: border-box; 552 box-sizing: border-box;
505 padding: 36rpx; 553 padding: 36rpx;
506 display: flex; 554 display: flex;
507 flex-direction: row; 555 flex-direction: row;
508 justify-content: flex-start; 556 justify-content: flex-start;
509 .imageWrap { 557 .imageWrap {
510 height: 188rpx; 558 height: 188rpx;
511 width: 188rpx; 559 width: 188rpx;
512 margin-right: 28rpx; 560 margin-right: 28rpx;
513 image { 561 image {
514 height: 188rpx; 562 height: 188rpx;
515 width: 188rpx; 563 width: 188rpx;
516 } 564 }
517 } 565 }
518 .infoRight { 566 .infoRight {
519 display: flex; 567 display: flex;
520 flex-direction: column; 568 flex-direction: column;
521 align-items: flex-start; 569 align-items: flex-start;
522 justify-content: space-between; 570 justify-content: space-between;
523 .goodName { 571 .goodName {
524 font-size: 28rpx; 572 font-size: 28rpx;
525 color: #333333; 573 color: #333333;
526 } 574 }
527 .remarks { 575 .remarks {
528 font-size: 20rpx; 576 font-size: 20rpx;
529 color: #999999; 577 color: #999999;
530 } 578 }
531 .priceBox { 579 .priceBox {
532 display: flex; 580 display: flex;
533 justify-content: space-between; 581 justify-content: space-between;
534 align-items: center; 582 align-items: center;
535 width: 100%; 583 width: 100%;
536 font-size: 14px; 584 font-size: 14px;
537 color: #999999; 585 color: #999999;
538 .price { 586 .price {
539 color: #ff6b4a; 587 color: #ff6b4a;
540 font-size: 28rpx; 588 font-size: 28rpx;
541 } 589 }
542 .counter { 590 .counter {
543 display: flex; 591 display: flex;
544 flex-direction: row; 592 flex-direction: row;
545 justify-content: space-between; 593 justify-content: space-between;
546 align-items: center; 594 align-items: center;
547 font-size: 28rpx; 595 font-size: 28rpx;
548 color: #333333; 596 color: #333333;
549 width: 122rpx; 597 width: 122rpx;
550 .btn { 598 .btn {
551 display: flex; 599 display: flex;
552 justify-content: center; 600 justify-content: center;
553 line-height: 32rpx; 601 line-height: 32rpx;
554 height: 32rpx; 602 height: 32rpx;
555 width: 32rpx; 603 width: 32rpx;
556 background-color: #f2f2f2; 604 background-color: #f2f2f2;
557 color: #cfcfcf; 605 color: #cfcfcf;
558 } 606 }
559 } 607 }
560 } 608 }
561 } 609 }
562 } 610 }
563 .goods-data { 611 .goods-data {
564 width: 100%; 612 width: 100%;
565 box-sizing: border-box; 613 box-sizing: border-box;
566 padding: 37rpx 40rpx 0 40rpx; 614 padding: 37rpx 40rpx 0 40rpx;
567 background: #ffffff; 615 background: #ffffff;
568 border-radius: 12rpx; 616 border-radius: 12rpx;
569 .opCollapse { 617 .opCollapse {
570 width: 100%; 618 width: 100%;
571 padding-bottom: 28rpx; 619 padding-bottom: 28rpx;
572 margin-top: 7px; 620 margin-top: 7px;
573 border-bottom: 1px solid #e9e9e9; 621 border-bottom: 1px solid #e9e9e9;
574 .head { 622 .head {
575 display: flex; 623 display: flex;
576 justify-content: space-between; 624 justify-content: space-between;
577 height: 24px; 625 height: 24px;
578 // font-family: PingFangSC-Medium; 626 // font-family: PingFangSC-Medium;
579 font-size: 16px; 627 font-size: 16px;
580 color: #333333; 628 color: #333333;
581 letter-spacing: -0.3px; 629 letter-spacing: -0.3px;
582 text-align: justify; 630 text-align: justify;
583 line-height: 24px; 631 line-height: 24px;
584 margin-bottom: 18rpx; 632 margin-bottom: 18rpx;
585 .headRighted { 633 .headRighted {
586 width: 0; 634 width: 0;
587 height: 0; 635 height: 0;
588 border-left: 4px solid transparent; 636 border-left: 4px solid transparent;
589 border-right: 4px solid transparent; 637 border-right: 4px solid transparent;
590 border-bottom: 4px solid #cfcfcf; 638 border-bottom: 4px solid #cfcfcf;
591 transform: scaleY(-1); 639 transform: scaleY(-1);
592 margin-top: 10px; 640 margin-top: 10px;
593 } 641 }
594 .headMid { 642 .headMid {
595 // font-family: PingFangSC-Regular; 643 // font-family: PingFangSC-Regular;
596 font-size: 10px; 644 font-size: 10px;
597 color: #999999; 645 color: #999999;
598 letter-spacing: -0.19px; 646 letter-spacing: -0.19px;
599 margin-left: -120rpx; 647 margin-left: -120rpx;
600 } 648 }
601 .headRight { 649 .headRight {
602 width: 0; 650 width: 0;
603 height: 0; 651 height: 0;
604 border-left: 4px solid transparent; 652 border-left: 4px solid transparent;
605 border-right: 4px solid transparent; 653 border-right: 4px solid transparent;
606 border-bottom: 4px solid #cfcfcf; 654 border-bottom: 4px solid #cfcfcf;
607 margin-top: 10px; 655 margin-top: 10px;
608 } 656 }
609 } 657 }
610 .body { 658 .body {
611 // font-family: PingFangSC-Regular; 659 // font-family: PingFangSC-Regular;
612 font-size: 12px; 660 font-size: 12px;
613 color: #666666; 661 color: #666666;
614 letter-spacing: 0; 662 letter-spacing: 0;
615 .bodyBox { 663 .bodyBox {
616 margin-top: 15px; 664 margin-top: 15px;
617 .names { 665 .names {
618 // font-family: PingFangSC-Regular; 666 // font-family: PingFangSC-Regular;
619 font-size: 12px; 667 font-size: 12px;
620 color: #151515; 668 color: #151515;
621 letter-spacing: 0; 669 letter-spacing: 0;
622 text-align: justify; 670 text-align: justify;
623 line-height: 17px; 671 line-height: 17px;
624 margin-left: 5px; 672 margin-left: 5px;
625 margin-right: 10px; 673 margin-right: 10px;
626 } 674 }
627 text { 675 text {
628 // font-family: PingFangSC-Regular; 676 // font-family: PingFangSC-Regular;
629 font-size: 12px; 677 font-size: 12px;
630 color: #666666; 678 color: #666666;
631 letter-spacing: 0; 679 letter-spacing: 0;
632 text-align: justify; 680 text-align: justify;
633 } 681 }
634 } 682 }
635 } 683 }
636 .goods-form { 684 .goods-form {
637 display: flex; 685 display: flex;
638 flex-direction: column; 686 flex-direction: column;
639 align-items: center; 687 align-items: center;
640 justify-content: center; 688 justify-content: center;
641 background-color: #fff; 689 background-color: #fff;
642 width: 100%; 690 width: 100%;
643 .p1 { 691 .p1 {
644 font-size: 16px; 692 font-size: 16px;
645 color: #333333; 693 color: #333333;
646 letter-spacing: -0.3px; 694 letter-spacing: -0.3px;
647 text-align: justify; 695 text-align: justify;
648 line-height: 24px; 696 line-height: 24px;
649 margin: 4px 0; 697 margin: 4px 0;
650 } 698 }
651 .p2 { 699 .p2 {
652 font-size: 12px; 700 font-size: 12px;
653 color: #999999; 701 color: #999999;
654 letter-spacing: -0.23px; 702 letter-spacing: -0.23px;
655 margin-bottom: 18rpx; 703 margin-bottom: 18rpx;
656 } 704 }
657 image { 705 image {
658 width: 28rpx; 706 width: 28rpx;
659 height: 26rpx; 707 height: 26rpx;
660 } 708 }
661 .confirm { 709 .confirm {
662 display: flex; 710 display: flex;
663 align-items: center; 711 align-items: center;
664 font-size: 12px; 712 font-size: 12px;
665 color: #666666; 713 color: #666666;
666 letter-spacing: -0.23px; 714 letter-spacing: -0.23px;
667 width: 684rpx; 715 width: 684rpx;
668 image { 716 image {
669 margin-right: 25rpx; 717 margin-right: 25rpx;
670 } 718 }
671 } 719 }
672 .picker { 720 .picker {
673 display: flex; 721 display: flex;
674 flex-direction: column; 722 flex-direction: column;
675 justify-content: center; 723 justify-content: center;
676 align-items: center; 724 align-items: center;
677 width: 100%; 725 width: 100%;
678 image { 726 image {
679 width: 10px; 727 width: 10px;
680 height: 10px; 728 height: 10px;
681 margin-right: 5px; 729 margin-right: 5px;
682 } 730 }
683 .picker-choice { 731 .picker-choice {
684 display: flex; 732 display: flex;
685 width: 684rpx; 733 width: 684rpx;
686 align-items: center; 734 align-items: center;
687 margin-bottom: 40rpx; 735 margin-bottom: 40rpx;
688 .choice-left { 736 .choice-left {
689 width: 210rpx; 737 width: 210rpx;
690 .p11 { 738 .p11 {
691 font-size: 14px; 739 font-size: 14px;
692 color: #333333; 740 color: #333333;
693 letter-spacing: -0.26px; 741 letter-spacing: -0.26px;
694 text-align: justify; 742 text-align: justify;
695 line-height: 24px; 743 line-height: 24px;
696 } 744 }
697 .p12 { 745 .p12 {
698 font-size: 10px; 746 font-size: 10px;
699 color: #3f3f3f; 747 color: #3f3f3f;
700 letter-spacing: -0.19px; 748 letter-spacing: -0.19px;
701 text-align: justify; 749 text-align: justify;
702 line-height: 24px; 750 line-height: 24px;
703 } 751 }
704 } 752 }
705 .p13 { 753 .p13 {
706 font-size: 10px; 754 font-size: 10px;
707 color: #999999; 755 color: #999999;
708 letter-spacing: -0.19px; 756 letter-spacing: -0.19px;
709 margin-right: 10px; 757 margin-right: 10px;
710 } 758 }
711 .p13-date { 759 .p13-date {
712 font-size: 10px; 760 font-size: 10px;
713 color: #999999; 761 color: #999999;
714 letter-spacing: -0.19px; 762 letter-spacing: -0.19px;
715 margin-right: 5px; 763 margin-right: 5px;
716 } 764 }
717 .p14 { 765 .p14 {
718 font-size: 14px; 766 font-size: 14px;
719 color: #666666; 767 color: #666666;
720 letter-spacing: -0.26px; 768 letter-spacing: -0.26px;
721 text-align: center; 769 text-align: center;
722 width: 124rpx; 770 width: 124rpx;
723 border-bottom: 1px solid #cfcfcf; 771 border-bottom: 1px solid #cfcfcf;
724 } 772 }
725 } 773 }
726 } 774 }
727 } 775 }
728 } 776 }
729 } 777 }
730 .choose { 778 .choose {
731 width: 100%; 779 width: 100%;
732 background: #ffffff; 780 background: #ffffff;
733 border-radius: 12rpx; 781 border-radius: 12rpx;
734 margin-top: 20rpx; 782 margin-top: 20rpx;
735 padding: 40rpx 40rpx 112rpx 40rpx; 783 padding: 40rpx 40rpx 112rpx 40rpx;
736 box-sizing: border-box; 784 box-sizing: border-box;
737 .chooseItem { 785 .chooseItem {
738 width: 100%; 786 width: 100%;
739 padding-bottom: 32rpx; 787 padding-bottom: 32rpx;
740 border-bottom: 1px solid #e9e9e9; 788 border-bottom: 1px solid #e9e9e9;
741 margin-bottom: 28rpx; 789 margin-bottom: 28rpx;
742 } 790 }
743 .chooseRes { 791 .chooseRes {
744 font-size: 12px; 792 font-size: 12px;
745 color: #666666; 793 color: #666666;
746 } 794 }
747 .itemsWrap { 795 .itemsWrap {
748 display: flex; 796 display: flex;
749 flex-direction: row; 797 flex-direction: row;
750 flex-wrap: wrap; 798 flex-wrap: wrap;
751 justify-content: flex-start; 799 justify-content: flex-start;
752 align-items: center; 800 align-items: center;
753 padding-top: 24rpx; 801 padding-top: 24rpx;
754 .item1 { 802 .item1 {
755 width: 64rpx; 803 width: 64rpx;
756 height: 64rpx; 804 height: 64rpx;
757 border-radius: 32rpx; 805 border-radius: 32rpx;
758 margin: 0 36rpx 24rpx 0; 806 margin: 0 36rpx 24rpx 0;
759 transition: all 0.3s; 807 transition: all 0.3s;
760 border: 1px solid #ffffff; 808 border: 1px solid #ffffff;
761 } 809 }
762 .item2 { 810 .item2 {
763 // width: 100rpx; 811 // width: 100rpx;
764 padding: 0 30rpx; 812 padding: 0 30rpx;
765 height: 60rpx; 813 height: 60rpx;
766 margin: 0 20rpx 20rpx 0; 814 margin: 0 20rpx 20rpx 0;
767 transition: all 0.3s; 815 transition: all 0.3s;
768 background: #f2f2f2; 816 background: #f2f2f2;
769 border-radius: 2px; 817 border-radius: 2px;
770 border-radius: 2px; 818 border-radius: 2px;
771 line-height: 60rpx; 819 line-height: 60rpx;
772 text-align: center; 820 text-align: center;
773 color: #666666; 821 color: #666666;
774 font-size: 12px; 822 font-size: 12px;
775 } 823 }
776 .active1 { 824 .active1 {
777 opacity: 0.7; 825 opacity: 0.7;
778 border: 1px solid #ff6b4a; 826 border: 1px solid #ff6b4a;
779 } 827 }
780 .active2 { 828 .active2 {
781 background: rgba(255, 107, 74, 0.15); 829 background: rgba(255, 107, 74, 0.15);
782 color: #ff6b4a; 830 color: #ff6b4a;
783 } 831 }
784 } 832 }
785 } 833 }
786 .button { 834 .button {
787 width: 100%; 835 width: 100%;
788 height: 112rpx; 836 height: 112rpx;
789 background-color: #ff6b4a; 837 background-color: #ff6b4a;
790 font-size: 16px; 838 font-size: 16px;
791 color: #ffffff; 839 color: #ffffff;
792 line-height: 112rpx; 840 line-height: 112rpx;
793 text-align: center; 841 text-align: center;
794 position: fixed; 842 position: fixed;
795 bottom: 0; 843 bottom: 0;
796 left: 0; 844 left: 0;
797 } 845 }
798 } 846 }
799 </style> 847 </style>
800 848
src/store/modules/myLoveList.js
Diff comments   View file @4cafd66
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 mylovelist, 5 mylovelist,
6 myloveadd, 6 myloveadd,
7 myloveupdate 7 myloveupdate
8 } = urlAlias; 8 } = urlAlias
9 9
10 const state = { 10 const state = {
11 loveList: [], 11 loveList: []
12 }; 12 }
13 13
14 const mutations = { 14 const mutations = {
15 INIT: (state, data) => { 15 INIT: (state, data) => {
16 state.loveList = data; 16 state.loveList = data
17 }, 17 },
18 // 更新关心人验光单 18 // 更新关心人验光单
19 UPDATE:(state, data) => { 19 UPDATE: (state, data) => {
20 // state.loveList.push(data) 20 // state.loveList.push(data)
21 // console.log('UPDATA=====>',data) 21 // console.log('UPDATA=====>',data)
22 } 22 }
23 }; 23 }
24 24
25 const actions = { 25 const actions = {
26 getLoveList({ commit }, param) { 26 getLoveList({ commit }, param) {
27 request({ 27 request({
28 url: mylovelist, 28 url: mylovelist,
29 data: param, 29 data: param,
30 success: (res) => { 30 success: (res) => {
31 // console.log(res.data); 31 // console.log(res.data);
32 commit("INIT", res.data.data); 32 commit('INIT', res.data.data)
33 }, 33 }
34 }) 34 })
35 }, 35 },
36 addMylove({ commit }, param) { 36 addMylove({ commit }, param) {
37 37 console.log('myloveupdate-parm====>', param)
38 console.log('myloveupdate-parm====>',param) 38 request({
39 request({ 39 url: myloveadd,
40 url: myloveadd, 40 data: param,
41 data: param, 41 success: (res) => {
42 success: (res) => { 42 console.log('addMylove-parm====>', param)
43 console.log('addMylove-parm====>',param) 43 console.log(res.data)
44 console.log(res.data); 44 // commit("ADD", args);
45 // commit("ADD", args); 45 }
46 },
47 }) 46 })
48 }, 47 },
49 updateMylove({ commit }, param) { 48 updateMylove({ commit }, param) {
50 request({ 49 request({
51 url: myloveupdate, 50 url: myloveupdate,
52 data: param, 51 data: param,
53 success: (res) => { 52 success: (res) => {
54 console.log('myloveupdate-parm====>',param) 53 console.log('myloveupdate-parm====>', param)
55 console.log(res); 54 console.log(res)
56 // commit("UPDATE", param); 55 // commit("UPDATE", param);
57 }, 56 }
58 }) 57 })
59 },
60
61 }
62
63 export default {
64 namespaced: true,
65 state,
66 mutations,
67 actions,
68 }
src/store/modules/order.js
Diff comments   View file @4cafd66
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { orderBuild } = urlAlias 4 const { orderBuild } = urlAlias
5 5
6 const state = { list: [], param: [] } 6 const state = { list: [], param: {} }
7 7
8 const mutations = { 8 const mutations = {
9 LIST: (state, list) => { 9 LIST: (state, list) => {
10 state.list = list 10 state.list = list
11 }, 11 },
12 SAVE: (state, param) => { 12 SAVE: (state, param) => {
13 state.param = param 13 state.param = param
14 } 14 }
15 } 15 }
16 16
17 const actions = { 17 const actions = {
18 build({ commit }, param) { 18 build({ commit }, param) {
19 return new Promise((resolve, reject) => request({ 19 return new Promise((resolve, reject) => request({
20 url: orderBuild, 20 url: orderBuild,
21 data: param, 21 data: param,
22 success: (res) => { 22 success: (res) => {
23 resolve() 23 resolve()
24 }, 24 },
25 fail: () => { 25 fail: () => {
26 uni.showModal({ 26 uni.showModal({
27 content: '订单生成失败', 27 content: '订单生成失败',
28 showCancel: false 28 showCancel: false
29 }) 29 })
30 } 30 }
31 })) 31 }))
32 }, 32 },
33 saveParams({ commit }, param) { 33 saveParams({ commit }, param) {
34 console.log('save', param) 34 console.log('save', param)
35 commit('SAVE', param) 35 commit('SAVE', param)
36 } 36 }
37 } 37 }
38 38
39 export default { 39 export default {
40 namespaced: true, 40 namespaced: true,
41 state, 41 state,
42 mutations, 42 mutations,
43 actions 43 actions
44 } 44 }
45 45
src/store/request.js
Diff comments   View file @4cafd66
1 const DOMAIN = 'https://api.glass.xiuyetang.com'; 1 const DOMAIN = 'https://api.glass.xiuyetang.com'
2 2
3 export default async function request({ 3 export default async function request({
4 url, 4 url,
5 method = "post", 5 method = 'post',
6 data = {}, 6 data = {},
7 header = { 7 header = {
8 "Content-Type": "application/x-www-form-urlencoded", 8 'Content-Type': 'application/x-www-form-urlencoded'
9 }, 9 },
10 timeout = 3000, 10 timeout = 3000,
11 withCredentials = false, // 跨域请求时是否携带凭证（cookies） 11 withCredentials = false, // 跨域请求时是否携带凭证（cookies）
12 // sslVerify: true, // 验证 ssl 证书 12 // sslVerify: true, // 验证 ssl 证书
13 success, 13 success,
14 fail = (res) => { 14 fail = (res) => {
15 console.log("fail status === > ", res); 15 console.log('fail status === > ', res)
16 }, 16 },
17 complete = (res) => { 17 complete = (res) => {
18 console.log("complete status === > ", res); 18 console.log('complete status === > ', res)
19 }, 19 }
20 }) { 20 }) {
21 const uid = uni.getStorageSync('uid');
22 data = {
23 uid,
24 ...data,
25 };
26 uni
27 .request({
28 url: DOMAIN + url,
29 method,
30 data,
31 header,
32 timeout,
33 withCredentials,
34 success,
35 fail,
36 complete,
37 })
38 }
21 const uid = uni.getStorageSync('uid')
22 const openid = uni.getStorageSync('uid')
23 data = {