!62 2022-1-20 Leung

Merge pull request !62 from Admin/sit-Leung
This commit is contained in:
Admin 2022-01-20 16:10:20 +00:00 committed by Gitee
commit 065de7ea02
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
13 changed files with 263 additions and 116 deletions

View File

@ -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;

View File

@ -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

View File

@ -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>

View File

@ -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

File diff suppressed because one or more lines are too long

View 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'

View File

@ -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)){

View File

@ -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>
@ -48,9 +49,9 @@
<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 {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

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: 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