@jx3box/jx3box-common-ui 8.2.0 → 8.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jx3box/jx3box-common-ui",
3
- "version": "8.2.0",
3
+ "version": "8.2.1",
4
4
  "description": "JX3BOX UI",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/service/cms.js CHANGED
@@ -58,4 +58,23 @@ function getTopicBucket(params) {
58
58
  return $cms().get(`/api/cms/topic/bucket`, { params });
59
59
  }
60
60
 
61
- export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, checkTeamMember, getHonorJson, getSliders, getCollection, getTopicBucket };
61
+ // 获取config
62
+ function getConfig(params) {
63
+ return $cms().get(`/api/cms/config`, { params }).then((res) => {
64
+ return res.data.data;
65
+ });
66
+ }
67
+
68
+ // 获取用户meta
69
+ function getUserMeta(params) {
70
+ return $cms().get(`/api/cms/user/my/meta`, { params }).then((res) => {
71
+ return res.data.data;
72
+ });
73
+ }
74
+
75
+ // 设置用户meta
76
+ function setUserMeta(key,data) {
77
+ return $cms().post(`/api/cms/user/my/meta?key=${key}`, data);
78
+ }
79
+
80
+ export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, checkTeamMember, getHonorJson, getSliders, getCollection, getTopicBucket, getConfig, getUserMeta, setUserMeta };
@@ -2,12 +2,66 @@
2
2
  <div class="c-header-panel c-header-shop">
3
3
  <el-tooltip effect="dark" content="积分商城" placement="bottom" popper-class="c-header-tooltip">
4
4
  <a class="u-present" href="/vip/mall">
5
- <img class="u-icon" svg-inline src="../../assets/img/header/gift.svg" />
5
+ <i class="u-icon u-icon-msg">
6
+ <i class="u-pop" style="display: none" v-show="pop"></i>
7
+ <img class="u-icon" svg-inline src="../../assets/img/header/gift.svg" />
8
+ </i>
6
9
  </a>
7
10
  </el-tooltip>
8
11
  </div>
9
12
  </template>
10
13
 
14
+ <script>
15
+ import { getConfig, getUserMeta, setUserMeta } from "../../service/cms";
16
+ export default {
17
+ name: "shop",
18
+ data: function () {
19
+ return {
20
+ pop: false,
21
+ };
22
+ },
23
+ mounted() {
24
+ this.init();
25
+ },
26
+ methods: {
27
+ async init() {
28
+ /**
29
+ * 1. 用户第一次进入页面时,没有记录,则显示,并记录到meta
30
+ * 2. 用户第二次进入页面,此时meta有记录,但是用户并未进入会员中心,则显示
31
+ */
32
+ let meta = await getUserMeta({ key: "mall_pop" });
33
+ let config = await getConfig({ key: "mall" });
34
+
35
+ if (meta == null) {
36
+ const val = ~~config.val;
37
+
38
+ if (val) {
39
+ this.pop = true;
40
+ localStorage.setItem('mall_pop', config.val);
41
+ setUserMeta("mall_pop", { val: 1 });
42
+ }
43
+ } else {
44
+ if (meta == 1) {
45
+ this.pop = true;
46
+
47
+ localStorage.setItem('mall_pop', config.val);
48
+ } else {
49
+ const local = localStorage.getItem('mall_pop');
50
+
51
+ if (~~config.val > ~~local) {
52
+ this.pop = true;
53
+
54
+ localStorage.setItem('mall_pop', config.val);
55
+
56
+ setUserMeta("mall_pop", { val: 1 });
57
+ }
58
+ }
59
+ }
60
+ },
61
+ },
62
+ }
63
+ </script>
64
+
11
65
  <style lang="less">
12
66
  .c-header-shop {
13
67
  .u-present {
@@ -19,6 +73,34 @@
19
73
  .tm(0.7);
20
74
  }
21
75
  }
76
+
77
+ .u-icon-msg {
78
+ width: 17px;
79
+ height: 17px;
80
+ display: block;
81
+ .pr;
82
+ top: 1px;
83
+ svg {
84
+ width: 100%;
85
+ height: 100%;
86
+ }
87
+ .pr;
88
+ }
89
+
90
+ .u-pop {
91
+ width: 10px;
92
+ height: 10px;
93
+ color: #fff;
94
+ background-image: linear-gradient(#54a3ff, #006eed);
95
+ background-clip: padding-box;
96
+ border: 2px solid #24292e;
97
+ border-radius: 50%;
98
+ position: absolute;
99
+ right: -5px;
100
+ top: -6px;
101
+ z-index: 1;
102
+ }
103
+
22
104
  .u-icon {
23
105
  color: #fff;
24
106
  .size(16px);
@@ -2,20 +2,107 @@
2
2
  <div class="c-header-panel c-header-vip" id="c-header-vip">
3
3
  <el-tooltip effect="dark" content="会员中心" placement="bottom" popper-class="c-header-tooltip">
4
4
  <a class="u-post u-vip" href="/vip/premium">
5
- <img class="u-add" svg-inline src="../../assets/img/header/vip.svg" />
5
+ <i class="u-icon u-icon-msg">
6
+ <i class="u-pop" style="display: none" v-show="pop"></i>
7
+ <img class="u-add" svg-inline src="../../assets/img/header/vip.svg" />
8
+ </i>
6
9
  </a>
7
10
  </el-tooltip>
8
11
  </div>
9
12
  </template>
10
13
 
14
+ <script>
15
+ import { getConfig, getUserMeta, setUserMeta } from "../../service/cms";
16
+ export default {
17
+ name: "vip",
18
+ data: function () {
19
+ return {
20
+ pop: false
21
+ };
22
+ },
23
+ mounted() {
24
+ this.init();
25
+ },
26
+ methods: {
27
+ async init() {
28
+ /**
29
+ * 1. 用户第一次进入页面时,没有记录,则显示,并记录到meta
30
+ * 2. 用户第二次进入页面,此时meta有记录,但是用户并未进入会员中心,则显示
31
+ */
32
+ let meta = await getUserMeta({ key: 'vip_pop' });
33
+ let config = await getConfig({ key: "vip" });
34
+
35
+
36
+ if (meta == null) {
37
+ const val = ~~config.val;
38
+
39
+ if (val) {
40
+ this.pop = true;
41
+ localStorage.setItem('vip_pop', config.val);
42
+ setUserMeta("vip_pop", { val: 1 });
43
+ }
44
+ } else {
45
+ if (meta == 1) {
46
+ this.pop = true;
47
+
48
+ localStorage.setItem('vip_pop', config.val);
49
+ } else {
50
+ const local = localStorage.getItem('vip_pop');
51
+
52
+ if (~~config.val > ~~local) {
53
+ this.pop = true;
54
+
55
+ localStorage.setItem('vip_pop', config.val);
56
+
57
+ setUserMeta("vip_pop", { val: 1 });
58
+ }
59
+ }
60
+ }
61
+ }
62
+ }
63
+ }
64
+ </script>
65
+
11
66
  <style lang="less" scoped>
12
67
  .c-header-vip {
13
68
  height: 100%;
69
+
70
+ .u-icon-msg {
71
+ width: 17px;
72
+ height: 17px;
73
+ display: block;
74
+ .pr;
75
+ top: 1px;
76
+ svg {
77
+ width: 100%;
78
+ height: 100%;
79
+ }
80
+ .pr;
81
+ }
82
+
83
+ .u-pop {
84
+ width: 10px;
85
+ height: 10px;
86
+ color: #fff;
87
+ background-image: linear-gradient(#54a3ff, #006eed);
88
+ background-clip: padding-box;
89
+ border: 2px solid #24292e;
90
+ border-radius: 50%;
91
+ position: absolute;
92
+ right: -5px;
93
+ top: -6px;
94
+ z-index: 1;
95
+ }
14
96
  .u-vip {
15
97
  padding: 0 10px;
16
98
  height: 100%;
17
99
  .flex;
18
100
  align-items: center;
101
+
102
+ &:hover {
103
+ opacity: 0.7;
104
+ }
105
+ cursor: pointer;
19
106
  }
20
107
  }
21
108
  </style>