fangliaoxiaochengxv/subPages/promotionCooperation/index.vue

<template>
	<view class="app-page">

		<view class="top-box">
			<view class="top-bar"
				:style="'height:' +  topData.height + 'px;' + 'padding-top:' + topData.top + 'px;padding-bottom:20rpx'">
				<u-icon name="arrow-left" color="#FFFFFF" size="34rpx" customStyle="padding: 16rpx" @click="toBack()">
				</u-icon>
				<text>推广合作</text>
			</view>

			<view class="top-view">
				<image class="img1" :src="`${$getImgBaseUrl()}ic-tghzb.png`" mode="heightFix"></image>
				<image class="img2" :src="`${$getImgBaseUrl()}ic-tghza.png`" mode="heightFix"></image>
				<view class="tips-box">
					<text>如果您需要个性化的推广定制服务，请填写表单，我们将尽快与您联系，提供专属定制服务。</text>
				</view>

				<view class="content-box">

					<view class="input-box">
						<text class="input-title">姓名</text>
						<u-textarea v-model="name" placeholder="请输入" type="text" border="none" height="67rpx"
							:auto-height="true" clearable customStyle="margin-right:20rpx;min-height:67rpx" />
					</view>
					<u-line color="#F4F4F4" length="100%"></u-line>
					<view class="input-box">
						<text class="input-title">品牌/公司</text>
						<u-textarea v-model="promotion" placeholder="请输入" type="text" border="none" height="67rpx"
							:auto-height="true" clearable customStyle="margin-right:20rpx;min-height:67rpx" />
					</view>
					<u-line color="#F4F4F4" length="100%"></u-line>
					<view class="input-box">
						<text class="input-title">手机号码</text>
						<u-textarea v-model="mobile" placeholder="请输入" type="text" border="none" height="67rpx"
							:auto-height="true" clearable customStyle="margin-right:20rpx;min-height:67rpx" />
					</view>
					<u-line color="#F4F4F4" length="100%"></u-line>
					<view class="input-box" @click="show = true">
						<text class="input-title">合作品类</text>
						<view v-if="!category" style="margin-right:20rpx;height:67rpx;color:#c0c4cc;">请选择</view>
						<view v-else style="margin-right:20rpx;height:67rpx">{{category}}</view>
					</view>
					<u-line color="#F4F4F4" length="100%"></u-line>
					<view class="input-box" style="align-items: flex-start;">
						<text class="input-title">合作需求</text>
						<u-textarea v-model="content" placeholder="请输入" type="text" border="none" height="197rpx"
							:auto-height="true" clearable customStyle="margin-right:20rpx; min-height:197rpx;" />
					</view>
					<u-line color="#F4F4F4" length="100%"></u-line>
					<view class="input-box">
						<text class="input-title" style="line-height:67rpx;">推广预算</text>
						<u-input v-model="budget" placeholder="请输入" type="digit" border="none" height="67rpx"
							:auto-height="true" clearable customStyle="margin-right:20rpx; min-height:67rpx;">
							<u--text text="￥" slot="prefix" margin="0 3px 0 0" color="#000000" size='28rpx'></u--text>
						</u-input>
					</view>
					<u-line color="#F4F4F4" length="100%"></u-line>

					<button class="primary-btn" @click="commit">提交</button>
				</view>
				<view class="content-title"></view>

				<image class="img3" :src="`${$getImgBaseUrl()}ic-tghzc.png`" mode="widthFix"></image>
				<view class="content-title-box">
					<text class="title">填写表单</text>
				</view>
			</view>
		</view>
		<u-picker :show="show" keyName="label" confirmColor="#815BFF" :columns="[list]" @confirm="confirm"
			@cancel="show = false"></u-picker>
	</view>
</template>

<script>
	import {
		addPeace,
	} from "@/common/api/task.js";
	export default {
		data() {
			return {
				show: false,
				list: [{
						value: '品牌种草',
						label: '品牌种草'
					},
					{
						value: '短视频带货',
						label: '短视频带货'
					},
					{
						value: '达人对接',
						label: '达人对接'
					},
					{
						value: '达人授权',
						label: '达人授权'
					}
				],
				topData: {
					top: 0,
					height: 0
				},
				name: undefined,
				promotion: undefined,
				mobile: undefined,
				category: undefined,
				content: undefined,
				budget: undefined
			}
		},
		computed: {
			formData() {
				return {
					name: this.name,
					promotion: this.promotion,
					mobile: this.mobile,
					category: this.category,
					content: this.content,
					budget: this.budget
				}
			}
		},
		onLoad(options) {},
		onShow() {
			const topData = uni.getMenuButtonBoundingClientRect()
			this.topData.top = topData.top
			this.topData.height = topData.height
		},
		methods: {
			confirm(e) {
				this.category = e.value[0].value;
				console.log(e.value[0].label);
				this.show = false;
			},
			toBack() {
				uni.navigateBack()
			},
			commit() {
				const data = this.formData;
				addPeace(data)
					.then((res) => {
						console.log("addPeace==>", res.data)
						if (res.data) {
							uni.$u.toast('提交成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 800);
						}
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100%;
		display: flex;
		background: linear-gradient(180deg, #6B40FF 0%, #F5F6F8 100%);
		min-height: 100vh;
		align-items: center;
		flex-direction: column;
	}

	.top-box {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.top-view {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.top-bar {
		display: flex;
		align-items: center;
		flex-direction: row;

		text {
			width: calc(100% - 132rpx);
			text-align: center;
			color: white;
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.img1 {
		position: absolute;
		top: 5rpx;
		right: 0;
		height: 423rpx;
	}

	.img2 {
		position: absolute;
		top: 50rpx;
		left: 25rpx;
		height: 99rpx;
	}

	.tips-box {
		position: absolute;
		top: 215rpx;
		left: 20rpx;
		width: 710rpx;
		min-height: 112rpx;
		background: rgba(196, 178, 255, 0.74);
		border-radius: 10rpx;
		border: 2rpx solid #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;

		text {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: 20rpx;
		}
	}

	.content-box {
		position: absolute;
		top: 360rpx;
		left: 20rpx;
		width: 710rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 90rpx;
		background: #FFFFFF;
		border-radius: 15rpx;


		.primary-btn {
			width: 650rpx;
			margin-top: 49rpx;
			margin-bottom: 36rpx;
			height: 78rpx;
			line-height: 78rpx;
			background: #815BFF;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		button::after {
			height: 78rpx;
			line-height: 78rpx;
		}

		.primary-btn:active {
			opacity: 0.7;
		}
	}

	.content-title {
		position: absolute;
		top: 360rpx;
		left: 20rpx;
		width: 710rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #D9CDFF 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 15rpx 15rpx 0 0;

	}

	.content-title-box {
		position: absolute;
		top: 348rpx;
		left: 154rpx;
		width: 446rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.img3 {
		position: absolute;
		top: 348rpx;
		left: 154rpx;
		width: 446rpx;
		height: 90rpx;
	}

	.title {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #893313;
	}

	.input-title {
		width: 170rpx;
		height: 67rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #232323;
	}

	.input-box {
		width: 100%;
		padding-top: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>