weapp-v1/pages/sold/sold.vue

<template>
	<view class="sold">
		<custom-nav :title="pageTitle"></custom-nav>
		
		<view class="content">
			<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
				<view class="top">
					<ucharts-pie ref="pie" v-if="data1" :chartData="sold_data.sold_data1" :season="userServerInfo.season"></ucharts-pie>
				</view>
				<view class="bot">
					<ucharts-column v-if="data2" :chartData="sold_data.sold_data2" :season="userServerInfo.season"></ucharts-column>
					<view class="table">
						<view class="row">
							<view class="item left">
								<text>今日销售总量：</text>
								<text style="color: #FA6342;">{{ simple_today + hard_today + old_today + newold_today + youth_today }}套</text>
							</view>
							<view class="item">
								<text>一周销售总量：</text>
								<text style="color: #FA6342;">{{ simple_week + hard_week + old_week + newold_week + youth_week }}套</text>
							</view>
						</view>
						<view class="row">
							<view class="item left">
								<text>简约版：</text>
								<text style="color: #FA6342;">{{ simple_today }}套</text>
							</view>
							<view class="item">
								<text>简约版：</text>
								<text style="color: #FA6342;">{{ simple_week }}套</text>
							</view>
						</view>
						<view class="row">
							<view class="item left">
								<text>精装版：</text>
								<text style="color: #FA6342;">{{ hard_today }}套</text>
							</view>
							<view class="item">
								<text>精装版：</text>
								<text style="color: #FA6342;">{{ hard_week }}套</text>
							</view>
						</view>
						<view class="row">
							<view class="item left">
								<text>高腰版：</text>
								<text style="color: #FA6342;">{{ old_today }}套</text>
							</view>
							<view class="item">
								<text>高腰版：</text>
								<text style="color: #FA6342;">{{ old_week }}套</text>
							</view>
						</view>
						<view class="row">
							<view class="item left">
								<text>青春版：</text>
								<text style="color: #FA6342;">{{ youth_today }}套</text>
							</view>
							<view class="item">
								<text>青春版：</text>
								<text style="color: #FA6342;">{{ youth_week }}套</text>
							</view>
						</view>
						<view class="row">
							<view class="item left">
								<text>纯棉老人版：</text>
								<text style="color: #FA6342;">{{ newold_today }}套</text>
							</view>
							<view class="item">
								<text>纯棉老人版：</text>
								<text style="color: #FA6342;">{{ newold_week }}套</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { api_getSoldTotal, api_getCurrentSoldInfo } from '../../api.js'
	import uchartsPie from '../../components/ucharts-pie.vue'
	import uchartsColumn from '../../components/ucharts-column.vue'
	export default {
		components: {
			uchartsPie,
			uchartsColumn
		},
		data() {
			return {
				pageTitle: '产品销售',
				scrollViewHeight: 0,  //scrollview 高
				sold_data: {},  //图表数据
				simple_today: 0,  //简约版今日销售
				hard_today: 0,  //精装版今日销售
				old_today: 0,  //高腰版今日销售
				youth_today: 0,  //青春版今日销售
				simple_week: 0,  //简约版本周销售
				hard_week: 0,  //精装版本周销售
				old_week: 0,  //高腰版本周销售
				youth_week: 0,  //青春版本周销售
				newold_today: 0,
				newold_week: 0,
				data1: false,
				data2: false
			}
		},
		computed: {
			userServerInfo () {  //用户服务器信息
				return this.$store.state.userServerInfo
			}
		},
		created() {
			console.log(this.userServerInfo.season)
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			this.$scrollViewHeight('.content')  //设置页面内 scroll view 的高度
			this.$ajax.get(`${api_getSoldTotal}?season=${this.userServerInfo.season}`).then(([ , { data: res }]) => {  //获取赛季总销售数据
				this.sold_data.sold_data1 = res.data.sold_data
				this.data1 = true
			})
			this.$ajax.get(`${api_getCurrentSoldInfo}?season=${this.userServerInfo.season}`).then(([ , { data: res }]) => {  //获取当前赛季获销售数据
				this.sold_data.sold_data2 = res.data.sold_data
				this.data2 = true
				this.simple_today = res.data.simple_today
				this.hard_today = res.data.hard_today
				this.old_today = res.data.old_today
				this.simple_week = res.data.simple_week
				this.hard_week = res.data.hard_week
				this.old_week = res.data.old_week
				this.newold_week = res.data.newold_week
				this.newold_today = res.data.newold_today
				this.youth_week = res.data.youth_week
				this.youth_today = res.data.youth_today
			})
			this.$hideLoading()  //异步操作结束，停止 loading
		}
	}
</script>

<style lang="scss" scoped>
	.sold {
		@include page();
		.content {
			border-top: $custom-nav-borderbot-height solid $custom-nav-borderbot-color;
			background: $custom-nav-borderbot-color;
			.top {
				height: 410rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				position: relative;
			}
			.bot {
				min-height: 77rpx;
				background: #FFFFFF;
				.table {
					width: 650rpx;
					margin: 40rpx auto 0;
					border-top: 1rpx solid #EEEEEE;
					padding-bottom: 26rpx;
					.row {
						height: 63rpx;
						border-bottom: 1rpx solid #EEEEEE;
						.item {
							box-sizing: border-box;
							width: 50%;
							height: 100%;
							float: left;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 24rpx;
							&.left {
								border-right: 1rpx solid #EEEEEE;
							}
						}
					}
				}
			}
		}
	}
</style>