316 lines
8.6 KiB
Vue
316 lines
8.6 KiB
Vue
<script>
|
|
import Tabs from "./Tabs.vue";
|
|
|
|
export default {
|
|
name: "Index",
|
|
components: {Tabs},
|
|
data() {
|
|
return {
|
|
swiper: [
|
|
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png' },
|
|
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
|
|
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png' },
|
|
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
|
|
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png' }
|
|
],
|
|
swiperHeight: 190, // 默认高度
|
|
quickAccess: [
|
|
{ name: '余额查询', icon: 'red-packet-fill' },
|
|
{ name: '积分商城', icon: 'integral' },
|
|
// { name: '客服中心', icon: 'kefup-ermai' },
|
|
// { name: '优惠券', icon: 'coupon-fill' },
|
|
// { name: '礼券中心', icon: 'gift-fill' },
|
|
{ name: '预约列表', icon: 'calendar-fill' },
|
|
{ name: '我的订单', icon: 'order' },
|
|
// { name: '我的住址', icon: 'map-fill' },
|
|
{ name: '我的收藏', icon: 'star-fill' },
|
|
// { name: '常见问题', icon: 'question-circle' },
|
|
// { name: '问题反馈', icon: 'error-circle-fill' },
|
|
],
|
|
scrollList: [
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '全屋清洁',
|
|
price: '99.00',
|
|
tag: '热门',
|
|
purchased: true,
|
|
purchaseCount: 120
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '全屋清洁',
|
|
price: '99.00',
|
|
tag: '热门',
|
|
purchased: true,
|
|
purchaseCount: 120
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '全屋清洁',
|
|
price: '99.00',
|
|
tag: '热门',
|
|
purchased: true,
|
|
purchaseCount: 120
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '全屋清洁',
|
|
price: '99.00',
|
|
tag: '热门',
|
|
purchased: true,
|
|
purchaseCount: 120
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '全屋清洁',
|
|
price: '99.00',
|
|
tag: '热门',
|
|
purchased: true,
|
|
purchaseCount: 120
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '全屋清洁',
|
|
price: '99.00',
|
|
tag: '热门',
|
|
purchased: true,
|
|
purchaseCount: 120
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '全屋清洁',
|
|
price: '99.00',
|
|
tag: '热门',
|
|
purchased: true,
|
|
purchaseCount: 120
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '深度清洁',
|
|
price: '129.00',
|
|
tag: '新品',
|
|
purchased: false,
|
|
purchaseCount: 80
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '除尘服务',
|
|
price: '89.00',
|
|
tag: '优惠',
|
|
purchased: false,
|
|
purchaseCount: 200
|
|
},
|
|
{
|
|
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
|
name: '家庭保洁',
|
|
price: '119.00',
|
|
tag: '推荐',
|
|
purchased: true,
|
|
purchaseCount: 150
|
|
},
|
|
],
|
|
itemsPerPage: 10 // 每页显示的项数
|
|
};
|
|
},
|
|
computed: {
|
|
paginatedQuickAccess() {
|
|
const pages = [];
|
|
for (let i = 0; i < this.quickAccess.length; i += this.itemsPerPage) {
|
|
pages.push(this.quickAccess.slice(i, i + this.itemsPerPage));
|
|
}
|
|
return pages;
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log('onLoad');
|
|
},
|
|
mounted() {
|
|
this.updateSwiperHeight();
|
|
window.addEventListener('resize', this.updateSwiperHeight);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.updateSwiperHeight);
|
|
},
|
|
methods: {
|
|
goToDetail(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/info/index?name=${item.name}&price=${item.price}&img=${item.img}&tag=${item.tag}&purchaseCount=${item.purchaseCount}&purchased=${item.purchased}`
|
|
});
|
|
},
|
|
updateSwiperHeight() {
|
|
const width = window.innerWidth;
|
|
if (width >= 1920) {
|
|
this.swiperHeight = 600;
|
|
} else if (width >= 1024) {
|
|
this.swiperHeight = 500;
|
|
} else if (width >= 768) {
|
|
this.swiperHeight = 300;
|
|
} else {
|
|
this.swiperHeight = 190;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<view>
|
|
<!-- 轮播图 -->
|
|
<view class="swiper-images">
|
|
<up-swiper
|
|
:list="swiper"
|
|
keyName="image"
|
|
circular
|
|
:height="swiperHeight"
|
|
indicatorActiveColor="#ff8800"
|
|
indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
|
|
:indicatorStyle="{ right: '20rpx' }"
|
|
:circular="true"
|
|
:indicator="true"
|
|
></up-swiper>
|
|
</view>
|
|
|
|
<!-- 快捷入口 -->
|
|
<view class="quick-access">
|
|
<view class="title">全部功能</view>
|
|
<swiper :indicator-dots="true" indicator-active-color="#ff8800" class="swiper">
|
|
<swiper-item v-for="(page, pageIndex) in paginatedQuickAccess" :key="pageIndex">
|
|
<up-grid :border="true" col="5">
|
|
<up-grid-item
|
|
v-for="(item, index) in page"
|
|
:key="index"
|
|
style="border: none !important;"
|
|
>
|
|
<up-icon
|
|
:customStyle="{paddingTop: 20 + 'rpx', color: '#ff8800'}"
|
|
:name="item.icon"
|
|
:size="22"
|
|
></up-icon>
|
|
<text class="grid-text">{{ item.name }}</text>
|
|
</up-grid-item>
|
|
</up-grid>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<view class="title">推荐服务</view>
|
|
<!-- 商品列表 -->
|
|
<view class="box">
|
|
|
|
<view class="lists">
|
|
<view class="h-item" v-for="(item, index) in scrollList" :key="index" @click="goToDetail(item)">
|
|
<view class="left">
|
|
<image :src="item.img" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="tit">
|
|
{{ item.name }}
|
|
<text v-if="item.purchased" class="purchased-tag">购买过</text>
|
|
</view>
|
|
<view class="price">价格: ￥{{ item.price }}</view>
|
|
<view class="purchase-count">购买人数: {{ item.purchaseCount }}</view>
|
|
</view>
|
|
<view class="tag">{{ item.tag }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.swiper-images {
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
.swiper {
|
|
border: none;
|
|
border-radius: 20rpx;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 0 10rpx rgba(153, 153, 153, 0.3);
|
|
|
|
}
|
|
|
|
.grid-text {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
padding: 10rpx 0 20rpx 0;
|
|
/* #ifndef APP-PLUS */
|
|
box-sizing: border-box;
|
|
/* #endif */
|
|
}
|
|
|
|
/* 服务列表 */
|
|
.box {
|
|
margin-top: 10px;
|
|
padding: 30rpx 50rpx 30rpx 10rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 0 10rpx rgba(153, 153, 153, 0.3);
|
|
}
|
|
|
|
.title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
margin-bottom: 20rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.h-item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
padding: 20rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 0 10rpx rgba(153, 153, 153, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.h-item .left image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.h-item .info {
|
|
flex: 1;
|
|
}
|
|
|
|
.h-item .info .tit {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.h-item .info .price {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.h-item .info .purchase-count {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-top: 10rpx;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
}
|
|
|
|
.h-item .tag {
|
|
font-size: 24rpx;
|
|
color: #ff8800;
|
|
background-color: #ffe4d2;
|
|
padding: 5rpx 10rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.purchased-tag {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
background-color: #ff8800;
|
|
padding: 5rpx 10rpx;
|
|
border-radius: 5rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
</style>
|