頁面調整及api串接

dev
DESKTOP-8UQ1PPR\09158 3 years ago
parent b0cf01c869
commit c897b423a3

19
package-lock.json generated

@ -1044,19 +1044,28 @@
}
},
"node_modules/@line/bot-sdk": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/@line/bot-sdk/-/bot-sdk-7.7.0.tgz",
"integrity": "sha512-lm5VlCq9J0zoqa3RfGor2g2hwZOBxK9xsBqWz5s0WZPlGaq+JhXBC/cAPbuEIS+YTpPn+F22K9C6VRYEO8WE9A==",
"version": "7.6.2",
"resolved": "https://registry.npmjs.org/@line/bot-sdk/-/bot-sdk-7.6.2.tgz",
"integrity": "sha512-3JjtF7rWUqsTFin/y62FRo94VMazcOe0hhMlaG46uLzHLlV9KZ8AmnK6Nql9usOfEHD9ZZGhdfux/SZIEedQvw==",
"dependencies": {
"@types/body-parser": "^1.19.2",
"@types/node": "^18.0.0",
"axios": "^1.0.0",
"axios": "^0.27.0",
"body-parser": "^1.20.0",
"file-type": "^16.5.4",
"form-data": "^4.0.0"
},
"engines": {
"node": ">=18"
"node": ">=10"
}
},
"node_modules/@line/bot-sdk/node_modules/axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"dependencies": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"node_modules/@line/liff": {

@ -20,7 +20,7 @@
</script>
<style lang="less">
#app{
margin-bottom: 40px;
// margin-bottom: 40px;
}
</style>

@ -54,3 +54,7 @@ export const delAuthUser = async (id) =>
export const getAuthList = async () =>
ajax(`/user/getAuthList`);
//廣告
export const getMovie = async () =>
ajax(`/ads/getMovie`);

File diff suppressed because it is too large Load Diff

@ -1,39 +1,56 @@
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap");
.my-account {
position: relative;
width: 100%;
padding: 20px;
padding: 20px 15px;
}
.my-account .avatar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.my-account .avatar .imgCnt {
.my-account .avatar .left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
}
.my-account .avatar .left .imgCnt {
width: 80px;
height: 80px;
min-width: 80px;
border-radius: 50%;
border: 2px #fff solid;
overflow: hidden;
margin-right: 10px;
margin-right: 15px;
}
.my-account .avatar .imgCnt img {
.my-account .avatar .left .imgCnt img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.my-account .avatar .info .name {
font-size: 20px;
.my-account .avatar .left .info .name {
font-weight: bold;
color: #303a47;
}
.my-account .avatar .info .conpany {
font-size: 15px;
.my-account .avatar .left .info .conpany {
margin-top: 5px;
}
.my-account .avatar .right {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.my-account .recommend {
display: -webkit-box;
@ -64,16 +81,17 @@
width: 30%;
height: 100px;
background-color: #fff;
border: 1px #96989a solid;
border-radius: 0;
}
.my-account .recommend .btn .img {
font-size: 35px;
color: #303a47;
line-height: 45px;
color: #345068;
}
.my-account .recommend .btn .text {
font-size: 16px;
font-weight: bold;
color: #303a47;
color: #345068;
}
.content {
@ -82,9 +100,13 @@
}
.content .card {
border: none;
border-radius: 0;
margin-bottom: 15px;
}
.content .card .card-body {
padding: 5px 15px;
}
.content .card .item {
.content .card .card-body .item {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -94,10 +116,29 @@
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #8d8d8d;
width: 100%;
font-size: 15px;
}
.content .card .item i, .content .card .item svg {
.content .card .card-body .item + .item {
border-top: 1px solid #e3e3e3;
}
.content .card .card-body .item .left {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 8px 0;
font-weight: bold;
}
.content .card .card-body .item .right {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
color: #666;
}
.content .card .card-body .item .right a {
color: #666;
}
.content .card .card-body .item i, .content .card .card-body .item svg {
color: #839eb6;
margin-right: 6px;
}

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

@ -1,47 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
<json>
<![CDATA[
{
"fontFamily": "lg",
"majorVersion": 1,
"minorVersion": 0,
"fontURL": "https://github.com/sachinchoolur/lightGallery",
"copyright": "sachin",
"license": "MLT",
"licenseURL": "http://opensource.org/licenses/MIT",
"version": "Version 1.0",
"fontId": "lg",
"psName": "lg",
"subFamily": "Regular",
"fullName": "lg",
"description": "Font generated by IcoMoon."
}
]]>
</json>
</metadata>
<defs>
<font id="lg" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe01a;" glyph-name="pause_circle_outline" data-tags="pause_circle_outline" d="M554 256.667v340h86v-340h-86zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM384 256.667v340h86v-340h-86z" />
<glyph unicode="&#xe01d;" glyph-name="play_circle_outline" data-tags="play_circle_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM426 234.667v384l256-192z" />
<glyph unicode="&#xe033;" glyph-name="stack-2" data-tags="stack-2" d="M384 853.334h426.667q53 0 90.5-37.5t37.5-90.5v-426.667q0-53-37.5-90.5t-90.5-37.5h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 53 37.5 90.5t90.5 37.5zM170.667 675.334v-547.333q0-17.667 12.5-30.167t30.167-12.5h547.333q-13.333-37.667-46.333-61.5t-74.333-23.833h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 41.333 23.833 74.333t61.5 46.333zM810.667 768h-426.667q-17.667 0-30.167-12.5t-12.5-30.167v-426.667q0-17.667 12.5-30.167t30.167-12.5h426.667q17.667 0 30.167 12.5t12.5 30.167v426.667q0 17.667-12.5 30.167t-30.167 12.5z" />
<glyph unicode="&#xe070;" glyph-name="clear" data-tags="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
<glyph unicode="&#xe094;" glyph-name="arrow-left" data-tags="arrow-left" d="M426.667 768q17.667 0 30.167-12.5t12.5-30.167q0-18-12.667-30.333l-225.667-225.667h665q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-665l225.667-225.667q12.667-12.333 12.667-30.333 0-17.667-12.5-30.167t-30.167-12.5q-18 0-30.333 12.333l-298.667 298.667q-12.333 13-12.333 30.333t12.333 30.333l298.667 298.667q12.667 12.333 30.333 12.333z" />
<glyph unicode="&#xe095;" glyph-name="arrow-right" data-tags="arrow-right" d="M597.333 768q18 0 30.333-12.333l298.667-298.667q12.333-12.333 12.333-30.333t-12.333-30.333l-298.667-298.667q-12.333-12.333-30.333-12.333-18.333 0-30.5 12.167t-12.167 30.5q0 18 12.333 30.333l226 225.667h-665q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h665l-226 225.667q-12.333 12.333-12.333 30.333 0 18.333 12.167 30.5t30.5 12.167z" />
<glyph unicode="&#xe0f2;" glyph-name="vertical_align_bottom" data-tags="vertical_align_bottom" d="M170 128.667h684v-86h-684v86zM682 384.667l-170-172-170 172h128v426h84v-426h128z" />
<glyph unicode="&#xe1ff;" glyph-name="apps" data-tags="apps" d="M682 84.667v172h172v-172h-172zM682 340.667v172h172v-172h-172zM426 596.667v172h172v-172h-172zM682 768.667h172v-172h-172v172zM426 340.667v172h172v-172h-172zM170 340.667v172h172v-172h-172zM170 84.667v172h172v-172h-172zM426 84.667v172h172v-172h-172zM170 596.667v172h172v-172h-172z" />
<glyph unicode="&#xe20c;" glyph-name="fullscreen" data-tags="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
<glyph unicode="&#xe20d;" glyph-name="fullscreen_exit" data-tags="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
<glyph unicode="&#xe311;" glyph-name="zoom_in" data-tags="zoom_in" d="M512 512.667h-86v-86h-42v86h-86v42h86v86h42v-86h86v-42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
<glyph unicode="&#xe312;" glyph-name="zoom_out" data-tags="zoom_out" d="M298 554.667h214v-42h-214v42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
<glyph unicode="&#xe80d;" glyph-name="share" data-tags="share" d="M768 252.667c68 0 124-56 124-124s-56-126-124-126-124 58-124 126c0 10 0 20 2 28l-302 176c-24-22-54-34-88-34-70 0-128 58-128 128s58 128 128 128c34 0 64-12 88-34l300 174c-2 10-4 20-4 30 0 70 58 128 128 128s128-58 128-128-58-128-128-128c-34 0-64 14-88 36l-300-176c2-10 4-20 4-30s-2-20-4-30l304-176c22 20 52 32 84 32z" />
<glyph unicode="&#xe901;" glyph-name="facebook-with-circle" data-tags="facebook-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM628.429 612.659h-73.882c-8.755 0-18.483-11.52-18.483-26.829v-53.35h92.416l-13.978-76.083h-78.438v-228.403h-87.194v228.403h-79.104v76.083h79.104v44.749c0 64.205 44.544 116.378 105.677 116.378h73.882v-80.947z" />
<glyph unicode="&#xe902;" glyph-name="google-with-circle" data-tags="google+-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM483.686 249.805c-30.874-15.002-64.102-16.589-76.954-16.589-2.458 0-3.84 0-3.84 0s-1.178 0-2.765 0c-20.070 0-119.962 4.608-119.962 95.59 0 89.395 108.8 96.41 142.131 96.41h0.87c-19.251 25.702-15.258 51.61-15.258 51.61-1.69-0.102-4.147-0.205-7.168-0.205-12.544 0-36.762 1.997-57.549 15.411-25.498 16.384-38.4 44.288-38.4 82.893 0 109.107 119.142 113.51 120.32 113.613h118.989v-2.611c0-13.312-23.91-15.923-40.192-18.125-5.53-0.819-16.64-1.894-19.763-3.482 30.157-16.128 35.021-41.421 35.021-79.104 0-42.906-16.794-65.587-34.611-81.51-11.059-9.882-19.712-17.613-19.712-28.006 0-10.189 11.878-20.582 25.702-32.717 22.579-19.917 53.555-47.002 53.555-92.723 0-47.258-20.326-81.050-60.416-100.454zM742.4 460.8h-76.8v-76.8h-51.2v76.8h-76.8v51.2h76.8v76.8h51.2v-76.8h76.8v-51.2zM421.018 401.92c-2.662 0-5.325-0.102-8.038-0.307-22.733-1.69-43.725-10.189-58.88-24.013-15.053-13.619-22.733-30.822-21.658-48.179 2.304-36.403 41.37-57.702 88.832-54.323 46.694 3.379 77.824 30.31 75.571 66.714-2.15 34.202-31.898 60.109-75.827 60.109zM465.766 599.808c-12.39 43.52-32.358 56.422-63.386 56.422-3.328 0-6.707-0.512-9.933-1.382-13.466-3.84-24.166-15.053-30.106-31.744-6.093-16.896-6.451-34.509-1.229-54.579 9.472-35.891 34.97-61.901 60.672-61.901 3.379 0 6.758 0.41 9.933 1.382 28.109 7.885 45.722 50.79 34.048 91.802z" />
<glyph unicode="&#xe903;" glyph-name="pinterest-with-circle" data-tags="pinterest-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM545.638 344.32c-31.539 2.406-44.749 18.022-69.427 32.973-13.568-71.219-30.157-139.52-79.309-175.206-15.206 107.725 22.221 188.518 39.629 274.381-29.645 49.92 3.533 150.323 66.099 125.645 76.954-30.515-66.662-185.6 29.747-205.005 100.659-20.173 141.773 174.694 79.36 237.978-90.214 91.494-262.502 2.099-241.306-128.87 5.12-32 38.246-41.728 13.21-85.914-57.702 12.8-74.957 58.317-72.704 118.989 3.533 99.328 89.242 168.909 175.155 178.483 108.698 12.083 210.688-39.885 224.819-142.182 15.821-115.405-49.101-240.282-165.274-231.27z" />
<glyph unicode="&#xe904;" glyph-name="twitter-with-circle" data-tags="twitter-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM711.936 549.683c0.205-4.198 0.256-8.397 0.256-12.493 0-128-97.331-275.507-275.405-275.507-54.682 0-105.574 15.974-148.378 43.52 7.526-0.922 15.258-1.28 23.091-1.28 45.363 0 87.091 15.411 120.218 41.421-42.342 0.819-78.080 28.774-90.419 67.174 5.888-1.075 11.93-1.69 18.176-1.69 8.806 0 17.408 1.178 25.498 3.379-44.288 8.909-77.67 48.026-77.67 94.925v1.178c13.056-7.219 28.006-11.622 43.878-12.134-26.010 17.408-43.059 47.002-43.059 80.64 0 17.715 4.762 34.406 13.107 48.691 47.77-58.573 119.040-97.075 199.526-101.222-1.69 7.117-2.509 14.49-2.509 22.118 0 53.402 43.315 96.819 96.819 96.819 27.802 0 52.992-11.776 70.656-30.618 22.067 4.403 42.752 12.39 61.44 23.501-7.219-22.579-22.528-41.574-42.547-53.606 19.61 2.406 38.246 7.578 55.603 15.309-12.954-19.405-29.389-36.506-48.282-50.125z" />
</font></defs></svg>

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -1,14 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="slick" horiz-adv-x="512">
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
</font></defs></svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Binary file not shown.

@ -23,7 +23,7 @@ $basicColor: (
cherry:#E31D64,
mintGreen:#f2f8e7,
limeGreen:#94ac5e,
tomatoRed:#F84E59,
tomatoRed:#f85d5d,
earthGold:#BC9F75,
silver:#eeeeee,
gray:#b1b3b6

@ -1,5 +1,7 @@
$normalArr:
(skyBlue, #fff, map-get($basicColor, skyBlue), map-get($basicColor, skyBlue)),
(moBlue, #fff, map-get($basicColor, moBlue), map-get($basicColor, moBlue)),
(darkBlue, #fff, map-get($basicColor, darkBlue), map-get($basicColor, darkBlue)),
(pink, #fff, map-get($basicColor, pink), map-get($basicColor, pink)),
(cherry, #fff, map-get($basicColor, cherry), map-get($basicColor, cherry)),
(limeGreen, #fff, map-get($basicColor, limeGreen), map-get($basicColor, limeGreen)),
@ -8,7 +10,9 @@ $normalArr:
;
$outlineArr:
(skyBlue, 1px, map-get($basicColor, skyBlue), transparent, map-get($basicColor, skyBlue)),
(moBlue, 1px, map-get($basicColor, moBlue), transparent, map-get($basicColor, moBlue)),
(darkBlue, 1px, map-get($basicColor, darkBlue), transparent, map-get($basicColor, darkBlue)),
(pink, 1px, map-get($basicColor, pink), transparent, map-get($basicColor, pink)),
(cherry, 1px, map-get($basicColor, cherry), transparent, map-get($basicColor, cherry)),
(limeGreen, 1px, map-get($basicColor, limeGreen), transparent, map-get($basicColor, limeGreen)),

@ -1,36 +1,42 @@
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');
.my-account {
position: relative;
width: 100%;
padding: 20px;
padding: 20px 15px;
.avatar{
display: flex;
justify-content: space-between;
align-items: center;
.imgCnt{
width:80px;
height: 80px;
min-width: 80px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
img{
width:100%;
height: 100%;
object-fit: cover;
}
}
.info{
.name{
font-size: 20px;
font-weight: bold;
color: #303a47;
}
.conpany{
font-size: 15px;
}
}
.left{
display: flex;
align-items: center;
flex: 1 0 0;
.imgCnt{
width:80px;
height: 80px;
min-width: 80px;
border-radius: 50%;
border:2px #fff solid;
overflow: hidden;
margin-right: 15px;
img{
width:100%;
height: 100%;
object-fit: cover;
}
}
.info{
.name{
font-weight: bold;
color: #303a47;
}
.conpany{
margin-top: 5px;
}
}
}
.right{
flex: 0 0 auto;
}
}
.recommend{
display: flex;
@ -45,15 +51,16 @@
width:30%;
height: 100px;
background-color: #fff;
border: 1px #96989a solid;
border-radius: 0;
.img{
font-size: 35px;
color: #303a47;
line-height: 45px;
color: #345068;
}
.text{
font-size: 16px;
font-weight: bold;
color: #303a47;
color: #345068;
}
}
}
@ -64,20 +71,39 @@
background-color: #b2c4ce;
.card {
border: none;
border-radius: 0;
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #8d8d8d;
font-size: 15px;
i,svg{
color: #839eb6;
// border-radius: 0;
margin-bottom: 15px;
.card-body{
padding: 5px 15px;
.item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width:100%;
font-size: 15px;
&+.item{
border-top: 1px solid #e3e3e3;
}
.left{
flex: 0 0 auto;
padding: 8px 0;
font-weight: bold;
}
.right{
flex: 1 0 0;
color: #666;
a{
color: #666;
}
}
i,svg{
color: #839eb6;
margin-right: 6px;
}
}
}
}
}

File diff suppressed because one or more lines are too long

@ -11,19 +11,22 @@ import { useStore } from 'vuex';
import { showToast,showSuccessToast } from 'vant';
import { Dialog } from 'vant';
import { NoticeBar } from 'vant';
// import Footer from '@/components/Footer.vue'
import { login, bindCard } from '@/api'
import { login, bindCard , getMovie } from '@/api'
const router = useRouter()
const route = useRoute()
const store = useStore()
const popShow = ref(true)
const popShow = ref(false)
const showShare = ref(false)
const showNfcQrcode = ref(false)
const checked = ref(true);
const imageUrl = ref(import.meta.env.VITE_APP_IMAGE_URL)
const userLevel = {
@ -35,11 +38,6 @@ const userLevel = {
const is_due = ref(false)
// 使useCountDown
const countDown = useCountDown({time: 1 * 1000});
const current = countDown.current;
countDown.start();
onBeforeMount(async () => {
const liff = window.liff;
try {
@ -138,6 +136,31 @@ onBeforeMount(async () => {
})
let adData = await getMovie();
if (adData.code === 200) {
popShow.value = true;
console.log(adData.data.play_sec)
}
// 使useCountDown
// const countDown = useCountDown({time: 1000 * adData.data.play_sec});
// const current = countDown.current;
// countDown.start();
// const test = computed(() => {
// return store.state.user.userInfo
// })
const userInfo = computed(() => {
return store.state.user.userInfo
})
@ -209,150 +232,210 @@ const handleLogout = () => {
<a href="javascript:;"><h5 class="umoney phone">歡迎來到會員中心</h5></a>
</div>
<van-notice-bar color="#ffffff" background="#e05338" left-icon="info-o" mode="link">測試文字測試文字測試文字測試文字測試文字測試文字</van-notice-bar>
<van-notice-bar color="#ffffff" background="#e05338" left-icon="volume" mode="link">測試文字測試文字測試文字測試文字測試文字測試文字</van-notice-bar>
<div class="my-account">
<div class="row align-items-center gx-0">
<div class="col">
<div class="avatar">
<div class="imgCnt">
<img :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
</div>
<div class="info">
<div class="name">{{ userInfo.real_name }}</div>
<div class="conpany">{{ userInfo.company }}</div>
</div>
<div class="avatar">
<div class="left">
<div class="imgCnt shadow-sm">
<img :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
</div>
<div class="info">
<h4 class="name">{{ userInfo.real_name }}</h4>
<h6 class="conpany">{{ userInfo.company }}</h6>
</div>
</div>
<div class="col-auto">
<div class="btn" @click="handleLogout"><h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4></div>
<div class="btn" @click="handleLogout"><h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4></div>
<div class="right">
<div class="btn btn-sm text-darkBlue" @click="handleLogout"><h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4></div>
<div class="btn btn-sm text-darkBlue" @click="handleLogout"><h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4></div>
</div>
</div>
<div class="recommend">
<div class="btn btn-outline-moBlue" @click="router.push('/shop')">
<div class="img"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></div>
<h6 class="text">立即開通</h6>
<div class="btn btn-outline-skyBlue" @click="router.push('/shop')">
<div class="img"><i class="fa-solid fa-cart-arrow-down"></i></div>
<div class="text">立即開通</div>
</div>
<div class="btn btn-outline-moBlue" @click="goCardEdit">
<div class="img"><i class="fa fa-id-card-o" aria-hidden="true"></i></div>
<h6 class="text">商務卡片</h6>
<div class="btn btn-outline-skyBlue" @click="goCardEdit">
<div class="img"><i class="fa-solid fa-id-card"></i></div>
<div class="text">商務卡片</div>
</div>
<div class="btn btn-outline-moBlue">
<div class="img"><i class="fa fa-address-book-o" aria-hidden="true"></i></div>
<h6 class="text">通訊錄</h6>
<div class="btn btn-outline-skyBlue">
<div class="img"><i class="fa-solid fa-address-book"></i></div>
<div class="text">通訊錄</div>
</div>
</div>
</div>
<div class="bwtFlex px-3 mb-2">
<h5 class="font-weight-bold text-darkBlue">會員資料</h5>
<a href="javascript:;" @click="router.push('/member')"><h5><i class="fa fa-cog text-darkBlue" aria-hidden="true"></i></h5></a>
</div>
<div class="content">
<div class="card" v-if="userInfo">
<div class="container">
<div class="row item">
<div class="col-auto">
<h6 class="font-weight-bold"><i class="fa fa-address-book-o" aria-hidden="true"></i> 建立日期</h6>
</div>
<div class="col text-right">
{{ userInfo.create_time }}
</div>
<div class="card shadow" v-if="userInfo">
<div class="card-body">
<div class="item">
<div class="left">
<i class="fa-regular fa-fw fa-calendar-days"></i> 建立日期
</div>
<div class="right text-right">
{{ userInfo.create_time }}
</div>
</div>
<div class="row item">
<div class="col-auto">
<h6 class="font-weight-bold"><i class="fa fa-address-book-o" aria-hidden="true"></i> 會員編號</h6>
</div>
<div class="col text-right">
{{ userInfo.user_id }}<span class="cp-btn" @click="doCopyUid"></span>
</div>
<div class="item">
<div class="left">
<i class="fa-solid fa-fw fa-fingerprint"></i> 會員編號
</div>
<div class="right text-right">
<a href="javascript:;" @click="doCopyUid">{{ userInfo.user_id }}</a>
<!-- <span class="btn btn-sm btn-tomatoRed" @click="doCopyUid"></span> -->
</div>
</div>
<div class="item">
<div class="left">
<i class="fa-solid fa-fw fa-layer-group"></i> 會員等級
</div>
<div class="right text-right">
{{ userInfo.level_name }}
</div>
</div>
<div class="item">
<div class="left">
<i class="fa-regular fa-fw fa-calendar-check"></i> 使用期限
</div>
<div class="right text-right">
{{ overdue }}
</div>
<!-- <div class="col text-right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
<div class="col text-right input-sn" @click="router.push('/shop/inputsn')" v-else>,<br/>點此輸入購買序號</div> -->
</div>
<div class="item">
<div class="left">
<i class="fa-solid fa-fw fa-qrcode"></i> 會員QRcode
</div>
<div class="right text-right">
<div class="btn btn-sm btn-darkBlue" @click="handleShowNfc"></div>
</div>
</div>
<div class="item">
<div class="left">
<i class="fa-solid fa-fw fa-link"></i> 名片連結
</div>
<div class="right text-right">
<div class="btn btn-sm btn-tomatoRed" @click="doCopy"></div>
</div>
</div>
</div>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 公司名稱</h6></div>
<div class="col text-right">
{{ userInfo.company }}
</div>
<div class="card shadow" v-if="userInfo">
<div class="card-body">
<div class="item">
<div class="left">
<i class="fa-regular fa-fw fa-building"></i> 職稱
</div>
<div class="right text-right">
{{ userInfo.title }}
</div>
</div>
</a>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 姓名</h6></div>
<div class="col text-right">
{{ userInfo.real_name }}
<div class="item">
<div class="left">
<i class="fa-solid fa-fw fa-mobile-retro"></i> 手機
</div>
<div class="right text-right">
{{ userInfo.phone }}
</div>
</div>
</a>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 會員等級</h6></div>
<div class="col text-right">
{{ userInfo.level_name }}
<div class="item">
<div class="left">
<i class="fa-solid fa-fw fa-phone"></i> 市話
</div>
<div class="right text-right">
{{ userInfo.tel }}
</div>
</div>
</a>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 使用期限</h6></div>
<div class="col text-right">
{{ overdue }}
<div class="item">
<div class="left">
<i class="fa-regular fa-fw fa-envelope"></i> Email
</div>
<div class="right text-right">
{{ userInfo.email }}
</div>
<!-- <div class="col text-right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
<div class="col text-right input-sn" @click="router.push('/shop/inputsn')" v-else>,<br/>點此輸入購買序號</div> -->
</div>
</a>
<a href="javascript:;" class="item">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 名片連結</h6></div>
<div class="col text-right" style="color: #fe6867" @click="doCopy">
點擊複製您的連結
<div class="item">
<div class="left">
<i class="fa-solid fa-fw fa-location-dot"></i> 住址
</div>
<div class="right text-right">
{{ userInfo.address }}
</div>
</div>
</div>
</div>
<div class="card shadow" v-if="userInfo">
<div class="card-body">
<div class="item">
<div class="left">
<i class="fa-solid fa-fw fa-user-tie"></i> 授權商務卡片編輯
</div>
<div class="right text-right">
<a href="javascript:;" @click="$router.push('/auth/auth')"></a>
</div>
</div>
</a>
<a href="javascript:;" class="item" @click="$router.push('/auth/auth')">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 授權商務卡片編輯</h6></div>
<div class="col text-right">
授權
<div class="item">
<div class="left">
<i class="fa-regular fa-fw fa-handshake"></i> 代客編輯商務卡片
</div>
<div class="right text-right">
<a href="javascript:;" @click="$router.push('/auth/getauth')"></a>
</div>
</div>
</a>
<a href="javascript:;" class="item" @click="$router.push('/auth/getauth')">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 代客編輯商務卡片</h6></div>
<div class="col text-right">
編輯
<div class="item" v-if="userInfo.uniqid">
<div class="left">
<i class="fa-solid fa-fw fa-award"></i> 綁定UTel淘金購會員
</div>
<div class="right text-right">
<a href="javascript:;" @click="bindTggo"></a>
</div>
</div>
</a>
<a href="javascript:;" class="item" v-if="userInfo.uniqid">
<div class="row w-100">
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 綁定UTel淘金購會員</h6></div>
<div class="col text-right" style="color: #fe6867" @click="bindTggo">
點擊後前往綁定
<div class="item">
<div class="left">
<i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片帶廣告
</div>
<div class="right text-right">
<van-switch v-model="checked" size="18px" active-color="#345068" inactive-color="#888888"/>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- <Footer /> -->
<van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text=""
:show-confirm-button="false">
<div class="qrcode">
<div class="qrcode text-center pt-3">
<qrcode-vue :value="userInfo.nfcurl" :size="200" level="M" />
</div>
</van-dialog>
<van-overlay :show="popShow" z-index="1000" :style="{background:'rgba(0, 0, 0, .85)'}">
<div class="wrapper" @click.stop>
<div class="block">
<span class="van-icon van-icon-cross" @click="popShow = false" v-show="current.seconds == 0"></span>
{{ current.seconds }}
<div class="clip" @click="popShow = false">
<span class="van-icon van-icon-cross"></span>
<van-count-down :style="{color:'#fff'}" @click="popShow = false" @finish="popShow = true" :auto-start="true" :time="10000" format="ss 秒"/>
</div>
<div class="top">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/dUro-rg2Uz8?si=K5lDwRcM1NfNCEUR" title="YouTube video player" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="bottom">
<h5 class="title">測試文字測試文字測試文字</h5>
<h6 class="desc ellipsis e3">測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字</h6>
<div class="btn btn-light form-control font-weight-bold" @click="router.push('/shop')"><i class="fa-solid fa-fw fa-link"></i> 前往連結</div>
</div>
<iframe width="100%" style="aspect-ratio: 16/9;" src="https://www.youtube.com/embed/dUro-rg2Uz8?si=K5lDwRcM1NfNCEUR" title="YouTube video player" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</van-overlay>
</div>
@ -362,5 +445,46 @@ const handleLogout = () => {
<style src="@/assets/css/page/index.css"></style>
<style lang="less" scoped>
.wrapper{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
.clip{
position:absolute;
display: flex;
align-items: center;
color:#ffffff;
background-color: rgba(#000000,.8);
top:5px;
right:5px;
margin-left:auto;
padding: 10px;
cursor: pointer;
z-index: 1005;
}
.top{
position: relative;
display: flex;
align-items: center;
width:100%;
flex: 1 0 0;
}
.bottom{
position: relative;
flex: 0 0 auto;
padding: 15px;
.title{
color: #ffffff;
font-weight: bold;
margin-bottom: 15px;
}
.desc{
color: #ffffff;
margin-bottom: 30px;
}
}
}
</style>

@ -1,13 +1,201 @@
<script>
import _ from 'lodash'
import axios from 'axios'
import { ref , nextTick} from 'vue'
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';
import Footer from '@/components/Footer.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { showLoadingToast,showSuccessToast } from 'vant';
import { getUserInfo , updateCard , getMovie } from '@/api'
const URL = window.URL || window.webkitURL;
export default {
name: 'EditForm',
components: {
Footer,
Cropper
},
async setup(){
const store = useStore()
const router = useRouter()
const form = ref({addon:[]})
const fileList = ref([]);
const myCrop = ref(null)
const active = ref(0)
const showChangeIcon = ref(false)
const crop = ref({
show: false,
img: null,
})
const validatorUrl = (val) => {
if(val.length>0){
return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val)
}else{
return true
}
};
const validatorTel = (val) => {
if(val.length>0){
return /(\d{2,3}-?|\(\d{2,3}\))\d{3,4}-?\d{4}/.test(val)
}else{
return true
}
};
// onMounted(async ()=>{
let userRes = await getUserInfo()
if(userRes.code===200){
form.value = userRes.data
}else{
}
// })
if (userRes.data.nfc_addon && (userRes.data.nfc_addon.length > 0)) {
form.value.addon = JSON.parse(userRes.data.nfc_addon)
}
const onCrop = () => {
const { canvas } = myCrop.value.getResult();
if (canvas) {
const imgFile = new FormData();
canvas.toBlob(async (blob) => {
let ufile = new File([blob], "image.jpg");
imgFile.append("user_id", form.value.user_id)
imgFile.append("fileType", "IMAGE")
imgFile.append('file', ufile)
crop.value.show = false
showLoadingToast({
duration: 0,
message: '圖片上傳中...',
forbidClick: true,
});
let res = await axios.post(
`${import.meta.env.VITE_APP_API_URL}/user/uploadAvatar`,
imgFile,
{
}
)
if (res.data.code == 200) {
form.value.avatar = res.data.data
showSuccessToast('上傳成功');
}else{
showToast.fail('上傳失敗');
}
}, 'image/jpeg');
}
return
}
const onClose = () =>{
crop.value.show = false
}
const afterRead = async(file, name) => {
crop.value.show = true
const ofile = file.file
crop.value.img = URL.createObjectURL(ofile);
// crop.value.img = ofile
return
};
const onAddBtn = () => {
if(form.value.addon){
form.value.addon.push({icon:'',name:'',link:''})
}else{
form.value.addon = [{icon:'',name:'',link:''}]
}
}
const onDelBtn = (index) => {
form.value.addon.splice(index, 1)
}
const onMoveBtn = (type, index) => {
if (type === 0) {
if (index !== 0) {
[form.value.addon[index], form.value.addon[index - 1]] = [form.value.addon[index - 1], form.value.addon[index]]
}
} else {
if (index + 1 !== form.value.addon.length) {
[form.value.addon[index + 1], form.value.addon[index]] = [form.value.addon[index], form.value.addon[index + 1]]
}
}
}
const onSubmit = async () => {
showLoadingToast({
duration: 0,
message: '資料更新中...',
forbidClick: true,
});
let res = await updateCard(form.value)
if(res.code===200){
showSuccessToast('更新成功')
store.commit('user/setUserInfo',form.value)
router.push('/')
}else{
showToast.fail('更新失敗')
}
};
return {
form,
fileList,
crop,
myCrop,
active,
showChangeIcon,
onAddBtn,
onDelBtn,
onMoveBtn,
validatorUrl,
validatorTel,
onCrop,
onClose,
afterRead,
onSubmit
}
}
}
</script>
<template>
<div class="member-container">
<van-nav-bar title="個人資料修改" right-text="" @click-right="$router.push('/')" />
<van-nav-bar title="個人資料修改" right-text="" @click-right="$router.push('/')" />
<van-tabs :lazy-render="true" v-model:active="active">
<van-tab title="基本資料">
</van-tab>
<van-tab title="更多連結">
</van-tab>
</van-tabs>
<van-tabs :lazy-render="true" v-model:active="active">
<van-tab title="基本資料">
</van-tab>
<van-tab title="更多連結">
</van-tab>
</van-tabs>
<van-form @submit="onSubmit">
<van-cell-group inset v-show="active === 0">
@ -194,193 +382,7 @@
</div>
</template>
<script>
import _ from 'lodash'
import axios from 'axios'
import { ref , nextTick} from 'vue'
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';
import Footer from '@/components/Footer.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { showLoadingToast,showSuccessToast } from 'vant';
import { getUserInfo , updateCard } from '@/api'
const URL = window.URL || window.webkitURL;
export default {
name: 'EditForm',
components: {
Footer,
Cropper
},
async setup(){
const store = useStore()
const router = useRouter()
const form = ref({addon:[]})
const fileList = ref([]);
const myCrop = ref(null)
const active = ref(0)
const showChangeIcon = ref(false)
const crop = ref({
show: false,
img: null,
})
const validatorUrl = (val) => {
if(val.length>0){
return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val)
}else{
return true
}
};
const validatorTel = (val) => {
if(val.length>0){
return /(\d{2,3}-?|\(\d{2,3}\))\d{3,4}-?\d{4}/.test(val)
}else{
return true
}
};
// onMounted(async ()=>{
let userRes = await getUserInfo()
if(userRes.code===200){
form.value = userRes.data
}else{
}
// })
if (userRes.data.nfc_addon && (userRes.data.nfc_addon.length > 0)) {
form.value.addon = JSON.parse(userRes.data.nfc_addon)
}
const onCrop = () => {
const { canvas } = myCrop.value.getResult();
if (canvas) {
const imgFile = new FormData();
canvas.toBlob(async (blob) => {
let ufile = new File([blob], "image.jpg");
imgFile.append("user_id", form.value.user_id)
imgFile.append("fileType", "IMAGE")
imgFile.append('file', ufile)
crop.value.show = false
showLoadingToast({
duration: 0,
message: '圖片上傳中...',
forbidClick: true,
});
let res = await axios.post(
`${import.meta.env.VITE_APP_API_URL}/user/uploadAvatar`,
imgFile,
{
}
)
if (res.data.code == 200) {
form.value.avatar = res.data.data
showSuccessToast('上傳成功');
}else{
showToast.fail('上傳失敗');
}
}, 'image/jpeg');
}
return
}
const onClose = () =>{
crop.value.show = false
}
const afterRead = async(file, name) => {
crop.value.show = true
const ofile = file.file
crop.value.img = URL.createObjectURL(ofile);
// crop.value.img = ofile
return
};
const onAddBtn = () => {
if(form.value.addon){
form.value.addon.push({icon:'',name:'',link:''})
}else{
form.value.addon = [{icon:'',name:'',link:''}]
}
}
const onDelBtn = (index) => {
form.value.addon.splice(index, 1)
}
const onMoveBtn = (type, index) => {
if (type === 0) {
if (index !== 0) {
[form.value.addon[index], form.value.addon[index - 1]] = [form.value.addon[index - 1], form.value.addon[index]]
}
} else {
if (index + 1 !== form.value.addon.length) {
[form.value.addon[index + 1], form.value.addon[index]] = [form.value.addon[index], form.value.addon[index + 1]]
}
}
}
const onSubmit = async () => {
showLoadingToast({
duration: 0,
message: '資料更新中...',
forbidClick: true,
});
let res = await updateCard(form.value)
if(res.code===200){
showSuccessToast('更新成功')
store.commit('user/setUserInfo',form.value)
router.push('/')
}else{
showToast.fail('更新失敗')
}
};
return {
form,
fileList,
crop,
myCrop,
active,
showChangeIcon,
onAddBtn,
onDelBtn,
onMoveBtn,
validatorUrl,
validatorTel,
onCrop,
onClose,
afterRead,
onSubmit
}
}
}
</script>
<style lang="less" scoped>
.container{

Loading…
Cancel
Save