Skip to content

J
jd-vx-app
Commit 77869420 authored by lijiongliang's avatar lijiongliang
Browse files
Options

加购商品修改

parent f92c0bbc
Hide whitespace changes
Inline Side-by-side
Showing with 1048 additions and 985 deletions
pagesA/pages/index/getCarCode.vue
View file @ 77869420
...@@ -3,747 +3,794 @@ ...@@ -3,747 +3,794 @@
* @Description: 获取挪车码 * @Description: 获取挪车码
--> -->
<template> <template>
<view class="appCotent"> <view class="appCotent">
<div class="getCarCode"> <div class="getCarCode">
<div class="get__content"> <div class="get__content">
<div class="content__code"> <div class="content__code">
<div class="code__img"> <div class="code__img">
<image :src="freeCode.mainImgUrl" class="code__img"></image> <image :src="freeCode.mainImgUrl" class="code__img"></image>
</div> </div>
<div class="code__money"> <div class="code__money">
<div class="money__title"> <div class="money__title">
<text>{{freeCode.title}}</text> <text>{{freeCode.title}}</text>
</div> </div>
<div class="code__tips"> <div class="code__tips">
<text>{{freeCode.spec}}</text> <text>{{freeCode.spec}}</text>
</div> </div>
<div class="money__num"> <div class="money__num">
<text class="num__one">￥0.00</text> <text class="num__one">￥0.00</text>
</div> </div>
</div> </div>
</div> </div>
<u-gap bgColor="transparent" height="20"></u-gap> <u-gap bgColor="transparent" height="20"></u-gap>
<div class="content__list"> <div class="content__list">
<div class="list__title"> <div class="list__title">
超低价养车好物 超低价养车好物
</div> </div>
<u-gap bgColor="transparent" height="20"></u-gap> <u-gap bgColor="transparent" height="20"></u-gap>
<div class="list"> <div class="list">
<div class="list__item" v-for="(vo,inx) in mallList" :key="inx"> <div class="list__item" v-for="(vo,inx) in mallList" :key="inx">
<image :src="vo.mainImgUrl" class="list__img"></image> <image :src="vo.mainImgUrl" class="list__img"></image>
<!-- <div class="list__img"> <!-- <div class="list__img">
<image :src="vo.img" /> <image :src="vo.img" />
</div> --> </div> -->
<div class="list__money"> <div class="list__money">
<div class="money__title clamp2"> <view class="tag">
<text>{{vo.title}}</text> 包邮
</div> </view>
<div class="code__tips clamp1"> <div class="money__title clamp2">
<text>{{vo.spec}}</text> <text>{{vo.title}}</text>
</div> </div>
<div class="money__num"> <div class="code__tips clamp1">
<text class="num__one">¥{{vo.currentPrice/100}}</text> <text>{{vo.spec}}</text>
<text class="num__two">¥{{vo.originalPrice/100}}</text> </div>
</div> <div class="money__num">
</div> <text class="num__one">¥{{vo.currentPrice/100}}</text>
<text class="num__two">¥{{vo.originalPrice/100}}</text>
<u-number-box> </div>
<view slot="minus" class="minus" @click="minusMall(vo)"> </div>
<u-icon name="minus" size="12"></u-icon>
</view> <view class="num-box">
<text slot="input" style="width: 50rpx;text-align: center;" class="input"> <u-number-box>
{{mallSelectMap[vo.id]?mallSelectMap[vo.id]:0}} <view slot="minus" class="minus" @click="minusMall(vo)">
</text> <u-icon name="minus" size="12"></u-icon>
<view slot="plus" class="plus" @click="plusMall(vo)"> </view>
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon> <text slot="input" style="width: 50rpx;text-align: center;" class="input">
</view> {{mallSelectMap[vo.id]?mallSelectMap[vo.id]:0}}
</u-number-box> </text>
<view slot="plus" class="plus" @click="plusMall(vo)">
<!-- <u-number-box v-model="mallSelectMap[vo.id]" :min="0" @change="selectMall"> <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
</view>
</u-number-box>
</view>
<!-- <u-number-box v-model="mallSelectMap[vo.id]" :min="0" @change="selectMall">
</u-number-box> --> </u-number-box> -->
<!-- <div class="list__add" @click="add"> <!-- <div class="list__add" @click="add">
<image src="@/static/index/get-car-code2.png" /> <image src="@/static/index/get-car-code2.png" />
</div> --> </div> -->
</div> </div>
</div> </div>
<u-gap bgColor="transparent" height="160"></u-gap> <u-gap bgColor="transparent" height="160"></u-gap>
<div class="address" v-if="addressShow" @click="goAddress"> <div class="address" v-if="addressShow" @click="goAddress">
<div class="address__left"> <div class="address__left">
<div class="right__title"> <div class="right__title">
{{addressInfo.address}}&emsp;{{addressInfo.detailInfo}} {{addressInfo.address}}&emsp;{{addressInfo.detailInfo}}
</div> </div>
<div class="right__phone"> <div class="right__phone">
<span v-if="addressInfo.defaultFlag">默认</span> <span v-if="addressInfo.defaultFlag">默认</span>
<span>{{addressInfo.userName}}</span> <span>{{addressInfo.userName}}</span>
<span>{{addressInfo.telNumber}}</span> <span>{{addressInfo.telNumber}}</span>
</div> </div>
</div> </div>
<div class="address__right"> <div class="address__right">
<image src="@/static/index/right.png" /> <image src="@/static/index/right.png" />
</div> </div>
<u-gap bgColor="transparent" height="15"></u-gap> <u-gap bgColor="transparent" height="15"></u-gap>
</div> </div>
<div v-else class="add__address" @click="addAddress"> <div v-else class="add__address" @click="addAddress">
<image src="@/static/index/get-car-code5.png"> 添加收货地址 <image src="@/static/index/get-car-code5.png"> 添加收货地址
</div> </div>
<view class="fiexd_foot"> <view class="fiexd_foot">
</view> </view>
</div> </div>
</div> </div>
<u-modal :show="show" :content='content' @confirm='show = false'></u-modal> <u-modal :show="show" :content='content' @confirm='show = false'></u-modal>
<u-gap bgColor="transparent" height="65"></u-gap> <u-gap bgColor="transparent" height="65"></u-gap>
<div class="price__bottom"> <div class="price__bottom">
<div class="price"> <div class="price">
<div class="price__num"> <div class="price__num">
共<span>{{countNum}}</span>件 共<span>{{countNum}}</span>件
</div> </div>
<div class="price__all"> <div class="price__all">
合计<span class="num__one">￥{{countMoney/100}}</span> 合计<span class="num__one">￥{{countMoney/100}}</span>
</div> </div>
</div> </div>
<div class="price__next" @click="pay"> <div class="price__next" @click="pay">
立即支付 立即支付
</div> </div>
</div> </div>
</div> </div>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
nums: 0, nums: 0,
show: false, show: false,
addressShow: false, addressShow: false,
content: "地址不能为空", content: "地址不能为空",
items: [{ items: [{
title: '临时停车牌-经典样式', title: '临时停车牌-经典样式',
tip: '静电贴材质 7.1cm*8.9cm', tip: '静电贴材质 7.1cm*8.9cm',
price: '0.00', price: '0.00',
price2: '19.99', price2: '19.99',
img: require('@/static/index/get-car-code1.png') img: require('@/static/index/get-car-code1.png')
}, },
{ {
title: '临时停车牌-经典样式', title: '临时停车牌-经典样式',
tip: '静电贴材质 7.1cm*8.9cm', tip: '静电贴材质 7.1cm*8.9cm',
price: '0.00', price: '0.00',
price2: '19.99', price2: '19.99',
img: require('@/static/index/get-car-code1.png') img: require('@/static/index/get-car-code1.png')
}, },
{ {
title: '临时停车牌-经典样式', title: '临时停车牌-经典样式',
tip: '静电贴材质 7.1cm*8.9cm', tip: '静电贴材质 7.1cm*8.9cm',
price: '0.00', price: '0.00',
price2: '19.99', price2: '19.99',
img: require('@/static/index/get-car-code1.png') img: require('@/static/index/get-car-code1.png')
} }
], ],
//收货地址列表 //收货地址列表
addressList: [], addressList: [],
//选择收货地址id //选择收货地址id
addressId: '', addressId: '',
//选择的收货地址 //选择的收货地址
addressInfo: {}, addressInfo: {},
//免费挪车码 //免费挪车码
freeCode: {}, freeCode: {},
//普通商品列表 //普通商品列表
mallList: [], mallList: [],
value: 0, value: 0,
// //
selectMallList: [], selectMallList: [],
//选择商品的数量 //选择商品的数量
countNum: 1, countNum: 1,
//商品变更为零或者1 //商品变更为零或者1
quantityChange: false, quantityChange: false,
countMoney: 0, countMoney: 0,
mallMoney: 0, mallMoney: 0,
mallSelectMap: {}, mallSelectMap: {},
carNo: '', carNo: '',
} }
}, },
methods: { methods: {
pay() { pay() {
if (!this.addressId) { if (!this.addressId) {
uni.showToast({ uni.showToast({
title: '请添加一个收货地址', title: '请添加一个收货地址',
icon: 'none', icon: 'none',
}) })
} else { } else {
let list = [{ let list = [{
id: this.freeCode.id, id: this.freeCode.id,
nums: 1, nums: 1,
}] }]
let idMap = this.mallSelectMap let idMap = this.mallSelectMap
for (let id in idMap) { for (let id in idMap) {
if (idMap[id] > 0) { if (idMap[id] > 0) {
let commodity = { let commodity = {
id: id, id: id,
nums: idMap[id] nums: idMap[id]
} }
list.push(commodity) list.push(commodity)
} }
} }
this.createOrder = { this.createOrder = {
addressId: this.addressId, addressId: this.addressId,
commodityList: list, commodityList: list,
} }
uni.showLoading({ uni.showLoading({
title: '加载中', title: '加载中',
mask:true mask: true
});
let that = this
let opts = {
url: '/app/mall/create/order',
method: 'post'
};
that.http.httpTokenRequest(opts, this.createOrder).then(res => {
if (res.data.code == 200) {
let orderIds = res.data.data
if (orderIds && orderIds.length > 0) {
that.orderSubmit = {
appId: 6,
ids: orderIds,
channelCode: 'wx_lite',
}
let opts = {
url: '/app/pay/order/submit/more',
method: 'post'
}
that.http.httpTokenRequest(opts, that.orderSubmit).then(res => {
if (res.data.code == 200) {
let paymentData = res.data.data.invokeResponse;
uni.hideLoading()
uni.requestPayment({
provider: 'wxpay', // 服务提提供商
timeStamp: paymentData.timeStamp,
nonceStr: paymentData.nonceStr,
package: paymentData.packageValue,
signType: paymentData.signType,
paySign: paymentData.paySign,
success: function(res) {
uni.navigateTo({
url: '/pagesC/pages/shop/payOk'
})
},
fail: function(err) {
//console.log('支付失败',err);
if (that.orderSubmit.ids !== undefined && that
.orderSubmit.ids !== null && that
.orderSubmit.ids.length > 0) {
let opts = {
url: '/app/mall/cancel/order',
method: 'post'
}
that.http.httpTokenRequest(opts, {
"ids": that.orderSubmit.ids
}).then(res => {
if (res.data.code == 200) {
}
})
}
},
});
} else {
}
})
} else {
uni.navigateTo({
url: '/pagesC/pages/shop/payOk'
})
}
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
})
}
})
}
},
add() {
this.nums++
},
addAddress() {
uni.navigateTo({
url: '/pagesD/pages/personal/addAddress'
}); });
let that = this },
let opts = { getAddressList() {
url: '/app/mall/create/order', let opts = {
method: 'post' url: '/app/user/address/list',
}; method: 'get'
that.http.httpTokenRequest(opts, this.createOrder).then(res => { };
if (res.data.code == 200) { this.http.httpTokenRequest(opts, {}).then(res => {
let orderIds = res.data.data if (res.data.code == 200) {
if (orderIds && orderIds.length > 0) { this.addressList = res.data.data
that.orderSubmit = { if (this.addressList !== undefined && this.addressList != null && this.addressList.length >
appId: 6, 0) {
ids: orderIds, let defaultFlagExist = false
channelCode: 'wx_lite', this.addressList.forEach(element => {
} if (this.addressId) {
let opts = { if (element.id == this.addressId) {
url: '/app/pay/order/submit/more', this.addressInfo = element
method: 'post' this.addressShow = true
} defaultFlagExist = true
that.http.httpTokenRequest(opts, that.orderSubmit).then(res => { } else {
if (res.data.code == 200) { defaultFlagExist = false
let paymentData = res.data.data.invokeResponse; }
uni.hideLoading() return
uni.requestPayment({ }
provider: 'wxpay', // 服务提提供商 if (element.defaultFlag) {
timeStamp: paymentData.timeStamp, this.addressInfo = element
nonceStr: paymentData.nonceStr, this.addressId = element.id
package: paymentData.packageValue, this.addressShow = true
signType: paymentData.signType, defaultFlagExist = true
paySign: paymentData.paySign, }
success: function (res) { });
uni.navigateTo({ if (!defaultFlagExist) {
url: '/pagesC/pages/shop/payOk' this.addressInfo = this.addressList[this.addressList.length - 1]
}) this.addressShow = true
}, }
fail: function (err) { } else if (this.addressList.length == 0) {
//console.log('支付失败',err); this.addressInfo = null
if(that.orderSubmit.ids !== undefined && that.orderSubmit.ids !== null && that.orderSubmit.ids.length > 0){ this.addressShow = false
let opts = { url: '/app/mall/cancel/order', method: 'post' } }
that.http.httpTokenRequest(opts, {"ids" : that.orderSubmit.ids}).then(res => { }
if(res.data.code == 200){ })
},
} goAddress() {
}) uni.navigateTo({
} url: '/pagesD/pages/personal/myAddress?pay=1'
}, })
}); },
} else { getMoveCode() {
let opts = {
} url: '/app/index/free/code',
}) method: 'get'
} else { };
uni.navigateTo({ this.http.httpRequest(opts, {}).then(res => {
url: '/pagesC/pages/shop/payOk' if (res.data.code == 200) {
}) this.freeCode = res.data.data
} }
} else { })
uni.showToast({ },
title: res.data.msg, getMallList() {
icon: 'none', let opts = {
}) url: '/app/mall/add/purchase',
} method: 'get'
}) };
} this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
}, this.mallList = res.data.data
add() { this.mallList.forEach(element => {
this.nums++ element.selectNum = 0
}, })
addAddress() { }
uni.navigateTo({ })
url: '/pagesD/pages/personal/addAddress' },
}); selectMoney(value) {
}, this.mallMoney = value
getAddressList() { },
let opts = { selectMall(num) {
url: '/app/user/address/list', //当添加数量且数量为1就加总共商品数量
method: 'get' this.quantityChange = (num.value == 0 || num.value == 1)
}; },
this.http.httpTokenRequest(opts, {}).then(res => { plusMall(vo) {
if (res.data.code == 200) { this.countNum = this.countNum + 1
this.addressList = res.data.data if (!this.mallSelectMap[vo.id] || this.mallSelectMap[vo.id] == 0) {
if (this.addressList !== undefined && this.addressList != null && this.addressList.length > 0) { this.mallSelectMap[vo.id] = 1
let defaultFlagExist = false } else {
this.addressList.forEach(element => { this.mallSelectMap[vo.id] += 1
if (this.addressId) { }
if (element.id == this.addressId) { this.countMoney += vo.currentPrice
this.addressInfo = element //console.log(this.mallSelectMap)
this.addressShow = true
defaultFlagExist = true },
} minusMall(vo) {
} else if (element.defaultFlag) { if (this.mallSelectMap[vo.id] == 0) {
this.addressInfo = element return
this.addressId = element.id }
this.addressShow = true this.countNum = this.countNum - 1
defaultFlagExist = true if (this.mallSelectMap[vo.id] && this.mallSelectMap[vo.id] > 0) {
} if (this.mallSelectMap[vo.id] == 1) {}
}); this.mallSelectMap[vo.id] -= 1
if (!defaultFlagExist) { this.countMoney -= vo.currentPrice
this.addressInfo = this.addressList[0] }
this.addressShow = true },
} },
} onShow() {
} this.getAddressList()
}) this.getMoveCode()
}, this.getMallList()
goAddress() { },
uni.navigateTo({ onLoad(option) {
url: '/pagesD/pages/personal/myAddress?pay=1' this.carNo = option.carNo
}) },
}, };
getMoveCode() {
let opts = {
url: '/app/index/free/code',
method: 'get'
};
this.http.httpRequest(opts, {}).then(res => {
if (res.data.code == 200) {
this.freeCode = res.data.data
}
})
},
getMallList() {
let opts = {
url: '/app/mall/add/purchase',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
this.mallList = res.data.data
this.mallList.forEach(element => {
element.selectNum = 0
})
}
})
},
selectMoney(value) {
this.mallMoney = value
},
selectMall(num) {
//当添加数量且数量为1就加总共商品数量
this.quantityChange = (num.value == 0 || num.value == 1)
},
plusMall(vo) {
this.countNum = this.countNum + 1
if (!this.mallSelectMap[vo.id] || this.mallSelectMap[vo.id] == 0) {
this.mallSelectMap[vo.id] = 1
} else {
this.mallSelectMap[vo.id] += 1
}
this.countMoney += vo.currentPrice
//console.log(this.mallSelectMap)
},
minusMall(vo) {
if (this.mallSelectMap[vo.id] == 0) {
return
}
this.countNum = this.countNum - 1
if (this.mallSelectMap[vo.id] && this.mallSelectMap[vo.id] > 0) {
if (this.mallSelectMap[vo.id] == 1) {}
this.mallSelectMap[vo.id] -= 1
this.countMoney -= vo.currentPrice
}
},
},
onShow() {
this.getAddressList()
this.getMoveCode()
this.getMallList()
},
onLoad(option) {
this.carNo = option.carNo
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.getCarCode { .getCarCode {
/deep/ .u-modal__content__text { /deep/ .u-modal__content__text {
text-align: center !important; text-align: center !important;
} }
/deep/ .u-input__content__field-wrapper__field { /deep/ .u-input__content__field-wrapper__field {
text-align: right !important; text-align: right !important;
} }
.price__bottom { .price__bottom {
width: 100%;
height: 156rpx;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
border-radius: 20rpx 20rpx 0rpx 0rpx;
position: fixed;
bottom: 0;
padding: 32rpx 40rpx;
box-sizing: border-box;
clear: both;
.price {
display: flex;
align-items: center;
justify-content: space-between;
.price__num {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
span {
font-size: 32rpx;
font-family: DIN;
font-weight: 500;
color: #333333;
}
}
.price__all {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
padding-right: 250rpx;
span {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
}
}
}
.price__next {
width: 240rpx;
height: 98rpx;
background: url('@/static/index/border-btn.png') no-repeat;
background-size: contain;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
opacity: 0.96;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: -10rpx;
}
}
.get__content {
padding: 40rpx 0rpx;
.address {
background: #ffffff;
display: flex;
align-items: center;
padding: 30rpx 40rpx;
position: fixed;
bottom: 200rpx;
left: 0;
right: 0;
margin: 0 auto;
justify-content: space-between;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 40rpx;
border: 1rpx solid #ffeddc;
.address__left {
width: 600rpx;
.right__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 48rpx;
margin-bottom: 20rpx;
}
.right__phone {
display: flex;
align-items: center;
span{
padding-left: 20rpx;
}
span:nth-of-type(1) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F88D28;
padding: 2rpx 4rpx;
border: 1rpx solid #F88D28;
}
span:nth-of-type(2) {
font-size: 28rpx;
font-family: DIN;
font-weight: 500;
color: #666666;
}
span:nth-of-type(3) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}
}
.address__right {
image {
width: 14rpx;
height: 24rpx;
}
}
}
.add__address {
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
bottom: 200rpx;
width: 670rpx;
height: 90rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 10rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
image {
width: 34rpx;
height: 36rpx;
margin-right: 20rpx;
}
}
.fiexd_foot{
position: fixed;
left: 0;
bottom: 114rpx;
width: 100%; width: 100%;
height: 90rpx; height: 156rpx;
background: #f9f9f9; background: #FFFFFF;
box-shadow: 0rpx 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
border-radius: 20rpx 20rpx 0rpx 0rpx;
position: fixed;
bottom: 0;
padding: 32rpx 40rpx;
box-sizing: border-box;
clear: both;
.price {
display: flex;
align-items: center;
justify-content: space-between;
.price__num {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
span {
font-size: 32rpx;
font-family: DIN;
font-weight: 500;
color: #333333;
}
}
.price__all {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
padding-right: 250rpx;
span {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
}
}
}
.price__next {
width: 240rpx;
height: 98rpx;
background: url('@/static/index/border-btn.png') no-repeat;
background-size: contain;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
opacity: 0.96;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: -10rpx;
}
}
.get__content {
padding: 40rpx 0rpx;
.address {
background: #ffffff;
display: flex;
align-items: center;
padding: 30rpx 40rpx;
position: fixed;
bottom: 200rpx;
left: 0;
right: 0;
margin: 0 auto;
justify-content: space-between;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 40rpx;
border: 1rpx solid #ffeddc;
.address__left {
width: 600rpx;
.right__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 48rpx;
margin-bottom: 20rpx;
}
.right__phone {
display: flex;
align-items: center;
span {
padding-left: 20rpx;
}
span:nth-of-type(1) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F88D28;
padding: 2rpx 4rpx;
border: 1rpx solid #F88D28;
}
span:nth-of-type(2) {
font-size: 28rpx;
font-family: DIN;
font-weight: 500;
color: #666666;
}
span:nth-of-type(3) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}
}
.address__right {
image {
width: 14rpx;
height: 24rpx;
}
}
}
.add__address {
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
bottom: 200rpx;
width: 670rpx;
height: 90rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 10rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F88D28;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
image {
width: 34rpx;
height: 36rpx;
margin-right: 20rpx;
}
}
.fiexd_foot {
position: fixed;
left: 0;
bottom: 114rpx;
width: 100%;
height: 90rpx;
background: #f9f9f9;
}
.content__code {
padding: 28rpx;
box-sizing: border-box;
width: 670rpx;
height: 220rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
display: flex;
align-items: center;
margin: 0 auto;
position: relative;
.code__img {
width: 160rpx;
height: 160rpx;
background: #3699ff;
border-radius: 10rpx;
}
.code__money {
margin: 0 20rpx;
.money__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
.code__tips {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
}
}
.money__num {
.num__one {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #e1251b;
line-height: 42rpx;
}
.num__two {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 42rpx;
}
}
}
}
.content__list {
.list__title {
padding-left: 40rpx;
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.list__title::before {
content: "";
width: 76rpx;
height: 14rpx;
background-size: contain;
}
.list {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding-right: 40rpx;
.list__item {
padding: 28rpx;
box-sizing: border-box;
width: 620rpx;
height: 220rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
display: flex;
align-items: center;
position: relative;
margin-bottom: 20rpx;
.list__img {
width: 160rpx;
height: 160rpx;
background: #3699ff;
border-radius: 10rpx;
position: absolute;
left: -50rpx;
border-radius: 20rpx;
}
.list__money {
margin: 0 20rpx;
margin-left: 100rpx;
width: 400rpx;
position: relative;
.money__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
.code__tips {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
}
}
.money__num {
.num__one {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #e1251b;
line-height: 42rpx;
margin-right: 20rpx;
}
.num__two {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 42rpx;
}
}
.tag {
position: absolute;
top: 4rpx;
right: -80rpx;
font-size: 24rpx;
background-color: #F88D28;
color: #fff;
width: 60rpx;
line-height: 40rpx;
text-align: center;
border-radius: 6rpx;
}
}
.num-box{
position: relative;
bottom:-40rpx;
}
.list__add {
position: absolute;
right: 30rpx;
bottom: 30rpx;
width: 44rpx;
height: 44rpx;
image {
width: 44rpx;
height: 44rpx;
}
}
}
}
}
} }
}
.content__code { .minus {
padding: 28rpx; width: 22px;
box-sizing: border-box; height: 22px;
width: 670rpx; background: #e6e6e6;
height: 220rpx; border-radius: 50%;
background: #ffffff; display: flex;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16); color: #fff;
border-radius: 20rpx; justify-content: center;
display: flex; align-items: center;
align-items: center; }
margin: 0 auto;
position: relative; .input {
padding: 0 10px;
.code__img { }
width: 160rpx;
height: 160rpx; .plus {
background: #3699ff; width: 22px;
border-radius: 10rpx; height: 22px;
} background-color: #FF0000;
border-radius: 50%;
.code__money { /* #ifndef APP-NVUE */
margin: 0 20rpx; display: flex;
/* #endif */
.money__title { justify-content: center;
font-size: 32rpx; align-items: center;
font-family: PingFang SC; }
font-weight: bold;
color: #333333;
line-height: 42rpx;
.code__tips {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
}
}
.money__num {
.num__one {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #e1251b;
line-height: 42rpx;
}
.num__two {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 42rpx;
}
}
}
}
.content__list {
.list__title {
padding-left: 40rpx;
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.list__title::before {
content: "";
width: 76rpx;
height: 14rpx;
background-size: contain;
}
.list {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding-right: 40rpx;
.list__item {
padding: 28rpx;
box-sizing: border-box;
width: 620rpx;
height: 220rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
display: flex;
align-items: center;
position: relative;
margin-bottom: 20rpx;
.list__img {
width: 160rpx;
height: 160rpx;
background: #3699ff;
border-radius: 10rpx;
position: absolute;
left: -50rpx;
border-radius: 20rpx;
}
.list__money {
margin: 0 20rpx;
margin-left: 100rpx;
width: 400rpx;
.money__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
.code__tips {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
}
}
.money__num {
.num__one {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #e1251b;
line-height: 42rpx;
margin-right: 20rpx;
}
.num__two {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 42rpx;
}
}
}
.list__add {
position: absolute;
right: 30rpx;
bottom: 30rpx;
width: 44rpx;
height: 44rpx;
image {
width: 44rpx;
height: 44rpx;
}
}
}
}
}
}
}
.minus {
width: 22px;
height: 22px;
background: #e6e6e6;
border-radius: 50%;
display: flex;
color: #fff;
justify-content: center;
align-items: center;
}
.input {
padding: 0 10px;
}
.plus {
width: 22px;
height: 22px;
background-color: #FF0000;
border-radius: 50%;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
</style> </style>
pagesD/pages/personal/addAddress.vue
View file @ 77869420
...@@ -3,279 +3,295 @@ ...@@ -3,279 +3,295 @@
* @Description: 新增地址 * @Description: 新增地址
--> -->
<template> <template>
<view class="appCotent"> <view class="appCotent">
<div class="addAddress"> <div class="addAddress">
<u-gap bgColor="transparent" height="20"></u-gap> <u-gap bgColor="transparent" height="20"></u-gap>
<div class="car_info"> <div class="car_info">
<u--form labelPosition="left" :model="model1" ref="form1" labelWidth="100"> <u--form labelPosition="left" :model="model1" ref="form1" labelWidth="100">
<u-form-item label="收货人:" prop="addressInfo.userName" borderBottom ref="item1"> <u-form-item label="收货人:" prop="addressInfo.userName" borderBottom ref="item1">
<u--input v-model="model1.addressInfo.userName" placeholder="请填写收货人姓名" border="none"></u--input> <u--input v-model="model1.addressInfo.userName" placeholder="请填写收货人姓名" border="none"></u--input>
</u-form-item> </u-form-item>
<u-form-item label="手机号码:" prop="addressInfo.telNumber" borderBottom ref="item1"> <u-form-item label="手机号码:" prop="addressInfo.telNumber" borderBottom ref="item1">
<u--input v-model="model1.addressInfo.telNumber" placeholder="请填写收货人手机号码" border="none"></u--input> <u--input v-model="model1.addressInfo.telNumber" placeholder="请填写收货人手机号码" border="none">
</u-form-item> </u--input>
<u-form-item label="收货地址:" prop="addressInfo.address" borderBottom ref="item1"> </u-form-item>
<u--input v-model="model1.addressInfo.address" placeholder="点击选择收货地址" border="none"></u--input> <u-form-item label="收货地址:" prop="addressInfo.address" borderBottom ref="item1">
<span @click.stop="getAuthorize"> <u--input v-model="model1.addressInfo.address" placeholder="点击选择收货地址" border="none"></u--input>
<span class="app__gps"> <span @click.stop="getAuthorize">
<image src="@/static/my/gps.png"> <span class="app__gps">
</span> <image src="@/static/my/gps.png">
<span class="app__right"> </span>
<image src="@/static/my/my6.png"> <span class="app__right">
</span> <image src="@/static/my/my6.png">
</span> </span>
</u-form-item> </span>
<u-form-item label="楼号门牌:" prop="addressInfo.detailInfo" borderBottom ref="item1"> </u-form-item>
<u--input v-model="model1.addressInfo.detailInfo" placeholder="例如 2栋3单元101室" border="none"></u--input> <u-form-item label="楼号门牌:" prop="addressInfo.detailInfo" borderBottom ref="item1">
</u-form-item> <u--input v-model="model1.addressInfo.detailInfo" placeholder="例如 2栋3单元101室" border="none">
<u-form-item label="设置默认地址:" prop="addressInfo.name" ref="item1"> </u--input>
<u-switch class="del__address" v-model="model1.value" activeColor="#5ac725"></u-switch> </u-form-item>
</u-form-item> <u-form-item label="设置默认地址:" prop="addressInfo.name" ref="item1">
<u-switch class="del__address" v-model="model1.value" activeColor="#5ac725"></u-switch>
</u-form-item>
</u--form> </u--form>
</div> </div>
<div class="add__tips">为保证您的商品准确送达，请填写正确的地址！</div> <div class="add__tips">为保证您的商品准确送达，请填写正确的地址！</div>
<div class="love__btn" @click="addAddress"> <div class="love__btn" @click="addAddress">
<image src="@/static/move-car/love-car5.png"> <image src="@/static/move-car/love-car5.png">
新增地址 保存地址
</div> </div>
</div> </div>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
carNumber: "", carNumber: "",
model1: { model1: {
addressInfo: { addressInfo: {
address: '' address: ''
}, },
value: false, value: false,
}, },
rules: { rules: {
"addressInfo.userName": { "addressInfo.userName": {
type: "string", type: "string",
required: true, required: true,
message: "收货人不能为空", message: "收货人不能为空",
trigger: ["blur", "change"], trigger: ["blur", "change"],
}, },
"addressInfo.telNumber": [{ "addressInfo.telNumber": [{
type: "string", type: "string",
required: true, required: true,
message: "手机号不能为空", message: "手机号不能为空",
trigger: ["blur", "change"], trigger: ["blur", "change"],
}, },
{ {
// 自定义验证函数，见上说明 // 自定义验证函数，见上说明
validator: (rule, value, callback) => { validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过 // 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的 // uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value); return uni.$u.test.mobile(value);
}, },
message: '手机格式错误，请输入11位手机号', message: '手机格式错误，请输入11位手机号',
// 触发器可以同时用blur和change // 触发器可以同时用blur和change
trigger: ['change', 'blur'], trigger: ['change', 'blur'],
} }
], ],
"addressInfo.address": { "addressInfo.address": {
type: "string", type: "string",
required: true, required: true,
message: "收货地址不能为空", message: "收货地址不能为空",
trigger: ["blur", "change"], trigger: ["blur", "change"],
}, },
"addressInfo.detailInfo": { "addressInfo.detailInfo": {
type: "string", type: "string",
required: true, required: true,
message: "门牌号不能为空", message: "门牌号不能为空",
trigger: ["blur", "change"], trigger: ["blur", "change"],
}, },
}, },
}; type: null
}, };
methods: { },
goBack() { onLoad(e) {
uni.navigateBack({ this.type = e.type
delta: 1 },
}) methods: {
}, goBack() {
addAddress() { if (this.type == "myAddress") {
this.$refs.form1.validate().then(res => { let pages = getCurrentPages();
this.model1.addressInfo.defaultFlag = false let prevPage = pages[pages.length - 3]
if (this.model1.value) { prevPage.$vm.addressId = -1;
this.model1.addressInfo.defaultFlag = true uni.navigateBack({
} delta: 2
let opts = { })
url: '/app/user/address', return;
method: 'post' }
}; uni.navigateBack({
this.http.httpTokenRequest(opts, this.model1.addressInfo).then(res => { delta: 1
if (res.data.code == 200) { })
//添加成功 },
uni.$u.toast('新增成功') addAddress() {
this.goBack() this.$refs.form1.validate().then(res => {
} this.model1.addressInfo.defaultFlag = false
}) if (this.model1.value) {
}).catch(errors => { this.model1.addressInfo.defaultFlag = true
uni.$u.toast('请正确填写信息') }
}) let opts = {
}, url: '/app/user/address',
// 用户授权 method: 'post'
getAuthorize() { };
const _this = this this.http.httpTokenRequest(opts, this.model1.addressInfo).then(res => {
uni.authorize({ if (res.data.code == 200) {
scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档 //添加成功
success(res) { uni.$u.toast('新增成功')
_this.getLocation() this.goBack()
}, }
// 授权失败 })
fail(err) { }).catch(errors => {
uni.showModal({ uni.$u.toast('请正确填写信息')
title: '温馨提示', })
content: '无法获取当前位置，请手动开启授权', },
success: function (res) { // 用户授权
if (res.confirm) { getAuthorize() {
//console.log('用户点击确定') const _this = this
uni.openSetting({ uni.authorize({
success(res) { scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
if (res.authSetting['scope.userLocation']) { success(res) {
//console.log('打开授权设置定位') _this.getLocation()
_this.getLocation() },
} // 授权失败
}, fail(err) {
}) uni.showModal({
} else if (res.cancel) { title: '温馨提示',
//console.log('用户点击取消') content: '无法获取当前位置，请手动开启授权',
} success: function(res) {
}, if (res.confirm) {
}) //console.log('用户点击确定')
}, uni.openSetting({
}) success(res) {
}, if (res.authSetting['scope.userLocation']) {
// 获取用户的地理位置， //console.log('打开授权设置定位')
getLocation() { _this.getLocation()
const _this = this }
uni.getLocation({ },
type: 'wgs84', })
altitude: true, } else if (res.cancel) {
success(res) { //console.log('用户点击取消')
//小程序只能获取到位置经纬度，需要借助高德地图的逆解析地址，显示出中文具体城市名字 }
_this.loadCity(res.longitude, res.latitude) },
}, })
fail() { },
//console.log('拒绝获取地理位置') })
} },
}) // 获取用户的地理位置，
}, getLocation() {
// 经纬度转具体城市 const _this = this
// 1）需要用到高德地图的逆地理编码 uni.getLocation({
// 2）需要当前地理位置的经纬度 type: 'wgs84',
// 3）小程序的key值 altitude: true,
loadCity(longitude, latitude) { success(res) {
const that = this //小程序只能获取到位置经纬度，需要借助高德地图的逆解析地址，显示出中文具体城市名字
uni.request({ _this.loadCity(res.longitude, res.latitude)
header: { },
'Content-Type': 'application/text', fail() {
}, //console.log('拒绝获取地理位置')
//注意:这里的key值需要高德地图的 web服务生成的key 只有web服务才有逆地理编码 }
url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' + })
longitude + },
',' + // 经纬度转具体城市
latitude + // 1）需要用到高德地图的逆地理编码
'&key=1bba2ab2de600f8b5fafe167e09cd2af&radius=1000&extensions=all', // 2）需要当前地理位置的经纬度
success(res) { // 3）小程序的key值
//console.log(res); loadCity(longitude, latitude) {
if (res.statusCode === 200) { const that = this
if (res.data.status === '1') { uni.request({
let addressInfo = res.data header: {
//详细地址 'Content-Type': 'application/text',
let detailInfo = addressInfo.regeocode.formatted_address },
that.model1.addressInfo.address = detailInfo //注意:这里的key值需要高德地图的 web服务生成的key 只有web服务才有逆地理编码
} url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
} else { longitude +
//console.log('获取信息失败，请重试！') ',' +
} latitude +
}, '&key=1bba2ab2de600f8b5fafe167e09cd2af&radius=1000&extensions=all',
}) success(res) {
}, //console.log(res);
}, if (res.statusCode === 200) {
onReady() { if (res.data.status === '1') {
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则 let addressInfo = res.data
this.$refs.form1.setRules(this.rules) //详细地址
}, let detailInfo = addressInfo.regeocode.formatted_address
}; that.model1.addressInfo.address = detailInfo
}
} else {
//console.log('获取信息失败，请重试！')
}
},
})
},
},
onReady() {
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
this.$refs.form1.setRules(this.rules)
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.addAddress { .addAddress {
.app__gps { .app__gps {
padding-left: 20rpx; padding-left: 20rpx;
image {
width: 34rpx;
height: 36rpx;
}
}
.app__right { image {
padding-left: 20rpx; width: 34rpx;
padding-bottom: 10rpx; height: 36rpx;
}
}
image { .app__right {
width: 11rpx; padding-left: 20rpx;
height: 18rpx; padding-bottom: 10rpx;
}
}
.love__btn { image {
height: 76rpx; width: 11rpx;
background: url('@/static/move-car/love-car4.png') no-repeat; height: 18rpx;
background-size: contain; }
font-size: 32rpx; }
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 76rpx;
text-align: center;
width: 670rpx;
margin: 0 auto;
margin-top: 40rpx;
image { .love__btn {
width: 30rpx; height: 76rpx;
height: 30rpx; background: url('@/static/move-car/love-car4.png') no-repeat;
margin-right: 20rpx; background-size: contain;
position: relative; font-size: 32rpx;
top:4rpx; font-family: PingFang SC;
} font-weight: 500;
} color: #FFFFFF;
line-height: 76rpx;
text-align: center;
width: 670rpx;
margin: 0 auto;
margin-top: 40rpx;
.add__tips { image {
padding-left: 40rpx; width: 30rpx;
font-size: 24rpx; height: 30rpx;
font-family: PingFang SC; margin-right: 20rpx;
font-weight: 500; position: relative;
color: #E1251B; top: 4rpx;
line-height: 42px; }
} }
width: 100%; .add__tips {
height: 100%; padding-left: 40rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
line-height: 42px;
}
.car_info { width: 100%;
padding: 20rpx 40rpx; height: 100%;
background: #fff;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
/deep/ .u-form-item__body__right__content__slot { .car_info {
justify-content: flex-end; padding: 20rpx 40rpx;
flex-direction: row !important; background: #fff;
} background: #FFFFFF;
} box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
} /deep/ .u-form-item__body__right__content__slot {
justify-content: flex-end;
flex-direction: row !important;
}
}
}
</style> </style>
pagesD/pages/personal/myAddress.vue
View file @ 77869420
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
methods: { methods: {
add() { add() {
uni.navigateTo({ uni.navigateTo({
url: '/pagesD/pages/personal/addAddress' url: '/pagesD/pages/personal/addAddress?type=myAddress'
}); });
}, },
getAddressList(){ getAddressList(){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment