添加购买优惠券的功能

src/views/clinic/CouponManage.vue

@@ -11,22 +11,28 @@
         <el-table-column prop="availableChargeName" 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
+                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="金额">
+        <el-table-column label="优惠金额">
           <template #default="scope">
             {{ moneyStyle(scope.row.value) }}
           </template>
         </el-table-column>
+        <el-table-column label="购买价格">
+          <template #default="scope">
+            {{ moneyStyle(scope.row.price) }}
+          </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>
@@ -63,46 +69,79 @@
     <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
+            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 v-if="currentCoupon.gainWay === 'PURCHASE'" class="edit-coupon-line">
+      <div class="edit-coupon-line_label">单价：</div>
+      <div>
+        <el-input-number
+            v-model="currentCoupon.price"
+            :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 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>
+        <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
+            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>
+        <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>
+        <el-input-number
+            v-model="currentCoupon.effectiveDays"
+            :min="1"
+            :controls="false"
+            :step="1"
+            step-strictly
+            style="width: 180px"
+            :disabled="currentCoupon.gainWay === 'PURCHASE'"
+        ></el-input-number>
       </div>
     </div>
 
@@ -117,25 +156,34 @@
         <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
+            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
+            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 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>
+            {{ salesman.link }}
+          </span>
         </div>
       </div>
     </div>
@@ -169,28 +217,61 @@
     <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
+            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 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>
+        <el-select v-model="newCoupon.gainWay" style="width: 180px">
+          <el-option label="免费获取" value="FREE"></el-option>
+          <el-option label="购买获取" value="PURCHASE"></el-option>
+        </el-select>
+      </div>
+    </div>
+
+    <div class="edit-coupon-line" v-if="newCoupon.gainWay === 'PURCHASE'">
+      <div class="edit-coupon-line_label"><span class="required">*</span>购买单价：</div>
+      <div>
+        <el-input-number
+            v-model="newCoupon.price"
+            :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.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>
+        <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">
@@ -199,11 +280,16 @@
         <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" v-if="newCoupon.gainWay !== 'PURCHASE'">
       <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>
+        <el-input-number
+            v-model="newCoupon.effectiveDays"
+            :min="1"
+            :step="1"
+            step-strictly
+            style="width: 180px"
+        ></el-input-number>
       </div>
     </div>
 
@@ -216,7 +302,6 @@
         </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>
@@ -286,7 +371,10 @@ function saveNewCoupon() {
 }
 
 function moneyStyle(m) {
-  return '￥' + m.toFixed(2)
+  if (m === 0) {
+    return '免费'
+  }
+  return '￥' + m.toFixed(2);
 }
 
 function refreshCoupons(showSuccessMessage) {
@@ -304,9 +392,15 @@ 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'
+    if (currentCoupon.value.gainWay === 'PURCHASE') {
+      salesman.value.link = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
+          'appid=wxbde6b16acad84204&redirect_uri=https://staticweb.hnthyy.cn/wxserver/redirect/page2?' +
+          'to=buyCoupon_' + btoa(identifyCode) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
+    } else {
+      salesman.value.link = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
+          'appid=wxbde6b16acad84204&redirect_uri=https://staticweb.hnthyy.cn/wxserver/redirect/page2?' +
+          'to=receiveCoupon_' + btoa(identifyCode) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
+    }
   })
 }