web-app-v1/pages/order-sum/order-sum.vue

<template>
	<view v-if="data" class="order-sum">
		<view class="topTittle">
			{{activeList[choosedActie].label}}
		</view>
		<view class="topBox flexB">
			<view class="topBox_left">
				<view class="text spec"><text>￥</text>{{ data.no_pay_money | numDot }}</view>
				<view class="text">未付金额</view>
			</view>
			<image src="../../static/img_new/gift.png" alt="" mode="widthFix" style="width: 140rpx;height: 140rpx;">
		</view>
		<view class="middata">
			<view class="middata_box left">
				<view class="text spec"><text>￥</text>{{ data.pay_money | numDot }}</view>
				<view class="text">已付金额</view>
			</view>
			<view class="middata_box right">
				<view class="text spec"><text>￥</text>{{ data.money | numDot }}</view>
				<view class="text">总金额</view>
			</view>
		</view>
		<view v-if="type == 0" class="data-detail">
			<view class="type-detal">
				<view class="detail-item bold">
					<view class="name">款式</view>
					<view class="num">订货数量</view>
					<view class="money">订货金额</view>
				</view>
				<view class="detail-item">
					<view class="name">精装版</view>
					<view class="num">{{ data.hard | numDot }}（套）</view>
					<view class="money">￥{{ data.hard_money | numDot }}</view>
				</view>
				<view class="detail-item">
					<view class="name">简约版</view>
					<view class="num">{{ data.simple | numDot }}（件）</view>
					<view class="money">￥{{ data.simple_money | numDot }}</view>
				</view>
				<view class="detail-item">
					<view class="name">高腰版</view>
					<view class="num">{{ data.old | numDot }}（件）</view>
					<view class="money">￥{{ data.old_money | numDot }}</view>
				</view>
				<view class="detail-item">
					<view class="name">纯棉版</view>
					<view class="num">{{ data.newold | numDot }}（件）</view>
					<view class="money">￥{{ data.newold_money | numDot }}</view>
				</view>
				<view class="detail-item">
					<view class="name">青春版</view>
					<view class="num">{{ data.youth | numDot }}（件）</view>
					<view class="money">￥{{ data.youth_money | numDot }}</view>
				</view>
			</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" :lunar="true" @confirm="confirm" />
		<w-picker ref="Selector" mode="selector" themeColor="#F76454" :selectList="activeList"  @confirm="confirmActice" />
	</view>
</template>

<script>
	import { _API_OrderSum, _API_OrderRank, _API_ActivityList } from '@/apis/fortune.js'
	import WPicker from '@/components/w-picker/w-picker.vue'
	import chartProgress from '@/components/charts/chart-progress.vue'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components: { WPicker, uniCalendar, chartProgress },
		data() {
			return {
				type: 0,
				date: {
					0: '',
					1: ''
				},
				data: null,
				rank: [],
				choosedActie: 0,
				activeList: []
			};
		},
		filters: {
			maxNickname(str) {
				return `${str.substr(0,4)}${str.length > 4 ? '...' : ''}`
			}
		},
		mounted() {
			if (this.$store.state.userinfo.user_type !== 3) {
				uni.navigateBack()
				setTimeout(() => uni.$emit('noopening'))
				return
			}
			this.getActivityList()
		},
		onPullDownRefresh() {
			this.requestOnload()
			this.type = 0
		},
		methods: {
			getActivityList() {
				_API_ActivityList().then(res => {
					if(res.code === 200) {
						this.activeList = res.data.map((item, index) => ({
							label: item.title.length > 26 ? item.title.slice(0,26) + '...' : item.title,
							value: index,
							start: item.start_time,
							end: item.end_time
						}))
						console.log(this.activeList)
						// const arr = [{label: '全部', value: '', start: '', end: ''}]
						// this.activeList = arr.concat(this.activeList)
						this.requestOnload()
					}
				})
			},
			requestOnload() {
				uni.loading()
				// { start: this.activeList[0].start, end: this.activeList[0].end }
				_API_OrderSum().then(({ data }) => {
					this.data = data
					_API_OrderRank().then(({ data: { list } }) => {
						list.sort((a, b) => b.all - a.all)
						this.rank = list
					})
				})
			},
			request() {
				uni.loading()
				if(this.choosedActie == 0) { // 选择全部时 不传参
					_API_OrderSum().then(({ data }) => {
						this.data = data
						uni.loading()
						_API_OrderRank().then(({ data: { list } }) => {
							list.sort((a, b) => b.all - a.all)
							this.rank = list
						})
					})
				} else {
					_API_OrderSum({ start: this.date[0], end: this.date[1] }).then(({ data }) => {
						this.data = data
						uni.loading()
						_API_OrderRank({ start: this.date[0], end: this.date[1] }).then(({ data: { list } }) => {
							list.sort((a, b) => b.all - a.all)
							this.rank = list
						})
					})
				}
			},
			chooseTime(type) {
				this.type = type
				this.$refs.calendar.open()
			},
			confirm({ fulldate }) {
				if (this.type == 0) {
					this.date[0] = fulldate
				} else if (this.type == 1) {
					this.date[1] = fulldate
				}
			},
			choosePicker() { // 点击选择商品
				this.$refs.Selector.show()
			},
			confirmActice({ defaultVal: [index] }) {
				this.choosedActie = index
				this.date[0] = this.activeList[index].start
				this.date[1] = this.activeList[index].end
				this.request()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-sum {
		height: 100vh;
		padding-top: 22rpx;
		@include flex(column);
		background: #fff;
		.topTittle {
			width: 100%;
			padding: 0 24rpx;
			white-space: nowrap;
			text-overflow:ellipsis;
			overflow: hidden;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.topBox {
			width: 704rpx;
			height: 182rpx;
			margin: 26rpx auto 24rpx;
			background-image: url(../../static/img_new/bg.png);
			background-size:100% 100%;
			border-radius:16rpx 16rpx 16rpx 16rpx;//圆角四个角度
			padding: 0 50rpx;
			text {
				font-size: 32rpx;
				font-weight: 400;
				color: #fff;
			}
			.text {
				color: #fff;
				font-size: 32rpx;
				margin-top: 6rpx;
			}
			.spec {
				font-size: 56rpx;
				font-weight: bold;
			}
		}
		.middata {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0px 0px;
			padding: 0 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&_box {
				width: 340rpx;
				height: 156rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				text {
					font-size: 32rpx;
					font-weight: 400;
					color: #fff;
				}
				.text {
					color: #fff;
					font-size: 32rpx;
				}
				.spec {
					font-size: 48rpx;
					font-weight: bold;
				}
			}
			.left {
				background: linear-gradient(180deg, #5B50FF 0%, #8D3EFF 100%);
			}
			.right {
				background: linear-gradient(180deg, #3668FE 0%,#5291FE 100%);
			}
		}
		.data-detail {
			flex: 1;
			width: 100%;
			overflow-y: auto;
			margin-top: 24rpx;
			.type-detal {
				.bold {
					border: none !important;
					margin: 0 !important;
					background-color: #F8F8F8 !important;
					font-size: 30rpx !important;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold !important;
				}
				.detail-item {
					border-bottom: 2rpx solid #EEEEEE;
					@include flex();
					height: 90rpx;
					background: #FFFFFF;
					margin-bottom: 1rpx;
					font-size: 32rpx;
					margin: 0 24rpx;
					> view {
						height: 100%;
						display: flex;
						flex: 1;
						@include flex();
					}
				}
			}
		}
	}
</style>