336 lines
8.0 KiB
Vue
336 lines
8.0 KiB
Vue
<template>
|
|
<view class="mall-container">
|
|
<u-navbar :is-fixed="false" title="商城好物" :background="{background: 'transparent' }" :border-bottom="false"
|
|
back-icon-color="#fff" title-color="#fff">
|
|
<template v-slot:right>
|
|
<image src="/static/icon/zhu.png" style="width: 50rpx;height: 50rpx;margin-right: 24rpx;" mode=""></image>
|
|
</template>
|
|
</u-navbar>
|
|
|
|
<view class="search">
|
|
<u-search @search="reloadMallData" placeholder="点击查询商品" v-model="params.keyword" :show-action="false"
|
|
bg-color="#FEEFCE" </u-search>
|
|
</view>
|
|
|
|
<view class="menu-list">
|
|
<view class="menu-item" v-for="(item, index) in menuList" @click="handleMenuChange(index)">
|
|
<view class="img-box">
|
|
<image class="img" :src="'/static/mall/'+(index+1)+'.png'" mode=""></image>
|
|
</view>
|
|
<view class="menu-text" :class="currentMenu==index?'menu-text-actice':''">
|
|
<view class="text" :class="currentMenu==index?'text-actice':''">
|
|
{{item}}
|
|
</view>
|
|
</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">
|
|
<u-lazy-load threshold="-450" border-radius="10" :image="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">
|
|
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image_url)"
|
|
: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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { onReachBottom } from '@dcloudio/uni-app'
|
|
import { mallAPI } from '../../api/mall';
|
|
import { getImageUrl } from '../../util/common';
|
|
|
|
const params = ref({
|
|
keyword: '',
|
|
page: 1,
|
|
size: 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) => {
|
|
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 clearData = () => {
|
|
params.value = {
|
|
keyword: params.value.keyword,
|
|
page: 1,
|
|
size: 5,
|
|
category: ''
|
|
}
|
|
menuCategoryMap(currentMenu.value)
|
|
maxPage.value = 1
|
|
mallList.value = []
|
|
mallListRef.value.clear()
|
|
loadStatus.value = 'loadmore'
|
|
}
|
|
|
|
// 重新加载
|
|
const reloadMallData = () => {
|
|
clearData()
|
|
loadMallData()
|
|
}
|
|
|
|
// 菜单映射
|
|
const menuCategoryMap = (val) => {
|
|
switch (val) {
|
|
case 0:
|
|
params.value.category = ''
|
|
break
|
|
case 1:
|
|
params.value.category = '服装配饰'
|
|
break
|
|
case 2:
|
|
params.value.category = '日用百货'
|
|
break
|
|
case 3:
|
|
params.value.category = '数码产品'
|
|
break
|
|
case 4:
|
|
params.value.category = '美妆饰品'
|
|
break
|
|
case 5:
|
|
params.value.category = '食品饮料'
|
|
break
|
|
}
|
|
}
|
|
|
|
// 菜单
|
|
const menuList = ["全部商品", "精美服饰", "日用百货", "电子数码", "美妆饰品", "食物饮品"]
|
|
const currentMenu = ref(0)
|
|
const handleMenuChange = (val : number) => {
|
|
currentMenu.value = val
|
|
menuCategoryMap(val)
|
|
reloadMallData()
|
|
}
|
|
|
|
// 上拉刷新
|
|
onReachBottom(() => {
|
|
loadMallData()
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadMallData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.mall-container {
|
|
width: 100%;
|
|
background: linear-gradient(180deg, #FFAE00 0%, #FFF0D0 40.87%, #FFFFFF 58.17%);
|
|
height: 100vh;
|
|
|
|
.search {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
// 菜单
|
|
.menu-list {
|
|
display: flex;
|
|
margin: 0 30rpx;
|
|
overflow: hidden;
|
|
overflow-x: scroll;
|
|
|
|
.menu-item {
|
|
white-space: nowrap;
|
|
margin-right: 30rpx;
|
|
// border: 1px solid #FFAE00;
|
|
|
|
.img-box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.img {
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
}
|
|
}
|
|
|
|
.menu-text {
|
|
font-family: Work Sans;
|
|
font-weight: 700;
|
|
font-style: Bold;
|
|
font-size: 26rpx;
|
|
leading-trim: NONE;
|
|
line-height: 100%;
|
|
letter-spacing: -2%;
|
|
text-align: center;
|
|
color: #F7F7EF;
|
|
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.menu-text-actice {
|
|
margin-top: 5rpx;
|
|
padding: 4rpx 10rpx 0;
|
|
color: #FA941F;
|
|
background-color: #fee9bb;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.text-actice {
|
|
padding: 2rpx 0rpx;
|
|
border-bottom: 4rpx solid #FA941F;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// 商城列表
|
|
.mall-list {
|
|
margin-top: 20rpx;
|
|
padding: 0 32rpx 20rpx;
|
|
|
|
.mall-item {
|
|
border-radius: 16rpx;
|
|
background-color: #ffffff;
|
|
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;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |