vue源码Demo
<template>
<div>
<div class="boxTwo">
<div class="boxList" v-for="(item,index) in diviceList" :key="index" @click="modeBoxs(e)">
<div class="boxTop">
<span>{{item.deviceName}}</span>
<span>{{item.sn}}</span>
</div>
<div class="boxBottom">
<span :class="item.status=='Y'?'frog_time1':'frog_time2'" v-if="item.status=='Y'">{{item.createTime}}</span>
<span :class="item.status=='N'?'frog_time2':'frog_time1'" v-if="item.status=='N'">{{item.createTime}}</span>
<span :class="item.status=='Y'?'frog_text1':'frog_text2'" v-if="item.status=='Y'">已激活</span>
<span :class="item.status=='N'?'frog_text2':'frog_text1'" v-if="item.status=='N'">未激活</span>
</div>
<div class="inputRight">
<input type="checkbox" class="checkBox" name="fkcheck" :id="item.deviceId"/>
</div>
</div>
</div>
<Bottom/>
<el-button
v-loading.fullscreen.lock="fullscreenLoading">
</el-button>
</div>
</template>
关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。
<script>
import Bottom from "../../components/Bottom"
import $ from 'jquery'
export default {
name:'AddDevice',
components:{
Bottom
},
data(){
return{
imgUrl1:require("../../assets/ic_serch@2x.png"),
imgUrl2:require("../../assets/scanG_icon@2x.png"),
diviceList:{},
fullscreenLoading: false,
}
},
updated() {
//刷新保持状态
var m = localStorage.getItem("deviceIdList");
var cbs=document.getElementsByName("fkcheck");
console.log(cbs)
if (m) {//cookie中有值,初始化勾选状态
var arr = m.split(',');
for(var j=0;j<arr.length;j++)
for(var i=0;i<cbs.length;i++)
if (cbs[i].id == arr[j]) { cbs[i].checked = true; break;}
}
},
mounted: function() {
this.deviceList()
},
methods: {
//input复选框
modeBoxs(e){
e = e || window.event;
if($(e.target).is(':checked')){
//点击的哪个现金券已经被选中了
var productList=document.getElementsByName("fkcheck");
console.log(productList)
var arrId=[];
for(var i=0;i<productList.length;i++){
//计算勾选的产品
if(productList[i].checked==true){
arrId.push(productList[i].id);
}
}
localStorage.setItem("deviceIdList",arrId)
}else{
var productList=document.getElementsByName("fkcheck");
var arrId=[];
for(var i=0;i<productList.length;i++){
//计算勾选的产品
if(productList[i].checked==true){
arrId.push(productList[i].id);
}
}
localStorage.setItem("deviceIdList",arrId)
}
},
//设备列表查询
deviceList(){
this.fullscreenLoading = true;
let sha256 = require("js-sha256").sha256
var myDate = new Date();
var nn=myDate.getFullYear(); //获取完整的年份(4位,1970-????)
var yy=myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
if(yy<10){
yy='0'+yy
}
var rr=myDate.getDate(); //获取当前日(1-31)
if(rr<10){
rr='0'+rr
}
var ss=myDate.getHours(); //获取当前小时数(0-23)
if(ss<10){
ss='0'+ss
}
var ff=myDate.getMinutes(); //获取当前分钟数(0-59)
if(ff<10){
ff='0'+ff
}
var mm=myDate.getSeconds(); //获取当前秒数(0-59)
if(mm<10){
mm='0'+mm
}
this.reqTime=nn+yy+rr+ss+ff+mm
this.reqDate=nn+yy+rr
this.username=localStorage.getItem('username')
console.log(this.username)
//json数据排序
var obj={
"reqTime":this.reqTime,
"reqDate":this.reqDate,
"tenantId":"0",//租户id
"merchantNo": this.username,
}
function objKeySort(obj) {//排序的函数
var newkey = Object.keys(obj).sort();
//先用Object内置类的keys方法获取要排序对象的属性名,再利用Array原型上的sort方法对获取的属性名进行排序,newkey是一个数组
var newObj = {};//创建一个新的对象,用于存放排好序的键值对
for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
}
return newObj;//返回排好序的新对象
}
var jStr = "";
for(var item in objKeySort(obj)){
jStr += item+"="+objKeySort(obj)[item]+"&";
}
jStr=jStr+'key=shrewshrewshrews'
this.pw = sha256(jStr)
console.log(this.pw,this.reqTime,this.reqDate,this.username)
var datas = {//如果后台接收的数据为formData形式,要用qs.stringify
"reqTime":this.reqTime,
"reqDate":this.reqDate,
"signature":this.pw,
"tenantId":"0",//租户id,还需要方法哦header
"merchantNo": this.username,//商户号
};
this.datas=datas
this.access_token=localStorage.getItem('access_token')
this.$axios({
url:this.Equipment_Host,
method: 'post',
data: this.datas,
headers:{
'TENANT_ID':'0',
'Authorization':'bearer '+this.access_token
},
})
.then(res=>{
console.log(res.data)
this.diviceList=res.data.data
let that=this
that.fullscreenLoading = false;
})
.catch(error=>{
let that=this
that.fullscreenLoading = false;
alert('操作错误,请退出重试!')
console.log(error)
})
},
},
}
</script>
<style lang="less" scoped>
.boxOne{
width: 100%;
height: 64px;
// background-color: red;
position: relative;
.device{
width: 152px;
height: 36px;
// background-color: green;
margin-top: 14px;
margin-left: 20px;
float: left;
position: relative;
.device_input{
display: inline-block;
width: 100%;
height: 100%;
outline: none;
border: none;
float: left;
padding-left: 20px;
box-sizing: border-box;
border-radius: 18px;
background-color: #F9F9F9;
}
.search_img{
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
right:22px;
top:8px;
}
}
.sweep{
width: 72px;
height: 20px;
// background-color: green;
float: left;
margin-top: 22px;
margin-left: 21px;
}
.sweep>img{
display: inline-block;
width: 20px;
height: 20px;
float: left;
margin-right: 6px;
}
.sweep>span{
display: inline-block;
height: 20px;
line-height: 20px;
float: left;
font-size: 14px;
color:#23AE88;
font-family: PingFangSC-Regular;
}
.confim{
width: 60px;
height: 36px;
float:right;
background-color: #23AE88;
line-height: 36px;
text-align: center;
font-size: 16px;
font-family: PingFangSC-Regular;
color:#fff;
border-radius: 18px;
margin-top: 14px;
margin-right: 20px;
}
}
.boxTwo{
width: 100%;
padding: 0 20px;
box-sizing: border-box;
.boxList{
width: 100%;
height:80px;
// background-color: red;
overflow: hidden;
position: relative;
.boxTop,.boxBottom{
width: 88.2%;
height: 22px;
// background-color: green;
margin-top: 18px;
float: left;
}
.boxBottom{
height: 17px;
margin-top: 5px;
.frog_time1{
display: inline-block;
float: left;
height: 100%;
line-height: 17px;
font-size:12px;
color: #029BDD;
font-family: PingFangSC-Regular;
}
.frog_time2{
display: inline-block;
float: left;
height: 100%;
line-height: 17px;
font-size:12px;
color: #CDCDCD;
font-family: PingFangSC-Regular;
}
.frog_text1{
display: inline-block;
float: left;
height: 100%;
line-height: 17px;
font-size:12px;
color: #029BDD;
font-family: PingFangSC-Regular;
margin-left: 12px;
}
.frog_text2{
display: inline-block;
float: left;
height: 100%;
line-height: 17px;
font-size:12px;
color: #CDCDCD;
font-family: PingFangSC-Regular;
margin-left: 12px;
}
}
.boxTop>span:first-child,.boxTop>span:last-child{
display: inline-block;
float: left;
height: 22px;
line-height: 22px;
font-size: 16px;
color: #333;
font-family: PingFangSC-Regular;
}
.boxTop>span:last-child{
max-width: 210px;
overflow: hidden;
margin-left: 4px;
}
.inputRight{
width: 24px;
height: 24px;
// background-color: red;
float: right;
.checkBox{
display: inline-block;
float: left;
width: 24px;
height:24px;
}
.checkBox[type="checkbox"] {
-webkit-appearance: none; /*清除复选框默认样式*/
background-image: url(../../assets/equListCheck_icon@2x.png);
background-repeat: no-repeat;
background-size: 24px 24px;
outline: none;
}
.checkBox[type="checkbox"]:checked {
background-image: url(../../assets/equListChecked_icon@2x.png);
background-size: 24px 24px;
-webkit-appearance: none; /*清除复选框默认样式*/
outline: none;
background-repeat: no-repeat;
}
}
}
.boxList::after{
content:"";
position: absolute;
bottom:0;
left: 0;
width: 100%;
height: 1px;
background-color: #D2D2D2;
}
}
input::-webkit-input-placeholder{
color: #CDCDCD;
font-family: PingFangSC-Regular;
font-size: 14px;
line-height: 36px;
}
.boxOne::after{
content:"";
position: absolute;
bottom:0;
left: 0;
width: 100%;
height: 1px;
background-color: #DEDEDE ;
}
</style>