hwnc/pagesA/pages/mypurse/transfer/transfer.vue

<template>
	<view :class="[AppTheme]" id="withdraw" class="all_box">
		<view class="block">
			<view class="zh">充值金额</view>
			<view class="money">
				<u--input placeholder="请输入充值金额" fontSize="25" color="#000000" prefixIcon="rmb" v-model="money"
					border="bottom" prefixIconStyle="font-size: 20px;color: #909399"></u--input>
			</view>
		</view>
		<view class="tx">
			<view class="title">最多上传3张证明汇款成功</view>
			<upload @upload="upload" @delteFile="delteFile" :limitnumber="limitnumber" :fileList2="fileList"></upload>
		</view>
		<view class="save">
			<view class="uni-list">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
						<view class="ml36">
							<checkbox :value="item.value" :color='primary' :checked="item.checked" />
						</view>
						<view>{{ item.name }}</view>
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="save1 bg-linear-gradient" @click="doSve">提交</view>
	</view>
</template>

<script>
	import txApi from '@/api/wall/index.js';
	import upload from '@/pagesA/components/upload/pretty-uploadFile.vue';
	export default {
		name: 'Transfer',
		data() {
			return {
				primary:this.$theme.primary,
				settingFile:getApp().globalData.siteinfo,
				money: 0,
				imgList: [],
				items: [{
					value: 'CN',
					name: '确认信息无误'
				}],
				limitnumber: 3,
				fileList:''
			};
		},
		components: {
			upload
		},
		methods: {
			checkboxChange: function(e) {
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i];
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true);
					} else {
						this.$set(item, 'checked', false);
					}
				}
			},
			upload(base64) {
				if (this.imgList.length < 3) {
					txApi.uptransfershot({
						img: base64
					}).then(res => {
						console.log(JSON.stringify(res))
						if (res.status == 200) {
							this.imgList.push(res.data.path);
						}
					});
				} else {
					this.$api.msg('最多上传3张证明');
				}
			},
			delteFile(i) {
				this.imgList.splice(i, 1);
				console.log(this.imgList);
			},
			doSve() {
				this.$u.throttle(() => {
					if (this.imgList.length == 0) {
						this.$api.msg('请上传凭证');
						return;
					}

					let thumb_shot = [];
					thumb_shot = this.imgList.join(',');
					if (!this.items[0].checked) {
						this.$api.msg('请勾选信息无误');
						return;
					}
					if (this.money == 0) {
						this.$api.msg('金额不能为0');
						return;
					} else if (isNaN(this.money)) {
						this.$api.msg('请填写正确的充值金额');
						return;
					}
					txApi.maketransferorder({
						thumb_shot: thumb_shot,
						money: this.money
					}).then(res => {
						if (res.status == 200) {
							this.$api.msg(res.msg);
							setTimeout(() => {
								uni.navigateTo({
									url: '/pagesA/pages/mypurse/index'
								});
							}, 1000);
						} else {
							this.$api.msg(res.msg);
						}
					});
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	#withdraw {
		width: 100%;
		background-color: #ffffff;
		.block {
			.zh {
				padding: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.money {
				display: flex;
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: bold;
				align-items: center;
				color: #000000;
				margin-bottom: 30rpx;
				padding: 20rpx;

				input {
					margin-left: 5rpx;
					font-size: 52rpx;
					font-family: PingFang SC;
					color: #ff1f1f;
				}
			}
		}

		.tx {
			width: 100%;
			background-color: #ffffff;
			padding-bottom: 35rpx;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				padding: 20rpx;
			}
		}

		.btn {
			width: 100%;
			height: 210rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			border-top: 20rpx solid #f2f2f2;

			.save {
				margin: 0 auto;
				width: 582rpx;
				height: 90rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #ffffff;
				text-align: center;
				line-height: 90rpx;
				color: #ffffff;
				background: #fe5828;
				border-radius: 45rpx;
			}
		}

		.save {
			background-color: #ffffff;
		}

		.save1 {
			margin: 50rpx auto;
			width: 582rpx;
			height: 90rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #ffffff;
			text-align: center;
			line-height: 90rpx;
			color: #ffffff;
			// background: $tab-color;
			border-radius: 45rpx;
		}

		.uni-list-cell.uni-list-cell-pd {
			display: flex;
			align-items: center;

			.ml36 {
				margin-left: 36rpx;
			}
		}
	}
</style>