<template>
	<view class="order-page" @scroll="onPageScroll">
		<view class="header-contain">
			<view class="header-main">
				<view class="header">
					<view class="point-icon">积分</view>
					<view class="point">{{infoDetail.points || 0}}</view>
				</view>
			</view>

			<view class="main">
				<view class="tab-header" :class="{'tab-bg-active':tabHeaderIndex === 1}">
					<view class="tab-header-item" v-for="(item,index) in tabHeaderList" :key="index"
						@click="headerTabCk(index,item)">
						<image src="@/static/boxRecrd/tab.png" mode="" class="tab-header-active"
							v-if="tabHeaderIndex === index"></image>
						<view class="tab-header-txt">{{item.label}}</view>
					</view>
				</view>
				<view class="tab">
					<view class="tab-item" :class="{'active':tabIndex === index}" v-for="(item,index) in tabList"
						:key="index" @click="tabCk(index)">
						{{item.label}}
						<view class="tab-active" v-if="tabIndex === index"></view>
						<view class="heng" v-else></view>
					</view>
				</view>
			</view>
		</view>

		<!-- :class="{maxHeight:list.length > 0 && (tabIndex === 0 && scrollTop <= listHeight)}" -->
		<!-- scroll-y="true" ref="scrollView" scroll-with-animation @scrolltolower="scrolltolower" @scroll="handleScroll" -->
		<view class="scroll-list-view">
			<view class="list" v-for="(item,index) in list" :key="index" @click="rowCk(item,index)">
				<image src="@/static/new/address/s.png" mode="" class="select-icon"
					v-if="item.visible && tabIndex === 0"></image>
				<image src="@/static/new/address/no.png" mode="" class="select-icon"
					v-if="!item.visible && tabIndex === 0"></image>
				<view class="item" :class="{recycled:type === 'RECYCLED'}">
					<view class="box-icon">
						<image v-if="item.productCoverResource" :src="item.productCoverResource.url" mode="aspectFit"
							class="shop-icon"></image>
					</view>

					<view class="detail">
						<view class="name">{{item.productAbbreviation}}</view>
						<view class="ponit" v-if="tabIndex === 0" style="min-height: 34rpx;">
							<text>发货截止时间：{{item.shipExpiredTime}}</text>
							<!-- <view>来源：{{sourceObj[item.source]}}</view> -->
						</view>
						<view class="ponit" style="height: 34rpx;" v-else></view>
						<view class="info">
							<view class="price" v-if="tabHeaderIndex === 1 && item.exchange == 1">{{item.recoveryPoint}} 积分</view>
							<view class="price" v-if="tabHeaderIndex === 0">{{item.recoveryPoint}} 积分</view>
							<view class="num"></view>
						</view>
					</view>
				</view>
			</view>
			<view style="padding-top: 200rpx;" v-if="list.length === 0">
				<empty></empty>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0" ref="targetElement">没有更多了～</view>
			<view id="myView" v-if="(total == list.length && list.length > 0) || list.length === 0">
				<view class="shop-title">猜你喜欢</view>
				<view class="shop-list">
					<view class="item" v-for="(item,index) in shopList" :key="index" @click="goDetail(item)">
						<view class="shop">
							<image v-if="item.coverResource" :src="item.coverResource.url" class="shop-img"
								mode="aspectFit"></image>
						</view>
						<view class="name">{{item.abbreviation}}</view>
						<view class="point">
							<image src="@/static/an/point.gif" class="point-icon" mode=""></image>
							{{item.point.mall}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="tabIndex === 0 && list.length > 0 && scrollTop <= listHeight">
			<view class="left" @click="selectAll()" v-if="tabHeaderIndex === 0">
				<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="isAll"></image>
				<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
				全选
			</view>
			<view v-else></view>
			<view class="footer-btn">
				<template v-if="tabHeaderIndex === 1 && exchange == 1">
					<view class="btn" @click.stop="boxRecovery()">兑换</view>
				</template>
				<view class="btn" @click.stop="boxRecovery()" v-if="tabHeaderIndex === 0">兑换</view>
				<view class="btn" @click.stop="deliver()" v-if="isNoExceed">发货</view>
				<view class="btn" @click.stop="handleCustomer()" v-else>联系客服</view>
			</view>
		</view>
		<popup-view v-model="conversionShow" mode="bottom" border-radius="15" zIndex="1000">
			<view class="popup-main">
				<view class="header-dlg">
					<view class="title">确认订单</view>
					<image src="@/static/new/mine/close.png" class="close" mode="" @click="conversionShow = false">
					</image>
				</view>
				<scroll-view scroll-y class="shop">
					<view class="item" v-for="(item,index) in conversionDataList" :key="index">
						<view class="left">
							<image :src="item.productCoverResource.url" class="shop-img" mode=""></image>
						</view>
						<view class="detail">
							<view class="name">{{item.productAbbreviation}}</view>
							<view class="point" style="height: 34rpx;"></view>
							<!-- <view class="point">¥{{item.salePrice}}</view> -->
							<view class="price">
								<view class="value">回收积分：{{item.recoveryPoint}}</view>
								<view class="num">X1</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="ponit">
					<view class="title">兑换积分数</view>
					<view class="value">{{totalPoint}}</view>
				</view>
				<view class="conversion" @click="conversion">确认兑换</view>
			</view>
		</popup-view>
		<!-- 实物发货 -->
		<popup-view v-model="show" mode="bottom" border-radius="15" zIndex="1000">
			<view class="popup-main">
				<view class="address" @click="goAddress">
					<view class="detail" v-if="address.id">
						<view class="address-info">
							<view class="info">
								<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
								</image>
								<view class="name">{{address.receiver}}</view>
								<view class="phone">{{address.phone}}</view>
							</view>
							<view class="address-detail">{{address.province}} {{address.city}} {{address.area}}
								{{address.address}}
							</view>
						</view>

						<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
					</view>
					<view class="detail" v-else>
						<view class="address-info">
							<view class="info">
								<view class="name">选择收货地址，让快递到家~</view>
							</view>
						</view>
						<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
					</view>
				</view>
				<scroll-view scroll-y class="shop">
					<template v-if="previewData">
						<view class="item" v-for="(item,index) in previewData.products" :key="index">
							<view class="left">
								<image v-if="item.coverResource" :src="item.coverResource.url" class="shop-img" mode="">
								</image>
							</view>
							<view class="detail">
								<view class="name">{{item.abbreviation}}</view>
							</view>
						</view>
					</template>

				</scroll-view>
				<view class="other">
					<view class="item">
						<view class="label">商品数量</view>
						<view class="value" v-if="previewData">{{previewData.quantity}}</view>
					</view>

					<view class="item">
						<view class="label">邮费</view>
						<view class="value" v-if="previewData">¥{{Number(previewData.deliveryFee)}}</view>
					</view>
				</view>

				<view class="mains" v-if="payList.length > 0 && previewData && previewData.deliveryFee > 0">
					<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
						<view class="left">
							<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
							{{item.label}}
						</view>
						<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
						<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
					</view>
				</view>
				<view class="agreement" @click="agreementVisible = !agreementVisible">
					<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible">
					</image>
					<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
					我已满18岁，已阅读并同意
					<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
					<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
					<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
					<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
				</view>
				<view class="conversion" @click="submit" v-if="previewData">确认发货 ¥{{Number(previewData.totalAmount)}}
				</view>
			</view>
		</popup-view>
		<!-- 虚拟商品发货 -->
		<popup-view v-model="virtualShow" mode="bottom" border-radius="15" zIndex="1000">
			<view class="popup-main">
				<view class="shop">
					<template v-if="virtualDetail">
						<view class="item">
							<view class="left">
								<image v-if="virtualDetail.productCoverResource" :src="virtualDetail.productCoverResource.url" class="shop-img" mode="">
								</image>
							</view>
							<view class="detail">
								<view class="name">{{virtualDetail.productAbbreviation}}</view>
							</view>
						</view>
					</template>

				</view>
				<view class="other" style="height: 100rpx;" v-if="virtualDetail.deliveryType === 'BIRD_VIRTUAL'">
					<view class="item">
						<view class="label">充值账号</view>
						<input type="text" placeholder="请输入充值账号" class="value text-right" v-model.trim="account">
					</view>
				</view>
				<view class="other" style="height: 100rpx;" v-if="virtualDetail.tips">
					<view class="item">
						<view class="label" style="word-break: break-all;font-size: 24rpx;color: #999;">{{virtualDetail.tips}}</view>
					</view>
				</view>
				<view class="agreement" @click="agreementVisible = !agreementVisible">
					<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible">
					</image>
					<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
					我已满18岁，已阅读并同意
					<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
					<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
					<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
					<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
				</view>
				<view class="conversion" @click="virtualSubmit" v-if="virtualDetail">确认发货
				</view>
			</view>
		</popup-view>
		<!-- 去充值 -->
		<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000">
			<coinDeficitCom @close="closeTop" @sucClose="sucClose"></coinDeficitCom>
		</popup-view>

		<view class="custom-toast" v-if="isTip">
			<view class="toast-txt">支付成功</view>
		</view>

		<!-- 兑换弹框 -->
		<popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="1000">
			<view class="log-out">
				<view class="log-out-tip">是否确认将商品进行兑换？<br />确认后即将商品兑换成<text
						style="color: #E55353;">{{totalPoint}}</text>积分，无法再进行提货。</view>
				<view class="log-out-footer">
					<view class="cancel" @click="logOutvisible = false">取消</view>
					<view class="shu"></view>
					<view class="log-out-submit" @click="submitLogOut">确定</view>
				</view>
			</view>
		</popup-view>
		<!-- 确认发货弹框 -->
		<popup-view v-model="deliverVisible" mode="center" border-radius="15" zIndex="1000">
			<view class="log-out">
				<view class="log-out-tip">单次提取≥{{detail.num}}件商品包邮<template
						v-if="detail.exclude.length > 0">（{{detail.exclude.join(',')}}地区除外）</template>。</view>
				<view class="log-out-footer">
					<view class="cancel" @click="deliverVisible = false">取消</view>
					<view class="shu"></view>
					<view class="log-out-submit" @click="submitDeliver">确定</view>
				</view>
			</view>
		</popup-view>



		<!-- 弹窗 -->
		<view class="dlg" v-if="activityShow" @click="activityClose">
			<view class="activity-main" @click.stop="">
				<image src="@/static/new/xsmh.png" mode="" class="dlg-title"></image>
				<!-- <image src="@/static/new/mryh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'PREFERENTIAL_DAY'"></image>
				<image src="@/static/new/xsmh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'ROOKIE'"></image>
				<image v-if="activityDetail.coverResource" :src="activityDetail.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail"></image> -->
				<image src="" mode="aspectFit" class="activity-img" @click="goActivityDetail"></image>
				<image src="@/static/new/box/hdgm.png" mode="aspectFit" class="now-buy" @click="goActivityPre"></image>
				<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClose"></image>
			</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/boxRecrd"></page-popup>
		<template v-if="isPayDlgVisible">
			<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay">
			</isPayDlgVue>
		</template>
	</view>
</template>

<script>
	import {
		myMixins
	} from "@/mixins/mixins.js";
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	import {
		boxRecordApi,
		boxRecoveryApi,
		recoveryBatchApi,
		deliveryReviewBatchApi,
		deliveryBatchApi,
		orderPaidApi
	} from '@/API/index.js'

	import {
		productTagsApi,
		productApi,

	} from '@/API/product.js'

	import {
		virtualOrderBoxPreviewApi,
		virtualOrderApi,
		virtualOrderPaidApi
	} from '@/API/virtual.js'
	import {
		userInfo,
		userAddress
	} from '@/API/user.js'
	import HeaderCom from '@/pages/components/header.vue'
	import {
		mathAdd,
		mathMul
	} from '@/utils/mathUtils.js'
	import coinDeficitCom from '@/pages/index/components/coinDeficit.vue'
	import {
		carriageGetRule,
		productChannelApi,
		productRecommendChannel
	} from '@/API/shop.js'
	import reportClickFn from '@/utils/report.js'
	import isPayDlgVue from '@/pages/components/isPayDlg.vue'
	export default {
		mixins: [myMixins],
		data() {
			return {
				statusBarHeight,
				tabHeaderList: [{
						label: "实物商品",
						value: 'ENTITY'
					},
					{
						label: "虚拟商品",
						value: 'VIRTUAL'
					}
				],
				tabHeaderIndex: 0,
				tabList: [{
						label: "待使用",
						value: 'TO_BE_USE'
					},
					{
						label: "已回收",
						value: 'RECYCLED'
					}
				],
				tabIndex: 0,
				list: [],
				listIndex: 0,
				type: '',
				page: 1,
				total: 0,
				conversionShow: false,
				conversionDataList: [],
				conversionData: {
					productCoverResource: {
						url: ""
					}
				},
				infoDetail: {},
				isAll: false,
				totalPoint: 0,
				show: false,
				account:'',
				virtualShow: false, //虚拟商品发货
				deliveryTypeObj: {
					NONE: '无',
					WECHAT_CD_KEY: '微信KEY',
					BIRD_VIRTUAL: '琢玉未来虚拟商品发货',
				},
				exchange:0,
				virtualDetail: {
					amount: "",
					deliveryType: "",
					methods: [],
					points: 0,
					price: {},
					productCoverResource: {},
					totalAmount: "",
				}, //虚拟商品发货详情
				address: {},
				deliverList: [],
				previewData: {
					products: [],
					quantity: "",
					deliveryFee: "",
					totalAmount: ""
				},
				quantity: 1,
				productName: '',
				timer: null,
				isTopUp: false,
				isTip: false,
				logOutvisible: false,
				shopList: [],
				shopPage: 1,
				isViewShow: false, //是否在可视区域
				scrollTop: 0,
				listHeight: 0,
				activityShow: false,
				payList: [],
				payType: '',
				deliverVisible: false,
				detail: {
					exclude: []
				},
				isBtnStatus: false, //防止点击多次
				isPayDlgVisible: false,
				agreementVisible: false,
				timers: null,
				isNoExceed: true, //是否有发货按钮
				virtualId:'',
				sourceObj:{
					NORMAL:'盲盒购买', ROOKIE:'新手盲盒', PREFERENTIAL_DAY:'每日优惠',SPECIAL_PRICE:'薅羊毛',ACTIVITY:'活动盲盒',NINE:'九连抽',PERIOD:'周期盲盒'
				  },
			}
		},
		components: {
			HeaderCom,
			coinDeficitCom,
			isPayDlgVue
		},
		// onLoad(opation) {
		// 	this.boxRecord()
		// 	this.getUserInfo()
		// },
		watch: {
			isViewShow() {
				if (this.isViewShow) {
					this.getProduct()
				}
			}
		},
		onShow() {
			this.tabIndex = 0
			if (uni.getStorageSync('box-token')) {
				// this.getAddress()
				// this.getDeliveryReviewBatch()
				// this.getCarriageGetRule()
				// this.isAll = false
				// this.page = 1
				// this.shopPage = 1
				// this.boxRecord()
				// this.getUserInfo()
				this.isAll = false
				this.page = 1
				this.shopPage = 1
				this.boxRecord()
				this.getUserInfo()
			} else {
				this.$api.msg('暂未登录，请先登录')
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/login/login`
					})
				}, 1000)
			}

			uni.$on('backAddressParams', params => {
				if (params.id) {
					console.log("paramsparamsparams：", params)
					this.address = params
					this.getDeliveryReviewBatch()
				}
			});

		},
		mounted() {
			uni.getSystemInfo({
				success: function(res) {
					// 获取tabbar的高度
					let tabBarHeight = res.tabBarHeight;

					// 获取底部安全区域的高度
					let safeAreaBottom = res.safeAreaInsets.bottom;

					console.log('Tabbar Height:', tabBarHeight);
					console.log('Safe Area Bottom:', safeAreaBottom);
				}
			});
			try {
				if (uni.getStorageSync('box-token')) {
					// this.getAddress()
					// this.getDeliveryReviewBatch()
					this.getCarriageGetRule()
					this.isAll = false
					this.page = 1
					this.shopPage = 1
					// this.boxRecord()
					this.getUserInfo()
				} else {
					this.$api.msg('暂未登录，请先登录')
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/login/login`
						})
					}, 1000)
				}
				// uni.$on('backAddressParams', params => {
				// 	if (params.id) {
				// 		console.log("paramsparamsparams：",params)
				// 		this.address = params
				// 		this.getDeliveryReviewBatch()
				// 	}
				// });
				// this.deliverList = JSON.parse(uni.getStorageSync('deliverList'))

			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			onPageScroll(e) {
				// 页面滚动时触发
				console.log('页面滚动', e);
				this.scrollTop = e.scrollTop
			},
			handleCustomer() {
				uni.navigateTo({
					url: `/pages/mine/customer`
				})

			},
			// 用户协议 隐私政策
			agreementCk(type) {
				uni.navigateTo({
					url: `/pages/agreement/${type}`
				})
			},
			updateRemainingTime() {
				const currentTime = Math.floor(Date.now() / 1000);
				this.list.forEach((item, index) => {
					if (item.shipExpiredTime) {
						// let targetTime = ''
						// try{
						// 	new Date(item.shipExpiredTime).getTime() / 1000;
						// }catch(e){
						// 	item.shipExpiredTime = item.shipExpiredTime.replace(/-/g, '/')
						// 	targetTime = new Date(item.shipExpiredTime).getTime() / 1000;
						// 	//TODO handle the exception
						// }
						item.shipExpiredTime = item.shipExpiredTime.replace(/-/g, '/')
						let targetTime = new Date(item.shipExpiredTime).getTime() / 1000;
						// const targetTime = new Date(item.shipExpiredTime).getTime() / 1000;
						// console.log("+++++++++++++=",targetTime)
						const countdown = targetTime - currentTime;
						const secondsPerDay = 86400; // 1天有86400秒
						// 将时间戳除以每天的秒数

						if (isNaN(targetTime)) {
							this.$set(this.list[index], 'remainingTime', ``)
							this.$set(this.list[index], 'exceedType', false)
						} else if (countdown > secondsPerDay) {
							const days = parseInt(countdown / secondsPerDay);
							this.$set(this.list[index], 'remainingTime', `发货截止时间：${days}天`)
							this.$set(this.list[index], 'exceedType', true)
						} else if (countdown <= 0) {
							this.$set(this.list[index], 'remainingTime', `发货截止时间：已过期`)
							// this.$set(this.list[index],'remainingTime','已超时无法提货商品,如有疑问请联系客服')
							this.$set(this.list[index], 'exceedType', false)
						} else {
							const hours = Math.floor(countdown / 3600);
							const minutes = Math.floor((countdown % 3600) / 60);
							const seconds = countdown % 60;
							this.$set(this.list[index], 'remainingTime',
								`发货截止时间：${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`
								)
							this.$set(this.list[index], 'exceedType', true)
						}
					}
				});
				// console.log("+++++++++++++=",this.list)
			},
			startCountdown() {
				this.updateRemainingTime()
				this.timers = setInterval(() => {
					this.updateRemainingTime()
				}, 1000)
			},

			padZero(num) {
				return num.toString().padStart(2, '0');
			},

			goPage(type) {
				uni.navigateTo({
					url: `/pages/agreement/nonage`
				})
			},
			againPay() {
				this.submit()
			},
			isCancelCk() {
				this.isPayDlgVisible = false
			},
			isPayStatus() {
				this.getOrderPaid(this.orderNo, 'click')
			},
			getCarriageGetRule() {
				carriageGetRule().then(res => {
					if (res.code === 200) {
						console.log(res)
						this.detail = res.data
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {

				})
			},
			activityClose() {
				this.activityShow = false
			},
			goActivityPre() {

			},
			// 获取商品
			getProduct(tagId) {
				productRecommendChannel({
					page: this.shopPage,
					size: 10,
					tagId,
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {

						// this.total = res.data.total
						if (this.shopPage > 1) {
							this.shopList = [...this.shopList, ...res.data.content]
						} else {
							this.shopList = res.data.content
						}
					} else {
						this.$api.msg(res.message)
					}
				})
				// productApi({
				// 	page: this.shopPage,
				// 	size: 10,
				// 	tagId,
				// }).then(res => {
				// 	uni.hideLoading()
				// 	if (res.code === 200) {

				// 		// this.total = res.data.total
				// 		if (this.shopPage > 1) {
				// 			this.shopList = [...this.shopList, ...res.data.content]
				// 		} else {
				// 			this.shopList = res.data.content
				// 		}
				// 	} else {
				// 		this.$api.msg(res.message)
				// 	}
				// })
			},

			// 查看详情
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/shop/detail?id=${item.id}`
				})
			},
			handleScroll(event) {
				this.$nextTick(() => {
					this.scrollTop = event.detail.scrollTop
					// console.log('滚动条位置：', this.scrollTop);
					if (this.total == this.list.length && this.list.length > 0) {
						this.isViewShow = true
					}
					// if(this.scrollTop > this.listHeight){

					// }
					// this.isViewShow
					// this.getScrollElementPosition()
				});
				// this.$nextTick(() => {
				// 	uni.createSelectorQuery().in(this).select('.scroll-list-view').boundingClientRect((rect) => {
				// 	        const scrollViewHeight = rect.height;
				// 	        console.log('scroll-view 的高度为:', scrollViewHeight);
				// 	      }).exec();
				// 	// this.checkIfViewIsVisible();
				// })
			},
			// getScrollElementPosition() {
			// 	const query = uni.createSelectorQuery().in(this.$refs.scrollView);
			// 	query.select('.no-data').boundingClientRect((rect) => {
			// 		console.log('元素位置：', rect);
			// 	}).exec();
			// },
			// 检查 View 是否在可视区域
			// checkIfViewIsVisible() {
			// 	const target = document.getElementById('myView');
			// 	if (!target) {
			// 		console.error('元素未找到或尚未渲染完成');
			// 		return;
			// 	}
			// 	const rect = target.getBoundingClientRect();
			// 	const windowHeight = window.innerHeight || document.documentElement.clientHeight;
			// 	if (rect.top >= 0 && rect.bottom <= windowHeight) {
			// 		this.isViewShow = true
			// 		console.log('Div 在可视区域内');
			// 	} else {
			// 		this.isViewShow = false
			// 		console.log('Div 不在可视区域内');
			// 	}

			// },
			// 代币不足
			coinDeficit() {
				this.isTopUp = true
			},
			closeTop() {
				this.isTopUp = false
				this.getUserInfo()
			},
			sucClose() {
				this.isTopUp = false
				this.isTip = true
				this.getUserInfo()
				setTimeout(() => {
					this.isTip = false
				}, 1500)
			},
			// 获取地址列表
			getAddress() {
				uni.showLoading()
				userAddress({
					page: 1,
					size: 10
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						res.data.content.forEach(item => {
							if (item.isDefault === 1) {
								this.address = item
							}
						})
						this.addressList = res.data.content
						this.getDeliveryReviewBatch()
					} else {
						this.$api.msg(res.message)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			goAddress() {
				uni.navigateTo({
					url: `/pages/mine/address?type=select`
				})
			},
			// 是否全选
			selectAll() {
				this.isNoExceed = true
				if (this.isAll) {
					this.list.forEach(item => {
						item.visible = false
					})
				} else {
					this.list.forEach(item => {
						if (!item.exceedType) {
							this.isNoExceed = false
						}
						// if(item.exceedType){
						item.visible = true
						// }

					})
				}
				this.isAll = !this.isAll
			},
			// 获取用户信息
			getUserInfo() {
				userInfo().then(res => {
					if (res.code === 200) {
						this.infoDetail = res.data
						console.log("----------------:", this.infoDetail)
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 点击当前行
			rowCk(item, index) {
				this.exchange = 0
				if (this.tabHeaderIndex === 1) {
					this.list.forEach((items, indexs) => {
						items.visible = false
					});
					this.$set(this.list[index], 'visible', true)
					this.exchange = this.list[index].exchange
					console.log(this.list[index].exceedType)
					this.isNoExceed = this.list[index].exceedType
				} else {
					this.$set(this.list[index], 'visible', !this.list[index].visible)
					let arr = [];
					let allVisible = true;
					this.list.forEach((items, indexs) => {
						if (items.visible) {

							this.listIndex = indexs
							arr.push(items);
						} else {
							allVisible = false;
						}
					});
					console.log(this.list)
					console.log(arr.every(items => items.exceedType === true))
					this.isNoExceed = arr.every(items => items.exceedType === true)
					this.isAll = allVisible;
				}
			},
			//批量发货
			deliverAll() {
				let ids = []
				this.list.forEach(item => {

				})
			},
			//批量回收
			boxRecoveryAll() {},
			goBack() {
				uni.navigateBack()
			},
			boxRecovery() {
				this.conversionDataList = []
				this.totalPoint = 0

				this.list.forEach(item => {
					if (item.visible) {
						this.conversionDataList.push(item)
					}
				})
				console.log(this.conversionDataList)
				this.totalPoint = this.conversionDataList.reduce((acc, item) => acc + item.recoveryPoint, 0);
				if (this.conversionDataList.length === 0) {
					this.$api.msg('请选择物品')
					return
				}
				this.conversionShow = true
			},
			submitLogOut() {
				let ids = []
				this.conversionDataList.forEach(item => {
					ids.push(item.id)
				})
				uni.showLoading()
				recoveryBatchApi({
					ids: ids
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.logOutvisible = false
						this.isAll = false
						this.page = 1
						this.boxRecord()
						this.conversionShow = false
						this.$api.msg(res.message)
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			conversion() {
				if (this.isBtnStatus) {
					return
				}
				this.isBtnStatus = true
				setTimeout(() => {
					this.isBtnStatus = false;
				}, 2000);
				this.logOutvisible = true
				// let ids = []
				// this.conversionDataList.forEach(item => {
				// 	ids.push(item.id)
				// })

				// uni.showLoading()
				// recoveryBatchApi({ids:ids}).then(res => {
				// 	uni.hideLoading()
				// 	if (res.code === 200) {
				// 		this.isAll = false
				// 		this.page = 1
				// 		this.boxRecord()
				// 		this.conversionShow = false
				// 		this.$api.msg(res.message)
				// 	} else {
				// 		this.$api.msg(res.message)
				// 	}
				// }).catch(err => {
				// 	uni.hideLoading()
				// })



				// boxRecoveryApi(this.conversionData).then(res => {
				// 	uni.hideLoading()
				// 	if (res.code === 200) {
				// 		this.boxRecord()
				// 		this.conversionShow = false
				// 		this.$api.msg(res.message)
				// 	} else {
				// 		this.$api.msg(res.message)
				// 	}
				// }).catch(err => {
				// 	uni.hideLoading()
				// })
			},
			boxRecord() {
				uni.showLoading()
				boxRecordApi({
					page: this.page,
					size: 10,
					status: this.tabList[this.tabIndex].value,
					productType: this.tabHeaderList[this.tabHeaderIndex].value
				}).then(res => {
					uni.hideLoading()
					this.total = res.data.total
					res.data.content.forEach(item => {
						item['visible'] = false
					})
					this.getUserInfo()
					if (this.page > 1) {
						this.list = [...this.list, ...res.data.content]
					} else {
						this.list = res.data.content
					}
					this.startCountdown()
					this.listHeight = mathMul(this.total, 100)
					this.listHeight = mathAdd(this.listHeight, 50)

					console.log(this.listHeight)
					this.$nextTick(() => {
						if (this.total == this.list.length && this.list.length > 0) {
							this.isViewShow = true
						}
					})
					if (this.list.length === 0 || this.total == this.list.length) {
						this.getProduct()
					}
					// this.$nextTick(() => {
					// 	this.checkIfViewIsVisible();
					// })
				}).catch(err => {
					uni.hideLoading()
				})
			},
			headerTabCk(index, item) {
				this.isNoExceed = true
				this.tabHeaderIndex = index
				this.list = []
				this.shopList = []
				this.shopPage = 1
				this.isViewShow = false
				this.page = 1
				this.tabIndex = 0
				this.type = this.tabList[this.tabIndex].value
				this.boxRecord()
			},
			tabCk(index) {
				this.list = []
				this.shopList = []
				this.shopPage = 1
				this.isViewShow = false
				this.page = 1
				this.tabIndex = index
				this.type = this.tabList[this.tabIndex].value
				this.boxRecord()
			},
			scrolltolower() {
				if (this.total == this.list.length) {
					this.shopPage += 1
					this.getProduct()
				} else {
					this.page += 1
					this.boxRecord()
				}
			},
			deliver() {
				this.account = ''
				this.deliverList = []
				let arr = []
				this.virtualId = ''
				this.list.forEach(item => {
					if (item.visible) {
						arr.push(item.id)
					}
				})
				if (arr.length === 0) {
					this.$api.msg('请选择物品')
					return
				}
				this.deliverList = arr
				if (this.tabHeaderIndex === 1) {
					// 虚拟商品发货
					virtualOrderBoxPreviewApi({
						boxRecordId: arr[0]
					}).then(res => {
						console.log(res)
						if (res.code === 200) {
							this.virtualId = arr[0]
							this.virtualDetail = res.data


							this.virtualShow = true
						} else {
							this.$api.msg(res.message)
						}
					})
				} else {
					this.deliverVisible = true

					// 物品预览点击数埋点
					reportClickFn('box_record_review_clk')
					console.log(this.deliverList)
				}

				// this.getDeliveryReviewBatch()

				// uni.setStorageSync('deliverList',JSON.stringify(arr))
				// uni.navigateTo({
				// 	url: `/pages/mine/boxConfirm`
				// })
				// uni.navigateTo({
				// 	url:`/pages/mine/boxConfirm?id=${item.id}&quantity=1`
				// })
			},
			submitDeliver() {
				this.getAddress()
				// this.getDeliveryReviewBatch()
			},
			getDeliveryReviewBatch() {
				uni.showLoading()
				deliveryReviewBatchApi({
					boxRecordIds: this.deliverList,
					userAddressId: this.address.id ? this.address.id : ''
				}).then(res => {
					uni.hideLoading()
					// 物品预览数埋点
					reportClickFn('box_record_review')
					if (res.code === 200) {
						this.previewData = res.data
						this.quantity = this.previewData.quantity
						this.productName = ''
						if (this.previewData.products) {
							this.previewData.products.forEach(item => {
								this.productName += `${item.abbreviation}、`
							})
						}


						this.payList = []
						this.previewData.methods.forEach(item => {
							let objToAdd = null;
							if (item === 'ALIPAY') {
								objToAdd = {
									label: '支付宝支付',
									type: 'ALIPAY',
									visible: false,
									height: '30rpx',
									width: '30rpx',
									img: '../../static/new/pay/zfb.png',
								};
							} else if (item === 'WECHAT') {
								objToAdd = {
									label: '微信支付',
									type: 'WECHAT',
									visible: false,
									width: '34rpx',
									height: '29rpx',
									img: '../../static/new/pay/wx.png',
								};
							} else if (item === 'POINTS') {
								objToAdd = {
									label: "积分支付",
									type: 'POINTS',
									visible: false,
									img: '../../static/an/point.gif',
									width: '30rpx',
									height: '31rpx'
								};
							} else if (item === 'NONE') {
								objToAdd = {
									label: "无需支付",
									type: 'NONE',
									visible: false,
									img: '',
									width: '32rpx',
									height: '34rpx'
								};
							} else if (item === 'COIN') {
								objToAdd = {
									label: "代币支付",
									type: 'COIN',
									visible: false,
									img: '../../static/an/point.gif',
									width: '32rpx',
									height: '34rpx'
								};
							}

							// 只有在objToAdd被赋值的情况下才添加到payList
							if (objToAdd) {
								if (objToAdd.type === 'ALIPAY') {
									// 如果是WECHAT类型，则先添加到数组第一位
									this.payList.unshift(objToAdd);
								} else {
									// 其他类型添加到数组末尾
									this.payList.push(objToAdd);
								}
							}
						});
						this.payList[0].visible = true
						console.log("this.payList[0].type:", this.payList)
						this.payType = this.payList[0].type
						this.deliverVisible = false
						this.show = true

						// if(this.previewData.methods){
						// 	this.previewData.methods.forEach(item => {
						// 		if(item === 'ALIPAY'){
						// 			this.payList.push({label:"支付宝支付",type:'ALIPAY',visible:false,img:'../../static/index/zfb.png',width:'30rpx',height:'30rpx'})
						// 		}else if(item === 'WECHAT'){
						// 			this.payList.push({label:"微信支付",type:'WECHAT',visible:false,img:'../../static/index/wx.png',width:'34rpx',height:'29rpx'})
						// 		}else if(item === 'POINTS'){
						// 			this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/mine/jf.png',width:'30rpx',height:'31rpx'})
						// 		}else if(item === 'NONE'){
						// 			this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
						// 		}
						// 	})
						// 	this.payList[0].visible = true
						// 	this.payType = this.payList[0].type
						// }
						// this.channelGet()
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},

			// 切换支付方式
			payChange(index, item) {
				this.payList.forEach((v, i) => {
					v.visible = false;
				})
				this.payType = item.type
				this.payList[index].visible = !this.payList[index].visible
				// this.payinfoUrl = ''
			},
			virtualSubmit(){
				if (!this.agreementVisible) {
					this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
					return
				}
				clearInterval(this.timer)
				this.timer = null
				if (this.isBtnStatus) {
					return
				}
				this.isBtnStatus = true
				setTimeout(() => {
					this.isBtnStatus = false;
				}, 2000);
				
				if(this.virtualDetail.deliveryType === 'BIRD_VIRTUAL' && !this.account){
					this.$api.msg('请输入充值账号')
					return
				}
				
				let data = {
					boxRecordId: this.virtualId
				}
				if(this.account){
					data['account'] = this.account.replace(/\s+/g, '')
				}
				// if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.account))) {
				// 	this.$api.msg('请输入正确的手机号');
				// 	return;
				// }
				uni.showLoading()
				virtualOrderApi(data).then(res => {
					console.log(res)
					uni.hideLoading()
					if(res.code === 200){
						this.virtualShow = false
						uni.navigateTo({
							url: `/pages/mine/payVirtualSuccess?no=${res.data.no}&type=record&productName=${this.virtualDetail.productAbbreviation}`
						})
						// /pages/shop/payVirtualSuccess?no=3240909621710106497&type=record&quantity=1&productName=颐电%20车载重力手机支架%20MT-CZ027、&price=3.0
						// uni.navigateTo({
						// 	url: `/pages/mine/payVirtualSuccess?no=${no}&type=record&quantity=${this.quantity}&productName=${this.productName}&price=${this.previewData.totalAmount}`
						// })
						
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			submit() {
				if (!this.agreementVisible) {
					this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
					return
				}
				clearInterval(this.timer)
				this.timer = null
				if (this.isBtnStatus) {
					return
				}
				this.isBtnStatus = true
				setTimeout(() => {
					this.isBtnStatus = false;
				}, 2000);
				if (JSON.stringify(this.address) === '{}') {
					this.$api.msg('请选择地址')
					return
				}
				let data = {
					userAddressId: this.address.id,
					boxRecordIdList: this.deliverList,
					method: this.payType
				}
				uni.showLoading()
				deliveryBatchApi(data).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						if (this.previewData.deliveryFee > 0) {
							if (res.data.payParams.payinfo) {
								window.location.href = res.data.payParams.payinfo
							}

						}
						this.orderNo = res.data.no
						this.isPayDlgVisible = true
						this.getOrderPaid(res.data.no)
						let clearTime = 0
						this.timer = setInterval(() => {
							this.getOrderPaid(res.data.no)
							clearTime += 3
							if (clearTime == 30) {
								uni.hideLoading()
								clearInterval(this.timer)
								this.timer = null
								// this.$api.msg("未查询到支付结果")
							}
						}, 3000);
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					// uni.hideLoading()
				})

			},

			getOrderPaid(no, types) {
				orderPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						this.$api.msg('支付成功')
						this.isPayDlgVisible = false
						this.show = false
						uni.navigateTo({
							url: `/pages/shop/paySuccess?no=${no}&type=record&quantity=${this.quantity}&productName=${this.productName}&price=${this.previewData.totalAmount}`
						})
						uni.hideLoading()
					} else {
						if (types === 'click') {
							this.$api.msg("未查询到支付结果")
						}

					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
			// againProduct(item){
			// 	uni.navigateTo({
			// 		url:`/pages/product/detail?id=${item.productId}`
			// 	})
			// }
		},
		onReachBottom() {
			if (this.total == this.list.length) {
				this.shopPage += 1
				this.getProduct()
			} else {
				this.page += 1
				this.boxRecord()
			}
		},
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.timer);
		},
		onHide() {
			console.log("--------========")
			clearInterval(this.timers);
			this.timers = null

		}
	}
</script>
<style lang="scss" scoped>
	page {
		// background-color: #F5F5F5;
	}

	.order-page {
		background-image: url('@/static/new/mine/bg.jpeg');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		padding-top: 420rpx;

		// height: 100vh;
		// height: calc(100% - 100rpx);
		//height: 100%; /* 使容器的高度铺满整个屏幕 */
		// height: 100vh;
		// padding: 30rpx 0rpx 32rpx 0rpx;
		.header-contain {
			background-image: url('@/static/new/mine/bg.png');
			background-size: 100%;
			background-repeat: no-repeat;
			height: 410rpx;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;

			.header-main {
				box-sizing: border-box;
				height: 250rpx;
				padding-top: 30rpx;

				.header {
					margin: 0 auto;
					background-image: url('@/static/new/mine/header.png');
					background-size: 100%;
					background-repeat: no-repeat;
					width: 684rpx;
					height: 204rpx;
					padding: 40rpx 44rpx;

					.point-icon {
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
					}

					.point {
						font-size: 64rpx;
						color: #000000;
						margin-top: 10rpx;
					}
				}
			}

			.main {
				height: 160rpx;

				.tab-header {
					width: 100%;
					height: 96rpx;
					background-image: url('@/static/boxRecrd/bg2.png');
					background-size: 100%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;

					.tab-header-item {
						width: 50%;
						height: 96rpx;
						position: relative;
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						text-align: center;
						padding-top: 24rpx;

						.tab-header-txt {
							position: relative;
							z-index: 4;
						}

						.tab-header-active {
							position: absolute;
							width: 104rpx;
							height: 29rpx;
							top: 41rpx;
							left: 126rpx;
							z-index: 1;
						}
					}

				}

				.tab-bg-active {
					background-image: url('@/static/boxRecrd/bg1.png');
				}

				.tab {
					height: 66rpx;
					display: flex;
					// align-items: center;
					background-image: url('@/static/boxRecrd/bg.png');
					background-size: 100%;
					background-repeat: no-repeat;
					background-color: #fff;

					.tab-item {
						font-size: 25rpx;
						color: #000000;
						width: 50%;
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						.tab-active {
							width: 67rpx;
							height: 4rpx;
							background-image: url('@/static/boxRecrd/child-tab.png');
							background-size: 100%;
							background-repeat: no-repeat;
						}

						.heng {
							width: 67rpx;
							height: 4rpx;
						}
					}

					.active {
						// font-weight: 800;
						// font-size: 28rpx;
						// color: #000000;
					}
				}
			}
		}


		.scroll-list-view {
			// flex: 1;
			// height: calc(100vh - 510rpx);
			// height: 924rpx;
			// height: calc(100vh - 410rpx);
			background-image: url('@/static/boxRecrd/bg.png');
			background-color: #fbfbfb;
			background-size: 100%;
			background-repeat: no-repeat;
			padding: 0 32rpx;

			.list {
				display: flex;
				align-items: center;


				.select-icon {
					width: 32rpx;
					height: 32rpx;
				}

				.item {
					display: flex;
					align-items: center;
					width: 630rpx;
					height: 208rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					margin-bottom: 24rpx;
					margin-left: 24rpx;
					padding-left: 24rpx;

					.box-icon {
						width: 160rpx;
						height: 160rpx;
						border-radius: 0 24rpx 24rpx 0;
						background-image: url('@/static/new/shop-bg.png');
						background-size: contain;
						display: flex;
						align-items: center;
						justify-content: center;

						.shop-icon {
							width: 142rpx;
							height: 132rpx;
						}
					}

					.detail {
						margin-left: 24rpx;
						width: 388rpx;

						.name {
							width: 388rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}

						.ponit {
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
							margin-top: 8rpx;
						}

						.info {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 26rpx;

							.price {
								font-weight: bold;
								font-size: 32rpx;
								color: #000000;
							}

							.num {
								font-weight: 500;
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}

				.recycled {
					width: 686rpx;
					margin-left: 0;
				}
			}

			#myView {

				// border: 1px solid red;
				.shop-title {
					padding: 20rpx 0;
					font-size: 32rpx;
					font-weight: bold;
					color: #000;
				}

				.shop-list {
					display: grid;
					gap: 22rpx;
					grid-template-rows: 1fr;
					margin: 0px auto;
					grid-template-columns: repeat(2, 1fr);
					// padding: 24rpx;
					border-radius: 8rpx;

					.item {
						width: 340rpx;
						// height: 436rpx;
						padding-bottom: 12rpx;
						background-color: #fff;

						.shop {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 340rpx;
							height: 240rpx;
							background-image: url('@/static/new/card-shop.png');
							background-repeat: no-repeat;
							background-size: 100%;
							border-radius: 8rpx 8rpx 0px 0px;

							.shop-img {
								// width: 192rpx;
								height: 236rpx;
							}
						}

						.name {
							width: 304rpx;
							height: 80rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 28rpx;
							color: #000000;
							margin: 16rpx 0 0 16rpx;
						}

						.point {
							margin: 8rpx 0 0 16rpx;
							display: flex;
							align-items: center;
							font-weight: 800;
							font-size: 28rpx;
							color: #000000;

							.point-icon {
								margin-right: 8rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}

						.price {
							margin-left: 16rpx;
							height: 40rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #999999;
							display: flex;
							align-items: center;
							text-decoration: line-through;
						}
					}
				}
			}
		}

		.maxHeight {
			height: calc(100vh - 636rpx);
		}

		.footer {
			width: 750rpx;
			height: 144rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 150rpx;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;

			.left {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;

				.select-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}

			.footer-btn {
				display: flex;
				align-items: center;

				.btn {
					margin-left: 15rpx;
					width: 200rpx;
					height: 96rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx solid #EBEBEB;
					font-weight: 500;
					font-size: 32rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.popup-main {
			padding: 0 32rpx 32rpx 32rpx;

			.address {
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 24rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.detail {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.address-info {
						.info {
							display: flex;
							align-items: center;

							.address-icon {
								width: 30rpx;
								height: 40rpx;
								margin-right: 10rpx;
							}

							.name {
								font-weight: 800;
								font-size: 32rpx;
								color: #000000;
								// max-width: 250rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.phone {
								font-weight: 500;
								font-size: 24rpx;
								color: #666666;
								margin-left: 8rpx;
							}
						}

						.address-detail {
							width: 600rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
							margin-top: 12rpx;
						}
					}

					.arr-icon {
						width: 20rpx;
						height: 30rpx;
					}

				}

				.edit-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.header-dlg {
				width: 100%;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}

				.close {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.shop {
				max-height: 410rpx;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						width: 160rpx;
						height: 160rpx;
						background: linear-gradient(180deg, rgba(155, 180, 204, 0) 0%, #9BB4CC 100%), #FFFFFF, #F5F7FA;
						border-radius: 16px 16px 16px 16px;
						border: 2px solid #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;

						.shop-img {
							width: 142rpx;
							height: 132rpx;
						}
					}

					.detail {
						margin-left: 24rpx;

						.name {
							width: 480rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}

						.point {
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
							margin-top: 8rpx;
						}

						.price {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 14rpx;

							.value {
								font-weight: 800;
								font-size: 32rpx;
								color: #000000;
							}

							.num {
								font-weight: 500;
								font-size: 28rpx;
								color: #000000;
							}
						}
					}
				}

			}

			.ponit {
				margin-top: 24rpx;
				width: 686rpx;
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				background-image: url('@/static/new/mine/ts.png');
				background-size: 100%;
				background-repeat: no-repeat;

				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
				}

				.value {
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}
			}

			.conversion {
				margin-top: 28rpx;
				width: 686rpx;
				height: 96rpx;
				background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 16rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.other {
			margin-top: 24rpx;
			height: 192rpx;
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 8rpx;

			.item {
				height: 96rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				// padding: 0 24rpx;
				.label {
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
				}

				.value {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
				.text-right{
					text-align: right;
				}
			}
		}

		.custom-toast {
			position: fixed;
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999999;

			.toast-txt {
				z-index: 999999;
				border-radius: 6rpx;
				padding: 6rpx 26rpx;
				background-color: rgba(0, 0, 0, 0.8);
				color: #fff;
				font-size: 28rpx;
			}
		}

		.log-out {
			width: 590rpx;
			height: 300rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.log-out-tip {
				// display: flex;
				// align-items: center;
				height: 200rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.85);
				// line-height: 200rpx;
				text-align: center;
				padding: 44rpx 30rpx 0 30rpx;
			}

			.log-out-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 2rpx solid rgba(0, 0, 0, 0.06);
				height: 100rpx;

				.cancel {
					width: 294rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					text-align: center;
					border-right: 1px solid rgba(0, 0, 0, 0.06);
				}

				.log-out-submit {
					width: 294rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #E55353;
					text-align: center;
				}
			}
		}
	}

	.dlg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;

		.activity-main {
			flex-direction: column;
			width: 480rpx;
			height: 608rpx;
			background-image: url('@/static/new/box/hdtc.png');
			background-repeat: no-repeat;
			background-size: 100%;

			.dlg-title {
				display: block;
				margin: 0 auto;
				width: 148rpx;
				height: 52rpx;
			}

			.activity-img {
				width: 448rpx;
				height: 440rpx;
				border-radius: 20rpx;
				display: block;
				margin: 20rpx auto;
				z-index: 2;
			}

			.now-buy {
				width: 348rpx;
				// height: 120rpx;
				display: block;
				margin: -120rpx auto 0 auto;
				z-index: 1;
			}

			.dlg-close-img {
				display: block;
				width: 64rpx;
				height: 64rpx;
				z-index: 9999;
				margin: -120rpx auto 0 auto;
			}
		}
	}

	.mains {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-bottom: 24rpx;

		// margin-left: 32rpx;
		.pay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 104rpx;
			padding: 0 24rpx;


			.left {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;

				.pay-icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}

			.select-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.agreement {
		// margin: 40rpx;
		width: 670rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 46rpx;

		.agreement-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
			vertical-align: middle;
		}

		.agreement-color {
			color: #0080FF;
		}
	}
</style>