You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
10 KiB
383 lines
10 KiB
<template>
|
|
<view class="waterfall">
|
|
<!-- 商城导航图标 -->
|
|
<block v-if="navigation.length > 0">
|
|
<div class="user-oreder web-cell">
|
|
<block v-for="(item, index) in goodsCategoryList" :key="index">
|
|
<div class="web-cell-content web-text-center" @click="onCategory(item)">
|
|
<image :src="item.image" style="width: 30px; height: 30px" mode="widthFix"></image>
|
|
<text>{{ item.title }}</text>
|
|
</div>
|
|
</block>
|
|
</div>
|
|
</block>
|
|
<block v-else>
|
|
<uni-card :border="false" :padding="'12px 4px'">
|
|
<view class="web-cell" style="justify-content: center; align-items: center">
|
|
<uv-skeleton rows="0" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-skeleton rows="0" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-skeleton rows="0" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-skeleton rows="0" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
|
</view>
|
|
</uni-card>
|
|
</block>
|
|
<block v-if="!hideTools">
|
|
<view class="waterfall">
|
|
<uv-waterfall ref="waterfall" v-model="goodsList" :add-time="10" :left-gap="leftGap" :right-gap="rightGap" :column-gap="columnGap" @changeList="changeList">
|
|
<!-- 第一列数据 -->
|
|
<template v-slot:list1>
|
|
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
|
<view>
|
|
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
|
|
<view class="waterfall-item__image" :style="[imageStyle(item)]" @click="navTo(item)">
|
|
<image :src="item.image ? JSON.parse(item.image)[0] : []" mode="widthFix" :style="{ width: item.width + 'px' }"></image>
|
|
</view>
|
|
<view class="waterfall-item__ft">
|
|
<view class="waterfall-item__ft__title" @click="navTo(item)">
|
|
<text class="value">{{ item.goodsName }}</text>
|
|
</view>
|
|
<view class="waterfall-item__ft__desc uv-line-2">
|
|
<text class="web-text-danger">￥{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 第二列数据 -->
|
|
<template v-slot:list2>
|
|
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
|
<view>
|
|
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
|
|
<view class="waterfall-item__image" :style="[imageStyle(item)]" @click="navTo(item)">
|
|
<image :src="item.image ? JSON.parse(item.image)[0] : []" mode="widthFix" :style="{ width: item.width + 'px' }"></image>
|
|
</view>
|
|
<view class="waterfall-item__ft">
|
|
<view class="waterfall-item__ft__title" @click="navTo(item)">
|
|
<text class="value">{{ item.goodsName }}</text>
|
|
</view>
|
|
<view class="waterfall-item__ft__desc uv-line-2">
|
|
<text class="web-text-danger">￥{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</uv-waterfall>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="skeleton" style="display: flex">
|
|
<uni-card :border="false" :padding="'18px 6px'">
|
|
<uv-skeleton rows="0" avatar avatarShape="square" avatarSize="100" :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-gap height="16"></uv-gap>
|
|
<uv-skeleton rows="2" :loading="hideTools" :title="false"></uv-skeleton>
|
|
</uni-card>
|
|
<uni-card :border="false" :padding="'18px 6px'">
|
|
<uv-skeleton rows="0" avatar avatarShape="square" avatarSize="100" :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-gap height="16"></uv-gap>
|
|
<uv-skeleton rows="2" :loading="hideTools" :title="false"></uv-skeleton>
|
|
</uni-card>
|
|
</view>
|
|
<view class="skeleton" style="display: flex">
|
|
<uni-card :border="false" :padding="'18px 6px'">
|
|
<uv-skeleton rows="0" avatar avatarShape="square" avatarSize="100" :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-gap height="16"></uv-gap>
|
|
<uv-skeleton rows="2" :loading="hideTools" :title="false"></uv-skeleton>
|
|
</uni-card>
|
|
<uni-card :border="false" :padding="'18px 6px'">
|
|
<uv-skeleton rows="0" avatar avatarShape="square" avatarSize="100" :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-gap height="16"></uv-gap>
|
|
<uv-skeleton rows="2" :loading="hideTools" :title="false"></uv-skeleton>
|
|
</uni-card>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import * as GoodsApi from '@/api/shop/goods';
|
|
import * as GoodsCategoryApi from '@/api/shop/goodsCategory';
|
|
import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
|
|
import { useTenantStore } from '@/store/modules/tenant';
|
|
|
|
const tenantStore = useTenantStore();
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
goodsList: [], // 瀑布流全部数据
|
|
list1: [], // 瀑布流第一列数据
|
|
list2: [], // 瀑布流第二列数据
|
|
goodsCategoryList: [], // 商品分类
|
|
leftGap: 10,
|
|
rightGap: 10,
|
|
columnGap: 10,
|
|
// 小程序导航图标
|
|
navigation: [],
|
|
// 骨架屏
|
|
hideTools: true,
|
|
// 商品分类
|
|
categoryId: undefined
|
|
};
|
|
},
|
|
computed: {
|
|
imageStyle(item) {
|
|
return (item) => {
|
|
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
|
const w = v / 2;
|
|
const rate = w / item.w;
|
|
const h = rate * item.h;
|
|
return {
|
|
width: w + 'px',
|
|
height: h + 'px'
|
|
};
|
|
};
|
|
}
|
|
},
|
|
async onLoad() {
|
|
// const {
|
|
// data
|
|
// } = await this.getData();
|
|
// this.list = data;
|
|
|
|
// 获取服务租户信息包
|
|
const info = await tenantStore.fetchTenantInfo();
|
|
|
|
// 解析小程序导航图标
|
|
if (info.mpMenus) {
|
|
const arr1 = info.mpMenus.filter((d) => d.type == 3);
|
|
console.log('info.mpMenus: ', arr1);
|
|
if (arr1) {
|
|
this.navigation = arr1;
|
|
}
|
|
}
|
|
// 请求数据
|
|
this.reload();
|
|
},
|
|
methods: {
|
|
async reload() {
|
|
const app = this;
|
|
|
|
// 获取服务租户信息包
|
|
const info = await tenantStore.fetchTenantInfo();
|
|
|
|
// 登录状态
|
|
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
|
app.isLogin = true;
|
|
}
|
|
|
|
// 解析小程序导航图标
|
|
if (info.mpMenus) {
|
|
const arr1 = info.mpMenus.filter((d) => d.type == 3);
|
|
console.log('info.mpMenus: ', arr1);
|
|
if (arr1) {
|
|
app.navigation = arr1;
|
|
}
|
|
}
|
|
// 请求数据
|
|
Promise.all([app.pageGoods(), app.getGoodsCategory()]).then((res) => {
|
|
app.goodsList = res[0];
|
|
app.goodsCategoryList = res[1];
|
|
app.hideTools = false;
|
|
});
|
|
},
|
|
pageGoods() {
|
|
const app = this;
|
|
const { categoryId } = this;
|
|
return new Promise((resolve, reject) => {
|
|
GoodsApi.pageGoods({ parentId: categoryId })
|
|
.then((result) => {
|
|
resolve(result.list);
|
|
})
|
|
.catch(reject);
|
|
});
|
|
},
|
|
getGoodsCategory() {
|
|
const app = this;
|
|
return new Promise((resolve, reject) => {
|
|
GoodsCategoryApi.pageGoodsCategory({ parentId: 0 })
|
|
.then((result) => {
|
|
resolve(result.list);
|
|
})
|
|
.catch(reject);
|
|
});
|
|
},
|
|
navTo(item) {
|
|
uni.navigateTo({
|
|
url: '/package/goods/detail?id=' + item.goodsId
|
|
});
|
|
},
|
|
onCategory(item) {
|
|
this.categoryId = item.categoryId;
|
|
this.goodsList = [];
|
|
this.list1 = [];
|
|
this.list2 = [];
|
|
this.reload();
|
|
},
|
|
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
|
changeList(e) {
|
|
console.log('e: ', e);
|
|
this[e.name].push(e.value);
|
|
},
|
|
// 模拟的后端数据
|
|
getData() {
|
|
return new Promise((resolve) => {
|
|
const imgs = [
|
|
{
|
|
url: 'https://via.placeholder.com/100x110.png/3c9cff/fff',
|
|
width: 100,
|
|
height: 110
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/200x220.png/f9ae3d/fff',
|
|
width: 200,
|
|
height: 220
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/300x340.png/5ac725/fff',
|
|
width: 300,
|
|
height: 340
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/400x400.png/f56c6c/fff',
|
|
width: 400,
|
|
height: 400
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/500x510.png/909399/fff',
|
|
width: 500,
|
|
height: 510
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/600x606.png/3c9cff/fff',
|
|
width: 600,
|
|
height: 606
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/310x422.png/f1a532/fff',
|
|
width: 310,
|
|
height: 422
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/320x430.png/3c9cff/fff',
|
|
width: 320,
|
|
height: 430
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/330x424.png/f9ae3d/fff',
|
|
width: 330,
|
|
height: 424
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/340x435.png/5ac725/fff',
|
|
width: 340,
|
|
height: 435
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/350x440.png/f56c6c/fff',
|
|
width: 350,
|
|
height: 440
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/380x470.png/909399/fff',
|
|
width: 380,
|
|
height: 470
|
|
}
|
|
];
|
|
let list = [];
|
|
const doFn = (i) => {
|
|
const randomIndex = Math.floor(Math.random() * 10);
|
|
return {
|
|
id: guid(),
|
|
allowEdit: i == 0,
|
|
image: imgs[randomIndex].url,
|
|
w: imgs[randomIndex].width,
|
|
h: imgs[randomIndex].height,
|
|
title: i % 2 == 0 ? `(${this.list.length + i + 1})体验uv-ui框架` : `(${this.list.length + i + 1})uv-ui支持多平台`,
|
|
desc:
|
|
i % 2 == 0
|
|
? `(${this.list.length + i + 1})欢迎使用uv-ui，uni-app生态专用的UI框架`
|
|
: `(${this.list.length + i})开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
|
|
};
|
|
};
|
|
// 模拟异步
|
|
setTimeout(() => {
|
|
for (let i = 0; i < 20; i++) {
|
|
list.push(doFn(i));
|
|
}
|
|
resolve({
|
|
data: list
|
|
});
|
|
}, 200);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
/* background: url('https://oss.wsdns.cn/20240505/eaa18a0271fa42aa8395bd5eb874808a.png') no-repeat; */
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-color: #f0f2f5;
|
|
width: 750rpx;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
$show-lines: 1;
|
|
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
|
|
|
.waterfall-item {
|
|
overflow: hidden;
|
|
margin-top: 10px;
|
|
border-radius: 6px;
|
|
|
|
&__image {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.waterfall-item__ft {
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
|
|
&__title {
|
|
margin-bottom: 10rpx;
|
|
line-height: 48rpx;
|
|
font-weight: 700;
|
|
|
|
.value {
|
|
font-size: 32rpx;
|
|
color: #303133;
|
|
}
|
|
}
|
|
|
|
&__desc .value {
|
|
font-size: 28rpx;
|
|
color: #606266;
|
|
}
|
|
|
|
&__btn {
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
|
|
.user-oreder {
|
|
width: 720rpx;
|
|
margin: 20rpx auto 8rpx auto;
|
|
padding: 28rpx 0;
|
|
border-radius: 16rpx;
|
|
background: #fff;
|
|
|
|
.web-cell-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.web-text-center {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|