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