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>
|