|
@ -1,75 +1,83 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="page"> |
|
|
<view class="page"> |
|
|
<!-- 导航栏 --> |
|
|
<!-- 导航栏 --> |
|
|
<navbar title="商品列表" |
|
|
|
|
|
leftClick |
|
|
|
|
|
@leftClick="$utils.navigateBack" |
|
|
|
|
|
bgColor="#E3441A" |
|
|
|
|
|
color="#fff" /> |
|
|
|
|
|
|
|
|
<!-- <navbar bgColor="#019245" color="#fff" /> --> |
|
|
|
|
|
|
|
|
<!-- 搜索栏 --> |
|
|
<!-- 搜索栏 --> |
|
|
<view class="search"> |
|
|
<view class="search"> |
|
|
<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" |
|
|
|
|
|
@search="search" |
|
|
|
|
|
@change="search" |
|
|
|
|
|
@custom="search" |
|
|
|
|
|
v-model="queryParams.title"></uv-search> |
|
|
|
|
|
|
|
|
<image src="/static/image/中森明菜.webp" mode="aspectFill" class="search-img"></image> |
|
|
|
|
|
<view style="position: relative;"> |
|
|
|
|
|
<uv-search placeholder="陕西苹果" bgColor="#fff" @search="search" @change="search" @custom="search" |
|
|
|
|
|
v-model="queryParams.title" height="70rpx" :showAction="false" actionText=" "></uv-search> |
|
|
|
|
|
<text class="search-text" @click="search">搜索</text> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 商品列表 --> |
|
|
<!-- 商品列表 --> |
|
|
<view style="position: 20rpx;" |
|
|
|
|
|
v-if="queryParams.title"> |
|
|
|
|
|
|
|
|
<view style="position: 20rpx;" v-if="queryParams.title"> |
|
|
<productList :list="list" /> |
|
|
<productList :list="list" /> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<!-- 分类商品列表 --> |
|
|
<!-- 分类商品列表 --> |
|
|
<view class="category" |
|
|
|
|
|
v-else> |
|
|
|
|
|
|
|
|
|
|
|
<view class="tabs"> |
|
|
|
|
|
<uv-tabs |
|
|
|
|
|
:list="category" |
|
|
|
|
|
:activeStyle="{color : '#f00', fontWeight : 600}" |
|
|
|
|
|
lineColor="#f00" |
|
|
|
|
|
:inactiveStyle="{color: 'rgba(0,0,0,.8)'}" |
|
|
|
|
|
lineHeight="8rpx" |
|
|
|
|
|
lineWidth="50rpx" |
|
|
|
|
|
:current="current" |
|
|
|
|
|
@click="clickTabs"></uv-tabs> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<uv-vtabs |
|
|
|
|
|
:list="category[current].children" |
|
|
|
|
|
:current="currentChildren" |
|
|
|
|
|
keyName="name" |
|
|
|
|
|
:chain="false" |
|
|
|
|
|
@change="change"> |
|
|
|
|
|
<!-- <view class="list"> --> |
|
|
|
|
|
<!-- <template v-for="(item, index) in category[current].children"> |
|
|
|
|
|
<uv-vtabs-item :index="index" :key="index"> |
|
|
|
|
|
<view class="category-item"> |
|
|
|
|
|
<view class="category-title"> |
|
|
|
|
|
{{ item.name }} |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<productItem :item="pro" |
|
|
|
|
|
v-for="(pro, i) in item.shopList" :key="i" |
|
|
|
|
|
@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" /> |
|
|
|
|
|
|
|
|
<view class="category" v-else> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <view class="tabs"> |
|
|
|
|
|
<uv-tabs :list="category" :activeStyle="{color : '#f00', fontWeight : 600}" lineColor="#f00" |
|
|
|
|
|
:inactiveStyle="{color: 'rgba(0,0,0,.8)'}" lineHeight="8rpx" lineWidth="50rpx" :current="current" |
|
|
|
|
|
@click="clickTabs"></uv-tabs> |
|
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 原来的选择框 --> |
|
|
|
|
|
<!-- <uv-vtabs :list="category[current].children" :current="currentChildren" keyName="name" :chain="false" |
|
|
|
|
|
@change="change"> --> |
|
|
|
|
|
<!-- 可有可无 --> |
|
|
|
|
|
<!-- <view class="list"> |
|
|
|
|
|
<template v-for="(item, index) in category[current].children"> |
|
|
|
|
|
<uv-vtabs-item :index="index" :key="index"> |
|
|
|
|
|
<view class="category-item"> |
|
|
|
|
|
<view class="category-title"> |
|
|
|
|
|
{{ item.name }} |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<productItem :item="pro" |
|
|
|
|
|
v-for="(pro, i) in item.shopList" :key="i" |
|
|
|
|
|
@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" /> |
|
|
|
|
|
</view> |
|
|
</uv-vtabs-item> |
|
|
</uv-vtabs-item> |
|
|
</template> --> |
|
|
|
|
|
<!-- </view> --> |
|
|
|
|
|
|
|
|
|
|
|
<uv-vtabs-item> |
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <uv-vtabs-item> |
|
|
<view class="category-item"> |
|
|
<view class="category-item"> |
|
|
<productItem :item="pro" |
|
|
|
|
|
v-for="(pro, i) in categoryList.shopList" :key="i" |
|
|
|
|
|
@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" /> |
|
|
|
|
|
|
|
|
|
|
|
<uv-empty v-if="categoryList.shopList.length == 0" text="还没有呢"/> |
|
|
|
|
|
|
|
|
<productItem :item="pro" v-for="(pro, i) in categoryList.shopList" :key="i" |
|
|
|
|
|
@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" /> |
|
|
|
|
|
|
|
|
|
|
|
<uv-empty v-if="categoryList.shopList.length == 0" text="还没有呢" /> |
|
|
</view> |
|
|
</view> |
|
|
</uv-vtabs-item> |
|
|
</uv-vtabs-item> |
|
|
</uv-vtabs> |
|
|
|
|
|
|
|
|
</uv-vtabs> --> |
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
<uv-vtabs :chain="chain" :list="list" :barItemBadgeStyle="{ right: '20rpx', top: '12rpx' }" |
|
|
|
|
|
barStyle="box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, 0.1);" @change="tabChange" height="1100rpx"> |
|
|
|
|
|
<uv-vtabs-item> |
|
|
|
|
|
<view class="item" v-for="(item2, index2) in list2" :key="index2"> |
|
|
|
|
|
<view class="item-title"> |
|
|
|
|
|
<text class="text">{{ item2.name }}</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="item-content"> |
|
|
|
|
|
<text class="text">{{ item2.desc }}</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</uv-vtabs-item> |
|
|
|
|
|
<!-- try --> |
|
|
|
|
|
<view class="category-item"> |
|
|
|
|
|
<productItem :item="item2" v-for="(item2, i) in list2" :key="i" |
|
|
|
|
|
@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item2.id}`)" /> |
|
|
|
|
|
|
|
|
|
|
|
<uv-empty v-if="list2.length == 0" text="还没有呢" /> |
|
|
|
|
|
</view> |
|
|
|
|
|
</uv-vtabs> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<!-- tabbar --> |
|
|
<!-- tabbar --> |
|
@ -78,6 +86,46 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
const getList = [{ |
|
|
|
|
|
name: 'uv-ui简介', |
|
|
|
|
|
childrens: [{ |
|
|
|
|
|
// name: 'uv-ui简介', |
|
|
|
|
|
desc: '1. uv-ui最初是在uview2.x的基础上进行改进优化,支持vue3等优化,最重要的是支持单独导入直接使用,无需在main.js中进行配置。\n\n2. uv-ui来源于社区,也回归到社区,正是有一群热爱uni-app生态的同学推着它前行,而我们也一如既往的承诺,uv-ui永久开源,永远免费。但是会在下载处进行广告配置,作为开发团队的研发费用的部分来源,所以希望大家理解。' |
|
|
|
|
|
}] |
|
|
|
|
|
}, { |
|
|
|
|
|
name: 'uv-ui特点', |
|
|
|
|
|
childrens: [{ |
|
|
|
|
|
name: '全端兼容', |
|
|
|
|
|
desc: 'uv-ui支持App(vue)、App(nvue)、H5、小程序、VUE2、VUE3,支持nvue原生渲染。uv-ui的组件都是多端自适应的,底层会抹平很多小程序平台的差异或bug。' |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '集成工具', |
|
|
|
|
|
desc: 'uv-ui中的uv-ui-tools组件集成了强大的网络请求 HTTP 及常用的工具函数,无需自己再去寻找,并且直接挂载在uni上面,方便使用,只需要在mian.js中引入即可,更多工具请参考:https://www.uvui.cn/js/http.html。使用方式请参考:https://www.uvui.cn/components/setting.html。' |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '主题扩展', |
|
|
|
|
|
desc: 'uv-ui中的uv-ui-tools组件下面的theme.scss为主题文件,直接在uni.scss中引入主题即可,可以根据自己的需求进行扩展。下面也有说明具体使用方式。使用方法请参考:https://www.uvui.cn/components/setting.html' |
|
|
|
|
|
}] |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '更新日志', |
|
|
|
|
|
badge: { |
|
|
|
|
|
isDot: true |
|
|
|
|
|
}, |
|
|
|
|
|
childrens: [{ |
|
|
|
|
|
name: '更新日志', |
|
|
|
|
|
desc: 'uv-ui的重大更新在更新日志中都有所说明,如果在开发的过程中遇到文档不完善,可以提供给我们,我们会持续完善,非常感谢大家的支持。更新日志:https://www.uvui.cn/components/changelog.html' |
|
|
|
|
|
}] |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '设计规范', |
|
|
|
|
|
childrens: [{ |
|
|
|
|
|
name: '设计规范', |
|
|
|
|
|
desc: '为了约束合成更多优秀的组件和模板,打造优质的体验,我们拟定了一些UI界面设计和建议。同时部分之间会有依赖,这是为了减少代码冗余的同时提高开发效率,模块化是我们的基础。如果大家有好的建议,可以提出进行改进。' |
|
|
|
|
|
}] |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '交流反馈', |
|
|
|
|
|
childrens: [{ |
|
|
|
|
|
name: '交流反馈', |
|
|
|
|
|
desc: 'uv-ui为采用MIT许可证的开源项目,使用完全免费。欢迎加QQ群交流反馈,一起学习,共同进步。QQ群: 549833913' |
|
|
|
|
|
}] |
|
|
|
|
|
}] |
|
|
import productItem from '@/components/product/productItem.vue'; |
|
|
import productItem from '@/components/product/productItem.vue'; |
|
|
import mixinsList from '@/mixins/list.js' |
|
|
import mixinsList from '@/mixins/list.js' |
|
|
import { |
|
|
import { |
|
@ -97,6 +145,9 @@ |
|
|
mixinsListApi: 'getClassShopPageList', |
|
|
mixinsListApi: 'getClassShopPageList', |
|
|
current : 0, |
|
|
current : 0, |
|
|
currentChildren : 0, |
|
|
currentChildren : 0, |
|
|
|
|
|
list: [], |
|
|
|
|
|
chain: false, |
|
|
|
|
|
value: 0 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
@ -104,16 +155,35 @@ |
|
|
categoryList(){ |
|
|
categoryList(){ |
|
|
return this.category[this.current].children[this.currentChildren] |
|
|
return this.category[this.current].children[this.currentChildren] |
|
|
}, |
|
|
}, |
|
|
|
|
|
list2() { |
|
|
|
|
|
const _list = this.list[this.value]?.childrens; |
|
|
|
|
|
return _list ? _list : []; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
onReady(){ |
|
|
|
|
|
// 模拟接口请求数据 |
|
|
|
|
|
uni.showLoading({ |
|
|
|
|
|
title: '加载中' |
|
|
|
|
|
}) |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.list = getList; |
|
|
|
|
|
uni.hideLoading(); |
|
|
|
|
|
}, 200) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
onLoad({ |
|
|
onLoad({ |
|
|
search, |
|
|
search, |
|
|
cid |
|
|
cid |
|
|
}) { |
|
|
}) { |
|
|
|
|
|
console.log('我是cid', cid); |
|
|
|
|
|
console.log('我是category', this.category); |
|
|
if (search) { |
|
|
if (search) { |
|
|
this.queryParams.title = search |
|
|
this.queryParams.title = search |
|
|
} |
|
|
} |
|
|
// this.$store.commit('getCategoryList') |
|
|
// this.$store.commit('getCategoryList') |
|
|
if(this.category.length > 0 && cid){ |
|
|
if(this.category.length > 0 && cid){ |
|
|
|
|
|
|
|
|
this.category.forEach((n, i) => { |
|
|
this.category.forEach((n, i) => { |
|
|
if(n.id == cid){ |
|
|
if(n.id == cid){ |
|
|
this.current = i |
|
|
this.current = i |
|
@ -128,6 +198,11 @@ |
|
|
change(e) { |
|
|
change(e) { |
|
|
// this.queryParams.classId = this.category[e].id |
|
|
// this.queryParams.classId = this.category[e].id |
|
|
this.currentChildren = e |
|
|
this.currentChildren = e |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
tabChange(index){ |
|
|
|
|
|
console.log('选项改变:', index); |
|
|
|
|
|
this.value = index |
|
|
}, |
|
|
}, |
|
|
clickTabs({index}){ |
|
|
clickTabs({index}){ |
|
|
this.current = index |
|
|
this.current = index |
|
@ -147,26 +222,34 @@ |
|
|
<style scoped lang="scss"> |
|
|
<style scoped lang="scss"> |
|
|
.page { |
|
|
.page { |
|
|
/deep/ .uv-vtabs { |
|
|
/deep/ .uv-vtabs { |
|
|
height: calc(100vh - 600rpx) !important; |
|
|
|
|
|
|
|
|
height: calc(100vh - 470rpx) !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/deep/ .uv-vtabs__bar { |
|
|
|
|
|
height: calc(100vh - 600rpx) !important; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// /deep/ .uv-vtabs__bar { |
|
|
|
|
|
// height: calc(100vh - 600rpx) !important; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
/deep/ .uv-vtabs__content { |
|
|
/deep/ .uv-vtabs__content { |
|
|
height: calc(100vh - 600rpx) !important; |
|
|
|
|
|
|
|
|
height: calc(100vh - 500rpx) !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.search { |
|
|
.search { |
|
|
position: relative; |
|
|
|
|
|
background: #FFFFFF; |
|
|
|
|
|
margin: 20rpx; |
|
|
|
|
|
border-radius: 41rpx; |
|
|
|
|
|
padding: 10rpx 20rpx; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
background: $uni-color; |
|
|
|
|
|
height: 280rpx; |
|
|
|
|
|
padding-left: 20rpx; |
|
|
|
|
|
.search-img{ |
|
|
|
|
|
width: 120rpx; |
|
|
|
|
|
height: 120rpx; |
|
|
|
|
|
margin: 40rpx 0 0 10rpx; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
} |
|
|
|
|
|
.search-text{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 80rpx; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
|
color: $uni-color; |
|
|
|
|
|
} |
|
|
/deep/ .uv-search__action { |
|
|
/deep/ .uv-search__action { |
|
|
background-color: $uni-color; |
|
|
background-color: $uni-color; |
|
|
color: #FFFFFF; |
|
|
color: #FFFFFF; |
|
@ -181,7 +264,38 @@ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header { |
|
|
|
|
|
padding: 30rpx; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
} |
|
|
|
|
|
.item { |
|
|
|
|
|
padding: 10rpx 20rpx; |
|
|
|
|
|
&-title { |
|
|
|
|
|
.text { |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-size: 32rpx; |
|
|
|
|
|
color: #111; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
&-content { |
|
|
|
|
|
padding: 20rpx 0; |
|
|
|
|
|
.text { |
|
|
|
|
|
line-height: 48rpx; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
color: #111; |
|
|
|
|
|
/* #ifndef APP-NVUE */ |
|
|
|
|
|
word-break: break-all; |
|
|
|
|
|
/* #endif */ |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.gap { |
|
|
|
|
|
padding: 0 30rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.category { |
|
|
.category { |
|
|
|
|
|
/* background-color: green; */ |
|
|
font-size: 30rpx; |
|
|
font-size: 30rpx; |
|
|
color: #333; |
|
|
color: #333; |
|
|
.category-title{ |
|
|
.category-title{ |
|
@ -219,6 +333,41 @@ |
|
|
padding: 0rpx 20rpx; |
|
|
padding: 0rpx 20rpx; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header { |
|
|
|
|
|
padding: 30rpx; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
|
padding: 10rpx 20rpx; |
|
|
|
|
|
|
|
|
|
|
|
&-title { |
|
|
|
|
|
.text { |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-size: 32rpx; |
|
|
|
|
|
color: #111; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&-content { |
|
|
|
|
|
padding: 20rpx 0; |
|
|
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
|
line-height: 48rpx; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
color: #111; |
|
|
|
|
|
/* #ifndef APP-NVUE */ |
|
|
|
|
|
word-break: break-all; |
|
|
|
|
|
/* #endif */ |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.gap { |
|
|
|
|
|
padding: 0 30rpx; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |