smart-admin/rc-busness/pages/useraddress/openaddress.vue

<template>
	<div>
		<Myheader></Myheader>
		<div class="rc-top"></div>
		<tabs :crumbs="crumbs"></tabs>
		<div class="online bold"></div>
		<div class="usercontshow rc-max-width--xl">
			<div class="usercontend" v-for="(item, index) in list" :key="index">
				<div class="usercontshow usermain">
					<div class="rc-cat">
						<div class="rc-center">
							<div class=" rc-title">
								<em>{{ item.recipient }}</em>
								<span>{{ item.recipientPhone }}</span>
							</div>
							<div class="rc-address">
								<span>{{ item.provinceName }}{{ item.districtName }}{{ item.detailAddress }}</span>
							</div>
							<div class="rc-footer">
								<div class="rc-foot">
									<img
										:src="item.isDefault ? require('../../assets/image/userred.png') : require('../../assets/image/userselect.png')"
										@click="changeadddress(item, index)"
									/>
									<span>设置为默认收货地址</span>
								</div>
								<div class="rc-right">
									<span @click="onEdit(item, index)">编辑</span>
									<span @click="userdelete(item, index)">删除</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="online bold rc-md-down"></div>
				<!-- <div class="usercontend useradd">
      <img src="../../assets/image/userselect.png" alt="">
      <span>添加收货地址</span>
  </div> -->
			</div>

			<div class="userdit" ref="marinaddress">
				<div class="alledit" @click="onAdd()">
					<img src="../../static/images/adddress.png" alt="" />
					<span>添加收货地址</span>
				</div>
			</div>
		</div>
		<div class="rc-button">
			<div class="rc-footbutton" @click="onAdd()"><span>新增收货地址</span></div>
		</div>
		<MyFooter></MyFooter>
	</div>
</template>

<script>
import Myheader from '~/components/header.vue';
import MyFooter from '~/components/rc-footer.vue';
import tabs from '~/components/tabs.vue';
import { selectaddress, editupdate, editdelete } from '../../ajax/getData';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			crumbs: [
				{
					path: '/personal/mypersonal/'
				},
				{
					path: '/useraddress/openaddress/'
				}
			],
			chosenAddressId: '1',
			checked: true,
			userid: null,
			userlist: [],
			usermessage: null,
			list: []
		};
	},
	methods: {
		changeadddress(item, index) {
			console.log(item, index);
			console.log(item.isDefault);
			if (item.isDefault == false) {
				item.isDefault = true;
			} else {
				item.isDefault = false;
			}

			this.editupdate(this.userid, item.id, item.isDefault);
			setTimeout(() => {
				this.editaddress();
			}, 200);
			//
		},
		onEdit(item, index) {
			// let userid = item.id;
			console.log(item);
			// debugger
			this.$router.push({
				path: '/useraddress/editaddress',
				query: {
					recipient: item.recipient,
					recipientPhone: item.recipientPhone,
					detailAddress: item.detailAddress,
					id: item.id,
					provinceName: item.provinceName,
					districtName: item.cityName,
					cityName: item.districtName,
					provinceId: item.provinceId,
					districtId: item.districtId,
					cityId: item.cityId
				}
			});
		},
		onAdd(item, index) {
			// let userid = item.id;
			// console.log(item);
			this.$router.push({
				path: '/useraddress/addaddress'
				// query: {
				//   id: userid,
				// },
			});
		},

		//更改地址
		async editupdate(userid, addressid, isDefault) {
			let useradd = {
				memberId: userid,
				id: addressid,
				isDefault: isDefault
			};

			let data = await editupdate(useradd);
			if (data) {
				this.$message({
					type: 'warning',
					message: '更改成功'
				});
			}
			//   if(data){
			//  this.editaddress();
			//   }
		},

		//删除地址
		async userdelete(item) {
			console.log(item.memberId);
			let data = await editdelete(this.userid, item.id);
			if (data) {
				this.$message({
					type: 'warning',
					message: '地址删除成功'
				});
			}
			this.editaddress();
			console.log(data);
		},
		//查询人的所有地址
		async editaddress(user) {
			let data = await selectaddress(this.userid);
			this.list = data.data;
			// console.log(this.list);
		},
		/* 初始化数据 */
		async resetData(){
			this.usermessage = this.userInfo;
			this.userid = this.userInfo.id;
			this.editaddress(this.userid);
		}
	},
	components: {
		Myheader,
		MyFooter,
		tabs
	},

	
	computed:{
		...mapState({
			userInfo : state => state.user.userInfo,
		})
	},
	watch:{
		userInfo(newVal){
			this.resetData(newVal);
		}
	},
	mounted() {
		//地址的查询
		// this.usermessage = JSON.parse(localStorage.getItem('userInfo'));
		if(this.userInfo){
			this.resetData();
		}
	},
};
</script>

<style lang="less" scoped>
@import url('../../assets/css/openaddress.less');
</style>