|
@@ -0,0 +1,217 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="flex-col" :style="{height: winHeight + 'px'}">
|
|
|
|
+ <!-- #ifdef MP -->
|
|
|
|
+ <view class="cart_nav">
|
|
|
|
+ <nav-bar iconColor='#fff' ref="navBarRef" navTitle="游戏搭子" backgroundColor="#FF6702" :isBackgroundColor="false">
|
|
|
|
+ </nav-bar>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- #endif -->
|
|
|
|
+ <view class='newsList tui-skeleton flex-col' style="background-color: #fff;flex: 1;">
|
|
|
|
+ <view class='nav'>
|
|
|
|
+ <scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft" style="width:auto;overflow:hidden;">
|
|
|
|
+ <block v-for="(item,index) in navList" :key="index">
|
|
|
|
+ <view class='item borRadius14 tui-skeleton-rect' :class='active==item.id?"on":""' @click='tabSelect(item.id, index)'>
|
|
|
|
+ <view class="line1">{{item.name}}</view>
|
|
|
|
+ <view class='line bg_color' v-if="active==item.id"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </block>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='list' style="flex: 1;">
|
|
|
|
+ <template v-if="active == 1">
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="active == 2">
|
|
|
|
+ </template>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ // +----------------------------------------------------------------------
|
|
|
|
+ // | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
|
|
|
|
+ // +----------------------------------------------------------------------
|
|
|
|
+ // | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
|
|
|
|
+ // +----------------------------------------------------------------------
|
|
|
|
+ // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
|
|
|
|
+ // +----------------------------------------------------------------------
|
|
|
|
+ // | Author: CRMEB Team <admin@crmeb.com>
|
|
|
|
+ // +----------------------------------------------------------------------
|
|
|
|
+ import navBar from '@/components/navBar';
|
|
|
|
+ import animationType from '@/utils/animationType.js'
|
|
|
|
+ import tuiSkeleton from '@/components/base/tui-skeleton.vue';
|
|
|
|
+ import {
|
|
|
|
+ getAddressList
|
|
|
|
+ } from '@/api/user.js';
|
|
|
|
+ let app = getApp();
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ tuiSkeleton,
|
|
|
|
+ navBar
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ winHeight: 0,
|
|
|
|
+ isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
|
|
|
|
+ autoplay: true,
|
|
|
|
+ navList: [{
|
|
|
|
+ id: 1,
|
|
|
|
+ name: '本校'
|
|
|
|
+ }, {
|
|
|
|
+ id: 2,
|
|
|
|
+ name: '同城'
|
|
|
|
+ }],
|
|
|
|
+ active: 1,
|
|
|
|
+ scrollLeft: 0,
|
|
|
|
+ addressItem: {}
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ onLoad() {
|
|
|
|
+ let that = this;
|
|
|
|
+ uni.getSystemInfo({
|
|
|
|
+ success: function(res) {
|
|
|
|
+ that.winHeight = res.windowHeight
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ this.getaddressInfo()
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
|
+ */
|
|
|
|
+ onShow: function() {
|
|
|
|
+ let that = this;
|
|
|
|
+ uni.$on('addressItem', function(res) {
|
|
|
|
+ that.$set(that, 'addressItem', res);
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ tabSelect(active, e) {
|
|
|
|
+ this.active = active;
|
|
|
|
+ this.scrollLeft = e * 60;
|
|
|
|
+ },
|
|
|
|
+ /*
|
|
|
|
+ * 获取默认收货地址或者获取某条地址信息
|
|
|
|
+ */
|
|
|
|
+ getaddressInfo: function() {
|
|
|
|
+ getAddressList().then(res => {
|
|
|
|
+ console.log('地址', res)
|
|
|
|
+ if (res.code = 200) {
|
|
|
|
+ if (res.data.length !== 0) {
|
|
|
|
+ this.addressItem = res.data.find(item => item.isDefault === true) || {} // this.addressItem = res.data[0];
|
|
|
|
+ } else {
|
|
|
|
+ this.addressItem = {}
|
|
|
|
+ }
|
|
|
|
+ console.log('默认地址', this.addressItem)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+ .courie {
|
|
|
|
+ padding: 14rpx 24rpx 0 24rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 23rpx;
|
|
|
|
+ color: $bg-color-primary;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+
|
|
|
|
+ image {
|
|
|
|
+ width: 46rpx;
|
|
|
|
+ height: 46rpx;
|
|
|
|
+ margin-right: 15rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .swiper {
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .swiper swiper {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 365rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .swiper .slide-image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 335rpx;
|
|
|
|
+ border-radius: 14rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
|
+ .newsList .swiper .wx-swiper-dot {
|
|
|
|
+ width: 12rpx !important;
|
|
|
|
+ height: 12rpx !important;
|
|
|
|
+ border-radius: 0;
|
|
|
|
+ transform: rotate(-45deg);
|
|
|
|
+ transform-origin: 0 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .swiper .wx-swiper-dot~.wx-swiper-dot {
|
|
|
|
+ margin-left: 5rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
|
|
|
|
+ margin-bottom: -15rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // #endif
|
|
|
|
+ // #ifdef APP-PLUS || H5
|
|
|
|
+ .newsList .swiper .uni-swiper-dot {
|
|
|
|
+ width: 12rpx !important;
|
|
|
|
+ height: 12rpx !important;
|
|
|
|
+ border-radius: 0;
|
|
|
|
+ transform: rotate(-45deg);
|
|
|
|
+ transform-origin: 0 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .swiper .uni-swiper-dot~.uni-swiper-dot {
|
|
|
|
+ margin-left: 5rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
|
|
|
|
+ margin-bottom: -15rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // #endif
|
|
|
|
+ .newsList .nav {
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
+ width: 100%;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding-top: 43rpx;
|
|
|
|
+ border-top-right-radius: 23rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .nav .item {
|
|
|
|
+ // max-width: 156rpx;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .nav .item.on {
|
|
|
|
+ color: #282828;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .nav .item~.item {
|
|
|
|
+ margin-left: 46rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .nav .item .line {
|
|
|
|
+ // width: 24rpx;
|
|
|
|
+ height: 10rpx;
|
|
|
|
+ border-radius: 6rpx;
|
|
|
|
+ margin: 10rpx auto 0 auto;
|
|
|
|
+ background-color: $bg-color-primary;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .newsList .nav .item .line1 {
|
|
|
|
+ color: $bg-color-primary;
|
|
|
|
+ }
|
|
|
|
+ </style>
|