jiaoyi-uni2/奥莱优品/components/chat/goods.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" @click="checkOrder(index,items.check)"><image :src="items.image" mode="widthFix"></image></view>
						<view class="order-info">
							<view class="title" @click="checkOrder(index,items.check)">{{items.title}}</view>
							<view class="desc">
								<uni-number-box v-model="items.number" :min="1"></uni-number-box>
							</view>
						</view>
						<view class="status-btn-group" @click="checkOrder(index,items.check)">
							<view class="status danger" v-if="!items.check">选择</view>
							<view class="status success" v-else>已选择</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 class="address-footer" v-if="orderList.length > 0">
					<view class="footer-btn" @click="closeOrder">取消</view>
					<view class="footer-btn full" @click="sendGoods">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data () {
		return {
			orderList:[],
			orderData:{
				page:1,
				size:10,
				loading:false,
				isDone:false
			},
			orderId:0,
			goodsNum:0
		}
	},
	methods: {
		open() {
			this.$nextTick(()=>{
				this.$refs.orderPop.open()
			})
			return this;
		},
		checkOrder(index,state) {
			this.orderList[index].check = !state;
		},
		closeOrder(){
			this.$nextTick(()=>{
				this.$refs.orderPop.close()
			})
		},
		setData(data) {
			this.orderData.page = 1;
			this.orderData.loading = false;
			this.orderData.isDone = false;
			this.orderList  = [];
			app.orderId = data.order;
			app.goodsNum = data.num;
			this.getOrder();
		},
		sendGoods(){
			var checkedItems = this.orderList.filter(item => item.check === true);
			if (checkedItems.length == 0) return this.$dialog.showSuccess("请至少选择一个")
			var total = checkedItems.reduce((sum, item) => sum + item.number, 0);
			if (total < app.goodsNum) return this.$dialog.showSuccess("请选择"+app.goodsNum+"份")
			if (total > app.goodsNum) return this.$dialog.showSuccess("最多只能选择"+app.goodsNum+"份")
			this.$refs.orderPop.close()
			this.$emit("send",checkedItems)
		},
		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 = {};
			formData.order = app.orderId;
			formData.page = this.orderData.page;
			formData.size = this.orderData.size;
			// formData.status = 1;
			var resp = await this.$api.order.goods.get(formData)
			this.orderData.loading = false;
			if (resp.code == 0) {
				return this.$dialog.showSuccess(resp.msg)
			}
			if (resp.data.data.length > 0) {
				this.orderData.page ++;
				this.orderList = [...this.orderList,...resp.data.data];
			} else {
				this.orderData.isDone = true;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.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;
}
.address-footer{
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 20rpx;
	padding: 0 20rpx 20rpx;
	.footer-btn{
		background-color: #fff;
		border: 2rpx solid $main-text-color;
		border-radius: 10rpx;
		color: $main-text-color;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		flex: 1;
		&.full{
			border: 2rpx solid $main-color;
			background-color: $main-color;
			color: #fff;
		}
	}
}
.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;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;}
.m-order-s .order-info .desc{font-size: 24upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;margin-top: 10rpx;}
.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>