558 lines
13 KiB
Vue
558 lines
13 KiB
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> |