361 lines
12 KiB
Vue
361 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="pad-x150" v-if="isLoading">
|
|||
|
|
<status-nav :ifReturn="true" navBarTitle="确认订单" :marginBottom="0"></status-nav>
|
|||
|
|
<!-- 收件人信息 -->
|
|||
|
|
<view class="settlement-content pad-zy20 border-box">
|
|||
|
|
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
|
|||
|
|
<view class="title">收件人信息</view>
|
|||
|
|
<view class="addressee-info mar-s20 flex" @tap="toAddress">
|
|||
|
|
<view class="txt" v-if="default_address">
|
|||
|
|
<view class="font30 mar-x10">{{default_address.name}}<text>{{default_address.phone}}</text></view>
|
|||
|
|
<text class="font24 color-8c">{{default_address.province_str}}{{default_address.city_str}}{{default_address.county_str}}{{default_address.address}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="txt" v-else>
|
|||
|
|
<view class="font30 color-8c" style="line-height: 2;">请选择地址</view>
|
|||
|
|
</view>
|
|||
|
|
<image src="/static/icon/icon-more.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 订单信息 -->
|
|||
|
|
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
|
|||
|
|
<view class="title">订单信息</view>
|
|||
|
|
<view class="shop-slide-list">
|
|||
|
|
<view class="shop-slide-item">
|
|||
|
|
<view class="item border-box background-white flex" v-for="(item,index) in orderShopList" :key="index">
|
|||
|
|
<view class="shop-img radius30">
|
|||
|
|
<image :src="item.spu_cover" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="shop-txt">
|
|||
|
|
<view class="shop-txt-top">
|
|||
|
|
<view class="title font30 clips1">{{item.goods_name}}</view>
|
|||
|
|
<view class="specs font24 color-66 mar-sx10 clips2">规格：{{item.sku_name}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="shop-txt-bottom flex">
|
|||
|
|
<!-- 商品价格 -->
|
|||
|
|
<view class="price font30 color-red">￥{{item.price}}<text class="font24 color-66">x{{item.num}}</text></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 优惠选择 -->
|
|||
|
|
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
|
|||
|
|
<view class="title">优惠选择</view>
|
|||
|
|
<view class="section-list font30">
|
|||
|
|
<view class="item flex" v-if="orderInfo.vip_level>0">
|
|||
|
|
<label class="radio" @tap="chooseEv('vip')"><radio :checked="vipCheck" color="#febf00"/>会员折扣</label>
|
|||
|
|
<view class="txt flex">
|
|||
|
|
<view>{{orderInfo.membership_discount}}折</view>
|
|||
|
|
<view class="btn"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item flex" @tap.stop="toCoupon">
|
|||
|
|
<label class="radio" @tap.stop="chooseEv('coupon')"><radio :checked="couponCheck" color="#febf00"/>优惠券</label>
|
|||
|
|
<view class="txt flex">
|
|||
|
|
<view class="color-red" v-if="couponList.length">{{'-'+ couponList[couponIndex].amount}}</view>
|
|||
|
|
<view class="btn">
|
|||
|
|
<image src="/static/icon/icon-join.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 积分抵扣 -->
|
|||
|
|
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
|
|||
|
|
<view class="title">积分抵扣</view>
|
|||
|
|
<view class="section-list font30">
|
|||
|
|
<view class="item flex">
|
|||
|
|
<label class="radio" @tap="scoreCheck=!scoreCheck"><radio :checked="scoreCheck && orderInfo.available_score>0" color="#febf00"/>可用积分</label>
|
|||
|
|
<view class="txt flex">
|
|||
|
|
<view class="color-66">{{orderInfo.available_score}}</view>
|
|||
|
|
<view class="btn"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 支付方式 -->
|
|||
|
|
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
|
|||
|
|
<view class="title">支付方式</view>
|
|||
|
|
<view class="section-list font30">
|
|||
|
|
<view class="item flex">
|
|||
|
|
<label class="radio" @tap="wechatCheck=!wechatCheck"><radio :checked="wechatCheck" color="#febf00"/>微信支付</label>
|
|||
|
|
</view>
|
|||
|
|
<view class="item flex">
|
|||
|
|
<label class="radio" @tap="priceCheck=!priceCheck"><radio :checked="priceCheck" color="#febf00"/>余额支付</label>
|
|||
|
|
<view class="txt flex">
|
|||
|
|
<view class="color-66">{{orderInfo.available_balance}}</view>
|
|||
|
|
<view class="btn"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 尾部 -->
|
|||
|
|
<view class="pull-footer-bg background-white pad-all20 radius30 border-box">
|
|||
|
|
<view class="pull-footer background-grey radius30 pad-all20 border-box flex">
|
|||
|
|
<view class="price color-ff" style="margin-left: 24rpx;">
|
|||
|
|
<view class="font36 flex">合计：<span>￥{{totalPrice}}</span></view>
|
|||
|
|
<text class="font26" v-if="discountPrice>0">总优惠：￥{{discountPrice}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn font36 color-48 background-orange radius30 flex" @tap="submitEv">立即支付</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 优惠券弹窗 -->
|
|||
|
|
<view class="pull-bg" style="background-color: rgba(0,0,0,.3);" v-show="isCoupon"></view>
|
|||
|
|
<view class="coupon-box border-box background-white" v-show="isCoupon">
|
|||
|
|
<view class="title font36 background-white pad-sx25">优惠券选择</view>
|
|||
|
|
<scroll-view scroll-y="true" class="coupon-scoll">
|
|||
|
|
<view class="coupon-list pad-zy20 border-box">
|
|||
|
|
<view class="coupon-item radius30 mar-s40 flex" v-for="(item,index) in couponList" :key="index" @tap="changeCoupon(index)">
|
|||
|
|
<view class="price color-ff border-box"><text class="font30">￥</text>{{parseInt(item.amount)}}</view>
|
|||
|
|
<view class="txt">
|
|||
|
|
<view class="font36">{{item.name}}</view>
|
|||
|
|
<view class="font24 color-8c mar-s10">满{{parseInt(item.condition)}}减{{parseInt(item.amount)}}</view>
|
|||
|
|
<view class="font24 color-8c mar-s10">{{item.begin_at}}至{{item.end_at}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn mar-zy20 color-ff font24" v-if="index == couponIndex">已选择</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<view class="coupon-btns border-box pad-zy20 color-48 mar-sx30 flex">
|
|||
|
|
<view class="btn font36 radius30 background-orange" @tap="useCoupon">确认使用</view>
|
|||
|
|
<view class="btn font36 radius30" style="background-color: #e9e9e9;" @tap="closeCoupon">取消选择</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
orderInfo:{}, //订单信息
|
|||
|
|
default_address:{}, //地址信息
|
|||
|
|
orderShopList:[], // 商品信息
|
|||
|
|
couponList:[], //优惠券列表
|
|||
|
|
couponIndex:0, //优惠券选择
|
|||
|
|
vipCheck: false, //会员折扣
|
|||
|
|
couponCheck:false, // 优惠选择
|
|||
|
|
scoreCheck:false, //积分抵扣
|
|||
|
|
wechatCheck:false, //微信支付
|
|||
|
|
priceCheck:false, //余额支付
|
|||
|
|
isCoupon:false, //优惠券弹窗
|
|||
|
|
flag:true,
|
|||
|
|
preferential_options:'coupon',//优惠选择
|
|||
|
|
totalPrice:'',//总价
|
|||
|
|
discountPrice:'', //优惠价格
|
|||
|
|
isLoading:false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getOrderInfo();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 选择地址
|
|||
|
|
toAddress(){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:`/pagesA/address/address?type=change`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 计算价格
|
|||
|
|
computePrice(){
|
|||
|
|
// 计算优惠价格
|
|||
|
|
if(this.vipCheck && !this.couponCheck){
|
|||
|
|
this.discountPrice = this.$toolAll.tools.addXiaoShu(this.orderInfo.total_price*(1 - this.$toolAll.tools.addXiaoShu(this.orderInfo.membership_discount)/10));
|
|||
|
|
this.totalPrice = this.$toolAll.tools.addXiaoShu(this.orderInfo.total_price-this.discountPrice);
|
|||
|
|
}
|
|||
|
|
if(this.couponCheck && !this.vipCheck){
|
|||
|
|
this.discountPrice = this.$toolAll.tools.addXiaoShu(this.couponList[this.couponIndex].amount);
|
|||
|
|
this.totalPrice = this.$toolAll.tools.addXiaoShu(this.orderInfo.total_price - this.discountPrice);
|
|||
|
|
}
|
|||
|
|
if(!this.couponCheck && !this.vipCheck){
|
|||
|
|
this.discountPrice = 0;
|
|||
|
|
this.totalPrice = this.$toolAll.tools.addXiaoShu(this.orderInfo.total_price);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取订单准备信息
|
|||
|
|
getOrderInfo(){
|
|||
|
|
uni.showLoading({
|
|||
|
|
title:'加载中'
|
|||
|
|
})
|
|||
|
|
let params = {
|
|||
|
|
sku_list: uni.getStorageSync('buyList'),
|
|||
|
|
}
|
|||
|
|
this.$requst.post('/api/order/prepare-info',params).then(res=>{
|
|||
|
|
if(res.code == 0){
|
|||
|
|
console.log(res,'订单准备信息');
|
|||
|
|
// 其他信息
|
|||
|
|
this.orderInfo = res.data;
|
|||
|
|
|
|||
|
|
// 优惠券信息
|
|||
|
|
let baseArr = res.data.available_coupon_list;
|
|||
|
|
let couponArr = baseArr.sort(function (a, b) {
|
|||
|
|
return b.amount - a.amount;
|
|||
|
|
});
|
|||
|
|
this.couponList = couponArr;
|
|||
|
|
if(this.couponList.length==0){
|
|||
|
|
this.couponCheck = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 商品信息
|
|||
|
|
this.orderShopList = res.data.list;
|
|||
|
|
|
|||
|
|
// 地址信息
|
|||
|
|
let addr_id = uni.getStorageSync('addr_id');
|
|||
|
|
if(addr_id){
|
|||
|
|
// 获取地址
|
|||
|
|
this.getAddrDetail(addr_id);
|
|||
|
|
}else{
|
|||
|
|
this.default_address = res.data.default_address;
|
|||
|
|
}
|
|||
|
|
// 计算价格
|
|||
|
|
this.discountPrice = 0;
|
|||
|
|
this.totalPrice = this.$toolAll.tools.addXiaoShu(this.orderInfo.total_price);
|
|||
|
|
}
|
|||
|
|
uni.hideLoading();
|
|||
|
|
this.isLoading = true;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取地址
|
|||
|
|
getAddrDetail(id){
|
|||
|
|
this.$requst.post('/api/user/address-info',{id:id}).then(res=>{
|
|||
|
|
if(res.code == 0){
|
|||
|
|
console.log(res,'地址详情');
|
|||
|
|
this.default_address = res.data;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 打开优惠券弹窗
|
|||
|
|
toCoupon(){
|
|||
|
|
if(this.couponList.length){
|
|||
|
|
this.isCoupon =true;
|
|||
|
|
}else{
|
|||
|
|
this.$toolAll.tools.showToast('还没有优惠券');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择优惠券
|
|||
|
|
changeCoupon(index){
|
|||
|
|
if(index!==this.couponIndex){
|
|||
|
|
this.couponIndex = index;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//确认选择
|
|||
|
|
useCoupon(){
|
|||
|
|
this.isCoupon = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//取消选择
|
|||
|
|
closeCoupon(){
|
|||
|
|
this.isCoupon = false;
|
|||
|
|
this.couponIndex = 0;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择按钮
|
|||
|
|
chooseEv(type){
|
|||
|
|
if(type == 'vip'){
|
|||
|
|
if(this.vipCheck){
|
|||
|
|
this.vipCheck = false;
|
|||
|
|
}else{
|
|||
|
|
this.vipCheck = true;
|
|||
|
|
this.couponCheck = false;
|
|||
|
|
}
|
|||
|
|
this.computePrice();
|
|||
|
|
}
|
|||
|
|
if(type == 'coupon'){
|
|||
|
|
if(this.couponCheck){
|
|||
|
|
this.couponCheck = false;
|
|||
|
|
}else{
|
|||
|
|
this.couponCheck = true;
|
|||
|
|
this.vipCheck = false;
|
|||
|
|
}
|
|||
|
|
this.computePrice();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 提交
|
|||
|
|
submitEv(){
|
|||
|
|
this.flag = false;
|
|||
|
|
if(this.vipCheck){
|
|||
|
|
this.preferential_options = 'membership_discount';
|
|||
|
|
}
|
|||
|
|
if(this.couponCheck){
|
|||
|
|
this.preferential_options = 'coupon';
|
|||
|
|
}
|
|||
|
|
if(!this.couponCheck && !this.vipCheck){
|
|||
|
|
this.preferential_options = '';
|
|||
|
|
}
|
|||
|
|
if(this.default_address == null) {
|
|||
|
|
this.$toolAll.tools.showToast('请填写地址信息');
|
|||
|
|
}else{
|
|||
|
|
if(this.wechatCheck || this.priceCheck){
|
|||
|
|
let params = {
|
|||
|
|
sku_list: uni.getStorageSync('buyList'),
|
|||
|
|
preferential_options:this.preferential_options,
|
|||
|
|
coupon_id: this.couponCheck?this.couponList[this.couponIndex].id:'',
|
|||
|
|
deduction_points:this.scoreCheck?1:0,
|
|||
|
|
is_balance:this.priceCheck?1:0,
|
|||
|
|
is_wechat:this.wechatCheck?1:0,
|
|||
|
|
address_id:this.default_address.id
|
|||
|
|
}
|
|||
|
|
this.$requst.post('/api/order/create',params).then(res=>{
|
|||
|
|
if(res.code==0) {
|
|||
|
|
console.log(res,'支付返回')
|
|||
|
|
if(res.data.need_wechat_pay == 1){
|
|||
|
|
// 调用微信支付
|
|||
|
|
this.callPayMent(res.data.payment_params);
|
|||
|
|
}else{
|
|||
|
|
this.$toolAll.tools.showToast('支付成功(*^▽^*)');
|
|||
|
|
uni.removeStorageSync('addr_id');
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:`/pages/cart/finish?id=${res.data.id}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
console.log(res.msg,'提示信息')
|
|||
|
|
this.$toolAll.tools.showToast(res.msg);
|
|||
|
|
this.flag = true;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
this.$toolAll.tools.showToast('请选择支付方式');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 调用微信支付
|
|||
|
|
callPayMent(data){
|
|||
|
|
//调起支付
|
|||
|
|
wx.requestPayment({
|
|||
|
|
'timeStamp': data.timeStamp,
|
|||
|
|
'nonceStr': data.nonceStr,
|
|||
|
|
'package': data.package,
|
|||
|
|
"signType": data.signType,
|
|||
|
|
'paySign': data.sign,
|
|||
|
|
'success': function (res) { // 接口调用成功的回调函数
|
|||
|
|
console.log('支付成功:',res);
|
|||
|
|
this.$toolAll.tools.showToast('支付成功(*^▽^*)');
|
|||
|
|
uni.removeStorageSync('addr_id');
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:`/pages/cart/finish?id=${res.data.id}`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
'fail': function (res) { // 接口调用失败的回调函数
|
|||
|
|
console.log('支付失败:' + JSON.stringify(res));
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|