412 lines
11 KiB
Vue
412 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="sstouch-main-layout mb20">
|
||
<view class="sstouch-oredr-detail-block">
|
||
<view class="h3"><label class="b" style="color:orange;margin-right:10rpx;">{{__('第一步')}}</label> <label class="m-title">{{__('选择出库单')}}</label>
|
||
<block v-if="(orderStock.length > 0)">
|
||
<picker mode="selector" @change="selectOrderStock" :value="id" :range="orderStock" range-key="stock_bill_id" style="float:right">
|
||
<label style="padding:0 40rpx;">{{orderStock[id].stock_bill_id}}</label>
|
||
</picker>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="sstouch-oredr-detail-block ">
|
||
<view class="sstouch-order-item" id="stock_bill" style="border-bottom:0px;"></view>
|
||
</view>
|
||
<view class="sstouch-oredr-detail-block mt5">
|
||
<view class="h3"><label class="b" style="color:orange;margin-right:10rpx;">{{__('第二步')}}</label> <label class="m-title">{{__('确认发货信息')}}</label> </view>
|
||
</view>
|
||
<view class="sstouch-oredr-detail-block ">
|
||
<view class="sstouch-oredr-detail-add">
|
||
<view class="dl" id="address_list">
|
||
<view class="sstouch-oredr-detail-add">
|
||
<view class="m-ber-image" style="width:10%;float:left">
|
||
<view class="iconfont zc zc-shouhuodizhi1 i-type" style="opacity:0.7"></view>
|
||
</view>
|
||
<view class="dl">
|
||
<view class="dt" style="font-size:28rpx;">{{__('收货人')}}：
|
||
<text class="span">{{delivery.da_name}}</text>
|
||
<text class="span">{{delivery.da_mobile}}</text>
|
||
</view>
|
||
<view class="dd">{{__('收货地址')}}：{{delivery.da_province}}/{{delivery.da_city}}/{{delivery.da_county}} {{delivery.da_address}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sstouch-oredr-detail-block mt5">
|
||
<view class="h3"><label class="b" style="color:orange;margin-right:10rpx;">{{__('第三步')}}</label><label class="m-title">{{__('选择物流服务')}}</label> </view>
|
||
</view>
|
||
<view class="sstouch-oredr-detail-block ">
|
||
<view class="tabBox" id="tabBox1">
|
||
<view style="display: inline-block;" v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap">
|
||
<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
|
||
</view>
|
||
<view class="tempWrap" style="overflow:hidden; position:relative;padding:0rpx 36rpx">
|
||
<swiper :current="tabIndex" class="swiper-box" style="flex: 1;height:500rpx;" :duration="300" @change="ontabchange">
|
||
<swiper-item class="swiper-item">
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd" style="margin-top:20rpx"><label class="u-label"><text class="i" style="color: red;">*</text>{{__('发货时间')}}</label></view>
|
||
<view class="m-cell-bd" style="margin-top:20rpx;">
|
||
<picker mode="date" @change="bindDateChange" style="border:2rpx solid #ebebe7;width: 58%;height:60rpx;border-radius:10rpx;line-height:60rpx;display: block;">
|
||
<label>{{delivertime}}</label>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd"><label class="u-label"><text class="i" style="color: red;">*</text>{{__('物流单号')}}</label></view>
|
||
<view class="input-view">
|
||
<input style="font-size:26rpx;margin:10rpx auto;" class="input" type="text" @input="inputnumber">
|
||
</view>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd"><label class="u-label">{{__('物流公司')}}</label></view>
|
||
<picker :value="indexs" :range="logistics_company" range-key="logistics_name" @change="inputcompany" style="border:2rpx solid #ebebe7;width: 40%;height:60rpx;border-radius:10rpx;line-height:60rpx;">
|
||
<label>{{logistics_company[indexs].logistics_name}}</label>
|
||
</picker>
|
||
</view>
|
||
<view class="m-cell">
|
||
<view class="m-cell-hd"><label class="u-label">{{__('备注')}}</label></view>
|
||
<view class="input-view">
|
||
<input style="font-size:26rpx;margin:10rpx auto;" class="input" type="text" @input="inputremarks">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="button-sp-area" style="text-align:center;padding-top:20rpx;"
|
||
:data-flag="1" @click="detebutton">
|
||
<button class="mini-btn" type="warn" size="mini">{{__('确定')}}</button>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<view class="m-conter">
|
||
<label>{{__('如果订单中的商品无需物流运送，您可以直接点击确认')}}</label>
|
||
</view>
|
||
<view class="button-sp-area" style="text-align:center;padding-top:20rpx;"
|
||
:data-flag="2" @click="detebutton">
|
||
<button class="mini-btn" type="warn" size="mini">{{__('无需物流')}}</button>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
order_id:'',
|
||
id:0,
|
||
orderinfo:{},
|
||
delivery:{},
|
||
newsList: [],
|
||
cacheTab: [],
|
||
tabIndex: 0,
|
||
delivertime: '',
|
||
logistics_number:'',
|
||
logistics_company:[
|
||
{logistics_name:'选择快递公司'}
|
||
],
|
||
order_remarks:'',
|
||
logistics_id:0,
|
||
indexs:0,
|
||
orderStock: [],
|
||
tabBars:[
|
||
{
|
||
name: '物流运输',
|
||
id: 1
|
||
},
|
||
{
|
||
name: '无需物流运输',
|
||
id: 2
|
||
}
|
||
]
|
||
}
|
||
|
||
},
|
||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||
mounted() {
|
||
this.delivertime = this.$.dateFormatter(new Date().getTime()/1000 + 60*60*24 * 7);
|
||
},
|
||
onLoad: function(options) {
|
||
uni.setNavigationBarTitle({
|
||
title:this.__('发货')
|
||
});
|
||
|
||
var t = this;
|
||
this.setData({
|
||
order_id:options.on
|
||
})
|
||
this.getOrderdetail();
|
||
|
||
|
||
},
|
||
|
||
onShow: function(){
|
||
this.getlogistics();
|
||
},
|
||
|
||
methods: {
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
getOrderdetail:function () {
|
||
var that = this;
|
||
var params = {
|
||
order_id:that.order_id
|
||
};
|
||
//console.log(params)
|
||
|
||
that.$.request({
|
||
url: this.Config.URL.seller.getOrderStock,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
//console.log(data)
|
||
if(status == 200){
|
||
that.setData({
|
||
orderinfo : data.order_detail,
|
||
delivery : data.order_detail.delivery,
|
||
orderStock : data.stock_bill
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
})
|
||
},
|
||
|
||
selectOrderStock: function (e){
|
||
this.setData({
|
||
id: e.detail.value,
|
||
})
|
||
|
||
//console.log(this.id)
|
||
},
|
||
|
||
|
||
getlogistics: function (){
|
||
var that = this;
|
||
var params = {
|
||
logistics_is_enable:1
|
||
};
|
||
that.$.request({
|
||
url: this.Config.URL.seller.lists_express_logistics,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
if(status == 200){
|
||
if (data.items.length > 0)
|
||
{
|
||
that.setData({
|
||
logistics_company : data.items,
|
||
})
|
||
//console.log(that.logistics_company)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
ontabtap(e) {
|
||
//console.log(e.currentTarget.dataset.current)
|
||
this.setData({
|
||
tabIndex:e.currentTarget.dataset.current
|
||
})
|
||
},
|
||
|
||
bindDateChange: function (e){
|
||
this.setData({
|
||
delivertime: e.detail.value
|
||
})
|
||
},
|
||
|
||
inputnumber: function (e){
|
||
this.setData({
|
||
logistics_number: e.detail.value
|
||
})
|
||
},
|
||
inputcompany: function (e){
|
||
this.setData({
|
||
indexs: e.detail.value,
|
||
})
|
||
},
|
||
inputremarks: function (e){
|
||
this.setData({
|
||
order_remarks: e.detail.value
|
||
})
|
||
},
|
||
|
||
detebutton: function (e){
|
||
var that = this;
|
||
|
||
if (e.currentTarget.dataset.flag === 1)
|
||
{
|
||
if(that.$.isNull(that.delivertime)){
|
||
that.$.alert(that.__("请选择发货时间"));
|
||
return;
|
||
}
|
||
|
||
if(that.$.isNull(that.logistics_number)){
|
||
that.$.alert(that.__("请填写物流单号"));
|
||
return;
|
||
}
|
||
}
|
||
|
||
|
||
if(e.currentTarget.dataset.flag === 2){
|
||
that.delivertime = '';
|
||
}
|
||
|
||
var id = that.indexs
|
||
var t = that.id
|
||
var params = {
|
||
order_id:that.order_id,
|
||
stock_bill_id: that.orderStock[t].stock_bill_id,
|
||
logistics_time: that.delivertime == ''?'' : that.delivertime + " 00:00",
|
||
order_tracking_number:that.logistics_number,
|
||
logistics_id:that.logistics_company[id].logistics_id,
|
||
logistics_explain:that.order_remarks,
|
||
ss_id:0
|
||
};
|
||
that.$.request({
|
||
url: this.Config.URL.seller.saveOrderLogistics,
|
||
method:"POST",
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
if(status == 200){
|
||
that.$.alert("发货成功！", function() {
|
||
setTimeout(function () {
|
||
that.$.gotopage("/seller/order/lists?order_state_id=2040&sl=4")
|
||
}, 1500)
|
||
})
|
||
}else if(status == 250){
|
||
that.$.alert(msg)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
nobutton: function(){
|
||
//console.log(565)
|
||
},
|
||
ontabchange: function(e){
|
||
//console.log(e)
|
||
},
|
||
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/base.scss";
|
||
@import "../../styles/sstouch_member.scss";
|
||
|
||
|
||
.uni-tab-item {
|
||
/* #ifndef APP-PLUS */
|
||
display: inline-block;
|
||
/* #endif */
|
||
flex-wrap: nowrap;
|
||
padding-left: 34rpx;
|
||
padding-right: 34rpx;
|
||
}
|
||
|
||
.uni-tab-item-title {
|
||
color: #555;
|
||
font-size: 30rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
flex-wrap: nowrap;
|
||
/* #ifndef APP-PLUS */
|
||
white-space: nowrap;
|
||
/* #endif */
|
||
}
|
||
|
||
.uni-tab-item-title-active {
|
||
color: #e44d4d;
|
||
}
|
||
|
||
.tabs {
|
||
flex: 1;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
background-color: #ffffff;
|
||
/* #ifdef MP-ALIPAY || MP-BAIDU */
|
||
height: 100vh;
|
||
/* #endif */
|
||
}
|
||
|
||
.line-h {
|
||
height: 1rpx;
|
||
background-color: #cccccc;
|
||
}
|
||
|
||
.m-cell {
|
||
padding:10rpx 0;
|
||
}
|
||
|
||
.m-cell::before {
|
||
border-top: 0px solid #ebebe7;
|
||
}
|
||
|
||
.input-view {
|
||
width: 40%;
|
||
height:60rpx;
|
||
border:2rpx solid #ebebe7;
|
||
border-radius:10rpx;
|
||
line-height:60rpx;
|
||
}
|
||
|
||
.input-view .input {
|
||
background-color: #FFFFFF;
|
||
border: 0; // 去除未选中状态边框
|
||
outline: none; // 去除选中状态边框
|
||
background-color: rgba(0, 0, 0, 0);// 透明背景
|
||
|
||
}
|
||
|
||
|
||
|
||
uni-button {
|
||
width:100%;
|
||
height:80rpx;
|
||
background: #f30213;
|
||
line-height:80rpx;
|
||
font-size:30rpx;
|
||
}
|
||
|
||
.m-conter {
|
||
color: #999;
|
||
text-align: center;
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.b {
|
||
font-size:26rpx;
|
||
}
|
||
|
||
.m-title {
|
||
font-size:30rpx;
|
||
color: #555;
|
||
}
|
||
|
||
.dt {
|
||
font-size:30rpx;
|
||
color: #555;
|
||
}
|
||
|
||
.span {
|
||
font-size:28rpx;
|
||
color: #555;
|
||
}
|
||
|
||
|
||
</style>
|