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.
441 lines
10 KiB
441 lines
10 KiB
2 years ago
|
<template>
|
||
|
|
<view class="order_box">
|
||
|
|
<view class="order_address">
|
||
|
|
<view class="address_info">
|
||
|
|
<view class="address_top" v-if="address">
|
||
|
|
<view class="isflag">默认</view>
|
||
|
|
<view class="txt">山东省青岛市市北区</view>
|
||
|
|
</view>
|
||
|
|
<view class="address_des" v-if="address">大港街道大港三路8号铁路住宅小区6号楼6单元666室</view>
|
||
|
|
<view class="address_des" style="color: #666;font-weight: normal;" v-else>请填写收货地址</view>
|
||
|
|
<view class="address_user" v-if="address">
|
||
|
|
<text class="user_name">1d</text>
|
||
|
|
<text class="user_phone">15612345678</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<image @click="goAddress" 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: '',
|
||
|
|
address: 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();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//切换收货地址
|
||
|
|
changeAddress(address) {
|
||
|
|
this.address = address;
|
||
|
|
},
|
||
|
|
//设置收货地址
|
||
|
|
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) {
|
||
|
|
console.log('下单成功');
|
||
|
|
} else if (res.data.code == 401) {
|
||
|
|
this.doLogin();
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.msg,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//提交订单
|
||
|
|
submitOrder() {
|
||
|
|
if(!this.address) {
|
||
|
|
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
|
||
|
|
},
|
||
|
|
header: {
|
||
|
|
'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
if (res.data.code == 200) {
|
||
|
|
this.address = JSON.stringify(res.data.data) == '{}' ? null : 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.navigateTo({
|
||
|
|
url: '/pages/pages_zhentou/order/order'
|
||
|
|
})
|
||
|
|
} else if (res.cancel) {
|
||
|
|
console.log('用户点击取消');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.msg,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//登录
|
||
|
|
doLogin() {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '登录中',
|
||
|
|
mask: true
|
||
|
|
});
|
||
|
|
uni.request({
|
||
|
|
url: getApp().globalData.baseUrl + '/blade-auth/getToken',
|
||
|
|
method: 'POST',
|
||
|
|
data: {
|
||
|
|
openId: getApp().globalData.openId,
|
||
|
|
username: this.userInfo.username,
|
||
|
|
phone: this.phone
|
||
|
|
},
|
||
|
|
header: {
|
||
|
|
'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
if (res.data.code == 200) {
|
||
|
|
uni.setStorageSync('token', res.data.data.access_token);
|
||
|
|
} 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;
|
||
|
|
}
|
||
|
|
.txt{
|
||
|
|
line-height: 32rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #666666;
|
||
|
|
margin-left: 12rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
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>
|