zhywpt-sp/after-sale/replace-equipment/form.vue

<template>
  <!-- 	<navBar title="补办ETC卡"></navBar>
 -->
  <view class="oderPage">
    <view class="addr-box">
      <view class="addr-box-left">
        <view class="text-image"> 林 </view>
        <view class="content">
          <view class="">
            <text class="item1">林成</text>
            <text class="item2">18227756455</text>
            <text class="item3">默认</text>
          </view>
          <view class=""> 贵州省 昆明市 丽华区 XXX街道XXXXX路 201号 </view>
        </view>
      </view>
      <view class="edit">
        <image :src="`${$imgUrl}applyCard/edit.png`" mode=""></image>
      </view>
    </view>

    <u-form :model="form" ref="myForm" :error-type="errorType">
      <view class="from">
        <u-form-item prop="cardState">
          <view class="from_item">
            <text><text style="color: red">*</text>是否寄回设备：</text>
            <u-radio-group v-model="form.cardState">
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                activeColor="#2CE242"
                v-for="(item, index) in radiolist1"
                :key="index"
                :label="item.disabled"
                :name="item.name"
                @change="radioChange"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group>
          </view>
        </u-form-item>
        <u-form-item prop="logistics" v-if="form.cardState == '寄回'">
          <view class="from_item">
            <text><text style="color: red">*</text>退货物流公司：</text>
            <view style="display: flex" @click="showPicker">
              <u-input
                v-model="form.logistics"
                class="input"
                disabled
                placeholder="请选择"
              />
              <u-icon name="arrow-right" style="margin-left: 10px"></u-icon>
            </view>
          </view>
        </u-form-item>
        <u-form-item prop="returnNum" v-if="form.cardState == '寄回'">
          <view class="from_item">
            <text><text style="color: red"></text>退货单号：</text>
            <u-input v-model="form.returnNum" class="input" />
          </view>
        </u-form-item>
        <u-form-item prop="remark">
          <view class="from_item1">
            <text><text style="color: red">*</text>补卡原因:</text>
            <u-input
              v-model="form.remark"
              type="textarea"
              class="textarea"
              placeholder="请输入补卡原因，限制50字以内。"
              maxlength="50"
            />
            <!-- <textarea name="" id="" placeholder="请输入补卡原因，限制50字以内。"></textarea> -->
          </view>
        </u-form-item>
      </view>
    </u-form>

    <!-- 物流弹窗 -->
    <view>
      <!-- 物流 -->
      <u-select
        v-model="show"
        mode="single-column"
        :list="list"
        @confirm="confirm"
      ></u-select>
    </view>

    <button class="submit" @click="submit">下一步</button>
  </view>
</template>

<script setup lang="ts">
import navBar from "../ETCcancellation/components/nav-bar.vue";
import { reactive, ref } from "vue";
import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
import { navTo, checkStr } from "@/utils/utils";
import { request } from "../../utils/network/request.js";
import { getLogistics } from "../../utils/network/api.js";
import { stringToJson } from "../../utils/network/encryption.js";

const list = reactive([]); //物流数据
const form = reactive({
  cardState: "",
  logistics: "",
  returnNum: "",
  remark: "",
});

// 验证规则
const rules = {
  cardState: [
    {
      required: true,
      message: "请选择",
      trigger: ["change", "blur"],
    },
  ],
  logistics: [
    {
      required: true,
      message: "请选择",
      trigger: ["change", "blur"],
    },
  ],
  returnNum: [
    {
      required: true,
      message: "请输入",
      trigger: ["change", "blur"],
    },
  ],
  remark: [
    {
      required: true,
      message: "请输入",
      trigger: ["change", "blur"],
    },
  ],
};

// 验证提示类型(toast要版本为1.3.5才支持)
const errorType = ["message", "border-bottom", "toast"];

// 设置验证规则
const myForm = ref(null);
onReady(() => {
  myForm.value.setRules(rules);
});

// 单选数据列表
const radiolist1 = reactive([
  {
    name: "寄回",
    disabled: false,
  },
  {
    name: "不寄回",
    disabled: false,
  },
]);

// 单选
const radioChange = (n) => {
  console.log("radioChange", n);
};

let show = ref(false);

// 打开物流先择器
const showPicker = function () {
  show.value = true;
};

const confirm = (e) => {
  form.logistics = e[0].value;
  console.log(e[0].value);
};

onLoad(() => {
  getexpresslist();
});
const getexpresslist = () => {
  //参数说明
  let options = {
    type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
    data: {
      // opId: getItem("openId"),
      // source: "WECHAT",
      // tabIndex: "0",
    }, //请求参数
    method: "POST", //提交方式(默认POST)
    showLoading: true, //是否显示加载中(默认显示)
  };

  //调用方式
  request(getLogistics, options)
    .then((res) => {
      // stringToJson(res.bizContent)
      stringToJson(res.bizContent).forEach((item) => {
        list.push({
          value: item,
          label: item,
        });
      });
    })
    .catch((err) => {
      console.log(err);
    });
};

const submit = () => {
  myForm.value.validate((valid) => {
    console.log(valid);
    if (valid) {
      console.log("验证通过", form);
      wx.showModal({
        title: "模拟状况",
        content: "",
        cancelText: "记账卡",
        confirmText: "储蓄卡",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            navTo("/after-sale/replace-equipment/pay-page");
          } else if (res.cancel) {
            console.log("用户点击取消");
            navTo("/after-sale/replace-equipment/cancellation-contract");
          }
        },
      });
    } else {
      console.log("验证未通过");
    }
  });
};
</script>

<style>
page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.oderPage {
  flex: 1;
  width: 100%;

  .addr-box {
    margin-top: 20rpx;
    display: flex;
    background: #fff;
    padding: 30rpx;
    justify-content: space-between;
    align-items: center;

    .addr-box-left {
      display: flex;

      .text-image {
        width: 68rpx;
        height: 68rpx;
        background: #00b38b;
        border-radius: 50%;
        text-align: center;
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 68rpx;
        margin-right: 30rpx;
      }

      .content {
        view {
          font-size: 26rpx;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;

          .item1 {
            font-size: 30rpx;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
          }

          .item2 {
            font-size: 24rpx;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            margin-left: 10rpx;
          }

          .item3 {
            width: 71rpx;
            height: 37rpx;
            background: #ffffff;
            border: 1px solid #ff8000;
            border-radius: 6rpx;
            font-size: 22rpx;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ff8000;
            padding: 3rpx 6rpx;
            margin-left: 10rpx;
          }
        }
      }
    }

    .edit {
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .from {
    background-color: #fff;
    margin-top: 30rpx;
    padding: 0 30rpx;

    ::v-deep .u-form-item {
      padding: 0;
      line-height: normal;

      .u-form-item__message {
        margin-bottom: 12rpx;
      }
    }

    .from_item {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      border-bottom: 1rpx solid #dcdcdc;

      .btn {
        font-size: 24rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        background: #00b38b;
        border-radius: 10rpx;
        padding: 10rpx 15rpx;
      }

      ::v-deep .input {
        text-align: left;
        flex: 1;

        input {
          text-align: left;
        }
      }
    }

    .from_item1 {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: space-between;
      padding: 30rpx 0;
      border-bottom: #dcdcdc 1px solid;

      input {
        text-align: right;
      }

      .textarea {
        background-color: #f1f1f1;
        width: 100%;
        border-radius: 20rpx;
        margin-top: 10rpx;
        text-indent: 1rem;
        height: 180rpx;
        padding: 20rpx;
        box-sizing: border-box;
      }
    }
  }
}

.submit {
  width: 670rpx;
  height: 80rpx;
  background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
  border-radius: 40rpx;
  font-size: 32rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 80rpx;
  margin-top: 60rpx;
}
</style>