cardsystem
/
one.php

<?php
// 获取传递的ID
$id = $_GET['id'];
include_once("./untils/conn.php");// 引入数据库连接配置文件

// 查询与传递的id相匹配的数据
    $sql = "SELECT * FROM list WHERE id =".$id;
    $result = mysqli_query($con, $sql);


     if ($result->num_rows > 0) {
      // 输出数据
      while($row = $result->fetch_assoc()) {
        // 获取每个字段的值
        $zhutu = $row["zhutu"];
        $goods = $row["name"];
        $link = $row["link"];
        $price =$row["price"];
        $state = $row["state"];
        $haokaid = $row['haokaid'];
        $apiType = $row['api_type'];
        $se_num = $row['se_num'];
        if ($state == 1) {
          // 商品已下架，弹窗提示并跳转到 index.php 页面
          echo "<script>alert('商品已下架'); window.location.href='index.php';</script>";
          exit;
        }
      }
    } else {
     echo "<script>alert('商品不存在'); setTimeout(function() { window.location.href = '../index.php'; }, 1000);</script>";
     exit;
    }
    // $sql = "SELECT * FROM oder WHERE uid = $uid";
    // $result = mysqli_query($con, $sql);
    $time = time();
    $heder = 'KJKJ';
    $prefix = date("Ymd"); // 获取当前日期，例如20220101
    $oderid = $heder . $prefix . rand(100000, 999999); // 生成6位随机数作为订单号后缀
    // echo $oderid;
?>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>申请号卡</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="./other/index.css?v=2022" />
    <style>

		img {
			max-width: 100%;
			height: auto;
			display: block;
			margin: auto;
		}

		input[type="checkbox"]:checked {
          background-color: #2F7AFA;
          border-color: #2F7AFA;
        }

		label {
		  margin-left:2px ;
          font-size: 12px;
          display: flex;
          align-items: center;
        }

        label p {
          margin: 0 0px 5px 5px;
        }

        label a {
          color: #2F7AFA;
          text-decoration: none;
        }
  .phone-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .phone-number {
    width: 45%;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #D6D6D6;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 1 3px 6px rgba(0, 0, 0, 0.93);
    /*box-shadow: 18px 22px 71px  rgba(0, 0, 0, 0.93);*/
  }

  .phone-number span {
    margin-right: 10px;
  }

  .popup-content {
    padding: 16px;
  }

  .change-button {
     display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      height: 30px;
      width: 100px;
      border-radius: 10px;
  }

  .close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
  }
.red-label {
  color: red;
}
	</style>
</head>

<body>
    <div id="app">
        <!--<van-nav-bar title="申请号卡">-->

        <!--</van-nav-bar>-->
        <img style="width:100%" src="<?php echo $zhutu; ?>" alt="">

        <?php
         $sqlpz = "SELECT * FROM kefu";
        $resultpz = mysqli_query($con, $sqlpz);

         if ($resultpz->num_rows > 0) {
          // 输出数据
          while($rowpz = $resultpz->fetch_assoc()) {
            // 获取每个字段的值
            $color = $rowpz["link_color"];
            echo '<div class="fu" style="background: ' . $color . ';">';
              }
            } else {
            //   echo "未找到匹配的记录";
            }
        ?>
        <div class="zi" style="background:#fff;width:90%;margin-left:5%;border-radius: 12px;height:auto;">
        <van-popup v-model="showthirdphone" round style="width: 90%">
            <div class="popup-content">
              <van-search v-model="searchValue" placeholder="请输入需要的号码" @search="onSearch" show-action>
                  <template #action>
                    <div @click="onSearch(searchValue)">搜索</div>
                  </template>
              </van-search>
              <h3>精品靓号限时免费领取</h3>
              <div class="phone-numbers">
                <div v-for="(number, index) in phoneNumbers" :key="index" class="phone-number" @click="selectNumber(number)">
                  <span class="number">{{ number }}</span>
                  <van-image
                      width ="20px"
                      height ="20px"
                      src="img/ioc.png"

                    />
                  <!--<van-icon name="success" v-if="selectedNumber === number"></van-icon>-->
                </div>
              </div>
              <van-button plain type="primary" @click="fetchNewNumbers" class="change-button">换一批</van-button>
              <van-icon name="cross" class="close-icon" @click="showthirdphone = false"></van-icon>
            </div>
          </van-popup>
        <van-divider style="font-size: 11px;color: #2F7AFA;float: left;">根据国家实名制要求，请准确提供申办人身份证信息。</van-divider>
           <van-form @submit="onSubmit" style="width: 90%; margin-left: 5%;">
              <van-field type="text" id="goods" name="goods" label="套餐名称" value="<?php echo $goods; ?>"></van-field>
              <van-field style="display: none;" type="hidden" id="oderid" name="oderid" value="<?php echo $oderid; ?>"></van-field>
              <van-field style="display: none;" type="hidden" id="time" name="time" value="<?php echo $time; ?>"></van-field>
              <van-field style="display: none;" type="hidden" id="price" name="price" value="<?php echo $price; ?>"></van-field>
              <van-field v-model="userinfo.username" name="username" label="姓名" placeholder="请输入姓名"></van-field>
              <van-field v-model="userinfo.useridno" name="useridno" label="身份证" placeholder="请输入身份证"></van-field>
              <van-field v-model="userinfo.phone" name="phone" label="电话" placeholder="请输入电话"></van-field>
              <van-field
                  readonly
                  clickable
                  name="thirdphone"
                  :value="userinfo.thirdphone"
                  label="办理号码"
                  placeholder="点击选号"
                  @click="loadPhoneList"
                  class="red-label"
                  v-if="seNum === 1"
                ></van-field>
              <van-divider style="font-size: 11px; color: #2F7AFA; float: left;">请填写配送地址(支持全国配送，地址不详细不发货)</van-divider>
              <van-field readonly clickable name="distribution" :value="userinfo.distribution" label="配送地区" placeholder="请选择省市地区" @click="showArea = true"></van-field>
              <van-popup v-model="showArea" position="bottom">
                <van-area :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" @confirm="onConfirm" @cancel="showArea = false"></van-area>
              </van-popup>
              <van-field v-model="userinfo.address" name="address" label="详细地址" placeholder="街道/小区/门牌号"></van-field>
              <input type="hidden" name="oderid" value="<?php echo $oderid; ?>">
              <input type="hidden" name="haokaid" value="<?php echo $haokaid; ?>">
              <input type="hidden" name="apiType" value="<?php echo $apiType; ?>">
              <div style="margin: 16px; margin-bottom: 10px;">
                <van-button round block type="info" :loading="disabled1" native-type="submit">提交</van-button>
              </div>
            </van-form>
            <label  >
            <p>提交信息代表您已经阅读并同意<a href="./ruwang.html" >《入网协议》</a>和<a href="./xieyi.html">《用户信息收集协议》</a></p>
             </label>
        </div>

    </div>
    <img style="width:100%;" src="<?php echo $link; ?>" alt="">
</body>

<script src="/vue/vue2.min.js"></script>
<script src="/vue/vant2.min.js"></script>
<!-- 引入组件库 -->
<script src="/other/js/jquery.min.js"></script>
<script src="/other/js/jquery.cookie.js"></script>
<script src="/other/js/galogr.js?v=222"></script>
<script type="text/javascript">
    new Vue({
      el: '#app',
       data() {
      return {
       showthirdphone: false,
        searchValue: '',
        phoneNumbers: [],
        selectedNumber: null,
        disabled1: false,
        finished: false,
        refreshing: false,
        areaList: areaList,
        showArea: false,
        seNum: <?php echo $se_num; ?>,
        userinfo: {
          distribution: '',
          address: '',
          username: '',
          useridno: '',
          phone: '',
          thirdphone: ''
        },
        addresslist: {},
        searchValue: ''
      };
    },
    created() {},
    methods: {
        loadPhoneList(){
             this.showthirdphone = true;
             this.fetchNewNumbers();
        },
      onClickLeft() {
        window.history.go(-1);
      },
      onSearch(value) {
        // 搜索逻辑
        this.fetchNewNumbers(value)
      },
      fetchNewNumbers(val) {
        var vm = this;
        $.ajax({
          url: 'api/open/Router.php',
          method: 'POST',
          data: {
              searchValue: this.searchValue,
              haokaid: $('input[name="haokaid"]').val(),
              apiType: $('input[name="apiType"]').val(),
          },
          success: function(response) {
            vm.phoneNumbers = response.data;
          },
          error: function(error) {
            console.error(error);
          },
        });
      },
      mounted() {
        this.fetchNewNumbers();
      },
      selectNumber(number) {
        this.userinfo.thirdphone = number;
        this.showthirdphone = false;
      },
        //校验表单
        validatefrom(values) {
          if (values.username == '' || values.username == null) {
            this.$toast('请输入姓名');
            return false;
          } else if (values.useridno == '' || values.useridno == null) {
            this.$toast('请输入身份证号');
            return false;
          } else if (this.verifyidcard(values.useridno) == false) {
            return false;
          } else if (values.phone == '' || values.phone == null) {
            this.$toast('请输入联系电话');
            return false;
          } else if (this.checkphone(values.phone) == false) {
            return false;
          } else if (values.distribution == '' || values.distribution == null) {
            this.$toast('请选择配送地区');
            return false;
          } else if (values.address == '' || values.address == null) {
            this.$toast('请输入详细地址');
            return false;
          } else {
            return true;
          }
        },
        //校验联系电话
        checkphone(value) {
          const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
          if (value == '' || value == undefined || value == null) {
            this.$toast('请输入电话号码');
            return false;
          } else {
            if ((!reg.test(value)) && value != '') {
              this.$toast('请输入正确电话号码');
              return false;
            } else {
              return true;
            }
          }
        },
        //验证身份证号码
        verifyidcard(idCard) {
          var flag = false;
          //15位和18位身份证号码的正则表达式
          var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
          //如果通过该验证，说明身份证格式正确，但准确性还需计算
          if (regIdCard.test(idCard)) {
            if (idCard.length == 18) {
              var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
              var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
              var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
              for (var i = 0; i < 17; i++) {
                idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
              }
              var idCardMod = idCardWiSum % 11; //计算出校验码所在数组的位置
              var idCardLast = idCard.substring(17); //得到最后一位身份证号码
              //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
              if (idCardMod == 2) {
                if (idCardLast == "X" || idCardLast == "x") {
                  flag = true;
                } else {
                  this.$toast('身份证最后一位输入错误');
                  flag = false;
                }
              } else {
                //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
                if (idCardLast == idCardY[idCardMod]) {
                  flag = true;
                } else {
                  this.$toast('请输入正确身份证号码');
                  flag = false;
                }
              }
            } else if (idCard.length == 15) {
              var id17 = idCard.substring(0, 6) + '19' + idCard.substring(6);
              var parityBit = getParityBit(id17);
              var tempIdCard = id17 + parityBit;
              flag = validateIdCard(tempIdCard);
            }
          } else {
            this.$toast('身份证号码有误，请重新输入');
            flag = false;
          }
          return flag;
        },
        //提交表单
        onSubmit(values) {
          if (this.validatefrom(values)) {
            var vm = this;
            $.ajax({
              type: "POST",
              dataType: "json",
              url: "kzq/Router.php",
              data: {
                goods: values.goods,
                name: values.username,
                uid: values.useridno,
                phone: values.phone,
                sf: vm.addresslist[0].name,
                city: vm.addresslist[1].name,
                xian: vm.addresslist[2].name,
                dizhi: values.address,
                oderid: values.oderid,
                time: values.time,
                price: values.price,
                thirdphone: $('input[name="thirdphone"]').val(),
                apiType: $('input[name="apiType"]').val()

              },
              success: function (data) {
                console.log(data);
                // 根据服务器返回的状态码弹出提示信息
                if (data.status === 0) {
                  alert(data.msg);
                  // 延迟1秒后跳转回上一页
                  setTimeout(function () {
                    history.go(-1);
                  }, 1000);
                } else if (data.status === 1) {
                  alert(data.msg);
                } else {
                  alert(data.msg);
                  history.back();
                }
              }
            });
          }
        },
        //选择配送地址
        onConfirm(values) {
          var vm = this;
          if (values[0]['name'] == '') {
            this.$toast('请选择省份');
          } else if (values[1]['name'] == '') {
            this.$toast('请选择市区');
          } else if (values[2]['name'] == '') {
            this.$toast('请选择区域');
          } else {
            this.userinfo.distribution = values[0]['name'] + '/' + values[1]['name'] + '/' + values[2]['name']
            this.showArea = false;
            this.addresslist = values;
          }
        },
      },
    });
</script>

</html>