first/pages/menu/address/index.vue

<template>
	<view class="">
		<navigation>
			 Address
			<view class="bread" slot="bread">
				<image src="../../../static/bankCard/[email protected]" mode="aspectFit"
					@click="goAddAddress()"></image>
			</view>
		</navigation>

		<!-- v-for="item,index in record_list" :key="item.id" -->
		<view class="record_body">
			<view class="record_item flex" v-for="item,index in record_list" :key="index">
				<view class="numcon flex">
					<image src="../../../static/bankCard/dizhi.png" mode="aspectFit" class="img1">
					</image>
					<view class="num">
						<view class="flex">
						<view class="rec">
							{{item.name}}
						</view>
						<view class="">
							+{{areacode}} {{item.mobile}}
						</view>
						</view>
						<view class="cpay">
							{{item.areaInfo}}
						</view>
					</view>
				</view>
				<view class="time" @click="keepId(item,item.id)">
					i
				</view>
			</view>

			<u-mask :z-index="10" :show="show" @click="show = false"></u-mask>
			
			<!-- 涓嬫媺閫夋嫨 -->
			<view class="select_con" v-show="show">
                <view class="select">
                	Select
                </view>
				
				<view class="ed_con" >
					<view class="ed">
						<image src="/static/bankCard/[email protected]" mode="aspectFill" class="img"></image>  
						<text class="text" @click="goAddCard2(card)">Edit</text>
					</view>
					<view class="ed">
						<image src="/static/bankCard/[email protected]" mode="aspectFill" class="img"></image>
						<text class="text" @click="deleCard()">Delete</text>
					</view>
				</view>
			 </view>

           <u-modal cancel-text="cancel" confirm-color="#954DE3"   confirm-text="confirm" :show-title="false"  :show-cancel-button="true"   v-model="show2" :content="content" @confirm="confirm"></u-modal>
		</view>

		<tab-bar :selectActive="5"></tab-bar>

	</view>

</template>

<script>
	import cont from "@/components/navigation/navigation.vue"
	import Vue from 'vue';
	import api from '@/utils/api'
	export default {
		data() {
			return {
				show2: false,
				content: 'Are you sure to delete',
				record_list: [],
				show: false,
				// 拿银行卡item
				card:null,
				cardId:'',
				areacode: '',
			}
		},
		onLoad() {
			this.areacode = uni.getStorageSync('siteInfo').areaCode
this.init();

		},
		methods: {
			init(){
			const post = api.addressList({ 
						"ticket": uni.getStorageSync('logInfo').data,
					})
					post.then(res => {
					  this.record_list=res.data
					  // for(var i=0;i<res.data.length;i++){
					  					
											
										// res.data[i].name=res.data[i].name.replaceAll('%20',' ')
										// res.data[i].areaInfo=res.data[i].areaInfo.replaceAll('%20',' ')
										
												// res.data[i].name=res.data[i].name.replace(new RegExp('%20',"gm"),' ')
												// res.data[i].areaInfo=res.data[i].areaInfo.replace(new RegExp('%20',"gm"),' ')
												
					  // }
						})
						.catch(e => {
							uni.showToast({
								title: e,
								icon: 'none',
								duration: 2500
							})
						})	
			},
			// 拿卡id
			keepId(i,c){
				this.show=true;
				this.card=i;
				this.cardId=c;
			},
			deleCard(){
				this.show2=true;
			},
			confirm(){
				const post = api.delAddress({
							"ticket": uni.getStorageSync('logInfo').data,
							"addressId":this.cardId
						})
						uni.showLoading({})
						post.then(res => {
						  if(res.errCode=='SUCCESS'){
							  uni.showToast({
							  		title: 'Succeeded',
							  		icon: 'success',
							  		duration: 2500
							  	})
								this.show=false;
								this.init();
						  }else{
							  uni.showToast({
							  		title: 'Failed',
							  		icon: 'none',
							  		duration: 2500
							  	})
						  }
							})
							.catch(e => {
								uni.showToast({
									title: e,
									icon: 'none',
									duration: 2500
								})
							})
			},
			goAddAddress() {
        uni.navigateTo({
        	url:'addAddress/index',
        })
			},
			
			// 给edit专用
			goAddCard2(i) {
				var data=JSON.stringify(i)
			uni.navigateTo({
				url:'addAddress/index?card='+data,
			})
				},
			
		}
	}
</script>

<style scoped lang="scss">
	@import './index.css';

	.bread image {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 36rpx;
		top: 60%;
		transform: translateY(-50%);
	}
</style>