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

116 lines
2.2 KiB

<!--
* @Author: ch
* @Date: 2022-03-22 13:54:15
* @LastEditors: ch
* @LastEditTime: 2022-03-30 14:54:44
* @Description: file content
-->
<template>
<view class="container">
<view class="address">
<BsEmpty tips="暂无收货地址呢~"></BsEmpty>
<view class="addressItem" v-for="item in 2" :key="item"
:class="{'addressItem__last' : item === 2,'addressItem__default':item == 1}">
<view>
<view class="addressItem--city">湖南省长沙市岳麓区</view>
<view class="addressItem--detail">西上海大厦芯城科技园8栋13楼</view>
<view>
<text class="addressItem--name">马老师</text>
<text>189****0000</text>
</view>
</view>
<image class="addressItem--edit" src="@/static/account/edit.png"
@click="$Router.push('/addressEdit')" />
</view>
</view>
<UiButton class="addAddress" type="solid" size="max" @click="$Router.push('/addressCreate')"></UiButton>
</view>
</template>
<script>
import BsEmpty from "@/components/BsEmpty";
import UiButton from '../../../components/UiButton.vue';
export default {
components: { BsEmpty, UiButton },
data() {
return {};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {},
/**
* 生命周期函数--监听页面显示
*/
onShow() {},
methods: {},
};
</script>
<style lang="scss" scoped>
page{
background: #f8f8f8;
}
.address{
background: #fff;
}
.addressItem{
height: 188rpx;
margin-left: 40rpx;
padding-right: 40rpx;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #999;
&--detail{
font-size: 28rpx;
color: #333;
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: #FF512B;
color: #fff;
border-radius: 4rpx;
padding: 4rpx 6rpx;
margin-left: 20rpx;
}
}
&__last{
border: 0;
}
}
.addAddress{
position: fixed;
bottom: 89rpx;
left: 30rpx;
&::before{
display: inline-block;
content: "+";
margin-right: 20rpx;
font-size: 46rpx;
font-weight: bold;
padding-top: 10rpx;
}
}
</style>