数据店铺优化

pages.json

@@ -106,7 +106,7 @@
     {
       "path": "pages/goods/list",
       "style": {
-        "navigationBarTitleText": "标的列表",
+        "navigationBarTitleText": "数据店铺",
         "enablePullDownRefresh": true
       }
     },

pages/goods/list.vue

@@ -1,54 +1,68 @@
 <template>
   <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
     <!-- 页面头部 -->
-    <view class="header">
+    <!-- 搜索 -->
-      <search class="search" :tips="options.search ? options.search : '搜索标的'" @event="handleSearch" />
+    <view class="sozone">
-      <!-- 切换列表显示方式 -->
+      <view class="sovue">
-      <view class="show-view" @click="handleShowView">
+        <view class="search-wrapper">
-        <text class="iconfont icon-view-tile" v-if="showView"></text>
+          <view class="search-input">
-        <text class="iconfont icon-view-list" v-else></text>
+            <view class="search-input-wrapper">
+              <view class="left">
+                <text class="search-icon iconfont icon-search"></text>
               </view>
+              <view class="right">
+                <input v-model="searchValue" class="input" focus="true" placeholder="请输入搜索关键词" type="text">
               </view>
-
+            </view>
-    <!-- 标的列表 -->
+          </view>
-    <view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
+          <view class="search-button">
-      <view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_id)">
+            <view class="button" @click="onSearch">搜索</view>
-        <!-- 单列显示 -->
+          </view>
-        <view v-if="showView" class="dis-flex">
+        </view>
+      </view>
+    </view>
+    <!-- 基本信息 -->
+    <view class="dis-flex">
       <!-- 图片 -->
       <view class="goods-item_left">
-            <image class="image" :src="item.goods_image|gdimg"></image>
+        <image class="image" :src="userList.doorHeadPhoto"></image>
       </view>
       <view class="goods-item_right">
         <!-- 名称 -->
         <view class="goods-name">
-              <text class="twoline-hide">{{ item.goods_name }}</text>
+          <text class="twoline-hide">{{ userList.name }}</text>
         </view>
-            <view class="goods-item_desc">
+        <view class="goods-auth-type">
-              <!-- 权益 -->
+          <text class="twoline-hide">{{ userList.authType }}</text>
-              <view class="desc-selling_point dis-flex">
-                <text class="oneline-hide">{{ item.goods_ownership_str }}</text>
         </view>
-			  <!-- 用户 -->
-			  <view class="desc-selling_point dis-flex">
-				  <text class="oneline-hide">{{ item.username }}</text>
       </view>
-              <!-- 销量 -->
-              <view class="desc-goods_sales dis-flex">
-                <text>已售{{ item.sale_count }}件</text>
     </view>
-              <!-- 价格 -->
+    <!-- 店铺信息 -->
-              <view class="desc_footer">
+    <view class="dis-flex-info">
-                <text class="price_x">¥{{ item.price }}</text>
+      <view class="vertical-line"></view>
+      <view class="dis-flex-title">店铺信息</view>
+      <view class="dis-flex-line"></view>
+      <view class="dis-flex-content">
+        <text>卖方/授权方名称：{{userList.name}}</text>
+        <text>认证类型：{{userList.userType}}</text>
+        <text>认证状态：{{userList.stateStr}}</text>
+        <text>交易主体标志码：{{userList.user_islicode}}</text>
       </view>
     </view>
+    <!--排序-->
+    <view class="order">
+      <view v-for="items in tabText" class="tab_text" :class="{tab_link : items.value === targetTab}"
+            @click="changeTab(items.value)">{{ items.title }}
       </view>
     </view>
+    <!-- 标的列表 -->
+    <view class="goods-list clearfix">
+      <view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_islicode)">
         <!-- 多列显示 -->
-        <view v-else class="">
+        <view class="goods-item_left">
           <!-- 图片 -->
           <view class="goods-image">
-            <image class="image" mode="aspectFill" :src="item.goods_image|gdimg"></image>
+            <image class="image" mode="aspectFill" :src="item.gdimg"></image>
           </view>
           <view class="detail">
             <!-- 标题 -->
@@ -58,6 +72,7 @@
             <!-- 价格 -->
             <view class="detail-price oneline-hide">
               <text class="goods-price f-30 col-m">￥{{ item.price }}</text>
+              <text class="goods-sales">销量：{{item.sale_count}}</text>
             </view>
           </view>
         </view>
@@ -71,31 +86,26 @@
   import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
   import * as GoodsApi from '@/api/goods'
   import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
-  import Search from '@/components/search'
   
   //解压缩
   import pako from '@/core/pako'
   import { base64ToUint8Array,numberWithCommas} from '@/utils/util'
 
-  const pageSize = 15
+  const pageSize = 8
-  const showViewKey = 'GoodsList-ShowView';
 
   export default {
     components: {
       MescrollBody,
-      Search
     },
 
     mixins: [MescrollMixin],
 
     data() {
       return {
-        showView: false, // 列表显示方式 (true列表、false平铺)
+        searchValue: '',
-        sortType: 'all', // 排序类型
-        sortPrice: false, // 价格排序 (true高到低 false低到高)
         options: {}, // 当前页面参数
         list: getEmptyPaginateObj(), // 商品列表数据
-
+        userList: {},
         // 上拉加载配置
         upOption: {
           // 首次自动执行
@@ -104,7 +114,26 @@
           page: { size: pageSize },
           // 数量要大于4条才显示无更多数据
           noMoreSize: 4,
-        }
+        },
+        tabText: [
+          {
+            title: '上新排序',
+            value: 1
+          },
+          {
+            title: '销量排序',
+            value: 2
+          },
+          {
+            title: '价格排序',
+            value: 3
+          },
+          {
+            title: '更多',
+            value: 4
+          },
+        ],
+        targetTab: 1,
       }
     },
 
@@ -114,32 +143,46 @@
     onLoad(options) {
       // 记录options
       this.options = options
-      // 设置默认列表显示方式
-      this.setShowView()
     },
 
     methods: {
-
+      // 搜索
+      async onSearch() {
+        if (this.searchValue == '') {
+          this.$error('请输入搜索关键词');
+        } else {
+          await this.getGoodsList()
+          await this.getHomeListImage()
+        }
+      },
+      // 切换tab
+      async changeTab(val) {
+        if (val == 4) {
+          this.$error('更多内容，敬请期待！')
+        } else {
+          this.targetTab = val
+          await this.getGoodsList()
+          await this.getHomeListImage()
+        }
+      },
       /**
        * 上拉加载的回调 (页面初始化时也会执行一次)
        * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
        * @param {Object} page
        */
-      upCallback(page) {
+      async upCallback(page) {
         const app = this
         // 设置列表数据
-        app.getGoodsList(page.num)
+        await app.getGoodsList(page.num)
           .then(list => {
             const curPageLen = list.data.length
             const totalSize = list.data.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())
-      },
 
-      // 设置默认列表显示方式
+        // 标的列表
-      setShowView() {
+        await app.getHomeListImage()
-        this.showView = uni.getStorageSync(showViewKey) || false
       },
 
       /**
@@ -149,33 +192,63 @@
       getGoodsList(pageNo = 1) {
         const app = this
         const param = {
-			// "pay_type":2,"goods_status":1,"page":1,"limit":6
+          authorization: '',
-           order: 'desc',
+          entrust_name: '',
-           order_type: 'id',
+          entrust_user_name: app.options.k,
-           //entrust_user_name: app.options.k,
-		   goods_name:app.options.search,
           goods_status: '1',
+          limit: pageSize,
+          order: 'desc',
+          order_type: '',
           page: pageNo,
-		   limit: pageSize
+          record_type: '',
+          source_type: '',
+        }
+        if (app.searchValue != '') {
+          param.goods_name = app.searchValue
+        }
+        if (app.targetTab === 2) {
+          param.order_type = 'sale'
+        } else if (app.targetTab === 3) {
+          param.order_type = 'price'
         }
         return new Promise((resolve, reject) => {
           GoodsApi.nbgoods(param)
-		    //GoodsApi.soglist(param)
-          //GoodsApi.list(param)
               .then(result => {
                 // 合并新数据
-              const newList = result.data
+                const newList = app.initList(result.data)
                 app.list.data = getMoreListData(newList, app.list, pageNo)
-              app.getHomeListImage()
+                app.userList = newList.data[0].user
+                app.userList.stateStr = this.getUserStateStr(app.userList.state)
+                app.userList.user_islicode = newList.data[0].user_islicode
                 resolve(newList)
               })
               .catch(reject)
         })
       },
+      getUserStateStr(state){
+        let str = ''
+        if (state == "1" || state == "3" || state == "7" || state == "0") {
+          str = '认证中'
+        } else if (state == "2" || state == "4" || state == "5") {
+          str = '认证失败'
+        } else if (state == "6") {
+          str = '认证成功'
+        }
+        return str
+      },
+      // 初始化订单列表数据
+      initList(newList) {
+        newList.data.forEach(item => {
+          // 处理价格表现形式
+          item.price = numberWithCommas(item.price)
+          item.gdimg = item.goods_image === "" ? '' : pako.inflateRaw(base64ToUint8Array(item.goods_image), {to: 'string'})
+        })
+        return newList
+      },
       async getHomeListImage() {
-        this.list.data.forEach((item,key) => {
+        this.list.data.forEach((item, key) => {
           if (item.goods_image === "") {
-            GoodsApi.nbgoodsImage({"id": item.id}).then(res2=>{
+            GoodsApi.nbgoodsImage({"id": item.id}).then(res2 => {
               if (res2.code === 200) {
                 this.list.data[key].goods_image = res2.data.data[0].goods_image;
                 this.list.data[key].gdimg = pako.inflateRaw(base64ToUint8Array(res2.data.data[0].goods_image), {to: 'string'})
@@ -184,33 +257,6 @@
           }
         })
       },
-	  // 整理列表数据
-	  initList(newList) {
-	    newList.data.forEach(item => {
-	  	// 处理价格表现形式  
-	  	item.price = numberWithCommas(item.price)
-	  	item.gdimg = pako.inflateRaw(base64ToUint8Array(item.goods_image), {to: 'string'})
-	    })
-	    return newList
-	  },
-
-      // 切换排序方式
-      handleSortType(newSortType) {
-        const app = this
-        const newSortPrice = newSortType === 'price' ? !app.sortPrice : true
-        app.sortType = newSortType
-        app.sortPrice = newSortPrice
-        // 刷新列表数据
-        app.list = getEmptyPaginateObj()
-        app.mescroll.resetUpScroll()
-      },
-
-      // 切换列表显示方式
-      handleShowView() {
-        const app = this
-        app.showView = !app.showView
-        uni.setStorageSync(showViewKey, app.showView)
-      },
 
       // 跳转商品详情页
       onTargetDetail(gislicode) {
@@ -234,175 +280,246 @@
       }
 
     },
-	filters:{
-		//  解压缩图片
-		gdimg:function(value){
-			return pako.inflateRaw(base64ToUint8Array(value), {to: 'string'})
-		}
-	}
 
   }
 </script>
 
 <style lang="scss" scoped>
-  // 页面头部
-  .header {
-    display: flex;
-    align-items: center;
-    background-color: #fff;
 
-    // 搜索框
+  // 搜索
-    .search {
+  .sozone{
-      flex: 1;
+    position: relative;
-    }
+    z-index: 70;
 
-    // 切换显示方式
+    .sovue{
-    .show-view {
+      position: absolute;
-      width: 60rpx;
+      top: -100rpx;
-      height: 60rpx;
+      left: 4rpx;
-      line-height: 60rpx;
+      width: 100%;
-      font-size: 36rpx;
-      color: #505050;
-    }
     }
 
-  // 排序组件
+    .search-wrapper {
-  .store-sort {
-    position: sticky;
-    top: var(--window-top);
       display: flex;
-    padding: 20rpx 0;
+      height: 84rpx;
-    font-size: 28rpx;
+    }
+
+    // 搜索输入框
+    .search-input {
+      width: 80%;
       background: #fff;
-    color: #000;
+      border-radius: 10rpx 0 0 10rpx;
-    z-index: 99;
+      box-sizing: border-box;
+      overflow: hidden;
 
-    .sort-item {
+      .search-input-wrapper {
-      flex-basis: 33.3333%;
+        display: flex;
+
+        .left {
           display: flex;
+          width: 60rpx;
           justify-content: center;
           align-items: center;
-      height: 50rpx;
 
-      &.active {
+          .search-icon {
-        color: #e49a3d;
+            display: block;
-      }
+            color: #b4b4b4;
+            font-size: 28rpx;
           }
 
-    .sort-item-price .price-arrow {
-      margin-left: 20rpx;
-      font-size: 24rpx;
-      color: #000;
-
-      .icon {
-        &.active {
-          color: #e49a3d;
         }
 
-        &.up {
+        .right {
-          margin-bottom: -16rpx;
+          flex: 1;
-        }
 
-        &.down {
+          input {
-          margin-top: -16rpx;
+            font-size: 28rpx;
+            height: 84rpx;
+            display: flex;
+            align-items: center;
+
+            .input-placeholder {
+              color: #aba9a9;
             }
           }
 
         }
-
+      }
     }
 
-  // 商品列表
+    // 搜索按钮
-  .goods-list {
+    .search-button {
-    padding: 4rpx;
+      width: 20%;
       box-sizing: border-box;
+
+      .button {
+        height: 84rpx;
+        font-size: 28rpx;
+        border-radius: 0 10rpx 10rpx 0;
+        background: #4399ff;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
   }
 
-  // 单列显示
+  // 店铺基本信息
-  .goods-list.column-1 {
+  .dis-flex {
-    .goods-item {
+    display: flex;
-      width: 100%;
+    width: 90%;
-      height: 280rpx;
+    height: 240rpx;
-      margin-bottom: 12rpx;
+    margin: 100rpx 10rpx 20rpx 40rpx;
-      padding: 20rpx;
     box-sizing: border-box;
     background: #fff;
     line-height: 1.6;
-
+    border-radius: 15rpx;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
 
     .goods-item_left {
       display: flex;
-      width: 300rpx;
+      width: 220rpx;
       background: #fff;
       align-items: center;
 
       .image {
         display: block;
-        width: 240rpx;
+        width: 200rpx;
-        height: 240rpx;
+        height: 200rpx;
       }
     }
 
     .goods-item_right {
+      margin-top: 20rpx;
+
+      .goods-auth-type {
+        margin-top: 40rpx;
+        font-size: 26rpx;
+        color: #fbb154;
+        font-weight: bold;
+      }
+    }
+
+  }
+  // 店铺信息
+  .dis-flex-info {
+
     position: relative;
-      // width: 450rpx;
+    width: 90%;
-      flex: 1;
+    height: 300rpx;
+    background: #fff;
+    margin: 20rpx 40rpx;
+    border-radius: 10rpx;
+    color: #15192d;
 
-      .goods-name {
+    .vertical-line {
-        margin-top: 10rpx;
+      position: absolute;
-        min-height: 68rpx;
+      left: 0;
-        line-height: 1.3;
+      top: 0;
+      width: 12px;
+      height: 100%;
+      border-top-left-radius: 10rpx;
+      border-bottom-left-radius: 10rpx;
+      background: linear-gradient(to bottom, #15192d, #15192d 50%); /* 渐变背景色 */
+    }
+    .dis-flex-title {
+      font-size: 30rpx;
+      margin-left: 40rpx;
+      padding-top: 20rpx;
+      padding-bottom: 10rpx;
+    }
+    .dis-flex-line {
+      border-bottom: 5rpx #15192d solid;
+    }
+    .dis-flex-content {
+      margin: 20rpx 40rpx;
       white-space: normal;
-        color: #484848;
+      text {
+        display: block;
+        margin-bottom: 10rpx;
         font-size: 26rpx;
       }
     }
+  }
 
-    .goods-item_desc {
+  // 排序
-      margin-top: 8rpx;
+  .order {
+    display: flex;
+    padding: 20rpx 10rpx 20rpx;
+    margin-left: -55rpx;
+    z-index: 65;
+    font-weight: bold;
+
+    .tab_text {
+      display: inline-block;
+      color: #1b223b;
+      font-size: 30rpx;
+      margin-left: 80rpx;
     }
 
-    .desc-selling_point {
+    .tab_link {
-      width: 400rpx;
+      border-bottom: 5rpx #1b223b solid;
-      font-size: 24rpx;
+    }
-      color: #e49a3d;
   }
 
-    .desc-goods_sales {
+  // 排序组件
-      color: #999;
+  .store-sort {
-      font-size: 24rpx;
+    position: sticky;
+    top: var(--window-top);
+    display: flex;
+    padding: 20rpx 0;
+    font-size: 28rpx;
+    background: #fff;
+    color: #1b223b;
+    z-index: 99;
+
+    .sort-item {
+      flex-basis: 33.3333%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 50rpx;
+
+      &.active {
+        color: #e49a3d;
+      }
     }
 
-    .desc_footer {
+    .sort-item-price .price-arrow {
+      margin-left: 20rpx;
       font-size: 24rpx;
+      color: #000;
 
-      .price_x {
+      .icon {
-        margin-right: 16rpx;
+        &.active {
-        color: #f03c3c;
+          color: #e49a3d;
-        font-size: 30rpx;
         }
 
-      .price_y {
+        &.up {
-        text-decoration: line-through;
+          margin-bottom: -16rpx;
         }
+
+        &.down {
+          margin-top: -16rpx;
         }
       }
 
-  // 平铺显示
-  .goods-list.column-2 {
-    .goods-item {
-      width: 50%;
     }
+
   }
 
+  // 商品列表
+  .goods-list {
+    padding: 4rpx;
+    box-sizing: border-box;
+  }
+
+  // 平铺显示
+
   .goods-item {
     float: left;
     box-sizing: border-box;
     padding: 6rpx;
+    width: 50%;
 
     .goods-image {
       position: relative;
@@ -450,6 +567,13 @@
           text-decoration: line-through;
         }
       }
+
+      .goods-sales {
+        float: right;
+        color: #484848;
+        font-size: 20rpx;
+        margin-top: 10rpx;
+      }
     }
   }
 </style>