diancan_uni/pages/index/index.vue

<template>
    <!-- index.wxml -->
    <view class="wrap">
        <view class="top_bg_w">
            <view class="banner_wrap" v-if="topBannerList.length > 1">
                <swiper :autoplay="true" :circular="true" :interval="intervalTopBanner" :duration="durationTopBanner" @change="changeTopBanner">
                    <swiper-item v-for="(item, index) in topBannerList" :key="index">
                        <image class="top_bg" :src="imgUrl + item.thumb"></image>
                    </swiper-item>
                </swiper>
                <view class="dots">
                    <block v-for="(item, index) in topBannerList" :key="index">
                        <view :class="index == currentTopBanner ? 'dot active' : 'dot'"></view>
                    </block>
                </view>
            </view>
            <view class="banner_wrap" v-else>
                <image class="top_bg" :src="imgUrl + item.thumb" v-for="(item, index) in topBannerList" :key="index"></image>
            </view>
        </view>
        <view class="wrap_nr">
            <!-- 用户信息 -->
            <view class="user_wrap">
                <!-- 未登录 -->
                <view class="user_item" v-if="!token">
                    <view class="item_l">
                        <image class="user_touxiang" :src="userInfo.thumb ? userInfo.thumb : '/statics/img/logo.png'"></image>
                        <view class="user_info">
                            <view class="user_nickname">Hey，{{ userInfo.nickname ? userInfo.nickname : '羊汤馆' }}</view>
                            <view class="shop_tip">用心做好每一碗羊汤</view>
                        </view>
                    </view>
                    <view class="item_r">
                        <view class="ac_btn" @tap="toLogin">立即登录</view>
                    </view>
                </view>
                <!-- 已登录 -->
                <view class="user_item login_ed" v-else>
                    <view class="item_l">
                        <image class="user_touxiang" :src="userInfo.thumb"></image>
                        <view class="user_info">
                            <view class="user_nickname" :style="'max-width:' + (userInfo.is_member ? '200rpx' : '260rpx') + ';'">Hey，{{ userInfo.nickname }}</view>
                            <image class="vip_tag" src="/static/statics/img/vip_tag.png" v-if="userInfo.is_member"></image>
                        </view>
                    </view>
                    <view class="item_r">
                        <view class="user_count">
                            <view class="count_num">{{ userInfo.coupon }}</view>
                            <view class="count_name">优惠券</view>
                        </view>
                        <view class="separation_line"></view>
                        <view class="user_count">
                            <view class="count_num">{{ userInfo.money }}</view>
                            <view class="count_name">余额</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 门店自取 外卖 -->
            <view class="process_wrap">
                <view class="process_item" @tap="goStore">
                    <image class="item_icon mendian" mode="heightFix" src="/static/statics/img/mendian_icon.png"></image>
                    <image class="item_name" mode="heightFix" src="/static/statics/img/mendian_text.png"></image>
                    <view class="item_desc">在线点餐</view>
                </view>
                <view class="process_item waimai" @tap="goGoods">
                    <image class="item_icon" mode="heightFix" src="/static/statics/img/waimai_icon.png"></image>
                    <image class="item_name" mode="heightFix" src="/static/statics/img/waimai_text.png"></image>
                    <view class="item_desc">无接触配送，外送到家</view>
                </view>
            </view>
            <!-- 1元购 领券 -->
            <view class="activity_wrap">
                <view class="ac_item" @tap="goActivityPage">
                    <image class="ac_tu" :src="imgUrl + activityFirst.thumb"></image>
                </view>
                <view class="ac_item" @tap="goPage" data-url="/pages/take-coupons/index">
                    <image class="ac_tu" src="/static/statics/img/quan_banner.png"></image>
                </view>
            </view>
            <!-- 广告区 -->
            <view class="ad_wrap_w" v-if="adList.length != 0">
                <!-- 多图 -->
                <view class="ad_wrap" v-if="adList.length > 1">
                    <swiper :autoplay="true" :circular="true" :interval="interval" :duration="duration" @change="changeAd">
                        <swiper-item v-for="(item, index) in adList" :key="index">
                            <image class="ad_tu" :src="imgUrl + item.thumb" @tap="goAdUrl" :data-item="item"></image>
                        </swiper-item>
                    </swiper>
                    <view class="dots">
                        <block v-for="(item, index) in adList" :key="index">
                            <view :class="index == current ? 'dot active' : 'dot'"></view>
                        </block>
                    </view>
                </view>
                <!-- 单图 -->
                <view class="ad_wrap" v-else>
                    <image class="ad_tu" :src="imgUrl + item.thumb" @tap="goAdUrl" :data-item="item" v-for="(item, index) in adList" :key="index"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// index.js
import * as api from '@/service/api'
import * as util from '@/util/util.js'
import func from '@/util/wxUtil.js';

export default {
    data() {
        return {
            interval: '3000',

            // 自动切换时间间隔
            duration: '500',

            // 滑动动画时长
            adList: [],

            current: 0,
            imgUrl: api.API_BASE_IMAGE,
            userInfo: null,
            token: null,
            setBgHeight: getApp().globalData.setBgHeight,
            topBannerList: [],
            intervalTopBanner: '3000',

            // 自动切换时间间隔
            durationTopBanner: '500',

            // 滑动动画时长
            currentTopBanner: 0,

            activityFirst: {
                thumb: ''
            }
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
    },
    onShow: function () {
        // Do something when page show.
        let that = this; // 顶部banner

        that.getTopBanner(); // 一元加购 1加购

        that.getAdList(1); // 广告位 3底部滚动

        that.getAdList(3); // that.setData({
        // 	token: getApp().globalData.token,
        // 	userInfo: getApp().globalData.userInfo
        // });

        if (uni.getStorageSync('token')) {
            that.setData({
                token: uni.getStorageSync('token')
            });
        } // console.log('onshow',getApp().globalData);

        // 清掉

        uni.removeStorageSync('fare_type');
        uni.removeStorageSync('checkedAddress'); // wx.removeStorageSync('store');
        // console.log('token',that.data.token)

        if (that.token) {
            that.getUserInfo();
        }
    },
    
    methods: {
        // 广告banner
        getAdList(cateId) {
            let that = this;
            let params = {
                cate_id: cateId
            };
			api.getArticleList(params).then(res => {
				console.log(res)
			    // 底部滚动
			    if (cateId == 3) {
			        that.setData({
			            adList: res.result
			        });
			    } // 加购
			    
			    if (cateId == 1) {
			        that.setData({
			            activityFirst: res.result[0]
			        });
			    }              
			})
        },

        // 广告轮播图切换
        changeAd(event) {
            let that = this;
            that.setData({
                current: event.detail.current
            });
        },

        // 广告跳转(单页)
        goAdUrl(event) {
            let that = this;
            let item = event.currentTarget.dataset.item;
            uni.navigateTo({
                url: '/pages/singlepage/index?id=' + item.id
            });
        },

        // 页面跳转
        goPage(event) {
            let that = this;
            console.log(event);
            let url = event.currentTarget.dataset.url;
            uni.navigateTo({
                url: url
            });
        },

        // 自取流程
        goStore() {
            let that = this; // 配送方式 0外卖 1自提

            uni.setStorage({
                key: 'fare_type',
                data: '1'
            }); // 因为是单店(所以直接去商品页)
            // wx.navigateTo({
            // 	url: '/pages/goods/index'
            // });

            uni.navigateTo({
                url: '/pages/tables/index'
            });
        },

        // 外卖流程
        goGoods() {
            let that = this; // 配送方式 0外卖 1自提

            uni.setStorage({
                key: 'fare_type',
                data: '0'
            });
            uni.navigateTo({
                url: '/pages/user/address/list/index'
            });
        },

        // 用户信息
        getUserInfo() {
            let that = this;
			api.getUserInfo({}).then(res => {
				console.log(res)
			    that.setData({
			        userInfo: res.result
			    });
			})
        },
		
        // 去登录
        toLogin() {
            let that = this;
            uni.reLaunch({
                url: '/pages/login/index/index'
            });
        },

        // 一元购 (单页)
        goActivityPage() {
            let that = this;
            let id = that.activityFirst.id;
            uni.navigateTo({
                url: '/pages/singlepage/index?id=' + id
            });
        },

        // 顶部banner
        getTopBanner() {
            let that = this;
			api.getBannerList({}).then(res => {
				console.log(res)
			    that.setData({
			        topBannerList: res.result
			    });
			})
        },

        // 顶部banner切换
        changeTopBanner(event) {
            let that = this;
            that.setData({
                currentTopBanner: event.detail.current
            });
        }
    },
	onReady: function () {
	    // Do something when page ready.
	    let that = this;
	},
	onHide: function () {
	    // Do something when page hide.
	},
	onUnload: function () {
	    // Do something when page close.
	},
	onPullDownRefresh: function () {
	    // Do something when pull down.
	},
	onReachBottom: function () {
	    // Do something when page reach bottom.
	},
	onShareAppMessage: function () {
	    // return custom share data when user share.
	},
	onPageScroll: function () {
	    // Do something when page scroll
	},
	onResize: function () {
	    // Do something when page resize
	},
};
</script>
<style>
/**index.wxss**/
.top_bg_w {
    width: 750rpx;
    height: 594rpx;
    position: fixed;
    top: 0;
    left: 0;
}
.top_bg_w swiper {
    width: 750rpx;
    height: 594rpx;
}
.top_bg {
    width: 750rpx;
    height: 594rpx;
    /* position: fixed;
	top: 0;
	left: 0; */
}
.top_bg_w .dots {
    position: absolute;
    bottom: 110rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}
.wrap_nr {
    padding: 0 30rpx;
    padding-top: 507rpx;
    /* margin-top: -45rpx; */
}
.process_wrap {
    width: 690rpx;
    height: 246rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 5rpx 15rpx 0rpx #e0e0e0;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-top: 20rpx;
}
.process_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 690rpx;
    height: 30rpx;
    background-repeat: repeat-x;
    background-size: 18rpx 30rpx;
}
.process_wrap .process_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.process_item .item_icon {
    display: block;
    /* width: 113rpx; */
    height: 86rpx;
}
.process_item .item_icon.mendian {
    height: 106rpx;
}
.process_item .item_name {
    display: block;
    width: 130rpx;
    height: 35rpx;
    margin-top: 15rpx;
}
.process_item .item_desc {
    padding-top: 8rpx;
    font-size: 22rpx;
    color: #666666;
}
.process_wrap::after {
    content: '';
    display: block;
    width: 1rpx;
    height: 101rpx;
    background: rgba(102, 102, 102, 0.2);
    position: absolute;
    top: 62rpx;
    left: 350rpx;
}
.feedback_wrap {
    width: 690rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.feedback_wrap .feedback_item {
    width: 335rpx;
    height: 158rpx;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 22rpx;
    box-shadow: 0rpx 0rpx 25rpx 0rpx #f3f3f3;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.feedback_item .item_icon {
    width: 99rpx;
    height: 101rpx;
}
.feedback_item .item_name {
    font-size: 30rpx;
    color: #000000;
    margin-top: -5rpx;
}
.ad_wrap {
    margin-top: 20rpx;
    width: 690rpx;
    height: 230rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
}
.ad_wrap .ad_tu {
    width: 690rpx;
    height: 230rpx;
}
.ad_wrap .dots {
    position: absolute;
    bottom: 19rpx;
    right: 50rpx;
    display: flex;
    align-items: center;
}
.dots .dot {
    width: 8rpx;
    height: 8rpx;
    background: #ffffff;
    border-radius: 4rpx;
    margin-left: 6rpx;
}
.dots .dot.active {
    width: 30rpx;
}
/* 用户信息 */
.user_wrap {
    position: relative;
}
.user_wrap .user_item {
    width: 690rpx;
    padding: 20rpx 20rpx 20rpx 30rpx;
    background: #ffffff;
    box-shadow: 0rpx 5rpx 15rpx 0rpx #e0e0e0;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.user_wrap .user_item .item_l {
    display: flex;
    align-items: center;
    justify-content: center;
}
.user_wrap .user_item .user_touxiang {
    width: 84rpx;
    height: 84rpx;
    border-radius: 50%;
}
.user_wrap .user_item .user_info {
    padding: 16rpx;
    font-size: 28rpx;
    color: #000000;
}
.user_item .user_info .shop_tip {
    color: #999999;
}
.user_item .ac_btn {
    width: 166rpx;
    height: 55rpx;
    background: #1f524d;
    border-radius: 28rpx;
    font-size: 30rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user_wrap .user_item.login_ed .user_info {
    display: flex;
    align-items: center;
}
.user_wrap .user_item .vip_tag {
    width: 70rpx;
    height: 30rpx;
    margin-left: 20rpx;
}
.user_item.login_ed .item_r {
    display: flex;
    align-items: center;
}
.user_item .user_count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    color: #000000;
}
.user_item .user_count .count_name {
    font-size: 24rpx;
    color: #999999;
}
.user_item .item_r .separation_line {
    width: 1px;
    height: 38rpx;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 30rpx;
}
.user_wrap .user_item .user_info .user_nickname {
    max-width: 300rpx;
}
.user_wrap .user_item.login_ed .user_info .user_nickname {
    max-width: 200rpx;
}
/* 一元购&领券区 */
.activity_wrap {
    width: 690rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.activity_wrap .ac_item .ac_tu {
    width: 335rpx;
    height: 189rpx;
    display: block;
    border-radius: 10rpx;
}
</style>