|
@@ -1,412 +0,0 @@
|
|
|
-<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>
|
|
|
- <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 style="position: static;">
|
|
|
- <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>
|
|
|
- <scroll-view scroll-y @scrolltolower="scrollBottom" class="scroll-view-container">
|
|
|
- <u-waterfall v-model="flowList" ref="uWaterfall">
|
|
|
- <template v-slot:left="{leftList}">
|
|
|
- <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="inDetails">
|
|
|
- <!-- 警告:微信小程序中需要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>
|
|
|
- </scroll-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();
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- handleGo: 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
|
|
|
- });
|
|
|
- },
|
|
|
- scrollBottom:function() {
|
|
|
- this.loadStatus = 'loading';
|
|
|
- // 模拟数据加载
|
|
|
- setTimeout(() => {
|
|
|
- this.addRandomData();
|
|
|
- this.loadStatus = 'loadmore';
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- 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();
|
|
|
- },
|
|
|
- inDetails(){
|
|
|
- this.$u.route({
|
|
|
- url: 'pages/home/shopping/inline_shop_details',
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</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;
|
|
|
- }
|
|
|
- .scroll-view-container{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 88rpx);
|
|
|
- }
|
|
|
- .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>
|