psy_web_share/newScale/paymentPage/index.vue

<template>
  <view class="payment_bg">
    <view
      class="payment_info"
      :style="{
        background: `url(${currentScale.infoImg}) no-repeat center`,
        'background-size': 'cover',
      }"
    >
      <view class="people_num"
        ><text>{{ peopleNum }}人已测</text></view
      >
      <view class="price_num"
        ><text>￥{{ price }}</text></view
      >
      <view class="pay_btn_sm" @click="checkOrder(1)"
        >{{ hasDiscount ? promotionPrice : price }}元解锁专属测试报告</view
      >
    </view>
    <view v-if="currentScale.showDesc" class="payment_desc">
      <image v-if="currentScale" :src="currentScale.descImg" mode="widthFix"></image>
    </view>
    <view class="top_footer">
      <template v-if="hasDiscount">
        <view class="pay_price">
          <view class="pay_price_p">
            <view class="price_left">
              <view class="yh">
                <view class="yh_title">限时优惠</view>
                <view class="yh_yj"
                  ><text>原价</text><text>￥{{ price }}</text></view
                >
              </view>
              <view class="price_center"
                ><text style="font-size: 40rpx; margin-left: 10rpx">￥</text
                ><text>{{ promotionPrice }}</text>
              </view>
            </view>
            <view class="price_right">
              <text>{{ getPriceMod(price, promotionPrice) }}</text>
            </view>
          </view>
        </view>
      </template>
      <view class="pay_btn_lg" @click="checkOrder(1)">
        {{ hasDiscount ? promotionPrice : price }}元解锁专属测试报告
      </view>
      <view
        v-if="hasDiscount"
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 20rpx 0;
        "
      >
        <!-- <view class="people_sy"> 本次优惠剩余名额：{{residueNum}} </view> -->
        <view class="people_sy_time">
          <!-- <uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" /> -->
          <text>优惠倒计时：</text
          ><uni-countdown
            :show-day="true"
            background-color="#FF9D41"
            color="#ffffff"
            :start="start"
            :hour="testHour"
            :minute="testMinute"
            :second="testSecond"
          />
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="center">
      <view class="pay_dialog">
        <view class="btn_area">
          <image
            style="margin-right: 89rpx"
            @click="completeHandle"
            src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/complete_btn.png"
            mode="widthFix"
          ></image>
          <image
            @click="uncompleteHandle"
            src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/uncomplete_btn.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { timestampFormatter } from "../../utils/util.js";
import { photoUrl } from "@/common/config.js";
import chooseImageApi from '../../utils/js_sdk_utils'

const photoUrls = `${photoUrl}/api/show?filePath=./webo`;
export default {
  data() {
    return {
      scaleList: {
        MarriageQuality: {
          infoImg: `${photoUrls}/MarriageQuality/pay_scale_info.png`,
          descImg: `${photoUrls}/MarriageQuality/pay_scale_desc.png`,
          flag: "20220124203027",
          showDesc: true,
        },
        Burnout: {
          infoImg: `${photoUrls}/Burnout/pay_scale_info.png`,
          descImg: `${photoUrls}/Burnout/pay_scale_desc.png`,
          flag: "20210804162506",
          showDesc: true,
        },
        Career: {
          infoImg: `${photoUrls}/Career/pay_scale_info.png`,
          descImg: `${photoUrls}/Career/pay_scale_desc.png`,
          flag: "20210714221054",
          showDesc: true,
        },
        Charm: {
          infoImg: `${photoUrls}/Charm/paymentPage/pay_scale_info.png`,
          descImg: `${photoUrls}/Charm/paymentPage/pay_scale_desc.png`,
          flag: "20210804164957",
          showDesc: true,
        },
        EQtest: {
          infoImg: `${photoUrls}/EQtest/paymentPage/pay_scale_info.png`,
          descImg: `${photoUrls}/EQtest/paymentPage/pay_scale_desc.png`,
          flag: "20210820143117",
          showDesc: true,
        },
        Family: {
          infoImg: `${photoUrls}/Family/pay_scale_info.png`,
          descImg: `${photoUrls}/Family/pay_scale_desc.png`,
          flag: "20210622214416",
          showDesc: true,
        },
        Marriage: {
          infoImg: `${photoUrls}/Marriage/pay_scale_info.png`,
          descImg: `${photoUrls}/Marriage/pay_scale_desc.png`,
          flag: "20210714220600",
          showDesc: true,
        },
        Mbti: {
          infoImg: `${photoUrls}/Mbti/paymentPage/pay_scale_info.png`,
          descImg: `${photoUrls}/Mbti/paymentPage/pay_scale_desc.png`,
          flag: "20211020113914",
          showDesc: true,
        },
        Mental: {
          infoImg: `${photoUrls}/Mental/paymentPage/pay_scale_info.png`,
          descImg: `${photoUrls}/Mental/paymentPage/pay_scale_desc.png`,
          flag: "20210616235331",
          showDesc: true,
        },
        Senile: {
          infoImg: `${photoUrls}/Senile/paymentPage/pay_scale_info.png`,
          descImg: `${photoUrls}/Senile/paymentPage/pay_scale_desc.png`,
          flag: "20210804165314",
          showDesc: true,
        },
        Sleep: {
          infoImg: `${photoUrls}/Sleep/paymentPage/pay_scale_info.png`,
          descImg: `${photoUrls}/Sleep/paymentPage/pay_scale_desc.png`,
          flag: "20210725100704",
          showDesc: true,
        },
      },
      scaleName: "",
      currentScale: null,
      orderNo: "",
      orderInfo: {},
      peopleNum: 0,
      residueNum: 0, // 剩余名额
      price: 0, // 正常价格
      promotionPrice: 0, // 优惠价格
      promotionEndTime: 0, // 结束时间（时间戳）
      testHour: 0, // 时
      testMinute: 0, // 分
      testSecond: 0, // 秒
      start: false,
      userInfo: {},
      checkType: 0,
    };
  },
  onLoad(options) {
    debugger;
    if (options.orderNo) {
      this.orderNo = options.orderNo;
      setTimeout(() => {
        this.payEnsure();
      }, 200);
    }

    if (options && options.tName) {
      this.scaleName = options.tName;
      this.currentScale = this.scaleList[options.tName];
    }

    if (options && options.resultId) {
      this.resultId = options.resultId;
    }

    this.userInfo = uni.getStorageSync("user");
    this.getPeople();
    this.queryPromotion();
  },
  computed: {
    // 是否有折扣
    hasDiscount() {
      let timeSpan = new Date().getTime();
      let endTime = this.promotionEndTime - timeSpan;
      return this.residueNum > 0 && endTime > 0;
    },
  },
  methods: {
    payHandle() {
      // #ifdef H5
      this.is_wx();

      if (this.is_wx()) {
        //在微信中的h5 处理方法
        this.getOrderWx();
      } else {
        this.getH5Pay();
      }
      // #endif
      // #ifdef MP-TOUTIAO
      this.createOrder();
      // #endif
    },
    //微信支付
    getOrderWx() {
      //调用生成订单接口
      //生成后开始调用支付接口
      //至此支付已完成
      //生成订单

      console.log(this.orderInfo);
      this.orderInfo.total = this.hasDiscount ? this.promotionPrice : this.price;
      this.$request
        .post({
          url: `api/wx-pay/jsapiPay`,
          loadingTip: "加载中...",
          data: {
            productId: this.orderInfo.productId,
            userId: this.orderInfo.userId,
            resultId: this.orderInfo.resultId,
            description: this.orderInfo.description,
            total: this.orderInfo.total,
            openId: uni.getStorageSync("openId"),
          },
        })
        .then((res) => {
			//根据返回的信息查询出得出支付需要的
			//  "prepay_id" : "wx201410272009395522657a690389285100"
			//调用查询出支付需要的参数
			//调用方法
			chooseImageApi()
          uni.hideLoading();
        });
    },

    is_wx() {
      let en = window.navigator.userAgent.toLowerCase();
      // 匹配en中是否含有MicroMessenger字符串
      if (en.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },

    // 检查订单支付状态
    checkOrder(type) {
      let _this = this;
      if (_this.orderNo) {
        _this.$request
          .get({
            url: `api/wx-pay/queryOrder/${_this.orderNo}`,
            loadingTip: "加载中...",
            data: {},
          })
          .then((res) => {
            uni.hideLoading();
            let resultInfo = JSON.parse(res.data.body);
            if (resultInfo.trade_state === "SUCCESS") {
              uni.navigateTo({
                url: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
              });
            } else {
              if (type == 0) {
                return;
              } else {
                this.payHandle();
              }
            }
          });
      } else {
        this.payHandle();
      }
    },
    // 拉起微信支付
    getH5Pay(params) {
      this.orderInfo.total = this.hasDiscount ? this.promotionPrice : this.price;
      if (this.orderInfo.total === 0) {
        uni.navigateTo({
          url: `/newScale/${this.scaleName}/testResult?resultId=${this.resultId}&messageShare=1`,
        });
      } else if (this.orderInfo.total > 0) {
        let _this = this;
        _this.$request
          .get({
            url: `api/orderInfo/queryOrderByResultIdAndUserId/${this.orderInfo.userId}/${this.orderInfo.resultId}`,
            loadingTip: "加载中...",
            data: {},
          })
          .then((res) => {
            uni.hideLoading();
            if (res.data && res.data.orderStatus === "支付成功") {
              uni.navigateTo({
                url: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
              });
            } else {
              _this.$request
                .post({
                  url: "api/wx-pay/h5Pay",
                  loadingTip: "加载中...",
                  data: _this.orderInfo,
                })
                .then((res) => {
                  let redirect_url = encodeURIComponent(
                    `https://hnhong-duo.com/webo/newScale/paymentPage/index?orderNo=${res.data.orderNo}&tName=${_this.scaleName}&resultId=${this.resultId}`
                  );
                  window.location.href = `${res.data.codeUrl}&redirect_url=${redirect_url}`;
                });
            }
          });
      }
    },
    createOrder() {
      let _this = this;
      this.orderInfo.total = this.hasDiscount ? this.promotionPrice : this.price;
      let params = {
        resultId: _this.orderInfo.resultId,
        subject: _this.orderInfo.description,
        body: _this.orderInfo.description,
        total_amount: _this.orderInfo.total * 100,
        msgPage: "",
      };
      _this.$request
        .post({
          url: "api/douyin/createOrder",
          loadingTip: "加载中...",
          data: params,
        })
        .then((res) => {
          _this.orderNo = res.data.orderNo;
          let imageUrl =
            "https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/banner1.png";
          _this.syncOrder({
            resultId: params.resultId,
            total_amount: params.total_amount,
            subject: params.subject,
            path: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
            orderNo: _this.orderNo,
            openId: uni.getStorageSync("openId"),
            orderStatus: "1",
            imgPath: imageUrl,
          });
          _this.payToutiao(res.data.orderId, res.data.orderToken, res.data.orderNo);
        });
    },
    payToutiao(orderId, orderToken, orderNo) {
      let _this = this;
      tt.pay({
        orderInfo: {
          order_id: orderId,
          order_token: orderToken,
        },
        service: 5,
        success: (response) => {
          _this.timer = setInterval(() => {
            _this.getQueryOrder(orderNo);
          }, 1000);
        },
        fail: (err) => {
          uni.showToast({
            icon: "none",
            name: "支付失败",
          });
        },
      });
    },
    // 订单状态
    getQueryOrder(orderNo) {
      let _this = this;
      _this.$request
        .get({
          url: `api/douyin/queryOrder/${orderNo}`,
          loadingTip: "加载中...",
          data: {},
        })
        .then((res) => {
          if (res.code == "200") {
            if (res.data.statusCode == "SUCCESS") {
              let imageUrl =
                "https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/banner1.png";
              _this.syncOrder({
                resultId: this.orderInfo.resultId,
                total_amount: _this.orderInfo.total * 100,
                subject: _this.orderInfo.description,
                path: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
                orderNo: orderNo,
                openId: uni.getStorageSync("openId"),
                orderStatus: "2",
                imgPath: imageUrl,
              });
              uni.navigateTo({
                url: `/newScale/${this.scaleName}/testResult?resultId=${_this.orderInfo.resultId}&messageShare=1`,
              });

              clearInterval(_this.timer);
              uni.showToast({
                title: "支付成功",
              });
            } else if (res.data.statusCode == "CLOSED") {
              // console.log("订单支付回调成功===========CLOSED》", _this.trade_state_closed );
            } else {
              clearInterval(_this.timer);
              // console.log("订单支付回调成功CLOSED===========》", _this.trade_state_closed);
            }
          } else {
            uni.showToast({
              title: "支付失败",
            });
          }
        });
    },
    // 查询测试人数
    getPeople() {
      let _this = this;
      _this.$request
        .get({
          url: `record/countByFlag?flag=${this.currentScale.flag}`,
          loadingTip: "加载中...",
        })
        .then((res) => {
          _this.peopleNum = res.data + 57000;
        });
    },
    payEnsure() {
      // console.log(11111)
      this.$refs.popup.open();
    },
    uncompleteHandle() {
      this.$refs.popup.close();
    },
    completeHandle() {
      uni.showLoading({
        title: "",
      });
      this.checkOrder(0);
    },
    // 查询优惠信息
    queryPromotion() {
      let _this = this;
      _this.$request
        .get({
          url: `api/promotionInfo/queryPromotionDetail/${this.currentScale.flag}`,
          loadingTip: "加载中...",
          data: {},
        })
        .then((res) => {
          let { price, name, residueNum, promotionPrice, promotionEndTime } = res.data;
          let params = {
            productId: this.currentScale.flag,
            userId: this.userInfo?.id,
            resultId: this.resultId,
            description: name,
            total: price,
            sceneType: uni.getSystemInfoSync().platform == "android" ? "Android" : "iOS",
          };
          this.orderInfo = params;
          debugger;
          uni.setStorageSync("orderInfo", params);
          this.residueNum = residueNum;
          this.price = price;
          this.promotionPrice = promotionPrice;
          this.promotionEndTime = new Date(promotionEndTime).getTime();
          this.getDhms();
          uni.hideLoading();
        });
    },
    // 获取天时分秒
    getDhms() {
      let timeSpan = this.promotionEndTime - new Date().getTime();
      let time = timestampFormatter(timeSpan);
      this.testHour = time.h;
      this.testMinute = time.m;
      this.testSecond = time.s;
      this.start = true;
    },

    getPriceMod(p1, p2) {
      let p = p1 * 1000 - p2 * 1000;
      return (p / 1000).toFixed(2);
    },
    // 同步订单
    syncOrder(params) {
      this.$request
        .post({
          url: "api/douyin/pushOrder",
          loadingTip: "加载中...",
          data: params,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.payment_bg {
  width: 100%;
  background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/payment_bg.png)
    no-repeat top;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 311rpx;
}

.payment_info {
  width: 750rpx;
  height: 531rpx;
  position: relative;
  margin-top: 143rpx;
  overflow: hidden;
}

.payment_info image {
  width: 100%;
  height: auto;
  margin-top: 134rpx;
}

.payment_info .pay_btn_sm {
  width: 640rpx;
  height: 73rpx;
  line-height: 73rpx;
  position: absolute;
  left: 55rpx;
  bottom: 73rpx;
  background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_button.png)
    no-repeat center;
  background-size: 100% auto;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: bold;
  font-size: 36rpx;
  color: #ffffff;
  text-shadow: 0rpx 0rpx 5rpx rgba(168, 63, 90, 0.5);
  text-align: center;
}

.payment_desc image {
  width: 750rpx;
}

.pay_btn_lg {
  width: 640rpx;
  height: 73rpx;
  line-height: 73rpx;
  background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_button.png)
    no-repeat center;
  background-size: 100% auto;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: bold;
  font-size: 36rpx;
  color: #ffffff;
  text-shadow: 0rpx 0rpx 5rpx rgba(168, 63, 90, 0.5);
  text-align: center;
  margin: 20rpx auto 20rpx;
}

.pay_dialog {
  width: 594rpx;
  height: 360rpx;
  background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/dialog_bg.png)
    no-repeat top;
  background-size: cover;
  position: fixed;
  top: 540rpx;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn_area {
  margin: 240rpx 0 0 96rpx;
}

.btn_area image {
  width: 160rpx;
}

.btn_area image:active {
  border: 1rpx solid #999999;
  opacity: 0.8;
  border-radius: 28rpx;
}

.people_num {
  margin-top: 197rpx;
}

.people_num text {
  min-width: 157rpx;
  height: 44rpx;
  padding: 0 10rpx;
  background: #ffedf1;
  border-radius: 22rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-size: 28rpx;
  color: #fc716d;
  line-height: 44rpx;
  text-align: center;
  margin-left: 373rpx;
}

.price_num {
  margin-top: 62rpx;
}

.price_num text {
  min-width: 74rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: normal;
  font-size: 32rpx;
  color: #fc716d;
  line-height: 24rpx;
  margin-left: 374rpx;
}

.top_footer {
  width: 750rpx;
  background: #ffffff;
  padding-bottom: 20rpx;
  position: fixed;
  bottom: 0;
}

.pay_price {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 50rpx 0 50rpx;
}

.pay_price_y {
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: normal;
  font-size: 24rpx;
  color: #ff2f29;
  line-height: 16rpx;
}

.pay_price_p {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.price_left {
  display: flex;
}

.yh_title {
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: normal;
  font-size: 35rpx;
  color: #ff2f29;
  margin-top: 21rpx;
}

.yh_yj {
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: normal;
  font-size: 24rpx;
  color: #999999;
  text-decoration-line: line-through;
}

.price_center {
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: bold;
  font-size: 78rpx;
  color: #ff2f29;
  margin-top: 7rpx;
}

.price_right {
  width: 176rpx;
  height: 70rpx;
  background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/lijian.png)
    no-repeat;
  background-size: cover;
  padding-top: 50rpx;
}

.price_right text {
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: bold;
  font-size: 32rpx;
  color: #ffffff;
  margin-left: 35rpx;
}

.radio_class {
  display: flex;
  background-color: #ffffff;
  margin-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  border-radius: 5px;
  padding-bottom: 5px;
  align-items: center;
}

.radio_class_1 {
  display: flex;
  justify-content: space-around;
}

.pay_title {
  text-align: center;
  /* margin-top:38px; */
  font-size: 20px;
  font-family: AlibabaPuHuiTi-Heavy, AlibabaPuHuiTi;
  font-weight: 900;
  color: #500000;
  line-height: 101px;
}

.top_page_yh {
  font-size: 14px;
  font-family: Source Han Sans-Regular, Source Han Sans;
  font-weight: 400;
  color: #656c74;
  line-height: 20px;
}

.main_scale_gmcp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_scale_font_gmcp {
  font-size: 16px;
  font-family: Source Han Sans-Medium, Source Han Sans;
  font-weight: 700;
  color: #040000;
}

.main_xing_left {
  height: 30px;
  width: 20px;
  margin-right: 20px;
}

.main_xing_right {
  height: 30px;
  width: 20px;
  margin-left: 20px;
}

.scale_gmcp_connent {
  margin-top: 10px;
  background-color: #ffffff;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  padding: 24px 15px;
  margin-bottom: 200px;
  overflow-y: scroll;
}

.pub_time {
  margin-top: 5px;
  font-size: 12px;
  font-family: Source Han Sans-Regular, Source Han Sans;
  font-weight: 400;
  color: #c4c4c4;
  line-height: 17px;
}

.pub_connnet {
  font-size: 14px;
  font-family: Source Han Sans-Regular, Source Han Sans;
  font-weight: 400;
  color: #3d3d3d;
  line-height: 20px;
}

.people_sy {
  font-size: 14px;
  font-family: Source Han Sans-Regular, Source Han Sans;
  font-weight: 400;
  color: #656c74;
  line-height: 20px;
  margin-left: 4px;
}

.people_sy_time {
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: normal;
  font-size: 32rpx;
  color: #333333;
  line-height: 16rpx;
  display: flex;
  margin-right: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time_ol {
  background: linear-gradient(270deg, #ff9d41 0%, #fc3c3c 100%);
  border-radius: 4px 4px 4px 4px;
  padding: 2px;
  color: #ffffff;
}

.time_mao {
  color: #ff9d41;
}

.pro_tag {
  height: 62rpx;
  padding: 0 20rpx;
  background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/paymentPage/price_bg.png)
    no-repeat center;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  margin-left: 16rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: normal;
  font-size: 24rpx;
  color: #ffffff;

  .price {
    font-family: "Alibaba PuHuiTi 2.0";
    font-weight: bold;
    font-size: 40rpx;
    color: #ffffff;
    line-height: 16rpx;
  }
}
</style>