cosmetics_shop_wxapp/loginPages/addEvalute/index.vue

<template>
	<view class="addEvalute">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">评价</view></cu-custom>
		<!-- section -->
		<view class="margin-bottom padding flex bg-white">
			<image class="radius margin-right-sm" style="width: 160upx;height: 160upx;min-width: 160upx;" lazy-load="true" src="https://gd-hbimg.huaban.com/1f50f2135ba51e4b9aa20caef41860b15005c9386f0b-LxqWsh_fw658/format/webp" mode="aspectFit"></image>
			<view style="flex: auto;" class="padding-tb text-black cut">商品名称</view>
		</view>
		<view class="flex bg-white padding-lr padding-top  align-center">
			<view class="text-bold text-black margin-right">商品评价</view>
			<cu-rate :value="3" />
		</view>
		<view class="cu-form-group">
			<textarea
				:value="content"
				style="min-height: 250rpx;"
				auto-focus
				auto-height
				maxlength="300"
				@input="textareaAInput"
				placeholder="产品性价比 / 版型风格 / 尺码大小"
			></textarea>
		</view>
		<view class="bg-white text-right padding">{{ content.length }}/300</view>
		<view class="bg-white padding-lr padding-bottom flex justify-between">
			<view class="text-black">添加图片 / 视频</view>
			<view class="">{{ imgList.length }}/5</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item, index) in imgList" :key="index" @click="ViewImage(item)">
					<image :src="item" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @click.stop="DelImg(index)"><text class="cuIcon-close"></text></view>
				</view>
				<view class="solids" @click="ChooseImage" v-if="imgList.length < 5"><text class="cuIcon-cameraadd"></text></view>
			</view>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">同意遵守平台约定</view>
			<checkbox-group @change="checboxFunc"><checkbox value="root" class="round blue" :checked="'root' | checkboxFilter(checkbox)"></checkbox></checkbox-group>
		</view> -->
		<button @click="submitFunc" style="height: 100rpx;" class="margin cu-btn bg-blue block " :loading="loading">提交评论</button>
		<!-- 工具 -->
		<cu-modalA title="提示" :show.sync="err_show" content="帖子描述不能为空,并且必须遵守平台约定." />
	</view>
</template>

<script>
export default {
	filters: {
		checkboxFilter(value, checkbox) {
			var itemOptions = checkbox.filter(item => item.name == value);
			if (itemOptions.length == 0) return false;
			return itemOptions[0].value;
		}
	},
	computed: {},
	data() {
		return {
			loading: false,
			root: false,
			// 表单
			checkbox: [
				{
					name: 'root',
					value: false
				}
			],
			content: '',
			imgList: [],
			err_show: false
		};
	},
	methods: {
		// 多行文本框输入
		textareaAInput(e) {
			this.content = e.detail.value;
		},

		// 挑选图片
		ChooseImage() {
			uni.chooseMedia({
				count: 5,
				mediaType: ['image', 'video'],
				sourceType: ['album', 'camera'],
				success: res => {
					let len = res.tempFiles.length + this.imgList.length;
					if (len <= 5) this.imgList = this.imgList.concat(res.tempFiles);
				}
			});
		},
		// 预览
		ViewImage(value) {
			uni.previewImage({
				urls: this.imgList,
				current: value
			});
		},
		// 删除指定图片
		DelImg(value) {
			var imgList = JSON.parse(JSON.stringify(this.imgList));
			imgList.splice(value, 1);
			this.imgList = imgList;
		},
		// 提交
		async submitFunc() {
			this.loading = true;
			try {
				if (!this.content || !this.checkbox[0].value) {
					this.err_show = true;
					return false;
				}
				// 上传图片
				var imgList = this.imgList.map(item => {
					// 文件名称
					let fileName = item.lastIndexOf('/');
					fileName = item.substring(fileName + 1, item.length);
					fileName = new Date().getDate() + '_' + fileName;
					return uniCloud.uploadFile({
						filePath: item,
						cloudPath: fileName,
						fileType: 'image'
					});
				});
				var result = await Promise.all(imgList);
				// 处理远程图片路径
				// https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1ae627f1-d0fe-43cf-a7a6-6f30c5e8aadc/XXX.png
				result = result.map(item => item.fileID.substring(item.fileID.lastIndexOf('/') + 1, item.fileID.length));
				var inviation = this.$store.state.inviation || [];
				// var res=await api.uploadItem({imgList:result,content:this.content,_id:this.$store.state._id,inviation});
				if (res.result.code == 1) throw res.result.msg;
				if (res.result.inviation_id) {
					inviation.unshift(res.result.inviation_id);
					this.$store.dispatch('userInfo', { inviation });
				}
				uni.navigateBack({
					delta: 1
				});
			} catch (err) {
				console.log(err);
			} finally {
				this.loading = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.addEvalute{
		.cut{
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	}
</style>