lhyt_shop_applet/XCX-Shop/pages/shopStore/Address.vue

<template>
	<view class="body">
		<view class="content">
			<view class="model" v-for="(item,index) in addressList" :key="index" >
				<view style="font-size: 1rem; font-weight: 550;">{{item.full_addr}}</view>
				<view style="margin-top: 2vw;"> <span>{{item.name}}</span> <span style="margin-left: 2vw;">{{item.tel}}</span> </view>
				<view style=" height: 20vw; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #f8f8f8; margin-top: 4vw;">
					<view style="display: flex;">
						<u-checkbox-group>
							<u-checkbox @change="checkboxChange(item)" v-model="item.default" label-disabled="true" shape="circle"
								active-color="red"></u-checkbox>
						</u-checkbox-group>
						<p style="color: red; margin-left: -4vw; margin-top: -1vw; font-size: 1rem;">已设为默认地址</p>
					</view>
					<view style="display: flex;">
						<p> <image style="width: 5vw; height: 5vw; " src="../../static/bianji.png"></image> </p>
						<p style="margin-left: 2vw;" @click="Edmit(item)">编辑</p>
					</view>
					<view style="display: flex;">
						<p> <image  style="width: 5vw; height: 5vw; " src="../../static/shanchu.png"></image> </p>
						<p style="margin-left: 2vw;"  @click="deleteAddress(item)" >删除</p>
					</view>
				</view>
			</view>
			<!-- <p>暂无收获地址哦~</p> -->
		</view>
		<view class="foot">
			<u-toast ref="uToast" />
		<view class="button" @click="saveAddress">添加新地址</view>
		</view>
	</view>
</template>

<script >
	export default{
		data(){
			return{
			checked: false,
			addressList:[]
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.getAddressList()
		},
		methods:{
			checkboxChange(item) {
				console.log(item.default)
				this.$nextTick(()=>{
					this.$api.getRadio(item.id,item.default,res=>{
						if(res.code==0){
							this.getAddressList()
						}
					})
				})
		
			},
			Edmit(item){
				uni.navigateTo({
					url:'/pages/shopStore/saveAddress?addressInfo='+encodeURIComponent(JSON.stringify(item))
				})
			},
			getAddressList(){
				this.$api.getAddress(res=>{
					if(res.code==0){
						this.addressList=res.data
					}
				})
			},
			saveAddress(){
				uni.navigateTo({
					url:'/pages/shopStore/saveAddress'
				})
			},
			deleteAddress(item){
				this.$api.getdeleteAddress(item.id,res=>{
					if(res.code==0){
						this.getAddressList()
					}else{
						this.errorToast(res.msg)
					}
				})
			},
			successToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'success',
					duration: 1000
				})
			},
			errorToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					duration: 1000
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		width: 100vw;
		height: 100vh;
		.content{
			width: 100vw;
			height: 98vh;
			background-color: #f8f8f8;
			box-sizing: border-box;
			padding:0 5vw;
			overflow-y: auto;
			.model{
				width: 90vw;
				height: 20vh;
				border-radius: 5px;
				background-color: white;
				box-sizing: border-box;
				padding: 2vw;
				margin-top: 2vw;
			}
			// display: flex;
			// justify-content: center;
			// align-items: center;
		}
		.foot{
			width: 100vw;
			height: 20vw;
			border-top: 1px solid lightgray;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.button{
			width: 90vw;
			height: 12vw;
			text-align: center;
			line-height: 12vw;
			background-color: #f83036;
			color: white;
			border-radius: 32px;
		}
	}
</style>