zhengxinApplets/pages/release/index.vue

<template>
	<view class="release">
		<view class="title">类型选择</view>
		<view class="menu">
			<view class="type">
				<view class="fl">事件类型：</view>
				<view class="fr">
					<view class="ite" v-for="(a,i) in typeList" :key="i" :class="tabIndex == i?'ite-on':''" @click="tabItem(i)">
						<image class="img1" src="/static/icon-select.png"></image>
						<image class="img2" src="/static/icon-select-on.png"></image>{{a.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="title">当事人身份信息</view>
		<view class="menu">
			<view class="item">
				<view class="fl">
					姓名<text>*</text>
				</view>
				<view class="ml">
					<input type="text" v-model="main_realname" placeholder="请输入相关人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					手机号码<text>*</text>
				</view>
				<view class="ml">
					<input type="number" maxlength="11" v-model="main_phone" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="item" v-if="systembasicInfoopen.qq">
				<view class="fl">
					身份证号
				</view>
				<view class="ml">
					<input type="text" maxlength="18" v-model="main_cardno" placeholder="18位身份证号码" />
				</view>
			</view>
			<view class="item" v-if="systembasicInfoopen.qq">
				<view class="fl">
					QQ号
				</view>
				<view class="ml">
					<input type="text" v-model="main_qq" placeholder="请输入QQ号" />
				</view>
			</view>
			<view class="item" v-if="systembasicInfoopen.wechat">
				<view class="fl">
					微信号
				</view>
				<view class="ml">
					<input type="text" v-model="main_wechat" placeholder="请输入微信号" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					居住地址
				</view>
				<view class="ml">
					<picker mode="region" @change="changePicker1" :value="main_addressArr">
						{{main_address?main_address:'请选择 省/市/区'}}
					</picker>
				</view>
				<view class="fr">
					<image src="https://zhengxin.njrenzhou.cn/static/icon-arrow.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="fl">
					籍贯
				</view>
				<view class="ml">
					<input type="text" v-model="main_jiguan" placeholder="请输入籍贯" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					公司
				</view>
				<view class="ml">
					<input type="text" v-model="main_company" placeholder="请输入公司名称" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					其他信息
				</view>
				<view class="ml">
					<input type="text" v-model="main_otherinfo" placeholder="请输入其他信息" />
				</view>
			</view>
		</view>
		<view class="title">事件标题<text>*</text></view>
		<view class="menu">
			<textarea class="box1" v-model="title" placeholder="请输入简短的标题，便于用户快速搜索"></textarea>
		</view>
		<view class="title">详细说明<text>*</text></view>
		<view class="menu">
			<textarea class="box1" v-model="content" placeholder="发布内容，务必确保您所发布的内容真实，证据可靠。此处仅描述事件内容，除姓名外切勿出现其他隐私内容。保护个人隐私，尊重他人隐私，合法合规！"></textarea>
			<view class="pic">
				<view class="li" v-for="(a,i) in imgs" :key="i">
					<video class="img" v-if="a.indexOf('.mp4')>=0" :src="baseUrl+a"></video>
					<image v-else class="img" mode="heightFix" :src="baseUrl+a"></image>
					<image class="del1" mode="heightFix" @click="deletePic(i)" src="https://zhengxin.njrenzhou.cn/static/icon-del.png"></image>
				</view>
				<view class="upload" @click="uploadImg">
					<image src="https://zhengxin.njrenzhou.cn/static/upload.png"></image>
					<view class="txt">照片/视频</view>
				</view>
			</view>
		</view>
		<view class="title">事件标签<text>*</text></view>
		<view class="menu">
			<view class="tab">
				<view class="li" v-for="(a,i) in tagList" :key="i" :class="a.isSelect?'li-on':''" @click="tabLi(i)">{{a.title}}</view>
			</view>
			<view class="tip">注意：请您根据具体情况选择真实的类型，便于后期统计</view>
		</view>
		<view class="title">证人信息<text class="t"> (如有可添加)</text><view class="add" @click="toAdd()">添加</view></view>
		<view class="menu" v-for="(a,i) in zhengren" :key="i">
			<view class="a">
				<view class="item">
					<view class="fl">
						姓名<text>*</text>
					</view>
					<view class="ml">
						<input type="text" v-model="a.realname" placeholder="请输入相关人姓名" />
					</view>
				</view>
				<view class="item" v-if="systembasicInfoopen.qq">
					<view class="fl">
						身份证号
					</view>
					<view class="ml">
						<input type="text" maxlength="18" v-model="a.cardno" placeholder="18位身份证号码" />
					</view>
				</view>
				<view class="item">
					<view class="fl">
						手机号码
					</view>
					<view class="ml">
						<input type="number" maxlength="11" v-model="a.phone" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="item">
					<view class="fl">
						居住地址
					</view>
					<view class="ml">
						<picker mode="region" @change="changePicker2" :value="a.addressArr" @click="clickPicker(i)">
							{{a.address?a.address:'请选择 省/市/区'}}
						</picker>
					</view>
					<view class="fr">
						<image src="https://zhengxin.njrenzhou.cn/static/icon-arrow.png"></image>
					</view>
				</view>
				<view class="blank" v-if="i>=1"></view>
				<view class="del2" v-if="i>=1" @click="toDel(i)">
					<image src="https://zhengxin.njrenzhou.cn/static/icon-del.png"></image>删除
				</view>
			</view>
		</view>
		<view class="btn" @click="toSubmit()">发布</view>
		<foo-bar @toIndex="toIndex" :home="2"></foo-bar>
	</view>
</template>

<script>
	import fooBar from '@/components/fooBar/fooBar.vue'
	export default {
		components: {
			fooBar
		},
		data() {
			return {
				main_addressArr: [],
				zhengren: [{
					id: 1,
					realname: "",
					phone: "",
					cardno: "",
					address: "",
					addressArr: []
				}],
				content_tag: [],
				content_type_id: "",
				main_realname: "",
				main_phone: "",
				main_cardno: "",
				main_qq: "",
				main_wechat: "",
				main_address: "",
				main_jiguan: "",
				main_company: "",
				main_otherinfo: "",
				tagList: [],
				imgs: [],
				baseUrl: "",
				content: "",
				title: "",
				tabIndex: 0,
				tabLiIndex: 0,
				typeList: [],
				zhengrenIndex: 0,
				systembasicInfoopen: {}
			}
		},
		
		onLoad() {
			uni.hideTabBar();
			this.baseUrl = this.$baseUrl;
			this.getTylelist();
			this.getTagList();
		},
		onShow() {
			this.systembasicInfoopen = uni.getStorageSync("systembasicInfoopen")
		},
		methods: {
			//提交
			async toSubmit() {
				let arr = []
				this.tagList.map(a=>{
					if(a.isSelect){
						arr.push(a.title)
					}
				})
				this.content_tag = arr;
				console.log(this.content_tag)
				if (!this.main_realname) {
					uni.showToast({
						title: '请输入当事人姓名',
						icon: 'none',
					})
					return
				}
				if (!this.main_phone) {
					uni.showToast({
						title: '请输入当事人手机号',
						icon: 'none',
					})
					return
				}
				if(!/^1[3456789]\d{9}$/.test(this.main_phone)){
				  uni.showToast({
				  	title: '手机号格式不正确',
				  	icon: "none",
				  })
				  return ;
				}
				if (!this.title) {
					uni.showToast({
						title: '请输入事件标题',
						icon: 'none',
					})
					return
				}
				if (!this.content) {
					uni.showToast({
						title: '请输入详细说明',
						icon: 'none',
					})
					return
				}
				if(this.content_tag.length == 0){
					uni.showToast({
						title: '请选择事件标签',
						icon: 'none',
					})
					return
				}
				let total = 0;
				if(this.zhengren.length >0){
					this.zhengren.map(a=>{
						if(a.realname){
							total++
						}
					})
				}
				if(total != this.zhengren.length){
					uni.showToast({
						title: '请完善证人信息',
						icon: 'none',
					})
					return
				}
				const { code, data, msg } = await this.$api.setContent({
					main_realname: this.main_realname,
					content_type_id: this.content_type_id,
					main_phone: this.main_phone,
					main_cardno: this.main_cardno,
					main_qq: this.main_qq,
					main_wechat: this.main_wechat,
					main_address: this.main_address,
					main_jiguan: this.main_jiguan,
					main_company: this.main_company,
					main_otherinfo: this.main_otherinfo,
					image: this.imgs.join(","),
					title: this.title,
					content: this.content,
					content_tag: JSON.stringify(this.content_tag),
					zhengren: JSON.stringify(this.zhengren),
					token: uni.getStorageSync("token")
				});
				if(code == 1){
					uni.showToast({
						title: "提交成功"
					})
					this.main_realname = ""
					this.main_phone = ""
					this.main_cardno = ""
					this.main_qq = ""
					this.main_wechat = ""
					this.main_address = ""
					this.main_jiguan = ""
					this.main_company = ""
					this.main_otherinfo = ""
					this.imgs = []
					this.title = ""
					this.content = ""
					this.content_tag = []
					this.zhengren = [{id: 1,
					realname: "",
					phone: "",
					cardno: "",
					address: "",
					addressArr: []}]
					this.tagList.map(a=>{
						a.isSelect = false
					})
					this.tabIndex = 0
				}else{
					uni.showToast({
						title: msg,
						icon: "none"
					})
				}
			},
			clickPicker(i){
				this.zhengrenIndex = i;
			},
			changePicker1(e){
				this.main_addressArr = e.detail.value;
				this.main_address = e.detail.value.join(",");
			},
			changePicker2(e){
				this.zhengren[this.zhengrenIndex].addressArr = e.detail.value;
				this.zhengren[this.zhengrenIndex].address = e.detail.value.join(",");
			},
			toAdd(){
				this.zhengren.push({
					id: this.zhengren.length+1,
					realname: "",
					phone: "",
					cardno: "",
					address: "",
					addressArr: []
				})
			},
			toDel(i){
				this.zhengren.splice(i,1)
			},
			//上传图片
			uploadImg() {
				const that = this
				uni.chooseMedia({
					count: 9-that.imgs.length,
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: (res) => {
						console.log(res)
						for(var i = 0; i<res.tempFiles.length;i++){
							uni.uploadFile({
								name: 'file',
								url: this.$baseUrl+'/api/Common/upload',
								filePath: res.tempFiles[i].tempFilePath,
								formData: {
									"token": uni.getStorageSync('token')
								},
								success: (upRes) => {
									const {code, data, msg } = JSON.parse(upRes.data);
									if(code == 1){
										uni.showToast({
											icon: "success",
											title: "上传成功"
										})
										that.imgs.push(data.url)
									}else{
										uni.showToast({
											icon: "error",
											title: "上传失败"
										})
									}
								},
								fail: (err) => {
									console.log("toUpload err",err)
									console.log(err)
								}
							});	
						}
					},
					fail(err){
						console.log("fail",err)
					}
				});
			},
			deletePic(index) {
				this.imgs.splice(index, 1)
			},
			//事件类型
			async getTylelist() {
				const { code, data } = await this.$api.getTylelist({})
				if(code == 1){
					let arr = []
					if(data && data.length > 0){
						data.map(a=>{
							a.name = a.title
						})
					}
					this.typeList = data
					this.content_type_id = data[this.tabIndex].id
				}
			},
			//事件标签
			async getTagList() {
				const { code, data } = await this.$api.getContentTag({})
				if(code == 1){
					let arr = []
					if(data && data.length > 0){
						data.map(a=>{
							a.isSelect = false
						})
					}
					this.tagList = data
				}
			},
			tabLi(index){
				this.tagList[index].isSelect = !this.tagList[index].isSelect;
			},
			tabItem(index){
				this.tabIndex = index;
			},
			//获取商品分类
			async queryGoodsCategoryList() {
				const { code, data } = await this.$api.goodsCategoryList({})
				if(code == 200){
					this.goodsCategoryList = data
				}
			},
			async toIndex(index) {
				let that = this
				that.index = index
				if (index == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}else if (index == 2) {
					uni.switchTab({
						url: '/pages/release/index'
					})
				} else if (index == 3) {
					uni.switchTab({
						url: '/pages/user/index'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.release {
		min-height: 100vh;
		padding-bottom: 150rpx;
		overflow: hidden;
		box-sizing: border-box;
		.title{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			padding: 30rpx 25rpx 10rpx;
			text{
				color: #FA1919;
			}
			.t{
				font-size: 24rpx;
				color: #999999;
			}
			.add{
				float: right;
				color: #00C6A9;
			}
		}
		.btn{
			width: 702rpx;
			line-height: 90rpx;
			background: #00C6A9;
			box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
			border-radius: 90rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 0 auto;
			margin-top: 30rpx;
		}
		.menu{
			width: 700rpx;
			background: #FFFFFF;
			box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
			border-radius: 20rpx;
			margin: 0 auto;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: 20rpx;
			.blank{
				width: 100%;
				height: 72rpx;
			}
			.dels{
				width: 100%;
				line-height: 72rpx;
				background: #ECFBF9;
				border-radius: 0px 0px 20rpx 20rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #00C6A9;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 2;
				image{
					width: 45rpx;
					height: 45rpx;
					margin-right: 10rpx;
				}
			}
			.tip{
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				padding-top: 20rpx;
				padding-bottom: 30rpx;
				line-height: 45rpx;
			}
			.tab{
				width: 110%;
				overflow: hidden;
				padding-top: 10rpx;
				.li{
					width: 140rpx;
					line-height: 56rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					border: 1px solid #D4E4DF;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					margin-top: 20rpx;
					float: left;
					margin-right: 20rpx;
					&-on{
						color: #00C6A9;
						border-color: #00C6A9;
					}
				}
			}
			.pic{
				overflow: hidden;
				padding-bottom: 30rpx;
				.li{
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					position: relative;
					overflow: hidden;
					margin-top: 20rpx;
					margin-right: 20rpx;
					float: left;
					.img{
						width: 100%;
						height: 100%;
					}
					.del1{
						width: 45rpx;
						height: 45rpx;
						position: absolute;
						right: 0;
						top: 0;
						z-index: 2;
					}
				}
				.upload{
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					position: relative;
					overflow: hidden;
					background: #F0F3F4;
					text-align: center;
					font-weight: 500;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #333333;
					float: left;
					image{
						width: 46rpx;
						height: 42rpx;
						margin-top: 35rpx;
						margin-bottom: 20rpx;
					}
				}
			}
			.blank{
				height: 72rpx;
			}
			.del2{
				width: 100%;
				height: 72rpx;
				background: #ECFBF9;
				border-radius: 0px 0px 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #00C6A9;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 2;
				image{
					width: 45rpx;
					height: 45rpx;
					margin-right: 10rpx;
				}
			}
			.tips{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				padding-top: 30rpx;
				line-height: 45rpx;
			}
			.box1{
				width: 100%;
				font-size: 26rpx;
				padding-top: 30rpx;
				height: 150rpx;
			}
			.box2{
				line-height: 60rpx;
			}
			.type{
				padding: 25rpx 0;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				.fr{
					flex: 1;
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					.ite{
						flex: 1;
						color: #333333;
						display: flex;
						align-items: center;
						image{
							width: 45rpx;
							height: 45rpx;
							margin-right: 15rpx;
						}
						.img1{
							display: block;
						}
						.img2{
							display: none;
						}
						&-on{
							color: #00C6A9;
							.img1{
								display: none;
							}
							.img2{
								display: block;
							}
						}
						
					}
				}
			}
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #EAEAEA;
				padding: 35rpx 0;
				overflow: hidden;
				position: relative;
				&:first-child{
					border-color: #FFFFFF;
				}
				.fl{
					width: 160rpx;
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					text{
						color: #FA1919;
					}
				}
				.ml{
					flex: 1;
					input{
						width: 100%;
						font-weight: 500;
						font-size: 28rpx;
						color: #212121;
					}
					picker{
						width: 100%;
						font-weight: 500;
						font-size: 28rpx;
						color: #808080;
					}
				}
				.fr{
					image{
						width: 45rpx;
						height: 45rpx;
					}
				}
			}
		}
	}
</style>