359 lines
9.1 KiB
Vue
359 lines
9.1 KiB
Vue
<template>
|
|
<view class="message-container">
|
|
<scroll-view scroll-y="true" :style="'height:'+height+'px'" @scrolltolower="loadMallData"
|
|
:refresher-threshold="50" :refresher-triggered="isRefresher" refresher-background="transparent"
|
|
refresher-enabled="true" @refresherrefresh="reflash">
|
|
<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">
|
|
<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>
|
|
<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 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>
|
|
<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)">
|
|
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
|
|
{{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>
|
|
<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)">
|
|
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
|
|
{{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>
|
|
</view>
|
|
<u-loadmore margin-top="20" :status="loadStatus" color="#fff"></u-loadmore>
|
|
<view class="box-div"></view>
|
|
</scroll-view>
|
|
</view>
|
|
<Tabbar id="tabbarId"></Tabbar>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {
|
|
ref, onMounted, getCurrentInstance
|
|
} from 'vue';
|
|
import { mallAPI } from '../../api/mall';
|
|
import { getImageUrl } from '../../util/common';
|
|
const instance = getCurrentInstance();
|
|
|
|
const height = ref(0)
|
|
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 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 handleCategory = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/home/mallCategory'
|
|
})
|
|
}
|
|
|
|
const params = ref({
|
|
keyword: '',
|
|
page: 1,
|
|
limit: 10,
|
|
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) => {
|
|
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'
|
|
}
|
|
}).finally(() => {
|
|
isRefresher.value = false
|
|
})
|
|
}
|
|
const isRefresher = ref(false)
|
|
const reflash = () => {
|
|
isRefresher.value = true
|
|
params.value.page = 1
|
|
params.value.category = ''
|
|
params.value.keyword = ''
|
|
loadStatus.value = 'loadmore'
|
|
loadMallData()
|
|
}
|
|
|
|
const handleCheck = (item : any) => {
|
|
uni.navigateTo({
|
|
url: '/pages/home/mallDetail?id=' + item.id
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadHeight()
|
|
loadMallData()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.message-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding: 60rpx 20rpx;
|
|
background: #79AFFF;
|
|
|
|
.header-search {
|
|
.search-btn {
|
|
;
|
|
box-shadow: 0px -4px 4px 0px #00000040 inset;
|
|
|
|
}
|
|
}
|
|
|
|
.menu-list {
|
|
background: #FFFFFF80;
|
|
margin-top: 32rpx;
|
|
padding: 20rpx 0 0 0;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 20%;
|
|
margin-bottom: 20rpx;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 商城列表
|
|
.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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.mall-tag {
|
|
display: flex;
|
|
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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.mall-shop {
|
|
font-size: 22rpx;
|
|
color: $u-tips-color;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.box-div {
|
|
padding: 60rpx 0rpx;
|
|
}
|
|
}
|
|
</style> |