[更新]

pages/packet/packet.js

@@ -0,0 +1,140 @@
+// pages/packet/packet.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        mobile      : '', //手机号码
+        code        : '',
+        iscode      : null,   //用于存放验证码接口里获取到的code
+        codename    : '获取验证码',
+        countDownNum: '',
+        popContHide : false,  //领取成功弹出
+        popData     : '',   //领取金额
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad (options) {
+
+    },
+
+    /**
+     * 获取手机号码
+     */
+    getNameValue(e) {
+        this.setData({
+            mobile: e.detail.value
+        })
+    },
+
+    /**
+     * 获取验证码
+     */
+    getCodeValue(e) {
+        this.setData({
+            code: e.detail.value
+        })
+    },
+
+    /**
+     * code
+     */
+    codeBind(e){
+        let mobile = this.data.mobile,
+            myreg    = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/
+
+        var _this    = this
+
+        if  (mobile == "") {
+            wx.showToast({
+                title     : '手机号不能为空',
+                icon      : 'none',
+                duration  : 1000
+            })
+            return false;
+        }else if (!myreg.test(mobile)) {
+            wx.showToast({
+                title     : '请输入正确的手机号',
+                icon      : 'none',
+                duration  : 1000
+            })
+            return false;
+        }else{
+            wx.$api.user.send(mobile,'DEFAULT','unicom').then(res=>{
+                wx.showToast({
+                    title   : '发送成功',
+                    icon    : 'success',
+                    duration: 2000
+                })
+                var num = 61;
+                var timer = setInterval(function () {
+                    num--;
+                    if (num <= 0) {
+                        clearInterval(timer);
+                        _this.setData({
+                            codename    : '重新发送',
+                            disabled    : false
+                        })
+          
+                    } else {
+                        _this.setData({
+                            codename    : num + "s后重新获取",
+                            disabled    : true
+                        })
+                    }
+                }, 1000)
+            })
+        }
+    },
+
+    /**
+     * 立即领取
+     */
+    forgetlogin(e) {
+        let mobile          = this.data.mobile,
+            code            = this.data.code,
+            that            = this,
+            countDownNum    = 5 //获取倒计时初始值 
+
+        that.setData({
+            countDownNum: countDownNum
+        })
+        
+        wx.$api.user.unicom(mobile,'DEFAULT',code).then(res=>{
+            that.setData({
+                popContHide : !this.data.popContHide,
+                popData     : res.data
+            })
+            var timerPop = setInterval(function () {
+                countDownNum--;
+                that.setData({
+                    countDownNum: countDownNum
+                })
+                if (countDownNum <= 0) {
+                    clearInterval(timerPop);
+                    that.setData({
+                        countDownNum: 0
+                    })
+                    wx.switchTab({
+                        url: '/pages/user/user'
+                    })
+                }
+            }, 1000)
+        })
+    },
+
+    /**
+     * 关闭弹窗
+     */
+    popContHide() {
+        this.setData({
+            popContHide : !this.data.popContHide
+        })
+        wx.switchTab({
+            url: '/pages/user/user'
+        })
+    }
+})

pages/packet/packet.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents"       : {},
+  "navigationBarTitleText": "联通红包"
+}

pages/packet/packet.wxml

@@ -0,0 +1,44 @@
+<image class="packetCont-img" src="/static/img/packet.png"></image>
+
+<view class="packetCont-title">
+    <image src="/static/img/packet_title.png" mode="widthFix"></image>
+</view>
+<view class="packetText">
+    <image class="packetText-tips" src="/static/img/packetText_top.png" mode="widthFix"></image>
+    <view class="packetText-form">
+        <view class="packetText-title">
+            <view class="packetText-title-name">请输入办理业务手机号</view>
+            <text>例：185XXXX0001</text>
+        </view>
+        <form action="" bindsubmit="forgetlogin">
+            <view class="packetText-label">
+                <image src="/static/img/packetText_icon.png"></image>
+                <input class="inputs-input" type="text" placeholder="请输入手机号领取红包" bindinput="getNameValue"
+                    value="{{mobile}}"></input>
+            </view>
+            <view class="packetText-label">
+                <input class="inputs-code" placeholder="请输入验证码" bindinput="getCodeValue" value="{{code}}"></input>
+                <button class="packetText-code" bindtap="codeBind" hover-class="none">{{codename}}</button>
+            </view>
+            <view class="packetText-cozy">
+                <view class="packetText-cozy-name">温馨提示：</view>
+                <text>消费红包仅在本系统内使用，有效期12个月</text>
+                <text>消费红包不找零，不兑现</text>
+                <text>消费红包兑换成电子券后，不支持退货</text>
+                <text>如出现电子券核销问题，请致电咨询0451-88895511（9:00-20:00）</text>
+            </view>
+            <view class="packetText-btn">
+                <button type="default" form-type="submit"><text>立即领取</text><image src="/static/img/packet_arr.png"></image></button>
+            </view>
+        </form>
+    </view>
+</view>
+
+<view class="popBack {{popContHide ? 'active' : ''}}"></view>
+<view class="popCont {{popContHide ? 'active' : ''}}">
+    <image class="popCont-img" src="/static/img/receive.png" mode="widthFix"></image>
+    <view class="popCont-text">
+        <view class="popCont-name">领取成功,共领取<text>{{popData}}</text>,可在账户中查看</view>
+        <view class="popCont-btn" bindtap="popContHide">我知道了 <text wx:if="{{countDownNum > 0}}">({{countDownNum}})</text></view>
+    </view>
+</view>

pages/packet/packet.wxss

@@ -0,0 +1,223 @@
+/* 红包领取 */
+.packetCont-img {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+}
+
+.packetCont-title {
+    width: 100vw;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    text-align: center;
+    margin-top: 60rpx;
+}
+
+.packetText {
+    position: absolute;
+    top: 16%;
+    left: 40rpx;
+    right: 40rpx;
+    text-align: center;
+}
+
+.packetText-form {
+    background: rgba(255, 255, 255, .7);
+    border-radius: 30rpx;
+    padding: 40rpx 40rpx 70rpx 40rpx;
+    box-sizing: border-box;
+    color: #000;
+    text-align: left;
+    margin-bottom: 100rpx;
+    position: relative;
+}
+
+.packetText-tips {
+    margin: 0 auto;
+    display: block;
+}
+
+.packetText-title {
+    font-weight: 600;
+    font-size: 26rpx;
+    padding: 0 10rpx 40rpx 10rpx;
+}
+
+.packetText-title-name {
+    font-size: 38rpx;
+    margin-bottom: 10rpx;
+}
+
+.packetText-label {
+    background-color: #fff;
+    border-radius: 80rpx;
+    margin-bottom: 60rpx;
+    box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .4);
+    display: flex;
+    padding: 25rpx 30rpx;
+    box-sizing: border-box;
+}
+
+.packetText-label image {
+    width: 40rpx;
+    height: 40rpx;
+    margin-top: 2rpx;
+    margin-right: 30rpx;
+}
+
+.packetText-label button {
+    border: none;
+    background-color: transparent;
+    width: auto !important;
+    padding: 0;
+    font-weight: normal;
+    font-size: 32rpx;
+}
+
+.inputs-input {
+    position: relative;
+    padding-left: 30rpx;
+}
+
+.inputs-code {
+    position: relative;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    flex: 1;
+    margin-right: 30rpx;
+}
+.inputs-input::after,
+.inputs-code::after {
+    position: absolute;
+    content: '';
+    top: 0;
+    background: #000;
+    width: 4rpx;
+    height: 100%;
+}
+
+.inputs-input::after {
+    left: 0;
+}
+
+.inputs-code::after {
+    right: 0;
+}
+
+.packetText-cozy {
+    font-weight: 600;
+    font-size: 26rpx;
+}
+
+.packetText-cozy text {
+    display: block;
+    margin: 15rpx 0;
+    position: relative;
+    padding-left: 30rpx;
+}
+
+.packetText-cozy text::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 12rpx;
+    background-color: #000;
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+}
+
+.packetText-cozy-name {
+    font-size: 34rpx;
+}
+
+.packetText-btn {
+    width: 100%;
+    text-align: center;
+    height: 90rpx;
+    position: absolute;
+    bottom: -40rpx;
+    left: 0;
+}
+
+.packetText-btn button {
+    line-height: 90rpx;
+    border-radius: 25rpx;
+    background-image: radial-gradient(#fdcf7c 50%,#fdebb8);
+    border: none;
+    font-size: 38rpx;
+    color: #fff;
+    margin: 0 auto;
+    padding: 0;
+}
+
+.packetText-btn text{
+    background: linear-gradient(to bottom, #e38b3c, #cb6418);
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+.packetText-btn image {
+    width: 34rpx;
+    height: 34rpx;
+    vertical-align: -4rpx;
+    margin-left: 14rpx;
+}
+
+/* 弹出 */
+.popBack {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, .8);
+    z-index: 8;
+    display: none;
+}
+
+.popCont {
+    position: fixed;
+    z-index: 9;
+    width: 100vw;
+    height: 100vh;
+    text-align: center;
+    display: none;
+}
+
+.popCont-text {
+    padding: 0 10rpx;
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 10;
+    left: 20%;
+    top: 340px;
+    width: 60%;
+}
+
+.popBack.active,
+.popCont.active {
+    display: block;
+}
+
+.popCont-name {
+    margin-bottom: 50rpx;
+    font-size: 30rpx;
+}
+
+.popCont-name text {
+    font-size: 40rpx;
+    color: #fd5238;
+    padding: 0 10rpx;
+}
+
+.popCont-btn {
+    background-color: #ffea37;
+    color: #ff3900;
+    display: inline-block;
+    border-radius: 80rpx;
+    padding: 20rpx 70rpx;
+    box-shadow: 0 10rpx 10rpx rgba(196, 160, 0, 0.4);
+}