【九月打卡】第8天 多端全栈项目实战

课程名称：多端全栈项目实战：商业级代驾全流程落地

课程章节：  华夏代驾全栈小程序实战

课程讲师： 神思者

课程内容： 

    乘客选择代驾车型和车牌

课程收获：

我们要编写前端页面 进行添加车辆类型 和车辆车牌号

手写设置好ajax的全局url路径

然后进行页面html编写

    <view class="page">
    <u-cell-group :border="false">
        <u-cell-item icon="info-circle-fill" title="车型信息" 
                     :value="carType" @click="carTypeHandle">
        </u-cell-item>
        <u-cell-item icon="info-circle-fill" title="车牌号码" 
                     :value="carPlate" @click="carPlateHandle">
        </u-cell-item>
    </u-cell-group>
    <button class="btn" @tap="saveHandle">确定保存</button>
    <view class="desc">
        保存即代表您同意华夏代驾的        <text>《隐私政策》</text>
    </view>
    <u-toast ref="uToast" /></view>

给页面内的元素添加 @click 事件

用 uni.showModal 进行设置 车牌和车型

carTypeHandle: function() {
    let that = this;
    uni.showModal({
        title: '输入车型',
        editable: true,
        placeholderText: '例如丰田卡罗拉',
        success: function(resp) {
            if (resp.confirm) {
                let carType = resp.content;
                if (that.checkValidCarType(carType, '车型')) {
                    that.carType = carType;
                }
            }
        }
    });},
carPlateHandle: function() {
    let that = this;
    uni.showModal({
        title: '输入车牌',
        editable: true,
        placeholderText: '你的车牌号',
        success: function(resp) {
            if (resp.confirm) {
                let carPlate = resp.content;
                if (that.checkValidCarPlate(carPlate, '车牌')) {
                    that.carPlate = carPlate;
                }
            }
        }
    });},

保存数据时使用 @tap="saveHandle" 

saveHandle: function() {
    let that = this;
    if (that.checkValidCarType(that.carType, '车型') && that.checkValidCarPlate(that.carPlate, '车牌')) {
        let data = {
            carType: that.carType,
            carPlate: that.carPlate        };
        that.ajax(that.url.insertCustomerCar, 'POST', data, function(resp) {
            that.$refs.uToast.show({
                title: '添加成功',
                type: 'success',
                callback: function() {
                   ...
                }
            });
        });
    }}

之后就是前后端项目启动 然后进行真机测试