396 lines
9.3 KiB
Vue
396 lines
9.3 KiB
Vue
<template>
|
|
<view class="container" :class="[`${themeInfo.theme}-theme`]">
|
|
<navBar class="navBar"></navBar>
|
|
<view class="container-form">
|
|
<view class="form">
|
|
<view class="topBox">
|
|
{{ $t('evaluate.customerEvaluation') }}
|
|
</view>
|
|
<view class="midBox">
|
|
<!-- Overall rating评分 -->
|
|
<view class="midBox-detail">
|
|
<view class="circle"></view>
|
|
<view class="rate">{{ $t("evaluate.overallRating") }}</view>
|
|
<uv-rate
|
|
class="uv-rate"
|
|
:count="5"
|
|
v-model="rate.overallRating"
|
|
:activeColor="themeInfo.activeColor"
|
|
inactiveColor="rgb(13, 32, 49)"
|
|
size="40rpx"
|
|
>
|
|
</uv-rate>
|
|
</view>
|
|
<!-- User experience -->
|
|
<view class="midBox-detail-1">
|
|
<view class="circle"></view>
|
|
<view class="rate">{{ $t("evaluate.userExperience") }}</view>
|
|
<view class="border"></view>
|
|
</view>
|
|
<!-- Hospitality评分 -->
|
|
<view class="midBox-detail-2">
|
|
<view class="line"></view>
|
|
<view class="rate">{{ $t("evaluate.Hospitality") }}</view>
|
|
<uv-rate
|
|
class="uv-rate"
|
|
:count="5"
|
|
v-model="rate.Hospitality"
|
|
:activeColor="themeInfo.activeColor"
|
|
inactiveColor="rgb(13, 32, 49)"
|
|
size="40rpx"
|
|
>
|
|
</uv-rate>
|
|
</view>
|
|
<!-- Cleanliness评分 -->
|
|
<view class="midBox-detail-2">
|
|
<view class="line"></view>
|
|
<view class="rate">{{ $t("evaluate.cleanliness") }}</view>
|
|
<uv-rate
|
|
class="uv-rate"
|
|
:count="5"
|
|
v-model="rate.cleanliness"
|
|
:activeColor="themeInfo.activeColor"
|
|
inactiveColor="rgb(13, 32, 49)"
|
|
size="40rpx"
|
|
>
|
|
</uv-rate>
|
|
</view>
|
|
<!-- Convenience评分 -->
|
|
<view class="midBox-detail-2">
|
|
<view class="line"></view>
|
|
<view class="rate">{{ $t("evaluate.convenience") }}</view>
|
|
<uv-rate
|
|
class="uv-rate"
|
|
:count="5"
|
|
v-model="rate.convenience"
|
|
:activeColor="themeInfo.activeColor"
|
|
inactiveColor="rgb(13, 32, 49)"
|
|
size="40rpx"
|
|
>
|
|
</uv-rate>
|
|
</view>
|
|
</view>
|
|
<view class="textareaBox">
|
|
<uv-textarea
|
|
v-model="rate.textarea"
|
|
height="140.8rpx"
|
|
:placeholder="$t('evaluate.tips')"
|
|
customStyle="background: transparent; border-radius: 16rpx; border:none;"
|
|
textStyle="font-size: 24rpx; color: rgb(15, 34, 50); font-weight: 400; line-height: 35rpx;"
|
|
|
|
>
|
|
</uv-textarea>
|
|
<view class="textareaBox-bottom">
|
|
<view class="anonymous">
|
|
<uv-checkbox-group v-model="rate.checkboxValue">
|
|
<uv-checkbox activeColor="#A1A1A1"
|
|
name="true"
|
|
shape="circle"
|
|
:label="$t('evaluate.anonymous')"
|
|
>
|
|
</uv-checkbox>
|
|
</uv-checkbox-group>
|
|
<!-- <text>{{ $t('evaluate.anonymous') }}</text> -->
|
|
</view>
|
|
<view class="add-pictures" >
|
|
<uv-upload
|
|
:fileList="fileList1"
|
|
name="6"
|
|
:maxCount="1"
|
|
width="102.4rpx"
|
|
height="91.84rpx"
|
|
customStyle="width: 102.4rpx;height: 92rpx; border-radius: 12rpx;display: flex; justify-content: center; align-items: center;"
|
|
@afterRead="afterRead"
|
|
:previewFullImage="false"
|
|
@delete="deletePic"
|
|
>
|
|
<!-- <view class="add-pictures" @click="addPicture">
|
|
<uv-image src="../../static/evaluate/image.png" width="42rpx" height="39rpx"></uv-image>
|
|
<br>
|
|
add pictures
|
|
</view> -->
|
|
<image style="width: 102.4rpx; height: 91.84rpx;" src="../../static/evaluate/addPic.png" ></image>
|
|
</uv-upload>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<button @click="submit" v-show="ifsubmit" class="submit">
|
|
{{ $t('common.submit') }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import navBar from '@/components/navBar.vue'
|
|
import { ref } from 'vue';
|
|
import { useOrderApi } from '@/Apis/order.js'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
// 主题色配置
|
|
import { useMainStore } from "@/store/index.js";
|
|
const { themeInfo } = useMainStore();
|
|
const getApi = useOrderApi()
|
|
const count = ref(5);
|
|
const rate = ref({
|
|
orderId: '',
|
|
siteId: '',
|
|
overallRating: '',
|
|
Hospitality: '',
|
|
cleanliness: '',
|
|
convenience: '',
|
|
imageUrl: '',
|
|
textarea: "",
|
|
checkboxValue: [],
|
|
})
|
|
onLoad((params) => {
|
|
rate.value.orderId = params.orderId
|
|
rate.value.siteId = params.siteId
|
|
})
|
|
// const overAll = ref(0);
|
|
// const Hospitality = ref(0);
|
|
// const cleanliness = ref(0);
|
|
// const convenience = ref(0);
|
|
const ifsubmit = ref(true);
|
|
|
|
|
|
// 上传图片存放
|
|
const fileList1 = ref([]);
|
|
// 新增图片方法
|
|
const afterRead = async (event) => {
|
|
let lists = [].concat(event.file);
|
|
let fileListLen = fileList1.value.length;
|
|
|
|
lists.forEach(async (item) => {
|
|
fileList1.value.push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
});
|
|
|
|
const result = await UploaderImage(item.url);
|
|
fileList1.value[fileListLen] = {
|
|
...item,
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
};
|
|
rate.value.imageUrl = result
|
|
|
|
fileListLen++;
|
|
});
|
|
}
|
|
// 上传请求
|
|
async function UploaderImage(url) {
|
|
let url1 = '';
|
|
try {
|
|
const res = await getApi.UploaderImage({ filePath: url });
|
|
// const jsonstr = JSON.parse(res);
|
|
url1 = res.data;
|
|
} catch (error) {
|
|
throw error; //
|
|
}
|
|
return url1;
|
|
}
|
|
// 删除图片
|
|
const deletePic = (event) => {
|
|
fileList1.value.splice(event.index, 1);
|
|
rate.value.imageUrl=''
|
|
};
|
|
// 提交评分
|
|
async function submit() {
|
|
uni.showLoading()
|
|
const res = await getApi.SubmitOrderEvaluate({
|
|
orderId: String(rate.value.orderId),
|
|
siteId: String(rate.value.siteId),
|
|
overallRating: String(rate.value.overallRating),
|
|
hospitality: String(rate.value.Hospitality),
|
|
cleanliness: String(rate.value.cleanliness),
|
|
convenience: String(rate.value.convenience),
|
|
remark: String(rate.value.textarea),
|
|
imageUrl: String(rate.value.imageUrl),
|
|
isAnonymity: rate.value.checkboxValue.length === 1
|
|
});
|
|
if(res.code === 200) {
|
|
uni.hideLoading()
|
|
ifsubmit.value = false
|
|
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url:'/pages/unlock/index'
|
|
})
|
|
},2000)
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/static/style/theme.scss';
|
|
uni-page-body {
|
|
height: 100%;
|
|
background: linear-gradient(0.00deg, rgb(1, 169, 188), rgb(10, 132, 184));
|
|
overflow: auto;
|
|
}
|
|
.navBar {
|
|
position: relative;
|
|
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: start;
|
|
height: 100vh;
|
|
background: linear-gradient(0.00deg, var(--left-linear), var(--right-linear));
|
|
}
|
|
.container-form {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
background: transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
.form {
|
|
position: relative;
|
|
width: 690rpx;
|
|
height: 1000rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
& > .topBox {
|
|
width: 100%;
|
|
height: 116rpx;
|
|
background: #F7F7F7;
|
|
text-align: center;
|
|
line-height: 116rpx;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
}
|
|
& > .midBox {
|
|
width: 504rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
.midBox-detail {
|
|
margin-top: 54rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
& > .circle {
|
|
width: 17rpx;
|
|
height: 17rpx;
|
|
background: var(--active-color);
|
|
border-radius: 100%;
|
|
}
|
|
& > .rate {
|
|
width: 214rpx;
|
|
margin-left: 25rpx;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #0F2232;
|
|
}
|
|
& > .uv-rate {
|
|
margin-left: 26rpx;
|
|
}
|
|
}
|
|
.midBox-detail-1 {
|
|
margin-top: 34rpx;
|
|
|
|
@extend .midBox-detail;
|
|
& > .border {
|
|
margin-left: 26rpx;
|
|
background: #979797;
|
|
width: 233rpx;
|
|
height: 2rpx;
|
|
}
|
|
|
|
}
|
|
.midBox-detail-2 {
|
|
@extend .midBox-detail;
|
|
margin-top: 21rpx;
|
|
& > .line {
|
|
width: 17rpx;
|
|
height: 2rpx;
|
|
background: #979797;
|
|
}
|
|
}
|
|
|
|
}
|
|
& >.textareaBox {
|
|
margin-top: 44rpx;
|
|
width: 630rpx;
|
|
height: 294rpx;
|
|
background: #F2F2F2;
|
|
border-radius: 8rpx;
|
|
& > .textareaBox-bottom {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-start;
|
|
|
|
& >.anonymous {
|
|
margin-left: 39rpx;
|
|
width: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
& > .add-pictures {
|
|
margin-left: 250rpx;
|
|
width: 102.4rpx;
|
|
height: 92rpx;
|
|
// border: 1px dashed rgb(151, 151, 151);
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12rpx;
|
|
font-weight: 500;
|
|
color: #989898;
|
|
z-index: 10;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
& > .submit {
|
|
margin-top: 41rpx;
|
|
border-radius: 14rpx;
|
|
background: var(--active-color);
|
|
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
|
|
width: 630rpx;
|
|
height: 90rpx;
|
|
color: var(--text-color);
|
|
font-size: 37rpx;
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -7px;
|
|
left: 4px;
|
|
width: 100%;
|
|
height: 14px;
|
|
background: radial-gradient(var(--right-linear) 0px, var(--right-linear) 5px, transparent 5px, transparent);
|
|
background-size: 14px 14px;
|
|
}
|
|
}
|
|
</style> |