jiuyiUniapp/jiuyi2/pages/index/dataCenter/push.vue

<script setup>
	/**
	 * 投流推广
	 */
	import {
		onMounted,
		ref,
		computed,
		reactive,
		getCurrentInstance,
		watch,
		defineExpose,
	} from 'vue';
	import {
		useStore,
	} from 'vuex'
	// 
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'
	import {
		onLoad,
		onReady,
		onHide,
		onUnload,
	} from '@dcloudio/uni-app'

	// 顶部
	import apex from '@/components/header/apex.vue';
	// 视频菜单
	import videoMenu from '@/components/index/videoMenu.vue';
	// 
	import payPwd from '@/components/mine/payPwd.vue';

	const {
		proxy
	} = getCurrentInstance()

	const store = useStore()
	// 榴莲果兑换展播量比例
	const durainChangeShowPlay = ref(0)
	// 榴莲果兑换完播量比例
	const durainChangeFullPlay = ref(0)
	// 榴莲果
	const durainChangeFullPlayLimit = ref(0)
	// 用户信息
	const userinfo = computed(() => store.state.userinfo)
	// 我的视频列表
	const list = reactive({
		data: [],
		pageSize: 10,
		pageNum: 1,
		total: 0,
	})
	// 选择的我的作品
	const myVideo = ref({})
	// 选择的收藏的视频
	const collecVideo = ref({})
	// 申请数量
	const playNum = ref('')
	// 榴莲果交易类型 5展播量兑换 7完播量兑换
	const transactionType = ref('')
	// 已选择的视频
	const selectVideo = computed(() => myVideo.value || collecVideo.value || {})
	// 榴莲果支付价格
	const price = computed(() => {
		let result = parseFloat(playNum.value)
		if (transactionType.value == 5) result = result
		if (transactionType.value == 7) result = result + durainChangeFullPlayLimit.value
		return result
	})
	// 展播量预计结果
	const showPlayCount = computed(() => {
		return (playNum.value || 0) * durainChangeShowPlay.value
	})
	// 钱包
	const purse = computed(() => store.state.purse)

	onLoad(() => {
		// 获取视频列表
		getList()
		// 开启监听
		addListener()
		// 获取榴莲果兑换展播量
		getShowPlayConfig()
		// 获取榴莲果兑换完播量
		getFullPlayConfig()
		// 获取钱包
		util.getPurse()
	})

	onUnload(() => {
		removeListener()
	})

	// 开启监听
	function addListener() {
		// 选择投流的收藏视频
		uni.$on('selectPushCollectVideo', (item) => {
			myVideo.value = {}
			collecVideo.value = item
		})
	}

	// 关闭监听
	function removeListener() {
		uni.$off('selectPushCollectVideo')
	}

	// 获取榴莲果兑换展播量比例
	function getShowPlayConfig() {
		api.durian.getShowPlayConfig({}).then(rs => {
			if (rs.code == 200) {
				// 展播量兑换比例
				durainChangeShowPlay.value = rs.data.proportion
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 获取榴莲果兑换完播量比例
	function getFullPlayConfig() {
		api.durian.getFullPlayConfig({}).then(rs => {
			if (rs.code == 200) {
				// 完播量兑换比例
				durainChangeFullPlay.value = rs.data.proportion
				// 完播量兑换门槛
				durainChangeFullPlayLimit.value = rs.data.minConsumption
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 刷新列表
	function refreshList() {
		list.pageNum = 1
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (list.data.length >= list.total) return
		list.pageNum++
		getList()
	}

	// 获取列表
	function getList() {
		// 
		api.video.myWorks({
			query: {
				userId: userinfo.value.id,
				pageSize: list.pageSize,
				pageNum: list.pageNum,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (list.pageNum == 1) list.data.length = []
				list.data.push(...rs.rows)
				list.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 选择我的视频
	 * @param {Object} item 选择的视频对象
	 */
	function handleMyWork(item) {
		myVideo.value = item
		collecVideo.value = {}
		proxy.$refs.select.close()
	}

	// 展播量申请弹窗
	function handleShowViewRef() {
		if (!selectVideo.value.id) {
			util.alert("请选择需要投流的视频")
			return
		}
		proxy.$refs.viewsRef.open()
	}

	// 完播量申请弹窗
	function handleShowApplyRef() {
		if (!myVideo.value.id) {
			util.alert("请选择自己的作品")
			return
		}
		proxy.$refs.applyRef.open()
	}

	// 推送视频
	function handlePushShow() {
		if (purse.value.fruit <= playNum.value * durainChangeShowPlay.value) {
			util.alert({
				content: "榴莲果不足",
				showCancel: false,
			})
			return
		}
		// 展播量
		transactionType.value = 5
		proxy.$refs.viewsRef.close()
		proxy.$refs.payPwdRef.open()
	}

	// 完播申请
	function handlePushFull() {
		if (purse.value.fruit <= playNum.value * durainChangeFullPlay.value + durainChangeFullPlayLimit.value) {
			util.alert({
				content: "榴莲果不足",
				showCancel: false,
			})
			return
		}
		// 展播量
		transactionType.value = 7
		proxy.$refs.applyRef.close()
		proxy.$refs.payPwdRef.open()
	}

	/**
	 * 取消选择的收藏的别人的视频
	 */
	function handleCancel() {
		util.alert({
			content: `确认取消投流${selectVideo.title}`,
		}).then(rs => {
			if (!rs.confirm) return
			selectVideo.value = {}
		})
	}

	// 推流收藏视频
	function pushCollect() {
		link(util.setUrl('/pages/index/dataCenter/pushVideoCollects', {
			ids: selectVideo.value.id,
		}))
	}

	// 跳转
	function link(path) {
		uni.navigateTo({
			url: path
		})
	}

	/**
	 * 二级密码确认
	 * @param {Object} event 二级密码
	 */
	function handlePwdConfirm(event) {
		// 榴莲果交易
		api.durian.consume({
			data: {
				// 更新用户信息
				userId: userinfo.value.id,
				// 交易类型
				transactionType: transactionType.value,
				// 榴莲果交易数量
				fruitAmount: price.value,
				// 交易值
				totalAmount: price.value,
				// 二级密码
				secondPassword: event,
				// 视频id
				videoIds: [selectVideo.value.id],
			}
		}).then(rs => {
			if (rs.code === 200) {
				util.getPurse()
				uni.navigateBack()
				return
			}

			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="app">
		<apex title="投流推广">
			<template #right>
				<view class="c333 f28" @click="link('/pages/index/dataCenter/pushHistory')">历史推流</view>
			</template>
		</apex>

		<view class="first oh mtb30 mlr20 plr20 bfff br10" @click="$refs.select.open()">
			<view class="rows mtb30 c333 f36">
				<view class="col">
					<view class="df aic">
						<view class="">我想投流的视频</view>
						<uni-icons type="bottom" />
					</view>
				</view>

				<view class="line uploadBox f28">
					<view class="key">选择自己的作品</view>
				</view>
			</view>

			<view class="listBox mtb30" v-if="myVideo.id">
				<scroll-view scroll-x="true" class="scroll">
					<view class="list df">
						<view class="item oh pr fs0 mr20 br20">
							<image class="poster br20" :src="myVideo.coverUrl" mode="aspectFill" />
							<!-- <view class="window pfull"></view> -->
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 须知 -->
			<!-- <view class="notice f28 c666">种了很多榴莲果树 ，大家都来买</view> -->
		</view>

		<view class="second oh mtb30 mlr20 ptb25 plr30 c333 f36 br10 bfff" @click="pushCollect">
			<view class="fmid">
				<view>我想投流Ta的视频</view>
				<uni-icons type="right" color="#666" size="28rpx" />
				<view class="c666 f28">我的收藏</view>
			</view>

			<!-- 限制只能分享别人的视频限制一个 -->
			<view class="collectList" v-if="collecVideo.id">
				<view class="item df mtb30">
					<view class="poster oh pr fs0 mr20 br10">
						<image class="image br10" :src="collecVideo.coverUrl" mode="aspectFill" />
						<!-- <view class="window pfull br10"></view> -->
					</view>

					<view class="f1 df jcsb fdc">
						<view class="f1">
							<view class="f38 b">{{collecVideo.title}}</view>
							<view class="mtb20 c666 f28">{{collecVideo.userNickname}}</view>
							<!-- 如果是商家发布的带链接的视频 增加显示 商家出让佣金 -->
							<view class="cFF9B27 f24" v-if="collecVideo.productId">商家出让佣金 {{collecVideo.commission}}
							</view>
						</view>

						<view class="">
							<view class="btn bar black w200" @click.stop="handleCancel()">取消</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 我想要 -->
		<view class="second oh mtb20 mlr20 plr20 c333 f36 br10 bfff">
			<view class="title mtb20">我想要</view>

			<view class="list mtb20">
				<view class="item fmid fdc br10" @click="handleShowViewRef">
					<view class="">展示播放量</view>
					<!-- <view class="mtb10 c666 f20">无需平台审核</view> -->
					<view class="button btn black mt10">投流</view>
				</view>

				<view class="item fmid fdc br10" @click="handleShowApplyRef">
					<view>完播播放量</view>
					<!-- <view class="mtb10 c666 f20">需申请平台审核</view> -->
					<view class="button btn black mt10">申请</view>
				</view>
			</view>

			<!-- 规则 -->
			<view class="rule mtb20 c666 f24">
				<view class="c333">投流说明：</view>
				<view>1. 只能选择一个视频用来投流推广。</view>
				<view>2. 展示播放量可以选择自己发布的视频和收藏的视频。</view>
				<view>3. 完播播放量只能选择自己的视频，需要先向平台发起申请。</view>
			</view>
		</view>

		<view class="fill" style="height: 210rpx;"></view>

		<!-- 填充 -->
		<view class="footerBar footer bfff shadow">
			<view class="hint ptb10 plr30 c333">
				<view>消耗 1 榴莲果可提升 {{durainChangeShowPlay}}+ 展示播放量</view>
				<view>消耗 1 榴莲果可提升 {{durainChangeFullPlay}}+ 完播播放量</view>
			</view>
			<view class="content rows pt30 plr30">
				<view class="f1 c333 f48">当前拥有{{userinfo.fruit}}榴莲果</view>
			</view>
		</view>
	</view>

	<!-- 二级支付 -->
	<payPwd ref="payPwdRef" :price="price" unitKey="durian" @confirm="handlePwdConfirm" />

	<!-- 展播量申请 -->
	<uni-popup ref="viewsRef" type="center">
		<view class="viewAlt popMid plr30 bfff">
			<view class="title mt50 mb30 tac">
				<view>展示播放量</view>
			</view>

			<view class="form f28">
				<view class="row mtb20">
					<view class="key">耗榴莲果投流视频</view>
					<view class="value inputBox f1 mt10 plr20">
						<input v-model="playNum" type="number" placeholder="请输入榴莲果数量" />
					</view>
				</view>
			</view>

			<view class="notice mt30 f20">预计获得 {{showPlayCount}}+ 展示播放量</view>

			<view class="btn lg black mt10 mb40" @click="handlePushShow">推流</view>
		</view>
	</uni-popup>

	<!-- 完播量申请 -->
	<uni-popup ref="applyRef" type="center">
		<view class="applyAlt popMid plr60 c333 f36 bfff">
			<view class="title mt50 mb30 tac">
				<view>完播播放量</view>
				<view class="">消耗{{durainChangeFullPlayLimit}}榴莲果</view>
			</view>

			<view class="form f28">
				<view class="row mtb20">
					<view class="key">消耗榴莲果：</view>
					<view class="value inputBox f1 mt20 plr20">
						<input v-model="playNum" type="number" placeholder="请输入榴莲果数量" />
					</view>
				</view>
			</view>

			<view class="notice mt30 f20">申请成功则消耗全部榴莲果，申请不成功则返回申请榴莲果</view>

			<view class="btn lg black mt10 mb40" @click="handlePushFull">提交申请</view>
		</view>
	</uni-popup>

	<!-- 选择自己的视频 -->
	<uni-popup ref="select" type="bottom">
		<view class="selectAlt popBot df fdc bfff">
			<view class="header rows ptb20 plr20">
				<view class="title plr30 c333 f34">
					<text>作品</text>
					<text class="ml10">{{list.total}}</text>
				</view>

				<view class="fmid c999 f28" @click="refreshList">
					<uni-icons type="refreshempty" color="" />
					<text>刷新</text>
				</view>
			</view>

			<!-- 视频菜单 -->
			<scroll-view scroll-y="true" class="scroll" @scrolltolower="getMoreList">
				<videoMenu :list="list.data" mode="menu" @item="handleMyWork" />
			</scroll-view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	// 第一
	.first {
		.hint {
			color: #868686;
		}

		.item {
			width: 220rpx;
			height: 280rpx;
			background-color: #F4F4F4;
		}

		.poster {
			width: 100%;
			height: 100%;
		}

	}

	// 第二
	.second {
		.list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 20rpx;

			.item {
				height: 200rpx;
				background-color: #F4F4F4;
			}

			.button {
				padding: 10rpx;
				width: 80rpx;
				font-size: 20rpx;
			}
		}
	}

	// 收藏的视频列表
	.collectList {
		.item {
			.poster {
				height: 288rpx;
				// height: 192rpx;
				width: 162rpx;
				// width: 108rpx;

				.image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	// 底部
	.footerBar {
		padding-top: 0;

		.hint {
			background-color: #e2e2e2;
		}
	}

	.applyAlt {
		.notice {
			color: #b4b4b4;
		}
	}

	// 
	.selectAlt {

		.scroll {
			height: 70vh;
		}
	}
</style>