tire_parts_shop_applets/pages/views/salesSlip/obligation.vue

<template>
  <view>
    <view class="card" v-for="(item,index) in dataList" :key="index">
      <view style="font-size: 26rpx;color: #717171;margin-bottom: 28rpx;">
        {{ item.name }}
      </view>
      <view>
        <view style="display: flex;" v-for="(li,inde) in item.data.orderItemsList" :key="inde">
          <view style="display: flex;width: 100%;align-items: center;margin-bottom: 20rpx;">
            <image :src="li.url"
                   style="width:120rpx;height: 120rpx;border-radius: 10rpx;border: 2rpx solid #EEEEEE;margin-right: 27rpx;"
                   mode="scaleToFill">
            </image>
            <view style="width:477rpx;">
              <view
                  style="display: flex;justify-content: space-between;align-items: center;font-size: 26rpx;color: #4E4E4E;font-weight: 500;">
                <u--text color="#4E4E4E" size="26rpx" :lines="1" :text="li.goodsName"></u--text>
                <view>
                  ￥{{ li.price }}
                </view>
              </view>
              <view style="display: flex;justify-content:flex-end;margin-top: 20rpx;">
                <view style="font-size: 26rpx;color: #4D4D4D;">
                  x{{ li.goodsNum }}
                </view>
              </view>
            </view>
          </view>

        </view>

        <view style="display: flex;justify-content: flex-end;">
          <view style="width: 136rpx;margin-right: 17rpx;">
            <u-button type="primary" text="取消订单" color="#E75F37" shape='circle' plain
                      @click="deleteGoods(item.data.id)"></u-button>
          </view>
          <view style="width: 136rpx;">
            <u-button type="primary" text="去支付" color="#E75F37" shape='circle'
                      @click="paySubmit(item.data,index,ind)"></u-button>
          </view>
        </view>
        <view style="width: 623rpx;height: 2rpx;background: #F1F1F1;margin: 48rpx 0 40rpx 0;">
        </view>
        <view style="font-size: 26rpx;color: #717171;">
          <view style="margin-bottom: 20rx;">
            订单编号：
            <text style="color: #C4C4C4;">{{ item.data.ordNo }}</text>
          </view>
          <view style="margin-bottom: 20rx;">
            支付方式：
            <text style="color: #C4C4C4;">
              {{ item.data.receivableType ? item.data.receivableType : '' }}
            </text>
          </view>
		  <view v-if="item.data.freight > 0">
		    运费：
		    <text style="color: #C4C4C4;">{{ item.data.freight }}</text>
		  </view>
          <view>
            下单时间：
            <text style="color: #C4C4C4;">{{ item.data.createTime }}</text>
          </view>
        </view>
      </view>

    </view>
    <u-empty style="position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%)"
             v-if="dataList.length == 0 && !isLoading" mode="car" text="待付款为空"
             icon="http://cdn.uviewui.com/uview/empty/car.png"/>
  </view>
</template>
<script>
import {
  obligationList,
  update,
  getPaymentType,
  getPaymentByOrder,
} from '@/api/tabBar/shoppingCart.js'

import {closeOrder} from "@/api/tabBar/shoppingCart";

export default {
  data() {
    return {
      dataList: [],
      payList: ['W01', 'A01', 'U01', 'S01'],
      totalPrice: 0.00,
      totalFreight: 0.00,
      isLoading: true,
      payType: null
    }
  },
  watch: {},
  onShow() {
    getPaymentType().then(res => {
      console.log(res.data, 111);
      this.payType = res.data
    })
    this.isLoading = true
    uni.showLoading({
      title: '加载中',
      mask: true
    });
    obligationList().then(res => {
      console.log(res);
      this.dataList = res.data
      this.isLoading = false // 添加这一行
      uni.hideLoading();
    }).catch(err => {
      uni.hideLoading();
    })
  },
  methods: {

    deleteGoods(orderId) {
      console.log(orderId);
      uni.showLoading({
        title: '加载中',
        mask: true
      });
      closeOrder({id: orderId}).then(res => {
        uni.hideLoading();
        console.info('res--------', res)
        uni.showToast({
          title: res.msg,
          icon: 'none',
          duration: 2500
        });
        setTimeout(() => {
          this.getList()
        }, 1000)
      }).catch(err => {
        uni.hideLoading();
      })
    },
    paySubmit(val, index, ind) {
      this.statistics(val, index, ind)
    },
    submit(itemData, index) {
      console.log('itemData-----', itemData)
      if (this.dataList[index].paySuccess == true) {
        uni.showToast({
          title: "当前订单已完成支付, 请勿重复支付",
          icon: 'none',
          duration: 2500
        });
        return
      }
      if (itemData == null || itemData == {}) {
        uni.showToast({
          title: "请先选择要支付的商品",
          icon: 'none'
        });
        return
      }
      if (!itemData.payType) {
        uni.showToast({
          title: "当前订单支付方式异常,请重新购买",
          icon: 'none',
          duration: 2500
        });
        return
      }
      if (itemData.payType && itemData.payType == 'W06') {
        console.log('---------------------------------')
        this.normalPayment(itemData, index)
      }
    },

    async normalPayment(itemData, index) {
      uni.showLoading({
        title: '加载中',
        mask: true
      });
      // 正常支付
      getPaymentByOrder({
        id: itemData.id
      }).then(res => {
        let generateOrderData = res.data
        if (!generateOrderData.reqsn) {
          uni.showToast({
            title: '当前订单号为空，请联系供应商！！！',
            icon: 'none',
            mask: true,
            duration: 2000
          });
          // 详情调用
          this.getList()
          return
        }
        wx.openEmbeddedMiniProgram({
          appId: 'wxef277996acc166c3',
          extraData: {
            cusid: generateOrderData.cusid,
            appid: generateOrderData.appid,
            orgid: generateOrderData.orgid,
            version: generateOrderData.version,
            trxamt: generateOrderData.trxamt,
            reqsn: generateOrderData.reqsn,
            notify_url: generateOrderData.notify_url,
            body: generateOrderData.body,
            remark: generateOrderData.remark,
            validtime: generateOrderData.validtime,
            limit_pay: "",
            randomstr: generateOrderData.randomstr,
            paytype: generateOrderData.paytype,
            signtype: generateOrderData.signtype,
            sign: generateOrderData.sign,
          },
          success: (a) => {
            this.dataList[index].paySuccess = true
            uni.hideLoading();
          },
          fail: (err) => {
            uni.hideLoading();
          }
        })
      }).catch(err => {
        uni.hideLoading();
      })
    },


    getList() {
      uni.showLoading({
        title: '加载中',
        mask: true
      });
      obligationList().then(res => {
        this.dataList = res.data
        uni.hideLoading();
      }).catch(err => {
        uni.hideLoading();
      })
    },


    statistics(orderData, index, ind) {
      orderData.payType = orderData.payType ? orderData.payType : this.payType
      this.totalPrice = 0
      this.totalFreight = 0
      for (let orderItem of orderData.orderItemsList) {
        this.totalPrice += Number(orderItem.price) * Number(orderItem.goodsNum)
      }
      console.log(orderData.goodsTotalNum);
      if (Number(orderData.goodsTotalNum) == 1) {
        this.totalFreight += 5
      }
      this.totalFreight = this.totalFreight.toFixed(2)
      this.totalPrice = this.totalPrice.toFixed(2)
      this.submit(orderData, index)
    }
  }
}
</script>
<style lang="scss" scoped>
.card {
  padding: 54rpx 63rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  ::v-deep .u-button {
    height: 60rpx;
  }
}
</style>