网络请求

http-service页面
import axios from 'axios';

//拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    if (response.status == 200) {
        return response.data;
    }
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
export default {
  // 地址 http://192.168.0.155:8081/express?=wxUser=oUbTG557mOTAp6aWxiP8cKI7fPiU
  express(User){
  return axios({
    url: '/api/express' + '?wxUser=' + User,
    method: 'post',
    esponseType: 'json', // 默认的
    params:User
  })
  },
    // 软文分享 http://192.168.0.155:8081/share?wxUser=oUbTG55eHab5yi1PGdxvA7gaqnp0
  share(User) {
    return  axios({
        url: '/api/share' + '?wxUser=' + User,
        method: 'post',
        esponseType: 'json', // 默认的
        params:User
      })
},
  // 助力 http://192.168.0.155:8081/help?wxUser=oUbTG557mOTAp6aWxiP8cKI7fPiU&code=1021
  help(User,helpcode) {
    return  axios({
        url: '/api/help' + '?wxUser=' + User + '&code=' + helpcode,
        method: 'post',
        esponseType: 'json', // 默认的
        params:[User,helpcode]
      })
},
// 打开宝箱 http://192.168.0.155:8081/open?wxUser=oUbTG557mOTAp6aWxiP8cKI7fPiU&id=宝箱id
open(User, Id) {
  return  axios({
      url: '/api/open' + '?wxUser=' + User + '&id=' + Id,
      method: 'post',
      esponseType: 'json', // 默认的
      params:[User, Id]
    })
},
     // 获取宝箱http://192.168.0.155:8081/cases?wxUser=oUbTG557mOTAp6aWxiP8cKI7fPiU
     cases(User) {
        return  axios({
            url: '/api/cases' + '?wxUser=' + User,
            method: 'post',
            esponseType: 'json', // 默认的
            params:User
          })
    },
    // 兑换礼品表格http://192.168.0.155:8081//win?wxUser=oUbTG557mOTAp6aWxiP8cKI7fPiU
    win(User,pageSize) {
        return  axios({
            url: '/api/win' + '?wxUser=' + User + '&page=' + pageSize,
            method: 'post',
            // esponseType: 'json', // 默认的
            params:[User, pageSize]
          })
    },
    // 收货地址 http://192.168.0.155:8081/fill?wxUser=oUbTG557mOTAp6aWxiP8cKI7fPiU&name=赵君霞&address=上海嘉定江桥&telephone=17761656013
    fill(User,Name, Telephone, Address) {
        return  axios({
            url: '/api/fill' + '?wxUser=' + User + '&name=' + Name + '&telephone=' + Telephone + '&address=' + Address,
            method: 'post',
            // esponseType: 'json', // 默认的
            params: [User,Name,Telephone, Address]
          })
    },
    // 抽奖 http://192.168.0.155:8081/luckDraw?wxUser=oUbTG557mOTAp6aWxiP8cKI7fPiU
    luckDraw(User) {
        return  axios({
            url: '/api/luckDraw' + '?wxUser=' + User,
            method: 'post',
            // esponseType: 'json', // 默认的
            params: User
          })
    },
    // 兑换实物/虚拟商品
    exchange(User, commodityId) {
        return  axios({
            url: '/api/exchange' + '?wxUser=' + User + '&number=' + commodityId,
            method: 'post',
            params: [User, commodityId]
          })
    },
     // 虚拟/实物商品
     Prize() {
        return  axios({
            url: '/api/Prize',
            method: 'get',
          })
    },
    // 绑定成功contrast?wxUser=oMFPL6oRnIqoYhhp8AQHL8bdXjDU&telephone=17761656013&code=3895
      bindingSucceed(User, phone, Verification) {
        return  axios({
            url: '/api/contrast' + '?wxUser=' + User + '&telephone=' + phone + '&code=' + Verification,
            method: 'post',
            params: [User, phone, Verification]
          })
    },
     // 手机绑定 /binding?wxUser=?&telephone=?发送验证码
      phoneBinding(User, phone) {
        return  axios({
            url: '/api/binding' + '?wxUser=' + User + '&telephone=' + phone,
            method: 'post',
            params: [User, phone]
          })
    },
    // 微信账号
    WechatAccount(code) {
        return  axios({
            url: '/api/login' + '?wxCode=' + code,
            method: 'post',
            responseType: 'json', // 默认的
            params: code
          })
    },
        // 个人基本信息
        PostWx(wx) {
            return  axios({
                url: '/api/login/wx' + '?wxUser=' + wx,
                method: 'post',
                responseType: 'json', // 默认的
                params: wx
              })
        },
    // 获取用户账号展示所有签到信息
    sameDay(wxuser) {
        return  axios({
            url: '/api/signAll' + '?wxUser=' + wxuser,
            method: 'post',
            params: wxuser
          })
    },
    // 当日签到
    sameIn(wxuser) {
        return  axios({
            url: '/api/sign' + '?wxUser=' + wxuser,
            method: 'post',
            params: wxuser
          })
    },
    // 补签
    repairSign(wxuser) {
        return  axios({
            url: '/api/repair/sign' + '?wxUser=' + wxuser,
            method: 'post',
            params: wxuser
          })
    },
}
vue.config.js
const CompressionPlugin = require("compression-webpack-plugin")
module.exports ={
    configureWebpack: () => {
        if (process.env.NODE_ENV === 'production') {
          return {
            plugins: [
              new CompressionPlugin({
                test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
                threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
                deleteOriginalAssets: false, // 是否删除原文件
                minRatio: 0.8
              })
            ]
          }
        }
    },
    lintOnSave:false,
    outputDir:'dist',
    assetsDir:'static',
    productionSourceMap:false,
    transpileDependencies: ['vuex-persist'],
    publicPath:'./' ,
    devServer:{
        open:true,
        host:'0.0.0.0',
        port:8081,
        hotOnly:false,
        proxy:{
            // https://open.weixin.qq.com
            '/api':{
                //服务器端接口地址
                target:'http://192.168.0.150:8081',
                // target:'http://h5.u2sy.cn/',
                ws:true,
                //是否跨域
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}
页面
<template>
  <div class="register-page">
    <!-- 首页 -->
    <!-- <button @click="postWechatAccount(code)">点击</button> -->
    <!-- {{height}} {{width}} -->
    <!-- <button @click="get">点击</button> -->
    <a-spin v-if="wxuser" :spinning="spinning">
        <div class="background-home" :style="{width:width + 'px'}">
      <img :style="{width:width + 'px',height:height + 'px'}" src="../assets/images/home.jpg" alt="" />
      <div class="img">
        <div class="activity-rules">此活动最终解释权归《幻之封神》运营团队所有</div>
        <!-- 每日签到 -->
        <div :style="{left: width*110/375 + 'px',top:height*250/667 + 'px'}" class="sign-dailyh" @click="sign"></div>
        <!-- 道友封神榜 -->
        <div :style="{left: width*220/375 + 'px',top:height*280/667 + 'px'}" class="points-mallh" @click="user"></div>
        <!-- 宝箱 -->
        <div :style="{left: width*80/375 + 'px',top:height*390/667 + 'px'}" class="treasure-chesth" @click="treasure"></div>
        <!-- 积分抽奖 -->
        <div :style="{left: width*220/375 + 'px',top:height*460/667 + 'px'}" class="points-lotteryh" @click="lottery"></div>
        <!-- 商城 -->
        <div :style="{left: width*310/375 + 'px',top:height*360/667 + 'px'}" class="user-centerh" @click="points"></div>
        <div :style="{left: width*190/375 + 'px',top:height*570/667 + 'px'}"  class="phone-login">
        <p class="Bound" :style="{top:height*15/667 +'px',right:width*-10/375 +'px'}" v-show="Bound">已绑定</p>
          <a-button type="primary" @click="showModal"></a-button>
          <!-- Bindingphone:false, // 已绑定电话 -->
      <!-- Unboundphone:true, // 未绑定电话 -->
             <a-modal
             v-if="personal.invitationCode==1"
            v-model="visible"
            ok-text="确认"
            cancel-text="取消"
            @ok="hideModal"
          >
           <p style="text-align: center; margin-top:0.6rem ;font-size:0.5rem">绑定成功</p>
          </a-modal>
          <!-- 未绑定 -->
          <a-modal
          v-else-if="personal.invitationCode==0"
            v-model="visible"
            ok-text="确认"
            cancel-text="取消"
            @ok="postbindingSucceed(wxuser, phone, verification)"
          >
            <div class="bindingPhone">
              <van-field
                :value="phone"
                class="text"
                placeholder="请输入手机号"
                v-model="phone"
                type="tel"
              />
              <van-field
                class="text"
                v-model="verification"
                :value="verification"
                center
                clearable
                placeholder="请输入短信验证码"
              >
                <template #button>
                  <!-- 倒计时 -->
                  <!-- 发送验证码 -->
                  <van-button
                    @click="countDown(wxuser, phone)"
                    size="small"
                    type="primary"
                    :class="{disabled: !canClick}"
                  >
                    {{content}}
                  </van-button>
                </template>
              </van-field>
              <!-- <div> -->
                <!-- <van-button
                  @click="postbindingSucceed(wxuser, phone, verification)"
                  class="button"
                  round
                  block
                  type="info"
                  native-type="submit"
                  >绑定</van-button
                >
              </div> -->
            </div>
          </a-modal>
        </div>
        <!-- 关注公众号 -->
        <div :style="{left: width*285/375 + 'px',top:height*570/667 + 'px'}" class="follow">
        <p class="Bound" :style="{top:height*25/667 +'px',right:width*-5/375 +'px'}" v-show="Bounds">已关注</p>
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU3MTQ4MA==#wechat_redirect"></a>
        <!-- <button @click="bv">点击</button> -->
        </div>
      </div>
    </div>
    </a-spin>
       <div v-else class="background-home" :style="{width:width + 'px'}">
      <img :style="{width:width + 'px',height:height + 'px'}" src="../assets/images/home.jpg" alt="" />
      <div class="img">
        <div class="activity-rules">此活动最终解释权归《幻之封神》运营团队所有</div>
        <!-- 每日签到 -->
        <div :style="{left: width*110/375 + 'px',top:height*250/667 + 'px'}" class="sign-dailyh" @click="toRescue"></div>
        <!-- 道友封神榜 -->
        <div :style="{left: width*220/375 + 'px',top:height*280/667 + 'px'}" class="points-mallh" @click="toRescue"></div>
        <!-- 宝箱 -->
        <div :style="{left: width*80/375 + 'px',top:height*390/667 + 'px'}" class="treasure-chesth" @click="toRescue"></div>
        <!-- 积分抽奖 -->
        <div :style="{left: width*220/375 + 'px',top:height*460/667 + 'px'}" class="points-lotteryh" @click="lottery"></div>
        <!-- 商城 -->
        <div :style="{left: width*310/375 + 'px',top:height*360/667 + 'px'}" class="user-centerh" @click="points"></div>
        <!-- 电话 -->
        <div :style="{left: width*190/375 + 'px',top:height*570/667 + 'px'}" @click="points"  class="phone-login">
        </div>
        <!-- 关注公众号 -->
        <div :style="{left: width*285/375 + 'px',top:height*570/667 + 'px'}" class="follow">
        <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU3MTQ4MA==#wechat_redirect"></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import http from "../services/http-service";
export default {
  components: {},
  data() {
    return {
      // bv:'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU3MTQ4MA==#wechat_redirect',
       content: "发送验证码",
      totalTime: 60,
      canClick: true, //添加canClick
      spinning: true, // 加载
      phone: null,
      visible: false,
      Bound:false,
      Bounds:false,
      Bindingphone:false, // 已绑定电话
      Unboundphone:true, // 未绑定电话
      width: window.innerWidth,
      height: window.innerHeight,
      Wechat: [], // wx授权
      url:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8c8d376eeb1ef876&redirect_uri=http://h5.u2sy.cn&response_type=code&scope=snsapi_userinfo&state=STATE&uin=&key=&version=6302019a',
      wxuser: window.localStorage.getItem("wxUser"), // 本地用户账号缓存
      phoneCache: window.localStorage.getItem("phone"), // 本地电话缓存
      verification: null,
      personal: [], // 个人基本信息
      code: "001xvbGa1zjS6B0RXAHa1HT1VE0xvbGh",
    }
  },
  created() {
    if (this.wxuser !=null) {
      // 没有code时
      //  alert("请关注公众号")
      //  this.spinning = true
      this.Bounds = true
    } 
    else if (window.document.location.href.indexOf("code") > -1) {
      // 有code时
      this.code = window.document.location.href
        .split("?code=")[1]
        .split("&state")[0];
      console.log(this.code);
      this.postWechatAccount(this.code)
    }
    //  if(this.wxuser === null){
    //     alert("请关注公众号")
    //   }else {
    //    this.Bounds = true
    //   }
  },
  mounted() {
    this.Postper(this.wxuser)
  },
  methods: {
    toRescue() {
        window.location.href = this.url
      },
    // wx授权
    async postWechatAccount(code) {
      let temp = await http.WechatAccount(code);
         this.Wechat = temp.states;
      localStorage.setItem("wxUser", temp.states.wxUser)
      if(this.wxuser === null){
        alert("请关注公众号")
      }
  
      // console.log(temp)
    },
    // 个人基本信息
    async Postper(wxUser) {
      let temp = await http.PostWx(wxUser);
      this.personal = temp;
      if (temp.invitationCode==1) {
        this.Bound = true
      }
      // localStorage.setItem("wxUser", temp.wxUser)
      localStorage.setItem("userId", temp.userId)
      localStorage.setItem("phoneCache", temp.phone)
      localStorage.setItem("headimgurl", temp.headimgurl)
      localStorage.setItem("userNickNameUTF8", temp.userNickNameUTF8)
      // console.log(temp.phone)
      this.spinning = false // 加载成功
      // console.log(this.personal);
    },
    // 接受验证码
    async postbindingSucceed(User, phone, Verification) {
      let temp = await http.bindingSucceed(User, phone, Verification)
      if (temp === 'Binding succeeded') {
        // alert("绑定成功");
        this.Postper(this.wxuser) //作用-刷新
        this.visible = false
        Toast('绑定成功');
      }else if (temp === 'The mobile phone number has been bound'){
      //  alert('该电话已经绑定')
      Toast('该电话已经绑定'); 
      }else if (temp === 'The verification code is inconsistent'){
      //  alert('验证码不一致')
      // .success('验证码不一致') 
      Toast('验证码不一致'); 
      }else if (temp === 'The phone numbers to be bound are inconsistent'){
      //  alert('要绑定的电话号码不一致 ')
      Toast('要绑定的电话号码不一致'); 
      }
      // console.log(temp);
      // this.visible = false;
    },
    // 发送验证码
    async postphoneBinding(User, phone) {
      let temp = await http.phoneBinding(User, phone);
      let tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
        this.phone
      );
      // alert(temp)
      if (temp === 'OK' && tel) {
        Toast('验证码已发送'); 
      } else if (this.phone == "") {
        Toast('请输入手机号'); 
      } else if (!tel) {
        Toast('手机号不正确'); 
      }
    },
    countDown(wxuser, phone){
       // 倒计时
       if (!this.canClick) return; //改动的是这两行代码
      this.canClick = false;
      this.content = this.totalTime + "S后重新发送";
      this.postphoneBinding(wxuser, phone)
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "S后重新发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.content = "重新发送验证码";
          this.totalTime = 10;
          this.canClick = true; //这里重新开启
        }
      }, 1000)
    },
    toDetail() {
      this.$router.push({
        path: "/",
        name: "Home",
      });
    },
    showModal() {
      this.visible = true;
    },
    hideModal() {
      this.visible = false;
    },
    // 抽奖跳转
    lottery() {
      this.$router.push({
        path: "/HeaderPage",
        name: "HeaderPage",
      })
    },
    // 每日签到
    sign() {
      this.$router.push({
        path: "/Sign",
        name: "Sign",
      });
    },
    // 积分商城
    points() {
      this.$router.push({
        path: "/Points",
        name: "Points",
      });
    },
    // 宝箱
    treasure() {
      this.$router.push({
        path: "/Treasure",
        name: "Treasure",
      });
    },
    // 用户中心
    user() {
      this.$router.push({
        path: "/User",
        name: "User",
      });
    },
  },
};
</script>
<style scoped lang="less">
@import '../../public/HomePage';
</style>
posted @ 2021-06-02 17:04  zjxgdq  阅读(109)  评论(0)  编辑  收藏  举报