recycle-mobile/src/components/zj-dialog/zj-dialog-deliver.vue

<template>
  <view class="">
    <u-modal
    	:show="isShow"
    	title="确认发货"
      confirmColor="#01C30B"
    	:showCancelButton="true"
    	@cancel="cancelDialog"
    	@confirm="confirmDialog">
    	<view class="slot-content">
        <view class="row">
          <view class="label">发货方式</view>
          <u-radio-group
              v-model="type"
              placement="row">
          	<u-radio label="自送" activeColor="#01C30B" :name="1"></u-radio>
          	<u-radio label="物流快递" activeColor="#01C30B" :name="2" style="margin-left: 40rpx;"></u-radio>
          </u-radio-group>
        </view>
        <view class="row" v-show="type === 2">
          <view class="label">物流公司</view>
          <view class="value" @tap="isShowCompanyDialog = true">{{company ? company : '请选择'}}</view>
        </view>
        <view class="row" v-show="type === 2">
          <view class="label">物流单号</view>
          <u--input
            border="bottom"
            placeholder="请填写物流单号"
            v-model="orderNo"
            ></u--input>
        </view>
    	</view>
    </u-modal>

    <zjDialogPicker
    	ref="otherWorkerDialog"
    	:isShow="isShowCompanyDialog"
    	:multiple="false"
    	:styleType="2"
    	:title="'物流公司'"
    	:list="companyList"
    	:keyName="'label'"
    	:isSearch="true"
    	@search="searchCompanyDialog"
    	@cancel="isShowCompanyDialog = false"
    	@confirm="confirmCompanyDialog">
    </zjDialogPicker>
  </view>

</template>

<script>
	import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";

	export default {
    components: {
    	zjDialogPicker
    },

		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			orderId: {
				type: String,
				default: ''
			},
		},

		data() {
			return {
        type: 1, // 发货方式
        company: '', // 物流公司
        orderNo: '', // 物流单号

        companyList: [
          {label: '顺丰快递', value: 1},
          {label: '申通快递', value: 1},
        ],
        isShowCompanyDialog: false,
			}
		},

		methods: {
      setValue(id) {

      },

      searchCompanyDialog() {

      },

      confirmCompanyDialog(e) {
        this.company = this.companyList[e[0]].label;
        this.isShowCompanyDialog = false;
      },

			cancelDialog() {
				this.$emit('close');
			},

			confirmDialog() {
        if(this.type === 2 && !this.company) return this.$toast('请选择物流公司');
        if(this.type === 2 && !this.orderNo) return this.$toast('请填写物流单号');

				let url = '';
				if(this.detail.dispatchStatus == 'SQGP') {
					url = '/order/dispatch/ack';
				}else {
					url = '/order/rece/ack';
				}
				this.$axios({
					url,
					method: 'POST',
					params: {
						id: this.orderId,
					},
					isLoading: 1
				}).then(res => {
					uni.$emit('refreshHome');
					uni.$emit('refreshOrderDetail');
					this.$successToast('接收成功');
					this.cancelDialog();
					this.$navPage(`/packageOrder/pages/orderDetail?id=${this.orderId}`);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
		width: 100%;
		.row {
			display: flex;
			align-items: center;
			height: 60rpx;
			margin-top: 20rpx;
			.label {
				color: $sec-font;
				flex-shrink: 0;
				margin-right: 30rpx;
			}
			.value {
        flex: 1;
        // color: $theme-color;
      }
      ::v-deep .u-input {
        height: 40rpx !important;
        padding: 12rpx 0 !important;
      }
		}
	}
</style>