<template>
|
<view class="content">
|
<block v-if="!loading.page">
|
<view class="card" v-for="(item,index) of list" :key="index" :class="{'report-lost':item.state == 2}">
|
<view class="card-title">卡号：{{ item.kahao }}</view>
|
<view class="card-number">已饮水：{{item.yins }}ml</view>
|
<view class="card-illustrate">
|
<view class="illustrate-text" v-if="item.state == 1">使用中</view>
|
<view class="illustrate-text" v-if="item.state == 2">已挂失</view>
|
<view class="illustrate-text" @click="openMenu(item)">管理</view>
|
</view>
|
</view>
|
<view class="bind-add-card">
|
<button class="button" @click="$navTo('/pages/user/bindCard/addCard')">添加新卡</button>
|
</view>
|
<view class="nomore" v-if="!loading.page && !list.length">
|
<u-loadmore status="nomore" />
|
</view>
|
</block>
|
<u-loading-page :loading="loading.page"></u-loading-page>
|
<ActionSheet ref="actionSheet"></ActionSheet>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loading:{
|
page:true
|
},
|
list:[]
|
};
|
},
|
onLoad() {
|
},
|
onShow() {
|
this.init()
|
},
|
onPullDownRefresh() {
|
this.init()
|
},
|
methods:{
|
init(){
|
this.$apis.user.binding().then(res=>{
|
this.loading.page = false
|
this.list = res.data
|
uni.stopPullDownRefresh()
|
})
|
},
|
openMenu(item){
|
this.$refs.actionSheet.open(["饮水监控","挂失","解绑"],ev=>{
|
switch (ev.tapIndex){
|
case 0:
|
this.$navTo("/pages/user/bindCard/record?id=" + item.kahao)
|
break;
|
case 1:
|
if(item.state == 2){
|
this.$toast('已挂失')
|
return
|
}
|
this.$navTo("/pages/user/bindCard/verificationCode?t=1&title=挂失&id=" + item.id)
|
break;
|
case 2:
|
this.$navTo("/pages/user/bindCard/verificationCode?t=2&title=解绑&id=" + item.id)
|
break;
|
default:
|
break;
|
}
|
})
|
},
|
reportLostClose(){
|
this.reportLostShow = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.content{
|
padding: 28rpx;
|
.card{
|
margin: 0 auto;
|
width: 694rpx;
|
height: 244rpx;
|
background: #FF2729;
|
border-radius: 20rpx;
|
padding: 16rpx;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 20rpx;
|
&.report-lost{
|
opacity: 0.5;
|
}
|
.card-title{
|
font-size: 23rpx;
|
color: #FFFFFF;
|
line-height: 27rpx;
|
text-align: left;
|
font-style: normal;
|
}
|
.card-number{
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 38rpx;
|
color: #FFFFFF;
|
line-height: 58rpx;
|
}
|
.card-illustrate{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 12rpx;
|
.illustrate-text{
|
padding-left: 16rpx;
|
font-size: 24rpx;
|
color: #FFFFFF;
|
line-height: 24rpx;
|
}
|
}
|
}
|
.bind-add-card{
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 750rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #FFFFFF;
|
padding-bottom: 83rpx;
|
.button{
|
width: 635rpx;
|
height: 96rpx;
|
background: #FF2729;
|
border-radius: 58rpx;
|
font-weight: 700;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
line-height: 48rpx;
|
}
|
}
|
}
|
</style>
|
