shortPlay-mini/pages/shortPlay/info/info.vue

<template>
	<view class="p-20">
		<view>
			<view class="information p-20 flex flex-row">
				<image class="img" src="" mode="widthFix"></image>
				<view class="flex-1 flex flex-col">
					<text class="title">老公的金丝雀怀孕后</text>
					<text>共73集 已完结</text>
					<text>视频号 森林微剧</text>
					<text>2024-03-04 上线</text>
					<text>已有 100人推广</text>
				</view>
			</view>
			<view class="way-percent flex flex-row">
				<view class="flex-1 flex flex-col justify-center items-center">
					<view class="biger">CPS</view>
					<view class="smaller">分成方式</view>
				</view>
				<view class="flex-1 flex flex-col justify-center items-center">
					<view class="biger">75%</view>
					<view class="smaller">分成比例</view>
				</view>
			</view>
			<view class="info">
				<u-tabs style="padding: 20upx 0;" :scrollable="false" :list="tabs" lineColor="#007aff" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="height: 34px; padding-bottom: 10upx;" @change="change">
				</u-tabs>
				<view class="inside-content" v-if="currentIndex === 0">
					<text>链接：https://pan.baidu.com/s/1vqFyozWUCc5NSYdqIqcP2A?pwd=uye7</text>
					<view class="copy-wrap"><text class="copy">复制链接</text></view>
				</view>
				<view class="imageine" v-else-if="currentIndex === 1">
					暂无信息
				</view>
				<view class="imageine" v-else-if="currentIndex === 2">
					暂无信息
				</view>
			</view>
		</view>
		<view class="fix-btn p-20">
			<u-button shape="circle" type="primary" @click="showPromotion = true">创建推广</u-button>
		</view>

		<u-modal :show="showPromotion" :closeOnClickOverlay="true" :showCancelButton="true" cancelText="关闭"
			cancelColor="#007aff" :showConfirmButton="false" @close="showPromotion = false;promotionActive=0;" @cancel="showPromotion = false;promotionActive=0;">
			<view style="width: 100%;">
				<view class="flex flex-col justify-center items-center" style="width: 100%;">
					<u-tabs 
						v-if="showPromotion"
						:scrollable="!isH5"
						:list="tabs2" lineColor="#007aff" :activeStyle="{
							color: '#303133',
							fontWeight: 'bold'
						}" :inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}" itemStyle="height: 34px; padding-bottom: 10upx;" class="tabs2" @change="change2">
					</u-tabs>
					<view class="promotion" v-if="promotionActive === 0">
						<c-popover placement="bottom-start" ref="Popover1" class="item-popover">
							<view slot="content"
								style="width: 250upx;padding: 15upx;font-size: 26upx;color: rgb(50, 50, 51);">
								海报可用于在小红书、多多视频、皮皮虾、腾讯视频等平台发布短剧内容，在评论区放置海报，引流到微信进行变现。</view>
							<view class="use-way flex flex-row items-center"><text
									style="padding-right: 10upx;">使用说明</text><u-icon size="15"
									name="question-circle"></u-icon></view>
						</c-popover>

						<view style="padding-top: 20upx;">
							<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false"
								indicatorStyle="right: 20px">
								<view slot="indicator" class="indicator">
									<view class="indicator__dot" v-for="(item, index) in list6" :key="index"
										:class="[index === currentNum && 'indicator__dot--active']">
									</view>
								</view>
							</u-swiper>
						</view>

						<view class="p-30 flex flex-row justify-center" style="padding-bottom: 0upx;">
							<u-button type="primary" size="small" color="#007aff" :plain="true" :hairline="true" icon="share"
								text="保存海报"></u-button>
								<view style="width: 40upx;"></view>
							<u-button color="#007aff" type="primary" size="small" :plain="true"
								:hairline="true" icon="attach" text="复制链接"></u-button>
						</view>
					</view>
					
					<view v-if="promotionActive === 1">
						<view class="content-url">https://kzurl05.cn/7GXLRU</view>
						<view class="p-d-20 flex flex-row justify-center">
							<view style="width: 170upx;">
								<u-button color="#007aff" type="primary" size="small" :plain="true"
									:hairline="true" icon="attach" text="复制链接"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import cPopover from '@/uni_modules/zb-popover/components/zb-popover/zb-popover.vue'
	export default {
		components: {
			cPopover
		},
		data() {
			return {
				tabs: [{
					name: '视频素材'
				}, {
					name: '创作灵感'
				}, {
					name: '挂载流程'
				}],
				tabs2: [{
					name: '私域推广'
				}, {
					name: '视频号推广'
				}],
				promotionActive: 0,
				currentIndex: 0,
				showPromotion: false,
				list6: [
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				currentNum: 0,
				isH5: false
			}
		},
		created() {
			// #ifdef H5
			this.isH5 = true
			// #endif
		},
		methods: {
			change(e) {
				this.currentIndex = e.index
			},
			change2(e) {
				this.promotionActive =  e.index
			}
		}
	}
</script>

<style lang="scss">
	.fix-btn {
		width: 100vw;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
	}

	.information {
		background-color: #fff;
		border-radius: 20upx;

		.img {
			width: 150upx;
			height: auto;
			border-radius: 10upx;
			overflow: hidden;
		}

		.flex-1 {
			padding-left: 20upx;

			.title {
				color: #323333;
				font-size: 32upx;
				font-weight: 550;
			}

			text {
				color: #aaa;
				font-size: 25upx;
				padding: 2upx 0;
			}
		}
	}

	.way-percent {
		padding: 30upx 0;
		background: #f3f4f6;
		border: 1px solid #fff;
		border-radius: 0 0 20upx 20upx;
		border-top: 0;

		.biger {
			font-size: 35upx;
			font-weight: bold;
			color: #323333;
		}

		.smaller {
			font-size: 28upx;
			color: #7d8394;
			margin-top: 10upx;
		}
	}

	.info {
		background-color: #fff;
		border-radius: 20upx;
		margin-top: 30upx;
	}

	.inside-content {
		font-size: 28upx;
		padding: 30upx;
		color: #666;
		word-break: break-all;
		border-top: 1upx solid #ebedf0;

		.copy-wrap {
			padding-top: 50upx;
		}

		.copy {
			color: $uni-theme;
		}
	}

	.imageine {
		font-size: 28upx;
		padding: 30upx;
		color: #666;
		word-break: break-all;
		border-top: 1upx solid #ebedf0;
	}

	.indicator {
		display: flex;
		flex-direction: row;
		justify-content: center;
		right: 0 !important;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.promotion {
		width: 90%;
		box-sizing: border-box;
		padding: 40upx;
		background: #f7f8fa;
		margin-top: 30upx;

		.use-way {
			color: #646566;
			font-size: 25upx;
		}
	}
	
	.content-url {
		margin: 20upx 0;
		width: 500upx;
		height: 300upx;
		padding: 20upx;
		border-radius: 20upx;
		    border: 2upx solid #eee;
		    word-break: break-all;
			color: #646566;
			    font-size: 30upx;
				overflow: hidden;
	}
	
	.tabs2 {
		width: 100%;
	}
	::v-deep .copy2 {
		width: auto;
	}
	::v-deep .copy1 {
		margin-left: 40upx;
	}
</style>