123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <template>
-
- <view :status="checkStatus" v-if="lotusAddressData.visible" class="lotus-address-mask">
- <view class="lotus-address-box">
- <view class="lotus-address-action">
- <text @tap="cancelPicker" class="lotus-address-action-cancel">取消</text>
- <text @tap="chosedVal" class="lotus-address-action-affirm">确认</text>
- </view>
- <view class="lotus-address-picker-box">
-
- <scroll-view scroll-y :scroll-into-view="'pid'+pChoseIndex" class="lotus-address-picker-box-item">
- <view @tap="clickPicker(0,pIndex,pItem);" :id="'pid'+pIndex" :class="pIndex === pChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(pItem,pIndex) in province" :key="pIndex">{{pItem}}</view>
- </scroll-view>
-
- <scroll-view scroll-y :scroll-into-view="'cid'+cChoseIndex" class="lotus-address-picker-box-item">
- <view @tap="clickPicker(1,cIndex,cItem);" :id="'cid'+cIndex" :class="cIndex === cChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(cItem,cIndex) in city" :key="cIndex">{{cItem}}</view>
- </scroll-view>
-
- <scroll-view scroll-y :scroll-into-view="'tid'+tChoseIndex" class="lotus-address-picker-box-item">
- <view @tap="clickPicker(2,tIndex,tItem);" :id="'tid'+tIndex" :class="tIndex === tChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(tItem,tIndex) in town" :key="tIndex">{{tItem}}</view>
- </scroll-view>
-
- </view>
- </view>
- </view>
-
- </template>
- <script>
- import {lotusAddressJson} from "./Winglau14-lotusAddress.js";
- export default {
- props:['lotusAddressData'],
- data() {
- return {
- visible: false,
- province:[],
- city:[],
- town:[],
- provinceName:'',
- cityName:'',
- townName:'',
- type:0,
- pChoseIndex:-1,
- cChoseIndex:-1,
- tChoseIndex:-1,
- };
- },
- methods:{
-
- cancelPicker(){
- const provinceCode = this.getTarId(this.provinceName);
- const cityCode = this.getTarId(this.cityName);
- const townCode = this.getTarId(this.townName);
- this.$emit("choseVal",{
- provice:this.provinceName,
- provinceCode,
- city:this.cityName,
- cityCode,
- town:this.townName,
- townCode,
- isChose:0,
- visible:false
- });
- },
-
- chosedVal() {
- this.type = 1;
- const provinceCode = this.getTarId(this.provinceName);
- const cityCode = this.getTarId(this.cityName);
- const townCode = this.getTarId(this.townName);
- this.$emit("choseVal",{
- provice:this.provinceName,
- provinceCode,
- city:this.cityName,
- cityCode,
- town:this.townName,
- townCode,
- isChose:1,
- visible:false
- });
- },
-
- getTarId(name,type){
- let id = 0;
- const _this = this;
- lotusAddressJson.map((item,index)=>{
- if(item.name === name){
- id = item.value;
- }
- });
- return id;
- },
-
- getCityArr(parentId){
- let city = [];
-
- lotusAddressJson.map((item,index)=>{
- if(item.parent === parentId){
- city.push(item.name);
- }
- });
- return city;
- },
-
- getTownArr(parentId){
- let town = [];
- lotusAddressJson.map((item,index)=>{
- if(index>34&&item.parent === parentId){
- town.push(item.name);
- }
- });
- return town;
- },
-
- initFn(){
- console.log(1);
- lotusAddressJson.map((item,index)=>{
- if(index<=34){
- this.province.push(item.name);
- }
- });
-
- const p = this._props.lotusAddressData.provinceName;
- const c = this._props.lotusAddressData.cityName;
- const t = this._props.lotusAddressData.townName;
- if(p){
- this.pChoseIndex = this.getTarIndex(this.province,p);
- }
- if(p&&c){
- const pid = this.getTarId(p);
- this.city = this.getCityArr(pid);
- this.cChoseIndex = this.getTarIndex(this.city,c);
- }
- if(p&&c&&t){
- const cid= this.getTarId(c);
- this.town = this.getTownArr(cid);
- this.tChoseIndex = this.getTarIndex(this.town,t);
- }
- },
-
- getChosedData(){
- const pid = this.getTarId(this.provinceName,'provice');
- this.city = this.getCityArr(pid);
- const cid= this.getTarId(this.cityName,'city');
- this.town = this.getTownArr(cid);
-
- if(this.provinceName){
- this.pChoseIndex = this.getTarIndex(this.province,this.provinceName);
- }
- if(this.cityName){
- this.cChoseIndex = this.getTarIndex(this.city,this.cityName);
- }
- if(this.townName){
- this.tChoseIndex = this.getTarIndex(this.town,this.townName);
- }
- },
-
- clickPicker(type,index,name){
-
- if(type === 0){
- this.pChoseIndex = index;
- this.provinceName = name;
- this.cChoseIndex = -1;
- this.tChoseIndex = -1;
- this.cityName = '';
- this.townName = '';
- }
-
- if(type ===1){
- this.cChoseIndex = index;
- this.cityName = name;
- this.tChoseIndex = -1;
- this.townName = '';
- }
-
- if(type === 2){
- this.tChoseIndex = index;
- this.townName = name;
- }
-
- this.getChosedData();
- },
-
- getTarIndex(arr,tarName){
- let cIndex = 0;
- arr.map((item,index)=>{
- if(item === tarName){
- cIndex = index;
- }
- });
- return cIndex;
- }
- },
- created() {
- this.provinceName = this._props.lotusAddressData.provinceName;
- this.cityName = this._props.lotusAddressData.cityName;
- this.townName = this._props.lotusAddressData.townName;
- },
- computed:{
- checkStatus(){
- let t = null;
- const _this = this;
- if(!_this.visible){
- _this.initFn();
- _this.visible = _this._props.lotusAddressData.visible;
- t = _this.visible;
- }
- return t;
- }
- }
- }
- </script>
- <style lang="less">
- @import "./Winglau14-lotusAddress.css";
- </style>
|