381 lines
9.2 KiB
Vue
381 lines
9.2 KiB
Vue
<template>
|
|
<view style="background: #f5f5f5; padding-bottom: 1rpx;">
|
|
<view class="home-top">
|
|
<swiper v-if="images.length !== 0" class="home-top-swiper" :autoplay="true" :interval="5000" :duration="500" :indicator-dots="true" :circular="true">
|
|
<swiper-item v-for="(item,index) in images" :key="index">
|
|
<image class="item_img" :src="item.pic_url + '?x-oss-process=image/format,webp'" :webp="true" @click="onSwiperItem(item.link)"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="Minute">
|
|
<view class="box" @click="hanlejump('/pages/sale/index')">
|
|
<view class="h3">超级爆品 <view class="small">GO <up-icon name="arrow-right" size="10" /></view></view>
|
|
<view style="display: flex;">
|
|
<template v-for="(item, index) in hot" :key="index">
|
|
<view v-if="index < 2">
|
|
<view class="red">{{item.title}}</view>
|
|
<view><image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" class="imgs" mode="aspectFill"></image></view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view class="box" @click="hanlejump('/pages/sale/list?type=1')">
|
|
<view class="h3">TOP榜单 <view class="small1">GO <up-icon name="arrow-right" size="10" /></view></view>
|
|
<view style="display: flex;">
|
|
<template v-for="(item, index) in top" :key="index">
|
|
<view v-if="index < 2">
|
|
<view class="bule">{{item.title}}</view>
|
|
<view><image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" class="imgs" mode="aspectFill"></image></view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<template v-for="(list, index) in merchant" :key="list.id">
|
|
<view v-if="list.shop_goods.length !== 0" class="shop">
|
|
<view v-if="list.sold_status != 2">
|
|
<view class="banner" @click="jumpHall(list.id)">
|
|
<image :src="list.ad_image + '?x-oss-process=image/format,webp'" :webp="true" mode="widthFix" class="img"></image>
|
|
</view>
|
|
<view class="title">
|
|
<view class="activeTitle">
|
|
<view class="name">{{list.name}}</view>
|
|
<view class="toActive" @click="jumpHall(list.id)">进入会场</view>
|
|
</view>
|
|
<view class="activeTitle" style="margin-top: 10rpx;height: 44rpx;">
|
|
<view>
|
|
<view class="move" v-if="list.actives && list.actives.length > 0">
|
|
{{list.actives && list.actives.length > 0 ? list.actives[0].name : ''}}
|
|
</view>
|
|
<view class="move">7天无理由</view>
|
|
</view>
|
|
<view class="endtime" v-if="list.sold_status == 1 && list.sold_off_time" v-html="DownTime(list.sold_off_time, 1)"></view>
|
|
<view class="endtime" v-if="list.sold_status == 0" v-html="UpTime(list.sold_start_time, 1)"></view>
|
|
</view>
|
|
|
|
<view class="goodscommodity">
|
|
<view class="goodsgun" v-for="(it, index) in list.shop_goods" :key="index" @click="toDetail(it.id)">
|
|
<image :src="it.face_img + '?x-oss-process=image/resize,m_fill,w_300,h_300'" :webp="true" class="img" mode="aspectFill"></image>
|
|
<view class="price_list">
|
|
<text class="icon">￥</text>
|
|
<text v-if="it.price > 0">{{it.price}}</text>
|
|
<block v-else>
|
|
<text v-if="it.max_price == it.min_price">{{it.min_price}}</text>
|
|
<text v-else>{{it.min_price * 1}}~{{it.max_price}}</text>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view v-if="list.shop_goods.length" @click="jumpHall(list.id)" class="viewmore">
|
|
<text>查看更多</text>
|
|
<view class="line"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs, onMounted } from 'vue'
|
|
import { get, post } from '@/api/request.js'
|
|
import { UpTime, DownTime } from '@/components/common.js'
|
|
export default {
|
|
props: {
|
|
|
|
},
|
|
setup() {
|
|
const data = reactive({
|
|
images: [],
|
|
hot: [],
|
|
top: [],
|
|
merchant: [],
|
|
total: 0,
|
|
page: 1,
|
|
endTime: '',
|
|
Color: ''
|
|
})
|
|
//跳转页面
|
|
const hanlejump = (url) => {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
// 获取轮播图
|
|
const getbanner = async () => {
|
|
let res = await get('/api/v1/special/banner')
|
|
data.images = res.data
|
|
}
|
|
//爆款
|
|
const gethot = async () => {
|
|
let res = await get('/api/v1/special/goods/hot')
|
|
data.hot = res.data
|
|
}
|
|
//top榜
|
|
const gettop = async () => {
|
|
let res = await get('/api/v1/special/goods/top')
|
|
data.top = res.data
|
|
}
|
|
//小店
|
|
const getmerchant = async () => {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let res = await get('/api/v1/special/merchant', {
|
|
page: data.page,
|
|
limit: 5
|
|
})
|
|
data.merchant = data.merchant.concat(res.data)
|
|
data.total = res.meta.last_page
|
|
uni.hideLoading()
|
|
}
|
|
// 轮播图跳转
|
|
function onSwiperItem(url) {
|
|
if (url) {
|
|
if(url.indexOf('type=category') !== -1) {
|
|
uni.navigateTo({ url: '/pages/lotRecom/index?' + url.split('?')[1] })
|
|
} else if(url.indexOf('type=shop_group') !== -1) {
|
|
uni.navigateTo({ url: '/pages/subset/index?' + url.split('?')[1] })
|
|
} else {
|
|
uni.navigateTo({ url: url })
|
|
}
|
|
}
|
|
}
|
|
|
|
const toDetail = (id) => {
|
|
uni.navigateTo({
|
|
url: '/pages/productDetails/index?id=' + id
|
|
})
|
|
}
|
|
const jumpHall = (id) => {
|
|
uni.navigateTo({
|
|
url: '/pages/smallshop/index?id=' + id
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
data.Color = uni.getStorageSync('theme_color')
|
|
getbanner()
|
|
gethot()
|
|
gettop()
|
|
getmerchant()
|
|
})
|
|
return {
|
|
...toRefs(data),
|
|
hanlejump,
|
|
onSwiperItem,
|
|
toDetail,
|
|
jumpHall,
|
|
getmerchant,
|
|
DownTime,
|
|
UpTime
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if (this.page < this.total) {
|
|
this.page++
|
|
this.getmerchant()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.activeTitle {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.toActive {
|
|
background-color: v-bind('Color');
|
|
border-radius: 44rpx;
|
|
color: #fff;
|
|
padding: 4rpx 22rpx;
|
|
font-size: 28rpx;
|
|
height: 38rpx;
|
|
line-height: 38rpx;
|
|
}
|
|
.move {
|
|
display: inline-block;
|
|
border: 1px solid v-bind('Color');
|
|
color:v-bind('Color');
|
|
padding: 6rpx 10rpx;
|
|
font-size: 24rpx;
|
|
border-radius: 6rpx;
|
|
line-height: 1;
|
|
margin-left: 8rpx;
|
|
}
|
|
.endtime {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
line-height: 44rpx;
|
|
b{
|
|
color: #2c2c2c;
|
|
}
|
|
}
|
|
}
|
|
|
|
.market_price {
|
|
display: block;
|
|
color: #676767;
|
|
text-decoration: line-through;
|
|
font-size: 25rpx;
|
|
}
|
|
.go1 {
|
|
margin-top: 108rpx;
|
|
}
|
|
.go {
|
|
margin-top: 133rpx;
|
|
}
|
|
.shop {
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
margin: 24rpx 20rpx;
|
|
.banner {
|
|
width: 100%;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-top-left-radius: 10rpx;
|
|
border-top-right-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
padding: 25rpx 13rpx;
|
|
.name {
|
|
font-weight: bolder;
|
|
font-size: 30rpx;
|
|
margin-left: 15rpx;
|
|
}
|
|
.goodscommodity {
|
|
display: flex;
|
|
margin-top: 25rpx;
|
|
overflow: auto;
|
|
.goodsgun {
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
width: 36%;
|
|
.img {
|
|
width: 214rpx;
|
|
height: 214rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
.title_list {
|
|
font-size: 26rpx;
|
|
color: #2c2c2c;
|
|
margin: 10rpx 0;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.price_list {
|
|
font-size: 26rpx;
|
|
margin-top: 16rpx;
|
|
.icon {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.viewmore{
|
|
width: 214rpx;
|
|
height: 214rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6rpx;
|
|
font-size: 28rpx;
|
|
flex-direction: column;
|
|
background-color: #F5F5F5;
|
|
.line{
|
|
width: 70%;
|
|
height: 2px;
|
|
background-color: #333;
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-top-swiper {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
.item_img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.Minute {
|
|
display: flex;
|
|
border-radius: 20rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
margin: 24rpx 20rpx;
|
|
padding: 26rpx 26rpx;
|
|
box-sizing: border-box;
|
|
.box {
|
|
width: 50%;
|
|
.h3 {
|
|
font-weight: bolder;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.small {
|
|
background: #F14939;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
border-radius: 15rpx;
|
|
display: inline-flex;
|
|
width: 60rpx;
|
|
height: 30rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 10rpx;
|
|
}
|
|
.red {
|
|
color: #F14939;
|
|
font-size: 26rpx;
|
|
margin: 20rpx 0;
|
|
width: 166rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.bule {
|
|
color: #6bb3f2;
|
|
font-size: 26rpx;
|
|
margin: 20rpx 0;
|
|
width: 166rpx;
|
|
overflow: hidden; /*内容超出后隐藏*/
|
|
text-overflow: ellipsis; /* 超出内容显示为省略号 */
|
|
white-space: nowrap; /* 文本不进行换行 */
|
|
}
|
|
|
|
.small1 {
|
|
background: #6bb3f2;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
border-radius: 15rpx;
|
|
display: inline-flex;
|
|
width: 60rpx;
|
|
height: 30rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.imgs {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|