update 花农端首次上架

xuxueyang

2024-07-12 c58aff5b2a349c6b1fc8a4a3f474f7f8cc529e09

 sub_pages/customer/trade/trade.vue

@@ -1,22 +1,329 @@
<template>
   <view>
		
   </view>
</template>

<script>
   export default {
      data() {
         return {
				
         }
      },
      methods: {
			
      }
   }
</script>

<style>

</style>
<template>

   <view class="container-trade" style="min-height: calc(100vh - 20rpx );">

      <view class="search-container m-t-12 flex" v-if="!(!list||list.length==0)&&true">

         <view class="flex1 input">

            <u-input placeholder="请输入分类名称" v-model="query.name">

               <template slot="suffix">

                  <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>

               </template>

            </u-input>

         </view>

      </view>

      <view class="canteen-items" style="min-height: calc(100vh - 160rpx);">

         <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">

            &nbsp;

         </view>

         <no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 220rpx;"></no-data>

         <view class="" style="display: flex;flex-wrap: inherit;" v-else>

            <view class="type-list">

               <view v-for="(item,index) of list" @click="changeType(item)"

                  :class="[query.categoryId==item.id?'current':'']" :key="index" class="p10 flex type-item">

                  {{item.name || '-'}}

               </view>

            </view>

            <view class="canteen-item-container">

               <view class="component-filter-container" style="padding-top: 12rpx;">

                  <view class="flex1">

                     销量

                  </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">

                        <image :src="item.imageUrl" mode="scaleToFill" class="cover"

                           @click.stop="previewImg(item.imageUrl)">

                        </image>

                     </view>

                     <view class="cateen_infos list">

                        <view class="title">{{item.name}}</view>

                        <view class="price">￥29.01-30.01</view>



                        <view class="desc">在售14410扎</view>

                        <!--                         <view class="icons flex">

                              <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"

                                 @click="mulnum(item)"></uni-icons>

                              <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>

                              <uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>

                           </view> -->

                     </view>

                     <view style="padding-bottom:100rpx">

                     </view>

                  </view>



               </view>

               <footer-msg v-if="query.block&&query.schoolArea"

                  :more="page.total>0&&page.total>page.current*page.size"></footer-msg>



            </view>

         </view>



      </view>







      <view style="min-height:200rpx">

      </view>

      <common-footer flg="1"></common-footer>



   </view>

</template>



<script>

   import {

      mapState

   } from 'vuex'

   export default {

      data() {

         return {

            list: [],

            showpop: false,

            query: {

               name: '',

               categoryId: '',

            },



         }

      },

      onPullDownRefresh() {

         this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => {

            var data = res.data

            this.list = data || []

            if (this.list.length > 0) {

               this.query.categoryId = this.list[0].id || ''

            }

         }).finally(() => {

            uni.stopPullDownRefresh()

         })

      },

      async onLoad() {



         //加载分类

         this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => {

            var data = res.data

            this.list = data || []

            if (this.list.length > 0) {

               this.query.categoryId = this.list[0].id || ''

            }

         })

      },

      methods: {

         buttonSearchFlow() {

            //根据名称查询

            this.$message.showLoading()

            this.$http.request('get', '/api/customer/flower/category/tree', {

               params: {

                  name: this.query.name || ''

               }

            }).then(res => {

               var data = res.data

               this.list = data || []

               if (this.list.length > 0) {

                  this.query.categoryId = this.list[0].id || ''

               } else {

                  this.query.categoryId = ''

               }

            }).finally(() => {

               this.$message.hideLoading()

            })

         },

         toDetailList(item) {

            //去商品列表页面

            uni.navigateTo({

               url: `/sub_pages/customer/trade/list?categoryId=${item.id}`

            })

         },

         changeType(item) {

            this.query.categoryId = item.id || ''

         },





         async submitGood() {

            var values = []

            for (var item of this.list) {

               if (item.shopnum > 0) {

                  values.push({

                     id: item.id,

                     num: item.shopnum

                  })

               }

            }

         }

      },

      computed: {

         ...mapState({

            address: state => {

               return state.defaultaddress || {}

            },

         }),

         listFilter() {

            if (this.query.categoryId) {

               var arr = []

               if (this.list && this.list.length > 0) {

                  for (var item of this.list) {

                     if (item.id === this.query.categoryId || item.id === this.query.categoryId) {

                        // arr.push(item)

                        return item.children || []

                     }

                  }

               }

               return arr

            } else {

               return []

            }



         },

      }

   }

</script>



<style lang="scss" scoped>

   .container-trade {

      background-color: #FFFFFF;

      padding-top: 20rpx;



      .search-container {

         margin: 0rpx 30rpx 20rpx 30rpx;

      }



	


      .type-list {

         max-width: 178rpx;

         width: 178rpx;

         min-width: 178rpx;

         background: #EEF7F5;

         border-radius: 8rpx;

         min-height: calc(100vh - 300rpx);

         max-height: calc(100vh - 300rpx);

         overflow-y: scroll;

         margin-right: 16rpx;



         .type-item {

            text-align: center;

            font-weight: 400;

            font-size: 28rpx;

            color: #000000;

            line-height: 88rpx;

            // padding-left: 30rpx;

            // padding-right: 30rpx;

         }



         .type-item.current {

            font-weight: 600;

            font-size: 28rpx;

            color: #04BA97;

         }

      }



      .title-before-blue.green {

         padding-left: 30rpx;

         padding-bottom: 0rpx;

      }



      .title-before-blue:before {

         color: #04BA97;

         font-weight: 600;

         min-width: 14rpx;

         background: #04BA97;

         border-radius: 8rpx;

         display: inline-block;

      }





      .canteen-items {

         // margin-left: 30rpx;



         .canteen-item {

            margin: 0 auto;

            width: 164rpx;

            // width: 690rpx;

            // max-width: 690rpx;

            height: 266rpx;

            background: #FFFFFF;

            margin-bottom: 44rpx;

            max-width: 164rpx;



            .cover {

               width: 164rpx;

               height: 164rpx;

               background-size: 100% 100%;

               border-radius: 8rpx;

               border: 2rpx solid #f8f8f8;

            }



            .title {

               font-weight: 500;

               font-size: 28rpx;

               color: #000000;

               line-height: 40rpx;

            }



            .desc {

               margin-top: 8rpx;

               font-weight: 400;

               font-size: 24rpx;

               color: #6E9F66;

               line-height: 34rpx;

               height: 34rpx;

               background-color: rgba(202, 229, 214, 0.57);

               border-radius: 4rpx;

               text-align: center;



            }



            .price {

               font-weight: 400;

               font-size: 24rpx;

               color: #CF0000;

               line-height: 34rpx;

               text-align: center;

            }











         }



         .canteen-item-container {

            width: 100%;

            min-height: 300rpx;

            max-height: calc(100vh - 200rpx);

            overflow-y: scroll;

         }



         .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+3) {

            margin-left: 15rpx;

            margin-right: 0rpx;

         }

      }



      .canteen-footer-shop {

         position: absolute;

         position: fixed;

         left: 30rpx;

         bottom: 30rpx;

      }







   }

</style>