yihuo/pages/center/index.vue

<template>
    <page :nav="false" ref="pageRef" :light="true" :back="false" nav-color="transparent">
        <view
            class="pagae-nav"
            :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }"
        >
            <view class="flex-column-align-center nav-title">我的</view>
        </view>
        <view class="centerWrapper" :style="{ backgroundImage: 'url(' + ossurl.mine.headbj + ')' }" >
            <view class="userBox" v-if="user" @click="$router.push('user_info')">
                <view class="center">
                	<view class="avatarBox">
                	    <view class="avatarView">
                	        <image class="avatar" :src="user.avatar" />
                	        <image class="avatarEdit" :src="ossurl.mine.editIcon" />
                	    </view>
                	</view>
                	<view class="userInfo">
                	    <view class="nickname">{{ user.nickname || '' }}</view>
                	    <view class="idinfo">
                	        <view class="username" @click.native.stop="copy(user.username)">
                	            <image class="userInfoIcon" :src="ossurl.mine.headId" mode="widthFix"/>
                	            {{ user.username }}
                	            <view class="copyBtn">复制</view>
                	        </view>
                	        <div v-if="user.mobile" class="phone">
                	            <image class="userInfoIcon" :src="ossurl.mine.headPhone" mode="widthFix"/>
                	            {{ user.mobile }}
                	        </div>
                	    </view>
                	</view>
                </view>
				<view class="numSection fx-c-s p30">
					<view class="item" @click="gotoRoute('coupon')" v-if="user">
						<text>{{ showNumber('couponCount') }}</text>
						<text>优惠券</text>
					</view>
					<view class="item" @click="gotoRoute('store')"  v-if="user">
						<text>{{ showNumber('inventoryCount') }}</text>
						<text>仓库</text>
					</view>
					<view class="item" @click="gotoRoute('magic')"  v-if="user">
						<text>{{ showNumber('magicBalance') }}</text>
						<text>源石</text>
					</view>
				</view>
            </view>

            <view class="userBox" v-else @click="$router.push('login')">
                <view
                    class="avatarBox"

                >
                    <view class="avatarView">
                        <image class="avatar" :src="ossurl.common.noavatar" />
                    </view>
                </view>
                <view class="userInfo">
                    <view class="nickname">暂未登录！</view>
                    <view class="info">点此登录账号</view>
                </view>
            </view>

            <view class="mineWrapper">
				
				
                <view class="stoneBox">
                    <!-- <view
                        class="stoneList"
                    >
                        <view class="stoneItem" @click="gotoRoute('coupon')" v-if="user">
                            <image class="stoneIcon" :src="ossurl.mine.couponIcon" />
                            优惠券
                            <span class="stoneNum">{{ showNumber('couponCount') }}</span>
                        </view>
                        <view class="stoneItem" @click="gotoRoute('store')"  v-if="user">
                            <image class="stoneIcon" :src="ossurl.mine.warehouseIcon" />
                            仓库
                            <span class="stoneNum">{{ showNumber('inventoryCount') }}</span>
                        </view>
                        <view class="stoneItem" @click="gotoRoute('magic')"  v-if="user">
                            <image class="stoneIcon" :src="ossurl.mine.stoneIcon" />
                            源石
                            <span class="stoneNum">{{ showNumber('magicBalance') }}</span>
                        </view>
                    </view> -->
                    <view class="flexList p30">
						<view class="title">
							<text>常用功能</text>
						</view>
						<view class="center flex">
							<view class="flex-sub flexItem" @click="gotoRoute('pull_new_user')">
							    <image class="flexIcon" :src="ossurl.mine.invite" />
							    <view class="title">邀新有礼</view>
							</view>
							<view class="flex-sub flexItem" @click="gotoWeb()">
							    <image class="flexIcon" :src="ossurl.mine.gift" />
							    <view class="title">进群领福利</view>
							</view>
							<view class="flex-sub flexItem" @click="gotoRoute('message')">
							    <image class="flexIcon" :src="ossurl.mine.message" />
							    <view class="title">系统消息</view>
							</view>
							<view class="flex-sub flexItem" @click="gotoRoute('order_award')">
							    <image class="flexIcon" :src="ossurl.mine.order" />
							    <view class="title">宝箱订单</view>
							</view>
						</view>
                    </view>
                </view>

               <view
                    class="shoppingBox"
                    :style="{ backgroundImage: 'url(' + ossurl.welfare.roomBg + ')' }"
                >
                    <view class="title">
                        商城订单
                        <view class="more" @click="gotoOrder(0)">
                            全部
                            <view class="cuIcon-right"></view>
                        </view>
                    </view>
                    <view class="shopList">
                        <view class="item" @click="gotoOrder(1)">
                            <image class="shopImage" :src="ossurl.mine.order1" />
                        </view>
                        <view class="item" @click="gotoOrder(4)">
                            <image class="shopImage" :src="ossurl.mine.order2" />
                        </view>
                    </view>
                </view>

                <cell @show-vip="showVip" />
                <view class="margin14 radius6 overflow-hidden">
                    <official-account></official-account>
                </view>
                <vip ref="vipRef" />
                <poster ref="posterRef" />
            </view>
        </view>
    </page>
</template>

<script>
    import fun from './fun.vue'
    import cell from './cell.vue'
    import vip from './vip.vue'
    import poster from './poster'
    import ossurl from '@/utils/ossurl'
    export default {
        components: { fun, vip, poster, cell },
        data() {
            return {
                ossurl,
                active: 0,
                avatar_show: false,
                scrollTop: 0,
                indexData: null
            }
        },
        computed: {
            user() {
                return this.$store.state.userInfo
            },
            hide() {
                return !this.$store.state.hide
            },
            headerBg() {
                return this.scrollTop > 0 ? '#fff' : 'transparent'
            },
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        onTabItemTap() {},
        onShow() {
            this.avatar_show = this.isTimePast('2023-07-21 23:59:59')
            this.$service.base.track()
            this.getIndex()
        },
        methods: {
            async getIndex() {
                if (!this.$common.isLogin()) {
                    this.indexData = null
                    return
                }
                const res = await this.$service.award.magicIndex()
                this.indexData = res
            },
            isTimePast(time) {
                const currentTime = new Date()
                // 解析时间字符串
                const [targetDate, targetTime] = time.split(' ')
                const [targetYear, targetMonth, targetDay] = targetDate.split('-')
                const [targetHour, targetMinute, targetSecond] = targetTime.split(':')
                // 创建目标日期时间对象
                const targetDateTime = new Date(
                    targetYear,
                    targetMonth - 1,
                    targetDay,
                    targetHour,
                    targetMinute,
                    targetSecond
                )

                return currentTime > targetDateTime
            },
            change(e) {
                this.active = e.detail.current
            },
            copy(text) {
                console.log(text)
                this.$common.copy(text)
            },
            getPhoneNumber(e) {
                if (!e.detail.encryptedData) return
                this.bindMobile(e.detail)
            },
            async bindMobile(param) {
                const res = await this.$service.user.bindMobile(param)
                if (res) {
                    this.$service.user.info()
                }
            },
            showVip() {
                this.$refs.vipRef.show()
            },
            showNext(item) {
                this.$common.showNext(item)
            },
            gotoRoute(route) {
                this.$router.pushCheck(route)
            },
            gotoOrder(active) {
                this.$router.pushCheck('order_product', { active })
            },
            gotoWeb() {
                const url =
                    'https://mp.weixin.qq.com/s?__biz=MzkzMTU2ODM4MQ==&mid=2247483786&idx=1&sn=b8fb65d562c3778881101d0e194bd5aa&chksm=c2684e18f51fc70ea3140fa1145adabed0d7203928d0b36431e425f9360fd66d4ed173f60870#rd'
                this.$router.web(url, '领福利')
            },
            showNumber(key) {
                if (!this.indexData) return '-'
                if (typeof this.indexData[key] === 'undefined') return '-'
                const val = this.bigNumberTransform(this.indexData[key])
                return val
            },
            bigNumberTransform(value) {
                const newValue = ['', '', '']
                let fr = 1000
                let num = 3
                let text1 = ''
                let fm = 1
                while (value / fr >= 1) {
                    fr *= 10
                    num += 1
                    // console.log('数字', value / fr, 'num:', num)
                }
                if (num <= 4) {
                    // 千
                    newValue[0] = parseInt(value / 1000) + ''
                    newValue[1] = '千'
                } else if (num <= 8) {
                    // 万
                    text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
                    // tslint:disable-next-line:no-shadowed-variable
                    fm = text1 === '万' ? 10000 : 10000000
                    if (value % fm === 0) {
                        newValue[0] = parseInt(value / fm) + ''
                    } else {
                        newValue[0] = Math.floor(parseFloat(value / fm) * 10) / 10 + ''
                    }
                    newValue[1] = text1
                } else if (num <= 16) {
                    // 亿
                    text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
                    text1 = (num - 8) / 4 > 1 ? '万亿' : text1
                    text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
                    // tslint:disable-next-line:no-shadowed-variable
                    fm = 1
                    if (text1 === '亿') {
                        fm = 100000000
                    } else if (text1 === '千亿') {
                        fm = 100000000000
                    } else if (text1 === '万亿') {
                        fm = 1000000000000
                    } else if (text1 === '千万亿') {
                        fm = 1000000000000000
                    }
                    if (value % fm === 0) {
                        newValue[0] = parseInt(value / fm) + ''
                    } else {
                        newValue[0] = Math.floor(parseFloat(value / fm) * 10) / 10 + ''
                    }
                    newValue[1] = text1
                }
                if (value < 1000) {
                    newValue[0] = value + ''
                    newValue[1] = ''
                }
                return newValue.join('')
            }
        }
    }
</script>

<style lang="scss"></style>
<style lang="scss" scoped>
	.numSection{
		padding-bottom: 40rpx;
		margin-top: 50rpx;
		.item{
			width: 32%;
			text-align: center;
			border-right: 1rpx solid #dedede;
			&:last-child {
			   border-right: none;
			}
			text{
				display: block;
				&:nth-child(1) {
					font-weight: bold;
					font-size: 32rpx;
				}
				&:nth-child(2) {
					color: #999;
				}
			}
		}
	}
    .pagae-nav {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 100;
        transition: 0.2s;
    }
    .nav-title {
        height: 80rpx;
        font-size: 32rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: bold;
        color: #000000;
    }
    .centerWrapper {
        padding-top: 200rpx;
        background-size: 100% auto;
        background-repeat: no-repeat;
        .userBox {
            padding-bottom: 40rpx;
			.center{
				display: flex;
				.avatarBox {
				    height: 160rpx;
				    background-size: 100% 100%;
				    padding: 0 20rpx;
				    position: relative;
				    .avatarView {
				        position: relative;
				        display: inline-block;
				        .avatar {
				            width: 148rpx;
				            height: 148rpx;
				            border-radius: 50%;
				
				            border: 8rpx solid #ffe996;
				        }
				        .avatarEdit {
				            position: absolute;
				            bottom: 0;
				            right: 0;
				            width: 48rpx;
				            height: 48rpx;
				        }
				    }
				    .centerEdit {
				        width: 142rpx;
				        height: 46rpx;
				        position: absolute;
				        right: 0;
				        bottom: 20rpx;
				    }
				}
				.userInfo {
				    padding: 0 20rpx;
				    padding-bottom: 32rpx;
				    .nickname {
				        font-size: 32rpx;
				        font-family: Source Han Sans, Source Han Sans;
				        font-weight: 700;
				        color: #000000;
				        padding: 24rpx 0 10rpx 0;
				        margin-bottom: 20rpx;
				    }
				    .idinfo {
				        display: flex;
				        .username,
				        .phone {
				            display: flex;
				            align-items: center;
				            justify-content: center;
				            margin-right: 44rpx;
				        }
				    }
				    .copyBtn {
				        background: rgba(255, 255, 255, 0.33);
				        border-radius: 4rpx 4rpx 4rpx 4rpx;
				        margin-left: 8rpx;
				        color: #ac8906;
				        font-size: 20rpx;
				        padding: 4rpx 8rpx;
				    }
				    .info {
				        font-size: 24rpx;
				        font-family: Source Han Sans, Source Han Sans;
				        font-weight: 350;
				        color: #997A03;
				    }
				    .userInfoIcon {
				        width: 34rpx;
				        margin-right: 8rpx;
				    }
				}
			}
            
        }
    }

    .mineWrapper {
        padding: 0 20rpx;
        background-color: #f6f6f6;
        position: relative;
        margin-top: -50rpx;
		
        .stoneBox {
          // margin-top: -40rpx;
            .flexIcon {
                width: 96rpx;
                height: 96rpx;
            }
            .stoneList {
                background-size: 100% 100%;
                height: 98rpx;
                display: flex;
                .stoneItem {
                    padding: 22rpx 12rpx 10rpx 50rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 64rpx;
                    font-size: 24rpx;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 350;
                    color: #906700;
                    .stoneIcon {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 8rpx;
                    }
                    .stoneNum {
                        font-size: 36rpx;
                        font-family: Rousseau Deco, Rousseau Deco;
                        font-weight: bold;
                        color: #000000;
                        margin-left: 12rpx;
                    }
                }
            }
        }
        .flexList {
            background-color: #fff;
            padding: 28rpx;
            border-radius: 20;
			margin-bottom: 40rpx;
			.title{
				margin-bottom: 30rpx;
				text{
					font-weight: bold;
				}
			}
            .flexItem {
                text-align: center;
                flex: 1;
            }
        }
    }
    .shoppingBox {
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 2rpx 28rpx 30rpx 28rpx;
        margin-top: 20rpx;
        background-size: 240rpx 150rpx;
        background-position: top right;
        background-repeat: no-repeat;
        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28rpx;
            font-family: Source Han Sans, Source Han Sans;
            color: #000000;
            padding: 24rpx 0;
            font-weight: bold;
            .more {
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #d1c289;
                display: flex;
                align-items: center;
            }
        }
        .shopList {
            display: flex;
            .item {
                min-width: 338rpx;
                .shopImage {
                    width: 332rpx;
                    height: 154rpx;
                }
                &:last-child {
                    margin-left: -16rpx;
                }
            }
        }
    }
</style>