330 lines
7.3 KiB
Vue
330 lines
7.3 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-rate__wrap" ref="fui_rate_wrap">
|
||
<view class="fui-rate__item" :class="{'fui-rate__not-allowed':disabled}" :style="{paddingRight:spacing + 'rpx'}"
|
||
v-for="(item,index) in stars" :key="index" @touchstart.stop="touchstart" @touchmove.stop="touchmove"
|
||
@mousedown.stop="mousedown" @mousemove.stop="mousemove" @mouseup="mouseup">
|
||
<fui-icon :disabled="disabled" :name="getName(index,intScore,decimalScore)" :size="size"
|
||
:color="index < intScore || (index == intScore && decimalScore > 0) ? getActiveColor : color"></fui-icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// #ifdef APP-NVUE
|
||
const dom = uni.requireNativePlugin('dom');
|
||
// #endif
|
||
//非easycom模式取消注释引入字体组件，按实际路径进行调整
|
||
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
||
export default {
|
||
emits: ['change'],
|
||
name: "fui-rate",
|
||
// components:{
|
||
// fuiIcon
|
||
// },
|
||
props: {
|
||
max: {
|
||
type: [Number, String],
|
||
default: 5
|
||
},
|
||
score: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: "#CCCCCC"
|
||
},
|
||
activeColor: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
size: {
|
||
type: [Number, String],
|
||
default: 56
|
||
},
|
||
spacing: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
allowHalf: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
halfRate: {
|
||
type: [Number, String],
|
||
default: 0.2
|
||
},
|
||
touchable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
param: {
|
||
type: [Number, String],
|
||
default: 0
|
||
}
|
||
},
|
||
watch: {
|
||
max(newValue, oldValue) {
|
||
this.initData(newValue)
|
||
},
|
||
score(newValue, oldValue) {
|
||
this.initRateScore(newValue)
|
||
}
|
||
},
|
||
computed: {
|
||
getActiveColor() {
|
||
let color = this.activeColor;
|
||
if (!color || color === true) {
|
||
const app = uni && uni.$fui && uni.$fui.color;
|
||
color = (app && app.warning) || '#FFB703';
|
||
}
|
||
return color;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
stars: [],
|
||
pageX: 0,
|
||
parentWidth: 0,
|
||
intScore: 0,
|
||
decimalScore: 0,
|
||
isPC: false,
|
||
rated: false,
|
||
isMounted: false
|
||
};
|
||
},
|
||
created() {
|
||
this.initData(this.max)
|
||
this.initRateScore(this.score)
|
||
this.drawer = this.getParent()
|
||
},
|
||
mounted() {
|
||
this.isMounted = true;
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this._getSize()
|
||
}, 100)
|
||
})
|
||
// #ifdef H5
|
||
this.isPC = this.IsPC()
|
||
// #endif
|
||
},
|
||
// #ifdef H5
|
||
updated() {
|
||
if (!this.isMounted && !this.pageX) {
|
||
setTimeout(() => {
|
||
this._getSize()
|
||
}, 50)
|
||
}
|
||
},
|
||
// #endif
|
||
methods: {
|
||
getName(index, iScore, dScore) {
|
||
let name = 'star'
|
||
if (index < iScore) {
|
||
name += '-fill'
|
||
}
|
||
if (index === iScore && dScore > 0) {
|
||
name += 'half'
|
||
}
|
||
return name;
|
||
},
|
||
initData(vals) {
|
||
vals = Number(vals)
|
||
if (isNaN(vals)) {
|
||
vals = 5
|
||
}
|
||
vals = Math.ceil(vals)
|
||
this.stars = Array.from(new Array(vals + 1).keys()).slice(1)
|
||
},
|
||
initRateScore(val) {
|
||
val = Number(val);
|
||
let intVal = parseInt(val);
|
||
let decimalVal = val % 1;
|
||
if (!this.allowHalf) {
|
||
intVal = decimalVal > 0 ? intVal + 1 : intVal;
|
||
decimalVal = 0;
|
||
}
|
||
this.intScore = intVal;
|
||
this.decimalScore = decimalVal;
|
||
},
|
||
// #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
|
||
_setWidth(width) {
|
||
const sys = uni.getSystemInfoSync()
|
||
if (this.pageX < 0) {
|
||
this.parentWidth = width
|
||
} else if (this.pageX > sys.windowWidth) {
|
||
this.parentWidth = -width
|
||
}
|
||
},
|
||
setParentWidth(width) {
|
||
setTimeout(() => {
|
||
this._setWidth(width)
|
||
}, 100)
|
||
},
|
||
initParentWidth() {
|
||
if (this.drawer) {
|
||
const sys = uni.getSystemInfoSync()
|
||
let pWidth = this.drawer.width
|
||
if (!pWidth) {
|
||
this.drawer._getSize((width) => {
|
||
this._setWidth(width)
|
||
})
|
||
} else {
|
||
this._setWidth(pWidth)
|
||
}
|
||
}
|
||
},
|
||
_getSize() {
|
||
// #ifndef APP-NVUE
|
||
uni.createSelectorQuery()
|
||
// #ifndef MP-ALIPAY
|
||
.in(this)
|
||
// #endif
|
||
.select('.fui-rate__wrap')
|
||
.boundingClientRect()
|
||
.exec(ret => {
|
||
if (ret) {
|
||
this.pageX = ret[0].left || 0
|
||
this.initParentWidth()
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef APP-NVUE
|
||
dom.getComponentRect(this.$refs['fui_rate_wrap'], (ret) => {
|
||
const size = ret.size
|
||
if (size) {
|
||
this.pageX = size.left
|
||
this.initParentWidth()
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
_getRateScore(clientX) {
|
||
const distance = clientX - (this.pageX + this.parentWidth);
|
||
let score = 0;
|
||
if (distance > 0) {
|
||
let width = uni.upx2px((Number(this.size) + Number(this.spacing)));
|
||
score = distance / width;
|
||
let decimalScore = score % 1;
|
||
if (!this.allowHalf) {
|
||
decimalScore = decimalScore > 0 ? 1 : 0;
|
||
} else {
|
||
if (decimalScore > Number(this.halfRate)) {
|
||
decimalScore = decimalScore <= 0.5 ? 0.5 : 1;
|
||
} else {
|
||
decimalScore = 0;
|
||
}
|
||
}
|
||
score = parseInt(score) + decimalScore;
|
||
let max = Number(this.max)
|
||
score = score > max ? max : score;
|
||
}
|
||
this.initRateScore(score)
|
||
this.$emit('change', {
|
||
score: score,
|
||
param: this.param
|
||
});
|
||
},
|
||
touchstart(e) {
|
||
// #ifdef H5
|
||
if (this.isPC) return
|
||
// #endif
|
||
if (this.disabled) return
|
||
const {
|
||
clientX,
|
||
screenX
|
||
} = e.changedTouches[0]
|
||
// Nvue下为 screenX，其他平台为clientX
|
||
this._getRateScore(clientX || screenX)
|
||
},
|
||
touchmove(e) {
|
||
// #ifdef H5
|
||
if (this.isPC) return
|
||
// #endif
|
||
if (this.disabled || !this.touchable) return
|
||
const {
|
||
clientX,
|
||
screenX
|
||
} = e.changedTouches[0]
|
||
this._getRateScore(clientX || screenX)
|
||
},
|
||
mousedown(e) {
|
||
// #ifdef H5
|
||
if (!this.isPC || this.disabled) return
|
||
const {
|
||
clientX,
|
||
} = e
|
||
this._getRateScore(clientX)
|
||
this.rated = true
|
||
// #endif
|
||
},
|
||
mousemove(e) {
|
||
// #ifdef H5
|
||
if (!this.isPC || !this.rated || this.disabled || !this.touchable) return
|
||
const {
|
||
clientX
|
||
} = e
|
||
this._getRateScore(clientX)
|
||
// #endif
|
||
},
|
||
mouseup(e) {
|
||
// #ifdef H5
|
||
if (!this.isPC || this.disabled || !this.touchable) return
|
||
this.rated = false
|
||
// #endif
|
||
},
|
||
getParent(name = 'fui-drawer') {
|
||
let parent = this.$parent;
|
||
let parentName = parent.$options.name;
|
||
while (parentName !== name) {
|
||
parent = parent.$parent;
|
||
if (!parent) return false;
|
||
parentName = parent.$options.name;
|
||
}
|
||
return parent;
|
||
},
|
||
reset() {
|
||
this._getSize();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fui-rate__wrap {
|
||
/* #ifndef APP-NVUE */
|
||
display: inline-flex;
|
||
/* #endif */
|
||
line-height: 1;
|
||
font-size: 0;
|
||
flex-direction: row;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-rate__not-allowed {
|
||
/* #ifdef H5 */
|
||
cursor: not-allowed !important;
|
||
/* #endif */
|
||
}
|
||
</style> |