fengchengzhi
7 years ago
20 changed files with 1579 additions and 122 deletions
Unified View
Diff Options
-
106build/webpack.base.conf.js
-
1index.html
-
253package-lock.json
-
12package.json
-
19src/api/home.js
-
BINsrc/assets/images/home/coupon.png
-
BINsrc/assets/images/home/new-card.png
-
BINsrc/assets/images/home/new-card2.png
-
BINsrc/assets/images/icon/logo.png
-
BINsrc/assets/images/icon/position.png
-
618src/assets/styles/swiper.css
-
5src/assets/styles/weui.min.css
-
6src/common/weui.js
-
7src/main.js
-
28src/models/home-model.js
-
2src/models/utils-model.js
-
14src/router/index.js
-
137src/view/demo.vue
-
353src/view/home.vue
-
140src/view/poster.vue
@ -0,0 +1,19 @@ |
|||||
|
|
||||
|
export default { |
||||
|
//获取商品列表
|
||||
|
getGoods: { |
||||
|
method: 'GET', |
||||
|
url: '/mall/web/goods/list', |
||||
|
}, |
||||
|
//获取地址数据
|
||||
|
getAddress:{ |
||||
|
method: 'GET', |
||||
|
url:'/web/address/openRegion' |
||||
|
}, |
||||
|
//获取默认地址
|
||||
|
getdefaultAddress: { |
||||
|
method: 'GET', |
||||
|
url: '/mall/web/defaultDistrict' |
||||
|
} |
||||
|
|
||||
|
} |
||||
| Before | After |
|---|---|
|
|
| Width: 1038 | Height: 191 | Size: 101 KiB |
| Before | After |
|---|---|
|
|
| Width: 1020 | Height: 59 | Size: 13 KiB |
| Before | After |
|---|---|
|
|
| Width: 1020 | Height: 59 | Size: 12 KiB |
| Before | After |
|---|---|
|
|
| Width: 266 | Height: 45 | Size: 4.7 KiB |
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 38 | Size: 1.6 KiB |
@ -0,0 +1,618 @@ |
|||||
|
/** |
||||
|
* Swiper 4.3.5 |
||||
|
* Most modern mobile touch slider and framework with hardware accelerated transitions |
||||
|
* http://www.idangero.us/swiper/ |
||||
|
* |
||||
|
* Copyright 2014-2018 Vladimir Kharlampidi |
||||
|
* |
||||
|
* Released under the MIT License |
||||
|
* |
||||
|
* Released on: July 31, 2018 |
||||
|
*/ |
||||
|
.swiper-container { |
||||
|
margin: 0 auto; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
list-style: none; |
||||
|
padding: 0; |
||||
|
/* Fix of Webkit flickering */ |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.swiper-container-no-flexbox .swiper-slide { |
||||
|
float: left; |
||||
|
} |
||||
|
.swiper-container-vertical > .swiper-wrapper { |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-box-direction: normal; |
||||
|
-webkit-flex-direction: column; |
||||
|
-ms-flex-direction: column; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.swiper-wrapper { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 1; |
||||
|
display: -webkit-box; |
||||
|
display: -webkit-flex; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-transition-property: -webkit-transform; |
||||
|
transition-property: -webkit-transform; |
||||
|
-o-transition-property: transform; |
||||
|
transition-property: transform; |
||||
|
transition-property: transform, -webkit-transform; |
||||
|
-webkit-box-sizing: content-box; |
||||
|
box-sizing: content-box; |
||||
|
} |
||||
|
.swiper-container-android .swiper-slide, |
||||
|
.swiper-wrapper { |
||||
|
-webkit-transform: translate3d(0px, 0, 0); |
||||
|
transform: translate3d(0px, 0, 0); |
||||
|
} |
||||
|
.swiper-container-multirow > .swiper-wrapper { |
||||
|
-webkit-flex-wrap: wrap; |
||||
|
-ms-flex-wrap: wrap; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
.swiper-container-free-mode > .swiper-wrapper { |
||||
|
-webkit-transition-timing-function: ease-out; |
||||
|
-o-transition-timing-function: ease-out; |
||||
|
transition-timing-function: ease-out; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.swiper-slide { |
||||
|
-webkit-flex-shrink: 0; |
||||
|
-ms-flex-negative: 0; |
||||
|
flex-shrink: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
-webkit-transition-property: -webkit-transform; |
||||
|
transition-property: -webkit-transform; |
||||
|
-o-transition-property: transform; |
||||
|
transition-property: transform; |
||||
|
transition-property: transform, -webkit-transform; |
||||
|
} |
||||
|
.swiper-invisible-blank-slide { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
/* Auto Height */ |
||||
|
.swiper-container-autoheight, |
||||
|
.swiper-container-autoheight .swiper-slide { |
||||
|
height: auto; |
||||
|
} |
||||
|
.swiper-container-autoheight .swiper-wrapper { |
||||
|
-webkit-box-align: start; |
||||
|
-webkit-align-items: flex-start; |
||||
|
-ms-flex-align: start; |
||||
|
align-items: flex-start; |
||||
|
-webkit-transition-property: height, -webkit-transform; |
||||
|
transition-property: height, -webkit-transform; |
||||
|
-o-transition-property: transform, height; |
||||
|
transition-property: transform, height; |
||||
|
transition-property: transform, height, -webkit-transform; |
||||
|
} |
||||
|
/* 3D Effects */ |
||||
|
.swiper-container-3d { |
||||
|
-webkit-perspective: 1200px; |
||||
|
perspective: 1200px; |
||||
|
} |
||||
|
.swiper-container-3d .swiper-wrapper, |
||||
|
.swiper-container-3d .swiper-slide, |
||||
|
.swiper-container-3d .swiper-slide-shadow-left, |
||||
|
.swiper-container-3d .swiper-slide-shadow-right, |
||||
|
.swiper-container-3d .swiper-slide-shadow-top, |
||||
|
.swiper-container-3d .swiper-slide-shadow-bottom, |
||||
|
.swiper-container-3d .swiper-cube-shadow { |
||||
|
-webkit-transform-style: preserve-3d; |
||||
|
transform-style: preserve-3d; |
||||
|
} |
||||
|
.swiper-container-3d .swiper-slide-shadow-left, |
||||
|
.swiper-container-3d .swiper-slide-shadow-right, |
||||
|
.swiper-container-3d .swiper-slide-shadow-top, |
||||
|
.swiper-container-3d .swiper-slide-shadow-bottom { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
pointer-events: none; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
.swiper-container-3d .swiper-slide-shadow-left { |
||||
|
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); |
||||
|
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
} |
||||
|
.swiper-container-3d .swiper-slide-shadow-right { |
||||
|
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); |
||||
|
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
} |
||||
|
.swiper-container-3d .swiper-slide-shadow-top { |
||||
|
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); |
||||
|
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
} |
||||
|
.swiper-container-3d .swiper-slide-shadow-bottom { |
||||
|
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); |
||||
|
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
||||
|
} |
||||
|
/* IE10 Windows Phone 8 Fixes */ |
||||
|
.swiper-container-wp8-horizontal, |
||||
|
.swiper-container-wp8-horizontal > .swiper-wrapper { |
||||
|
-ms-touch-action: pan-y; |
||||
|
touch-action: pan-y; |
||||
|
} |
||||
|
.swiper-container-wp8-vertical, |
||||
|
.swiper-container-wp8-vertical > .swiper-wrapper { |
||||
|
-ms-touch-action: pan-x; |
||||
|
touch-action: pan-x; |
||||
|
} |
||||
|
.swiper-button-prev, |
||||
|
.swiper-button-next { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
width: 27px; |
||||
|
height: 44px; |
||||
|
margin-top: -22px; |
||||
|
z-index: 10; |
||||
|
cursor: pointer; |
||||
|
background-size: 27px 44px; |
||||
|
background-position: center; |
||||
|
background-repeat: no-repeat; |
||||
|
} |
||||
|
.swiper-button-prev.swiper-button-disabled, |
||||
|
.swiper-button-next.swiper-button-disabled { |
||||
|
opacity: 0.35; |
||||
|
cursor: auto; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.swiper-button-prev, |
||||
|
.swiper-container-rtl .swiper-button-next { |
||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); |
||||
|
left: 10px; |
||||
|
right: auto; |
||||
|
} |
||||
|
.swiper-button-next, |
||||
|
.swiper-container-rtl .swiper-button-prev { |
||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); |
||||
|
right: 10px; |
||||
|
left: auto; |
||||
|
} |
||||
|
.swiper-button-prev.swiper-button-white, |
||||
|
.swiper-container-rtl .swiper-button-next.swiper-button-white { |
||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); |
||||
|
} |
||||
|
.swiper-button-next.swiper-button-white, |
||||
|
.swiper-container-rtl .swiper-button-prev.swiper-button-white { |
||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); |
||||
|
} |
||||
|
.swiper-button-prev.swiper-button-black, |
||||
|
.swiper-container-rtl .swiper-button-next.swiper-button-black { |
||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); |
||||
|
} |
||||
|
.swiper-button-next.swiper-button-black, |
||||
|
.swiper-container-rtl .swiper-button-prev.swiper-button-black { |
||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); |
||||
|
} |
||||
|
.swiper-button-lock { |
||||
|
display: none; |
||||
|
} |
||||
|
.swiper-pagination { |
||||
|
position: absolute; |
||||
|
text-align: center; |
||||
|
-webkit-transition: 300ms opacity; |
||||
|
-o-transition: 300ms opacity; |
||||
|
transition: 300ms opacity; |
||||
|
-webkit-transform: translate3d(0, 0, 0); |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
z-index: 10; |
||||
|
} |
||||
|
.swiper-pagination.swiper-pagination-hidden { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
/* Common Styles */ |
||||
|
.swiper-pagination-fraction, |
||||
|
.swiper-pagination-custom, |
||||
|
.swiper-container-horizontal > .swiper-pagination-bullets { |
||||
|
bottom: 10px; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
/* Bullets */ |
||||
|
.swiper-pagination-bullets-dynamic { |
||||
|
overflow: hidden; |
||||
|
font-size: 0; |
||||
|
} |
||||
|
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
||||
|
-webkit-transform: scale(0.33); |
||||
|
-ms-transform: scale(0.33); |
||||
|
transform: scale(0.33); |
||||
|
position: relative; |
||||
|
} |
||||
|
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { |
||||
|
-webkit-transform: scale(1); |
||||
|
-ms-transform: scale(1); |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { |
||||
|
-webkit-transform: scale(1); |
||||
|
-ms-transform: scale(1); |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { |
||||
|
-webkit-transform: scale(0.66); |
||||
|
-ms-transform: scale(0.66); |
||||
|
transform: scale(0.66); |
||||
|
} |
||||
|
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { |
||||
|
-webkit-transform: scale(0.33); |
||||
|
-ms-transform: scale(0.33); |
||||
|
transform: scale(0.33); |
||||
|
} |
||||
|
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { |
||||
|
-webkit-transform: scale(0.66); |
||||
|
-ms-transform: scale(0.66); |
||||
|
transform: scale(0.66); |
||||
|
} |
||||
|
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { |
||||
|
-webkit-transform: scale(0.33); |
||||
|
-ms-transform: scale(0.33); |
||||
|
transform: scale(0.33); |
||||
|
} |
||||
|
.swiper-pagination-bullet { |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
display: inline-block; |
||||
|
border-radius: 100%; |
||||
|
background: #000; |
||||
|
opacity: 0.2; |
||||
|
} |
||||
|
button.swiper-pagination-bullet { |
||||
|
border: none; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
-webkit-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
appearance: none; |
||||
|
} |
||||
|
.swiper-pagination-clickable .swiper-pagination-bullet { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.swiper-pagination-bullet-active { |
||||
|
opacity: 1; |
||||
|
background: #007aff; |
||||
|
} |
||||
|
.swiper-container-vertical > .swiper-pagination-bullets { |
||||
|
right: 10px; |
||||
|
top: 50%; |
||||
|
-webkit-transform: translate3d(0px, -50%, 0); |
||||
|
transform: translate3d(0px, -50%, 0); |
||||
|
} |
||||
|
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { |
||||
|
margin: 6px 0; |
||||
|
display: block; |
||||
|
} |
||||
|
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { |
||||
|
top: 50%; |
||||
|
-webkit-transform: translateY(-50%); |
||||
|
-ms-transform: translateY(-50%); |
||||
|
transform: translateY(-50%); |
||||
|
width: 8px; |
||||
|
} |
||||
|
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
||||
|
display: inline-block; |
||||
|
-webkit-transition: 200ms top, 200ms -webkit-transform; |
||||
|
transition: 200ms top, 200ms -webkit-transform; |
||||
|
-o-transition: 200ms transform, 200ms top; |
||||
|
transition: 200ms transform, 200ms top; |
||||
|
transition: 200ms transform, 200ms top, 200ms -webkit-transform; |
||||
|
} |
||||
|
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { |
||||
|
margin: 0 4px; |
||||
|
} |
||||
|
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { |
||||
|
left: 50%; |
||||
|
-webkit-transform: translateX(-50%); |
||||
|
-ms-transform: translateX(-50%); |
||||
|
transform: translateX(-50%); |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
||||
|
-webkit-transition: 200ms left, 200ms -webkit-transform; |
||||
|
transition: 200ms left, 200ms -webkit-transform; |
||||
|
-o-transition: 200ms transform, 200ms left; |
||||
|
transition: 200ms transform, 200ms left; |
||||
|
transition: 200ms transform, 200ms left, 200ms -webkit-transform; |
||||
|
} |
||||
|
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
||||
|
-webkit-transition: 200ms right, 200ms -webkit-transform; |
||||
|
transition: 200ms right, 200ms -webkit-transform; |
||||
|
-o-transition: 200ms transform, 200ms right; |
||||
|
transition: 200ms transform, 200ms right; |
||||
|
transition: 200ms transform, 200ms right, 200ms -webkit-transform; |
||||
|
} |
||||
|
/* Progress */ |
||||
|
.swiper-pagination-progressbar { |
||||
|
background: rgba(0, 0, 0, 0.25); |
||||
|
position: absolute; |
||||
|
} |
||||
|
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { |
||||
|
background: #007aff; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
-webkit-transform: scale(0); |
||||
|
-ms-transform: scale(0); |
||||
|
transform: scale(0); |
||||
|
-webkit-transform-origin: left top; |
||||
|
-ms-transform-origin: left top; |
||||
|
transform-origin: left top; |
||||
|
} |
||||
|
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { |
||||
|
-webkit-transform-origin: right top; |
||||
|
-ms-transform-origin: right top; |
||||
|
transform-origin: right top; |
||||
|
} |
||||
|
.swiper-container-horizontal > .swiper-pagination-progressbar, |
||||
|
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { |
||||
|
width: 100%; |
||||
|
height: 4px; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
.swiper-container-vertical > .swiper-pagination-progressbar, |
||||
|
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { |
||||
|
width: 4px; |
||||
|
height: 100%; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
.swiper-pagination-white .swiper-pagination-bullet-active { |
||||
|
background: #ffffff; |
||||
|
} |
||||
|
.swiper-pagination-progressbar.swiper-pagination-white { |
||||
|
background: rgba(255, 255, 255, 0.25); |
||||
|
} |
||||
|
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { |
||||
|
background: #ffffff; |
||||
|
} |
||||
|
.swiper-pagination-black .swiper-pagination-bullet-active { |
||||
|
background: #000000; |
||||
|
} |
||||
|
.swiper-pagination-progressbar.swiper-pagination-black { |
||||
|
background: rgba(0, 0, 0, 0.25); |
||||
|
} |
||||
|
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { |
||||
|
background: #000000; |
||||
|
} |
||||
|
.swiper-pagination-lock { |
||||
|
display: none; |
||||
|
} |
||||
|
/* Scrollbar */ |
||||
|
.swiper-scrollbar { |
||||
|
border-radius: 10px; |
||||
|
position: relative; |
||||
|
-ms-touch-action: none; |
||||
|
background: rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.swiper-container-horizontal > .swiper-scrollbar { |
||||
|
position: absolute; |
||||
|
left: 1%; |
||||
|
bottom: 3px; |
||||
|
z-index: 50; |
||||
|
height: 5px; |
||||
|
width: 98%; |
||||
|
} |
||||
|
.swiper-container-vertical > .swiper-scrollbar { |
||||
|
position: absolute; |
||||
|
right: 3px; |
||||
|
top: 1%; |
||||
|
z-index: 50; |
||||
|
width: 5px; |
||||
|
height: 98%; |
||||
|
} |
||||
|
.swiper-scrollbar-drag { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 10px; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
.swiper-scrollbar-cursor-drag { |
||||
|
cursor: move; |
||||
|
} |
||||
|
.swiper-scrollbar-lock { |
||||
|
display: none; |
||||
|
} |
||||
|
.swiper-zoom-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: -webkit-box; |
||||
|
display: -webkit-flex; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-pack: center; |
||||
|
-webkit-justify-content: center; |
||||
|
-ms-flex-pack: center; |
||||
|
justify-content: center; |
||||
|
-webkit-box-align: center; |
||||
|
-webkit-align-items: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.swiper-zoom-container > img, |
||||
|
.swiper-zoom-container > svg, |
||||
|
.swiper-zoom-container > canvas { |
||||
|
max-width: 100%; |
||||
|
max-height: 100%; |
||||
|
-o-object-fit: contain; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
.swiper-slide-zoomed { |
||||
|
cursor: move; |
||||
|
} |
||||
|
/* Preloader */ |
||||
|
.swiper-lazy-preloader { |
||||
|
width: 42px; |
||||
|
height: 42px; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
margin-left: -21px; |
||||
|
margin-top: -21px; |
||||
|
z-index: 10; |
||||
|
-webkit-transform-origin: 50%; |
||||
|
-ms-transform-origin: 50%; |
||||
|
transform-origin: 50%; |
||||
|
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; |
||||
|
animation: swiper-preloader-spin 1s steps(12, end) infinite; |
||||
|
} |
||||
|
.swiper-lazy-preloader:after { |
||||
|
display: block; |
||||
|
content: ''; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); |
||||
|
background-position: 50%; |
||||
|
background-size: 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
} |
||||
|
.swiper-lazy-preloader-white:after { |
||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); |
||||
|
} |
||||
|
@-webkit-keyframes swiper-preloader-spin { |
||||
|
100% { |
||||
|
-webkit-transform: rotate(360deg); |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
@keyframes swiper-preloader-spin { |
||||
|
100% { |
||||
|
-webkit-transform: rotate(360deg); |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
/* a11y */ |
||||
|
.swiper-container .swiper-notification { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
pointer-events: none; |
||||
|
opacity: 0; |
||||
|
z-index: -1000; |
||||
|
} |
||||
|
.swiper-container-fade.swiper-container-free-mode .swiper-slide { |
||||
|
-webkit-transition-timing-function: ease-out; |
||||
|
-o-transition-timing-function: ease-out; |
||||
|
transition-timing-function: ease-out; |
||||
|
} |
||||
|
.swiper-container-fade .swiper-slide { |
||||
|
pointer-events: none; |
||||
|
-webkit-transition-property: opacity; |
||||
|
-o-transition-property: opacity; |
||||
|
transition-property: opacity; |
||||
|
} |
||||
|
.swiper-container-fade .swiper-slide .swiper-slide { |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.swiper-container-fade .swiper-slide-active, |
||||
|
.swiper-container-fade .swiper-slide-active .swiper-slide-active { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
.swiper-container-cube { |
||||
|
overflow: visible; |
||||
|
} |
||||
|
.swiper-container-cube .swiper-slide { |
||||
|
pointer-events: none; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
backface-visibility: hidden; |
||||
|
z-index: 1; |
||||
|
visibility: hidden; |
||||
|
-webkit-transform-origin: 0 0; |
||||
|
-ms-transform-origin: 0 0; |
||||
|
transform-origin: 0 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.swiper-container-cube .swiper-slide .swiper-slide { |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.swiper-container-cube.swiper-container-rtl .swiper-slide { |
||||
|
-webkit-transform-origin: 100% 0; |
||||
|
-ms-transform-origin: 100% 0; |
||||
|
transform-origin: 100% 0; |
||||
|
} |
||||
|
.swiper-container-cube .swiper-slide-active, |
||||
|
.swiper-container-cube .swiper-slide-active .swiper-slide-active { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
.swiper-container-cube .swiper-slide-active, |
||||
|
.swiper-container-cube .swiper-slide-next, |
||||
|
.swiper-container-cube .swiper-slide-prev, |
||||
|
.swiper-container-cube .swiper-slide-next + .swiper-slide { |
||||
|
pointer-events: auto; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
.swiper-container-cube .swiper-slide-shadow-top, |
||||
|
.swiper-container-cube .swiper-slide-shadow-bottom, |
||||
|
.swiper-container-cube .swiper-slide-shadow-left, |
||||
|
.swiper-container-cube .swiper-slide-shadow-right { |
||||
|
z-index: 0; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
backface-visibility: hidden; |
||||
|
} |
||||
|
.swiper-container-cube .swiper-cube-shadow { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #000; |
||||
|
opacity: 0.6; |
||||
|
-webkit-filter: blur(50px); |
||||
|
filter: blur(50px); |
||||
|
z-index: 0; |
||||
|
} |
||||
|
.swiper-container-flip { |
||||
|
overflow: visible; |
||||
|
} |
||||
|
.swiper-container-flip .swiper-slide { |
||||
|
pointer-events: none; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
backface-visibility: hidden; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.swiper-container-flip .swiper-slide .swiper-slide { |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.swiper-container-flip .swiper-slide-active, |
||||
|
.swiper-container-flip .swiper-slide-active .swiper-slide-active { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
.swiper-container-flip .swiper-slide-shadow-top, |
||||
|
.swiper-container-flip .swiper-slide-shadow-bottom, |
||||
|
.swiper-container-flip .swiper-slide-shadow-left, |
||||
|
.swiper-container-flip .swiper-slide-shadow-right { |
||||
|
z-index: 0; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
backface-visibility: hidden; |
||||
|
} |
||||
|
.swiper-container-coverflow .swiper-wrapper { |
||||
|
/* Windows 8 IE 10 fix */ |
||||
|
-ms-perspective: 1200px; |
||||
|
} |
||||
5
src/assets/styles/weui.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
6
src/common/weui.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,28 @@ |
|||||
|
|
||||
|
import utilsModel from './utils-model' |
||||
|
import homeApi from '../api/home' |
||||
|
|
||||
|
export default { |
||||
|
getGoods : (params) => |
||||
|
utilsModel |
||||
|
.config(homeApi.getGoods) |
||||
|
.request({ |
||||
|
params : params, |
||||
|
}), |
||||
|
getAddress : () => |
||||
|
utilsModel |
||||
|
.config(homeApi.getAddress) |
||||
|
.request({ |
||||
|
headers: { |
||||
|
'version': '2.50' |
||||
|
} |
||||
|
}), |
||||
|
getdefaultAddress : () => |
||||
|
utilsModel |
||||
|
.config(homeApi.getdefaultAddress) |
||||
|
.request({ |
||||
|
headers: { |
||||
|
'version': '2.50' |
||||
|
} |
||||
|
}), |
||||
|
} |
||||
@ -1,45 +1,110 @@ |
|||||
<template> |
<template> |
||||
<div> |
|
||||
<group> |
|
||||
<x-switch :title="''" v-model="show"></x-switch> |
|
||||
|
|
||||
</group> |
|
||||
</div> |
|
||||
|
<div> |
||||
|
<group title="set position"> |
||||
|
<x-switch title="left(100% width)" v-model="show"></x-switch> |
||||
|
</group> |
||||
|
<div title="Default popup" @click=" show = true" >点击看看</div> |
||||
|
<popup v-model="show"> |
||||
|
<div class="popup0"> |
||||
|
<div><a>取消</a><a>完成</a></div> |
||||
|
<picker :data='year7' :columns=3 v-model='year7Value' @on-change='change' ref="picker1"></picker> |
||||
|
</div> |
||||
|
</popup> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { TransferDom, Actionsheet, Group, XSwitch, Toast } from 'vux' |
|
||||
|
import { Group,Picker,Popup,XSwitch} from 'vux' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
show: true, |
||||
|
year7: [ |
||||
|
{ |
||||
|
name: '中国', |
||||
|
value: 'china', |
||||
|
parent: 0 |
||||
|
}, { |
||||
|
name: '美国', |
||||
|
value: 'USA', |
||||
|
parent: 0 |
||||
|
}, { |
||||
|
name: '广东', |
||||
|
value: 'china001', |
||||
|
parent: 'china' |
||||
|
}, { |
||||
|
name: '广西', |
||||
|
value: 'china002', |
||||
|
parent: 'china' |
||||
|
}, { |
||||
|
name: '美国001', |
||||
|
value: 'usa001', |
||||
|
parent: 'USA' |
||||
|
}, { |
||||
|
name: '美国002', |
||||
|
value: 'usa002', |
||||
|
parent: 'USA' |
||||
|
}, { |
||||
|
name: '广州', |
||||
|
value: 'gz', |
||||
|
parent: 'china001' |
||||
|
}, { |
||||
|
name: '深圳', |
||||
|
value: 'sz', |
||||
|
parent: 'china001' |
||||
|
}, { |
||||
|
name: '广西001', |
||||
|
value: 'gz', |
||||
|
parent: 'china002' |
||||
|
}, { |
||||
|
name: '广西002', |
||||
|
value: 'sz', |
||||
|
parent: 'china002' |
||||
|
}, { |
||||
|
name: '美国001_001', |
||||
|
value: '0003', |
||||
|
parent: 'usa001' |
||||
|
}, { |
||||
|
name: '美国001_002', |
||||
|
value: '0004', |
||||
|
parent: 'usa001' |
||||
|
}, { |
||||
|
name: '美国002_001', |
||||
|
value: '0005', |
||||
|
parent: 'usa002' |
||||
|
}, { |
||||
|
name: '美国002_002', |
||||
|
value: '0006', |
||||
|
parent: 'usa002' |
||||
|
}], |
||||
|
year7Value: ['USA','usa002','0006'], |
||||
|
goodsList: [] |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Picker, |
||||
|
Group, |
||||
|
XSwitch, |
||||
|
Popup |
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
Actionsheet, |
|
||||
Group, |
|
||||
XSwitch, |
|
||||
Toast |
|
||||
}, |
|
||||
directives: { |
|
||||
TransferDom |
|
||||
}, |
|
||||
data () { |
|
||||
return { |
|
||||
show: '123' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
log (str) { |
|
||||
console.log(str) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
}, |
||||
|
methods: { |
||||
|
change (name) { |
||||
|
console.log('new Value', name) |
||||
|
}, |
||||
|
getGoodsList (){ |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
} |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
.popup0 { |
|
||||
padding-bottom:15px; |
|
||||
height:200px; |
|
||||
} |
|
||||
.popup1 { |
|
||||
width:100%; |
|
||||
height:100%; |
|
||||
} |
|
||||
|
|
||||
</style> |
</style> |
||||
@ -0,0 +1,353 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<div class="home"> |
||||
|
<input type="hidden" id="openedDistrict" th:value="${openedDistrict}"/> |
||||
|
<input type="hidden" id="merchantNo" th:value="${merchantNo}" value="2" /> <!--商户标号--> |
||||
|
<input type="hidden" id="districtId" th:value="${districtId}" value="" /> <!--选定区县id--> |
||||
|
<div class="page-top"> |
||||
|
<i class="position" @click="show = true"><img src="../assets/images/icon/position.png"/>{{defaultCity}}</i> |
||||
|
<i class="logo"><img src="../assets/images/icon/logo.png" /></i> |
||||
|
<i class="text"><a href="tel:400-6080100">联系客服</a></i> |
||||
|
</div> |
||||
|
<div class="page-content"> |
||||
|
<div class="banner"> |
||||
|
<div class="swiper-container focus-box-swiper"> |
||||
|
<div class="swiper-wrapper"> |
||||
|
<div class="swiper-slide" v-for="item in bannerImgList"> |
||||
|
<img :src="item.imgUrl"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="swiper-pagination"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="coupon"> |
||||
|
<a :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl"/></a> |
||||
|
</div> |
||||
|
<div class="new-card" v-for="item in goodsList"> |
||||
|
<div class="new-card-top"> |
||||
|
<img :src=" imghost + item.list[0].categoryImage"> |
||||
|
</div> |
||||
|
<ul class="card-list"> |
||||
|
<li v-for="item1 in item.list"> |
||||
|
<div class="left"> |
||||
|
<a :href="'http://test.1hjz.cn/mall/web/vgoods/detail/' + item1.goodsNo"> |
||||
|
<img :src=" imghost + item1.bannerImgs" /> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<h3>{{item1.name}}</h3> |
||||
|
<div class="text">{{item1.shortDesc}}</div> |
||||
|
<div class="card-name">{{toJSON(item1.smallLabel)}}</div> |
||||
|
<div class="btn-box"> |
||||
|
<span>￥ <em>{{item1.originalPrice > 0 ? item1.originalPrice/100 : item1.price/100}}</em></span> |
||||
|
<a :href="'http://test.1hjz.cn/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<popup v-model="show"> |
||||
|
<div class="picke-address"> |
||||
|
<div class="status-btn"> |
||||
|
<a class="cel-btn" @click="show = false">取消</a> |
||||
|
<a class="complete-btn" @click="getNameValues">完成</a> |
||||
|
</div> |
||||
|
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker> |
||||
|
</div> |
||||
|
</popup> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import homeApi from "../models/home-model.js"; |
||||
|
import Swiper from 'swiper'; |
||||
|
import { Alert, Toast,Popup,Picker } from "vux"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
show: false, |
||||
|
defaultCity: '天河区', |
||||
|
addressData: [], |
||||
|
addressValue: [], |
||||
|
bannerImgList:[], //轮播图 |
||||
|
promotionImgList: {}, //优惠券， |
||||
|
goodsList:[], |
||||
|
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/", |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Toast, |
||||
|
Popup, |
||||
|
Picker |
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
getNameValues (){ |
||||
|
console.log(this.addressValue) |
||||
|
return |
||||
|
var that = this; |
||||
|
console.log(this.addressValue[2]) |
||||
|
$("#merchantNo").val(this.addressValue[2]) |
||||
|
this.getGoodsList() |
||||
|
}, |
||||
|
change (name) { |
||||
|
this.addressValue = name |
||||
|
}, |
||||
|
getGoodsList (){ |
||||
|
var params = { |
||||
|
"merchantNo": $("#merchantNo").val(), |
||||
|
"selectedDistrictId": $("#districtId").val() |
||||
|
} |
||||
|
homeApi.getGoods(params).then(res => { |
||||
|
console.log(res) |
||||
|
if ( res.code == 0 ){ |
||||
|
this.bannerImgList = res.response.bannerImgList |
||||
|
this.promotionImgList = res.response.promotionImgList[0]; |
||||
|
let goodsList = res.response.goodsList |
||||
|
let arr = []; |
||||
|
for(let i=0;i<goodsList.length;i++){ |
||||
|
goodsList[i].categoryNo&&goodsList[i].isRelease==1?arr.push(goodsList[i].categoryNo):""; |
||||
|
} |
||||
|
let set =new Set(arr); |
||||
|
let list=Array.from(set); |
||||
|
let lastList=[]; |
||||
|
for(let i=0;i<list.length;i++){ |
||||
|
lastList.push({ |
||||
|
type:list[i], |
||||
|
list:[], |
||||
|
|
||||
|
}) |
||||
|
for(let x=0;x<goodsList.length;x++){ |
||||
|
if(lastList[i].type==goodsList[x].categoryNo&&goodsList[x].isRelease==1){ |
||||
|
lastList[i].list.push(goodsList[x]); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.goodsList = lastList.slice(); |
||||
|
|
||||
|
} else { |
||||
|
this.$vux.toast.text(res.msg,"middle"); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
getAddress (){ |
||||
|
homeApi.getAddress().then(res => { |
||||
|
if ( res.code == 0 ){ |
||||
|
this.addressData = res.data |
||||
|
} else { |
||||
|
this.$vux.toast.text(res.msg,"middle"); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
toJSON (data){ |
||||
|
return JSON.parse(data)[0].labelText |
||||
|
}, |
||||
|
//获取默认地址信息 |
||||
|
getdefaultAddress (){ |
||||
|
console.log(123) |
||||
|
homeApi.getdefaultAddress().then(res => { |
||||
|
console.log('默认地址信息',res) |
||||
|
if ( res.code == 0 ){ |
||||
|
if ( !res.data ){ |
||||
|
this.show = true |
||||
|
} else { |
||||
|
this.defaultCity = res.data.districtName |
||||
|
} |
||||
|
} else { |
||||
|
this.$vux.toast.text(res.msg,"middle"); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
//异步加载 |
||||
|
setTimeout(() => { |
||||
|
var mySwiper = new Swiper('.swiper-container', { |
||||
|
autoplay:true, //自动播放 5s |
||||
|
loop : true, //无缝循环 |
||||
|
pagination: '.swiper-pagination', |
||||
|
paginationClickable: true, |
||||
|
autoplayDisableOnInteraction: false, |
||||
|
}) |
||||
|
}, 300); |
||||
|
this.getdefaultAddress() |
||||
|
this.getGoodsList() |
||||
|
this.getAddress() |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.home { |
||||
|
background:rgba(255,255,255,1); |
||||
|
} |
||||
|
.home .page-top { |
||||
|
background:rgba(255,255,255,1); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
.home .page-top i { |
||||
|
font-style: normal; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.home .page-top .position { |
||||
|
font-size:0.26rem; |
||||
|
font-weight:500; |
||||
|
color:rgba(153,153,153,1); |
||||
|
} |
||||
|
.home .page-top .position img { |
||||
|
width:0.2rem; |
||||
|
height:0.25rem; |
||||
|
margin-right: 0.07rem; |
||||
|
} |
||||
|
.home .page-top .logo img { |
||||
|
width:1.77rem; |
||||
|
height:0.3rem; |
||||
|
} |
||||
|
.home .page-top .text { |
||||
|
height:0.28rem; |
||||
|
font-size:0.28rem; |
||||
|
font-weight:400; |
||||
|
color:rgba(36,158,108,1); |
||||
|
} |
||||
|
.home .page-top .text a { |
||||
|
position: relative; |
||||
|
color:rgba(36,158,108,1); |
||||
|
} |
||||
|
.home .page-content { |
||||
|
background:rgba(255,255,255,1); |
||||
|
} |
||||
|
.home .page-content .banner a { |
||||
|
display: block; |
||||
|
} |
||||
|
.home .page-content .banner img { |
||||
|
width: 100%; |
||||
|
display: block; |
||||
|
} |
||||
|
.home .page-content .coupon { |
||||
|
margin-top: 0.3rem; |
||||
|
} |
||||
|
.home .page-content .coupon img { |
||||
|
width:6.8rem; |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
} |
||||
|
.home .page-content .new-card { |
||||
|
padding-bottom: 0.5rem; |
||||
|
} |
||||
|
.home .page-content .new-card .new-card-top { |
||||
|
padding: 0.4rem 0 0.3rem; |
||||
|
} |
||||
|
.home .page-content .new-card .new-card-top img { |
||||
|
width:7.1rem; |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li { |
||||
|
width:7rem; |
||||
|
height:2.5rem; |
||||
|
border:1px solid rgba(238,238,238,1); |
||||
|
box-sizing: border-box; |
||||
|
padding: 0.2rem; |
||||
|
margin: auto; |
||||
|
margin-bottom: 0.3rem; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .left { |
||||
|
width: 2rem; |
||||
|
height: 2rem; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .left img { |
||||
|
width: 2rem; |
||||
|
height: 2rem; |
||||
|
display: block; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right { |
||||
|
width: 4.3rem; |
||||
|
height: 2rem; |
||||
|
position: relative; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right h3 { |
||||
|
font-size:0.32rem; |
||||
|
font-weight:400; |
||||
|
color:rgba(51,51,51,1); |
||||
|
margin-bottom: 0.1rem; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right .text { |
||||
|
font-size:0.24rem; |
||||
|
font-weight:400; |
||||
|
color:rgba(153,153,153,1); |
||||
|
margin-bottom: 0.1rem; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right .card-name { |
||||
|
height: 0.3rem; |
||||
|
font-size:0.2rem; |
||||
|
font-style: normal; |
||||
|
font-weight:400; |
||||
|
color:rgba(244,163,83,1); |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right .btn { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right .btn-box { |
||||
|
width: 4.3rem; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right .btn-box span { |
||||
|
font-size: 0.22rem; |
||||
|
font-weight:400; |
||||
|
color:rgba(153,153,153,1); |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right .btn-box span em { |
||||
|
font-size:0.38rem; |
||||
|
font-weight:600; |
||||
|
font-style: normal; |
||||
|
color:rgba(51,51,51,1); |
||||
|
} |
||||
|
.home .page-content .new-card .card-list li .right .btn-box a { |
||||
|
width:1.7rem; |
||||
|
height:0.56rem; |
||||
|
border-radius:0rem; |
||||
|
background-color: #2BB079; |
||||
|
border: none; |
||||
|
color: #fff; |
||||
|
border-radius: 2px; |
||||
|
font-size: 0.3rem; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.picke-address .status-btn { |
||||
|
display: flex; |
||||
|
height: 0.8rem; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
font-size: 0.3rem; |
||||
|
} |
||||
|
.picke-address .status-btn a { |
||||
|
padding: 0.3rem; |
||||
|
color: #888; |
||||
|
} |
||||
|
.picke-address .status-btn a.complete-btn { |
||||
|
color: #1aad19; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,140 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<div class="poster"> |
||||
|
<div class="page-top"> |
||||
|
<a @click="goBack()"><img src="../assets/images/my-money/left.png" /></a> |
||||
|
<i class="name">分销海报</i> |
||||
|
<i class="text" @click="show = true">天河区</i> |
||||
|
</div> |
||||
|
<div class="page-content"> |
||||
|
<img class="poster-img" src="../assets/images/girl.jpg"> |
||||
|
<button class="create-poster">重新生成海报</button> |
||||
|
</div> |
||||
|
|
||||
|
<popup v-model="show"> |
||||
|
<div class="picke-address"> |
||||
|
<div class="status-btn"> |
||||
|
<a class="cel-btn" @click="show = false">取消</a> |
||||
|
<a class="complete-btn">完成</a> |
||||
|
</div> |
||||
|
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker> |
||||
|
</div> |
||||
|
</popup> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import homeApi from "../models/home-model.js"; |
||||
|
import Swiper from 'swiper'; |
||||
|
import { Alert, Toast,Popup,Picker } from "vux"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
show: false, |
||||
|
addressData: [], |
||||
|
addressValue: [], |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Toast, |
||||
|
Popup, |
||||
|
Picker |
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
change (name) { |
||||
|
// console.log('new Value', name) |
||||
|
}, |
||||
|
getAddress (){ |
||||
|
homeApi.getAddress().then(res => { |
||||
|
if ( res.code == 0 ){ |
||||
|
this.addressData = res.data |
||||
|
} else { |
||||
|
this.$vux.toast.text(res.msg,"middle"); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//返回上一页 |
||||
|
goBack() { |
||||
|
history.go(-1); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getAddress() |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.poster { |
||||
|
background:rgba(255,255,255,1); |
||||
|
} |
||||
|
.poster .page-top { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 0.2rem; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.poster .page-top i { |
||||
|
font-style: normal; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 0.36rem; |
||||
|
color: rgba(255,255,255,1); |
||||
|
letter-spacing: 1px; |
||||
|
} |
||||
|
.poster .page-top a { |
||||
|
position: relative; |
||||
|
left: 0; |
||||
|
} |
||||
|
.poster .page-top .name { |
||||
|
margin-left: 1rem; |
||||
|
} |
||||
|
|
||||
|
.poster .page-top .text { |
||||
|
height:0.28rem; |
||||
|
font-size:0.28rem; |
||||
|
font-weight:400; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.page-content { |
||||
|
padding-bottom: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.picke-address .status-btn { |
||||
|
display: flex; |
||||
|
height: 0.8rem; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
font-size: 0.3rem; |
||||
|
} |
||||
|
.picke-address .status-btn a { |
||||
|
padding: 0.3rem; |
||||
|
color: #888; |
||||
|
} |
||||
|
.picke-address .status-btn a.complete-btn { |
||||
|
color: #1aad19; |
||||
|
} |
||||
|
.poster-img { |
||||
|
width: 100%; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.create-poster { |
||||
|
width: 4.68rem; |
||||
|
height: 0.76rem; |
||||
|
background: #19BC7F; |
||||
|
border-radius: 5px; |
||||
|
color: #fff; |
||||
|
font-size: 0.34rem; |
||||
|
border: none; |
||||
|
margin: auto; |
||||
|
display: block; |
||||
|
margin-top: 0.5rem; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save