no message

src/components/setComments/rulesPopup.vue

@@ -9,9 +9,8 @@
 					<view class="rulesPopup-RuleSettings">
 						<text class="RuleSettings-title">规则设置</text>
 						<view class="RuleSettings-slider">
-							<van-slider v-model="valueNum" range
-							bar-height="4rpx" active-color="#ee0a24"
-							@change="onChange" />
+							<sRegionSlider :minValue="minValue" :maxValue="maxValue" :step="1"
+							@up="up"  @down="down"  @move="move" />
 						</view>
 					</view>
 				</view>
@@ -26,6 +25,7 @@
 	</view>
 </template>
 <script>
+	import sRegionSlider from '@/components/sregionslider/sregionslider'
 	import {
 		ref,
 		reactive,
@@ -39,17 +39,18 @@
 		uploadFile
 	} from "@/utils/index";
 	export default {
+		components: {
+			sRegionSlider
+		},
 		props: {
 
 		},
 		emits: ['change'],
-		components: {},
 		setup(props, ctx) {
 			let {
 				proxy
 			} = getCurrentInstance();
 			let data = reactive({
-				valueNum: [10, 50],
 				show: false,
 				loading: false,
 				isRange: true,
@@ -59,9 +60,22 @@
 					StartNum: 0, //开始值
 					EndNum: 0, //结束值
 					Info: "", //评价
-				}
+				},
+				minValue:0,
+				maxValue:10
 			});
 			let methods = {
+				chage(minValue,maxValue){
+					data.minValue = minValue;
+					data.maxValue = maxValue;
+				},
+				up(e){
+					// console.log(e);//// e中包含了原有的e信息, 并添加了custom对象
+					data.minValue = e.custom.minValue;
+					data.maxValue = e.custom.maxValue;
+				},
+				down(e){ },
+				move(e){ },
 				showFun(item) {
 					if (item) {
 						data.ruleObj.DetailId = item.DetailId;
@@ -115,7 +129,7 @@
 	}
 
 	.RuleSettings-slider {
-		padding: 52rpx 0 66rpx 0;
+		padding: 0 0 30rpx 0;
 	}
 
 	.rulesPopup-save view {

src/components/sregionslider/sregionslider.vue

+<template>
+	<view clipchildren= false>
+	  <text class="loading" :style="{opacity: lineLeft===0 ? '1' : '0'}">loading...</text>
+	  <view class="fj-slider-box" :style="{opacity: lineLeft!==0 ? '1' : '0'}" clipchildren= false>
+		<view class="tip" :style="{left:`${tipLeft}px`,opacity: tipShow ? '1' : '1'}">
+      {{curValue}}%
+      <view class="h"></view>
+    </view>
+		<view class="fj-slider" clipchildren= false>
+		  <view class="fj-line" ref="fj-line">
+        <view class="scale-box">
+          <view class="scale flex">
+            <view></view><view></view><view></view><view></view>
+            <view></view><view></view><view></view><view></view>
+          </view>
+        </view>
+      </view>
+		  <view v-if="maxLeft-minLeft>=0" class="fj-line-pull" :style="{left: `${minLeft + touchWidth/2}px`, width:`${Math.abs(maxLeft - minLeft)}px`}"></view>
+		  <view v-else class="fj-line-pull" :style="{left: `${minLeft + touchWidth/2- Math.abs(maxLeft - minLeft) }px`, width:`${Math.abs(maxLeft - minLeft)}px`}"></view>
+		  <view
+			class="fj-touch-left" ref="fjtouchleft"
+			@touchstart="touchstart($event, 'min')"
+			@touchmove="touchmove($event, 'min')"
+			@touchend="touchend($event, 'min')"
+			:style="{left:`${minLeft}px`}"
+		  >
+		  </view>
+		  <view
+			class="fj-touch-right"
+			@touchstart="touchstart($event, 'max')"
+			@touchmove="touchmove($event, 'max')"
+			@touchend="touchend($event, 'max')"
+			:style="{left:`${maxLeft}px`}"
+		  >
+		  </view>
+		</view>
+    <view class="fj-value">
+			<text class="fj-v-l" :style="{color: showMinNum===fillMinValue ? '#333' : '#999'}">{{fillMinValue}}</text>
+			<text class="fj-v-r" :style="{color: showMaxNum===fillValue ? '#333' : '#999'}">{{fillValue}}</text>
+		</view>
+	  </view>
+	</view>
+</template>
+
+
+<script>
+// #ifndef APP-PLUS
+ const createSelectorQuery = (that) => {
+  let  query = uni.createSelectorQuery().in(that);
+  // #ifdef MP-ALIPAY
+  query = my.createSelectorQuery();
+  // #endif 
+  return query;
+}
+// #endif
+
+// #ifdef APP-PLUS
+const dom = weex.requireModule('dom');
+// #endif
+export default {
+  name:'s-region-slider',
+  props: {
+    fillValue: { 
+      type: Number,
+      default: 100,
+    },
+	fillMinValue: {
+	  type: Number,
+	  default: 0,
+	},
+    minValue: { 
+      type: Number,
+      default: 0,
+    },
+    maxValue: { 
+      type: Number,
+      default: 100,
+    },
+    step: { 
+      type: Number,
+      default: 1,
+    },
+  },
+  watch: {
+    minValue(newVal, oldVla){
+		if(newVal < this.fillMinValue || this.maxValue > this.fillValue){
+			console.error(`请在${this.fillMinValue}-${this.fillValue}范围中设置`)
+			return;
+		}
+      this.sMinValue = newVal  - this.fillMinValue;
+      this.showMinNum = newVal;
+      this.minLeft = this.sMinValue / this.percentage;
+    },
+    maxValue(newVal, oldVla){
+		if(this.minValue<this.fillMinValue || newVal>this.fillValue){
+			console.error(`请在${this.fillMinValue}-${this.fillValue}范围中设置`)
+			return;
+		}
+      this.sMaxValue =  newVal  - this.fillMinValue;
+      this.showMaxNum =  newVal;
+      this.maxLeft = this.sMaxValue / this.percentage;
+    },
+    fillValue(newVal, oldVla){
+      this.sFillValue =  this.fillValue;
+    }
+  },
+  data() {
+    return {
+      tipShow:false,
+      tipLeft:0,
+
+      minLeft: 0, 
+      maxLeft: 0, 
+      
+      touchWidth:30, 
+
+      lineWidth:0, 
+      lineLeft:0, 
+	  
+	  showMinNum:0,
+	  showMaxNum:0,
+
+      curValue:0, 
+	  
+      sMinValue:0, 
+      sMaxValue:0, 
+	  sFillValue:0,
+	  sFillMinValue:0,
+	  
+      percentage: 0,
+      disX:0
+    };
+  },
+  mounted(){
+	 this.$nextTick().then(() => {
+		this.envir({
+			classname:'.fj-touch-left',
+			refname:this.$refs.fjtouchleft,
+			fn:(ret)=>{
+				this.touchWidth = ret.width;
+			}
+		})
+		this.envir({
+			classname:'.fj-line', 
+			refname:this.$refs['fj-line'],
+			fn:(ret)=>{
+				  this.lineWidth = ret.width;
+				  this.lineLeft = ret.left;// 
+				  
+				  this.sMinValue = (this.minValue - this.fillMinValue) >0 ? this.minValue - this.fillMinValue:0;
+				  this.sMaxValue =  (this.maxValue - this.fillMinValue) > 0 ? this.maxValue - this.fillMinValue: 0; 
+				  this.sFillValue = (this.fillValue - this.fillMinValue) >0 ?this.fillValue - this.fillMinValue:0;
+				 
+				  this.percentage = this.sFillValue / this.lineWidth;
+				
+				  this.minLeft = this.sMinValue / this.percentage;
+				  this.maxLeft = this.sMaxValue / this.percentage;
+				  
+				  this.showMaxNum = this.sMaxValue + this.fillMinValue;
+				  this.showMinNum = this.sMinValue + this.fillMinValue;
+			}
+		})
+	})
+
+  },
+  methods: {
+	envir(opt){
+		setTimeout(() => {
+			// #ifdef APP-PLUS
+			dom.getComponentRect(opt.refname, ret => {
+				const option = ret.size
+				opt.fn({
+					width: option.width,
+					height:option.height,
+					top: option.top,
+					bottom: option.bottom,
+					left: option.left,
+					right: option.right,
+				})
+			})
+			// #endif
+			
+			// #ifndef APP-PLUS
+			createSelectorQuery(this).select(opt.classname).boundingClientRect().exec((data)=>{
+			  const option = data[0];
+			  opt.fn({
+			  	width: option.width,
+			  	height:option.height,
+			  	top: option.top,
+			  	bottom: option.bottom,
+			  	left: option.left,
+			  	right: option.right,
+			  })
+			})
+			// #endif
+		},200)
+	},
+    touchstart(e, type) {
+      this.$emit('down', { 
+        ...e,
+        custom:{
+          type,
+          minValue: this.showMinNum,
+          maxValue: this.showMaxNum
+        }
+      })
+    },
+    touchmove(e, type) {
+	  // #ifndef APP-PLUS
+      const disX = e.touches[0].clientX - this.lineLeft
+	  // #endif
+	  // #ifdef APP-PLUS
+	   const disX = e.touches[0].screenX - this.lineLeft
+	   // #endif
+      if(disX < 0 || disX > this.lineWidth ) { return;}
+
+      if(type === 'min'){
+        this.minLeft = Math.floor(disX);
+        if(this.minLeft < 0) { this.minLeft = 0; return; }
+        if(this.maxLeft > this.lineWidth) { this.maxLeft = this.lineWidth; return; }
+        //if(this.maxLeft - this.minLeft <= this.touchWidth ) {this.minLeft = this.maxLeft - this.touchWidth; return;}
+        this.curValue = Math.floor(this.minLeft * this.percentage);
+      }
+      
+      if(type === 'max'){
+        this.maxLeft =  Math.ceil(disX);
+		if(this.minLeft < 0) { this.minLeft = 0; return; }
+        if(this.maxLeft > this.lineWidth) { this.maxLeft = this.lineWidth; return; }
+        // if(this.maxLeft - this.minLeft <= this.touchWidth ) {this.maxLeft = this.minLeft + this.touchWidth;return;}
+        this.curValue = Math.round(this.maxLeft * this.percentage);
+      }
+	  
+	  
+      this.tipShow = true;
+      this.tipLeft = Math.round((this.curValue) / this.percentage);
+	  this.tipLeft = this.tipLeft >= this.lineWidth?this.lineWidth:this.tipLeft
+	  this.tipLeft = this.tipLeft <= 0?0:this.tipLeft
+	  
+	  this.curValue = this.curValue + this.fillMinValue;
+	  
+      this.$emit('move', {
+        ...e,
+        custom:{
+          type,
+          minValue: this.showMinNum,
+          maxValue: this.showMaxNum,
+          curValue: this.curValue,
+        }
+
+      })
+    },
+    touchend(e, type) {
+      if(type === 'min') {
+        if(this.step === 1){
+          this.sMinValue = this.curValue - this.fillMinValue;
+        }else{
+          const stepnum = Math.round((this.minLeft * this.percentage) / this.step); 
+          this.sMinValue = stepnum * this.step;
+          this.minLeft = this.sMinValue / this.percentage;
+        }
+      }
+      if(type === 'max') {
+        if(this.step === 1){
+          this.sMaxValue = this.curValue - this.fillMinValue;
+        }else{
+          const stepnum = Math.round((this.maxLeft * this.percentage) / this.step);  
+          this.sMaxValue = stepnum * this.step;
+          if(this.sFillValue - this.sMaxValue < this.step) { this.sMaxValue =  this.sFillValue} 
+          this.maxLeft = this.sMaxValue / this.percentage;
+        }
+      }
+      this.tipShow = false;
+	  
+	  if(this.sMinValue <= this.sMaxValue) {
+		  this.showMaxNum = this.sMaxValue + this.fillMinValue;
+		  this.showMinNum = this.sMinValue + this.fillMinValue;
+	  }else{
+		  this.showMaxNum = this.sMinValue + this.fillMinValue;
+		  this.showMinNum = this.sMaxValue + this.fillMinValue;
+	  }
+	  
+      this.$emit('up', {
+        ...e, 
+        custom:{
+          type,
+          minValue: this.showMinNum < this.fillMinValue ?this.fillMinValue:this.showMinNum,
+          maxValue: this.showMaxNum > this.fillValue?this.fillValue:this.showMaxNum
+        }
+      })
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.scale view{
+  width: 2px;
+  height: 5px;
+  background: #282828;
+  border-radius: 1px;
+}
+.scale{
+  justify-content: space-between;
+}
+.scale-box{
+  position: absolute;
+  left: 10%;
+  right: 10%;
+  bottom: -3px;
+}
+
+.fj-slider-box{font-size:14px;}
+.loading{font-size:14px;margin-top: 20px;text-align: center;display: block;}
+.fj-value{position: relative;height:20px;}
+.fj-v-l,.fj-v-r{font-size: 14px;position: absolute;}
+.fj-v-l{left:0;}
+.fj-v-r{right:0;}
+
+.fj-slider {
+  position: relative;
+  height: 30px;
+  margin-top: 2px;
+}
+
+.fj-touch-left,.fj-touch-right {
+    opacity: 1  ;
+    position: absolute;
+    height: 15px;
+    width: 30px;
+    border-radius: 4px;
+    background: rgba(227,64,76,1);
+    z-index: 3;
+    margin-top: 7px;
+    box-shadow: 0px 0px 21px 0px rgba(201, 23, 39, 0.34);
+  }
+ 
+  .tip{
+    width: 37px;
+    position: relative;
+    padding: 1px 5px;
+    background: #FFFDFD;
+    color: rgba(227,64,76,1);
+    border-radius: 6px;
+    z-index: 4;
+    font-size: 14px;
+    text-align: center;
+  }
+  .h{
+    position: absolute;
+    display: inline-block;
+    width: 0px;
+    height: 0px;
+    left: 13px;
+    bottom: -5px;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+    border-top: 6px solid #FFFDFD;
+  }
+  .fj-line{position: relative;}
+  .fj-line, .fj-line-pull {
+    height: 5px;
+    background: #999;
+    position: absolute;
+    top:14px;
+    left: 15px;
+    right: 15px;
+    z-index: 1;
+    border-radius: 5px;
+  }
+  .fj-line-pull{z-index: 2;background: #282828;}
+
+</style>
+
+
+

src/pages/setComments/commentRulesList.vue

@@ -86,11 +86,16 @@
 				show:false
 			});
 			let methods = {
+				
 				back() {
 					uni.navigateBack({
 						delta: 1
 					})
 				},
+				// 关闭规则弹窗
+				closure(){
+					refs.getrulesPopup.$vm.closepopup()
+				},
 				saveRules() { //保存规则
 					proxy.$request("/Teacher/SetCourseComment", data.courseRule).then(res => {
 						if (res) {
@@ -113,6 +118,7 @@
 					data.show = true
 					refs.getrulesPopup.$vm.showFun(item)
 				},
+
 				//删除规则
 				deleteRules(item, index) {
 					let self=this;
@@ -208,6 +214,14 @@
 				this.show = option.show
 				this.addRules()
 			}
+			if(option.CourseId){
+				this.show = true
+				this.addRules()
+				setTimeout(()=>{
+					this.show = false
+					this.closure()
+				},100)
+			}
 			this.getCourseRule();
 		},
 	};