Merge branch 'dev' of http://git.izouma.com/xiongzhu/raex_front into dev

src/components/rice/Rank.vue

@@ -0,0 +1,102 @@
+<template>
+    <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="" />
+
+            <div class="page-content" @click.stop="">
+                <div class="page-box">
+                    <div class="rank-top">
+                        <span>排行</span>
+                        <span>用户信息</span>
+                        <span>等级</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineExpose } from 'vue';
+
+const emit = defineEmits(['send']);
+const show = ref(false);
+
+function send() {
+    emit('send');
+}
+
+function init() {
+    show.value = true;
+}
+defineExpose({ init });
+</script>
+
+<style lang="less" scoped>
+.topImg {
+    position: absolute;
+    width: 300px;
+    top: -160px;
+    left: 50%;
+    margin-left: -150px;
+    z-index: 0;
+}
+
+.topBanner {
+    position: absolute;
+    width: 256px;
+    top: -12px;
+    left: 50%;
+    margin-left: -123px;
+    z-index: 2;
+}
+.wrapper {
+    position: fixed;
+    z-index: 19;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+.page {
+    position: fixed;
+    z-index: 20;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 54px 10px 0;
+    box-sizing: border-box;
+
+    &::after {
+        content: '';
+        background: linear-gradient(180deg, #3ab200 0%, #49c52f 100%);
+        box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.7);
+        border-radius: 16px 16px 0px 0px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 1;
+    }
+
+    .page-content {
+        background: linear-gradient(180deg, #fff9e1 0%, #ffffff 100%);
+        border-radius: 16px 16px 0px 0px;
+        padding: 6px 6px 0;
+        z-index: 3;
+        position: relative;
+
+        .page-box {
+            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(254, 204, 70, 0.3);
+            border-bottom-width: 0;
+        }
+    }
+}
+</style>

src/components/rice/Task.vue

@@ -0,0 +1,178 @@
+<template>
+    <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="" />
+
+            <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="text2">每天签到可免费领取1滴水滴</div>
+                        </div>
+                        <van-button type="primary" round @click="send">邀请</van-button>
+                    </div>
+                    <div class="box-item">
+                        <img src="@assets/icon_yaoqing.png" alt="" />
+                        <div class="box-info">
+                            <div class="text1">邀请互动(0/1)</div>
+
+                            <div class="text2">邀请好友完成互动后领1滴水滴</div>
+                        </div>
+                        <van-button type="primary" round>邀请</van-button>
+                    </div>
+                    <div class="box-item">
+                        <img src="@assets/icon_jifen.png" alt="" />
+                        <div class="box-info">
+                            <div class="text1">积分兑换(0/10)</div>
+
+                            <div class="text2">
+                                每天寄售商品购买成功次数 ≤4 次获得1积分，4次以上获得2积分(2积分可兑换1滴水)
+                            </div>
+                        </div>
+                        <van-button type="primary" round>兑换</van-button>
+                    </div>
+                    <div class="box-item">
+                        <img src="@assets/icon_huodong.png" alt="" />
+                        <div class="box-info">
+                            <div class="text1">活动积分兑换</div>
+
+                            <div class="text2">参与活动可兑换1滴水滴，无上限</div>
+                        </div>
+                        <van-button type="primary" round>兑换</van-button>
+                    </div>
+                    <div class="box-item">
+                        <img src="@assets/icon_zhiya.png" alt="" />
+                        <div class="box-info">
+                            <div class="text1">数字产品质押</div>
+
+                            <div class="text2">特定产品质押兑换成水滴，兑换当天不可寄售</div>
+                        </div>
+                        <van-button type="primary" round>去看看</van-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineExpose } from 'vue';
+
+const emit = defineEmits(['send']);
+const show = ref(false);
+
+function send() {
+    emit('send');
+}
+
+function init() {
+    show.value = true;
+}
+defineExpose({ init });
+</script>
+
+<style lang="less" scoped>
+.topImg {
+    position: absolute;
+    width: 300px;
+    top: -160px;
+    left: 50%;
+    margin-left: -150px;
+    z-index: 0;
+}
+
+.topBanner {
+    position: absolute;
+    width: 256px;
+    top: -12px;
+    left: 50%;
+    margin-left: -123px;
+    z-index: 2;
+}
+.wrapper {
+    position: fixed;
+    z-index: 19;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+.page {
+    position: fixed;
+    z-index: 20;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 54px 10px 0;
+    box-sizing: border-box;
+
+    &::after {
+        content: '';
+        background: linear-gradient(180deg, #3ab200 0%, #49c52f 100%);
+        box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.7);
+        border-radius: 16px 16px 0px 0px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 1;
+    }
+
+    .page-content {
+        background: linear-gradient(180deg, #f2ffd7 0%, #fcfff6 100%);
+        border-radius: 16px 16px 0px 0px;
+        padding: 6px 6px 0;
+        z-index: 3;
+        position: relative;
+
+        .page-box {
+            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-bottom-width: 0;
+        }
+    }
+}
+
+.box-item {
+    .flex();
+    padding: 12px 12px 12px 10px;
+    align-items: flex-start;
+    img {
+        width: 46px;
+        height: 46px;
+        display: block;
+        flex-shrink: 0;
+    }
+    .box-info {
+        flex-grow: 1;
+        padding: 3px 17px 0 10px;
+        .text1 {
+            font-size: 14px;
+            font-family: AlibabaPuHuiTi;
+            color: #000000;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 12px;
+            font-family: AlibabaPuHuiTi;
+            color: rgba(0, 0, 0, 0.4);
+            line-height: 17px;
+        }
+    }
+
+    .van-button {
+        width: 74px;
+        height: 32px;
+        margin-top: 7px;
+        flex-shrink: 0;
+    }
+}
+</style>

src/styles/font.less

@@ -6,6 +6,11 @@
     font-family: 'Yuanyuming';
     src: url(https://cdn.raex.vip/application/2023-02-28-17-56-21yUrAmENX.otf);
 }
+@font-face {
+    font-family: 'YouSheBiaoTiYuan';
+    src: url(https://cdn.raex.vip/font/2023-03-07-14-14-07bYfIIAEP.otf);
+}
+
 @font-face {
     font-family: 'OSP';
     src: url(https://cdn.raex.vip/font/OSP-DIN.ttf);
@@ -19,6 +24,10 @@
     font-family: 'SourceHanSans-Medium';
     src: url(https://cdn.raex.vip/font/SourceHanSans-Medium.otf);
 }
+@font-face {
+    font-family: 'AlibabaPuHuiTi';
+    src: url(https://cdn.raex.vip/font/2023-03-07-14-51-35DDenbsJb.ttf);
+}
 
 .font_family {
     font-family: 'font_family' !important;
@@ -28,8 +37,8 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-.font_family-icon-shaixuan1:before{
-    content: "\e773";
+.font_family-icon-shaixuan1:before {
+    content: '\e773';
     font-size: 18px;
 }
 

src/views/user/Rice.vue

@@ -1,5 +1,45 @@
 <template>
-    <div>
+    <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="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"
@@ -7,31 +47,226 @@
             frameborder="0"
             id="game"
         ></iframe>
-        <van-button type="primary" @click="send">发消息</van-button>
+        <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';
 export default {
     mounted() {
         this.$nextTick(() => {
             console.log(this.$refs.game);
-            document.getElementById('game').addEventListener('message', function (event) {
+            window.addEventListener('message', function (event) {
                 console.log(event);
             });
         });
+        this.$http.get('/MonkeyText/test');
+    },
+    computed: {
+        ...mapState(['userInfo']),
+        showUser() {
+            return this.isLogin
+                ? this.userInfo
+                : {
+                      nickname: '小猴子'
+                  };
+        }
     },
     methods: {
+        showTask() {
+            this.$refs.task.init();
+        },
         send() {
-            document.getElementById('game').contentWindow.postMessage({ message: 'hel1o from parent' }, '*');
+            document.getElementById('game').contentWindow.postMessage({ message: { type: 'water_Times' } }, '*');
         }
+    },
+    components: {
+        RiceTask,
+        RiceRank
     }
 };
 </script>
 
 <style lang="less" scoped>
 .game {
-    width: 100vw;
-    height: 130vw;
+    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>