refactor(manager): 替换iView组件为TDesign并优化样式

- 将iView组件统一替换为TDesign组件
- 优化表单、表格、弹窗等交互样式
- 修复路由重复添加问题
- 更新依赖版本
- 调整布局间距与响应式
- 修复表单重置方法兼容性
- 统一消息提示组件

manager/src/views/promotions/coupon-activity/coupon-info.vue

@@ -1,62 +1,77 @@
 <template>
-  <div>
-    <div class="content-goods-publish">
-      <Form ref="form" :label-width="70">
-        <div class="base-info-item">
-          <h4>优惠券活动详情</h4>
-          <div class="form-item-view">
-            <FormItem label="活动名称">
-              <span>{{ couponActivity.promotionName }}</span>
-            </FormItem>
-            <FormItem label="活动类型">
-              <span v-if="couponActivity.couponActivityType === 'REGISTERED'"
-                >新人发券</span
-              >
+  <div class="detail-page">
+    <t-card style="margin-bottom: 12px">
+      <div class="detail-section">
+        <div class="detail-title">优惠券活动详情</div>
+        <div class="detail-grid">
+          <div class="detail-row">
+            <div class="label">活动名称</div>
+            <div class="value">{{ couponActivity.promotionName }}</div>
+          </div>
+          <div class="detail-row">
+            <div class="label">活动类型</div>
+            <div class="value">
+              <span v-if="couponActivity.couponActivityType === 'REGISTERED'">新人发券</span>
               <span v-else-if="couponActivity.couponActivityType === 'AUTO_COUPON'">自动发券</span>
-              <spin v-else>精确发券</spin>
-            </FormItem>
-            <FormItem label="领取频率" v-if="couponActivity.couponFrequencyEnum != '' && couponActivity.couponFrequencyEnum != null && couponActivity.couponFrequencyEnum != undefined">
-              <span v-if="couponActivity.couponFrequencyEnum === 'DAY'"
-                >每日</span
-              >
+              <span v-else>精确发券</span>
+            </div>
+          </div>
+          <div class="detail-row" v-if="couponActivity.couponFrequencyEnum">
+            <div class="label">领取频率</div>
+            <div class="value">
+              <span v-if="couponActivity.couponFrequencyEnum === 'DAY'">每日</span>
               <span v-else-if="couponActivity.couponFrequencyEnum === 'WEEK'">每周一次</span>
               <span v-else>每月一次</span>
-            </FormItem>
-            <FormItem
-              label="活动范围"
-              v-if="couponActivity.couponActivityType === 'SPECIFY' || couponActivity.couponActivityType === 'AUTO_COUPON'"
-            >
-              <span v-if="couponActivity.activityScope === 'ALL'">全部会员</span>
-              <spin v-else>指定会员</spin>
-            </FormItem>
-            <FormItem label="活动时间">
-              <span>{{ couponActivity.startTime }}～{{ couponActivity.endTime }}</span>
-            </FormItem>
-            <FormItem label="活动状态">
-              <span v-if="couponActivity.promotionStatus === 'NEW'">未开始</span>
-              <span v-if="couponActivity.promotionStatus === 'START'">已开始</span>
-              <span v-if="couponActivity.promotionStatus === 'END'">已结束</span>
-              <span v-if="couponActivity.promotionStatus === 'CLOSE'">已关闭</span>
-            </FormItem>
+            </div>
+          </div>
+          <div class="detail-row" v-if="couponActivity.couponActivityType === 'SPECIFY' || couponActivity.couponActivityType === 'AUTO_COUPON'">
+            <div class="label">活动范围</div>
+            <div class="value">
+              <span v-if="couponActivity.activityScope === 'ALL'">全部会员</span>
+              <span v-else>指定会员</span>
+            </div>
+          </div>
+          <div class="detail-row">
+            <div class="label">活动时间</div>
+            <div class="value">{{ couponActivity.startTime }}～{{ couponActivity.endTime }}</div>
+          </div>
+          <div class="detail-row">
+            <div class="label">活动状态</div>
+            <div class="value">
+              <t-tag v-if="couponActivity.promotionStatus === 'NEW'" theme="primary" size="small" variant="light">未开始</t-tag>
+              <t-tag v-else-if="couponActivity.promotionStatus === 'START'" theme="success" size="small" variant="light">已开始</t-tag>
+              <t-tag v-else-if="couponActivity.promotionStatus === 'END'" theme="danger" size="small" variant="light">已结束</t-tag>
+              <t-tag v-else-if="couponActivity.promotionStatus === 'CLOSE'" theme="danger" size="small" variant="light">已关闭</t-tag>
+              <t-tag v-else size="small" variant="light">未知</t-tag>
+            </div>
           </div>
-          <h4>优惠券列表</h4>
-          <Table :columns="couponColumn" :data="couponData" ref="table"> </Table>
-          <template v-if="couponActivity.activityScopeInfo && memberData.length > 0">
-            <h4 class="mt_10">会员列表列表</h4>
-            <Table :columns="memberColumn" :data="memberData"></Table>
-          </template>
         </div>
-      </Form>
-    </div>
+      </div>
+    </t-card>
 
-    <div class="footer">
-      <Button type="primary" @click="back">返回活动列表</Button>
+    <t-card style="margin-bottom: 12px">
+      <div class="detail-section">
+        <div class="detail-title">优惠券列表</div>
+        <t-table :columns="couponColumn" :data="couponData" rowKey="id"></t-table>
+      </div>
+    </t-card>
+
+    <t-card v-if="couponActivity.activityScopeInfo && memberData.length > 0">
+      <div class="detail-section">
+        <div class="detail-title">会员列表</div>
+        <t-table :columns="memberColumn" :data="memberData" rowKey="id"></t-table>
+      </div>
+    </t-card>
+
+    <div class="mt_10" style="display: flex; justify-content: flex-end">
+      <t-button variant="text" @click="back">返回活动列表</t-button>
     </div>
   </div>
 </template>
 
 <script>
 import { getCouponActivity } from "@/api/promotion";
+import { MessagePlugin } from "tdesign-vue";
 
 export default {
   name: "coupon-activity-info",
@@ -65,57 +80,15 @@ export default {
       id: this.$route.query.id, //表单id
       couponActivity: {}, //券活动
       couponColumn: [
-        {
-          title: "优惠券名称",
-          key: "couponName",
-        },
-        {
-          title: "优惠券金额",
-          key: "price",
-          render: (h, params) => {
-            let text = "未知";
-            if (params.row.couponType === "DISCOUNT") {
-              text = params.row.couponDiscount + "折";
-              return h("div", [text]);
-            } else if (params.row.couponType === "PRICE") {
-              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-
-            }else{
-              return h("div", [text]);
-            }
-
-
-
-          },
-        },
-        {
-          title: "优惠券类型",
-          key: "couponType",
-          render: (h, params) => {
-            let text = "未知";
-            if (params.row.couponType == "DISCOUNT") {
-              text = "打折";
-            } else if (params.row.couponType == "PRICE") {
-              text = "减免现金";
-            }
-            return h("div", [text]);
-          },
-        },
-        {
-          title: "赠送数量",
-          key: "num",
-        },
+        { title: "优惠券名称", colKey: "couponName" },
+        { title: "优惠券金额", colKey: "price", cell: (h, { row }) => row.couponType === 'DISCOUNT' ? h('div', [row.couponDiscount + '折']) : row.couponType === 'PRICE' ? h('priceColorScheme', { props: { value: row.price, color: this.$mainColor } }) : h('div', ['未知']) },
+        { title: "优惠券类型", colKey: "couponType", cell: (h, { row }) => row.couponType === 'DISCOUNT' ? h('div', ['打折']) : row.couponType === 'PRICE' ? h('div', ['减免现金']) : h('div', ['未知']) },
+        { title: "赠送数量", colKey: "num" },
       ],
       couponData: [],
       memberColumn: [
-        {
-          title: "会员id",
-          key: "id",
-        },
-        {
-          title: "昵称",
-          key: "nickName",
-        },
+        { title: "会员id", colKey: "id" },
+        { title: "昵称", colKey: "nickName" },
       ],
       memberData: [],
     };
@@ -141,51 +114,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/*选择商品品类*/
-.content-goods-publish {
-  padding: 15px;
-  margin: 0 auto;
-  text-align: center;
+.detail-title {
+  margin-bottom: 10px;
+  padding: 0 10px;
   border: 1px solid #ddd;
-  background: none repeat 0 0 #fff;
-  height: 100%;
-  margin-bottom: 20px;
+  background-color: #f8f8f8;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+  line-height: 40px;
+  text-align: left;
 }
-
-div.base-info-item {
-  h4 {
-    margin-bottom: 10px;
-    padding: 0 10px;
-    border: 1px solid #ddd;
-    background-color: #f8f8f8;
-    font-weight: bold;
-    color: #333;
-    font-size: 14px;
-    line-height: 40px;
-    text-align: left;
-  }
-
-  .form-item-view {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding-left: 40px;
-
-    .shop-category-text {
-      font-size: 12px;
-    }
-  }
+.detail-grid {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  grid-row-gap: 12px;
+  grid-column-gap: 16px;
 }
-/** 底部步骤 */
-.footer {
-  width: 88.7%;
-  padding: 10px;
-  background-color: #ffc;
-  position: fixed;
-  bottom: 0px;
-  left: 10%;
-  text-align: center;
-  z-index: 9999;
+.detail-row .label {
+  color: #666;
+}
+.detail-row .value {
+  color: #333;
 }
 </style>