remember-word/pages/mine/confirmOrder/confirmOrder.vue

<template>
  <view>
    <navBar
      navTitle=""
      :hasLogo="true"
      :backToUrl="'/pages/index/index'"
      :isSwitchTab="true"
      :color="'#000000'" :backBackGroundColor="'#3D553D'" 
    ></navBar>
    <view class="info">
      <view class="head">
        <view class="title">{{ $t("payInfo.title") }}</view>
        <view class="user"
          >{{ $t("payInfo.subtxt1") }}<span style="color:#699A70">{{ payInfo.buyerTel }}</span
          >{{ $t("payInfo.subtxt2") }}</view
        >
      </view>
      <view class="item">
        <view class="min160">{{ $t("payInfo.confirmDate") }}：</view>
        <view class="lable">{{ today }}</view>
      </view>
      <view class="item">
        <view class="min160">{{ $t("payInfo.buyerName") }}：</view>
        <view class="lable">{{ payInfo.buyerName }}</view>
      </view>
      <view class="item">
        <view class="min160">{{ $t("payInfo.orderPrice") }}：</view>
        <view class="lable">{{ payInfo.price }}</view>
      </view>
      <view class="item">
        <view class="min160">{{ $t("payInfo.artworkName") }}：</view>
        <view class="lable">{{ payInfo.artworkName }}</view>
      </view>
      <view class="item">
        <view class="min160">{{ $t("payInfo.payTypeName") }}：</view>
        <view class="lable">{{ payInfo.payTypeName }}</view>
      </view>
      <view class="item">
        <view class="min160">{{ $t("payInfo.payImages") }}：</view>
        <view class="imgBox">
          <u--image
            v-for="(item, index) in payInfo.payImages"
            width="300rpx"
            height="300rpx"
            :key="index"
            :src="item"
            @click="privewImg(item)"
            mode="scaleToFill"
          ></u--image>
        </view>
      </view>
    </view>
    <u-button
      :text="$t('comfrim')"
      color="#699A70"
      @click="comfirmPayment"
      style="
        width: 484rpx;
        height: 56rpx;
        border-radius: 40rpx;
        margin-top: 60rpx;
      "
    ></u-button>
    <u-button
      :text="$t('payment.cancel')"
      color="#808080"
      @click="cancelPayment"
      style="
        width: 484rpx;
        height: 56rpx;
        border-radius: 40rpx;
        margin-top: 20rpx;
      "
    ></u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      infoCode: "",
      collectionsInfo: {},
      payInfo: {},
      today: "",
    };
  },
  methods: {
    // 获取核验码信息
    async getCodeInfo() {
      let data = {
        code: this.infoCode,
      };
      let res = await this.$api.series.getQrcodeInfo(data);
      if (res.status === 0) {
        this.collectionsInfo = res.data.collections;
        this.payInfo = res.data.pay;
      } else {
        uni.$u.toast(this.$t("load.failed"));
      }
    },
    // 确认支付
    async comfirmPayment() {
      let data = {
        code: this.infoCode,
      };
      let res = await this.$api.series.confirmPay(data);
      if (res.status === 0) {
        uni.$u.toast(this.$t("payment.confirmSuccess"));
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        uni.$u.toast(res.msg || this.$t("payment.failed"));
      }
    },
    // 取消支付
    async cancelPayment() {
      let data = {
        code: this.infoCode,
      };
      let res = await this.$api.series.cancelPay(data);
      if (res.status === 0) {
        uni.$u.toast(this.$t("payment.cancelSuccess"));
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        uni.$u.toast(res.msg || this.$t("payment.failed"));
      }
    },
    // 预览图片
    privewImg(url) {
      uni.previewImage({
        urls: [url],
      });
    },
  },

  onLoad: function (option) {
    this.infoCode = option.code;
    this.getCodeInfo();
    // 获取今天的日期
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    this.today = year + "年" + month + "月" + day + "日";
  },
};
</script>

<style lang="scss">
page {
  background: url("@/static/image/home/new_bg.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
  box-sizing: border-box;
  // border: 1px solid red;696.1123
  display: flex;
  justify-content: center;
}
.min160 {
  min-width: 160rpx;
  color: #434343;
}
// 居中
.info {
  width: 600rpx;
  height: 1100rpx;
  margin-top: 60rpx;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  padding: 40rpx;
  box-sizing: border-box;
  overflow-y: scroll;
  .head {
    text-align: center;
  }
  .title {
    margin-top: 44rpx;
    font-size: 40rpx;
    color: #434343;
  }
  .lable{
    color: #878787;
  }
  .user {
    font-size: 16rpx;
    color: #878787;
    margin-bottom: 66rpx;
  }
  .content {
    font-size: 24rpx;
    color: #fff;
    text-align: center;
    line-height: 40rpx;
  }
  .item {
    font-size: 30upx;
    width: 400rpx;
    display: flex;
    margin-bottom: 40upx;
    .imgBox {
      width: 300rpx;
      height: 300rpx;
      border: 1px solid #fff;
      margin-left: 20rpx;
    }
    .image {
      width: 300rpx;
      height: 300rpx;
    }
  }
}
</style>