add a guide page

sourcecode/h5app/vue/src/components/addPresentButton.vue

@@ -1,23 +1,33 @@
 <template>
     <div class="button_container">
-            <img src="../assets/add_button_active.png"
-                 class="add_button"
-                 v-if="can_add" @click="toAddPresent"
-            />
-            <img src="../assets/add_button_inactive.png"
-                 class="add_button"
-                 v-if="!can_add"
-            />
+        <img src="../assets/add_button_active.png"
+             class="add_button s"
+             v-if="can_add" @click="toAddPresent"
+        />
+
+        <img src="../assets/add_button_inactive.png"
+             class="add_button"
+             v-if="!can_add"
+        />
     </div>
 </template>
 
 <script>
     export default {
         name: "add-present-button",
-        props: ['can_add'],
+        props: {
+            can_add: {
+                type: Boolean,
+                default: true
+            },
+            disabled: {
+                type: Boolean,
+                default: true
+            }
+        },
         methods: {
             toAddPresent() {
-                this.$router.push('verify');
+                if (this.disabled) this.$router.push('verify');
             }
         }
     }
@@ -36,4 +46,270 @@
         width: 100%;
         pointer-events: none;
     }
+
+    .s {
+        border-radius: 50%;
+        background: white;
+        box-shadow: inset -1px 1px 4px 2px #fd6740, inset 1px -1px 4px 2px #ffffff;
+        -webkit-transition: all 1s;
+        -moz-transition: all 1s;
+        transition: all 1s;
+    }
+
+    .s:nth-child(n):hover {
+        -webkit-animation: bs2 linear 1s 1s infinite, bs2-in 1s;
+        -moz-animation: bs2 linear 1s 1s infinite, bs2-in 1s;
+        animation: bs2 linear 1s 1s infinite, bs2-in 1s;
+    }
+
+    .s:nth-child(1) {
+        width: 50px;
+        height: 50px;
+        margin-top: -10px;
+        -webkit-animation: bs linear 2s 0.5s infinite;
+        -moz-animation: bs linear 2s 0.5s infinite;
+        animation: bs linear 2s 0.5s infinite;
+    }
+
+    .s:nth-child(2) {
+        width: 65px;
+        height: 65px;
+        margin-top: -15px;
+        -webkit-animation: bs linear 2s 0.7s infinite;
+        -moz-animation: bs linear 2s 0.7s infinite;
+        animation: bs linear 2s 0.7s infinite;
+    }
+
+    .s:nth-child(3) {
+        width: 80px;
+        height: 80px;
+        margin-top: -20px;
+        -webkit-animation: bs linear 2s 0.9s infinite;
+        -moz-animation: bs linear 2s 0.9s infinite;
+        animation: bs linear 2s 0.9s infinite;
+    }
+
+    .s:nth-child(4) {
+        width: 95px;
+        height: 95px;
+        margin-top: -25px;
+        -webkit-animation: bs linear 2s 1.1s infinite;
+        -moz-animation: bs linear 2s 1.1s infinite;
+        animation: bs linear 2s 1.1s infinite;
+    }
+
+    .s:nth-child(5) {
+        width: 105px;
+        height: 105px;
+        margin-top: -30px;
+        -webkit-animation: bs linear 2s 1.3s infinite;
+        -moz-animation: bs linear 2s 1.3s infinite;
+        animation: bs linear 2s 1.3s infinite;
+    }
+
+    .s:nth-child(6) {
+        width: 120px;
+        height: 120px;
+        margin-top: -35px;
+        -webkit-animation: bs linear 2s 1.5s infinite;
+        -moz-animation: bs linear 2s 1.5s infinite;
+        animation: bs linear 2s 1.5s infinite;
+    }
+
+    .s:nth-child(7) {
+        width: 105px;
+        height: 105px;
+        margin-top: -30px;
+        -webkit-animation: bs linear 2s 1.7s infinite;
+        -moz-animation: bs linear 2s 1.7s infinite;
+        animation: bs linear 2s 1.7s infinite;
+    }
+
+    .s:nth-child(8) {
+        width: 95px;
+        height: 95px;
+        margin-top: -25px;
+        -webkit-animation: bs linear 2s 1.9s infinite;
+        -moz-animation: bs linear 2s 1.9s infinite;
+        animation: bs linear 2s 1.9s infinite;
+    }
+
+    .s:nth-child(9) {
+        width: 80px;
+        height: 80px;
+        margin-top: -20px;
+        -webkit-animation: bs linear 2s 2.1s infinite;
+        -moz-animation: bs linear 2s 2.1s infinite;
+        animation: bs linear 2s 2.1s infinite;
+    }
+
+    .s:nth-child(10) {
+        width: 65px;
+        height: 65px;
+        margin-top: -15px;
+        -webkit-animation: bs linear 2s 2.3s infinite;
+        -moz-animation: bs linear 2s 2.3s infinite;
+        animation: bs linear 2s 2.3s infinite;
+    }
+
+    .s:nth-child(11) {
+        width: 50px;
+        height: 50px;
+        margin-top: -10px;
+        -webkit-animation: bs linear 2s 2.5s infinite;
+        -moz-animation: bs linear 2s 2.5s infinite;
+        animation: bs linear 2s 2.5s infinite;
+    }
+
+    @-webkit-keyframes bs {
+        0% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #fd6740;
+        }
+
+        50% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 20px 0 #fdbd24;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #fffa27;
+        }
+    }
+
+    @-moz-keyframes bs {
+        0% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #fd6740;
+        }
+
+        50% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 20px 0 #fdbd24;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #fffa27;
+        }
+    }
+
+    @-o-keyframes bs {
+        0% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #fd6740;
+        }
+
+        50% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 20px 0 #fdbd24;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #fffa27;
+        }
+    }
+
+    @keyframes bs {
+        0% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #fffa27;
+        }
+
+        50% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 20px 0 #fd6740;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #fdbd24;
+        }
+    }
+
+    @-webkit-keyframes bs2-in {
+        0% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 10px 0 #bbff33;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+    }
+
+    @-moz-keyframes bs2-in {
+        0% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 10px 0 #bbff33;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+    }
+
+    @-o-keyframes bs2-in {
+        0% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 10px 0 #bbff33;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+    }
+
+    @keyframes bs2-in {
+        0% {
+            box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 10px 0 #bbff33;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+    }
+
+    @-webkit-keyframes bs2 {
+        0% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+
+        50% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 10px 0 #ffbb33;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+    }
+
+    @-moz-keyframes bs2 {
+        0% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+
+        50% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 10px 0 #ffbb33;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+    }
+
+    @-o-keyframes bs2 {
+        0% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+
+        50% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 10px 0 #ffbb33;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+    }
+
+    @keyframes bs2 {
+        0% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+
+        50% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 10px 0 #ffbb33;
+        }
+
+        100% {
+            box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333;
+        }
+    }
 </style>

sourcecode/h5app/vue/src/components/guide.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="guide_background" v-if="seen" @click="seen=false">
+        <div class="tips">
+            <p>点击这里<br/>发布礼物</p>
+            <img src="../assets/arrow.png"/>
+        </div>
+        <add-present-button :can_add="true" :disabled="false"/>
+    </div>
+</template>
+
+<script>
+    import AddPresentButton from "./addPresentButton";
+
+    export default {
+        name: "guide",
+        components: {AddPresentButton},
+        data() {
+            return {
+                seen: true
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .guide_background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #313131;
+        opacity: 0.5;
+        width: 100%;
+        height: 100%;
+    }
+
+    .tips {
+        color: white;
+        position: fixed;
+        bottom: 11%;
+        width: 100%;
+    }
+
+    .tips p {
+        margin-left: 80px;
+        margin-bottom: 0;
+    }
+
+    .tips img {
+        margin-left: 80px;
+        width: 20px;
+        height: 20px;
+        margin-top: 3px;
+    }
+</style>

sourcecode/h5app/vue/src/views/SecurityVerify.vue

@@ -179,7 +179,6 @@
                                         let user = res.model.list[0];
                                         user.name = that.username;
                                         user.phone = that.phone;
-                                        user.schoolDistrict = that.dorId;
                                         console.log('----- Update User Info -----');
                                         console.log(user);
                                         BasicFunction.get_data('smartUsers/updateBatch', function (res) {

sourcecode/h5app/vue/src/views/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <guide style="z-index: 3"/>
         <van-swipe :autoplay="3000" style="margin: 10px 10px;">
             <van-swipe-item v-for="(image, index) in images" :key="index">
                 <img v-lazy="image" style="max-width: 100%"/>
@@ -44,10 +45,12 @@
     } from "vant";
     import AddPresentButton from "../components/addPresentButton";
     import {BasicFunction} from '../connector/basic-service';
+    import Guide from "../components/guide";
 
     export default {
         name: "index",
         components: {
+            Guide,
             AddPresentButton,
             IndexPresent,
             [Button.name]: Button,