2025-09-18
商城列表
This commit is contained in:
@@ -1,13 +1,291 @@
|
||||
<template>
|
||||
<view>
|
||||
商城
|
||||
<view class="mall-container">
|
||||
<u-navbar title="商城好物" :background="{background: 'transparent' }" :border-bottom="false" back-icon-color="#fff"
|
||||
title-color="#fff">
|
||||
</u-navbar>
|
||||
|
||||
<view class="search">
|
||||
<u-search placeholder="点击查询商品" v-model="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="uWaterfall1">
|
||||
<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.title}}
|
||||
</view>
|
||||
<view class="mall-price u-m-l-5 u-m-r-5">
|
||||
{{item.price}}元
|
||||
</view>
|
||||
<view class="mall-tag u-m-l-5 u-m-r-5">
|
||||
<view class="mall-tag-owner">
|
||||
自营
|
||||
</view>
|
||||
<view class="mall-tag-text">
|
||||
放心购
|
||||
</view>
|
||||
</view>
|
||||
<view class="mall-shop u-m-l-5 u-m-r-5">
|
||||
{{item.shop}}
|
||||
</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="item.image"
|
||||
:index="index"></u-lazy-load>
|
||||
<view class="mall-title u-m-l-5 u-m-r-5">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="mall-price u-m-l-5 u-m-r-5">
|
||||
{{item.price}}元
|
||||
</view>
|
||||
<view class="mall-tag u-m-l-5 u-m-r-5">
|
||||
<view class="mall-tag-owner">
|
||||
自营
|
||||
</view>
|
||||
<view class="mall-tag-text">
|
||||
放心购
|
||||
</view>
|
||||
</view>
|
||||
<view class="mall-shop u-m-l-5 u-m-r-5">
|
||||
{{item.shop}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-waterfall>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 关键词搜索
|
||||
const keyword = ref('')
|
||||
|
||||
// 菜单
|
||||
const menuList = ["全部商品", "精美服饰", "日用百货", "电子数码", "美妆饰品", "食物饮品"]
|
||||
const currentMenu = ref(0)
|
||||
const handleMenuChange = (val : number) => {
|
||||
currentMenu.value = val
|
||||
}
|
||||
|
||||
// 数据
|
||||
const mallList = ref([
|
||||
{
|
||||
price: 35,
|
||||
title: '北国风光，千里冰封，万里雪飘',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 75,
|
||||
title: '望长城内外，惟余莽莽',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 385,
|
||||
title: '大河上下，顿失滔滔',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 784,
|
||||
title: '欲与天公试比高',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 7891,
|
||||
title: '须晴日，看红装素裹，分外妖娆',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 2341,
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
title: '江山如此多娇，引无数英雄竞折腰',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 661,
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
title: '惜秦皇汉武，略输文采',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 1654,
|
||||
title: '唐宗宋祖，稍逊风骚',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 1678,
|
||||
title: '一代天骄，成吉思汗',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 924,
|
||||
title: '只识弯弓射大雕',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
|
||||
},
|
||||
{
|
||||
price: 8243,
|
||||
title: '俱往矣，数风流人物，还看今朝',
|
||||
shop: '李白杜甫白居易旗舰店',
|
||||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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 {
|
||||
border: 1px solid $u-type-primary;
|
||||
color: $u-type-primary;
|
||||
margin-left: 10px;
|
||||
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>
|
||||
BIN
static/mall/1.png
Normal file
BIN
static/mall/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 758 B |
BIN
static/mall/2.png
Normal file
BIN
static/mall/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/mall/3.png
Normal file
BIN
static/mall/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
static/mall/4.png
Normal file
BIN
static/mall/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/mall/5.png
Normal file
BIN
static/mall/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/mall/6.png
Normal file
BIN
static/mall/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user