pay-video-applet-uniapp-24-8-22/pages/publish/actorRelease.vue

<template>
	<view class="actorRelease">
		<navbar leftClick @leftClick="$utils.navigateBack" title="演员发布" />


		<view class="avatarFace" @click="uploadImage('image')">
			<image v-if="form.image" :src="form.image" style="width: 100%;height: 100%"></image>
			<image v-else src="../../static/image/+.png" style="width: 100%;height: 100%"></image>
		</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.content" :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="1">
						</uv-radio>
						<uv-radio size="35rpx" icon-size="35rpx" label="经纪人发布" labelSize="28rpx" name="0">
						</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="1">
						</uv-radio>
						<uv-radio size="35rpx" icon-size="35rpx" label="否" labelSize="28rpx" name="0">
						</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>
				<!-- 新版（方法401，暂时注释）） -->
				<!-- <view class="title">
					<uv-icon name="pushpin-fill"></uv-icon>
					是否置顶
				</view>
				<uv-radio-group v-model="form.upTop">
					<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="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: {
					phonePrice: '1',
					upTop: '1',
					createType: '1',
				},
				fileList: [
					// {
					// 	url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
					// },
				],
				fileListImage: [],
				upTopList: [],
			};
		},
		computed: {
			...mapState(['certifiedIndividual']),
		},
		mounted() {
			// this.indexTopPayList()
		},
		methods: {
			indexTopPayList() {
				this.$api('indexTopPayList', res => {
					if (res.code == 200) {
						this.upTopList = res.result
					}
				})
			},
			uploadImage(key) {
				this.$Oss.ossUploadImage({
					success: url => {
						this.$set(this.form, "image", url)
						// this.certifiedIndividual[key] = url
					}
				})
			},


			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 arr = []

				this.fileList.forEach(n => {
					arr.push(n.url)
				})

				let data = {
					...this.form,
					isCard: 1,
					image: arr.join(',')
				}

				this.$api('infoReleaseTrends', data,
					res => {
						if (res.code == 200) {
							this.$refs.confirmationPopupUpload.open()
						}
					})
			},
			submit() {
				console.log("fileList", this.fileList.map((item) => item.url).join(","))
				this.form.magnumOpus = this.fileList.map((item) => item.url).join(",")
				this.$api('publishActor', this.form, res => {
					if (res.code == 200) {
						this.$refs.confirmationPopupUpload.open()
					}
				})
			},
			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;
		}

		.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>