createBigWheelActive.vue

<template>
  <div class="container">
    <div class="title">活动设置</div>
    <van-cell-group class="all">
      <van-cell :required="true" title="活动标题" style="font-size:14px;">
        <template slot="default">
          <van-field
            v-model="basicInfo.title"
            placeholder="请输入活动标题"
            class="right"
            style="font-size:14px;"
          />
        </template>
      </van-cell>
      <van-cell :required="true" title="活动开始时间" style="font-size:14px;">
        <template slot="default">
          <div class="nobr">
            <van-field
              class="right"
              v-model="basicInfo.startTime1"
              placeholder="请选择开始时间"
              readonly="readonly"
              @click="openStartTime"
            />
            <van-popup v-model="basicInfo.startShow" position="bottom" :overlay="true">
              <van-datetime-picker
                v-model="basicInfo.startTime"
                type="datetime"
                :min-date="minStartDate"
                @cancel="basicInfo.startShow = false"
                @confirm="handleBasicSTime"
                @change="startTimeChange"
              />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <van-cell :required="true" title="活动结束时间" style="font-size:14px;">
        <template slot="default">
          <div class="jpsl">
            <van-field
              class="right"
              v-model="basicInfo.endTime1"
              placeholder="请选择结束时间"
              readonly="readonly"
              @click="openEndTime"
            />
            <van-popup v-model="basicInfo.endShow" position="bottom" :overlay="true">
              <van-datetime-picker
                v-model="basicInfo.endTime"
                type="datetime"
                :min-date="minEndDate"
                @cancel="basicInfo.endShow = false"
                @confirm="handleBasicETime"
                @change="endTimeChange"
              />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <van-cell title="背景图片" style="font-size: 14px">
        <van-uploader v-model="bg_imgs" :max-count="1" :after-read="afterBGRead" />
      </van-cell>
      <van-cell :required="true" title="活动Logo" style="font-size: 14px">
        <van-uploader :max-count="1" v-model="logo_imgs" :after-read="afterLogoRead"></van-uploader>
      </van-cell>
      <van-cell :required="true" title="会员单日参与次数" style="font-size: 14px">
        <van-stepper
          v-model="basicInfo.jointimes"
          placeholder="请输入限制次数"
          :show-plus="false"
          :show-minus="false"
          input-width="140px"
          step="1"
          min="1"
          max="999999"
          integer
        />
        <!-- <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="basicInfo.jointimes"
              placeholder="请输入限制次数"
              @touchstart.native.stop="basicInfo.jointimes_show = true"
            />
            <van-number-keyboard
              v-model="basicInfo.jointimes"
              :show="basicInfo.jointimes_show"
              :maxlength="6"
              @blur="basicInfo.jointimes_show = false"
            />
          </div>
        </template>-->
      </van-cell>
      <van-cell :required="true" title="会员总参与次数" style="font-size: 14px">
        <van-stepper
          v-model="basicInfo.total_join"
          placeholder="请输入限制次数"
          :show-plus="false"
          :show-minus="false"
          input-width="140px"
          step="1"
          min="1"
          max="999999"
          integer
        />

        <!-- <template slot="default">
          <div class="jpsl">
            <van-field
              class="right noborder"
              readonly
              clickable
              :value="basicInfo.total_join"
              placeholder="请输入限制次数"
              @touchstart.native.stop="basicInfo.total_join_show = true"
            />
            <van-number-keyboard
              v-model="basicInfo.total_join"
              :show="basicInfo.total_join_show"
              :maxlength="6"
              @blur="basicInfo.total_join_show = false"
            />
          </div>
        </template>-->
      </van-cell>
    </van-cell-group>
    <div class="title">奖品设置</div>
    <van-cell-group class="all sz" v-for="(list, index) in prizeList" :key="index">
      <van-icon
        v-if="prizeList.length > 1"
        name="close"
        size="20"
        class="close"
        @click="removePrice(index)"
      />
      <van-cell :required="true" title="奖项设置">
        <van-radio-group v-model="prizeList[index].type" class="right">
          <van-radio name="1" style="float:left;margin-right:10px;">优惠券</van-radio>
          <van-radio name="2" style="float:right;">谢谢参与</van-radio>
        </van-radio-group>
      </van-cell>
      <template v-if="prizeList[index].type == 1">
        <van-cell :required="true" center>
          <template slot="title">
            <span class="custom-title">奖项名称</span>
          </template>
          <template slot="default">
            <van-field class="right" v-model="prizeList[index].name" placeholder="请输入奖项名称" />
          </template>
        </van-cell>
        <van-cell
          :required="true"
          title="选择优惠券"
          :value="prizeList[index].checked_coupon.name"
          is-link
          @click="handleCheckCoupon(index)"
          center
        />
        <van-cell :required="true" title="总发放数量限制" style="font-size:14px;">
          <van-stepper
            v-model="prizeList[index].total_limit"
            placeholder="请输入限制次数"
            :show-plus="false"
            :show-minus="false"
            input-width="140px"
            step="1"
            min="1"
            max="999999"
            integer
          />
          <!-- <template slot="default">
            <div class="jpsl">
              <van-field
                class="right noborder"
                readonly
                clickable
                :value="prizeList[index].total_limit"
                placeholder="请输入限制次数"
                @touchstart.native.stop="prizeList[index].total_limit_show = true"
              />
              <van-number-keyboard
                v-model="prizeList[index].total_limit"
                :show="prizeList[index].total_limit_show"
                :maxlength="6"
                @blur="prizeList[index].total_limit_show = false"
              />
            </div>
          </template>-->
        </van-cell>
        <van-cell :required="true" title="每日发放数量限制" style="font-size:14px;">
          <van-stepper
            v-model="prizeList[index].preLimit"
            placeholder="请输入限制次数"
            :show-plus="false"
            :show-minus="false"
            input-width="140px"
            step="1"
            min="1"
            integer
          />
          <!-- <template slot="default">
            <div class="jpsl">
              <van-field
                class="right noborder"
                readonly
                clickable
                :value="prizeList[index].preLimit"
                placeholder="请输入限制次数"
                @touchstart.native.stop="prizeList[index].preLimit_show = true"
              />
              <van-number-keyboard
                v-model="prizeList[index].preLimit"
                :show="prizeList[index].preLimit_show"
                :maxlength="6"
                @blur="prizeList[index].preLimit_show = false"
              />
            </div>
          </template>-->
        </van-cell>
        <van-cell :required="true" title="每人限领数量" style="font-size:14px;">
          <van-stepper
            v-model="prizeList[index].limit"
            placeholder="请输入限制次数"
            :show-plus="false"
            :show-minus="false"
            input-width="140px"
            step="1"
            min="1"
            max="999999"
            integer
          />
          <!-- <template slot="default">
            <div class="jpsl">
              <van-field
                class="right noborder"
                readonly
                clickable
                :value="prizeList[index].limit"
                placeholder="请输入限制数量"
                @touchstart.native.stop="prizeList[index].limit_show = true"
              />
              <van-number-keyboard
                v-model="prizeList[index].limit"
                :show="prizeList[index].limit_show"
                :maxlength="6"
                @blur="prizeList[index].limit_show = false"
              />
            </div>
          </template>-->
        </van-cell>
      </template>
      <van-cell :required="true" style="font-size:14px;" class="cs gl">
        <template slot="title">
          <span class="custom-title">中奖概率</span>
        </template>
        <template slot="default">
          <div class="jpsl">
            <!-- <van-field
              class="right noborder"
              readonly
              clickable
              :value="prizeList[index].probability"
              @touchstart.native.stop="prizeList[index].probability_show = true"
            />-->
            <van-stepper
              class="right noborder pro-input"
              style="padding-right: 20px;"
              v-model="prizeList[index].probability"
              :show-plus="false"
              :show-minus="false"
              input-width="40px"
              step="1"
              min="1"
              max="100"
              integer
              @change="handleProbalitity"
            />
            <span class="bfb">%</span>
            <!-- <van-number-keyboard
              v-model="prizeList[index].probability"
              :show="prizeList[index].probability_show"
              @blur="prizeList[index].probability_show = false"
            />-->
          </div>
        </template>
      </van-cell>
      <div class="add" @click="addPrice">添加奖项</div>
    </van-cell-group>
    <!-- 活动描述 -->
    <van-cell :required="true" class="detail">
      <div class="border">
        <div class="des">活动描述</div>
        <van-field
          class="area"
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入描述"
          show-word-limit
        />
      </div>
    </van-cell>
    <!-- 活动图片 -->
    <div class="detail" style="margin-top:0;">
      <div class="des">活动图片</div>
      <van-uploader v-model="fileList_show" multiple :max-count="9" :after-read="afterImgRead" />
    </div>
    <!-- 奖品介绍 -->
    <van-cell :required="true" class="detail">
      <div class="border">
        <div class="des">奖品介绍</div>
        <van-field
          class="area"
          v-model="prize_produce"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入描述"
          show-word-limit
        />
      </div>
    </van-cell>
    <div class="creat" @click="handleCreate">创建活动</div>

    <van-action-sheet v-model="show" :actions="coupons" cancel-text="取消" @select="onSelect" />
  </div>
</template>

<script>
import axios from "axios";
import * as API_Active from "@/api/active";
import { Toast } from "vant";
export default {
  data() {
    return {
      can_create: true,
      minStartDate: null,
      minEndDate: null,
      // 选择优惠券 当前下标
      current_index: -1,
      logo_imgs: [],
      bg_imgs: [],
      show: false,
      coupons: [],
      basicInfo: {
        title: "",
        startTime: new Date(),
        startTime1: "",
        endTime: new Date(),
        endTime1: "",
        startShow: false,
        endShow: false,
        jointimes: "",
        jointimes_show: false,
        total_join: "",
        total_join_show: false
      },
      // 抽奖设置
      LuckyDraw: {
        name: "",
        number: "1",
        winningNumber: "1",
        quantity: true,
        addNumber: "1",
        show: false,
        show2: false,
        show3: false,
        show4: false
      },
      // 奖品设置
      prizeList: [
        {
          name: "",
          timeLine_type: "",
          type: "",
          discountsMoney: "",
          discountsShow: false,
          full: "",
          fullMoney: "",
          fullShow: false,
          validity: "",
          startTime: new Date(),
          startTime1: "",
          startShow: false,
          endTime: new Date(),
          endTime1: "",
          endShow: false,
          total_limit: "",
          total_limit_show: false,
          preLimit: "",
          preLimit_show: false,
          limit: "",
          limit_show: false,
          probability: "",
          probability_show: false,
          checked_coupon: {}
        }
      ],
      title: "",
      title2: "",
      coupon: "",
      newCustomer: "",
      condition: "1",
      type: "",
      startShow: false,
      endShow: false,
      // 活动描述
      message: "",
      // 活动图片
      fileList_show: [],
      fileList: [],
      prize_produce: "",
      pTime: new Date(),
      confirmTime: new Date()
    };
  },
  created() {},
  methods: {
    // 限制 vant stepper 输入长度
    handleProbalitity(val) {
      if (val.length > 2) {
        document.getElementsByClassName('pro-input')[0].getElementsByTagName('input')[0].maxLength = 3;
        this.$toast('最多输入3位，且最大值为100');
      }
    },
    openStartTime() {
      this.basicInfo.startShow = true;
      this.minStartDate = new Date();
    },
    openEndTime() {
      this.basicInfo.endShow = true;
      this.minEndDate = new Date();
    },
    // 获取模板数据
    getTemplateDate(id) {
      API_Active.getTemplateData(id).then(res => {
        // 构造数据
        // res.activityInfo
        this.basicInfo.title = res.data.activityInfo.activityName;
        let start_time = res.data.activityInfo.startTime;
        this.basicInfo.startTime1 =
          `${start_time.substring(0, 4)}-${start_time.substring(
            4,
            6
          )}-${start_time.substring(6, 8)}` + start_time.substring(8);
        let end_time = res.data.activityInfo.endTime;
        this.basicInfo.endTime1 =
          `${end_time.substring(0, 4)}-${end_time.substring(
            4,
            6
          )}-${end_time.substring(6, 8)}` + end_time.substring(8);
        this.bg_imgs[0] = { url: res.data.activityInfo.backImage };
        this.logo_imgs[0] = { url: res.data.activityInfo.logo };
        this.basicInfo.jointimes = res.data.activityInfo.joinLimit?.toString();
        this.basicInfo.total_join = res.data.activityInfo.totalLimit?.toString();
        this.message = res.data.activityInfo.des;
        let imgs = JSON.parse(res.data.activityInfo.image);
        let img_list = [];
        imgs.forEach(i => {
          let item = {};
          item.url = i;
          img_list.push(item);
        });
        this.fileList = img_list;
        this.prize_produce = res.data.activityInfo.prizeDesc;
        // this.prizeList = res.data.activityPrizes;
        let prizes = [];
        res.data.activityPrizes.forEach((p, index) => {
          let item = {
            name: "",
            timeLine_type: "",
            type: "",
            discountsMoney: "",
            discountsShow: false,
            full: "",
            fullMoney: "",
            fullShow: false,
            validity: "",
            startTime: new Date(),
            startTime1: "",
            startShow: false,
            endTime: new Date(),
            endTime1: "",
            endShow: false,
            total_limit: "",
            total_limit_show: false,
            preLimit: "",
            preLimit_show: false,
            limit: "",
            limit_show: false,
            probability: "",
            probability_show: false,
            checked_coupon: {}
          };
          if (p.prizeType === 2) {
            item.type = "1";
          } else if (p.prizeType === 1) {
            item.type = "2";
          }
          item.name = p.prizeName;
          item.id = index;
          item.total_limit = p.quantity?.toString();
          item.limit = p.personLimit?.toString();
          item.probability = p.probability?.toString();
          item.preLimit = p.limitReceive?.toString();
          this.checked_coupon = JSON.parse(p.coupon);
          prizes.push(item);
        });
        this.prizeList = prizes;
      });
    },
    handleCheckCoupon(index) {
      this.show = true;
      this.current_index = index;
    },
    // 选择优惠券
    onSelect(val) {
      console.log(val);
      this.prizeList[this.current_index].checked_coupon = val;
      this.show = false;
    },
    getCoupons() {
      let id = sessionStorage.getItem("oyStallCode") || 1;
      API_Active.getAllCouponsByOyStallCode(id).then(res => {
        let temp = [];
        res.data.forEach(i => {
          let item = i;
          item.name = i.name + ' ID:' + i.id;
          temp.push(item);
        })
        this.coupons = temp;
      });
    },
    afterImgRead(file) {
      if (file.length) {
        // let imgs = [];
        file.forEach(e => {
          let params = new FormData();
          params.append("file", e.file);
          let url = "http://139.155.48.151:8084/admin/auth/util/saveImg";
          axios.post(url, params).then(res => {
            let img_url = JSON.parse(JSON.stringify(res.data.data.imgPath));
            // imgs.push(img_url);
            this.fileList.push(img_url);
          });
        });
      } else {
        let params = new FormData();
        params.append("file", file.file);
        let url = "http://139.155.48.151:8084/admin/auth/util/saveImg";
        axios.post(url, params).then(res => {
          this.fileList.push(JSON.parse(JSON.stringify(res.data.data.imgPath)));
        });
      }
      console.log(this.fileList);
    },
    async afterLogoRead(file) {
      let logo_img = await this.getImgUrl(file.file);
      let item = {
        url: logo_img,
        status: "done",
        message: "上传成功"
      };
      this.logo_imgs[0] = item;
    },
    async afterBGRead(file) {
      let bg_img = await this.getImgUrl(file.file);
      let item = {
        url: bg_img,
        status: "done",
        message: "上传成功"
      };
      this.bg_imgs[0] = item;
    },
    // 上传图片
    async getImgUrl(file) {
      let params = new FormData();
      params.append("file", file);
      let url = "http://139.155.48.151:8084/admin/auth/util/saveImg";
      const img = await axios.post(url, params);
      let urls = img.data.data.imgPath;
      return urls;
    },
    radioChange(val) {
      // console.log(val);
    },
    handleCreate() {
      if (!this.can_create) {
        return false;
      }
      if (
        this.basicInfo.title == "" ||
        this.basicInfo.startTime1 == "" ||
        this.basicInfo.endTime1 == "" ||
        this.logo_imgs.length == 0 ||
        this.basicInfo.jointimes == "" ||
        this.basicInfo.total_join == "" ||
        this.message == "" ||
        this.prize_produce == ""
      ) {
        this.$toast("请完整填写表单！");
        return false;
      }
      if (this.basicInfo.jointimes > this.basicInfo.total_join) {
        this.$toast("会员单日参与次数应小于等于会员总参与次数");
        return false;
      }
      let validate = null;
      for (let i in this.prizeList) {
        if (this.prizeList[i].type == "") {
          this.$toast(`奖项${i}类型必选！`);
          validate = false;
          break;
        }
        if (this.prizeList[i].type == 1) {
          if (
            this.prizeList[i].name == "" ||
            !this.prizeList[i].checked_coupon.id ||
            this.prizeList[i].total_limit == "" ||
            this.prizeList[i].limit == "" ||
            this.prizeList[i].preLimit == "" ||
            this.prizeList[i].probability == ""
          ) {
            this.$toast("请填写完整奖项设置！");
            validate = false;
            break;
          }
          
          if (this.prizeList[i].total_limit < this.prizeList[i].preLimit) {
            this.$toast("总发放数量应大于等于每日发放数量");
            validate = false;
            break;
          }
          if (this.prizeList[i].total_limit < this.prizeList[i].limit) {
            this.$toast("总发放数量应大于每人限领数量");
            validate = false;
            break;
          }
        } else {
          if (this.prizeList[i].probability === "") {
            this.$toast("奖项概率不允许为空");
            validate = false;
            break;
          }
        }
      }
      if (validate === false) {
        return false;
      }
      if (
        new Date(this.basicInfo.startTime1) >= new Date(this.basicInfo.endTime1)
      ) {
        this.$toast("活动开始时间应小于活动开始时间");
        return false;
      }
      let params_prizeList = [];
      let total_probability = 0;
      this.prizeList.forEach((p, index) => {
        let temp = {};
        temp.id = index;
        temp.prizeName = p.name;
        if (p.type == 1) {
          temp.prizeType = 2;
        } else if (p.type == 2) {
          temp.prizeType = 1;
          temp.prizeName = "谢谢惠顾";
        }
        temp.quantity = p.total_limit;
        temp.personLimit = p.limit;
        temp.probability = p.probability;
        total_probability += Number(p.probability);
        temp.limitReceive = p.preLimit;
        temp.couponId = p.checked_coupon.id;
        temp.coupon = JSON.stringify(p.checked_coupon);
        params_prizeList.push(temp);
      });
      if (total_probability != 100) {
        this.$toast("所有奖项概率之和必须为100%");
        return false;
      }
      let params = {
        activityInfo: {
          id: 0,
          activityName: this.basicInfo.title,
          activityType: "wheel",
          startTime: this.basicInfo.startTime1,
          endTime: this.basicInfo.endTime1,
          backImage: this.bg_imgs[0] ? this.bg_imgs[0].url : "",
          logo: this.logo_imgs[0] ? this.logo_imgs[0].url : "",
          joinLimit: this.basicInfo.jointimes,
          totalLimit: this.basicInfo.total_join,

          des: this.message,
          image: JSON.stringify(this.fileList),
          prizeDesc: this.prize_produce
        },
        activityPrizes: params_prizeList
      };
      API_Active.createActive(params).then(res => {
        if (res.result === "fail") {
          this.$toast(res.errorMsg);
          return false;
        }
        Toast.success("创建成功");
        this.can_create = true;
        setTimeout(() => {
          this.$router.push({
            name: "createSuccess",
            params: {
              activityId: res.data.activityInfo.id,
              activityType: "wheel",
              logo: this.logo_imgs[0].url,
              des: this.message
            }
          });
        }, 200);
      });
    },
    startTimeChange(e) {
      let startTimeArr = e.getValues();
      this.basicInfo.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
    },
    startTimeChange2(e, index) {
      console.log(111);

      this.prizeList[index].startTime1 = this.timeFormat(e);
      console.log(this.prizeList[index].startTime1, "2222");
    },
    handlePSTime(index) {
      this.prizeList[index].startTime1 = this.timeFormat(this.confirmTime);
      this.prizeList[index].startShow = false;
    },
    timeFormat(time) {
      let year = 1900 + time.getYear();
      let month = "0" + (time.getMonth() + 1);
      let date = "0" + time.getDate();
      let hour = "0" + time.getHours();
      let minute = "0" + time.getMinutes();
      return (
        year +
        "-" +
        month.substring(month.length - 2, month.length) +
        "-" +
        date.substring(date.length - 2, date.length) +
        " " +
        hour.substring(hour.length - 2, hour.length) +
        ":" +
        minute.substring(minute.length - 2, minute.length) +
        ":00"
      );
    },
    endTimeChange(e) {
      let endTimeArr = e.getValues();
      this.basicInfo.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
    },
    handleBasicETime(value) {
      this.basicInfo.endShow = false;
      this.basicInfo.endTime1 = this.timeFormat(value);
    },
    endTimeChange2(e, index) {
      this.prizeList[index].endTime1 = this.timeFormat(e);
    },
    ///点击确定不修改处理
    handleStartTime(e, index) {
      console.log(e, "e");

      this.prizeList[index].startTime1 = this.timeFormat(e);
      this.prizeList[index].startShow = false;
    },
    handleEndTime(e, index) {
      console.log(e, "e");

      this.prizeList[index].endTime1 = this.timeFormat(e);
      this.prizeList[index].endShow = false;
    },
    //////
    handlePETime(index) {
      this.prizeList[index].endTime1 = this.timeFormat(this.confirmTime);
      this.prizeList[index].endShow = false;
    },
    // 数字大写转小写
    numberToUpperCase(textIndex) {
      let newString = "";
      let newTextIndex = textIndex + "";

      function sum(value, index) {
        var newValue = "";
        if (textIndex === 9) {
          return !index ? "十" : "";
        }
        let isSeat = ~~textIndex > 9 && ~~textIndex < 19;
        switch (~~value) {
          case 1:
            newValue = !index ? (isSeat ? "" : "一") : "十一";
            break;
          case 2:
            newValue = !index ? (isSeat ? "" : "二") : "十二";
            break;
          case 3:
            newValue = !index ? (isSeat ? "" : "三") : "十三";
            break;
          case 4:
            newValue = !index ? (isSeat ? "" : "四") : "十四";
            break;
          case 5:
            newValue = !index ? (isSeat ? "" : "五") : "十五";
            break;
          case 6:
            newValue = !index ? (isSeat ? "" : "六") : "十六";
            break;
          case 7:
            newValue = !index ? (isSeat ? "" : "七") : "十七";
            break;
          case 8:
            newValue = !index ? (isSeat ? "" : "八") : "十八";
            break;
          case 9:
            newValue = !index ? (isSeat ? "" : "九") : "九十";
            break;
          case 0:
            newValue = "十";
            break;
          default:
            break;
        }
        return newValue;
      }

      for (let i = 0; i < newTextIndex.length; i++) {
        newString += sum(newTextIndex.substring(i, i + 1), i);
      }
      return newString;
    },
    addPrice() {
      if (this.prizeList.length > 7) {
        this.$toast("最多设置8个奖项");
        return;
      }
      this.prizeList.push({
        name: "",
        timeLine_type: "",
        type: "",
        discountsMoney: "",
        discountsShow: false,
        full: "",
        fullMoney: "",
        fullShow: false,
        validity: "",
        startTime: new Date(),
        startTime1: "",
        startShow: false,
        endTime: new Date(),
        endTime1: "",
        endShow: false,
        total_limit: "",
        total_limit_show: false,
        preLimit: "",
        preLimit_show: false,
        limit: "",
        limit_show: false,
        probability: "",
        probability_show: false,
        checked_coupon: {}
      });
    },
    removePrice(index) {
      this.prizeList.splice(index, 1);
    },
    handleBasicSTime(value) {
      this.basicInfo.startShow = false;
      this.basicInfo.startTime1 = this.timeFormat(value);
    }
  },
  mounted() {
    if (this.$route.query.activityId) {
      // 有模板数据
      console.log("有模板数据");
      let template_id = this.$route.query.templateId;
      this.getTemplateDate(template_id);
    }
    this.pTime = this.timeFormat(this.pTime);
    console.log(this.pTime, "time");
    this.getCoupons();
  }
};
</script>
<style></style>

<style scoped>
.l-yh,
.r-yh {
  width: 55%;
  display: flex;
  align-items: center;
}
.l-yh {
  width: 45%;
}
.bfb {
  position: absolute;
  right: 3px;
  top: 0;
}
.all >>> input {
  text-align: right;
}
.small {
  font-size: 10px;
}
.creat,
.add {
  width: 96%;
  height: 40px;
  background: rgba(117, 178, 253, 1);
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 16px;
}
.add {
  margin: 12px auto;
}
.area {
  background-color: #f8f8f8;
  width: 100%;
}
.des {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
  margin-bottom: 12px;
}

.phone {
  margin-right: 10px;
}
.title {
  background-color: #f8f8f8;
  height: 36px;
  line-height: 36px;
  font-size: 12px;
  padding-left: 16px;
  color: #2d476a;
}
[data-v-08d4afe1] .van-cell {
  height: 100%;
  font-size: 14px;
}
.right {
  padding: 0;
}
.nobr >>> .van-cell:not(:last-child)::after {
  display: none !important;
}
.right >>> .van-cell:not(:last-child)::after {
  display: none !important;
}
.noborder >>> .van-cell:not(:last-child)::after {
  border: none;
}
.gl >>> .van-field__control {
  margin-right: 18px;
}
.name >>> .van-cell__value {
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 71, 106, 1);
}
.cs >>> .van-cell__title {
  flex: 3;
}
.task >>> .van-cell__title {
  flex: 7;
}
.validity >>> .van-cell__value {
  flex: 2;
}
.container {
  background: rgba(248, 248, 248, 1);
  height: auto;
  display: flex;
  flex-direction: column;
  background: rgba(248, 248, 248, 1);
  min-height: 100%;
}

.van-cell__title {
  color: #2d476a !important;
}
.type {
  height: 84px;
}
.mj {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.sz {
  position: relative;
  padding-top: 10px;
}
.je {
  width: 88px;
  height: 36px;
  display: flex;
  align-items: center;
  background: rgba(248, 248, 248, 1);
  border-radius: 10px;
}
.word {
  margin: 0 7px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 71, 106, 1);
}
.end {
  margin-right: 0;
}
.tm {
  background-color: transparent;
}
.je >>> .van-cell:not(:last-child)::after {
  display: none;
}
.jpsl >>> .van-cell:not(:last-child)::after {
  display: none;
}
.all {
  box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
  padding-bottom: 1px;
}
.detail {
  margin-top: 12px;
  background-color: #fff;
  /* height: 135px; */
  padding: 12px 16px 0 16px;
}
.border {
  border-bottom: 1px solid #ebedf0;
  padding-bottom: 9px;
}
.close {
  position: absolute;
  z-index: 999;
  top: 0;
}
.condition {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.van-cell:not(:last-child)::after {
  right: 14px;
}
.yhType {
  padding: 14px;
}
.yhbr {
  border-bottom: 1px solid #f8f8f8;
  font-size: 14px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

<style lang="scss">
.container {
  .cs {
    .van-cell__value {
      flex: 2;
    }
  }
}
</style>