yiliangyiyun-app/pages/grain_pulse/perfect.vue

<template>
	<view class="center">
		<u-form>
			<view class="modular">
				<u-form-item label="公司名称" label-width="30%" class="title Regular" :border-bottom="topBorder">
					<u-input v-model="deptList.name" input-align="right" class="write Regular" placeholder="请输入公司名称" />
				</u-form-item>
			</view>
			<view class="modular">
				<view class="title Regular">企业概况</view>
				<textarea value="" placeholder="请输入企业概况，如经营项目、产品类型、企业规模等，不超过300个字" class="areaText Regular"
					v-model="deptList.a" />
				<view class="title Regular">添加标签（标签应突出企业特色，最多6个）</view>
				<view class="flex">
					<view class="forLists" v-for="(item,index) in label" :Key="index">
						<u-tag :text="item" mode="dark" class="forList Medium" shape="circle" :show="show"
							:closeable="closeable" color="#22C572" @close="closeForList(index)" />
					</view>
					<u-tag text="+" mode="plain" shape="circle" :show="show1" color="#2E2E2D" bg-color="#FFFFFF"
						border-color="#F9F9FA" class="add" @click="add"></u-tag>
				</view>
				<view class="addinput flex" v-if="inputShow">
					<u-input v-model="value" type="type" border focus v-if="inputShow"
						style="border-radius: 50rpx;line-height: 70rpx;font-size: 10px;" placeholder="请输入标签内容，不超过6个字" />
					<u-button :type="types" class="inputOk" shape="circle" @click="addinput">确定</u-button>
				</view>
			</view>
			<view class="modular">
				<view class="title Regular">场地照片（图片清晰，最多9张）</view>
				<u-upload :action="action" :file-list="fileList" @on-success="uploadSuccess" @on-remove="imgRemove"
					:max-count="9"></u-upload>
			</view>
			<view class="modular">
				<view class="title Regular">联系方式</view>
				<view v-for="(item,index) in Persons">
					<view class="information flex">
						<view class="xinxi">
							<u-form-item label="姓名" label-width="30%" class="Regular" label-position="top"
								style="font-size: 28rpx; color: #71747C;" :border-bottom="topBorder">
								<u-input v-model="item.name" class="Regular" placeholder="请输入姓名" />
							</u-form-item>
						</view>
						<view class="xinxi">
							<u-form-item label="电话" label-width="30%" class="Regular" label-position="top"
								style="font-size: 28rpx; color: #71747C;" :border-bottom="topBorder">
								<u-input v-model="item.phone" class="Regular" placeholder="请输入电话" />
							</u-form-item>
						</view>
						<div class="del" @click="delPerson(index)">
							<span style="font-size: 46rpx; color: #22C572;">×</span>
						</div>
					</view>
				</view>
				<view class="addPerson" @click="addPerson">
					<image src="../../static/img/liangmai/jia@3x.png" mode=""
						style="width: 26rpx;height: 26rpx;top: 2rpx;"></image>
					添加联系人
				</view>
			</view>
			<view class="modular">
				<u-form-item label="邮箱" label-width="30%" class="title Regular">
					<u-input v-model="deptList.name" input-align="right" class="write Regular" placeholder="请输入电子邮箱" />
				</u-form-item>
				<u-form-item label="传真" label-width="30%" class="title Regular" :border-bottom="topBorder">
					<u-input v-model="deptList.name" input-align="right" class="write Regular" placeholder="请输入传真号" />
				</u-form-item>
			</view>
		</u-form>
		<u-button type="success" shape="circle" style="margin-top: 20rpx;" @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deptList: {},
				label: ["世界一流", "世界500强"],
				closeable: true,
				show: true,
				show1: true,
				types: "",
				inputShow: false,
				value: "", //临时标签内容字段 后期更换
				action: 'https://www.zthymaoyi.com/upload/admin',
				fileList: [],
				imgList: [],
				Persons: [{
					name: "张良",
					phone: "1365411111"
				}],
				topBorder: false,
			}
		},
		methods: {
			add() {
				if (this.label.length >= 6) {
					this.inputShow = false
				} else {
					this.inputShow = true
				}
			},
			addinput() {
				if (!this.value) {
					this.$api.msg('标签内容不能为空')
					return
				}
				if (this.value.length < 2 || this.value.length > 6) {
					this.$api.msg('标签内容输入有误')
					return
				}
				this.label.push(this.value)
				this.value = ""
				this.inputShow = false
			},
			addPerson() {
				this.Persons.push({
					name: "",
					phone: "",
				})
			},
			delPerson(index) {
				this.Persons.splice(index, 1)
			},
			closeForList(index) {
				this.label.splice(index, 1)
			},
			imgRemove(e) {
				this.imgList.splice(e, 1)
			},
			uploadSuccess(e) {
				this.imgList.push(e.url)
			},
			submit() {
				uni.showModal({
					content: "详细的企业信息有助于客户了解您的企业，是否确定提交？",
					showCancel: true,
					confirmText: '提交',
					success: function(res) {
						if (res.confirm) {
							
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 10rpx 20rpx;
	}

	.title {
		margin-left: 20rpx;
		color: #71747C;
		line-height: 70rpx;
	}

	.write {
		margin-right: 20px;
		color: #71747C;
	}

	.modular {
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 20px;
	}

	.areaText {
		width: 90%;
		padding: 30rpx;
		border: 2rpx solid #F9F9FA;
		background-color: #F9F9FA;
		margin: 10rpx auto 20rpx;
		border-radius: 20rpx;
		color: #AFB3BF;
		font-size: 28rpx;
	}

	.add {
		padding: 15rpx 30rpx;
		width: 120rpx;
		height: 65rpx;
		text-align: center;
		margin-left: 24rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.forLists {
		margin-bottom: 10rpx;
	}

	.forList {
		background-color: #F4FAF8;
		padding: 20rpx 30rpx;
		color: #22C572;
		margin-left: 24rpx;
		text-align: center;
	}

	.addinput {
		width: 70%;
		margin: 20rpx auto;
		border-radius: 50rpx;
	}

	.inputOk {
		width: 100rpx;
		border-radius: 40rpx;
		background-color: #E9EAE9;
		color: #FFFFFF;
		border: none;
	}

	.picture {
		width: 144rpx;
		height: 144rpx;
		border: 4rpx dashed #AFB3BF;
	}

	.upload {
		height: 140rpx;
		text-align: center;
		margin: 20px 0;
		margin-bottom: 20px;
	}

	.addPerson {
		width: 230rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border: 2rpx solid #979797;
		border-radius: 40rpx;
		margin: 20rpx auto 20rpx;
	}

	.information {
		background-color: #F4FAF8;
		width: 96%;
		height: 180rpx;
		margin: 0 auto;
		border: 2rpx dashed #22C572;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.xinxi {
		margin-left: 70rpx;
	}

	.del {
		justify-content: flex-end;
		margin: 10rpx 20rpx 0 0;
	}
</style>