购物车-收货地址——计算属性-组合地址-es6中推出的``方式拼接字符串 & wx.chooseAddress()调用
收货地址
- 基本布局
<!-- 地址信息的展示 -->
<div class="cart-top" v-if='address'>
<div class="receive">
<div class="name">收货人: 张三</div>
<div class="phonen-number">122345678901</div>
</div>
<div class="address">收货地址: 北京市海淀区</div>
<img src="../../../static/images/cart_border@2x.png" class="address-bar" mode="aspectFill">
</div>
<!-- 新增收货人信息 -->
<div class="add_addresss" v-else>
<text>新增收货人</text>
<span></span>
</div>
- 获取收货地址
getAddressInfo () {
// 获取地址信息
let that = this
mpvue.chooseAddress({
success (res) {
that.address = res
// 同时存在在本地存储中
// mpvue.setStorageSync('myAddress', res)
}
})
}
实例
在购物车界面pages/cart下的main.less新建样式
.cart-top {
.receive {
display: flex;
padding: 20rpx;
justify-content: space-between;
position: relative;
padding-right: 50rpx;
&:after {
display: block;
content: "";
width: 12px;
height: 12px;
border-top: 1px #999 solid;
border-right: 1px #999 solid;
transform: rotate(45deg);
position: absolute;
right: 20rpx;
top: 20rpx;
margin-top: 6px;
}
}
.address {
padding: 20rpx;
padding-top: 0;
}
.address-bar {
width: 100%;
height: 8px;
}
}
.add_addresss {
padding: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
span {
display: block;
width: 12px;
height: 12px;
border-top: 1px #999 solid;
border-right: 1px #999 solid;
transform: rotate(45deg);
}
}
.list-title {
padding: 20rpx;
border-bottom: 1px #eee solid;
border-top: 10px #eee solid;
}
.ware-list {
padding-bottom: 100rpx;
}
.ware-item {
padding: 20rpx;
padding-bottom: 0;
display: flex;
align-items: center;
.choice-button {
flex-shrink: 0;
text-align: center;
margin-right: 20rpx;
}
}
.ware-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.ware-content {
display: flex;
flex: 1;
justify-content: space-between;
border-bottom: 1px #eee solid;
padding-bottom: 20rpx;
}
.ware-image {
img {
display: block;
width: 200rpx;
height: 200rpx;
}
}
.ware-info {
flex: 1;
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ware-info-btm {
display: flex;
justify-content: space-between;
.ware-price {
color: red;
}
}
.calculate {
display: flex;
}
.rect {
width: 20px;
text-align: center;
border: 1px #999 solid;
line-height: 1.2;
}
.number {
margin: 0 10px;
}
.cart-total {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
.total-button {
padding-left: 20px;
icon {
margin-right: 10px;
}
}
.total-center {
flex: 1;
padding: 20rpx;
.colorRed {
color: red;
}
.price-tips {
font-size: 14px;
color: #666;
}
}
.accounts {
width: 30%;
height: 100rpx;
background: red;
color: #fff;
line-height: 100rpx;
text-align: center;
}
}
在cart/index.vue中进行导入
<style scoped lang="less">
@import './main.less';
</style>
地址结构
地址显示
新增地址
新增地址效果,二选一,只显示一个
选择地址
收货地址api——https://developers.weixin.qq.com/miniprogram/dev/api/open-api/address/wx.chooseAddress.html
<template>
<div>
<div class="cart-top">
<div class="receive">
<div class="name">收货人:张三 </div>
<div class="phone-number">122345678901 </div>
</div>
<div>收货地址:北京市海淀区 </div>
<img src="../../../static/images/cart_border@2x.png" class="address-bar" mode="aspectFill">
</div>
</div>
<div @click='chooseAddress' class="add_addresss" v-else>
<text>新增收货人</text>
<span></span>
</div>
</template>
<script>
export default {
data () {
return {
address: null,
cart: null
}
},
methods:{
chooseAddress () {
// 选择收货地址
wx.chooseAddress({
success: (res) => {
//console.log(res)
// 获取地址信息后更新data中的数据
this.address = res
}
})
}
}
}
</script>
<style scoped lang="less">
@import './main.less';
</style>
打印收获地址res
动态获取地址
<!-- 收货地址 -->
<div class="cart-top" v-if='address'>
<div class="receive">
<div class="name">收货人: {{address.userName}}</div>
<div class="phonen-number">{{address.telNumber}}</div>
</div>
<div class="address">收货地址: {{detailAddress}}</div>
<img src="../../../static/images/cart_border@2x.png" class="address-bar" mode="aspectFill">
</div>
<div @click='chooseAddress' class="add_addresss" v-else>
<text>新增收货人</text>
<span></span>
</div>
拼接收获地址
<script>
export default {
data () {
return {
address: null,
cart: null
}
},
computed: {
detailAddress: function () {
// 组合详细地址 计算属性-字符串拼接收货地址
if (this.address === null) {
return ''
}
let { provinceName, cityName, countyName, detailInfo } = this.address
let detail = `${provinceName}${cityName}${countyName}${detailInfo}`
return detail
}
},
methods:{
chooseAddress () {
// 选择收货地址
wx.chooseAddress({
success: (res) => {
//console.log(res)
// 获取地址信息后更新data中的数据
this.address = res
}
})
}
}
}
1、默认为空
2、有数据选择
3、动态数据呈现