1、倒计时

2、取消锁定

cli-traffic.html

@@ -393,6 +393,7 @@
                   <vs-th> Phone </vs-th>
                   <vs-th> 验证码 </vs-th>
                   <vs-th> 状态 </vs-th>
+                  <vs-th> 过期时间 </vs-th>
                   <vs-th> 操作 </vs-th>
                 </template>
 
@@ -414,6 +415,16 @@
                        <vs-chip v-else-if="data[indextr].status===2" transparent color="success">已使用</vs-chip>
                        <vs-chip v-else-if="data[indextr].status===3" transparent color="warning">过期</vs-chip>
                     </vs-td>
+                    <vs-td :data="data[indextr].expireTime">
+                       <countdown
+                          :time="(new Date( data[indextr].expireTime)) - Date.now()"
+                          v-if="data[indextr].expireTime &&new Date()<new Date(data[indextr].expireTime)&& data[indextr].status===1"
+                        >
+                          <template slot-scope="props">
+                           {{ Math.floor((new Date( data[indextr].expireTime) - Date.now()) / 1000) || 0 }} 秒
+                          </template>
+                       </countdown>
+                    </vs-td>
                     
                     <vs-td :data="data[indextr].id">
                       <!-- <vs-button
@@ -424,7 +435,10 @@
                         icon="qr_code"
                         @click="handleShowQrCode(data[indextr],1)"
                       ></vs-button> -->
-                       <vs-button color="warning" size="small" @click="handleDeleteSms(data[indextr])">
+                      <vs-button color="primary" size="small" 
+                      v-if="data[indextr].actived === 1 && data[indextr].status === 1 &&new Date()<new Date(data[indextr].expireTime)" 
+                      @click="handleCancelSms(data[indextr])">取消</vs-button>
+                      <vs-button color="warning" size="small" @click="handleDeleteSms(data[indextr])">
                         删除
                       </vs-button>
                   </vs-tr>
@@ -477,8 +491,12 @@
                         {{formatDate(data[indextr].expireTime)}}
                     </vs-td>
                     <vs-td :data="data[indextr].id">
+                      <vs-button color="primary" size="small" 
+                      v-if="data[indextr].actived === 1 && data[indextr].status === 1 &&new Date()<new Date(data[indextr].expireTime)" 
+                      @click="handleCancelSms(data[indextr])">取消</vs-button>
+                      
                       <vs-button
-                        v-if="data[indextr].status !== 1&&new Date()<new Date(data[indextr].expireTime)"
+                        v-if="data[indextr].actived ===2 && data[indextr].status!==1 && new Date()<new Date(data[indextr].expireTime)"
                         color="primary"
                         size="small"
                         @click="handleWeakUp(data[indextr],1)"
@@ -1844,6 +1862,58 @@
               console.log(error);
             });
         },
+        //取消sms
+        handleCancelSms(row){
+           this.$vs.dialog({
+                color:"primary",
+                title: `提示`,
+                text: `确定要取消[${row.phone}]的短信服务吗？`,
+                acceptText:"确定",
+                accept:() => this.cancelSms(row)
+            });
+        },
+        cancelSms(row){
+          this.showLoading();
+
+          let data = JSON.stringify({
+            id:row.id});
+            fetch(requestApi + "/sms-phone/cancel", {
+              headers: {
+                Authorization: `Bearer ${this.token}`,
+                "Content-Type": "application/json",
+                Accept: "application/json",
+              },
+              method: "PUT",
+              body: data,
+            })
+             .then((res) => res.json())
+             .then((response) => {
+                if (response.code === 200) {
+                  this.$vs.notify({
+                    title: "提示",
+                    color: "success",
+                    text: "取消成功",
+                    position: "top-right",
+                  });
+
+                  this.getMyBalance();
+                  this.getSmsList();
+                } else {
+                  this.$vs.notify({
+                    title: "提示",
+                    color: "danger",
+                    text: response.msg,
+                    position: "top-right",
+                  });
+                }
+             })
+             .catch((error) => {
+                console.log(error);
+             })
+             .finally(() => {
+                this.hiddenLoading();
+             });
+        },
       },
     });
   </script>