feat:增加展板积分和首页登录提示弹窗

houtai/src/pages/A1Rule/RuleEdit/index.tsx

@@ -66,12 +66,12 @@ function RuleEdit({ id, closePage, upTableList, editMode }: Props) {
       //   return;
       // }
 
-      if(values.second > 300) {
+      if (values.second > 300) {
         MessageFu.error("时限不能大于300s");
         return;
       }
 
-      if(values.score > 99999) {
+      if (values.score > 99999) {
         MessageFu.error("得分不能大于99999");
         return;
       }
@@ -99,15 +99,14 @@ function RuleEdit({ id, closePage, upTableList, editMode }: Props) {
   // 通过校验点击确定--观看视频
   const onFinish2 = useCallback(
     async (values: any) => {
-    
+
       const obj = {
-        description: "每观看完一个视频可得分",
-        id: 10,
-        name: "观看视频",
+        description: shuoming,
+        id: id,
         rtf: "",
-        score:values.score,
-        second: 0
-      }
+        score: values.score,
+        second: 0,
+      };
 
       const res: any = await ruleSaveAPI(obj);
 
@@ -120,7 +119,7 @@ function RuleEdit({ id, closePage, upTableList, editMode }: Props) {
       }
       // console.log("通过校验，点击确定");
     },
-    [closePage, id, upTableList]
+    [closePage, id, shuoming, upTableList]
   );
 
   return (
@@ -153,7 +152,10 @@ function RuleEdit({ id, closePage, upTableList, editMode }: Props) {
                   id === 3 ? [] : [{ required: true, message: "请输入时限!" }]
                 }
                 getValueFromEvent={(e) =>
-                  e.target.value.replace(/^(?!^([1-9]\d{0,2}|1\d{2}|2\d{1}|300)$).*/g, "")
+                  e.target.value.replace(
+                    /^(?!^([1-9]\d{0,2}|1\d{2}|2\d{1}|300)$).*/g,
+                    ""
+                  )
                 }
               >
                 <Input
@@ -227,7 +229,7 @@ function RuleEdit({ id, closePage, upTableList, editMode }: Props) {
           wrapClassName={styles.RuleEdit}
           destroyOnClose
           open={true}
-          title="观看视频"
+          title="编辑"
           footer={
             [] // 设置footer为空，去掉 取消 确定默认按钮
           }

houtai/src/pages/Login/index.tsx

@@ -22,6 +22,7 @@ export default function Login() {
   const [verificationCode, setVerificationCode] = useState("");
   const [refreshCount, setRefreshCount] = useState(0);
   const [codeUrl, setCodeUrl] = useState(
+    // "https://sit-cnzhengquan.4dage.com/api/show/getRandCode"
     "/api/show/getRandCode"
   );
 

zhengquan/src/views/Home/homePage.vue

@@ -2,8 +2,15 @@
 import browser from '@/utils/browser'
 import HomeTabbar from './components/homeTabbar.vue';
 import SceneListInfo from './components/sceneListInfo.vue'
+import baseResourceUrl from "@/utils/https";
+
+
 
 import UnitList from './components/unitList.vue';
+import axios from 'axios';
+
+
+const router = useRouter()
 
 const isShowSceneList = ref(false)
 const openSceneList = () => {
@@ -21,6 +28,46 @@ const closeUnitList = () => {
   isShowUnitList.value = false
 }
 
+// const baseAPIUrl = ref('')
+const baseAPIUrl = ref('http://192.168.20.61:8063')
+// const baseAPIUrl = ref('https://sit-cnzhengquan.4dage.com')
+
+// const store = useStore()
+
+
+const displayText = ref([] as any)
+
+// const isShowLogon = ref(false)
+
+
+const isLogin = ref(false)
+
+const goLogin = () => {
+  router.push({
+    path: 'homePageMo',
+    query: {
+      src: '/game/index.html#/login-view?no-redirect=1'
+    }
+  })
+  isLogin.value = true
+}
+
+
+
+onMounted(() => {
+  axios({
+    method: 'get',
+    url: `${baseAPIUrl.value}/api/show/rule/getList`,
+  }).then((res: any) => {
+
+    displayText.value = res.data.data
+  })
+
+  if (localStorage.getItem('token') && localStorage.getItem('userInfo')) {
+    isLogin.value = true
+  }
+})
+
 </script>
 
 <template>
@@ -29,6 +76,44 @@ const closeUnitList = () => {
     <HomeTabbar @openScene="openSceneList()" @openUnit="openUnitList()" />
     <SceneListInfo v-show="isShowSceneList" @close="closeSceneList()" />
     <UnitList v-show="isShowUnitList" @close="closeUnitList()" />
+
+    <!-- 未登录弹窗 -->
+    <div class="noLogin" v-if="!isLogin">
+      <div class="noLogin-box">
+        <div class="title">完成注册并登录，即可获得积分</div>
+        <div class="scoreSM">积分规则：</div>
+        <!-- <div class="gameItem">乡村林场：完成任一环节（浇水，施肥，除虫，修剪）可得分 12分</div> -->
+        <div class="gameItem" v-for="(item, index) in displayText" :key="index">
+          <div v-if="!browser.mobile">{{ item.name !== '当日积分上限' || item.name ===
+            '' ? item.name +
+            ' : ' + item.description + ' ' + item.score + '分' : '' }}</div>
+
+          <div v-else :style="{ marginBottom: '5px' }">
+            <div v-show="item.name !== '当日积分上限'">{{ item.name + ':' }}</div>
+            <div v-show="item.name !== '当日积分上限'">{{ item.description + ' ' + item.score + '分' }}</div>
+          </div>
+        </div>
+
+
+        <div class="btns">
+          <div  v-show="browser.mobile" class="btn" @click="isLogin = true" >取消</div>
+          <div class="btn" @click="goLogin()">同意并注册账号</div>
+        </div>
+
+        <!-- 序厅序列帧 -->
+        <div class="xuliezhen-greeting changing"
+          :style="{ backgroundImage: `url(${baseResourceUrl}/animation/0/greeting.png)`, backgroundSize: 'cover' }">
+        </div>
+
+        <!-- 关闭按钮 -->
+        <img v-show="!browser.mobile" class="close-icon" @click="isLogin = true" src="@/assets/images/home/close-icon.png" alt="">
+      </div>
+    </div>
+
+    <!-- 登录iframe -->
+    <!-- <div v-if="isShowLogon" class="game-page">
+      <iframe :src="`/game/index.html#/login-view?no-redirect=1`" frameborder="0"></iframe>
+    </div> -->
   </div>
 </template>
 
@@ -44,6 +129,139 @@ const closeUnitList = () => {
     right: 3%;
     top: 5%;
   }
+
+  .noLogin {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.651);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    // padding: 30px;
+    // background: rgba(0, 0, 0, 0.7);
+    // backdrop-filter: blur(15px);
+    // border-radius: 10px;
+    color: white;
+    line-height: 35px;
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: center;
+    // align-items: center;
+    box-sizing: border-box;
+    box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+
+    .noLogin-box {
+      background: white;
+      width: 50%;
+      padding: 10px;
+      // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+      background: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(15px);
+
+      padding: 3% 15% 1.5% 5%;
+      box-sizing: border-box;
+      color: white;
+      border-radius: 10px;
+
+      .title {
+        font-size: 2em;
+        font-weight: bold;
+        letter-spacing: 1px;
+        margin-bottom: 20px;
+      }
+
+      .scoreSM {
+        line-height: 30px;
+      }
+
+      .gameItem {
+        line-height: 38px;
+      }
+
+      .btn {
+        width: 100%;
+        color: #fff;
+        background: #bc121bbb;
+        border-radius: 10px;
+        border: 1px solid rgba(0, 0, 0, .5);
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        font-family: "AlibabaPuHuiTi2.0-105Heavy";
+        box-shadow: 0 4px 18px #00000080;
+        margin-top: 10%;
+
+      }
+
+      .xuliezhen-greeting {
+        position: absolute;
+        right: 0;
+        bottom: 8%;
+        width: 200px;
+        height: 200px;
+        background-position-x: 0;
+        background-repeat: no-repeat;
+        // animation-name: xuliezhen-animation;
+        animation-name: xuliezhen-animation;
+        animation-timing-function: steps(48);
+        animation-duration: 4s;
+        animation-iteration-count: infinite;
+        transition-property: bottom;
+        cursor: pointer;
+      }
+
+      @keyframes xuliezhen-animation {
+        50% {
+          background-position-x: 0;
+        }
+
+        100% {
+          // background-position-x: v-bind('translateXNumber');
+          background-position-x: calc(100% - 200px);
+        }
+      }
+
+
+      .close-icon {
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+        position: absolute;
+        right: 5%;
+        top: 5%;
+      }
+
+    }
+  }
+
+  .game-page {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: white;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+
+      @media screen and (max-width: 700px),
+      (orientation: portrait) {
+        width: 100%;
+        // height: 100%;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 700px),
@@ -59,6 +277,81 @@ const closeUnitList = () => {
       right: 3%;
       top: 5%;
     }
+
+    .noLogin {
+
+      .noLogin-box {
+        width: 90%;
+        padding: 10px;
+
+
+        .title {
+          font-size: 1.2em;
+          margin-bottom: 10px;
+        }
+
+        .scoreSM {
+          line-height: 20px;
+          font-size: .8em;
+        }
+
+        .gameItem {
+          line-height: 20px;
+          font-size: .8em;
+
+        }
+
+        .btns {
+          display: flex;
+          justify-content: space-between;
+
+          .btn {
+            // width: %;
+            margin-top: 10px;
+          }
+        }
+
+
+        .xuliezhen-greeting {
+          position: absolute;
+          right: 0;
+          bottom: 10%;
+          width: 150px;
+          height: 150px;
+          background-position-x: 0;
+          background-repeat: no-repeat;
+          // animation-name: xuliezhen-animation;
+          animation-name: xuliezhen-animation;
+          animation-timing-function: steps(48);
+          animation-duration: 4s;
+          animation-iteration-count: infinite;
+          transition-property: bottom;
+          cursor: pointer;
+        }
+
+        @keyframes xuliezhen-animation {
+          50% {
+            background-position-x: 0;
+          }
+
+          100% {
+            // background-position-x: v-bind('translateXNumber');
+            background-position-x: calc(100% - 150px);
+          }
+        }
+
+
+        .close-icon {
+          width: 30px;
+          height: 30px;
+          cursor: pointer;
+          position: absolute;
+          right: 5%;
+          top: 5%;
+        }
+
+      }
+    }
   }
 }