<template>
|
<view class="u-page">
|
<u-toast ref="uToast"/>
|
<view class="u-block">
|
<u-search :show-action="false" :disabled="true" @click="onSearchTextClick"/>
|
</view>
|
<view class="swiper">
|
<u-swiper :list="swiperList" height="200" imgMode="aspectFill" @click="onSwiperClick"/>
|
</view>
|
<view class="u-block">
|
<u-scroll-list>
|
<view class="scroll-list">
|
<view class="scroll-list__line"
|
v-for="(item, index) in menuArr"
|
:key="index">
|
<view class="scroll-list__line__item"
|
v-for="(item1, index1) in item"
|
:key="index1"
|
:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
|
<image
|
class="scroll-list__line__item__image"
|
:src="menuBaseUrl + item1.icon"
|
mode=""
|
></image>
|
<text class="scroll-list__line__item__text">{{ item1.name }}</text>
|
</view>
|
</view>
|
</view>
|
</u-scroll-list>
|
</view>
|
<view class="u-block">
|
<u-scroll-list @right="right" @left="left">
|
<view class="scroll-list" style="flex-direction: row;">
|
<view class="scroll-list__goods-item"
|
v-for="(item, index) in list"
|
:key="index"
|
:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
|
<image class="scroll-list__goods-item__image" :src="item.thumb"></image>
|
<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
|
</view>
|
<view class="scroll-list__show-more">
|
<text class="scroll-list__show-more__text">查看更多</text>
|
<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
|
</view>
|
</view>
|
</u-scroll-list>
|
</view>
|
<view class="u-block">
|
<view v-for="(category,i) in categoryProducts" :key="category.id">
|
<view style="margin: 10px;text-align: center; vertical-align: center; background-color: #f5f4f4; width: 100%; height: 40px;">
|
<text>{{category.name}}</text>
|
<u-icon name="more-dot-fill" color="#f56c6c" size="12"></u-icon>
|
</view>
|
<view>
|
<u-grid :border="true">
|
<u-grid-item v-for="(product,j) in category.products" :key="product.id"
|
@click="onProductClick(product)">
|
<view>
|
<up-image :show-loading="true" :src="'https://cdn.uviewui.com/uview/swiper/swiper1.png'"
|
width="60px" height="60px"/>
|
<text>{{product.name}}</text>
|
</view>
|
</u-grid-item>
|
</u-grid>
|
</view>
|
<view>
|
<text>查看更多</text>
|
<u-icon name="arrow-leftward" color="#f56c6c" size="12"/>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {ref, reactive, toRefs, onMounted, getCurrentInstance} from "vue";
|
import {useBasicInfoStore} from "../../store/basicInfo"
|
import {GetProductCategoryWithProductList} from '../../apis/api'
|
|
export default {
|
setup() {
|
const userStore = useBasicInfoStore()
|
const {proxy} = getCurrentInstance();
|
const state = reactive({
|
swiperList: [
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
],
|
menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
|
list: [
|
{
|
price: '230.5',
|
thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
|
}, {
|
price: '74.1',
|
thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
|
}, {
|
price: '8457',
|
thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
|
}, {
|
price: '1442',
|
thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
|
}, {
|
price: '541',
|
thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
|
}, {
|
price: '234',
|
thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
|
}, {
|
price: '562',
|
thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
|
}, {
|
price: '251.5',
|
thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
|
}
|
],
|
menuArr: [
|
[{
|
name: '天猫新品',
|
icon: '11.png'
|
},
|
{
|
name: '今日爆款',
|
icon: '9.png'
|
}, {
|
name: '天猫国际',
|
icon: '17.png'
|
}, {
|
name: '饿了么',
|
icon: '6.png'
|
}, {
|
name: '天猫超市',
|
icon: '11.png'
|
}, {
|
name: '分类',
|
icon: '2.png'
|
}, {
|
name: '天猫美食',
|
icon: '3.png'
|
}, {
|
name: '阿里健康',
|
icon: '12.png'
|
}, {
|
name: '口碑生活',
|
icon: '7.png'
|
}
|
],
|
[{
|
name: '充值中心',
|
icon: '8.png'
|
},
|
{
|
name: '机票酒店',
|
icon: '10.png'
|
}, {
|
name: '金币庄园',
|
icon: '18.png'
|
}, {
|
name: '阿里拍卖',
|
icon: '15.png'
|
}, {
|
name: '淘宝吃货',
|
icon: '16.png'
|
}, {
|
name: '闲鱼',
|
icon: '4.png'
|
}, {
|
name: '会员中心',
|
icon: '6.png'
|
}, {
|
name: '造点新货',
|
icon: '13.png'
|
}, {
|
name: '土货鲜食',
|
icon: '14.png'
|
}
|
]
|
],
|
categoryProducts: [],
|
category: null,
|
})
|
|
onMounted(() => {
|
Init();
|
loadProductCategories();
|
});
|
|
const Init = () => {
|
|
}
|
|
const loadProductCategories = () => {
|
state.categoryProducts = [];
|
|
GetProductCategoryWithProductList({productcount: 6}).then(resp => {
|
if (resp.data) {
|
state.categoryProducts = resp.data;
|
if (state.categoryProducts)
|
state.categoryProducts = state.categoryProducts.filter(c => c.products != null && c.products.length > 0);
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
}
|
|
const onSwiperClick = (data) => {
|
console.log(data);
|
}
|
|
const onProductCategoryClick = (category) => {
|
userStore.category = category;
|
|
uni.switchTab({
|
url: `/pages/category/index`,
|
});
|
}
|
|
const onProductClick = (product) => {
|
let params = {
|
id: product.id
|
}
|
|
uni.navigateTo({
|
url: `/pages/product/index?data=${encodeURIComponent(JSON.stringify(params))}`,
|
});
|
}
|
|
const onSearchTextClick = (data) => {
|
|
uni.navigateTo({
|
url: `/pages/search/index`,
|
});
|
proxy.$refs.uToast.success(`点击了search`)
|
}
|
|
return {
|
...toRefs(state),
|
userStore,
|
onSearchTextClick,
|
onSwiperClick,
|
onProductCategoryClick,
|
onProductClick
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.u-block {
|
margin: 10px;
|
}
|
|
.swiper {
|
width: 100%;
|
overflow: auto;
|
}
|
|
.scroll-list {
|
@include flex(column);
|
|
&__goods-item {
|
margin-right: 20px;
|
|
&__image {
|
width: 60px;
|
height: 60px;
|
border-radius: 4px;
|
}
|
|
&__text {
|
color: #f56c6c;
|
text-align: center;
|
font-size: 12px;
|
margin-top: 5px;
|
}
|
}
|
|
&__show-more {
|
background-color: #fff0f0;
|
border-radius: 3px;
|
padding: 3px 6px;
|
@include flex(column);
|
align-items: center;
|
|
&__text {
|
font-size: 12px;
|
width: 12px;
|
color: #f56c6c;
|
line-height: 16px;
|
}
|
}
|
|
&__line {
|
@include flex;
|
margin-top: 10px;
|
|
&__item {
|
margin-right: 15px;
|
|
&__image {
|
width: 61px;
|
height: 48px;
|
}
|
|
&__text {
|
margin-top: 5px;
|
color: $u-content-color;
|
font-size: 12px;
|
text-align: center;
|
}
|
|
&--no-margin-right {
|
margin-right: 0;
|
}
|
}
|
}
|
}
|
</style>
|
