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

<template>
  <view class="container">
    <template v-if="Data.is_sell != 1">
      <div class="qtmd mar_b20" v-if="goodsInfo.shipping_method == 2">
        <view class="order_list flex_r flex_ac flex_jb">
          <view class="list_name">发货方式</view>
          <view class="list_con flex_r flex_jb">
            <div class="select_tab" @click="onprom(0)" :class="{st_active:prom_type===0}">快递邮寄</div>
            <div class="select_tab" @click="onprom(1)" :class="{st_active:prom_type===1}">到店自提</div>
          </view>
        </view>
      </div>
      <div class="qtmd mar_b20" v-else>
        <view class="order_list flex_r flex_ac flex_jb">
          <view class="list_name">发货方式</view>
          <view class="list_con flex_r flex_jb">
            <div class="list_con" v-if="prom_type==0">快递邮寄</div>
            <div class="list_con" v-else>到店自提</div>
          </view>
        
        </view>
      </div>
    </template>
    
    <!-- 收货地址 -->
    <view class="address mar_b20" v-if="Data.is_sell != 1 && prom_type != 1">
      <block v-if="DefaultAddress.name" >
        <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.province + ' ' + DefaultAddress.city + ' ' + DefaultAddress.area + ' ' + DefaultAddress.street + ' ' + 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_b20">
      <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">
      <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 && prom_type != 1">
        <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, //待支付

      prom_type: 0,
    };
  },
  components: {
    userAddress,
  },
  onLoad(e) {
    this.Data = e;
    this.getuserInfo();
    this.loadAddress();
    this.loadData(e);
    // this.userinfo = uni.getStorageSync("userinfo");

    // 1零售 2批发 3精品 4今日值买
    this.modularName = this.tidyTpye(e.type);
  },
  mounted() {
    // this.$refs.popup.open('top');
  },
  methods: {
    onprom(va){
      this.prom_type = va
      this.loadData(this.Data);
    },
    loadData(da) {
      post("goods/goodsDetail", da).then((res) => {
        if (res.code === 0) {
          this.goodsInfo = res.data.data;
          if(this.goodsInfo.shipping_method != 2) this.prom_type = this.goodsInfo.shipping_method
          post("goods/freight", { type: da.type, id: da.id }).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.prom_type == 1) ? 0 : this.freight; // 运费单价   寄卖、自提 运费为0
            let ps = this.$h.Mul(p,this.Data.num); //商品总价
            let ys = this.$h.Mul(y,this.Data.num) //运费总价
            let a = this.$h.Add(ps, ys); //商品总价加运费
            let b = this.$h.Sub(a,this.userinfo.user_money); //待支付金额
            let b1 = this.$h.Sub(ps,this.userinfo.user_money); //待支付金额 零售&批发   运费必须现金支付
            if (["4", "5", "6"].includes(this.Data.type)) this.obligation = a;
            else if (["1", "2"].includes(this.Data.type)) this.obligation = b1 > 0 ? this.$h.Add(b1, ys) : ys;
            else this.obligation = b > 0 ? b : 0;
          });
        }
      });
    },
    // 获取用户地址
    loadAddress() {
      post("user/addressList").then((res) => {
        if (res.code === 0) {
          let da = res.data.data;
          if(da.length){
            for (const i of da) {
              if (i.status == 1) {
                this.DefaultAddress = i;
                break;
              } else this.DefaultAddress = da[0];
            }
          }
          console.log('this.DefaultAddress',this.DefaultAddress);
          // #ifdef  MP-WEIXIN
          // if (!da.length && this.Data.is_sell != 1) this.getwexinAddress();
          // #endif
        }
      });
    },
    //获取微信的收货地址
    getwexinAddress() {
      let that = this
      uni.chooseAddress({
        success(res) {
          console.log(res);
          if (res.errMsg == "chooseAddress:ok") {
            let data = {
              province: res.provinceName,
              city: res.cityName,
              area: res.countyName,
              street: res.streetName,
              address: 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);
                that.loadAddress();
              }
            });
          }
        },
      });
    },

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

    // 支付
    payment() {
      let type = "H5";
      // #ifdef  H5
      type = "H5";
      // #endif
      // #ifdef  APP
      type = "app";
      // #endif
      // #ifdef  MP-WEIXIN
      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 || '',
					      regional_code: that.DefaultAddress.regional_code || '',
                trade_type: type,
                prom_type: that.prom_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 || '',
          regional_code: that.DefaultAddress.regional_code || '',
          trade_type: type,
          prom_type: that.prom_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;
    },

    // 获取userinfo
    async getuserInfo() {
      let res = await post("/user/userinfo")
      if (res.code === 0) {
        uni.setStorageSync("userinfo", res.data.data);
        this.userinfo = res.data.data;
      }
    },
  },
};
</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

.qtmd{
  width: 100%;
  padding: 28rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12rpx;
  .select_tab{
    margin-left: 30rpx;
    font-size: 28rpx;
    &:first-child{
      margin-left: 0;
    }
    &::before{
      content: "";
      display: inline-block;
      width: 32rpx;
      height: 32rpx;
      background-image: url("~@/static/img/weixuanzhong_icon.png");
      background-size: 100% 100%;
      vertical-align: middle;
      margin-right: 6rpx;
    }
  }
  .st_active{
    &::before{
      background-image: url("~@/static/img/xuanzhong_icon.png");
    }
  }
}
</style>