二 address/address-list.vue

126 阅读1分钟
	<view class='address'>
		<view class='address-list'>
			<view 
				class='address-item'
				v-for='(item,index) in list' 
				:key='item.id' 
				@click='selectItem(item)'
			>
				<view class='list-title'>
					<image src="../static/images/address.png" mode=""></image>
					<view>
						<view>{{ item.name }} {{ item.mobile }}</view>
						<view>{{ item.province }} {{ item.city }} {{ item.county }} {{ item.address }}</view>
					</view>
					<view @click='update(item)' v-if='type!=1'>修改</view>
				</view>
				<view class='list-bottom'>
					<view>
						<u-radio-group v-model="item.defaulted" v-if='item.defaulted==1'>
						    <u-radio label="默认收货地址" :name='item.defaulted'></u-radio>
						</u-radio-group>
					</view>
					<view @click='deletes( item.id , index )' v-if='type!=1'>删除</view>
				</view>
			</view>
		</view>
		
		<button @click='add' class='btn'>添加收货地址</button>
	</view>
</template>

<script>
import { addAddress , addressList  , addressDel  } from '@/utils/api/address.js'
export default{
	data () {
		return {
			list:[],
			type:0,
		}
	},
	onLoad( e ) {
		//从哪里进入到的列表
		if( !e.type ) return;
		this.type = e.type;
	},
	onShow() {
		this.getAddress();
	},
	methods:{
		//获取收货地址列表
		async getAddress(){
			let res = await addressList();
			this.list = res.data;
			console.log( res );
		},
		add(){
			uni.showModal({
				title:'提示',
				content:'是否使用微信地址',
				success( data ){
					if( data.confirm ){
						uni.chooseAddress({
							success(res){
								addAddress({
								   "name": res.userName,
								   "mobile": res.telNumber,
								   "province":  res.provinceName,
								   "city":  res.cityName,
								   "county":  res.countyName,
								   "address":  res.detailInfo,
								   "defaulted": 1//是否默认(1:默认;0:非默认)
								})
							}
						})
					}else{
						uni.navigateTo({
							url:'/address/address-add'
						})
					}
				}
			})
		},
		async deletes( id , index ){
			let that = this;
			uni.showModal({
				title:'提示',
				content:'确定删除吗?',
				async success() {
					let res = await addressDel( id );
					console.log( res );
					if( res.code =='200' ){
						that.list.splice( index, 1 );
					}
				}
			})
		},
		//选择
		selectItem( item ){
			if( !this.type ) return;
			//获取页面跳转,栈
			let currentPage = getCurrentPages();
			let parent = currentPage[ currentPage.length - 2 ];
			parent.$vm.path = item;
			uni.navigateBack();
		},
		//修改
		update( item ){
			if( this.type ) return;
			let params = JSON.stringify(item);
			uni.navigateTo({
				url:`/address/address-add?item=${ params }`
			})
		}
	}
}
</script>

<style>
.address{
	background: #F4F4F4;
	overflow: hidden;
}
.address-item{
	width: 727rpx;
	height: 264rpx;
	background: #FFFFFF;
	border-radius: 28rpx;
	margin-top:27px;
	margin-left:17rpx;
	margin-right:17rpx;
}
.list-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.list-bottom{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.address-item image{
	width: 64rpx;
	height: 64rpx;
	background: #FF4949;
}
.btn{
	position: fixed;
	bottom:82rpx;
	left:50%;
	transform: translateX(-50%);
	
	width: 634rpx;
	height: 85rpx;
	color:#fff;
	background: linear-gradient(128deg, #525252 0%, #000000 100%);
	border-radius: 43rpx;
}
</style>