From 986d4ab9b38b83162aa013dd7f67011e7e23a73b Mon Sep 17 00:00:00 2001
From: Admin <376654749@qq.com>
Date: Thu, 20 Jan 2022 03:45:57 +0000
Subject: [PATCH] Leung

---
 rc-busness/components/addressInput.vue | 405 +++++++++++++++++++++++++
 1 file changed, 405 insertions(+)
 create mode 100644 rc-busness/components/addressInput.vue

diff --git a/rc-busness/components/addressInput.vue b/rc-busness/components/addressInput.vue
new file mode 100644
index 00000000..0d50c831
--- /dev/null
+++ b/rc-busness/components/addressInput.vue
@@ -0,0 +1,405 @@
+<template>
+  <div class="ts-area-picker-container">
+    <input class="ts-area-picker-value-displayer" placeholder="请选择收货地址" @focus="initAddress" v-model="displayValue"></input>
+    <input type="hidden" :value="returnValue">
+
+    <div class="ts-area-picker-desktop" v-if="show">
+      <div class="ts-area-picker-tmp-value">
+        <ul>
+          <li class="active" @click="switchTab(0)">{{ returnValueArr[0]?returnValueArr[0].name:'请选择' }}</li>
+          <li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
+          <li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
+        </ul>
+        <div class="close" @click="hideAddress"></div>
+      </div>
+      <div class="ts-area-picker-values">
+        <ul>
+          <li v-for="(item, index) in curDisplayingCol" :key="item.id" @click="pickValue(item.id,item.name)" v-bind:class="{ active:(returnValueArr[curDisplayingColIndex]?returnValueArr[curDisplayingColIndex].id==item.id:false) }">
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="ts-area-picker-mobile ts-mask" v-if="show">
+      <div class="ts-mask-bg"></div>
+      <van-picker
+          show-toolbar
+          title="选择地区"
+          :columns="columns"
+          value-key="name"
+          @confirm="onConfirm"
+          @cancel="onCancel"
+          @change="onChange"
+          class="ts-area-picker-mobile-component"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props:["defaultValues"],
+  data(){
+    return{
+      displayValue:"",
+      returnValue:"",
+      returnValueArr:[],
+      show:false,
+      columns:[
+        {
+          values:[{id:"001",name:"省份1"},{id:"002",name:"省份2"}],
+          className:'col1'
+        },
+        {
+          values:[{id:"001-001",name:"省份1-城市1"},{id:"001-002",name:"省份1-城市2"},{id:"002-001",name:"省份2-城市1"},{id:"002-002",name:"省份2-城市2"}],
+          className:'col2'
+        },
+        {
+          values:[{id:"001-001-001",name:"省份1-城市1-区1"},{id:"001-002-002",name:"省份1-城市2-区2"},{id:"002-001-001",name:"省份2-城市1-区1"},{id:"002-002-002",name:"省份2-城市2-区2"}],
+          className:'col3'
+        }
+      ],
+      curDisplayingColIndex:0,
+      curDisplayingCol:[]
+    }
+  },
+  methods:{
+    initAddress(){
+      this.show=true;
+      //Initilizing
+
+      //mobile
+      let self=this;
+      // defaultValues : array[{id:"_ID_IN_columns_of_province",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_city",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_area",name:"_NAME_IN_columns"}]
+      let defaultValues = [{id:this.columns[0].values[0].id, name:this.columns[0].values[0].name},{id:this.columns[1].values[0].id, name:this.columns[1].values[0].name},{id:this.columns[2].values[0].id, name:this.columns[2].values[0].name}];
+      if(this.defaultValues)
+        defaultValues=this.defaultValues;
+      this.$children.forEach(function(vueComponent){
+        if(vueComponent._name=="<VanPicker>")
+        {
+          self.onChange(vueComponent,defaultValues); //Important
+        }
+      });
+      //mobile end
+
+      //PC
+      this.switchTab(this.curDisplayingColIndex);
+      //PC end
+      //Initilizing end
+    },
+    pickValue(pickId,pickName){
+      let areaObj={id:pickId,name:pickName};
+      this.returnValueArr[this.curDisplayingColIndex]=areaObj;
+      this.validatePickedValues();
+
+      //Submit to value displaying
+      let tmpDisplayValueEle = document.querySelectorAll(".ts-area-picker-tmp-value li");
+      tmpDisplayValueEle[this.curDisplayingColIndex].innerText=this.returnValueArr[this.curDisplayingColIndex].name;
+      //Submit to value displaying end
+
+      //Moving to next tab
+      this.curDisplayingColIndex++;
+      if(this.curDisplayingColIndex>2 || this.curDisplayingColIndex<0)
+        this.curDisplayingColIndex = 0;
+      if(this.returnValueArr.length>=3)
+      {
+        this.onConfirm(this.returnValueArr);
+      }
+      else
+        this.switchTab(this.curDisplayingColIndex);
+      //Moving to next tab end
+    },
+    // For van picker
+    onChange(picker,values) { //values = [{id:this.columns[0].id, name:this.columns[0].name},{id:this.columns[1].id, name:this.columns[1].name},{id:this.columns[3].id, name:this.columns[3].name}];
+      //Support single choice only , index = 0 province, index = 1 city, index = 2 area
+      let curSelection={'province':'','city':'','area':''};
+      if(!values)
+        return;
+      let _self=this;
+      values.forEach(function(ele,index){
+        switch(index){
+          case 0:
+            //Handling Province
+            curSelection.province=ele.id;
+            //Handling Province end
+            break;
+          case 1:
+            //Handling City
+            let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
+            picker.setColumnValues(index,matchedCity);
+            curSelection.city=matchedCity[0].id;
+            //Handling City end
+            break;
+          default:
+            //Handling Area
+            let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
+            picker.setColumnValues(index,matchedArea);
+            curSelection.area=matchedArea[0].id;
+            //Handling Area end
+            break;
+        }
+
+      });
+    },
+    validatePickedValues(){
+      let _self=this;
+      let provinceId='';
+      let areaId=undefined;
+      let validatedIndex=-1;
+      this.returnValueArr.forEach(function(obj,index){
+        switch(index){
+          case 0:
+            //Skipping province checking
+            provinceId = obj.id;
+            validatedIndex = 0;
+            break;
+          case 1:
+            //Checking City
+            if(obj.id.indexOf(provinceId)<0)
+            {
+              console.log('500 : error via checking validatePickedValues');
+              _self.returnValueArr[index]={};
+            }
+            else
+            {
+              areaId = _self.returnValueArr[index].id;
+              validatedIndex=index;
+            }
+            //Checking City end
+            break;
+          case 2:
+            //Checking Area
+            if(areaId && obj.id.indexOf(areaId)<0)
+            {
+              console.log('501 : error via checking validatePickedValues');
+              _self.returnValueArr[index]={};
+            }
+            else{
+              validatedIndex=index;
+            }
+            //Checking Area end
+            break;
+          default:
+            break;
+        }
+      });
+      return validatedIndex;
+    },
+    onConfirm(values) {
+      //Get columns structure array here : values
+      let _self=this;
+      let returnVal=[];
+      let tmpArr = [];
+      this.displayValue='';
+      values.forEach(function(ele,index){
+        _self.displayValue = _self.displayValue + ele.name + " ";
+        tmpArr.push(ele.id);
+        returnVal.push(ele);
+      });
+      this.returnValueArr=returnVal;
+      this.returnValue=tmpArr.join("|");
+      this.hideAddress();
+    },
+    onCancel() {
+
+    },
+    fitlerValuesInArray(stringStartWith,dataColArea){
+      let result=[];
+      dataColArea.forEach(function(ele){
+        if(ele.id.indexOf(stringStartWith)===0)
+        {
+          result.push(ele);
+        }
+      });
+      return result;
+    },
+    popAddress() {
+      this.show=true;
+    },
+    hideAddress() {
+      this.show=false;
+    },
+    switchTab(tabIndex){
+      let areaTabLi=document.querySelectorAll(".ts-area-picker-tmp-value li");
+      if(tabIndex==0){
+        this.curDisplayingCol = this.columns[tabIndex].values;
+      }
+      let lastValidatedTabIndex=this.validatePickedValues();
+      if(lastValidatedTabIndex<(tabIndex-1))
+      {
+        //TODO show warning here
+        let errorEle=document.querySelector(".ts-area-picker-values");
+        errorEle.classList.add("error");
+        setTimeout(function(){
+          errorEle.classList.remove("error");
+        },2000);
+        tabIndex=lastValidatedTabIndex+1;
+      }
+      this.curDisplayingColIndex=tabIndex;
+      let filteredData=this.columns[tabIndex].values;
+      if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
+      {
+        let pickedId = this.returnValueArr[tabIndex-1].id;
+        filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
+      }
+      this.curDisplayingCol=filteredData;
+
+      areaTabLi.forEach(function(ele,index){
+        if(tabIndex==index){
+          ele.classList.add('active');
+        }
+        else
+          ele.classList.remove('active');
+      })
+
+    }
+  },
+  mounted(){
+
+  },
+  components:{
+
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.ts-area-picker-container{display:inline-block;}
+.ts-area-picker-value-displayer{
+  width:40rem;
+}
+.ts-area-picker-tmp-value{
+  border-bottom:1px solid #D7D7D7;
+  padding:0 2.5rem;
+  box-sizing: border-box;
+  position:relative;
+  ul{
+    padding:0;
+    margin:0;
+    display: flex;
+    li{
+      display:inline-block;
+      color:#333333;
+      width:3.125rem;
+      padding: 1.25rem 0;
+      margin-right:4rem;
+      cursor: pointer;
+      &.active{
+        color:#E2001A;
+        border-bottom:4px solid #E2001A;
+      }
+    }
+  }
+  .close{
+    position:absolute;
+    position: absolute;
+    right: 3rem;
+    top: 1.5rem;
+    cursor: pointer;
+    &:before,&:after{
+      background-color: #333;
+    }
+  }
+}
+.ts-area-picker-values{
+  width:100%;
+  height:100%;
+  ul{
+    padding:1rem 2.5rem 2rem 2.5rem;
+    margin:0;
+  }
+  li{
+    display:inline-block;
+    margin-top:1rem;
+    margin-right:3.875rem;
+    color:#333;
+    cursor:pointer;
+    &.nth-child(6n){
+      margin-right:0;
+    }
+    &.active{
+      color:#E2001A;
+      border-bottom:4px solid #E2001A;
+    }
+  }
+}
+/deep/.van-picker__confirm,.close{
+  text-indent:-999rem;
+  position:relative;
+  &:after{
+    transform: rotate(45deg);
+  }
+  &:before{
+    transform: rotate(-45deg);
+  }
+  &:before,
+  &:after {
+    position: absolute;
+    content: ' ';
+    background-color: #E1001A;
+    left: 1.25rem;
+    bottom:-0.875rem;
+    width: 1px;
+    height: 1.375rem;
+  }
+}
+@media screen and (max-width:768px)
+{
+  /deep/.van-picker__cancel
+  {
+    display:none;
+  }
+  /deep/.van-picker__title{
+    font-size:1.375rem;
+    color:#E1001A;
+  }
+  /deep/.van-picker__toolbar{
+    padding:1.5rem 1.25rem;
+    box-sizing: border-box;
+    border-bottom:1px solid #D8D8D8;
+  }
+  /deep/.van-picker__confirm{
+    display:block;
+  }
+  .ts-area-picker-mobile{
+    display:flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    .ts-area-picker-mobile-component{
+      height:40vh;
+      width:100%;
+    }
+  }
+  .ts-area-picker-desktop{
+    display:none;
+  }
+}
+@media screen and (min-width:769px)
+{
+  /deep/.van-picker__confirm{
+    display:none;
+  }
+  .ts-area-picker-mobile{
+    display:none;
+  }
+  .ts-area-picker-desktop{
+    display:block;
+    width:100%;
+    height:19.25rem;
+    border:1px solid #808285;
+    overflow:hidden;
+  }
+  .ts-area-picker-values{
+
+  }
+}
+@keyframes flash-error
+{
+  from {
+    opacity:.6;
+  }
+  to {
+    opacity:.3;
+  }
+}
+</style>
\ No newline at end of file