Commit 25347a0061960dc547dfc13cf976d8c38e5b2f22
1 parent
01b15d67e9
Exists in
master
详情页重构
Showing
5 changed files
with
177 additions
and
82 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/details/details", | ||
| 41 | "style": { | ||
| 42 | "navigationBarTitleText": "产品详情" | ||
| 43 | } | ||
| 44 | }, | ||
| 45 | { | ||
| 40 | "path": "pages/myOrderPaying/myOrderPaying", | 46 | "path": "pages/myOrderPaying/myOrderPaying", |
| 41 | "style": { | 47 | "style": { |
| 42 | "navigationBarTitleText": "我的订单" | 48 | "navigationBarTitleText": "我的订单" |
| 43 | } | 49 | } |
| 44 | }, | 50 | }, |
| 45 | { | 51 | { |
| 46 | "path": "pages/myOrder/myOrder", | 52 | "path": "pages/myOrder/myOrder", |
| 47 | "style": { | 53 | "style": { |
| 48 | "navigationBarTitleText": "我的订单" | 54 | "navigationBarTitleText": "我的订单" |
| 49 | } | 55 | } |
| 50 | }, | 56 | }, |
| 51 | { | 57 | { |
| 52 | "path": "pages/cart/cart", | 58 | "path": "pages/cart/cart", |
| 53 | "style": { | 59 | "style": { |
| 54 | "navigationBarTitleText": "购物车" | 60 | "navigationBarTitleText": "购物车" |
| 55 | } | 61 | } |
| 56 | }, | 62 | }, |
| 57 | { | 63 | { |
| 58 | "path": "pages/frameDetail/frameDetail", | 64 | "path": "pages/frameDetail/frameDetail", |
| 59 | "style": { | 65 | "style": { |
| 60 | "navigationBarTitleText": "产品详情" | 66 | "navigationBarTitleText": "产品详情" |
| 61 | } | 67 | } |
| 62 | }, | 68 | }, |
| 63 | { | 69 | { |
| 64 | "path": "pages/refundProgress/refundProgress", | 70 | "path": "pages/refundProgress/refundProgress", |
| 65 | "style": { | 71 | "style": { |
| 66 | "navigationBarTitleText": "申请退款" | 72 | "navigationBarTitleText": "申请退款" |
| 67 | } | 73 | } |
| 68 | }, | 74 | }, |
| 69 | { | 75 | { |
| 70 | "path": "pages/address/addAddress", | 76 | "path": "pages/address/addAddress", |
| 71 | "style": { | 77 | "style": { |
| 72 | "navigationBarTitleText": "新增地址" | 78 | "navigationBarTitleText": "新增地址" |
| 73 | } | 79 | } |
| 74 | }, | 80 | }, |
| 75 | { | 81 | { |
| 76 | "path": "pages/address/addressList", | 82 | "path": "pages/address/addressList", |
| 77 | "style": { | 83 | "style": { |
| 78 | "navigationBarTitleText": "地址管理" | 84 | "navigationBarTitleText": "地址管理" |
| 79 | } | 85 | } |
| 80 | }, | 86 | }, |
| 81 | { | 87 | { |
| 82 | "path": "pages/confirmOrder/confirmOrder", | 88 | "path": "pages/confirmOrder/confirmOrder", |
| 83 | "style": { | 89 | "style": { |
| 84 | "navigationBarTitleText": "确认订单" | 90 | "navigationBarTitleText": "确认订单" |
| 85 | } | 91 | } |
| 86 | }, | 92 | }, |
| 87 | { | 93 | { |
| 88 | "path": "pages/refundment/refundWays", | 94 | "path": "pages/refundment/refundWays", |
| 89 | "style": { | 95 | "style": { |
| 90 | "navigationBarTitleText": "退款方式" | 96 | "navigationBarTitleText": "退款方式" |
| 91 | } | 97 | } |
| 92 | }, | 98 | }, |
| 93 | { | 99 | { |
| 94 | "path": "pages/refundment/refundment", | 100 | "path": "pages/refundment/refundment", |
| 95 | "style": { | 101 | "style": { |
| 96 | "navigationBarTitleText": "申请退款" | 102 | "navigationBarTitleText": "申请退款" |
| 97 | } | 103 | } |
| 98 | }, | 104 | }, |
| 99 | { | 105 | { |
| 100 | "path": "pages/predelivery/predelivery", | 106 | "path": "pages/predelivery/predelivery", |
| 101 | "style": { | 107 | "style": { |
| 102 | "navigationBarTitleText": "待发货" | 108 | "navigationBarTitleText": "待发货" |
| 103 | } | 109 | } |
| 104 | }, | 110 | }, |
| 105 | { | 111 | { |
| 106 | "path": "pages/customerService/customerService", | 112 | "path": "pages/customerService/customerService", |
| 107 | "style": { | 113 | "style": { |
| 108 | "navigationBarTitleText": "在线客服" | 114 | "navigationBarTitleText": "在线客服" |
| 109 | } | 115 | } |
| 110 | }, | 116 | }, |
| 111 | { | 117 | { |
| 112 | "path": "pages/detailStandard/detailStandard_sun", | 118 | "path": "pages/detailStandard/detailStandard_sun", |
| 113 | "style": { | 119 | "style": { |
| 114 | "navigationBarTitleText": "太阳镜选购页" | 120 | "navigationBarTitleText": "太阳镜选购页" |
| 115 | } | 121 | } |
| 116 | }, | 122 | }, |
| 117 | { | 123 | { |
| 118 | "path": "pages/detailStandard/detailStandard_k", | 124 | "path": "pages/detailStandard/detailStandard_k", |
| 119 | "style": { | 125 | "style": { |
| 120 | "navigationBarTitleText": "镜框选购页" | 126 | "navigationBarTitleText": "镜框选购页" |
| 121 | } | 127 | } |
| 122 | }, | 128 | }, |
| 123 | { | 129 | { |
| 124 | "path": "pages/newOpticsData/newOpticsData", | 130 | "path": "pages/newOpticsData/newOpticsData", |
| 125 | "style": { | 131 | "style": { |
| 126 | "navigationBarTitleText": "验光数据" | 132 | "navigationBarTitleText": "验光数据" |
| 127 | } | 133 | } |
| 128 | } | 134 | } |
| 129 | ], | 135 | ], |
| 130 | "globalStyle": { | 136 | "globalStyle": { |
| 131 | "navigationBarTextStyle": "black", | 137 | "navigationBarTextStyle": "black", |
| 132 | "navigationBarTitleText": "uni-app", | 138 | "navigationBarTitleText": "uni-app", |
| 133 | "navigationBarBackgroundColor": "#F8F8F8", | 139 | "navigationBarBackgroundColor": "#F8F8F8", |
| 134 | "backgroundColor": "#F8F8F8" | 140 | "backgroundColor": "#F8F8F8" |
| 135 | }, | 141 | }, |
| 136 | "tabBar": { | 142 | "tabBar": { |
| 137 | "color": "#C0C4CC", | 143 | "color": "#C0C4CC", |
| 138 | "selectedColor": "#fa436a", | 144 | "selectedColor": "#fa436a", |
| 139 | "borderStyle": "black", | 145 | "borderStyle": "black", |
| 140 | "backgroundColor": "#ffffff", | 146 | "backgroundColor": "#ffffff", |
| 141 | "list": [ | 147 | "list": [ |
| 142 | { | 148 | { |
| 143 | "pagePath": "pages/index/index", | 149 | "pagePath": "pages/index/index", |
| 144 | "iconPath": "static/tab-home.png", | 150 | "iconPath": "static/tab-home.png", |
| 145 | "selectedIconPath": "static/tab-home-current.png", | 151 | "selectedIconPath": "static/tab-home-current.png", |
| 146 | "text": "首页" | 152 | "text": "首页" |
| 147 | }, | 153 | }, |
| 148 | { | 154 | { |
| 149 | "pagePath": "pages/cart/cart", | 155 | "pagePath": "pages/cart/cart", |
| 150 | "iconPath": "static/tab-cart.png", | 156 | "iconPath": "static/tab-cart.png", |
| 151 | "selectedIconPath": "static/tab-cart-current.png", | 157 | "selectedIconPath": "static/tab-cart-current.png", |
| 152 | "text": "购物车" | 158 | "text": "购物车" |
| 153 | }, | 159 | }, |
| 154 | { | 160 | { |
| 155 | "pagePath": "pages/user/user", | 161 | "pagePath": "pages/user/user", |
| 156 | "iconPath": "static/tab-my.png", | 162 | "iconPath": "static/tab-my.png", |
| 157 | "selectedIconPath": "static/tab-my-current.png", | 163 | "selectedIconPath": "static/tab-my-current.png", |
| 158 | "text": "我的" | 164 | "text": "我的" |
| 159 | } | 165 | } |
| 160 | ] | 166 | ] |
| 161 | }, | 167 | }, |
| 162 | "condition": { | 168 | "condition": { |
| 163 | "current": 0, | 169 | "current": 0, |
| 164 | "list": [ | 170 | "list": [ |
| 165 | { | 171 | { |
| 166 | "name": "首页", | 172 | "name": "首页", |
| 167 | "path": "pages/index/index", | 173 | "path": "pages/index/index", |
| 168 | "query": "" | 174 | "query": "" |
| 169 | }, | 175 | }, |
| 170 | { | 176 | { |
| 171 | "name": "产品详情", | 177 | "name": "产品详情", |
| 172 | "path": "pages/frameDetail/frameDetail", | 178 | "path": "pages/details/details", |
| 173 | "query": "" | 179 | "query": "" |
| 174 | }, | 180 | }, |
| 175 | { | 181 | { |
| 176 | "name": "镜片、美瞳参数选择", | 182 | "name": "镜片、美瞳参数选择", |
| 177 | "path": "pages/purchaseLenses/purchaseLenses", | 183 | "path": "pages/purchaseLenses/purchaseLenses", |
| 178 | "query": "" | 184 | "query": "" |
| 179 | }, | 185 | }, |
| 180 | { | 186 | { |
| 181 | "name": "确认订单", | 187 | "name": "确认订单", |
| 182 | "path": "pages/confirmOrder/confirmOrder", | 188 | "path": "pages/confirmOrder/confirmOrder", |
| 183 | "query": "" | 189 | "query": "" |
| 184 | }, | 190 | }, |
| 185 | { | 191 | { |
| 186 | "name": "新增地址", | 192 | "name": "新增地址", |
| 187 | "path": "pages/address/addAddress", | 193 | "path": "pages/address/addAddress", |
| 188 | "query": "" | 194 | "query": "" |
| 189 | }, | 195 | }, |
| 190 | { | 196 | { |
| 191 | "name": "地址管理", | 197 | "name": "地址管理", |
| 192 | "path": "pages/address/addressList", | 198 | "path": "pages/address/addressList", |
| 193 | "query": "" | 199 | "query": "" |
| 194 | }, | 200 | }, |
| 195 | { | 201 | { |
| 196 | "name": "我的订单", | 202 | "name": "我的订单", |
| 197 | "path": "pages/myOrder/myOrder", | 203 | "path": "pages/myOrder/myOrder", |
| 198 | "query": "" | 204 | "query": "" |
| 199 | }, | 205 | }, |
| 200 | { | 206 | { |
| 201 | "name": "待付款订单详情", | 207 | "name": "待付款订单详情", |
| 202 | "path": "pages/myOrderPaying/myOrderPaying", | 208 | "path": "pages/myOrderPaying/myOrderPaying", |
| 203 | "query": "" | 209 | "query": "" |
| 204 | }, | 210 | }, |
| 205 | { | 211 | { |
| 206 | "name": "我的", | 212 | "name": "我的", |
| 207 | "path": "pages/user/user", | 213 | "path": "pages/user/user", |
| 208 | "query": "" | 214 | "query": "" |
| 209 | } | 215 | } |
| 210 | ] | 216 | ] |
| 211 | } | 217 | } |
| 212 | } | 218 | } |
src/pages/details/details.vue
| File was created | 1 | <template> | |
| 2 | <view class="container"> | ||
| 3 | <view class="info"> | ||
| 4 | <!-- 轮播图 --> | ||
| 5 | <swiper | ||
| 6 | class="swiperImage" | ||
| 7 | :indicator-dots="true" | ||
| 8 | :autoplay="true" | ||
| 9 | :interval="4000" | ||
| 10 | :duration="500" | ||
| 11 | > | ||
| 12 | <swiper-item | ||
| 13 | v-for="(item, index) in goodInfo.pics" | ||
| 14 | :key="index" | ||
| 15 | > | ||
| 16 | <image | ||
| 17 | :src="item" | ||
| 18 | mode="scaleToFill" | ||
| 19 | ></image> | ||
| 20 | </swiper-item> | ||
| 21 | </swiper> | ||
| 22 | <!-- 产品价格及购买人数 --> | ||
| 23 | <view class="info_pay"> | ||
| 24 | ￥{{goodInfo.priceArea.Min_Price || '暂无'}} | ||
| 25 | <span class="info_pay_number">{{goodInfo.trade_num || '暂无'}}人购买过</span> | ||
| 26 | </view> | ||
| 27 | <!-- 产品名称 --> | ||
| 28 | <view class="info_name"> | ||
| 29 | <span>{{goodInfo.p_name || '暂无'}}</span> | ||
| 30 | </view> | ||
| 31 | <!-- 产品售后信息 --> | ||
| 32 | <view class="info_after"> | ||
| 33 | <span>支持7天无理由退货</span> | ||
| 34 | <span>顺丰发货</span> | ||
| 35 | <span>30天质量保证</span> | ||
| 36 | </view> | ||
| 37 | </view> | ||
| 38 | </view> | ||
| 39 | </template> | ||
| 40 | |||
| 41 | <script> | ||
| 42 | import store from '@/store' | ||
| 43 | // import BottomSheet from '@/components/BottomSheet.vue' | ||
| 44 | |||
| 45 | export default { | ||
| 46 | components: {}, | ||
| 47 | data () { | ||
| 48 | return { | ||
| 49 | pid: 7, // 产品ID | ||
| 50 | } | ||
| 51 | }, | ||
| 52 | onLoad({ pid = this.pid, sk_id: skId }) { | ||
| 53 | this.pid = pid | ||
| 54 | |||
| 55 | // 获取产品详情 | ||
| 56 | this.getDetails({ pid, skId }) | ||
| 57 | }, | ||
| 58 | computed: { | ||
| 59 | |||
| 60 | }, | ||
| 61 | methods: { | ||
| 62 | // 获取产品详情 | ||
| 63 | getDetails({ pid, skId }) { | ||
| 64 | store.dispatch('read/fetch', { | ||
| 65 | pid, | ||
| 66 | sk_id: skId, | ||
| 67 | }).then((res) => { | ||
| 68 | // 储存规格参数 | ||
| 69 | this.saveGlassInfo([ | ||
| 70 | res.goodInfo.frame_width, | ||
| 71 | res.goodInfo.glass_heig, | ||
| 72 | res.goodInfo.glass_height, | ||
| 73 | res.goodInfo.nose_width, | ||
| 74 | res.goodInfo.leg_long, | ||
| 75 | res.goodInfo.weight, | ||
| 76 | ], | ||
| 77 | ) | ||
| 78 | }) | ||
| 79 | }, | ||
| 80 | saveGlassInfo(infoArray) { | ||
| 81 | |||
| 82 | }, | ||
| 83 | }, | ||
| 84 | } | ||
| 85 | </script> | ||
| 86 | |||
| 87 | <style lang="scss"> | ||
| 88 | .container { | ||
| 89 | background-color: #f8f8f8; | ||
| 90 | font-family: "PingFangSC-Regular"; | ||
| 91 | // 板块样式 | ||
| 92 | > view { | ||
| 93 | background: #ffffff; | ||
| 94 | margin-bottom: 10px; | ||
| 95 | padding: 8px 20px 8px 20px; | ||
| 96 | box-sizing: border-box; | ||
| 97 | } | ||
| 98 | // 信息板块 | ||
| 99 | .info { | ||
| 100 | // 轮播图 | ||
| 101 | .swiperImage { | ||
| 102 | width: 684rpx; | ||
| 103 | height: 480rpx; | ||
| 104 | image { | ||
| 105 | max-width: 100%; | ||
| 106 | max-height: 100%; | ||
| 107 | border-radius: 16rpx; | ||
| 108 | } | ||
| 109 | } | ||
| 110 | // 产品价格及购买人数 | ||
| 111 | .info_pay { | ||
| 112 | color: #eb5d3b; | ||
| 113 | font-size: 18px; | ||
| 114 | margin-top: 5px; | ||
| 115 | font-family: "PingFangSC-Semibold"; | ||
| 116 | display: flex; | ||
| 117 | justify-content: space-between; | ||
| 118 | .info_pay_number { | ||
| 119 | color: #999; | ||
| 120 | font-size: 14px; | ||
| 121 | } | ||
| 122 | } | ||
| 123 | // 产品名称 | ||
| 124 | .info_name { | ||
| 125 | font-size: 16px; | ||
| 126 | font-family: "PingFangSC-Semibold"; | ||
| 127 | margin-top: 5px; | ||
| 128 | > span { | ||
| 129 | height: 14px; | ||
| 130 | margin-right: 10px; | ||
| 131 | } | ||
| 132 | } | ||
| 133 | // 售后服务 | ||
| 134 | .info_after { | ||
| 135 | font-size: 10px; | ||
| 136 | color: #999; | ||
| 137 | margin-top: 5px; | ||
| 138 | > span { | ||
| 139 | height: 14px; | ||
| 140 | margin-right: 10px; | ||
| 141 | } | ||
| 142 | } | ||
| 143 | } | ||
| 144 | } | ||
| 145 | </style> | ||
| 146 |
src/pages/frameDetail/components/BottomSheet.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view | 3 | <view |
| 4 | class="sheet" | 4 | class="sheet" |
| 5 | :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" | 5 | :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" |
| 6 | @touchmove.stop.prevent="moveHandle" | 6 | @touchmove.stop.prevent="moveHandle" |
| 7 | @click="closeSheet()" | 7 | @click="closeSheet()" |
| 8 | > | 8 | > |
| 9 | <scroll-view | 9 | <scroll-view |
| 10 | scroll-y="true" | 10 | scroll-y="true" |
| 11 | class="sheetView" | 11 | class="sheetView" |
| 12 | :class="{sheetView_active:isShowBottom}" | 12 | :class="{sheetView_active:isShowBottom}" |
| 13 | @click.stop="stopEvent()" | 13 | @click.stop="stopEvent()" |
| 14 | > | 14 | > |
| 15 | <view class="content"> | 15 | <view class="content"> |
| 16 | <view class="goodInfo"> | 16 | <view class="goodInfo"> |
| 17 | <view class="imageWrap"> | 17 | <view class="imageWrap"> |
| 18 | <image | 18 | <image |
| 19 | :src="goodInfo.img_index_url" | 19 | :src="goodInfo.img_index_url" |
| 20 | mode="aspectFill" | 20 | mode="aspectFill" |
| 21 | style="width: 188rpx;height: 168rpx;" | 21 | style="width: 188rpx;height: 168rpx;" |
| 22 | ></image> | 22 | ></image> |
| 23 | </view> | 23 | </view>∂ |
| 24 | <view class="infoRight"> | 24 | <view class="infoRight"> |
| 25 | <text class="goodName">{{goodInfo.p_name}}</text> | 25 | <text class="goodName">{{goodInfo.p_name}}</text> |
| 26 | <text class="remarks">支持7天无理由退货 顺丰发货</text> | 26 | <text class="remarks">支持7天无理由退货 顺丰发货</text> |
| 27 | <view class="priceBox"> | 27 | <view class="priceBox"> |
| 28 | <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view> | 28 | <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view> |
| 29 | <text>(限购{{maxCount}}副)</text> | 29 | <text>(限购{{maxCount}}副)</text> |
| 30 | <view class="counter"> | 30 | <view class="counter"> |
| 31 | <view | 31 | <view |
| 32 | class="btn" | 32 | class="btn" |
| 33 | disabled="this.addDisabled" | 33 | disabled="this.addDisabled" |
| 34 | type="default" | 34 | type="default" |
| 35 | @click="counter(false)" | 35 | @click="counter(false)" |
| 36 | >-</view> | 36 | >-</view> |
| 37 | <text>{{count}}</text> | 37 | <text>{{count}}</text> |
| 38 | <view | 38 | <view |
| 39 | class="btn" | 39 | class="btn" |
| 40 | disabled="this.desDisabled" | 40 | disabled="this.desDisabled" |
| 41 | type="default" | 41 | type="default" |
| 42 | @click="counter(true)" | 42 | @click="counter(true)" |
| 43 | >+</view> | 43 | >+</view> |
| 44 | </view> | 44 | </view> |
| 45 | </view> | 45 | </view> |
| 46 | </view> | 46 | </view> |
| 47 | </view> | 47 | </view> |
| 48 | <view class="peopleChoose"> | 48 | <view class="peopleChoose"> |
| 49 | <view class="title">选择使用人</view> | 49 | <view class="title">选择使用人</view> |
| 50 | <view class="loveList"> | 50 | <view class="loveList"> |
| 51 | <view | 51 | <view |
| 52 | class="peopleName" | 52 | class="peopleName" |
| 53 | v-for="(item,index) in loveList" | 53 | v-for="(item,index) in loveList" |
| 54 | :key='index' | 54 | :key='index' |
| 55 | :class="{ active2: loveCurrent === index }" | 55 | :class="{ active2: loveCurrent === index }" |
| 56 | @click="onClickLoveItem(index,item.name)" | 56 | @click="onClickLoveItem(index,item.name)" |
| 57 | > | 57 | > |
| 58 | {{item.name}} | 58 | {{item.name}} |
| 59 | </view> | 59 | </view> |
| 60 | </view> | 60 | </view> |
| 61 | </view> | 61 | </view> |
| 62 | <view class="goods-data"> | 62 | <view class="goods-data"> |
| 63 | <view class="opCollapse"> | 63 | <view class="opCollapse"> |
| 64 | <view class="body"> | 64 | <view class="body"> |
| 65 | <template v-if="opIsOpen"> | 65 | <template v-if="opIsOpen"> |
| 66 | <view class="goods-form"> | 66 | <view class="goods-form"> |
| 67 | <view class="p1"> | 67 | <view class="p1"> |
| 68 | <image | 68 | <image |
| 69 | class="image2" | 69 | class="image2" |
| 70 | src="../../../static/img/myOpticsData/dataWrite.png" | 70 | src="../../../static/img/myOpticsData/dataWrite.png" |
| 71 | mode="aspectFit" | 71 | mode="aspectFit" |
| 72 | ></image> | 72 | ></image> |
| 73 | 填写验光数据 | 73 | 填写验光数据 |
| 74 | </view> | 74 | </view> |
| 75 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> | 75 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> |
| 76 | <view class="picker"> | 76 | <view class="picker"> |
| 77 | <view class="picker-choice"> | 77 | <view class="picker-choice"> |
| 78 | <view class="choice-left"> | 78 | <view class="choice-left"> |
| 79 | <text class="pd">验光单取名:</text> | 79 | <text class="pd">验光单取名:</text> |
| 80 | </view> | 80 | </view> |
| 81 | <input | 81 | <input |
| 82 | type="text" | 82 | type="text" |
| 83 | @blur="handleInput" | 83 | @blur="handleInput" |
| 84 | class="input" | 84 | class="input" |
| 85 | placeholder="请输入名称" | 85 | placeholder="请输入名称" |
| 86 | maxlength="20" | 86 | maxlength="20" |
| 87 | :value="name" | 87 | :value="name" |
| 88 | /> | 88 | /> |
| 89 | </view> | 89 | </view> |
| 90 | </view> | 90 | </view> |
| 91 | <view class="picker"> | 91 | <view class="picker"> |
| 92 | <view class="picker-choice"> | 92 | <view class="picker-choice"> |
| 93 | <view class="choice-left"> | 93 | <view class="choice-left"> |
| 94 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 94 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 95 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 95 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 96 | </view> | 96 | </view> |
| 97 | <text class="p13">左 (OD)</text> | 97 | <text class="p13">左 (OD)</text> |
| 98 | <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> | 98 | <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> |
| 99 | <picker | 99 | <picker |
| 100 | @change="bindPickerChange01" | 100 | @change="bindPickerChange01" |
| 101 | :value="pickerInfoList[0].nameIndex1" | 101 | :value="pickerInfoList[0].nameIndex1" |
| 102 | :range="pickerInfoList[0].nameArray1" | 102 | :range="pickerInfoList[0].nameArray1" |
| 103 | > | 103 | > |
| 104 | <view class="p14"> | 104 | <view class="p14"> |
| 105 | {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} | 105 | {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} |
| 106 | <image src="../../../static/detail-tabicon.png"></image> | 106 | <image src="../../../static/detail-tabicon.png"></image> |
| 107 | </view> | 107 | </view> |
| 108 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 108 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 109 | </picker> | 109 | </picker> |
| 110 | <text class="p13">右 (OS)</text> | 110 | <text class="p13">右 (OS)</text> |
| 111 | <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> | 111 | <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> |
| 112 | <picker | 112 | <picker |
| 113 | @change="bindPickerChange02" | 113 | @change="bindPickerChange02" |
| 114 | :value="pickerInfoList[0].nameIndex2" | 114 | :value="pickerInfoList[0].nameIndex2" |
| 115 | :range="pickerInfoList[0].nameArray2" | 115 | :range="pickerInfoList[0].nameArray2" |
| 116 | > | 116 | > |
| 117 | <view class="p14"> | 117 | <view class="p14"> |
| 118 | {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} | 118 | {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} |
| 119 | <image src="../../../static/detail-tabicon.png"></image> | 119 | <image src="../../../static/detail-tabicon.png"></image> |
| 120 | </view> | 120 | </view> |
| 121 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 121 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 122 | </picker> | 122 | </picker> |
| 123 | </view> | 123 | </view> |
| 124 | </view> | 124 | </view> |
| 125 | <view class="picker"> | 125 | <view class="picker"> |
| 126 | <view class="picker-choice"> | 126 | <view class="picker-choice"> |
| 127 | <view class="choice-left"> | 127 | <view class="choice-left"> |
| 128 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 128 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 129 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 129 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 130 | </view> | 130 | </view> |
| 131 | <text class="p13">左 (OD)</text> | 131 | <text class="p13">左 (OD)</text> |
| 132 | <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> | 132 | <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> |
| 133 | <picker | 133 | <picker |
| 134 | @change="bindPickerChange11" | 134 | @change="bindPickerChange11" |
| 135 | :value="pickerInfoList[1].nameIndex1" | 135 | :value="pickerInfoList[1].nameIndex1" |
| 136 | :range="pickerInfoList[1].nameArray1" | 136 | :range="pickerInfoList[1].nameArray1" |
| 137 | > | 137 | > |
| 138 | <view class="p14"> | 138 | <view class="p14"> |
| 139 | {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} | 139 | {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} |
| 140 | <image src="../../../static/detail-tabicon.png"></image> | 140 | <image src="../../../static/detail-tabicon.png"></image> |
| 141 | </view> | 141 | </view> |
| 142 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 142 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 143 | </picker> | 143 | </picker> |
| 144 | <text class="p13">右 (OS)</text> | 144 | <text class="p13">右 (OS)</text> |
| 145 | <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> | 145 | <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> |
| 146 | <picker | 146 | <picker |
| 147 | @change="bindPickerChange12" | 147 | @change="bindPickerChange12" |
| 148 | :value="pickerInfoList[1].nameIndex2" | 148 | :value="pickerInfoList[1].nameIndex2" |
| 149 | :range="pickerInfoList[1].nameArray2" | 149 | :range="pickerInfoList[1].nameArray2" |
| 150 | > | 150 | > |
| 151 | <view class="p14"> | 151 | <view class="p14"> |
| 152 | {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} | 152 | {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} |
| 153 | <image src="../../../static/detail-tabicon.png"></image> | 153 | <image src="../../../static/detail-tabicon.png"></image> |
| 154 | </view> | 154 | </view> |
| 155 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 155 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 156 | </picker> | 156 | </picker> |
| 157 | </view> | 157 | </view> |
| 158 | </view> | 158 | </view> |
| 159 | <view class="picker"> | 159 | <view class="picker"> |
| 160 | <view class="picker-choice"> | 160 | <view class="picker-choice"> |
| 161 | <view class="choice-left"> | 161 | <view class="choice-left"> |
| 162 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 162 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 163 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 163 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 164 | </view> | 164 | </view> |
| 165 | <text class="p13">左 (OD)</text> | 165 | <text class="p13">左 (OD)</text> |
| 166 | <picker | 166 | <picker |
| 167 | @change="bindPickerChange21" | 167 | @change="bindPickerChange21" |
| 168 | :value="pickerInfoList[2].nameIndex1" | 168 | :value="pickerInfoList[2].nameIndex1" |
| 169 | :range="pickerInfoList[2].nameArray1" | 169 | :range="pickerInfoList[2].nameArray1" |
| 170 | > | 170 | > |
| 171 | <view class="p14"> | 171 | <view class="p14"> |
| 172 | {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} | 172 | {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} |
| 173 | <image src="../../../static/detail-tabicon.png"></image> | 173 | <image src="../../../static/detail-tabicon.png"></image> |
| 174 | </view> | 174 | </view> |
| 175 | </picker> | 175 | </picker> |
| 176 | <text class="p13">右 (OS)</text> | 176 | <text class="p13">右 (OS)</text> |
| 177 | <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> | 177 | <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> |
| 178 | <picker | 178 | <picker |
| 179 | @change="bindPickerChange22" | 179 | @change="bindPickerChange22" |
| 180 | :value="pickerInfoList[2].nameIndex2" | 180 | :value="pickerInfoList[2].nameIndex2" |
| 181 | :range="pickerInfoList[2].nameArray2" | 181 | :range="pickerInfoList[2].nameArray2" |
| 182 | > | 182 | > |
| 183 | <view class="p14"> | 183 | <view class="p14"> |
| 184 | {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} | 184 | {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} |
| 185 | <image src="../../../static/detail-tabicon.png"></image> | 185 | <image src="../../../static/detail-tabicon.png"></image> |
| 186 | </view> | 186 | </view> |
| 187 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 187 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 188 | </picker> | 188 | </picker> |
| 189 | </view> | 189 | </view> |
| 190 | </view> | 190 | </view> |
| 191 | <view class="picker"> | 191 | <view class="picker"> |
| 192 | <view class="picker-choice"> | 192 | <view class="picker-choice"> |
| 193 | <view class="choice-left"> | 193 | <view class="choice-left"> |
| 194 | <text class="pd">瞳距:</text> | 194 | <text class="pd">瞳距:</text> |
| 195 | </view> | 195 | </view> |
| 196 | <input | 196 | <input |
| 197 | type="digit" | 197 | type="digit" |
| 198 | @change="handleInputPd" | 198 | @change="handleInputPd" |
| 199 | class="input" | 199 | class="input" |
| 200 | placeholder="请输入瞳距,单位cm" | 200 | placeholder="请输入瞳距,单位cm" |
| 201 | maxlength="20" | 201 | maxlength="20" |
| 202 | :value="pd" | 202 | :value="pd" |
| 203 | /> | 203 | /> |
| 204 | </view> | 204 | </view> |
| 205 | </view> | 205 | </view> |
| 206 | <view class="picker"> | 206 | <view class="picker"> |
| 207 | <view class="picker-choice"> | 207 | <view class="picker-choice"> |
| 208 | <view class="choice-left"> | 208 | <view class="choice-left"> |
| 209 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 209 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 210 | </view> | 210 | </view> |
| 211 | <text class="p13-date">年 (Y)</text> | 211 | <text class="p13-date">年 (Y)</text> |
| 212 | <picker | 212 | <picker |
| 213 | @change="bindPickerChange41" | 213 | @change="bindPickerChange41" |
| 214 | :value="pickerInfoList[3].nameIndex1" | 214 | :value="pickerInfoList[3].nameIndex1" |
| 215 | :range="pickerInfoList[3].nameArray1" | 215 | :range="pickerInfoList[3].nameArray1" |
| 216 | > | 216 | > |
| 217 | <view | 217 | <view |
| 218 | class="p14" | 218 | class="p14" |
| 219 | style="width: 30px;" | 219 | style="width: 30px;" |
| 220 | > | 220 | > |
| 221 | {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} | 221 | {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} |
| 222 | <image src="../../../static/detail-tabicon.png"></image> | 222 | <image src="../../../static/detail-tabicon.png"></image> |
| 223 | </view> | 223 | </view> |
| 224 | </picker> | 224 | </picker> |
| 225 | <text class="p13-date">月 (M)</text> | 225 | <text class="p13-date">月 (M)</text> |
| 226 | <picker | 226 | <picker |
| 227 | @change="bindPickerChange42" | 227 | @change="bindPickerChange42" |
| 228 | :value="pickerInfoList[3].nameIndex2" | 228 | :value="pickerInfoList[3].nameIndex2" |
| 229 | :range="pickerInfoList[3].nameArray2" | 229 | :range="pickerInfoList[3].nameArray2" |
| 230 | > | 230 | > |
| 231 | <view | 231 | <view |
| 232 | class="p14" | 232 | class="p14" |
| 233 | style="width: 30px;" | 233 | style="width: 30px;" |
| 234 | > | 234 | > |
| 235 | {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} | 235 | {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} |
| 236 | <image src="../../../static/detail-tabicon.png"></image> | 236 | <image src="../../../static/detail-tabicon.png"></image> |
| 237 | </view> | 237 | </view> |
| 238 | </picker> | 238 | </picker> |
| 239 | <text class="p13-date">日 (D)</text> | 239 | <text class="p13-date">日 (D)</text> |
| 240 | <picker | 240 | <picker |
| 241 | @change="bindPickerChange43" | 241 | @change="bindPickerChange43" |
| 242 | :value="pickerInfoList[3].nameIndex3" | 242 | :value="pickerInfoList[3].nameIndex3" |
| 243 | :range="pickerInfoList[3].nameArray3" | 243 | :range="pickerInfoList[3].nameArray3" |
| 244 | > | 244 | > |
| 245 | <view | 245 | <view |
| 246 | class="p14" | 246 | class="p14" |
| 247 | style="width: 30px;" | 247 | style="width: 30px;" |
| 248 | > | 248 | > |
| 249 | {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} | 249 | {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} |
| 250 | <image src="../../../static/detail-tabicon.png"></image> | 250 | <image src="../../../static/detail-tabicon.png"></image> |
| 251 | </view> | 251 | </view> |
| 252 | </picker> | 252 | </picker> |
| 253 | </view> | 253 | </view> |
| 254 | </view> | 254 | </view> |
| 255 | <view class="confirm"> | 255 | <view class="confirm"> |
| 256 | <image | 256 | <image |
| 257 | class="image1" | 257 | class="image1" |
| 258 | :src="confirm ? tabicon[0] : tabicon[1]" | 258 | :src="confirm ? tabicon[0] : tabicon[1]" |
| 259 | @tap="changeConfirm" | 259 | @tap="changeConfirm" |
| 260 | ></image> | 260 | ></image> |
| 261 | <text>确认以上输入信息来源于我的验光数据!</text> | 261 | <text>确认以上输入信息来源于我的验光数据!</text> |
| 262 | </view> | 262 | </view> |
| 263 | </view> | 263 | </view> |
| 264 | </template> | 264 | </template> |
| 265 | <template v-else> | 265 | <template v-else> |
| 266 | <view | 266 | <view |
| 267 | v-for="item in pickerInfoList" | 267 | v-for="item in pickerInfoList" |
| 268 | :key="item.key" | 268 | :key="item.key" |
| 269 | class="bodyBox" | 269 | class="bodyBox" |
| 270 | > | 270 | > |
| 271 | <template v-if="item.nameC==='验光日期'"> | 271 | <template v-if="item.nameC==='验光日期'"> |
| 272 | <text class="names">{{item.nameC}}</text> | 272 | <text class="names">{{item.nameC}}</text> |
| 273 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> | 273 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> |
| 274 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> | 274 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> |
| 275 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> | 275 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> |
| 276 | </template> | 276 | </template> |
| 277 | <template v-else> | 277 | <template v-else> |
| 278 | <template v-if="item.nameC==='度数'"> | 278 | <template v-if="item.nameC==='度数'"> |
| 279 | <text style="display: inline;">*</text> | 279 | <text style="display: inline;">*</text> |
| 280 | </template> | 280 | </template> |
| 281 | 281 | ||
| 282 | <text class="names">{{item.nameC}}</text> | 282 | <text class="names">{{item.nameC}}</text> |
| 283 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 283 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
| 284 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 284 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> |
| 285 | </template> | 285 | </template> |
| 286 | </view> | 286 | </view> |
| 287 | </template> | 287 | </template> |
| 288 | </view> | 288 | </view> |
| 289 | </view> | 289 | </view> |
| 290 | </view> | 290 | </view> |
| 291 | <view class="choose"> | 291 | <view class="choose"> |
| 292 | <view | 292 | <view |
| 293 | class="chooseItem_1_content" | 293 | class="chooseItem_1_content" |
| 294 | v-for="(item,index) in attrList" | 294 | v-for="(item,index) in attrList" |
| 295 | :key="index" | 295 | :key="index" |
| 296 | > | 296 | > |
| 297 | <UniCollapse @change="changeShow(index)"> | 297 | <UniCollapse @change="changeShow(index)"> |
| 298 | <UniCollapseItem | 298 | <UniCollapseItem |
| 299 | :open="show[index]" | 299 | :open="show[index]" |
| 300 | :title="item.meta_name" | 300 | :title="item.meta_name" |
| 301 | showAnimation=false | 301 | showAnimation=false |
| 302 | > | 302 | > |
| 303 | <view class="chooseItem_1_content"> | 303 | <view class="chooseItem_1_content"> |
| 304 | <view class="itemsWrap"> | 304 | <view class="itemsWrap"> |
| 305 | <view | 305 | <view |
| 306 | class="item2" | 306 | class="item2" |
| 307 | v-for="(one,i) in item.attr" | 307 | v-for="(one,i) in item.attr" |
| 308 | :key="i" | 308 | :key="i" |
| 309 | :class="{ active2: current[index] === i }" | 309 | :class="{ active2: current[index] === i }" |
| 310 | @click="onClickItem(index, i)" | 310 | @click="onClickItem(index, i)" |
| 311 | >{{one.name}}</view> | 311 | >{{one.name}}</view> |
| 312 | </view> | 312 | </view> |
| 313 | </view> | 313 | </view> |
| 314 | </UniCollapseItem> | 314 | </UniCollapseItem> |
| 315 | </UniCollapse> | 315 | </UniCollapse> |
| 316 | <view | 316 | <view |
| 317 | class="chooseRes" | 317 | class="chooseRes" |
| 318 | v-show="!show[index]" | 318 | v-show="!show[index]" |
| 319 | >* {{attrList[index].attr[current[index]].name}}</view> | 319 | >* {{attrList[index].attr[current[index]].name}}</view> |
| 320 | </view> | 320 | </view> |
| 321 | </view> | 321 | </view> |
| 322 | <view | 322 | <view |
| 323 | class="button" | 323 | class="button" |
| 324 | @click.native="addCart" | 324 | @click.native="addCart" |
| 325 | v-if="isCart" | 325 | v-if="isCart" |
| 326 | > | 326 | > |
| 327 | 加入购物车 | 327 | 加入购物车 |
| 328 | </view> | 328 | </view> |
| 329 | <view | 329 | <view |
| 330 | class="button" | 330 | class="button" |
| 331 | @click="toComfirmOrder" | 331 | @click="toComfirmOrder" |
| 332 | v-else | 332 | v-else |
| 333 | > | 333 | > |
| 334 | 立即结算 | 334 | 立即结算 |
| 335 | </view> | 335 | </view> |
| 336 | </view> | 336 | </view> |
| 337 | </scroll-view> | 337 | </scroll-view> |
| 338 | </view> | 338 | </view> |
| 339 | </view> | 339 | </view> |
| 340 | </template> | 340 | </template> |
| 341 | <script> | 341 | <script> |
| 342 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 342 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 343 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 343 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 344 | import store from '@/store' | 344 | import store from '@/store' |
| 345 | export default { | 345 | export default { |
| 346 | components: { | 346 | components: { |
| 347 | UniCollapse, | 347 | UniCollapse, |
| 348 | UniCollapseItem, | 348 | UniCollapseItem, |
| 349 | }, | 349 | }, |
| 350 | props: { | 350 | props: { |
| 351 | isShowBottom: Boolean, | 351 | isShowBottom: Boolean, |
| 352 | pid: Number, | 352 | pid: Number, |
| 353 | goodInfo: Object, | 353 | goodInfo: Object, |
| 354 | isCart: Boolean, | 354 | isCart: Boolean, |
| 355 | }, | 355 | }, |
| 356 | data() { | 356 | data() { |
| 357 | return { | 357 | return { |
| 358 | loveCurrent: Number, | 358 | loveCurrent: Number, |
| 359 | count: 1, | 359 | count: 1, |
| 360 | // pid: 0, | 360 | // pid: 0, |
| 361 | maxCount: 20, | 361 | maxCount: 20, |
| 362 | dataName: '', // 验光数据人员名称 | 362 | dataName: '', // 验光数据人员名称 |
| 363 | isDataName: false, // 是否是已存在的人员数据 | 363 | isDataName: false, // 是否是已存在的人员数据 |
| 364 | dataConfirm: false, // 已确认所输入验光数据 | 364 | dataConfirm: false, // 已确认所输入验光数据 |
| 365 | opIsOpen: true, | 365 | opIsOpen: true, |
| 366 | addDisabled: false, | 366 | addDisabled: false, |
| 367 | desDisabled: false, | 367 | desDisabled: false, |
| 368 | current: [], | 368 | current: [], |
| 369 | show: [], | 369 | show: [], |
| 370 | checkedData: {}, | 370 | checkedData: {}, |
| 371 | // 度数相关数据 | 371 | // 度数相关数据 |
| 372 | pickerInfoList: [ | 372 | pickerInfoList: [ |
| 373 | { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 }, | 373 | { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 }, |
| 374 | { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 }, | 374 | { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 }, |
| 375 | { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 }, | 375 | { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 }, |
| 376 | { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 }, | 376 | { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 }, |
| 377 | ], | 377 | ], |
| 378 | confirm: false, // 用户是否确认 | 378 | confirm: false, // 用户是否确认 |
| 379 | tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], | 379 | tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], |
| 380 | name: '', | 380 | name: '', |
| 381 | oldname: '', // 用于判读用户是否改变名字 | 381 | oldname: '', // 用于判读用户是否改变名字 |
| 382 | pickerInfoChioce: { | 382 | pickerInfoChioce: { |
| 383 | leftSph: '', | 383 | leftSph: '', |
| 384 | rightSph: '', | 384 | rightSph: '', |
| 385 | leftCyl: '', | 385 | leftCyl: '', |
| 386 | rightCyl: '', | 386 | rightCyl: '', |
| 387 | leftAxi: '', | 387 | leftAxi: '', |
| 388 | rightAxi: '', | 388 | rightAxi: '', |
| 389 | time: { | 389 | time: { |
| 390 | year: 0, | 390 | year: 0, |
| 391 | month: 0, | 391 | month: 0, |
| 392 | day: 0, | 392 | day: 0, |
| 393 | }, | 393 | }, |
| 394 | }, | 394 | }, |
| 395 | pd: '', // 瞳距 | 395 | pd: '', // 瞳距 |
| 396 | oldpd: '', // 用于判断用户是否改变瞳距 | 396 | oldpd: '', // 用于判断用户是否改变瞳距 |
| 397 | kinds: 1, // kinds=1，提交为新增验光，2为修改 | 397 | kinds: 1, // kinds=1，提交为新增验光，2为修改 |
| 398 | mp_id: Number, | 398 | mp_id: Number, |
| 399 | } | 399 | } |
| 400 | }, | 400 | }, |
| 401 | computed: { | 401 | computed: { |
| 402 | loveList() { | 402 | loveList() { |
| 403 | // console.log('**********loveList',this.$store.state.myLoveList.loveList) | 403 | // console.log('**********loveList',this.$store.state.myLoveList.loveList) |
| 404 | return this.$store.state.myLoveList.loveList || [] | 404 | return this.$store.state.myLoveList.loveList || [] |
| 405 | }, | 405 | }, |
| 406 | attrList() { | 406 | attrList() { |
| 407 | const attrList = this.$store.state.read.goodInfo.attrList | 407 | const attrList = this.$store.state.read.goodInfo.attrList |
| 408 | if (attrList !== undefined) { | 408 | if (attrList !== undefined) { |
| 409 | return attrList | 409 | return attrList |
| 410 | } else { | 410 | } else { |
| 411 | return [] | 411 | return [] |
| 412 | } | 412 | } |
| 413 | }, | 413 | }, |
| 414 | skuList() { | 414 | skuList() { |
| 415 | return this.$store.state.read.goodInfo.skuList | 415 | return this.$store.state.read.goodInfo.skuList |
| 416 | }, | 416 | }, |
| 417 | mpList() { | 417 | mpList() { |
| 418 | return this.$store.state.myLoveList.loveList | 418 | return this.$store.state.myLoveList.loveList |
| 419 | }, | 419 | }, |
| 420 | }, | 420 | }, |
| 421 | created() { | 421 | created() { |
| 422 | const pid = this.pid | 422 | const pid = this.pid |
| 423 | console.log('this.goodInfo', this.goodInfo) | 423 | console.log('this.goodInfo', this.goodInfo) |
| 424 | const current = [] | 424 | const current = [] |
| 425 | const show = [] | 425 | const show = [] |
| 426 | for (let index = 0; index < this.attrList.length; index++) { | 426 | for (let index = 0; index < this.attrList.length; index++) { |
| 427 | current.push(0) | 427 | current.push(0) |
| 428 | show.push(true) | 428 | show.push(true) |
| 429 | } | 429 | } |
| 430 | this.current = current | 430 | this.current = current |
| 431 | this.show = show | 431 | this.show = show |
| 432 | 432 | ||
| 433 | // 获取关心的人列表 | 433 | // 获取关心的人列表 |
| 434 | store.dispatch('myLoveList/getLoveList', { | 434 | store.dispatch('myLoveList/getLoveList', { |
| 435 | uid: this.$store.state.user.userInfo.uid, | 435 | uid: this.$store.state.user.userInfo.uid, |
| 436 | }) | 436 | }) |
| 437 | // 初始化SPL、CYL、AXI的值 | 437 | // 初始化SPL、CYL、AXI的值 |
| 438 | for (let j = 0; j < 3; j++) { | 438 | for (let j = 0; j < 3; j++) { |
| 439 | for (let i = -12; i < 6; i++) { | 439 | for (let i = -12; i < 6; i++) { |
| 440 | this.pickerInfoList[j].nameArray1.push(i) | 440 | this.pickerInfoList[j].nameArray1.push(i) |
| 441 | this.pickerInfoList[j].nameArray1.push(i + 0.5) | 441 | this.pickerInfoList[j].nameArray1.push(i + 0.5) |
| 442 | this.pickerInfoList[j].nameArray2.push(i) | 442 | this.pickerInfoList[j].nameArray2.push(i) |
| 443 | this.pickerInfoList[j].nameArray2.push(i + 0.5) | 443 | this.pickerInfoList[j].nameArray2.push(i + 0.5) |
| 444 | if (i >= -6) { | 444 | if (i >= -6) { |
| 445 | this.pickerInfoList[j].nameArray1.push(i + 0.25) | 445 | this.pickerInfoList[j].nameArray1.push(i + 0.25) |
| 446 | this.pickerInfoList[j].nameArray1.push(i + 0.75) | 446 | this.pickerInfoList[j].nameArray1.push(i + 0.75) |
| 447 | this.pickerInfoList[j].nameArray2.push(i + 0.25) | 447 | this.pickerInfoList[j].nameArray2.push(i + 0.25) |
| 448 | this.pickerInfoList[j].nameArray2.push(i + 0.75) | 448 | this.pickerInfoList[j].nameArray2.push(i + 0.75) |
| 449 | } | 449 | } |
| 450 | if (i === 5) { | 450 | if (i === 5) { |
| 451 | this.pickerInfoList[j].nameArray1.push(i + 1) | 451 | this.pickerInfoList[j].nameArray1.push(i + 1) |
| 452 | this.pickerInfoList[j].nameArray2.push(i + 1) | 452 | this.pickerInfoList[j].nameArray2.push(i + 1) |
| 453 | } | 453 | } |
| 454 | } | 454 | } |
| 455 | } | 455 | } |
| 456 | // 初始化日期值 | 456 | // 初始化日期值 |
| 457 | for (let i = 1; i < 32; i++) { | 457 | for (let i = 1; i < 32; i++) { |
| 458 | this.pickerInfoList[3].nameArray3.push(i) | 458 | this.pickerInfoList[3].nameArray3.push(i) |
| 459 | } | 459 | } |
| 460 | // 初始化年份前后五年 | 460 | // 初始化年份前后五年 |
| 461 | const myDate = new Date() | 461 | const myDate = new Date() |
| 462 | const nowYear = myDate.getFullYear() | 462 | const nowYear = myDate.getFullYear() |
| 463 | for (let i = 0; i < 5; i++) { | 463 | for (let i = 0; i < 5; i++) { |
| 464 | this.pickerInfoList[3].nameArray1.push(nowYear - i) | 464 | this.pickerInfoList[3].nameArray1.push(nowYear - i) |
| 465 | } | 465 | } |
| 466 | }, | 466 | }, |
| 467 | name: 'bottomSheet', | 467 | name: 'bottomSheet', |
| 468 | methods: { | 468 | methods: { |
| 469 | addCart() { | 469 | addCart() { |
| 470 | const that = this | 470 | const that = this |
| 471 | const checkedSKUName = [that.goodInfo.attrList[0].meta_name, that.goodInfo.attrList[1].meta_name] | 471 | const checkedSKUName = [that.goodInfo.attrList[0].meta_name, that.goodInfo.attrList[1].meta_name] |
| 472 | const checkedSKU = [] | 472 | const checkedSKU = [] |
| 473 | let j | 473 | let j |
| 474 | for (let i = 0; i < that.current.length; i++) { | 474 | for (let i = 0; i < that.current.length; i++) { |
| 475 | checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]]) | 475 | checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]]) |
| 476 | // console.log('i', i, j, i !== this.current.length - 1) | 476 | // console.log('i', i, j, i !== this.current.length - 1) |
| 477 | if (i !== this.current.length - 1) { | 477 | if (i !== this.current.length - 1) { |
| 478 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 | 478 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 |
| 479 | j = this.current[i] * this.attrList[1].attr.length | 479 | j = this.current[i] * this.attrList[1].attr.length |
| 480 | } else { | 480 | } else { |
| 481 | j += this.current[i] | 481 | j += this.current[i] |
| 482 | } | 482 | } |
| 483 | } | 483 | } |
| 484 | const sk_id = this.skuList[j].sk_id | 484 | const sk_id = this.skuList[j].sk_id |
| 485 | console.log('选择的商品sk_id', sk_id, '选择的商品参数', checkedSKU) | 485 | console.log('选择的商品sk_id', sk_id, '选择的商品参数', checkedSKU) |
| 486 | this.$emit('addCart', this.mp_id, this.count, checkedSKU, sk_id)// 添加购物车 | 486 | this.$emit('addCart', this.mp_id, this.count, checkedSKU, sk_id)// 添加购物车 |
| 487 | this.$emit('closeBottom')// 关闭弹窗 | 487 | this.$emit('closeBottom')// 关闭弹窗 |
| 488 | }, | 488 | }, |
| 489 | onClickLoveItem(index, name) { | 489 | onClickLoveItem(index, name) { |
| 490 | const loveList = this.loveList | 490 | const loveList = this.loveList |
| 491 | for (let index = 0; index < loveList.length; index++) { | 491 | for (let index = 0; index < loveList.length; index++) { |
| 492 | if (name === loveList[index].name && name !== this.name) { | 492 | if (name === loveList[index].name && name !== this.name) { |
| 493 | this.isDataName = true | 493 | this.isDataName = true |
| 494 | this.kinds = 2 | 494 | this.kinds = 2 |
| 495 | this.name = loveList[index].name | 495 | this.name = loveList[index].name |
| 496 | this.pd = loveList[index].pd | 496 | this.pd = loveList[index].pd |
| 497 | this.mp_id = loveList[index].mp_id | 497 | this.mp_id = loveList[index].mp_id |
| 498 | this.oldname = loveList[index].name | 498 | this.oldname = loveList[index].name |
| 499 | this.oldpd = loveList[index].pd | 499 | this.oldpd = loveList[index].pd |
| 500 | this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph) | 500 | this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph) |
| 501 | this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph) | 501 | this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph) |
| 502 | this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl) | 502 | this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl) |
| 503 | this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl) | 503 | this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl) |
| 504 | this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi) | 504 | this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi) |
| 505 | this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi) | 505 | this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi) |
| 506 | this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4)) | 506 | this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4)) |
| 507 | if (loveList[index].in_time.toString().slice(5, 6) === 0) { | 507 | if (loveList[index].in_time.toString().slice(5, 6) === 0) { |
| 508 | this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7)) | 508 | this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7)) |
| 509 | } else { | 509 | } else { |
| 510 | this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7)) | 510 | this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7)) |
| 511 | } | 511 | } |
| 512 | if (loveList[index].in_time.toString().slice(8, 9) === 0) { | 512 | if (loveList[index].in_time.toString().slice(8, 9) === 0) { |
| 513 | this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10)) | 513 | this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10)) |
| 514 | } else { | 514 | } else { |
| 515 | this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10)) | 515 | this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10)) |
| 516 | } | 516 | } |
| 517 | } | 517 | } |
| 518 | } | 518 | } |
| 519 | this.name = name | 519 | this.name = name |
| 520 | this.loveCurrent = index | 520 | this.loveCurrent = index |
| 521 | }, | 521 | }, |
| 522 | closeSheet() { | 522 | closeSheet() { |
| 523 | this.$emit('closeBottom') | 523 | this.$emit('closeBottom') |
| 524 | }, | 524 | }, |
| 525 | // @click.stop防止事件冒泡 | 525 | // @click.stop防止事件冒泡 |
| 526 | stopEvent() {}, | 526 | stopEvent() {}, |
| 527 | // 不让页面滚动 | 527 | // 不让页面滚动 |
| 528 | moveHandle() {}, | 528 | moveHandle() {}, |
| 529 | // picker相关功能 | 529 | // picker相关功能 |
| 530 | handleInput(e) { | 530 | handleInput(e) { |
| 531 | this.name = e.target.value | 531 | this.name = e.target.value |
| 532 | this.isDataName = false | 532 | this.isDataName = false |
| 533 | console.log('e---->', e) | 533 | console.log('e---->', e) |
| 534 | const mpList = this.mpList | 534 | const mpList = this.mpList |
| 535 | // console.log('mpList===>', mpList) | 535 | // console.log('mpList===>', mpList) |
| 536 | for (let index = 0; index < mpList.length; index++) { | 536 | for (let index = 0; index < mpList.length; index++) { |
| 537 | if (e.detail.value === mpList[index].name) { | 537 | if (e.detail.value === mpList[index].name) { |
| 538 | this.isDataName = true | 538 | this.isDataName = true |
| 539 | uni.showModal({ | 539 | uni.showModal({ |
| 540 | title: '提示', | 540 | title: '提示', |
| 541 | content: `是否填充已有的"${e.detail.value}"的数据`, | 541 | content: `是否填充已有的"${e.detail.value}"的数据`, |
| 542 | success: (res) => { | 542 | success: (res) => { |
| 543 | if (res.confirm) { | 543 | if (res.confirm) { |
| 544 | this.kinds = 2 | 544 | this.kinds = 2 |
| 545 | console.log('args===>', index) | 545 | console.log('args===>', index) |
| 546 | // const mpList=Object.assign({},this.$store.state.mympList.mpList) | 546 | // const mpList=Object.assign({},this.$store.state.mympList.mpList) |
| 547 | console.log('mpList===>', mpList) | 547 | console.log('mpList===>', mpList) |
| 548 | this.name = mpList[index].name | 548 | this.name = mpList[index].name |
| 549 | this.pd = mpList[index].pd | 549 | this.pd = mpList[index].pd |
| 550 | this.mp_id = mpList[index].mp_id | 550 | this.mp_id = mpList[index].mp_id |
| 551 | this.oldname = mpList[index].name | 551 | this.oldname = mpList[index].name |
| 552 | this.oldpd = mpList[index].pd | 552 | this.oldpd = mpList[index].pd |
| 553 | // 将kinds =2时的值传到该页面 | 553 | // 将kinds =2时的值传到该页面 |
| 554 | this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) | 554 | this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) |
| 555 | this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) | 555 | this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) |
| 556 | this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) | 556 | this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) |
| 557 | this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) | 557 | this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) |
| 558 | this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) | 558 | this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) |
| 559 | this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) | 559 | this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) |
| 560 | this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4)) | 560 | this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4)) |
| 561 | if (mpList[index].in_time.toString().slice(5, 6) === 0) { | 561 | if (mpList[index].in_time.toString().slice(5, 6) === 0) { |
| 562 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7)) | 562 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7)) |
| 563 | } else { | 563 | } else { |
| 564 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7)) | 564 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7)) |
| 565 | } | 565 | } |
| 566 | if (mpList[index].in_time.toString().slice(8, 9) === 0) { | 566 | if (mpList[index].in_time.toString().slice(8, 9) === 0) { |
| 567 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10)) | 567 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10)) |
| 568 | } else { | 568 | } else { |
| 569 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10)) | 569 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10)) |
| 570 | } | 570 | } |
| 571 | // this.checkedData = mpList[index] | 571 | // this.checkedData = mpList[index] |
| 572 | // console.log('checkedData', this.checkedData) | 572 | // console.log('checkedData', this.checkedData) |
| 573 | } else if (res.cancel) { | 573 | } else if (res.cancel) { |
| 574 | this.kinds = 2 | 574 | this.kinds = 2 |
| 575 | } | 575 | } |
| 576 | }, | 576 | }, |
| 577 | }) | 577 | }) |
| 578 | } | 578 | } |
| 579 | } | 579 | } |
| 580 | }, | 580 | }, |
| 581 | handleInputPd(e) { | 581 | handleInputPd(e) { |
| 582 | // 只能输入正浮点数或正数 | 582 | // 只能输入正浮点数或正数 |
| 583 | if (/^\d+(\.\d+)?$/.test(e.target.value)) { | 583 | if (/^\d+(\.\d+)?$/.test(e.target.value)) { |
| 584 | this.pd = e.target.value | 584 | this.pd = e.target.value |
| 585 | } else { | 585 | } else { |
| 586 | uni.showToast({ | 586 | uni.showToast({ |
| 587 | title: '请输入有效数据;示例:89', | 587 | title: '请输入有效数据;示例:89', |
| 588 | icon: 'none', | 588 | icon: 'none', |
| 589 | duration: 2000, | 589 | duration: 2000, |
| 590 | }) | 590 | }) |
| 591 | this.pd = '' | 591 | this.pd = '' |
| 592 | } | 592 | } |
| 593 | }, | 593 | }, |
| 594 | changeConfirm() { | 594 | changeConfirm() { |
| 595 | this.confirm = !this.confirm | 595 | this.confirm = !this.confirm |
| 596 | }, | 596 | }, |
| 597 | bindPickerChange01: function(e) { | 597 | bindPickerChange01: function(e) { |
| 598 | this.pickerInfoList[0].nameIndex1 = e.target.value | 598 | this.pickerInfoList[0].nameIndex1 = e.target.value |
| 599 | this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value] | 599 | this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value] |
| 600 | }, | 600 | }, |
| 601 | bindPickerChange02: function(e) { | 601 | bindPickerChange02: function(e) { |
| 602 | this.pickerInfoList[0].nameIndex2 = e.target.value | 602 | this.pickerInfoList[0].nameIndex2 = e.target.value |
| 603 | this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value] | 603 | this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value] |
| 604 | }, | 604 | }, |
| 605 | bindPickerChange11: function(e) { | 605 | bindPickerChange11: function(e) { |
| 606 | this.pickerInfoList[1].nameIndex1 = e.target.value | 606 | this.pickerInfoList[1].nameIndex1 = e.target.value |
| 607 | this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value] | 607 | this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value] |
| 608 | }, | 608 | }, |
| 609 | bindPickerChange12: function(e) { | 609 | bindPickerChange12: function(e) { |
| 610 | this.pickerInfoList[1].nameIndex2 = e.target.value | 610 | this.pickerInfoList[1].nameIndex2 = e.target.value |
| 611 | this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value] | 611 | this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value] |
| 612 | }, | 612 | }, |
| 613 | bindPickerChange21: function(e) { | 613 | bindPickerChange21: function(e) { |
| 614 | this.pickerInfoList[2].nameIndex1 = e.target.value | 614 | this.pickerInfoList[2].nameIndex1 = e.target.value |
| 615 | this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value] | 615 | this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value] |
| 616 | }, | 616 | }, |
| 617 | bindPickerChange22: function(e) { | 617 | bindPickerChange22: function(e) { |
| 618 | this.pickerInfoList[2].nameIndex2 = e.target.value | 618 | this.pickerInfoList[2].nameIndex2 = e.target.value |
| 619 | this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value] | 619 | this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value] |
| 620 | }, | 620 | }, |
| 621 | bindPickerChange41: function(e) { | 621 | bindPickerChange41: function(e) { |
| 622 | this.pickerInfoList[3].nameIndex1 = e.target.value | 622 | this.pickerInfoList[3].nameIndex1 = e.target.value |
| 623 | this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value] | 623 | this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value] |
| 624 | }, | 624 | }, |
| 625 | bindPickerChange42: function(e) { | 625 | bindPickerChange42: function(e) { |
| 626 | this.pickerInfoList[3].nameIndex2 = e.target.value | 626 | this.pickerInfoList[3].nameIndex2 = e.target.value |
| 627 | this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value] | 627 | this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value] |
| 628 | }, | 628 | }, |
| 629 | bindPickerChange43: function(e) { | 629 | bindPickerChange43: function(e) { |
| 630 | this.pickerInfoList[3].nameIndex3 = e.target.value | 630 | this.pickerInfoList[3].nameIndex3 = e.target.value |
| 631 | this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value] | 631 | this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value] |
| 632 | }, | 632 | }, |
| 633 | changeShow(num) { | 633 | changeShow(num) { |
| 634 | this.show[num] = !this.show[num] | 634 | this.show[num] = !this.show[num] |
| 635 | this.$forceUpdate() | 635 | this.$forceUpdate() |
| 636 | }, | 636 | }, |
| 637 | onClickItem(index, i) { | 637 | onClickItem(index, i) { |
| 638 | if (this.current[index] !== i) { | 638 | if (this.current[index] !== i) { |
| 639 | this.current[index] = i | 639 | this.current[index] = i |
| 640 | } | 640 | } |
| 641 | this.$forceUpdate() | 641 | this.$forceUpdate() |
| 642 | }, | 642 | }, |
| 643 | counter(isadd) { | 643 | counter(isadd) { |
| 644 | if (isadd) { | 644 | if (isadd) { |
| 645 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ | 645 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ |
| 646 | } else { | 646 | } else { |
| 647 | this.count <= 1 ? this.desDisabled = true : this.count-- | 647 | this.count <= 1 ? this.desDisabled = true : this.count-- |
| 648 | } | 648 | } |
| 649 | }, | 649 | }, |
| 650 | toComfirmOrder() { | 650 | toComfirmOrder() { |
| 651 | // 先处理验光部分的逻辑，如果ok在跳转 | 651 | // 先处理验光部分的逻辑，如果ok在跳转 |
| 652 | let flag = 0 | 652 | let flag = 0 |
| 653 | if (this.name === '') { | 653 | if (this.name === '') { |
| 654 | uni.showToast({ | 654 | uni.showToast({ |
| 655 | title: '请输入验光单取名', | 655 | title: '请输入验光单取名', |
| 656 | icon: 'none', | 656 | icon: 'none', |
| 657 | duration: 2000, | 657 | duration: 2000, |
| 658 | }) | 658 | }) |
| 659 | } else { | 659 | } else { |
| 660 | if (this.pd === '') { | 660 | if (this.pd === '') { |
| 661 | uni.showToast({ | 661 | uni.showToast({ |
| 662 | title: '请输入瞳距', | 662 | title: '请输入瞳距', |
| 663 | icon: 'none', | 663 | icon: 'none', |
| 664 | duration: 2000, | 664 | duration: 2000, |
| 665 | }) | 665 | }) |
| 666 | } else { | 666 | } else { |
| 667 | if (this.kinds === 1) { | 667 | if (this.kinds === 1) { |
| 668 | // 添加用户验光单 | 668 | // 添加用户验光单 |
| 669 | console.log('kinds====>', this.pickerInfoChioce.leftSph) | 669 | console.log('kinds====>', this.pickerInfoChioce.leftSph) |
| 670 | console.log('kinds====>', this.pickerInfoChioce.leftSph === Number) | 670 | console.log('kinds====>', this.pickerInfoChioce.leftSph === Number) |
| 671 | console.log('kinds====>', this.pickerInfoChioce.rightSph === Number) | 671 | console.log('kinds====>', this.pickerInfoChioce.rightSph === Number) |
| 672 | if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || | 672 | if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || |
| 673 | this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || | 673 | this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || |
| 674 | this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' | 674 | this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' |
| 675 | ) { | 675 | ) { |
| 676 | uni.showToast({ | 676 | uni.showToast({ |
| 677 | title: '请输入您的验光数据', | 677 | title: '请输入您的验光数据', |
| 678 | icon: 'none', | 678 | icon: 'none', |
| 679 | duration: 2000, | 679 | duration: 2000, |
| 680 | }) | 680 | }) |
| 681 | } else { | 681 | } else { |
| 682 | if (this.confirm) { | 682 | if (this.confirm) { |
| 683 | store.dispatch('myLoveList/addMylove', { | 683 | store.dispatch('myLoveList/addMylove', { |
| 684 | uid: this.$store.state.user.userInfo.uid, | 684 | uid: this.$store.state.user.userInfo.uid, |
| 685 | openid: this.$store.state.user.userInfo.openid, | 685 | openid: this.$store.state.user.userInfo.openid, |
| 686 | // mp_name: this.$store.state.user.userInfo.mp_name, | 686 | // mp_name: this.$store.state.user.userInfo.mp_name, |
| 687 | leftSph: this.pickerInfoChioce.leftSph, | 687 | leftSph: this.pickerInfoChioce.leftSph, |
| 688 | rightSph: this.pickerInfoChioce.rightSph, | 688 | rightSph: this.pickerInfoChioce.rightSph, |
| 689 | leftCyl: this.pickerInfoChioce.leftCyl, | 689 | leftCyl: this.pickerInfoChioce.leftCyl, |
| 690 | rightCyl: this.pickerInfoChioce.rightCyl, | 690 | rightCyl: this.pickerInfoChioce.rightCyl, |
| 691 | leftAxi: this.pickerInfoChioce.leftAxi, | 691 | leftAxi: this.pickerInfoChioce.leftAxi, |
| 692 | rightAxi: this.pickerInfoChioce.rightAxi, | 692 | rightAxi: this.pickerInfoChioce.rightAxi, |
| 693 | pd: this.pd, // 瞳距 | 693 | pd: this.pd, // 瞳距 |
| 694 | mp_name: this.name, | 694 | mp_name: this.name, |
| 695 | // time: this.pickerInfoChioce.time, | 695 | // time: this.pickerInfoChioce.time, |
| 696 | // img_url2: "http://localhost:8087/images/shop_1/1/", | 696 | // img_url2: "http://localhost:8087/images/shop_1/1/", |
| 697 | }).then(({ mp_id: mpId }) => { | 697 | }).then(({ mp_id: mpId }) => { |
| 698 | this.mp_id = mpId | 698 | this.mp_id = mpId |
| 699 | }) | 699 | }) |
| 700 | flag = 1 | 700 | flag = 1 |
| 701 | } else { | 701 | } else { |
| 702 | uni.showToast({ | 702 | uni.showToast({ |
| 703 | title: '请确认您的验光数据', | 703 | title: '请确认您的验光数据', |
| 704 | icon: 'none', | 704 | icon: 'none', |
| 705 | duration: 3000, | 705 | duration: 3000, |
| 706 | }) | 706 | }) |
| 707 | } | 707 | } |
| 708 | } | 708 | } |
| 709 | } | 709 | } |
| 710 | if (this.kinds === 2) { | 710 | if (this.kinds === 2) { |
| 711 | if (this.confirm) { | 711 | if (this.confirm) { |
| 712 | const leftList = ['leftSph', 'leftCyl', 'leftAxi'] | 712 | const leftList = ['leftSph', 'leftCyl', 'leftAxi'] |
| 713 | const rightList = ['rightSph', 'rightCyl', 'rightAxi'] | 713 | const rightList = ['rightSph', 'rightCyl', 'rightAxi'] |
| 714 | // let flag=0; | 714 | // let flag=0; |
| 715 | if (this.name !== this.oldname) { | 715 | if (this.name !== this.oldname) { |
| 716 | store.dispatch('myLoveList/updateMylove', { | 716 | store.dispatch('myLoveList/updateMylove', { |
| 717 | uid: this.$store.state.user.userInfo.uid, | 717 | uid: this.$store.state.user.userInfo.uid, |
| 718 | openid: this.$store.state.user.userInfo.openid, | 718 | openid: this.$store.state.user.userInfo.openid, |
| 719 | mp_id: this.mp_id, | 719 | mp_id: this.mp_id, |
| 720 | keyname: 'name', | 720 | keyname: 'name', |
| 721 | keyvalue: this.name, | 721 | keyvalue: this.name, |
| 722 | }) | 722 | }) |
| 723 | flag = 1 | 723 | flag = 1 |
| 724 | } | 724 | } |
| 725 | if (this.pd !== this.oldpd) { | 725 | if (this.pd !== this.oldpd) { |
| 726 | store.dispatch('myLoveList/updateMylove', { | 726 | store.dispatch('myLoveList/updateMylove', { |
| 727 | uid: this.$store.state.user.userInfo.uid, | 727 | uid: this.$store.state.user.userInfo.uid, |
| 728 | openid: this.$store.state.user.userInfo.openid, | 728 | openid: this.$store.state.user.userInfo.openid, |
| 729 | mp_id: this.mp_id, | 729 | mp_id: this.mp_id, |
| 730 | keyname: 'pd', | 730 | keyname: 'pd', |
| 731 | keyvalue: this.pd, | 731 | keyvalue: this.pd, |
| 732 | }) | 732 | }) |
| 733 | flag = 1 | 733 | flag = 1 |
| 734 | } | 734 | } |
| 735 | // 先验证是否输入有无空 | 735 | // 先验证是否输入有无空 |
| 736 | let q = true | 736 | let q = true |
| 737 | for (let k = 0; k < 3; k++) { | 737 | for (let k = 0; k < 3; k++) { |
| 738 | q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && | 738 | q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && |
| 739 | this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') | 739 | this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') |
| 740 | } | 740 | } |
| 741 | if (q) { | 741 | if (q) { |
| 742 | for (let j = 0; j < 3; j++) { | 742 | for (let j = 0; j < 3; j++) { |
| 743 | if (this.pickerInfoList[j].nameIndex1 !== 0) { | 743 | if (this.pickerInfoList[j].nameIndex1 !== 0) { |
| 744 | store.dispatch('myLoveList/updateMylove', { | 744 | store.dispatch('myLoveList/updateMylove', { |
| 745 | uid: this.$store.state.user.userInfo.uid, | 745 | uid: this.$store.state.user.userInfo.uid, |
| 746 | openid: this.$store.state.user.userInfo.openid, | 746 | openid: this.$store.state.user.userInfo.openid, |
| 747 | mp_id: this.mp_id, | 747 | mp_id: this.mp_id, |
| 748 | keyname: leftList[j], | 748 | keyname: leftList[j], |
| 749 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], | 749 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], |
| 750 | }) | 750 | }) |
| 751 | } | 751 | } |
| 752 | if (this.pickerInfoList[j].nameIndex2 !== 0) { | 752 | if (this.pickerInfoList[j].nameIndex2 !== 0) { |
| 753 | store.dispatch('myLoveList/updateMylove', { | 753 | store.dispatch('myLoveList/updateMylove', { |
| 754 | uid: this.$store.state.user.userInfo.uid, | 754 | uid: this.$store.state.user.userInfo.uid, |
| 755 | openid: this.$store.state.user.userInfo.openid, | 755 | openid: this.$store.state.user.userInfo.openid, |
| 756 | mp_id: this.mp_id, | 756 | mp_id: this.mp_id, |
| 757 | keyname: rightList[j], | 757 | keyname: rightList[j], |
| 758 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2], | 758 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2], |
| 759 | }) | 759 | }) |
| 760 | } | 760 | } |
| 761 | flag = 1 | 761 | flag = 1 |
| 762 | } | 762 | } |
| 763 | } else { | 763 | } else { |
| 764 | flag = 0 | 764 | flag = 0 |
| 765 | uni.showToast({ | 765 | uni.showToast({ |
| 766 | title: '请输入您的验光数据', | 766 | title: '请输入您的验光数据', |
| 767 | icon: 'none', | 767 | icon: 'none', |
| 768 | duration: 2000, | 768 | duration: 2000, |
| 769 | }) | 769 | }) |
| 770 | } | 770 | } |
| 771 | if (flag !== 0) { | 771 | if (flag !== 0) { |
| 772 | store.dispatch('myLoveList/getLoveList', { | 772 | store.dispatch('myLoveList/getLoveList', { |
| 773 | uid: this.$store.state.user.userInfo.uid, | 773 | uid: this.$store.state.user.userInfo.uid, |
| 774 | }) | 774 | }) |
| 775 | } | 775 | } |
| 776 | } else { | 776 | } else { |
| 777 | uni.showToast({ | 777 | uni.showToast({ |
| 778 | title: '请确认您的验光数据', | 778 | title: '请确认您的验光数据', |
| 779 | icon: 'none', | 779 | icon: 'none', |
| 780 | duration: 3000, | 780 | duration: 3000, |
| 781 | }) | 781 | }) |
| 782 | } | 782 | } |
| 783 | } | 783 | } |
| 784 | } | 784 | } |
| 785 | } | 785 | } |
| 786 | if (flag !== 0) { | 786 | if (flag !== 0) { |
| 787 | // 如果数据验证无误，那么更新验光单的数据 | 787 | // 如果数据验证无误，那么更新验光单的数据 |
| 788 | store.dispatch('myLoveList/getLoveList', { | 788 | store.dispatch('myLoveList/getLoveList', { |
| 789 | uid: this.$store.state.user.userInfo.uid, | 789 | uid: this.$store.state.user.userInfo.uid, |
| 790 | }) | 790 | }) |
| 791 | let i = 0 | 791 | let i = 0 |
| 792 | // 判断出是哪一个sku被选中 | 792 | // 判断出是哪一个sku被选中 |
| 793 | for (let index = 0; index < this.current.length; index++) { | 793 | for (let index = 0; index < this.current.length; index++) { |
| 794 | console.log('index', index, i, index !== this.current.length - 1) | 794 | console.log('index', index, i, index !== this.current.length - 1) |
| 795 | if (index !== this.current.length - 1) { | 795 | if (index !== this.current.length - 1) { |
| 796 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 | 796 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 |
| 797 | i = this.current[index] * this.attrList[1].attr.length | 797 | i = this.current[index] * this.attrList[1].attr.length |
| 798 | } else { | 798 | } else { |
| 799 | i += this.current[index] | 799 | i += this.current[index] |
| 800 | } | 800 | } |
| 801 | } | 801 | } |
| 802 | // 判断是否其输入的人员数据是否已存在 | 802 | // 判断是否其输入的人员数据是否已存在 |
| 803 | store.dispatch('order/saveParams', { | 803 | store.dispatch('order/saveParams', { |
| 804 | sk_id_arr: this.skuList[i], | 804 | sk_id_arr: this.skuList[i], |
| 805 | current: this.current, | 805 | current: this.current, |
| 806 | mp_id: this.mp_id, | 806 | mp_id: this.mp_id, |
| 807 | attrList: this.attrList, | 807 | attrList: this.attrList, |
| 808 | }) | 808 | }) |
| 809 | // 跳转到确认订单页面 | 809 | // 跳转到确认订单页面 |
| 810 | uni.navigateTo({ | 810 | uni.navigateTo({ |
| 811 | url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`, | 811 | url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`, |
| 812 | }) | 812 | }) |
| 813 | } | 813 | } |
| 814 | }, | 814 | }, |
| 815 | }, | 815 | }, |
| 816 | } | 816 | } |
| 817 | </script> | 817 | </script> |
| 818 | 818 | ||
| 819 | <style lang="scss"> | 819 | <style lang="scss"> |
| 820 | .content { | 820 | .content { |
| 821 | min-height: 100vh; | 821 | min-height: 100vh; |
| 822 | background-color: #f2f2f2; | 822 | background-color: #f2f2f2; |
| 823 | // padding-top: 20rpx; | 823 | // padding-top: 20rpx; |
| 824 | .goodInfo { | 824 | .goodInfo { |
| 825 | width: 100%; | 825 | width: 100%; |
| 826 | height: 272rpx; | 826 | height: 272rpx; |
| 827 | border-radius: 16rpx; | 827 | border-radius: 16rpx; |
| 828 | background-color: #ffffff; | 828 | background-color: #ffffff; |
| 829 | box-sizing: border-box; | 829 | box-sizing: border-box; |
| 830 | padding: 36rpx; | 830 | padding: 36rpx; |
| 831 | display: flex; | 831 | display: flex; |
| 832 | flex-direction: row; | 832 | flex-direction: row; |
| 833 | justify-content: flex-start; | 833 | justify-content: flex-start; |
| 834 | .imageWrap { | 834 | .imageWrap { |
| 835 | height: 188rpx; | 835 | height: 188rpx; |
| 836 | width: 188rpx; | 836 | width: 188rpx; |
| 837 | margin-right: 28rpx; | 837 | margin-right: 28rpx; |
| 838 | image { | 838 | image { |
| 839 | height: 188rpx; | 839 | height: 188rpx; |
| 840 | width: 188rpx; | 840 | width: 188rpx; |
| 841 | } | 841 | } |
| 842 | } | 842 | } |
| 843 | .infoRight { | 843 | .infoRight { |
| 844 | display: flex; | 844 | display: flex; |
| 845 | flex-direction: column; | 845 | flex-direction: column; |
| 846 | align-items: flex-start; | 846 | align-items: flex-start; |
| 847 | justify-content: space-between; | 847 | justify-content: space-between; |
| 848 | .goodName { | 848 | .goodName { |
| 849 | font-size: 28rpx; | 849 | font-size: 28rpx; |
| 850 | color: #333333; | 850 | color: #333333; |
| 851 | } | 851 | } |
| 852 | .remarks { | 852 | .remarks { |
| 853 | font-size: 20rpx; | 853 | font-size: 20rpx; |
| 854 | color: #999999; | 854 | color: #999999; |
| 855 | } | 855 | } |
| 856 | .priceBox { | 856 | .priceBox { |
| 857 | display: flex; | 857 | display: flex; |
| 858 | justify-content: space-between; | 858 | justify-content: space-between; |
| 859 | align-items: center; | 859 | align-items: center; |
| 860 | width: 100%; | 860 | width: 100%; |
| 861 | font-size: 14px; | 861 | font-size: 14px; |
| 862 | color: #999999; | 862 | color: #999999; |
| 863 | .price { | 863 | .price { |
| 864 | color: #ff6b4a; | 864 | color: #ff6b4a; |
| 865 | font-size: 28rpx; | 865 | font-size: 28rpx; |
| 866 | } | 866 | } |
| 867 | .counter { | 867 | .counter { |
| 868 | display: flex; | 868 | display: flex; |
| 869 | flex-direction: row; | 869 | flex-direction: row; |
| 870 | justify-content: space-between; | 870 | justify-content: space-between; |
| 871 | align-items: center; | 871 | align-items: center; |
| 872 | font-size: 28rpx; | 872 | font-size: 28rpx; |
| 873 | color: #333333; | 873 | color: #333333; |
| 874 | width: 122rpx; | 874 | width: 122rpx; |
| 875 | .btn { | 875 | .btn { |
| 876 | display: flex; | 876 | display: flex; |
| 877 | justify-content: center; | 877 | justify-content: center; |
| 878 | line-height: 32rpx; | 878 | line-height: 32rpx; |
| 879 | height: 32rpx; | 879 | height: 32rpx; |
| 880 | width: 32rpx; | 880 | width: 32rpx; |
| 881 | background-color: #f2f2f2; | 881 | background-color: #f2f2f2; |
| 882 | color: #cfcfcf; | 882 | color: #cfcfcf; |
| 883 | } | 883 | } |
| 884 | } | 884 | } |
| 885 | } | 885 | } |
| 886 | } | 886 | } |
| 887 | } | 887 | } |
| 888 | .peopleChoose { | 888 | .peopleChoose { |
| 889 | width: 100%; | 889 | width: 100%; |
| 890 | min-height: 200rpx; | 890 | min-height: 200rpx; |
| 891 | border-radius: 16rpx; | 891 | border-radius: 16rpx; |
| 892 | background-color: #ffffff; | 892 | background-color: #ffffff; |
| 893 | box-sizing: border-box; | 893 | box-sizing: border-box; |
| 894 | padding: 36rpx; | 894 | padding: 36rpx; |
| 895 | margin: 10px 0; | 895 | margin: 10px 0; |
| 896 | display: flex; | 896 | display: flex; |
| 897 | flex-direction: column; | 897 | flex-direction: column; |
| 898 | justify-content: flex-start; | 898 | justify-content: flex-start; |
| 899 | align-items: center; | 899 | align-items: center; |
| 900 | .title { | 900 | .title { |
| 901 | font-size: 16px; | 901 | font-size: 16px; |
| 902 | color: #333333; | 902 | color: #333333; |
| 903 | letter-spacing: -0.3px; | 903 | letter-spacing: -0.3px; |
| 904 | text-align: justify; | 904 | text-align: justify; |
| 905 | line-height: 24px; | 905 | line-height: 24px; |
| 906 | margin: 4px 0; | 906 | margin: 4px 0; |
| 907 | } | 907 | } |
| 908 | .loveList { | 908 | .loveList { |
| 909 | display: flex; | 909 | display: flex; |
| 910 | flex-direction: row; | 910 | flex-direction: row; |
| 911 | flex-wrap: wrap; | 911 | flex-wrap: wrap; |
| 912 | justify-content: flex-start; | 912 | justify-content: flex-start; |
| 913 | align-items: center; | 913 | align-items: center; |
| 914 | padding-top: 24rpx; | 914 | padding-top: 24rpx; |
| 915 | width: 100%; | 915 | width: 100%; |
| 916 | .peopleName { | 916 | .peopleName { |
| 917 | padding: 0 30rpx; | 917 | padding: 0 30rpx; |
| 918 | height: 60rpx; | 918 | height: 60rpx; |
| 919 | margin: 0 20rpx 20rpx 0; | 919 | margin: 0 20rpx 20rpx 0; |
| 920 | transition: all 0.3s; | 920 | transition: all 0.3s; |
| 921 | background: #f2f2f2; | 921 | background: #f2f2f2; |
| 922 | border-radius: 2px; | 922 | border-radius: 2px; |
| 923 | border-radius: 2px; | 923 | border-radius: 2px; |
| 924 | line-height: 60rpx; | 924 | line-height: 60rpx; |
| 925 | text-align: center; | 925 | text-align: center; |
| 926 | color: #666666; | 926 | color: #666666; |
| 927 | font-size: 12px; | 927 | font-size: 12px; |
| 928 | } | 928 | } |
| 929 | .active2 { | 929 | .active2 { |
| 930 | background: rgba(255, 107, 74, 0.15); | 930 | background: rgba(255, 107, 74, 0.15); |
| 931 | color: #ff6b4a; | 931 | color: #ff6b4a; |
| 932 | } | 932 | } |
| 933 | } | 933 | } |
| 934 | } | 934 | } |
| 935 | .goods-data { | 935 | .goods-data { |
| 936 | width: 100%; | 936 | width: 100%; |
| 937 | box-sizing: border-box; | 937 | box-sizing: border-box; |
| 938 | padding: 37rpx 40rpx 0 40rpx; | 938 | padding: 37rpx 40rpx 0 40rpx; |
| 939 | background: #ffffff; | 939 | background: #ffffff; |
| 940 | border-radius: 12rpx; | 940 | border-radius: 12rpx; |
| 941 | .opCollapse { | 941 | .opCollapse { |
| 942 | width: 100%; | 942 | width: 100%; |
| 943 | padding-bottom: 28rpx; | 943 | padding-bottom: 28rpx; |
| 944 | margin-top: 7px; | 944 | margin-top: 7px; |
| 945 | border-bottom: 1px solid #e9e9e9; | 945 | border-bottom: 1px solid #e9e9e9; |
| 946 | .head { | 946 | .head { |
| 947 | display: flex; | 947 | display: flex; |
| 948 | justify-content: space-between; | 948 | justify-content: space-between; |
| 949 | height: 24px; | 949 | height: 24px; |
| 950 | // font-family: PingFangSC-Medium; | 950 | // font-family: PingFangSC-Medium; |
| 951 | font-size: 16px; | 951 | font-size: 16px; |
| 952 | color: #333333; | 952 | color: #333333; |
| 953 | letter-spacing: -0.3px; | 953 | letter-spacing: -0.3px; |
| 954 | text-align: justify; | 954 | text-align: justify; |
| 955 | line-height: 24px; | 955 | line-height: 24px; |
| 956 | margin-bottom: 18rpx; | 956 | margin-bottom: 18rpx; |
| 957 | .headRighted { | 957 | .headRighted { |
| 958 | width: 0; | 958 | width: 0; |
| 959 | height: 0; | 959 | height: 0; |
| 960 | border-left: 4px solid transparent; | 960 | border-left: 4px solid transparent; |
| 961 | border-right: 4px solid transparent; | 961 | border-right: 4px solid transparent; |
| 962 | border-bottom: 4px solid #cfcfcf; | 962 | border-bottom: 4px solid #cfcfcf; |
| 963 | transform: scaleY(-1); | 963 | transform: scaleY(-1); |
| 964 | margin-top: 10px; | 964 | margin-top: 10px; |
| 965 | } | 965 | } |
| 966 | .headMid { | 966 | .headMid { |
| 967 | font-size: 10px; | 967 | font-size: 10px; |
| 968 | color: #999999; | 968 | color: #999999; |
| 969 | letter-spacing: -0.19px; | 969 | letter-spacing: -0.19px; |
| 970 | margin-left: -120rpx; | 970 | margin-left: -120rpx; |
| 971 | } | 971 | } |
| 972 | .headRight { | 972 | .headRight { |
| 973 | width: 0; | 973 | width: 0; |
| 974 | height: 0; | 974 | height: 0; |
| 975 | border-left: 4px solid transparent; | 975 | border-left: 4px solid transparent; |
| 976 | border-right: 4px solid transparent; | 976 | border-right: 4px solid transparent; |
| 977 | border-bottom: 4px solid #cfcfcf; | 977 | border-bottom: 4px solid #cfcfcf; |
| 978 | margin-top: 10px; | 978 | margin-top: 10px; |
| 979 | } | 979 | } |
| 980 | } | 980 | } |
| 981 | .body { | 981 | .body { |
| 982 | font-size: 12px; | 982 | font-size: 12px; |
| 983 | color: #666666; | 983 | color: #666666; |
| 984 | letter-spacing: 0; | 984 | letter-spacing: 0; |
| 985 | .bodyBox { | 985 | .bodyBox { |
| 986 | margin-top: 15px; | 986 | margin-top: 15px; |
| 987 | .names { | 987 | .names { |
| 988 | font-size: 12px; | 988 | font-size: 12px; |
| 989 | color: #151515; | 989 | color: #151515; |
| 990 | letter-spacing: 0; | 990 | letter-spacing: 0; |
| 991 | text-align: justify; | 991 | text-align: justify; |
| 992 | line-height: 17px; | 992 | line-height: 17px; |
| 993 | margin-left: 5px; | 993 | margin-left: 5px; |
| 994 | margin-right: 10px; | 994 | margin-right: 10px; |
| 995 | } | 995 | } |
| 996 | text { | 996 | text { |
| 997 | font-size: 12px; | 997 | font-size: 12px; |
| 998 | color: #666666; | 998 | color: #666666; |
| 999 | letter-spacing: 0; | 999 | letter-spacing: 0; |
| 1000 | text-align: justify; | 1000 | text-align: justify; |
| 1001 | } | 1001 | } |
| 1002 | } | 1002 | } |
| 1003 | } | 1003 | } |
| 1004 | .goods-form { | 1004 | .goods-form { |
| 1005 | display: flex; | 1005 | display: flex; |
| 1006 | flex-direction: column; | 1006 | flex-direction: column; |
| 1007 | align-items: center; | 1007 | align-items: center; |
| 1008 | justify-content: center; | 1008 | justify-content: center; |
| 1009 | background-color: #fff; | 1009 | background-color: #fff; |
| 1010 | width: 100%; | 1010 | width: 100%; |
| 1011 | padding: 40rpx 0; | 1011 | padding: 40rpx 0; |
| 1012 | .p1 { | 1012 | .p1 { |
| 1013 | font-size: 16px; | 1013 | font-size: 16px; |
| 1014 | color: #333333; | 1014 | color: #333333; |
| 1015 | letter-spacing: -0.3px; | 1015 | letter-spacing: -0.3px; |
| 1016 | text-align: justify; | 1016 | text-align: justify; |
| 1017 | line-height: 24px; | 1017 | line-height: 24px; |
| 1018 | margin: 4px 0; | 1018 | margin: 4px 0; |
| 1019 | } | 1019 | } |
| 1020 | .p2 { | 1020 | .p2 { |
| 1021 | font-size: 12px; | 1021 | font-size: 12px; |
| 1022 | color: #999999; | 1022 | color: #999999; |
| 1023 | letter-spacing: -0.23px; | 1023 | letter-spacing: -0.23px; |
| 1024 | margin-bottom: 32rpx; | 1024 | margin-bottom: 32rpx; |
| 1025 | } | 1025 | } |
| 1026 | .image2 { | 1026 | .image2 { |
| 1027 | width: 42rpx; | 1027 | width: 42rpx; |
| 1028 | height: 34rpx; | 1028 | height: 34rpx; |
| 1029 | margin-right: 12rpx; | 1029 | margin-right: 12rpx; |
| 1030 | } | 1030 | } |
| 1031 | .confirm { | 1031 | .confirm { |
| 1032 | display: flex; | 1032 | display: flex; |
| 1033 | align-items: center; | 1033 | align-items: center; |
| 1034 | font-size: 12px; | 1034 | font-size: 12px; |
| 1035 | color: #666666; | 1035 | color: #666666; |
| 1036 | letter-spacing: -0.23px; | 1036 | letter-spacing: -0.23px; |
| 1037 | width: 684rpx; | 1037 | width: 684rpx; |
| 1038 | .image1 { | 1038 | .image1 { |
| 1039 | margin-right: 25rpx; | 1039 | margin-right: 25rpx; |
| 1040 | width: 42rpx; | 1040 | width: 42rpx; |
| 1041 | height: 38rpx; | 1041 | height: 38rpx; |
| 1042 | } | 1042 | } |
| 1043 | } | 1043 | } |
| 1044 | .picker { | 1044 | .picker { |
| 1045 | display: flex; | 1045 | display: flex; |
| 1046 | flex-direction: column; | 1046 | flex-direction: column; |
| 1047 | justify-content: center; | 1047 | justify-content: center; |
| 1048 | align-items: center; | 1048 | align-items: center; |
| 1049 | width: 100%; | 1049 | width: 100%; |
| 1050 | 1050 | ||
| 1051 | .picker-choice { | 1051 | .picker-choice { |
| 1052 | display: flex; | 1052 | display: flex; |
| 1053 | width: 684rpx; | 1053 | width: 684rpx; |
| 1054 | align-items: center; | 1054 | align-items: center; |
| 1055 | margin-bottom: 40rpx; | 1055 | margin-bottom: 40rpx; |
| 1056 | .input { | 1056 | .input { |
| 1057 | border-bottom: 1px solid #cfcfcf; | 1057 | border-bottom: 1px solid #cfcfcf; |
| 1058 | height: 40rpx; | 1058 | height: 40rpx; |
| 1059 | } | 1059 | } |
| 1060 | .choice-left { | 1060 | .choice-left { |
| 1061 | width: 210rpx; | 1061 | width: 210rpx; |
| 1062 | .pd { | 1062 | .pd { |
| 1063 | font-size: 14px; | 1063 | font-size: 14px; |
| 1064 | color: #333333; | 1064 | color: #333333; |
| 1065 | letter-spacing: -0.26px; | 1065 | letter-spacing: -0.26px; |
| 1066 | text-align: justify; | 1066 | text-align: justify; |
| 1067 | line-height: 24px; | 1067 | line-height: 24px; |
| 1068 | margin-right: 44rpx; | 1068 | margin-right: 44rpx; |
| 1069 | } | 1069 | } |
| 1070 | .p11 { | 1070 | .p11 { |
| 1071 | font-size: 14px; | 1071 | font-size: 14px; |
| 1072 | color: #333333; | 1072 | color: #333333; |
| 1073 | letter-spacing: -0.26px; | 1073 | letter-spacing: -0.26px; |
| 1074 | text-align: justify; | 1074 | text-align: justify; |
| 1075 | line-height: 24px; | 1075 | line-height: 24px; |
| 1076 | // margin-right: 10px; | 1076 | // margin-right: 10px; |
| 1077 | } | 1077 | } |
| 1078 | .p12 { | 1078 | .p12 { |
| 1079 | font-size: 10px; | 1079 | font-size: 10px; |
| 1080 | color: #3f3f3f; | 1080 | color: #3f3f3f; |
| 1081 | letter-spacing: -0.19px; | 1081 | letter-spacing: -0.19px; |
| 1082 | text-align: justify; | 1082 | text-align: justify; |
| 1083 | line-height: 24px; | 1083 | line-height: 24px; |
| 1084 | } | 1084 | } |
| 1085 | } | 1085 | } |
| 1086 | .p13 { | 1086 | .p13 { |
| 1087 | font-size: 10px; | 1087 | font-size: 10px; |
| 1088 | color: #999999; | 1088 | color: #999999; |
| 1089 | letter-spacing: -0.19px; | 1089 | letter-spacing: -0.19px; |
| 1090 | margin-right: 10px; | 1090 | margin-right: 10px; |
| 1091 | } | 1091 | } |
| 1092 | .p13-date { | 1092 | .p13-date { |
| 1093 | font-size: 10px; | 1093 | font-size: 10px; |
| 1094 | color: #999999; | 1094 | color: #999999; |
| 1095 | letter-spacing: -0.19px; | 1095 | letter-spacing: -0.19px; |
| 1096 | margin-right: 5px; | 1096 | margin-right: 5px; |
| 1097 | } | 1097 | } |
| 1098 | picker { | 1098 | picker { |
| 1099 | width: 144rpx; | 1099 | width: 144rpx; |
| 1100 | height: 40rpx; | 1100 | height: 40rpx; |
| 1101 | display: flex; | 1101 | display: flex; |
| 1102 | position: relative; | 1102 | position: relative; |
| 1103 | .p14 { | 1103 | .p14 { |
| 1104 | font-size: 14px; | 1104 | font-size: 14px; |
| 1105 | color: #666666; | 1105 | color: #666666; |
| 1106 | letter-spacing: -0.26px; | 1106 | letter-spacing: -0.26px; |
| 1107 | text-align: center; | 1107 | text-align: center; |
| 1108 | width: 124rpx; | 1108 | width: 124rpx; |
| 1109 | border-bottom: 1px solid #cfcfcf; | 1109 | border-bottom: 1px solid #cfcfcf; |
| 1110 | height: 38rpx; | 1110 | height: 38rpx; |
| 1111 | } | 1111 | } |
| 1112 | image { | 1112 | image { |
| 1113 | width: 20rpx; | 1113 | width: 20rpx; |
| 1114 | height: 20rpx; | 1114 | height: 20rpx; |
| 1115 | position: absolute; | 1115 | position: absolute; |
| 1116 | right: 20rpx; | 1116 | right: 20rpx; |
| 1117 | top: 8rpx; | 1117 | top: 8rpx; |
| 1118 | } | 1118 | } |
| 1119 | } | 1119 | } |
| 1120 | } | 1120 | } |
| 1121 | } | 1121 | } |
| 1122 | } | 1122 | } |
| 1123 | } | 1123 | } |
| 1124 | } | 1124 | } |
| 1125 | .choose { | 1125 | .choose { |
| 1126 | width: 100%; | 1126 | width: 100%; |
| 1127 | background: #ffffff; | 1127 | background: #ffffff; |
| 1128 | border-radius: 12rpx; | 1128 | border-radius: 12rpx; |
| 1129 | margin-top: 20rpx; | 1129 | margin-top: 20rpx; |
| 1130 | padding: 40rpx 40rpx 112rpx 40rpx; | 1130 | padding: 40rpx 40rpx 112rpx 40rpx; |
| 1131 | box-sizing: border-box; | 1131 | box-sizing: border-box; |
| 1132 | .chooseItem { | 1132 | .chooseItem { |
| 1133 | width: 100%; | 1133 | width: 100%; |
| 1134 | padding-bottom: 32rpx; | 1134 | padding-bottom: 32rpx; |
| 1135 | border-bottom: 1px solid #e9e9e9; | 1135 | border-bottom: 1px solid #e9e9e9; |
| 1136 | margin-bottom: 28rpx; | 1136 | margin-bottom: 28rpx; |
| 1137 | } | 1137 | } |
| 1138 | .chooseRes { | 1138 | .chooseRes { |
| 1139 | font-size: 12px; | 1139 | font-size: 12px; |
| 1140 | color: #666666; | 1140 | color: #666666; |
| 1141 | } | 1141 | } |
| 1142 | .itemsWrap { | 1142 | .itemsWrap { |
| 1143 | display: flex; | 1143 | display: flex; |
| 1144 | flex-direction: row; | 1144 | flex-direction: row; |
| 1145 | flex-wrap: wrap; | 1145 | flex-wrap: wrap; |
| 1146 | justify-content: flex-start; | 1146 | justify-content: flex-start; |
| 1147 | align-items: center; | 1147 | align-items: center; |
| 1148 | padding-top: 24rpx; | 1148 | padding-top: 24rpx; |
| 1149 | .item1 { | 1149 | .item1 { |
| 1150 | width: 64rpx; | 1150 | width: 64rpx; |
| 1151 | height: 64rpx; | 1151 | height: 64rpx; |
| 1152 | border-radius: 32rpx; | 1152 | border-radius: 32rpx; |
| 1153 | margin: 0 36rpx 24rpx 0; | 1153 | margin: 0 36rpx 24rpx 0; |
| 1154 | transition: all 0.3s; | 1154 | transition: all 0.3s; |
| 1155 | border: 1px solid #ffffff; | 1155 | border: 1px solid #ffffff; |
| 1156 | } | 1156 | } |
| 1157 | .item2 { | 1157 | .item2 { |
| 1158 | // width: 100rpx; | 1158 | // width: 100rpx; |
| 1159 | padding: 0 30rpx; | 1159 | padding: 0 30rpx; |
| 1160 | height: 60rpx; | 1160 | height: 60rpx; |
| 1161 | margin: 0 20rpx 20rpx 0; | 1161 | margin: 0 20rpx 20rpx 0; |
| 1162 | transition: all 0.3s; | 1162 | transition: all 0.3s; |
| 1163 | background: #f2f2f2; | 1163 | background: #f2f2f2; |
| 1164 | border-radius: 2px; | 1164 | border-radius: 2px; |
| 1165 | border-radius: 2px; | 1165 | border-radius: 2px; |
| 1166 | line-height: 60rpx; | 1166 | line-height: 60rpx; |
| 1167 | text-align: center; | 1167 | text-align: center; |
| 1168 | color: #666666; | 1168 | color: #666666; |
| 1169 | font-size: 12px; | 1169 | font-size: 12px; |
| 1170 | } | 1170 | } |
| 1171 | .active1 { | 1171 | .active1 { |
| 1172 | opacity: 0.7; | 1172 | opacity: 0.7; |
| 1173 | border: 1px solid #ff6b4a; | 1173 | border: 1px solid #ff6b4a; |
| 1174 | } | 1174 | } |
| 1175 | .active2 { | 1175 | .active2 { |
| 1176 | background: rgba(255, 107, 74, 0.15); | 1176 | background: rgba(255, 107, 74, 0.15); |
| 1177 | color: #ff6b4a; | 1177 | color: #ff6b4a; |
| 1178 | } | 1178 | } |
| 1179 | } | 1179 | } |
| 1180 | } | 1180 | } |
| 1181 | .button { | 1181 | .button { |
| 1182 | position: fixed; | 1182 | position: fixed; |
| 1183 | z-index: 10; | 1183 | z-index: 10; |
| 1184 | width: 100%; | 1184 | width: 100%; |
| 1185 | height: 112rpx; | 1185 | height: 112rpx; |
| 1186 | background-color: #ff6b4a; | 1186 | background-color: #ff6b4a; |
| 1187 | font-size: 16px; | 1187 | font-size: 16px; |
| 1188 | color: #ffffff; | 1188 | color: #ffffff; |
| 1189 | line-height: 112rpx; | 1189 | line-height: 112rpx; |
| 1190 | text-align: center; | 1190 | text-align: center; |
| 1191 | // position: absolute; | 1191 | // position: absolute; |
| 1192 | bottom: 0; | 1192 | bottom: 0; |
| 1193 | left: 0; | 1193 | left: 0; |
| 1194 | } | 1194 | } |
| 1195 | } | 1195 | } |
| 1196 | /* sheet弹窗 */ | 1196 | /* sheet弹窗 */ |
| 1197 | .sheet { | 1197 | .sheet { |
| 1198 | width: 100%; | 1198 | width: 100%; |
| 1199 | height: 100%; | 1199 | height: 100%; |
| 1200 | position: fixed; | 1200 | position: fixed; |
| 1201 | top: 150%; | 1201 | top: 150%; |
| 1202 | left: 0upx; | 1202 | left: 0upx; |
| 1203 | bottom: 0upx; | 1203 | bottom: 0upx; |
| 1204 | right: 0upx; | 1204 | right: 0upx; |
| 1205 | background: rgba(0, 0, 0, 0.3); | 1205 | background: rgba(0, 0, 0, 0.3); |
| 1206 | z-index: 10000; | 1206 | z-index: 10000; |
| 1207 | } | 1207 | } |
| 1208 | 1208 | ||
| 1209 | /* 显示时候的动画默认0.5s */ | 1209 | /* 显示时候的动画默认0.5s */ |
| 1210 | .sheetView { | 1210 | .sheetView { |
| 1211 | width: 100%; | 1211 | width: 100%; |
| 1212 | height: 0upx; | 1212 | height: 0upx; |
| 1213 | position: absolute; | 1213 | position: absolute; |
| 1214 | bottom: 0upx; | 1214 | bottom: 0upx; |
| 1215 | background: white; | 1215 | background: white; |
| 1216 | z-index: 10001; | 1216 | z-index: 10001; |
| 1217 | transition: all 0.5s; | 1217 | transition: all 0.5s; |
| 1218 | } | 1218 | } |
| 1219 | .sheetShow { | 1219 | .sheetShow { |
| 1220 | top: 0upx !important; | 1220 | top: 0upx !important; |
| 1221 | } | 1221 | } |
| 1222 | /* 关闭时的动画，时间自己可以设置0.5s*/ | 1222 | /* 关闭时的动画，时间自己可以设置0.5s*/ |
| 1223 | .sheeHide { | 1223 | .sheeHide { |
| 1224 | top: 120% !important; | 1224 | top: 120% !important; |
| 1225 | transition: all 0.5s; | 1225 | transition: all 0.5s; |
| 1226 | } | 1226 | } |
| 1227 | 1227 | ||
| 1228 | /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/ | 1228 | /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/ |
| 1229 | .sheetView_active { | 1229 | .sheetView_active { |
| 1230 | height: 942upx; | 1230 | height: 942upx; |
| 1231 | } | 1231 | } |
| 1232 | </style> | 1232 | </style> |
| 1233 | 1233 |
src/pages/frameDetail/frameDetail.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <view class="D1"> | 3 | <view class="D1"> |
| 4 | <!-- 轮播图 --> | 4 | <!-- 轮播图 --> |
| 5 | <swiper | 5 | <swiper |
| 6 | class="swiperImage" | 6 | class="swiperImage" |
| 7 | :indicator-dots="true" | 7 | :indicator-dots="true" |
| 8 | :autoplay="true" | 8 | :autoplay="true" |
| 9 | :interval="4000" | 9 | :interval="4000" |
| 10 | :duration="500" | 10 | :duration="500" |
| 11 | > | 11 | > |
| 12 | <swiper-item | 12 | <swiper-item |
| 13 | v-for="(item, index) in goodInfo.pics" | 13 | v-for="(item, index) in goodInfo.pics" |
| 14 | :key="index" | 14 | :key="index" |
| 15 | > | 15 | > |
| 16 | <image | 16 | <image |
| 17 | :src="item" | 17 | :src="item" |
| 18 | mode="scaleToFill" | 18 | mode="scaleToFill" |
| 19 | ></image> | 19 | ></image> |
| 20 | </swiper-item> | 20 | </swiper-item> |
| 21 | </swiper> | 21 | </swiper> |
| 22 | <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> | 22 | <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> |
| 23 | <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> | 23 | <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> |
| 24 | <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> | 24 | <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> |
| 25 | </view> | 25 | </view> |
| 26 | <view | 26 | <!-- <view |
| 27 | class="D2" | 27 | class="D2" |
| 28 | v-if="updateGoodType == 2 || updateGoodType == 4" | 28 | v-if="updateGoodType == 2 || updateGoodType == 4" |
| 29 | > | 29 | > |
| 30 | <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | 30 | <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> |
| 31 | <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> | 31 | <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> |
| 32 | <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> | 32 | <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> |
| 33 | </view> | ||
| 34 | <!-- <view | ||
| 35 | class="D2" | ||
| 36 | v-if="updateGoodType == 1" | ||
| 37 | > | ||
| 38 | <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | ||
| 39 | <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> | ||
| 40 | <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> | ||
| 41 | </view> | ||
| 42 | <view | ||
| 43 | class="D2" | ||
| 44 | v-if="updateGoodType == 3" | ||
| 45 | > | ||
| 46 | <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | ||
| 47 | <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> | ||
| 48 | <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> | ||
| 49 | </view> --> | 33 | </view> --> |
| 50 | <view class="D3"> | 34 | <view class="D3"> |
| 51 | <view class="screenBar"> | 35 | <view class="screenBar"> |
| 52 | <view | 36 | <view |
| 53 | v-for="item in screenItems" | 37 | v-for="item in screenItems" |
| 54 | :key="item.current" | 38 | :key="item.current" |
| 55 | @click="tabChange(item.current)" | 39 | @click="tabChange(item.current)" |
| 56 | > | 40 | > |
| 57 | <view | 41 | <view |
| 58 | class="screenItem" | 42 | class="screenItem" |
| 59 | v-bind:class="{ active: current === item.current }" | 43 | v-bind:class="{ active: current === item.current }" |
| 60 | >{{ item.text || '暂无' }}</view> | 44 | >{{ item.text || '暂无' }}</view> |
| 61 | </view> | 45 | </view> |
| 62 | </view> | 46 | </view> |
| 63 | <view | 47 | <view |
| 64 | class="screen-item" | 48 | class="screen-item" |
| 65 | v-if="current === 1" | 49 | v-if="current === 1" |
| 66 | > | 50 | > |
| 67 | <view class="D3_list"> | 51 | <view class="D3_list"> |
| 68 | <view | 52 | <view |
| 69 | v-for="(item) in parameter" | 53 | v-for="(item) in parameter" |
| 70 | :key="item.key" | 54 | :key="item.key" |
| 71 | > | 55 | > |
| 72 | <image | 56 | <image |
| 73 | class="D3_image" | 57 | class="D3_image" |
| 74 | v-bind:src="item.img" | 58 | v-bind:src="item.img" |
| 75 | ></image> | 59 | ></image> |
| 76 | <span>{{item.standard || '暂无'}}</span> | 60 | <span>{{item.standard || '暂无'}}</span> |
| 77 | <span>{{item.slength || '暂无'}}</span> | 61 | <span>{{item.slength || '暂无'}}</span> |
| 78 | </view> | 62 | </view> |
| 79 | </view> | 63 | </view> |
| 80 | </view> | 64 | </view> |
| 81 | <view | 65 | <view |
| 82 | class="screen-item" | 66 | class="screen-item" |
| 83 | v-if="current === 0" | 67 | v-if="current === 0" |
| 84 | > | 68 | > |
| 85 | <view class="D3_list"> | 69 | <view class="D3_list"> |
| 86 | <!-- <block> | 70 | <!-- <block> |
| 87 | <view>主体</view> | 71 | <view>主体</view> |
| 88 | <view>商品产地：韩国</view> | 72 | <view>商品产地：韩国</view> |
| 89 | <view>包装清单：彩色隐形 * 1</view> | 73 | <view>包装清单：彩色隐形 * 1</view> |
| 90 | </block> --> | 74 | </block> --> |
| 91 | <!-- 迭代时建议配合接口修改 为数组 --> | 75 | <!-- 迭代时建议配合接口修改 为数组 --> |
| 92 | <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> | 76 | <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> |
| 93 | <view class=""> | 77 | <view class=""> |
| 94 | 年龄：<view | 78 | 年龄：<view |
| 95 | v-for="(item,index) in tag.prod_tag_age" | 79 | v-for="(item,index) in tag.prod_tag_age" |
| 96 | :key="index" | 80 | :key="index" |
| 97 | > | 81 | > |
| 98 | {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> | 82 | {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> |
| 99 | </view> | 83 | </view> |
| 100 | </view> | 84 | </view> |
| 101 | </view> | 85 | </view> |
| 102 | <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> | 86 | <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> |
| 103 | <view class=""> | 87 | <view class=""> |
| 104 | 颜色：<view | 88 | 颜色：<view |
| 105 | v-for="(item,index) in tag.prod_tag_color" | 89 | v-for="(item,index) in tag.prod_tag_color" |
| 106 | :key="index" | 90 | :key="index" |
| 107 | > | 91 | > |
| 108 | {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> | 92 | {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> |
| 109 | </view> | 93 | </view> |
| 110 | </view> | 94 | </view> |
| 111 | </view> | 95 | </view> |
| 112 | <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> | 96 | <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> |
| 113 | <view class=""> | 97 | <view class=""> |
| 114 | 脸型：<view | 98 | 脸型：<view |
| 115 | v-for="(item,index) in tag.prod_tag_face" | 99 | v-for="(item,index) in tag.prod_tag_face" |
| 116 | :key="index" | 100 | :key="index" |
| 117 | > | 101 | > |
| 118 | {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> | 102 | {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> |
| 119 | </view> | 103 | </view> |
| 120 | </view> | 104 | </view> |
| 121 | </view> | 105 | </view> |
| 122 | <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> | 106 | <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> |
| 123 | <view class=""> | 107 | <view class=""> |
| 124 | 赠品：<view | 108 | 赠品：<view |
| 125 | v-for="(item,index) in tag.prod_tag_freesend" | 109 | v-for="(item,index) in tag.prod_tag_freesend" |
| 126 | :key="index" | 110 | :key="index" |
| 127 | > | 111 | > |
| 128 | {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> | 112 | {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> |
| 129 | </view> | 113 | </view> |
| 130 | </view> | 114 | </view> |
| 131 | </view> | 115 | </view> |
| 132 | <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> | 116 | <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> |
| 133 | <view class=""> | 117 | <view class=""> |
| 134 | 保险：<view | 118 | 保险：<view |
| 135 | v-for="(item,index) in tag.prod_tag_insurance" | 119 | v-for="(item,index) in tag.prod_tag_insurance" |
| 136 | :key="index" | 120 | :key="index" |
| 137 | > | 121 | > |
| 138 | {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> | 122 | {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> |
| 139 | </view> | 123 | </view> |
| 140 | </view> | 124 | </view> |
| 141 | </view> | 125 | </view> |
| 142 | <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> | 126 | <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> |
| 143 | <view class=""> | 127 | <view class=""> |
| 144 | 材质：<view | 128 | 材质：<view |
| 145 | v-for="(item,index) in tag.prod_tag_metal" | 129 | v-for="(item,index) in tag.prod_tag_metal" |
| 146 | :key="index" | 130 | :key="index" |
| 147 | > | 131 | > |
| 148 | {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> | 132 | {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> |
| 149 | </view> | 133 | </view> |
| 150 | </view> | 134 | </view> |
| 151 | </view> | 135 | </view> |
| 152 | <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> | 136 | <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> |
| 153 | <view class=""> | 137 | <view class=""> |
| 154 | 个性：<view | 138 | 个性：<view |
| 155 | v-for="(item,index) in tag.prod_tag_personal" | 139 | v-for="(item,index) in tag.prod_tag_personal" |
| 156 | :key="index" | 140 | :key="index" |
| 157 | > | 141 | > |
| 158 | {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> | 142 | {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> |
| 159 | </view> | 143 | </view> |
| 160 | </view> | 144 | </view> |
| 161 | </view> | 145 | </view> |
| 162 | <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> | 146 | <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> |
| 163 | <view class=""> | 147 | <view class=""> |
| 164 | 场景：<view | 148 | 场景：<view |
| 165 | v-for="(item,index) in tag.prod_tag_sense" | 149 | v-for="(item,index) in tag.prod_tag_sense" |
| 166 | :key="index" | 150 | :key="index" |
| 167 | > | 151 | > |
| 168 | {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> | 152 | {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> |
| 169 | </view> | 153 | </view> |
| 170 | </view> | 154 | </view> |
| 171 | </view> | 155 | </view> |
| 172 | <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> | 156 | <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> |
| 173 | <view class=""> | 157 | <view class=""> |
| 174 | 性别：<view | 158 | 性别：<view |
| 175 | v-for="(item,index) in tag.prod_tag_sex" | 159 | v-for="(item,index) in tag.prod_tag_sex" |
| 176 | :key="index" | 160 | :key="index" |
| 177 | > | 161 | > |
| 178 | {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> | 162 | {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> |
| 179 | </view> | 163 | </view> |
| 180 | </view> | 164 | </view> |
| 181 | </view> | 165 | </view> |
| 182 | <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> | 166 | <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> |
| 183 | <view class=""> | 167 | <view class=""> |
| 184 | 风格：<view | 168 | 风格：<view |
| 185 | v-for="(item,index) in tag.prod_tag_style" | 169 | v-for="(item,index) in tag.prod_tag_style" |
| 186 | :key="index" | 170 | :key="index" |
| 187 | > | 171 | > |
| 188 | {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> | 172 | {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> |
| 189 | </view> | 173 | </view> |
| 190 | </view> | 174 | </view> |
| 191 | </view> | 175 | </view> |
| 192 | <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> | 176 | <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> |
| 193 | <view class=""> | 177 | <view class=""> |
| 194 | 重量：<view | 178 | 重量：<view |
| 195 | v-for="(item,index) in tag.prod_tag_weight" | 179 | v-for="(item,index) in tag.prod_tag_weight" |
| 196 | :key="index" | 180 | :key="index" |
| 197 | > | 181 | > |
| 198 | {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> | 182 | {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> |
| 199 | </view> | 183 | </view> |
| 200 | </view> | 184 | </view> |
| 201 | </view> | 185 | </view> |
| 202 | </view> | 186 | </view> |
| 203 | </view> | 187 | </view> |
| 204 | <view | 188 | <view |
| 205 | class="screen-item " | 189 | class="screen-item " |
| 206 | v-if="current ===2" | 190 | v-if="current ===2" |
| 207 | > | 191 | > |
| 208 | <view class="customerService"> | 192 | <view class="customerService"> |
| 209 | <view class="serviceItem"> | 193 | <view class="serviceItem"> |
| 210 | <view class="title"> | 194 | <view class="title"> |
| 211 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 195 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
| 212 | <text class="titleText">卖家服务</text> | 196 | <text class="titleText">卖家服务</text> |
| 213 | </view> | 197 | </view> |
| 214 | <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> | 198 | <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> |
| 215 | </view> | 199 | </view> |
| 216 | <view class="serviceItem"> | 200 | <view class="serviceItem"> |
| 217 | <view class="title"> | 201 | <view class="title"> |
| 218 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 202 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
| 219 | <text class="titleText">平台承诺</text> | 203 | <text class="titleText">平台承诺</text> |
| 220 | </view> | 204 | </view> |
| 221 | <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> | 205 | <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> |
| 222 | </view> | 206 | </view> |
| 223 | <view class="serviceItem"> | 207 | <view class="serviceItem"> |
| 224 | <view class="title"> | 208 | <view class="title"> |
| 225 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 209 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
| 226 | <text class="titleText">正品保证</text> | 210 | <text class="titleText">正品保证</text> |
| 227 | </view> | 211 | </view> |
| 228 | <view class="itemContent">向您保证所售商品均为正品行货</view> | 212 | <view class="itemContent">向您保证所售商品均为正品行货</view> |
| 229 | </view> | 213 | </view> |
| 230 | <view class="serviceItem2"> | 214 | <view class="serviceItem2"> |
| 231 | <view class="title"> | 215 | <view class="title"> |
| 232 | <text class="titleText">权利申明</text> | 216 | <text class="titleText">权利申明</text> |
| 233 | </view> | 217 | </view> |
| 234 | <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> | 218 | <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> |
| 235 | </view> | 219 | </view> |
| 236 | <view class="serviceItem2"> | 220 | <view class="serviceItem2"> |
| 237 | <view class="title"> | 221 | <view class="title"> |
| 238 | <text class="titleText">价格保证</text> | 222 | <text class="titleText">价格保证</text> |
| 239 | </view> | 223 | </view> |
| 240 | <view class="itemContent"> | 224 | <view class="itemContent"> |
| 241 | <view class="itemContent-child"> | 225 | <view class="itemContent-child"> |
| 242 | <text class="contentTitle">平台价:</text> | 226 | <text class="contentTitle">平台价:</text> |
| 243 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 227 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
| 244 | </view> | 228 | </view> |
| 245 | <view class="itemContent-child"> | 229 | <view class="itemContent-child"> |
| 246 | <text class="contentTitle">划线价:</text> | 230 | <text class="contentTitle">划线价:</text> |
| 247 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 231 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
| 248 | </view> | 232 | </view> |
| 249 | <view class="itemContent-child"> | 233 | <view class="itemContent-child"> |
| 250 | <text class="contentTitle">平折扣:</text> | 234 | <text class="contentTitle">平折扣:</text> |
| 251 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 235 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
| 252 | </view> | 236 | </view> |
| 253 | <view class="itemContent-child"> | 237 | <view class="itemContent-child"> |
| 254 | <text class="contentTitle">异常问题:</text> | 238 | <text class="contentTitle">异常问题:</text> |
| 255 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 239 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
| 256 | </view> | 240 | </view> |
| 257 | 241 | ||
| 258 | </view> | 242 | </view> |
| 259 | </view> | 243 | </view> |
| 260 | </view> | 244 | </view> |
| 261 | </view> | 245 | </view> |
| 262 | </view> | 246 | </view> |
| 263 | <view | 247 | <view |
| 264 | class="D4" | 248 | class="D4" |
| 265 | v-if="current !==2" | 249 | v-if="current !==2" |
| 266 | > | 250 | > |
| 267 | <view class="D4_esvalue"> | 251 | <view class="D4_esvalue"> |
| 268 | <view>{{esvalue}} {{goodInfo.judgeInfo.good}}</view> | 252 | <view>{{esvalue}} {{goodInfo.judgeInfo.good}}</view> |
| 269 | <view class="D4_2"> | 253 | <view class="D4_2"> |
| 270 | <view | 254 | <view |
| 271 | class="star" | 255 | class="star" |
| 272 | v-for="o in starCount" | 256 | v-for="o in starCount" |
| 273 | :key="o" | 257 | :key="o" |
| 274 | > | 258 | > |
| 275 | <image | 259 | <image |
| 276 | src="../../static/img/detail/d_star.png" | 260 | src="../../static/img/detail/d_star.png" |
| 277 | mode="aspectFill" | 261 | mode="aspectFill" |
| 278 | style="height: 26rpx; width: 28rpx;" | 262 | style="height: 26rpx; width: 28rpx;" |
| 279 | ></image> | 263 | ></image> |
| 280 | </view> | 264 | </view> |
| 281 | </view> | 265 | </view> |
| 282 | </view> | 266 | </view> |
| 283 | <view class="D4_list"> | 267 | <view class="D4_list"> |
| 284 | <view | 268 | <view |
| 285 | v-for="(assess) in goodInfo.judge_tag" | 269 | v-for="(assess) in goodInfo.judge_tag" |
| 286 | :key="assess.key" | 270 | :key="assess.key" |
| 287 | >{{assess.name}}</view> | 271 | >{{assess.name}}</view> |
| 288 | </view> | 272 | </view> |
| 289 | </view> | 273 | </view> |
| 290 | <view | 274 | <view |
| 291 | class="D5" | 275 | class="D5" |
| 292 | v-if="current !==2" | 276 | v-if="current !==2" |
| 293 | > | 277 | > |
| 294 | <view | 278 | <view |
| 295 | class="D5_fixed1" | 279 | class="D5_fixed1" |
| 296 | @click="consolg(goodInfo.prodIntro1)" | 280 | @click="consolg(goodInfo.prodIntro1)" |
| 297 | > | 281 | > |
| 298 | <image src="/static/img/detail/hr.png"></image> | 282 | <image src="/static/img/detail/hr.png"></image> |
| 299 | <view>商品详细</view> | 283 | <view>商品详细</view> |
| 300 | <image src="/static/img/detail/hr.png"></image> | 284 | <image src="/static/img/detail/hr.png"></image> |
| 301 | </view> | 285 | </view> |
| 302 | <view | 286 | <view |
| 303 | class="D5_all" | 287 | class="D5_all" |
| 304 | v-html="test" | 288 | v-html="test" |
| 305 | > | 289 | > |
| 306 | <!-- <block> | 290 | <!-- <block> |
| 307 | <rich-text :nodes="goodInfo.prodIntro1"></rich-text> | 291 | <rich-text :nodes="goodInfo.prodIntro1"></rich-text> |
| 308 | </block> --> | 292 | </block> --> |
| 309 | </view> | 293 | </view> |
| 310 | </view> | 294 | </view> |
| 311 | <!-- 底部菜单 --> | 295 | <!-- 底部菜单 --> |
| 312 | <view class="botton"> | 296 | <view class="botton"> |
| 313 | <view | 297 | <view |
| 314 | @tap="toCart()" | 298 | @tap="toCart()" |
| 315 | class="botton_1" | 299 | class="botton_1" |
| 316 | > | 300 | > |
| 317 | <view class="cart_icon"> | 301 | <view class="cart_icon"> |
| 318 | <image v-bind:src="imgShop.img" /> | 302 | <image v-bind:src="imgShop.img" /> |
| 319 | <text>{{cartNumber}}</text> | 303 | <text>{{cartNumber}}</text> |
| 320 | </view> | 304 | </view> |
| 321 | <view class="botton_image">购物车</view> | 305 | <view class="botton_image">购物车</view> |
| 322 | </view> | 306 | </view> |
| 323 | <view class="botton_2"> | 307 | <view class="botton_2"> |
| 324 | <view | 308 | <view |
| 325 | class="botton_input" | 309 | class="botton_input" |
| 326 | @tap="showBottom(true)" | 310 | @tap="showBottom(true)" |
| 327 | >加入购物车</view> | 311 | >加入购物车</view> |
| 328 | <view | 312 | <view |
| 329 | class="botton_now" | 313 | class="botton_now" |
| 330 | @click="showBottom(false)" | 314 | @click="showBottom(false)" |
| 331 | >立即购买</view> | 315 | >立即购买</view> |
| 332 | </view> | 316 | </view> |
| 333 | </view> | 317 | </view> |
| 334 | <BottomSheet | 318 | <BottomSheet |
| 335 | v-if="isShowBottom" | 319 | v-if="isShowBottom" |
| 336 | :isCart="isCart" | 320 | :isCart="isCart" |
| 337 | @addCart="addCart" | 321 | @addCart="addCart" |
| 338 | :pid="pid" | 322 | :pid="pid" |
| 339 | :goodInfo="goodInfo" | 323 | :goodInfo="goodInfo" |
| 340 | :isShowBottom="isShowBottom" | 324 | :isShowBottom="isShowBottom" |
| 341 | @closeBottom="closeBottom" | 325 | @closeBottom="closeBottom" |
| 342 | ></BottomSheet> | 326 | ></BottomSheet> |
| 343 | </view> | 327 | </view> |
| 344 | </template> | 328 | </template> |
| 345 | 329 | ||
| 346 | <script> | 330 | <script> |
| 347 | import store from '@/store' | 331 | import store from '@/store' |
| 348 | import BottomSheet from './components/BottomSheet.vue' | 332 | import BottomSheet from './components/BottomSheet.vue' |
| 349 | export default { | 333 | export default { |
| 350 | components: { | 334 | components: { |
| 351 | BottomSheet, | 335 | BottomSheet, |
| 352 | }, | 336 | }, |
| 353 | data () { | 337 | data () { |
| 354 | return { | 338 | return { |
| 355 | isCart: Boolean, | 339 | isCart: Boolean, |
| 356 | isShowBottom: false, // 底部弹窗开关 | 340 | isShowBottom: false, // 底部弹窗开关 |
| 357 | test: '', | 341 | test: '', |
| 358 | goodType: 2, | 342 | goodType: 2, |
| 359 | screenItems: [ | 343 | screenItems: [ |
| 360 | { current: 0, text: '商品介绍' }, | 344 | { current: 0, text: '商品介绍' }, |
| 361 | { current: 1, text: '规格参数' }, | 345 | { current: 1, text: '规格参数' }, |
| 362 | { current: 2, text: '售后保障' }, | 346 | { current: 2, text: '售后保障' }, |
| 363 | ], | 347 | ], |
| 364 | current: 0, | 348 | current: 0, |
| 365 | starCount: 5, | 349 | starCount: 5, |
| 366 | parameter: [ | 350 | parameter: [ |
| 367 | { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, | 351 | { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, |
| 368 | { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, | 352 | { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, |
| 369 | { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, | 353 | { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, |
| 370 | { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, | 354 | { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, |
| 371 | { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, | 355 | { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, |
| 372 | { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, | 356 | { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, |
| 373 | ], | 357 | ], |
| 374 | esvalue: '宝贝好评率', | 358 | esvalue: '宝贝好评率', |
| 375 | introduction: { | 359 | introduction: { |
| 376 | material: '钛合金', | 360 | material: '钛合金', |
| 377 | func: '抗疲劳/防辐射', | 361 | func: '抗疲劳/防辐射', |
| 378 | rate: '男/女', | 362 | rate: '男/女', |
| 379 | }, | 363 | }, |
| 380 | imgAll: '/static/img/detail/d8.png', | 364 | imgAll: '/static/img/detail/d8.png', |
| 381 | photoes: [ | 365 | photoes: [ |
| 382 | { value: '日常办公', img: '/static/img/detail/d9.png' }, | 366 | { value: '日常办公', img: '/static/img/detail/d9.png' }, |
| 383 | { value: '上网', img: '/static/img/detail/d10.png' }, | 367 | { value: '上网', img: '/static/img/detail/d10.png' }, |
| 384 | { value: '追剧', img: '/static/img/detail/d11.png' }, | 368 | { value: '追剧', img: '/static/img/detail/d11.png' }, |
| 385 | { value: '玩游戏', img: '/static/img/detail/d12.png' }, | 369 | { value: '玩游戏', img: '/static/img/detail/d12.png' }, |
| 386 | ], | 370 | ], |
| 387 | imgDetail: '/static/img/detail/d13.png', | 371 | imgDetail: '/static/img/detail/d13.png', |
| 388 | imgShop: { | 372 | imgShop: { |
| 389 | img: '/static/tab-cart.png', | 373 | img: '/static/tab-cart.png', |
| 390 | IsShown: false, | 374 | IsShown: false, |
| 391 | }, | 375 | }, |
| 392 | tag: { | 376 | tag: { |
| 393 | prod_tag_freesend: [{ | 377 | prod_tag_freesend: [{ |
| 394 | label: '眼镜盒', | 378 | label: '眼镜盒', |
| 395 | value: '262', | 379 | value: '262', |
| 396 | }], | 380 | }], |
| 397 | }, | 381 | }, |
| 398 | 382 | ||
| 399 | pid: 0, | 383 | pid: 0, |
| 400 | // 购物车数据 | 384 | // 购物车数据 |
| 401 | addCartList: { | 385 | addCartList: { |
| 402 | uid: Number, // 用户的唯一识别码 | 386 | uid: Number, // 用户的唯一识别码 |
| 403 | openid: String, | 387 | openid: String, |
| 404 | mp_id: Number, // 使用人 | 388 | mp_id: Number, // 使用人 |
| 405 | sk_id: Number, // 产品的sku_id | 389 | sk_id: Number, // 产品的sku_id |
| 406 | num: Number, // 购买数量 | 390 | num: Number, // 购买数量 |
| 407 | pid: Number, // 产品id | 391 | pid: Number, // 产品id |
| 408 | price: Number, // 价格 | 392 | price: Number, // 价格 |
| 409 | checkedSKU: Object, // 产品信息 | 393 | checkedSKU: Object, // 产品信息 |
| 410 | }, | 394 | }, |
| 411 | } | 395 | } |
| 412 | }, | 396 | }, |
| 413 | onLoad: function ({ pid, sk_id: skId }) { | 397 | onLoad: function ({ pid, sk_id: skId }) { |
| 414 | this.pid = pid | 398 | this.pid = pid |
| 415 | // console.log('sk_id=====>',sk_id) | 399 | // console.log('sk_id=====>',sk_id) |
| 416 | store.dispatch('read/fetch', { | 400 | store.dispatch('read/fetch', { |
| 417 | pid, | 401 | pid, |
| 418 | sk_id: skId, | 402 | sk_id: skId, |
| 419 | }).then(() => { | 403 | }).then(() => { |
| 420 | this.parameter[0].slength = `${this.goodInfo.frame_width}mm` | 404 | this.parameter[0].slength = `${this.goodInfo.frame_width}mm` |
| 421 | this.parameter[1].slength = `${this.goodInfo.glass_width}mm` | 405 | this.parameter[1].slength = `${this.goodInfo.glass_width}mm` |
| 422 | this.parameter[2].slength = `${this.goodInfo.glass_height}mm` | 406 | this.parameter[2].slength = `${this.goodInfo.glass_height}mm` |
| 423 | this.parameter[3].slength = `${this.goodInfo.nose_width}mm` | 407 | this.parameter[3].slength = `${this.goodInfo.nose_width}mm` |
| 424 | this.parameter[4].slength = `${this.goodInfo.leg_long}mm` | 408 | this.parameter[4].slength = `${this.goodInfo.leg_long}mm` |
| 425 | this.parameter[5].slength = `${this.goodInfo.weight}mm` | 409 | this.parameter[5].slength = `${this.goodInfo.weight}mm` |
| 426 | this.tag = this.goodInfo.tag | 410 | this.tag = this.goodInfo.tag |
| 427 | this.test = this.goodInfo.prodIntro1 | 411 | this.test = this.goodInfo.prodIntro1 |
| 428 | this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') | 412 | this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') |
| 429 | // addCart | 413 | // addCart |
| 430 | this.addCartList.uid = this.$store.state.user.userInfo.uid | 414 | this.addCartList.uid = this.$store.state.user.userInfo.uid |
| 431 | this.addCartList.openid = this.$store.state.user.userInfo.openid | 415 | this.addCartList.openid = this.$store.state.user.userInfo.openid |
| 432 | this.addCartList.pid = this.goodInfo.pid | 416 | this.addCartList.pid = this.goodInfo.pid |
| 433 | this.addCartList.price = this.goodInfo.priceArea.Min_Price | 417 | this.addCartList.price = this.goodInfo.priceArea.Min_Price |
| 434 | }) | 418 | }) |
| 435 | store.dispatch('cart/getCartList') | 419 | store.dispatch('cart/getCartList') |
| 436 | // console.log(this.$store.state.user.userInfo.uid + 'ssss') | 420 | // console.log(this.$store.state.user.userInfo.uid + 'ssss') |
| 437 | }, | 421 | }, |
| 438 | computed: { | 422 | computed: { |
| 439 | updateGoodType () { | 423 | updateGoodType () { |
| 440 | return this.goodType | 424 | return this.goodType |
| 441 | }, | 425 | }, |
| 442 | goodInfo () { | 426 | goodInfo () { |
| 443 | // console.log(this.$store.state.read.goodInfo) | 427 | // console.log(this.$store.state.read.goodInfo) |
| 444 | return this.$store.state.read.goodInfo | 428 | return this.$store.state.read.goodInfo |
| 445 | }, | 429 | }, |
| 446 | cartNumber() { | 430 | cartNumber() { |
| 447 | return this.$store.state.cart.cartList.length || 0 | 431 | return this.$store.state.cart.cartList.length || 0 |
| 448 | }, | 432 | }, |
| 449 | }, | 433 | }, |
| 450 | methods: { | 434 | methods: { |
| 451 | // 底部弹窗开关 | 435 | // 底部弹窗开关 |
| 452 | showBottom(isCart) { | 436 | showBottom(isCart) { |
| 453 | this.isCart = isCart | 437 | this.isCart = isCart |
| 454 | this.isShowBottom = true | 438 | this.isShowBottom = true |
| 455 | }, | 439 | }, |
| 456 | closeBottom() { | 440 | closeBottom() { |
| 457 | this.isShowBottom = false | 441 | this.isShowBottom = false |
| 458 | }, | 442 | }, |
| 459 | // 前往购物车 | 443 | // 前往购物车 |
| 460 | toCart() { | 444 | toCart() { |
| 461 | uni.switchTab({ | 445 | uni.switchTab({ |
| 462 | url: '/pages/cart/cart', | 446 | url: '/pages/cart/cart', |
| 463 | success: res => {}, | 447 | success: res => {}, |
| 464 | fail: (error) => { console.log('跳转购物车失败======>', error) }, | 448 | fail: (error) => { console.log('跳转购物车失败======>', error) }, |
| 465 | complete: () => { console.log('toCart') }, | 449 | complete: () => { console.log('toCart') }, |
| 466 | }) | 450 | }) |
| 467 | }, | 451 | }, |
| 468 | // 加入购物车 | 452 | // 加入购物车 |
| 469 | addCart (mp_id, num, checkedSKU, sk_id) { | 453 | addCart (mp_id, num, checkedSKU, sk_id) { |
| 470 | this.addCartList.mp_id = mp_id | 454 | this.addCartList.mp_id = mp_id |
| 471 | this.addCartList.sk_id = sk_id | 455 | this.addCartList.sk_id = sk_id |
| 472 | this.addCartList.num = num | 456 | this.addCartList.num = num |
| 473 | this.addCartList.checkedSKU = checkedSKU | 457 | this.addCartList.checkedSKU = checkedSKU |
| 474 | console.log('添加购物车的参数', this.addCartList) | 458 | console.log('添加购物车的参数', this.addCartList) |
| 475 | store.dispatch('cart/addCart', this.addCartList).then((res) => { | 459 | store.dispatch('cart/addCart', this.addCartList).then((res) => { |
| 476 | console.log('*-*-*-*--*-', res) | 460 | console.log('*-*-*-*--*-', res) |
| 477 | // 再次请求购物车接口，实现实时更新 | 461 | // 再次请求购物车接口，实现实时更新 |
| 478 | store.dispatch('cart/getCartList', { | 462 | store.dispatch('cart/getCartList', { |
| 479 | uid: this.$store.state.user.userInfo.uid, | 463 | uid: this.$store.state.user.userInfo.uid, |
| 480 | }) | 464 | }) |
| 481 | }) | 465 | }) |
| 482 | }, | 466 | }, |
| 483 | goPerchase () { | 467 | goPerchase () { |
| 484 | // switch (this.updateGoodType) { | 468 | // switch (this.updateGoodType) { |
| 485 | // case '1': | 469 | // case '1': |
| 486 | console.log('goPerchase') | 470 | console.log('goPerchase') |
| 487 | uni.navigateTo({ | 471 | uni.navigateTo({ |
| 488 | url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, | 472 | url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, |
| 489 | success: res => {}, | 473 | success: res => {}, |
| 490 | fail: (error) => { console.log('跳转参数选择失败======>', error) }, | 474 | fail: (error) => { console.log('跳转参数选择失败======>', error) }, |
| 491 | complete: () => { console.log('goPerchase') }, | 475 | complete: () => { console.log('goPerchase') }, |
| 492 | }) | 476 | }) |
| 493 | // break | ||
| 494 | // case '2': | ||
| 495 | // uni.navigateTo({ | ||
| 496 | // url: '../detailStandard/detailStandard_k', | ||
| 497 | // success: res => {}, | ||
| 498 | // fail: () => {}, | ||
| 499 | // complete: () => {} | ||
| 500 | // }) | ||
| 501 | // break | ||
| 502 | // case '3': | ||
| 503 | // uni.navigateTo({ | ||
| 504 | // url: '../purchaseLenses/purchaseLenses', | ||
| 505 | // success: res => {}, | ||
| 506 | // fail: () => {}, | ||
| 507 | // complete: () => {} | ||
| 508 | // }) | ||
| 509 | // break | ||
| 510 | // case '4': | ||
| 511 | // uni.navigateTo({ | ||
| 512 | // url: '../detailStandard/detailStandard_sun', | ||
| 513 | // success: res => {}, | ||
| 514 | // fail: () => {}, | ||
| 515 | // complete: () => {} | ||
| 516 | // }) | ||
| 517 | // break | ||
| 518 | // default : | ||
| 519 | // break | ||
| 520 | // } | ||
| 521 | }, | 477 | }, |
| 522 | // 加入购物车 | ||
| 523 | // addCart () { | ||
| 524 | // store.dispatch('cart/addCart', { | ||
| 525 | // uid: this.$store.state.user.userInfo.uid, | ||
| 526 | // openid: this.$store.state.user.userInfo.openid, | ||
| 527 | // pid: this.pid, | ||
| 528 | // checkedSKU: {}, | ||
| 529 | // }) | ||
| 530 | // store.dispatch('cart/getCartList', { | ||
| 531 | // uid: this.$store.state.user.userInfo.uid, // 用户id | ||
| 532 | // }) | ||
| 533 | // }, | ||
| 534 | tabChange (e) { | 478 | tabChange (e) { |
| 535 | if (this.current !== e) { | 479 | if (this.current !== e) { |
| 536 | this.current = e | 480 | this.current = e |
| 537 | } | 481 | } |
| 538 | }, | 482 | }, |
| 539 | }, | 483 | }, |
| 540 | } | 484 | } |
| 541 | </script> | 485 | </script> |
| 542 | <style lang='scss'> | 486 | <style lang='scss'> |
| 543 | .container { | 487 | .container { |
| 544 | background-color: #f8f8f8; | 488 | background-color: #f8f8f8; |
| 545 | } | 489 | } |
| 546 | .D1, | 490 | .D1, |
| 547 | .D2, | 491 | .D2, |
| 548 | .D3, | 492 | .D3, |
| 549 | .D4, | 493 | .D4, |
| 550 | .D6 { | 494 | .D6 { |
| 551 | background: #ffffff; | 495 | background: #ffffff; |
| 552 | margin-bottom: 10px; | 496 | margin-bottom: 10px; |
| 553 | padding: 8px 20px 8px 20px; | 497 | padding: 8px 20px 8px 20px; |
| 554 | box-sizing: border-box; | 498 | box-sizing: border-box; |
| 555 | .swiperImage { | 499 | .swiperImage { |
| 556 | width: 684rpx; | 500 | width: 684rpx; |
| 557 | height: 480rpx; | 501 | height: 480rpx; |
| 558 | image { | 502 | image { |
| 559 | max-width: 100%; | 503 | max-width: 100%; |
| 560 | max-height: 100%; | 504 | max-height: 100%; |
| 561 | border-radius: 16rpx; | 505 | border-radius: 16rpx; |
| 562 | } | 506 | } |
| 563 | } | 507 | } |
| 564 | } | 508 | } |
| 565 | .D5 { | 509 | .D5 { |
| 566 | background: #ffffff; | 510 | background: #ffffff; |
| 567 | padding: 8px 20px 8px 20px; | 511 | padding: 8px 20px 8px 20px; |
| 568 | box-sizing: border-box; | 512 | box-sizing: border-box; |
| 569 | } | 513 | } |
| 570 | .swiperImage { | 514 | .swiperImage { |
| 571 | width: 100%; | 515 | width: 100%; |
| 572 | height: 560rpx; | 516 | height: 560rpx; |
| 573 | .swiper-item { | 517 | .swiper-item { |
| 574 | width: 100%; | 518 | width: 100%; |
| 575 | image { | 519 | image { |
| 576 | width: 100%; | 520 | width: 100%; |
| 577 | } | 521 | } |
| 578 | } | 522 | } |
| 579 | } | 523 | } |
| 580 | .D1 { | 524 | .D1 { |
| 581 | .D1_price { | 525 | .D1_price { |
| 582 | color: #eb5d3b; | 526 | color: #eb5d3b; |
| 583 | font-size: 18px; | 527 | font-size: 18px; |
| 584 | margin-top: 5px; | 528 | margin-top: 5px; |
| 585 | font-family: "PingFangSC-Semibold"; | 529 | font-family: "PingFangSC-Semibold"; |
| 586 | display: flex; | 530 | display: flex; |
| 587 | justify-content: space-between; | 531 | justify-content: space-between; |
| 588 | .D1_number { | 532 | .D1_number { |
| 589 | color: #999999; | 533 | color: #999999; |
| 590 | font-size: 14px; | 534 | font-size: 14px; |
| 591 | font-family: "PingFangSC-Regular"; | 535 | font-family: "PingFangSC-Regular"; |
| 592 | } | 536 | } |
| 593 | } | 537 | } |
| 594 | .D1_name { | 538 | .D1_name { |
| 595 | font-size: 16px; | 539 | font-size: 16px; |
| 596 | font-family: "PingFangSC-Semibold"; | 540 | font-family: "PingFangSC-Semibold"; |
| 597 | margin-top: 5px; | 541 | margin-top: 5px; |
| 598 | .D1_name1 { | 542 | .D1_name1 { |
| 599 | font-weight: bold; | 543 | font-weight: bold; |
| 600 | font-size: 16px; | 544 | font-size: 16px; |
| 601 | color: #333333; | 545 | color: #333333; |
| 602 | } | 546 | } |
| 603 | } | 547 | } |
| 604 | .D1_spans { | 548 | .D1_spans { |
| 605 | font-size: 10px; | 549 | font-size: 10px; |
| 606 | color: #999999; | 550 | color: #999999; |
| 607 | margin-top: 5px; | 551 | margin-top: 5px; |
| 608 | span { | 552 | span { |
| 609 | height: 14px; | 553 | height: 14px; |
| 610 | margin-right: 10px; | 554 | margin-right: 10px; |
| 611 | } | 555 | } |
| 612 | } | 556 | } |
| 613 | } | 557 | } |
| 614 | .D2 { | 558 | .D2 { |
| 615 | font-size: 14px; | 559 | font-size: 14px; |
| 616 | font-family: "PingFangSC-Regular"; | 560 | font-family: "PingFangSC-Regular"; |
| 617 | view { | 561 | view { |
| 618 | height: 24px; | 562 | height: 24px; |
| 619 | } | 563 | } |
| 620 | .D2_span1 { | 564 | .D2_span1 { |
| 621 | color: #999999; | 565 | color: #999999; |
| 622 | } | 566 | } |
| 623 | .D2_span2 { | 567 | .D2_span2 { |
| 624 | color: #333333; | 568 | color: #333333; |
| 625 | } | 569 | } |
| 626 | } | 570 | } |
| 627 | .D3 { | 571 | .D3 { |
| 628 | .screenBar { | 572 | .screenBar { |
| 629 | width: 670rpx; | 573 | width: 670rpx; |
| 630 | margin-top: 20rpx; | 574 | margin-top: 20rpx; |
| 631 | margin-bottom: 24rpx; | 575 | margin-bottom: 24rpx; |
| 632 | display: flex; | 576 | display: flex; |
| 633 | flex-direction: row; | 577 | flex-direction: row; |
| 634 | justify-content: space-between; | 578 | justify-content: space-between; |
| 635 | align-items: center; | 579 | align-items: center; |
| 636 | font-size: 14px; | 580 | font-size: 14px; |
| 637 | color: #333333; | 581 | color: #333333; |
| 638 | transition: all 0.2s; | 582 | transition: all 0.2s; |
| 639 | } | 583 | } |
| 640 | .screen-item { | 584 | .screen-item { |
| 641 | font-size: 32rpx; | 585 | font-size: 32rpx; |
| 642 | color: #333333; | 586 | color: #333333; |
| 643 | display: flex; | 587 | display: flex; |
| 644 | transition: all 0.2s; | 588 | transition: all 0.2s; |
| 645 | .D3_list { | 589 | .D3_list { |
| 646 | margin-bottom: 4px; | 590 | margin-bottom: 4px; |
| 647 | } | 591 | } |
| 648 | .D3_list view { | 592 | .D3_list view { |
| 649 | display: flex; | 593 | display: flex; |
| 650 | align-content: center; | 594 | align-content: center; |
| 651 | font-size: 14px; | 595 | font-size: 14px; |
| 652 | color: #333333; | 596 | color: #333333; |
| 653 | } | 597 | } |
| 654 | .D3_list image { | 598 | .D3_list image { |
| 655 | width: 50px; | 599 | width: 50px; |
| 656 | height: 25px; | 600 | height: 25px; |
| 657 | margin-right: 6px; | 601 | margin-right: 6px; |
| 658 | } | 602 | } |
| 659 | .D3_list span { | 603 | .D3_list span { |
| 660 | margin-left: 6px; | 604 | margin-left: 6px; |
| 661 | margin-right: 5px; | 605 | margin-right: 5px; |
| 662 | font-family: "PingFangSC-Regular"; | 606 | font-family: "PingFangSC-Regular"; |
| 663 | } | 607 | } |
| 664 | } | 608 | } |
| 665 | .active { | 609 | .active { |
| 666 | border-bottom: 4rpx solid #ff6b4a; | 610 | border-bottom: 4rpx solid #ff6b4a; |
| 667 | } | 611 | } |
| 668 | .customerService { | 612 | .customerService { |
| 669 | margin-bottom: 90rpx; | 613 | margin-bottom: 90rpx; |
| 670 | .serviceItem { | 614 | .serviceItem { |
| 671 | margin-bottom: 32rpx; | 615 | margin-bottom: 32rpx; |
| 672 | .title { | 616 | .title { |
| 673 | display: flex; | 617 | display: flex; |
| 674 | flex-direction: row; | 618 | flex-direction: row; |
| 675 | align-items: center; | 619 | align-items: center; |
| 676 | .titleText { | 620 | .titleText { |
| 677 | font-size: 14px; | 621 | font-size: 14px; |
| 678 | color: #333333; | 622 | color: #333333; |
| 679 | margin-bottom: 12rpx; | 623 | margin-bottom: 12rpx; |
| 680 | } | 624 | } |
| 681 | } | 625 | } |
| 682 | .itemContent { | 626 | .itemContent { |
| 683 | font-size: 14px; | 627 | font-size: 14px; |
| 684 | color: #999999; | 628 | color: #999999; |
| 685 | margin-left: 18rpx; | 629 | margin-left: 18rpx; |
| 686 | } | 630 | } |
| 687 | } | 631 | } |
| 688 | .serviceItem2 { | 632 | .serviceItem2 { |
| 689 | margin-left: 18rpx; | 633 | margin-left: 18rpx; |
| 690 | margin-bottom: 32rpx; | 634 | margin-bottom: 32rpx; |
| 691 | .titleText { | 635 | .titleText { |
| 692 | font-size: 14px; | 636 | font-size: 14px; |
| 693 | color: #ff6b4a; | 637 | color: #ff6b4a; |
| 694 | } | 638 | } |
| 695 | .itemContent { | 639 | .itemContent { |
| 696 | font-size: 14px; | 640 | font-size: 14px; |
| 697 | color: #999999; | 641 | color: #999999; |
| 698 | .itemContent-child { | 642 | .itemContent-child { |
| 699 | margin-bottom: 40rpx; | 643 | margin-bottom: 40rpx; |
| 700 | .contentTitle { | 644 | .contentTitle { |
| 701 | border-bottom: 1px solid #ff6b4a; | 645 | border-bottom: 1px solid #ff6b4a; |
| 702 | } | 646 | } |
| 703 | } | 647 | } |
| 704 | } | 648 | } |
| 705 | } | 649 | } |
| 706 | } | 650 | } |
| 707 | } | 651 | } |
| 708 | .D4 { | 652 | .D4 { |
| 709 | .D4_esvalue { | 653 | .D4_esvalue { |
| 710 | font-size: 14px; | 654 | font-size: 14px; |
| 711 | color: #333333; | 655 | color: #333333; |
| 712 | display: flex; | 656 | display: flex; |
| 713 | justify-content: space-between; | 657 | justify-content: space-between; |
| 714 | margin-bottom: 10px; | 658 | margin-bottom: 10px; |
| 715 | .D4_2 { | 659 | .D4_2 { |
| 716 | width: 90px; | 660 | width: 90px; |
| 717 | display: flex; | 661 | display: flex; |
| 718 | align-items: center; | 662 | align-items: center; |
| 719 | justify-content: space-between; | 663 | justify-content: space-between; |
| 720 | } | 664 | } |
| 721 | } | 665 | } |
| 722 | .D4_esvalue view { | 666 | .D4_esvalue view { |
| 723 | font-size: 14px; | 667 | font-size: 14px; |
| 724 | color: #333333; | 668 | color: #333333; |
| 725 | font-weight: bold; | 669 | font-weight: bold; |
| 726 | } | 670 | } |
| 727 | .D4_list { | 671 | .D4_list { |
| 728 | display: grid; | 672 | display: grid; |
| 729 | grid-row-gap: 10px; | 673 | grid-row-gap: 10px; |
| 730 | grid-column-gap: 4px; | 674 | grid-column-gap: 4px; |
| 731 | } | 675 | } |
| 732 | .D4_list view { | 676 | .D4_list view { |
| 733 | display: flex; | 677 | display: flex; |
| 734 | justify-content: center; | 678 | justify-content: center; |
| 735 | align-items: center; | 679 | align-items: center; |
| 736 | font-size: 12px; | 680 | font-size: 12px; |
| 737 | width: 118px; | 681 | width: 118px; |
| 738 | height: 24px; | 682 | height: 24px; |
| 739 | border-radius: 2px; | 683 | border-radius: 2px; |
| 740 | background: #f2f2f2; | 684 | background: #f2f2f2; |
| 741 | color: #666666; | 685 | color: #666666; |
| 742 | // letter-spacing: 1px; | 686 | // letter-spacing: 1px; |
| 743 | } | 687 | } |
| 744 | } | 688 | } |
| 745 | .D5 { | 689 | .D5 { |
| 746 | .D5_fixed1 { | 690 | .D5_fixed1 { |
| 747 | display: flex; | 691 | display: flex; |
| 748 | justify-content: space-between; | 692 | justify-content: space-between; |
| 749 | align-content: center; | 693 | align-content: center; |
| 750 | margin-bottom: 12px; | 694 | margin-bottom: 12px; |
| 751 | view { | 695 | view { |
| 752 | font-size: 14px; | 696 | font-size: 14px; |
| 753 | color: #333333; | 697 | color: #333333; |
| 754 | font-weight: bold; | 698 | font-weight: bold; |
| 755 | font-family: "PingFangSC-Medium"; | 699 | font-family: "PingFangSC-Medium"; |
| 756 | line-height: 24px; | 700 | line-height: 24px; |
| 757 | } | 701 | } |
| 758 | image { | 702 | image { |
| 759 | width: 240rpx; | 703 | width: 240rpx; |
| 760 | height: 3px; | 704 | height: 3px; |
| 761 | margin-top: 10px; | 705 | margin-top: 10px; |
| 762 | } | 706 | } |
| 763 | } | 707 | } |
| 764 | .D5_all { | 708 | .D5_all { |
| 765 | width: 100%; | 709 | width: 100%; |
| 766 | margin-top: 30rpx; | 710 | margin-top: 30rpx; |
| 767 | margin-right: 30rpx; | 711 | margin-right: 30rpx; |
| 768 | margin-bottom: 180rpx; | 712 | margin-bottom: 180rpx; |
| 769 | font-family: "PingFangSC-Regular"; | 713 | font-family: "PingFangSC-Regular"; |
| 770 | // border: #999999 solid 1.5px; | 714 | // border: #999999 solid 1.5px; |
| 771 | } | 715 | } |
| 772 | } | 716 | } |
| 773 | .D6 { | 717 | .D6 { |
| 774 | width: 100%; | 718 | width: 100%; |
| 775 | height: 430px; | 719 | height: 430px; |
| 776 | background: #f9f6ed; | 720 | background: #f9f6ed; |
| 777 | margin-bottom: 74px; | 721 | margin-bottom: 74px; |
| 778 | view { | 722 | view { |
| 779 | text-align: center; | 723 | text-align: center; |
| 780 | } | 724 | } |
| 781 | .D6_v1 { | 725 | .D6_v1 { |
| 782 | font-weight: bold; | 726 | font-weight: bold; |
| 783 | } | 727 | } |
| 784 | .D6_v2 { | 728 | .D6_v2 { |
| 785 | font-size: 14px; | 729 | font-size: 14px; |
| 786 | margin-bottom: 30px; | 730 | margin-bottom: 30px; |
| 787 | } | 731 | } |
| 788 | .D6_v5 { | 732 | .D6_v5 { |
| 789 | .D6_v5_s1 { | 733 | .D6_v5_s1 { |
| 790 | font-weight: bold; | 734 | font-weight: bold; |
| 791 | } | 735 | } |
| 792 | .D6_v5_s2 { | 736 | .D6_v5_s2 { |
| 793 | font-size: 14px; | 737 | font-size: 14px; |
| 794 | } | 738 | } |
| 795 | } | 739 | } |
| 796 | } | 740 | } |
| 797 | .botton { | 741 | .botton { |
| 798 | position: fixed; | 742 | position: fixed; |
| 799 | bottom: 0; | 743 | bottom: 0; |
| 800 | height: 74px; | 744 | height: 74px; |
| 801 | width: 100%; | 745 | width: 100%; |
| 802 | background: #ffffff; | 746 | background: #ffffff; |
| 803 | padding: 20px 20px 8px 20px; | 747 | padding: 20px 20px 8px 20px; |
| 804 | font-family: "PingFangSC-Regular"; | 748 | font-family: "PingFangSC-Regular"; |
| 805 | box-sizing: border-box; | 749 | box-sizing: border-box; |
| 806 | display: flex; | 750 | display: flex; |
| 807 | justify-content: space-between; | 751 | justify-content: space-between; |
| 808 | align-content: center; | 752 | align-content: center; |
| 809 | .botton_1 { | 753 | .botton_1 { |
| 810 | width: 20%; | 754 | width: 20%; |
| 811 | height: 100%; | 755 | height: 100%; |
| 812 | text-align: center; | 756 | text-align: center; |
| 813 | color: #989898; | 757 | color: #989898; |
| 814 | .cart_icon { | 758 | .cart_icon { |
| 815 | position: relative; | 759 | position: relative; |
| 816 | image { | 760 | image { |
| 817 | } | 761 | } |
| 818 | text { | 762 | text { |
| 819 | position: absolute; | 763 | position: absolute; |
| 820 | color: white; | 764 | color: white; |
| 821 | font-size: 17px; | 765 | font-size: 17px; |
| 822 | background-color: red; | 766 | background-color: red; |
| 823 | min-height: 24px; | 767 | min-height: 24px; |
| 824 | min-width: 24px; | 768 | min-width: 24px; |
| 825 | line-height: 24px; | 769 | line-height: 24px; |
| 826 | right: -12%; | 770 | right: -12%; |
| 827 | top: -12px; | 771 | top: -12px; |
| 828 | text-align: center; | 772 | text-align: center; |
| 829 | border-radius: 24px; | 773 | border-radius: 24px; |
| 830 | padding: 2px; | 774 | padding: 2px; |
| 831 | } | 775 | } |
| 832 | } | 776 | } |
| 833 | } | 777 | } |
| 834 | image { | 778 | image { |
| 835 | width: 42%; | 779 | width: 42%; |
| 836 | height: 26px; | 780 | height: 26px; |
| 837 | } | 781 | } |
| 838 | .botton_image { | 782 | .botton_image { |
| 839 | font-size: 12px; | 783 | font-size: 12px; |
| 840 | text-align: center; | 784 | text-align: center; |
| 841 | } | 785 | } |
| 842 | .botton_2 { | 786 | .botton_2 { |
| 843 | width: 74%; | 787 | width: 74%; |
| 844 | height: 86%; | 788 | height: 86%; |
| 845 | display: grid; | 789 | display: grid; |
| 846 | grid-template-columns: 50% 50%; | 790 | grid-template-columns: 50% 50%; |
| 847 | } | 791 | } |
| 848 | .botton_input { | 792 | .botton_input { |
| 849 | display: inline-flex; | 793 | display: inline-flex; |
| 850 | align-items: center; | 794 | align-items: center; |
| 851 | justify-content: space-around; | 795 | justify-content: space-around; |
| 852 | background: #fff0ec; | 796 | background: #fff0ec; |
| 853 | font-size: 16px; | 797 | font-size: 16px; |
| 854 | color: #ff6b4a; | 798 | color: #ff6b4a; |
| 855 | border-radius: 20px 0 0 20px; | 799 | border-radius: 20px 0 0 20px; |
| 856 | } | 800 | } |
| 857 | .botton_now { | 801 | .botton_now { |
| 858 | display: inline-flex; | 802 | display: inline-flex; |
| 859 | align-items: center; | 803 | align-items: center; |
| 860 | justify-content: space-around; | 804 | justify-content: space-around; |
| 861 | background: #ff6b4a; | 805 | background: #ff6b4a; |
| 862 | font-size: 16px; | 806 | font-size: 16px; |
| 863 | color: #ffffff; | 807 | color: #ffffff; |
| 864 | border-radius: 0 20px 20px 0; | 808 | border-radius: 0 20px 20px 0; |
| 865 | } | 809 | } |
| 866 | } | 810 | } |
| 867 | /* 隐藏滚动条 */ | 811 | /* 隐藏滚动条 */ |
| 868 | ::-webkit-scrollbar { | 812 | ::-webkit-scrollbar { |
| 869 | width: 0; | 813 | width: 0; |
| 870 | height: 0; | 814 | height: 0; |
| 871 | color: transparent; | 815 | color: transparent; |
| 872 | } | 816 | } |
| 873 | </style> | 817 | </style> |
| 874 | 818 |
src/store/modules/read.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 | read | 5 | read, |
| 6 | } = urlAlias | 6 | } = urlAlias |
| 7 | 7 | ||
| 8 | const state = { | 8 | const state = { |
| 9 | goodInfo: {} | 9 | goodInfo: {}, |
| 10 | } | 10 | } |
| 11 | 11 | ||
| 12 | const mutations = { | 12 | const mutations = { |
| 13 | INIT: (state, goodInfo) => { | 13 | INIT: (state, goodInfo) => { |
| 14 | state.goodInfo = goodInfo | 14 | state.goodInfo = goodInfo |
| 15 | } | 15 | }, |
| 16 | } | 16 | } |
| 17 | 17 | ||
| 18 | const actions = { | 18 | const actions = { |
| 19 | fetch({ commit }, param) { | 19 | fetch({ commit }, param) { |
| 20 | // 由于购物车和用户推荐的价格要根据sk_id来获取 | 20 | // 由于购物车和用户推荐的价格要根据sk_id来获取 |
| 21 | const arg=Object.assign({},param) | 21 | const arg = Object.assign({}, param) |
| 22 | delete param.sk_id | 22 | delete param.sk_id |
| 23 | return new Promise((resolve, reject) => request({ | 23 | return new Promise((resolve, reject) => request({ |
| 24 | url: read, | 24 | url: read, |
| 25 | data: param, | 25 | data: param, |
| 26 | success: (res) => { | 26 | success: (res) => { |
| 27 | console.log('readParm====>',arg) | 27 | console.log('readParm====>', arg) |
| 28 | console.log('read====>',res.data.data) | 28 | console.log('read====>', res.data.data) |
| 29 | // 用一个新的对象来接收sk_id找的值 | 29 | // 用一个新的对象来接收sk_id找的值 |
| 30 | const Res=Object.assign({},res.data.data) | 30 | const Res = Object.assign({}, res.data.data) |
| 31 | if(arg.sk_id!=undefined){ | 31 | if (arg.sk_id !== undefined) { |
| 32 | for (let i = 0; i < res.data.data.skuList.length; i++) { | 32 | for (let i = 0; i < res.data.data.skuList.length; i++) { |
| 33 | if(res.data.data.skuList[i].sk_id==arg.sk_id){ | 33 | if (res.data.data.skuList[i].sk_id === arg.sk_id) { |
| 34 | Res.p_sale_price= res.data.data.skuList[i].real_price | 34 | Res.p_sale_price = res.data.data.skuList[i].real_price |
| 35 | console.log('陈工了') | 35 | console.log('陈工了') |
| 36 | } | 36 | } |
| 37 | } | 37 | } |
| 38 | } | 38 | } |
| 39 | console.log(Res) | 39 | console.log(Res) |
| 40 | commit('INIT', Res) | 40 | commit('INIT', Res) |
| 41 | resolve() | 41 | resolve(res) |
| 42 | }, | 42 | }, |
| 43 | fail: (res) => { | 43 | fail: (res) => { |
| 44 | console.log('fail status === > ', res) | 44 | console.log('fail status === > ', res) |
| 45 | }, | 45 | }, |
| 46 | complete: (res) => { | 46 | complete: (res) => { |
| 47 | console.log('complete status === > ', res) | 47 | console.log('complete status === > ', res) |
| 48 | } | 48 | }, |
| 49 | })) | 49 | })) |
| 50 | } | 50 | }, |
| 51 | } | 51 | } |
| 52 | 52 | ||
| 53 | export default { | 53 | export default { |
| 54 | namespaced: true, | 54 | namespaced: true, |
| 55 | state, | 55 | state, |
| 56 | mutations, | 56 | mutations, |
| 57 | actions | 57 | actions, |
| 58 | } | 58 | } |
| 59 | 59 |