<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)
}
},
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>