['核销记录优惠券核销和权证核销']

apis/interfaces/scan.js

@@ -6,7 +6,7 @@
 import request from '../request.js'
 
 
-// 扫码前置条件
+// 扫码前置条件 get 核销前置  post 表示核销
 const scanInfo = (apiUrl,data,method) => {
   return request({
     url: apiUrl,
@@ -15,8 +15,17 @@ const scanInfo = (apiUrl,data,method) => {
   })
 }
 
+// 核销记录
+const scanList = (apiUrl,data) => {
+  return request({
+    url: apiUrl,
+    method:'GET',
+    data:data
+  })
+}
 
 
 export {
-  scanInfo
+  scanInfo,
+  scanList
 }

pages.json

@@ -466,10 +466,10 @@
 				"navigationBarBackgroundColor": "#039bfe"
 			}
 		}, {
-			"path": "pages/verification/details",
+			"path": "pages/verification/history",
-			"name": "VerificationDetails",
+			"name": "VerificationHistory",
 			"style": {
-				"navigationBarTitleText": "核销券详情",
+				"navigationBarTitleText": "核销记录",
 				"navigationBarTextStyle": "white",
 				"navigationBarBackgroundColor": "#f40c50"
 			}

pages/verification/details.vue

@@ -1,19 +0,0 @@
-<template>
-	<view>
-		核销详情
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-
-</style>

pages/verification/history.vue

@@ -0,0 +1,441 @@
+<template>
+	<view class="Record" v-if="loaded">
+		<view class="record-top">
+			<image src="/static/images/record_bg.png" mode="widthFix" class="record-bg" />
+			<view class="record-top-nav">
+				<view :class="['record-top-item',type==='year'?'selectTopItem':'']" @click="selectType('year')">按年
+				</view>
+				<view :class="['record-top-item',type==='month'?'selectTopItem':'']" @click="selectType('month')">按月
+				</view>
+				<view :class="['record-top-item',type==='day'?'selectTopItem':'']" @click="selectType('day')">按日</view>
+			</view>
+			<view class="record-mouth-year">
+				<view class="record-type-left">
+					<u-picker mode="time" v-model="show" :params="params" @confirm='confirm' title='筛选日期'
+						start-year='2021' :end-year='currentYear' />
+					<view @click="show = true">
+						{{date?date:'选择日期'}}
+						<uni-icons type="arrowdown" color="#fff" size="12" />
+					</view>
+				</view>
+				<view class="record-type-right">
+					<view :class="['pay_type_item',scantype==='goods'?'pay_type_item_select':'']"
+						@click="selectCoinType('goods')">权证</view>
+					<view :class="['pay_type_item',scantype==='coupons'?'pay_type_item_select':'']"
+						@click="selectCoinType('coupons')">优惠券</view>
+				</view>
+			</view>
+			<view class="record-title">核销总数 ( 件 ) </view>
+			<view class="record-money"><span></span>{{account}}
+				<span></span>
+			</view>
+		</view>
+
+		<!-- 列表。。。 -->
+		<view class="lists" v-if="lists.length>0">
+			<view class="list-item" v-for="(item,index) in lists" :key='index'>
+				
+				<view class="list-item-title">
+					<view class="left">
+						<view class="tags">{{scantype === 'goods'?'权证核销':'优惠券核销'}}</view>
+						<view class='title' v-if="scantype === 'goods'">{{item.goods_sku.goods_name}}</view>
+						<view class='title' v-else>{{item.coupon.title}}</view>
+					</view>
+					<!-- <view class="right"> -->
+					    <!-- <u-icon  name="checkmark-circle-fill" size='50' color='#e93340' /> -->
+					<!-- </view> -->
+				</view>
+				
+				<view class="list-item-content" v-if='scantype === "goods"'>
+					<image class="good-img" :src="item.goods_sku.cover" mode="aspectFill" />
+					<view class="list-item-right">
+						<view class="content-item">核销商品数量：X {{item.qty}} </view>
+						<view class="content-item" >核销商品规格：{{item.goods_sku.unit || '通用规格'}}</view>
+						<view class="content-item">核销时间：{{item.used_at}}</view>
+					</view>
+				</view>
+				<view class="list-item-content" v-else>
+					<image class="good-img" v-if='item.source.type ==="goods"' :src="item.source.cover" mode="aspectFill" />
+					<view class="list-item-right">
+						<view class="content-item" v-if='item.source.type ==="goods"'>兑换商品名称：{{item.source.name}} </view>
+						<view class="content-item"> 优惠券规格：满 {{item.coupon.full}} 减 {{item.coupon.price}} </view>
+						<view class="content-item" >优惠券类型：{{item.coupon.type.text}}</view>
+						<view class="content-item">核销时间：{{item.used_at}}</view>
+					</view>
+				</view>
+				
+				<view class="person">
+					<image class="avatar" :src="item.clerk.avatar" mode="aspectFill" />
+					{{item.clerk.nickname}}
+					<view class="shop-name">{{item.store.name}}</view>
+				</view>
+				
+			</view>
+		</view>
+		<!-- 无列表 -->
+		<no-list v-if="lists.length === 0 && scantype === 'goods'" name='no-in' txt="没有任何权证核销记录" />
+		<no-list v-if="lists.length === 0 && scantype === 'coupons'" name='no-out' txt="没有任何优惠券记录" />
+
+		<!-- <u-toast ref="uToast" /> -->
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import {
+		scanList
+	} from '@/apis/interfaces/scan';
+	export default {
+		data() {
+			return {
+				lists: [],
+				has_more: true,
+				page: 1,
+				type: 'year', // 统计类型day日，month月，year年
+				scantype: 'goods', // goods 数权核销  coupons 优惠券核销
+				date: new Date().toISOString().slice(0, 4), // 日：Y-m-d，月Y-m，年Y
+				params: {
+					year: true,
+					month: true,
+					day: true
+				},
+				show: false, // 显示
+				currentDay: new Date().toISOString().slice(0, 10),
+				currentMonth: new Date().toISOString().slice(0, 7),
+				currentYear: new Date().toISOString().slice(0, 4),
+				account: '',
+				loaded:false
+			}
+		},
+		onLoad() {
+			this.getList()
+		},
+		onReachBottom() {
+			if (this.has_more) {
+				this.page = this.page + 1
+				this.getList()
+			} else {
+				this.$refs.uToast.show({
+					title: '吼吼吼~我是有底的~',
+					type: 'error',
+					icon: false,
+					duration: 3000
+				})
+			}
+		},
+		methods: {
+			// 获取列表
+			getList() {
+				let data = {
+					page: this.page,
+					date_type: this.type,
+					date: this.date,
+					type: 'my'
+				}
+				let apiUrl = ''
+				if(this.scantype === 'goods'){
+				   apiUrl = 'manages/warrants/logs'
+				}else{
+					apiUrl = 'coupons/verify/logs/coupons'
+				}
+				
+				scanList(apiUrl,data).then(res => {
+					console.log(res)
+					this.account = res.all
+					this.lists = this.lists.concat(res.lists.data)
+					this.has_more = res.lists.page.has_more
+					this.loaded = true
+				}).catch(err => {
+					this.$refs.uToast.show({
+						title: err.message,
+						type: 'error',
+						icon: false,
+						duration: 3000
+					})
+				})
+			},
+			selectCoinType(type) {
+				if (this.scantype !== type) {
+					this.scantype = type
+					this.reset()
+				}
+			},
+			// 重置
+			reset() {
+				this.page = 1
+				this.lists = []
+				this.has_more = true
+				this.getList()
+			},
+			// 选择 年  月  日 切换要重置数据
+			selectType(type) {
+				console.log(type, typeof type)
+				if (this.type !== type) {
+					switch (type) {
+						case 'year':
+							this.type = type
+							this.params = {
+								year: true,
+								month: false,
+								day: false
+							}
+							this.date = this.currentYear
+							this.reset()
+							break;
+						case 'month':
+							this.type = type
+							this.params = {
+								year: true,
+								month: true,
+								day: false
+							}
+							this.date = this.currentMonth
+							this.reset()
+							break;
+						case 'day':
+							this.type = type
+							this.params = {
+								year: true,
+								month: false,
+								day: false
+							}
+							this.date = this.currentDay
+							this.reset()
+							break;
+					}
+				}
+			},
+			// 点击确认按钮
+			confirm(e) {
+				let type = this.type
+				switch (type) {
+					case 'year':
+						this.date = e.year
+						this.reset()
+						break;
+					case 'month':
+						this.date = e.year + '-' + e.month
+						this.reset()
+						break;
+					case 'day':
+						this.date = e.year + '-' + e.month + '-' + e.day
+						this.reset()
+						break;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.Record {
+		width: 100%;
+		min-height: 100vh;
+		padding-top: 30rpx;
+		background-color: #f5f5f5;
+	}
+
+	.record-top {
+		width: calc(100% - 60rpx);
+		height: 360rpx;
+		background-image: linear-gradient(to left, #f40c50, #f40c50);
+		box-shadow: 0 10rpx 20rpx 0rpx rgba($color: $main-color, $alpha: 0.4);
+		margin: 0 30rpx;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		position: relative;
+		padding: 10rpx 50rpx 20rpx 50rpx;
+		z-index: 1;
+
+		.record-bg {
+			position: absolute;
+			width: 230rpx;
+			bottom: 0;
+			right: 30rpx;
+			z-index: 1;
+		}
+
+		.record-top-nav {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+
+			.record-top-item {
+				margin: 40rpx 20rpx;
+				font-size: 30rpx;
+				font-weight: 500;
+				color: #fff;
+			}
+
+			.selectTopItem {
+				border-bottom: solid 4rpx #fff;
+			}
+		}
+
+		.record-mouth-year {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			box-sizing: border-box;
+			position: relative;
+			z-index: 2;
+			color: #fff;
+			font-size: 30rpx;
+
+			.record-type-left {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+				box-sizing: border-box;
+
+				uni-icons {
+					margin-left: 4rpx;
+				}
+			}
+
+			.record-type-right {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+				box-sizing: border-box;
+				font-size: 24rpx;
+
+				.pay_type_item {
+					margin: 0 10rpx;
+					padding: 2rpx 20rpx;
+					border-radius: 30rpx;
+					border: solid 1rpx rgba($color: #000000, $alpha: 0);
+				}
+
+				.pay_type_item_select {
+					border: solid 1rpx #f7f7f7;
+				}
+			}
+		}
+
+		.record-title {
+			font-size: 28rpx;
+			color: #fff;
+			padding: 20rpx 0;
+		}
+
+		.record-money {
+			color: #fff;
+			font-size: 50rpx;
+			font-weight: bold;
+
+			span {
+				font-size: 30rpx;
+				font-weight: 400;
+				margin-right: 4rpx;
+			}
+		}
+	}
+
+	// 列表
+	.lists {
+		box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #000, $alpha: 0.4);
+		padding: 20rpx;
+		.list-item {
+			background-color: #fff;
+			width: 100%;
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+			padding: 20rpx;
+
+			.list-item-title {
+				width: 100%;
+				border-bottom: solid 1rpx #f7f7f7;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				box-sizing: border-box;
+				padding: 20rpx 0;
+				.left{
+					flex: 1;
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: flex-start;
+					box-sizing: border-box;
+					.title{
+						width: 520rpx;
+						overflow: hidden;
+						font-size: 30rpx;
+						margin-left: 12rpx;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+					.tags{
+						padding: 4rpx 10rpx;
+						border-radius: 20rpx 0 20rpx 0;
+						background-color: #f40c50;
+						font-size: 26rpx;
+						color: #fff;
+					}
+				}
+				// .right{
+				// 	padding: 20rpx 30rpx;
+				// }
+			}
+			
+			
+			.list-item-content{
+				width: 100%;
+				color: #999;
+				padding: 20rpx 0;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+				box-sizing: border-box;
+				border-bottom: solid 1rpx #f7f7f7;
+				.good-img{
+					margin-right: 20rpx;
+					width: 160rpx;
+					height: 160rpx;
+					border-radius: 10rpx;
+				}
+				.list-item-right{
+					flex: 1;
+					.content-item{
+						padding: 10rpx 0;
+					}
+				}
+			}
+			
+			.person{
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+				box-sizing: border-box;
+				font-size: 30rpx;
+				padding: 20rpx 0 0 0;
+				font-weight: bold;
+				.avatar{
+					width: 70rpx;
+					height: 70rpx;
+					border-radius: 50%;
+					margin-right: 10rpx;
+				}
+				.shop-name{
+					background-color: #f40c50;
+					color: #fff;
+					font-size: 24rpx;
+					font-weight: 400;
+					padding: 4rpx 20rpx;
+					border-radius: 12rpx;
+					margin-left: 20rpx;
+				}
+			}
+			
+		}
+	}
+</style>

pages/verification/index.vue

@@ -9,7 +9,7 @@
 			<view class="goods" @click="scanCode('goods','get')"> 权证核销 </view>
 			<view class="coupons" @click="scanCode('coupons','get')"> 优惠券核销 </view>
 		</view>
-		<view class="history">核销记录</view>
+		<view class="history" @click="goHistory">核销记录</view>
 		<u-toast ref="uToast" />
 
 		<!-- 二维码展示动画效果 -->
@@ -74,7 +74,7 @@
 					}
 				});
 			},
-			// 请求核销前置，优惠券前置和权证前置
+			// 请求核销前置，优惠券前置和权证前置（get） post 是核销
 			scanInfo(token, method) {
 				console.log(token, this.scanType)
 				let apiUrl = ''
@@ -122,7 +122,8 @@
 									success: (res1) => {
 										if (res1.confirm) {
 											uni.navigateTo({
-												url:'/pages/property/coupon/canUseList?code='+this.code
+												url: '/pages/property/coupon/canUseList?code=' +
+													this.code
 											})
 										} else {
 											this.showCode = true
@@ -145,6 +146,12 @@
 					})
 					this.showCode = false
 				})
+			},
+			// 核销记录
+			goHistory() {
+				uni.navigateTo({
+					url:'/pages/verification/history'
+				})
 			}
 		}
 	}