<route lang="json5" type="page">
{
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "商品详情",
    navigationBarBackgroundColor: "#FFF",
  },
}
</route>

<template>
  <view class="w-full h-full flex flex-col">
    <scroll-view scroll-y class="w-full h-full overflow-y-auto flex-1">
      <view class="container">
        <image class="banner" :src="detailObj.main_image"></image>
        <view class="detail flex flex-col flex-justify-between">
          <view class="proname">{{ detailObj.name }}</view>
          <view class="num">
            <text class="price">￥{{ detailObj.price }}</text>
            <text class="ori">{{ detailObj.show_price }}</text>
          </view>
        </view>
        <view class="desc" v-html="detailObj.description"> </view>
        <!-- <view class="desc">
                    <div class="big">购买须知</div>
                    <div class="small">【有效期】</div>
                    <p class="prog">
                        代金券到账后，10天有效，逾期视为自动放弃，不退不补。
                    </p>
                </view> -->
      </view>
    </scroll-view>
    <view class="pay-container">
      <view class="pay-btn" @click="toPay"> 立即支付 </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, reactive, ref, unref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { queryDetail, goPay, login } from "../../api/ycnc";
import { getQueryString } from "../../utils/utils";

const id = ref("");

const detailObj = reactive({});

onLoad((options) => {
  const { product_id } = options;
  id.value = product_id;
});

onMounted(() => {
  const token = getQueryString("token");
  const backUrl = getQueryString('backUrl')
  token && uni.setStorageSync("token", token);
  backUrl && uni.setStorageSync("backUrl", encodeURIComponent(backUrl));
  getDetail();
});

const getDetail = () => {
  const params = {
    product_id: unref(id),
  };
  queryDetail({ params }).then((res) => {
    Object.assign(detailObj, res);
  });
};

const toPay = async () => {
  const params = {
    product_id: unref(id),
    backUrl: uni.getStorageSync("backUrl"),
  };
  goPay({ params })
    .then((res) => {
      const { order_no, notify_url, sign, plain_text, pay_url } = res;
      window.location.replace(pay_url);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 600rpx;
  display: block;
  box-sizing: border-box;
}
.detail {
  width: 694rpx;
  // height: 138rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 25rpx 0;
  .proname {
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 16rpx;
  }
  .price {
    font-weight: 700;
    font-size: 28rpx;
    color: #ea0000;
    margin-right: 18rpx;
  }
  .ori {
    font-weight: 400;
    font-size: 28rpx;
    color: #a5a5a5;
    text-decoration: line-through;
  }
}
.desc {
  width: 694rpx;
  margin: 0 auto;
  padding-top: 44rpx;
  padding-bottom: 24rpx;
  //旧版
  &:deep(.big-title) {
    font-weight: bold;
    font-size: 40rpx;
    color: #3d3d3d;
    margin-bottom: 16rpx;
  }
  &:deep(.small-area) {
    margin-bottom: 16rpx;
  }
  &:deep(.small-title) {
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 16rpx;
  }
  &:deep(.small-content) {
    font-weight: 400;
    font-size: 28rpx;
    color: #4d4d4d;
    line-height: 1.6;
  }
  //新版
  &:deep(.big) {
    font-weight: bold;
    font-size: 40rpx;
    color: #3d3d3d;
    margin-bottom: 16rpx;
  }
  &:deep(.small) {
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 16rpx;
  }
  &:deep(.prog) {
    font-weight: 400;
    font-size: 28rpx;
    color: #4d4d4d;
    margin-bottom: 16rpx;
    line-height: 1.6;
  }
}
.pay-container {
  width: 100%;
  height: 138rpx;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.pay-btn {
  width: 600rpx;
  height: 88rpx;
  background: #ea0000;
  border-radius: 54rpx 54rpx 54rpx 54rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  margin: 25rpx auto;
}
</style>
