notarization_applet/pagesHome/address/index.vue

<template>
	<view class="main">
		<view class="one">
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
				<radio-group @change="addressChange">
					<view class="list" v-for="(item,index) in list" :key="index">
						<label class="radio">
							<radio :value="item._id" :checked="item._id == address_id" />
						</label>
						<view class="list_1">
							<view class="name">
								<text>{{item.name}}</text>
								<text>{{item.phone}}</text>
							</view>
							<view class="address">
								<text>{{item.province}}</text>
								<text>{{item.city}}</text>
								<text>{{item.area}}</text>
								<text>{{item.address}}</text>
								<text>{{item.number}}</text>
							</view>
							<view class="btn">
								<button class="btn_1" size="mini" @click="toDefa(item)"
									v-if="item.is_default==false">设为默认</button>
								<button class="btn_2" size="mini" @click="toCommon(item)">编辑</button>
								<button class="btn_3" size="mini" @click="toDel(item)">删除</button>
							</view>
							<view class="default" v-if="item.is_default==true">
								<text>默认</text>
							</view>
						</view>
					</view>
					<view class="is_bottom" v-if="is_bottom">
						<text>{{config.bottom_title}}</text>
					</view>
				</radio-group>
			</scroll-view>
		</view>
		<view class="two">
			<view class="two_1">
				<button type="default" @click="toWxaddress()">获取微信地址</button>
			</view>
			<view class="two_1">
				<button type="default" @click="toCommon()">新增收货地址</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad, onHide, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 基本信息
	const config = ref({ logo: [] });
	const user = ref({});
	// id
	const address_id = ref('');
	// 列表
	const list = ref([]);
	const total = ref(0);
	const skip = ref(0);
	const limit = ref(6);
	const page = ref(0);
	// 数据是否触底
	const is_bottom = ref(false);
	const scrollTop = ref(0);
	onLoad(async (options) => {
		address_id.value = options && options.id
	})
	onShow(async () => {
		await searchConfig();
		await searchUser();
		await clearPage();
		await search();
	})
	onPullDownRefresh(async () => {
		await clearPage();
		await search();
		uni.stopPullDownRefresh();
	})
	onHide(async () => {
		await clearPage();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 用户信息
	const searchUser = async () => {
		user.value = uni.getStorageSync('user');
	};
	// 查询
	const search = async () => {
		if (user.value._id) {
			const info = {
				skip: skip.value,
				limit: limit.value,
				user: user.value._id,
				is_use: '0'
			}
			const res = await $api('address', 'GET', info);
			if (res.errcode === 0) {
				list.value = list.value.concat(res.data)
				total.value = res.total
			} else {
				uni.showToast({
					title: res.errmsg || '',
					icon: 'error',
				});
			}
		} else {
			uni.navigateTo({
				url: `/pagesHome/login/index`
			})
		}
	};
	// 选择收货地址
	const addressChange = async (e) => {
		let data = list.value.find((i) => i._id == e.detail.value);
		if (data) {
			address_id.value == data._id;
			uni.$emit("id", e.detail.value);
			uni.navigateBack({
				delta: 1
			});
		}
	};
	// 设置默认
	const toDefa = async (e) => {
		uni.showModal({
			title: '提示',
			content: '确定设置该地址为默认地址吗?',
			success: async function (res) {
				if (res.confirm) {
					const arr = await $api(`address/toDefault/${e._id}`, `POST`);
					if (arr.errcode == '0') {
						uni.showToast({
							title: '添加默认成功',
							icon: 'none'
						})
						await clearPage()
						await search()
					} else {
						uni.showToast({
							title: arr.errmsg,
							icon: 'none'
						})
					}
				}
			}
		});
	};
	// 获取微信地址
	const toWxaddress = async () => {
		uni.chooseAddress({
			success: async function (add) {
				let params = {
					user: user.value._id,
					name: add.userName,
					phone: add.telNumber,
					province: add.provinceName,
					city: add.cityName,
					area: add.countyName,
					address: add.detailInfo
				}
				const arr = await $api(`address`, 'POST', params);
				if (arr.errcode == '0') {
					uni.showToast({
						title: '添加收货地址成功',
						icon: 'none'
					})
					clearPage();
				} else {
					uni.showToast({
						title: arr.errmsg,
						icon: 'none'
					})
				}
			},
			fail: function () {
				clearPage();
			}
		})
	};
	// 编辑
	const toCommon = async (e) => {
		uni.navigateTo({
			url: `/pagesHome/address/add?id=${e && e._id || ''}`
		})
	};
	// 删除
	const toDel = async (e) => {
		uni.showModal({
			title: '提示',
			content: '确定删除该地址吗?',
			success: async function (res) {
				if (res.confirm) {
					const arr = await $api(`address/${e._id}`, 'DELETE');
					if (arr.errcode == '0') {
						uni.showToast({
							title: '删除信息成功',
							icon: 'none'
						})
						if (address_id.value == e._id) uni.$emit("id", '')
						await clearPage()
						await search()
					} else {
						uni.showToast({
							title: arr.errmsg,
							icon: 'none'
						})
					}
				}
			}
		});
	};
	// 分页
	const toPage = () => {
		if (total.value > list.value.length) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			page.value = page.value + 1;
			skip.value = page.value * limit.value;
			search();
			uni.hideLoading();
		} else is_bottom.value = true
	};
	// 清空列表
	const clearPage = () => {
		list.value = []
		skip.value = 0
		limit.value = 6
		page.value = 0
	};
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: var(--f1Color);

		.one {
			position: relative;
			flex-grow: 1;

			.list {
				display: flex;
				background: var(--fffColor);
				margin: 2vw 2vw 0 2vw;
				padding: 2vw;
				border-radius: 5px;
				position: relative;

				.list_1 {
					flex-grow: 1;

					.name {
						font-size: var(--font16Size);
						margin: 0 0 2vw 0;

						text {
							padding: 0 2vw 0 0;
						}
					}

					.address {
						font-size: var(--font14Size);
						margin: 0 0 1vw 0;

						text {
							padding: 0 2vw 0 0;
						}
					}

					.btn {
						text-align: center;

						button {
							margin: 0 2vw 2vw 2vw;
							background-color: var(--f35BColor);
							color: var(--fffColor);
						}

						.btn_2 {
							background-color: var(--fF0Color);
						}

						.btn_3 {
							background-color: var(--fFB1Color);
						}
					}

					.default {
						position: absolute;
						top: 0;
						right: 0;

						text {
							background: var(--fFB1Color);
							font-size: var(--font12Size);
							padding: 1vw;
							border-radius: 5px;
						}
					}
				}
			}
		}

		.two {
			display: flex;
			justify-content: space-around;

			.two_1 {
				margin: 0 0 2vw 0;

				button {
					font-size: var(--font14Size);
					color: var(--mainColor);
					background-color: var(--fFFColor);
				}


			}

			.two_1:nth-child(2) {
				button {
					background-color: var(--fFFColor);
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	.is_bottom {
		text-align: center;

		text {
			padding: 2vw 0;
			display: inline-block;
			color: #858585;
			font-size: 14px;
		}
	}
</style>