帧视界壹通告,付费看视频的微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

561 lines
12 KiB

<template>
<view class="actorRelease">
<navbar leftClick @leftClick="$utils.navigateBack" title="演员发布" />
<view class="images box">
<view class="">
封面
</view>
<uv-upload
:fileList="fileListImage"
:maxCount="1"
multiple
width="150rpx"
height="150rpx"
@delete="deleteImage2"
@afterRead="afterRead2"
:previewFullImage="true"></uv-upload>
</view>
<view class="form">
<view class="form-item">
<view class="label">
名称
</view>
<input type="text" placeholder="请输入名称" v-model="form.name" />
</view>
<view class="form-item">
<view class="label">
价格:
</view>
<input type="number" placeholder="请输入价格" v-model="form.money" />
</view>
<!-- <view class="form-item">
<view class="label">
地点:
</view>
<input type="text" placeholder="请输入地点"/>
</view>
<view class="form-item">
<view class="label">
时间:
</view>
<input type="text" placeholder="请选择时间"/>
</view> -->
<view class="form-item">
<view class="label">
联系方式:
</view>
<input type="text" placeholder="请输入联系方式" v-model="form.phone" />
</view>
<view class="form-item-content">
<view class="label">
详情介绍:
</view>
<view class="textarea">
<uv-textarea v-model="form.photographerContent" :maxlength="200" count placeholder="输入详情介绍"></uv-textarea>
</view>
</view>
<view class="form-item-content">
<view class="label">
发布人:
</view>
<view class="textarea">
<uv-radio-group v-model="form.isUser">
<uv-radio size="35rpx"
icon-size="35rpx"
label="本人发布"
labelSize="28rpx" name="Y">
</uv-radio>
<uv-radio size="35rpx"
icon-size="35rpx"
label="经纪人发布"
labelSize="28rpx" name="N">
</uv-radio>
</uv-radio-group>
</view>
</view>
<view class="form-item-content">
<view class="label">
联系方式是否付费查看(建议付费避免无效联系)
</view>
<view class="textarea">
<uv-radio-group v-model="form.phonePay">
<uv-radio size="35rpx" icon-size="35rpx" label="是" labelSize="28rpx" name="Y">
</uv-radio>
<uv-radio size="35rpx" icon-size="35rpx" label="否" labelSize="28rpx" name="N">
</uv-radio>
</uv-radio-group>
</view>
</view>
<!-- <view class="form-item-content">
<view class="label">
是否置顶
</view>
<view class="textarea">
<uv-radio-group v-model="form.isTop">
<uv-radio size="35rpx" icon-size="35rpx" label="是" labelSize="28rpx" name="1">
</uv-radio>
<uv-radio size="35rpx" icon-size="35rpx" label="否" labelSize="28rpx" name="0">
</uv-radio>
</uv-radio-group>
</view>
</view> -->
<view class="upTop" v-if="isVedio">
<view class="title">
<uv-icon name="pushpin-fill"></uv-icon>
是否置顶
</view>
<uv-radio-group v-model="form.topId">
<view class="list">
<view class="item">
<view class="left">
不需要置顶
</view>
<view class="right">
<uv-radio
size="35rpx"
icon-size="35rpx"
:disabled="!!id"
:name="0">
</uv-radio>
</view>
</view>
<view class="item"
v-for="(item, index) in upTopList"
:key="index">
<view class="left">
置顶{{ item.day }}天{{ item.money }}元
</view>
<view class="right">
<uv-radio
size="35rpx"
icon-size="35rpx"
:disabled="!!id"
:name="item.id">
</uv-radio>
</view>
</view>
</view>
</uv-radio-group>
</view>
<view class="form-item-content" v-if="isVedio">
<view class="label">
代表作
</view>
<view class="upload">
<view class="">
</view>
<uv-upload :fileList="fileList" :maxCount="4" multiple accept="video" width="150rpx" height="150rpx"
@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
<view class="input"
v-for="(item, index) in inputs">
<input type="text" v-model="item.title"
:placeholder="`请输入第${index + 1}个代表作的名称`"/>
</view>
</view>
</view>
</view>
<submit @submit="submit" @preview="preview" @draft="draft"
:submitTitle="id ? '修改' : '发布'"/>
<confirmationPopup
ref="confirmationPopup"
title="提示"
@confirm="pay"
confirmText="确认支付">
<view class="confirmationPopup">
<image src="/static/image/publish/pay.png"
style="width: 150rpx;height: 150rpx;"
mode=""></image>
<view class="info">
确认支付{{ topInfo.money }}元,可置顶{{ topInfo.day }}天
</view>
</view>
</confirmationPopup>
<confirmationPopup ref="confirmationPopupUpload" title="提示" confirmText="确认" @confirm="confirm()">
<view class="confirmationPopup">
<image src="/static/image/publish/upload.png" style="width: 150rpx;height: 150rpx;" mode=""></image>
<view class="info">
已由平台进行审核时间周期为24小时
</view>
</view>
</confirmationPopup>
</view>
</template>
<script>
import submit from '@/components/content/submit.vue'
import confirmationPopup from '@/components/toast/confirmationPopup.vue'
import { mapGetters } from 'vuex'
import {
mapState
} from 'vuex'
export default {
components: {
submit,
confirmationPopup
},
data() {
return {
form: {
money: '',
name : '',
phone : '',
isUser : 'Y',//是否本人发布
phonePay : 'Y',//联系方式是否付费查看
photographerContent : '',//演员介绍
topId : 0,
},
fileList: [//代表作
// {
// url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
// },
],
fileListImage: [],//封面
upTopList: [],
inputs : [],
id : 0,
};
},
onLoad(options) {
// this.$route.query的参数
this.id = options.id
},
computed : {
topInfo(){
for (var i = 0; i < this.upTopList.length; i++) {
if(this.upTopList[i].id == this.form.topId){
return this.upTopList[i]
}
}
return {}
},
...mapGetters(['isVedio']),
},
onShow() {
this.indexTopPayList()
this.getDateil()
},
methods: {
getDateil(){
if(!this.id){
return
}
let self = this
this.$api('indexGetActorDetail', {
id : this.id
}, res => {
if (res.code == 200) {
res.result.details.image.split(',')
.forEach(url => {
self.fileListImage.push({
url
})
})
res.result.details.isImage.split(',')
.forEach(url => {
self.fileList.push({
url
})
})
res.result.details.workName && res.result.details.workName.split(',')
.forEach(title => {
self.inputs.push({
title
})
})
res.result.details.topId = res.result.details.topId || 0
this.form = res.result.details
}
})
},
// 获取置顶方式
indexTopPayList() {
this.$api('indexTopPayList', res => {
if (res.code == 200) {
this.upTopList = res.result
}
})
},
// 删除图片
deleteImage(e) {
this.fileList.splice(e.index, 1)
this.inputs.splice(e.index, 1)
},
// 上传作品
afterRead(e) {
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.fileList.push({
url
})
self.inputs.push({
title : '',
})
})
})
},
deleteImage2(e) {
this.fileListImage.splice(e.index, 1)
},
afterRead2(e) {
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.fileListImage.push({
url
})
})
})
},
pay() {
let self = this
let data = {
// ...this.form,
money: this.form.money,
name : this.form.name,
phone : this.form.phone,
isUser : this.form.isUser,//是否本人发布
phonePay : this.form.phonePay,//联系方式是否付费查看
photographerContent : this.form.photographerContent,//演员介绍
topId : this.form.topId,
state : 0,
isCard: 'N',
isImage : this.fileList.map((item) => item.url).join(","),//代表作视频列表
image : this.fileListImage.map((item) => item.url).join(","),//封面
workName : this.inputs.map((item) => item.title).join(","),//代表作名称列表
isTop : this.form.topId ? 'Y' : 'N',
}
if(this.id){
data.id = this.id
}
this.$api('publishActor', data,
res => {
if (res.code == 200) {
// this.$refs.confirmationPopupUpload.open()
if(self.form.topId && !this.id){
uni.requestPayment({
provider: 'wxpay', // 服务提提供商
timeStamp: res.result.timeStamp, // 时间戳
nonceStr: res.result.nonceStr, // 随机字符串
package: res.result.packageValue,
signType: res.result.signType, // 签名算法
paySign: res.result.paySign, // 签名
success: function (res) {
console.log('支付成功',res);
self.$refs.confirmationPopupUpload.open()
// self.$refs.confirmationPopup.close()
},
fail: function (err) {
console.log('支付失败',err);
self.$refs.confirmationPopup.close()
uni.showToast({
icon:'none',
title:"支付失败"
})
}
});
}else{
self.$refs.confirmationPopupUpload.open()
}
}
})
},
submit() {
if(this.fileListImage.length == 0){
return uni.showToast({
title: '请上传封面',
icon : 'none'
})
}
// if(!this.$utils.verificationPhone(this.form.phone)){
// return uni.showToast({
// title: `请输入正确的手机号`,
// icon : 'none'
// })
// }
if (this.$utils.verificationAll(this.form, {
name: '请输入演员名称',
photographerContent: '请输入演员介绍',
phone: '请输入手机号',
money: '请输入价格',
})) {
return
}
if(this.fileList.length == 0 && this.isVedio){
return uni.showToast({
title: '请上传代表作',
icon : 'none'
})
}
for(let i = 0; i < this.inputs.length; i++){
if(!this.inputs[i].title){
return uni.showToast({
title: `请输入第${i + 1}个代表作的名称`,
icon : 'none'
})
}
}
if(this.form.topId && !this.id){
// 选择付费模式
this.$refs.confirmationPopup.open()
}else{
// 没有选择付费
this.pay()
}
},
confirm() {
// this.$refs.confirmationPopupUpload.close()
// uni.navigateTo({
// url: "/pages/index/index"
// })
uni.navigateBack(-1)
},
}
}
</script>
<style lang="scss" scoped>
.actorRelease {
background-color: #fff;
min-height: 100vh;
font-size: 28rpx;
padding-bottom: 150rpx;
/deep/ .uv-radio {
margin-right: 25rpx;
margin-top: 10rpx;
}
.box {
padding: 0 20rpx;
}
.avatarFace {
width: 150rpx;
height: 150rpx;
// border: 1px solid #000000;
margin-left: 10rpx;
}
.upTop{
margin-top: 40rpx;
.title{
padding-top: 20rpx;
padding-left: 30rpx;
border-top: 1px solid #00000015;
display: flex;
align-items: center;
}
.list{
padding-top: 30rpx;
width: 100%;
.item{
display: flex;
padding: 20rpx;
padding-left: 80rpx;
justify-content: space-between;
width: 600rpx;
border-bottom: 1px solid #00000015;
align-items: center;
}
}
}
.form {
.label {
padding: 20rpx;
}
.form-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
padding-right: 30rpx;
input {
text-align: right;
flex: 1;
}
}
.form-item-content {
padding-right: 30rpx;
padding-top: 30rpx;
.textarea {
padding-left: 20rpx;
}
.upload {
padding-left: 20rpx;
.input{
margin: 20rpx auto;
border: 1px solid #00000022;
padding: 20rpx;
border-radius: 15rpx;
input{
}
}
}
}
}
.confirmationPopup {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 300rpx;
image {
margin-top: 40rpx;
}
.info {
margin-top: 40rpx;
font-size: 26rpx;
}
}
}
</style>