会员编辑，新增联调

queenwuli

2020-12-23 ccf6a0bc014d86290efffc55cbea9cf3dc860d56

 hive-app/pages/member/editMember.vue

@@ -1,20 +1,24 @@
<template>
   <view class="container">
      <form @submit="add">
      <form @submit="submit" id="list">
         <view class="input-group-row">
            <text class="label">会员姓名<text class="require">*</text></text>
            <input name="account" type="text" value="" placeholder="请填写会员姓名" placeholder-class='placeholder'/>
            <input name="vipName" v-model="formData.vipName" type="text" maxlength="20"  placeholder="请填写会员姓名" placeholder-class='placeholder'/>
         </view>
         <view class="input-group-row">
            <text class="label">会员编号<text class="require">*</text></text>
            <input name="vipNo" v-model="formData.vipNo" type="text" maxlength="10" placeholder="请填写会员编号" placeholder-class='placeholder'/>
         </view>
         <view class="input-group-row">
            <text class="label">手机号码<text class="require">*</text></text>
            <input name="account" type="number" value="" placeholder="请填写手机号码" placeholder-class='placeholder'/>
            <input name="phone" v-model="formData.phone" type="number" maxlength="11" placeholder="请填写手机号码" placeholder-class='placeholder'/>
         </view>
         <view class="input-group-row">
            <text class="label">性别<text class="require">*</text></text>
            <view class="right-text">
               <radio-group @change="sexChange">
                  <label><radio name="sex" value="1" color="#518EFF"  class="radio" checked/>男</label>
                  <label><radio name="sex" value="2" color="#518EFF" class="radio"/>女</label>
               <radio-group name="sex">
                  <label><radio value="男" color="#518EFF"  class="radio" :checked="formData.sex==='男'"/>男</label>
                  <label><radio value="女" color="#518EFF" class="radio" :checked="formData.sex==='女'"/>女</label>
               </radio-group>
            </view>
         </view>
@@ -22,27 +26,26 @@
            <text class="label">生日</text>
            <view class="right-text">
               <picker mode="date" @change="dateChange" :end="endDate">
                  <view>{{birthday}}</view>
                  <text :class="formData.birthday?'':'gray'">{{formData.birthday?formData.birthday:'请选择生日'}}</text>
               </picker>
            </view>
         </view>
         <view class="input-group-row">
            <text class="label">省市区</text>
            <view @click="openAddres" class="right-text">
               <text v-if="regionText">{{regionText}}</text>
               <text v-else class="gray">请选择省市区</text>
               <text :class="formData.areas?'':'gray'">{{formData.areas?formData.areas:'请选择省市区'}}</text>
            </view>
         </view>
         <view class="input-group-row">
            <text class="label">详细地址</text>
            <input name="account" type="text" value="" placeholder="请填写详细地址" placeholder-class='placeholder'/>
            <input name="address" v-model="formData.address" type="text" value="" placeholder="请填写详细地址" placeholder-class='placeholder'/>
         </view>
         <view class="input-group-row">
            <text class="label">到店途径</text>
            <view class="right-text">
               <picker mode="selector" :range="wayList" @change="wayChange">
               <picker mode="selector" range-key="value" :range="arrivalWayList" @change="wayChange">
                  <view>
                     {{way}}
                     <text :class="formData.arrivalWay?'':'gray'">{{formData.arrivalWay?formData.arrivalWay:'请选择到店途径'}}</text>
                     <text class="iconfont iconjiantouarrow486 gray"></text>
                  </view>
               </picker>
@@ -51,9 +54,9 @@
         <view class="input-group-row">
            <text class="label">推荐人</text>
            <view class="right-text">
               <picker mode="selector" :range="referrerList" @change="referrerChange">
               <picker mode="selector" range-key="vipName" :range="referrerList" @change="referrerChange">
                  <view>
                     {{referrer}}
                     <text :class="recommendName?'':'gray'">{{recommendName?recommendName:'请选择推荐人'}}</text>
                     <text class="iconfont iconjiantouarrow486 gray"></text>
                  </view>
               </picker>
@@ -61,16 +64,15 @@
         </view>
         <view class="input-group-row">
            <text class="label">备注</text>
            <input name="account" type="text" value="" placeholder="请填写备注" placeholder-class='placeholder'/>
            <input name="remark" v-model="formData.remark" maxlength="60" type="text" placeholder="请填写备注" placeholder-class='placeholder'/>
         </view>
         <view class="input-group-row">
            <text class="label">标签</text>
            <view class="right-text">
               <text class="tag">大方<text class="iconfont iconguanbi gray"></text></text>
               <text class="tag">大方<text class="iconfont iconguanbi gray"></text></text>
               <!-- <text class="tag">大方<text class="iconfont iconguanbi gray"></text></text> -->
            </view>
         </view>
         <button type="submit" class="blue-btn sticky-footer">保存</button>
         <button form-type="submit" :disabled="isDisabled" class="blue-btn sticky-footer">保存</button>
      </form>
      <region ref="simpleAddress" @onConfirm="addressChange" themeColor="#518EFF" cancelColor="#8c9fad"></region>
   </view>
@@ -84,20 +86,36 @@
      },
      data(){
         return {
            birthday: '1990-01-02',
            regionText: '',
            wayList: ['美团','户外广告'],
            way: '美团',
            referrerList: ['张三'],
            referrer: '张三'
            formData: {
               vipName: '',
               vipNo: '',
               phone: '',
               sex: '女',
               birthday: '',
               areas: '',
               address: '',
               arrivalWay: '',
               recommendId: '',
               remark: '',
               labels: []
            },
            id: '',
            isDisabled: false,
            arrivalWayList: [],
            referrerList: [],
            recommendName: ''
         }
      },
      onLoad(options) {
         if(options.id){
            this.id = options.id;
            uni.setNavigationBarTitle({
               title: '编辑会员'
            });
            this.getMemberInfo()
         }
         this.loadArrivalWayList();
         this.loadReferrerList();
      },
      computed: {
         endDate() {
@@ -105,15 +123,48 @@
         }
      },
      methods:{
         add(){
				
         // 加载到店途径列表
         loadArrivalWayList(){
            this.$httpUtils.request('/api/vip/findArrivalWayList').then((res) => {
               if(res.status == 200){
                  this.arrivalWayList = res.rows;
               }
            })
         },
         sexChange(e){
            console.log(e)
         // 加载推荐人列表
         loadReferrerList(){
            this.$httpUtils.request('/api/vip/findAllVipInfo').then((res) => {
               if(res.status == 200){
                  this.referrerList = res.rows;
                  if(this.id){
                     for(var i in this.referrerList){
                        if(this.referrerList[i].id === this.formData.recommendId){
                           this.recommendName = this.referrerList[i].vipName;
                           break;
                        }
                     }
                  }
               }
            })
         },
         // 查询会员详情
         getMemberInfo(){
            this.$httpUtils.request('/api/vip/findVipInfoDetailById/'+this.id).then((res) => {
               if(res.status == 200){
                  const result = res.mapInfo.vipInfo;
                  const {province, city, area} = result;
                  for(var key in this.formData){
                     this.formData[key] = result[key];
                  }
                  let arr = [province, city, area].filter((item) => {
                     return item
                  })
                  this.formData.areas = arr.join('-')
               }
            })
         },
         dateChange(e){
            this.birthday = e.detail.value;
            console.log(e)
            this.formData.birthday = e.detail.value;
         },
         getDate(type) {
            const date = new Date();
@@ -132,14 +183,56 @@
            this.$refs.simpleAddress.open();
         },
         addressChange(e){
            this.regionText = e.labelArr.join(' ');
            this.formData.areas = e.labelArr.join('-');
         },
         wayChange(e){
            this.way = this.wayList[e.detail.value];
            this.formData.arrivalWay = this.arrivalWayList[e.detail.value].value;
         },
         referrerChange(e){
            this.referrer = this.referrerList[e.detail.value];
         }
            this.formData.recommendId = this.referrerList[e.detail.value].id;
            this.recommendName = this.referrerList[e.detail.value].vipName;
         },
         valid(){
            const {vipName, vipNo, phone, sex} = this.formData;
            if(!vipName){
               this.$toast.info('请填写会员姓名');
               return false;
            }
            if(!vipNo){
               this.$toast.info('请填写会员编号');
               return false;
            }
            if(!this.$utils.checkPhone(phone)){
               this.$toast.info('请填写正确的手机号码');
               return false;
            }
            if(!sex){
               this.$toast.info('请选择性别');
               return false;
            }
         },
         submit(e){
            let url = '';
            if(this.valid() === false){
               return;
            }
            this.isDisabled = true;
            if(this.id){
               url = '/api/vip/modifyVip';
               Object.assign(this.formData, {vipId: this.id})
            } else {
               url = '/api/vip/addVip';
            }
            this.$httpUtils.request(url, this.formData, 'POST').then((res) => {
               if(res.status == 200){
                  uni.navigateBack()
               }
               this.$toast.info(res.info);
               this.isDisabled = false;
            }).catch(() => {
               this.isDisabled = false;
            })
         },
      }
   }
</script>