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

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

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

课程讲师： 神思者

课程内容：

        前端实时上传gps定位 前端页面

课程收获：

        因为创建订单得时候我们要上传车型和车牌。所以选择好车型和车牌后，页面跳转得时候 可以将数据传到后端

<view v-if="list.length > 0" v-for="one in list" class="row" 
      @tap="choseOneHandle(one.id, one.carPlate, one.carType)" 
      @longpress="removeHandle(one.id)">
	  <view>
	  	  <u-icon name="info-circle-fill" color="#2979ff" size="35" class="icon"></u-icon>
	  	  <text class="car-type">{{ one.carType }}</text>
	  </view>
	  <text class="car-plate">{{ one.carPlate }}</text></view>

        

使用得是uni.navigateTo

choseOneHandle: function(id, carPlate, carType) {
	uni.navigateTo({
	  url: `../create_order/create_order?showCar=true&carId=${id}&carPlate=${carPlate}&carType=${carType}`
	});}

 create_order页面需要对showCar 数据进行报错

onLoad: function(options) {
   if (options.hasOwnProperty('showCar')) {
        that.showCar = options.showCar;
        that.carId = options.carId;
        that.carPlate = options.carPlate;
	that.carType = options.carType   
   }}

接下来需要在页面编写一个组件

进行弹窗

然后是 确定下单得 click事件

<button class="btn" @tap="createOrderHandle">确定下单</button>

createOrderHandle: function() {
    let that = this;
    if (that.carType == null || that.carPlate == null) {
        uni.showToast({
            icon: 'error',
            title: '没有设置代驾车辆'
        });
        return;
    }

    uni.showLoading({
        title: '下单中请稍后'
    });
    setTimeout(function() {
        uni.hideLoading();
    }, 60000);

    let data = {
        startPlace: that.from.address,
        startPlaceLatitude: that.from.latitude,
        startPlaceLongitude: that.from.longitude,
        endPlace: that.from.address,
        endPlaceLatitude: that.to.latitude,
        endPlaceLongitude: that.to.longitude,
        favourFee: '0.0',
        carPlate: that.carPlate,
        carType: that.carType    };
    that.ajax(that.url.createNewOrder, 'POST', data, function(resp) {
        uni.hideLoading();
        if (resp.data.result.count > 0) {
            uni.showToast({
                icon: 'success',
                title: '订单创建成功'
            });
            setTimeout(function() {
                that.orderId = resp.data.result.orderId;
                //显示等待接单的弹窗
                that.showPopup = true;
            }, 2000);
        } else {
            uni.showToast({
                icon: 'none',
                title: '没有适合接单的司机'
            });
        }
    });},