update 首页、我的、商品列表和详情的客服样式功能变更

xuxueyang

2024-10-22 79b196363a2a7fe0cc0b8d7aa176d9d930b408a1

 sub_pages/customer/trade/list.vue

@@ -1,443 +1,657 @@
<template>

   <!-- 列表页面 -->

   <view class="trade-list">

      <view class="category-detail flex" v-if="query.category">

         <view class="flex1 info">

            <view class="title flex">

               {{categoryInfo.name||'-'}}

               <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>

            </view>

            <view class="desc">

               规格：{{categoryInfo.unit || '暂无'}}

            </view>

            <view class="desc">

               颜色：{{categoryInfo.color || '暂无'}}

            </view>

         <!--    <view class="desc">

               包袋：棉袋

            </view> -->

         </view>

         <view class="info-price">

            <view class="title">当日均价</view>

            <view class="price">{{categoryInfo.avePrice||'暂无'}}</view>

            <view class="flex desc">

               <view class="m-l-a m-r-5">{{categoryInfo.avePriceDifference&&categoryInfo.avePriceDifference>=0?'+':''}}{{categoryInfo.avePriceDifference||0}}</view>

               <view class="m-r-a m-l-5">{{categoryInfo.avePriceDifferenceRate&&categoryInfo.avePriceDifferenceRate>=0?'+':''}}{{categoryInfo.avePriceDifferenceRate||0}}%</view>

            </view>

         </view>

      </view>

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

         <view>

            <!-- 查询条件 -->

            <view class="component-filter-container">

               <view class="flex1" @click.stop="order_show=true">

                  {{ query.columnStr || '排序' }}

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

               </view>

               <view class="flex1" @click.stop="level_show=true">

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

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

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

               <!--               </view>-->

               <view class="flex1" @click="showSelectParams" v-if="query.category">

                  筛选

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

               </view>

            </view>

         </view>

         <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>



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

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

               <image class="img img100"

                  :src="item.cover">

               </image>

               <view class="level">

                  {{item.levelStr||''}}

               </view>

            </view>



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

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

                  <view class="title">

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

                     <view class="price">

                        ￥{{item.price||0}}元/扎

                     </view>

                  </view>

                  <view class="shop-name">

                     {{item.supplierName}}

                  </view>

                  <view class="other-info flex">

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

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

                     </view>

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

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

                     </view>

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

                        {{item.unit}}

                     </view>

                  </view>

               </view>

               <view class="bottom-buttons  flex">



                  <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" 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 class="icon-shop" v-if="list&&list.length>0"

            @click="goto('/sub_pages/customer/shopping/shopping',true)">

            <!-- 购物图标 -->

            <!-- 如果有购买的东西，就要附带数字了 -->

            <view v-if="shoptotal>0" class="number">

               {{ shoptotal }}

            </view>

         </view>

      </view>



      <!-- 判断是否到底了，自动吧 -->

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





      <u-picker :show="level_show" @confirm="select_level" keyName="label" :columns="level_columns"

         @cancel="level_show=false"></u-picker>

      <u-picker :show="order_show" @confirm="select_order" keyName="label" :columns="order_columns"

         @cancel="order_show=false"></u-picker>



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

         <view class="component-popup_input_all" v-if="params">

            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>

            <!-- 输入框-->

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

               <view class="title topic-font" style="font-size: 40rpx;font-weight: 600;">{{ item.name }}</view>

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

                  <view class="value-item" @click="updateValue(item,each)" :class="[item.value===each?'cur':'']"

                     v-for="(each, j) in item.values" :key="j">

                     {{ each || '-' }}

                  </view>

               </view>

            </view>

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

            <view>

               <view class="button-green" style="background-color: #fff;color: #000;width: 200rpx;left: 40rpx;right: unset;"

                  @click="closeParamPopAndQuery">

                  查询

               </view>

					
               <view class="button-green"  style="width: 200rpx;right: 40rpx;left: unset;" @click="closeParamPop">关闭</view>

            </view>

         </view>

      </uni-popup>



   </view>

</template>



<script>

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



   export default {

      data() {

         return {

            query: {

               name: '',

               category: '',

               zoneId: '',

               levelStr: '',

               level: '',

               column: '',

               params: [],

               columnStr: '',

            },

            categoryInfo: {},

            params: [],



            shoptotal: 0,

            list: [],

            level_show: false,

            level_columns: [

               []

            ],



            order_show: false,

            order_columns: [

               []

            ]

         }

      },

      async onLoad(options) {

         // this.list = [{},{}]

         console.log('options', options)

         this.query.category = options.categoryId || ''

         this.query.zoneId = options.zoneId || ''

         this.query.name = options.name || ''

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

         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: ''

            })

         })

         if (this.query.category) {

            await this.getDetail()

         }



         // await this.getList('post')

         // this.

      },

      onReachBottom() {

         this.page.current += 1

         this.getMore('post')

      },

      async onPullDownRefresh() {

         this.page.current = 1

         await this.getList('post')

         uni.stopPullDownRefresh()

      },

      methods: {

         async getDetail() {

            this.$message.showLoading()

            //获取到分类的详情信息

            const {

               code,

               data

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

               params: {

                  id: this.query.category

               }

            })

            this.$message.hideLoading()

            if (code == 0) {

               this.categoryInfo = data || {}

            }

         },

         updateValue(item, value) {

            item.value = value

            this.$set(item, 'value', value)

            this.$forceUpdate()

         },

         closeParamPop() {

            this.$refs.popup_param.close()

         },

         closeParamPopAndQuery() {

            this.$refs.popup_param.close()

            //设置参数 
            this.query.params = []

            for (var param of this.params) {

               if (param.value) {

                  this.query.params.push({

                     id: param.id,

                     value: param.value

                  })

               }

            }

            this.refreshList('post')

         },

         async showSelectParams() {

            //得有分类才有参数

            this.$message.showLoading()

            const res = await this.$http.request('get', '/api/supplier/flower/params', {

               params: {

                  categoryId: this.query.category

               }

            })

            this.$message.hideLoading()

            if (res.code === 0) {

               // this.columns_params = res.data || []

               this.params = res.data || []

               this.$refs.popup_param.open()

            }



         },

         select_level(e) {

            this.level_show = false

            console.log('select_level',e)

            this.query.levelStr = e.value[0].label

            this.query.level = e.value[0].value

            this.refreshList('post')



         },

         select_order(e) {

            this.order_show = false

            this.query.columnStr = e.value[0].label

            this.query.column = e.value[0].value

            this.refreshList('post')



         },

         toDetail(item) {

            uni.navigateTo({

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

            })

         },

         // mulnum(item) {

         //   if (item.shopnum > 0) {

         //     item.shopnum -= 1

         //   }

         //   this.shoptotal -= 1

         //   this.$forceUpdate()

         //

         // },

         async addnum(item, addnum) {

            if (!this.currentInfo.id) {

               await this.$message.confirm('请前往登录')

               uni.navigateTo({

                  url: '/pages/user/supplier-user'

               })

               return

            }

            if (!item.shopnum) {

               item.shopnum = 0

            }

            if (item.shopnum + addnum >= 0) {



            } else {

               return

            }

            this.$message.showLoading()

            const {

               code

            } = await http.request('post', '/api/customer/flower/cart/change-num', {

               data: {

                  id: item.id,

                  num: addnum

               }

            })

            this.$message.hideLoading()

            if (code === 0) {

               item.shopnum += addnum

            }

            this.$forceUpdate()

         },

      }

   }

</script>



<style lang="scss">

   .trade-list {

      padding: 24rpx 30rpx;



      .category-detail {

         padding: 22rpx 38rpx;

         margin-bottom: 10rpx;

         background-color: #E1F0E7;

         border-radius: 8rpx;



         .info {

            .title {

               font-weight: 600;

               font-size: 36rpx;

               color: #000000;

               line-height: 44rpx;

            }



            .icon-kf {

               width: 44rpx;

               height: 44rpx;

            }



            .desc {

               font-weight: 400;

               font-size: 24rpx;

               color: #666666;

               line-height: 34rpx;

               margin-top: 8rpx;

            }

         }



         .info-price {

            padding: 22rpx;

            text-align: center;

            background: #FFFFFF;

            border-radius: 8rpx;

            min-width: 260rpx;



            .title {

               font-weight: 400;

               font-size: 24rpx;

               color: #000000;

               line-height: 34rpx;

            }



            .price {

               font-weight: 600;

               font-size: 32rpx;

               color: #BF0000;

               line-height: 44rpx;

               margin-top: 12rpx;

            }



            .desc {

               font-weight: 400;

               font-size: 24rpx;

               color: #666666;

               line-height: 34rpx;

               margin-top: 12rpx;

            }

         }

      }





      .icon-shop {

         position: absolute;

         position: fixed;



         background-image: url('../../../static/images/customer/gwc.png');

         width: 140rpx;

         height: 140rpx;

         // box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);

         border-radius: 50%;

         right: 40rpx;

         bottom: 300rpx;

         background-size: 100% 100%;



         .number {

            width: 30rpx;

            height: 30rpx;

            background: #F20000;

            line-height: 30rpx;

            text-align: center;

            position: absolute;

            right: 14rpx;

            top: 14rpx;

            color: #FFFFFF;

            border-radius: 50%;

            font-size: 24rpx;

         }



      }



   }

<template>
   <!-- 列表页面 -->
   <view class="trade-list">
      <view class="category-detail flex" v-if="query.category">
         <view class="flex1 info">
            <view class="title flex">
               <view class="component-button-contact">
                  {{categoryInfo.name||'-'}}
               </view>
            </view>
            <view class="desc">
               规格：{{categoryInfo.unit || '暂无'}}
            </view>
            <view class="desc">
               颜色：{{categoryInfo.color || '暂无'}}
            </view>
            <!--    <view class="desc">
               包袋：棉袋
            </view> -->
         </view>
         <view class="info">
            <button open-type="contact" class="component-button-contact">
               <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-5 m-r-15 img100"></image>
            </button>
         </view>
         <view class="info-price">
            <view class="title">当日均价</view>
            <view class="price">{{categoryInfo.avePrice||'暂无'}}</view>
            <view class="flex desc">
               <view class="m-l-a m-r-5">
                  {{categoryInfo.avePriceDifference&&categoryInfo.avePriceDifference>=0?'+':''}}{{categoryInfo.avePriceDifference||0}}
               </view>
               <view class="m-r-a m-l-5">
                  {{categoryInfo.avePriceDifferenceRate&&categoryInfo.avePriceDifferenceRate>=0?'+':''}}{{categoryInfo.avePriceDifferenceRate||0}}%
               </view>
            </view>
         </view>
      </view>
      <view class="" style="min-height: calc(100vh - 260rpx);">
         <view>
            <!-- 查询条件 -->
            <view class="component-filter-container">
               <!-- order_show=true -->
               <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" @click.stop="$refs.popup_level.open()">
                  {{ query.levelStr || '级别' }}
                  <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">-->
               <!--                  颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>-->
               <!--               </view>-->
               <view class="flex1" @click="showSelectParams" v-if="query.category">
                  筛选
                  <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
               </view>
            </view>
         </view>
         <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>

         <view class="component-shop-item flex" v-for="(item,index) of list" :key="index">
            <view class="img" @click.stop="toDetail(item)">
               <image class="img img100" :class="[!item.stock?'component-stock-zero':'']" :src="item.cover">
               </image>
               <view class="level">
                  {{item.levelStr||''}}
               </view>
            </view>

            <view class="m-l-12 info-container flex1">
               <view @click.stop="toDetail(item)">
                  <view class="title">
                     <view style="max-width: 200rpx;word-break: break-all;">{{item.name||'-'}}</view>
							
                     <view class="price component-price-new">
                        <span class="tip">会员价</span>￥<span class="p">{{item.priceMember||item.price}}</span>/扎
                        <view class="component-price-old">
                           ￥{{item.price}}/扎
                        </view>
                     </view>

							
                  </view>
                  <view class="tags" v-if="item.tags">
                     <!--    <view class="tag red">限时抢购</view>
                     <view class="tag green">品质严选</view> -->
                     <view class="tag red" v-for="(tag,k) of item.tagArr" :class="[k===0?'red':'green']"
                        :key="tag">{{
                       tag
                     }}
                     </view>
                  </view>
                  <view class="shop-name">
                     {{item.supplierName}}
                  </view>
                  <view class="other-info flex">
                     <view class="m-r-15">
                        已售:{{ ((item.sales||0) +(item.realSales||0))   ||0}}
                     </view>
                     <view class="m-r-15">
                        剩余:{{item.stock||0}}
                     </view>
                     <view class="m-r-15">
                        {{item.unit}}
                     </view>
                     <view class="m-r-15" v-if="item.limited && item.limited>0">
                        限购数量:{{item.limited||'-'}}
                     </view>
                  </view>
               </view>
               <view class="bottom-buttons  flex">

                  <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" 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 class="icon-shop" v-if="list&&list.length>0" @click="toShopping">
            <!-- 购物图标 -->
            <!-- 如果有购买的东西，就要附带数字了 -->
            <view v-if="shoptotal>0" class="number">
               {{ shoptotal }}
            </view>
         </view>
      </view>

      <!-- 判断是否到底了，自动吧 -->
      <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>


      <u-picker :show="level_show" @confirm="select_level" keyName="label" :columns="level_columns"
         @cancel="level_show=false"></u-picker>
      <u-picker :show="order_show" @confirm="select_order" keyName="label" :columns="order_columns"
         @cancel="order_show=false"></u-picker>

      <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>
      <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_param" type="bottom">
         <view class="component-popup_input_all" v-if="params">
            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>
            <!-- 输入框-->
            <view v-for="(item,i) in params" :key="i" class="m-t-20">
               <view class="title topic-font" style="font-size: 40rpx;font-weight: 600;">{{ item.name }}</view>
               <view class="m-t-12 flex value-items">
                  <view class="value-item" @click="updateValue(item,each)"
                     :class="[item.value.indexOf(each)>=0?'cur':'']" v-for="(each, j) in item.values" :key="j">
                     {{ each || '-' }}
                  </view>
               </view>
            </view>
            <view class="button-space"></view>
            <view>
               <view class="button-green"
                  style="background-color: #fff;border: 2rpx solid #666; color: #666;min-width: 240rpx;left: 40rpx;right: unset;"
                  @click="closeParamPop">
                  关闭
               </view>

               <view class="button-green" style="min-width: 240rpx;right: 40rpx;left: unset;"
                  @click="closeParamPopAndQuery">查询
               </view>
            </view>
         </view>
      </uni-popup>

   </view>
</template>

<script>
   import http from "../../../plugins/http";

   export default {
      data() {
         return {
            query: {
               name: '',
               category: '',
               zoneId: '',


               params: [],
               supplierName: '',
               columnStr: '',
               column: '',
               levelStr: '',
               level: '',
               supplierId: '',
            },
            categoryInfo: {},
            params: [],

            shoptotal: 0,
            list: [],
            level_show: false,
            level_columns: [
               []
            ],

            order_show: false,
            order_columns: [
               []
            ]
         }
      },
      // #ifdef PUB_CUSTOMER
      onShareAppMessage() {
         let that = this;
         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/trade/list?categoryId=${this.query.category}&zoneId=${this.query.zoneId}&name=${this.query.name}&supplierName=${this.query.supplierName}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数
         return {
            title: "花满芫-商品列表",
            path: url,
         }
      },
      onShareTimeline() {
         let that = this;
         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/trade/list?categoryId=${this.query.category}&zoneId=${this.query.zoneId}&name=${this.query.name}&supplierName=${this.query.supplierName}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数
         return {
            title: "花满芫-商品列表",
            path: url,
         }
      },
      // #endif
      async onLoad(options) {
         // this.list = [{},{}]
         console.log('options', options)
         this.query.category = options.categoryId || options.category || ''
         this.query.zoneId = options.zoneId || ''
         this.query.name = options.name || ''
         this.query.supplierName = options.supplierName || ''
         this.query.supplierId = options.supplierId || ''


         if (this.query.name) {
            uni.setNavigationBarTitle({
               title: '商品列表-' + this.query.name
            })
         }
         if (this.query.supplierName) {
            uni.setNavigationBarTitle({
               title: '商品列表-' + this.query.supplierName
            })
         }
         this.listApi = '/api/customer/flower/list'
         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: ''
            })
         })
         if (this.query.category) {
            await this.getDetail()
         }
         this.refreshShopNum()

         // await this.getList('post')
         // this.
      },
      onReachBottom() {
         this.getMore('post')
      },
      async onPullDownRefresh() {
         this.page.current = 1
         await this.getList('post')
         uni.stopPullDownRefresh()
      },
      async onShow() {
         if (this.sign['shopnum']) {
            await this.$store.dispatch('sign_clear', 'shopnum');
            //重新获取商品数目
            //只需要刷新列表的部分信息即可
            this.getList('post')
         }
         this.refreshShopNum()
      },
      methods: {
         getList_after() {
            if (this.list) {
               for (var item of this.list) {
                  item.tagArr = []
                  if (item.tags) {
                     item.tagArr = item.tags.split(",") || []
                  }
               }
            }
         },
         async refreshShopNum() {
            this.shoptotal = await this.$store.dispatch('countShopping');
         },
         async getDetail() {
            this.$message.showLoading()
            //获取到分类的详情信息
            const {
               code,
               data
            } = await this.$http.request('get', '/api/customer/flower/category/tree/view', {
               params: {
                  id: this.query.category
               }
            })
            this.$message.hideLoading()
            if (code == 0) {
               this.categoryInfo = data || {}
            }
         },
         updateValue(item, value) {
            // item.value = value
            // this.$set(item, 'value', value)
            if (item.name == '优点' || item.name === '缺点') {
               if (item.value.indexOf(value) < 0) {
                  item.value.push(value)
               } else {
                  item.value.splice(item.value.indexOf(value), 1)
               }
            } else {
               //单选
               item.value = [value]
            }

            this.$forceUpdate()
         },
         closeParamPop() {
            this.$refs.popup_param.close()
         },
         closeParamPopAndQuery() {
            this.$refs.popup_param.close()
            //设置参数 
            this.query.params = []
            for (var param of this.params) {
               if (param.value && param.value.length > 0) {
                  this.query.params.push({
                     id: param.id,
                     value: param.value.join(',')
                  })
               }
            }
            this.refreshList('post')
         },
         async showSelectParams() {
            //得有分类才有参数
            this.$message.showLoading()
            const res = await this.$http.request('get', '/api/customer/flower/params', {
               params: {
                  categoryId: this.query.category
               }
            })
            this.$message.hideLoading()
            if (res.code === 0) {
               // this.columns_params = res.data || []
               this.params = res.data || []
               for (var k of this.params) {
                  if (!k.value) {
                     k.value = []
                  } else {
                     k.value = k.value.split(',') || []
                  }
               }
               this.$refs.popup_param.open()
            }

         },
         select_level(e) {
            this.level_show = false
            console.log('select_level', e)
            this.query.levelStr = e.value[0].label
            this.query.level = e.value[0].value
            this.refreshList('post')

         },
         select_order(e) {
            this.order_show = false
            this.query.columnStr = e.value[0].label
            this.query.column = e.value[0].value
            this.refreshList('post')

         },
         toShopping() {
            if (!this.currentInfo.id) {
               // await this.$message.confirm('请前往登录')
               uni.navigateTo({
                  url: '/pages/login/supplier-login?source=jump'
               })
               return
            }
            //直接强制购物车
            uni.reLaunch({
               url: '/sub_pages/customer/shopping/shopping'
            })
         },
         toDetail(item) {
            uni.navigateTo({
               url: `/sub_pages/customer/trade/detail?id=${item.id}`
            })
         },
         // mulnum(item) {
         //   if (item.shopnum > 0) {
         //     item.shopnum -= 1
         //   }
         //   this.shoptotal -= 1
         //   this.$forceUpdate()
         //
         // },
         async addnum(item, addnum) {
            if (!this.currentInfo.id) {
               // await this.$message.confirm('请前往登录')
               uni.navigateTo({
                  url: '/pages/login/supplier-login?source=jump'
               })
               return
            }
            if (!item.stock) {
               item.stock = 0
            }
            if (!item.shopnum) {
               item.shopnum = 0
            }
            if (addnum > 0 & item.shopnum + addnum > item.stock) {
               this.$message.showToast('库存不足，无法修改')
               return
            }

            if (item.shopnum + addnum >= 0) {

            } else {
               return
            }
            this.$message.showLoading()
            const {
               code
            } = await this.$http.request('post', '/api/customer/flower/cart/change-num', {
               data: {
                  id: item.id,
                  num: addnum
               }
            })
            this.$message.hideLoading()
            if (code === 0) {
               item.shopnum += addnum
               this.$forceUpdate()

               this.refreshShopNum()

            }
         },
      }
   }
</script>

<style lang="scss">
   .trade-list {
      padding: 24rpx 30rpx;

      .tags {
         margin-top: 12rpx;
         display: flex;

         .tag {
            // min-width: 60rpx;
            padding-left: 10rpx;
            padding-right: 10rpx;
            line-height: 30rpx;
            background: #FEE6E6;
            border-radius: 10rpx;
            font-size: 18rpx;
            color: #CD1212;
            margin-right: 6rpx;
            text-align: center;
         }
			
         .tag.green {
            color: rgba(110, 159, 102, 1);
            background: rgba(202, 229, 214, 1);
            border-radius: 10rpx;
            // opacity: 0.57;
         }
      }

      .category-detail {
         padding: 22rpx 38rpx;
         margin-bottom: 10rpx;
         background-color: #E1F0E7;
         border-radius: 8rpx;

         .info {
            .title {
               font-weight: 600;
               font-size: 36rpx;
               color: #000000;
               line-height: 44rpx;
            }

            .icon-kf {
               width: 44rpx;
               height: 44rpx;
               width: 90rpx;
               height: 90rpx;
            }

            .desc {
               font-weight: 400;
               font-size: 24rpx;
               color: #666666;
               line-height: 34rpx;
               margin-top: 8rpx;
            }
         }



         .info-price {
            padding: 22rpx;
            text-align: center;
            background: #FFFFFF;
            border-radius: 8rpx;
            min-width: 260rpx;

            .title {
               font-weight: 400;
               font-size: 24rpx;
               color: #000000;
               line-height: 34rpx;
            }

            .price {
               font-weight: 600;
               font-size: 32rpx;
               color: #BF0000;
               line-height: 44rpx;
               margin-top: 12rpx;
            }

            .desc {
               font-weight: 400;
               font-size: 24rpx;
               color: #666666;
               line-height: 34rpx;
               margin-top: 12rpx;
            }
         }
      }


      .icon-shop {
         position: absolute;
         position: fixed;

         background-image: url('../../../static/images/customer/gwc.png');
         width: 140rpx;
         height: 140rpx;
         // box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);
         border-radius: 50%;
         right: 40rpx;
         bottom: 300rpx;
         background-size: 100% 100%;

         .number {
            width: 30rpx;
            height: 30rpx;
            background: #F20000;
            line-height: 30rpx;
            text-align: center;
            position: absolute;
            right: 14rpx;
            top: 14rpx;
            color: #FFFFFF;
            border-radius: 50%;
            font-size: 24rpx;
         }

      }

   }
</style>