1

xuxueyang

2024-08-13 c9ece393fc028ffecca0915d1b9af62d51b5aef6

 sub_pages/customer/shop/shop.vue

@@ -2,15 +2,7 @@
   <view class="brand-detail" style="background: #20613D;">



      <view class="brand-top-info">

         <view class="search-container  flex" style="padding-left: 20rpx;padding-right: 20rpx;padding-top: 20rpx">

            <view class="flex1 input">

               <u-input placeholder="请输入花名" v-model="search_flow">

                  <template slot="suffix">

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

                  </template>

               </u-input>

            </view>

         </view>



         <view class="info-brand m-t-12" v-if="id">

            <view class="flex">

               <image class="store-logo" :src="dto.cover"></image>

@@ -38,7 +30,7 @@
         </view>

         <view class="tj-info m-t-12">

            <view class="form-item">

               <view class="value">0</view>

               <view class="value">{{page.total || 0}}</view>

               <view class="label">发布</view>

            </view>

            <view class="form-item">

@@ -61,82 +53,102 @@
         </view>

      </view>

      <view class="brand-info">

         <view v-if="flg==='0'" class="brand-info-0">

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

               <view class="flex1">

                  排序

         <view v-show="flg==='0'||flg==='1'" class="brand-info-0">

            <view class="search-container  flex"

               style="padding-left: 20rpx;padding-right: 20rpx;padding-top: 20rpx">

               <view class="flex1 input">

                  <u-input placeholder="请输入花名" v-model="query.name" clearable @confirm="buttonSearchFlow" @clear="()=>{

               $nextTick(()=>{buttonSearchFlow()})

            }">

                     <template slot="suffix">

                        <uni-icons color="#20613D" type="search" size="24"

                           @click="buttonSearchFlow"></uni-icons>

                     </template>

                  </u-input>

               </view>

            </view>

            <view class="component-filter-container" style="padding-top: 12rpx;" v-show="flg==='0'">

               <view class="flex1" @click.stop="$refs.popup_column.open()">

                  排序{{ query.columnStr&&('-'+query.columnStr) || '' }}

                  <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 class="flex1">

                  参数

               <view class="flex1" @click.stop="$refs.popup_level.open()">

                  {{ query.levelStr || '级别' }}

                  <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>

               </view>

            </view>

            <view class="top-title">

            <view class="top-title m-t-12" v-show="flg==='0'">

               报价已包含打包费、材料费、交易佣金

            </view>

            <view class="component-shop-item flex" v-for="(item,index) of list" :key="index"

               @click.stop="toDetail(item)">

               <view class="img">

                  <image class="img img100" :src="item.cover" lazy-load>

                  </image>

                  <view class="level">

                     {{item.levelStr||''}}

                  </view>

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

            <view class="flex m-t-12 flex-wrap-normal">

            <view class="type-list"  v-if="flg==='1'">

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

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

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

               </view>

            </view>

            <view class="flex1">

					
				
               <view class="component-shop-item flex" v-for="(item,index) of list" :key="index" :class="flg==='1'?'flg-category':''">

                  <view class="img" @click.stop="toDetail(item)">

                     <image class="img img100" :src="item.cover" lazy-load>

                     </image>

                     <view class="level">

                        {{item.levelStr||''}}

                     </view>

                  </view>



               <view class="m-l-12 info-container flex1">

                  <view class="title">

                     {{item.name}}

                     <view class="price">

                        ￥{{item.price}}/扎

                  <view class="m-l-12 info-container flex1">

                     <view class="title" @click.stop="toDetail(item)">

                        {{item.name}}

                        <view class="price">

                           ￥{{item.price}}/扎

                        </view>

                     </view>

                  </view>

                  <view class="shop-name">

                     {{item.categoryStr}}

                  </view>

                  <view class="other-info flex">

                     <view class="m-r-15">

                        已售:{{item.sales || 0}}

                     <view class="shop-name" @click.stop="toDetail(item)">

                        {{item.categoryStr}}

                     </view>

                     <view class="m-r-15">

                        剩余:{{item.stock || 0}}

                     </view>

                     <view class="m-r-15">

                        {{item.unit}}

                     </view>

                  </view>

                  <view class="bottom-buttons  flex">

                     <view class="m-l-0 m-r-a">

                     <view class="other-info flex" @click.stop="toDetail(item)">

                        <view class="m-r-15">

                           颜色:{{item.color||'-'}}

                           已售:{{item.sales || 0}}

                        </view>

                        <view class="m-r-15">

                           剩余:{{item.stock || 0}}

                        </view>

                        <view class="m-r-15">

                           {{item.unit}}

                        </view>

                     </view>

                     <view class="icons flex">

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

                           @click.stop="addnum(item,-1)"></uni-icons>

                        <view class="curnums" @click="updateItemNum(item)" v-if="item.shopnum&&item.shopnum>=1">

                           {{ item.shopnum }}

                     <view class="bottom-buttons  flex">

                        <view class="m-l-0 m-r-a">

                           <view class="m-r-15 desc-gray other-info">

                              颜色:{{item.color||'-'}}

                           </view>

                        </view>

                        <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"

                           @click.stop="addnum(item,1)"></uni-icons>

                        <view class="icons flex">

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

                              @click.stop="addnum(item,-1)"></uni-icons>

                           <view class="curnums" @click.stop="updateItemNum(item)"

                              v-if="item.shopnum&&item.shopnum>=1">

                              {{ item.shopnum }}

                           </view>

                           <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"

                              @click.stop="addnum(item,1)"></uni-icons>

                        </view>

                     </view>

                  </view>

               </view>

            </view>



            </view>

         </view>



         <view v-if="flg==='1'" class="brand-info-1">

            <trade :hidefooter="true" :catgoryTree="catgoryTree" v-if="catgoryTree" ref="trade"></trade>

            <!-- // 构建一个分类树 -->

            <!-- catgoryTree -->



         <!-- <view v-show="flg==='1'" class="brand-info-1">

            <trade :hidefooter="true" :supplierId="id" :catgoryTree="catgoryTree" v-if="catgoryTree" ref="trade">

            </trade>

         </view>

          -->

         <view v-if="flg==='2'" class="brand-info-3">

            <view class="title">

               基础信息

@@ -157,15 +169,66 @@
               <view class="label">身份认证</view>

               <view class="value">{{dto.idcardTypeStr||'未认证'}}</view>

            </view>

            <!--    <view class="form-input flex">

               <view class="label">&nbsp;&nbsp;</view>

               <view class="value">{{'已实名'}}</view>

            </view> -->

         </view>

      </view>

      <uni-popup ref="popup_column" type="bottom">

         <view class="component-popup_input_all">

            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">点击选择不同排序</view>

            <view v-for="(item,i) in order_columns" :key="i" class="m-t-20">

               <view class="m-t-12 flex value-items">

                  <view class="value-item" @click="()=>{

                     if(each.value!==query.value){

                        query.column = each.value

                        query.columnStr = each.label

                        refreshList('post')

                        $refs.popup_column.close()

                     }																																						
                  }" :class="[query.column==each.value?'cur':'']" v-for="(each, j) in item" :key="j">

                     {{ each.label || '-' }}

                  </view>

               </view>

            </view>

            <view class="button-space"></view>

            <view>

               <view class="button-green" @click="$refs.popup_column.close()">关闭

               </view>

            </view>

         </view>

      </uni-popup>





      <uni-popup ref="popup_level" type="bottom">

         <view class="component-popup_input_all">

            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">点击选择不同级别</view>

            <view v-for="(item,i) in level_columns" :key="i" class="m-t-20">

               <view class="m-t-12 flex value-items">

                  <view class="value-item" @click="()=>{

                     if(each.value!==query.value){

                        query.level = each.value

                        query.levelStr = each.label

                        refreshList('post')

                        $refs.popup_level.close()

                     }																																						
                  }" :class="[query.level==each.value?'cur':'']" v-for="(each, j) in item" :key="j">

                     {{ each.label || '-' }}

                  </view>

               </view>

            </view>

            <view class="button-space"></view>

            <view>

               <view class="button-green" @click="$refs.popup_level.close()">关闭

               </view>

            </view>

         </view>

      </uni-popup>

   </view>

</template>



<script>

   import trade from '@/sub_pages/customer/trade/trade.vue'

   import trade from './shop-trade.vue'

   import http from "../../../plugins/http";



   export default {

@@ -174,7 +237,7 @@
      },

      data() {

         return {

            search_flow: '',

            // search_flow: '',

            flg: '0',

            tabs: [{

                  name: '全部商品'

@@ -193,23 +256,68 @@
            list: [],

            id: '',

            catgoryTree: undefined,

            query: {

               columnStr: '',

               column: '',

               levelStr: '',

               level: '',

               name: '',

               categoryRoot:'',

            },

            level_show: false,

            level_columns: [

               []

            ],



            order_show: false,

            order_columns: [

               []

            ]

         }

      },

      onShow() {

         //避免商品数目不一样

         this.refreshList('post')

      },

      onLoad(options) {

         this.id = options.id || ''

         // this.page.size =

         this.page.size = 300

         if (this.id) {

            this.getDetail()

         }

         this.listApi = `/api/customer/flower/list`

         this.query.supplierId = this.id

         this.getList('post')

         this.$http.request('get', '/api/code/value', {

            params: {

               type: 'FLOWER_LEVEL'

            }

         }).then(res => {

            var data = res.data

            this.level_columns = [data || []]

            this.level_columns[0].unshift({

               label: '全部',

               value: ''

            })

         })

         this.$http.request('get', '/api/code/value', {

            params: {

               type: 'FLOWER_ORDER_BY'

            }

         }).then(res => {

            var data = res.data

            this.order_columns = [data || []]

            this.order_columns[0].unshift({

               label: '默认',

               value: ''

            })

         })

      },

      // #ifdef PUB_CUSTOMER

      onShareAppMessage() {

         let that = this;

         var name = that.currentInfo.customerDTO && currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&

            currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && currentInfo.partnerDTO.name || ''

         var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&

            that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''

         var url =

            `/sub_pages/customer/shop/shop?id=${this.id}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数

         return {

@@ -219,8 +327,8 @@
      },

      onShareTimeline() {

         let that = this;

         var name = that.currentInfo.customerDTO && currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&

            currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && currentInfo.partnerDTO.name || ''

         var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&

            that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''

         var url =

            `/sub_pages/customer/shop/shop?id=${this.id}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数

         return {

@@ -230,9 +338,9 @@
      },

      // #endif

      onReachBottom() {

         if (this.flg === '0') {

            this.getMore('post')

         }

         // if (this.flg === '0') {

         //    this.getMore('post')

         // }

      },

      methods: {



@@ -302,7 +410,13 @@
         },

         async changeTab(flg) {

            console.log('changeTab', flg)

            if ('0' === ('' + flg)) {

               //刷新list数据

               this.query.categoryRoot = ''

               this.refreshList('post')

            }

            if ('1' === ('' + flg)) {

               this.list = []

               if (!this.catgoryTree) {

                  this.$message.showLoading()

                  const {

@@ -319,21 +433,38 @@
                  if (code === 0) {

                     // data 分类树

                     this.catgoryTree = data || []

                     let tmp = this

                     this.$nextTick(() => {

                        tmp.$refs.trade.refInit(tmp.catgoryTree)

                     })

                     // let tmp = this

                     // this.$nextTick(() => {

                     //    tmp.$refs.trade.refInit(tmp.catgoryTree)

                     // })

                  }

                  this.$message.hideLoading()

               }

               //如果存在第一个分类，根据一级分类查询

               if(this.catgoryTree.length>0){

                  this.query.categoryRoot =this.catgoryTree[0].id

                  //然后刷新

                  this.refreshList('post')

						
               }

					
            }

            this.flg = '' + flg

            //如果没有加载数据，需要加载一下





         },

         changeType(item) {

            if(item.id!==this.query.categoryRoot){

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

               this.refreshList('post')

               //拼接二级分类，然后查询商品列表

            }

				
         },

         buttonSearchFlow() {



            // this.query.name = this.search_flow || ''

            this.refreshList('post')

         },

         async updateItemNum(item) {

            const res = await this.$message.confirm('', {

@@ -397,12 +528,19 @@
            }

         },



         toDetail(item) {

            uni.navigateTo({

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

            })

         },

      }

   }

</script>



<style lang="scss" scoped>

   .brand-detail {



      // min-height: 99vh;

      .brand-info {

         background: #FFFFFF;

         // border-radius: 40rpx 40rpx 0rpx 0rpx;

@@ -411,8 +549,57 @@
         overflow: hidden;

         overflow-y: scroll;

         padding: 40rpx 32rpx;

         height: calc(100vh - 650rpx);

         height: calc(100vh - 450rpx);

         padding-top: 0rpx;

			
         .type-list {

            max-width: 140rpx;

            min-width: 140rpx;

            background: #EEF7F5;

            border-radius: 8rpx;

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

            // max-height: calc(100vh - 600rpx);

            overflow-y: scroll;

            margin-right: 10rpx;

			
            .type-item {

               text-align: center;

               font-weight: 400;

               font-size: 24rpx;

               color: #000000;

               display: block;

               line-height: 60rpx;

               // padding-left: 30rpx;

               // padding-right: 30rpx;

            }

			
            .type-item.current {

               font-weight: 600;

               color: #04BA97;

            }

         }

         .flg-category.component-shop-item{

            .img{

               width: 140rpx;

               height: 140rpx;

               margin-top: 10rpx;

            }

            .info-container{

               .title {

                  margin-top: 0rpx;

               }

               .shop-name{

						
               }

               .other-info {

                  margin-bottom: 60rpx;

               }

               .bottom-buttons{

                      bottom: -50rpx;

               }

            }



         }



         .brand-info-0 {

            .top-title {