jzhw_uni/pages/ucenter/parter/register/register.vue

<template>
    <view>
        <image class="top-img" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/register-bg.jpg" mode="widthFix"></image>
        <view class="form-wrapper">
            <view class="form-item">
                <view class="item-left">城市选择</view>
                <view class="item-right city-select" @tap="showPickerFun">
                    <text class="city">{{ cityValue }}</text>
                    <view class="arrow-down"></view>
                </view>
            </view>
            <view class="form-item">
                <view class="item-left">姓 名</view>
                <view class="item-right">
                    <input class="weui-input name-input" maxlength="10" placeholder="请输入姓名" :value="username" @input="nameInput" />
                </view>
            </view>
            <view class="form-item">
                <view class="item-left">手 机</view>
                <view class="item-right">{{ phone }}</view>
            </view>
            <!-- <view class="form-item">
					<view class="item-left">邀 请 码</view>
					<view class="item-right">{{bCode}}</view>
				</view> -->
        </view>

        <view class="register-btn" ontap="confirmRegister">确认注册</view>
        <van-popup :show="showPicker" position="bottom">
            <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
    </view>
</template>

<script>
const util = require('../../../../utils/util.js');
const api = require('../../../../config/api.js');
const app = getApp();
export default {
    data() {
        return {
            phone: '',
            bCode: '',
            showPicker: false,
            cityId: '',
            cityValue: '请选择城市',
            cityList: [],
            columns: [],
            username: '',
            userInfo: {}
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.getAllCity();
        this.setData({
            phone: app.globalData.recommend.phone,
            bCode: app.globalData.recommend.bCode
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onCancel: function () {
            this.setData({
                showPicker: false
            });
        },

        onConfirm: function (event) {
            this.setData({
                cityId: this.cityList[event.detail.index].id,
                cityValue: event.detail.value,
                showPicker: false
            });
        },

        showPickerFun() {
            this.setData({
                showPicker: true
            });
        },

        nameInput(e) {
            this.setData({
                username: e.detail.value
            });
        },

        getAllCity() {
            util.request(api.GetAllCity, {}, 'get').then((res) => {
                if (res.errno === 0) {
                    let list = res.data;
                    let columns = list.map((item) => {
                        return item.cityName;
                    });
                    this.setData({
                        cityList: list,
                        columns: columns
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        },

        confirmRegister() {
            let that = this;
            if (that.cityValue == '请选择城市') {
                util.showErrorToast('请选择城市');
            } else if (that.username == '') {
                util.showErrorToast('请输入姓名');
            } else {
                uni.getUserProfile({
                    desc: '用于完善会员资料',
                    // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                    success: (res) => {
                        console.log(res);
                        if (res.userInfo == null) {
                            uni.showToast({
                                title: '未授权，无法完善信息',
                                icon: 'success',
                                duration: 3000
                            });
                            return;
                        } else {
                            that.setData({
                                userInfo: res.userInfo
                            });
                            that.registerReferrer();
                        }
                    },
                    fail: (res) => {
                        uni.showToast({
                            title: '未授权，无法完善信息',
                            icon: 'success',
                            duration: 3000
                        });
                    }
                });
            }
        },

        registerReferrer() {
            util.request(
                api.RegisterReferrer,
                {
                    applyCode: this.bCode,
                    avatar: this.userInfo.avatarUrl,
                    cityId: this.cityId,
                    customerName: this.username,
                    gender: this.userInfo.gender,
                    nickname: this.userInfo.nickName,
                    openId: app.globalData.recommend.openId,
                    phone: this.phone,
                    ruserid: app.globalData.rId,
                    sessionKey: app.globalData.recommend.sessionKey,
                    unionId: app.globalData.recommend.unionId
                },
                'POST'
            ).then((res) => {
                if (res.errno == 0) {
                    //存储用户信息
                    app.globalData.hasLogin = true;
                    uni.setStorageSync('userInfo', res.data.userInfo);
                    uni.setStorageSync('token', res.data.token);
                    app.globalData.shareImage = res.data.sharImage;
                    // wx.navigateTo({
                    // 	url: '../steward/steward',
                    // })
                    uni.showToast({
                        title: '注册成功',
                        duration: 2000,
                        success: function () {
                            setTimeout(function () {
                                uni.switchTab({
                                    url: '/pages/index/index'
                                });
                            }, 2000);
                        }
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        }
    }
};
</script>
<style>
.top-img {
    width: 100%;
}
.form-wrapper {
    padding: 86rpx 66rpx 0;
}
.form-item {
    display: flex;
    height: 68rpx;
    margin: 0 0 32rpx;
}
.item-left {
    width: 120rpx;
    color: #2a2a2a;
    font-size: 30rpx;
    text-align: justify;
    line-height: 78rpx;
    margin-right: 20rpx;
}
.item-right {
    border-radius: 10rpx;
    border: 2rpx solid #dcdcdc;
    flex: 1;
    padding: 0 20rpx 0;
    text-align: left;
    color: #85868a;
    font-size: 28rpx;
    height: 78rpx;
    line-height: 78rpx;
}
.city-select {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.city {
    color: #85868a;
}
.arrow-down {
    width: 0rpx;
    height: 0;
    border-left: 14rpx solid transparent;
    border-right: 14rpx solid transparent;
    border-top: 16rpx solid #85868a;
    margin-left: 8rpx;
}
.register-btn {
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/btn.png') no-repeat center;
    background-size: 100%;
    width: 592rpx;
    height: 114rpx;
    margin: 200rpx auto 80rpx;
    color: #fff;
    font-size: 36rpx;
    line-height: 114rpx;
    text-align: center;
    font-weight: bold;
}
.name-input {
    color: #85868a;
    font-size: 28rpx;
    text-align: left;
    height: 78rpx;
    line-height: 78rpx;
}
</style>