huyuanxiang
/
nherp-shop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
nherp-shop/pages/views/home/classList.vue

901 lines
22 KiB
Raw Permalink Normal View History Unescape

[init]能辉材料小程序商城
2 years ago
<template>
<view class="classList">
<view class="top_nav">
<!-- #ifndef H5 -->
<view class="status_bar" :style="'height: '+ statusBarHeight"></view>
<!-- #endif -->
<!-- 搜索框 -->
<view class="search_box">
<view class="backTo" @click="backTo">
<text class="iconfont icon-fanhui"></text>
</view>
<view class="search">
<view class="input-box" >
<input placeholder="搜索关键词" placeholder-style="color:#c0c0c0;font-size:24upx;"></input>
<view class="icon search">
<image src="/static/images/home/search.png"></image>
</view>
</view>
</view>
<view class="bg"></view>
</view>
<!-- 条件筛选框 -->
<view class="screen">
<view class="screen_list" @tap="openScreen" :style="'color:' + (current == 0 ? colors:'')" data-index="0">
{{screenName}}
<text class="iconfont icon-xiasanjiao down" :style="'color:' + (current == 0 ? colors:'')"></text>
</view>
<view class="screen_list" @tap="setCurrent" :style="'color:' + (current == 1 ? colors:'')" data-index="1">
销量
</view>
<view class="screen_list" @tap="setList">
<text class="iconfont icon-gongge" :style="'font-size:30upx;font-weight:bold;color:' + (current == 2 ? colors:'#333')" v-if="modes == true"></text>
<text class="iconfont icon-liebiao" :style="'font-size:30upx;font-weight:bold;color:' + (current == 2 ? colors:'#333')" v-if="modes == false"></text>
</view>
<view class="screen_list" @tap="openPop" :style="'color:' + (current == 3 ? colors:'')" data-index="3">
筛选
</view>
<!-- 弹出筛选框 -->
<view class="more_screen" :style="'opacity:' + (isMaskShow == true?'1':'0') + ';display:' + (isMaskShow == true?'block':'none')">
<view v-for="(item, index) in screenList" :key="index" class="more_list" @tap="setScreen(item,index)">
<text :style="'font-weight:' + (onscreen == index ? 'bold':'500')">{{item.name}}</text>
<text v-if="onscreen == index" class="iconfont icon-duihao" :style="'color:' + colors + ';'"></text>
</view>
</view>
</view>
<!-- 弹出遮罩层 -->
<view class="mask" @tap="closeScreen" catchtouchmove="true" v-if="isMaskShow == true" :style="'top:'+statusBarHeight+';'"></view>
<view class="mask" @tap="hideright" catchtouchmove="true" v-if="popShow == true"></view>
<!-- 点击筛选弹出的右侧弹出窗口 -->
<view :class="popShow == true ? 'right_popup':'hide_popup'" catchtouchmove="true">
<scroll-view class="pop_scroll">
<view class="top_price">
<text>价 格 区 间</text>
<text :style="'color:' + colors">请输入价格区间</text>
</view>
<view class="input_box">
<input placeholder="最低价"></input>
<text>-</text>
<input placeholder="最高价"></input>
</view>
<view v-for="(item, index) in classList" :key="index" class="allClass">
<view class="classtext">{{item.name}}</view>
<view class="class_box">
<!-- 选中分类条件 -->
<view v-for="(row, indexs) in item.child" :key="indexs" class="class_tag" :style="'color:' + (row.current == true ? '#fff':'#333') + ';background:' + (row.current == true ? colors:'') + ';border-color:' + (row.current == true ? colors:'') + ';'" @tap="setClass(item,row,index,indexs)">{{row.name}}</view>
</view>
</view>
</scroll-view>
<view class="bottom_btn">
<view class="reset" :style="'color:' + colors + ';border-color:' + colors" @tap="onreset">重置</view>
<view class="enter" :style="'background:' + colors" @tap="onenter">确定</view>
</view>
</view>
<!-- 二级条件选择 -->
<scroll-view scroll-x="true" class="tow_scroll" :scroll-with-animation="true" :scroll-left="scrollLeft">
<view class="scroll_tags" :style="{color:tagCurrent==index?'#ffffff':'#202020',background:tagCurrent==index?colors:'#F5F5F5'}" v-for="(item,index) in tagsList" :key="index" @click="setTags(item,index)">
{{item}}
</view>
</scroll-view>
</view>
<view class="space">
<!-- 占位 -->
</view>
<!-- 商品列表 -->
<view>
<recommend :colors="colors" :dataList="dataList" :modes="modes" :loading="loading"></recommend>
</view>
<loading v-if="isShow == true"></loading>
</view>
</template>
<script>
var app = getApp();
import search from "../../commponent/public/search";
import recommend from "../../commponent/home/recommend";
import loading from "../../commponent/public/loading";
export default {
data() {
return {
statusBarHeight: app.globalData.statusHeight + 'px',
toBarHeight: app.globalData.toBar + 'px',
colors: '',
classId: '',
isShow: true,
current: 0,
isMaskShow: false,
modes: true,
onscreen: 0,
scrollLeft: 0,
tagCurrent: 999,
loading: false,
screenList: [{
name: '综合',
id: 0
}, {
name: '价格升序',
id: 1
}, {
name: '价格降序',
id: 2
}],
screenName: '综合',
popShow: false,
classList: [{
name: '全部分类',
id: 1,
child: [{
name: '资源类',
id: 2
}, {
name: '工具类',
id: 3
}]
}, {
name: '品牌',
id: 2,
child: [{
name: '苹果',
id: 1
}, {
name: '华为',
id: 2
}, {
name: '小米',
id: 2
}]
}],
newdata: "",
tagsList:[
'奥利给','三只松鼠','良品铺子','达利园','稻香村','百草味','盼盼','徐福记','雀巢','蒙牛','巴莉甜甜'
],
// 商品列表
dataList: [{
title: 'DUNKINDONUTS唐恩都乐美国甜甜圈6个礼盒装 随机搭配6款',
type: 1,
goods_id: 201,
money: '35.90',
number: 1,
hmoney: '45.90',
img: '/static/images/goods/one.jpg',
youhui: true,
baoyou: false,
status: 1, //商品过期状态 0正常 1已失效
stock: 600,
sku: [{
sku_id: 1,
skuname: '口味',
child: [{
tagname: '醇黑巧克力【20枚】',
id: 2011,
imgs: 'http://img10.360buyimg.com/n1/jfs/t1/86401/35/12206/357766/5e43b59cE5a7aa4dd/0753be765166c195.jpg',
money: '175.78'
},
{
tagname: '草莓味【8枚】',
id: 2012,
imgs: 'http://img11.360buyimg.com/n1/jfs/t1/74434/3/6892/331750/5d512febE54e891c4/0096ad20c3c20d23.jpg',
money: '35.90'
}
]
}],
skuArr: [{
goods_sku_arr: ['2011'],
goods_sku_text: '醇黑巧克力【20枚】',
img: 'http://img10.360buyimg.com/n1/jfs/t1/86401/35/12206/357766/5e43b59cE5a7aa4dd/0753be765166c195.jpg',
money: '175.78',
stock: 345
},
{
goods_sku_arr: ['2012'],
goods_sku_text: '草莓味【8枚】',
img: 'http://img11.360buyimg.com/n1/jfs/t1/74434/3/6892/331750/5d512febE54e891c4/0096ad20c3c20d23.jpg',
money: '35.90',
stock: 255
},
]
},
{
title: '真巧 巧克力涂层甜甜圈 早餐蛋糕手撕面包休闲小零食办公室小吃零嘴下午茶点心 500g甜甜圈（拉花款）',
type: 2,
goods_id: 202,
money: '29.9',
number: 75,
hmoney: '39.90',
img: '/static/images/goods/two.jpg',
youhui: false,
baoyou: true,
status: 0, //商品过期状态 0正常 1已失效
stock: 100,
sku: [{
sku_id: 1,
skuname: '口味',
child: [{
tagname: '500g甜甜圈（彩针款）',
id: 2021,
imgs: 'http://img14.360buyimg.com/n1/jfs/t1/72185/1/7121/222065/5d5377d5E46e681fa/6f100c77965b9165.jpg',
money: '39.90'
},
{
tagname: '500g甜甜圈（拉花款）',
id: 2022,
imgs: 'http://img14.360buyimg.com/n1/jfs/t1/72191/2/6973/239664/5d5377d5Ef952d7d9/606e70d2b6dd44d2.jpg',
money: '39.90'
}
]
}],
skuArr: [{
goods_sku_arr: ['2021'],
goods_sku_text: '500g甜甜圈（彩针款）',
img: 'http://img14.360buyimg.com/n1/jfs/t1/72185/1/7121/222065/5d5377d5E46e681fa/6f100c77965b9165.jpg',
money: '39.90',
stock: 50
},
{
goods_sku_arr: ['2022'],
goods_sku_text: '500g甜甜圈（拉花款）',
img: 'http://img14.360buyimg.com/n1/jfs/t1/72191/2/6973/239664/5d5377d5Ef952d7d9/606e70d2b6dd44d2.jpg',
money: '39.90',
stock: 50
},
]
},
{
title: '钟薛高 钟意你系列 特牛乳*4片 丝绒可可*4片 半巧主义*2 冰淇淋生鲜雪糕 10片装',
type: 3,
goods_id: 203,
money: '152.00 ',
number: 1,
hmoney: '162.00',
img: '/static/images/goods/there.jpg',
youhui: true,
baoyou: true,
status: 0, //商品过期状态 0正常 1已失效
stock: 200,
sku: [],
skuArr: []
},
{
title: '农谣人 原味火山石烤肠1000g/约16根台式原味肠地道肠纯肉肠热狗肠台湾烤肠香肠烧烤肠半熟食火腿肠 台式原味地道肠1kg',
type: 6,
goods_id: 204,
money: '52.00 ',
number: 1,
hmoney: '99.00 ',
youhui: false,
baoyou: false,
stock: 100,
img: '/static/images/goods/six.jpg',
status: 0, //商品过期状态 0正常 1已失效
sku: [{
skuname: '口味',
sku_id: 1,
child: [{
tagname: '台式原味地道肠1kg',
id: 2041,
imgs: 'http://img10.360buyimg.com/n1/jfs/t1/118993/11/329/175715/5e8ac0afE94234346/3ceb1344cf34d655.jpg',
money: '52.00 '
},
{
tagname: '台式黑椒味地道肠1kg',
id: 2042,
imgs: 'http://img11.360buyimg.com/n1/jfs/t1/114876/9/17594/220403/5f5ae35bEc7bb735b/bcf0c1017e86894c.png',
money: '53.50'
}
]
}, ],
skuArr: [{
goods_sku_arr: ['2041'],
goods_sku_text: '台式原味地道肠1kg',
img: 'http://img10.360buyimg.com/n1/jfs/t1/118993/11/329/175715/5e8ac0afE94234346/3ceb1344cf34d655.jpg',
money: '52.00',
stock: 50
},
{
goods_sku_arr: ['2042'],
goods_sku_text: '台式黑椒味地道肠1kg',
img: 'http://img11.360buyimg.com/n1/jfs/t1/114876/9/17594/220403/5f5ae35bEc7bb735b/bcf0c1017e86894c.png',
money: '53.50',
stock: 50
},
]
},
{
title: '巧妈妈 鸡蛋布甸 下午茶休闲零食儿童果冻布丁125g双层果酱味smzdm 4杯鸡蛋布甸（双层）',
type: 4,
goods_id: 205,
money: '25.80',
number: 1,
hmoney: 35.00,
img: '/static/images/goods/four.jpg',
youhui: true,
baoyou: false,
stock: 500,
status: 0, //商品过期状态 0正常 1已失效
skuArr: [{
goods_sku_arr: ['10', '40'],
goods_sku_text: '鸡蛋布旬 4杯装',
img: '/static/images/goods/four.jpg',
money: '25.80',
stock: 50
},
{
goods_sku_arr: ['10', '50'],
goods_sku_text: '鸡蛋布旬 6杯装',
img: '/static/images/goods/four.jpg',
money: '32.80',
stock: 10
},
{
goods_sku_arr: ['10', '60'],
goods_sku_text: '鸡蛋布旬 8杯装',
img: '/static/images/goods/four.jpg',
money: '52.80',
stock: 60
},
{
goods_sku_arr: ['20', '60'],
goods_sku_text: '乳酸菌布甸（草莓酱 8杯装）',
img: 'http://img11.360buyimg.com/n1/jfs/t1/97403/35/15115/138620/5e6eeae8E8dbb7c3b/90a57a2a3e696b80.jpg',
money: '52.80',
stock: 100
},
{
goods_sku_arr: ['30', '50'],
goods_sku_text: '乳酸菌布甸（蓝莓酱 8杯装）',
img: 'http://img12.360buyimg.com/n1/jfs/t1/127005/26/7147/367042/5f0eb18cE9efa12ea/1a8363f7ce5a06cb.jpg',
money: '32.80',
stock: 1300
},
],
sku: [{
sku_id: 1,
skuname: '口味',
child: [{
tagname: '鸡蛋布旬',
id: 10,
imgs: '/static/images/goods/four.jpg',
money: '25.80'
},
{
tagname: '乳酸菌布甸（草莓酱）',
id: 20,
imgs: 'http://img11.360buyimg.com/n1/jfs/t1/97403/35/15115/138620/5e6eeae8E8dbb7c3b/90a57a2a3e696b80.jpg',
money: '14.80'
},
{
tagname: '乳酸菌布甸（蓝莓酱）',
id: 30,
imgs: 'http://img12.360buyimg.com/n1/jfs/t1/127005/26/7147/367042/5f0eb18cE9efa12ea/1a8363f7ce5a06cb.jpg',
money: '30.80'
}
]
},
{
sku_id: 2,
skuname: '数量',
child: [{
tagname: '4杯装',
id: 40,
imgs: '',
money: '25.80'
},
{
tagname: '6杯装',
id: 50,
imgs: '',
money: '32.80'
},
{
tagname: '8杯装',
id: 60,
imgs: '',
money: '52.80'
}
]
},
]
},
{
title: '草莓云南夏季草莓新鲜水果3斤礼盒装 露天种植现摘现发 3斤精品装（4盒顺丰空运）',
type: 5,
goods_id: 206,
money: '59.90',
number: 200,
hmoney: '70.90',
youhui: true,
baoyou: true,
img: '/static/images/goods/five.jpg',
status: 0, //商品过期状态 0正常 1已失效
stock: 140,
sku: [{
sku_id: 1,
skuname: '种类',
child: [{
tagname: '3斤精品装',
id: 2061,
imgs: 'http://img10.360buyimg.com/n1/jfs/t1/71401/15/15968/470755/5ddb8ecaEe6a5ce65/140942226e7c7551.jpg',
money: '59.90'
},
{
tagname: '5斤精品装',
id: 2062,
imgs: 'http://img10.360buyimg.com/n1/jfs/t1/82339/35/16255/632261/5ddb8ecdE628ab494/cacc1d2241e9f65f.jpg',
money: '82.90'
},
]
}, ],
skuArr: [{
goods_sku_arr: ['2061'],
goods_sku_text: '3斤精品装',
img: 'http://img10.360buyimg.com/n1/jfs/t1/71401/15/15968/470755/5ddb8ecaEe6a5ce65/140942226e7c7551.jpg',
money: '59.90',
stock: 80
},
{
goods_sku_arr: ['2062'],
goods_sku_text: '5斤精品装',
img: 'http://img10.360buyimg.com/n1/jfs/t1/82339/35/16255/632261/5ddb8ecdE628ab494/cacc1d2241e9f65f.jpg',
money: '82.90',
stock: 60
}
],
}
],
};
},
components: {
search,
recommend,
loading
},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let classId = options.classId;
this.setData({
colors: app.globalData.newColor,
classId: classId
});
setTimeout(() => {
this.setData({
isShow: false
});
}, 600);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
setCurrent(e) {
console.log(e);
let index = e.currentTarget.dataset.index;
this.setData({
current: index
});
},
openScreen(e) {
let index = e.currentTarget.dataset.index;
console.log(e)
this.setData({
current: index,
isMaskShow: !this.isMaskShow
});
},
closeScreen() {
this.setData({
isMaskShow: false
});
},
setList() {
this.setData({
modes: !this.modes
});
},
setScreen(item,index) {
this.setData({
onscreen: index,
screenName: item.name,
isMaskShow: false
});
},
openPop() {
this.setData({
popShow: true
});
},
hideright() {
this.setData({
popShow: false
});
},
setClass(item,row,index,indexs) { //选择条件
row.current = row.current == true ? false : true
item.child[indexs] = row;
let data = item;
let newdata = 'classList[' + index + ']';
this.setData({
[newdata]: data
});
},
onreset() { //重置筛选条件
let data = this.classList;
data.forEach(e => {
e.child.forEach(ele => {
ele.current = false;
});
});
this.setData({
classList: data,
popShow: false
});
},
onenter() { //确认筛选条件
this.setData({
popShow: false
});
let select = []
this.classList.forEach(e=>{
e.child.forEach(ele => {
if(ele.current == true){
select.push(ele)
}
});
})
console.log('选中的项', select)
},
backTo(){
uni.navigateBack(-1)
},
setTags(item, index){ //选择tag二级分类
this.tagCurrent = index
this.isShow = true
let scrollLeft = index * 38;
if (index <= 2) {
scrollLeft = 0;
}
this.scrollLeft = scrollLeft
setTimeout(()=>{
this.isShow = false
},500)
}
}
};
</script>
<style scoped lang="scss">
.classList{
width: 100%;
height: 100%;
}
.top_nav{
min-height: 240upx;
width: 100%;
background-color: #FFFFFF;
border-bottom: 1upx solid rgba($color: #eee, $alpha: 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 200;
}
.space{
width: 100%;
height: 240upx;
background-color: #F8F8F8;
/* #ifdef APP-PLUS */
height: 280upx;
/* #endif */
}
.status_bar{
width: 100vw;
overflow: hidden;
display: block;
background-color: #FFFFFF;
z-index: 900;
}
.scroll_box{
height: calc(100vh - 260upx);
}
.search_box{
padding: 0 20upx;
z-index:900;
height: 80upx;
width: 100%;
padding-top: 30upx;
position: relative;
display: flex;
align-items: center;
.backTo{
color: #202020;
z-index: 20;
margin-right: 30upx;
width: 8%;
text-align: center;
text{
font-size: 34upx;
}
}
.search{
/* #ifndef MP */
width: 90%;
/* #endif */
/* #ifdef MP */
width: 60%;
/* #endif */
z-index: 900;
.input-box {
width: 100%;
height: 60upx;
background-color: #f5f5f5;
position: relative;
display: flex;
align-items: center;
border-radius: 30upx;
z-index: 900;
}
.input-box .icon {
display: flex;
align-items: center;
position: absolute;
top: 10upx;
right: 20upx;
width: 40upx;
height: 40upx;
font-size: 32upx;
color: #c0c0c0;
}
.search image{
width: 40upx;
height: 40upx;
display: block;
}
.input-box input {
padding-left: 28upx;
height: 28upx;
font-size: 28upx;
}
}
}
.search_box .bg{
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
}
.screen{
height: 80upx;
line-height: 80upx;
display: flex;
align-items: center;
padding: 0 10upx;
z-index: 900;
position: relative;
background-color: #fff;
}
.screen .screen_list {
flex: 1;
text-align: center;
font-size: 28upx;
color: #333;
font-weight: 500;
.down{
margin-left: 10upx;
}
}
.screen_list text{
font-size: 24upx;
font-weight: normal;
}
.more_screen{
width: 100%;
padding: 0 60upx;
border-bottom-left-radius: 20upx;
border-bottom-right-radius: 20upx;
position: absolute;
background-color: #fff;
top: 80upx;
left: 0;
padding-bottom: 20upx;
opacity: 0;
transition: all 0.3s;
}
.more_list{
height: 80upx;
line-height: 80upx;
}
.more_list .iconfont{
float: right;
}
.mask{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 800;
}
/* 右侧弹出框 */
.right_popup{
width: 85%;
height: 100%;
position: fixed;
right: 0;
top: 0;
background-color: #fff;
z-index: 920;
transition: all 0.3s;
}
.hide_popup{
transition: all 0.3s;
width: 85%;
height: 100%;
position: fixed;
right: -100%;
top: 0;
z-index: 920;
transition: all 0.3s;
background-color: #fff;
}
.pop_scroll{
/* #ifndef H5 */
height: calc(90% - 120upx);
margin-top: 120upx;
/* #endif */
/* #ifdef H5 */
height: 90%;
margin-top: 20upx;
/* #endif */
}
.top_price{
height: 80upx;
line-height: 80upx;
display: flex;
padding: 0 20upx;
}
.top_price text{
flex: 1;
text-align: center;
font-size: 28upx;
font-weight: bold;
color: #333;
}
.input_box{
padding: 0 30upx;
height: 60upx;
line-height: 60upx;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30upx;
}
.input_box text{
color: #999;
}
.input_box input{
flex: 1;
max-width: 45%;
height: 100%;
background-color: #F7F7F7;
border-radius: 40upx;
box-sizing: border-box;
text-align: center;
font-size: 24upx;
}
.allClass{
margin-top: 50upx;
padding: 0 30upx;
}
.allClass .classtext{
font-size: 28upx;
font-weight: bold;
color: #333;
}
.allClass .class_box{
margin-top: 30upx;
overflow: hidden;
}
.class_box .class_tag{
height: 60upx;
line-height: 60upx;
padding: 0 20upx;
font-size: 26upx;
color: #333;
border: 1upx solid #999;
text-align: center;
border-radius: 30upx;
float: left;
margin-right: 20upx;
}
.bottom_btn{
height: 10%;
display: flex;
align-items: center;
align-items: center;
justify-content: space-between;
padding: 0 30upx;
}
.bottom_btn view{
max-width: 45%;
min-width: 45%;
height: 60upx;
line-height: 60upx;
background-color: #FA436A;
text-align: center;
border-radius: 35upx;
color: #fff;
}
.bottom_btn .reset{
background-color: #fff;
color: #FA436A;
border: 1upx solid #FA436A;
}
.tow_scroll{
height: 80upx;
line-height: 80upx;
padding: 0 10upx;
white-space: nowrap;
.scroll_tags{
display: inline-block;
background-color: #FFF8F5;
color: #202020;
height: 50upx;
line-height: 50upx;
padding: 0 25upx;
text-align: center;
font-size: 24upx;
border-radius: 30upx;
margin: 0 10upx;
}
}
</style>