code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-21 10:25:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve code

Browse Source
This commit is contained in:
paulGao
2022-03-31 09:26:24 +08:00
parent 48668fd2d4
commit 1e8279c849
12 changed files with 154 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
View File

@@ -3,8 +3,9 @@
<div class="title">
<card _Title="评价详情" :_Size="16"></card>
<p>
<span class="color999">创建人：</span><span>{{orderGoods.createBy | secrecyMobile}}</span>
<span class="color999 ml_20">{{orderGoods.createTime}}</span>
<span class="color999">创建人：</span
><span>{{ orderGoods.createBy | secrecyMobile }}</span>
<span class="color999 ml_20">{{ orderGoods.createTime }}</span>
</p>
</div>
<!-- 物流评分、服务评分 -->
@@ -13,31 +14,64 @@
<div class="color999">
<span>物流评价：<Rate disabled :value="Number(orderGoods.deliveryScore)" /></span>
<span>服务评价：<Rate disabled :value="Number(orderGoods.serviceScore)" /></span>
<span>服务评价：<Rate disabled :value="Number(orderGoods.descriptionScore)" /></span>
<span
>服务评价：<Rate disabled :value="Number(orderGoods.descriptionScore)"
/></span>
</div>
</div>
<!-- 添加订单评价 左侧商品详情 右侧评价框 -->
<ul class="goods-eval">
<li >
<li>
<div class="goods-con">
<img :src="orderGoods.goodsImage" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
<p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
<img
:src="orderGoods.goodsImage"
class="hover-pointer"
alt=""
width="100"
@click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)"
/>
<p
class="hover-pointer color999"
@click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)"
>
{{ orderGoods.goodsName }}
</p>
</div>
<div class="eval-con">
<div>
<span class="color999">商品评价：</span>
<RadioGroup style="margin-bottom:5px;color:#999" v-model="orderGoods.grade" type="button" button-style="solid">
<RadioGroup
style="margin-bottom: 5px; color: #999"
v-model="orderGoods.grade"
type="button"
button-style="solid"
>
<Radio label="GOOD" disabled>好评</Radio>
<Radio label="MODERATE" disabled>中评</Radio>
<Radio label="WORSE" disabled>差评</Radio>
</RadioGroup>
<Input type="textarea" maxlength="500" readonly show-word-limit :rows="4" v-model="orderGoods.content" />
<Input
type="textarea"
maxlength="500"
readonly
show-word-limit
:rows="4"
v-model="orderGoods.content"
/>
</div>
<div style="display:flex;align-items:center;">
<div>
<span class="color999">商家回复：</span>
<span>{{ orderGoods.reply }}</span>
</div>
<div style="display: flex; align-items: center">
<template v-if="orderGoods.images">
<div class="demo-upload-list" v-for="(img, index) in orderGoods.images.split(',')" :key="index">
<img :src="img">
<div
class="demo-upload-list"
v-for="(img, index) in orderGoods.images.split(',')"
:key="index"
>
<img :src="img" />
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
</div>
@@ -48,44 +82,47 @@
</li>
</ul>
<Modal title="View Image" v-model="visible">
<img :src="previewImage" v-if="visible" style="width: 100%">
<img :src="previewImage" v-if="visible" style="width: 100%" />
</Modal>
</div>
</template>
<script>
import { evaluationDetail } from '@/api/member.js';
import { evaluationDetail } from "@/api/member.js";
export default {
data () {
data() {
return {
order: {}, // 订单详情
orderGoods: {}, // 订单商品
visible: false, // 图片预览
previewImage: '', // 预览图片链接
loading: false // 加载状态
}
previewImage: "", // 预览图片链接
loading: false, // 加载状态
};
},
methods: {
getDetail () { // 获取评价详情
evaluationDetail(this.$route.query.id).then(res => {
if (res.success) this.orderGoods = res.result
})
getDetail() {
// 获取评价详情
evaluationDetail(this.$route.query.id).then((res) => {
if (res.success) this.orderGoods = res.result;
});
},
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
goGoodsDetail(skuId, goodsId) {
// 跳转商品详情
let routerUrl = this.$router.resolve({
path: '/goodsDetail',
query: {skuId, goodsId}
})
window.open(routerUrl.href, '_blank')
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routerUrl.href, "_blank");
},
handleView (name) { // 预览图片
handleView(name) {
// 预览图片
this.previewImage = name;
this.visible = true;
}
},
},
mounted () {
this.getDetail()
}
}
mounted() {
this.getDetail();
},
};
</script>
<style lang="scss" scoped>
.delivery-rate {
@@ -94,12 +131,12 @@ export default {
margin-top: 20px;
height: 50px;
border-bottom: 1px solid #eee;
>div:nth-child(1) {
> div:nth-child(1) {
width: 120px;
font-weight: bold;
}
}
.goods-eval li{
.goods-eval li {
display: flex;
border-bottom: 1px solid #eee;
@@ -109,7 +146,9 @@ export default {
text-align: center;
p {
word-wrap: wrap;
&:hover{ color: $theme_color; }
&:hover {
color: $theme_color;
}
}
}
.eval-con {
@@ -118,7 +157,7 @@ export default {
}
}
.demo-upload-list{
.demo-upload-list {
display: inline-block;
width: 60px;
height: 60px;
@@ -129,27 +168,27 @@ export default {
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
margin-top: 10px;
}
.demo-upload-list img{
.demo-upload-list img {
width: 100%;
height: 100%;
}
.demo-upload-list-cover{
.demo-upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
.demo-upload-list:hover .demo-upload-list-cover {
display: block;
}
.demo-upload-list-cover i{
.demo-upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
@@ -157,14 +196,14 @@ export default {
}
.icon-upload {
width: 58px;
height:58px;
height: 58px;
line-height: 58px;
text-align:center;
text-align: center;
display: inline-block;
border:1px dashed #999;
border: 1px dashed #999;
border-radius: 4px;
margin-top: 10px;
&:hover{
&:hover {
cursor: pointer;
border-color: $theme_color;
}