lilishop-uniapp/pages/order/fillorder.vue

<template>
  <div class="wrapper">
    <!-- 选择地址 -->
    <div class="box1 box">
      <u-row style="margin-top: 32rpx">
        <u-col style="padding: 0 !important" :offset="0" :span="11" @click.native="clickToAddress()">
          <div v-if="!address.id">请选择地址</div>
          <div v-else>
            <div class="userClass">
              {{ address.name }}
              <span>
                {{ address.mobile | secrecyMobile }}
                <u-tag v-if="address.isDefault" text="默认" style="margin-left: 24rpx" mode="plain" type="error" size="mini" />
              </span>
            </div>
            <div class="userAdress">
              <span v-if="address.consigneeAddressPath[0]">{{
                address.consigneeAddressPath[0]
              }}</span>

              <span v-if="address.consigneeAddressPath[1]">{{
                address.consigneeAddressPath[1]
              }}</span>
              <span v-if="address.consigneeAddressPath[2]">{{
                address.consigneeAddressPath[2]
              }}</span>

              <span v-if="address.consigneeAddressPath[3]">{{
                address.consigneeAddressPath[3]
              }}</span>
              <span>
                {{ address.detail }}
              </span>
            </div>
          </div>
        </u-col>
        <u-col :span="1" @click.native="
            navigateTo('/pages/mine/address/address?way=' + routerVal.way)
          " style="text-align: right">
          <u-icon name="arrow-right" style="color: #bababa"></u-icon>
        </u-col>
      </u-row>
    </div>
    <!-- 背景 -->
    <div class="bar"></div>

    <!-- 开团信息 -->
    <view class="group-box" v-if="isAssemble">
      <view class="group-title">
        <span v-if="pintuanFlage">你正在开团购买</span>
        <span v-else>为你加入仅差<span>{{routerVal.parentOrder.toBeGroupedNum }}</span>人的团购买</span>
      </view>
      <view class="group">
        <view>
          <u-image borderRadius="50%" shape="square" class="head-img" width="81rpx" height="81rpx" :src="masterWay.face || '/static/missing-face.png'"></u-image>
          <view class="btn-one">团长</view>
        </view>
        <view class="line"> </view>
        <view>
          <!-- 如果有最后一名，显示最后一名，没有最后一名，显示等待参团 -->
          <u-image class="head-img" v-if="endWay.face" :src="endWay.face" borderRadius="50%" shape="square" width="81rpx" height="81rpx">
            <view slot="loading"></view>
          </u-image>

          <u-image class="head-img" borderRadius="50%" shape="square" v-else width="81rpx" height="81rpx" :src="endWay.face || '/static/missing-face.png'"></u-image>

          <view class="wait">{{ endWay.nickname || "等待参团" }}</view>
        </view>
      </view>
    </view>

    <!-- 店铺商品信息 -->
    <div class="box box2" v-for="(item, index) in orderMessage.cartList" :key="index">
      <u-row class="tab1" @click="navigateToStore(item)">
        <u-col :offset="0">
          <span class="ybname">{{ item.storeName }}</span>
        </u-col>
      </u-row>
      <div class="promotionNotice">{{ item.promotionNotice }}</div>
      <u-row class="goodsBorder" v-for="(val, i) in item.skuList" :key="i">
        <u-col class="tabL" :offset="0" @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" :span="3">
          <u-image borderRadius="10rpx" :src="val.goodsSku.thumbnail" alt />
        </u-col>
        <u-col :span="9" @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" class="tabC">
          <div style="overflow: hidden">
            <p class="sp_name">{{ val.goodsSku.goodsName }}</p>
            <p class="sp_promotion" v-if="val.promotion_tags">
              <view class="sp_tag sp_tag_plain" v-for="(promotion_item, promotion_index) in val.promotion_tags" :key="promotion_index">{{ promotion_item }}</view>
            </p>
            <span class="nums">x{{ val.num }}</span>
          </div>

          <p class="sp_number">￥{{ val.goodsSku.price | unitPrice }}</p>
        </u-col>
      </u-row>

      <u-row>
        <u-col :offset="0" :span="4" class="tl" style="text-align: left">备注信息</u-col>
        <u-col :span="8" textAlign="right">
          <u-input style="text-align:right;" class="uinput" v-model="remarkVal[index].remark" />
        </u-col>
      </u-row>
    </div>
    <!-- 订单信息 -->
    <div class="box box3">
      <u-row>
        <u-col :offset="0" :span="4">发票信息</u-col>
        <u-col :span="8" class="tipsColor" textAlign="right" @click.native="invoice()">
          <span v-if="receiptList">{{receiptList.receiptTitle}} - {{receiptList.receiptContent}}</span>
          <span v-else>不开发票</span>
        </u-col>
      </u-row>
    </div>

    <!-- 发票信息 -->
    <invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
    <u-select v-model="shippingFlag" :list="shippingMethod"></u-select>

    <!-- 优惠券 -->
    <div class="box box4">
      <u-row>
        <u-col :offset="0" :span="9" @click="shippingFlag = true">配送方式</u-col>
        <u-col :span="3" textAlign="right" @click="shippingFlag = true">
          {{   shippingMethod.find(e=>{  return e.value == shippingText; }).label }}
        </u-col>
      </u-row>
      <u-row>
        <u-col :offset="0" :span="9" @click="GET_Discount()">优惠券</u-col>

        <u-col :span="3" v-if="orderMessage.priceDetailDTO && orderMessage.priceDetailDTO.couponPrice" textAlign="right" @click="GET_Discount()">
          <span class="main-color">-{{orderMessage.priceDetailDTO.couponPrice | unitPrice}}</span>
        </u-col>
        <!--  orderMessage.priceDetailDTO.couponPrice | unitPrice  -->
        <u-col :span="3" v-else textAlign="right" @click="GET_Discount()">
          {{ couponNums || "0" }}张可用
          <u-icon name="arrow-right"></u-icon>
        </u-col>
      </u-row>

    </div>

    <div class="box box5" v-if="orderMessage.priceDetailDTO">
      <div>
        <u-row>
          <u-col :span="9">商品合计</u-col>
          <u-col :span="3" textAlign="right">
            <span>￥{{ orderMessage.priceDetailDTO.goodsPrice | unitPrice }}</span>
          </u-col>
        </u-row>
      </div>
      <div>
        <u-row>
          <u-col :span="7">运费</u-col>
          <u-col :span="5" class="tr tipsColor" textAlign="right">
            <u-tag v-if="orderMessage.priceDetailDTO.freightPrice == 0" style="margin-right: 20rpx" color="#FF6262" text="包邮" type="warning" size="mini" mode="plain" shape="circle" />
            <span>￥{{
                orderMessage.priceDetailDTO.freightPrice | unitPrice
              }}</span>
          </u-col>
        </u-row>
      </div>

      <div>
        <u-row>
          <u-col :span="9">优惠金额</u-col>
          <u-col :span="3" textAlign="right">-￥{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</u-col>
        </u-row>
      </div>
      <div>
        <u-row>
          <u-col :span="6">活动优惠</u-col>
          <u-col :span="6" class="tr tipsColor" textAlign="right">
            <u-tag style="margin-right: 20rpx" v-if="orderMessage.priceDetailDTO.discountPrice != 0" color="#FF6262" :text="`优惠 ${orderMessage.priceDetailDTO.discountPrice} 元`" type="warning"
              size="mini" mode="plain" shape="circle" />
            <span>{{
              orderMessage.priceDetailDTO.discountPrice | unitPrice
            }}</span>
          </u-col>
        </u-row>
      </div>
    </div>

    <!-- 配送地区没有提示 -->
    <div class="notSupportFreight">
      <u-notice-bar style="width:100%" :volume-icon="false" mode="horizontal" :list="notSupportFreightGoodsList"></u-notice-bar>
    </div>

    <!-- 结账 -->
    <div class="box6 mp-iphonex-bottom" v-if="orderMessage.priceDetailDTO">
      <div class="tabbar-left">
        合计：
        <span class="number">
          ¥
          <span>{{ orderMessage.priceDetailDTO.billPrice | unitPrice }}</span>
        </span>
      </div>
      <div class="navRiv" @click="createTradeFun()">
        <!-- #ifndef MP-WEIXIN -->
        <div class="tabbar-right">提交订单</div>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <div class="tabbar-right">微信支付</div>
        <!-- #endif -->

      </div>
    </div>
  </div>
</template>
<script>
import * as API_Trade from "@/api/trade";
import * as API_Address from "@/api/address";
import * as API_Order from "@/api/order";
import invoices from "@/pages/order/invoice/setInvoice";

import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";

export default {
  onLoad: function (val) {
    this.routerVal = val;
  },
  components: {
    invoices,
  },

  watch: {},
  data() {
    return {
      invoiceFlag: false, //开票开关
      shippingText: "LOGISTICS",
      shippingFlag: false,
      shippingMethod: [
        {
          value: "LOGISTICS",
          label: "物流",
        },
      ],
      isAssemble: false, //是否拼团
      couponNums: "", //结算页面优惠券数量
      selectAddressId: "",
      routerVal: "",
      params: {},
      // 优惠劵
      couponList: "",
      // 已选地址
      address: "",
      // 发票信息
      receiptList: "",
      // 店铺信息
      orderMessage: "",
      data: "",
      // 存储备注
      remarkVal: [],
      detail: "", //返回的所有数据
      endWay: "", //最后一个参团人
      masterWay: "", //团长信息
      pintuanFlage: true, //是开团还是拼团
      notSupportFreight: [], //不支持运费
      notSupportFreightGoodsList: ["以下商品超出配送范围："],
    };
  },
  filters: {
    /**
     * 发票收据类型
     */
    receiptType(type) {
      switch (type) {
        case "VATORDINARY":
          return "增值税普通发票";
        case "ELECTRO":
          return "电子普通发票";
        case "VATOSPECIAL":
          return "增值税专用发票";
        default:
          return "不开发票";
      }
    },
  },

  /**
   * 监听返回
   */
  onBackPress(e) {
    if (e.from == "backbutton") {
      let routes = getCurrentPages();
      let curRoute = routes[routes.length - 1].options;
      routes.forEach((item) => {
        if (
          item.route == "pages/tabbar/cart/cartList" ||
          item.route.indexOf("pages/product/goods") != -1
        ) {
          uni.redirectTo({
            url: item.route,
          });
        }
      });

      if (curRoute.addId) {
        uni.reLaunch({
          url: "/pages/tabbar/cart/cartList",
        });
      } else {
        uni.navigateBack();
      }
      return true; //阻止默认返回行为
    }
  },

  onShow() {
    uni.showLoading({
      mask: true,
    });
    this.getOrderList();
    uni.hideLoading();
    if (this.routerVal.way == "PINTUAN") {
      this.isAssemble = true;
      this.routerVal.parentOrder = JSON.parse(
        decodeURIComponent(this.routerVal.parentOrder)
      );
      this.pintuanWay();
    }
  },
  mounted() {},

  methods: {
    //发票回调 选择发票之后刷新购物车
    async callbackInvoice(val) {
      this.invoiceFlag = false;
      this.receiptList = val;
      if (val) {
        let submit = {
          way: this.routerVal.way,
          ...this.receiptList,
        };
        let receipt = await API_Order.getReceipt(submit);
        if (receipt.data.success) {
          this.shippingFlag = false;
          this.getOrderList();
        }
      }
    },

    // 跳转到店铺
    navigateToStore(val) {
      uni.navigateTo({
        url: "/pages/product/shopPage?id=" + val.storeId,
      });
    },
    // 点击跳转地址
    clickToAddress() {
      this.navigateTo(
        `/pages/mine/address/address?from=cart&way=${
          this.routerVal.way
        }&parentOrder=${encodeURIComponent(
          JSON.stringify(this.routerVal.parentOrder)
        )}`
      );
    },

    // 判断团长以及团员信息
    pintuanWay() {
      const { memberId } = this.routerVal.parentOrder;

      const userInfo = this.$options.filters.isLogin();
      if (memberId) {
        this.endWay = userInfo;
        this.masterWay = this.routerVal.parentOrder;
        this.pintuanFlage = false;
      } else {
        this.pintuanFlage = true;
        this.masterWay = userInfo;
      }
    },
    // 判断发票
    invoice() {
      this.invoiceFlag = true;
    },

    // 领取优惠券
    GET_Discount() {
      // 循环店铺id,商品id获取优惠券
      let store = [];
      let skus = [];
      this.orderMessage.cartList.forEach((item) => {
        item.skuList.forEach((sku) => {
          store.push(sku.storeId);
          skus.push(sku.goodsSku.id);
        });
      });
      store = Array.from(new Set(store));
      skus = Array.from(new Set(skus));
      uni.setStorage({
        key: "totalPrice",
        data: this.orderMessage.priceDetailDTO.goodsPrice,
      });
      this.navigateTo(
        `/pages/cart/coupon/index?way=${this.routerVal.way}&storeId=${store}&skuId=${skus}`
      );
    },

    /**
     * 跳转
     */
    navigateTo(url) {
      uni.navigateTo({
        url,
      });
    },

    /**
     * 提交订单准备支付
     */

    // 创建订单
    createTradeFun() {
      // 防抖
      this.$u.throttle(() => {
        if (!this.address.id) {
          uni.showToast({
            title: "请选择地址",
            duration: 2000,
            icon: "none",
          });
          return false;
        }
        //  创建订单
        let client;
        // #ifdef H5
        client = "H5";
        // #endif
        // #ifdef MP-WEIXIN
        client = "WECHAT_MP";
        // #endif
        // #ifdef APP-PLUS
        client = "APP";
        // #endif

        let submit = {
          client,
          way: this.routerVal.way,
          remark: this.remarkVal,
          parentOrderSn: "",
        };
        // 如果是拼团并且当前用户不是团长
        this.routerVal.parentOrder && this.routerVal.parentOrder.orderSn
          ? (submit.parentOrderSn = this.routerVal.parentOrder.orderSn)
          : delete submit.parentOrderSn;

        /**
         * 创建订单
         */
        API_Trade.createTrade(submit).then((res) => {
          if (res.data.success) {
            uni.showToast({
              title: "创建订单成功!",
              duration: 2000,
              icon: "none",
            });
            // 如果当前价格为0跳转到订单列表
            if (this.orderMessage.priceDetailDTO.billPrice == 0) {
              uni.redirectTo({
                url: "/pages/order/myOrder?status=0",
              });
            } else {
              // #ifdef MP-WEIXIN
              // 微信小程序中点击创建订单直接开始支付
              this.pay(res.data.result.sn);
              // #endif

              // #ifndef MP-WEIXIN
              this.navigateTo(
                `/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
              );
              // #endif
            }
          } else {
            uni.showToast({
              title: res.data.message,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }, 3000);
    },

    /**
     * 微信小程序中直接支付
     */
    async pay(sn) {
      new LiLiWXPay({
        sn: sn,
        price: this.orderMessage.priceDetailDTO.billPrice,
      }).pay();
    },

    /**
     * 获取用户地址
     */
    getUserAddress() {
      // 如果没有商品选择地址的话 则选择 默认地址
      API_Address.getAddressDefault().then((res) => {
        if (res.data.result) {
          res.data.result.consigneeAddressPath =
            res.data.result.consigneeAddressPath.split(",");
          this.address = res.data.result;
        }
      });
    },

    // 获取结算参数
    getOrderList() {
      // 获取购物车可用优惠券
      this.getCartsCouponNums();
      // 获取结算参数
      API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
        res.data.result.cartList.forEach((item, index) => {
          this.remarkVal[index] = {
            remark: item.remark,
            storeId: item.storeId,
          };
        });
        this.orderMessage = res.data.result;

        if (!res.data.result.memberAddress.id) {
          // 获取会员默认地址
          this.getUserAddress();
        } else {
          this.address = res.data.result.memberAddress;
          res.data.result.memberAddress.consigneeAddressPath =
            res.data.result.memberAddress.consigneeAddressPath.split(",");
        }

        if (res.data.result.notSupportFreight.length != 0) {
          this.notSupportFreight = res.data.result.notSupportFreight;

          res.data.result.notSupportFreight.forEach((item) => {
            this.notSupportFreightGoodsList[0] += item.goodsSku.goodsName;
          });
        }
      });
    },

    /**购物车可用优惠券 */
    getCartsCouponNums() {
      API_Trade.getCartCouponNum(this.routerVal.way).then((res) => {
        if (res.data.success) {
          this.couponNums = res.data.result;
        }
      });
    },

    //
  },
};
</script>
<style scoped lang="scss">
.main-color {
  font-weight: bold;
}
.uinput {
  /deep/ input {
    text-align: right;
  }
}
.promotionNotice {
  font-size: 24rpx;
  color: $aider-light-color;
}
.nums {
  color: $light-color;
  float: right;
  width: 15%;
  text-align: center;
}
.wait {
  font-size: 22rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #cccccc;
  text-align: center;
}

.line {
  margin-left: 14rpx;
  margin-right: 14rpx;
  margin-bottom: 50rpx;
  width: 143rpx;
  border-bottom: 2px dotted #999;
}
.tabbar-left {
  margin-left: 32rpx;
}

.btn-one,
.wait {
  margin-top: 14rpx;
}

.btn-one {
  width: 100rpx;
  height: 40rpx;
  background: $light-color;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  text-align: center;
  line-height: 40rpx;
}

.head-img {
  width: 81rpx;
  height: 81rpx;
  margin: 0 auto;
}

.group-title {
  text-align: center;

  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;

  color: $light-color;
}

.group-box {
  height: 242rpx;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #fff;
}

.group {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}
.tr {
  text-align: right;
}

.tl {
  text-align: left;
}

/deep/ .u-col-3 {
  text-align: right;
}

.bar {
  height: 4rpx;
  overflow: hidden;
  width: 100%;
  background: url("/pages/floor/imgs/line.png") no-repeat;
}

.tabC {
  > p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.box2 {
  margin-top: 20rpx;
}
.notSupportFreight {
  position: fixed;

  bottom: calc(100rpx + env(safe-area-inset-bottom)) ;
  // #ifdef H5
  bottom: 100rpx;
  // #endif
  display: flex;
  align-items: center;
  left: 0;
  background: #fdf6ec;
  height: 100rpx;
  width: 100%;
  transition: 0.35s;

  > .tips {
    margin: 0 32rpx;
  }
}
/deep/ .u-notice-bar-wrap {
  width: 100% !important;
}

.userClass {
  font-weight: bold;
  font-size: 32rpx;
  color: $u-content-color;
  > span {
    margin-left: 20rpx;
  }
}

.userAdress {
  margin: 20rpx 0;
  color: $u-tips-color;
  font-size: 26rpx;
}

.box6 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  overflow: hidden;
  line-height: 100rpx;
  margin-bottom: 0px !important;
  background: #fff;
  color: #333;
  display: flex;
  justify-content: space-between;
}

.tabbar-right {
  margin-top: 10rpx;
  height: 80rpx;
  color: #fff;
  line-height: 80rpx;
  background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
  padding: 0 44rpx;
  text-align: center;
  border-radius: 400px;
  margin-right: 32rpx;
}

.sp_tag {
  display: inline;
  background: #f2f2f2;
  padding: 0 20rpx 0 10rpx;
  height: 20rpx;
  line-height: 20rpx;
  font-size: 24rpx;
  color: #262626;
  border-radius: 0.4em;
}

.sp_promotion {
  float: left;
  width: 75%;
  margin: 4rpx 0;
}

.sp_tag_plain {
  margin-left: 8rpx;
  padding: 0 6rpx 0 6rpx;
  background: #fff;
  border: 1px solid $main-color;
  font-size: 24rpx;
  color: $main-color;
  border-radius: 50px;
}

.sp_tag_plain:nth-of-type(1) {
  margin-left: 0;
}

.sp_name {
  float: left;
  width: 75%;
  font-size: 28rpx;
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.sp_type {
  color: $u-tips-color;
  padding: 8rpx 0;
  font-size: 24rpx;
}

.number {
  color: $main-color;
  font-size: 26rpx;
  margin-left: 10rpx;

  > span {
    font-size: 36rpx;
  }
}

.sp_number {
  color: $light-color;
  font-size: 28rpx;
}

.box1 {
  background: #f6f6f6 !important;
  min-height: 166rpx;
  // height: 200rpx;

  /deep/ .u-row {
    border: none;
  }

  margin-bottom: 0 !important;
}

.box {
  border-radius: 40rpx;
  overflow: hidden;
  background: #fff;
  margin-bottom: 20rpx;
  padding: 0 32rpx;
}

.wrapper {
  background: #f9f9f9;
  height: auto;
  padding-bottom: 200rpx;
  overflow: auto !important;
}

.ybname {
  margin-left: 20rpx;
  font-weight: 400;
  color: #333333;
}

/deep/ .u-col {
  padding: 36rpx 0 !important;
}

/deep/ .u-col-3,
.tipsColor {
  color: $u-tips-color;
}

.tabL {
  text-align: left;
  overflow: hidden;

  /deep/ .u-image,
  .u-image__image {
    width: 132rpx !important;
    height: 132rpx !important;
    border-radius: 0.4em !important;
  }
}
</style>