|
|
@@ -0,0 +1,403 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- 线上订货 -->
|
|
|
+ <u-navbar :background="background" back-icon-color="#ffffff" is-fixed>
|
|
|
+ <u-search placeholder="请输入轮胎规格" :show-action="false" v-model="keyword"></u-search>
|
|
|
+ <u-icon @click="handleGo('msg')" name="chat-fill" label="消息" size="36" label-pos="bottom" :margin-right="16"
|
|
|
+ label-color="#ffffff" :custom-style="iconCustomStyle"></u-icon>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="content">
|
|
|
+ <u-sticky >
|
|
|
+ <view class="filter-wrap wrap-flex">
|
|
|
+ <u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="handleGo('mallMenu1')">全部</u-button>
|
|
|
+ <u-dropdown>
|
|
|
+ <u-dropdown-item v-model="brandValue" title="品牌" :options="brandOptions"></u-dropdown-item>
|
|
|
+ <u-dropdown-item v-model="patternValue" title="花纹" :options="patternOptions"></u-dropdown-item>
|
|
|
+ </u-dropdown>
|
|
|
+ <u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="showFilterPopup=true">筛选
|
|
|
+ <u-icon name="grid"></u-icon>
|
|
|
+ </u-button>
|
|
|
+ </view>
|
|
|
+ </u-sticky>
|
|
|
+ <u-waterfall v-model="flowList" ref="uWaterfall">
|
|
|
+ <template v-slot:left="{leftList}">
|
|
|
+ <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
|
|
|
+ <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
|
|
|
+ <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
|
|
+ <view class="demo-title">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <!-- <view class="demo-price">
|
|
|
+ {{item.price}}元
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="demo-tag">
|
|
|
+ <view class="demo-tag-owner">
|
|
|
+ 自营
|
|
|
+ </view>
|
|
|
+ <view class="demo-tag-text">
|
|
|
+ 放心购
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="demo-shop">
|
|
|
+ 库存：{{item.count}}
|
|
|
+ </view>
|
|
|
+ <view class="shopping-car"><u-icon :custom-style="iconCustomStyleCar" color="#ffffff" name="car"></u-icon></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-slot:right="{rightList}">
|
|
|
+ <view class="demo-warter" 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="demo-title">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <!-- <view class="demo-price">
|
|
|
+ {{item.price}}元
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="demo-tag">
|
|
|
+ <view class="demo-tag-owner">
|
|
|
+ 自营
|
|
|
+ </view>
|
|
|
+ <view class="demo-tag-text">
|
|
|
+ 放心购
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="demo-shop">
|
|
|
+ 库存：{{item.count}}
|
|
|
+ </view>
|
|
|
+ <view class="shopping-car"><u-icon :custom-style="iconCustomStyleCar" name="car" color="#ffffff"></u-icon></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </u-waterfall>
|
|
|
+ <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
|
|
|
+ </view>
|
|
|
+ <view id="shopping-car"><u-icon :custom-style="iconCustomStyleCarFixed" size="48" name="car" color="#9999999"></u-icon><u-badge :offset="[-8,-8]" :count="goodsCounts" type="error"></u-badge></view>
|
|
|
+ <u-popup v-model="showFilterPopup" mode="right" width="60%">
|
|
|
+ <view class="filter-title">筛选</view>
|
|
|
+ <block v-for="(item,index) in tabbar" :key="index">
|
|
|
+ <scroll-view scroll-y class="right-box">
|
|
|
+ <view class="page-view">
|
|
|
+ <view class="class-item">
|
|
|
+ <view class="item-title">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-container">
|
|
|
+ <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
|
|
|
+ <view class="item-menu-name">{{item1.value}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </block>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import classifyData from "@/common/classify.data.js";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ background: {
|
|
|
+ backgroundColor: "#0291FD",
|
|
|
+ color: "#ffffff"
|
|
|
+
|
|
|
+ },
|
|
|
+ iconCustomStyle: {
|
|
|
+ padding: "24rpx 14rpx 14rpx 14rpx"
|
|
|
+ },
|
|
|
+ iconCustomStyleCar: {
|
|
|
+ background: "#0291FD",
|
|
|
+ padding: "16rpx",
|
|
|
+ borderRadius: "50%"
|
|
|
+ },
|
|
|
+ iconCustomStyleCarFixed: {
|
|
|
+ background: "#ffffff",
|
|
|
+ padding: "16rpx",
|
|
|
+ borderRadius: "50%",
|
|
|
+ boxShadow: "0px 1px 12px 0px rgba(116, 116, 116, 0.6)"
|
|
|
+ },
|
|
|
+ buttonCustomStyle: {
|
|
|
+ border: "none"
|
|
|
+ },
|
|
|
+ keyword: "",
|
|
|
+ allValue: "",
|
|
|
+ brandValue: "",
|
|
|
+ brandOptions: [{
|
|
|
+ label: "赛轮",
|
|
|
+ value: "SAILUN"
|
|
|
+ }, {
|
|
|
+ label: "金宇",
|
|
|
+ value: "jinyu"
|
|
|
+ }],
|
|
|
+ patternValue: "",
|
|
|
+ patternOptions: [{
|
|
|
+ label: "SH08",
|
|
|
+ value: "SH08"
|
|
|
+ }, {
|
|
|
+ label: "RH07",
|
|
|
+ value: "RH07"
|
|
|
+ }],
|
|
|
+ showFilterPopup: false,
|
|
|
+ tabbar: [{
|
|
|
+ "name": "品牌",
|
|
|
+ "foods": [{
|
|
|
+ "value": "赛轮",
|
|
|
+ "label": "SAILUN",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "金宇",
|
|
|
+ "label": "jinyu",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ loadStatus: 'loadmore',
|
|
|
+ goodsCounts: 99,//购物车商品数
|
|
|
+ flowList: [],
|
|
|
+ list: [{
|
|
|
+ price: 35,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 75,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 385,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 784,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 7891,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 2341,
|
|
|
+ count: '100',
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 661,
|
|
|
+ count: '100',
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 1654,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 1678,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 924,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: 8243,
|
|
|
+ title: '175/70R14 88T XL SH08 BGSL',
|
|
|
+ count: '100',
|
|
|
+ image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.addRandomData();
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ this.loadStatus = 'loading';
|
|
|
+ // 模拟数据加载
|
|
|
+ setTimeout(() => {
|
|
|
+ this.addRandomData();
|
|
|
+ this.loadStatus = 'loadmore';
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleGoMeg: function(value) {
|
|
|
+ var urlStr = ""
|
|
|
+ switch (value) {
|
|
|
+ case "msg":
|
|
|
+ urlStr: "../../msg/index";
|
|
|
+ break;
|
|
|
+ case "mallMenu1":
|
|
|
+ urlStr: "../../mallMenu/index1";
|
|
|
+ break;
|
|
|
+ case "mallMenu2":
|
|
|
+ urlStr: "../../mallMenu2/index2";
|
|
|
+ break;
|
|
|
+ };
|
|
|
+ uni.switchTab({
|
|
|
+ url: urlStr
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addRandomData() {
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ let index = this.$u.random(0, this.list.length - 1);
|
|
|
+ // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
|
|
|
+ let item = JSON.parse(JSON.stringify(this.list[index]))
|
|
|
+ item.id = this.$u.guid();
|
|
|
+ this.flowList.push(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ remove(id) {
|
|
|
+ this.$refs.uWaterfall.remove(id);
|
|
|
+ },
|
|
|
+ clear() {
|
|
|
+ this.$refs.uWaterfall.clear();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .wrap-flex {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-wrap {
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-title {
|
|
|
+ background: #F6F6F6;
|
|
|
+ padding: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .class-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .class-item:last-child {
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: $u-main-color;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-menu-name {
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $u-main-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumb-box {
|
|
|
+ width: 33.333333%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 20px 16rpx 0;
|
|
|
+ background: #f6f6f6;
|
|
|
+ padding: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-warter {
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 8px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 32rpx;
|
|
|
+ right: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-image {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: $u-main-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-tag {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-price {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $u-type-error;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-shop {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: $u-tips-color;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .shopping-car{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 4rpx;
|
|
|
+ right: 16rpx;
|
|
|
+ }
|
|
|
+ #shopping-car{
|
|
|
+ position: fixed;
|
|
|
+ z-index: 9999;
|
|
|
+ right: 26rpx;
|
|
|
+ bottom: 300rpx;
|
|
|
+ }
|
|
|
+</style>
|
wangxiaoying