提交

MrShi

10 小时以前 8250384a6b443df940062f99064127d77e72c1ec

 mini-program/pages/new-address/new-address.vue

@@ -13,10 +13,10 @@
               <input type="text" placeholder="请输入联系电话" v-model="form.phone" />
            </view>
         </view>
         <view class="list-item">
         <view class="list-item" @click="show = true">
            <view class="list-item-label">所在地区</view>
            <view class="list-item-sele">
               <text>请选择</text>
               <text :style="{ color: form.areaName ? '#333333' : '' }">{{form.areaName ? form.areaName : '请选择'}}</text>
               <u-icon name="arrow-right" color="#B2B2B2" size="16"></u-icon>
            </view>
         </view>
@@ -30,11 +30,34 @@
            <view class="list-item-label">设为默认地址</view>
            <u-switch v-model="form.isDefault" :activeValue="1" :inactiveValue="0"></u-switch>
         </view>
         <view class="box-footer">
            <view class="btn1">删除</view>
            <view class="btn2">保存</view>
         <view class="box-footer" v-if="type === 1">
            <view class="btn2" @click="submit">保存</view>
         </view>
         <view class="box-footer" v-if="type === 2">
            <view class="btn1" @click="show1 = true">删除</view>
            <view class="btn2" @click="submit">保存</view>
         </view>
      </view>
      <!-- 省市区 -->
      <u-picker
         :show="show"
         v-if="areaList && areaList.length > 0"
         ref="uPicker"
         confirmColor="#ff2c36"
         keyName="text"
         :columns="columns"
         @confirm="confirm"
         @change="changeHandler"
         @cancel="show = false" />
      <u-modal
         :show="show1"
         title="系统提示"
         content='确认删除当前收货地址吗?'
         confirmColor="#004096"
         :showConfirmButton="true"
         :showCancelButton="true"
         @confirm="dele"
         @cancel="show1 = false" />
   </view>
</template>

@@ -42,8 +65,152 @@
   export default {
      data() {
         return {
            value: 0
            show: false,
            show1: false,
            areaList: [],
            columns: [],
				
            type: 1,
				
            form: {
               id: null,
               name: '',
               phone: '',
               addr: '',
               areaId: '',
               areaName: '',
               isDefault: 1
            }
         };
      },
      onLoad() {
         const item = uni.getStorageSync('addr');
         if (item) {
            this.type = 2
            uni.setNavigationBarTitle({
               title: '编辑收货地址'
            });
            this.form.id = item.id
            this.form.name = item.name
            this.form.phone = item.phone
            this.form.addr = item.addr
            this.form.areaId = item.areaId
            this.form.areaName = item.areaDetail
            this.form.isDefault = Number(item.isDefault)
            uni.removeStorageSync('addr');
         }
         this.getArea()
      },
      methods: {
         dele() {
            this.$u.api.deleteAddr({ id: this.form.id })
               .then(res => {
                  if (res.code === 200) {
                     uni.showToast({ title: '删除成功', icon: 'success', mask: true, duration: 1500 })
                     setTimeout(() => {
                        uni.navigateBack({
                           delta: 1
                        });
                     }, 1500)
                  }
               })
         },
         submit() {
            if (this.type === 1) {
               this.$u.api.createAddr(this.form)
                  .then(res => {
                     if (res.code === 200) {
                        uni.navigateBack({
                           delta: 1
                        });
                     }
                  })
            } else {
               this.$u.api.updateAddr(this.form)
                  .then(res => {
                     if (res.code === 200) {
                        uni.navigateBack({
                           delta: 1
                        });
                     }
                  })
            }
         },
         // 省市区确定
         confirm(e) {
            this.form.areaId = e.value[e.value.length - 1].id
            this.form.areaName = e.value[0].text + e.value[1].text + e.value[2].text
            this.show = false
         },
         changeHandler(e) {
            const {
               columnIndex,
               value,
               indexs,
               values, // values为当前变化列的数组内容
               index,
               // 微信小程序无法将picker实例传出来，只能通过ref操作
               picker = this.$refs.uPicker
            } = e
            if (columnIndex === 0) {
               // 市
               let city = this.areaList[indexs[0]].childList.map(item => {
                  return {
                     id: item.id,
                     text: item.name
                  }
               })
               // 区
               let qu = this.areaList[indexs[0]].childList[0].childList.map(item => {
                  return {
                     id: item.id,
                     text: item.name
                  }
               })
               picker.setColumnValues(1, city)
               picker.setColumnValues(2, qu)
            } else if (columnIndex === 1) {
               // 区
               let qu = this.areaList[indexs[0]].childList[indexs[1]].childList.map(item => {
                  return {
                     id: item.id,
                     text: item.name
                  }
               })
               picker.setColumnValues(2, qu)
            }
         },
         getArea() {
            this.$u.api.treeList({
               type: 0,
               flag: 1
            }).then(res => {
               if (res.code === 200) {
                  this.areaList = res.data
                  // 省
                  this.columns[0] = this.areaList.map(item => {
                     return {
                        id: item.id,
                        text: item.name
                     }
                  })
                  // 市
                  this.columns[1] = this.areaList[0].childList.map(item => {
                     return {
                        id: item.id,
                        text: item.name
                     }
                  })
                  // 区
                  this.columns[2] = this.areaList[0].childList[0].childList.map(item => {
                     return {
                        id: item.id,
                        text: item.name
                     }
                  })
               }
            })
         }
      }
   }
</script>
@@ -78,8 +245,8 @@
               border-radius: 44rpx;
               font-weight: 500;
               font-size: 32rpx;
               color: #004096;
               border: 1rpx solid #004096;
               color: #E4001D;
               border: 1rpx solid #E4001D;
               margin-right: 22rpx;
            }
            .btn2 {