<template>
	<view style="width:100vw;height:100vh;" class="column">
		<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" class="col" style="height: 1px;width: 100%;">
			<view class="userStyle">
				<view class="headStatus" v-if="scrollTop > 50" :style="{
					zIndex: scrollTop < 10 ? 'unset' : 2,
					opacity: scrollTop < 10 ? '100' : scrollTop,
				}">
					<view class="title">{{ pageTitle }}</view>
				</view>
				<view class="userBox" style="height:100vh">
					<happasHeader :user_info="user_info" :b2b_user_info="b2b_user_info" @login="openAuth"></happasHeader>
					<view style="padding: 0 32rpx;width: 100vw;height: 1px;flex: 1;">
                        <view class="userMyOrderBox column">
                            <view class="row-sb-n" style="padding: 20rpx 0;">
                                <view>明细</view>
                                <view class="row">
                                    <text>2025年</text>
                                    <u-icon name="arrow-down" size="28" color="#000"></u-icon>
                                </view>
                                <view class="row">
                                    <text>3月</text>
                                    <u-icon name="arrow-down" size="28" color="#000"></u-icon>
                                </view>
                            </view>
                            <scroll-view :scroll-y="true" class="col" style="height: 1px;flex: 1; width: 100%;">
                                <view class="userHeadPListBox">
                                    <view class="userHeadPList row" v-for="(item,index) in 10">
                                        <view class="userHeadPListL">
                                            <image mode="scaleToFill" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638774847991690497.png"/>
                                            <text>共4件</text>
                                        </view>
                                        <view class="userHeadPListA col column">
                                            <view class="userHeadPListATitel">幸福存折返佣</view>
                                            <view class="userHeadPListATime">2025-02-08 15:27</view>
                                        </view>
                                        <view class="userHeadPListR">
                                            +¥30
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                        
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import happasHeader from "./components/happasHeader.vue";
	export default {
		components: {
			happasHeader,
		},
		data() {
			return {
				pageTitle: "幸福存折",
				scrollTop: 0,
				showAuth: false,
				b2b_user_info: {},
				mall_UserInfo: {},
				u: {},
				user_info: {},
				shopBasics: {},
				PointNum: 0,
			};
		},
		onLoad() {
			this.b2b_user_info = uni.getStorageSync('b2b_user');
			this.mall_UserInfo = uni.getStorageSync("mall_UserInfo");
			this.showAuth = !this.mall_UserInfo || !this.b2b_user_info;
		},
		onShow() {
			this.userCenterinfo(2);
		},
		methods: {
			goDetails(item) {
				return
				let url = null
				let msg = null
				// #ifdef MP-DI
					msg = `OrderNo=${item.orderNo}`
					if(item.goodsType>0&&item.goodsType<4) url = `jiuzhai/jz_SureOrder?` //线路
					else if(item.goodsType>3&&item.goodsType<8){//景点门票
					}else if(item.goodsType>7&&item.goodsType<12){//酒店住宿
					}else if(item.goodsType>11&&item.goodsType<15){//目的地用车
					}else if(item.goodsType==15) url = `visa/visa_SureOrder?`//签证  
					else if(item.goodsType==16)url = `airTicket/airTicketOrderDetail?`//机票
				// #endif
				// #ifdef MP-AG
					msg = `orderId=${item.erpOrderId}`
					if(item.goodsType==2) url = `jiuzhai/jz_SureOrder?`//线路
					else if(item.goodsType==4){//景点门票
					}else if(item.goodsType==3){//酒店住宿
					}else if(item.goodsType==5){//目的地用车
					}else if(item.goodsType==6) url = `visa/visa_SureOrder?`//签证  
					else if(item.goodsType==1){//机票
						url = `airTicket/airTicketOrderDetail?`
						msg = `id=${item.erpOrderId}`
					}
				// #endif
				if(url) {
					let path = `/pages/${url}${msg}`
					uni.navigateTo({
						url: path,
					});
				}
			},
			openAuth() {
				this.showAuth = true;
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			goUrl(url) {
				uni.navigateTo({ url });
			},
			//获取菜单配置
			userCenterinfo(type = 1) {
				uni.showNavigationBarLoading();
				this.request2({
						url: "/api/Mall/GetUserCenter",
						data: {},
					},
					(res) => {
						uni.hideNavigationBarLoading();
						this.user_info = res.data.user_info;
						if (this.mall_UserInfo && type == 1) {
							// this.getLogin()
						}
					}
				);
				let u = uni.getStorageSync("mall_UserInfo");
				if (u && type == 1) {
					this.getMicroShopBasics();
				}
			},
			getMicroShopBasics() {
				this.request2({
						url: "/api/AppletUser/GetMicroShopBasics",
						data: {},
					},
					(res) => {
						this.shopBasics = res.data;
					}
				)
			},
			reloadUserinfo() {
				this.b2b_user_info = uni.getStorageSync('b2b_user');
				this.userCenterinfo();
				this.u = this.user_info;
				this.mall_UserInfo = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo") : {};
				this.getUserPoint();
			},
			getUserPoint() {
				this.request2({
						url: "/api/AppletPoint/GetAppletUserPointDetailPageList",
						data: {
							pageIndex: 1,
							pageSize: 10,
							Type: 0
						},
					},
					(res) => {
						this.PointNum = res.data.pageData.PointNum;
					}
				);
			},
		}
	};
</script>

<style>
	@import url('../../asset/css/flex.css');
	.row-sbas-n {
		justify-content: space-between;
	}
	.relative {
		position: relative;
	}

	.userStyle .userBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f3f4f6;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.order_bar_list {
		padding: 22rpx 55rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.order_bar_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		position: relative;
	}

	.badge {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		padding: 0 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		background: #FF3166;
		color: #fff;
		min-width: 28rpx;
		height: 28rpx;
		border-radius: 14rpx;
	}

	.headStatus {
		position: fixed;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background-image: linear-gradient(to right, #e6b865, #ebb45e);
	}

	.headStatus .title {
		font-size: 18px;
		color: #fff;
		flex: 1;
		width: 1px;
		line-height: 34px;
		text-align: center;
	}
	.userMyOrder {
		background: #FFF;
		border-radius: 20rpx;
		padding: 33rpx 0 22rpx 0;
	}
	.userMyOrderTitle {
		padding: 23rpx 31rpx 0 31rpx;
	}
	.userMyOrderTitL {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
	}
	.userMyOrderTitR {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #B2B3B3;
		align-items: center;
	}
	.userMyOrderTitRIght {
		margin-left: 11rpx;
		transform: rotate(90deg);
	}

	.orderProductBox {
		padding: 0 20rpx;
	}
	.orderProduct {
		width: 648rpx;
		height: 132rpx;
		background: #F7F7F7;
		border-radius: 18rpx;
		padding: 21rpx 20rpx;
	}
	.orderProductL {
		width: 91rpx;
		height: 88rpx;
		border-radius: 14rpx;
		overflow: hidden;
		margin-right: 18rpx;
	}
	.orderProductR_state {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #080A09;
		padding-top: 5rpx;
	}
	.orderProductR_text {
		width: 100%;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8C8C8C;
		padding-top: 4rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
    .userMyOrderBox{
        background: #FFFFFF;
        height: 100%;
        overflow: hidden;
        border-radius: 20rpx;
        padding: 25rpx 34rpx 45rpx 34rpx;
    }
    .userHeadPList{
        padding: 20rpx 0;
    }
    .userHeadPListL{
        width: 91rpx;
        height: 88rpx;
        border-radius: 14rpx;
        overflow: hidden;
        position: relative;
    }
    .userHeadPListL image{
        width: 91rpx;
        height: 88rpx;
        display: block;
    }
    .userHeadPListL text{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: rgb(178, 179, 179,.8);
        border-radius: 0rpx 0rpx 14rpx 14rpx;
        color: #fff;
        font-size: 20rpx;
        padding: 5rpx 0;
        text-align: center;
    }
    .userHeadPListA{
        margin-left: 29rpx;
        margin-right: 20rpx;
    }
    .userHeadPListATitel{
        font-weight: bold;
        font-size: 28rpx;
        color: #080A09;
        margin-top: 5rpx;
    }
    .userHeadPListATime{
        font-weight: 500;
        font-size: 24rpx;
        color: #8C8C8C;
        margin-top: 18rpx;
    }
    .userHeadPListR{
        font-weight: bold;
        font-size: 28rpx;
        color: #B99846;
    }
</style>