Commit acc7ee230ce5fe24f0e2b4283cf92032aac82fda
1 parent
7a7226feae
Exists in
master
购物车，用户推荐，新增验光逻辑修改
Showing
4 changed files
with
191 additions
and
183 deletions
Show diff stats
src/pages/cart/cart.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <block v-if="cartList.length==0"> | 3 | <block v-if="cartList.length==0"> |
| 4 | 4 | ||
| 5 | </block> | 5 | </block> |
| 6 | <block v-else> | 6 | <block v-else> |
| 7 | <view class="card"> | 7 | <view class="card"> |
| 8 | <view class="cardHeader"> | 8 | <view class="cardHeader"> |
| 9 | <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" | 9 | <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" |
| 10 | @tap="pChange(pIsoPen)"> | 10 | @tap="pChange(pIsoPen)"> |
| 11 | <span class="correct"></span> | 11 | <span class="correct"></span> |
| 12 | </view> | 12 | </view> |
| 13 | <image src="../../static/store.png" mode="aspectFill"></image> | 13 | <image src="../../static/store.png" mode="aspectFill"></image> |
| 14 | <text>非常戴镜</text> | 14 | <text>非常戴镜</text> |
| 15 | </view> | 15 | </view> |
| 16 | 16 | ||
| 17 | <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" | 17 | <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" |
| 18 | @longpress="delCart(item.cart_id,index)"> | 18 | @longpress="delCart(item.cart_id,index)"> |
| 19 | <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" | 19 | <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" |
| 20 | @tap="Change(childIsOpen[index],index)"> | 20 | @tap="Change(childIsOpen[index],index)"> |
| 21 | <span class="correct"></span> | 21 | <span class="correct"></span> |
| 22 | </view> | 22 | </view> |
| 23 | <view class="imageWrap"> | 23 | <view class="imageWrap"> |
| 24 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> | 24 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> |
| 25 | </view> | 25 | </view> |
| 26 | <view class="goodInfo"> | 26 | <view class="goodInfo"> |
| 27 | <!-- <view class="imageWrap"> | 27 | <!-- <view class="imageWrap"> |
| 28 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> | 28 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> |
| 29 | </view> --> | 29 | </view> --> |
| 30 | <view class="infoRight"> | 30 | <view class="infoRight"> |
| 31 | <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view> | 31 | <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view> |
| 32 | <!-- <view class="describ"> --> | 32 | <!-- <view class="describ"> --> |
| 33 | <uni-collapse accordion="true" > | 33 | <uni-collapse accordion="true" > |
| 34 | <uni-collapse-item showAnimation='true' | 34 | <uni-collapse-item showAnimation='true' |
| 35 | :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...'" > | 35 | :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...'" > |
| 36 | <text class="describ"> | 36 | <text class="describ"> |
| 37 | <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> | 37 | <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> |
| 38 | {{tag.label+` `}} | 38 | {{tag.label+` `}} |
| 39 | </block> | 39 | </block> |
| 40 | </text> | 40 | </text> |
| 41 | <!-- <text> | 41 | <!-- <text> |
| 42 | <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> | 42 | <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> |
| 43 | {{tag.label+` `}} | 43 | {{tag.label+` `}} |
| 44 | </block> | 44 | </block> |
| 45 | </text> --> | 45 | </text> --> |
| 46 | </uni-collapse-item> | 46 | </uni-collapse-item> |
| 47 | </uni-collapse> | 47 | </uni-collapse> |
| 48 | <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> | 48 | <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> |
| 49 | <!-- </view> --> | 49 | <!-- </view> --> |
| 50 | <view class="priceBox"> | 50 | <view class="priceBox"> |
| 51 | <view class="price">￥{{item.nowPrice*item.num}}</view> | 51 | <view class="price">￥{{item.nowPrice*item.num}}</view> |
| 52 | <text class="maxCount">(限购{{maxCount}}副)</text> | 52 | <text class="maxCount">(限购{{maxCount}}副)</text> |
| 53 | <view class="counter"> | 53 | <view class="counter"> |
| 54 | <view class="btn" disabled="this.addDisabled" type="default" | 54 | <view class="btn" disabled="this.addDisabled" type="default" |
| 55 | @tap="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view> | 55 | @tap="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view> |
| 56 | <text>{{item.num}}</text> | 56 | <text>{{item.num}}</text> |
| 57 | <view class="btn" disabled="this.desDisabled" type="default" | 57 | <view class="btn" disabled="this.desDisabled" type="default" |
| 58 | @tap="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view> | 58 | @tap="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view> |
| 59 | </view> | 59 | </view> |
| 60 | </view> | 60 | </view> |
| 61 | </view> | 61 | </view> |
| 62 | </view> | 62 | </view> |
| 63 | </view> | 63 | </view> |
| 64 | </view> | 64 | </view> |
| 65 | </block> | 65 | </block> |
| 66 | <view class="footer"> | 66 | <view class="footer"> |
| 67 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> | 67 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> |
| 68 | <view class="footerRight"> | 68 | <view class="footerRight"> |
| 69 | <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> | 69 | <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> |
| 70 | <view class="paybtn" >立即结算</view> | 70 | <view class="paybtn" >立即结算</view> |
| 71 | </navigator> | 71 | </navigator> |
| 72 | </view> | 72 | </view> |
| 73 | </view> | 73 | </view> |
| 74 | 74 | ||
| 75 | </view> | 75 | </view> |
| 76 | </template> | 76 | </template> |
| 77 | 77 | ||
| 78 | <script> | 78 | <script> |
| 79 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 79 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 80 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 80 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 81 | import store from '@/store' | 81 | import store from '@/store' |
| 82 | 82 | ||
| 83 | export default { | 83 | export default { |
| 84 | components: { UniCollapse, UniCollapseItem }, | 84 | components: { UniCollapse, UniCollapseItem }, |
| 85 | data() { | 85 | data() { |
| 86 | return { | 86 | return { |
| 87 | totalPrice: 0, | 87 | totalPrice: 0, |
| 88 | pIsoPen: false, | 88 | pIsoPen: false, |
| 89 | // childIsOpen:[], | 89 | // childIsOpen:[], |
| 90 | maxCount: 20 | 90 | maxCount: 20 |
| 91 | } | 91 | } |
| 92 | }, | 92 | }, |
| 93 | computed: { | 93 | computed: { |
| 94 | 94 | ||
| 95 | cartList() { | 95 | cartList() { |
| 96 | // console.log('cart-list', this.$store.state.cart.cartList); | 96 | // console.log('cart-list', this.$store.state.cart.cartList); |
| 97 | return this.$store.state.cart.cartList | 97 | return this.$store.state.cart.cartList |
| 98 | }, | 98 | }, |
| 99 | childIsOpen() { | 99 | childIsOpen() { |
| 100 | const temp = [] | 100 | const temp = [] |
| 101 | temp.length = this.$store.state.cart.cartList.length | 101 | temp.length = this.$store.state.cart.cartList.length |
| 102 | for (let i = 0; i < temp.length; i++) { | 102 | for (let i = 0; i < temp.length; i++) { |
| 103 | temp[i] = false | 103 | temp[i] = false |
| 104 | } | 104 | } |
| 105 | console.log('this.childisOPne===>', temp) | 105 | console.log('this.childisOPne===>', temp) |
| 106 | return temp | 106 | return temp |
| 107 | } | 107 | } |
| 108 | }, | 108 | }, |
| 109 | onLoad: function() { | 109 | onLoad: function() { |
| 110 | // 判断是否授权 | 110 | // store.dispatch('cart/addCart', { |
| 111 | // uni.getSetting({ | 111 | // uid: this.$store.state.user.userInfo.uid, |
| 112 | // success(res) { | 112 | // openid: this.$store.state.user.userInfo.openid, |
| 113 | // console.log('authSetting',res.authSetting) | 113 | // mp_id: 7, |
| 114 | // if(res.authSetting['scope.userInfo'] !== true) { | 114 | // sk_id: 7, |
| 115 | 115 | // num: 1, | |
| 116 | // uni.switchTab({ | 116 | // pid: 8, |
| 117 | // url:'/pages/user/user' | 117 | // price: 128, |
| 118 | // }) | 118 | // checkedSKU:{}, |
| 119 | // }else { | 119 | // }) |
| 120 | // } | ||
| 121 | // } | ||
| 122 | // }) | ||
| 123 | |||
| 124 | // console.log('usr-my',this.$store.state.user.userInfo) | ||
| 125 | // store.dispatch('cart/addCart',{ | ||
| 126 | // "num":1, | ||
| 127 | // "pid": 7,//产品id | ||
| 128 | // "uid":1, | ||
| 129 | // "sk_id": 72, | ||
| 130 | // "price": 120, | ||
| 131 | // "mp_id":1, | ||
| 132 | // "checkedSKU":{ | ||
| 133 | // "discount": "45", | ||
| 134 | // "in_price": "6000", | ||
| 135 | // "kc": "0", | ||
| 136 | // "model_pic": null, | ||
| 137 | // "out_price": 191.8, | ||
| 138 | // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg", | ||
| 139 | // "pid": "7", | ||
| 140 | // "real_price": 99, | ||
| 141 | // "sk_id": "89", | ||
| 142 | // "sku_name": "1.56非球面防蓝光_黑", | ||
| 143 | // "sku_shop_value": "", | ||
| 144 | // "sku_value": "58_61", | ||
| 145 | // "status": "1", | ||
| 146 | // }, | ||
| 147 | // }); | ||
| 148 | store.dispatch('cart/getCartList', { | 120 | store.dispatch('cart/getCartList', { |
| 149 | uid: 1 // 用户id | 121 | uid: this.$store.state.user.userInfo.uid // 用户id |
| 150 | }) | 122 | }) |
| 123 | |||
| 151 | }, | 124 | }, |
| 152 | 125 | ||
| 153 | methods: { | 126 | methods: { |
| 154 | // 跳转到对应的选购页面 | 127 | |
| 155 | // toshop(id,type){ | ||
| 156 | // console.log('===',id,type) | ||
| 157 | // switch(type){ | ||
| 158 | // case 1: | ||
| 159 | // uni.navigateTo({ | ||
| 160 | // url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type, | ||
| 161 | // success: res => {}, | ||
| 162 | // fail: () => {}, | ||
| 163 | // complete: () => {} | ||
| 164 | // }); | ||
| 165 | // break; | ||
| 166 | // case 2: | ||
| 167 | // uni.navigateTo({ | ||
| 168 | // url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type, | ||
| 169 | // success: res => {}, | ||
| 170 | // fail: () => {}, | ||
| 171 | // complete: () => {} | ||
| 172 | // }); | ||
| 173 | // break; | ||
| 174 | // case 3||4: | ||
| 175 | // uni.navigateTo({ | ||
| 176 | // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type, | ||
| 177 | // success: res => {}, | ||
| 178 | // fail: () => {}, | ||
| 179 | // complete: () => {} | ||
| 180 | // }); | ||
| 181 | // break; | ||
| 182 | // // case 4: | ||
| 183 | // // uni.navigateTo({ | ||
| 184 | // // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type, | ||
| 185 | // // success: res => {}, | ||
| 186 | // // fail: () => {}, | ||
| 187 | // // complete: () => {} | ||
| 188 | // // }); | ||
| 189 | // case 5: | ||
| 190 | // uni.navigateTo({ | ||
| 191 | // url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type, | ||
| 192 | // success: res => {}, | ||
| 193 | // fail: () => {}, | ||
| 194 | // complete: () => {} | ||
| 195 | // }); | ||
| 196 | // break; | ||
| 197 | // default : | ||
| 198 | // break | ||
| 199 | // } | ||
| 200 | // }, | ||
| 201 | toGoods(id, type) { | 128 | toGoods(id, type) { |
| 202 | uni.navigateTo({ | 129 | uni.navigateTo({ |
| 203 | url: '../frameDetail/frameDetail?oderId=' + id, | 130 | url: '../frameDetail/frameDetail?oderId=' + id, |
| 204 | success: res => {}, | 131 | success: res => {}, |
| 205 | fail: () => {}, | 132 | fail: () => {}, |
| 206 | complete: () => {} | 133 | complete: () => {} |
| 207 | }) | 134 | }) |
| 208 | console.log('toGoods =====> id:' + id + '======>type:' + type) | 135 | console.log('toGoods =====> id:' + id + '======>type:' + type) |
| 209 | switch (type) { | 136 | switch (type) { |
| 210 | case 1: | 137 | case 1: |
| 211 | uni.navigateTo({ | 138 | uni.navigateTo({ |
| 212 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 139 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
| 213 | success: res => {}, | 140 | success: res => {}, |
| 214 | fail: () => {}, | 141 | fail: () => {}, |
| 215 | complete: () => {} | 142 | complete: () => {} |
| 216 | }) | 143 | }) |
| 217 | break | 144 | break |
| 218 | case 2: | 145 | case 2: |
| 219 | uni.navigateTo({ | 146 | uni.navigateTo({ |
| 220 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 147 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
| 221 | success: res => {}, | 148 | success: res => {}, |
| 222 | fail: () => {}, | 149 | fail: () => {}, |
| 223 | complete: () => {} | 150 | complete: () => {} |
| 224 | }) | 151 | }) |
| 225 | break | 152 | break |
| 226 | case 3: | 153 | case 3: |
| 227 | uni.navigateTo({ | 154 | uni.navigateTo({ |
| 228 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 155 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
| 229 | success: res => {}, | 156 | success: res => {}, |
| 230 | fail: () => {}, | 157 | fail: () => {}, |
| 231 | complete: () => {} | 158 | complete: () => {} |
| 232 | }) | 159 | }) |
| 233 | break | 160 | break |
| 234 | case 4: | 161 | case 4: |
| 235 | uni.navigateTo({ | 162 | uni.navigateTo({ |
| 236 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 163 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
| 237 | success: res => {}, | 164 | success: res => {}, |
| 238 | fail: () => {}, | 165 | fail: () => {}, |
| 239 | complete: () => {} | 166 | complete: () => {} |
| 240 | }) | 167 | }) |
| 241 | break | 168 | break |
| 242 | default : | 169 | default : |
| 243 | break | 170 | break |
| 244 | } | 171 | } |
| 245 | }, | 172 | }, |
| 246 | 173 | ||
| 247 | counter(index, isadd, mp_id, sk_id, num, cart_id) { | 174 | counter(index, isadd, mp_id, sk_id, num, cart_id) { |
| 248 | // console.log('===>>counter ===>num',num) | 175 | // console.log('===>>counter ===>num',num) |
| 249 | // console.log('===>>counter ===>isadd',isadd) | 176 | // console.log('===>>counter ===>isadd',isadd) |
| 250 | num = parseInt(num) | 177 | num = parseInt(num) |
| 251 | if (isadd) { | 178 | if (isadd) { |
| 252 | if (num >= this.maxCount) { | 179 | if (num >= this.maxCount) { |
| 253 | this.addDisabled = true | 180 | this.addDisabled = true |
| 254 | } else { | 181 | } else { |
| 255 | this.addDisabled = true | 182 | this.addDisabled = true |
| 256 | // 修改num | 183 | // 修改num |
| 184 | if(this.childIsOpen[index]){ | ||
| 185 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice | ||
| 186 | } | ||
| 257 | store.dispatch('cart/modiCart', { | 187 | store.dispatch('cart/modiCart', { |
| 258 | uid: 1, | 188 | uid: this.$store.state.user.userInfo.uid, |
| 259 | // openid: '', | 189 | openid: this.$store.state.user.userInfo.openid, |
| 260 | mp_id: mp_id, | 190 | mp_id: mp_id, |
| 261 | sk_id: sk_id, | 191 | sk_id: sk_id, |
| 262 | cart_id: cart_id, | 192 | cart_id: cart_id, |
| 263 | num: num + 1, | 193 | num: num + 1, |
| 264 | args: { | 194 | args: { |
| 265 | index: index, | 195 | index: index, |
| 266 | isadd: isadd | 196 | isadd: isadd |
| 267 | } | 197 | } |
| 268 | }) | 198 | }) |
| 269 | this.addDisabled = false | 199 | this.addDisabled = false |
| 270 | } | 200 | } |
| 271 | } else { | 201 | } else { |
| 272 | if (num <= 1) { | 202 | if (num <= 1) { |
| 273 | this.desDisabled = true | 203 | this.desDisabled = true |
| 274 | } else { | 204 | } else { |
| 275 | this.desDisabled = false | 205 | this.desDisabled = false |
| 276 | // post 请求修改相关参数 | 206 | // post 请求修改相关参数 |
| 207 | if(this.childIsOpen[index]){ | ||
| 208 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice | ||
| 209 | } | ||
| 277 | store.dispatch('cart/modiCart', { | 210 | store.dispatch('cart/modiCart', { |
| 278 | uid: 1, | 211 | uid: this.$store.state.user.userInfo.uid, |
| 279 | // openid: '', | 212 | openid: this.$store.state.user.userInfo.openid, |
| 280 | mp_id: mp_id, | 213 | mp_id: mp_id, |
| 281 | sk_id: sk_id, | 214 | sk_id: sk_id, |
| 282 | cart_id: cart_id, | 215 | cart_id: cart_id, |
| 283 | num: num - 1, | 216 | num: num - 1, |
| 284 | args: { | 217 | args: { |
| 285 | index: index, | 218 | index: index, |
| 286 | isadd: isadd | 219 | isadd: isadd |
| 287 | } | 220 | } |
| 288 | }) | 221 | }) |
| 289 | this.desDisabled = true | 222 | this.desDisabled = true |
| 290 | } | 223 | } |
| 291 | } | 224 | } |
| 225 | // store.dispatch('cart/getCartList', { | ||
| 226 | // uid: this.$store.state.user.userInfo.uid // 用户id | ||
| 227 | // }) | ||
| 292 | }, | 228 | }, |
| 293 | 229 | ||
| 294 | Change(isopen, indexC) { | 230 | Change(isopen, indexC) { |
| 295 | // console.log('lalla===>',isopen) | 231 | // console.log('lalla===>',isopen) |
| 296 | this.childIsOpen[indexC] = !isopen | 232 | this.childIsOpen[indexC] = !isopen |
| 297 | if (!isopen) { | 233 | if (!isopen) { |
| 298 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 234 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
| 299 | } else { | 235 | } else { |
| 300 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 236 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
| 301 | } | 237 | } |
| 302 | let m = true | 238 | let m = true |
| 303 | for (let i = 0; i < this.childIsOpen.length; i++) { | 239 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 304 | m = m & this.childIsOpen[i] | 240 | m = m & this.childIsOpen[i] |
| 305 | } | 241 | } |
| 306 | if (m == 1) { | 242 | if (m == 1) { |
| 307 | this.pIsoPen = true | 243 | this.pIsoPen = true |
| 308 | } else { | 244 | } else { |
| 309 | this.pIsoPen = false | 245 | this.pIsoPen = false |
| 310 | } | 246 | } |
| 311 | }, | 247 | }, |
| 312 | pChange(isopen) { | 248 | pChange(isopen) { |
| 313 | this.pIsoPen = !isopen | 249 | this.pIsoPen = !isopen |
| 314 | for (let i = 0; i < this.childIsOpen.length; i++) { | 250 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 315 | this.childIsOpen[i] = !isopen | 251 | this.childIsOpen[i] = !isopen |
| 316 | } | 252 | } |
| 317 | if (this.pIsoPen) { | 253 | if (this.pIsoPen) { |
| 318 | // 计算总价逻辑 | 254 | // 计算总价逻辑 |
| 319 | if (this.childIsOpen.length != 0) { | 255 | if (this.childIsOpen.length != 0) { |
| 320 | for (let i = 0; i < this.childIsOpen.length; i++) { | 256 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 321 | if (this.childIsOpen[i]) { | 257 | if (this.childIsOpen[i]) { |
| 322 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) | 258 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) |
| 323 | } | 259 | } |
| 324 | } | 260 | } |
| 325 | } | 261 | } |
| 326 | } else { | 262 | } else { |
| 327 | this.totalPrice = 0 | 263 | this.totalPrice = 0 |
| 328 | } | 264 | } |
| 329 | }, | 265 | }, |
| 330 | delCart(cart_id, index) { | 266 | delCart(cart_id, index) { |
| 331 | // console.log('userInfo',this.$store.state.user.userInfo) | 267 | // console.log('userInfo',this.$store.state.user.userInfo) |
| 332 | cart_id = parseInt(cart_id) | 268 | cart_id = parseInt(cart_id) |
| 333 | // console.log('delcart------>cart_id',cart_id) | 269 | // console.log('delcart------>cart_id',cart_id) |
| 334 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) | 270 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) |
| 335 | // console.log('delcart======>index',index) | 271 | // console.log('delcart======>index',index) |
| 336 | uni.showModal({ | 272 | uni.showModal({ |
| 337 | title: '是否删除该商品', | 273 | title: '是否删除该商品', |
| 338 | // content: '是否删除该商品', | 274 | // content: '是否删除该商品', |
| 339 | success: function (res) { | 275 | success: function (res) { |
| 340 | if (res.confirm) { | 276 | if (res.confirm) { |
| 341 | // this.$store.state.cart.cartList.splice(index,1) | 277 | // this.$store.state.cart.cartList.splice(index,1) |
| 342 | store.dispatch('cart/delCart', { | 278 | store.dispatch('cart/delCart', { |
| 343 | uid: 1, // 用户id | 279 | uid: this.$store.state.user.userInfo.uid, |
| 344 | openid: '', | 280 | openid: this.$store.state.user.userInfo.openid, |
| 345 | cart_id: cart_id, // 要修改的购物车id | 281 | cart_id: cart_id, // 要修改的购物车id |
| 346 | arg: index // 由于action 传参是能接收两参数，因此将index放入对象 | 282 | arg: index // 由于action 传参是能接收两参数，因此将index放入对象 |
| 347 | }) | 283 | }) |
| 348 | console.log('用户点击确定') | 284 | console.log('用户点击确定') |
| 349 | } | 285 | } |
| 350 | } | 286 | } |
| 351 | }) | 287 | }) |
| 352 | } | 288 | } |
| 353 | } | 289 | } |
| 354 | } | 290 | } |
| 355 | </script> | 291 | </script> |
| 356 | 292 | ||
| 357 | <style lang="scss"> | 293 | <style lang="scss"> |
| 358 | .content { | 294 | .content { |
| 359 | min-height: 100vh; | 295 | min-height: 100vh; |
| 360 | background-color: #f2f2f2; | 296 | background-color: #f2f2f2; |
| 361 | display: flex; | 297 | display: flex; |
| 362 | flex-direction: column; | 298 | flex-direction: column; |
| 363 | align-items: center; | 299 | align-items: center; |
| 364 | justify-content: space-between; | 300 | justify-content: space-between; |
| 365 | padding: 20rpx 40rpx; | 301 | padding: 20rpx 40rpx; |
| 366 | box-sizing: border-box; | 302 | box-sizing: border-box; |
| 367 | 303 | ||
| 368 | .partentCheck{ | 304 | .partentCheck{ |
| 369 | width: 16px; | 305 | width: 16px; |
| 370 | height: 16px; | 306 | height: 16px; |
| 371 | border-radius: 22px; | 307 | border-radius: 22px; |
| 372 | border: 1px solid #CFCFCF; | 308 | border: 1px solid #CFCFCF; |
| 373 | background-color: #FFFFFF; | 309 | background-color: #FFFFFF; |
| 374 | margin: 6px; | 310 | margin: 6px; |
| 375 | } | 311 | } |
| 376 | .partentChecked{ | 312 | .partentChecked{ |
| 377 | width: 18px; | 313 | width: 18px; |
| 378 | height: 18px; | 314 | height: 18px; |
| 379 | border-radius: 22px; | 315 | border-radius: 22px; |
| 380 | background-color: #FF6B4A; | 316 | background-color: #FF6B4A; |
| 381 | margin: 6px; | 317 | margin: 6px; |
| 382 | .correct { | 318 | .correct { |
| 383 | display: inline-block; | 319 | display: inline-block; |
| 384 | position: relative; | 320 | position: relative; |
| 385 | width: 10rpx; | 321 | width: 10rpx; |
| 386 | height: 2rpx; | 322 | height: 2rpx; |
| 387 | background: #FFFFFF; | 323 | background: #FFFFFF; |
| 388 | line-height: 0; | 324 | line-height: 0; |
| 389 | font-size: 0; | 325 | font-size: 0; |
| 390 | position: relative; | 326 | position: relative; |
| 391 | top: -7px; | 327 | top: -7px; |
| 392 | left: 4px; | 328 | left: 4px; |
| 393 | -webkit-transform: rotate(45deg); | 329 | -webkit-transform: rotate(45deg); |
| 394 | } | 330 | } |
| 395 | .correct:after { | 331 | .correct:after { |
| 396 | content: '/'; | 332 | content: '/'; |
| 397 | display: block; | 333 | display: block; |
| 398 | width: 16rpx; | 334 | width: 16rpx; |
| 399 | height: 2rpx; | 335 | height: 2rpx; |
| 400 | background: #FFFFFF; | 336 | background: #FFFFFF; |
| 401 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); | 337 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); |
| 402 | } | 338 | } |
| 403 | } | 339 | } |
| 404 | 340 | ||
| 405 | .card{ | 341 | .card{ |
| 406 | background-color: #FFFFFF; | 342 | background-color: #FFFFFF; |
| 407 | border-radius: 16rpx; | 343 | border-radius: 16rpx; |
| 408 | box-sizing: border-box; | 344 | box-sizing: border-box; |
| 409 | padding: 36rpx 36rpx 36rpx 18rpx; | 345 | padding: 36rpx 36rpx 36rpx 18rpx; |
| 410 | display: flex; | 346 | display: flex; |
| 411 | flex-direction: column; | 347 | flex-direction: column; |
| 412 | align-items: center; | 348 | align-items: center; |
| 413 | justify-content: space-between; | 349 | justify-content: space-between; |
| 414 | margin-bottom: 180rpx; | 350 | margin-bottom: 180rpx; |
| 415 | .cardHeader{ | 351 | .cardHeader{ |
| 416 | width: 100%; | 352 | width: 100%; |
| 417 | height: 36rpx; | 353 | height: 36rpx; |
| 418 | display: flex; | 354 | display: flex; |
| 419 | align-items: center; | 355 | align-items: center; |
| 420 | justify-content: flex-start; | 356 | justify-content: flex-start; |
| 421 | margin-bottom: 20rpx; | 357 | margin-bottom: 20rpx; |
| 422 | image{ | 358 | image{ |
| 423 | height: 32rpx; | 359 | height: 32rpx; |
| 424 | width: 32rpx; | 360 | width: 32rpx; |
| 425 | padding-left: 6px; | 361 | padding-left: 6px; |
| 426 | padding-right: 10px; | 362 | padding-right: 10px; |
| 427 | } | 363 | } |
| 428 | text{ | 364 | text{ |
| 429 | // font-family: PingFangSC-Regular; | 365 | // font-family: PingFangSC-Regular; |
| 430 | font-size: 14px; | 366 | font-size: 14px; |
| 431 | color: #333333; | 367 | color: #333333; |
| 432 | letter-spacing: -0.26px; | 368 | letter-spacing: -0.26px; |
| 433 | } | 369 | } |
| 434 | } | 370 | } |
| 435 | .cardBody{ | 371 | .cardBody{ |
| 436 | width: 100%; | 372 | width: 100%; |
| 437 | min-height: 300rpx; | 373 | min-height: 300rpx; |
| 438 | display: flex; | 374 | display: flex; |
| 439 | align-items: center; | 375 | align-items: center; |
| 440 | justify-content: space-between; | 376 | justify-content: space-between; |
| 441 | .goodInfo{ | 377 | .goodInfo{ |
| 442 | width: 390rpx; | 378 | width: 390rpx; |
| 443 | display: flex; | 379 | display: flex; |
| 444 | flex-direction: row; | 380 | flex-direction: row; |
| 445 | justify-content: flex-start; | 381 | justify-content: flex-start; |
| 446 | padding-left: 6px; | 382 | padding-left: 6px; |
| 447 | 383 | ||
| 448 | .imageWrap{ | 384 | .imageWrap{ |
| 449 | height: 188rpx; | 385 | height: 188rpx; |
| 450 | width: 188rpx; | 386 | width: 188rpx; |
| 451 | margin-right: 28rpx; | 387 | margin-right: 28rpx; |
| 452 | 388 | ||
| 453 | image{ | 389 | image{ |
| 454 | border-radius: 4px; | 390 | border-radius: 4px; |
| 455 | height: 188rpx; | 391 | height: 188rpx; |
| 456 | width: 188rpx; | 392 | width: 188rpx; |
| 457 | } | 393 | } |
| 458 | } | 394 | } |
| 459 | .infoRight{ | 395 | .infoRight{ |
| 460 | display: flex; | 396 | display: flex; |
| 461 | flex-direction: column; | 397 | flex-direction: column; |
| 462 | align-items: flex-start; | 398 | align-items: flex-start; |
| 463 | justify-content: space-between; | 399 | justify-content: space-between; |
| 464 | min-height: 240rpx; | 400 | min-height: 240rpx; |
| 465 | .goodName{ | 401 | .goodName{ |
| 466 | display: -webkit-box; | 402 | display: -webkit-box; |
| 467 | -webkit-box-orient: vertical; | 403 | -webkit-box-orient: vertical; |
| 468 | -webkit-line-clamp: 2; | 404 | -webkit-line-clamp: 2; |
| 469 | text-align: justify; | 405 | text-align: justify; |
| 470 | overflow: hidden; | 406 | overflow: hidden; |
| 471 | font-size: 28rpx; | 407 | font-size: 28rpx; |
| 472 | color: #333333; | 408 | color: #333333; |
| 473 | } | 409 | } |
| 474 | .describ{ | 410 | .describ{ |
| 475 | width: 100%; | 411 | width: 100%; |
| 476 | // min-height: 80rpx; | 412 | // min-height: 80rpx; |
| 477 | // box-sizing: border-box; | 413 | // box-sizing: border-box; |
| 478 | // padding: 10rpx; | 414 | // padding: 10rpx; |
| 479 | font-size: 20rpx; | 415 | font-size: 20rpx; |
| 480 | letter-spacing: -0.23px; | 416 | letter-spacing: -0.23px; |
| 481 | text-align: justify; | 417 | text-align: justify; |
| 482 | color: #999999; | 418 | color: #999999; |
| 483 | // background: #F9F9F9; | 419 | // background: #F9F9F9; |
| 484 | // display: flex; | 420 | // display: flex; |
| 485 | // justify-content: center; | 421 | // justify-content: center; |
| 486 | // align-items: center; | 422 | // align-items: center; |
| 487 | // text{ | 423 | // text{ |
| 488 | // text-overflow: -o-ellipsis-lastline; | 424 | // text-overflow: -o-ellipsis-lastline; |
| 489 | // overflow: hidden; | 425 | // overflow: hidden; |
| 490 | // text-overflow: ellipsis; | 426 | // text-overflow: ellipsis; |
| 491 | // display: -webkit-box; | 427 | // display: -webkit-box; |
| 492 | // -webkit-line-clamp: 2; | 428 | // -webkit-line-clamp: 2; |
| 493 | // line-clamp: 2; | 429 | // line-clamp: 2; |
| 494 | // -webkit-box-orient: vertical; | 430 | // -webkit-box-orient: vertical; |
| 495 | // } | 431 | // } |
| 496 | // .icon { | 432 | // .icon { |
| 497 | // width: 0; | 433 | // width: 0; |
| 498 | // height: 0; | 434 | // height: 0; |
| 499 | // border-left: 5px transparent; | 435 | // border-left: 5px transparent; |
| 500 | // border-right: 5px transparent; | 436 | // border-right: 5px transparent; |
| 501 | // border-top: 5px #979797; | 437 | // border-top: 5px #979797; |
| 502 | // border-bottom: 0 transparent; | 438 | // border-bottom: 0 transparent; |
| 503 | // border-style: solid; | 439 | // border-style: solid; |
| 504 | // position: relative; | 440 | // position: relative; |
| 505 | // margin-left: 10px; | 441 | // margin-left: 10px; |
| 506 | // // transform: scaleY(-1); | 442 | // // transform: scaleY(-1); |
| 507 | // } | 443 | // } |
| 508 | // .icon::after{ | 444 | // .icon::after{ |
| 509 | // content: ''; | 445 | // content: ''; |
| 510 | // position: absolute; | 446 | // position: absolute; |
| 511 | // top: -6.5px; | 447 | // top: -6.5px; |
| 512 | // left: -5px; | 448 | // left: -5px; |
| 513 | // border-left: 5px transparent; | 449 | // border-left: 5px transparent; |
| 514 | // border-right: 5px transparent; | 450 | // border-right: 5px transparent; |
| 515 | // border-top: 5px #FFFFFF; | 451 | // border-top: 5px #FFFFFF; |
| 516 | // border-bottom: 0 transparent; | 452 | // border-bottom: 0 transparent; |
| 517 | // border-style: solid; | 453 | // border-style: solid; |
| 518 | // } | 454 | // } |
| 519 | } | 455 | } |
| 520 | .priceBox{ | 456 | .priceBox{ |
| 521 | display: flex; | 457 | display: flex; |
| 522 | justify-content: space-between; | 458 | justify-content: space-between; |
| 523 | align-items: center; | 459 | align-items: center; |
| 524 | // margin-top: 26px; | 460 | // margin-top: 26px; |
| 525 | width: 100%; | 461 | width: 100%; |
| 526 | font-size: 14px; | 462 | font-size: 14px; |
| 527 | color: #999999; | 463 | color: #999999; |
| 528 | .maxCount{ | 464 | .maxCount{ |
| 529 | color: #999999; | 465 | color: #999999; |
| 530 | font-size: 24rpx; | 466 | font-size: 24rpx; |
| 531 | } | 467 | } |
| 532 | .price{ | 468 | .price{ |
| 533 | color: #FF6B4A; | 469 | color: #FF6B4A; |
| 534 | font-size: 28rpx; | 470 | font-size: 28rpx; |
| 535 | } | 471 | } |
| 536 | .counter{ | 472 | .counter{ |
| 537 | display: flex; | 473 | display: flex; |
| 538 | flex-direction: row; | 474 | flex-direction: row; |
| 539 | justify-content: space-between; | 475 | justify-content: space-between; |
| 540 | align-items: center; | 476 | align-items: center; |
| 541 | font-size: 28rpx; | 477 | font-size: 28rpx; |
| 542 | color: #333333; | 478 | color: #333333; |
| 543 | width: 122rpx; | 479 | width: 122rpx; |
| 544 | .btn{ | 480 | .btn{ |
| 545 | display: flex; | 481 | display: flex; |
| 546 | justify-content: center; | 482 | justify-content: center; |
| 547 | line-height: 32rpx; | 483 | line-height: 32rpx; |
| 548 | height: 32rpx; | 484 | height: 32rpx; |
| 549 | width: 32rpx; | 485 | width: 32rpx; |
| 550 | background-color: #F2F2F2; | 486 | background-color: #F2F2F2; |
| 551 | color: #CFCFCF; | 487 | color: #CFCFCF; |
| 552 | } | 488 | } |
| 553 | } | 489 | } |
| 554 | } | 490 | } |
| 555 | } | 491 | } |
| 556 | } | 492 | } |
| 557 | } | 493 | } |
| 558 | } | 494 | } |
| 559 | 495 | ||
| 560 | .footer{ | 496 | .footer{ |
| 561 | position: fixed; | 497 | position: fixed; |
| 562 | left: 0; | 498 | left: 0; |
| 563 | bottom: 0px; | 499 | bottom: 0px; |
| 564 | height: 112rpx; | 500 | height: 112rpx; |
| 565 | width: 100%; | 501 | width: 100%; |
| 566 | background-color: #FFFFFF; | 502 | background-color: #FFFFFF; |
| 567 | font-size: 16px; | 503 | font-size: 16px; |
| 568 | display: flex; | 504 | display: flex; |
| 569 | justify-content: space-between; | 505 | justify-content: space-between; |
| 570 | align-items: center; | 506 | align-items: center; |
| 571 | .footerLeft{ | 507 | .footerLeft{ |
| 572 | display: flex; | 508 | display: flex; |
| 573 | justify-content: center; | 509 | justify-content: center; |
| 574 | align-items: center; | 510 | align-items: center; |
| 575 | width: 50%; | 511 | width: 50%; |
| 576 | color: #333333; | 512 | color: #333333; |
| 577 | text{ | 513 | text{ |
| 578 | color: #FF6B4A; | 514 | color: #FF6B4A; |
| 579 | } | 515 | } |
| 580 | } | 516 | } |
| 581 | .footerRight{ | 517 | .footerRight{ |
| 582 | display: flex; | 518 | display: flex; |
| 583 | justify-content: flex-end; | 519 | justify-content: flex-end; |
| 584 | align-items: center; | 520 | align-items: center; |
| 585 | width: 50%; | 521 | width: 50%; |
| 586 | margin-right: 26rpx; | 522 | margin-right: 26rpx; |
| 587 | .paybtn{ | 523 | .paybtn{ |
| 588 | display: flex; | 524 | display: flex; |
| 589 | justify-content: center; | 525 | justify-content: center; |
| 590 | align-items: center; | 526 | align-items: center; |
| 591 | background: #FF6B4A; | 527 | background: #FF6B4A; |
| 592 | border-radius: 20px; | 528 | border-radius: 20px; |
| 593 | border-radius: 20px; | 529 | border-radius: 20px; |
| 594 | color: #FFFFFF; | 530 | color: #FFFFFF; |
src/pages/newOpticsData/newOpticsData.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <view class="body"> | 3 | <view class="body"> |
| 4 | <template > | 4 | <template > |
| 5 | <view class="goods-form"> | 5 | <view class="goods-form"> |
| 6 | <view class="p1"> | 6 | <view class="p1"> |
| 7 | <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> | 7 | <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> |
| 8 | 填写验光数据 | 8 | 填写验光数据 |
| 9 | </view> | 9 | </view> |
| 10 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> | 10 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> |
| 11 | <view class="picker"> | 11 | <view class="picker"> |
| 12 | <view class="picker-choice"> | 12 | <view class="picker-choice"> |
| 13 | <view class="choice-left"> | 13 | <view class="choice-left"> |
| 14 | <text class="pd">验光单取名:</text> | 14 | <text class="pd">验光单取名:</text> |
| 15 | </view> | 15 | </view> |
| 16 | <input type="text" @change="handleInput" class="input" | 16 | <input type="text" @change="handleInput" class="input" |
| 17 | placeholder="请输入名称" maxlength="20" :value="name" /> | 17 | placeholder="请输入名称" maxlength="20" :value="name" /> |
| 18 | </view> | 18 | </view> |
| 19 | </view> | 19 | </view> |
| 20 | <view class="picker" > | 20 | <view class="picker" > |
| 21 | <view class="picker-choice"> | 21 | <view class="picker-choice"> |
| 22 | <view class="choice-left"> | 22 | <view class="choice-left"> |
| 23 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 23 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 24 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 24 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 25 | </view> | 25 | </view> |
| 26 | <text class="p13">左 (OD)</text> | 26 | <text class="p13">左 (OD)</text> |
| 27 | <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> | 27 | <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> |
| 28 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | 28 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> |
| 29 | <view class="p14"> | 29 | <view class="p14"> |
| 30 | {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} | 30 | {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} |
| 31 | <image src="../../static/detail-tabicon.png" ></image> | 31 | <image src="../../static/detail-tabicon.png" ></image> |
| 32 | </view> | 32 | </view> |
| 33 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 33 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> |
| 34 | </picker> | 34 | </picker> |
| 35 | <text class="p13">右 (OS)</text> | 35 | <text class="p13">右 (OS)</text> |
| 36 | <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> | 36 | <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> |
| 37 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | 37 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> |
| 38 | <view class="p14"> | 38 | <view class="p14"> |
| 39 | {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} | 39 | {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} |
| 40 | <image src="../../static/detail-tabicon.png" ></image> | 40 | <image src="../../static/detail-tabicon.png" ></image> |
| 41 | </view> | 41 | </view> |
| 42 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 42 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> |
| 43 | </picker> | 43 | </picker> |
| 44 | </view> | 44 | </view> |
| 45 | </view> | 45 | </view> |
| 46 | <view class="picker" > | 46 | <view class="picker" > |
| 47 | <view class="picker-choice"> | 47 | <view class="picker-choice"> |
| 48 | <view class="choice-left"> | 48 | <view class="choice-left"> |
| 49 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 49 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 50 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 50 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 51 | </view> | 51 | </view> |
| 52 | <text class="p13">左 (OD)</text> | 52 | <text class="p13">左 (OD)</text> |
| 53 | <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> | 53 | <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> |
| 54 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | 54 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> |
| 55 | <view class="p14"> | 55 | <view class="p14"> |
| 56 | {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} | 56 | {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} |
| 57 | <image src="../../static/detail-tabicon.png" ></image> | 57 | <image src="../../static/detail-tabicon.png" ></image> |
| 58 | </view> | 58 | </view> |
| 59 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 59 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> |
| 60 | </picker> | 60 | </picker> |
| 61 | <text class="p13">右 (OS)</text> | 61 | <text class="p13">右 (OS)</text> |
| 62 | <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> | 62 | <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> |
| 63 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | 63 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> |
| 64 | <view class="p14"> | 64 | <view class="p14"> |
| 65 | {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} | 65 | {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} |
| 66 | <image src="../../static/detail-tabicon.png" ></image> | 66 | <image src="../../static/detail-tabicon.png" ></image> |
| 67 | </view> | 67 | </view> |
| 68 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 68 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> |
| 69 | </picker> | 69 | </picker> |
| 70 | </view> | 70 | </view> |
| 71 | </view> | 71 | </view> |
| 72 | <view class="picker" > | 72 | <view class="picker" > |
| 73 | <view class="picker-choice"> | 73 | <view class="picker-choice"> |
| 74 | <view class="choice-left"> | 74 | <view class="choice-left"> |
| 75 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 75 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 76 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 76 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 77 | </view> | 77 | </view> |
| 78 | <text class="p13">左 (OD)</text> | 78 | <text class="p13">左 (OD)</text> |
| 79 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | 79 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> |
| 80 | <view class="p14"> | 80 | <view class="p14"> |
| 81 | {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} | 81 | {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} |
| 82 | <image src="../../static/detail-tabicon.png" ></image> | 82 | <image src="../../static/detail-tabicon.png" ></image> |
| 83 | </view> | 83 | </view> |
| 84 | </picker> | 84 | </picker> |
| 85 | <text class="p13">右 (OS)</text> | 85 | <text class="p13">右 (OS)</text> |
| 86 | <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> | 86 | <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> |
| 87 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | 87 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> |
| 88 | <view class="p14"> | 88 | <view class="p14"> |
| 89 | {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} | 89 | {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} |
| 90 | <image src="../../static/detail-tabicon.png" ></image> | 90 | <image src="../../static/detail-tabicon.png" ></image> |
| 91 | </view> | 91 | </view> |
| 92 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 92 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> |
| 93 | </picker> | 93 | </picker> |
| 94 | </view> | 94 | </view> |
| 95 | </view> | 95 | </view> |
| 96 | <view class="picker"> | 96 | <view class="picker"> |
| 97 | <view class="picker-choice"> | 97 | <view class="picker-choice"> |
| 98 | <view class="choice-left"> | 98 | <view class="choice-left"> |
| 99 | <text class="pd">瞳距:</text> | 99 | <text class="pd">瞳距:</text> |
| 100 | </view> | 100 | </view> |
| 101 | <input type="digit" @change="handleInputPd" class="input" | 101 | <input type="digit" @change="handleInputPd" class="input" |
| 102 | placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> | 102 | placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> |
| 103 | </view> | 103 | </view> |
| 104 | </view> | 104 | </view> |
| 105 | <view class="picker" > | 105 | <view class="picker" > |
| 106 | <view class="picker-choice"> | 106 | <view class="picker-choice"> |
| 107 | <view class="choice-left"> | 107 | <view class="choice-left"> |
| 108 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 108 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 109 | </view> | 109 | </view> |
| 110 | <text class="p13-date">年 (Y)</text> | 110 | <text class="p13-date">年 (Y)</text> |
| 111 | <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | 111 | <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> |
| 112 | <view class="p14" style="width: 30px;"> | 112 | <view class="p14" style="width: 30px;"> |
| 113 | {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} | 113 | {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} |
| 114 | <image src="../../static/detail-tabicon.png" ></image> | 114 | <image src="../../static/detail-tabicon.png" ></image> |
| 115 | </view> | 115 | </view> |
| 116 | </picker> | 116 | </picker> |
| 117 | <text class="p13-date">月 (M)</text> | 117 | <text class="p13-date">月 (M)</text> |
| 118 | <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | 118 | <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> |
| 119 | <view class="p14" style="width: 30px;"> | 119 | <view class="p14" style="width: 30px;"> |
| 120 | {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} | 120 | {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} |
| 121 | <image src="../../static/detail-tabicon.png" ></image> | 121 | <image src="../../static/detail-tabicon.png" ></image> |
| 122 | </view> | 122 | </view> |
| 123 | </picker> | 123 | </picker> |
| 124 | <text class="p13-date">日 (D)</text> | 124 | <text class="p13-date">日 (D)</text> |
| 125 | <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> | 125 | <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> |
| 126 | <view class="p14" style="width: 30px;"> | 126 | <view class="p14" style="width: 30px;"> |
| 127 | {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} | 127 | {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} |
| 128 | <image src="../../static/detail-tabicon.png" ></image> | 128 | <image src="../../static/detail-tabicon.png" ></image> |
| 129 | </view> | 129 | </view> |
| 130 | </picker> | 130 | </picker> |
| 131 | </view> | 131 | </view> |
| 132 | </view> | 132 | </view> |
| 133 | <view class="confirm"> | 133 | <view class="confirm"> |
| 134 | <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image> | 134 | <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image> |
| 135 | <text>确认以上输入信息来源于我的验光数据!</text> | 135 | <text>确认以上输入信息来源于我的验光数据!</text> |
| 136 | </view> | 136 | </view> |
| 137 | </view> | 137 | </view> |
| 138 | 138 | ||
| 139 | </template> | 139 | </template> |
| 140 | </view> | 140 | </view> |
| 141 | 141 | ||
| 142 | 142 | ||
| 143 | <view class="footer" @click="handleSubmit"> | 143 | <view class="footer" @click="handleSubmit"> |
| 144 | <button class="btn" type="default">提 交</button> | 144 | <button class="btn" type="default">提 交</button> |
| 145 | </view> | 145 | </view> |
| 146 | </view> | 146 | </view> |
| 147 | </template> | 147 | </template> |
| 148 | 148 | ||
| 149 | <script> | 149 | <script> |
| 150 | import store from '@/store'; | 150 | import store from '@/store'; |
| 151 | 151 | ||
| 152 | export default { | 152 | export default { |
| 153 | data() { | 153 | data() { |
| 154 | return { | 154 | return { |
| 155 | pickerInfoList:[ | 155 | pickerInfoList:[ |
| 156 | {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0}, | 156 | {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0}, |
| 157 | {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1}, | 157 | {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1}, |
| 158 | {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2}, | 158 | {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2}, |
| 159 | {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0} | 159 | {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0} |
| 160 | ], | 160 | ], |
| 161 | confirm: false, // 用户是否确认 | 161 | confirm: false, // 用户是否确认 |
| 162 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], | 162 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], |
| 163 | name: '夏小花', | 163 | name: '夏小花', |
| 164 | oldname:'',// 用于判读用户是否改变名字 | ||
| 164 | pickerInfoChioce:{ | 165 | pickerInfoChioce:{ |
| 165 | "leftSph": 0, | 166 | "leftSph": '', |
| 166 | "rightSph": 0, | 167 | "rightSph": '', |
| 167 | "leftCyl": 0, | 168 | "leftCyl": '', |
| 168 | "rightCyl": 0, | 169 | "rightCyl": '', |
| 169 | "leftAxi": 0, | 170 | "leftAxi": '', |
| 170 | "rightAxi": 0, | 171 | "rightAxi": '', |
| 171 | "time":{ | 172 | "time":{ |
| 172 | "year":0, | 173 | "year":0, |
| 173 | "month": 0, | 174 | "month": 0, |
| 174 | "day":0 , | 175 | "day":0 , |
| 175 | } | 176 | } |
| 176 | }, | 177 | }, |
| 177 | pd: '',// 瞳距 | 178 | pd: '',// 瞳距 |
| 179 | oldpd: '',// 用于判断用户是否改变瞳距 | ||
| 178 | kinds:Number, // kinds=1，提交为新增验光，2为修改 | 180 | kinds:Number, // kinds=1，提交为新增验光，2为修改 |
| 179 | mp_id: Number | 181 | mp_id: Number |
| 180 | }; | 182 | }; |
| 181 | }, | 183 | }, |
| 182 | onLoad: function (option) { | 184 | onLoad: function (option) { |
| 183 | //option为object类型，会序列化上个页面传递的参数 | 185 | //option为object类型，会序列化上个页面传递的参数 |
| 184 | // 初始化SPL、CYL、AXI的值 | 186 | // 初始化SPL、CYL、AXI的值 |
| 185 | for (let j = 0; j < 3; j++) { | 187 | for (let j = 0; j < 3; j++) { |
| 186 | for(let i=-12;i<6;i++){ | 188 | for(let i=-12;i<6;i++){ |
| 187 | this.pickerInfoList[j].nameArray1.push(i) | 189 | this.pickerInfoList[j].nameArray1.push(i) |
| 188 | this.pickerInfoList[j].nameArray1.push(i+0.5) | 190 | this.pickerInfoList[j].nameArray1.push(i+0.5) |
| 189 | this.pickerInfoList[j].nameArray2.push(i) | 191 | this.pickerInfoList[j].nameArray2.push(i) |
| 190 | this.pickerInfoList[j].nameArray2.push(i+0.5) | 192 | this.pickerInfoList[j].nameArray2.push(i+0.5) |
| 191 | if(i>=-6){ | 193 | if(i>=-6){ |
| 192 | this.pickerInfoList[j].nameArray1.push(i+0.25) | 194 | this.pickerInfoList[j].nameArray1.push(i+0.25) |
| 193 | this.pickerInfoList[j].nameArray1.push(i+0.75) | 195 | this.pickerInfoList[j].nameArray1.push(i+0.75) |
| 194 | this.pickerInfoList[j].nameArray2.push(i+0.25) | 196 | this.pickerInfoList[j].nameArray2.push(i+0.25) |
| 195 | this.pickerInfoList[j].nameArray2.push(i+0.75) | 197 | this.pickerInfoList[j].nameArray2.push(i+0.75) |
| 196 | } | 198 | } |
| 197 | if(i==5){ | 199 | if(i==5){ |
| 198 | this.pickerInfoList[j].nameArray1.push(i+1) | 200 | this.pickerInfoList[j].nameArray1.push(i+1) |
| 199 | this.pickerInfoList[j].nameArray2.push(i+1) | 201 | this.pickerInfoList[j].nameArray2.push(i+1) |
| 200 | } | 202 | } |
| 201 | } | 203 | } |
| 202 | } | 204 | } |
| 203 | // 初始化日期值 | 205 | // 初始化日期值 |
| 204 | for (let i = 1; i < 32; i++){ | 206 | for (let i = 1; i < 32; i++){ |
| 205 | this.pickerInfoList[3].nameArray3.push(i) | 207 | this.pickerInfoList[3].nameArray3.push(i) |
| 206 | } | 208 | } |
| 207 | // 初始化年份前后五年 | 209 | // 初始化年份前后五年 |
| 208 | let myDate = new Date(); | 210 | let myDate = new Date(); |
| 209 | let nowYear = myDate.getFullYear(); | 211 | let nowYear = myDate.getFullYear(); |
| 210 | for(let i=0;i<5;i++){ | 212 | for(let i=0;i<5;i++){ |
| 211 | this.pickerInfoList[3].nameArray1.push(nowYear-i) | 213 | this.pickerInfoList[3].nameArray1.push(nowYear-i) |
| 212 | } | 214 | } |
| 213 | 215 | ||
| 214 | this.kinds=option.kinds | 216 | this.kinds=option.kinds |
| 215 | if(option.kinds==1){ | 217 | if(option.kinds==1){ |
| 216 | this.name= ''; | 218 | this.name= ''; |
| 217 | this.pd= ''; | 219 | this.pd= ''; |
| 218 | } else{ | 220 | } else{ |
| 219 | console.log('args===>',option.index) | 221 | console.log('args===>',option.index) |
| 220 | const loveList=Object.assign({},this.$store.state.myLoveList.loveList) | 222 | const loveList=Object.assign({},this.$store.state.myLoveList.loveList) |
| 221 | console.log('args===>',loveList[option.index].in_time) | 223 | console.log('args===>',loveList[option.index].in_time) |
| 222 | console.log('args===>',loveList[option.index].in_time.toString().slice(0,4)) | 224 | console.log('args===>',loveList[option.index].in_time.toString().slice(0,4)) |
| 223 | console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0) | 225 | console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0) |
| 224 | console.log('args===>',loveList[option.index].in_time.toString().slice(8,10)) | 226 | console.log('args===>',loveList[option.index].in_time.toString().slice(8,10)) |
| 225 | this.name=loveList[option.index].name | 227 | this.name=loveList[option.index].name |
| 226 | this.pd=loveList[option.index].pd | 228 | this.pd=loveList[option.index].pd |
| 227 | this.mp_id=loveList[option.index].mp_id | 229 | this.mp_id=loveList[option.index].mp_id |
| 230 | this.oldname=loveList[option.index].name | ||
| 231 | this.oldpd=loveList[option.index].pd | ||
| 228 | // 将kinds =2时的值传到该页面 | 232 | // 将kinds =2时的值传到该页面 |
| 229 | this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph) | 233 | this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph) |
| 230 | this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph) | 234 | this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph) |
| 231 | this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl) | 235 | this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl) |
| 232 | this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl) | 236 | this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl) |
| 233 | this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi) | 237 | this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi) |
| 234 | this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi) | 238 | this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi) |
| 235 | 239 | ||
| 236 | this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4)) | 240 | this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4)) |
| 237 | if(loveList[option.index].in_time.toString().slice(5,6)==0){ | 241 | if(loveList[option.index].in_time.toString().slice(5,6)==0){ |
| 238 | this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7)) | 242 | this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7)) |
| 239 | } else{ | 243 | } else{ |
| 240 | this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7)) | 244 | this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7)) |
| 241 | } | 245 | } |
| 242 | if(loveList[option.index].in_time.toString().slice(8,9)==0){ | 246 | if(loveList[option.index].in_time.toString().slice(8,9)==0){ |
| 243 | this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10)) | 247 | this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10)) |
| 244 | } else{ | 248 | } else{ |
| 245 | this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10)) | 249 | this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10)) |
| 246 | } | 250 | } |
| 247 | } | 251 | } |
| 248 | }, | 252 | }, |
| 249 | methods:{ | 253 | methods:{ |
| 250 | handleInput(e){ | 254 | handleInput(e){ |
| 251 | this.name=e.target.value | 255 | this.name=e.target.value |
| 252 | }, | 256 | }, |
| 253 | handleInputPd(e){ | 257 | handleInputPd(e){ |
| 254 | // 只能输入正浮点数或正数 | 258 | // 只能输入正浮点数或正数 |
| 255 | if(/^\d+(\.\d+)?$/.test(e.target.value)){ | 259 | if(/^\d+(\.\d+)?$/.test(e.target.value)){ |
| 256 | this.pd=e.target.value | 260 | this.pd=e.target.value |
| 257 | } else { | 261 | } else { |
| 258 | uni.showToast({ | 262 | uni.showToast({ |
| 259 | title:"请输入有效数据;示例:89", | 263 | title:"请输入有效数据;示例:89", |
| 260 | icon: "none", | 264 | icon: "none", |
| 261 | duration: 3000, | 265 | duration: 2000, |
| 262 | }) | 266 | }) |
| 263 | this.pd = '' | 267 | this.pd = '' |
| 264 | } | 268 | } |
| 265 | 269 | ||
| 266 | }, | 270 | }, |
| 267 | // 用户提交 | 271 | // 用户提交 |
| 268 | handleSubmit(){ | 272 | handleSubmit(){ |
| 269 | if(this.name==''){ | 273 | if(this.name==''){ |
| 270 | uni.showToast({ | 274 | uni.showToast({ |
| 271 | title:"请输入验光单取名", | 275 | title:"请输入验光单取名", |
| 272 | icon: "none", | 276 | icon: "none", |
| 273 | duration: 3000, | 277 | duration: 2000, |
| 274 | }) | 278 | }) |
| 275 | } | 279 | }else{ |
| 276 | if(this.pd==''){ | 280 | |
| 277 | uni.showToast({ | 281 | if(this.pd==''){ |
| 278 | title:"请输入瞳距", | 282 | uni.showToast({ |
| 279 | icon: "none", | 283 | title:"请输入瞳距", |
| 280 | duration: 3000, | 284 | icon: "none", |
| 281 | }) | 285 | duration: 2000, |
| 282 | } | 286 | }) |
| 283 | if(this.confirm){ | 287 | }else{ |
| 284 | if(this.kinds==1){ | 288 | |
| 285 | // 添加用户验光单 | 289 | if(this.kinds==1){ |
| 286 | console.log('kinds====>',this.kinds) | 290 | // 添加用户验光单 |
| 287 | store.dispatch('myLoveList/addMylove', { | 291 | console.log('kinds====>',this.pickerInfoChioce.leftSph) |
| 288 | 292 | console.log('kinds====>',this.pickerInfoChioce.leftSph==Number) | |
| 289 | uid: this.$store.state.user.userInfo.uid, | 293 | console.log('kinds====>',this.pickerInfoChioce.rightSph==Number) |
| 290 | openid: this.$store.state.user.userInfo.openid, | 294 | if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''|| |
| 291 | // mp_name: this.$store.state.user.userInfo.mp_name, | 295 | this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''|| |
| 292 | leftSph: this.pickerInfoChioce.leftSph, | 296 | this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi=='' |
| 293 | rightSph: this.pickerInfoChioce.rightSph, | 297 | ){ |
| 294 | leftCyl: this.pickerInfoChioce.leftCyl, | 298 | uni.showToast({ |
| 295 | rightCyl: this.pickerInfoChioce.rightCyl, | 299 | title:"请输入您的验光数据", |
| 296 | leftAxi: this.pickerInfoChioce.leftAxi, | 300 | icon: "none", |
| 297 | rightAxi: this.pickerInfoChioce.rightAxi, | 301 | duration: 2000, |
| 298 | pd: this.pd,// 瞳距 | 302 | }) |
| 299 | mp_name:this.name, | 303 | }else{ |
| 300 | // time: this.pickerInfoChioce.time, | 304 | if(this.confirm){ |
| 301 | // img_url2: "http://localhost:8087/images/shop_1/1/", | 305 | store.dispatch('myLoveList/addMylove', { |
| 302 | }); | 306 | |
| 303 | store.dispatch('myLoveList/getLoveList', { | 307 | uid: this.$store.state.user.userInfo.uid, |
| 304 | uid: this.$store.state.user.userInfo.uid, | 308 | openid: this.$store.state.user.userInfo.openid, |
| 305 | }); | 309 | // mp_name: this.$store.state.user.userInfo.mp_name, |
| 306 | uni.navigateBack({ | 310 | leftSph: this.pickerInfoChioce.leftSph, |
| 307 | delta:1, | 311 | rightSph: this.pickerInfoChioce.rightSph, |
| 308 | animationDuration:2000 | 312 | leftCyl: this.pickerInfoChioce.leftCyl, |
| 309 | }) | 313 | rightCyl: this.pickerInfoChioce.rightCyl, |
| 310 | } | 314 | leftAxi: this.pickerInfoChioce.leftAxi, |
| 311 | if(this.kinds==2){ | 315 | rightAxi: this.pickerInfoChioce.rightAxi, |
| 312 | // console.log('kinds====>',this.kinds) | 316 | pd: this.pd,// 瞳距 |
| 313 | // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) | 317 | mp_name:this.name, |
| 314 | // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) | 318 | // time: this.pickerInfoChioce.time, |
| 315 | const leftList = ["leftSph","leftCyl","leftAxi"]; | 319 | // img_url2: "http://localhost:8087/images/shop_1/1/", |
| 316 | const rightList = ["rightSph", "rightCyl", "rigthAxi"]; | 320 | }); |
| 317 | for (let j=0; j<3; j++) { | 321 | store.dispatch('myLoveList/getLoveList', { |
| 318 | if(this.pickerInfoList[j].nameIndex1!=0){ | 322 | uid: this.$store.state.user.userInfo.uid, |
| 323 | }); | ||
| 324 | uni.navigateBack({ | ||
| 325 | delta:1, | ||
| 326 | animationDuration:2000 | ||
| 327 | }) | ||
| 328 | |||
| 329 | } else{ | ||
| 330 | uni.showToast({ | ||
| 331 | title:"请确认您的验光数据", | ||
| 332 | icon: "none", | ||
| 333 | duration: 3000, | ||
| 334 | }) | ||
| 335 | } | ||
| 319 | 336 | ||
| 320 | store.dispatch('myLoveList/updateMylove', { | ||
| 321 | uid: this.$store.state.user.userInfo.uid, | ||
| 322 | openid: this.$store.state.user.userInfo.openid, | ||
| 323 | mp_id: this.mp_id, | ||
| 324 | keyname: leftList[j], | ||
| 325 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], | ||
| 326 | }); | ||
| 327 | } | ||
| 328 | if(this.pickerInfoList[j].nameIndex2 !=0) { | ||
| 329 | store.dispatch('myLoveList/updateMylove', { | ||
| 330 | uid: this.$store.state.user.userInfo.uid, | ||
| 331 | openid: this.$store.state.user.userInfo.openid, | ||
| 332 | mp_id: this.mp_id, | ||
| 333 | keyname: rightList[j], | ||
| 334 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2] | ||
| 335 | }); | ||
| 336 | } | 337 | } |
| 338 | |||
| 337 | } | 339 | } |
| 338 | store.dispatch('myLoveList/getLoveList', { | 340 | if(this.kinds==2){ |
| 339 | uid: this.$store.state.user.userInfo.uid, | 341 | // console.log('kinds====>',this.kinds) |
| 340 | }); | 342 | // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) |
| 341 | uni.navigateBack({ | 343 | // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) |
| 342 | delta:1, | 344 | if(this.confirm){ |
| 343 | animationDuration:2000 | 345 | const leftList = ["leftSph","leftCyl","leftAxi"]; |
| 344 | }) | 346 | const rightList = ["rightSph", "rightCyl", "rightAxi"]; |
| 347 | let flag=0; | ||
| 348 | if(this.name!=this.oldname){ | ||
| 349 | store.dispatch('myLoveList/updateMylove', { | ||
| 350 | uid: this.$store.state.user.userInfo.uid, | ||
| 351 | openid: this.$store.state.user.userInfo.openid, | ||
| 352 | mp_id: this.mp_id, | ||
| 353 | keyname: 'name', | ||
| 354 | keyvalue: this.name, | ||
| 355 | }); | ||
| 356 | flag=1 | ||
| 357 | } | ||
| 358 | if(this.pd!=this.oldpd){ | ||
| 359 | store.dispatch('myLoveList/updateMylove', { | ||
| 360 | uid: this.$store.state.user.userInfo.uid, | ||
| 361 | openid: this.$store.state.user.userInfo.openid, | ||
| 362 | mp_id: this.mp_id, | ||
| 363 | keyname: 'pd', | ||
| 364 | keyvalue: this.pd, | ||
| 365 | }); | ||
| 366 | flag=1 | ||
| 367 | } | ||
| 368 | // 先验证是否有改动项， | ||
| 369 | for (let j=0; j<3; j++) { | ||
| 370 | if(this.pickerInfoList[j].nameIndex1!=0||this.pickerInfoList[j].nameIndex2!=0){ | ||
| 371 | if(this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1]!=''&& | ||
| 372 | this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]!=''){ | ||
| 373 | if(this.pickerInfoList[j].nameIndex1!=0){ | ||
| 374 | store.dispatch('myLoveList/updateMylove', { | ||
| 375 | uid: this.$store.state.user.userInfo.uid, | ||
| 376 | openid: this.$store.state.user.userInfo.openid, | ||
| 377 | mp_id: this.mp_id, | ||
| 378 | keyname: leftList[j], | ||
| 379 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], | ||
| 380 | }); | ||
| 381 | } | ||
| 382 | if(this.pickerInfoList[j].nameIndex2!=0){ | ||
| 383 | store.dispatch('myLoveList/updateMylove', { | ||
| 384 | uid: this.$store.state.user.userInfo.uid, | ||
| 385 | openid: this.$store.state.user.userInfo.openid, | ||
| 386 | mp_id: this.mp_id, | ||
| 387 | keyname: rightList[j], | ||
| 388 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2] | ||
| 389 | }); | ||
| 390 | } | ||
| 391 | flag=1; | ||
| 392 | } else{ | ||
| 393 | flag=0; | ||
| 394 | uni.showToast({ | ||
| 395 | title:"请输入您的验光数据", | ||
| 396 | icon: "none", | ||
| 397 | duration: 2000, | ||
| 398 | }) | ||
| 399 | |||
| 400 | } | ||
| 401 | } | ||
| 402 | |||
| 403 | } | ||
| 404 | if(flag!=0){ | ||
| 405 | store.dispatch('myLoveList/getLoveList', { | ||
| 406 | uid: this.$store.state.user.userInfo.uid, | ||
| 407 | }); | ||
| 408 | uni.navigateBack({ | ||
| 409 | delta:1, | ||
| 410 | animationDuration:2000 | ||
| 411 | }) | ||
| 412 | } | ||
| 345 | 413 | ||
| 414 | } else{ | ||
| 415 | uni.showToast({ | ||
| 416 | title:"请确认您的验光数据", | ||
| 417 | icon: "none", | ||
| 418 | duration: 3000, | ||
| 419 | }) | ||
| 420 | } | ||
| 421 | |||
| 422 | } | ||
| 423 | |||
| 424 | |||
| 346 | } | 425 | } |
| 347 | 426 | ||
| 348 | } else{ | ||
| 349 | uni.showToast({ | ||
| 350 | title:"请确认你的验光数据", | ||
| 351 | icon: "none", | ||
| 352 | duration: 3000, | ||
| 353 | }) | ||
| 354 | } | 427 | } |
| 428 | |||
| 355 | }, | 429 | }, |
| 356 | changeConfirm() { | 430 | changeConfirm() { |
| 357 | this.confirm = !this.confirm | 431 | this.confirm = !this.confirm |
| 358 | }, | 432 | }, |
| 359 | 433 | ||
| 360 | bindPickerChange01: function(e) { | 434 | bindPickerChange01: function(e) { |
| 361 | this.pickerInfoList[0].nameIndex1 = e.target.value | 435 | this.pickerInfoList[0].nameIndex1 = e.target.value |
| 362 | this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value] | 436 | this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value] |
| 363 | }, | 437 | }, |
| 364 | bindPickerChange02: function(e) { | 438 | bindPickerChange02: function(e) { |
| 365 | this.pickerInfoList[0].nameIndex2 = e.target.value | 439 | this.pickerInfoList[0].nameIndex2 = e.target.value |
| 366 | this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value] | 440 | this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value] |
| 367 | }, | 441 | }, |
| 368 | 442 | ||
| 369 | bindPickerChange11: function(e) { | 443 | bindPickerChange11: function(e) { |
| 370 | this.pickerInfoList[1].nameIndex1 = e.target.value | 444 | this.pickerInfoList[1].nameIndex1 = e.target.value |
| 371 | this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value] | 445 | this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value] |
| 372 | }, | 446 | }, |
| 373 | bindPickerChange12: function(e) { | 447 | bindPickerChange12: function(e) { |
| 374 | this.pickerInfoList[1].nameIndex2 = e.target.value | 448 | this.pickerInfoList[1].nameIndex2 = e.target.value |
| 375 | this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value] | 449 | this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value] |
| 376 | }, | 450 | }, |
| 377 | 451 | ||
| 378 | bindPickerChange21: function(e) { | 452 | bindPickerChange21: function(e) { |
| 379 | this.pickerInfoList[2].nameIndex1 = e.target.value | 453 | this.pickerInfoList[2].nameIndex1 = e.target.value |
| 380 | this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value] | 454 | this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value] |
| 381 | }, | 455 | }, |
| 382 | bindPickerChange22: function(e) { | 456 | bindPickerChange22: function(e) { |
| 383 | this.pickerInfoList[2].nameIndex2 = e.target.value | 457 | this.pickerInfoList[2].nameIndex2 = e.target.value |
| 384 | this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value] | 458 | this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value] |
| 385 | }, | 459 | }, |
| 386 | 460 | ||
| 387 | bindPickerChange41: function(e) { | 461 | bindPickerChange41: function(e) { |
| 388 | this.pickerInfoList[3].nameIndex1 = e.target.value | 462 | this.pickerInfoList[3].nameIndex1 = e.target.value |
| 389 | this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value] | 463 | this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value] |
| 390 | }, | 464 | }, |
| 391 | bindPickerChange42: function(e) { | 465 | bindPickerChange42: function(e) { |
| 392 | this.pickerInfoList[3].nameIndex2 = e.target.value | 466 | this.pickerInfoList[3].nameIndex2 = e.target.value |
| 393 | this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value] | 467 | this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value] |
| 394 | }, | 468 | }, |
| 395 | bindPickerChange43: function(e) { | 469 | bindPickerChange43: function(e) { |
| 396 | this.pickerInfoList[3].nameIndex3 = e.target.value | 470 | this.pickerInfoList[3].nameIndex3 = e.target.value |
| 397 | this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value] | 471 | this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value] |
| 398 | }, | 472 | }, |
| 399 | } | 473 | } |
| 400 | } | 474 | } |
| 401 | </script> | 475 | </script> |
| 402 | 476 | ||
| 403 | <style lang="scss"> | 477 | <style lang="scss"> |
| 404 | .wrap{ | 478 | .wrap{ |
| 405 | min-height: 100vh; | 479 | min-height: 100vh; |
| 406 | background-color: #F2F2F2; | 480 | background-color: #F2F2F2; |
| 407 | .body{ | 481 | .body{ |
| 408 | // font-family: PingFangSC-Regular; | 482 | // font-family: PingFangSC-Regular; |
| 409 | font-size: 12px; | 483 | font-size: 12px; |
| 410 | color: #666666; | 484 | color: #666666; |
| 411 | letter-spacing: 0; | 485 | letter-spacing: 0; |
| 412 | .bodyBox{ | 486 | .bodyBox{ |
| 413 | margin-top: 15px; | 487 | margin-top: 15px; |
| 414 | .names{ | 488 | .names{ |
| 415 | // font-family: PingFangSC-Regular; | 489 | // font-family: PingFangSC-Regular; |
| 416 | font-size: 12px; | 490 | font-size: 12px; |
| 417 | color: #151515; | 491 | color: #151515; |
| 418 | letter-spacing: 0; | 492 | letter-spacing: 0; |
| 419 | text-align: justify; | 493 | text-align: justify; |
| 420 | line-height: 17px; | 494 | line-height: 17px; |
| 421 | margin-left: 5px; | 495 | margin-left: 5px; |
| 422 | margin-right: 10px; | 496 | margin-right: 10px; |
| 423 | } | 497 | } |
| 424 | text{ | 498 | text{ |
| 425 | // font-family: PingFangSC-Regular; | 499 | // font-family: PingFangSC-Regular; |
| 426 | font-size: 12px; | 500 | font-size: 12px; |
| 427 | color: #666666; | 501 | color: #666666; |
| 428 | letter-spacing: 0; | 502 | letter-spacing: 0; |
| 429 | text-align: justify; | 503 | text-align: justify; |
| 430 | } | 504 | } |
| 431 | } | 505 | } |
| 432 | 506 | ||
| 433 | } | 507 | } |
| 434 | .goods-form { | 508 | .goods-form { |
| 435 | display: flex; | 509 | display: flex; |
| 436 | flex-direction: column; | 510 | flex-direction: column; |
| 437 | align-items: center; | 511 | align-items: center; |
| 438 | justify-content: center; | 512 | justify-content: center; |
| 439 | background-color: #fff; | 513 | background-color: #fff; |
| 440 | width: 100%; | 514 | width: 100%; |
| 441 | padding: 40rpx 0; | 515 | padding: 40rpx 0; |
| 442 | .p1 { | 516 | .p1 { |
| 443 | font-size: 16px; | 517 | font-size: 16px; |
| 444 | color: #333333; | 518 | color: #333333; |
| 445 | letter-spacing: -0.3px; | 519 | letter-spacing: -0.3px; |
| 446 | text-align: justify; | 520 | text-align: justify; |
| 447 | line-height: 24px; | 521 | line-height: 24px; |
| 448 | margin: 4px 0; | 522 | margin: 4px 0; |
| 449 | 523 | ||
| 450 | } | 524 | } |
| 451 | .p2 { | 525 | .p2 { |
| 452 | font-size: 12px; | 526 | font-size: 12px; |
| 453 | color: #999999; | 527 | color: #999999; |
| 454 | letter-spacing: -0.23px; | 528 | letter-spacing: -0.23px; |
| 455 | margin-bottom: 32rpx; | 529 | margin-bottom: 32rpx; |
| 456 | } | 530 | } |
| 457 | .image2{ | 531 | .image2{ |
| 458 | width: 42rpx; | 532 | width: 42rpx; |
| 459 | height: 34rpx; | 533 | height: 34rpx; |
| 460 | margin-right: 12rpx; | 534 | margin-right: 12rpx; |
| 461 | } | 535 | } |
| 462 | .confirm { | 536 | .confirm { |
| 463 | display: flex; | 537 | display: flex; |
| 464 | align-items: center; | 538 | align-items: center; |
| 465 | font-size: 12px; | 539 | font-size: 12px; |
| 466 | color: #666666; | 540 | color: #666666; |
| 467 | letter-spacing: -0.23px; | 541 | letter-spacing: -0.23px; |
| 468 | width: 684rpx; | 542 | width: 684rpx; |
| 469 | .image1{ | 543 | .image1{ |
| 470 | margin-right:25rpx; | 544 | margin-right:25rpx; |
| 471 | width: 42rpx; | 545 | width: 42rpx; |
| 472 | height: 38rpx; | 546 | height: 38rpx; |
| 473 | } | 547 | } |
| 474 | } | 548 | } |
| 475 | .picker{ | 549 | .picker{ |
| 476 | display: flex; | 550 | display: flex; |
| 477 | flex-direction: column; | 551 | flex-direction: column; |
| 478 | justify-content: center; | 552 | justify-content: center; |
| 479 | align-items: center; | 553 | align-items: center; |
| 480 | width: 100%; | 554 | width: 100%; |
| 481 | 555 | ||
| 482 | .picker-choice{ | 556 | .picker-choice{ |
| 483 | display: flex; | 557 | display: flex; |
| 484 | width: 684rpx; | 558 | width: 684rpx; |
| 485 | align-items: center; | 559 | align-items: center; |
| 486 | margin-bottom: 40rpx; | 560 | margin-bottom: 40rpx; |
| 487 | .input{ | 561 | .input{ |
| 488 | border-bottom: 1px solid #CFCFCF; | 562 | border-bottom: 1px solid #CFCFCF; |
| 489 | height: 40rpx; | 563 | height: 40rpx; |
| 490 | } | 564 | } |
| 491 | .choice-left{ | 565 | .choice-left{ |
| 492 | width: 210rpx; | 566 | width: 210rpx; |
| 493 | .pd{ | 567 | .pd{ |
| 494 | font-size: 14px; | 568 | font-size: 14px; |
| 495 | color: #333333; | 569 | color: #333333; |
| 496 | letter-spacing: -0.26px; | 570 | letter-spacing: -0.26px; |
| 497 | text-align: justify; | 571 | text-align: justify; |
| 498 | line-height: 24px; | 572 | line-height: 24px; |
| 499 | margin-right: 44rpx; | 573 | margin-right: 44rpx; |
| 500 | } | 574 | } |
| 501 | .p11 { | 575 | .p11 { |
| 502 | font-size: 14px; | 576 | font-size: 14px; |
| 503 | color: #333333; | 577 | color: #333333; |
| 504 | letter-spacing: -0.26px; | 578 | letter-spacing: -0.26px; |
| 505 | text-align: justify; | 579 | text-align: justify; |
| 506 | line-height: 24px; | 580 | line-height: 24px; |
| 507 | // margin-right: 10px; | 581 | // margin-right: 10px; |
| 508 | } | 582 | } |
| 509 | .p12 { | 583 | .p12 { |
| 510 | font-size: 10px; | 584 | font-size: 10px; |
| 511 | color: #3F3F3F; | 585 | color: #3F3F3F; |
| 512 | letter-spacing: -0.19px; | 586 | letter-spacing: -0.19px; |
| 513 | text-align: justify; | 587 | text-align: justify; |
| 514 | line-height: 24px; | 588 | line-height: 24px; |
| 515 | } | 589 | } |
| 516 | 590 | ||
| 517 | 591 | ||
| 518 | } | 592 | } |
| 519 | .p13 { | 593 | .p13 { |
| 520 | font-size: 10px; | 594 | font-size: 10px; |
| 521 | color: #999999; | 595 | color: #999999; |
| 522 | letter-spacing: -0.19px; | 596 | letter-spacing: -0.19px; |
| 523 | margin-right: 10px; | 597 | margin-right: 10px; |
| 524 | } | 598 | } |
| 525 | .p13-date { | 599 | .p13-date { |
| 526 | font-size: 10px; | 600 | font-size: 10px; |
| 527 | color: #999999; | 601 | color: #999999; |
| 528 | letter-spacing: -0.19px; | 602 | letter-spacing: -0.19px; |
| 529 | margin-right: 5px; | 603 | margin-right: 5px; |
| 530 | } | 604 | } |
| 531 | picker{ | 605 | picker{ |
| 532 | width: 144rpx; | 606 | width: 144rpx; |
| 533 | height: 40rpx; | 607 | height: 40rpx; |
| 534 | display: flex; | 608 | display: flex; |
| 535 | position: relative; | 609 | position: relative; |
| 536 | .p14 { | 610 | .p14 { |
| 537 | font-size: 14px; | 611 | font-size: 14px; |
| 538 | color: #666666; | 612 | color: #666666; |
| 539 | letter-spacing: -0.26px; | 613 | letter-spacing: -0.26px; |
| 540 | text-align: center; | 614 | text-align: center; |
| 541 | width: 124rpx; | 615 | width: 124rpx; |
| 542 | border-bottom: 1px solid #CFCFCF; | 616 | border-bottom: 1px solid #CFCFCF; |
| 543 | height: 38rpx; | 617 | height: 38rpx; |
| 544 | } | 618 | } |
| 545 | image{ | 619 | image{ |
| 546 | width: 20rpx; | 620 | width: 20rpx; |
| 547 | height: 20rpx; | 621 | height: 20rpx; |
| 548 | position: absolute; | 622 | position: absolute; |
| 549 | right: 20rpx; | 623 | right: 20rpx; |
| 550 | top: 8rpx; | 624 | top: 8rpx; |
| 551 | } | 625 | } |
| 552 | } | 626 | } |
| 553 | 627 |
src/pages/user/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <!-- 弹窗 --> | 3 | <!-- 弹窗 --> |
| 4 | <uni-popup | 4 | <uni-popup |
| 5 | ref="popup" | 5 | ref="popup" |
| 6 | type="center" | 6 | type="center" |
| 7 | > | 7 | > |
| 8 | <!-- 给一个左边弹窗的样式 --> | 8 | <!-- 给一个左边弹窗的样式 --> |
| 9 | <!-- 关闭弹窗按钮 --> | 9 | <!-- 关闭弹窗按钮 --> |
| 10 | <view | 10 | <view |
| 11 | class="closeBtn" | 11 | class="closeBtn" |
| 12 | @tap="this.$refs.popup.close()" | 12 | @tap="this.$refs.popup.close()" |
| 13 | >x</view> | 13 | >x</view> |
| 14 | <view | 14 | <view |
| 15 | class="popUpWrap" | 15 | class="popUpWrap" |
| 16 | v-if="whichTap==0" | 16 | v-if="whichTap==0" |
| 17 | > | 17 | > |
| 18 | <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text> | 18 | <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text> |
| 19 | 19 | ||
| 20 | <!-- 左 --> | 20 | <!-- 左 --> |
| 21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> | 21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> |
| 22 | <!-- 右 --> | 22 | <!-- 右 --> |
| 23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> | 23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> |
| 24 | </view> | 24 | </view> |
| 25 | <view | 25 | <view |
| 26 | class="popUpWrap" | 26 | class="popUpWrap" |
| 27 | v-if="whichTap==1" | 27 | v-if="whichTap==1" |
| 28 | > | 28 | > |
| 29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> | 29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> |
| 30 | </view> | 30 | </view> |
| 31 | <view | 31 | <view |
| 32 | class="popUpWrap" | 32 | class="popUpWrap" |
| 33 | v-if="whichTap==2" | 33 | v-if="whichTap==2" |
| 34 | > | 34 | > |
| 35 | <button @tap="chatOur(1)">客服1</button> | 35 | <button @tap="chatOur(1)">客服1</button> |
| 36 | <button @tap="chatOur(2)">客服2</button> | 36 | <button @tap="chatOur(2)">客服2</button> |
| 37 | </view> | 37 | </view> |
| 38 | </uni-popup> | 38 | </uni-popup> |
| 39 | <view | 39 | <view |
| 40 | v-if="isAuth" | 40 | v-if="isAuth" |
| 41 | class="content" | 41 | class="content" |
| 42 | > | 42 | > |
| 43 | <view class="userInfo"> | 43 | <view class="userInfo"> |
| 44 | <view class="info"> | 44 | <view class="info"> |
| 45 | <image | 45 | <image |
| 46 | :src="headerphoto" | 46 | :src="headerphoto" |
| 47 | mode="aspectFill" | 47 | mode="aspectFill" |
| 48 | ></image> | 48 | ></image> |
| 49 | <view class="infoText"> | 49 | <view class="infoText"> |
| 50 | <text class="userName">{{nickName}}</text> | 50 | <text class="userName">{{nickName}}</text> |
| 51 | </view> | 51 | </view> |
| 52 | </view> | 52 | </view> |
| 53 | <!-- <view class="service"> | 53 | <!-- <view class="service"> |
| 54 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 54 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
| 55 | </view> --> | 55 | </view> --> |
| 56 | </view> | 56 | </view> |
| 57 | <view | 57 | <view |
| 58 | class="myOpticsData" | 58 | class="myOpticsData" |
| 59 | @tap="toOpticsData" | 59 | @tap="toOpticsData" |
| 60 | > | 60 | > |
| 61 | <view class="left"> | 61 | <view class="left"> |
| 62 | <image | 62 | <image |
| 63 | src="../../static/img/user/dataWrite.png" | 63 | src="../../static/img/user/dataWrite.png" |
| 64 | mode="aspectFit" | 64 | mode="aspectFit" |
| 65 | ></image> | 65 | ></image> |
| 66 | <text>验光数据</text> | 66 | <text>验光数据</text> |
| 67 | </view> | 67 | </view> |
| 68 | <image | 68 | <image |
| 69 | src="../../static/right.png" | 69 | src="../../static/right.png" |
| 70 | mode="aspectFit" | 70 | mode="aspectFit" |
| 71 | ></image> | 71 | ></image> |
| 72 | </view> | 72 | </view> |
| 73 | <view class="myOrder"> | 73 | <view class="myOrder"> |
| 74 | <view class="orderHeader"> | 74 | <view class="orderHeader"> |
| 75 | <text>全部订单</text> | 75 | <text>全部订单</text> |
| 76 | <view | 76 | <view |
| 77 | class="btn" | 77 | class="btn" |
| 78 | @click="toMyOrder('10')" | 78 | @click="toMyOrder('10')" |
| 79 | > | 79 | > |
| 80 | 全部 | 80 | 全部 |
| 81 | <image | 81 | <image |
| 82 | src="../../static/right.png" | 82 | src="../../static/right.png" |
| 83 | mode="aspectFit" | 83 | mode="aspectFit" |
| 84 | ></image> | 84 | ></image> |
| 85 | </view> | 85 | </view> |
| 86 | </view> | 86 | </view> |
| 87 | <view class="orderBody"> | 87 | <view class="orderBody"> |
| 88 | <view | 88 | <view |
| 89 | class="item waitPay" | 89 | class="item waitPay" |
| 90 | @click="toMyOrder('0')" | 90 | @click="toMyOrder('0')" |
| 91 | > | 91 | > |
| 92 | <image | 92 | <image |
| 93 | src="../../static/img/user/waitDeliver.png" | 93 | src="../../static/img/user/waitDeliver.png" |
| 94 | mode="aspectFit" | 94 | mode="aspectFit" |
| 95 | ></image> | 95 | ></image> |
| 96 | <text>待付款</text> | 96 | <text>待付款</text> |
| 97 | </view> | 97 | </view> |
| 98 | <view | 98 | <view |
| 99 | class="item waitDeliver" | 99 | class="item waitDeliver" |
| 100 | @click="toMyOrder('1')" | 100 | @click="toMyOrder('1')" |
| 101 | > | 101 | > |
| 102 | <image | 102 | <image |
| 103 | src="../../static/img/user/waitPay.png" | 103 | src="../../static/img/user/waitPay.png" |
| 104 | mode="aspectFit" | 104 | mode="aspectFit" |
| 105 | ></image> | 105 | ></image> |
| 106 | <text>待收货</text> | 106 | <text>待收货</text> |
| 107 | </view> | 107 | </view> |
| 108 | <view | 108 | <view |
| 109 | class="item waitReceive" | 109 | class="item waitReceive" |
| 110 | @click="toMyOrder('2')" | 110 | @click="toMyOrder('2')" |
| 111 | > | 111 | > |
| 112 | <image | 112 | <image |
| 113 | src="../../static/img/user/waitReceive.png" | 113 | src="../../static/img/user/waitReceive.png" |
| 114 | mode="aspectFit" | 114 | mode="aspectFit" |
| 115 | ></image> | 115 | ></image> |
| 116 | <text>已完成</text> | 116 | <text>已完成</text> |
| 117 | </view> | 117 | </view> |
| 118 | <!-- <view class="item service" @click="toMyOrder('3')"> | 118 | <!-- <view class="item service" @click="toMyOrder('3')"> |
| 119 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> | 119 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> |
| 120 | <text>已评价</text> | 120 | <text>已评价</text> |
| 121 | </view> --> | 121 | </view> --> |
| 122 | </view> | 122 | </view> |
| 123 | </view> | 123 | </view> |
| 124 | <view class="someItem"> | 124 | <view class="someItem"> |
| 125 | <!-- <view class="item"> | 125 | <!-- <view class="item"> |
| 126 | <view class="left"> | 126 | <view class="left"> |
| 127 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> | 127 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> |
| 128 | <text>推广记录与收益</text> | 128 | <text>推广记录与收益</text> |
| 129 | </view> | 129 | </view> |
| 130 | <image src="../../static/right.png" mode="aspectFit"></image> | 130 | <image src="../../static/right.png" mode="aspectFit"></image> |
| 131 | </view> --> | 131 | </view> --> |
| 132 | <view class="item"> | 132 | <view class="item"> |
| 133 | <view class="left"> | 133 | <view class="left"> |
| 134 | <image | 134 | <image |
| 135 | src="../../static/address-icon.png" | 135 | src="../../static/address-icon.png" |
| 136 | mode="aspectFit" | 136 | mode="aspectFit" |
| 137 | ></image> | 137 | ></image> |
| 138 | <text @tap="toAddress">地址管理</text> | 138 | <text @tap="toAddress">地址管理</text> |
| 139 | </view> | 139 | </view> |
| 140 | <image | 140 | <image |
| 141 | src="../../static/right.png" | 141 | src="../../static/right.png" |
| 142 | mode="aspectFit" | 142 | mode="aspectFit" |
| 143 | ></image> | 143 | ></image> |
| 144 | </view> | 144 | </view> |
| 145 | <view class="item"> | 145 | <view class="item"> |
| 146 | <view class="left"> | 146 | <view class="left"> |
| 147 | <image | 147 | <image |
| 148 | src="../../static/img/user/introduce.png" | 148 | src="../../static/img/user/introduce.png" |
| 149 | mode="aspectFit" | 149 | mode="aspectFit" |
| 150 | ></image> | 150 | ></image> |
| 151 | <text @tap="introduce">系统介绍</text> | 151 | <text @tap="introduce">系统介绍</text> |
| 152 | </view> | 152 | </view> |
| 153 | <image | 153 | <image |
| 154 | src="../../static/right.png" | 154 | src="../../static/right.png" |
| 155 | mode="aspectFit" | 155 | mode="aspectFit" |
| 156 | ></image> | 156 | ></image> |
| 157 | </view> | 157 | </view> |
| 158 | <view class="item"> | 158 | <view class="item"> |
| 159 | <view class="left"> | 159 | <view class="left"> |
| 160 | <image | 160 | <image |
| 161 | src="../../static/img/user/joinUs.png" | 161 | src="../../static/img/user/joinUs.png" |
| 162 | mode="aspectFit" | 162 | mode="aspectFit" |
| 163 | ></image> | 163 | ></image> |
| 164 | <text @tap="joinUs">加入我们</text> | 164 | <text @tap="joinUs">加入我们</text> |
| 165 | </view> | 165 | </view> |
| 166 | <image | 166 | <image |
| 167 | src="../../static/right.png" | 167 | src="../../static/right.png" |
| 168 | mode="aspectFit" | 168 | mode="aspectFit" |
| 169 | ></image> | 169 | ></image> |
| 170 | </view> | 170 | </view> |
| 171 | <view class="item"> | 171 | <view class="item"> |
| 172 | <view class="left"> | 172 | <view class="left"> |
| 173 | <image | 173 | <image |
| 174 | src="../../static/img/user/service.png" | 174 | src="../../static/img/user/service.png" |
| 175 | mode="aspectFit" | 175 | mode="aspectFit" |
| 176 | ></image> | 176 | ></image> |
| 177 | <text>联系客服</text> | 177 | <text>联系客服</text> |
| 178 | </view> | 178 | </view> |
| 179 | <image | 179 | <image |
| 180 | src="../../static/right.png" | 180 | src="../../static/right.png" |
| 181 | mode="aspectFit" | 181 | mode="aspectFit" |
| 182 | ></image> | 182 | ></image> |
| 183 | </view> | 183 | </view> |
| 184 | </view> | 184 | </view> |
| 185 | <view class="recommend"> | 185 | <view class="recommend"> |
| 186 | <view class="title"> | 186 | <view class="title"> |
| 187 | <view class="line"></view> | 187 | <view class="line"></view> |
| 188 | <view class="text">精选推荐</view> | 188 | <view class="text">精选推荐</view> |
| 189 | <view class="line"></view> | 189 | <view class="line"></view> |
| 190 | </view> | 190 | </view> |
| 191 | <!-- 商品列表 --> | 191 | <!-- 商品列表 --> |
| 192 | <view class="goods-list"> | 192 | <view class="goods-list"> |
| 193 | <scroll-view | 193 | <scroll-view |
| 194 | enable-flex | 194 | enable-flex |
| 195 | @scrolltolower="handleScrolltolower" | 195 | @scrolltolower="handleScrolltolower" |
| 196 | scroll-y | 196 | scroll-y |
| 197 | class="product-list" | 197 | class="product-list" |
| 198 | > | 198 | > |
| 199 | <view | 199 | <view |
| 200 | class="product" | 200 | class="product" |
| 201 | v-for="(item, index) in userRecommandList" | 201 | v-for="(item, index) in userRecommandList" |
| 202 | :key="index" | 202 | :key="index" |
| 203 | > | 203 | > |
| 204 | <Card :goods="item"></Card> | 204 | <Card :goods="item"></Card> |
| 205 | </view> | 205 | </view> |
| 206 | </scroll-view> | 206 | </scroll-view> |
| 207 | <view class="loading-text">{{loadingText}}</view> | 207 | <view class="loading-text">{{loadingText}}</view> |
| 208 | </view> | 208 | </view> |
| 209 | </view> | 209 | </view> |
| 210 | </view> | 210 | </view> |
| 211 | <view | 211 | <view |
| 212 | v-else | 212 | v-else |
| 213 | class="auth" | 213 | class="auth" |
| 214 | > | 214 | > |
| 215 | <view class="icon"></view> | 215 | <view class="icon"></view> |
| 216 | <view class="divider"></view> | 216 | <view class="divider"></view> |
| 217 | <view class="title">申请获取以下权限</view> | 217 | <view class="title">申请获取以下权限</view> |
| 218 | <view class="text">获得您的公开信息(昵称、头像等)</view> | 218 | <view class="text">获得您的公开信息(昵称、头像等)</view> |
| 219 | <button | 219 | <button |
| 220 | type="primary" | 220 | type="primary" |
| 221 | open-type="getUserInfo" | 221 | open-type="getUserInfo" |
| 222 | @getuserinfo="onGotUserInfo" | 222 | @getuserinfo="onGotUserInfo" |
| 223 | >授权登陆</button> | 223 | >授权登陆</button> |
| 224 | </view> | 224 | </view> |
| 225 | </view> | 225 | </view> |
| 226 | </template> | 226 | </template> |
| 227 | 227 | ||
| 228 | <script> | 228 | <script> |
| 229 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 229 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
| 230 | import store from '@/store' | 230 | import store from '@/store' |
| 231 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | 231 | import UniPopup from '@/components/UniPopup/uni-popup.vue' |
| 232 | 232 | ||
| 233 | export default { | 233 | export default { |
| 234 | components: { | 234 | components: { |
| 235 | Card, | 235 | Card, |
| 236 | UniPopup | 236 | UniPopup |
| 237 | }, | 237 | }, |
| 238 | data() { | 238 | data() { |
| 239 | return { | 239 | return { |
| 240 | isAuth: true, // 是否显示授权页面, | 240 | isAuth: true, // 是否显示授权页面, |
| 241 | pagesnum: 1, // 分页请求初始值 | 241 | pagesnum: 1, // 分页请求初始值 |
| 242 | whichTap: 0 // 弹窗渲染选择条件 | 242 | whichTap: 0 // 弹窗渲染选择条件 |
| 243 | } | 243 | } |
| 244 | }, | 244 | }, |
| 245 | onLoad() { | 245 | onLoad() { |
| 246 | // 判断是否授权 | 246 | // 判断是否授权 |
| 247 | uni.getSetting({ | 247 | uni.getSetting({ |
| 248 | success(res) { | 248 | success(res) { |
| 249 | console.log('authSetting', res.authSetting) | 249 | console.log('authSetting', res.authSetting) |
| 250 | if (res.authSetting['scope.userInfo'] === true) { | 250 | if (res.authSetting['scope.userInfo'] === true) { |
| 251 | this.isAuth = true | 251 | this.isAuth = true |
| 252 | } else { | 252 | } else { |
| 253 | this.isAuth = false | 253 | this.isAuth = false |
| 254 | } | 254 | } |
| 255 | } | 255 | } |
| 256 | }) | 256 | }) |
| 257 | store.dispatch('userRecommand/getRecommandList', { | 257 | store.dispatch('userRecommand/getRecommandList', { |
| 258 | uid: this.$store.state.user.userInfo.uid, | 258 | uid: this.$store.state.user.userInfo.uid, |
| 259 | openid: this.$store.state.user.userInfo.openid, | 259 | openid: this.$store.state.user.userInfo.openid, |
| 260 | page: this.pagesnum | 260 | page: this.pagesnum |
| 261 | }) | 261 | }) |
| 262 | }, | 262 | }, |
| 263 | computed: { | 263 | computed: { |
| 264 | nickName() { | 264 | nickName() { |
| 265 | return this.$store.state.user.userInfo.nickName | 265 | return this.$store.state.user.userInfo.nickName |
| 266 | }, | 266 | }, |
| 267 | headerphoto() { | 267 | headerphoto() { |
| 268 | return this.$store.state.user.userInfo.headerphoto | 268 | return this.$store.state.user.userInfo.headerphoto |
| 269 | }, | 269 | }, |
| 270 | userRecommandList() { | 270 | userRecommandList() { |
| 271 | return this.$store.state.userRecommand.recommandList | 271 | return this.$store.state.userRecommand.recommandList |
| 272 | } | 272 | } |
| 273 | }, | 273 | }, |
| 274 | methods: { | 274 | methods: { |
| 275 | // 弹窗 | 275 | // 弹窗 |
| 276 | changeTap(item) { | 276 | changeTap(item) { |
| 277 | this.whichTap = item | 277 | this.whichTap = item |
| 278 | this.$refs.popup.open() | 278 | this.$refs.popup.open() |
| 279 | }, | 279 | }, |
| 280 | chatOur(item) { | 280 | chatOur(item) { |
| 281 | if (item === 1) { | 281 | if (item === 1) { |
| 282 | uni.makePhoneCall({ | 282 | uni.makePhoneCall({ |
| 283 | phoneNumber: 13376189297 // 客服1 电话 | 283 | phoneNumber: 13376189297 // 客服1 电话 |
| 284 | }) | 284 | }) |
| 285 | } else { | 285 | } else { |
| 286 | uni.makePhoneCall({ | 286 | uni.makePhoneCall({ |
| 287 | phoneNumber: 18014995101 // 客服2 电话 | 287 | phoneNumber: 18014995101 // 客服2 电话 |
| 288 | }) | 288 | }) |
| 289 | } | 289 | } |
| 290 | }, | 290 | }, |
| 291 | // 授权 | 291 | // 授权 |
| 292 | onGotUserInfo(e) { | 292 | onGotUserInfo(e) { |
| 293 | if (e.detail.errMsg === 'getUserInfo:ok') { | 293 | if (e.detail.errMsg === 'getUserInfo:ok') { |
| 294 | const { fromInfo } = this.$store.state.user | 294 | const { fromInfo } = this.$store.state.user |
| 295 | // 用户授权成功 | 295 | // 用户授权成功 |
| 296 | store.dispatch('user/getUserInfo', fromInfo) | 296 | store.dispatch('user/getUserInfo', fromInfo) |
| 297 | this.isAuth = true | 297 | this.isAuth = true |
| 298 | } | 298 | } |
| 299 | }, | 299 | }, |
| 300 | toAddress() { | 300 | toAddress() { |
| 301 | uni.navigateTo({ | 301 | uni.navigateTo({ |
| 302 | url: '../address/addressList', | 302 | url: '../address/addressList', |
| 303 | success: res => {}, | 303 | success: res => {}, |
| 304 | fail: () => {}, | 304 | fail: () => {}, |
| 305 | complete: () => {} | 305 | complete: () => {} |
| 306 | }) | 306 | }) |
| 307 | }, | 307 | }, |
| 308 | introduce() { | 308 | introduce() { |
| 309 | uni.showModal({ | 309 | uni.showModal({ |
| 310 | content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。', | 310 | content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。', |
| 311 | showCancel: false | 311 | showCancel: false |
| 312 | }) | 312 | }) |
| 313 | }, | 313 | }, |
| 314 | joinUs() { | 314 | joinUs() { |
| 315 | uni.showModal({ | 315 | uni.showModal({ |
| 316 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', | 316 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', |
| 317 | showCancel: false | 317 | showCancel: false |
| 318 | }) | 318 | }) |
| 319 | }, | 319 | }, |
| 320 | toMyOrder(status) { | 320 | toMyOrder(status) { |
| 321 | uni.navigateTo({ | 321 | uni.navigateTo({ |
| 322 | url: `../myOrder/myOrder?status=${status}`, | 322 | url: `../myOrder/myOrder?status=${status}`, |
| 323 | success: res => {}, | 323 | success: res => {}, |
| 324 | fail: () => {}, | 324 | fail: () => {}, |
| 325 | complete: () => {} | 325 | complete: () => {} |
| 326 | }) | 326 | }) |
| 327 | }, | 327 | }, |
| 328 | toOpticsData() { | 328 | toOpticsData() { |
| 329 | uni.navigateTo({ | 329 | uni.navigateTo({ |
| 330 | url: '../addOpticsData/addOpticsData' | 330 | url: '../addOpticsData/addOpticsData' |
| 331 | }) | 331 | }) |
| 332 | }, | 332 | }, |
| 333 | handleScrolltolower() { | 333 | handleScrolltolower() { |
| 334 | // console.log('usr-my',this.$store.state.user.userInfo) | 334 | // console.log('usr-my',this.$store.state.user.userInfo) |
| 335 | this.pagesnum++ | 335 | this.pagesnum++ |
| 336 | store.dispatch('userRecommand/getRecommandList', { | 336 | store.dispatch('userRecommand/getRecommandList', { |
| 337 | uid: this.$store.state.user.userInfo.uid, | 337 | uid: this.$store.state.user.userInfo.uid, |
| 338 | openid: this.$store.state.user.userInfo.openid, | 338 | openid: this.$store.state.user.userInfo.openid, |
| 339 | page: this.pagesnum | 339 | page: this.pagesnum |
| 340 | }) | 340 | }) |
| 341 | } | 341 | } |
| 342 | } | 342 | } |
| 343 | } | 343 | } |
| 344 | </script> | 344 | </script> |
| 345 | 345 | ||
| 346 | <style lang="scss"> | 346 | <style lang="scss"> |
| 347 | .warp { | 347 | .warp { |
| 348 | font-size: 24rpx; | 348 | font-size: 24rpx; |
| 349 | background-color: #f2f2f2; | 349 | background-color: #f2f2f2; |
| 350 | height: 100vh; | 350 | height: 100vh; |
| 351 | } | 351 | } |
| 352 | .content { | 352 | .content { |
| 353 | display: flex; | 353 | display: flex; |
| 354 | flex-direction: column; | 354 | flex-direction: column; |
| 355 | align-items: center; | 355 | align-items: center; |
| 356 | justify-content: center; | 356 | justify-content: center; |
| 357 | background-color: #f2f2f2; | 357 | background-color: #f2f2f2; |
| 358 | } | 358 | } |
| 359 | .userInfo { | 359 | .userInfo { |
| 360 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); | 360 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); |
| 361 | width: 100%; | 361 | width: 100%; |
| 362 | height: 240rpx; | 362 | height: 240rpx; |
| 363 | color: #ffffff; | 363 | color: #ffffff; |
| 364 | padding: 60rpx 82rpx 80rpx 44rpx; | 364 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 365 | box-sizing: border-box; | 365 | box-sizing: border-box; |
| 366 | display: flex; | 366 | display: flex; |
| 367 | flex-direction: row; | 367 | flex-direction: row; |
| 368 | justify-content: space-between; | 368 | justify-content: space-between; |
| 369 | align-items: flex-start; | 369 | align-items: flex-start; |
| 370 | .info { | 370 | .info { |
| 371 | display: flex; | 371 | display: flex; |
| 372 | flex-direction: row; | 372 | flex-direction: row; |
| 373 | justify-content: space-between; | 373 | justify-content: space-between; |
| 374 | align-items: center; | 374 | align-items: center; |
| 375 | image { | 375 | image { |
| 376 | border-radius: 50rpx; | 376 | border-radius: 50rpx; |
| 377 | height: 100rpx; | 377 | height: 100rpx; |
| 378 | width: 100rpx; | 378 | width: 100rpx; |
| 379 | margin-right: 40rpx; | 379 | margin-right: 40rpx; |
| 380 | } | 380 | } |
| 381 | .infoText { | 381 | .infoText { |
| 382 | display: flex; | 382 | display: flex; |
| 383 | flex-direction: column; | 383 | flex-direction: column; |
| 384 | justify-content: space-between; | 384 | justify-content: space-between; |
| 385 | align-items: flex-scetart; | 385 | align-items: flex-scetart; |
| 386 | .userName { | 386 | .userName { |
| 387 | font-size: 18px; | 387 | font-size: 18px; |
| 388 | color: #ffffff; | 388 | color: #ffffff; |
| 389 | margin-bottom: 8rpx; | 389 | margin-bottom: 8rpx; |
| 390 | } | 390 | } |
| 391 | .nickName { | 391 | .nickName { |
| 392 | font-size: 12px; | 392 | font-size: 12px; |
| 393 | color: #ffffff; | 393 | color: #ffffff; |
| 394 | } | 394 | } |
| 395 | } | 395 | } |
| 396 | } | 396 | } |
| 397 | // .service { | 397 | // .service { |
| 398 | // margin-top: 20rpx; | 398 | // margin-top: 20rpx; |
| 399 | // image { | 399 | // image { |
| 400 | // height: 36rpx; | 400 | // height: 36rpx; |
| 401 | // width: 36rpx; | 401 | // width: 36rpx; |
| 402 | // } | 402 | // } |
| 403 | // } | 403 | // } |
| 404 | } | 404 | } |
| 405 | .myOpticsData { | 405 | .myOpticsData { |
| 406 | width: 670rpx; | 406 | width: 670rpx; |
| 407 | height: 120rpx; | 407 | height: 120rpx; |
| 408 | background-color: #ffffff; | 408 | background-color: #ffffff; |
| 409 | border-radius: 6px; | 409 | border-radius: 6px; |
| 410 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); | 410 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); |
| 411 | position: relative; | 411 | position: relative; |
| 412 | bottom: 44rpx; | 412 | bottom: 44rpx; |
| 413 | padding: 40rpx; | 413 | padding: 40rpx; |
| 414 | box-sizing: border-box; | 414 | box-sizing: border-box; |
| 415 | display: flex; | 415 | display: flex; |
| 416 | justify-content: space-between; | 416 | justify-content: space-between; |
| 417 | align-items: center; | 417 | align-items: center; |
| 418 | .left { | 418 | .left { |
| 419 | font-size: 14px; | 419 | font-size: 14px; |
| 420 | color: #333333; | 420 | color: #333333; |
| 421 | display: flex; | 421 | display: flex; |
| 422 | align-items: center; | 422 | align-items: center; |
| 423 | image { | 423 | image { |
| 424 | margin-right: 32rpx; | 424 | margin-right: 32rpx; |
| 425 | width: 30rpx; | 425 | width: 30rpx; |
| 426 | height: 34rpx; | 426 | height: 34rpx; |
| 427 | } | 427 | } |
| 428 | } | 428 | } |
| 429 | image { | 429 | image { |
| 430 | height: 16px; | 430 | height: 16px; |
| 431 | width: 8px; | 431 | width: 8px; |
| 432 | } | 432 | } |
| 433 | } | 433 | } |
| 434 | .myOrder { | 434 | .myOrder { |
| 435 | width: 100%; | 435 | width: 100%; |
| 436 | height: 296rpx; | 436 | height: 296rpx; |
| 437 | // margin-top: 116rpx; | 437 | // margin-top: 116rpx; |
| 438 | margin-bottom: 20rpx; | 438 | margin-bottom: 20rpx; |
| 439 | padding: 0 40rpx; | 439 | padding: 0 40rpx; |
| 440 | box-sizing: border-box; | 440 | box-sizing: border-box; |
| 441 | background: #ffffff; | 441 | background: #ffffff; |
| 442 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 442 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
| 443 | border-radius: 6px; | 443 | border-radius: 6px; |
| 444 | border-radius: 6px; | 444 | border-radius: 6px; |
| 445 | display: flex; | 445 | display: flex; |
| 446 | flex-direction: column; | 446 | flex-direction: column; |
| 447 | justify-content: space-around; | 447 | justify-content: space-around; |
| 448 | align-items: center; | 448 | align-items: center; |
| 449 | .orderHeader { | 449 | .orderHeader { |
| 450 | width: 100%; | 450 | width: 100%; |
| 451 | height: 100rpx; | 451 | height: 100rpx; |
| 452 | display: flex; | 452 | display: flex; |
| 453 | flex-direction: row; | 453 | flex-direction: row; |
| 454 | justify-content: space-between; | 454 | justify-content: space-between; |
| 455 | align-items: center; | 455 | align-items: center; |
| 456 | border-bottom: 1px solid #e9e9e9; | 456 | border-bottom: 1px solid #e9e9e9; |
| 457 | font-weight: bold; | 457 | font-weight: bold; |
| 458 | font-size: 18px; | 458 | font-size: 18px; |
| 459 | color: #333333; | 459 | color: #333333; |
| 460 | .btn { | 460 | .btn { |
| 461 | font-size: 12px; | 461 | font-size: 12px; |
| 462 | color: #999999; | 462 | color: #999999; |
| 463 | display: flex; | 463 | display: flex; |
| 464 | align-items: center; | 464 | align-items: center; |
| 465 | image { | 465 | image { |
| 466 | margin-left: 20rpx; | 466 | margin-left: 20rpx; |
| 467 | height: 32rpx; | 467 | height: 32rpx; |
| 468 | width: 16rpx; | 468 | width: 16rpx; |
| 469 | } | 469 | } |
| 470 | } | 470 | } |
| 471 | } | 471 | } |
| 472 | .orderBody { | 472 | .orderBody { |
| 473 | width: 100%; | 473 | width: 100%; |
| 474 | display: flex; | 474 | display: flex; |
| 475 | flex-direction: row; | 475 | flex-direction: row; |
| 476 | justify-content: space-around; | 476 | justify-content: space-around; |
| 477 | align-items: center; | 477 | align-items: center; |
| 478 | .item { | 478 | .item { |
| 479 | display: flex; | 479 | display: flex; |
| 480 | flex-direction: column; | 480 | flex-direction: column; |
| 481 | align-items: center; | 481 | align-items: center; |
| 482 | image { | 482 | image { |
| 483 | width: 62rpx; | 483 | width: 62rpx; |
| 484 | height: 46rpx; | 484 | height: 46rpx; |
| 485 | } | 485 | } |
| 486 | text { | 486 | text { |
| 487 | margin-top: 24rpx; | 487 | margin-top: 24rpx; |
| 488 | font-size: 12px; | 488 | font-size: 12px; |
| 489 | color: #333333; | 489 | color: #333333; |
| 490 | } | 490 | } |
| 491 | } | 491 | } |
| 492 | } | 492 | } |
| 493 | } | 493 | } |
| 494 | .someItem { | 494 | .someItem { |
| 495 | width: 100%; | 495 | width: 100%; |
| 496 | height: 336rpx; | 496 | height: 336rpx; |
| 497 | background: #ffffff; | 497 | background: #ffffff; |
| 498 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 498 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
| 499 | border-radius: 6px; | 499 | border-radius: 6px; |
| 500 | border-radius: 6px; | 500 | border-radius: 6px; |
| 501 | margin-bottom: 18rpx; | 501 | margin-bottom: 18rpx; |
| 502 | box-sizing: border-box; | 502 | box-sizing: border-box; |
| 503 | padding: 21rpx 48rpx 21rpx 42rpx; | 503 | padding: 21rpx 48rpx 21rpx 42rpx; |
| 504 | box-sizing: border-box; | 504 | box-sizing: border-box; |
| 505 | display: flex; | 505 | display: flex; |
| 506 | flex-direction: column; | 506 | flex-direction: column; |
| 507 | justify-content: space-between; | 507 | justify-content: space-between; |
| 508 | align-items: center; | 508 | align-items: center; |
| 509 | .item { | 509 | .item { |
| 510 | display: flex; | 510 | display: flex; |
| 511 | justify-content: space-between; | 511 | justify-content: space-between; |
| 512 | border-bottom: 1px solid #f2f2f2; | 512 | border-bottom: 1px solid #f2f2f2; |
| 513 | align-items: center; | 513 | align-items: center; |
| 514 | height: 72rpx; | 514 | height: 72rpx; |
| 515 | width: 100%; | 515 | width: 100%; |
| 516 | .left { | 516 | .left { |
| 517 | font-size: 14px; | 517 | font-size: 14px; |
| 518 | color: #333333; | 518 | color: #333333; |
| 519 | display: flex; | 519 | display: flex; |
| 520 | align-items: center; | 520 | align-items: center; |
| 521 | image { | 521 | image { |
| 522 | margin-right: 32rpx; | 522 | margin-right: 32rpx; |
| 523 | width: 30rpx; | 523 | width: 30rpx; |
| 524 | height: 34rpx; | 524 | height: 34rpx; |
| 525 | } | 525 | } |
| 526 | } | 526 | } |
| 527 | image { | 527 | image { |
| 528 | height: 16px; | 528 | height: 16px; |
| 529 | width: 8px; | 529 | width: 8px; |
| 530 | } | 530 | } |
| 531 | } | 531 | } |
| 532 | } | 532 | } |
| 533 | .recommend { | 533 | .recommend { |
| 534 | background: #ffffff; | 534 | background: #ffffff; |
| 535 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 535 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
| 536 | border-radius: 6px; | 536 | border-radius: 6px; |
| 537 | border-radius: 6px; | 537 | border-radius: 6px; |
| 538 | width: 100%; | 538 | width: 100%; |
| 539 | .title { | 539 | .title { |
| 540 | display: flex; | 540 | display: flex; |
| 541 | flex-direction: row; | 541 | flex-direction: row; |
| 542 | align-items: center; | 542 | align-items: center; |
| 543 | justify-content: space-between; | 543 | justify-content: space-between; |
| 544 | padding: 20rpx 40rpx; | 544 | padding: 20rpx 40rpx; |
| 545 | .line { | 545 | .line { |
| 546 | width: 264rpx; | 546 | width: 264rpx; |
| 547 | height: 1rpx; | 547 | height: 1rpx; |
| 548 | border-bottom: 1px solid #eaeaea; | 548 | border-bottom: 1px solid #eaeaea; |
| 549 | } | 549 | } |
| 550 | .text { | 550 | .text { |
| 551 | font-family: PingFangSC-Medium; | 551 | font-family: PingFangSC-Medium; |
| 552 | font-size: 14px; | 552 | font-size: 14px; |
| 553 | color: #333333; | 553 | color: #333333; |
| 554 | letter-spacing: -0.26px; | 554 | letter-spacing: -0.26px; |
| 555 | text-align: justify; | 555 | text-align: justify; |
| 556 | line-height: 24px; | 556 | line-height: 24px; |
| 557 | } | 557 | } |
| 558 | } | 558 | } |
| 559 | .goods-list { | 559 | .goods-list { |
| 560 | .loading-text { | 560 | .loading-text { |
| 561 | width: 100%; | 561 | width: 100%; |
| 562 | display: flex; | 562 | display: flex; |
| 563 | justify-content: center; | 563 | justify-content: center; |
| 564 | align-items: center; | 564 | align-items: center; |
| 565 | height: 30px; | 565 | height: 30px; |
| 566 | color: #979797; | 566 | color: #979797; |
| 567 | font-size: 12px; | 567 | font-size: 12px; |
| 568 | } | 568 | } |
| 569 | .product-list { | 569 | .product-list { |
| 570 | width: 92%; | 570 | width: 92%; |
| 571 | padding: 0 4% 3vw 4%; | 571 | padding: 0 4% 3vw 4%; |
| 572 | display: flex; | 572 | display: flex; |
| 573 | justify-content: space-between; | 573 | justify-content: space-between; |
| 574 | flex-wrap: wrap; | 574 | flex-wrap: wrap; |
| 575 | height: 400px; | ||
| 575 | .product { | 576 | .product { |
| 576 | width: 48%; | 577 | width: 48%; |
| 577 | margin: 0 0 20rpx 0; | 578 | margin: 0 0 20rpx 0; |
| 578 | background: #ffffff; | 579 | background: #ffffff; |
| 579 | border: 1px solid #f2f2f2; | 580 | border: 1px solid #f2f2f2; |
| 580 | } | 581 | } |
| 581 | } | 582 | } |
| 582 | } | 583 | } |
| 583 | } | 584 | } |
| 584 | .auth { | 585 | .auth { |
| 585 | height: 100vh; | 586 | height: 100vh; |
| 586 | display: flex; | 587 | display: flex; |
| 587 | flex-direction: column; | 588 | flex-direction: column; |
| 588 | align-items: center; | 589 | align-items: center; |
| 589 | .icon { | 590 | .icon { |
| 590 | width: 140rpx; | 591 | width: 140rpx; |
| 591 | height: 140rpx; | 592 | height: 140rpx; |
| 592 | border-radius: 50%; | 593 | border-radius: 50%; |
| 593 | margin-top: 100rpx; | 594 | margin-top: 100rpx; |
| 594 | background-color: grey; | 595 | background-color: grey; |
| 595 | } | 596 | } |
| 596 | .divider { | 597 | .divider { |
| 597 | height: 1rpx; | 598 | height: 1rpx; |
| 598 | width: 600rpx; | 599 | width: 600rpx; |
| 599 | margin-top: 80rpx; | 600 | margin-top: 80rpx; |
| 600 | background-color: #e6e3e3; | 601 | background-color: #e6e3e3; |
| 601 | } | 602 | } |
| 602 | .title { | 603 | .title { |
| 603 | width: 600rpx; | 604 | width: 600rpx; |
| 604 | margin-top: 50rpx; | 605 | margin-top: 50rpx; |
| 605 | text-align: left; | 606 | text-align: left; |
| 606 | } | 607 | } |
| 607 | .text { | 608 | .text { |
| 608 | width: 600rpx; | 609 | width: 600rpx; |
| 609 | margin-top: 30rpx; | 610 | margin-top: 30rpx; |
| 610 | text-align: left; | 611 | text-align: left; |
| 611 | color: #e6e3e3; | 612 | color: #e6e3e3; |
| 612 | } | 613 | } |
| 613 | button { | 614 | button { |
| 614 | width: 450rpx; | 615 | width: 450rpx; |
| 615 | height: 80rpx; | 616 | height: 80rpx; |
| 616 | line-height: 80rpx; | 617 | line-height: 80rpx; |
| 617 | margin-top: 80rpx; | 618 | margin-top: 80rpx; |
| 618 | border-radius: 30rpx; | 619 | border-radius: 30rpx; |
| 619 | } | 620 | } |
| 620 | } | 621 | } |
| 621 | .closeBtn { | 622 | .closeBtn { |
| 622 | height: 28rpx; | 623 | height: 28rpx; |
| 623 | width: 28rpx; | 624 | width: 28rpx; |
| 624 | // border: 1px solid red; | 625 | // border: 1px solid red; |
| 625 | position: absolute; | 626 | position: absolute; |
| 626 | top: 20rpx; | 627 | top: 20rpx; |
| 627 | right: 10rpx; | 628 | right: 10rpx; |
| 628 | } | 629 | } |
| 629 | </style> | 630 | </style> |
| 630 | 631 |
src/store/modules/cart.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 { cartList, cartModi, cartDel, cartAdd } = urlAlias | 4 | const { cartList, cartModi, cartDel, cartAdd } = urlAlias |
| 5 | 5 | ||
| 6 | const state = { | 6 | const state = { |
| 7 | cartList: [] | 7 | cartList: [] |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | const mutations = { | 10 | const mutations = { |
| 11 | INIT: (state, cartList) => { | 11 | INIT: (state, cartList) => { |
| 12 | state.cartList = cartList | 12 | state.cartList = cartList |
| 13 | }, | 13 | }, |
| 14 | DEL: (state, index) => { | 14 | DEL: (state, index) => { |
| 15 | console.log('mutations====>', state.cartList) | 15 | console.log('mutations====>', state.cartList) |
| 16 | state.cartList.splice(index, 1) | 16 | state.cartList.splice(index, 1) |
| 17 | console.log('mutations====>index', index) | 17 | console.log('mutations====>index', index) |
| 18 | // state.cartList=delList | 18 | // state.cartList=delList |
| 19 | }, | 19 | }, |
| 20 | MODI: (state, args) => { | 20 | MODI: (state, args) => { |
| 21 | console.log('the num', state.cartList[args.index].num) | 21 | console.log('the num', state.cartList[args.index].num) |
| 22 | console.log('mutations====>isadd', args) | 22 | console.log('mutations====>isadd', args) |
| 23 | if (args.isadd) { | 23 | state.cartList[args.index].num = args.num |
| 24 | state.cartList[args.index].num = args.num | ||
| 25 | } else { | ||
| 26 | state.cartList[args.index].num = args.num | ||
| 27 | } | ||
| 28 | console.log('the num', state.cartList[args.index].num) | 24 | console.log('the num', state.cartList[args.index].num) |
| 29 | } | 25 | } |
| 30 | 26 | ||
| 31 | } | 27 | } |
| 32 | 28 | ||
| 33 | const actions = { | 29 | const actions = { |
| 34 | getCartList({ commit }, param) { | 30 | getCartList({ commit }, param) { |
| 35 | request({ | 31 | request({ |
| 36 | url: cartList, | 32 | url: cartList, |
| 37 | data: param, | 33 | data: param, |
| 38 | success: (res) => { | 34 | success: (res) => { |
| 39 | console.log('cart===>接口数据', res.data.data) | 35 | console.log('cart===>接口数据', res.data.data) |
| 40 | // const resData = { | 36 | // const resData = { |
| 41 | // ...res, | 37 | // ...res, |
| 42 | // data, | 38 | // data, |
| 43 | // } | 39 | // } |
| 44 | commit('INIT', res.data.data) | 40 | commit('INIT', res.data.data) |
| 45 | }, | 41 | }, |
| 46 | fail: (res) => { | 42 | fail: (res) => { |
| 47 | console.log('fail status === > ', res) | 43 | console.log('fail status === > ', res) |
| 48 | }, | 44 | }, |
| 49 | complete: (res) => { | 45 | complete: (res) => { |
| 50 | console.log('complete status === > ', res) | 46 | console.log('complete status === > ', res) |
| 51 | } | 47 | } |
| 52 | }) | 48 | }) |
| 53 | }, | 49 | }, |
| 54 | 50 | ||
| 55 | modiCart({ commit }, param) { | 51 | modiCart({ commit }, param) { |
| 56 | const args = Object.assign({ num: param.num }, param.args) | 52 | const arg = Object.assign({ num: param.num }, param.args) |
| 57 | delete param.args | 53 | delete param.args |
| 58 | request({ | 54 | request({ |
| 59 | url: cartModi, | 55 | url: cartModi, |
| 60 | data: param, | 56 | data: param, |
| 61 | success: (res) => { | 57 | success: (res) => { |
| 58 | console.log('modiCart-res=====>',res.data) | ||
| 62 | console.log('modi-parm', param) | 59 | console.log('modi-parm', param) |
| 63 | commit('MODI', args) | 60 | commit('MODI', arg) |
| 64 | }, | 61 | }, |
| 65 | fail: (res) => { | 62 | fail: (res) => { |
| 66 | console.log('fail status === > ', res) | 63 | console.log('fail status === > ', res) |
| 67 | }, | 64 | }, |
| 68 | complete: (res) => { | 65 | complete: (res) => { |
| 69 | console.log('complete status === > ', res) | 66 | console.log('complete status === > ', res) |
| 70 | } | 67 | } |
| 71 | }) | 68 | }) |
| 72 | }, | 69 | }, |
| 73 | 70 | ||
| 74 | delCart({ commit }, param) { | 71 | delCart({ commit }, param) { |
| 75 | const arg = param.arg | 72 | const arg = param.arg |
| 76 | delete param.arg | 73 | delete param.arg |
| 77 | request({ | 74 | request({ |
| 78 | url: cartDel, | 75 | url: cartDel, |
| 79 | data: param, | 76 | data: param, |
| 80 | success: (res) => { | 77 | success: (res) => { |
| 81 | console.log('del-parm', param) | 78 | console.log('del-parm', param) |
| 82 | console.log('del-myparms==>', arg) | 79 | console.log('del-myparms==>', arg) |
| 83 | // console.log('deacart====>cartList',this.$store.state.cart.cartList) | 80 | // console.log('deacart====>cartList',this.$store.state.cart.cartList) |
| 84 | 81 | ||
| 85 | commit('DEL', arg) | 82 | commit('DEL', arg) |
| 86 | }, | 83 | }, |
| 87 | fail: (res) => { | 84 | fail: (res) => { |
| 88 | console.log('fail status === > ', res) | 85 | console.log('fail status === > ', res) |
| 89 | }, | 86 | }, |
| 90 | complete: (res) => { | 87 | complete: (res) => { |
| 91 | console.log('complete status === > ', res) | 88 | console.log('complete status === > ', res) |
| 92 | } | 89 | } |
| 93 | }) | 90 | }) |
| 94 | }, | 91 | }, |
| 95 | 92 | ||
| 96 | addCart({ commit }, param) { | 93 | addCart({ commit }, param) { |
| 97 | console.log('请求接口开始') | 94 | console.log('请求接口开始') |
| 98 | request({ | 95 | request({ |
| 99 | url: cartAdd, | 96 | url: cartAdd, |
| 100 | data: param, | 97 | data: param, |
| 101 | success: (res) => { | 98 | success: (res) => { |
| 102 | console.log('add-parm', param) | 99 | console.log('add-parm', param) |
| 103 | console.log('addcart===>res.data===>', res.data) | 100 | console.log('addcart===>res.data===>', res.data) |
| 104 | // commit('INIT', res.data.data) | 101 | // commit('INIT', res.data.data) |
| 105 | }, | 102 | }, |
| 106 | fail: (res) => { | 103 | fail: (res) => { |
| 107 | console.log('fail status === > ', res) | 104 | console.log('fail status === > ', res) |
| 108 | }, | 105 | }, |
| 109 | complete: (res) => { | 106 | complete: (res) => { |
| 110 | console.log('complete status === > ', res) | 107 | console.log('complete status === > ', res) |
| 111 | } | 108 | } |
| 112 | }) | 109 | }) |
| 113 | } | 110 | } |
| 114 | 111 | ||
| 115 | } | 112 | } |
| 116 | 113 | ||
| 117 | export default { | 114 | export default { |
| 118 | namespaced: true, | 115 | namespaced: true, |
| 119 | state, | 116 | state, |
| 120 | mutations, | 117 | mutations, |
| 121 | actions | 118 | actions |
| 122 | } | 119 | } |