个人中心-会员分享记录、邀请有礼页面绘制

dev
shuxiaoquan 1 year ago
parent 0a3ca8a90a
commit 7abe30c0d8
  1. 25
      pages.json
  2. 292
      pages/invite/index.vue
  3. 99
      pages/invite/list.vue
  4. 425
      pages/user/vip/goods.vue
  5. BIN
      static/news/invite-bg.png
  6. BIN
      static/news/invite-bg2.png
  7. BIN
      static/news/invite-bg3.png
  8. BIN
      static/news/invite-bg4.png

@ -80,8 +80,9 @@
{
"path": "pages/invite/index",
"style": {
"navigationBarTitleText": "邀请记录",
"navigationStyle": "custom"
"navigationBarTitleText": "邀请有礼",
"navigationBarBackgroundColor": "#FF5554",
"navigationBarTextStyle": "white"
}
},
{
@ -486,6 +487,26 @@
}
}
,{
"path" : "pages/invite/list",
"style" :
{
"navigationBarTitleText": "邀请记录",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/user/vip/goods",
"style" :
{
"navigationBarTitleText": "",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
// #ifdef H5

@ -1,20 +1,64 @@
<template>
<view class="member">
<view class="title">
邀请记录
<view class="invite">
<view class="invite-notice">
<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar>
</view>
<view class="tab">
<view class="tabList">
<view v-for="(item,index) in tabList" :key="index" class="tabItem">
<view class="name" :style="{'color':item.value==chosed?'#FF4C4B':'#7A7A7A'}">
{{item.name}}
<view class="invite-hd">
<image src="@/static/news/invite-bg.png"></image>
<view class="btn"></view>
<view class="rule"></view>
</view>
<view class="line" v-if="item.value==chosed">
<view class="invite-bd">
<view class="invite-bd-a">
<view class="a">
<view class="l">
累计邀请好友(
<view class="p">224</view>
</view>
<view class="l">
累计现金奖励(
<view class="p">224</view>
</view>
</view>
<view class="b" @click="openPage(1)">
我的邀请<u-icon name="arrow-right"></u-icon>
</view>
<view class="c" @click="openPage(2)">
立即提现<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="invite-bd-b">
<image src="@/static/news/invite-bg2.png"></image>
<view class="a">
<view class="l">
可得288积分<br />188元优惠券
</view>
<view class="l">
可返现3%
</view>
<view class="l">
188元优惠券
</view>
</view>
</view>
<view class="invite-bd-c">
<image src="@/static/news/invite-bg3.png"></image>
<view class="a">
<view class="l">
188优惠券
</view>
<view class="l">
288积分
</view>
<view class="l">
首单返3%
</view>
</view>
</view>
<view class="invite-bd-d">
<image src="@/static/news/invite-bg4.png"></image>
<view class="p">立即邀请</view>
</view>
</view>
</view>
</template>
@ -23,75 +67,195 @@
export default{
data(){
return{
chosed:'0',
tabList:[
{
name:'待完成',
value:'0'
},{
name:'已完成',
value:'1'
},{
name:'已完成',
value:'2'
}
backgroundBg: {
"background": "rgba(255,255,255,0.22)"
},
list: [
'寒雨连江夜入吴',
'平明送客楚山孤',
'洛阳亲友如相问',
'一片冰心在玉壶'
]
}
},
methods: {
openPage(index){
if(index == 1){
uni.navigateTo({
url: "/pages/invite/list"
})
}
},
}
}
</script>
<style lang="scss" scoped>
.member{
.invite{
min-height: 100vh;
overflow: hidden;
&-notice{
background-color: #FF5554;
}
&-hd{
width: 100%;
height: 1296rpx;
background: url('../../static/member/merBack.png') 100% no-repeat;
background-size: 100% 100%;
padding-top: 120rpx;
position:relative;
text-align: center;
background-color: #FF5554;
image{
width: 750rpx;
height: 415rpx;
}
.title{
width: 128rpx;
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #424242;
line-height: 44rpx;
left: 0;
position: relative;
.rule{
width: 130rpx;
height: 50rpx;
position: absolute;
right: 0;
margin: auto;
top: 208rpx;
z-index: 2;
}
.btn{
width: 396rpx;
height: 88rpx;
position: absolute;
left: 50%;
margin-left: -205rpx;
bottom: 25rpx;
z-index: 2;
}
}
.tab{
width: 682rpx;
height: 692rpx;
&-bd{
padding: 0 38rpx 60rpx 32rpx;
background: linear-gradient(181deg, #FF5F55 0%, #FAC39D 100%);
overflow: hidden;
&-a{
width: 100%;
height: 366rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 48rpx 0 0 42rpx;
padding-top: 20rpx;
.tabList{
border-radius: 12rpx;
margin-top: 30rpx;
.a{
padding: 50rpx 0 30rpx;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.l{
flex: 1;
border-right: 1px solid #DDDDDD;
font-size: 28rpx;
font-weight: 500;
color: #414141;
.p{
font-size: 54rpx;
font-weight: 500;
color: #FF5251;
margin-top: 20rpx;
}
}
}
.b{
width: 396rpx;
height: 88rpx;
background: linear-gradient(180deg, #FD5B54 0%, #FFC277 100%);
border-radius: 106rpx;
border: 1px solid #FFFFFF;
display: flex;
justify-content: space-around;
align-items: center;
.tabItem{
.name{
width: 96rpx;
height: 60rpx;
justify-content: center;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
line-height: 44rpx;
color: #FFFFFF;
margin: 0 auto;
}
.line{
width: 48rpx;
height: 6rpx;
background: #FF4C4B;
border-radius: 56rpx 56rpx 56rpx 56rpx;
opacity: 1;
margin-top: 10rpx;
margin-left: 24rpx;
.c{
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #FF5251;
margin-top: 20rpx;
}
}
&-b{
width: 100%;
height: 515rpx;
margin-top: 20rpx;
position: relative;
image{
width: 100%;
height: 100%;
}
.a{
width: 100%;
bottom: 50rpx;
padding: 0 25rpx;
box-sizing: border-box;
z-index: 1;
left: 0;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
.l{
flex: 1;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #FF4D4C;
}
}
}
&-c{
width: 100%;
height: 375rpx;
margin-top: 20rpx;
position: relative;
image{
width: 100%;
height: 100%;
}
.a{
width: 260rpx;
bottom: 0;
box-sizing: border-box;
z-index: 1;
right: 0;
position: absolute;
display: flex;
flex-wrap: wrap;
.l{
width: 130rpx;
height: 135rpx;
text-align: center;
font-size: 22rpx;
font-weight: 500;
line-height: 150rpx;
color: #414141;
}
}
}
&-d{
width: 100%;
height: 108rpx;
position: relative;
margin-top: 20rpx;
image{
width: 100%;
height: 100%;
}
.p{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
text-align: center;
line-height: 105rpx;
font-size: 36rpx;
font-weight: 500;
color: #FF5251;
}
}
}

@ -0,0 +1,99 @@
<template>
<view class="member">
<view class="title">
邀请记录
</view>
<view class="tab">
<view class="tabList">
<view v-for="(item,index) in tabList" :key="index" class="tabItem">
<view class="name" :style="{'color':item.value==chosed?'#FF4C4B':'#7A7A7A'}">
{{item.name}}
</view>
<view class="line" v-if="item.value==chosed">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
chosed:'0',
tabList:[
{
name:'待完成',
value:'0'
},{
name:'已完成',
value:'1'
},{
name:'已完成',
value:'2'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.member{
width: 100%;
height: 1296rpx;
background: url('../../static/member/merBack.png') 100% no-repeat;
background-size: 100% 100%;
padding-top: 120rpx;
position:relative;
}
.title{
width: 128rpx;
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #424242;
line-height: 44rpx;
left: 0;
right: 0;
margin: auto;
}
.tab{
width: 682rpx;
height: 692rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
opacity: 1;
margin: 48rpx 0 0 42rpx;
padding-top: 20rpx;
.tabList{
display: flex;
justify-content: space-around;
align-items: center;
.tabItem{
.name{
width: 96rpx;
height: 60rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
line-height: 44rpx;
}
.line{
width: 48rpx;
height: 6rpx;
background: #FF4C4B;
border-radius: 56rpx 56rpx 56rpx 56rpx;
opacity: 1;
margin-top: 10rpx;
margin-left: 24rpx;
}
}
}
}
</style>

@ -0,0 +1,425 @@
<template>
<view class="goods">
<u-navbar>
<view class="slot-wrap">
<u-search placeholder="iPhone 15" :show-action="false" v-model="keyword"></u-search>
</view>
</u-navbar>
<view class="goods-hd">
<u-swiper :list="list" mode="none" height="400"></u-swiper>
</view>
<scroll-view scroll-x class="goods-menu">
<view class="item" @click="tabItem1(i)" v-for="i in 10" :key="i" :class="tabIndex1==i?'item-on':''">
<image src="@/static/home/phone.jpg"></image>
<view class="p">手机</view>
</view>
</scroll-view>
<view class="goods-bd">
<scroll-view scroll-y class="a">
<view class="item" @click="tabItem(0)" :class="tabIndex==0?'item-on':''">全部商品</view>
<view class="item" @click="tabItem(1)" :class="tabIndex==1?'item-on':''">TCL</view>
<view class="item" @click="tabItem(2)" :class="tabIndex==2?'item-on':''">创维</view>
<view class="item" @click="tabItem(3)" :class="tabIndex==3?'item-on':''">海尔</view>
<view class="item" @click="tabItem(4)" :class="tabIndex==4?'item-on':''">长虹</view>
<view class="item" @click="tabItem(5)" :class="tabIndex==5?'item-on':''">小米</view>
<view class="item" @click="tabItem(6)" :class="tabIndex==6?'item-on':''">东芝</view>
<view class="item" @click="tabItem(7)" :class="tabIndex==7?'item-on':''">华为</view>
<view class="item" @click="tabItem(8)" :class="tabIndex==8?'item-on':''">雷鸟</view>
</scroll-view>
<view class="b">
<view class="t">
<view class="item" @click="tabFilter(0)" :class="filterIndex==0?'item-on':''">价格</view>
<view class="item" @click="tabFilter(1)" :class="filterIndex==1?'item-on':''">折扣</view>
<view class="item" @click="tabFilter(2)" :class="filterIndex==2?'item-on':''">销量</view>
<view class="item" @click="tabFilter(3)" :class="filterIndex==3?'item-on':''">综合</view>
</view>
<scroll-view scroll-y class="l">
<view class="item" v-for="i in 10" :key="i" @click="tabFilter(0)">
<image src="@/static/home/phone.jpg"></image>
<view class="title">
<text>自营</text>iphone13 绿色 128GB
</view>
<view class="price">
<view class="n"><text>7595</text>到手价</view>
<view class="o">7595</view>
</view>
<view class="desc">
200+条评论 99%好评率
</view>
</view>
</scroll-view>
</view>
</view>
<!-- -->
<u-popup v-model="isShow" width="548rpx" mode="center" :custom-style="backgroundBg">
<view class="goods-share">
<view class="l">
<view class="a">
<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
</view>
<view class="b">
<view class="item" v-for="i in 2" :key="i">
<image src="@/static/home/phone.jpg"></image>
<view class="title">
<text>自营</text>iphone13 绿色 128GB
</view>
<view class="price">
<view class="n"><text>7595</text></view>
</view>
<view class="desc">
200+条评论 99%好评率
</view>
</view>
</view>
<view class="c">
<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
</view>
</view>
<view class="btn">保存到相册</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
backgroundBg: {
"background": "transparent",
"overflow": "auto"
},
isShow: true,
tabIndex1: 1,
tabIndex: 0,
filterIndex: 0,
keyword: "",
list: [{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风,画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼,心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
}
],
}
},
methods: {
tabItem(index){
this.tabIndex = index;
},
tabItem1(index){
this.tabIndex1 = index;
},
tabFilter(index){
this.filterIndex = index;
}
}
}
</script>
<style lang="scss" scoped>
.goods{
.slot-wrap{
width: 400rpx;
margin-left: 60rpx;
}
&-hd{
width: 100%;
height: 400rpx;
image{
width: 100%;
height: 100%;
}
}
&-menu{
height: 180rpx;
white-space: nowrap;
margin-top: 30rpx;
padding: 0 20rpx;
.item{
width: 150rpx;
height: 180rpx;
background: #FFFFFF;
display: inline-block;
padding: 16rpx;
box-sizing: border-box;
border: 1px solid #FFFFFF;
text-align: center;
margin-left: 12rpx;
border-radius: 8rpx;
image{
width: 112rpx;
height: 112rpx;
}
.p{
white-space: nowrap;
overflow: hidden;
font-size: 28rpx;
font-weight: 400;
color: #3F3F3F;
}
&-on{
border: 1px solid #F21A1C;
}
}
}
&-bd{
padding: 30rpx 0 0;
display: flex;
height: calc(100vh - 700rpx);
box-sizing: border-box;
overflow: hidden;
.a{
width: 150rpx;
height: 100%;
.item{
padding: 20rpx 35rpx;
border-left: 3px solid #FFFFFF;
line-height: 50rpx;
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: #3F3F3F;
box-sizing: border-box;
&-on{
background-color: #FFFFFF;
border-left-color: #F34A40;
}
}
}
.b{
width: 600rpx;
height: 100%;
background-color: #FFFFFF;
.t{
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #3F3F3F;
line-height: 100rpx;
.item{
flex: 1;
text-align: center;
&-on{
color: #F34A40;
}
}
}
.l{
height: calc(100% - 120rpx);
box-sizing: border-box;
overflow: hidden;
.item{
width: 270rpx;
height: 389rpx;
background: #FFFFFF;
border-radius: 7rpx;
opacity: 1;
border: 1px solid #ECECEC;
padding: 10rpx 15rpx;
box-sizing: border-box;
float: left;
margin-left: 20rpx;
margin-bottom: 20rpx;
image{
width: 230rpx;
height: 230rpx;
display: block;
margin: 0 auto;
}
.title{
padding: 10rpx 0;
line-height: 40rpx;
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text{
background-color: #F34A40;
font-size: 20rpx;
padding: 0 10rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 4rpx;
font-weight: 400;
color: #FFFFFF;
margin-right: 5rpx;
display: inline-block;
}
}
.price{
display: flex;
align-items: center;
white-space: nowrap;
.n{
display: flex;
align-items: baseline;
font-size: 11px;
font-weight: 500;
color: #F21A1C;
text{
font-size: 29rpx;
}
}
.o{
font-size: 12px;
color: #949494;
text-decoration: line-through;
}
}
.desc{
font-size: 10px;
font-weight: 400;
color: #949494;
white-space: nowrap;
margin-top: 10rpx;
}
}
}
}
}
&-share{
width: 548rpx;
height: 810rpx;
overflow: hidden;
.l{
width: 548rpx;
background: #FFFFFF;
margin: 0 auto;
overflow: hidden;
position: relative;
.a{
width: 490rpx;
height: 243rpx;
margin: 0 auto;
padding-top: 24rpx;
image{
width: 100%;
height: 100%;
}
}
.b{
padding: 20rpx 20rpx;
overflow: hidden;
.item{
width: 220rpx;
height: 369rpx;
background: #FFFFFF;
border-radius: 7rpx;
opacity: 1;
border: 1px solid #ECECEC;
padding: 10rpx 0;
box-sizing: border-box;
float: left;
margin-left: 20rpx;
margin-bottom: 10rpx;
image{
width: 180rpx;
height: 180rpx;
display: block;
margin: 0 auto;
}
.title{
padding: 10rpx 0;
line-height: 40rpx;
font-size: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text{
background-color: #F34A40;
font-size: 20rpx;
padding: 0 10rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 4rpx;
font-weight: 400;
color: #FFFFFF;
margin-right: 5rpx;
display: inline-block;
}
}
.price{
display: flex;
align-items: center;
white-space: nowrap;
padding: 0 5rpx;
.n{
display: flex;
align-items: baseline;
font-size: 11px;
font-weight: 500;
color: #F21A1C;
text{
font-size: 29rpx;
}
}
.o{
font-size: 12px;
color: #949494;
text-decoration: line-through;
}
}
.desc{
padding: 0 5rpx;
font-size: 10px;
font-weight: 400;
color: #949494;
white-space: nowrap;
margin-top: 10rpx;overflow: hidden;
}
}
}
.c{
background-color: #F1F1F1;
height: 150rpx;
display: flex;
justify-content: flex-end;
align-items: center;
image{
width: 140rpx;
height: 122rpx;
margin-right: 30rpx;
}
}
}
.btn{
width: 640rpx;
line-height: 80rpx;
text-align: center;
background: #F34A40;
position: fixed;
left: 50%;
margin-left: -320rpx;
top: 50%;
z-index: 2;
border-radius: 8rpx;
font-size: 28rpx;
font-weight: 600;
color: #FFFFFF;
margin-top: 450rpx;
}
}
}
</style>
<style>
.goods .uni-scroll-view .uni-scroll-view{
overflow: auto!important;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Loading…
Cancel
Save