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

154 lines
3.5 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-04-09 15:03:39
* @Description: file content
-->
<template>
<view class="container">
<view class="address">
<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 :checked="item.id === selectedId" @click="changeAds(item)"/>
<view>
<view class="addressItem--city">{{item.province}}{{item.city}}{{item.area}}</view>
<view class="addressItem--detail">{{item.detailAddress}}</view>
<view>
<text class="addressItem--name">{{item.name}}</text>
<text>{{item.phone}}</text>
</view>
</view>
<image class="addressItem--edit" src="@/static/account/edit.png"
@click="$Router.push(`/addressEdit?id=${item.id}`)" />
</view>
</view>
<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';
export default {
components: { BsEmpty, UiButton },
data() {
const {query} = this.$Route;
return {
query:{
type : query.type,
id : query.id,
// 来源,选择地址时触发全局事件时的标记 submitOrder 提交订单
source : query.source
},
addresList : [],
isLoading : true
};
},
computed:{
selectedId (){
const defaultAddress = this.addresList.find(i => i.isDefault);
return this.query.id || defaultAddress.id;
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(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);
},
/**
* 选择地址
*/
changeAds(item){
// 改变地址后触发全局事件把当前选中地址传入。不能使用VUEX实现因为选择地址只针对当前订单的操作
uni.$emit('changeAddress',item, this.query.source);
this.$Router.back();
}
},
};
</script>
<style lang="scss" scoped>
page{
background: $color-grey1;
}
.address{
background: $color-grey0;
}
.addressItem{
height: 188rpx;
margin-left: 40rpx;
padding-right: 40rpx;
border-bottom: 1px solid $color-grey2;
display: flex;
justify-content: space-between;
align-items: center;
font-size: $font-size-sm;
color: $color-grey4;
&--detail{
font-size: $font-size-base;
color: $color-grey6;
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;
border-radius: 4rpx;
padding: 4rpx 6rpx;
margin-left: 20rpx;
}
}
&__last{
border: 0;
}
}
.addAddress{
position: fixed;
bottom: 89rpx;
left: 30rpx;
display: flex;
align-items: center;
justify-content: center;
&::before{
display: inline-block;
content: "+";
margin-right: 20rpx;
font-size: 46rpx;
font-weight: bold;
padding-top: 10rpx;
}
}
</style>