mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-03 18:56:39 +08:00
更改
This commit is contained in:
952108534@qq.com
parent
bfe208efb6
commit
e86acd1e85
@ -8,38 +8,17 @@ body{
|
|||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.ts-no-data{
|
|
||||||
text-align: center;
|
|
||||||
margin:3rem 0;
|
|
||||||
}
|
|
||||||
.ts-mask{
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
position: fixed;
|
|
||||||
top:0;
|
|
||||||
left:0;
|
|
||||||
display:flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index:99;
|
|
||||||
|
|
||||||
.ts-mask-bg{
|
|
||||||
background-color:#000;
|
|
||||||
opacity:.6;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
z-index:0;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.userloding {
|
.userloding {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -1.56rem;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -3.75rem;
|
||||||
background: url(../image/onloading.png) center center no-repeat;
|
background: url(../image/onloading.png) center center no-repeat;
|
||||||
width: 3.12rem;
|
width: 3.12rem;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
height: 3.12rem;
|
height: 7.5rem;
|
||||||
|
z-index: 1000;
|
||||||
animation: rolling 4s infinite;
|
animation: rolling 4s infinite;
|
||||||
-webkit-animation:rolling 4s infinite;
|
-webkit-animation:rolling 4s infinite;
|
||||||
}
|
}
|
||||||
@ -69,6 +48,8 @@ body{
|
|||||||
}
|
}
|
||||||
//用户光点
|
//用户光点
|
||||||
.rc-screen-reader{
|
.rc-screen-reader{
|
||||||
|
width: 0.81rem;
|
||||||
|
height: 0.81rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
@ -78,13 +59,6 @@ body{
|
|||||||
width: 0.37rem;
|
width: 0.37rem;
|
||||||
height: 0.37rem;
|
height: 0.37rem;
|
||||||
}
|
}
|
||||||
.rc-menu--xs .rc-screen-reader{
|
|
||||||
left: 30%;
|
|
||||||
}
|
|
||||||
.rc-list__link.ts-login--xs .rc-screen-reader{
|
|
||||||
left:16%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img, picture {
|
img, picture {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@ -111,8 +85,7 @@ img, picture {
|
|||||||
li{
|
li{
|
||||||
border: 1px solid #D7D7D7;
|
border: 1px solid #D7D7D7;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
border-bottom-left-radius: 4px;
|
border-radius: 4px;
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-width:10rem;
|
max-width:10rem;
|
||||||
.rc-column
|
.rc-column
|
||||||
@ -144,7 +117,7 @@ img, picture {
|
|||||||
}
|
}
|
||||||
img{
|
img{
|
||||||
width:10rem;
|
width:10rem;
|
||||||
min-height:10rem;
|
height:10rem;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -256,12 +229,13 @@ img, picture {
|
|||||||
right: 0;
|
right: 0;
|
||||||
top: 30%;
|
top: 30%;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
|
box-shadow: 0px 0px .62rem rgba(0, 0, 0, 0.16);
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
z-index:3;
|
z-index:3;
|
||||||
ul{
|
ul{
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 181px;
|
height: 181px;
|
||||||
|
box-shadow: 0px 0px 6px rgb(0 0 0 / 10%);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -339,9 +313,6 @@ img, picture {
|
|||||||
html {
|
html {
|
||||||
//font-size:100px;
|
//font-size:100px;
|
||||||
}
|
}
|
||||||
.rc-list__link.ts-login--xs .rc-screen-reader{
|
|
||||||
left:7%;
|
|
||||||
}
|
|
||||||
.rc-md-up {
|
.rc-md-up {
|
||||||
display: none!important;
|
display: none!important;
|
||||||
}
|
}
|
||||||
@ -352,7 +323,9 @@ img, picture {
|
|||||||
margin-top: 90px;
|
margin-top: 90px;
|
||||||
}
|
}
|
||||||
.rc-list__header {
|
.rc-list__header {
|
||||||
|
background: none;
|
||||||
|
padding: .5rem 0;
|
||||||
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.ts-right-arr {
|
.ts-right-arr {
|
||||||
border-bottom:1px solid #E1001A;
|
border-bottom:1px solid #E1001A;
|
||||||
@ -443,13 +416,8 @@ img, picture {
|
|||||||
display:block;
|
display:block;
|
||||||
li{
|
li{
|
||||||
max-width:20rem;
|
max-width:20rem;
|
||||||
min-width:18.75rem;
|
|
||||||
width:22.8vw;
|
|
||||||
//margin-right:.875rem;
|
//margin-right:.875rem;
|
||||||
margin-left:2vw;
|
margin-left:2.2vw;
|
||||||
padding-left:1px;
|
|
||||||
padding-right:1px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.rc-column{
|
.rc-column{
|
||||||
span{
|
span{
|
||||||
font-size:1.875rem;
|
font-size:1.875rem;
|
||||||
@ -464,7 +432,7 @@ img, picture {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
img{
|
img{
|
||||||
width:100%;
|
width:21.7vw;
|
||||||
max-width:320px;
|
max-width:320px;
|
||||||
min-width:160px;
|
min-width:160px;
|
||||||
}
|
}
|
||||||
@ -571,40 +539,35 @@ img, picture {
|
|||||||
}
|
}
|
||||||
h2{
|
h2{
|
||||||
font-size:20px;
|
font-size:20px;
|
||||||
padding-bottom:1rem;
|
|
||||||
}
|
}
|
||||||
.ts-scrollable
|
.ts-scrollable
|
||||||
{
|
{
|
||||||
padding-bottom:1rem;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
li
|
li
|
||||||
{
|
{
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
width: 8.125rem;
|
width: 8.125rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
//line-height: 40px;
|
line-height: 40px;
|
||||||
font-size: .875rem;
|
font-size: .875rem;
|
||||||
padding:.375rem;
|
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
&::-webkit-scrollbar{
|
&::-webkit-scrollbar{
|
||||||
height: 6px;
|
background:unset;
|
||||||
width:50%;
|
height:4px;
|
||||||
background:transparent;
|
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-thumb{
|
&::-webkit-scrollbar-thumb{
|
||||||
background-color:#d7d7d7;
|
background-color:#d7d7d7;
|
||||||
border-radius:10px;
|
height:2px;
|
||||||
width:50%;
|
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-track{
|
&::-webkit-scrollbar-track{
|
||||||
//background-color:#ddd;
|
background-color:ddd;
|
||||||
background-color:transparent;
|
|
||||||
|
height:2px;
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-button{
|
&::-webkit-scrollbar-button{
|
||||||
background:unset;
|
background:unset;
|
||||||
}
|
}
|
||||||
/* */
|
*/
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -626,10 +589,10 @@ img, picture {
|
|||||||
{
|
{
|
||||||
.ts-product-list {
|
.ts-product-list {
|
||||||
display:flex;
|
display:flex;
|
||||||
//justify-content: space-between;
|
justify-content: space-between;
|
||||||
li{
|
li{
|
||||||
//margin-left:0;
|
margin-left:0;
|
||||||
//margin-right:0;
|
margin-right:0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -5,98 +5,47 @@
|
|||||||
/deep/.van-swipe__indicator--active{
|
/deep/.van-swipe__indicator--active{
|
||||||
background-color: #E1001A;
|
background-color: #E1001A;
|
||||||
}
|
}
|
||||||
|
.rc-ma{
|
||||||
.ts-carousel-indicator{
|
.ul-zhuan{
|
||||||
/deep/.swiper-pagination-bullet{
|
li{
|
||||||
margin-left:.5rem;
|
background: unset;;
|
||||||
}
|
|
||||||
/deep/.swiper-pagination-bullet-active{
|
|
||||||
background:#E2001A;
|
|
||||||
}
|
|
||||||
&.center{
|
|
||||||
width:100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ts-position-identifier{
|
|
||||||
|
|
||||||
}
|
|
||||||
.ul-zhuan,.ul-dog{
|
|
||||||
li{
|
|
||||||
background: unset;
|
|
||||||
img{
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
&:first-child{
|
|
||||||
margin-left:0;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
img{
|
img{
|
||||||
border: 3px solid #E2001A;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
color: #E2001A;
|
&.active {
|
||||||
|
img{
|
||||||
}
|
border: 3px solid #E2001A;
|
||||||
&.unactive {
|
}
|
||||||
color: #444444;
|
color: #E2001A;
|
||||||
img{
|
|
||||||
border: 3px solid #D7D7D7;
|
}
|
||||||
|
&.unactive {
|
||||||
|
color: #444444;
|
||||||
|
img{
|
||||||
|
border: 3px solid #D7D7D7;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.uservideo{
|
.uservideo{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
video{
|
video{
|
||||||
width:100%;
|
height:100%;
|
||||||
height:auto;
|
width:auto;
|
||||||
}
|
|
||||||
}
|
|
||||||
.ul-dog{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
span{
|
|
||||||
margin-top: .5rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: 9.5rem;
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
margin-top:3rem;
|
|
||||||
margin-left:3rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width:768px){
|
@media screen and (max-width:768px){
|
||||||
.ul-dog{
|
.ul-dog{
|
||||||
justify-content: space-evenly;
|
display: none;
|
||||||
img{
|
|
||||||
width:4rem;
|
|
||||||
height:auto;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
margin-top:1.875rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.ts-banner-swiper-container{
|
.searchBara{
|
||||||
margin-bottom:2.5rem;
|
position: fixed;
|
||||||
}
|
|
||||||
.searchBara{
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top:3.75rem;
|
top:66px;
|
||||||
background: white;
|
background: white;
|
||||||
z-index: 60;
|
z-index: 9999;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow-y:hidden;
|
overflow-y:hidden;
|
||||||
@ -113,14 +62,16 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 0.20rem;
|
margin-left: 0.20rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background: #F6F6F6;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.rc-login{
|
|
||||||
width: 92%;
|
.rc-login{
|
||||||
margin:0 auto;
|
width: 92%;
|
||||||
}
|
margin:0 auto;
|
||||||
|
}
|
||||||
.userunlogin{
|
.userunlogin{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.60rem;
|
height: 0.60rem;
|
||||||
@ -150,6 +101,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.van-swipe{
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
.rc-usermessage{
|
.rc-usermessage{
|
||||||
span{
|
span{
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
@ -165,12 +119,10 @@
|
|||||||
height: auto;
|
height: auto;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-swipe{
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.van-swipe-item {
|
.van-swipe-item {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
height: 26.31rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 0.20px;
|
font-size: 0.20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -182,44 +134,52 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#xxxFullScreen {
|
#xxxFullScreen {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin-top: 0.40rem;
|
margin-top: 0.40rem;
|
||||||
.swiper-container{
|
#swiper1 {
|
||||||
height: 6.45rem;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.swiper-container {
|
.swiper-container{
|
||||||
width: 100%;
|
height: 6.45rem;
|
||||||
height: 100%;
|
}
|
||||||
position: relative;
|
.swiper-container, .swiper-container2 {
|
||||||
}
|
width: 100%;
|
||||||
.swiper-container .swiper-wrapper .swiper-slide {
|
// overflow: visible !important;
|
||||||
width: 17.25rem;
|
height: 100%;
|
||||||
//height: 6.45rem !important; //Auto adaption
|
position: relative;
|
||||||
}
|
}
|
||||||
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
|
||||||
|
width: 17.25rem;
|
||||||
|
//height: 6.45rem !important; //Auto adaption
|
||||||
|
}
|
||||||
|
|
||||||
/* 上一张 */
|
/* 上一张 */
|
||||||
swiper-container .swiper-wrapper .swiper-slide-prev {
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
|
||||||
margin-top: 0.05rem;
|
margin-top: 0.05rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
/* 下一张 */
|
}
|
||||||
.swiper-container .swiper-wrapper .swiper-slide-next {
|
/* 下一张 */
|
||||||
margin-top: 0.05rem;
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next {
|
||||||
height: 100%;
|
margin-top: 0.05rem;
|
||||||
}
|
height: 100%;
|
||||||
.swiper-container .swiper-wrapper .swiper-slide-active {
|
|
||||||
height: 100%;
|
}
|
||||||
}
|
.swiper-container .swiper-wrapper .swiper-slide-active {
|
||||||
.uservideo{
|
height: 100%;
|
||||||
width: 100%;
|
|
||||||
height:auto;
|
}
|
||||||
display: block;
|
.uservideo{
|
||||||
video{
|
width: 100%;
|
||||||
max-width:100%;
|
height:auto;
|
||||||
max-height:100%;
|
max-height: 15.68rem;
|
||||||
}
|
display: block;
|
||||||
|
video{
|
||||||
|
max-width:100%;
|
||||||
|
max-height:100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.sw-center{
|
.sw-center{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -232,9 +192,8 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
vertical-align: top;
|
|
||||||
}
|
}
|
||||||
img{
|
img{
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
@ -250,7 +209,6 @@
|
|||||||
margin-top: 1.25rem;
|
margin-top: 1.25rem;
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
color: #666666;
|
|
||||||
font-size: .875rem;
|
font-size: .875rem;
|
||||||
text-overflow: -o-ellipsis-lastline;
|
text-overflow: -o-ellipsis-lastline;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -273,14 +231,16 @@
|
|||||||
|
|
||||||
/* 中间的图片 */
|
/* 中间的图片 */
|
||||||
.swiper-container .swiper-wrapper .swiper-slide-active {
|
.swiper-container .swiper-wrapper .swiper-slide-active {
|
||||||
|
height: 165px !important;
|
||||||
}
|
}
|
||||||
.swiperWrap{
|
.swiperWrap{
|
||||||
height: 469px;
|
height: 469px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
img{
|
img{
|
||||||
height: 469px;
|
height: 469px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
/deep/.swiper-pagination-bullet-active{
|
/deep/.swiper-pagination-bullet-active{
|
||||||
background: red;
|
background: red;
|
||||||
@ -341,22 +301,22 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.active {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
img{
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.unactive {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
img{
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
// .usermain{
|
// .usermain{
|
||||||
// display: none;
|
// display: none;
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
.active {
|
|
||||||
font-size: 0.14rem;
|
|
||||||
img{
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.unactive {
|
|
||||||
font-size: 0.14rem;
|
|
||||||
img{
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 769px)
|
@media screen and (min-width: 769px)
|
||||||
@ -364,24 +324,14 @@
|
|||||||
.rc-selection{
|
.rc-selection{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.sw-center{
|
.sw-center{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.useraimg{
|
.useraimg{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: 29.31rem;
|
// height: 29.31rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.ts-banner-swiper-container{
|
|
||||||
position:relative;
|
|
||||||
img{
|
|
||||||
margin:0 auto;
|
|
||||||
}
|
|
||||||
.ts-carousel-indicator{
|
|
||||||
position:absolute;
|
|
||||||
bottom:.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.van-swipe-item {
|
.van-swipe-item {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -400,12 +350,15 @@
|
|||||||
#xxxFullScreen {
|
#xxxFullScreen {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
// margin-top: 100px;
|
// margin-top: 100px;
|
||||||
#swiper1,#swiper2 {
|
#swiper1 {
|
||||||
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-top: 2.31rem;
|
margin-top: 2.31rem;
|
||||||
}
|
|
||||||
h2{
|
h2{
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-container2 {
|
.swiper-container2 {
|
||||||
@ -414,10 +367,10 @@
|
|||||||
// overflow: visible !important;
|
// overflow: visible !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
//height: 6.18rem;
|
//height: 6.18rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 上一张 */
|
/* 上一张 */
|
||||||
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
|
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
|
||||||
@ -565,18 +518,14 @@ img{
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
img{
|
img{
|
||||||
width:100%;
|
width: 10vw;
|
||||||
height: auto;
|
height: 10vw;
|
||||||
object-fit: contain;
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
li{
|
li{
|
||||||
width: 10vw;
|
|
||||||
max-width:11rem;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow:hidden;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -591,7 +540,33 @@ img{
|
|||||||
|
|
||||||
}
|
}
|
||||||
.usermain{
|
.usermain{
|
||||||
|
.ul-dog{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
span{
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 9.5rem;
|
||||||
|
height: 9.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 9.875rem;
|
||||||
|
text-align: center;
|
||||||
|
height: 9.875rem;
|
||||||
|
background: #F6F6F6;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left:3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.rc-main{
|
.rc-main{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
.container{
|
.container{
|
||||||
min-height:100vh;
|
min-height:80vh;
|
||||||
height:100%;
|
height:100%;
|
||||||
background-color:#f6f6f6;
|
background-color:#f6f6f6;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
.ts-max-width--460{
|
.ts-max-width--460{
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
@ -55,13 +53,11 @@
|
|||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
font-size: 0.1rem;
|
font-size: 0.1rem;
|
||||||
background-color:#fff;
|
|
||||||
.van-field__body {
|
.van-field__body {
|
||||||
border-bottom: 1px solid red;
|
border-bottom: 1px solid red;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
box-shadow: unset;
|
|
||||||
}
|
}
|
||||||
.userfoget {
|
.userfoget {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|||||||
@ -3,9 +3,7 @@
|
|||||||
.rc-margin-bottom--lg{
|
.rc-margin-bottom--lg{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.usercontend {
|
|
||||||
display:inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width:768px){
|
@media screen and (max-width:768px){
|
||||||
.online{
|
.online{
|
||||||
@ -48,7 +46,7 @@ color: #FFFFFF;
|
|||||||
|
|
||||||
}
|
}
|
||||||
.rc-max-width--xl{
|
.rc-max-width--xl{
|
||||||
|
padding: 24px 20px 24px 20px;
|
||||||
.rc-title {
|
.rc-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -117,6 +115,9 @@ color: #FFFFFF;
|
|||||||
@media screen and (min-width: 769px)
|
@media screen and (min-width: 769px)
|
||||||
|
|
||||||
{
|
{
|
||||||
|
.usercontend {
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
.usercontshow{
|
.usercontshow{
|
||||||
.rc-button{
|
.rc-button{
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -6,7 +6,6 @@
|
|||||||
<li class="rc-list__item rc-xl-down">
|
<li class="rc-list__item rc-xl-down">
|
||||||
<button class="rc-btn rc-btn--icon-label rc-icon rc-menu--xs rc-iconography rc-md-up" data-modal-trigger="main-nav-modal" aria-label="Menu" role="menuitem">
|
<button class="rc-btn rc-btn--icon-label rc-icon rc-menu--xs rc-iconography rc-md-up" data-modal-trigger="main-nav-modal" aria-label="Menu" role="menuitem">
|
||||||
菜单
|
菜单
|
||||||
<em class="rc-screen-reader" v-show="loginornot"></em>
|
|
||||||
</button>
|
</button>
|
||||||
<button class="rc-btn rc-btn--icon rc-icon rc-menu--xs rc-iconography rc-md-down" data-js-trigger="mobile-push-nav" aria-label="Menu" role="menuitem">
|
<button class="rc-btn rc-btn--icon rc-icon rc-menu--xs rc-iconography rc-md-down" data-js-trigger="mobile-push-nav" aria-label="Menu" role="menuitem">
|
||||||
<span class="rc-screen-reader-text">
|
<span class="rc-screen-reader-text">
|
||||||
@ -46,7 +45,10 @@
|
|||||||
<span class="rc-screen-reader-text">
|
<span class="rc-screen-reader-text">
|
||||||
登录
|
登录
|
||||||
</span>
|
</span>
|
||||||
<em class="rc-screen-reader" v-show="loginornot"></em>
|
<em class="rc-screen-reader" v-show="loginornot">
|
||||||
|
|
||||||
|
</em>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
@ -56,6 +58,11 @@
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
-->
|
-->
|
||||||
|
<a href="#" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='在哪购买' class="rc-btn rc-btn--icon rc-icon rc-pin--xs rc-iconography rc-interactive rc-xs-up" aria-label="pin">
|
||||||
|
<span class="rc-screen-reader-text">
|
||||||
|
translations.feature.headerbar.pin
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
<button data-js-trigger="search-bar" @click='searchturn' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='全文搜索' class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography rc-interactive" aria-label="Search" role="menuitem" data-click-modifier=".rc-hidden">
|
<button data-js-trigger="search-bar" @click='searchturn' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='全文搜索' class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography rc-interactive" aria-label="Search" role="menuitem" data-click-modifier=".rc-hidden">
|
||||||
<span class="rc-screen-reader-text">translations.feature.headerbar.search</span>
|
<span class="rc-screen-reader-text">translations.feature.headerbar.search</span>
|
||||||
</button>
|
</button>
|
||||||
@ -68,16 +75,16 @@
|
|||||||
<div class="rc-container">
|
<div class="rc-container">
|
||||||
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__center">
|
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__center">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats" class="rc-list__header" data-ref="nav-link" role="menuitem" title="猫">猫</a>
|
<a href="#cats" class="rc-list__header" data-ref="nav-link" role="menuitem" title="猫">猫</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a>
|
<a href="#dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#/tailored-nutrition" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a>
|
<a href="#tailored-nutrition" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a>
|
<a href="#about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="submenu rc-layout-container rc-one-column rc-margin--none rc-xl-up">
|
<div class="submenu rc-layout-container rc-one-column rc-margin--none rc-xl-up">
|
||||||
@ -87,49 +94,49 @@
|
|||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
|
|
||||||
<img src="../assets/showimage/sub-nav-1.jpg" class="ts-head-img rc-margin-bottom--xs">
|
<img src="../assets/showimage/sub-nav-1.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||||
<a href="https://royalcanin.com.cn/cats" class="rc-list__header rc-margin--none" role="menuitem">猫</a>
|
<a href="#cats" class="rc-list__header rc-margin--none" role="menuitem">猫</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#/cats/products" class="rc-list__link" role="menuitem">产品</a>
|
<a href="#cats/products" class="rc-list__link" role="menuitem">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" role="menuitem">品种</a>
|
<a href="#cats/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/getting-a-kitten" class="rc-list__link" role="menuitem">想养猫吗</a>
|
<a href="#cats/getting-a-kitten" class="rc-list__link" role="menuitem">想养猫吗</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/kitten" class="rc-list__link" role="menuitem">幼猫</a>
|
<a href="#cats/kitten" class="rc-list__link" role="menuitem">幼猫</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/kitten/health" class="rc-list__link" role="menuitem">健康和心情</a>
|
<a href="#cats/kitten/health" class="rc-list__link" role="menuitem">健康和心情</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
<img src="../assets/showimage/sub-nav-2.jpg" class="ts-head-img rc-margin-bottom--xs">
|
<img src="../assets/showimage/sub-nav-2.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||||
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header rc-margin--none" role="menuitem">犬</a>
|
<a href="#dogs" class="rc-list__header rc-margin--none" role="menuitem">犬</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#dogs/products" class="rc-list__link" role="menuitem">产品</a>
|
<a href="#dogs/products" class="rc-list__link" role="menuitem">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
|
<a href="#dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/getting-a-puppy" class="rc-list__link" role="menuitem">想养只狗</a>
|
<a href="#dogs/getting-a-puppy" class="rc-list__link" role="menuitem">想养只狗</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/puppy" class="rc-list__link" role="menuitem">幼犬</a>
|
<a href="#dogs/puppy" class="rc-list__link" role="menuitem">幼犬</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/puppy/health" class="rc-list__link" role="menuitem">健康和心情</a>
|
<a href="#dogs/puppy/health" class="rc-list__link" role="menuitem">健康和心情</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
<img src="../assets/showimage/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs">
|
<img src="../assets/showimage/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||||
<a href="/" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
|
<a href="#tailored-nutrition" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#cats/products" class="rc-list__link" role="menuitem">猫系列</a>
|
<a href="#cats/products" class="rc-list__link" role="menuitem">猫系列</a>
|
||||||
@ -141,13 +148,13 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
<img src="../assets/showimage/sub-nav-4.jpg" class="ts-head-img rc-margin-bottom--xs">
|
<img src="../assets/showimage/sub-nav-4.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||||
<a href="https://royalcanin.com.cn/about" class="rc-list__header rc-margin--none" role="menuitem">关于我们</a>
|
<a href="#about" class="rc-list__header rc-margin--none" role="menuitem">关于我们</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/about#growth-phase1" class="rc-list__link" role="menuitem">我们的历史</a>
|
<a href="#about#growth-phase1" class="rc-list__link" role="menuitem">我们的历史</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/about" class="rc-list__link" role="menuitem">我们的价值观</a>
|
<a href="#about" class="rc-list__link" role="menuitem">我们的价值观</a>
|
||||||
</li>
|
</li>
|
||||||
<!--
|
<!--
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
@ -189,74 +196,74 @@
|
|||||||
<section class="rc-max-width--xl">
|
<section class="rc-max-width--xl">
|
||||||
<div class="rc-column rc-lg-up rc-padding--lg">
|
<div class="rc-column rc-lg-up rc-padding--lg">
|
||||||
<h1 class="rc-gamma rc-padding-x--md">帮助猫狗过最健康的生活。</h1>
|
<h1 class="rc-gamma rc-padding-x--md">帮助猫狗过最健康的生活。</h1>
|
||||||
<img class="rc-padding--sm" src="/images/yorkshire-terrier-sacred-birman-b-w-brand-emblematic-tailored-nutrition-hero.jpg" alt="Royal Canin China" />
|
<img class="rc-padding--sm" src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/yorkshire-terrier-sacred-birman-b-w-brand-emblematic-tailored-nutrition-hero.jpg" alt="Royal Canin China" />
|
||||||
</div>
|
</div>
|
||||||
<nav class="rc-nav rc-hidden" data-toggle-group="mobile" data-toggle-effect="rc-expand--horizontal" data-js-target="mobile-push-nav">
|
<nav class="rc-nav rc-hidden" data-toggle-group="mobile" data-toggle-effect="rc-expand--horizontal" data-js-target="mobile-push-nav">
|
||||||
<div class="rc-layout-container rc-three-column">
|
<div class="rc-layout-container rc-three-column">
|
||||||
<div class="rc-column rc-double-width rc-padding-x--none--mobile rc-padding-right--none">
|
<div class="rc-column rc-double-width rc-padding-x--none--mobile rc-padding-right--none">
|
||||||
<ul class="rc-list rc-list--blank rc-list--align rc-list--two-column" role="menubar">
|
<ul class="rc-list rc-list--blank rc-list--align rc-list--two-column" role="menubar">
|
||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
<a href="https://royalcanin.com.cn/cats" class="rc-list__header" id="mega-nav-header-1" data-toggle="nav-list-1" role="menuitem">猫</a>
|
<a href="#cats" class="rc-list__header" id="mega-nav-header-1" data-toggle="nav-list-1" role="menuitem">猫</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-1" aria-labelledby="mega-nav-menu-1" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-1" aria-labelledby="mega-nav-menu-1" role="menu">
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-1" role="button">返回</button>
|
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-1" role="button">返回</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<a href="https://royalcanin.com.cn/cats" class="rc-list__header" title="Cat" role="menuitem">猫</a>
|
<a href="#cats" class="rc-list__header" title="Cat" role="menuitem">猫</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#cats/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
<a href="#cats/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
<a href="#cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/getting-a-kitten" class="rc-list__link ca" role="menuitem" title="Thinking of getting a cat">想养只猫</a>
|
<a href="#cats/getting-a-kitten" class="rc-list__link ca" role="menuitem" title="Thinking of getting a cat">想养只猫</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/kitten" class="rc-list__link ca" role="menuitem" title="Kitten">幼猫</a>
|
<a href="#cats/kitten" class="rc-list__link ca" role="menuitem" title="Kitten">幼猫</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/kitten/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
<a href="#cats/kitten/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header" role="menuitem" id="mega-nav-header-2" data-toggle="nav-list-2">犬</a>
|
<a href="#dogs" class="rc-list__header" role="menuitem" id="mega-nav-header-2" data-toggle="nav-list-2">犬</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-2" aria-labelledby="mega-nav-menu-2" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-2" aria-labelledby="mega-nav-menu-2" role="menu">
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-2" role="button">返回</button>
|
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-2" role="button">返回</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header" title="Dog" role="menuitem">犬</a>
|
<a href="#dogs" class="rc-list__header" title="Dog" role="menuitem">犬</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#dogs/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
<a href="#dogs/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
<a href="#dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/getting-a-puppy" class="rc-list__link ca" role="menuitem" title="Thinking of getting a dog">想养只犬</a>
|
<a href="#dogs/getting-a-puppy" class="rc-list__link ca" role="menuitem" title="Thinking of getting a dog">想养只犬</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/puppy" class="rc-list__link ca" role="menuitem" title="Puppy">幼犬</a>
|
<a href="#dogs/puppy" class="rc-list__link ca" role="menuitem" title="Puppy">幼犬</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/puppy/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
<a href="#dogs/puppy/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
<a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
|
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="mega-nav-menu-3" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="mega-nav-menu-3" role="menu">
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
|
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
|
<a href="#tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#cats/products" class="rc-list__link ca" role="menuitem">猫系列</a>
|
<a href="#cats/products" class="rc-list__link ca" role="menuitem">猫系列</a>
|
||||||
@ -268,16 +275,16 @@
|
|||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
<a href="https://royalcanin.com.cn/about" class="rc-list__header" role="menuitem" id="mega-nav-header-4" data-toggle="nav-list-4">关于我们</a>
|
<a href="#about" class="rc-list__header" role="menuitem" id="mega-nav-header-4" data-toggle="nav-list-4">关于我们</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-4" aria-labelledby="mega-nav-menu-4" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-4" aria-labelledby="mega-nav-menu-4" role="menu">
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-4" role="button">返回</button>
|
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-4" role="button">返回</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<a href="https://royalcanin.com.cn/about" class="rc-list__header" title="About" role="menuitem">关于我们</a>
|
<a href="#about" class="rc-list__header" title="About" role="menuitem">关于我们</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/about#growth-phase1" class="rc-list__link ca" role="menuitem" title="Our history">我们的历史</a>
|
<a href="#about#growth-phase1" class="rc-list__link ca" role="menuitem" title="Our history">我们的历史</a>
|
||||||
</li>
|
</li>
|
||||||
<!--
|
<!--
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
@ -303,17 +310,16 @@
|
|||||||
|
|
||||||
<div class="rc-column rc-padding-x--none">
|
<div class="rc-column rc-padding-x--none">
|
||||||
<ul class="rc-list rc-list--blank rc-list--align rc-btn-offset--top" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align rc-btn-offset--top" role="menu">
|
||||||
<li class="rc-list__item">
|
|
||||||
<a class="rc-list__link rc-icon ts-login--xs" role="menuitem" data-modal-trigger="main-nav-modal" @click="turnlogin">
|
|
||||||
个人中心
|
|
||||||
<em class="rc-screen-reader" v-show="loginornot"></em>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="https://royalcanin.com.cn/about/contact">
|
<a class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="#about/contact">
|
||||||
与我们联系
|
与我们联系
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="rc-list__item">
|
||||||
|
<a class="rc-list__link rc-icon rc-pin--xs rc-iconography--xs" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='在哪购买' role="menuitem" href="#">
|
||||||
|
在哪里购买
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a class="rc-list__link rc-icon rc-language--xs ts-weibo--xs" role="menuitem" target='_blank' href="https://weibo.com/chinaroyalcanin?topnav=1&wvr=6&topsug=1&is_all=1">
|
<a class="rc-list__link rc-icon rc-language--xs ts-weibo--xs" role="menuitem" target='_blank' href="https://weibo.com/chinaroyalcanin?topnav=1&wvr=6&topsug=1&is_all=1">
|
||||||
微博
|
微博
|
||||||
@ -343,9 +349,39 @@
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<!-- Popup menu end-->
|
<!-- Popup menu end-->
|
||||||
</div>
|
|
||||||
|
<!-- Where to buy modal -->
|
||||||
|
<aside role="modal" class="rc-modal rc-hidden" data-modal-target="modal-whereToBuy">
|
||||||
|
<div class="rc-modal__container">
|
||||||
|
<header class="rc-modal__header">
|
||||||
|
<button class="rc-btn rc-icon rc-btn--icon-label rc-modal__close rc-close--xs rc-iconography" data-modal-trigger="modal-whereToBuy">关闭</button>
|
||||||
|
</header>
|
||||||
|
<section class="rc-modal__content rc-scroll--y">
|
||||||
|
<div class="rc-margin-top--md">
|
||||||
|
<h2 class="rc-gamma rc-text--center">我能在哪买到Royal Canin 的产品</h2>
|
||||||
|
<p class='rc-text--center'>
|
||||||
|
您可以点击下面的链接进入到我们的电商店铺
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="rc-btn-group">
|
||||||
|
<a href="https://royalcanin.tmall.com/shop/view_shop.htm?spm=a1z10.3-b-s.w5001-17212536142.3.1284526cyHC5If&scene=taobao_shop" target='_blank' class="rc-btn rc-btn--one ts-flex-center">
|
||||||
|
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/tm-logo.png" alt="天猫旗舰店" />
|
||||||
|
</a>
|
||||||
|
<a href="https://mall.jd.com/index-650686.html" class="rc-btn rc-btn--one ts-flex-center ts-btn-img--70" target='_blank'>
|
||||||
|
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/jd-logo.png" alt="京东旗舰店" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Where to buy modal end -->
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
const isReload={
|
||||||
|
needload:false
|
||||||
|
};
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -368,10 +404,10 @@ export default {
|
|||||||
this.usermessage=usernot;
|
this.usermessage=usernot;
|
||||||
}
|
}
|
||||||
//debugger;
|
//debugger;
|
||||||
if(isInitialized)
|
if(isReload.needload)
|
||||||
location.reload();
|
location.reload();
|
||||||
if(!isInitialized)
|
if(isReload.needload==false)
|
||||||
isInitialized=true;
|
isReload.needload=true;
|
||||||
//console.log(this.loginornot);
|
//console.log(this.loginornot);
|
||||||
/*
|
/*
|
||||||
if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild)
|
if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild)
|
||||||
|
|||||||
@ -1,55 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<footer class="rc-bg-colour--interface-dark rc-padding-bottom--sm" role="contentinfo">
|
<footer class="rc-bg-colour--interface-dark rc-padding-bottom--sm" role="contentinfo">
|
||||||
<div class="rc-max-width--lg rc-scroll--y">
|
<div class="rc-max-width--lg rc-scroll--y">
|
||||||
|
<div class="footer-block1 rc-layout-container rc-five-column rc-padding-x--xs rc-border-colour--interface rc-md-up rc-padding-left--none">
|
||||||
|
<div class="rc-column rc-padding-left--none" data-component="nav-track" data-nav-name="Footer navigation">
|
||||||
|
<nav class="rc-menubar">
|
||||||
|
<ul class="rc-list rc-list--blank rc-list--inverse" style="background-color: transparent;">
|
||||||
|
<li class="rc-list__item">
|
||||||
|
<a href="javascript:;" class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-pin--xs rc-brand3" data-ref="nav-link" role="menuitem" title="Where to buy" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='footerBtnClick' evt-val='在哪购买'>在哪里购买</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rc-divider rc-md-up"></div>
|
||||||
|
|
||||||
<div class="footer-block2 rc-layout-container rc-three-column rc-padding-x--xs rc-border-colour--interface">
|
<div class="footer-block2 rc-layout-container rc-three-column rc-padding-x--xs rc-border-colour--interface">
|
||||||
<div class="rc-column rc-double-width rc-padding-x--xs">
|
<div class="rc-column rc-double-width rc-padding-x--xs">
|
||||||
<nav class="rc-padding-x--xs" data-toggle-group="mobile" data-toggle-effect="rc-expand--vertical" role="navigation" data-component="nav-track" data-nav-name="Footer navigation">
|
<nav class="rc-padding-x--xs" data-toggle-group="mobile" data-toggle-effect="rc-expand--vertical" role="navigation" data-component="nav-track" data-nav-name="Footer navigation">
|
||||||
<ul class="rc-list ts-list--four-column rc-list--blank rc-list--align rc-list--inverse" role="menubar">
|
<ul class="rc-list ts-list--four-column rc-list--blank rc-list--align rc-list--inverse" role="menubar">
|
||||||
<li class="rc-list__item rc-list__item--group" role="none">
|
<li class="rc-list__item rc-list__item--group" role="none">
|
||||||
<a href="https://royalcanin.com.cn/cats" class="rc-list__header" role="menuitem" id="nav-footer-top-1" data-toggle="nav-footer-1">猫</a>
|
<a href="#cats" class="rc-list__header" role="menuitem" id="nav-footer-top-1" data-toggle="nav-footer-1">猫</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" role="menu" id="nav-footer-1" aria-labelledby="nav-footer-top-1">
|
<ul class="rc-list rc-list--blank rc-list--align" role="menu" id="nav-footer-1" aria-labelledby="nav-footer-top-1">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
|
<a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a>
|
<a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/getting-a-kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a cat">想养只猫</a>
|
<a href="#cats/getting-a-kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a cat">想养只猫</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Kitten">幼猫</a>
|
<a href="#cats/kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Kitten">幼猫</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/kitten/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
<a href="#cats/kitten/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-list__item--group" role="none">
|
<li class="rc-list__item rc-list__item--group" role="none">
|
||||||
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header" role="menuitem" id="nav-footer-top-2" data-toggle="nav-footer-2"
|
<a href="#dogs" class="rc-list__header" role="menuitem" id="nav-footer-top-2" data-toggle="nav-footer-2">
|
||||||
>犬
|
犬
|
||||||
</a>
|
</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-2" aria-labelledby="nav-footer-top-2" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-2" aria-labelledby="nav-footer-top-2" role="menu">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
|
<a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a>
|
<a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/getting-a-puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a dog">想养只犬</a>
|
<a href="#dogs/getting-a-puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a dog">想养只犬</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Puppy">幼犬</a>
|
<a href="#dogs/puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Puppy">幼犬</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/puppy/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
<a href="#dogs/puppy/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-list__item--group" role="none">
|
<li class="rc-list__item rc-list__item--group" role="none">
|
||||||
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3"
|
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3">
|
||||||
>定制营养方案
|
定制营养方案
|
||||||
</a>
|
</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-3" aria-labelledby="nav-footer-top-3" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-3" aria-labelledby="nav-footer-top-3" role="menu">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
@ -61,15 +75,15 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-list__item--group" role="none">
|
<li class="rc-list__item rc-list__item--group" role="none">
|
||||||
<a href="https://royalcanin.com.cn/about" class="rc-list__header" id="nav-footer-top-4" data-toggle="nav-footer-4" role="menuitem"
|
<a href="#about" class="rc-list__header" id="nav-footer-top-4" data-toggle="nav-footer-4" role="menuitem">
|
||||||
>关于我们
|
关于我们
|
||||||
</a>
|
</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-4" aria-labelledby="nav-footer-top-4" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-4" aria-labelledby="nav-footer-top-4" role="menu">
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/about#growth-phase1" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our history">我们的历史</a>
|
<a href="#about#growth-phase1" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our history">我们的历史</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/about" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our values">我们的价值观</a>
|
<a href="#about" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our values">我们的价值观</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
@ -84,6 +98,9 @@
|
|||||||
|
|
||||||
<div class="rc-layout-container rc-one-column rc-md-down">
|
<div class="rc-layout-container rc-one-column rc-md-down">
|
||||||
<div class="rc-column rc-padding-x--none">
|
<div class="rc-column rc-padding-x--none">
|
||||||
|
<a href="javascript:;" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='footererBtnClick' evt-val='在哪购买' class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-bag--xs rc-brand3" title="Where to buy" role="menuitem">
|
||||||
|
在哪购买
|
||||||
|
</a>
|
||||||
<!--
|
<!--
|
||||||
<a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-language--xs rc-brand3" role="menuitem" data-modal-trigger="country-lang-selector">
|
<a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-language--xs rc-brand3" role="menuitem" data-modal-trigger="country-lang-selector">
|
||||||
Language
|
Language
|
||||||
@ -203,9 +220,9 @@
|
|||||||
<div class="rc-column rc-text--center rc-padding-y--none">
|
<div class="rc-column rc-text--center rc-padding-y--none">
|
||||||
<span class="">法律声明 ©2021 ROYAL CANIN, Inc.</span>
|
<span class="">法律声明 ©2021 ROYAL CANIN, Inc.</span>
|
||||||
<br/>
|
<br/>
|
||||||
<a target='_blank' href='https://royalcanin.com.cn/privacy'><span class="">隐私声明</span></a>
|
<a target='_blank' href='#privacy'><span class="">隐私声明</span></a>
|
||||||
|
|
|
|
||||||
<a target='_blank' href='https://royalcanin.com.cn/declaration'><span class="">法律声明</span></a>
|
<a target='_blank' href='#declaration'><span class="">法律声明</span></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
24974
rc-busness/package-lock.json
generated
Normal file
24974
rc-busness/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -75,7 +75,79 @@ export default {
|
|||||||
userstates:0,
|
userstates:0,
|
||||||
userimage: require("../../assets/image/unused.png"),
|
userimage: require("../../assets/image/unused.png"),
|
||||||
newlist: [
|
newlist: [
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
catimage: require("../../assets/image/unused.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
catimage: require("../../assets/image/unused.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
catimage: require("../../assets/image/unused.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
discountlist: [
|
discountlist: [
|
||||||
{
|
{
|
||||||
@ -90,7 +162,27 @@ export default {
|
|||||||
],
|
],
|
||||||
|
|
||||||
preferential: [
|
preferential: [
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
price: "30",
|
||||||
|
pricestype: "新客优惠券",
|
||||||
|
special: "全场每满299-30",
|
||||||
|
period: "有效期",
|
||||||
|
starttime: "2021.11.29-2022.01.28",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
userdiscount:[],
|
userdiscount:[],
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
@ -189,5 +281,6 @@ import Myheader from "~/components/header.vue";
|
|||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
// 手机端
|
// 手机端
|
||||||
|
@import url("../../assets/css/global.less");
|
||||||
@import url("../../assets/css/discount.less");
|
@import url("../../assets/css/discount.less");
|
||||||
</style>
|
</style>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="settlement">
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<tabs></tabs>
|
<tabs></tabs>
|
||||||
<div class="online"></div>
|
<div class="online"></div>
|
||||||
@ -8,99 +8,98 @@
|
|||||||
<div class="rc-border"></div>
|
<div class="rc-border"></div>
|
||||||
<div
|
<div
|
||||||
class="mypersonal"
|
class="mypersonal"
|
||||||
v-for="(item, index) in useraddress"
|
v-for="(dataaddress, index) in useraddress"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="item.isDefault ? 'active' : ''"
|
|
||||||
@click="selectAddress(item)"
|
|
||||||
>
|
>
|
||||||
<div class="edit" @click="editAddress(item)">
|
|
||||||
<i class="el-icon-edit"></i>编辑
|
|
||||||
</div>
|
|
||||||
<div class="my-delivery">
|
<div class="my-delivery">
|
||||||
<span>{{ item.recipient }}</span>
|
<span>{{ dataaddress.state }}</span>
|
||||||
<i>{{ item.recipientPhone }}</i>
|
<i>{{ dataaddress.tel }}</i>
|
||||||
</div>
|
</div>
|
||||||
<div class="per-delivery">
|
<div class="per-delivery">
|
||||||
<span>{{ item.address }}</span>
|
<span>{{ dataaddress.address }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mypersonal">
|
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
||||||
<div
|
<div>
|
||||||
class="my-delivery"
|
<div class="rc-center">
|
||||||
@click="addAddress"
|
<div class="rc-usermain">
|
||||||
style="justify-content: center"
|
<div class="rc-image">
|
||||||
>
|
<img :src="item.catimage" alt="" />
|
||||||
<i class="el-icon-plus"></i>
|
</div>
|
||||||
<span>添加收货地址</span>
|
<div class="rc-right">
|
||||||
|
<div class="rc-usercenter">
|
||||||
|
<em>{{ item.usereat }}</em>
|
||||||
|
<div class="rc-userright">
|
||||||
|
<span>规格:{{ item.num }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rc-userbottom">
|
||||||
|
<span>数量:{{ item.specification }}件</span>
|
||||||
|
<i>￥{{ item.userprice }}</i>
|
||||||
|
<div class="rc-bottom">
|
||||||
|
<span>联系客服申请售后</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="rc-bottomm">
|
||||||
</div>
|
<span>联系客服申请售后</span>
|
||||||
<div class="rc-contline"></div>
|
|
||||||
<div class="rc-main" v-for="(item, index) in goldmedal" :key="index">
|
|
||||||
<div class="rc-usermain">
|
|
||||||
<div class="rc-image">
|
|
||||||
<img :src="item.productImg" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="rc-right">
|
|
||||||
<div class="rc-usercenter">
|
|
||||||
<h3>{{ item.productName }}</h3>
|
|
||||||
<p>规格:{{ item.specifications }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-userbottom">
|
<!-- <div class="rc-userbottomm">
|
||||||
<p>￥{{ item.productPrice }}</p>
|
<i>￥{{ item.userprice }}</i>
|
||||||
<p>X{{ item.buyCount }}</p>
|
<span>{{ item.orderstype }}</span>
|
||||||
<p class="price">￥{{ item.productPrice }}</p>
|
<i>￥{{ item.userprice }}</i>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rc-contline"></div>
|
|
||||||
<div class="rc-main">
|
|
||||||
<div class="rc-merchandise">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span>配送方式:</span>
|
|
||||||
<i>{{ shopprice.price }}</i>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span> 活动促销:</span>
|
|
||||||
<i>{{ shopprice.distribution }}</i>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>商品总价:</span>
|
|
||||||
<i class="red">{{ sumPrice }}</i>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>配送费用:</span>
|
|
||||||
<i class="red">{{ shopprice.payment }}</i>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rc-contline"></div>
|
<div class="rc-merchandise">
|
||||||
<div class="rc-main">
|
<ul>
|
||||||
<div class="rc-foot">
|
<li>
|
||||||
<div class="rc-foo">
|
<span>配送方式:</span>
|
||||||
<div>
|
<i>{{ shopprice.price }}</i>
|
||||||
<i>合计金额:</i>
|
</li>
|
||||||
<em>{{ sumPrice }}</em>
|
<li>
|
||||||
</div>
|
<span> 活动促销:</span>
|
||||||
<div style="font-weight: bold">
|
<i>{{ shopprice.distribution }}</i>
|
||||||
<span @click="jiesuan()">提交订单</span>
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>商品总价:</span>
|
||||||
|
<i>{{ shopprice.promotion }}</i>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>配送费用:</span>
|
||||||
|
<i>{{ shopprice.payment }}</i>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="rc-foot">
|
||||||
|
<div class="rc-foo">
|
||||||
|
<div style="padding-top:55px">
|
||||||
|
<i>合计金额:</i>
|
||||||
|
<em>￥167.00</em>
|
||||||
|
</div>
|
||||||
|
<div style="padding-bottom:40px">
|
||||||
|
<span>再次购买</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="rc-button">
|
||||||
|
<div class="rc-left">
|
||||||
|
<span>总计：</span>
|
||||||
|
<em>￥167.00</em>
|
||||||
|
</div>
|
||||||
|
<strong ref="rccolor" @click="jiesuan">结算</strong>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<el-dialog :visible.sync="dialogAdd" class="diallog_width" width="'100%">
|
|
||||||
<div class="tc dl_cont" v-if="dialogAdd">
|
|
||||||
<myAddress
|
|
||||||
@isClose="dialogCtrl"
|
|
||||||
:editAddressData="editAddressData"
|
|
||||||
></myAddress>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -113,18 +112,23 @@ export default {
|
|||||||
meta: {title: '订单结算'},
|
meta: {title: '订单结算'},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
goldmedal: [],
|
goldmedal:[],
|
||||||
addressstype: null,
|
addressstype: null,
|
||||||
orderstatus: "",
|
orderstatus: '',
|
||||||
userisdelivery: "待收货",
|
userisdelivery:'待收货',
|
||||||
userdelivery: "派送中",
|
userdelivery: "派送中",
|
||||||
isshow: true,
|
isshow:true,
|
||||||
leftico: require("../../assets/image/rc-left.png"),
|
leftico: require("../../assets/image/rc-left.png"),
|
||||||
orderNumber: "",
|
orderNumber:'',
|
||||||
dialogAdd: false,
|
|
||||||
editAddressData: {},
|
// delivery: [
|
||||||
curAddress: {},
|
// {
|
||||||
saveType: "",
|
// state: "派送中",
|
||||||
|
// time: "2021-11-21",
|
||||||
|
// address: "广州天河—刘某某【15124617917】正在派送中",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
|
||||||
useraddress: [
|
useraddress: [
|
||||||
{
|
{
|
||||||
state: "李某某",
|
state: "李某某",
|
||||||
@ -166,166 +170,40 @@ export default {
|
|||||||
promotion: "￥167.00",
|
promotion: "￥167.00",
|
||||||
payment: "￥0.00 ",
|
payment: "￥0.00 ",
|
||||||
},
|
},
|
||||||
|
information: {
|
||||||
|
reference: "1111111111111111",
|
||||||
|
ordertime: "2012-12-01 11:20:00",
|
||||||
|
paymentmethod: "微信支付",
|
||||||
|
distribution: "快递",
|
||||||
|
trackingnumber: "11111111111111",
|
||||||
|
catimage: require("../../assets/image/rc-left.png"),
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
// 总价计算
|
|
||||||
sumPrice() {
|
|
||||||
return this.goldmedal
|
|
||||||
.reduce((pre, cur) => {
|
|
||||||
console.log(pre);
|
|
||||||
return pre + cur.buyCount * cur.productPrice;
|
|
||||||
}, 0);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
async getAddressList() {
|
jiesuan(){
|
||||||
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
|
// let userdata=this.$route.query.wxdata
|
||||||
let { data } = await memberAddress("getAll", { memberId: memberId });
|
|
||||||
data.forEach((item) => {
|
|
||||||
item.address =
|
|
||||||
item.provinceName +
|
|
||||||
item.cityName +
|
|
||||||
item.districtName +
|
|
||||||
item.detailAddress;
|
|
||||||
});
|
|
||||||
this.useraddress = data;
|
|
||||||
console.log(data);
|
|
||||||
},
|
|
||||||
editAddress(item) {
|
|
||||||
this.editAddressData = {
|
|
||||||
memberId: item.memberId,
|
|
||||||
name: item.recipient,
|
|
||||||
tel: item.recipientPhone,
|
|
||||||
detailAddress: item.detailAddress,
|
|
||||||
id: item.id,
|
|
||||||
city: item.cityName,
|
|
||||||
districtId: item.districtName,
|
|
||||||
saveType: "edit",
|
|
||||||
};
|
|
||||||
this.dialogAdd = true;
|
|
||||||
},
|
|
||||||
addAddress() {
|
|
||||||
this.editAddressData = {};
|
|
||||||
this.dialogAdd = true;
|
|
||||||
},
|
|
||||||
selectAddress(cur) {
|
|
||||||
this.useraddress.forEach((item) => {
|
|
||||||
if (item.id == cur.id) {
|
|
||||||
item.isDefault = true;
|
|
||||||
} else {
|
|
||||||
item.isDefault = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
dialogCtrl(parm) {
|
|
||||||
this.dialogAdd = parm;
|
|
||||||
this.getAddressList();
|
|
||||||
},
|
|
||||||
async jiesuan() {
|
|
||||||
let orderAddress = this.useraddress.filter(item=>item.isDefault)
|
|
||||||
let postData =[]
|
|
||||||
this.goldmedal.forEach(item=>{
|
|
||||||
let oneProduct={
|
|
||||||
productName: item.productName,
|
|
||||||
buyCount: item.buyCount,
|
|
||||||
productId:item. productCode,
|
|
||||||
payAmount: item.productPrice,
|
|
||||||
memberId: item.memberId,
|
|
||||||
phoneNumber: item.mobile,
|
|
||||||
// couponId: "NGQ2022P12",
|
|
||||||
// couponTypeId: "4",
|
|
||||||
// couponName: "内购券",
|
|
||||||
// couponAmount: "0.3175",
|
|
||||||
// couponCode: "0007792402",
|
|
||||||
orderAddress: {
|
|
||||||
addressPhoneNumber:orderAddress[0].recipientPhone,
|
|
||||||
addressUserName:orderAddress[0].recipient,
|
|
||||||
addressProvinceName: orderAddress[0].provinceName,
|
|
||||||
addressCityName:orderAddress[0].cityName,
|
|
||||||
addressCountyName: orderAddress[0].districtName,
|
|
||||||
addressDetailInfo: orderAddress[0].detailAddress,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
postData.push(oneProduct)
|
|
||||||
})
|
|
||||||
// let postData = [
|
|
||||||
// {
|
|
||||||
// productName: this.goldmedal.productName,
|
|
||||||
// buyCount: "2",
|
|
||||||
// productId: "20030200",
|
|
||||||
// payAmount: "147.00",
|
|
||||||
// memberId: "844350",
|
|
||||||
// phoneNumber: "18112621098",
|
|
||||||
// couponId: "NGQ2022P12",
|
|
||||||
// couponTypeId: "4",
|
|
||||||
// couponName: "内购券",
|
|
||||||
// couponAmount: "0.3175",
|
|
||||||
// couponCode: "0007792402",
|
|
||||||
// orderAddress: {
|
|
||||||
// addressPhoneNumber:orderAddress[0].recipientPhone,
|
|
||||||
// addressUserName:orderAddress[0].recipient,
|
|
||||||
// addressProvinceName: orderAddress[0].provinceName,
|
|
||||||
// addressCityName:orderAddress[0].cityName,
|
|
||||||
// addressCountyName: orderAddress[0].districtName,
|
|
||||||
// addressDetailInfo: orderAddress[0].detailAddress,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// // {
|
|
||||||
// // productName: "幼猫全价粮",
|
|
||||||
// // buyCount: "2",
|
|
||||||
// // productId: "20030200",
|
|
||||||
// // payAmount: "147.00",
|
|
||||||
// // memberId: "844350",
|
|
||||||
// // phoneNumber: "18112621098",
|
|
||||||
// // couponId: "NGQ2022P12",
|
|
||||||
// // couponTypeId: "4",
|
|
||||||
// // couponName: "内购券",
|
|
||||||
// // couponAmount: "0.3175",
|
|
||||||
// // couponCode: "0007792402",
|
|
||||||
// // orderAddress: {
|
|
||||||
// // addressPhoneNumber: "13602898745",
|
|
||||||
// // addressUserName: "张三",
|
|
||||||
// // addressProvinceName: "江苏省",
|
|
||||||
// // addressCityName: "无锡市",
|
|
||||||
// // addressCountyName: "江阴市",
|
|
||||||
// // addressDetailInfo: "东苑一村",
|
|
||||||
// // },
|
|
||||||
// // },
|
|
||||||
// ];
|
|
||||||
// let res = await generateOrderWX(postData);
|
|
||||||
// if (res.success) {
|
|
||||||
// let payData=res.data
|
|
||||||
let userPayData={
|
|
||||||
postData:postData,
|
|
||||||
wxPay:'weixin://wxpay/bizpayurl?pr=4RJbokxzz'
|
|
||||||
|
|
||||||
}
|
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/personal/userpay",
|
path: "/personal/userpay",
|
||||||
query: {
|
query: {
|
||||||
userPayData: userPayData,
|
wxdata:userdata
|
||||||
},
|
},
|
||||||
});
|
|
||||||
// }
|
});
|
||||||
},
|
},
|
||||||
async canceldanhao(orderNumber) {
|
async canceldanhao(orderNumber){
|
||||||
let data = await userin(orderNumber);
|
let data=await userin(orderNumber);
|
||||||
console.log(data);
|
console.log(data);
|
||||||
// this.goldmedal=data;
|
// this.goldmedal=data;
|
||||||
console.log(this.goldmedal);
|
console.log(this.goldmedal);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.goldmedal = this.$route.query.list;
|
this.addressstype = this.$route.query.stype;
|
||||||
console.log(this.$route.query.list);
|
this.orderNumber=this.$route.query.orderNumber;
|
||||||
this.getAddressList();
|
this.canceldanhao(this.orderNumber)
|
||||||
// this.addressstype = this.$route.query.stype;
|
console.log(this.$refs.rccolor)
|
||||||
// this.orderNumber = this.$route.query.orderNumber;
|
this.$refs.rccolor.style.background='gray';
|
||||||
// this.canceldanhao(this.orderNumber);
|
|
||||||
// console.log(this.$refs.rccolor);
|
|
||||||
// this.$refs.rccolor.style.background = "gray";
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
|
|||||||
@ -1,320 +1,578 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page_modules">
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="cont_modules">
|
<div class="rc-main">
|
||||||
<tabs></tabs>
|
<div class="online" style="height:3px;width:93%;margin:0 auto;background:#DDDDDD;margin-top:0.23rem"></div>
|
||||||
<el-row class="order_info">
|
<div class="rc-hearder">
|
||||||
<el-col :span="6" class="ph_hidden">
|
<div class="rc-userpay">
|
||||||
<ul class="li_inline">
|
<div class="paysucess">
|
||||||
<li class="sucess_img">
|
<span>订单提交成功等待付款</span>
|
||||||
<img src="../../assets/image/usersucess.png" alt="" />
|
|
||||||
</li>
|
</div>
|
||||||
<li class="ready">
|
<div class="rc-all">
|
||||||
<p>订单提交成功</p>
|
<div class="rc-payprice">
|
||||||
<p>等待付款</p>
|
<span>付款金额:</span>
|
||||||
</li>
|
<i>{{ userprice }}</i>
|
||||||
</ul>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="ph_hidden"> </el-col>
|
|
||||||
<el-col :span="6" class="ready_right">
|
|
||||||
<div class="inline_right">
|
|
||||||
<p>付款金额:</p>
|
|
||||||
<p class="price">{{ info.userprice }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="inline_right">
|
<div class="rc-receiving">
|
||||||
<p>收货信息:</p>
|
<span>收货信息:</span>
|
||||||
<p>{{ info.userinformation }}</p>
|
<i>{{ userinformation }}</i>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
||||||
</div>
|
<div class="rc-usermaina">
|
||||||
<div class="rc_contline"></div>
|
<div class="rc-title" id="qrcode" ref="qrcode" >
|
||||||
<div class="cont_modules">
|
</div>
|
||||||
<div class="pay_title color_red">请选择支付方式</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="rc_contline"></div>
|
</div>
|
||||||
<div class="cont_modules">
|
<div class="rc-paystype">
|
||||||
<div class="pay_list">
|
<span>请选择支付方式</span>
|
||||||
<ul>
|
</div>
|
||||||
<li
|
|
||||||
class="pay_item"
|
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
||||||
|
<div class="paystype">
|
||||||
|
<div
|
||||||
|
class="payAlipay"
|
||||||
v-for="(item, index) in userpaystype"
|
v-for="(item, index) in userpaystype"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="selectGoods(item, index)"
|
@click="selectGoods(item, index)"
|
||||||
:class="activeIndex == index ? 'active' : ''"
|
:class="activeIndex == index ? 'active' : 'unactive'"
|
||||||
>
|
>
|
||||||
<img :src="item.payimage" alt="" />
|
<div class="rc-payype">
|
||||||
<span>{{ item.paytype }}支付</span>
|
<img :src="item.payimage" alt="" />
|
||||||
</li>
|
<span>{{ item.price }}</span>
|
||||||
</ul>
|
</div>
|
||||||
|
<div class="user-righticon">
|
||||||
|
<img src="../../assets/image/rc-left.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="paycord" @click="usershow()" id="qrcode" ref="qrcode">
|
||||||
|
<!-- <img src="../../assets/image/rc-discount.png" alt="" />
|
||||||
|
<span>微信扫一扫立即支付</span> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="paycord">
|
|
||||||
<div id="qrcode" ref="qrcode" class="qrcode"></div>
|
|
||||||
<span>{{ paytype }}扫一扫立即支付</span>
|
<el-dialog
|
||||||
|
:visible.sync="dialogInfo1"
|
||||||
|
hegight="700px"
|
||||||
|
@close='closeDialog'
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="rc-header">
|
||||||
|
<div class="rc-titled" >
|
||||||
|
<img src="../../assets/image/usersucess.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="rc-logmain">
|
||||||
|
<h3>支付成功</h3>
|
||||||
|
<span>{{usermessage}}</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="userer">
|
||||||
|
|
||||||
|
<img src="../../assets/image/rc-discount.png" alt="">
|
||||||
|
<span>微信扫一扫，识别二维码</span>
|
||||||
|
<i>加入社群0元试用商品随单发放</i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-dialog
|
|
||||||
:visible.sync="dialogSuccess"
|
</el-dialog>
|
||||||
@close="closeDialogSuccess"
|
|
||||||
>
|
|
||||||
<div class="tc dl_cont">
|
|
||||||
<div class="dl_img">
|
|
||||||
<img src="../../assets/image/usersucess.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<h3 class="title">支付成功</h3>
|
|
||||||
<p>您的商品我们正在抓紧打包，请耐心等候！</p>
|
|
||||||
<div class="line_dashed"></div>
|
|
||||||
<div class="userer">
|
|
||||||
<img
|
|
||||||
width="210"
|
|
||||||
height="210"
|
|
||||||
src="../../assets/image/rc-discount.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<p>微信扫一扫，识别二维码</p>
|
|
||||||
<p class="tips">加入社群0元试用商品随单发放</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
<el-dialog
|
|
||||||
:visible.sync="dialogFail"
|
|
||||||
@close="closeDialogFail"
|
|
||||||
>
|
|
||||||
<div class="tc dl_cont">
|
|
||||||
<div class="dl_img">
|
|
||||||
<img src="../../assets/pay/fail.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<h3 class="title">支付失败</h3>
|
|
||||||
<p>请返回商品结算页面重新支付</p>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Myheader from "~/components/header.vue";
|
import Myheader from "~/components/header.vue";
|
||||||
import tabs from "@/components/tabs.vue";
|
import QRCode from 'qrcodejs2'
|
||||||
import QRCode from "qrcodejs2";
|
import { generateOrderWX } from "../../ajax/getData";
|
||||||
|
|
||||||
import { generateOrderAlipay, updateOrderWX } from "../../ajax/getData";
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeIndex: 0,
|
userdata:null,
|
||||||
isSucess: false,
|
activeIndex: 0,
|
||||||
paytype: "微信",
|
usermessage:'您的商品我们正在抓紧打包，请耐心等候！',
|
||||||
|
userprice: "￥167.00",
|
||||||
|
userinformation: "李某某 151****7917",
|
||||||
userpaystype: [
|
userpaystype: [
|
||||||
{
|
{
|
||||||
paytype: "微信",
|
price: "支付宝支付",
|
||||||
payimage: require("../../assets/pay/wx.png"),
|
payimage: require("../../assets/image/rc-cat.png"),
|
||||||
|
catimage: require("../../assets/image/rc-left.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
paytype: "支付宝",
|
price: "微信支付",
|
||||||
payimage: require("../../assets/pay/zfb.png"),
|
payimage: require("../../assets/image/rc-cat.png"),
|
||||||
|
catimage: require("../../assets/image/rc-left.png"),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
dialogSuccess: true,
|
dialogInfo1:false,
|
||||||
dialogFail: false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
// 总价计算
|
|
||||||
info() {
|
|
||||||
let obj = {
|
|
||||||
userprice: this.$route.query.userPayData.postData[0].payAmount,
|
|
||||||
userinformation:
|
|
||||||
this.$route.query.userPayData.postData[0].orderAddress
|
|
||||||
.addressUserName +
|
|
||||||
" " +
|
|
||||||
this.$route.query.userPayData.postData[0].orderAddress
|
|
||||||
.addressPhoneNumber,
|
|
||||||
};
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.qrcode(this.$route.query.userPayData.wxPay);
|
this.userdata=this.$route.query.wxdata;
|
||||||
|
this.userpay(this.userdata);
|
||||||
|
console.log(this.userdata);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
|
||||||
|
this.userpay();
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
closeDialogSuccess() {
|
|
||||||
this.qrcode = null;
|
closeDialog(){
|
||||||
this.$router.push({
|
this.qrcode=null;
|
||||||
path: "/index",
|
console.log('关闭的')
|
||||||
});
|
},
|
||||||
|
|
||||||
|
async userpay(userdata) {
|
||||||
|
|
||||||
|
console.log("-----");
|
||||||
|
let data = await generateOrderWX();
|
||||||
|
console.log();
|
||||||
|
this.qrcode(userdata);
|
||||||
},
|
},
|
||||||
closeDialogFail() {
|
qrcode (e) {
|
||||||
this.qrcode = null;
|
console.log(e);
|
||||||
this.$router.push({
|
let qrcode = new QRCode('qrcode',{
|
||||||
path: "/personal/useraddress",
|
width: 150, // 设置宽度，单位像素
|
||||||
});
|
height: 150, // 设置高度，单位像素
|
||||||
},
|
text: e// 设置二维码内容或跳转地址
|
||||||
qrcode(e) {
|
})
|
||||||
let qrcode = new QRCode("qrcode", {
|
|
||||||
width: 260, // 设置宽度，单位像素
|
},
|
||||||
height: 260, // 设置高度，单位像素
|
selectGoods(item,index){
|
||||||
text: e, // 设置二维码内容或跳转地址
|
let _that=this
|
||||||
});
|
_that.dialogInfo1=true;
|
||||||
},
|
_that.activeIndex=index;
|
||||||
async selectGoods(item, index) {
|
if(item.price=='微信支付'){
|
||||||
this.activeIndex = index;
|
// this.userpay();
|
||||||
this.paytype = item.paytype;
|
|
||||||
if (index == 1) {
|
}
|
||||||
//支付宝
|
},
|
||||||
let res = await generateOrderAlipay(
|
usershow(){
|
||||||
this.$route.query.userPayData.postData
|
console.log('这是支付')
|
||||||
);
|
this.dialogInfo1=true;
|
||||||
if (res.success) {
|
|
||||||
this.qrcode(res.data);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
//支付监听
|
|
||||||
async updateOrderWX() {
|
|
||||||
let res = await updateOrderWX();
|
|
||||||
if (res.success) {
|
|
||||||
this.dialogSuccess = true;
|
|
||||||
clearInterval(this.time);
|
|
||||||
} else {
|
|
||||||
this.dialogFail = true;
|
|
||||||
clearInterval(this.time);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
tabs,
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped >
|
<style lang="less" scoped >
|
||||||
.sucess_img {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.order_info {
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
.info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.ready {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #e2001a;
|
|
||||||
}
|
|
||||||
.ready_right {
|
|
||||||
line-height: 200%;
|
|
||||||
padding-top: 8px;
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #e2001a;
|
|
||||||
}
|
|
||||||
.pay_title {
|
|
||||||
font-size: 26px;
|
|
||||||
padding: 26px 0;
|
|
||||||
border-bottom: 1px solid #d7d7d7;
|
|
||||||
}
|
|
||||||
.pay_list {
|
|
||||||
padding: 20px 0;
|
|
||||||
.pay_item {
|
|
||||||
float: left;
|
|
||||||
margin-right: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
border: 1px solid #333333;
|
|
||||||
padding: 5px 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
|
||||||
border: 1px solid #e2001a;
|
|
||||||
color: #e2001a;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
margin-right: 5px;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.paycord {
|
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
|
||||||
.qrcode {
|
|
||||||
margin: 0 auto 10px;
|
|
||||||
width: 260px;
|
|
||||||
height: 260px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dl_width {
|
|
||||||
width: 440px;
|
|
||||||
}
|
|
||||||
.dl_cont {
|
|
||||||
color: #333;
|
|
||||||
margin-top: -10px;
|
|
||||||
.title {
|
|
||||||
font-size: 26px;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
.line_dashed {
|
|
||||||
border-bottom: 2px dashed #999999;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.dl_img {
|
|
||||||
img {
|
|
||||||
width: 90px;
|
|
||||||
height: 90px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
padding: 0px 0 20px;
|
|
||||||
}
|
|
||||||
.userer {
|
|
||||||
img {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tips {
|
|
||||||
color: #e2001a;
|
|
||||||
margin-top: 30px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.ph_hidden {
|
|
||||||
|
.rc-usermaina{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.rc-userpay{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.ready_right {
|
/deep/.el-dialog {
|
||||||
|
width:80%;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
.rc-header{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
h3{
|
||||||
|
color:#333333;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
.rc-title{
|
||||||
|
display: flex;
|
||||||
|
margin-top: 30px;
|
||||||
|
display: none;
|
||||||
|
img{
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
margin-left: 40px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-titled{
|
||||||
|
img{
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.userer{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
img{
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
display: block;
|
||||||
|
margin-top: 32px;
|
||||||
|
color: #E1001A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
margin-top: 24%;
|
||||||
}
|
.paysucess{
|
||||||
.pay_title {
|
display: none;
|
||||||
padding: 10px;
|
}
|
||||||
}
|
.paycord{
|
||||||
.pay_list {
|
display: none;
|
||||||
padding: 0;
|
}
|
||||||
.pay_item {
|
.rc-hearder {
|
||||||
float: none;
|
width: 93%;
|
||||||
border: none;
|
margin: 0 auto;
|
||||||
border-bottom: 1px solid #d7d7d7;
|
i em {
|
||||||
height: 50px;;
|
font-style: normal;
|
||||||
margin-right: 0;
|
}
|
||||||
align-items: center;
|
.rc-userpay {
|
||||||
justify-content: left;
|
width: 100%;
|
||||||
justify-content: left; &.active {
|
// height: 96px;
|
||||||
border: none;
|
display: flex;
|
||||||
border-bottom: 1px solid #d7d7d7;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.rc-all{
|
||||||
|
height: 96px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
// display: none;
|
||||||
|
}
|
||||||
|
.rc-payprice {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
color: #e1001a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-receiving {
|
||||||
|
margin-top: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 16px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 53px;
|
||||||
|
color: #e1001a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-paystype {
|
||||||
|
height:64px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: #e1001a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.payAlipay {
|
||||||
|
.user-righticon{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img{
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 80px;
|
||||||
|
border-bottom: 1px solid #d8d8d8;
|
||||||
|
.rc-payype {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333333;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.paycord{ display:none;}
|
}
|
||||||
|
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||||
|
.rc-usermaina{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.el-dialog {
|
||||||
|
width: 440px;
|
||||||
|
height: 677px;
|
||||||
|
}
|
||||||
|
.rc-header{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
h3{
|
||||||
|
color:#333333;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
.rc-titled{
|
||||||
|
img{
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-title{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
display: block;
|
||||||
|
top: 59%;
|
||||||
|
img{
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.userer{
|
||||||
|
img{
|
||||||
|
width: 210px;
|
||||||
|
height: 210px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
display: block;
|
||||||
|
margin-top: 32px;
|
||||||
|
color: #E1001A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-main {
|
||||||
|
.active {
|
||||||
|
border: 1px solid #E2001A;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 200px;
|
||||||
|
height: 56px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.unactive {
|
||||||
|
border:1px solid #3D3D3D;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 200px;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
width: 100%;
|
||||||
|
.rc-hearder {
|
||||||
|
width: 93%;
|
||||||
|
margin: 0 auto;
|
||||||
|
i em {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.rc-userpay {
|
||||||
|
width: 100%;
|
||||||
|
height: 96px;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
.paysucess{
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span{
|
||||||
|
font-size: 20px;
|
||||||
|
display: block;
|
||||||
|
width: 61%;
|
||||||
|
color: #E2001A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-all{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.rc-payprice {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
color: #e1001a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-receiving {
|
||||||
|
margin-top: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 16px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 53px;
|
||||||
|
color: #e1001a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.paystype{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.rc-paystype {
|
||||||
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
font-size: 26px;
|
||||||
|
|
||||||
|
color: #E2001A;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.payAlipay {
|
||||||
|
|
||||||
|
margin-left: 20px;
|
||||||
|
.user-righticon{
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
img{
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 56px;
|
||||||
|
|
||||||
|
.rc-payype {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #E2001A;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.paycord{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
img{
|
||||||
|
width: 260px;
|
||||||
|
height: 260px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
font-size: 20px;
|
||||||
|
display: block;
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -73,222 +73,159 @@
|
|||||||
<div class="online"></div>
|
<div class="online"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="rc-productdeta" v-if="userbuy">
|
||||||
|
<div class="rc-main">
|
||||||
|
<div class="rc-prodtop">
|
||||||
|
<div>
|
||||||
|
<i class="ts-row-title">商品规格：</i>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-carousel__gallery-thumbnails-wrapper">
|
<!-- <em v-for="(item, index) in stype" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
|
||||||
<div class="rc-carousel rc-carousel__gallery-thumbnails">
|
|
||||||
<!-- Thunb images-->
|
|
||||||
<div
|
|
||||||
class="
|
|
||||||
rc-carousel__gallery-thumbnail
|
|
||||||
tns-item tns-slide-active
|
|
||||||
"
|
|
||||||
v-for="(item, index) in productAttachmentList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="rc-img--square">
|
|
||||||
<img :src="item.attachmentPath" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Thunb images end-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="ts-product-header rc-column"
|
|
||||||
id="328b2e5f-6904-4cac-9709-51ed18d2500f"
|
|
||||||
>
|
|
||||||
<div class="usermain" v-for="(item, index) in newlist" :key="index">
|
|
||||||
<div class="online bold rc-md-down"></div>
|
|
||||||
<div class="rc-main">
|
|
||||||
<div class="rc-title">
|
|
||||||
<h2>{{ item.productName }}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="online rc-md-down"></div>
|
|
||||||
<div class="rc-main">
|
|
||||||
<div class="productdetails">
|
|
||||||
<div class="rc-productdetail">
|
|
||||||
<i class="ts-row-title">商品价格：</i>
|
|
||||||
<span class="ts-realprice">￥{{ item.rsp }}</span>
|
|
||||||
<span class="ts-remove ts-ecprice"
|
|
||||||
>￥{{ item.ecPrice }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="rc-productdetai">
|
|
||||||
<div>
|
|
||||||
<i class="ts-row-title">活动促销：</i>
|
|
||||||
<span>全场商品限时优惠</span>
|
|
||||||
</div>
|
|
||||||
<em class="ts-right-arr" @click="userget()">立即领取</em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="online bold rc-md-down"></div>
|
|
||||||
<div class="rc-main rc-md-up">
|
|
||||||
<div class="online"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rc-productdeta" v-if="userbuy">
|
|
||||||
<div class="rc-main">
|
|
||||||
<div class="rc-prodtop">
|
|
||||||
<div>
|
|
||||||
<i class="ts-row-title">商品规格：</i>
|
|
||||||
</div>
|
|
||||||
<!-- <em v-for="(item, index) in stype" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
|
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</em> -->
|
</em> -->
|
||||||
|
|
||||||
<em class="active">
|
<em class='active'>
|
||||||
{{ item.specifications }}
|
{{ item.specifications }}
|
||||||
</em>
|
</em>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<div class="rc-produnnum">
|
<div class="rc-produnnum">
|
||||||
<div><i class="ts-row-title">商品数量：</i></div>
|
<div><i class="ts-row-title">商品数量：</i></div>
|
||||||
<img
|
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
|
||||||
src="../../assets/image/userjian.png"
|
<strong>{{sales_num}}</strong>
|
||||||
alt=""
|
<img src="../../assets/image/userjia.png" alt="" @click="plus()" />
|
||||||
@click="sub()"
|
</div>
|
||||||
/>
|
</div>
|
||||||
<strong>{{ sales_num }}</strong>
|
<div class="rc-main rc-md-up">
|
||||||
<img
|
<div class="online"></div>
|
||||||
src="../../assets/image/userjia.png"
|
</div>
|
||||||
alt=""
|
<div class="online rc-md-down"></div>
|
||||||
@click="plus()"
|
<div class="rc-main">
|
||||||
/>
|
<div class="certification">
|
||||||
</div>
|
<ul>
|
||||||
</div>
|
<li>
|
||||||
<div class="rc-main rc-md-up">
|
<span
|
||||||
<div class="online"></div>
|
><i class="ts-row-title">服务说明：</i><i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
|
||||||
</div>
|
>
|
||||||
<div class="online rc-md-down"></div>
|
</li>
|
||||||
<div class="rc-main">
|
<li>
|
||||||
<div class="rc-button" v-if="userbuy">
|
<span
|
||||||
<span @click="usertanchu(item, 0)">加入购物车</span>
|
><i class="ts-row-title">商品运费：</i><i>全场包邮(港澳除外)</i></span
|
||||||
<span @click="usertanchu(item, 1)">立即购买</span>
|
>
|
||||||
</div>
|
</li>
|
||||||
<div class="certification">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span
|
|
||||||
><i class="ts-row-title">服务说明：</i
|
|
||||||
><i
|
|
||||||
>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i
|
|
||||||
></span
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span
|
|
||||||
><i class="ts-row-title">商品运费：</i
|
|
||||||
><i>全场包邮(港澳除外)</i></span
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<span
|
<span
|
||||||
><i class="ts-row-title">商品编号：</i
|
><i class="ts-row-title">商品编号：</i><i>{{ item.brandCode }}</i></span
|
||||||
><i>{{ item.brandCode }}</i></span
|
>
|
||||||
>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
</div>
|
||||||
|
<div class="rc-button" v-if="!userbuy">
|
||||||
|
<span @click="usertanchu(item,0)">加入购物车</span>
|
||||||
|
<span @click="usertanchu(item,1)">立即购买</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="online bold rc-md-down"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rc-footimage rc-main">
|
||||||
|
<img :src=item.showImgFile alt="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="rc-fixright" >
|
||||||
|
<ul >
|
||||||
|
<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)">
|
||||||
|
<img :src="userfixed.catimage" alt="">
|
||||||
|
<span> {{userfixed.title}}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tuntop" @click="toTop" v-show="gotop">
|
||||||
|
<img src="../../assets/image/turntop.png" alt="">
|
||||||
|
<span>回到顶部</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Myfooter v-on:litentop='showmesg'></Myfooter>
|
||||||
|
</div>
|
||||||
|
<el-dialog
|
||||||
|
:visible.sync="dialogInfo1"
|
||||||
|
hegight="700px"
|
||||||
|
@close='userclose'
|
||||||
|
>
|
||||||
|
<div class="rs-dis">
|
||||||
|
<div
|
||||||
|
class="rc-discount"
|
||||||
|
v-for="(item, index) in usernewlist"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img :src="userimage" alt="" />
|
||||||
|
<div class="rc-contair">
|
||||||
|
<div class="rc-left">
|
||||||
|
<div>
|
||||||
|
<i>￥</i><span>{{ item.couponAmount }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online bold rc-md-down"></div>
|
<div class="rc-right">
|
||||||
</div>
|
<i>
|
||||||
</div>
|
{{ item.couponDesc }}
|
||||||
</div>
|
</i>
|
||||||
</div>
|
<div class="rc-main" id="rc-main">
|
||||||
<div class="rc-footimage rc-main">
|
<span>有效期</span>
|
||||||
<!-- <img :src="item.showImgFile" alt="" /> -->
|
<em>{{ item.validTo }}</em>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-fixright">
|
<div class="rc-footer">
|
||||||
<ul>
|
<span @click="usergetconf(item)">立即领取</span>
|
||||||
<li
|
</div>
|
||||||
v-for="(userfixed, index) in fixedlist"
|
|
||||||
:key="index"
|
|
||||||
@click="lianxi(userfixed, index)"
|
|
||||||
>
|
|
||||||
<img :src="userfixed.catimage" alt="" />
|
|
||||||
<span> {{ userfixed.title }}</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="tuntop" @click="toTop" v-show="gotop">
|
|
||||||
<img src="../../assets/image/turntop.png" alt="" />
|
|
||||||
<span>回到顶部</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Myfooter v-on:litentop="showmesg"></Myfooter>
|
|
||||||
</div>
|
|
||||||
<el-dialog :visible.sync="dialogInfo1" @close="userclose">
|
|
||||||
<div class="rs-dis">
|
|
||||||
<div
|
|
||||||
class="rc-discount"
|
|
||||||
v-for="(item, index) in usernewlist"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<img :src="userimage" alt="" />
|
|
||||||
<div class="rc-contair">
|
|
||||||
<div class="rc-left">
|
|
||||||
<div><i>￥</i><span v-text="item.price"></span></div>
|
|
||||||
<p v-text="item.pricestype"></p>
|
|
||||||
</div>
|
|
||||||
<div class="rc-right">
|
|
||||||
<i>
|
|
||||||
{{ item.special }}
|
|
||||||
</i>
|
|
||||||
<div >
|
|
||||||
<span>有效期</span>
|
|
||||||
<em>{{ item.starttime }}</em>
|
|
||||||
</div>
|
|
||||||
<div class="rc-footer">
|
|
||||||
<span @click="usergetconf(item)">立即领取</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
|
||||||
<el-dialog :visible.sync="dialogInfo2" @close="userclose">
|
</el-dialog>
|
||||||
<div class="rc-headera">
|
<el-dialog
|
||||||
<div class="rc-title">
|
:visible.sync="dialogInfo2"
|
||||||
<img src="../../assets/error.png" alt="" />
|
@close='userclose'
|
||||||
</div>
|
>
|
||||||
<div class="rc-logmain">
|
<div class="rc-headera">
|
||||||
<h3>温馨提示</h3>
|
<div class="rc-title">
|
||||||
<span>请先点击下方进行登录/注册</span>
|
<img src="../../assets/error.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<nuxt-link :to="`/userlogin/login/`">
|
<div class="rc-logmain">
|
||||||
<div class="userer">
|
<h3>温馨提示</h3>
|
||||||
<span>立即登录</span>
|
<span>请先点击下方进行登录/注册</span>
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
</div>
|
||||||
</div>
|
<nuxt-link :to="`/userlogin/login/`">
|
||||||
</el-dialog>
|
<div class="userer">
|
||||||
<div class="rc-button rc-md-down">
|
<span>立即登录</span>
|
||||||
<span @click="usertanchu(item, 0)">加入购物车</span>
|
|
||||||
<span @click="usertanchu(item, 1)">立即购买</span>
|
</div>
|
||||||
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</el-dialog>
|
||||||
|
<div class="rc-button rc-md-down">
|
||||||
|
<span @click="usertanchu(item,0)">加入购物车</span>
|
||||||
|
<span @click="usertanchu(item,1)">立即购买</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Myheader from "~/components/header.vue";
|
import Myheader from "~/components/header.vue";
|
||||||
import tabs from "@/components/tabs.vue";
|
import tabs from "@/components/tabs.vue";
|
||||||
import unlogin from "~/components/unlogin.vue";
|
import unlogin from "~/components/unlogin.vue";
|
||||||
import { mapMutations } from "vuex";
|
import { mapMutations } from "vuex";
|
||||||
import Myfooter from "~/components/rc-footer.vue";
|
import Myfooter from "~/components/rc-footer.vue";
|
||||||
import {
|
import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
|
||||||
goodsmessage,
|
const settings = require("@/config");
|
||||||
getConfig,
|
|
||||||
postCourseId,
|
|
||||||
getdraw,
|
|
||||||
alldiscount,
|
|
||||||
} from "../../ajax/getData";
|
|
||||||
const settings = require("@/config");
|
|
||||||
export default {
|
export default {
|
||||||
// middleware: 'metaTitle',
|
// middleware: 'metaTitle',
|
||||||
// // middleware: 'metaTitle',
|
// // middleware: 'metaTitle',
|
||||||
@ -331,57 +268,27 @@ export default {
|
|||||||
catimage: require("../../assets/image/unused.png"),
|
catimage: require("../../assets/image/unused.png"),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
fixedlist: [
|
fixedlist: [
|
||||||
{
|
{
|
||||||
title: "购物车",
|
title: "购物车",
|
||||||
catimage: require("../../assets/buy.png"),
|
catimage: require("../../assets/buy.png"),
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "在线客服",
|
title: "在线客服",
|
||||||
catimage: require("../../assets/service.png"),
|
catimage: require("../../assets/service.png"),
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "营养专家",
|
title: "营养专家",
|
||||||
catimage: require("../../assets/consult.png"),
|
catimage: require("../../assets/consult.png"),
|
||||||
},
|
|
||||||
],
|
|
||||||
productAttachmentList: [
|
|
||||||
{
|
|
||||||
id: 15901,
|
|
||||||
attachmentType: 1,
|
|
||||||
attachmentPath:
|
|
||||||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384849415_BLUWOs.jpg",
|
|
||||||
sort: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 15902,
|
|
||||||
attachmentType: 1,
|
|
||||||
attachmentPath:
|
|
||||||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384851821_jFleXA.jpg",
|
|
||||||
sort: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 15903,
|
|
||||||
attachmentType: 1,
|
|
||||||
attachmentPath:
|
|
||||||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384853824_GrxAIp.jpg",
|
|
||||||
sort: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 15904,
|
|
||||||
attachmentType: 1,
|
|
||||||
attachmentPath:
|
|
||||||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384856077_9FbE1z.jpg",
|
|
||||||
sort: 4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 15905,
|
|
||||||
attachmentType: 1,
|
|
||||||
attachmentPath:
|
|
||||||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384859055_iPkFXi.jpg",
|
|
||||||
sort: 5,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
||||||
newlist: [
|
newlist: [
|
||||||
{
|
{
|
||||||
price: "167.00",
|
price: "167.00",
|
||||||
@ -402,9 +309,11 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
|
||||||
|
|
||||||
components: {
|
},
|
||||||
|
|
||||||
|
|
||||||
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
tabs,
|
tabs,
|
||||||
unlogin,
|
unlogin,
|
||||||
@ -436,32 +345,8 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tabs,
|
|
||||||
magnifier,
|
|
||||||
unlogin,
|
|
||||||
Myfooter,
|
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
// window.addEventListener("scroll", this.handleScroll, true);
|
|
||||||
if (this.usermessage !== "" || this.usermessage.data !== undefined) {
|
|
||||||
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
|
||||||
let stype = this.$route.query.stype;
|
|
||||||
this.productCode = this.$route.query.productCode;
|
|
||||||
console.log(this.productCode);
|
|
||||||
this.userquery(this.productCode);
|
|
||||||
console.log(this.userlistmenu);
|
|
||||||
this.$nextTick(() => {});
|
|
||||||
if (stype == 1) {
|
|
||||||
this.userbuy = true;
|
|
||||||
} else if (stype == 2) {
|
|
||||||
console.log("这是要消失的");
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.userbuy = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(["changemessage"]),
|
...mapMutations(["changemessage"]),
|
||||||
handleScroll(e)
|
handleScroll(e)
|
||||||
@ -480,64 +365,48 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
lianxi(item, index) {
|
lianxi(item,index){
|
||||||
console.log(item, index);
|
console.log(item,index);
|
||||||
if (item.title == "在线客服") {
|
if(item.title=='在线客服'){
|
||||||
var option = {
|
var option = {
|
||||||
customer: {
|
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
|
||||||
id: "",
|
}
|
||||||
name: "",
|
dis_livchat(option);
|
||||||
email: "",
|
}
|
||||||
mobile: "",
|
if(item.title=='购物车'){
|
||||||
memberId: "999999",
|
console.log('---12314');
|
||||||
},
|
this.$router.push({
|
||||||
};
|
path: "../../myorder/userrecord",
|
||||||
dis_livchat(option);
|
|
||||||
}
|
});
|
||||||
if (item.title == "购物车") {
|
}
|
||||||
console.log("---12314");
|
if(item.title=='营养专家'){
|
||||||
this.$router.push({
|
var option = {
|
||||||
path: "../../myorder/userrecord",
|
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
|
||||||
});
|
}
|
||||||
}
|
dis_livchat(option);
|
||||||
if (item.title == "营养专家") {
|
}
|
||||||
var option = {
|
|
||||||
customer: {
|
},
|
||||||
id: "",
|
toTop() {
|
||||||
name: "",
|
|
||||||
email: "",
|
|
||||||
mobile: "",
|
|
||||||
memberId: "999999",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
dis_livchat(option);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toTop() {
|
|
||||||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
// 实现滚动效果
|
// 实现滚动效果
|
||||||
const timeTop = setInterval(() => {
|
const timeTop = setInterval(() => {
|
||||||
document.body.scrollTop =
|
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
|
||||||
document.documentElement.scrollTop =
|
|
||||||
top -=
|
|
||||||
400;
|
|
||||||
if (top <= 0) {
|
if (top <= 0) {
|
||||||
clearInterval(timeTop);
|
clearInterval(timeTop);
|
||||||
}
|
}
|
||||||
}, 10);
|
}, 10);
|
||||||
},
|
},
|
||||||
showmesg() {
|
showmesg(){
|
||||||
console.log("-----");
|
console.log('-----');
|
||||||
this.toTop();
|
this.toTop();
|
||||||
},
|
},
|
||||||
toTop() {
|
toTop() {
|
||||||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
// 实现滚动效果
|
// 实现滚动效果
|
||||||
const timeTop = setInterval(() => {
|
const timeTop = setInterval(() => {
|
||||||
document.body.scrollTop =
|
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
|
||||||
document.documentElement.scrollTop =
|
|
||||||
top -=
|
|
||||||
400;
|
|
||||||
if (top <= 0) {
|
if (top <= 0) {
|
||||||
clearInterval(timeTop);
|
clearInterval(timeTop);
|
||||||
}
|
}
|
||||||
@ -545,106 +414,137 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
|
|||||||
},
|
},
|
||||||
|
|
||||||
//领取优惠券
|
//领取优惠券
|
||||||
usergetconf(item) {
|
usergetconf(item){
|
||||||
console.log(item);
|
console.log(item);
|
||||||
if (this.usermessage.data !== "" || this.usermessage.data !== undefined) {
|
if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
||||||
this.getconf(this.usermessage.data.id, item.couponId);
|
this.getconf(this.usermessage.data.id,item.couponId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
//获取用户领取的优惠券
|
//获取用户领取的优惠券
|
||||||
async getconf(memberId, couponId) {
|
async getconf(memberId,couponId) {
|
||||||
let data = await getConfig(memberId, couponId);
|
let data = await getConfig(memberId,couponId);
|
||||||
if (data) {
|
if(data){
|
||||||
this.$message({
|
|
||||||
type: "warning",
|
|
||||||
message: data.msg,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
this.$message({
|
||||||
|
type: 'warning',
|
||||||
|
message: data.msg
|
||||||
|
});
|
||||||
|
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// changeName(newName){
|
// changeName(newName){
|
||||||
// this.name = newName;
|
// this.name = newName;
|
||||||
// },
|
// },
|
||||||
|
|
||||||
|
|
||||||
|
userclose(){
|
||||||
|
console.log('这是关闭的');
|
||||||
|
this.userlist=[];
|
||||||
|
},
|
||||||
|
async userquery() {
|
||||||
|
console.log("-----");
|
||||||
|
|
||||||
userclose() {
|
|
||||||
console.log("这是关闭的");
|
|
||||||
this.userlist = [];
|
|
||||||
},
|
|
||||||
async userquery() {
|
|
||||||
let data = await goodsmessage(this.productCode);
|
let data = await goodsmessage(this.productCode);
|
||||||
if (data) {
|
if(data){
|
||||||
this.newlist = data.data;
|
this.newlist=data.data;
|
||||||
|
|
||||||
}
|
}
|
||||||
this.productAttachmentList = this.newlist[0].productAttachmentList;
|
|
||||||
|
this.userlistmenu=this.newlist[0].productAttachmentList;
|
||||||
|
let changemess=JSON.stringify(this.userlistmenu);
|
||||||
|
console.log(changemess);
|
||||||
|
this.changemessage({ data: changemess });
|
||||||
|
this.parent_msg=this.userlistmenu;
|
||||||
|
console.log( this.userlistmenu)
|
||||||
|
|
||||||
this.userlistmenu = this.newlist[0].productAttachmentList;
|
|
||||||
let changemess = JSON.stringify(this.userlistmenu);
|
|
||||||
// console.log(changemess);
|
|
||||||
// this.productAttachmentList = this.userlistmenu;
|
|
||||||
this.changemessage({ data: changemess });
|
|
||||||
this.parent_msg = this.userlistmenu;
|
|
||||||
// console.log(this.userlistmenu);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//获取用户领取的优惠券
|
//获取用户领取的优惠券
|
||||||
async userdraw(mobile) {
|
async userdraw(mobile) {
|
||||||
let data = await getdraw(mobile);
|
let data = await getdraw(mobile);
|
||||||
if (data) {
|
if(data){
|
||||||
this.drawlist = data.data;
|
this.drawlist=data.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//获取所有的优惠券
|
//获取所有的优惠券
|
||||||
async alldrawlist(memberId) {
|
async alldrawlist(memberId) {
|
||||||
let data = await alldiscount(memberId);
|
let data = await alldiscount(memberId);
|
||||||
let userlist = [];
|
let userlist=[];
|
||||||
let menulsit = [];
|
let menulsit=[];
|
||||||
if (data) {
|
if(data){
|
||||||
this.alldraw = data;
|
this.alldraw=data;
|
||||||
// console.log(this.alldraw.data);
|
// console.log(this.alldraw.data);
|
||||||
let alllist = [];
|
let alllist=[];
|
||||||
this.userlist = this.alldraw.data;
|
this.userlist=this.alldraw.data;
|
||||||
this.userlist.forEach((element, index) => {
|
this.userlist.forEach((element,index)=>{
|
||||||
if (typeof element.productCodes == "string") {
|
if(typeof element.productCodes=='string'){
|
||||||
userlist.push(element);
|
userlist.push(element);
|
||||||
// let s=element.productCodes.split(',');
|
// let s=element.productCodes.split(',');
|
||||||
// console.log(s.indexOf(this.productCode) != -1 )
|
// console.log(s.indexOf(this.productCode) != -1 )
|
||||||
// console.log('这是字符串')
|
// console.log('这是字符串')
|
||||||
}
|
|
||||||
});
|
|
||||||
let menualist = [];
|
|
||||||
userlist.filter((item) => {
|
|
||||||
console.log(item);
|
|
||||||
item.productCodes = item.productCodes.split(",");
|
|
||||||
item.productCodes.forEach((element) => {
|
|
||||||
if (element == this.productCode && item.activityId !== 10) {
|
|
||||||
console.log(element);
|
|
||||||
console.log(this.productCode);
|
|
||||||
menualist.push(item);
|
|
||||||
|
|
||||||
console.log("----");
|
}
|
||||||
}
|
|
||||||
});
|
})
|
||||||
});
|
let menualist=[];
|
||||||
// this.usernewlist = menualist;
|
userlist.filter(item=>{
|
||||||
// console.log(this.usernewlist);
|
console.log(item);
|
||||||
|
item.productCodes=item.productCodes.split(',')
|
||||||
|
item.productCodes.forEach(element=>{
|
||||||
|
if(element==this.productCode &&item.activityId!==10){
|
||||||
|
console.log(element)
|
||||||
|
console.log(this.productCode)
|
||||||
|
menualist.push(item);
|
||||||
|
|
||||||
|
console.log('----');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
this.usernewlist=menualist;
|
||||||
|
console.log(this.usernewlist);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
plus(num, index) {
|
plus(num,index){
|
||||||
this.sales_num = parseInt(this.sales_num) + 1;
|
|
||||||
console.log(this.sales_num);
|
this.sales_num= parseInt(this.sales_num) + 1;
|
||||||
},
|
console.log( this.sales_num);
|
||||||
// 数量减方法
|
} ,
|
||||||
sub(num, index) {
|
// 数量减方法
|
||||||
if (this.sales_num <= 1) {
|
sub(num,index){
|
||||||
this.sales_num = 1;
|
if( this.sales_num <= 1){
|
||||||
} else {
|
this.sales_num = 1;
|
||||||
this.sales_num = parseInt(this.sales_num) - 1;
|
}
|
||||||
|
else{
|
||||||
|
this.sales_num = parseInt(this.sales_num) - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
async courseId(item) {
|
||||||
|
console.log(item);
|
||||||
|
console.log(this.usermessage);
|
||||||
|
// let userid=JSON.parse(location.getItem('userInfo'));
|
||||||
|
// let mobile=JSON.parse(location.getItem('userInfo'));
|
||||||
|
// console.log(userid,mobile);
|
||||||
|
let data = await postCourseId( this.productCode,this.sales_num,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.productName,item.basePrice,item.specifications);
|
||||||
|
if(data){
|
||||||
|
this.productlist=data;
|
||||||
}
|
}
|
||||||
|
console.log(data);
|
||||||
},
|
},
|
||||||
usertanchu(item,orderm){
|
usertanchu(item,orderm){
|
||||||
|
|
||||||
@ -688,44 +588,19 @@ usertanchu(item,orderm){
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
usertanchu(item, orderm) {
|
selectsearch(item, index) {
|
||||||
let user = localStorage.getItem("userInfo");
|
|
||||||
if (user == undefined || user == null || user == "") {
|
this.activeIndexa=index;
|
||||||
this.dialogInfo2 = true;
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
this.courseId(item);
|
|
||||||
if (orderm == 0) {
|
|
||||||
this.$message({
|
|
||||||
type: "warning",
|
|
||||||
message: "加入购物车成功",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (orderm == 1) {
|
|
||||||
this.$router.push({
|
|
||||||
path: "/myorder/userrecord",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
userget() {
|
|
||||||
let user = localStorage.getItem("userInfo");
|
|
||||||
if (user == undefined || user == null || user == "") {
|
|
||||||
this.dialogInfo2 = true;
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
this.userdraw(this.usermessage.data.mobile);
|
|
||||||
this.alldrawlist(this.usermessage.data.id);
|
|
||||||
this.dialogInfo1 = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectsearch(item, index) {
|
|
||||||
this.activeIndexa = index;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
onceproduct() {},
|
onceproduct(){
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|||||||
@ -63,7 +63,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { areaList } from '@vant/area-data';
|
||||||
import Myheader from '~/components/header.vue'
|
import Myheader from '~/components/header.vue'
|
||||||
import MyFooter from '~/components/rc-footer.vue'
|
import MyFooter from '~/components/rc-footer.vue'
|
||||||
export default {
|
export default {
|
||||||
@ -94,6 +94,7 @@ export default {
|
|||||||
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
areaList,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@ -64,7 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="rc-layout-container rc-two-column rc-button">
|
<div class="rc-layout-container rc-two-column rc-button">
|
||||||
<div class="rc-column rc-text--left">
|
<div class="rc-column rc-text--left">
|
||||||
<a href="https://royalcanin.com.cn/privacy" target="_blank" class="rc-styled-link"><span>隐私政策</span></a>
|
<a href="#" class="rc-styled-link"><span>隐私政策</span></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-column rc-text--right">
|
<div class="rc-column rc-text--right">
|
||||||
<nuxt-link :to="`/userlogin/login/`" class="rc-styled-link">
|
<nuxt-link :to="`/userlogin/login/`" class="rc-styled-link">
|
||||||
@ -84,7 +84,6 @@
|
|||||||
@click="register()"
|
@click="register()"
|
||||||
class="ts-standard-btn ts-standard-btn--max-width"
|
class="ts-standard-btn ts-standard-btn--max-width"
|
||||||
value="注册"
|
value="注册"
|
||||||
readonly=""
|
|
||||||
></input
|
></input
|
||||||
>
|
>
|
||||||
<!-- <van-divider @click="toLogin">注册账户</van-divider> -->
|
<!-- <van-divider @click="toLogin">注册账户</van-divider> -->
|
||||||
|
|||||||
@ -84,7 +84,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="rc-layout-container rc-two-column rc-button">
|
<div class="rc-layout-container rc-two-column rc-button">
|
||||||
<div class="rc-column rc-text--left">
|
<div class="rc-column rc-text--left">
|
||||||
<a href="https://royalcanin.com.cn/privacy" target="_blank" class="rc-styled-link"><span>隐私政策</span></a>
|
<a href="#" class="rc-styled-link"><span>隐私政策</span></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-column rc-text--right">
|
<div class="rc-column rc-text--right">
|
||||||
<nuxt-link :to="`/userlogin/edit/`" class="rc-styled-link">
|
<nuxt-link :to="`/userlogin/edit/`" class="rc-styled-link">
|
||||||
@ -104,7 +104,6 @@
|
|||||||
@click="register()"
|
@click="register()"
|
||||||
class="ts-standard-btn ts-standard-btn--max-width"
|
class="ts-standard-btn ts-standard-btn--max-width"
|
||||||
value="登录"
|
value="登录"
|
||||||
readonly=""
|
|
||||||
></input
|
></input
|
||||||
>
|
>
|
||||||
<!-- <van-divider @click="toLogin">注册账户</van-divider> -->
|
<!-- <van-divider @click="toLogin">注册账户</van-divider> -->
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user