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

完成商家中心主页

master
邓平艺 4 years ago
parent
b5bbe850bf
commit
e28f1d6014
3 changed files with 239 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      pages.json
  2. 228
      pages/business/center/center.vue
  3. 4
      pages/user/my/center.vue

7
pages.json
View File

@ -959,6 +959,13 @@
"navigationBarTitleText": "在线商城", "navigationBarTitleText": "在线商城",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path" : "pages/business/center/center",
"style" : {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {

228
pages/business/center/center.vue
View File

@ -0,0 +1,228 @@
<template>
<view>
<lf-nav title="我的" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav>
<view class="head">
<view class="bg-left"></view>
<view class="bg-right"></view>
<view class="head-content">
<view class="lf-flex">
<image class="head-img" mode="aspectFill" src="https://picsum.photos/id/237/200/300"></image>
<view class="head-title lf-line-3">雅诗兰黛专卖店</view>
</view>
<view class="lf-flex">
<view class="head-menu">
<text class="lf-iconfont icon-daifukuan"></text>
<text>余额</text>
</view>
<view class="head-menu">
<text class="lf-iconfont icon-daifukuan"></text>
<text>扫一扫</text>
</view>
</view>
</view>
</view>
<view class="notice">
<u-notice-bar mode="vertical" type="none" :list="list"></u-notice-bar>
</view>
<view class="card">
<view class="lf-row-between">
<view class="title">待处理</view>
<view class="lf-color-777">
<text class="lf-font-24 lf-m-r-10">订单管理</text>
<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
</view>
</view>
<view class="lf-flex lf-m-t-50">
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">0</view>
<view>待付款</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">0</view>
<view>待发货</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">0</view>
<view>待提货</view>
</view>
</view>
</view>
<view class="card">
<view class="lf-row-between">
<view class="title">今日数据</view>
</view>
<view class="lf-flex lf-m-t-50">
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">
<text>0</text>
<text class="lf-font-24">(笔)</text>
</view>
<view>支付金额</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">
<text>0</text>
<text class="lf-font-24">(笔)</text>
</view>
<view>线上订单</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">
<text>0</text>
<text class="lf-font-24">(笔)</text>
</view>
<view>线下订单</view>
</view>
</view>
</view>
<view class="card">
<view class="lf-row-between">
<view class="title">我的商品</view>
</view>
<view class="lf-flex lf-m-t-50">
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">0</view>
<view>销售中</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">0</view>
<view>待上架</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">0</view>
<view>已下架</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
list: ['我有一只小毛驴，但我从来也不骑', '天苍苍野茫茫']
}
},
onLoad(){
},
methods: {
}
}
</script>
<style lang="scss" scoped="scoped">
.head{
width: 750rpx;
height: 409rpx;
background: linear-gradient(90deg, #1339B8 0%, #092788 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 60rpx 32rpx 110rpx;
color: #FFFFFF;
.bg-left{
position: absolute;
width: 196rpx;
height: 196rpx;
border-radius: 50%;
background-color: rgba(255,255,255,0.04);
left: -92rpx;
bottom: 60rpx;
}
.bg-right{
position: absolute;
width: 520rpx;
height: 520rpx;
border-radius: 50%;
background-color: rgba(255,255,255,0.04);
right: -168rpx;
top: -142rpx;
}
.head-content{
width: 100%;
display: flex;
justify-content: space-between;
.head-img{
width: 100rpx;
height: 100rpx;
border: 2rpx solid #FFFFFF;
box-sizing: border-box;
margin-right: 20rpx;
border-radius: 50%;
}
.head-title{
font-size: 36rpx;
color: #FFFFFF;
font-weight: bold;
width: 390rpx;
}
.head-menu{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #FFFFFF;
&:nth-child(n+2){
margin-left: 30rpx;
}
&>text:nth-child(1){
font-size: 50rpx;
}
&>text:nth-child(2){
font-size: 24rpx;
}
}
}
}
.notice{
width: 686rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
margin: -50rpx auto 0;
position: relative;
z-index: 9;
padding: 16rpx 4rpx 0;
box-sizing: border-box;
}
.card{
padding: 30rpx;
width: 686rpx;
height: 287rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
margin: 30rpx auto 0;
&:last-child{
margin-bottom: 50rpx;
}
.title{
font-size: 32rpx;
color: #222222;
font-weight: bold;
}
.item{
box-sizing: border-box;
padding: 0 20rpx;
text-align: center;
font-size: 24rpx;
color: #777777;
.num{
font-size: 36rpx;
color: #222222;
font-weight: bold;
// word-break: break-all;
// line-height: 1;
}
}
}
</style>

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

@ -126,6 +126,10 @@
name: '积分商城订单', name: '积分商城订单',
icon: 'icon-huiyuan', icon: 'icon-huiyuan',
path: '/pages/point/exchangeRecord/exchangeRecord' path: '/pages/point/exchangeRecord/exchangeRecord'
},{
name: '商家中心',
icon: 'icon-huiyuan',
path: '/pages/business/center/center'
}] }]
} }
} }

Write Preview
Loading…
Cancel
Save