readonly form减少表单项间距 统一详情样式

mayf

2024-09-06 9e70204584a5c675a4d0e37fff9020d242df9bdb

readonly form减少表单项间距
统一详情样式

 assets/coupon/detail.scss

@@ -3,9 +3,4 @@
  .el-bus-title {
    margin-bottom: 10px;
  }
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}

 assets/main.scss

@@ -127,3 +127,8 @@
    margin: 20px -24px;
  }
}
.readonly-form {
  .el-form-item {
    margin-bottom: 0;
  }
}

 pages/marketing/coupon/activity/_id.vue

@@ -6,6 +6,7 @@
      label-width="auto"
      :content="formContent"
      readonly
      class="readonly-form"
    />
    <div class="base-page-wrapper__line"></div>
    <el-bus-title title="领取记录" size="small" />

 pages/marketing/coupon/member/_id.vue

@@ -6,6 +6,7 @@
      label-width="auto"
      :content="formContent"
      readonly
      class="readonly-form"
    />
    <div class="base-page-wrapper__line"></div>
    <el-bus-title title="发放记录" size="small" />

 pages/marketing/coupon/user/_id.vue

@@ -6,6 +6,7 @@
      label-width="auto"
      :content="formContent"
      readonly
      class="readonly-form"
    />
    <div class="base-page-wrapper__line"></div>
    <el-bus-title title="发放记录" size="small" />

 pages/marketing/member-level.vue

@@ -105,7 +105,7 @@
              min: 0,
              controls: false,
            },
            unit: '元',
            unit: '元/扎',
            rules: {
              required: true,
              message: '请输入会员优惠',

 pages/marketing/point-mall/coupon/_id.vue

@@ -6,6 +6,7 @@
      label-width="auto"
      :content="formContent"
      readonly
      class="readonly-form"
    />
    <div class="base-page-wrapper__line"></div>
    <el-bus-title title="兑换记录" size="small" />

 pages/order/after-sale/_action/_id.vue

@@ -1,6 +1,12 @@
<template>
  <div v-loading="wholeLoading" class="base-page-wrapper sale-detail">
    <el-bus-form ref="form" label-width="auto" :content="formContent" readonly>
    <el-bus-form
      ref="form"
      label-width="auto"
      :content="formContent"
      readonly
      class="readonly-form"
    >
      <template #id:baseInfo>
        <el-bus-title title="基本信息" size="small"></el-bus-title>
      </template>

 pages/order/list/_id.vue

@@ -6,7 +6,20 @@
      label-width="auto"
      :content="formContent"
      readonly
      class="readonly-form"
    ></el-bus-form>
    <template v-if="detail.memberCouponAmount || detail.memberDiscountType">
      <div class="base-page-wrapper__line"></div>
      <el-bus-title title="优惠信息" size="small" />
      <el-bus-form
        ref="discountForm"
        label-width="auto"
        :content="discountForm"
        readonly
        class="readonly-form"
      ></el-bus-form>
    </template>
    <div class="base-page-wrapper__line"></div>
    <el-bus-title title="商品信息" size="small">
      <template #right>
        <el-button
@@ -50,8 +63,18 @@
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="单价(元)"
        label="会员单价(元)"
        prop="price"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="原价(元)"
        prop="originalPrice"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="券后单价(元)"
        prop="realPrice"
        min-width="100"
      ></el-table-column>
      <el-table-column
@@ -136,6 +159,7 @@
      </el-table-column>
    </el-table>
    <template v-if="afterSaleList && afterSaleList.length > 0">
      <div class="base-page-wrapper__line"></div>
      <el-bus-title title="售后信息" size="small" class="mt-20"></el-bus-title>
      <el-table :data="afterSaleList">
        <el-table-column
@@ -322,14 +346,60 @@
            { label: '收货地址：', id: 'customerWholeAddress', type: 'input' },
            { label: '下单时间：', id: 'createTime', type: 'input' },
            { label: '支付时间：', id: 'paymentTime', type: 'input' },
            { label: '商品金额：', id: 'flowerAmount', type: 'input' },
            { label: '商品金额：', id: 'flowerAmountDesc', type: 'input' },
            { label: '打包费：', id: 'packingFee', type: 'input' },
            { label: '运费：', id: 'transportFee', type: 'input' },
            { label: '订单金额：', id: 'totalAmount', type: 'input' },
            { label: '订单金额：', id: 'totalAmountDesc', type: 'input' },
            { label: '订单状态：', id: 'statusBackendStr', type: 'input' },
            { label: '合伙人：', id: 'partnerName', type: 'input' },
            { label: '库区：', id: 'warehouseName', type: 'input' },
            { label: '库位：', id: 'warehouseLocationCode', type: 'input' },
          ],
        },
      ],
      discountForm: [
        {
          type: 'row',
          items: [
            {
              label: '优惠券名称：',
              id: 'memberCouponName',
              type: 'input',
              hidden: (row) => !row.memberCouponAmount,
            },
            {
              label: '优惠券金额：',
              id: 'memberCouponAmount',
              type: 'input',
              hidden: (row) => !row.memberCouponAmount,
            },
            {
              label: '会员等级：',
              id: 'memberName',
              type: 'input',
              hidden: (row) => !row.memberDiscountType,
            },
            {
              label: '会员折扣类型：',
              id: 'memberDiscountType',
              type: 'input',
              str: true,
              hidden: (row) => !row.memberDiscountType,
            },
            {
              label: '会员折扣：',
              id: 'memberDiscountRatio',
              type: 'input',
              unit: '%',
              hidden: (row) => row.memberDiscountType !== 'ratio',
            },
            {
              label: '会员优惠：',
              id: 'memberDiscountAmount',
              type: 'input',
              unit: '元/扎',
              hidden: (row) => row.memberDiscountType !== 'ratio',
            },
          ],
        },
      ],
@@ -465,7 +535,29 @@
        data.customerWholeAddress = `${data.customerProvince || ''}${
          data.customerCity || ''
        }${data.customerRegion || ''}${data.customerAddress || ''}`
        // 如果享受了会员优惠则显示具体会员优惠
        data.flowerAmountDesc = data.flowerAmount
        if (data.memberDiscountType) {
          if (data.memberDiscountType === 'ratio' && data.memberDiscountRatio) {
            data.flowerAmountDesc += `（其中享受会员折扣${data.memberDiscountRatio}%）`
          } else if (
            data.memberDiscountType === 'amount' &&
            data.memberDiscountAmount
          ) {
            data.flowerAmountDesc += `（其中享受会员优惠每扎减${data.memberDiscountAmount}元）`
          }
        }
        // 如果使用了优惠券则显示优惠券具体信息
        data.totalAmountDesc = data.totalAmount
        if (data.memberCouponAmount) {
          data.totalAmountDesc += `（其中使用了${data.memberCouponAmount}元优惠券）`
        }
        this.detail = data
        this.$nextTick(() => {
          if (this.$refs.discountForm) {
            this.$refs.discountForm.updateForm(data)
          }
        })
        this.$refs.form.updateForm(data)
      }
      this.loading = false
@@ -594,6 +686,7 @@

<style lang="scss" scoped>
.order-detail {
  border-radius: 0;
  .el-bus-title {
    margin-bottom: 10px;
  }

 pages/settlement/list/_id.vue

@@ -6,6 +6,7 @@
      label-width="auto"
      :content="formContent"
      readonly
      class="readonly-form"
    ></el-bus-form>
    <template v-if="goodsList && goodsList.length > 0">
      <el-bus-title