Merge branch 'MMC' of xiongzhu/raex_front into master

src/router/index.js

@@ -393,6 +393,17 @@ const routes = [
             tabColor: '#181818'
         }
     },
+    {
+        path: '/productMMC',
+        name: 'productMMC',
+        component: () => import('../views/product/MMC.vue'),
+        meta: {
+            pageType: Page.Every,
+            menuPage: true,
+
+            tabColor: '#181818'
+        }
+    },
     {
         path: '/productDetail2',
         name: 'productDetail2',

src/views/Home.vue

@@ -295,6 +295,12 @@
             </div>
         </template>
     </van-dialog>
+    <van-overlay :show="showMMC" @click="showMMC = false" z-index="99">
+        <div class="mmc-box">
+            <img src="@/assets/MMC-tanchuang.png" @click.stop="" class="mmcbg" alt="" />
+            <div class="mmcUrl" @click.stop="goUrl"></div>
+        </div>
+    </van-overlay>
 </template>
 
 <script>
@@ -387,7 +393,9 @@ export default {
             acitivities: [],
             fuActivity: false,
             domainSwitch: false,
-            canRefreash: true
+            canRefreash: true,
+            showMMC: false,
+            MMCUrl: ''
         };
     },
     mounted() {
@@ -396,7 +404,25 @@ export default {
         }
         this.getInit();
         setTimeout(() => {
-            this.showTips();
+            this.showTips().then(() => {
+                let showMMC = window.sessionStorage.getItem('showMMC');
+                if (!showMMC) {
+                    this.$http.get('sysConfig/get/MMC_video_url,MMC_show,MMC_show_time').then(res => {
+                        if (res.MMC_show_time) {
+                            let date1 = dayjs(res.MMC_show_time.value).add(1, 'days');
+                            if (date1.isAfter(dayjs(), 'day')) {
+                                this.showMMC = true;
+                            }
+                        } else if (res.MMC_show) {
+                            this.showMMC = res.MMC_show.value === '1';
+                        }
+                        if (res.MMC_video_url) {
+                            this.MMCUrl = res.MMC_video_url.value;
+                        }
+                        window.sessionStorage.setItem('showMMC', true);
+                    });
+                }
+            });
         }, 500);
         this.$http.get('sysConfig/get/fu_startTime').then(res => {
             if (res.value) {
@@ -428,6 +454,9 @@ export default {
         });
     },
     methods: {
+        goUrl() {
+            window.open(this.MMCUrl);
+        },
         download() {
             document.location.href = 'https://yags.raex.vip/h5/home';
         },
@@ -457,25 +486,26 @@ export default {
             let inApp = /#cordova#/i.test(navigator.userAgent);
             let inIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
             if (inApp && '1' !== window.localStorage.getItem('AppTips')) {
-                (inIos
-                    ? Promise.resolve()
-                    : this.$dialog
-                          .confirm({
-                              title: 'RAEX绿洲服务协议和隐私政策',
-                              message: `在您使用我的各项服务之前，请务必审慎阅读、充分理解<a href="javascript:void(0)" onclick="goFetch('/agreement?page=service')" >《用户隐私协议》</a>、<a href="javascript:void(0)" onclick="goFetch('/agreement')" >《隐私政策》</a>的条款。并且我们会申请获取您的设备信息，以向您提供安全风控服务。同时您应特别注意前述协议中免除或者限制我们责任的条款、对您权利进行限制的条款。如您已详细阅读并同意RAEX宇宙用户协议、隐私政策，请点击【同意并继续】开始使用我们的服务。`,
-                              confirmButtonText: '同意并继续',
-                              cancelButtonText: '不同意',
-                              allowHtml: true
-                          })
-                          .then(() => {
-                              return this.$dialog.confirm({
-                                  title: '温馨提示',
-                                  message:
-                                      '收集个人信息为我们向您提供服务所必须哦。我们仅会将您的个人信息用于为您提供服务，若不同意此协议，我们将无法为您提供服务并退出应用。',
-                                  confirmButtonText: '同意',
-                                  cancelButtonText: '不同意'
-                              });
-                          })
+                return (
+                    inIos
+                        ? Promise.resolve()
+                        : this.$dialog
+                              .confirm({
+                                  title: 'RAEX绿洲服务协议和隐私政策',
+                                  message: `在您使用我的各项服务之前，请务必审慎阅读、充分理解<a href="javascript:void(0)" onclick="goFetch('/agreement?page=service')" >《用户隐私协议》</a>、<a href="javascript:void(0)" onclick="goFetch('/agreement')" >《隐私政策》</a>的条款。并且我们会申请获取您的设备信息，以向您提供安全风控服务。同时您应特别注意前述协议中免除或者限制我们责任的条款、对您权利进行限制的条款。如您已详细阅读并同意RAEX宇宙用户协议、隐私政策，请点击【同意并继续】开始使用我们的服务。`,
+                                  confirmButtonText: '同意并继续',
+                                  cancelButtonText: '不同意',
+                                  allowHtml: true
+                              })
+                              .then(() => {
+                                  return this.$dialog.confirm({
+                                      title: '温馨提示',
+                                      message:
+                                          '收集个人信息为我们向您提供服务所必须哦。我们仅会将您的个人信息用于为您提供服务，若不同意此协议，我们将无法为您提供服务并退出应用。',
+                                      confirmButtonText: '同意',
+                                      cancelButtonText: '不同意'
+                                  });
+                              })
                 )
                     .then(() => {
                         window.localStorage.setItem('AppTips', '1');
@@ -485,12 +515,14 @@ export default {
                                 console.log('deviceToken=' + deviceToken);
                             });
                         } catch (e) {}
+                        return Promise.resolve();
                     })
                     .catch(() => {
                         navigator.app.exitApp();
+                        return Promise.reject();
                     });
             } else if (!window.localStorage.getItem('AppTips') && !inIos && inApp) {
-                this.$dialog
+                return this.$dialog
                     .confirm({
                         title: 'RAEX绿洲服务协议和隐私政策',
                         message: `在您使用我的各项服务之前，请务必审慎阅读、充分理解<a href="javascript:void(0)" onclick="goFetch('/agreement?page=service')" >《用户隐私协议》</a>、<a href="javascript:void(0)" onclick="goFetch('/agreement')" >《隐私政策》</a>的条款。并且我们会申请获取您的设备信息，以向您提供安全风控服务。同时您应特别注意前述协议中免除或者限制我们责任的条款、对您权利进行限制的条款。如您已详细阅读并同意RAEX宇宙用户协议、隐私政策，请点击【同意并继续】开始使用我们的服务。`,
@@ -515,12 +547,15 @@ export default {
                                 console.log('deviceToken=' + deviceToken);
                             });
                         } catch (e) {}
+                        return Promise.resolve();
                     })
                     .catch(() => {
                         navigator.app.exitApp();
+                        return Promise.reject();
                     });
             } else {
                 this.showRisk();
+                return Promise.resolve();
             }
         },
         showRisk() {
@@ -1377,4 +1412,24 @@ export default {
     left: 14px;
     z-index: 20;
 }
+
+.mmc-box {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.mmcbg {
+    width: 80vw;
+    display: block;
+}
+
+.mmcUrl {
+    position: absolute;
+    width: 70%;
+    height: 10%;
+    left: 15%;
+    bottom: 10%;
+}
 </style>

src/views/product/MMC.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="tasks">
+        <img src="@/assets/png-01-toubu.png" class="bg1" alt="" />
+        <div class="task-form">
+            <img src="@/assets/png-02-zhuce.png" class="bg1" alt="" />
+            <div class="box">
+                <van-form ref="form">
+                    <van-field
+                        type="tel"
+                        name="手机号码"
+                        placeholder="请输入手机号码"
+                        v-model="form.phone"
+                        :maxlength="11"
+                        class="phone"
+                        clearable
+                        :rules="[
+                            { required: true, message: '请输入手机号码' },
+                            {
+                                pattern: phonePattern,
+                                message: '手机号码格式错误'
+                            }
+                        ]"
+                    >
+                        <template #left-icon>
+                            <img class="form-icon" src="@/assets/login_icon_shoujihao.png" alt="" />
+                        </template>
+                    </van-field>
+
+                    <div class="code-form">
+                        <van-field
+                            type="digit"
+                            name="验证码"
+                            placeholder="请输入"
+                            v-model="form.code"
+                            :maxlength="4"
+                            :rules="[{ required: true, message: '请输入验证码' }]"
+                        >
+                            <template #left-icon>
+                                <img class="form-icon" src="@/assets/login_icon_yanzhengma.png" alt="" />
+                            </template>
+                        </van-field>
+
+                        <van-button
+                            round
+                            @click="sendPhone"
+                            class="sub-code"
+                            size="small"
+                            color="#FFE000"
+                            plain
+                            :disabled="isSend"
+                        >
+                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                        </van-button>
+                    </div>
+                    <div class="button">
+                        <van-button @click="submit" round block native-type="submit" class="sure"> 确认 </van-button>
+                    </div>
+                </van-form>
+            </div>
+        </div>
+
+        <img src="@/assets/png-03-guize.png" class="bg3" alt="" />
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import phone from '../../mixins/phone';
+export default {
+    mixins: [phone],
+    data() {
+        return {
+            form: {
+                phone: '',
+                code: '',
+                invitor: '',
+                collectionId: ''
+            },
+            checked: false,
+            checkTimer: null
+        };
+    },
+    computed: {
+        ...mapState(['productId', 'invitor'])
+    },
+    mounted() {
+        if (this.invitor) {
+            this.form.invitor = this.invitor;
+        }
+        this.$http.get('sysConfig/get/MMC_collection_id').then(res => {
+            if (res.value && res.value !== '0') {
+                this.form.collectionId = res.value;
+            }
+        });
+    },
+    beforeUnmount() {
+        this.clearTimer();
+    },
+    methods: {
+        sendPhone(e) {
+            this.$refs.form.validate('手机号码').then(() => {
+                if (!this.checkWebDriver(e)) {
+                    return;
+                }
+                this.sendMsg(this.form.phone);
+            });
+        },
+        submit(e) {
+            this.$refs.form.validate().then(() => {
+                this.$toast.loading({
+                    message: '加载中...',
+                    forbidClick: true
+                });
+                if (!this.checkWebDriver(e)) {
+                    return;
+                }
+                this.$http
+                    .post('/auth/mqPhoneRegister', this.form)
+                    .then(phone => {
+                        this.$toast.loading({
+                            message: '加载中...',
+                            forbidClick: true,
+                            duration: 0
+                        });
+                        this.checkTimer = setInterval(() => {
+                            this.checkResult(phone);
+                        }, 1500);
+                    })
+                    .catch(e => {
+                        if (e) {
+                            this.$toast(e.error);
+                        }
+                    });
+            });
+        },
+        checkResult(phone) {
+            console.log('checkResult', phone);
+            this.$http
+                .get('/auth/registerResult', { phone })
+                .then(res => {
+                    if (res.status === 'success') {
+                        localStorage.setItem('nineToken', res.token);
+                        this.$store.dispatch('getUserInfo').then(() => {
+                            this.clearTimer();
+                            this.$toast.clear();
+                            this.$toast.success('助力成功');
+                            setTimeout(() => {
+                                this.$router.replace('/home');
+                            }, 1000);
+                        });
+                    } else if (res.status === 'fail') {
+                        this.clearTimer();
+                        this.$toast.clear();
+                        this.$toast((res || {}).data || '助力失败');
+                    }
+                })
+                .catch(e => {
+                    console.log(e);
+                });
+        },
+        clearTimer() {
+            if (this.checkTimer) {
+                clearInterval(this.checkTimer);
+                this.checkTimer = null;
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tasks {
+    background-color: #181818;
+    position: relative;
+}
+.bg {
+    display: block;
+}
+
+.task-form {
+    position: relative;
+}
+.box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 19.4vw 19.4vw 0 16.8vw;
+}
+
+.title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 22px;
+    text-align: center;
+    padding: 16px 0 12px;
+}
+
+/deep/.van-form {
+    padding: 0 0;
+
+    .van-cell {
+        .van-field__left-icon {
+            .flex();
+        }
+        background: rgba(14, 2, 6, 0.6);
+        border-radius: 22px;
+        height: 10.6vw;
+        padding: 0 10px 0 10px;
+        overflow: visible;
+        --van-field-input-text-color: #fff;
+        --van-field-clear-icon-color: #292834;
+        --van-field-icon-size: 18px;
+        --van-field-placeholder-text-color: rgba(255, 255, 255, 0.4);
+    }
+    .van-field__left-icon {
+        margin-right: 12px;
+    }
+
+    .phone {
+        margin-bottom: 5.3vw;
+    }
+
+    .van-field__value {
+        position: relative;
+        //
+        .van-field__error-message {
+            position: absolute;
+            bottom: -22px;
+            left: 0px;
+        }
+    }
+    .form-icon {
+        width: 24px;
+        height: 24px;
+    }
+    .code-form {
+        .flex();
+        margin-bottom: 6.4vw;
+
+        .sub-code {
+            margin-left: 12px;
+            background-color: #050d19;
+        }
+    }
+    .van-cell {
+        --van-field-error-message-color: red;
+        &::after {
+            content: none;
+        }
+        .van-field__body {
+            height: 100%;
+        }
+    }
+    // .van-cell + .van-cell {
+    //     margin-top: 5.3vw;
+    // }
+
+    .button {
+        margin-top: 16px;
+    }
+
+    .van-button {
+        height: 10.6vw;
+    }
+
+    .sub-code {
+        min-width: 78px;
+    }
+
+    .sure {
+        --van-button-default-background-color: #ffe000;
+        --van-button-default-color: #000000;
+        --van-button-border-width: 0px;
+        font-family: AlimamaShuHeiTi;
+    }
+}
+
+.bg1 {
+    width: 100%;
+    display: block;
+}
+.bg3 {
+    width: 100%;
+    display: block;
+}
+</style>