vue 点击图标,手机号用*显示,图标改变, 再次点击恢复手机号,图标改变
我写的效果
仅供参考
<template>
<div>
<!-- 头部 -->
<v-header
@slideFlagAction="slideFlagAction"
:headerFlag="headerFlag"
:headerText="headerText"
:openFlag="openFlag"
:shareFlag="shareFlag"
></v-header>
<div class="padding" :style="{'left':slide?'73%':'0'}">
<div class="layout">
<div class="contractWarp" v-for="(contractItem,contractIndex) in contractList" :key="contractIndex" :id="contractItem.contractId">
<div class="contractBox">
<div class="contractId">
<label>合同编号</label>
</div>
<div class="contractTime">
<label>{{contractItem.contractNo}}</label>
<label>{{contractItem.createTime}}</label>
</div>
</div>
<div class="contractState">
<div>已审核</div>
</div>
<div class="contractBox">
<div class="contractName">
<label>租房地址</label>
</div>
<div class="contractAddress">
<label>{{contractItem.zoneInfo1.zoneName}}</label>
<label>{{contractItem.zoneInfo2.zoneName}}</label>
<label>{{contractItem.zoneInfo3.zoneName}}</label><br/>
<label>{{contractItem.houseAddress}}</label>
<label>{{contractItem.houseRoom}}</label>
</div>
</div>
<div class="contractBox">
<div class="contractName">
<label>承租人</label>
</div>
<div class="contractAddress">
<label>{{contractItem.tenantName}}</label>
<label v-if="tenantPhoneArray" v-for="(phoneItem,phoneIndex) in tenantPhoneArray" :key="phoneIndex">
<span v-if="phoneIndex === contractIndex">{{phoneItem}}</span>
</label>
<div class="contractIcon" @click="tenantSeeAction(contractIndex)">
<img v-if="tenantPhoneArray[contractIndex]!==phoneArray.tenantPhone[contractIndex]" src="@/common/img/list_check_detail@2x.png" alt="">
<img v-else src="@/common/img/list_check_detail_no@2x.png" alt="">
</div>
</div>
</div>
<div class="contractBox">
<div class="contractName">
<label>出租人</label>
</div>
<div class="contractAddress">
<label>{{contractItem.landlordName}}</label>
<label v-if="landlordPhoneArray" v-for="(phoneItem,phoneIndex) in landlordPhoneArray" :key="phoneIndex">
<span v-if="phoneIndex == contractIndex">{{phoneItem}}</span>
</label>
<div class="contractIcon" @click="landlordSeeAction(contractIndex)">
<img v-if="landlordPhoneArray[contractIndex].indexOf('****')>-1" src="@/common/img/list_check_detail@2x.png" alt="">
<img v-else src="@/common/img/list_check_detail_no@2x.png" alt="">
</div>
</div>
</div>
<div class="contractPhoto">
<div v-for="(imgItem,imgIndex) in contractImgList" :key="imgIndex">
<img :src="CommonJs.PHOTO_SRC+imgItem" alt />
</div>
</div>
</div>
<v-copy></v-copy>
</div>
</div>
</div>
</template>
<script>
import TitleHeader from "@/components/TitleHeader.vue";
import CopyRightEndtion from "@/components/CopyRightEndtion.vue";
//接口
import { getContractListByMemberId } from "@/request/api.js";
export default {
components: {
"v-header": TitleHeader,
'v-copy':CopyRightEndtion,
},
data() {
return {
headerFlag: true,
headerText: "",
openFlag: false,
slide: false,
shareFlag:true,
contractList:[],
phone:'',
contractImgList:[],
//手机号数组
phoneArray:{tenantPhone:[],landlordPhone:[]},
// phoneFlag:true,
tenantPhoneArray:[],
landlordPhoneArray:[],
tenantSeeFlag:true,
landlordSeeFlag:false,
newVal:[],
phones:[]
};
},
watch:{
contractList:{
deep:true,
handler(newVal,oldVal){
this.kkArr = newVal;
console.log(newVal);
}
},
tenantPhoneArray:{
deep:true,
handler(newVal,oldVal){
this.tenantPhoneArray = newVal;
let mmm = newVal;
mmm = JSON.stringify(mmm);
console.log("触发了cccc:"+mmm);
}
},
landlordPhoneArray:{
deep:true,
handler(newVal,oldVal){
this.landlordPhoneArray = newVal;
}
},
},
created(){
let userInfo = this.$store.getters.userName;
userInfo = JSON.parse(userInfo);
getContractListByMemberId({
memberId:"8a8b80536c936efd016c9371aa460000",
}).then(res=>{
if(res.code=='200'){
console.log(res);
this.contractList = res.res.data!=[]?res.res.data:[];
let that = this;
for(let i=0;i<that.contractList.length;i++){
that.phoneArray.tenantPhone[i]=that.contractList[i].tenantMobile;
that.phoneArray.landlordPhone[i]=that.contractList[i].landlordMobile;
that.tenantPhoneArray[i] = that.contractList[i].tenantMobile;
that.landlordPhoneArray[i] = that.contractList[i].landlordMobile;
}
// 图片处理
for(let i=0;i<this.contractList.length;i++){
this.contractImgList = this.contractList[i].contractPics.split(',');
};
console.log(this.contractImgList)
}
})
},
methods: {
slideFlagAction(flag) {
this.slide = flag;
this.openFlag = flag;
},
tenantSeeAction(index){
let that = this;
console.log("触发了:"+index);
let oldVal = that.tenantPhoneArray[index];
let newVal = that.phoneArray.tenantPhone[index];
console.log("旧知:"+oldVal);
console.log("新知:"+newVal);
if(oldVal != newVal){
that.$set(that.tenantPhoneArray,index,newVal);
}else{
that.$set(that.tenantPhoneArray,index, that.CommonJs._formatMobile(newVal));
}
let kk = that.tenantPhoneArray;
kk = JSON.stringify(kk);
console.log("触发了aaa:"+kk);
},
landlordSeeAction(index){
let that = this;
console.log("触发了:"+index);
let oldVal = that.landlordPhoneArray[index];
let newVal = that.phoneArray.landlordPhone[index];
console.log("旧知:"+oldVal);
console.log("新知:"+newVal);
if(oldVal != newVal){
that.$set(that.landlordPhoneArray,index,newVal);
}else{
that.$set(that.landlordPhoneArray,index, that.CommonJs._formatMobile(newVal));
}
let kk = that.landlordPhoneArray;
kk = JSON.stringify(kk);
console.log("触发了aaa:"+kk);
}
}
};
</script>
<style scoped>
.padding {
/* padding: 0 0.24rem; */
font-family: PingFangSC-PingFang SC Regular, Arial, Helvetica, sans-serif;
position: absolute;
z-index: 10;
top: 0.88rem;
bottom: 0;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all 0.3s linear;
}
.padding .layout {
padding: 0.24rem 0.24rem 0 0.24rem;
}
.padding .contractWarp {
border: 1px solid #e7eaf0;
padding: 0 0.24rem;
margin-bottom: 15px;
font-size: 14px;
border-radius: 5px;
}
.padding .contractWarp .contractBox {
/* border: 1px solid black; */
display: flex;
align-items: baseline;
color: #141418;
}
.padding .contractWarp .contractState {
display: flex;
align-items: center;
justify-content: flex-end;
}
.padding .contractWarp .contractState div {
border: 1px solid #fa7d00;
padding: 2px 5px;
color: #fa7d00;
border-radius: 5px;
font-size: 12px;
}
.padding .contractWarp .contractBox .contractId {
width: 20%;
/* border: 1px solid black; */
font-size: 14px;
padding: 0.24rem 0.24rem 0.24rem 0;
}
.padding .contractWarp .contractBox .contractId label {
/* border: 1px solid black; */
font-size: 12px;
}
.padding .contractWarp .contractBox .contractTime {
width: 80%;
/* border: 1px solid black; */
font-size: 12px;
padding: 0.24rem 0 0.24rem 0;
display: flex;
justify-content: space-between;
}
.padding .contractWarp .contractBox .contractName {
width: 20%;
/* border: 1px solid black; */
font-size: 14px;
padding: 0.24rem 0.24rem 0.24rem 0;
}
.padding .contractWarp .contractBox .contractAddress {
width: 80%;
/* border: 1px solid black; */
font-size: 14px;
padding: 0.24rem 0 0.24rem 0;
}
.padding .contractWarp .contractBox .contractAddress .contractIcon{
width: 17px;
height: 12px;
margin-left: 10px;
display: inline-block;
}
.padding .contractWarp .contractBox .contractAddress div img{
width: 100%;
height: 100%;
}
.padding .contractWarp .contractBox .contractAddress label {
/* margin-right: 5px; */
}
.padding .contractWarp .contractPhoto {
/* border: 1px solid black; */
/* display: flex; */
padding: 0.24rem 0 0.24rem 0;
}
.padding .contractWarp .contractPhoto div {
display: inline-block;
/* margin-right: 14px;
margin-bottom: 14px; */
/* border: 1px solid red; */
width: 100px;
height: 100px;
border-radius: 5px;
}
.padding .contractWarp .contractPhoto div img {
width: 100%;
height: 100%;
}
</style>