crmcard/pages/list/editCase.vue

<template>
	<view class="caseDetail">
		<uni-menubar title="编辑" />
		<tm-sheet :padding="[0,20]" :margin="[0,20]">
			<tm-form @submit="submit" ref="formData" @request="success" method="post">
				<tm-input name="name" required title="案例标题" v-model="form.name"></tm-input>
				<picker @change="bindPickerChange" :value="form.cate_id" range-key="name" :range="cateList">
					<tm-input required title="选择分类" placeholder="请选择分类" disabled
						:value="form.cate_id  ? cateList.find(v=>v.id == form.cate_id)['name'] : '请选择分类'"></tm-input>
				</picker>
				<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
					<text class="text-size-n text-weight-b ">上传封面图片</text>
					<text class="text-grey text-size-xs px-10">(最多可以上传1张)</text>
				</view>
				<view class="py-32 mx-12">
					<tm-upload ref="upload" :code="200" :max="1" :tips="false" :grid="4"
						url="https://cardoa.platomix.net/api/upload" url-key="data" :auto-upload="true" :header="header"
						:filelist.sync="form.path"></tm-upload>
				</view>
				<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text flex flex-between">
					<text class="text-size-n text-weight-b">图片列表(点击图片可编辑)</text>
					<tm-button theme="bg-gradient-blue-accent" size="m" @click="addImage">添加图片</tm-button>
				</view>
				<view style="height: 20rpx;"></view>
				<view v-if="list.length" class="py-12 mx-12 round-3 border-b-1 grey text" style="font-size: 24rpx;"
					theme="bg-gradient-blue-accent" block @click="disabledGrid=!disabledGrid">
					{{disabledGrid ? '长按图片拖动排序' : '关闭排序'}}
				</view>
				<tm-dragGrid v-if="list.length" :disabled="disabledGrid" @change="changeList" :list="list">
					<template v-slot:default="{item}">
						<view @click="editImage(item)" @longpress="disabledGrid=!disabledGrid">
							<tm-images :width="150" :height="100" :previmage="false" :src="item.path"></tm-images>
							<view @click.stop="delitem(item)" style="position: absolute;right: 5px;top: -20rpx;">
								<tm-icons color="red" :size="20" name="icon-minus-circle-fill"></tm-icons>
							</view>
						</view>
					</template>
				</tm-dragGrid>
				<view class="flex flex-between" style="width: 80%;margin: 0 auto;">
					<tm-button theme="red" @click="del">删除</tm-button>
					<tm-button theme="blue" navtie-type="form">保存</tm-button>
				</view>
			</tm-form>
			<tm-dialog v-if="editShow" v-model="editShow" title="编辑图片" confirmText="保存" @confirm="saveImage">
				<tm-input title="图片名称" v-model="editForm.name"></tm-input>
				<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
					<text class="text-size-n text-weight-b ">上传封面图片</text>
					<text class="text-grey text-size-xs px-10">(最多可以上传1张)</text>
				</view>
				<view class="py-32 mx-12">
					<tm-upload ref="upload" :code="200" :max="1" :grid="1" url="https://cardoa.platomix.net/api/upload"
						url-key="data" :auto-upload="true" :header="header" :filelist.sync="editForm.path"></tm-upload>
				</view>
			</tm-dialog>
		</tm-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					path: []
				},
				list: [],
				cateList: [],
				disabledGrid: true,
				editShow: false,
				editForm: {
					path: [],
					name: ''
				},
				header: {
					'Authorization': uni.getStorageSync('token'),
					'Content-Type': 'multipart/form-data'
				}
			}
		},
		onLoad(option) {
			this.$tm.request.post('album/cate').then(res => {
				this.cateList = res.data
			})
			if (option.album_id) {
				this.album_id = option.album_id
				this.init()
				this.piclist()
			}
		},
		methods: {
			piclist() {
				this.$tm.request.post('album/piclist', {
					album_id: this.album_id
				}).then(res => {
					this.list = res.data
				})
			},
			init() {
				this.$tm.request.post('album/detail', {
					album_id: this.album_id
				}).then(res => {
					this.form = res.data
					this.form.path = [this.form.path]
				})
			},
			del(e) {
				let that = this
				console.log(this.form);
				uni.showModal({
					title: '提示',
					content: '是否永久删除',
					success(res) {
						if (res.confirm) {
							that.$tm.request.post('album/update', {
								id: that.form.id,
								isdel: true,
							}).then(res => {
								uni.navigateBack()
							})
						} else if (res.cancel) {}
					}
				});

			},
			bindPickerChange(o) {
				this.form.cate_id = this.cateList[o.detail.value].id
			},
			changeList(e) {
				this.list = e.map(v => {
					v.data.sort = v.sort
					return v.data
				})
			},
			submit(e) {
				this.form.path = this.form.path[0]
				this.$tm.request.post('album/update', this.form).then(res => {
					uni.navigateBack()
				})
				this.$tm.request.post('album/batchsort', {
					list: this.list,
					album_id: this.album_id
				}).then(res => {
					uni.navigateBack()
				})
				console.log(this.list);
			},
			delitem(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否永久删除',
					success(res) {
						if (res.confirm) {
							that.$tm.request.post('album/picupdate', {
								isdel: true,
								id: e.id,
								album_id: that.form.id,
								path: e.path
							}).then(resdata => {
								that.list.splice(that.list.findIndex(v => v.id == e.id), 1)
							})
						} else if (res.cancel) {}
					}
				});
			},
			editImage(e) {
				this.editShow = true
				this.editForm = e
				this.editForm.path = [e.path]
			},
			saveImage() {
				this.$tm.request.post('album/picupdate', {
					id: this.editForm.id,
					name: this.editForm.name,
					album_id: this.form.id,
					path: this.editForm.path[0]
				}).then(resdata => {
					this.piclist()
				})
			},
			addImage() {
				let that = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach(item => {
							uni.showToast({
								title: '上传中',
								icon: "none"
							});
							uni.uploadFile({
								url: 'https://cardoa.platomix.net/api/upload', //仅为示例，非真实的接口地址
								filePath: item,
								name: 'file',
								header: that.header,
								success: (uploadFileRes) => {
									let img = JSON.parse(uploadFileRes.data)
									that.$tm.request.post('album/picupdate', {
										album_id: that.form.id,
										path: img.data
									}).then(resdata => {
										uni.hideToast();
										that.list.push(resdata.data)
									})
								}
							});
						})

					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>