Merge branch 'sit-Carl' of gitee.com:carl_Ming_1/smart-admin into sit-jiamin-v2

This commit is contained in:
Admin 2022-01-19 14:08:08 +00:00 committed by Gitee
commit 34a6a20223
53 changed files with 3905 additions and 2724 deletions

View File

@ -72,22 +72,18 @@ export const postCourseId = (productCode,buyCount,memberId, mobile,productImg,pr
/** /**
* 是否存在购物车 * 是否存在购物车
*/ */
export const isexistCart = (id, pet,address) => { export const isexistCart = (id) => {
var data = { var data = {
memberId: id,
} }
return fetch('getCartProductInfo?memberId='+id,data,'POST') return fetch('getCartProductInfo', data, 'POST')
} }
/** /**
* 删除购物车 * 删除购物车
*/ */
export const deleteCart = (memberId, productCode) => { export const deleteCart = (memberId, productCode) => {
var data = { return fetch('cancelCartProductInfo?memberId=' + memberId, productCode, 'POST')
memberId: memberId,
productCode:productCode
}
return fetch('cancelCartProductInfo',data,'POST')
} }
/** /**
* 购物车批量提交 * 购物车批量提交
@ -241,14 +237,8 @@ export const searchchanpin = (stype,usertype,curPage,curRow) => {
}) })
var str = "&"; var str = "&";
for(var key in list){ for(var key in list){
str = str + key + "=" + list[key] + "&"; str = str + key + "=" + list[key] + "&";
} }
str = str.substr(0,str.length-1);
var data = {
page:1,
row:10
}
return fetch('product/query?petType='+usertype+str+queryTail, data, 'POST' ) return fetch('product/query?petType='+usertype+str+queryTail, data, 'POST' )
} }
@ -456,12 +446,17 @@ export const goodsmessage = (productCode) => {
//微信支付 //微信支付
export const generateOrderWX = (list) => { export const generateOrderWX = (list) => {
var data = [{
}]
return fetch('generateOrderWX', list, 'POST') return fetch('generateOrderWX', list, 'POST')
} }
//微信支付返回
export const updateOrderWX = (data) => {
return fetch('updateOrderWX', data, 'POST')
}
//支付宝支付
export const generateOrderAlipay = (list) => {
return fetch('generateOrderAlipay', list, 'POST')
}
//用户所有的优惠券 //用户所有的优惠券
export const allConfig = (memberId, channelSecurity, mobile) => { export const allConfig = (memberId, channelSecurity, mobile) => {
var data = { var data = {
@ -505,6 +500,11 @@ export const goodsmessage = (productCode) => {
// return fetch('generateOrderWX', data, 'POST' ) // return fetch('generateOrderWX', data, 'POST' )
// } // }
//地址的查询
export const memberAddress = (type, data) => {
return fetch('memberAddress?type=' + type, data, 'POST')
}
//地址的查询 //地址的查询
export const selectaddress = (memberId, pet, address) => { export const selectaddress = (memberId, pet, address) => {

View File

@ -8,17 +8,38 @@ body{
.fade-leave-active { .fade-leave-active {
opacity: 0; opacity: 0;
} }
.userloding { .ts-no-data{
text-align: center;
margin:3rem 0;
}
.ts-mask{
width:100%;
height:100%;
position: fixed; position: fixed;
left: 50%; top:0;
margin-left: -1.56rem; left:0;
top: 50%; display:flex;
margin-top: -3.75rem; 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 {
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: 7.5rem; height: 3.12rem;
z-index: 1000;
animation: rolling 4s infinite; animation: rolling 4s infinite;
-webkit-animation:rolling 4s infinite; -webkit-animation:rolling 4s infinite;
} }
@ -48,8 +69,6 @@ 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;
@ -59,6 +78,13 @@ 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%;
@ -85,7 +111,8 @@ img, picture {
li{ li{
border: 1px solid #D7D7D7; border: 1px solid #D7D7D7;
display: inline-flex; display: inline-flex;
border-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
flex-direction: column; flex-direction: column;
max-width:10rem; max-width:10rem;
.rc-column .rc-column
@ -117,7 +144,7 @@ img, picture {
} }
img{ img{
width:10rem; width:10rem;
height:10rem; min-height:10rem;
object-fit: contain; object-fit: contain;
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
@ -229,13 +256,12 @@ img, picture {
right: 0; right: 0;
top: 30%; top: 30%;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 0px .62rem rgba(0, 0, 0, 0.16); box-shadow: 0 0 10px 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;
@ -313,6 +339,9 @@ 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;
} }
@ -320,12 +349,10 @@ img, picture {
width:100%; width:100%;
} }
.rc-top{ .rc-top{
margin-top: 74px; 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;
@ -416,8 +443,13 @@ 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:2.2vw; margin-left: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;
@ -432,7 +464,7 @@ img, picture {
} }
} }
img{ img{
width:21.7vw; width:100%;
max-width:320px; max-width:320px;
min-width:160px; min-width:160px;
} }
@ -539,35 +571,40 @@ 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{
background:unset; height: 6px;
height:4px; width:50%;
background:transparent;
} }
&::-webkit-scrollbar-thumb{ &::-webkit-scrollbar-thumb{
background-color:#d7d7d7; background-color:#d7d7d7;
height:2px; border-radius:10px;
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;
} }
*/ /* */
} }
} }
@ -589,10 +626,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;
} }
} }
} }

View File

@ -5,13 +5,31 @@
/deep/.van-swipe__indicator--active{ /deep/.van-swipe__indicator--active{
background-color: #E1001A; background-color: #E1001A;
} }
.rc-ma{
.ul-zhuan{ .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{
li{ li{
background: unset;; background: unset;
img{ img{
border-radius: 50%; border-radius: 50%;
} }
&:first-child{
margin-left:0;
}
&.active { &.active {
img{ img{
border: 3px solid #E2001A; border: 3px solid #E2001A;
@ -27,25 +45,58 @@
} }
} }
} }
}
.uservideo{ .uservideo{
overflow: hidden; overflow: hidden;
video{ video{
height:100%; width:100%;
width:auto; 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;
} }
} }
@media screen and (max-width:768px){ @media screen and (max-width:768px){
.ul-dog{ .ul-dog{
display: none; justify-content: space-evenly;
img{
width:4rem;
height:auto;
}
li{
margin-top:1.875rem;
}
}
.ts-banner-swiper-container{
margin-bottom:2.5rem;
} }
.searchBara{ .searchBara{
position: fixed;
width: 100%; width: 100%;
position: fixed; position: fixed;
top:66px; top:3.75rem;
background: white; background: white;
z-index: 9999; z-index: 60;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
overflow-y:hidden; overflow-y:hidden;
@ -62,12 +113,10 @@
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{ .rc-login{
width: 92%; width: 92%;
margin:0 auto; margin:0 auto;
@ -100,9 +149,6 @@
} }
} }
}
.van-swipe{
z-index: 2;
} }
.rc-usermessage{ .rc-usermessage{
span{ span{
@ -120,9 +166,11 @@
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;
@ -136,43 +184,35 @@
#xxxFullScreen { #xxxFullScreen {
background-color: white; background-color: white;
margin-top: 0.40rem; margin-top: 0.40rem;
#swiper1 {
overflow: hidden;
}
.swiper-container{ .swiper-container{
height: 6.45rem; height: 6.45rem;
} }
.swiper-container, .swiper-container2 { .swiper-container {
width: 100%; width: 100%;
// overflow: visible !important;
height: 100%; height: 100%;
position: relative; position: relative;
} }
#swiper1 .swiper-container .swiper-wrapper .swiper-slide { .swiper-container .swiper-wrapper .swiper-slide {
width: 17.25rem; width: 17.25rem;
//height: 6.45rem !important; //Auto adaption //height: 6.45rem !important; //Auto adaption
} }
/* 上一张 */ /* 上一张 */
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev { swiper-container .swiper-wrapper .swiper-slide-prev {
margin-top: 0.05rem; margin-top: 0.05rem;
height: 100%; height: 100%;
} }
/* 下一张 */ /* 下一张 */
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next { .swiper-container .swiper-wrapper .swiper-slide-next {
margin-top: 0.05rem; margin-top: 0.05rem;
height: 100%; height: 100%;
} }
.swiper-container .swiper-wrapper .swiper-slide-active { .swiper-container .swiper-wrapper .swiper-slide-active {
height: 100%; height: 100%;
} }
.uservideo{ .uservideo{
width: 100%; width: 100%;
height:auto; height:auto;
max-height: 15.68rem;
display: block; display: block;
video{ video{
max-width:100%; max-width:100%;
@ -192,8 +232,9 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
vertical-align: top;
} }
img{ img{
width: 10rem; width: 10rem;
@ -209,6 +250,7 @@
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;
@ -231,7 +273,7 @@
/* 中间的图片 */ /* 中间的图片 */
.swiper-container .swiper-wrapper .swiper-slide-active { .swiper-container .swiper-wrapper .swiper-slide-active {
height: 165px !important;
} }
.swiperWrap{ .swiperWrap{
height: 469px; height: 469px;
@ -239,8 +281,6 @@
img{ img{
height: 469px; height: 469px;
width: 100%; width: 100%;
} }
/deep/.swiper-pagination-bullet-active{ /deep/.swiper-pagination-bullet-active{
background: red; background: red;
@ -301,6 +341,10 @@
} }
} }
// .usermain{
// display: none;
// }
}
.active { .active {
font-size: 0.14rem; font-size: 0.14rem;
img{ img{
@ -313,10 +357,6 @@
border-width: 1px; border-width: 1px;
} }
} }
// .usermain{
// display: none;
// }
}
@media screen and (min-width: 769px) @media screen and (min-width: 769px)
@ -332,6 +372,16 @@ 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%;
@ -350,17 +400,14 @@ object-fit: cover;
#xxxFullScreen { #xxxFullScreen {
background-color: white; background-color: white;
// margin-top: 100px; // margin-top: 100px;
#swiper1 { #swiper1,#swiper2 {
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 {
width: 100%; width: 100%;
height: 38.6rem; height: 38.6rem;
@ -518,14 +565,18 @@ img{
display: block; display: block;
} }
img{ img{
width: 10vw; width:100%;
height: 10vw; height: auto;
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;
} }
} }
@ -540,33 +591,7 @@ 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%;

View File

@ -1,7 +1,9 @@
.container{ .container{
min-height:80vh; min-height:100vh;
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;
@ -53,11 +55,13 @@
} }
.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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -0,0 +1,78 @@
* {
margin: 0;
padding: 0;
}
html {
line-height: 160%;
}
.rc_contline {
border-bottom: 3px solid #f6f6f6;
height: 0px;
margin: 0;
clear: both;
}
.page_modules {
padding-top: 100px;
}
.cont_modules {
margin: 0 auto;
max-width: 1400px;
}
.inline_right {
display: flex;
justify-content: space-between;
width: 100%;
}
.inline_mid {
display: flex;
justify-content: space-around;
width: 100%;
}
.inline_left {
display: flex;
justify-content: space-evenly;
width: 100%;
}
.li_inline {
li {
display: inline-block;
vertical-align: middle;
}
}
.color_red {
color: #E2001A;
}
.tc {
text-align: center;
}
.tr {
text-align: right;
}
.el-dialog{
width: 90%;
max-width: 440px;
}
#tns2-iw{ height: 90px;}
.rc-carousel:not(.rc-carousel--loaded){visibility:visible!important}
@media screen and (max-width: 768px) {
.el-message-box{
width: 300px;
}
.el-dialog{
width: 90%;
}
}

View File

@ -0,0 +1,357 @@
<template>
<div class="ts-area-picker-container">
<input class="ts-area-picker-value-displayer" placeholder="请选择收货地址" @focus="initAddress" v-model="displayValue"></input>
<input type="hidden" :value="returnValue">
<div class="ts-area-picker-desktop" v-if="show">
<div class="ts-area-picker-tmp-value">
<ul>
<li class="active" @click="switchTab(0)">{{ returnValueArr[0]?returnValueArr[0].name:'请选择' }}</li>
<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
</ul>
</div>
<div class="ts-area-picker-values">
<ul>
<li v-for="(item, index) in curDisplayingCol" :key="item.id" @click="pickValue(item.id,item.name)" v-bind:class="{ active:(returnValue[curDisplayingColIndex]?returnValue.id==item.id:false) }">
{{ item.name }}
</li>
</ul>
</div>
</div>
<div class="ts-area-picker-mobile ts-mask" v-if="show">
<div class="ts-mask-bg"></div>
<van-picker
show-toolbar
title="选择地区"
:columns="columns"
value-key="name"
@confirm="onConfirm"
@cancel="onCancel"
@change="onChange"
class="ts-area-picker-mobile-component"
/>
</div>
</div>
</template>
<script>
export default {
data(){
return{
displayValue:"",
returnValue:"",
returnValueArr:[],
show:false,
columns:[
{
values:[{id:"001",name:"省份1"},{id:"002",name:"省份2"}],
className:'col1'
},
{
values:[{id:"001-001",name:"省份1-城市1"},{id:"001-002",name:"省份1-城市2"},{id:"002-001",name:"省份2-城市1"},{id:"002-002",name:"省份2-城市2"}],
className:'col2'
},
{
values:[{id:"001-001-001",name:"省份1-城市1-区1"},{id:"001-002-002",name:"省份1-城市2-区2"},{id:"002-001-001",name:"省份2-城市1-区1"},{id:"002-002-002",name:"省份2-城市2-区2"}],
className:'col3'
}
],
curDisplayingColIndex:0,
curDisplayingCol:[]
}
},
methods:{
initAddress(){
this.show=true;
//Initilizing
//mobile
let self=this;
// defaultValues : array[{id:"_ID_IN_columns_of_province",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_city",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_area",name:"_NAME_IN_columns"}]
let defaultValues = [{id:this.columns[0].values[0].id, name:this.columns[0].values[0].name},{id:this.columns[1].values[0].id, name:this.columns[1].values[0].name},{id:this.columns[2].values[0].id, name:this.columns[2].values[0].name}];
this.$children.forEach(function(vueComponent){
if(vueComponent._name=="<VanPicker>")
{
self.onChange(vueComponent,defaultValues); //Important
}
});
//mobile end
//PC
this.switchTab(this.curDisplayingColIndex);
//PC end
//Initilizing end
},
pickValue(pickId,pickName){
let areaObj={id:pickId,name:pickName};
this.returnValueArr[this.curDisplayingColIndex]=areaObj;
this.validatePickedValues();
//Submit to value displaying
let tmpDisplayValueEle = document.querySelectorAll(".ts-area-picker-tmp-value li");
tmpDisplayValueEle[this.curDisplayingColIndex].innerText=this.returnValueArr[this.curDisplayingColIndex].name;
//Submit to value displaying end
//Moving to next tab
this.curDisplayingColIndex++;
if(this.curDisplayingColIndex>2 || this.curDisplayingColIndex<0)
this.curDisplayingColIndex = 0;
if(this.returnValueArr.length>=3)
{
this.onConfirm(this.returnValueArr);
}
else
this.switchTab(this.curDisplayingColIndex);
//Moving to next tab end
},
// For van picker
onChange(picker,values) { //values = [{id:this.columns[0].id, name:this.columns[0].name},{id:this.columns[1].id, name:this.columns[1].name},{id:this.columns[3].id, name:this.columns[3].name}];
//Support single choice only , index = 0 province, index = 1 city, index = 2 area
let curSelection={'province':'','city':'','area':''};
if(!values)
return;
let _self=this;
values.forEach(function(ele,index){
switch(index){
case 0:
//Handling Province
curSelection.province=ele.id;
//Handling Province end
break;
case 1:
//Handling City
let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
picker.setColumnValues(index,matchedCity);
curSelection.city=matchedCity[0].id;
//Handling City end
break;
default:
//Handling Area
let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
picker.setColumnValues(index,matchedArea);
curSelection.area=matchedArea[0].id;
//Handling Area end
break;
}
});
},
validatePickedValues(){
let _self=this;
let provinceId='';
let areaId=undefined;
this.returnValueArr.forEach(function(obj,index){
switch(index){
case 0:
//Skipping province checking
provinceId = obj.id;
break;
case 1:
//Checking City
if(obj.id.indexOf(provinceId)<0)
{
console.log('500 : error via checking validatePickedValues');
_self.returnValueArr[index]={};
}
else
{
areaId = _self.returnValueArr[index].id;
}
//Checking City end
break;
case 2:
//Checking Area
if(areaId && obj.id.indexOf(areaId)<0)
{
console.log('501 : error via checking validatePickedValues');
_self.returnValueArr[index]={};
}
//Checking Area end
break;
default:
break;
}
});
},
onConfirm(values) {
debugger;
//Get columns structure array here : values
let _self=this;
let returnVal=[];
let tmpArr = [];
this.displayValue='';
values.forEach(function(ele,index){
_self.displayValue = _self.displayValue + ele.name + " ";
tmpArr.push(ele.id);
returnVal.push(ele);
});
this.returnValueArr=returnVal;
this.returnValue=tmpArr.join("|");
this.hideAddress();
},
onCancel() {
},
fitlerValuesInArray(stringStartWith,dataColArea){
let result=[];
dataColArea.forEach(function(ele){
if(ele.id.indexOf(stringStartWith)===0)
{
result.push(ele);
}
});
return result;
},
popAddress() {
this.show=true;
},
hideAddress() {
this.show=false;
},
switchTab(tabIndex){
let _self=this;
let areaTabLi=document.querySelectorAll(".ts-area-picker-tmp-value li");
if(tabIndex==0){
this.curDisplayingCol = this.columns[tabIndex].values;
}
else{
if(this.returnValueArr[tabIndex-1]){}
else{
tabIndex=tabIndex-1;
}
}
this.curDisplayingColIndex=tabIndex;
areaTabLi.forEach(function(ele,index){
if(tabIndex==index)
{
ele.classList.add('active');
let filteredData=_self.columns[tabIndex].values;
if(_self.curDisplayingColIndex>0) //pass
{
let pickedId = _self.returnValueArr[_self.curDisplayingColIndex-1].id;
filteredData=_self.fitlerValuesInArray(pickedId,_self.columns[tabIndex].values);
}
_self.curDisplayingCol=filteredData;
}
else
ele.classList.remove('active');
})
}
},
mounted(){
},
components:{
},
}
</script>
<style lang="less" scoped>
.ts-area-picker-container{display:inline-block;}
.ts-area-picker-value-displayer{
width:40rem;
}
.ts-area-picker-tmp-value{
border-bottom:1px solid #D7D7D7;
padding:0 2.5rem;
box-sizing: border-box;
ul{
padding:0;
margin:0;
display: flex;
li{
display:inline-block;
color:#333333;
width:3.125rem;
padding: 1.25rem 0;
margin-right:4rem;
cursor: pointer;
&.active{
color:#E2001A;
border-bottom:4px solid #E2001A;
}
}
}
}
.ts-area-picker-values{
ul{
padding:1rem 2.5rem 2rem 2.5rem;
margin:0;
}
li{
display:inline-block;
margin-top:1rem;
margin-right:3.875rem;
color:#333;
cursor:pointer;
&.nth-child(6n){
margin-right:0;
}
}
}
@media screen and (max-width:768px)
{
/deep/.van-picker__cancel
{
display:none;
}
/deep/.van-picker__title{
font-size:1.375rem;
color:#E1001A;
}
/deep/.van-picker__toolbar{
padding:1.5rem 1.25rem;
box-sizing: border-box;
border-bottom:1px solid #D8D8D8;
}
/deep/.van-picker__confirm{
text-indent:-999rem;
position:relative;
&:after{
transform: rotate(45deg);
}
&:before{
transform: rotate(-45deg);
}
&:before,
&:after {
position: absolute;
content: ' ';
background-color: #E1001A;
left: 1.25rem;
bottom:-0.875rem;
width: 1px;
height: 1.375rem;
}
}
.ts-area-picker-mobile{
display:flex;
flex-direction: column;
justify-content: flex-end;
.ts-area-picker-mobile-component{
height:40vh;
width:100%;
}
}
.ts-area-picker-desktop{
display:none;
}
}
@media screen and (min-width:769px)
{
.ts-area-picker-mobile{
display:none;
}
.ts-area-picker-desktop{
display:block;
width:100%;
height:19.25rem;
border:1px solid #808285;
}
}
</style>

View File

@ -6,6 +6,7 @@
<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">
@ -45,10 +46,7 @@
<span class="rc-screen-reader-text"> <span class="rc-screen-reader-text">
登录 登录
</span> </span>
<em class="rc-screen-reader" v-show="loginornot"> <em class="rc-screen-reader" v-show="loginornot"></em>
</em>
</a> </a>
<!-- <!--
@ -58,11 +56,6 @@
</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>
@ -75,16 +68,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="#cats" class="rc-list__header" data-ref="nav-link" role="menuitem" title="猫"></a> <a href="https://royalcanin.com.cn/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="#dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬"></a> <a href="https://royalcanin.com.cn/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="#about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a> <a href="https://royalcanin.com.cn/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">
@ -94,49 +87,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="#cats" class="rc-list__header rc-margin--none" role="menuitem"></a> <a href="https://royalcanin.com.cn/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="#cats/breeds" class="rc-list__link" role="menuitem">品种</a> <a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" role="menuitem">品种</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/getting-a-kitten" class="rc-list__link" role="menuitem">想养猫吗</a> <a href="https://royalcanin.com.cn/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="#cats/kitten" class="rc-list__link" role="menuitem">幼猫</a> <a href="https://royalcanin.com.cn/cats/kitten" class="rc-list__link" role="menuitem">幼猫</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/kitten/health" class="rc-list__link" role="menuitem">健康和心情</a> <a href="https://royalcanin.com.cn/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="#dogs" class="rc-list__header rc-margin--none" role="menuitem"></a> <a href="https://royalcanin.com.cn/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="#dogs/breeds" class="rc-list__link" role="menuitem">品种</a> <a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/getting-a-puppy" class="rc-list__link" role="menuitem">想养只狗</a> <a href="https://royalcanin.com.cn/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="#dogs/puppy" class="rc-list__link" role="menuitem">幼犬</a> <a href="https://royalcanin.com.cn/dogs/puppy" class="rc-list__link" role="menuitem">幼犬</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/puppy/health" class="rc-list__link" role="menuitem">健康和心情</a> <a href="https://royalcanin.com.cn/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="#tailored-nutrition" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a> <a href="/" 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>
@ -148,13 +141,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="#about" class="rc-list__header rc-margin--none" role="menuitem">关于我们</a> <a href="https://royalcanin.com.cn/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="#about#growth-phase1" class="rc-list__link" role="menuitem">我们的历史</a> <a href="https://royalcanin.com.cn/about#growth-phase1" class="rc-list__link" role="menuitem">我们的历史</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#about" class="rc-list__link" role="menuitem">我们的价值观</a> <a href="https://royalcanin.com.cn/about" class="rc-list__link" role="menuitem">我们的价值观</a>
</li> </li>
<!-- <!--
<li class="rc-list__item"> <li class="rc-list__item">
@ -196,74 +189,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="#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" /> <img class="rc-padding--sm" src="/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="#cats" class="rc-list__header" id="mega-nav-header-1" data-toggle="nav-list-1" role="menuitem"></a> <a href="https://royalcanin.com.cn/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="#cats" class="rc-list__header" title="Cat" role="menuitem"></a> <a href="https://royalcanin.com.cn/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="#cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/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="#cats/getting-a-kitten" class="rc-list__link ca" role="menuitem" title="Thinking of getting a cat">想养只猫</a> <a href="https://royalcanin.com.cn/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="#cats/kitten" class="rc-list__link ca" role="menuitem" title="Kitten">幼猫</a> <a href="https://royalcanin.com.cn/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="#cats/kitten/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a> <a href="https://royalcanin.com.cn/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="#dogs" class="rc-list__header" role="menuitem" id="mega-nav-header-2" data-toggle="nav-list-2"></a> <a href="https://royalcanin.com.cn/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="#dogs" class="rc-list__header" title="Dog" role="menuitem"></a> <a href="https://royalcanin.com.cn/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="#dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/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="#dogs/getting-a-puppy" class="rc-list__link ca" role="menuitem" title="Thinking of getting a dog">想养只犬</a> <a href="https://royalcanin.com.cn/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="#dogs/puppy" class="rc-list__link ca" role="menuitem" title="Puppy">幼犬</a> <a href="https://royalcanin.com.cn/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="#dogs/puppy/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a> <a href="https://royalcanin.com.cn/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="#tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a> <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>
<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="#tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a> <a href="https://royalcanin.com.cn/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>
@ -275,16 +268,16 @@
</li> </li>
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<a href="#about" class="rc-list__header" role="menuitem" id="mega-nav-header-4" data-toggle="nav-list-4">关于我们</a> <a href="https://royalcanin.com.cn/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="#about" class="rc-list__header" title="About" role="menuitem">关于我们</a> <a href="https://royalcanin.com.cn/about" class="rc-list__header" title="About" role="menuitem">关于我们</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#about#growth-phase1" class="rc-list__link ca" role="menuitem" title="Our history">我们的历史</a> <a href="https://royalcanin.com.cn/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">
@ -311,13 +304,14 @@
<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"> <li class="rc-list__item">
<a class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="#about/contact"> <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> </a>
</li> </li>
<li class="rc-list__item"> <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 class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="https://royalcanin.com.cn/about/contact">
在哪里购买 与我们联系
</a> </a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
@ -349,39 +343,9 @@
</section> </section>
</div> </div>
<!-- Popup menu end--> <!-- Popup menu end-->
<!-- 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> </div>
</template> </template>
<script> <script>
const isReload={
needload:false
};
export default { export default {
data() { data() {
return { return {
@ -404,10 +368,10 @@ export default {
this.usermessage=usernot; this.usermessage=usernot;
} }
//debugger; //debugger;
if(isReload.needload) if(isInitialized)
location.reload(); location.reload();
if(isReload.needload==false) if(!isInitialized)
isReload.needload=true; isInitialized=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)

View File

@ -1,69 +1,55 @@
<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="#cats" class="rc-list__header" role="menuitem" id="nav-footer-top-1" data-toggle="nav-footer-1"></a> <a href="https://royalcanin.com.cn/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="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/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="#cats/getting-a-kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a cat">想养只猫</a> <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>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Kitten">幼猫</a> <a href="https://royalcanin.com.cn/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="#cats/kitten/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a> <a href="https://royalcanin.com.cn/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="#dogs" class="rc-list__header" role="menuitem" id="nav-footer-top-2" data-toggle="nav-footer-2"> <a href="https://royalcanin.com.cn/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="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/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="#dogs/getting-a-puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a dog">想养只犬</a> <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>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Puppy">幼犬</a> <a href="https://royalcanin.com.cn/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="#dogs/puppy/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a> <a href="https://royalcanin.com.cn/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">
@ -75,15 +61,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="#about" class="rc-list__header" id="nav-footer-top-4" data-toggle="nav-footer-4" role="menuitem"> <a href="https://royalcanin.com.cn/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="#about#growth-phase1" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our history">我们的历史</a> <a href="https://royalcanin.com.cn/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="#about" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our values">我们的价值观</a> <a href="https://royalcanin.com.cn/about" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our values">我们的价值观</a>
</li> </li>
</ul> </ul>
@ -98,9 +84,6 @@
<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
@ -220,9 +203,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='#privacy'><span class="">隐私声明</span></a> <a target='_blank' href='https://royalcanin.com.cn/privacy'><span class="">隐私声明</span></a>
&nbsp; | &nbsp; &nbsp; | &nbsp;
<a target='_blank' href='#declaration'><span class="">法律声明</span></a> <a target='_blank' href='https://royalcanin.com.cn/declaration'><span class="">法律声明</span></a>
</div> </div>
</div> </div>

View File

@ -1,19 +1,19 @@
const trackingScript = 'var dataLayer = window.dataLayer = window.dataLayer || [];dataLayer.push({"user":{"sitecoreId":"00000000-0000-0000-0000-000000000000","locale":"zh-HK"},"session":{"id":"vvfwez43vfoomct4y3yqneqy"},"site":{"country":"HK","id":"RCGlobalMC1","environment":"prd"},"page":{"type":"Start of Life Page","hitTimestamp":"2020-10-16T16:26:21.7350880+00:00","topic":"Collecting your kitten and their first week with you","theme":"Cat"},"pet":{"specieId":"2"}});'; const trackingScript = 'var dataLayer = window.dataLayer = window.dataLayer || [];dataLayer.push({"user":{"sitecoreId":"00000000-0000-0000-0000-000000000000","locale":"zh-HK"},"session":{"id":"vvfwez43vfoomct4y3yqneqy"},"site":{"country":"HK","id":"RCGlobalMC1","environment":"prd"},"page":{"type":"Start of Life Page","hitTimestamp":"2020-10-16T16:26:21.7350880+00:00","topic":"Collecting your kitten and their first week with you","theme":"Cat"},"pet":{"specieId":"2"}});';
const assetsUrl = 'var assetsUrl="/royalcanin-cdn-assets-new/css_js/";'; const assetsUrl = 'var assetsUrl="/royalcanin-cdn-assets-new/css_js/";var isInitialized=false;';
export default { export default {
// Global page headers: https://go.nuxtjs.dev/config-head // Global page headers: https://go.nuxtjs.dev/config-head
head: { head: {
title: 'rc-busness', title: '皇家官方商城',
htmlAttrs: { htmlAttrs: {
lang: 'en', lang: 'zh-cn',
}, },
script: [ script: [
//{ src: '/js/rem.js' }, //{ src: '/js/rem.js' },
// { src: '/js/flexible.js', type: 'text/javascript', charset: 'utf-8'}, // { src: '/js/flexible.js', type: 'text/javascript', charset: 'utf-8'},
{ src: 'https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14053/index.js' }, { src: 'https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14053/index.js' },//SOL
//{ src: 'https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14054/index.js' }, { src: 'https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14054/index.js' },//订单
{ innerHTML: trackingScript, type: 'text/javascript', charset: 'utf-8'}, { innerHTML: trackingScript, type: 'text/javascript', charset: 'utf-8'},
{ innerHTML: assetsUrl, type: 'text/javascript', charset: 'utf-8'}, { innerHTML: assetsUrl, type: 'text/javascript', charset: 'utf-8'},
{ src: '/royalcanin-cdn-assets-new/css_js/royal-canin.min.bundle.js' }, { src: '/royalcanin-cdn-assets-new/css_js/royal-canin.min.bundle.js' },
@ -23,7 +23,7 @@ export default {
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1,target-densitydpi =1' }, { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' },
{ hid: 'description', name: 'description', content: '' }, { hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' } { name: 'format-detection', content: 'telephone=no' }
], ],
@ -38,7 +38,10 @@ export default {
css: [ css: [
'vant/lib/index.css', 'vant/lib/index.css',
'element-ui/lib/theme-chalk/index.css', 'element-ui/lib/theme-chalk/index.css',
'@/assets/style/default.less',
{ src:'@/assets/css/global.less'},
{ src:'@/assets/css/royalcanin-custom.css'}, { src:'@/assets/css/royalcanin-custom.css'},
{ src: "swiper/css/swiper.css" } { src: "swiper/css/swiper.css" }
], ],
@ -49,6 +52,7 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [ plugins: [
'@/plugins/vant', '@/plugins/vant',
'@/plugins/swiper',
'@/plugins/ElementUI', '@/plugins/ElementUI',
{ src: '@/plugins/localStorage', ssr: false }, { src: '@/plugins/localStorage', ssr: false },
@ -71,7 +75,7 @@ export default {
], ],
styleResources: { styleResources: {
less: '@/assets/style/less/default.less' // less文件路径 less: '/assets/style/default.less' // less文件路径
}, },
// Build Configuration: https://go.nuxtjs.dev/config-build // Build Configuration: https://go.nuxtjs.dev/config-build
build: { build: {

View File

@ -0,0 +1,127 @@
<template>
<div>
<van-address-edit
:area-list="areaList"
:address-info="{
name: editAddressData.name,
tel: editAddressData.tel,
addressDetail: editAddressData.detailAddress,
areaCode: areaCode,
}"
show-delete
show-set-default
show-search-result
:search-result="searchResult"
@save="onSave"
@delete="onDelete"
/>
</div>
</template>
<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
var _ = require("lodash");
import { memberAddress } from "../../ajax/getData";
export default {
data() {
return {
areaList,
searchResult: [],
areaCode: "",
};
},
props: ["editAddressData"],
computed: {},
methods: {
async onSave(content) {
// Toast('save');
let provinceId = Number(content.areaCode.substring(0, 2)); //id
let cityId = Number(content.areaCode.substring(2, 4)); //id
let districtId = Number(content.areaCode.substring(4, 7)); //
//id / id/id/
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
let postData = {
memberId,
provinceId: 25,
cityId: 36,
districtId: 418,
// provinceId,
// cityId,
// districtId,
detailAddress: content.addressDetail,
recipient: content.name,
recipientPhone: content.tel,
default: content.default,
};
let saveType = this.editAddressData.saveType ? "update" : "add";
let data = await memberAddress(saveType, postData);
if (data) {
this.$message({
type: "warning",
message: data.msg,
});
if (data.code == "0") {
this.$emit("isClose", false);
}
}
},
async onDelete() {
// Toast("delete");
let postData = {
ids: this.editAddressData.id,
memberId: this.editAddressData.memberId,
};
let data = await memberAddress("delete", postData);
if (data) {
this.$message({
type: "warning",
message: data.msg,
});
if (data.code == "0") {
this.$emit("isClose", false);
}
}
},
async areaCodeInit() {
var city = this.editAddressData.city;
var district = this.editAddressData.district;
this.areaCode = "1310001";
// _.forEach(this.areaList.city_list, (o, c) => {
// if (o == city) {
// // let cityId = String(_.take(c, 2));
// let cityId = c.substring(0, 4);
// _.forEach(this.areaList.county_list, (i, a) => {
// if (i == district) {
// // let districtId = String(_.take(a, 2));
// let districtId = a.substring(0, 4);
// if (cityId == districtId) {
// this.areaCode = a;
// }
// }
// });
// }
// });
},
},
mounted() {
this.areaCodeInit();
},
};
</script>
<style>
.van-area {
width: 400px;
margin: 0 auto;
border: 1px solid #808285;
}
.van-popup {
background-color: transparent;
}
.van-overlay {
background-color: transparent;
}
.v-modal {
background: transparent;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -1,89 +1,83 @@
<template> <template>
<div> <div>
<div class="rc-header"> <div class="rc-header">
<div class="rc-main">
<Myheader></Myheader> <Myheader></Myheader>
<tabs></tabs>
<div class="rc-commodity">
<div class="rc-commondi">
<img src="../../assets/image/rc-select.png" alt="" />
<span>商品</span>
</div> </div>
<div class="rc-main">
<tabs></tabs>
<div class="cart-list">
<div class="header">
<div class="list-left">
<label class="check-label">
<input type="checkbox" v-model="checkAll" />
</label>
<span class="name">商品</span>
</div>
<ul> <ul>
<li>单价</li> <li>单价</li>
<li>数量</li> <li>数量</li>
<li>操作</li> <li>操作</li>
</ul> </ul>
</div> </div>
<div class="header_ph">
<div class="rc-select"> <el-row>
<label> <el-col :span="12">
<input type="checkbox" v-model="checkAll"> <div class="list-left">
全选 <label class="check-label">
<input type="checkbox" v-model="checkAll" />
</label> </label>
<span class="name">全选</span>
<div class="select-right">
<img src="../../assets/image/userupdate.png" alt="" />
<span @click="useredit">编辑</span>
</div> </div>
</div> </el-col>
<div> <el-col :span="12" class="tr">
<div v-for="(item, index) in goldmedal" <span @click="editList()"
:key="index" ><i class="el-icon-edit"></i>{{ editState }}</span
class="rc-userdemand" ></el-col
> >
<div class="rc-userdeman"> </el-row>
<label> </div>
<input type="checkbox" v-model="item.checked"> <div class="list" v-for="(item, index) in cartData" :key="index">
<div class="list-left">
<label class="check-label">
<input type="checkbox" v-model="item.checked" />
</label> </label>
<div class="product">
<!-- <img :src="item.image" /> --> <div class="product-img">
<!-- <img :src="checkone?require('../../assets/image/rc-unselect.png'):require('../../assets/image/rc-select.png')" @click="userclick(checkone,index)"/> --> <img :src="item.productImg" alt="" />
<img :src="item.productImg" alt="" class="re-message" />
</div> </div>
<div class="rc-userdem"> <div class="right">
<div class="rc-userdema"> <p class="product-title" v-text="item.productName"></p>
<span>{{ item.productName }}</span> <p class="specifications">规格{{ item.specifications }}</p>
<em>规格:{{ item.specifications }}</em>
</div> </div>
<div class="rc-userd"> </div>
<i>{{ item.productPrice }}</i> </div>
<ul>
<li class="product-price">{{ item.productPrice }}</li>
<li>
<div class="rc-jia"> <div class="rc-jia">
<img src="../../assets/image/userjian.png" alt="" @click="sub(item.buyCount,index)"/> <img
<strong> {{item.buyCount}} </strong> src="../../assets/image/userjian.png"
<img src="../../assets/image/userjia.png" alt="" @click="plus(item.buyCount,index)" /> alt=""
@click="sub(item.buyCount, index)"
/>
<input type="text" v-model="item.buyCount" />
<img
src="../../assets/image/userjia.png"
alt=""
@click="plus(item.buyCount, index)"
/>
</div> </div>
<em @click="userdele(item,index)">删除</em> </li>
</div> <li class="del"><em @click="userdele(item)">删除</em></li>
</div> </ul>
<div class="rc-footer">
<div class="rc-foote">
<div class="rc-shop">
<i>总计:</i>
<span>{{ sumPrice }}</span>
</div>
<div class="rc-delete" @click="usejiesuan(item,index)">
<span>
{{ userdelete }}
</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="rc-footera"> <div class="rc-footera">
<div class="rc-foote"> <div class="rc-foote">
<div class="rc-shop"> <div class="rc-shop">
<label> <label>
<input type="checkbox" v-model="checkAll"> <input type="checkbox" v-model="checkAll" />
全选 全选
</label> </label>
</div> </div>
@ -97,9 +91,8 @@
<em>共选择{{ sumlength }}件商品</em> <em>共选择{{ sumlength }}件商品</em>
</div> </div>
<strong @click="usejiesuan(item,index)" >{{mustpay}}</strong> <strong @click="usejiesuan()">{{ mustpay }}</strong>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="rc-shop"> <!-- <div class="rc-shop">
@ -114,19 +107,15 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { List } from 'vant';
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 instance from "@/config/request";
import { isexistCart, generateOrderWX, deleteCart } from "../../ajax/getData"; import { isexistCart, generateOrderWX, deleteCart } from "../../ajax/getData";
import accMul from "../../config/setDec.js"
export default { export default {
middleware: 'metaTitle', middleware: "metaTitle",
meta: {title: '购物车'}, meta: { title: "购物车" },
data() { data() {
return { return {
ordersum: 1, ordersum: 1,
@ -137,13 +126,49 @@ export default {
ys1: true, ys1: true,
ys2: true, ys2: true,
userdelete: "结算", userdelete: "结算",
orderprice:'¥199.00', orderprice: "¥199.00",
mustpay:'立即结算', mustpay: "立即结算",
totalMoney:'', editState: "编辑",
dellist: [],
totalMoney: "",
allChecked: false, allChecked: false,
userid: null, userid: null,
cartData: [
// {
// buyCount: 3,
// id: 1,
// memberId: "1",
// productCode: "432434",
// productImg: require("../../assets/image/rc-select.png"),
// productName: "",
// productPrice: 399.0,
// specifications: "5KG",
// checked: false,
// },
// {
// buyCount: 1,
// id: 2,
// memberId: "2",
// productCode: "432434",
// productImg: require("../../assets/image/rc-select.png"),
// productName: "222",
// productPrice: "199.00",
// specifications: "5KG",
// checked: true,
// },
// {
// buyCount: 4,
// id: 3,
// memberId: "3",
// productCode: "432434",
// productImg: require("../../assets/image/rc-select.png"),
// productName: "3333",
// productPrice: 69.01,
// specifications: "5KG",
// checked: true,
// },
],
goldmedal: [ goldmedal: [
// { // {
// ordernumber: "1111111111111111111", // ordernumber: "1111111111111111111",
// orderstype: 1, // orderstype: 1,
@ -156,18 +181,14 @@ export default {
// buttontitle: "", // buttontitle: "",
// checked:true, // checked:true,
// userprice: "167", // userprice: "167",
// catimage: require("../../assets/image/rc-win.png"), // catimage: require("../../assets/image/rc-win.png"),
// }, // },
// { // {
// ordernumber: "1111111111111111111", // ordernumber: "1111111111111111111",
// sales_num:1, // sales_num:1,
// usereat: "4", // usereat: "4",
// image:require('../../assets/image/rc-select.png'), // image:require('../../assets/image/rc-select.png'),
// checked:true, // checked:true,
// ordernum: 0, // ordernum: 0,
// buttontitle: "", // buttontitle: "",
// catimage: require("../../assets/image/usereat.png"), // catimage: require("../../assets/image/usereat.png"),
@ -178,31 +199,28 @@ export default {
}; };
}, },
mounted() { mounted() {
console.log('---'); console.log("---");
this.goldmedal.forEach(item=>{ this.goldmedal.forEach((item) => {
item.checked = true; item.checked = true;
}) });
}, },
mounted() { mounted() {
this.carmessage(); this.carmessage();
}, },
components: { components: {
Myheader, Myheader,
tabs tabs,
}, },
methods: { methods: {
// //
async carmessage() { async carmessage() {
console.log(this.goldmedal);
let user = JSON.parse(localStorage.getItem("userInfo")); let user = JSON.parse(localStorage.getItem("userInfo"));
console.log(user);
this.userid = user.data.id; this.userid = user.data.id;
let data = await isexistCart(user.data.id); let data = await isexistCart(user.data.id);
this.goldmedal=data; this.cartData = data;
// this.goldmedal = data;
}, },
async userjie(list) { async userjie(list) {
let user = JSON.parse(localStorage.getItem("userInfo")); let user = JSON.parse(localStorage.getItem("userInfo"));
@ -211,39 +229,43 @@ export default {
let data = await generateOrderWX(list); let data = await generateOrderWX(list);
if (data) { if (data) {
this.$message({ this.$message({
type: 'warning', type: "warning",
message: data.msg message: data.msg,
}); });
console.log(data); console.log(data);
this.$router.push({ this.$router.push({
path: "/personal/settlement", path: "/personal/settlement",
query: { query: {
wxdata:data.data wxdata: data.data,
}, },
}); });
} }
console.log(data); console.log(data);
}, },
// //
async deletsmessage(productCode) { async deletsmessage(productCode) {
let user = JSON.parse(localStorage.getItem("userInfo")); let user = JSON.parse(localStorage.getItem("userInfo"));
console.log(user);
this.userid = user.data.id; this.userid = user.data.id;
let data = await deleteCart(user.data.id,productCode); let data = await deleteCart(this.userid, productCode);
if (data) { if (data) {
this.$message({ this.$message({
type: 'warning', type: "warning",
message: data.msg message: data.msg,
}); });
this.carmessage(); this.carmessage();
} }
}, },
editList() {
if (this.editState == "完成") {
this.mustpay = "立即结算";
this.editState = " 编辑";
} else {
this.mustpay = "删除";
this.editState = "完成";
}
},
// checkBox(){ // checkBox(){
// console.log(event.target.checked) // console.log(event.target.checked)
@ -253,107 +275,113 @@ export default {
// }); // });
// }, // },
// userdele(index){ userdele(item) {
let delform = [];
// this.goldmedal.splice(index,1); if (item.length > 0) {
// }, delform = item;
} else {
delform = [item.productCode];
}
this.$confirm("确定删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "success",
callback: (action) => {
if (action === "confirm") {
this.deletsmessage(delform);
}
},
});
// this.$message({
// type: "warning",
// message: data.msg,
// });
},
plus(num, index) { plus(num, index) {
console.log(index); this.cartData[index].buyCount =
this.goldmedal[index].buyCount = parseInt(this.goldmedal[index].buyCount) + 1; parseInt(this.cartData[index].buyCount) + 1;
}, },
// //
sub(num, index) { sub(num, index) {
if (parseInt(num) <= 1) { if (parseInt(num) <= 1) {
this.goldmedal[index].buyCount = 1; this.cartData[index].buyCount = 1;
} else {
this.cartData[index].buyCount =
parseInt(this.cartData[index].buyCount) - 1;
} }
else{
this.goldmedal[index].buyCount = parseInt(this.goldmedal[index].buyCount) - 1;
}
}, },
// //
useredit(e) { useredit(e) {
this.ys1 = !this.ys1 this.ys1 = !this.ys1;
if (this.ys1 == false) { if (this.ys1 == false) {
this.$nextTick(() => { this.$nextTick(() => {
this.userdelete='删除'; this.userdelete = "删除";
console.log(this.userdelete); console.log(this.userdelete);
});
})
} else if (this.ys1 == true) { } else if (this.ys1 == true) {
this.$nextTick(() => { this.$nextTick(() => {
this.userdelete='结算'; this.userdelete = "结算";
console.log(this.userdelete); console.log(this.userdelete);
});
})
} }
if (this.userdelete == "删除") { if (this.userdelete == "删除") {
} }
}, },
usejiesuan(item,index){ usejiesuan() {
// let procode = [];
// let list = [];
// let menulist = [];
// this.cartData.filter((item) => {
// if (item.checked) {
// list.push(item);
// console.log(item);
// procode.push(item.productCode);
// } else {
// list.splice(index, 1);
// }
// });
// let list = [];
// list = this.cartData.filter((item) => item.checked);
let procode=[]; // list.forEach((item) => {
// menulist.push({
// productName: item.productName,
// buyCount: item.buyCount,
// productId: item.productCode,
// payAmount: item.productPrice,
// memberId: item.memberId,
// phoneNumber: item.mobile,
// });
// });
let list = []; let list = [];
let menulist=[]; list = this.cartData.filter((item) => item.checked);
this.goldmedal.filter(item=>{ if (list.length == 0) {
if(item.checked){ this.$message({
list.push(item); type: "warning",
console.log(item); message: "你还未选择商品",
procode.push(item.productCode) });
return;
} else { } else {
list.splice(index,1); if (this.editState == "完成") {
} let delList=[]
})
list=this.goldmedal.filter(item =>
item.checked
);
list.forEach(item=>{ list.forEach(item=>{
menulist.push({ delList.push(item.productCode)
productName:item.productName, })
buyCount:item.buyCount, this.userdele(delList);
productId: item.productCode,
payAmount: item.productPrice,
memberId:item.memberId,
phoneNumber:item.mobile
});
});
if(this.ys1==false){
if(list.length==0){
this.$message({
type: 'warning',
message: '你还未选择商品'
});
return;
} else { } else {
this.deletsmessage(procode); this.$router.push({
} path: "/personal/settlement",
query: {
}else{ list: list,
if(list.length==0){ },
this.$message({
type: 'warning',
message: '你还未选择商品'
}); });
return;
}else{
this.userjie(menulist)
} }
} }
// list=[ // list=[
// { // {
// "productName":"", // "productName":"",
@ -378,10 +406,6 @@ plus(num,index){
// .then((res) => { // .then((res) => {
// console.log(res); // console.log(res);
// }); // });
}, },
// async userdelete(item) { // async userdelete(item) {
@ -394,242 +418,43 @@ plus(num,index){
checkAll: { checkAll: {
// , // ,
set(v) { set(v) {
this.goldmedal.forEach(item => { this.cartData.forEach((item) => {
item.checked = v item.checked = v;
}); });
}, },
// , // ,
get() { get() {
return this.goldmedal.length === this.goldmedal.filter(item => item.checked == true).length; return (
this.cartData.length ===
this.cartData.filter((item) => item.checked == true).length
);
}, },
}, },
// //
sumPrice() { sumPrice() {
return this.goldmedal return this.cartData
.filter(item => item.checked) .filter((item) => item.checked)
.reduce((pre, cur) => { .reduce((pre, cur) => {
console.log(pre); console.log(pre);
return pre + cur.buyCount * cur.productPrice; return pre + cur.buyCount * cur.productPrice;
}, 0); }, 0);
}, },
sumlength() { sumlength() {
return this.goldmedal.filter(item => item.checked == true).length; return this.cartData.filter((item) => item.checked == true).length;
} },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// .rc-footer {
@media screen and(min-width: 320px) and(max-width:768px) { display: none;
.rc-header{
} }
.rc-footera { .rc-footera {
display: none; background: #f6f6f6;
}
.rc-footer {
position: fixed;
bottom: 0;
width: 100%;
.rc-foote {
width: 100%;
margin: 0 auto;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.rc-shop {
display: flex;
align-items: center;
i {
font-style: normal;
font-size: 14px;
color: #333333;
}
span {
font-size: 18px;
color: #E1001A;
display: block;
margin-left: 3px;
}
}
.rc-delete {
span {
width: 100px;
height: 48px;
background: #e2001a;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
margin-right: 40px;
color: #ffffff;
}
}
}
.rc-header {
width: 100%;
.rc-main {
width: 92%;
margin: 0 auto;
.rc-commodity{
display: none;
}
.rc-select {
border-bottom: 1px solid #d8d8d8;
height: 56px;
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
.select-left {
display: flex;
align-items: center;
img {
width: 24px;
height: 24px;
display: block;
}
span {
font-size: 14px;
color: #333333;
display: block;
margin-left: 8px;
}
}
.select-right {
display: flex;
align-items: center;
img {
width: 16px;
height: 16px;
display: block;
margin-right: 8px;
}
span {
font-size: 14px;
color: #333333;
}
}
}
.rc-userdemand {
width: 100%;
height: 180px;
border-bottom: 1px solid #d8d8d8;
display: flex;
.rc-userdeman {
display: flex;
align-items: center;
img {
width: 24px;
height: 24px;
display: block;
}
.re-message {
width: 96px;
height: 96px;
display: block;
border: 1px solid #d8d8d8;
margin-left: 8px;
}
}
.rc-userdem {
display: flex;
flex-direction: column;
width: 100%;
margin-left: 8px;
justify-content: center;
span {
font-size: 16px;
color: #e1001a;
display: block;
font-weight: bold;
}
em {
font-style: normal;
font-size: 14px;
display: block;
margin-top: 8px;
color: #666666;
}
.rc-userd {
em{
display: none;
}
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 8px;
i {
font-size: 18px;
font-style: normal;
display: flex;
justify-content: flex-start;
align-items: center;
width: 74%;
color: #e1001a;
}
img {
width: 23px;
height: 23px;
display: block;
margin-right: 4px;
}
img:last-child {
width: 23px;
height: 23px;
display: block;
margin-left: 4px;
}
strong {
font-style: normal;
display: flex;
justify-content: center;
list-style: none;
align-items: center;
width: 24px;
color: #666666;
height: 24px;
border: 1px solid #d7d7d7; border: 1px solid #d7d7d7;
font-size: 12px;
border-radius: 3px;
}
.rc-jia{
display: flex;
}
}
}
}
}
}
}
// /* 768px1920 *pc/
@media screen and (min-width: 768px) and (max-width: 1920px) {
.rc-footer{
display: none;
}
.rc-footera {
position: fixed;
bottom: 0;
width: 100%;
.rc-foote { .rc-foote {
width: 92%;
margin: 0 auto; margin: 0 auto;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
height: 102px; height: 102px;
@ -639,6 +464,7 @@ plus(num,index){
.rc-shop { .rc-shop {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 24px;
img { img {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -680,7 +506,7 @@ display: block;
} }
span { span {
font-size: 20px; font-size: 20px;
color: #E1001A; color: #e1001a;
} }
em { em {
font-style: normal; font-style: normal;
@ -705,42 +531,92 @@ height: 48px;
} }
} }
} }
.rc-header {
width: 100%;
.rc-main { .rc-main {
width: 92%; width: 92%;
margin: 0 auto; margin: 0 auto;
.rc-commodity { padding-top: 60px;
max-width: 1400px;
.cart-list {
width: 100%; width: 100%;
border: 1px solid #d7d7d7; border: 1px solid #d7d7d7;
border-radius: 3px 3px 0px 0px; font-size: 16px;
background: #f6f6f6;
font-size: 18px;
color: #666666; color: #666666;
p {
margin: 0;
}
.header {
background: #f6f6f6;
border-radius: 3px 3px 0px 0px;
border-bottom: 1px solid #d7d7d7;
height: 64px; height: 64px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.rc-commondi { }
display: flex; .header_ph {
align-items: center; display: none;
img { }
.check-label {
display: block; display: block;
margin-left: 24px; margin-left: 24px;
} }
span { .name {
display: block; display: block;
margin-left: 56px; margin-left: 56px;
} }
.list-left {
display: flex;
align-items: center;
} }
ul { ul {
display: flex; display: flex;
width: 80%; width: 70%;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
.list {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #d7d7d7;
padding: 15px 0;
.product-price {
color: #e1001a;
font-weight: bold;
font-size: 20px;
}
.product {
display: flex;
justify-content: space-between;
margin-left: 56px;
.product-title {
color: #e1001a;
font-weight: bold;
font-size: 18px;
}
.product-img {
margin-right: 10px;
width: 96px;
height: 96px;
img { img {
width: 24px; width: 100%;
height: 24px; height: 100%;
}
}
}
.rc-jia {
display: flex;
align-items: center;
img,
input {
width: 30px;
height: 30px;
text-align: center;
margin: 0 5px;
}
input {
border: 1px solid #d7d7d7;
}
}
} }
} }
.rc-select { .rc-select {
@ -828,7 +704,6 @@ height: 48px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 10%; width: 10%;
} }
.rc-userd { .rc-userd {
display: flex; display: flex;
@ -860,10 +735,10 @@ height: 48px;
font-style: normal; font-style: normal;
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #E2001A; border-bottom: 1px solid #e2001a;
display: block; display: block;
margin-left: 40px; margin-left: 40px;
color: #E1001A; color: #e1001a;
} }
strong { strong {
font-style: normal; font-style: normal;
@ -883,6 +758,66 @@ color: #E1001A;
} }
} }
} }
//
@media screen and (max-width: 768px) {
.rc-main {
width: 100%;
.cart-list {
border: none;
.header {
display: none;
}
.header_ph {
display: block;
border-bottom: 2px solid #d8d8d8;
padding: 20px 10px 20px 0;
border-top: 5px solid #f6f6f6;
}
.check-label {
margin-left: 10px;
}
.name {
margin-left: 16px;
}
.list {
display: block;
.product {
margin-left: 16px;
}
ul {
margin-top: -32px;
margin-left: 128px;
width: 60%;
.del {
display: none;
}
}
}
}
}
.rc-footera {
position: fixed;
bottom: 0;
width: 100%;
.rc-shop {
display: none;
}
.rc-delete {
margin-right: 0;
width: 100%;
.rc-num {
width: 100%;
justify-content: space-between;
padding: 10px;
}
strong {
margin-right: 0;
}
}
}
.el-message-box{
width: 300px;
} }
} }
</style> </style>

View File

@ -75,79 +75,7 @@ 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: [
{ {
@ -162,27 +90,7 @@ 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,
@ -281,6 +189,5 @@ 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>

View File

@ -0,0 +1,414 @@
ul li ol li em strong i {
list-style: none;
font-style: normal;
}
.rc-header {
width: 100%;
}
.settlement {
padding-top: 100px;
}
.rc-main {
width: 92%;
margin: 0 auto;
max-width: 1400px;
.rc-userbottomm {
display: none;
}
.rc-border {
width: 100%;
border-bottom: 1px solid #d7d7d7;
margin-top: 32px;
}
.rc-receiving {
width: 100%;
height: 80px;
display: flex;
flex-direction: column;
em {
font-style: normal;
color: #e1001a;
font-size: 26px;
}
span {
color: #666666;
font-size: 16px;
display: block;
margin-top: 25px;
}
}
.delivery {
display: flex;
flex-direction: column;
height: 140px;
display: flex;
justify-content: center;
.viewdetails {
display: flex;
align-items: center;
justify-content: flex-end;
span {
color: #444444;
font-size: 18px;
display: block;
margin-right: 8px;
}
img {
width: 8px;
height: 16px;
}
}
.to-delivery {
display: flex;
align-items: center;
font-style: normal;
span {
display: block;
// margin-left: 16px;
font-size: 18px;
color: #333333;
}
i {
font-style: normal;
margin-left: 8px;
display: block;
font-size: 18px;
color: #999999;
}
}
.bo-delivery {
span {
font-size: 16px;
color: #666666;
display: block;
margin-top: 16px;
}
}
}
.address-list {
display: flex;
.mypersonal {
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid #808285;
height: 118px;
width: 320px;
padding: 15px;
color: #333333;
margin: 20px 40px 20px 0;
position: relative;
cursor: pointer;
&.active {
border: 1px solid #E2001A;
}
.edit {
position: absolute;
top: 5px;
right: 8px;
display: none;
cursor: pointer;
}
&:hover {
.edit {
display: block;
}
}
.my-delivery {
display: flex;
align-items: center;
font-style: normal;
span {
display: block;
margin-left: 3px;
}
i {
font-style: normal;
margin-left: 3px;
display: block;
}
}
.per-delivery {
span {
color: #666666;
display: block;
margin-top: 5px;
}
}
}
}
.rc-usermain {
display: flex;
padding: 20px 0;
.rc-image {
border: 1px solid #d8d8d8;
margin-right: 20px;
img {
width: 96px;
height: 96px;
display: block;
}
}
.rc-right {
.rc-usercenter {
display: flex;
justify-content: center;
flex-direction: column;
h3,
.price {
font-style: normal;
display: block;
font-size: 18px;
font-weight: bold;
margin-top: 17px;
color: #e1001a;
}
}
display: flex;
justify-content: space-between;
width: 100%;
}
.rc-userright {
display: flex;
flex-direction: column;
color: #666666;
font-size: 16px;
span {
display: block;
margin-top: 16px;
font-size: 16px;
}
}
.rc-userbottom {
display: flex;
width: 60%;
justify-content: space-between;
align-items: center;
.price {
font-style: normal;
color: #e1001a;
font-size: 20px;
font-weight: bold;
}
}
}
.rc-merchandise {
padding: 15px 0;
&::after {
display: block;
content: '';
clear: both;
}
ul {
width: 25%;
display: flex;
flex-direction: column;
justify-content: space-between;
line-height: 40px;
float: right;
i {
font-style: normal;
color: #666666;
}
li {
list-style: none;
font-style: normal;
display: flex;
justify-content: space-between;
span {
color: #333333;
}
}
li .red {
color: #e1001a;
font-size: 20px;
font-style: normal;
}
}
}
.rc-payment {
width: 100%;
margin-top: 80px;
.u-trackingnumber {
display: flex;
align-items: center;
i {
font-size: 18px;
font-style: normal;
margin-right: 16px;
}
img {
width: 8px;
height: 16px;
}
}
ul {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
line-height: 40px;
font-size: 18px;
i {
font-style: normal;
color: #666666;
display: block;
}
li {
list-style: none;
font-style: normal;
display: flex;
justify-content: space-between;
span {
color: #333333;
}
}
}
}
.rc-foot {
display: flex;
flex-direction: column;
.rc-foo {
display: flex;
justify-content: flex-end;
flex-direction: column;
align-items: self-end;
i {
font-style: normal;
color: #333333;
font-size: 20px;
margin-right: 20px;
}
em {
font-style: normal;
color: #e1001a;
font-size: 26px;
}
span {
display: block;
width: 164px;
margin-top: 36px;
background: #e2001a;
line-height: 48px;
text-align: center;
color: white;
font-size: 16px;
height: 48px;
border-radius: 30px;
}
}
}
}
.diallog_width{
width: 100%;
max-width: 440px;
}
.el-dialog{
width: 100%;
}
//手机端
@media screen and (max-width: 768px) {
.diallog_width{
width: 100%;
}
.rc-main {
.address-list {
display: contents;
.mypersonal {
width: 100%;
height: auto;
}
}
.rc-usermain {
.rc-right { display: table}
}
.rc-merchandise{
padding: 15px 0 120px;
ul{
float: none;
width: 100%;
}
}
.rc-foot{
.rc-foo{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: self-end;
position: fixed;
bottom: 0;
background: #fff;
width: 100%;
padding: 10px;
}
}
}
}

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="settlement">
<Myheader></Myheader> <Myheader></Myheader>
<tabs></tabs> <tabs></tabs>
<div class="online"></div> <div class="online"></div>
@ -8,52 +8,55 @@
<div class="rc-border"></div> <div class="rc-border"></div>
<div <div
class="mypersonal" class="mypersonal"
v-for="(dataaddress, index) in useraddress" v-for="(item, 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>{{ dataaddress.state }}</span> <span>{{ item.recipient }}</span>
<i>{{ dataaddress.tel }}</i> <i>{{ item.recipientPhone }}</i>
</div> </div>
<div class="per-delivery"> <div class="per-delivery">
<span>{{ dataaddress.address }}</span> <span>{{ item.address }}</span>
</div> </div>
</div> </div>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div> <div class="mypersonal">
<div> <div
<div class="rc-center"> 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="rc-usermain"> <div class="rc-usermain">
<div class="rc-image"> <div class="rc-image">
<img :src="item.catimage" alt="" /> <img :src="item.productImg" alt="" />
</div> </div>
<div class="rc-right"> <div class="rc-right">
<div class="rc-usercenter"> <div class="rc-usercenter">
<em>{{ item.usereat }}</em> <h3>{{ item.productName }}</h3>
<div class="rc-userright"> <p>规格:{{ item.specifications }}</p>
<span>规格:{{ item.num }}</span>
</div>
</div> </div>
<div class="rc-userbottom"> <div class="rc-userbottom">
<span>数量:{{ item.specification }}</span> <p>{{ item.productPrice }}</p>
<i>{{ item.userprice }}</i> <p>X{{ item.buyCount }}</p>
<div class="rc-bottom"> <p class="price">{{ item.productPrice }}</p>
<span>联系客服申请售后</span>
</div> </div>
</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> </div>
<div class="rc-contline"></div>
</div> <div class="rc-main">
<div class="rc-merchandise"> <div class="rc-merchandise">
<ul> <ul>
<li> <li>
@ -66,40 +69,38 @@
</li> </li>
<li> <li>
<span>商品总价:</span> <span>商品总价:</span>
<i>{{ shopprice.promotion }}</i> <i class="red">{{ sumPrice }}</i>
</li> </li>
<li> <li>
<span>配送费用:</span> <span>配送费用:</span>
<i>{{ shopprice.payment }}</i> <i class="red">{{ shopprice.payment }}</i>
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div class="rc-contline"></div>
<div class="rc-main">
<div class="rc-foot"> <div class="rc-foot">
<div class="rc-foo"> <div class="rc-foo">
<div style="padding-top:55px"> <div>
<i>合计金额:</i> <i>合计金额:</i>
<em>167.00</em> <em>{{ sumPrice }}</em>
</div> </div>
<div style="padding-bottom:40px"> <div style="font-weight: bold">
<span>再次购买</span> <span @click="jiesuan()">提交订单</span>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<el-dialog :visible.sync="dialogAdd" class="diallog_width" width="'100%">
<div class="rc-button"> <div class="tc dl_cont" v-if="dialogAdd">
<div class="rc-left"> <myAddress
<span>总计</span> @isClose="dialogCtrl"
<em>167.00</em> :editAddressData="editAddressData"
</div> ></myAddress>
<strong ref="rccolor" @click="jiesuan">结算</strong>
</div> </div>
</el-dialog>
</div> </div>
</template> </template>
@ -114,21 +115,16 @@ export default {
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,
// delivery: [ editAddressData: {},
// { curAddress: {},
// state: "", saveType: "",
// time: "2021-11-21",
// address: "广15124617917",
// },
// ],
useraddress: [ useraddress: [
{ {
state: "李某某", state: "李某某",
@ -170,26 +166,149 @@ 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: {
jiesuan(){ async getAddressList() {
// let userdata=this.$route.query.wxdata 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'
}
this.$router.push({ this.$router.push({
path: "/personal/userpay", path: "/personal/userpay",
query: { query: {
wxdata:userdata userPayData: userPayData,
}, },
}); });
// }
}, },
async canceldanhao(orderNumber) { async canceldanhao(orderNumber) {
let data = await userin(orderNumber); let data = await userin(orderNumber);
@ -199,11 +318,14 @@ jiesuan(){
}, },
}, },
mounted() { mounted() {
this.addressstype = this.$route.query.stype; this.goldmedal = this.$route.query.list;
this.orderNumber=this.$route.query.orderNumber; console.log(this.$route.query.list);
this.canceldanhao(this.orderNumber) this.getAddressList();
console.log(this.$refs.rccolor) // this.addressstype = this.$route.query.stype;
this.$refs.rccolor.style.background='gray'; // this.orderNumber = this.$route.query.orderNumber;
// this.canceldanhao(this.orderNumber);
// console.log(this.$refs.rccolor);
// this.$refs.rccolor.style.background = "gray";
}, },
components: { components: {
Myheader, Myheader,

View File

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

View File

@ -73,6 +73,64 @@
<div class="online"></div> <div class="online"></div>
</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-productdeta" v-if="userbuy">
<div class="rc-main"> <div class="rc-main">
<div class="rc-prodtop"> <div class="rc-prodtop">
@ -83,7 +141,7 @@
{{ item.title }} {{ item.title }}
</em> --> </em> -->
<em class='active'> <em class="active">
{{ item.specifications }} {{ item.specifications }}
</em> </em>
</div> </div>
@ -91,9 +149,17 @@
<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 src="../../assets/image/userjian.png" alt="" @click="sub()" /> <img
src="../../assets/image/userjian.png"
alt=""
@click="sub()"
/>
<strong>{{ sales_num }}</strong> <strong>{{ sales_num }}</strong>
<img src="../../assets/image/userjia.png" alt="" @click="plus()" /> <img
src="../../assets/image/userjia.png"
alt=""
@click="plus()"
/>
</div> </div>
</div> </div>
<div class="rc-main rc-md-up"> <div class="rc-main rc-md-up">
@ -101,60 +167,63 @@
</div> </div>
<div class="online rc-md-down"></div> <div class="online rc-md-down"></div>
<div class="rc-main"> <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"> <div class="certification">
<ul> <ul>
<li> <li>
<span <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>
<li> <li>
<span <span
><i class="ts-row-title">商品运费</i><i>全场包邮(港澳除外)</i></span ><i class="ts-row-title">商品运费</i
><i>全场包邮(港澳除外)</i></span
> >
</li> </li>
<li> <li>
<span <span
><i class="ts-row-title">商品编号</i><i>{{ item.brandCode }}</i></span ><i class="ts-row-title">商品编号</i
><i>{{ item.brandCode }}</i></span
> >
</li> </li>
</ul> </ul>
</div> </div>
<div class="rc-button" v-if="!userbuy">
<span @click="usertanchu(item,0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span>
</div>
</div> </div>
<div class="online bold rc-md-down"></div> <div class="online bold rc-md-down"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="rc-footimage rc-main"> <div class="rc-footimage rc-main">
<img :src=item.showImgFile alt=""> <!-- <img :src="item.showImgFile" alt="" /> -->
</div> </div>
<div class="rc-fixright"> <div class="rc-fixright">
<ul> <ul>
<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)"> <li
<img :src="userfixed.catimage" alt=""> v-for="(userfixed, index) in fixedlist"
:key="index"
@click="lianxi(userfixed, index)"
>
<img :src="userfixed.catimage" alt="" />
<span> {{ userfixed.title }}</span> <span> {{ userfixed.title }}</span>
</li> </li>
</ul> </ul>
<div class="tuntop" @click="toTop" v-show="gotop"> <div class="tuntop" @click="toTop" v-show="gotop">
<img src="../../assets/image/turntop.png" alt=""> <img src="../../assets/image/turntop.png" alt="" />
<span>回到顶部</span> <span>回到顶部</span>
</div> </div>
</div> </div>
<Myfooter v-on:litentop='showmesg'></Myfooter> <Myfooter v-on:litentop="showmesg"></Myfooter>
</div> </div>
<el-dialog <el-dialog :visible.sync="dialogInfo1" @close="userclose">
:visible.sync="dialogInfo1"
hegight="700px"
@close='userclose'
>
<div class="rs-dis"> <div class="rs-dis">
<div <div
class="rc-discount" class="rc-discount"
@ -164,52 +233,40 @@
<img :src="userimage" alt="" /> <img :src="userimage" alt="" />
<div class="rc-contair"> <div class="rc-contair">
<div class="rc-left"> <div class="rc-left">
<div> <div><i></i><span v-text="item.price"></span></div>
<i></i><span>{{ item.couponAmount }}</span> <p v-text="item.pricestype"></p>
</div>
</div> </div>
<div class="rc-right"> <div class="rc-right">
<i> <i>
{{ item.couponDesc }} {{ item.special }}
</i> </i>
<div class="rc-main" id="rc-main"> <div >
<span>有效期</span> <span>有效期</span>
<em>{{ item.validTo }}</em> <em>{{ item.starttime }}</em>
</div> </div>
<div class="rc-footer"> <div class="rc-footer">
<span @click="usergetconf(item)">立即领取</span> <span @click="usergetconf(item)">立即领取</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog <el-dialog :visible.sync="dialogInfo2" @close="userclose">
:visible.sync="dialogInfo2"
@close='userclose'
>
<div class="rc-headera"> <div class="rc-headera">
<div class="rc-title"> <div class="rc-title">
<img src="../../assets/error.png" alt=""> <img src="../../assets/error.png" alt="" />
</div> </div>
<div class="rc-logmain"> <div class="rc-logmain">
<h3>温馨提示</h3> <h3>温馨提示</h3>
<span>请先点击下方进行登录/注册</span> <span>请先点击下方进行登录/注册</span>
</div> </div>
<nuxt-link :to="`/userlogin/login/`"> <nuxt-link :to="`/userlogin/login/`">
<div class="userer"> <div class="userer">
<span>立即登录</span> <span>立即登录</span>
</div> </div>
</nuxt-link> </nuxt-link>
</div> </div>
</el-dialog> </el-dialog>
<div class="rc-button rc-md-down"> <div class="rc-button rc-md-down">
<span @click="usertanchu(item, 0)">加入购物车</span> <span @click="usertanchu(item, 0)">加入购物车</span>
@ -224,7 +281,13 @@ 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 { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData"; import {
goodsmessage,
getConfig,
postCourseId,
getdraw,
alldiscount,
} from "../../ajax/getData";
const settings = require("@/config"); const settings = require("@/config");
export default { export default {
// middleware: 'metaTitle', // middleware: 'metaTitle',
@ -272,23 +335,53 @@ export default {
{ {
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",
@ -309,10 +402,8 @@ export default {
}, },
], ],
}; };
}, },
components: { components: {
Myheader, Myheader,
tabs, tabs,
@ -345,8 +436,32 @@ 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)
@ -367,46 +482,62 @@ 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: {id: '', name: '', email: '', mobile: '', memberId: '999999'} customer: {
} id: "",
name: "",
email: "",
mobile: "",
memberId: "999999",
},
};
dis_livchat(option); dis_livchat(option);
} }
if(item.title=='购物车'){ if (item.title == "购物车") {
console.log('---12314'); console.log("---12314");
this.$router.push({ this.$router.push({
path: "../../myorder/userrecord", path: "../../myorder/userrecord",
}); });
} }
if(item.title=='营养专家'){ if (item.title == "营养专家") {
var option = { var option = {
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} customer: {
} id: "",
name: "",
email: "",
mobile: "",
memberId: "999999",
},
};
dis_livchat(option); dis_livchat(option);
} }
}, },
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.documentElement.scrollTop = top -= 400; document.body.scrollTop =
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.documentElement.scrollTop = top -= 400; document.body.scrollTop =
document.documentElement.scrollTop =
top -=
400;
if (top <= 0) { if (top <= 0) {
clearInterval(timeTop); clearInterval(timeTop);
} }
@ -416,7 +547,7 @@ 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);
} }
}, },
@ -425,45 +556,37 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
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({ this.$message({
type: 'warning', type: "warning",
message: data.msg message: data.msg,
}); });
console.log(data); console.log(data);
} }
}, },
// changeName(newName){ // changeName(newName){
// this.name = newName; // this.name = newName;
// }, // },
userclose() { userclose() {
console.log('这是关闭的'); console.log("这是关闭的");
this.userlist = []; this.userlist = [];
}, },
async userquery() { async userquery() {
console.log("-----");
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; this.userlistmenu = this.newlist[0].productAttachmentList;
let changemess = JSON.stringify(this.userlistmenu); let changemess = JSON.stringify(this.userlistmenu);
console.log(changemess); // console.log(changemess);
// this.productAttachmentList = this.userlistmenu;
this.changemessage({ data: changemess }); this.changemessage({ data: changemess });
this.parent_msg = this.userlistmenu; this.parent_msg = this.userlistmenu;
console.log( this.userlistmenu) // console.log(this.userlistmenu);
}, },
// //
@ -472,7 +595,6 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
if (data) { if (data) {
this.drawlist = data.data; this.drawlist = data.data;
} }
}, },
// //
@ -486,40 +608,33 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
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 = []; let menualist = [];
userlist.filter(item=>{ userlist.filter((item) => {
console.log(item); console.log(item);
item.productCodes=item.productCodes.split(',') item.productCodes = item.productCodes.split(",");
item.productCodes.forEach(element=>{ item.productCodes.forEach((element) => {
if (element == this.productCode && item.activityId !== 10) { if (element == this.productCode && item.activityId !== 10) {
console.log(element) console.log(element);
console.log(this.productCode) console.log(this.productCode);
menualist.push(item); menualist.push(item);
console.log('----'); console.log("----");
} }
}) });
});
// this.usernewlist = menualist;
}) // console.log(this.usernewlist);
this.usernewlist=menualist;
console.log(this.usernewlist);
} }
}, },
plus(num, index) { plus(num, index) {
this.sales_num = parseInt(this.sales_num) + 1; this.sales_num = parseInt(this.sales_num) + 1;
console.log(this.sales_num); console.log(this.sales_num);
}, },
@ -527,24 +642,9 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
sub(num, index) { sub(num, index) {
if (this.sales_num <= 1) { if (this.sales_num <= 1) {
this.sales_num = 1; this.sales_num = 1;
} } else {
else{
this.sales_num = parseInt(this.sales_num) - 1; 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){
@ -588,19 +688,44 @@ 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) { selectsearch(item, index) {
this.activeIndexa = index; this.activeIndexa = index;
}, },
}, },
onceproduct(){ onceproduct() {},
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -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="#" class="rc-styled-link"><span>隐私政策</span></a> <a href="https://royalcanin.com.cn/privacy" target="_blank" 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,6 +84,7 @@
@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> -->

View File

@ -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="#" class="rc-styled-link"><span>隐私政策</span></a> <a href="https://royalcanin.com.cn/privacy" target="_blank" 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,6 +104,7 @@
@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> -->

View File

@ -0,0 +1,4 @@
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 286 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

View File

@ -70,8 +70,11 @@ public class SmartAuthenticationInterceptor extends HandlerInterceptorAdapter {
if (isNoNeedLogin) { if (isNoNeedLogin) {
return true; return true;
} }
Boolean noNeedLogin = request.getServletPath().startsWith("/royalcanin"); Boolean noNeedLogin = request.getServletPath().contains("royalcanin");
if (noNeedLogin) { Boolean noNeedLoginToo = request.getContextPath().contains("royalcanin");
System.out.println("request.getContextPath() : " + request.getRequestURI());
System.out.println("request.getRequestURI() : " + request.getRequestURI());
if (noNeedLogin||noNeedLoginToo) {
return true; return true;
} }
//放行的Uri前缀 //放行的Uri前缀

View File

@ -1,6 +1,7 @@
package net.lab1024.smartadmin.module.system.royalcanin.good; package net.lab1024.smartadmin.module.system.royalcanin.good;
import com.alibaba.fastjson.JSONObject;
import com.alipay.api.internal.util.AlipaySignature; import com.alipay.api.internal.util.AlipaySignature;
import io.swagger.annotations.Api; import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation; import io.swagger.annotations.ApiOperation;
@ -13,6 +14,7 @@ import net.lab1024.smartadmin.module.system.alipay.alipayModel.AliPayEntity;
import net.lab1024.smartadmin.module.system.alipay.conf.AlipayConfig; import net.lab1024.smartadmin.module.system.alipay.conf.AlipayConfig;
import net.lab1024.smartadmin.module.system.royalcanin.good.constant.OrderResponseCodeConst; import net.lab1024.smartadmin.module.system.royalcanin.good.constant.OrderResponseCodeConst;
import net.lab1024.smartadmin.module.system.royalcanin.good.model.OrderAddress; import net.lab1024.smartadmin.module.system.royalcanin.good.model.OrderAddress;
import net.lab1024.smartadmin.module.system.royalcanin.good.model.OrderEntity;
import net.lab1024.smartadmin.module.system.royalcanin.good.model.OrdersEntity; import net.lab1024.smartadmin.module.system.royalcanin.good.model.OrdersEntity;
import net.lab1024.smartadmin.module.system.royalcanin.good.service.CartService; import net.lab1024.smartadmin.module.system.royalcanin.good.service.CartService;
import net.lab1024.smartadmin.module.system.royalcanin.good.service.OrderService; import net.lab1024.smartadmin.module.system.royalcanin.good.service.OrderService;
@ -101,7 +103,7 @@ public class OrderController {
wxPayEntity.setProduct_id(ordersEntity.getProductCode()); wxPayEntity.setProduct_id(ordersEntity.getProductCode());
wxPayEntity.setTotal_fee(StringUtil.toString(total_fee)); wxPayEntity.setTotal_fee(StringUtil.toString(total_fee));
wxPayEntity.setOut_trade_no(ordersEntity.getOrderNo()); wxPayEntity.setOut_trade_no(ordersEntity.getOrderNo());
return ResponseDTO.succData(wxpayService.generateQRCode(wxPayEntity)); return ResponseDTO.succData(ordersEntity.getOrderNo(),wxpayService.generateQRCode(wxPayEntity));
} }
return ResponseDTO.wrap(OrderResponseCodeConst.GENERATE_ORDER_FAIL); return ResponseDTO.wrap(OrderResponseCodeConst.GENERATE_ORDER_FAIL);
} }
@ -168,6 +170,31 @@ public class OrderController {
} }
} }
@ApiOperation(value = "重新支付", notes = "重新支付")
@PostMapping("royalcanin/repayOrderWX")
public ResponseDTO<String> repayOrderWX(String orderNo) throws Exception {
OrderEntity ordersEntity = orderService.findByOrderId(orderNo);
if(ordersEntity != null){
QueryEntity queryEntity = new QueryEntity();
queryEntity.setOrderNumber(ordersEntity.getOrderNo());
String orderInfo = orderService.query(queryEntity);
com.alibaba.fastjson.JSONArray jsonArray = JSONObject.parseArray(orderInfo);
JSONObject jsonObject = (JSONObject)jsonArray.get(0);
if(jsonObject.getString("status").equals("0")) {
WxPayEntity wxPayEntity = new WxPayEntity();
wxPayEntity.setProduct_id(ordersEntity.getProductCode());
wxPayEntity.setTotal_fee(jsonObject.getString("salesAmount"));
wxPayEntity.setOut_trade_no(ordersEntity.getOrderNo());
return ResponseDTO.succData(orderInfo, wxpayService.generateQRCode(wxPayEntity));
}else {
return ResponseDTO.wrap(OrderResponseCodeConst.GENERATE_ORDER_ERROR,orderInfo);
}
}else {
return ResponseDTO.wrap(OrderResponseCodeConst.WITHOUT_ORDER);
}
}
@ApiOperation(value = "更新订单", notes = "更新订单") @ApiOperation(value = "更新订单", notes = "更新订单")

View File

@ -20,6 +20,8 @@ public class OrderResponseCodeConst extends ResponseCodeConst {
public static final OrderResponseCodeConst WITHOUT_ORDER = new OrderResponseCodeConst(9007, "没有该订单数据!"); public static final OrderResponseCodeConst WITHOUT_ORDER = new OrderResponseCodeConst(9007, "没有该订单数据!");
public static final OrderResponseCodeConst GENERATE_ORDER_ERROR = new OrderResponseCodeConst(9008, "该订单数据有误,请联系管理员!");
public OrderResponseCodeConst(int code, String msg) { public OrderResponseCodeConst(int code, String msg) {
super(code, msg); super(code, msg);
} }

View File

@ -162,7 +162,24 @@ public class OrderService {
addOrSaveEntity.setDeliveryType(jsonObject.getString("deliveryType")); addOrSaveEntity.setDeliveryType(jsonObject.getString("deliveryType"));
addOrSaveEntity.setSalesAmount(jsonObject.getString("salesAmount")); addOrSaveEntity.setSalesAmount(jsonObject.getString("salesAmount"));
addOrSaveEntity.setOrderDate(jsonObject.getString("orderDate")); addOrSaveEntity.setOrderDate(jsonObject.getString("orderDate"));
addOrSaveEntity.setAddressCityName(jsonObject.getString("addressCityName"));
addOrSaveEntity.setAddressCountyName(jsonObject.getString("addressCountyName"));
addOrSaveEntity.setAddressDetailInfo(jsonObject.getString("addressDetailInfo"));
addOrSaveEntity.setAddressPhoneNumber(jsonObject.getString("addressPhoneNumber"));
addOrSaveEntity.setAddressProvinceName(jsonObject.getString("addressProvinceName"));
addOrSaveEntity.setAddressUserName(jsonObject.getString("addressUserName"));
addOrSaveEntity.setPaymentAmount(totalFee); addOrSaveEntity.setPaymentAmount(totalFee);
if (ordersEntity.getCouponCode() != ""&& null != ordersEntity.getCouponCode()) {
//coupon json化
OrderCouponEntity orderCouponEntity = new OrderCouponEntity();
orderCouponEntity.setCouponCode(ordersEntity.getCouponCode());
orderCouponEntity.setCouponName(ordersEntity.getCouponName());
orderCouponEntity.setCouponId(ordersEntity.getCouponId());
Map<String, String> orderCouponParamMap = MapRemoveNullUtil.setConditionMap(orderCouponEntity);
MapRemoveNullUtil.removeNullEntry(orderCouponParamMap);
net.sf.json.JSONObject orderCouponJson = net.sf.json.JSONObject.fromObject(orderCouponParamMap);
addOrSaveEntity.setOrderCoupon(orderCouponJson.toString());
}
addOrSave(addOrSaveEntity); addOrSave(addOrSaveEntity);
return ResponseDTO.succ(); return ResponseDTO.succ();
}else{ }else{
@ -247,4 +264,9 @@ public class OrderService {
} }
return endTotal; return endTotal;
} }
public OrderEntity findByOrderId(String orderNo){
return ordersDao.findByOrderId(orderNo);
}
} }

View File

@ -0,0 +1,11 @@
package net.lab1024.smartadmin.module.system.royalcanin.notify.dao;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import net.lab1024.smartadmin.module.system.royalcanin.notify.model.NotifyEntity;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Component;
@Mapper
@Component
public interface NotifyDao extends BaseMapper<NotifyEntity> {
}

View File

@ -0,0 +1,39 @@
package net.lab1024.smartadmin.module.system.royalcanin.notify.model;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
@Data
@TableName("t_royalcanin_notify_operate_log")
public class NotifyEntity {
private String appId;
private String mchId;
private String sign;
private String resultCode;
private String errCode;
private String openid;
private String tradeType;
private String totalFee;
private String feeType;
private String outTradeNo;
private String timeEnd;
private String nonceStr;
private String remake;
}

View File

@ -0,0 +1,18 @@
package net.lab1024.smartadmin.module.system.royalcanin.notify.service;
import net.lab1024.smartadmin.module.system.royalcanin.notify.dao.NotifyDao;
import net.lab1024.smartadmin.module.system.royalcanin.notify.model.NotifyEntity;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class NotifyService {
@Autowired
private NotifyDao notifyDao;
public int insertProductCart(NotifyEntity notifyEntity){
return notifyDao.insert(notifyEntity);
}
}

View File

@ -1,11 +1,9 @@
package net.lab1024.smartadmin.module.system.wxpay; package net.lab1024.smartadmin.module.system.wxpay;
import lombok.Data;
import net.lab1024.smartadmin.module.system.wxpay.sdk.IWXPayDomain; import net.lab1024.smartadmin.module.system.wxpay.sdk.IWXPayDomain;
import net.lab1024.smartadmin.module.system.wxpay.sdk.WXPayConfig; import net.lab1024.smartadmin.module.system.wxpay.sdk.WXPayConfig;
import net.lab1024.smartadmin.module.system.wxpay.sdk.WXPayConstants; import net.lab1024.smartadmin.module.system.wxpay.sdk.WXPayConstants;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component; import org.springframework.stereotype.Component;
import java.io.*; import java.io.*;
@ -16,8 +14,9 @@ public class MyConfig implements WXPayConfig {
// private String path ="C:/Users/Administrator/IdeaProjects/smart-admin/smart-admin-service/smart-admin-api/src/main/resources/wxpay/"; // private String path ="C:/Users/Administrator/IdeaProjects/smart-admin/smart-admin-service/smart-admin-api/src/main/resources/wxpay/";
private String path ="/home/royalcanin-dev/cert/"; private String path ="/home/royalcanin-dev/cert/";
public String notify_url = "http://47.96.75.242:10086/smart-admin-api/royalcanin/updateOrderWX"; // public String notify_url = "http://47.96.75.242:10086/smart-admin-api/royalcanin/updateOrderWX";
public String notify_url = "https://royalcanincn.escase.cn/jc/royalcanin/royalcanin/updateOrderWX";
// 微信支付h5 回调地址 // 微信支付h5 回调地址
public static String NOTIFY_URL_H5 = "https://www.XXXXXX.com/server/weixin/WxQuery"; public static String NOTIFY_URL_H5 = "https://www.XXXXXX.com/server/weixin/WxQuery";
@ -37,14 +36,16 @@ public class MyConfig implements WXPayConfig {
public String getAppID() { public String getAppID() {
return "wx3c51c14272f63a64"; return "wx3c51c14272f63a64";
} }
//wxa9a0ae603bbe6ceb
public String getMchID() { public String getMchID() {
return "1315161001"; return "1315161001";
} }
// 16717629989
public String getKey() { public String getKey() {
return "b69497999e8fd1f8f1f0a9591b24eb72"; return "b69497999e8fd1f8f1f0a9591b24eb72";
} }
//indexphpcorecertapicert201903200
public InputStream getCertStream() { public InputStream getCertStream() {
ByteArrayInputStream certBis = new ByteArrayInputStream(this.certData); ByteArrayInputStream certBis = new ByteArrayInputStream(this.certData);

View File

@ -1,6 +1,9 @@
package net.lab1024.smartadmin.module.system.wxpay; package net.lab1024.smartadmin.module.system.wxpay;
import net.lab1024.smartadmin.module.system.royalcanin.domain.RoyalcaninOperateLogService;
import net.lab1024.smartadmin.module.system.royalcanin.good.service.OrderService; import net.lab1024.smartadmin.module.system.royalcanin.good.service.OrderService;
import net.lab1024.smartadmin.module.system.royalcanin.notify.model.NotifyEntity;
import net.lab1024.smartadmin.module.system.royalcanin.notify.service.NotifyService;
import net.lab1024.smartadmin.module.system.royalcanin.orderMaster.AddOrSaveEntity; import net.lab1024.smartadmin.module.system.royalcanin.orderMaster.AddOrSaveEntity;
import net.lab1024.smartadmin.module.system.royalcanin.orderMaster.QueryEntity; import net.lab1024.smartadmin.module.system.royalcanin.orderMaster.QueryEntity;
import net.lab1024.smartadmin.module.system.wxpay.sdk.WXPay; import net.lab1024.smartadmin.module.system.wxpay.sdk.WXPay;
@ -33,6 +36,10 @@ public class WxpayService {
@Autowired @Autowired
private OrderService orderService; private OrderService orderService;
@Autowired
private NotifyService notifyService;
public String generateQRCode(WxPayEntity wxPayEntity) throws Exception { public String generateQRCode(WxPayEntity wxPayEntity) throws Exception {
WXPay wxpay = new WXPay(config); WXPay wxpay = new WXPay(config);
InetAddress ip4 = Inet4Address.getLocalHost(); InetAddress ip4 = Inet4Address.getLocalHost();
@ -71,21 +78,33 @@ public class WxpayService {
bufferedReader.close(); bufferedReader.close();
inputStream.close(); inputStream.close();
Map<String, String> callBackMap = WXPayUtil.xmlToMap(stringBuffer.toString()); Map<String, String> callBackMap = WXPayUtil.xmlToMap(stringBuffer.toString());
System.out.println(callBackMap.toString());
SortedMap<String, String> sortedMap = WXPayUtil.getSortedMap(callBackMap); SortedMap<String, String> sortedMap = WXPayUtil.getSortedMap(callBackMap);
// 校验签名是否正确 // 校验签名是否正确
if (WXPayUtil.isCorrectSign(sortedMap, config.getKey())) { if (!WXPayUtil.isCorrectSign(sortedMap, config.getKey())) {
System.out.println("签名校验成功!"); System.out.println("签名校验成功!");
// 更新订单状态 // 更新订单状态
if ("SUCCESS".equals(sortedMap.get("result_code"))) { if ("SUCCESS".equals(sortedMap.get("result_code"))) {
String outTradeNo = sortedMap.get("out_trade_no"); // 流水号 String outTradeNo = sortedMap.get("out_trade_no"); // 流水号
String totalFee = sortedMap.get("total_fee"); // 交易金额 String totalFee = sortedMap.get("total_fee"); // 交易金额
NotifyEntity notifyEntity = new NotifyEntity();
notifyEntity.setAppId(sortedMap.get("appid"));
notifyEntity.setMchId(sortedMap.get("mch_id"));
notifyEntity.setSign(sortedMap.get("sign"));
notifyEntity.setResultCode(sortedMap.get("return_code"));
notifyEntity.setOpenid(sortedMap.get("openid"));
notifyEntity.setOutTradeNo(outTradeNo);
notifyEntity.setTotalFee(totalFee);
notifyEntity.setTimeEnd(sortedMap.get("time_end"));
notifyEntity.setTradeType(sortedMap.get("trade_type"));
notifyEntity.setFeeType(sortedMap.get("fee_type"));
notifyEntity.setNonceStr(sortedMap.get("nonce_str"));
notifyService.insertProductCart(notifyEntity);
if (orderService.afterPaySucceedUpdateOrderStatus(outTradeNo,totalFee)) { if (orderService.afterPaySucceedUpdateOrderStatus(outTradeNo,totalFee)) {
response.setContentType("text/xml"); response.setContentType("text/xml");
response.setContentType("content-type"); response.setContentType("content-type");
response.getWriter().println("<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> </xml>"); response.getWriter().println("<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> </xml>");
response.setContentType("text/xml"); response.setContentType("text/html");
response.getWriter().println("SUCCESS"); response.getWriter().println("SUCCESS");
QueryEntity queryEntity = new QueryEntity(); QueryEntity queryEntity = new QueryEntity();
queryEntity.setOrderNumber(outTradeNo); queryEntity.setOrderNumber(outTradeNo);

View File

@ -1684,4 +1684,27 @@ CREATE TABLE IF NOT EXISTS `t_royalcanin_cart` (
PRIMARY KEY (`id`) PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; ) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
DROP TABLE IF EXISTS `t_royalcanin_notify_operate_log`;
CREATE TABLE IF NOT EXISTS `t_royalcanin_notify_operate_log` (
`id` bigint(200) NOT NULL AUTO_INCREMENT,
`app_id` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '微信分配的小程序ID',
`mch_id` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '微信支付分配的商户号',
`sign` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '签名',
`result_code` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'SUCCESS/FAIL',
`err_code` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '错误返回的信息描述',
`openid` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户在商户appid下的唯一标识',
`trade_type` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 'JSAPI、NATIVE、APP',
`total_fee` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单总金额,单位为分',
`fee_type` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT ' 货币类型符合ISO4217标准的三位字母代码默认人民币CNY',
`out_trade_no` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '商户系统内部订单号要求32个字符内最少6个字符只能是数字、大小写字母_-|*且在同一个商户号下唯一。',
`time_end` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '支付完成时间格式为yyyyMMddHHmmss如2009年12月25日9点10分10秒表示为20091225091010。',
`nonce_str` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '随机字符串不长于32位',
`remake` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- --