program/src/pages/joint/index.vue

<template>
  <div
    id="index_login_container"
  >
    <div class="cover_whole">
       <!-- 填写表框 -->
       <div class="cover_input">
          <span class="title">联名邀请，免费测评专注力</span>
          <input 
          placeholder='请输入学校名称'
          v-model="school" 
          placeholder-style="font-size: 28rpx;color: #B0784F;"/>

          <input 
          placeholder='请输入学生'
          v-model="student" 
          placeholder-style="font-size: 28rpx;color: #B0784F;"/>

          <button class="cu-btn btn" @click="joint_test">免费测评</button>
       </div>
       
       <!-- 滚动 -->
       <div class="cover_scroll">
         <swiper 
         class="swiper"
         easing-function="linear"
         :circular="circular" 
         :indicator-dots="indicatorDots"
         :autoplay="autoplay"
         :interval="interval"
         :duration="duration"
         :vertical="vertical"
         >
           <block v-for="(item,index) in scroll_list" :key="index">
             <swiper-item class="swiper-item"><div class="item">{{ item.school }} {{item.name}} 已联名</div></swiper-item>
           </block>
         </swiper>
       </div>
    </div>
    <!-- 弹窗 -->
       <van-popup
        :show="show"
        @close="close_pop"
        :close-on-click-overlay="true"
        custom-class="pop"
        overlay
        z-index="99"
       >
         <img class="cover_pop" show-menu-by-longpress="true" src="https://img.shuimuai.com/success_joint.png"/>
      </van-popup>

  </div>
</template>
<script>
import { addJoint, getJoint } from "../../requests/competition"
import Toast from "../../../static/vant/toast/toast";

var $this;
export default {
  name: "scan_container",
  data() {
    return {
       show: false,
       school:'',
       student: '',
       scroll_list:[],
       // 轮播配置
       indicatorDots: false,
       autoplay: true,
       interval: 1800,
       duration: 1800,
       vertical: true,
       circular: true,
    };
  },
  methods: {
   joint_test(){
       let $joint = {
         phone: wx.getStorageSync("phone"),
         school: $this.school,
         name: $this.student
       }
       addJoint($joint).then((res) => {
         console.log("联名",res)
         let $res = res.data;
         if ($res.code == 0) {
           $this.show = true
           $this.school = ''
           $this.student = ''
         }else if($res.code == 1012){
           wx.showToast({
             title:'请先登录',
             icon: "error"
           })
         }else{
           wx.showToast({
             title: $res.errmsg,
             icon: "error"
           })
         }
      }).catch((err)=>{
        console.log("错误",err)
      })
   },

    close_pop() {
      $this.show = false;
    },
  },
  mounted() {
    getJoint().then((res) => {
         console.log("已联名",res)
         let $res = res.data;
         if ($res.code == 0) {
           $this.scroll_list = $res.data
         }else{
           console.log("获取不到已联名",err)
         }
      }).catch((err)=>{
        console.log("错误",err)
      })
  },
  created() {
    $this = this;
  },
  onUnload(){
    $this.show = false;
    $this.school = ''
    $this.student = ''
  }
};
</script>
<style scoped>
#index_login_container {
  background-color: #040312;
}

.cover_whole {
  background: url("https://img.shuimuai.com/bg_joint_2.png");
  width: 100%;
  height: 4586px;
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  padding-top: 784rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
}

.cover_input{
  background: url("https://img.shuimuai.com/bg_input.png");
  background-size: 100% 100%;
  background-position: center;
  width: 650rpx;
  height: 517rpx;
  margin-left: 7px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  justify-content:space-around;
  padding: 20px 0 28px
}

.cover_scroll{
  background: url("https://img.shuimuai.com/bg_scroll.png");
  background-size: 100% 100%;
  background-position: center;
  width: 634rpx;
  height: 111rpx;
  margin-top: 88rpx;
  padding: 14rpx;
}


.item{
  font-size: 24rpx;
  color: #FFF1D7;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
}

.title{
  font-size: 32rpx;
  color: #FFAF74;
  letter-spacing:5px
}

.btn{
  width: 502rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #FFE8C0 0%, #E19C6A 100%);
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #9A4720;
  letter-spacing:5px
}

input{
  width: 502rpx;
  height: 80rpx;
  background: #4A3843;
  border: 2px solid #FFAF74;
  border-radius: 40rpx;
  padding-left: 41rpx;
  color: white
}

.cover_pop{
  width: 493rpx;
  height: 662rpx;
}

</style>

<style>
.pop {
  background-color: rgba(255, 255, 255, 0) !important;
}
 .swiper{
  height:87rpx !important;
}
/* .swiper-item{
  height:90rpx !important;
}  */
</style>