sulibao-mini/circlePages/circle.vue

<template>
	<view class="template-edit tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<!-- <text class='icon tn-icon-home-capsule-fill'></text> -->
			</view>
			
			<view slot="default" v-if="stepIndex==2" style="display: flex;">
				<view style="flex:1;margin-left:25px">
					<text></text>
				</view>
				<view>
					<text style="margin-right: 4px;padding: 6px 15px;background-color:#00000026;border-radius: 30px;color: #3D7EFF;" @click="saveForm(1)">暂存</text>
				</view>
			</view>
		</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<tn-steps style="pointer-events:none" :list="stepList" :current="stepIndex" mode="dotIcon"></tn-steps>
			<!-- <uni-steps :options="stepList" :active="stepIndex" /> -->
			
			<view v-if="stepIndex==1">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
				<view class="tn-flex justify-content-item">
					<!-- <view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-topics" style="font-size: 30rpx;"></text>
					</view> -->
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold" style="font-size: 15px;">以下三种方式可任选其一，若有可都输入</view>
				</view>
				<!-- <view class="justify-content-item tn-text-df tn-color-grey">
					<text class="tn-padding-xs">500字内</text>
					<text class="tn-icon-keyboard-circle"></text>
				</view> -->
			</view>

			<!-- <view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
      	<input placeholder="写下一句简短的标题" name="input" placeholder-style="color:#AAAAAA" ></input>
      </view> -->
			<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
				<textarea maxlength="500" v-model="content" placeholder="请描述您的需求..." placeholder-style="color:#AAAAAA"></textarea>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center   tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-image" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">图片</view>
				</view>
				<!-- <view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
					<text class="tn-padding-xs">清空上传</text>
					<text class="tn-icon-delete"></text>
				</view> -->
			</view>
			
			




			<view class="tn-margin-left tn-padding-top-xs">
				<uni-file-picker
					v-model="imgList" :limit="6" @delete="deleteFile"  :auto-upload="false" @select="select" @success="success">
					 
				   
				</uni-file-picker>
				<!-- <tn-image-upload-drag ref="imageUpload" :action="action" :width="236" :height="236" :formData="formData"
					:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
					:customBtn="customBtn" @sort-list="onSortList" /> -->

			</view>
			
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-link" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">文件</view>
				</view>
				<!-- <view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
					<text class="tn-padding-xs">清空上传</text>
					<text class="tn-icon-delete"></text>
				</view> -->
			</view>
			
			<view class="tn-margin-left tn-padding-top-xs">
				<uni-file-picker
					v-model="fileList" :limit="3" mode="grid" @delete="deleteFile"  file-mediatype="all" file-extname="pdf,docx,doc" :auto-upload="false" @select="select" @success="success">
				<!-- <button size="default">上传文件</button> -->
				<tn-button shadow shape="round" fontColor="tn-color-white" size="lg" backgroundColor="tn-bg-blue" :fontSize="24" height="auto" padding="20rpx 36rpx">上传文件</tn-button>
				 
				</uni-file-picker>
				<text class="tn-color-grey">支持格式 pdf .doc，不超过5MB。</text>
				<!-- <tn-image-upload-drag ref="imageUpload" :action="action" :width="236" :height="236" :formData="formData"
					:fileList="fileList2" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
					:customBtn="customBtn" @sort-list="onSortList" /> -->
			
			</view>
			
			<view style="padding: 16px">
				<text v-if="selectValue">需求有效期:</text>
				<uni-data-select
				    v-model="selectValue"
				    :localdata="selectList"
				    @change="changeSelect"
					placement="top"
					placeholder="需求有效期"
				  ></uni-data-select>
			</view>

			<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
        <view class="tn-flex justify-content-item">
          <view class="tn-bg-black tn-color-white tn-text-center" style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
            <text class="tn-icon-tag" style="font-size: 30rpx;"></text>
          </view>
          <view class="tn-text-lg tn-padding-right-xs tn-text-bold">话题标签</view>
        </view>
        <view class="justify-content-item tn-text-df tn-color-grey">
          <text class="tn-padding-xs">选择</text>
          <text class="tn-icon-right"></text>
        </view>
      </view> -->

			<!-- <view class="tn-tag-content tn-margin tn-text-justify tn-padding-bottom">
        <view v-for="(item, index) in tagList" :key="index" class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
          <text class="tn-tag-content__item--prefix">#</text> {{ item.title }}
        </view>
      </view>  -->

			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold @click="nextStep()">
						<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
						<text class="tn-color-white">下一步</text>
						<!-- <text class="tn-icon-camera tn-padding-left-xs tn-color-black"></text> -->
					</tn-button>
				</view>
			</view>
</view>
<view v-if="stepIndex==2">
	
	<view style="padding:16px">
		<uni-forms :modelValue="formData" label-width="0">
			<view style="margin:16px 0">
				<text v-if="searchValue">公司名称:</text>
			<w-select
			     style="width: 100%;" 
			     v-model='searchValue' 
			     :list='items'
			     valueName='name' 
			     keyName="regNumber"
			     @change='selectChange'
				 :filterable="true"
			   >
			   </w-select>
			</view>
			<!-- <uni-forms-item label="公司名称" name="name">
				<uni-easyinput type="text" v-model="userInfo.company" placeholder="请输入所在公司名称" />
			</uni-forms-item> -->
			<text v-if="formInfo.jobTitle">您的职称:</text>
			<uni-forms-item label="" name="realName" label-width="0">
				 <uni-easyinput type="text" v-model="formInfo.jobTitle" :clearable="false" placeholder="请输入您的职称" />
			</uni-forms-item>
			<text v-if="formInfo.contactPerson">联系姓名:</text>
			<uni-forms-item label="联系人姓名" name="contactMethod">
				 <uni-easyinput type="text" v-model="formInfo.contactPerson" :clearable="false" placeholder="请输入联系人姓名" />
			</uni-forms-item>
			<text v-if="formInfo.contactMethod">联系方式:</text>
			<uni-forms-item label="联系方式" name="phone">
				 <uni-easyinput type="text"  v-model="formInfo.contactMethod" :clearable="false" placeholder="请输入联系手机/微信/邮箱" />
			</uni-forms-item>
			
			<uni-forms-item label="11" name="check">
				<uni-data-checkbox :multiple="true" v-model="formInfo.agree" :localdata="[{text: '同意平台核查所填信息的真实性',value: '是'}]" />
			</uni-forms-item>
		</uni-forms>
	</view>
	
	<view class="tn-flex tn-footerfixed">
		<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
			<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold @click="preStep()">
				<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
				<text class="tn-color-white">上一步</text>
				<!-- <text class="tn-icon-camera tn-padding-left-xs tn-color-black"></text> -->
			</tn-button>
		</view>
		<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
			<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold @click="saveForm()">
				<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
				<text class="tn-color-white">提交审核</text>
				<!-- <text class="tn-icon-camera tn-padding-left-xs tn-color-black"></text> -->
			</tn-button>
		</view>
	</view>
</view>
		</view>
		
		

		<view class='tn-tabbar-height'></view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js';
	import request from '../utils/request';
	export default {
		name: 'TemplateEdit',
		mixins: [template_page_mixin],
		data() {
			return {
				canSave: true,
				selectValue: '',
				//非常紧急/两周/一月/长期
				selectList: [{
						value: '非常紧急',
						text: '非常紧急'
					},
					{
						value: '两周',
						text: '两周'
					},
					{
						value: '一月',
						text: '一月'
					},
					{
						value: '长期',
						text: '长期'
					}
				],
				content:'',
				formInfo:{
					jobTitle:'',
					// contactPerson:JSON.parse(uni.getStorageSync('userInfo')).contactNickName?JSON.parse(uni.getStorageSync('userInfo')).contactNickName:'用户'+JSON.parse(uni.getStorageInfoSync('userInfo')).userName.splice(-4),
					agree:['是'],
					contactPerson:JSON.parse(uni.getStorageSync('userInfo')).contactNickName,
					contactMethod:JSON.parse(uni.getStorageSync('userInfo')).contactMethod||JSON.parse(uni.getStorageSync('userInfo')).userName
				},
				imgList:[],
				fileDetailList:[],
				stepIndex:1,
				// stepList:[{title:'填写需求'},{title: '填写联系方式'}],
				stepList: [{
						name: '填写需求',
						icon: 'circle',
						selectIcon: 'circle-fill'
					},
					{
						name: '填写联系方式',
						icon: 'trusty',
						selectIcon: 'trusty-fill'
					}
				],
				tagList: [{
						color: 'red',
						title: "元神",
					},
					{
						color: 'cyan',
						title: "LOL",
					},
					{
						color: 'blue',
						title: "速立保",
					},
					{
						color: 'green',
						title: "科技",
					},
					{
						color: 'orange',
						title: "免费",
					},
					{
						color: 'purplered',
						title: "前端",
					},
					{
						color: 'purple',
						title: "后端",
					},
					{
						color: 'brown',
						title: "UI设计",
					},
					{
						color: 'yellowgreen',
						title: "求助",
					},
					{
						color: 'grey',
						title: "吃货",
					},
					{
						color: 'orangered',
						title: "萌宠",
					}
				],
				action: 'https://www.hualigs.cn/api/upload',
				// action: '',
				formData: {
					apiType: 'this,ali',
					token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
					image: null
				},
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: false,
				deleteable: true,
				customStyle: false,
				maxCount: 9,
				disabled: false,
				searchValue: '',
				items: [],
				org:{
					name:'',
					regNumber:''
				},
			}
		},
		watch: {
			searchValue(val, oldval) {
				console.error(val,this.org.name);
				if(val!==this.org.name){
					this.current = null;
				}
				if(this.stepIndex==2){
					this.search(val)
				}
				// if(this.org.name!=this.org.regNumber){
					
				// }
				
			}
		},
		onLoad() {
		    this.getCompany();
		},
		methods: {
			 getCompany(){
			 	let that = this;
			 		request.post('/slbUserCompanyRel/show/my', {
			 			userNo: uni.getStorageSync('userNo')
			 		}).then(res => {
			 			if (res.success) {
			 				let list = res.list || [];
			 				for(let i=0;i<list.length;i++){
			 					list[i].name = list[i].company;
			 					list[i].regNumber= list[i].company;
								if(list[i].isDefault=='1'){
									that.searchValue = list[i].name
									that.current = list[i].name;
									that.org = list[i];
									if(list[i].jobTitle){
										that.formInfo.jobTitle = list[i].jobTitle
									}
								}
			 					 
			 				}
			 				that.items = list;
			 			}  
			 		})
			},
			preStep(){
				this.stepIndex = 1;
			},
			nextStep(){
				
				if(this.content==''&&this.fileDetailList.length===0){
					 uni.showToast({
						title:'请填写需求或上传图片/文件',
						icon:'none'
					 })
					 this.stepIndex = 1;
					 
					 return false;
				}
				 
				this.stepIndex = 2;
			},
			 changeSelect(e) {
			        this.selectValue = e;
			      },
			saveForm(status){
				if(!this.canSave){
					return false;
				}
				let that = this;
				let params = {
					
				};
				
				if(!this.org.name){
					uni.showToast({
						title: '请检查公司名称是否准确',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				
				
				if(this.formInfo.jobTitle.length<1){
					uni.showToast({
						title: '请输入您的职称',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(this.formInfo.contactPerson.length<1){
					uni.showToast({
						title: '请输入联系人姓名',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(this.formInfo.contactMethod.length<1){
					uni.showToast({
						title: '请输入联系手机/微信/邮箱',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				if(this.formInfo.agree.length<1){
					uni.showToast({
						title: '请勾选同意平台核查所填信息的真实性',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				uni.showToast({
					title: '提交中...',
					icon:'none'
				});
				
				that.canSave = false;
				
				params.slbResourceDemand = JSON.stringify({
					type:'3',
					company:this.org.name,
 					jobTitle:this.formInfo.jobTitle,
					contactPerson:this.formInfo.contactPerson,
					contactMethod:this.formInfo.contactMethod,
					content:that.content,
					userNo:uni.getStorageSync('userNo'),
					validDate:this.selectValue,
					status: status==1?status:undefined
				});
				// params.slbUserCompanyRel = JSON.stringify({
				// 	jobTitle:this.formInfo.jobTitle,
				// 	contactPerson:this.formInfo.contactPerson,
				// 	contactMethod:this.formInfo.contactMethod,
				// 	userNo:uni.getStorageSync('userNo'),
				// });
				
				params.fileDetailList = JSON.stringify(this.fileDetailList);
				request.post('/slbResourceDemand/add', params).then(res => {
				    that.canSave = true;
					if(res.success){
						uni.showToast({
							title:status?'暂存成功':'发布已提交，可在我的需求里查看审核进度',
							icon:'none',
							success:()=>{
								setTimeout(()=>{
									uni.redirectTo({
									 url: "/pages/mine/need"
									});
								},1500)
								
							}
						})
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					console.warn(res);
				})
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			// 手动上传文件
			upload() {
				console.warn(121212);
			},
			// 手动清空列表
			clear() {
				this.$refs.imageUpload.clear()
			},
			// 图片拖拽重新排序
			onSortList(list) {
				console.log(list);
			},
			select(e) {
				console.log('选择文件：', e)
				let tempFiles = e.tempFiles;
				for (let i in tempFiles) {
					this.upfile(tempFiles[i])
				}
			},
			deleteFile(e, index) {
				for(let i=0;i<this.fileDetailList.length;i++){
					if(e.tempFile.path===this.fileDetailList[i].path){
						this.fileDetailList.splice(i, 1);
					}
				}
			},
			upfile(file) {
				let that = this;
				console.warn(file);
				uni.uploadFile({
					url: 'http://slb-m.dev.ml1993.com/oss/upload/userFeedback', //仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					success: (uploadFileRes) => {
						console.warn(JSON.parse(uploadFileRes.data));
						let resultMap = JSON.parse(uploadFileRes.data).resultMap;
						that.fileDetailList.push({
							name: file.name,
							fileName: file.name, // 原始文件名
							ftpUrl: resultMap.uploadUrl, // 文件访问url
							path:file.path
						})
					}
				});
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			selectChange(e){
				console.error(e);
				this.searchValue = e.name
				this.current = e.regNumber;
				if(e.jobTitle){
					this.formInfo.jobTitle = e.jobTitle;
				}
				this.org = e;
			},
			search: function(val) {
				let that = this;
				
				if (val && val.length > 3) {
					request.post('/member/searchCompys', {
						keyWord:  val
					}).then(res => {
						if(res.success){
							let list = res.resultMap.data || [];
							that.items = list;
							// that.setData({
							// 	items: list
							// })
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					 
				}else{
					that.items = [];
					 
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		// background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		// color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
		background: #fff;
	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}
	
	/deep/ .uni-forms-item__label {
		display: none;
	}

	/* 标签内容 end*/
</style>