@ -8,6 +8,33 @@ body{
|
|||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
.ts-no-data{
|
||||||
|
text-align: center;
|
||||||
|
margin:3rem 0;
|
||||||
|
}
|
||||||
|
.ts-mask{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
position: fixed;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index:99;
|
||||||
|
|
||||||
|
.ts-mask-bg{
|
||||||
|
background-color:#000;
|
||||||
|
opacity:.6;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
z-index:0;
|
||||||
|
position:absolute;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
.userloding {
|
.userloding {
|
||||||
background: url(../image/onloading.png) center center no-repeat;
|
background: url(../image/onloading.png) center center no-repeat;
|
||||||
width: 3.12rem;
|
width: 3.12rem;
|
||||||
@ -260,6 +287,7 @@ img, picture {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -473,6 +501,7 @@ img, picture {
|
|||||||
li{
|
li{
|
||||||
margin-top: .5rem;
|
margin-top: .5rem;
|
||||||
height:4.125rem;
|
height:4.125rem;
|
||||||
|
cursor: pointer;
|
||||||
img{
|
img{
|
||||||
width:22px;
|
width:22px;
|
||||||
height:auto;
|
height:auto;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ts-area-picker-container">
|
<div class="ts-area-picker-container">
|
||||||
<input class="ts-area-picker-value-displayer" placeholder="请选择收货地址" @focus="initAddress" v-model="displayValue"></input>
|
<input class="ts-area-picker-value-displayer" placeholder="请选择收货地址" @focus="popAddress" v-model="displayValue"></input>
|
||||||
<input type="hidden" :value="returnValue">
|
<input type="hidden" :value="returnValue">
|
||||||
|
|
||||||
<div class="ts-area-picker-desktop" v-if="show">
|
<div class="ts-area-picker-desktop" v-if="show">
|
||||||
@ -10,12 +10,12 @@
|
|||||||
<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
|
<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
|
||||||
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
|
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="close" @click="hideAddress"></div>
|
<div class="close" @click="pcHideAddress"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ts-area-picker-values">
|
<div class="ts-area-picker-values">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item, index) in curDisplayingCol" :key="item.id" @click="pickValue(item.id,item.name)" v-bind:class="{ active:(returnValueArr[curDisplayingColIndex]?returnValueArr[curDisplayingColIndex].id==item.id:false) }">
|
<li v-for="(item, index) in curDisplayingCol" :key="item.id" @click="pickValue(item.id,item.name)" v-bind:class="{ active:(returnValueArr[curDisplayingColIndex]?returnValueArr[curDisplayingColIndex].id==item.id:false) }">
|
||||||
{{ item.name }}
|
<span>{{ item.name }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -37,6 +37,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import {
|
||||||
|
areaData
|
||||||
|
} from "~/config/area.js";
|
||||||
export default {
|
export default {
|
||||||
props:["defaultValues"],
|
props:["defaultValues"],
|
||||||
data(){
|
data(){
|
||||||
@ -46,46 +49,21 @@ export default {
|
|||||||
returnValue:"",
|
returnValue:"",
|
||||||
returnValueArr:[],
|
returnValueArr:[],
|
||||||
show:false,
|
show:false,
|
||||||
columns:[
|
columns:areaData,
|
||||||
{
|
|
||||||
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,
|
curDisplayingColIndex:0,
|
||||||
curDisplayingCol:[]
|
curDisplayingCol:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
initAddress(){
|
initAddress(){
|
||||||
this.show=true;
|
|
||||||
//Initilizing
|
//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"}]
|
// 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}];
|
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}];
|
||||||
if(this.defaultValues)
|
if(this.defaultValues && this.defaultValues.length>0)
|
||||||
defaultValues=this.defaultValues;
|
{
|
||||||
this.$children.forEach(function(vueComponent){
|
defaultValues = this.defaultValues;
|
||||||
if(vueComponent._name=="<VanPicker>")
|
this.onConfirm(defaultValues);
|
||||||
{
|
}
|
||||||
self.onChange(vueComponent,defaultValues); //Important
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//mobile end
|
|
||||||
|
|
||||||
//PC
|
|
||||||
this.switchTab(this.curDisplayingColIndex);
|
|
||||||
//PC end
|
|
||||||
//Initilizing end
|
//Initilizing end
|
||||||
},
|
},
|
||||||
pickValue(pickId,pickName){
|
pickValue(pickId,pickName){
|
||||||
@ -132,20 +110,48 @@ export default {
|
|||||||
//Handling City
|
//Handling City
|
||||||
let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
|
let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
|
||||||
picker.setColumnValues(index,matchedCity);
|
picker.setColumnValues(index,matchedCity);
|
||||||
curSelection.city=matchedCity[0].id;
|
if(_self.inArray(ele,matchedCity))
|
||||||
|
{
|
||||||
|
curSelection.city=ele.id;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
console.log('502 : Invalid City Options');
|
||||||
|
curSelection.city=matchedCity[0].id;
|
||||||
|
}
|
||||||
//Handling City end
|
//Handling City end
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
//Handling Area
|
//Handling Area
|
||||||
let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
|
let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
|
||||||
picker.setColumnValues(index,matchedArea);
|
picker.setColumnValues(index,matchedArea);
|
||||||
curSelection.area=matchedArea[0].id;
|
if(_self.inArray(ele,matchedArea))
|
||||||
|
{
|
||||||
|
curSelection.area=ele.id;
|
||||||
|
}
|
||||||
|
else if(matchedArea.length)
|
||||||
|
{
|
||||||
|
console.log('503 : Invalid Area Options');
|
||||||
|
curSelection.area=matchedArea[0].id;
|
||||||
|
}
|
||||||
//Handling Area end
|
//Handling Area end
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
inArray(needle,haystack){
|
||||||
|
if(!needle || !needle.id)
|
||||||
|
return false;
|
||||||
|
if(!haystack || haystack.length<haystack)
|
||||||
|
return false;
|
||||||
|
for(var i in haystack){
|
||||||
|
if(haystack[i].id==needle.id){
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
validatePickedValues(){
|
validatePickedValues(){
|
||||||
let _self=this;
|
let _self=this;
|
||||||
let provinceId='';
|
let provinceId='';
|
||||||
@ -197,18 +203,24 @@ export default {
|
|||||||
let tmpArr = [];
|
let tmpArr = [];
|
||||||
this.displayValue='';
|
this.displayValue='';
|
||||||
values.forEach(function(ele,index){
|
values.forEach(function(ele,index){
|
||||||
|
if(!ele || !ele.name)
|
||||||
|
{
|
||||||
|
ele={id:'',name:''};
|
||||||
|
}
|
||||||
_self.displayValue = _self.displayValue + ele.name + " ";
|
_self.displayValue = _self.displayValue + ele.name + " ";
|
||||||
tmpArr.push(ele.id);
|
tmpArr.push(ele.id);
|
||||||
returnVal.push(ele);
|
returnVal.push(ele);
|
||||||
});
|
});
|
||||||
this.returnValueArr=returnVal;
|
this.returnValueArr=returnVal;
|
||||||
this.returnValue=tmpArr.join("|");
|
this.returnValue=tmpArr.join("|");
|
||||||
|
this.$emit('getmenu',this.returnValueArr);
|
||||||
this.hideAddress();
|
this.hideAddress();
|
||||||
},
|
},
|
||||||
onCancel() {
|
onCancel() {
|
||||||
|
|
||||||
},
|
},
|
||||||
fitlerValuesInArray(stringStartWith,dataColArea){
|
fitlerValuesInArray(stringStartWith,dataColArea){
|
||||||
|
stringStartWith=stringStartWith+"-";
|
||||||
let result=[];
|
let result=[];
|
||||||
dataColArea.forEach(function(ele){
|
dataColArea.forEach(function(ele){
|
||||||
if(ele.id.indexOf(stringStartWith)===0)
|
if(ele.id.indexOf(stringStartWith)===0)
|
||||||
@ -220,6 +232,36 @@ export default {
|
|||||||
},
|
},
|
||||||
popAddress() {
|
popAddress() {
|
||||||
this.show=true;
|
this.show=true;
|
||||||
|
let _self=this;
|
||||||
|
|
||||||
|
//mobile
|
||||||
|
//const picker = this.selectComponent('.ts-area-picker-mobile-component');
|
||||||
|
this.defaultValues.forEach(function(ele,index){
|
||||||
|
let tmpPointer=parseInt(_self.inArray(ele,_self.columns[index].values));
|
||||||
|
if(tmpPointer)
|
||||||
|
{
|
||||||
|
_self.columns[index].defaultIndex = tmpPointer;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// setTimeout(function(){
|
||||||
|
// //debugger;
|
||||||
|
// _self.$children.forEach(function(vueComponent){
|
||||||
|
// if(vueComponent._name=="<VanPicker>")
|
||||||
|
// {
|
||||||
|
// _self.onChange(vueComponent,_self.returnValueArr); //Important
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// },500);
|
||||||
|
//mobile end
|
||||||
|
|
||||||
|
//PC
|
||||||
|
this.curDisplayingColIndex=0;
|
||||||
|
this.switchTab(this.curDisplayingColIndex);
|
||||||
|
//PC end
|
||||||
|
},
|
||||||
|
pcHideAddress() {
|
||||||
|
this.onConfirm(this.returnValueArr);
|
||||||
},
|
},
|
||||||
hideAddress() {
|
hideAddress() {
|
||||||
this.show=false;
|
this.show=false;
|
||||||
@ -229,10 +271,10 @@ export default {
|
|||||||
if(tabIndex==0){
|
if(tabIndex==0){
|
||||||
this.curDisplayingCol = this.columns[tabIndex].values;
|
this.curDisplayingCol = this.columns[tabIndex].values;
|
||||||
}
|
}
|
||||||
|
//Check can switch to next tab
|
||||||
let lastValidatedTabIndex=this.validatePickedValues();
|
let lastValidatedTabIndex=this.validatePickedValues();
|
||||||
if(lastValidatedTabIndex<(tabIndex-1))
|
if(lastValidatedTabIndex<(tabIndex-1))
|
||||||
{
|
{
|
||||||
//TODO show warning here
|
|
||||||
let errorEle=document.querySelector(".ts-area-picker-values");
|
let errorEle=document.querySelector(".ts-area-picker-values");
|
||||||
errorEle.classList.add("error");
|
errorEle.classList.add("error");
|
||||||
let _self = this;
|
let _self = this;
|
||||||
@ -246,6 +288,9 @@ export default {
|
|||||||
}
|
}
|
||||||
tabIndex=lastValidatedTabIndex+1;
|
tabIndex=lastValidatedTabIndex+1;
|
||||||
}
|
}
|
||||||
|
//Check can switch to next tab end
|
||||||
|
|
||||||
|
//Building column values for current
|
||||||
this.curDisplayingColIndex=tabIndex;
|
this.curDisplayingColIndex=tabIndex;
|
||||||
let filteredData=this.columns[tabIndex].values;
|
let filteredData=this.columns[tabIndex].values;
|
||||||
if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
|
if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
|
||||||
@ -254,7 +299,13 @@ export default {
|
|||||||
filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
|
filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
|
||||||
}
|
}
|
||||||
this.curDisplayingCol=filteredData;
|
this.curDisplayingCol=filteredData;
|
||||||
|
if(this.curDisplayingCol && this.curDisplayingCol.length<=0)
|
||||||
|
{
|
||||||
|
this.onConfirm(this.returnValueArr);
|
||||||
|
}
|
||||||
|
//Building column values for current end
|
||||||
|
|
||||||
|
//Filling style
|
||||||
areaTabLi.forEach(function(ele,index){
|
areaTabLi.forEach(function(ele,index){
|
||||||
if(tabIndex==index){
|
if(tabIndex==index){
|
||||||
ele.classList.add('active');
|
ele.classList.add('active');
|
||||||
@ -262,11 +313,11 @@ export default {
|
|||||||
else
|
else
|
||||||
ele.classList.remove('active');
|
ele.classList.remove('active');
|
||||||
})
|
})
|
||||||
|
//Filling style end
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
|
this.initAddress();
|
||||||
},
|
},
|
||||||
components:{
|
components:{
|
||||||
|
|
||||||
@ -275,13 +326,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.ts-area-picker-container{display:inline-block;}
|
.ts-area-picker-container{display:inline-block;position:relative;}
|
||||||
.ts-area-picker-value-displayer{
|
.ts-area-picker-value-displayer{
|
||||||
width:40rem;
|
|
||||||
}
|
}
|
||||||
.ts-area-picker-tmp-value{
|
.ts-area-picker-tmp-value{
|
||||||
border-bottom:1px solid #D7D7D7;
|
border-bottom:1px solid #D7D7D7;
|
||||||
padding:0 2.5rem;
|
padding:0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position:relative;
|
position:relative;
|
||||||
ul{
|
ul{
|
||||||
@ -291,10 +342,11 @@ export default {
|
|||||||
li{
|
li{
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
color:#333333;
|
color:#333333;
|
||||||
width:3.125rem;
|
width:8rem;
|
||||||
padding: 1.25rem 0;
|
padding: 1.25rem 0;
|
||||||
margin-right:4rem;
|
margin-right:.75rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
&.active{
|
&.active{
|
||||||
color:#E2001A;
|
color:#E2001A;
|
||||||
border-bottom:4px solid #E2001A;
|
border-bottom:4px solid #E2001A;
|
||||||
@ -314,7 +366,8 @@ export default {
|
|||||||
}
|
}
|
||||||
.ts-area-picker-values{
|
.ts-area-picker-values{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:78%;
|
||||||
|
overflow:auto;
|
||||||
&.error{
|
&.error{
|
||||||
position:relative;
|
position:relative;
|
||||||
width:100%;
|
width:100%;
|
||||||
@ -333,21 +386,25 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul{
|
ul{
|
||||||
padding:1rem 2.5rem 2rem 2.5rem;
|
padding:1rem .5rem 2rem 2.5rem;
|
||||||
margin:0;
|
margin:0;
|
||||||
}
|
}
|
||||||
li{
|
li{
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
margin-top:1rem;
|
margin-top:1rem;
|
||||||
margin-right:3.875rem;
|
margin-right:.875rem;
|
||||||
color:#333;
|
color:#333;
|
||||||
|
width:8rem;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
&.nth-child(6n){
|
&:nth-child(4n){
|
||||||
margin-right:0;
|
margin-right:0;
|
||||||
}
|
}
|
||||||
&.active{
|
&.active{
|
||||||
color:#E2001A;
|
color:#E2001A;
|
||||||
border-bottom:4px solid #E2001A;
|
span{
|
||||||
|
display:inline-block;
|
||||||
|
border-bottom: 4px solid #E2001A;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -410,15 +467,19 @@ export default {
|
|||||||
.ts-area-picker-mobile{
|
.ts-area-picker-mobile{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
.ts-area-picker-container,.ts-area-picker-value-displayer{
|
||||||
|
width:40rem;
|
||||||
|
}
|
||||||
.ts-area-picker-desktop{
|
.ts-area-picker-desktop{
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
display:block;
|
display:block;
|
||||||
width:100%;
|
width:100%;
|
||||||
height:19.25rem;
|
height:19.25rem;
|
||||||
border:1px solid #808285;
|
border:1px solid #808285;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
}
|
background:#fff;
|
||||||
.ts-area-picker-values{
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes flash-error
|
@keyframes flash-error
|
||||||
|
@ -76,7 +76,7 @@
|
|||||||
<a href="https://royalcanin.com.cn/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="/productdetails/productlist/" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a>
|
<a href="https://royalcanin.com.cn/about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a>
|
||||||
@ -92,7 +92,7 @@
|
|||||||
<a href="https://royalcanin.com.cn/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="/productdetails/productlist/?stype=0" class="rc-list__link" role="menuitem">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" role="menuitem">品种</a>
|
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||||
@ -113,7 +113,7 @@
|
|||||||
<a href="https://royalcanin.com.cn/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="/productdetails/productlist/?stype=1" class="rc-list__link" role="menuitem">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
|
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||||
@ -131,13 +131,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-3.jpg" class="ts-head-img rc-margin-bottom--xs">
|
<img src="../assets/showimage/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||||
<a href="/" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
|
<a href="/productdetails/productlist/" 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="/productdetails/productlist/?stype=0" class="rc-list__link" role="menuitem">猫系列</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#dogs/products" class="rc-list__link" role="menuitem">狗系列</a>
|
<a href="/productdetails/productlist/?stype=1" class="rc-list__link" role="menuitem">狗系列</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
@ -207,7 +207,7 @@
|
|||||||
<a href="https://royalcanin.com.cn/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="/productdetails/productlist/?stype=0" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
||||||
@ -234,7 +234,7 @@
|
|||||||
<a href="https://royalcanin.com.cn/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="/productdetails/productlist/?stype=1" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
||||||
@ -252,19 +252,19 @@
|
|||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="rc-list__item rc-list__item--group">
|
<li class="rc-list__item rc-list__item--group">
|
||||||
<a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
|
<a href="/productdetails/productlist/" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
|
||||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="mega-nav-menu-3" role="menu">
|
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="mega-nav-menu-3" role="menu">
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
|
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item rc-md-down">
|
<li class="rc-list__item rc-md-down">
|
||||||
<a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
|
<a href="/productdetails/productlist/" 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="/productdetails/productlist/?stype=0" class="rc-list__link ca" 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">狗系列</a>
|
<a href="/productdetails/productlist/?stype=1" class="rc-list__link ca" role="menuitem">狗系列</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
@ -48,15 +48,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="#tailored-nutrition" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3"
|
<a href="/productdetails/productlist/" 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">
|
||||||
<a href="#cats/products" class="rc-list__link" data-ref="nav-link" role="menuitem">猫系列</a>
|
<a href="/productdetails/productlist/?stype=0" class="rc-list__link" data-ref="nav-link" role="menuitem">猫系列</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="rc-list__item">
|
<li class="rc-list__item">
|
||||||
<a href="#dogs/products" class="rc-list__link" data-ref="nav-link" role="menuitem">狗系列</a>
|
<a href="/productdetails/productlist/?style=1" class="rc-list__link" data-ref="nav-link" role="menuitem">狗系列</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
16
rc-busness/config/area.js
Normal file
@ -20,14 +20,20 @@ export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (window.fetch && method === 'fetch') {
|
if (window.fetch && method === 'fetch') {
|
||||||
|
let token='';
|
||||||
|
let tokenStr = localStorage.getItem("userInfo");
|
||||||
|
if(tokenStr){
|
||||||
|
tokenStr = JSON.parse(tokenStr);
|
||||||
|
if(tokenStr && tokenStr.xaccessToken)
|
||||||
|
token=tokenStr.xaccessToken;
|
||||||
|
}
|
||||||
let requestConfig = {
|
let requestConfig = {
|
||||||
|
|
||||||
method: type,
|
method: type,
|
||||||
headers: {
|
headers: {
|
||||||
// 'Accept': 'text/plain',
|
// 'Accept': 'text/plain',
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json',
|
||||||
|
'x-access-token': token
|
||||||
},
|
},
|
||||||
|
|
||||||
mode: 'cors',
|
mode: 'cors',
|
||||||
// channelId:'H5@2021',
|
// channelId:'H5@2021',
|
||||||
cache: 'force-cache'
|
cache: 'force-cache'
|
||||||
|
@ -5,9 +5,43 @@
|
|||||||
<!-- Suppose in header end -->
|
<!-- Suppose in header end -->
|
||||||
<div class="ts-banner-swiper-container">
|
<div class="ts-banner-swiper-container">
|
||||||
<swiper :options="headerSwiperOption">
|
<swiper :options="headerSwiperOption">
|
||||||
<swiper-slide v-for="(banner, index) in showingBanners" :key="index">
|
<swiper-slide>
|
||||||
<a :href="banner.link" target="_blank">
|
<a href="#" target="_blank">
|
||||||
<img :src="banner.src" class="useraimg"/>
|
<picture>
|
||||||
|
<source media="(max-width: 768px)" srcset="/images/banner/one.jpg">
|
||||||
|
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner1.png">
|
||||||
|
<img src="/images/banner/one.jpg">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</swiper-slide>
|
||||||
|
|
||||||
|
<swiper-slide>
|
||||||
|
<a href="#" target="_blank">
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 768px)" srcset="/images/banner/two.jpg">
|
||||||
|
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner2.png">
|
||||||
|
<img src="/images/banner/two.jpg">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</swiper-slide>
|
||||||
|
|
||||||
|
<swiper-slide>
|
||||||
|
<a href="#" target="_blank">
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 768px)" srcset="/images/banner/three.jpg">
|
||||||
|
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner3.png">
|
||||||
|
<img src="/images/banner/three.jpg">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</swiper-slide>
|
||||||
|
|
||||||
|
<swiper-slide>
|
||||||
|
<a href="#" target="_blank">
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 768px)" srcset="/images/banner/four.jpg">
|
||||||
|
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner4.png">
|
||||||
|
<img src="/images/banner/four.jpg">
|
||||||
|
</picture>
|
||||||
</a>
|
</a>
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
</swiper>
|
</swiper>
|
||||||
@ -49,7 +83,7 @@
|
|||||||
<swiper-slide v-for="(item, index) in catlistvideo" :key="index">
|
<swiper-slide v-for="(item, index) in catlistvideo" :key="index">
|
||||||
<div class="rc-video">
|
<div class="rc-video">
|
||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
<video controls="" :poster=item.catimage>
|
<video controls="" :poster=item.catimage preload="none">
|
||||||
<source :src=item.video type="video/mp4">
|
<source :src=item.video type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
@ -65,7 +99,7 @@
|
|||||||
<div class="sw-center" >
|
<div class="sw-center" >
|
||||||
<div class="rc-click" @click="selectproduce(item,index)">
|
<div class="rc-click" @click="selectproduce(item,index)">
|
||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
<video controls="controls" :poster=item.catimage>
|
<video controls="controls" :poster=item.catimage preload="none">
|
||||||
<source :src= item.video type="video/ogg">
|
<source :src= item.video type="video/ogg">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
@ -279,7 +313,7 @@
|
|||||||
<swiper-slide v-for="(item, key) in doglistvideo" :key="key">
|
<swiper-slide v-for="(item, key) in doglistvideo" :key="key">
|
||||||
<div class="rc-video">
|
<div class="rc-video">
|
||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
<video controls="" :poster=item.catimage>
|
<video controls="" :poster=item.catimage preload="none">
|
||||||
<source :src=item.video type="video/mp4">
|
<source :src=item.video type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
@ -295,7 +329,7 @@
|
|||||||
<div class="sw-center" >
|
<div class="sw-center" >
|
||||||
<div class="rc-click" @click="selectproduce(item,index)">
|
<div class="rc-click" @click="selectproduce(item,index)">
|
||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
<video controls="controls">
|
<video controls="controls" preload="none" :poster="item.catimage">
|
||||||
<source :src= item.video type="video/ogg">
|
<source :src= item.video type="video/ogg">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
@ -739,22 +773,19 @@
|
|||||||
userserachlist:[{}],
|
userserachlist:[{}],
|
||||||
doggan:[],
|
doggan:[],
|
||||||
dogtype:[
|
dogtype:[
|
||||||
{
|
{
|
||||||
title: "幼犬",
|
title: "离乳期",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "成犬",
|
title: "幼年",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "老年犬",
|
title: "成年",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "品种犬",
|
title: "老年",
|
||||||
},
|
}
|
||||||
{
|
],
|
||||||
title: "亚健康",
|
|
||||||
}
|
|
||||||
],
|
|
||||||
anchor:'',
|
anchor:'',
|
||||||
dogshi:[],
|
dogshi:[],
|
||||||
catlist:[],
|
catlist:[],
|
||||||
@ -823,22 +854,17 @@
|
|||||||
],
|
],
|
||||||
discoun: [
|
discoun: [
|
||||||
{
|
{
|
||||||
title: "幼猫",
|
title: "<4月龄",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "成猫",
|
title: "4-12月龄",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "老年猫",
|
title: "1-7岁",
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "品种猫",
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "亚健康猫"
|
title: ">7岁"
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
discountlist: [
|
discountlist: [
|
||||||
@ -1065,7 +1091,11 @@
|
|||||||
centeredSlides: true,
|
centeredSlides: true,
|
||||||
speed:1000,
|
speed:1000,
|
||||||
spaceBetween: 0,
|
spaceBetween: 0,
|
||||||
autoplay: true,
|
autoplay: {
|
||||||
|
delay: 3000,
|
||||||
|
stopOnLastSlide: false,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '#homeBannerSwiperPagnation',
|
el: '#homeBannerSwiperPagnation',
|
||||||
clickable:true
|
clickable:true
|
||||||
@ -1370,13 +1400,14 @@
|
|||||||
userdogShi(){
|
userdogShi(){
|
||||||
this.activeIndex5=(this.activeIndex5?this.activeIndex5:0);
|
this.activeIndex5=(this.activeIndex5?this.activeIndex5:0);
|
||||||
let apiDogSize=this.userdoglist[this.activeIndex5].title;
|
let apiDogSize=this.userdoglist[this.activeIndex5].title;
|
||||||
let apiDogFoodType=this.dogtype[this.quanshiCurIndex].title;
|
let apiDogAgeType=this.dogtype[this.quanshiCurIndex].title;
|
||||||
|
|
||||||
this.userstype=1;
|
this.userstype=1;
|
||||||
let petType={
|
let petType={
|
||||||
petType:1,
|
petType:1,
|
||||||
categoryName:"皇家犬湿粮",
|
tagStatus:2,
|
||||||
name:apiDogFoodType,
|
tagUsedAge:apiDogAgeType,
|
||||||
|
name:apiDogSize
|
||||||
}
|
}
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
for(let i =0;i<this.userserachlist.length;i++){
|
||||||
if(!this.userserachlist.includes(petType)){
|
if(!this.userserachlist.includes(petType)){
|
||||||
@ -1389,12 +1420,14 @@
|
|||||||
userdogGan(){
|
userdogGan(){
|
||||||
this.activeIndex6=(this.activeIndex6?this.activeIndex6:0);
|
this.activeIndex6=(this.activeIndex6?this.activeIndex6:0);
|
||||||
let apiDogSize=this.userdoglist[this.activeIndex6].title;
|
let apiDogSize=this.userdoglist[this.activeIndex6].title;
|
||||||
let apiDogFoodType=this.dogtype[this.quanganCurIndex].title;
|
let apiDogAgeType=this.dogtype[this.quanganCurIndex].title;
|
||||||
|
|
||||||
this.userstype=1;
|
this.userstype=1;
|
||||||
let petType={
|
let petType={
|
||||||
petType:1,
|
petType:1,
|
||||||
name:apiDogFoodType,
|
tagStatus:1,
|
||||||
|
tagUsedAge:apiDogAgeType,
|
||||||
|
name:apiDogSize
|
||||||
}
|
}
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
for(let i =0;i<this.userserachlist.length;i++){
|
||||||
if(!this.userserachlist.includes(petType)){
|
if(!this.userserachlist.includes(petType)){
|
||||||
@ -1565,10 +1598,11 @@
|
|||||||
catclickGan(){
|
catclickGan(){
|
||||||
this.userstype=0;
|
this.userstype=0;
|
||||||
this.maoganCurIndex=this.maoganCurIndex?this.maoganCurIndex:0;
|
this.maoganCurIndex=this.maoganCurIndex?this.maoganCurIndex:0;
|
||||||
let apiCatType=this.discoun[this.maoganCurIndex].title;
|
let apiCatAgeType=this.discoun[this.maoshiCurIndex].title;
|
||||||
let petType={
|
let petType={
|
||||||
petType:0,
|
petType:0,
|
||||||
name:apiCatType,
|
tagStatus:1,//干
|
||||||
|
tagUsedAge:apiCatAgeType,
|
||||||
}
|
}
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
for(let i =0;i<this.userserachlist.length;i++){
|
||||||
if(!this.userserachlist.includes(petType)){
|
if(!this.userserachlist.includes(petType)){
|
||||||
@ -1580,11 +1614,11 @@
|
|||||||
catclickShi(){
|
catclickShi(){
|
||||||
this.userstype=0;
|
this.userstype=0;
|
||||||
this.maoshiCurIndex=this.maoshiCurIndex?this.maoshiCurIndex:0;
|
this.maoshiCurIndex=this.maoshiCurIndex?this.maoshiCurIndex:0;
|
||||||
let apiCatType=this.discoun[this.maoshiCurIndex].title;
|
let apiCatAgeType=this.discoun[this.maoshiCurIndex].title;
|
||||||
let petType={
|
let petType={
|
||||||
petType:0,
|
petType:0,
|
||||||
categoryName:"皇家猫湿粮",
|
tagStatus:2,//湿
|
||||||
name:apiCatType,
|
tagUsedAge:apiCatAgeType,
|
||||||
}
|
}
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
for(let i =0;i<this.userserachlist.length;i++){
|
||||||
if(!this.userserachlist.includes(petType)){
|
if(!this.userserachlist.includes(petType)){
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
<div class="rc-max-width--xl rc-address">
|
<div class="rc-max-width--xl rc-address">
|
||||||
<span>所在地区:</span>
|
<span>所在地区:</span>
|
||||||
<input type="text" placeholder="请选择所在地区">
|
<input type="text" placeholder="请选择所在地区">
|
||||||
|
<addressInput></addressInput>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-max-width--xl rc-useaddress">
|
<div class="rc-max-width--xl rc-useaddress">
|
||||||
<span>详细地址:</span>
|
<span>详细地址:</span>
|
||||||
@ -49,8 +50,8 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
import Myheader from '~/components/header.vue'
|
import Myheader from '~/components/header.vue'
|
||||||
import MyFooter from '~/components/rc-footer.vue'
|
|
||||||
import addressInput from '~/components/addressInput.vue'
|
import addressInput from '~/components/addressInput.vue'
|
||||||
|
import MyFooter from '~/components/rc-footer.vue'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 66 KiB |