Adam / gulu-vue

Browse Code »

Commit ba260b3f99c3c0c80da3c59173f684880323c44c

Authored by BigBoss 2020-06-02 00:46:26 +0800

1 parent 54c9be5642

Exists in master

修改

Showing 5 changed files with 42 additions and 140 deletions Show diff stats

src/components/SimpleAddress/SimpleAddress.vue

Diff comments View file @ba260b3

 <template>
   <view
     class="simple-address"
     v-if="showPopup"
     @touchmove.stop.prevent="clear"
   >
     <!-- 遮罩层 -->
     <view
       class="simple-address-mask"
       @touchmove.stop.prevent="clear"
       v-if="maskClick"
       :class="[ani + '-mask', animation ? 'mask-ani' : '']"
       :style="{
           'background-color': maskBgColor
         }"
       @tap="hideMask(true)"
     ></view>
     <view
       class="simple-address-content simple-address--fixed"
       :class="[type, ani + '-content', animation ? 'content-ani' : '']"
     >
       <view class="simple-address__header">
         <view
           class="simple-address__header-btn-box"
           @click="pickerCancel"
         >
           <text
             class="simple-address__header-text"
             :style="{ color: cancelColor, fontSize: btnFontSize }"
           >取消</text>
         </view>
         <view
           class="simple-address__header-btn-box"
           @click="pickerConfirm"
         >
           <text
             class="simple-address__header-text"
             :style="{ color: confirmColor || themeColor, fontSize: btnFontSize }"
           >确定</text>
         </view>
       </view>
       <view class="simple-address__box">
         <picker-view
           indicator-style="height: 70rpx;"
           class="simple-address-view"
           :value="pickerValue"
           @change="pickerChange"
         >
           <picker-view-column>
             <!-- #ifndef APP-NVUE -->
             <view
               class="picker-item"
               :style="{ fontSize: fontSize }"
               v-for="(item, index) in provinceDataList"
               :key="index"
             >{{ item.label }}</view>
             <!-- #endif -->
             <!-- #ifdef APP-NVUE -->
             <text
               class="picker-item"
               :style="{ fontSize: fontSize }"
               v-for="(item, index) in provinceDataList"
               :key="index"
             >{{ item.label }}</text>
             <!-- #endif -->
           </picker-view-column>
           <picker-view-column>
             <!-- #ifndef APP-NVUE -->
             <view
               class="picker-item"
               :style="{ fontSize: fontSize }"
               v-for="(item, index) in cityDataList"
               :key="index"
             >{{ item.label }}</view>
             <!-- #endif -->
             <!-- #ifdef APP-NVUE -->
             <text
               class="picker-item"
               :style="{ fontSize: fontSize }"
               v-for="(item, index) in cityDataList"
               :key="index"
             >{{ item.label }}</text>
             <!-- #endif -->
           </picker-view-column>
           <picker-view-column>
             <!-- #ifndef APP-NVUE -->
             <view
               class="picker-item"
               :style="{ fontSize: fontSize }"
               v-for="(item, index) in areaDataList"
               :key="index"
             >{{ item.label }}</view>
             <!-- #endif -->
             <!-- #ifdef APP-NVUE -->
             <text
               class="picker-item"
               :style="{ fontSize: fontSize }"
               v-for="(item, index) in areaDataList"
               :key="index"
             >{{ item.label }}</text>
             <!-- #endif -->
           </picker-view-column>
         </picker-view>
       </view>
     </view>
   </view>
 </template>
 <script>
 /**
  * Simple-addres  地址联动组件
  * @description 三级地址联动，支持（app）nvue、小程序、H5
  * @tutorial https://ext.dcloud.net.cn/plugin?id=1084
  * @property {String} animation 是否开启动画
  * @property {String} type = [bottom] 弹出层类型，暂时只支持底部弹出
  * @property {Boolean} maskClick = [true | false] 是否允许点击遮罩层关闭
  * @property {Boolean} show = [true | false]  显示或隐藏地址组件
  * @property {String} maskBgColor 遮罩层背景颜色
  * @property {String} cancelColor 取消按钮颜色，默认为：#1aad19
  * @property {String} confirmColor 确认按钮颜色，默认为：themeColor
  * @property {String} themeColor 主题颜色，后续会废弃该配置，建议使用`cancelColor`或`confirmColor`
  * @property {String} btnFontSize 取消、确认按钮字体大小，默认为`uni.scss里的 $uni-font-size-base `
  * @property {String} fontSize picker-item字体大小，默认为：28rpx
  * @property {Array} pickerValueDefault 默认值，可以通过function queryIndex 获取
  * @property {Function} queryIndex 根据自定义信息返回对应的index
  * @property {Function} open 打开
  * @example  <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
  */
 import provinceData from './cityData/province.js'
 import cityData from './cityData/city.js'
 import areaData from './cityData/area.js'
 export default {
   name: 'simpleAddress',
   props: {
     mode: {
       // 地址类型
       // default 则代表老版本根据index索引获取数据
       //
       type: String,
       default: 'default'
     },
     // 开启动画
     animation: {
       type: Boolean,
       default: true
     },
     /* 弹出层类型，可选值；
      *bottom：底部弹出层
      */
     type: {
       type: String,
       default: 'bottom'
     },
     // maskClick
     maskClick: {
       type: Boolean,
       default: true
     },
     show: {
       type: Boolean,
       default: true
     },
     maskBgColor: {
       type: String,
       default: 'rgba(0, 0, 0, 0.4)' // 背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
     },
     themeColor: {
       type: String,
       default: '' // 确认按钮颜色（向下兼容）
     },
     cancelColor: {
       type: String,
       default: '' // 取消按钮颜色
     },
     confirmColor: {
       type: String,
       default: '' // 确认按钮颜色
     },
     fontSize: {
       type: String,
       default: '28rpx' // picker-item字体大小
     },
     btnFontSize: {
       type: String,
       default: '' // 按钮的字体大小
     },
     /* 默认值 */
     pickerValueDefault: {
       type: Array,
       default () {
         return [0, 0, 0]
       }
     }
   },
   data () {
     return {
       ani: '',
       showPopup: false,
       pickerValue: [0, 0, 0],
       provinceDataList: [],
       cityDataList: [],
       areaDataList: []
     }
   },
   watch: {
     show (newValue) {
       if (newValue) {
         this.open()
       } else {
         this.close()
       }
     },
     pickerValueDefault () {
       this.init()
     }
   },
   created () {
     this.init()
   },
   methods: {
     init () {
+		console.log(this.pickerValueDefault)
       this.handPickValueDefault() // 对 pickerValueDefault 做兼容处理
       this.provinceDataList = provinceData
       this.cityDataList = cityData[this.pickerValueDefault[0]]
       this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]]
       this.pickerValue = this.pickerValueDefault
     },
     handPickValueDefault () {
       if (this.pickerValueDefault !== [0, 0, 0]) {
         if (this.pickerValueDefault[0] > provinceData.length - 1) {
           this.pickerValueDefault[0] = provinceData.length - 1
         }
         if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
           this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1
         }
         if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
           this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1
         }
       }
     },
     pickerChange (e) {
       const changePickerValue = e.detail.value
       if (this.pickerValue[0] !== changePickerValue[0]) {
         // 第一级发生滚动
         this.cityDataList = cityData[changePickerValue[0]]
         this.areaDataList = areaData[changePickerValue[0]][0]
         changePickerValue[1] = 0
         changePickerValue[2] = 0
       } else if (this.pickerValue[1] !== changePickerValue[1]) {
         // 第二级滚动
         this.areaDataList = areaData[changePickerValue[0]][changePickerValue[1]]
         changePickerValue[2] = 0
       }
       this.pickerValue = changePickerValue
       this._$emit('onChange')
     },
     _$emit (emitName) {
       const pickObj = {
         label: this._getLabel(),
         value: this.pickerValue,
         cityCode: this._getCityCode(),
         areaCode: this._getAreaCode(),
         provinceCode: this._getProvinceCode(),
         labelArr: this._getLabel().split('-')
       }
       this.$emit(emitName, pickObj)
     },
     _getLabel () {
       const pcikerLabel = this.provinceDataList[this.pickerValue[0]].label + '-' + this.cityDataList[this.pickerValue[1]].label + '-' + this.areaDataList[this.pickerValue[2]].label
       return pcikerLabel
     },
     _getCityCode () {
       return this.cityDataList[this.pickerValue[1]].value
     },
     _getProvinceCode () {
       return this.provinceDataList[this.pickerValue[0]].value
     },
     _getAreaCode () {
       return this.areaDataList[this.pickerValue[2]].value
     },
     queryIndex (params = [], type = 'value') {
       // params = [ 11 ,1101,110101 ];
       // 1.获取省份的index
       const provinceIndex = provinceData.findIndex(res => res[type] === params[0])
       const cityIndex = cityData[provinceIndex].findIndex(res => res[type] === params[1])
       const areaIndex = areaData[provinceIndex][cityIndex].findIndex(res => res[type] === params[2])
       return {
         index: [provinceIndex, cityIndex, areaIndex],
         data: {
           province: provinceData[provinceIndex],
           city: cityData[provinceIndex][cityIndex],
           area: areaData[provinceIndex][cityIndex][areaIndex]
         }
       }
     },
     clear () {},
     hideMask () {
       this._$emit('onCancel')
       this.close()
     },
     pickerCancel () {
       this._$emit('onCancel')
       this.close()
     },
     pickerConfirm () {
       this._$emit('onConfirm')
       this.close()
     },
     open () {
       this.showPopup = true
       this.$nextTick(() => {
         setTimeout(() => {
           this.ani = 'simple-' + this.type
         }, 100)
       })
     },
     close (type) {
       if (!this.maskClick && type) return
       this.ani = ''
       this.$nextTick(() => {
         setTimeout(() => {
           this.showPopup = false
         }, 300)
       })
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .simple-address {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: column;
 }
 .simple-address-mask {
   position: fixed;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;
   transition-property: opacity;
   transition-duration: 0.3s;
   opacity: 0;
   /* #ifndef APP-NVUE */
   z-index: 99;
   /* #endif */
 }
 .mask-ani {
   transition-property: opacity;
   transition-duration: 0.2s;
 }
 .simple-bottom-mask {
   opacity: 1;
 }
 .simple-center-mask {
   opacity: 1;
 }
 .simple-address--fixed {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   transition-property: transform;
   transition-duration: 0.3s;
   transform: translateY(460rpx);
   /* #ifndef APP-NVUE */
   z-index: 99;
   /* #endif */
 }
 .simple-address-content {
   background-color: #ffffff;
 }
 .simple-content-bottom {
   bottom: 0;
   left: 0;
   right: 0;
   transform: translateY(500rpx);
 }
 .content-ani {
   transition-property: transform, opacity;
   transition-duration: 0.2s;
 }
 .simple-bottom-content {
   transform: translateY(0);
 }
 .simple-center-content {
   transform: scale(1);
   opacity: 1;
 }
 .simple-address__header {
   position: relative;
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   border-bottom-color: #f2f2f2;
   border-bottom-style: solid;
   border-bottom-width: 1rpx;
 }
 .simple-address--fixed-top {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
   justify-content: space-between;
   border-top-color: $uni-border-color;
   border-top-style: solid;
   border-top-width: 1rpx;
 }
 .simple-address__header-btn-box {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
   align-items: center;
   justify-content: center;
   height: 70rpx;
 }
 .simple-address__header-text {
   text-align: center;
   font-size: $uni-font-size-base;
   color: #1aad19;
   line-height: 70rpx;
   padding-left: 40rpx;
   padding-right: 40rpx;
 }
 .simple-address__box {
   position: relative;
 }
 .simple-address-view {
   position: relative;
   bottom: 0;
   left: 0;
   /* #ifndef APP-NVUE */
   width: 100%;
   /* #endif */
   /* #ifdef APP-NVUE */
   width: 750rpx;
   /* #endif */
   height: 408rpx;
   background-color: rgba(255, 255, 255, 1);
 }
 .picker-item {
   text-align: center;
   line-height: 70rpx;
   text-overflow: ellipsis;
   font-size: 28rpx;
 }
 </style>

src/pages/address/addAddress.vue

Diff comments View file @ba260b3

 <template>
   <form
     class="wrap"
     @submit="formSubmit"
     @reset="formReset"
   >
     <view class="content">
       <view class="item,name">
         <text class="itemText">姓名</text>
         <input
           placeholder="收货人姓名(真实姓名)"
           placeholder-style="color:#B8B8B8"
           name="name"
           :value="name"
         />
       </view>
       <view class="item,phone">
         <text class="itemText">电话</text>
         <input
           placeholder="手机号"
           type="digit"
           placeholder-style="color:#B8B8B8"
           name="mobile"
           v-model="mobile"
         />
       </view>
       <view class="item,phone">
         <text class="itemText">性别</text>
         <picker
           @change="bindPickerChange"
           :value="index"
           :range="sexArray"
           name="sex"
         >
           <view class="uni-input">{{sexArray[sexIndex]}}</view>
         </picker>
       </view>
       <view class="item,area">
         <text class="itemText">地区</text>
         <view
           class="btn"
           v-if="pickerText===''"
           @tap="openAddres"
         >选择省/市/区</view>
         <view
           class="btn"
           v-else
           @tap="openAddres"
         >{{pickerText}}</view>
         <simple-address
           ref="SimpleAddress"
           :pickerValueDefault="cityPickerValueDefault"
           @onConfirm="onConfirm"
           themeColor="#007AFF"
           name="address"
         ></simple-address>
       </view>
       <view class="item,address">
         <text class="itemText">详细地址</text>
         <input
           placeholder="街道、小区门牌等详细地址"
           name="addDetail"
           :value="addDetial"
         />
       </view>
       <view class="item,check">
         <text class="itemText">设为默认地址</text>
         <switch
           :checked="isDefalutAddress"
           color="#FF6B4A"
           style="transform:scale(0.6)"
           @change="changeDefalutAddress"
           name="isDefault"
         />
       </view>
       <input />
     </view>
     <button
       form-type="submit"
       class="button" v-if="addId">编辑</button>
     <button
       form-type="submit"
       class="button"
       v-else
     >保存并使用</button>
   </form>
 </template>
 <script>
 import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue'
 import store from '@/store'
 export default {
   data () {
     return {
       cityPickerValueDefault: [0, 0, 1],
       pickerText: '',
       isDefalutAddress: true,
       sexArray: ['男', '女'],
       sexIndex: 0,
       flag: 0,
       addId: undefined,
       name: '',
       mobile: '',
       addDetial: '',
       isDefault: 0
     }
   },
   onLoad (option) {
     const { addId } = option
     if (addId) {
       this.addId = addId
       store.dispatch('address/details', {
         add_id: addId
       }).then(() => {
         uni.setNavigationBarTitle({
           title: '编辑地址'
         })
-        const { name, mobile, sex, add_detail: addDetial, default: isDefault } = this.$store.state.address.details
+        const { name, mobile, sex, add_detail: addDetial, default: isDefault,address } = this.$store.state.address.details
         console.log('---', this.$store.state.address.details)
         const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label')
+		console.log(index)
         this.cityPickerValueDefault = index.index
         this.name = name
         this.mobile = Number(mobile)
         this.sexIndex = sex
         this.addDetial = addDetial
         this.isDefalutAddress = !!Number(isDefault)
+		this.pickerText = address
       })
     }
   },
   components: {
     SimpleAddress
   },
   methods: {
     openAddres () {
       this.cityPickerValueDefault = [0, 0, 1]
       this.$refs.SimpleAddress.open()
     },
     onConfirm (e) {
       this.pickerText = e.label
       console.log('lll', e, this.pickerText)
     },
     changeDefalutAddress (e) {
       this.isDefalutAddress = e.target.value
     },
     bindPickerChange (e) {
       console.log('picker发送选择改变，携带值为', e.target.value)
       this.sexIndex = e.target.value
     },
     formValidation (formdata) {
       const { name, mobile, addDetail } = formdata
       this.flag = false
       if (name === '') {
         uni.showModal({
           content: '请输入姓名',
           showCancel: false
         })
         return 0
       }
       if (!(/^1[3456789]\d{9}$/.test(mobile))) {
         uni.showModal({
           content: '请输入正确的手机号',
           showCancel: false
         })
         return 0
       }
       if (this.pickerText === '') {
         uni.showModal({
           content: '请选择收货地区',
           showCancel: false
         })
         return 0
       }
       if (addDetail === '') {
         uni.showModal({
           content: '请输入收货详细地址',
           showCancel: false
         })
         return 0
       }
       this.flag = true
     },
     formSubmit (e) {
       const formdata = e.detail.value
       this.formValidation(formdata)
       const { name, mobile, addDetail, isDefault } = formdata
       if (this.flag === true) {
         const params = {
           sex: this.sexIndex,
           name,
           address: this.pickerText,
           mobile,
           default: isDefault ? 1 : 0,
           add_detail: addDetail,
           longitude: 1,
           latitude: 1
         }
         if (this.addId) {
           params.add_id = this.addId
         }
         store.dispatch('address/edit', params).then(() => {
+			console.log('fanhui')
           uni.navigateBack({
             delta: 1
           })
         })
       }
     }
   }
 }
 </script>
 <style lang="scss">
 .wrap {
   height: 100vh;
   background-color: #f2f2f2;
   font-family: PingFangSC-Regular;
   letter-spacing: -0.23px;
   padding-top: 19rpx;
 }
 .content {
   background-color: #ffffff;
   border-radius: 8px;
   border-radius: 8px;
   padding: 40rpx 56rpx;
   margin-left: 40rpx;
   width: 670rpx;
   box-sizing: border-box;
   .item {
     display: flex;
     justify-content: flex-start;
     font-size: 14px;
     align-items: center;
     height: 112rpx;
     border-bottom: 1rpx solid #e9e9e9;
     .itemText {
       width: 162rpx;
       font-family: PingFangSC-Regular;
       letter-spacing: -0.26px;
     }
     .btn {
       color: #333333 !important;
     }
   }
   .check {
     justify-content: space-between;
   }
 }
 .button {
   position: fixed;
   bottom: 0;
   left: 0;
   height: 112rpx;
   width: 100%;
   background: #ff6b4a;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   color: #ffffff;
   letter-spacing: -0.3px;
 }
 </style>

src/pages/address/addressList.vue

Diff comments View file @ba260b3

 <template>
   <view class="content">
     <view
       v-if="addressList.length !== 0"
       class="list"
     >
       <view
         v-for="(item, index) in addressList"
         :key="index"
         class="order-user"
         @tap="toOrder(item.add_id)"
       >
         <view class="order-user-head">
           <view class="name">
             <view
               v-if="item.default === '1'"
               class="default"
             ><text>默认</text></view>{{item.name}}
           </view>
           <text class="mobile">{{item.mobile}}</text>
         </view>
         <view class="order-user-body">
           <image src="../../static/myorder-paying-location.png"></image>
           <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text>
         </view>
         <image
-          @tap="toEditAddress(item.add_id)"
+          @click.stop="toEditAddress(item.add_id)"
           v-if="item.default === '1'"
           class="arrow"
           src="../../static/right.png"
         ></image>
         <image
-          @tap="toEditAddress(item.add_id)"
+          @click.stop="toEditAddress(item.add_id)"
           v-else
           class="arrow pen"
           src="../../static/icon-pen.png"
         ></image>
       </view>
     </view>
     <view
       v-else
       class="empty"
     >
       暂无收货地址
     </view>
     <button @tap="toAddAddress" class="add">新建收货地址</button>
   </view>
 </template>
 <script>
 import store from '@/store'
 export default {
   data () {
     return {}
   },
   computed: {
     addressList () {
       return this.$store.state.address.list
     }
   },
   onLoad ({ edit }) {
     if (edit) {
       this.edit = true
     }
     store.dispatch('address/list')
   },
+  onShow() {
+    store.dispatch('address/list')
+  },
   methods: {
     toAddAddress() {
       console.log('aaaaa-a')
       uni.navigateTo({
         url: 'addAddress',
         fail: (error) => {
           console.error('跳转出现错误', error)
         }
       })
     },
     toEditAddress (addId) {
       console.log('addId', addId)
       uni.navigateTo({
         url: `addAddress?addId=${addId}`,
         fail: (error) => {
           console.error('跳转出现错误', error)
         }
       })
     },
     toOrder (addId) {
       if (this.edit) {
-        uni.navigateTo({
+		  let pages = getCurrentPages();
-          url: `../confirmOrder/confirmOrder?addressId=${addId}`,
+		  let prevPage = pages[pages.length - 2]; //上一个页面
-          fail: (error) => {
+		  const addressId=addId
-            console.error('跳转出现错误', error)
+		  // console.log(addressId)
-          }
+		  prevPage.onShow(addressId);
-        })
+		  uni.navigateBack();
+        // uni.navigateTo({
+        //   url: `../confirmOrder/confirmOrder?addressId=${addId}`,
+        //   fail: (error) => {
+        //     console.error('跳转出现错误', error)
+        //   }
+        // })
       }
     }
   }
 }
 </script>
 <style lang="scss">
 .content {
   min-height: 100vh;
   background-color: #f2f2f2;
   padding-top: 20rpx;
   padding-bottom: 112rpx;
   .order-user {
     width: 670rpx;
     height: 228rpx;
     background: #ffffff;
     border-radius: 14rpx;
     margin: 0 auto;
     margin-bottom: 20rpx;
     position: relative;
     .order-user-head {
       display: flex;
       height: 108rpx;
       width: 100%;
       align-items: center;
-      margin-left: 126rpx;
+      padding-left: 126rpx;
+	  box-sizing: border-box;
       .name {
         display: flex;
         justify-content: space-between;
         font-size: 14px;
         color: #333333;
         letter-spacing: -0.26px;
         margin-right: 20rpx;
         .default {
           height: 40rpx;
           width: 80rpx;
           background-color: #4a90e2;
           border-radius: 13px;
           border-radius: 13px;
           text-align: center;
           margin-right: 20rpx;
           text {
             display: flex;
             justify-content: center;
             align-items: center;
             font-size: 12px;
             color: #ffffff;
             letter-spacing: -0.23px;
           }
         }
       }
       .mobile {
         font-size: 14px;
         color: #999999;
         letter-spacing: -0.26px;
       }
     }
     .order-user-body {
       display: flex;
       width: 100%;
       image {
         width: 24px;
         height: 26px;
         margin: 12rpx 32rpx 0 40rpx;
       }
       .address {
         font-weight: bold;
         font-size: 14px;
         color: #333333;
         letter-spacing: -0.26px;
       }
     }
     .arrow {
       width: 12px;
       height: 12px;
       position: absolute;
       right: 40rpx;
       bottom: 104rpx;
     }
   }
   .empty {
     color: #666;
     font-size: 16px;
     text-align: center;
     padding-top: 30vh;
   }
   .add {
     position: fixed;
     bottom: 0;
     left: 0;
     height: 112rpx;
     width: 100%;
     background-color: #ff6b4a;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     color: #ffffff;
     letter-spacing: -0.3px;
   }
 }
 </style>

src/pages/confirmOrder/confirmOrder.vue

Diff comments View file @ba260b3

 <template>
   <view class="wrap">
     <view></view>
     <view
       class="addAddress"
       @tap="toaddAddress"
       v-if="this.showAddress"
     >
       <view class="addIcon">
         <image
           src="../../static/add.png"
           mode="aspectFill"
         ></image>
       </view>
       <view class="addressText">{{addAddress}}</view>
       <image
         src="../../static/right.png"
         mode="aspectFill"
       ></image>
     </view>
     <view
       v-else
       @tap="toaddAddress"
       class="list order-user"
     >
       <view class="order-user-head">
         <view class="name">
           <view
             v-if="addressInfo.default === '1'"
             class="default"
           ><text>默认</text></view>{{addressInfo.name}}
         </view>
         <text class="mobile">{{addressInfo.mobile}}</text>
       </view>
       <view class="order-user-body">
         <image src="../../static/myorder-paying-location.png"></image>
         <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
       </view>
       <image
         class="arrow"
         src="../../static/right.png"
         mode="aspectFill"
       ></image>
     </view>
     <view class="content">
       <view class="orderInfo">
         <view class="title">
           <image
             src="../../static/store.png"
             mode="aspectFill"
             style="width: 40rpx;height: 40rpx;"
           ></image>
           <text>非常戴镜</text>
         </view>
         <view class="infoBox">
           <view class="infoTop">
             <image
               :src="goodInfo.img_index_url"
               mode="aspectFill"
             ></image>
             <view class="infoRight">
               <text class="goodName">{{goodInfo.p_name}}</text>
               <text class="remarks">支持7天无理由退货 顺丰发货</text>
               <view class="priceBox">
                 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
                     ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
                   </text></view>
                 <view class="counter">
                   <view
                     class="btn"
                     disabled="this.disabled"
                     type="default"
                     @click="counter(false)"
                   >-</view>
                   <text>{{count}}</text>
                   <view
                     class="btn"
                     type="default"
                     @click="counter(true)"
                   >+</view>
                 </view>
               </view>
             </view>
           </view>
           <view class="infoBottom">
             <view class="norm">规格 <text>
                 <!-- 长度超出变省略号未做 -->
                 <block
                   v-for="(item, index) in current"
                   :key="index"
                 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
                 </block>
               </text></view>
             <view class="shippingMethod">使用人 <text>
                 {{name}}
               </text></view>
             <view class="shippingMethod">配送方式 <text>快递</text></view>
             <view class="message">买家留言
               <input
                 type="text"
                 :value="note"
                 placeholder="建议提前协商(50字以内)"
               />
             </view>
           </view>
         </view>
       </view>
       <view class="payWay">
         <view class="item">
           <text>支付方式</text>
           <view class="itemRight">
             <view class="rightText">
               <view class="choosePayWay">
                 <image
                   src="../../static/chat_logo.png"
                   mode="aspectFill"
                 ></image>
                 <text>微信支付</text>
               </view>
               <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
             </view>
             <!-- <image
               src="../../static/right.png"
               mode="aspectFill"
             ></image> -->
           </view>
         </view>
         <!-- <view class="item">
           <text>优惠券</text>
           <view class="itemRight">
             <view class="rightText">
               <view class="chooseOffers">
                 <text>-￥70.00</text>
               </view>
               <view class="preferentialWay">最大优惠</view>
             </view>
             <image
               src="../../static/right.png"
               mode="aspectFill"
             ></image>
           </view>
         </view> -->
         <view class="item">
           <text>运费</text>
           <view class="itemRight">
             <view class="freight">免运费</view>
           </view>
         </view>
         <view class="item">
           <text>合计</text>
           <view class="itemRight">
             <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
           </view>
         </view>
       </view>
       <!--
       <view class="checkBox">
         <checkbox-group>
           <label>
             <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
           </label>
         </checkbox-group>
       </view> -->
     </view>
     <view class="last_zhanwei"></view>
     <view class="footer">
       <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
       <view class="footerRight">
         <view
           class="paybtn"
           @tap="orderBuild"
         >立即支付</view>
       </view>
     </view>
   </view>
 </template>
 <script>
 import store from '@/store'
 import MD5Util from '../../utils/md5'
 export default {
   data() {
     return {
 		name:String,
       addAddress: '添加收货地址',
       count: 1,
       pid: 0,
       disabled: false,
       freight: 0.0,
       showAddress: false,
       note: '',
       addressInfo: {
         address: '',
       },
       // isAnonymous:
     }
   },
-  onLoad({ pid, addressId, isCart ,count,name}) {
+  onShow(addressId) {
+  	// console.log('+-+-*-*-+-+',addressId)
+	if (addressId) {
+	  store
+	    .dispatch('address/details', {
+	      add_id: addressId,
+	    })
+	    .then(({ code, data }) => {
+	      if (code === 1) {
+	        // console.log('code', code, data)
+	        this.showAddress = true
+	        this.addressInfo = data
+	      }
+	    })
+	}
+  },
+  onLoad({ pid, addressId,isCart ,count,name}) {
     this.pid = pid;
 	this.count = count;
 	this.name = name;
     store.dispatch('read/fetch', {
       pid,
     })
 	console.log('++++++++++++'+pid,addressId,isCart,count)
     // 若已经选择地址
     if (addressId) {
       store
         .dispatch('address/details', {
           add_id: addressId,
         })
         .then(({ code, data }) => {
           if (code === 1) {
             console.log('code', code, data)
             this.showAddress = true
             this.addressInfo = data
           }
         })
     } else {
       store.dispatch('address/default').then(({ code, data }) => {
         if (code === 1) {
           console.log('code', code, data)
           this.showAddress = true
           this.addressInfo = data
         }
       })
     }
   },
   computed: {
     goodInfo() {
       console.log('state', this.$store.state.read.goodInfo)
       return this.$store.state.read.goodInfo
     },
     skuInfo() {
       return this.$store.state.order.param.sk_id_arr
     },
     attrList() {
       return this.$store.state.order.param.attrList
     },
     current() {
       return this.$store.state.order.param.current
     },
   },
   methods: {
     counter(isadd) {
       if (isadd) {
         this.count++
       } else {
         this.count <= 1 ? (this.disabled = true) : this.count--
       }
     },
     // 跳转添加地址页面
     toaddAddress() {
       uni.navigateTo({
         url: `../address/addressList?edit=${1}`,
         success: res => {},
         fail: error => {
           console.log('跳转到地址列表页面失败====>', error)
         },
         complete: () => {},
       })
     },
     // 下单
     orderBuild() {
       uni.showLoading({
         title: '支付中',
       })
       console.log('this', this.$store.state)
       const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
       store.dispatch('order/buyNow', {
         pid: skId.pid,
         sk_id: skId.sk_id,
         number: this.count,
         mp_id: mpId,
         address: JSON.stringify(this.addressInfo),
         totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
         liuyan: this.note,
         dir: 1,
       }).then((res) => {
         this.pay(res.data)
       })
     },
     // 支付
     pay(res) {
       console.log('pay', res)
       const { data, exKeyName: keyName } = res
       const uid = uni.getStorageSync('uid')
       const timeStamp = new Date().getTime().toString()
       const nonceStr = 'asfafasfasfasfasf'
       // 支付参数
       const fieldSet = {
         openid: this.$store.state.user.userInfo.openid,
         uid: this.$store.state.user.userInfo.uid,
         shopid: 0,
         payCate: 2020,
         payMoney: Number(this.skuInfo.real_price) * this.count * 100,
         payWoodId: `fcdj-${uid}-${keyName}`,
         payWoodDesc: '在【非常戴镜】的微信付款凭证',
         nonceStr,
         signType: 'MD5',
         app_uid: 2020,
         timeStamp,
         keyname: keyName,
         billInfo: JSON.stringify(data),
       }
       // 请求后台支付接口
       store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
         if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
           const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
           const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
           // 微信支付接口
           uni.requestPayment({
             appId: data.appid,
             timeStamp,
             nonceStr,
             total_fee: Number(this.skuInfo.real_price) * this.count * 100,
             package: `prepay_id=${data.prepay_id}`,
             signType: 'MD5',
             paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
             success: (res) => {
               // 支付成功
               uni.showModal({
                 content: '支付成功',
                 showCancel: false,
               })
               // 跳转订单详情页->状态 待收货
               uni.reLaunch({
                 url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&isPay=1`,
               })
             },
             fail: (res) => {
               // 支付失败
               uni.showModal({
                 content: '支付失败',
                 showCancel: false,
               })
               // 跳转订单详情页->状态 待付款
               uni.reLaunch({
                 url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&isPay=1`,
               })
             },
             complete: () => {
               uni.hideLoading()
             },
           })
         } else {
           uni.showModal({
             content: '支付失败',
             showCancel: false,
           })
           console.log('支付失败')
           uni.hideLoading()
         }
       })
     },
   },
 }
 </script>
 <style lang="scss">
 .wrap {
   height: 100vh;
   background-color: #f2f2f2;
   font-family: PingFangSC-Regular;
   letter-spacing: -0.23px;
   position: absolute;
 }
 .addAddress {
   background-color: #ffffff;
   box-sizing: border-box;
   height: 124rpx;
   width: 100%;
   display: flex;
   align-items: center;
   padding: 0 40rpx;
   .addIcon {
     background-color: #f2f2f2;
     height: 56rpx;
     width: 60rpx;
     border-radius: 4rpx;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 40rpx;
   }
   image {
     height: 28rpx;
     width: 30rpx;
   }
   .addressText {
     font-size: 28rpx;
     color: #333333;
     margin-right: 364rpx;
   }
 }
 .content {
   background-color: #f2f2f2;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 40rpx;
   box-sizing: border-box;
   .orderInfo {
     width: 670rpx;
     min-height: 488rpx;
     background-color: #ffffff;
     border-radius: 20rpx;
     box-sizing: border-box;
     padding: 0 40rpx 40rpx 40rpx;
     .title {
       display: flex;
       align-items: center;
       font-size: 28rpx;
       color: #333333;
       height: 60rpx;
       line-height: 40rpx;
       padding: 10rpx 10rpx 10rpx 0rpx;
       image {
         margin-right: 20rpx;
       }
     }
     .infoBox {
       margin-top: 42rpx;
       .infoTop {
         display: flex;
         flex-direction: row;
         image {
           height: 188rpx;
           width: 188rpx;
           margin-right: 24rpx;
         }
         .infoRight {
           width: 374rpx;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           justify-content: space-between;
           .goodName {
             font-size: 28rpx;
             color: #333333;
           }
           .remarks {
             font-size: 20rpx;
             color: #999999;
           }
           .priceBox {
             display: flex;
             justify-content: space-between;
             align-items: center;
             width: 100%;
             .price {
               color: #ff6b4a;
               font-size: 28rpx;
             }
             .originCost {
               text-decoration: line-through;
               color: #999999;
               font-size: 20rpx;
             }
             .counter {
               display: flex;
               flex-direction: row;
               justify-content: space-between;
               font-size: 28rpx;
               color: #333333;
               width: 122rpx;
               .btn {
                 display: flex;
                 justify-content: center;
                 line-height: 32rpx;
                 height: 32rpx;
                 width: 32rpx;
                 background-color: #f2f2f2;
                 color: #cfcfcf;
               }
             }
           }
         }
       }
       .infoBottom {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         font-size: 24rpx;
         color: #333333;
         text {
           color: #999999;
           margin-left: 20rpx;
         }
         .norm {
           margin-top: 28rpx;
         }
         .shippingMethod {
           margin-top: 12rpx;
         }
         .message {
           display: flex;
           flex-direction: row;
           align-items: center;
           margin-top: 18rpx;
           input {
             margin-left: 20rpx;
             width: 75%;
           }
         }
       }
     }
   }
   .payWay {
     height: 464rpx;
     width: 670rpx;
     background-color: #ffffff;
     color: #333333;
     font-size: 24rpx;
     border-radius: 20rpx;
     box-sizing: border-box;
     padding: 0 52rpx 0rpx 40rpx;
     margin-top: 20rpx;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     .item {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       height: 115rpx;
       .itemRight {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         image {
           height: 24rpx;
           width: 12rpx;
         }
         .rightText {
           margin-right: 20rpx;
           text-align: right;
           .choosePayWay {
             display: flex;
             align-items: center;
             text {
               color: #333333;
             }
             image {
               height: 36rpx;
               width: 40rpx;
               margin-right: 8px;
             }
           }
           .randomSubstraction {
             color: #ff6b4a;
           }
           .preferentialWay {
             color: #999999;
           }
         }
         .freight,
         .total {
           margin-right: 32rpx;
         }
         text {
           color: #ff6b4a;
         }
       }
     }
   }
   // .checkBox {
   //   height: 58rpx;
   //   line-height: 58rpx;
   //   width: 100%;
   //   margin-top: 36rpx;
   //   margin-left: 40rpx;
   //   font-size: 12px;
   //   color: #999999;
   // }
 }
 .footer {
   height: 112rpx;
   width: 100%;
   background-color: #fff;
   font-size: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   bottom: 0;
   .footerLeft {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50%;
     color: #333333;
     text {
       color: #ff6b4a;
     }
   }
   .footerRight {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     width: 50%;
     margin-right: 26rpx;
     .paybtn {
       display: flex;
       justify-content: center;
       align-items: center;
       background: #ff6b4a;
       border-radius: 20px;
       border-radius: 20px;
       color: #ffffff;
       width: 204rpx;
       height: 80rpx;
     }
   }
 }
 // 地址信息样式
 .order-user {
   width: 670rpx;
   height: 228rpx;
   background: #ffffff;
   border-radius: 14rpx;
   margin: 0 auto;
   margin-top: 20rpx;
   position: relative;
   .order-user-head {
     display: flex;
     height: 108rpx;
     width: 100%;
     align-items: center;
     padding-left: 126rpx;
 	box-sizing: border-box;
     .name {
       display: flex;
       justify-content: space-between;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       margin-right: 20rpx;
       .default {
         height: 40rpx;
         width: 80rpx;
         background-color: #4a90e2;
         border-radius: 13px;
         border-radius: 13px;
         text-align: center;
         margin-right: 20rpx;
         text {
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 12px;
           color: #ffffff;
           letter-spacing: -0.23px;
         }
       }
     }
     .mobile {
       font-size: 14px;
       color: #999999;
       letter-spacing: -0.26px;
     }
   }
   .order-user-body {
     display: flex;
     width: 100%;
     image {
       width: 24px;
       height: 28px;
       margin: 12rpx 32rpx 0 40rpx;
     }
     .address {
       font-weight: bold;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
     }
   }
   .arrow {
     width: 12px;
     height: 12px;
     position: absolute;
     right: 40rpx;
     bottom: 104rpx;
   }
 }
 .last_zhanwei{
   background: #f2f2f2;
   height: 60px;
 }
 </style>

src/pages/frameDetail/components/BottomSheet.vue

Diff comments View file @ba260b3

 <template>
 	<view class="content">
 		<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"    @touchmove.stop.prevent="moveHandle"  @click="closeSheet()">
 			<scroll-view scroll-y="true"  class="sheetView"   :class="{sheetView_active:isShowBottom}"   @click.stop="stopEvent()" >
 				<view class="content">
 				  <view class="goodInfo">
 				    <view class="imageWrap">
 				      <image
 				        :src="goodInfo.img_index_url"
 				        mode="aspectFill"
 				        style="width: 188rpx;height: 168rpx;"
 				      ></image>
 				    </view>
 				    <view class="infoRight">
 				      <text class="goodName">{{goodInfo.p_name}}</text>
 				      <text class="remarks">支持7天无理由退货  顺丰发货</text>
 				      <view class="priceBox">
 				        <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view>
 				        <text>(限购{{maxCount}}副)</text>
 				        <view class="counter">
 				          <view
 				            class="btn"
 				            disabled="this.addDisabled"
 				            type="default"
 				            @click="counter(false)"
 				          >-</view>
 				          <text>{{count}}</text>
 				          <view
 				            class="btn"
 				            disabled="this.desDisabled"
 				            type="default"
 				            @click="counter(true)"
 				          >+</view>
 				        </view>
 				      </view>
 				    </view>
 				  </view>
 				  <view class="peopleChoose">
 					  <view class="title">选择使用人</view>
 					  <view class="loveList">
 					  	<view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
 				                @click="onClickLoveItem(index,item.name)">
 					  		{{item.name}}
 					  	</view>
 					  </view>
 				  </view>
 				  <view class="goods-data">
 				    <view class="opCollapse">
 				      <view class="body">
 				        <template v-if="opIsOpen">
 				    <view class="goods-form">
 				      <view class="p1">
 				        <image class="image2" src="../../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
 				        填写验光数据
 				      </view>
 				      <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
 				      <view class="picker">
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="pd">验光单取名:</text>
 				          </view>
 				          <input type="text" @blur="handleInput" class="input"
 				          placeholder="请输入名称" maxlength="20" :value="name" />
 				        </view>
 				      </view>
 				      <view class="picker" >
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="p11">{{pickerInfoList[0].nameC}}</text>
 				            <text class="p12">{{pickerInfoList[0].nameE}}</text>
 				          </view>
 				          <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 				          <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
 				          <picker  @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
 				            <view class="p14">
 				            {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
 				            <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				          <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 				          <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
 				          <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
 				            <view class="p14">
 				            {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
 				            <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				        </view>
 				      </view>
 				      <view class="picker" >
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="p11">{{pickerInfoList[1].nameC}}</text>
 				            <text class="p12">{{pickerInfoList[1].nameE}}</text>
 				          </view>
 				          <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 				          <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
 				          <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
 				            <view class="p14">
 				              {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
 				              <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				          <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 				          <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
 				          <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
 				            <view class="p14">
 				              {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
 				              <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				        </view>
 				      </view>
 				      <view class="picker" >
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="p11">{{pickerInfoList[2].nameC}}</text>
 				            <text class="p12">{{pickerInfoList[2].nameE}}</text>
 				          </view>
 				          <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
 				          <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
 				            <view class="p14">
 				              {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
 				              <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				          </picker>
 				          <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
 				          <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
 				          <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
 				            <view class="p14">
 				              {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
 				              <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				            <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
 				          </picker>
 				        </view>
 				      </view>
 				      <view class="picker">
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="pd">瞳距:</text>
 				          </view>
 				          <input type="digit" @change="handleInputPd" class="input"
 				          placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
 				        </view>
 				      </view>
 				      <view class="picker" >
 				        <view class="picker-choice">
 				          <view class="choice-left">
 				            <text class="p11">{{pickerInfoList[3].nameC}}</text>
 				          </view>
 				          <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
 				          <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
 				            <view class="p14" style="width: 30px;">
 				              {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
 				              <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				          </picker>
 				          <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
 				          <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
 				            <view class="p14" style="width: 30px;">
 				              {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
 				              <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				          </picker>
 				          <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
 				          <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
 				            <view class="p14" style="width: 30px;">
 				              {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
 				              <image src="../../../static/detail-tabicon.png" ></image>
 				            </view>
 				          </picker>
 				        </view>
 				      </view>
 				      <view class="confirm">
 				        <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
 				        <text>确认以上输入信息来源于我的验光数据!</text>
 				      </view>
 				    </view>
 				        </template>
 				        <template v-else>
 				          <view
 				            v-for="item in pickerInfoList"
 				            :key="item.key"
 				            class="bodyBox"
 				          >
 				            <template v-if="item.nameC==='验光日期'">
 				              <text class="names">{{item.nameC}}</text>
 				              <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
 				              <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
 				              <text>{{item.nameArray3[item.nameIndex2]}}日</text>
 				            </template>
 				            <template v-else>
 				              <template v-if="item.nameC==='度数'">
 				                <text style="display: inline;">*</text>
 				              </template>
 				              <text class="names">{{item.nameC}}</text>
 				              <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
 				              <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
 				            </template>
 				          </view>
 				        </template>
 				      </view>
 				    </view>
 				  </view>
 				  <view class="choose">
 				    <view
 				      class="chooseItem_1_content"
 				      v-for="(item,index) in attrList"
 				      :key="index"
 				    >
 				      <UniCollapse @change="changeShow(index)">
 				        <UniCollapseItem
 				          :open="show[index]"
 				          :title="item.meta_name"
 				          showAnimation=false
 				        >
 				          <view class="chooseItem_1_content">
 				            <view class="itemsWrap">
 				              <view
 				                class="item2"
 				                v-for="(one,i) in item.attr"
 				                :key="i"
 				                :class="{ active2: current[index] === i }"
 				                @click="onClickItem(index, i)"
 				              >{{one.name}}</view>
 				            </view>
 				          </view>
 				        </UniCollapseItem>
 				      </UniCollapse>
 				      <view
 				        class="chooseRes"
 				        v-show="!show[index]"
 				      >* {{attrList[index].attr[current[index]].name}}</view>
 				    </view>
-				    <!-- <view class="chooseItem_1 chooseItem">
-				      <UniCollapse @change="change(1)">
-				        <UniCollapseItem
-				          open=true
-				          title="款式挑选"
-				          showAnimation=false
-				        >
-				          <view
-				            class="chooseRes"
-				            v-show="show[1]"
-				          >* {{chooseRes1}}</view>
-				          <view class="chooseItem_1_content">
-				            <view class="itemsWrap">
-				              <view
-				                class="item1"
-				                v-for="(item,index) in chooseItem1"
-				                :key="index"
-				                :style="item.style"
-				                :class="{ active1: current1 === index }"
-				                @click="onClickItem1(index)"
-				              ></view>
-				            </view>
-				          </view>
-				        </UniCollapseItem>
-				      </UniCollapse>
-				      <view
-				        class="chooseRes"
-				        v-show="show[1]"
-				      >* {{chooseRes1}}</view>
-				    </view>
-				    <view class="chooseItem_2 chooseItem ">
-				      <UniCollapse @change="change(2)">
-				        <UniCollapseItem
-				          open=true
-				          title="直径"
-				          showAnimation=false
-				        >
-				          <view class="chooseItem_1_content">
-				            <view class="itemsWrap">
-				              <view
-				                class="item2"
-				                v-for="(item,index) in chooseItem2"
-				                :key="index"
-				                :class="{ active2: current2 === index }"
-				                @click="onClickItem2(index)"
-				              >{{item.num}}</view>
-				            </view>
-				          </view>
-				        </UniCollapseItem>
-				      </UniCollapse>
-				      <view
-				        class="chooseRes"
-				        v-show="show[2]"
-				      >* {{chooseRes2}}</view>
-				    </view>
-				    <view class="chooseItem_3 chooseItem">
-				      <UniCollapse @change="change(3)">
-				        <UniCollapseItem
-				          open=true
-				          title="度数"
-				          showAnimation=false
-				        >
-				          <view class="chooseItem_1_content">
-				            <view class="itemsWrap">
-				              <view
-				                class="item2"
-				                v-for="(item,index) in chooseItem3"
-				                :key="index"
-				                :class="{ active2: current3 === index }"
-				                @click="onClickItem3(index)"
-				              >{{item}}</view>
-				            </view>
-				          </view>
-				        </UniCollapseItem>
-				      </UniCollapse>
-				      <view
-				        class="chooseRes"
-				        v-show="show[3]"
-				      >* {{chooseRes3}}</view>
-				    </view> -->
 				  </view>
 				  <view
 				    class="button"
 				    @click="toComfirmOrder"
 				  >
 				    立即结算
 				  </view>
 				</view>
 			</scroll-view>
 		</view>
 	</view>
 </template>
 <script>
 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
 import store from '@/store'
 	export default {
 		components: {
 			UniCollapse,
 			UniCollapseItem,
 		},
 		props: {
 			isShowBottom : Boolean,
 			pid: Number,
 			goodInfo:Object
 		},
 		data() {
 		  return {
 			loveCurrent:Number,
 		    count: 1,
 		    // pid: 0,
 		    maxCount: 20,
 		    dataName: '', // 验光数据人员名称
 		    isDataName: false, // 是否是已存在的人员数据
 		    dataConfirm: false, // 已确认所输入验光数据
 		    opIsOpen: true,
 		    addDisabled: false,
 		    desDisabled: false,
-		    // current1: 0,
-		    // current2: 0,
-		    // current3: 0,
 		    current: [],
 		    show: [],
-		    chooseRes1: {
-		      sku_name: 'Miss 黑二代【减龄自然】',
-		      sk_id: '128',
-		    },
 		    checkedData: {},
-		    chooseRes2: '14.0',
-		    chooseRes3: 0,
-		    chooseItem1: [
-		      { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' },
-		      { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
-		      { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
-		      { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
-		      { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
-		      { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
-		    ],
-		    chooseItem2: [
-		      { num: '14.0' },
-		      { num: '14.2' },
-		      { num: '14.4' },
-		      { num: '14.5' },
-		    ],
-		    chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000],
 		    // 度数相关数据
 		    pickerInfoList: [
 		      { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
 		      { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
 		      { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
 		      { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
 		    ],
 		    confirm: false, // 用户是否确认
 		    tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
 		    name: '',
 		    oldname: '', // 用于判读用户是否改变名字
 		    pickerInfoChioce: {
 		      leftSph: '',
 		      rightSph: '',
 		      leftCyl: '',
 		      rightCyl: '',
 		      leftAxi: '',
 		      rightAxi: '',
 		      time: {
 		        year: 0,
 		        month: 0,
 		        day: 0,
 		      },
 		    },
 		    pd: '', // 瞳距
 		    oldpd: '', // 用于判断用户是否改变瞳距
 		    kinds: 1, // kinds=1，提交为新增验光，2为修改
 		    mp_id: Number,
 		  }
 		},
 		computed: {
 			loveList() {
-				console.log('**********loveList',this.$store.state.myLoveList.loveList)
+				// console.log('**********loveList',this.$store.state.myLoveList.loveList)
 				return this.$store.state.myLoveList.loveList || []
 			},
 		  attrList() {
 			  let attrList =  this.$store.state.read.goodInfo.attrList
 			  if(attrList !== undefined){
 				return attrList
 			  }else{
 				  return []
 			  }
 		  },
 		  skuList() {
 		    return this.$store.state.read.goodInfo.skuList
 		  },
 		  mpList() {
 		    return this.$store.state.myLoveList.loveList
 		  },
 		},
 		created() {
 		  const pid = this.pid
 		  console.log('this.goodInfo',this.goodInfo)
-		  store.dispatch('read/fetch', {
-		    pid,
-		  }).then(() => {
 		    const current = []
 		    const show = []
 		    for (let index = 0; index < this.attrList.length; index++) {
 		      current.push(0)
 		      show.push(true)
 		    }
 		    this.current = current
 		    this.show = show
-		  })
 		  	//获取关心的人列表
 		  	store.dispatch('myLoveList/getLoveList', {
 		  		uid: this.$store.state.user.userInfo.uid,
 		  	});
-		  store.dispatch('myLoveList/getLoveList')
 		  // 初始化SPL、CYL、AXI的值
 		  for (let j = 0; j < 3; j++) {
 		    for (let i = -12; i < 6; i++) {
 		      this.pickerInfoList[j].nameArray1.push(i)
 		      this.pickerInfoList[j].nameArray1.push(i + 0.5)
 		      this.pickerInfoList[j].nameArray2.push(i)
 		      this.pickerInfoList[j].nameArray2.push(i + 0.5)
 		      if (i >= -6) {
 		        this.pickerInfoList[j].nameArray1.push(i + 0.25)
 		        this.pickerInfoList[j].nameArray1.push(i + 0.75)
 		        this.pickerInfoList[j].nameArray2.push(i + 0.25)
 		        this.pickerInfoList[j].nameArray2.push(i + 0.75)
 		      }
 		      if (i === 5) {
 		        this.pickerInfoList[j].nameArray1.push(i + 1)
 		        this.pickerInfoList[j].nameArray2.push(i + 1)
 		      }
 		    }
 		  }
 		  // 初始化日期值
 		  for (let i = 1; i < 32; i++) {
 		    this.pickerInfoList[3].nameArray3.push(i)
 		  }
 		  // 初始化年份前后五年
 		  const myDate = new Date()
 		  const nowYear = myDate.getFullYear()
 		  for (let i = 0; i < 5; i++) {
 		    this.pickerInfoList[3].nameArray1.push(nowYear - i)
 		  }
 		},
 		name : "bottomSheet",
 		methods: {
 			onClickLoveItem(index,name){
 				const loveList = this.loveList
 				for (let index = 0; index < loveList.length; index++) {
 				  if (name === loveList[index].name && name!==this.name) {
 				    this.isDataName = true
-				    uni.showModal({
-				      title: '提示',
-				      content: `是否填充已有的"${name}"的数据`,
-				      success: (res) => {
-				        if (res.confirm) {
 				          this.kinds = 2
 				          this.name = loveList[index].name
 				          this.pd = loveList[index].pd
 				          this.mp_id = loveList[index].mp_id
 				          this.oldname = loveList[index].name
 				          this.oldpd = loveList[index].pd
 				          this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
 				          this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
 				          this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
 				          this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
 				          this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
 				          this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
 				          this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
 				          if (loveList[index].in_time.toString().slice(5, 6) === 0) {
 				            this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
 				          } else {
 				            this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
 				          }
 				          if (loveList[index].in_time.toString().slice(8, 9) === 0) {
 				            this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
 				          } else {
 				            this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
 				          }
-				        } else if (res.cancel) {
-				          this.kinds = 2
-				        }
-				      },
-				    })
 				  }
 				}
 					this.name = name;
 					this.loveCurrent = index;
 			},
 			closeSheet(){
 				this.$emit('closeBottom');
 			},
 			stopEvent(){						//@click.stop防止事件冒泡
 			},
 			moveHandle(){						//不让页面滚动
 			},
 			// picker相关功能
 			handleInput(e) {
 			  this.name = e.target.value
 			  this.isDataName = false
 			  console.log('e---->', e)
 			  const mpList = this.mpList
 			  // console.log('mpList===>', mpList)
 			  for (let index = 0; index < mpList.length; index++) {
 			    if (e.detail.value === mpList[index].name) {
 			      this.isDataName = true
 			      uni.showModal({
 			        title: '提示',
 			        content: `是否填充已有的"${e.detail.value}"的数据`,
 			        success: (res) => {
 			          if (res.confirm) {
 			            this.kinds = 2
 			            console.log('args===>', index)
 			            // const mpList=Object.assign({},this.$store.state.mympList.mpList)
 			            console.log('mpList===>', mpList)
 			            this.name = mpList[index].name
 			            this.pd = mpList[index].pd
 			            this.mp_id = mpList[index].mp_id
 			            this.oldname = mpList[index].name
 			            this.oldpd = mpList[index].pd
 			            // 将kinds =2时的值传到该页面
 			            this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
 			            this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
 			            this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
 			            this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
 			            this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
 			            this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
 			            this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
 			            if (mpList[index].in_time.toString().slice(5, 6) === 0) {
 			              this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
 			            } else {
 			              this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
 			            }
 			            if (mpList[index].in_time.toString().slice(8, 9) === 0) {
 			              this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
 			            } else {
 			              this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
 			            }
 			          // this.checkedData = mpList[index]
 			          // console.log('checkedData', this.checkedData)
 			          } else if (res.cancel) {
 			            this.kinds = 2
 			          }
 			        },
 			      })
 			    }
 			  }
 			},
 			handleInputPd(e) {
 			  // 只能输入正浮点数或正数
 			  if (/^\d+(\.\d+)?$/.test(e.target.value)) {
 			    this.pd = e.target.value
 			  } else {
 			    uni.showToast({
 			      title: '请输入有效数据;示例:89',
 			      icon: 'none',
 			      duration: 2000,
 			    })
 			    this.pd = ''
 			  }
 			},
 			changeConfirm() {
 			  this.confirm = !this.confirm
 			},
 			bindPickerChange01: function(e) {
 			  this.pickerInfoList[0].nameIndex1 = e.target.value
 			  this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
 			},
 			bindPickerChange02: function(e) {
 			  this.pickerInfoList[0].nameIndex2 = e.target.value
 			  this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
 			},
 			bindPickerChange11: function(e) {
 			  this.pickerInfoList[1].nameIndex1 = e.target.value
 			  this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
 			},
 			bindPickerChange12: function(e) {
 			  this.pickerInfoList[1].nameIndex2 = e.target.value
 			  this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
 			},
 			bindPickerChange21: function(e) {
 			  this.pickerInfoList[2].nameIndex1 = e.target.value
 			  this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
 			},
 			bindPickerChange22: function(e) {
 			  this.pickerInfoList[2].nameIndex2 = e.target.value
 			  this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
 			},
 			bindPickerChange41: function(e) {
 			  this.pickerInfoList[3].nameIndex1 = e.target.value
 			  this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
 			},
 			bindPickerChange42: function(e) {
 			  this.pickerInfoList[3].nameIndex2 = e.target.value
 			  this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
 			},
 			bindPickerChange43: function(e) {
 			  this.pickerInfoList[3].nameIndex3 = e.target.value
 			  this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
 			},
 			changeShow(num) {
 			  this.show[num] = !this.show[num]
 			  this.$forceUpdate()
 			},
 			onClickItem(index, i) {
 			  if (this.current[index] !== i) {
 			    this.current[index] = i
 			  }
 			  this.$forceUpdate()
 			},
 			counter(isadd) {
 			  if (isadd) {
 			    this.count >= this.maxCount ? this.addDisabled = true : this.count++
 			  } else {
 			    this.count <= 1 ? this.desDisabled = true : this.count--
 			  }
 			},
 			toComfirmOrder() {
 			  // 先处理验光部分的逻辑，如果ok在跳转
 			  let flag = 0
 			  if (this.name === '') {
 			    uni.showToast({
 			      title: '请输入验光单取名',
 			      icon: 'none',
 			      duration: 2000,
 			    })
 			  } else {
 			    if (this.pd === '') {
 			      uni.showToast({
 			        title: '请输入瞳距',
 			        icon: 'none',
 			        duration: 2000,
 			      })
 			    } else {
 			      if (this.kinds === 1) {
 			        // 添加用户验光单
 			        console.log('kinds====>', this.pickerInfoChioce.leftSph)
 			        console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
 			        console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
 			        if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
 			        this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
 			        this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
 			        ) {
 			          uni.showToast({
 			            title: '请输入您的验光数据',
 			            icon: 'none',
 			            duration: 2000,
 			          })
 			        } else {
 			          if (this.confirm) {
 			            store.dispatch('myLoveList/addMylove', {
 			              uid: this.$store.state.user.userInfo.uid,
 			              openid: this.$store.state.user.userInfo.openid,
 			              // mp_name: this.$store.state.user.userInfo.mp_name,
 			              leftSph: this.pickerInfoChioce.leftSph,
 			              rightSph: this.pickerInfoChioce.rightSph,
 			              leftCyl: this.pickerInfoChioce.leftCyl,
 			              rightCyl: this.pickerInfoChioce.rightCyl,
 			              leftAxi: this.pickerInfoChioce.leftAxi,
 			              rightAxi: this.pickerInfoChioce.rightAxi,
 			              pd: this.pd, // 瞳距
 			              mp_name: this.name,
 			            // time: this.pickerInfoChioce.time,
 			            // img_url2: "http://localhost:8087/images/shop_1/1/",
 			            }).then(({ mp_id: mpId }) => {
 			              this.mp_id = mpId
 			            })
 			            flag = 1
 			          } else {
 			            uni.showToast({
 			              title: '请确认您的验光数据',
 			              icon: 'none',
 			              duration: 3000,
 			            })
 			          }
 			        }
 			      }
 			      if (this.kinds === 2) {
 			        if (this.confirm) {
 			          const leftList = ['leftSph', 'leftCyl', 'leftAxi']
 			          const rightList = ['rightSph', 'rightCyl', 'rightAxi']
 			          // let flag=0;
 			          if (this.name !== this.oldname) {
 			            store.dispatch('myLoveList/updateMylove', {
 			              uid: this.$store.state.user.userInfo.uid,
 			              openid: this.$store.state.user.userInfo.openid,
 			              mp_id: this.mp_id,
 			              keyname: 'name',
 			              keyvalue: this.name,
 			            })
 			            flag = 1
 			          }
 			          if (this.pd !== this.oldpd) {
 			            store.dispatch('myLoveList/updateMylove', {
 			              uid: this.$store.state.user.userInfo.uid,
 			              openid: this.$store.state.user.userInfo.openid,
 			              mp_id: this.mp_id,
 			              keyname: 'pd',
 			              keyvalue: this.pd,
 			            })
 			            flag = 1
 			          }
 			          //  先验证是否输入有无空
 			          let q = true
 			          for (let k = 0; k < 3; k++) {
 			            q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
 			            this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
 			          }
 			          if (q) {
 			            for (let j = 0; j < 3; j++) {
 			              if (this.pickerInfoList[j].nameIndex1 !== 0) {
 			                store.dispatch('myLoveList/updateMylove', {
 			                  uid: this.$store.state.user.userInfo.uid,
 			                  openid: this.$store.state.user.userInfo.openid,
 			                  mp_id: this.mp_id,
 			                  keyname: leftList[j],
 			                  keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
 			                })
 			              }
 			              if (this.pickerInfoList[j].nameIndex2 !== 0) {
 			                store.dispatch('myLoveList/updateMylove', {
 			                  uid: this.$store.state.user.userInfo.uid,
 			                  openid: this.$store.state.user.userInfo.openid,
 			                  mp_id: this.mp_id,
 			                  keyname: rightList[j],
 			                  keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
 			                })
 			              }
 			              flag = 1
 			            }
 			          } else {
 			            flag = 0
 			            uni.showToast({
 			              title: '请输入您的验光数据',
 			              icon: 'none',
 			              duration: 2000,
 			            })
 			          }
 			          if (flag !== 0) {
 			            store.dispatch('myLoveList/getLoveList', {
 			              uid: this.$store.state.user.userInfo.uid,
 			            })
 			          }
 			        } else {
 			          uni.showToast({
 			            title: '请确认您的验光数据',
 			            icon: 'none',
 			            duration: 3000,
 			          })
 			        }
 			      }
 			    }
 			  }
 			  if (flag !== 0) {
 			    // 如果数据验证无误，那么更新验光单的数据
 			    store.dispatch('myLoveList/getLoveList', {
 			      uid: this.$store.state.user.userInfo.uid,
 			    })
 			    let i = 0
 			    // 判断出是哪一个sku被选中
 			    for (let index = 0; index < this.current.length; index++) {
 			      console.log('index', index, i, index !== this.current.length - 1)
 			      if (index !== this.current.length - 1) {
 			        // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
 			        i = this.current[index] * this.attrList[1].attr.length
 			      } else {
 			        i += this.current[index]
 			      }
 			    }
 			    // 判断是否其输入的人员数据是否已存在
 			    store.dispatch('order/saveParams', {
 			      sk_id_arr: this.skuList[i],
 			      current: this.current,
 			      mp_id: this.mp_id,
 			      attrList: this.attrList,
 			    })
 			    // 跳转到确认订单页面
 			    uni.navigateTo({
 			      url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
 			    })
 			  }
 			},
 		}
 	}
 </script>
 <style lang="scss">
 	.content {
 	  min-height: 100vh;
 	  background-color: #f2f2f2;
 	  // padding-top: 20rpx;
 	  .goodInfo {
 	    width: 100%;
 	    height: 272rpx;
 	    border-radius: 16rpx;
 	    background-color: #ffffff;
 	    box-sizing: border-box;
 	    padding: 36rpx;
 	    display: flex;
 	    flex-direction: row;
 	    justify-content: flex-start;
 	    .imageWrap {
 	      height: 188rpx;
 	      width: 188rpx;
 	      margin-right: 28rpx;
 	      image {
 	        height: 188rpx;
 	        width: 188rpx;
 	      }
 	    }
 	    .infoRight {
 	      display: flex;
 	      flex-direction: column;
 	      align-items: flex-start;
 	      justify-content: space-between;
 	      .goodName {
 	        font-size: 28rpx;
 	        color: #333333;
 	      }
 	      .remarks {
 	        font-size: 20rpx;
 	        color: #999999;
 	      }
 	      .priceBox {
 	        display: flex;
 	        justify-content: space-between;
 	        align-items: center;
 	        width: 100%;
 	        font-size: 14px;
 	        color: #999999;
 	        .price {
 	          color: #ff6b4a;
 	          font-size: 28rpx;
 	        }
 	        .counter {
 	          display: flex;
 	          flex-direction: row;
 	          justify-content: space-between;
 	          align-items: center;
 	          font-size: 28rpx;
 	          color: #333333;
 	          width: 122rpx;
 	          .btn {
 	            display: flex;
 	            justify-content: center;
 	            line-height: 32rpx;
 	            height: 32rpx;
 	            width: 32rpx;
 	            background-color: #f2f2f2;
 	            color: #cfcfcf;
 	          }
 	        }
 	      }
 	    }
 	  }
 	  .peopleChoose{
 		    width: 100%;
 		    min-height: 200rpx;
 		    border-radius: 16rpx;
 		    background-color: #ffffff;
 		    box-sizing: border-box;
 		    padding: 36rpx;
 			margin: 10px 0;
 		    display: flex;
 		    flex-direction: column;
 		    justify-content: flex-start;
 			align-items: center;
 			.title{
 				font-size: 16px;
 				color: #333333;
 				letter-spacing: -0.3px;
 				text-align: justify;
 				line-height: 24px;
 				margin: 4px 0;
 			}
 			.loveList{
 				display: flex;
 				flex-direction: row;
 				flex-wrap: wrap;
 				justify-content: flex-start;
 				align-items: center;
 				padding-top: 24rpx;
 				width: 100%;
 				.peopleName {
 				  padding: 0 30rpx;
 				  height: 60rpx;
 				  margin: 0 20rpx 20rpx 0;
 				  transition: all 0.3s;
 				  background: #f2f2f2;
 				  border-radius: 2px;
 				  border-radius: 2px;
 				  line-height: 60rpx;
 				  text-align: center;
 				  color: #666666;
 				  font-size: 12px;
 				}
 				.active2 {
 				  background: rgba(255, 107, 74, 0.15);
 				  color: #ff6b4a;
 				}
 			}
 	  }
 	  .goods-data {
 	    width: 100%;
 	    box-sizing: border-box;
 	    padding: 37rpx 40rpx 0 40rpx;
 	    background: #ffffff;
 	    border-radius: 12rpx;
 	    .opCollapse {
 	      width: 100%;
 	      padding-bottom: 28rpx;
 	      margin-top: 7px;
 	      border-bottom: 1px solid #e9e9e9;
 	      .head {
 	        display: flex;
 	        justify-content: space-between;
 	        height: 24px;
 	        // font-family: PingFangSC-Medium;
 	        font-size: 16px;
 	        color: #333333;
 	        letter-spacing: -0.3px;
 	        text-align: justify;
 	        line-height: 24px;
 	        margin-bottom: 18rpx;
 	        .headRighted {
 	          width: 0;
 	          height: 0;
 	          border-left: 4px solid transparent;
 	          border-right: 4px solid transparent;
 	          border-bottom: 4px solid #cfcfcf;
 	          transform: scaleY(-1);
 	          margin-top: 10px;
 	        }
 	        .headMid {
 	          font-size: 10px;
 	          color: #999999;
 	          letter-spacing: -0.19px;
 	          margin-left: -120rpx;
 	        }
 	        .headRight {
 	          width: 0;
 	          height: 0;
 	          border-left: 4px solid transparent;
 	          border-right: 4px solid transparent;
 	          border-bottom: 4px solid #cfcfcf;
 	          margin-top: 10px;
 	        }
 	      }
 	      .body {
 	        font-size: 12px;
 	        color: #666666;
 	        letter-spacing: 0;
 	        .bodyBox {
 	          margin-top: 15px;
 	          .names {
 	            font-size: 12px;
 	            color: #151515;
 	            letter-spacing: 0;
 	            text-align: justify;
 	            line-height: 17px;
 	            margin-left: 5px;
 	            margin-right: 10px;
 	          }
 	          text {
 	            font-size: 12px;
 	            color: #666666;
 	            letter-spacing: 0;
 	            text-align: justify;
 	          }
 	        }
 	      }
 	    .goods-form {
 	      display: flex;
 	      flex-direction: column;
 	      align-items: center;
 	      justify-content: center;
 	      background-color: #fff;
 	        width: 100%;
 	        padding: 40rpx 0;
 	      .p1 {
 	            font-size: 16px;
 	            color: #333333;
 	            letter-spacing: -0.3px;
 	            text-align: justify;
 	            line-height: 24px;
 	            margin: 4px 0;
 	        }
 	        .p2 {
 	            font-size: 12px;
 	            color: #999999;
 	            letter-spacing: -0.23px;
 	            margin-bottom: 32rpx;
 	        }
 	        .image2{
 	            width: 42rpx;
 	            height: 34rpx;
 	        margin-right: 12rpx;
 	        }
 	        .confirm {
 	            display: flex;
 	            align-items: center;
 	            font-size: 12px;
 	            color: #666666;
 	            letter-spacing: -0.23px;
 	            width: 684rpx;
 	            .image1{
 	                margin-right:25rpx;
 	          width: 42rpx;
 	          height: 38rpx;
 	            }
 	        }
 	        .picker{
 	      display: flex;
 	      flex-direction: column;
 	      justify-content: center;
 	      align-items: center;
 	      width: 100%;
 	      .picker-choice{
 	        display: flex;
 	        width: 684rpx;
 	        align-items: center;
 	            margin-bottom: 40rpx;
 	        .input{
 	          border-bottom: 1px solid #CFCFCF;
 	          height: 40rpx;
 	        }
 	        .choice-left{
 	          width: 210rpx;
 	          .pd{
 	            font-size: 14px;
 	            color: #333333;
 	            letter-spacing: -0.26px;
 	            text-align: justify;
 	            line-height: 24px;
 	            margin-right: 44rpx;
 	          }
 	          .p11 {
 	            font-size: 14px;
 	            color: #333333;
 	            letter-spacing: -0.26px;
 	            text-align: justify;
 	            line-height: 24px;
 	            // margin-right: 10px;
 	          }
 	          .p12 {
 	            font-size: 10px;
 	            color: #3F3F3F;
 	            letter-spacing: -0.19px;
 	            text-align: justify;
 	            line-height: 24px;
 	          }
 	        }
 	        .p13 {
 	          font-size: 10px;
 	          color: #999999;
 	          letter-spacing: -0.19px;
 	          margin-right: 10px;
 	        }
 	            .p13-date {
 	                font-size: 10px;
 	          color: #999999;
 	          letter-spacing: -0.19px;
 	          margin-right: 5px;
 	            }
 	        picker{
 	          width: 144rpx;
 	          height: 40rpx;
 	          display: flex;
 	          position: relative;
 	          .p14 {
 	            font-size: 14px;
 	            color: #666666;
 	            letter-spacing: -0.26px;
 	            text-align: center;
 	            width: 124rpx;
 	            border-bottom: 1px solid #CFCFCF;
 	            height: 38rpx;
 	          }
 	          image{
 	            width: 20rpx;
 	            height: 20rpx;
 	            position: absolute;
 	            right: 20rpx;
 	            top: 8rpx;
 	          }
 	        }
 	      }
 	    }
 	    }
 	    }
 	  }
 	  .choose {
 	    width: 100%;
 	    background: #ffffff;
 	    border-radius: 12rpx;
 	    margin-top: 20rpx;
 	    padding: 40rpx 40rpx 112rpx 40rpx;
 	    box-sizing: border-box;
 	    .chooseItem {
 	      width: 100%;
 	      padding-bottom: 32rpx;
 	      border-bottom: 1px solid #e9e9e9;
 	      margin-bottom: 28rpx;
 	    }
 	    .chooseRes {
 	      font-size: 12px;
 	      color: #666666;
 	    }
 	    .itemsWrap {
 	      display: flex;
 	      flex-direction: row;
 	      flex-wrap: wrap;
 	      justify-content: flex-start;
 	      align-items: center;
 	      padding-top: 24rpx;
 	      .item1 {
 	        width: 64rpx;
 	        height: 64rpx;
 	        border-radius: 32rpx;
 	        margin: 0 36rpx 24rpx 0;
 	        transition: all 0.3s;
 	        border: 1px solid #ffffff;
 	      }
 	      .item2 {
 	        // width: 100rpx;
 	        padding: 0 30rpx;
 	        height: 60rpx;
 	        margin: 0 20rpx 20rpx 0;
 	        transition: all 0.3s;
 	        background: #f2f2f2;
 	        border-radius: 2px;
 	        border-radius: 2px;
 	        line-height: 60rpx;
 	        text-align: center;
 	        color: #666666;
 	        font-size: 12px;
 	      }
 	      .active1 {
 	        opacity: 0.7;
 	        border: 1px solid #ff6b4a;
 	      }
 	      .active2 {
 	        background: rgba(255, 107, 74, 0.15);
 	        color: #ff6b4a;
 	      }
 	    }
 	  }
 	  .button {
 	    width: 100%;
 	    height: 112rpx;
 	    background-color: #ff6b4a;
 	    font-size: 16px;
 	    color: #ffffff;
 	    line-height: 112rpx;
 	    text-align: center;
 	    // position: absolute;
 	    bottom: 0;
 	    left: 0;
 	  }
 	}
 	/* sheet弹窗 */
 	.sheet{
 		width: 100%;
 		height: 100%;
 		position: fixed;
 		top: 150%;
 		left: 0upx;
 		bottom: 0upx;
 		right: 0upx;
 		background:rgba(0,0,0,0.3);
 		z-index: 10000;
 	}
 	/* 显示时候的动画默认0.5s */
 	.sheetView{
 		width: 100%;
 		height: 0upx;
 		position: absolute;
 		bottom: 0upx;
 		background: white;
 		z-index: 10001;
 		transition: all 0.5s;
 	}
 	.sheetShow{
 		top:0upx !important;
 	}
 	/* 关闭时的动画，时间自己可以设置0.5s*/
 	.sheeHide{
 		top:120% !important;
 		transition: all 0.5s;
 	}
 	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
 	.sheetView_active{
 		height: 942upx;
 	}
 </style>