970 lines
26 KiB
Vue
970 lines
26 KiB
Vue
<template>
|
||
<view class="user">
|
||
<!--头部-->
|
||
<view class="user-section" :class="'bg-' + themeColor.name">
|
||
<image class="bg" :src="userBg"></image>
|
||
<!--用户信息-->
|
||
<view class="user-info-box">
|
||
<view class="portrait-box" @tap="navTo(userInfo ? '/pages/set/set' : 'login')">
|
||
<image class="portrait" :src="userInfo.image || headImg"></image>
|
||
<text class="username">
|
||
{{
|
||
userInfo.nickname || userInfo.mobile ||
|
||
userInfo.relename ||
|
||
'登录/注册'
|
||
}}
|
||
</text>
|
||
|
||
</view>
|
||
<view class="text" v-if="userInfo.isMobileVerification=='0'">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn" :class="'bg-' + themeColor.name">
|
||
<text>绑定手机号</text>
|
||
</button>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<button class="btn" :class="'bg-' + themeColor.name" @click="goBindPhone()">
|
||
<text>绑定手机号</text>
|
||
</button>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
<!--vip信息-->
|
||
<view class="vip-card-box">
|
||
<view class="b-btn" @tap="navTo('/pages/user/account/level')">
|
||
{{ userInfo.customerLevel | filterMemberLevel }}
|
||
</view>
|
||
<view class="tit">
|
||
<i class="iconfont iconzuanshi" />
|
||
{{appName}}尊享会员
|
||
</view>
|
||
<text class="e-m">{{appName}} 版权所有</text>
|
||
</view>
|
||
</view>
|
||
<!-- 个人中心 内容区-->
|
||
<view class="cover-container" :style="[
|
||
{
|
||
transform: coverTransform,
|
||
transition: coverTransition
|
||
}
|
||
]"
|
||
@touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
|
||
<image class="arc" :src="arc"></image>
|
||
<!--余额 优惠券 积分信息-->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconqianbao" :iconColor="themeColor.color" @eventClick="navTo('/pages/user/account/account')"
|
||
title="我的账户"></list-cell>
|
||
<view class="tj-sction">
|
||
<view class="tj-item" v-for="item in amountList" :key="item.title" @tap="navTo(item.url)">
|
||
<text class="num" :class="item.value > 0 ? 'text-'+themeColor.name : ''">
|
||
{{ item.value }}
|
||
</text>
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 我的订单 -->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconicon1" :iconColor="themeColor.color" @eventClick="
|
||
navTo(`/pages/order/order?state=-1`)
|
||
"
|
||
title="全部订单"></list-cell>
|
||
<view class="order-section">
|
||
<view class="order-item" v-for="item in orderSectionList" :key="item.title" @tap="navTo(item.url)" hover-class="common-hover"
|
||
:hover-stay-time="50">
|
||
<i class="iconfont" :class="[item.icon, 'text-'+themeColor.name]" />
|
||
<text>{{ item.title }}</text>
|
||
<rf-badge v-if="item.num > 0" type="error" size="small" class="badge" :text="item.num"></rf-badge>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<ad v-if="adOn" unit-id="adunit-2360481bbd1bd497" ad-type="video" ad-theme="white"></ad>
|
||
|
||
<!-- #endif -->
|
||
<!--推广中心-->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconqianbao" :iconColor="themeColor.color" @eventClick="navTo('/pages/user/fenxiao/fenxiao')"
|
||
title="推广中心"></list-cell>
|
||
<view class="tj-sction">
|
||
<view class="tj-item" @tap="navTo('/pages/user/fenxiao/list')">
|
||
<text class="num" :class="orderStatics.commissonMoney >= 0 ? 'text-'+themeColor.name : ''">
|
||
{{ orderStatics.commissonMoney || '0'}}
|
||
</text>
|
||
<text>累加佣金</text>
|
||
</view>
|
||
<view class="tj-item" @tap="navTo('/pages/user/fenxiao/fenxiao')">
|
||
<text class="num" :class="userInfo.commission > 0 ? 'text-'+themeColor.name : ''">
|
||
{{ userInfo.commission || '0'}}
|
||
</text>
|
||
<text>当前佣金</text>
|
||
</view>
|
||
<view class="tj-item" @tap="navTo('/pages/user/fenxiao/withDraw?state=-1')">
|
||
<text class="num" :class="orderStatics.withdrawMoney >= 0 ? 'text-'+themeColor.name : ''">
|
||
{{ orderStatics.withdrawMoney || '0'}}
|
||
</text>
|
||
<text>已提现佣金</text>
|
||
</view>
|
||
<view class="tj-item" >
|
||
<button class="share-btn" open-type="share" @tap="share" >
|
||
<view class="img">
|
||
<text class="iconfont iconyishouhuo" :class="[ 'text-'+themeColor.name]"></text>
|
||
</view>
|
||
<view class="text">邀请好友</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 积分订单 -->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconicon1" :iconColor="themeColor.color" @eventClick="
|
||
navTo(`/pages/order/pointOrder?state=-1`)
|
||
"
|
||
title="积分订单"></list-cell>
|
||
<view class="order-section">
|
||
<view class="order-item" v-for="item in orderPointSectionList" :key="item.title" @tap="navTo(item.url)"
|
||
hover-class="common-hover" :hover-stay-time="50">
|
||
<i class="iconfont" :class="[item.icon, 'text-'+themeColor.name]" />
|
||
<text>{{ item.title }}</text>
|
||
<rf-badge v-if="item.num > 0" type="error" size="small" class="badge" :text="item.num"></rf-badge>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 我的运动 -->
|
||
<!--#ifdef MP-WEIXIN-->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconicon1" :iconColor="themeColor.color" @eventClick="
|
||
navTo(`/pages/user/stepData`)
|
||
"
|
||
title="我的运动"></list-cell>
|
||
<view class="order-section">
|
||
<view class="order-item" v-for="item in stepRunSectionList" :key="item.title" @tap="navTo(item.url)" hover-class="common-hover"
|
||
:hover-stay-time="50">
|
||
<i class="iconfont" :class="[item.icon, 'text-'+themeColor.name]" />
|
||
<text>{{ item.title }}</text>
|
||
<rf-badge type="error" size="small" class="badge" :text="item.num"></rf-badge>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- 浏览历史 -->
|
||
<view class="history-section">
|
||
<list-cell icon="iconzuji" :iconColor="themeColor.color" @eventClick="navTo('/pages/user/footprint/footprint')"
|
||
title="我的足迹"></list-cell>
|
||
<view v-if="hasLogin">
|
||
<scroll-view scroll-x class="h-list-history" v-if="footPrintList.length > 0">
|
||
<view class="h-item-history" v-for="item in footPrintList" :key="item.id" @tap.stop="navToProduct(item.marketing_type, item.sku.spuId)">
|
||
<image :src="item.sku.url" class="h-item-img" :preview="false" mode="aspectFill"></image>
|
||
<image v-if="item.marketing_type" class="tag" :src="item.marketing_type | marketingTypeTag" mode="aspectFill"></image>
|
||
<view class="h-item-text">
|
||
<text class="in2line">{{ item.sku.name }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="no-foot-print" v-else-if="footPrintList.length === 0" @tap="navTo('/pages/product/list')">
|
||
<i class="iconfont iconshare no-foot-print-icon" :class="'text-'+themeColor.name" />
|
||
先去浏览一些吧~
|
||
</view>
|
||
</view>
|
||
<view class="no-foot-print" v-else @tap="navTo('/pages/user/footprint/footprint')">
|
||
<i class="iconfont iconmima no-foot-print-icon" :class="'text-'+themeColor.name" />
|
||
登录后查看
|
||
</view>
|
||
</view>
|
||
<!--我的服务-->
|
||
<view class="promotion-center">
|
||
<list-cell icon="iconfuwu" :iconColor="themeColor.color" @eventClick="navTo('/pages/set/set')" title="我的服务"></list-cell>
|
||
<view class="tj-sction">
|
||
<!-- 分类列表 -->
|
||
<view class="category-list">
|
||
<view class="category" v-for="(item, index) in settingList" :key="index" :style="{display: settingItemShowFilter(item.title)}"
|
||
@tap.stop="navTo(item.url)">
|
||
<view v-if="item.title !== '分享'">
|
||
<view class="img">
|
||
<text class="iconfont" :class="[item.icon, 'text-'+themeColor.name]"></text>
|
||
</view>
|
||
<view class="text">{{ item.title }}</view>
|
||
</view>
|
||
<button class="share-btn" open-type="share" @tap="share" v-else>
|
||
<view class="img">
|
||
<text class="iconfont" :class="[item.icon, 'text-'+themeColor.name]"></text>
|
||
</view>
|
||
<view class="text">{{ item.title }}</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/**
|
||
* @des 个人中心
|
||
*
|
||
* @author 237524947@qq.com
|
||
* @date 2020-01-10 11:41
|
||
* @copyright 2019
|
||
*/
|
||
import {
|
||
footPrintList,
|
||
memberInfo,
|
||
notifyUnRreadCount
|
||
} from '@/api/userInfo';
|
||
import {
|
||
orderCountStatisic
|
||
} from '@/api/product';
|
||
import {
|
||
getOpenId,
|
||
mpWechatLogin,
|
||
wechatH5Login,
|
||
thirdPartyWechatOpenPlatform,
|
||
thirdPartyApple,
|
||
bindingAppletPhone
|
||
} from '@/api/login';
|
||
import listCell from '@/components/rf-list-cell';
|
||
import {
|
||
mapMutations
|
||
} from 'vuex';
|
||
import rfBadge from '@/components/rf-badge/rf-badge';
|
||
import $mAssetsPath from '@/config/assets.config';
|
||
let startY = 0,
|
||
moveY = 0,
|
||
pageAtTop = true;
|
||
export default {
|
||
components: {
|
||
listCell,
|
||
rfBadge
|
||
},
|
||
data() {
|
||
return {
|
||
settingList: this.$mConstDataConfig.settingList,
|
||
orderSectionList: this.$mConstDataConfig.orderSectionList,
|
||
orderPointSectionList: this.$mConstDataConfig.orderPointSectionList,
|
||
stepRunSectionList: this.$mConstDataConfig.stepRunSectionList,
|
||
amountList: this.$mConstDataConfig.amountList,
|
||
orderStatics: {},
|
||
adOn: this.adOn,
|
||
isOpenLiveStreaming: this.$mSettingConfig.isOpenLiveStreaming,
|
||
headImg: this.$mAssetsPath.headImg,
|
||
vipCardBg: this.$mAssetsPath.vipCardBg,
|
||
arc: this.$mAssetsPath.arc,
|
||
userBg: this.$mAssetsPath.userBg,
|
||
coverTransform: 'translateY(0px)',
|
||
coverTransition: '0s',
|
||
moving: false,
|
||
userInfo: {
|
||
// 用户信息
|
||
promoter: null // 分销商信息
|
||
},
|
||
footPrintList: [], // 足迹列表
|
||
loading: true,
|
||
appName: this.$mSettingConfig.appName,
|
||
hasLogin: false
|
||
};
|
||
},
|
||
filters: {
|
||
filterMemberLevel(val) {
|
||
if (!val) return '普通用户';
|
||
return val.name;
|
||
},
|
||
marketingTypeTag(marketingType) {
|
||
let tag;
|
||
switch (marketingType) {
|
||
case 'discount':
|
||
tag = $mAssetsPath.discountTag;
|
||
break;
|
||
case 'bargain':
|
||
tag = $mAssetsPath.bargainTag;
|
||
break;
|
||
case 'group_buy':
|
||
tag = $mAssetsPath.groupTag;
|
||
break;
|
||
case 'wholesale':
|
||
tag = $mAssetsPath.wholesaleTag;
|
||
break;
|
||
}
|
||
return tag;
|
||
}
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
|
||
this.initData();
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh();
|
||
}, 250);
|
||
},
|
||
computed: {
|
||
// 判断推广中心是否显示 当有分销商信息的时候显示
|
||
settingItemShowFilter() {
|
||
return function(val) {
|
||
let type = 'block';
|
||
if (val === '推广中心' && this.userInfo.promoter) {
|
||
type = 'none';
|
||
} else if (val === '直播' && !this.isOpenLiveStreaming) {
|
||
type = 'none';
|
||
}
|
||
return type;
|
||
};
|
||
}
|
||
},
|
||
// 小程序分享
|
||
|
||
onShareAppMessage() {
|
||
if (!this.hasLogin) {
|
||
let userInfo = uni.getStorageSync('userInfo')
|
||
return {
|
||
title: `欢迎来到${this.appName}`,
|
||
path: '/pages/index/index?recommondCode=' + userInfo.selfRecommendCode
|
||
};
|
||
} else {
|
||
return {
|
||
title: `欢迎来到${this.appName}`,
|
||
path: '/pages/index/index'
|
||
};
|
||
}
|
||
|
||
},
|
||
|
||
async onShow() {
|
||
this.hasLogin = this.$mStore.getters.hasLogin;
|
||
// 初始化数据
|
||
|
||
},
|
||
async onLoad(option) {
|
||
this.hasLogin = this.$mStore.getters.hasLogin;
|
||
if (option && option.recommondCode) {
|
||
uni.setStorageSync('recommondCode', option.recommondCode)
|
||
}
|
||
/* #ifdef H5 */
|
||
if (this.$mPayment.isWechat() && !this.hasLogin) {
|
||
let code = this.getCode()
|
||
|
||
if (option.code !== null && option.code !== "" && option.code !== undefined) {
|
||
|
||
this.getOpenidAndUserinfo(option.code)
|
||
}
|
||
}
|
||
/* #endif */
|
||
await this.initData();
|
||
|
||
},
|
||
// #ifndef MP
|
||
onNavigationBarButtonTap(e) {
|
||
const index = e.index;
|
||
if (index === 0) {
|
||
this.navTo('/pages/set/set');
|
||
} else if (index === 1) {
|
||
// #ifdef APP-PLUS
|
||
// eslint-disable-next-line
|
||
const pages = getCurrentPages();
|
||
const page = pages[pages.length - 1];
|
||
const currentWebview = page.$getAppWebview();
|
||
currentWebview.hideTitleNViewButtonRedDot({
|
||
index
|
||
});
|
||
// #endif
|
||
this.$mRouter.push({
|
||
route: '/pages/notify/notify'
|
||
});
|
||
}
|
||
},
|
||
// #endif
|
||
methods: {
|
||
...mapMutations(['setNotifyNum', 'setCartNum']),
|
||
// 分享
|
||
share() {
|
||
let userInfo = uni.getStorageSync('userInfo')
|
||
const url = `${this.$mConfig.hostUrl}/pages/index/index?recommondCode=${userInfo.selfRecommendCode}`;
|
||
// #ifdef H5
|
||
if (this.$mPayment.isWechat() && userInfo) {
|
||
this.$mHelper.handleWxH5Share('快戳我啊！让您享受白菜价网购的快感', '先领优惠券再下单享受折上折,各种大额优惠券让你领到手软呦！快戳我！快戳我！',
|
||
`https://mojin.51wangshi.com/pages/index/index?recommondCode=${userInfo.selfRecommendCode}`, userInfo.image);
|
||
// title, desc, link, imgUrl
|
||
} else {
|
||
this.$mHelper.h5Copy(url);
|
||
}
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
const shareImg = `${this.$mSettingConfig.appLogo}`;
|
||
this.$mHelper.handleAppShare(url, this.appName, `欢迎来到${this.appName}`, shareImg);
|
||
// #endif
|
||
},
|
||
|
||
...mapMutations(['login']),
|
||
// 数据初始化
|
||
async initData() {
|
||
|
||
uni.setTabBarStyle({
|
||
selectedColor: this.themeColor.color,
|
||
borderStyle: 'white'
|
||
});
|
||
this.themeColor.tabList && this.themeColor.tabList.forEach((selectedIconPath, index) => {
|
||
uni.setTabBarItem({
|
||
index,
|
||
selectedIconPath
|
||
});
|
||
});
|
||
if (this.hasLogin) {
|
||
this.stepRunSectionList[0].num = uni.getStorageSync('todayStep') || 0;
|
||
this.stepRunSectionList[1].num = uni.getStorageSync('todayRank') || '99+';
|
||
await this.getMemberInfo();
|
||
this.loading = false;
|
||
await this.orderCountStatisic();
|
||
|
||
await this.initNotifyNum();
|
||
// 获取足迹列表
|
||
await this.getFootPrintList();
|
||
|
||
} else {
|
||
this.loading = false;
|
||
|
||
|
||
this.resetSectionData();
|
||
}
|
||
},
|
||
// 获取code
|
||
// 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
|
||
getCode() {
|
||
var appid = `${this.$mConfig.weixinAppId}`;
|
||
var hostUrl = `${this.$mConfig.hostUrl}`;
|
||
|
||
// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
|
||
let code = this.getUrlCode('code')
|
||
|
||
|
||
if (code === null || code === '') {
|
||
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
|
||
encodeURIComponent('https://mojin.51wangshi.com') +
|
||
'&response_type=code&scope=snsapi_userinfo&state=1234#wechat_redirect'
|
||
// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
|
||
// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
|
||
// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
|
||
}
|
||
|
||
},
|
||
|
||
getUrlCode(name) {
|
||
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
|
||
.replace(/\+/g, '%20')) || null
|
||
},
|
||
|
||
getOpenidAndUserinfo(code) {
|
||
var storeId = `${this.$mConfig.storeId}`;
|
||
this.$http.get(`${wechatH5Login}`, {
|
||
code: code,
|
||
recommondCode: uni.getStorageSync('recommondCode'),
|
||
storeId: storeId
|
||
}).then(r => {
|
||
this.$mStore.commit('login', r);
|
||
|
||
this.$mRouter.reLaunch({
|
||
route: '/pages/profile/profile'
|
||
});
|
||
});
|
||
},
|
||
|
||
// 获取用户信息
|
||
async getMemberInfo() {
|
||
await this.$http
|
||
.get(memberInfo)
|
||
.then(async r => {
|
||
this.loading = false;
|
||
console.log(r)
|
||
this.userInfo = r;
|
||
if(r && (r.nickname || r.mobile)){
|
||
|
||
}else{
|
||
this.$mHelper.backToLogin();
|
||
}
|
||
await this.setSectionData(r);
|
||
})
|
||
.catch(() => {
|
||
// this.hasLogin = false;
|
||
this.userInfo = {};
|
||
this.resetSectionData();
|
||
this.loading = false;
|
||
});
|
||
console.log(this.userInfo)
|
||
},
|
||
// 设置未读消息个数
|
||
async initNotifyNum() {
|
||
await this.$http.get(notifyUnRreadCount).then(r => {
|
||
this.setNotifyNum(r);
|
||
});
|
||
},
|
||
getPhoneNumber: function(e) {
|
||
|
||
this.btnLoading = false;
|
||
// 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
|
||
if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
|
||
uni.showLoading({
|
||
title: "绑定中"
|
||
});
|
||
this.$http
|
||
.post(`${bindingAppletPhone}`, {
|
||
sessionKey: uni.getStorageSync('sessionKey'),
|
||
encryptedData: e.mp.detail.encryptedData,
|
||
iv: e.mp.detail.iv
|
||
})
|
||
.then(async r => {
|
||
this.$mHelper.toast('绑定成功', 1.5 * 1000);
|
||
}).catch(() => {
|
||
this.btnLoading = false;
|
||
});
|
||
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: "已拒绝授权",
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
goBindPhone() {
|
||
this.$yrouter.push({
|
||
path: "/pages/user/BindingPhone/index",
|
||
});
|
||
},
|
||
// 清空个人中心的各模块状态
|
||
resetSectionData() {
|
||
this.userInfo = {};
|
||
uni.removeTabBarBadge({
|
||
index: this.$mConstDataConfig.cartIndex
|
||
});
|
||
uni.removeTabBarBadge({
|
||
index: this.$mConstDataConfig.notifyIndex
|
||
});
|
||
this.amountList[0].value = 0;
|
||
this.amountList[1].value = 0;
|
||
this.amountList[2].value = 0;
|
||
this.amountList[3].value = 0;
|
||
this.amountList[4].value = 0;
|
||
this.orderSectionList[0].num = 0;
|
||
this.orderSectionList[1].num = 0;
|
||
this.orderSectionList[2].num = 0;
|
||
this.orderSectionList[3].num = 0;
|
||
this.orderSectionList[4].num = 0;
|
||
},
|
||
// 给个人中心的各模块赋值
|
||
setSectionData(data) {
|
||
this.amountList[2].value = data.customerPoint || 0;
|
||
// 更新userInfo缓存
|
||
uni.setStorageSync('userInfo', data);
|
||
},
|
||
// 订单统计
|
||
async orderCountStatisic() {
|
||
await this.$http.get(`${orderCountStatisic}`).then(r => {
|
||
this.orderStatics = r;
|
||
this.setCartNum(r.cartNum);
|
||
this.amountList[1].value = r.couponNum || 0;
|
||
this.amountList[4].value = r.attendStoreNum || 0;
|
||
this.amountList[3].value = r.attendGoodsNum || 0;
|
||
this.orderSectionList[0].num = r.toPayCount;
|
||
this.orderSectionList[1].num = r.toDeliverCount;
|
||
this.orderSectionList[2].num = r.toReceiptCount;
|
||
this.orderSectionList[3].num = r.toEvaluateCount;
|
||
this.orderSectionList[4].num = r.backOrderCount;
|
||
this.amountList[0].value = r.blance || 0;
|
||
});
|
||
},
|
||
// 获取足迹列表
|
||
async getFootPrintList() {
|
||
await this.$http.get(`${footPrintList}`).then(r => {
|
||
this.footPrintList = r.list;
|
||
});
|
||
},
|
||
// 统一跳转接口,拦截未登录路由
|
||
navTo(route) {
|
||
|
||
if (!route) return;
|
||
if (route === '/pages/index/notice/notice') {
|
||
this.$mRouter.push({
|
||
route
|
||
});
|
||
} else if (!this.hasLogin) {
|
||
|
||
uni.removeStorageSync('backToPage');
|
||
this.$mRouter.push({
|
||
route: '/pages/public/logintype'
|
||
});
|
||
} else {
|
||
this.$mRouter.push({
|
||
route
|
||
});
|
||
}
|
||
},
|
||
/**
|
||
* 会员卡下拉和回弹
|
||
* 1.关闭bounce避免ios端下拉冲突
|
||
* 2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
|
||
* transition设置0.1秒延迟，让css来过渡这段空窗期
|
||
* 3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
|
||
*/
|
||
coverTouchstart(e) {
|
||
if (pageAtTop === false) {
|
||
return;
|
||
}
|
||
this.coverTransition = 'transform .1s linear';
|
||
startY = e.touches[0].clientY;
|
||
},
|
||
coverTouchmove(e) {
|
||
moveY = e.touches[0].clientY;
|
||
let moveDistance = moveY - startY;
|
||
if (moveDistance < 0) {
|
||
this.moving = false;
|
||
return;
|
||
}
|
||
this.moving = true;
|
||
if (moveDistance >= 80 && moveDistance < 100) {
|
||
moveDistance = 80;
|
||
}
|
||
if (moveDistance > 0 && moveDistance <= 80) {
|
||
this.coverTransform = `translateY(${moveDistance}px)`;
|
||
}
|
||
},
|
||
coverTouchend() {
|
||
if (this.moving === false) {
|
||
return;
|
||
}
|
||
this.moving = false;
|
||
this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
|
||
this.coverTransform = 'translateY(0px)';
|
||
},
|
||
// 跳转至商品详情
|
||
navToProduct(type, id) {
|
||
let route = `/pages/product/product?id=${id}`;
|
||
switch (type) {
|
||
case 'discount':
|
||
route = `/pages/marketing/discount/product?id=${id}`;
|
||
break;
|
||
case 'bargain':
|
||
route = `/pages/marketing/bargain/product?id=${id}`;
|
||
break;
|
||
case 'group_buy':
|
||
route = `/pages/marketing/group/product?id=${id}`;
|
||
break;
|
||
case 'wholesale':
|
||
route = `/pages/marketing/wholesale/product?id=${id}`;
|
||
break;
|
||
}
|
||
this.$mRouter.push({
|
||
route
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: $page-color-base;
|
||
}
|
||
|
||
.user {
|
||
.user-section {
|
||
height: 520upx;
|
||
padding: 100upx 30upx 0;
|
||
position: relative;
|
||
|
||
.bg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 60vw;
|
||
opacity: 0.84;
|
||
}
|
||
|
||
.user-info-box {
|
||
height: 180upx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
justify-content: space-between;
|
||
|
||
.portrait-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.portrait {
|
||
width: 130upx;
|
||
height: 130upx;
|
||
border: 5upx solid #fff;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.username {
|
||
font-size: $font-lg + 6upx;
|
||
color: $color-white;
|
||
margin-left: 20upx;
|
||
}
|
||
|
||
button {
|
||
background-color: transparent;
|
||
font-size: $font-lg + 6upx;
|
||
color: $font-color-dark;
|
||
border: none;
|
||
}
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vip-card-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #f7d680;
|
||
height: 240upx;
|
||
background: url('/static/vip-card.png');
|
||
background-size: 100% 100%;
|
||
border-radius: 16upx 16upx 0 0;
|
||
overflow: hidden;
|
||
position: relative;
|
||
padding: 20upx 24upx;
|
||
|
||
.b-btn {
|
||
position: absolute;
|
||
right: 24upx;
|
||
top: 24upx;
|
||
width: 132upx;
|
||
height: 40upx;
|
||
text-align: center;
|
||
line-height: 40upx;
|
||
font-size: 22upx;
|
||
color: #36343c;
|
||
border-radius: 20px;
|
||
background: linear-gradient(to left, #f9e6af, #ffd465);
|
||
z-index: 1;
|
||
}
|
||
|
||
.tit {
|
||
font-size: $font-base + 2upx;
|
||
color: #f7d680;
|
||
margin-bottom: 28upx;
|
||
|
||
.iconfont {
|
||
color: #f6e5a3;
|
||
display: inline-block;
|
||
margin-right: 16upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cover-container {
|
||
margin-top: -150upx;
|
||
padding: 0 30upx 20upx;
|
||
position: relative;
|
||
background-color: $page-color-base;
|
||
|
||
.arc {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -34upx;
|
||
width: 100%;
|
||
height: 36upx;
|
||
}
|
||
|
||
.promotion-center {
|
||
background: #fff;
|
||
margin-bottom: 20upx;
|
||
|
||
/*分类列表*/
|
||
.category-list {
|
||
width: 100%;
|
||
padding: 0 0 30upx 0;
|
||
border-bottom: solid 2upx #f6f6f6;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.category {
|
||
width: 33.3%;
|
||
margin-top: 50upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
|
||
.img {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.iconfont {
|
||
font-size: $font-lg + 24upx;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 24upx;
|
||
color: #3c3c3c;
|
||
}
|
||
|
||
.share-btn {
|
||
height: 142upx;
|
||
text-align: left;
|
||
background: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.share-btn:after {
|
||
border: none;
|
||
border-radius: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tj-sction {
|
||
@extend %section;
|
||
display: flex;
|
||
|
||
.tj-item {
|
||
@extend %flex-center;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
margin: 30upx 0;
|
||
font-size: $font-sm;
|
||
color: #75787d;
|
||
/*border-right: 2upx solid rgba(0, 0, 0, 0.2);*/
|
||
}
|
||
|
||
/*.tj-item:last-child {*/
|
||
/*border-right: none;*/
|
||
/*}*/
|
||
.num {
|
||
font-size: $font-base;
|
||
}
|
||
|
||
.red {
|
||
color: $base-color;
|
||
}
|
||
}
|
||
|
||
.order-section {
|
||
@extend %section;
|
||
padding: 28upx 0;
|
||
|
||
.order-item {
|
||
@extend %flex-center;
|
||
width: 120upx;
|
||
height: 120upx;
|
||
border-radius: 10upx;
|
||
font-size: $font-sm;
|
||
color: $font-color-dark;
|
||
position: relative;
|
||
}
|
||
|
||
.badge {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 4upx;
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 48upx;
|
||
}
|
||
|
||
.icon-shouhoutuikuan {
|
||
font-size: 44upx;
|
||
}
|
||
}
|
||
|
||
.history-section {
|
||
background: #fff;
|
||
margin-bottom: $spacing-sm;
|
||
|
||
.h-list-history {
|
||
margin: 0;
|
||
border-radius: 10upx;
|
||
white-space: nowrap;
|
||
background-color: $page-color-base;
|
||
|
||
.h-item-history {
|
||
background-color: $color-white;
|
||
display: inline-block;
|
||
font-size: $font-sm;
|
||
color: $font-color-base;
|
||
width: 180upx;
|
||
margin: $spacing-sm $spacing-sm 0 0;
|
||
border-radius: 10upx;
|
||
position: relative;
|
||
top: 0;
|
||
overflow: hidden;
|
||
|
||
.h-item-img {
|
||
width: 180%;
|
||
height: 200upx;
|
||
border-top-left-radius: 12upx;
|
||
border-top-right-radius: 12upx;
|
||
border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
|
||
}
|
||
|
||
.tag {
|
||
position: absolute;
|
||
border-top-left-radius: 12upx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 60upx;
|
||
height: 60upx;
|
||
}
|
||
|
||
.h-item-text {
|
||
font-size: $font-sm;
|
||
margin: $spacing-sm 4upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-foot-print {
|
||
text-align: center;
|
||
padding: 48upx 0;
|
||
|
||
.no-foot-print-icon {
|
||
font-size: $font-lg + 2upx;
|
||
margin-right: 10upx;
|
||
}
|
||
}
|
||
|
||
.share-btn {
|
||
height: 102upx;
|
||
text-align: left;
|
||
background: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.share-btn:after {
|
||
border: none;
|
||
border-radius: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
%flex-center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
%section {
|
||
justify-content: space-around;
|
||
display: flex;
|
||
align-content: center;
|
||
background: #fff;
|
||
border-radius: 10upx;
|
||
}
|
||
</style>
|