pay-video-applet-uniapp-24-8-22/pages_mine/mine/sonPage/promotion/promotionDetail.vue

<template>
	<view class="promotionDetail">
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="推广详情" />

		<!--主页面-->
		<view class="frame">
			<!--标题-->
			<view class="title">
				<span>推广基本信息</span>
			</view>

			<!--基本信息-->
			<view style="" class="basicInfo">
				<view class="item">
					<view class="label">春天的气息丫丫</view>
					<view class="value">???</view>
				</view>
				<view class="item">
					<view class="label">价格</view>
					<view class="value">{{item.price}}</view>
				</view>
				<view class="item">
					<view class="label">时长</view>
					<view class="value">{{item.price}}</view>
				</view>
				<view class="item">
					<view class="label">联系方式</view>
					<view class="value">
						<uv-input v-model="form.phone" placeholder="请输入联系方式" border="bottom" type='number'
							clearable></uv-input>
					</view>
				</view>
				<view class="item">
					<view class="label">剩余推广时长</view>
					<view class="value">{{item.price}}</view>
				</view>
				<view>推广作品</view>
				<view style="width: 30%;height: 300rpx;border-radius: 20rpx;overflow: hidden;">
					<image :src="item.image" style="width: 100%;height: 100%;"></image>
				</view>
			</view>


			<!--确认发布弹框-->
			<uv-popup ref="popup" mode="center" custom-style="height: 400rpx;" :closeOnClickOverlay="false">
				<view class="content">
					<view class="title">
						推广选项
					</view>
					<!--付费周期-->
					<view style="" class="payCycle">
						<view>付费周期</view>
						<view style="width: 200rpx;height:50rpx">
							<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
							<view style="display: flex;justify-content: flex-start" @click="openPicker">
								<span style="margin-right: 10rpx;">{{ form.cycle }}</span>
								<uv-icon name="arrow-down" color="#2979ff" size="28"></uv-icon>
							</view>
						</view>
					</view>

					<!--金额-->
					<view style="width:100%;display: flex;justify-content: space-between;align-items: center;">
						<view>金额</view>
						<view style="width: 200rpx;height:50rpx">
							<uv-input type="number" placeholder="请输入内容" border="surround" v-model="form.moneyValue"
								@change="moneyValueChange"></uv-input>
						</view>
					</view>

					<!--确认推广按钮-->
					<view class="confirmBottom">
						<button @click="confirmPromotion" class="confirmBtn">
							确认推广
						</button>
					</view>
				</view>
			</uv-popup>
			<uv-toast ref="toast"></uv-toast>


		</view>

		<!--继续推广按钮-->
		<button @click="continueToPromotion" class="bottomBtn">
			继续推广
		</button>
	</view>
</template>

<script>
	import '../../../../common.css'; // 引入公共 CSS 文件
	export default {
		onLoad: function(options) {
			const id = options.id;
		},
		data() {
			return {
				columns: [
					['一天', '两天', '三天']
				],
				form: {
					moneyValue: 0,
					cycle: '一天',
					phone: '',
				},
				item: {},
				param: {
					type: 'default',
					title: '结束后跳转标签页',
					message: "推广成功",
					url: '/pages/componentsD/tag/tag'
				}
			};
		},
		mounted() {
			this.getData()
		},
		methods: {
			// 获取推广详情数据
			getData() {
				this.$api('infoGetPromotionDetail', {}, res => {
					if (res.code == 200) {
						this.item = res.result.records
					}
				})
			},

			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log('confirm', e);
				this.form.cycle = e.value[0]
			},
			// 继续推广按钮
			continueToPromotion() {
				this.$refs.popup.open();
			},
			// 金额发生变化
			moneyValueChange(e) {
				console.log('moneyValue', e);
				this.form.moneyValue = e
			},
			// 确认推广
			confirmPromotion() {
				console.log('确认推广', this.form);
				this.$refs.toast.show({
					...this.param,
					complete() {
						this.param.url && uni.navigateTo({
							url: this.param.url
						})
					}
				})
				// this.$refs.toast.show()
				// this.$api('ConfirmPromotion', {}, res => {
				// 	if (res.code == 200) {
				// 		//跳转到支付页面。。。

				// 	}
				// })

			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.promotionDetail {
		width: 100vw;
		height: 100vh;

		.frame {
			width: 100%;
			//height: calc(100vh - 220rpx);
			padding: 28rpx 28rpx 0 28rpx;

			.title {
				font-size: 36rpx;
				font-weight: 600;
			}

			.basicInfo {
				display: flex;
				flex-direction: column;
				gap: 60rpx;
				margin-top: 50rpx;
				width: 90%;

				.item {
					display: flex;
					justify-content: space-between;
				}
			}

			.bottom {
				position: fixed;
				bottom: 30rpx;
				left: 25%;
				width: 50%;
				height: 100rpx;

				.continueBtn {
					color: #ffffff;
					background: $uni-linear-gradient-btn-color;
				}
			}
		}


		.content {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			gap: 20rpx;
			width: 600rpx;
			height: 100%;
			padding: 20rpx;


			.title {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.payCycle {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.confirmBtn{
				width: 50%;
				height: 80rpx;
				text-align: center;
				color: #ffffff;
				background: linear-gradient(to right, #3c69f1, #5f3bf5);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				margin-top: 50rpx;
			}


		}


	}

	/deep/ .uv-popup .uv-popup__content {
		border-radius: 20rpx;
	}
</style>