From f714a5be34f60a467931a3c6fd5e05ef3917c0c2 Mon Sep 17 00:00:00 2001
From: donqi <ydq0308@qq.com>
Date: Sat, 1 Apr 2023 20:36:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/uni-rate/my-uni-rate.vue | 376 ++++++++++++++++++++++++++++
 pages/index/home.vue                |  16 +-
 pages/index/index.vue               |   2 +-
 pages/index/worker-home.vue         |  15 +-
 4 files changed, 397 insertions(+), 12 deletions(-)
 create mode 100644 components/uni-rate/my-uni-rate.vue

diff --git a/components/uni-rate/my-uni-rate.vue b/components/uni-rate/my-uni-rate.vue
new file mode 100644
index 0000000..0dbf985
--- /dev/null
+++ b/components/uni-rate/my-uni-rate.vue
@@ -0,0 +1,376 @@
+<template>
+	<view>
+		<view ref="uni-rate" class="uni-rate">
+			<view v-if="readonly || disabled" class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}"
+				:style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index1) in stars" :key="index1">
+				<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" />
+				</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" />
+				</view>
+				<!-- #endif -->
+			</view>
+			<view v-else class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}"
+				:style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index2) in stars" :key="index2"
+				@touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown"
+				@mousemove.stop="mousemove" @mouseleave="mouseleave">
+				<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" />
+				</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" />
+				</view>
+				<!-- #endif -->
+			</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: "myUniRate",
+		props: {
+			isFill: {
+				// 星星的类型，是否镂空
+				type: [Boolean, String],
+				default: true
+			},
+			color: {
+				// 星星未选中的颜色
+				type: String,
+				default: "#ececec"
+			},
+			activeColor: {
+				// 星星选中状态颜色
+				type: String,
+				default: "#ffca3e"
+			},
+			disabledColor: {
+				// 星星禁用状态颜色
+				type: String,
+				default: "#c0c0c0"
+			},
+			size: {
+				// 星星的大小
+				type: [Number, String],
+				default: 24
+			},
+			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
+			},
+			touchable: {
+				// 是否支持滑动手势
+				type: [Boolean, String],
+				default: true
+			}
+		},
+		data() {
+			return {
+				valueSync: "",
+				userMouseFristMove: true,
+				userRated: false,
+				userLastRate: 1
+			};
+		},
+		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
+		},
+		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
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.uni-rate {
+		/* #ifndef APP-NVUE */
+		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 */
+	}
+</style>
diff --git a/pages/index/home.vue b/pages/index/home.vue
index 328b6e6..a2490c7 100644
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@@ -96,7 +96,7 @@
 			</view>
 			<view>
 				<view class="margin-top-sm margin-lr-sm waterfall-grid">
-					<view @click="showDetails(item)" v-for="(item, index) in productList" class="waterfall-grid-item">
+					<view @click="showDetails(item)" :key="item.goodsId" v-for="(item, index) in productList" class="waterfall-grid-item">
 						<flow-goods-card :product="item"></flow-goods-card>
 					</view>
 				</view>
@@ -110,7 +110,7 @@
 			</view>
 			<view>
 				<view class="margin-top-sm margin-lr-sm waterfall-grid">
-					<view @click="showDetails(item)" v-for="(item, index) in otherCityProductList" class="waterfall-grid-item">
+					<view @click="showDetails(item)" :key="item.goodsId" v-for="(item, index) in otherCityProductList" class="waterfall-grid-item">
 						<flow-goods-card :product="item"></flow-goods-card>
 					</view>
 				</view>
@@ -487,6 +487,7 @@
 					let rowsLength = res[1].data.rows.length;
 					if (rowsLength > 0) {
 						this[resContainer] = this[resContainer].concat(res[1].data.rows);
+						console.log(this[resContainer])
 						this[pageNumName]++;
 						if (rowsLength === this[pageSizeName]) {
 							this.$refs[loadStatusBarRefName].showLoadMore();
@@ -536,12 +537,17 @@
 	}
 	
 	.waterfall-grid {
-		column-count: 2;
-		column-gap: 15rpx;
+		/* column-count: 2;
+		column-gap: 15rpx; */
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
 	}
 	
 	.waterfall-grid-item {
-		break-inside: avoid;
+		/* break-inside: avoid;
+		margin-bottom: 15rpx; */
+		width: 49%;
 		margin-bottom: 15rpx;
 	}
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 5774f38..12c1c35 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -166,7 +166,7 @@
 						console.log(res.subscriptionsSetting)
 						if (!res.subscriptionsSetting.mainSwitch 
 						|| !res.subscriptionsSetting.itemSettings
-						|| res.subscriptionsSetting.itemSettings['yqd3p4qsqn1RiyUb8kO4dPqoGKipRQg_y99nGw0jtLE'] !== 'accept') {
+						|| res.subscriptionsSetting.itemSettings['JtsGFPDjYhL2GbHfKxvTJaR_lLp8xLyw8VeR01Y0JHM'] !== 'accept') {
 							// 提示授权订单进度消息提示
 							_this.$refs.vertifySubscribe.showModal();
 						}
diff --git a/pages/index/worker-home.vue b/pages/index/worker-home.vue
index 8c57d0a..57fc11d 100644
--- a/pages/index/worker-home.vue
+++ b/pages/index/worker-home.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="margin-bottom-with-bar">
+	<view>
 		<!-- 顶部操作条 -->
 		<cu-custom :bgColor="'bg-main-color'">
 			<block slot="content">全国师傅圈</block>
@@ -64,7 +64,7 @@
 					<view class="text-sm padding-top">
 						<view class="flex justify-between">
 							<text>总评分<text class="text-red text-xl margin-left-xs">5.0</text> /5.0分</text>
-							<uni-rate :readonly="true" allow-half :value="5" />
+							<my-uni-rate :readonly="true" allow-half :value="5" />
 						</view>
 						<view class="flex justify-between">
 							<view>
@@ -148,7 +148,7 @@
 					<view class="text-sm padding-top">
 						<view class="flex justify-between">
 							<text>总评分<text class="text-red text-xl margin-left-xs">5.0</text> /5.0分</text>
-							<uni-rate :readonly="true" allow-half :value="5" />
+							<my-uni-rate :readonly="true" allow-half :value="5"/>
 						</view>
 						<view class="flex justify-between">
 							<view>
@@ -190,19 +190,22 @@
 				</view>
 			</view>
 			<load-status-bar ref="loadStatusBar2" @loadMore="loadOtherCityWorkerPage"></load-status-bar>
-		</view>
+		</view>
+		<view class="occupancy-bottom-bar"></view>
 	</view>
 </template>
 
 <script>
 	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
-	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
+	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
+	import myUniRate from '@/components/uni-rate/my-uni-rate.vue';
 
 	export default {
 		name: 'worker-circle',
 		components: {
 			horizontalNameCard,
-			loadStatusBar
+			loadStatusBar,
+			myUniRate
 		},
 		data() {
 			return {