From 60b4afcb1a2be80c24b62ea67585f38ca3dd438e Mon Sep 17 00:00:00 2001
From: wangsongsole <wangsongsole@126.com>
Date: Wed, 21 Feb 2024 17:47:53 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=96=B0=E5=A2=9E=E4=BA=AC?=
 =?UTF-8?q?=E4=B8=9CE=E5=8D=A1=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 coupon/details.html | 114 ++++++++++++++++++++++++++++++++++----------
 exchange.html       |  97 ++++++++++++++++++++++++++++++++-----
 homepage2_0.css     |  15 ++++++
 3 files changed, 189 insertions(+), 37 deletions(-)

diff --git a/coupon/details.html b/coupon/details.html
index 2726b63..b608351 100644
--- a/coupon/details.html
+++ b/coupon/details.html
@@ -49,20 +49,47 @@
                         <p class="text">{{goodInfo.product_name}}</p>
                     </div>
                     <template v-if="goodInfo.product_type===1||(goodInfo.product_type===2&&goodInfo.card_show==1)">
-                        <p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
-                                onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
-                                onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
-                                v-model="account" :placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
-                        <p v-if="acctype=='tel'"><span>再次输入:</span> <input :type="acctype"
-                                onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
-                                onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
-                                v-model="reAccount" placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
-                        <p v-if="acctype!='tel'"><span>账号:</span> <input :type="acctype" :maxlength="maxlen"
-                                v-model="account" :disabled="goodsDetail.available!=1" :placeholder="placeholder"
-                                @focus="(e)=>focusFn(e)"></p>
-                        <p v-if="acctype!='tel'"><span>再次输入:</span><input :type="acctype" :maxlength="maxlen"
-                                v-model="reAccount" :disabled="goodsDetail.available!=1" placeholder="请再次输入"
-                                @focus="(e)=>focusFn(e)"></p>
+                        <!-- 京东E卡 -->
+                        <template v-if="acctype=='tel'&&goodInfo.isECard">
+                            <p>
+                                <span>账号:</span>
+                                <input :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')"
+                                    :disabled="goodsDetail.available!=1"
+                                    onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="11"
+                                    v-model="account" :placeholder="placeholder" @focus="(e)=>focusFn(e)">
+                            </p>
+                            <p>
+                                <span>验证码:</span>
+                                <input class="queryCode" :type="acctype"
+                                    onkeyup="this.value=this.value.replace(/\D/g,'')"
+                                    :disabled="goodsDetail.available!=1"
+                                    onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="6"
+                                    v-model="jd_code" placeholder="请输入验证码" @focus="(e)=>focusFn(e)">
+                                <button :disabled="!computedAccount" class="query-code" @click="sendJDSms">
+                                    {{cunt!==60?cunt+'s':'获取验证码'}}
+                                </button>
+                            </p>
+                        </template>
+                        <template v-else>
+                            <p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
+                                    onkeyup="this.value=this.value.replace(/\D/g,'')"
+                                    :disabled="goodsDetail.available!=1"
+                                    onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
+                                    :maxlength="maxlen" v-model="account" :placeholder="placeholder"
+                                    @focus="(e)=>focusFn(e)"></p>
+                            <p v-if="acctype=='tel'"><span>再次输入:</span> <input :type="acctype"
+                                    onkeyup="this.value=this.value.replace(/\D/g,'')"
+                                    :disabled="goodsDetail.available!=1"
+                                    onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
+                                    :maxlength="maxlen" v-model="reAccount" placeholder="请再次输入"
+                                    @focus="(e)=>focusFn(e)"></p>
+                            <p v-if="acctype!='tel'"><span>账号:</span> <input :type="acctype" :maxlength="maxlen"
+                                    v-model="account" :disabled="goodsDetail.available!=1" :placeholder="placeholder"
+                                    @focus="(e)=>focusFn(e)"></p>
+                            <p v-if="acctype!='tel'"><span>再次输入:</span><input :type="acctype" :maxlength="maxlen"
+                                    v-model="reAccount" :disabled="goodsDetail.available!=1" placeholder="请再次输入"
+                                    @focus="(e)=>focusFn(e)"></p>
+                        </template>
                     </template>
                 </div>
                 <div class="bottom" id="bottom" :style="{borderWidth:(describe.type||detailUrl)?'0.05rem':'0'}"
@@ -157,17 +184,10 @@
                             {{(goodsDetail.origin_price-goodsDetail.coupon_price).toFixed(2)}}</p>
                     </div>
                 </div>
-                <template v-if="goodsDetail.type===1||(goodInfo.product_type === 2 &&goodInfo.card_show == 1)">
-                    <button class="exchange-btn"
-                        v-if="goodInfo.product_type===1||(goodInfo.product_type === 2 &&goodInfo.card_show == 1)"
-                        :style="{'background': exchangeOpen?bgcolor:'#D7D7D7','color':exchangeOpen?ftColor:'#333'}"
-                        @click="exchangeGoodsFn">立即支付</button>
-
-                    <button v-else class="exchange-btn" v-else :style="{'background': bgcolor,'color':ftColor}"
-                        @click="exchangeGoodsFn">立即支付</button>
-                </template>
-                <button class="exchange-btn" v-else :style="{'background': bgcolor,'color':ftColor}"
+                <button class="exchange-btn"
+                    :style="{'background': computedExChange?bgcolor:'#D7D7D7','color':computedExChange?ftColor:'#333'}"
                     @click="exchangeGoodsFn">立即支付</button>
+
             </div>
         </div>
 
@@ -207,6 +227,8 @@
                 placeholder: '',
                 exchangeOpen: false,
                 suspension: false,
+                cunt: 60,
+                jd_code: '',
                 describe: {},
                 detailUrl: '',
                 goodInfo: '',
@@ -340,6 +362,18 @@
             this.getDetails(goodsId, code_batch_id);
         },
 
+        computed: {
+            /* 手机号验证 */
+            computedAccount () {
+                return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.account);
+            },
+
+            /* 兑换按钮验证 */
+            computedExChange () {
+                return this.exchangeOpen || (this.goodInfo.product_type === 2 && this.goodInfo.card_show == 2) || this.goodInfo.isECard && this.computedAccount && this.jd_code.length === 6;
+            }
+        },
+
         methods: {
             bindAvailable () {
                 if (goodsDetail.wait_pay_order == 1) {
@@ -352,6 +386,27 @@
                 }
             },
 
+            /* 获取京东E卡短信 */
+            sendJDSms () {
+                if (this.cunt === 60) {
+                    req.axiosPost('/key/order/jdSendSms', { code_batch_id: this.goodsDetail.code_batch_id, mobile: this.account })
+                        .then((res) => {
+                            if (res.code == 200) {
+                                this.openDialog('短信下发成功！');
+                                const clr = setInterval(() => {
+                                    if (this.cunt <= 1) {
+                                        this.cunt = 60;
+                                        return clearInterval(clr);
+                                    }
+                                    this.cunt--;
+                                }, 1000);
+                            } else {
+                                this.openErrorDialog(res.message);
+                            }
+                        });
+                }
+            },
+
             /* 请求详情 */
             getDetails (goods_id, code_batch_id) {
                 const token = localStorage.getItem('token');
@@ -449,10 +504,21 @@
                     this.openErrorDialog('您有未支付的订单');
                     return;
                 }
+
                 if (goodsDetail.available != 1) {
                     this.openErrorDialog(product_status(goodsDetail.available, goodsDetail));
                     return;
                 }
+
+                /* 京东E卡 */
+                if (this.goodInfo.isECard && this.goodInfo.product_type === 1) {
+                    if (this.computedExChange) {
+                        localStorage.setItem('account', this.account);
+                        window.location.href = './settlement.html';
+                    }
+                    return;
+                }
+
                 if ((this.goodsDetail.type === 1 && this.goodInfo.product_type === 1) || (this.goodInfo.product_type === 2 && this.goodInfo.card_show == 1)) {  /* 兑换码 */
                     if (!this.account) {
                         this.openDialog('请输入兑换账号！');
diff --git a/exchange.html b/exchange.html
index 91d1515..304710c 100644
--- a/exchange.html
+++ b/exchange.html
@@ -53,18 +53,42 @@
       <div class="ipt-acc" style="position: relative;z-index: 99;" @click="bindAvailable">
         <h4 class="title" v-if="goodInfo.product_type===2&&goodInfo.card_show==2">{{goodInfo.product_name}}</h4>
         <template v-if="goodInfo.product_type===1||goodInfo.product_type===2&&goodInfo.card_show==1">
-          <p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
-              onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
-              onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen" v-model="account"
-              :placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
-          <p v-if="acctype=='tel'"><span>再次输入:</span> <input :type="acctype"
-              onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
-              onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
-              v-model="reaccount" placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
-          <p v-if="acctype!='tel'"><span>账号:</span> <input :type="acctype" :maxlength="maxlen" v-model="account"
-              :disabled="goodsDetail.available!=1" :placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
-          <p v-if="acctype!='tel'"><span>再次输入:</span><input :type="acctype" :maxlength="maxlen" v-model="reaccount"
-              :disabled="goodsDetail.available!=1" placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
+          <!-- 京东E卡 -->
+          <template v-if="acctype=='tel'&&goodInfo.isECard">
+            <p>
+              <span>账号:</span>
+              <input :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')"
+                :disabled="goodsDetail.available!=1"
+                onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="11" v-model="account"
+                :placeholder="placeholder" @focus="(e)=>focusFn(e)">
+            </p>
+            <p>
+              <span>验证码:</span>
+              <input class="queryCode" :type="acctype" onkeyup="this.value=this.value.replace(/\D/g,'')"
+                :disabled="goodsDetail.available!=1"
+                onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="6" v-model="jd_code"
+                placeholder="请输入验证码" @focus="(e)=>focusFn(e)">
+              <button :disabled="!computedAccount" class="query-code" @click="sendJDSms">
+                {{cunt!==60?cunt+'s':'获取验证码'}}
+              </button>
+            </p>
+          </template>
+
+          <!-- 非E卡 -->
+          <template v-else>
+            <p v-if="acctype=='tel'"><span>账号:</span><input :type="acctype"
+                onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
+                onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
+                v-model="account" :placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
+            <p v-if="acctype=='tel'"><span>再次输入:</span> <input :type="acctype"
+                onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="goodsDetail.available!=1"
+                onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" :maxlength="maxlen"
+                v-model="reaccount" placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
+            <p v-if="acctype!='tel'"><span>账号:</span> <input :type="acctype" :maxlength="maxlen" v-model="account"
+                :disabled="goodsDetail.available!=1" :placeholder="placeholder" @focus="(e)=>focusFn(e)"></p>
+            <p v-if="acctype!='tel'"><span>再次输入:</span><input :type="acctype" :maxlength="maxlen" v-model="reaccount"
+                :disabled="goodsDetail.available!=1" placeholder="请再次输入" @focus="(e)=>focusFn(e)"></p>
+          </template>
         </template>
       </div>
       <div class="bottom" id="bottom" v-show="describe.type||detailUrl">
@@ -79,7 +103,7 @@
           <p>订单</p>
         </div>
         <button class="exchange-btn"
-          :style="{'background': (exchangeOpen||(goodInfo.product_type===2&&goodInfo.card_show==2))?bgcolor:'#D7D7D7','color':(exchangeOpen||(goodInfo.product_type===2&&goodInfo.card_show==2))?ftcolor:'#333'}"
+          :style="{'background': computedExChange?bgcolor:'#D7D7D7','color':computedExChange?ftcolor:'#333'}"
           @click="exchangeGoodsFn">立即兑换</button>
       </div>
     </div>
@@ -147,6 +171,8 @@
         popboxshow: false,
         exchangeOpen: false,
         suspension: false,
+        cunt: 60,
+        jd_code: '',
         popboxtype: '',
         describe: {},
         detailUrl: '',
@@ -207,6 +233,28 @@
           return;
         }
       },
+
+      /* 获取京东E卡短信 */
+      sendJDSms () {
+        if (this.cunt === 60) {
+          req.axiosPost('/key/order/jdSendSms', { code_batch_id: this.goodsDetail.code_batch_id, mobile: this.account })
+            .then((res) => {
+              if (res.code == 200) {
+                this.openDialog('短信下发成功！');
+                const clr = setInterval(() => {
+                  if (this.cunt <= 1) {
+                    this.cunt = 60;
+                    return clearInterval(clr);
+                  }
+                  this.cunt--;
+                }, 1000);
+              } else {
+                this.openErrorDialog(res.message);
+              }
+            });
+        }
+      },
+
       openErrorDialog (tip) {
         this.maskshow = true;
         this.popboxtype = '提示';
@@ -260,6 +308,16 @@
           return this.surexchangeBtn();
         }
 
+        /* 京东E卡 */
+        if (this.goodInfo.isECard && this.goodInfo.product_type === 1) {
+          if (this.computedExChange) {
+            this.maskshow = true;
+            this.popboxshow = true;
+            this.popboxtype = '兑换';
+          }
+          return;
+        }
+
         if (!this.account) {
           this.openDialog('请输入兑换账号！');
           return false;
@@ -397,6 +455,19 @@
         this.reaccount = "";
       },
     },
+
+    computed: {
+      /* 手机号验证 */
+      computedAccount () {
+        return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.account);
+      },
+
+      /* 兑换按钮验证 */
+      computedExChange () {
+        return this.exchangeOpen || (this.goodInfo.product_type === 2 && this.goodInfo.card_show == 2) || this.goodInfo.isECard && this.computedAccount && this.jd_code.length === 6;
+      }
+    },
+
     watch: {
       account () {
         if ((this.account == this.reaccount) && this.account) {
diff --git a/homepage2_0.css b/homepage2_0.css
index 8b9d508..4c5b5f3 100644
--- a/homepage2_0.css
+++ b/homepage2_0.css
@@ -777,6 +777,21 @@ img.changegray {
   z-index: 888;
 }
 
+#exchangePage .queryCode {
+  width: 100%;
+}
+
+#exchangePage .query-code {
+  color: #2691fc;
+  border: 0;
+  outline: 0;
+  font-size: 0.14rem;
+}
+
+#exchangePage .query-code:disabled {
+  color: #a2cbf5;
+}
+
 #exchangePage .about-good > span {
   position: absolute;
   top: 0.1rem;