Skip to content

dev / lilejia-f2mb-pro

Go to a project
Toggle navigation
Toggle navigation pinning
7c65a283 by joe
Options

临时保存

1 parent 4d9925d8
Inline Side-by-side
Showing 33 changed files with 1358 additions and 29 deletions
...@@ -135,4 +135,11 @@ body { ...@@ -135,4 +135,11 @@ body {
135 color: #e8e8e8; 135 color: #e8e8e8;
136 } 136 }
137 } 137 }
138
139
140 .home {
141 position: relative;
142 text-align: center;
143 background-color: #74cb35;
144 }
138 </style> 145 </style>
......
1 <template> 1 <template>
2 <van-popup v-model="data.show"> 2 <van-popup v-model="data.show">
3 <div class="model"> 3 <div class="model" v-if="data.index == 'default'">
4 <div class="model-close" @click="modelCloseHandler"></div> 4 <div class="model-close" @click="modelCloseHandler"></div>
5 <div class="model-content"> 5 <div class="model-content">
6 <div class="model-head-line"></div> 6 <div class="model-head-line"></div>
7 <div class="model-title">{{data.title}}</div> 7 <div class="model-title">{{data.title}}</div>
8 8
9 <div class="successModel" v-if="data.index == 'default'"> 9 <div class="successModel">
10 <div class="model-data">{{data.content}}</div> 10 <div class="model-data">{{data.content}}</div>
11 <div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div> 11 <div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div>
12 <div 12 <div
...@@ -18,6 +18,47 @@ ...@@ -18,6 +18,47 @@
18 </div> 18 </div>
19 </div> 19 </div>
20 </div> 20 </div>
21
22 <div class="model rule-model" v-if="data.index == 'rule'">
23 <div class="model-close" @click="modelCloseHandler"></div>
24 <!-- 规则-->
25 <div class="model-content">
26 <div class="model-head-line"></div>
27 <div class="model-title">{{data.title}}</div>
28
29 <div class="rule-container">
30 <div class="rule-line">
31 <div>1.</div>
32 <div>每位微信用户每天可投一票；</div>
33 </div>
34 <div class="rule-line">
35 <div>2.</div>
36 <div>投票后可以获得一次抽奖机会；</div>
37 </div>
38 <div class="rule-line">
39 <div>3.</div>
40 <div>严禁恶意刷人气，一经发现将立即取消选手人气评选资格；</div>
41 </div>
42 <div class="rule-line">
43 <div>4.</div>
44 <div>本组委会保留最终解释权；</div>
45 </div>
46 <div class="rule-line">
47 <div>5.</div>
48 <div>报名截止时间9月19日23：59，投票截止时间9月20日23：59，最终入围名单将在9月21在嘉佳卡通卫视官方微信号公布</div>
49 </div>
50 <div class="rule-line">
51 <div>6.</div>
52 <div>因不可抗因素造成网络人气评选被动停止的，以网络人气评选停止时间的人气值为准。</div>
53 </div>
54 </div>
55
56 <div class="successModel">
57 <div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div>
58 <div class="model-bottom-line"></div>
59 </div>
60 </div>
61 </div>
21 </van-popup> 62 </van-popup>
22 </template> 63 </template>
23 64
...@@ -71,7 +112,7 @@ export default { ...@@ -71,7 +112,7 @@ export default {
71 <style lang="less" scoped> 112 <style lang="less" scoped>
72 .van-popup { 113 .van-popup {
73 background-color: transparent; 114 background-color: transparent;
74 top: 40%; 115 top: 45%;
75 } 116 }
76 .model { 117 .model {
77 display: flex; 118 display: flex;
...@@ -130,4 +171,34 @@ export default { ...@@ -130,4 +171,34 @@ export default {
130 font-size: 26px; 171 font-size: 26px;
131 text-align: center; 172 text-align: center;
132 } 173 }
174
175 .rule-model {
176 width: 600px !important;
177
178 .model-content {
179 width: 600px !important;
180 }
181
182 .rule-container {
183 margin: 30px auto;
184 }
185
186 .rule-line {
187 width: 520px;
188 margin: auto;
189 display: flex;
190 align-items: flex-start;
191
192 div {
193 font-size: 24px;
194 color: #303531;
195 text-align: left;
196 line-height: 50px;
197 }
198
199 div:first-child {
200 min-width: 40px;
201 }
202 }
203 }
133 </style> 204 </style>
......
1 <template>
2 <div class="sys-container-panel content">
3 <div class="container-title">{{title}}</div>
4 <div class="head-line"></div>
5 </div>
6 </template>
7
8
9 <script>
10 export default {
11 props: ["value"],
12 data() {
13 return {
14 title: this.value
15 };
16 }
17 };
18 </script>
19
20 <style lang="scss" scoped>
21 .content {
22 margin: 85px auto 60px auto;
23 padding-bottom: 60px;
24 }
25
26 .container-title {
27 font-size: 30px;
28 }
29
30 .head-line {
31 height: 60px;
32 }
33 </style>
34
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="head-container">
3 <div class="head-leap"></div>
4 </div>
5 </template>
6
7
8 <style lang="scss" scoped>
9 .head-container {
10 position: relative;
11 height: 0px;
12 }
13
14 .head-leap {
15 width: 750px;
16 height: 231px;
17 background: url(../../assets/imgs/head-leap.png);
18 background-size: 100%;
19 position: relative;
20 left: 0;
21 top: 0;
22 z-index: 999;
23 }
24 </style>
25
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="home">
3 <head-view></head-view>
4 <div class="sys-container-panel content">
5 <div class="container-title">{{title}}</div>
6 <div class="head-line"></div>
7 <div class="remain-tip">
8 您现在还有
9 <b>1</b>次抽奖机会
10 </div>
11
12 <van-row>
13 <van-col span="8">
14 <div class="card-bg">
15 <div class="card-logo logo-01"></div>
16 </div>
17 </van-col>
18 <van-col span="8">
19 <div class="card-bg">
20 <div class="card-logo logo-02"></div>
21 </div>
22 </van-col>
23 <van-col span="8">
24 <div class="card-bg">
25 <div class="card-logo logo-03"></div>
26 </div>
27 </van-col>
28 <van-col span="8">
29 <div class="card-bg">
30 <div class="card-logo logo-04"></div>
31 </div>
32 </van-col>
33 <van-col span="8">
34 <div class="card-bg">
35 <div class="card-logo logo-05"></div>
36 </div>
37 </van-col>
38 <van-col span="8">
39 <div class="card-bg">
40 <div class="card-logo logo-06"></div>
41 </div>
42 </van-col>
43 <van-col span="8">
44 <div class="card-bg">
45 <div class="card-logo logo-07"></div>
46 </div>
47 </van-col>
48 <van-col span="8">
49 <div class="card-bg">
50 <div class="card-logo logo-08"></div>
51 </div>
52 </van-col>
53 <van-col span="8">
54 <div class="card-bg">
55 <div class="card-logo logo-09"></div>
56 </div>
57 </van-col>
58 </van-row>
59
60 <div class="draw-tip">请选择任意一张翻牌开启奖品</div>
61
62 <div class="btn-view-prize" @click="model.show =true"></div>
63 </div>
64
65 <div class="bottom-line"></div>
66
67 <bottom-tool v-model="activityIndex"></bottom-tool>
68 <biz-model v-model="model"></biz-model>
69 </div>
70 </template>
71
72
73
74 <script>
75 import { httpGet } from "@/api/fetch-api";
76 import BottomTool from "@/components/bottom-tools/bottom-tools";
77 import BizModel from "@/components/biz-model/biz-model";
78 import HeadView from "@/components/plugins/head";
79
80 import Vue from "vue";
81 import { Row, Col } from "vant";
82
83 Vue.use(Row).use(Col);
84
85 export default {
86 name: "home",
87 data() {
88 return {
89 activityIndex: 4,
90 title: "幸运大抽奖",
91 model: {
92 show: false,
93 title: "",
94 content: "",
95 index: "prize",
96 btnShow: false,
97 btnText: "",
98 confirmHandler: null,
99 labelBtnShow: false,
100 labelBtnText: "",
101 labelBtnHandler: null
102 }
103 };
104 },
105 methods: {
106 toSign() {
107 this.$router.push("/sign");
108 }
109 },
110 components: {
111 BottomTool,
112 BizModel,
113 HeadView
114 }
115 };
116 </script>
117
118
119 <style lang="scss" scoped>
120 .content {
121 margin: 85px auto 60px auto;
122 padding-bottom: 60px;
123 }
124
125 .container-title {
126 font-size: 30px;
127 }
128
129 .head-line {
130 height: 60px;
131 }
132
133 .bottom-line {
134 height: 150px;
135 background-color: transparent;
136 }
137
138 .remain-tip {
139 font-size: 30px;
140 font-weight: 600;
141
142 b {
143 color: #f00;
144 font-size: 36px;
145 padding: 0 10px;
146 }
147 }
148
149 .van-row {
150 width: 650px;
151 margin: auto;
152 margin-top: 10px;
153 }
154
155 .card-bg {
156 width: 214px;
157 height: 268px;
158 background: url(../../assets/imgs/draw-card-bg.png);
159 background-size: 100%;
160 display: flex;
161 align-items: center;
162 }
163
164 .card-logo {
165 margin: auto;
166 }
167
168 .logo-01 {
169 width: 111px;
170 height: 18px;
171 background: url(../../assets/imgs/draw-logo-01.png) no-repeat;
172 background-size: 100%;
173 }
174 .logo-02 {
175 width: 65px;
176 height: 32px;
177 background: url(../../assets/imgs/draw-logo-02.png) no-repeat;
178 background-size: 100%;
179 }
180 .logo-03 {
181 width: 62px;
182 height: 51px;
183 background: url(../../assets/imgs/draw-logo-03.png) no-repeat;
184 background-size: 100%;
185 }
186 .logo-04 {
187 width: 70px;
188 height: 30px;
189 background: url(../../assets/imgs/draw-logo-04.png) no-repeat;
190 background-size: 100%;
191 }
192 .logo-05 {
193 width: 89px;
194 height: 35px;
195 background: url(../../assets/imgs/draw-logo-05.png) no-repeat;
196 background-size: 100%;
197 }
198 .logo-06 {
199 width: 73px;
200 height: 74px;
201 background: url(../../assets/imgs/draw-logo-06.png) no-repeat;
202 background-size: 100%;
203 }
204 .logo-07 {
205 width: 66px;
206 height: 59px;
207 background: url(../../assets/imgs/draw-logo-07.png) no-repeat;
208 background-size: 100%;
209 }
210 .logo-08 {
211 width: 81px;
212 height: 46px;
213 background: url(../../assets/imgs/draw-logo-08.png) no-repeat;
214 background-size: 100%;
215 }
216 .logo-09 {
217 width: 109px;
218 height: 27px;
219 background: url(../../assets/imgs/draw-logo-09.png) no-repeat;
220 background-size: 100%;
221 }
222
223 .draw-tip {
224 font-size: 24px;
225 text-align: center;
226 margin: 30px auto 0 auto;
227 color: #06b686;
228 }
229 .btn-view-prize {
230 width: 283px;
231 height: 65px;
232 background: url(../../assets/imgs/draw-btn-viewprize.png) no-repeat;
233 background-size: 100%;
234 margin: 30px auto 0 auto;
235 }
236 </style>
......
...@@ -22,9 +22,9 @@ export default { ...@@ -22,9 +22,9 @@ export default {
22 activityIndex: 1 22 activityIndex: 1
23 }; 23 };
24 }, 24 },
25 methods : { 25 methods: {
26 toSign(){ 26 toSign() {
27 this.$router.push("/sign") 27 this.$router.push("/sign");
28 } 28 }
29 }, 29 },
30 components: { 30 components: {
...@@ -34,11 +34,6 @@ export default { ...@@ -34,11 +34,6 @@ export default {
34 </script> 34 </script>
35 35
36 <style lang="scss" scoped> 36 <style lang="scss" scoped>
37 .home {
38 position: relative;
39 text-align: center;
40 background-color: #74cb35;
41 }
42 .title { 37 .title {
43 width: 750px; 38 width: 750px;
44 height: 955px; 39 height: 955px;
...@@ -90,7 +85,7 @@ export default { ...@@ -90,7 +85,7 @@ export default {
90 position: absolute; 85 position: absolute;
91 bottom: 0px; 86 bottom: 0px;
92 } 87 }
93 .remain{ 88 .remain {
94 height: 0px; 89 height: 0px;
95 } 90 }
96 </style> 91 </style>
......
1 <template>
2 <div class="viewClass">
3 <div class="search-panel">
4 <div class="input-panel">
5 <input v-model="listForm.query" />
6 </div>
7 <div class="search-btn" @click="searchWorksHandler('searchBtn')"></div>
8 </div>
9 <van-row>
10 <van-col span="12" v-for="(item,index) in worksList" :key="index">
11 <div class="worksItem" @click="toWorksViewHandler(item.worksCode)">
12 <div
13 class="worksThumb"
14 v-bind:style="{backgroundImage:'url(' + item.worksList[0].worksUrl + ')'}"
15 ></div>
16 <div class="worksDescription">
17 <div class="worksNo">{{item.worksNo}}</div>
18 <div class="worksName">{{item.name}}</div>
19 <div class="worksPriaseNo">{{item.praiseNumber}}</div>
20 <div class="worksPraise"></div>
21 </div>
22 </div>
23 </van-col>
24
25 <van-col span="24" v-if="worksList.length == 0 ">
26 <div class="empty">
27 <div class="empty-icon">
28 <van-icon name="warn-o" />
29 </div>
30 <div class="empty-message">没有搜到任何作品 ！</div>
31 </div>
32 </van-col>
33 </van-row>
34 </div>
35 </template>
36
37 <script>
38 let urls = {
39 list: "/jiajiaCHApi/app/works/list"
40 };
41
42 import { httpGet } from "@/api/fetch-api";
43
44 import Vue from "vue";
45 import { Row, Col } from "vant";
46 import { Icon } from "vant";
47
48 Vue.use(Icon);
49 Vue.use(Row).use(Col);
50
51 export default {
52 props: [""],
53 data() {
54 return {
55 init: false,
56 worksList: [],
57 lastQuery: "",
58 listForm: {
59 query: "",
60 page: 1,
61 size: 10
62 }
63 };
64 },
65 methods: {
66 initActvity() {
67 this.searchWorksHandler();
68 },
69 toWorksViewHandler(code) {
70 this.$emit("worksDetail", { worksCode: code });
71 },
72 searchWorksHandler(action) {
73 if (action) {
74 if (this.lastQuery == this.listForm.query) {
75 return;
76 }
77 this.lastQuery = this.listForm.query;
78 this.listForm.page = 1;
79 }
80 httpGet({ url: urls.list, data: this.listForm }).then(res => {
81 let list = [];
82 if (this.listForm.page != 1) {
83 list = this.worksList;
84 }
85 list = list.concat(res.list);
86 this.worksList = list;
87 });
88 }
89 },
90 created() {
91 this.initActvity();
92 }
93 };
94 </script>
95
96 <style lang="scss" scoped>
97 .viewClass {
98 width: 630px;
99 margin: auto;
100 padding-top: 30px;
101 }
102
103 .search-panel {
104 display: flex;
105 align-items: center;
106 justify-content: space-between;
107 width: 630px;
108
109 .input-panel {
110 width: 450px;
111 height: 52px;
112 border: 2px solid #82acae;
113 background-color: #e8e8e8;
114 line-height: 54px;
115 border-radius: 26px;
116 display: flex;
117 input {
118 height: 46px;
119 width: 400px;
120 line-height: 46px;
121 border: none;
122 background-color: transparent;
123 padding-left: 20px;
124 font-size: 28px;
125 position: relative;
126 z-index: 1000;
127 }
128 }
129
130 .search-btn {
131 width: 152px;
132 height: 53px;
133 background: url(../../../assets/imgs/list-search-btn.png);
134 background-size: 100%;
135 position: relative;
136 z-index: 1000;
137 }
138 }
139
140 .van-row {
141 margin-top: 30px;
142 }
143
144 .worksItem {
145 width: 300px;
146 height: 275px;
147 border: solid 1px #d1d0d0;
148 box-shadow: 2px 2px 2px #d1d0d0;
149 border-radius: 20px;
150
151 .worksThumb {
152 width: 300px;
153 height: 215px;
154 background-size: cover;
155 }
156 .worksDescription {
157 display: flex;
158 align-items: center;
159 padding-left: 10px;
160
161 div {
162 font-size: 26px;
163 height: 60px;
164 line-height: 60px;
165 text-align: left;
166 text-overflow: ellipsis;
167 }
168
169 .worksNo {
170 width: 55px;
171 }
172 .worksName {
173 width: 133px;
174 }
175 .worksPriaseNo {
176 width: 63px;
177 }
178 .worksPraise {
179 width: 28px;
180 height: 24px;
181 background: url(../../../assets/imgs/list-heart-red.png);
182 background-size: 100%;
183 }
184 }
185 }
186 .empty {
187 padding-top: 100px;
188 height: 300px;
189
190 .empty-icon {
191 font-size: 60px;
192 color: #a1a1a1;
193 }
194 .empty-message {
195 font-size: 24px;
196 color: #a1a1a1;
197 }
198 }
199 </style>
1 <template>
2 <div class="viewClass" v-if="formData">
3 <div class="btn-back" @click="backHandler"></div>
4 <div class="sys-container-panel content">
5 <div class="container-title">小选手：{{formData.name}}</div>
6 <div class="head-line"></div>
7 <div class="swipe">
8 <van-swipe :autoplay="5000">
9 <van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
10 <!-- <img :src="works.worksUrl" /> -->
11 <div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
12 </van-swipe-item>
13 </van-swipe>
14 </div>
15 <div class="text-container space">
16 <div class="text-container inline">
17 <div class="label">参数编号：</div>
18 <div class="msg">{{formData.worksNo}}</div>
19 </div>
20
21 <div class="text-container inline right">
22 <div class="width-label label">目前人气值：</div>
23 <div class="msg primay">{{formData.praiseNumber}}</div>
24 </div>
25 </div>
26
27 <div class="text-container space">
28 <div class="text-container inline">
29 <div class="label">来自城市：</div>
30 <div class="msg">{{formData.province}} {{formData.city}}</div>
31 </div>
32
33 <div class="text-container inline right">
34 <div class="label">目前排名：</div>
35 <div class="msg primay">{{formData.rank}}</div>
36 </div>
37 </div>
38
39 <div class="text-container space top">
40 <div class="label">竞赛宣言：</div>
41 <div class="msg">{{formData.slogan}}</div>
42 </div>
43 </div>
44
45 <div class="view-btn-group">
46 <div class="sys-btn-02" @click="selfPraiseHandler">投TA一票</div>
47 <div class="sys-btn-02" @click="showShareHandler">呼叫亲友团</div>
48 </div>
49
50 <div class="btn-tips">*每用户每天仅能投票一次</div>
51 </div>
52 </template>
53
54 <script>
55 let urls = {
56 praise: "/jiajiaCHApi/app/works/praise"
57 };
58
59 import { request } from "@/api/fetch-api";
60
61 import Vue from "vue";
62 import { Toast } from "vant";
63 import { Swipe, SwipeItem } from "vant";
64
65 Vue.use(Swipe).use(SwipeItem);
66 Vue.use(Toast);
67
68 export default {
69 props: ["value"],
70 data() {
71 return {
72 formData: this.value.data,
73 isMy: this.value.isMy
74 };
75 },
76 methods: {
77 formEditHandler() {
78 this.$emit("edit");
79 },
80 selfPraiseHandler() {
81 // 自己点赞
82 let data = {
83 worksCode: this.formData.worksCode
84 };
85 Toast.loading({
86 mask: true,
87 message: "数据提交..."
88 });
89 request
90 .post(urls.praise, data)
91 .then(res => {
92 Toast.clear();
93 this.$emit("praiseSuccess");
94 })
95 .catch(res => {
96 let msg = res.data.errMsg;
97 Toast(msg);
98 });
99 },
100 showShareHandler() {
101 // 出现分享层
102 this.$emit("showShare");
103 },
104 backHandler() {
105 this.$emit("back");
106 }
107 }
108 };
109 </script>
110
111 <style lang="scss" scoped>
112 .content {
113 margin: 85px auto 60px auto;
114 padding-bottom: 60px;
115
116 .head-line {
117 height: 60px;
118 }
119
120 .edit {
121 width: 630px;
122 text-align: right;
123 u {
124 font-size: 24px;
125 color: #5db288;
126 position: relative;
127 z-index: 1000;
128 }
129 }
130
131 .swipe {
132 width: 630px;
133 height: 451px;
134 margin: auto;
135 border: 2px solid #82acae;
136 border-radius: 30px;
137 overflow: hidden;
138
139 .img {
140 height: 451px;
141 width: 630px;
142 background-size: cover;
143 }
144 }
145
146 .space {
147 margin-top: 20px !important;
148 }
149 .top {
150 display: flex;
151 align-items: flex-start !important;
152 }
153
154 .inline-group-width {
155 width: 500px;
156 }
157
158 .inline-group {
159 display: flex;
160 justify-content: space-between;
161 align-items: center;
162 }
163
164 .text-container {
165 display: flex;
166 align-items: center;
167 width: 620px;
168 margin: auto;
169
170 .inline {
171 width: 315px !important;
172
173 .label {
174 width: 130px;
175 }
176
177 .width-label {
178 width: 170px !important;
179 }
180 .msg {
181 width: 185px;
182 }
183 }
184
185 .inline-02 {
186 width: 180px !important;
187 padding: 0 30px;
188 .label {
189 font-size: 22px;
190 }
191 }
192
193 .right {
194 justify-content: flex-end !important;
195 }
196
197 .label {
198 min-width: 128px;
199 font-size: 24px;
200 text-align: left;
201 }
202 .msg {
203 color: #303531;
204 font-size: 24px;
205 text-align: left;
206 }
207 .primay {
208 font-size: 32px !important;
209 font-weight: 600;
210 color: #ff9e30;
211 }
212 }
213
214 .privacy {
215 width: 630px;
216 margin: auto;
217 hr {
218 border-top: 3px dashed #d4d1c5;
219 margin: 60px auto;
220 }
221 }
222 }
223
224 .view-btn-group {
225 display: flex;
226 width: 730px;
227 margin: auto;
228 justify-content: space-between;
229 .sys-btn-02 {
230 width: 340px;
231 line-height: 80px;
232 height: 90px;
233 background-size: 340px 90px;
234 }
235 }
236
237 .container-title {
238 font-size: 28px;
239 }
240
241 .auto-register-tips {
242 width: 700px;
243 margin: auto;
244 }
245
246 .icon-draw-down {
247 width: 30px;
248 height: 18px;
249 background: url(../../../assets/imgs/draw-down.png) no-repeat;
250 background-size: 100%;
251 }
252
253 .btn-tips {
254 width: 640px;
255 text-align: left;
256 font-size: 24px;
257 color: #303531;
258 margin: auto;
259 }
260
261 .btn-back {
262 width: 170px;
263 height: 52px;
264 background: url(../../../assets/imgs/list-btn-back.png);
265 background-size: 100%;
266 position: fixed;
267 left: 0;
268 top: 30px;
269 z-index: 8000;
270 }
271 </style>
1 <template>
2 <div class="viewClass" v-if="init">
3 <div class="btn-show-rule" @click="showRuleHandler"></div>
4 <div v-if="indexForm.worksCode">
5 <div class="sys-container-panel content top-marin">
6 <div class="container-title">人气评选</div>
7 <div class="head-line"></div>
8
9 <div class="self-container">
10 <div class="leap"></div>
11 <div class="self-content">
12 <div class="swipe">
13 <van-swipe :autoplay="5000">
14 <van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
15 <div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
16 </van-swipe-item>
17 </van-swipe>
18 </div>
19
20 <div class="text-container space">
21 <div class="text-container inline">
22 <div class="label">我的编号：</div>
23 <div class="msg">{{formData.worksNo}}</div>
24 </div>
25
26 <div class="text-container inline">
27 <div class="label">我的人气：</div>
28 <div class="msg">{{formData.praiseNumber}}</div>
29 </div>
30
31 <div class="text-container inline">
32 <div class="label">我的排名：</div>
33 <div class="msg">{{indexForm.rank}}</div>
34 </div>
35
36 <div class="text-container inline top" @click="praiseHandler">
37 <div class="no-praise" :class="{praise : indexForm.isPraiseToday == '1'}"></div>
38 <div class="msg primay">{{indexForm.isPraiseToday == '1' ? '今日已投' : '今日未投'}}</div>
39 </div>
40 </div>
41 </div>
42 </div>
43 </div>
44 <div class="chain-div"></div>
45 </div>
46 <div
47 class="sys-container-panel content list-panel"
48 v-bind:class="{'top-marin' : indexForm.worksCode == ''}"
49 >
50 <div class="container-title" v-if="!indexForm.worksCode">人气评选</div>
51 <div class="head-line" v-if="!indexForm.worksCode"></div>
52 <list-view v-on:worksDetail="showWorksDetail"></list-view>
53
54 <div class="bottom-line"></div>
55 </div>
56 </div>
57 </template>
58
59 <script>
60 let urls = {
61 praise: "/jiajiaCHApi/app/works/praise",
62 index: "/jiajiaCHApi/app/index"
63 };
64
65 import ListView from "./ListView";
66 import { request, httpGet } from "@/api/fetch-api";
67
68 import Vue from "vue";
69 import { Toast } from "vant";
70 import { Swipe, SwipeItem } from "vant";
71
72 Vue.use(Swipe).use(SwipeItem);
73 Vue.use(Toast);
74
75 export default {
76 props: ["value"],
77 data() {
78 return {
79 init: false,
80 formData: this.value,
81 indexForm: {
82 rank: 0,
83 isPraiseToday: 0,
84 worksCode: "",
85 isSubcribe: 0
86 }
87 };
88 },
89 methods: {
90 initActvity() {
91 httpGet({ url: urls.index, data: {} }).then(res => {
92 this.init = true;
93 this.indexForm = res;
94 // this.indexForm.worksCode = "";
95 });
96 },
97 praiseHandler(code) {
98 if (!this.init) {
99 return;
100 }
101 if (this.indexForm.isPraiseToday == 1) {
102 return;
103 }
104
105 let data = {
106 worksCode:
107 (typeof code).toLowerCase() == "string"
108 ? code
109 : this.indexForm.worksCode
110 };
111 Toast.loading({
112 mask: true,
113 message: "数据提交..."
114 });
115 request
116 .post(urls.praise, data)
117 .then(res => {
118 Toast.clear();
119 this.indexForm.isPraiseToday = 1;
120 this.emitPraiseSuccess();
121 })
122 .catch(res => {
123 let msg = res.data.errMsg;
124 Toast(msg);
125 });
126 },
127 emitPraiseSuccess() {
128 this.$emit("praiseSuccess");
129 },
130 showRuleHandler() {
131 this.$emit("showRule");
132 },
133 showWorksDetail(params) {
134 this.$emit("worksDetail", params);
135 }
136 },
137 created() {
138 this.initActvity();
139 },
140 components: {
141 ListView
142 }
143 };
144 </script>
145
146 <style lang="scss" scoped>
147 .viewClass {
148 position: relative;
149
150 .chain-div {
151 width: 315px;
152 height: 50px;
153 background: url(../../../assets/imgs/list-chain-link.png);
154 background-size: 100%;
155 position: absolute;
156 left: 217px;
157 top: 360px;
158 z-index: 800;
159 }
160 }
161
162 .top-marin {
163 margin: 85px auto 15px auto !important;
164 }
165 .content {
166 padding-bottom: 30px;
167
168 .head-line {
169 height: 80px;
170 }
171 }
172
173 .self-container {
174 width: 630px;
175 height: 265px;
176 border-radius: 20px;
177 background-color: #71c634;
178 margin: 0px auto 0 auto;
179 position: relative;
180 padding-top: 5px;
181
182 .self-content {
183 display: flex;
184 }
185
186 .leap {
187 width: 149px;
188 height: 129px;
189 background: url(../../../assets/imgs/leap-04.png);
190 background-size: 100%;
191 position: absolute;
192 right: -5px;
193 bottom: 0px;
194 }
195
196 .swipe {
197 width: 265px;
198 height: 200px;
199 border: 2px solid #45a402;
200 border-radius: 20px;
201 margin: 32px;
202 overflow: hidden;
203
204 div {
205 line-height: 200px;
206 height: 200px;
207 text-align: center;
208 width: 265px;
209 }
210 .img {
211 margin: auto;
212 // width: 235px;
213 height: 190px;
214 width: 265px;
215 background-size: cover;
216 }
217 }
218
219 .space {
220 margin-top: 32px;
221 }
222
223 .top {
224 margin-top: 18px !important;
225 }
226
227 .inline {
228 display: flex;
229 margin-bottom: 10px;
230 align-items: center;
231
232 .label {
233 color: #fff;
234 font-weight: 400;
235 font-size: 30px;
236 }
237 .msg {
238 color: #0e6f4e;
239 font-weight: bold;
240 font-size: 30px;
241 }
242
243 .primay {
244 font-weight: 500;
245 font-size: 24px;
246 }
247
248 .no-praise {
249 margin-right: 10px;
250 width: 34px;
251 height: 30px;
252 background: url(../../../assets/imgs/list-no-praise.png) no-repeat;
253 background-size: 100%;
254 }
255
256 .praise {
257 width: 34px;
258 height: 30px;
259 background: url(../../../assets/imgs/list-praised.png) no-repeat !important;
260 background-size: 100% !important;
261 }
262 }
263 }
264
265 .list-panel {
266 min-height: 600px;
267 }
268
269 .bottom-line {
270 height: 10px;
271 }
272
273 .btn-show-rule {
274 width: 170px;
275 height: 52px;
276 background: url(../../../assets/imgs/list-btn-rule.png);
277 background-size: 100%;
278 position: fixed;
279 left: 0;
280 top: 30px;
281 z-index: 8000;
282 }
283 </style>
1 <template>
2 <div class="home">
3 <head-view></head-view>
4 <bottom-tool v-model="activityIndex"></bottom-tool>
5
6 <works-list-view
7 v-model="formData"
8 v-if="init"
9 v-show="listVisiabled"
10 v-on:showRule="showRuleHandler"
11 v-on:worksDetail="showWorksDetail"
12 ></works-list-view>
13
14 <member-works-view
15 v-model="memberWorks"
16 v-if="init && !listVisiabled"
17 v-on:back="showWorksList"
18 v-on:praiseSuccess="praiseSuccessHandler"
19 v-on:showShare="shareModelVisiable=true"
20 ></member-works-view>
21
22 <biz-model v-model="model"></biz-model>
23
24 <div class="bottom-line"></div>
25
26 <!-- 分享蒙层 -->
27 <div class="shareModel" v-if="shareModelVisiable" @click="shareModelVisiable = false">
28 <div class="shareModelContainer">
29 <div class="shareModelMask"></div>
30 <div class="shareIcon"></div>
31 </div>
32 </div>
33 </div>
34 </template>
35
36 <script>
37 let urls = {
38 myWork: "/jiajiaCHApi/app/works",
39 getWorks: "/jiajiaCHApi/app/works/get"
40 };
41
42 import { httpGet } from "@/api/fetch-api";
43 import BottomTool from "@/components/bottom-tools/bottom-tools";
44 import BizModel from "@/components/biz-model/biz-model";
45 import headView from "@/components/plugins/head";
46 import WorksListView from "./components/WorksListView";
47 import MemberWorksView from "./components/MemberWorksView";
48
49 import Vue from "vue";
50 import { Toast } from "vant";
51
52 Vue.use(Toast);
53
54 export default {
55 name: "home",
56 data() {
57 return {
58 activityIndex: 3,
59 init: false,
60 listVisiabled: true,
61 shareModelVisiable: false,
62 formData: {
63 worksCode: "",
64 name: "",
65 province: "",
66 provinceCode: "",
67 city: "",
68 cityCode: "",
69 profile: "",
70 slogan: "",
71 parentName: "",
72 parentMobile: "",
73 worksList: []
74 },
75 model: {
76 show: false,
77 title: "",
78 content: "",
79 index: "default",
80 btnShow: false,
81 btnText: "",
82 confirmHandler: null,
83 labelBtnShow: false,
84 labelBtnText: "",
85 labelBtnHandler: null
86 },
87 memberWorks: {
88 data: {}
89 }
90 };
91 },
92 methods: {
93 initActivity() {
94 Toast.loading({
95 mask: true,
96 message: "加载中..."
97 });
98
99 httpGet({ url: urls.myWork }).then(res => {
100 this.init = true;
101 Toast.clear();
102 this.formData = res.data || {};
103 if (!res.data) {
104 this.formEdit = true;
105 } else {
106 this.formEdit = false;
107 }
108 });
109 },
110 showRuleHandler() {
111 this.model.show = true;
112 this.model.title = "规则说明";
113 this.model.content = "";
114 this.model.btnShow = true;
115 this.model.btnText = "我知道了";
116 this.model.index = "rule";
117 this.model.confirmHandler = null;
118 this.model.labelBtnShow = false;
119 this.model.labelBtnText = "";
120 this.model.labelBtnHandler = null;
121 },
122 showWorksDetail(params) {
123 Toast.loading({
124 mask: true,
125 message: "数据加载中..."
126 });
127 httpGet({ url: urls.getWorks, data: params }).then(res => {
128 Toast.clear();
129 this.memberWorks.data = res.data;
130 this.memberWorks.isMy = res.isMy;
131 console.log("this.memberWorks=== ", this.memberWorks);
132 this.listVisiabled = false;
133 });
134 },
135 showWorksList() {
136 this.listVisiabled = true;
137 },
138 praiseSuccessHandler() {}
139 },
140 created() {
141 this.initActivity();
142 },
143 components: {
144 BottomTool,
145 BizModel,
146 WorksListView,
147 MemberWorksView,
148 headView
149 }
150 };
151 </script>
152
153 <style lang="scss" scoped>
154 .home {
155 position: relative;
156 text-align: center;
157 background-color: #74cb35;
158 }
159
160 .bottom-line {
161 height: 250px;
162 background-color: transparent;
163 }
164
165 .shareModel {
166 position: fixed;
167 height: 100%;
168 width: 100%;
169 left: 0px;
170 top: 0px;
171 z-index: 9999;
172 }
173
174 .shareModelContainer {
175 position: relative;
176 height: 100%;
177 width: 100%;
178 }
179
180 .shareModelMask {
181 position: absolute;
182 left: 0px;
183 top: 0px;
184 width: 100%;
185 height: 100%;
186 background-color: rgba(0, 0, 0, 0.7);
187 }
188 .shareIcon {
189 position: absolute;
190 top: 0px;
191 right: 30px;
192 width: 425px;
193 height: 220px;
194 background: url(../../assets/imgs/model-share-tip.png) no-repeat;
195 background-size: 100%;
196 }
197 </style>
......
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
9 <div class="swipe"> 9 <div class="swipe">
10 <van-swipe :autoplay="5000"> 10 <van-swipe :autoplay="5000">
11 <van-swipe-item v-for="(works, index) in formData.worksList" :key="index"> 11 <van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
12 <img :src="works.worksUrl" /> 12 <!-- <img :src="works.worksUrl" /> -->
13 <div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
13 </van-swipe-item> 14 </van-swipe-item>
14 </van-swipe> 15 </van-swipe>
15 </div> 16 </div>
...@@ -94,7 +95,7 @@ export default { ...@@ -94,7 +95,7 @@ export default {
94 .post(urls.praise, data) 95 .post(urls.praise, data)
95 .then(res => { 96 .then(res => {
96 Toast.clear(); 97 Toast.clear();
97 this.$emit("praiseSuccess") 98 this.$emit("praiseSuccess");
98 }) 99 })
99 .catch(res => { 100 .catch(res => {
100 let msg = res.data.errMsg; 101 let msg = res.data.errMsg;
...@@ -103,8 +104,8 @@ export default { ...@@ -103,8 +104,8 @@ export default {
103 }, 104 },
104 showShareHandler() { 105 showShareHandler() {
105 // 出现分享层 106 // 出现分享层
106 this.$emit("showShare") 107 this.$emit("showShare");
107 console.log("show share") 108 console.log("show share");
108 } 109 }
109 }, 110 },
110 created() { 111 created() {
...@@ -135,14 +136,16 @@ export default { ...@@ -135,14 +136,16 @@ export default {
135 136
136 .swipe { 137 .swipe {
137 width: 630px; 138 width: 630px;
138 height: 320px; 139 height: 451px;
139 margin: auto; 140 margin: auto;
140 border: 2px solid #82acae; 141 border: 2px solid #82acae;
141 border-radius: 30px; 142 border-radius: 30px;
143 overflow: hidden;
142 144
143 img { 145 .img {
144 max-height: 300px; 146 height: 451px;
145 max-width: 600px; 147 width: 630px;
148 background-size: cover;
146 } 149 }
147 } 150 }
148 151
...@@ -188,7 +191,7 @@ export default { ...@@ -188,7 +191,7 @@ export default {
188 191
189 .label { 192 .label {
190 min-width: 128px; 193 min-width: 128px;
191 font-size: 20px; 194 font-size: 24px;
192 text-align: left; 195 text-align: left;
193 } 196 }
194 .msg { 197 .msg {
...@@ -218,7 +221,7 @@ export default { ...@@ -218,7 +221,7 @@ export default {
218 width: 730px; 221 width: 730px;
219 margin: auto; 222 margin: auto;
220 justify-content: space-between; 223 justify-content: space-between;
221 margin-bottom: 200px; 224 margin-bottom: 100px;
222 225
223 .sys-btn-02 { 226 .sys-btn-02 {
224 width: 300px; 227 width: 300px;
......
1 <template> 1 <template>
2 <div class="home"> 2 <div class="home">
3 <div class="head-leap"></div> 3 <head-view></head-view>
4 4
5 <ViewModel 5 <ViewModel
6 v-model="formData" 6 v-model="formData"
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 <div class="shareIcon"></div> 22 <div class="shareIcon"></div>
23 </div> 23 </div>
24 </div> 24 </div>
25 </div> 25 </div>
26 </template> 26 </template>
27 27
28 <script> 28 <script>
...@@ -35,6 +35,7 @@ import BottomTool from "@/components/bottom-tools/bottom-tools"; ...@@ -35,6 +35,7 @@ import BottomTool from "@/components/bottom-tools/bottom-tools";
35 import BizModel from "@/components/biz-model/biz-model"; 35 import BizModel from "@/components/biz-model/biz-model";
36 import EditModel from "./components/EditModel"; 36 import EditModel from "./components/EditModel";
37 import ViewModel from "./components/ViewModel"; 37 import ViewModel from "./components/ViewModel";
38 import headView from "@/components/plugins/head";
38 39
39 import { httpGet, httpPost } from "@/api/fetch-api"; 40 import { httpGet, httpPost } from "@/api/fetch-api";
40 import AreaList from "@/api/area"; 41 import AreaList from "@/api/area";
...@@ -146,7 +147,8 @@ export default { ...@@ -146,7 +147,8 @@ export default {
146 BottomTool, 147 BottomTool,
147 EditModel, 148 EditModel,
148 ViewModel, 149 ViewModel,
149 BizModel 150 BizModel,
151 headView
150 }, 152 },
151 created() { 153 created() {
152 this.initActivity(); 154 this.initActivity();
...@@ -160,19 +162,24 @@ export default { ...@@ -160,19 +162,24 @@ export default {
160 text-align: center; 162 text-align: center;
161 } 163 }
162 164
165 .head-container {
166 position: relative;
167 height: 0px;
168 }
169
163 .head-leap { 170 .head-leap {
164 width: 750px; 171 width: 750px;
165 height: 231px; 172 height: 231px;
166 background: url(../../assets/imgs/head-leap.png); 173 background: url(../../assets/imgs/head-leap.png);
167 background-size: 100%; 174 background-size: 100%;
168 position: fixed; 175 position: relative;
169 left: 0; 176 left: 0;
170 top: 0; 177 top: 0;
171 z-index: 999; 178 z-index: 999;
172 } 179 }
173 180
174 .bottom-line { 181 .bottom-line {
175 height: 250px; 182 height: 150px;
176 background-color: transparent; 183 background-color: transparent;
177 } 184 }
178 185
......
...@@ -38,7 +38,8 @@ module.exports = { ...@@ -38,7 +38,8 @@ module.exports = {
38 38
39 // 它支持webPack-dev-server的所有选项 39 // 它支持webPack-dev-server的所有选项
40 devServer: { 40 devServer: {
41 host: "192.168.0.101", 41 // host: "192.168.0.101",
42 host: "localhost",
42 port: 9001, // 端口号 43 port: 9001, // 端口号
43 https: false, // https:{type:Boolean} 44 https: false, // https:{type:Boolean}
44 open: true, //配置自动启动浏览器 45 open: true, //配置自动启动浏览器
......