123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <template>
- <swiper class="box" :current-item-id="current" circular vertical disable-touch>
- <swiper-item class="swiper-item" item-id="index">
- <view class="item" v-for="item in index" :key="item.name"
- @click="item.name == showPageName ? update() : onClick('index', item.name)">
- <u-loading-icon v-if="item.loading" mode="circle" />
- <text v-else :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }">
- {{ item.name }}
- </text>
- </view>
- <image class="image" src="/static/c+selected.svg" mode="widthFix"
- @click="onClick('cloud', cloudLastPage || '资料库')" />
- </swiper-item>
- <swiper-item class="swiper-item" item-id="cloud">
- <image class="image" src="/static/c+unselected.svg" mode="widthFix"
- @click="onClick('index', indexLastPage || '首页')" />
- <view class="item" v-for="item in cloud" :key="item.name"
- @click="item.name == showPageName ? update() : onClick('cloud', item.name)">
- <u-loading-icon v-if="item.loading" mode="circle" />
- <text v-else :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }">
- {{ item.name }}
- </text>
- </view>
- </swiper-item>
- </swiper>
- </template>
- <script>
- export default {
- data() {
- return {
- current: "index",
- showPageName: "",
- indexLastPage: '',
- cloudLastPage: '',
- index: [{
- name: "首页"
- }, {
- name: "活动"
- }, {
- name: "案例"
- }, {
- name: "视频"
- }],
- cloud: [{
- name: "资料库"
- }, {
- name: "商学院"
- }, {
- name: "单品"
- }, {
- name: "首页"
- }],
- countDown: null,
- }
- },
- props: {
- onChange: {
- type: Function
- }
- },
- mounted() {
- // #ifdef !MP-WEIXIN
- this.onClick(this.$parent.$parent.swiperItemID, this.$parent.$parent.page)
- // #endif
- },
- methods: {
- onClick(current, name, update = false) {
- const item = this[current].find(v => v.name == name),
- that = this;
- if (typeof item.loading != 'boolean' || update) {
- item.loading = true;
- update = true;
- }
- this[current + 'LastPage'] = name;
- this.current = current;
- this.showPageName = name;
- this.$emit("onChange", {
- current, name, update, callBack
- })
- function callBack(loading = false) {
- item.loading = loading;
- that[current] = JSON.parse(JSON.stringify(that[current]));
- }
- },
- update() {
- if (this.countDown) {
- this.onClick(this.current, this.showPageName, true)
- } else {
- this.countDown = setTimeout(() => {
- clearTimeout(this.countDown)
- this.countDown = null;
- }, 300)
- }
- },
- },
- }
- </script>
- <style lang="scss">
- .box {
- position: fixed;
- width: 355px;
- height: 50px;
- background: rgba(255, 255, 255, 0.95);
- box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
- border-radius: 50px;
- left: 10px;
- bottom: 20px;
- .swiper-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 355px;
- height: 50px;
- padding: 0 30px;
- box-sizing: border-box;
- .item {
- font-family: Source Han Sans SC, Source Han Sans SC;
- font-size: 16px;
- color: #666666;
- padding: 10px;
- }
- .image {
- width: 40px;
- padding: 4px;
- }
- }
- }
- </style>
|