<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>