web-retail-h5/components/distribution/monthPvDetail.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">
							{{$t('MN_T_1')}}
						</view>
						<view class="data-right">
							{{item.memberCode}}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							{{$t('CK_KS_14')}}
						</view>
						<view class="data-right">
							{{item.memberName}}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							{{$t('MN_F_T_1090')}}
						</view>
						<view class="data-right">
							{{item.orderAmount| numberToCurrency}}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							{{$t('w_0306')}}(PV)
						</view>
						<view class="data-right">
							{{item.orderAchieve| numberToCurrency}}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							{{$t('PER_DA_5')}}
						</view>
						<view class="data-right">
							{{item.pkRegisterGradeVal}}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							{{$t('MY_ORD_15')}}
						</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: #FB3024;
		margin: 30rpx 0 0 0;
		float: right;
		border-radius: 24rpx;
	}

	.type {
		color: #FB3024 !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: #FB3024;
		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>