jztAdmin/src/pages/store/classes/index.vue

<template>
	<div>
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" title="会员卡" hidden-breadcrumb></PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form ref="tableFrom" :model="tableFrom" :label-width="labelWidth" :label-position="labelPosition"
				@submit.native.prevent>
				<Row type="flex">
					<Col v-bind="grid">
					<Button v-auth="['admin-store-classes-add']" type="primary" icon="md-add"
						@click="add">添加班次</Button>
					</Col>
				</Row>
			</Form>
			<Table :columns="columns1" :data="tableList" ref="table" class="mt25" :loading="loading" highlight-row
				no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
				<template slot-scope="{ row, index }" slot="groupname">
					{{row.checkin_option.groupname}}
				</template>
				<!-- workdays -->
				<template slot-scope="{ row, index }" slot="workdays">
					<el-tag v-for="witem in row.checkin_option.checkindate[0].workdays">{{witem | showWd}}</el-tag>
				</template>
				<template slot-scope="{ row, index }" slot="status">
					<Icon type="md-checkmark" v-if="row.status === 1" color="#0092DC" size="14" />
					<Icon type="md-close" v-else color="#ed5565" size="14" />
				</template>
				<template slot-scope="{ row, index }" slot="time">
					<!-- <span> {{row.add_time | formatDate}}</span> -->
					<div v-for="time in row.time" style="margin-top: 10px;">
						<span>{{time.work_sec| showTime}} </span> - <span>{{time.off_work_sec | showTime}}</span>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="add_time">
					<span> {{row.add_time | formatDate}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<!-- <a @click="couponSend(row)">编辑</a>
					<Divider type="vertical" /> -->
					<a @click="couponDel(row,'删除会员卡',index)">删除</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"
					:page-size="tableFrom.limit" />
			</div>
		</Card>
		<!--表单编辑-->
		<edit-from :FromData="FromData" @changeType="changeType" ref="edits"></edit-from>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		checkGroupList,
		checkRuleList,
		getClasses
	} from '@/api/store';
	import editFrom from '@/components/from/from';
	import {
		formatDate
	} from '@/utils/validate';
	import Setting from "@/setting";
	export default {
		name: 'storeCoupon',
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, 'yyyy-MM-dd hh:mm');
				}
			},
			showWd(day) {
				let str = ''
				if(day) {
					switch (day*1){
						case 1:
							str = '星期一'
							break;
						case 2:
							str = '星期二'
							break;
						case 3:
							str = '星期三'
							break;
						case 4:
							str = '星期四'
							break;
						case  5:
							str = '星期五'
							break;
						case 6:
							str = '星期六'
							break;
						case  0:
							str = '星期日'
							break;
						default:
							break;
					}
				}
				return str
			}
		},
		components: {
			editFrom
		},
		filters: {
			showTime(seconds) {
				  

				if(seconds ) {
					var hours = Math.floor(seconds / 3600);
					var minutes = Math.floor((seconds % 3600) / 60);
					return (hours > 9?hours: '0' + hours ) + ": " + (minutes>9?minutes: '0'+ minutes) 
				}
			}
		},
		data() {
			return {
				roterPre: Setting.roterPre,
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24
				},
				loading: false,
				columns1: [{
						title: 'ID',
						key: 'id',
						width: 80
					},
					{
						title: '班次名称',
						key: 'name',
						minWidth: 150
					},
					{
						title: '打卡奖励',
						key: 'price',
						minWidth: 80
					},
					{
						title: '打卡时段',
						slot: 'time',
						minWidth: 100
					},
					{
						title: '添加时间',
						key: 'create_time',
						minWidth: 100
					},
					// {
					//     title: '折扣',
					//     key: 'discount_ratio',
					//     minWidth: 100
					// },
					{
						title: '操作',
						slot: 'action',
						fixed: 'right',
						minWidth: 170
					}
				],
				tableFrom: {
					page: 1,
					limit: 15
				},
				tableList: [],
				total: 0,
				FromData: null
			}
		},
		created() {
			this.getList();
		},
		computed: {
			...mapState('admin/layout', [
				'isMobile'
			]),
			labelWidth() {
				return this.isMobile ? undefined : 90;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			}
		},
		methods: {
			// 失效
			couponInvalid(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `marketing/coupon/status/${row.id}`,
					method: 'PUT',
					ids: ''
				};
				this.$modalSure(delfromData).then((res) => {
					this.$Message.success(res.msg);
					this.getList();
				}).catch(res => {
					this.$Message.error(res.msg);
				});
			},
			// 发布
			couponSend(row) {
				// this.$modalForm(VipEditApi(row.id)).then(() => this.getList());
				this.$router.push({
					path: this.roterPre + "/store/checkRule/create"
				});
			},
			// 删除
			couponDel(row, tit, num) {
				let delfromData = {
					title: tit,
					url: `membership/deleteCard/${row.id}`,
					method: 'DELETE',
					ids: ''
				};
				this.$modalSure(delfromData).then((res) => {
					this.$Message.success(res.msg);
					this.tableList.splice(num, 1)
				}).catch(res => {
					this.$Message.error(res.msg);
				});
			},
			// 列表
			getList() {
				this.loading = true;

				getClasses(this.tableFrom).then(async res => {
					let data = res.data
					this.tableList = data.list;
					this.total = res.data.count;
					this.loading = false;
				}).catch(res => {
					this.loading = false;
					this.$Message.error(res.msg);
				});
			},
			pageChange(index) {
				this.tableFrom.page = index;
				this.getList();
			},
			changeType(data) {
				this.type = data;
			},
			// 添加
			add() {
				// this.$modalForm(couponCreateApi()).then(() => this.getList());
				this.$router.push({
					path: this.roterPre + "/store/classes/create"
				});
				// this.addType(0);
			},
			addType(type) {
				couponCreateApi(type).then(async res => {
					if (res.data.status === false) {
						return this.$authLapse(res.data);
					}
					// console.log()
					console.log(res.data, 'res.data');
					this.FromData = res.data;
					this.$refs.edits.modals = true;
				}).catch(res => {
					this.$Message.error(res.msg);
				})
			},
			// 编辑
			edit(row) {
				this.$modalForm(couponEditeApi(row.id)).then(() => this.getList());
			},
			// 表格搜索
			userSearchs() {
				this.tableFrom.page = 1;
				this.getList();
			},
			// 修改成功
			submitFail() {
				this.getList();
			}
		}
	}
</script>

<style scoped>
	.ivu-col:nth-of-type(1) .ivu-form-item .ivu-form-item-label {
		width: 80px !important;
	}

	.ivu-col:nth-of-type(1) .ivu-form-item .ivu-form-item-content {
		margin-left: 80px !important;
	}
</style>