H5-ThreeDoorder/components/add-address/add-address.vue

123 lines
2.2 KiB
Vue

<template>
<view class="bm-Address" @tap="choice">
<view class="bm-Address-UserInfor">
<view class="bm-Address-UserInfor-name">
{{item['name']}}
</view>
<view class="bm-Address-UserInfor-phone">
{{setphone}}
</view>
<view class="defaults" v-if="item['is_default']">
默认
</view>
<!-- <view class="residence">
</view> -->
<!-- <view class="company">
公司
</view> -->
</view>
<view class="bm-Address-Infor">
<view class="bm-Address-Infor-Area">
{{item['region']}}-{{item['address']}}
</view>
<view class="bm-Address-Infor-edit" @tap.stop="editClick">
<image class="img" src="https://img.agrimedia.cn/chwl/diy/edit.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
name:"add-address",
props:{
item:{
type:Object,
default:()=>{}
}
},
data() {
return {
};
},
computed:{
setphone(){
let str = this['item']['mobile'];
str = str.replace(str.slice(3,7),"****")
return str;
}
},
methods:{
// 点击
choice(){
this.$emit('choice',this['item'])
},
// 编辑
editClick(){
uni.navigateTo({
url:`/pages/diy/addposition/addposition?add_id=${this['item']['add_id']}`
})
}
}
}
</script>
<style lang="scss">
.bm-Address{
padding: 32rpx;
background-color: #ffffff;
margin-bottom: 32rpx;
&-UserInfor{
display: flex;
align-items: center;
font-size: 28rpx;
margin-bottom: 24rpx;
&-name{
min-width: 150rpx;
}
&-phone{
margin-right: 15rpx;
}
.defaults,.residence,.company{
color: #ffffff;
text-align: center;
padding: 5rpx 10rpx;
margin: 0 15rpx;
border-radius: 7rpx;
border: none;
overflow: hidden;
}
// 默认
.defaults{
background-color: #FD8F3B;
}
// 家
.residence{
background-color: #3191fd;
}
// 公司
.company{
background-color: #bde577;
}
}
&-Infor{
display: flex;
justify-content:space-between;
&-Area{
font-size: 28rpx;
max-width: 630rpx;
min-width: 630rpx;
}
&-edit{
.img{
width: 30rpx;
height: 30rpx;
}
}
}
}
</style>