cte-share/pages/OrderList/buy/wodezhuji.vue

<template>
	<!--
	本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2672
	uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
	uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
	unicloud-db 组件文档：https://uniapp.dcloud.io/uniCloud/unicloud-db
	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
	 -->
	<view class="list">
		<customNav :shownav="true" :title="title" titledetl=""></customNav>
		<!-- 刷新页面后的顶部提示框 -->
		<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
		<view class="tips" :class="{ 'tips-ani': tipShow }">{{$t('index.liebiaogengxin')}}</view>
		<!--
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"
		 :field="field" @load="load">
		 -->
		<!-- 基于 uni-list 的页面布局 -->
		<uni-list v-if="listType==1">
			<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
			<uni-list-item :border="false" class="uni-list-item--waterfall" v-for="(item,index) in mendianList"
				:key="index" v-on:click="gotoDetail(item.id)" :clickable="clickable">
				<view slot="body" class="shop">
					<view class="item_content">
						<imageconver :isremen="true" :isyouhui="false" :youhuinote="''" class="mainimage"
							:imagSrc="item.image"></imageconver>
						<!-- <image class="mainimage" :src="item.image=='/static/defimages/ddd.png'?item.image:baseUrl+item.image" mode="scaleToFill" @error="imageError(index)"></image> -->
						<view class="buyBTact">
							<text class="title">{{item.posName}}</text>
							<!-- <view class="viewinrow">
									<image class="xingxing" src="/static/images/xingxing@3x.png" mode="widthFix"></image>
									<text class="pingfentext">4.5</text>
								</view> -->
						</view>
						<view class="contentInRowS">
							<view class="price textfontB5">
								<text>{{$t('index.manX')}} {{$formPr(item.posPrice)}} {{$t('locale.huobidw')}}</text>
							</view>
							<view class="contentInRowR" style="margin-right: 8rpx;">
								<text v-if="item.state==0&&item.offShelf=='0'"
									style="color: green;font-size: 28rpx;">{{$t('mend.stateyy')}}</text>
								<text v-if="item.state==1&&item.offShelf=='0'"
									style="color: crimson;font-size: 28rpx;">{{$t('mend.statedy')}}</text>
								<text v-if="item.offShelf=='1'"
									style="color: darkgray;font-size: 28rpx;">{{$t('mend.mendianyxj')}}</text>
							</view>
						</view>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<uni-list v-if="listType==2">
			<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
			<uni-list-item :border="false" class="uni-list-item--waterfall" v-for="(item,index) in mendianList"
				:key="index" v-on:click="gotoDetail(item.store.id)" :clickable="clickable">
				<view slot="body" class="shop">
					<view class="item_content">
						<imageconver :isremen="true" :isyouhui="false" :youhuinote="''" class="mainimage"
							:imagSrc="item.store.image"></imageconver>
						<!-- <image class="mainimage" :src="item.image=='/static/defimages/ddd.png'?item.image:baseUrl+item.image" mode="scaleToFill" @error="imageError(index)"></image> -->
						<view class="buyBTact">
							<text class="title">{{item.store.posName}}</text>
							<!-- <view class="viewinrow">
									<image class="xingxing" src="/static/images/xingxing@3x.png" mode="widthFix"></image>
									<text class="pingfentext">4.5</text>
								</view> -->
						</view>
						<view class="contentInRowS">
							<view class="price textfontB5">
								<text>{{$t('index.manX')}} {{$formPr(item.store.posPrice)}}
									{{$t('locale.huobidw')}}</text>
							</view>
							<view class="contentInRowR" style="margin-right: 8rpx;">
								<text v-if="item.store.state==0&&item.store.offShelf=='0'"
									style="color: green;font-size: 28rpx;">{{$t('mend.stateyy')}}</text>
								<text v-if="item.store.state==1&&item.store.offShelf=='0'"
									style="color: crimson;font-size: 28rpx;">{{$t('mend.statedy')}}</text>
								<text v-if="item.store.offShelf=='1'"
									style="color: darkgray;font-size: 28rpx;">{{$t('mend.mendianyxj')}}</text>
							</view>
						</view>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
		<uni-load-more v-if="loading || status === 'noMore' " :status="status" />
		<!--</unicloud-db>-->
	</view>
</template>

<script>
	import api from "@/pages/api/api.js"
	export default {
		components: {},
		data() {
			return {
				// 数据表名
				//collection: 'opendb-mall-goods',
				// 查询字段，多个字段用 , 分割
				//field: 'goods_thumb,name,goods_tip,tag,goods_price,comment_count,month_sell_count,shop_name',
				title: '',
				formData: {
					status: 'loading', // 加载状态
				},
				tipShow: false, // 是否显示顶部提示框
				mendianList: {},
				status: 'more',
				loading: true,
				listType: '',
				clickable: true,
				page: 1
			};
		},
		onLoad(option) {
			console.log('option', option);
			this.listType = option.listType;
			if (this.listType == 1) {
				this.title = this.$t('user.wodeshouc');
			} else if (this.listType == 2) {
				this.title = this.$t('user.wodezuji')
			}
		},
		onShow() {
			if (this.listType == 1) {
				this.page = 1;
				this.getcollectlist(1);
			} else if (this.listType == 2) {
				this.page = 1;
				this.getuserfootlist(1);
			}
			this.status = 'more';
			this.formData.status = 'loading'
		},
		methods: {
			/*
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			},
			*/
			gotoDetail(e) {
				console.log(e);
				uni.navigateTo({
					url: '/pages/shanpinxungou/shangjia/shangjiaView?id=' + e
				})
			},
			getuserfootlist(page) {
				this.tipShow = true;
				var data = {
					page: page,
					size: 10
				};
				api('getuserfootlist', data,
					r => {
						console.log('getuserfootlist：', r);
						if (this.page == 1) {
							this.mendianList = r.data.data;
						} else {
							if (r.data.data.length > 0) {
								var temp = this.mendianList;
								for (var i = 0; i < r.data.data.length; i++) {
									temp.push(r.data.data[i]);
								}
								this.mendianList = temp;
							} else {
								this.status = 'noMore';
							}
						}
						uni.stopPullDownRefresh()
						this.tipShow = false
					}, failc => {
						uni.stopPullDownRefresh()
						this.tipShow = false
					})
			},
			getcollectlist(page) {
				this.tipShow = true;
				var data = {
					page: page,
					size: 10
				};
				api('getcollectlist', data,
					r => {
						console.log('getcollectlist：', r);
						if (this.page == 1) {
							this.mendianList = r.data.data;
						} else {
							if (r.data.data.length > 0) {
								var temp = this.mendianList;
								for (var i = 0; i < r.data.data.length; i++) {
									temp.push(r.data.data[i]);
								}
								this.mendianList = temp;
							} else {
								this.status = 'noMore';
							}
						}
						uni.stopPullDownRefresh()
						this.tipShow = false
					}, failc => {
						uni.stopPullDownRefresh()
						this.tipShow = false
					})
			},

		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			if (this.listType == 1) {
				this.page = 1;
				this.getcollectlist(1);
				this.status = 'more';
			} else if (this.listType == 2) {
				this.page = 1;
				this.getuserfootlist(1);
				this.status = 'more';
			}
			this.formData.status = 'loading'
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.page = this.page + 1;
			if (this.listType == 1) {
				this.getcollectlist(this.page);
				//this.status = 'more';
			} else if (this.listType == 2) {
				this.getuserfootlist(this.page);
				//this.status = 'more';
			}

		},
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	// 默认加入 scoped ，所以外面加一层提升权重
	.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			::v-deep .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5rpx;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
				::v-deep

				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 0rpx;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}

	.item_content {
		background: white;
		width: 100%;
		height: 390rpx;
		margin-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.mainimage {
		width: 100%;
		height: 300rpx;
		display: block;
		border-radius: 0rpx;
	}

	.viewinrow {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.buyBTact {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		padding-top: 8rpx;
		width: 100%;
		text-align: left;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: initial
	}

	.Dishes {
		width: 100%;
		text-align: left;
		font-size: 28rpx;
		line-height: 28rpx;
		color: darkgray;
	}

	.price {
		text-align: left;
		//line-height: 28rpx;
		color: black;
		padding-left: 8rpx;
	}

	.xingxing {
		width: 40rpx;
		height: 40rpx;
	}

	.pingfentext {
		width: 100%;
		text-align: left;
		font-size: 28rpx;
		line-height: 28rpx;
		color: black;
	}
</style>