开发代驾+顺风车+货运

客户端：Uniapp 开发

司机端：Uniapp 开发

后台：thinkphp5 框架

数据库：MySQL

打车/代驾/跑腿小程序源码司机入住uniapp/thinkphp

为什么用UNIAPP开发？

UNIAPP框架简单，学习成本低，开发周期短，一套代码可生成多端版本(h5、小程序(各个平台)、APP），这就是现在为什么软件开发公司使用UNIAPP开发了

 

 

 <template>
    <view>
        <view class="header">
            <image src="../../static/booklist-header.png" mode=""></image>
        </view>
        <empty top="180" v-if="list.length==0" text="暂无车主"></empty>
        <view style="padding-bottom: 150rpx;">
            <view @click="toDetail(item.id)"  v-for="(item,i) in list"
             :key="i">
                <view class="text-center blue bold">
                    {{item.start_time}}
                </view>
                <view class="flex mt-10">
                    <view class="">
                        <text class="gray-2">【车主】</text>{{item.driver_name}}
                    </view>
                    <view class="flex1 flex-middle">
                        <text class="gray-2">【余座】</text>{{item.more_seats}}
                        <u-icon name="arrow-right" color="rgba(51,51,51,0.3)" size="35"></u-icon>
                    </view>
                </view>
                <view class="mt-10">
                    <text class="gray-2">【车型】</text>{{item.car_type}}
                </view>
                <view class="flex1 mt-10">
                    <text class="gray-2">【路线】</text>
                    <view class="u-flex-1">
                        {{item.route}}
                    </view>
                </view>
                <view class="flex1 mt-10">
                    <text class="gray-2">【备注】</text>
                    <view class="u-flex-1">
                        {{item.remark}}
                    </view>
                </view>
                <view class="mt-10">
                    <text class="gray-2">【评分】</text>
                    <text class="red">{{item.score}}分</text>
                </view>
                <view class="flex flex-end mt-20">
                    <view class="">
                        摊费<text class="red">￥{{item.car_price}}</text>/座
                    </view>
                    <view class="bg-green white ptb-10 plr-20 ml-20" @click.stop="book(item.id)">
                        预订
                    </view>
                </view>
            </view>
        </view>
        <u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
         margin-bottom="30" />
        <bookTip class="fixed-bottom"></bookTip>
    </view>
</template>
 
<script>
    import {mapState} from 'vuex'
    export default {
        data() {
            return {
                list:[],
                page:1,
                status: 'loadmore',
            };
        },
        computed:{
            ...mapState(['start','end','city1','city2'])
        },
        onShow() {
            this.page = 1
            this.list = []
            this.init()
        },
        mounted() {
            uni.setNavigationBarTitle({
                title:this.city1+'——'+this.city2
            })
        },
        onPullDownRefresh() {
            this.page = 1
            this.list = []
            this.init()
        },
        onReachBottom() {
            //避免多次触发
            if (this.status == 'loading' || this.status == 'nomore') {
                return;
            }
            this.status = "loading";
            this.init()
        },
        methods:{
            init(){
                this.$http('/addons/ddrive/sforder/order_index',{
                    order_type:2,
                    start_city: this.start.city,
                    end_city: this.end.city,
                    page: this.page
                },"POST").then(data=>{
                    console.log(data);
                    if (data.length < 10) {
                        this.status = "nomore"
                    } else {
                        this.page = this.page + 1
                        this.status = "loadmore"
                    }
                    this.list = this.list.concat(data)
                    uni.stopPullDownRefresh();
                })
            },
            book(id){
                uni.navigateTo({
                    url:'/pages/shunfeng/confirm-book?id='+id
                })
            },
            toDetail(id){
                uni.navigateTo({
                    url:'/pages/shunfeng/order-detail?id='+id
                })
            }
        }
    }
</script>
 
<style lang="scss">
    .header {
        image {
            width: 100%;
            height: 310rpx;
        }
    }
</style>