移动端地址控件

最新推荐文章于 2019-01-04 11:54:03 发布

catherinawwww

最新推荐文章于 2019-01-04 11:54:03 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术资料

本文链接：https://blog.youkuaiyun.com/weixin_38747509/article/details/80416331

技术资料专栏收录该内容

188 篇文章

订阅专栏

html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>择天记活动</title>
    <meta name="keywords" content="择天记活动 - 中国东方航空">
    <meta name="description" content="择天记活动 - 中国东方航空">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <script src="dest/js/lib/flexible.min.js"></script>
    <link href="dest/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="dest/css/sm.css">
    <script type='text/javascript' src='dest/js/lib/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='dest/js/lib/sm.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="dest/js/lib/sm-city-picker.min.js" charset="utf-8"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>

<body>
    <div class="content hide" id="contain">
        <!-- 填写个人信息 -->
        <div class="information" v-show="resSuccess">
            <div class="infoBox">
                <p>恭喜您获得</p>
                <p :style="prizeBg"></p>
                <p>请输入您的地址及联系方式</p>
                <p>我们将在30个工作日内将礼包快递给您</p>
            </div>
            <div slot="checkBox" id="checkBox">
                <form class="infoSubBox">
                    <div class="formBox">
                        <span>*</span>
                        <input type="number" placeholder="手机号" id="contactPhone" v-model="formData.contactPhone" />
                    </div>
                    <div class="formBox">
                        <span>*</span>
                        <input type="text" placeholder="姓名（中文）" id="contacter" v-model="formData.contacter" />
                    </div>
                    <div class="formBox">
                        <span>*</span>
                        <input type="text" readonly placeholder="所在区域" id="district" />
                    </div>
                    <div class="formBox">
                        <span>*</span>
                        <input type="text" placeholder="详细地址" id="addrDetail" v-model="formData.addrDetail" />
                    </div>
                </form>
                <div class="insubBtn" @click="saveAddr"></div>
            </div>
            <div class="cover" v-show="ifLoading">
                <div class="loading" v-show="ifLoading"></div>
            </div>
        </div>
        <!-- 个人信息保存成功 -->
        <div class="personlSucc" v-show="saveSucc">
            <div class="shutDown" @click="shutdown"></div>
            <div class="perCenter"></div>
            <div class="perTip">
                您的个人信息
                <br/> 保存成功
            </div>
        </div>
        <!-- 领取失败 -->
        <div class="fail" v-show="resfail"></div>
    </div>
    <script src="dest/js/lib/vue.js"></script>
    <script type="text/javascript" src="./js/lib/axios.min.js?_=1526563504633"></script>
    <script src="dest/js/prize.min.js"></script>
</body>

</html>

js：

import 'es5';
import {
    ga
} from 'ga';
import "./component/background"
import {
    isInApp,
    saveP,
    parse_url,
    message,
    APPLogin
} from './lib/utils-fn.js';
import {
    api
} from './lib/utils-config';
import {
    wechatShare
} from './lib/wechat'
ga();

const {
    prizeCode,
    p = "",
    hasPrize,
    addr
} = parse_url();

p && saveP(p);
const prize = {
    "zetianji2-xiaofeiji": "东航毛绒小飞机",
    "zetianji2-danji": "东航蛋机",
    "zetianji2-bijiben": "择天记纪念笔记本",
    "zetianji2-chongdianxian": "择天记充电线",
    "Thanks": "谢谢参与"
};

var prizePage = new Vue({
    el: "#contain",
    data: {
        //收货人
        contacter: "",
        //手机号
        contactPhone: "",

        district: "",
        addrDetail: "",
        province: "",
        city: "",
        //loading
        ifLoading: false,
        //奖品名字背景图
        prizeBg: "",
        //presizecode无奖品
        resfail: false,
        //presizecode有奖品
        resSuccess: false,
        //地址保存成功
        saveSucc: false,
        formData: {
            contactPhone: '',
            addrDetail: '',
            contacter: '',
            addr: ''
        }
    },
    mounted() {
        //替换奖品名字
        this.choose(prizeCode);
        // 增加地区选择弹窗
        this.cityPopBox();
    },
    computed: {

    },
    methods: {
        // 增加地区选择弹窗
        cityPopBox() {
            $("#district").cityPicker({
                toolbarTemplate: '<header class="bar bar-nav">\
                        <button class="button button-l' +
                    'ink pull-right close-picker">确定</button>\
                        <h1 class="title">' +
                    '选择收货地址</h1>\
                        </header>',
                onClose: function (data) {}
            });
        },
        //替换奖品名字
        choose(prizeCode) {
            if (prizeCode == "Thanks") {
                this.resfail = true;
                this.saveSucc = false;
                this.resSuccess = false;
            } else {
                this.resSuccess = true;
                this.saveSucc = false;
                this.resfail = false;
                this.prizeBg = {
                    background: `url(./images/${prizeCode}.png) center center no-repeat`,
                    backgroundSize: "auto 100%"
                };
            }
        },
        saveAddr: function () {
            var city = document.getElementById('district').value.split(" ")[1];
            var province = document.getElementById('district').value.split(" ")[0];
            var district = document.getElementById('district').value.split(" ")[2];
            if (district == '') {
                city = document.getElementById('district').value.split(" ")[0];
                province = document.getElementById('district').value.split(" ")[0];
                district = document.getElementById('district').value.split(" ")[1];
            }
            this.ifLoading = true;
            axios.post(api.baseUrl + api.addAddr, {
                    prizeCode: prizeCode,
                    province: province, //省
                    city: city, //市
                    district: district, //区
                    addrDetail: this.formData.addrDetail, //地址详情
                    contacter: this.formData.contacter, //收货人
                    contactPhone: this.formData.contactPhone, //手机号
                    bAdd: true,
                    PValue: p,
                    ActivityCode: "HThNyydb/x1HEfo/Z71KIw=="
                })
                .then(response => {
                    this.ifLoading = false;
                    const {
                        data
                    } = response;
                    switch (data.BCode) {
                        case 0:
                            //message("保存成功");
                            this.saveSucc = true;
                            break;
                        case -1:
                            APPLogin(data.Data.LoginRedirectUrl, '择天记2活动', 'HThNyydb/x1HEfo/Z71KIw==');
                            break;
                        case -6:
                            message("您似乎填错了什么");
                            break;
                        case -10:
                            message("服务排队中，请稍后再试");
                            setTimeout(() => {
                                location.href = location.href + "&ranNum=" + 10000 * Math.random();
                            }, 2000);
                            break;
                    }
                })
        },
        //关闭
        shutdown() {
            this.saveSucc = false;
        },
        //验证手机号码
        isPoneAvailable(e) {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(e.val())) {
                return false;
            } else {
                return true;
            }
        }
    }
})