250320
This commit is contained in:
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<view class="waterfall">
|
||||
<!-- search-->
|
||||
<view class="search" style="padding: 0 10rpx; background-color: #FFFFFF">
|
||||
<uni-search-bar radius="5" placeholder="搜索商品" v-model="where.keywords" clearButton="auto" cancelButton="none" @confirm="search"/>
|
||||
</view>
|
||||
|
||||
<!-- 推荐美食 -->
|
||||
<ws-goods :goods="goods" />
|
||||
|
||||
</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';
|
||||
import {getIndex} from "@/api/cms/mp";
|
||||
|
||||
|
||||
const tenantStore = useTenantStore();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
where: {
|
||||
|
||||
},
|
||||
goods: [],
|
||||
foods: [],
|
||||
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({keywords}) {
|
||||
if(keywords){
|
||||
this.where.keywords = keywords
|
||||
uni.setNavigationBarTitle({
|
||||
title: '商品搜索'
|
||||
})
|
||||
}
|
||||
// 请求数据
|
||||
await this.reload()
|
||||
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this
|
||||
|
||||
// 获取服务租户信息包
|
||||
const info = await tenantStore.fetchTenantInfo();
|
||||
await this.getIndexData()
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
app.isLogin = true;
|
||||
}
|
||||
|
||||
// 请求数据
|
||||
Promise.all([app.pageGoods(),app.getGoodsCategory(), app.getIndexData()])
|
||||
.then((res) => {
|
||||
app.goodsList = res[0];
|
||||
app.goodsCategoryList = res[1];
|
||||
app.hideTools = false
|
||||
if(res[2]){
|
||||
app.foods = res[2]?.foods;
|
||||
app.goods = res[2]?.goods;
|
||||
}
|
||||
})
|
||||
},
|
||||
getIndexData(){
|
||||
const app = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getIndex({})
|
||||
.then((result) => {
|
||||
resolve(result);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
pageGoods() {
|
||||
const app = this
|
||||
const { categoryId } = this
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.pageGoods(app.where)
|
||||
.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>
|
||||
Reference in New Issue
Block a user