295 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			295 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
| 	<view class="main">
 | |
| 		<view class="search-content">
 | |
| 			<view class="search-list">
 | |
| 				<view v-for="item in dataList" class="search-view">
 | |
| 					<view class="flex_s">
 | |
| 						<view class="data-left">
 | |
| 							{{'会员编号'}}
 | |
| 						</view>
 | |
| 						<view class="data-right">
 | |
| 							{{item.memberCode}}
 | |
| 						</view>
 | |
| 					</view>
 | |
| 					<view class="flex_s">
 | |
| 						<view class="data-left">
 | |
| 							{{'会员姓名'}}
 | |
| 						</view>
 | |
| 						<view class="data-right">
 | |
| 							{{item.memberName}}
 | |
| 						</view>
 | |
| 					</view>
 | |
| 					<view class="flex_s">
 | |
| 						<view class="data-left">
 | |
| 							{{'消费金额'}}
 | |
| 						</view>
 | |
| 						<view class="data-right">
 | |
| 							{{item.orderAmount| numberToCurrency}}
 | |
| 						</view>
 | |
| 					</view>
 | |
| 					<view class="flex_s">
 | |
| 						<view class="data-left">
 | |
| 							{{'消费业绩'}}(PV)
 | |
| 						</view>
 | |
| 						<view class="data-right">
 | |
| 							{{item.orderAchieve| numberToCurrency}}
 | |
| 						</view>
 | |
| 					</view>
 | |
| 					<view class="flex_s">
 | |
| 						<view class="data-left">
 | |
| 							{{'注册等级'}}
 | |
| 						</view>
 | |
| 						<view class="data-right">
 | |
| 							{{item.pkRegisterGradeVal}}
 | |
| 						</view>
 | |
| 					</view>
 | |
| 					<view class="flex_s">
 | |
| 						<view class="data-left">
 | |
| 							{{'创建时间'}}
 | |
| 						</view>
 | |
| 						<view class="data-right">
 | |
| 							{{item.creationTime}}
 | |
| 						</view>
 | |
| 					</view>
 | |
| 
 | |
| 					<view style="clear: both;"></view>
 | |
| 					<view style="height: 20rpx;background-color: #fff;"></view>
 | |
| 				</view>
 | |
| 			</view>
 | |
| 		</view>
 | |
| 	</view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| 	import * as api from '@/config/distribute.js'
 | |
| 	import {
 | |
| 		setToken
 | |
| 	} from '@/config/auth.js'
 | |
| 	import store from '@/store'
 | |
| 	export default {
 | |
| 		data() {
 | |
| 			return {
 | |
| 				dataList: [],
 | |
| 				page: {
 | |
| 					pageNum: 1,
 | |
| 					pageSize: 50
 | |
| 				}
 | |
| 			}
 | |
| 		},
 | |
| 		props: {
 | |
| 			placeDept: {
 | |
| 				type: String,
 | |
| 				default: "0",
 | |
| 			},
 | |
| 		},
 | |
| 		onLoad() {
 | |
| 
 | |
| 		},
 | |
| 		created() {
 | |
| 			this.getDataList()
 | |
| 		},
 | |
| 		methods: {
 | |
| 
 | |
| 			getDataList(num) {
 | |
| 				this.page.placeDept = this.placeDept
 | |
| 				this.page.pageNum = num || 1
 | |
| 				api.getAchieveDetails(this.page).then(res => {
 | |
| 
 | |
| 					this.dataList = res.rows
 | |
| 				}).catch(error => {
 | |
| 					reject(error)
 | |
| 				})
 | |
| 			},
 | |
| 
 | |
| 		},
 | |
| 	}
 | |
| </script>
 | |
| <style>
 | |
| 	.border_s {
 | |
| 		border-bottom: 1rpx solid #eee;
 | |
| 		height: 10rpx;
 | |
| 	}
 | |
| 
 | |
| 	.button {
 | |
| 		padding: 0 30rpx;
 | |
| 		/* width: 150rpx; */
 | |
| 		height: 52rpx;
 | |
| 		line-height: 52rpx;
 | |
| 		color: #fff;
 | |
| 		font-size: 28rpx;
 | |
| 		text-align: center;
 | |
| 		background: #005BAC;
 | |
| 		margin: 30rpx 0 0 0;
 | |
| 		float: right;
 | |
| 		border-radius: 24rpx;
 | |
| 	}
 | |
| 
 | |
| 	.type {
 | |
| 		color: #005BAC !important;
 | |
| 	}
 | |
| 
 | |
| 	.flex_s {
 | |
| 		width: 100%;
 | |
| 		display: flex;
 | |
| 		justify-content: space-between;
 | |
| 		padding-bottom: 15rpx;
 | |
| 	}
 | |
| 
 | |
| 	.data-left {
 | |
| 		color: #999;
 | |
| 		font-size: 26rpx;
 | |
| 	}
 | |
| 
 | |
| 	.data-right {
 | |
| 		color: #333;
 | |
| 		font-size: 26rpx;
 | |
| 	}
 | |
| 
 | |
| 	.search-view {
 | |
| 		/* display: flex; */
 | |
| 		/* justify-content: space-between; */
 | |
| 		padding: 30rpx 20rpx 0 20rpx;
 | |
| 		border-bottom: 20rpx solid #eee;
 | |
| 		/* border-bottom: 1px solid #eee; */
 | |
| 		margin: 0;
 | |
| 	}
 | |
| 
 | |
| 	.search-list {
 | |
| 		margin-bottom: 25rpx;
 | |
| 		background-color: #fff;
 | |
| 	}
 | |
| 
 | |
| 	.search-content {
 | |
| 		margin-top: 25rpx;
 | |
| 	}
 | |
| 
 | |
| 	.text_s {
 | |
| 		color: #333;
 | |
| 		font-size: 26rpx;
 | |
| 	}
 | |
| 
 | |
| 	.search-icon-s {
 | |
| 		width: 22rpx;
 | |
| 		height: 22rpx;
 | |
| 	}
 | |
| 
 | |
| 	.search-icons {
 | |
| 		width: 47rpx;
 | |
| 		height: 47rpx;
 | |
| 		background: #005BAC;
 | |
| 		border-radius: 50%;
 | |
| 		margin-left: 20rpx;
 | |
| 		display: flex;
 | |
| 		justify-content: center;
 | |
| 		align-items: center;
 | |
| 		margin: 30rpx 20rpx 0 0;
 | |
| 	}
 | |
| 
 | |
| 	.time1 {
 | |
| 		width: 158rpx;
 | |
| 		height: 75rpx;
 | |
| 		border-bottom: 1rpx solid #eee;
 | |
| 		margin: 0 50rpx 30rpx 50rpx;
 | |
| 		color: #999;
 | |
| 		text-align: center;
 | |
| 		font-size: 24rpx;
 | |
| 		/* margin-bottom: 30rpx; */
 | |
| 	}
 | |
| 
 | |
| 	.time-text {
 | |
| 		color: #999;
 | |
| 		font-size: 26rpx;
 | |
| 	}
 | |
| 
 | |
| 	.search-bottom {
 | |
| 		height: 100rpx;
 | |
| 		line-height: 100rpx;
 | |
| 		display: flex;
 | |
| 		margin-left: 20rpx;
 | |
| 	}
 | |
| 
 | |
| 	.texts {
 | |
| 		color: #333;
 | |
| 		font-size: 26rpx;
 | |
| 		overflow: hidden;
 | |
| 		white-space: nowrap;
 | |
| 		text-overflow: ellipsis;
 | |
| 		/* width:200rpx; */
 | |
| 		text-align: right;
 | |
| 	}
 | |
| 
 | |
| 	.select-text {
 | |
| 		display: flex;
 | |
| 		margin-right: 20rpx;
 | |
| 		font-size: 26rpx;
 | |
| 		color: #333;
 | |
| 		position: relative;
 | |
| 	}
 | |
| 
 | |
| 	.selIcon {
 | |
| 		width: 20rpx;
 | |
| 		height: 20rpx;
 | |
| 		margin-top: 10rpx;
 | |
| 		margin-left: 5rpx;
 | |
| 	}
 | |
| 
 | |
| 	.text-s {
 | |
| 		font-size: 26rpx;
 | |
| 		color: #999;
 | |
| 		margin-right: 10rpx;
 | |
| 	}
 | |
| 
 | |
| 	.place {
 | |
| 		font-size: 26rpx;
 | |
| 		color: #999;
 | |
| 	}
 | |
| 
 | |
| 	.border-colors {
 | |
| 		border: none;
 | |
| 		font-size: 26rpx;
 | |
| 		color: #333;
 | |
| 		margin-left: 30rpx;
 | |
| 	}
 | |
| 
 | |
| 	page {
 | |
| 		background-color: #f2f2f2;
 | |
| 	}
 | |
| 
 | |
| 	.search-icon {
 | |
| 		width: 25rpx;
 | |
| 		height: 25rpx;
 | |
| 		position: absolute;
 | |
| 		left: 30rpx;
 | |
| 		top: 12rpx;
 | |
| 
 | |
| 		image {}
 | |
| 	}
 | |
| 
 | |
| 	.search-bg {}
 | |
| 
 | |
| 	.top {
 | |
| 		/* height: 200rpx; */
 | |
| 		background-color: #fff;
 | |
| 		padding: 20rpx 0 20rpx 0;
 | |
| 	}
 | |
| 
 | |
| 	.search-tops {
 | |
| 		display: flex;
 | |
| 		justify-content: space-between;
 | |
| 		height: 65rpx;
 | |
| 		line-height: 65rpx;
 | |
| 		padding-bottom: 40rpx;
 | |
| 		border-bottom: 1px solid #eee;
 | |
| 	}
 | |
| 
 | |
| 	.search-bg {
 | |
| 		width: 432rpx;
 | |
| 		height: 35rpx;
 | |
| 		background: #F5F6F8;
 | |
| 		border-radius: 33rpx;
 | |
| 		display: flex;
 | |
| 		position: relative;
 | |
| 		padding: 20rpx 50rpx;
 | |
| 		margin-left: 20rpx;
 | |
| 	}
 | |
| </style> |