<style>
.stickSignUp {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.stickSignUp .box {
  padding: 15px;
  border-bottom: 1px solid #e2e2e2;
}
.stickSignUp .box-top {
  width: 100%;
  height: 67px;
  display: flex;
  align-items: center;
}
.stickSignUp .box-title {
  width: calc(100vw - 30px - 110px - 10px);
  height: 67px;
  font-size: 15px;
  color: #000000;
  font-weight: 500;
  line-height: 22px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.stickSignUp .box-c {
  padding: 15px;
}
.stickSignUp .box-c-i {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e2e2e2;
}
.stickSignUp .box-c-i input {
  font-size: 12px;
  width: calc(100vw - 30px - 70px);
}
.stickSignUp .box-c-l {
  width: 70px;
  font-size: 12px;
  color: #666666;
}
.btn {
  width: 100%;
  height: 45px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  margin: 30px 0;
}
</style>

<template>
  <view class="stickSignUp">
    <view class="box">
      <view class="box-top">
        <image
          :src="details.CoverImg"
          mode="aspectFill"
          style="width: 110px; height: 67px; border-radius: 8px"
        ></image>
        <view class="box-title">{{ details.ActivityName }}</view>
      </view>
    </view>
    <view class="box-c">
      <view style="font-size: 16px; color: #111111">请填写报名资料</view>
      <view class="box-c-i">
        <view class="box-c-l">姓名</view>
        <input type="text" v-model="addMsg.LinkMan" placeholder="请填写姓名" />
      </view>
      <view class="box-c-i">
        <view class="box-c-l">联系电话</view>
        <input
          type="number"
          v-model="addMsg.LinkTel"
          placeholder="请填写联系电话"
        />
      </view>
      <!-- <view class="box-c-i">
			<view class="box-c-l">报名人数</view>
			
			<u-number-box v-model="addMsg.PeopleNum" :min='1' :disabled='true' @change="valChange"></u-number-box>
		</view> -->

      <view class="box-c-i">
        <view class="box-c-l">备注</view>
        <input
          type="text"
          v-model="addMsg.Remark"
          placeholder="请填写备注内容"
        />
      </view>
      <view class="box-c-i" v-if="details.IsFree !== 1">
        <view class="box-c-l">支付方式</view>
        <u-radio-group v-model="addMsg.PaymentWay">
          <u-radio
            shape="circle"
            :active-color="mainColor"
            @change="radioChange"
            v-for="(item, index) in list"
            :key="index"
            :disabled="item.disabled"
            :name="item.Id"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
      <!-- <view class="box-c-i" v-if="details.IsFree==2" style="justify-content: flex-end;border-bottom: none;height: 35px;margin-top: 10px;">
			<view><text class="box-c-l">{{addMsg.PaymentWay==1?'现金单价:':'点数单价:'}} </text>{{addMsg.PaymentWay==1?addMsg.UnitPrice:addMsg.UnitPoint}}{{addMsg.PaymentWay==1?'元':'点'}}</view>
		</view> -->
      <view
        class="box-c-i"
        v-if="details.IsFree == 2"
        style="justify-content: flex-end; border-bottom: none; height: 35px"
      >
        <view
          ><text class="box-c-l">{{
            addMsg.PaymentWay == 1 ? "现金总价:" : "点数总价:"
          }}</text
          >{{ addMsg.PaymentWay == 1 ? addMsg.Money : addMsg.TotalPoint
          }}{{ addMsg.PaymentWay == 1 ? "元" : "点" }}</view
        >
      </view>
      <view
        class="box-c-i"
        v-if="details.IsFree == 1"
        style="justify-content: flex-end; border-bottom: none; height: 35px"
      >
        <view class="box-c-l" style="text-align: right">免费</view>
      </view>
      <view
        class="btn"
        @click="btnshow == true ? signup() : ''"
        :style="{ background: mainColor }"
      >
        报名
      </view>
    </view>
  </view>
</template>
<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
  nextTick,
} from "vue";
import { activitySignUp } from "../../api/activity";
export default {
  setup() {
    let userinfo = uni.getStorageSync("userInfo");
    let data = reactive({
      pageTitle: "报名订单",
      mainColor: "",
      details: {},
      addMsg: {
        ActivityId: 0,
        LinkMan: "",
        LinkTel: "",
        Remark: "",
        PeopleNum: 1,
        UnitPrice: 0,
        Money: 0,
        PaymentWay: 1,
        PayWay: 1,
        UnitPoint: 0,
        TotalPoint: 0,
        Sex: userinfo.StuSex + 1,
        StuBirth: userinfo.StuBirth,
      },
      list: [
        { name: "在线支付", Id: 1, disabled: false },
        { name: "点数支付", Id: 6, disabled: false },
      ],
      orderInfo: {},
      btnshow: true,
      mainColor: "#00ACF9",
    });
    let methods = {
      valChange(e) {
        data.addMsg.PeopleNum = e.value;
        data.addMsg.Money = data.addMsg.UnitPrice * data.addMsg.PeopleNum;
      },
      radioChange() {},
      async signup() {
        data.btnshow = false;
        if (data.addMsg.LinkMan == "") {
          uni.showToast({
            title: "请填写姓名",
            icon: "none",
          });
          data.btnshow = true;
          return;
        }
        if (data.addMsg.LinkTel == "") {
          uni.showToast({
            title: "请填写联系电话",
            icon: "none",
          });
          data.btnshow = true;
          return;
        }
        uni.showLoading({
          title: "报名中",
        });
        if (data.addMsg.PaymentWay == 6) {
          data.addMsg.UnitPrice = 0;
          data.addMsg.Money = 0;
          data.addMsg.PayWay = 0;
        }
        if (data.addMsg.PaymentWay == 1) {
          data.addMsg.UnitPoint = 0;
          data.addMsg.TotalPoint = 0;
          data.addMsg.PayWay = 1;
        }
        let res = await activitySignUp(data.addMsg);
        if (res) {
          uni.hideLoading();
          data.btnshow = true;
          if (data.addMsg.PaymentWay == 6) {
            uni.showToast({
              title: "报名成功",
              icon: "none",
              duration: 2000,
            });
            that.getbackurl(); //返回列表
          } else {
            data.orderInfo = JSON.parse(res.data);
            that.Pay();
          }
        } else {
          uni.hideLoading();
          data.btnshow = true;
        }
      },
      Pay() {
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: data.orderInfo.timeStamp,
          nonceStr: data.orderInfo.nonceStr,
          package: data.orderInfo.package,
          signType: data.orderInfo.signType,
          paySign: data.orderInfo.sign,
          success: function (res) {
            console.log("success", res);
            uni.showToast({
              title: "支付成功",
            });
            let pages = getCurrentPages(); // 当前页面
            let beforePage = pages[pages.length - 3]; // 前2个页面
            setTimeout(() => {
              uni.navigateBack({
                delta: 2,
                success: function () {
                  beforePage.$vm.getorder(); // 执行前一个页面的方法
                },
              });
            }, 1000);
          },
          fail: function (err) {
            console.log("fail:", err);
            uni.showToast({
              title: "支付失败",
            });
          },
        });
      },
      getbackurl() {
        let pages = getCurrentPages(); // 当前页面
        let beforePage = pages[pages.length - 3]; // 前2个页面
        setTimeout(() => {
          uni.navigateBack({
            delta: 2,
            success: function () {
              beforePage.$vm.getorder(); // 执行前一个页面的方法
            },
          });
        }, 1000);
      },
    };
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    this.details = JSON.parse(decodeURIComponent(option.details));
    this.addMsg.ActivityId = this.details.Id;
    if (this.details.IsFree == 1) {
      this.addMsg.PaymentWay = 6;
      this.list = [{ name: "点数支付", Id: 6, disabled: false }];
    } else {
      this.addMsg.UnitPrice = this.details.Price;
      this.addMsg.UnitPoint = this.details.PointNum;
      this.addMsg.Money = this.addMsg.UnitPrice * this.addMsg.PeopleNum;
      this.addMsg.TotalPoint = this.addMsg.UnitPoint * this.addMsg.PeopleNum;
      if (this.addMsg.UnitPrice == 0) {
        this.addMsg.PaymentWay = 6;
        this.list = [{ name: "点数支付", Id: 6, disabled: false }];
      }
      if (this.addMsg.UnitPoint == 0) {
        this.addMsg.PaymentWay = 1;
        this.list = [{ name: "在线支付", Id: 1, disabled: false }];
      }
    }
  },
};
</script>
