laravel + vue.js

来源：互联网发布：java守护线程的作用编辑：程序博客网时间：2024/05/21 08:57

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">×</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();
});

});
});

0 0