.

src/main/mobile/src/views/home.vue

@@ -0,0 +1,217 @@
+<template>
+    <div>
+        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+            <van-swipe-item v-for="item in banners" :key="item.id">
+                <img :src="item.pic" />
+            </van-swipe-item>
+        </van-swipe>
+        <div class="menus">
+            <div class="menu" @click="contact">
+                <img src="../assets/shakehand.png" class="icon" />
+                <div class="title">商务对接</div>
+            </div>
+            <div class="menu" @click="promote">
+                <img src="../assets/promote.png" class="icon" />
+                <div class="title">我要推广</div>
+            </div>
+            <div class="menu" @click="about">
+                <img src="../assets/contact.png" class="icon" />
+                <div class="title">关于我们</div>
+            </div>
+        </div>
+        <div class="promote" v-if="showPromote">
+            <div class="sub-title">MR智慧党建产品限时推广</div>
+            <div class="title">
+                倒计时<span class="number">{{ days }}</span
+                >天
+                <div class="contact" @click="contact">我要对接</div>
+            </div>
+            <div class="desc">{{ startStr }}到{{ endStr }} 仅限前10单</div>
+            <img src="../assets/clock.png" class="icon" />
+        </div>
+        <div class="article" v-html="content1"></div>
+        <div class="article" v-html="content2" id="contact"></div>
+        <div style="height: calc(50px + max(env(safe-area-inset-bottom), 0px))"></div>
+        <promote-dialog :visible.sync="showDialog"></promote-dialog>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import qrcode from '@chenfengyuan/vue-qrcode';
+import promoteDialog from '../components/promoteDialog';
+export default {
+    components: { promoteDialog },
+    data() {
+        return {
+            banners: [],
+            content1: '',
+            content2: '',
+            start: null,
+            end: null,
+            showDialog: false
+        };
+    },
+    created() {
+        this.$http.post('/banner/all', { size: 1000 }, { body: 'json' }).then(res => {
+            this.banners = res.content;
+        });
+        this.$http.get('/article/get/name/首页介绍').then(res => {
+            this.content1 = res.content;
+        });
+        this.$http.get('/article/get/name/商务对接').then(res => {
+            this.content2 = res.content;
+        });
+        this.$http.get('/sysConfig/get/start').then(res => {
+            this.start = this.$dayjs(res.value, 'YYYY-MM-DD HH:mm:ss');
+        });
+        this.$http.get('/sysConfig/get/end').then(res => {
+            this.end = this.$dayjs(res.value, 'YYYY-MM-DD HH:mm:ss');
+        });
+    },
+    computed: {
+        ...mapState(['userInfo']),
+        showPromote() {
+            if (this.start && this.end) {
+                return !(this.$dayjs().isBefore(this.start) || this.$dayjs().isAfter(this.end));
+            }
+            return false;
+        },
+        startStr() {
+            if (this.start) {
+                return this.start.format('MM-DD');
+            }
+            return '';
+        },
+        endStr() {
+            if (this.end) {
+                return this.end.format('MM-DD');
+            }
+            return '';
+        },
+        days() {
+            if (this.end) {
+                let x = this.end.startOf('day');
+                let y = this.$dayjs().startOf('day');
+                return this.$dayjs.duration(x.diff(y)).asDays();
+            }
+            return 0;
+        }
+    },
+    methods: {
+        contact() {
+            document.querySelector('#contact').scrollIntoView();
+        },
+        promote() {
+            if (this.checkLogin()) {
+                this.showDialog = true;
+            }
+        },
+        about() {
+            this.$router.push({
+                name: 'article',
+                query: {
+                    name: '关于我们'
+                }
+            });
+        },
+        checkLogin() {
+            if (!(this.userInfo && this.userInfo.id)) {
+                this.$dialog
+                    .confirm({
+                        title: '提示',
+                        message: '你还未登录，是否立即登录？'
+                    })
+                    .then(() => {
+                        this.$router.push({ name: 'login' });
+                    });
+                return false;
+            } else {
+                return true;
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.my-swipe {
+    width: 100vw;
+    height: calc(100vw * 0.6);
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+.menus {
+    .flex();
+    justify-content: space-around;
+    margin-top: 20px;
+    .menu {
+        .flex-col();
+        align-items: center;
+        .icon {
+            width: 56px;
+            height: 56px;
+        }
+        .title {
+            font-size: 13px;
+            color: @text1;
+            margin-top: 8px;
+        }
+    }
+}
+.promote {
+    background: #ed394d;
+    height: 135px;
+    border-radius: 12px;
+    margin: 20px 16px;
+    position: relative;
+    padding: 20px 0 20px 16px;
+    .flex-col();
+    justify-content: space-between;
+    .title {
+        font-size: 14px;
+        font-weight: bold;
+        color: white;
+        .flex();
+        align-items: baseline;
+        .number {
+            font-size: 36px;
+        }
+        .contact {
+            font-size: 12px;
+            font-weight: normal;
+            width: 60px;
+            height: 24px;
+            .flex();
+            justify-content: center;
+            color: white;
+            border: 1px solid white;
+            border-radius: 3px;
+            margin-left: 10px;
+            position: relative;
+            bottom: 4px;
+        }
+    }
+    .sub-title {
+        font-size: 14px;
+        color: white;
+        font-weight: bold;
+    }
+    .desc {
+        color: rgba(255, 255, 255, 0.6);
+        font-size: 12px;
+    }
+    .icon {
+        position: absolute;
+        width: 107px;
+        height: 105px;
+        right: 17px;
+        bottom: 14px;
+    }
+}
+.article {
+    padding: 0 16px;
+    margin-top: 20px;
+}
+</style>