App.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <div class="body-box">
  3. <!-- <v-touch class="wrapper"> -->
  4. <v-touch @swipeleft="left" @swiperight="right" class="wrapper">
  5. <transition
  6. name="custom-classes-transition"
  7. :enter-active-class="enterActiveClass"
  8. :leave-active-class="leaveActiveClass"
  9. >
  10. <router-view class="page-bg"></router-view>
  11. </transition>
  12. </v-touch>
  13. <i class="el-icon-d-arrow-right" @click="left"></i>
  14. <div class="nav-btn">
  15. <router-link class="link" to="/" v-if="$route.path != '/'">
  16. <i class="iconfont iconsuyuan"></i>
  17. 溯源
  18. </router-link>
  19. <router-link class="link" to="/transaction" v-if="$route.path != '/transaction'">
  20. <i class="iconfont icongoumai"></i>
  21. 购买
  22. </router-link>
  23. <router-link class="link" to="/comment" v-if="$route.path != '/comment'">
  24. <i class="iconfont iconpinglun"></i>
  25. 评论
  26. </router-link>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import WxApi from "./script/wxApi/index.js";
  32. export default {
  33. created() {
  34. //JS - SDK 注册
  35. //同步信息
  36. this.$store.commit('saveInfo');
  37. //同步用户
  38. this.$store.commit('userId');
  39. this.$http.getAlldata().then(res => {
  40. this.$store.commit('saveInfo', res);
  41. });
  42. WxApi.config().then(wx => {
  43. wx.getLocation({
  44. type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
  45. success: (res) => {
  46. //var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
  47. //var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
  48. this.$store.commit("location", res);
  49. }
  50. });
  51. });
  52. },
  53. data() {
  54. return {
  55. timeFun: this.$timeFun(),
  56. g: true,
  57. index: 0,
  58. direction: true
  59. };
  60. },
  61. computed: {
  62. path() {
  63. const {
  64. options: { routes = [] }
  65. } = this.$router;
  66. return (routes[this.index] || {}).path || '/';
  67. },
  68. enterActiveClass() {
  69. // return !!this.direction ? "animated fadeIn fixed" : 'animated fadeInLeft fixed';
  70. },
  71. leaveActiveClass() {
  72. // return !!this.direction ? "animated slideOut" : 'animated slideOutRight';
  73. }
  74. },
  75. watch: {
  76. index(n, v) {
  77. this.timeFun(() => {
  78. this.g = true;
  79. });
  80. if (this.g) {
  81. this.direction = n > v;
  82. this.$router.history.push(this.path);
  83. }
  84. this.g = false;
  85. },
  86. '$route.path': function (newVal, oldVal) {
  87. this.getPath(newVal);
  88. }
  89. },
  90. methods: {
  91. left() {
  92. const {
  93. options: { routes = [] }
  94. } = this.$router;
  95. if (routes.length - 1 > this.index) {
  96. this.index++;
  97. } else {
  98. this.index = 0;
  99. }
  100. },
  101. right() {
  102. const {
  103. options: { routes = [] }
  104. } = this.$router;
  105. if (this.index > 0) {
  106. this.index--;
  107. } else {
  108. this.index = routes.length - 1;
  109. }
  110. },
  111. getPath(path) {
  112. if ('/' === path) {
  113. this.index = 0;
  114. } else {
  115. const tempRoutes = (this.$router.options || {}).routes || [];
  116. if (tempRoutes.length > 0) {
  117. if ('/comment' === path) {
  118. this.index = tempRoutes.length - 1;
  119. } else {
  120. for (let i = 0; i < tempRoutes.length; i++) {
  121. if (path === tempRoutes[i].path) {
  122. this.index = i;
  123. break;
  124. }
  125. }
  126. }
  127. } else {
  128. this.index = 0;
  129. }
  130. }
  131. }
  132. }
  133. };
  134. </script>
  135. <style lang="less">
  136. @keyframes toright {
  137. 0% {
  138. transform: translateX(0%);
  139. opacity: 1;
  140. }
  141. 100% {
  142. transform: translateX(100%);
  143. opacity: 0;
  144. }
  145. }
  146. .wrapper {
  147. height: 100%;
  148. }
  149. //公共css
  150. .body-box {
  151. height: 100%;
  152. background: url(assets/image/bg-y.png) no-repeat center bottom;
  153. background-size: 100% 93%;
  154. background-attachment: fixed;
  155. overflow: auto;
  156. .page-bg {
  157. padding: 0.4rem;
  158. }
  159. .el-icon-d-arrow-right {
  160. position: absolute;
  161. right: 1%;
  162. top: 50%;
  163. transform: translateY(-50%);
  164. color: #666666;
  165. font-size: 1rem;
  166. overflow: hidden;
  167. &::before {
  168. animation: toright 2s infinite;
  169. display: block;
  170. }
  171. }
  172. .nav-btn {
  173. position: fixed;
  174. bottom: 10%;
  175. right: 0;
  176. > .link {
  177. display: flex;
  178. justify-content: flex-start;
  179. align-items: center;
  180. align-content: center;
  181. background: rgba(255, 255, 255, 0.6);
  182. border-bottom-left-radius: 500px;
  183. border-top-left-radius: 500px;
  184. margin-bottom: 5px;
  185. padding: 0.3em 0.5em;
  186. font-size: 16px;
  187. box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  188. > i {
  189. font-size: 1.2em;
  190. margin-right: 5px;
  191. }
  192. }
  193. }
  194. .fixed {
  195. position: fixed;
  196. top: 0;
  197. }
  198. }
  199. </style>