408 lines
9.1 KiB
Vue
408 lines
9.1 KiB
Vue
<template>
|
|
<view class="member-detail-wrap">
|
|
<!-- 卡包 -->
|
|
<uni-popup ref="cardlistPop">
|
|
<view class="pop-box cardlistPop-box">
|
|
<view class="pop-header">
|
|
<view class="pop-header-text">卡包</view>
|
|
<view class="pop-header-close" @click="close('cardlist')"><i class="iconguanbi1 iconfont"></i></view>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="common-scrollbar pop-content">
|
|
<dataTable url="/cardservice/storeapi/membercard/lists" :cols="card" ref="table" :option="option" :pagesize="pagesize">
|
|
<template v-slot:action="dataTable">
|
|
<text class="view-detail" @click="viewDetails(dataTable.value.card_id)">查看详情</text>
|
|
</template>
|
|
</dataTable>
|
|
</scroll-view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="cardDetailPop">
|
|
<view class="pop-box cardDetailPop-box">
|
|
<view class="pop-header">
|
|
<view class="pop-header-text">详情</view>
|
|
<view class="pop-header-close" @click="$refs.cardDetailPop.close()"><i class="iconguanbi1 iconfont"></i></view>
|
|
</view>
|
|
<view class="pop-content">
|
|
<view class="tab-head">
|
|
<text
|
|
v-for="(item, index) in tabObj.list"
|
|
:key="index"
|
|
:class="{ active: tabObj.index == item.value }"
|
|
v-if="(item.value == 3 && card_detail.card_log && card_detail.card_log.length > 0) || item.value != 3"
|
|
@click="tabObj.index = item.value"
|
|
>
|
|
{{ item.name }}
|
|
</text>
|
|
</view>
|
|
<view class="tab-content">
|
|
<view class="basic-info" v-if="tabObj.index == 0">
|
|
<view class="basic-item using-hidden">卡项名称：{{ basicInfo.goods_name }}</view>
|
|
<view class="basic-item">价格：{{ basicInfo.price }}</view>
|
|
<view class="basic-item">
|
|
卡类型：{{
|
|
(basicInfo.card_type == 'oncecard' && '限次卡') ||
|
|
(basicInfo.card_type == 'timecard' && '限时卡') ||
|
|
(basicInfo.card_type == 'commoncard' && '通用卡')
|
|
}}
|
|
</view>
|
|
<view class="basic-item">总次数/已使用：{{ basicInfo.card_type == 'timecard' ? '不限' : basicInfo.total_num }}/{{ basicInfo.total_use_num }}</view>
|
|
<view class="basic-item">获取时间：{{ $util.timeFormat(basicInfo.create_time) }}</view>
|
|
<view class="basic-item">到期时间：{{ basicInfo.end_time > 0 ? $util.timeFormat(basicInfo.end_time) : '永久有效' }}</view>
|
|
</view>
|
|
<view class="other-information" v-if="tabObj.index == 1 && basicInfo && basicInfo.card_item">
|
|
<view class="information-head">
|
|
<text>商品名称</text>
|
|
<text>总次数/已使用</text>
|
|
<text>有效期</text>
|
|
</view>
|
|
<view class="information-body">
|
|
<view class="information-tr" v-for="(item, index) in basicInfo.card_item" :key="index">
|
|
<text class="using-hidden">{{ item.sku_name }}</text>
|
|
<text>{{ item.card_type == 'timecard' ? '不限' : item.num }} /{{ item.use_num }}</text>
|
|
<text>{{ item.end_time > 0 ? $util.timeFormat(item.end_time) : '永久有效' }}</text>
|
|
</view>
|
|
<view class="information-tr empty" v-if="!basicInfo.card_item.length">
|
|
<view class="iconfont iconwushuju"></view>
|
|
<view>暂无数据</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-info" v-if="tabObj.index == 2">
|
|
<dataTable
|
|
url="/cardservice/storeapi/membercard/records"
|
|
:cols="cardInfo.card"
|
|
ref="table"
|
|
:option="cardInfo.option"
|
|
:pagesize="cardInfo.pagesize"
|
|
></dataTable>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dataTable from '@/components/uni-data-table/uni-data-table.vue';
|
|
export default {
|
|
components: {
|
|
dataTable
|
|
},
|
|
props: {
|
|
option: {}
|
|
},
|
|
data() {
|
|
return {
|
|
pagesize: 8,
|
|
card: [
|
|
{
|
|
width: 20,
|
|
title: '名称',
|
|
align: 'left',
|
|
field: 'goods_name'
|
|
},
|
|
{
|
|
width: 18,
|
|
title: '卡号',
|
|
align: 'center',
|
|
field: 'card_code'
|
|
},
|
|
{
|
|
width: 8,
|
|
title: '卡类型',
|
|
align: 'left',
|
|
templet: function(data) {
|
|
if (data.card_type == 'oncecard') return '限次卡';
|
|
if (data.card_type == 'timecard') return '限时卡';
|
|
if (data.card_type == 'commoncard') return '通用卡';
|
|
}
|
|
},
|
|
{
|
|
width: 12,
|
|
title: '总次数/已使用',
|
|
align: 'center',
|
|
templet: data => {
|
|
var totalNum = data.card_type == 'timecard' ? '不限' : data.total_num;
|
|
return totalNum + '/' + data.total_use_num;
|
|
}
|
|
},
|
|
{
|
|
width: 17,
|
|
title: '创建时间',
|
|
align: 'center',
|
|
templet: data => {
|
|
return this.$util.timeFormat(data.create_time);
|
|
}
|
|
},
|
|
{
|
|
width: 17,
|
|
title: '到期时间',
|
|
align: 'center',
|
|
templet: data => {
|
|
if (data.end_time) return this.$util.timeFormat(data.end_time);
|
|
else return '长期有效';
|
|
}
|
|
},
|
|
{
|
|
width: 8,
|
|
title: '操作',
|
|
align: 'right',
|
|
action: true
|
|
}
|
|
],
|
|
tabObj: {
|
|
list: [
|
|
{
|
|
value: 0,
|
|
name: '基础信息'
|
|
},
|
|
{
|
|
value: 1,
|
|
name: '商品/项目'
|
|
},
|
|
{
|
|
value: 2,
|
|
name: '使用记录'
|
|
}
|
|
],
|
|
index: 1
|
|
},
|
|
currCardId: 0,
|
|
basicInfo: {},
|
|
cardInfo: {
|
|
card: [
|
|
{
|
|
width: 40,
|
|
title: '卡项名称',
|
|
align: 'left',
|
|
field: 'sku_name'
|
|
},
|
|
{
|
|
width: 20,
|
|
title: '使用次数',
|
|
align: 'center',
|
|
field: 'num'
|
|
},
|
|
{
|
|
width: 25,
|
|
title: '使用时间',
|
|
align: 'right',
|
|
templet: data => {
|
|
return this.$util.timeFormat(data.create_time);
|
|
}
|
|
},
|
|
{
|
|
width: 15,
|
|
title: '操作',
|
|
align: 'right',
|
|
action: true
|
|
}
|
|
],
|
|
option: {},
|
|
pagesize: 6
|
|
}
|
|
};
|
|
},
|
|
created() {},
|
|
methods: {
|
|
open() {
|
|
this.$refs.cardlistPop.open();
|
|
},
|
|
close() {
|
|
this.$refs.cardlistPop.close();
|
|
},
|
|
viewDetails(card_id) {
|
|
this.currCardId = card_id;
|
|
this.$refs.cardDetailPop.open();
|
|
this.getCardDetail();
|
|
|
|
this.cardInfo.option.member_id = this.memberInfo.member_id;
|
|
this.cardInfo.option.card_id = this.currCardId;
|
|
},
|
|
getCardDetail() {
|
|
let data = {};
|
|
data.member_id = this.memberInfo.member_id;
|
|
data.card_id = this.currCardId;
|
|
this.$api.sendRequest({
|
|
url: '/cardservice/storeapi/membercard/detail',
|
|
data: data,
|
|
success: res => {
|
|
this.basicInfo = {};
|
|
if (res.code >= 0) {
|
|
this.basicInfo = res.data;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// pop弹框
|
|
.pop-box {
|
|
background: #ffffff;
|
|
width: 8rem;
|
|
height: 7rem;
|
|
|
|
.pop-header {
|
|
padding: 0 0.15rem 0 0.2rem;
|
|
height: 0.5rem;
|
|
line-height: 0.5rem;
|
|
border-bottom: 0.01rem solid #f0f0f0;
|
|
font-size: 0.14rem;
|
|
color: #333;
|
|
overflow: hidden;
|
|
border-radius: 0.02rem 0.2rem 0 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.pop-header-close {
|
|
cursor: pointer;
|
|
i {
|
|
font-size: 0.18rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pop-content {
|
|
height: calc(100% - 1rem);
|
|
overflow-y: scroll;
|
|
padding: 0.1rem 0.2rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.pop-bottom {
|
|
button {
|
|
width: 95%;
|
|
}
|
|
}
|
|
}
|
|
.cardlistPop-box {
|
|
width: 10rem;
|
|
height: 5.7rem;
|
|
.pop-content {
|
|
height: calc(100% - 0.5rem);
|
|
}
|
|
|
|
/deep/ .tpage {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.basic-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.2rem;
|
|
padding: 0.2rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.basic {
|
|
padding: 0.1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
.cardDetailPop-box {
|
|
width: 10rem;
|
|
height: 5.7rem;
|
|
.tab-head {
|
|
display: flex;
|
|
background-color: #f7f8fa;
|
|
text {
|
|
height: 0.5rem;
|
|
line-height: 0.5rem;
|
|
text-align: center;
|
|
padding: 0 0.35rem;
|
|
box-sizing: border-box;
|
|
&.active {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.pop-content {
|
|
overflow-y: inherit;
|
|
.basic-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 0.2rem;
|
|
.basic-item {
|
|
flex-basis: 33%;
|
|
height: 0.4rem;
|
|
line-height: 0.4rem;
|
|
}
|
|
}
|
|
}
|
|
.other-information {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
padding-top: 0.2rem;
|
|
.information-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #f7f8fa;
|
|
text {
|
|
padding: 0 0.2rem;
|
|
height: 0.5rem;
|
|
line-height: 0.5rem;
|
|
&:nth-child(1) {
|
|
flex-basis: 35%;
|
|
}
|
|
&:nth-child(2) {
|
|
flex-basis: 35%;
|
|
}
|
|
&:nth-child(2) {
|
|
flex-basis: 30%;
|
|
}
|
|
}
|
|
}
|
|
.information-tr {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 0.01rem solid #e6e6e6;
|
|
text {
|
|
padding: 0 0.2rem;
|
|
height: 0.5rem;
|
|
line-height: 0.5rem;
|
|
|
|
&:nth-child(1) {
|
|
flex-basis: 35%;
|
|
}
|
|
&:nth-child(2) {
|
|
flex-basis: 35%;
|
|
}
|
|
&:nth-child(2) {
|
|
flex-basis: 30%;
|
|
}
|
|
}
|
|
&.empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 0.5rem;
|
|
color: #909399;
|
|
.iconfont {
|
|
font-size: 0.25rem;
|
|
margin: 0.05rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.card-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 0.2rem;
|
|
}
|
|
}
|
|
.view-detail {
|
|
color: $primary-color;
|
|
}
|
|
</style>
|