hezhiying/pages/warehouse/weituo.vue

<template>
	<view class="page">
		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view v-for="(item,index) in orderInfo" :key="index">
					<view class="orderNum">
						订单编号：{{orderDetails.order_sn}}
					</view>
					<view class="list">
						<view class="thumb">
							<image :src="item.goods_image" mode="aspectFill"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="one-omit">{{item.goods_name}}</text>
							</view>
							
							<view class="price">
								<text>购买价格：￥{{item.goods_price}}</text>
							</view>
							
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="weituotitle">
				委托价格
			</view>
			<view class="priceContent">
				￥{{orderDetails.order_amount}}
			</view>
			
			<view class="slide">
				<slider :value="value" @changing="sliderChange" :min="min" disabled :max="max"/>
				
			</view>
			<view class="numContent">
				<view class="">
					{{min}}
				</view>
				<view class="">
					{{max}}
				</view>
			</view>
		</view>
		<view class="order-info">
			<view class="info-list">
				<view class="list" @click="goyhq">
					<view class="title">优惠券:</view>
					<view class="content">
						<text>{{couponNumOrgin}}</text>
						<text class="iconfont icon-more"></text>
					</view>
				</view>
				<view class="list">
					<view class="title">上架手续费:</view>
					<view class="content">
						<text>￥{{sxf}}</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 订单明细 -->
		<view class="order-details">
			<view class="details-list">
				<view class="list">
					<view class="title">
						<text>使用佣金</text>
						<text  class="yongjin">￥{{available_commission_amount}}</text>
					</view>
					<view class="price">
						<u-switch v-model="switchValue" 
						:activeValue="1"
						@change="changeYongjin"
						:inactiveValue="0"
					></u-switch>
					</view>
				</view>
				
			</view>
		</view>
		<view class="btnContainer">
			<view class="heji">
				合计：￥{{total}}
			</view>
			<view class="btnItem" @click="submitHandle">
				确认上架
			</view>
		</view>
	</view>
</template>

<script>
	import jweixin from 'jweixin-module'
	// Vue.use(jweixin)
	import {orderDetail,payUpGoods,getUserCommissionStatistic} from '@/common/api.js'
	export default {
		data() {
			return {
				orderInfo:[],
				warehouse:[],
				orderDetails:{},
				value:30,
				min:0,
				max:0,
				coupon_id:null,
				sxfRadio:null,
				sxf:null,
				switchValue:1,
				total:0,
				enough:0,
				couponNumOrgin:0,
				available_commission_amount:0,
			};
		},
		methods:{
			changeYongjin(val){
				console.log(val)
				if(val){
					let total = (Number(this.sxf) - Number(this.couponNumOrgin) - Number(this.available_commission_amount)).toFixed(2);
					if(total>0){
						this.total = total
					}else{
						this.total = 0
					}
				}else{
					if((Number(this.sxf) - Number(this.couponNumOrgin)).toFixed(2)>0){
						this.total = (Number(this.sxf) - Number(this.couponNumOrgin)).toFixed(2);
					}else{
						this.total = 0
					}
					
				}
			},
			
			submitHandle(){
				let params={
					order_id:this.id,
					coupon_id:this.coupon_id,
					use_commission:this.switchValue,
				}
				payUpGoods(params).then(res=>{
					let self = this;
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.pay_data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.pay_data.timeStamp, // 必填，生成签名的时间戳
						nonceStr: res.data.pay_data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.pay_data.signType, // 必填，签名，见附录1
						jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
					jweixin.ready(function() {
						jweixin.checkJsApi({
							jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
							success: function(res) {
								console.log('checkjsapi Success');
								console.log(res);
							},
							fail: function(res) {
								console.log('res');
								console.log(res);
							}
						});
						jweixin.chooseWXPay({
							timestamp: res.data.pay_data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							nonceStr: res.data.pay_data.nonceStr, // 支付签名随机串，不长于 32 位
							package: res.data.pay_data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
							signType: res.data.pay_data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							paySign: res.data.pay_data.paySign, // 支付签名
							success: function(res) {
								uni.showToast({
									title:"支付成功",
									icon:'none'
								});
								uni.redirectTo({
									url:"/pages/warehouse/buy"
								})
							},
							cancel: function(res) {
								   console.log(res)
							},
							fail: function(res) {
								uni.showToast({
									title:"支付失败",
									icon:'none'
								});
							}
						});
					});
		 
					jweixin.error(function(res) {
						console.log(res);
					});
					
				
					// if (typeof WeixinJSBridge != "undefined") {
					// 	WeixinJSBridge.invoke(
					// 	'getBrandWCPayRequest', {
					// 		"appId": rea.data.pay_data.appId,   
					// 		"timeStamp": rea.data.pay_data.timeStamp,    
					// 		"nonceStr": rea.data.pay_data.nonceStr,
					// 		"package": rea.data.pay_data.package,
					// 		"signType": rea.data.pay_data.signType, 
					// 		"paySign": rea.data.pay_data.paySign
					// 	},
					// 	(res)=> {
					// 		if (res.err_msg == "get_brand_wcpay_request:ok") {
					// 			uni.showToast({
					// 				title:"支付成功",
					// 				icon:'none'
					// 			});
					// 		} else {
					// 			uni.showToast({
					// 				title:"支付失败",
					// 				icon:'none'
					// 			});
							
					// 		}
					// 	})
					// }
					this.getOrderDetails()
				})
				
			},
			goyhq(){
				uni.navigateTo({
					url:"/pages/MyCoupon/MyCoupon?id="+this.id
				})
			},
			gopay(){
				uni.navigateTo({
					url:"/pages/warehouse/pay?num="+this.orderDetails.order_amount+'&id='+this.orderDetails.id
				})
			},
			getOrderDetails(){
				orderDetail({id:this.id,custom: { auth: true }}).then(res=>{
					getUserCommissionStatistic().then(result=>{
						
						this.available_commission_amount = result.data.available_commission_amount
						// this.available_commission_amount = 10
					
						this.min = Number(res.data.order_amount).toFixed(2)
						this.orderDetails = Object.assign({},this.orderDetails,res.data);
						this.orderInfo = res.data.order_goods
						this.warehouse = res.data.warehouse
						this.sxfRadio = res.data.entrustment_ratio
						this.max =Number((Number(this.min)*(1+(Number(res.data.entrusted_ratio)/100)))).toFixed(2)
						this.value = this.max
						console.log(this.max)
						let sxf = Number(res.data.order_amount)*(Number(this.sxfRadio)/100)
						this.sxf = sxf.toFixed(2)
						// if(this.sxf>this.enough){
							if(this.switchValue==1){
								this.total = (Number(this.sxf) - Number(this.couponNumOrgin) - Number(this.available_commission_amount)).toFixed(2);
								console.log(Number(this.available_commission_amount))
							}else{
								this.total = (Number(this.sxf) - Number(this.couponNumOrgin)).toFixed(2);
							}
							
							if(this.total<0){
								this.total = 0
							}
						// }else{
						// 	this.total = (Number(this.sxf)).toFixed(2);
						// 	this.couponNum = 0
						// }
					})
					
				})
			},
			sliderChange(val){
				this.orderDetails.order_amount = val.detail.value;
				let sxf = Number(val.detail.value)*(Number(this.sxfRadio)/100)
				this.sxf = sxf.toFixed(2)
				this.total = (Number(this.orderDetails.order_amount)+ Number(this.sxf) - Number(this.couponNum)).toFixed(2);
			},
		
			
		},
		onLoad(option) {
			if(option.coupon){
				this.coupon_id = option.coupon_id;
				this.couponNumOrgin = Number(option.num);
				this.enough = Number(option.enough)
			}else{
				this.couponNumOrgin = 0;
			}
			this.id = option.id;
			this.getOrderDetails()
		
		}
	}
</script>

<style scoped lang="scss">
	@import 'weituo.scss';
	.numContent{
		display: flex;
		width:100%;
		justify-content: space-between;
		align-items: center;
		padding:0 24rpx 24rpx 24rpx;
		color:gray;
	}
	.yongjin{
		color:$base;
		margin-left:40rpx;
	}
</style>