crmcard/pages/list/imgList.vue

<template>
	<view class="caseList">
		<uni-menubar title="图片管理" />
		<tm-search v-model="albumParams.keyword" color="blue" @confirm="getAlbumList"></tm-search>
		<tm-tabs color="blue" @change="tabClick" v-model="activeIndex" :list="allCateList" range-key="name"
			align="left">
		</tm-tabs>
		<view style="display: flex;justify-content: space-between;flex-wrap: wrap;" class="px-20">
			<view style="width: 50%;" v-for="(item,index) in albumList" :key="index">
				<tm-sheet :padding="[0,0]" :margin="[10,10]">
					<tm-images :previmage="false" :src="item.path" @click="albumDetail(item)" mode='widthFix' width="100%" :height="260"></tm-images>
					<view class="px-15">
						<view class="mt-20" style="font-size: 26rpx;">
							{{item.name}}
						</view>
						<view class="pt-20 pb-20"
							style="font-size: 24rpx;display: flex;justify-content: space-between;">
							<text>共<text style="color:#2196F3">{{item.pic_count}}</text>个相关图片</text>
							<tm-icons v-if="item.is_edit" :size="30" color="blue" name="icon-edit"
								@click="editClick(item)"></tm-icons>
						</view>
					</view>
				</tm-sheet>
			</view>
		</view>
		<tm-poup v-if="addShow" v-model="addShow" position="bottom" height="70%" :round="0">
			<view class="pa-20">
				<view class="text-xl text-bold">图集编辑</view>
				<tm-input name="name" required title="图集标题" v-model="addForm.name"></tm-input>
				<picker @change="bindPickerChange" :value="addForm.cate_id" range-key="name" :range="cateList">
					<tm-input required title="选择分类" placeholder="请选择分类" disabled
						:value="addForm.cate_id  ? cateList.find(v=>v.id == addForm.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="addForm.path"></tm-upload>
				</view>
				<view class="px-24">
					<tm-button block @click="saveAlbum">确定提交</tm-button>
				</view>
			</view> 
		</tm-poup>
		<tm-flotbutton v-if="user.card_id>0" @click="addShow = true" label="添加" :show-text="true"
			color="bg-gradient-blue-accent">
		</tm-flotbutton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				activeIndex: 0,

				albumList: [],
				albumParams: {
					cate_id: 0, //分类id
					keyword: "",
					page: 1 //分页页码，数字类型
				},
				albumFinish: false,
				albumLoding: false,

				isShow: 0,

				header: {
					'Authorization': uni.getStorageSync('token'),
					'Content-Type': 'multipart/form-data'
				},
				cateList: [],
				allCateList: [{
					'name': '全部',
					'id': 0
				}],
				addShow: false,
				addForm: {
					name: '',
					cate_id: '',
					path: []
				},

			}
		},
		onLoad() {
			this.getCatList()
			this.getAlbumList()
		},
		onReachBottom(e) {
			this.albumScroll()
		},
		computed: {
			user() {
				return this.$tm.vx.state().user.userInfo || {}
			}
		},
		methods: {
			getAlbumList() {
				this.$tm.request.post('album/list', this.albumParams).then(res => {
					this.albumList = res.data
				})
			},
			// 获取分类
			getCatList(id) {
				this.$tm.request.post('album/cate').then(res => {
					this.cateList = res.data
					this.allCateList = [...this.allCateList, ...this.cateList]
				})
			},
			tabClick(e) {
				this.activeIndex = e
				this.albumParams.cate_id = this.allCateList[e].id
				this.getAlbumList()
			},
			albumScroll() {
				this.albumParams.page++
				this.$tm.request.post('album/list', this.albumParams).then(res => {
					if (res.data.length > 0) {
						res.data.forEach(val => {
							this.albumList.push(val)
						})
					}
				})
			},
			albumDetail(item) {
				uni.navigateTo({
					url: "/pages/list/caseDetail?id=" + item.id + "&card_id=" + uni.getStorageSync('card_id')
				})
			},

			editClick(item) {
				uni.navigateTo({
					url: '/pages/list/editCase?album_id=' + item.id
				})
			},
			bindPickerChange(o) {
				this.addForm.cate_id = this.cateList[o.detail.value].id
			},
			saveAlbum() {
				this.addForm.path = this.addForm.path[0]
				this.$tm.request.post('album/update', this.addForm).then(res => {
					uni.navigateTo({
						url: '/pages/list/editCase?album_id=' + res.data.id
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.caseList {
		// background-color: #f5f5f5;

	}
</style>