Skip to content

T
thinkApp
Commit bc1a4ba5 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent acbf7c79
Hide whitespace changes
Inline Side-by-side
Showing with 422 additions and 346 deletions
src/components/setComments/rulesPopup.vue
View file @ bc1a4ba5
<template> <template>
<view class="rulesPopup-box"> <view class="rulesPopup-box">
<van-popup :show="show" :round="true" @close="closepopup"> <van-popup :show="show" :round="true" @close="closepopup">
<view class="rulesPopup-box"> <view class="rulesPopup-box">
<van-icon class="rulesPopup-closure" name="cross" @click="closepopup"/> <van-icon class="rulesPopup-closure" name="cross" @click="closepopup" />
<view class="rulesPopup-title">自定义评论规则</view> <view class="rulesPopup-title">自定义评论规则</view>
<view class="rulesPopup-content"> <view class="rulesPopup-content">
<input v-model="uploadParm.ExamName" class="rulesPopup-name" placeholder="请输入本组自定义规则名称"/> <input v-model="ruleObj.Title" class="rulesPopup-name" placeholder="请输入本组自定义规则名称" />
<view class="rulesPopup-RuleSettings"> <view class="rulesPopup-RuleSettings">
<text class="RuleSettings-title">规则设置</text> <text class="RuleSettings-title">规则设置</text>
<view class="RuleSettings-slider"> <view class="RuleSettings-slider">
<van-slider v-model="value" bar-height="10rpx" active-color="#ee0a24"> <van-slider v-model="valueNum" :range="isRange" @change="onChange" />
<template #button> </view>
<div class="custom-button">{{ value }}</div> </view>
</template> </view>
</van-slider> <view class="RuleSettings-content">
<!-- <van-slider v-model="valueNum" range <textarea placeholder="请填写评论内容" v-model="ruleObj.Info"></textarea>
bar-height="4px" active-color="#ee0a24" </view>
@change="onChange" /> --> <view class="rulesPopup-save flex">
</view> <view @click="save">保存</view>
</view> </view>
</view> </view>
<view class="RuleSettings-content"> </van-popup>
<textarea placeholder="请填写评论内容"></textarea>
</view>
<view class="rulesPopup-save flex">
<view @click="save">保存</view>
</view>
</view>
</van-popup>
</view> </view>
</template> </template>
<script> <script>
import { import {
ref, ref,
reactive, reactive,
toRefs, toRefs,
onMounted, onMounted,
getCurrentInstance, getCurrentInstance,
inject, inject,
watch watch
} from "vue"; } from "vue";
import { uploadFile } from "@/utils/index"; import {
uploadFile
} from "@/utils/index";
export default { export default {
props: { props: {
}, },
emits: ['change'],
components: {}, components: {},
setup(props,ctx) { setup(props, ctx) {
// 双滑块模式时，值必须是数组 let {
const value = ref([10, 50]);
let {
proxy proxy
} = getCurrentInstance(); } = getCurrentInstance();
let data = reactive({ let data = reactive({
valueNum: ref([0, 0]), valueNum: [10, 50],
show: false, show: false,
loading: false, loading: false,
isRange: true,
ruleObj: {
DetailId: 0, //详情编号
Title: "", //标题
StartNum: 0, //开始值
EndNum: 0, //结束值
Info: "", //评价
}
}); });
let methods = { let methods = {
showFun(){ showFun(item) {
data.show = true if (item) {
}, data.ruleObj.DetailId = item.DetailId;
closepopup(){ data.ruleObj.StartNum = item.StartNum;
data.show = false data.ruleObj.EndNum = item.EndNum;
}, data.ruleObj.Info = item.Info;
onChange(value){ } else {
console.log(value) data.ruleObj.DetailId = 0;
// data.valueNum = value data.ruleObj.StartNum = 0;
// console.log(data.valueNum) data.ruleObj.EndNum = 0;
}, data.ruleObj.Info = "";
save(){ }
data.show = false data.show = true
} },
}; closepopup() {
data.show = false
},
onChange(value) {
console.log(value)
},
save() {
data.ruleObj.StartNum = data.valueNum[0];
data.ruleObj.EndNum = data.valueNum[1];
ctx.emit("change", data.ruleObj);
data.show = false
}
};
let that = methods; let that = methods;
return { return {
...toRefs(data), ...toRefs(data),
value, ...methods
...methods
}; };
}, },
onLoad(){ onLoad() {
}, },
onShow() { onShow() {
} }
}; };
</script> </script>
<style scoped> <style scoped>
.custom-button { .custom-button {
width: 26rpx; width: 26rpx;
color: #fff; color: #fff;
font-size: 20rpx; font-size: 20rpx;
line-height: 36rpx; line-height: 36rpx;
text-align: center;
background-color: #ee0a24;
border-radius: 100rpx;
}
.RuleSettings-slider{
padding: 52rpx 0 66rpx 0;
}
.rulesPopup-save view{
background: #C91727;
font-size: 30rpx;
font-weight: bold;
letter-spacing: 1rpx;
width: 260rpx;
line-height: 88rpx;
border-radius: 44rpx;
text-align: center;
color: #FFFFFF;
}
.rulesPopup-save{
justify-content: flex-end;
margin-top: 40rpx;
}
.RuleSettings-content textarea{
width: 100%;
}
.RuleSettings-content{
background: #F7F7F7;
border-radius: 30rpx;
min-height: 152rpx;
padding: 37rpx 43rpx;
}
.RuleSettings-title{
font-size: 30rpx;
font-weight: bold;
color: #282828;
}
.rulesPopup-box .noData{
text-align: center; text-align: center;
flex:1; background-color: #ee0a24;
border-radius: 100rpx;
}
.RuleSettings-slider {
padding: 52rpx 0 66rpx 0;
}
.rulesPopup-save view {
background: #C91727;
font-size: 30rpx;
font-weight: bold;
letter-spacing: 1rpx;
width: 260rpx;
line-height: 88rpx;
border-radius: 44rpx;
text-align: center;
color: #FFFFFF;
}
.rulesPopup-save {
justify-content: flex-end;
margin-top: 40rpx;
}
.RuleSettings-content textarea {
width: 100%; width: 100%;
} }
.rulesPopup-box .noData image{
width:200rpx; .RuleSettings-content {
background: #F7F7F7;
border-radius: 30rpx;
min-height: 152rpx;
padding: 37rpx 43rpx;
}
.RuleSettings-title {
font-size: 30rpx;
font-weight: bold;
color: #282828;
}
.rulesPopup-box .noData {
text-align: center;
flex: 1;
width: 100%;
}
.rulesPopup-box .noData image {
width: 200rpx;
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.rulesPopup-box .noData view{
.rulesPopup-box .noData view {
font-size: 24rpx; font-size: 24rpx;
color: #cecece; color: #cecece;
text-align: center; text-align: center;
} }
.rulesPopup-RuleSettings{
background: #FCEEEF; .rulesPopup-RuleSettings {
border-radius: 30rpx; background: #FCEEEF;
padding: 35rpx 41rpx; border-radius: 30rpx;
margin-top: 51rpx; padding: 35rpx 41rpx;
margin-bottom: 40rpx; margin-top: 51rpx;
} margin-bottom: 40rpx;
.rulesPopup-name{ }
background-color: #F7F7F7;
text-align: center; .rulesPopup-name {
border: 1px solid #F7F7F7; background-color: #F7F7F7;
height: 88rpx; text-align: center;
line-height: 88rpx; border: 1px solid #F7F7F7;
padding: 0 10rpx; height: 88rpx;
border-radius: 44rpx; line-height: 88rpx;
font-size: 30rpx; padding: 0 10rpx;
letter-spacing: 1rpx; border-radius: 44rpx;
} font-size: 30rpx;
.rulesPopup-title{ letter-spacing: 1rpx;
width: 100%; }
text-align: center;
font-size: 30rpx; .rulesPopup-title {
font-weight: 500; width: 100%;
margin-bottom: 73rpx; text-align: center;
letter-spacing: 1rpx; font-size: 30rpx;
} font-weight: 500;
.rulesPopup-closure{ margin-bottom: 73rpx;
position: absolute; letter-spacing: 1rpx;
right: 31rpx; }
top: 31rpx;
color: #282828; .rulesPopup-closure {
font-size: 38rpx; position: absolute;
} right: 31rpx;
.rulesPopup-box{ top: 31rpx;
position: relative; color: #282828;
width: 548rpx; font-size: 38rpx;
padding: 48rpx 55rpx 60rpx 55rpx; }
}
.rulesPopup-box{ .rulesPopup-box {
position: relative;
} width: 548rpx;
padding: 48rpx 55rpx 60rpx 55rpx;
}
.rulesPopup-box {}
</style> </style>
src/pages/setComments/commentRulesList.vue
View file @ bc1a4ba5
...@@ -6,44 +6,19 @@ ...@@ -6,44 +6,19 @@
<text class="commentRulesList-header-title">评论规则</text> <text class="commentRulesList-header-title">评论规则</text>
</view> </view>
</navbar> </navbar>
<!-- <view class="commentRulesList-content">
<view class="commentRulesList-title flex">
<van-image class="img" width="35rpx" height="40rpx" fit="cover"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980136000_413.png" />
<text>默认评论规则</text>
</view>
<view class="commentRulesList-list">
<view class="commentRulesList-cross" @click="deleteRules">
<van-icon name="cross" />
</view>
<view class="commentRulesList-img flex">
<view>百分比： 0%-40%</view>
<van-image @click="editRules" class="img" width="31rpx" height="30rpx" fit="cover"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980151000_180.png" />
</view>
<view class="commentRulesList-comment">
这位学员很优秀，平时课上的问题都
能积极回答，正确率非常高
。这次考试得分也很高，希望再接再厉
</view>
</view>
<view class="noData">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653902791000_806.png" mode="widthFix"></image>
<view>暂无评论规则数据</view>
</view>
</view> -->
<view class="commentRulesList-content"> <view class="commentRulesList-content">
<view class="commentRulesList-title flex"> <view class="commentRulesList-title flex">
<van-image class="img" width="35rpx" height="40rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980136000_413.png" /> <van-image class="img" width="35rpx" height="40rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980136000_413.png" />
<text>{{courseRule.Title}}</text> <text>{{courseRule.Title}}</text>
</view> </view>
<view class="commentRulesList-list" v-if="courseRule" v-for="(item,index) in courseRule.CommentDetails"> <view class="commentRulesList-list" v-if="courseRule" v-for="(item,index) in courseRule.CommentDetails">
<view class="commentRulesList-cross" v-if="courseRule.Id>0" @click="deleteRules"> <view class="commentRulesList-cross" v-if="courseRule.Id>0" @click="deleteRules(item,index)">
<van-icon name="cross" /> <van-icon name="cross" />
</view> </view>
<view class="commentRulesList-img flex"> <view class="commentRulesList-img flex">
<view>百分比: {{item.StartNum}}%-{{item.EndNum}}%</view> <view>百分比: {{item.StartNum}}%-{{item.EndNum}}%</view>
<van-image v-if="courseRule.Id>0" @click="editRules" class="img" width="31rpx" height="30rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980151000_180.png" /> <van-image v-if="courseRule.Id>0" @click="editRules(item)" class="img" width="31rpx" height="30rpx" fit="cover"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980151000_180.png" />
</view> </view>
<view class="commentRulesList-comment"> <view class="commentRulesList-comment">
{{item.Info}} {{item.Info}}
...@@ -60,17 +35,17 @@ ...@@ -60,17 +35,17 @@
<text @click="addRules">添加自定义规则</text> <text @click="addRules">添加自定义规则</text>
<view class="Wire"></view> <view class="Wire"></view>
</view> </view>
<view class="save flex"><text @click="saveRules">保存</text></view> <view class="save flex"><text v-if="!isDefaultRule" @click="saveRules">保存</text></view>
</view> </view>
</view> </view>
<rulesPopup ref="getrulesPopup"></rulesPopup> <rulesPopup ref="getrulesPopup" @change="changeData"></rulesPopup>
</view> </view>
</template> </template>
<script> <script>
import rulesPopup from '@/components/setComments/rulesPopup' import rulesPopup from '@/components/setComments/rulesPopup'
import setComments from '@/components/setComments/setComments'
import { import {
ref, ref,
reactive, reactive,
toRefs, toRefs,
onMounted, onMounted,
...@@ -84,11 +59,12 @@ ...@@ -84,11 +59,12 @@
}, },
components: { components: {
navbar, navbar,
setComments,
rulesPopup rulesPopup
}, },
setup() { setup() {
let { refs } = getCurrentInstance(); let {
refs
} = getCurrentInstance();
let { let {
proxy proxy
} = getCurrentInstance(); } = getCurrentInstance();
...@@ -96,58 +72,70 @@ ...@@ -96,58 +72,70 @@
Msg: { Msg: {
CourseId: '', CourseId: '',
}, },
showPhone: false, //课程规则
showLogin: true, //多次点击 courseRule: {
HomeWorkId:'', Id: 0,
jobDetails: {}, Title: "",
dataList:[], CourseId: 0,
pageState:'more', CommentDetails: [], //规则详情
courseRule: {}, //课程规则 }, //课程规则
isDefaultRule: true, //是否是默认规则（
detailItem: {}, //当前编辑项
}); });
let methods = { let methods = {
back() { back() {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}) })
}, },
saveRules(){//保存规则 saveRules() { //保存规则
proxy.$request("/Teacher/SetCourseComment", data.courseRule).then(res => {
}, if (res) {
addRules(){//添加规则 uni.showToast({
data.show = true title: '操作成功!',
refs.getrulesPopup.$vm.showFun() icon: 'none',
}, duration: 500
editRules(){//编辑规则 })
data.show = true this.getCourseRule()
refs.getrulesPopup.$vm.showFun() }
}, })
deleteRules (){//删除规则 },
uni.showModal({ //添加规则
title: '提示', addRules() {
content: '将删除该规则,是否继续', data.show = true
success: function (res) { refs.getrulesPopup.$vm.showFun()
if (res.confirm) { },
console.log('---') //编辑规则
} else if (res.cancel) { editRules(item) {
uni.showToast({ data.show = true
title:'已取消',
icon:'none',
duration: 500
})
}
}
});
},
editRules() { //编辑规则
refs.getrulesPopup.$vm.showFun(item)
}, },
deleteRules() { //删除规则 //删除规则
deleteRules(item, index) {
let self=this;
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '将删除该规则,是否继续', content: '将删除该规则,是否继续',
success: function(res) { success: function(res) {
if (res.confirm) { if (res.confirm) {
console.log('---') if (item.DetailId > 0) {
let delMsg = {
DetailIds: item.DetailId
};
proxy.$request("/Teacher/RemoveCourseCommentDetail", delMsg).then(res => {
if (res.Code == 1) {
uni.showToast({
title: '删除成功!',
icon: 'none',
duration: 500
});
self.getCourseRule();
}
})
} else {
data.courseRule.CommentDetails.splice(index, 1);
}
} else if (res.cancel) { } else if (res.cancel) {
uni.showToast({ uni.showToast({
title: '已取消', title: '已取消',
...@@ -162,9 +150,49 @@ ...@@ -162,9 +150,49 @@
getCourseRule() { getCourseRule() {
proxy.$request("/Teacher/GetCourseComment", data.Msg).then(res => { proxy.$request("/Teacher/GetCourseComment", data.Msg).then(res => {
if (res) { if (res) {
data.courseRule = res.Data; var tempData = res.Data;
if (tempData) {
data.courseRule.Id = tempData.Id;
data.courseRule.Title = tempData.Title;
data.courseRule.CourseId = tempData.CourseId;
data.courseRule.CommentDetails = tempData.CommentDetails;
}
if (res.Data.Id == 0) {
data.isDefaultRule = true;
} else {
data.isDefaultRule = false;
}
} }
}) })
},
//获取子组件数据
changeData(item) {
console.log("item", item);
if (item) {
if (item.Title && item.Title != '') {
data.courseRule.Title = item.Title
}
if (data.isDefaultRule) {
data.courseRule.CommentDetails = [];
}
let obj = {
DetailId: item.DetailId,
StartNum: item.StartNum,
EndNum: item.EndNum,
Info: item.Info
}
if (item.DetailId > 0 && data.courseRule.CommentDetails.length > 0) {
let chooseIndex = data.courseRule.CommentDetails.findIndex(qitem => qitem.DetailId == item.DetailId);
data.courseRule.CommentDetails[chooseIndex].StartNum = obj.StartNum;
data.courseRule.CommentDetails[chooseIndex].EndNum = obj.EndNum;
data.courseRule.CommentDetails[chooseIndex].Info = obj.Info;
} else {
data.courseRule.CommentDetails.push(obj)
}
}
if (data.isDefaultRule) {
data.isDefaultRule = false;
}
} }
} }
return { return {
...@@ -195,128 +223,151 @@ ...@@ -195,128 +223,151 @@
color: #cecece; color: #cecece;
text-align: center; text-align: center;
} }
.save{
margin-left: 24rpx; .save {
} margin-left: 24rpx;
.Wire{ }
width: 2rpx;
height: 32rpx; .Wire {
background: #DCDCDC; width: 2rpx;
margin-left: 24rpx; height: 32rpx;
flex-shrink: 0; background: #DCDCDC;
margin-top: 25rpx; margin-left: 24rpx;
} flex-shrink: 0;
.save text{ margin-top: 25rpx;
background: #D13A48; }
color: #FFFFFF;
} .save text {
.add text{ background: #D13A48;
background: #FFFFFF; color: #FFFFFF;
color: #D13A48; }
}
.add text,.save text{ .add text {
line-height: 88rpx; background: #FFFFFF;
flex-grow: 2; color: #D13A48;
border: 1rpx solid #D13A48; }
border-radius: 44rpx;
text-align: center; .add text,
font-weight: bold; .save text {
font-size: 30rpx; line-height: 88rpx;
letter-spacing: 1rpx; flex-grow: 2;
} border: 1rpx solid #D13A48;
.add,.save{ border-radius: 44rpx;
flex: 0 0 50%; text-align: center;
flex-shrink: 0; font-weight: bold;
} font-size: 30rpx;
.commentRulesList-footer{ letter-spacing: 1rpx;
padding: 29rpx 70rpx; }
align-items: center;
} .add,
.commentRulesList-footer-box{ .save {
position: fixed; flex: 0 0 50%;
left: 0; flex-shrink: 0;
right: 0; }
bottom: 0;
z-index: 1; .commentRulesList-footer {
background: #FFFFFF; padding: 29rpx 70rpx;
box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34); align-items: center;
} }
.commentRulesList-comment{
font-size: 30rpx; .commentRulesList-footer-box {
font-weight: 400; position: fixed;
color: #282828; left: 0;
line-height: 58rpx; right: 0;
letter-spacing: 1rpx; bottom: 0;
} z-index: 1;
.commentRulesList-img .img{ background: #FFFFFF;
margin-top: 5rpx; box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34);
flex-shrink: 0; }
}
.commentRulesList-img view{ .commentRulesList-comment {
flex-grow: 1; font-size: 30rpx;
margin-right: 15rpx; font-weight: 400;
} color: #282828;
.commentRulesList-img{ line-height: 58rpx;
justify-content: space-between; letter-spacing: 1rpx;
align-items: center; }
font-size: 30rpx;
font-weight: bold; .commentRulesList-img .img {
color: #D9868D; margin-top: 5rpx;
margin-bottom: 34rpx; flex-shrink: 0;
} }
.commentRulesList-cross{
position: absolute; .commentRulesList-img view {
right: -12rpx; flex-grow: 1;
top: -12rpx; margin-right: 15rpx;
width: 44rpx; }
height: 44rpx;
background: #FFFFFF; .commentRulesList-img {
box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34); justify-content: space-between;
border-radius: 10rpx; align-items: center;
font-size: 26rpx; font-size: 30rpx;
color: #D9868D; font-weight: bold;
text-align: center; color: #D9868D;
line-height: 44rpx; margin-bottom: 34rpx;
} }
.commentRulesList-list{
background: #FCEEEF; .commentRulesList-cross {
border-radius: 30px; position: absolute;
position: relative; right: -12rpx;
padding: 37rpx 38rpx 36rpx 45rpx; top: -12rpx;
margin-bottom: 40rpx; width: 44rpx;
min-height: 290rpx; height: 44rpx;
} background: #FFFFFF;
.commentRulesList-title .img{ box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34);
flex-shrink: 0; border-radius: 10rpx;
display: inline-block; font-size: 26rpx;
margin-top: 5rpx; color: #D9868D;
} text-align: center;
.commentRulesList-title text{ line-height: 44rpx;
font-size: 40rpx; }
font-weight: bold;
color: #282828; .commentRulesList-list {
margin-left: 29rpx; background: #FCEEEF;
letter-spacing: 1rpx; border-radius: 30px;
} position: relative;
.commentRulesList-title{ padding: 37rpx 38rpx 36rpx 45rpx;
align-items: center; margin-bottom: 40rpx;
margin-bottom: 35rpx; min-height: 290rpx;
} }
.commentRulesList-content{
padding: 0 50rpx; .commentRulesList-title .img {
margin-bottom: 240rpx; flex-shrink: 0;
} display: inline-block;
.commentRulesList-box{ margin-top: 5rpx;
background: #FFFFFF; }
}
.commentRulesList-header-title{ .commentRulesList-title text {
font-size: 32rpx; font-size: 40rpx;
font-weight: 500; font-weight: bold;
color: #282828; color: #282828;
flex:1; margin-left: 29rpx;
text-align: center; letter-spacing: 1rpx;
padding-right: 40rpx; }
}
.commentRulesList-title {
align-items: center;
margin-bottom: 35rpx;
}
.commentRulesList-content {
padding: 0 50rpx;
margin-bottom: 240rpx;
}
.commentRulesList-box {
background: #FFFFFF;
}
.commentRulesList-header-title {
font-size: 32rpx;
font-weight: 500;
color: #282828;
flex: 1;
text-align: center;
padding-right: 40rpx;
}
.save { .save {
margin-left: 24rpx; margin-left: 24rpx;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment