Commit 87eade40919a8dc2d6c79325dabc77e5c45cb0e3
1 parent
7a7226feae
Exists in
master
验光数据填充检测
Showing
7 changed files
with
162 additions
and
108 deletions
Show diff stats
src/pages.json
| 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
| 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
| 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.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>订单号：{{orderInfo.prepay_id}}</text> | 86 | <text>订单号：{{payId}}</text> |
| 87 | </text> | 87 | </text> |
| 88 | <text class="order-info-time"> | 88 | <text class="order-info-time"> |
| 89 | <text>下单时间：{{orderInfo.pay_time}}</text> | 89 | <text>下单时间：{{orderInfo.order_info[0].pay_time}}</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 | status: '', | 135 | status: '', |
| 137 | uid: '', | 136 | uid: '', |
| 138 | openid: '', | 137 | openid: '', |
| 139 | lefttime: 0 | 138 | lefttime: 0 |
| 140 | |||
| 141 | } | 139 | } |
| 142 | }, | 140 | }, |
| 143 | onLoad: function (option) { | 141 | onLoad: function (option) { |
| 144 | console.log(option) | 142 | console.log(option) |
| 145 | this.payId = option.payId | 143 | this.payId = option.payId |
| 146 | this.status = option.status | 144 | this.status = option.status |
| 147 | const openid = uni.getStorageSync('openid') | 145 | const openid = uni.getStorageSync('openid') |
| 148 | const uid = this.$store.state.user.uid | 146 | const uid = this.$store.state.user.uid |
| 149 | this.uid = uid | 147 | this.uid = uid |
| 150 | this.openid = openid | 148 | this.openid = openid |
| 151 | store.dispatch('orderRead/getOrderInfo', { | 149 | store.dispatch('orderRead/getOrderInfo', { |
| 152 | pay_id: this.payId, | 150 | pay_id: this.payId, |
| 153 | uid: '1', | 151 | uid: '1', |
| 154 | openid: openid | 152 | openid: openid |
| 155 | }) | 153 | }) |
| 156 | 154 | ||
| 157 | // this.orderInfo = this.$store.state.orderRead.orderInfo | 155 | // this.orderInfo = this.$store.state.orderRead.orderInfo |
| 158 | }, | 156 | }, |
| 159 | computed: { | 157 | computed: { |
| 160 | // 获取订单详细信息 | 158 | // 获取订单详细信息 |
| 161 | orderInfo () { | 159 | orderInfo () { |
| 162 | console.log(this.$store.state.orderRead.orderInfo) | 160 | console.log('orderInfo', this.$store.state.orderRead.orderInfo) |
| 163 | return this.$store.state.orderRead.orderInfo || {} | 161 | return this.$store.state.orderRead.orderInfo || {} |
| 164 | }, | 162 | }, |
| 165 | orderInfoList () { | 163 | orderInfoList () { |
| 166 | const orderInfoList = this.orderInfo.order_info[0].list | 164 | const orderInfoList = this.orderInfo.order_info[0].list |
| 167 | return orderInfoList | 165 | return orderInfoList |
| 168 | }, | 166 | }, |
| 169 | // 获取订单地址信息 | 167 | // 获取订单地址信息 |
| 170 | orderAddressInfo () { | 168 | orderAddressInfo () { |
| 171 | return this.orderInfo.order_info[0].address | 169 | return this.orderInfo.order_info[0].address |
| 172 | }, | 170 | }, |
| 173 | // 订单付款时间 | 171 | // 订单付款时间 |
| 174 | getTime () { | 172 | getTime () { |
| 175 | return this.orderInfo.order_info[0].lefttime | 173 | return this.orderInfo.order_info[0].lefttime |
| 176 | }, | 174 | }, |
| 177 | // 计算总优惠额 | 175 | // 计算总优惠额 |
| 178 | totalDiscount () { | 176 | totalDiscount () { |
| 179 | const discountInfoList = this.orderInfo.discount_info | 177 | const discountInfoList = this.orderInfo.discount_info |
| 180 | let totalDiscount = 0 | 178 | let totalDiscount = 0 |
| 181 | if (discountInfoList) { | 179 | if (discountInfoList) { |
| 182 | discountInfoList.map((discountItem, index) => { | 180 | discountInfoList.map((discountItem, index) => { |
| 183 | totalDiscount += Number(discountItem.value) | 181 | totalDiscount += Number(discountItem.value) |
| 184 | }) | 182 | }) |
| 185 | } | 183 | } |
| 186 | // console.log(totalDiscount) | 184 | // console.log(totalDiscount) |
| 187 | return totalDiscount | 185 | return totalDiscount |
| 188 | } | 186 | } |
| 189 | }, | 187 | }, |
| 190 | methods: { | 188 | methods: { |
| 191 | // 取消订单 | 189 | // 取消订单 |
| 192 | timeup () { | 190 | timeup () { |
| 193 | this.cancleOrder() | 191 | this.cancleOrder() |
| 194 | }, | 192 | }, |
| 195 | cancleOrder () { | 193 | cancleOrder () { |
| 196 | const uid = this.uid | 194 | const uid = this.uid |
| 197 | const openid = this.openid | 195 | const openid = this.openid |
| 198 | uni.showModal({ | 196 | uni.showModal({ |
| 199 | title: '提示', | 197 | title: '提示', |
| 200 | content: '现在取消，订单不可恢复哦，确认取消吗？', | 198 | content: '现在取消，订单不可恢复哦，确认取消吗？', |
| 201 | success: function (res) { | 199 | success: function (res) { |
| 202 | if (res.confirm) { | 200 | if (res.confirm) { |
| 203 | store.dispatch('cancelOrder/cancel', { | 201 | store.dispatch('cancelOrder/cancel', { |
| 204 | keyname: '1', | 202 | keyname: '1', |
| 205 | uid: uid, | 203 | uid: uid, |
| 206 | openid: openid | 204 | openid: openid |
| 207 | }) | 205 | }) |
| 208 | } else if (res.cancel) { | 206 | } else if (res.cancel) { |
| 209 | console.log('用户点击取消') | 207 | console.log('用户点击取消') |
| 210 | } | 208 | } |
| 211 | } | 209 | } |
| 212 | }) | 210 | }) |
| 213 | }, | 211 | }, |
| 214 | paylog () { | 212 | paylog () { |
| 215 | 213 | ||
| 216 | }, | 214 | }, |
| 217 | confirmOrder () { | 215 | confirmOrder () { |
| 218 | store.dispatch('statusConfirm/confirm', { | 216 | store.dispatch('statusConfirm/confirm', { |
| 219 | uid: this.uid, | 217 | uid: this.uid, |
| 220 | openid: this.openid, | 218 | openid: this.openid, |
| 221 | oldway: '1', | 219 | oldway: '1', |
| 222 | way: '2', | 220 | way: '2', |
| 223 | pay_id: this.payId, | 221 | pay_id: this.payId, |
| 224 | judgeContent: '', | 222 | judgeContent: '', |
| 225 | orderInfo: this.orderInfo.order_info | 223 | orderInfo: this.orderInfo.order_info |
| 226 | }).then( | 224 | }).then( |
| 227 | setTimeout(() => { | 225 | setTimeout(() => { |
| 228 | uni.navigateBack() | 226 | uni.navigateBack() |
| 229 | }, 1500) | 227 | }, 1500) |
| 230 | ) | 228 | ) |
| 231 | } | 229 | } |
| 232 | } | 230 | } |
| 233 | } | 231 | } |
| 234 | </script> | 232 | </script> |
| 235 | 233 | ||
| 236 | <style lang="scss" scoped> | 234 | <style lang="scss" scoped> |
| 237 | .content { | 235 | .content { |
| 238 | min-height: 100vh; | 236 | min-height: 100vh; |
| 239 | display: flex; | 237 | display: flex; |
| 240 | flex-direction: column; | 238 | flex-direction: column; |
| 241 | justify-content: flex-start; | 239 | justify-content: flex-start; |
| 242 | align-items: center; | 240 | align-items: center; |
| 243 | background-color: #f2f2f2; | 241 | background-color: #f2f2f2; |
| 244 | } | 242 | } |
| 245 | 243 | ||
| 246 | .order { | 244 | .order { |
| 247 | margin-bottom: 112rpx; | 245 | margin-bottom: 112rpx; |
| 248 | background: #f2f2f2; | 246 | background: #f2f2f2; |
| 249 | margin-top: 140rpx; | 247 | margin-top: 140rpx; |
| 250 | width: 670rpx; | 248 | width: 670rpx; |
| 251 | } | 249 | } |
| 252 | 250 | ||
| 253 | .order-time { | 251 | .order-time { |
| 254 | width: 100%; | 252 | width: 100%; |
| 255 | height: 140rpx; | 253 | height: 140rpx; |
| 256 | background-color: #fff; | 254 | background-color: #fff; |
| 257 | display: flex; | 255 | display: flex; |
| 258 | justify-content: center; | 256 | justify-content: center; |
| 259 | align-items: center; | 257 | align-items: center; |
| 260 | position: fixed; | 258 | position: fixed; |
| 261 | top: 0; | 259 | top: 0; |
| 262 | left: 0; | 260 | left: 0; |
| 263 | text { | 261 | text { |
| 264 | // font-family: PingFangSC-Regular; | 262 | // font-family: PingFangSC-Regular; |
| 265 | // margin-top: 48rpx; | 263 | // margin-top: 48rpx; |
| 266 | font-size: 14px; | 264 | font-size: 14px; |
| 267 | color: #333333; | 265 | color: #333333; |
| 268 | letter-spacing: -0.26px; | 266 | letter-spacing: -0.26px; |
| 269 | } | 267 | } |
| 270 | .p2 { | 268 | .p2 { |
| 271 | // font-family: DINAlternate-Bold; | 269 | // font-family: DINAlternate-Bold; |
| 272 | margin: 42rpx 20rpx 0 20rpx; | 270 | margin: 42rpx 20rpx 0 20rpx; |
| 273 | font-size: 18px; | 271 | font-size: 18px; |
| 274 | color: #ec5d3b; | 272 | color: #ec5d3b; |
| 275 | letter-spacing: -0.34px; | 273 | letter-spacing: -0.34px; |
| 276 | } | 274 | } |
| 277 | } | 275 | } |
| 278 | .headerBanner { | 276 | .headerBanner { |
| 279 | width: 100%; | 277 | width: 100%; |
| 280 | height: 140rpx; | 278 | height: 140rpx; |
| 281 | background: #4a90e2; | 279 | background: #4a90e2; |
| 282 | padding: 26rpx 60rpx 24rpx 60rpx; | 280 | padding: 26rpx 60rpx 24rpx 60rpx; |
| 283 | box-sizing: border-box; | 281 | box-sizing: border-box; |
| 284 | color: #ffffff; | 282 | color: #ffffff; |
| 285 | display: flex; | 283 | display: flex; |
| 286 | justify-content: space-between; | 284 | justify-content: space-between; |
| 287 | align-items: center; | 285 | align-items: center; |
| 288 | position: fixed; | 286 | position: fixed; |
| 289 | top: 0; | 287 | top: 0; |
| 290 | left: 0; | 288 | left: 0; |
| 291 | .bannerLeft { | 289 | .bannerLeft { |
| 292 | font-size: 36rpx; | 290 | font-size: 36rpx; |
| 293 | display: flex; | 291 | display: flex; |
| 294 | flex-direction: column; | 292 | flex-direction: column; |
| 295 | justify-content: center; | 293 | justify-content: center; |
| 296 | align-items: center; | 294 | align-items: center; |
| 297 | .T2 { | 295 | .T2 { |
| 298 | font-size: 24rpx; | 296 | font-size: 24rpx; |
| 299 | } | 297 | } |
| 300 | } | 298 | } |
| 301 | image { | 299 | image { |
| 302 | height: 56rpx; | 300 | height: 56rpx; |
| 303 | width: 72rpx; | 301 | width: 72rpx; |
| 304 | } | 302 | } |
| 305 | } | 303 | } |
| 306 | 304 | ||
| 307 | .order-user { | 305 | .order-user { |
| 308 | height: 228rpx; | 306 | height: 228rpx; |
| 309 | background: #ffffff; | 307 | background: #ffffff; |
| 310 | border-radius: 14rpx; | 308 | border-radius: 14rpx; |
| 311 | margin: 0 auto; | 309 | margin: 0 auto; |
| 312 | margin-top: 20rpx; | 310 | margin-top: 20rpx; |
| 313 | margin-bottom: 20rpx; | 311 | margin-bottom: 20rpx; |
| 314 | .order-user-head { | 312 | .order-user-head { |
| 315 | display: flex; | 313 | display: flex; |
| 316 | height: 108rpx; | 314 | height: 108rpx; |
| 317 | align-items: center; | 315 | align-items: center; |
| 318 | margin-left: 126rpx; | 316 | margin-left: 126rpx; |
| 319 | .p1 { | 317 | .p1 { |
| 320 | // font-family: PingFangSC-Regular; | 318 | // font-family: PingFangSC-Regular; |
| 321 | font-size: 14px; | 319 | font-size: 14px; |
| 322 | color: #333333; | 320 | color: #333333; |
| 323 | letter-spacing: -0.26px; | 321 | letter-spacing: -0.26px; |
| 324 | margin-right: 20rpx; | 322 | margin-right: 20rpx; |
| 325 | } | 323 | } |
| 326 | .p2 { | 324 | .p2 { |
| 327 | // font-family: PingFangSC-Regular; | 325 | // font-family: PingFangSC-Regular; |
| 328 | font-size: 14px; | 326 | font-size: 14px; |
| 329 | color: #999999; | 327 | color: #999999; |
| 330 | letter-spacing: -0.26px; | 328 | letter-spacing: -0.26px; |
| 331 | } | 329 | } |
| 332 | } | 330 | } |
| 333 | .order-user-body { | 331 | .order-user-body { |
| 334 | display: flex; | 332 | display: flex; |
| 335 | width: 100%; | 333 | width: 100%; |
| 336 | image { | 334 | image { |
| 337 | width: 24px; | 335 | width: 24px; |
| 338 | height: 26px; | 336 | height: 26px; |
| 339 | margin: 12rpx 32rpx 0 40rpx; | 337 | margin: 12rpx 32rpx 0 40rpx; |
| 340 | } | 338 | } |
| 341 | .p3 { | 339 | .p3 { |
| 342 | // font-family: PingFangSC-Semibold; | 340 | // font-family: PingFangSC-Semibold; |
| 343 | font-size: 14px; | 341 | font-size: 14px; |
| 344 | color: #333333; | 342 | color: #333333; |
| 345 | letter-spacing: -0.26px; | 343 | letter-spacing: -0.26px; |
| 346 | } | 344 | } |
| 347 | } | 345 | } |
| 348 | } | 346 | } |
| 349 | 347 | ||
| 350 | .order-info { | 348 | .order-info { |
| 351 | background-color: #fff; | 349 | background-color: #fff; |
| 352 | box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); | 350 | box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); |
| 353 | border-radius: 16rpx; | 351 | border-radius: 16rpx; |
| 354 | margin: 0 auto; | 352 | margin: 0 auto; |
| 355 | view { | 353 | view { |
| 356 | margin-left: 40rpx; | 354 | margin-left: 40rpx; |
| 357 | } | 355 | } |
| 358 | text { | 356 | text { |
| 359 | font-size: 14px; | 357 | font-size: 14px; |
| 360 | } | 358 | } |
| 361 | .order-info-head { | 359 | .order-info-head { |
| 362 | display: flex; | 360 | display: flex; |
| 363 | padding-top: 40rpx; | 361 | padding-top: 40rpx; |
| 364 | image { | 362 | image { |
| 365 | height: 188rpx; | 363 | height: 188rpx; |
| 366 | width: 188rpx; | 364 | width: 188rpx; |
| 367 | } | 365 | } |
| 368 | .order-info-head-r { | 366 | .order-info-head-r { |
| 369 | margin: 0; | 367 | margin: 0; |
| 370 | width: 368rpx; | 368 | width: 368rpx; |
| 371 | margin-left: 24rpx; | 369 | margin-left: 24rpx; |
| 372 | // margin-top: 40rpx; | 370 | // margin-top: 40rpx; |
| 373 | text { | 371 | text { |
| 374 | display: block; | 372 | display: block; |
| 375 | } | 373 | } |
| 376 | // .arrow{ | 374 | // .arrow{ |
| 377 | // width: 0; | 375 | // width: 0; |
| 378 | // height: 0; | 376 | // height: 0; |
| 379 | // border-left: 5px transparent; | 377 | // border-left: 5px transparent; |
| 380 | // border-right: 5px transparent; | 378 | // border-right: 5px transparent; |
| 381 | // border-top: 5px #979797; | 379 | // border-top: 5px #979797; |
| 382 | // border-bottom: 0 transparent; | 380 | // border-bottom: 0 transparent; |
| 383 | // border-style: solid; | 381 | // border-style: solid; |
| 384 | // position: relative; | 382 | // position: relative; |
| 385 | // // transform: scaleY(-1); | 383 | // // transform: scaleY(-1); |
| 386 | // } | 384 | // } |
| 387 | // .arrow::after{ | 385 | // .arrow::after{ |
| 388 | // content: ''; | 386 | // content: ''; |
| 389 | // position: absolute; | 387 | // position: absolute; |
| 390 | // top: -6.5px; | 388 | // top: -6.5px; |
| 391 | // left: -5px; | 389 | // left: -5px; |
| 392 | // border-left: 5px transparent; | 390 | // border-left: 5px transparent; |
| 393 | // border-right: 5px transparent; | 391 | // border-right: 5px transparent; |
| 394 | // border-top: 5px #FFFFFF; | 392 | // border-top: 5px #FFFFFF; |
| 395 | // border-bottom: 0 transparent; | 393 | // border-bottom: 0 transparent; |
| 396 | // border-style: solid; | 394 | // border-style: solid; |
| 397 | // } | 395 | // } |
| 398 | .p1 { | 396 | .p1 { |
| 399 | min-height: 40px; | 397 | min-height: 40px; |
| 400 | // font-family: PingFangSC-Regular; | 398 | // font-family: PingFangSC-Regular; |
| 401 | font-size: 14px; | 399 | font-size: 14px; |
| 402 | color: #333333; | 400 | color: #333333; |
| 403 | letter-spacing: -0.26px; | 401 | letter-spacing: -0.26px; |
| 404 | line-height: 18px; | 402 | line-height: 18px; |
| 405 | // line-height: 20px; | 403 | // line-height: 20px; |
| 406 | } | 404 | } |
| 407 | .p2 { | 405 | .p2 { |
| 408 | height: 34px; | 406 | height: 34px; |
| 409 | padding: 1px 0 3px 0; | 407 | padding: 1px 0 3px 0; |
| 410 | // font-family: PingFangSC-Regular; | 408 | // font-family: PingFangSC-Regular; |
| 411 | font-size: 12px; | 409 | font-size: 12px; |
| 412 | color: #999999; | 410 | color: #999999; |
| 413 | letter-spacing: -0.23px; | 411 | letter-spacing: -0.23px; |
| 414 | } | 412 | } |
| 415 | .infoText-bottom { | 413 | .infoText-bottom { |
| 416 | display: flex; | 414 | display: flex; |
| 417 | flex-direction: row; | 415 | flex-direction: row; |
| 418 | justify-content: flex-start; | 416 | justify-content: flex-start; |
| 419 | align-items: center; | 417 | align-items: center; |
| 420 | width: 100%; | 418 | width: 100%; |
| 421 | margin-left: 0; | 419 | margin-left: 0; |
| 422 | .markPrice { | 420 | .markPrice { |
| 423 | font-size: 14px; | 421 | font-size: 14px; |
| 424 | color: #ff6b4a; | 422 | color: #ff6b4a; |
| 425 | margin-right: 20rpx; | 423 | margin-right: 20rpx; |
| 426 | margin-left: 0rpx; | 424 | margin-left: 0rpx; |
| 427 | } | 425 | } |
| 428 | .buy-num { | 426 | .buy-num { |
| 429 | font-size: 12px; | 427 | font-size: 12px; |
| 430 | color: #999999; | 428 | color: #999999; |
| 431 | } | 429 | } |
| 432 | } | 430 | } |
| 433 | } | 431 | } |
| 434 | } | 432 | } |
| 435 | // .order-info-goodsnum { | 433 | // .order-info-goodsnum { |
| 436 | // display: flex; | 434 | // display: flex; |
| 437 | // align-items: center; | 435 | // align-items: center; |
| 438 | // justify-content: flex-end; | 436 | // justify-content: flex-end; |
| 439 | // text { | 437 | // text { |
| 440 | // margin-right: 44rpx; | 438 | // margin-right: 44rpx; |
| 441 | // // ont-family: PingFangSC-Regular; | 439 | // // ont-family: PingFangSC-Regular; |
| 442 | // font-size: 12px; | 440 | // font-size: 12px; |
| 443 | // color: #999999; | 441 | // color: #999999; |
| 444 | // letter-spacing: -0.23px; | 442 | // letter-spacing: -0.23px; |
| 445 | // } | 443 | // } |
| 446 | // } | 444 | // } |
| 447 | .order-info-freight { | 445 | .order-info-freight { |
| 448 | display: block; | 446 | display: block; |
| 449 | margin-left: 40rpx; | 447 | margin-left: 40rpx; |
| 450 | margin-top: 22rpx; | 448 | margin-top: 22rpx; |
| 451 | .p1 { | 449 | .p1 { |
| 452 | // font-family: PingFangSC-Regular; | 450 | // font-family: PingFangSC-Regular; |
| 453 | font-size: 14px; | 451 | font-size: 14px; |
| 454 | color: #333333; | 452 | color: #333333; |
| 455 | letter-spacing: -0.26px; | 453 | letter-spacing: -0.26px; |
| 456 | line-height: 18px; | 454 | line-height: 18px; |
| 457 | margin-right: 24px; | 455 | margin-right: 24px; |
| 458 | } | 456 | } |
| 459 | .p2 { | 457 | .p2 { |
| 460 | // font-family: PingFangSC-Regular; | 458 | // font-family: PingFangSC-Regular; |
| 461 | font-size: 14px; | 459 | font-size: 14px; |
| 462 | color: #ff6b4a; | 460 | color: #ff6b4a; |
| 463 | letter-spacing: -0.26px; | 461 | letter-spacing: -0.26px; |
| 464 | } | 462 | } |
| 465 | } | 463 | } |
| 466 | .order-info-discount { | 464 | .order-info-discount { |
| 467 | display: block; | 465 | display: block; |
| 468 | margin-left: 40rpx; | 466 | margin-left: 40rpx; |
| 469 | margin-top: 24rpx; | 467 | margin-top: 24rpx; |
| 470 | .p1 { | 468 | .p1 { |
| 471 | // font-family: PingFangSC-Regular; | 469 | // font-family: PingFangSC-Regular; |
| 472 | font-size: 14px; | 470 | font-size: 14px; |
| 473 | color: #333333; | 471 | color: #333333; |
| 474 | letter-spacing: -0.26px; | 472 | letter-spacing: -0.26px; |
| 475 | line-height: 18px; | 473 | line-height: 18px; |
| 476 | margin-right: 24px; | 474 | margin-right: 24px; |
| 477 | } | 475 | } |
| 478 | .p2 { | 476 | .p2 { |
| 479 | // font-family: PingFangSC-Regular; | 477 | // font-family: PingFangSC-Regular; |
| 480 | font-size: 14px; | 478 | font-size: 14px; |
| 481 | color: #ff6b4a; | 479 | color: #ff6b4a; |
| 482 | letter-spacing: -0.26px; | 480 | letter-spacing: -0.26px; |
| 483 | } | 481 | } |
| 484 | } | 482 | } |
| 485 | .order-info-price { | 483 | .order-info-price { |
| 486 | display: block; | 484 | display: block; |
| 487 | margin-left: 40rpx; | 485 | margin-left: 40rpx; |
| 488 | margin-top: 24rpx; | 486 | margin-top: 24rpx; |
| 489 | .p1 { | 487 | .p1 { |
| 490 | // font-family: PingFangSC-Semibold; | 488 | // font-family: PingFangSC-Semibold; |
| 491 | font-size: 14px; | 489 | font-size: 14px; |
| 492 | color: #333333; | 490 | color: #333333; |
| 493 | letter-spacing: -0.26px; | 491 | letter-spacing: -0.26px; |
| 494 | line-height: 18px; | 492 | line-height: 18px; |
| 495 | margin-right: 24px; | 493 | margin-right: 24px; |
| 496 | } | 494 | } |
| 497 | .p2 { | 495 | .p2 { |
| 498 | // font-family: PingFangSC-Semibold; | 496 | // font-family: PingFangSC-Semibold; |
| 499 | font-size: 14px; | 497 | font-size: 14px; |
| 500 | color: #ff6b4a; | 498 | color: #ff6b4a; |
| 501 | letter-spacing: -0.26px; | 499 | letter-spacing: -0.26px; |
| 502 | } | 500 | } |
| 503 | } | 501 | } |
| 504 | .order-info-num { | 502 | .order-info-num { |
| 505 | display: block; | 503 | display: block; |
| 506 | margin-left: 40rpx; | 504 | margin-left: 40rpx; |
| 507 | margin-top: 44rpx; | 505 | margin-top: 44rpx; |
| 508 | text { | 506 | text { |
| 509 | // font-family: PingFangSC-Regular; | 507 | // font-family: PingFangSC-Regular; |
| 510 | font-size: 12px; | 508 | font-size: 12px; |
| 511 | color: #999999; | 509 | color: #999999; |
| 512 | letter-spacing: -0.23px; | 510 | letter-spacing: -0.23px; |
| 513 | } | 511 | } |
| 514 | } | 512 | } |
| 515 | .order-info-time { | 513 | .order-info-time { |
| 516 | display: block; | 514 | display: block; |
| 517 | margin: 8rpx 0 48rpx 40rpx; | 515 | margin: 8rpx 0 48rpx 40rpx; |
| 518 | text { | 516 | text { |
| 519 | // font-family: PingFangSC-Regular; | 517 | // font-family: PingFangSC-Regular; |
| 520 | font-size: 12px; | 518 | font-size: 12px; |
| 521 | color: #999999; | 519 | color: #999999; |
| 522 | letter-spacing: -0.23px; | 520 | letter-spacing: -0.23px; |
| 523 | } | 521 | } |
| 524 | } | 522 | } |
| 525 | .order-info-hr { | 523 | .order-info-hr { |
| 526 | width: 520rpx; | 524 | width: 520rpx; |
| 527 | height: 1px; | 525 | height: 1px; |
| 528 | background-color: #e9e9e9; | 526 | background-color: #e9e9e9; |
| 529 | margin-bottom: 20rpx; | 527 | margin-bottom: 20rpx; |
| 530 | } | 528 | } |
| 531 | .order-info-contact { | 529 | .order-info-contact { |
| 532 | display: flex; | 530 | display: flex; |
| 533 | padding-bottom: 28rpx; | 531 | padding-bottom: 28rpx; |
| 534 | image { | 532 | image { |
| 535 | width: 19px; | 533 | width: 19px; |
| 536 | height: 16px; | 534 | height: 16px; |
| 537 | } | 535 | } |
| 538 | text { | 536 | text { |
| 539 | // font-family: PingFangSC-Regular; | 537 | // font-family: PingFangSC-Regular; |
| 540 | margin-left: 20rpx; | 538 | margin-left: 20rpx; |
| 541 | font-size: 14px; | 539 | font-size: 14px; |
| 542 | color: #333333; | 540 | color: #333333; |
| 543 | letter-spacing: -0.26px; | 541 | letter-spacing: -0.26px; |
| 544 | line-height: 18px; | 542 | line-height: 18px; |
| 545 | } | 543 | } |
| 546 | } | 544 | } |
| 547 | } | 545 | } |
| 548 | 546 | ||
| 549 | .order-confim { | 547 | .order-confim { |
| 550 | display: flex; | 548 | display: flex; |
| 551 | align-items: center; | 549 | align-items: center; |
| 552 | justify-content: flex-end; | 550 | justify-content: flex-end; |
| 553 | // z-index: 999; | 551 | // z-index: 999; |
| 554 | width: 100%; | 552 | width: 100%; |
| 555 | height: 112rpx; | 553 | height: 112rpx; |
| 556 | position: fixed; | 554 | position: fixed; |
| 557 | bottom: 0; | 555 | bottom: 0; |
| 558 | background: #ffffff; | 556 | background: #ffffff; |
| 559 | button { | 557 | button { |
| 560 | width: 204rpx; | 558 | width: 204rpx; |
| 561 | height: 80rpx; | 559 | height: 80rpx; |
| 562 | border: 1px solid #ff6b4a; | 560 | border: 1px solid #ff6b4a; |
| 563 | border-radius: 40rpx; | 561 | border-radius: 40rpx; |
| 564 | font-size: 32rpx; | 562 | font-size: 32rpx; |
| 565 | letter-spacing: -0.3px; | 563 | letter-spacing: -0.3px; |
| 566 | margin-right: 0; | 564 | margin-right: 0; |
| 567 | } | 565 | } |
| 568 | .b1 { | 566 | .b1 { |
| 569 | // font-family: PingFangSC-Regular; | 567 | // font-family: PingFangSC-Regular; |
| 570 | color: #ff6b4a; | 568 | color: #ff6b4a; |
| 571 | background-color: #ffffff; | 569 | background-color: #ffffff; |
| 572 | } | 570 | } |
| 573 | .b2 { | 571 | .b2 { |
| 574 | // font-family: PingFangSC-Regular; | 572 | // font-family: PingFangSC-Regular; |
| 575 | background-color: #ff6b4a; | 573 | background-color: #ff6b4a; |
| 576 | color: #ffffff; | 574 | color: #ffffff; |
| 577 | margin: 0 26rpx 0 20rpx; | 575 | margin: 0 26rpx 0 20rpx; |
| 578 | } | 576 | } |
| 579 | } | 577 | } |
| 580 | </style> | 578 | </style> |
| 581 | 579 |
src/pages/purchaseLenses/purchaseLenses.vue
| 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">左 (OD)</text> | 64 | <text class="p13">左 (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">右 (OS)</text> | 73 | <text class="p13">右 (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">左 (OD)</text> | 90 | <text class="p13">左 (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">右 (OS)</text> | 99 | <text class="p13">右 (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">左 (OD)</text> | 116 | <text class="p13">左 (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">右 (OS)</text> | 125 | <text class="p13">右 (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">左 (OD)</text> | 142 | <text class="p13">左 (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">右 (OS)</text> | 151 | <text class="p13">右 (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">年 (Y)</text> | 167 | <text class="p13-date">年 (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">月 (M)</text> | 179 | <text class="p13-date">月 (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">日 (D)</text> | 191 | <text class="p13-date">日 (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;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 233 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
| 232 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 234 | <text>右 {{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
| 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
| 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
| 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 = { |