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

151 lines
3.5 KiB

3 years ago
<!--
* @Author: ch
* @Date: 2022-03-22 13:54:15
* @LastEditors: ch
* @LastEditTime: 2022-04-21 14:18:12
3 years ago
* @Description: file content
-->
<template>
3 years ago
<view class="container">
<view class="address">
3 years ago
<u-loadmore v-if="isLoading" status="loading" />
<BsEmpty tips="暂无收货地址呢~" v-if="!isLoading && !addresList.length"></BsEmpty>
<view class="addressItem" v-for="(item, index) in addresList" :key="item.id"
:class="{'addressItem__last' : index === addresList.length - 1,'addressItem__default':item.isDefault}">
<radio v-if="query.source" :checked="item.id === selectedId" @click="changeAds(item)"/>
3 years ago
<view>
3 years ago
<view class="addressItem--city">{{item.province}}{{item.city}}{{item.area}}</view>
<view class="addressItem--detail">{{item.detailAddress}}</view>
3 years ago
<view>
3 years ago
<text class="addressItem--name">{{item.name}}</text>
<text>{{item.phone}}</text>
3 years ago
</view>
</view>
<image class="addressItem--edit" src="@/static/account/edit.png"
3 years ago
@click="$Router.push(`/addressEdit?id=${item.id}`)" />
3 years ago
</view>
</view>
<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';
3 years ago
export default {
components: { BsEmpty, UiButton },
data() {
const {query} = this.$Route;
3 years ago
return {
query:{
type : query.type,
id : query.id,
// 来源,选择地址时触发全局事件时的标记 submitOrder 提交订单
source : query.source,
status : query.status
},
3 years ago
addresList : [],
isLoading : true
};
3 years ago
},
computed:{
selectedId (){
const defaultAddress = this.addresList.find(i => i.isDefault);
return Number(this.query.id) || defaultAddress.id;
}
},
onShow(options) {
3 years ago
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);
},
/**
* 选择地址
*/
changeAds(item){
// 改变地址后触发全局事件把当前选中地址传入。不能使用VUEX实现因为选择地址只针对当前订单的操作
uni.$emit('changeAddress',item, this.query.source);
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
}
.addressItem{
height: 188rpx;
margin-left: 40rpx;
padding-right: 40rpx;
border-bottom: 1px solid $color-grey2;
3 years ago
display: flex;
justify-content: space-between;
align-items: center;
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;
}
&--name{
margin-right: 46rpx;
}
&--edit{
width: 26rpx;
height: 26rpx;
}
&__default .addressItem--city{
display: flex;
align-items: center;
&::after{
display: block;
content: '默认';
background: $color-yellow4;
color: $color-grey0;
3 years ago
border-radius: 4rpx;
padding: 4rpx 6rpx;
margin-left: 20rpx;
}
}
&__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>