qzw_xcx/pages/myOrder/adress.vue

<template>
	<view class="content b-t">
		<view v-if="isform ==1" @click="choseAdress" style="text-align: right;padding: 10upx 32upx;">
			{{isdelete?'管理':'删除'}}
		</view>
		<view class="list b-b" v-for="(item, index) in addressList" :key="index">
			
			<view  @click="checkAddress(item)" style="flex: 15;" class="wrapper">
				<view class="u-box">
					<text v-if="item.address_is_default == 1" class="tag">↑</text>
					<text class="name">{{item.address_realname}}</text>
					<text class="mobile">{{item.address_mob_phone}}</text>
				</view>
				<view class="address-box">
					<text class="address">{{item.area_info}} {{item.address_detail}}</text>
				</view>
			</view>
			<van-icon v-if="isdelete" size="30" name="edit" @click="addAddress('edit', item)" color="#D9332E" />
			<view  v-if="!isdelete"  style="flex: 2;border-radius: 100%;">
				<van-checkbox-group :value="checkboxList" @change="checkboxChange()">
					<van-checkbox  checked-color="#D9332E" :name="index"></van-checkbox>
				</van-checkbox-group> 
			</view>
		<!-- 	<text class="yticon icon-bianji" @click.stop="addAddress('edit', item)"></text> -->
		</view>
		
		<button  v-if="isdelete" class="add-btn" @click="addAddress('add', {})">添加地址</button>
		<view v-if="!isdelete" style="position: fixed;bottom: 0;border-top:1px solid #eee;height: 8vh;">
		<van-submit-bar
		  button-text="删除"
		  @submit="onClickButton"
		  :tip="true"
		>
		<van-checkbox checked-color="#D9332E" :value="isAll" shape="round" @change="onChange">
		 全选
		</van-checkbox>
			
		</van-submit-bar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isform: 0,
				isAll: false,
				source: 0,
				isdelete: true,
				addressList: [
				],
				pricelist: [],
				checkboxList:[]
			}
		},
		onLoad(option){
			this.source = option.source;
			this.isform =  option.isform;
			this.getlist();
			uni.$on("refeshadress",(adress)=>{
			      this.getlist();
			  })
		},
		methods: {
			// 全选
			onChange(a) {
				this.isAll = !this.isAll;
				let items = this.addressList;
				if(this.isAll) {
					items.forEach((item, idx) => {
						this.$set(this.checkboxList, idx, idx.toString())
					})
					let price = [];
					this.checkboxList.forEach(item => {
						 price.push(items[item].address_id)
					})
					this.pricelist = price;
					
				}else {
						  this.checkboxList = [];
						  this.pricelist = [];
					}
			},
			
			// 地址管理
			choseAdress() {
				this.isdelete =!this.isdelete; 
				this.checkboxList = [];
			},
			checkboxChange(e) {
				
				this.checkboxList = []
				e.detail.forEach((item, idx) => {
					this.$set(this.checkboxList, idx, item)
				})
				let array = this.addressList;
				let price = [];
				this.checkboxList.forEach(item => {
					 price.push(array[item].address_id)
				})
				this.pricelist = price;
			},
			// 删除地址
			onClickButton() {
				if(this.pricelist.length == 0) {
					this.$msg("赶快去新增地址吧");
					return;
				}
				let address_ids = this.pricelist.join(',');
				this.request({
					url: '/v1/member/address_drop',
					method: 'post',
					data: {
						address_ids: address_ids
					},
					success: (res) => {
						if(res.data.code == 1000) {
							this.checkboxList = [];
							this.getlist();
						}
					}
				})
			},
			// 获取地址列表
			getlist() {
				this.request({
					url: '/v2/address/index',
					method: 'get',
					success: (res) => {
						this.addressList = res.data.data.address_list;
					}
				})
			},
			//选择地址
			checkAddress(item){
				if(this.isform!=1&&this.isdelete) {
					uni.$emit('getadress', item)
					uni.navigateBack();
				}
			
				// if(this.source == 1){
				// 	//this.$api.prePage()获取上一页实例，在App.vue定义
					
					
				// }
				// let items = JSON.stringify(item);
				// uni.redirectTo({
				//     url: `/pages/index/sureBuy?item=${items}`
				// });
			},
			addAddress(type, item){
				uni.navigateTo({
					url: `/pages/myOrder/adressManger?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			//添加或修改成功之后回调
			refreshList(data, type){
				//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
				this.addressList.unshift(data);
			}
		}
	}
</script>

<style lang='scss'>
	page{
		padding-bottom: 120upx;
	}
	.content{
		position: relative;
	}
	.list{
		display: flex;
		align-items: center;
		padding: 20upx 30upx;;
		background: #fff;
		position: relative;
	}
	.wrapper{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.address-box{
		display: flex;
		align-items: center;
		.tag{
			font-size: 35upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}
		.address{
			font-size: 30upx;
			color: $font-color-dark;
		}
	}
	.u-box{
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;
		.name{
			margin-right: 30upx;
		}
	}
	.icon-bianji{
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}
	
	.add-btn{
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: #D9332E;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);		
	}
	.isdiaplay .van-submit-bar__text {
		visibility: hidden;
	}
	.isdiaplay {
		visibility: hidden;
	}
	.van-submit-bar__bar {
		justify-content: space-between!important;
	}
</style>