<template>
  <view class="paySuccess">
    <view style="background: #fff;">
      <view class="img-box">
        <img src="/static/images/icon/pay-success.png" class="img" />
      </view>
      <view class="title">订单支付成功</view>
      <view class="price">实付 ￥{{payInfo.total_price}}</view>
      <view class="btn-box">
        <u-button
          style="display: inline-block;"
          shape="circle"
          :custom-style="customStyle"
          @click="goHome"
          >返回首页</u-button
        >
        <u-button
          shape="circle"
          style="margin-left: 60rpx; display: inline-block;"
          :custom-style="themCustomStyle"
          @click.stop="redictToOrders"
          >查看订单</u-button
        >
      </view>
    </view>
    <u-divider :margin-top="20" :margin-bottom="20" bg-color="transparent">
      <view style="display: flex;">
        <u-icon name="like" size="20px" :color="mainColor"></u-icon>
        <text style="margin-left: 5px;">为你推荐</text>
      </view>
    </u-divider>
    <view style="padding: 12px;" v-if="recommend.length > 0">
      <goodlist :list="recommend"></goodlist>
    </view>
  </view>
</template>

<script>
import goodlist from "@/components/goods/list";
export default {
  components: {
    goodlist,
  },
  data() {
    return {
      customStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
      themCustomStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
      mainColor: "",
      recommend: [],
	  payInfo:{},
    };
  },
  onLoad(option) {
	  if (option.payInfo) {
	  	this.payInfo=JSON.parse(option.payInfo)
	  } 
    uni.setNavigationBarTitle({
      title: "支付成功",
    });
    this.mainColor = this.$uiConfig.mainColor;
    this.themCustomStyle.color = this.mainColor;
    this.themCustomStyle.borderColor = this.mainColor;
    this.initRecommend();
  },
  methods: {
    initRecommend() {
      this.request(
        {
          url: "",
          data: {
            r: "api/goods/new-recommend",
            goods_id: 0,
            type: "goods",
          },
        },
        (res) => {
          this.recommend = res.data.list;
        }
      );
    },
    redictToOrders() {
      uni.redirectTo({
        url: "/pages/order/index/index?status=2",
      });
    },
    goHome() {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
  },
};
</script>

<style>
.paySuccess {
  min-height: 100vh;
  padding-bottom: 40rpx;
  background: #f5f5f5;
}
.paySuccess .img-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.paySuccess .img-box .img {
  width: 256rpx;
  height: 256rpx;
  padding: 60rpx 0 0 0;
}
.paySuccess .title {
  padding: 40rpx 0 20rpx 0;
  font-size: 32rpx;
  color: #000;
  font-weight: 600;
  text-align: center;
}
.paySuccess .price {
  font-size: 30rpx;
  color: gray;
  padding-bottom: 60rpx;
  text-align: center;
}
.paySuccess .btn-box {
  padding-bottom: 60rpx;
  text-align: center;
}
</style>
