You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
562 lines
13 KiB
562 lines
13 KiB
<template> |
|
<view class="order_box"> |
|
<view class="order_address" @click="goAddress"> |
|
<view class="address_info"> |
|
<view class="address_top" v-if="addressInfo"> |
|
<view class="isflag" v-if="addressInfo.isDefault == 1">默认</view> |
|
<view class="txt">{{addressInfo.province}} {{addressInfo.city}} {{addressInfo.area}}</view> |
|
</view> |
|
<view class="address_des" v-if="addressInfo">{{addressInfo.address}}</view> |
|
<view class="address_des" style="color: #666;font-weight: normal;" v-else>请填写收货地址</view> |
|
<view class="address_user" v-if="addressInfo"> |
|
<text class="user_name">{{addressInfo.consignee}}</text> |
|
<text class="user_phone">{{addressInfo.phone}}</text> |
|
</view> |
|
</view> |
|
<image class="arrow" src="../../../static/image/icon-arrow-right.png"></image> |
|
</view> |
|
<view class="order_content"> |
|
<view class="order_item"> |
|
<view class="top_title"> |
|
<p class="title">壹人壹枕</p> |
|
</view> |
|
<view class="top_content"> |
|
<view class="left_cont"> |
|
<image class="img_box" :src="imgPrefix + 'zhentou_bag.png'" mode=""></image> |
|
</view> |
|
<view class="right_cont"> |
|
<p class="right_title">{{goodsInfo.goodsName}}</p> |
|
<p class="bot_right"> |
|
<span style="font-size: 22rpx;color: #666;">共{{orderInfo.goodsNum}}件</span> |
|
<span> |
|
<span style="font-size: 22rpx;color: #333;">￥</span><span |
|
style="font-size: 28rpx;color: #333;">{{goodsInfo.price}}</span> |
|
</span> |
|
</p> |
|
</view> |
|
</view> |
|
<view class="order_num"> |
|
<view class="num_title">购买数量</view> |
|
<view class="goods_num_btn"> |
|
<image v-if="orderInfo.goodsNum == 1" class="act_img" src="../../../static/image/icon_jian.png"></image> |
|
<image v-else @click="doJian" class="act_img" src="../../../static/image/icon_jian01.png"></image> |
|
<view class="goods_num">{{orderInfo.goodsNum}}</view> |
|
<image @click="doPlus" class="act_img" src="../../../static/image/icon_plus.png"></image> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 总计 --> |
|
<view class="goods_sum"> |
|
<view class="sum_title"> |
|
<text>共计</text> |
|
<view class="price"> |
|
<text class="price_unit">￥</text> |
|
<text class="price">{{totalPrice}}</text> |
|
</view> |
|
</view> |
|
<view @click="submitOrder" class="order_btn">立即支付</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
imgPrefix: getApp().globalData.imgPrefix, |
|
phone: '', |
|
addressInfo: null, |
|
goodsInfo: { |
|
goodsName: '', |
|
price: 699 |
|
}, |
|
userInfo: {}, |
|
orderInfo: { |
|
goodsNum: 1 |
|
}, |
|
totalPrice: 699 |
|
} |
|
}, |
|
onLoad() { |
|
let userInfo = uni.getStorageSync('userInfo'); |
|
if (userInfo) { |
|
this.userInfo = JSON.parse(userInfo); |
|
this.phone = this.userInfo.phone; |
|
this.queryAddress(); |
|
} |
|
this.queryGoodsInfo(); |
|
}, |
|
onShow() { |
|
let address = uni.getStorageSync('address'); |
|
if(address) { |
|
this.addressInfo = JSON.parse(address); |
|
uni.removeStorageSync('address'); |
|
console.log(this.addressInfo) |
|
} |
|
}, |
|
methods: { |
|
//设置收货地址 |
|
goAddress() { |
|
uni.navigateTo({ |
|
url: '/pages/pages_zhentou/myPage/address?from=1' |
|
}) |
|
}, |
|
//购买数量操作 |
|
doJian() { |
|
this.orderInfo.goodsNum = this.orderInfo.goodsNum > 1 ? this.orderInfo.goodsNum - 1 : this.orderInfo.goodsNum; |
|
this.calcPrice(); |
|
}, |
|
doPlus() { |
|
this.orderInfo.goodsNum = this.orderInfo.goodsNum + 1; |
|
this.calcPrice(); |
|
}, |
|
//商品价格计算 |
|
calcPrice() { |
|
this.totalPrice = Number(this.orderInfo.goodsNum) * Number(this.goodsInfo.price) |
|
}, |
|
//商品信息 |
|
queryGoodsInfo() { |
|
uni.request({ |
|
url: getApp().globalData.baseUrl + '/blade-system/dict-biz/get-goods-info', |
|
method: 'GET', |
|
success: (res) => { |
|
this.goodsInfo = res.data.data; |
|
this.totalPrice = res.data.data.price; |
|
} |
|
}) |
|
}, |
|
//默认收货地址查询 |
|
queryAddress() { |
|
uni.request({ |
|
url: getApp().globalData.baseUrl + '/address/get-default-address?phone=' + this.phone, |
|
method: 'GET', |
|
header: { |
|
'Blade-Auth': 'bearer ' + uni.getStorageSync('token') |
|
}, |
|
success: (res) => { |
|
if (res.data.code == 200) { |
|
this.addressInfo = JSON.stringify(res.data.data) == '{}' ? null : res.data.data; |
|
} else if (res.data.code == 401) { |
|
this.doLogin(1); |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none' |
|
}) |
|
} |
|
} |
|
}) |
|
}, |
|
//提交订单 |
|
submitOrder() { |
|
if (!this.addressInfo) { |
|
uni.showToast({ |
|
title: '请填写收货地址', |
|
icon: 'none' |
|
}) |
|
return; |
|
} |
|
uni.request({ |
|
url: getApp().globalData.baseUrl + '/blade-desk/order/save', |
|
method: 'POST', |
|
data: { |
|
buyerId: this.userInfo.id, |
|
buyerName: this.userInfo.username, |
|
buyerPhone: this.phone, |
|
goodsNum: this.orderInfo.goodsNum, |
|
consignee: this.addressInfo.consignee, |
|
consigneePhone: this.addressInfo.phone, |
|
address: this.addressInfo.province + this.addressInfo.city + this.addressInfo.area + this.addressInfo |
|
.address |
|
}, |
|
header: { |
|
'Blade-Auth': 'bearer ' + uni.getStorageSync('token') |
|
}, |
|
success: (res) => { |
|
if (res.data.code == 200) { |
|
this.goPay(res.data.data); |
|
} else if (res.data.code == 401) { |
|
this.doLogin(); |
|
} else if (res.data.code == 1001) { |
|
uni.showModal({ |
|
title: '提示', |
|
content: res.data.msg, |
|
success: (res2) => { |
|
if (res2.confirm) { |
|
uni.redirectTo({ |
|
url: '/pages/pages_zhentou/order/order' |
|
}) |
|
} else if (res.cancel) { |
|
console.log('用户点击取消'); |
|
} |
|
} |
|
}); |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none' |
|
}) |
|
} |
|
} |
|
}) |
|
}, |
|
//支付成功回调 |
|
doPaySuccess(orderInfo) { |
|
uni.request({ |
|
url: getApp().globalData.baseUrl + '/blade-desk/order/paySuccessCallback', |
|
method: 'POST', |
|
data: { |
|
id: orderInfo.id |
|
}, |
|
header: { |
|
'Blade-Auth': 'bearer ' + uni.getStorageSync('token') |
|
}, |
|
success: (res) => { |
|
if (res.data.code == 200) { |
|
uni.showToast({ |
|
title: '订单支付成功', |
|
icon: 'none' |
|
}) |
|
setTimeout(() => { |
|
uni.redirectTo({ |
|
url: '/pages/pages_zhentou/form/form?orderNo=' + orderInfo.orderNo + '&orderNum=' + this.orderInfo.goodsNum |
|
}) |
|
}, 2000) |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none' |
|
}) |
|
setTimeout(() => { |
|
uni.redirectTo({ |
|
url: '/pages/pages_zhentou/order/order' |
|
}) |
|
}, 2000) |
|
} |
|
} |
|
}) |
|
}, |
|
//支付 |
|
goPay(orderInfo) { |
|
uni.showLoading({ |
|
title: '支付中', |
|
mask: true |
|
}) |
|
uni.request({ |
|
url: getApp().globalData.baseUrl + '/app/createOrder', |
|
method: 'POST', |
|
data: { |
|
openId: getApp().globalData.openId, |
|
outTradeNo: orderInfo.orderNo |
|
}, |
|
header: { |
|
'Blade-Auth': 'bearer ' + uni.getStorageSync('token') |
|
}, |
|
success: (res) => { |
|
console.log(res) |
|
if (res.data.code == 200) { |
|
uni.requestPayment({ |
|
provider: 'wxpay', |
|
orderInfo: orderInfo, |
|
timeStamp: res.data.data.timeStamp, |
|
nonceStr: res.data.data.nonceStr, |
|
package: res.data.data.package, |
|
signType: res.data.data.signType, |
|
paySign: res.data.data.paySign, |
|
success: (res1) => { |
|
console.log(res1) |
|
if(res1.errMsg == 'requestPayment:ok'){ |
|
this.doPaySuccess(orderInfo); |
|
} |
|
else{ |
|
uni.redirectTo({ |
|
url: '/pages/pages_zhentou/order/order' |
|
}) |
|
} |
|
}, |
|
fail: (res2) => { |
|
console.log(res2) |
|
uni.redirectTo({ |
|
url: '/pages/pages_zhentou/order/order' |
|
}) |
|
} |
|
}) |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none' |
|
}) |
|
} |
|
}, |
|
complete: () => { |
|
uni.hideLoading(); |
|
} |
|
}) |
|
}, |
|
//登录 |
|
doLogin(type) { |
|
uni.showLoading({ |
|
title: '登录中', |
|
mask: true |
|
}); |
|
uni.request({ |
|
url: getApp().globalData.baseUrl + '/blade-auth/getToken', |
|
method: 'POST', |
|
data: { |
|
openId: getApp().globalData.openId, |
|
phone: this.phone |
|
}, |
|
header: { |
|
'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0' |
|
}, |
|
success: (res) => { |
|
if (res.data.code == 200) { |
|
uni.setStorageSync('token', res.data.data.access_token); |
|
if (type == 1 && !this.addressInfo) { |
|
this.queryAddress(); //重新查询默认地址 |
|
} |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none' |
|
}) |
|
} |
|
}, |
|
complete: () => { |
|
uni.hideLoading(); |
|
} |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.order_box { |
|
.order_address { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 30rpx 17rpx 30rpx 27rpx; |
|
margin: 30rpx 30rpx 18rpx; |
|
background-color: #fff; |
|
border-radius: 30rpx; |
|
|
|
.arrow { |
|
width: 40rpx; |
|
height: 40rpx; |
|
} |
|
|
|
.address_info { |
|
width: 554rpx; |
|
|
|
.address_top { |
|
display: flex; |
|
align-items: center; |
|
|
|
.isflag { |
|
width: 60rpx; |
|
color: #D73232; |
|
font-size: 20rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
line-height: 30rpx; |
|
text-align: center; |
|
background: #FFFFFF; |
|
border-radius: 10rpx; |
|
border: 1rpx solid #D73232; |
|
margin-right: 12rpx; |
|
} |
|
|
|
.txt { |
|
line-height: 32rpx; |
|
font-size: 24rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
color: #666666; |
|
} |
|
} |
|
|
|
.address_des { |
|
line-height: 40rpx; |
|
font-size: 28rpx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
color: #333333; |
|
word-break: break-all; |
|
margin: 20rpx 0; |
|
} |
|
|
|
.address_user { |
|
display: flex; |
|
align-items: center; |
|
line-height: 33rpx; |
|
font-size: 24rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
|
|
.user_name { |
|
color: #333333; |
|
} |
|
|
|
.user_phone { |
|
color: #999999; |
|
margin-left: 10rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.order_content { |
|
width: 100%; |
|
height: auto; |
|
overflow-y: auto; |
|
|
|
.order_item { |
|
width: 690rpx; |
|
background: #FFFFFF; |
|
border-radius: 30rpx; |
|
margin: 0 auto; |
|
padding-bottom: 30rpx; |
|
|
|
.top_title { |
|
padding: 30rpx 31rpx 25rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.title { |
|
font-size: 28rpx; |
|
} |
|
|
|
.status_txt { |
|
font-size: 24rpx; |
|
} |
|
} |
|
|
|
.top_content { |
|
width: 630rpx; |
|
height: 160rpx; |
|
background: #F8F8F8; |
|
border-radius: 20rpx; |
|
margin: 0 auto; |
|
display: flex; |
|
|
|
.left_cont { |
|
width: 160rpx; |
|
height: 160rpx; |
|
|
|
.img_box { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
|
|
.right_cont { |
|
width: 470rpx; |
|
padding: 0rpx 30rpx; |
|
|
|
.right_title { |
|
margin-top: 20rpx; |
|
font-size: 26rpx; |
|
} |
|
|
|
.bot_right { |
|
margin-top: 49rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
} |
|
} |
|
|
|
.order_num { |
|
display: flex; |
|
justify-content: space-between; |
|
color: #333333; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
line-height: 38rpx; |
|
padding: 30rpx 30rpx 0; |
|
|
|
.num_title { |
|
font-size: 26rpx; |
|
font-weight: 400; |
|
} |
|
|
|
.goods_num_btn { |
|
display: flex; |
|
align-items: center; |
|
|
|
.act_img { |
|
width: 38rpx; |
|
height: 38rpx; |
|
} |
|
|
|
.goods_num { |
|
min-width: 38rpx; |
|
font-size: 28rpx; |
|
font-weight: bold; |
|
text-align: center; |
|
padding: 0 7rpx; |
|
} |
|
} |
|
} |
|
|
|
} |
|
} |
|
|
|
// 底部 |
|
.goods_sum { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
display: flex; |
|
justify-content: space-between; |
|
height: 128rpx; |
|
background-color: #fff; |
|
padding: 21rpx 30rpx; |
|
|
|
.sum_title { |
|
display: flex; |
|
align-items: center; |
|
font-size: 26rpx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
height: 78rpx; |
|
color: #333333; |
|
|
|
.price { |
|
margin-left: 11rpx; |
|
|
|
.price_unit { |
|
font-size: 22rpx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
color: #D73232; |
|
} |
|
|
|
.price { |
|
font-size: 34rpx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
color: #D73232; |
|
margin-left: 3rpx; |
|
} |
|
} |
|
} |
|
|
|
.order_btn { |
|
width: 320rpx; |
|
height: 78rpx; |
|
line-height: 78rpx; |
|
background: #D73232; |
|
border-radius: 20rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
</style> |