jiaoyi-uni2/奥莱优品/components/chat/order.vue

<template>
	<view>
		<uni-popup ref="orderPop" type="bottom" border-radius="10px 10px 0 0" background-color="#f1f1f1" :mask-click="false">
			<view class="order-popup">
				<view class="order-title">
					<view class="name">我的订单</view>
					<view class="close" @click="closeOrder()"><image src="/static/image/close.png"></image></view>
				</view>
				<view class="order-body-con" v-if="orderList.length > 0">
				<scroll-view class="order-body" scroll-y scroll-with-animation @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" upper-threshold="80">
					<view class="m-order-s" v-for="(items,index) in orderList" :key="index">
						<view class="order-img"><image :src="items.img" mode="widthFix"></image></view>
						<view class="order-info">
							<view class="title">{{items.product.product_name}}</view>
							<view class="desc">{{items.out_order_no}}</view>
							<view class="price">{{ $dialog.formatMoney(items.price,true) }}</view>
						</view>
						<view class="status-btn-group">
							<view class="status info" v-if="items.status=='0'">未支付</view>
							<view class="status primary" v-if="items.status=='1'">待使用</view>
							<view class="status success" v-if="items.status=='2'">已完成</view>
							<view class="status danger" v-if="items.status=='3'">已退款</view>
							<view class="status warn" v-if="items.status=='4'">退款中</view>
							<view class="status info" v-if="items.status=='5'">已关闭</view>
							<view class="status danger" @click="sendOrder(items)">发送</view>
						</view>
					</view>
					<view class="view-more" v-if="orderData.loading">
						<uni-load-more status="loading"></uni-load-more>
					</view>
				</scroll-view>
				</view>
				<view class="order-body" v-else>
					<view class="empty-body">暂无数据...</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data () {
		return {
			orderList:[],
			orderData:{
				page:1,
				size:10,
				loading:false,
				isDone:false
			}
		}
	},
	methods: {
		open() {
			this.$nextTick(()=>{
				this.$refs.orderPop.open()
			})
			return this;
		},
		closeOrder(){
			this.$nextTick(()=>{
				this.$refs.orderPop.close()
			})
		},
		setData(data) {
			this.orderData.page = 1;
			this.orderData.loading = false;
			this.orderData.isDone = false;
			this.getOrder();
		},
		sendOrder(data){
			this.$refs.orderPop.close()
			this.$emit("send",data)
		},
		scrolltoupper(){},
		scrolltolower(e){
			if (this.orderData.isDone || this.orderList.length == 0) return ;
			this.getOrder()
		},
		async getOrder(){
			this.orderData.loading = true;
			var formData = {};
			const tokenPoi = uni.getStorageSync("contact");
			formData.poi = tokenPoi.poi_id;
			formData.page = this.orderData.page;
			formData.size = this.orderData.size;
			// formData.status = 1;
			var resp = await this.$api.order.chat.get(formData)
			this.orderData.loading = false;
			if (resp.code == 0) {
				return this.$dialog.showSuccess(resp.msg)
			}
			if (resp.data.rows.length > 0) {
				this.orderData.page ++;
				this.orderList = [...this.orderList,...resp.data.rows];
			} else {
				this.orderData.isDone = true;
			}
		}
	}
}
</script>

<style>
.order-popup .order-title{display: flex;align-items: center;justify-content: space-between;font-size: 32upx;padding: 20upx;font-weight: bold;}
.order-popup .input-value-border{border: 0;}
.order-popup .order-title.bb1{border-bottom: 2upx solid #efefef;}
.order-popup .order-title image{width: 40upx;height: 40upx;}
.order-popup .order-body{
	height: 50vh;overflow: auto;background-color: #fff;border-radius: 20rpx;
}
.order-popup.address .order-body{height: 60vh;overflow: auto;padding: 20upx;}
.order-body-con{margin: 20rpx;}

.view-more{text-align: center;font-size: 24upx;color: #666;padding: 20upx;}
.order-popup .u-input {height: 60upx;}
.order-popup .submit-btn{
	border-top: 2upx solid #efefef;
	border-radius: 0;
}
.m-order-s{border-bottom:2rpx solid #f1f1f1;border-radius: 10upx;display: flex;font-size: 28upx;position: relative;padding: 20upx;}
.m-order-s .order-img {display: flex;align-items: center;justify-content: center;}
.m-order-s .order-img image{width: 150upx;height: 150upx;}
.m-order-s .order-info {padding: 15upx;flex:1;overflow: hidden;}
.m-order-s .order-info .title{font-size: 28upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.m-order-s .order-info .desc{font-size: 24upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;}
.m-order-s .order-info .price{font-size: 28upx;color: #f00;}
.m-order-s .status-btn-group{position: absolute;right: 10rpx;bottom: 10rpx;display: flex;align-items: center;gap: 15upx;}
.m-order-s .status{border-radius: 10upx 0 10upx 0;background-color: #909399;font-size: 24upx;color: #fff;padding: 10upx;}
.m-order-s .status.info{background-color: #909399;}
.m-order-s .status.primary{background-color: #409eff;}
.m-order-s .status.success{background-color: #67c23a;}
.m-order-s .status.danger{background-color: #f56c6c;}
.m-order-s .status.warn{background-color: #e6a23c;}
.empty-body{display: flex;align-items: center;justify-content: center;height: 100%;}
</style>