wx-qhb/pageD/deliverGoods/deliverGoods.vue

<template>
  <view class="page">
    <view class="goods-detail">
      <view class="order-num">
        <text>订单号：</text>
        <text>{{ orderDetail.order_no }}</text>
      </view>

      <view class="detail" v-for="item in orderDetail.goods">
        <image class="order-img" :src="item.sku_item.image" mode=""></image>
        <view class="detail-right">
          <view class="title-price">
            <view class="title"> {{ item.goods_name }} </view>
            <view class="price">
              <text style="font-size: 20rpx">￥</text>
              <text>{{ item.amount.split(".")[0] }}</text
              >.
              <text style="font-size: 20rpx">{{
                item.amount.split(".")[1]
              }}</text>
            </view>
          </view>
          <view class="specifications">
            <view class="title"> {{ item.sku_item.item }} </view>
            <text>x{{ item.goods_num }}</text>
          </view>
        </view>
      </view>
      <view class="address" v-if="!isShow">
        <view class="name-address">
          {{
            orderDetail.address_name.split("")[0] +
            "**，***********，" +
            orderDetail.full_address
          }}
        </view>
        <image
          class="eye-icon"
          @click="showContent"
          src="../../static/mine/347.png"
          mode=""
        ></image>
      </view>
      <view class="address" v-else>
        <view class="name-address">
          {{
            orderDetail.address_name +
            "，" +
            orderDetail.address_mobile +
            "，" +
            orderDetail.full_address
          }}
        </view>
        <u-icon name="eye" @click="showContent"></u-icon>
      </view>
    </view>
    <view class="express">
      <view class="_input-1 _input-2">
        <view class="_label">运单号</view>
        <u--input
          placeholder="请输入运单号或扫码获取"
          border="none"
          v-model="code"
          clearable
        ></u--input>
        <image
          @click="scanningNumber"
          class="scanning-icon"
          src="../../static/mine/348.png"
          mode=""
        ></image>
      </view>
      <view class="_input-1" @click="openSelect">
        <view class="_label">物流公司</view>
        <u--input
          placeholder="请输入物流公司"
          border="none"
          v-model="name"
          @change="searchExpress"
          clearable
        ></u--input>

        <SelectExpress
          :show="nameShow"
          :filterList="filterList"
          @selected="selected"
          className="order-manage"
        />
      </view>
    </view>
    <view class="footer">
      <button class="status-2" @click="immediateDelivery">立即发货</button>
    </view>
  </view>
</template>

<script>
import SelectExpress from "../components/selectExpress.vue";
export default {
  components: {
    SelectExpress,
  },
  data() {
    return {
      orderDetail: {},
      isShow: false,
      code: "", //物流单号
      name: "", //物流公司名称
      nameShow: false, //选择物流公司弹窗
      expressCode: "", //选中的快递公司编号
      filterList: [],
      expressNameList: [], //快递公司
    };
  },
  onLoad(options) {
    this.getDetail(options.id);
  },
  watch: {
    nameShow(newVal) {
      console.log(newVal);
    },
  },
  methods: {
    //扫描二维码
    scanningNumber() {
      let _this = this;
      //获取手机权限
      uni.authorize({
        scope: "scope.camera",
        success() {
          _this.scanQrCode();
        },
        fail() {
          //用户拒绝授权
          uni.showToast({
            title: "您拒绝了授权",
            icon: "none",
          });
        },
      });
    },

    //打开下拉
    openSelect() {
      this.nameShow = true;
    },

    //过滤搜索结果
    searchExpress(e) {
      // this.nameShow = true;
      this.filterList = this.expressNameList
        .filter((item) => item.name.includes(e))
        .map((item) => item);
    },

    //获取所有的快递公司
    getExpressNameList() {
      uni.$u.http.get(`/api/express-company`).then((res) => {
        this.expressNameList = res;
        this.filterList = res;
      });
    },

    //获取选中的快递公司
    selected(value) {
      this.name = value.name;
      this.expressCode = value.code;
      this.nameShow = false;
      console.log(this.nameShow);
    },

    //团长发货
    immediateDelivery() {
      uni.$u.http
        .post(`/api/order/merchant_delivery`, {
          order_id: this.orderDetail.id,
          delivery_no: this.code,
          company_code: this.expressCode,
        })
        .then((res) => {
          uni.showToast({
            title: "已发货",
            icon: "none",
          });
          let timer = setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        });
    },
    //扫描条形码
    scanQrCode() {
      uni.scanCode({
        success(res) {
          if (res.result) {
          } else {
            uni.showToast({
              title: "扫描失败",
              icon: "none",
            });
          }
        },
        fail() {
          uni.showToast({
            title: "调用相机失败",
            icon: "none",
          });
        },
      });
    },

    //显示隐藏内容
    showContent() {
      this.isShow = !this.isShow;
    },

    //获取页面基础信息
    getDetail(id) {
      uni.$u.http.get(`/api/order/read?id=${id}`).then((res) => {
        this.orderDetail = res;
      });
    },
  },
  mounted() {
    this.getExpressNameList();
    uni.setNavigationBarTitle({
      title: "立即发货",
    });
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;

  .goods-detail {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 26rpx 20rpx;

    .order-num {
      font-size: 26rpx;
      color: #333;
    }

    .detail {
      margin-top: 28rpx;
      display: flex;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #f4f4f4;

      .order-img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .detail-right {
        width: 70%;

        .title-price {
          display: flex;
          font-size: 28rpx;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          .title {
            width: 330rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .specifications {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 28rpx;
          color: #777;
          margin-top: 10rpx;

          .title {
            width: 330rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .address {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .name-address {
        font-size: 26rpx;
        color: #333;
        width: 72%;
      }
      .eye-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .express {
    border-radius: 16rpx;
    background-color: #fff;
    padding: 0 20rpx;
    margin-top: 20rpx;
    ._input-1 {
      display: flex;
      align-items: center;
      height: 100rpx;
      position: relative;
      ._label {
        font-size: 28rpx;
        color: #222;
        margin-right: 32rpx;
        width: 120rpx;
      }
      .scanning-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
    ._input-2 {
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  //   display: flex;
  //   justify-content: flex-end;
  //   align-items: center;
  padding-top: 20rpx;
  padding-bottom: 80rpx;
  height: 66rpx;
  width: 100%;

  .status-2 {
    background-color: #f83224;
    border-radius: 34rpx;
    font-size: 28rpx;
    color: #fff;
    height: 68rpx;
    border: 2rpx solid #f83224;
    margin: 0 24rpx;
    line-height: 68rpx;
    padding: 0 34rpx;
  }
}
</style>