yicangzongtai_app_240321/pages/research/setup/becomeANetStar.vue

<template>
	<view class="net-star">
		<navbar ref="navbar" :config="config" backColor="#666"></navbar>
		<view class="msg">
			所属平台信息
		</view>
		<view class="top">
			<view class="top-platform">
				<view class="name">
					所属平台
				</view>
				<picker class="choice" @change="bindPickerChange" :value="index" :range="platform" range-key="dvalue">
					<view class="uni-input" v-if="index==-1" :style="msgList.platform?'color:#000000':'#D9D9D9'">{{msgList.platform?msgList.platform.platform_value:"请选择"}}<text class="iconfont">&#xe6c7;</text></view>
					<view class="uni-input" v-else style="color: #000000;">
					{{platform[index].dvalue}}<text
							class="iconfont">&#xe6c7;</text></view>
				</picker>
			</view>
			<view class="top-platform">
				<view class="name">
					粉丝量级
				</view>
				<picker class="choice" @change="onFans" :value="indexTwo" :range="number" range-key="dvalue">
					<view class="uni-input" v-if="indexTwo==-1" :style="msgList.platform?'color:#000000':'#D9D9D9'">
						{{msgList.fanweight?msgList.fanweight.fanweight_value:"请选择"}}<text
							class="iconfont">&#xe6c7;</text></view>
					<view class="uni-input" v-else style="color: #000000;">
						{{number[indexTwo].dvalue}}<text class="iconfont">&#xe6c7;</text>
					</view>

				</picker>
			</view>
			<view class="phone">
				<view class="name">
					<view class="item">
						该平台注册手机号码
					</view>
					<input maxlength="11" placeholder-style="font-size:26rpx; color:#d9d9d9;"
						:value="msgList.platform_phone" type="number" @input="onPhone" style="text-align: right;"
						placeholder="请输入手机号" />
				</view>
				<view class="bottom">
					请保证手机号码准确，审核人员可能通过此手机号与您联系
				</view>
			</view>
			<view class="top-platform">
				<view class="name">
					内容方向
				</view>
				<picker class="choice" @change="onContentOrientation" :value="item" :range="direction"
					range-key="dvalue">
					<view class="uni-input" v-if="item==-1" :style="msgList.platform?'color:#000000':'#D9D9D9'">
						{{msgList.content_direction?msgList.content_direction.content_direction_value:"请选择"}}<text
							class="iconfont">&#xe6c7;</text>
					</view>
					<view class="uni-input" style="color: #000000;" v-else>
						{{direction[item].dvalue}}<text class="iconfont">&#xe6c7;</text>
					</view>

				</picker>
			</view>
		</view>
		<view class="identity">
			身份认证
		</view>
		<view class="middle-name">
			<view class="left">
				姓名
			</view>
			<input type="text" :value="msgList.real_name" maxlength="5" @input="onName" style="text-align: right;"
				placeholder="请输入" placeholder-style="font-size:28rpx;color:#d9d9d9;" />
		</view>
		<view class="middle-name">
			<view class="left">
				手机号
			</view>
			<input type="text" @input="onTwoPhone" maxlength="11" disabled="disabled" :value="myMsg.mobile"
				style="text-align: right; " />
		</view>
		<view class="middle-name">
			<view class="left">
				身份证号
			</view>
			<input type="text" :value="msgList.card" @input="onIdentity" maxlength="18" style="text-align: right;"
				placeholder="请输入" placeholder-style="font-size:28rpx;color:#d9d9d9;" />
		</view>


		<view class="fans-number">
			<view class="number-name">
				身份证正面
			</view>
			<view class="number-image">
				<uploadImg imgCount="1" :imgArr="card1" @result="resultUrl1"></uploadImg>
			</view>

		</view>
		<view class="fans-number">
			<view class="number-name">
				身份证反面
			</view>
			<view class="number-image">
				<uploadImg imgCount="1" :imgArr="card2" @result="resultUrl2"></uploadImg>
			</view>

		</view>
		<view class="fans-number">
			<view class="number-name">
				粉丝数量截图
			</view>
			<view class="number-image">
				<uploadImg imgCount="1" :imgArr="business_license_images" @result="resultUrlthree"></uploadImg>
			</view>
			<view class="remind">
				粉丝数量需与所选区间一致
			</view>
		</view>
		<view class="footer">
			<view class="item">
				申请将在1-3个工作日内处理完成
			</view>
			<button @click="goToToExamine">立即提交</button>
		</view>
		<view class="box">
			
		</view>
	</view>
</template>

<script>
	import uploadImg from "../../../components/uploadImg/imgUpload.vue"
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					font: "back",
					title: '申请网红',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#fff'],
					statusBarFontColor: '#1A1A1A',
					backPage: "../../index/personal",
				},
				platform: [{
						id: 1,
						ext: null,
						dkey: 1,
						dtype: 1,
						dvalue: "抖音"
					}

				], //平台信息
				number: [{
					id: 4,
					ext: null,
					dkey: 1,
					dtype: 2,
					dvalue: "<5000"
				}, ],
				direction: [{
					id: 10,
					ext: null,
					dkey: 1,
					dtype: 3,
					dvalue: "美食"
				}], //内容方向
				item: -1, //内容方向
				index: -1, //所属平台
				indexTwo: -1, //粉丝量级
				platformItem: {}, //选中的平台信息
				fanweightItem: {}, //选中的粉丝信息
				directionItem: {}, //选中的内容方向
				phone: null, //获取的手机号
				name: null, //获取用户的名字
				twoPhone: null, //获取用户的第二个手机号
				identity: null, //获取用户的身份证信息
				identty_just: [], //身份证正面
				upimgtype: 'other',
				card1: [], //传给后台 身份证正面
				card1Sre: "", //字符串
				card2: [], //传给后台 身份证反面
				card2Sre: "", //反面字符串
				business_license_images: [], //粉丝截图
				businessSre: "", //粉丝字符串
				myMsg: {},
				msgList: {} //申请失败之后返回的数据

			}
		},
		onLoad() {
			this.fansList()
			this.myMsg = uni.getStorageSync("personal")
			this.getMsg()
			// this.applyMsg()
		},

		methods: {
			//失败后返回的消息
			getMsg() {
				this.$http.get("/celebrity/info").then(res => {
					if (res && res.code == 200) {
						this.msgList = res.data
						//所属平台
						this.platformItem.platform_key = this.msgList.platform.platform_key
						this.platformItem.platform_value = this.msgList.platform.platform_value
						//粉丝量级
						this.fanweightItem.fanweight_key = this.msgList.fanweight.fanweight_key
						this.fanweightItem.fanweight_value = this.msgList.fanweight.fanweight_value
						//内容方向
						this.directionItem.content_direction_key = this.msgList.content_direction.content_direction_key
						this.directionItem.content_direction_value = this.msgList.content_direction.content_direction_value
						//姓名
						this.name = this.msgList.real_name
						//手机
						this.phone = res.data.platform_phone
						//身份证号
						this.identity = res.data.card
						
						this.card1 =  res.data.card_front_path.split(";")
						this.card1Sre = res.data.card_front_path
						this.card2 = res.data.card_back_path.split(";")
						this.card2Sre = res.data.card_back_path
						this.business_license_images = res.data.fans_file_path.split(",")
						this.businessSre = res.data.fans_file_path
						console.log('this.msgList',this.msgList)
					}
				})
			},
			//获取申请信息
			// applyMsg(){
			// 	this.$http.get("/celebrity/info").then(res=>{
			// 		if(res&&res.code==200){
			// 			console.log(res)
			// 			if(res.data!==null){
			// 				uni.navigateTo({
			// 					url:"./toExamine"
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			//提交最后的信息
			goToToExamine() {
				if (Object.keys(this.platformItem).length === 0) {
					this.$mUtil.toast("请选择所属的平台")
					return false
				}
				if (Object.keys(this.fanweightItem).length === 0) {
					this.$mUtil.toast("请选择您的粉丝量级")
					return false
				}
				if (this.phone == null) {
					this.$mUtil.toast("请输入您平台注册的手机号")
					return false
				}
				if (!(this.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast('请输入正确的手机号')
					return false
				}
				if (Object.keys(this.directionItem).length === 0) {
					this.$mUtil.toast('请选择您的内容方向')
					return false
				}
				if (this.name == null) {
					this.$mUtil.toast('请输入您的姓名')
					return false
				}
				// if(this.twoPhone==null){
				// 	this.$mUtil.toast('请输入您现有的手机号')
				// 	return false
				// }
				// if(!(this.twoPhone.match(this.$mConfig.telRegex))){
				// 	this.$mUtil.toast("请输入正确的现在的手机号")
				// 	return false
				// }
				if (this.card1 == '') {
					this.$mUtil.toast("请上传身份证照片")
					return false
				}
				if (this.card2 == "") {
					this.$mUtil.toast("请上传身份证背面照片")
					return false
				}
				if (this.identity == null) {
					this.$mUtil.toast("请输入身份证号")
					return false
				}
				if (!(this.identity.match(this.$mConfig.telIdentity))) {
					console.log(this.identity)
					this.$mUtil.toast("请输入正确的身份证号")
					return false
				}
				// if(this.identty_just==""){
				// 	this.$mUtil.toast('请上传法人身份证(正反面)')
				// 	return false
				// }
				// if(this.identty_images.length < 2){
				// 	this.$mUtil.toast('请上传法人身份证(正反面)')
				// 	return false
				// }
				if (this.business_license_images == "") {
					this.$mUtil.toast("请上传粉丝数量的截图")
					return false
				}



				this.$http.put("/celebrity/save", {
					real_name: this.name,
					card: this.identity,
					platform_phone: this.phone,
					platform: this.platformItem,
					fanweight: this.fanweightItem,
					content_direction: this.directionItem,
					card_front_path: this.card1Sre,
					card_back_path: this.card2Sre,
					fans_file_path: this.businessSre
				}).then(res => {
					if (res && res.code == 200) {
						console.log(res, "6666666666666666666")
						this.$mUtil.toast("申请成功")
						setTimeout(() => {
							uni.reLaunch({
								url: "./toExamine"
							})

						}, 1000)
					}
				})

			},

			//上传粉丝
			resultUrlthree(e) {
				this.business_license_images = e
				this.businessSre = this.business_license_images[0]
				console.log(this.businessSre)

			},
			//上传身份证
			resultUrl1(e) {
				this.card1 = e
				console.log(this.card1)
				this.card1Sre = this.card1[0]
				console.log(this.card1Sre)

			},
			resultUrl2(e) {
				this.card2 = e
				this.card2Sre = this.card2[0]
				console.log(this.card2Sre)
			},
			//获取身份证的信息
			onIdentity(e) {
				this.identity = e.detail.value
			},
			//获取身份认证里面的手机号
			onTwoPhone(e) {
				this.twoPhone = e.detail.value
			},
			//获取用户的姓名
			onName(e) {
				this.name = e.detail.value
			},
			//获取平台注册的手机号码
			onPhone(e) {
				this.phone = e.detail.value
			},
			//获取字典里所有的字节
			fansList() {
				this.$http.get("/sys/dict/select").then(res => {
					if (res && res.code == 200) {
						// 前端调一个接口 拉取所有的字典表  根据字典值筛选需要的字典数据
						this.direction = res.list.filter(val => val.dtype == 3)
						this.number = res.list.filter(val => val.dtype == 2)
						this.platform = res.list.filter(val => val.dtype == 1)
					}
				})
			},
			bindPickerChange(e) { //取到平台内容的值
				this.index = e.detail.value
				this.platformItem.platform_key = this.platform[this.index].dkey
				this.platformItem.platform_value = this.platform[this.index].dvalue
				console.log(this.platformItem.platform_value)

			},
			//获取了粉丝的信息
			onFans(e) {
				this.indexTwo = e.detail.value
				this.fanweightItem.fanweight_key = this.number[this.indexTwo].dkey
				this.fanweightItem.fanweight_value = this.number[this.indexTwo].dvalue
				console.log(this.fanweightItem)
			},
			//获取了内容的方向的信息
			onContentOrientation(e) {
				this.item = e.detail.value
				this.directionItem.content_direction_key = this.direction[this.item].dkey
				this.directionItem.content_direction_value = this.direction[this.item].dvalue
				console.log(this.directionItem)
			},



		}
	}
</script>

<style scoped lang="scss">
	.box{
		height: 30rpx;
	}
	.platform-item {
		background-color: #ffffff;
		height: 500rpx;
	}

	.footer {
		background-color: #F5F5F5;
	
		.item {
			text-align: center;
			font-size: 28rpx;
			margin-top: 6rpx;
			color: #D9D9D9;
			
		}

		button {
			margin: 0 30rpx;
			margin-top: 60rpx;
			color: #fff;
			font-size: 30rpx;
			background-color: #0B844A;
			border-radius: 43rpx;
			margin-bottom: 10rpx;

		}
	}

	.net-star {
		background: #F5F5F5;
	}

	.fans-number {
		padding: 48rpx 30rpx 16rpx 30rpx;
		font-size: 24rpx;
		background-color: #ffffff;

		.number-name {
			font-size: 28rpx;
			margin-bottom: 16rpx;
		}

		.number-image {
			image {
				width: 288rpx;
				height: 170rpx;
			}
		}

		.remind {
			margin-top: 18rpx;
			font-size: 24rpx;
			color: #D9D9D9;
		}
	}

	.upload-image {
		margin-top: 28rpx;

		image {
			width: 144rpx;
			height: 86rpx;
		}
	}

	.positive {
		background-color: #ffffff;
		padding: 20rpx 30rpx 0 30rpx;

		.positive-name {
			font-size: 24rpx;
			color: rgba(51, 51, 51, 100);
			font-weight: 400;

		}
	}

	.middle-name {
		background-color: #ffffff;
		display: flex;
		padding: 24rpx 30rpx 32rpx 30rpx;
		align-items: center;
		border-bottom: 1rpx solid #E6E6E6;

		.left {
			flex: 1;
			font-size: 26rpx;

		}
	}

	.identity {
		padding: 28rpx 30rpx 20rpx 30rpx;
		background-color: #F5F5F5;
		font-size: 30rpx;

	}

	.phone {
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #E6E6E6;

		.name {
			display: flex;
			font-size: 26rpx;

			.item {
				flex: 1;
			}
		}

		.bottom {
			font-size: 24rpx;
			color: #D9D9D9;
		}
	}

	.top {
		background-color: #ffffff;

		.top-platform {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 30rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.name {
				flex: 1;
				color: #1A1A1A;
				font-size: 26rpx;
				font-weight: 500;
			}

			.choice {
				font-size: 24rpx;
				color: #D9D9D9;

				.iconfont {
					margin-left: 4rpx;
					color: #666666;
				}
			}
		}

	}

	/deep/ .hx-navbar__icon {
		span {
			color: #333333;
		}

	}

	.msg {
		font-size: 30rpx;
		color: #060606;
		font-weight: 400;
		padding: 22rpx 30rpx 10rpx 14rpx;
		background-color: #F5F5F5;
	}
</style>