提交

src/api/SilkRoadSpringGala.js

@@ -50,6 +50,16 @@ export function getSendVerifyCode(data) {
   });
 }
 
+// 验证验证码
+export function verifyCode(data) {
+    return ajax({
+      url: "users/verifyCode",
+      method: "GET",
+      urlType: "slikRoad",
+      data,
+    });
+  }
+
 // 抽奖
 export function getDrawOri(data) {
   return ajax({
@@ -80,6 +90,16 @@ export function getEnrollList(data) {
   });
 }
 
+// 获取报名排名
+export function getEnrollRank(data) {
+  return ajax({
+    url: "enroll/rank",
+    method: "GET",
+	urlType: "slikRoad",
+    data,
+  });
+}
+
 // 投票
 export function getVote(data) {
   return ajax({

src/view/SilkRoadShanShiPinList/index.vue

@@ -77,12 +77,18 @@
             <div class="SilkList">
               <van-cell-group inset>
                 <van-cell title="名称" value="投票量"></van-cell>
-                <van-cell
-                  v-for="item in listSelf"
-                  :key="item + 'self'"
-                  :title="item.name"
-                  :value="formmate(item.votes)"
-                />
+                <van-row v-for="item in rankListSelf" :key="item.id + 'self'">
+                  <van-col span="16"
+                    ><p class="text" v-text="item.name"></p
+                  ></van-col>
+                  <van-col span="8"
+                    ><p
+                      class="text"
+                      style="text-align: right"
+                      v-text="formmate(item.votes)"
+                    ></p
+                  ></van-col>
+                </van-row>
               </van-cell-group>
             </div>
           </van-tab>
@@ -90,12 +96,18 @@
             <div class="SilkList">
               <van-cell-group inset>
                 <van-cell title="名称" value="投票量"></van-cell>
-                <van-cell
-                  v-for="item in list"
-                  :key="item.id + 'team'"
-                  :title="item.name"
-                  :value="formmate(item.votes)"
-                />
+                <van-row v-for="item in rankList" :key="item.id + 'team'">
+                  <van-col span="16"
+                    ><p class="text" v-text="item.name"></p
+                  ></van-col>
+                  <van-col span="8"
+                    ><p
+                      class="text"
+                      style="text-align: right"
+                      v-text="formmate(item.votes)"
+                    ></p
+                  ></van-col>
+                </van-row>
               </van-cell-group>
             </div>
           </van-tab>
@@ -127,6 +139,41 @@
       :src="video.file || ''"
       class="videoEle"
     ></video>
+    <van-dialog
+      theme="round-button"
+      v-model:show="showLogin"
+      confirm-button-text="登录"
+      :before-close="beforeClose"
+    >
+      <van-cell-group inset>
+        <van-field
+          v-model="login.name"
+          required
+          label="姓名"
+          placeholder="请输入姓名"
+        />
+        <van-field
+          v-model="login.phone"
+          required
+          type="tel"
+          label="手机号"
+          placeholder="请输入手机号"
+        >
+          <template #button>
+            <van-button
+              v-if="codePhoen === 0"
+              @click="getCode"
+              size="small"
+              type="primary"
+            >
+              发送验证码
+            </van-button>
+            <van-count-down format="ss 秒" v-else :time="codePhoen" />
+          </template>
+        </van-field>
+        <van-field required v-model="login.code" type="digit" label="验证码" />
+      </van-cell-group>
+    </van-dialog>
   </div>
 </template>
 <script setup>
@@ -134,7 +181,14 @@ import { ref, reactive } from "vue";
 import { showDialog, showConfirmDialog, showToast } from "vant";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-import { getEnrollList, getVote, getTimes } from "@/api/SilkRoadSpringGala.js";
+import {
+  getEnrollList,
+  getEnrollRank,
+  getVote,
+  getTimes,
+  getSendVerifyCode,
+  verifyCode,
+} from "@/api/SilkRoadSpringGala.js";
 
 import Shanshipin from "@/components/shanshipin.vue";
 /**
@@ -158,14 +212,35 @@ const getList = call => {
     call && call();
   });
 };
+
+const getRankList = Call => {
+  Promise.all([
+    getEnrollRank({
+      type: "团队",
+      operateId: 2,
+    }),
+    getEnrollRank({
+      type: "个人",
+      operateId: 2,
+    }),
+  ]).then(resList => {
+    rankList.value = resList[0] || [];
+    rankListSelf.value = resList[1] || [];
+    Call && Call();
+  });
+};
 const w = window.$originData.orginParames.availWidth || 0;
 const width = ref((w - 16) / 2);
 const height = ref(width.value * 0.57);
 const showPaihang = ref(false);
+const showLogin = ref(false);
 const list = ref([]);
 const listSelf = ref([]);
+const rankList = ref([]);
+const rankListSelf = ref([]);
 const showVideo = ref(false);
 const video = ref({});
+const codePhoen = ref(0);
 const config = reactive({
   times: -1,
   isShanShiPin: window.$shanshipin.UserId,
@@ -177,46 +252,31 @@ const login = reactive({
     window.$shanshipin.Phone ||
     localStorage.getItem("SilkRoadShanShiPinPhone") ||
     "",
+  code: "",
 });
 getList();
 
-if (!login.phone) {
-  showDialog({
-    title: "登录",
-    message: () => {
-      return (
-        <van-cell-group inset>
-          <van-field
-            v-model={login.name}
-            required
-            label="姓名"
-            placeholder="请输入姓名"
-          />
-          <van-field
-            v-model={login.phone}
-            required
-            type="tel"
-            label="手机号"
-            placeholder="请输入手机号"
-          />
-        </van-cell-group>
-      );
-    },
-    theme: "round-button",
-    beforeClose: () => {
-      console.log(login);
-      if (!login.phone || !login.name) return false;
-      localStorage.setItem("SilkRoadShanShiPinPhone", login.phone);
-      localStorage.setItem("SilkRoadShanShiPinName", login.name);
-      return true;
-    },
-  });
-} else {
+if (!login.phone || login.phone.length < 11) showLogin.value = true;
+else {
   getTimes({
     phone: login.phone,
   }).then(r => (config.times = r.times - t >= 0));
 }
 
+const getCode = () => {
+  // 获取验证码
+  if (!/1[0-9]{10}/.test(login.phone)) {
+    showToast("请输入正确的手机号");
+    return;
+  }
+
+  getSendVerifyCode({
+    phone: login.phone,
+  }).then(() => {
+    codePhoen.value = 60000;
+  });
+};
+
 const toupiao = function (item) {
   showConfirmDialog({
     message: "确定投票给" + item.name + "么？",
@@ -244,6 +304,21 @@ const toupiao = function (item) {
   });
 };
 
+const beforeClose = () => {
+  if (!login.phone || !login.name || !login.code) return false;
+  verifyCode({
+    phone: login.phone,
+    code: login.code,
+  })
+    .then(() => {
+      localStorage.setItem("SilkRoadShanShiPinPhone", login.phone);
+      localStorage.setItem("SilkRoadShanShiPinName", login.name);
+      return true;
+    })
+    .catch(() => false);
+  return true;
+};
+
 const showGuize = () => {
   showDialog({
     title: "投票规则",
@@ -292,7 +367,7 @@ const showGuize = () => {
 
 const paiming = () => {
   if (!config.isShanShiPin) return showToast("下载闪视频查看投票结果。");
-  getList(() => {
+  getRankList(() => {
     showPaihang.value = true;
   });
 };
@@ -330,6 +405,12 @@ const clickShowVideo = item => {
   //     font-size: 1rem;
   //     font-weight: bold;
   //   }
+  .van-cell__value {
+    color: #000;
+  }
+  .text {
+    padding: 10px 16px;
+  }
   .guize {
     background-color: #ff2c2c;
     position: fixed;