Client-Teapay/src/pages/to-pay-list/index.vue

<template>
  <view class="container">
    <!-- 收货地址 -->
    <view class="address" v-if="Data.is_sell != 1 && Data.prom_type == 0">
      <block
        v-if="
          DefaultAddress != '' &&
          DefaultAddress.name != '' &&
          DefaultAddress.name != undefined
        "
      >
        <view class="add_head flex_r flex_ac flex_jb">
          <view class="user_info flex_r flex_ac">
            <view class="user_name">{{ DefaultAddress.name }}</view>
            <view class="user_phone">{{ DefaultAddress.mobile }}</view>
          </view>
          <view class="set_address flex_r flex_ac" @tap="chooseWXaddress">
            <image
              class="set_img"
              src="/static/img/setAddress.png"
              mode=""
            ></image>
            <view class="set_text">修改</view>
          </view>
        </view>
        <view class="add_name mar_t20">{{ DefaultAddress.address }}</view>
      </block>
      <block v-else>
        <view
          class="add_address flex_c flex_ac flex_jc"
          @tap="chooseWXaddress('add')"
        >
          <image class="add_icon" src="/static/img/add.png" mode=""></image>
          <view class="add_text">添加收货地址</view>
        </view>
      </block>
    </view>
    <!-- 收货地址-end -->
    <!-- 商品信息 -->
    <view class="goods_info mar_t20">
      <view class="info_type">{{ modularName }}</view>
      <view class="goods flex_r">
        <image class="goods_img" :src="goodsInfo.original_img" mode=""></image>
        <view class="goods_con flex_c flex_jc flex_jb">
          <view class="goods_name ellipsis2">{{ goodsInfo.goods_name }}</view>
          <view class="goods_msg" v-if="Data.type == 2"
            >{{ goodsInfo.trade_price }}元+{{ goodsInfo.trade_num }}批发券+{{
              goodsInfo.treasure_price
            }}茶宝</view
          >
          <view class="goods_msg" v-else>{{ goodsInfo.cost_price }}</view>
          <view class="goods_num">x {{ Data.num }}</view>
        </view>
      </view>
    </view>
    <!-- 商品信息-end -->
    <!-- 订单信息 -->
    <view class="order mar_t20">
      <view class="order_list flex_r flex_ac flex_jb">
        <view class="list_name">数量</view>
        <view class="list_con">{{ Data.num }}</view>
      </view>
      <view class="order_list flex_r flex_ac flex_jb" v-if="Data.is_sell != 1 && Data.prom_type == 0">
        <view class="flex_r flex_ac">
          <view class="list_name">运费</view>
          <view class="list_con p_color">({{ freight }}元/每套)</view>
        </view>
        <view class="list_con">￥{{ $h.Mul(freight, Data.num) }}</view>
      </view>
      <view
        class="order_list flex_r flex_ac flex_jb"
        v-if="Data.type == 2 || Data.type == 5"
      >
        <view class="flex_r flex_ac">
          <view class="list_name">茶宝</view>
          <view class="list_con p_color">(可用{{ userinfo.cha_bao }})</view>
        </view>
        <view class="list_con" v-if="Data.type != 5"
          >{{ goodsInfo.treasure_price * Data.num }} 茶宝</view
        >
        <view class="list_con" v-else
          >{{ $h.Mul(goodsInfo.cha_bao, Data.num) }} 茶宝</view
        >
      </view>
      <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
        <view class="flex_r flex_ac">
          <view class="list_name">批发券</view>
          <view class="list_con p_color">(可用{{ userinfo.integral }})</view>
        </view>
        <view class="list_con"
          >{{ $h.Mul(goodsInfo.trade_num, Data.num) }} 批发券</view
        >
      </view>
      <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type != 5">
        <view class="list_name">商品金额</view>
        <view class="list_con"
          >￥{{
            $h.Mul(
              Data.type == 2 ? goodsInfo.trade_price : goodsInfo.cost_price,
              Data.num
            ) || 0
          }}</view
        >
      </view>
      <view
        class="order_list flex_r flex_ac flex_jb"
        v-if="['1','2','3'].includes(Data.type)"
      >
        <view class="list_name">可用余额</view>
        <view class="list_con p_color">￥{{ userinfo.user_money }}</view>
      </view>
    </view>
    <!-- 订单信息-end -->
    <!-- 底部操作栏 -->
    <view class="bar flex_r flex_ac flex_jb">
      <view class="bar_info flex_r flex_ac"
        >待支付<text>￥{{ obligation }}</text></view
      >
      <view class="pay_btn flex_r flex_ac flex_jc" @tap="payment"
        >立即支付</view
      >
    </view>
    <!-- 底部操作栏-end -->
    <!-- 收获地址弹窗 -->
    <userAddress ref="userAddress" @addressConfirm="loadDa" />
  </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import { post } from "@/request/api.js";
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import userAddress from "pages/xghc-addrress/userAddress";
export default {
  data() {
    return {
      Data: {},
      goodsInfo: "", // 商品信息
      modularName: "", // 商品类型
      DefaultAddress: "", // 用户默认地址
      basicsInfo: "", // 订单信息

      freight: 0, //运费
      userinfo: {},
      obligation: 0, //待支付
    };
  },
  components: {
    userAddress,
  },
  onLoad(e) {
    this.Data = e;
    this.loadData(e);
    this.loadAddress();
    console.log(this.Data);
    this.userinfo = uni.getStorageSync("userinfo");
    // 1零售 2批发 3精品 4今日值买
    this.modularName = this.tidyTpye(e.type);
  },
  mounted() {
    // this.$refs.popup.open('top');
  },
  methods: {
    loadData(da) {
      post("goods/goodsDetail", da).then((res) => {
        if (res.code === 0) {
          this.goodsInfo = res.data.data;
          post("goods/freight", { type: da.type }).then((res) => {
            if (res.code === 0) this.freight = res.data.freight;

            // 计算待支付
            let p = this.Data.type == 2 ? this.goodsInfo.trade_price : this.goodsInfo.cost_price; //商品单价
            let y = (this.Data.is_sell == 1 || this.Data.prom_type == 1) ? 0 : this.freight; // 运费   寄卖的话退运费为0
            // let a = p * this.Data.num + y * this.Data.num; //商品总价
            // let b = a - this.userinfo.user_money; //待支付金额
            let a = this.$h.Mul(p,this.Data.num) + this.$h.Mul(y,this.Data.num); //商品总价
            let b = this.$h.Sub(a,this.userinfo.user_money); //待支付金额
            if (["4", "5", "6"].includes(this.Data.type)) this.obligation = a;
            else this.obligation = b > 0 ? b : 0;
          });
        }
      });
    },
    // 获取用户地址
    loadAddress() {
      post("user/addressList").then((res) => {
        if (res.code === 0) {
          let da = res.data.data;
          for (const i of da) {
            if (i.status == 1) {
              this.DefaultAddress = i;
              break;
            } else this.DefaultAddress = da[0];
          }
          // #ifdef  MP-WEIXIN
          if (!da.length && this.Data.is_sell != 1) this.getwexinAddress();
          // #endif
        }
      });
    },
    //获取微信的收货地址
    getwexinAddress() {
      uni.chooseAddress({
        success(res) {
          if (res.errMsg == "chooseAddress:ok") {
            let data = {
              address:
                res.provinceName +
                res.cityName +
                res.countyName +
                res.detailInfo,
              mobile: res.telNumber,
              name: res.userName,
              is_default: 0,
            };
            post("user/addAddress", data).then((res) => {
              if (res.code === 0) {
                appEv.errTips(res.msg);
                this.loadAddress();
              }
            });
          }
        },
      });
    },

    chooseWXaddress(va) {
      // this.getwexinAddress()
      let a = va != "add" ? this.DefaultAddress.id : "add";
      this.$refs.userAddress.open(a);

      // this.goto("/pages/xghc-addrress/userAddress");
    },
    // 支付
    payment() {
      // #ifdef  H5
      let type = "H5";
      // #endif
      // #ifdef  APP
      let type = "app";
      // #endif
      // #ifdef  MP-WEIXIN
      let type = "jsapi";
      // #endif

      if (!this.DefaultAddress.id) {
        appEv.errTips("请选择地址");
        return;
      }
      let that = this
      if (that.obligation == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "你将使用余额支付该订单",
          showCancel: true,
          confirmText: "确认",
          confirmColor: "#f02f2f",
          success(res) {
            if (res.confirm) {
              post("goods/submitOrder", {
                ...that.Data,
                address_id: that.DefaultAddress.id,
                trade_type: type,
                price: that.goodsInfo.cost_price,
              }).then((res) => {
                if (res.code === 0) {
                  if (res.data.length !== 0) {
                    toPayOpre.toPay(res.data, (rea) => {
                      if (!rea) {
                        // 支付成功
                        appEv.errTips("支付成功");
                        if (that.Data.type == 2 && that.Data.is_sell == 1) {
                          setTimeout(() => {
                            that.goto("/pages/account/consignment");
                          }, 1500);
                        } else {
                          setTimeout(() => {
                            that.goto("/pages/szw-order-list/index");
                          }, 1500);
                        }
                      } else {
                        // 支付失败
                        appEv.errTips("支付已取消");
                      }
                    });
                  } else {
                    appEv.errTips("支付成功");
                    setTimeout(() => {
                      if (that.Data.is_sell != 1)
                      that.goto("/pages/szw-order-list/index");
                      else that.goto("/pages/account/consignment");
                    }, 1500);
                  }
                } else {
                    that.loadData(that.Data);
                }
              });
            }
          },
        });
      } else {
        post("goods/submitOrder", {
          ...that.Data,
          address_id: that.DefaultAddress.id,
          trade_type: type,
          price: that.goodsInfo.cost_price,
        }).then((res) => {
          if (res.code === 0) {
            if (res.data.length !== 0) {
              toPayOpre.toPay(res.data, (rea) => {
                if (!rea) {
                  // 支付成功
                  appEv.errTips("支付成功");
                  if (that.Data.type == 2 && that.Data.is_sell == 1) {
                    setTimeout(() => {
                        that.goto("/pages/account/consignment");
                    }, 1500);
                  } else {
                    setTimeout(() => {
                        that.goto("/pages/szw-order-list/index");
                    }, 1500);
                  }
                } else {
                  // 支付失败
                  appEv.errTips("支付已取消");
                }
              });
            } else {
              appEv.errTips("支付成功");
              setTimeout(() => {
                if (that.Data.is_sell != 1)
                that.goto("/pages/szw-order-list/index");
                else that.goto("/pages/account/consignment");
              }, 1500);
            }
          } else {
            that.loadData(that.Data);
          }
        });
      }
    },

    loadDa(da) {
      this.DefaultAddress = da;
    },
  },
};
</script>
<style lang="scss">
// 页面配置
page {
  background: #f5f5f5;
}

.container {
  padding: 20rpx;
  box-sizing: border-box;
}

// 页面配置-end

// 收货地址
.user_phone {
  font-size: 26rpx;
  color: #222;
}

.set_text {
  font-size: 24rpx;
  color: #868686;
}

.set_img {
  width: 24rpx;
  height: 24rpx;
  margin-right: 9rpx;
}

.add_address {
  width: 100%;
  overflow: hidden;
  height: 109rpx;
}

.add_icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 12rpx;
}

.user_name {
  font-size: 32rpx;
  color: #000;
  margin-right: 46rpx;
}

.add_name {
  width: 448rpx;
  overflow: hidden;
  font-size: 24rpx;
  color: #868686;
}

.add_text {
  font-size: 24rpx;
  color: #868686;
  font-family: "SourceHanSansCN-Normal";
}

.address {
  width: 100%;
  overflow: hidden;
  padding: 28rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12rpx;
}

// 收货地址-end

// 商品信息
.goods:nth-last-child(1) {
  margin-bottom: 0;
}

.goods_num {
  // text-align: right;
  font-size: 26rpx;
  color: #989898;
  position: absolute;
  bottom: 0;
  right: 0;
}

.goods_con {
  width: calc(100% - 202rpx - 36rpx);
  min-height: 187rpx;
  position: relative;
  // overflow: hidden;
}

.goods {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20rpx;
  align-items: initial;
}

.goods_img {
  width: 202rpx;
  height: 187rpx;
  margin-right: 36rpx;
  border-radius: 12rpx;
}

.goods_name {
  font-size: 34rpx;
  color: #1b1b1b;
  font-family: "SourceHanSansCN-Bold";
  font-weight: bold;
}

.goods_msg {
  overflow: hidden;
  font-size: 26rpx;
  color: #18bb88;
  font-family: "SourceHanSansCN-Medium";
  font-weight: 500;
}

.info_type {
  font-size: 30rpx;
  color: #353535;
  font-family: "SourceHanSansCN-Bold";
  font-weight: bold;
  margin-bottom: 43rpx;
}

.goods_info {
  width: 100%;
  overflow: hidden;
  padding: 28rpx;
  background: #fff;
  border-radius: 12rpx;
  box-sizing: border-box;
}

// 商品信息-end

// 订单信息
.list_name {
  width: 112rpx;
  text-align-last: justify;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.8);
  font-family: SourceHanSansCN-Medium;
  font-weight: 700;
}

.order_list:nth-last-child(1) {
  margin-bottom: 0;
}

.order_list {
  width: 100%;
  overflow: hidden;
  margin-bottom: 30rpx;
}

.list_con {
  font-size: 24rpx;
  color: #000;
  font-family: "SourceHanSansCN-Medium";
  font-weight: bold;
  line-height: 1;
}

.order {
  width: 100%;
  overflow: hidden;
  padding: 28rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12rpx;
}

.list_name text {
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.8);
  font-family: "SourceHanSansCN-Medium";
  font-weight: bold;
  line-height: 1;
}

.p_color {
  color: #ff6d44;
}

// 订单信息-end

// 底部操作栏
.bar_info {
  font-size: 24rpx;
  color: #000;
  font-family: "SourceHanSansCN-Medium";
  font-weight: bold;
}

.bar_info text {
  font-size: 30rpx;
  color: #ff6d44;
  font-family: "SourceHanSansCN-Medium";
  font-weight: bold;
}

.pay_btn {
  width: 187rpx;
  height: 72rpx;
  font-size: 30rpx;
  font-family: "SourceHanSansCN-Medium";
  font-weight: bold;
  background: #2db48a;
  border-radius: 36rpx;
  color: #fff;
}

.bar {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.15);
  padding: 14rpx 30rpx;
  box-sizing: border-box;
}

// 底部操作栏-end
</style>