页面修改

src/components/setComments/rulesPopup.vue

@@ -2,26 +2,19 @@
 	<view class="rulesPopup-box">
 		<van-popup :show="show" :round="true" @close="closepopup">
 			<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-content">
-                    <input v-model="uploadParm.ExamName" class="rulesPopup-name" placeholder="请输入本组自定义规则名称"/>
+					<input v-model="ruleObj.Title" class="rulesPopup-name" placeholder="请输入本组自定义规则名称" />
 					<view class="rulesPopup-RuleSettings">
 						<text class="RuleSettings-title">规则设置</text>
 						<view class="RuleSettings-slider">
-                            <van-slider v-model="value" bar-height="10rpx" active-color="#ee0a24">
-                                <template #button>
-                                    <div class="custom-button">{{ value }}</div>
-                                </template>
-                            </van-slider>
-                            <!-- <van-slider v-model="valueNum" range
-                            bar-height="4px" active-color="#ee0a24"
-                            @change="onChange" /> -->
+							<van-slider v-model="valueNum" :range="isRange" @change="onChange" />
 						</view>
 					</view>
 				</view>
 				<view class="RuleSettings-content">
-                    <textarea placeholder="请填写评论内容"></textarea>
+					<textarea placeholder="请填写评论内容" v-model="ruleObj.Info"></textarea>
 				</view>
 				<view class="rulesPopup-save flex">
 					<view @click="save">保存</view>
@@ -40,48 +33,67 @@
 		inject,
 		watch
 	} from "vue";
-    import { uploadFile } from "@/utils/index";
+	import {
+		uploadFile
+	} from "@/utils/index";
 	export default {
 		props: {
 
 		},
+		emits: ['change'],
 		components: {},
-		setup(props,ctx) {
-            // 双滑块模式时，值必须是数组
-            const value = ref([10, 50]);
+		setup(props, ctx) {
 			let {
 				proxy
 			} = getCurrentInstance();
 			let data = reactive({
-                valueNum: ref([0, 0]),
+				valueNum: [10, 50],
 				show: false,
 				loading: false,
-
+				isRange: true,
+				ruleObj: {
+					DetailId: 0, //详情编号
+					Title: "", //标题
+					StartNum: 0, //开始值
+					EndNum: 0, //结束值
+					Info: "", //评价
+				}
 			});
 			let methods = {
-                showFun(){
+				showFun(item) {
+					if (item) {
+						data.ruleObj.DetailId = item.DetailId;
+						data.ruleObj.StartNum = item.StartNum;
+						data.ruleObj.EndNum = item.EndNum;
+						data.ruleObj.Info = item.Info;
+					} else {
+						data.ruleObj.DetailId = 0;
+						data.ruleObj.StartNum = 0;
+						data.ruleObj.EndNum = 0;
+						data.ruleObj.Info = "";
+					}
 					data.show = true
 				},
-                closepopup(){
+				closepopup() {
 					data.show = false
 				},
-                onChange(value){
+				onChange(value) {
 					console.log(value)
-                    // data.valueNum = value
-                    // console.log(data.valueNum)
 				},
-                save(){
+				save() {
+					data.ruleObj.StartNum = data.valueNum[0];
+					data.ruleObj.EndNum = data.valueNum[1];
+					ctx.emit("change", data.ruleObj);
 					data.show = false
 				}
 			};
 			let that = methods;
 			return {
 				...toRefs(data),
-                value,
 				...methods
 			};
 		},
-        onLoad(){
+		onLoad() {
 
 		},
 		onShow() {
@@ -99,10 +111,12 @@
 		background-color: #ee0a24;
 		border-radius: 100rpx;
 	}
-    .RuleSettings-slider{
+
+	.RuleSettings-slider {
 		padding: 52rpx 0 66rpx 0;
 	}
-    .rulesPopup-save view{
+
+	.rulesPopup-save view {
 		background: #C91727;
 		font-size: 30rpx;
 		font-weight: bold;
@@ -113,46 +127,55 @@
 		text-align: center;
 		color: #FFFFFF;
 	}
-    .rulesPopup-save{
+
+	.rulesPopup-save {
 		justify-content: flex-end;
 		margin-top: 40rpx;
 	}
-    .RuleSettings-content textarea{
+
+	.RuleSettings-content textarea {
 		width: 100%;
 	}
-    .RuleSettings-content{
+
+	.RuleSettings-content {
 		background: #F7F7F7;
 		border-radius: 30rpx;
 		min-height: 152rpx;
 		padding: 37rpx 43rpx;
 	}
-    .RuleSettings-title{
+
+	.RuleSettings-title {
 		font-size: 30rpx;
 		font-weight: bold;
 		color: #282828;
 	}
-	.rulesPopup-box .noData{
+
+	.rulesPopup-box .noData {
 		text-align: center;
-		flex:1;
+		flex: 1;
 		width: 100%;
 	}
-	.rulesPopup-box .noData image{
-		width:200rpx;
+
+	.rulesPopup-box .noData image {
+		width: 200rpx;
 		margin-bottom: 40rpx;
 	}
-	.rulesPopup-box .noData view{
+
+	.rulesPopup-box .noData view {
 		font-size: 24rpx;
 		color: #cecece;
 		text-align: center;
 	}
-    .rulesPopup-RuleSettings{
+
+	.rulesPopup-RuleSettings {
 		background: #FCEEEF;
 		border-radius: 30rpx;
 		padding: 35rpx 41rpx;
 		margin-top: 51rpx;
 		margin-bottom: 40rpx;
 	}
-    .rulesPopup-name{
+
+	.rulesPopup-name {
 		background-color: #F7F7F7;
 		text-align: center;
 		border: 1px solid #F7F7F7;
@@ -163,7 +186,8 @@
 		font-size: 30rpx;
 		letter-spacing: 1rpx;
 	}
-    .rulesPopup-title{
+
+	.rulesPopup-title {
 		width: 100%;
 		text-align: center;
 		font-size: 30rpx;
@@ -171,19 +195,20 @@
 		margin-bottom: 73rpx;
 		letter-spacing: 1rpx;
 	}
-    .rulesPopup-closure{
+
+	.rulesPopup-closure {
 		position: absolute;
 		right: 31rpx;
 		top: 31rpx;
 		color: #282828;
 		font-size: 38rpx;
 	}
-    .rulesPopup-box{
+
+	.rulesPopup-box {
 		position: relative;
 		width: 548rpx;
 		padding: 48rpx 55rpx 60rpx 55rpx;
 	}
-    .rulesPopup-box{
 
-    }
+	.rulesPopup-box {}
 </style>

src/pages/setComments/commentRulesList.vue

@@ -6,44 +6,19 @@
 				<text class="commentRulesList-header-title">评论规则</text>
 			</view>
 		</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-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>{{courseRule.Title}}</text>
 			</view>
 			<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" />
 				</view>
 				<view class="commentRulesList-img flex">
 					<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 class="commentRulesList-comment">
 					{{item.Info}}
@@ -60,15 +35,15 @@
 					<text @click="addRules">添加自定义规则</text>
 					<view class="Wire"></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>
-		<rulesPopup ref="getrulesPopup"></rulesPopup>
+		<rulesPopup ref="getrulesPopup" @change="changeData"></rulesPopup>
 	</view>
 </template>
 <script>
 	import rulesPopup from '@/components/setComments/rulesPopup'
-	import setComments from '@/components/setComments/setComments'
+
 	import {
 		ref,
 		reactive,
@@ -84,11 +59,12 @@
 		},
 		components: {
 			navbar,
-			setComments,
 			rulesPopup
 		},
 		setup() {
-            let { refs } = getCurrentInstance();
+			let {
+				refs
+			} = getCurrentInstance();
 			let {
 				proxy
 			} = getCurrentInstance();
@@ -96,13 +72,15 @@
 				Msg: {
 					CourseId: '',
 				},
-				showPhone: false,
-				showLogin: true, //多次点击
-                HomeWorkId:'',
-                jobDetails: {},
-                dataList:[],
-                pageState:'more',
-				courseRule: {}, //课程规则
+				//课程规则
+				courseRule: {
+					Id: 0,
+					Title: "",
+					CourseId: 0,
+					CommentDetails: [], //规则详情
+				}, //课程规则
+				isDefaultRule: true, //是否是默认规则（
+				detailItem: {}, //当前编辑项
 			});
 			let methods = {
 				back() {
@@ -110,44 +88,54 @@
 						delta: 1
 					})
 				},
-                saveRules(){//保存规则
-
+				saveRules() { //保存规则
+					proxy.$request("/Teacher/SetCourseComment", data.courseRule).then(res => {
+						if (res) {
+							uni.showToast({
+								title: '操作成功!',
+								icon: 'none',
+								duration: 500
+							})
+							this.getCourseRule()
+						}
+					})
 				},
-                addRules(){//添加规则
+				//添加规则
+				addRules() {
 					data.show = true
 					refs.getrulesPopup.$vm.showFun()
 				},
-                editRules(){//编辑规则
+				//编辑规则
+				editRules(item) {
 					data.show = true
-                    refs.getrulesPopup.$vm.showFun()
+
+					refs.getrulesPopup.$vm.showFun(item)
 				},
-                deleteRules (){//删除规则
+				//删除规则
+				deleteRules(item, index) {
+					let self=this;
 					uni.showModal({
 						title: '提示',
 						content: '将删除该规则,是否继续',
-                        success: function (res) {
+						success: function(res) {
 							if (res.confirm) {
-                                console.log('---')
-                            } else if (res.cancel) {
+								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',
+												title: '删除成功!',
+												icon: 'none',
 												duration: 500
-                                })
+											});
+											self.getCourseRule();
 										}
+									})
+								} else {
+									data.courseRule.CommentDetails.splice(index, 1);
 								}
-                    });
-                },
-				editRules() { //编辑规则
-
-				},
-				deleteRules() { //删除规则
-					uni.showModal({
-						title: '提示',
-						content: '将删除该规则,是否继续',
-						success: function(res) {
-							if (res.confirm) {
-								console.log('---')
 							} else if (res.cancel) {
 								uni.showToast({
 									title: '已取消',
@@ -162,9 +150,49 @@
 				getCourseRule() {
 					proxy.$request("/Teacher/GetCourseComment", data.Msg).then(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 {
@@ -195,10 +223,12 @@
 		color: #cecece;
 		text-align: center;
 	}
-    .save{
+
+	.save {
 		margin-left: 24rpx;
 	}
-    .Wire{
+
+	.Wire {
 		width: 2rpx;
 		height: 32rpx;
 		background: #DCDCDC;
@@ -206,15 +236,19 @@
 		flex-shrink: 0;
 		margin-top: 25rpx;
 	}
-    .save text{
+
+	.save text {
 		background: #D13A48;
 		color: #FFFFFF;
 	}
-    .add text{
+
+	.add text {
 		background: #FFFFFF;
 		color: #D13A48;
 	}
-    .add text,.save text{
+
+	.add text,
+	.save text {
 		line-height: 88rpx;
 		flex-grow: 2;
 		border: 1rpx solid #D13A48;
@@ -224,15 +258,19 @@
 		font-size: 30rpx;
 		letter-spacing: 1rpx;
 	}
-    .add,.save{
+
+	.add,
+	.save {
 		flex: 0 0 50%;
 		flex-shrink: 0;
 	}
-    .commentRulesList-footer{
+
+	.commentRulesList-footer {
 		padding: 29rpx 70rpx;
 		align-items: center;
 	}
-    .commentRulesList-footer-box{
+
+	.commentRulesList-footer-box {
 		position: fixed;
 		left: 0;
 		right: 0;
@@ -241,22 +279,26 @@
 		background: #FFFFFF;
 		box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34);
 	}
-    .commentRulesList-comment{
+
+	.commentRulesList-comment {
 		font-size: 30rpx;
 		font-weight: 400;
 		color: #282828;
 		line-height: 58rpx;
 		letter-spacing: 1rpx;
 	}
-    .commentRulesList-img .img{
+
+	.commentRulesList-img .img {
 		margin-top: 5rpx;
 		flex-shrink: 0;
 	}
-    .commentRulesList-img view{
+
+	.commentRulesList-img view {
 		flex-grow: 1;
 		margin-right: 15rpx;
 	}
-    .commentRulesList-img{
+
+	.commentRulesList-img {
 		justify-content: space-between;
 		align-items: center;
 		font-size: 30rpx;
@@ -264,7 +306,8 @@
 		color: #D9868D;
 		margin-bottom: 34rpx;
 	}
-    .commentRulesList-cross{
+
+	.commentRulesList-cross {
 		position: absolute;
 		right: -12rpx;
 		top: -12rpx;
@@ -278,7 +321,8 @@
 		text-align: center;
 		line-height: 44rpx;
 	}
-    .commentRulesList-list{
+
+	.commentRulesList-list {
 		background: #FCEEEF;
 		border-radius: 30px;
 		position: relative;
@@ -286,37 +330,44 @@
 		margin-bottom: 40rpx;
 		min-height: 290rpx;
 	}
-    .commentRulesList-title .img{
+
+	.commentRulesList-title .img {
 		flex-shrink: 0;
 		display: inline-block;
 		margin-top: 5rpx;
 	}
-    .commentRulesList-title text{
+
+	.commentRulesList-title text {
 		font-size: 40rpx;
 		font-weight: bold;
 		color: #282828;
 		margin-left: 29rpx;
 		letter-spacing: 1rpx;
 	}
-    .commentRulesList-title{
+
+	.commentRulesList-title {
 		align-items: center;
 		margin-bottom: 35rpx;
 	}
-    .commentRulesList-content{
+
+	.commentRulesList-content {
 		padding: 0 50rpx;
 		margin-bottom: 240rpx;
 	}
-    .commentRulesList-box{
+
+	.commentRulesList-box {
 		background: #FFFFFF;
 	}
-    .commentRulesList-header-title{
+
+	.commentRulesList-header-title {
 		font-size: 32rpx;
 		font-weight: 500;
 		color: #282828;
-		flex:1;
+		flex: 1;
 		text-align: center;
 		padding-right: 40rpx;
 	}
+
 	.save {
 		margin-left: 24rpx;
 	}