From 0a24ffeb3eff074c8f11e9f94fdf2c2cb4929799 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 10 Nov 2023 13:08:29 +0800 Subject: [PATCH] fix:小程序详情修改 --- uni_modules/uview-ui/components/u-rate/u-rate.vue | 306 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 306 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-rate/u-rate.vue b/uni_modules/uview-ui/components/u-rate/u-rate.vue new file mode 100644 index 0000000..1aa5dd0 --- /dev/null +++ b/uni_modules/uview-ui/components/u-rate/u-rate.vue @@ -0,0 +1,306 @@ +<template> + <view + class="u-rate" + :id="elId" + ref="u-rate" + :style="[$u.addStyle(customStyle)]" + > + <view + class="u-rate__content" + @touchmove.stop="touchMove" + @touchend.stop="touchEnd" + > + <view + class="u-rate__content__item" + v-for="(item, index) in Number(count)" + :key="index" + :class="[elClass]" + > + <view + class="u-rate__content__item__icon-wrap" + ref="u-rate__content__item__icon-wrap" + @tap.stop="clickHandler($event, index + 1)" + > + <u-icon + :name=" + Math.floor(activeIndex) > index + ? activeIcon + : inactiveIcon + " + :color=" + disabled + ? '#c8c9cc' + : Math.floor(activeIndex) > index + ? activeColor + : inactiveColor + " + :custom-style="{ + 'padding-left': $u.addUnit(gutter / 2), + 'padding-right': $u.addUnit(gutter / 2) + }" + :size="size" + ></u-icon> + </view> + <view + v-if="allowHalf" + @tap.stop="clickHandler($event, index + 1)" + class="u-rate__content__item__icon-wrap u-rate__content__item__icon-wrap--half" + :style="[{ + width: $u.addUnit(rateWidth / 2), + }]" + ref="u-rate__content__item__icon-wrap" + > + <u-icon + :name=" + Math.ceil(activeIndex) > index + ? activeIcon + : inactiveIcon + " + :color=" + disabled + ? '#c8c9cc' + : Math.ceil(activeIndex) > index + ? activeColor + : inactiveColor + " + :custom-style="{ + 'padding-left': $u.addUnit(gutter / 2), + 'padding-right': $u.addUnit(gutter / 2) + }" + :size="size" + ></u-icon> + </view> + </view> + </view> + </view> +</template> + +<script> + import props from './props.js'; + + // #ifdef APP-NVUE + const dom = weex.requireModule("dom"); + // #endif + /** + * rate ������ + * @description ������������������������������������������������������������ + * @tutorial https://www.uviewui.com/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 ���������������������������������uView��������������� ��������� 'star-fill' ��� + * @property {String} inactiveIcon ������������������������������������uView��������������� ��������� 'star' ��� + * @property {Boolean} touchable ������������������������������������������ ��������� 'true' ��� + * @property {Object} customStyle ������������������������������ + * @event {Function} change ������������������������������������ + * @example <u-rate :count="count" :value="2"></u-rate> + */ + export default { + name: "u-rate", + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + data() { + return { + // ������������������id��������������������������������������������������������� + elId: uni.$u.guid(), + elClass: uni.$u.guid(), + rateBoxLeft: 0, // ������������������������������������������������������������������������������ + activeIndex: this.value, + rateWidth: 0, // ��������������������� + // ���������������������������������iOS���������touch���click������������������������������������������������������click������������������������������ + moving: false, + }; + }, + watch: { + value(val) { + this.activeIndex = val; + }, + activeIndex: 'emitEvent' + }, + methods: { + init() { + uni.$u.sleep().then(() => { + this.getRateItemRect(); + this.getRateIconWrapRect(); + }) + }, + // ��������������������������������������� + async getRateItemRect() { + await uni.$u.sleep(); + // uView��������������������������������������������� + // #ifndef APP-NVUE + this.$uGetRect("#" + this.elId).then((res) => { + this.rateBoxLeft = res.left; + }); + // #endif + // #ifdef APP-NVUE + dom.getComponentRect(this.$refs["u-rate"], (res) => { + this.rateBoxLeft = res.size.left; + }); + // #endif + }, + // ��������������������������� + getRateIconWrapRect() { + // uView��������������������������������������������� + // #ifndef APP-NVUE + this.$uGetRect("." + this.elClass).then((res) => { + this.rateWidth = res.width; + }); + // #endif + // #ifdef APP-NVUE + dom.getComponentRect( + this.$refs["u-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[0].pageX; + this.getActiveIndex(x); + }, + // ������������ + touchEnd(e) { + // ��������������������������������������������� + if (!this.touchable) { + return; + } + this.preventEvent(e); + const x = e.changedTouches[0].pageX; + this.getActiveIndex(x); + }, + // ��������������������������� + clickHandler(e, index) { + // ios������moving������������������������ + if (uni.$u.os() === "ios" && this.moving) { + return; + } + this.preventEvent(e); + let x = 0; + // ���������������nvue������������������������������������������������������������������������ + // #ifndef APP-NVUE + x = e.changedTouches[0].pageX; + // #endif + // #ifdef APP-NVUE + // nvue��������������������������������������������������������������������������������������������� + x = index * this.rateWidth + this.rateBoxLeft; + // #endif + this.getActiveIndex(x,true); + }, + // ������������ + emitEvent() { + // ������change������ + this.$emit("change", this.activeIndex); + // ���������������������������value������ + this.$emit("input", this.activeIndex); + }, + // ��������������������������������� + getActiveIndex(x,isClick = false) { + if (this.disabled || this.readonly) { + return; + } + // ���������������������������x��������������������������������������������� + const allRateWidth = this.rateWidth * this.count + this.rateBoxLeft; + // ������������������������������������������������������������������������������������������������������������������������ + x = uni.$u.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; + } + + // ���������������������click���������touchmove������������ + setTimeout(() => { + this.moving = true; + }, 10); + // ���������������������������������������������������������������click������������ + setTimeout(() => { + this.moving = false; + }, 10); + }, + }, + mounted() { + this.init(); + }, + }; +</script> + +<style lang="scss" scoped> +@import "../../libs/css/components.scss"; +$u-rate-margin: 0 !default; +$u-rate-padding: 0 !default; +$u-rate-item-icon-wrap-half-top: 0 !default; +$u-rate-item-icon-wrap-half-left: 0 !default; + +.u-rate { + @include flex; + align-items: center; + margin: $u-rate-margin; + padding: $u-rate-padding; + /* #ifndef APP-NVUE */ + touch-action: none; + /* #endif */ + + &__content { + @include flex; + + &__item { + position: relative; + + &__icon-wrap { + &--half { + position: absolute; + overflow: hidden; + top: $u-rate-item-icon-wrap-half-top; + left: $u-rate-item-icon-wrap-half-left; + } + } + } + } +} + +.u-icon { + /* #ifndef APP-NVUE */ + box-sizing: border-box; + /* #endif */ +} +</style> -- Gitblit v1.8.0