From 12ae8ac30561a681c864acd694aaee6ebc9330b7 Mon Sep 17 00:00:00 2001
From: Seep <543607193@qq.com>
Date: Sun, 22 Oct 2023 14:05:18 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E5=85=85=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/api.js         |   3 +-
 pages.json            |   7 +
 pages/my/my.vue       |   6 +
 pages/my/recharge.vue | 495 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 510 insertions(+), 1 deletion(-)
 create mode 100644 pages/my/recharge.vue

diff --git a/common/api.js b/common/api.js
index f58630a..e53b5d2 100644
--- a/common/api.js
+++ b/common/api.js
@@ -82,5 +82,6 @@ export const submitPingzheng = (params, config = {custom: { auth: true }}) => ht
 export const confirmPay = (params, config = {custom: { auth: true }}) => http.post('/api/user/confirmPay', params, config);
 //确认签约
 export const confirmSign = (params, config = {custom: { auth: true }}) => http.post('/api/user/updateUserInfo', params, config);
-
+//充值
+export const recharge = (params, config = {custom: { auth: true }}) => http.post('/api/user/recharge', params, config);
 
diff --git a/pages.json b/pages.json
index df0cfdf..989b0f1 100644
--- a/pages.json
+++ b/pages.json
@@ -47,6 +47,13 @@
 				"navigationBarBackgroundColor": "#FFFFFF"
 			}
 		},
+		{
+		    "path" : "pages/my/recharge",
+		    "style" : {
+		    	"navigationBarTitleText": "",
+		    	"navigationBarBackgroundColor": "#FFFFFF"
+		    }
+		},
 		{
 		    "path" : "pages/my/incomeExpenditureDetail",
 		    "style" : {
diff --git a/pages/my/my.vue b/pages/my/my.vue
index f75ef30..4b69c65 100644
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@@ -191,6 +191,7 @@
 			<u-cell-group :border="false">
 				<u-cell icon="order" :iconStyle="{'color':'#236030'}" @click="onIncome" :titleStyle="{'color':'#236030'}" title="收支详情" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
 				<u-cell icon="gift" :iconStyle="{'color':'#236030'}" @click="onMySign" :titleStyle="{'color':'#236030'}" title="签约中心" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
+				<u-cell icon="rmb-circle" :iconStyle="{'color':'#236030'}" @click="onRecharge" :titleStyle="{'color':'#236030'}" title="充值入口" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
 				<u-cell icon="map" :iconStyle="{'color':'#236030'}" @click="onAddress" :titleStyle="{'color':'#236030'}" title="我的地址" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
 				<u-cell icon="coupon" :iconStyle="{'color':'#236030'}" @click="jump(1)" :titleStyle="{'color':'#236030'}" title="我的优惠券" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
 				<u-cell icon="scan" :iconStyle="{'color':'#236030'}" @click="jump(4)" :titleStyle="{'color':'#236030'}" title="我的邀请二维码" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
@@ -273,6 +274,11 @@
 				  url: '/pages/login/login'
 				})
 			},
+			onRecharge(){
+				uni.navigateTo({
+					url: '/pages/my/recharge',
+				})
+			},
 			// 收支详情
 			onIncome(){
 				uni.navigateTo({
diff --git a/pages/my/recharge.vue b/pages/my/recharge.vue
new file mode 100644
index 0000000..30c695d
--- /dev/null
+++ b/pages/my/recharge.vue
@@ -0,0 +1,495 @@
+<template>
+	<view class="page">
+		
+		<view class="tabs">
+			<view :class="activeIndex==item.id?'tabsItem active':'tabsItem'" @click="getPay(item)" v-for="item in list4" :key="item.id">
+				{{item.name}}
+			</view>
+			
+		</view>
+		<view >
+			<view class="yhk" v-show="activeIndex==1">
+				<view class="list-input">
+					<view class="title">
+						<text>银行卡姓名</text>
+					</view>
+					<view class="content">
+						<text>{{incomeDetail.bank_realname}}</text>
+						<image 
+						v-clipboard:copy="incomeDetail.bank_realname"
+						    v-clipboard:success="(type) => onCopyResult('success')"
+						    v-clipboard:error="(type) => onCopyResult('error')"
+						src="../../static/image/copy.png" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="list-input">
+					<view class="title">
+						<text>卡号</text>
+					</view>
+					<view class="content" >
+						<text>{{incomeDetail.bank_no}}</text>
+						<image
+						 v-clipboard:copy="incomeDetail.bank_no"
+						     v-clipboard:success="(type) => onCopyResult('success')"
+						     v-clipboard:error="(type) => onCopyResult('error')"
+						 src="../../static/image/copy.png" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="list-input">
+					<view class="title">
+						<text>开户行</text>
+					</view>
+					<view class="content">
+						<text>{{incomeDetail.bank_address}}</text>
+						<image
+						 v-clipboard:copy="incomeDetail.bank_address"
+						     v-clipboard:success="(type) => onCopyResult('success')"
+						     v-clipboard:error="(type) => onCopyResult('error')"
+						 src="../../static/image/copy.png" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="list-input">
+					<view class="title">
+						<text>支行</text>
+					</view>
+					<view class="content">
+						<text>{{incomeDetail.bank_sub_address}}</text>
+						<image
+						 v-clipboard:copy="incomeDetail.bank_sub_address"
+						     v-clipboard:success="(type) => onCopyResult('success')"
+						     v-clipboard:error="(type) => onCopyResult('error')"
+						 src="../../static/image/copy.png" mode="widthFix"></image>
+					</view>
+				</view>
+				
+			</view>
+			<view v-show="activeIndex!=1" class="ping-zheng">	
+				<image v-show="activeIndex==2" style="width: 60%;height: 110px;" :src="incomeDetail.alipay_image||''" mode="aspectFit" ></image>
+				<image v-show="activeIndex==3" style="width: 60%;height: 110px;" :src="incomeDetail.wechat_image||''" mode="aspectFit" ></image>
+				
+				<view>{{activeIndex==2?'支付宝':'微信'}}收款码</view>
+				
+			</view> 
+		</view>
+		<view class="saveBtn" @click="show=true">确认充值</view>
+		<u-modal z-index="99" :show="show" title="充值金额" @cancel="show=false" @confirm="submit">
+			<view class="slot-content">
+				<u-radio-group style="margin-top: 10px;" v-model="value" @change="radioGroupChange">
+					<u-radio 
+						@change="radioChange" 
+						style="margin-left: 10px;"
+						v-for="(item, index) in list" :key="index" 
+						:name="item.name"
+						:disabled="item.disabled"
+					>
+						{{item.name}}
+					</u-radio>
+				</u-radio-group>
+				<u-input type="digit" v-model="amount" style="margin-top: 20px;" placeholder="请输入充值金额"></u-input>
+				<view v-if="!amount&&validate" style="color: red;">请输入充值金额</view>
+			</view>
+		</u-modal>
+		<u-toast ref="uToast"></u-toast>
+	</view>
+</template>
+
+<script>
+	import {getToken} from '@/common/auth.js'
+	import {incomeDetail,privacyPolicy,submitPingzheng,confirmPay,recharge} from '@/common/api.js'
+	export default {
+		data() {
+			return {
+				finishImageList:[],
+				fileList1: [],
+				num:0,
+				id:null,
+				show:false,
+				content:'',
+				activeIndex:1,
+				list4: [{
+					name: '银联',
+					id:1
+				}, {
+					name: '支付宝',
+					id:2
+				}, {
+					name: '微信',
+					id:3
+				}],
+				yhk:{
+					bank_realname:null,
+					bank_mobile:null,
+					bank_no:null,
+					bank_address:null,
+				},
+				pingzhengUrl:'',
+				wxurl:'',
+				incomeDetail: {},
+				list: [
+					{
+						name: '银联',
+						disabled: false
+					},
+					{
+						name: '支付宝',
+						disabled: false
+					},
+					{
+						name: '微信',
+						disabled: false
+					}
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				value: '银联',
+				amount: '',
+				typeMap: {
+					'银联': 'bank',
+					'微信': 'wechat',
+					'支付宝': 'alipay',
+				},
+				validate: false,
+			};
+		},
+		onShow() {
+			// this.getOrderDetails()
+		},
+		methods:{
+			submit(){
+				if(!this.amount){
+					this.validate = true
+					return;
+				}
+				recharge({
+					amount: this.amount,
+					method: this.typeMap[this.value]
+				}).then(res => {
+					console.log(res,'res')
+					if(res.code === 1){
+						this.show = false;
+						this.$refs.uToast.show({
+							message:'充值记录提交'
+						})
+						const tem = setTimeout(() => {
+							uni.navigateBack({
+								delta:1
+							})
+							clearTimeout(tem)
+						},2000)
+					}
+				})
+			},
+			uploadPingzheng(){
+				this.finishImageList = []
+				this.$refs.upload.chooseFile()
+			},
+			// 新增图片
+			async afterRead(event) {
+				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
+				let lists = [].concat(event.file)
+				let fileListLen = this[`fileList${event.name}`].length
+				lists.map((item) => {
+					this[`fileList${event.name}`].push({
+						...item,
+						status: 'uploading',
+						message: '上传中'
+					})
+				})
+				for (let i = 0; i < lists.length; i++) {
+					const result = await this.uploadFilePromise(lists[i].url)
+					// this.avatarUrl = JSON.parse(result).data.fullurl;
+					// this.avatarUrl_short = JSON.parse(result).data.url;
+					// updateUserInfo({avatar:this.avatarUrl}).then(res=>{
+					// 	this.$refs.uToast.show({
+					// 		message:'修改头像成功'
+					// 	})
+					// })
+				}
+				
+			},
+			//上传照片
+			uploadFilePromise(url) {
+				uni.showLoading({
+					title: '上传中'
+				})
+				return new Promise((resolve, reject) => {
+					let a = uni.uploadFile({
+						url: this.baseUrl+'api/common/upload', 
+						filePath: url,
+						name: 'file',
+						header:{
+							token:getToken()
+						},
+						formData: {
+						},
+						success: (res) => {
+							if(JSON.parse(res.data).code==1){
+								setTimeout(() => {
+									uni.hideLoading();
+									this.finishImageList = [{url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url}]
+									console.log(this.finishImageList, 'this.finishImageList')
+									resolve(res.data)
+								}, 1000)
+							}else{
+								uni.hideLoading();
+								uni.$u.toast(JSON.parse(res.data).msg)
+								
+								resolve(res.data)
+							}
+						},
+						fail: (res) => {
+							uni.hideLoading();
+							console.log(res,"rrr")
+						}
+					});
+				})
+			},
+			sureIncome(){
+				confirmPay({
+					id: this.incomeDetail.id,
+				}).then(res => {
+					if(res.code === 1){
+						this.$refs.uToast.show({
+							message:'确认收款'
+						})
+						const tem = setTimeout(() => {
+							uni.navigateBack({
+								delta:1
+							})
+							clearTimeout(tem)
+						},1000)
+						
+					}
+				})
+			},
+			lookPic(){
+				uni.previewImage({
+					urls: [this.incomeDetail.pay_voucher],
+					success: (res) => {
+						
+					}
+				});
+			},
+			getPay(item){
+				this.activeIndex = item.id;
+			},
+			onCopyResult(type) {
+			    if (type==='success') {
+					this.$refs.uToast.show({
+						message:'复制成功'
+					})
+			    } else {
+					this.$refs.uToast.show({
+						message:'复制失败'
+					})
+			    }
+			},
+		
+			getOrderDetails(){
+				incomeDetail({custom: { auth: true }}).then(res=>{
+					console.log(res, 'res');
+					if(res.data.length > 0){
+						this.incomeDetail = res.data[0]
+						if(this.incomeDetail.pay_voucher){
+							this.finishImageList = [{url:this.incomeDetail.pay_voucher,path:this.incomeDetail.pay_voucher}]
+						}
+					}else{
+						this.incomeDetail = {}
+					}
+					
+				})
+			},
+			close() {
+				this.show = false
+			},
+			getText(){
+				privacyPolicy({id:4}).then(res=>{
+					this.content = res.data.content
+				})
+			},
+			
+		},
+		destroyed() {
+			
+		},
+		watch:{
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.info{
+		padding: 10px 0 20px 10px;
+		background: #fff;
+		.title{
+			text-align: center;
+			color: #e0e00e;
+			margin-bottom: 10px;
+		}
+	}
+	.ping-zheng{
+		margin-top: 20px;
+		background-color: #fff;
+		text-align: center;
+		padding: 30px 0;
+		// image{
+		// 	img{
+		// 		width: 50% !important;
+		// 		height: 50% !important;
+		// 	}
+			
+		// }
+	}
+.page{
+	min-height:calc(100vh - 45px);
+	background-color: #f5f5f5;
+	padding:24rpx;
+	.tabs{
+		height: 80rpx;
+		background-color: rgb(35, 96, 48);
+		padding: 6rpx;
+		border-radius: 5px;
+		display: flex;
+		.tabsItem{
+			flex:1;
+			text-align: center;
+			line-height: 70rpx;
+			font-size: 26rpx;
+			color: #ffffff;
+		}
+		.active{
+			background-color: #fff;
+			font-size: 30rpx;
+			font-weight: bold;
+			border-radius: 5px;
+			color: rgb(35, 96, 48);
+		}
+	}
+	.yhk{
+		width: 100%;
+		background-color: #FFFFFF;
+		margin-top:20rpx;
+		border-radius: 10px;
+		.list-input{
+			display: flex;
+			align-items: center;
+			padding: 0 4%;
+			height: 100rpx;
+			border-bottom: 2rpx solid #f6f6f6;
+			
+			.title{
+				display: flex;
+				align-items: center;
+				width: 30%;
+				height: 100%;
+				text{
+					 color: #236030;
+					font-size: 26rpx;
+				}
+			}
+			image{
+				margin-left:10rpx;
+				width:30rpx;
+				height:auto;
+			}
+			.content{
+				display: flex;
+				align-items: center;
+				width: 70%;
+				height: 100%;
+				justify-content: space-between;
+				input{
+					width: 100%;
+					height: 100%;
+					font-size: 26rpx;
+					color: #222222;
+				}
+			}
+		}
+		.yzmBtn{
+			background: rgb(35, 96, 48);
+			color: rgb(255, 255, 255);
+			margin-bottom: 5px;
+			padding: 0px;
+			width: 126px;
+			overflow: hidden;
+			font-size: 14px;
+			height: 38px;
+			line-height: 38px;
+			color: #fff;
+			text-align: center;
+			border-radius:10rpx;
+		}
+		
+	}
+	.saveBtn{
+		background: rgb(35, 96, 48);
+		color: rgb(255, 255, 255);
+		border: 1px solid rgb(35, 96, 48);
+		overflow: hidden;
+		font-size: 28rpx;
+		height: 44px;
+		line-height: 44px;
+		text-align: center;
+		border-radius: 10rpx;
+		margin-top:50rpx;
+	}
+	.input-info{
+	  padding: 0 6%;
+	  .info{
+	    display: flex;
+	    align-items:center;
+	    justify-content: space-between;
+	    width: 100%;
+	    height: 100rpx;
+	    border-bottom: 2rpx solid #f6f6f6;
+	    input{
+	      width: 70%;
+	      height: 100%;
+	      font-size: 26rpx;
+	      color: #222222;
+	    }
+	    .more{
+	      display: flex;
+	      align-items: center;
+	      justify-content: flex-end;
+	      width: 30%;
+	      height: 100%;
+	      .iconfont{
+	        font-size: 34rpx;
+	      }
+	      .mo{
+	        font-size: 26rpx;
+	        padding-left: 20rpx;
+	        margin-left: 10rpx;
+	        border-left: 2rpx solid #EEEEEE;
+	      }
+	    }
+	  }
+	}
+}
+.zfb{
+	text-align: center;
+	image{
+		width:200rpx;
+		height:200rpx;
+		margin:100rpx auto;
+	}
+	.mesInfo{
+		margin-top: 26rpx;
+		font-size: 26rpx;
+		color: #999;
+	}
+}
+
+.other-btn{
+	width: 75px !important;
+	height: 30px !important;
+	font-size: 13px !important;
+	line-height: 30px !important;
+	position: absolute !important;
+	right: 10px;
+	top: 10px !important;
+	margin-top: 0px !important;
+}
+</style>