<template>
	<view class="pay-success mg-lr-24">
		<view class="pay-status u-f u-f-aic u-f-jcc mg-bot-26">
			<view class="u-f u-f-fdc u-f-jcc u-f-aic">
				<image style="height: 120rpx;width:120rpx;" src="../.././static/common/pay_success.png" class="mg-bot-26"></image>
				<text class="fs28 light-black fw400">你已支付成功</text>
			</view>
		</view>
		
		<view class="white-bg-wrap">
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
				<text class="light-gray">联系人</text>
				<text class="light-black">{{orderInfo.personChargeName}}</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
				<text class="light-gray">手机号</text>
				<text class="light-black">{{orderInfo.personChargePhone}}</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs28">
				<text class="light-gray">门店信息</text>
				<text class="light-black">{{orderInfo.storeName}}</text>
			</view>
		</view>
		
		<view class="operte-btn u-f u-f-aic u-f-jcsa">
			<text class="default-line-btn" @click="goToOrderCenter">查看订单</text>
			<text class="main-linegrident-btn" @click="backToIndex">返回首页</text>
		</view>
		
		<!-- 精品推荐开始 -->
		<view class="good-recomend">
			<view class="gr-title u-f u-f-aic u-f-jcc">
				<view class="left-line mg-right-16"></view>
				<view class="fw400 fs32 mg-right-16">商品推荐</view>
				<view class="right-line"></view>
			</view>
			<view class="product-list u-f u-f-fww">
				<view class="product-wrap u-f u-f-aic u-f-jcsb u-f-fww" v-for="item in goodsList" :key="index" @click="goPrductDetail(item.id)">
					<view class="product-card u-f u-f-fdc">
						<view class="pc-image u-f u-f-jcc u-f-aic">
							<image style="width: 100%;height: 100%" :mode="'aspectFit'" :src="item.goodsImage" />
						</view>
						<view class="pc-desc fw400 fs28 ellipsis goodsNameTwoLine">{{item.goodsName}}</view>
						<view class="pc-price">
							<text class="fs24">￥</text>
							<text class="fs28">{{item.goodsPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 精品推荐结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo:{},
				goodsList:[],
				pageNum: 1,
				total: 0,
			}
		},
		onLoad(options) {
			console.log(options);
			if(options.orderInfo){
				let data = JSON.parse(decodeURIComponent(options.orderInfo))
				this.orderInfo = options.orderInfo ? JSON.parse(decodeURIComponent(options.orderInfo)) : {}
			}
			this.getGoodslist()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.getGoodslist()
		},
		onReachBottom() {
			console.log(this.total, this.list.length);
			if (this.total > this.list.length) {
				this.pageNum = this.pageNum + 1
				this.getGoodslist(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			backToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goToOrderCenter() {
				console.log("goToOrderCenter")
				uni.navigateTo({
					url: '/pages/order-center/order-center'
				})
			},
			getGoodslist(flag) {
				this.$http.get("/api/client/wx/pay/selectedProducts", {
					pageNum: this.pageNum,
					pageSize: '20',
				}).then(res => {
					console.log(res.data.data)
					console.log(res.data.data.rows)
					this.goodsList = !flag ? res.data.data.rows : this.data.data.goodsList.concat(res.data.data.rows)
					this.total = res.data.data.total
				})
			},
			goPrductDetail(goodsId) {
				this.User.navigate({
					url: "/pages/good-product-detail/good-product-detail?id=" + goodsId
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.pay-success {
		.pay-status {
			&>view {
				padding: 80rpx 0 20rpx 0;
			}
		}
	}

	.default-line-btn {
		width: calc(50% - 16rpx);
		font-size: 28rpx;
		text-align: center;
		padding: 22rpx 0;
		background: #FFFFFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		border: 1rpx solid #707070;
	}
	
	.main-linegrident-btn {
		width: calc(50% - 16rpx);
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		padding: 22rpx 0;
		background: linear-gradient( 90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}
	
	.operte-btn {
		margin-top: 72rpx;
	}
	
	.good-recomend {
		margin-top: 70rpx;
		.gr-title {
			margin-bottom: 26rpx;
			.left-line {
				width: 165rpx;
				height: 4rpx;
				// background: url(../.././static/common/left-line.png) no-repeat center center;
			}
			.center-title {
				color: #FF4502;
				margin-right: 16rpx;
			}
			.right-line {
				width: 165rpx;
				height: 4rpx;
				// background: url(../.././static/commonright-line.png) no-repeat center center;
				margin-left: 16rpx;
			}
			
		}
		.product-list {
			margin: 0 24rpx;
			.product-wrap {
				width: calc(50% - 22rpx);
				margin-bottom: 20rpx;
				margin-right: 22rpx;
				&:nth-child(2n) {
					margin-right: 0;
				}
				.product-card {
					flex: 1;
					border-radius: 18rpx;
					background-color: #ffffff;
					.pc-image {
						width: 100%;
						height: 340rpx;
					}
					.pc-desc {
						color: #333333;
						height: 74rpx;
					}
					.pc-price {
						margin-top: 10rpx;
						color: #FF4502;
					}
				}
			}
		}
	}
</style>
