| | |
| | | <template> |
| | | <div id="app" :class="`${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`"> |
| | | <div |
| | | id="app" |
| | | :class="`${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`" |
| | | > |
| | | <div :class="`header-box`" v-if="hasHeader && title !== $t('hj248')"> |
| | | <mt-header :title="title"> |
| | | <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button> |
| | | |
| | | <div v-if="!is_Show"> |
| | | <template v-if="iconRight == 'search'"> |
| | | <img slot="right" class="search-right" src="./assets/ico/fangdajing.png" alt /> |
| | | <img |
| | | slot="right" |
| | | class="search-right" |
| | | src="./assets/ico/fangdajing.png" |
| | | alt |
| | | /> |
| | | </template> |
| | | <template v-else> |
| | | <mt-button icon="more" slot="right"></mt-button> |
| | | </template> |
| | | </div> |
| | | |
| | | </mt-header> |
| | | </div> |
| | | <div class="body-box"> |
| | | <transition |
| | | :name="transitionName" |
| | | > |
| | | <transition :name="transitionName"> |
| | | <router-view></router-view> |
| | | </transition> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import elalert from '@/components/elalert.vue' |
| | | import foot from '@/components/foot.vue' |
| | | import loginPopup from '@/components/loginDialog.vue' |
| | | import elalert from "@/components/elalert.vue"; |
| | | import foot from "@/components/foot.vue"; |
| | | import loginPopup from "@/components/loginDialog.vue"; |
| | | // 引入css |
| | | import '@/assets/iconfont/iconfont.css' |
| | | import '@/assets/iconfont/iconfont.ttf' |
| | | import "@/assets/iconfont/iconfont.css"; |
| | | import "@/assets/iconfont/iconfont.ttf"; |
| | | import { getUserInfodata } from "./axios/api"; |
| | | |
| | | export default { |
| | | components: { |
| | | foot, |
| | | elalert, |
| | | loginPopup |
| | | loginPopup, |
| | | }, |
| | | name: 'App', |
| | | name: "App", |
| | | created () { |
| | | this.$state.theme = 'red' |
| | | console.log(this.$state.theme, 'asdasdasd') |
| | | let title = this.$route.meta.title || this.$t('hj224') |
| | | this.title = title |
| | | this.getUserInfo(); |
| | | this.$state.theme = "red"; |
| | | console.log(this.$state.theme, "asdasdasd"); |
| | | let title = this.$route.meta.title || this.$t("hj224"); |
| | | this.title = title; |
| | | if (this.$route.meta.is_Show) { |
| | | this.is_Show = this.$route.meta.is_Show |
| | | this.is_Show = this.$route.meta.is_Show; |
| | | } else { |
| | | this.is_Show = true |
| | | this.is_Show = true; |
| | | } |
| | | if (this.$route.meta.hasHeader) { |
| | | this.hasHeader = true |
| | | this.hasHeader = true; |
| | | } else { |
| | | this.hasHeader = false |
| | | this.hasHeader = false; |
| | | } |
| | | if (this.$route.meta.iconRight) { |
| | | this.iconRight = this.$route.meta.iconRight |
| | | this.iconRight = this.$route.meta.iconRight; |
| | | } else { |
| | | this.iconRight = 'default' |
| | | this.iconRight = "default"; |
| | | } |
| | | // this.$store.state.className = window.localStorage.getItem('styleName')?window.localStorage.getItem('styleName'):'red' |
| | | }, |
| | | watch: { |
| | | $route (to, from) { |
| | | let title = to.meta.title || this.$t('hj224') |
| | | this.title = title |
| | | let title = to.meta.title || this.$t("hj224"); |
| | | this.title = title; |
| | | if (to.meta.iconRight) { |
| | | this.iconRight = to.meta.iconRight |
| | | this.iconRight = to.meta.iconRight; |
| | | } else { |
| | | this.iconRight = 'default' |
| | | this.iconRight = "default"; |
| | | } |
| | | if (to.meta.hasHeader) { |
| | | this.hasHeader = true |
| | | this.hasHeader = true; |
| | | } else { |
| | | this.hasHeader = false |
| | | this.hasHeader = false; |
| | | } |
| | | |
| | | if (to.meta.index > from.meta.index) { |
| | | console.log('slide-left') |
| | | console.log("slide-left"); |
| | | // 设置动画名称 |
| | | this.transitionName = 'slide-left' |
| | | this.transitionName = "slide-left"; |
| | | } else { |
| | | console.log('slide-right') |
| | | this.transitionName = 'slide-right' |
| | | console.log("slide-right"); |
| | | this.transitionName = "slide-right"; |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | data () { |
| | | return { |
| | | title: '首页', |
| | | title: "首页", |
| | | hasHeader: false, |
| | | iconRight: 'default', |
| | | transitionName: '', |
| | | iconRight: "default", |
| | | transitionName: "", |
| | | is_Show: true, |
| | | is_foot: true |
| | | } |
| | | is_foot: true, |
| | | }; |
| | | }, |
| | | methods: { |
| | | async getUserInfo() { |
| | | // 获取用户信息 |
| | | // let showcookie = this.getCookie('USER_TOKEN'); |
| | | let data = await getUserInfodata(); |
| | | if (data.status === 0) { |
| | | // this.getProductSetting() |
| | | this.$store.state.userInfo = data.data; |
| | | } else { |
| | | this.$store.commit("elAlertShow", { |
| | | elAlertShow: true, |
| | | elAlertText: data.msg, |
| | | }); |
| | | } |
| | | this.$store.state.user = this.user; |
| | | }, |
| | | footColse () { |
| | | this.$store.commit('dialogVisible', true) |
| | | this.$store.commit("dialogVisible", true); |
| | | }, |
| | | dialogClose () { |
| | | this.$store.commit('dialogVisible', false) |
| | | } |
| | | } |
| | | } |
| | | this.$store.commit("dialogVisible", false); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | |
| | | /deep/ .van-list__finished-text{ |
| | | line-height: 1.925926rem !important; |
| | | } |
| | |
| | | } |
| | | /deep/.mint-tab-item-label { |
| | | color: #000; |
| | | font-size: .26rem; |
| | | |
| | | font-size: 0.26rem; |
| | | } |
| | | /deep/.top_title{ |
| | | color: #000; |
| | |
| | | /deep/.newDetail-tits{ |
| | | color: #aaa; |
| | | } |
| | | /deep/.van-skeleton__row, .van-skeleton__title{ |
| | | /deep/.van-skeleton__row, |
| | | .van-skeleton__title { |
| | | background-color: #fff!important; |
| | | } |
| | | } |
| | |
| | | } |
| | | /deep/.mint-tab-item-label { |
| | | color: #fff; |
| | | font-size: .26rem; |
| | | |
| | | font-size: 0.26rem; |
| | | } |
| | | /deep/.titContent{ |
| | | color:#000; |
| | | } |
| | | /deep/.mint-tab-container {} |
| | | /deep/.mint-tab-container { |
| | | } |
| | | |
| | | /deep/.mint-tab-item { |
| | | background: #272733; |
| | |
| | | position: relative !important; |
| | | } |
| | | .topLeft{ |
| | | |
| | | } |
| | | |
| | | /deep/.el-alert{ |