1.商品评论优化

陶杰

2024-10-16 c337b40f1052733c86696cf3dbeb44ad8bf2a73d

 sub_pages/customer/shop/shop.vue

@@ -1,518 +1,1009 @@
<template>

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

               <view>

                  <view class="store-name">{{dto.name}}</view>

                  <view class="store-address">

                     {{ ((dto.province||'')+  (dto.city&&'-'||'') + (dto.city||'')+  (dto.region&&'-'||'')+(dto.region||'')) ||dto.address || '暂无详细地址'}}

                  </view>

               </view>

               <view class="store-sc m-l-a m-r-0" @click="updateGz(!dto.followed)">

                  <view class="icon-view">

                     <image src="../../../static/icon-gz-1.png" class="icon" v-if="dto.followed"></image>

                     <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.followed"></image>

                  </view>

                  <view>{{dto.followed?'取消':'关注'}}</view>

               </view>

               <!--         <view class="store-sc m-l-a m-r-0" @click="updateGz(!dto.followed)">

          <image src="../../../static/icon-gz-1.png" class="icon" v-if="dto.followed"

                 ></image>

          <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.followed"

                 ></image>

          关注

        </view> -->

            </view>

         </view>

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

            <view class="form-item">

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

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

            </view>

            <view class="form-item">

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

               <view class="label">获赞</view>

            </view>

            <view class="form-item">

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

               <view class="label">粉丝</view>

            </view>

            <view class="form-item">

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

               <view class="label">关注</view>

            </view>

         </view>

         <view class="p10" style="padding-left: 20rpx;padding-right: 20rpx;">

            <top-tabs :tabs="tabs" :flg="flg" @change="changeTab">



            </top-tabs>

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

                  排序

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

            <view class="top-title">

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

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

               </view>



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

                  <view class="title">

                     {{item.name}}

                     <view class="price">

                        ￥{{item.price}}/扎

                     </view>

                  </view>

                  <view class="shop-name">

                     {{item.categoryStr}}

                  </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 class="bottom-buttons  flex">

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

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

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

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

                        <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 v-if="flg==='1'" class="brand-info-1">

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

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

            <!-- catgoryTree -->



         </view>

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

            <view class="title">

               基础信息

            </view>

            <view class="form-input flex">

               <view class="label ">经营模式</view>

               <view class="value">供应商</view>

            </view>

            <view class="form-input flex">

               <view class="label ">商家详细</view>

               <view class="value">{{dto.address || '暂无'}}</view>

            </view>

            <view class="form-input flex">

               <view class="label ">商家介绍</view>

               <view class="value">{{dto.description || '-'}}</view>

            </view>

            <view class="form-input flex">

               <view class="label">身份认证</view>

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

            </view>

         </view>

      </view>





   </view>

</template>



<script>

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

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



   export default {

      components: {

         trade,

      },

      data() {

         return {

            search_flow: '',

            flg: '0',

            tabs: [{

                  name: '全部商品'

               },

               {

                  name: '分类'

               },

               // {

               //    name: '评价'

               // },

               {

                  name: '商家'

               },

            ],

            dto: {},

            list: [],

            id: '',

            catgoryTree: undefined,

         }

      },

      onLoad(options) {

         this.id = options.id || ''

         // this.page.size =

         if (this.id) {

            this.getDetail()

         }

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

         this.query.supplierId = this.id

         this.getList('post')

      },

      // #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/shop/shop?id=${this.id}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数

         return {

            title: this.dto.id && this.dto.name ? (this.dto.name + " 的店铺") : "花满芫",

            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/shop/shop?id=${this.id}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数

         return {

            title: this.dto.id && this.dto.name ? (this.dto.name + " 的店铺") : "花满芫",

            path: url,

         }

      },

      // #endif

      onReachBottom() {

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

            this.getMore('post')

         }

      },

      methods: {



         async getDetail() {

            {

               this.$message.showLoading()

               const {

                  code,

                  data

               } = await this.$http.request('get', `/api/pub/supplier/detail/${this.id}`, {

                  params: {}

               })

               if (code === 0) {

                  this.dto = {

                     ...data,

                  }

               }



               this.$message.hideLoading()

            }

            //获取商家下的商品列表



            // {

            //    this.$message.showLoading()

            //    const {

            //       code,

            //       data

            //    } = await this.$http.request('post', `/api/customer/flower/list`, {

            //       data: {

            //          supplierId: this.id,

            //          size: 20

            //       }

            //    })

            //    if (code === 0) {

            //       this.list = data.records || []

            //    }



            //    this.$message.hideLoading()

            // }



         },

         //update 关注

         async updateGz(type) {

            if (!this.currentInfo.id) {

               this.$message.showToast('请先登录')

               return

            }

            this.$message.showLoading()

            const {

               code

            } = await this.$http.request(type ? 'post' : 'get', `/api/follow/${type ? 'add' : 'delete'}`, {

               data: {

                  supplierId: this.dto.supplierId || this.dto.id

               },

               params: {

                  supplierId: this.dto.supplierId || this.dto.id

               }

            })

            if (code === 0) {

               this.dto.followed = !this.dto.followed

               await this.$store.dispatch('sign_add', 'follow')

               this.$forceUpdate()

            }

            this.$message.hideLoading()





         },

         async changeTab(flg) {

            console.log('changeTab', flg)

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

               if (!this.catgoryTree) {

                  this.$message.showLoading()

                  const {

                     code,

                     data

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

                     data: {

                        supplierId: this.dto.supplierId || this.dto.id

                     },

                     params: {

                        supplierId: this.dto.supplierId || this.dto.id

                     }

                  })

                  if (code === 0) {

                     // data 分类树

                     this.catgoryTree = data || []

                     let tmp = this

                     this.$nextTick(() => {

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

                     })

                  }

                  this.$message.hideLoading()

               }

            }

            this.flg = '' + flg

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





         },

         buttonSearchFlow() {



         },

         async updateItemNum(item) {

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

               editable: true,

               title: '请输入想要购买的数量'

            })

            if (res.content && res.confirm) {

               // 发送请求

               var t = parseInt(res.content)

               if (isNaN(t) || t < 0) {

                  this.$message.showToast('数目需要大于等于0')



               } else {

                  if (!item.stock || t > item.stock) {

                     this.$message.showToast('库存不足无法修改')

                     return

                  }

                  this.addnum(item, (t - item.shopnum))



               }

            } else {



            }

         },

         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.stock) {

               item.stock = 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()

            }

         },



      }

   }

</script>



<style lang="scss" scoped>

   .brand-detail {

      .brand-info {

         background: #FFFFFF;

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

         border-top-left-radius: 40rpx;

         border-top-right-radius: 40rpx;

         overflow: hidden;

         overflow-y: scroll;

         padding: 40rpx 32rpx;

         height: calc(100vh - 650rpx);

         padding-top: 0rpx;



         .brand-info-0 {

            .top-title {

               height: 60rpx;

               background: #E4ECE8;

               border-radius: 4rpx;

               font-weight: 400;

               font-size: 24rpx;

               color: #779787;

               margin-top: 10rpx;

               line-height: 60rpx;

               padding-left: 20rpx;

            }

         }



         .brand-info-1 {

            // padding: 40rpx 30rpx;



         }



         .brand-info-3 {

            padding: 40rpx 30rpx;



            .title {

               font-weight: 600;

               font-size: 32rpx;

               color: #000000;

               line-height: 44rpx;

               margin-bottom: 20rpx;

            }



            .form-input {

               display: flex;

               border-bottom: 2rpx solid #EEEEEE;

               line-height: 80rpx;



               .label {

                  font-weight: 600;

                  font-size: 28rpx;

                  color: #000000;

               }



               .value {

                  font-weight: 400;

                  font-size: 28rpx;

                  color: #666666;

                  margin-left: auto;

                  margin-right: 0;



                  text-align: right;



                  .check {

                     background: #20613D;

                     border-radius: 4rpx;

                  }

               }

            }

         }

      }



      .brand-top-info {

         background-image: url('https://hmy-flower.oss-cn-shanghai.aliyuncs.com/37/37dc02b58bd44af79e45031af2bb6c0b%E4%BD%8D%E5%9B%BE@2x.png');

         background-size: 100% 100%;



         .tj-info {

            display: flex;



            .form-item {

               flex: 1;

               text-align: center;



               .label {

                  font-weight: 400;

                  font-size: 32rpx;

                  color: #FFFFFF;

                  line-height: 44rpx;

               }



               .value {

                  font-weight: 600;

                  font-size: 48rpx;

                  color: #FFFFFF;

                  line-height: 66rpx;



               }

            }

         }



         .search-container {

            display: flex;

            margin: 12rpx 0rpx 20rpx 0rpx;

            position: relative;

            z-index: 1;



            .input {



               background-color: #fff !important;



               border-radius: 8rpx;

            }



         }

      }

   }

<template>
   <view class="brand-detail" style="background: #20613D;">

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

         <view class="info-brand m-t-12" v-if="id">
            <view class="flex">
               <image class="store-logo" :src="dto.cover"></image>
               <view>
                  <view class="store-name">{{dto.name}}</view>
                  <view class="store-address">
                     {{ ((dto.province||'')+  (dto.city&&'-'||'') + (dto.city||'')+  (dto.region&&'-'||'')+(dto.region||'')) ||dto.address || '暂无详细地址'}}
                  </view>
               </view>
               <view class="store-sc m-l-a m-r-0" @click="updateGz(!dto.followed)">
                  <view class="icon-view">
                     <image src="../../../static/icon-gz-1.png" class="icon" v-if="dto.followed"></image>
                     <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.followed"></image>
                  </view>
                  <view>{{dto.followed?'取消':'关注'}}</view>
               </view>
               <!--         <view class="store-sc m-l-a m-r-0" @click="updateGz(!dto.followed)">
          <image src="../../../static/icon-gz-1.png" class="icon" v-if="dto.followed"
                 ></image>
          <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.followed"
                 ></image>
          关注
        </view> -->
            </view>
         </view>
         <view class="tj-info m-t-12">
            <view class="form-item">
               <view class="value">{{page.total || 0}}</view>
               <view class="label">发布</view>
            </view>
            <view class="form-item">
               <view class="value">{{ '0'}}</view>
               <view class="label">获赞</view>
            </view>
            <view class="form-item">
               <view class="value">{{dto.fans || '0'}}</view>
               <view class="label">粉丝</view>
            </view>
            <!-- <view class="form-item">
               <view class="value">0</view>
               <view class="label">关注</view>
            </view> -->
         </view>
         <view class="p10" style="padding-left: 20rpx;padding-right: 20rpx;">
            <top-tabs :tabs="tabs" :flg="flg" @change="changeTab">

            </top-tabs>
         </view>
      </view>
      <view class="brand-info">
         <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" @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 m-t-12" v-show="flg==='0'">
               报价已包含打包费、材料费、交易佣金
            </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" @click.stop="toDetail(item)">
                           {{item.name}}
                           <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||false" @click.stop="toDetail(item)">
                           <!--       <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" @click.stop="toDetail(item)">
                        {{item.categoryStr}}
                     </view> -->
                        <view class="other-info flex" @click.stop="toDetail(item)">
                           <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>
                        <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>
                           <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-show="flg==='2'" class="brand-info-1">
            <!-- <trade :hidefooter="true" :supplierId="id" :catgoryTree="catgoryTree" v-if="catgoryTree" ref="trade">
            </trade> -->
						
            <view class="m-t-12" style="text-align: center;">
					
               <span style="">综合评分<span style="color: #F8353A; margin-left: 5px;">{{comment.avg}}</span> </span>
					
            </view>
            <view class="m-t-12">
				
               <view v-for="(item,index) of commentList" >
                  <u-row justify="space-between"  >
                     <u-col>
                        <view style="display: flex; justify-content: flex-start; align-items: center;padding: 5rpx;">
                           <u--image v-if="item.anonymityFalg==1 " :showLoading="true"
                           src="https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png" width="30px" height="30px"  shape="circle"></u--image>
                           <u--image v-else :showLoading="true" :src="item.customerCover" width="30px" height="30px"  shape="circle"></u--image>
                           <span v-if="item.anonymityFalg==1 " >匿名用户</span>
                           <span v-else>{{item.customerName}}</span>
                        </view>
                     </u-col>
						
                  <!--    <u-col span="4">
                        <view style="font-size: 12px; margin-right: 10px; text-align: right;">{{item.updateTime}}</view>
                     </u-col> -->
                  </u-row>
                  <u-row justify="space-between"   class="flower-comment">
                     <u-col span="2"></u-col>
                     <u-col span="10">
                        <view class="rate">
                           <u-rate count="5" v-model="item.commentGrade" readonly size="30"></u-rate>
                           <view style="font-size: 12px; margin-right: 10px; text-align: right;">{{item.updateTime}}</view>
                        </view>
                        <view> 		
                           <view>
                              <span class="flower-unit" >{{item.flowerName}} &nbsp; {{item.flowerLevel}}</span>
                              <span class="comment">
                                 {{item.comment}}
                              </span>
                           </view>
                           <view class="img-v" >
                           <!--    <u--image v-for="(commentImg,index2) of item.commentImagesList" :key="index2" class="comment-img" 
                              :showLoading="true" :src="commentImg"></u--image> -->
										
                              <image v-for="(commentImg,index2) of item.commentImagesList" :key="index2" :src="commentImg" class="comment-img" @click="previewImg(commentImg)"></image>
                           </view>
								
                         </view>
                         <!-- 平台回复 -->
                         <view class="comment-replay" v-if="item.replayContent"> 
                           平台回复：{{item.replayContent}}
                         </view>
                     </u-col>
                  </u-row>
						
               </view>
					
					
				
				
            </view>
				
         </view>
			
         <view v-if="flg==='3'" class="brand-info-3">
            <view class="title">
               基础信息
            </view>
            <view class="form-input flex">
               <view class="label ">经营模式</view>
               <view class="value">供应商</view>
            </view>
            <view class="form-input flex">
               <view class="label ">商家详细</view>
               <view class="value">{{dto.address || '暂无'}}</view>
            </view>
            <view class="form-input flex">
               <view class="label ">商家介绍</view>
               <view class="value">{{dto.description || '-'}}</view>
            </view>
            <view class="form-input flex">
               <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 './shop-trade.vue'
   import http from "../../../plugins/http";

   export default {
      components: {
         trade,
      },
      data() {
         return {
            comment:{
               avg:0,
               commentAmount:0,
            },
            commentList:[],
            commentPage:{
               size: 10,
               current: 1,
               total: 0,
            },
            // search_flow: '',
            flg: '0',
            tabs: [{
                  name: '全部商品'
               },
               {
                  name: '分类'
               },
               {
                  name: '评价'
               },
               {
                  name: '商家'
               },
            ],
            dto: {},
            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')
      },
      async onPullDownRefresh() {
         if (this.id) {
            await this.getDetail()
         }
         await this.refreshList('post')
         uni.stopPullDownRefresh()
			
         if(this.flg=="2"){
            // 评论相关下拉刷新
            this.getCommentsStatis()
				
            this.commentList=[]
            this.commentPage.current=1
            this.getComments()
         }
			
      },
      onLoad(options) {
			
         this.id = options.id || ''
         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: ''
            })
         })
			
			
         this.getCommentsStatis()
			
			
      },
      // #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/shop/shop?id=${this.id}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数
         return {
            title: this.dto.id && this.dto.name ? (this.dto.name + " 的店铺") : "花满芫",
            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/shop/shop?id=${this.id}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数
         return {
            title: this.dto.id && this.dto.name ? (this.dto.name + " 的店铺") : "花满芫",
            path: url,
         }
      },
      // #endif
      onReachBottom() {
         console.log("下拉")
         // if (this.flg === '0') {
         //    this.getMore('post')
         // }
         if (this.flg ==2) {
            // debugger;
            // this.listApi="/api/v2/flower-comment/page"
            // this.query={
            //    supplierId:this.id 
            // }
            // this.getMore()
            this.commentPage.current++
            this.getComments()
         }
      },
      methods: {
			
         async getCommentsStatis() {
            {
               this.$message.showLoading()
			
               const {
                  code,
                  data
               } = await this.$http.request('get', `/api/v2/flower-comment/statis/${this.id}`, {
                  params: {}
               })
               if (code === 0) {
                  this.comment=data
                  this.tabs[2].name=`评价(${this.comment.commentAmount})`
               }
			
               this.$message.hideLoading()
            }
			
         },
			
         async getComments() {
			
            {
               this.$message.showLoading()
               const params={
                  l:0,
                  supplierId:this.id ,
                  ...this.commentPage,
               }
               const {
                  code,
                  data
               } = await this.$http.request('get', `/api/v2/flower-comment/page`, {
                  params: params
               })
               if (code === 0) {
                  // this.commentList=data.records
                  this.commentPage.current=data.current
                  this.commentPage.pages=data.pages
                  this.commentPage.size=data.size
                  this.commentPage.total=data.total
                  // this.commentList = data.records.map(item => {
                  //   return {
                  //     ...item,
                  //     commentImagesList: item.commentImages ? JSON.parse(item.commentImages) : [] // 将字符串转换成数组
                  //   };
                  // });
                  data.records.forEach(item => {
                      const commentImagesList = item.commentImages ? JSON.parse(item.commentImages) : [];
                      const existingCommentIndex = this.commentList.findIndex(comment => comment.id === item.id);
						    
                      if (existingCommentIndex !== -1) {
                          // 更新已存在的评论
                          this.commentList[existingCommentIndex] = {
                              ...this.commentList[existingCommentIndex],
                              ...item,
                              commentImagesList,
                           updateTime: item.updateTime ? this.formatUpdateTime(item.updateTime) : null
                          };
                      } else {
                          // 新增评论
                          this.commentList.push({
                              ...item,
                              commentImagesList,
                           updateTime: item.updateTime ? this.formatUpdateTime(item.updateTime) : null
                          });
                      }
                     console.log("评论列表：")
                     console.log(this.commentList)
                   });

               }
			
               this.$message.hideLoading()
            }
			
         },
         formatUpdateTime(time) {
		
             if (!time) return ''; // 如果时间为空，直接返回空字符串
             const date = new Date(time);
			
             // 格式化为 "YYYY-MM-DD HH:mm" 形式
             const year = date.getFullYear();
             const month = (date.getMonth() + 1).toString().padStart(2, '0');
             const day = date.getDate().toString().padStart(2, '0');
             const hours = date.getHours().toString().padStart(2, '0');
             const minutes = date.getMinutes().toString().padStart(2, '0');
			
             return `${year}-${month}-${day} ${hours}:${minutes}`;
         },
			
         getList_after() {
            if (this.list) {
               for (var item of this.list) {
                  item.tagArr = []
                  if (item.tags) {
                     item.tagArr = item.tags.split(",") || []
                  }
               }
            }
         },

         async getDetail() {
            {
               this.$message.showLoading()
               const {
                  code,
                  data
               } = await this.$http.request('get', `/api/pub/supplier/detail/${this.id}`, {
                  params: {}
               })
               if (code === 0) {
                  this.dto = {
                     ...data,
                  }
               }

               this.$message.hideLoading()
            }
            //获取商家下的商品列表

            // {
            //    this.$message.showLoading()
            //    const {
            //       code,
            //       data
            //    } = await this.$http.request('post', `/api/customer/flower/list`, {
            //       data: {
            //          supplierId: this.id,
            //          size: 20
            //       }
            //    })
            //    if (code === 0) {
            //       this.list = data.records || []
            //    }

            //    this.$message.hideLoading()
            // }

         },
         //update 关注
         async updateGz(type) {
            if (!this.currentInfo.id) {
               this.$message.showToast('请先登录')
               return
            }
            this.$message.showLoading()
            const {
               code
            } = await this.$http.request(type ? 'post' : 'get', `/api/follow/${type ? 'add' : 'delete'}`, {
               data: {
                  supplierId: this.dto.supplierId || this.dto.id
               },
               params: {
                  supplierId: this.dto.supplierId || this.dto.id
               }
            })
            if (code === 0) {
               this.dto.followed = !this.dto.followed
               await this.$store.dispatch('sign_add', 'follow')
               this.$forceUpdate()
            }
            this.$message.hideLoading()


         },
         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 {
                     code,
                     data
                  } = await this.$http.request('get', `/api/customer/flower/category/tree`, {
                     data: {
                        supplierId: this.dto.supplierId || this.dto.id
                     },
                     params: {
                        supplierId: this.dto.supplierId || this.dto.id
                     }
                  })
                  if (code === 0) {
                     // data 分类树
                     this.catgoryTree = data || []
                     // 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')

               }

            }
			
            if(flg=="2"){
               this.getCommentsStatis()
               this.getComments()
            }
				
            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('', {
               editable: true,
               title: '请输入想要购买的数量'
            })
            if (res.content && res.confirm) {
               // 发送请求
               var t = parseInt(res.content)
               if (isNaN(t) || t < 0) {
                  this.$message.showToast('数目需要大于等于0')

               } else {
                  if (!item.stock || t > item.stock) {
                     this.$message.showToast('库存不足无法修改')
                     return
                  }
                  this.addnum(item, (t - item.shopnum))

               }
            } else {

            }
         },
         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.stock) {
               item.stock = 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()
            }
         },

         toDetail(item) {
            uni.navigateTo({
               url: `/sub_pages/customer/trade/detail?id=${item.id}`
            })
         },
      }
   }
</script>

<style lang="scss" scoped>
   .brand-detail {
      .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;
         }
      }

      // min-height: 99vh;
      .brand-info {
         background: #FFFFFF;
         // border-radius: 40rpx 40rpx 0rpx 0rpx;
         border-top-left-radius: 40rpx;
         border-top-right-radius: 40rpx;
         overflow: hidden;
         overflow-y: scroll;
         padding: 40rpx 32rpx;
         min-height: calc(100vh - 470rpx);
         max-height: calc(100vh - 470rpx);
         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 {
               height: 60rpx;
               background: #E4ECE8;
               border-radius: 4rpx;
               font-weight: 400;
               font-size: 24rpx;
               color: #779787;
               margin-top: 10rpx;
               line-height: 60rpx;
               padding-left: 20rpx;
            }
         }

         .brand-info-1 {
            // padding: 40rpx 30rpx;

         }

         .brand-info-3 {
            padding: 40rpx 30rpx;

            .title {
               font-weight: 600;
               font-size: 32rpx;
               color: #000000;
               line-height: 44rpx;
               margin-bottom: 20rpx;
            }

            .form-input {
               display: flex;
               border-bottom: 2rpx solid #EEEEEE;
               line-height: 80rpx;

               .label {
                  font-weight: 600;
                  font-size: 28rpx;
                  color: #000000;
               }

               .value {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #666666;
                  margin-left: auto;
                  margin-right: 0;

                  text-align: right;

                  .check {
                     background: #20613D;
                     border-radius: 4rpx;
                  }
               }
            }
         }
      }

      .brand-top-info {
         background-image: url('https://hmy-flower.oss-cn-shanghai.aliyuncs.com/37/37dc02b58bd44af79e45031af2bb6c0b%E4%BD%8D%E5%9B%BE@2x.png');
         background-size: 100% 100%;

         .tj-info {
            display: flex;

            .form-item {
               flex: 1;
               text-align: center;

               .label {
                  font-weight: 400;
                  font-size: 32rpx;
                  color: #FFFFFF;
                  line-height: 44rpx;
               }

               .value {
                  font-weight: 600;
                  font-size: 48rpx;
                  color: #FFFFFF;
                  line-height: 66rpx;

               }
            }
         }

         .search-container {
            display: flex;
            margin: 12rpx 0rpx 20rpx 0rpx;
            position: relative;
            z-index: 1;

            .input {

               background-color: #fff !important;
					
               border-radius: 8rpx;
            }

         }
      }
      .flower-comment{
         padding:10px;
         line-height: 1.5;
			
         .comment{
            margin: 10px;
            font-size: 12rpx; 
         }
			
      }
		
      .rate{
         display: flex;
         justify-content: space-between; 
         margin:10px 10px 10px 0px;
      }
		
      .img-v{
         margin:10px;
         display: flex;
         flex-wrap: wrap;
         .comment-img{
            margin:10px; 
            width:80px;; 
            height:80px;
         }
      }
		
      .comment-replay{
         background-color: #F6F6F6;
         color: #6582B6;
         margin-top:10rpx;
         padding: 10rpx;
      }
		
      .flower-unit{
         color:#3E9FFB;
         border: 1rpx solid #3E9FFB; 
         margin:10px;
         margin-left:0px;
         padding-left: 5rpx;
         padding-right: 5rpx;
         // font-size: 12px; 
      }
   }
</style>