xuechunyuan
3 years ago
parent
42c2aed817
commit
4fa9de1f46
9 changed files with 486 additions and 91 deletions
@ -0,0 +1,441 @@ |
||||
<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> |
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in new issue