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" :class="tabIndex == 1?'ite-on':''" @click="tabItem(1)">
						<image class="img1" src="/static/icon-select.png"></image>
						<image class="img2" src="/static/icon-select-on.png"></image>暖心善举
					</view>
					<view class="ite" :class="tabIndex == 2?'ite-on':''" @click="tabItem(2)">
						<image class="img1" src="/static/icon-select.png"></image>
						<image class="img2" src="/static/icon-select-on.png"></image>恶行曝光
					</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" placeholder="请输入相关人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					手机号码<text>*</text>
				</view>
				<view class="ml">
					<input type="number" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					身份证号
				</view>
				<view class="ml">
					<input type="text" placeholder="18位身份证号码" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					QQ号
				</view>
				<view class="ml">
					<input type="text" placeholder="请输入QQ号" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					微信号
				</view>
				<view class="ml">
					<input type="text" placeholder="请输入微信号" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					居住地址
				</view>
				<view class="ml">
					<picker mode="region">
						{{title?title:'请选择 省/市/区'}}
					</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" placeholder="请输入籍贯" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					公司
				</view>
				<view class="ml">
					<input type="text" placeholder="请输入公司名称" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					其他信息
				</view>
				<view class="ml">
					<input type="text" placeholder="请输入其他信息" />
				</view>
			</view>
		</view>
		<view class="title">事件标题<text>*</text></view>
		<view class="menu">
			<textarea class="box" placeholder="请输入简短的标题，便于用户快速搜索"></textarea>
		</view>
		<view class="title">详细说明<text>*</text></view>
		<view class="menu">
			<view class="tips">
				<text>发布内容，务必确保您所发布的内容真实，证据可靠。\n此处仅描述事件内容，除姓名外切勿出现其他隐私内容。\n保护个人隐私，尊重他人隐私，合法合规！</text>
			</view>
			<view class="pic">
				<view class="li" v-for="i in 5" :key="i">
					<image class="img" mode="heightFix" src="https://zhengxin.njrenzhou.cn/static/bg2.png"></image>
					<image class="del" mode="heightFix" src="https://zhengxin.njrenzhou.cn/static/icon-del.png"></image>
				</view>
				<view class="upload">
					<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" :class="tabLiIndex == 1?'li-on':''" @click="tabLi(1)">欠钱不还</view>
				<view class="li" :class="tabLiIndex == 2?'li-on':''" @click="tabLi(2)">拖欠工资</view>
				<view class="li" :class="tabLiIndex == 3?'li-on':''" @click="tabLi(3)">欺诈</view>
				<view class="li" :class="tabLiIndex == 4?'li-on':''" @click="tabLi(4)">其他</view>
			</view>
			<view class="tip">注意：请您根据具体情况选择真实的类型，便于后期统计</view>
		</view>
		<view class="title">证人信息<text class="t"> (如有可添加)</text><view class="add">添加</view></view>
		<view class="menu">
			<view class="item">
				<view class="fl">
					姓名<text>*</text>
				</view>
				<view class="ml">
					<input type="text" placeholder="请输入相关人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					身份证号
				</view>
				<view class="ml">
					<input type="text" placeholder="18位身份证号码" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					手机号码
				</view>
				<view class="ml">
					<input type="number" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					居住地址
				</view>
				<view class="ml">
					<picker mode="region">
						{{title?title:'请选择 省/市/区'}}
					</picker>
				</view>
				<view class="fr">
					<image src="https://zhengxin.njrenzhou.cn/static/icon-arrow.png"></image>
				</view>
			</view>
			<view class="blank"></view>
			<view class="del">
				<image src="https://zhengxin.njrenzhou.cn/static/icon-del.png"></image>删除
			</view>
		</view>
		<view class="btn">发布</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 {
				title: "",
				tabIndex: 1,
				tabLiIndex: 1,
			}
		},
		
		mounted() {
			uni.hideTabBar();
		},
		onShow() {
			
		},
		methods: {
			tabLi(index){
				this.tabLiIndex = index;
			},
			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;
			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;
			.blank{
				width: 100%;
				height: 72rpx;
			}
			.del{
				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%;
					}
					.del{
						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;
					}
				}
			}
			.tips{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				padding-top: 30rpx;
				line-height: 45rpx;
			}
			.box{
				font-weight: 500;
				font-size: 28rpx;
				color: #222;
				padding-top: 30rpx;
				height: 140rpx;
			}
			.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>