dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMyOrderEvaluate.vue

<template>
	<div class="userCenterMyOrderEvaluate">
		<div class="title">
			{{ $i18n.locale == 'zh' ? '订单评价' : 'Order evaluate' }}
		</div>
		<div class="orderMessage">
			<div class="header">
				<span>
					{{ $i18n.locale === 'zh' ? '商品信息' : 'Product information' }}
				</span>
			</div>
			<div class="content">
				<el-table
					:data="[orderDetail]"
					style="width: 100%"
					:header-cell-style="{ backgroundColor: '#f8f8f8' }"
				>
					<el-table-column
						prop="commodityName"
						align="center"
						:label="$i18n.locale === 'zh' ? '商品名称' : 'Commodity Name'"
						width="200"
					>
						<!-- <template slot-scope="scope">
              <div>
                <span style="font-weight: 600">{{ scope.row.tradeName }}</span>
              </div>
              <div>
                {{ $i18n.locale === "zh" ? "规格：" : "specifications: "
                }}{{ scope.row.specifications }}
              </div>
              <div>
                {{ $i18n.locale === "zh" ? "下单时间：" : "order time: "
                }}{{ scope.row.orderTime | time("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </template> -->
					</el-table-column>
					<el-table-column
						prop="point"
						align="center"
						:label="$i18n.locale === 'zh' ? '积分' : 'Integral'"
						width="200"
					>
					</el-table-column>
					<el-table-column
						prop="exchangeQuantity"
						align="center"
						:label="$i18n.locale === 'zh' ? '数量' : 'Number'"
						width="200"
					>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$i18n.locale === 'zh' ? '创建时间' : 'Create Time'"
						width="200"
					>
						<template slot-scope="scope">
							<div>
								{{ orderDetail.createDate | time('YYYY-MM-DD HH:mm:ss') }}
							</div>
						</template>
					</el-table-column>
					<el-table-column
						prop="point"
						align="center"
						:label="$i18n.locale === 'zh' ? '实付积分' : 'Pay Points'"
						width="184"
					>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="orderEvaluate">
			<div class="header">
				<span>
					{{ $i18n.locale === 'zh' ? '商品评价' : 'Evaluate' }}
				</span>
			</div>
			<div class="content">
				<el-form :model="evaluate" label-width="135px">
					<el-form-item
						:label="$i18n.locale === 'zh' ? '商品打分' : 'Commodity Score'"
					>
						<el-radio-group v-model="evaluate.resource">
							<el-radio label="1">{{
								$i18n.locale === 'zh' ? '一星' : 'One Star'
							}}</el-radio>
							<el-radio label="2">{{
								$i18n.locale === 'zh' ? '二星' : 'Two Star'
							}}</el-radio>
							<el-radio label="3">{{
								$i18n.locale === 'zh' ? '三星' : 'Three Star'
							}}</el-radio>
							<el-radio label="4">{{
								$i18n.locale === 'zh' ? '四星' : 'Four Star'
							}}</el-radio>
							<el-radio label="5">{{
								$i18n.locale === 'zh' ? '五星' : 'Five Star'
							}}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item
						:label="$i18n.locale === 'zh' ? '评价内容' : 'Evaluation Content'"
					>
						<el-input type="textarea" v-model="evaluate.desc"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="cancel">{{
							$i18n.locale === 'zh' ? '取消' : 'Cancel'
						}}</el-button>
						<el-button type="primary" @click="onSubmit">
							{{ $i18n.locale === 'zh' ? '发布' : 'Publish' }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment'
import { getToken } from '@/api/token'
import { orderDetails, orderReview } from '@/api/user'
export default {
	name: 'userCenterMyOrderEvaluate',
	data() {
		return {
			userOrder: this.$route.query.key,
			evaluate: {
				resource: '',
				desc: '',
				checked: '',
			},
			orderDetail: [],
		}
	},
	filters: {
		time(date, type) {
			return moment(date).format(type)
		},
	},
	mounted() {
		this.toGetOrderDetails()
	},
	methods: {
		//	获取订单详情
		toGetOrderDetails() {
			let orderId = this.userOrder.id
			orderDetails(orderId)
				.then((res) => {
					this.orderDetail = res.data.order
					console.log(this.orderDetail, '商品评论')
				})
				.catch((error) => {})
		},
		// 提交
		onSubmit() {
			let params = {
				commodityId: this.orderDetail.commodityId, // 商品id
				orderId: this.userOrder.id, // 订单id
				commodityMark: this.evaluate.resource, // 星级
				comment: this.evaluate.desc, // 评价内容
			}
			let orderNo = this.orderDetail.orderNo
			console.log(params)
			getToken().then((res) => {
				orderReview(
					JSON.stringify(params),
					JSON.stringify(orderNo),
					res.data
				).then((res) => {
					console.log(res)
				})
			})
			if (this.$i18n.locale === 'zh') {
				this.$message.success('发布成功')
			} else {
				this.$message.success('Publish successfully')
			}
			this.$router.push('userCenterMyOrder')
		},
		// 取消
		cancel() {
			this.$router.push('userCenterMyOrder')
		},
	},
}
</script>

<style scoped lang="less">
.userCenterMyOrderEvaluate {
	width: 100%;
	background: #fff;
	min-height: 800px;

	.title {
		height: 60px;
		line-height: 60px;
		padding-top: 30px;
		margin-left: 30px;
		margin-right: 30px;
		border-bottom: 1px solid rgba(228, 228, 228, 1);
	}

	.orderMessage {
		.header {
			width: 100%;
			height: 60px;
			padding-left: 30px;
			box-sizing: border-box;
			background-color: #e4e4e4;

			span {
				font-size: 14px;
				line-height: 60px;
			}
		}
	}

	.orderEvaluate {
		margin-top: 20px;
		.header {
			width: 100%;
			height: 60px;
			padding-left: 30px;
			box-sizing: border-box;
			background-color: #e4e4e4;

			span {
				font-size: 14px;
				line-height: 60px;
			}
		}
		.content {
			margin-top: 10px;
		}
	}
}
</style>