yicangzongtai_app_240321/pages/workbench/order/detail.vue

<template>
  <view class="container-detail">
    <navbar :config="config" backColor="#666666"></navbar>
    <view class="header">
      <view class="box"><text class="label">订单号：</text>{{orderDetail.order_code}}</view>
      <view class="box"><text class="label">会员名称：</text>{{orderDetail.user_name}}</view>
      <view class="box"><text class="label">手机号：</text>{{orderDetail.user_mobile}}</view>
    </view>
    <view class="jg"></view>
    <view class="body">
      <view class="shop zflex" v-if="orderDetail.shop_entity">
        <image class="logo" :src="orderDetail.shop_entity.logo" mode="aspectFill"></image>
        <view class="shop-info">
          <view class="title">{{orderDetail.shop_name}}</view>
          <view class="address zflex">
            <view class="address-info zflex">
              <image class="address-img" src="/static/shop/location-icon.png" mode="widthFix"></image>
              <view class="address-text">{{orderDetail.shop_entity.map_punctuation || '暂无商户地址' }}</view>
            </view>
            <view class="location-to zflex" @click="toShop">
              <view class="iconfont3 to-icon">&#xe787;</view>
              <view class="">去逛逛</view>
            </view>
          </view>
        </view>
      </view>
      <view class="ifno">
        <view class="box"><text class="label">消费金额：</text>￥{{orderDetail.sales_money}}</view>
        <view class="box"><text class="label">打赏比例：</text>{{orderDetail.discount_ratio}}%</view>
        <view class="box"><text class="label">打赏金额：</text>￥{{orderDetail.discount_money}}</view>
        <view class="box"><text class="label">付款方式：</text>{{getPayLabel(orderDetail.pay_mode)}}</view>
        <view class="box"><text class="label">订单备注：</text>{{orderDetail.remark || '暂无备注'}}</view>
        <view class="box"><text class="label">上报时间：</text>{{orderDetail.create_time && orderDetail.create_time.replace(/-/g, '.')}}</view>
      </view>
    </view>
    <view class="jg"></view>
    <view class="contribution-box">
      <view class="box" v-if="!isMine"><text class="label">商家获得贡献值：</text>{{orderDetail.give_shop_commission_able}}
      </view>
      <view class="box"><text class="label">用户获得贡献值：</text>{{orderDetail.give_user_commission_able}}</view>
      <view class="box" v-if="!isMine"><text class="label">商家打赏积分数：</text>{{orderDetail.shop_consume_integral_able}}
      </view>
    </view>
    <view class="jg" v-if="orderDetail.member_comments"></view>
    <view class="contribution-box" v-if="isMine && orderDetail.member_comments">
      <view class="box"><text class="label">评分：</text>
        <u-rate :count="5" v-model="orderDetail.member_comments.level" inactive-color="#cccccc" active-color="#FFC336"
          disabled></u-rate>
      </view>
      <view class="box"><text class="label">评价：</text>{{orderDetail.member_comments.content || '无'}}</view>
      <view class="box"><text class="label">评价时间：</text>{{orderDetail.member_comments.create_time.replace(/-/g, '.')}}</view>
    </view>
    <view class="footer" v-if="isMine && !orderDetail.member_comments">
      <view class="btn" @click="toComment">去评价</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true,
          title: '订单详情',
          color: '#1A1A1A',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true
        },
        orderDetail: {},
        payList: [{
            code: 'WE_CHAT',
            name: '微信',
            id: 0
          },
          {
            code: 'ALIPAY',
            name: '支付宝',
            id: 1
          },
          {
            code: 'MONEY',
            name: '现金',
            id: 2
          },
          {
            code: 'WE_CHAT_MONEY',
            name: '微信+现金',
            id: 3
          },
          {
            code: 'ALIPAY_MONEY',
            name: '支付宝+现金',
            id: 4
          },
          {
            code: 'OTHER',
            name: '其他支付',
            id: 5
          }
        ],
        isMine: true
      }
    },
    computed: {
      getPayLabel() {
        return (pay_mode) => {
          for (let item of this.payList) {
            if (item.id == pay_mode) {
              return item.name
            }
          }
        }
      }
    },
    onLoad(options) {
      if (options && options.orderId && options.isMine) {
        this.orderId = options.orderId
        this.isMine = options.isMine == 'true' ? true : false
        this.getOrderDetail(options.orderId)
      }
    },
    methods: {
      getOrderDetail(id) {
        this.$http.get(`/offlineorder/info/${id}`).then(res => {
          if (res.code == 200) {
            this.orderDetail = res.data
          }
        })
      },
      toComment() {
        uni.redirectTo({
          url: `/pages/workbench/order/comment?orderId=${this.orderId}&orderNo=${this.orderDetail.order_code}`
        })
      },
      toShop() {
        uni.navigateTo({
          url: `/pages/nearbyShop/shopDetail?shopId=${this.orderDetail.shop_id}`
        })
      },
    },

  }
</script>

<style lang="scss" scoped>
  .container-detail {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #808080;

    .box {
      margin-bottom: 10rpx;
    }

    .label {
      color: #1A1A1A;
    }

    .jg {
      height: 10rpx;
      background: #f5f5f5;
    }

    .zflex {
      display: flex;
      align-items: center;
    }

    .header {
      width: 100%;
      padding: 48rpx 30rpx 30rpx;
      background-color: #fff;

      .box:last-child {
        margin-bottom: 0;
      }
    }

    .body {
      padding: 30rpx;

      .shop {
        height: 158rpx;
        margin-bottom: 30rpx;

        .logo {
          width: 162rpx;
          height: 158rpx;
          margin-right: 36rpx;
          border-radius: 20rpx;
          flex-shrink: 0;
        }

        .shop-info {
          flex: 1;
          width: 0;

          .title {
            margin-bottom: 27rpx;
            color: #333333;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
          }

          .address {
            justify-content: space-between;

            .address-info {
              flex: 1;
              width: 0;
              margin-right: 10rpx;

              .address-img {
                width: 26rpx;
                height: 36rpx;
                margin-right: 14rpx;
                flex-shrink: 0;
              }

              .address-text {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .location-to {
              flex-shrink: 0;

              .to-icon {
                font-size: 36rpx;
                color: #4581F6;
              }
            }
          }
        }
      }

      .ifno {
        .box:last-child {
          margin-bottom: 0;
        }
      }
    }

    .contribution-box {
      padding: 30rpx;
    }

    .footer {
      width: 100%;
      padding: 30rpx 60rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;

      .btn {
        width: 100%;
        color: #fff;
        text-align: center;
        line-height: 85rpx;
        border: 1rpx solid #3775F6;
        border-radius: 44rpx;
        background-color: #FA6138;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
      }

      .online-btn {
        color: #FA6138;
        border: 1rpx solid #3775F6;
        background-color: #e7eefc;
      }
    }
  }
</style>