项目初始化
This commit is contained in:
62
pages/tabbar/components/mine/bgBox.vue
Normal file
62
pages/tabbar/components/mine/bgBox.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view class="bg-box">
|
||||
<!-- <view class="tip-btn">
|
||||
<view class="text">Tip: 完善资料,更能吸引异性的关注哦~</view>
|
||||
</view> -->
|
||||
<u-image width="100%" height="400rpx" :fade="false" :src="userInfo.avatar ? userInfo.avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/aa361225849eeb86428e1a3d647d6f7b94354e74de212403bb968e6ad85e79b3.jpeg'"></u-image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg-box {
|
||||
background-color: red;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.tip-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
|
||||
.text {
|
||||
background-color: #3333334a;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40px;
|
||||
padding: 3px 10px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
96
pages/tabbar/components/mine/layout.vue
Normal file
96
pages/tabbar/components/mine/layout.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<!-- 普通模式演示(vue) -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<z-paging ref="paging" v-model="dataList" @scroll="scroll" :paging-style="{ paddingTop: 0 + 'px', paddingBottom: paddingBottom + 'rpx' }" @query="queryList">
|
||||
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中,如果需要跟着滚动,则不要设置slot="top" -->
|
||||
<!-- 注意!此处的z-tabs为独立的组件,可替换为第三方的tabs,若需要使用z-tabs,请在插件市场搜索z-tabs并引入,否则会报插件找不到的错误 -->
|
||||
<template #top>
|
||||
<nav-bar :scrollTop="scrollTop" @initNav="initNav"></nav-bar>
|
||||
</template>
|
||||
<!-- 如果希望其他view跟着页面滚动,可以放在z-paging标签内 -->
|
||||
<view>
|
||||
<bg-box></bg-box>
|
||||
<main-box></main-box>
|
||||
</view>
|
||||
<!-- 自定义没有更多数据view -->
|
||||
<template #empty>
|
||||
<view></view>
|
||||
</template>
|
||||
<!-- 自定义没有更多数据view -->
|
||||
<template #loadingMoreNoMore>
|
||||
<view></view>
|
||||
</template>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@/pages/tabbar/components/mine/navBar.vue';
|
||||
import BgBox from '@/pages/tabbar/components/mine/bgBox.vue';
|
||||
import MainBox from '@/pages/tabbar/components/mine/mainBox.vue';
|
||||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
BgBox,
|
||||
MainBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
paddingTop: 0,
|
||||
paddingBottom: 100,
|
||||
height: 0,
|
||||
scrollTop: 0.5,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const isLogin = sheep.$store('user').isLogin;
|
||||
if(isLogin) {
|
||||
this.getClerk();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initNav(e) {
|
||||
this.height = e.height;
|
||||
this.paddingTop = this.height;
|
||||
},
|
||||
tabChange(index) {
|
||||
this.tabIndex = index;
|
||||
// 当切换tab或搜索时请调用组件的reload方法,请勿直接调用:queryList方法!!
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
// 组件加载时会自动触发此方法,因此默认页面加载时会自动触发,无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好,直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据,请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
type: this.tabIndex + 1
|
||||
}
|
||||
this.$refs.paging.complete([]);
|
||||
},
|
||||
scroll(e) {
|
||||
this.scrollTop = e.detail.scrollTop;
|
||||
},
|
||||
getClerk() {
|
||||
ClerkApi.getClerkList().then((res) => {
|
||||
if(res.data[0]){
|
||||
sheep.$store('sys').setCurrentClerk(res.data[0]);
|
||||
}else{
|
||||
sheep.$store('sys').setCurrentClerk({
|
||||
id: -1,
|
||||
avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/aa361225849eeb86428e1a3d647d6f7b94354e74de212403bb968e6ad85e79b3.jpeg',
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
502
pages/tabbar/components/mine/mainBox.vue
Normal file
502
pages/tabbar/components/mine/mainBox.vue
Normal file
@@ -0,0 +1,502 @@
|
||||
<template>
|
||||
<view class="main-box">
|
||||
<view class="info-box">
|
||||
<view class="avatar-box">
|
||||
<u-avatar @click="editUser" size="160" :src="isLogin ? userInfo.avatar : ''"></u-avatar>
|
||||
<view class="nickname-box">
|
||||
<view class="vip-box">
|
||||
<view class="nickname">{{ userInfo?.nickname || nickname }}</view>
|
||||
<!-- <image class="vip-img" src="@/static/images/vip.png"></image> -->
|
||||
</view>
|
||||
<view class="id-box" @click="onCopy(userInfo.id)">
|
||||
<text class="text">ID: {{ userInfo?.id || 88888 }}</text>
|
||||
<u-icon v-if="userInfo.id" name="outline-copy" custom-prefix="iconfont" size="28"></u-icon>
|
||||
</view>
|
||||
<view class="tag-box">
|
||||
<view class="tag-btn" @click="wallet">
|
||||
<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/c9cec930606ecf028e61bce7415a2587e8089abd5d4144bb52b7bd487daedc26.png"></image>
|
||||
<text>钻石</text>
|
||||
</view>
|
||||
<!-- <view class="tag-btn">
|
||||
<image class="icon-img" src="@/static/images/shop.png"></image>
|
||||
<text>礼物</text>
|
||||
</view> -->
|
||||
<view class="tag-btn" v-if="friendEnabled" @click="point">
|
||||
<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/ab8540e145165ed31ba32f8673cc3e6bddf72161b20789a7c0ecfc36fcbf67d8.png"></image>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
<view class="tag-btn" @click="toTrend">
|
||||
<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/06d4ac22b8acbdb021f698531ddc0091f8b1a4c1b938c4189025edccc7a4beed.png"></image>
|
||||
<text>动态</text>
|
||||
</view>
|
||||
<view class="tag-btn" @click="toGift">
|
||||
<text>礼物</text>
|
||||
<u-icon name="arrow-right" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="fans-box">
|
||||
<view class="tag">
|
||||
<text class="tag-num">2.3万</text>
|
||||
<text>获赞</text>
|
||||
</view>
|
||||
<view class="tag">
|
||||
<text class="tag-num">22.3万</text>
|
||||
<text>关注</text>
|
||||
</view>
|
||||
<view class="tag">
|
||||
<text class="tag-num">223.3万</text>
|
||||
<text>粉丝</text>
|
||||
</view>
|
||||
<view class="tag">
|
||||
<text class="tag-num">1000.3万</text>
|
||||
<text>信用分</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="vip-box" v-if="isPass && friendEnabled" @click="toVip">
|
||||
<vip-card></vip-card>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="card-box" v-if="isPass">
|
||||
<view class="title">我的订单</view>
|
||||
<view class="card-item">
|
||||
<view class="item" @click="myOrder(1)">
|
||||
<u-icon name="outline-empty-wallet-time" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">待付款</view>
|
||||
<tui-badge v-if="numData.orderCount['unpaidCount'] > 0" absolute top="30rpx" right="30rpx" :scaleRatio="0.8" type="green">{{numData.orderCount['unpaidCount']}}</tui-badge>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="myOrder(2)">
|
||||
<u-icon name="outline-timer-1" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">待服务</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="myOrder(3)">
|
||||
<u-icon name="outline-timer-start" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">服务中</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="myOrder(4)">
|
||||
<u-icon name="vuesax-outline-task-square" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">已完成</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-box" v-if="isPass && peiwanEnabled && clerk.id > 0">
|
||||
<view class="title">接单中心</view>
|
||||
<view class="card-item">
|
||||
|
||||
<view class="item" @click="receiveOrder">
|
||||
<u-icon name="jiedan" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">接单中心</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="blindOrder">
|
||||
<u-icon name="snatch" custom-prefix="iconfont" size="56"></u-icon>
|
||||
<view class="name">抢单中心</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="workerList">
|
||||
<u-icon name="dianyuan" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">达人资料</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="reward">
|
||||
<u-icon name="zhaopiandashangjilu" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">打赏记录</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="item">
|
||||
<u-icon name="shimingrenzheng" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">实名认证</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-box">
|
||||
<view class="title">常用工具</view>
|
||||
|
||||
<view class="card-item">
|
||||
<!-- <view class="item">
|
||||
<u-icon name="dashang" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">打赏店员</view>
|
||||
</view> -->
|
||||
|
||||
<view class="item" v-if="isPass && peiwanEnabled" @click="toApply">
|
||||
<u-icon name="dianyuan1" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">达人申请</view>
|
||||
</view>
|
||||
|
||||
<view v-if="brokerageEnabled" class="item" @click="fenxiao">
|
||||
<u-icon name="fenxiaozhongxin2" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">分销中心</view>
|
||||
</view>
|
||||
|
||||
<view class="item" v-if="friendEnabled" @click="sign">
|
||||
<u-icon name="calendar" size="50"></u-icon>
|
||||
<view class="name">签到有礼</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="toFans">
|
||||
<u-icon name="xingxing" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">收藏达人</view>
|
||||
</view>
|
||||
|
||||
<view class="item" v-if="friendEnabled" @click="youhuiquan">
|
||||
<u-icon name="youhuiquan" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">优惠券</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="toChat">
|
||||
<u-icon name="kefuzhongxin" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">购买授权</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="cashApply">
|
||||
<u-icon name="tixian" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">申请提现</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="item">
|
||||
<u-icon name="mianfei-liwutujian" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">礼物图鉴</view>
|
||||
</view>
|
||||
|
||||
<view class="item">
|
||||
<u-icon name="kaidian" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">我要开店</view>
|
||||
</view>
|
||||
|
||||
<view class="item">
|
||||
<u-icon name="outline-timer-1" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">合作推广</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="co-right">尔加科技版权所有</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
|
||||
import VipCard from '@/pages/tabbar/components/mine/vipCard.vue';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
export default {
|
||||
components: {
|
||||
VipCard,
|
||||
tuiBadge,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nickname: '请先登陆',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
isLogin: {
|
||||
get() {
|
||||
return sheep.$store('user').isLogin;
|
||||
},
|
||||
},
|
||||
numData: {
|
||||
get() {
|
||||
return sheep.$store('user').numData;
|
||||
},
|
||||
},
|
||||
clerk() {
|
||||
return sheep.$store('sys').currentClerk;
|
||||
},
|
||||
brokerageEnabled() {
|
||||
return sheep.$store('user').tradeConfig.brokerageEnabled;
|
||||
},
|
||||
peiwanEnabled() {
|
||||
return sheep.$store('user').tradeConfig.peiwanEnabled;
|
||||
},
|
||||
friendEnabled() {
|
||||
return sheep.$store('user').tradeConfig.friendEnabled
|
||||
},
|
||||
isPass() {
|
||||
return sheep.$store('user').tradeConfig.weixinEnabled;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toApply() {
|
||||
uni.showModal({
|
||||
title: '达人申请',
|
||||
content: '请确认是否成年,未成年禁止申请,申请后会有客服添加进行微信实名认证!',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
sheep.$router.go('/pages/worker/workerList/index');
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
toFans() {
|
||||
sheep.$router.go('/pages/clerk/fans/list');
|
||||
},
|
||||
toVip() {
|
||||
sheep.$router.go('/pages/user/vip');
|
||||
},
|
||||
receiveOrder() {
|
||||
sheep.$router.go('/pages/order/worker/list');
|
||||
},
|
||||
blindOrder() {
|
||||
sheep.$router.go('/pages/order/blind/list');
|
||||
},
|
||||
myOrder(type) {
|
||||
sheep.$router.go('/pages/order/my/list', {type: type});
|
||||
},
|
||||
cashApply() {
|
||||
sheep.$router.go('/pages/commission/wallet');
|
||||
},
|
||||
fenxiao() {
|
||||
uni.showModal({
|
||||
title: '分销申请',
|
||||
content: '点击邀请海报,生成海报,生成邀请码,邀请一人下单,可得下单20%佣金!',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
sheep.$router.go('/pages/commission/index');
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
workerList() {
|
||||
sheep.$router.go('/pages/worker/workerList/index');
|
||||
},
|
||||
youhuiquan() {
|
||||
sheep.$router.go('/pages/coupon/list',{type: 'all'});
|
||||
},
|
||||
wallet() {
|
||||
sheep.$router.go('/pages/user/wallet/money')
|
||||
},
|
||||
point() {
|
||||
sheep.$router.go('/pages/user/wallet/score')
|
||||
},
|
||||
sign() {
|
||||
sheep.$router.go('/pages/app/sign')
|
||||
},
|
||||
toGift() {
|
||||
sheep.$router.go('/pages/reward/list')
|
||||
},
|
||||
toTrend() {
|
||||
sheep.$router.go('/pages/trend/my/list')
|
||||
},
|
||||
reward() {
|
||||
sheep.$router.go('/pages/reward/list')
|
||||
},
|
||||
// 复制
|
||||
onCopy(text) {
|
||||
if(text){
|
||||
sheep.$helper.copyText(text+"");
|
||||
}
|
||||
},
|
||||
toChat() {
|
||||
//sheep.$router.go('/pages/chat/index');
|
||||
uni.showModal({
|
||||
title: '购买授权',
|
||||
content: '客服微信:rbtnet',
|
||||
success: function (res) {
|
||||
|
||||
},
|
||||
});
|
||||
},
|
||||
toKaidian() {
|
||||
uni.showModal({
|
||||
title: '搭建同款',
|
||||
content: '搭建同款请联系客服微信:rbtnet',
|
||||
success: function (res) {
|
||||
|
||||
},
|
||||
});
|
||||
},
|
||||
async editUser() {
|
||||
if(!this.friendEnabled){
|
||||
sheep.$router.go('/pages/user/info')
|
||||
return;
|
||||
}
|
||||
|
||||
if(this.isLogin){
|
||||
if(this.isPass){
|
||||
await sheep.$store('user').getInfo();
|
||||
showAuthModal('chatAuthorization');
|
||||
}
|
||||
}else{
|
||||
showAuthModal();
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-box {
|
||||
margin-top: 300rpx;
|
||||
background-color: #fafafa;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
|
||||
.info-box {
|
||||
//background-color: #fff;
|
||||
padding: 15px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.nickname-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
|
||||
.vip-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vip-img {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.id-box {
|
||||
margin: 5px 0;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
|
||||
.text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag-btn {
|
||||
background-color: #efe4e4;
|
||||
border-radius: 10px;
|
||||
padding: 3px 5px;
|
||||
font-size: 10px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon-img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fans-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
padding-top: 0;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
|
||||
.tag-num {
|
||||
margin-bottom: 5px;
|
||||
font-size: 32rpx;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.card-box {
|
||||
background-color: #fff;
|
||||
margin: 30rpx;
|
||||
margin-top: 0;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.title {
|
||||
font-size: 15px;
|
||||
font-weight: bolder;
|
||||
padding: 38rpx 0 10rpx 40rpx;
|
||||
color: #1f2122;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25%;
|
||||
padding: 30rpx 0;
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
margin-top: 10rpx;
|
||||
font-size: 11px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.co-right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
108
pages/tabbar/components/mine/navBar.vue
Normal file
108
pages/tabbar/components/mine/navBar.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-navigation-bar @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
|
||||
<view class="content-bpx">
|
||||
<view class="left-box">
|
||||
<view @click="setBtn" class="set-btn">
|
||||
<u-icon name="setting" :color="opacity > 0.85 ? '#333' : '#fff'" size="48"></u-icon>
|
||||
</view>
|
||||
<view @click="editUser" class="set-btn" v-show="opacity < 1">
|
||||
<u-icon name="edit-pen" size="48"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="opacity > 0.85" class="nickname">{{userInfo.nickname}}</view>
|
||||
</view>
|
||||
</tui-navigation-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
tuiNavigationBar,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//滚动条滚动距离
|
||||
scrollTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0, //标题图标距离顶部距离
|
||||
opacity: 0,
|
||||
height: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initNavigation(e) {
|
||||
this.height = e.height;
|
||||
this.opacity = e.opacity;
|
||||
this.top = e.top;
|
||||
this.$emit('initNav', e);
|
||||
},
|
||||
opacityChange(e) {
|
||||
this.opacity = e.opacity;
|
||||
},
|
||||
setBtn() {
|
||||
sheep.$router.go('/pages/public/setting')
|
||||
},
|
||||
editUser() {
|
||||
sheep.$router.go('/pages/user/info')
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-bpx {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
justify-content: center;
|
||||
|
||||
.left-box {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
font-weight: bolder;
|
||||
color: #1f2122;
|
||||
}
|
||||
|
||||
.set-btn {
|
||||
padding: 0 15px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
109
pages/tabbar/components/mine/vipCard.vue
Normal file
109
pages/tabbar/components/mine/vipCard.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="vip-card">
|
||||
<view class="vip-content">
|
||||
<view>
|
||||
<view class="name">VIP<text class="text">会员中心</text></view>
|
||||
<view class="remark">成为VIP尊享会员可享受更多权益~</view>
|
||||
</view>
|
||||
<view class="vip-btn" v-if="userInfo.isVip">
|
||||
<u-icon name="eye-fill" size="26"></u-icon>
|
||||
<text class="text">查看特权</text>
|
||||
</view>
|
||||
<view class="vip-btn" v-else>
|
||||
<u-icon name="lock-fill" size="26"></u-icon>
|
||||
<text class="text">立即开通</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-card {
|
||||
background: linear-gradient(-120deg, #2bab89, #388772, #3e8472, #227761);
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.vip-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0px 15px;
|
||||
|
||||
.name {
|
||||
color: #a8f9e4;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.remark {
|
||||
font-size: 10px;
|
||||
color: #0fe3ac;
|
||||
}
|
||||
|
||||
.vip-btn {
|
||||
background: linear-gradient(-120deg, #2c8970, #3c8975, #39a287, #0eb68b);
|
||||
padding: 7px 10px;
|
||||
border-radius: 40px;
|
||||
font-size: 10px;
|
||||
|
||||
.text {
|
||||
margin-left: 2px;
|
||||
color: #dafff5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vip-card:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user