mobile_uniapp_mmhy/pageA/order/order.vue

<template>
  <view class="order" v-if="showData.no != ''">
    <!-- #ifdef H5 -->
    <u-navbar
      back-text=" "
      :custom-back="goBack"
      title=""
      :border-bottom="false"
      :background="{ backgroundColor: '#d52e4c' }"
      back-icon-color="#fff"
      title-color="#fff"
    ></u-navbar>
    <!-- #endif -->

    <!-- <u-toast ref="uToast" /> -->
    <u-toast ref="uToast"></u-toast>
    <u-modal
      v-model="showModal"
      content="正在排队付款中..."
      confirm-color="#d52e4c"
    ></u-modal>
    <view class="page">
      <view class="layer">
        <view class="layerBox">
          <view class="header">
            <view class="section2">
              <text class="txt2">{{ showData.no }}</text>
              <view class="copy" v-if="chanId != 'lh'" @tap="copeHideMet()">
                <text class="info1">{{ configAll.copy_btn_title }}</text>
              </view>
              <text class="word1"
                >{{ showData.province }}&nbsp;{{ showData.city }}&nbsp;{{
                  showData.is_private ? "民营运营商" : ""
                }}（{{ showData.network }}）</text
              >
              <!-- 公告 -->
              <view class="notice_bg">
                <image class="icon" src="../../static/img/hornRed.png"></image>
                <view class="noticeHide"></view>
                <swiper
                  autoplay="true"
                  catchtouchmove="stopTouchMove"
                  display-multiple-items="1"
                  vertical="true"
                  circular
                  interval="2000"
                  class="bar-swiper"
                >
                  <swiper-item class="swiper-item">
                    <!-- <view class="circle"></view> -->
                    <view class="item_box">
                      有{{ randNum }}人 正在浏览此号码，请尽快购买！
                    </view>
                  </swiper-item>
                </swiper>
              </view>
            </view>
          </view>
          <!-- 优惠专区倒计时 -->
          <!--  -->
          <view class="Limited" v-if="showData.is_activity != 0">
            <text>限时:</text><text>¥{{ showData.amount }}</text
            ><text class="text">剩余</text>
            <text v-for="(tim, index) in countdown" :key="index">
              {{ tim }}
            </text>
          </view>

          <view class="price">
            <view class="priceCon">
              <view class="priceNum">
                <view class="li">
                  <view class="name"> 活动价 </view>
                  <view class="numbers" v-if="showData.is_activity == 0">
                    ￥{{ showData.amount_base }}
                  </view>
                  <view class="numbers" v-else>
                    ￥{{ showData.amount_kill }}
                  </view>
                </view>
                <view class="li">
                  <view class="name"> 原价 </view>
                  <view class="numbers">
                    ￥{{ showData.amount_original }}
                  </view>
                </view>
                <view class="li">
                  <view class="name"> 预充 </view>
                  <view class="numbers"> ￥{{ showData.amount_charge }} </view>
                </view>
              </view>
              <view class="orderTit">套餐说明</view>
              <text lines="1" class="infoBox1">{{
                showData.info.describe
              }}</text>
            </view>
          </view>

          <div
            class="redBox"
            v-if="configAll.disable_send_province.length != 0 && chanId != 'lh'"
          >
            因政策原因
            <text
              v-for="(item, index) in configAll.disable_send_province"
              :key="index"
            >
              {{ item.name | areaName }} </text
            >不发货
          </div>

          <view class="form" v-if="chanId != 'lh'">
            <view class="orderTit">订单信息 <text></text></view>

            <view class="formInput">
              <u-form :model="form" label-width="160">
                <u-form-item label="姓名">
                  <input
                    v-model="form.name"
                    placeholder-style="font-size:28rpx;"
                    :clearable="false"
                    placeholder="请输入真实姓名(已加密)"
                  />
                </u-form-item>
                <u-form-item label="手机号">
                  <!--  -->
                  <view class="sendSMS" v-if="configAll.system_sms_open">
                    <view>
                      <input
                        type="number"
                        maxlength="11"
                        v-model="form.phone"
                        placeholder-style="font-size:28rpx;"
                        :clearable="false"
                        placeholder="请输入手机号(已加密)"
                      />
                    </view>
                    <view class="sms">
                      <u-verification-code
                        :seconds="seconds"
                        start-text="验证码"
                        @end="end"
                        @start="start"
                        ref="uCode"
                        @change="codeChange"
                      ></u-verification-code>
                      <view class="tips" @tap="getCode">{{ tips }}</view>
                    </view>
                  </view>
                  <!--  -->

                  <input
                    v-if="!configAll.system_sms_open"
                    type="number"
                    maxlength="11"
                    v-model="form.phone"
                    placeholder-style="font-size:28rpx;"
                    :clearable="false"
                    placeholder="收货人手机号码（已加密）"
                  />
                </u-form-item>
                <u-form-item label="验证码" v-if="configAll.system_sms_open">
                  <input
                    maxlength="4"
                    v-model="form.sms_code"
                    placeholder-style="font-size:28rpx;"
                    :clearable="false"
                    placeholder="请输入验证码"
                  />
                </u-form-item>
                <u-form-item
                  label="身份证号"
                  v-if="configAll.system_id_form_open != 0"
                >
                  <input
                    v-model="form.id_no"
                    placeholder-style="font-size:28rpx;"
                    :clearable="false"
                    placeholder="请输入身份证号(已加密)"
                  />
                </u-form-item>
                <u-form-item label="城市">
                  <!-- <input v-model="" /> -->
                  <view class="county" @tap="countyHide = !countyHide">
                    {{ countyName }}
                  </view>
                  <!-- 快手小程序 出现异常抖动更换 -->
                  <!-- <u-select v-model="countyHide" :defaultValue='countyIndex' mode="mutil-column-auto" lchild-name="children" :list="selector" @confirm="confirm"></u-select> -->
                  <w-picker
                    :visible.sync="countyHide"
                    mode="region"
                    :value="countyIndex"
                    default-type="value"
                    :hide-area="false"
                    @confirm="onConfirm($event, 'region')"
                    @cancel="onCancel"
                    ref="region"
                  ></w-picker>
                </u-form-item>
                <u-form-item label="详细地址">
                  <input
                    v-model="form.address"
                    placeholder-style="font-size:28rpx;"
                    :clearable="false"
                    placeholder="请输入街道/镇+村/小区+门牌号  "
                  />
                </u-form-item>
                <u-form-item label="备注信息" class="remark">
                  <input
                    v-model="form.remark"
                    placeholder-style="font-size:28rpx;"
                    :clearable="false"
                    placeholder="请输入备注信息(已加密)"
                  />
                </u-form-item>
              </u-form>
            </view>

            <view class="ImageText1">
              <u-checkbox-group @change="checkboxGroupChange">
                <u-checkbox
                  v-model="checked"
                  name="item.name"
                  active-color="#DC3E48"
                  ><view class="text"
                    >我已阅读并同意<text @tap.stop="agreement_show_one = true"
                      >《入网许可证》</text
                    ><text @tap.stop="agreement_show_two = true"
                      >《个人信息收集证明》</text
                    >
                  </view></u-checkbox
                >
              </u-checkbox-group>
            </view>
            <view v-if="mixin_type == 'H5'">
              <view class="orderTit">支付方式</view>
              <view class="pay">
                <radio-group @change="radioChange">
                  <view class="li" @click="radioChange(2, 1)">
                    <image src="../../static/img/zfv.png" mode=""></image>
                    <text>支付宝</text>
                    <radio
                      value="2"
                      style="float: right"
                      color="#DC3E48"
                      :checked="payType == 2"
                    />
                  </view>
                  <view class="li" @click="radioChange(1, 1)">
                    <image src="../../static/img/wx.png" mode=""></image>
                    <text>微信</text>
                    <radio
                      value="1"
                      style="float: right"
                      color="#DC3E48"
                      :checked="payType == 1"
                    />
                  </view>
                </radio-group>
              </view>
            </view>
          </view>

          <view class="guide">
            <view class="guideCon">
              <image
                :src="configAll.beauti_no_detail_bg"
                mode="widthFix"
              ></image>
              <view
                class="p"
                style="width: 703rpx; margin: 30rpx auto"
                v-html="configAll.beauti_no_detail_text"
              >
              </view>
            </view>
          </view>
          <view class="section18" v-if="chanId != 'lh'">
            <view class="box4">
              <text lines="1" class="word12">￥{{ showData.amount }}</text>
              <!-- <text lines="1" class="word12">￥{{showData.is_activity == 0 ? showData.amount_base : showData.amount_kill}}</text> -->
              <text lines="1" class="info8" @tap="apply()">确认支付</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="agreement_show_one" border-radius="20" mode="center">
      <view class="agreement">
        <image
          src="/static/img/up.png"
          class="label2"
          @tap="agreement_show_one = false"
        ></image>
        <view class="title"> 入网许可证 </view>
        <scroll-view scroll-y="true" style="height: 680rpx">
          <view v-html="agreement1"> </view>
          <!-- <view>
            <rich-text :nodes="agreement1"> </rich-text>
          </view> -->
        </scroll-view>

        <view class="btn" @tap="agreement_show_one = false"> 确认 </view>
      </view>
    </u-popup>
    <u-popup v-model="copeHide" border-radius="20" mode="center">
      <view class="agreement copeHide">
        <image
          src="/static/img/up.png"
          class="label2"
          @tap="copeHide = false"
        ></image>
        <view class="title"> 申请优惠 </view>
        <scroll-view scroll-y="true" style="height: 280rpx">
          <view class="copyText">{{ showData.copy_word }}</view>
          <rich-text :nodes="click_pop_content_Text"> </rich-text>
        </scroll-view>
        <view class="btn" @tap="copyNumHandle()"> 复制 </view>
      </view>
    </u-popup>
    <u-popup v-model="agreement_show_two" border-radius="20" mode="center">
      <view class="agreement">
        <view>
          <image
            src="/static/img/up.png"
            class="label2"
            @tap="agreement_show_two = false"
          ></image>
          <view class="title"> 个人信息收集说明 </view>
          <scroll-view scroll-y="true" style="height: 680rpx">
            <view v-html="agreement2"> </view>
            <!-- <view>
              <rich-text :nodes="agreement2"> </rich-text>
            </view> -->
          </scroll-view>
          <view class="btn" @tap="agreement_show_two = false"> 确认 </view>
        </view>
      </view>
    </u-popup>
    <view class="popupBox">
      <view class="maskName" v-if="login_show"></view>
      <view class="newForm" v-if="login_show">
        <view class="alertContent">
          <view class="title">温馨提示</view>
          <view class="content">{{ login_content }}</view>
          <view
            class="u-flex u-col-center u-row-center btn"
            style="border-top: 1px solid #ececec"
          >
            <text style="border-right: 1px solid #ececec" @tap="login_cancel"
              >取消</text
            >
            <text
              style="color: #d52e4c"
              v-if="mixin_type == 'TOUTIAO'"
              @tap="userLogin"
              >确认</text
            >
            <button
              v-else
              style="
                box-shadow: none;
                background: transparent;
                box-sizing: border-box;
                width: 50%;
                border: 0px solid #f3f3f3;
                color: #d52e4c;
              "
              type="default"
              open-type="getPhoneNumber"
              @getphonenumber="decryptPhoneNumber"
            >
              确认
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import wPicker from "@/components/w-picker/w-picker.vue";
// import mixin1 from "@/util/mixin1.js";
var unpackTimeId = null;
var total_micro_second = 0; // 总毫秒数
export default {
  // mixins: [mixin1],
  data() {
    return {
      // countdown:[],
      countdown: ["", "时", "00", "分", "00", "秒", "00"],
      form: {
        name: "", //姓名
        phone: "", //手机号
        sms_code: "", //	验证码
        id_no: "", //身份号码,
        county: "", //城市ID,区县id
        address: "", //详细地址
        remark: "", //备注

        mobile_id: "",
        pay_type: 5,
        return_url: "",
        clickid: "",
      },
      payType: 2, // H5 支付方式
      copeHide: false, // 复制
      showData: {
        id: 305467,
        status: 0,
        logo: null,
        name: null,
        brand: "中国联通",
        no: "",
        type: 1,
        network: "中国联通",
        proxy_id: 25,
        city_id: 1708,
        city: "济源",
        province_id: 1532,
        province: "河南",
        amount_exists: "0",
        amount_original: "428",
        amount_base: "214",
        amount_charge: "0",
        amount_di: "0",
        amount_proxy: "0.00",
        amount_kill: "181",
        amount: "181",
        create_time: 1657163139,
        update_time: 1663225699,
        top_time: 0,
        rec_time: 0,
        summary: null,
        is_activity: 1,
        activity_time_end: 1663228544,
        sort: 1870,
        sort_line: -1663225699,
        remark: "",
        remark_me: "",
        hold_chan: 0,
        hold_user: 0,
        admin_id: 1,
        activity_time: 1663225699,
        stock_num: 0,
        batch_no: "",
        is_offer: 0,
        info: {
          id: 305466,
          mobile_id: 305467,
          free_app: [],
          describe:
            "前半年月租减免，优惠后90/月，30g+500分钟，3年内月保底消费60",
          content: null,
          flow_year: 0,
          fee: "",
          first_month_free: 0,
          flow_free_limit: 0,
          flow_images: [],
        },
        saled: 0,
        is_private: false,
        view_count: 8,
        copy_word: "河南 济源 0510 aaa 1133 请美女主播优惠一下",
      }, //手机号详情
      timestamp: 600,
      countyName: "城市名称",
      countyHide: false,
      countyIndex: [14, 12, 0], //城市弹窗下标
      selector: [],
      checked: true,
      tips: "",
      seconds: 60, //倒计时秒数
      agreement1: "", // 入网许可协议
      agreement2: "", // 个人信息收集证明
      agreement_show_one: false, //入网许可协议开关
      agreement_show_two: false, //个人信息收集证明开关
      click_pop_content_Text: "",
      applyType: true, //防止多次点击

      showModal: false, //订单排队提示
      randNum: 1,
    };
  },
  components: {
    wPicker,
  },
  filters: {
    areaName(val) {
      return val
        .replace("省", "")
        .replace("特别行政区", "")
        .replace("壮族自治区", "")
        .replace("回族自治区", "")
        .replace("维吾尔自治区", "")
        .replace("自治区", "");
    },
  },
  onLoad(option) {
    if (option.chanId) {
      uni.setStorageSync("chanId", option.chanId);
      this.chanId = option.chanId;
    } else {
      uni.removeStorageSync("chanId");
    }
    let this_ = this;
    if (option.id) {
      this.form.mobile_id = option.id;
      this.show();
    }

    

    // 测试
    let currentTime = 1647065671;
    let startTime = 1647069271;
    // this.isDiffTime(currentTime, startTime);
    this.randNum = this.random(3, 10);
  },
  
  onShow() {
  	this.area_tree();
  	this.agreement();
  },
  
  methods: {
    goBack() {
      if (getCurrentPages().length == 1) {
        return;
      } else {
        let chanid = uni.getStorageSync("chanId")
          ? uni.getStorageSync("chanId")
          : "";
        // uni.redirectTo({
        // 	url:'/pages/index/index?chanId='+chanid
        // })
        uni.navigateBack();
      }
    },
    random(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
    // H5 支付方式选择
    radioChange(e, type) {
      if (type) {
        console.log(e);
        this.payType = e;
      } else {
        console.log(e.detail.value);
        this.payType = e.detail.value;
      }
    },
    onConfirm(res) {
      console.log(res);
      this.form.county = res.value[2];
      this.countyName = res.result;
      this.countyIndex = res.value;
    },
    onCancel() {},
    /**
     * @param {Object} current 当前时间
     * @param {Object} start 开奖时间
     */
    isDiffTime(current, start) {
      let diffTime = start - current;

      // 抽奖中： 活动开奖时间 < 当前时间
      if (start < current) {
        this.activityInfo.flagLottery = 1;
        return;
      }

      // 活动开始倒计时 【秒转为毫秒】
      total_micro_second = diffTime * 1000;

      // 开奖倒计时
      this.unpackCountDown();
    },
    /**
     * 开奖倒计时
     * 注意：毫秒时间频率，这里以100ms的频率
     */
    unpackCountDown() {
      // 格式化时间、渲染数据
      this.dateFormat(total_micro_second);

      unpackTimeId = setInterval(() => {
        total_micro_second -= 100;

        // 倒计时结束
        if (total_micro_second == 0) {
          clearInterval(unpackTimeId);
          unpackTimeId = null;
          this.show();
          return;
        }
        if (total_micro_second < 0) {
          clearInterval(unpackTimeId);
          unpackTimeId = null;
          return;
        }

        // 格式化时间
        this.dateFormat(total_micro_second);
      }, 100);
    },
    /**
     * 格式化时间、处理数据
     * 根据需要封装方法
     */
    dateFormat(micro_second) {
      // 总秒数
      var second = Math.floor(micro_second / 1000);
      var day = Math.floor(second / 3600 / 24); // 天数
      var hr = Math.floor(second / 3600); // 总小时
      // var hrDay = hr % 24; // 小时位
      var min = Math.floor((second - hr * 3600) / 60); // 分
      var sec = second - hr * 3600 - min * 60; // 秒
      var micro_sec = Math.floor((micro_second % 1000) / 10); // 毫秒，保留2位

      this.countdown = [
        this.formatNumber(hr),
        "时",
        this.formatNumber(min),
        "分",
        this.formatNumber(sec),
        "秒",
        this.formatNumber(micro_sec),
      ];
    },
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : `0${n}`;
    },
    copeHideMet() {
      this.copeHide = true;
      this.click_pop_content_Text = this.configAll.click_pop_content.replace(
        new RegExp("\r\n", "g"),
        "<br/>"
      );
      // console.log(this.click_pop_content_Text)
    },
    // 协议
    agreement() {
      // 入网许可协议
      this.$http.agreement({ id: 1 }).then((res) => {
        if (res.data.code == 1) {
          // console.log(res.data.data)
          this.agreement1 = res.data.data;
        }
      });
      // 个人信息收集证明
      this.$http.agreement({ id: 2 }).then((res) => {
        if (res.data.code == 1) {
          this.agreement2 = res.data.data;
        }
      });
    },
    // 复制
    copyNumHandle() {
      this.copeHide = false;
      let this_ = this;
      uni.setClipboardData({
        data: this.showData.copy_word, // data的值为你要复制的内容
        success: (res) => {
          uni.showToast({
            title: "复制成功",
            duration: 1000,
            icon: "none",
          });
          setTimeout(function () {
            this_.$http
              .take({ id: this_.showData.id, chanId: this_.showData.chanId })
              .then((res) => {
                console.log(res);
                if (res.data.code == 1) {
                }
              });
          }, 1000);
        },
      });
    },
    // 号码详情界面
    show() {
      uni.showLoading({
        title: "加载中",
      });
      this.$http
        .show({ id: this.form.mobile_id })
        .then((res) => {
          if (res.data.code == 1) {
            console.log(res.data.data);
            this.showData = res.data.data;
            // 优惠倒计时
            console.log(this.showData.activity_time_end);
            console.log(Math.floor(new Date().getTime() / 1000));
            this.isDiffTime(
              Math.floor(new Date().getTime() / 1000),
              this.showData.activity_time_end
            );
            // this.timestamp=Math.floor((*1000 - n)/1000)
            console.log(this.timestamp);
            this.$refs.uCountDown.start();
            uni.hideLoading();
          }
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          console.log("验证通过");
        } else {
          console.log("验证失败");
        }
      });
    },
    // 城市选择id锁定
    confirm(e) {
      console.log(e);
      this.form.county = e[2].value;
      this.countyName = e[0].label + e[1].label + e[2].label;
    },
    checkboxGroupChange(e) {
      console.log(e);
    },
    codeChange(text) {
      this.tips = text;
    },
    // 区域内容
    area_tree() {
      this.$http.area_tree().then((res) => {
        if (res.data.code === 1) {
          this.selector = res.data.data;
          console.log(this.selector);
          this.loca();
        }
      });
    },
    apply() {
      console.log(this.mixin_type + "来源");
      if (!this.checked) {
        this.$refs.uToast.show({
          title: '请认真阅读"入网许可证"和"个人信息手机证明"',
          type: "error ",
        });
        return;
      }
      if (this.form.name == "") {
        this.$refs.uToast.show({
          title: "请输入姓名",
          type: "error ",
        });
        return;
      }
      if (!this.$check.checkName(this.form.name)) {
        this.$refs.uToast.show({
          title: "请输入正确的格式",
          type: "error ",
        });
        return;
      }
      if (this.form.phone == "") {
        this.$refs.uToast.show({
          title: "请输入手机号",
          type: "error ",
        });
        return;
      }
      if (!this.$check.checkMobile(this.form.phone)) {
        this.$refs.uToast.show({
          title: "请输入正确手机号的格式",
          type: "error ",
        });
        return;
      }
      if (this.form.sms_code == "" && this.configAll.system_sms_open) {
        this.$refs.uToast.show({
          title: "请输入验证码",
          type: "error ",
        });
        return;
      }
      if (this.form.id_no == "" && this.configAll.system_id_form_open != 0) {
        this.$refs.uToast.show({
          title: "请输入身份证号",
          type: "error ",
        });
        return;
      }
      if (
        !this.$check.IdName(this.form.id_no) &&
        this.configAll.system_id_form_open != 0
      ) {
        this.$refs.uToast.show({
          title: "请输入正确的身份证",
          type: "error ",
        });
        return;
      }
      if (this.form.address == "") {
        this.$refs.uToast.show({
          title: "请输入地址",
          type: "error ",
        });
        return;
      }

      // this.$refs.uToast.show({
      // 	title: '登录成功',
      // 	type: 'error ',
      // })
      // this.$http.check({mobile:this.form.phone,event:'order',captcha:this.form.sms_code})
      // .then(res=>{
      // 	console.log(res)
      // })
      if (this.applyType) {
        this.applyType = false;
        //#ifdef MP-TOUTIAO
        this.form.pay_type = 6;
        //#endif
        // 是否是H5支付
        if (this.mixin_type == "H5") {
          this.form.pay_type = this.payType;
        }
        //#ifdef H5
        const res = window.location.href;
        if (res.indexOf("?") === -1) return;
        const URL = res.split("?")[1];
        let obj = {}; // 声明参数对象
        let arr = URL.split("&");
        for (let i = 0; i < arr.length; i++) {
          let arrNew = arr[i].split("=");
          obj[arrNew[0]] = arrNew[1];
        }
        this.form.return_url = "https://mmlh.vip/build/#/";
        this.form.clickid = obj.clickid;
        //#endif
        this.$http.apply(this.form).then((res) => {
          //#ifdef H5
          let this_ = this;
          _baq.track("form", {
            assets_id: this_.$assets_id,
            product_name: this_.showData.name,
            product_price: this_.showData.amount,
          });
          //#endif
          console.log(res);
          this.applyType = true;
          if (res.data.code == 1) {
            // 是否是H5支付
            if (this.mixin_type == "H5") {
              // console.log(r)
              // #ifdef H5
              console.log(res.data.data.pay_url);
              uni.setStorageSync("LH_H5_PHONE", this.form.phone);
              window.location.href = res.data.data.pay_url;
              // #endif
            } else {
              // 快手,抖音 小程序调用支付
              uni.setStorage({
                key: "PHONE",
                data: this.form.phone,
              });
              this.pay(res.data.data);
            }
          } else {
            if (res.data.msg === "该号码已售或不存在") {
              this.showModal = true;
            } else {
              this.$refs.uToast.show({
                title: res.data.msg,
                type: "error ",
              });
            }
          }
        });
      }
    },
    //调用支付
    pay(val) {
      let this_ = this;
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          console.log(res.provider);
          console.log(this_.mixin_type + "来源");
          if (this_.mixin_type != "TOUTIAO") {
            ks.pay({
              serviceId: "1",
              orderInfo: val.res,
              success(res) {
                this_.$refs.uToast.show({
                  title: "支付成功",
                  type: "success ",
                });
                uni.navigateTo({
                  url: "/pageA/orderSuccess/orderSuccess?id=" + val.id,
                });
              },
              fail(e) {
                console.log(e.errMsg + "fail");
                if (e.errMsg == "pay:fail request payment cancel") {
                  this_.$refs.uToast.show({
                    title: "支付取消",
                    type: "error ",
                  });
                } else {
                  this_.$refs.uToast.show({
                    title: "支付失败",
                    type: "error ",
                  });
                }
              },
            });
          } else {
            // 抖音支付
            // uni.requestPayment({
            //   provider: res.provider[0],
            //   orderInfo: val.res,
            //   service: 5,
            //   getOrderStatus: (res) =>
            //     new Promise((resolve, reject) => {
            //       console.log(res);
            //       resolve(res);
            //     }),
            //   success(res) {
            //     console.log(res);
            //     // 支付成功
            //     if (res.code == 0) {
            //       this_.$refs.uToast.show({
            //         title: "支付成功",
            //         type: "success ",
            //       });
            //       uni.navigateTo({
            //         url: "/pageA/orderSuccess/orderSuccess?id=" + val.id,
            //       });
            //     } else if (res.code == 4) {
            //       this_.$refs.uToast.show({
            //         title: "支付取消",
            //         type: "error ",
            //       });
            //     } else if (res.code == 1) {
            //       this_.$refs.uToast.show({
            //         title: "支付超时",
            //         type: "error ",
            //       });
            //     } else if (res.code == 2) {
            //       this_.$refs.uToast.show({
            //         title: "支付失败",
            //         type: "error ",
            //       });
            //     } else if (res.code == 3) {
            //       this_.$refs.uToast.show({
            //         title: "支付关闭 ",
            //         type: "error ",
            //       });
            //     } else {
            //     }
            //   },
            //   fail(e) {
            //     console.log(e);
            //   },
            // });
            tt.requestOrder({
              data: val.data,
              byteAuthorization: val.byteAuthorization,
              success({ orderId }) {
                tt.getOrderPayment({
                  orderId,
                  success(res) {
                    this_.$refs.uToast.show({
                      title: "支付成功",
                      type: "success ",
                    });
                    uni.navigateTo({
                      url: "/pageA/orderSuccess/orderSuccess?id=" + val.id,
                    });
                  },
                  fail(err) {
                    console.log(err, "err");
                    if (err.errMsg == "pay:fail request payment cancel") {
                      this_.$refs.uToast.show({
                        title: "支付取消",
                        type: "error ",
                      });
                    } else {
                      this_.$refs.uToast.show({
                        title: "支付失败",
                        type: "error ",
                      });
                    }
                  },
                });
              },
            });
          }
        },
      });
    },
    // 获取短信
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        if (this.form.phone == "") {
          this.$refs.uToast.show({
            title: "请输入手机号",
            type: "error ",
          });
          return;
        }
        if (!this.$check.checkMobile(this.form.phone)) {
          this.$refs.uToast.show({
            title: "请输入正确手机号的格式",
            type: "error ",
          });
          return;
        }
        // this.$u.toast('验证码已发送');
        // this.$refs.uCode.start();
        this.$http
          .send({ mobile: this.form.phone, event: "order" })
          .then((res) => {
            if (res.data.code == 1) {
              this.$u.toast("验证码已发送");
              this.$refs.uCode.start();
            } else {
              this.$refs.uToast.show({
                title: res.data.msg,
                type: "error ",
              });
            }
          });
      } else {
        this.$u.toast("倒计时结束后再发送");
      }
    },
    end() {
      this.$u.toast("倒计时结束");
    },
    start() {
      this.$u.toast("倒计时开始");
    },
    // 禁止滑动
    stopTouchMove() {
      return false;
    },
    // 获取本地经纬度
    loca() {
      let this_ = this;
      if (this.mixin_type != "TOUTIAO" && this.mixin_type != "H5") {
        ks.authorize({
          scope: "scope.userLocation",
          success() {
            uni.getLocation({
              type: "wgs84",
              success: function (res) {
                console.log(res);
                console.log("当前位置的经度：" + res.longitude);
                console.log("当前位置的纬度：" + res.latitude);
                this_.loAcquire(res.longitude, res.latitude);
              },
            });
          },
        });
      } else if (this_.mixin_type == "H5") {
        this_
          .jsonp("https://apis.map.qq.com/ws/location/v1/ip", {
            key: "O7NBZ-PTTCG-OEPQF-I6MTS-YEKCJ-OCFVO",
            output: "jsonp",
          })
          .then((res) => {
            console.log(res.result.ad_info);
            let adInfo = res.result.ad_info;
            this_.cityId(adInfo.province, adInfo.city, adInfo.district);
          });
      } else {
        uni.getLocation({
          type: "gcj02",
          highAccuracyExpireTime: 100,
          success: function (res) {
            console.log("当前位置的经度：" + res.longitude);
            console.log("当前位置的纬度：" + res.latitude);
            this_.loAcquire(res.longitude, res.latitude);
          },
        });
      }
    },
    // 根据经纬度查询城市
    loAcquire(longitude, latitude) {
      let this_ = this;
      this.myAmapFun.reverseGeocoder({
        location: {
          latitude: latitude,
          longitude: longitude,
        },
        success: function (res) {
          console.log("解析地址成功");
          console.log(res);
          // 根据名称筛选id
          this_.cityId(
            res.result.address_component.province,
            res.result.address_component.city,
            res.result.address_component.district
          );
        },
        fail: function (res) {
          uni.showToast({
            title: "定位失败",
            duration: 2000,
            icon: "none",
          });
          console.log(res);
        },
        complete: function (res) {
          console.log(res);
        },
      });
    },
    // 根据名称筛选id
    cityId(province, city, district) {
      this.selector.forEach((val, i) => {
        if (
          val.label.slice(0, 2) == province.slice(0, 2) ||
          val.label == province
        ) {
          console.log(val.label);
          console.log(val.value);
          val.children.forEach((item, l) => {
            if (
              item.label.slice(0, 2) == city.slice(0, 2) ||
              item.label == city
            ) {
              console.log(item.label);
              console.log(item.value);
              item.children.forEach((con, y) => {
                if (
                  con.label.slice(0, 2) == district.slice(0, 2) ||
                  con.label == district
                ) {
                  console.log(con.label);
                  console.log(con.value);
                  this.countyIndex = [i, l, y];
                  console.log(this.countyIndex);
                  this.countyName = val.label + item.label + con.label;
                  this.form.county = con.value;
                }
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.order {
  .agreement {
    width: 700rpx;
    max-height: 930rpx;
    padding: 0 30rpx;
    // box-sizing: border-box;
    .label2 {
      float: right;
      width: 21rpx;
      height: 21rpx;
      margin-top: 18rpx;
    }
    .title {
      font-size: 30rpx;
      font-weight: 700;
      margin: 40rpx 0;
      text-align: center;
    }
    /deep/ .u-drawer__scroll-view {
      position: relative;
    }
    .btn {
      padding: 20rpx;
      border-radius: 10rpx;
      text-align: center;
      border: 1rpx solid #d8d8d8;
      font-size: 28rpx;
      width: 100%;
      margin-bottom: 10rpx;
      background-color: $uni-color-BGC;
      color: #fff;
    }
  }
  .copeHide {
    width: 650rpx;
    overflow: hidden;
    background-color: #f7f7f7;
    .copyText {
      color: $uni-color-BGC;
      font-size: 30rpx;
      margin-bottom: 20rpx;
      font-weight: 700;
    }
    .title {
      font-size: 30rpx;
      margin-bottom: 30rpx;
    }
    .btn {
      background-color: $uni-color-BGC;
      width: 480rpx;
      margin: 20rpx auto 10rpx;
      padding: 20rpx 20rpx;
      background-color: $uni-color-BGC;
      color: #fff;
      margin-bottom: 40rpx;
      border-radius: 40rpx;
    }
  }
  .page {
    position: relative;
    // width: 750rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #f1f1f1;
    padding-bottom: 90rpx;
  }
  .layer {
    display: flex;
    flex-direction: column;
    // width: 750rpx;
    position: relative;
  }
  .notice_bg {
    position: relative;
    margin: 20rpx 0rpx;
    // padding: 16rpx 20rpx;
    background: #fff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    height: 60rpx;
    overflow: hidden;
    .noticeHide {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: transparent;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .icon {
      width: 31rpx;
      height: 31rpx;
      margin-left: 62rpx;
      margin-right: 20rpx;
    }
    .bar-swiper {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: $uni-color-BGC;
      height: 80rpx;
      display: flex;
      align-items: center;
      flex: 1;
      margin-left: 12rpx;
    }
    .swiper-item {
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .circle {
      min-width: 10rpx;
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: rgba(34, 34, 34, 0.5);
      margin-right: 10rpx;
    }
    .item_box {
      font-size: 28rpx;
      word-break: break-all; /* break-all(允许在单词内换行。) */
      text-overflow: ellipsis; /* 超出部分省略号 */
      display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
      -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
      -webkit-line-clamp: 1; /** 显示的行数 **/
    }
  }
  .layerBox {
    // width: 750rpx;
    display: flex;
    flex-direction: column;
  }
  .header {
    background-color: $uni-color-BGC;
    text-align: center;
    display: flex;
    // flex-direction: column;
    // width: 750rpx;
  }

  .section2 {
    width: 690rpx;
    display: flex;
    flex-direction: column;
    margin: 30rpx 0 20rpx 30rpx;
  }
  .txt2 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 60rpx;
    font-weight: 700;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 60rpx;
    margin: 0 auto;
    display: block;
  }
  .copy {
    background-color: rgba(255, 246, 0, 1);
    display: flex;
    flex-direction: column;
    margin: 30rpx auto 0;
    padding: 16rpx 22rpx;
    border-radius: 6rpx;
  }
  .info1 {
    overflow-wrap: break-word;
    color: rgba(213, 46, 76, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 22rpx;
    display: block;
  }
  .word1 {
    height: 22rpx;
    overflow-wrap: break-word;
    color: rgba(234, 188, 204, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 22rpx;
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 10rpx;
    margin-top: 30rpx;
  }
  .icon1 {
    width: 31rpx;
    height: 31rpx;
  }
  .info2 {
    width: 399rpx;
    height: 24rpx;
    overflow-wrap: break-word;
    color: rgba(213, 46, 76, 1);
    font-size: 26rpx;
    font-family: PingFangSC-Light;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin-top: 5rpx;
    display: block;
  }
  .price {
    z-index: 21;
    // height: 385rpx;
    background-color: #fff;
    border-radius: 18rpx;
    display: flex;
    flex-direction: column;
    width: 703rpx;
    position: relative;
    margin: 20rpx auto 30rpx;
    box-shadow: 1rpx 1rpx 5rpx 0rpx rgba(129, 129, 129, 0.5);
  }
  .priceCon {
    box-sizing: border-box;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    .priceNum {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid rgba(72, 72, 72, 0.4);
      .li {
        width: 33.3%;
        text-align: center;
        font-size: 26rpx;
        box-sizing: border-box;
        border-right: 1rpx solid rgba(72, 72, 72, 0.4);
        .name {
          color: #2b2b2b;
        }
        .numbers {
          color: $uni-color-BGC;
          margin-top: 10rpx;
          font-size: 32rpx;
        }
      }
      .li:nth-child(2) {
        .numbers {
          text-decoration: line-through;
        }
      }
      .li:nth-child(3) {
        border-right: 0;
      }
    }
  }
  .orderTit {
    width: 100%;
    height: 32rpx;
    line-height: 32rpx;
    display: block;
    box-sizing: border-box;
    border-left: 5rpx solid #d3363b;
    padding-left: 20rpx;
    margin-top: 30rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
  }

  .infoBox1 {
    width: 627rpx;
    overflow-wrap: break-word;
    color: rgba(105, 105, 105, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Light;
    text-align: left;
    line-height: 32rpx;
    // white-space: nowrap;
    display: block;
    // margin: 16rpx 0 0 5rpx;
  }
  .redBox {
    width: 703rpx;
    margin: 0 auto 30rpx;
    padding: 30rpx 25rpx;
    box-sizing: border-box;
    // text-align: center;
    font-size: 26rpx;
    color: #fff;
    border-radius: 20rpx;
    background-color: $uni-color-BGC;
    text {
      display: inline-block;
      margin-left: 6rpx;
    }
  }
  .form {
    width: 703rpx;
    box-sizing: border-box;
    padding: 30rpx;
    position: relative;
    margin: 20rpx auto 30rpx;
    background-color: #fff;
    box-shadow: 1rpx 1rpx 5rpx 0rpx rgba(129, 129, 129, 0.5);
    border-radius: 12rpx;
    /deep/ .u-checkbox__icon-wrap--checked {
      font-size: 28rpx;
    }
    .orderTit {
      text {
        margin-left: 30rpx;
        color: dimgray;
      }
    }
    .pay {
      font-size: 24rpx;
      image {
        width: 64rpx;
        height: 64rpx;
        vertical-align: middle;
        margin-right: 20rpx;
      }
      .li {
        padding: 20rpx;
        border-bottom: 1px solid rgba(119, 119, 119, 0.3);
      }
    }
    .formInput {
      input {
        font-weight: normal;
        font-size: 28rpx;
        width: 100%;
      }
      .u-form-item {
        padding: 10rpx 0;
        /deep/ .u-form-item--left__content__label {
          position: relative;
          padding-left: 30rpx;
          font-size: 28rpx;
        }
        /deep/.u-form-item--left__content__label::after {
          content: "*";
          position: absolute;
          left: 18rpx;
          top: 0;
          color: red;
        }
      }
      .remark {
        /deep/.u-form-item--left__content__label::after {
          display: none;
        }
      }
      .sendSMS {
        position: relative;
        width: 100%;
        .sms {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 11;
        }
      }
      .sms {
        /deep/ .tips {
          width: 168rpx;
          height: 49rpx;
          text-align: center;
          line-height: 49rpx;
          // border: 1rpx solid #D52E4C;
          border-radius: 20rpx;
          font-size: 26rpx;
          color: #fff;
          background-color: $uni-color-BGC;
          margin-top: 4rpx;
        }
        /deep/ input {
          flex: 1;
        }
      }
    }
    .ImageText1 {
      text-align: center;
      margin-top: 30rpx;
      /deep/ .u-checkbox__icon-wrap--checked {
        font-size: 28rpx;
      }
      .text {
        display: inline-block;
        font-size: 22rpx;
        color: rgba(42, 42, 42, 0.6);
        text {
          font-weight: 700;
        }
      }
    }
  }
  .section18 {
    position: fixed;
    width: 750rpx;
    bottom: 0;
    // left: 0;
    z-index: 100;
    text-align: center;
    height: 87rpx;
    line-height: 87rpx;
    margin-top: 27rpx;
    display: flex;
    flex-direction: column;
    // width: 750rpx;
  }
  .box4 {
    height: 100%;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    text {
      display: inline-block;
      width: 50%;
      text-align: center;
      height: 100%;
      background-color: #e4e4e4;
    }
    // margin: 29rpx 0 0 120rpx;
  }
  .word12 {
    width: 76rpx;
    overflow-wrap: break-word;
    color: rgba(213, 46, 76, 1);
    font-size: 30rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    margin-top: 1rpx;
    display: block;
  }
  .info8 {
    width: 117rpx;
    overflow-wrap: break-word;
    color: rgba(241, 241, 241, 1);
    font-size: 30rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    display: block;
    background-color: $uni-color-BGC !important;
  }
  .guide {
    background-color: #e4494f;
    .guideCon {
      .p {
        /deep/ p {
          padding: 0;
          margin: 0;
        }
      }
      image {
        width: 100%;
        height: 980rpx;
      }
      text {
        font-size: 30rpx;
        color: #fff;
      }
    }
  }
  .Limited {
    text-align: center;
    width: 690rpx;
    margin: 18rpx auto 18rpx;
    border: 1rpx solid $uni-color-BGC;
    border-radius: 15rpx;
    padding: 12rpx 0;
    font-size: 26rpx;
    color: $uni-color-BGC;
    // text-indent:40rpx;
    text {
      display: inline-block;
      padding: 2rpx 4rpx;

      text-align: center;
      line-height: 30rpx;
      // letter-spacing:8rpx;
    }
    text:nth-child(4),
    text:nth-child(6),
    text:nth-child(8),
    text:nth-child(10) {
      color: #fff;
      background-color: $uni-color-BGC;
      margin: 0 14rpx;
      border-radius: 10rpx;
    }
    .text {
      margin-left: 20rpx;
    }
    /deep/ .u-countdown-item {
      margin: 0 14rpx;
    }
    // .u-countdown {
    // margin-left: 30rpx;
    // }
  }
}
</style>