帧视界壹通告,付费看视频的微信小程序
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.
 
 
 

437 lines
9.7 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">
<view class="title">
<uv-icon name="pushpin-fill"></uv-icon>
是否置顶
</view>
<uv-radio-group v-model="form.topId">
<view class="list">
<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"
:name="item.id">
</uv-radio>
</view>
</view>
</view>
</uv-radio-group>
</view>
<view class="form-item-content">
<view class="label">
代表作
</view>
<view class="upload">
<uv-upload :fileList="fileList" :maxCount="5" multiple accept="video" width="150rpx" height="150rpx"
@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
</view>
</view>
</view>
<submit @submit="submit" @preview="preview" @draft="draft" />
<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 {
mapState
} from 'vuex'
export default {
components: {
submit,
confirmationPopup
},
data() {
return {
form: {
money: '',
name : '',
phone : '',
isUser : 'Y',//是否本人发布
phonePay : 'Y',//联系方式是否付费查看
photographerContent : '',//演员介绍
},
fileList: [//代表作
// {
// url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
// },
],
fileListImage: [],//封面
upTopList: [],
};
},
computed : {
topInfo(){
for (var i = 0; i < this.upTopList.length; i++) {
if(this.upTopList[i].id == this.form.topId){
return this.upTopList[i]
}
}
return {}
}
},
onShow() {
this.indexTopPayList()
},
methods: {
// 获取置顶方式
indexTopPayList() {
this.$api('indexTopPayList', res => {
if (res.code == 200) {
this.upTopList = res.result
}
})
},
// 删除图片
deleteImage(e) {
this.fileList.splice(e.index, 1)
},
// 上传作品
afterRead(e) {
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.fileList.push({
url
})
})
})
},
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,
isCard: 1,
isImage : this.fileList.map((item) => item.url).join(","),
image : this.fileListImage.map((item) => item.url).join(","),
isTop : this.form.topId ? 'Y' : 'N',
}
this.$api('publishActor', data,
res => {
if (res.code == 200) {
// this.$refs.confirmationPopupUpload.open()
if(self.form.topId){
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.fileList.length == 0){
return uni.showToast({
title: '请上传代表作',
icon : 'none'
})
}
if (this.$utils.verificationAll(this.form, {
name: '请输入演员名称',
photographerContent: '请输入演员介绍',
phone: '请输入手机号',
money: '请输入价格',
})) {
return
}
if(this.form.topId){
// 选择付费模式
this.$refs.confirmationPopup.open()
}else{
// 没有选择付费
this.pay()
}
},
confirm() {
// this.$refs.confirmationPopupUpload.close()
uni.navigateTo({
url: "/pages/index/index"
})
},
}
}
</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;
}
}
}
.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>