1：所用技术：Vue2.X，Uview2.0，
确保项目上已经安装了Vue2.X 版本和组件Uview（注：其余组件：如ElementUI组件也适用，主要是样式的区别）
2：template层
<template>
<view class="NavPage">
<view class="LoginCard">
<uni-card is-shadow:true class="CardLogin" style="margin: 0rpx;">
<view>
<p style="text-align: center;color:#FF8787;font-weight: bold;font-size: 45rpx;margin-top: 30rpx;">
请选择登录角色</p>
<p class="RolesChange" style="margin-top: 40rpx;">
<button @click="Toconsume()" v-bind:style="{backgroundColor:isnoHave7}" v-show="IsBind7"
value="consumer">用户</button>
<button @click="Tomerchant()" v-bind:style="{backgroundColor:isnoHave1}" v-show="IsBind1"
value="merchant">商家</button>
<button @click="ToSalesMan()" v-bind:style="{backgroundColor:isnoHave2}" v-show="IsBind2"
value="salesMan">业务员</button>
<button @click="TocityAgency()" v-bind:style="{backgroundColor:isnoHave3}" v-show="IsBind3"
value="agent">市代理</button>
<button @click="ToareaAgency()" v-bind:style="{backgroundColor:isnoHave33}" v-show="IsBind4"
value="agent">区县代理</button>
<button @click="ToInvestMent()" v-bind:style="{backgroundColor:isnoHave4}" v-show="IsBind5"
value="investment">招商</button>
<button @click="ToStockHolder()" v-bind:style="{backgroundColor:isnoHave5}" v-show="IsBind6"
value="shareholder">股东</button>
</p>
</view>
</uni-card>
</view>
</view>
</template>3：Style层
<style scoped>
/deep/ uni-button::after {
border: none !important;
}
.RolesChange button {
width: 95%;
border-radius: 30rpx;
border: none;
margin-top: 30rpx;
color: white;
}
.CardLogin {
background-image: linear-gradient(#FFC3C3, #FFC3C3, white);
border: none;
border-radius: 40rpx;
position: fixed;
top: 14.7rem;
width: 85%;
left: 5%;
margin: auto;
}
page {
height: 100vh;
background-image: linear-gradient(#FF7576, #FF8787, white); //渐变色背景
/* 背景图片覆盖整个容器，保持宽高比 */
background-repeat: no-repeat;
}
.NavPage {
/* 背景图片不重复 */
position: fixed;
/* 定位为固定位置 */
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(123, 123, 123, 0.32);
}
</style>4：Script层
<script>
import {
getChangeInfo
} from "@/api/login.js"
import {
IfPay
} from "@/api/login.js"
export default {
data() {
return {
IsBind1: false,
IsBind2: false,
IsBind3: false,
IsBind4: false,
IsBind5: false,
IsBind6: false,
IsBind7: false,
isnoHave1: "#e0dedd",
isnoHave2: "#e0dedd",
isnoHave3: "#e0dedd",
isnoHave33: "#e0dedd",
isnoHave4: "#e0dedd",
isnoHave5: "#e0dedd",
isnoHave7: "#e0dedd",
consumer: "consumer",
merchant: "merchant",
salesMan: "salesMan", //业务员
countryagent: "countryagent", //区县代
cityagent: "cityagent", //市代
investment: "investment",
shareholder: "shareholder",
// 身份识别
identify: ''
}
},
onLoad() {
//后台数据——在页面加载时候进行获取
this.ToSell()
},
methods: {
FirstGetRoles() {
},
//获取后台数据——并且进行循环判断（前端自己定义的数在后台数组中进行查询遍历）
ToSell() {
getChangeInfo().then(res => {
console.log('res', res)
//后台传来的动态数组 res.data.roles
console.log(res.data.roles.length) //数组的长度，判断外层循环次数
// 循环判断————高亮
for (let i = 0; i < res.data.roles.length; i++) {
if (this.merchant === res.data.roles[i]) {
this.isnoHave1 = '#FF8787';
//动态颜色的控制，可以同时展示不同的高亮颜色
this.IsBind1 = true //如果有则控制v-show为true，让其显示
};
}
// 消费者
for (let i = 0; i < res.data.roles.length; i++) {
if (this.consumer === res.data.roles[i]) {
this.isnoHave7 = '#FF8787';
this.IsBind7 = true
};
}
//业务员
for (let j = 0; j < res.data.roles.length; j++) {
if (this.salesMan === res.data.roles[j]) {
this.isnoHave2 = '#FF8787';
this.IsBind2 = true
};
}
//市代理
for (let j = 0; j < res.data.roles.length; j++) {
if (this.cityagent === res.data.roles[j]) {
this.isnoHave3 = '#FF8787';
this.IsBind3 = true
};
}
//区县代理
for (let j = 0; j < res.data.roles.length; j++) {
if (this.countryagent === res.data.roles[j]) {
this.isnoHave33 = '#FF8787';
this.IsBind4 = true
};
}
for (let j = 0; j < res.data.roles.length; j++) {
if (this.investment === res.data.roles[j]) {
this.isnoHave4 = '#FF8787';
this.IsBind5 = true
};
}
for (let j = 0; j < res.data.roles.length; j++) {
if (this.shareholder === res.data.roles[j]) {
this.isnoHave5 = '#FF8787';
this.IsBind6 = true
};
}
}, err => {
})
},
//点击事件——每个进行不同的事件（点击跳转不同页面）
ToSalesMan() {
},
Toconsume() {
//采用uni-app的原生跳转方式——（注意navigation和switchTab的区别，后者仅用于tabbar页面的跳转）
// uni.navigateTo({
// url: ('/pages/RoleConsumerPages/ConsumeMine/index')
// })
},
Tomerchant() {
},
//市代理
TocityAgency() {
},
//区县代理
ToareaAgency() {
},
ToInvestMent() {
},
ToStockHolder() {
}
}
}
</script>