2025-10-16
商城主页 商城分类 我的 商品详情40%
This commit is contained in:
@@ -1,174 +1,339 @@
|
||||
<template>
|
||||
<view class="message-container">
|
||||
<!-- 固定背景的容器 -->
|
||||
<view class="background-container"></view>
|
||||
|
||||
<!-- 可滚动的内容区域 -->
|
||||
<view class="content-container" :style="'height:'+height+'px'">
|
||||
|
||||
<u-swiper class="u-m-t-60" :list="list" name="url" height="324"></u-swiper>
|
||||
<scroll-view scroll-y="true" style="height: 100%;">
|
||||
<view class="header-search">
|
||||
<u-search :action-style="searchBtn" shape="square" bg-color="#CADBFF" placeholder="输入商品名称或商品种类"
|
||||
v-model="keyword"></u-search>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<swiper class="swiper" @change="changeMenu">
|
||||
<swiper-item>
|
||||
<u-grid :col="4" :border="false">
|
||||
<u-grid-item bg-color="transparent">
|
||||
<u-icon name="/static/home/1.png" :size="120"></u-icon>
|
||||
<view class="grid-text">精选直播</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item bg-color="transparent">
|
||||
<u-icon name="/static/home/2.png" :size="120"></u-icon>
|
||||
<view class="grid-text">订单数据</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item bg-color="transparent" @click="openMall">
|
||||
<u-icon name="/static/home/3.png" :size="120"></u-icon>
|
||||
<view class="grid-text">商城好物</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item bg-color="transparent">
|
||||
<u-icon name="/static/home/4.png" :size="120"></u-icon>
|
||||
<view class="grid-text">获得积分</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :col="4" :border="false">
|
||||
<u-grid-item bg-color="transparent">
|
||||
<u-icon name="/static/home/5.png" :size="120"></u-icon>
|
||||
<view class="grid-text">微信读书</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="indicator-dots">
|
||||
<view class="indicator-dots-item" :class="current==0?'indicator-dots-active':''">
|
||||
<view class="menu-item" @click="handleCategory">
|
||||
<u-image src="/static/shop/01.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
商品分类
|
||||
</view>
|
||||
<view class="indicator-dots-item" :class="current==1?'indicator-dots-active':''">
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/02.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
观看直播
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/03.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
违规通告
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/04.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
百亿补贴
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/05.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
限时秒杀
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/06.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
会员专区
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/07.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
商品收藏
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/08.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
充值缴费
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/09.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
资质认证
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<u-image src="/static/shop/10.png" :width="iconWidth" mode="widthFix"></u-image>
|
||||
<view class="menu-text">
|
||||
联系客服
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<Tabbar id="tabbarId"></Tabbar>
|
||||
|
||||
<view class="mall-list">
|
||||
<u-waterfall v-model="mallList" ref="mallListRef">
|
||||
<template v-slot:left="{leftList}">
|
||||
<view class="mall-item u-m-r-10" v-for="(item, index) in leftList" :key="index"
|
||||
@click="handleCheck(item)">
|
||||
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image)"
|
||||
:index="index"></u-lazy-load>
|
||||
<view class="mall-title u-m-l-5 u-m-r-5">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
|
||||
<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
|
||||
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
|
||||
{{item.rongdou_price}}
|
||||
</view>
|
||||
<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
|
||||
<u-icon name="integral"></u-icon>
|
||||
{{item.points_price}}
|
||||
</view>
|
||||
<view class="mall-tag u-m-l-5 u-m-r-5">
|
||||
<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
|
||||
融豆
|
||||
</view>
|
||||
<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
|
||||
积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="mall-shop u-m-l-5 u-m-r-5">
|
||||
{{item.category}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{rightList}">
|
||||
<view class="mall-item u-m-l-10" v-for="(item, index) in rightList" :key="index"
|
||||
@click="handleCheck(item)">
|
||||
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image)"
|
||||
:index="index"></u-lazy-load>
|
||||
<view class="mall-title u-m-l-5 u-m-r-5">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
|
||||
<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
|
||||
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
|
||||
{{item.rongdou_price}}
|
||||
</view>
|
||||
<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
|
||||
<u-icon name="integral"></u-icon>
|
||||
{{item.points_price}}
|
||||
</view>
|
||||
<view class="mall-tag u-m-l-5 u-m-r-5">
|
||||
<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
|
||||
融豆
|
||||
</view>
|
||||
<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
|
||||
积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="mall-shop u-m-l-5 u-m-r-5">
|
||||
{{item.category}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-waterfall>
|
||||
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
|
||||
</view>
|
||||
|
||||
<view class="box-div"></view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
<Tabbar id="tabbarId"></Tabbar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, getCurrentInstance } from 'vue';
|
||||
import {
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import { onReady as onUniReady } from '@dcloudio/uni-app';
|
||||
const instance = getCurrentInstance();
|
||||
ref, onMounted
|
||||
} from 'vue';
|
||||
import { mallAPI } from '../../api/mall';
|
||||
import { getImageUrl } from '../../util/common';
|
||||
|
||||
const height = ref(0)
|
||||
const keyword = ref('')
|
||||
const searchBtn = {
|
||||
background: 'linear-gradient(100.84deg, #7B99FF 0%, #002CC2 99.52%)',
|
||||
width: '128rpx',
|
||||
borderRadius: '198rpx',
|
||||
color: '#fff',
|
||||
fontSize: '28rpx',
|
||||
boxShadow: '0px 4px 4px 0px #FFFFFF40 inset',
|
||||
}
|
||||
const iconWidth = "65%"
|
||||
|
||||
const loadHeight = () => {
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
let screenHeight = res.screenHeight
|
||||
uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
|
||||
height.value = screenHeight - data.height
|
||||
}).exec()
|
||||
const handleCategory = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/home/mallCategory'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const params = ref({
|
||||
keyword: '',
|
||||
page: 1,
|
||||
limit: 5,
|
||||
category: ''
|
||||
})
|
||||
const mallList = ref([])
|
||||
const mallListRef = ref()
|
||||
const loadStatus = ref('loadmore') // nomore
|
||||
const maxPage = ref(1)
|
||||
|
||||
// 积分兑换
|
||||
const pointsType = (val : any) => {
|
||||
if (val && val.indexOf("points") >= 0) return true
|
||||
return false
|
||||
}
|
||||
// 融豆兑换
|
||||
const RDType = (val : any) => {
|
||||
if (val && val.indexOf("rongdou") >= 0) return true
|
||||
return false
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const loadMallData = () => {
|
||||
if (loadStatus.value == 'nomore') return
|
||||
mallAPI.getMallList(params.value).then((res) => {
|
||||
console.log(res.data);
|
||||
mallList.value = mallList.value.concat(res.data.products)
|
||||
maxPage.value = res.data.pagination.pages
|
||||
params.value.page++
|
||||
if (maxPage.value < params.value.page) {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const list = [
|
||||
{ url: '/static/banner/1.png' },
|
||||
{ url: '/static/banner/2.png' },
|
||||
{ url: '/static/banner/3.png' },
|
||||
]
|
||||
|
||||
const current = ref(0)
|
||||
const changeMenu = (val : any) => {
|
||||
current.value = val.detail.current
|
||||
}
|
||||
|
||||
const openMall = () => {
|
||||
const handleCheck = (item : any) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/mall'
|
||||
url: '/pages/home/mallDetail?id=' + item.id
|
||||
})
|
||||
}
|
||||
|
||||
onUniReady(() => {
|
||||
loadHeight()
|
||||
onMounted(() => {
|
||||
loadMallData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-container {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* 防止容器本身滚动 */
|
||||
height: 100vh;
|
||||
padding: 60rpx 20rpx;
|
||||
background: #79AFFF;
|
||||
|
||||
/* 固定背景 */
|
||||
.background-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
|
||||
z-index: 1;
|
||||
/* 确保背景在内容下方 */
|
||||
.header-search {
|
||||
.search-btn {
|
||||
;
|
||||
box-shadow: 0px -4px 4px 0px #00000040 inset;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容滚动区域 */
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
/* 确保内容在背景上方 */
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
// padding: 32rpx;
|
||||
.menu-list {
|
||||
background: #FFFFFF80;
|
||||
margin-top: 32rpx;
|
||||
padding: 20rpx 0 0 0;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.menu-list {
|
||||
border-top-left-radius: 32rpx;
|
||||
border-top-right-radius: 32rpx;
|
||||
box-shadow: 0rpx -8rpx 20rpx 0rpx #628AC080;
|
||||
padding-bottom: 20rpx;
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.swiper {
|
||||
height: 200rpx;
|
||||
.menu-text {
|
||||
font-family: Work Sans;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 24rpx;
|
||||
leading-trim: NONE;
|
||||
line-height: 100%;
|
||||
letter-spacing: -2%;
|
||||
color: #2B2B2B;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-text {
|
||||
font-family: Work Sans;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 28rpx;
|
||||
leading-trim: NONE;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: -2%;
|
||||
text-align: center;
|
||||
|
||||
// 商城列表
|
||||
.mall-list {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.mall-item {
|
||||
border-radius: 16rpx;
|
||||
background: #F0F5FF;
|
||||
position: relative;
|
||||
margin-top: 20rpx;
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.mall-title {
|
||||
font-size: 30rpx;
|
||||
margin-top: 10rpx;
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
.mall-price {
|
||||
font-size: 30rpx;
|
||||
color: $u-type-error;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.icon {
|
||||
height: 30rpx;
|
||||
width: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.indicator-dots {
|
||||
// margin-top: 40rpx;
|
||||
|
||||
.mall-tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
|
||||
.mall-tag-owner {
|
||||
background-color: $u-type-error;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mall-tag-text {
|
||||
margin-right: 10px;
|
||||
border: 1px solid $u-type-primary;
|
||||
color: $u-type-primary;
|
||||
border-radius: 50rpx;
|
||||
line-height: 1;
|
||||
padding: 4rpx 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-dots-item {
|
||||
background-color: $u-tips-color;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 10px;
|
||||
margin: 0 3px;
|
||||
|
||||
|
||||
.mall-shop {
|
||||
font-size: 22rpx;
|
||||
color: $u-tips-color;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.indicator-dots-active {
|
||||
background-color: $u-type-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.box-div {
|
||||
padding: 30rpx 0rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user