web_dist/src/views/clinic/CouponManage.vue

<template>
  <page-layer>
    <template #header>
      <el-button type="primary" icon="Refresh" @click="refreshCoupons(true)">刷新数据</el-button>
      <el-button type="primary" icon="Plus" plain @click="createNewCoupon">新增优惠券</el-button>
    </template>
    <template #main>
      <el-table :data="coupons" stripe :height="tableHeight">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.state"
                       inline-prompt
                       style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                       active-text="已激活"
                       inactive-text="已停用"
                       active-value="ACTIVATED"
                       inactive-value="DEACTIVATED"
                       @change="(val) => handleStateChange(scope.row.id, val)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template #default="scope">
            {{ moneyStyle(scope.row.value) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalQuantity" label="总量"></el-table-column>
        <el-table-column prop="leftQuantity" label="余量"></el-table-column>
        <el-table-column prop="effectiveDays" label="有效天数"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="staffName" label="创建人"></el-table-column>
        <el-table-column>
          <template #default="scope">
            <el-button title="编辑" type="primary" circle icon="Edit" @click="editCoupon(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="showEditPanel" title="编辑优惠券" width="410px">
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label">名称：</div>
          <div>
            <el-input v-model="currentCoupon.name" style="width: 180px"></el-input>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label">状态：</div>
          <div>
            <el-switch v-model="currentCoupon.state"
                       inline-prompt
                       style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                       active-text="激活"
                       inactive-text="停用"
                       active-value="ACTIVATED"
                       inactive-value="DEACTIVATED"
            ></el-switch>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label">金额：</div>
          <div>
            <el-input-number v-model="currentCoupon.value" :min="1" :controls="false"
                             :step="1" step-strictly style="width: 180px"></el-input-number>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label">总量：</div>
          <div>
            <el-input-number v-model="currentCoupon.totalQuantity" :min="1"
                             :step="1" step-strictly style="width: 180px"
                             @change="handleTotalQuantityChange"
                             :controls="false"
            ></el-input-number>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label">余量：</div>
          <div>
            <el-input-number v-model="currentCoupon.leftQuantity"
                             :controls="false" disabled style="width: 180px">
            </el-input-number>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label">有效天数：</div>
          <div>
            <el-input-number v-model="currentCoupon.effectiveDays" :min="1" :controls="false"
                             :step="1" step-strictly style="width: 180px"></el-input-number>
          </div>
        </div>

        <div style="margin-top: 16px; text-align: right">
          <el-button type="primary" size="small" icon="Check" style="width: 80px" @click="saveEditResult">保存
          </el-button>
        </div>

        <div v-if="currentCoupon.type === 'SALESMAN_OPERATION'" class="salesman-wrapper">
          生成运营人员专属链接：
          <div style="margin-top: 8px">
            <el-input v-model="currentCoupon.salesman" style="width: 90px"
                      placeholder="运营人员工号" clearable></el-input>
            <el-button type="success" plain style="margin-left: 8px" @click="generateSalesmanLink">生成</el-button>
            <el-button v-if="salesman.link"
                       type="danger" style="margin-left: 8px"
                       plain @click="copySalesmanLink">复制链接
            </el-button>
            <el-button v-if="salesman.link"
                       type="danger" style="margin-left: 8px"
                       plain @click="downloadSalesmanLinkQrCode">下载链接二维码
            </el-button>
          </div>

          <div v-if="salesman.link"
               style="margin-top: 8px; width: 100%; background-color: white;color: #1D1D1D;padding: 4px 8px;overflow-wrap: break-word;">
            <div style="padding: 6px 0">
              运营人员：{{ salesman.deptName }} - {{ salesman.name }}
            </div>
            <div style="padding: 6px 0">专属链接：
              <span style="color: orangered">
                {{ salesman.link }}
              </span>
            </div>
          </div>
        </div>
      </el-dialog>

      <el-dialog v-model="showCreatePanel" title="新增优惠券" width="410px">
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label"><span class="required">*</span>名称：</div>
          <div class="new-coupon-val">
            <el-input v-model="newCoupon.name" style="width: 180px"></el-input>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label"><span class="required">*</span>状态：</div>
          <div>
            <el-switch v-model="newCoupon.state"
                       inline-prompt
                       style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                       active-text="激活"
                       inactive-text="停用"
                       active-value="ACTIVATED"
                       inactive-value="DEACTIVATED"
            ></el-switch>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label"><span class="required">*</span>金额：</div>
          <div>
            <el-input-number v-model="newCoupon.value" :min="1"
                             :step="1" step-strictly style="width: 180px"></el-input-number>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label"><span class="required">*</span>总量：</div>
          <div>
            <el-input-number v-model="newCoupon.totalQuantity" :min="1"
                             :step="1" step-strictly style="width: 180px"></el-input-number>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label"><span class="required">*</span>余量：</div>
          <div>
            <el-input-number v-model="newCoupon.totalQuantity" disabled style="width: 180px"></el-input-number>
          </div>
        </div>
        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label"><span class="required">*</span>有效天数：</div>
          <div>
            <el-input-number v-model="newCoupon.effectiveDays" :min="1"
                             :step="1" step-strictly style="width: 180px"></el-input-number>
          </div>
        </div>

        <div class="edit-coupon-line">
          <div class="edit-coupon-line_label"><span class="required">*</span>下发方式：</div>
          <div>
            <el-select v-model="newCoupon.type" style="width: 180px">
              <el-option label="系统赠送" value="SYSTEM_PROVIDE"></el-option>
              <el-option label="医院运营" value="SALESMAN_OPERATION"></el-option>
            </el-select>
          </div>
        </div>

        <div style="margin-top: 16px; text-align: right">
          <el-button type="primary" size="small" icon="Check" style="width: 80px" @click="saveNewCoupon">保存
          </el-button>
        </div>
      </el-dialog>

    </template>
  </page-layer>
</template>

<script setup>
import PageLayer from "@/layout/PageLayer.vue";
import {getAllCoupons, getSalesmanInfo, insertNewCoupon, updateCouponState} from "@/api/outpatient/couponmanage";
import store from "@/store";
import {xcMessage} from "@/utils/xiaochan-element-plus";
import {copyStrFunc} from "@/utils/public";
import {qrcanvas} from "qrcanvas";
import {ref} from "vue";

const windowSize = store.state.app.windowSize
const tableHeight = windowSize.h - 50

const coupons = ref([])

function handleStateChange(id, state) {
  updateCouponState({id, state})
}

const currentCoupon = ref({})
const showEditPanel = ref(false)

function editCoupon(coupon) {
  currentCoupon.value = coupon
  showEditPanel.value = true
  salesman.value = {}
}

function handleTotalQuantityChange(currentValue, oldValue) {
  let leftQuantity = currentCoupon.value.leftQuantity
  let delta = currentValue - oldValue
  leftQuantity += delta
  if (leftQuantity < 0) {
    xcMessage.error('余量不能小于0！')
    currentCoupon.value.totalQuantity = oldValue
    return
  }
  currentCoupon.value.leftQuantity += delta;
}

function saveEditResult() {
  updateCouponState(currentCoupon.value).then((res) => {
    xcMessage.success(res)
    showEditPanel.value = false
  })
}

const showCreatePanel = ref(false)
const newCoupon = ref({
  state: 'ACTIVATED'
})
function createNewCoupon() {
  showCreatePanel.value = true
  newCoupon.value = {
    state: 'ACTIVATED'
  }
}
function saveNewCoupon() {
  insertNewCoupon(newCoupon.value).then(res => {
    xcMessage.success(res)
    showCreatePanel.value = false
    refreshCoupons(false)
  })
}

function moneyStyle(m) {
  return '￥' + m.toFixed(2)
}

function refreshCoupons(showSuccessMessage) {
  getAllCoupons().then(response => {
    coupons.value = response
    if (showSuccessMessage) {
      xcMessage.success('刷新数据成功')
    }
  })
}

const salesman = ref({})

function generateSalesmanLink() {
  getSalesmanInfo(currentCoupon.value.salesman).then(info => {
    salesman.value = info
    let identifyCode = currentCoupon.value.id + '-' + info.code + '-' + new Date().getTime()
    salesman.value.link = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
        'appid=wxbde6b16acad84204&redirect_uri=http://staticweb.hnthyy.cn/wxserver/redirect/page2?' +
        'to=receiveCoupon_' + btoa(identifyCode) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
  })
}

function copySalesmanLink() {
  copyStrFunc(salesman.value.link)
}

function downloadSalesmanLinkQrCode() {
  const canvas = qrcanvas({
    data: salesman.value.link,
    size: 360,
  })
  let a = document.createElement('a')
  let event = new MouseEvent('click')
  a.download = salesman.value.name + '-优惠券运营'
  a.href = canvas.toDataURL()
  a.dispatchEvent(event)
}

onMounted(() => {
  refreshCoupons(false)
})
</script>

<style scoped>
.edit-coupon-line {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.edit-coupon-line_label {
  width: 80px;
}

.required {
  margin-right: 4px;
  color: red;
}

.salesman-wrapper {
  margin-top: 20px;
  background-image: linear-gradient(#247e76, #004749);
  color: white;
  padding: 8px;
  border-radius: 4px;
}

</style>