From 9e70204584a5c675a4d0e37fff9020d242df9bdb Mon Sep 17 00:00:00 2001
From: mayf <m13160102112@163.com>
Date: 星期五, 06 九月 2024 16:21:50 +0800
Subject: [PATCH] readonly form减少表单项间距 统一详情样式
---
pages/marketing/coupon/member/_id.vue | 1
pages/settlement/list/_id.vue | 1
pages/marketing/coupon/user/_id.vue | 1
pages/order/list/_id.vue | 99 ++++++++++++++++++++++++++++++++-
pages/order/after-sale/_action/_id.vue | 8 ++
pages/marketing/member-level.vue | 2
pages/marketing/point-mall/coupon/_id.vue | 1
pages/marketing/coupon/activity/_id.vue | 1
assets/coupon/detail.scss | 5 -
assets/main.scss | 5 +
10 files changed, 114 insertions(+), 10 deletions(-)
diff --git a/assets/coupon/detail.scss b/assets/coupon/detail.scss
index 6d60d03..37a56df 100644
--- a/assets/coupon/detail.scss
+++ b/assets/coupon/detail.scss
@@ -3,9 +3,4 @@
.el-bus-title {
margin-bottom: 10px;
}
- ::v-deep {
- .el-form-item {
- margin-bottom: 0;
- }
- }
}
diff --git a/assets/main.scss b/assets/main.scss
index 686fc10..c46e99a 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -127,3 +127,8 @@
margin: 20px -24px;
}
}
+.readonly-form {
+ .el-form-item {
+ margin-bottom: 0;
+ }
+}
diff --git a/pages/marketing/coupon/activity/_id.vue b/pages/marketing/coupon/activity/_id.vue
index 104927b..d71d6d4 100644
--- a/pages/marketing/coupon/activity/_id.vue
+++ b/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" />
diff --git a/pages/marketing/coupon/member/_id.vue b/pages/marketing/coupon/member/_id.vue
index 3fea1d4..a772353 100644
--- a/pages/marketing/coupon/member/_id.vue
+++ b/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" />
diff --git a/pages/marketing/coupon/user/_id.vue b/pages/marketing/coupon/user/_id.vue
index 7922c77..09fe60f 100644
--- a/pages/marketing/coupon/user/_id.vue
+++ b/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" />
diff --git a/pages/marketing/member-level.vue b/pages/marketing/member-level.vue
index 049840b..d4e40df 100644
--- a/pages/marketing/member-level.vue
+++ b/pages/marketing/member-level.vue
@@ -105,7 +105,7 @@
min: 0,
controls: false,
},
- unit: '元',
+ unit: '元/扎',
rules: {
required: true,
message: '请输入会员优惠',
diff --git a/pages/marketing/point-mall/coupon/_id.vue b/pages/marketing/point-mall/coupon/_id.vue
index 71695c7..9b63a71 100644
--- a/pages/marketing/point-mall/coupon/_id.vue
+++ b/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" />
diff --git a/pages/order/after-sale/_action/_id.vue b/pages/order/after-sale/_action/_id.vue
index 24e68b8..0a14faf 100644
--- a/pages/order/after-sale/_action/_id.vue
+++ b/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>
diff --git a/pages/order/list/_id.vue b/pages/order/list/_id.vue
index 9e243ad..87dd692 100644
--- a/pages/order/list/_id.vue
+++ b/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;
}
diff --git a/pages/settlement/list/_id.vue b/pages/settlement/list/_id.vue
index 5ba11d5..235f1ac 100644
--- a/pages/settlement/list/_id.vue
+++ b/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
--
Gitblit v1.9.3