|
@@ -1,365 +1,131 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view ref="uni-rate" class="uni-rate">
|
|
|
- <view class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}"
|
|
|
- :style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index) in stars" :key="index"
|
|
|
- @touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown"
|
|
|
- @mousemove.stop="mousemove" @mouseleave="mouseleave">
|
|
|
- <image style='width:19px;height:19px;' src="./xingxing.png" mode=""></image>
|
|
|
- <!-- <uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" /> -->
|
|
|
- <!-- #ifdef APP-NVUE -->
|
|
|
- <view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
|
|
|
- <!-- <uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size"
|
|
|
- type="star-filled" /> -->
|
|
|
- <image style='width:19px;height:19px;' src="./xingxing_check.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef APP-NVUE -->
|
|
|
- <view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
|
|
|
- <!-- <uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" /> -->
|
|
|
- <!-- <image style='width:19px;height:19px;' src="'../../static/images/xingxing.png'" mode=""></image> -->
|
|
|
- <image style='width:19px;height:19px;' src="./xingxing_check.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <!-- #endif -->
|
|
|
+ <view class="rate-media">
|
|
|
+ <view class="rate-media-body">
|
|
|
+ <view class="rate-media-cell"
|
|
|
+ v-for="(item,index) in max"
|
|
|
+ :key="index"
|
|
|
+ @click="clickStars(index)">
|
|
|
+ <img :style="{'width': size + 'rpx','height':size+'rpx','margin':margin+'rpx'}" :src="valueSync>index?star_fill:star_empty"/>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="rate-media-info" v-if="is_score||is_attitude">
|
|
|
+ <view v-if="is_score">{{is_infos_text()}}</view>
|
|
|
+ <view v-if="is_attitude">{{rateScoreText}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- // #ifdef APP-NVUE
|
|
|
- const dom = uni.requireNativePlugin('dom');
|
|
|
- // #endif
|
|
|
- /**
|
|
|
- * Rate 评分
|
|
|
- * @description 评分组件
|
|
|
- * @tutorial https://ext.dcloud.net.cn/plugin?id=33
|
|
|
- * @property {Boolean} isFill = [true|false] 星星的类型,是否为实心类型, 默认为实心
|
|
|
- * @property {String} color 未选中状态的星星颜色,默认为 "#ececec"
|
|
|
- * @property {String} activeColor 选中状态的星星颜色,默认为 "#ffca3e"
|
|
|
- * @property {String} disabledColor 禁用状态的星星颜色,默认为 "#c0c0c0"
|
|
|
- * @property {Number} size 星星的大小
|
|
|
- * @property {Number} value/v-model 当前评分
|
|
|
- * @property {Number} max 最大评分评分数量,目前一分一颗星
|
|
|
- * @property {Number} margin 星星的间距,单位 px
|
|
|
- * @property {Boolean} disabled = [true|false] 是否为禁用状态,默认为 false
|
|
|
- * @property {Boolean} readonly = [true|false] 是否为只读状态,默认为 false
|
|
|
- * @property {Boolean} allowHalf = [true|false] 是否实现半星,默认为 false
|
|
|
- * @property {Boolean} touchable = [true|false] 是否支持滑动手势,默认为 true
|
|
|
- * @event {Function} change uniRate 的 value 改变时触发事件,e={value:Number}
|
|
|
- */
|
|
|
-
|
|
|
- export default {
|
|
|
- name: "UniRate",
|
|
|
- props: {
|
|
|
- isFill: {
|
|
|
- // 星星的类型,是否镂空
|
|
|
- type: [Boolean, String],
|
|
|
- default: true
|
|
|
+ export default{
|
|
|
+ name:'rate',
|
|
|
+ props:{
|
|
|
+ star_fill: {
|
|
|
+ //亮星星
|
|
|
+ type: [String],
|
|
|
+ default: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/star.png'
|
|
|
+ },
|
|
|
+ star_empty: {
|
|
|
+ //暗星星
|
|
|
+ type: [String],
|
|
|
+ default: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/star1.png'
|
|
|
+ },
|
|
|
+ score:{
|
|
|
+ type:Array,
|
|
|
+ default:function(){
|
|
|
+ return ['极差','差','一般','较好','非常好']
|
|
|
+ }
|
|
|
},
|
|
|
- color: {
|
|
|
- // 星星未选中的颜色
|
|
|
- type: String,
|
|
|
- default: "#ececec"
|
|
|
+ is_score:{
|
|
|
+ type: [Boolean, String],
|
|
|
+ default: false
|
|
|
},
|
|
|
- activeColor: {
|
|
|
- // 星星选中状态颜色
|
|
|
- type: String,
|
|
|
- default: "#ffca3e"
|
|
|
+ attitude:{
|
|
|
+ type: Array,
|
|
|
+ default:function(){
|
|
|
+ return ['非常不满意,各方面都很差', '不满意,比较差', '一般,还需改善', '比较满意,仍可改善', '非常满意,无可挑剔']
|
|
|
+ }
|
|
|
},
|
|
|
- disabledColor: {
|
|
|
- // 星星禁用状态颜色
|
|
|
- type: String,
|
|
|
- default: "#c0c0c0"
|
|
|
+ is_attitude:{
|
|
|
+ type: [Boolean, String],
|
|
|
+ default: false
|
|
|
},
|
|
|
size: {
|
|
|
// 星星的大小
|
|
|
type: [Number, String],
|
|
|
- default: 24
|
|
|
+ default: 48
|
|
|
},
|
|
|
value: {
|
|
|
// 当前评分
|
|
|
type: [Number, String],
|
|
|
default: 0
|
|
|
},
|
|
|
- modelValue: {
|
|
|
- // 当前评分
|
|
|
- type: [Number, String],
|
|
|
- default: 0
|
|
|
- },
|
|
|
max: {
|
|
|
// 最大评分
|
|
|
type: [Number, String],
|
|
|
default: 5
|
|
|
},
|
|
|
- margin: {
|
|
|
- // 星星的间距
|
|
|
- type: [Number, String],
|
|
|
- default: 0
|
|
|
- },
|
|
|
disabled: {
|
|
|
// 是否可点击
|
|
|
type: [Boolean, String],
|
|
|
default: false
|
|
|
},
|
|
|
- readonly: {
|
|
|
- // 是否只读
|
|
|
- type: [Boolean, String],
|
|
|
- default: false
|
|
|
- },
|
|
|
- allowHalf: {
|
|
|
- // 是否显示半星
|
|
|
- type: [Boolean, String],
|
|
|
- default: false
|
|
|
+ margin: {
|
|
|
+ // 星星的间距
|
|
|
+ type: [Number, String],
|
|
|
+ default: '0 5'
|
|
|
},
|
|
|
- touchable: {
|
|
|
- // 是否支持滑动手势
|
|
|
- type: [Boolean, String],
|
|
|
- default: true
|
|
|
- }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- valueSync: "",
|
|
|
- userMouseFristMove: true,
|
|
|
- userRated: false,
|
|
|
- userLastRate: 1
|
|
|
+ valueSync: 0,
|
|
|
+ rateScoreText:"",
|
|
|
};
|
|
|
},
|
|
|
- watch: {
|
|
|
- value(newVal) {
|
|
|
- this.valueSync = Number(newVal);
|
|
|
- },
|
|
|
- modelValue(newVal) {
|
|
|
- this.valueSync = Number(newVal);
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- stars() {
|
|
|
- const value = this.valueSync ? this.valueSync : 0;
|
|
|
- const starList = [];
|
|
|
- const floorValue = Math.floor(value);
|
|
|
- const ceilValue = Math.ceil(value);
|
|
|
- for (let i = 0; i < this.max; i++) {
|
|
|
- if (floorValue > i) {
|
|
|
- starList.push({
|
|
|
- activeWitch: "100%"
|
|
|
- });
|
|
|
- } else if (ceilValue - 1 === i) {
|
|
|
- starList.push({
|
|
|
- activeWitch: (value - floorValue) * 100 + "%"
|
|
|
- });
|
|
|
- } else {
|
|
|
- starList.push({
|
|
|
- activeWitch: "0"
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- return starList;
|
|
|
- },
|
|
|
-
|
|
|
- marginNumber() {
|
|
|
- return Number(this.margin)
|
|
|
- }
|
|
|
- },
|
|
|
created() {
|
|
|
- this.valueSync = Number(this.value || this.modelValue);
|
|
|
- this._rateBoxLeft = 0
|
|
|
- this._oldValue = null
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- setTimeout(() => {
|
|
|
- this._getSize()
|
|
|
- }, 100)
|
|
|
- // #ifdef H5
|
|
|
- this.PC = this.IsPC()
|
|
|
- // #endif
|
|
|
+console.log(this.is_score)
|
|
|
+ this.valueSync = Number(this.value);
|
|
|
},
|
|
|
methods: {
|
|
|
- touchstart(e) {
|
|
|
- // #ifdef H5
|
|
|
- if (this.IsPC()) return
|
|
|
- // #endif
|
|
|
- if (this.readonly || this.disabled) return
|
|
|
- const {
|
|
|
- clientX,
|
|
|
- screenX
|
|
|
- } = e.changedTouches[0]
|
|
|
- // TODO 做一下兼容,只有 Nvue 下才有 screenX,其他平台式 clientX
|
|
|
- this._getRateCount(clientX || screenX)
|
|
|
- },
|
|
|
- touchmove(e) {
|
|
|
- // #ifdef H5
|
|
|
- if (this.IsPC()) return
|
|
|
- // #endif
|
|
|
- if (this.readonly || this.disabled || !this.touchable) return
|
|
|
- const {
|
|
|
- clientX,
|
|
|
- screenX
|
|
|
- } = e.changedTouches[0]
|
|
|
- this._getRateCount(clientX || screenX)
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 兼容 PC @tian
|
|
|
- */
|
|
|
-
|
|
|
- mousedown(e) {
|
|
|
- // #ifdef H5
|
|
|
- if (!this.IsPC()) return
|
|
|
- if (this.readonly || this.disabled) return
|
|
|
- const {
|
|
|
- clientX,
|
|
|
- } = e
|
|
|
- this.userLastRate = this.valueSync
|
|
|
- this._getRateCount(clientX)
|
|
|
- this.userRated = true
|
|
|
- // #endif
|
|
|
- },
|
|
|
- mousemove(e) {
|
|
|
- // #ifdef H5
|
|
|
- if (!this.IsPC()) return
|
|
|
- if (this.userRated) return
|
|
|
- if (this.userMouseFristMove) {
|
|
|
- console.log('---mousemove----', this.valueSync);
|
|
|
- this.userLastRate = this.valueSync
|
|
|
- this.userMouseFristMove = false
|
|
|
- }
|
|
|
- if (this.readonly || this.disabled || !this.touchable) return
|
|
|
- const {
|
|
|
- clientX,
|
|
|
- } = e
|
|
|
- this._getRateCount(clientX)
|
|
|
- // #endif
|
|
|
- },
|
|
|
- mouseleave(e) {
|
|
|
- // #ifdef H5
|
|
|
- if (!this.IsPC()) return
|
|
|
- if (this.readonly || this.disabled || !this.touchable) return
|
|
|
- if (this.userRated) {
|
|
|
- this.userRated = false
|
|
|
- return
|
|
|
- }
|
|
|
- this.valueSync = this.userLastRate
|
|
|
- // #endif
|
|
|
- },
|
|
|
- // #ifdef H5
|
|
|
- IsPC() {
|
|
|
- var userAgentInfo = navigator.userAgent;
|
|
|
- var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
|
|
- var flag = true;
|
|
|
- for (let v = 0; v < Agents.length - 1; v++) {
|
|
|
- if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
|
|
- flag = false;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- return flag;
|
|
|
- },
|
|
|
- // #endif
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取星星个数
|
|
|
- */
|
|
|
- _getRateCount(clientX) {
|
|
|
- this._getSize()
|
|
|
- const size = Number(this.size)
|
|
|
- if (size === NaN) {
|
|
|
- return new Error('size 属性只能设置为数字')
|
|
|
- }
|
|
|
- const rateMoveRange = clientX - this._rateBoxLeft
|
|
|
- let index = parseInt(rateMoveRange / (size + this.marginNumber))
|
|
|
- index = index < 0 ? 0 : index;
|
|
|
- index = index > this.max ? this.max : index;
|
|
|
- const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
|
|
|
- let value = 0;
|
|
|
- if (this._oldValue === index && !this.PC) return;
|
|
|
- this._oldValue = index;
|
|
|
- if (this.allowHalf) {
|
|
|
- if (range > (size / 2)) {
|
|
|
- value = index + 1
|
|
|
- } else {
|
|
|
- value = index + 0.5
|
|
|
- }
|
|
|
- } else {
|
|
|
- value = index + 1
|
|
|
- }
|
|
|
-
|
|
|
- value = Math.max(0.5, Math.min(value, this.max))
|
|
|
- this.valueSync = value
|
|
|
- this._onChange()
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 触发动态修改
|
|
|
- */
|
|
|
- _onChange() {
|
|
|
-
|
|
|
- this.$emit("input", this.valueSync);
|
|
|
- this.$emit("update:modelValue", this.valueSync);
|
|
|
- this.$emit("change", {
|
|
|
- value: this.valueSync
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取星星距离屏幕左侧距离
|
|
|
- */
|
|
|
- _getSize() {
|
|
|
- // #ifndef APP-NVUE
|
|
|
- uni.createSelectorQuery()
|
|
|
- .in(this)
|
|
|
- .select('.uni-rate')
|
|
|
- .boundingClientRect()
|
|
|
- .exec(ret => {
|
|
|
- if (ret) {
|
|
|
- this._rateBoxLeft = ret[0].left
|
|
|
- }
|
|
|
- })
|
|
|
- // #endif
|
|
|
- // #ifdef APP-NVUE
|
|
|
- dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
|
|
|
- const size = ret.size
|
|
|
- if (size) {
|
|
|
- this._rateBoxLeft = size.left
|
|
|
- }
|
|
|
- })
|
|
|
- // #endif
|
|
|
- }
|
|
|
+ clickStars(i){
|
|
|
+ if (this.disabled) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.rateScoreText = this.attitude[i]||''
|
|
|
+ this.valueSync = i+1
|
|
|
+ this.$emit("change", {
|
|
|
+ value: this.valueSync,
|
|
|
+ attitude: this.attitude[i]||'',
|
|
|
+ score: this.score[i]||''
|
|
|
+ });
|
|
|
+ },
|
|
|
+ is_infos_text(){
|
|
|
+ return this.score[this.valueSync-1||0]||''
|
|
|
+ },
|
|
|
+ // is_score_text(index){
|
|
|
+ // return this.score[index]
|
|
|
+ // }
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .uni-rate {
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
+ .rate-media{
|
|
|
display: flex;
|
|
|
- /* #endif */
|
|
|
- line-height: 1;
|
|
|
- font-size: 0;
|
|
|
- flex-direction: row;
|
|
|
- /* #ifdef H5 */
|
|
|
- cursor: pointer;
|
|
|
- /* #endif */
|
|
|
- }
|
|
|
-
|
|
|
- .uni-rate__icon {
|
|
|
- position: relative;
|
|
|
line-height: 1;
|
|
|
- font-size: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-rate__icon-on {
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- line-height: 1;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-cursor-not-allowed {
|
|
|
- /* #ifdef H5 */
|
|
|
- cursor: not-allowed !important;
|
|
|
- /* #endif */
|
|
|
+ justify-content: space-between;
|
|
|
+ .rate-media-body{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+ .rate-media-info{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #999;
|
|
|
+ font-size: 30rpx;
|
|
|
+ view:nth-child(1){
|
|
|
+ margin:0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|