H5_QiCaiYao/page_salesman_reportForm/Commoditysales/Commoditysales.vue

<template>
	<view>
		<u-navbar title="商品销售统计" :autoBack="true" leftIconSize="0" placeholder>
			<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
			<!-- <u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon> -->
		</u-navbar>
		<div class="head">{{start_time}} ~ {{end_time}}</div>
		<div class="label"  v-if="listtwo.goods_info">
			<div class="label-head">{{listtwo.goods_info.goods_name}}</div>
			<div class="df label-number">
				<div class="f1">商品编号：&emsp;{{listtwo.goods_info.goods_code}}</div>
				<div class="f1">产地:&emsp;{{listtwo.goods_info.address || '未知'}}</div>
			</div>
			<div class="df label-pharmacopeia">
				<div class="f1">规格:&emsp;选100条/袋</div>
				<div class="f1">执行标准:&emsp;{{listtwo.goods_info.execu_content || '未知'}}</div>
			</div>
			<div class="label-afterbody">生产企业：{{listtwo.goods_info.business || '未知'}}</div>
		</div>
		<div class="df fw transaction-data">
			<div class=" transaction-Cells" v-for="(item,index) in listtwo" :key="index">
				<div class="df aic transaction-Data">
					<div class="transaction-sex">
						<div>{{item.title}}</div>
						<div>{{item.num}}</div>
					</div>
					<div class="transaction-text"></div>
				</div>
				
			</div>

		</div>
		<div class=" df aic preferential-head">
			<view class="df aic preferential-head"  v-for="(item,index) in listsui" :key="index">
				<div class="f1 preferential-lable">
					<div>{{item.title}}</div>
					<div>{{item.num}}</div>
				</div>
				<div class="bar-type"></div>
			</view>
			<div class="seter"></div>
		</div>
		<selectPopup ref="selectPopup" :tochild="chilData"></selectPopup>
	</view>
</template>

<script>
		import selectPopup from "../components/selectPopup.vue"
	export default {
		components:{
			selectPopup
		},
		data() {
			return {
				chilData:'商品销售统计',
				list: [{
						name: '订货数量',
						sex: '500'
					},
					{
						name: '订单金额',
						sex: '50000.00'
					},
					{
						name: '退货数量',
						sex: '500'
					},
					{
						name: '退货金额',
						sex: '50000.00'
					},
					{
						name: '退货率',
						sex: '50%'
					},

				],
				start_time:'',
				end_time:'',
				sku_id:'',
				listtwo:[],
				listsui:[]
			};
		},
		onLoad() {
			uni.$on('sale',(data)=>{
				// console.log(data,'区间');
				this.start_time=data.start_time
				this.end_time=data.end_time
				this.sku_id=data.sku_id
				
			})
		},
		created() {
			setTimeout(()=>{
				this.$api.sendRequest({
					url: '/api/salasmanstat/goodsStatDetail',
					data:{
						start_time:this.start_time,
						end_time:this.end_time,
						sku_id:this.sku_id
					},
					success:res=>{
						console.log(res.data,'商品销售统计 - 详情');
						this.listtwo=res.data.stat.slice(0,-2)
						// this.goodsCateStatDetail=res.data
						this.listsui=res.data.stat.slice(-2)
					}
				})
			},500)
		},
		onLaunch() {
			uni.$off('sale')
		}
	}
</script>

<style lang="scss">
	.head {
		// width: 394px;
		// height: 44px;
		padding: 30rpx 0 0 24rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
		// margin-top: 100rpx;
	}

	.label {
		width: 702rpx;
		height: 234rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		.label-head {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			padding: 24rpx 0 0 24rpx;
		}

		.label-number {

			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
			margin-left: 24rpx;
			margin-top: 16rpx;
		}

		.label-pharmacopeia {
			margin-left: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
			margin-top: 12rpx;
		}

		.label-afterbody {
			margin-left: 24rpx;
			margin-top: 12rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
		}

	}

	.transaction-data {
		width: 702rpx;
		// height: 280rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 24rpx;

		.transaction-Cells {
			width: 33%;
			box-sizing: border-box;
			// border: 1px solid red;

			.transaction-Data {
				// flex: 1;
				justify-content: center;
				// align-items: center;
				text-align: center;
				// position: absolute;
				.transaction-text {
					width: 2rpx;
					height: 64rpx;
					// background-color: red;
					// position: relative;
					// right: 0;
					// text-align: right;
				}
				.transaction-sex div:nth-child(1) {
					margin-top: 32rpx;
					// margin-bottom: 12rpx;
				}
			}

			

		}

	}
	.preferential-head{
		width: 702rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		// text-align: center;
		margin: 0 auto;
		margin-top: 24rpx;
		.bar-type{
			width: 2rpx;
			height: 64rpx;
			background: #D8D8D8;
			border-radius: 10rpx;
			
			text-align: center;
		}
		.preferential-lable{
			text-align: center;
		}
		.preferential-lable div:nth-child(1){
			
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
		}
		.preferential-lable div:nth-child(2){
			margin-top: 12rpx;
			font-size: 36rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #333333;
			line-height: 42rpx;
		}
	}
</style>