12 changed files with 370 additions and 261 deletions
@ -1,245 +1,289 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="stabar"></view> |
|||
<view class="secbar"><label class="back" @click="back()"></label> |
|||
<view class="title">联系地址</view> |
|||
</view> |
|||
<view class="cart-container"> |
|||
<!-- 选择收货地址的盒子 --> |
|||
<view class="address-choose-box"> |
|||
<button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">新增地址+</button> |
|||
</view> |
|||
|
|||
<!-- 底部的边框线 --> |
|||
<image src="/static/cart_border@2x.png" class="address-border"></image> |
|||
|
|||
<!-- 循环渲染地址信息 --> |
|||
|
|||
<view> |
|||
<uni-swipe-action> |
|||
<block v-for="(item, i) in addressList" :key="i"> |
|||
<uni-swipe-action-item :right-options="options" @click="swipeItemClickHandler(item)"> |
|||
<view class="address-info-box"> |
|||
<view class="row1"> |
|||
<view class="row1-left"> |
|||
<view class="username">收货人：{{item.name}}</view> |
|||
</view> |
|||
<view class="row1-right"> |
|||
<view class="phone">电话：{{item.mobile}}</view> |
|||
<uni-icons type="arrowright" size="16"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view class="row2"> |
|||
<view class="row2-left">收货地址：</view> |
|||
<view class="row2-right">{{item.address}}</view> |
|||
</view> |
|||
</view> |
|||
</uni-swipe-action-item> |
|||
</block> |
|||
</uni-swipe-action> |
|||
<view class="wrap"> |
|||
<view class="stabar"></view> |
|||
<view class="secbar"><label class="back" @click="back()"></label> |
|||
<view class="title">联系地址</view> |
|||
</view> |
|||
<view class="mainwrap2"> |
|||
<view class="subwrap"> |
|||
|
|||
|
|||
<!-- 底部的边框线 --> |
|||
<image src="/static/cart_border@2x.png" class="address-border"></image> |
|||
|
|||
<!-- 循环渲染地址信息 --> |
|||
|
|||
<view> |
|||
<uni-swipe-action> |
|||
<block v-for="(item, i) in addressList" :key="i"> |
|||
<uni-swipe-action-item :right-options="options" @click="swipeItemClickHandler(item)"> |
|||
<view class="address-info-box"> |
|||
<view class="row1"> |
|||
<view class="row1-left"> |
|||
<view class="username">收货人：{{item.name}}</view> |
|||
</view> |
|||
<view class="row1-right"> |
|||
<view class="phone">电话：{{item.mobile}}</view> |
|||
<uni-icons type="arrowright" size="16"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view class="row2"> |
|||
<view class="row2-left">收货地址：</view> |
|||
<view class="row2-right">{{item.address}}</view> |
|||
</view> |
|||
</view> |
|||
</uni-swipe-action-item> |
|||
</block> |
|||
</uni-swipe-action> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 选择收货地址的盒子 --> |
|||
<view class="address-choose-box"> |
|||
<button type="primary" size="mini" class="uni-button" @click="chooseAddress">批量刪除</button> |
|||
<button type="primary" size="mini" class="uni-button" @click="chooseAddress">新增地址</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations, mapGetters } from 'vuex' |
|||
import addressVue from './address.vue'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
options: [{ |
|||
text: '删除', |
|||
style: { |
|||
backgroundColor: '#C00000' |
|||
} |
|||
}], |
|||
addressList:[] |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.initAddress(); |
|||
}, |
|||
methods: { |
|||
...mapMutations('m_user', ['updateAddress']), |
|||
async initAddress(){ |
|||
const { |
|||
data: res |
|||
} = await uni.$http.post('/small/project/address/listAll',{userId:this.userId}) |
|||
if (!res.success) return uni.$showMsg() |
|||
this.addressList = res.data; |
|||
}, |
|||
async chooseAddress() { |
|||
const [err, succ] = await uni.chooseAddress().catch(err => err) |
|||
if (err === null && succ.errMsg === 'chooseAddress:ok') { |
|||
this.updateAddress(succ) |
|||
|
|||
const addressObj = { |
|||
userId: this.userId, |
|||
name: succ.userName, |
|||
mobile: succ.telNumber, |
|||
address: succ.provinceName + succ.cityName + succ.countyName + succ.detailInfo |
|||
} |
|||
this.addressList.push(addressObj) |
|||
|
|||
const { |
|||
data: res |
|||
} = await uni.$http.post('/small/project/address/add',addressObj) |
|||
if (!res.success) return uni.$showMsg() |
|||
this.initAddress(); |
|||
} |
|||
|
|||
if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response')) { |
|||
// 通过调用这个方法，让用户重新授权 |
|||
this.reAuth() |
|||
} |
|||
}, |
|||
// 让用户重新授权 |
|||
async reAuth() { |
|||
const [err2, confirmResult] = await uni.showModal({ |
|||
content: '检测到您没打开地址权限，是否去设置打开？', |
|||
confirmText: '确认', |
|||
cancelText: '取消' |
|||
}) |
|||
|
|||
if (err2) return |
|||
|
|||
console.log(confirmResult) |
|||
|
|||
if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权！') |
|||
if (confirmResult.confirm) return uni.openSetting({ |
|||
success: (settingResult) => { |
|||
if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了授权！') |
|||
if (settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功！请选择地址') |
|||
} |
|||
}) |
|||
}, |
|||
async swipeItemClickHandler(item){ |
|||
this.addressList = this.addressList.filter(x=>x.guid!=item.guid); |
|||
const { |
|||
data: res |
|||
} = await uni.$http.post('/small/project/address/remove',item.guid) |
|||
if (!res.success) return uni.$showMsg() |
|||
}, |
|||
back(){ |
|||
uni.navigateBack({ |
|||
delta:1,//返回层数，2则上上页 |
|||
}) |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState('m_user', ['address','userId']), |
|||
...mapGetters('m_user', ['addstr']) |
|||
} |
|||
} |
|||
import { |
|||
mapState, |
|||
mapMutations, |
|||
mapGetters |
|||
} from 'vuex' |
|||
import addressVue from './address.vue'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
options: [{ |
|||
text: '删除', |
|||
style: { |
|||
backgroundColor: '#C00000' |
|||
} |
|||
}], |
|||
addressList: [] |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.initAddress(); |
|||
}, |
|||
methods: { |
|||
...mapMutations('m_user', ['updateAddress']), |
|||
async initAddress() { |
|||
const { |
|||
data: res |
|||
} = await uni.$http.post('/small/project/address/listAll', { |
|||
userId: this.userId |
|||
}) |
|||
if (!res.success) return uni.$showMsg() |
|||
this.addressList = res.data; |
|||
}, |
|||
async chooseAddress() { |
|||
const [err, succ] = await uni.chooseAddress().catch(err => err) |
|||
if (err === null && succ.errMsg === 'chooseAddress:ok') { |
|||
this.updateAddress(succ) |
|||
|
|||
const addressObj = { |
|||
userId: this.userId, |
|||
name: succ.userName, |
|||
mobile: succ.telNumber, |
|||
address: succ.provinceName + succ.cityName + succ.countyName + succ.detailInfo |
|||
} |
|||
this.addressList.push(addressObj) |
|||
|
|||
const { |
|||
data: res |
|||
} = await uni.$http.post('/small/project/address/add', addressObj) |
|||
if (!res.success) return uni.$showMsg() |
|||
this.initAddress(); |
|||
} |
|||
|
|||
if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === |
|||
'chooseAddress:fail authorize no response')) { |
|||
// 通过调用这个方法，让用户重新授权 |
|||
this.reAuth() |
|||
} |
|||
}, |
|||
// 让用户重新授权 |
|||
async reAuth() { |
|||
const [err2, confirmResult] = await uni.showModal({ |
|||
content: '检测到您没打开地址权限，是否去设置打开？', |
|||
confirmText: '确认', |
|||
cancelText: '取消' |
|||
}) |
|||
|
|||
if (err2) return |
|||
|
|||
console.log(confirmResult) |
|||
|
|||
if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权！') |
|||
if (confirmResult.confirm) return uni.openSetting({ |
|||
success: (settingResult) => { |
|||
if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了授权！') |
|||
if (settingResult.authSetting['scope.address']) return uni.$showMsg( |
|||
'授权成功！请选择地址') |
|||
} |
|||
}) |
|||
}, |
|||
async swipeItemClickHandler(item) { |
|||
this.addressList = this.addressList.filter(x => x.guid != item.guid); |
|||
const { |
|||
data: res |
|||
} = await uni.$http.post('/small/project/address/remove', item.guid) |
|||
if (!res.success) return uni.$showMsg() |
|||
}, |
|||
back() { |
|||
uni.navigateBack({ |
|||
delta: 1, //返回层数，2则上上页 |
|||
}) |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState('m_user', ['address', 'userId']), |
|||
...mapGetters('m_user', ['addstr']) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import url("@/static/base_css.css"); |
|||
.address-border { |
|||
display: block; |
|||
width: 100%; |
|||
height: 5px; |
|||
} |
|||
|
|||
.address-choose-box { |
|||
height: 90px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.address-info-box { |
|||
font-size: 12px; |
|||
height: 90px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
padding: 0 5px; |
|||
|
|||
.row1 { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.row1-right { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
.row2 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
|
|||
.row2-left { |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cart-container { |
|||
padding-bottom: 50px; |
|||
padding: 6% 3%; |
|||
|
|||
} |
|||
|
|||
.cart-title { |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 5px; |
|||
border-bottom: 1px solid #EFEFEF; |
|||
|
|||
.cart-title-text { |
|||
font-size: 14px; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.goods-item { |
|||
width: 750rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
padding: 10px 5px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.goods-item-left { |
|||
margin-right: 5px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.goods-pic { |
|||
width: 100px; |
|||
height: 100px; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.goods-item-right { |
|||
display: flex; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
.goods-name { |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.goods-info-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.goods-price { |
|||
color: #C00000; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@import url("@/static/base_css.css"); |
|||
.mainwrap2 { |
|||
height: calc(100% - 350rpx); |
|||
} |
|||
|
|||
.address-border { |
|||
display: block; |
|||
width: 100%; |
|||
height: 5px; |
|||
} |
|||
|
|||
.address-choose-box { |
|||
display: flex; |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 10rpx 0 50rpx 0; |
|||
width: 100vw; |
|||
height: 90rpx; |
|||
border-top: 1px solid #ddd; |
|||
background-color: #fff; |
|||
|
|||
.uni-button { |
|||
margin: 1% 2%; |
|||
font-size: 30rpx; |
|||
width: 55%; |
|||
height: 70rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #1367fe; |
|||
border: 1px solid #1367fe; |
|||
border-radius: 50rpx; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.uni-button:first-child { |
|||
width: 35%; |
|||
background-color: #fff; |
|||
color: #1367fe; |
|||
} |
|||
} |
|||
|
|||
.address-info-box { |
|||
display: flex; |
|||
margin: 10rpx 0; |
|||
padding: 0 10px; |
|||
height: 180rpx; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
font-size: 30rpx; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
|
|||
.row1 { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.row1-right { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
.row2 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
|
|||
.row2-left { |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cart-container { |
|||
padding-bottom: 50px; |
|||
padding: 6% 3%; |
|||
|
|||
} |
|||
|
|||
.cart-title { |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 5px; |
|||
border-bottom: 1px solid #EFEFEF; |
|||
|
|||
.cart-title-text { |
|||
font-size: 14px; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.goods-item { |
|||
width: 750rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
padding: 10px 5px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.goods-item-left { |
|||
margin-right: 5px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.goods-pic { |
|||
width: 100px; |
|||
height: 100px; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.goods-item-right { |
|||
display: flex; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
.goods-name { |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.goods-info-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.goods-price { |
|||
color: #C00000; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue