|
|
@@ -44,6 +44,7 @@
|
|
|
>
|
|
|
<view>{{ getTabName(item, index) }}</view>
|
|
|
</view-block>
|
|
|
+
|
|
|
<view-block
|
|
|
class="region-tab-line"
|
|
|
ref="regionLine"
|
|
|
@@ -51,63 +52,58 @@
|
|
|
></view-block>
|
|
|
</view-block>
|
|
|
|
|
|
- <view-block
|
|
|
- class="region-con"
|
|
|
- v-if="regionList[tabName[tabIndex]].length"
|
|
|
- >
|
|
|
- <ul class="region-group" ref="listview">
|
|
|
+ <view-block class="region-con">
|
|
|
+ <ul class="region-group">
|
|
|
<li
|
|
|
+ v-for="(item, index) in regionList[tabName[tabIndex]]"
|
|
|
+ :key="index"
|
|
|
class="region-item"
|
|
|
- v-for="item in regionList[tabName[tabIndex]]"
|
|
|
- :key="item.title"
|
|
|
- :ref="setListGroup"
|
|
|
+ :class="[
|
|
|
+ selectedRegion[tabName[tabIndex]].id == item.id ? 'active' : ''
|
|
|
+ ]"
|
|
|
+ @click="nextAreaList(item)"
|
|
|
>
|
|
|
- <div class="region-item-code">{{ item.title }}</div>
|
|
|
- <div
|
|
|
- class="region-item-name"
|
|
|
- v-for="subitem in item.list"
|
|
|
- :key="subitem.id"
|
|
|
- :class="[
|
|
|
- selectedRegion[tabName[tabIndex]].id == subitem.id
|
|
|
- ? 'active'
|
|
|
- : ''
|
|
|
- ]"
|
|
|
- @click="nextAreaList(subitem)"
|
|
|
- >
|
|
|
- <nut-icon
|
|
|
- class="region-item-icon"
|
|
|
- type="self"
|
|
|
- :name="selectedIcon"
|
|
|
- color="#FA2C19"
|
|
|
- size="13px"
|
|
|
- v-if="selectedRegion[tabName[tabIndex]].id == subitem.id"
|
|
|
- ></nut-icon>
|
|
|
- {{ subitem.name }}
|
|
|
- </div>
|
|
|
+ <nut-icon
|
|
|
+ class="region-item-icon"
|
|
|
+ type="self"
|
|
|
+ :name="selectedIcon"
|
|
|
+ color="#FA2C19"
|
|
|
+ size="13px"
|
|
|
+ v-if="selectedRegion[tabName[tabIndex]].id == item.id"
|
|
|
+ ></nut-icon
|
|
|
+ >{{ item.name }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div class="region-con-current-code" v-show="scrollStart">{{
|
|
|
- regionList[tabName[tabIndex]][currentIndex].title
|
|
|
- }}</div>
|
|
|
- <div
|
|
|
- class="region-con-codes-wrapper"
|
|
|
- @touchstart="touchStart"
|
|
|
- @touchmove.stop.prevent="touchMove"
|
|
|
- @touchend="touchEnd"
|
|
|
- >
|
|
|
- <div class="region-con-codes">
|
|
|
- <div
|
|
|
- class="region-con-codes-item"
|
|
|
- :data-index="index"
|
|
|
- v-for="(item, index) in regionList[tabName[tabIndex]]"
|
|
|
- :key="item.title"
|
|
|
- >{{ item.title }}</div
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</view-block>
|
|
|
</view-block>
|
|
|
|
|
|
+ <view-block class="custom-address" v-else-if="privateType === 'custom2'">
|
|
|
+ <view class="region-tab">
|
|
|
+ <view
|
|
|
+ class="tab-item"
|
|
|
+ :class="[index == tabIndex ? 'active' : '']"
|
|
|
+ v-for="(item, key, index) in selectedRegion"
|
|
|
+ :key="index"
|
|
|
+ :ref="key"
|
|
|
+ @click="changeRegionTab(item, key, index)"
|
|
|
+ >
|
|
|
+ <view>{{ getTabName(item, index) }}</view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="region-tab-line"
|
|
|
+ ref="regionLine"
|
|
|
+ :style="{ left: lineDistance + 'px' }"
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ <view class="elevator-group" v-if="showPopup">
|
|
|
+ <nut-elevator
|
|
|
+ :height="height"
|
|
|
+ :index-list="regionList[tabName[tabIndex]]"
|
|
|
+ @click-item="handleElevatorItem"
|
|
|
+ ></nut-elevator>
|
|
|
+ </view>
|
|
|
+ </view-block>
|
|
|
+
|
|
|
<!-- 配送至 -->
|
|
|
<view-block class="exist-address" v-else-if="privateType == 'exist'">
|
|
|
<div class="exist-address-group">
|
|
|
@@ -126,7 +122,6 @@
|
|
|
:color="item.selectedAddress ? '#FA2C19' : ''"
|
|
|
size="13px"
|
|
|
></nut-icon>
|
|
|
-
|
|
|
<div class="exist-item-info">
|
|
|
<div class="exist-item-info-top" v-if="item.name && item.phone">
|
|
|
<div class="exist-item-info-name">{{ item.name }}</div>
|
|
|
@@ -160,21 +155,13 @@
|
|
|
</nut-popup>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import {
|
|
|
- reactive,
|
|
|
- ref,
|
|
|
- toRefs,
|
|
|
- watch,
|
|
|
- nextTick,
|
|
|
- computed,
|
|
|
- Ref,
|
|
|
- onMounted
|
|
|
-} from 'vue';
|
|
|
+import { reactive, ref, toRefs, watch, nextTick, computed } from 'vue';
|
|
|
import { createComponent } from '../../utils/create';
|
|
|
import Icon from '../icon/index.taro.vue';
|
|
|
import Popup from '../popup/index.taro.vue';
|
|
|
import Taro from '@tarojs/taro';
|
|
|
import { transformData } from './transformData';
|
|
|
+import Elevator from './../elevator/index.taro.vue';
|
|
|
|
|
|
const { create, componentName } = createComponent('address');
|
|
|
|
|
|
@@ -200,6 +187,7 @@ interface AddressList {
|
|
|
selectedAddress: boolean;
|
|
|
}
|
|
|
export default create({
|
|
|
+ children: [Elevator],
|
|
|
inheritAttrs: false,
|
|
|
props: {
|
|
|
visible: {
|
|
|
@@ -265,11 +253,16 @@ export default create({
|
|
|
// 选择其他地址左上角返回 icon
|
|
|
type: String,
|
|
|
default: 'left'
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: '200px'
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
'nut-icon': Icon,
|
|
|
- 'nut-popup': Popup
|
|
|
+ 'nut-popup': Popup,
|
|
|
+ 'nut-elevator': Elevator
|
|
|
},
|
|
|
emits: [
|
|
|
'update:visible',
|
|
|
@@ -302,11 +295,15 @@ export default create({
|
|
|
const tabIndex = ref(0);
|
|
|
const tabName = ref(['province', 'city', 'country', 'town']);
|
|
|
|
|
|
+ const isCustom2 = computed(() => props.type === 'custom2');
|
|
|
+
|
|
|
const regionList = reactive({
|
|
|
- province: transformData(props.province),
|
|
|
- city: transformData(props.city),
|
|
|
- country: transformData(props.country),
|
|
|
- town: transformData(props.town)
|
|
|
+ province: isCustom2.value
|
|
|
+ ? transformData(props.province)
|
|
|
+ : props.province,
|
|
|
+ city: isCustom2.value ? transformData(props.city) : props.city,
|
|
|
+ country: isCustom2.value ? transformData(props.country) : props.country,
|
|
|
+ town: isCustom2.value ? transformData(props.town) : props.town
|
|
|
});
|
|
|
|
|
|
const selectedRegion = reactive({
|
|
|
@@ -322,20 +319,6 @@ export default create({
|
|
|
|
|
|
const lineDistance = ref(20);
|
|
|
|
|
|
- const listview = ref(null);
|
|
|
-
|
|
|
- const scrollState = reactive({
|
|
|
- anchorIndex: 0,
|
|
|
- listHeight: [] as number[],
|
|
|
- listGroup: [] as HTMLLIElement[],
|
|
|
- touchState: {
|
|
|
- y1: 0,
|
|
|
- y2: 0
|
|
|
- },
|
|
|
- scrollStart: false,
|
|
|
- currentIndex: 0
|
|
|
- });
|
|
|
-
|
|
|
//获取已选地区列表名称
|
|
|
const getTabName = (item: RegionData, index: number) => {
|
|
|
if (item.name) return item.name;
|
|
|
@@ -358,25 +341,13 @@ export default create({
|
|
|
const clickOverlay = () => {
|
|
|
closeWay.value = 'mask';
|
|
|
};
|
|
|
- //重置滚动参数
|
|
|
- const resetScrollState = () => {
|
|
|
- scrollState.anchorIndex = 0;
|
|
|
- scrollState.listHeight = [];
|
|
|
- scrollState.listGroup = [];
|
|
|
- scrollState.currentIndex = 0;
|
|
|
- scrollState.scrollStart = false;
|
|
|
- scrollState.touchState = {
|
|
|
- y1: 0,
|
|
|
- y2: 0
|
|
|
- };
|
|
|
- };
|
|
|
// 移动下面的红线
|
|
|
const lineAnimation = () => {
|
|
|
setTimeout(() => {
|
|
|
Taro.createSelectorQuery()
|
|
|
.selectAll(`.${tabName.value[tabIndex.value]}`)
|
|
|
.boundingClientRect((rects) => {
|
|
|
- (rects as any).forEach((rect: any) => {
|
|
|
+ (rects as any).forEach((rect) => {
|
|
|
if (rect.width > 0) lineDistance.value = rect.left;
|
|
|
});
|
|
|
})
|
|
|
@@ -400,7 +371,9 @@ export default create({
|
|
|
|
|
|
if (tabIndex.value < 3) {
|
|
|
tabIndex.value = tabIndex.value + 1;
|
|
|
+
|
|
|
lineAnimation();
|
|
|
+
|
|
|
// 切换下一个
|
|
|
calBack.next = tabName.value[tabIndex.value];
|
|
|
calBack.value = item as string;
|
|
|
@@ -408,9 +381,6 @@ export default create({
|
|
|
} else {
|
|
|
handClose();
|
|
|
}
|
|
|
-
|
|
|
- resetScrollState();
|
|
|
- (listview.value as any).scrollTo(0, 0);
|
|
|
};
|
|
|
//切换地区Tab
|
|
|
const changeRegionTab = (item: RegionData, key: number, index: number) => {
|
|
|
@@ -422,14 +392,13 @@ export default create({
|
|
|
const selectedExist = (item: RegionData) => {
|
|
|
const copyExistAdd = props.existAddress as AddressList[];
|
|
|
let prevExistAdd = {};
|
|
|
- if (copyExistAdd != null) {
|
|
|
- copyExistAdd.forEach((list, index) => {
|
|
|
- if (list && (list as AddressList).selectedAddress) {
|
|
|
- prevExistAdd = list;
|
|
|
- }
|
|
|
- (list as AddressList).selectedAddress = false;
|
|
|
- });
|
|
|
- }
|
|
|
+
|
|
|
+ copyExistAdd.forEach((list, index) => {
|
|
|
+ if (list && (list as AddressList).selectedAddress) {
|
|
|
+ prevExistAdd = list;
|
|
|
+ }
|
|
|
+ (list as AddressList).selectedAddress = false;
|
|
|
+ });
|
|
|
|
|
|
item.selectedAddress = true;
|
|
|
|
|
|
@@ -463,7 +432,7 @@ export default create({
|
|
|
type: privateType.value
|
|
|
};
|
|
|
|
|
|
- if (privateType.value == 'custom') {
|
|
|
+ if (privateType.value == 'custom' || privateType.value == 'custom2') {
|
|
|
const { province, city, country, town } = resCopy;
|
|
|
|
|
|
resCopy.addressIdStr = [
|
|
|
@@ -506,67 +475,8 @@ export default create({
|
|
|
emit('switch-module', { type: privateType.value });
|
|
|
};
|
|
|
|
|
|
- const getData = (el: any, name: string, val?: string) => {
|
|
|
- const prefix = 'data-';
|
|
|
- if (val) {
|
|
|
- return el.setAttribute(prefix + name, val);
|
|
|
- }
|
|
|
- return +el.getAttribute(prefix + name);
|
|
|
- };
|
|
|
-
|
|
|
- const setListGroup = (el: HTMLLIElement) => {
|
|
|
- nextTick(() => {
|
|
|
- if (!scrollState.listGroup.includes(el) && el != null) {
|
|
|
- scrollState.listGroup.push(el);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- const calculateHeight = () => {
|
|
|
- let height = 0;
|
|
|
- scrollState.listHeight.push(height);
|
|
|
- for (let i = 0; i < scrollState.listGroup.length; i++) {
|
|
|
- let item = scrollState.listGroup[i];
|
|
|
- height += item.clientHeight;
|
|
|
- scrollState.listHeight.push(height);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const scrollTo = (index: number) => {
|
|
|
- if (!index && index !== 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (!scrollState.listHeight.length) {
|
|
|
- calculateHeight();
|
|
|
- }
|
|
|
- if (index < 0) index = 0;
|
|
|
- if (index > scrollState.listHeight.length - 2)
|
|
|
- index = scrollState.listHeight.length - 2;
|
|
|
- scrollState.currentIndex = index;
|
|
|
- (listview.value as any).scrollTo(0, scrollState.listHeight[index]);
|
|
|
- };
|
|
|
-
|
|
|
- const touchStart = (e: TouchEvent) => {
|
|
|
- scrollState.scrollStart = true;
|
|
|
- let index = getData(e.target, 'index');
|
|
|
- let firstTouch = e.touches[0];
|
|
|
- scrollState.touchState.y1 = firstTouch.pageY;
|
|
|
- scrollState.anchorIndex = index;
|
|
|
- scrollState.currentIndex = index;
|
|
|
- scrollTo(index);
|
|
|
- };
|
|
|
-
|
|
|
- const touchMove = (e: TouchEvent) => {
|
|
|
- let firstTouch = e.touches[0];
|
|
|
- scrollState.touchState.y2 = firstTouch.pageY;
|
|
|
- let delta =
|
|
|
- ((scrollState.touchState.y2 - scrollState.touchState.y1) / 23) | 0;
|
|
|
- scrollState.currentIndex = scrollState.anchorIndex + delta;
|
|
|
- scrollTo(scrollState.currentIndex);
|
|
|
- };
|
|
|
-
|
|
|
- const touchEnd = (e: TouchEvent) => {
|
|
|
- resetScrollState();
|
|
|
+ const handleElevatorItem = (key: string, item: RegionData | string) => {
|
|
|
+ nextAreaList(item);
|
|
|
};
|
|
|
|
|
|
watch(
|
|
|
@@ -588,31 +498,32 @@ export default create({
|
|
|
watch(
|
|
|
() => props.province,
|
|
|
(value) => {
|
|
|
- regionList.province = transformData(value);
|
|
|
+ regionList.province = isCustom2.value ? transformData(value) : value;
|
|
|
}
|
|
|
);
|
|
|
watch(
|
|
|
() => props.city,
|
|
|
(value) => {
|
|
|
- regionList.city = transformData(value);
|
|
|
+ regionList.city = isCustom2.value ? transformData(value) : value;
|
|
|
}
|
|
|
);
|
|
|
watch(
|
|
|
() => props.country,
|
|
|
(value) => {
|
|
|
- regionList.country = transformData(value);
|
|
|
+ regionList.country = isCustom2.value ? transformData(value) : value;
|
|
|
}
|
|
|
);
|
|
|
watch(
|
|
|
() => props.town,
|
|
|
(value) => {
|
|
|
- regionList.town = transformData(value);
|
|
|
+ regionList.town = isCustom2.value ? transformData(value) : value;
|
|
|
}
|
|
|
);
|
|
|
|
|
|
watch(
|
|
|
() => props.existAddress,
|
|
|
(value) => {
|
|
|
+ // existAddress.value = value;
|
|
|
value.forEach((item, index) => {
|
|
|
if ((item as AddressList).selectedAddress) {
|
|
|
selectedExistAddress = item as {};
|
|
|
@@ -621,13 +532,6 @@ export default create({
|
|
|
}
|
|
|
);
|
|
|
|
|
|
- watch(
|
|
|
- () => props.type,
|
|
|
- (value) => {
|
|
|
- privateType.value = value;
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
return {
|
|
|
classes,
|
|
|
showPopup,
|
|
|
@@ -648,12 +552,7 @@ export default create({
|
|
|
selectedExist,
|
|
|
clickOverlay,
|
|
|
handClose,
|
|
|
- touchStart,
|
|
|
- touchMove,
|
|
|
- touchEnd,
|
|
|
- setListGroup,
|
|
|
- listview,
|
|
|
- ...toRefs(scrollState),
|
|
|
+ handleElevatorItem,
|
|
|
...toRefs(props),
|
|
|
...toRefs(tabItemRef)
|
|
|
};
|
richard1015