<script setup> /** * 个人中心 商城 */ // 底部菜单 import { ref, computed, getCurrentInstance } from 'vue' import { onReachBottom, onPullDownRefresh, onShow, onLoad, onReady, onPageScroll, } from '@dcloudio/uni-app'; import { useStore } from 'vuex' // 顶部状态栏 import statusBar from '@/components/header/statusBar' // 未登录状态 import noLogin from '@/components/login/noLogin' // 产品列表 import productList from '@/components/shop/productList/productList'; // 底部导航 import footerMneu from '@/components/footerMenu/footerMenu' // 工具库 import util from '@/common/js/util'; // import api from '@/api/index.js' const { proxy } = getCurrentInstance() // const store = useStore() // 用户信息 const userinfo = computed(() => store.state.userinfo || {}) // 是否显示顶部 const showHeader = ref(false) onReady(() => { util.isLogin().then(rs => { proxy.$refs.productListRef.getList() }) }) onReachBottom(() => { proxy.$refs.productListRef.getMoreList() }) onPullDownRefresh(() => { proxy.$refs.productListRef.refreshList() }) onPageScroll((ev) => { if (ev.scrollTop > 44) showHeader.value = true else showHeader.value = false }) // 跳转 function link(url) { uni.navigateTo({ url, }) } function toCustomer() { uni.navigateTo({ url: util.setUrl('/pages/mine/setting/feedback') }) } </script> <template> <view class="page" v-if="!userinfo.id"> <statusBar /> <view class="head rows plr30"> <view class="side"></view> <view class="f1"></view> <view class="side"> <uni-icons type="gear" size="40rpx" color="#333" @click="link('/pages/mine/setting/setting')" /> </view> </view> <noLogin class="f1" /> </view> <view class="app" v-else> <view class="apex" :class="{ 'active': showHeader }"> <statusBar /> <view class="head rows"> <view class=""></view> <view class="">个人中心</view> <view class=""></view> </view> </view> <!-- 个人中心 我的卡片 --> <view class="shopHeaderBg"></view> <!-- 顶部 --> <view class="header pr mtb30 mlr20"> <statusBar /> <view class="userinfo rows"> <!-- 左头像 右昵称 收获地址 --> <image class="avatar wh130 cir" :src="userinfo.avatar" mode="aspectFill" /> <view class="info f1 mlr30"> <view class="nickname f34">{{ userinfo.userNickname }}</view> <view class="address df aic mt15 f28 c666" @click="link('/pages/mine/address/index')"> <image class="wh30 mr10" src="/static/mine-dingwei.png" mode="aspectFill" /> <text>收货地址</text> </view> </view> <view class="df"> <!-- 客服 --> <image class="ml20 wh40" @click="toCustomer" src="@/static/mine-kefu.png" mode="aspectFill" /> <!-- 设置 --> <image class="ml20 wh40" @click="link('/pages/mine/setting/setting')" src="@/static/mine-shezhi.png" mode="aspectFill" /> </view> </view> </view> <!-- 我的钱包 --> <view class="wallet rows mtb10 mlr20 ptb20 plr20 bfff br20" @click="link('/pages/index/wallet/wallet')"> <!-- 左边 --> <image class="wh80" src="@/static/mine-wallet.png" mode="aspectFill" /> <view class="mlr20 f1 f36 c333">我的钱包</view> <!-- 右边 --> <view class="right df aic"> <text>查看余额</text> <uni-icons type="right" /> </view> </view> <!-- 我的订单 --> <view class="container"> <view class="header mtb20 rows"> <text class="title c333 f30">我的订单</text> <view class="df aic" @click="link('/pages/shop/order/index')"> <text class="c999 f26 mr20">全部</text> <uni-icons type="right" /> </view> </view> <view class="main ptb20 f24"> <view class="item ver" @click="link('/pages/shop/order/index?tabIndex=1')"> <image src="/static/mine-daifukuan.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">待付款</text> </view> <view class="item ver" @click="link('/pages/shop/order/index?tabIndex=2')"> <image src="/static/mine-daifahuo.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">待发货</text> </view> <view class="item ver" @click="link('/pages/shop/order/index?tabIndex=3')"> <image src="/static/mine-daishouhuo.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">待收货</text> </view> <view class="item ver" @click="link('/pages/shop/order/index?tabIndex=6')"> <image src="/static/mine-daipingjia.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">评价</text> </view> <view class="item ver" @click="link('/pages/shop/order/index?tabIndex=6')"> <image src="/static/mine-tuikuan_shouhou.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">退款/售后</text> </view> </view> </view> <!-- 其他功能 --> <view class="container"> <view class="main ptb20 f24"> <view class="item ver" @click="link('/pages/shop/collect')"> <image src="/static/mine-wodeshoucang.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">商品收藏</text> </view> <view class="item ver" @click="link('/pages/shop/focusStore')"> <image src="/static/mine-dianpushoucang.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">店铺收藏</text> </view> <view class="item ver" @click="link('/pages/shop/history')"> <image src="/static/mine-lishijilu.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">历史浏览</text> </view> <!-- <view class="item ver" @click="link('/pages/shop/coupon')"> <image src="/static/mine-youhuiquan.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">优惠券</text> </view> --> </view> </view> <!-- 商家管理 --> <view class="container"> <view class="header ptb10 rows"> <text class="title c333 f30">商家管理</text> </view> <view class="main ptb20 f24"> <template v-if="userinfo.isShop == 0"> <view class="item ver" @click="link('/pages/shop/settle')"> <image src="/static/mine-ruzhushangjia.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">入驻商家</text> </view> </template> <template v-else-if="userinfo.isShop == 1"> <view class="item ver" @click="link('/pages/shop/settle')"> <image src="/static/mine-ruzhushangjia.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">店铺管理</text> </view> <view class="item ver" @click="link('/pages/shop/store/commodities')"> <image src="/static/mien-dianpuguanli.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">商品管理</text> </view> <!-- <view class="item ver" @click="link('pages/merchant/order/index')"> <image src="/static/mine-dingdanguanli.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">订单管理</text> </view> --> <!-- <view class="item ver"> <image src="/static/mine-kehuxiaoxi.png" mode="aspectFit" class="wh50" /> <text class="txt mt10 wsn">客户消息</text> </view> --> </template> </view> </view> <!-- 精选 --> <view class="recommend mtb20 mlr20"> <productList ref="productListRef" :choicenessTitle="true" :requestFn="api.shop.getMineUserProList"> </productList> </view> </view> <!-- 底部导航 --> <footerMenu ref="footerMneuRef" page="mine" /> </template> <style lang="scss" scoped> // .apex { position: fixed; top: 0; left: 0; right: 0; z-index: 10; opacity: 0; transition: .2s; &.active { opacity: 1; background-color: #fff; } } // 头部个人资料卡 .header { .avatar { background: #D8D8D8; } } // 我的钱包 .wallet { position: relative; .right { text { font-size: 24rpx; color: #999999; margin-right: 20rpx; } } } // 模块 .container { position: relative; overflow: hidden; margin: 20rpx 20rpx; padding: 0 20rpx; background-color: #fff; border-radius: 20rpx; .main { display: grid; grid-template-columns: repeat(5, 1fr); } } </style>