Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

个人中心 设置页面

master
Enzo 4 years ago
parent
dec3f1e102
commit
2705cc1bea
5 changed files with 320 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pages.json
  2. 4
      pages/discover/discover.vue
  3. 183
      pages/user/my/center.vue
  4. 2
      pages/user/my/my.vue
  5. 120
      pages/user/my/setting.vue

14
pages.json
View File

@ -3,6 +3,20 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/user/my/setting",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/center",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/discover/discover",
"style": {

4
pages/discover/discover.vue
View File

@ -6,7 +6,7 @@
</view>
<view v-for="i of 6">
<view class="lf-p-32">
<view class="lf-flex">
<view class="lf-flex" @click="$url('/pages/user/my/my')">
<view class="tag-father">
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
<view class="head-tag">V</view>
@ -16,7 +16,7 @@
<view class="lf-font-24 lf-color-777 lf-m-t-15">08-28 18:39</view>
</view>
</view>
<view class="lf-font-28 lf-color-333 lf-m-t-20">
<view class="lf-font-28 lf-color-333 lf-m-t-20" @click="$url('/pages/discover/discoverdetails')">
在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售
</view>
<view class="lf-flex-wrap lf-m-t-20">

183
pages/user/my/center.vue
View File

@ -0,0 +1,183 @@
<template>
<view>
<lf-nav :spreadOut="false" :showIcon="false" titleColor="white" bgColor="transparent!important" title="会员中心"></lf-nav>
<view class="center-top">
<view class="ocupy"></view>
<view class="lf-flex lf-p-32 lf-row-between">
<view class="lf-row-between">
<view>
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="center-img"></image>
</view>
<view class="lf-row-center">
<view class="lf-color-white lf-font-36 lf-m-l-20">182****5380 </view>
<view class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-white"></view>
</view>
</view>
<view class="lf-row-center lf-flex-column">
<view class="lf-iconfont icon-shoucang lf-color-white"></view>
<view class="lf-font-24 lf-color-white">支付码</view>
</view>
</view>
<view class="lf-flex lf-row-between center-tag">
<view class="lf-row-center lf-flex-column">
<view class="lf-font-36 lf-color-white">0</view>
<view class="lf-font-24 lf-color-white">积分</view>
</view>
<view class="lf-row-center lf-flex-column">
<view class="lf-font-36 lf-color-white">0.00</view>
<view class="lf-font-24 lf-color-white">余额</view>
</view>
<view class="lf-row-center lf-flex-column">
<view class="lf-font-36 lf-color-white">0</view>
<view class="lf-font-24 lf-color-white">优惠券</view>
</view>
</view>
<view class="center-card">
<view class="lf-p-30 lf-row-between lf-w-100">
<view class="lf-flex-column">
<view class="lf-font-48 lf-font-bold" style="color: #15716E;">
VIP 预备会员
</view>
<view class="lf-font-28" style="color: #15716E;">卡号: 638329</view>
</view>
<view class="card-tag">
会员权益
</view>
</view>
</view>
</view>
<view class="lf-row-center">
<view class="order-card">
<view class="lf-row-between">
<view class="lf-color-black lf-font-32 lf-font-bold">
商家订单
</view>
<view class="lf-flex">
<view class="lf-font-24 lf-color-777">全部订单</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
<view class="order-tag lf-flex-wrap">
<view class="order-children" v-for="i of 4">
<view class="function-tag"></view>
<view class="lf-color-black lf-font-28 lf-m-t-20">待付款</view>
</view>
</view>
</view>
</view>
<view class="lf-row-center">
<view class="order-card1">
<view class="lf-row-between">
<view class="lf-color-black lf-font-32 lf-font-bold">
我的服务
</view>
<view></view>
</view>
<view class="order-tag lf-flex-wrap">
<view class="order-children" v-for="i of 5">
<view class="function-tag"></view>
<view class="lf-color-black lf-font-28 lf-m-t-20">会员服务</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.order-children {
width: 134rpx;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 27rpx;
&:nth-child(4n) {
margin-right: 0;
}
&:nth-child(n + 5) {
margin-top: 50rpx;
}
}
.function-tag {
width: 50rpx;
height: 50rpx;
background: #D8D8D8;
border: 1rpx solid #979797;
border-radius: 50%;
}
.order-tag {
padding: 50rpx 0;
display: flex;
flex: wrap;
// justify-content: space-around;
align-items: center;
}
.order-card {
padding: 30rpx 30rpx 0 30rpx;
width: 686rpx;
height: 100%;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
margin: 150rpx 0 30rpx 0;
}
.order-card1 {
padding: 30rpx 30rpx 0 30rpx;
width: 686rpx;
height: 100%;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
}
.card-tag {
width: 144rpx;
height: 53rpx;
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%);
border-radius: 30rpx;
display: flex;
align-items: center;
color: white;
justify-content: center;
font-size: 26rpx;
}
.center-card {
width: 686rpx;
height: 160rpx;
background: #FFFFFF;
display: flex;
align-items: center;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
margin: 0 auto;
position: absolute;
bottom: -120rpx;
left: 32rpx;
z-index: 9999;
}
.center-tag {
padding: 0 80rpx 0 80rpx;
}
.ocupy {
height: 160rpx;
width: 100%;
}
.center-top {
position: relative;
width: 750rpx;
height: 512rpx;
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%);
}
.center-img {
width: 100rpx;
height: 100rpx;
border: 2rpx solid #FFFFFF;
border-radius: 100%;
}
</style>

2
pages/user/my/my.vue
View File

@ -18,7 +18,7 @@
</view>
</view>
</view>
<view class="lf-m-32">
<view class="lf-m-32" @click="$url('/pages/discover/discoverdetails')">
<view class="lf-font-48 lf-color-black lf-font-bold">
08月27日
</view>

120
pages/user/my/setting.vue
View File

@ -0,0 +1,120 @@
<template>
<view>
<lf-nav :spreadOut="true" :showIcon="true" title="设置"></lf-nav>
<view class="lf-p-l-32 lf-p-r-32">
<view class="set-tag lf-border-bottom">
<view class="lf-font-28 lf-color-black">
昵称
</view>
<view class="lf-flex">
<view class="lf-font-28 lf-color-555">182****5380</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
</view>
<view class="lf-p-l-32 lf-p-r-32">
<view class="set-tag lf-border-bottom">
<view class="lf-font-28 lf-color-black">
头像
</view>
<view class="lf-flex">
<view class="lf-row-center">
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="set-img"></image>
</view>
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
</view>
<view class="lf-p-l-32 lf-p-r-32">
<view class="set-tag lf-border-bottom">
<view class="lf-font-28 lf-color-black">
会员资料
</view>
<view class="lf-flex">
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
</view>
<view class="lf-p-l-32 lf-p-r-32">
<view class="set-tag">
<view class="lf-font-28 lf-color-black">
地址管理
</view>
<view class="lf-flex">
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
</view>
<self-line/>
<view class="lf-p-l-32 lf-p-r-32">
<view class="set-tag lf-border-bottom">
<view class="lf-font-28 lf-color-black">
修改手机号
</view>
<view class="lf-flex">
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
</view>
<view class="lf-p-l-32 lf-p-r-32">
<view class="set-tag">
<view class="lf-font-28 lf-color-black">
支付密码设着
</view>
<view class="lf-flex">
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
</view>
<self-line/>
<view class="lf-p-l-32 lf-p-r-32">
<view class="set-tag lf-border-bottom">
<view class="lf-font-28 lf-color-black">
关于我们
</view>
<view class="lf-flex">
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
</view>
<view class="lf-p-l-32 lf-p-r-32">
<view class="set-tag">
<view class="lf-font-28 lf-color-black">
客服电话
</view>
<view class="lf-flex">
<view class="lf-font-28 lf-color-555">0315-7483482</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
</view>
</view>
</view>
<button class="set-btn">退出账号</button>
</view>
</template>
<script>
</script>
<style scoped lang="scss">
.set-btn {
width: 550rpx;
height: 100rpx;
background: #15716E;
border-radius: 50rpx;
margin: 40rpx auto;
font-size: 32rpx;
color: white;
}
.set-img {
width: 41rpx;
height: 41rpx;
border-radius: 50%;
}
.set-tag {
height: 100rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
</style>
Write Preview
Loading…
Cancel
Save