shapeScrollView.vue 5.16 KB
Newer Older
huahua committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
<template>
	<view class="content" style="width: 100%; height: 100%; position: relative;">
		<refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g" :scrollHeight="windowHeight">
			<template slot="top">
				<view style="color: #FFFFFF;position: absolute;  top: 0;width: 100%; text-align: center;" 
				:style="'height:' + 40 + 'px; line-height:' + 40 + 'px;'">{{tip}}</view>
			</template>
			<template slot="content">
				<view style="width:100%; margin: auto; height:calc(90% - 160upx); overflow: hidden;">
					<view style="float: left; width: calc(100% / 3); margin: 40upx 0 0;" v-for="(item, index) in datalist" :key="index" @click="Worksdetail(item)">
						<view style="width: 148.5upx; height: 204.6upx;margin: auto; position: relative;">
							<view v-if="item.name == '清除'">
								<image style="width: 148.5upx; height: 148.5upx;margin: auto;" 
								src="../../static/icon/diy_icon_remove_normal.png" mode=""></image>
							</view>
							<view v-else :style="{'mask-image':' url(' + item.image + '?x-oss-process=image/resize,lfit,w_112)','-webkit-mask-image':' url(' + item.image + '?x-oss-process=image/resize,lfit,w_112)',}"
							style="width: 100%; height: 100%; overflow: hidden; mask-size: 80%; -webkit-mask-size: 80%;mask-repeat:no-repeat;-webkit-mask-repeat: no-repeat;">
								<image style="width: 148.5upx; height: 204.6upx; margin: auto;" :src="item.compose_image  + '?x-oss-process=image/resize,lfit,w_112'"
								 mode="aspectFill"></image>
							</view>
							<view v-if="Number(item.sales_price) > 0" style="min-width: 39upx; position: absolute; top: 0; right: 0; 
							background: #EF5354; border-radius: 8upx 0upx 11upx 8upx; text-align: center; padding: 2upx 8upx;
							font-size: 18upx; font-weight: bold; color: #FFFFFF;">{{item.sales_price}}</view>
						</view>
					</view>
					<view class="align-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
					 v-if="datalist.length == 0">
						<span class="iconfont icon-wushuju" style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
						<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞,还是一片荒漠</view>
					</view>
				</view>
			</template>
			<template slot="bottom">
				<view>
				没有更多数据了
				</view>
			</template>
		</refresh>
	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js';
	import refresh from '@/components/xing-refresh/xing-refresh.vue';
	export default {
		props: {
			windowHeight: {
				type: Number,
				default: 563
			}
		},
		components: {
			refresh
		},
		data() {
			return {
				queryPage: {
					s: 'Material.getShapeList',
					page: 1,
					per_page: 50,
					shape_category_id: null, //分类
					goods_category_id:null,//星形接口列表增加,产品分类参数
					total: 0,
					machine_id: null, //设备id
				},
				datalist: [], //作品、贴图列表
				Material_category:[] ,//贴图分类
				currentId: 0,/* 控制被选中 */
				currentIndex:null,/* 控制位置 */
				tip: ''
			};
		},
		mounted() {
huahua committed
74
			//this.getShapeList()
huahua committed
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
		},
		/**
		 * 组件的公有方法列表
		 */
		methods: {
			Worksdetail(item){
				console.log(item)
				this.$emit('Worksdetail',item)
			},
			g(e){
				uni.showLoading({
					title: '正在加载中...',mask: true
				})
				homeservice.WorksList(this.queryPage).then(result => {
					this.datalist = this.datalist.concat(result.data)
					this.queryPage.page += 1;
					if (Math.ceil(result.total / result.per_page) <= this.queryPage.page) {
						return setTimeout(() => {
							uni.showToast({title: '没有更多数据了!',icon: 'none'});
						}, 500);
					}
					uni.hideLoading();
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'})
					uni.hideLoading();
				});
			},
			interrupt(e) {
				this.tip = '刷新中'
				//模拟发送请求
				setTimeout(e, 500);
				this.tip = '刷新成功';
				this.queryPage.page = 1
				this.getShapeList()
			},
			pushToInterrupt() {
				this.tip = '释放刷新';
			},
			finished() {
				this.tip = '下拉刷新';
			},
			open(queryPage) {
				this.queryPage = {
					page:queryPage.page,
					per_page:queryPage.per_page,
					s:queryPage.s,
					shape_category_id:queryPage.shape_category_id,
					goods_category_id:queryPage.goods_category_id,
					machine_id: queryPage.machine_id, //设备id
				}
				this.getShapeList()
			},
			//模板形状列表
			getShapeList(){
				console.log(this.windowHeight)
				this.datalist = []
				uni.showLoading({title: '正在加载中...',mask: true})
				homeservice.WorksList(this.queryPage).then(result => {
					this.datalist = result.data
					// this.datalist.unshift(
					// 	{
					// 		compose_image: "../../static/icon/diy_icon_remove_normal.png",
					// 		id: null,
					// 		image: "",
					// 		name: "清除",
					// 		sales_price: null,
					// 		shape_category_id: null,
					// 	}
					// )
					this.queryPage.page += 1;
					uni.hideLoading();
					this.tip = '';
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'})
					uni.hideLoading();
				});
				
				
			}
		}
	}
</script>

<style lang="scss">
	
</style>