hly
/
hotel-tablecloth-uniapp-24-08-29
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传分类、个人中心、订单中心

master
前端-胡立永 1 year ago
parent
b6c05d81b0
commit
7d5f7427e5
19 changed files with 710 additions and 66 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -0
      App.vue
  2. +13
    -52
      components/base/navbar.vue
  3. +10
    -3
      components/base/tabbar.vue
  4. +73
    -0
      components/userShop/userShopCommission.vue
  5. +159
    -6
      pages/index/category.vue
  6. +239
    -2
      pages/index/center.vue
  7. +204
    -1
      pages/index/order.vue
  8. BIN
      static/image/center/1.png
  9. BIN
      static/image/center/10.png
  10. BIN
      static/image/center/2.png
  11. BIN
      static/image/center/3.png
  12. BIN
      static/image/center/4.png
  13. BIN
      static/image/center/5.png
  14. BIN
      static/image/center/6.png
  15. BIN
      static/image/center/7.png
  16. BIN
      static/image/center/8.png
  17. BIN
      static/image/center/9.png
  18. +6
    -1
      store/store.js
  19. +2
    -1
      uni_modules/uv-ui-tools/libs/css/color.scss

+ 4
- 0
App.vue View File

@ -14,5 +14,9 @@
/*每个页面公共css */ /*每个页面公共css */
body{ body{
background-color: #f7f7f7; background-color: #f7f7f7;
font-size: 30rpx;
}
.page{
padding-top: var(--window-top);
} }
</style> </style>

+ 13
- 52
components/base/navbar.vue View File

@ -1,10 +1,12 @@
<template> <template>
<view class="navbar">
<view class="title">
<view class="navbar"
:style="{backgroundColor : bgColor}">
<view class="title"
:style="{backgroundColor : bgColor}">
<view class="left"> <view class="left">
<uv-icon name="arrow-left" <uv-icon name="arrow-left"
v-if="leftClick" v-if="leftClick"
@click="leftClick()"
@click="$emit('leftClick')"
color="#333" size="46rpx"></uv-icon> color="#333" size="46rpx"></uv-icon>
</view> </view>
<view>{{ title }}</view> <view>{{ title }}</view>
@ -44,7 +46,7 @@
default : '' default : ''
}, },
leftClick : { leftClick : {
type : Function,
type : Boolean,
}, },
moreClick : { moreClick : {
type : Function, type : Function,
@ -59,6 +61,9 @@
}, },
moreText : { moreText : {
},
bgColor : {
default : '#fff'
} }
}, },
created() { created() {
@ -78,61 +83,17 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar{ .navbar{
width: 100%; width: 100%;
height: 100rpx;
.cover{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 9999999;
}
.plusCircle{
position: fixed;
top: calc(100rpx + var(--status-bar-height));
right: 10rpx;
background-color: rgb(76, 76, 76);
z-index: 99999999;
border-radius: 10rpx;
animation: fade-in .5s;
&::after{
content: '';
display: block;
position: absolute;
top: -34rpx;
right: 35rpx;
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
border-top: 20rpx solid transparent;
border-bottom: 20rpx solid rgb(76, 76, 76);
}
&>view{
display: flex;
color: #fff;
width: 300rpx;
height: 120rpx;
align-items: center;
border-bottom: 1px solid #ffffff22;
font-size: 30rpx;
.icon{
padding-left: 30rpx;
padding-right: 20rpx;
image{
width: 40rpx;
height: 40rpx;
}
}
}
}
height: 120rpx;
padding-top: var(--status-bar-height);
} }
.title{ .title{
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
padding-top: var(--status-bar-height);
padding-top: calc(var(--status-bar-height) + 20rpx);
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
background-color: #f7f7f7;
background-color: #fff;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 32rpx; font-size: 32rpx;


+ 10
- 3
components/base/tabbar.vue View File

@ -4,6 +4,7 @@
:class="{item : true, active : select == index}" :class="{item : true, active : select == index}"
v-for="(item, index) in list" v-for="(item, index) in list"
:key="index" :key="index"
v-if="!item.isNotShop || !userShop"
@click="toPath(item, index)"> @click="toPath(item, index)">
<view class="icon"> <view class="icon">
<image :src="select == index ? <image :src="select == index ?
@ -18,9 +19,13 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
export default { export default {
name:"tabbar", name:"tabbar",
props : ['select'], props : ['select'],
computed : {
...mapGetters(['userShop']),
},
data() { data() {
return { return {
list : [ list : [
@ -34,7 +39,8 @@
"selectedIconPath": "/static/image/tabbar/category-a.png", "selectedIconPath": "/static/image/tabbar/category-a.png",
"iconPath": "/static/image/tabbar/category.png", "iconPath": "/static/image/tabbar/category.png",
"pagePath": "/pages/index/category", "pagePath": "/pages/index/category",
"title": "分类"
"title": "分类",
isNotShop : true,
}, },
{ {
"selectedIconPath": "/static/image/tabbar/order-a.png", "selectedIconPath": "/static/image/tabbar/order-a.png",
@ -46,7 +52,8 @@
"selectedIconPath": "/static/image/tabbar/cart-a.png", "selectedIconPath": "/static/image/tabbar/cart-a.png",
"iconPath": "/static/image/tabbar/cart.png", "iconPath": "/static/image/tabbar/cart.png",
"pagePath": "/pages/index/cart", "pagePath": "/pages/index/cart",
"title": "购物车"
"title": "购物车",
isNotShop : true,
}, },
{ {
"selectedIconPath": "/static/image/tabbar/center-a.png", "selectedIconPath": "/static/image/tabbar/center-a.png",
@ -80,7 +87,7 @@
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
height: 120rpx; height: 120rpx;
padding-bottom: 10rpx;
padding-bottom: env(safe-area-inset-bottom);
z-index: 999999; z-index: 999999;
bottom: 0; bottom: 0;
left: 0; left: 0;


+ 73
- 0
components/userShop/userShopCommission.vue View File

@ -0,0 +1,73 @@
<template>
<view class="commission">
<image src="/static/image/center/10.png" mode=""></image>
<view class="price">
<view class="title">
总佣金（元）
</view>
<view class="num">
7890.34元
</view>
</view>
<view class="btn">
提现
</view>
</view>
</template>
<script>
export default {
name: "userShopCommission",
data() {
return {
};
}
}
</script>
<style scoped lang="scss">
.commission {
width: 700rpx;
height: 300rpx;
position: relative;
margin: 20rpx auto;
color: #fff;
image {
width: 700rpx;
height: 300rpx;
position: absolute;
border-radius: 20rpx;
}
.price {
position: absolute;
left: 50rpx;
top: 80rpx;
font-weight: 900;
.title {
font-size: 32rpx;
}
.num {
font-size: 44rpx;
margin-top: 20rpx;
}
}
.btn {
position: absolute;
right: 50rpx;
bottom: 50rpx;
background-color: #FDC440;
width: 160rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30rpx;
}
}
</style>

+ 159
- 6
pages/index/category.vue View File

@ -1,27 +1,180 @@
<template> <template>
<view class="page"> <view class="page">
<tabber select="1"/>
<navbar/>
<view class="category">
<uv-vtabs
:chain="chain"
:list="category"
height="1000px"
:barItemBadgeStyle="{right:'20px',top:'12px'}"
@change="change">
<uv-vtabs-item>
<view class="category-title">
租赁
</view>
<view class="list">
<view class="item" v-for="(item,index) in list" :key="index">
<view class="item-image">
<image
:src="item.image"
mode="aspectFill"></image>
</view>
<view class="item-unit">
<text class="text">{{item.unit}}</text>
</view>
</view>
</view>
</uv-vtabs-item>
</uv-vtabs>
</view>
<tabber select="1" />
</view> </view>
</template> </template>
<script> <script>
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
export default { export default {
components : {
components: {
tabber, tabber,
}, },
data() { data() {
return { return {
category: [
{
name : '桌布'
},
{
name : '桌布'
},
{
name : '桌布'
},
],
list : [
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
],
chain: false,
value: 0
} }
}, },
computed : {
computed: {
list2() {
const _list = this.list[this.value]?.childrens;
return _list ? _list : [];
}
}, },
methods: {
onReady() {
},
methods: {
change(index) {
console.log('选项改变：', index)
this.value = index;
}
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
</style>
.category {
font-size: 30rpx;
color: #333;
min-height: 100vh;
.category-title{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 120rpx;
&::before,
&::after {
position: absolute;
top: 50%;
content: '';
width: 10%;
border-top: 2rpx solid black;
}
&::before {
left: 25%;
}
&::after {
right: 25%;
}
}
.list{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 490rpx;
.item {
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
.item-image {
width: 120rpx;
height: 120rpx;
image{
height: 100%;
width: 100%;
border-radius: 50%;
}
}
.item-unit {
font-size: 24rpx;
margin-top: 15rpx;
color: #555;
}
}
.gap {
padding: 0 30rpx;
}
}
}
</style>

+ 239
- 2
pages/index/center.vue View File

@ -1,22 +1,155 @@
<template> <template>
<view class="page"> <view class="page">
<navbar
title="个人中心"
/>
<view class="head">
<view class="headImage">
<image src="" mode=""></image>
</view>
<view class="info">
<view class="name">
QWEQWE
</view>
<view class="vip">
VIP1
</view>
</view>
</view>
<!-- 水洗店 -->
<view class="userShop" v-if="userShop">
<userShopCommission />
<view class="userList">
<view class="title">
我的用户
</view>
<view class="list">
<view class="item"
v-for="(item, index) in 20"
:key="index">
<view class="name">
客户：王生
</view>
<view class="num">
剩余水洗布：198
</view>
</view>
</view>
</view>
</view>
<!-- 酒店 -->
<view class="user" v-else>
<view class="line">
<view class="item">
<view class="image">
<image src="/static/image/center/1.png" mode=""></image>
</view>
<view class="">
余额￥3000
</view>
</view>
<view class="item">
<view class="image">
<image src="/static/image/center/4.png" mode=""></image>
</view>
<view class="">
押金￥30000
</view>
</view>
</view>
<view class="line grid">
<view class="title">
常用功能
</view>
<uv-grid :col="4" :border="false">
<uv-grid-item>
<image class="image"
src="/static/image/center/7.png"
mode=""></image>
<text class="grid-text">地址管理</text>
</uv-grid-item>
<uv-grid-item>
<image class="image"
src="/static/image/center/8.png"
mode=""></image>
<text class="grid-text">订单管理</text>
</uv-grid-item>
<uv-grid-item>
<image class="image"
src="/static/image/center/5.png"
mode=""></image>
<text class="grid-text">换货</text>
</uv-grid-item>
<uv-grid-item>
<image class="image"
src="/static/image/center/7.png"
mode=""></image>
<text class="grid-text">退货</text>
</uv-grid-item>
</uv-grid>
</view>
<view class="line grid">
<uv-grid :col="4" :border="false">
<uv-grid-item>
<image class="image"
src="/static/image/center/9.png"
mode=""></image>
<text class="grid-text">联系客服</text>
</uv-grid-item>
<uv-grid-item>
<image class="image"
src="/static/image/center/6.png"
mode=""></image>
<text class="grid-text">我的租赁</text>
</uv-grid-item>
<uv-grid-item>
<image class="image"
src="/static/image/center/7.png"
mode=""></image>
<text class="grid-text">租赁车</text>
</uv-grid-item>
<uv-grid-item>
<image class="image"
src="/static/image/center/7.png"
mode=""></image>
<text class="grid-text">申请成为水洗店</text>
</uv-grid-item>
</uv-grid>
</view>
</view>
<tabber select="4"/> <tabber select="4"/>
</view> </view>
</template> </template>
<script> <script>
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import { mapGetters } from 'vuex'
import userShopCommission from '@/components/userShop/userShopCommission.vue'
export default { export default {
components : { components : {
tabber, tabber,
userShopCommission,
},
computed : {
...mapGetters(['userShop']),
}, },
data() { data() {
return { return {
} }
}, },
computed : {
},
methods: { methods: {
} }
@ -24,4 +157,108 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
image{
width: 100%;
height: 100%;
}
.head{
display: flex;
background-color: #fff;
padding: 40rpx 20rpx;
align-items: center;
.headImage{
width: 120rpx;
height: 120rpx;
background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.info{
font-size: 28rpx;
.vip{
background-color: #FCCC92;
color: #FA6239;
width: 100rpx;
display: flex;
justify-content: center;
align-items: center;
height: 40rpx;
border-radius: 20rpx;
margin-top: 20rpx;
}
}
}
.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{
}
}
}
}
}
.user{
.line{
display: flex;
background-color: #fff;
margin-top: 20rpx;
padding: 20rpx 0;
.item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
&:nth-child(1){
border-right: 1px solid #00000013;
}
.image{
width: 100rpx;
height: 70rpx;
margin-right: 20rpx;
}
}
}
.grid{
flex-direction: column;
font-size: 26rpx;
padding: 20rpx;
.title{
margin-bottom: 30rpx;
font-size: 28rpx;
font-weight: 600;
}
.image{
width: 70rpx;
height: 70rpx;
margin-bottom: 10rpx;
}
text{
text-align: center;
width: 120rpx;
}
}
}
</style> </style>

+ 204
- 1
pages/index/order.vue View File

@ -1,6 +1,81 @@
<template> <template>
<view class="page"> <view class="page">
<navbar
title="订单中心"
/>
<uv-tabs :list="tabs"
:activeStyle="{color : '#FD5100', fontWeight : 600}"
lineColor="#FD5100"
lineHeight="8rpx"
lineWidth="50rpx"
@click="clickTabs"></uv-tabs>
<view v-if="orderList.length > 0" class="list">
<view class="item"
v-for="(item, index) in orderList"
@click="toOrderDetail(item.id)"
:key="index">
<view class="top">
<view class="service">
<text>{{item.projectId_dictText}}</text>
<text>{{item.type_dictText}}</text>
</view>
<view class="status">
<text> {{item.state_dictText}}</text>
</view>
</view>
<view class="content">
<view class="left">
<image mode="aspectFill" :src="item.image"></image>
</view>
<view class="right">
<view class="text-hidden-1">
客户姓名：{{item.name}}
</view>
<view class="text-hidden-1">
产品规格：{{item.unit}}
</view>
<view class="text-hidden-1">
租赁地址：{{item.address}}
</view>
<!-- <view class="text-hidden-1">
总计时间：{{item.useTime}}分钟
</view> -->
</view>
</view>
<view class="bottom">
<view class="price">
总价格：<text class="num">{{item.money}}元</text>
</view>
<view class="b1">
查看物流
</view>
<!-- <view @click.stop="toPayOrder(item)" class="b2" v-if="item.state == 0">
立即付款
</view>
<view class="b1" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 3">
再来一单
</view>
<view class="b2" @click.stop="toEvaluate(item.id,item.projectId,item.technicianId)" v-if="item.state == 3">
立即评价
</view>
<view class="b2" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 4">
再来一单
</view> -->
</view>
</view>
</view>
<tabber select="2"/> <tabber select="2"/>
</view> </view>
</template> </template>
@ -13,15 +88,143 @@
}, },
data() { data() {
return { return {
tabs: [{
name: '全部'
},
{
name: '租赁押金'
},
{
name: '水洗租赁'
},
{
name: '破损换货'
},
{
name: '退货退款'
}
],
queryParams: {
pageNo: 1,
pageSize: 10
},
orderList: [
{
money : 99.99,
address : '广东省广州市越秀区城南故事C3栋2802',
name : '李**',
phone : '150*****091',
unit : '120*40*75【桌子尺寸】',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
state_dictText : '已完成',
}
], //订单列表数据
} }
}, },
computed : { computed : {
}, },
methods: { methods: {
//点击tab栏
clickTabs(index) {
if (index == 0) {
this.queryParams.state = -1;
} else {
this.queryParams.state = index - 1;
}
this.getOrderList()
},
//跳转订单详情页面
toOrderDetail(id) {
uni.navigateTo({
url: '/pages/order/orderDetail?id=' + id
})
},
getOrderList(){
},
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.list {
.item {
width: calc(100% - 40rpx);
background-color: #fff;
margin: 20rpx;
box-sizing: border-box;
border-radius: 16rpx;
padding: 30rpx;
.top {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 30rpx;
.service {}
.status {
font-size: 26rpx;
font-weight: 600;
}
}
.content {
display: flex;
margin: 10rpx 0;
.left {
width: 150rpx;
height: 150rpx;
border-radius: 10rpx;
image {
width: 150rpx;
height: 150rpx;
border-radius: 10rpx;
}
}
.right {
width: calc(100% - 160rpx);
color: #777;
font-size: 24rpx;
padding-left: 20rpx;
line-height: 40rpx;
background-color: #F8F8F8;
}
}
.bottom {
display: flex;
justify-content: space-between;
font-size: 25rpx;
.price {
font-weight: 900;
text {
color: #ff780099;
font-size: 30rpx;
}
}
.b1 {
border: 1px solid #777;
color: #777;
box-sizing: border-box;
}
.b2 {
background: linear-gradient(178deg, #4FD3BC, #60C285);
color: #fff;
}
view {
margin: 12rpx;
border-radius: 28rpx;
padding: 8rpx 28rpx;
margin-bottom: 0;
}
}
}
}
</style> </style>

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

Before After
Width: 51  |  Height: 49  |  Size: 1.2 KiB

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

Before After
Width: 355  |  Height: 158  |  Size: 45 KiB

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

Before After
Width: 112  |  Height: 126  |  Size: 6.1 KiB

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

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

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

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

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

Before After
Width: 64  |  Height: 64  |  Size: 2.8 KiB

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

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

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

Before After
Width: 64  |  Height: 64  |  Size: 2.4 KiB

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

Before After
Width: 64  |  Height: 64  |  Size: 2.5 KiB

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

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

+ 6
- 1
store/store.js View File

@ -10,7 +10,12 @@ const store = new Vuex.Store({
state: { state: {
configList: [], //配置列表 configList: [], //配置列表
}, },
getters: {},
getters: {
// 角色 true为水洗店 false为酒店
userShop(){
return false
}
},
mutations: { mutations: {
// 初始化配置 // 初始化配置
initConfig(state){ initConfig(state){


+ 2
- 1
uni_modules/uv-ui-tools/libs/css/color.scss View File

@ -6,7 +6,8 @@ $uv-border-color: #dadbde !default;
$uv-bg-color: #f3f4f6 !default; $uv-bg-color: #f3f4f6 !default;
$uv-disabled-color: #c8c9cc !default; $uv-disabled-color: #c8c9cc !default;
$uv-primary: #3c9cff !default;
$uv-primary: #FD5100 !default;
// $uv-primary: #3c9cff !default;
$uv-primary-dark: #398ade !default; $uv-primary-dark: #398ade !default;
$uv-primary-disabled: #9acafc !default; $uv-primary-disabled: #9acafc !default;
$uv-primary-light: #ecf5ff !default; $uv-primary-light: #ecf5ff !default;


Write Preview
Loading…
Cancel
Save