300 lines
7.5 KiB
Vue
300 lines
7.5 KiB
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> |