zhibo/pages_user/user/userTuiAdd.vue

<template>
  <view>
		<view class="form-box">
			<view class="title">你为什么想成为芳华佳选健康推广?</view>
			<view class="textarea-box">
				<textarea v-model="question1" value="" placeholder="请输入..." maxlength="200" placeholder-class="textarea-place" />
				<view class="num-box">{{ question1.length }}/200</view>
			</view>
			<view class="title">你是否了解芳华佳选健康推广大使?</view>
			<view class="textarea-box">
				<textarea v-model="question2" value="" placeholder="请输入..." maxlength="200" placeholder-class="textarea-place" />
				<view class="num-box">{{ question1.length }}/200</view>
			</view>
			<view class="title">你最有意向推广的产品是哪一款?</view>
			<view class="textarea-box">
				<textarea v-model="question3" value="" placeholder="请输入..." maxlength="200" placeholder-class="textarea-place" />
				<view class="num-box">{{ question3.length }}/200</view>
			</view>
			<view class="btn-box">
				<view class="sub-btn" @click="submit()">提交申请</view>
			</view>
			<view class="popup-box" v-if="qwShow">
			  <view class="info-mask"  @tap="close()" ></view>
			  <view class="info-form"   >
					<image  :src="qwUrl" />
			  </view>
			</view>
		</view>
  </view>
</template>
<script>
import {applyPromoter} from '@/api/user'
export default {
    name: "tuiMoney",
    data: function () {
      return {
			qwShow:false,
			question1:"",
			question2:"",
			question3:"",
			qwUrl:"https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230228/7ee9c2ee807545aea36f6f1127a0cec4.jpg"
      };
    },
    mounted: function () {
    },
    methods: {
		close(){
			this.qwShow=false;
		},
		submit(){
			var json={question1:this.question1,question2:this.question2,question3:this.question3}
			var data={contentJson:JSON.stringify(json)}
			applyPromoter(data).then(
				res => {
					this.qwShow=true;
					if(res.code==200){
						uni.showToast({
							icon:'none',
						 	title: res.msg,
						});
						
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				},
				rej => {}
			);
		},
    }
  };
</script>
<style lang="scss">
	.form-box{
		padding: 0 30upx;
		background: #FFFFFF;
		.title{
			padding: 15rpx 0rpx;
			font-size: 28upx;
			font-family: PingFang SC;
			color: #949494;
		}
		.textarea-box{
			box-sizing: border-box;
			height: 330upx;
			background: #F5F6FA;
			border-radius: 10upx;
			padding: 30upx;
			position: relative;
			.textarea-place{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #C9CED6;
			}
			textarea{
				width: 100%;
				height: 100%;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.num-box{
				position: absolute;
				right: 20upx;
				bottom: 20upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #C9CED6;
				z-index: 10;
				background: #F5F6FA;
			}
		}
	}
	.btn-box{
		margin-top: 30rpx;
		height: 120upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.sub-btn{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #2BC7B9;
			border-radius: 44upx;
		}
	}
	.popup-box{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		.info-mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.5);
			z-index: 999;
		}
		.info-form {
			z-index: 1000;
			width: 80%;
			height:80%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			image{
				width:100%;
				height:100%;
			}
		}
	}
</style>