| xqd
@@ -1,24 +1,32 @@
|
|
|
<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">
|
|
|
- <slot>
|
|
|
- <text v-if="place!==`请选择`" class="address-name-color">{{place}}</text>
|
|
|
- <text v-else class="address-place-name-color">{{place}}</text>
|
|
|
- </slot>
|
|
|
+ <picker
|
|
|
+ class="box-grow-1 area-picker-left"
|
|
|
+ mode="multiSelector"
|
|
|
+ @change="bindMultiPickerChange"
|
|
|
+ @columnchange="bindMultiPickerColumnChange"
|
|
|
+ :value="multiIndex"
|
|
|
+ range-key="name"
|
|
|
+ :range="multiArray"
|
|
|
+ >
|
|
|
+ <template v-if="$slots.default">
|
|
|
+ <slot></slot>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <text v-if="place !== `请选择`" class="address-name-color">{{ place }}</text>
|
|
|
+ <text v-else class="address-place-name-color">{{ place }}</text>
|
|
|
+ </template>
|
|
|
</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>
|
|
|
+ <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-bg" bindtap="hideAreaPicker"><scroll-view></scroll-view></view>
|
|
|
<view class="area-picker-body">
|
|
|
<scroll-view>
|
|
|
<view class="area-picker-top">
|
| xqd
@@ -26,21 +34,26 @@
|
|
|
<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
|
|
|
+ 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 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 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 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>
|
| xqd
@@ -49,308 +62,283 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
- <slot>
|
|
|
- <image class="box-grow-0 arrow-image"
|
|
|
- src="https://shop.9026.com/web/statics/image/mall/static/icon/arrow-right.png"></image>
|
|
|
- </slot>
|
|
|
+ <image v-if="!$slots.default" class="box-grow-0 arrow-image" src="https://shop.9026.com/web/statics/image/mall/static/icon/arrow-right.png"></image>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: "app-area-picker",
|
|
|
- props: {
|
|
|
- ids: {
|
|
|
- type: Array,
|
|
|
- default: function() {
|
|
|
- return []
|
|
|
- }
|
|
|
+export default {
|
|
|
+ name: 'app-area-picker',
|
|
|
+ props: {
|
|
|
+ ids: {
|
|
|
+ type: Array,
|
|
|
+ default: function() {
|
|
|
+ return [];
|
|
|
}
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tempIds: this.ids,
|
|
|
- area_picker_show: '',
|
|
|
- list: [],
|
|
|
- multiIndex: [],
|
|
|
- multiArray: [],
|
|
|
- place: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tempIds: this.ids,
|
|
|
+ area_picker_show: '',
|
|
|
+ list: [],
|
|
|
+ multiIndex: [],
|
|
|
+ multiArray: [],
|
|
|
+ place: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created: function() {
|
|
|
+ this.tempIds = this.tempIds.concat();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ ids: {
|
|
|
+ handler: function(newData, oldData) {
|
|
|
+ this.tempIds = this.ids;
|
|
|
}
|
|
|
},
|
|
|
- created: function() {
|
|
|
- this.tempIds = this.tempIds.concat();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- ids: {
|
|
|
- handler: function(newData, oldData) {
|
|
|
- this.tempIds = this.ids;
|
|
|
- },
|
|
|
- },
|
|
|
- tempIds: {
|
|
|
- handler: function(newData, oldData) {
|
|
|
- const self = this;
|
|
|
- self.before((data) => {
|
|
|
- self.init(data);
|
|
|
- })
|
|
|
- this.$emit('ids', this.tempIds);
|
|
|
- },
|
|
|
- deep: true,
|
|
|
- immediate: true,
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- //#ifdef MP-ALIPAY || MP-TOUTIAO
|
|
|
- showAreaPicker: function() {
|
|
|
- this.area_picker_show = 'active';
|
|
|
+ tempIds: {
|
|
|
+ handler: function(newData, oldData) {
|
|
|
+ const self = this;
|
|
|
+ self.before(data => {
|
|
|
+ self.init(data);
|
|
|
+ });
|
|
|
+ this.$emit('ids', this.tempIds);
|
|
|
},
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- hideAreaPicker: function() {
|
|
|
- this.area_picker_show = '';
|
|
|
- },
|
|
|
+ methods: {
|
|
|
+ //#ifdef MP-ALIPAY || MP-TOUTIAO
|
|
|
+ showAreaPicker: function() {
|
|
|
+ this.area_picker_show = 'active';
|
|
|
+ },
|
|
|
|
|
|
- areaPickerConfirm: function(e) {
|
|
|
- this.bindMultiPickerChange({
|
|
|
- detail: {
|
|
|
- value: this.multiIndex
|
|
|
- }
|
|
|
- });
|
|
|
- this.hideAreaPicker();
|
|
|
- },
|
|
|
+ hideAreaPicker: function() {
|
|
|
+ this.area_picker_show = '';
|
|
|
+ },
|
|
|
|
|
|
- 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;
|
|
|
- }
|
|
|
+ areaPickerConfirm: function(e) {
|
|
|
+ this.bindMultiPickerChange({
|
|
|
+ detail: {
|
|
|
+ value: this.multiIndex
|
|
|
}
|
|
|
- self.multiIndex = e.detail.value;
|
|
|
- self.bindMultiPickerColumnChange({
|
|
|
- detail: detail
|
|
|
- });
|
|
|
- },
|
|
|
- //#endif
|
|
|
+ });
|
|
|
+ this.hideAreaPicker();
|
|
|
+ },
|
|
|
|
|
|
- before(cb) {
|
|
|
- const self = this;
|
|
|
- const district = this.$storage.getStorageSync("_DISTRICT");
|
|
|
- if (district) {
|
|
|
- cb(district);
|
|
|
- } else {
|
|
|
- this.$request({
|
|
|
- url: self.$api.default.district,
|
|
|
- }).then(info => {
|
|
|
- if (info.code === 0) {
|
|
|
- this.$storage.setStorageSync("_DISTRICT", info.data.list);
|
|
|
- cb(info.data.list);
|
|
|
- }
|
|
|
- })
|
|
|
+ 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
|
|
|
|
|
|
- init: function(list) {
|
|
|
- const null_status = this.tempIds.length === 3 && this.tempIds[0] != 0;
|
|
|
- const ids = null_status ? this.tempIds : [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;
|
|
|
+ before(cb) {
|
|
|
+ const self = this;
|
|
|
+ const district = this.$storage.getStorageSync('_DISTRICT');
|
|
|
+ if (district) {
|
|
|
+ cb(district);
|
|
|
+ } else {
|
|
|
+ this.$request({
|
|
|
+ url: self.$api.default.district
|
|
|
+ }).then(info => {
|
|
|
+ if (info.code === 0) {
|
|
|
+ this.$storage.setStorageSync('_DISTRICT', info.data.list);
|
|
|
+ cb(info.data.list);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- /////初始化
|
|
|
- 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 : '请选择'
|
|
|
- ]
|
|
|
- },
|
|
|
+ init: function(list) {
|
|
|
+ const null_status = this.tempIds.length === 3 && this.tempIds[0] != 0;
|
|
|
+ const ids = null_status ? this.tempIds : [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;
|
|
|
|
|
|
- getIndex: function(list, data) {
|
|
|
- let arr = [];
|
|
|
- list.map((item, index) => {
|
|
|
- if (data[0] == item.id) arr.push(index)
|
|
|
- });
|
|
|
+ /////初始化
|
|
|
+ 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 : '请选择'];
|
|
|
+ },
|
|
|
|
|
|
- list[arr[0]].list.map((item, index) => {
|
|
|
- if (data[1] == item.id) arr.push(index)
|
|
|
- });
|
|
|
+ getIndex: function(list, data) {
|
|
|
+ let arr = [];
|
|
|
+ list.map((item, index) => {
|
|
|
+ if (data[0] == 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;
|
|
|
- },
|
|
|
+ list[arr[0]].list.map((item, index) => {
|
|
|
+ if (data[1] == item.id) arr.push(index);
|
|
|
+ });
|
|
|
|
|
|
- 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]],
|
|
|
- ];
|
|
|
+ list[arr[0]].list[arr[1]].list.map((item, index) => {
|
|
|
+ if (data[2] == item.id) arr.push(index);
|
|
|
+ });
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
|
|
|
- let place = list[0].name +
|
|
|
- ',' +
|
|
|
- list[1].name +
|
|
|
- ',' +
|
|
|
- list[2].name;
|
|
|
- [this.multiIndex, this.place] = [e.detail.value, place];
|
|
|
- this.setEvent(list);
|
|
|
- },
|
|
|
+ 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]]];
|
|
|
|
|
|
- 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);
|
|
|
- },
|
|
|
+ let place = list[0].name + ',' + list[1].name + ',' + list[2].name;
|
|
|
+ [this.multiIndex, this.place] = [e.detail.value, place];
|
|
|
+ this.setEvent(list);
|
|
|
+ },
|
|
|
|
|
|
- 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;
|
|
|
+ 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.multiArray, this.multiIndex] = [data.multiArray, data.multiIndex]
|
|
|
- },
|
|
|
+ };
|
|
|
+ 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;
|
|
|
- }
|
|
|
+.area-picker-left {
|
|
|
+ min-width: #{115rpx};
|
|
|
+ font-size: #{28rpx};
|
|
|
+ padding-right: #{24rpx};
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-left: auto;
|
|
|
|
|
|
- .address-place-name-color {
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ .address-name-color {
|
|
|
+ color: #353535;
|
|
|
}
|
|
|
|
|
|
- .arrow-image {
|
|
|
- width: #{12rpx};
|
|
|
- height: #{24rpx};
|
|
|
+ .address-place-name-color {
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- /* #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);
|
|
|
- }
|
|
|
+.arrow-image {
|
|
|
+ width: #{12rpx};
|
|
|
+ height: #{24rpx};
|
|
|
+}
|
|
|
|
|
|
- .area-picker.active {
|
|
|
- transform: translateY(0);
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+/* #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, 0.3);
|
|
|
+}
|
|
|
|
|
|
- .area-picker .area-picker-bg {
|
|
|
- flex-grow: 1;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
+.area-picker.active {
|
|
|
+ transform: translateY(0);
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
|
|
|
- .area-picker .area-picker-bg>scroll-view {
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
+.area-picker .area-picker-bg {
|
|
|
+ flex-grow: 1;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
|
|
|
- .area-picker .area-picker-body {
|
|
|
- flex-grow: 0;
|
|
|
- height: #{600rpx};
|
|
|
- background: #fff;
|
|
|
- transform: translateY(100%);
|
|
|
- transition: 250ms transform;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
+.area-picker .area-picker-bg > scroll-view {
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
|
|
|
- .area-picker.active .area-picker-body {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
+.area-picker .area-picker-body {
|
|
|
+ flex-grow: 0;
|
|
|
+ height: #{600rpx};
|
|
|
+ background: #fff;
|
|
|
+ transform: translateY(100%);
|
|
|
+ transition: 250ms transform;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
|
|
|
- .area-picker .area-picker-body>scroll-view {
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
+.area-picker.active .area-picker-body {
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
|
|
|
- .area-picker .area-picker-cancel,
|
|
|
- .area-picker .area-picker-confirm {
|
|
|
- display: inline-block;
|
|
|
- padding: #{24rpx};
|
|
|
- color: #888;
|
|
|
- }
|
|
|
+.area-picker .area-picker-body > scroll-view {
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
|
|
|
- .area-picker .area-picker-confirm {
|
|
|
- float: right;
|
|
|
- color: #00aa00;
|
|
|
- }
|
|
|
+.area-picker .area-picker-cancel,
|
|
|
+.area-picker .area-picker-confirm {
|
|
|
+ display: inline-block;
|
|
|
+ padding: #{24rpx};
|
|
|
+ color: #888;
|
|
|
+}
|
|
|
|
|
|
- .area-picker .area-picker-row {
|
|
|
- width: 100%;
|
|
|
- height: #{500rpx};
|
|
|
- }
|
|
|
+.area-picker .area-picker-confirm {
|
|
|
+ float: right;
|
|
|
+ color: #00aa00;
|
|
|
+}
|
|
|
+
|
|
|
+.area-picker .area-picker-row {
|
|
|
+ width: 100%;
|
|
|
+ height: #{500rpx};
|
|
|
+}
|
|
|
|
|
|
- /* #endif */
|
|
|
+/* #endif */
|
|
|
</style>
|