Merge branch '绿洲水稻' of xiongzhu/raex_front into dev

src/components/AppBar.vue

@@ -162,8 +162,7 @@ export default {
         },
         back() {
             if (!fromRoute || !fromRoute.name) {
-                // this.$router.replace('/home');
-                this.$router.go(-1);
+                this.$router.replace('/home');
             } else if (window.history.length <= 1) {
                 this.$router.replace('/home');
                 return false;

src/components/rice/Rank.vue

@@ -2,8 +2,12 @@
     <div class="wrapper" @click="show = false" v-if="show"></div>
     <transition name="van-slide-up">
         <div class="page" v-show="show">
-            <img src="@assets/png-renwu.png" @click="show = false" class="topImg" alt="" />
-            <img src="@assets/rice-biaoti.png" class="topBanner" alt="" />
+            <img src="@assets/png-paihang.png" @click="show = false" class="topImg" alt="" />
+            <div class="topBanner">
+                <img src="@assets/rice-biaoti.png" alt="" />
+                <span>排行榜</span>
+            </div>
+            <img src="@assets/icon_close.png" @click.stop="show = false" alt="" class="close" />
 
             <div class="page-content" @click.stop="">
                 <div class="page-box">
@@ -12,6 +16,44 @@
                         <span>用户信息</span>
                         <span>等级</span>
                     </div>
+
+                    <div class="rank-list">
+                        <div class="rank-info" v-for="(i, index) in 10" :key="i">
+                            <div class="num" :class="{ img_num: index < 3 }">
+                                <img :src="icons[index]" v-if="index < 3" alt="" />
+                                <span v-else>{{ index + 1 }}</span>
+                            </div>
+
+                            <div class="user">
+                                <van-image
+                                    width="38"
+                                    height="38"
+                                    round
+                                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                                />
+                                <span>皮功家</span>
+                            </div>
+
+                            <div class="level">Lv24</div>
+                        </div>
+
+                        <div class="min-rank">
+                            <div class="num">未上榜</div>
+                            <div class="user">
+                                <van-image
+                                    width="38"
+                                    height="38"
+                                    round
+                                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                                />
+                                <div class="user-info">
+                                    <div class="text1">小猴子</div>
+                                    <div class="text2">距离上榜还差10个等级</div>
+                                </div>
+                            </div>
+                            <div class="level">Lv5</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -21,17 +63,18 @@
 <script setup>
 import { ref, defineEmits, defineExpose } from 'vue';
 
-const emit = defineEmits(['send']);
 const show = ref(false);
+function init() {
+    show.value = true;
+}
+defineExpose({ init });
 
+const emit = defineEmits(['send']);
 function send() {
     emit('send');
 }
 
-function init() {
-    show.value = true;
-}
-defineExpose({ init });
+const icons = [require('@assets/png-top.01.png'), require('@assets/png-top.02.png'), require('@assets/png-top.03.png')];
 </script>
 
 <style lang="less" scoped>
@@ -51,6 +94,32 @@ defineExpose({ init });
     left: 50%;
     margin-left: -123px;
     z-index: 2;
+    img {
+        width: 256px;
+        display: block;
+    }
+
+    span {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 26px;
+        font-family: YouSheBiaoTiYuan;
+        color: #ffffff;
+        line-height: 34px;
+        letter-spacing: 2px;
+        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
+    }
+}
+
+.close {
+    position: absolute;
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    top: -52px;
+    right: 16px;
 }
 .wrapper {
     position: fixed;
@@ -91,12 +160,189 @@ defineExpose({ init });
         position: relative;
 
         .page-box {
-            padding: 12px 0 calc(var(--safe-bottom) + 12px);
+            padding: 0 0 calc(var(--safe-bottom) + 12px);
             box-shadow: inset 1px 1px 0px 0px #ffffff, inset 0px 0px 0px 0px #ffffff;
             border-radius: 16px 16px 0px 0px;
             border: 1px solid rgba(254, 204, 70, 0.3);
             border-bottom-width: 0;
+            max-height: 60vh;
+            overflow: auto;
+        }
+    }
+}
+
+.rank-top {
+    padding: 20px 22px 9px 18px;
+    position: sticky;
+    top: 0;
+    .flex();
+    background-color: #fff9e1;
+    z-index: 20;
+    span {
+        font-size: 12px;
+        color: rgba(13, 13, 13, 0.6);
+        line-height: 24px;
+        flex-shrink: 0;
+        &:first-child {
+            width: 32px;
+            text-align: center;
+        }
+
+        &:nth-child(2) {
+            margin-left: 36px;
+            flex-grow: 1;
+        }
+
+        &:nth-child(3) {
+            width: 50px;
+            text-align: right;
+        }
+    }
+}
+
+.rank-info {
+    .flex();
+    margin: 0 6px;
+    background: rgba(0, 0, 0, 0.03);
+    border-radius: 4px;
+    .num {
+        width: 32px;
+        text-align: center;
+        height: 56px;
+        padding-left: 12px;
+        position: relative;
+
+        img {
+            width: 32px;
+            display: block;
+        }
+
+        span {
+            display: block;
+            padding-top: 16px;
+            font-size: 16px;
+            font-family: AlibabaPuHuiTi;
+            font-weight: bold;
+            color: #969595;
+            line-height: 20px;
+        }
+
+        &::after {
+            content: '';
+            width: 6px;
+            height: 2px;
+            background: #d2d2d2;
+            position: absolute;
+            left: 25px;
+            bottom: 14px;
+        }
+
+        &.img_num {
+            &::after {
+                bottom: 8px;
+            }
+        }
+    }
+
+    .user {
+        margin-left: 36px;
+        .flex();
+        flex-grow: 1;
+        span {
+            font-size: 14px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+            margin-left: 10px;
+        }
+    }
+
+    .level {
+        font-size: 14px;
+        font-family: AlibabaPuHuiTi;
+        font-weight: bold;
+        color: #969595;
+        line-height: 24px;
+        padding-right: 16px;
+    }
+
+    &:nth-child(1) {
+        background: linear-gradient(90deg, #fff4a9 0%, rgba(255, 244, 169, 0.3) 100%);
+        .level {
+            color: #ff8200;
         }
     }
+
+    &:nth-child(2) {
+        background: linear-gradient(90deg, #e0efff 0%, rgba(225, 239, 255, 0.3) 100%);
+        .level {
+            color: #61a3ff;
+        }
+    }
+
+    &:nth-child(3) {
+        background: linear-gradient(90deg, #fef4f0 0%, rgba(254, 244, 240, 0.3) 100%);
+        .level {
+            color: #c18d41;
+        }
+    }
+}
+
+.min-rank {
+    position: sticky;
+    bottom: 12px;
+    height: 56px;
+    background: #3ab200;
+    border-radius: 28px;
+    .flex();
+    padding: 0 18px;
+    margin: 36px 6px 0;
+    .num {
+        font-size: 14px;
+        font-family: AlibabaPuHuiTi;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+        width: 42px;
+        flex-shrink: 0;
+    }
+
+    .user {
+        .flex();
+        flex-grow: 1;
+        margin-left: 18px;
+        .van-image {
+            border: 1px solid #fff;
+        }
+
+        .user-info {
+            margin-left: 10px;
+            .text1 {
+                font-size: 14px;
+                font-family: AlibabaPuHuiTi;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .text2 {
+                font-size: 12px;
+                font-family: AlibabaPuHuiTi;
+                font-weight: lighter;
+                color: rgba(255, 255, 255, 0.4);
+                line-height: 17px;
+            }
+        }
+    }
+
+    .level {
+        font-size: 14px;
+        font-family: AlibabaPuHuiTi;
+        font-weight: bolder;
+        color: #ffffff;
+        line-height: 24px;
+    }
+}
+
+.rank-info + .rank-info {
+    margin-top: 18px;
 }
 </style>

src/components/rice/Share.vue

@@ -0,0 +1,223 @@
+<template>
+    <van-overlay :show="show" @click="show = false" z-index="100">
+        <div class="share" @click.stop>
+            <div class="text1">您的口令已生成</div>
+            <div class="text2">选择微信 <span>粘贴口令</span> 给好友吧</div>
+
+            <div class="share-box">
+                <div class="share-item">
+                    <div class="text">选择微信好友</div>
+                    <img src="@assets/rice_share1.png" alt="" />
+                </div>
+                <div class="share-item">
+                    <div class="text">粘贴口令</div>
+                    <img src="@assets/rice_share2.png" alt="" />
+                </div>
+            </div>
+
+            <van-button type="primary" round @click="show = false">去微信粘贴</van-button>
+
+            <img @click="show = false" src="@assets/rice_share_close.png" alt="" class="close" />
+        </div>
+    </van-overlay>
+
+    <van-overlay :show="showHelp" @click="showHelp = false" z-index="100">
+        <div class="share" @click.stop>
+            <div class="share-text1" v-if="shareTips === '助力成功'">谢谢你帮我助力得水滴</div>
+            <div class="share-text2" v-else>{{ shareTips }}</div>
+
+            <div class="share-user">
+                <img :src="shareUser.avatar" alt="" />
+                <div class="text">{{ shareUser.nickname }}</div>
+            </div>
+
+            <van-button type="primary" round @click="showHelp = false">我也去浇水</van-button>
+
+            <img @click="showHelp = false" src="@assets/rice_share_close.png" alt="" class="close" />
+        </div>
+    </van-overlay>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineExpose, getCurrentInstance, computed, onMounted, nextTick } from 'vue';
+import http from '../../plugins/http';
+import resolveUrl from 'resolve-url';
+import store from '../../store';
+
+const emit = defineEmits(['send']);
+const show = ref(false);
+
+function send() {
+    emit('send');
+}
+
+function init() {
+    show.value = true;
+    share();
+}
+defineExpose({ init });
+
+const shareText = computed(() => {
+    if (store.state.userInfo) {
+        return `『绿洲水稻』${resolveUrl(
+            http.baseUrl,
+            '9th/rice?shareRiceId=' + store.state.userInfo.id + '&riceShare=true'
+        )}`;
+    }
+    return '';
+});
+const {
+    appContext: {
+        config: { globalProperties: gobal }
+    }
+} = getCurrentInstance();
+
+function share() {
+    gobal.$copyText(shareText.value);
+}
+
+const showHelp = ref(false);
+const shareUser = ref({});
+const shareTips = ref('');
+onMounted(() => {
+    if (store.state.riceShare) {
+        showHelp.value = true;
+        http.http
+            .post('/riceInvite/helpOthers', {
+                helperId: store.state.userInfo.id,
+                helpeeId: store.state.shareRiceId
+            })
+            .then(res => {
+                shareTips.value = res.msg;
+                shareUser.value = res.map;
+                store.commit('setRiceShare', false);
+            });
+    }
+});
+</script>
+
+<style lang="less" scoped>
+.share {
+    width: 280px;
+    height: 288px;
+    background: #fefbea;
+    border-radius: 8px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -140px 0 0 -144px;
+    .flex-col();
+    align-items: center;
+    padding: 20px 12px;
+    box-sizing: border-box;
+    .text1 {
+        font-size: 18px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 25px;
+    }
+    .text2 {
+        font-size: 14px;
+        color: #8c572c;
+        line-height: 24px;
+        padding: 4px 0 16px;
+
+        span {
+            color: #3ab200;
+        }
+    }
+
+    .share-box {
+        .flex();
+        width: 256px;
+        background: #fef3d7;
+        border-radius: 8px;
+        padding: 12px;
+        box-sizing: border-box;
+        justify-content: space-between;
+        .share-item {
+            box-sizing: border-box;
+            img {
+                width: 106px;
+                display: block;
+                margin-top: 10px;
+            }
+
+            .text {
+                font-size: 12px;
+                color: #8c572c;
+                line-height: 17px;
+                &::before {
+                    content: '1';
+                    display: inline-block;
+                    vertical-align: middle;
+                    width: 14px;
+                    height: 14px;
+                    border-radius: 14px;
+                    font-size: 12px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    background: #8c572c;
+                    line-height: 14px;
+                    margin-right: 4px;
+                    text-align: center;
+                }
+            }
+
+            &:nth-child(2) {
+                .text {
+                    &::before {
+                        content: '2';
+                    }
+                }
+            }
+        }
+    }
+
+    .van-button {
+        --van-button-primary-background-color: #b2681f;
+        --van-button-primary-border-color: #b2681f;
+        width: 160px;
+        margin-top: 16px;
+    }
+
+    .close {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        top: 16px;
+        right: 16px;
+    }
+}
+.share-text1 {
+    font-size: 18px;
+    font-weight: bold;
+    color: #b2681f;
+    line-height: 25px;
+}
+
+.share-text2 {
+    font-size: 14px;
+    color: #8c572c;
+    line-height: 24px;
+    width: 180px;
+    text-align: center;
+}
+.share-user {
+    .flex-col();
+    align-items: center;
+    margin-top: 38px;
+    img {
+        width: 70px;
+        height: 70px;
+        border: 3px solid #b2681f;
+        border-radius: 70px;
+    }
+    .text {
+        font-size: 12px;
+        color: #000000;
+        line-height: 24px;
+        margin-top: 10px;
+    }
+}
+</style>

src/components/rice/Task.vue

@@ -4,18 +4,21 @@
         <div class="page" v-show="show">
             <img src="@assets/png-renwu.png" @click="show = false" class="topImg" alt="" />
             <img src="@assets/rice-biaoti.png" class="topBanner" alt="" />
+            <img src="@assets/icon_close.png" @click.stop="show = false" alt="" class="close" />
 
             <div class="page-content" @click.stop="">
                 <div class="page-box">
                     <div class="box-item">
                         <img src="@assets/icon_qiandao.png" alt="" />
                         <div class="box-info">
-                            <div class="text1">签到奖励(1/1)</div>
+                            <div class="text1">签到奖励({{ taskInfo.isSignedIn ? 1 : 0 }}/1)</div>
                             <div class="text2">每天签到可免费领取1滴水滴</div>
                         </div>
-                        <van-button type="primary" round @click="send">邀请</van-button>
+                        <van-button type="primary" :class="{ not: taskInfo.isSignedIn }" round @click="sign">{{
+                            taskInfo.isSignedIn ? '已完成' : '签到'
+                        }}</van-button>
                     </div>
-                    <div class="box-item">
+                    <div class="box-item" @click="share">
                         <img src="@assets/icon_yaoqing.png" alt="" />
                         <div class="box-info">
                             <div class="text1">邀请互动(0/1)</div>
@@ -33,7 +36,10 @@
                                 每天寄售商品购买成功次数 ≤4 次获得1积分，4次以上获得2积分(2积分可兑换1滴水)
                             </div>
                         </div>
-                        <van-button type="primary" round>兑换</van-button>
+                        <van-button type="primary" round v-if="taskInfo.exchangeCount" @click="exchange"
+                            >兑换</van-button
+                        >
+                        <van-button type="primary" round v-else @click="$router.push('/hopeMarket')">去看看</van-button>
                     </div>
                     <div class="box-item">
                         <img src="@assets/icon_huodong.png" alt="" />
@@ -44,7 +50,7 @@
                         </div>
                         <van-button type="primary" round>兑换</van-button>
                     </div>
-                    <div class="box-item">
+                    <!-- <div class="box-item">
                         <img src="@assets/icon_zhiya.png" alt="" />
                         <div class="box-info">
                             <div class="text1">数字产品质押</div>
@@ -52,7 +58,7 @@
                             <div class="text2">特定产品质押兑换成水滴，兑换当天不可寄售</div>
                         </div>
                         <van-button type="primary" round>去看看</van-button>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
@@ -60,19 +66,54 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, defineExpose } from 'vue';
+import { ref, defineEmits, defineExpose, getCurrentInstance, computed } from 'vue';
+import http from '../../plugins/http';
+import resolveUrl from 'resolve-url';
+import store from '../../store';
 
-const emit = defineEmits(['send']);
+const emit = defineEmits(['send', 'share']);
 const show = ref(false);
 
 function send() {
     emit('send');
 }
 
+function sign() {
+    if (!taskInfo.value.isSignedIn) {
+        http.http.get('/rice/signin').then(res => {
+            taskInfo.value = res.map;
+            getTask();
+            send();
+        });
+    }
+}
+
+const taskInfo = ref({});
+function getTask() {
+    http.http.get('/rice/taskInitialization').then(res => {
+        taskInfo.value = res.map;
+    });
+}
 function init() {
     show.value = true;
+    getTask();
 }
 defineExpose({ init });
+
+const {
+    appContext: {
+        config: { globalProperties: gobal }
+    }
+} = getCurrentInstance();
+function share() {
+    emit('share');
+}
+
+function exchange() {
+    http.http.get('/rice/exchangeScoreForWaterDrop').then(res => {
+        // taskInfo.value = res.map;
+    });
+}
 </script>
 
 <style lang="less" scoped>
@@ -93,6 +134,15 @@ defineExpose({ init });
     margin-left: -123px;
     z-index: 2;
 }
+
+.close {
+    position: absolute;
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    top: -52px;
+    right: 16px;
+}
 .wrapper {
     position: fixed;
     z-index: 19;
@@ -113,7 +163,7 @@ defineExpose({ init });
 
     &::after {
         content: '';
-        background: linear-gradient(180deg, #3ab200 0%, #49c52f 100%);
+        background: linear-gradient(180deg, #eda94c 0%, #ffe4b9 100%);
         box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.7);
         border-radius: 16px 16px 0px 0px;
         position: absolute;
@@ -125,7 +175,7 @@ defineExpose({ init });
     }
 
     .page-content {
-        background: linear-gradient(180deg, #f2ffd7 0%, #fcfff6 100%);
+        background: linear-gradient(180deg, #fff6e6 0%, #ffffff 100%);
         border-radius: 16px 16px 0px 0px;
         padding: 6px 6px 0;
         z-index: 3;
@@ -135,7 +185,7 @@ defineExpose({ init });
             padding: 12px 0 calc(var(--safe-bottom) + 12px);
             box-shadow: inset 1px 1px 0px 0px #ffffff, inset 0px 0px 0px 0px #ffffff;
             border-radius: 16px 16px 0px 0px;
-            border: 1px solid rgba(59, 179, 2, 0.3);
+            border: 1px solid rgba(178, 104, 31, 0.3);
             border-bottom-width: 0;
         }
     }
@@ -173,6 +223,12 @@ defineExpose({ init });
         height: 32px;
         margin-top: 7px;
         flex-shrink: 0;
+        --van-button-primary-background-color: #b2681f;
+        --van-button-primary-border-color: #b2681f;
+        &.not {
+            --van-button-primary-background-color: rgba(178, 104, 31, 0.5);
+            --van-button-primary-border-color: rgba(178, 104, 31, 0.5);
+        }
     }
 }
 </style>

src/main.js

@@ -166,6 +166,15 @@ if (query.hopeMarket === 'true' || query.hopeMarket === true || sessionStorage.g
     sessionStorage.setItem('hopeMarket', true);
 }
 
+if (query.riceShare === 'true' || query.riceShare === true || sessionStorage.getItem('riceShare')) {
+    store.commit('setRiceShare', true);
+    sessionStorage.setItem('riceShare', true);
+    if (query.shareRiceId || sessionStorage.getItem('shareRiceId')) {
+        store.commit('setShareRiceId', query.shareRiceId || sessionStorage.getItem('shareRiceId'));
+        sessionStorage.setItem('shareRiceId', query.shareRiceId || sessionStorage.getItem('shareRiceId'));
+    }
+}
+
 store.commit('setPlatform', /iPad|iPhone|iPod/i.test(navigator.userAgent) ? 'ios' : 'android');
 
 store.dispatch('getTheme');

src/plugins/http.js

@@ -100,6 +100,7 @@ const http = {
 export default {
     axios: axiosInstance,
     http: http,
+    baseUrl: baseUrl,
     install(app, options) {
         app.config.globalProperties.$baseUrl = baseUrl;
         app.config.globalProperties.$axios = axiosInstance;

src/router/index.js

@@ -897,8 +897,7 @@ const routes = [
         name: 'airice',
         component: () => import('../views/user/Rice.vue'),
         meta: {
-            menuPage: true,
-            pageType: Page.Every
+            menuPage: true
         }
     }
 ];

src/store/index.js

@@ -26,9 +26,17 @@ export default createStore({
         darkTheme: false,
         starPage: false,
         inviteType: 'NORMAL',
-        neteaseUser: null
+        neteaseUser: null,
+        riceShare: false,
+        shareRiceId: 0
     },
     mutations: {
+        setRiceShare(state, riceShare) {
+            state.riceShare = riceShare;
+        },
+        setShareRiceId(state, shareRiceId) {
+            state.shareRiceId = shareRiceId;
+        },
         setFinished(state, finished) {
             state.finished = finished;
         },

src/views/account/Login.vue

@@ -138,8 +138,11 @@ export default {
             checked: localStorage.getItem('agreeTerm') === 'true'
         };
     },
-    beforeRouteEnter(to, from) {
-        fromRoute = from;
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            fromRoute = from;
+            vm.emitter.emit('updateFrom', from);
+        });
     },
     mounted() {
         console.log(this.$store.state.loginBackUrl);

src/views/account/Register.vue

@@ -158,9 +158,11 @@ export default {
             codeImg: ''
         };
     },
-    beforeRouteEnter(to, from) {
-        fromRoute = from;
-        console.log(to, from);
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            fromRoute = from;
+            vm.emitter.emit('updateFrom', from);
+        });
     },
     methods: {
         sendPhone(e) {

src/views/user/Rice copy.vue

@@ -0,0 +1,321 @@
+<template>
+    <div class="page">
+        <div class="nav-header">
+            <span class="title">绿洲水稻</span>
+        </div>
+        <div class="user">
+            <img src="@assets/png-biaoti.png" alt="" />
+            <div class="user-box">
+                <van-image
+                    radius="100"
+                    width="40"
+                    height="40"
+                    :src="info.avatar ? info.avatar : require('@assets/img_default_photo.png')"
+                    fit="cover"
+                />
+                <div class="user-info">
+                    <div class="text1">
+                        <span>{{ info.nickname }}</span>
+                        <img @click="water" src="@assets/icon_bianji.png" alt="" />
+                    </div>
+                    <div class="text2">积分 {{ info.selfScore }}</div>
+                </div>
+                <div class="user-progress">
+                    <span>{{ level.name }}</span>
+                    <van-progress
+                        :percentage="level.per"
+                        color="#EFBA74"
+                        pivot-color="transparent"
+                        text-color="#B2681F"
+                        stroke-width="10"
+                    />
+                </div>
+            </div>
+        </div>
+        <div class="toolbar">
+            <div class="toolbar-item rank" @click="showRank">
+                <img src="@assets/icon_paihang.png" alt="" />
+            </div>
+            <div class="toolbar-item rule">
+                <img src="@assets/icon_shuoming.png" alt="" />
+            </div>
+        </div>
+        <iframe
+            class="game"
+            ref="game"
+            src="https://test.raex.vip/static/web-mobile/index.html"
+            frameborder="0"
+            id="game"
+        ></iframe>
+        <div class="progress">
+            <van-progress :percentage="50" stroke-width="12" />
+            <div class="progress-text">今日已浇灌2次，再浇10次即可升级</div>
+        </div>
+
+        <div class="task">
+            <van-badge content="可领取" :offset="[3, 6]">
+                <img src="@assets/png-lingshuidi.png" @click="showTask" alt="" />
+            </van-badge>
+        </div>
+
+        <rice-task @send="send" ref="task"></rice-task>
+        <rice-rank ref="rank"></rice-rank>
+    </div>
+</template>
+
+<script>
+import RiceTask from '../../components/rice/Task.vue';
+import RiceRank from '../../components/rice/Rank.vue';
+import { mapState } from 'vuex';
+import { throwStatement } from '@babel/types';
+export default {
+    mounted() {
+        this.$nextTick(() => {
+            console.log(this.$refs.game);
+            window.addEventListener('message', function (event) {
+                console.log(event);
+            });
+        });
+        this.$http.get('/MonkeyText/test');
+        this.getCurrent();
+        this.$http.get('/sysConfig/get/rice_level').then(res => {
+            this.levels = JSON.parse(res.value);
+        });
+        this.$http.get('/rice/scoreRanking');
+        this.$http.get('/rice/showLevel');
+    },
+    data() {
+        return {
+            info: {},
+            levels: []
+        };
+    },
+    computed: {
+        ...mapState(['userInfo']),
+        showUser() {
+            return this.isLogin
+                ? this.info
+                : {
+                      nickname: '小猴子'
+                  };
+        },
+        level() {
+            let levels = [...this.levels];
+            let level = {};
+            let empiricalValue = this.info.empiricalValue || 0;
+            levels.forEach((item, index) => {
+                if (empiricalValue >= item.start) {
+                    level = {
+                        ...item,
+                        per: 0
+                    };
+                    if (index < levels.length - 1) {
+                        level.per =
+                            ((empiricalValue - item.start) / (levels[index + 1].start - item.start)).toFixed(2) * 100;
+                    }
+                }
+            });
+            return level;
+        }
+    },
+    methods: {
+        getCurrent() {
+            this.$http.get('/rice/current').then(res => {
+                this.info = res.data;
+            });
+        },
+        showTask() {
+            this.$refs.task.init();
+        },
+        showRank() {
+            this.$refs.rank.init();
+        },
+        send() {
+            console.log('72772');
+            document.getElementById('game').contentWindow.postMessage({ message: { type: 'water' } }, '*');
+        },
+        changeNickname() {
+            this.$http.post('/rice/updateNickName', {
+                userId: this.userInfo.id,
+                nickname: '鲨鱼'
+            });
+        },
+        water() {
+            this.$http.get('/rice/watering');
+        }
+    },
+    components: {
+        RiceTask,
+        RiceRank
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.game {
+    width: calc(100vw - 24px);
+    height: calc(100vw - 24px);
+    margin: 0 auto;
+    border-radius: 8px;
+    border: 2px solid #ffffff;
+    display: block;
+}
+
+.page {
+    min-height: var(--app-height) !important;
+    background: linear-gradient(181deg, #7dbdff 0%, #7ebdff 54%, #61c65e 61%, #61c65d 100%);
+    // .flex-col();
+    // justify-content: center;
+    // align-items: center;
+}
+
+.nav-header {
+    padding: 16px 0 10px;
+    .flex();
+    justify-content: center;
+    // position: fixed;
+    // top: 0;
+    z-index: 20;
+    .title {
+        font-size: 26px;
+        font-family: YouSheBiaoTiYuan;
+        font-weight: lighter;
+        color: #ffffff;
+        line-height: 34px;
+        text-align: center;
+    }
+}
+
+.user {
+    margin: 0 23px;
+    position: relative;
+    img {
+        display: block;
+        width: 100%;
+    }
+
+    .user-box {
+        position: absolute;
+        left: 24px;
+        top: 14px;
+        bottom: 14px;
+        right: 20px;
+        .flex();
+        .van-image {
+            border: 2px solid #804810;
+            flex-shrink: 0;
+        }
+
+        .user-info {
+            flex-grow: 1;
+            margin-left: 16px;
+            .text1 {
+                .flex();
+                font-size: 16px;
+                font-family: AlibabaPuHuiTi;
+                font-weight: bold;
+                color: #804810;
+                line-height: 22px;
+                img {
+                    width: 18px;
+                    height: 18px;
+                    margin-left: 5px;
+                }
+            }
+
+            .text2 {
+                font-size: 11px;
+                font-family: AlibabaPuHuiTi;
+                font-weight: bold;
+                color: #804810;
+                line-height: 16px;
+            }
+        }
+
+        .user-progress {
+            .flex();
+            background: #b2681f;
+            border-radius: 8px;
+            padding: 3px 6px;
+            span {
+                font-size: 12px;
+                font-family: AlibabaPuHuiTi;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 17px;
+            }
+            /deep/ .van-progress {
+                width: 52px;
+                --van-progress-pivot-font-size: 8px;
+                --van-progress-pivot-line-height: 23px;
+                margin-left: 2px;
+                .van-progress__portion {
+                    height: calc(100% - 2px);
+                    top: 1px;
+                    left: 1px;
+                }
+                .van-progress__pivot {
+                    font-family: AlibabaPuHuiTi;
+                }
+            }
+        }
+    }
+}
+
+.toolbar {
+    .flex();
+    justify-content: space-between;
+    padding: 15px 12px;
+
+    .toolbar-item {
+        .flex();
+        background: rgba(255, 255, 255, 0.4);
+        border-radius: 12px;
+        backdrop-filter: blur(2px);
+        padding: 2px 4px;
+        img {
+            display: block;
+            width: auto;
+            height: 30px;
+        }
+    }
+}
+
+.task {
+    position: relative;
+    margin: 18px auto;
+    width: 52px;
+    img {
+        width: 52px;
+        height: auto;
+        display: block;
+    }
+
+    /deep/.van-badge {
+        --van-badge-font-size: 10px;
+        --van-border-radius-max: 7px 7px 7px 0px;
+        line-height: 14px;
+    }
+}
+
+/deep/.progress {
+    margin: 16px 80px;
+    .van-progress {
+        --van-progress-color: linear-gradient(180deg, #96eeff 0%, #4cd3ff 100%);
+        --van-progress-height: 12px;
+        --van-progress-background-color: #136232;
+        .van-progress__pivot {
+            display: none;
+        }
+    }
+
+    .progress-text {
+        font-size: 12px;
+        font-family: AlibabaPuHuiTi;
+        color: #214f37;
+        line-height: 17px;
+        text-align: center;
+        margin-top: 6px;
+    }
+}
+</style>

src/views/user/Rice.vue

@@ -3,43 +3,6 @@
         <div class="nav-header">
             <span class="title">绿洲水稻</span>
         </div>
-        <div class="user">
-            <img src="@assets/png-biaoti.png" alt="" />
-            <div class="user-box">
-                <van-image
-                    radius="100"
-                    width="40"
-                    height="40"
-                    :src="showUser.avatar ? showUser.avatar : require('@assets/img_default_photo.png')"
-                    fit="cover"
-                />
-                <div class="user-info">
-                    <div class="text1">
-                        <span>{{ showUser.nickname }}</span>
-                        <img src="@assets/icon_bianji.png" alt="" />
-                    </div>
-                    <div class="text2">积分 20</div>
-                </div>
-                <div class="user-progress">
-                    <span>Lv.1</span>
-                    <van-progress
-                        :percentage="50"
-                        color="#EFBA74"
-                        pivot-color="transparent"
-                        text-color="#B2681F"
-                        stroke-width="10"
-                    />
-                </div>
-            </div>
-        </div>
-        <div class="toolbar">
-            <div class="toolbar-item rank">
-                <img src="@assets/icon_paihang.png" alt="" />
-            </div>
-            <div class="toolbar-item rule">
-                <img src="@assets/icon_shuoming.png" alt="" />
-            </div>
-        </div>
         <iframe
             class="game"
             ref="game"
@@ -47,69 +10,113 @@
             frameborder="0"
             id="game"
         ></iframe>
-        <div class="progress">
-            <van-progress :percentage="50" stroke-width="12" />
-            <div class="progress-text">今日已浇灌2次，再浇10次即可升级</div>
-        </div>
 
-        <div class="task">
-            <van-badge content="可领取" :offset="[3, 6]">
-                <img src="@assets/png-lingshuidi.png" @click="showTask" alt="" />
-            </van-badge>
-        </div>
-
-        <rice-task @send="send" ref="task"></rice-task>
-        <rice-rank ref="rank"></rice-rank>
+        <rice-task @send="send" @share="share" ref="task"></rice-task>
+        <rice-share ref="share"></rice-share>
     </div>
 </template>
 
 <script>
 import RiceTask from '../../components/rice/Task.vue';
-import RiceRank from '../../components/rice/Rank.vue';
+import RiceShare from '../../components/rice/Share.vue';
 import { mapState } from 'vuex';
+import { throwStatement } from '@babel/types';
 export default {
     mounted() {
         this.$nextTick(() => {
             console.log(this.$refs.game);
-            window.addEventListener('message', function (event) {
+            window.addEventListener('message', event => {
                 console.log(event);
+                if (event.data.message.type === 'task') {
+                    this.showTask();
+                }
+                this.changeNickname();
             });
         });
         this.$http.get('/MonkeyText/test');
+        this.getCurrent();
+        this.$http.get('/sysConfig/get/rice_level').then(res => {
+            this.levels = JSON.parse(res.value);
+        });
+        this.$http.get('/rice/scoreRanking');
+        this.$http.get('/rice/showLevel');
+    },
+    data() {
+        return {
+            info: {},
+            levels: []
+        };
     },
     computed: {
         ...mapState(['userInfo']),
         showUser() {
             return this.isLogin
-                ? this.userInfo
+                ? this.info
                 : {
                       nickname: '小猴子'
                   };
+        },
+        level() {
+            let levels = [...this.levels];
+            let level = {};
+            let empiricalValue = this.info.empiricalValue || 0;
+            levels.forEach((item, index) => {
+                if (empiricalValue >= item.start) {
+                    level = {
+                        ...item,
+                        per: 0
+                    };
+                    if (index < levels.length - 1) {
+                        level.per =
+                            ((empiricalValue - item.start) / (levels[index + 1].start - item.start)).toFixed(2) * 100;
+                    }
+                }
+            });
+            return level;
         }
     },
     methods: {
+        getCurrent() {
+            this.$http.get('/rice/current').then(res => {
+                this.info = res.data;
+            });
+        },
         showTask() {
             this.$refs.task.init();
         },
+        showRank() {
+            this.$refs.rank.init();
+        },
+        share() {
+            this.$refs.share.init();
+        },
         send() {
-            document.getElementById('game').contentWindow.postMessage({ message: { type: 'water_Times' } }, '*');
+            document.getElementById('game').contentWindow.postMessage({ message: { type: 'water' } }, '*');
+        },
+        changeNickname() {
+            this.$http.post('/rice/updateNickName', {
+                userId: this.userInfo.id,
+                nickname: '小鲨鱼'
+            });
+        },
+        water() {
+            this.$http.get('/rice/watering');
         }
     },
     components: {
         RiceTask,
-        RiceRank
+        RiceShare
     }
 };
 </script>
 
 <style lang="less" scoped>
 .game {
-    width: calc(100vw - 24px);
-    height: calc(100vw - 24px);
+    width: 100vw;
+    height: calc(var(--app-height) - 56px);
     margin: 0 auto;
-    border-radius: 8px;
-    border: 2px solid #ffffff;
     display: block;
+    overflow: hidden;
 }
 
 .page {
@@ -136,137 +143,4 @@ export default {
         text-align: center;
     }
 }
-
-.user {
-    margin: 0 23px;
-    position: relative;
-    img {
-        display: block;
-        width: 100%;
-    }
-
-    .user-box {
-        position: absolute;
-        left: 24px;
-        top: 14px;
-        bottom: 14px;
-        right: 20px;
-        .flex();
-        .van-image {
-            border: 2px solid #804810;
-            flex-shrink: 0;
-        }
-
-        .user-info {
-            flex-grow: 1;
-            margin-left: 16px;
-            .text1 {
-                .flex();
-                font-size: 16px;
-                font-family: AlibabaPuHuiTi;
-                font-weight: bold;
-                color: #804810;
-                line-height: 22px;
-                img {
-                    width: 18px;
-                    height: 18px;
-                    margin-left: 5px;
-                }
-            }
-
-            .text2 {
-                font-size: 11px;
-                font-family: AlibabaPuHuiTi;
-                font-weight: bold;
-                color: #804810;
-                line-height: 16px;
-            }
-        }
-
-        .user-progress {
-            .flex();
-            background: #b2681f;
-            border-radius: 8px;
-            padding: 3px 6px;
-            span {
-                font-size: 12px;
-                font-family: AlibabaPuHuiTi;
-                font-weight: bold;
-                color: #ffffff;
-                line-height: 17px;
-            }
-            /deep/ .van-progress {
-                width: 52px;
-                --van-progress-pivot-font-size: 8px;
-                --van-progress-pivot-line-height: 23px;
-                margin-left: 2px;
-                .van-progress__portion {
-                    height: calc(100% - 2px);
-                    top: 1px;
-                    left: 1px;
-                }
-                .van-progress__pivot {
-                    font-family: AlibabaPuHuiTi;
-                }
-            }
-        }
-    }
-}
-
-.toolbar {
-    .flex();
-    justify-content: space-between;
-    padding: 15px 12px;
-
-    .toolbar-item {
-        .flex();
-        background: rgba(255, 255, 255, 0.4);
-        border-radius: 12px;
-        backdrop-filter: blur(2px);
-        padding: 2px 4px;
-        img {
-            display: block;
-            width: auto;
-            height: 30px;
-        }
-    }
-}
-
-.task {
-    position: relative;
-    margin: 18px auto;
-    width: 52px;
-    img {
-        width: 52px;
-        height: auto;
-        display: block;
-    }
-
-    /deep/.van-badge {
-        --van-badge-font-size: 10px;
-        --van-border-radius-max: 7px 7px 7px 0px;
-        line-height: 14px;
-    }
-}
-
-/deep/.progress {
-    margin: 16px 80px;
-    .van-progress {
-        --van-progress-color: linear-gradient(180deg, #96eeff 0%, #4cd3ff 100%);
-        --van-progress-height: 12px;
-        --van-progress-background-color: #136232;
-        .van-progress__pivot {
-            display: none;
-        }
-    }
-
-    .progress-text {
-        font-size: 12px;
-        font-family: AlibabaPuHuiTi;
-        color: #214f37;
-        line-height: 17px;
-        text-align: center;
-        margin-top: 6px;
-    }
-}
 </style>