jiuyiUniapp/shop/pages/profile/profile.vue

970 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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跳到40h5反而好很多下拉的时候会有掉帧的感觉
* 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>