TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

调整复制用户中心兼容

Browse Source
This commit is contained in:
唐明明
2021-10-13 12:04:45 +08:00
parent b6e58b2431
commit 7ee3ddee63
10 changed files with 2639 additions and 2875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
pages/user/index.vue
View File

@@ -25,205 +25,185 @@
<image class="newCont-close" src="/static/user/order-cancelPay.png" mode="aspectFill" @click="newEject()"></image>
</view>
<!-- 消息列表弹出 end -->
<!-- @scrolltoupper="onScrolltoupper" -->
<scroll-view class="content-scroll" scroll-y="true">
<view class="header">
<!-- 工具 -->
<view class="user-tool">
<image class="user-tool-icon" src="/static/user/user-top-00.png" mode="aspectFill" @click="$Router.push({name: 'setting'})"></image>
<image class="user-tool-icon" src="/static/user/user-top-01.png" mode="aspectFill" @click="$Router.push({name: 'news'})"></image>
<!-- ios安全区 -->
<view class="ios-top"></view>
<!-- header -->
<view class="header">
<!-- 工具 -->
<view class="user-tool">
<image class="user-tool-icon" src="/static/user/user-top-00.png" mode="aspectFill" @click="$Router.push({name: 'setting'})"></image>
<image class="user-tool-icon" src="/static/user/user-top-01.png" mode="aspectFill" @click="$Router.push({name: 'news'})"></image>
</view>
<!-- 用户信息 -->
<view class="user-info">
<view class="user-portrait">
<image class="user-portrait-head" :src="userData.avatar ? userData.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
</view>
<!-- 用户信息 -->
<view class="user-info">
<view class="user-portrait">
<image class="user-portrait-head" :src="userData.avatar ? userData.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
</view>
<view class="user-head">
<view class="user-name">
{{userData.nickname}}
<image v-if="userData.identity" class="user-name-identity" :src="userData.identity.cover"></image>
</view>
<view class="user-status">
邀请码：{{userData.invite}}
<view class="user-status-copy" @click="copyCenter(userData.invite)">
<text>复制</text>
</view>
</view>
</view>
</view>
<!-- 会员卡 -->
<view class="userVip" :class="{ animated: animatedShow }">
<view class="userVip-top">
<view class="userVip-top-name" v-if="userIdentity.right">
{{ userData.identity.id == 1 ? '开通' + userIdentity.right.name : '到期时间：' + userIdentity.times.ended_at}}
</view>
<view class="userVip-top-btn" v-if="userData.identity.id != 5" @click="openVip(userIdentity.right.identity_id)">
{{ userData.identity.id == 1 ? '去开通' : '去升级'}}<image class="userVip-top-arrow" src="/static/user/userVip_arrow.png"></image>
</view>
<view class="userVip-top-btn" v-else>
已达成满级
</view>
</view>
<!-- 未认证后显示 -->
<!-- <view class="userVip-tips">
<view class="userVip-tips-title">
加入链商星球
</view>
<view class="userVip-tips-text">
和众多精英一样，用另一种方式改变你的生活姿态。
以人为本，锐意进取，追求卓越。
诚信立足创新致远。
</view>
</view> -->
<!-- 已认证后显示 -->
<view class="userVip-rights">
<view class="userVip-rightst-title">
<view class="userVip-rightst-title-name">查看会员专属权益</view>
<view class="userVip-rightst-more" @click="$Router.push({name: 'vipIndex', params:{identity_id: userIdentity.right.identity_id}})">全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png"></image></view>
</view>
<view class="userVip-rightst-list" v-if="userIdentity.right">
<view v-for="(item, index) in userIdentity.right.rights" :key="index" class="userVip-rightst-label">
<block v-if="index <= 3">
<image class="userVip-rightst-img" :src="item.cover"></image>
<view class="nowrap userVip-rightst-name">{{item.name}}</view>
</block>
</view>
<view class="userVip-rightst-label">
<image class="userVip-rightst-img" src="/static/user/userRightst_icon_more.png"></image>
<view class="nowrap userVip-rightst-name">敬请期待</view>
</view>
</view>
</view>
<view class="user-head">
<view class="user-name">
{{userData.nickname}}
<image v-if="userData.identity" class="user-name-identity" :src="userData.identity.cover"></image>
</view>
<view class="user-status">
邀请码：{{userData.invite}}
<view class="user-status-copy" @click="copyCenter(userData.invite)">
<text>复制</text>
</view>
</view>
</view>
</view>
<view
class="mian"
:style="[{
transform: coverTransform,
transition: coverTransition
}]"
@touchstart="coverTouchstart"
@touchmove="coverTouchmove"
@touchend="coverTouchend">
<!-- 消息中心 -->
<view class="userNew">
<image class="userNew-icon" src="/static/user/userNew_icon.png"></image>
<swiper class="userNew-banner" disable-touch circular autoplay interval="3000" vertical>
<swiper-item class="ellipsis" v-for="(item, index) in newList" :key="index" @click="newEject(index)">
{{item.title}}
</swiper-item>
</swiper>
<!-- 会员卡 -->
<view class="userVip" :class="{ animated: animatedShow }">
<view class="userVip-top">
<view class="userVip-top-name" v-if="userIdentity.right">
{{ userData.identity.id == 1 ? '开通' + userIdentity.right.name : '到期时间：' + userIdentity.times.ended_at}}
</view>
<view class="userVip-top-btn" v-if="userData.identity.id != 5" @click="openVip(userIdentity.right.identity_id)">
{{ userData.identity.id == 1 ? '去开通' : '去升级'}}<image class="userVip-top-arrow" src="/static/user/userVip_arrow.png"></image>
</view>
<view class="userVip-top-btn" v-else>
已达成满级
</view>
</view>
<!-- 我的资产 -->
<view class="userAssets">
<view class="userAssets-top">
<view class="withdraw-name" v-if="userData.account">
当前能量球价值<view class="withdraw-number">￥{{userData.account.stone_value || 0}}</view>
</view>
<view class="withdraw-btn" @click="$Router.push({name: 'Extract'})">
去提现
</view>
</view>
<view class="userAssets-show">
<view class="assets-title">
我的资产
</view>
<view class="assets-list" v-if="userData.account">
<view class="assets-label" @click="$Router.push({name:'walletProperty'})">
<view class="assets-label-name">能量球钱包<image @click.stop="showHelp('wallet')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
<view class="assets-label-number">{{userData.account.stone || 0}}</view>
</view>
<view class="assets-label" @click="$Router.push({name:'Fragment'})">
<view class="assets-label-name">能量碎片<image @click.stop="showHelp('chip')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
<view class="assets-label-number">{{userData.account.score || 0}}</view>
</view>
</view>
</view>
</view>
<!-- 我的伙伴 -->
<view class="userPartner">
<view class="partner-title">
我的伙伴
</view>
<view class="partner-list" v-if="userData.relation_count">
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:''}})">
<view class="partner-label-name">伙伴总数</view>
<view class="partner-label-number">{{userData.relation_count.all || 0}}</view>
</view>
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:1}})">
<view class="partner-label-name">直接伙伴</view>
<view class="partner-label-number">{{userData.relation_count.one || 0}}</view>
</view>
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:2}})">
<view class="partner-label-name">间接伙伴</view>
<view class="partner-label-number">{{userData.relation_count.two || 0}}</view>
</view>
</view>
</view>
<!-- 企业工具 -->
<view class="userPartner" v-if="userData.is_company">
<view class="partner-title">
企业工具
</view>
<view class="tool-list">
<view class="tool-label" @click="$Router.push({name: 'goodsManagement'})">
<image class="tool-label-img" src="/static/user/userTool-00.png" mode=""></image>
<view class="tool-label-name">商品权证</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'couponsManagement'})">
<image class="tool-label-img" src="/static/user/userTool-01.png" mode=""></image>
<view class="tool-label-name">优惠券管理</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'instrumentSpread'})">
<image class="tool-label-img" src="/static/user/userTool-02.png" mode=""></image>
<view class="tool-label-name">营销推广码</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'instrumentBasics'})">
<image class="tool-label-img" src="/static/user/userTool-03.png" mode=""></image>
<view class="tool-label-name">基础信息</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'shopLists'})">
<image class="tool-label-img" src="/static/user/userTool-04.png" mode=""></image>
<view class="tool-label-name">部门门店</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'employeesList'})">
<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
<view class="tool-label-name">员工管理</view>
</view>
<!-- <view class="tool-label" @click="$Router.push({name: 'verificationIndex'})">
<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
<view class="tool-label-name">扫码核销</view>
</view> -->
</view>
</view>
<!-- 我的服务 -->
<view class="userPartner">
<view class="partner-title">
我的服务
</view>
<view class="tool-list">
<view class="tool-label" @click="custEject">
<image class="tool-label-img" src="/static/user/userServe-00.png" mode=""></image>
<view class="tool-label-name">专属客服</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'userCode'})">
<image class="tool-label-img" src="/static/user/userServe-01.png" mode=""></image>
<view class="tool-label-name">邀请好友</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'userHelp'})">
<image class="tool-label-img" src="/static/user/userServe-02.png" mode=""></image>
<view class="tool-label-name">帮助中心</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'userClause'})">
<image class="tool-label-img" src="/static/user/userServe-03.png" mode=""></image>
<view class="tool-label-name">服务条款</view>
</view>
</view>
<!-- 已认证后显示 -->
<view class="userVip-rights">
<view class="userVip-rightst-title">
<view class="userVip-rightst-title-name">查看会员专属权益</view>
<view class="userVip-rightst-more" @click="$Router.push({name: 'vipIndex', params:{identity_id: userIdentity.right.identity_id}})">全部更多 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png"></image></view>
</view>
<view class="userVip-rightst-list" v-if="userIdentity.right">
<view v-for="(item, index) in userIdentity.right.rights" :key="index" class="userVip-rightst-label">
<block v-if="index <= 3">
<image class="userVip-rightst-img" :src="item.cover"></image>
<view class="nowrap userVip-rightst-name">{{item.name}}</view>
</block>
</view>
<view class="userVip-rightst-label">
<image class="userVip-rightst-img" src="/static/user/userRightst_icon_more.png"></image>
<view class="nowrap userVip-rightst-name">敬请期待</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- mian -->
<view class="mian" :class="{'shoeCard': shoeCardType}">
<!-- 消息中心 -->
<view class="userNew">
<image class="userNew-icon" src="/static/user/userNew_icon.png"></image>
<swiper class="userNew-banner" disable-touch circular autoplay interval="3000" vertical>
<swiper-item class="ellipsis" v-for="(item, index) in newList" :key="index" @click="newEject(index)">
{{item.title}}
</swiper-item>
</swiper>
</view>
<!-- 我的资产 -->
<view class="userAssets">
<view class="userAssets-top">
<view class="withdraw-name" v-if="userData.account">
当前能量球价值<view class="withdraw-number">￥{{userData.account.stone_value || 0}}</view>
</view>
<view class="withdraw-btn" @click="$Router.push({name: 'Extract'})">
去提现
</view>
</view>
<view class="userAssets-show">
<view class="assets-title">
我的资产
</view>
<view class="assets-list" v-if="userData.account">
<view class="assets-label" @click="$Router.push({name:'walletProperty'})">
<view class="assets-label-name">能量球钱包<image @click.stop="showHelp('wallet')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
<view class="assets-label-number">{{userData.account.stone || 0}}</view>
</view>
<view class="assets-label" @click="$Router.push({name:'Fragment'})">
<view class="assets-label-name">能量碎片<image @click.stop="showHelp('chip')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
<view class="assets-label-number">{{userData.account.score || 0}}</view>
</view>
</view>
</view>
</view>
<!-- 我的伙伴 -->
<view class="userPartner">
<view class="partner-title">
我的伙伴
</view>
<view class="partner-list" v-if="userData.relation_count">
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:''}})">
<view class="partner-label-name">伙伴总数</view>
<view class="partner-label-number">{{userData.relation_count.all || 0}}</view>
</view>
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:1}})">
<view class="partner-label-name">直接伙伴</view>
<view class="partner-label-number">{{userData.relation_count.one || 0}}</view>
</view>
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:2}})">
<view class="partner-label-name">间接伙伴</view>
<view class="partner-label-number">{{userData.relation_count.two || 0}}</view>
</view>
</view>
</view>
<!-- 企业工具 -->
<view class="userPartner" v-if="userData.is_company">
<view class="partner-title">
企业工具
</view>
<view class="tool-list">
<view class="tool-label" @click="$Router.push({name: 'goodsManagement'})">
<image class="tool-label-img" src="/static/user/userTool-00.png" mode=""></image>
<view class="tool-label-name">商品权证</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'couponsManagement'})">
<image class="tool-label-img" src="/static/user/userTool-01.png" mode=""></image>
<view class="tool-label-name">优惠券管理</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'instrumentSpread'})">
<image class="tool-label-img" src="/static/user/userTool-02.png" mode=""></image>
<view class="tool-label-name">营销推广码</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'instrumentBasics'})">
<image class="tool-label-img" src="/static/user/userTool-03.png" mode=""></image>
<view class="tool-label-name">基础信息</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'shopLists'})">
<image class="tool-label-img" src="/static/user/userTool-04.png" mode=""></image>
<view class="tool-label-name">部门门店</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'employeesList'})">
<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
<view class="tool-label-name">员工管理</view>
</view>
<!-- <view class="tool-label" @click="$Router.push({name: 'verificationIndex'})">
<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
<view class="tool-label-name">扫码核销</view>
</view> -->
</view>
</view>
<!-- 我的服务 -->
<view class="userPartner">
<view class="partner-title">
我的服务
</view>
<view class="tool-list">
<view class="tool-label" @click="custEject">
<image class="tool-label-img" src="/static/user/userServe-00.png" mode=""></image>
<view class="tool-label-name">专属客服</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'userCode'})">
<image class="tool-label-img" src="/static/user/userServe-01.png" mode=""></image>
<view class="tool-label-name">邀请好友</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'userHelp'})">
<image class="tool-label-img" src="/static/user/userServe-02.png" mode=""></image>
<view class="tool-label-name">帮助中心</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'userClause'})">
<image class="tool-label-img" src="/static/user/userServe-03.png" mode=""></image>
<view class="tool-label-name">服务条款</view>
</view>
</view>
</view>
</view>
</view>
</template>
@@ -247,14 +227,8 @@ export default {
customerShow: false, // 专属客服弹出
customerCode: '', // 专属客服二维码
},
// 滚动
coverTransform: 'translateY(0px)',
coverTransition: '0s',
startY: 0, // 落点
moving: false, //开启卡片
moveY: 0,
ScrollTop: false
};
shoeCardType : false
}
},
onShow(){
// 添加vip模块跳动样式
@@ -273,6 +247,15 @@ export default {
// 移除vip模块跳动样式
this.animatedShow = false
},
onPageScroll(e){
if(e.scrollTop <= 0 && !this.shoeCardType){
this.shoeCardType = true
return
}
if(e.scrollTop >= 1 && this.shoeCardType){
this.shoeCardType = false
}
},
methods: {
// 开通VIP
openVip(identityId){
@@ -343,17 +326,27 @@ export default {
// 复制邀请码
copyCenter(e) {
let copyNo = e
const result = h5Copy(copyNo)
if (result === false) {
uni.showToast({
title:'不支持',
})
} else {
uni.showToast({
title:'复制成功',
icon:'none'
})
}
uni.setClipboardData({
data: copyNo,
success() {
uni.showToast({
title: '邀请码已复制',
icon : 'none'
})
}
})
// const result = h5Copy(copyNo)
// if (result === false) {
// uni.showToast({
// title:'不支持',
// })
// } else {
// uni.showToast({
// title:'复制成功',
// icon:'none'
// })
// }
},
// 友情提示信息
showHelp(type) {
@@ -387,42 +380,6 @@ export default {
} else {
this.newnextShow = false
}
},
// 滑动部分
onScrolltoupper(){
this.ScrollTop = true
},
coverTouchstart(e) {
this.coverTransition = 'transform .1s linear'
this.startY = e.touches[0].clientY
},
coverTouchmove(e) {
this.moveY = e.touches[0].clientY
let moveDistance = this.moveY - this.startY
if (this.moving && moveDistance < 0){
this.coverTransform = `translateY(0px)`
this.moving = false
return
}else{
if (moveDistance > 0 && moveDistance <= 130) {
this.coverTransform = `translateY(${moveDistance}px)`
}
this.moving = moveDistance >= 130
}
},
coverTouchend() {
if (this.moving) {
this.runRefresh()
} else {
this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
this.coverTransform = 'translateY(0px)'
}
},
runRefresh() {
this.coverTransition = 'transform .1s linear'
this.coverTransform = 'translateY(140px)'
this.playState = true
this.$emit('refresh')
}
}
};
@@ -549,7 +506,7 @@ export default {
// 会员卡
.userVip {
background-image:linear-gradient(to right, #4721bd, #885efe, #5d39b9);
margin: 40rpx 40rpx 0;
margin: 20px 40rpx 0;
border-radius: 30rpx 30rpx 0 0;
border: 3rpx solid #b197ff;
color: #f6e9fa;
@@ -557,19 +514,19 @@ export default {
padding-bottom: 40rpx;
.userVip-top {
display: flex;
padding: 30rpx;
padding: 15px 30rpx;
.userVip-top-name {
font-size: 30rpx;
flex: 1;
line-height: 48rpx;
line-height: 24px;
}
.userVip-top-btn {
font-size: 26rpx;
background-color: #977ae8;
border-radius: 40rpx;
padding: 0 20rpx 0 25rpx;
height: 48rpx;
line-height: 48rpx;
height: 24px;
line-height: 24px;
display: flex;
.userVip-top-arrow {
width: 20rpx;
@@ -630,22 +587,22 @@ export default {
vertical-align: top;
margin-bottom: 15rpx;
}
// 255 + 140 + 80 + 40
}
}
}
}
// 会员信息
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-image: linear-gradient(to right, #7c52fc, #976dff);
height: 334px;
// user工具
.user-tool {
padding-top: 200rpx;
text-align: right;
line-height: 40px;
@extend .ios-top;
.user-tool-name {
flex: 1;
line-height: 40px;
@@ -760,9 +717,15 @@ export default {
}
// 按钮内容
.mian {
margin-top: -150px;
position: relative;
z-index: 1;
margin-top: 184px;
padding: 15px 30rpx 5px;
background: #F5F5F5;
transition: margin .6s;
&.shoeCard{
margin-top: 320px;
}
// 我的资产模块
.userAssets {
margin-bottom: 15px;