yantai-app/yt_huizhangguanli/pages/apply/apply.vue

<template>
  <view style="width: 100%">
    <view class="m-hint" v-if="fmData.isCertificated == 'yes'"
      >您已认证通过。</view
    >
    <view class="m-hint" v-else-if="fmData.authResult == 'auditing'"
      >您的认证正在审核，请耐心等待。</view
    >

    <form v-else class="m-fm" @submit="submit" :report-submit="true">
      <view class="result" v-if="fmData.authResult == 'rejected'">
        <view class="item">
          <view class="field">审核结果</view>
          <view class="value">已拒绝</view>
        </view>
        <view class="item">
          <view class="field">拒绝原因</view>
          <view class="value">{{ fmData.authReason }}</view>
        </view>
      </view>
      <view class="fm">
        <view class="item" v-if="fmConfig.surname">
          <view class="field">
            <text class="z-stress">*</text>
            姓
          </view>
          <view class="input">
            <input
              type="text"
              v-model="fmData.surname"
              placeholder="请输入您的姓氏"
              placeholder-class="z-ph"
              data-fm="fmData"
              data-name="surname"
              onInput="inputSync"
              cursor-spacing="14"
              maxlength="100"
            />
          </view>
        </view>
        <view class="item" v-if="fmConfig.name">
          <view class="field">
            <text class="z-stress">*</text>
            名
          </view>
          <view class="input">
            <input
              type="text"
              v-model="fmData.name"
              placeholder="请输入您的名字"
              placeholder-class="z-ph"
              data-fm="fmData"
              data-name="name"
              onInput="inputSync"
              cursor-spacing="14"
              maxlength="100"
            />
          </view>
        </view>
        <view class="item" v-if="fmConfig.idcard">
          <view class="field">
            <text class="z-stress">*</text>
            证件号
          </view>
          <view class="input">
            <input
              type="text"
              v-model="fmData.idcard"
              placeholder="请输入您的身份证号或护照号"
              placeholder-class="z-ph"
              data-fm="fmData"
              data-name="idcard"
              onInput="inputSync"
              cursor-spacing="14"
              maxlength="18"
            />
          </view>
        </view>
        <view class="item" v-if="fmConfig.mobile">
          <view class="field">
            <text class="z-stress">*</text>
            手机号
          </view>
          <view class="input">
            <input
              type="text"
              v-model="fmData.mobile"
              placeholder="请输入您的手机号"
              placeholder-class="z-ph"
              data-fm="fmData"
              onInput="inputSync"
              data-name="mobile"
              cursor-spacing="14"
              maxlength="100"
            />
          </view>
        </view>
        <!-- <view class="item" a:if="{{fmConfig.mobile}}">
        <view class="field">
          <text class="z-stress">*</text>
          验证码
        </view>
        <view class="item-btn" onTap="getTelCode">
          <view hidden="{{ codeData.status != 0 }}">获取验证码</view>
          <view hidden="{{ codeData.status != 1 }}">发送中……</view>
          <view hidden="{{ !( codeData.cd <= 0 && codeData.status > 1) }}">再次发送</view>
          <view hidden="{{ codeData.cd == 0 }}">{{ codeData.cd }}s后重发</view>
        </view>
        <view class="input z-small">
          <input type="text" value="{{ fmData.code }}" placeholder="请输入验证码" placeholder-class="z-ph" data-fm="fmData" data-name="code" onInput="inputSync" cursor-spacing="14" maxlength="100" />
        </view>
      </view> -->
        <view class="item" v-if="fmConfig.remark">
          <view class="field">
            <text class="z-stress">*</text>
            备注
          </view>
          <view class="textarea">
            <textarea
              type="text"
              v-model="fmData.remark"
              placeholder="请输入备注"
              placeholder-class="z-ph"
              data-fm="fmData"
              data-name="remark"
              confirm-type="send"
              onInput="inputSync"
              cursor-spacing="14"
              maxlength="200"
            ></textarea>
          </view>
        </view>
      </view>
      <view class="fm" v-if="fmConfig.certificationImg">
        <view class="item">
          <view class="field">
            <text class="z-stress">*</text>
            请上传认证证件
          </view>
          <view class="f-cb"></view>
          <view class="pic" @click="addImg">
            <image
              v-if="!fmData.certificationImg"
              mode="aspectFill"
              src="/static/data/images/zhengshu-default.jpg"
            />
            <image
              v-else
              class="z-big"
              @click="handleLongTapCertificationImg"
              :src="fmData.certificationImg"
              mode="aspectFill"
            />
          </view>
          <view class="field">示例图</view>
          <view class="pic-hint">
            <image
              mode="widthFix"
              src="/static/data/images/zhengshu-hint.png"
            />
          </view>
        </view>
      </view>
      <view class="fm-hint">*认证成功后会自动点亮徽章</view>
      <button formType="submit" class="btn" :plain="true">提交</button>
    </form>
  </view>
</template>

<script>
import { inputSync, doAfterLogin } from "../../utils/tools";
import * as userTools from "../../utils/user";
import Global from "../../utils/global";
import {
  badgesendcode,
  certificationDetail,
  authfield,
  certificationAdd,
} from "../../utils/api/customerApi.js";
import validate from "../../utils/validate/index.js";
import words from "../../utils/word";
const app = getApp();
export default {
  data() {
    return {
      isApplied: false,

      fmData: {
        surname: "",
        name: "",
        idcard: "",
        isCertificated: false,
        mobile: "",
        // code: "",
        certificationImg: "",
        remark: "",
        authResult: "",
        authReason: "",
        recordId: "",
      },

      fmConfig: {
        surname: false,
        name: false,
        idcard: false,
        isCertificated: false,
        mobile: false,
        // code: false,
        certificationImg: false,
        remark: false,
      },

      submitBtnIsAllowed: false,

      // 本地选择作品图片路径数组
      imgList: [
        // {
        //     tempFilePath: '', // 本地录制文件临时路径
        //     src: '', // 上传路径
        //     valid: true, // 是否合法
        // }
      ],

      imgPreviewList: [],
      images: [],

      // 手机验证码
      codeData: {
        status: 0,
        // 0初始 1发送中 2成功 3失败
        cd: 0,
      },

      certificationImg: "",
      inputSync,
      badgeId: "",
      userInfo: "",
    };
  },
  async onLoad(option) {
    this.setData({
      badgeId: option.badgeId,
    });
    await doAfterLogin();
    await this.getFmConfig();
    await this.iniVisit();
  },
  watch: {
    length(newLength, oldLength) {
      this.afterUpdateDataFun();
    },
  },
  methods: {
    // 更新data数据后需主动触发
    afterUpdateDataFun() {
      this.computeSubmitBtnIsAllowed();
    },

    // 获取短信验证码
    async getTelCode() {
      const { codeData } = this;
      if (codeData.status == 1 || codeData.cd != 0) {
        return;
      }
      const { fmData } = this;
      const vlt = validate(fmData, {
        mobile: [
          {
            rule: "required",
            message: "请先输入【手机号码】",
          },
          {
            rule: "mobile",
            message: "【手机号码】格式不正确",
          },
        ],
      });
      if (!vlt.valid) {
        return uni.showToast({
          content: vlt.error,
          icon: "none",
          duration: 1500,
        });
      }
      codeData.status = 1;
      this.setData({
        codeData,
      });
      const { data, code, msg } = await badgesendcode(
        {
          mobile: fmData.mobile,
        },
        {
          // isMock: true,
          isQuiet: false,
        }
      );
      if (msg === "success" && code === 0) {
        codeData.status = 2;
        codeData.cd = 59;
        this.setData({
          codeData,
        });

        // 开始倒计时
        this.sendTelCodeCd();
      } else {
        codeData.status = 3;
        this.setData({
          codeData,
        });
      }
    },

    // 发送短信倒计时
    sendTelCodeCd() {
      // 开始计时
      const cdFn = async () => {
        const { codeData } = this;
        if (codeData.cd > 0) {
          codeData.cd -= 1;
          this.setData({
            codeData,
          });
          cdFn();
        }
      };
      cdFn();
    },

    // 删除封面
    async handleLongTapCertificationImg() {
      const {
        fmData: { certificationImg },
      } = this;
      if (!certificationImg) {
        return;
      }
      const { msg, data } = await wxShowActionSheet({
        itemList: ["删除封面", "查看大图"],
      });
      if (msg == "success") {
        const { tapIndex } = data;
        if (tapIndex === 0) {
          this.deleteCertificationImg();
        } else if (tapIndex === 1) {
          this.previewCertificationImg();
        }
      }
    },

    previewCertificationImg() {
      const {
        fmData: { certificationImg },
      } = this;
      uni.previewImage({
        urls: [certificationImg],
      });
    },

    deleteCertificationImg() {
      this.setData({
        imgList: [],
        "fmData.certificationImg": "",
      });
    },

    async addImg() {
      const { imgList } = this;
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const files = res.tempFiles;
          const filePaths = res.tempFilePaths;
          if (filePaths.length == 0) {
            uni.showToast({
              content: "请选择图片",
              icon: "none",
            });
            return;
          }
          filePaths.forEach((item, index) => {
            this.upLoadFile(item, files);
          });
          this.setData({
            imgList: filePaths,
          });
          this.computeSubmitBtnIsAllowed();
        },
      });
    },

    upLoadFile(item, files) {
      const url =
        process.env.NODE_ENV !== "development"
          ? "https://lantu.ytyanhuo.com/api"
          : "";
      const url1 =
        process.env.NODE_ENV !== "development"
          ? "https://lantu.ytyanhuo.com"
          : "";
      let userInfo = userTools.getStoreUserInfo();
      uni.showLoading();
      uni.uploadFile({
        url: `${url}/oss/file/uploadimg`,
        fileType: "image",
        fileName: "file",
        filePath: item,
        header: {
          // "content-type": "application/json",
          authorization: userInfo.authorization,
        },
        formData: {
          // file: item,
          customerId: userInfo.customerId,
        },
        success: (res) => {
          uni.hideLoading();
          let replaceStr = res.data;
          let reg = new RegExp("http://172.20.46.177", "g");
          replaceStr = replaceStr.replace(reg, "https://lantu.ytyanhuo.com");
          let data = JSON.parse(replaceStr);
          if (data.code == 0) {
            let images = this.images;
            let imgPreviewList = this.imgPreviewList;
            images.push({
              type: "image",
              size: files ? files[0].size : "",
              name: files ? "图片." + files[0].fileType : "",
              format: files ? files[0].fileType : "",
              url: data.data.url,
            });
            imgPreviewList.push(data.data.url);
            this.setData({
              imgList: imgPreviewList,
            });
            this.setData({
              "fmData.certificationImg": data.data.url,
            });
            this.computeSubmitBtnIsAllowed();
          } else if (
            data.code == 10005 ||
            data.code == 10006 ||
            data.code == 10007
          ) {
            fetchToken().then((res) => {
              let userInfo = res.data;
              userTools.setStoreUserInfo(userInfo);
              this.setData(
                {
                  userInfo,
                },
                () => {
                  this.upLoadFile(item, files);
                }
              );
            });
          }
        },
        fail: (err) => {
          console.log(JSON.stringify(err));
          uni.hideLoading();
        },
        complete: () => {},
      });
    },

    computeSubmitBtnIsAllowed(isQuiet = true) {
      const { fmConfig, fmData } = this;
      const fmAllRules = {
        surname: [
          {
            rule: "required",
            message: "请先输入您的【姓氏】",
          },
        ],
        name: [
          {
            rule: "required",
            message: "请先输入您的【名字】",
          },
        ],
        idcard: [
          {
            rule: "required",
            message: "请先输入您的【证件号】",
          },
        ],
        mobile: [
          {
            rule: "required",
            message: "请先输入【手机号码】",
          },
          {
            rule: "mobile",
            message: "【手机号码】格式不正确",
          },
        ],
        // code: [
        //   {
        //     rule: "required",
        //     message: "请先输入【短信验证码】",
        //   },
        // ],
        remark: [
          {
            rule: "required",
            message: "请先输入【备注】",
          },
        ],
        certificationImg: [
          {
            rule: "required",
            message: "请上传【认证证件】",
          },
        ],
      };
      let fmRules = {};
      Object.keys(fmAllRules).forEach((k) => {
        if (fmConfig[k]) {
          fmRules[k] = fmAllRules[k];
        }
      });
      const vlt = validate(fmData, fmRules);
      if (!vlt.valid) {
        if (!isQuiet) {
          let error = "";
          vlt.errors.forEach((item, index) => {
            if (index === 0) {
              error = item;
            } else {
              error = error + "、" + item;
            }
          });
          uni.showToast({
            title: error,
            icon: "none",
            duration: 1500,
          });
        }
        this.setData({
          submitBtnIsAllowed: false,
        });
        return false;
      } else {
        this.setData({
          submitBtnIsAllowed: true,
        });
        return true;
      }
    },

    // 初始化访问
    async iniVisit() {
      const customerId = app.globalData.customerId;
      const { badgeId, fmData } = this;
      const { code, data, msg } = await certificationDetail(
        {
          badgeId,
          customerId: "1535072605621841922",
        },
        {
          // isMock: true,
          isQuiet: false,
        }
      );
      if (msg === "success" && code === 0) {
        this.setData({
          fmData: {
            ...fmData,
            ...data,
          },
          isApplied: true,
        });
        this.computeSubmitBtnIsAllowed();
      }
    },

    // 初始化访问
    async getFmConfig() {
      let userInfo = userTools.getStoreUserInfo();
      const customerId = userInfo.customerId;
      const { badgeId, fmConfig } = this;
      const { code, data, msg } = await authfield(
        {
          badgeId,
          customerId,
        },
        {
          // isMock: true,
          isQuiet: false,
        }
      );
      if (msg === "success" && code === 0) {
        if (Array.isArray(data) && data.length > 0) {
          data.forEach((item) => {
            fmConfig[item.enName] = true;
          });
        }
        // if (fmConfig.mobile) {
        //   fmConfig.code = true;
        // }
        this.setData({
          fmConfig,
        });
      }
    },

    // 注册
    async submit() {
      if (!this.computeSubmitBtnIsAllowed(false)) return;
      const { badgeId, fmData, fmConfig } = this;
      let userInfo = userTools.getStoreUserInfo();
      const customerId = userInfo.customerId;
      let reqData = {};
      Object.keys(fmData).forEach((k) => {
        if (fmConfig[k]) {
          reqData[k] = fmData[k];
        }
      });
      if (reqData.certificationImg) {
        let img = JSON.stringify(reqData.certificationImg);
        let reg = new RegExp("https://lantu.ytyanhuo.com", "g");
        img = img.replace(reg, "http://172.20.46.177");
        reqData.certificationImg = JSON.parse(img);
      }
      uni.showLoading({
        content: words.common.submitting,
        mask: true,
      });
      const { code, data, msg } = await certificationAdd(
        {
          customerId,
          badgeId,
          ...reqData,
        },
        {
          // isMock: true,
          isQuiet: false,
        }
      );
      uni.hideLoading();
      if (msg === "success" && code === 0) {
        uni.showToast({
          content: "提交成功,请等待审核",
          duration: 1500,
        });
        uni.navigateBack();
      }
    },
  },
};
</script>
<style>
@charset "UTF-8";
.f-cb {
  float: none;
  clear: both;
  height: 0;
}
.f-cs::after {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  height: 0;
  content: "";
}
.f-hide {
  display: none;
}
.f-fl {
  float: left;
}
.f-fr {
  float: right;
}
.f-bs1 {
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);
}
.f-bs2 {
  box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.16);
}
.f-bs3 {
  box-shadow: 0 6rpx 18rpx 0 rgba(0, 0, 0, 0.22);
}
.f-blur {
  filter: blur(3px);
}
.f-shield {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8rpx);
}
@keyframes fade_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade_in_up {
  0% {
    transform: translate3d(0, 360rpx, 0);
    opacity: 0.3;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fade_in_down {
  0% {
    transform: translate3d(0, -360rpx), 0;
    opacity: 0.3;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fade_in_right {
  0% {
    transform: translate3d(360rpx, 0, 0);
    opacity: 0.3;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fade_in_left {
  0% {
    transform: translate3d(-360rpx, 0, 0);
    opacity: 0.3;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.a-fade-in {
  animation: fade_in 0.27s ease-in;
}
.a-fade-in-up {
  animation: fade_in_up 0.27s ease-in;
}
.a-fade-in-right {
  animation: fade_in_right 0.27s ease-in;
}
.a-fade-in-left {
  animation: fade_in_left 0.27s ease-in;
}
.a-fade-in-down {
  animation: fade_in_down 0.27s ease-in;
}
@keyframes fade_out {
  0% {
    display: block;
    opacity: 1;
  }
  100% {
    display: block;
    opacity: 0;
  }
}
@keyframes fade_out_up {
  0% {
    display: block;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    display: block;
    transform: translate3d(0, 360rpx, 0);
    opacity: 0;
  }
}
@keyframes fade_out_down {
  0% {
    display: block;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    display: block;
    transform: translate3d(0, -360rpx, 0);
    opacity: 0;
  }
}
@keyframes fade_out_right {
  0% {
    display: block;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    display: block;
    transform: translate3d(360rpx, 0, 0);
    opacity: 0;
  }
}
@keyframes fade_out_left {
  0% {
    display: block;
    transform: translate3d(0);
    opacity: 1;
  }
  100% {
    display: block;
    transform: translate3d(-360rpx, 0, 0);
    opacity: 0;
  }
}
.a-fade-out {
  animation: fade_out 0.27s ease-out;
}
.a-fade-out-up {
  animation: fade_out_up 0.27s ease-out;
}
.a-fade-out-right {
  animation: fade_out_right 0.27s ease-out;
}
.a-fade-out-left {
  animation: fade_out_left 0.27s ease-out;
}
.a-fade-out-down {
  animation: fade_out_down 0.27s ease-out;
}
@keyframes scale_in {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes scale_in_left_up {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@keyframes scale_in_right_down {
  0% {
    opacity: 0;
    transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@keyframes scale_in_right_up {
  0% {
    opacity: 0;
    transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@keyframes scale_in_left_down {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 50%, 0) scale3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
.a-scale-in {
  animation: scale_in 0.27s ease-in;
}
.a-scale-in-left-up {
  animation: scale_in_left_up 0.27s ease-in;
}
.a-scale-in-right-up {
  animation: scale_in_right_up 0.27s ease-in;
}
.a-scale-in-left-down {
  animation: scale_in_left_down 0.27s ease-in;
}
.a-scale-in-right-down {
  animation: scale_in_right_down 0.27s ease-in;
}
page {
  background-color: #f5f6f7;
  padding-bottom: 100rpx;
}
.m-hint {
  text-align: center;
  padding: 100rpx 50rpx;
  line-height: 50rpx;
  color: #999;
  text-align: center;
  font-size: 34rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
}
.m-status {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8rpx);
}
.m-status .wrap {
  padding: 20rpx 25rpx;
  line-height: 40rpx;
  font-size: 26rpx;
  background-color: #fff;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #333;
}
.m-status .wrap::after {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  height: 0;
  content: "";
}
.m-status .wrap .btn {
  display: block;
  box-sizing: border-box;
  width: 120rpx;
  height: 40rpx;
  border-radius: 40rpx;
  line-height: 38rpx;
  border: 1rpx solid #ff4c52;
  color: #ff4c52;
  text-align: center;
}
.m-fm .result {
  box-sizing: border-box;
  margin: 20rpx auto;
  width: 710rpx;
  border-radius: 10rpx;
  padding: 5rpx 20rpx;
  background-color: #fff;
}
.m-fm .result .item {
  line-height: 40rpx;
  padding: 25rpx 0;
  border-top: 1rpx solid #eee;
}
.m-fm .result .item::after {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  height: 0;
  content: "";
}
.m-fm .result .item:first-child {
  border-top: none;
}
.m-fm .result .item .field {
  float: left;
  font-size: 32rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #999;
}
.m-fm .result .item .value {
  float: right;
  width: 500rpx;
  font-size: 32rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #333;
}
.m-fm .fm {
  box-sizing: border-box;
  margin: 20rpx auto;
  width: 710rpx;
  border-radius: 10rpx;
  padding: 5rpx 20rpx;
  background-color: #fff;
}
.m-fm .fm .fm-title {
  line-height: 40rpx;
  padding: 25rpx 0;
  font-size: 34rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #333;
}
.m-fm .fm .item {
  line-height: 40rpx;
  padding: 25rpx 0;
  border-top: 1rpx solid #eee;
}
.m-fm .fm .item::after {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  height: 0;
  content: "";
}
.m-fm .fm .item:first-child {
  border-top: none;
}
.m-fm .fm .item .field {
  float: left;
  font-size: 32rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #333;
}
.m-fm .fm .item .field .z-stress {
  color: #e60000;
}
.m-fm .fm .item .input-long {
  float: right;
  width: 500rpx;
}
.m-fm .fm .item .input-long .input-show {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
  display: block;
  width: 500rpx;
  height: 40rpx;
  line-height: 40rpx;
  min-height: 40rpx;
  text-align: right;
  border: none;
  background-color: #fff;
  font-size: 28rpx;
  font-family: Source Han Serif SC;
  color: #333;
}
.m-fm .fm .item .input-long .input-show .input-btn {
  display: inline-block;
  margin: 0 10rpx;
  color: #ffa03c;
}
.m-fm .fm .item .input-long input {
  display: block;
  width: 500rpx;
  height: 40rpx;
  line-height: 40rpx;
  min-height: 40rpx;
  text-align: right;
  border: none;
  background-color: #fff;
  font-size: 28rpx;
  font-family: Source Han Serif SC;
  color: #333;
}
.m-fm .fm .item .input-long input .z-placeholder {
  color: #999;
}

.m-fm .fm .item .input {
  float: right;
  width: 400rpx;
}
.m-fm .fm .item .input .input-show {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
  display: block;
  width: 400rpx;
  height: 40rpx;
  line-height: 40rpx;
  min-height: 40rpx;
  text-align: right;
  border: none;
  background-color: #fff;
  font-size: 28rpx;
  font-family: Source Han Serif SC;
  color: #333;
}
.m-fm .fm .item .input .input-show .input-btn {
  display: inline-block;
  margin: 0 10rpx;
  color: #ffa03c;
}
.m-fm .fm .item .input input {
  display: block;
  width: 400rpx;
  height: 40rpx;
  line-height: 40rpx;
  min-height: 40rpx;
  text-align: right;
  border: none;
  background-color: #fff;
  font-size: 28rpx;
  font-family: Source Han Serif SC;
  color: #333;
}
.m-fm .fm .item .input input .z-placeholder {
  color: #999;
}
.m-fm .fm .item .input.z-small {
  width: 290rpx;
}
.m-fm .fm .item .input.z-small input {
  width: 290rpx;
  box-sizing: border-box;
}
.m-fm .fm .item .textarea {
  clear: both;
  padding-top: 20rpx;
}
.m-fm .fm .item .textarea textarea {
  box-sizing: border-box;
  display: block;
  padding: 20rpx;
  width: 100%;
  height: 200rpx;
  border-radius: 10rpx;
  background-color: #f3f4f5;
  font-size: 28rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #333;
}
.m-fm .fm .item .textarea textarea .z-ph {
  color: #999;
}
.m-fm .fm .item .item-btn {
  float: right;
  margin-left: 10rpx;
  width: 138rpx;
  height: 40rpx;
  background: #329AFF;
  border-radius: 10rpx;
  text-align: center;
  font-size: 22rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #fff;
}
.m-fm .fm .item .back-grey {
  background: #999;
}
.m-fm .fm .item .pic {
  position: relative;
  width: 400rpx;
  height: 250rpx;
  margin: 30rpx auto;
  /* box-shadow: 0 2px 12px 0 rgba(211, 211, 211, 0.26); */
}
.m-fm .fm .item .pic image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.m-fm .fm .item .pic image.z-big {
  width: 378rpx;
  height: 222rpx;
}
.m-fm .fm .item .pic-hint {
  padding: 20rpx 0 10rpx;
}
.m-fm .fm .item .pic-hint image {
  width: 100%;
}
.m-fm .fm .item2 {
  line-height: 40rpx;
  padding: 20rpx 0;
}
.m-fm .fm .item2::after {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  height: 0;
  content: "";
}
.m-fm .fm .item2 .field {
  position: relative;
  float: left;
  padding-left: 50rpx;
  font-size: 28rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #333;
}
.m-fm .fm .item2 .field .field-select {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 26rpx;
  height: 26rpx;
  display: block;
  border-radius: 100%;
  border: 1px solid #aaa;
  pointer-events: none;
}
.m-fm .fm .item2 .field .field-select::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 10rpx;
  height: 10rpx;
  border-radius: 100%;
  pointer-events: none;
}
.m-fm .fm .item2 .field .field-select.z-on {
  border-color: #ff4c52;
}
.m-fm .fm .item2 .field .field-select.z-on::after {
  background-color: #ff4c52;
}
.m-fm .fm .item2 .input {
  float: left;
  margin-left: 10rpx;
  width: 400rpx;
}
.m-fm .fm .item2 .input input {
  display: block;
  width: 400rpx;
  height: 40rpx;
  line-height: 40rpx;
  min-height: 40rpx;
  text-align: left;
  border: none;
  background-color: #fff;
  font-size: 28rpx;
  font-family: Source Han Serif SC;
  color: #333;
}
.m-fm .fm .item2 .input input .z-placeholder {
  color: #999;
}
.m-fm .fm-hint {
  padding: 0 20rpx;
  line-height: 50rpx;
  font-size: 22rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #999;
}
.m-fm .btn {
  display: block;
  margin: 80rpx auto;
  padding: 0;
  width: 600rpx;
  height: 80rpx;
  min-height: 80rpx;
  line-height: 80rpx;
  border-radius: 80rpx;
  border: none;
  outline: 0;
  font-size: 30rpx;
  background: #329AFF;
  color: #fff;
  text-align: center;
  transition: background-color 0.13s;
  font-family: Source Han Serif SC;
  font-weight: 500;
}
.m-fm .btn.z-disabled {
  opacity: 0.5;
}
.m-fm .btn.z-disabled:active {
  opacity: 0.5;
}
.m-fm .btn:active {
  background: #329AFF;
}
</style>