mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-18 08:25:55 +08:00
commit message
This commit is contained in:
Chopper
241
pages/order/evaluate/againEvaluate.vue
Normal file
241
pages/order/evaluate/againEvaluate.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<view class="page-main">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view>
|
||||
<view class="goods-item-view">
|
||||
<view class="goods-img"><u-image width="131rpx" height="131rpx" :src="order.goods_img"></u-image></view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ order.goodsName }}</view>
|
||||
<view class="goods-specs">/</view>
|
||||
<view class="goods-price"></view>
|
||||
</view>
|
||||
<view class="goods-num"><view></view></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="info-cell">
|
||||
<view class="info-cell-title">初评日期：{{ $u.timeFormat(order.create_time, 'yyyy-mm-dd') }}</view>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<view class="info-cell-title">初评评价：{{ order.grade_str }}</view>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<view class="info-cell-title">初评内容：{{ order.content }}</view>
|
||||
</view>
|
||||
<view class="info-cell"><view class="info-cell-title">初评审核状态：您的初评审核通过</view></view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="input-view">
|
||||
<u-input
|
||||
height="200"
|
||||
placeholder-style="font-size:12px;color:#CCCCCC"
|
||||
v-model="form[0].content"
|
||||
:type="type"
|
||||
maxlength="500"
|
||||
:border="border"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-num">
|
||||
<text>{{ form[0].content.length }}/{{ maxlength }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="images-view"><u-upload :action="action" width="150" @on-uploaded="onUploaded" :max-count="5"></u-upload></view>
|
||||
</view>
|
||||
<view class="submit-view"><u-button shape="circle" style="background-color: #1abc9c;color: #ffffff;" @click="onSubmit">提交</u-button></view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { commentsOrder, AppendCommentsOrder } from '@/api/members.js';
|
||||
import { upload } from '@/api/common.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
type: 'textarea',
|
||||
border: false,
|
||||
maxlength: 500,
|
||||
placeholder: '对评价进行补充，更客观，更全面',
|
||||
order: {},
|
||||
form: [],
|
||||
action: upload
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.order = JSON.parse(options.order);
|
||||
console.log(this.order);
|
||||
let sku = {
|
||||
comment_id: this.order.comment_id,
|
||||
content: '',
|
||||
grade: this.order.grade,
|
||||
images: [],
|
||||
sku_id: this.order.sku_id
|
||||
};
|
||||
this.form.push(sku);
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
AppendCommentsOrder(this.form).then(res => {
|
||||
if(res.statusCode == 200){
|
||||
this.$refs.uToast.show({
|
||||
title: '发布追评成功',
|
||||
type: 'success',
|
||||
url: '/pages/order/evaluate/myEvaluate'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
onUploaded(lists) {
|
||||
let images = [];
|
||||
lists.forEach(item => {
|
||||
images.push(item.response.url);
|
||||
});
|
||||
this.form[0].images = images;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #f4f4f5;
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20rpx;
|
||||
.header-text {
|
||||
background-color: #f4f4f5;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
.seller-name {
|
||||
color: #fa3534;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 30rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
.goods-img {
|
||||
}
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #ff5a10;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.after-num {
|
||||
margin: 0rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
.goods-evaluate-view {
|
||||
margin-top: 8rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 5rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.goods-view {
|
||||
width: 250rpx;
|
||||
}
|
||||
.rate-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.rate-btn {
|
||||
margin: 0rpx 35rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-evaluate-view {
|
||||
margin: 20rpx 0;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
color: #666666;
|
||||
align-items: center;
|
||||
.input-view {
|
||||
width: 100%;
|
||||
}
|
||||
.input-num {
|
||||
color: #cccccc;
|
||||
text-align: right;
|
||||
}
|
||||
.images-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.info-header {
|
||||
font-size: 33rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.seller-rate-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.rate-title {
|
||||
width: 150rpx;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
}
|
||||
.info-cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 8rpx 0rpx;
|
||||
}
|
||||
}
|
||||
.submit-view {
|
||||
margin-top: 100rpx;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
.uni-textarea-wrapper {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.u-hairline-border:after{
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
272
pages/order/evaluate/evaluateDetail.vue
Normal file
272
pages/order/evaluate/evaluateDetail.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="exaluate-member-view">
|
||||
<view class="member-view">
|
||||
<view class="member-img">
|
||||
<u-image
|
||||
width="82rpx"
|
||||
style="border: 1px solid #ededed"
|
||||
height="82rpx"
|
||||
shape="circle"
|
||||
:src="comment.memberProfile || '/static/missing-face.png'"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="member-info">
|
||||
<view class="memName">{{ comment.memberName }}</view>
|
||||
<view class="creName">{{ comment.createTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-view">
|
||||
<view class="goods-title"
|
||||
>商品评价: {{ gradeList[comment.grade] }}</view
|
||||
>
|
||||
<view class="goods-subtitle">
|
||||
{{ comment.content }}
|
||||
|
||||
</view>
|
||||
<view class="goods-imgs-view" v-if="comment.image != null && comment.image.length != 0">
|
||||
|
||||
<view
|
||||
class="img-view"
|
||||
v-for="(img, imgIndex) in comment.image.split(',')"
|
||||
:key="imgIndex"
|
||||
|
||||
>
|
||||
<u-image @click.native="preview(comment.image.split(','),imgIndex)" width="160rpx" height="160rpx" :src="img"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-name">
|
||||
{{ comment.goodsName }}
|
||||
</view>
|
||||
<view class="goods-subtitle"></view>
|
||||
<view v-if="comment.additional_comment != null">
|
||||
<view class="goods-comm">
|
||||
<span style="margin-left: 10rpx">
|
||||
购买{{ calcDay(comment) }}天后追加评论
|
||||
</span>
|
||||
<text>{{
|
||||
comment.additional_comment.create_time | unixToDate
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="goods-subtitle additional">{{
|
||||
comment.additional_comment.content
|
||||
}}</view>
|
||||
<view class="goods-imgs-view">
|
||||
<view
|
||||
class="img-view"
|
||||
v-for="(img, imgIndex) in comment.additional_comment.images"
|
||||
:key="imgIndex"
|
||||
>
|
||||
<!-- <image :src="img"></image> -->
|
||||
<u-image width="160rpx" height="160rpx" :src="img"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="comment.additional_comment.reply_status == 1">
|
||||
<view style="border-bottom: 1px solid #ededed; width: 100%"></view>
|
||||
<view class="goods-comm store-reply">
|
||||
<span style="margin-left: 10rpx">掌柜回复：</span>
|
||||
</view>
|
||||
<view class="goods-subtitle additional">{{
|
||||
comment.additional_comment.reply.content
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: "",
|
||||
comment: {},
|
||||
gradeList: {
|
||||
GOOD: "好评",
|
||||
MODERATE: "中评",
|
||||
WORSE: "差评",
|
||||
haveImage: "有图",
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.comment = JSON.parse(decodeURIComponent(options.comment));
|
||||
|
||||
},
|
||||
methods: {
|
||||
preview(urls, index) {
|
||||
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls,
|
||||
longPressActions: {
|
||||
itemList: ["保存图片"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
},
|
||||
calcDay(order) {
|
||||
let date = "";
|
||||
console.log();
|
||||
if (order.additional_comment) {
|
||||
date =
|
||||
(order.additional_comment.create_time - order.create_time) /
|
||||
60 /
|
||||
60 /
|
||||
24;
|
||||
}
|
||||
return Math.ceil(date);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.goods-comm {
|
||||
color: #ff6262;
|
||||
border-left: 3px solid #1abc9c;
|
||||
text {
|
||||
float: right;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.store-reply {
|
||||
color: #333;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.memName {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.additional {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
.goods-name {
|
||||
border-bottom: 1px solid #ededed;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.creName,
|
||||
.goods-name {
|
||||
font-size: 24rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.seller-view {
|
||||
background-color: #fff;
|
||||
margin: 5rpx 0rpx;
|
||||
padding: 0rpx 30rpx;
|
||||
.seller-info {
|
||||
height: 70rpx;
|
||||
.seller-name {
|
||||
font-size: 33rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.order-sn {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 0rpx;
|
||||
.goods-img {
|
||||
}
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
width: 380rpx;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.goods-specs {
|
||||
margin-bottom: 10rpx;
|
||||
color: #909399;
|
||||
}
|
||||
.goods-price {
|
||||
margin-bottom: 10rpx;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
margin: 0rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.btn-view {
|
||||
min-height: 70rpx;
|
||||
margin: 5rpx 0rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.description {
|
||||
color: #909399;
|
||||
size: 25rpx;
|
||||
.text {
|
||||
margin: 10rpx 0rpx;
|
||||
}
|
||||
.title {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.again-btn {
|
||||
margin: 0rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.exaluate-member-view {
|
||||
background-color: #fff;
|
||||
margin-top: 12rpx;
|
||||
padding: 20rpx;
|
||||
.member-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.member-img {
|
||||
width: 100rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
.member-info {
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
}
|
||||
.goods-view {
|
||||
margin-left: 15rpx;
|
||||
.border-bottom {
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.goods-subtitle {
|
||||
margin-bottom: 20rpx;
|
||||
color: #909399;
|
||||
}
|
||||
.goods-imgs-view {
|
||||
margin: 20rpx 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.img-view {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
pages/order/evaluate/evaluateInfo.vue
Normal file
81
pages/order/evaluate/evaluateInfo.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="info-view">
|
||||
<view class="info-text">
|
||||
1.对商品金额大于20元商品(虚拟商品除外)进行评价并通过审核后，根据商品价格和您的评价内容为您发放积分。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
2.只能对90天内购买的订单进行商品评价。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
3.同一订单和相隔15日内不同订单中的相同商品，只能评价一次。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
4.退换货订单产生的商品评价将会被删除，且会扣除相应的优币。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
5.鼓励发表原创、有价值的评价;杜绝剽窃、发表无意义、违反法律法规的评价内容，如果您发布的无效评价超过(包含)5条，则一年内您发表的商品评价都不会获得积分奖励。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
6.晒单发表成功后会对晒图进行审核，审核过程中，心得文字会先展示出来，审核通过后，晒图会一起进行展示。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
7.对于审核不通过的评价晒单，不能获得优币奖励，且文字、晒图均不能被展示出来，有下列情形之一的，审核不予通过：
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 评价心得文字与商品无关，且出现言辞露骨的情况;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片与所购商品不一致;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 晒单为截屏图片;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片不清晰，不能达到晒单目的;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片中涉及淫秽、色情等违法不良信息;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 未经过他人同意，涉及使用他人图片或将他人图片进行编辑后发布;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 盗用他人图片经举报、诉讼情况属实;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片中涉及敏感词汇(如：曝光，315，假二水，翻新等);
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片涉及与客服聊天记录;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 对于成人用品晒单，未对特殊部位进行遮掩或打马赛克。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page, .content{
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.info-view {
|
||||
padding: 50rpx;
|
||||
.info-text {
|
||||
color: #909399;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
365
pages/order/evaluate/myEvaluate.vue
Normal file
365
pages/order/evaluate/myEvaluate.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="wrap">
|
||||
<view class="u-tabs-box">
|
||||
<u-tabs :list="list" :is-scroll="false" inactive-color="#333" :current="current" class="utabs" :active-color="$lightColor" @change="change"></u-tabs>
|
||||
</view>
|
||||
<swiper class="swiper-box" :current="current" @change="changeTab" duration="500">
|
||||
<swiper-item v-for="(item, listIndex) in list" :key="listIndex">
|
||||
<scroll-view scroll-y style="height: 100%" @scrolltolower="renderData(listIndex)">
|
||||
<u-empty text="尚无需要评价的商品" mode="list" v-if="orderList.length == 0"></u-empty>
|
||||
<view class="seller-view" v-for="(order, index) in orderList" :key="index">
|
||||
<!-- 店铺名称 -->
|
||||
<view class="box-title">
|
||||
<view class="title_seller_name">
|
||||
{{ order.storeName }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="(sku, _index) in order.orderItems" :key="_index">
|
||||
<view class="goods-item-view">
|
||||
<view>
|
||||
<u-image border-radius="6rpx" width="132rpx" height="132rpx" class="goods_img" :src="sku.image" alt />
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ sku.name }}</view>
|
||||
<view class="text title">{{ gradeList[order.grade] || '' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-view u-row-between" v-if="current != 0">
|
||||
<view class="description">
|
||||
<view class="text title">
|
||||
<u-read-more ref="uReadMore" :color="$lightColor" text-indent="0">
|
||||
<rich-text :nodes="'评论内容：' + order.content || ''"></rich-text>
|
||||
</u-read-more>
|
||||
</view>
|
||||
|
||||
<view class="goods-imgs-view" v-if="order.image">
|
||||
<view class="img-view" v-if="order.image" v-for="(img, imgIndex) in order.image.split(',')" :key="imgIndex">
|
||||
<u-image v-if="order.image" @click.native="
|
||||
preview(order.image.split(','), imgIndex)
|
||||
" width="160rpx" height="160rpx" :src="img"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="again-btn" @click="onDetail(order)" v-if="current == 1">
|
||||
<u-tag text="评价详情" shape="circle" mode="plain" type="error" />
|
||||
</view>
|
||||
<view v-if="current == 0 && sku.commentStatus == 'UNFINISHED'">
|
||||
<view class="evaluate">
|
||||
<view @click="onCommont(order)">
|
||||
<u-tag text="发表评价" shape="circle" mode="plain" type="error" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="params.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderList } from "@/api/order.js";
|
||||
import { getComments } from "@/api/members.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customStyle: {
|
||||
backgroundColor: this.$lightColor,
|
||||
color: "#FFF",
|
||||
height: "60rpx",
|
||||
width: "150rpx",
|
||||
margin: "20rpx 0",
|
||||
},
|
||||
list: [
|
||||
{
|
||||
name: "待评价",
|
||||
},
|
||||
{
|
||||
name: "已评价",
|
||||
},
|
||||
],
|
||||
gradeList: {
|
||||
GOOD: "好评",
|
||||
MODERATE: "中评",
|
||||
WORSE: "差评",
|
||||
haveImage: "有图",
|
||||
},
|
||||
current: 0,
|
||||
orderList: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
orderStatus: "",
|
||||
loadStatus: "more",
|
||||
},
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.orderList = [];
|
||||
this.params.pageNumber = 1;
|
||||
this.current == 0 ? this.loadData() : this.loadComments();
|
||||
},
|
||||
watch: {
|
||||
current(val) {
|
||||
this.params.pageNumber = 1;
|
||||
this.params.loadStatus = "more";
|
||||
this.orderList = [];
|
||||
//重新读取数据
|
||||
if (val == 0) {
|
||||
this.loadData();
|
||||
}
|
||||
if (val == 1) {
|
||||
this.orderList = [];
|
||||
this.loadComments();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// 判断当前店铺是否有可评价的商品
|
||||
commentStatus(val) {
|
||||
if (this.current == 1) {
|
||||
return true;
|
||||
} else {
|
||||
let show;
|
||||
|
||||
val.orderItems &&
|
||||
val.orderItems.forEach((item) => {
|
||||
if (item.commentStatus == "UNFINISHED") {
|
||||
show = true;
|
||||
} else {
|
||||
show = false;
|
||||
}
|
||||
});
|
||||
|
||||
return show;
|
||||
}
|
||||
},
|
||||
|
||||
preview(urls, index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls,
|
||||
longPressActions: {
|
||||
itemList: ["保存图片"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.current = index;
|
||||
},
|
||||
changeTab(e) {
|
||||
this.current = e.target.current;
|
||||
},
|
||||
loadData() {
|
||||
uni.showLoading({});
|
||||
getOrderList(this.params).then((res) => {
|
||||
uni.hideLoading();
|
||||
const orderList = res.data.result.records;
|
||||
if (orderList.length < 10) {
|
||||
this.params.loadStatus = "noMore";
|
||||
}
|
||||
if (orderList.length > 0) {
|
||||
this.orderList = this.orderList.concat(orderList);
|
||||
this.params.pageNumber += 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
onCommont(order) {
|
||||
uni.navigateTo({
|
||||
url: `./releaseEvaluate?sn=${order.sn}&order=${encodeURIComponent(
|
||||
JSON.stringify(order)
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
loadComments() {
|
||||
uni.showLoading({});
|
||||
getComments(this.params).then((res) => {
|
||||
uni.hideLoading();
|
||||
let orderList = res.data.result.records;
|
||||
if (orderList.length < 10) {
|
||||
this.params.loadStatus = "noMore";
|
||||
}
|
||||
orderList.forEach((item) => {
|
||||
item.orderItems = [
|
||||
{
|
||||
image: item.goodsImage,
|
||||
name: item.goodsName,
|
||||
goodsId: item.goodsId,
|
||||
skuId: item.skuId,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
this.orderList = this.orderList.concat(orderList);
|
||||
|
||||
this.params.pageNumber += 1;
|
||||
});
|
||||
},
|
||||
onAgain(order) {
|
||||
uni.navigateTo({
|
||||
url: `./againEvaluate?order=${encodeURIComponent(
|
||||
JSON.stringify(order)
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
renderData(index) {
|
||||
if (this.params.loadStatus == "noMore") return;
|
||||
if (index == 0) {
|
||||
this.loadData();
|
||||
}
|
||||
if (index == 1) {
|
||||
this.params.audit_status = "PASS_AUDIT";
|
||||
this.params.comments_type = "INITIAL";
|
||||
this.params.comment_status = "WAIT_CHASE";
|
||||
this.loadComments();
|
||||
}
|
||||
if (index == 2) {
|
||||
this.params.audit_status = "";
|
||||
this.params.comments_type = "";
|
||||
this.params.comment_status = "FINISHED";
|
||||
this.loadComments();
|
||||
}
|
||||
},
|
||||
onDetail(comment) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"./evaluateDetail?comment=" +
|
||||
encodeURIComponent(JSON.stringify(comment)),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
.wrap {
|
||||
background: #f6f6f6;
|
||||
height: calc(100vh - var(--window-top));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goods-imgs-view {
|
||||
margin: 20rpx 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.img-view {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
.u-tabs-box {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.box-content {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
.title_seller_name {
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.box-title {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100% - 88rpx);
|
||||
}
|
||||
|
||||
.goods-specs {
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.goods-price {
|
||||
margin-bottom: 10rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
|
||||
.goods-title {
|
||||
color: $u-main-color;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
margin: 0rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
.u-num {
|
||||
color: $aider-light-color;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.again-btn {
|
||||
margin: 0rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.seller-view {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0px;
|
||||
padding: 0px 20rpx 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
.seller-info {
|
||||
height: 70rpx;
|
||||
.seller-name {
|
||||
font-size: 33rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.order-sn {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
min-height: 70rpx;
|
||||
margin: 5rpx 5rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.description {
|
||||
size: 25rpx;
|
||||
color: #999999;
|
||||
.text {
|
||||
margin: 20rpx 0rpx;
|
||||
}
|
||||
.title {
|
||||
color: #5f5d5f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.evaluate {
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
321
pages/order/evaluate/releaseEvaluate.vue
Normal file
321
pages/order/evaluate/releaseEvaluate.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-for="(sku, index) in order.orderItems" :key="index">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view>
|
||||
<view class="goods-item-view">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image" />
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ sku.name }}</view>
|
||||
<view class="goods-price">
|
||||
<view>x{{ sku.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-evaluate-view">
|
||||
<view class="goods-view">
|
||||
<view>商品评价</view>
|
||||
<view class="sub-title">满意请打好评哦</view>
|
||||
</view>
|
||||
<view class="rate-view">
|
||||
<view class="rate-btn" @click="onGrade('GOOD', index)">
|
||||
<view style="font-size: 42rpx" :style="{ color: form.grade === 'GOOD' ? 'red' : '#CCCCCC' }" class="alifont icon-haoping1"></view>
|
||||
<text>好评</text>
|
||||
</view>
|
||||
<view class="rate-btn" @click="onGrade('MODERATE', index)">
|
||||
<view style="font-size: 42rpx" :style="{ color: form.grade === 'MODERATE' ? 'red' : '#CCCCCC' }" class="alifont icon-zhongping1"></view>
|
||||
<text>中评</text>
|
||||
</view>
|
||||
<view class="rate-btn" @click="onGrade('WORSE', index)">
|
||||
<view style="font-size: 42rpx" :style="{ color: form.grade === 'WORSE' ? 'red' : '#CCCCCC' }" class="alifont icon-chaping"></view>
|
||||
<text>差评</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="input-view">
|
||||
<u-input v-model="form.content" height="200" placeholder-style="font-size:12px;color:#CCCCCC" :type="type" :border="border" :maxlength="maxlength" :placeholder="placeholder" />
|
||||
</view>
|
||||
<view class="input-num">
|
||||
<text>{{ form.content.length }}/{{ maxlength }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="images-view" @click="beforeUpload(index)">
|
||||
<u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="150" @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view" style="margin-bottom: 150rpx">
|
||||
<view class="info-header">店铺评分</view>
|
||||
<view>
|
||||
<view class="seller-rate-view">
|
||||
<view class="rate-title">描述相符</view>
|
||||
<view>
|
||||
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.descriptionScore" :size="40"></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
<view class="seller-rate-view">
|
||||
<view class="rate-title">服务态度</view>
|
||||
<view>
|
||||
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.serviceScore" :size="40"></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
<view class="seller-rate-view">
|
||||
<view class="rate-title">物流服务</view>
|
||||
<view>
|
||||
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.deliveryScore" :size="40"></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onSubmit" @click="onSubmit"> 提交申请</view>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js";
|
||||
import { commentsMemberOrder } from "@/api/members.js";
|
||||
import { upload } from "@/api/common.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storage,
|
||||
value: "",
|
||||
type: "textarea",
|
||||
border: false,
|
||||
maxlength: 500,
|
||||
placeholder:
|
||||
"宝贝满足您的期待吗？说说它的优点和美中不足的地方吧。您的评价会帮助更多的人",
|
||||
order: {},
|
||||
form: {
|
||||
content: "",
|
||||
goodsId: "",
|
||||
grade: "GOOD",
|
||||
orderItemSn: "",
|
||||
skuId: "",
|
||||
descriptionScore: 5,
|
||||
serviceScore: 5,
|
||||
deliveryScore: 5,
|
||||
// // 是否为初评价 true 默认为初评
|
||||
// first_comment: true,
|
||||
//content,grade: 'GOOD',skuId,images:[]
|
||||
},
|
||||
currentIndex: 0,
|
||||
action: upload,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.form.orderItemSn = options.sn;
|
||||
this.order = JSON.parse(decodeURIComponent(options.order));
|
||||
//现在只能一个商品一个评价
|
||||
},
|
||||
mounted() {
|
||||
this.form.goodsId = this.order.orderItems[0].goodsId;
|
||||
this.form.orderItemSn = this.order.orderItems[0].sn;
|
||||
this.form.skuId = this.order.orderItems[0].skuId;
|
||||
},
|
||||
methods: {
|
||||
beforeUpload(index) {
|
||||
this.currentIndex = index;
|
||||
},
|
||||
onGrade(grade, index) {
|
||||
this.form.grade = grade;
|
||||
},
|
||||
onSubmit() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
commentsMemberOrder(this.form).then((res) => {
|
||||
uni.hideLoading();
|
||||
|
||||
uni.showToast({
|
||||
title: "发布评价成功",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
success: () => {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
onUploaded(lists) {
|
||||
let images = [];
|
||||
console.log(lists);
|
||||
lists.forEach((item) => {
|
||||
images.push(item.response.result);
|
||||
});
|
||||
this.form.images = images;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
.onSubmit {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: $aider-light-color;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #f4f4f5;
|
||||
padding: 10rpx 0rpx;
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20rpx;
|
||||
.header-text {
|
||||
background-color: #f4f4f5;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
.seller-name {
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
.goods-img {
|
||||
}
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.after-num {
|
||||
margin: 0rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
.goods-evaluate-view {
|
||||
margin-top: 8rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 5rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.goods-view {
|
||||
width: 250rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
.sub-title {
|
||||
font-size: 22rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
.rate-view {
|
||||
color: #333333;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.rate-btn {
|
||||
margin: 0rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-evaluate-view {
|
||||
margin-top: 8rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
.input-view {
|
||||
width: 100%;
|
||||
}
|
||||
.input-num {
|
||||
color: #cccccc;
|
||||
text-align: right;
|
||||
}
|
||||
.images-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.info-header {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.seller-rate-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.rate-title {
|
||||
line-height: 70rpx;
|
||||
width: 150rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-view {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
margin-top: 100rpx;
|
||||
border: solid 2rpx #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
align-items: center;
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user