mrr.sj.front/pages/wallet/alipay.vue

<template>
  <view class="add-alipay">
    <!-- 顶部导航栏 -->
    <custom-navbar
      :title="customName.popTitle"
      :showBack="true"
    ></custom-navbar>

    <!-- 表单 -->
    <view class="form">
      <view class="form-item">
        <text>{{ customName.name }}</text>
        <input
          type="text"
		  :maxlength="customName.value==1?255:30"
          v-model="queryData.card_no"
          :placeholder="`请输入${customName.name}`"
        />
      </view>

      <view class="form-item" v-if="queryData.type == 3">
        <text>所属银行</text>
        <input
          type="text"
          v-model="queryData.bank"
          placeholder="请输入所属银行"
        />
      </view>

      <view class="form-item">
        <text>姓名</text>
        <input type="text" v-model="queryData.name" placeholder="请输入姓名" />
      </view>

      <view class="form-item">
        <text>手机号</text>
        <input
          type="number"
          v-model="queryData.phone"
          placeholder="请输入手机号"
        />
      </view>
      <view class="form-item" v-if="queryData.type == 3">
        <text>开户行</text>
        <input
          type="text"
          v-model="queryData.bank_name"
          placeholder="请输入开户行"
        />
      </view>
      <view class="tip"
	  v-if="queryData.type == 3"
        >* 开户行需要填写完整的开户行信息，包含省市县区域及支行名</view
      >
      <view class="default-option">
        <image
          @tap="setDefault"
          class="default-wrapper-img"
          src="/static/images/wallet/default_yes.png"
          v-if="queryData.is_default"
        ></image>
        <image
          @tap="setDefault"
          class="default-wrapper-img"
          src="/static/images/wallet/default.png"
          v-else
        >
        </image>

        <text class="default-text">设为默认</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="btn-group">
      <button
        class="cancel"
        :class="{ 'cancel-active': isFormFilled }"
        @click="goBack"
      >
        取消
      </button>
      <button
        class="confirm"
        :class="{ 'confirm-active': isFormFilled }"
        @click="confirmAdd"
      >
        确认
      </button>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "AddAlipayAccount",
  data() {
    return {
      queryData: {
        modelName: "add",
        user_type: getApp().globalData.artisanType,
        card_no: "",
        name: "",
        phone: "",
        bank: "",
        bank_name: "",
        is_default: 0,
      },
      radioList: [
        {
          name: "支付宝账号",
          value: 1,
          btnText: "+ 添加支付宝账号",
          popTitle: "添加支付宝账号",
        },
        {
          name: "银行卡号",
          value: 3,
          btnText: "+ 添加银行卡号",
          popTitle: "添加银行卡账号",
        },
      ],
      urlList: [
        {
          name: "add",
          url: "/user/UserCard/add",
        },
        {
          name: "edit",
          url: "/user/UserCard/edit",
        },
      ],
    };
  },
  computed: {
    isFormFilled() {
      return (
        this.queryData.card_no.trim() !== "" &&
        this.queryData.name.trim() !== "" &&
        this.queryData.phone.trim() !== ""
      );
    },
    customName() {
      let data = this.radioList.find(
        (item) => item.value == this.queryData.type
      );
      if (!data) {
        return {};
      }
      return data;
    },
  },
  async onLoad(options) {
    if (options.type) {
      //传入typ，设置为添加模式
      this.queryData.type = options.type;
      this.modelName = "add";
    }
    if (options.data) {
      //传入数据，设置为修改模式
      this.queryData = JSON.parse(decodeURIComponent(options.data));
      this.modelName = "edit";
    }
  },
  methods: {
    setDefault() {
      this.queryData.is_default = this.queryData.is_default == 1 ? 0 : 1;
    },
    goBack() {
      uni.navigateBack();
    },
    confirmAdd() {
      // if (!this.isFormFilled) {
      // 	uni.showToast({
      // 		title: '请填写完整信息',
      // 		icon: 'none'
      // 	});
      // 	return;
      // }
      if (!this.queryData.card_no.trim()) {
        uni.showToast({
          title: `请填写${this.customName.name}`,
          icon: "none",
        });
        return;
      }
      if (this.queryData.type == 3) {
        if (!this.queryData.bank.trim()) {
          uni.showToast({
            title: `请填写所属银行`,
            icon: "none",
          });
          return;
        }
      }
      if (!this.queryData.name.trim()) {
        uni.showToast({
          title: `请填写姓名`,
          icon: "none",
        });
        return;
      }
      if (!this.queryData.phone.trim()) {
        uni.showToast({
          title: `请填写手机号`,
          icon: "none",
        });
        return;
      }
      if (!uni.$uv.test.mobile(this.queryData.phone)) {
        uni.showToast({
          title: `请填写正确手机号`,
          icon: "none",
        });
        return;
      }
      if (this.queryData.type == 3) {
        if (!this.queryData.bank_name.trim()) {
          uni.showToast({
            title: `请填写开户行`,
            icon: "none",
          });
          return;
        }
      }
      let obj = {};
      obj.card_no = this.queryData.card_no.trim();
      obj.name = this.queryData.name.trim();
      obj.phone = this.queryData.phone.trim();
      if (this.queryData.type == 3) {
        obj.bank = this.queryData.bank.trim();
        obj.bank_name = this.queryData.bank_name.trim();
      }
      obj.is_default = this.queryData.is_default;
      request
        .post(
          this.urlList.find((item) => item.name == this.modelName).url,
          this.queryData
        )
        .then((res) => {
          console.log(res, "======");
          if (res.code == 200) {
            // 修改上一页页面信息
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];
            if (prevPage) {
              if (prevPage.$vm && typeof prevPage.$vm.search === "function") {
                prevPage.$vm.search(); // 存在则调用
              }
              if (
                prevPage.$vm &&
                typeof prevPage.$vm.getAccount === "function"
              ) {
                prevPage.$vm.getAccount(); // 存在则调用
              }
              uni.navigateBack();
            }
          } else {
          }
        });

      //    // 构造要传回管理页的账号对象（临时 id 使用时间戳）
      //    const newAccount = {
      //      id: 'tmp_' + Date.now(),        // 临时 id，后端返回后可替换
      //      alipay: this.alipayAccount,
      //      name: this.realName,
      //      phone: this.phone,
      //      isDefault: this.isDefault ? 1 : 0
      //    };
      //    uni.$emit('alipayAdded', newAccount);

      //    uni.showToast({ title: '已添加', icon: 'success' });
      //    setTimeout(() => {
      //      uni.navigateTo({
      // url: `/pages/wallet/alipayAccount?newAccount=${encodeURIComponent(JSON.stringify(newAccount))}`
      //          });
      //    }, 200);
    },
  },
};
</script>

<style scoped>
.add-alipay {
  background-color: #f7f7f7;
  height: 100vh;
  padding: 0;
  margin: 0;
  /* font-family: "PingFang SC", "Microsoft YaHei", sans-serif; */
}

/* 顶部栏 */
.header {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  background-color: #fff;
  font-size: 32rpx;
  border-bottom: 1rpx solid #eee;
}

.back {
  font-size: 40rpx;
  color: #333;
  margin-right: 20rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  color: #333;
}

/* 表单部分 */
.form {
  background-color: #fff;
  margin: 20rpx auto 0 auto;
  padding: 0 32rpx;
  border-radius: 20rpx;
  width: 85%;
  /* margin-left: 3%; */
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #f1f1f1;
  padding: 28rpx 0;
}

.form-item text {
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  text-align: left;
  width: 180rpx;
  flex-shrink: 0;
}

.form-item input {
  flex: 1;
  margin-left: 30rpx;
  border: none;
  outline: none;
  font-size: 30rpx;
  color: #333;
  text-align: left;
  background-color: transparent;
  padding: 0;
  box-sizing: border-box;
}

/* 单选项 */
.default-option {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  font-weight: bold;
}

.default-text {
  margin-left: 12rpx;
  font-size: 30rpx;
}

/* 底部按钮 */
.btn-group {
  display: flex;
  justify-content: space-around;
  margin-top: 80rpx;
  padding: 0 32rpx;
}

button {
  width: 40%;
  height: 84rpx;
  border-radius: 48rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
}

/* 取消按钮 禁用态 */
.cancel {
  color: rgba(255, 124, 140, 0.6);
  /* background-color: #fff; */
  border: 2rpx solid #ffb7c3;
}

/* 启用态 */
.cancel.cancel-active {
  border-color: #ff0000;
  color: #ff0000;
}

/* 确认按钮 禁用态*/
.confirm {
  background-color: rgba(255, 124, 140, 0.6);
  color: #fff;
}

/* 启用态 */
.confirm.confirm-active {
  background-color: #ff1c1f;
  color: #fff;
}

.default-wrapper-img {
  width: 30rpx;
  height: 30rpx;
}
.tip {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #FF4767;
  line-height: 30rpx;
  text-align: left;
  font-style: normal;
  margin-top: 20rpx;
}
</style>