From 3ee3cabcdbef601a7bf401a53d10058383937017 Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Mon, 10 Mar 2025 18:11:09 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AD=97=E6=AE=B5=E5=92=8C?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |  10 +-
 src/pages/merchant/detail.vue                 |  41 +-
 src/pages/merchant/food.vue                   |   4 +-
 src/pages/tabbar/home.vue                     |  10 +-
 .../custom-waterfalls-flow.vue                | 709 +++++++++---------
 5 files changed, 379 insertions(+), 395 deletions(-)

diff --git a/.env b/.env
index b22752f..2f80fbe 100644
--- a/.env
+++ b/.env
@@ -27,12 +27,12 @@ VITE_OAUTH2_APP_CLIENT='mini:mini'
 VITE_IMAGE_BASE_PATH = http://59.202.170.152:81/api # 信创线上
 
 # ******************** start 开发环境 start ********************
-VITE_APP_DEV_SERVICE = http://59.202.170.152:81/api # 信创线上
+# VITE_APP_DEV_SERVICE = http://59.202.170.152:81/api # 信创线上
 # VITE_APP_DEV_SERVICE = https://stgl.pj.gov.cn/app-api
-# VITE_APP_DEV_SERVICE = http://192.168.101.50:9999 # 邓-本地
+# VITE_APP_DEV_SERVICE = http://192.168.101.60:9999 # 邓-本地
 # VITE_APP_DEV_SERVICE = http://127.0.0.1:9999
 # VITE_APP_DEV_SERVICE = http://123.156.230.15:8089/api/ # 线上
-# VITE_APP_DEV_SERVICE = http://220.191.229.171:8090/api # 线上
+VITE_APP_DEV_SERVICE = http://220.191.229.171:8090/api # 线上
 # VITE_APP_DEV_SERVICE = http://localhost:9999
 # ******************** end 开发环境 end ********************
 
@@ -44,5 +44,5 @@ VITE_APP_DEV_SERVICE = http://59.202.170.152:81/api # 信创线上
 VITE_APP_PROD_SERVICE = http://59.202.170.152:81/api # 信创线上
 # ******************** end 生产环境 end ********************
 
-# VITE_DEV_ENV = dev
-VITE_DEV_ENV = prod
\ No newline at end of file
+VITE_DEV_ENV = dev
+# VITE_DEV_ENV = prod
\ No newline at end of file
diff --git a/src/pages/merchant/detail.vue b/src/pages/merchant/detail.vue
index 906b282..9ce4ce5 100644
--- a/src/pages/merchant/detail.vue
+++ b/src/pages/merchant/detail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, nextTick } from "vue"
+import { reactive, nextTick } from "vue"
 import { onLoad, onShow } from "@dcloudio/uni-app"
 import { isEmpty } from "radash"
 
@@ -15,7 +15,6 @@ import ProductRow from "./components/product-row.vue"
 import ProductCar from "./components/product-car.vue"
 import ProductTotal from "./components/product-total.vue"
 
-const data = {}
 const state = reactive<any>({
 	detailId: null,
 	totPrice: 0,
@@ -41,9 +40,14 @@ onShow(() => {
 })
 
 const getDetail = async () => {
+	uni.showLoading({
+		title: "加载中...",
+		mask: true,
+	})
 	const _pa = { id: state.detailId }
 	const { data } = await merchantApi.detail(_pa)
 	state.detail = data
+	uni.hideLoading()
 }
 
 const getShopCar = async () => {
@@ -237,15 +241,19 @@ const doFood = () => {
 								</view>
 							</view>
 							<view class="m-t-10rpx second-text-28">
-								<text>营业时间</text>
-								<text class="m-l-10rpx">
-									{{ state.detail.jobStartTime }}
-									~
-									{{ state.detail.jobEndTime }}
-								</text>
+								<view>营业时间：</view>
+								<view class="second-text-24">
+									{{ state.detail.jobTime?.split(",")[0] ? "早：" + state.detail.jobTime?.split(",")[0] : "" }}
+								</view>
+								<view class="second-text-24">
+									{{ state.detail.jobTime?.split(",")[1] ? "中：" + state.detail.jobTime?.split(",")[1] : "" }}
+								</view>
+								<view class="second-text-24">
+									{{ state.detail.jobTime?.split(",")[2] ? "晚：" + state.detail.jobTime?.split(",")[2] : "" }}
+								</view>
 							</view>
-							<view class="m-t-10rpx second-text-28">
-								<text>食堂地址</text>
+							<view v-if="state.detail.addressDes" class="m-t-10rpx second-text-28">
+								<text>食堂地址：</text>
 								<text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
 							</view>
 						</view>
@@ -283,6 +291,7 @@ const doFood = () => {
 			<view class="h-15rpx" />
 			<view class="flex-row">
 				<scroll-view
+					v-if="state.classifyList.length > 0"
 					scroll-y
 					:style="{ height: getHeight() }"
 					class="menu w-200rpx h-full p-l-12rpx p-b-20rpx bg-#f6f6f6"
@@ -299,7 +308,7 @@ const doFood = () => {
 						</view>
 					</view>
 				</scroll-view>
-				<scroll-view scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
+				<scroll-view v-if="state.shopList.length > 0" scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
 					<view v-for="(pV, pI) in state.shopList" :key="pI">
 						<view class="m-x-15rpx">
 							<product-row
@@ -318,17 +327,13 @@ const doFood = () => {
 						</view>
 					</view>
 				</scroll-view>
+				<view v-else class="mx-auto mt-10 second-text-28">暂无商品</view>
 			</view>
 		</tm-sticky>
 		<!-- end 商品 end -->
 		<template #main-bottom>
-			<view class="car z-200 p-x-30rpx p-y-30rpx bg-white">
-				<product-total
-					:totPrice="state.totPrice"
-					:totCount="state.totCount"
-					@doContainer="doVisibleCar"
-					@submit="doPay"
-				/>
+			<view v-if="state.classifyList.length > 0" class="car z-200 p-x-30rpx p-y-30rpx bg-white">
+				<product-total :totPrice="state.totPrice" :totCount="state.totCount" @doContainer="doVisibleCar" @submit="doPay" />
 			</view>
 		</template>
 	</crud-layout>
diff --git a/src/pages/merchant/food.vue b/src/pages/merchant/food.vue
index 5023010..74cc97c 100644
--- a/src/pages/merchant/food.vue
+++ b/src/pages/merchant/food.vue
@@ -13,7 +13,7 @@ import { filePath } from "@@/utils/file"
 
 const data = {
 	tabs: [
-		{ id: null, name: "全部", disabled: false },
+		// { id: null, name: "全部", disabled: false },
 		{ id: 1, name: "早餐", disabled: false },
 		{ id: 2, name: "午餐", disabled: false },
 		{ id: 3, name: "晚餐", disabled: false },
@@ -107,7 +107,7 @@ const doProduct = (v: any) => {
 			@scroll="pageHook.scroll"
 		>
 			<template #top>
-				<view class="bg-#1777FF p-15rpx pt-10">
+				<view class="bg-#1777FF p-15rpx">
 					<scroll-view scroll-x class="whitespace-nowrap">
 						<view class="flex-row items-center space-x-15rpx">
 							<view
diff --git a/src/pages/tabbar/home.vue b/src/pages/tabbar/home.vue
index 270bb8c..6963409 100644
--- a/src/pages/tabbar/home.vue
+++ b/src/pages/tabbar/home.vue
@@ -63,12 +63,10 @@ const toDetail = async (v: any) => {
 						</view>
 					</view>
 					<view class="m-t-10rpx second-text-28">
-						<text>营业时间</text>
-						<text class="m-l-10rpx">
-							{{ v.jobStartTime }}
-							~
-							{{ v.jobEndTime }}
-						</text>
+						<view>营业时间：</view>
+						<view class="second-text-24">{{ v.jobTime?.split(",")[0] ? "早：" + v.jobTime?.split(",")[0] : "" }}</view>
+						<view class="second-text-24">{{ v.jobTime?.split(",")[1] ? "中：" + v.jobTime?.split(",")[1] : "" }}</view>
+						<view class="second-text-24">{{ v.jobTime?.split(",")[2] ? "晚：" + v.jobTime?.split(",")[2] : "" }}</view>
 					</view>
 					<view v-if="v.addressDes" class="m-t-10rpx second-text-28">
 						<text>食堂地址</text>
diff --git a/src/sheep/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue b/src/sheep/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue
index 79159da..fcbfd92 100644
--- a/src/sheep/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue
+++ b/src/sheep/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue
@@ -1,382 +1,363 @@
 <template>
-  <view class="waterfalls-flow">
-    <view
-      v-for="(item, index) in data.column"
-      :key="index"
-      class="waterfalls-flow-column"
-      :id="`waterfalls_flow_column_${index + 1}`"
-      :msg="msg"
-      :style="{ width: w, 'margin-left': index == 0 ? 0 : m }"
-    >
-      <view
-        :class="['column-value', { 'column-value-show': item2.o }]"
-        v-for="(item2, index2) in columnValue(index)"
-        :key="index2"
-        :style="[s1]"
-        @click.stop="wapperClick(item2)"
-      >
-        <view class="inner" v-if="data.seat == 1">
-          <!-- #ifdef MP-WEIXIN -->
-          <!-- #ifdef VUE2 -->
-          <slot name="slot{{item2.index}}"></slot>
-          <!-- #endif -->
-          <!-- #ifdef VUE3 -->
-          <slot :name="`slot${item2.index}`"></slot>
-          <!-- #endif -->
-          <!-- #endif -->
-          <!-- #ifndef MP-WEIXIN -->
-          <slot v-bind="item2"></slot>
-          <!-- #endif -->
-        </view>
-        <image
-          :class="[
-            'img',
-            {
-              'img-hide':
-                item2[hideImageKey] == true || item2[hideImageKey] == 1,
-            },
-            { 'img-error': !item2[data.imageKey] },
-          ]"
-          :src="item2[data.imageKey]"
-          mode="widthFix"
-          @load="imgLoad(item2, index + 1)"
-          @error="imgError(item2, index + 1)"
-          @click.stop="imageClick(item2)"
-        ></image>
-        <view class="inner" v-if="data.seat == 2">
-          <!-- #ifdef MP-WEIXIN -->
-          <!-- #ifdef VUE2 -->
-          <slot name="slot{{item2.index}}"></slot>
-          <!-- #endif -->
-          <!-- #ifdef VUE3 -->
-          <slot :name="`slot${item2.index}`"></slot>
-          <!-- #endif -->
-          <!-- #endif -->
-          <!-- #ifndef MP-WEIXIN -->
-          <slot v-bind="item2"></slot>
-          <!-- #endif -->
-        </view>
-      </view>
-    </view>
-  </view>
+	<view class="waterfalls-flow">
+		<view
+			v-for="(item, index) in data.column"
+			:key="index"
+			class="waterfalls-flow-column"
+			:id="`waterfalls_flow_column_${index + 1}`"
+			:msg="msg"
+			:style="{ width: w, 'margin-left': index == 0 ? 0 : m }"
+		>
+			<view
+				:class="['column-value', { 'column-value-show': item2.o }]"
+				v-for="(item2, index2) in columnValue(index)"
+				:key="index2"
+				:style="[s1]"
+				@click.stop="wapperClick(item2)"
+			>
+				<view class="inner" v-if="data.seat == 1">
+					<!-- #ifdef MP-WEIXIN -->
+					<!-- #ifdef VUE2 -->
+					<slot name="slot{{item2.index}}"></slot>
+					<!-- #endif -->
+					<!-- #ifdef VUE3 -->
+					<slot :name="`slot${item2.index}`"></slot>
+					<!-- #endif -->
+					<!-- #endif -->
+					<!-- #ifndef MP-WEIXIN -->
+					<slot v-bind="item2"></slot>
+					<!-- #endif -->
+				</view>
+				<image
+					:class="[
+						'img',
+						{
+							'img-hide': item2[hideImageKey] == true || item2[hideImageKey] == 1,
+						},
+						{ 'img-error': !item2[data.imageKey] },
+					]"
+					:src="item2[data.imageKey]"
+					mode="widthFix"
+					@load="imgLoad(item2, index + 1)"
+					@error="imgError(item2, index + 1)"
+					@click.stop="imageClick(item2)"
+				></image>
+				<view class="inner" v-if="data.seat == 2">
+					<!-- #ifdef MP-WEIXIN -->
+					<!-- #ifdef VUE2 -->
+					<slot name="slot{{item2.index}}"></slot>
+					<!-- #endif -->
+					<!-- #ifdef VUE3 -->
+					<slot :name="`slot${item2.index}`"></slot>
+					<!-- #endif -->
+					<!-- #endif -->
+					<!-- #ifndef MP-WEIXIN -->
+					<slot v-bind="item2"></slot>
+					<!-- #endif -->
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 <script>
 export default {
-  props: {
-    modelValue: Array,
-    column: {
-      // 列的数量
-      type: [String, Number],
-      default: 2,
-    },
-    maxColumn: {
-      // 最大列数
-      type: [String, Number],
-      default: 5,
-    },
-    columnSpace: {
-      // 列之间的间距 百分比
-      type: [String, Number],
-      default: 2,
-    },
-    imageKey: {
-      // 图片key
-      type: [String],
-      default: "image",
-    },
-    hideImageKey: {
-      // 隐藏图片key
-      type: [String],
-      default: "hide",
-    },
-    seat: {
-      // 文本的位置，1图片之上 2图片之下
-      type: [String, Number],
-      default: 2,
-    },
-    listStyle: {
-      // 单个展示项的样式：eg:{'background':'red'}
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      data: {
-        list: this.modelValue ? this.modelValue : [],
-        column: this.column < 2 ? 2 : this.column,
-        columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
-        imageKey: this.imageKey,
-        seat: this.seat,
-      },
-      msg: 0,
-      listInitStyle: {
-        "border-radius": "12rpx",
-        "margin-bottom": "20rpx",
-        "background-color": "#fff",
-      },
-      adds: [], //预置数据
-      isLoaded: true,
-      curIndex: 0,
-      isRefresh: true,
-      flag: false,
-      refreshDatas: [],
-    };
-  },
-  computed: {
-    // 计算列宽
-    w() {
-      const column_rate = `${100 / this.data.column - +this.data.columnSpace}%`;
-      return column_rate;
-    },
-    // 计算margin
-    m() {
-      const column_margin = `${
-        (100 -
-          (100 / this.data.column - +this.data.columnSpace).toFixed(5) *
-            this.data.column) /
-        (this.data.column - 1)
-      }%`;
-      return column_margin;
-    },
-    // list样式
-    s1() {
-      return { ...this.listInitStyle, ...this.listStyle };
-    },
-  },
-  created() {
-    // 初始化
-    this.refresh();
-  },
-  methods: {
-    // 预加载图片
-    loadImages(idx = 0) {
-      let count = 0;
-      const newList = this.data.list.filter((item, index) => index >= idx);
-      for (let i = 0; i < newList.length; i++) {
-        // #ifndef APP-PLUS
-        uni.getImageInfo({
-          src: `${newList[i][this.imageKey]}.jpg`,
-          complete: (res) => {
-            count++;
-            if (count == newList.length) this.initValue(idx);
-          },
-        });
-        // #endif
-        // #ifdef APP-PLUS
-        plus.io.getImageInfo({
-          src: `${newList[i][this.imageKey]}.jpg`,
-          complete: (res) => {
-            count++;
-            if (count == newList.length) this.initValue(idx);
-          },
-        });
-        // #endif
-      }
-    },
-    // 刷新
-    refresh() {
-      if (!this.isLoaded) {
-        this.refreshDatas = this.modelValue;
-        return false;
-      }
-      setTimeout(() => {
-        this.refreshDatas = [];
-        this.isRefresh = true;
-        this.adds = [];
-        this.data.list = this.modelValue ? this.modelValue : [];
-        this.data.column =
-          this.column < 2
-            ? 2
-            : this.column >= this.maxColumn
-            ? this.maxColumn
-            : this.column;
-        this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
-        this.data.imageKey = this.imageKey;
-        this.data.seat = this.seat;
-        this.curIndex = 0;
-        // 每列的数据初始化
-        for (let i = 1; i <= this.data.column; i++) {
-          this.data[`column_${i}_values`] = [];
-          this.msg++;
-        }
-        this.$nextTick(() => {
-          this.initValue(this.curIndex, "refresh==>");
-        });
-      }, 1);
-    },
-    columnValue(index) {
-      return this.data[`column_${index + 1}_values`];
-    },
-    change(newValue) {
-      for (let i = 0; i < this.data.list.length; i++) {
-        const cv = this.data[`column_${this.data.list[i].column}_values`];
-        for (let j = 0; j < cv.length; j++) {
-          if (newValue[i] && i === cv[j].index) {
-            this.data[`column_${this.data.list[i].column}_values`][j] =
-              Object.assign(cv[j], newValue[i]);
-            this.msg++;
-            break;
-          }
-        }
-      }
-    },
-    getMin(a, s) {
-      let m = a[0][s];
-      let mo = a[0];
-      for (var i = a.length - 1; i >= 0; i--) {
-        if (a[i][s] < m) {
-          m = a[i][s];
-        }
-      }
-      mo = a.filter((i) => i[s] == m);
-      return mo[0];
-    },
-    // 计算每列的高度
-    getMinColumnHeight() {
-      return new Promise((resolve) => {
-        const heightArr = [];
-        for (let i = 1; i <= this.data.column; i++) {
-          const query = uni.createSelectorQuery().in(this);
-          query
-            .select(`#waterfalls_flow_column_${i}`)
-            .boundingClientRect((data) => {
-              heightArr.push({ column: i, height: data.height });
-            })
-            .exec(() => {
-              if (this.data.column <= heightArr.length) {
-                resolve(this.getMin(heightArr, "height"));
-              }
-            });
-        }
-      });
-    },
-    async initValue(i, from) {
-      this.isLoaded = false;
-      if (i >= this.data.list.length || this.refreshDatas.length) {
-        this.msg++;
-        this.loaded();
-        return false;
-      }
-      const minHeightRes = await this.getMinColumnHeight();
-      const c = this.data[`column_${minHeightRes.column}_values`];
-      this.data.list[i].column = minHeightRes.column;
-      c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
-      this.msg++;
-    },
-    // 图片加载完成
-    imgLoad(item, c) {
-      const i = item.index;
-      item.o = 1;
-      this.$set(
-        this.data[`column_${c}_values`],
-        item.cIndex,
-        JSON.parse(JSON.stringify(item))
-      );
-      this.initValue(i + 1);
-    },
-    // 图片加载失败
-    imgError(item, c) {
-      const i = item.index;
-      item.o = 1;
-      item[this.data.imageKey] = null;
-      this.$set(
-        this.data[`column_${c}_values`],
-        item.cIndex,
-        JSON.parse(JSON.stringify(item))
-      );
-      this.initValue(i + 1);
-    },
-    // 渲染结束
-    loaded() {
-      if (this.refreshDatas.length) {
-        this.isLoaded = true;
-        this.refresh();
-        return false;
-      }
-      this.curIndex = this.data.list.length;
-      if (this.adds.length) {
-        this.data.list = this.adds[0];
-        this.adds.splice(0, 1);
-        this.initValue(this.curIndex);
-      } else {
-        if (this.data.list.length) this.$emit("loaded");
-        this.isLoaded = true;
-        this.isRefresh = false;
-      }
-    },
-    // 单项点击事件
-    wapperClick(item) {
-      this.$emit("wapperClick", item);
-    },
-    // 图片点击事件
-    imageClick(item) {
-      this.$emit("imageClick", item);
-    },
-  },
-  watch: {
-    modelValue: {
-      deep: true,
-      handler(newValue, oldValue) {
-        setTimeout(() => {
-          this.$nextTick(() => {
-            if (this.isRefresh) return false;
-            if (this.isLoaded) {
-			  this.refresh();
-              if (newValue.length <= this.curIndex)
-                return this.change(newValue);
-              this.data.list = newValue;
-              this.$nextTick(() => {
-                this.initValue(this.curIndex, "watch==>");
-              });
-            } else {
-              this.adds.push(newValue);
-            }
-          });
-        }, 10);
-      },
-    },
-    column(newValue) {
-      this.refresh();
-    },
-  },
-};
+	props: {
+		modelValue: Array,
+		column: {
+			// 列的数量
+			type: [String, Number],
+			default: 2,
+		},
+		maxColumn: {
+			// 最大列数
+			type: [String, Number],
+			default: 5,
+		},
+		columnSpace: {
+			// 列之间的间距 百分比
+			type: [String, Number],
+			default: 2,
+		},
+		imageKey: {
+			// 图片key
+			type: [String],
+			default: "image",
+		},
+		hideImageKey: {
+			// 隐藏图片key
+			type: [String],
+			default: "hide",
+		},
+		seat: {
+			// 文本的位置，1图片之上 2图片之下
+			type: [String, Number],
+			default: 2,
+		},
+		listStyle: {
+			// 单个展示项的样式：eg:{'background':'red'}
+			type: Object,
+		},
+	},
+	data() {
+		return {
+			data: {
+				list: this.modelValue ? this.modelValue : [],
+				column: this.column < 2 ? 2 : this.column,
+				columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
+				imageKey: this.imageKey,
+				seat: this.seat,
+			},
+			msg: 0,
+			listInitStyle: {
+				"border-radius": "12rpx",
+				"margin-bottom": "20rpx",
+				"background-color": "#fff",
+			},
+			adds: [], //预置数据
+			isLoaded: true,
+			curIndex: 0,
+			isRefresh: true,
+			flag: false,
+			refreshDatas: [],
+		}
+	},
+	computed: {
+		// 计算列宽
+		w() {
+			const column_rate = `${100 / this.data.column - +this.data.columnSpace}%`
+			return column_rate
+		},
+		// 计算margin
+		m() {
+			const column_margin = `${
+				(100 - (100 / this.data.column - +this.data.columnSpace).toFixed(5) * this.data.column) / (this.data.column - 1)
+			}%`
+			return column_margin
+		},
+		// list样式
+		s1() {
+			return { ...this.listInitStyle, ...this.listStyle }
+		},
+	},
+	created() {
+		// 初始化
+		this.refresh()
+	},
+	methods: {
+		// 预加载图片
+		loadImages(idx = 0) {
+			let count = 0
+			const newList = this.data.list.filter((item, index) => index >= idx)
+			for (let i = 0; i < newList.length; i++) {
+				// #ifndef APP-PLUS
+				uni.getImageInfo({
+					src: `${newList[i][this.imageKey]}.jpg`,
+					complete: (res) => {
+						count++
+						if (count == newList.length) this.initValue(idx)
+					},
+				})
+				// #endif
+				// #ifdef APP-PLUS
+				plus.io.getImageInfo({
+					src: `${newList[i][this.imageKey]}.jpg`,
+					complete: (res) => {
+						count++
+						if (count == newList.length) this.initValue(idx)
+					},
+				})
+				// #endif
+			}
+		},
+		// 刷新
+		refresh() {
+			if (!this.isLoaded) {
+				this.refreshDatas = this.modelValue
+				return false
+			}
+			setTimeout(() => {
+				this.refreshDatas = []
+				this.isRefresh = true
+				this.adds = []
+				this.data.list = this.modelValue ? this.modelValue : []
+				this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column
+				this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5
+				this.data.imageKey = this.imageKey
+				this.data.seat = this.seat
+				this.curIndex = 0
+				// 每列的数据初始化
+				for (let i = 1; i <= this.data.column; i++) {
+					this.data[`column_${i}_values`] = []
+					this.msg++
+				}
+				this.$nextTick(() => {
+					this.initValue(this.curIndex, "refresh==>")
+				})
+			}, 1)
+		},
+		columnValue(index) {
+			return this.data[`column_${index + 1}_values`]
+		},
+		change(newValue) {
+			for (let i = 0; i < this.data.list.length; i++) {
+				const cv = this.data[`column_${this.data.list[i].column}_values`]
+				for (let j = 0; j < cv.length; j++) {
+					if (newValue[i] && i === cv[j].index) {
+						this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i])
+						this.msg++
+						break
+					}
+				}
+			}
+		},
+		getMin(a, s) {
+			let m = a[0][s]
+			let mo = a[0]
+			for (var i = a.length - 1; i >= 0; i--) {
+				if (a[i][s] < m) {
+					m = a[i][s]
+				}
+			}
+			mo = a.filter((i) => i[s] == m)
+			return mo[0]
+		},
+		// 计算每列的高度
+		getMinColumnHeight() {
+			return new Promise((resolve) => {
+				const heightArr = []
+				for (let i = 1; i <= this.data.column; i++) {
+					const query = uni.createSelectorQuery().in(this)
+					query
+						.select(`#waterfalls_flow_column_${i}`)
+						.boundingClientRect((data) => {
+							heightArr.push({ column: i, height: data.height })
+						})
+						.exec(() => {
+							if (this.data.column <= heightArr.length) {
+								resolve(this.getMin(heightArr, "height"))
+							}
+						})
+				}
+			})
+		},
+		async initValue(i, from) {
+			this.isLoaded = false
+			if (i >= this.data.list.length || this.refreshDatas.length) {
+				this.msg++
+				this.loaded()
+				return false
+			}
+			const minHeightRes = await this.getMinColumnHeight()
+			const c = this.data[`column_${minHeightRes.column}_values`]
+			this.data.list[i].column = minHeightRes.column
+			c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 })
+			this.msg++
+		},
+		// 图片加载完成
+		imgLoad(item, c) {
+			const i = item.index
+			item.o = 1
+			this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)))
+			this.initValue(i + 1)
+		},
+		// 图片加载失败
+		imgError(item, c) {
+			const i = item.index
+			item.o = 1
+			item[this.data.imageKey] = null
+			this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)))
+			this.initValue(i + 1)
+		},
+		// 渲染结束
+		loaded() {
+			if (this.refreshDatas.length) {
+				this.isLoaded = true
+				this.refresh()
+				return false
+			}
+			this.curIndex = this.data.list.length
+			if (this.adds.length) {
+				this.data.list = this.adds[0]
+				this.adds.splice(0, 1)
+				this.initValue(this.curIndex)
+			} else {
+				if (this.data.list.length) this.$emit("loaded")
+				this.isLoaded = true
+				this.isRefresh = false
+			}
+		},
+		// 单项点击事件
+		wapperClick(item) {
+			this.$emit("wapperClick", item)
+		},
+		// 图片点击事件
+		imageClick(item) {
+			this.$emit("imageClick", item)
+		},
+	},
+	watch: {
+		modelValue: {
+			deep: true,
+			handler(newValue, oldValue) {
+				setTimeout(() => {
+					this.$nextTick(() => {
+						if (this.isRefresh) return false
+						if (this.isLoaded) {
+							this.refresh()
+							if (newValue.length <= this.curIndex) return this.change(newValue)
+							this.data.list = newValue
+							this.$nextTick(() => {
+								this.initValue(this.curIndex, "watch==>")
+							})
+						} else {
+							this.adds.push(newValue)
+						}
+					})
+				}, 10)
+			},
+		},
+		column(newValue) {
+			this.refresh()
+		},
+	},
+}
 </script>
 <style lang="scss" scoped>
 .waterfalls-flow {
-  overflow: hidden;
+	overflow: hidden;
 
-  &-column {
-    float: left;
-  }
+	&-column {
+		float: left;
+	}
 }
 
 .column-value {
-  width: 100%;
-  font-size: 0;
-  overflow: hidden;
-  transition: opacity 0.4s;
-  opacity: 0;
+	width: 100%;
+	font-size: 0;
+	overflow: hidden;
+	transition: opacity 0.4s;
+	opacity: 0;
 
-  &-show {
-    opacity: 1;
-  }
+	&-show {
+		opacity: 1;
+	}
 
-  .inner {
-    font-size: 30rpx;
-  }
+	.inner {
+		font-size: 30rpx;
+	}
 
-  .img {
-    width: 100%;
+	.img {
+		width: 100%;
 
-    &-hide {
-      display: none;
-    }
+		&-hide {
+			display: none;
+		}
 
-    &-error {
-      background: #f2f2f2
-        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC)
-        no-repeat center center;
-    }
-  }
+		&-error {
+			background: #f2f2f2
+				url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC)
+				no-repeat center center;
+		}
+	}
 }
 </style>