Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3c7621fc 1 parent e7bb033f

✨ feat(组件): 新增捐花组件，和相关页面操作

Inline Side-by-side
Showing 6 changed files with 477 additions and 108 deletions
...@@ -40,10 +40,10 @@ ...@@ -40,10 +40,10 @@
40 </div> 40 </div>
41 <div class="donate-handle"> 41 <div class="donate-handle">
42 <div class="donate-cancel"> 42 <div class="donate-cancel">
43 - <my-button @on-click="cancelDonate" type="plain">取消</my-button> 43 + <my-button type="plain" @on-click="cancelDonate">取消</my-button>
44 </div> 44 </div>
45 <div class="donate-imd"> 45 <div class="donate-imd">
46 - <my-button @on-click="donateBook" type="primary">立即捐赠</my-button> 46 + <my-button type="primary" @on-click="donateBook">立即捐赠</my-button>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
...@@ -78,31 +78,31 @@ const donateBook = () => { ...@@ -78,31 +78,31 @@ const donateBook = () => {
78 qty: donate_number.value, 78 qty: donate_number.value,
79 donate_name: props.item.perf_name, 79 donate_name: props.item.perf_name,
80 }) 80 })
81 - .then(res => { 81 + .then(res => {
82 - if (res.data.code === 1) { 82 + if (res.data.code === 1) {
83 - console.warn(res.data.data); 83 + console.warn(res.data.data);
84 - closeBtn(); 84 + closeBtn();
85 - 85 +
86 - // 交易成功跳转回调页面 86 + // 交易成功跳转回调页面
87 - // TEMP: 临时传参 donate_id 87 + // TEMP: 临时传参 donate_id
88 - $router.push({ 88 + $router.push({
89 - path: '/client/wechatpayCallback', 89 + path: '/client/wechatpayCallback',
90 - query: { 90 + query: {
91 - donate_id: res.data.data.id 91 + donate_id: res.data.data.id
92 - } 92 + }
93 - }) 93 + })
94 - } else { 94 + } else {
95 - console.warn(res); 95 + console.warn(res);
96 - if (!res.data.show) return false; 96 + if (!res.data.show) return false;
97 - Toast({ 97 + Toast({
98 - icon: 'close', 98 + icon: 'close',
99 - message: res.data.msg 99 + message: res.data.msg
100 - }); 100 + });
101 - } 101 + }
102 - }) 102 + })
103 - .catch(err => { 103 + .catch(err => {
104 - console.error(err); 104 + console.error(err);
105 - }) 105 + })
106 } 106 }
107 107
108 const show = ref(false); 108 const show = ref(false);
...@@ -143,7 +143,7 @@ const closeBtn = () => { ...@@ -143,7 +143,7 @@ const closeBtn = () => {
143 show.value = false; 143 show.value = false;
144 } 144 }
145 145
146 -const cancelDonate = () => { 146 +const cancelDonate = () => {
147 closeBtn(); 147 closeBtn();
148 } 148 }
149 149
...@@ -174,51 +174,63 @@ export default { ...@@ -174,51 +174,63 @@ export default {
174 .donate-wrapper { 174 .donate-wrapper {
175 .donate-header { 175 .donate-header {
176 padding: 1rem; 176 padding: 1rem;
177 +
177 .donate-book { 178 .donate-book {
178 - border: 1px solid #ECECEC; 179 + border: 1px solid #ECECEC;
179 - border-radius: 5px; 180 + border-radius: 5px;
180 padding: 0.1rem; 181 padding: 0.1rem;
181 } 182 }
183 +
182 .donate-detail { 184 .donate-detail {
183 - font-size: 1.25rem; 185 + font-size: 1.25rem;
184 padding: 1rem; 186 padding: 1rem;
187 +
185 .text { 188 .text {
186 - color: #292929; 189 + color: #292929;
187 font-weight: bold; 190 font-weight: bold;
188 } 191 }
192 +
189 .price { 193 .price {
190 color: #EE332E; 194 color: #EE332E;
191 } 195 }
192 } 196 }
193 } 197 }
198 +
194 .donate-name { 199 .donate-name {
195 padding: 1rem; 200 padding: 1rem;
201 +
196 .donate-input { 202 .donate-input {
197 - border: 1px solid #B9B9B9; 203 + border: 1px solid #B9B9B9;
198 - border-radius: 5px; 204 + border-radius: 5px;
199 - padding: 0.2rem; 205 + padding: 0.2rem;
200 margin-left: 1rem; 206 margin-left: 1rem;
201 } 207 }
202 } 208 }
209 +
203 .donate-tips { 210 .donate-tips {
204 - padding: 1rem; 211 + padding: 1rem;
205 padding-top: 0; 212 padding-top: 0;
206 } 213 }
214 +
207 .donate-number { 215 .donate-number {
208 padding: 1rem; 216 padding: 1rem;
209 } 217 }
218 +
210 .donate-handle { 219 .donate-handle {
211 overflow: auto; 220 overflow: auto;
221 +
212 .donate-cancel { 222 .donate-cancel {
213 - width: 49%; 223 + width: 49%;
214 float: left; 224 float: left;
215 } 225 }
226 +
216 .donate-imd { 227 .donate-imd {
217 - width: 50%; 228 + width: 50%;
218 float: left; 229 float: left;
219 } 230 }
220 } 231 }
221 } 232 }
233 +
222 .button { 234 .button {
223 display: flex; 235 display: flex;
224 flex-direction: column; 236 flex-direction: column;
......
1 +<template>
2 + <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: popupHeight, zIndex: 3000 }">
3 + <div class="donate-wrapper">
4 + <div class="donate-title">
5 + 您所有捐助的爱心
6 + <van-icon :name="icon_flower" />
7 + 都将用于多民族语言发展
8 + </div>
9 + <div class="shortcut-choose-wrapper">
10 + <van-row gutter="10">
11 + <van-col span="8">
12 + <div :class="['base-item', checked_one_flower ? 'checked-item' : 'uncheck-item']" @click="checkFlower(1)">
13 + 1朵花花
14 + </div>
15 + </van-col>
16 + <van-col span="8">
17 + <div :class="['base-item', checked_two_flower ? 'checked-item' : 'uncheck-item']" @click="checkFlower(2)">
18 + 2朵花花
19 + </div>
20 + </van-col>
21 + <van-col span="8">
22 + <div :class="['base-item', checked_three_flower ? 'checked-item' : 'uncheck-item']" @click="checkFlower(3)">
23 + 3朵花花
24 + </div>
25 + </van-col>
26 + </van-row>
27 + </div>
28 + <!-- <div style="background: #FFFFFF; border-radius: 3px; border: 1px solid #713610; padding: 0.5rem 1rem; margin: 0.5rem 1rem; text-align: center;">更多花花</div> -->
29 + <div class="donate-number">
30 + <van-row>
31 + <van-col span="12">&nbsp;花花数量 </van-col>
32 + <van-col span="12" style="text-align: right;">
33 + <van-stepper v-model="donate_number" min="1" max="100" integer input-width="40px" button-size="32px" @change="onChangeDonate" />
34 + </van-col>
35 + </van-row>
36 + </div>
37 + <div class="donate-name">
38 + <van-row>
39 + <van-col span="4" style="line-height: 2;">幼儿园</van-col>
40 + <van-col span="18">
41 + <div class="donate-text">杨浦民办科技幼稚园杨浦民办科技幼稚园</div>
42 + </van-col>
43 + </van-row>
44 + </div>
45 + <div class="donate-name">
46 + <van-row>
47 + <van-col span="4" style="line-height: 2;">助力人</van-col>
48 + <van-col span="18">
49 + <div class="donate-text">瑟日古娜</div>
50 + </van-col>
51 + </van-row>
52 + </div>
53 + <div class="donate-name">
54 + <van-row>
55 + <van-col span="4" style="line-height: 2;">捐赠人<span style="color: red;">*</span></van-col>
56 + <van-col class="donate-input" span="18">
57 + <input v-model="item.perf_name" type="text" style="border: 0; padding: 0.25rem;" />
58 + </van-col>
59 + </van-row>
60 + </div>
61 + <van-row style="margin: 1rem 0;">
62 + <van-col span="12" offset="8">
63 + <div style="display: flex;align-items: center; box-sizing: content-box;">
64 + <div style="display: flex; flex-direction: column; justify-content: center;">
65 + <van-checkbox v-model="agreed" checked-color="#ee0a24">同意&nbsp;</van-checkbox>
66 + </div>
67 + <div style="display: flex; flex-direction: column; justify-content: center;">
68 + <span style="text-decoration: underline; color: #713610;" @click="handleDonationAgreement">捐赠协议</span>
69 + </div>
70 + </div>
71 + </van-col>
72 + </van-row>
73 +
74 + <div class="donate-handle">
75 + <div class="donate-cancel">
76 + <my-button type="plain" @on-click="cancelDonate">取消</my-button>
77 + </div>
78 + <div class="donate-imd">
79 + <my-button type="primary" @on-click="donateBook">确定</my-button>
80 + </div>
81 + </div>
82 + </div>
83 + </van-popup>
84 + <van-popup v-model:show="showDonationAgreement" position="bottom" :style="{ height: '100%', zIndex: 4000 }">
85 + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum voluptates architecto! Itaque magnam modi ducimus minima. Ullam quam, excepturi modi cupiditate quidem optio consequuntur minus porro, saepe, neque incidunt!
86 + <div class="bottom-btn" @click="closeDonationAgreement">
87 + <div class="text">关闭</div>
88 + </div>
89 + </van-popup>
90 +</template>
91 +
92 +<script setup>
93 +import Cookies from 'js-cookie'
94 +import { icon_flower } from '@/utils/generateIcons'
95 +
96 +import MyButton from '@/components/MyButton/index.vue'
97 +import { ref, reactive, onMounted, watch, nextTick } from 'vue'
98 +import { useRoute, useRouter } from 'vue-router'
99 +import axios from '@/utils/axios';
100 +import $ from 'jquery'
101 +import { Toast, Dialog } from 'vant';
102 +const $route = useRoute();
103 +const $router = useRouter();
104 +
105 +const props = defineProps({
106 + item: Object,
107 + showPopup: Boolean
108 +})
109 +
110 +const emit = defineEmits(['on-close']);
111 +
112 +let donate_number = ref(1);
113 +// 捐赠数量回调
114 +const onChangeDonate = (v) => {
115 + if (v > 3) { // 大于3朵取消选中
116 + checked_one_flower.value = false;
117 + checked_two_flower.value = false;
118 + checked_three_flower.value = false;
119 + } else {
120 + checkFlower(v)
121 + }
122 +}
123 +const donateBook = () => {
124 + // 爱心捐书接口
125 + axios.post('/srv/?a=add_donate', {
126 + book_id: props.item.book_id,
127 + qty: donate_number.value,
128 + donate_name: props.item.perf_name,
129 + })
130 + .then(res => {
131 + if (res.data.code === 1) {
132 + console.warn(res.data.data);
133 + closeBtn();
134 +
135 + // 交易成功跳转回调页面
136 + // TEMP: 临时传参 donate_id
137 + $router.push({
138 + path: '/client/wechatpayCallback',
139 + query: {
140 + donate_id: res.data.data.id
141 + }
142 + })
143 + } else {
144 + console.warn(res);
145 + if (!res.data.show) return false;
146 + Toast({
147 + icon: 'close',
148 + message: res.data.msg
149 + });
150 + }
151 + })
152 + .catch(err => {
153 + console.error(err);
154 + })
155 +}
156 +
157 +const show = ref(false);
158 +let popupHeight = ref('100%');
159 +
160 +watch(() => props.showPopup, (v) => {
161 + // 如果没有默认儿童需要用户确认一次
162 + if (v && !props.item.perf_id) {
163 + Dialog.confirm({
164 + title: '温馨提示',
165 + message: '默认儿童为空, 是否继续捐书!',
166 + confirmButtonColor: '#713610'
167 + })
168 + .then(() => {
169 + show.value = v;
170 + // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
171 + nextTick(() => {
172 + let height = $('.donate-wrapper').height();
173 + popupHeight.value = height + 10 + 'px';
174 + })
175 + })
176 + .catch(() => {
177 + // 取消按钮回调
178 + closeBtn();
179 + });
180 + return false;
181 + }
182 + show.value = v;
183 + // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
184 + nextTick(() => {
185 + let height = $('.donate-wrapper').height();
186 + popupHeight.value = height + 10 + 'px';
187 + })
188 +})
189 +
190 +const closeBtn = () => {
191 + emit('on-close', false)
192 + show.value = false;
193 +}
194 +
195 +const cancelDonate = () => {
196 + closeBtn();
197 +}
198 +
199 +// TODO: 微信支付
200 +
201 +onMounted(() => {
202 +
203 +})
204 +// 选择捐赠数量
205 +const checked_one_flower = ref(true);
206 +const checked_two_flower = ref(false);
207 +const checked_three_flower = ref(false);
208 +const checkFlower = (number) => {
209 + switch (number) {
210 + case 1:
211 + checked_one_flower.value = true;
212 + checked_two_flower.value = false;
213 + checked_three_flower.value = false;
214 + donate_number.value = 1;
215 + break;
216 + case 2:
217 + checked_one_flower.value = false;
218 + checked_two_flower.value = true;
219 + checked_three_flower.value = false;
220 + donate_number.value = 2;
221 + break;
222 + case 3:
223 + checked_one_flower.value = false;
224 + checked_two_flower.value = false;
225 + checked_three_flower.value = true;
226 + donate_number.value = 3;
227 + break;
228 + }
229 +}
230 +// 捐赠协议
231 +const agreed = ref(false);
232 +// 显示捐赠协议弹框
233 +const showDonationAgreement = ref(false);
234 +const handleDonationAgreement = () => {
235 + showDonationAgreement.value = true
236 +}
237 +const closeDonationAgreement = () => {
238 + showDonationAgreement.value = false
239 +}
240 +</script>
241 +
242 +<style lang="less" scoped>
243 +.donate-wrapper {
244 + .donate-title {
245 + padding: 1rem 1rem 0 1rem;
246 + color: #999999;
247 + text-align: center;
248 + }
249 + .shortcut-choose-wrapper {
250 + padding: 1rem;
251 +
252 + .base-item {
253 + text-align: center;
254 + color: #713610;
255 + padding: 0.5rem 0;
256 + }
257 +
258 + .checked-item {
259 + background: #F9EA57;
260 + border-radius: 3px;
261 + border: 1px solid #F9EA57;
262 + }
263 +
264 + .uncheck-item {
265 + background: #FFFFFF;
266 + border-radius: 3px;
267 + border: 1px solid #713610;
268 + }
269 + }
270 +
271 + .donate-name {
272 + padding: 1rem;
273 +
274 + .donate-text {
275 + background: #F4F4F4;
276 + border-radius: 3px;
277 + padding: 0.5rem;
278 + margin-left: 5%;
279 + width: 95%;
280 + }
281 + .donate-input {
282 + border: 1px solid #B9B9B9;
283 + border-radius: 5px;
284 + padding: 0.2rem;
285 + margin-left: 1rem;
286 + }
287 + }
288 +
289 + .donate-number {
290 + padding: 1rem;
291 + }
292 +
293 + .donate-handle {
294 + overflow: auto;
295 +
296 + .donate-cancel {
297 + width: 49%;
298 + float: left;
299 + }
300 +
301 + .donate-imd {
302 + width: 50%;
303 + float: left;
304 + }
305 + }
306 +}
307 +
308 +.button {
309 + display: flex;
310 + flex-direction: column;
311 + justify-content: center;
312 + flex: 1;
313 + padding: 0 0.5rem;
314 +}
315 +
316 +.bottom-btn {
317 + position: absolute;
318 + bottom: 0;
319 + left: 0;
320 + right: 0;
321 + background-color: white;
322 + box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
323 + .text {
324 + text-align: center;
325 + padding: 0.7rem;
326 + margin: 0.8rem;
327 + font-size: 1rem;
328 + font-weight: bold;
329 + border-radius: 24px;
330 + // border: 1px solid F7F7F7;
331 + color: #713610;
332 + background-color: @base-color;
333 + box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
334 + }
335 +}
336 +</style>
1 +/*
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-31 12:06:19
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-06-01 00:50:37
6 + * @FilePath: /tswj/src/main.js
7 + * @Description:
8 + */
1 import { createApp } from 'vue'; 9 import { createApp } from 'vue';
2 -import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading } from 'vant'; 10 +import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox } from 'vant';
3 import router from './router'; 11 import router from './router';
4 import App from './App.vue'; 12 import App from './App.vue';
5 // import axios from './utils/axios'; 13 // import axios from './utils/axios';
...@@ -12,7 +20,7 @@ const app = createApp(App); ...@@ -12,7 +20,7 @@ const app = createApp(App);
12 20
13 app.config.globalProperties.$http = axios; // 关键语句 21 app.config.globalProperties.$http = axios; // 关键语句
14 22
15 -app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading); 23 +app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox);
16 24
17 app.use(ConfigProvider); 25 app.use(ConfigProvider);
18 26
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-17 11:17:58 3 * @Date: 2022-05-17 11:17:58
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-05-31 18:34:18 5 + * @LastEditTime: 2022-05-31 22:11:29
6 * @FilePath: /tswj/src/utils/generateModules.js 6 * @FilePath: /tswj/src/utils/generateModules.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -14,6 +14,7 @@ import ShortcutFixed from '@/components/ShortcutFixed/index.vue' ...@@ -14,6 +14,7 @@ import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
14 import BookCard from '@/components/BookCard/index.vue' 14 import BookCard from '@/components/BookCard/index.vue'
15 import VideoDetail from '@/components/VideoDetail/index.vue' 15 import VideoDetail from '@/components/VideoDetail/index.vue'
16 import DonateBar from '@/components/DonateBar/index.vue' 16 import DonateBar from '@/components/DonateBar/index.vue'
17 +import DonateFlower from '@/components/DonateFlower/index.vue'
17 18
18 export { 19 export {
19 MyButton, 20 MyButton,
...@@ -24,4 +25,5 @@ export { ...@@ -24,4 +25,5 @@ export {
24 BookCard, 25 BookCard,
25 VideoDetail, 26 VideoDetail,
26 DonateBar, 27 DonateBar,
28 + DonateFlower,
27 } 29 }
......
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
111 </div> 111 </div>
112 </notice-overlay> 112 </notice-overlay>
113 113
114 - <donate-book :show-popup="showDonate" :item="userInfo" @on-close="closeDonate" /> 114 + <donate-flower :show-popup="showDonate" :item="userInfo" @on-close="closeDonate" />
115 115
116 <van-overlay :show="show" z-index="9999"> 116 <van-overlay :show="show" z-index="9999">
117 <div class="wrapper" @click.stop> 117 <div class="wrapper" @click.stop>
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
124 import { ref, onActivated, nextTick } from 'vue' 124 import { ref, onActivated, nextTick } from 'vue'
125 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router' 125 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
126 import { Cookies, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage' 126 import { Cookies, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
127 -import { MyButton, VideoCard, NoticeOverlay, DonateBook, ShortcutFixed } from '@/utils/generateModules' 127 +import { MyButton, VideoCard, NoticeOverlay, DonateFlower, ShortcutFixed } from '@/utils/generateModules'
128 import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_image } from '@/utils/generateIcons' 128 import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_image } from '@/utils/generateIcons'
129 import { JSJ_FORM_C } from '@/constant' 129 import { JSJ_FORM_C } from '@/constant'
130 import { useVideoList, useDefaultPerf, useShortcutBar, useScrollTop } from '@/composables'; 130 import { useVideoList, useDefaultPerf, useShortcutBar, useScrollTop } from '@/composables';
......
...@@ -6,10 +6,13 @@ ...@@ -6,10 +6,13 @@
6 <p>捐赠总金额</p> 6 <p>捐赠总金额</p>
7 <p>{{ donateInfo.total ? donateInfo.total : 0 }}&nbsp;元</p> 7 <p>{{ donateInfo.total ? donateInfo.total : 0 }}&nbsp;元</p>
8 </van-col> 8 </van-col>
9 - <van-col span="1"><div class="line"></div></van-col> 9 + <van-col span="1">
10 + <div class="line" />
11 + </van-col>
10 <van-col class="book" span="11"> 12 <van-col class="book" span="11">
11 - <p>点亮书籍</p> 13 + <p>捐赠次数</p>
12 - <p>{{ donateInfo.num ? donateInfo.num : 0 }}&nbsp;个</p> 14 + <!-- TODO: 捐赠次数数据联调-->
15 + <p>{{ donateInfo.num ? donateInfo.num : 0 }}&nbsp;次</p>
13 </van-col> 16 </van-col>
14 </van-row> 17 </van-row>
15 </div> 18 </div>
...@@ -18,8 +21,8 @@ ...@@ -18,8 +21,8 @@
18 <template v-for="(item, key) in dataList" :key="key"> 21 <template v-for="(item, key) in dataList" :key="key">
19 <div class="book-row"> 22 <div class="book-row">
20 <van-row> 23 <van-row>
21 - <van-col span="8" class="book-col" v-for="(v, index) in item" :key="index"> 24 + <van-col v-for="(v, index) in item" :key="index" span="8" class="book-col">
22 - <div @click="showCert(v)" v-if="v.is_donate" class="ENABLE"> 25 + <div v-if="v.is_donate" class="ENABLE" @click="showCert(v)">
23 <van-image width="90%" height="7rem" :src="v.cover" /> 26 <van-image width="90%" height="7rem" :src="v.cover" />
24 </div> 27 </div>
25 <div v-else class="DISABLE"> 28 <div v-else class="DISABLE">
...@@ -35,19 +38,15 @@ ...@@ -35,19 +38,15 @@
35 </div> 38 </div>
36 </template> 39 </template>
37 </div> 40 </div>
38 - <van-empty v-if="!dataList.length" 41 + <van-empty v-if="!dataList.length" class="custom-image" :image="no_image" description="暂无捐赠信息" />
39 - class="custom-image"
40 - :image="no_image"
41 - description="暂无捐赠信息"
42 - />
43 </div> 42 </div>
44 - 43 + <!-- TODO: 需要改造显示方式 -->
45 <van-overlay :show="show" @click="onHide"> 44 <van-overlay :show="show" @click="onHide">
46 <div style="width: auto; height: 100%; margin: 2rem 2rem 0 2rem; overflow: hidden;"> 45 <div style="width: auto; height: 100%; margin: 2rem 2rem 0 2rem; overflow: hidden;">
47 - <van-swipe class="my-swipe" ref="swipe"> 46 + <van-swipe ref="swipe" class="my-swipe">
48 <van-swipe-item v-for="(d, k) in certItems" :key="k"> 47 <van-swipe-item v-for="(d, k) in certItems" :key="k">
49 - <donate-cert :item="d"></donate-cert> 48 + <donate-cert :item="d" />
50 - <div style="height: 2rem;"></div> 49 + <div style="height: 2rem;" />
51 </van-swipe-item> 50 </van-swipe-item>
52 <template #indicator="{ active, total }"> 51 <template #indicator="{ active, total }">
53 <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div> 52 <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
...@@ -55,7 +54,6 @@ ...@@ -55,7 +54,6 @@
55 </van-swipe> 54 </van-swipe>
56 </div> 55 </div>
57 </van-overlay> 56 </van-overlay>
58 -
59 </template> 57 </template>
60 58
61 <script setup> 59 <script setup>
...@@ -77,37 +75,10 @@ const $router = useRouter(); ...@@ -77,37 +75,10 @@ const $router = useRouter();
77 const donateInfo = ref(''); 75 const donateInfo = ref('');
78 const dataList = ref([]); 76 const dataList = ref([]);
79 axios.post('/srv/?a=my_donate') 77 axios.post('/srv/?a=my_donate')
80 -.then(res => {
81 - if (res.data.code === 1) {
82 - donateInfo.value = res.data.data;
83 - dataList.value = _.chunk(res.data.data.book, 3);
84 - } else {
85 - console.warn(res);
86 - if (!res.data.show) return false;
87 - Toast({
88 - icon: 'close',
89 - message: res.data.msg
90 - });
91 - }
92 -})
93 -.catch(err => {
94 - console.error(err);
95 -});
96 -
97 -// 显示捐赠证书
98 -const show = ref(false);
99 -const certItems = ref([])
100 -const showCert = (v) => {
101 - // 捐款成功后，查询生成捐赠证书
102 - axios.get('/srv/?a=cert_list', {
103 - params: {
104 - book_id: v.id
105 - }
106 - })
107 .then(res => { 78 .then(res => {
108 if (res.data.code === 1) { 79 if (res.data.code === 1) {
109 - certItems.value = res.data.data; 80 + donateInfo.value = res.data.data;
110 - show.value = true 81 + dataList.value = _.chunk(res.data.data.book, 3);
111 } else { 82 } else {
112 console.warn(res); 83 console.warn(res);
113 if (!res.data.show) return false; 84 if (!res.data.show) return false;
...@@ -118,8 +89,35 @@ const showCert = (v) => { ...@@ -118,8 +89,35 @@ const showCert = (v) => {
118 } 89 }
119 }) 90 })
120 .catch(err => { 91 .catch(err => {
121 - console.error(err); 92 + console.error(err);
93 + });
94 +
95 +// 显示捐赠证书
96 +const show = ref(false);
97 +const certItems = ref([])
98 +const showCert = (v) => {
99 + // 捐款成功后，查询生成捐赠证书
100 + axios.get('/srv/?a=cert_list', {
101 + params: {
102 + book_id: v.id
103 + }
122 }) 104 })
105 + .then(res => {
106 + if (res.data.code === 1) {
107 + certItems.value = res.data.data;
108 + show.value = true
109 + } else {
110 + console.warn(res);
111 + if (!res.data.show) return false;
112 + Toast({
113 + icon: 'close',
114 + message: res.data.msg
115 + });
116 + }
117 + })
118 + .catch(err => {
119 + console.error(err);
120 + })
123 } 121 }
124 122
125 const onHide = () => { 123 const onHide = () => {
...@@ -143,62 +141,75 @@ watch(show, (v) => { ...@@ -143,62 +141,75 @@ watch(show, (v) => {
143 <style lang="less" scoped> 141 <style lang="less" scoped>
144 .donate-list-page { 142 .donate-list-page {
145 .donate-header { 143 .donate-header {
146 - background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); 144 + background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
147 - padding: 1rem; 145 + padding: 1rem;
148 - text-align: center; 146 + text-align: center;
149 color: #713610; 147 color: #713610;
148 +
150 .sum { 149 .sum {
151 line-height: 1.5; 150 line-height: 1.5;
151 +
152 p:last-child { 152 p:last-child {
153 - font-weight: bold; 153 + font-weight: bold;
154 font-size: 1.25rem; 154 font-size: 1.25rem;
155 } 155 }
156 } 156 }
157 +
157 .line { 158 .line {
158 - border-right: 1px solid #733912; 159 + border-right: 1px solid #733912;
159 - height: 100%; 160 + height: 100%;
160 opacity: 0.15; 161 opacity: 0.15;
161 } 162 }
163 +
162 .book { 164 .book {
163 line-height: 1.5; 165 line-height: 1.5;
166 +
164 p:last-child { 167 p:last-child {
165 - font-weight: bold; 168 + font-weight: bold;
166 font-size: 1.25rem; 169 font-size: 1.25rem;
167 } 170 }
168 } 171 }
169 } 172 }
173 +
170 .donate-book-wrapper { 174 .donate-book-wrapper {
171 padding: 0 1rem; 175 padding: 0 1rem;
176 +
172 .book-row { 177 .book-row {
173 - margin: 1rem 0; 178 + margin: 1rem 0;
174 text-align: center; 179 text-align: center;
180 +
175 .book-col { 181 .book-col {
176 padding: 0 0.5rem; 182 padding: 0 0.5rem;
183 +
177 .ENABLE { 184 .ENABLE {
178 - background: #FFFFFF; 185 + background: #FFFFFF;
179 - box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.15); 186 + box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.15);
180 - border-radius: 5px; 187 + border-radius: 5px;
181 border: 1px solid #FFE000; 188 border: 1px solid #FFE000;
182 } 189 }
190 +
183 .DISABLE { 191 .DISABLE {
184 - border-radius: 6px; 192 + border-radius: 6px;
185 position: relative; 193 position: relative;
194 +
186 .mask { 195 .mask {
187 - position: absolute; 196 + position: absolute;
188 - width: 100%; 197 + width: 100%;
189 - height: 100%; 198 + height: 100%;
190 - background: rgba(0, 0, 0, 0.4); 199 + background: rgba(0, 0, 0, 0.4);
191 - border-radius: 6px; 200 + border-radius: 6px;
192 top: 0; 201 top: 0;
202 +
193 img { 203 img {
194 - margin-top: 20%; 204 + margin-top: 20%;
195 width: 50%; 205 width: 50%;
196 } 206 }
197 } 207 }
198 } 208 }
209 +
199 .text { 210 .text {
200 - font-size: 1rem; 211 + font-size: 1rem;
201 - margin-top: 0.5rem; 212 + margin-top: 0.5rem;
202 color: #222222; 213 color: #222222;
203 } 214 }
204 } 215 }
......