xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-16 23:53:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Global style updated / Header footer hyperlink completed / addressInput component bug fixed

Browse Source
This commit is contained in:
Vion
2022-01-20 19:56:52 +08:00
parent 1af28b2843
commit 7721e92d5f
12 changed files with 216 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
rc-busness/components/addressInput.vue
View File

@@ -10,12 +10,12 @@
<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
</ul>
<div class="close" @click="hideAddress"></div>
<div class="close" @click="pcHideAddress"></div>
</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:(returnValueArr[curDisplayingColIndex]?returnValueArr[curDisplayingColIndex].id==item.id:false) }">
{{ item.name }}
<span>{{ item.name }}</span>
</li>
</ul>
</div>
@@ -37,6 +37,9 @@
</div>
</template>
<script>
import {
areaData
} from "~/config/area.js";
export default {
props:["defaultValues"],
data(){
@@ -46,20 +49,7 @@ export default {
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'
}
],
columns:areaData,
curDisplayingColIndex:0,
curDisplayingCol:[]
}
@@ -84,6 +74,7 @@ export default {
//mobile end
//PC
this.curDisplayingColIndex=0;
this.switchTab(this.curDisplayingColIndex);
//PC end
//Initilizing end
@@ -128,20 +119,48 @@ export default {
//Handling City
let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
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
break;
default:
//Handling Area
let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
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
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 true;
}
}
return false;
},
validatePickedValues(){
let _self=this;
let provinceId='';
@@ -193,18 +212,24 @@ export default {
let tmpArr = [];
this.displayValue='';
values.forEach(function(ele,index){
if(!ele || !ele.name)
{
ele={id:'',name:''};
}
_self.displayValue = _self.displayValue + ele.name + " ";
tmpArr.push(ele.id);
returnVal.push(ele);
});
this.returnValueArr=returnVal;
this.returnValue=tmpArr.join("|");
this.$emit('getmenu',this.returnValueArr);
this.hideAddress();
},
onCancel() {
},
fitlerValuesInArray(stringStartWith,dataColArea){
stringStartWith=stringStartWith+"-";
let result=[];
dataColArea.forEach(function(ele){
if(ele.id.indexOf(stringStartWith)===0)
@@ -217,6 +242,9 @@ export default {
popAddress() {
this.show=true;
},
pcHideAddress() {
this.onConfirm(this.returnValueArr);
},
hideAddress() {
this.show=false;
},
@@ -225,10 +253,10 @@ export default {
if(tabIndex==0){
this.curDisplayingCol = this.columns[tabIndex].values;
}
//Check can switch to next tab
let lastValidatedTabIndex=this.validatePickedValues();
if(lastValidatedTabIndex<(tabIndex-1))
{
//TODO show warning here
let errorEle=document.querySelector(".ts-area-picker-values");
errorEle.classList.add("error");
let _self = this;
@@ -242,6 +270,9 @@ export default {
}
tabIndex=lastValidatedTabIndex+1;
}
//Check can switch to next tab end
//Building column values for current
this.curDisplayingColIndex=tabIndex;
let filteredData=this.columns[tabIndex].values;
if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
@@ -250,7 +281,13 @@ export default {
filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
}
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){
if(tabIndex==index){
ele.classList.add('active');
@@ -258,7 +295,7 @@ export default {
else
ele.classList.remove('active');
})
//Filling style end
}
},
mounted(){
@@ -273,7 +310,7 @@ export default {
<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;
@@ -287,9 +324,9 @@ export default {
li{
display:inline-block;
color:#333333;
width:3.125rem;
width:8rem;
padding: 1.25rem 0;
margin-right:4rem;
margin-right:.75rem;
cursor: pointer;
&.active{
color:#E2001A;
@@ -310,7 +347,8 @@ export default {
}
.ts-area-picker-values{
width:100%;
height:100%;
height:78%;
overflow:auto;
&.error{
position:relative;
width:100%;
@@ -329,21 +367,25 @@ export default {
}
}
ul{
padding:1rem 2.5rem 2rem 2.5rem;
padding:1rem .5rem 2rem 2.5rem;
margin:0;
}
li{
display:inline-block;
margin-top:1rem;
margin-right:3.875rem;
margin-right:.875rem;
color:#333;
width:8rem;
cursor:pointer;
&.nth-child(6n){
&:nth-child(4n){
margin-right:0;
}
&.active{
color:#E2001A;
border-bottom:4px solid #E2001A;
span{
display:inline-block;
border-bottom: 4px solid #E2001A;
}
}
}
}
@@ -406,6 +448,9 @@ export default {
.ts-area-picker-mobile{
display:none;
}
.ts-area-picker-container,.ts-area-picker-value-displayer{
width:40rem;
}
.ts-area-picker-desktop{
display:block;
width:100%;
@@ -413,9 +458,6 @@ export default {
border:1px solid #808285;
overflow:hidden;
}
.ts-area-picker-values{
}
}
@keyframes flash-error
{

24
rc-busness/components/header.vue
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>
</li>
<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 class="rc-list__item">
<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>
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
<li class="rc-list__item">
<a href="#/cats/products" class="rc-list__link" role="menuitem">产品</a>
<a href="/productdetails/productlist/?stype=0" class="rc-list__link" role="menuitem">产品</a>
</li>
<li class="rc-list__item">
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" role="menuitem">品种</a>
@@ -113,7 +113,7 @@
<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">
<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 class="rc-list__item">
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
@@ -131,13 +131,13 @@
</li>
<li class="rc-list__item rc-list__item--group">
<img src="../assets/showimage/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs">
<a href="/" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
<a href="/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">
<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 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>
</ul>
</li>
@@ -207,7 +207,7 @@
<a href="https://royalcanin.com.cn/cats" class="rc-list__header" title="Cat" role="menuitem">猫</a>
</li>
<li class="rc-list__item">
<a href="#cats/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
<a href="/productdetails/productlist/?stype=0" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
</li>
<li class="rc-list__item">
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
@@ -234,7 +234,7 @@
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header" title="Dog" role="menuitem">犬</a>
</li>
<li class="rc-list__item">
<a href="#dogs/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
<a href="/productdetails/productlist/?stype=1" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
</li>
<li class="rc-list__item">
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
@@ -252,19 +252,19 @@
</li>
<li class="rc-list__item rc-list__item--group">
<a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
<a href="/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">
<li class="rc-list__item rc-md-down">
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
</li>
<li class="rc-list__item rc-md-down">
<a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
<a href="/productdetails/productlist/" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
</li>
<li class="rc-list__item">
<a href="#cats/products" class="rc-list__link ca" role="menuitem">猫系列</a>
<a href="/productdetails/productlist/?stype=0" class="rc-list__link ca" role="menuitem">猫系列</a>
</li>
<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>
</ul>
</li>

6
rc-busness/components/rc-footer.vue
View File

@@ -48,15 +48,15 @@
</ul>
</li>
<li class="rc-list__item rc-list__item--group" role="none">
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3"
<a href="/productdetails/productlist/" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3"
>定制营养方案
</a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-3" aria-labelledby="nav-footer-top-3" role="menu">
<li class="rc-list__item">
<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 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>
</ul>
</li>