customerapp-H5/pages/CustomerReturnPay/returnedInfo.vue

<template>
	<view>
		<view v-if="showData" class="container">
		  <view style="padding: 20rpx 48rpx">
		    <img src="https://soap.cliu.cc/chumeng/logo.png" class="logImg" alt="">
			  <view v-if="form.status" class="container_title">
				  <image src="../../static/CustomerReturnPay/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-if="i != 0 && list.length > 1" class="image">
						<image src="../../static/CustomerReturnPay/line.png" style="width: 100%;" mode="widthFix" alt="">
					</view> 
					<view class="box nav" :class="(i+1==1 && list.length==1) ? 'nav1' : (i+1==1 && list.length>1) ? 'nav3' : 'nav2'">
					  <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,k) in item.goods">
					  	<text class="textL">{{ k }}</text>
						<text class="textR">{{ `${Object.values(v) + Object.keys(v)}` }}</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-if="!showData && finish" class="finish">
			<image src="../../static/CustomerReturnPay/w3.png" mode="widthFix"></image>
			<text>{{ message }}</text>
		</view>
		<view v-if="!showData && !finish" class="notData">
			<image src="https://soap.cliu.cc/chumeng/no_record.png" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
import { getRefundInfo, CustomerReturnPay } from '@/api/refundDifference.js';
import { wxLogin } from '@/api/index.js'
export default {
	data() {
		return {
			showData: false,
			form: {},
			list: [],
			data: {},
			finish: false,
			message: '',
			openid: '',
			id: '',
			verify: ''
		}
	},
	filters: {
		hideMiddle(val){ //隐藏号码
			if (val === null || !val) {
				return '';
			} else {
				return `${val.substring(0, 3)}****${val.substring(val.length - 4)}`;
			}
		}
	},
	onLoad(e) {
		// e = {
		// 	id: 542,
		// 	verify: 'lkjzhq'
		// }

		// 从登录页进入 或者扫二维码进入
		if (e.id && e.verify) {
			this.id = e.id
			this.verify = e.verify
			let wxcode = this.getUrlParam('code')
			
			// 回调进入
			if (!uni.getStorageSync('token') && wxcode) {
				this.getLogin(wxcode, e.id, e.verify)
				return
			}
			
			// 没有token, 去回调
			if (!uni.getStorageSync('token')) {
				this.toWxchatLogin(`/pages/CustomerReturnPay/returnedInfo?id=${e.id}&verify=${e.verify}`, null)
				return false;
			}
			this.getList()
		}
	},
	methods: {
		// 跳转微信授权
		toWxchatLogin(url, state) {
			url = url || '/pages/index/index';
			state = state || 'cli';
			const redirect_uri = encodeURIComponent(`${this.$config.redirect_uri}/#${url}`);
			const auth = () =>
				(window.location.href = `${this.$config.wxURL}?appid=${
				this.$config.appid
			}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`);
			auth();
		},
		// 登录
		getLogin(wxcode, id, verify) {
			wxLogin({ code: wxcode }).then(res => {
				let data = res.data
				if (data.token) {
					uni.setStorageSync('token', data.token)
					uni.setStorageSync('userInfo', data.user)
					this.getList()
				} else if (!data.token && data.openid) {
					uni.showModal({
						title: '提示',
						content: data.msg,
						showCancel: false,
						success: res => {
							uni.reLaunch({
								url: '../login/login?type=return' + '&openid=' + data.openid + '&id=' + id + '&verify=' + verify
							})
						}
					})
				} else if (!data.token && !data.openid) {
					uni.showModal({
						title: '错误提示',
						content: data.msg,
						showCancel: false
					})
				}
			})
		},
		//获取code值方法
		getUrlParam(name) {
		    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); //构造一个含有目标参数的正则表达式对象
		    var r = window.location.search.substr(1).match(reg); //匹配目标参数
		    if (r != null) return decodeURIComponent(r[2]);
		    // return null; //返回参数值
		    return ''; //返回参数值
		},
		// 解析链接中的参数
		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'
			}
		},
		getList() {
			getRefundInfo({ refund_id: this.id, verify: this.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.msg || '获取失败',
						showCancel: false
					})
				}
			}).catch(err => {
			})
		},
		toPay() {
			uni.navigateTo({
				url: './returnPay?id=' + this.id + '&amount=' + this.form.account
			})
		}
	}
}
</script>
<style>
	page {
		background-size: 100% auto;
		background-repeat: repeat-y;
		background-image: url("https://soap.cliu.cc/chumeng/wall-min.png");
	}
</style>
<style lang="scss" scoped>
	.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: 588rpx;
	  height: 94rpx;
	  display: block;
	  margin: 0 auto;
	}
	.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>