update花店端功能

xuxy

2024-07-27 c9ae65fcfe5e33cba60957506a62446507fad808

 pages/order/order-detail.vue

@@ -1,532 +1,579 @@
<script>
export default {
  data() {
    return {
      id: '',
      dto: {},
      type: '',
      // #ifdef PUB_CUSTOMER
      type: 'customer',
      // #endif
      // #ifdef PUB_PARTNER
      type: 'partner',
      // #endif
    };
  },
  onLoad(options) {
    this.id = options.id || ''
    if (this.id) {
   export default {
      data() {
         return {
            id: '',
            dto: {},
            type: '',
            // #ifdef PUB_CUSTOMER
            type: 'customer',
            // #endif
            // #ifdef PUB_PARTNER
            type: 'partner',
            // #endif
         };
      },
      async onLoad(options) {
         console.log('options', options)

      this.getDetail()
      this.getItemList()
    }
  },
  methods: {
    copyTxt(txt) {
      uni.setClipboardData({
        data: txt,//要被复制的内容
        success: () => {//复制成功的回调函数
          uni.showToast({//提示
            title: '复制成功'
          })
        }
      })
    },
    async getDetail() {
      this.$message.showLoading()
      const {code, data} = this.$http.request('get', `/api/${type}/order/list/view```, {
        params: {
          id: this.id
        }
      })
      this.$message.hideLoading()
      if (code === 0 && data) {
        this.dto = {
          ...this.dto,
          ...data
        }
      }
    },
    async getItemList() {
      this.$message.showLoading()
      const {code, data} = this.$http.request('get', `/api/${type}/order/item/list`, {
        params: {
          id: this.id
        }
      })
      this.$message.hideLoading()
      if (code === 0 && data) {
        this.list = data || []
      }
    },
    async buttonClick(buttontype) {
      switch (buttontype) {
        case 'refund': {
          await this.$message.confirm('是否确定申请退款')
          // 发送请求
          this.$message.showLoading()
          const {code} = await this.$http.request('post', '/api/customer/order/refund', {
            data: {
              id: this.id,
              evaluate: res.content
            }
          })
          this.$message.hideLoading()
          if (code === 0) {
            this.getDetail()
          }
        }
          break
        case 'confirm': {
          await this.$message.confirm('是否确定收货')
          // 发送请求
          this.$message.showLoading()
          const {code} = await this.$http.request('get', '/api/customer/order/receive/confirm', {
            params: {
              id: this.id,
            }
          })
          this.$message.hideLoading()
          if (code === 0) {
            this.getDetail()
          }
         this.id = options.id || ''
         if (this.id) {

        }
          break
        case 'payAgain': {
          await this.$message.confirm('是否确定重新')
          // 发送请求
          this.$message.showLoading()
          const {code, data} = await this.$http.request('get', '/api/customer/order/payAgain', {
            params: {
              id: this.id,
            }
          })
          this.$message.hideLoading()
          if (code === 0) {
            //微信接口
            let that = this
            wx.requestPayment({
              ...data,
              async success(res) {
                console.log('pay success', res)
                that.$message.showToast('支付成功')
                setTimeout(() => {
                  that.getDetail()
                }, 200)
              },
              fail(err) {
                console.error('pay fail', err)
                that.$message.showToast('支付失败')
              }
            })
            await this.getDetail()
            this.getItemList()
         }
      },
      methods: {
         copyTxt(txt) {
            uni.setClipboardData({
               data: txt, //要被复制的内容
               success: () => { //复制成功的回调函数
                  uni.showToast({ //提示
                     title: '复制成功'
                  })
               }
            })
         },
         async getDetail() {
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('get', `/api/${this.type}/order/list/view`, {
               params: {
                  id: this.id
               }
            })
            this.$message.hideLoading()
            console.log('getDetail', data)
            if (code === 0) {
               this.dto = {
                  ...this.dto,
                  ...data
               }
            }
         },
         async callTel() {
            await this.$message.confirm('是否拨打客服电话')
            uni.makePhoneCall({
               phoneNumber: '15974805814'
            });
         },
         async getItemList() {
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('get', `/api/${this.type}/order/item/list`, {
               params: {
                  id: this.id
               }
            })
            this.$message.hideLoading()
            console.log('getItemList', data)
            if (code === 0) {
               this.list = data || []
               console.log('data', this.list)
            }
         },
         async buttonClick(buttontype) {
            switch (buttontype) {
               case 'refund': {
                  await this.$message.confirm('是否确定申请退款')
                  // 发送请求
                  this.$message.showLoading()
                  const {
                     code
                  } = await this.$http.request('post', '/api/customer/order/refund', {
                     data: {
                        id: this.id,
                        evaluate: res.content
                     }
                  })
                  this.$message.hideLoading()
                  if (code === 0) {
                     this.getDetail()
                  }
               }
               break
               case 'confirm': {
                  await this.$message.confirm('是否确定收货')
                  // 发送请求
                  this.$message.showLoading()
                  const {
                     code
                  } = await this.$http.request('get', '/api/customer/order/receive/confirm', {
                     params: {
                        id: this.id,
                     }
                  })
                  this.$message.hideLoading()
                  if (code === 0) {
                     this.getDetail()
                  }

          }
               }
               break
               case 'payAgain': {
                  await this.$message.confirm('是否确定重新')
                  // 发送请求
                  this.$message.showLoading()
                  const {
                     code,
                     data
                  } = await this.$http.request('get', '/api/customer/order/payAgain', {
                     params: {
                        id: this.id,
                     }
                  })
                  this.$message.hideLoading()
                  if (code === 0) {
                     //微信接口
                     let that = this
                     wx.requestPayment({
                        ...data,
                        async success(res) {
                           console.log('pay success', res)
                           that.$message.showToast('支付成功')
                           setTimeout(() => {
                              that.getDetail()
                           }, 200)
                        },
                        fail(err) {
                           console.error('pay fail', err)
                           that.$message.showToast('支付失败')
                        }
                     })

        }
          break
        case 'evaluate': {
          const res = await this.$message.confirm('请输入评价信息', {
            editable: true
          })
          if (res.content && res.confirm) {
            // 发送请求
            this.$message.showLoading()
            const {code} = await this.$http.request('post', '/api/customer/order/evaluate', {
              data: {
                id: this.id,
                evaluate: res.content
              }
            })
            this.$message.hideLoading()
            if (code === 0) {
              this.getDetail()
            }
          }
        }
          break
        default:
          break
      }
    }
  },
}
                  }

               }
               break
               case 'evaluate': {
                  const res = await this.$message.confirm('请输入评价信息', {
                     editable: true
                  })
                  if (res.content && res.confirm) {
                     // 发送请求
                     this.$message.showLoading()
                     const {
                        code
                     } = await this.$http.request('post', '/api/customer/order/evaluate', {
                        data: {
                           id: this.id,
                           evaluate: res.content
                        }
                     })
                     this.$message.hideLoading()
                     if (code === 0) {
                        this.getDetail()
                     }
                  }
               }
               break
               case 'couldRefund': {

               }
               default:
                  break
            }
         }
      },
   }
</script>

<template>
  <view class="order-detail-page">
    <view class="top-tip flex m-b-20">
      <image src="//static/common/icon-order-status-SEND.png" class="icon-car m-r-6 img100"></image>
      <view>
        <view>{{
   <view class="order-detail-page">
      <view class="top-tip flex ">
         <image src="/static/common/icon-order-status-SEND.png" class="icon-car m-r-6 img100"></image>
         <view>
            <view>{{
            dto.status === 'SEND' && '商家已发货，正在通知顺丰小件取货'
            || dto.status === 'PENDING' && '订单还未支付，立即去支付'
            || dto.status === 'RECEIVE' && '待签收'
            || ('订单' + dto.statusStr)
          }}
        </view>
        <!--        <view>{{dto.paymentTime}}</view>-->
      </view>
    </view>
    <view class="m-b-20 address-container">
      <view class="flex">
        <view class="icon-loc">
          <image src="/static/common/icon-loc.png" class="image"></image>
        </view>
        <view class="info">
          <view class="title">
            {{ dto.customer }}
            <view class="tel">{{ dto.customerTel }}</view>
          </view>
          <view class="content">{{ dto.customerAddress }}</view>
        </view>
      </view>
    </view>
    <view class="flower-info m-b-20" v-for="(item,index) of list"
          :key="index">
      <view class="supplier-name">
        <image class="icon-dp" src="/static/common/icon-dp.png"></image>
            </view>
            <view class="desc-gray">支付时间:{{dto.paymentTime}}</view>
         </view>
      </view>
      <view class="address-container bg-white br-4 m-t-12">
         <view class="flex">
            <view class="icon-loc m-r-10">
               <image src="/static/common/icon-loc.png" class="image"></image>
            </view>
            <view class="info">
               <view class="title">
                  {{ dto.customer }}
                  <view class="tel">{{ dto.customerTel }}</view>
               </view>
               <view class="content">{{ dto.customerAddress }}</view>
            </view>
         </view>
      </view>
      <view class="flower-info m-b-20 m-t-12 br-4" v-for="(item,index) of list" :key="index">
         <view class="supplier-name ">
            <image class="icon-dp" src="/static/common/icon-dp.png"></image>
            {{ item.supplierName }}
         </view>
         <view class="flex m-t-12">
            <image class="flower-img img100 m-r-6" :src="item.flowerCover" @click="previewImg(item.flowerCover)">
            </image>
            <view class="flex1">
               <view class=" flex">
                  <view class="title"><span class="level">{{ item.flowerCategory }}</span><span class="level">{{ item.flowerLevelStr }}</span>{{ item.flowerName }}
                  </view>
                  <!--            <view class="m-l-a m-r-0">-->
                  <!--              {{item.flowerCategory || '-'}}-->
                  <!--            </view>-->
               </view>
               <view class="each-list">
                  <view class="each-item">
                     <view class="label">颜色</view>
                     <view class="value">{{ item.flowerColor || '-' }}</view>

        {{ item.supplierName }}
      </view>
      <view class="flex">
        <image class="flower-img img100 m-r-6"
               :src="item.flowerCover" @click="previewImg(item.flowerCover)">
        </image>
        <view class="flex1">
          <view class=" flex">
            <view class="title">{{ item.flowerName }}<span class="level">{{ item.flowerLevelStr }}</span></view>
            <!--            <view class="m-l-a m-r-0">-->
            <!--              {{item.flowerCategory || '-'}}-->
            <!--            </view>-->
          </view>
          <view class="each-list">
            <view class="each-item">
              <view class="label">颜色</view>
              <view class="value">{{ item.flowerColor || '-' }}</view>
                  </view>
                  <view class="each-item">
                     <view class="label">规格</view>
                     <view class="value">{{ item.flowerUnit || '-' }}</view>
                  </view>

            </view>
            <view class="each-item">
              <view class="label">规格</view>
              <view class="value">{{ item.flowerUnit || '-' }}</view>
            </view>
                  <view class="each-item">
                     <view class="label">数量</view>
                     <view class="value">{{ item.num || 0 }}</view>

            <view class="each-item">
              <view class="label">数量</view>
              <view class="value">{{ item.num || 0 }}</view>
                  </view>
                  <view class="each-item">
                     <view class="label">售价</view>
                     <view class="value">￥{{ item.price || '-' }}</view>
                  </view>
                  <view class="each-item">
                     <view class="label">总金额</view>
                     <view class="value t-red">￥{{ item.total || '-' }}</view>
                  </view>
               </view>
            </view>
         </view>

            </view>
            <view class="each-item">
              <view class="label">售价</view>
              <view class="value">￥{{ item.price || '-' }}</view>
            </view>
            <view class="each-item">
              <view class="label">总金额</view>
              <view class="value t-red">￥{{ item.total || '-' }}</view>
            </view>
          </view>
        </view>
      </view>
      </view>
      <view class="info-container bg-white br-4">
         <view class="form-item">
            <view class="label">订单编号:</view>
            <view class="value">{{ dto.orderNo || '-' }}</view>
            <view class="button m-l-a m-r-0" @click="copyTxt(dto.orderNo)">复制
            </view>
         </view>
         <view class="form-item">
            <view class="label">下单日期:</view>
            <view class="value">{{ dto.paymentTime || '-' }}</view>
         </view>
         <view class="form-item" v-if="dto.cancelTime&&(dto.status==='CANCEL'||dto.status==='REFUND')">
            <view class="label">取消时间:</view>
            <view class="value">{{ dto.cancelTime || '-' }}</view>
         </view>
         <view class="form-item" v-if="dto.evaluateTime&&(dto.status==='COMPLETED')">
            <view class="label">评价时间:</view>
            <view class="value">{{ dto.evaluateTime || '-' }}</view>
         </view>
         <view class="form-item" v-if="(dto.status==='REFUND')">
            <view class="label">退款金额:</view>
            <view class="value">{{ dto.refundAmount || '-' }}</view>
         </view>
         <view class="form-item" v-if="dto.refundNo&&(dto.status==='REFUND')">
            <view class="label">退款单号:</view>
            <view class="value">{{ dto.refundNo || '-' }}</view>
         </view>
         <view class="form-item" v-if="dto.refundTime&&(dto.status==='REFUND')">
            <view class="label">退款时间:</view>
            <view class="value">{{ dto.refundTime || '-' }}</view>
         </view>
         <view class="form-item" v-if="dto.receiveTime&&(dto.status==='EVALUATE')">
            <view class="label">收货时间:</view>
            <view class="value">{{ dto.receiveTime || '-' }}</view>
         </view>
         <view class="form-item" v-if="dto.completeTime&&(dto.status==='COMPLETED')">
            <view class="label">完成时间:</view>
            <view class="value">{{ dto.completeTime || '-' }}</view>
         </view>
         <view class="form-item" v-if="dto.transferTime&&(dto.status==='REFUND')">
            <view class="label">转账时间:</view>
            <view class="value">{{ dto.transferTime || '-' }}</view>
         </view>
         <view class="line">
         </view>
         <view class="form-item">
            <view class="label">特殊需求:</view>
            <view class="value">{{ dto.specialNeeds || '-' }}</view>
         </view>
         <view class="form-item">
            <view class="label">买家留言:</view>
            <view class="value">{{ dto.remarks || '-' }}</view>
         </view>
      </view>
      <view class="info-container bg-white br-4 m-t-12">
         <view class="form-item">
            <view class="label">订单金额:</view>
            <view class="value">{{ dto.totalAmount || '-' }}</view>
         </view>
         <view class="form-item">
            <view class="label">支付金额:</view>
            <view class="value">{{ dto.paymentAmount || '-' }}</view>
         </view>
         <view class="form-item">
            <view class="label">商品金额:</view>
            <view class="value">{{ dto.flowerAmount || '-' }}</view>
         </view>
         <view class="form-item">
            <view class="label">运费:</view>
            <view class="value">{{ dto.transportFee || '-' }}</view>
         </view>

    </view>
    <view class="info-container">
      <view class="form-item">
        <view class="label">订单编号:</view>
        <view class="value">{{ dto.orderNo || '-' }}</view>
        <view class="button m-l-a m-r-0"
              @click="copyTxt(dto.orderNo)">复制
        </view>
      </view>
      <view class="form-item">
        <view class="label">下单日期:</view>
        <view class="value">{{ dto.paymentTime || '-' }}</view>
      </view>
      <view class="form-item" v-if="dto.cancelTime&&(dto.status==='CANCEL'||dto.status==='REFUND')">
        <view class="label">取消时间:</view>
        <view class="value">{{ dto.cancelTime || '-' }}</view>
      </view>
      <view class="form-item" v-if="dto.evaluateTime&&(dto.status==='COMPLETED')">
        <view class="label">评价时间:</view>
        <view class="value">{{ dto.evaluateTime || '-' }}</view>
      </view>
      <view class="form-item" v-if="(dto.status==='REFUND')">
        <view class="label">退款金额:</view>
        <view class="value">{{ dto.refundAmount || '-' }}</view>
      </view>
      <view class="form-item" v-if="dto.refundNo&&(dto.status==='REFUND')">
        <view class="label">退款单号:</view>
        <view class="value">{{ dto.refundNo || '-' }}</view>
      </view>
      <view class="form-item" v-if="dto.refundTime&&(dto.status==='REFUND')">
        <view class="label">退款时间:</view>
        <view class="value">{{ dto.refundTime || '-' }}</view>
      </view>
      <view class="form-item" v-if="dto.receiveTime&&(dto.status==='EVALUATE')">
        <view class="label">收货时间:</view>
        <view class="value">{{ dto.receiveTime || '-' }}</view>
      </view>
      <view class="form-item" v-if="dto.completeTime&&(dto.status==='COMPLETED')">
        <view class="label">完成时间:</view>
        <view class="value">{{ dto.completeTime || '-' }}</view>
      </view>
      <view class="form-item" v-if="dto.transferTime&&(dto.status==='REFUND')">
        <view class="label">转账时间:</view>
        <view class="value">{{ dto.transferTime || '-' }}</view>
      </view>
      <view class="line">
      </view>
      <view class="form-item">
        <view class="label">特殊需求:</view>
        <view class="value">{{ dto.specialNeeds || '-' }}</view>
      </view>
      <view class="form-item">
        <view class="label">买家留言:</view>
        <view class="value">{{ dto.remarks || '-' }}</view>
      </view>
    </view>
    <view class="info-container">
      <view class="form-item">
        <view class="label">订单金额:</view>
        <view class="value">{{ dto.totalAmount || '-' }}</view>
      </view>
      <view class="form-item">
        <view class="label">支付金额:</view>
        <view class="value">{{ dto.paymentAmount || '-' }}</view>
      </view>
      <view class="form-item">
        <view class="label">商品金额:</view>
        <view class="value">{{ dto.flowerAmount || '-' }}</view>
      </view>
      <view class="form-item">
        <view class="label">运费:</view>
        <view class="value">{{ dto.transportFee || '-' }}</view>
      </view>
      </view>

    </view>
      <view class="info-container bg-white br-4 m-t-12">
         <view class="icon-view">
            <image src="/static/common/icon-kf.png" class="icon-kf m-r-10 img100 icon"></image>
            我的客服
         </view>
         <view class="flex m-t-12">
            <view class="flex1 w-fit m-auto icon-view" @click.stop="callTel">
               <image src="/static/common/icon-call.png" class="icon icon-call m-r-10  img100"></image>
               15974805814
            </view>
            <view class="flex1 w-fit m-auto icon-view" open-type="contact">
               <image src="/static/common/icon-wx.png" class="icon icon-call  m-r-10 img100"></image>
               在线客服
            </view>

    <view class="info-container">
      <view>
        <image src="/static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
        我的客服
      </view>
      <view class="flex">
        <view class="flex1 w-fit m-auto">
          <image src="/static/common/icon-call.png" class="icon-call  img100"></image>
          15974805814
        </view>
        <view class="flex1 w-fit m-auto">
          <image src="/static/common/icon-wx.png" class="icon-call  img100"></image>
          在线客服
        </view>
         </view>
      </view>
      <!-- #ifdef PUB_CUSTOMER -->

      </view>
    </view>
    <view class="button-space"></view>
    <view class="buttons-bottom flex">
      <view class="button button-1"
            @click="buttonClick('refund')" v-if="dto.status ==='CANCEL'">申请退款
      </view>
      <view class="button button-1" @click="buttonClick('confirm')"
            v-if="dto.status ==='RECEIVE'"> 确认收货
      </view>
      <view class="button button-1" @click="buttonClick('payAgain')"
            v-if=" dto.status === 'PENDING'"> 重新支付
      </view>
      <view class="button button-1" @click="buttonClick('evaluate')"
            v-if=" dto.status === 'EVALUATE'"> 评价
      </view>

    </view>
    <!--
      <view class="button-space"></view>
      <view class="buttons-bottom flex">
         <view class="button button-1" @click="buttonClick('refund')" v-if="dto.couldRefund">申请退款
         </view>
         <view class="button button-1" @click="buttonClick('confirm')" v-if="dto.status ==='RECEIVE'"> 确认收货
         </view>
         <view class="button button-1" @click="buttonClick('payAgain')" v-if=" dto.status === 'PENDING'"> 重新支付
         </view>
         <view class="button button-1" @click="buttonClick('evaluate')" v-if=" dto.status === 'EVALUATE'"> 评价
         </view>
         <view class="button button-1" @click="buttonClick('evaluate')" v-if=" dto.status === 'EVALUATE'"> 评价
         </view>
         <!--      <view class="button button-1" @click="buttonClick('couldRefund')"
           v-if="dto.couldRefund"> 退款
     </view> -->

      </view>
      <!-- #endif -->
      <!--
      <view class="button button-1" @click = "buttonClick('payAgain')" > 查询退款 < /view>-->

  </view>
   </view>
</template>

<style lang="scss" scoped>
.order-detail-page {
  background: #F7F7F7;
  padding: 30rpx;
   .order-detail-page {
      background: #F7F7F7;
      padding: 30rpx;

  .info-container {
    .button-space {
      min-height: 140rpx;
    }
      .info-container {
         .button-space {
            min-height: 140rpx;
         }

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

    .icon-call {
      width: 32rpx;
      height: 32rpx;
    }
         .icon-call {
            width: 32rpx;
            height: 32rpx;
         }

    .buttons-bottom {
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      height: 120rpx;
         .icon-view {
            line-height: 40rpx;

      .button {
        border-radius: 42rpx;
        border: 2rpx solid #CECECE;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        line-height: 76rpx;
      }
            .icon {
               display: inline-block;
               vertical-align: middle;
            }
         }

      .button-1 {
         .buttons-bottom {
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            height: 120rpx;

      }
    }
  }
            .button {
               border-radius: 42rpx;
               border: 2rpx solid #CECECE;
               font-weight: 400;
               font-size: 28rpx;
               color: #999999;
               text-align: center;
               line-height: 76rpx;
            }

  .info-container {
    padding: 28rpx;
            .button-1 {}
         }
      }

    .form-item {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
      display: flex;
      .info-container {
         padding: 28rpx;

      .label {
        min-height: 140rpx;
      }
         .form-item {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 60rpx;
            display: flex;

      .value {
            .label {
               min-width: 140rpx;
               margin-right: 20rpx;
            }

      }
    }
            .value {
               word-break: break-all;
            }
         }

    .line {
      height: 2rpx solid #EEEEEE;
    }
  }
         .line {
            height: 2rpx solid #EEEEEE;
         }
      }

  .top-tip {
    .icon-car {
      width: 52rpx;
      height: 52rpx;
    }
  }
      .top-tip {
         .icon-car {
            width: 52rpx;
            height: 52rpx;
         }
      }

  .address-container {
    padding: 28rpx;
      .address-container {
         padding: 28rpx;

    .icon-loc {
      width: 48rpx;
      height: 48rpx;
      background: #20613D;
      border-radius: 50%;
         .icon-loc {
            width: 48rpx;
            height: 48rpx;
            background: #20613D;
            border-radius: 50%;

      .image {
        margin-top: 8rpx;
        margin-left: 8rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
            .image {
               margin-top: 8rpx;
               margin-left: 8rpx;
               width: 32rpx;
               height: 32rpx;
            }
         }

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

        .tel {
          display: inline-block;
          margin-left: 20rpx;
        }
      }
               .tel {
                  display: inline-block;
                  margin-left: 20rpx;
               }
            }

      .content {
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 40rpx;
      }
            .content {
               font-weight: 400;
               font-size: 28rpx;
               color: #000000;
               line-height: 40rpx;
            }

    }
  }
         }
      }

  .flower-info {
    padding: 28rpx;
      .flower-info {
         padding: 28rpx;

    background: #FFFFFF;
    border-radius: 8rpx;
         background: #FFFFFF;
         border-radius: 8rpx;

    .supplier-name {
      border-bottom: 2rpx solid #EEEEEE;
      font-weight: 600;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
    }
         .supplier-name {
            border-bottom: 2rpx solid #EEEEEE;
            font-weight: 600;
            font-size: 28rpx;
            color: #000000;
            padding-bottom: 10rpx;
            line-height: 40rpx;

    .title {
      font-weight: 600;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
            .icon-dp {
               width: 27rpx;
               height: 27rpx;
               display: inline-block;
               vertical-align: middle;
            }
         }

      .level {
        font-weight: 400;
        font-size: 28rpx;
        color: #20613D;
        line-height: 40rpx;
        margin-left: 20rpx;
      }
    }
         .title {
            font-weight: 600;
            font-size: 28rpx;
            color: #000000;
            line-height: 40rpx;

    .flower-img {
      width: 128rpx;
      height: 118rpx;
      min-width: 128rpx;
      min-height: 118rpx;
    }
            .level {
               font-weight: 400;
               font-size: 28rpx;
               color: #20613D;
               line-height: 40rpx;
               margin-right: 20rpx;
            }
         }

    .each-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 6rpx;
         .flower-img {
            width: 128rpx;
            height: 118rpx;
            min-width: 128rpx;
            min-height: 118rpx;
         }

      .each-item {
        min-width: 30%;
        max-width: 40%;
        text-align: center;
        margin-left: 0rpx;
        margin-right: auto;
        display: flex;
         .each-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 6rpx;

        .label {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          text-align: left;
          padding-right: 10rpx;
        }
            .each-item {
               min-width: 30%;
               max-width: 40%;
               text-align: center;
               margin-left: 0rpx;
               margin-right: auto;
               display: flex;

        .label::after {
          content: ": "
        }
               .label {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #666666;
                  text-align: left;
                  padding-right: 10rpx;
               }

        .value {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
               .label::after {
                  content: ": "
               }

  }
               .value {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #666666;
               }
            }
         }

}
</style>
      }

   }
</style>