Skip to content

G
gxpt_wechat
Commit 64708554 by zhangzhen
Options

细节优化

parent f11c0c9f
Showing with 310 additions and 180 deletions
setting/equityDetail/equityDetail.vue
......@@ -4,23 +4,22 @@
bgColor="transparent"></f-navbar>
<view class="">
<swiper :indicator-dots="false" :circular="true" previous-margin="24px" next-margin="24px" :autoplay="false"
<swiper class="swiper-box" :indicator-dots="false" :circular="true" previous-margin="8px" next-margin="30px" :autoplay="false"
:duration="1000" @change="onChange">
<swiper-item>
<view class="swiper-item">
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>{{userInfo&&userInfo.consumerMember&&userInfo.consumerMember.isRights ==1 ?'已解锁':'未解锁'}}</text>
</view>
<view class="flex-row">
<view class="part-title">
<text class="text-title">会员折扣</text>
<text class="text-des">最低享9折</text>
<text class="text-des">预定房间和续时最低享9折优惠</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -32,15 +31,15 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>未解锁</text>
</view>
<view class="flex-row">
<view class="part-title">
<text class="text-title">专属周边（敬请期待）</text>
<text class="text-des">多种周边供你选择</text>
<text class="text-title">专属周边</text>
<text class="text-des">敬请期待</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -52,15 +51,15 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>{{userInfo&&userInfo.consumerMember&&userInfo.consumerMember.isRights ==1 ?'已解锁':'未解锁'}}</text>
</view>
<view class="flex-row">
<view class="part-title">
<text class="text-title">会员日</text>
<text class="text-des">会员日享半价</text>
<text class="text-des">会员日半价</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -72,15 +71,15 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>未解锁</text>
</view>
<view class="flex-row">
<view class="part-title">
<text class="text-title">活动报名（敬请期待）</text>
<text class="text-des">免费报名参与</text>
<text class="text-title">活动报名</text>
<text class="text-des">敬请期待</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -92,15 +91,15 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>{{userInfo&&userInfo.consumerMember&&userInfo.consumerMember.isRights ==1 ?'已解锁':'未解锁'}}</text>
</view>
<view class="flex-row">
<view class="part-title">
<text class="text-title">邀请有礼</text>
<text class="text-des">时长赠送和3%的返利</text>
<text class="text-des">推荐会员有返利</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -112,15 +111,15 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>未解锁</text>
</view>
<view class="flex-row">
<view class="part-title">
<text class="text-title">专属礼物（敬请期待）</text>
<text class="text-des">赠送会员优惠券</text>
<text class="text-title">专属礼物</text>
<text class="text-des">敬请期待</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -132,7 +131,7 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>{{userInfo&&userInfo.consumerMember&&userInfo.consumerMember.isRights ==1 ?'已解锁':'未解锁'}}</text>
</view>
<view class="flex-row">
<view class="part-title">
......@@ -140,7 +139,7 @@
<text class="text-des">一对一服务</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -152,15 +151,15 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>未解锁</text>
</view>
<view class="flex-row">
<view class="part-title">
<text class="text-title">商城优惠（敬请期待）</text>
<text class="text-des">享购物优惠</text>
<text class="text-title">商城优惠</text>
<text class="text-des">敬请期待</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -172,7 +171,7 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>{{userInfo&&userInfo.consumerMember&&userInfo.consumerMember.isRights ==1 ?'已解锁':'未解锁'}}</text>
</view>
<view class="flex-row">
<view class="part-title">
......@@ -180,7 +179,7 @@
<text class="text-des">享次卡月卡购买权</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -191,15 +190,15 @@
<image class="img-bg" :src="assetsPath+'/vip/equity_bg.png'" mode="widthFix"></image>
<view class="content">
<view class="title-icon">
<text>专属活动</text>
<text>{{userInfo&&userInfo.memberConfig&&userInfo.memberConfig.membershipLevel >= 3 ?'已解锁':'未解锁'}}</text>
</view>
<view class="flex-row">
<view class="part-title">
<text class="text-title">联营开店</text>
<text class="text-des">合作投资，资源共享</text>
<text class="text-des">合作投资资源共享</text>
</view>
<view class="img-icon">
<image src="../../static/logo_icon.png" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -234,37 +233,29 @@
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>预定房间和续时最低享9折优惠</text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">预定房间和续时最低享9折优惠(全国门店通用)</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>全国门店通用</text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>2</text>
</view>
<text class="circle-text">会员预定优惠(以实际支付金额为准)</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>购买零食、饮料、充电宝等合作公司的商品不享受折扣活动</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>铜角会员9.5折预定优惠</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>银角会员9.2折预定优惠</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>金角会员8.8折预定优惠</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>会员折扣力度以实际支付金额为准</text>
</view>
</view>
......@@ -287,30 +278,23 @@
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>赠送吉祥物</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>多种周边供你选择</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">多种周边供你选择</text>
</view>
<view class="part-text-lg">
<text>貔貅</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>算盘</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>把把壶</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>把把葫</text>
</view>
......@@ -334,22 +318,23 @@
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>每周二会员日享受全部预约半价活动</text>
<view class="flex-row margin-top">
<view class="circle">
<text>1</text>
</view>
<view class="flex-col">
<text class="circle-text">每周二会员日享受全部预约半价活动</text>
<text class="circle-red">(本活动不与其他活动同享)</text>
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>本活动不予其他活动同享</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg part-text-lg-2">
<text>预约房间的开始时间在周二内即可享受半价，允许订单跨日使用。</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>会员日半价在当日只可享受一次，过期作废</text>
<view class="part-text-lg part-text-lg-2">
<text>会员日半价在当日只可享受一次，过期作废。</text>
</view>
</view>
......@@ -372,12 +357,15 @@
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>免费报名参与</text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">免费报名参与</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg part-text-lg-2">
<text>在凑角举办的各种大型线上或线下活动和赛事时，报名参与的费用免除</text>
</view>
......@@ -401,24 +389,31 @@
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>推荐会员有返利</text>
<view class="share-tip-box flex-between">
<view class="flex-row-center">
<text>可获得</text>
<text class="text-red">3%</text>
<text>的返利</text>
</view>
<button class="cu-btn" open-type="share">分享好友</button>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>推荐人账号通过分享有礼活动推荐新用户成功注册小程序，推荐人即与新用户永久绑定</text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">推荐会员有返利</text>
</view>
<view class="part-text-lg part-text-lg-2">
<text>推荐人账号通过分享有礼活动推荐新用户成功注册小程序，推荐人即与新用户永久绑定</text>
</view>
<view class="part-text-lg part-text-lg-2">
<text>推荐人账号开通了权益会员，被推荐的用户成为任意会员(充值会员、权益会员)后，所产生的任意现金或余额消费均可为推荐会员产生3%的返利。</text>
</view>
<view class="part-text-lg part-text-lg-2">
<text>推荐人账号权益会员存续期间，获得的返利进入推荐人账号的权益金账户内，权益金账户内的权益金可提现。</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>推荐人账号开通了权益会员，被推荐的用户成为任意会员（充值会员、权益会员）后，所产生的任意现金或余额消费均可为推荐会员产生3%的返利。</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>推荐人账号权益会员存续期间，获得的返利进入推荐人账号的权益金账户内，权益金内的权益金可提现。</text>
</view>
</view>
<view v-if="index ===5" class="flex-col">
......@@ -439,21 +434,20 @@
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>赠送会员优惠券</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">赠送会员优惠券</text>
</view>
<view class="part-text-lg">
<text>成为铜角会员可领取2小时</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>成为银角会员可领取3小时</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>成为金角会员可领取4小时</text>
</view>
......@@ -477,28 +471,18 @@
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>一对一服务</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>您可享受7*24小时专属客服服务</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>随时联系客服处理问题</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>随时向客服咨询相关活动</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>优先处理会员建议和反馈</text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">一对一服务</text>
</view>
<view class="part-text-lg part-text-lg-2">
<text>您可享受7*24小时专属客服服务，随时联系客服处理问题，随时向客服咨询相关活动，优先处理会员建议和反馈</text>
</view>
</view>
<view v-if="index ===7" class="flex-col">
......@@ -518,26 +502,22 @@
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>享购物优惠</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">享购物优惠</text>
</view>
<view class="part-text-lg">
<text>特定商品购买权</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>特定物品购买折扣</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>特定物品购买获双倍积分</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<view class="part-text-lg">
<text>积分兑换商品折扣</text>
</view>
......@@ -560,21 +540,25 @@
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>享次卡月卡购买权</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>次卡有效期一年，随时使用随时享</text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">享次卡购买权</text>
</view>
<view class="part-text-lg-2">
<text class=""><text class="text-bold">次卡 </text>有效期一年，随时使用随时享</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>月卡：30天每日4小时免费使用时长，当日不用过期作废。</text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>2</text>
</view>
<text class="circle-text">享月卡购买权</text>
</view>
<view class="part-text-lg-2">
<text class=""><text class="text-bold">月卡 </text>30天每日4小时免费使用时长，当日不用过期作废。</text>
</view>
</view>
<view v-if="index ===9" class="flex-col">
......@@ -596,20 +580,32 @@
</view>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>合作投资，资源共享</text>
</view>
<view class="flex-row text-lg">
<text class="cuIcon-title"></text>
<text>金角会员可申请与凑角合作投资凑角筹备计划中的新店。</text>
<view class="flex-row-center margin-top">
<view class="circle">
<text>1</text>
</view>
<text class="circle-text">合作投资，资源共享</text>
</view>
<view class="part-text-lg-2">
<text class=""><text class="text-bold">金角会员 </text>可申请与凑角合作投资凑角筹备计划中的新店。</text>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="banner-box">
<swiper class="banner-swiper" :indicator-dots="true" :circular="true" :autoplay="true"
:duration="1000" :interval="3000" indicator-active-color="#FFD600" indicator-color="rgba(0,0,0,0.5)">
<swiper-item v-for="(item,k) in bannerList" :key="k">
<view class="banner-item" @tap="onNavTo(item)">
<image class="img-bg" :src="item.imgUrl" mode="scaleToFill"></image>
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
......@@ -626,13 +622,46 @@
return {
assetsPath: config.assetsPath,
title: '权益详情',
index: 0
index: 0,
bannerList:[
{
imgUrl:config.assetsPath+'/banner/1.png',
routePath:''
},
{
imgUrl:config.assetsPath+'/banner/2.png',
routePath:''
},
{
imgUrl:config.assetsPath+'/banner/3.png',
routePath:'/pages/storeList/storeList'
},
],
userInfo:''
}
},
onLoad() {
if(uni.getStorageSync('userInfo')){
this.userInfo = uni.getStorageSync('userInfo');
}
},
onShareAppMessage() {
return {
title: "邀请扫码注册",
path: `/pages/my/myInfo?uid=${this.userInfo.id}`
}
},
methods: {
onChange(e) {
console.log(e.target.current, 99999)
this.index = e.target.current;
},
onNavTo(val){
if(val.routePath){
uni.navigateTo({
url:val.routePath
})
}
}
}
}
......@@ -649,10 +678,12 @@
flex-direction: column;
width: 100vw;
height: 100vh;
.swiper-box{
height: 102px;
}
.swiper-item {
position: relative;
margin: 0 6px;
margin: 0 8px;
.img-bg {
display: block;
......@@ -693,7 +724,7 @@
display: flex;
flex-direction: column;
width: 60%;
height: 80%;
height: 100%;
justify-content: center;
padding-left: 24upx;
......@@ -708,8 +739,8 @@
.text-des {
margin-top: 12upx;
font-weight: normal;
font-size: 28upx;
font-weight: 400;
font-size: 26upx;
color: #333333;
}
}
......@@ -794,11 +825,11 @@
justify-content: center;
position: relative;
margin: 0 20upx;
min-width: 360upx;
.text {
position: relative;
font-weight: normal;
font-size: 48rpx;
font-weight: 400;
font-size: 46rpx;
color: #000000;
background: linear-gradient(-90deg, #FF7800 0%, #FF0000 100%);
-webkit-background-clip: text;
......@@ -825,4 +856,102 @@
}
}
}
.banner-box{
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 24upx;
.banner-swiper{
height: 100px;
width: 100%;
.banner-item{
width: 700upx;
height: 100%;
margin: 0 auto;
.img-bg{
width: 100%;
height: 100%;
}
}
}
}
.circle{
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
background: #F7DFAA;
border-radius: 50%;
margin-right: 16upx;
text{
font-weight: bold;
font-size: 26upx;
color: #D27E1F;
font-style: italic;
}
}
.circle-text{
font-weight: 400;
font-size: 26upx;
color: #333333;
line-height: 35upx;
}
.circle-red{
font-weight: 400;
font-size: 26upx;
color: #F34141;
line-height: 35upx;
}
.part-text-lg{
margin: 20upx 0 0 50upx;
font-weight: 600;
font-size: 28upx;
color: #333333;
}
.part-text-lg-2{
margin: 20upx 0 0 50upx;
font-size: 28upx;
color: #333333;
font-weight: 400;
.text-bold{
margin-right: 8upx;
font-size: 34upx;
font-weight: bold;
}
}
.share-tip-box{
display: flex;
justify-content: space-between;
align-items: center;
width: 610upx;
background: linear-gradient(0deg, #FFDECF 0%, #FFFFFF 0%, #FEDDAE 0%, #FEF7E0 100%);
border-radius: 12upx;
padding: 24upx 24upx;
.cu-btn{
padding: 0;
text-align: center;
width: 138upx;
line-height: 24px;
background: linear-gradient(90deg, rgba(255,78,0,0.72), rgba(255,222,0,0.72));
box-shadow: 0 2upx 11upx 0 rgba(93,33,3,0.34);
border-radius: 12upx;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 25rpx;
color: #FFFFFF;
}
.flex-row-center{
text{
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
.text-red{
color: #FF1800;
margin: 0 4upx;
font-weight: 600;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment