新增营销系统、分销系统、会员功能、门店、提现功能
This commit is contained in:
Shaw
@ -2,16 +2,16 @@
|
||||
1. 修复支付宝不能选半星的BUG
|
||||
## 1.0.6（2023-08-23）
|
||||
1. 修复支付宝报错的BUG
|
||||
## 1.0.5（2023-07-13）
|
||||
优化代码
|
||||
## 1.0.4（2023-07-13）
|
||||
1. 修复value/v-model更改不生效的BUG
|
||||
## 1.0.3（2023-06-05）
|
||||
1. 修复只读或禁止状态下设置value无效的问题
|
||||
## 1.0.2（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.1（2023-05-12）
|
||||
1. 修复vue3中双向绑定问题
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-rate 评分
|
||||
## 1.0.5（2023-07-13）
|
||||
优化代码
|
||||
## 1.0.4（2023-07-13）
|
||||
1. 修复value/v-model更改不生效的BUG
|
||||
## 1.0.3（2023-06-05）
|
||||
1. 修复只读或禁止状态下设置value无效的问题
|
||||
## 1.0.2（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.1（2023-05-12）
|
||||
1. 修复vue3中双向绑定问题
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-rate 评分
|
||||
|
||||
@ -1,73 +1,73 @@
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 要显示的星星数量
|
||||
count: {
|
||||
type: [String, Number],
|
||||
default: 5
|
||||
},
|
||||
// 是否不可选中
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否只读
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 星星的大小，单位px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 18
|
||||
},
|
||||
// 未选中时的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#b2b2b2'
|
||||
},
|
||||
// 选中的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#FA3534'
|
||||
},
|
||||
// 星星之间的间距，单位px
|
||||
gutter: {
|
||||
type: [String, Number],
|
||||
default: 4
|
||||
},
|
||||
// 最少能选择的星星个数
|
||||
minCount: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
},
|
||||
// 是否允许半星
|
||||
allowHalf: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选中时的图标(星星)
|
||||
activeIcon: {
|
||||
type: String,
|
||||
default: 'star-fill'
|
||||
},
|
||||
// 未选中时的图标(星星)
|
||||
inactiveIcon: {
|
||||
type: String,
|
||||
default: 'star'
|
||||
},
|
||||
// 是否可以通过滑动手势选择评分
|
||||
touchable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.rate
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 要显示的星星数量
|
||||
count: {
|
||||
type: [String, Number],
|
||||
default: 5
|
||||
},
|
||||
// 是否不可选中
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否只读
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 星星的大小，单位px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 18
|
||||
},
|
||||
// 未选中时的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#b2b2b2'
|
||||
},
|
||||
// 选中的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#FA3534'
|
||||
},
|
||||
// 星星之间的间距，单位px
|
||||
gutter: {
|
||||
type: [String, Number],
|
||||
default: 4
|
||||
},
|
||||
// 最少能选择的星星个数
|
||||
minCount: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
},
|
||||
// 是否允许半星
|
||||
allowHalf: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选中时的图标(星星)
|
||||
activeIcon: {
|
||||
type: String,
|
||||
default: 'star-fill'
|
||||
},
|
||||
// 未选中时的图标(星星)
|
||||
inactiveIcon: {
|
||||
type: String,
|
||||
default: 'star'
|
||||
},
|
||||
// 是否可以通过滑动手势选择评分
|
||||
touchable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.rate
|
||||
}
|
||||
}
|
||||
@ -1,274 +1,274 @@
|
||||
<template>
|
||||
<view
|
||||
class="uv-rate"
|
||||
:id="elId"
|
||||
ref="uv-rate"
|
||||
:style="[$uv.addStyle(customStyle)]"
|
||||
>
|
||||
<view class="uv-rate__content"
|
||||
@touchmove.stop="touchMove"
|
||||
@touchend.stop="touchEnd">
|
||||
<view class="uv-rate__content__item"
|
||||
v-for="(item, index) in Number(count)"
|
||||
:key="index"
|
||||
:class="[elClass]">
|
||||
<view class="uv-rate__content__item__icon-wrap"
|
||||
ref="uv-rate__content__item__icon-wrap"
|
||||
@tap.stop="clickHandler($event, index + 1)">
|
||||
<uv-icon
|
||||
:name="Math.floor(activeIndex) > index? activeIcon : inactiveIcon"
|
||||
:color="disabled ? '#c8c9cc' : Math.floor(activeIndex) > index ? activeColor : inactiveColor"
|
||||
:custom-style="{
|
||||
'padding-left': $uv.addUnit(gutter / 2),
|
||||
'padding-right': $uv.addUnit(gutter / 2)
|
||||
}"
|
||||
:size="size"
|
||||
></uv-icon>
|
||||
</view>
|
||||
<view v-if="allowHalf"
|
||||
@tap.stop="clickHandler($event, index + 1)"
|
||||
class="uv-rate__content__item__icon-wrap uv-rate__content__item__icon-wrap--half"
|
||||
:style="[{ width: $uv.addUnit(rateWidth / 2)}]"
|
||||
ref="uv-rate__content__item__icon-wrap">
|
||||
<uv-icon
|
||||
:name=" Math.ceil(activeIndex) > index ? activeIcon : inactiveIcon "
|
||||
:color=" disabled ? '#c8c9cc' : Math.ceil(activeIndex) > index ? activeColor : inactiveColor "
|
||||
:custom-style="{
|
||||
'padding-left': $uv.addUnit(gutter / 2),
|
||||
'padding-right': $uv.addUnit(gutter / 2)
|
||||
}"
|
||||
:size="size">
|
||||
</uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule("dom");
|
||||
// #endif
|
||||
/**
|
||||
* rate 评分
|
||||
* @description 该组件一般用于满意度调查，星型评分的场景
|
||||
* @tutorial https://www.uvui.cn/components/rate.html
|
||||
* @property {String | Number} value 用于v-model双向绑定选中的星星数量 (默认 1 )
|
||||
* @property {String | Number} count 最多可选的星星数量 （默认 5 ）
|
||||
* @property {Boolean} disabled 是否禁止用户操作 （默认 false ）
|
||||
* @property {Boolean} readonly 是否只读 （默认 false ）
|
||||
* @property {String | Number} size 星星的大小，单位px （默认 18 ）
|
||||
* @property {String} inactiveColor 未选中星星的颜色 （默认 '#b2b2b2' ）
|
||||
* @property {String} activeColor 选中的星星颜色 （默认 '#FA3534' ）
|
||||
* @property {String | Number} gutter 星星之间的距离 （默认 4 ）
|
||||
* @property {String | Number} minCount 最少选中星星的个数 （默认 1 ）
|
||||
* @property {Boolean} allowHalf 是否允许半星选择 （默认 false ）
|
||||
* @property {String} activeIcon 选中时的图标名，只能为uvui的内置图标 （默认 'star-fill' ）
|
||||
* @property {String} inactiveIcon 未选中时的图标名，只能为uvui的内置图标 （默认 'star' ）
|
||||
* @property {Boolean} touchable 是否可以通过滑动手势选择评分 （默认 'false' ）
|
||||
* @property {Object} customStyle 组件的样式，对象形式
|
||||
* @event {Function} change 选中的星星发生变化时触发
|
||||
* @example <uv-rate :count="count" :value="2"></uv-rate>
|
||||
*/
|
||||
export default {
|
||||
name: "uv-rate",
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 生成一个唯一id，否则一个页面多个评分组件，会造成冲突
|
||||
elId: '',
|
||||
elClass: '',
|
||||
rateBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
|
||||
activeIndex: 0,
|
||||
rateWidth: 0, // 每个星星的宽度
|
||||
// 标识是否正在滑动，由于iOS事件上touch比click先触发，导致快速滑动结束后，接着触发click，导致事件混乱而出错
|
||||
moving: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal){
|
||||
this.activeIndex = newVal;
|
||||
},
|
||||
modelValue(newVal){
|
||||
this.activeIndex = newVal;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.activeIndex = Number(this.value || this.modelValue);
|
||||
this.elId = this.$uv.guid();
|
||||
this.elClass = this.$uv.guid();
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$uv.sleep(200).then(() => {
|
||||
this.getRateItemRect();
|
||||
this.getRateIconWrapRect();
|
||||
})
|
||||
},
|
||||
// 获取评分组件盒子的布局信息
|
||||
async getRateItemRect() {
|
||||
await this.$uv.sleep();
|
||||
// uvui封装的获取节点的方法，详见文档
|
||||
// #ifndef APP-NVUE
|
||||
this.$uvGetRect("#" + this.elId).then((res) => {
|
||||
this.rateBoxLeft = res.left;
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs["uv-rate"], (res) => {
|
||||
this.rateBoxLeft = res.size.left;
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 获取单个星星的尺寸
|
||||
getRateIconWrapRect() {
|
||||
// uvui封装的获取节点的方法，详见文档
|
||||
// #ifndef APP-NVUE
|
||||
this.$uvGetRect("." + this.elClass).then((res) => {
|
||||
this.rateWidth = res.width;
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs["uv-rate__content__item__icon-wrap"][0],
|
||||
(res) => {
|
||||
this.rateWidth = res.size.width;
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 手指滑动
|
||||
touchMove(e) {
|
||||
// 如果禁止通过手动滑动选择，返回
|
||||
if (!this.touchable) {
|
||||
return;
|
||||
}
|
||||
this.preventEvent(e);
|
||||
const x = e.changedTouches && e.changedTouches[0].pageX || e.detail && e.detail.pageX;
|
||||
this.getActiveIndex(x);
|
||||
},
|
||||
// 停止滑动
|
||||
touchEnd(e) {
|
||||
// 如果禁止通过手动滑动选择，返回
|
||||
if (!this.touchable) {
|
||||
return;
|
||||
}
|
||||
this.preventEvent(e);
|
||||
const x = e.changedTouches && e.changedTouches[0].pageX || e.detail && e.detail.pageX;
|
||||
this.getActiveIndex(x);
|
||||
},
|
||||
// 通过点击，直接选中
|
||||
clickHandler(e, index) {
|
||||
// ios上，moving状态取消事件触发
|
||||
if (this.$uv.os() === "ios" && this.moving) {
|
||||
return;
|
||||
}
|
||||
this.preventEvent(e);
|
||||
let x = 0;
|
||||
// 点击时，在nvue上，无法获得点击的坐标，所以无法实现点击半星选择
|
||||
// #ifndef APP-NVUE
|
||||
x = e.changedTouches && e.changedTouches[0].pageX || e.detail && e.detail.pageX;
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，无法通过点击获得坐标信息，这里通过元素的位置尺寸值模拟坐标
|
||||
x = index * this.rateWidth + this.rateBoxLeft;
|
||||
// #endif
|
||||
this.getActiveIndex(x, true);
|
||||
},
|
||||
// 发出事件
|
||||
changeEvent() {
|
||||
this.$emit("change", this.activeIndex);
|
||||
this.$emit("input", this.activeIndex);
|
||||
this.$emit("update:modelValue", this.activeIndex);
|
||||
},
|
||||
// 获取当前激活的评分图标
|
||||
getActiveIndex(x, isClick = false) {
|
||||
if (this.disabled || this.readonly) {
|
||||
return;
|
||||
}
|
||||
// 判断当前操作的点的x坐标值，是否在允许的边界范围内
|
||||
const allRateWidth = this.rateWidth * this.count + this.rateBoxLeft;
|
||||
// 如果小于第一个图标的左边界，设置为最小值，如果大于所有图标的宽度，则设置为最大值
|
||||
x = this.$uv.range(this.rateBoxLeft, allRateWidth, x) - this.rateBoxLeft
|
||||
// 滑动点相对于评分盒子左边的距离
|
||||
const distance = x;
|
||||
// 滑动的距离，相当于多少颗星星
|
||||
let index;
|
||||
// 判断是否允许半星
|
||||
if (this.allowHalf) {
|
||||
index = Math.floor(distance / this.rateWidth);
|
||||
// 取余，判断小数的区间范围
|
||||
const decimal = distance % this.rateWidth;
|
||||
if (decimal <= this.rateWidth / 2 && decimal > 0) {
|
||||
index += 0.5;
|
||||
} else if (decimal > this.rateWidth / 2) {
|
||||
index++;
|
||||
}
|
||||
} else {
|
||||
index = Math.floor(distance / this.rateWidth);
|
||||
// 取余，判断小数的区间范围
|
||||
const decimal = distance % this.rateWidth;
|
||||
// 非半星时，只有超过了图标的一半距离，才认为是选择了这颗星
|
||||
if (isClick) {
|
||||
if (decimal > 0) index++;
|
||||
} else {
|
||||
if (decimal > this.rateWidth / 2) index++;
|
||||
}
|
||||
}
|
||||
this.activeIndex = Math.min(index, this.count);
|
||||
// 对最少颗星星的限制
|
||||
if (this.activeIndex < this.minCount) {
|
||||
this.activeIndex = this.minCount;
|
||||
}
|
||||
this.changeEvent();
|
||||
// 设置延时为了让click事件在touchmove之前触发
|
||||
setTimeout(() => {
|
||||
this.moving = true;
|
||||
}, 10);
|
||||
// 一定时间后，取消标识为移动中状态，是为了让click事件无效
|
||||
setTimeout(() => {
|
||||
this.moving = false;
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
$uv-rate-margin: 0 !default;
|
||||
$uv-rate-padding: 0 !default;
|
||||
$uv-rate-item-icon-wrap-half-top: 0 !default;
|
||||
$uv-rate-item-icon-wrap-half-left: 0 !default;
|
||||
.uv-rate {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
margin: $uv-rate-margin;
|
||||
padding: $uv-rate-padding;
|
||||
/* #ifndef APP-NVUE */
|
||||
touch-action: none;
|
||||
/* #endif */
|
||||
&__content {
|
||||
@include flex;
|
||||
&__item {
|
||||
position: relative;
|
||||
&__icon-wrap {
|
||||
&--half {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: $uv-rate-item-icon-wrap-half-top;
|
||||
left: $uv-rate-item-icon-wrap-half-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.uv-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
<template>
|
||||
<view
|
||||
class="uv-rate"
|
||||
:id="elId"
|
||||
ref="uv-rate"
|
||||
:style="[$uv.addStyle(customStyle)]"
|
||||
>
|
||||
<view class="uv-rate__content"
|
||||
@touchmove.stop="touchMove"
|
||||
@touchend.stop="touchEnd">
|
||||
<view class="uv-rate__content__item"
|
||||
v-for="(item, index) in Number(count)"
|
||||
:key="index"
|
||||
:class="[elClass]">
|
||||
<view class="uv-rate__content__item__icon-wrap"
|
||||
ref="uv-rate__content__item__icon-wrap"
|
||||
@tap.stop="clickHandler($event, index + 1)">
|
||||
<uv-icon
|
||||
:name="Math.floor(activeIndex) > index? activeIcon : inactiveIcon"
|
||||
:color="disabled ? '#c8c9cc' : Math.floor(activeIndex) > index ? activeColor : inactiveColor"
|
||||
:custom-style="{
|
||||
'padding-left': $uv.addUnit(gutter / 2),
|
||||
'padding-right': $uv.addUnit(gutter / 2)
|
||||
}"
|
||||
:size="size"
|
||||
></uv-icon>
|
||||
</view>
|
||||
<view v-if="allowHalf"
|
||||
@tap.stop="clickHandler($event, index + 1)"
|
||||
class="uv-rate__content__item__icon-wrap uv-rate__content__item__icon-wrap--half"
|
||||
:style="[{ width: $uv.addUnit(rateWidth / 2)}]"
|
||||
ref="uv-rate__content__item__icon-wrap">
|
||||
<uv-icon
|
||||
:name=" Math.ceil(activeIndex) > index ? activeIcon : inactiveIcon "
|
||||
:color=" disabled ? '#c8c9cc' : Math.ceil(activeIndex) > index ? activeColor : inactiveColor "
|
||||
:custom-style="{
|
||||
'padding-left': $uv.addUnit(gutter / 2),
|
||||
'padding-right': $uv.addUnit(gutter / 2)
|
||||
}"
|
||||
:size="size">
|
||||
</uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule("dom");
|
||||
// #endif
|
||||
/**
|
||||
* rate 评分
|
||||
* @description 该组件一般用于满意度调查，星型评分的场景
|
||||
* @tutorial https://www.uvui.cn/components/rate.html
|
||||
* @property {String | Number} value 用于v-model双向绑定选中的星星数量 (默认 1 )
|
||||
* @property {String | Number} count 最多可选的星星数量 （默认 5 ）
|
||||
* @property {Boolean} disabled 是否禁止用户操作 （默认 false ）
|
||||
* @property {Boolean} readonly 是否只读 （默认 false ）
|
||||
* @property {String | Number} size 星星的大小，单位px （默认 18 ）
|
||||
* @property {String} inactiveColor 未选中星星的颜色 （默认 '#b2b2b2' ）
|
||||
* @property {String} activeColor 选中的星星颜色 （默认 '#FA3534' ）
|
||||
* @property {String | Number} gutter 星星之间的距离 （默认 4 ）
|
||||
* @property {String | Number} minCount 最少选中星星的个数 （默认 1 ）
|
||||
* @property {Boolean} allowHalf 是否允许半星选择 （默认 false ）
|
||||
* @property {String} activeIcon 选中时的图标名，只能为uvui的内置图标 （默认 'star-fill' ）
|
||||
* @property {String} inactiveIcon 未选中时的图标名，只能为uvui的内置图标 （默认 'star' ）
|
||||
* @property {Boolean} touchable 是否可以通过滑动手势选择评分 （默认 'false' ）
|
||||
* @property {Object} customStyle 组件的样式，对象形式
|
||||
* @event {Function} change 选中的星星发生变化时触发
|
||||
* @example <uv-rate :count="count" :value="2"></uv-rate>
|
||||
*/
|
||||
export default {
|
||||
name: "uv-rate",
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 生成一个唯一id，否则一个页面多个评分组件，会造成冲突
|
||||
elId: '',
|
||||
elClass: '',
|
||||
rateBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
|
||||
activeIndex: 0,
|
||||
rateWidth: 0, // 每个星星的宽度
|
||||
// 标识是否正在滑动，由于iOS事件上touch比click先触发，导致快速滑动结束后，接着触发click，导致事件混乱而出错
|
||||
moving: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal){
|
||||
this.activeIndex = newVal;
|
||||
},
|
||||
modelValue(newVal){
|
||||
this.activeIndex = newVal;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.activeIndex = Number(this.value || this.modelValue);
|
||||
this.elId = this.$uv.guid();
|
||||
this.elClass = this.$uv.guid();
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$uv.sleep(200).then(() => {
|
||||
this.getRateItemRect();
|
||||
this.getRateIconWrapRect();
|
||||
})
|
||||
},
|
||||
// 获取评分组件盒子的布局信息
|
||||
async getRateItemRect() {
|
||||
await this.$uv.sleep();
|
||||
// uvui封装的获取节点的方法，详见文档
|
||||
// #ifndef APP-NVUE
|
||||
this.$uvGetRect("#" + this.elId).then((res) => {
|
||||
this.rateBoxLeft = res.left;
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs["uv-rate"], (res) => {
|
||||
this.rateBoxLeft = res.size.left;
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 获取单个星星的尺寸
|
||||
getRateIconWrapRect() {
|
||||
// uvui封装的获取节点的方法，详见文档
|
||||
// #ifndef APP-NVUE
|
||||
this.$uvGetRect("." + this.elClass).then((res) => {
|
||||
this.rateWidth = res.width;
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs["uv-rate__content__item__icon-wrap"][0],
|
||||
(res) => {
|
||||
this.rateWidth = res.size.width;
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 手指滑动
|
||||
touchMove(e) {
|
||||
// 如果禁止通过手动滑动选择，返回
|
||||
if (!this.touchable) {
|
||||
return;
|
||||
}
|
||||
this.preventEvent(e);
|
||||
const x = e.changedTouches && e.changedTouches[0].pageX || e.detail && e.detail.pageX;
|
||||
this.getActiveIndex(x);
|
||||
},
|
||||
// 停止滑动
|
||||
touchEnd(e) {
|
||||
// 如果禁止通过手动滑动选择，返回
|
||||
if (!this.touchable) {
|
||||
return;
|
||||
}
|
||||
this.preventEvent(e);
|
||||
const x = e.changedTouches && e.changedTouches[0].pageX || e.detail && e.detail.pageX;
|
||||
this.getActiveIndex(x);
|
||||
},
|
||||
// 通过点击，直接选中
|
||||
clickHandler(e, index) {
|
||||
// ios上，moving状态取消事件触发
|
||||
if (this.$uv.os() === "ios" && this.moving) {
|
||||
return;
|
||||
}
|
||||
this.preventEvent(e);
|
||||
let x = 0;
|
||||
// 点击时，在nvue上，无法获得点击的坐标，所以无法实现点击半星选择
|
||||
// #ifndef APP-NVUE
|
||||
x = e.changedTouches && e.changedTouches[0].pageX || e.detail && e.detail.pageX;
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，无法通过点击获得坐标信息，这里通过元素的位置尺寸值模拟坐标
|
||||
x = index * this.rateWidth + this.rateBoxLeft;
|
||||
// #endif
|
||||
this.getActiveIndex(x, true);
|
||||
},
|
||||
// 发出事件
|
||||
changeEvent() {
|
||||
this.$emit("change", this.activeIndex);
|
||||
this.$emit("input", this.activeIndex);
|
||||
this.$emit("update:modelValue", this.activeIndex);
|
||||
},
|
||||
// 获取当前激活的评分图标
|
||||
getActiveIndex(x, isClick = false) {
|
||||
if (this.disabled || this.readonly) {
|
||||
return;
|
||||
}
|
||||
// 判断当前操作的点的x坐标值，是否在允许的边界范围内
|
||||
const allRateWidth = this.rateWidth * this.count + this.rateBoxLeft;
|
||||
// 如果小于第一个图标的左边界，设置为最小值，如果大于所有图标的宽度，则设置为最大值
|
||||
x = this.$uv.range(this.rateBoxLeft, allRateWidth, x) - this.rateBoxLeft
|
||||
// 滑动点相对于评分盒子左边的距离
|
||||
const distance = x;
|
||||
// 滑动的距离，相当于多少颗星星
|
||||
let index;
|
||||
// 判断是否允许半星
|
||||
if (this.allowHalf) {
|
||||
index = Math.floor(distance / this.rateWidth);
|
||||
// 取余，判断小数的区间范围
|
||||
const decimal = distance % this.rateWidth;
|
||||
if (decimal <= this.rateWidth / 2 && decimal > 0) {
|
||||
index += 0.5;
|
||||
} else if (decimal > this.rateWidth / 2) {
|
||||
index++;
|
||||
}
|
||||
} else {
|
||||
index = Math.floor(distance / this.rateWidth);
|
||||
// 取余，判断小数的区间范围
|
||||
const decimal = distance % this.rateWidth;
|
||||
// 非半星时，只有超过了图标的一半距离，才认为是选择了这颗星
|
||||
if (isClick) {
|
||||
if (decimal > 0) index++;
|
||||
} else {
|
||||
if (decimal > this.rateWidth / 2) index++;
|
||||
}
|
||||
}
|
||||
this.activeIndex = Math.min(index, this.count);
|
||||
// 对最少颗星星的限制
|
||||
if (this.activeIndex < this.minCount) {
|
||||
this.activeIndex = this.minCount;
|
||||
}
|
||||
this.changeEvent();
|
||||
// 设置延时为了让click事件在touchmove之前触发
|
||||
setTimeout(() => {
|
||||
this.moving = true;
|
||||
}, 10);
|
||||
// 一定时间后，取消标识为移动中状态，是为了让click事件无效
|
||||
setTimeout(() => {
|
||||
this.moving = false;
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
$uv-rate-margin: 0 !default;
|
||||
$uv-rate-padding: 0 !default;
|
||||
$uv-rate-item-icon-wrap-half-top: 0 !default;
|
||||
$uv-rate-item-icon-wrap-half-left: 0 !default;
|
||||
.uv-rate {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
margin: $uv-rate-margin;
|
||||
padding: $uv-rate-padding;
|
||||
/* #ifndef APP-NVUE */
|
||||
touch-action: none;
|
||||
/* #endif */
|
||||
&__content {
|
||||
@include flex;
|
||||
&__item {
|
||||
position: relative;
|
||||
&__icon-wrap {
|
||||
&--half {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: $uv-rate-item-icon-wrap-half-top;
|
||||
left: $uv-rate-item-icon-wrap-half-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.uv-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
@ -1,88 +1,88 @@
|
||||
{
|
||||
"id": "uv-rate",
|
||||
"displayName": "uv-rate 评分 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.7",
|
||||
"description": "该组件为星型评分，可用于满意度调查等场景...",
|
||||
"keywords": [
|
||||
"uv-rate",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"rate",
|
||||
"评分"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-icon"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
"id": "uv-rate",
|
||||
"displayName": "uv-rate 评分 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.7",
|
||||
"description": "该组件为星型评分，可用于满意度调查等场景...",
|
||||
"keywords": [
|
||||
"uv-rate",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"rate",
|
||||
"评分"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-icon"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,19 +1,19 @@
|
||||
## Rate 评分
|
||||
|
||||
> **组件名：uv-rate**
|
||||
|
||||
该组件为星型评分，可用于满意度调查等场景。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/rate.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
## Rate 评分
|
||||
|
||||
> **组件名：uv-rate**
|
||||
|
||||
该组件为星型评分，可用于满意度调查等场景。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/rate.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
Reference in New Issue
Block a user