cashier-web/src/views/marketing_center/birthdayGift/index.vue

<template>
  <div class="m-4 bg-white p-4">
    <HeaderCard
      name="生日有礼"
      intro="用户生日管理设置"
      icon="birthdayGift"
      showSwitch
      v-model:isOpen="basicForm.isEnable"
    ></HeaderCard>
    <el-tabs class="mt-4" v-model="activeTab" type="border-card">
      <el-tab-pane :label="item.label" v-for="item in configs" :key="item.name" :name="item.name">
        <template v-if="item.name == 'basic'">
          <el-form ref="form" :model="basicForm">
            <div class="u-m-b-10">
              <el-button type="primary" @click="refDialogPlans.open()">添加</el-button>
            </div>
            <el-form-item label="">
              <el-table :data="basicForm.configList" border style="width: 60%">
                <el-table-column label="用户类型" align="center">
                  <template #default="scope">
                    {{ returnUserType(scope.row.userType) }}
                  </template>
                </el-table-column>
                <el-table-column label="赠送优惠券" align="center">
                  <template #default="scope">
                    <div v-for="item in scope.row.couponInfoList" :key="item.id">
                      <span>{{ item.title }}</span>
                      <span class="m-l-4">{{ item.num }} 张</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="is_auto_renew" label="发放时间" align="center">
                  <template #default="scope">
                    {{ returnDeliverDate(scope.row) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button type="text" @click="editPlan(scope.row, scope.$index)">
                      编辑
                    </el-button>
                    <el-button type="text" style="color: red" @click="deletePlan(scope.row)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>

            <el-form-item label="短信祝福">
              <el-switch
                v-model="basicForm.sendSms"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
              <span class="color-666 font-size-[12px] m-l-4">
                开启后，将会在用户生日当天，发送祝福短信
              </span>
            </el-form-item>
            <el-form-item label="短信内容">
              <span class="color-666 font-size-[14px]">
                亲爱的{用户昵称}，[店铺名称]祝您生日快乐！感谢您一直的陪伴。为您准备了{num}张超值优惠券，已经放入账户，愿我们的礼物能为您增添一份喜悦。
              </span>
            </el-form-item>
          </el-form>

          <div class="flex mt-10 justify-center gap-10">
            <el-button
              style="width: 100px"
              type="primary"
              @click="basicSubmit"
              size="large"
              v-if="shopInfo.isHeadShop"
            >
              保存
            </el-button>
            <el-button @click="close" style="width: 100px" size="large">取消</el-button>
          </div>
        </template>
        <template v-if="item.name == 'record'">
          <recordLists :recordList="recordList"></recordLists>
        </template>
      </el-tab-pane>
    </el-tabs>

    <DialogPlans ref="refDialogPlans" @submitSuccess="submitSuccess"></DialogPlans>
  </div>
</template>

<script setup>
import { returnUserType } from "@/views/marketing_center/data.js";

import shopApi from "@/api/account/shop";
import birthdayGiftApi from "@/api/market/birthdayGift";
import HeaderCard from "../components/headerCard.vue";
import DialogPlans from "./components/dialog-plans.vue";
import recordLists from "./components/record-lists.vue";
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const shopInfo = ref("");
const inputStyle = {
  width: "340px",
};

const router = useRouter();

const refDialogPlans = ref();
const configs = [
  { name: "basic", label: "基础设置" },
  { name: "record", label: "发放记录" },
];
const activeTab = ref("basic");

const basicForm = reactive({
  isEnable: 0,
  sendSms: 0,
  templateId: "",
  configList: [],
});

function editPlan(row, index) {
  refDialogPlans.value.open(toRaw(row), index);
}

function returnDeliverDate(row) {
  if (row.deliverDate === "advance") {
    return "提前" + Math.abs(row.deliverTime) + "天";
  }
  if (row.deliverDate === "day") {
    if (row.deliverTime != 0) {
      return "提前" + Math.abs(row.deliverTime) + "天";
    }
    return "当天";
  }
  if (row.deliverDate === "mouth") {
    return "当月1号";
  }
}
function deletePlan(row) {
  const index = basicForm.configList.indexOf(row);
  if (index > -1) {
    basicForm.configList.splice(index, 1);
  }
}
function submitSuccess(plans, index) {
  if (!basicForm.configList) {
    basicForm.configList = [];
  }
  if (index !== null && index !== undefined) {
    basicForm.configList[index] = plans;
    return;
  }
  basicForm.configList.push(plans);
}
// 会员基础设置提交
function basicSubmit() {
  const data = toRaw(basicForm);
  console.log(data);

  birthdayGiftApi.editConfig(data).then((res) => {
    ElMessage.success("保存成功");
  });
}

async function init() {
  birthdayGiftApi.getConfig().then((res) => {
    res.configList = res.configList || [];
    Object.assign(basicForm, res);
    basicForm.isEnable = basicForm.isEnable;
  });
}

// 从本地获取商户信息
function getLocalShopInfo() {
  shopInfo.value = JSON.parse(localStorage.getItem("userInfo"));
}
onMounted(() => {
  init();
  getLocalShopInfo();
});
//计算总优惠券数量
function totalCount(arr) {
  return arr.reduce((total, item) => {
    return total + item.num * 1;
  }, 0);
}
//
function levelExperienceValueMin(index, level) {
  if (index == 0) {
    return 0;
  }
  return levels.value[index - 1].experienceValue + 1;
}
//返回
function close() {
  router.back();
}
//
function levelTabChange(index) {}
</script>

<style lang="scss" scoped>
:deep(.el-tabs--border-card) {
  border: none;
}
:deep(.el-tabs--border-card > .el-tabs__header) {
  border: none;
  padding: 4px;
}
:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  border: none;
}
:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  border: none;
}
</style>