duck/pages/user/wipe.vue

<template>
	<view class="wipe-wrapper">
		<view class="wipe-top flex">
			<view class="top-left">
				<image src="../../static/icon/sm.png" mode=""></image>
				扫码核销
			</view>
			<view class="top-right" @click="srhx">
				<image src="../../static/icon/sr.png" mode=""></image>
				输入核销
			</view>
			<view class="top-jg"></view>
		</view>

		<scroll-view scroll-y="true" @scrolltolower="loadData" class="good-content">
			<view>
				<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
				<empty v-if="goodList.length === 0"></empty>
				<view class="good" v-for="item in goodList">
					<view class="good-top">
						<view class="top-num">订单编号:{{ item.id }}</view>
						<view class="top-status">待核销</view>
					</view>
					<view class="goods-buttom">
						<view class="good-img"><image src="../../static/img/good1.jpg" mode=""></image></view>
						<view class="good-infos">
							<view class="good-title clamp">{{ item.title }}</view>
							<view class="shop-info">
								<image src="../../static/img/shop.png" mode=""></image>
								{{ item.shop || '子臣台州旗舰店' }}
								<image src="../../static/img/point.png" mode=""></image>
								{{ item.juli + 'm' || '200m' }}
							</view>
							<view class="good-tag">佣金￥{{ item.tag || 10 }}</view>
						</view>
					</view>
					<view class="good-hj">一共{{ item.num }}件商品 合计：￥{{ item.paypri }}</view>
					<view class="good-price">￥{{ item.price }}</view>
					<view class="good-num">X{{ item.num }}</view>
				</view>
				<uni-load-more :status="goodList.loadingType"></uni-load-more>
			</view>
		</scroll-view>
		<uni-popup ref="popuphx" class="agree-wrapper">
		    <view class="hx-wrapper">
		    	<view class="hx-img">
		    		<image src="../../static/img/hxbg.png" mode=""></image>
		    	</view>
				<view class="hx-body">
					<view class="hx-title">
						输入核销码核销
					</view>
					<input type="text" value="" placeholder="请输入核销码" placeholder-class="hx-placeholder"/>
					<view class="hx-btn">
						立即核销
					</view>
				</view>
				<view class="hx-close" @click="close">
					<image src="../../static/icon/close.png" mode=""></image>
				</view>
		    </view>
		</uni-popup>
	</view>
</template>

<script>
import empty from '@/components/empty';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue'

export default {
	components: {
		empty,
		uniPopup
	},
	data() {
		return {
			goodList: [
				{
					id: '5577889955',
					title: '湿热肝上火气肺痰煲汤材料',
					shop: '子臣台州旗舰店',
					juli: 300,
					tag: 10,
					num: 1,
					price: 250,
					paypri: 250
				}
			] //待核销商品，
		};
	},
	methods: {
		loadData() {
			console.log('daodil ');
		},
		srhx() {
			this.$refs.popuphx.open()
		},
		close() {
			this.$refs.popuphx.close()
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background-color: #f8f6f6;
}
.wipe-wrapper {
	.wipe-top {
		justify-content: space-around;
		width: 750rpx;
		height: 80rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
		font-size: 28rpx;
		font-weight: 500;
		color: #ef041f;
		line-height: 80rpx;
		text-align: center;
		position: relative;
		z-index: 10;
		.top-left {
			vertical-align: middle;
			width: 50%;
			image {
				width: 27rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}
		}
		.top-right {
			vertical-align: middle;
			width: 50%;
			image {
				width: 27rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}
		}
		.top-jg {
			width: 2rpx;
			height: 80rpx;
			background: #f0f0f0;
			position: absolute;
			// background: red;
		}
	}
}
.good-content {
	height: 100%;
}
.good {
	width: 702rpx;
	height: 304rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	padding: 0 30rpx;
	margin: 20rpx auto;
	position: relative;
	.good-top {
		height: 85rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		line-height: 85rpx;
		display: flex;
		justify-content: space-between;
		.top-status {
			font-size: 28rpx;
			font-weight: 500;
			color: #EF041F;
		}
	}
	.goods-buttom {
		height: 160rpx;
		display: flex;
		.good-img {
			width: 160rpx;
			height: 160rpx;
			// overflow: hidden;
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
		.good-title {
			width: 350rpx;
			padding-top: 6rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #3F454B;
			line-height: 1;
			padding-left: 10rpx;
		}
		.shop-info {
			padding-top: 11rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #DCB876;
			line-height: 1;
			// padding-left: 10rpx;
			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 14rpx;
				margin-right: 4rpx;
			}
		}
		.good-tag {
			display: inline-block;
			height: 36rpx;
			background: #ffeee9;
			// opacity: 0.2;
			border-radius: 5rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #F23030;
			padding: 0 9rpx;
			line-height: 36rpx;
			margin-top: 15rpx;
			margin-left: 10rpx;
		}
		
	}
	.good-hj {
		line-height: 1;
		height: 26rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		text-align: right;
	}
	.good-price {
		text-align: left;
		font-size: 26rpx;
		font-weight: 500;
		line-height: 1;
		color: #333333;
		position: absolute;
		right: 31rpx;
		top:98rpx;
	}
	.good-num {
		text-align: left;
		font-size: 26rpx;
		font-weight: 500;
		line-height: 1;
		color: #333333;
		position: absolute;
		right: 31rpx;
		top:136rpx;
	}
}
.hx-wrapper {
	width: 536rpx;
	height: 630rpx;
	position: relative;
	// background-color: #fff;
	.hx-img {
		width: 536rpx;
		height: 281rpx;
		image {
			width: 536rpx;
			height: 281rpx;
		}
	}
	
	.hx-close {
		position: absolute;
		left: 243rpx;
		bottom: -80rpx;
		width: 52rpx;
		height: 52rpx;
		image {
			width: 52rpx;
			height: 52rpx;
		}
	}
	.hx-body {
		width: 536rpx;
		height: 349rpx;
		background-color: #fff;
		border-radius: 0 0 10rpx 10rpx;
		.hx-title {
			width: 536rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 1;
			padding-top: 42rpx;
			text-align: center;
		}
		input {
			width: 439rpx;
			height: 68rpx;
			background: #eeddde;
			border-radius: 10rpx;
			margin: 39rpx auto 0;
			padding-left: 26rpx;
			.hx-placeholder {
				font-size: 26rpx;
				font-weight: 500;
				color: #901b21;
			}
		}
		.hx-btn {
			margin: 44rpx auto 0;
			width: 353rpx;
			height: 71rpx;
			background: #901b21;
			border-radius: 34rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #F8F9F9;
			line-height: 71rpx;
			text-align: center;
		}
		
		
	}
}
</style>