remember-word/pages/index/comfirm/comfirm.vue

<template>
  <view>
    <navBar
      navTitle=""
      :hasLogo="true"
      :color="'#000000'"
      :backBackGroundColor="'rgb(105, 154, 112)'"
    ></navBar>
    <view class="goods">
      <image :src="collection.CollectionImg" mode=""></image>
      <view class="right">
        <view class="title">{{ collection.Name }}</view>
        <text style="font-size: 30rpx" class="price">
          ￥
          <text style="font-size: 48rpx; font-weight: 600" class="price">{{
            collection.Price.toFixed(2)
          }}</text>
        </text>
      </view>
    </view>
    <view class="pay">
      <!-- <u-radio-group v-model="payType" style="width: 100%">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="left">
            <image :src="item.icon"></image>
            {{ item.name }}
          </view>
          <u-radio :name="item.id" active-color="#07C160"></u-radio>
        </view>
      </u-radio-group> -->
      <view class="item">
        <view class="min200">{{ $t("payInfo.buyerName") }}</view>
        <view class="value">{{ nickName }}</view>
      </view>
      <view class="item">
        <view class="min200">{{ $t("payInfo.orderPrice") }}</view>
        <view class="value">{{ collection.Price }}</view>
      </view>
      <view class="item">
        <view class="min200">{{ $t("payInfo.typePrice") }}</view>
        <!-- <view>{{ payTypeName }}</view> -->
        <view>
          <payComponet @payModeHandel="payModeHandel" />
        </view>
        <!-- <u-input
          v-model="payTypeName"
          shape="circle"
          border="none"
          class="login-input"
        ></u-input> -->
      </view>
      <view class="item" v-show="payTypeName === '央行数字人民币'">
        <view class="min200">{{ $t("payInfo.payImages") }}</view>
        <view
          ><u-upload
            :fileList="fileList"
            @afterRead="afterRead"
            @delete="deletePic"
            multiple
            :previewFullImage="true"
          ></u-upload
        ></view>
      </view>
    </view>
    <view
      style="text-align: center; color: #699a70"
      v-if="payTypeName === '央行数字人民币'"
      >{{ $t("payInfo.salesperson") }}
    </view>
    <view class="online-pay" v-else>
      <view class="mode">请选择线上支付方式</view>
      <view class="line"></view>

      <u-radio-group v-model="value">
        <u-radio>
          <view class="mode-pay">
            <image
              src="@/static/image/home/money.png"
              mode="scaleToFill"
              class="img"
            />
            <view class="text">数字人名币</view>
          </view>
        </u-radio>
      </u-radio-group>
    </view>
    <view class="navigation">
      <view class="left">
        <view class="price">
          <text>{{ $t("comfirm.total") }}：</text>
          <text>￥</text>
          <text style="font-size: 46rpx">{{
            collection.Price.toFixed(2)
          }}</text>
        </view>
      </view>
      <view class="right"
        ><u-button class="btn" @click="showCode" :disabled="!uploadFlag">{{
          $t("confirm.payment")
        }}</u-button>
      </view>
      <!-- <u-button :text="$t('comfirm.pay')" @click="showCode" :disabled="!uploadFlag" style="
            width: 484rpx;
            height: 56rpx;
            border-radius: 40rpx;
            margin-top: 30rpx;
            background: rgba(252, 73, 71, 1);
            border-color: #3e3e3e;
            color: #fff;
          "></u-button> -->
    </view>
    <u-popup :show="show" @close="show = false" mode="center">
      <view>
        <view class="pop-title">{{ $t("payInfo.waitConfirm") }}</view>
        <view class="codebox">
          <img :src="qrCode" />
        </view>
        <u-button
          :text="$t('comfirm.copy')"
          color="#699A70"
          @click="copyCode"
          style="
            width: 484rpx;
            height: 56rpx;
            border-radius: 40rpx;
            margin-top: 30rpx;
          "
        ></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import payComponet from "pages/index/comfirm/payComponet/payComponet";
export default {
  components: {
    payComponet,
  },
  data() {
    return {
      list: [
        {
          id: 0,
          name: this.$t("alipay.payment"),
          icon: "/static/image/home/zhifubao.png",
        },
        // {id: 1, name: '微信支付', icon:'/static/image/home/weixin.png'},
      ],
      show: false,
      numTotal: 1,
      payType: 0,
      collection: {},
      fileList: [],
      payTypeName: "央行数字人民币", // 暂时去除线上支付
      nickName: "",
      qrCode: "",
      codeSec: "",
      // 完成上传flag
      uploadFlag: false,
      value: "",
    };
  },
  onLoad: function (option) {
    this.collection = JSON.parse(decodeURIComponent(option.Collection));
    // 从localStorage中获取用户昵称
    this.nickName = uni.getStorageSync("mall-user-info").nickName;
    console.log(this.nickName, "nickName");
  },
  // 监听文件列表，如果长度小于1，禁用提交按钮
  watch: {
    fileList: function (val) {
      if (val.length < 1) {
        this.uploadFlag = false;
      }
    },
  },
  methods: {
    // 将二维码内容复制到剪贴板
    copyCode() {
      uni.setClipboardData({
        data: this.codeSec,
        success: (res) => {
          uni.showToast({
            title: "复制成功",
            icon: "success",
            duration: 2000,
          });
        },
        fail: (res) => {
          uni.showToast({
            title: "复制失败",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    async submit() {
      let res = await this.$api.series.buy({
        collectionsUID: this.collection.CollectionUID,
      });
      if (res.status === 0) {
        // window.location.href = res.data.Url
        uni.requestPayment({
          provider: "alipay",
          orderInfo: res.data.AppParams,
          success: (result) => {
            console.log(result, "成功回调");
            let rawdata = JSON.parse(result.rawdata);
            let outTradeNo = JSON.parse(rawdata.result)
              .alipay_trade_app_pay_response.out_trade_no;
            this.toFinish(outTradeNo);
          },
          fail: (error) => {},
        });
      } else if (res.status === 401) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        uni.clearStorageSync();
      } else {
        uni.hideLoading();
        uni.$u.toast(res.msg);
      }
    },

    // 删除图片
    deletePic(event) {
      this[`fileList`].splice(event.index, 1);
    },
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList`].length;
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        console.log(result, "result");
        let item = this[`fileList`][fileListLen];
        this[`fileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        const Authorization = uni.getStorageSync("token");
        const userId = uni.getStorageSync("mall-user-info").ID;
        let a = uni.uploadFile({
          url: this.$baseUrl + "/mall/upload/file",
          filePath: url,
          name: "file",
          formData: {
            type: "image",
            source: "user",
            mask: userId,
          },
          header: {
            Authorization,
          },
          success: (res) => {
            console.log(res, "res");
            res.data = JSON.parse(res.data);
            resolve(res.data.data.ori_url);
            this.uploadFlag = true;
          },
        });
      });
    },
    // 支付成功跳转
    async toFinish(tradeno) {
      let res = await this.$api.mine.paymentDetail({
        outTradeNo: tradeno,
      });
      if (res.status === 0) {
        console.log(res);
        // uni.$u.toast('支付成功');
        setTimeout(() => {
          uni.navigateTo({
            url:
              "/pages/index/payment/payment?artworkUid=" +
              res.data.pay.artworkUid +
              "&ID=" +
              res.data.pay.ID,
          });
        }, 1000);
      } else {
        uni.hideLoading();
        uni.$u.toast(res.msg);
      }
    },
    // 打开二维码
    async showCode() {
      // 生成二维码
      console.log(this.fileList, "fileList");
      if (!this.payTypeName) {
        uni.$u.toast(this.$t("payInfo.typePrice"));
        return;
      }
      let res = await this.$api.series.createQrcode({
        collectionsUID: this.collection.CollectionUID,
        payTypeName: this.payTypeName,
        payImages: this.fileList.map((item) => item.url),
      });
      if (res.status === 0) {
        this.qrCode = res.data.Code;
        this.codeSec = res.data.CodeSc;
        this.show = true;
      } else {
        uni.$u.toast(res.msg);
      }
    },
    payModeHandel(mode) {
      this.payTypeName = mode === "线下支付" ? "央行数字人民币" : mode;
      console.log(this.payTypeName);
    },
  },
};
</script>

<style lang="scss">
page {
  background: url("@/static/image/home/new_bg.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
}

/deep/ .u-radio {
  width: 550rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.online-pay {
  margin: 40rpx 45rpx;
  background: #ffffff;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 190rpx;

  .mode {
    color: #699a70;
    font-size: 28rpx;
    margin-top: 30rpx;
    margin-bottom: 22rpx;
  }

  .line {
    width: 568rpx;
    height: 0.5rpx;
    background: #9dd0a4;
  }

  .mode-pay {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 30rpx;

    .img {
      width: 26rpx;
      height: 26rpx;
      margin-right: 4rpx;
    }

    .text {
      color: #434343;
      font-size: 24rpx;
    }
  }
}

.goods {
  margin: 40rpx 45rpx;
  background: #ffffff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 40rpx 22rpx;

  image {
    width: 228rpx;
    height: 228rpx;
  }

  .right {
    margin-left: 20rpx;

    .title {
      font-size: 32rpx;
      margin-bottom: 10rpx;
      color: #878787;
    }

    .price {
      color: #699a70;
    }
  }
}

.min200 {
  min-width: 200rpx;
  color: #434343;
}

.value {
  color: #878787;
}

.login-input {
  height: 68upx;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0 20rpx;

  /deep/ .uni-input-placeholder {
    padding: 0 20rpx;
  }

  /deep/ .uni-input-input {
    color: #fff;
    padding: 0 20rpx;
  }
}

.pay {
  margin: 40rpx 45rpx;
  background: #ffffff;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 22rpx;

  .item {
    width: 100%;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin: 10rpx 0;
    margin-bottom: 30upx;

    .left {
      display: flex;
      justify-content: space-between;

      image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        background: #fff;
      }
    }
  }
}

.navigation {
  position: fixed;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 100rpx;
  background: #ffffff;
  padding: 30rpx 16rpx 30rpx 10rpx;

  .left {
    display: flex;
    align-items: center;
    font-size: 20rpx;
    margin-left: 30rpx;
    font-size: 24rpx;

    .num {
      width: 84rpx;
      color: #878787;
      margin-right: 10rpx;
      font-size: 24rpx;
      display: flex;
      align-items: center;
    }

    .price {
      flex: 1;
      color: #434343;

      text:nth-child(1) {
        // color: #000000;
        font-size: 24rpx;
      }

      text:nth-child(2) {
        font-size: 32rpx;
      }

      text:nth-child(3) {
        font-size: 60rpx;
      }
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;
    padding-right: 40rpx;

    .btn {
      width: 258rpx;
      height: 56rpx;
      line-height: 56rpx;
      background: #699a70;
      border-radius: 40rpx;
      color: #ffffff;
      text-align: center;
      border: none;
      // background-color: $tree-theme-color;
    }
  }

  .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;
    }
  }
}

/deep/ .u-upload__button {
  background-color: #878787;
}

/deep/ .u-popup__content {
  background-color: #3e3e3e !important;
  width: 700upx !important;
  height: 880upx !important;
  display: flex !important;
  align-items: center !important;

  .pop-title {
    font-size: 40upx;
    color: #699a70;
    text-align: center;
    margin-bottom: 80upx;
    margin-top: 70upx;
  }

  img {
    width: 520upx;
    height: 520upx;
  }

  .codebox {
    width: 570upx;
    height: 570upx;
    background-color: #fff;
    border-radius: 10upx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>