wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
dev
shuxiaoquan 1 year ago
parent 0a3ca8a90a
commit 7abe30c0d8
8 changed files with 781 additions and 72 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 25
      pages.json
  2. 304
      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

25
pages.json
Unescape View File

@ -80,8 +80,9 @@
{ {
"path": "pages/invite/index", "path": "pages/invite/index",
"style": { "style": {
"navigationBarTitleText": "邀请记录", "navigationBarTitleText": "邀请有礼",
"navigationStyle": "custom" "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": { "globalStyle": {
// #ifdef H5 // #ifdef H5

304
pages/invite/index.vue
Unescape View File

@ -1,20 +1,64 @@
<template> <template>
<view class="member"> <view class="invite">
<view class="title"> <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>
<view class="tab"> <view class="invite-hd">
<view class="tabList"> <image src="@/static/news/invite-bg.png"></image>
<view v-for="(item,index) in tabList" :key="index" class="tabItem"> <view class="btn"></view>
<view class="name" :style="{'color':item.value==chosed?'#FF4C4B':'#7A7A7A'}"> <view class="rule"></view>
{{item.name}} </view>
<view class="invite-bd">
<view class="invite-bd-a">
<view class="a">
<view class="l">
累计邀请好友(人）
<view class="p">224</view>
</view> </view>
<view class="line" v-if="item.value==chosed"> <view class="l">
累计现金奖励(元）
<view class="p">224</view>
</view> </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> </view>
</view> </view>
</template> </template>
@ -23,77 +67,197 @@
export default{ export default{
data(){ data(){
return{ return{
chosed:'0', backgroundBg: {
tabList:[ "background": "rgba(255,255,255,0.22)"
{ },
name:'待完成', list: [
value:'0' '寒雨连江夜入吴',
},{ '平明送客楚山孤',
name:'已完成', '洛阳亲友如相问',
value:'1' '一片冰心在玉壶'
},{
name:'已完成',
value:'2'
}
] ]
} }
},
methods: {
openPage(index){
if(index == 1){
uni.navigateTo({
url: "/pages/invite/list"
})
}
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.member{ .invite{
width: 100%; min-height: 100vh;
height: 1296rpx; overflow: hidden;
background: url('../../static/member/merBack.png') 100% no-repeat; &-notice{
background-size: 100% 100%; background-color: #FF5554;
padding-top: 120rpx;
position:relative;
} }
.title{ &-hd{
width: 128rpx; width: 100%;
height: 44rpx; text-align: center;
font-size: 32rpx; background-color: #FF5554;
font-family: PingFang SC, PingFang SC; image{
font-weight: 500; width: 750rpx;
color: #424242; height: 415rpx;
line-height: 44rpx; }
left: 0; position: relative;
right: 0; .rule{
margin: auto; width: 130rpx;
height: 50rpx;
position: absolute;
right: 0;
top: 208rpx;
z-index: 2;
}
.btn{
width: 396rpx;
height: 88rpx;
position: absolute;
left: 50%;
margin-left: -205rpx;
bottom: 25rpx;
z-index: 2;
}
} }
.tab{ &-bd{
width: 682rpx; padding: 0 38rpx 60rpx 32rpx;
height: 692rpx; background: linear-gradient(181deg, #FF5F55 0%, #FAC39D 100%);
background: #FFFFFF; overflow: hidden;
border-radius: 10rpx 10rpx 10rpx 10rpx; &-a{
opacity: 1; width: 100%;
margin: 48rpx 0 0 42rpx; height: 366rpx;
padding-top: 20rpx; background: #FFFFFF;
.tabList{ border-radius: 12rpx;
display: flex; margin-top: 30rpx;
justify-content: space-around; .a{
align-items: center; padding: 50rpx 0 30rpx;
.tabItem{ overflow: hidden;
.name{ display: flex;
width: 96rpx; align-items: center;
height: 60rpx; justify-content: center;
font-size: 32rpx; text-align: center;
font-family: PingFang SC, PingFang SC; .l{
font-weight: 600; flex: 1;
line-height: 44rpx; 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;
}
} }
}
.line{ .b{
width: 48rpx; width: 396rpx;
height: 6rpx; height: 88rpx;
background: #FF4C4B; background: linear-gradient(180deg, #FD5B54 0%, #FFC277 100%);
border-radius: 56rpx 56rpx 56rpx 56rpx; border-radius: 106rpx;
opacity: 1; border: 1px solid #FFFFFF;
margin-top: 10rpx; display: flex;
margin-left: 24rpx; align-items: center;
justify-content: center;
font-size: 32rpx;
color: #FFFFFF;
margin: 0 auto;
}
.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;
}
}
} }
}
</style> </style>

99
pages/invite/list.vue
Unescape View File

@ -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>

425
pages/user/vip/goods.vue
Unescape View File

@ -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>

BIN
static/news/invite-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
static/news/invite-bg2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
static/news/invite-bg3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
static/news/invite-bg4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

Write Preview
Loading…
Cancel
Save