<template>
	<view class="text-center pd-b-px-55">
		<van-sticky>
			<van-nav-bar
					  title="支付成功"
					  left-arrow
					  @click-left="onClickLeft"
			>
				<template #left>
					<van-icon name="arrow-left" size="25" color="#323233" />
				</template>
			</van-nav-bar>
		</van-sticky>
		<div style="margin-top: .2rem"></div>
		<div style="background: #ffffff;height: 10rem;">
			<div style="display: flex;align-items: center;margin-left: 20px">
				<img src="../../static/img/pay01.jpg" alt=""
				     style="vertical-align: middle;width: 95px;height: 100px">
				<div style="text-align: left">
					<div style="white-space: nowrap">支付方式：<span style="color: #ff7f27">支付宝支付</span></div>
					<div>订单金额：<span style="color: #ff7f27">￥{{state.money}}</span></div>
				</div>
			</div>
			<div>
				<van-button type="default"  style="background: #f1f5f8;padding: 0 36px;margin-right: 20px" @click="goto(`/pages/order/orderList?index=0`)">查看订单</van-button>
				<van-button type="success"  style="background: #ff6600;padding: 0 36px" @click="goto(`/pages/index`)">回到首页</van-button>
			</div>
		</div>
		<div style="margin-top: .2rem"></div>
		<div style="background: #ffffff;min-height: 4.2rem;font-size: 13px;text-align: left;padding: .5rem">
			<p>安全提醒</p>
			<p>付款成功后，我们不会以付款异常、卡单、系统升级为由联系您。</p>
			<p style="color: #ff8826;">请勿泄露银行卡号、手机验证码，否则会造成钱款损失。谨防电话诈骗！</p>
		</div>
		<div style="margin-top: .2rem"></div>
		<div style="background: #ffffff;height: 1.6rem;font-size: 13px;text-align: left;padding: .5rem">
			<!--<span style="float: right;font-size: 14px;margin-top: 2px">查看更多</span>-->
			<h2>  为您推荐&nbsp<span style="font-size: 14px;color: #d1d2d3;margin-right: 3px">|&nbsp大牌任你选</span> </h2>
		</div>
		<div style="margin-top: .2rem"></div>
		<van-list :loading="state.good.loading" :finished="state.good.finished" finished-text="没有更多了" offset="10"
			    @load="onGoodLoad">
			<van-grid :center="false" :column-num="2" :gutter="3">
				<van-grid-item class="text-left" v-for="(item, index) in state.good.list" :key="index"
						   @click="goto(`/pages/good/detail?skuId=${item.skuId}&spuId=${item.spuId}`)">
					<van-image class="self_center" width="70%" lazy-load :src="item.mainImg" />
					<van-image class="mg-t-30-m" width="60rpx" lazy-load :src="item.zoneIcon" />
					<text class="text-s ellipsis line_over2 pd-t-10" style="width: 315rpx;height: 32px;margin-bottom:6px">
						{{ item.title }}
					</text>
					<text class="text-ss">{{ item.size }}</text>
					<text class="text-gray text-ss"></text>
					<text class="text-gray text-ss line-through">零售价￥{{ item.productPrice }}</text>
					<text class="text-orange text-ss">优惠价￥
						<text class="text-bold text-l">{{ item.salePrice }}</text>
					</text>
				</van-grid-item>
			</van-grid>
		</van-list>
		<view v-if="state.good.fail" class="text-ss text-gray pd-50" @click="failReset">请求失败，点击重试
			<van-icon name="replay" />
		</view>
	</view>
</template>

<script setup lang="ts">
    import api from "@/api";
    import {onMounted, reactive} from 'vue';
    import toTop from '@/components/tool/toTop.vue';

    const state = reactive({
	  money:uni.getStorageSync("payMoney"),
        skuId: '',
        params: {},
        active: 0,
        good: {
            loading: false,
            finished: false,
            fail: false,
            page: 0,
            list: [] as any
        }
    })
    onMounted(() => {

    });

    function gotoDetails() {
        uni.navigateTo({
            url: `/pages/order/orderDetails`
        });
    }

    function onClickLeft() {
        history.back()
    }

    function goto(url: any) {
        url && uni.navigateTo({url})
    }


    function onGoodLoad() {
        if (state.good.loading || state.good.fail) return
        state.good.loading = true
        ++state.good.page
        api.productList({
            ...state.params,
            sortType: state.good.page,
            pageSize: 20,
            link: uni.getStorageSync("subdomain")
        }).then((data: any) => {
            if (!data) return
            if (!data||!data.hasNextPage){
                state.good.finished = true
            }
            state.good.list.push(...data.list)
        })
            .catch(() => {
                state.good.fail = true
            })
            .finally(() => {
                state.good.loading = false
            })
    }

    function failReset() {
        state.good.page -= 1
        state.good.finished = false
        state.good.fail = false
        onGoodLoad()
    }
</script>

<style lang="scss" scoped>

</style>
