From 73341eba8e313c2aead0476026bc362b8c4be4b1 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期四, 12 九月 2024 16:05:06 +0800
Subject: [PATCH] update 优化
---
sub_pages/customer/trade/trade.vue | 160 +++++++++++++++++++++++++++-------------------------
1 files changed, 83 insertions(+), 77 deletions(-)
diff --git a/sub_pages/customer/trade/trade.vue b/sub_pages/customer/trade/trade.vue
index ea80d4b..75e41e3 100644
--- a/sub_pages/customer/trade/trade.vue
+++ b/sub_pages/customer/trade/trade.vue
@@ -1,6 +1,6 @@
<template>
- <view class="container-trade" :style="{'min-height':hidefooter?'':'calc(100vh - 20rpx)'}">
- <view class="search-container m-t-12 flex" v-if="!hidefooter">
+ <view class="container-trade" :style="{'min-height':hidefooter?'':'calc(100vh - 20rpx)','max-height':hidefooter?'':'calc(100vh - 20rpx)'}">
+ <view class="search-container m-t-12 flex" v-if="!hidefooter">
<!-- <view class="flex m-r-20">
<view class="m-r-10" style="line-height: 80rpx;" @click="changeSearchType">
{{type=='category'?'按分类':'按店铺'}}
@@ -9,9 +9,10 @@
</view> -->
<view class="flex m-r-20">
- <um-dropdown width="200rpx" style="line-height: 80rpx;" @change="fnChange" :defaultIndex="def" rangeKey="label" :optionList="typeList"></um-dropdown>
+ <um-dropdown width="200rpx" style="line-height: 80rpx;" @change="fnChange" :defaultIndex="def"
+ rangeKey="label" :optionList="typeList"></um-dropdown>
</view>
-
+
<view class="flex1 input">
<!-- <u-input :placeholder="type==='category'?'请输入分类名称':'请输入店铺名称'" v-model="query.name" clearable
@confirm="buttonSearchFlow" @clear="()=>{
@@ -21,20 +22,21 @@
<uni-icons color="#20613D" type="search" size="24" @click="buttonSearchFlow"></uni-icons>
</template>
</u-input> -->
- <u-input :placeholder="search_home_placeholder" v-model="search_flow" clearable @confirm="buttonSearchFlow" @clear="()=>{
+ <u-input :placeholder="search_home_placeholder" v-model="search_flow" clearable
+ @confirm="buttonSearchFlow" @clear="()=>{
$nextTick(()=>{buttonSearchFlow()})
}">
<!-- <u--text text="http://" slot="prefix" margin="0 3px 0 0" type="tips"></u--text> -->
-
-
+
+
<template slot="suffix">
<uni-icons color="#20613D" type="search" size="24" @click="buttonSearchFlow"></uni-icons>
</template>
</u-input>
-
+
</view>
</view>
- <view class="canteen-items" :style="{'min-height':hidefooter?'':'calc(100vh - 340rpx)'}">
+ <view class="canteen-items" :style="{'min-height':hidefooter?'':'calc(100vh - 340rpx)','max-height':hidefooter?'':'calc(100vh - 340rpx)'}">
<view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">
</view>
@@ -47,43 +49,36 @@
</view>
</view>
<view class="canteen-item-container">
- <!-- <view class="component-filter-container" style="padding-top: 12rpx;">-->
- <!-- <view class="flex1" @click="openParamPop">-->
- <!-- 筛选-->
- <!-- </view>-->
- <!-- <view class="flex1">-->
- <!-- 颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>-->
- <!-- </view>-->
- <!-- <view class="flex1">-->
- <!-- 筛选<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>-->
- <!-- </view>-->
- <!-- </view>-->
- <!-- <u-divider></u-divider>-->
- <view class="flex">
- <view v-for="(item,index) of listFilter" :key="item.id" class="canteen-item list"
- @click.stop="toDetailList(item)">
- <view class="m-r-10">
- <!-- @click.stop="previewImg(item.imageUrl)" -->
- <image :src="item.imageUrl" :class="[!item.stock?'':'']" mode="scaleToFill"
- class="cover" :lazy-load="true">
- </image>
- </view>
+ <view v-for="(item,index) of listFilter" :key="item.id"
+ class="canteen-item list flex flex-wrap-normal" @click.stop="toDetailList(item)">
+ <view class="m-r-10">
+ <image :src="item.imageUrl" :class="[!item.stock?'':'']" mode="scaleToFill" class="cover"
+ :lazy-load="true">
+ </image>
+ </view>
+ <view class="flex1">
<view class="cateen_infos list">
- <view class="title">{{item.name}}</view>
-
+ <view class="title flex">
+ {{item.name}}
+ <view class="desc m-l-a m-r-0">在售 {{item.stock||'0'}} 扎</view>
+ </view>
<view class="price">
- <!-- <view>会员价</view> -->
- <view>￥{{item.priceLowMember || 0}}-{{item.priceHighMember||0}}</view>
- </view>
- <!-- <view class="price component-price-old">￥{{item.priceLow || 0}}-{{item.priceHigh||0}}</view> -->
-
+ <view>￥{{item.priceLowMember || 0}}-{{item.priceHighMember||0}}/扎</view>
+ </view>
+ <view class="flex info">
+ <view class="m-r-15">
+ 库存:{{item.stock || 0}}
+ </view>
+ <view>
+ {{item.unit || ''}}
+ </view>
+ </view>
- <view class="desc">在售 {{item.stock||'0'}} 扎</view>
</view>
+ </view>
+ </view>
- </view>
- <view style="padding-bottom:40rpx">
- </view>
+ <view style="padding-bottom:40rpx">
</view>
<footer-msg v-if="!hidefooter" :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
@@ -142,8 +137,7 @@
currentCategory: {},
type: 'category', //supplier
def: 0,
- typeList:[
- {
+ typeList: [{
label: '按鲜花',
value: 'flower',
},
@@ -152,7 +146,7 @@
value: 'supplier',
},
],
- search_home_placeholder:"请输入花名",
+ search_home_placeholder: "请输入花名",
}
@@ -224,23 +218,23 @@
if (this.type == 'flower') {
this.search_home_placeholder = '请输入花名'
uni.setNavigationBarTitle({
- title: '搜鲜花',
- success: function() {
- // console.log('标题搜鲜花修改成功');
- }
+ title: '搜鲜花',
+ success: function() {
+ // console.log('标题搜鲜花修改成功');
+ }
});
-
+
} else {
this.search_home_placeholder = '请输入店铺名'
uni.setNavigationBarTitle({
- title: '搜店铺',
- success: function() {
- // console.log('标题搜店铺修改成功');
- }
+ title: '搜店铺',
+ success: function() {
+ // console.log('标题搜店铺修改成功');
+ }
});
}
},
-
+
changeSearchType() {
if (this.type == 'category') {
this.type = 'supplier'
@@ -347,7 +341,7 @@
},
toDetailList(item) {
//去商品列表页面
- console.log('toDetailList',this.supplierId)
+ console.log('toDetailList', this.supplierId)
uni.navigateTo({
url: `/sub_pages/customer/trade/list?categoryId=${item.id}&supplierId=${this.supplierId||''}`
})
@@ -401,7 +395,7 @@
.container-trade {
background-color: #FFFFFF;
padding-top: 20rpx;
-
+ // overflow-x: scroll;
.search-container {
margin: 0rpx 30rpx 20rpx 30rpx;
}
@@ -455,14 +449,15 @@
// margin-left: 30rpx;
.canteen-item {
- margin: 0 auto;
- width: 164rpx;
+ // margin: 0 auto;
+ // width: 164rpx;
// width: 690rpx;
// max-width: 690rpx;
- min-height: 266rpx;
+ // min-height: 266rpx;
background: #FFFFFF;
- margin-bottom: 44rpx;
- max-width: 164rpx;
+ // margin-bottom: 44rpx;
+ // max-width: 164rpx;
+ margin-bottom: 20rpx;
.cover {
width: 164rpx;
@@ -477,12 +472,13 @@
font-size: 28rpx;
color: #000000;
line-height: 40rpx;
- min-height: 80rpx;
+ // min-height: 50rpx;
text-align: center;
+ // margin-top: 10rpx;
}
.desc {
- margin-top: 8rpx;
+ // margin-top: 8rpx;
font-weight: 400;
font-size: 24rpx;
color: #6E9F66;
@@ -491,6 +487,7 @@
background-color: rgba(202, 229, 214, 0.57);
border-radius: 4rpx;
text-align: center;
+ // margin-top: 12rpx;
}
@@ -499,9 +496,17 @@
font-size: 28rpx;
color: #CF0000;
line-height: 34rpx;
- text-align: center;
+ text-align: left;
+ margin-top: 12rpx;
}
+ .info {
+ font-weight: 400;
+ font-size: 28rpx;
+ margin-top: 12rpx;
+ color: #666666;
+ line-height: 40rpx;
+ }
@@ -512,23 +517,24 @@
width: 100%;
min-height: 300rpx;
max-height: calc(100vh - 270rpx);
- overflow-y: scroll;
+ padding-right: 20rpx;
+ overflow-x: scroll;
}
- .canteen-item:nth-child(3n+1) {
- margin-left: 0rpx;
- margin-right: 15rpx;
- }
+ // .canteen-item:nth-child(3n+1) {
+ // margin-left: 0rpx;
+ // margin-right: 15rpx;
+ // }
- .canteen-item:nth-child(3n+2) {
- margin-left: 15rpx;
- margin-right: 15rpx;
- }
+ // .canteen-item:nth-child(3n+2) {
+ // margin-left: 15rpx;
+ // margin-right: 15rpx;
+ // }
- .canteen-item:nth-child(3n+3) {
- margin-left: 15rpx;
- margin-right: 0rpx;
- }
+ // .canteen-item:nth-child(3n+3) {
+ // margin-left: 15rpx;
+ // margin-right: 0rpx;
+ // }
}
.canteen-footer-shop {
--
Gitblit v1.9.3