hlm_pl_mall_store/pages/seller/order/OrderSend.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false">
    <view class="div seller-order-send">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="订单发货" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <!-- header -->

        <view class="div main-content">
            <view class="div daddress_info" @click="goAddress">
                <view class="div top-wrapper">
                    <flex-line class="selected-wrapper" v-if="daddress_info" :show-border="true">
                        <view class="div line">
                            <text class="i icon iconfont">&#xe6d3;</text>
                            <view class="div line-content">
                                <view class="div title-wrapper">
                                    <label class="title">{{daddress_info.seller_name}}</label>
                                    <label class="title" style="margin-left:1rem;">{{daddress_info.daddress_telphone}}</label>
                                    <label class="default" v-if="daddress_info.daddress_isdefault">默认</label>
                                </view>
                                <view class="div desc address-text">{{daddress_info.area_info}}{{daddress_info.daddress_detail}}</view>
                            </view>
                        </view>
                    </flex-line>
                    <view v-else class="div unselected-wrapper">
                        <label class="desc">您还没有发货地址，点击这里添加。</label>
                    </view>
                </view>
            </view>

            <view class="div cart-subtotal">
                <view class="div" @click="showPopup('popupExpress')">
                    <flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">物流公司</text><text class="span" slot="right">{{express_name}}</text></flex-line>
                </view>
                <view class="div message" v-if="shipping_express_id!=0">
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">物流单号</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="shipping_code" /></view></flex-line>
                </view>
            </view>
            <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">提交</view></view>
        </view>
        <uni-popup background-color="#fff" ref="popupExpress" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
            <view class="div common-header-wrap">
                <view :style="'height:'+navHeight+'px'"></view>
                <view class="common-header-holder"></view>
                <view class="common-header-fixed">
                <title-header />
                <uni-nav-bar title="物流公司" class="common-header" left-icon="back" @clickLeft="hidePopup('popupExpress')">
                    <view class="div common-btn btn" slot="right" @click="setExpress(0,'无需物流')">无需物流</view>
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
				<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true" :scroll-into-view="letter">
                <view class="div input-wrapper">
                    <input class="input" ref="input" type="text" v-model="keyword" placeholder="输入关键词" @keydown.enter="searchExpress()"/>
                </view>
                <view class="div" v-if="!keyword || !resultList">

                    <view class="div select-wrapper" v-if="my_express && my_express.length">
                        <view class="div title">我的物流</view>
                        <view class="div content">
                            <view class="div item" v-for="(item,index) in my_express" :key="index" @click="setExpress(item.express_id,item.express_name)"><text class="span text">{{item.express_name}}</text></view>
                        </view>
                    </view>
                    <view class="div select-wrapper" v-if="hot_express && hot_express.length">
                        <view class="div title">常用物流</view>
                        <view class="div content">
                            <view class="div item" v-for="(item,index) in hot_express" :key="index" @click="setExpress(item.express_id,item.express_name)"><text class="span text">{{item.express_name}}</text></view>
                        </view>
                    </view>
                    <view class="div sort-list">
                        <view class="div" v-for="(group,index) in all_express" :key="index">
                            <view class="div letter" :id="group.letter">{{group.letter}}</view>
                            <view class="div content">
                                <view class="div item" v-for="(item,key) in group.list" :key="key" @click="setExpress(item.express_id,item.express_name)">{{item.express_name}}</view>
                            </view>
                        </view>
                    </view>

                </view>
                <view class="div" v-else>
                    <view class="div sort-list">
                        <view class="div content" v-if="resultList.length">
                            <view class="div item" v-for="(item,key) in resultList" :key="key" @click="setExpress(item.express_id,item.express_name)">{{item.express_name}}</view>
                        </view>
                        <empty-record v-else></empty-record>
                    </view>
                </view>
                <view class="div nav-list" v-if="!keyword || !resultList">
                    <view class="div item" v-for="(item,index) in all_express" :key="index" @click="scrollTo(item.letter)">{{item.letter}}</view>
                </view>
				</scroll-view>
            </view>
        </view>
        </uni-popup>

    </view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'

import SellerBase from '../SellerBase'
import { getExpressList, getExpressInfo } from '../../../api/sellerExpress'
import { sendOrder } from '../../../api/sellerOrder'

import EmptyRecord from '../../EmptyRecord'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    SellerBase,
    flexLine,
    EmptyRecord
  },
  name: 'SellerOrderSend',
  data(){
    return {
      letter:'',
      navHeight: 0,
      screenWidth:0,
      keyword: '',
      order_id: 0,
      daddress_info: false,
      shipping_code: '',
      shipping_express_id: 0,
      express_name: '无需物流',
      all_express: [],
      hot_express: [],
      my_express: [],
      resultList: false
    }
  },

  computed:{

  fontSize(){

    return getFontSize()

  },

  },
  onLoad: function (option) {
	this.order_id = option.order_id
  },
  onShow(){
    getExpressInfo(this.order_id).then(res => {
      this.daddress_info = res.result.daddress_info
    }).catch((error)=> {
      uni.showToast({icon:'none',title: error.message})
      if (error.code == '12002') {
        this.goAddress()
      }
    })
    getExpressList(this.order_id).then(res => {
      this.all_express = res.result.all_express
      this.my_express = res.result.my_express
      this.hot_express = res.result.hot_express
    }).catch((error)=> {
      uni.showToast({icon:'none',title: error.message})
    })
  },

  mounted(){

    // #ifdef  MP-WEIXIN

    this.navHeight = uni.getMenuButtonBoundingClientRect().height

    // #endif

    this.screenWidth=uni.getSystemInfoSync().screenWidth

  },

  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    setExpress (id, name) {
      this.shipping_express_id = id
      this.express_name = name
	  this.hidePopup('popupExpress')
    },
    scrollTo (str) {
      this.letter=str
    },
    searchExpress () {
      if (!this.keyword) {
        this.resultList = false
      } else {
        var resultList = []
        for (var i in this.all_express) {
          for (var j in this.all_express[i].list) {
            var str = this.all_express[i].list[j].express_name
            if (str.search(this.keyword) != -1) {
              resultList.push(this.all_express[i].list[j])
            }
          }
        }
        this.resultList = resultList
      }
    },
    goAddress () {
      if (this.daddress_info) {
        uni.navigateTo({url:'/pages/seller/address/AddressList'})
      } else {
        uni.navigateTo({url:'/pages/seller/address/AddressForm'+'?'+urlencode({
            action: 'add',
            isFromCheckout: true,
            goBackLevel: -1
          })})
      }
    },
    submit () {
      if (this.shipping_express_id == 0) {
        this.shipping_express_id = ''
      }
      if (!this.daddress_info) {
		uni.showToast({icon:'none',title: '请先添加发货地址'})
        return
      }
      if (this.shipping_express_id != '' && this.shipping_code == '') {
		uni.showToast({icon:'none',title: '请先填写物流单号'})
        return
      }
      sendOrder(this.order_id, this.shipping_express_id, this.shipping_code, this.daddress_info.daddress_id).then(res => {
        uni.showToast({icon:'none',title: res.message})
        uni.navigateBack({delta:1})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>
<style  lang="scss" scoped>
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .main-content{background: #fff;padding:0 $pageSpace}
    .daddress_info{display: flex;
        .line{display: flex;
            .line-content{flex:1}
        }
        .top-wrapper {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            background-color: #fff;
        }
        .title-wrapper {
            height: 1rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
        .icon {
            font-size:$h1;
            margin-right: .2rem;
            color:$primaryColor
        }
        .title {
        }
        .default {
            width: 1.4rem;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            border: 1px solid #e93b3d;
            color: $primaryColor;
            font-size:$h6;
            text-align: center;
            border-radius: 0.1rem;
        }
        .desc {
            color: $descTextColor;
            font-size:$subFontSize;
        }
        .address-text {
            margin-top: .3rem;
            font-weight: normal;
        }
        .selected-wrapper{
            flex: 1;
            padding:1rem 0;
        }
        .unselected-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding:2rem 0;
        }
        .indicator {
            height: 0.6rem;
            margin-left: 0.5rem;
            margin-right: $pageSpace;
        }
        .line-wrapper {
            background:#eee;
            // position: relative;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 0.1rem;
        }
    }
    .nav-list{position: fixed;right:0;top:5.5rem;font-size:$fontSize;text-align: center;bottom:4rem;
        .item{height: 4.347826%;width:1rem;}
    }
    .input-wrapper{padding:1rem;position:relative;font-size:$subFontSize;text-align: center;
        .placeholder{position: absolute;top:1rem;left:0;width:100%;color:#999;line-height: 1.5rem;}
        .input{width:100%;height: 1.5rem;line-height: 1.5rem;border-radius: 1.5rem;border:1px solid #e1e1e1;text-align: center;}
    }
    .select-wrapper{
        .title{padding:1rem;font-size:$subFontSize;color:#666;padding-top:0}
        .content{overflow:hidden;padding:0 .5rem;
            .item{float:left;width:25%;padding:0 .5rem;box-sizing:border-box;font-size:$subFontSize;height:1.5rem;line-height:1.5rem;margin-bottom:1rem;
                .text{border:1px solid #e1e1e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border-radius:.2rem;text-align:center;background:#fff;
                }
            }
        }
    }
    .sort-list{padding:0 1rem;font-size:$subFontSize;
        .letter{}
        .content{padding-bottom:1rem;
            .item{line-height:2rem;border-bottom:1px solid #e1e1e1}
        }
    }
</style>