# 弹窗（Modal）

<template>
  <div class="wrapper">
    <dof-minibar title="7.3弹窗"></dof-minibar>
    <scroller class="btn-box">
      <dof-button @dofButtonClicked="modal1 = true" text="一个按钮弹窗"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal2 = true" text="一个按钮弹窗带描述"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal3 = true" text="两个按钮弹窗"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal4 = true" text="两个按钮弹窗自定义文案"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal5 = true" text="多个按钮弹窗"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal6 = true" text="带输出框弹窗"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal7 = true" text="打开图片弹窗1"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal8 = true" text="打开图片弹窗2"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal9 = true" text="打开图标弹窗1"></dof-button>
      <dof-button class="m-t-16" @dofButtonClicked="modal10 = true" text="打开图标弹窗2"></dof-button>
    </scroller>
    <dof-modal
      title="样式1"
      :show="modal1"
      @close="modal1 = false"
      @dofModalConfirmBtnClicked="modal1 = false"
      :single="true"
    >
    </dof-modal>
    <dof-modal
      title="标题"
      content="平台变得更大了，我们增加了大约100个新的产品应用。"
      :show="modal2"
      @close="modal2 = false"
      @dofModalConfirmBtnClicked="modal2 = false"
      :single="true"
    >
    </dof-modal>
    <dof-modal title="样式2" :show="modal3" @close="modal3 = false" @dofModalConfirmBtnClicked="modal3 = false">
    </dof-modal>
    <dof-modal
      title="检测到新版本"
      content="是否更新到最新版本v5.1（155M）？"
      :show="modal4"
      @close="modal4 = false"
      @dofModalCancelBtnClicked="modal4 = false"
      @dofModalConfirmBtnClicked="modal4 = false"
      :cancel-text="'操作1'"
      :confirm-text="'操作2'"
    >
    </dof-modal>
    <dof-modal
      title="标题"
      content="平台变得更大了，我们增加了大约100个新的产品应用。"
      :show="modal5"
      @close="modal5 = false"
      @dofModalConfirmBtnClicked="modal5 = false"
      :btnGroup="[{ text: '确定', color: '#B35336' }, '更多', '取消']"
    >
    </dof-modal>
    <dof-modal
      title="家的名称"
      content="描述"
      hasInput="true"
      :inputContent="inputContent"
      placeholder="输入文字"
      :show="modal6"
      @dofModalCancelBtnClicked="modal6 = false"
      @close="modal6 = false"
      @dofModalConfirmBtnClicked="modal6 = false"
    >
    </dof-modal>
    <dof-modal
      title="检测到新版本"
      :show="modal7"
      @dofModalCancelBtnClicked="modal7 = false"
      @dofModalConfirmBtnClicked="modal7 = false"
      :image="'./assets/image/modal/img.png'"
      :img-style="imgStyle"
      :modal-content-style="{ paddingLeft: '0px', paddingRight: '0px' }"
    >
      <div class="contentTextBox" slot="content">
        <text class="contentText">{{ content }}</text>
      </div>
    </dof-modal>
    <dof-modal
      :show="modal8"
      @dofModalCancelBtnClicked="modal8 = false"
      @dofModalConfirmBtnClicked="modal8 = false"
      :image="'./assets/image/modal/img.png'"
      :img-style="imgStyle2"
      :modal-content-style="{ paddingTop: '0px', paddingLeft: '0px', paddingRight: '0px' }"
    >
      <div class="contentTextBox" slot="content">
        <text class="contentText t-a-l">{{ content2 }}</text>
      </div>
    </dof-modal>
    <dof-modal
      title="检测到新版本"
      :show="modal9"
      @close="modal9 = false"
      @dofModalConfirmBtnClicked="modal9 = false"
      @closeIconClicked="modal9 = false"
      :btn-group="null"
      :image="'./assets/image/modal/img.png'"
      :img-style="imgStyle"
      :modal-content-style="{ paddingLeft: '0px', paddingRight: '0px', paddingBottom: '0px' }"
      :isShowCloseIcon="true"
    >
      <div slot="content">
        <text class="contentTitle">狗粮小盆</text>
        <text class="contentTip">识别准确率 98%</text>

        <div class="contentTextBox">
          <text class="contentText">{{ content }}</text>
        </div>
        <div class="selectBox">
          <div>
            <div :class="['selectItem']" ref="selectItem1" @click="handleSelect(1)">
              <dof-iconfont
                :code="'\u4827'"
                :size="88"
                :color="'rgba(255,255,255,0.80)'"
                @dofIconFontClicked="handleSelect(1)"
              ></dof-iconfont>
            </div>
            <text class="selectText">好评</text>
          </div>
          <div>
            <div :class="['selectItem']" ref="selectItem2" @click="handleSelect(2)">
              <dof-iconfont
                :code="'\u4828'"
                :size="88"
                :color="'rgba(255,255,255,0.80)'"
                @dofIconFontClicked="handleSelect(2)"
              ></dof-iconfont>
            </div>
            <text class="selectText">差评</text>
          </div>
          <div class="dotBox">
            <div
              :class="['dot', i === 0 ? 'firstDot' : i === 2 ? 'lastDot' : '']"
              v-for="(item, i) in 3"
              :key="i"
            ></div>
          </div>
        </div>
      </div>
    </dof-modal>
    <dof-modal
      title="检测到新版本"
      :show="modal10"
      @close="modal10 = false"
      @dofModalConfirmBtnClicked="modal10 = false"
      @closeIconClicked="modal10 = false"
      :btn-group="null"
      :modal-content-style="{ paddingLeft: '0px', paddingRight: '0px', paddingBottom: '0px' }"
      :isShowCloseIcon="true"
    >
      <div slot="content">
        <div class="contentTextBox" style="margin-top: 20px;">
          <text class="contentText">{{ content }}</text>
        </div>
        <div class="selectBox" style="padding-bottom: 40px;">
          <div>
            <div :class="['selectItem']" ref="selectItem1" @click="handleSelect(1)">
              <dof-iconfont
                :code="'\u4827'"
                :size="88"
                :color="'rgba(255,255,255,0.80)'"
                @dofIconFontClicked="handleSelect(1)"
              ></dof-iconfont>
            </div>
            <text class="selectText">好评</text>
          </div>
          <div>
            <div :class="['selectItem']" ref="selectItem2" @click="handleSelect(2)">
              <dof-iconfont
                :code="'\u4828'"
                :size="88"
                :color="'rgba(255,255,255,0.80)'"
                @dofIconFontClicked="handleSelect(2)"
              ></dof-iconfont>
            </div>
            <text class="selectText">差评</text>
          </div>
        </div>
      </div>
    </dof-modal>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #f9f9f9;
}
.m-t-16 {
  margin-top: 16px;
}
.btn-box {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 120px;
}
.contentTextBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 20px;
}
.contentText {
  width: 480px;
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.t-a-l {
  text-align: left;
}
.selectText {
  margin-top: 14px;
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #ffffff;
  text-align: center;
  font-weight: 400;
}

.contentTitle {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-weight: 400;
}
.contentTip {
  font-family: PingFangSC-Light;
  font-size: 28px;
  color: #b35336;
  text-align: center;
  font-weight: 200;
  margin-top: 16px;
  margin-bottom: 15px;
}
.selectBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 86px;
  padding-right: 86px;
  margin-top: 44px;
  padding-bottom: 66px;
  position: relative;
}
.selectItem {
  width: 96px;
  height: 96px;
  background-color: #27272a;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 48px;
}
.selectImg {
  width: 60px;
  height: 60px;
}
.active {
  background-color: #b35336;
}
.selectText {
  margin-top: 14px;
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #ffffff;
  text-align: center;
  font-weight: 400;
}
.dotBox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  margin-right: 8px;
}
.firstDot {
  background-color: #b35336;
}
.lastDot {
  margin-right: 0;
}

@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
}
</style>

<script>
import { DofMinibar, DofButton, DofModal, DofIconfont } from 'dolphin-weex-ui'
const animation = weex.requireModule('animation')
export default {
  components: { DofMinibar, DofButton, DofModal, DofIconfont },
  data: () => ({
    modal1: false,
    modal2: false,
    modal3: false,
    modal4: false,
    modal5: false,
    modal6: false,
    modal7: false,
    modal8: false,
    modal9: false,
    modal10: false,
    inputContent: '',
    content: '小美提醒：定期收纳整理，保持地面整齐，清洁体验更佳。',
    content2:
      '小美提醒：定期收纳整理，保持地面整齐，清洁体验更佳。小美提醒：定期收纳整理，保持地面整齐，清洁体验更佳。小美提醒：定期收纳整理，保持地面整齐，清洁体验更佳。',
    imgStyle: { marginTop: '40px', marginBottom: '40px', width: '540px', height: '332px' },
    imgStyle2: { marginBottom: '40px', width: '540px', height: '332px' },
    selectVal: 1
  }),
  watch: {
    modal9(val) {
      val &&
        setTimeout(() => {
          this.handleSelect(1)
        }, 20)
    },
    modal10(val) {
      val &&
        setTimeout(() => {
          this.handleSelect(1)
        }, 20)
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleSelect(i) {
      animation.transition(this.$refs['selectItem' + i], {
        styles: {
          backgroundColor: '#b35336'
        },
        duration: 300, //ms
        timingFunction: 'ease',
        needLayout: true,
        delay: 0 //ms
      })
      animation.transition(this.$refs['selectItem' + (i === 2 ? 1 : 2)], {
        styles: {
          backgroundColor: '#27272a'
        },
        duration: 300, //ms
        timingFunction: 'ease',
        needLayout: true,
        delay: 0 //ms
      })
    }
  }
}
</script>