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