cosmetics_shop_wxapp/loginPages/addressList/index.vue

<template>
	<view class="addressList">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">地址列表</view></cu-custom>
		<!-- section -->
		<cu-scrollView :height="height" @refresherpulling="refresherpulling" @scroll="scroll">
			<radio-group @change="radioChange">
				<view v-for="(item, index) in ListValue" :key="index" class="item bg-white margin padding radius flex align-center">
					<view class="margin-right-sm"><radio style="transform: scale(0.6);" class="radio" :value="item.id" :checked="item.default" /></view>
					<view style="flex: auto;">
						<view class="flex align-center text-xl">
							<text class="margin-right-sm text-black">{{ item.name }}</text>
							<text class="margin-right-sm text-black">{{ item.tel }}</text>
							<text v-if="item.default" class="cu-tag text-white round sm" style="background-color:#ee0a24;">默认</text>
						</view>
						<view class="a">{{ item.province }}{{ item.city }}{{ item.area }}{{ item.address }}</view>
					</view>
					<view class="margin-left-sm flex flex-direction align-center justify-center">
						<text @click="update(item)" class="cuIcon-writefill text-xxl text-green"></text>
						<text @click="deleteItem(item)" class="cuIcon-deletefill margin-top text-red text-xxl "></text>
					</view>
				</view>
			</radio-group>
			<!-- 状态管理 -->
			<view class="cu-load" :class="{ loading: currentPage <= totalPage, over: currentPage > totalPage }"></view>
		</cu-scrollView>
		<!-- footer -->
		<view class="footer">
			<view class="footer-content padding bg-white"><button @click="handler" class="cu-btn  block">新增地址</button></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { CustomBarHeight } from '@/common/device/index.js';
import api from './api.js';
export default {
	computed: {
		...mapState('requestList', ['ListValue', 'currentPage', 'totalPage']),
		height() {
			return `calc(100vh - 140rpx + env(safe-area-inset-bottom) / 2 - ${CustomBarHeight}px)`;
		}
	},
	data() {
		return {};
	},
	async onShow() {
		await this.reset();
		await this.requestFunc({ method: 'get', url: `/customer/address/`, data: { limit: 10 } });
	},
	methods: {
		...mapActions('requestList', ['reset', 'requestFunc']),
		// 新增地址
		handler() {
			uni.navigateTo({
				url: '/loginPages/addaddress/index'
			});
		},
		// 下拉刷新
		async refresherpulling() {
			await this.reset();
			await this.requestFunc({ method: 'get', url: `/customer/address/`, data: { limit: 10 } });
		},
		// 上拉加载
		async scroll() {
			await this.requestFunc({ method: 'get', url: `/customer/address/`, data: { limit: 10 } });
		},
		// 修改默认
		async radioChange(e) {
			var { value } = e.detail;
			var result = await api.isDefault(value);
			if (result.code == 0) {
				await this.reset();
				await this.requestFunc({ method: 'get', url: `/customer/address/`, data: { limit: 10 } });
			}
		},
		// 修改
		update(item) {
			let { province, city, default: checked, address, area, ...keys } = item;
			let object = {
				...keys,
				region: [province, city, area],
				checked,
				textarea: address
			};
			uni.navigateTo({
				url: `/loginPages/addaddress/index?data=${JSON.stringify(object)}`
			});
		},
		// 删除
		async deleteItem(item) {
			var result = await api.deleteItem(item.id);
			if (result.code == 0) {
				await this.reset();
				await this.requestFunc({ method: 'get', url: `/customer/address/`, data: { limit: 10 } });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.addressList {
	.section {
		.item {
			width: calc(100vw - 60upx);
			box-sizing: border-box;
		}
	}
	.footer {
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		.footer-content {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			button {
				background-color: #ee0a24;
				color: #fff;
				height: 80upx;
				border-radius: 80upx;
			}
		}
	}
}
</style>