web-store-retail-h5/pages/addressList/index.vue

<template>
  <view class="main">
	  <view class="color-s">
		  
	  </view>
	<view style="height: 50rpx;"></view>
	  <view class="content" v-if="addressList!=''">
		<view>
			<view class="address" v-for="(item,index) in addressList" :style="index+1==addressList.length?'border-bottom:none':''">
				<view class="address-left"  v-if="item.isDefault==1">
					<image src="../../static/images/check.png"></image>
				</view>
				<view class="address-cen">
					<view class="address-c">
						{{item.recArea}}
					</view>
					<view class="address-d">
						{{item.recAddress}}
					</view>
					<view class="address-e">
						{{item.recName}} {{item.recPhone}} <span class="color-style"  v-if="item.isDefault==1">{{'默认'}}</span>
					</view>
				</view>
				<view class="address-right" @click="update(item.pkId)">
					<image src="../../static/images/update-icon.png"></image>
				</view>
				<view class="address-right1" @click="del(item.pkId)">
					<image src="../../static/images/delete.png"></image>
				</view>
			</view>
		</view>
	  </view>
	  <u-button type="success"
	            shape="circle"
	            class="btn"
				@click="submit"
	        >新建收货地址</u-button>
			<view style="height: 20rpx;"></view>
  </view>
</template>

<script>
import * as api from '@/config/address.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  data() {
    return {
		userInfo:'',
		addressList:[],
    }
  },
  onLoad(option) {

  },
	onShow() {
		this.getAddress()
	},
  methods: {
	  update(id){
		  uni.navigateTo({
		  	url:"/pages/address/index?pkId="+id
		  })
	  },
	  del(id){
		   uni.showModal({
			  title: '提示',
			  content: '是否删除该地址',
			  success: (res) => {
				if (res.confirm) {
				  // 点击确定，则调用相册授权
				  api.delAddress(id).then((res)=>{
					  if (res.code=='200') {
							uni.showToast({
							  title: res.msg,
							})
							this.getAddress()
					  } else {
						uni.showToast({
						  title: res.msg,
						  icon: 'none',
						})
					  }
				  })
				}
			  },
			})
	  },
	  submit(){
		  uni.navigateTo({
			url:"/pages/address/index"
		  })
	  },
	  getAddress() {
		  api.addressList().then((res)=>{
			 this.addressList = res.data
		  })
	  }
  },
}
</script>

<style lang="scss" scoped>
	.color-style{
		width: 65rpx;
		height: 36rpx;
		background: #005BAC;
		border-radius: 2rpx;
		opacity: 1;
		display: inline-block;
		font-size: 16rpx;
		text-align: center;
		line-height: 36rpx;
		color: #fff;
		margin-left: 20rpx;
	}
	.address-cen{
		width: 100%;
	
	}
	.address-left{
		height: 100%;
		margin: 40rpx 40rpx 0 0;
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
	.address-right{
		image{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 70rpx;
			top: 75rpx;
		}
	}
	.address-right1{
		image{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 20rpx;
			top: 75rpx;
		}
	}
	.address-e{
		color: #333;
		font-size: 28rpx;
		margin-top: 10rpx;
	}
	.address-d{
		color: #333;
		font-size: 32rpx;
		margin-top: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		width: 450rpx;
		text-overflow: ellipsis;
		
	}
	.address-c{
		color: #666;
		font-size: 24rpx;
	}
	.color-s{
		position: absolute;
		width: 100%;
		height: 244rpx;
		background: linear-gradient(180deg, #005BAC 0%, rgba(255,182,182,0) 100%);
		border-radius: 0px 0px 0px 0px;
		top: 0;
	}
	.address{
		border-bottom: 1px solid #ccc;
		display: flex;
		position: relative;
	}
	page{
		background-color: #f2f2f2;
	}
	.content{
		background: #FFFFFF;
		box-shadow: 0px 2px 20px 0px rgba(204,204,204,0.5);
		border-radius: 8px 8px 8px 8px;
		padding: 10rpx 30rpx 30rpx 0;
		// width: 650rpx;
		margin: 0 30rpx;
		position: relative;
		z-index: 1;
		// padding-bottom: 150rpx;
	}
	.address{
		// height: 100rpx;
		background-color: #fff;
		padding: 20rpx;
	}
	.content{
		margin-bottom: 170rpx;
	}
	.btn{
		background-color: #005BAC;
		border: none;
		height: 92rpx;
		line-height: 92rpx;
		font-size:30rpx;
		width: 690rpx;
		 position: fixed;
		z-index: 1;
		// margin: 40rpx auto;
		text-align: center;
		//position: absolute;
		bottom: 20rpx;
		left: 50%;
		margin-left: -340rpx;
	}
</style>