shuquAi/pages/user/draw/draw.vue

<template>
	<view>
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false">绘画记录</tn-nav-bar>
		</view>
		<z-paging ref="paging" refresher-complete-delay="200" v-model="drawList" @query="queryList">
			<view slot="top" class="z_tabs" :style="{ marginTop: tobheight + 'px' }"></view>
			
			<view class="u-flex flex-wrap">
				<block v-for="(item,index) in drawList" :key="index">
				<view @click="preview(index)" class="draw_view">
					<image :src="item.path" mode="aspectFill"></image>
					<view class="prompt">{{item.prompt}}</view>
					<view class="circle" @click.stop="gallerydel(index)">
						<u-icon name="close-circle-fill" color="#e83a30" size="24"></u-icon>
					</view>
				</view>
				</block>
				<!-- <view class="draw_view">
					<image src="https://yijian-painting-prod.cdn.bcebos.com/content/766556a3c73e28803cf28e30d06b88e0/85aa8a0e-e4d3-40c0-8a4d-38c21e8dfd2e.jpg" mode="aspectFill"></image>
					<view class="">画一碗猪脚面</view>
				</view>
				<view class="draw_view">
					<image src="https://yijian-painting-prod.cdn.bcebos.com/content/766556a3c73e28803cf28e30d06b88e0/85aa8a0e-e4d3-40c0-8a4d-38c21e8dfd2e.jpg" mode="aspectFill"></image>
					<view class="">画一碗猪脚面</view>
				</view>
				<view class="draw_view">
					<image src="https://yijian-painting-prod.cdn.bcebos.com/content/766556a3c73e28803cf28e30d06b88e0/85aa8a0e-e4d3-40c0-8a4d-38c21e8dfd2e.jpg" mode="aspectFill"></image>
					<view class="">画一碗猪脚面</view>
				</view> -->
			</view>
			
		</z-paging>
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				tobheight: 45,
				platform: this.$platform.get(),
				isLoading: true,
				drawList:[]
			}
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'isLogin'])
		},
		onLoad() {
			const that = this;
			if (this.platform == 'wxMiniProgram') {
				var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight;
				var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop;
				this.tobheight = menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height;
			}
			
		},
		methods: {
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				const params = {
					page: pageNo,
					limit: pageSize
				};
				this.$http('gallery.list', params).then(res => {
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
						this.$refs.paging.complete(res.data.data);
						this.isLoading = false;
					}
				});
			},
			preview(e){
				uni.previewImage({
					urls: [this.drawList[e].path],
					
				});
			},
			gallerydel(e){
				var that = this;
				uni.showModal({
					confirmText: '删除',
					content: '是否删除此绘画记录',
					title: '提示',
					confirmColor: '#26B3A0',
					success(res) {
						// console.log(res);
						if (res.confirm) {
							that.$http('gallery.del', {id:that.drawList[e].id}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title:'删除成功'
									})
									// that.drawList = []
									that.$refs.paging.reload(true);
								}else{
									uni.showToast({
										title:'删除失败',
										icon:'none'
									})
								}
							});
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
	    background: #f6f7fb;
	}
.draw_view{
	margin: 30rpx;
	width: 100%;
	background: #fff;
	border-radius: 0 0 20rpx 20rpx;
	// padding: 30rpx;
	position: relative;
	image{
		width: 100%;
		height: 280rpx;
		border-radius: 20rpx 20rpx 0 0;
	}
	.prompt{
		padding: 20rpx 30rpx 30rpx;
	}
	.circle{
		position: absolute;
		right: -12rpx;
		top: -12rpx;
		background: #fff;
		border-radius: 50%;
	}
}
</style>