update花店端功能

xuxy

2024-07-27 c9ae65fcfe5e33cba60957506a62446507fad808

update花店端功能

 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>

 pages/order/order.vue

@@ -34,8 +34,9 @@
  methods: {
    toDetail(item) {
      //  订单详情页面
      console.log(' toDetail item',item)
      uni.navigateTo({
        url: 'pages/order/order-detail?id=' + item.id
        url: '/pages/order/order-detail?id=' + item.id
      })
    },
  },