@jx3box/jx3box-ui 0.0.1

package/src/header/shop.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="c-header-panel c-header-shop">
+        <el-tooltip
+            effect="dark"
+            :content="$jx3boxT('jx3boxUi.header.mallPoints', '积分商城')"
+            placement="bottom"
+            popper-class="c-header-tooltip"
+        >
+            <a class="u-present" href="/vip/mall">
+                <i class="u-icon u-icon-msg">
+                    <i class="u-pop" style="display: none" v-show="pop"></i>
+                    <!-- <shopIcon class="u-icon" /> -->
+                    <img
+                        class="u-icon"
+                        svg-inline
+                        src="../../assets/img/common/gift.svg"
+                        :alt="$jx3boxT('jx3boxUi.header.mallPoints', '积分商城')"
+                    />
+                </i>
+            </a>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import { getConfig, getUserMeta, setUserMeta } from "../../service/cms";
+import User from "@jx3box/jx3box-common/js/user";
+import i18nMixin from "../../i18n/mixin";
+// import shopIcon from "@/assets/img/components/common/header/gift.svg";
+export default {
+    name: "shop",
+    mixins: [i18nMixin],
+    components: {
+        // shopIcon,
+    },
+    data: function () {
+        return {
+            pop: false,
+        };
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        async init() {
+            /**
+             * 1. 用户第一次进入页面时，没有记录，则显示，并记录到meta
+             * 2. 用户第二次进入页面，此时meta有记录，但是用户并未进入会员中心，则显示
+             *
+             * meta如果为null，说明用户未登录，不显示
+             * meta如果为0，说明用户已经看过，不显示，同时比较config的值，如果config的值大于local，更新local为config的值和meta为1
+             * meta如果为1，说明用户未看过，显示
+             */
+            let meta = null;
+            if (User.isLogin()) {
+                meta = await getUserMeta({ key: "mall_pop" });
+            }
+            let config = await getConfig({ key: "mall" });
+
+            if (meta == null) {
+                const val = ~~config.val;
+
+                if (val) {
+                    this.pop = true;
+                    localStorage.setItem("mall_pop", config.val);
+                    setUserMeta("mall_pop", { val: 1 });
+                }
+            } else {
+                if (meta == 1) {
+                    this.pop = true;
+
+                    localStorage.setItem("mall_pop", config.val);
+                } else {
+                    const local = localStorage.getItem("mall_pop");
+
+                    if (~~config.val > ~~local) {
+                        this.pop = true;
+
+                        localStorage.setItem("mall_pop", config.val);
+
+                        // setUserMeta("mall_pop", { val: 1 });
+                    }
+                }
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-header-shop {
+    .u-present {
+        padding: 0 10px;
+        height: 100%;
+        .flex;
+        align-items: center;
+        &:hover {
+            .tm(0.7);
+        }
+    }
+
+    .u-icon-msg {
+        .pr;
+        .size(18px);
+    }
+
+    .u-pop {
+        width: 10px;
+        height: 10px;
+        color: #fff;
+        background-image: linear-gradient(#fcd14f, #d7a20b);
+        background-clip: padding-box;
+        border: 2px solid #24292e;
+        border-radius: 50%;
+        position: absolute;
+        right: -5px;
+        top: -6px;
+        z-index: 1;
+    }
+}
+</style>

package/src/header/user.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="c-header-user" id="c-header-user">
+        <template v-if="isLogin">
+            <!-- 消息中心 -->
+            <message />
+
+            <!-- 创作中心 -->
+            <publish />
+
+            <!-- vip -->
+            <vip />
+
+            <!-- 商城 -->
+            <shop />
+
+            <!-- 我的资产 -->
+            <asset :asset="asset" />
+
+            <!-- manage -->
+            <manage :isTeammate="isTeammate" />
+
+            <!-- 语言切换 -->
+            <lang />
+
+            <!-- user info -->
+            <user-info :asset="asset" @logout="logout" @update="update" />
+        </template>
+        <template v-else>
+            <!-- 语言切换 -->
+            <lang />
+
+            <a class="c-header-console" :href="login_url">{{
+                $jx3boxT("jx3boxUi.header.loginRegister", "登录/注册")
+            }}</a>
+
+            <!-- <div class="c-header-login">
+                <a class="u-register u-default" :href="register_url">注册</a>
+                <em>|</em>
+                <a class="u-login u-default" :href="login_url">登录</a>
+            </div> -->
+        </template>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import { userSignIn } from "../../service/author";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import dayjs from "dayjs";
+import isToday from "dayjs/plugin/isToday";
+dayjs.extend(isToday);
+import i18nMixin from "../../i18n/mixin";
+
+import message from "./message.vue";
+import publish from "./publish.vue";
+import vip from "./vip.vue";
+import shop from "./shop.vue";
+import asset from "./asset.vue";
+import manage from "./manage.vue";
+import lang from "./lang.vue";
+import userInfo from "./userInfo.vue";
+
+export default {
+    mixins: [i18nMixin],
+    props: {
+        asset: {
+            type: Object,
+            default: () => {
+                return {
+                    expire_date: "2022-03-07T00:00:00+08:00",
+                    total_day: 395,
+                    was_vip: 0,
+
+                    pro_expire_date: "2022-03-07T00:00:00+08:00",
+                    pro_total_day: 366,
+                    was_pro: 0,
+                };
+            },
+        },
+    },
+    components: {
+        message,
+        publish,
+        vip,
+        shop,
+        asset,
+        manage,
+        lang,
+        userInfo,
+    },
+    data: function () {
+        return {
+            // 是否折叠
+            // 登录信息
+            user: User.getInfo(),
+            isLogin: User.isLogin(),
+
+            // 链接
+            login_url: JX3BOX.__Links.account.login + "?redirect=" + location.href,
+            register_url: JX3BOX.__Links.account.register + "?redirect=" + location.href,
+
+            isTeammate: false,
+        };
+    },
+    methods: {
+        // 签到
+        signIn: function () {
+            try {
+                let user_last_login = localStorage.getItem("user_last_login");
+                user_last_login = (user_last_login && JSON.parse(user_last_login)) || "";
+
+                if (user_last_login && dayjs(user_last_login).isToday()) {
+                    // console.log("已签到");
+                } else {
+                    // 延迟2秒执行 feedback#501
+                    const signTimer = setTimeout(() => {
+                        userSignIn()
+                            .then(() => {
+                                let msg = this.$message({
+                                    type: "success",
+                                    message: this.$jx3boxT("jx3boxUi.header.signInSuccess", "签到成功"),
+                                    customClass: "c-header-signin",
+                                    duration: 0,
+                                });
+                                // 模拟手动关闭
+                                setTimeout(() => {
+                                    msg.close();
+                                }, 3000);
+                                localStorage.setItem("user_last_login", JSON.stringify(dayjs()));
+                            })
+                            .catch(() => {
+                                localStorage.setItem("user_last_login", JSON.stringify(dayjs()));
+                            })
+                            .finally(() => {
+                                clearTimeout(signTimer);
+                            });
+                    }, 2000);
+                }
+            } catch (e) {
+                console.log(e);
+            }
+        },
+        // 初始化
+        init: function () {
+            if (this.isLogin) {
+                this.signIn();
+            }
+        },
+
+        // 退出登录
+        logout: function () {
+            this.isLogin = false;
+        },
+        // 更新用户信息
+        update: function ({ is_teammate }) {
+            this.isTeammate = is_teammate;
+        },
+    },
+    created: function () {
+        this.init();
+    },
+};
+</script>
+
+<style lang="less">
+.c-header-console {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 0.15s;
+    color: #fff;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 16px;
+    border-radius: 9999px;
+    text-decoration: none;
+    padding: 10px 20px;
+    background-color: @v4primary;
+    &:hover {
+        background-color: @v4yellow;
+    }
+}
+//登录、注册
+.c-header-login {
+    margin: 16px 5px 16px 0;
+
+    transition: 0.4s;
+    *zoom: 1;
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+    border: 1px solid @border-hr;
+    border-radius: 3px;
+
+    .u-default,
+    .u-extend {
+        float: left;
+    }
+
+    .u-default {
+        display: block;
+        line-height: @header-logo-size - 2px;
+        padding: 0 8px;
+        color: #fff;
+
+        &:hover {
+            color: hsla(0, 0%, 100%, 0.75);
+        }
+    }
+
+    em {
+        color: #a4acb5;
+        .fl;
+        font-style: normal;
+        .lh(30px);
+    }
+
+    .u-extend {
+        //background-color: hsla(0,0%,100%,.125);
+        background-color: #fafafa;
+        height: @header-logo-size - 2px;
+        padding-left: 5px;
+
+        .c-passport {
+            *zoom: 1;
+            &:after {
+                content: "";
+                display: table;
+                clear: both;
+            }
+            padding: (@header-logo-size - 24px - 2px) / 2 0;
+        }
+
+        a {
+            float: left;
+            display: block;
+            margin-right: 5px;
+        }
+
+        img {
+            vertical-align: middle;
+            width: 24px !important;
+            height: auto;
+        }
+
+        display: none;
+    }
+}
+</style>