318 lines
6.6 KiB
Vue
318 lines
6.6 KiB
Vue
<template>
|
|
<view class="max_page detail-main">
|
|
<!-- <nav-bar :is_seat="false"></nav-bar> -->
|
|
<view class="fixed_search_div">
|
|
<view class="back_div" @click="common.navigateBack()">
|
|
<view class="back-icon"></view>
|
|
</view>
|
|
</view>
|
|
<view class="detail-body">
|
|
<view class="title font_pf">发表评价</view>
|
|
<view class="body-content">
|
|
<view class="picture">
|
|
<!-- <view class="pic-item" v-for="item in 4" :key="item"> -->
|
|
<!-- <image class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix"></image> -->
|
|
<picture-upload :limit="4" v-model="formData.imgIdList"></picture-upload>
|
|
<!-- </view> -->
|
|
</view>
|
|
<view class="tips font_pf">最多可添加4张图片</view>
|
|
<view class="num">
|
|
<view class="num-pic">
|
|
<image-preview class="img_100" :imgId="imgId" :isCache="true" mode="aspectFill"></image-preview>
|
|
<!-- <img class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix" /> -->
|
|
</view>
|
|
<view class="num-box">
|
|
<view class="font_pf fz-28 c-666">综合评分</view>
|
|
<view class="slider-box">
|
|
<slider
|
|
:min="0"
|
|
:max="10"
|
|
:value="10"
|
|
@change="sliderChange"
|
|
:step="0.1"
|
|
:show-value="true"
|
|
:blockSize="14"
|
|
></slider>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab">
|
|
<view
|
|
class="tab-btn"
|
|
:class="{ 'is-active': formData.bbsTag == 'SUG' }"
|
|
@click="formData.bbsTag = 'SUG'"
|
|
>
|
|
建议
|
|
</view>
|
|
<view
|
|
class="tab-btn"
|
|
:class="{ 'is-active': formData.bbsTag == 'ASK' }"
|
|
@click="formData.bbsTag = 'ASK'"
|
|
>
|
|
提问
|
|
</view>
|
|
</view>
|
|
<view class="input-textarea">
|
|
<uv-textarea
|
|
v-model="formData.bbsContent"
|
|
height="124"
|
|
count
|
|
:maxlength="100"
|
|
:adjustPosition="false"
|
|
:placeholder="formData.bbsTag == 'SUG' ? '请输入你的建议...' : '请输入你的问题...'"
|
|
></uv-textarea>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn-box font_pf">
|
|
<uv-button type="primary" @click="submit" :disabled="!formData.bbsContent">提交评价</uv-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, nextTick } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { publishCrsEvaluation } from '@/api/courseDetail.js';
|
|
import common from '@/common/common';
|
|
|
|
const formData = reactive({
|
|
crsId: null,
|
|
imgIdList: [], // 发表图片ID列表，文件ID集
|
|
bbsGrade: 10, // 综合评分(最高10分)
|
|
bbsTag: 'SUG', // 评价标签 （SUG 建议 ASK 提问 ）
|
|
bbsContent: '' // 评价内容
|
|
});
|
|
const imgId = ref('');
|
|
const from = ref('');
|
|
const sliderChange = (event) => {
|
|
formData.bbsGrade = event.detail.value;
|
|
};
|
|
|
|
const submit = () => {
|
|
if (formData.bbsContent === '') {
|
|
if (formData.bbsTag === 'SUG') {
|
|
return common.msg('请输入你的建议');
|
|
} else {
|
|
return common.msg('请输入你的问题');
|
|
}
|
|
}
|
|
const loadingStartTime = Date.now();
|
|
common.loading('评价中');
|
|
|
|
publishCrsEvaluation(formData).then((res) => {
|
|
const loadingDuration = Date.now() - loadingStartTime;
|
|
const minLoadingTime = 700;
|
|
console.log(loadingStartTime, loadingDuration);
|
|
const delayTime = Math.max(0, minLoadingTime - loadingDuration);
|
|
console.log('delayTime', delayTime);
|
|
setTimeout(() => {
|
|
common.hideLoading();
|
|
nextTick(() => common.msg('发表成功'));
|
|
setTimeout(() => {
|
|
uni.$emit('refresh_comment_data');
|
|
if (from.value === 'study') {
|
|
} else {
|
|
}
|
|
common.navigateBack();
|
|
}, 500);
|
|
}, delayTime);
|
|
});
|
|
};
|
|
onLoad((params) => {
|
|
formData.crsId = params.crsId;
|
|
from.value = params.from;
|
|
imgId.value = params.imgId;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail-main {
|
|
background-color: #f6f8ff;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detail-body {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
// min-height: calc(100vh - (var(--status-bar-height) + 50rpx));
|
|
padding: 0 37rpx 29rpx 37rpx;
|
|
margin-bottom: 152rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.title {
|
|
color: #000000;
|
|
font-size: 34rpx;
|
|
height: 34rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.body-content {
|
|
flex: 1;
|
|
background-color: #ffffff;
|
|
border-radius: 15rpx;
|
|
padding: 36rpx;
|
|
overflow: auto;
|
|
}
|
|
|
|
.tips {
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
margin-top: 24rpx;
|
|
margin-bottom: 28rpx;
|
|
}
|
|
|
|
.num {
|
|
display: flex;
|
|
width: 100%;
|
|
// height: 92rpx;
|
|
justify-content: space-between;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.num-pic {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
// margin-top: 20rpx;
|
|
margin-right: 20rpx;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.num-box {
|
|
flex: 1;
|
|
display: flex;
|
|
// height: 100%;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slider-box {
|
|
width: 100%;
|
|
|
|
:deep(.uv-slider) {
|
|
width: 100%;
|
|
}
|
|
|
|
:deep(uni-slider) {
|
|
margin: 0 0rpx 10rpx 0;
|
|
}
|
|
|
|
:deep(.uni-slider-tap-area) {
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
:deep(.uni-slider-thumb) {
|
|
border: 2px solid #0066ff;
|
|
}
|
|
|
|
:deep(.uni-slider-value) {
|
|
color: #0066ff;
|
|
font-size: 15px;
|
|
margin-left: 1em;
|
|
font-weight: 600;
|
|
font-family: Arial;
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.tab-btn {
|
|
width: 78rpx;
|
|
height: 36rpx;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #999999;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.is-active {
|
|
color: #0066ff;
|
|
border: 2rpx solid #0066ff;
|
|
}
|
|
|
|
.input-textarea {
|
|
// height: 250rpx;
|
|
// padding-bottom: 250rpx;
|
|
}
|
|
|
|
.btn-box {
|
|
position: fixed;
|
|
bottom: 0;
|
|
// height: 187rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
padding-bottom: 30rpx;
|
|
justify-content: space-evenly;
|
|
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
padding-top: 37rpx;
|
|
justify-content: space-around;
|
|
background-color: #ffffff;
|
|
border-top: 2rpx solid #e5e5e5;
|
|
z-index: 1000;
|
|
|
|
:deep(.uv-button) {
|
|
border-radius: 14rpx;
|
|
width: 616rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.c-666 {
|
|
color: #666666;
|
|
}
|
|
|
|
.c-000 {
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
|
|
.fixed_search_div {
|
|
padding: calc(var(--status-bar-height)) 15rpx 14rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.back_div {
|
|
padding: 15rpx;
|
|
.back-icon {
|
|
position: relative;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.back-icon::before,
|
|
.back-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.back-icon::after {
|
|
top: 25%;
|
|
left: 25%;
|
|
width: 40%;
|
|
height: 40%;
|
|
border-top: 4rpx solid #2b2c2e;
|
|
border-left: 4rpx solid #2b2c2e;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
</style>
|