You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/account/address/list.vue

177 lines
4.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Author: ch
* @Date: 2022-03-22 13:54:15
* @LastEditors: ch
* @LastEditTime: 2022-05-07 16:24:34
* @Description: file content
-->
<template>
<view class="container">
<BsEmpty tips="暂无收货地址呢~" v-if="!isLoading && !addresList.length"></BsEmpty>
<u-loadmore v-if="isLoading" status="loading" />
<UiWhiteBox class="address-item" v-for="(item) in addresList" :key="item.id"
:class="{'address-item__default':item.isDefault}">
<radio class="address-item--radio" v-if="query.source == 'submitOrder'" color="#FF875B"
:checked="item.id == selectedId" @click="changeAds(item)"/>
<view class="address-item--con" @click="changeAds(item)">
<view class="address-item--city">{{item.province}}{{item.city}}{{item.area}}</view>
<view class="address-item--detail">{{item.detailAddress}}</view>
<view class="address-item--info">
<text class="address-item--name">{{item.name}}</text>
<text>{{item.phone}}</text>
</view>
</view>
<image class="address-item--edit" src="@/static/account/edit.png"
@click="$Router.push(`/addressEdit?id=${item.id}`)" />
</UiWhiteBox>
<UiButton class="addAddress" type="solid" size="max"
@click="$Router.push(`/addressCreate?first=${!addresList.length}`)">新增地址</UiButton>
</view>
</template>
<script>
import BsEmpty from "@/components/BsEmpty";
import UiButton from '../../../components/UiButton.vue';
import {ApiGetAddress} from '@/common/api/base';
import UiWhiteBox from '../../../components/UiWhiteBox.vue';
export default {
components: { BsEmpty, UiButton, UiWhiteBox },
data() {
const {query} = this.$Route;
return {
query:{
// 选中地址ID
id : query.id,
// 来源,选择地址时触发全局事件时的标记 submitOrder 提交订单
source : query.source
},
addresList : [],
isLoading : true
};
},
computed:{
selectedId :{
get(){
const queryId = this.query.id,
defaultAddress = this.addresList.find(i => i.isDefault) || {};
return queryId || defaultAddress.id;
},
set(val){
// 改变地址后触发全局事件把当前选中地址传入。不能使用VUEX实现因为选择地址只针对当前订单的操作
uni.$emit('changeAddress',this.addresList.find(i => i.id == val) || {}, this.query.source);
}
}
},
onShow(options) {
this.getAddressList();
},
methods: {
async getAddressList(){
this.isLoading = true;
const {error, result} = await ApiGetAddress();
this.isLoading = false;
if(error){
uni.$u.toast(error.message);
return false;
}
this.addresList = result;
this.$store.commit('SET_ADDRESS', result);
if(this.query.source === 'submitOrder'){
// 每次刷新列表都做一次提交订单页的选中地址更新
uni.$emit('changeAddress',this.addresList.find(i => i.id == this.selectedId) || {}, this.query.source);
}
},
/**
* 选择地址
*/
changeAds(item){
if(this.query.source == 'submitOrder'){
this.selectedId = item.id;
this.$Router.back();
}
}
},
};
</script>
<style lang="scss">
page {
background: $color-grey1;
padding-bottom: 200rpx;
}
</style>
<style lang="scss" scoped>
.address{
background: $color-grey0;
}
.address-item{
height: 188rpx;
padding: 0 40rpx 0 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
&--radio{
// width: 40rpx;
transform: scale(60%);
}
&--con{
flex: 1;
margin-left: 10rpx;
}
&--city{
font-size: $font-size-sm;
color: $color-grey4;
}
&--detail{
font-size: $font-size-base;
color: $color-grey6;
margin: 20rpx 0;
}
&--info text{
font-size: $font-size-sm;
color: $color-grey4;
}
&--name{
margin-right: 46rpx;
}
&--edit{
width: 26rpx;
height: 26rpx;
}
&__default .address-item--city{
display: flex;
align-items: center;
// max-width: 400rpx;
&::after{
display: block;
content: '默认';
background: $color-yellow4;
color: $color-grey0;
border-radius: 4rpx;
padding: 4rpx 6rpx;
margin-left: 20rpx;
width: 62rpx;
}
}
&__last{
border: 0;
}
}
.addAddress{
position: fixed;
bottom: 89rpx;
left: 30rpx;
display: flex;
align-items: center;
justify-content: center;
width: 670rpx;
}
</style>