nherp-shop/pages/views/order/evaluate/evaluate.vue

<template>
	<view>
		<view class="evaluate" :class="['theme', themeObj.name]">
			<view class="goods_data">
				<image :src="goodData.url" mode=""></image>
				<view class="right">
					<p class="goods_name">{{goodData.goodsName}}</p>
					<p class="goods_sku">{{goodData.specs}}</p>
					<p class="goods_price">
						
						<text class="price-text" >￥{{goodData.price}}</text>
						<text style="font-size: 28upx;">x{{goodData.goodsNo}} /{{ goodData.unit }}</text>
					</p>
				</view>
			</view>
			<view class="Rate">
				<p>商品评分</p>
				<view class="star" v-for="star in starsBox1" :key="star.name">
					<image 
					 :src="
					 item <= star.num ?
					starImg
					 :
					 starNoImg
					 " 
					 mode="" 
					v-for="(item,index) in starNum" :key="index" @click="setStar1(item, star)"></image>
				</view>
			</view>
			<view class="pingjia_box">
				<textarea placeholder="说说您的感受..." maxlength="-1" v-model="content" :disabled="!!commit" />
				</view>
			<view class="Rate">
				<p>综合评分</p>
				<view class="star" v-for="_star in starsBox" :key="_star.name">
					{{ _star.name }}：
					<image 
					:src="
					item <= _star.num ?
					starImg
					:
					starNoImg
					" 
						mode="" 
						v-for="item in starNum" 
						:key="item" 
					@click="setStar1(item, _star, 'more')"></image>
				</view>
				
			</view>
		
		<fileList v-model="imgUrl" :show-colse-btn="fileListFlag.showCloseBtn"></fileList>
	</view>
	<view class="btns" :style="{background:colors}" @click="submit" v-if="!commit">提交评价</view>
	

	</view>
</template>
<script>
import { getSalesGoodsItem, getToken, getUserInfo, removeToken, removeUserInfo, rmSalesGoodsItem } from '@/utils/auth';
import { addCommit, getCommit, uploadFile } from '@/api';
import fileList from '@/pages/commponent/public/fileList.vue'
import CONFIG from '@/config'
import { getFileList } from '@/utils/util.js'
var app = getApp();
export default {
	components: {
		fileList
	},
	data() {
		return {
			content:'',
			colors:'',
			themeObj: app.globalData.themeObj,
			goodData:{},
			imgUrl:[],//模拟上传后从后台获得的图片和视频
			starNoImg:'/static/images/home/star-no.png',
			starImg:'/static/images/home/stars.png',
			starNum: 5,
			imgNum: 5,
			commit: null,
			fileListFlag: {
				showCloseBtn: false,
				showAddBtn: false
			},
			starsBox1: [
				{
					name: '商品评价',
					num: 0
				}
				
			],
			starsBox: [
				{
					name: '推荐',
					num: 0
				},
				{
					name: '物流',
					num: 0
				},
				{
					name: '服务',
					num: 0
				}
			]
		};
	},
	created() {},
	onLoad(options) {
		const id = options.id !== '0' ? options.id : '0'
		this.getCommit(id)
		
	},
	methods: {
		getCommit(id) {
			const goodData = getSalesGoodsItem()
			this.setData({
				colors: app.globalData.newColor,
				goodData
			});
			const hasId = id !== '0'
			this.fileListFlag.showCloseBtn = !hasId
			if (hasId) {
				uni.showLoading()
				getCommit({ id }).then(res => {
					uni.hideLoading()
					this.commit = res.result
		
					const imgUrl = getFileList(this.commit.url)
					this.starsBox1[0].num = this.commit.qualityScore
					 this.starsBox[0].num = this.commit.suggestScore
					 this.starsBox[1].num = this.commit.deliveryScore
					 this.starsBox[2].num = this.commit.serviceScore
					 this.content = this.commit.content
					 this.imgUrl = imgUrl
				})
			}
		},
		setStar1(index, item, type = 'box1') {
			if (this.commit) {
				return
			}
			item.num = index
			if (type === 'box1') {
				this.starsBox1 = [...this.starsBox1]
				return
			}
			this.starsBox = [...this.starsBox]
		},
		submit(){ //提交时需要对存储图片和视频的数组进行操作 把视频和图片分离出来
		  if (this.content.length < 2) {
			  this.$toast('评价字数不少于2个字')
			  return
		  }
		  if (this.starsBox1[0].num < 1 || this.starsBox.some(v => v.num < 1)) {
			   this.$toast('您忘记评分了')
			  return
		  }
		  const params = {
			   "orderId": this.goodData.orderId,
			  "content": this.content,
			"goodId": this.goodData.goodsId,
			"goodsName": this.goodData.goodsName,
			  "qualityScore": this.starsBox1[0].num,
			 "suggestScore": this.starsBox[0].num,
			 "deliveryScore": this.starsBox[1].num, 
			  "serviceScore": this.starsBox[2].num,
			  "url": this.imgUrl.length > 0 ? this.imgUrl.map(v => v._url).join(',') : '',
			  "userId": getUserInfo().id,
			  "userName": getUserInfo().username
			}
			uni.showLoading({
				mask:true
			})
			addCommit(params).then(res => {
				uni.hideLoading()
				if (res.result) {
					this.$toast('评价成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				} else {
					this.$toast(res.message)
					
				}
			})
		},
	},
	onShow() {
		
	}
};
</script>

<style lang="scss" scoped>
@import "./evaluate.scss";

page{
		background-color: #F8F8F8;
	}
</style>