348 lines
8.5 KiB
Vue
348 lines
8.5 KiB
Vue
<template>
|
||
<view class="whole" v-if="!loading">
|
||
<view class="banner"></view>
|
||
|
||
<view class="tabBox" :class="fixed ? 'fixed' : ''">
|
||
<up-tabs
|
||
:current="active"
|
||
:lineHeight="0"
|
||
keyName="name"
|
||
:list="category"
|
||
:lineColor="Color"
|
||
:activeStyle="{ color: Color }"
|
||
@click="onClickTab">
|
||
</up-tabs>
|
||
</view>
|
||
|
||
<view class="goodbox" v-if="goodsList.length !== 0">
|
||
<template v-for="(item, index) in goodsList" :key="index">
|
||
<view class="item" v-if="item.shop_group_goods" @click="toGroups(item.shop_group_goods_id)">
|
||
<view class="imgbox">
|
||
<image :src="item.shop_group_goods.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img"></image>
|
||
<view class="tag" v-if="index < 3" :class="'tag' + (index + 1)" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
|
||
<view class="tag tag4 " v-else>{{index + 1}}</view>
|
||
<view class="out" v-if="item.shop_group_goods.sold_status === 2">
|
||
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" />
|
||
</view>
|
||
<view class="out" v-else-if="item.shop_group_goods.sold_status === 0">
|
||
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" />
|
||
</view>
|
||
<view class="out" v-else-if="item.shop_group_goods.total_stock === 0">
|
||
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/pMTv6QiZZEpSqkJmk7hMcbEzIuNzMyp7YVBbe42H.png" class="out_img" />
|
||
</view>
|
||
</view>
|
||
<view class="box">
|
||
<view class="title">
|
||
<view class="tit">{{item.shop_group_goods.title}}</view>
|
||
<view class="sale">已团{{item.shop_group_goods.total_sales}}
|
||
<text v-if="role">（月销{{item.shop_group_goods.sales}}）</text>
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
<view class="price"><text class="prefix">￥</text>
|
||
<text class="txt" v-if="item.shop_group_goods.price * 1 > 0">{{item.shop_group_goods.price}}</text>
|
||
<template v-else>
|
||
<text class="txt" v-if="parseFloat(item.shop_group_goods.min_price) == parseFloat(item.shop_group_goods.max_price)">{{item.shop_group_goods.min_price}}</text>
|
||
<text class="txt" v-else>{{item.shop_group_goods.min_price * 1}}~{{item.shop_group_goods.max_price}}</text>
|
||
</template>
|
||
</view>
|
||
<view class="btn">立即抢购</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<view class="bottom">— 没有更多了 —</view>
|
||
</view>
|
||
|
||
<view v-else class="empty">
|
||
<up-empty mode="data" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据"></up-empty>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs } from 'vue'
|
||
import { userBind } from '@/components/common.js'
|
||
import { get, post } from '@/api/request.js'
|
||
import { Style } from '@/utils/list.js'
|
||
import { sp2 } from '@/components/img.js'
|
||
|
||
export default {
|
||
setup() {
|
||
const data = reactive({
|
||
sp2: sp2,
|
||
category: [],
|
||
active: 0,
|
||
goodsList: [],
|
||
loading: true,
|
||
showTop: false,
|
||
shareUrl: '',
|
||
Color: '',
|
||
priceColor: '',
|
||
fixed: false,
|
||
role: uni.getStorageSync('role') == 1 || uni.getStorageSync('role') == 4
|
||
})
|
||
|
||
async function getFetchList() {
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '加载中'
|
||
})
|
||
await get('/api/v1/group/goods/top').then((res) => {
|
||
data.category = res.data
|
||
if(data.active) {
|
||
for (let i = 0; i < res.data.length; i++) {
|
||
if(data.active == res.data[i].id) {
|
||
data.active = i
|
||
break
|
||
}
|
||
}
|
||
}
|
||
data.goodsList = res.data[data.active].top
|
||
data.loading = false
|
||
uni.hideLoading()
|
||
}).catch(() => {
|
||
data.loading = false
|
||
})
|
||
}
|
||
|
||
// 分享路径
|
||
const getShareUrl = () => {
|
||
post('/api/v1/user/share', {
|
||
page: 'pages/mine/other/ranking',
|
||
query: ``
|
||
}).then((res) => {
|
||
data.shareUrl = res.data.path
|
||
})
|
||
}
|
||
|
||
const onClickTab = (e) => {
|
||
uni.pageScrollTo({
|
||
scrollTop: Math.random(),
|
||
duration: 300
|
||
})
|
||
data.active = e.index
|
||
data.goodsList = JSON.parse(JSON.stringify(data.category[data.active].top))
|
||
}
|
||
|
||
const toGroups = (id) => {
|
||
uni.navigateTo({
|
||
url: '/pages/groups/index?id=' + id
|
||
})
|
||
}
|
||
|
||
return {
|
||
...toRefs(data),
|
||
getFetchList,
|
||
toGroups,
|
||
userBind,
|
||
getShareUrl,
|
||
onClickTab
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
if (e.scrollTop > 300) {
|
||
this.showTop = true
|
||
} else {
|
||
this.showTop = false
|
||
}
|
||
this.fixed = e.scrollTop > 150
|
||
},
|
||
async onLoad(options) {
|
||
this.active = (options.id || 0) * 1
|
||
// await this.$onLaunched
|
||
await this.getFetchList()
|
||
this.Color = uni.getStorageSync('theme_color')
|
||
this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
|
||
this.getShareUrl()
|
||
let params = {
|
||
from: options.from || 0,
|
||
s: options.s || 0,
|
||
u: options.u || 0,
|
||
group_id: 0,
|
||
company_id: options.company_id || ''
|
||
}
|
||
this.userBind(params)
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: '热销榜单',
|
||
imageUrl: '',
|
||
path: this.shareUrl + '&id=' + this.category[this.active] ? this.category[this.active].id : 0
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.whole{
|
||
.banner{
|
||
width: 100%;
|
||
height: 380rpx;
|
||
position: relative;
|
||
background: url('https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/07/05/kxXS5PnjnBM5UcXqZo96NrKX61nqv0pnZBpcA7uR.png') no-repeat center;
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
padding-bottom: 40rpx;
|
||
box-sizing: border-box;
|
||
.img{
|
||
width: 100%;
|
||
vertical-align: bottom;
|
||
}
|
||
}
|
||
.tabBox{
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
margin-top: -120rpx;
|
||
margin-bottom: 36rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
&.fixed{
|
||
position: sticky;
|
||
top: 0;
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
.goodbox{
|
||
padding: 24rpx 24rpx 0;
|
||
position: relative;
|
||
z-index: 1;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
margin-top: -20rpx;
|
||
background: #f5f5f5;
|
||
.item{
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.img{
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
.imgbox{
|
||
position: relative;
|
||
.out{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
.out_img{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
}
|
||
.tag{
|
||
position: absolute;
|
||
width: 16px;
|
||
height: 16px;
|
||
top: 0;
|
||
left: 0;
|
||
background-repeat: no-repeat;
|
||
background-size: 678px 612px;
|
||
&.tag1{
|
||
background-position: -352px -209px;
|
||
}
|
||
&.tag2{
|
||
background-position: -305.5px -209px;
|
||
}
|
||
&.tag3{
|
||
background-position: -138px -209px;
|
||
}
|
||
&.tag4{
|
||
background-color: #CBD2D6;
|
||
border-radius: 6rpx 0 0 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.box{
|
||
display: flex;
|
||
width: calc(100% - 220rpx);
|
||
flex-direction: column;
|
||
justify-content: inherit;
|
||
.sale{
|
||
font-size: 24rpx;
|
||
color: v-bind('priceColor');
|
||
margin-top: 10rpx;
|
||
}
|
||
.tit{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 44rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
white-space: break-spaces;
|
||
}
|
||
.text{
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
.price{
|
||
text-align: left;
|
||
width: calc(100% - 160rpx);
|
||
line-height: 56rpx;
|
||
color: v-bind('priceColor');
|
||
font-weight: 600;
|
||
.txt{
|
||
font-size: 36rpx;
|
||
}
|
||
.prefix{
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.btn{
|
||
border: 1px solid v-bind('Color');
|
||
border-radius: 56rpx;
|
||
font-size: 24rpx;
|
||
color: v-bind('Color');
|
||
padding: 10rpx 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin: auto;
|
||
line-height: 80rpx;
|
||
}
|
||
.empty{
|
||
width: 100%;
|
||
height: calc(100vh - 100rpx);
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
::v-deep .u-tabs {
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
}
|
||
::v-deep .fixed .u-sticky {
|
||
border-radius: 0;
|
||
}
|
||
</style>
|