hx-mini-uni/pages/user/address.vue

<template>
	<view>
		<view class="address-list">
			<z-paging ref="paging" show-refresher-update-time v-model="dataList" @query="queryList" :fixed="false">
				<view class="list-item" v-for="(item,index) in dataList" :key="index">
					<view class="item-left" @click="checkAddress(item)">
						<view class="title"><text v-if="item.is_default == 1">默认</text> {{item.region}}</view>
						<view class="name">{{item.address}}</view>
						<view class="mobile">{{item.username}}<text>{{item.mobile}}</text></view>
					</view>
					<view class="item-right">
						<view class="icon" @click="edit(item)"><image src="/static/image/edit.png"></image></view>
						<view class="icon" @click="del(item.id)"><image src="/static/image/del.png"></image></view>
					</view>
				</view>
			</z-paging>
		</view>
		<view class="flx-footer">
			<view class="check-btn">
				<button class="btn" :disabled="disabled" @click="add">{{disabled?'处理中...':'新增地址'}}</button>
			</view>
			<view class="footer-safe"></view>
		</view>
		<uni-popup ref="popup" type="bottom" borderRadius="10px 10px 0 0" backgroundColor="#F8F8F8">
			<view class="time-select">
				<view class="title">{{mode=='add'?'新增':'编辑'}}地址
					<view class="close" @click="close()"><image src="/static/image/round_close.png"></image></view> 
				</view>
			</view>
			<view class="goods-body">
				<view class="goods-form">
					<view class="form-title">会员姓名</view>
					<view class="form-input">
						<input placeholder="请输入会员姓名" v-model="formData.username" class="input" />
					</view>
				</view>
				<view class="goods-form">
					<view class="form-title">联系电话</view>
					<view class="form-input">
						<input placeholder="请输入联系电话" v-model="formData.mobile" class="input" />
					</view>
				</view>
				<view class="goods-form">
					<view class="form-title">联系地区</view>
					<view class="form-input">
						<picker @change="bindPickerChange" mode="region">
							<view class="region-name">{{regionName?regionName:'请选择'}}</view>
						</picker>
					</view>
				</view>
				<view class="goods-form">
					<view class="form-title">详细地址</view>
					<view class="form-input">
						<input placeholder="请输入详细地址" v-model="formData.address" class="input" />
					</view>
				</view>
			</view>
			<view class="time-btn">
				<button class="btn" :disabled="disabled" @click="submit">{{disabled?'处理中...':'确认'}}</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/address.js";
import form from "@/static/js/form.js";
export default {
	data() {
		return {
			type:1,
			mode:"add",
			regionName:null,
			formData:{},
			disabled:false,
			dataList:[]
		}
	},
	onLoad({type}) {
		app = this;
		app.type = type;
	},
	methods: {
		chooseAddress(){
			uni.chooseAddress({
				success(res) {
					console.log(res)
				},
				fail(res) {
					console.log(res)
				}
			})
		},
		queryList(pageNo, pageSize){
			var formData = {};
			formData.page = pageNo;
			formData.size = pageSize;
			Api.data(formData).then((res)=>{
				uni.hideLoading();
				if (res.code !== 1) {
					this.$refs.paging.complete(false);
					return false;
				}
				this.$refs.paging.complete(res.data.rows);
			})
		},
		checkAddress(data){
			if (app.type == 2) {
				var pages = getCurrentPages();
				//获取上一个页面实例对象
				let beforePage = pages[pages.length - 2];
				//触发上一个页面中的getUserInfo方法
				beforePage.$vm.getBackInfo(data);
				uni.navigateBack();
			}
		},
		del(id){
			app.$dialog.showError("确定要删除该地址信息吗？",function(res){
				if (res.confirm) {
					Api.del({"id":id}).then((resp)=>{
						if (resp.code == 0) {
							return app.$dialog.showSuccess(resp.msg);
						}
						app.$dialog.showSuccess(resp.msg);
						app.queryList(1,10);
					})
				}
			});
		},
		edit(data){
			app.formData = data;
			app.mode = "edit";
			app.regionName = data.region
			app.$refs.popup.open()
		},
		bindPickerChange(e){
			var name = "";
			var regionData = e.detail.value;
			regionData.forEach((item)=>{
				name += item
			})
			app.regionName = name;
		},
		close(){
			app.$refs.popup.close()
		},
		add(){
			uni.getLocation({
				type:"gcj02",
				success(res) {
					console.log(res)
				},
				complete() {
					app.mode = "add";
					app.$refs.popup.open()
				}
			})
		},
		submit(){
			var {formData} = this;
			formData.region = app.regionName;
			var submitData = JSON.parse(JSON.stringify(formData))
			var validation = form.validation(submitData,[
				{name:"username",rule:["required"],msg:["请输入姓名"]},
				{name:"mobile",rule:["required","isMobile"],msg:["请输入手机号","手机号格式错误"]},
				{name:"region",rule:["required"],msg:["请选择地区"]},
				{name:"address",rule:["required"],msg:["请输入详细地址"]}
			]);
			if(validation) return app.$dialog.showSuccess(validation);
			app.disabled = true;
			Api.save(submitData).then((res)=>{
				app.disabled = false;
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg);
				}
				app.$refs.popup.close()
				app.$dialog.showSuccess(res.msg);
				app.queryList(1,10);
			})
		}
	}
}
</script>

<style>
.check-btn{display: flex;align-items: center;gap: 20upx;}
.address-list{height: 100vh;}
.address-list .list-item{background-color: #fff;margin-top: 20upx;display: flex;align-items: center;justify-content: space-between;padding: 20upx;}
.address-list .list-item .title{font-size: 24upx;color: #666;margin-bottom: 20upx;}
.address-list .list-item .name{font-size: 28upx;color: #333;margin-bottom: 20upx;}
.address-list .list-item .mobile{font-size: 28upx;color: #666;margin-bottom: 20upx;}
.address-list .list-item .mobile text{margin-left: 20upx;}
.address-list .list-item .item-left{flex: 1;}
.address-list .list-item .item-right{display: flex;align-items: center;gap: 20upx;}
.address-list .list-item .item-right .icon{width: 60upx;height: 60upx;background-color: #f8f8f8;border-radius: 30upx;text-align: center;justify-content: center;align-items: center;display: flex;}
.address-list .list-item .item-right image{width: 40upx;height: 40upx;}
.empty-data{
	display: flex;
	height: 80vh;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 28upx;
	color: #666;
}
.empty-data image{
	width: 50%;
}
.time-select{border-bottom: 2upx solid #f2f2f2;}
.time-select .title{height: 100upx;line-height: 100upx;display: flex;align-items: center;justify-content: space-between;font-size: 32upx;padding: 0 20upx;font-weight: bold;}
.time-select image{width: 40upx;height: 40upx;vertical-align: middle;}
.time-btn{padding: 20upx;}	
.goods-body{padding: 20upx;}
.goods-body .goods-title{font-size: 28upx;color: #333;line-height: 80upx;}
.goods-body .goods-title text{color: #fe2c56;}
.goods-body .form-title{margin-top: 40upx;font-size: 28upx;color: #666;}
.goods-form{margin-bottom: 20upx;}
.goods-form .form-input{border: 2upx solid #ccc;height: 80upx;margin-top: 20upx;padding: 0 15upx;background-color: #ccc;}
.region-name{height: 80upx;line-height: 80upx;font-size: 24upx;}
.goods-form .form-input .input{font-size: 24upx;height: 80upx;background-color: #ccc;}

.flx-footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;}
.flx-footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}
.flx-footer .btn,.time-btn .btn{font-size: 28rpx;height: 80upx;border-radius: 10upx;line-height: 80upx;text-align: center;width: 100%;color: #333;background-color: #fe2c56;color: #fff;border:2upx solid #fe2c56;}
</style>