343 lines
14 KiB
Vue
343 lines
14 KiB
Vue
<template>
|
|
<view class="">
|
|
<!-- 使用标题栏 -->
|
|
<status-nav :statusBackw="true" :statusTitle="true" :whereCome="whereCome" :title-val="'订单确认'" :tabcolor="'#ffffff'"></status-nav>
|
|
<!-- 地址信息 -->
|
|
<view @tap="chooseAddress" class=" bacb disba padding-zy30 posir" :style="{paddingTop:(statusHNH+10)+'px'}" v-if="listAddress!=null">
|
|
<view class="margin-sx40">
|
|
<view class="fon28 color33 disac">
|
|
<view v-if="listAddress.is_default==1" class="fon24 colorb margin-y20 btnaddress" style="background-color: #e91111;">默认</view>
|
|
<!-- <view class="fon24 colorb margin-y20 btnaddress" style="background-color: #ffc600;">公司</view> -->
|
|
{{listAddress.province_str}} {{listAddress.city_str}} {{listAddress.county_str}}
|
|
</view>
|
|
<view class="fon36 bold margin-sx20">{{listAddress.address}}</view>
|
|
<view class="fon28 color33">{{listAddress.name}} {{listAddress.phone}}</view>
|
|
</view>
|
|
<image class="youj" src="/static/img/my/youj.png" mode=""></image>
|
|
<image class="posia lanh" src="/static/img/order/oaddressx.png" mode=""></image>
|
|
</view>
|
|
<view v-if="listAddress==null" @tap="chooseAddress" class="ptwo-box konga">添加地址</view>
|
|
<!-- 商品列表 -->
|
|
<view class="bacb margin-s20 padding-zy30 padding-x30">
|
|
<view class="disba borbot padding-sx40" v-for="(itemOr,indexOr) in listInfo" :key="indexOr">
|
|
<image class="flexs gouwcimg margin-y20" :src="itemOr.main_image" mode="aspectFill"></image>
|
|
<view>
|
|
<view class="clips2 fon28">{{itemOr.spu_name}}</view>
|
|
<view class="fon24 color9 margin-sx10">{{itemOr.sub_title}}</view>
|
|
<view class="disba margin-s20">
|
|
<view class="bold colorf78">￥{{itemOr.price/100}}.0</view>
|
|
<view class="fon28">X{{itemOr.num}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品下单金额相关与留言 -->
|
|
<view class="margin-s20 padding-zy30 bacb">
|
|
<view @tap="clickfen(index)" v-for="(item,index) in infoArr" :key="index" class="disba padding-s40">
|
|
<view class="fon30 color33 flexs">{{item.title}}</view>
|
|
<view v-if="item.price!=''" class="disac width100 jcend">
|
|
<view :class="index==0?'bold':''" class="fon26 margin-y30" v-if="item.price!=''"><text :class="index==1?'colorf78':''">￥{{item.price}}</text></view>
|
|
<image v-if="item.src!=''" class="youj" :src="item.src" style="margin-left: -15rpx;" mode="aspectFill"></image>
|
|
</view>
|
|
<input class="borbot width100 margin-z20 fon24 padding-sx10" v-if="item.title=='订单备注'" type="text" v-model="orderBZ" placeholder="可以再这里给商家留言(*^▽^*)哟" placeholder-style="color:#9a9a9a;font-size:24rpx;font-weight:bold;"/>
|
|
<view class="borbot"></view>
|
|
</view>
|
|
<view class="bold fon30 padding-sx20 textr">合计: <text class="colorf78 fon36">￥{{hPrice}}</text></view>
|
|
</view>
|
|
<view class="margin-s20 padding-zy30 color9 fon24 marb-box12 textr">本单商品可以获得{{percentage}}%的分红金额</view>
|
|
<!-- 提交订单 -->
|
|
<view class="disba bacb padding-sx10 padding-zy30 posi-bzy" style="border-top: 1rpx solid #eeeeee;">
|
|
<view>
|
|
<view class="fon28">合计: <text class="fon32 bold colorf78">￥{{hPrice}}</text></view>
|
|
<view class="fon24" style="color: #353535;">已使用分红金额￥{{infoArr[1].price}}</view>
|
|
</view>
|
|
<!-- 发起支付 -->
|
|
<button @tap="confirm" :disabled="disabled" class="bold btntj">{{btncon}}</button>
|
|
</view>
|
|
<!-- 底部弹框 -->
|
|
<view @touchmove.stop.prevent="" v-if="isBtn" class="posiall zIn5" style="background-color: rgba(0,0,0,.6);">
|
|
<view class="posi-bzy padding20 animated bounceInUp" style="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;z-index: 6;">
|
|
<view class="margin-s20 disba">
|
|
<view>分红抵扣</view>
|
|
<view @tap="isBtn=false" class="close-box">
|
|
<view style="transform: rotate(45deg);"></view>
|
|
<view style="transform: rotate(-45deg);"></view>
|
|
</view>
|
|
</view>
|
|
<view class="margin-sx20 width94" style="background-color: #f3f3f3;border-radius: 41rpx;">
|
|
<input @input="inputev" :disabled="disf" type="number" class="fon24 margin-zy30" :maxlength="len" style="height: 82rpx;" :value="fhprice" :placeholder="placeCon" />
|
|
</view>
|
|
<view class="fon24 color9">可用分红金额：￥{{usableAmount}}，实际获得金额：￥{{shijPrice}}</view>
|
|
<view class="disbc">
|
|
<view @tap="tankEv" style="height: 86rpx;line-height: 86rpx;background-color: #FF7800;border-radius: 42.5rpx;text-align: center;color: #FFFFFF;font-weight: bold;width: 90%;margin-top: 40rpx;margin-bottom: 60rpx;">立即使用</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<successpopu :isShow="isShow" :isSuccess="isSuccess" :title="title" :content="content" :typeNum="typeNum" @change="changepopu"></successpopu>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import successpopu from '@/components/successpopu.vue';
|
|
export default {
|
|
components:{
|
|
successpopu
|
|
},
|
|
data() {
|
|
return {
|
|
infoArr:[
|
|
{title:'商品总额',price:'0.00',src:''},
|
|
{title:'分红抵扣',price:'0.00',src:'/static/img/my/youj.png'},
|
|
{title:'配送费',price:'0.00',src:''},
|
|
{title:'本单分红',price:'0.00',src:''},
|
|
{title:'订单备注',price:'',src:''},
|
|
],
|
|
orderBZ:'',
|
|
isBtn:false,
|
|
fhprice:'',
|
|
isShow:false,
|
|
isSuccess:true,
|
|
title:'',
|
|
content:'',
|
|
disabled:false,
|
|
btncon:'确认提交',
|
|
usableAmount:'',//可用的分红抵扣金额
|
|
zBig:'',//最大可抵扣实际金额
|
|
percentage:0,//抵扣比例
|
|
len:10,
|
|
placeCon:'请输入您想要抵扣的金额',
|
|
disf:false,
|
|
listInfo:[],
|
|
listAddress:'',
|
|
hPrice:'',//合计金额
|
|
shijPrice:'0.0',//实际获得金额
|
|
orderInfo:'',//订单信息
|
|
typeNum:'1',
|
|
lenaddr:0,
|
|
whereCome:0,
|
|
newsku_list:[],
|
|
statusHNH:uni.getStorageSync('statusHNH')
|
|
}
|
|
},
|
|
onUnload() {
|
|
uni.removeStorageSync('isAddr')
|
|
},
|
|
onShow() {
|
|
this.$toolAll.tools.guoq()
|
|
this.checkAddress()// 查询地址
|
|
},
|
|
onLoad(option) {
|
|
// console.log(this.infoArr[3].price);
|
|
// this.checkFHE()
|
|
if(option.index!=undefined) this.whereCome = option.index
|
|
this.orderInfo = uni.getStorageSync('orderInfo')
|
|
// console.log('订单：',this.orderInfo);
|
|
this.orderInfo.list.forEach(item=>{
|
|
let obj = {
|
|
coding:item.coding,
|
|
id:item.id,
|
|
main_image:this.$http + item.main_image,
|
|
num:item.num,
|
|
original_price:item.original_price,
|
|
price:item.price,
|
|
sku_name:item.sku_name,
|
|
spec_summary:item.spec_summary,
|
|
spu_id:item.spu_id,
|
|
spu_name:item.spu_name,
|
|
stock:item.stock,
|
|
sub_title:item.sub_title
|
|
}
|
|
this.listInfo.push(obj)
|
|
})
|
|
this.listInfo.forEach(iteml=>{
|
|
let nskObj = {
|
|
sku_coding: iteml.coding,
|
|
num: iteml.num
|
|
}
|
|
this.newsku_list.push(nskObj)
|
|
})
|
|
// console.log('参数',this.orderInfo);
|
|
//商品总额
|
|
this.infoArr[0].price = (this.orderInfo.original_total/100).toFixed(2)
|
|
//运费
|
|
this.infoArr[2].price = (this.orderInfo.freight/100).toFixed(2)
|
|
//可用分红额度
|
|
this.usableAmount = (this.orderInfo.bonus_amount/100).toFixed(2)
|
|
if(this.usableAmount==0){
|
|
this.placeCon = '暂无可用分红金额'
|
|
this.disf = true
|
|
}
|
|
//抵扣比例
|
|
this.percentage = this.orderInfo.bonus_rate
|
|
// 实际金额
|
|
// console.log('总金额+运费=',this.infoArr[0].price*1 + this.infoArr[2].price*1);//没问题
|
|
|
|
this.hPrice = this.infoArr[0].price*1 + this.infoArr[2].price*1 - this.infoArr[1].price*1
|
|
// 本单分红
|
|
this.infoArr[3].price = (this.hPrice * (this.percentage/100)).toFixed(2)
|
|
// 实际获得金额
|
|
// this.shijPrice = (this.orderInfo.bonus_amount * this.orderInfo.deduction_rate/100).toFixed(2)
|
|
// 地址
|
|
this.listAddress = this.orderInfo.address
|
|
|
|
|
|
let getisAddr = uni.getStorageSync('isAddr')
|
|
if(getisAddr!='') this.listAddress = getisAddr
|
|
|
|
// console.log(this.listAddress);
|
|
|
|
},
|
|
methods: {
|
|
// checkFHE(){//查询可用分红额度
|
|
// this.$requst.post('order/bonus-info').then(res=>{
|
|
// if(res.code==0){
|
|
// this.usableAmount = res.data.bonus
|
|
// this.percentage = res.data.bonus_deduction_rate
|
|
// if(this.usableAmount==0){
|
|
// this.placeCon = '暂无可用分红金额'
|
|
// this.disf = true
|
|
// }
|
|
// this.infoArr[3].price = this.infoArr[0].price*(this.percentage/100)
|
|
// // console.log(this.infoArr);
|
|
// }
|
|
// // console.log(res);
|
|
// },error=>{})
|
|
// },
|
|
checkAddress(){//查询地址列表事件
|
|
this.$requst.post('user/address').then(res=>{
|
|
if(res.code==0){
|
|
this.lenaddr = res.data.length
|
|
if(this.listAddress==''){
|
|
if(this.lenaddr!=0){
|
|
res.data.forEach(item=>{
|
|
if(item.is_default==1){
|
|
this.listAddress = item
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},error=>{})
|
|
},
|
|
confirm(){//提交订单事件
|
|
let ya = this
|
|
// console.log(this.listAddress);
|
|
if(this.lenaddr!=0){
|
|
this.disabled = true
|
|
this.btncon = '正在提交...'
|
|
// console.log('数据：',this.orderInfo);
|
|
// console.log('订单参数：',this.newsku_list);
|
|
let orderObj = {
|
|
sku_list: this.newsku_list,
|
|
total: this.hPrice*100,
|
|
address_id: this.listAddress.id,
|
|
original_total: this.infoArr[0].price*100,
|
|
bonus_amount: this.fhprice*100,
|
|
bonus_deduction: this.infoArr[1].price*100,
|
|
freight: this.orderInfo.freight,
|
|
bonus: this.infoArr[3].price*100,
|
|
remarks: this.orderBZ//买家备注
|
|
}
|
|
console.log('创建订单参数',orderObj);
|
|
// console.log('随机数',this.$toolAll.tools.randomStr());
|
|
this.$requst.post('order/create',orderObj).then(res=>{
|
|
// console.log('调起结果',res);
|
|
let dataInfo = res
|
|
if(res.code==0){
|
|
if(dataInfo.data.needPay){
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
appId:dataInfo.data.payment_params.appId,//appId
|
|
timeStamp: dataInfo.data.payment_params.timeStamp,//时间戳
|
|
nonceStr: dataInfo.data.payment_params.nonceStr,//随机字符串
|
|
package: dataInfo.data.payment_params.package,//package
|
|
signType: dataInfo.data.payment_params.signType,//MD5
|
|
paySign: dataInfo.data.payment_params.sign,//签名
|
|
success:(res)=> {
|
|
this.btncon = '确认提交'
|
|
this.isShow = true
|
|
this.isSuccess = true
|
|
this.title = '恭喜你，购买成功'
|
|
this.content = '可以在个人中心--我的订单查看订单详情'
|
|
// console.log('success:' + JSON.stringify(res));
|
|
this.$requst.post('order/paid',{order_id:dataInfo.data.order_id}).then(result=>{
|
|
// console.log('成功通知',result);
|
|
},error=>{})
|
|
},
|
|
fail: (err)=> {
|
|
// console.log('fail:' + JSON.stringify(err));
|
|
this.disabled = false
|
|
this.btncon = '确认提交'
|
|
}
|
|
});
|
|
} else {
|
|
this.btncon = '确认提交'
|
|
this.isShow = true
|
|
this.isSuccess = true
|
|
this.title = '恭喜你，购买成功'
|
|
this.content = '可以在个人中心--我的订单查看订单详情'
|
|
// console.log('success:' + JSON.stringify(res));
|
|
this.$requst.post('order/paid',{order_id:dataInfo.data.order_id}).then(result=>{
|
|
// console.log('成功通知',result);
|
|
},error=>{})
|
|
}
|
|
|
|
}
|
|
},error=>{})
|
|
}else {
|
|
this.$toolAll.tools.showToast('请先完善地址信息')
|
|
setTimeout(function(){
|
|
ya.chooseAddress()
|
|
},500)
|
|
}
|
|
},
|
|
changepopu(){
|
|
this.isShow = false
|
|
},
|
|
clickfen(index){
|
|
if(index==1){this.fhprice=''}
|
|
index==1?this.isBtn = true : this.isBtn = false
|
|
},
|
|
chooseAddress(){
|
|
uni.navigateTo({
|
|
url:'/pagesB/adManagement/adManagement?isOrder=0'
|
|
})
|
|
},
|
|
inputev(e){//分红金额输入框
|
|
let val = e.target.value
|
|
let ya =this
|
|
let result = this.$toolAll.tools.checkPrice(val,ya.usableAmount)
|
|
ya.len = result.len;
|
|
ya.fhprice = result.val
|
|
// if(ya.fhprice>=100){
|
|
ya.shijPrice = (ya.fhprice * ya.orderInfo.deduction_rate/100).toFixed(2)
|
|
// } else {
|
|
// ya.shijPrice = (ya.fhprice * ya.orderInfo.deduction_rate/100).toFixed(2)
|
|
// }
|
|
},
|
|
tankEv(){//立即使用事件
|
|
if(this.shijPrice==''){this.shijPrice = '0.0'}
|
|
if(this.fhprice<100){
|
|
this.$toolAll.tools.showToast('抵扣金额最低 100')
|
|
} else {
|
|
this.infoArr[1].price = this.shijPrice
|
|
if((this.infoArr[0].price - this.shijPrice)<=0){
|
|
this.hPrice = 0
|
|
} else {
|
|
this.hPrice = this.infoArr[0].price - this.shijPrice
|
|
}
|
|
if((this.hPrice * this.percentage/100)==0){
|
|
this.infoArr[3].price = '0.00'
|
|
} else {
|
|
this.infoArr[3].price = this.hPrice * this.percentage/100
|
|
}
|
|
this.isBtn = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|