|
|
|
@ -1,16 +1,39 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="mycard-container">
|
|
|
|
<div class="mycard-container">
|
|
|
|
<div class="contenttitle">
|
|
|
|
<div class="contenttitle">
|
|
|
|
<span>我的老乡</span>
|
|
|
|
<span>我的卡券</span>
|
|
|
|
<div>
|
|
|
|
</div>
|
|
|
|
<button>已在职</button>
|
|
|
|
<div class="cardbox">
|
|
|
|
<button>未在职</button>
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
|
|
|
<a-spin tip="加载中..." :spinning="isspinning"> </a-spin>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
|
|
|
v-for="(item, index) in cardlist"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
:class="item.state1 !== '未使用' ? 'used' : ''"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<h1><span>¥</span>{{ item.balance / 100 }}</h1>
|
|
|
|
|
|
|
|
<p>卡券(元)</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<p>{{ item.couponName }}</p>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
有效期至<span>{{ item.pastDueTime }}</span>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>{{ item.typeName }}</div>
|
|
|
|
|
|
|
|
<div>{{ item.state1 }}</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import { userCardApi } from "../../../../api/userinfo";
|
|
|
|
|
|
|
|
import { formatDateYMD } from "../../../../utils/commonUtil";
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
// 组件名称
|
|
|
|
// 组件名称
|
|
|
|
name: "",
|
|
|
|
name: "",
|
|
|
|
@ -20,7 +43,14 @@ export default {
|
|
|
|
props: {},
|
|
|
|
props: {},
|
|
|
|
// 组件状态值
|
|
|
|
// 组件状态值
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {};
|
|
|
|
return {
|
|
|
|
|
|
|
|
pagination: {
|
|
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
|
|
pageSize: 6,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
cardlist: [],
|
|
|
|
|
|
|
|
isspinning: false,
|
|
|
|
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 计算属性
|
|
|
|
// 计算属性
|
|
|
|
computed: {},
|
|
|
|
computed: {},
|
|
|
|
@ -30,14 +60,52 @@ export default {
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
created() {},
|
|
|
|
created() {
|
|
|
|
|
|
|
|
this.getUserCard();
|
|
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
mounted() {},
|
|
|
|
mounted() {},
|
|
|
|
// 组件方法
|
|
|
|
// 组件方法
|
|
|
|
methods: {},
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
async getUserCard() {
|
|
|
|
|
|
|
|
this.isspinning = true;
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
const { data } = await userCardApi(this.pagination);
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
if (data.status === 200) {
|
|
|
|
|
|
|
|
this.cardlist = data.data.recordList;
|
|
|
|
|
|
|
|
this.cardlist.forEach((val) => {
|
|
|
|
|
|
|
|
val.pastDueTime = formatDateYMD(val.pastDueTime);
|
|
|
|
|
|
|
|
if (val.state === 0) {
|
|
|
|
|
|
|
|
val.state1 = "未使用";
|
|
|
|
|
|
|
|
} else if (val.state === 1) {
|
|
|
|
|
|
|
|
val.state1 = "已使用";
|
|
|
|
|
|
|
|
} else if (val.state === 2) {
|
|
|
|
|
|
|
|
val.state1 = "已过期";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
this.isspinning = false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.cardlist = data.data.recordList;
|
|
|
|
|
|
|
|
this.cardlist.forEach((val) => {
|
|
|
|
|
|
|
|
val.pastDueTime = formatDateYMD(val.pastDueTime);
|
|
|
|
|
|
|
|
if (val.state === 0) {
|
|
|
|
|
|
|
|
val.state1 = "未使用";
|
|
|
|
|
|
|
|
} else if (val.state === 1) {
|
|
|
|
|
|
|
|
val.state1 = "已使用";
|
|
|
|
|
|
|
|
} else if (val.state === 2) {
|
|
|
|
|
|
|
|
val.state1 = "已过期";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log(this.cardlist);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.log(error);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
@ -47,6 +115,7 @@ export default {
|
|
|
|
padding-bottom: 16px;
|
|
|
|
padding-bottom: 16px;
|
|
|
|
justify-content: space-between;
|
|
|
|
justify-content: space-between;
|
|
|
|
border-bottom: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
|
border-bottom: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
|
|
|
|
|
margin-top: 16px;
|
|
|
|
margin-bottom: 16px;
|
|
|
|
margin-bottom: 16px;
|
|
|
|
span {
|
|
|
|
span {
|
|
|
|
font-size: 20px;
|
|
|
|
font-size: 20px;
|
|
|
|
@ -68,4 +137,95 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.cardbox {
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
|
|
|
li.used {
|
|
|
|
|
|
|
|
// 已使用和已过期的样式
|
|
|
|
|
|
|
|
background: #eeeeee;
|
|
|
|
|
|
|
|
border: 1px solid #cccccc;
|
|
|
|
|
|
|
|
> div:nth-of-type(1) {
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> div:nth-of-type(4) {
|
|
|
|
|
|
|
|
background: #cccccc;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
|
|
|
// display: flex;
|
|
|
|
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
|
|
|
// align-items: center;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
|
|
height: 102px;
|
|
|
|
|
|
|
|
// width: 790px;
|
|
|
|
|
|
|
|
background-color: #fff1e7;
|
|
|
|
|
|
|
|
border: 1px solid #ff6a00;
|
|
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
// flex: 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
> div:nth-of-type(1) {
|
|
|
|
|
|
|
|
margin-left: 52px;
|
|
|
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
|
|
|
font-size: 44px;
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
> div:nth-of-type(2) {
|
|
|
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
|
|
|
margin-left: 83px;
|
|
|
|
|
|
|
|
p:first-child {
|
|
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
p:last-child {
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
> div:nth-of-type(3) {
|
|
|
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
|
|
|
margin-left: 80px;
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
> div:nth-of-type(4) {
|
|
|
|
|
|
|
|
margin-top: 38px;
|
|
|
|
|
|
|
|
width: 68px;
|
|
|
|
|
|
|
|
height: 28px;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
background: #ff6a00;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
border-radius: 96px 0px 0px 96px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
