CustomerReturnPay/pages/returnedInfo/index.vue

<template>
	<view>
		<view v-show="showData" class="container">
		  <view style="padding: 20rpx 48rpx">
		    <img src="../../static/img/logo.png" class="logImg" alt="">
			  <view v-if="form.status" class="container_title">
				  <image src="../../static/img/w7.png" mode="widthFix" style="width: 100rpx; margin-right: 10rpx"></image>
				  <text>已完成支付</text>
			  </view>
		  </view>
			<view class="boxList">
				<view v-for="(item, i) in list" :key="i">
					<view v-show="i != 0 && list.length > 1" class="image">
						<image src="../../static/img/line.png" style="width: 100%;" mode="widthFix" alt="">
					</view>
					<view class="box nav" :class="getStyle(i, list.length)">
					  <view class="box_item">
					  	<text class="textL">退货人：</text>
						<text class="textR">{{ item.customer_name }}</text>
					  </view>
					  <view class="box_item">
					  	<text class="textL">手机号：</text>
					  	<text class="textR">{{ item.customer_phone | hideMiddle }}</text>
					  </view>
					  <view class="box_line" />
					  <view class="box_item">
					  	<text class="textL">所属公司客户：</text>
					  	<text class="textR">{{ item.user && item.user.nickname }}</text>
					  </view>
					  <view class="box_item">
					  	<text class="textL">手机号：</text>
					  	<text class="textR">{{ item.user && item.user.mobile | hideMiddle }}</text>
					  </view>
					  <view class="box_line" />
					  <view class="box_item" v-for="(v) in item.applydetail">
					  	<text class="textL">{{ v.good_name }}：</text>
						<text class="textR">{{ `${v.total + v.unit}` }}</text>
					  </view>
					  <view class="box_line" />
					  <view class="box_item">
					  	<text class="textL">应退差价：</text>
					  		<text class="textR">{{ item.return_price }}</text>
					  </view>
					  <view class="box_item">
					  	<text class="textL">实退差价：</text>
					  	<text class="textR">{{ item.fact_money }}</text>
					  </view>
					  <view v-show="item.remark" class="box_item">
					  	<text class="textL">备注：</text>
					  	<text class="textR">{{ item.remark }}</text>
					  </view>
					</view>
				</view>
				<view class="bottom">
					<view class="text">
						差价总金额：
					</view>
					<view class="num">
						￥{{ form.account }}
					</view>
					<view v-if="!form.status" class="pay" @click="toPay()">
						立即支付
					</view>
				</view>
			</view>
		</view>
		<view v-show="!showData && finish" class="finish">
			<image src="../../static/img/w3.png" mode="widthFix"></image>
			<text>{{ message }}</text>
		</view>
		<view v-show="!showData && !finish" class="notData">
			<image src="../../static/img/no_record.png" mode="widthFix"></image>
			<!-- <text>暂无数据</text> -->
		</view>
	</view>
</template>
<script>
import { getRefundInfo, CustomerReturnPay, getOpenid } from '../../api/index.js';
export default {
  data() {
    return {
	  showData: false,
	  form: {},
	  list: [],
	  data: {},
	  finish: false,
	  message: '',
	  openid: ''
    }
  },
  filters: {
	hideMiddle(val){ //隐藏号码
	  	if (val === null || !val) {
	  		return '';
	  	} else {
	  		return `${val.substring(0, 3)}****${val.substring(val.length - 4)}`;
	  	}
	}
  },
  onLoad(option) {
	let wxcode = this.getUrlParam('code')
	if (!wxcode) {
		const redirect_uri = 'http://api.app.cliu.cc'
		const wxURL = 'https://open.weixin.qq.com/connect/oauth2/authorize'
		const appid = 'wx5224793b7dc7f7b7'
		let uri = encodeURIComponent(
			`${redirect_uri}/h5/#/pages/returnedInfo/index?id=${option.id}&verify=${option.verify}`
		); 
		let authURL =
			`${wxURL}?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
		window.location.href = authURL;
		return false;
	}
	getOpenid({
		code: wxcode
	}).then(res => {
		if (res.code == 200) {
			this.openid = res.data.openid
		} else {
			uni.showToast({
				title: res.msg || '获取openid失败',
				icon: 'none'
			})
		}
	}).catch(err => {
		uni.showToast({
			title: err || '获取openid失败',
			icon: 'none'
		})
	})
	this.data = option
	this.getList()
  },
  methods: {
	getStyle(i, l) {
		const a = i + 1
		if (a == 1 && l == 1) {
			return 'nav1'
		} else if (a == 1 && l > 1) {
			return 'nav3'
		} else if (a == l && a != 1) {
			return 'nav2'
		}
	},
	//获取code值方法
	getUrlParam(name) {
	    console.log(window.location, 'location');
	    console.log(window.location.href, 'href');
	    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); //构造一个含有目标参数的正则表达式对象
	    var r = window.location.search.substr(1).match(reg); //匹配目标参数
	    if (r != null) return decodeURIComponent(r[2]);
	    // return null; //返回参数值
	    return ''; //返回参数值
	},
	getList() {
		getRefundInfo({ refund_id: this.data.id, verify: this.data.verify }).then(res => {
			if (res.code == 200) {
				if (res.data) {
					this.showData = true
					this.list = res.data.customer_return
					this.form = res.data
				}
			} else if (res.code == 450001) {
				this.finish = true
				this.message = res.message
			} else {
				uni.showModal({
					content: res.message || '获取失败',
					showCancel: false
				})
			}
		}).catch(err => {
		})
	},
	toPay() {
		CustomerReturnPay({ refund_id: this.data.id, amount: this.form.account, openid: this.openid  }).then(res => {
			if (res.code === 200) {
				let callback_succ_func = res => {
					uni.showToast({
						title: '支付成功'
					})
				}
				let callback_error_func = res => {
					uni.showModal({
						content: '支付失败！',
						showCancel: false
					})
				}
				this.wxJsPay(res.data, callback_succ_func, callback_error_func)
			} else {
				uni.showToast({
					title: res.message || '失败',
					icon: 'none'
				})
				return false;
			}
		})
		.catch(err => {})
		.finally(() => {
			setTimeout(() => {}, 3000)
		})
	},
	//WeixinJSBridge判断
	wxJsPay(data, callback_succ_func, callback_error_func) {
		if (typeof WeixinJSBridge == 'undefined') {
			if (document.addEventListener) {
				document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
			} else if (document.attachEvent) {
				document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
				document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
			}
		} else {
			this.jsApiCall(data, callback_succ_func, callback_error_func);
		}
	},
	//调起支付
	jsApiCall(data, callback_succ_func, callback_error_func) {
		//使用原生的，避免初始化appid问题
		WeixinJSBridge.invoke(
			'getBrandWCPayRequest', {
				appId: data.appId,
				timeStamp: data.timestamp,
				nonceStr: data.nonceStr,
				package: data.package,
				signType: data.signType,
				paySign: data.paySign
			},
			function(res) {
				var msg = res.err_msg ? res.err_msg : res.errMsg;
				switch (msg) {
					// //支付成功时
					case 'get_brand_wcpay_request:ok':
						// if (callback_succ_func) {
						uni.showModal({
							title: '支付成功',
							showCancel: false,
							success: function(res) {
								uni.reLaunch({
									url: "/pages/payment/payment"
								})
							},
							// complete: function() {
							// 	that.SearchStatus()
							// }
						});
						// }
						break;
					default:
						//支付失败时
						WeixinJSBridge.log('支付失败!' + msg + ',请返回重试.');
						if (callback_error_func) {
							callback_error_func({
								msg: msg
							});
						}
						break;
				}
			}
		);
	},
  }
}
</script>
<style lang="scss" scoped>
	page {
		background-size: 100% auto;
		background-repeat: repeat-y;
		background-image: url("../../static/img/wall-min.png");
	}
	.finish {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #fff;
		padding-top: 50%;
		image {
			width: 100rpx;
			margin-bottom: 20rpx;
		}
	}
	.notData {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		color: #fff;
		height: 100vh;
		image {
			width: 500rpx;
		}
	}
  .container {
    width: 100vw;
	height: 100%;
	padding-top: 40rpx !important;
	padding-bottom: 140rpx;
	&_title {
		display:flex;
		color: #fff;
		align-items: center;
		justify-content: center;
		text {
			font-size: 40rpx;
			font-weight: bold;
		}
	}
	.logImg {
	  width: 100%;
	  display: block;
	}
	.nav1 {
		border-radius: 16rpx;
	}
	.nav2 {
		border-radius: 0 0 16rpx 16rpx !important;
	}
	.nav3 {
		border-radius: 16rpx 16rpx 0 0 !important;
	}
	.boxList {
		padding: 0 24rpx;
	}
	.box {
		margin-top: -1rpx;
		padding: 24rpx 24rpx 0 24rpx;
		background: #FFFFFF;
		// border-radius: 16rpx;
		&_item {
			display: flex;
			justify-content: space-between;
			text {
				font-size: 32rpx;
				margin-bottom: 24rpx;
				display: block;
			}
			.textL {
				color: #999999;
			}
			.textR {
				color: #333333;
				width: 360rpx;
				text-align: end;
				word-break: break-all;
			}
		}
		&_line {
			border-bottom: 2rpx solid #EEEEEE;
			margin-bottom: 24rpx;
		}
	}
	.image {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.bottom {
		position: fixed;
		height: 112rpx;
		left: 0;
		bottom: 0;
		width: 100%;
		border-top: 2rpx solid #EEEEEE;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.pay {
			width: 30%;
			line-height: 80rpx;
			text-align: center;
			margin-right: 20rpx;
			background: linear-gradient(91deg, #F30000 0%, #FE4815 100%);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		.text {
			font-size: 26rpx;
			color: #333333;
		}
		.num {
			font-size: 34rpx;
			color: #FB231F;
			font-weight: bold;
			margin-right: 20rpx;

		}
	}
	// .bottom {
	// 	position: fixed;
	// 	left: 0;
	// 	bottom: 0;
	// 	width: 100%;
	// 	background-size: 100% auto;
	// 	background-repeat: repeat-y;
	// 	background-image: url("../../static/img/wall-min.png");
	// 	.btn {
	// 		padding: 20rpx 24rpx;
	// 		background-color: #fff;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		.pay {
	// 			width: 100%;
	// 			line-height: 88rpx;
	// 			text-align: center;
	// 			background: linear-gradient(91deg, #F30000 0%, #FE4815 100%);
	// 			border-radius: 44rpx 44rpx 44rpx 44rpx;
	// 			font-size: 32rpx;
	// 			font-weight: bold;
	// 			color: #FFFFFF;
	// 		}
	// 	}
	// 	.totalMoney {
	// 		padding: 86rpx 0 82rpx 0;
	// 		margin: 24rpx 24rpx 40rpx 24rpx;
	// 		border-radius: 16rpx 16rpx 16rpx 16rpx;
	// 		background-color: #fff;
	// 		display: flex;
	// 		flex-direction: column;
	// 		align-items: center;
	// 		font-weight: bold;
	// 		&_text {
	// 			font-size: 36rpx;
	// 			margin-bottom: 24rpx;
	// 			color: #333333;
	// 		}
	// 		&_num {
	// 			font-size: 76rpx;
	// 			color: #FB231F;
	// 		}
	// 	}
	// }
}
</style>