|
|
@@ -4,13 +4,13 @@
|
|
|
<!-- <text>评价</text> -->
|
|
|
<!-- <text @tap="chooseMsg">快速键入</text> -->
|
|
|
<!-- </view> -->
|
|
|
- <view class="feedback-body">
|
|
|
+ <!-- <view class="feedback-body">
|
|
|
<textarea placeholder="请输入你的评价..." v-model="sendDate.content" class="feedback-textare" />
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<!-- <view class="feedback-title"><text>QQ/邮箱</text></view> -->
|
|
|
<!-- <view class="feedback-body"><input class="feedback-input" v-model="sendDate.mail" placeholder="方便我们联系你 " /></view> -->
|
|
|
|
|
|
- <view class="text-white padding bg radius margin-tb">
|
|
|
+ <!-- <view class="text-white padding bg radius margin-tb">
|
|
|
<view>
|
|
|
<view class="text-lg margin-top-sm text-black">商品评价图（可多张）</view>
|
|
|
<view class="flex" style="overflow: hidden; flex-wrap: wrap">
|
|
|
@@ -23,14 +23,14 @@
|
|
|
:key="index"
|
|
|
@click="viewImg(index, shopBanner)"
|
|
|
>
|
|
|
- <!-- <image :src="image" style="width: 100%;height: 100%;"></image> -->
|
|
|
+
|
|
|
<image :src="image" mode="aspectFill" style="width: 100%; height: 100%"></image>
|
|
|
<view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click.stop="removeImg(index)">
|
|
|
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flex" style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative" @click="addImages(2)" v-if="shopBanner.length < 9">
|
|
|
- <!-- <image :src="image" style="width: 100%;height: 100%;"></image> -->
|
|
|
+
|
|
|
<view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
|
|
|
<view>
|
|
|
<view class="text-center">
|
|
|
@@ -44,15 +44,99 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="feedback-title feedback-star-view">
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="feedback-title feedback-star-view">
|
|
|
<text>订单评分</text>
|
|
|
<view class="feedback-star-view">
|
|
|
- <!-- <text class="feedback-star" v-for="(value, key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''" @tap="chooseStar(value)"></text> -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-rate :count="5" min-count="1" active-color="#FCD202" v-model="value"></u-rate>
|
|
|
+ </view>
|
|
|
+ <button type="primary" style="background: #fcd202; margin-top: 32upx" class="feedback-submit" @tap="send_throttle">提交</button> -->
|
|
|
+
|
|
|
+ <!-- 店铺评价区域 -->
|
|
|
+ <view class="store">
|
|
|
+ <view class="store_box">
|
|
|
+ <image class="store_box_img" :src="info.shopCover" mode="aspectFill"></image>
|
|
|
+ {{ info.shopName }}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="store_rate">
|
|
|
+ <u-rate :count="5" min-count="1" active-color="#FF5733" size="50" gutter="50" v-model="value"></u-rate>
|
|
|
+ <view v-if="value == 1" class="store_rate_text">非常差</view>
|
|
|
+ <view v-if="value == 2" class="store_rate_text">差</view>
|
|
|
+ <view v-if="value == 3" class="store_rate_text">一般</view>
|
|
|
+ <view v-if="value == 4" class="store_rate_text">好</view>
|
|
|
+ <view v-if="value == 5" class="store_rate_text">非常好</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="store_pop" v-if="value">
|
|
|
+ <textarea placeholder="请输入你的评价..." v-model="sendDate.content" class="feedback-textare" />
|
|
|
+
|
|
|
+ <view>
|
|
|
+ <view class="text-lg margin-top-sm text-black">商品评价图（可多张）</view>
|
|
|
+ <view class="flex" style="overflow: hidden; flex-wrap: wrap">
|
|
|
+ <view>
|
|
|
+ <view class="margin-top flex margin-right-sm flex-wrap">
|
|
|
+ <view
|
|
|
+ class="flex"
|
|
|
+ style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative"
|
|
|
+ v-for="(image, index) in shopBanner"
|
|
|
+ :key="index"
|
|
|
+ @click="viewImg(index, shopBanner)"
|
|
|
+ >
|
|
|
+ <image :src="image" mode="aspectFill" style="width: 100%; height: 100%"></image>
|
|
|
+ <view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click.stop="removeImg(index)">
|
|
|
+ <u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex" style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative" @click="addImages(2)" v-if="shopBanner.length < 9">
|
|
|
+ <view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
|
|
|
+ <view>
|
|
|
+ <view class="text-center">
|
|
|
+ <image src="/static/images/addimg.png" style="width: 65rpx; height: 55rpx"></image>
|
|
|
+ </view>
|
|
|
+ <view class="text-center text-black">添加图片</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 骑手评价区域 -->
|
|
|
+ <view class="store" style="margin-top: 20rpx" v-if="orderType == 2">
|
|
|
+ <view class="store_box">
|
|
|
+ <image class="store_box_img" src="/static/logo.png" mode="aspectFill"></image>
|
|
|
+ <view class="store_box_msg">
|
|
|
+ 骑手配送
|
|
|
+ <view class="store_box_name">{{ info.riderNickName }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="store_rate">
|
|
|
+ <u-rate :count="5" min-count="1" active-color="#FF5733" size="50" gutter="50" v-model="valueRider" @change="changeRate"></u-rate>
|
|
|
+ <view v-if="valueRider == 1" class="store_rate_text">非常差</view>
|
|
|
+ <view v-if="valueRider == 2" class="store_rate_text">差</view>
|
|
|
+ <view v-if="valueRider == 3" class="store_rate_text">一般</view>
|
|
|
+ <view v-if="valueRider == 4" class="store_rate_text">好</view>
|
|
|
+ <view v-if="valueRider == 5" class="store_rate_text">非常好</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="store_pop" v-if="valueRider">
|
|
|
+ <view class="tag_list">
|
|
|
+ <view class="tag" :class="{ active: index == activeIndex }" v-for="(item, index) in tagList" :key="index" @click="activeIndex = index">{{ item }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <u-rate :count="count" min-count="1" active-color="#FCD202" v-model="value"></u-rate>
|
|
|
</view>
|
|
|
- <button type="primary" style="background: #fcd202; margin-top: 32upx" class="feedback-submit" @tap="send_throttle">提交</button>
|
|
|
+
|
|
|
+ <!-- 提交按钮区域 -->
|
|
|
+ <view class="btnBox">
|
|
|
+ <view class="btn" :class="{ active_btn: value || valueRider }" @tap="send_throttle">提交评价</view>
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 用于图片压缩的canvas画布 -->
|
|
|
<canvas
|
|
|
@@ -79,6 +163,7 @@ export default {
|
|
|
return {
|
|
|
shopBanner: [],
|
|
|
msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
|
|
|
+ tagList: [],
|
|
|
stars: [1, 2, 3, 4, 5],
|
|
|
imageList: [],
|
|
|
sendDate: {
|
|
|
@@ -88,23 +173,31 @@ export default {
|
|
|
goodsId: '',
|
|
|
ordersId: '',
|
|
|
orderNumber: '',
|
|
|
- shopId: ''
|
|
|
+ shopId: '',
|
|
|
+ riderUserId: ''
|
|
|
},
|
|
|
-
|
|
|
- count: 5,
|
|
|
- value: 5,
|
|
|
+ activeIndex: 0,
|
|
|
+ value: 0,
|
|
|
+ valueRider: 0,
|
|
|
goodsId: '',
|
|
|
ordersId: '',
|
|
|
- orderNumber: '',
|
|
|
+
|
|
|
+ orderType: '',
|
|
|
+ info: {},
|
|
|
//画板边长默认是屏幕宽度，正方形画布
|
|
|
cw: uni.getSystemInfoSync().windowWidth
|
|
|
}
|
|
|
},
|
|
|
onLoad(e) {
|
|
|
+ // console.log(e)
|
|
|
this.sendDate.goodsId = e.goodsId
|
|
|
this.sendDate.ordersId = e.ordersId
|
|
|
this.sendDate.orderNumber = e.orderNumber
|
|
|
this.sendDate.shopId = e.shopId
|
|
|
+ this.sendDate.riderUserId = e.riderUserId
|
|
|
+ this.orderType = e.orderType
|
|
|
+ this.info = JSON.parse(decodeURIComponent(e.info))
|
|
|
+
|
|
|
// let deviceInfo = {
|
|
|
// appid: plus.runtime.appid,
|
|
|
// imei: plus.device.imei, //设备标识
|
|
|
@@ -182,33 +275,69 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- chooseStar(e) {
|
|
|
- //点击评星
|
|
|
- this.sendDate.score = e
|
|
|
- },
|
|
|
|
|
|
send_throttle: throttle(function () {
|
|
|
this.send()
|
|
|
}, 2000),
|
|
|
|
|
|
send() {
|
|
|
- if (!this.sendDate.content) {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '请输入评价内容'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
+ // console.log(this.orderType)
|
|
|
+ if (this.orderType == 1) {
|
|
|
+ // 到店取餐
|
|
|
+ if (!this.value) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请选择评价星级'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- if (!this.shopBanner.length) {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '请上传商品评价图'
|
|
|
- })
|
|
|
- return
|
|
|
+ if (!this.sendDate.content) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入评价内容'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.shopBanner.length) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请上传商品评价图'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.sendReq()
|
|
|
+ } else if (this.orderType == 2) {
|
|
|
+ // 外卖配送
|
|
|
+ if (!this.value && !this.valueRider) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请选择评价星级'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.value && !this.sendDate.content) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入评价内容'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.value && !this.shopBanner.length) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请上传商品评价图'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.sendReq()
|
|
|
}
|
|
|
+ },
|
|
|
+ sendReq() {
|
|
|
this.$queue.showLoading('加载中...')
|
|
|
- console.log(this.orderNumber)
|
|
|
|
|
|
this.$Request
|
|
|
.postJson('/app/order/insertEvaluate', {
|
|
|
@@ -218,7 +347,10 @@ export default {
|
|
|
evaluateMessage: this.sendDate.content,
|
|
|
score: this.value,
|
|
|
shopId: this.sendDate.shopId,
|
|
|
- pictures: this.shopBanner.length > 0 ? this.shopBanner.join(',') : []
|
|
|
+ pictures: this.shopBanner.length > 0 ? this.shopBanner.join(',') : [],
|
|
|
+ riderUserId: this.sendDate.riderUserId,
|
|
|
+ evaluateRiderMessage: this.tagList[this.activeIndex],
|
|
|
+ riderScore: this.valueRider
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
@@ -243,6 +375,17 @@ export default {
|
|
|
urls: list,
|
|
|
current: i
|
|
|
})
|
|
|
+ },
|
|
|
+ changeRate(value) {
|
|
|
+ this.valueRider = value
|
|
|
+ this.activeIndex = 0
|
|
|
+ if (this.valueRider == 1 || this.valueRider == 2) {
|
|
|
+ this.tagList = ['态度恶劣', '餐品洒了', '货物丢失', '配送超时']
|
|
|
+ } else if (this.valueRider == 3) {
|
|
|
+ this.tagList = ['一般']
|
|
|
+ } else if (this.valueRider == 4 || this.valueRider == 5) {
|
|
|
+ this.tagList = ['服务热情', '快速准时', '东西很好', '价格实惠', '文明礼貌', '餐品完好']
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -257,7 +400,92 @@ export default {
|
|
|
}
|
|
|
|
|
|
page {
|
|
|
- background-color: #ffffff;
|
|
|
+ background-color: #e6e6e6;
|
|
|
+}
|
|
|
+
|
|
|
+.store {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.store_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.store_box_img {
|
|
|
+ margin-right: 22rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.store_box_msg {
|
|
|
+ font-size: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.store_box_name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #808080;
|
|
|
+}
|
|
|
+
|
|
|
+.store_rate {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 130rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.store_rate_text {
|
|
|
+ margin-left: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.tag_list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.tag {
|
|
|
+ margin-right: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ line-height: 68rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ border: 2rpx solid #ff5733;
|
|
|
+ color: #ff5733;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.btnBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 250rpx;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 626rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 110rpx;
|
|
|
+ background-color: #cccccc;
|
|
|
+}
|
|
|
+
|
|
|
+.active_btn {
|
|
|
+ background-color: #f18731;
|
|
|
}
|
|
|
|
|
|
view {
|
|
|
@@ -416,8 +644,10 @@ view {
|
|
|
line-height: 50upx;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 10upx 0upx 0;
|
|
|
+ padding: 20upx 30upx;
|
|
|
color: #8f8f94;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.feedback-input {
|
