<template>
  <view class="">
    <up-navbar
      bg-color="transparent"
      title="兑换中心"
      @leftClick="back"
    ></up-navbar>

    <view class="top"> </view>
    <view class="box">
      <view class="info">
        <view class="titile">兑换您的专属福利 </view>
        <view class="u-flex justify-center">
          <view class="input-box u-flex">
            <image class="icon" src="/user/static/duihuan.png"></image>
            <view class="u-flex-1">
              <input placeholder="请输入兑换码" />
            </view>
          </view>
        </view>
        <view class="u-flex justify-center u-m-t-24">
          <button class="duihuan">确认兑换</button>
        </view>
      </view>

      <view class="desc">
        <view>兑换说明:</view>
        <view>
          兑换说明： 1、请直接输入您获得的兑换码，点击立即兑换即可
          2、兑换码为一次性，兑换完成之后即失效
          3、兑换获得的奖励，将直接发送至您的账号，可直接前往余额或优惠券查看
          4、兑换码为赠品，不可转赠、不退不换
          5、兑换码需在有效期内完成兑换，过期即作废
        </view>
      </view>
    </view>

    <confirmModal v-model="modal.confirm.show"></confirmModal>
    <resultModal v-model="modal.result.show" :title="modal.result.title"></resultModal>
  </view>
</template>

<script setup>
import { result } from "lodash";
import confirmModal from "./components/confirm.vue";
import resultModal from "./components/result.vue";
import { reactive } from "vue";
const modal = reactive({
  confirm: {
    show: false,
  },
  result:{
    show:true,
    title:'该兑换码无效，请输入有效兑换码'
  }
});
function back() {
  uni.navigateBack();
}
</script>

<style scoped lang="scss">
.top {
  width: 962rpx;
  height: 648rpx;
  flex-shrink: 0;
  border-radius: 962rpx;
  background: linear-gradient(357deg, #faf7ee 3.12%, #d8b285 71.51%);
  position: relative;
  transform: translateX(-104rpx) translateY(-136rpx);
}
.box {
  position: relative;
  transform: translateY(-340rpx);
  .info {
    padding: 0 74rpx;
  }
}
.input-box {
  display: flex;
  width: 604rpx;
  height: 106rpx;
  padding: 30rpx 40rpx;
  align-items: center;
  gap: 20rpx;
  flex-shrink: 0;
  border-radius: 70rpx;
  border: 2rpx solid #c58e4d;
  background: #fff;
  margin-top: 60rpx;
  .icon {
    width: 30rpx;
    height: 30rpx;
  }
}
.titile {
  color: #5c2602;
  font-family: "Source Han Sans CN";
  font-size: 48rpx;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.01rpx;
  text-align: center;
}
.duihuan {
  padding: 22rpx 236rpx;
  border-radius: 110rpx;
  background: #e8ad7b;
  line-height: 48rpx;
  margin: 0;
  white-space: nowrap;
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 700;
}
.desc {
  width: 662rpx;
  color: #666666;
  font-size: 24rpx;
  font-weight: 400;
  letter-spacing: 0.01rpx;
  padding: 0 44rpx;
  margin-top: 160rpx;
}
</style>