zm_website/src/views/cooperation.vue

<template>
  <div id="cooperation">
    <div class="container">
      <div id="cooperationTop"></div>
      <nav class="padding-top visible-lg"></nav>
      <!-- 左上角两个链接 -->
      <div class="link-to hidden-xs hidden-sm hidden-md">
        <div class="left">
          <a href="javascript:;" @click="lfdrawer = true">了解开放地区</a>
          <el-drawer title :size="size" :visible.sync="lfdrawer" :direction="direction">
            <div>
              <div class="title">
                <p>
                  可合作区域：全国
                  <span class="title-shadow">COOPERATION AREA</span>
                </p>
                <p class="sub-title">合作区域定期更新</p>
                <p class="sub-title">热门城市：{{hotCity}}</p>
              </div>
              <div class="content">
                <p class="sub-title">选择了解地区</p>
                <div>
                  <el-cascader placeholder="请选择" :props="props" filterable></el-cascader>
                  <el-button type="warning" @click="changedrawr">申请合作</el-button>
                </div>
              </div>
            </div>
          </el-drawer>
        </div>
        <div class="right">
          <a href="javascript:;" @click="drawer = true">填写合作申请书</a>
          <el-drawer title :visible.sync="drawer" :direction="direction" :size="size">
            <div>
              <div class="title">
                <p>
                  合作申请
                  <span class="title-shadow">COOPERATIVE APPLICATION</span>
                </p>
              </div>
              <div class="content">
                <div>
                  <div class="wx-img">
                    <img src="../assets/image/coop/clickphone.png" alt />
                    <img :src="wxImg" alt />
                  </div>
                  <div class="texts">
                    <p>微信扫一扫识别二维码申请合作</p>
                    <p>关注公众号【沪上阿姨合伙人】</p>
                    <p>填写合作申请书</p>
                    <p class="red">请先确定所选的意向区域为开放地区</p>
                  </div>
                </div>
              </div>
            </div>
          </el-drawer>
        </div>
      </div>

      <div class="top-img">
        <p>
          合作费用
          <span class="title-shadow hidden-xs">Process</span>
          <span class="title-shadow-xs hidden-sm hidden-md hidden-lg">Process</span>
        </p>
        <img :src="moneyImg" alt />
      </div>
      <div class="top-img">
        <p>
          问答
          <span class="title-shadow hidden-xs">Question</span>
          <span class="title-shadow-xs hidden-sm hidden-md hidden-lg">Question</span>
        </p>
        <img :src="answerImg" alt class="coo-money" />
      </div>

      <!-- 合作流程 -->
      <!-- 分辨率大于768的合作流程 -->
      <div class="coo-progress top-img visible-lg visible-sm visible-md">
        <p>
          合作流程
          <span class="title-shadow">COOPERATION FLOW</span>
        </p>
        <div>
          <ul>
            <li>
              <span>01</span>
              <p>合作申请</p>
            </li>
            <li>
              <span>01</span>
              <p>电话初审</p>
              <p>视频复审</p>
            </li>
            <li>
              <span>03</span>
              <p>确定合作意向</p>
            </li>
            <li>
              <span>04</span>
              <p>选址审核</p>
              <p>正式授权</p>
            </li>
            <li>
              <span>05</span>
              <p>装修施工</p>
              <p>培训考核</p>
            </li>
            <li>
              <span>06</span>
              <p>试营业</p>
            </li>
            <li>
              <span>07</span>
              <p>正式开业</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 分辨率小于768的合作流程 -->
      <div class="coo-progress-xs visible-xs">
        <div class="coo-progress top-img visible-xs">
          <p>
            合作流程
            <span class="title-shadow">COOPERATION FLOW</span>
          </p>
          <div>
            <ul>
              <li>
                <span>01</span>
                <p>合作申请</p>
              </li>
              <li>
                <span>01</span>
                <p>电话初审</p>
                <p>视频复审</p>
              </li>
              <li>
                <span>03</span>
                <p>确定合作意向</p>
              </li>
              <li>
                <span>04</span>
                <p>选址审核</p>
                <p>正式授权</p>
              </li>
              <li>
                <span>05</span>
                <p>装修施工</p>
                <p>培训考核</p>
              </li>
              <li>
                <span>06</span>
                <p>试营业</p>
              </li>
              <li>
                <span>07</span>
                <p>正式开业</p>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 合作要求 -->
      <!-- 中大屏幕下的合作流程 -->
      <div class="join-us-lg visible-sm visible-md visible-lg">
        <div class="top-img">
          <p>
            合作要求
            <span class="title-shadow hidden-xs">JOIN US</span>
            <span class="title-shadow-xs hidden-sm hidden-md hidden-lg">JOIN US</span>
          </p>
        </div>
        <div class="content">
          <div>
            <el-card shadow="hover">
              <div class="icon">
                <img src="../assets/image/coop/coo-icon01.png" alt />
              </div>
              <div class="text">
                <p>热爱茶饮事业</p>
                <p>年龄22-45周岁，大专以上学历</p>
              </div>
            </el-card>
          </div>
          <div>
            <el-card shadow="hover">
              <div class="icon">
                <img src="../assets/image/coop/coo-icon02.png" alt />
              </div>
              <div class="text">
                <p>契约精神</p>
                <p>
                  遵守沪上阿姨各项规章制度
                  具有契约精神
                </p>
              </div>
            </el-card>
          </div>
          <div>
            <el-card shadow="hover">
              <div class="icon">
                <img src="../assets/image/coop/coo-icon03.png" alt />
              </div>
              <div class="text">
                <p>铁杆店员2名</p>
                <p>亲自带店一年，两个铁杆店员（专业敬业）</p>
              </div>
            </el-card>
          </div>
          <div>
            <el-card shadow="hover">
              <div class="icon">
                <img src="../assets/image/coop/coo-icon04.png" alt />
              </div>
              <div class="text">
                <p>资金要求</p>
                <p>
                  具备40万以上资金量
                  有一定的风险承受能力
                </p>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <!-- 小屏幕下的合作流程 -->
      <div class="join-us-xs visible-xs">
        <div class="top-img">
          <p>
            合作要求
            <span class="title-shadow hidden-xs">JOIN US</span>
            <span class="title-shadow-xs hidden-sm hidden-md hidden-lg">JOIN US</span>
          </p>
        </div>
        <div class="content">
          <div>
            <el-card shadow="hover">
              <div class="icon">
                <img src="../assets/image/coop/coo-icon01.png" alt />
              </div>
              <div class="text">
                <p>热爱茶饮事业</p>
                <p>年龄22-45周岁，大专以上学历</p>
              </div>
            </el-card>
          </div>
          <div>
            <el-card shadow="hover">
              <div class="icon">
                <img src="../assets/image/coop/coo-icon02.png" alt />
              </div>
              <div class="text">
                <p>契约精神</p>
                <p>
                  遵守沪上阿姨各项规章制度
                  具有契约精神
                </p>
              </div>
            </el-card>
          </div>
          <div>
            <el-card shadow="hover">
              <div class="icon">
                <img src="../assets/image/coop/coo-icon03.png" alt />
              </div>
              <div class="text">
                <p>铁杆店员2名</p>
                <p>亲自带店一年，两个铁杆店员（专业敬业）</p>
              </div>
            </el-card>
          </div>
          <div>
            <el-card shadow="hover">
              <div class="icon">
                <img src="../assets/image/coop/coo-icon04.png" alt />
              </div>
              <div class="text">
                <p>资金要求</p>
                <p>
                  具备40万以上资金量
                  有一定的风险承受能力
                </p>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <!-- 品牌介绍 -->
      <introduce></introduce>
    </div>
  </div>
</template>

<script>
import {getCities,getIndexImg,getCompanyInfo} from '@/request/api'
import { Cascader, Card } from 'element-ui'
import '@/assets/css/cooperation.scss'
import introduce from '@/components/introduce.vue'
export default {
  data() {
    return {
      lfdrawer: false,
      drawer: false,
      direction: 'btt',
      size: '80%',
      moneyImg: '',
      answerImg: '',
      wxImg: '',
      hotCity: '山东，安徽，天津，江苏',
      props: {
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          const { level } = node
          const query = {
            page: 1,
            pageSize: 100
          }
          query.pid = node.value ? node.value : 100000
          getCities(query).then(res => {
            const nodes = []
            res.data.list.forEach(v => {
              nodes.push({
                value: v.id,
                label: v.name,
                leaf: level >= 2
              })
            })
            resolve(nodes)
          })
        }
      }

    }
  },
  created() {
    this.getImgUrl()
    getCities({ page: 1, pageSize: 6 }).then(res => {
      let city = '';
      res.data.list.forEach(v =>{
        city += v['sname'] + '，'
      })
      city = city.substring(0, city.length-1)
      this.hotCity = city;
    })
  },
  mounted: function () {

    let that = this;
    that.$nextTick(function () {
      window.addEventListener('scroll', that.handleScroll)
    })
    let toElement = document.getElementById('cooperationTop');
    //如果对应id存在，就跳转
    toElement.scrollIntoView();
  },
  methods: {
    changedrawr() {
      this.lfdrawer = false;
      this.drawer = true;
    },
    getlocal() {
      let selectId = localStorage.getItem("toId");
      //找到锚点id
      let toElement = document.getElementById(selectId);
      //如果对应id存在，就跳转
      if (selectId) {
        toElement.scrollIntoView()
      }
    },
    /* 获取图片的地址 */
    getImgUrl() {
      /* 获取第一张图片 */
      getIndexImg( {
        
          "page": "1",
          "pageSize": "2",
          "type": "2"
        
      }).then(res => {
        if (res.code == 1) {
          if (res.data.count > 0) {
            var list = res.data.list;
            this.moneyImg = list[0].img_url;

          }
        }
      })
      // 获取第二张图片
      getIndexImg({
          "page": "1",
          "pageSize": "2",
          "type": "3"
      }).then(res => {
        if (res.code == 1) {
          if (res.data.count > 0) {
            var list = res.data.list;
            this.answerImg = list[0].img_url;

          }
        }
      });

      /* 获取客服微信二维码 */
      getCompanyInfo().then(res => {
        if (res.code == 1) {
          this.wxImg = res.data.info.kf_wechat;
        }
      })
    },
   


  },
  destroyed() {
    localStorage.setItem("toId", '')
  },
  components: {

  }

}
</script>

<style scoped lang="scss">
</style>