Skip to content

G
gxpt_wechat
Commit 0c7bf820 by zhangzhen
Options

开发保洁管理模块相关内容

parent 78385a44
Showing with 358 additions and 4 deletions
pages.json
......@@ -90,6 +90,15 @@
}
}
,{
"path" : "pages/cleanOrderInfo/cleanOrderInfo",
"style" :
{
"navigationBarTitleText": "保洁订单",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationStyle": "default",
......
pages/cleanManage/cleanManage.vue
<template>
<view class="clean-manage">
<view class="card-box">
<view class="card-box bg-white-box">
<view class="flex-row title-box">
<text class="cuIcon-title text-pink text-lg"></text>
<text class="text-title text-bold text-xl">我的保洁</text>
</view>
<view class="item-box">
<view class="item">
<view class="item" @tap="onNavToInfo">
<view class="icon-box">
<image src="../../static/clean_icon.png" mode="widthFix"></image>
</view>
......@@ -28,6 +28,36 @@
</view>
</view>
<view v-for="(item,index) in list" :key="index" class="card-box bg-white-box">
<view class="store-info">
<view class="flex-between">
<text class="text-title text-lg">{{item.storeName}}</text>
<image src="../../static/map_icon.png" mode="widthFix"></image>
</view>
<view class="">
<text class="text-gray">{{item.address}}</text>
</view>
</view>
<view class="room-box">
<view v-for="(val,k) in item.roomList" class="room-item" :class="val.status==3?'bg-blue':val.status==2?'bg-red':'bg-gray'">
<view class="room-name">
<text>{{val.roomName}}</text>
</view>
<!-- <view class="room-name">
<text>{{val.roomName}}</text>
</view> -->
<view class="room-stauts margin-top">
<text>{{statusEnum[val.status]}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -36,8 +66,132 @@
export default {
data() {
return {
list:[
{
storeName:"测试一号店",
storeId:"100",
address:"武汉市印象国际8楼802",
latitude:'',
longitude:'',
roomList:[
{
roomName:"一帆风顺(111)",
roomId:"100",
status:'1'
},
{
roomName:"二龙戏珠(222)",
roomId:"100",
status:'2'
},
{
roomName:"三羊开泰(333)",
roomId:"100",
status:'3'
},
{
roomName:"四季平安(444)",
roomId:"100",
status:'2'
},
{
roomName:"五福临门(555)",
roomId:"100",
status:'2'
},
{
roomName:"六六大顺(666)",
roomId:"100",
status:'3'
},
{
roomName:"七星高照(777)",
roomId:"100",
status:'1'
},
{
roomName:"八方来财(888)",
roomId:"100",
status:'2'
},
{
roomName:"九九归一(999)",
roomId:"100",
status:'1'
}
]
},
{
storeName:"测试一号店",
storeId:"100",
address:"武汉市印象国际8楼802",
latitude:'',
longitude:'',
roomList:[
{
roomName:"一帆风顺(111)",
roomId:"100",
status:'1'
},
{
roomName:"二龙戏珠(222)",
roomId:"100",
status:'2'
},
{
roomName:"三羊开泰(333)",
roomId:"100",
status:'1'
},
{
roomName:"四季平安(444)",
roomId:"100",
status:'2'
},
{
roomName:"五福临门(555)",
roomId:"100",
status:'3'
},
{
roomName:"六六大顺(666)",
roomId:"100",
status:'3'
},
{
roomName:"七星高照(777)",
roomId:"100",
status:'2'
},
{
roomName:"八方来财(888)",
roomId:"100",
status:'2'
},
{
roomName:"九九归一(999)",
roomId:"100",
status:'1'
}
]
}
],
statusEnum:{
1:'空闲中',
2:'使用中',
3:'待保洁'
}
};
},
onLoad() {
},
methods:{
onNavToInfo(){
uni.navigateTo({
url:"/pages/cleanOrderInfo/cleanOrderInfo"
})
}
}
}
</script>
......@@ -47,10 +201,10 @@
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 30upx;
.card-box{
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 20upx;
width: 94%;
margin-top: 24upx;
......@@ -65,6 +219,7 @@
display: flex;
flex-direction: row;
width: 100%;
padding: 0 1%;
.item{
display: flex;
flex-direction: column;
......@@ -89,4 +244,41 @@
}
}
}
.store-info{
display: flex;
flex-direction: column;
width: 100%;
border-bottom: 1px solid #e5e5e5;
padding: 30upx 20upx;
margin-bottom: 12upx;
.flex-between{
display: flex;
justify-content: space-between;
align-items: center;
image{
display: block;
width: 80upx;
max-width: 140upx;
}
}
}
.bg-white-box{
background-color: #ffffff;
}
.room-box{
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 0 1%;
.room-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 30%;
margin: 12upx 1.6%;
padding: 20upx 0;
border-radius: 20upx;
}
}
</style>
pages/cleanOrderInfo/cleanOrderInfo.vue 0 → 100644
<template>
<view class="clean-order-info">
<view class="card-box">
<form>
<view class="cu-form-group margin-top">
<view class="title">门店名称</view>
<text>测试一号店</text>
</view>
<view class="cu-form-group">
<view class="title">门店地址</view>
<text>武汉市印象国际8楼802</text>
</view>
<view class="cu-form-group">
<view class="title">房间名称</view>
<text>一帆风顺</text>
</view>
<view class="cu-form-group">
<view class="title">房间号</view>
<text>111</text>
</view>
<view class="cu-form-group">
<view class="title">保洁状态</view>
<text>待保洁</text>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
拍照上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="onChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-form-group align-start">
<view class="title">备注描述</view>
<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="请输入描述"></textarea>
</view>
</form>
</view>
<view class="confirm-box">
<view class="confirm-btn">
<button class="cu-btn block bg-blue margin-tb-sm lg" type="">提交并开始保洁</button>
</view>
<view class="open-door-btn">
<button class="cu-btn block bg-pink margin-tb-sm lg" type="">开门</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgList:[],
};
},
onLoad() {
},
methods:{
onChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '召唤师',
content: '确定要删除这段回忆吗？',
cancelText: '再看看',
confirmText: '再见',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
textareaBInput(e) {
this.textareaBValue = e.detail.value
}
}
}
</script>
<style lang="scss">
.clean-order-info{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.card-box{
width: 94%;
border-radius: 24upx;
overflow: hidden;
}
}
.confirm-box{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 24upx 0;
display: flex;
flex-direction: row;
z-index: 999;
.confirm-btn{
width: 76%;
padding: 0 30upx;
}
.open-door-btn{
width: 24%;
padding: 0 30upx 0 0;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment