feat(shopGift): 优化礼品卡生成功能

- 新增礼品卡预览功能
- 添加使用地址字段
- 优化商品选择界面
- 增加备注信息字段
- 改进表单样式和布局

.env.development

@@ -1,5 +1,5 @@
 VITE_APP_NAME=后台管理(开发环境)
-#VITE_API_URL=http://127.0.0.1:9200/api
+VITE_API_URL=http://127.0.0.1:9200/api
 #VITE_SERVER_API_URL=http://127.0.0.1:8000/api
 
 

src/api/shop/shopGift/model/index.ts

@@ -14,8 +14,16 @@ export interface ShopGift {
   goodsId?: number;
   // 领取时间
   takeTime?: string;
-  // 操作人
+  // 核销时间
+  verificationTime?: string;
+  // 操作人ID
   operatorUserId?: number;
+  // 操作人
+  operatorUserName?: string;
+  // 操作备注
+  operatorRemarks?: string;
+  // 使用地址
+  useLocation?: string;
   // 是否展示
   isShow?: boolean;
   // 状态, 0上架 1待上架 2待审核 3审核不通过
@@ -26,6 +34,8 @@ export interface ShopGift {
   sortNumber?: number;
   // 用户ID
   userId?: number;
+  // 昵称
+  nickName?: string;
   // 是否删除, 0否, 1是
   deleted?: number;
   // 租户id

src/views/passport/register2/index.vue

@@ -0,0 +1,804 @@
+<template>
+  <div
+      :class="[
+      'login-wrapper',
+      ['', 'login-form-right', 'login-form-left'][direction]
+    ]"
+      :style="{
+      backgroundImage: 'url(' + config?.loginBgImg + ')'
+    }"
+  >
+    <div class="logo-login" v-if="config?.siteName">
+      <img
+          :src="
+          config.sysLogo ||
+          'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg'
+        "
+          class="logo"
+      />
+      <h4>{{ config.siteName }}</h4>
+    </div>
+    <div class="company-name" v-if="config?.loginTitle">{{
+        config?.loginTitle
+      }}
+    </div>
+    <a-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        class="login-form ele-bg-white"
+    >
+      <div class="login-title flex justify-center items-center px-12">
+        <h4
+            class="title-btn"
+        >注册</h4
+        >
+      </div>
+      <template v-if="loginType === 'account'">
+        <a-form-item name="phone">
+          <a-input
+            allow-clear
+            size="large"
+            :maxlength="11"
+            v-model:value="form.phone"
+            :placeholder="`请输入手机号码`"
+          >
+            <template #addonBefore> +86</template>
+          </a-input>
+        </a-form-item>
+        <a-form-item name="code">
+          <div class="login-input-group">
+            <a-input
+              placeholder="请输入验证码"
+              v-model:value="form.code"
+              size="large"
+              :maxlength="6"
+              allow-clear
+              @pressEnter="onLoginBySms"
+            />
+            <a-button
+              class="login-captcha"
+              :disabled="!!countdownTime"
+              @click="openImgCodeModal"
+            >
+              <span v-if="!countdownTime">发送验证码</span>
+              <span v-else>已发送 {{ countdownTime }} s</span>
+            </a-button>
+          </div>
+        </a-form-item>
+        <a-form-item name="companyName">
+          <div class="flex">
+            <a-input
+              allow-clear
+              size="large"
+              placeholder="公众号|小程序名称"
+              v-model:value="form.companyName"
+            >
+            </a-input>
+            <a-button
+              class="ele-btn-icon"
+              size="large"
+              style="margin-left: 10px; width: 137px"
+              @click="openMapPicker"
+            >
+              <AimOutlined />选取
+            </a-button>
+          </div>
+        </a-form-item>
+<!--        <a-form-item name="companyName">-->
+<!--          <a-input-->
+<!--            allow-clear-->
+<!--            size="large"-->
+<!--            :maxlength="11"-->
+<!--            v-model:value="form.companyName"-->
+<!--            :placeholder="`请输入店铺名称`"-->
+<!--          />-->
+<!--        </a-form-item>-->
+<!--        <a-form-item name="email">-->
+<!--          <a-input-->
+<!--            allow-clear-->
+<!--            size="large"-->
+<!--            v-model:value="form.email"-->
+<!--            :placeholder="`(选填)请输入电子邮箱`"-->
+<!--          />-->
+<!--        </a-form-item>-->
+        <a-form-item name="category">
+          <industry-select
+            v-model:value="form.category"
+            valueField="label"
+            allow-clear
+            size="large"
+            placeholder="所属行业"
+            class="ele-fluid"
+            @change="onIndustry"
+          />
+        </a-form-item>
+        <a-form-item>
+          <a-checkbox v-model:checked="form.remember">
+            同意 <a href="https://website.websoft.top/xieyi/01.html" target="_blank">《服务协议及隐私政策》</a>
+          </a-checkbox>
+        </a-form-item>
+        <a-form-item>
+          <a-button
+              block
+              size="large"
+              type="primary"
+              :disabled="!form.remember"
+              :loading="loading"
+              @click="submit"
+          >
+            注册
+          </a-button>
+          <div class="register text-center pt-5"><a @click="push('/login')">已有账号，立即登录</a></div>
+        </a-form-item>
+      </template>
+      <template v-if="loginType === 'sms'">
+        <a-form-item name="phone">
+          <a-input
+              allow-clear
+              size="large"
+              :maxlength="11"
+              v-model:value="form.phone"
+              :placeholder="`请输入手机号码`"
+          >
+            <template #addonBefore> +86</template>
+          </a-input>
+        </a-form-item>
+        <a-form-item name="code">
+          <div class="login-input-group">
+            <a-input
+                placeholder="请输入验证码"
+                v-model:value="form.code"
+                size="large"
+                :maxlength="6"
+                allow-clear
+                @pressEnter="onLoginBySms"
+            />
+            <a-button
+                class="login-captcha"
+                :disabled="!!countdownTime"
+                @click="openImgCodeModal"
+            >
+              <span v-if="!countdownTime">发送验证码</span>
+              <span v-else>已发送 {{ countdownTime }} s</span>
+            </a-button>
+          </div>
+        </a-form-item>
+        <a-form-item>
+          <a-button
+              block
+              size="large"
+              type="primary"
+              :loading="loading"
+              @click="onLoginBySms"
+          >
+            {{ loading ? t('login.loading') : t('login.login') }}
+          </a-button>
+        </a-form-item>
+      </template>
+    </a-form>
+    <div class="login-copyright">
+      <a-space>
+        <span>© {{ new Date().getFullYear() }}</span>
+        <span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
+      </a-space>
+    </div>
+    <!-- 编辑弹窗 -->
+    <a-modal
+        :width="340"
+        :footer="null"
+        title="发送验证码"
+        v-model:visible="visible"
+    >
+      <div class="login-input-group" style="margin-bottom: 16px">
+        <a-input
+            v-model:value="imgCode"
+            :maxlength="5"
+            size="large"
+            placeholder="请输入图形验证码"
+            allow-clear
+            @pressEnter="sendCode"
+        />
+        <a-button class="login-captcha">
+          <img alt="" :src="captcha" @click="changeCaptcha"/>
+        </a-button>
+      </div>
+      <a-button
+          block
+          size="large"
+          type="primary"
+          :loading="codeLoading"
+          @click="sendCode"
+      >
+        立即发送
+      </a-button>
+    </a-modal>
+  </div>
+  <!-- 地图位置选择弹窗 -->
+  <ele-map-picker
+    :need-city="true"
+    :dark-mode="darkMode"
+    v-model:visible="showMap"
+    :center="[108.374959, 22.767024]"
+    :search-type="1"
+    :zoom="12"
+    @done="onDone"
+  />
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, unref, watch} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {useRouter} from 'vue-router';
+import {getTenantId} from '@/utils/domain';
+import {Form, message} from 'ant-design-vue';
+import { AimOutlined } from '@ant-design/icons-vue';
+import { storeToRefs } from 'pinia';
+import {goHomeRoute, cleanPageTabs} from '@/utils/page-tab-util';
+import {loginBySms, getCaptcha} from '@/api/passport/login';
+import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
+import {TEMPLATE_ID, THEME_STORE_NAME} from '@/config/setting';
+import {sendSmsCaptcha} from '@/api/passport/login';
+import useFormData from '@/utils/use-form-data';
+import {FormInstance} from 'ant-design-vue/es/form';
+import {configWebsiteField} from '@/api/cms/cmsWebsiteField';
+import {Config} from '@/api/cms/cmsWebsiteField/model';
+import {phoneReg} from 'ele-admin-pro';
+import {push} from "@/utils/common";
+import {useThemeStore} from "@/store/modules/theme";
+import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
+import {createCmsWebSite} from "@/api/layout";
+
+const useForm = Form.useForm;
+const {currentRoute} = useRouter();
+const {t} = useI18n();
+const { locale } = useI18n();
+
+// 登录框方向, 0 居中, 1 居右, 2 居左
+const direction = ref(0);
+// 加载状态
+const loading = ref(false);
+// 是否显示tenantId填写输入框
+const showTenantId = ref(true);
+const loginType = ref('account');
+const config = ref<Config>();
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const { darkMode } = storeToRefs(themeStore);
+
+// 配置信息
+const {form} = useFormData<CmsWebsite>({
+// 站点ID
+  websiteId: undefined,
+  // 网站名称
+  websiteName: undefined,
+  // 网站标识
+  websiteCode: undefined,
+  // 网站LOGO
+  websiteIcon: undefined,
+  // 网站LOGO
+  websiteLogo: undefined,
+  // 网站LOGO(深色模式)
+  websiteDarkLogo: undefined,
+  // 网站类型
+  websiteType: undefined,
+  // 网站关键词
+  keywords: undefined,
+  // 域名前缀
+  prefix: undefined,
+  // 绑定域名
+  domain: undefined,
+  // 全局样式
+  style: undefined,
+  // 后台管理地址
+  adminUrl: undefined,
+  // 应用版本 10标准版 20专业版 30永久授权
+  version: undefined,
+  // 服务到期时间
+  expirationTime: undefined,
+  // 模版ID
+  templateId: TEMPLATE_ID,
+  // 行业类型(父级)
+  industryParent: undefined,
+  // 行业类型(子级)
+  industryChild: undefined,
+  // 企业ID
+  companyId: undefined,
+  // 所在国家
+  country: undefined,
+  // 所在省份
+  province: undefined,
+  // 所在城市
+  city: undefined,
+  // 所在辖区
+  region: undefined,
+  // 经度
+  longitude: undefined,
+  // 纬度
+  latitude: undefined,
+  // 街道地址
+  address: undefined,
+  // 联系电话
+  phone: undefined,
+  // 电子邮箱
+  email: undefined,
+  // ICP备案号
+  icpNo: undefined,
+  // 公安备案
+  policeNo: undefined,
+  // 备注
+  comments: undefined,
+  // 是否推荐
+  recommend: undefined,
+  // 是否运行中
+  running: undefined,
+  // 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
+  status: undefined,
+  // 维护说明
+  statusText: undefined,
+  // 关闭说明
+  statusClose: undefined,
+  // 全局样式
+  styles: undefined,
+  // 语言
+  lang: undefined,
+  // 排序号
+  sortNumber: undefined,
+  // 用户ID
+  userId: undefined,
+  // 是否删除, 0否, 1是
+  deleted: undefined,
+  // 租户id
+  tenantId: undefined,
+  // 创建时间
+  createTime: undefined,
+  // 修改时间
+  updateTime: undefined,
+  // 网站配置
+  config: undefined,
+  // 短信验证码
+  smsCode: undefined,
+  // 短信验证码
+  code: undefined,
+  // 是否管理员
+  isSuperAdmin: true,
+  // 企业名称
+  companyName: undefined,
+});
+
+// 验证码 base64 数据
+const captcha = ref('');
+// 验证码内容, 实际项目去掉
+const text = ref('');
+// 是否显示图形验证码弹窗
+const visible = ref(false);
+// 图形验证码
+const imgCode = ref('');
+// 发送验证码按钮loading
+const codeLoading = ref(false);
+// 验证码倒计时时间
+const countdownTime = ref(0);
+// 验证码倒计时定时器
+let countdownTimer: number | null = null;
+// 是否显示地图选择弹窗
+const showMap = ref(false);
+
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+
+// 表单验证规则
+const rules = reactive({
+  companyName: [
+    {
+      required: true,
+      message: '请输入店铺名称',
+      type: 'string'
+    }
+  ],
+  category: [
+    {
+      required: true,
+      message: '请选择行业分类',
+      type: 'string'
+    }
+  ],
+  phone: [
+    {
+      pattern: phoneReg,
+      required: true,
+      type: 'string',
+      message: '手机号格式不正确',
+      trigger: 'blur'
+    }
+  ],
+  // address: [
+  //   {
+  //     required: true,
+  //     message: '请选择店铺位置',
+  //     type: 'string'
+  //   }
+  // ],
+  password: [
+    {
+      required: true,
+      message: t('login.password'),
+      type: 'string'
+    }
+  ],
+  code: [
+    {
+      required: true,
+      message: t('login.code'),
+      type: 'string'
+    }
+  ],
+  smsCode: [
+    {
+      required: true,
+      message: t('login.code'),
+      type: 'string'
+    }
+  ]
+});
+
+/* 显示发送短信验证码弹窗 */
+const openImgCodeModal = () => {
+  if (!form.phone) {
+    message.error('请输入手机号码');
+    return;
+  }
+  imgCode.value = '';
+  changeCaptcha();
+  visible.value = true;
+};
+
+/* 发送短信验证码 */
+const sendCode = () => {
+  if (!imgCode.value) {
+    message.error('请输入图形验证码');
+    return;
+  }
+  if (text.value !== imgCode.value.toLowerCase()) {
+    message.error('图形验证码不正确');
+    return;
+  }
+  codeLoading.value = true;
+  sendSmsCaptcha({phone: form.phone}).then(() => {
+    message.success('短信验证码发送成功, 请注意查收!');
+    visible.value = false;
+    codeLoading.value = false;
+    countdownTime.value = 30;
+    // 开始对按钮进行倒计时
+    countdownTimer = window.setInterval(() => {
+      if (countdownTime.value <= 1) {
+        countdownTimer && clearInterval(countdownTimer);
+        countdownTimer = null;
+      }
+      countdownTime.value--;
+    }, 1000);
+  });
+};
+
+const {resetFields} = useForm(form, rules);
+
+const goHome = () => {
+  const {query} = unref(currentRoute);
+  goHomeRoute(query.from as string);
+  localStorage.removeItem(THEME_STORE_NAME);
+};
+
+const onIndustry = (item: any) => {
+  form.industryParent = item[0];
+  form.industryChild = item[1];
+  form.category = `${item[0]}/${item[1]}`;
+};
+
+/* 打开位置选择 */
+const openMapPicker = () => {
+  showMap.value = true;
+};
+
+/* 地图选择后回调 */
+const onDone = (location: CenterPoint) => {
+  if (location) {
+    console.log(location);
+    form.companyName = `${location.name}`;
+    form.province = `${location.city?.province}`;
+    form.city = `${location.city?.city}`;
+    form.region = `${location.city?.district}`;
+    form.address = `${location.address}`;
+    form.longitude = `${location.lng}`;
+    form.latitude = `${location.lat}`;
+  }
+  showMap.value = false;
+};
+
+const onLoginBySms = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        form.code = form.smsCode?.toLowerCase();
+        loginBySms(form)
+            .then((msg) => {
+              message.success(msg);
+              loading.value = false;
+              resetFields();
+              cleanPageTabs();
+              goHome();
+            })
+            .catch((e: Error) => {
+              message.error(e.message);
+              loading.value = false;
+            });
+      })
+      .catch(() => {
+      });
+};
+
+/* 保存编辑 */
+const submit = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        createCmsWebSite(form)
+            .then((msg) => {
+              setTimeout(() => {
+                // 登录成功
+                message.success(msg);
+                loading.value = false;
+                resetFields();
+                cleanPageTabs();
+                goHome();
+              }, 2000)
+            })
+            .catch(() => {
+              message.error('该手机号码已经被注册');
+              loading.value = false;
+            });
+      })
+      .catch(() => {
+      });
+};
+
+/* 获取图形验证码 */
+const changeCaptcha = () => {
+  configWebsiteField({
+    lang: locale.value
+  }).then((data) => {
+    config.value = data;
+  });
+  // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
+  getCaptcha()
+      .then((data) => {
+        captcha.value = data.base64;
+        // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
+        text.value = data.text;
+        // 自动回填验证码, 实际项目去掉这个
+        // form.code = data.text;
+        // resetFields();
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+};
+
+// 首次加载
+changeCaptcha();
+
+watch(
+    currentRoute,
+    () => {
+      // 解析二级域名获取租户ID
+      const tenantId = getTenantId();
+      if (tenantId) {
+        form.tenantId = Number(tenantId);
+        showTenantId.value = false;
+      }
+      const tid = localStorage.getItem('TenantId');
+      if (tid) {
+        form.tenantId = Number(tid);
+        showTenantId.value = false;
+      }
+    },
+    {immediate: true}
+);
+</script>
+
+<style lang="less" scoped>
+/* 背景 */
+.login-wrapper {
+  padding: 48px 16px 0 16px;
+  position: relative;
+  box-sizing: border-box;
+  background-image: url('@/assets/bg-2.jpeg');
+  background-color: var(--grey-5);
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-height: 100vh;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.company-name {
+  position: absolute;
+  top: 17%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 24px;
+  color: #ffffff;
+}
+
+/* 卡片 */
+.login-form {
+  width: 450px;
+  margin: 0 auto;
+  max-width: 100%;
+  padding: 0 28px;
+  box-sizing: border-box;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  position: relative;
+  z-index: 2;
+
+  h4 {
+    padding: 22px 0;
+    text-align: center;
+  }
+
+  .title-btn {
+    cursor: pointer;
+  }
+
+  .login-title {
+    display: flex;
+    justify-content: space-around;
+    line-height: 50px;
+
+    .active {
+      color: #007dff;
+    }
+  }
+}
+
+.login-form-right .login-form {
+  margin: 0 15% 0 auto;
+}
+
+.login-form-left .login-form {
+  margin: 0 auto 0 15%;
+}
+
+/* 验证码 */
+.login-input-group {
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+
+  :deep(.ant-input-affix-wrapper) {
+    flex: 1;
+  }
+
+  .login-captcha {
+    width: 102px;
+    height: 40px;
+    margin-left: 10px;
+    padding: 0;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+/* 第三方登录图标 */
+.login-oauth-icon {
+  color: #fff;
+  padding: 5px;
+  margin: 0 12px;
+  font-size: 18px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.work-icon {
+  width: 50px;
+  height: 50px;
+}
+
+/* 底部版权 */
+.login-copyright {
+  color: #eee;
+  text-align: center;
+  padding: 48px 0 22px 0;
+  position: relative;
+  z-index: 1;
+}
+
+/* 响应式 */
+@media screen and (min-height: 640px) {
+  .login-wrapper {
+    padding-top: 0;
+  }
+
+  .login-form {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: -230px;
+  }
+
+  .login-form-right .login-form,
+  .login-form-left .login-form {
+    left: auto;
+    right: 15%;
+    transform: translateX(0);
+    margin: -230px auto auto auto;
+  }
+
+  .login-form-left .login-form {
+    right: auto;
+    left: 15%;
+  }
+
+  .login-copyright {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .login-form-right .login-form,
+  .login-form-left .login-form {
+    left: 50%;
+    right: auto;
+    margin-left: 0;
+    margin-right: auto;
+    transform: translateX(-50%);
+  }
+}
+
+.wwLogin_qrcode_head {
+  padding: 10px 0 40px 0 !important;
+}
+
+.logo-login {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  img {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+  }
+
+  h4 {
+    margin-left: 6px;
+    color: #ffffff;
+    font-size: 20px;
+  }
+}
+</style>

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

@@ -20,10 +20,10 @@
       "
     >
       <a-form-item label="礼品卡" name="name">
-        <a-input allow-clear placeholder="请输入礼品卡名称" v-model:value="form.name" />
+        <a-input allow-clear placeholder="请输入礼品卡名称" v-model:value="form.name"/>
       </a-form-item>
       <a-form-item label="关联商品" name="goodsId">
-        <a-select placeholder="请选择关联商品"  v-model:value="form.goodsId">
+        <a-select placeholder="请选择关联商品" v-model:value="form.goodsId">
           <a-select-option
             v-for="item in goodsList"
             :key="item.goodsId"
@@ -33,108 +33,349 @@
           </a-select-option>
         </a-select>
       </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-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 {ref, reactive, watch} from 'vue';
-  import { Form, message } from 'ant-design-vue';
+import {Form, message} from 'ant-design-vue';
-  import { makeShopGift } from '@/api/shop/shopGift';
+import {makeShopGift} from '@/api/shop/shopGift';
-  import { ShopGift } from '@/api/shop/shopGift/model';
+import {ShopGift} from '@/api/shop/shopGift/model';
-  import { useThemeStore } from '@/store/modules/theme';
+import {useThemeStore} from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
+import {storeToRefs} from 'pinia';
-  import { FormInstance } from 'ant-design-vue/es/form';
+import {FormInstance} from 'ant-design-vue/es/form';
-  import { listShopGoods } from '@/api/shop/shopGoods';
+import {listShopGoods} from '@/api/shop/shopGoods';
-  import { ShopGoods } from '@/api/shop/shopGoods/model';
+import {ShopGoods} from '@/api/shop/shopGoods/model';
 
-  // 是否开启响应式布局
+// 是否开启响应式布局
-  const themeStore = useThemeStore();
+const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
+const {styleResponsive} = storeToRefs(themeStore);
 
-  const props = defineProps<{
+const props = defineProps<{
-    // 弹窗是否打开
+  // 弹窗是否打开
-    visible: boolean;
+  visible: boolean;
-  }>();
+}>();
 
-  const emit = defineEmits<{
+const emit = defineEmits<{
-    (e: 'done'): void;
+  (e: 'done'): void;
-    (e: 'update:visible', visible: boolean): void;
+  (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();
 
-  // 提交状态
+// 提交状态
-  const loading = ref(false);
+const loading = ref(false);
-  // 是否显示最大化切换按钮
+// 是否显示最大化切换按钮
-  const maxable = ref(true);
+const maxable = ref(true);
-  // 表格选中数据
+// 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
+const formRef = ref<FormInstance | null>(null);
+// 商品列表
+const goodsList = ref<ShopGoods[]>([]);
+// 商品加载状态
+const goodsLoading = ref(false);
+// 选中的商品
+const selectedGoods = ref<ShopGoods | null>(null);
 
-  const rules = reactive({
+const rules = reactive({
-    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  name: [{required: true, message: '请输入名称', trigger: 'blur'}],
-    goodsId: [{ required: true, message: '请选择商品', trigger: 'change' }],
+  goodsId: [{required: true, message: '请选择商品', trigger: 'change'}],
-    num: [{ required: true, message: '请输入数量', trigger: 'blur' }]
+  num: [{required: true, message: '请输入数量', trigger: 'blur'}]
-  });
+});
 
-  // 用户信息
+// 用户信息
-  const form = reactive<ShopGift>({
+const form = reactive<ShopGift>({
-    id: undefined,
+  id: undefined,
-    name: undefined,
+  name: undefined,
-    code: undefined,
+  code: undefined,
-    goodsId: undefined,
+  goodsId: undefined,
-    takeTime: undefined,
+  takeTime: undefined,
-    operatorUserId: undefined,
+  operatorUserId: undefined,
-    isShow: undefined,
+  isShow: undefined,
-    status: undefined,
+  status: undefined,
-    comments: undefined,
+  useLocation: undefined,
-    sortNumber: undefined,
+  comments: undefined,
-    userId: undefined,
+  sortNumber: undefined,
-    deleted: undefined,
+  userId: undefined,
-    tenantId: undefined,
+  deleted: undefined,
-    createTime: undefined,
+  tenantId: undefined,
-    updateTime: undefined,
+  createTime: undefined,
-    num: 1000
+  updateTime: undefined,
-  });
+  num: 1000
+});
 
-  /* 更新visible */
+/* 更新visible */
-  const updateVisible = (value: boolean) => {
+const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
+  emit('update:visible', value);
-  };
+};
 
-  const goodsList = ref<ShopGoods[]>([]);
+const getGoodsList = async () => {
-  const getGoodsList = async () => {
+  goodsList.value = await listShopGoods();
-    goodsList.value = await listShopGoods();
+};
-  };
+getGoodsList();
-  getGoodsList();
 
-  /* 保存编辑 */
+/* 搜索商品 */
-  const save = () => {
+const searchGoods = async (value: string) => {
-    if (!formRef.value) {
+  if (value && value.trim()) {
-      return;
+    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;
     }
-    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 });
+/* 下拉框显示状态改变 */
+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>

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

@@ -1,13 +1,16 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-    <a-button type="primary" class="ele-btn-icon" @click="add">
+<!--    <a-button type="primary" class="ele-btn-icon" @click="add">-->
+<!--      <template #icon>-->
+<!--        <PlusOutlined />-->
+<!--      </template>-->
+<!--      <span>添加</span>-->
+<!--    </a-button>-->
+    <a-button type="primary"  class="ele-btn-icon" @click="openMultiAdd">
       <template #icon>
         <PlusOutlined />
       </template>
-      <span>添加</span>
-    </a-button>
-    <a-button class="ele-btn-icon" @click="openMultiAdd">
       <span>批量生成</span>
     </a-button>
     <a-button class="ele-btn-icon" @click="exportData">

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

@@ -1,11 +1,11 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="1000"
+    width="65%"
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
-    :title="isUpdate ? '编辑礼品卡' : '新增礼品卡'"
+    :title="isUpdate ? '礼品卡详情' : '礼品卡详情'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
     @ok="save"
@@ -27,6 +27,7 @@
           <a-form-item label="礼品卡名称" name="name">
             <a-input
               placeholder="请输入礼品卡名称"
+              :disabled="isUpdate"
               v-model:value="form.name"
             />
           </a-form-item>
@@ -36,9 +37,10 @@
             <a-input
               placeholder="请输入礼品卡密钥"
               v-model:value="form.code"
+              :disabled="isUpdate"
             >
               <template #suffix>
-                <a-button type="link" size="small" @click="generateCode">
+                <a-button v-if="!isUpdate" type="link" size="small" @click="generateCode">
                   生成
                 </a-button>
               </template>
@@ -57,6 +59,7 @@
               :filter-option="false"
               :loading="goodsLoading"
               @search="searchGoods"
+              :disabled="isUpdate"
               @change="onGoodsChange"
               @dropdown-visible-change="onDropdownVisibleChange"
             >
@@ -74,7 +77,7 @@
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="12">
+        <a-col :span="12" v-if="!isUpdate">
           <a-form-item label="生成数量" name="num">
             <a-input-number
               :min="1"
@@ -87,64 +90,85 @@
             </a-input-number>
           </a-form-item>
         </a-col>
+        <a-col :span="12">
+          <a-form-item label="使用地址" name="useLocation">
+            <a-input
+              placeholder="请输入使用的门店地址"
+              v-model:value="form.useLocation"
+              :disabled="isUpdate"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="备注信息" name="comments">
+            <a-textarea
+              v-model:value="form.comments"
+              :disabled="isUpdate"
+              placeholder="请输入备注信息"
+              :rows="3"
+              :maxlength="200"
+              show-count
+            />
+          </a-form-item>
+        </a-col>
       </a-row>
 
       <!-- 状态设置 -->
-      <a-divider orientation="left">
+      <!--      <a-divider orientation="left">-->
-        <span style="color: #1890ff; font-weight: 600;">状态设置</span>
+      <!--        <span style="color: #1890ff; font-weight: 600;">状态设置</span>-->
-      </a-divider>
+      <!--      </a-divider>-->
 
-      <a-row :gutter="16">
+      <!--      <a-row :gutter="16">-->
-        <a-col :span="8">
+      <!--        <a-col :span="8">-->
-          <a-form-item label="上架状态" name="status">
+      <!--          <a-form-item label="上架状态" name="status">-->
-            <a-select v-model:value="form.status" placeholder="请选择上架状态">
+      <!--            <a-select v-model:value="form.status" placeholder="请选择上架状态">-->
-              <a-select-option :value="0">
+      <!--              <a-select-option :value="0">-->
-                <div class="status-option">
+      <!--                <div class="status-option">-->
-                  <a-tag color="success">已上架</a-tag>
+      <!--                  <a-tag color="success">已上架</a-tag>-->
-                  <span>正常销售</span>
+      <!--                  <span>正常销售</span>-->
-                </div>
+      <!--                </div>-->
-              </a-select-option>
+      <!--              </a-select-option>-->
-              <a-select-option :value="1">
+      <!--              <a-select-option :value="1">-->
-                <div class="status-option">
+      <!--                <div class="status-option">-->
-                  <a-tag color="warning">待上架</a-tag>
+      <!--                  <a-tag color="warning">待上架</a-tag>-->
-                  <span>准备上架</span>
+      <!--                  <span>准备上架</span>-->
-                </div>
+      <!--                </div>-->
-              </a-select-option>
+      <!--              </a-select-option>-->
-              <a-select-option :value="2">
+      <!--              <a-select-option :value="2">-->
-                <div class="status-option">
+      <!--                <div class="status-option">-->
-                  <a-tag color="processing">待审核</a-tag>
+      <!--                  <a-tag color="processing">待审核</a-tag>-->
-                  <span>等待审核</span>
+      <!--                  <span>等待审核</span>-->
-                </div>
+      <!--                </div>-->
-              </a-select-option>
+      <!--              </a-select-option>-->
-              <a-select-option :value="3">
+      <!--              <a-select-option :value="3">-->
-                <div class="status-option">
+      <!--                <div class="status-option">-->
-                  <a-tag color="error">审核不通过</a-tag>
+      <!--                  <a-tag color="error">审核不通过</a-tag>-->
-                  <span>审核失败</span>
+      <!--                  <span>审核失败</span>-->
-                </div>
+      <!--                </div>-->
-              </a-select-option>
+      <!--              </a-select-option>-->
-            </a-select>
+      <!--            </a-select>-->
-          </a-form-item>
+      <!--          </a-form-item>-->
-        </a-col>
+      <!--        </a-col>-->
-        <a-col :span="8">
+      <!--        <a-col :span="8">-->
-          <a-form-item label="展示状态" name="isShow">
+      <!--          <a-form-item label="展示状态" name="isShow">-->
-            <a-switch
+      <!--            <a-switch-->
-              v-model:checked="form.isShow"
+      <!--              v-model:checked="form.isShow"-->
-              checked-children="展示"
+      <!--              checked-children="展示"-->
-              un-checked-children="隐藏"
+      <!--              un-checked-children="隐藏"-->
-            />
+      <!--            />-->
-          </a-form-item>
+      <!--          </a-form-item>-->
-        </a-col>
+      <!--        </a-col>-->
-        <a-col :span="8">
+      <!--        <a-col :span="8">-->
-          <a-form-item label="排序" name="sortNumber">
+      <!--          <a-form-item label="排序" name="sortNumber">-->
-            <a-input-number
+      <!--            <a-input-number-->
-              :min="0"
+      <!--              :min="0"-->
-              placeholder="数字越小越靠前"
+      <!--              placeholder="数字越小越靠前"-->
-              v-model:value="form.sortNumber"
+      <!--              v-model:value="form.sortNumber"-->
-              style="width: 100%"
+      <!--              style="width: 100%"-->
-            />
+      <!--            />-->
-          </a-form-item>
+      <!--          </a-form-item>-->
-        </a-col>
+      <!--        </a-col>-->
-      </a-row>
+      <!--      </a-row>-->
 
       <!-- 使用信息 -->
       <a-divider orientation="left">
@@ -157,6 +181,7 @@
             <a-date-picker
               v-model:value="form.takeTime"
               placeholder="请选择领取时间"
+              :disabled="isUpdate"
               show-time
               style="width: 100%"
             />
@@ -168,30 +193,38 @@
               :min="1"
               placeholder="请输入领取用户ID"
               v-model:value="form.userId"
+              :disabled="isUpdate"
               style="width: 100%"
             />
           </a-form-item>
         </a-col>
+        <a-col :span="12">
+          <a-form-item label="操作人ID" name="operatorUserId">
+            <a-input-number
+              :min="1"
+              placeholder="请输入操作人用户ID"
+              v-model:value="form.operatorUserId"
+              :disabled="isUpdate"
+              style="width: 300px"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="操作员备注" name="userId">
+            <a-textarea
+              v-model:value="form.operatorRemarks"
+              :disabled="isUpdate"
+              placeholder="请输入备注信息"
+              :rows="3"
+              :maxlength="200"
+              show-count
+            />
+          </a-form-item>
+        </a-col>
       </a-row>
 
-<!--      <a-form-item label="操作人ID" name="operatorUserId">-->
-<!--        <a-input-number-->
-<!--          :min="1"-->
-<!--          placeholder="请输入操作人用户ID"-->
-<!--          v-model:value="form.operatorUserId"-->
-<!--          style="width: 300px"-->
-<!--        />-->
-<!--      </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>
 
       <!-- 礼品卡预览 -->
       <div class="gift-card-preview" v-if="form.name">
@@ -202,24 +235,30 @@
           <div class="gift-card-header">
             <div class="gift-card-title">{{ form.name }}</div>
             <div class="gift-card-status">
-              <a-tag :color="getStatusColor()">{{ getStatusText() }}</a-tag>
+              <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">卡密：</span>
+              <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">关联商品：</span>
+              <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">
+            <div class="gift-card-info text-gray-50">
-              <span v-if="form.takeTime">领取时间：{{ formatTime(form.takeTime) }}</span>
+              备注: {{ form.comments }}
-              <span v-else>未领取</span>
             </div>
           </div>
         </div>
@@ -229,313 +268,316 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
+import {ref, reactive, watch} from 'vue';
-  import { Form, message } from 'ant-design-vue';
+import {Form, message} from 'ant-design-vue';
-  import { assignObject } from 'ele-admin-pro';
+import {assignObject} from 'ele-admin-pro';
-  import { addShopGift, updateShopGift } from '@/api/shop/shopGift';
+import {addShopGift, updateShopGift} from '@/api/shop/shopGift';
-  import { ShopGift } from '@/api/shop/shopGift/model';
+import {ShopGift} from '@/api/shop/shopGift/model';
-  import { FormInstance } from 'ant-design-vue/es/form';
+import {FormInstance} from 'ant-design-vue/es/form';
-  import { listShopGoods } from '@/api/shop/shopGoods';
+import {listShopGoods} from '@/api/shop/shopGoods';
-  import { ShopGoods } from '@/api/shop/shopGoods/model';
+import {ShopGoods} from '@/api/shop/shopGoods/model';
-  import dayjs from 'dayjs';
+import dayjs from 'dayjs';
 
-  // 是否是修改
+// 是否是修改
-  const isUpdate = ref(false);
+const isUpdate = ref(false);
-  const useForm = Form.useForm;
+const useForm = Form.useForm;
 
-  const props = defineProps<{
+const props = defineProps<{
-    // 弹窗是否打开
+  // 弹窗是否打开
-    visible: boolean;
+  visible: boolean;
-    // 修改回显的数据
+  // 修改回显的数据
-    data?: ShopGift | null;
+  data?: ShopGift | null;
-  }>();
+}>();
 
-  const emit = defineEmits<{
+const emit = defineEmits<{
-    (e: 'done'): void;
+  (e: 'done'): void;
-    (e: 'update:visible', visible: boolean): void;
+  (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();
 
-  // 提交状态
+// 提交状态
-  const loading = ref(false);
+const loading = ref(false);
-  // 是否显示最大化切换按钮
+// 是否显示最大化切换按钮
-  const maxable = ref(true);
+const maxable = ref(true);
-  // 表格选中数据
+// 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
+const formRef = ref<FormInstance | null>(null);
 
-  // 表单数据
+// 表单数据
-  const form = reactive<ShopGift>({
+const form = reactive<ShopGift>({
-    id: undefined,
+  id: undefined,
-    name: '',
+  name: '',
-    code: '',
+  code: '',
-    goodsId: undefined,
+  goodsId: undefined,
-    takeTime: undefined,
+  takeTime: undefined,
-    operatorUserId: undefined,
+  operatorUserId: undefined,
-    isShow: true,
+  operatorUserName: undefined,
-    status: 0,
+  operatorRemarks: undefined,
-    comments: '',
+  isShow: true,
-    sortNumber: 100,
+  status: 0,
-    userId: undefined,
+  useLocation: '',
-    deleted: 0,
+  comments: '',
-    tenantId: undefined,
+  sortNumber: 100,
-    createTime: undefined,
+  userId: undefined,
-    updateTime: undefined,
+  deleted: 0,
-    num: 1
+  tenantId: undefined,
-  });
+  createTime: undefined,
+  updateTime: undefined,
+  num: 1000
+});
 
-  // 商品列表
+// 商品列表
-  const goodsList = ref<ShopGoods[]>([]);
+const goodsList = ref<ShopGoods[]>([]);
-  // 商品加载状态
+// 商品加载状态
-  const goodsLoading = ref(false);
+const goodsLoading = ref(false);
-  // 选中的商品
+// 选中的商品
-  const selectedGoods = ref<ShopGoods | null>(null);
+const selectedGoods = ref<ShopGoods | null>(null);
 
-  /* 更新visible */
+/* 更新visible */
-  const updateVisible = (value: boolean) => {
+const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
+  emit('update:visible', value);
-  };
+};
 
-  // 表单验证规则
+// 表单验证规则
-  const rules = reactive({
+const rules = reactive({
-    name: [
+  name: [
-      {
+    {
-        required: true,
+      required: true,
-        message: '请输入礼品卡名称',
+      message: '请输入礼品卡名称',
-        trigger: 'blur'
+      trigger: 'blur'
-      },
+    },
-      {
+    {
-        min: 2,
+      min: 2,
-        max: 50,
+      max: 50,
-        message: '礼品卡名称长度应在2-50个字符之间',
+      message: '礼品卡名称长度应在2-50个字符之间',
-        trigger: 'blur'
+      trigger: 'blur'
-      }
-    ],
-    code: [
-      {
-        required: true,
-        message: '请输入礼品卡密钥',
-        trigger: 'blur'
-      },
-      {
-        min: 6,
-        max: 32,
-        message: '密钥长度应在6-32个字符之间',
-        trigger: 'blur'
-      }
-    ],
-    goodsId: [
-      {
-        required: true,
-        message: '请选择关联商品',
-        trigger: 'change'
-      }
-    ],
-    num: [
-      {
-        required: true,
-        message: '请输入生成数量',
-        trigger: 'blur'
-      },
-      {
-        validator: (rule: any, value: any) => {
-          if (value && (value < 1 || value > 1000)) {
-            return Promise.reject('生成数量必须在1-1000之间');
-          }
-          return Promise.resolve();
-        },
-        trigger: 'blur'
-      }
-    ],
-    status: [
-      {
-        required: true,
-        message: '请选择上架状态',
-        trigger: 'change'
-      }
-    ]
-  });
-
-  /* 生成密钥 */
-  const generateCode = () => {
-    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
-    let result = '';
-    for (let i = 0; i < 8; i++) {
-      result += chars.charAt(Math.floor(Math.random() * chars.length));
     }
-    form.code = result;
+  ],
-  };
+  code: [
-
+    {
-  /* 搜索商品 */
+      required: true,
-  const searchGoods = async (value: string) => {
+      message: '请输入礼品卡密钥',
-    if (value && value.trim()) {
+      trigger: 'blur'
-      goodsLoading.value = true;
+    },
-      try {
+    {
-        const res = await listShopGoods({ keywords: value.trim() });
+      min: 6,
-        goodsList.value = res || [];
+      max: 32,
-        console.log('搜索到的商品:', goodsList.value);
+      message: '密钥长度应在6-32个字符之间',
-      } catch (e) {
+      trigger: 'blur'
-        console.error('搜索商品失败:', e);
-        goodsList.value = [];
-      } finally {
-        goodsLoading.value = false;
-      }
     }
-  };
+  ],
-
+  goodsId: [
-  /* 下拉框显示状态改变 */
+    {
-  const onDropdownVisibleChange = (open: boolean) => {
+      required: true,
-    if (open && goodsList.value.length === 0) {
+      message: '请选择关联商品',
-      // 当下拉框打开且没有数据时，加载默认商品列表
+      trigger: 'change'
-      getGoodsList();
     }
-  };
+  ],
-
+  num: [
-  /* 商品选择改变 */
+    {
-  const onGoodsChange = (goodsId: number) => {
+      required: true,
-    selectedGoods.value = goodsList.value.find(goods => goods.goodsId === goodsId) || null;
+      message: '请输入生成数量',
-    console.log('选中的商品:', selectedGoods.value);
+      trigger: 'blur'
-  };
+    },
-
+    {
-  /* 获取状态颜色 */
+      validator: (rule: any, value: any) => {
-  const getStatusColor = () => {
+        if (value && (value < 1 || value > 1000)) {
-    const colorMap = {
+          return Promise.reject('生成数量必须在1-1000之间');
-      0: 'success',
-      1: 'warning',
-      2: 'processing',
-      3: 'error'
-    };
-    return colorMap[form.status] || 'default';
-  };
-
-  /* 获取状态文本 */
-  const getStatusText = () => {
-    const textMap = {
-      0: '已上架',
-      1: '待上架',
-      2: '待审核',
-      3: '审核不通过'
-    };
-    return textMap[form.status] || '未知状态';
-  };
-
-  /* 格式化时间 */
-  const formatTime = (time: any) => {
-    if (!time) return '';
-    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
-  };
-
-  const { resetFields } = useForm(form, rules);
-
-  /* 保存编辑 */
-  const save = () => {
-    if (!formRef.value) {
-      return;
-    }
-    formRef.value
-      .validate()
-      .then(() => {
-        loading.value = true;
-        const formData = {
-          ...form
-        };
-
-        // 处理时间字段转换
-        if (formData.takeTime && dayjs.isDayjs(formData.takeTime)) {
-          formData.takeTime = formData.takeTime.format('YYYY-MM-DD HH:mm:ss');
         }
+        return Promise.resolve();
+      },
+      trigger: 'blur'
+    }
+  ],
+  status: [
+    {
+      required: true,
+      message: '请选择上架状态',
+      trigger: 'change'
+    }
+  ]
+});
 
-        // 处理数据类型转换
+/* 生成密钥 */
-        if (formData.isShow !== undefined) {
+const generateCode = () => {
-          formData.isShow = formData.isShow === '1' || formData.isShow === true;
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
-        }
+  let result = '';
-
+  for (let i = 0; i < 8; i++) {
-        console.log('提交的礼品卡数据:', formData);
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
-
+  }
-        const saveOrUpdate = isUpdate.value ? updateShopGift : addShopGift;
+  form.code = result;
-        saveOrUpdate(formData)
+};
-          .then((msg) => {
-            loading.value = false;
-            message.success(msg);
-            updateVisible(false);
-            emit('done');
-          })
-          .catch((e) => {
-            loading.value = false;
-            message.error(e.message);
-            console.error('保存失败:', e);
-          });
-      })
-      .catch((errors) => {
-        console.error('表单验证失败:', errors);
-      });
-  };
-
-  /* 获取商品列表 */
-  const getGoodsList = async () => {
-    if (goodsLoading.value) return; // 防止重复加载
 
+/* 搜索商品 */
+const searchGoods = async (value: string) => {
+  if (value && value.trim()) {
     goodsLoading.value = true;
     try {
-      const res = await listShopGoods({ pageSize: 50 }); // 限制返回数量
+      const res = await listShopGoods({keywords: value.trim()});
       goodsList.value = res || [];
-      console.log('获取到的商品列表:', goodsList.value);
+      console.log('搜索到的商品:', goodsList.value);
     } catch (e) {
-      console.error('获取商品列表失败:', 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 getStatusColor = () => {
+  const colorMap = {
+    0: 'success',
+    1: 'warning',
+    2: 'processing',
+    3: 'error'
   };
+  return colorMap[form.status] || 'default';
+};
 
-  watch(
+/* 获取状态文本 */
-    () => props.visible,
+const getStatusText = () => {
-    async (visible) => {
+  const textMap = {
-      if (visible) {
+    0: '已上架',
-        await getGoodsList();
+    1: '待上架',
+    2: '待审核',
+    3: '审核不通过'
+  };
+  return textMap[form.status] || '未知状态';
+};
 
-        if (props.data) {
+/* 格式化时间 */
-          assignObject(form, props.data);
+const formatTime = (time: any) => {
+  if (!time) return '';
+  return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
+};
 
-          // 处理时间字段转换
+const {resetFields} = useForm(form, rules);
-          if (props.data.takeTime) {
-            form.takeTime = dayjs(props.data.takeTime);
-          }
 
-          // 设置选中的商品
+/* 保存编辑 */
-          if (props.data.goodsId) {
+const save = () => {
-            selectedGoods.value = goodsList.value.find(goods => goods.goodsId === props.data.goodsId) || null;
+  if (!formRef.value) {
-          }
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = {
+        ...form
+      };
 
-          isUpdate.value = true;
+      // 处理时间字段转换
-        } else {
+      if (formData.takeTime && dayjs.isDayjs(formData.takeTime)) {
-          // 重置为默认值
+        formData.takeTime = formData.takeTime.format('YYYY-MM-DD HH:mm:ss');
-          Object.assign(form, {
-            id: undefined,
-            name: '',
-            code: '',
-            goodsId: undefined,
-            takeTime: undefined,
-            operatorUserId: undefined,
-            isShow: true,
-            status: 0,
-            comments: '',
-            sortNumber: 100,
-            userId: undefined,
-            deleted: 0,
-            tenantId: undefined,
-            createTime: undefined,
-            updateTime: undefined,
-            num: 1
-          });
-
-          selectedGoods.value = null;
-          isUpdate.value = false;
-        }
-      } else {
-        resetFields();
       }
-    },
+
-    { immediate: true }
+      // 处理数据类型转换
-  );
+      if (formData.isShow !== undefined) {
+        formData.isShow = formData.isShow === '1' || formData.isShow === true;
+      }
+
+      console.log('提交的礼品卡数据:', formData);
+
+      const saveOrUpdate = isUpdate.value ? updateShopGift : addShopGift;
+      saveOrUpdate(formData)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+          console.error('保存失败:', e);
+        });
+    })
+    .catch((errors) => {
+      console.error('表单验证失败:', errors);
+    });
+};
+
+/* 获取商品列表 */
+const getGoodsList = async () => {
+  if (goodsLoading.value) return; // 防止重复加载
+
+  goodsLoading.value = true;
+  try {
+    const res = await listShopGoods({pageSize: 50}); // 限制返回数量
+    goodsList.value = res || [];
+    console.log('获取到的商品列表:', goodsList.value);
+  } catch (e) {
+    console.error('获取商品列表失败:', e);
+    goodsList.value = [];
+  } finally {
+    goodsLoading.value = false;
+  }
+};
+
+watch(
+  () => props.visible,
+  async (visible) => {
+    if (visible) {
+      await getGoodsList();
+
+      if (props.data) {
+        assignObject(form, props.data);
+
+        // 处理时间字段转换
+        if (props.data.takeTime) {
+          form.takeTime = dayjs(props.data.takeTime);
+        }
+
+        // 设置选中的商品
+        if (props.data.goodsId) {
+          selectedGoods.value = goodsList.value.find(goods => goods.goodsId === props.data.goodsId) || null;
+        }
+
+        isUpdate.value = true;
+      } else {
+        // 重置为默认值
+        Object.assign(form, {
+          id: undefined,
+          name: '',
+          code: '',
+          goodsId: undefined,
+          takeTime: undefined,
+          operatorUserId: undefined,
+          isShow: true,
+          status: 0,
+          comments: '',
+          sortNumber: 100,
+          userId: undefined,
+          deleted: 0,
+          tenantId: undefined,
+          createTime: undefined,
+          updateTime: undefined,
+          num: 1000
+        });
+
+        selectedGoods.value = null;
+        isUpdate.value = false;
+      }
+    } else {
+      resetFields();
+    }
+  },
+  {immediate: true}
+);
 </script>
 
 <style lang="less" scoped>
@@ -559,7 +601,7 @@
   margin-top: 24px;
 
   .gift-card {
-    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
     border-radius: 12px;
     padding: 20px;
     color: #333;
@@ -587,7 +629,7 @@
       .gift-card-title {
         font-size: 20px;
         font-weight: bold;
-        color: #333;
+        color: #f3f3f3;
       }
     }
 
@@ -599,7 +641,7 @@
 
         .code-label {
           font-weight: 600;
-          color: #666;
+          color: #f3f3f3;
         }
 
         .code-value {
@@ -614,12 +656,12 @@
       .gift-card-goods {
         .goods-label {
           font-weight: 600;
-          color: #666;
+          color: #f3f3f3;
         }
 
         .goods-name {
           margin-left: 8px;
-          color: #333;
+          color: #f3f3f3;
         }
       }
     }
@@ -630,7 +672,7 @@
 
       .gift-card-info {
         font-size: 12px;
-        color: #666;
+        color: #f3f3f3;
       }
     }
   }

src/views/shop/shopGift/index.vue

@@ -22,12 +22,26 @@
             />
           </template>
           <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'goodsId'">
+              <div>{{ record.goodsName }}</div>
+              <div class="text-gray-300" v-if="record.nickName">领取人：{{ record.userId }}</div>
+              <div class="text-gray-300" v-if="record.operatorUserId">核销人：{{ record.operatorUserId }}</div>
+            </template>
             <template v-if="column.key === 'image'">
               <a-image :src="record.image" :width="50" />
             </template>
             <template v-if="column.key === 'status'">
-              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-space>
-              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+                <a-tag v-if="record.userId == 0">未领取</a-tag>
+                <a-tag v-if="record.userId > 0 && record.status === 0" color="green">已领取</a-tag>
+                <a-tag v-if="record.status === 1" color="green">已使用</a-tag>
+                <a-tag v-if="record.status === 2" color="red">已失效</a-tag>
+              </a-space>
+            </template>
+            <template v-if="column.key === 'createTime'">
+              <div v-if="record.createTime">创建时间：{{ record.createTime }}</div>
+              <div v-if="record.takeTime" class="text-green-500">领取时间：{{ record.takeTime }}</div>
+              <div v-if="record.verificationTime" class="text-purple-500">核销时间：{{ record.verificationTime }}</div>
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
@@ -55,7 +69,6 @@
   import { message, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
-  import { toDateString } from 'ele-admin-pro';
   import type {
     DatasourceFunction,
     ColumnItem
@@ -127,19 +140,18 @@
       align: 'center',
     },
     {
-      title: '领取时间',
+      title: '状态',
-      dataIndex: 'takeTime',
+      dataIndex: 'status',
-      key: 'takeTime',
+      key: 'status',
       align: 'center',
+      width: 170
     },
     {
       title: '创建时间',
       dataIndex: 'createTime',
       key: 'createTime',
       align: 'center',
-      sorter: true,
+      sorter: true
-      ellipsis: true,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
     },
     {
       title: '操作',