首页 > 小程序教程 > 微信小程序蓝色风格优惠券购买样式模板制作设计下载

微信小程序蓝色风格优惠券购买样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<view class="c">
  <view class="pro">
    <label>{{title}}:</label>
    <text>{{pro}}</text>
  </view>
  <view class="fm phone">
    <text class="label">+86</text>
    <input type="number" maxlength="11" placeholder="请输入11位手机号" bindinput="checkPhone" />
  </view>
  <view class="des">优惠券密码将发送到此手机号</view>
  <view class="sub {{phoneOk?'sub-ok':'sub-dis'}}" catchtap="pay">{{btn}}</view>
</view>
 
二、wxss样式文件代码如下:
page{background-color: #f3f3f3;}
.c{padding: 20rpx 30rpx;}
.pro{padding: 0;font-size: 13pt;text-align: center;}
.pro label{color: #000;}
.pro text{color: #ff6a00;}
.fm{width: 700rpx;display: flex; border: 1rpx solid #ddd;background-color: #fff; margin: 20rpx auto 0;border-radius:3px;height:50px;line-height: 50px;}
.fm input{flex: 1;padding: 0 10px; height: 100%; font-size: 15pt;}

.phone .label{width: 100rpx; border-right: 1rpx solid #eee;text-align: center; color: #999;}
.des{color: #aaa;font-size: 11pt;padding: 10rpx 0;text-align: center;}

.sub{width: 700rpx;height: 50px;line-height: 50px; text-align: center;border-radius:3px; margin:30rpx auto; }
.sub-ok{background-color:#576b95;color: #fff;}
.sub-dis{background-color: #d0d0d0;color: #999;}
三、js页面代码如下:
var base = getApp();
Page({
    data: {
        pay: 1,
        brand: 0,
        pro: "",
        phone: "",
        phoneOk: false
    },
    onLoad: function (e) {
        var obj = {
            price: 0.01 || e.price,
            brand: e.type
        }
        if (e.pay && e.pay == "free") {
            wx.setNavigationBarTitle({ title: "领取奖励" });
            obj.pay = 0;
            obj.title = "获赠商品";
            obj.btn = "领取"
        } else {
            obj.pay = 1;
            obj.title = "购买商品";
            obj.btn = "确认并支付"
        }
        var s = "";
        if (e.type == 0) {
            s += "经典系列"
        } else if (e.type == 1) {
            s += "吉致系列"
        }
        obj.pro = s + obj.price + "元优惠券"
        this.setData(obj);
    },
    checkPhone: function (e) {
        var v = e.detail.value;
        if (v && v.length == 11) {
            this.setData({
                phone: v,
                phoneOk: true
            });
        } else {
            this.setData({
                phone: "",
                phoneOk: false
            });
        }
    },
    pay: function () {
        var _this = this;
        if (this.data.phoneOk) {
            base.loading.show({title:"验证信息..."});
            wx.login({
                success: function (res) {
                    console.log(res);
                    if (res.code) {
                        if (_this.data.pay == 1) {
                            base.get({ c: "ActApiCenter", m: "Apply", brand: _this.data.brand == 0 ? "ksk" : "jzcake", price: _this.data.price, phone: _this.data.phone, code: res.code }, function (res) {
                                var d = res.data;
                                if (d.Status == "ok") {
                                    wx.requestPayment({
                                        'timeStamp': d.Tag.timeStamp,
                                        'nonceStr': d.Tag.nonceStr,
                                        'package': d.Tag.package,
                                        'signType': d.Tag.signType,
                                        'paySign': d.Tag.sign,
                                        'success': function (res) {

                                            //if (res.requestPayment == "ok") {
                                            base.modal({
                                                title: '支付成功!',
                                                content: "优惠券密码已下发到手机号" + _this.data.phone + ",请查收!",
                                                showCancel: false,
                                                confirmText: "确认",
                                                success: function (res) {
                                                    if (res.confirm) {
                                                        wx.switchTab({
                                                            url: "../cake/cake"
                                                        })
                                                    }
                                                }
                                            })
                                            //}
                                        },
                                        'fail': function (res) {
                                            
                                        }
                                    })
                                } else {
                                    base.modal({
                                        title: '提交失败',
                                        content: d.Msg || ""
                                    });
                                }
                            },"提交中...");
                        } else {

                        }
                    } else {
                        base.modal({
                            title: '获取信息失败!'
                        });
                    }
                },
                fail: function () {
                    base.modal({
                        title: '获取信息失败!'
                    });
                }
            });



        }
    }
});

模板简介:该模板名称为【微信小程序蓝色风格优惠券购买样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 21,777次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-15
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
企业网站 微信模板 微信图片 自适应 html5 单页式简历模板 响应式 微信公众平台 微信素材 微信文章
您可能会喜欢的其他模板