123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- <!-- 物流公司页面 -->
- <template>
- <view class="logistics_company">
- <!-- 搜索 start-->
- <view class="logistics_company_search">
- <view class="compnay_search">
- <view class="logistics_company_left">
- <image :src="imgUrl+'order-detail/search.png'" mode=""></image>
- <input type="text" :value="inputVal" :placeholder="$L('请输入物流公司')" @input="getValue" @blur="goSearch" />
- </view>
- <image :src="imgUrl+'order-detail/guanbi.png'" mode="" class="close_btn" v-if="inputVal!=''" @click="clearVal"></image>
- </view>
- <view class="go_search" @click="goSearch">{{$L('搜索')}}</view>
- </view>
- <!-- 搜索 end -->
- <!-- 物流公司列表 start -->
- <view class="logistics_company_list" v-if="LogisticsCompany.length > 0">
- <view class="logistics_company_pre" v-for="(item,index) in LogisticsCompany" :key="index" @click="selectLogCom(item.expressName,item.expressId)">
- <rich-text :nodes="item.expressName" ></rich-text>
- </view>
- <loadingState :state='loadingState'/>
- </view>
- <view class="logistics_company_list" v-if="LogisticsCompany.length == 0">
- <view class="no_data">
- {{$L('暂无数据')}}~
- </view>
- </view>
- </view>
- </template>
- <script>
- import loadingState from "@/components/loading-state.vue";
- import {
- mapState
- } from 'vuex';
- export default {
- components: {
- loadingState
- },
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- LogisticsCompany:[], //物流公司
- inputVal:'', //输入框的值
- current:1, //当前为第1页
- loadingState: 'first_loading',
- pageSize: 20,
- loading: false,//是否加载数据
- hasMore: true,//是否还有数据
- };
- },
- onLoad(options) {
- /**
- * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
- * 替换onLoad下代码即可
- */
- this.getLogisticsCompany()
- },
- computed: {
- ...mapState(['userInfo'])
- },
- methods: {
- //获取物流公司数据信息
- getLogisticsCompany(){
- // if (this.loadingState === 'loading') {
- // //防止重复加载
- // return;
- // }
- // if (this.loadingState == 'no_more_data') {
- // //已经没有数据,无需再请求
- // return;
- // }
- let param = {};
- param.url = 'v3/system/front/express/list';
- param.method = 'GET';
- param.data = {};
- param.data.pageSize = 20;
- param.data.current = this.current;
- param.data.expressName = this.inputVal;
- this.loadingState = this.loadingState == 'first_loading' ? this.loadingState : 'loading';
- this.$request(param).then(res => {
- if (res.state == 200) {
- if(this.current == 1){
- this.LogisticsCompany = res.data.list;
- }else{
- this.LogisticsCompany = this.LogisticsCompany.concat(res.data.list);
- }
- this.hasMore = this.$checkPaginationHasMore(res.data.pagination);//是否还有数据
- if(this.hasMore){
- this.current++;
- this.loadingState = 'allow_loading_more';
- }else{
- this.loadingState = 'no_more_data';
- }
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- //获取输入框的值
- getValue(e){
- let that = this;
- that.inputVal = e.detail.value;
- that.current = 1;
- that.getLogisticsCompany();
- let searchArr = [];
- searchArr = that.LogisticsCompany.filter(item=>item.expressName.includes(that.inputVal));
- if(searchArr.length > 0){
- searchArr.map(item=>{
- item.expressName = that.join(item.expressName,that.inputVal);
- })
- that.LogisticsCompany = searchArr;
- }
- },
- // 拼接
- join(str,key){
- var reg = new RegExp((`(${key})`), "gm");
- var replace = '<text style="color:#FD463E;font-weight:bold;">$1</text>';
- return str.replace(reg, replace);
- },
- //去搜索
- goSearch(e){
- this.current = 1;
- this.getLogisticsCompany();
- },
- //清空输入框
- clearVal(){
- let that = this;
- that.inputVal = '';
- that.current = 1;
- that.getLogisticsCompany();
- },
- //选择物流公司
- selectLogCom(expressName,expressId){
- let pages = getCurrentPages();
- let prevPage = pages[pages.length - 2]; //上一个页面
- prevPage.$vm.logisticsCompanyData = {
- 'expressName':expressName,
- 'expressId':expressId
- }
- uni.navigateBack({//返回
- delta: 1
- })
- },
- //触底
- onReachBottom(){
- if(this.hasMore){
- this.getLogisticsCompany();
- }
- }
- },
- }
- </script>
- <style lang='scss'>
- page {
- background: #FFFFFF;
- height: 100%;
- width: 750rpx;
- margin: 0 auto;
- }
- .logistics_company{
- width: 100%;
- background: #FFFFFF;
- .logistics_company_search{
- position: fixed;
- background: #FFFFFF;
- top: 0;
- /* #ifdef H5*/
- top: calc(44px + env(safe-area-inset-top));
- /* #endif */
- z-index: 10;
- width: 100%;
- height: 76rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 20rpx 30rpx;
- box-sizing: border-box;
- z-index:999;
- .compnay_search{
- display: flex;
- justify-content: space-between;
- padding: 0 20rpx;
- align-items: center;
- width: 617rpx;
- height: 65rpx;
- background: #F5F5F5;
- border-radius: 33rpx;
- .logistics_company_left{
- display: flex;
- align-items: center;
- image{
- width: 28rpx;
- height: 29rpx;
- margin-right: 17rpx;
- }
- input{
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 65rpx;
- }
- }
- .close_btn{
- width: 30rpx;
- height: 30rpx;
- }
- }
- .go_search{
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 32rpx;
- }
- }
- .logistics_company_list{
- margin-top: 88rpx;
- width: 100%;
- background: #FFFFFF;
- border-top: 20rpx solid #F5F5F5;
- .logistics_company_pre{
- height: 88rpx;
- background: #FFFFFF;
- border-bottom: 1rpx solid #F8F8F8;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 88rpx;
- margin: 0 29rpx;
- }
- .no_data{
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 88rpx;
- width: 100%;
- display: flex;
- justify-content: center;
- margin-top: 300rpx;
- }
- }
- }
- </style>
|