283 lines
7.7 KiB
Vue
283 lines
7.7 KiB
Vue
<script setup>
|
|
/**
|
|
* 个人中心 商城
|
|
*/
|
|
// 底部菜单
|
|
import {
|
|
ref,
|
|
computed,
|
|
} from 'vue'
|
|
import {
|
|
onReachBottom,
|
|
onPullDownRefresh,
|
|
onShow,
|
|
onLoad,
|
|
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';
|
|
//
|
|
const store = useStore()
|
|
// 用户信息
|
|
const userinfo = computed(() => {
|
|
let result = store.state.userinfo || {}
|
|
return result
|
|
})
|
|
// 是否显示顶部
|
|
const showHeader = ref(false)
|
|
|
|
onPageScroll((ev) => {
|
|
if (ev.scrollTop > 44) showHeader.value = true
|
|
else showHeader.value = false
|
|
})
|
|
|
|
// 跳转
|
|
function link(url) {
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
}
|
|
function toCustomer() {
|
|
let param = {};
|
|
param.type = 'C2C'
|
|
param.name = `${props.detail.merName}`
|
|
param.msgId = `${rs.data.serviceId}`
|
|
param.isCustomer = true
|
|
|
|
util.toChat(param)
|
|
|
|
|
|
uni.navigateTo({
|
|
url: util.setUrl('/pages/news/chat/chat', param)
|
|
})
|
|
}
|
|
</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 choicenessTitle="true"></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> |