调整字段和样式
This commit is contained in:
weiwei committed
1 parent
fa8ec6a1ce
commit
3ee3cabcdb
5 files changed
+379
-395
No files matched your search
@@ -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
|
||||
VITE_DEV_ENV = dev
|
||||
# VITE_DEV_ENV = prod
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user