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