myjadmin/src/components/system/points/list.vue

<template>
	<div style="padding-top: 10px;">
		<i-page-header :title="pageTitle"></i-page-header>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- <Form ref="orderData" :model="orderData">
                <Row :gutter="24" type="flex">
					<Col>
					    <FormItem label="UID：" label-for="uid">
					        <Input placeholder="用户UID" v-model="orderData.uid"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem label="绑定手机：" label-for="mobile">
					        <Input placeholder="绑定手机号码" v-model="orderData.mobile"/>
					    </FormItem>
					</Col>
					<Col>
					    <FormItem label="购买时间：">
					        <DatePicker v-model="orderData.time" format="yyyy/MM/dd HH:mm:ss" type="datetimerange" placement="bottom-start" placeholder="自定义时间" style="width: 300px;" class="mr20" :options="options"></DatePicker>
					    </FormItem>
					</Col>
					<Col>
					    <Button label="default" type="primary" icon="ios-search"  class="mr15" style="margin-top: 32px;" @click="orderSearch()">搜索</Button>
					</Col>
                </Row>
            </Form> -->
			<Col>
			<Button type="primary" class="export" icon="ios-share-outline" @click="sendOpen">添加商品</Button>
			</Col>
			<Table :columns="columns" :data="orderList" ref="table" :loading="loading" highlight-row no-data-text="暂无数据"
				no-filtered-data-text="暂无筛选结果" class="orderData mt25">
				<template slot-scope="{ row, index }" slot="order_id">
					<span v-text="row.order_id" style="display: block;"></span>
				</template>
				<template slot-scope="{ row, index }" slot="uid">
					<div>{{ row.nickname || '微信用户' }}[UID:{{ row.uid }}]</div>
					<div>{{ row.mobile || '未绑定手机号' }}</div>
				</template>
				<template slot-scope="{ row, index }" slot="imgs">
					<div  style="display: flex;">
						<img v-lazy="row.image" :src="row.image" v-image-preview
							style="width: 60px;cursor: pointer" />
					</div>
				</template>

				<template slot-scope="{ row, index }" slot="handle">
					<div><el-button plain size="mini" @click="editGood(row)">编辑</el-button></div>
					<br />
					<div><el-button plain size="mini" @click="delGood(row.id)">删除</el-button></div>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="page.count" show-elevator show-total @on-change="tapPage" :page-size="page.pageSize" />
			</div>
		</Card>

		<Modal v-model="sendModel" title="添加商品" @on-ok="sendOk('sendFormValidate')" @on-cancel="sendCancel" width="900">
			<Form :model="sendData" :label-width="labelWidth" :rules="ruleValidate" ref="sendFormValidate">
				<FormItem label="商品名称" prop="store_name">
					<Input v-model="sendData.store_name" type="text" placeholder="请输入商品名称"></Input>
				</FormItem>
				<FormItem label="商品分类" prop="cate_id">
					<el-select v-model="sendData.cate_id" placeholder="选择分类">
						<el-option :label="item.cate_name" :value="item.id" v-for="(item, index) in cateData"
							:key="index"></el-option>
					</el-select>
				</FormItem>
				<FormItem label="兑换积分" prop="price">
					<Input v-model="sendData.price" type="number" placeholder="请输入兑换积分"></Input>
				</FormItem>
				<FormItem label="商品库存" prop="stock">
					<Input v-model="sendData.stock" type="number" placeholder="请输入商品库存"></Input>
				</FormItem>
				<!-- unit_name -->
				<FormItem label="商品单位" prop="unit_name">
					<Input v-model="sendData.unit_name" type="text" placeholder="请输入商品单位"></Input>
				</FormItem>
				<FormItem label="商品销量" prop="sales">
					<Input v-model="sendData.sales" type="number" placeholder="请输入商品销量"></Input>
				</FormItem>
				<FormItem label="封面图片" prop="image">
					<div class="clearfix">
						<div class="upimg-item fx-r fx-bc fx-ac" style="" v-if="sendData.image">
							<img v-lazy="sendData.image" :src="sendData.image" v-image-preview />
							<i class="el-icon-error img-remove-btn" @click="removeImg(index)"></i>
						</div>
						<ui-upload style="float: left;" :upUrl="upUrl" fileName="上传图片" :headers="upHeaders"
							:updata="{ isz: 0, code: 'goods' }" @onUpload="onUpload"
							v-if="sendData.image == ''"></ui-upload>
					</div>
				</FormItem>
				<FormItem label="轮播图片" prop="slider_image">
					<div class="clearfix">
						<div class="upimg-item fx-r fx-bc fx-ac" style="" v-for="(item, index) in sendData.slider_image"
							:key="index">
							<img v-lazy="item" :src="item" v-image-preview />
							<i class="el-icon-error img-remove-btn" @click="removeImgs(index)"></i>
						</div>
						<ui-upload style="float: left;" :upUrl="upUrl" fileName="上传图片" :headers="upHeaders"
							:updata="{ isz: 0, code: 'goods' }" @onUpload="onUploads"
							v-if="sendData.slider_image.length < 6"></ui-upload>
					</div>
				</FormItem>
				<FormItem label="商品详情" prop="content">
					<Toolbar style="border: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
					<!-- 编辑器 -->
					<Editor style="height: 400px; overflow-y: hidden;border: 1px solid #ccc;"
						:defaultConfig="editorConfig" v-model="sendData.content" @onChange="onChange"
						@onCreated="onCreated" />
				</FormItem>
				<FormItem label="是否上架" prop="status">
					<el-radio-group v-model="sendData.is_show">
						<el-radio :label="1">上架</el-radio>
						<el-radio :label="0">下架</el-radio>
					</el-radio-group>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button size="large" :loading="modal_loading" @click="sendCancel">取消</Button>
				<Button type="primary" size="large" :loading="modal_loading"
					@click="sendOk('sendFormValidate')">提交</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
import { getGoodsCate, getGoodsList, saveProduct,delProduct } from "../../../api/system/goods";

import axios from 'axios'
import {
	DomEditor
} from '@wangeditor/editor'
import {
	Editor,
	Toolbar
} from '@wangeditor/editor-for-vue'
import IPageHeader from "../../../layouts/system/page-header/index";
import {
	SystemShowTemplateList
} from "../../../api/system/user";
import Setting from '@/setting';
import UiUpload from "@/ui/upload/index";
import {
	upLoad
} from '../../../api/system/sys'

export default {
	name: "pointsList",
	components: {
		SystemShowTemplateList,
		IPageHeader,
		UiUpload,
		Editor,
		Toolbar
	},
	computed: {},
	data() {
		return {
			editor: null,
			toolbarConfig: {
				// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
				excludeKeys: ['group-video', 'emotion', 'fullScreen'],
			},
			editorConfig: {
				placeholder: "请输入内容...",
				// autoFocus: false,

				// 所有的菜单配置，都要在 MENU_CONF 属性下
				MENU_CONF: {
					uploadImage: {

					},
				},
			},
			modal_loading: false,
			ruleValidate: {
				cate_id: [{
					required: true,
					message: '请选择商品分类'
				}],
				store_name: [{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}],
				content: [{
					required: true,
					message: '请输入商品详情',
				}],
				stock: [{
					required: true,
					message: '请输入商品库存',
				}],
				image: [{
					required: true,
					message: '请上传封面图片'
				}],
				slider_image: [{
					required: true,
					message: '请上传轮播图片'
				}],
				price: [{
					required: true,
					message: '请输入兑换积分',
					trigger: 'blur'
				}],
			},
			labelWidth: 120,
			upHeaders: {},
			upUrl: '',
			sendData: {
				sales: '',
				cate_id: '',
				price: '',
				stock: '',
				store_name: '',
				content: '',
				image: '',
				slider_image: [],
				is_show: 1
			},
			sendModel: false,
			pageTitle: "积分商品",
			options: {
				shortcuts: [{
					text: '今天',
					value() {
						const end = new Date();
						const start = new Date();
						start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date()
							.getDate()));
						return [start, end];
					}
				},
				{
					text: '昨天',
					value() {
						const end = new Date();
						const start = new Date();
						start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
							new Date().getDate() - 1)));
						end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
							new Date().getDate())));
						return [start, end];
					}
				},
				{
					text: '最近7天',
					value() {
						const end = new Date();
						const start = new Date();
						start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
							new Date().getDate() - 6)));
						return [start, end];
					}
				},
				{
					text: '最近30天',
					value() {
						const end = new Date();
						const start = new Date();
						start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
							new Date().getDate() - 29)));
						return [start, end];
					}
				},
				{
					text: '本月',
					value() {
						const end = new Date();
						const start = new Date();
						start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
							1)));
						return [start, end];
					}
				},
				{
					text: '本年',
					value() {
						const end = new Date();
						const start = new Date();
						start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
						return [start, end];
					}
				}
				]
			},

			orderData: {
				uid: "",
				status: "all",
				time: [],
				mobile: "",
				show_template_id: "",
				unit_name: "",
			},
			columns: [{
				title: 'ID',
				align: 'center',
				key: 'id',
				align: 'center'
			},
			{
				title: '商品封面',
				align: 'center',
				slot: 'imgs',
				align: 'center'
			},
			{
				title: '商品名',
				key: 'store_name',
				align: 'center'
			},
			{
				title: '单位',
				align: 'center',
				key: 'unit_name',
				align: 'left'
			},
			{
				title: '积分',
				align: 'center',
				key: 'price',
				align: 'left'
			},

			{
				title: '时间',
				align: 'center',
				key: 'create_time',
				align: 'left'
			},
			{
				title: '操作',
				align: 'center',
				slot: 'handle',
				align: 'left'
			},
			],
			loading: false,
			orderList: [],
			orderDatalist: {},
			orderId: 0,
			page: {
				total: 0, // 总条数
				page: 1, // 当前页
				pageSize: 10 // 每页显示条数
			},
			cateData: [],
		}
	},

	created() {
		if (this.$route.query.title) {
			this.pageTitle = this.$route.query.title;
		}
		if (this.$route.query.uid) {
			this.orderData.uid = parseInt(this.$route.query.uid);
		}
		if (this.$route.query.show_template_id) {
			this.orderData.show_template_id = parseInt(this.$route.query.show_template_id);
		}
		this.initView();
		this.getGoodsList();
		this.getGoodsCate();
	},
	methods: {
		getGoodsList() {
			getGoodsList().then(res => {
				this.orderList = res.data.list.map(item => {
					item.slider_image = item.slider_image.split(',');
					return item;
				});
			})
		},
		getGoodsCate() {
			getGoodsCate().then(res => {
				this.cateData = res.data.list;
			})
		},
		onCreated(editor) {
			this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
			console.log(this.editor.getMenuConfig());

		},
		onChange(editor) {
			console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
		},
		getEditorText() {
			const editor = this.editor;
			if (editor == null) return;

			console.log(editor.getText()); // 执行 editor API
		},
		printEditorHtml() {
			const editor = this.editor;
			if (editor == null) return;

			console.log(editor.getHtml()); // 执行 editor API
		},
		initView: function () {
			let that = this
			var upHeaders = {};
			this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
			const token = this.$utils.util.cookies.get('system_token');
			if (token) {
				upHeaders['SYSTEM-ACC-TOKEN'] = token;
			}
			this.upHeaders = upHeaders;

			this.editorConfig.MENU_CONF['uploadImage'] = {
				async customUpload(file, insertFn) {
					const formData = new FormData()
					formData.append('file', file)
					formData.append('code', 'good')
					formData.append('isz', '0')
					// formData.append('sign', this.generateSign(file.name)) // 自定义签名

					try {
						// const response = await axios.post(that.upUrl, formData, {
						// 	headers: {
						// 		'SYSTEM-ACC-TOKEN': token
						// 	}
						// })
						upLoad(formData).then(res => {
							insertFn(res.data.img)
						})

						// if (response.data.success) {
						// 	 // 插入图片到编辑器
						// }
					} catch (error) {
						console.error('上传失败:', error)
					}
				}
			}
		},
		onUpload: function (res) {
			if (res.code == -1) {
				Notice.error({
					title: "系统提示",
					content: res.msg
				});
			} else {
				this.sendData.image = res.data.img;
			}
		},
		onUploads: function (res) {
			if (res.code == -1) {
				Notice.error({
					title: "系统提示",
					content: res.msg
				});
			} else {
				this.sendData.slider_image.push(res.data.img);
			}
		},
		removeImgs: function (index) {
			this.sendData.slider_image.splice(index, 1);
			// this.$delete(this.sendData.imgs, index);
		},
		removeImg: function (index) {
			// this.$delete(this.sendData.imgs, index);
			this.sendData.image = ''
		},
		sendOpen() {
			this.sendModel = true
		},
		sendCancel() {
			this.sendModel = false
			this.sendData = {
				content: '',
				slider_image: [],
				store_name: '',
			}
		},
		sendOk(name) {
			console.log(this.sendData);
			this.$refs[name].validate((valid) => {
				if (valid) {
					let pdata = JSON.parse(JSON.stringify(this.sendData));
					pdata.slider_image = pdata.slider_image.join(',');

					saveProduct(pdata).then(res => {
						if (res.code == 200) {
							this.sendCancel()
							this.getGoodsList()
							this.$Message.success('发布成功!');
						} else {
							this.$Message.error(res.msg);
						}

					}).catch(err => {
						this.$Message.error(err.msg);
					})
				} else { }
			})
		},
		tabsHandleClick: function (tab, event) {
			this.page.page = 1;
			this.getData();
		},
		orderSearch: function () {
			this.page.page = 1;
			this.getData();
		},
		/**
		 * 分页
		 */
		tapPage: function (index) {
			this.page.page = index;
			this.getData();
		},
		delGood(id) {
			this.$confirm('确定删除吗？', '系统提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delProduct({
					id: id
				}).then(res => {
					if (res.code == 200) {
						this.$Message.success('删除成功!');
						this.getGoodsList()
					} else {
						this.$Message.error(res.msg);
					}
				}).catch(err => {
					this.$Message.error(err.msg);
				})
			}).catch(() => {
				this.$Message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		editGood(row) {
			this.sendData = JSON.parse(JSON.stringify(row));
			this.sendModel = true;
		},
		/**
		 * 获取数据
		 */
		getData: function () {
			var that = this;
			// this.loading = true;
			var data = {
				page: that.page.page,
				...that.orderData
			};
			// SystemShowTemplateList(data)
			//     .then(res=>{
			//         that.loading = false;
			//         if(res.code == 200) {
			//             that.orderList = res.data.list;
			//             that.page.pageSize = res.data.pageSize;
			//             that.page.count = res.data.pageCount;
			//         } else {
			//             that.$alert(res.msg);
			//         }
			//     })
			//     .catch(err=>{
			//         that.loading = false;
			//         that.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
			//     });
		},

	}
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
@import "~vue2-editor/dist/vue2-editor.css";

.upimg-item {
	width: 82px;
	height: 82px;
	margin-right: 5px;
	overflow: hidden;
	float: left;
	margin-bottom: 5px;
	position: relative;
}

.upimg-item img {
	width: 82px;
	cursor: pointer;
}

.img-remove-btn {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 24px;
}
</style>