123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 |
- <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>
|