Ropeskipping/pages/Basics/Basics.vue

<template>
	<view>
		<button v-show="!sub" type="default" class="change" @click="changeData">编辑</button>
		<view class="infor-box" v-for="(item,index) in list" :key="index">
				<view v-if="item.type === 0" class="infor-title">{{ item.title }}<text class="fbt">*</text></view>
				<input :class="sub? 'iptactive' : ''" :disabled="!sub" v-if="item.type === 0" placeholder="请输入" name="input" v-model.trim="item.content"></input>
				<view v-show="sub" class="safe-box">
					<radio-group v-if="item.type === 1" name="sex">
						<label class="w100">
							<radio value="0" :checked="che" @click="radioChange"/></radio>
						</label>
					</radio-group>
					<text v-if="item.type === 1" class="asfe-title" @click="jump">{{ item.title }}</text>
				</view>
		</view>
		<button v-show="sub" class="btn cu-btn bg-green margin-tb-sm lg" @click="submit">
			<text v-if="!chan">确定提交</text>
			<text v-else>确定修改</text>
		</button>
	</view>
</template>

<script>
import { getcompany } from 'api/getcompany'
import { savecompany } from 'api/savecompany'
	export default {
		async onLoad (options) {
			const that = this
			// console.log(options)
			that.projectId = options.id - 0
			that.companyId = options.companyId - 0
			try{
				const params = {
					param : {
						competeTimeId: options.id
					}
				}
				const data = await getcompany(params)
				if (options.companyId - 0 === 0) {
					that.list[2].content = that.$store.state.user.user.phone
				} else {
					that.list[0].content = data.companyName
					that.list[1].content = data.contactsName
					that.list[2].content = data.contactsPhone
					that.che = true
					that.sub = false
					that.chan = true
					that.companyId = options.companyId
				}
			}catch(e){
				//TODO handle the exception
			}
		},
		data() {
			return {
				list: [{
					title:'参赛队伍名称',
					type: 0,		// 0是输入框，1是单选框，2是图片选择
					content: ''
					}, {
					title:'主要联系人',
					type: 0,
					content: ''
					}, {
					title:'联系方式',
					type: 0,
					content: ''
					}, {
					title:'阅读并同意《安全责任书》',
					type: 1,
					content: ''
				}],
				projectId: 0,
				che: false,
				companyId: '',
				sub: true,
				chan: false
				// imgList: []
			}
		},
		methods: {
			radioChange() {
				const that = this
				if (that.che) {
					that.che = false
				} else {
					that.che = true
				}
			},
			async submit() {
				const that = this
				if (that.list[0].content === '') {
					uni.showToast({
						title: '参赛队伍名称不能为空',
						icon: 'none',
						duration: 1500
					})
				}else if (that.list[1].content === '') {
					uni.showToast({
						title: '主要联系人不能为空',
						icon: 'none',
						duration: 1500
					})
				}else if (that.list[2].content === '') {
					uni.showToast({
						title: '联系方式不能为空',
						icon: 'none',
						duration: 1500
					})
				} else if (!/^1([3-9])[0-9]{9}$/.test(that.list[2].content)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}else if (that.che === false) {
					uni.showToast({
						title: '请同意《安全责任书》',
						icon: 'none',
						duration: 1500
					})
				}else {
					try{
						if (that.$store.state.project.companyId - 0 === 0) {
							that.companyId = ''
						} else {
							that.companyId = that.$store.state.project.companyId
						}
						const params = {
							param: {
								companyId: that.companyId,
								companyName: that.list[0].content,
								competeTimeId: that.projectId - 0,
								contactsName: that.list[1].content,
								contactsPhone: that.list[2].content,
								authorization: 1,
							}
						}
						const data = await savecompany(params)
						that.$store.state.project.companyId = data.companyId
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 1500
						})
						that.sub = false
						that.chan = true
						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
							})
						}
					}
				}
			},
			jump() {
				// 跳转到   安全责任书  界面
				uni.navigateTo({
					url: './../read/read'
				})
			},
			changeData() {
				const that = this
				that.sub = true
				that.chan = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.infor-box {
		width: 680rpx;
		margin-left: 35rpx;
		margin-top: 25px;
		border-bottom: 1px solid #eee;
	}
	.infor-box:last-of-type{
		border: none;
	}
	.infor-title {
 		font-size: 16px;
		color: #505050;
		margin-bottom: 10px;
	}
	.w100 {
		radio {
			margin-right: 20rpx;
		}
	}
	.btn {
		width: 680rpx;
		margin: 50px 0 0 35rpx;
	}
	.asfe-title {
		font-size: 14px;
	}
	.safe-box {
		display: flex;
	}
	input {
		height: 30px;
		font-size: 14px;
		border-radius: 5px;
	}
	.iptactive {
		border: 1px solid $gray;
		padding-left: 3%;
	}
	.change {
		position: absolute;
		top: -20px;
		height: 30px;
		line-height: 30px;
		background: #eee;
		font-size: 14px;
		right: 40rpx;
	}
	.fbt {
		color: $red;
	}
</style>