web-africa-h5/pages/prefecture/part/register.vue

<template>
  <view>
    <!-- <view class="form-title redtitle">嗨粉会员信息</view> -->
    <view class="prefecture form-group mb20">
      <!-- 服务中心 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("fn_131") }}
        </view>
        <view class="disabled-input">{{ form.fwzx }}</view>
      </view>
      <!-- 申请级别 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("w_0240") }}
        </view>
        <view class="disabled-input">{{ form.pkGradeVal }}</view>
      </view>
      <!-- 自然国家 -->
      <view class="form-item" @click="openCPop('pkCountry')">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("PER_DA_3") }}
        </view>
        <view class="flex-1 d-s-c" style="width: 100%; justify-content: flex-end;">
          <image
            class="queryimg mr10"
            mode="heightFix"
            :src="
              pkCountry >= 0 && countryList[pkCountry]
                ? countryList[pkCountry].nationalFlag1
                : ''
            "
          ></image>
          <view >{{
            pkCountry >= 0 && countryList[pkCountry]
              ? countryList[pkCountry].shortName
              : ""
          }}</view>
        </view>
        <text class="icon iconfont icon-jiantou"></text>
      </view>
      <!-- 结算国家 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("PER_DA_4") }}
        </view>
        <view class="flex-1 d-s-c" style="width: 100%; justify-content: flex-end;">
          <image
            class="queryimg mr10"
            mode="heightFix"
            :src="
              pkSettleCountry >= 0 && countryList[pkSettleCountry]
                ? countryList[pkSettleCountry].nationalFlag1
                : ''
            "
          ></image>
          <view style="padding-right: 30rpx;">{{
            pkSettleCountry >= 0 && countryList[pkSettleCountry]
              ? countryList[pkSettleCountry].shortName
              : ""
          }}</view>
        </view>
      </view>
      <!-- 推荐编号 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("N_I_164") }}
        </view>
        <input
          @blur="changeInput('parent')"
          class="form-input"
          type="text"
          v-model="form.parent"
          :placeholder="$t('w_0264')"
        />
      </view>
      <!-- 推荐姓名 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("N_I_165") }}
        </view>
        <view class="disabled-input">{{ form.parentName || "" }}</view>
      </view>
      <!-- 安置编号 -->
      <view class="form-item" v-if="!isFirst">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("N_I_167") }}
        </view>
        <input
          @blur="changeInput('placeParent')"
          class="form-input"
          type="text"
          v-model="form.placeParent"
          :placeholder="$t('w_0266')"
        />
      </view>
      <!-- 安置编号 -->
      <view class="form-item" v-else>
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("N_I_167") }}
        </view>
        <view class="disabled-input">{{ form.placeParent }}</view>
      </view>
      <!-- 安置姓名 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("N_I_166") }}
        </view>
        <view class="disabled-input">{{ form.placeParentName }}</view>
      </view>
      <!-- 安置位置 -->
      <view
        class="form-item"
        style="border-bottom: 1rpx solid #eee"
        @click="openPlaceDept"
      >
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("N_I_168") }}
        </view>
        <view class="form-input">{{ placeIndex }}</view>
        <text class="icon iconfont icon-jiantou" v-if="!isFirst"></text>
      </view>
      <u-picker
        :cancelText="$t('MN_F_31')"
        :confirmText="$t('MN_F_32')"
        @cancel="placeDeptShow = false"
        :show="placeDeptShow"
        ref="placeDeptList"
        :columns="[placeDeptList]"
        @confirm="changePlaceDept"
        keyName="name"
      ></u-picker>
      <!-- 会员姓名 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("CK_KS_14") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.memberName"
          :placeholder="$t('S_C_70')"
        />
      </view>
      <!-- 联系方式 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("MN_F_23") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.phone"
          :placeholder="$t('S_C_70')"
        />
      </view>
      <!-- 发货方式 -->
      <view
        class="form-item"
        style="border-bottom: 1rpx solid #eee"
        @click="opendeliveryShow"
        v-if="deliveryList"
      >
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("w_0061") }}
        </view>
        <view class="form-input">{{ deliveryIndex }}</view>
        <text class="icon iconfont icon-jiantou" v-if="userCountry != 1"></text>
      </view>
      <u-picker
        :cancelText="$t('MN_F_31')"
        :confirmText="$t('MN_F_32')"
        @cancel="deliveryShow = false"
        :show="deliveryShow"
        ref="deliveryList"
        :columns="[deliveryList]"
        @confirm="changeDelivery"
        keyName="label"
      ></u-picker>
      <!-- 会员店铺 -->
      <view
        class="form-item"
        style="border-bottom: 1rpx solid #eee"
        @click="openStoreDialog"
        v-if="userCountry != 1 && form.deliveryWay != 2"
      >
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("w_0100") }}
        </view>
        <view class="form-input">{{ storeIndex }}</view>
        <text class="icon iconfont icon-jiantou" v-if="userCountry != 1"></text>
      </view>
      <view class="form-item">
        <view class="form-label">
          <text class="mr10" style="color: #fff">*</text>
          {{ $t("PER_DA_44") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.email"
          :placeholder="$t('w_0273')"
        />
      </view>
      <view
        class="form-item"
        style="border-bottom: 1rpx solid #eee"
        @click="openBankShow"
        v-if="registerBank == 0"
      >
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("CK_KS_41") }}
        </view>
        <view class="form-input">{{ bankIndex }}</view>
        <text class="icon iconfont icon-jiantou"></text>
      </view>
      <u-picker
        :cancelText="$t('MN_F_31')"
        :confirmText="$t('MN_F_32')"
        @cancel="bankShow = false"
        :show="bankShow"
        ref="accountList"
        :columns="[accountList]"
        @confirm="changeAccount"
        keyName="bankName"
      ></u-picker>
      <view class="form-item" v-if="registerBank == 0">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("MY_WAL_24") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.cardNumber"
          :placeholder="$t('S_C_70')"
        />
      </view>
      <view class="form-item" v-if="registerBank == 0">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("CK_KS_43") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.subBankName"
          :placeholder="$t('S_C_70')"
        />
      </view>
      <view class="form-item" v-if="registerBank == 0">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("MN_F_T_539") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.accountName"
          :placeholder="$t('S_C_70')"
        />
      </view>
      <view class="form-item" v-if="registerBank == 0">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("MY_WAL_36") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.idCard"
          :placeholder="$t('S_C_70')"
        />
      </view>
    </view>
    <view v-if="isQuery" @touchmove.stop.prevent="moveHandle">
      <view class="pop-up-bg" @click="isQuery = false"></view>
      <view class="pop-up">
        <view class="d-e-c p20">
          <view class="blue f28" @click="closeQuery">{{
            $t("MY_ORD_57")
          }}</view>
        </view>
        <picker-view
          :indicator-style="'height: 80px;'"
          @change="changeQuery"
          class="picker-view"
        >
          <picker-view-column>
            <view
              class="item d-c d-c-c"
              v-for="(item, index) in countryList"
              :key="index"
            >
              <image
                style="height: 50px"
                mode="heightFix"
                :src="item.nationalFlag1"
              ></image>
              <view class="f28 gray9 mt10">{{ item.name }}</view>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
export default {
  components: {
    uniLoadMore,
  },
  data() {
    return {
      // registType: 0,
      pkCountry: -1,
      pkSettleCountry: -1,
      isQuery: false,
      contactAddress: "",
      deliveryIndex: "",
      transportIndex: 0,
      bank_index: -1,
      poptype: "",
      queryValue: 0,
      storeIndex: "",
      storehouseIndex: "",
      bankIndex: "",
      placeIndex: "",
      deliveryShow: false,
      bankShow: false,
      storeShow: false,
      placeDeptShow: false,
      showStoreDialog: false,
      filteredStores: [],
      searchTerm: "",
      storeData: {},
    };
  },
  inject: ["form"],
  props: [
    "deliveryList",
    "registType",
    "transportType",
    "accountList",
    "countryList",
    "isFirst",
    "userCountry",
    "storeList",
    "storehouse",
    "placeDeptList",
    "storeLists",
    "registerBank",
  ],
  created() {
    let self = this;
    self.$fire.on("handleStoreData", function (n) {
      console.log(n, "n");
      self.handleStoreData(n);
    });
  },
  watch: {
    countryList: function (n, o) {
      let self = this;
      if (n != o) {
        let num = 0;
        console.log("userCountry：", self.userCountry);
        n.some((item, index) => {
          if (item.pkId == self.userCountry) {
            num = index;
            return true;
          }
        });
        console.log(num);
        self.pkSettleCountry = num;
        self.pkCountry = num;
        self.form.pkSettleCountry = n[self.pkSettleCountry].pkId;
        self.form.pkCountry = n[self.pkCountry].pkId;
      }
    },
    placeDeptList: function (n, o) {
      if (n != o) {
        console.log(n);
        if (n != "") {
          this.placeIndex = this.placeDeptList[0].name;
          this.form.placeDept = this.placeDeptList[0].value;
          this.changeInput("placeDept");
        } else {
          console.log("安置部门为空");
          this.placeIndex = "";
          this.form.placeDept = 0;
          this.changeInput("placeDept");
        }
      }
    },
    deliveryList: function (n, o) {
      if (n != o && n != "") {
        this.deliveryIndex = n[0].label;
        this.form.deliveryWay = n[0].value;
      }
    },
  },
  methods: {
    openBankShow() {
      this.bankShow = true;
    },
    openStoreDialog() {
      let url =
        "/pages/prefecture/part/memberStore?userCountry=" + this.userCountry;
      uni.navigateTo({
        url: url,
      });
    },
    handleStoreData(data) {
      this.storeData = data; // 接收子页面传递的数据
      this.storeIndex =
        this.storeData.storeName + "(" + this.storeData.storeCode + ")";
      this.form.pkMemberStore = this.storeData.pkId;
    },

    openPlaceDept() {
      if (this.isFirst) {
        return;
      }
      this.placeDeptShow = true;
    },
    opendeliveryShow() {
      if (this.userCountry == 1) {
        return;
      }
      this.deliveryShow = true;
    },
    changePkMemberStore(e) {
      this.storeIndex = e.value[0].storeName;
      if (this.storeList) {
        this.form.pkMemberStore = e.value[0].pkId;
      }
      this.storeShow = false;
    },
    changeStorehouse(e) {
      this.storehouseIndex = e.detail.value;
      if (this.storehouse) {
        this.form.pkStorehouse = this.storehouse[this.storehouseIndex].pkId;
      }
    },
    changeInput(e) {
      if (e != "placeDept") {
        this.$emit("changeInput", "clearPlaceParent");
      }
      this.$emit("changeInput", e);
    },
    changeDelivery(e) {
      // this.deliveryIndex = e.detail.value;
      // this.form.deliveryWay = this.deliveryList[this.deliveryIndex].value;
      this.deliveryIndex = e.value[0].label;
      this.form.deliveryWay = e.value[0].value;
      this.$emit("queryOrderPostage");
      this.deliveryShow = false;
    },
    bindPickerChange: function (e) {
      console.log(e.value[0]);
      this.bank_index = e.value[0].bankName;
      this.account_info = e.value[0];
      this.listShow = false;
    },
    changePlaceDept(e) {
      this.placeIndex = e.value[0].name;
      this.form.placeDept = e.value[0].value;
      this.changeInput("placeDept");
      this.placeDeptShow = false;
    },
    changeTransport(e) {
      this.transportIndex = e.detail.value;
      this.form.transType = this.transportType[this.transportIndex].value;
      this.$emit("queryOrderPostage");
    },
    changeAccount(e) {
      console.log(e, "eeeee");
      this.bankIndex = e.value[0].bankName;
      this.form.pkBank = e.value[0].pkId;
      this.bankShow = false;
      //   this.bank_index = e.detail.value;
      //   this.form.pkBank = this.accountList[this.bank_index].value;
    },
    changeType(n) {
      this.registType = n;
    },

    closeQuery() {
      this[this.poptype] = this.queryValue;
      if (this.poptype == "pkSettleCountry") {
        this.form.pkSettleCountry = this.countryList[this.pkSettleCountry].pkId;
      } else {
        this.form.pkCountry = this.countryList[this.pkCountry].pkId;
      }
      this.isQuery = false;
    },
    changeQuery(e) {
      this.queryValue = e.detail.value[0];
    },
    moveHandle() {
      return false;
    },
    openCPop(name) {
      this.poptype = name;
      this.isQuery = true;
    },
  },
};
</script>

<style lang="scss">
.title-row {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0rpx;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #ccc;
  font-weight: bold;
}

.title-row span {
  flex: 1;
}

.fixed-rows {
  padding: 0;
  margin: 0;
  list-style: none;
}

.data-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0; /* 调整每个数据项的上下内边距 */
  border-bottom: 1px solid #eee; /* 添加底部边框 */
  margin-bottom: 10rpx;
}
.data-item view {
  flex: 1; /* 均分每个数据项的宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  margin-left: 10rpx;
}
.pop-up-bg {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 99;
}

.pop-up {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh; /* 限制最大高度 */
  overflow-y: auto; /* 当内容超出时，允许垂直滚动 */
  background-color: #ffffff;
  z-index: 100;
}

.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
}

.item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.queryimg {
  height: 60rpx;
  width: 60rpx;
  // flex-shrink: 0;
}

.form-top-nav {
  height: 94rpx;
  background: #fb3024;
}

.form-top-nav-item {
  text-align: center;
  font-size: 28rpx;
  color: #fff;
  line-height: 1.5;
  word-break: break-all;
  flex: 1;
  padding: 0 20rpx;
  flex-shrink: 0;
  height: 94rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.form-top-nav-item.active::before {
  content: "";
  width: 52rpx;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12rpx;
  margin: auto;
  height: 6rpx;
  background: #ffffff;
  border-radius: 4rpx;
}

.form-title {
  width: 750rpx;
  height: 106rpx;
  background: #fb3024;
  padding-left: 44rpx;
  padding-right: 25rpx;
  position: relative;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 106rpx;
  font-weight: bold;
  z-index: 1;
}

.form-title.redtitle {
  width: 750rpx;
  height: 106rpx;
  background: #fb3024;
  padding-left: 44rpx;
  position: relative;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #fff;
  line-height: 106rpx;
  font-weight: bold;
  z-index: 1;
}

.form-title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 25rpx;
  width: 6rpx;
  height: 24rpx;
  background-color: #fb3024;
  z-index: 1;
}

.redtitle.form-title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 25rpx;
  width: 6rpx;
  height: 24rpx;
  background-color: #fff;
  z-index: 1;
}
</style>