laravel + vue.js

1. 模板

@section('list')
<div id="confirming-list">
</div>
<script type="text/vue-template" id="confirming-list-template">
<div :id="id" class="clearfix">
    <div class="list-container clearfix">
        <div class="weui-panel weui-panel_access list-item" v-for="response in confirmingList">
            <div class="weui-panel__hd item-header">
                <div class="hotel-avatar">
                    <span :style="{ backgroundImage: 'url(' + response.hotelAvatar + ')' }"></span>
                </div>
                <div class="hotel-name-group">
                    <p class="hotel-name">{{ trans('app.left_bracket') }}@{{ response.hotelStar }}{{ trans('app.provider_response.confirmed.star_level') }}{{ trans('app.right_bracket') }}@{{ response.hotelName }}</p>
                    <div class="hotel-rating" :data-rating="response.hotelRating"></div>
                </div>
            </div>
            <a :href="response.href">
                <div class="weui-panel__bd item-body">
                    <div class="order-header">
                        <div class="service-type">
                            <span class="icon-service-type"></span>
                            <span class="service-name">@{{ response.serviceName }}</span>
                            <span class="order-id">
                                @{{ response.requestId }}{{ trans('app.time_link_icon') }}@{{ response.responseId }}
                            </span>
                        </div>
                        <div class="pick-time text-right">
                            {{ trans('provider.assigned_at') }}{{ trans('app.colon') }} @{{ response.pickedAt }}
                        </div>
                    </div>
                    <div class="request-content">
                        <h3 class="request-title">@{{ response.title }}</h3>
                        <ul class="request-services">
                            <li v-for="serviceOption in response.requestServiceOptions">@{{ serviceOption.name }}</li>
                        </ul>
                        <div class="request-desc clearfix">
                            <div class="desc-item request-date">
                                <div class="desc-body">
                                    <span class="icon-date desc-icon"></span>
                                    <span>{{ trans('provider.service_date') }}</span>
                                    <p class="desc-text">@{{ response.workTime }}</p>
                                </div>
                            </div>
                            <div class="desc-item request-time">
                                <div class="desc-body">
                                    <span class="icon-time desc-icon"></span>
                                    <span>{{ trans('provider.service_time') }}</span>
                                    <p class="desc-text">@{{ response.workFromTime }} - @{{ response.workToTime }}</p>
                                </div>
                            </div>
                            <div class="desc-item request-salary">
                                <div class="desc-body">
                                    <span class="icon-salary desc-icon"></span>
                                    <span>{{ trans('provider.service_salary') }}</span>
                                    <p class="desc-text">@{{ response.minSalary }}{{ trans('provider.salary_unit') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="weui-panel__bd item-footer">
                <div class="weui-flex">
                    <div class="weui-flex__item">
                        <template v-if="response.isRejected">
                            <div class="serving-time reject-line-height">{{ trans('provider.response_list.serving') }}{{ trans('app.colon') }}@{{ response.servingTime }}</div>
                            <div class="rejected-msg-wrapper reject-line-height">
                                <span class="rejected-msg">{{ trans('provider.response_list.rejected') }}</span>
                                <span class="rejected-msg rejected-info">
                                    <i class="weui-icon-warn"></i>
                                </span>
                                <div class="js_dialog d-none rejected-info-wrapper">
                                    <div class="weui-mask"></div>
                                    <div class="weui-dialog">
                                        <div class="weui-dialog__hd header">
                                            <span>{{ trans('provider.response_list.reject_cause') }}</span>
                                            <span class="close-icon" aria-hidden="true">&times;</span>
                                        </div>
                                        <div class="weui-dialog__bd">
                                            <div class="rejected-note">
                                                <span>@{{ response.rejectedNote }}</span>
                                            </div>
                                            <div class="rejected-imgs">
                                                <div class="js-wechat-img reject-img" v-for="rejectMedia in response.rejectMedias"
                                                :style="{backgroundImage: 'url(' + rejectMedia.cdn_path + ')'}" @click.stop="previewImg" :data-url="rejectMedia.cdn_path"></div>
                                            </div>
                                            <div class="allot-qty">
                                                <div>{{ trans('provider.response_list.allot_msg') }}</div>
                                                <div class="allot-wrapper" v-for="serviceOption in response.serviceOptions">
                                                    <div class="service-option">
                                                        <span class="info-label">{{ trans('provider.response_list.room_type') }}</span>
                                                        <span>@{{ serviceOption.name }}</span>
                                                        <span>@{{ serviceOption.qty }}@{{ serviceOption.unit }}</span>
                                                    </div>
                                                    <div class="service-note">
                                                        <span class="info-label">{{ trans('provider.response_list.remark') }}</span>
                                                        <span>@{{ serviceOption.note }}</span>
                                                    </div>
                                                    <div class="weui-cell__bd weui-uploader__bd response-service-img" v-if="serviceOption.image">
                                                        <ul class="weui-uploader__files">
                                                            <li class="weui-uploader__file reject-img"
                                                                :style="{backgroundImage: 'url(' + serviceOption.image + ')'}" @click.stop="previewServiceImg" :data-url="serviceOption.image">
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="apply-qty">
                                                <div>{{ trans('provider.response_list.apply_msg') }}</div>
                                                <div class="allot-wrapper" v-for="serviceOption in response.serviceOptions">
                                                    <div class="service-option">
                                                        <span class="info-label">{{ trans('provider.response_list.room_type') }}</span>
                                                        <span>@{{ serviceOption.name }}</span>
                                                        <span>@{{ serviceOption.qty_applied }}@{{ serviceOption.unit }}</span>
                                                    </div>
                                                    <div class="service-note">
                                                        <span class="info-label">{{ trans('provider.response_list.remark') }}</span>
                                                        <span>@{{ serviceOption.remark }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="serving-time">{{ trans('provider.response_list.serving') }}{{ trans('app.colon') }}@{{ response.servingTime }}</div>
                        </template>
                    </div>
                    <div class="weui-flex__item text-right">
                        <template v-if="response.isAppealed">
                            <div class="action-btn appeal-info-btn" v-if="response.appealStatus == 'open'">{{ trans('provider.response_list.has_appeal') }}</div>
                            <div class="action-btn appeal-info-btn" v-if="response.appealStatus == 'processing'">{{ trans('provider.response_list.appeal_processing') }}</div>
                            <div class="action-btn appeal-info-btn" v-if="response.appealStatus == 'resolved'">{{ trans('provider.response_list.appeal_resolved') }}</div>
                        </template>
                        <template v-if="response.isRejected && !response.isAppealed">
                            <div class="action-btn appeal-btn" :data-response-id="response.responseId" v-if="response.isRejected">{{ trans('provider.response_list.appeal') }}</div>
                        </template>
                        <template v-if="response.status == 'confirming'">
                            <div class="waiting-confirmed">
                            {{ trans('provider.response_list.waiting_confirmed') }}
                            </div>
                        </template>
                        <template v-else>
                            <div class="action-btn apply-confirm-btn" v-if="response.status != 'rejected' || response.appealStatus == 'resolved'" >
                                <a :href="response.confirmingHref">{{ trans('provider.response_list.apply_confirm') }}</a>
                            </div>
                        </template>


                        <template  v-if="response.appealHistories">
                            <div class="complaint-info-wrapper complaint-info">
                                <div class="weui-mask"></div>
                                <div class="weui-dialog complaint-dialog">
                                    <div class="weui-dialog__hd complinat_header">
                                        <span>{{ trans('app.provider_appeal.appeal_detail') }}</span> <span aria-hidden="true" class="close-icon">×</span>
                                    </div>
                                    <div class="weui-dialog__bd complaint_bd">
                                        <template v-for="$history in response.appealHistories">
                                            <div class="complaint-status content">@{{ $history.status }}</div>
                                            <div class="complaint-time content">@{{ $history.created }}</div>
                                            <div class="complaint-note content">@{{ $history.note }}</div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>


                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="tip-loading weui-loadmore" :class="{hidden: !loading}">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">{{ trans('app.loading') }}</span>
    </div>
    <div class="tip-loading-failed weui-loadmore weui-loadmore_line" :class="[failed ? 'show' : 'hidden']">
        <span class="weui-loadmore__tips">{{ trans('app.loading_failed') }}</span>
    </div>
    <div class="tip-no-data weui-loadmore weui-loadmore_line" :class="[empty ? 'show' : 'hidden']">
        <span class="weui-loadmore__tips">{{ trans('app.no_data') }}</span>
    </div>


    <div class="tip-loadmore weui-loadmore" :class="[!loading && hasMore ? 'show' : 'hidden']">
        <div class="weui-loadmore__tips">
            <a href="javascript:;" class="loadmore-btn weui-btn weui-btn_mini weui-btn_default"
                @click.stop="loadData"
                >{{ trans('app.load_more') }}</a>
        </div>
    </div>
</div>
</script>
@endsection

2. js

require(['jquery', 'locale', 'utils', 'vue', 'wechat_sdk', 'jquery.rateyo', 'validate'], function ($, Locale, utils, Vue, WeChatSdk) {
    $(function () {
        var store = {
            id: 'confirming-list',
            page: 1,
            confirmingList: [],
            loading: true,
            success: true,
            hasMore: false
        };


        WeChatSdk.initConfig();


        var vm = new Vue({
            el: '#confirming-list',
            template: '#confirming-list-template',
            data: store,
            computed: {
                failed: function () {
                    return !this.loading && !this.success;
                },
                empty: function () {
                    return !this.loading && this.success && this.confirmingList.length === 0;
                }
            },
            created: function () {
                this.loadData();
            },
            updated: function () {
                $(this.$el).find('.hotel-rating').each(function() {
                    $(this).rateYo({
                        starWidth: '11px',
                        spacing: '2px',
                        rating: $(this).data('rating'),
                        normalFill: '#cccccc',
                        ratedFill: '#f49c29',
                        readOnly: true
                    });
                });
            },
            methods: {
                loadData: function () {
                    var vm = this;
                    vm.loading = true;
                    $.ajax({
                        url: '/service/provider/order/list/confirming',
                        data: {
                            page: vm.page
                        },
                    }).done(function (response) {
                        var data = response.body;
                        if (response.status === 'SUCCESS') {
                            vm.page++;
                            vm.loading = false;
                            vm.success = true;
                            vm.confirmingList.push.apply(vm.confirmingList, data.items);
                            vm.hasMore = data.hasMore;
                        }
                    }).fail(function () {
                        vm.loading = false;
                        vm.success = false;
                    });
                },
                previewImg: function (event) {
                    var el = event.currentTarget;
                    var thisObj = $(el);
                    var currentImgUrl = thisObj.data('url');
                    var rejectInfoWrapper = thisObj.closest('.rejected-info-wrapper');
                    var imgUrls = [];
                    rejectInfoWrapper.find('.js-wechat-img').each(function() {
                        imgUrls.push($(this).data('url'));
                    });
                    WeChatSdk.previewImage(currentImgUrl, imgUrls);
                },
                previewServiceImg: function (event) {
                    var el = event.currentTarget;
                    var thisObj = $(el);
                    var currentImgUrl = thisObj.data('url');
                    WeChatSdk.previewImage(currentImgUrl, [currentImgUrl]);
                }
            }
        });


        $('#confirming-list').on('click', '.appeal-btn', function() {
            var thisObj = $(this);
            var responseId = thisObj.data('response-id');
            $.ajax({
                url: '/service/provider/order/appeal',
                type: 'post',
                data: {
                    response_id: responseId
                },
            }).done(function (response) {
                if (response.status === 'SUCCESS') {
                    utils.showMessage(Locale.t('response.appeal_success'), 'success');
                    thisObj.removeClass('appeal-btn').html(Locale.t('response.has_appealed'));
                    thisObj.removeClass('appeal-info-btn');
                } else {
                    utils.showMessage(Locale.t('errors.system_error'));
                }
            });
        });


        $('#confirming-list').on('click', '.appeal-info-btn', function() {
            var btn = $(this);
            btn.parent().find('.complaint-info-wrapper').show();
        });




        $('#confirming-list').on('click', '.rejected-msg-wrapper', function(event) {
            $(this).find('.rejected-info-wrapper').show();
            event.stopPropagation();
        });


        $('#confirming-list').on('click', '.close-icon', function(event) {
            $(this).closest('.rejected-info-wrapper').hide();
            $(this).closest('.complaint-info-wrapper').hide();
            event.stopPropagation();
        });


    });
});