basket_traced_h5/src/App.vue

<template>
  <div class="body-box">
    <!-- <v-touch class="wrapper"> -->
    <v-touch @swipeleft="left" @swiperight="right" class="wrapper">
      <transition
        name="custom-classes-transition"
        :enter-active-class="enterActiveClass"
        :leave-active-class="leaveActiveClass"
      >
        <router-view class="page-bg"></router-view>
      </transition>
    </v-touch>
    <i class="el-icon-d-arrow-right" @click="left"></i>
    <div class="nav-btn">
      <router-link class="link" to="/" v-if="$route.path != '/'">
        <i class="iconfont iconsuyuan"></i>
        溯源
      </router-link>
      <router-link class="link" to="/transaction" v-if="$route.path != '/transaction'">
        <i class="iconfont icongoumai"></i>
        购买
      </router-link>
      <router-link class="link" to="/comment" v-if="$route.path != '/comment'">
        <i class="iconfont iconpinglun"></i>
        评论
      </router-link>
    </div>
  </div>
</template>
<script>
import WxApi from "./script/wxApi/index.js";
export default {
  created() {
    //JS - SDK 注册
    //同步信息
    this.$store.commit('saveInfo');
    //同步用户
    this.$store.commit('userId');
    this.$http.getAlldata().then(res => {
      this.$store.commit('saveInfo', res);
    });
    WxApi.config().then(wx => {
      wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: (res) => {
          //var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          //var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          this.$store.commit("location", res);
        }
      });
    });
  },
  data() {
    return {
      timeFun: this.$timeFun(),
      g: true,
      index: 0,
      direction: true
    };
  },
  computed: {
    path() {
      const {
        options: { routes = [] }
      } = this.$router;
      return (routes[this.index] || {}).path || '/';
    },
    enterActiveClass() {
      // return !!this.direction ? "animated fadeIn fixed" : 'animated fadeInLeft fixed';
    },
    leaveActiveClass() {
      // return !!this.direction ? "animated slideOut" : 'animated slideOutRight';
    }
  },
  watch: {
    index(n, v) {
      this.timeFun(() => {
        this.g = true;
      });
      if (this.g) {
        this.direction = n > v;
        this.$router.history.push(this.path);
      }
      this.g = false;
    },
    '$route.path': function (newVal, oldVal) {
      this.getPath(newVal);
    }
  },
  methods: {
    left() {
      const {
        options: { routes = [] }
      } = this.$router;
      if (routes.length - 1 > this.index) {
        this.index++;
      } else {
        this.index = 0;
      }
    },
    right() {
      const {
        options: { routes = [] }
      } = this.$router;
      if (this.index > 0) {
        this.index--;
      } else {
        this.index = routes.length - 1;
      }
    },
    getPath(path) {
      if ('/' === path) {
        this.index = 0;
      } else {
        const tempRoutes = (this.$router.options || {}).routes || [];
        if (tempRoutes.length > 0) {
          if ('/comment' === path) {
            this.index = tempRoutes.length - 1;
          } else {
            for (let i = 0; i < tempRoutes.length; i++) {
              if (path === tempRoutes[i].path) {
                this.index = i;
                break;
              }
            }
          }
        } else {
          this.index = 0;
        }
      }
    }
  }
};
</script>
<style lang="less">
@keyframes toright {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
.wrapper {
  height: 100%;
}
//公共css
.body-box {
  height: 100%;
  background: url(assets/image/bg-y.png) no-repeat center bottom;
  background-size: 100% 93%;
  background-attachment: fixed;
  overflow: auto;
  .page-bg {
    padding: 0.4rem;
  }
  .el-icon-d-arrow-right {
    position: absolute;
    right: 1%;
    top: 50%;
    transform: translateY(-50%);
    color: #666666;
    font-size: 1rem;
    overflow: hidden;
    &::before {
      animation: toright 2s infinite;
      display: block;
    }
  }
  .nav-btn {
    position: fixed;
    bottom: 10%;
    right: 0;
    > .link {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      align-content: center;
      background: rgba(255, 255, 255, 0.6);
      border-bottom-left-radius: 500px;
      border-top-left-radius: 500px;
      margin-bottom: 5px;
      padding: 0.3em 0.5em;
      font-size: 16px;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
      > i {
        font-size: 1.2em;
        margin-right: 5px;
      }
    }
  }
  .fixed {
    position: fixed;
    top: 0;
  }
}
</style>