hly
/
building-materials-shop-uniapp-241014
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传个人中心和我的团队代码

master
swt 4 months ago
parent
e16757635b
commit
2f464287c5
11 changed files with 444 additions and 141 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      pages.json
  2. +206
    -141
      pages/index/center.vue
  3. +235
    -0
      pages_order/mine/individualTeam.vue
  4. BIN
      static/image/center/1.png
  5. BIN
      static/image/center/12.png
  6. BIN
      static/image/center/3.png
  7. BIN
      static/image/center/4.png
  8. BIN
      static/image/center/6.png
  9. BIN
      static/image/center/7.png
  10. BIN
      static/image/center/8.png
  11. BIN
      static/image/center/9.png

+ 3
- 0
pages.json View File

@ -86,6 +86,9 @@
}, },
{ {
"path": "order/firmOrder" "path": "order/firmOrder"
},
{
"path": "mine/individualTeam"
} }
] ]
}], }],


+ 206
- 141
pages/index/center.vue View File

@ -1,158 +1,192 @@
<template> <template>
<view class="page"> <view class="page">
<navbar bgColor="#DC2828"/>
<!-- <navbar title="个人中心" /> -->
<view class="head"> <view class="head">
<view class="headImage"> <view class="headImage">
<image :src="headImage" mode=""></image>
<image src="" mode=""></image>
</view> </view>
<view class="info"> <view class="info">
<view class="name"> <view class="name">
倾心.
<view>
<uv-icon name="edit-pen" size="40rpx" color="#fff"></uv-icon>
修改资料
</view>
倾心.
</view>
<view class="headBtn" @click="headBtn">
修改资料
</view> </view>
<!-- <view class="vip">
VIP1
</view> -->
<view class="tips"> <view class="tips">
手机号：1300000000
手机号：<text>1387451383</text>
</view> </view>
</view> </view>
<view class="amend">
<uv-icon name="edit-pen-fill" size="26rpx" color="#fff"></uv-icon>
</view>
</view> </view>
<!-- 酒店 -->
<view class="user"> <view class="user">
<view class="swipe">
<uv-swiper
:list="bannerList"
indicator
height="220rpx"
keyName="url"></uv-swiper>
<view class="line">
<view class="item" style="">
<view class="image">
<image src="/static/image/center/1.png" mode=""></image>
</view>
<view class="">
我的佣金
<p style="color:#DC2828; font-weight: 700;">￥240</p>
</view>
</view>
<view class="item">
<view class="image">
<image src="/static/image/center/4.png" mode=""></image>
</view>
<view class="">
我的金额
<p style="color:#DC2828;font-weight: 700">￥1200</p>
</view>
</view>
</view>
<view class="line">
<view class="image-home">
<uv-swiper
class="uv-swaip"
height="300rpx"
:list="list"
circular
indicator="true"
bgColor="#ffffff">
</uv-swiper>
</view>
</view> </view>
<view class="line grid"> <view class="line grid">
<view class="title"> <view class="title">
我的服务 我的服务
</view> </view>
<uv-grid :col="4" :border="false"> <uv-grid :col="4" :border="false">
<uv-grid-item @click="$utils.navigateTo('/index/order')">
<image class="image" src="/static/image/center/1.png" mode=""></image>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
<image class="image" src="/static/image/center/12.png" mode=""></image>
<text class="grid-text">我的订单</text> <text class="grid-text">我的订单</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/GainPoints')">
<image class="image" src="/static/image/center/4.png" mode=""></image>
<uv-grid-item @click="$utils.redirectTo('/pages_order/mine/individualTeam')">
<image class="image" src="/static/image/center/8.png" mode=""></image>
<text class="grid-text">我的团队</text> <text class="grid-text">我的团队</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/IntegralRecord')">
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
<image class="image" src="/static/image/center/5.png" mode=""></image> <image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">联系客服</text> <text class="grid-text">联系客服</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)"> <uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
<image class="image" src="/static/image/center/6.png" mode=""></image>
<image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">快捷订单</text> <text class="grid-text">快捷订单</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
</uv-grid>
</view>
<view class="line grid">
<uv-grid :col="4" :border="false">
<uv-grid-item @click="contactUs">
<image class="image" src="/static/image/center/9.png" mode=""></image>
<text class="grid-text">邀请好友</text> <text class="grid-text">邀请好友</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.redirectTo('/index/consult')">
<uv-grid-item>
<image class="image" src="/static/image/center/6.png" mode=""></image> <image class="image" src="/static/image/center/6.png" mode=""></image>
<text class="grid-text">系统设置</text> <text class="grid-text">系统设置</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/contract')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<uv-grid-item @click="$utils.redirectTo('/index/cart')">
<image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">帮助与反馈</text> <text class="grid-text">帮助与反馈</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/promotion?index='+1)">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<uv-grid-item
@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)">
<image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">关于本程序</text> <text class="grid-text">关于本程序</text>
</uv-grid-item> </uv-grid-item>
</uv-grid> </uv-grid>
</view> </view>
</view> </view>
<tabber select="2" />
<tabber select="4" />
</view> </view>
</template> </template>
<script> <script>
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import {
mapState
} from 'vuex'
export default { export default {
components: { components: {
tabber, tabber,
}, },
computed: { computed: {
...mapState(['userInfo']),
headImage(){
return '/static/image/center/headImage.png'
},
username(){
},
}, },
data() { data() {
return { return {
show: false,
bannerList: [
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
],
list: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
]
} }
}, },
methods: { methods: {
}
}
</script>
<style scoped lang="scss">
.page {
headBtn() {
let self = this
uni.showModal({
title: '演示切换角色之后的效果',
success(res) {
if (res.confirm) {
self.$store.state.shop = !self.$store.state.shop
}
}
})
},
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
// 联系客服按钮回调
contactUs() {
this.show = true
},
confirm() {
this.show = false
},
.rect {
width: 600rpx;
height: 300rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
cancle() {
this.show = false
},
.title {
padding: 10rpx 0 0 15rpx;
background-color: #fd5100;
color: #FFF;
text-align: left;
width: 100%;
height: 18%;
font-size: 36rpx;
}
.center {
height: 40%;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
}
.bottom {
display: flex;
justify-content: center;
gap: 50rpx;
}
} }
} }
</script>
<style scoped lang="scss">
.page {
}
image { image {
width: 100%; width: 100%;
@ -160,17 +194,18 @@
} }
.head { .head {
z-index: -1;
display: flex; display: flex;
background-color: $uni-color;
padding: 40rpx 20rpx;
background-color: #DC2828;
padding: 0rpx 20rpx;
align-items: center; align-items: center;
position: relative; position: relative;
color: #fff;
padding-bottom: 70rpx;
height: 300rpx;
padding-top: 60rpx;
.headImage { .headImage {
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
// background-image: url(/static/image/center/3.png);
background-image: url(/static/image/center/3.png);
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
border-radius: 50%; border-radius: 50%;
@ -179,84 +214,112 @@
.info { .info {
font-size: 28rpx; font-size: 28rpx;
.name {
font-size: 32rpx;
.vip {
background-color: #FCCC92;
color: #FA6239;
width: 100rpx;
display: flex; display: flex;
padding-bottom: 10rpx;
view{
display: flex;
font-size: 20rpx;
align-items: center;
padding-left: 20rpx;
}
justify-content: center;
align-items: center;
height: 40rpx;
border-radius: 20rpx;
margin-top: 20rpx;
}
.name {
font-size: 36rpx;
color: #fff;
} }
.tips { .tips {
font-size: 26rpx; font-size: 26rpx;
color: #fff; color: #fff;
margin-top: 10rpx;
} }
} }
// .headBtn {
// margin-left: auto;
// padding: 15rpx 20rpx;
// background-color: $uni-color;
// color: #fff;
// border-radius: 20rpx;
// margin-top: 50rpx;
// }
// .setting {
// position: absolute;
// right: 50rpx;
// top: 50rpx;
// }
}
.headBtn {
position: absolute;
left: 310rpx;
top: 175rpx;
color: #FFF;
font-size: 26rpx;
}
.user {
position: relative;
padding-top: 30rpx;
.auth{
width: 690rpx;
.amend {
position: absolute; position: absolute;
top: -50rpx;
left: 30rpx;
z-index: 99;
overflow: hidden;
background-color: #fff;
border-radius: 20rpx;
/deep/ text{
font-size: 26rpx;
}
left: 275rpx;
top: 180rpx;
} }
.swipe{
margin: 30rpx;
border-radius: 20rpx;
overflow: hidden;
}
.userShop {
.userList {
.title {
font-size: 32rpx;
font-weight: 900;
padding: 20rpx;
}
.list {
display: flex;
flex-wrap: wrap;
.item {
width: 270rpx;
margin: 20rpx;
display: flex;
flex-direction: column;
padding: 40rpx 30rpx;
background-color: #fff;
border-radius: 30rpx;
line-height: 60rpx;
.name {}
.num {
color: $uni-color;
font-weight: 600;
font-size: 28rpx;
}
}
}
} }
}
.user {
z-index: 99;
margin: 0 30rpx;
margin-top: -60rpx;
.line { .line {
display: flex; display: flex;
background-color: #fff; background-color: #fff;
margin-top: 20rpx;
padding: 20rpx 0; padding: 20rpx 0;
margin: 30rpx;
border-radius: 20rpx;
overflow: hidden;
align-content: center;
margin-top: 20rpx;
border-radius: 15rpx;
.item { .item {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 24rpx;
padding: 10rpx 0;
view{
padding: 5rpx 0;
padding: 20rpx 0;
&:nth-child(1) {
border-right: 1px dotted #00000013;
}
.image {
width: 150rpx;
height: 135rpx;
margin-right: 20rpx;
} }
} }
.image-home{
z-index: 1;
height: 300rpx;
width: 100%;
}
} }
.grid { .grid {
@ -267,17 +330,19 @@
.title { .title {
margin-bottom: 30rpx; margin-bottom: 30rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600;
} }
.image { .image {
width: 45rpx;
height: 45rpx;
width: 50rpx;
height: 50rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
text { text {
text-align: center; text-align: center;
margin-bottom: 20rpx;
width: 120rpx;
font-size: 24rpx;
} }
} }
} }

+ 235
- 0
pages_order/mine/individualTeam.vue View File

@ -0,0 +1,235 @@
<template>
<view class="page">
<navbar
title="我的团队"
leftClick
@leftClick="$utils.navigateBack"
bgColor="#DC2828"
color="#fff"
/>
<view class="team">
<view class="team-message">
<view class="leftImage">
<image src="" mode=""></image>
</view>
<view class="number-team">
<view class="top-number">
<text style="font-weight: 500;">13845131854</text>
<view class="salesman">一级业务员</view>
</view>
<view class="bottom-number">
<view class="performance">
<view class="team-sum">
团队总业绩
</view>
<view class="figure">
<text style="margin-left: 30rpx; color: #DC2828; font-weight: 600;">￥</text><text class="money">66666</text>
</view>
</view>
<view class="withdraw">
<view class="withdraw-button">
去提现
</view>
</view>
</view>
</view>
</view>
</view>
<view class="user">
<text>直销用户</text>
</view>
<view class="user-list">
<view class="head" v-for="(item,index) in 20">
<view class="headImage">
<image src="" mode=""></image>
</view>
<view class="info">
<view class="name">
用户138xxxxxxxx
</view>
<view class="headBtn">
下单量：<text>12</text>单 | 佣金： <text style="color: darkorange;">120元</text>
</view>
<view class="tips">
已加入平台<text>120</text>天
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.page{
.team{
height: 250rpx;
background-color: #DC2828;
padding-top: 50rpx;
.team-message{
height: 200rpx;
width: 90%;
background-color: #fff;
margin: 0 30rpx;
position: relative;
border-radius: 10rpx;
.leftImage {
width: 150rpx;
height: 150rpx;
background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 15rpx;
display: inline-block;
position: absolute;
top: 25rpx;
left: 26rpx;
}
.number-team{
width: 70%;
display: inline-block;
position: absolute;
top: 0rpx;
left: 202rpx;
.top-number{
height: 70rpx;
position: relative;
border-bottom: #DC2828 dotted 1rpx;
display: flex;
align-items: center;
margin: 0 20rpx;
.salesman{
position: absolute;
height: 40rpx;
width: 160rpx;
text-align: center;
background-color: #FF6700;
border-radius: 50rpx;
display: inline;
margin-left: 240rpx;
color: #fff;
font-size: 24rpx;
}
}
.bottom-number{
height: 120rpx;
position: relative;
.performance{
width: 50%;
height: 100%;
display: inline-block;
position: absolute;
top: 0rpx;
.team-sum{
display: inline-block;
width: 180rpx;
background-color: #F99F9F;
border-radius: 50rpx;
text-align: center;
margin: 0rpx 20rpx;
margin-top: 8rpx;
color: #DC2828;
font-size: 26rpx;
}
.figure{
height: 60rpx;
line-height: 60rpx;
display: flex;
// align-items: center;
padding-top: 10rpx;
.money{
font-size: 40rpx;
color: #DC2828;
display: inline-block;
font-weight: 600;
}
}
}
.withdraw{
width: 50%;
height: 100%;
display: inline-block;
position: absolute;
right: 0rpx;
display: flex;
justify-content: center;//横轴居中
align-items: center;//竖轴居中
.withdraw-button{
background-color: #DC2828;
color: #fff;
border-radius: 50rpx;
text-align: center;
height: 62rpx;
width: 200rpx;
line-height: 62rpx;
}
}
}
}
}
}
.user{
height: 120rpx;
background-color: #fff;
display: flex;
align-items: center;
padding-left: 30rpx;
}
.user-list{
margin: 0 20rpx;
.head {
z-index: -1;
display: flex;
background-color: #fff;
padding: 0rpx 20rpx;
align-items: center;
position: relative;
height: 100rpx;
margin-top: 20rpx;
border-radius: 20rpx;
.headImage {
width: 75rpx;
height: 75rpx;
background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 15rpx;
}
.info {
font-size: 22rpx;
.name {
font-size: 26rpx;
color: #333;
}
.tips {
font-size: 22rpx;
color: #999999;
margin-top: 10rpx;
}
}
.headBtn {
position: absolute;
right: 60rpx;
top: 38rpx;
color: #333;
font-size: 26rpx;
}
}
}
}
</style>

BIN
static/image/center/1.png View File

Before After
Width: 51  |  Height: 49  |  Size: 1.2 KiB Width: 164  |  Height: 160  |  Size: 19 KiB

BIN
static/image/center/12.png View File

Before After
Width: 35  |  Height: 42  |  Size: 1.4 KiB

BIN
static/image/center/3.png View File

Before After
Width: 120  |  Height: 120  |  Size: 5.9 KiB Width: 72  |  Height: 72  |  Size: 2.7 KiB

BIN
static/image/center/4.png View File

Before After
Width: 52  |  Height: 49  |  Size: 1.7 KiB Width: 164  |  Height: 164  |  Size: 14 KiB

BIN
static/image/center/6.png View File

Before After
Width: 63  |  Height: 50  |  Size: 2.1 KiB Width: 40  |  Height: 39  |  Size: 2.1 KiB

BIN
static/image/center/7.png View File

Before After
Width: 64  |  Height: 64  |  Size: 2.4 KiB Width: 38  |  Height: 36  |  Size: 1.2 KiB

BIN
static/image/center/8.png View File

Before After
Width: 64  |  Height: 64  |  Size: 2.5 KiB Width: 44  |  Height: 38  |  Size: 1.9 KiB

BIN
static/image/center/9.png View File

Before After
Width: 56  |  Height: 48  |  Size: 2.1 KiB Width: 39  |  Height: 39  |  Size: 2.0 KiB

Write Preview
Loading…
Cancel
Save