123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337 |
- <template>
- <view class="dir-left-nowrap cross-center">
- <!-- #ifdef MP-WEIXIN || MP-BAIDU || H5 -->
- <picker class="box-grow-1 area-picker-left"
- mode="multiSelector"
- @change="bindMultiPickerChange"
- @columnchange="bindMultiPickerColumnChange"
- :value="multiIndex"
- range-key="name"
- :range="multiArray">
- <text v-if="place!==`请选择`" class="address-name-color">{{place}}</text>
- <text v-else class="address-place-name-color">{{place}}</text>
- </picker>
- <!-- #endif -->
- <!-- #ifdef MP-ALIPAY || MP-TOUTIAO -->
- <view class="area-picker-left" @click="showAreaPicker">
- <text v-if="place!==`请选择`" class="address-name-color">{{place}}</text>
- <text v-else class="address-place-name-color">{{place}}</text>
- </view>
- <view class="area-picker" :class="area_picker_show">
- <view class="area-picker-bg" bindtap="hideAreaPicker">
- <scroll-view></scroll-view>
- </view>
- <view class="area-picker-body">
- <scroll-view>
- <view class="area-picker-top">
- <text class="area-picker-cancel" @click="hideAreaPicker">取消</text>
- <text class="area-picker-confirm" @click="areaPickerConfirm">确认</text>
- </view>
- <view class="area-picker-row">
- <picker-view v-if="multiIndex && multiIndex.length" indicator-style="height: 50px" style="width: 100%; height: 250px;"
- :value="multiIndex" @change="areaPickerChange">
- <picker-view-column>
- <view v-if="multiArray[0]" v-for="(item,index) in multiArray[0]" :key="index"
- style="line-height: 50px;height: 50px;text-align: center">{{item.name}}
- </view>
- </picker-view-column>
- <picker-view-column>
- <view v-if="multiArray[1]" v-for="(item,index) in multiArray[1]" :key="index"
- style="line-height: 50px;height: 50px;text-align: center">{{item.name}}
- </view>
- </picker-view-column>
- <picker-view-column>
- <view v-if="multiArray[2]" v-for="(item,index) in multiArray[2]" :key="index"
- style="line-height: 50px;height: 50px;text-align: center">{{item.name}}
- </view>
- </picker-view-column>
- </picker-view>
- </view>
- </scroll-view>
- </view>
- </view>
- <!-- #endif -->
- <image class="box-grow-0 arrow-image" src="/static/image/icon/arrow-right.png"></image>
- </view>
- </template>
- <script>
- export default {
- name: "app-area-picker",
- props: {
- ids: {
- type: Array,
- default: function () {
- return []
- }
- }
- },
- data() {
- return {
- area_picker_show: '',
- list: null,
- multiIndex: [],
- multiArray: [],
- place: '',
- }
- },
- created: function () {
- this.ids = this.ids.concat();
- },
- watch: {
- ids: function (newData, oldData) {
- const self = this;
- self.before((data) => {
- self.init(data);
- })
- }
- },
- methods: {
- //#ifdef MP-ALIPAY || MP-TOUTIAO
- showAreaPicker: function () {
- this.area_picker_show = 'active';
- },
- hideAreaPicker: function () {
- this.area_picker_show = '';
- },
- areaPickerConfirm: function (e) {
- this.bindMultiPickerChange({detail: {value: this.multiIndex}});
- this.hideAreaPicker();
- },
- areaPickerChange: function (e) {
- const self = this;
- if (self.area_picker_show == '') return;
- let detail = {
- column: '',
- value: '',
- };
- for (let i = 0; i < 3; i++) {
- if (e.detail.value[i] !== self.multiIndex[i]) {
- detail.column = i;
- detail.value = e.detail.value[i];
- break;
- }
- }
- self.multiIndex = e.detail.value;
- self.bindMultiPickerColumnChange({detail: detail});
- },
- //#endif
- before(cb) {
- const self = this;
- const district = uni.getStorageSync("_DISTRICT");
- if (district) {
- cb(district);
- } else {
- this.$request({
- url: self.$api.default.district,
- }).then(info => {
- if (info.code === 0) {
- uni.setStorageSync("_DISTRICT", info.data.list);
- cb(info.data.list);
- }
- })
- }
- },
- init: function (list) {
- const null_status = this.ids.length === 3 && this.ids[0] != 0;
- const ids = null_status ? this.ids : [2, 3, 4];
- const multiIndex = this.getIndex(list, ids);
- const multiArray = [
- list,
- list[multiIndex[0]].list,
- list[multiIndex[0]].list[multiIndex[1]].list
- ];
- let place = multiArray[0][multiIndex[0]].name
- + ','
- + multiArray[1][multiIndex[1]].name
- + ','
- + multiArray[2][multiIndex[2]].name;
- /////初始化
- let eve = [
- multiArray[0][multiIndex[0]],
- multiArray[1][multiIndex[1]],
- multiArray[2][multiIndex[2]],
- ];
- ////
- this.setEvent(eve, null_status);
- [this.list, this.multiArray, this.multiIndex, this.place] = [list, multiArray, multiIndex, null_status ? place : '请选择']
- },
- getIndex: function (list, data) {
- let arr = [];
- list.map((item, index) => {
- if (data[0] == item.id) arr.push(index)
- });
- list[arr[0]].list.map((item, index) => {
- if (data[1] == item.id) arr.push(index)
- });
- list[arr[0]].list[arr[1]].list.map((item, index) => {
- if (data[2] == item.id) arr.push(index);
- });
- return arr;
- },
- bindMultiPickerChange: function (e) {
- let list = [
- this.multiArray[0][e.detail.value[0]],
- this.multiArray[1][e.detail.value[1]],
- this.multiArray[2][e.detail.value[2]],
- ];
- let place = list[0].name
- + ','
- + list[1].name
- + ','
- + list[2].name;
- [this.multiIndex, this.place] = [e.detail.value, place];
- this.setEvent(list);
- },
- setEvent: function (list, status = true) {
- let data = {
- province: {
- id: list[0].id,
- name: list[0].name
- },
- city: {
- id: list[1].id,
- name: list[1].name
- },
- district: {
- id: list[2].id,
- name: list[2].name
- },
- };
- this.$emit('customevent', status ? data : null);
- },
- bindMultiPickerColumnChange: function (e) {
- let data = {
- multiArray: this.multiArray,
- multiIndex: this.multiIndex
- };
- data.multiIndex[e.detail.column] = e.detail.value;
- switch (e.detail.column) {
- case 0:
- data.multiIndex.splice(1, 1, 0);
- data.multiIndex.splice(2, 1, 0);
- data.multiArray.splice(1, 1, this.list[data.multiIndex[0]].list);
- data.multiArray.splice(2, 1, this.list[data.multiIndex[0]].list[data.multiIndex[1]].list);
- break;
- case 1:
- data.multiIndex.splice(2, 1, 0);
- data.multiArray.splice(2, 1, this.list[data.multiIndex[0]].list[data.multiIndex[1]].list);
- break;
- }
- [this.multiArray, this.multiIndex] = [data.multiArray, data.multiIndex]
- },
- },
- }
- </script>
- <style scoped lang="scss">
- .area-picker-left {
- min-width: #{115rpx};
- font-size: #{28rpx};
- padding-right: #{24rpx};
- line-height: 1.5;
- margin-left: auto;
- .address-name-color {
- color: #353535;
- }
- .address-place-name-color {
- color: #999999;
- }
- }
- .arrow-image {
- width: #{12rpx};
- height: #{24rpx};
- }
- /* #ifdef MP-ALIPAY || MP-TOUTIAO */
- .area-picker {
- position: fixed;
- z-index: 1600;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- transform: translateY(100%);
- transition: 250ms opacity;
- opacity: 0;
- background: rgba(0, 0, 0, .3);
- }
- .area-picker.active {
- transform: translateY(0);
- opacity: 1;
- }
- .area-picker .area-picker-bg {
- flex-grow: 1;
- position: relative;
- }
- .area-picker .area-picker-bg > scroll-view {
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- position: absolute;
- }
- .area-picker .area-picker-body {
- flex-grow: 0;
- height: #{600rpx};
- background: #fff;
- transform: translateY(100%);
- transition: 250ms transform;
- position: relative;
- }
- .area-picker.active .area-picker-body {
- transform: translateY(0);
- }
- .area-picker .area-picker-body > scroll-view {
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- position: absolute;
- }
- .area-picker .area-picker-cancel,
- .area-picker .area-picker-confirm {
- display: inline-block;
- padding: #{24rpx};
- color: #888;
- }
- .area-picker .area-picker-confirm {
- float: right;
- color: #00aa00;
- }
- .area-picker .area-picker-row {
- width: 100%;
- height: #{500rpx};
- }
- /* #endif */
- </style>
|