youngee_c_web_v2/pages/workspace/uploaddata.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view @click="toRecord()">
			<view style="display: flex;justify-content: center;">
				<image style="height: 60rpx;width: 60rpx;" src="../../static/img/icon-clock.png"></image>
			</view>
			<view style="display: flex;justify-content: center;">
				<p style="font-size: 30rpx;">查看修改/反馈记录</p>
			</view>
		</view>
		<view v-if="!loading && !onlyShow">
			<view style="margin: 40rpx;">
				<uni-forms :modelValue="formData" validate-trigger="bind" err-show-type="undertext" label-width="150">
					<uni-forms-item name="play_number" label="小眼睛阅读数/播放量">
						<uni-easyinput type="number" v-model="playsCount" :inputBorder="false" placeholder="输入"
							v-if="playsCountInfo === 1" @input="onInput1">
						</uni-easyinput>
						<uni-easyinput type="digit" v-model="playsCount" :inputBorder="false" placeholder="输入" v-else @input="onInput2">
						</uni-easyinput>
						<picker @change="bindPickerChange1" :value="index" :range="Range" range-key="label">
							<view>{{ playsLabel }}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="like_number" label="点赞数">
						<uni-easyinput type="number" v-model="likesCount" :inputBorder="false" placeholder="输入"
							v-if="likesCountInfo === 1" @input="onInput3">
						</uni-easyinput>
						<uni-easyinput type="digit" v-model="likesCount" :inputBorder="false" placeholder="输入" v-else @input="onInput4">
						</uni-easyinput>
						<picker @change="bindPickerChange2" :value="index2" :range="Range" range-key="label">
							<view>{{ likesLabel }}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="collect_number" label="收藏数">
						<uni-easyinput type="number" v-model="collectsCount" :inputBorder="false" placeholder="输入"
							v-if="collectsCountInfo === 1" @input="onInput5">
						</uni-easyinput>
						<uni-easyinput type="digit" v-model="collectsCount" :inputBorder="false" placeholder="输入" v-else @input="onInput6">
						</uni-easyinput>
						<picker @change="bindPickerChange3" :value="index3" :range="Range" range-key="label">
							<view>{{ collectsLabel }}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="comment_number" label="评论数">
						<uni-easyinput type="number" v-model="commentsCount" :inputBorder="false" placeholder="输入"
							v-if="commentsCountInfo === 1" @input="onInput7">
						</uni-easyinput>
						<uni-easyinput type="digit" v-model="commentsCount" :inputBorder="false" placeholder="输入" v-else @input="onInput8">
						</uni-easyinput>
						<picker @change="bindPickerChange4" :value="index4" :range="Range" range-key="label">
							<view>{{ commentsLabel }}</view>
						</picker>
					</uni-forms-item>
				</uni-forms>
			</view>

			<view style="margin: 0 40rpx;">
				<p style="font-size: 14px;margin-bottom: 20rpx;">上传小眼睛阅读数/播放量截图</p>
				<htz-image-upload :max="1" mediaType="image" name="file" :chooseNum="1" v-model="imageData"
					@chooseSuccess="ceshiChooseSuccess1">
				</htz-image-upload>
			</view>

			<view class="signup">
				<button type="default" class="but1" :loading="loading" @click="submit()">
					提交数据</button>
			</view>
		</view>

		<view v-if="!loading && onlyShow">
			<view style="margin: 20rpx;">
				<view style="display: flex;margin-bottom: 10rpx;">
					<view style="width: 400rpx;">小眼睛阅读数/播放量</view>
					<view style="border: 1rpx;">{{formData.show_play_number}}</view>
				</view>
				<view style="display: flex;margin-bottom: 10rpx;">
					<view style="width: 400rpx;">点赞数</view>
					<view style="border: 1rpx;">{{formData.show_like_number}}</view>
				</view>
				<view style="display: flex;margin-bottom: 10rpx;">
					<view style="width: 400rpx;">收藏数</view>
					<view style="border: 1rpx;">{{formData.show_collect_number}}</view>
				</view>
				<view style="display: flex;margin-bottom: 10rpx;">
					<view style="width: 400rpx;">评论数</view>
					<view style="border: 1rpx;">{{formData.show_comment_number}}</view>
				</view>
				<!-- 图片 -->

				<view style="margin-top: 10rpx;">
					<p>小眼睛阅读数/播放量截图</p>
					<image :src="imageData" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
	import getPolicyEncode from '@/components/obs/getPolicy.js';
	import getSignature from '@/components/obs/GetSignature.js';
	import {
		fansview
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar,
			htzImageUpload,
		},
		data() {
			return {
				onlyShow: false,
				loading: true,
				navH: getApp().globalData.navHeight,
				taskId: "",
				dataStatus: "",
				imageData: [],
				formData: {
					play_number: "",
					like_number: "",
					collect_number: "",
					commet_number: "",
					show_play_number: "",
					show_like_number: "",
					show_collect_number: "",
					show_commet_number: "",
				},

				index1: 0,
				playsLabel: "个",
				playsCount: 0,
				playsCountInfo: 1,
				index2: 0,
				likesLabel: "个",
				likesCount: 0,
				likesCountInfo: 1,
				index3: 0,
				collectsLabel: "个",
				collectsCount: 0,
				collectsCountInfo: 1,
				index4: 0,
				commentsLabel: "个",
				commentsCount: 0,
				commentsCountInfo: 1,
				Range: [{
						value: 1,
						label: '个'
					},
					{
						value: 10000,
						label: '万'
					},
					{
						value: 100000000,
						label: '亿'
					}
				],



				// rules: {
				// 	// 对play_number字段进行必填验证
				// 	play_number: {
				// 		rules: [{
				// 				required: true,
				// 				errorMessage: '10位以内的数字',
				// 			},
				// 			{
				// 				minLength: 1,
				// 				maxLength: 10,
				// 				errorMessage: '10位以内的数字',
				// 			}
				// 		]
				// 	},
				// 	// 对like_number字段进行必填验证
				// 	like_number: {
				// 		rules: [{
				// 				required: true,
				// 				errorMessage: '10位以内的数字',
				// 			},
				// 			{
				// 				minLength: 1,
				// 				maxLength: 10,
				// 				errorMessage: '10位以内的数字',
				// 			}
				// 		]
				// 	},
				// 	// 对collect_number字段进行必填验证
				// 	collect_number: {
				// 		rules: [{
				// 				required: true,
				// 				errorMessage: '10位以内的数字',
				// 			},
				// 			{
				// 				minLength: 1,
				// 				maxLength: 10,
				// 				errorMessage: '10位以内的数字',
				// 			}
				// 		]
				// 	},
				// 	// 对comment_number字段进行必填验证
				// 	comment_number: {
				// 		rules: [{
				// 				required: true,
				// 				errorMessage: '10位以内的数字',
				// 			},
				// 			{
				// 				minLength: 1,
				// 				maxLength: 10,
				// 				errorMessage: '10位以内的数字',
				// 			}
				// 		]
				// 	}
				// },
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "上传数据",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},

		onLoad(options) {
			let data = options.textObj.replace(/""/g, "");
			data = JSON.parse(decodeURIComponent(data))
			this.taskId = data.taskId
			this.dataStatus = data.dataStatus
			this.getData()
		},
		methods: {
			async getData() {
				this.loading = true
				uni.showLoading({
					title: '加载中'
				});
				await this.$https.get('/youngee/c/t/g/get-unsubmit-task-data' +
						"?" +
						"task_id" +
						"=" +
						this.taskId)
					.then(res => {
						console.log(res)
						if (res.data.data != null) {
							this.onlyShow = true
							this.formData.play_number = res.data.data.play_number
							this.formData.like_number = res.data.data.like_number
							this.formData.collect_number = res.data.data.collect_number
							this.formData.comment_number = res.data.data.comment_number
							this.formData.show_play_number = fansview(this.formData.play_number)
							this.formData.show_like_number = fansview(this.formData.like_number)
							this.formData.show_collect_number = fansview(this.formData.collect_number)
							this.formData.show_comment_number = fansview(this.formData.comment_number)
							this.imageData.push(res.data.data.photo_url)
						}
					})
				uni.hideLoading();
				this.loading = false
			},
			toRecord() {
				var data = {
					taskId: this.taskId,
				};
				data = JSON.stringify(data)
				uni.navigateTo({
					url: '/pages/workspace/datarecord?textObj=' + encodeURIComponent(data)
				});
			},

			submit() {
				// 校验
				this.formData.play_number = this.playsCount * this.playsCountInfo
				if (parseInt(this.formData.plays_count) === 0) {
					uni.showToast({
						title: '请输入正确数量',
						icon: 'none'
					})
					return
				}
				this.formData.like_number = this.likesCount * this.likesCountInfo
				if (parseInt(this.formData.likes_count) === 0) {
					uni.showToast({
						title: '请输入正确数量',
						icon: 'none'
					})
					return
				}
				this.formData.collect_number = this.collectsCount * this.collectsCountInfo
				if (parseInt(this.formData.collects_count) === 0) {
					uni.showToast({
						title: '请输入正确数量',
						icon: 'none'
					})
					return
				}
				this.formData.comment_number = this.commentsCount * this.commentsCountInfo
				if (parseInt(this.formData.comments_count) === 0) {
					uni.showToast({
						title: '请输入正确数量',
						icon: 'none'
					})
					return
				}

				if (this.imageData.length == 0) {
					uni.showToast({
						title: "请上传正确的截图",
						icon: 'none'
					})
					return
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '提交后无法修改并进行审核，确认提交？',
					success: async function(res) {
						if (res.confirm) {
							// 调用添加数据接口
							await that.$https.post('/youngee/c/t/p/add-task-data', {
									task_id: that.taskId,
									play_number: that.formData.play_number,
									like_number: that.formData.like_number,
									collect_number: that.formData.collect_number,
									comment_number: that.formData.comment_number,
									photo_url: that.imageData[0],
								})
								.then(res => {
									console.log(res)
								})
							await that.$https.get('/youngee/c/t/g/submit-task-data' +
									"?" +
									"task_id" +
									"=" +
									that.taskId)
								.then(res => {
									console.log(res)
								})
							uni.navigateBack()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			ceshiChooseSuccess1(tempFilePaths, e) { //选择图片返回
				console.log('ceshiChooseSuccess', tempFilePaths, e);
				if (e == 0) {
					this.store = 'talent_upload/' + this.guid() + '.png'
				} else if (e == 1) {
					this.store = 'talent_upload/' + this.guid() + '.mp4'
				}
				/****************
				以下代码是自定义上传逻辑，仅供参考
				***************/
				this.imgUpload1(tempFilePaths);
				/*******************************/
				console.log("imgdata" + this.imageData)
			},
			imgUpload1(tempFilePaths) {
				let that = this
				console.log('imgUpload', tempFilePaths)
				let config = {
					AccessKeyId: 'IVW21DTGIIUBBAGXKK0Y', //AK
					SecretKey: 'Y01nEQNcLOATMw7uJwrk3yOdQZ2fqLhSnXcOKVDE', //SK
					EndPoint: 'https://horastar.obs.cn-east-3.myhuaweicloud.com', //上传文件的路径
				};
				let fileName = this.store; //指定上传到OBS桶中的对象名
				// let fileName = "talent_upload/icon-arrow-right.png"
				let OBSPolicy = { //设定policy内容
					"expiration": "2089-12-31T12:00:00.000Z",
					"conditions": [{
							"bucket": "horastar"
						}, //Bucket name
						// {"bucket": "goin"}, 
						{
							'key': fileName
						}
					]
				}

				let policyEncoded = getPolicyEncode(OBSPolicy); //计算policy编码值
				let signature = getSignature(policyEncoded, config.SecretKey); //计算signature 
				uni.uploadFile({
					//url: config.EndPoint,
					url: config.EndPoint,
					filePath: tempFilePaths[0],
					name: 'file',

					formData: {
						'AccessKeyID': config.AccessKeyId,
						'policy': policyEncoded,
						'signature': signature,
						'key': fileName,
					},

					success: function(res) {
						console.log(res.statusCode); //打印响应状态码
						if (res.statusCode == '204') {
							that.imageData.push(config.EndPoint + '/' + fileName);
							console.log('上传图片成功', res)
							let obs_url = config.EndPoint + '/' + fileName; //用你自己的 bucket 名替换星号
							console.log(obs_url)
							// that.formData.home_img = obs_url
							uni.showToast({
								title: '上传成功',
								icon: '成功'
							});
						} else {
							console.log('上传图片失败', res)
							uni.showToast({
								title: '上传失败',
								icon: '失败'
							});
						}
					},
					fail: function(e) {
						console.log(e);
						uni.showToast({
							title: '上传失败22222',
							icon: '失败'
						});
					}
				})
			},
			guid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},
			// 量级选择
			bindPickerChange1: function(e) {
				this.index1 = e.detail.value;
				this.playsLabel = this.Range[this.index1].label
				this.playsCountInfo = this.Range[this.index1].value
				console.log(this.playsCountInfo, this.playsLabel)
			},
			// 量级选择
			bindPickerChange2: function(e) {
				this.index2 = e.detail.value;
				this.likesLabel = this.Range[this.index2].label
				this.likesCountInfo = this.Range[this.index2].value
				console.log(this.likesCountInfo, this.likesLabel)
			},
			// 量级选择
			bindPickerChange3: function(e) {
				this.index3 = e.detail.value;
				this.collectsLabel = this.Range[this.index3].label
				this.collectsCountInfo = this.Range[this.index3].value
				console.log(this.collectsCountInfo, this.collectsLabel)
			},
			// 量级选择
			bindPickerChange4: function(e) {
				this.index4 = e.detail.value;
				this.commentsLabel = this.Range[this.index4].label
				this.commentsCountInfo = this.Range[this.index4].value
				console.log(this.commentsCountInfo, this.commentsLabel)
			},
			onInput1(e) {
				console.log(e)
				e = e.replace(/\D/g, '')
				// e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				this.$nextTick(() => {
					this.playsCount = e
				})
			},
			onInput2(e) {
				console.log(e)
				e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				this.$nextTick(() => {
					this.playsCount = e
				})
			},
			onInput3(e) {
				console.log(e)
				e = e.replace(/\D/g, '')
				// e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				this.$nextTick(() => {
					this.likesCount = e
				})
			},
			onInput4(e) {
				console.log(e)
				e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				this.$nextTick(() => {
					this.likesCount = e
				})
			},
			onInput5(e) {
				console.log(e)
				e = e.replace(/\D/g, '')
				// e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				this.$nextTick(() => {
					this.collectsCount = e
				})
			},
			onInput6(e) {
				console.log(e)
				e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				this.$nextTick(() => {
					this.collectsCount = e
				})
			},
			onInput7(e) {
				console.log(e)
				e = e.replace(/\D/g, '')
				// e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				this.$nextTick(() => {
					this.commentsCount = e
				})
			},
			onInput8(e) {
				console.log(e)
				e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				this.$nextTick(() => {
					this.commentsCount = e
				})
			}
		}
	}
</script>
<style>
	/deep/ .uni-forms-item__content {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between;
	}
</style>
<style lang="scss" scoped>
	.signup {
		box-shadow: 0rpx 5rpx 40rpx #ccc;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 90rpx;
		padding-top: 2%;
		background-color: #FFFFFF;
	}

	.but1 {
		width: 60%;
		background-color: #f2d22d;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 200%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 80%;

		&.on {
			background-color: #C0C0C0;

		}

	}
</style>