jzhw_uni/pages/activity/ms/msBank.vue

<template>
    <view>
        <view class="info-collect-page">
            <!-- 产品信息 -->
            <view class="product-info">
                <view class="product-left">
                    <image src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/ms-banner.png" mode="widthFix "></image>
                </view>
                <view class="product-right">
                    <view class="title">【民生客户专享】高端保姆1V1匹配服务</view>
                    <view class="brief">服务类型：住家保姆、白班保姆、育儿嫂、月嫂、钟点工</view>
                </view>
            </view>
            <!-- 信息收集 -->
            <view class="collect-detail">
                <van-cell-group>
                    <van-field
                        v-model="customerName"
                        label="客户名称"
                        placeholder-style="color:#85868A;font-size:24rpx;font-family: PingFangSC-Light, helvetica, 'Heiti SC';font-weight:normal"
                        placeholder="请输入客户名称"
                    />
                    <view style="display: flex; justify-content: space-between">
                        <van-field
                            disabled
                            v-model="customerTel"
                            label="手  机"
                            placeholder-style="color:#85868A;font-size:24rpx; font-family: PingFangSC-Light, helvetica, 'Heiti SC';font-weight:normal"
                            placeholder="请输入手机号"
                            maxlength="11"
                        />
                        <van-button type="text" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</van-button>
                    </view>
                    <van-field label="住  址" v-model="address" placeholder="请输入详细住址" maxlength="40" />
                    <van-cell title="服务类型" is-link :value="serviceModelText" @click="showServicePicker" />
                    <!-- <van-cell title="期望服务时间" is-link value="{{startServiceTime}}" bind:click="showTimePicker" /> -->
                </van-cell-group>
            </view>
            <view class="collect-tip jz-color">*9:30-19:30 3小时内回复；以外时间次日10:30前回复</view>
            <!-- 提交按钮 -->
            <view class="bottom-fixed-btn-wrapper" style="bottom: 56rpx">
                <van-button type="info" v-if="showSubmitBtn" block round @tap.native="confirmSubmit">确认</van-button>
            </view>

            <van-popup :show="typePickerShow" position="bottom">
                <van-picker show-toolbar :columns="typeColumns" @cancel="onTypeCancel" @confirm="onTypeConfirm" />
            </van-popup>

            <van-popup :show="timePickerShow" position="bottom">
                <van-datetime-picker type="date" :value="currentDate" @cancel="onTimeCancel" @confirm="onTimeConfirm" :min-date="minDate" @formatter="formatterDate" />
            </van-popup>
        </view>

        <!-- 展示蒙层 显示赠送会员卡 -->
        <view class="poster" v-if="myqr_show">
            <view>
                <image :show-menu-by-longpress="true" src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/ms-pup.png" mode="widthFix"></image>
                <view style="text-align: center; margin-top: 20rpx">
                    <image class="closeImg" @tap="hidePoster" src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/ms-close.png"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Dialog from '@vant/weapp/lib/dialog/dialog';
const util = require('../../../utils/util');
const check = require('../../../utils/check');
const api = require('../../../config/api');
const user = require('../../../utils/user.js');
const app = getApp();
export default {
    data() {
        return {
            code: '',
            showSubmitBtn: true,

            userInfo: {
                nickName: '点击登录',
                avatarUrl: '/static/images/new/icon-user.png',
                isDis: false
            },

            hasLogin: false,
            myqr_show: false,
            infoGoods: app.globalData.infoGoods,
            customerName: '',
            customerTel: '',
            address: '',
            addressId: '',
            serviceModelText: '请选择',
            serviceModel: '',

            // startServiceTime:'请选择',
            typePickerShow: false,

            timePickerShow: false,

            serviceModelList: [
                {
                    id: '1',
                    name: '钟点工'
                },
                {
                    id: '2',
                    name: '白班保姆'
                },
                {
                    id: '3',
                    name: '住家保姆'
                },
                {
                    id: '4',
                    name: '月嫂'
                },
                {
                    id: '5',
                    name: '代班保姆-钟点工'
                },
                {
                    id: '6',
                    name: '代班保姆-保姆'
                }
            ],

            typeColumns: ['钟点工', '白班保姆', '住家保姆', '月嫂', '代班保姆-钟点工', '代班保姆-保姆'],

            //typeColumns: ['钟点工', '白班保姆', '住家保姆', '月嫂', '育儿嫂', '其他'],
            currentDate: new Date().getTime(),

            minDate: new Date().getTime(),
            startServiceTime: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let that = this;
        if (app.globalData.hasLogin) {
            let userInfo = uni.getStorageSync('userInfo');
            this.setData({
                userInfo: userInfo,
                hasLogin: true,
                customerTel: userInfo.mobile
            });
            app.globalData.userInfo = userInfo;
        } else {
            user.login().then((res) => {
                console.info(res);
                that.setData({
                    code: res.code
                });
            });
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        showPoster() {
            this.setData({
                myqr_show: true
            });
        },

        hidePoster() {
            this.setData({
                myqr_show: false
            });
        },

        selectAddress() {
            if (this.hasLogin == false) {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
                return;
            }
            uni.navigateTo({
                url: '/pages/ucenter/address/address'
            });
        },

        formatterDate(type, value) {
            if (type === 'year') {
                return `${value}年`;
            }
            if (type === 'month') {
                return `${value}月`;
            }
            return value;
        },

        onTimeCancel() {
            this.setData({
                timePickerShow: false
            });
        },

        onTimeConfirm(event) {
            console.log(event);
            this.setData({
                startServiceTime: util.formetdate(new Date(event.detail)),
                timePickerShow: false
            });
        },

        showServicePicker() {
            this.setData({
                typePickerShow: true
            });
        },

        showTimePicker() {
            this.setData({
                timePickerShow: true
            });
        },

        onTypeCancel: function () {
            this.setData({
                typePickerShow: false
            });
        },

        onTypeConfirm: function (event) {
            this.setData({
                serviceModel: this.serviceModelList[event.detail.index].id,
                serviceModelText: event.detail.value,
                typePickerShow: false
            });
        },

        confirmSubmit() {
            if (this.hasLogin == false) {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
                return;
            }
            if (this.customerName == '') {
                uni.showToast({
                    title: '请输入客户名称',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }
            if (this.customerTel == '') {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }
            if (this.customerTel == '') {
                // util.showErrorToast('请输入正确的手机号码');
                uni.showToast({
                    title: '输入正确的手机号码',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }
            if (this.address == '') {
                uni.showToast({
                    title: '请输入详细住址',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }
            if (this.serviceModelText == '请选择') {
                uni.showToast({
                    title: '请选择服务类型',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }
            let that = this;
            console.log('校验成功');
            uni.showLoading({
                title: '提交中...',
                mask: true
            });
            util.request(
                api.addClueMs,
                {
                    customerName: this.customerName,
                    customerTel: this.customerTel,
                    address: this.address,
                    serviceModel: this.serviceModel,
                    userId: this.userInfo.id
                },
                'POST'
            )
                .then((res) => {
                    uni.hideLoading();
                    if (res.errno == 0) {
                        that.showPoster();
                        that.setData({
                            showSubmitBtn: false
                        });
                    } else {
                        util.showErrorToast(res.errmsg);
                    }
                })
                .catch(() => {
                    uni.hideLoading();
                });
        },

        getPhoneNumber: function (e) {
            var ivObj = e.detail.iv;
            var telObj = e.detail.encryptedData;
            var that = this;

            //------执行Login---------
            util.request(api.AuthRegister, {
                code: that.code,
                encryptedData: telObj,
                iv: ivObj,
                r_userid: 0
            }).then(function (res) {
                if (res.errno === 0) {
                    //存储用户信息
                    app.globalData.hasLogin = true;
                    app.globalData.userInfo = res.data.userInfo;
                    uni.setStorageSync('userInfo', res.data.userInfo);
                    uni.setStorageSync('token', res.data.token);
                    that.setData({
                        hasLogin: true,
                        userInfo: res.data.userInfo,
                        customerTel: res.data.userInfo.mobile
                    });
                    uni.showToast({
                        title: '授权手机号成功',
                        icon: 'success',
                        duration: 2000
                    });
                } else {
                    console.info(res);
                    uni.showToast({
                        title: '授权失败请重试',
                        icon: 'error',
                        duration: 3000
                    });
                }
            });

            //-----------------是否授权，授权通过进入主页面，授权拒绝则停留在登陆界面
            if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
                //用户点击拒绝
                uni.showModal({
                    title: '警告',
                    content: '您点击了拒绝授权，部分功能无法使用!!!',
                    showCancel: false,
                    confirmText: '确定',
                    success: function (res) {
                        // 用户没有授权成功，不需要改变 isHide 的值
                        if (res.confirm) {
                        }
                    }
                });
            }
        }
    }
};
</script>
<style>
.info-collect-page {
    padding: 0;
}

.product-info {
    /* height: 162rpx; */
    padding: 12rpx 12rpx 16rpx;
    background: #fff;
    border-radius: 10rpx;
}

.product-info {
    /* display: flex; */
    align-items: center;
}

.product-left image {
    width: 100%;
    height: 386rpx;
    /* border-radius: 10rpx; */
}

.product-right {
    margin: 0 0 0 6rpx;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    padding: 14rpx 0 5rpx;
}

.product-right .title {
    margin-left: -12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-size: 36rpx;
}

.brief {
    font-size: 24rpx;
    margin-top: 15rpx;
}

.collect-detail {
    margin: 20rpx 0 24rpx;
    padding: 0 10px;
    background-color: #fff;
}

.collect-detail .van-cell {
    background-color: transparent;
    padding: 20rpx 10rpx;
}

.collect-detail .van-cell:after {
    border-bottom-color: #e4e4e4;
    border-bottom-width: 4rpx;
    left: 0;
}

.collect-detail .van-field__input {
    text-align: right;
}

.collect-tip {
    font-size: 24rpx;
    padding: 0 10px;
}

.collect-detail .van-cell__value,
.collect-detail .van-field__input {
    color: #85868a;
    font-size: 24rpx;
    font-family: PingFangSC-Light, helvetica, 'Heiti SC';
}

/* 会员卡蒙层的样式 */
.poster {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #333333d1;
    /* padding: 0rpx 80rpx; 
  padding-top: 20%;*/
    z-index: 9999;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.ads {
    margin: 10rpx 0rpx;
    color: #fff;
}
.tool {
    display: flex;
    text-align: center;
    justify-content: baseline;
    width: 100%;
    margin-top: 20rpx;
}
.tool view {
    flex: 1;
}

.img {
    width: 99rpx;
}

.closeImg {
    width: 57rpx;
    height: 57rpx;
}

.share-btn {
    background-color: transparent;
}

.share-btn::after {
    border: none;
}

.m-card {
    width: 100%;
    height: 230rpx;
    margin: 20rpx 0;
}
.m-card image {
    width: 100%;
    height: 230rpx;
}
</style>