diancan_uni/pages/user/index/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <com-header :page-title="pageTitle" v-if="showHeader"></com-header>
        <view class="wrap">
            <view class="banner_wrap">
                <image class="banner" src="/static/statics/img/user/top_bg.png"></image>
            </view>
            <view class="tag" :style="'top:' + (setBgHeight + 10) + 'px'" @tap="goShopInfo" v-if="role">商家中心</view>
            <view class="wrap_nr" :style="'top:' + (setBgHeight + 10) + 'px'">
                <view class="user_info">
                    <image class="user_thumb" :src="userInfo.thumb"></image>
                    <view class="user_info_l">
                        <view class="user_name">Hey，{{ userInfo.nickname }}</view>
                        <view class="user_tips">与你相识的第{{ fromToNowDays }}天</view>
                    </view>
                </view>
                <view class="user_vip">
                    <image src="/static/statics/img/user/vip_bg.png" alt="" class="vip_bg" />
                    <view class="vip_con" v-if="!userInfo.is_member">
                        <view class="con_text">开通会员，立即享受会员价</view>
                        <view class="con_btn" @tap="toVipCard">立即开通</view>
                    </view>
                    <view class="vip_con flex_end" v-if="userInfo.is_member">
                        <view class="con_text">{{ userInfo.end_at }} 后到期</view>
                    </view>
                </view>
                <view class="order_wrap">
                    <view class="order_wrap_bg">
                        <image class="bg_tu" src="/static/statics/img/user/order_bg.png"></image>
                    </view>
                    <view class="order_wrap_con">
                        <view class="order_t">
                            <view class="order_t_l">
                                <image class="order_icon" src="/static/statics/img/user/order_icon.png"></image>
                                我的订单
                            </view>
                            <view class="order_t_r" @tap="toOrderList" data-type="-1">
                                全部订单
                                <van-icon name="arrow" />
                            </view>
                        </view>
                        <view class="order_list">
                            <view class="order_item" @tap="toOrderList" data-type="0">
                                <view class="item_icon">
                                    <image class="icon" src="/static/statics/img/user/pay_icon.png"></image>
                                    <view class="num" v-if="userInfo.order_wait_pay">{{ userInfo.order_wait_pay }}</view>
                                </view>
                                <view class="item_name">待支付</view>
                            </view>
                            <view class="order_item" @tap="toOrderList" data-type="1">
                                <view class="item_icon">
                                    <image class="icon" src="/static/statics/img/user/send_icon.png"></image>
                                    <view class="num" v-if="userInfo.order_wait_ship">{{ userInfo.order_wait_ship }}</view>
                                </view>
                                <view class="item_name">待发货</view>
                            </view>
                            <!-- <view class="order_item">
						<view class="item_icon">
							<image class="icon" src="/statics/img/user/receive_icon.png"></image>
							<view class="num">2</view>
						</view>
						<view class="item_name">待收货</view>
					</view> -->
                            <view class="order_item" @tap="toOrderList" data-type="2">
                                <view class="item_icon">
                                    <image class="icon" src="/static/statics/img/user/pickup_icon.png"></image>
                                    <view class="num" v-if="userInfo.order_wait_ziti">{{ userInfo.order_wait_ziti }}</view>
                                </view>
                                <view class="item_name">待自提</view>
                            </view>
                            <view class="order_item" @tap="toOrderList" data-type="3">
                                <view class="item_icon">
                                    <image class="icon" src="/static/statics/img/user/receive_icon.png"></image>
                                </view>
                                <view class="item_name">已完成</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="section_wrap">
                    <view class="section" @tap="goPage" data-url="/pages/user/coupons/index">
                        <image class="sec_icon" mode="aspectFit" src="/static/statics/img/user/quan_icon.png"></image>
                        <view class="sec_r">
                            <view class="sec_name">优惠券</view>
                            <view class="sec_num">{{ userInfo.coupon }}</view>
                        </view>
                        <image class="sec_logo" src="/static/statics/img/user/sec_logo.png"></image>
                    </view>
                    <view class="section cash" @tap="goPage" data-url="/pages/user/cash/index">
                        <image class="sec_icon" mode="aspectFit" src="/static/statics/img/user/cash_icon.png"></image>
                        <view class="sec_r">
                            <view class="sec_name">余额</view>
                            <view class="sec_num">{{ userInfo.money }}</view>
                        </view>
                        <image class="sec_logo" src="/static/statics/img/user/sec_logo.png"></image>
                    </view>
                    <view class="section" @tap="goPage" data-url="/pages/user/address/list/index">
                        <image class="sec_icon" mode="aspectFit" src="/static/statics/img/user/dizhi_icon.png"></image>
                        <view class="sec_r">
                            <view class="sec_name">地址管理</view>
                        </view>
                        <image class="sec_logo" src="/static/statics/img/user/sec_logo.png"></image>
                    </view>
                    <view class="section" @tap="goPage" data-url="/pages/user/info/index">
                        <image class="sec_icon" mode="aspectFit" src="/static/statics/img/user/ziliao_icon.png"></image>
                        <view class="sec_r">
                            <view class="sec_name">资料编辑</view>
                        </view>
                        <image class="sec_logo" src="/static/statics/img/user/sec_logo.png"></image>
                    </view>
                    <view class="section" @tap="goPage" data-url="/pages/joinus/index">
                        <image class="sec_icon" mode="aspectFit" src="/static/statics/img/user/join_icon.png"></image>
                        <view class="sec_r">
                            <view class="sec_name">加盟咨询</view>
                            <view class="sec_tip">查看加盟信息</view>
                        </view>
                        <image class="sec_logo" src="/static/statics/img/user/sec_logo.png"></image>
                    </view>
                    <view class="section" @tap="goPage" data-url="/pages/feedback/index">
                        <image class="sec_icon" mode="aspectFit" src="/static/statics/img/user/feedback_icon.png"></image>
                        <view class="sec_r">
                            <view class="sec_name">意见建议</view>
                            <view class="sec_tip">发表使用意见</view>
                        </view>
                        <image class="sec_logo" src="/static/statics/img/user/sec_logo.png"></image>
                    </view>
                    <!-- <view class="section" bind:tap="goPage" data-url="/pages/take-coupons/index">
				<image class="sec_icon" mode="aspectFit" src="/statics/img/user/feedback_icon.png"></image>
				<view class="sec_r">
					<view class="sec_name">领券</view>
					<view class="sec_tip">领取优惠券</view>
				</view>
				<image class="sec_logo" src="/statics/img/user/sec_logo.png"></image>
			</view> -->
                </view>
                <view class="tu_wrap">
                    <image class="tu" src="/static/statics/img/user/logo_text.png"></image>
                    <view class="version">v1.0.91</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// index.js
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

export default {
    data() {
        return {
            userInfo: null,
            role: null,
            // 1为商家
            pageTitle: '我的',
            showHeader: false,
            setBgHeight: getApp().globalData.setBgHeight,
            percentLevel: 0,
            // 等级进度百分比
            fromToNowDays: '' // 相识天数(当前时间-注册时间)
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
        that.setData({
            role: getApp().globalData.role
        });
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
        that.getUserInfo();
    },
    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 (event) {
        // Do something when page scroll
        let that = this;
        let scrollTop = event.scrollTop;

        if (scrollTop >= that.setBgHeight) {
            that.setData({
                showHeader: true
            });
        } else {
            that.setData({
                showHeader: false
            });
        }
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 页面跳转
        goPage(event) {
            let that = this;
            console.log(event);
            let url = event.currentTarget.dataset.url;
            uni.navigateTo({
                url: url
            });
        },

        // 用户信息
        getUserInfo() {
            let that = this;
            myPro
                .wxRequest('user/v2/userinfo', 'GET', {})
                .then((res) => {
                    that.setData({
                        userInfo: res.result
                    }); // 计算相识天数

                    let createStr = res.result.created_at; // 为兼容ios

                    let createTimesmap = new Date(createStr.replace(/-/g, '/')).getTime();
                    let currentTimesmap = new Date().getTime();
                    that.setData({
                        fromToNowDays: util.computeDays(createTimesmap, currentTimesmap) + 1 // 从注册当天算第1天
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 去商家中心
        goShopInfo() {
            uni.navigateTo({
                url: '/pages/shopRole/info/index'
            });
        },

        // 订单
        toOrderList(event) {
            let that = this; // console.log(event)

            let type = event.currentTarget.dataset.type;
            uni.reLaunch({
                url: '/pages/user/order/list/index?type=' + type
            });
        },

        // 去买会员卡
        toVipCard() {
            let that = this;
            uni.navigateTo({
                url: '/pages/user/vipcard/index'
            });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    width: 750rpx;
    min-height: 100vh;
    /* background: #f6f6f6; */
}
.banner_wrap .banner {
    width: 750rpx;
    height: 501rpx;
}
.wrap_nr {
    padding: 0 30rpx;
    /* margin-top: -200rpx; */
    position: relative;
}
.banner_wenzi {
    width: 675rpx;
    height: 193rpx;
    position: absolute;
    top: -170rpx;
    left: 50%;
    transform: translateX(-50%);
}
.user_wrap {
    padding: 20rpx 40rpx;
    position: absolute;
    left: 0;
    /* background: #FFFFFF;
	border-radius: 15rpx; */
}
.user_info {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
}
.user_info .user_name {
    font-size: 40rpx;
    color: #ffffff;
}
.user_info .user_tips {
    padding-top: 16rpx;
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
}
.user_info .user_thumb {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}
.user_level {
    margin-top: 26rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.user_level .level_l {
    width: 98rpx;
    height: 46rpx;
    background: linear-gradient(90deg, #e4bc88, #d2901e);
    border-radius: 23rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user_level .level_l .level_icon {
    width: 27rpx;
    height: 24rpx;
}
.user_level .level_l .level_num {
    font-size: 29rpx;
    font-weight: 600;
    font-style: italic;
    color: #ffffff;
}
.user_level .level_r {
    width: 490rpx;
}
.user_level .level_wenzi {
    padding-top: 10rpx;
    font-size: 22rpx;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.section {
    width: 335rpx;
    height: 158rpx;
    border-radius: 10rpx;
    padding: 0 34rpx 0;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #000000;
    /* background: #FFFFFF; */
    background: #ffd761;
    position: relative;
}
.section .sec_icon {
    width: 75rpx;
    height: 76rpx;
}
.section .sec_r {
    padding-left: 15rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #295c56;
}
.section .sec_num {
    font-size: 36rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    padding-top: 8rpx;
}
.section .sec_tip {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.54);
}
.section .sec_logo {
    width: 36rpx;
    height: 36rpx;
    position: absolute;
    bottom: 30rpx;
    right: 30rpx;
}
/* 底图 */
.tu_wrap {
    width: 100%;
    padding: 100rpx 0 40rpx;
}
.tu_wrap .tu {
    width: 124rpx;
    height: 57rpx;
    display: block;
    margin: 0 auto;
}
/* 版本号 */
.version {
    text-align: center;
    color: #333333;
    font-size: 20rpx;
    padding-top: 20rpx;
}
/* 商户角色切换 */
.banner_wrap {
    position: fixed;
}
.tag {
    width: 130rpx;
    height: 45rpx;
    background: linear-gradient(-90deg, #295c56, rgba(255, 255, 255, 0.3));
    border-radius: 23rpx 0rpx 0rpx 23rpx;
    font-size: 28rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 160rpx;
    right: 0;
    z-index: 1;
}
/* 订单 */
.order_wrap {
    /* background: #FFFFFF;
	border-radius: 10rpx;
	color: #000000;
	font-size: 28rpx;
	padding: 30rpx 0;
	position: relative;
	z-index: 1; */
    width: 690rpx;
    height: 256rpx;
    position: relative;
}
.order_wrap .order_wrap_bg {
    position: absolute;
    top: 0;
    left: 0;
}
.order_wrap .order_wrap_bg .bg_tu {
    width: 690rpx;
    height: 256rpx;
}
.order_wrap .order_wrap_con {
    width: 690rpx;
    height: 256rpx;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.order_wrap .order_t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    color: #ffffff;
}
.order_wrap .order_t .order_t_l {
    font-size: 30rpx;
    display: flex;
    align-items: center;
}
.order_wrap .order_t .order_t_l .order_icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 6rpx;
}
.order_wrap .order_t .order_t_r {
    font-size: 26rpx;
    /* color: rgba(0,0,0,.54); */
}
.order_wrap .order_list {
    display: flex;
    margin-top: 30rpx;
}
.order_wrap .order_item {
    /* flex: 1; */
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.order_wrap .order_item .item_icon {
    position: relative;
}
.order_wrap .order_item .item_icon .icon {
    width: 90rpx;
    height: 90rpx;
}
.order_wrap .order_item .item_icon .num {
    min-width: 34rpx;
    height: 34rpx;
    border-radius: 50%;
    background: #ffd102;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -14rpx;
    right: -12rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #000000;
}
.order_wrap .order_item .item_name {
    /* padding-top: 10rpx; */
}
/* 开通会员 */
.user_vip {
    width: 648rpx;
    height: 82rpx;
    position: relative;
    left: 20rpx;
    top: 0rpx;
    margin-top: 20rpx;
}
.user_vip .vip_bg {
    width: 648rpx;
    height: 82rpx;
    position: absolute;
    top: 0;
    left: 0;
}
.user_vip .vip_con {
    width: 648rpx;
    height: 82rpx;
    padding: 0 40rpx 0 116rpx;
    font-size: 24rpx;
    color: #f3d4b3;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.user_vip .vip_con.flex_end {
    justify-content: flex-end;
}
.user_vip .con_btn {
    width: 135rpx;
    height: 48rpx;
    background: #ffd1a2;
    border-radius: 24rpx;
    font-size: 24rpx;
    color: #5d3921;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>