This commit is contained in:
952108534@qq.com 2022-01-20 11:52:43 +08:00
parent bfe208efb6
commit e86acd1e85
16 changed files with 27452 additions and 2508 deletions

View File

@ -8,38 +8,17 @@ body{
.fade-leave-active {
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 {
position: fixed;
left: 50%;
margin-left: -1.56rem;
top: 50%;
margin-top: -3.75rem;
background: url(../image/onloading.png) center center no-repeat;
width: 3.12rem;
background-size: contain;
height: 3.12rem;
height: 7.5rem;
z-index: 1000;
animation: rolling 4s infinite;
-webkit-animation:rolling 4s infinite;
}
@ -69,6 +48,8 @@ body{
}
//用户光点
.rc-screen-reader{
width: 0.81rem;
height: 0.81rem;
border-radius: 50%;
position: absolute;
background-color: red;
@ -78,13 +59,6 @@ body{
width: 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 {
display: block;
max-width: 100%;
@ -111,8 +85,7 @@ img, picture {
li{
border: 1px solid #D7D7D7;
display: inline-flex;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-radius: 4px;
flex-direction: column;
max-width:10rem;
.rc-column
@ -144,7 +117,7 @@ img, picture {
}
img{
width:10rem;
min-height:10rem;
height:10rem;
object-fit: contain;
display: flex;
margin: 0 auto;
@ -256,12 +229,13 @@ img, picture {
right: 0;
top: 30%;
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;
z-index:3;
ul{
width: 60px;
height: 181px;
box-shadow: 0px 0px 6px rgb(0 0 0 / 10%);
background-color: white;
display: flex;
flex-direction: column;
@ -339,9 +313,6 @@ img, picture {
html {
//font-size:100px;
}
.rc-list__link.ts-login--xs .rc-screen-reader{
left:7%;
}
.rc-md-up {
display: none!important;
}
@ -352,7 +323,9 @@ img, picture {
margin-top: 90px;
}
.rc-list__header {
background: none;
padding: .5rem 0;
border-bottom: none;
}
.ts-right-arr {
border-bottom:1px solid #E1001A;
@ -443,13 +416,8 @@ img, picture {
display:block;
li{
max-width:20rem;
min-width:18.75rem;
width:22.8vw;
//margin-right:.875rem;
margin-left:2vw;
padding-left:1px;
padding-right:1px;
box-sizing: border-box;
margin-left:2.2vw;
.rc-column{
span{
font-size:1.875rem;
@ -464,7 +432,7 @@ img, picture {
}
}
img{
width:100%;
width:21.7vw;
max-width:320px;
min-width:160px;
}
@ -571,40 +539,35 @@ img, picture {
}
h2{
font-size:20px;
padding-bottom:1rem;
}
.ts-scrollable
{
padding-bottom:1rem;
scrollbar-width: thin;
li
{
margin-left: 30px;
width: 8.125rem;
height: 2.5rem;
//line-height: 40px;
line-height: 40px;
font-size: .875rem;
padding:.375rem;
}
/*
&::-webkit-scrollbar{
height: 6px;
width:50%;
background:transparent;
background:unset;
height:4px;
}
&::-webkit-scrollbar-thumb{
background-color:#d7d7d7;
border-radius:10px;
width:50%;
height:2px;
}
&::-webkit-scrollbar-track{
//background-color:#ddd;
background-color:transparent;
background-color:ddd;
height:2px;
}
&::-webkit-scrollbar-button{
background:unset;
}
/* */
*/
}
}
@ -626,10 +589,10 @@ img, picture {
{
.ts-product-list {
display:flex;
//justify-content: space-between;
justify-content: space-between;
li{
//margin-left:0;
//margin-right:0;
margin-left:0;
margin-right:0;
}
}
}

View File

@ -5,31 +5,13 @@
/deep/.van-swipe__indicator--active{
background-color: #E1001A;
}
.ts-carousel-indicator{
/deep/.swiper-pagination-bullet{
margin-left:.5rem;
}
/deep/.swiper-pagination-bullet-active{
background:#E2001A;
}
&.center{
width:100%;
text-align: center;
}
}
.ts-position-identifier{
}
.ul-zhuan,.ul-dog{
.rc-ma{
.ul-zhuan{
li{
background: unset;
background: unset;;
img{
border-radius: 50%;
}
&:first-child{
margin-left:0;
}
&.active {
img{
border: 3px solid #E2001A;
@ -44,59 +26,26 @@
}
}
}
}
}
.uservideo{
overflow: hidden;
video{
width:100%;
height: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;
height:100%;
width:auto;
}
}
@media screen and (max-width:768px){
.ul-dog{
justify-content: space-evenly;
img{
width:4rem;
height:auto;
}
li{
margin-top:1.875rem;
}
}
.ts-banner-swiper-container{
margin-bottom:2.5rem;
display: none;
}
.searchBara{
position: fixed;
width: 100%;
position: fixed;
top:3.75rem;
top:66px;
background: white;
z-index: 60;
z-index: 9999;
overflow-x: auto;
white-space: nowrap;
overflow-y:hidden;
@ -113,10 +62,12 @@
display: inline-block;
margin-left: 0.20rem;
text-align: center;
background: #F6F6F6;
border-radius: 50%;
opacity: 1;
}
}
.rc-login{
width: 92%;
margin:0 auto;
@ -149,6 +100,9 @@
}
}
}
.van-swipe{
z-index: 2;
}
.rc-usermessage{
span{
@ -166,11 +120,9 @@
object-fit: cover;
}
.van-swipe{
z-index: 2;
}
.van-swipe-item {
color: #fff;
height: 26.31rem;
width: 100%;
font-size: 0.20px;
text-align: center;
@ -184,35 +136,43 @@
#xxxFullScreen {
background-color: white;
margin-top: 0.40rem;
#swiper1 {
overflow: hidden;
}
.swiper-container{
height: 6.45rem;
}
.swiper-container {
.swiper-container, .swiper-container2 {
width: 100%;
// overflow: visible !important;
height: 100%;
position: relative;
}
.swiper-container .swiper-wrapper .swiper-slide {
#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;
height: 100%;
}
/* 下一张 */
.swiper-container .swiper-wrapper .swiper-slide-next {
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next {
margin-top: 0.05rem;
height: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide-active {
height: 100%;
}
.uservideo{
width: 100%;
height:auto;
max-height: 15.68rem;
display: block;
video{
max-width:100%;
@ -232,9 +192,8 @@
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: center;
align-items: center;
vertical-align: top;
}
img{
width: 10rem;
@ -250,7 +209,6 @@
margin-top: 1.25rem;
}
p{
color: #666666;
font-size: .875rem;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
@ -273,7 +231,7 @@
/* 中间的图片 */
.swiper-container .swiper-wrapper .swiper-slide-active {
height: 165px !important;
}
.swiperWrap{
height: 469px;
@ -281,6 +239,8 @@
img{
height: 469px;
width: 100%;
}
/deep/.swiper-pagination-bullet-active{
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{
// 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)
@ -367,21 +327,11 @@
.sw-center{
display: none;
}
.useraimg{
width: 100%;
// height: 29.31rem;
object-fit: cover;
}
.ts-banner-swiper-container{
position:relative;
img{
margin:0 auto;
}
.ts-carousel-indicator{
position:absolute;
bottom:.4rem;
}
}
.useraimg{
width: 100%;
// height: 29.31rem;
object-fit: cover;
}
.van-swipe-item {
color: #fff;
height: 100%;
@ -400,24 +350,27 @@
#xxxFullScreen {
background-color: white;
// margin-top: 100px;
#swiper1,#swiper2 {
#swiper1 {
width: 100%;
overflow: hidden;
margin-top: 2.31rem;
}
h2{
padding-bottom: 5rem;
}
}
.swiper-container2 {
width: 100%;
height: 38.6rem;
// overflow: visible !important;
position: relative;
}
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
width: 100%;
//height: 6.18rem;
}
}
/* 上一张 */
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
@ -565,18 +518,14 @@ img{
display: block;
}
img{
width:100%;
height: auto;
object-fit: contain;
width: 10vw;
height: 10vw;
display: block;
}
li{
width: 10vw;
max-width:11rem;
cursor: pointer;
font-size: 16px;
text-align: center;
overflow:hidden;
}
}
@ -591,7 +540,33 @@ img{
}
.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{
width: 100%;

View File

@ -1,9 +1,7 @@
.container{
min-height:100vh;
min-height:80vh;
height:100%;
background-color:#f6f6f6;
display: flex;
flex-direction: column;
}
.ts-max-width--460{
border-radius: 3px;
@ -55,13 +53,11 @@
}
.container {
font-size: 0.1rem;
background-color:#fff;
.van-field__body {
border-bottom: 1px solid red;
}
.content {
margin-top: 24px;
box-shadow: unset;
}
.userfoget {
font-size: 14px;

View File

@ -3,9 +3,7 @@
.rc-margin-bottom--lg{
margin: 0;
}
.usercontend {
display:inline-block;
}
@media screen and (max-width:768px){
.online{
@ -48,7 +46,7 @@ color: #FFFFFF;
}
.rc-max-width--xl{
padding: 24px 20px 24px 20px;
.rc-title {
display: flex;
align-items: center;
@ -117,6 +115,9 @@ color: #FFFFFF;
@media screen and (min-width: 769px)
{
.usercontend {
display:inline-block;
}
.usercontshow{
.rc-button{
display: none;

View File

@ -6,7 +6,6 @@
<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">
菜单
<em class="rc-screen-reader" v-show="loginornot"></em>
</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">
<span class="rc-screen-reader-text">
@ -46,7 +45,10 @@
<span class="rc-screen-reader-text">
登录
</span>
<em class="rc-screen-reader" v-show="loginornot"></em>
<em class="rc-screen-reader" v-show="loginornot">
</em>
</a>
<!--
@ -56,6 +58,11 @@
</span>
</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">
<span class="rc-screen-reader-text">translations.feature.headerbar.search</span>
</button>
@ -68,16 +75,16 @@
<div class="rc-container">
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__center">
<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 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 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 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>
</ul>
<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">
<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">
<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 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 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 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 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>
</ul>
</li>
<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">
<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">
<li class="rc-list__item">
<a href="#dogs/products" class="rc-list__link" role="menuitem">产品</a>
</li>
<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 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 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 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>
</ul>
</li>
<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">
<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">
<li class="rc-list__item">
<a href="#cats/products" class="rc-list__link" role="menuitem">猫系列</a>
@ -141,13 +148,13 @@
</li>
<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">
<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">
<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 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 class="rc-list__item">
@ -189,74 +196,74 @@
<section class="rc-max-width--xl">
<div class="rc-column rc-lg-up rc-padding--lg">
<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>
<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-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">
<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">
<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>
</li>
<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 class="rc-list__item">
<a href="#cats/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
</li>
<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 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 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 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>
</ul>
</li>
<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">
<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>
</li>
<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 class="rc-list__item">
<a href="#dogs/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
</li>
<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 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 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 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>
</ul>
</li>
<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">
<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>
</li>
<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 class="rc-list__item">
<a href="#cats/products" class="rc-list__link ca" role="menuitem">猫系列</a>
@ -268,16 +275,16 @@
</li>
<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">
<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>
</li>
<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 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 class="rc-list__item">
@ -304,14 +311,13 @@
<div class="rc-column rc-padding-x--none">
<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 class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="#about/contact">
与我们联系
</a>
</li>
<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-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">
@ -343,9 +349,39 @@
</section>
</div>
<!-- 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>
<script>
const isReload={
needload:false
};
export default {
data() {
return {
@ -368,10 +404,10 @@ export default {
this.usermessage=usernot;
}
//debugger;
if(isInitialized)
if(isReload.needload)
location.reload();
if(!isInitialized)
isInitialized=true;
if(isReload.needload==false)
isReload.needload=true;
//console.log(this.loginornot);
/*
if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild)

View File

@ -1,55 +1,69 @@
<template>
<footer class="rc-bg-colour--interface-dark rc-padding-bottom--sm" role="contentinfo">
<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="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">
<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">
<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">
<li class="rc-list__item">
<a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
</li>
<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 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 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 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>
</ul>
</li>
<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>
<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">
<a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
</li>
<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 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 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 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>
</ul>
</li>
<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>
<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">
@ -61,15 +75,15 @@
</ul>
</li>
<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>
<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">
<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 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>
</ul>
@ -84,6 +98,9 @@
<div class="rc-layout-container rc-one-column rc-md-down">
<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">
Language
@ -203,9 +220,9 @@
<div class="rc-column rc-text--center rc-padding-y--none">
<span class="">法律声明 ©2021 ROYAL CANIN, Inc.</span>
<br/>
<a target='_blank' href='https://royalcanin.com.cn/privacy'><span class="">隐私声明</span></a>
<a target='_blank' href='#privacy'><span class="">隐私声明</span></a>
&nbsp; | &nbsp;
<a target='_blank' href='https://royalcanin.com.cn/declaration'><span class="">法律声明</span></a>
<a target='_blank' href='#declaration'><span class="">法律声明</span></a>
</div>
</div>

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

View File

@ -75,7 +75,79 @@ export default {
userstates:0,
userimage: require("../../assets/image/unused.png"),
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: [
{
@ -90,7 +162,27 @@ export default {
],
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:[],
activeIndex: 0,
@ -189,5 +281,6 @@ import Myheader from "~/components/header.vue";
<style lang="less" scoped>
//
@import url("../../assets/css/global.less");
@import url("../../assets/css/discount.less");
</style>

View File

@ -1,5 +1,5 @@
<template>
<div class="settlement">
<div>
<Myheader></Myheader>
<tabs></tabs>
<div class="online"></div>
@ -8,55 +8,52 @@
<div class="rc-border"></div>
<div
class="mypersonal"
v-for="(item, index) in useraddress"
v-for="(dataaddress, index) in useraddress"
: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">
<span>{{ item.recipient }}</span>
<i>{{ item.recipientPhone }}</i>
<span>{{ dataaddress.state }}</span>
<i>{{ dataaddress.tel }}</i>
</div>
<div class="per-delivery">
<span>{{ item.address }}</span>
<span>{{ dataaddress.address }}</span>
</div>
</div>
<div class="mypersonal">
<div
class="my-delivery"
@click="addAddress"
style="justify-content: center"
>
<i class="el-icon-plus"></i>
<span>添加收货地址</span>
</div>
</div>
</div>
</div>
<div class="rc-contline"></div>
<div class="rc-main" v-for="(item, index) in goldmedal" :key="index">
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
<div>
<div class="rc-center">
<div class="rc-usermain">
<div class="rc-image">
<img :src="item.productImg" alt="" />
<img :src="item.catimage" alt="" />
</div>
<div class="rc-right">
<div class="rc-usercenter">
<h3>{{ item.productName }}</h3>
<p>规格:{{ item.specifications }}</p>
<em>{{ item.usereat }}</em>
<div class="rc-userright">
<span>规格:{{ item.num }}</span>
</div>
</div>
<div class="rc-userbottom">
<p>{{ item.productPrice }}</p>
<p>X{{ item.buyCount }}</p>
<p class="price">{{ item.productPrice }}</p>
<span>数量:{{ item.specification }}</span>
<i>{{ item.userprice }}</i>
<div class="rc-bottom">
<span>联系客服申请售后</span>
</div>
</div>
<div class="rc-bottomm">
<span>联系客服申请售后</span>
</div>
<!-- <div class="rc-userbottomm">
<i>{{ item.userprice }}</i>
<span>{{ item.orderstype }}</span>
<i>{{ item.userprice }}</i>
</div> -->
</div>
</div>
<div class="rc-contline"></div>
<div class="rc-main">
</div>
<div class="rc-merchandise">
<ul>
<li>
@ -69,38 +66,40 @@
</li>
<li>
<span>商品总价:</span>
<i class="red">{{ sumPrice }}</i>
<i>{{ shopprice.promotion }}</i>
</li>
<li>
<span>配送费用:</span>
<i class="red">{{ shopprice.payment }}</i>
<i>{{ shopprice.payment }}</i>
</li>
</ul>
</div>
</div>
<div class="rc-contline"></div>
<div class="rc-main">
<div class="rc-foot">
<div class="rc-foo">
<div>
<div style="padding-top:55px">
<i>合计金额:</i>
<em>{{ sumPrice }}</em>
<em>167.00</em>
</div>
<div style="font-weight: bold">
<span @click="jiesuan()">提交订单</span>
<div style="padding-bottom:40px">
<span>再次购买</span>
</div>
</div>
</div>
</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 class="rc-button">
<div class="rc-left">
<span>总计</span>
<em>167.00</em>
</div>
<strong ref="rccolor" @click="jiesuan">结算</strong>
</div>
</el-dialog>
</div>
</template>
@ -113,18 +112,23 @@ export default {
meta: {title: '订单结算'},
data() {
return {
goldmedal: [],
goldmedal:[],
addressstype: null,
orderstatus: "",
userisdelivery: "待收货",
orderstatus: '',
userisdelivery:'待收货',
userdelivery: "派送中",
isshow: true,
isshow:true,
leftico: require("../../assets/image/rc-left.png"),
orderNumber: "",
dialogAdd: false,
editAddressData: {},
curAddress: {},
saveType: "",
orderNumber:'',
// delivery: [
// {
// state: "",
// time: "2021-11-21",
// address: "广15124617917",
// },
// ],
useraddress: [
{
state: "李某某",
@ -166,166 +170,40 @@ export default {
promotion: "¥167.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: {
async getAddressList() {
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
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'
}
jiesuan(){
// let userdata=this.$route.query.wxdata
this.$router.push({
path: "/personal/userpay",
query: {
userPayData: userPayData,
wxdata:userdata
},
});
// }
},
async canceldanhao(orderNumber) {
let data = await userin(orderNumber);
},
async canceldanhao(orderNumber){
let data=await userin(orderNumber);
console.log(data);
// this.goldmedal=data;
// this.goldmedal=data;
console.log(this.goldmedal);
},
},
},
mounted() {
this.goldmedal = this.$route.query.list;
console.log(this.$route.query.list);
this.getAddressList();
// this.addressstype = this.$route.query.stype;
// this.orderNumber = this.$route.query.orderNumber;
// this.canceldanhao(this.orderNumber);
// console.log(this.$refs.rccolor);
// this.$refs.rccolor.style.background = "gray";
this.addressstype = this.$route.query.stype;
this.orderNumber=this.$route.query.orderNumber;
this.canceldanhao(this.orderNumber)
console.log(this.$refs.rccolor)
this.$refs.rccolor.style.background='gray';
},
components: {
Myheader,

View File

@ -1,320 +1,578 @@
<template>
<div class="page_modules">
<div>
<Myheader></Myheader>
<div class="cont_modules">
<tabs></tabs>
<el-row class="order_info">
<el-col :span="6" class="ph_hidden">
<ul class="li_inline">
<li class="sucess_img">
<img src="../../assets/image/usersucess.png" alt="" />
</li>
<li class="ready">
<p>订单提交成功</p>
<p>等待付款</p>
</li>
</ul>
</el-col>
<el-col :span="12" class="ph_hidden">&nbsp;</el-col>
<el-col :span="6" class="ready_right">
<div class="inline_right">
<p>付款金额:</p>
<p class="price">{{ info.userprice }}</p>
<div class="rc-main">
<div class="online" style="height:3px;width:93%;margin:0 auto;background:#DDDDDD;margin-top:0.23rem"></div>
<div class="rc-hearder">
<div class="rc-userpay">
<div class="paysucess">
<span>订单提交成功等待付款</span>
</div>
<div class="inline_right">
<p>收货信息:</p>
<p>{{ info.userinformation }}</p>
<div class="rc-all">
<div class="rc-payprice">
<span>付款金额:</span>
<i>{{ userprice }}</i>
</div>
</el-col>
</el-row>
<div class="rc-receiving">
<span>收货信息:</span>
<i>{{ userinformation }}</i>
</div>
<div class="rc_contline"></div>
<div class="cont_modules">
<div class="pay_title color_red">请选择支付方式</div>
</div>
<div class="rc_contline"></div>
<div class="cont_modules">
<div class="pay_list">
<ul>
<li
class="pay_item"
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
<div class="rc-usermaina">
<div class="rc-title" id="qrcode" ref="qrcode" >
</div>
</div>
</div>
<div class="rc-paystype">
<span>请选择支付方式</span>
</div>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
<div class="paystype">
<div
class="payAlipay"
v-for="(item, index) in userpaystype"
:key="index"
@click="selectGoods(item, index)"
:class="activeIndex == index ? 'active' : ''"
:class="activeIndex == index ? 'active' : 'unactive'"
>
<div class="rc-payype">
<img :src="item.payimage" alt="" />
<span>{{ item.paytype }}支付</span>
</li>
</ul>
<span>{{ item.price }}</span>
</div>
<div class="user-righticon">
<img src="../../assets/image/rc-left.png" alt="" />
</div>
</div>
</div>
</div>
<div class="paycord">
<div id="qrcode" ref="qrcode" class="qrcode"></div>
<span>{{ paytype }}扫一扫立即支付</span>
<div class="paycord" @click="usershow()" id="qrcode" ref="qrcode">
<!-- <img src="../../assets/image/rc-discount.png" alt="" />
<span>微信扫一扫立即支付</span> -->
</div>
</div>
<el-dialog
:visible.sync="dialogSuccess"
@close="closeDialogSuccess"
:visible.sync="dialogInfo1"
hegight="700px"
@close='closeDialog'
>
<div class="tc dl_cont">
<div class="dl_img">
<img src="../../assets/image/usersucess.png" alt="" />
<div class="rc-header">
<div class="rc-titled" >
<img src="../../assets/image/usersucess.png" alt="">
</div>
<h3 class="title">支付成功</h3>
<p>您的商品我们正在抓紧打包请耐心等候</p>
<div class="line_dashed"></div>
<div class="rc-logmain">
<h3>支付成功</h3>
<span>{{usermessage}}</span>
</div>
<div class="userer">
<img
width="210"
height="210"
src="../../assets/image/rc-discount.png"
alt=""
/>
<p>微信扫一扫识别二维码</p>
<p class="tips">加入社群0元试用商品随单发放</p>
<img src="../../assets/image/rc-discount.png" alt="">
<span>微信扫一扫识别二维码</span>
<i>加入社群0元试用商品随单发放</i>
</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>
</template>
<script>
import Myheader from "~/components/header.vue";
import tabs from "@/components/tabs.vue";
import QRCode from "qrcodejs2";
import { generateOrderAlipay, updateOrderWX } from "../../ajax/getData";
import QRCode from 'qrcodejs2'
import { generateOrderWX } from "../../ajax/getData";
export default {
data() {
return {
userdata:null,
activeIndex: 0,
isSucess: false,
paytype: "微信",
usermessage:'您的商品我们正在抓紧打包,请耐心等候!',
userprice: "¥167.00",
userinformation: "李某某 151****7917",
userpaystype: [
{
paytype: "微信",
payimage: require("../../assets/pay/wx.png"),
price: "支付宝支付",
payimage: require("../../assets/image/rc-cat.png"),
catimage: require("../../assets/image/rc-left.png"),
},
{
paytype: "支付宝",
payimage: require("../../assets/pay/zfb.png"),
price: "微信支付",
payimage: require("../../assets/image/rc-cat.png"),
catimage: require("../../assets/image/rc-left.png"),
},
],
dialogSuccess: true,
dialogFail: false,
dialogInfo1: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() {
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: {
closeDialogSuccess() {
this.qrcode = null;
this.$router.push({
path: "/index",
});
closeDialog(){
this.qrcode=null;
console.log('关闭的')
},
async userpay(userdata) {
console.log("-----");
let data = await generateOrderWX();
console.log();
this.qrcode(userdata);
},
closeDialogFail() {
this.qrcode = null;
this.$router.push({
path: "/personal/useraddress",
});
},
qrcode(e) {
let qrcode = new QRCode("qrcode", {
width: 260, //
height: 260, //
text: e, //
});
},
async selectGoods(item, index) {
this.activeIndex = index;
this.paytype = item.paytype;
if (index == 1) {
//
let res = await generateOrderAlipay(
this.$route.query.userPayData.postData
);
if (res.success) {
this.qrcode(res.data);
}
qrcode (e) {
console.log(e);
let qrcode = new QRCode('qrcode',{
width: 150, //
height: 150, //
text: e//
})
},
selectGoods(item,index){
let _that=this
_that.dialogInfo1=true;
_that.activeIndex=index;
if(item.price=='微信支付'){
// this.userpay();
}
},
//
async updateOrderWX() {
let res = await updateOrderWX();
if (res.success) {
this.dialogSuccess = true;
clearInterval(this.time);
} else {
this.dialogFail = true;
clearInterval(this.time);
usershow(){
console.log('这是支付')
this.dialogInfo1=true;
}
},
},
components: {
Myheader,
tabs,
},
};
</script>
<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) {
.ph_hidden {
.rc-usermaina{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.ready_right {
width: 100%;
padding: 10px;
.rc-userpay{
display: none;
}
.pay_title {
padding: 10px;
}
.pay_list {
padding: 0;
.pay_item {
float: none;
border: none;
border-bottom: 1px solid #d7d7d7;
height: 50px;;
margin-right: 0;
/deep/.el-dialog {
width:80%;
height: 500px;
}
.rc-header{
display: flex;
flex-direction: column;
align-items: center;
justify-content: left;
justify-content: left; &.active {
border: none;
border-bottom: 1px solid #d7d7d7;
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%;
margin-top: 24%;
.paysucess{
display: none;
}
.paycord{
display: none;
}
.rc-hearder {
width: 93%;
margin: 0 auto;
i em {
font-style: normal;
}
.rc-userpay {
width: 100%;
// height: 96px;
display: flex;
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>

View File

@ -73,64 +73,6 @@
<div class="online"></div>
</div>
</div>
<div class="rc-carousel__gallery-thumbnails-wrapper">
<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">
@ -141,7 +83,7 @@
{{ item.title }}
</em> -->
<em class="active">
<em class='active'>
{{ item.specifications }}
</em>
</div>
@ -149,17 +91,9 @@
<div class="rc-main">
<div class="rc-produnnum">
<div><i class="ts-row-title">商品数量</i></div>
<img
src="../../assets/image/userjian.png"
alt=""
@click="sub()"
/>
<strong>{{ sales_num }}</strong>
<img
src="../../assets/image/userjia.png"
alt=""
@click="plus()"
/>
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
<strong>{{sales_num}}</strong>
<img src="../../assets/image/userjia.png" alt="" @click="plus()" />
</div>
</div>
<div class="rc-main rc-md-up">
@ -167,63 +101,60 @@
</div>
<div class="online rc-md-down"></div>
<div class="rc-main">
<div class="rc-button" v-if="userbuy">
<span @click="usertanchu(item, 0)">加入购物车</span>
<span @click="usertanchu(item, 1)">立即购买</span>
</div>
<div class="certification">
<ul>
<li>
<span
><i class="ts-row-title">服务说明</i
><i
>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i
></span
><i class="ts-row-title">服务说明</i><i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
>
</li>
<li>
<span
><i class="ts-row-title">商品运费</i
><i>全场包邮(港澳除外)</i></span
><i class="ts-row-title">商品运费</i><i>全场包邮(港澳除外)</i></span
>
</li>
<li>
<span
><i class="ts-row-title">商品编号</i
><i>{{ item.brandCode }}</i></span
><i class="ts-row-title">商品编号</i><i>{{ item.brandCode }}</i></span
>
</li>
</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="" /> -->
<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>
<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="" />
<img src="../../assets/image/turntop.png" alt="">
<span>回到顶部</span>
</div>
</div>
<Myfooter v-on:litentop="showmesg"></Myfooter>
<Myfooter v-on:litentop='showmesg'></Myfooter>
</div>
<el-dialog :visible.sync="dialogInfo1" @close="userclose">
<el-dialog
:visible.sync="dialogInfo1"
hegight="700px"
@close='userclose'
>
<div class="rs-dis">
<div
class="rc-discount"
@ -233,44 +164,56 @@
<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>
<i></i><span>{{ item.couponAmount }}</span>
</div>
</div>
<div class="rc-right">
<i>
{{ item.special }}
{{ item.couponDesc }}
</i>
<div >
<div class="rc-main" id="rc-main">
<span>有效期</span>
<em>{{ item.starttime }}</em>
<em>{{ item.validTo }}</em>
</div>
<div class="rc-footer">
<span @click="usergetconf(item)">立即领取</span>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogInfo2" @close="userclose">
<el-dialog
:visible.sync="dialogInfo2"
@close='userclose'
>
<div class="rc-headera">
<div class="rc-title">
<img src="../../assets/error.png" alt="" />
<img src="../../assets/error.png" alt="">
</div>
<div class="rc-logmain">
<h3>温馨提示</h3>
<span>请先点击下方进行登录/注册</span>
</div>
<nuxt-link :to="`/userlogin/login/`">
<div class="userer">
<span>立即登录</span>
</div>
</nuxt-link>
</div>
</el-dialog>
<div class="rc-button rc-md-down">
<span @click="usertanchu(item, 0)">加入购物车</span>
<span @click="usertanchu(item, 1)">立即购买</span>
<span @click="usertanchu(item,0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span>
</div>
</div>
</template>
@ -278,17 +221,11 @@
<script>
import Myheader from "~/components/header.vue";
import tabs from "@/components/tabs.vue";
import unlogin from "~/components/unlogin.vue";
import unlogin from "~/components/unlogin.vue";
import { mapMutations } from "vuex";
import Myfooter from "~/components/rc-footer.vue";
import {
goodsmessage,
getConfig,
postCourseId,
getdraw,
alldiscount,
} from "../../ajax/getData";
const settings = require("@/config");
import Myfooter from "~/components/rc-footer.vue";
import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
const settings = require("@/config");
export default {
// middleware: 'metaTitle',
// // middleware: 'metaTitle',
@ -335,53 +272,23 @@ export default {
{
title: "购物车",
catimage: require("../../assets/buy.png"),
},
{
title: "在线客服",
catimage: require("../../assets/service.png"),
},
{
title: "营养专家",
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: [
{
price: "167.00",
@ -402,8 +309,10 @@ export default {
},
],
};
},
components: {
Myheader,
tabs,
@ -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: {
...mapMutations(["changemessage"]),
handleScroll(e)
@ -480,64 +365,48 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
}
},
lianxi(item, index) {
console.log(item, index);
if (item.title == "在线客服") {
lianxi(item,index){
console.log(item,index);
if(item.title=='在线客服'){
var option = {
customer: {
id: "",
name: "",
email: "",
mobile: "",
memberId: "999999",
},
};
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
}
dis_livchat(option);
}
if (item.title == "购物车") {
console.log("---12314");
if(item.title=='购物车'){
console.log('---12314');
this.$router.push({
path: "../../myorder/userrecord",
});
}
if (item.title == "营养专家") {
if(item.title=='营养专家'){
var option = {
customer: {
id: "",
name: "",
email: "",
mobile: "",
memberId: "999999",
},
};
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
}
dis_livchat(option);
}
},
toTop() {
let top = document.documentElement.scrollTop || document.body.scrollTop;
//
const timeTop = setInterval(() => {
document.body.scrollTop =
document.documentElement.scrollTop =
top -=
400;
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
if (top <= 0) {
clearInterval(timeTop);
}
}, 10);
},
showmesg() {
console.log("-----");
showmesg(){
console.log('-----');
this.toTop();
},
toTop() {
let top = document.documentElement.scrollTop || document.body.scrollTop;
//
const timeTop = setInterval(() => {
document.body.scrollTop =
document.documentElement.scrollTop =
top -=
400;
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
if (top <= 0) {
clearInterval(timeTop);
}
@ -545,106 +414,137 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
},
//
usergetconf(item) {
usergetconf(item){
console.log(item);
if (this.usermessage.data !== "" || this.usermessage.data !== undefined) {
this.getconf(this.usermessage.data.id, item.couponId);
}
},
if(this.usermessage.data!==''||this.usermessage.data!==undefined){
this.getconf(this.usermessage.data.id,item.couponId);
}
},
//
async getconf(memberId, couponId) {
let data = await getConfig(memberId, couponId);
if (data) {
async getconf(memberId,couponId) {
let data = await getConfig(memberId,couponId);
if(data){
this.$message({
type: "warning",
message: data.msg,
type: 'warning',
message: data.msg
});
console.log(data);
}
},
// changeName(newName){
// this.name = newName;
// },
userclose() {
console.log("这是关闭的");
this.userlist = [];
userclose(){
console.log('这是关闭的');
this.userlist=[];
},
async userquery() {
let data = await goodsmessage(this.productCode);
if (data) {
this.newlist = data.data;
}
this.productAttachmentList = this.newlist[0].productAttachmentList;
console.log("-----");
this.userlistmenu = this.newlist[0].productAttachmentList;
let changemess = JSON.stringify(this.userlistmenu);
// console.log(changemess);
// this.productAttachmentList = this.userlistmenu;
let data = await goodsmessage(this.productCode);
if(data){
this.newlist=data.data;
}
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.parent_msg=this.userlistmenu;
console.log( this.userlistmenu)
},
//
async userdraw(mobile) {
let data = await getdraw(mobile);
if (data) {
this.drawlist = data.data;
if(data){
this.drawlist=data.data;
}
},
//
async alldrawlist(memberId) {
let data = await alldiscount(memberId);
let userlist = [];
let menulsit = [];
if (data) {
this.alldraw = data;
let userlist=[];
let menulsit=[];
if(data){
this.alldraw=data;
// console.log(this.alldraw.data);
let alllist = [];
this.userlist = this.alldraw.data;
this.userlist.forEach((element, index) => {
if (typeof element.productCodes == "string") {
let alllist=[];
this.userlist=this.alldraw.data;
this.userlist.forEach((element,index)=>{
if(typeof element.productCodes=='string'){
userlist.push(element);
// let s=element.productCodes.split(',');
// console.log(s.indexOf(this.productCode) != -1 )
// console.log('')
}
});
let menualist = [];
userlist.filter((item) => {
})
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);
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("----");
console.log('----');
}
});
});
// this.usernewlist = menualist;
// console.log(this.usernewlist);
})
})
this.usernewlist=menualist;
console.log(this.usernewlist);
}
},
plus(num, index) {
this.sales_num = parseInt(this.sales_num) + 1;
console.log(this.sales_num);
},
plus(num,index){
this.sales_num= parseInt(this.sales_num) + 1;
console.log( this.sales_num);
} ,
//
sub(num, index) {
if (this.sales_num <= 1) {
sub(num,index){
if( this.sales_num <= 1){
this.sales_num = 1;
} else {
}
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){
@ -688,44 +588,19 @@ usertanchu(item,orderm){
}
},
usertanchu(item, orderm) {
let user = localStorage.getItem("userInfo");
if (user == undefined || user == null || user == "") {
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;
this.activeIndexa=index;
},
},
onceproduct() {},
onceproduct(){
},
};
</script>
<style lang="less" scoped>

View File

@ -63,7 +63,7 @@
</template>
<script>
import { areaList } from '@vant/area-data';
import Myheader from '~/components/header.vue'
import MyFooter from '~/components/rc-footer.vue'
export default {
@ -94,6 +94,7 @@ export default {
address: "浙江省杭州市拱墅区莫干山路 50 号",
},
],
areaList,
};
},
methods: {

View File

@ -64,7 +64,7 @@
</div>
<div class="rc-layout-container rc-two-column rc-button">
<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 class="rc-column rc-text--right">
<nuxt-link :to="`/userlogin/login/`" class="rc-styled-link">
@ -84,7 +84,6 @@
@click="register()"
class="ts-standard-btn ts-standard-btn--max-width"
value="注册"
readonly=""
></input
>
<!-- <van-divider @click="toLogin">注册账户</van-divider> -->

View File

@ -84,7 +84,7 @@
</div>
<div class="rc-layout-container rc-two-column rc-button">
<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 class="rc-column rc-text--right">
<nuxt-link :to="`/userlogin/edit/`" class="rc-styled-link">
@ -104,7 +104,6 @@
@click="register()"
class="ts-standard-btn ts-standard-btn--max-width"
value="登录"
readonly=""
></input
>
<!-- <van-divider @click="toLogin">注册账户</van-divider> -->