Ropeskipping/pages/Athletes/AthAdd.vue

<template>
	<view class="body-box">
		<view class="infor-box" v-for="(item,index) in list" :key="index">
				<view class="infor-title">{{ item.title }}<text class="fbt">*</text></view>
				<input v-if="item.type === 0" placeholder="请输入" name="input" v-model.trim="item.content"></input>
				<view class="drop-box">
					<view v-show="showview === 1" class="mask" @click="showBox">
						
					</view>
					<input v-if="item.type === 3" placeholder="请选择" name="input" disabled @click="showBox"  v-model.trim="item.content"/>
					<view v-if="item.type === 3" class="group-box" v-show="showview === 1">
						<view v-for="(item,index) in groupList" :key="index" @click="choice(item.value)">
							{{ item.text }}
						</view>
					</view>
				</view>
				<radio-group v-if="item.type === 1" name="" @change="radioChange">
					<label class="w100">
						<radio value="0" :checked="che===0?true:false" /></radio><text>女</text>
						<radio value="1" :checked="che===1?true:false" /></radio><text>男</text>
					</label>
				</radio-group>
				
				<!-- 身份证明 -->
				<view v-if="item.type === 4" class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids">
							<view class="mask-box" @click="jump(item.content1)">
								
							</view>
							<text class='cuIcon-cameraadd'></text>
							<image class="img-box" :src="idCardFront" mode="aspectFill"></image>
							<icon v-show="idCardFront !== ''" type="icon" class="cuIcon-roundclosefill close-icon" @click="delimg(0)"></icon>
						</view>
						<view class="solids">
							<view class="mask-box" @click="jump(item.content2)">
								
							</view>
							<text class='cuIcon-cameraadd'></text>
							<image class="img-box" :src="idCardBack"></image>
							<icon v-show="idCardBack !== null" type="icon" class="cuIcon-roundclosefill close-icon" @click="delimg(1)"></icon>
						</view>
					</view>
				</view>
				<!-- 一寸证件照 -->
				<view v-if="item.type === 5" class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids" @click="jump(item.content)">
							<text class='cuIcon-cameraadd'></text>
							<image class="img-box" :src="idPhone"></image>
						</view>
					</view>
				</view>
				<!-- 学籍证明/俱乐部证明 -->
				<view v-if="item.type === 6" class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids" @click="jump(item.content)">
							<text class='cuIcon-cameraadd'></text>
							<image class="img-box" :src="studentRecord"></image>
						</view>
					</view>
				</view>
				<!-- 体检证明 -->
				<view v-if="item.type === 7" class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids" @click="jump(item.content)">
							<text class='cuIcon-cameraadd'></text>
							<image class="img-box" :src="healthRecord"></image>
						</view>
					</view>
				</view>
				<!-- 人身意外保险 -->
				<view v-if="item.type === 8" class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids" @click="jump(item.content)">
							<text class='cuIcon-cameraadd'></text>
							<image class="img-box" :src="responsibilityRiskFile"></image>
						</view>
					</view>
				</view>
				<text v-if="item.tips !== ''" class="tips">{{ item.tips }}</text>
		</view>
		<button v-show="isId-0===0" class="btn cu-btn bg-green margin-tb-sm lg" @tap="submit">提交</button>
		<button v-show="isId-0===1" class="btn cu-btn bg-blue margin-tb-sm lg" @click="change">修改</button>
	</view>
</template>

<script>
import { upload } from 'api/upload'
import { saveplayer } from 'api/saveplayer'
import { playerInfo } from 'api/playerInfo'
import { group } from 'api/group'
import { mapState } from 'vuex'
// import { photoBase64 } from 'api/photoBase64'
	export default {
		async onLoad(option) {
			const that = this
				const params1 = {
					param: {
						type: 0
					}
				}
				const data1 = await group(params1)
				// that.groupList = data1
				if(option.id) {
					// console.log(option)
					try{
						const params = {
							param: {
								playerId: option.id
							}
						}
						const data = await playerInfo(params)
						// console.log(data)
						that.list[0].content = data.playerName
						that.che = data.gender
						that.groupRemark = data.groupRemark
						that.list[3].content = data.idCard
						that.isId = 1
						that.playerId = data.playerId
						that.idCardFront = data.idCardFront
						that.idCardFrontId = data.idCardFrontId
						that.idCardBack = data.idCardBack
						that.idCardBackId = data.idCardBackId
						that.idPhone = data.idPhone
						that.idPhoneId = data.idPhoneId
						that.studentRecord = data.studentRecord
						that.studentRecordId = data.studentRecordId
						that.healthRecord = data.healthRecord
						that.healthRecordId = data.healthRecordId
						that.responsibilityRiskFile = data.responsibilityRiskFile
						that.responsibilityRiskFileId = data.responsibilityRiskFileId
						
						// for( var i=0; i<data1.length; i++){
							// if(data1[i].groupId - 0 === data.groupId - 0) {
								var num = data.groupRemark - 0 - 1
								that.list[2].content = that.groupList[`${num}`].text
								// console.log(data1[i].groupName)
							// }
						// }
						
					}catch(e){
						//TODO handle the exception
					}
				}
		},
		data() {
			return {
				list: [{
					title:'姓名',
					type: 0,		// 0是输入框，1是单选框，2是图片选择，3是下拉列表
					tips: '',
					content: ''
					}, {
					title:'性别',
					type: 1,
					tips: '',
					content: ''
					}, {
					title:'组别',
					type: 3,
					tips: '',
					content: ''
					}, {
					title:'身份证号',
					type: 0,
					tips: '',
					content: ''
					}, {
					title:'身份证明（图片大小不得大于2M）',
					type: 4,
					tips: '身份证、户口本、出生证等，身份证需上传正反面，户口本需上传运动员本人页',
					content1: 'idCardFront',
					content2: 'idCardBack'
					}, {
					title:'一寸证件照（图片大小不得大于2M）',
					type: 5,
					tips: '',
					// tips: '用于生成参赛证及比赛证书',
					content: 'idPhone'
					}, {
					title:'学籍证明/俱乐部证明（图片大小不得大于2M）',
					type: 6,
					tips: '',
					content: 'studentRecord'
					}, {
					title:'体检证明（图片大小不得大于2M）',
					type: 7,
					tips: '',
					content: 'healthRecord'
					}, {
					title:'自愿参赛责任及风险告知书',
					type: 8,
					tips: '',
					content: 'responsibilityRiskFile'
				}],
				idCardFront: '', //身份证正面照片 或户口本照片 （文件类型）
				idCardFrontId: '', //身份证正面照片 或户口本照片 （文件类型）
				idCardBack: null, //身份证反面照片（文件类型）
				idCardBackId: '', //身份证反面照片（文件类型）
				idPhone: '', //一寸证件照（文件类型）
				idPhoneId: '', //一寸证件照（文件类型）
				studentRecord: '', //学籍证明（文件类型）
				studentRecordId: '', //学籍证明（文件类型）
				healthRecord: '', //体检证明（文件类型）
				healthRecordId: '', //体检证明（文件类型）
				responsibilityRiskFile: '', //保险证明（文件类型）
				responsibilityRiskFileId: '', //保险证明（文件类型）
				che: 0,
				isId: 0,
				playerId: 0,
				groupList: [
					{
						text: '小学乙组',
						value: 0
					},
					{
						text: '小学甲组',
						value: 1
					},
					{
						text: '初中组',
						value: 2
					},
					{
						text: '高中(职中)组',
						value: 3
					},
					{
						text: '普通院校组',
						value: 4
					},
					{
						text: '专科院校组',
						value: 5
					},
					{
						text: '特教学校组',
						value: 6
					},
					{
						text: '社会俱乐部组',
						value: 7
					}
				],
				groupRemark: 0,
				showview: 0
			}
		},
		computed:mapState('project',['companyId']),
		methods: {
			delimg(index) {
				const that = this
				if (index - 0 === 0) {
					uni.showModal({
						title: '删除',
						content: '确定要删除这张图片么？',
						success: (res) => {
							if (res.confirm) {
								that.idCardFront = ''
								that.idCardFrontId = ''
							}
						}
					})
				} else if (index - 0 === 1) {
					uni.showModal({
						title: '删除',
						content: '确定要删除这张图片么？',
						success: (res) => {
							if (res.confirm) {
								that.idCardBack = null
								that.idCardBackId = ''
							}
						},
					})
				}
			},
			radioChange(e) {
				const that = this
				that.che = e.detail.value - 0
				// console.log(that.che)
			},
			jump(type) {
				const that = this
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
							// console.log(res)
							if (res.tempFiles[0].size > 2*1024*1024) {
								uni.showToast({
									title: '图片超过2M，请重新选择',
									icon: 'none',
									duration: 1500
								})
							} else {
								const tempFilePaths = res.tempFilePaths[0]
								if(type === 'idCardBack' && that.idCardFront === ''){
									that.idCardFront = tempFilePaths
								} else {
									that[`${type}`] = tempFilePaths
								}
								// that[`${type}Id`] = jsondata.data.id
								// that.urlTobase64(res.tempFilePaths[0],type);
								
								uni.uploadFile({
										url: '//test.tall.wiki/gateway/mt/file/upload/photo',
										// url: '//www.tall.wiki/gateway/mt/file/upload/photo',
										filePath: tempFilePaths,
										header:{
											"Authorization" : "Bearer " + that.$store.state.user.token
										},
										name: 'file',
										success: (res) => {
												// console.log(JSON.stringify());
												const jsondata = JSON.parse(res.data)
												if (jsondata.code === 200) {
													console.log(jsondata)
													if(type === 'idCardBack' && that.idCardFrontId === ''){
														that.idCardFront = jsondata.data.visitUrl
														that.idCardFrontId = jsondata.data.id
													} else {
														that[`${type}`] = jsondata.data.visitUrl
														that[`${type}Id`] = jsondata.data.id
													}
												} else {
													uni.showToast({
														title: `图片上传失败，请重新上传`,
														icon: 'none',
														duration: 1500
													})
												}
										}
								});
							}
					}
				})
			},
			showBox() {
				const that = this
				if (that.showview === 0) {
					that.showview = 1
				} else {
					that.showview = 0
				}
			},
			choice(index) {
				const that = this
				that.list[2].content = that.groupList[`${index}`].text
				that.groupRemark = index - 0 + 1
				that.showview = 0
			},
			async submit() {
				const that = this
				if (that.list[0].content === '') {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.groupRemark - 0 === 0) {
					uni.showToast({
						title: '请选择组别',
						icon: 'none',
						duration: 1500
					})
				}else if (that.list[2].content === '') {
					uni.showToast({
						title: '组别不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.list[3].content === '') {
					uni.showToast({
						title: '身份证号不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.idCardFrontId === '') {
					uni.showToast({
						title: '请上传身份证明',
						icon: 'none',
						duration: 1500
					})
				} else if (that.idPhoneId === '') {
					uni.showToast({
						title: '请上传一寸证件照',
						icon: 'none',
						duration: 1500
					})
				} else if (that.studentRecordId === '') {
					uni.showToast({
						title: '请上传学籍证明',
						icon: 'none',
						duration: 1500
					})
				} else if (that.healthRecordId === '') {
					uni.showToast({
						title: '请上传体检证明',
						icon: 'none',
						duration: 1500
					})
				} else if (that.responsibilityRiskFileId === '') {
					uni.showToast({
						title: '自愿参赛责任及风险告知书',
						icon: 'none',
						duration: 1500
					})
				} else {
					try{
						const params = {
							param: {
								competeId: that.companyId,
								groupRemark: that.groupRemark,//组别id
								playerName: that.list[0].content,//选手姓名
								gender: that.che,//性别
								idCard: that.list[3].content,//身份证号
								idCardFront: that.idCardFrontId,//身份证正面照片 或户口本照片 （文件类型）
								idCardBack: that.idCardBackId,//身份证反面照片（文件类型）
								idPhone: that.idPhoneId,//一寸证件照（文件类型）
								studentRecord: that.studentRecordId,//学籍证明（文件类型）
								healthRecord: that.healthRecordId,//体检证明（文件类型）
								responsibilityRiskFile: that.responsibilityRiskFileId//保险证明（文件类型）
							}
						}
						const data = await saveplayer(params)
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 1500
						})
						that.$store.state.project.num++
						setTimeout(function(){
							uni.navigateBack()
						},1000)
						// console.log(that.$store.state.project.num)
					}catch(e){
						//TODO handle the exception
						if (e === 'error') {
							uni.showToast({
								title: '提交失败',
								icon: 'none',
								duration: 1500
							})
						} else {
							uni.showToast({
								title: e,
								icon: 'none',
								duration: 1500
							})
						}
					}
				}
			},
			async change() {
				const that = this
				if (that.list[0].content === '') {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.groupRemark - 0 === 0) {
					uni.showToast({
						title: '请选择组别',
						icon: 'none',
						duration: 1500
					})
				} else if (that.list[2].content === '') {
					uni.showToast({
						title: '组别不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (that.list[3].content === '') {
					uni.showToast({
						title: '身份证号不能为空',
						icon: 'none',
						duration: 1500
					})
				}  else if (that.idCardFrontId === '') {
					if (that.idCardBackId === '') {
						uni.showToast({
							title: '请上传身份证正面照',
							icon: 'none',
							duration: 1500
						})
					} else {
						that.idCardFrontId = that.idCardBackId
						that.idCardBackId = ''
					}
				} else if (that.idPhoneId === '') {
					uni.showToast({
						title: '请上传一寸证件照',
						icon: 'none',
						duration: 1500
					})
				} else if (that.studentRecordId === '') {
					uni.showToast({
						title: '请上传学籍证明',
						icon: 'none',
						duration: 1500
					})
				} else if (that.healthRecordId === '') {
					uni.showToast({
						title: '请上传体检证明',
						icon: 'none',
						duration: 1500
					})
				} else if (that.responsibilityRiskFileId === '') {
					uni.showToast({
						title: '自愿参赛责任及风险告知书',
						icon: 'none',
						duration: 1500
					})
				}else {
					try{
						const params = {
							param: {
								playerId: that.playerId,
								competeId: that.companyId,
								groupRemark: that.groupRemark,//组别id
								playerName: that.list[0].content,//选手姓名
								gender: that.che,//性别
								idCard: that.list[3].content,//身份证号
								idCardFront: that.idCardFrontId,//身份证正面照片 或户口本照片 （文件类型）
								idCardBack: that.idCardBackId,//身份证反面照片（文件类型）
								idPhone: that.idPhoneId,//一寸证件照（文件类型）
								studentRecord: that.studentRecordId,//学籍证明（文件类型）
								healthRecord: that.healthRecordId,//体检证明（文件类型）
								responsibilityRiskFile: that.responsibilityRiskFileId//保险证明（文件类型）
							}
						}
						const data = await saveplayer(params)
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 1500
						})
						that.$store.state.project.num++
						setTimeout(function(){
							uni.navigateBack()
						},1000)
						// console.log(that.$store.state.project.num)
					}catch(e){
						//TODO handle the exception
						if (e === 'error') {
							uni.showToast({
								title: '提交失败',
								icon: 'none',
								duration: 1500
							})
						} else {
							uni.showToast({
								title: e,
								icon: 'none',
								duration: 1500
							})
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body-box {
		padding-bottom: 100px;
	}
	.infor-box {
		width: 680rpx;
		margin-left: 35rpx;
		margin-top: 25px;
		border-bottom: 1px solid #eee;
	}
	.infor-title {
 		font-size: 16px;
		color: #505050;
		margin-bottom: 10px;
	}
	.w100 {
		width: 680rpx;
		display: flex;
		radio {
			margin-right: 50rpx;
		}
		text {
			flex: 1;
		}
	}
	.btn {
		width: 600rpx;
		margin: 50px 0 0 75rpx;
	}
	.tips {
		color: $gray;
		font-size: 14px;
	}
	.drop-box {
		position: relative;
	}
	.fbt {
		color: $red;
	}
	.group-box {
		position: absolute;
		background: white;
		z-index: 10;
		height: 200px;
		overflow-y: auto;
		border-radius: 0 0 10px 10px;
		box-sizing: border-box !important;
		// border: 2rpx solid $grey;
		box-shadow: 0 0 5px $grey;
		width: 680rpx;
		z-index: 1000;
		
		view {
			box-sizing: border-box !important;
			left: 0;
			height: 40px;
			padding: 0 0 10px 20px;
			line-height: 40px;
			font-size: 14px;
			width: 100%;
			border-bottom: 1rpx solid #eee;
		}
	}
	.mask {
		position: fixed;
		width: 750rpx;
		height: 100%;
		background: rgba(0,0,0,0);
		left: 0;
		top: 0;
		z-index: 10;
	}
	.img-box {
		width: 150rpx;
		height: 150rpx;
	}
	.close-icon {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 22px;
		z-index: 100;
		color: $red;
	}
	.mask-box {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		background: rgba(0,0,0,0);
	}
</style>