jztAdmin/src/pages/marketing/serveItem/index.vue

<template>
	<div>
		<Card :bordered="false" dis-hover class="mt15 ivu-mt" :padding="0">
			<div class="new_card_pd">
				<!-- 查询条件 -->

				<Form ref="tableFrom" inline :model="tableFrom" :label-width="labelWidth"
					:label-position="labelPosition" @submit.native.prevent>
					<!-- <FormItem label="是否删除：" label-for="is_show">
						<Select v-model="tableFrom.is_del" placeholder="请选择" clearable @on-change="userSearchs"
							class="input-add">
							<Option :value="0">正常</Option>
							<Option :value="1">已删除</Option>
						</Select>
					</FormItem> -->
					<FormItem label="项目名称：" label-for="coupon_title">
						<Input v-model="tableFrom.key" placeholder="请输入服务项目名称名称" @on-search="userSearchs"
							class="input-add mr14" />
						<Button type="primary" @click="orderSearch()" class="mr14">查询</Button>
					</FormItem>
				</Form>
			</div>
		</Card>
		<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-marketing-serve-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 }" slot="coupon_price">
					<span v-if="row.coupon_type==1">{{row.coupon_price}}元</span>
					<span
						v-if="row.coupon_type==2">{{parseFloat(row.coupon_price)/10}}折（{{row.coupon_price.toString().split(".")[0]}}%）</span>
				</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="is_show">
					<span> {{row.is_show == 1 ?'显示': '隐藏'}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="price">
					<span> {{row.product.price }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="add_time">
					<span> {{row.add_time }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="status">
					<i-switch v-model="row.is_display" :value="row.is_display" :true-value="1" :false-value="0"
						@on-change="changeSwitch(row)" size="large">
						<span slot="open">显示</span>
						<span slot="close">隐藏</span>
					</i-switch>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<!-- <a @click="bind(row)">绑定项目</a>
					<Divider type="vertical" /> -->
					<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 {
		couponEditeApi,
		couponSendApi,
		ServeItemListApi,
		VipDeleteApi,
		serveEditApi,
		serveDelApi,
		createServeProduct
	} from '@/api/marketing';
	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');
				}
			}
		},
		components: {
			editFrom
		},
		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: 'store_name',
						minWidth: 150
					},
					{
						title: '价格',
						slot: 'price',
						minWidth: 80
					},
					// {
					// 	title: '手工费',
					// 	key: 'craft_price',
					// 	minWidth: 100
					// },
					// {
					// 	title: '销售提成',
					// 	key: 'sales_commissions',
					// 	minWidth: 100
					// },
					// {
					// 	title: '上级提成百分比',
					// 	key: 'superior_commission',
					// 	minWidth: 100
					// },
					{
						title: '库存',
						key: 'repertory',
						minWidth: 100
					},
					{
						title: '前端显示',
						slot: 'status',
						minWidth: 100
					},
					{
						title: '操作',
						slot: 'action',
						fixed: 'right',
						minWidth: 170
					}
				],
				tableFrom: {
					is_show: 1,
					field_key: '',
					page: 1,
					limit: 15,
					is_del: 0,
					service_card_id: 0
				},
				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: {
			changeSwitch(row) {
				//
				console.log(row)
				createServeProduct(row.id, row)
					.then((res) => {
						this.$Message.success(res.msg);
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			//绑定项目
			bind(row) {
				this.$router.push({
					path: this.roterPre + "/marketing/serve/bind?id=" + row.id
				});
			},
			// 失效
			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.$router.push({
					path: this.roterPre + "/marketing/serve_item/create?id=" + row.id + '&craft_price=' + row
						.craft_price + '&performance_value=' + row.performance_value + '&product_id=' + row
						.product_id + '&repertory=' + row.repertory + '&sales_commissions=' + row
						.sales_commissions + '&slider_image=' + row.slider_image + '&store_name=' + row
						.store_name + '&superior_commission=' + row.superior_commission + '&is_display=' + row.is_display
				});
				console.log(row);
			},
			// 删除
			couponDel(row, tit, num) {
				let delfromData = {
					title: tit,
					url: `service/productDelete/${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;

				ServeItemListApi(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.$router.push({
					path: this.roterPre + "/marketing/serve_item/create"
				});
				// this.addType(0);
			},
			// 编辑
			edit(row) {
				this.$modalForm(couponEditeApi(row.id)).then(() => this.getList());
			},
			// 表格搜索
			userSearchs() {
				this.tableFrom.page = 1;
				this.getList();
			},
			// 修改成功
			submitFail() {
				this.getList();
			},
			orderSearch() {
				this.tableFrom.page = 1;
				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>