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

179 lines
4.2 KiB

3 years ago
<!--
* @Author: ch
* @Date: 2022-03-22 13:54:15
* @LastEditors: ch
* @LastEditTime: 2022-04-21 21:01:49
3 years ago
* @Description: file content
-->
<template>
3 years ago
<view class="container">
3 years ago
<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">
<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>
3 years ago
<text>{{item.phone}}</text>
3 years ago
</view>
</view>
<image class="address-item--edit" src="@/static/account/edit.png"
3 years ago
@click="$Router.push(`/addressEdit?id=${item.id}`)" />
</UiWhiteBox>
3 years ago
<UiButton class="addAddress" type="solid" size="max"
@click="$Router.push(`/addressCreate?first=${!addresList.length}`)">新增地址</UiButton>
3 years ago
</view>
3 years ago
</template>
<script>
3 years ago
import BsEmpty from "@/components/BsEmpty";
import UiButton from '../../../components/UiButton.vue';
3 years ago
import {ApiGetAddress} from '@/common/api/base';
import UiWhiteBox from '../../../components/UiWhiteBox.vue';
3 years ago
export default {
components: { BsEmpty, UiButton, UiWhiteBox },
3 years ago
data() {
const {query} = this.$Route;
3 years ago
return {
query:{
// 选中地址ID
id : query.id,
// 来源,选择地址时触发全局事件时的标记 submitOrder 提交订单
source : query.source
},
3 years ago
addresList : [],
isLoading : true
};
3 years ago
},
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) {
3 years ago
this.getAddressList();
},
methods: {
async getAddressList(){
this.isLoading = true;
3 years ago
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){
this.selectedId = item.id;
this.$Router.back();
3 years ago
}
},
3 years ago
};
3 years ago
</script>
<style lang="scss" scoped>
3 years ago
page{
background: $color-grey1;
3 years ago
}
.address{
background: $color-grey0;
3 years ago
}
.address-item{
3 years ago
height: 188rpx;
padding: 0 40rpx 0 30rpx;
3 years ago
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;
}
3 years ago
&--detail{
font-size: $font-size-base;
color: $color-grey6;
3 years ago
margin: 20rpx 0;
}
&--info text{
font-size: $font-size-sm;
color: $color-grey4;
3 years ago
}
&--name{
margin-right: 46rpx;
}
&--edit{
width: 26rpx;
height: 26rpx;
}
&__default .address-item--city{
3 years ago
display: flex;
align-items: center;
// max-width: 400rpx;
3 years ago
&::after{
display: block;
content: '默认';
background: $color-yellow4;
color: $color-grey0;
3 years ago
border-radius: 4rpx;
padding: 4rpx 6rpx;
margin-left: 20rpx;
width: 62rpx;
3 years ago
}
}
&__last{
border: 0;
}
}
.addAddress{
position: fixed;
bottom: 89rpx;
left: 30rpx;
3 years ago
display: flex;
align-items: center;
justify-content: center;
3 years ago
&::before{
display: inline-block;
content: "+";
margin-right: 20rpx;
font-size: 46rpx;
font-weight: bold;
padding-top: 10rpx;
}
}
3 years ago
</style>