<template>
  <div class="completeInfoGift">
    <!-- 首段活动时间 -->
    <div class="time-range" v-if="status==='initial' || status==='none'">
      <div v-if="activity">
        {{activityName}}{{ activity.startTime | dateTime }} 至 {{ activity.endTime | dateTime }}
      </div>
      <div v-if="!activity">
        活动时间:2020-05-01 9:00 至 2021-08-30 24:00
      </div>
    </div>
    <!-- 奖品领取 -->
    <div class="gift-receive" v-if="isActivity">
      <!-- 左上角奖品图标 -->
      <div class="gift-logo">
        <img src="https://img10.360buyimg.com/imgzone/jfs/t1/193648/13/16313/2312/6107b10fE1e7ae80a/342bf53bde53a055.png"/>
      </div>
      <!-- 奖品标题 -->
      <div class="gift-title">
        <img src="//img10.360buyimg.com/imgzone/jfs/t1/190164/21/16214/3647/6107b10fEaae14e25/b07502a8a83ba10a.png"/>
        补充信息即可领取奖品
        <img src="//img10.360buyimg.com/imgzone/jfs/t1/180685/6/17122/3476/6107b10fEdcb4cdd1/5027fa97f2b2517b.png"/>
        </div>
      <!-- 下部奖品展示框 -->
      <div class="gift-show">
        <!-- 展示图片信息 -->
        <div class="gift-img">
          <img class="gift-image" :src="prizeImage"/>
        </div>
        <!-- 展示奖品信息 -->
        <div class="gift-info">
          <div class="gift-type">{{ giftType }}</div>
          <!-- <div class="gift-name">{{ giftName }}</div> -->
          <!-- <div class="gift-type">{{ giftType }}</div> -->
        </div>
        <!-- 领取按钮信息 -->
        <div class="gift-btn">
          <Button class="start-button" :disabled="true" v-if="btnStatus==='flag1'">领取奖品</Button>
          <Button class="start-button" :disabled="true" v-if="btnStatus ==='flag2'">奖品已领取</Button>
          <Button class="start-button" @click="receiveGift" v-if="btnStatus==='flag3'">领取奖品</Button>
          <Button class="start-button" :disabled="true" v-if="btnStatus==='flag4'">奖品已领光</Button>
        </div>
      </div>
    </div>
    <!-- 完善信息框 -->
    <div class="complete-info" v-if="isActivity">
      <!-- 完善信息标题 -->
      <div class="complete-title">{{ completeTitle }}</div>
      <!-- 表单部分 -->
      <div class="complete-form">
        <!-- 表单填写部分 -->
        <van-form ref="form" alidate-first @submit="submit">
          <!-- 姓名 -->
          <van-field
            label-width="1.2rem"
            v-model.trim="name" 
            label="姓名" 
            name="name" 
            :disabled="isDisabled" 
            maxlength="10" 
            v-if="formNum1"
            placeholder="请输入姓名"
            >
          </van-field>

          <!-- 生日 -->
          <van-field
            label-width="1.2rem"
            name="birth"
            :value="birth"
            v-model="birth"
            label="生日"
            @click="isBirthModel()"
            :disabled="isDisabled" 
            v-if="formNum2"
            placeholder="请选择生日"
            onfocus="this.blur()"
          />
          
          <!-- 手机号 -->
          <van-field
            label-width="1.2rem"          
            v-model.trim="mobile"
            type="tel"
            name="mobile"
            label="手机号"
            maxlength="11"
            v-if="formNum3"
            placeholder="请输入手机号"
            :disabled="isDisabled" 
          />

          <!-- 性别 -->
          <van-field
            label-width="1.2rem"
            v-model="sex"
            name="sex"
            label="性别"
            v-if="formNum4"
            @click="sexShow()"
            placeholder="请选择性别"
            :disabled="isDisabled" 
            onfocus="this.blur()"
          />
          <!-- </van-field> -->

          <!-- 邮箱 -->
          <van-field 
            label-width="1.2rem"
            v-model.trim="email" 
            label="邮箱" 
            name="email" 
            :disabled="isDisabled" 
            v-if="formNum5"
            placeholder="请输入邮箱"
            type="textarea"
            rows="1"
            autosize
            maxlength="20"
          />
          <!-- 住址 -->
          <van-field
            label-width="1.2rem"
            v-model="cityName"
            onfocus="this.blur()"
            name="cityName"
            label="住址"
            :value="cityName"
            placeholder="请选择省/市/区"
            @click="selectCity()"
            v-if="formNum6"
            :disabled="isDisabled" 
          />

          <!-- 动态展示表单 -->
          <van-field
            label-class="over-field"
            v-for="item in overFormList" 
            :key="item.num"
            label-width="1.2rem"
            v-model.trim=item.content 
            :label=item.title
            name=item.content 
            :disabled="isDisabled" 
            :placeholder="'请输入' + item.title"
            v-show="formOver"
            type="textarea"
            rows="1"
            autosize
            maxlength="34"
          >
          </van-field>

          <!-- 提交 -->
          <div class="confim-btn" v-if="isShow">
            <van-button round type="info" native-type="button" @click="handle">提交信息</van-button>
          </div>
          <div class="confim-btn-else" v-else>
            <van-button>提交信息</van-button>
          </div>
          <!-- 弹出是否确定提交的框 -->
          <van-popup v-model="isShowConfirm" round class="show-modal">
            <div class="confirm">
              <div class="confirm-title">温馨提示</div>
              <div class="confirm-content">
                确认提交完善的信息？
              </div>
              <div class="confirm-btn">
                <van-button round type="info" native-type="submit">确认</van-button>
              </div>
            </div>
          </van-popup>
        </van-form>
      </div>
    </div>
    <!-- 生日 -->
    <van-popup v-model="birthModel" position="bottom" class="maskAreaDiv">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="onConfirm"
        @cancel="birthModel = false"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <!-- 性别 -->
    <div class="maskAreaDiv" v-show="isSexShow">
      <van-action-sheet
        v-model="isSexShow"
        :actions="sexSelect"
        cancel-text="取消"
        close-on-click-action
        @cancel="isSexShow = false"
        @select="onSexSelect"
      />
    </div>
    <!-- 省市区 -->
    <div class="maskAreaDiv" v-show="areaPopIndex == 1">
      <van-area
        title=""
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @cancel="areaCancel"
        @confirm="areaConfirm"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import areaUtil from '../../../util/areaUtil.js' // 获取地址
import dateUtil from "../../../util/dateUtil.js" // 获取时间
import { PrizeResultPopComService, NoPrizeFinishedPopComService } from '../../../util/comCreate.js';
import { phoneCheck, emailCheck } from "../../../util/tools.js" // 引入表单检查
import apis1 from '../../../util/apis1.js' // 引入接口
import { 
  Image as VanImage, 
  Button, 
  Form, 
  Field, 
  DatetimePicker, 
  DropdownMenu, 
  DropdownItem, 
  ActionSheet,
  Toast
} from 'vant' // 调用组件
Vue.use(ActionSheet) // 调用上拉菜单
Vue.use(DropdownMenu) // 调用下拉菜单
Vue.use(DropdownItem) // 调用下拉菜单
Vue.use(DatetimePicker) // 调用日期表单
Vue.use(Form) // 调用表单
Vue.use(Field) // 调用输入框
Vue.use(Button) // 调用button组件
Vue.use(VanImage) // 调用图片组件
Vue.use(Toast) // 调用提示自建
let {getCompleteInfo, addCompleteInfo,immediatelyDrawWSXX} = apis1 // 配置接口调用


export default {
  props: ['isTemplate','keyData','styleData','datas','templateData'],
  data() {
    return {
      componentsData: {
        countDown1: {
          styleData: {},
          datas: {
            isShowAcInprogress:true
          },
          keyData: {
            startTime: 'startTime', //倒计时时间
            endTime: 'endTime', //活动结束倒计时
            activityStatus: 'activityStatus' //活动状态 1 活动未开始 2 活动已结束 3 活动正常状态
          }
        },
        shopName: {
          styleData: {},
          datas: {},
          keyData: {
            shopNameStyle: 'shopNameStyle',
            shopName: 'shopName',
            shopLogo: 'shopLogo'
          }
        }
      },
      activityShow:false,
      activityName:'活动时间:',
      /**
     * 活动状态
     * 0：默认状态,没有含义
     * 1:活动尚未开始
     * 2:活动已结束
     * 3:活动正常进行
     */
      actStatus: '0',
      //初期活动状态
      status: 'none',
      // 活动信息
      activity: null,
      // 奖品名称
      giftName: "", 
      // 完善信息标题
      completeTitle: "完善以下信息",
      // 判断是否禁用输入框
      isDisabled: false,
      // 判断生日选择是否弹出
      showPicker: false,
      // 是否展示提交按钮
      isShow: null,
      // 判断是否弹出省市区
      areaPopIndex: 0,
      // 是否弹出提交弹框
      isShowConfirm: false,
      // 判断领取按钮状态
      btnStatus: null,
      // 表单对象
      name: '',
      birth: '',
      mobile: '',
      sex: '',
      email: '',
      cityName: '',
      // 定义提交表单信息的数组
      perfectInfo: [],
      // 定义提交信息的对象
      allInfo: {
        perfectInfo: []
      },
      // 判断超过表单内容
      overFormList: [],
      // 奖品类型
      giftType: '',
      // 地区列表
      areaList: {},
      // 判断姓名表单是否展示
      formNum1: false,
      formNum2: false,
      formNum3: false,
      formNum4: false,
      formNum5: false,
      formNum6: false,
      formOver: false,
      // 展示图片
      prizeImage: '',
      // 生日弹窗判断
      birthModel: false,
      // 判断性别展示
      isSexShow: false,
      // 性别选择内容
      sexSelect: [{ name: '男' }, { name: '女' }],
      // 省市区变量
      province: '',
      city: '',
      county: '',
      // 领取奖品id
      prizeListId: null,
      // 是否隐藏表单和图片
      isActivity: null,
      // 判断是否验证全部成功
      isPassCheck: null,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(5000, 0, 1),
      currentDate: new Date()
    }
  },
  created() {
    this.publicData.$on('activityLoaded', this.activityLoaded);
    // 获取省市区信息
    this.areaList.province_list = areaUtil.province_list
    this.areaList.city_list = areaUtil.city_list
    this.areaList.county_list = areaUtil.county_list
  },
  mounted () {
    console.log("完善信息有礼进入成功")
  },
  methods: {
    // 活动加载完成
    activityLoaded(data) {
      console.log(data)
      if(this.isTemplate){
        var datasAll = this.templateData;
        if (datasAll) {
          this.activity = datasAll.activity;
          this.activity.startTime = datasAll.activity.dateValue[0];
          this.activity.endTime = datasAll.activity.dateValue[1];
          
          console.log(datasAll.activity,'activity')
          let previewData = {};
          previewData.allInfo = datasAll.perfectInfo.infoList;
          previewData.prizeImage = datasAll.draw.prizeList[0].showImg;
          previewData.flag = "001";
          previewData.beanNum = datasAll.draw.prizeList[0].beanNum;
          previewData.prizeName = datasAll.draw.prizeList[0].prizeName;
          this.setPreviewData(previewData);
          this.checkData(previewData);
        }else{
          //TOOD: 预览的假数据
          this.setPreviewData(this.datas.previewData);
          const data = this.datas.previewData
          this.checkData(data);
        }
      }else{
        this.activity = data;
        console.log(data.actStatus + '我是data')
        if(this.activity.actStatus === 2 || this.activity.actStatus === 1) {
          this.isActivity = false
        } else {
          getCompleteInfo().then(res => {
            const data = res.data
            // 调用数据处理函数
            this.checkData(data)
          })
        }
      }
    },

    // 判断按钮状态
    checkData (val) {
      const data = val
      if (data.flag !== undefined) {
        if(data.flag === "001"){
          this.btnStatus = 'flag1'
          this.isShow = true
        }
        if(data.flag === "002"){
          this.btnStatus = 'flag2'
          this.isShow = false
        }
        if(data.flag === "003"){
          this.btnStatus = 'flag3'
          this.isShow = false
        }
        if(data.flag === "004"){
          this.btnStatus = 'flag4'
          this.isShow = false
        }
        if(data.flag === "005"){
          this.btnStatus = 'flag1'
          this.isShow = false
        }
      }

      // 判断表单展示内容
      data.allInfo.forEach(val => {
        if(val["num"] === "info01") {
          this.formNum1 = true
          this.name = val["content"]
        }
        if(val["num"] === "info02") {
          this.formNum2 = true
          this.birth = val["content"]
        }
        if(val["num"] === "info03") {
          this.formNum3 = true
          this.mobile = val["content"]
        }
        if(val["num"] === "info04") {
          this.formNum4 = true
          this.sex = val["content"]
        }
        if(val["num"] === "info05") {
          this.formNum5 = true
          this.email = val["content"]
        }
        if(val["num"] === "info06") {
          this.formNum6 = true
          this.cityName = val["content"]
        }
        if(val["content"] !== "") {
          this.isDisabled = true
        }
        // 判断多于超过固定表单内容
        if (val["num"] !== "info01" 
          && val["num"] !== "info02" 
          && val["num"] !== "info03" 
          && val["num"] !== "info04" 
          && val["num"] !=="info05" 
          && val["num"] !=="info06") {
          this.overFormList.push(val)
          this.formOver = true
        }
      })
      // 给页面展示数据赋值
      this.prizeImage = data.prizeImage // 奖品路径赋值
      this.giftName = data.beanNum// 奖品名称
      this.giftType = data.prizeName // 奖品数量
      this.prizeListId = data.prizeId // 奖品id
      this.isActivity = true // 页面展示数据完毕
    },

    // 点击调用省市区
    selectCity() {
      if (!this.isDisabled) {
        this.areaPopIndex = 1;
      }
    },
    //取消省市区选择
    areaCancel() {
      this.areaPopIndex = 0;
    },
    // 省市区选择完毕
    areaConfirm(value) {
      this.areaPopIndex = 0
      this.province = value[0] ? value[0].name : "";
      this.city = value[1] ? value[1].name : "";
      this.county = value[2] ? value[2].name : "";
      this.cityName = this.province + this.city + this.county;
    },

    // 弹出提交表单
    handle () {
      if(this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      } else {
        this.perfectInfo = []
        this.allInfo = {}
        this.isPassCheck = false
        // 判断要提交的内容是否规范
        // 判断如果有名称的话
        if (this.formNum1) {
          if (!this.name) {
            this.$toast("请输入姓名");
            this.isPassCheck = false
            return;
          } else {
            this.perfectInfo.push({"num":"info01","title":"姓名","content":this.name})
            this.isPassCheck = true
          }
        } 
        // 判断如果有生日的话
        if (this.formNum2) {
          if (!this.birth) {
            this.$toast("请选择生日");
            this.isPassCheck = false
            return;
          } else {
            this.perfectInfo.push({"num":"info02","title":"生日","content":this.birth})
            this.isPassCheck = true
          }
        } 
        // 判断如果有手机的话
        if(this.formNum3) {
          if(!this.mobile) {
            this.$toast("请输入手机号");
            this.isPassCheck = false
            return;
          } else if (!phoneCheck(this.mobile)) {
            this.$toast("手机号格式不正确");
            this.isPassCheck = false
            return;
          } else {
            this.perfectInfo.push({"num":"info03","title":"手机号","content":this.mobile})
            this.isPassCheck = true
          }
        }
        // 判断如果有性别的话
        if (this.formNum4) {
          if (!this.sex ) {
            this.$toast("请选择性别");
            this.isPassCheck = false
            return;
          } else {
            this.perfectInfo.push({"num":"info04","title":"性别","content":this.sex})
            this.isPassCheck = true
          }
        }
        // 判断如果有邮箱的话
        if(this.formNum5) {
          if(!this.email) {
            this.$toast("请输入邮箱");
            this.isPassCheck = false
            return;
          } else if(!emailCheck(this.email)) {
            this.$toast("请输入正确的邮箱");
            this.isPassCheck = false
            return;
          } else {
            this.perfectInfo.push({"num":"info05","title":"邮箱","content":this.email})
            this.isPassCheck = true
          }
        } 

        // 判断如果有地区的话
        if (this.formNum6) {
          if(!this.province || !this.city || !this.county) {
            this.$toast("请选择省市区");
            this.isPassCheck = false
            return;
          } else {
          this.perfectInfo.push({"num":"info06","title":"住址","content":this.cityName})
          this.isPassCheck = true
          }
        }
        // 循环判断超出表单内容
        if (this.overFormList) {
          try {
            this.overFormList.forEach(val => {
              if (!val["content"]) {
                this.$toast("请输入" + val["title"]);
                this.isPassCheck = false
                throw new Error('end')
              } else if (val["content"].length > 100) {
                this.$toast(val["title"]+"内容不能超过100字");
                this.isPassCheck = false
                throw new Error('end')
              } else {
                this.perfectInfo.push({"num":val["num"],"title":val["title"],"content":val["content"]})
                this.isPassCheck = true
              }
            })
          } catch (err) {
            console.log("必填项未填写")
          }
        }
        if (this.isPassCheck == true) {
          console.log("进入提交页面")
          this.isShowConfirm = true
          this.allInfo.perfectInfo = this.perfectInfo
        }
      }
    },

    // 提交表单
    submit (values) {
      const param = this.allInfo
      addCompleteInfo(param).then(res => {
        if (res.resp_code == 0) {
          location.reload();
        }
      })
      this.isShowConfirm = false
    },

    // 提交生日
    onConfirm (v) {
      // 处理返回时间格式
      this.birth = v.getFullYear() + '年' + (Number(v.getMonth()) + 1) + '月' + v.getDate() +'日 '
      // 关闭弹窗
      this.birthModel = false
    },

    // 选择性别
    onSexSelect (val) {
      this.isSexShow = false
      this.sex = val["name"]
    },

    // 领取奖品
    async receiveGift() {
      console.log("------领取奖品-------")
      await immediatelyDrawWSXX(this.prizeListId, receiveData => {
        if (receiveData.resp_code == 0) {
          //领取失败提示
          if(receiveData.data.status != 1){
            this.initData("领取失败");
            return;
          }
          if (receiveData.data.result == true) {
            var obj = {
              datas: {},
              keyData: {
                prizeUrl: 'showImg',
                prizeName: 'prizeName',
                prizeType: 'prizeType',
                priceInfo: 'priceInfo',
                discountType: 'discountType',
                couponType: 'couponType'
              }
            };

            obj.datas = receiveData.data;
            PrizeResultPopComService.create(obj, receiveData.data, submit => {
                this.initData("");
                PrizeResultPopComService.close();
            });
            getCompleteInfo().then(res => {
              const data = res.data
                // 调用数据处理函数
                this.checkData(data);
                if(res.resp_msg == 50009){
                  this.btnStatus = 'flag4';
                }
            })
          } else {
            NoPrizeFinishedPopComService.create(
                '奖品已领光啦~',
                '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
                submit => {
                    this.initData("");
                    NoPrizeFinishedPopComService.close();
                    location.reload();
                }
            );
          }
        }
        else if (receiveData.resp_code == 50009) {
          location.reload();
        }
        else if (receiveData.resp_code == 60010) {
          NoPrizeFinishedPopComService.create(
            '奖品已领光啦',
            '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
            submit => {
              this.initData("");
              NoPrizeFinishedPopComService.close();
              location.reload();
            }
          );
        }
      })
    },
    // 判断是否调用生日
    isBirthModel () {
      if (!this.isDisabled) {
        this.birthModel = true
      }
    },
    // 判单是否调用性别
    sexShow () {
      if (!this.isDisabled) {
        this.isSexShow = true
      }
    },

    // 共同
    // 设置入口
    setGate() {
      this.actStatus = sessionStorage.getItem("actStatus");
      if (this.actStatus === '3') {
          this.initData("2");
      }
    },
    //数据加载
    initData(selectFlag) {

    },

    //关闭活动说明
    closeClick() {
        this.initData("1");
        this.showActivity = false;
    },
    //活动说明按钮【确认参与】
    participateClick() {
        this.initData("1");
        this.showActivity = false;
    },
    //活动说明按钮【确认参与】
    getPrize() {
        this.initData("2");
    },
    // 设置预览数据
    setPreviewData(data,flg) {
      console.log('setPreviewData',data)
      this.status = 'initial';
      //手机预览的情况
      let letBrowser = this.getBrowser();
      if(letBrowser.plat === "android" || letBrowser.plat === "iphone"){
      }
      else{
          this.activityShow = true;
          this.activityName = '活动时间:';
      }
      this.trialGoods = data.trialGoods;
    },
    //判断是否手机端浏览
    getBrowser(){
      var ua = navigator.userAgent.toLowerCase();
      var btypeInfo = (ua.match( /firefox|chrome|safari|opera/g ) || "other")[ 0 ];
      if( (ua.match( /msie|trident/g ) || [] )[ 0 ] )
      {
          btypeInfo = "msie";
      }
      var pc = "";
      var prefix = "";
      var plat = "";
      //如果没有触摸事件 判定为PC
      var isTocuh = ("ontouchstart" in window) || (ua.indexOf( "touch" ) !== -1) || (ua.indexOf( "mobile" ) !== -1);
      if( isTocuh ) {
        if( ua.indexOf( "ipad" ) !== -1 )
        {
          pc = "pad";
        } else if( ua.indexOf( "mobile" ) !== -1 ) {
          pc = "mobile";
        } else if( ua.indexOf( "android" ) !== -1 ) {
          pc = "androidPad";
        } else {
          pc = "pc";
        }
      } else {
          pc = "pc";
        }
      switch( btypeInfo ) {
        case "chrome":
        case "safari":
        case "mobile":
          prefix = "webkit";
          break;
        case "msie":
          prefix = "ms";
          break;
        case "firefox":
          prefix = "Moz";
          break;
        case "opera":
          prefix = "O";
          break;
        default:
          prefix = "webkit";
          break
      }
      plat = (ua.indexOf( "android" ) > 0) ? "android" : navigator.platform.toLowerCase();
      return {
        version: (ua.match( /[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[ 1 ],     //版本
        plat: plat,                   //系统
        type: btypeInfo,              //浏览器
        pc: pc,
        prefix: prefix,                //前缀
        isMobile: (pc == "pc") ? false : true              //是否是移动端
      };
    }
  },
  filters: {
    //时间转换
    dateTime(val) {
      if (val) {
          return dateUtil.formatTime(val, 'yyyy-MM-dd hh:mm');
      }
      return val
    },
    ellipsis(value) {
      if (!value) return ''
        if (value.length > 5) {
            return value.slice(0, 5) + '...'
        }
      return value
    }
  }
}
</script>
<style lang="scss" scoped>
.completeInfoGift {
  padding-bottom: 0.1rem;
  .tipCss {
  font-size: 0.3rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.78rem;
  letter-spacing: 0rem;
  color: #fefefe;
  margin: 0.5rem;
  line-height: 1;
  margin-top: 6.1rem;
  }
  .time-range {
    width: 5.84rem;
    height: 0.34rem;
    margin-top: 0.5rem;
    background-size:cover;
    text-align:center;
    font-size: 0.2rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.34rem;
    position:absolute;
    top:0;
    left: 50%;
    transform:translateX(-50%);
  }
  // 奖品展示页面
  .gift-receive {
    margin: 0.2rem 0.2rem;
    border-radius: 0.3rem;
    background: #FFFFFF;
    // 奖品logo
    .gift-logo {
      position: absolute;
      background-repeat: round;
      // padding: 0 0.3rem;
      width: 0.96rem;
      height: 0.96rem;
    }
    // 奖品标题
    .gift-title {
      text-align: center;
      font-weight: bold;
      padding-top: 0.21rem;
      font-family: SourceHanSansCN-Medium;
      img {
        width: 0.36rem;
        height: 0.36rem;
      }
    }
    // 奖品展示框
    .gift-show {
      margin-left: 0.9rem;
      margin-top: 0.32rem;
      margin-right: 0.26rem;
      padding-bottom: 0.22rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // 奖品图片部分
      .gift-img {
        .gift-image {
          width: 1.45rem;
          height: 1.45rem;
        }
      }
      // 奖品展示信息部分
      .gift-info {
        display: flex;
        align-items:flex-end;
        // 奖品内容
        .gift-name {
          color: #F23C3C;
          font-size: 0.53rem;
          margin-right: 0.1rem;
          line-height: 0.4rem;
        }
        // 奖品类型
        .gift-type {
          color: #333333;
          font-size: 0.30rem;
        }
      }
      // 奖品操作按钮
      .gift-btn {
        .start-button {
          width: 1.89rem;
          height: 0.63rem;
          background-image: linear-gradient(0deg, #FEC126, #FD5B2C);
          background-blend-mode: normal,
          normal;
          border-radius: 0.32rem;
          font-size: 0.30rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.36rem;
          letter-spacing: 0rem;
          color: #FFFFFFFF;

          &:disabled {
            // background-image: linear-gradient(0deg, #ccc5c5 1%, #949191 50%, #858282 100%), linear-gradient(#b7b7b7, #d3d3d3);
            background: #858282 ;
            color: #FFFFFFFF;
            opacity: 1;
          }
        }
      }
    }
  }
  // 完善信息框
  .complete-info {
    margin: 0 0.2rem;
    margin-top: 0.2rem;
    border-radius: 0.3rem;
    background: #FFFFFF;
    // 完善标题title
    .complete-title {
      text-align: center;
      height: 0.97rem;
      background-image:url("https://img10.360buyimg.com/imgzone/jfs/t1/183111/36/17227/58716/6107b10fE479d5732/85ace1f3e4512b87.png");
      background-repeat: round;
      color: #FFFFFF;
      font-family: SourceHanSansCN-Bold;
      font-weight: bold;
      font-size: 0.36rem;
      border-radius: 0.3rem 0.3rem 0 0;
      line-height: 1rem;
      margin-top:-2px
    }
    // 表单框
    .complete-form {
      // padding-right: 0.36rem;
      border-radius: 0.3rem;
    }
    // 表单样式
    .form-input {
      width: 4rem;
      height: 0.54rem;
      background: #F8F8F8;
      border-radius: 0.27rem;
      padding-left: 0.34rem;
    }
    .confim-btn {
      margin-top: 0.15rem;
      padding-bottom: 0.18rem;
      button {
        border: none;
        border-radius: 0.4rem;
        width: 3.33rem;
        height: 0.8rem;
        background: linear-gradient(0deg, #FEC126, #FD5B2C);
        font-size: 0.36rem;
        font-family: SourceHanSansCN-Medium;
      }
    }
    .confim-btn-else {
      visibility: hidden;
    }
  }
  .maskAreaDiv {
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    position: fixed;
    top: 0;
    .van-picker {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }
    .van-datetime-picker{
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }
    .van-action-sheet {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }
  }
  .show-modal {
    width: 6.45rem;
    height: 4.04rem;
    .confirm {
      width: 6.45rem;
      .confirm-title {
        background: url("https://img10.360buyimg.com/imgzone/jfs/t1/183111/36/17227/58716/6107b10fE479d5732/85ace1f3e4512b87.png");
        color: #FFFFFF;
        height: 1rem;
        line-height: 1rem;
        background-repeat: round;
        width: 6.45rem;
        margin-top: -2px;
      }
      .confirm-content {
        margin-top: 0.82rem;
        font-size: 0.40rem;
        font-family: SourceHanSansCN-Medium;
      }
      .confirm-btn {
          margin-top: 0.6rem;
          padding-bottom: 0.18rem;
        button {
          border: none;
          border-radius: 0.4rem;
          width: 2.84rem;
          height: 0.68rem;
          background: linear-gradient(0deg, #FEC126, #FD5B2C);
          font-size: 0.36rem;
          font-family: SourceHanSansCN-Medium;
        }
      }
    }
  }
  .over-field {
    font-size: 0.5rem;
  }
}

</style>

<style lang="scss">
  .van-field__label {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .van-tabs__content{
    padding-top: 0.3rem;
  }
  .van-tabs__wrap{
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
  }
  .box{
    width: 3.36rem;
    height: 5rem;
    background-image:url(//img10.360buyimg.com/imgzone/jfs/t1/112848/24/24238/36169/61b0aeadE039d4025/333fab7676011502.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .image{
      width:1.7rem;
      height:2.14rem;
      margin:0px auto;
      margin-top:0.48rem;
      img{
        width:100%;
        height:100%
      }
    }
    .title{
      width: 2.56rem;
      font-size: 12px;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: #F23644;
      line-height: 16px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin:0.28rem auto;
      text-align:left;
      word-break: break-all;
    }
    .memo{
      width: 2.56rem;
      font-size: 10px;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: #FF912F;
      line-height: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin:0 auto;
      text-align:left;
      word-break: break-all;
    }
  }
  /*body{*/
  /*  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/195335/37/2478/1252077/609a5d9cE957e265d/95a3117a1d8bb6ad.png);*/
  /*  background-attachment: fixed;*/
  /*  background-repeat: no-repeat;*/
  /*  background-size: cover;*/
  /*  height: 100vh;*/
  /*}*/
</style>