1

src/views/shop/shopGift/components/makeCard.vue

@@ -0,0 +1,388 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    title="生成礼品卡"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="礼品劵" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入礼品卡名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="关联商品" name="goodsId">
+        <a-select
+          v-model:value="form.goodsId"
+          placeholder="请选择关联商品"
+          show-search
+          :filter-option="false"
+          :loading="goodsLoading"
+          @search="searchGoods"
+          @change="onGoodsChange"
+          @dropdown-visible-change="onDropdownVisibleChange"
+        >
+          <a-select-option
+            v-for="goods in goodsList"
+            :key="goods.goodsId"
+            :value="goods.goodsId"
+          >
+            <div class="goods-option">
+              <span>{{ goods.name }}</span>
+              <a-tag color="blue" style="margin-left: 8px"
+                >¥{{ goods.price || 0 }}</a-tag
+              >
+            </div>
+          </a-select-option>
+          <a-select-option v-if="goodsList.length === 0" disabled>
+            <div style="text-align: center; color: #999">
+              {{ goodsLoading ? '加载中...' : '暂无商品数据' }}
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="生成数量" name="num">
+        <a-input-number v-model:value="form.num" :min="0" />
+      </a-form-item>
+      <a-form-item label="使用地址" name="useLocation">
+        <a-input
+          placeholder="请输入使用的门店地址"
+          v-model:value="form.useLocation"
+        />
+      </a-form-item>
+      <a-form-item label="备注信息" name="comments">
+        <a-textarea
+          v-model:value="form.comments"
+          placeholder="请输入备注信息"
+          :rows="3"
+          :maxlength="200"
+          show-count
+        />
+      </a-form-item>
+    </a-form>
+    <!-- 礼品卡预览 -->
+    <div class="gift-card-preview" v-if="form.name">
+      <a-divider orientation="left">
+        <span style="color: #1890ff; font-weight: 600">礼品卡预览</span>
+      </a-divider>
+      <div class="gift-card">
+        <div class="gift-card-header">
+          <div class="gift-card-title">{{ form.name }}</div>
+          <div class="gift-card-status">
+            <a-tag>
+              <span v-if="form.takeTime"
+                >领取时间：{{ formatTime(form.takeTime) }}</span
+              >
+              <span v-else>未领取</span>
+            </a-tag>
+          </div>
+        </div>
+        <div class="gift-card-body">
+          <div class="gift-card-code">
+            <span class="code-label text-gray-50">卡密：</span>
+            <span class="code-value">{{ form.code || '自动生成' }}</span>
+          </div>
+          <div class="gift-card-goods" v-if="selectedGoods">
+            <span class="goods-label text-gray-50">关联商品：</span>
+            <span class="goods-name">{{ selectedGoods.name }}</span>
+            <a-tag color="blue" style="margin-left: 8px"
+              >¥{{ selectedGoods.price }}</a-tag
+            >
+          </div>
+          <div class="gift-card-goods py-2" v-if="selectedGoods">
+            <span class="goods-label">使用地址：</span>
+            <span class="goods-name">{{ form.useLocation }}</span>
+          </div>
+        </div>
+        <div class="gift-card-footer">
+          <div class="gift-card-info text-gray-50">
+            备注: {{ form.comments }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { makeShopGift } from '@/api/shop/shopGift';
+  import { ShopGift } from '@/api/shop/shopGift/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { listShopGoods } from '@/api/shop/shopGoods';
+  import { ShopGoods } from '@/api/shop/shopGoods/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  // 商品列表
+  const goodsList = ref<ShopGoods[]>([]);
+  // 商品加载状态
+  const goodsLoading = ref(false);
+  // 选中的商品
+  const selectedGoods = ref<ShopGoods | null>(null);
+
+  const rules = reactive({
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    goodsId: [{ required: true, message: '请选择商品', trigger: 'change' }],
+    num: [{ required: true, message: '请输入数量', trigger: 'blur' }]
+  });
+
+  // 用户信息
+  const form = reactive<ShopGift>({
+    id: undefined,
+    name: undefined,
+    code: undefined,
+    goodsId: undefined,
+    takeTime: undefined,
+    operatorUserId: undefined,
+    isShow: undefined,
+    status: undefined,
+    useLocation: undefined,
+    comments: undefined,
+    sortNumber: undefined,
+    userId: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    num: 1000
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const getGoodsList = async () => {
+    goodsList.value = await listShopGoods();
+  };
+  getGoodsList();
+
+  /* 搜索商品 */
+  const searchGoods = async (value: string) => {
+    if (value && value.trim()) {
+      goodsLoading.value = true;
+      try {
+        const res = await listShopGoods({ keywords: value.trim() });
+        goodsList.value = res || [];
+        console.log('搜索到的商品:', goodsList.value);
+      } catch (e) {
+        console.error('搜索商品失败:', e);
+        goodsList.value = [];
+      } finally {
+        goodsLoading.value = false;
+      }
+    }
+  };
+
+  /* 下拉框显示状态改变 */
+  const onDropdownVisibleChange = (open: boolean) => {
+    if (open && goodsList.value.length === 0) {
+      // 当下拉框打开且没有数据时，加载默认商品列表
+      getGoodsList();
+    }
+  };
+
+  /* 商品选择改变 */
+  const onGoodsChange = (goodsId: number) => {
+    selectedGoods.value =
+      goodsList.value.find((goods) => goods.goodsId === goodsId) || null;
+    console.log('选中的商品:', selectedGoods.value);
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        makeShopGift(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(() => props.visible, { immediate: true });
+</script>
+
+<style lang="less" scoped>
+  .goods-option,
+  .status-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ant-tag {
+      margin-left: 8px;
+    }
+
+    span {
+      color: #666;
+      font-size: 12px;
+    }
+  }
+
+  .gift-card-preview {
+    margin-top: 24px;
+
+    .gift-card {
+      background: linear-gradient(
+        135deg,
+        #667eea 0%,
+        #764ba2 50%,
+        #f093fb 100%
+      );
+      border-radius: 12px;
+      padding: 20px;
+      color: #333;
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -50px;
+        right: -50px;
+        width: 100px;
+        height: 100px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+      }
+
+      .gift-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .gift-card-title {
+          font-size: 20px;
+          font-weight: bold;
+          color: #f3f3f3;
+        }
+      }
+
+      .gift-card-body {
+        margin-bottom: 16px;
+
+        .gift-card-code {
+          margin-bottom: 12px;
+
+          .code-label {
+            font-weight: 600;
+            color: #f3f3f3;
+          }
+
+          .code-value {
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            background: rgba(255, 255, 255, 0.8);
+            padding: 4px 8px;
+            border-radius: 4px;
+            margin-left: 8px;
+          }
+        }
+
+        .gift-card-goods {
+          .goods-label {
+            font-weight: 600;
+            color: #f3f3f3;
+          }
+
+          .goods-name {
+            margin-left: 8px;
+            color: #f3f3f3;
+          }
+        }
+      }
+
+      .gift-card-footer {
+        padding-top: 16px;
+        border-top: 1px solid rgba(255, 255, 255, 0.3);
+
+        .gift-card-info {
+          font-size: 12px;
+          color: #f3f3f3;
+        }
+      }
+    }
+  }
+
+  :deep(.ant-divider-horizontal.ant-divider-with-text-left) {
+    margin: 24px 0 16px 0;
+
+    .ant-divider-inner-text {
+      padding: 0 16px 0 0;
+    }
+  }
+
+  :deep(.ant-form-item) {
+    margin-bottom: 16px;
+  }
+
+  :deep(.ant-select-selection-item) {
+    display: flex;
+    align-items: center;
+  }
+
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-alert) {
+    .ant-alert-message {
+      font-weight: 600;
+    }
+  }
+</style>