订单页静态界面完善
This commit is contained in:
parent
f36da921c8
commit
e1516a9a43
@ -24,7 +24,8 @@
|
||||
<Loading :show="loading" />
|
||||
<view @click="goTop">
|
||||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :duration="500"
|
||||
:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #96fe11 0%, #f0fdbf 100%)',
|
||||
:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #f8b500 0%, #fceabb 100%)',
|
||||
boxShadow: '0rpx 0rpx 12rpx rgba(202,202,182,0.5)',
|
||||
filter: 'opacity(0.96)'}"></u-back-top>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
126
aircraft/server/order/components/movable.vue
Normal file
126
aircraft/server/order/components/movable.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 悬浮按钮 -->
|
||||
<movable-area class="movableArea">
|
||||
<movable-view class="movableView" :position="position" :x="x" :y="y"
|
||||
:direction="direction" @click="handleClickAdd"
|
||||
:damping="damping" @change="onChange" @touchend="onTouchend">
|
||||
<u-icon :name="iconName" size="32"></u-icon>
|
||||
<text>新增</text>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x1: 0,
|
||||
x2: 0,
|
||||
y1: 0,
|
||||
y2: 0,
|
||||
move: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
damping: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: "all"
|
||||
},
|
||||
position: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
iconName: {
|
||||
type: String,
|
||||
default: 'plus'
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// 获取屏幕尺寸
|
||||
await uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.x1 = 0;
|
||||
this.x2 = parseInt(res.windowWidth) - 50;
|
||||
this.y1 = 0;
|
||||
this.y2 = parseInt(res.windowHeight) - 20;
|
||||
if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
|
||||
if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.7);
|
||||
if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
|
||||
if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
|
||||
this.move.x = this.x;
|
||||
this.move.y = this.y;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 更改位置
|
||||
onChange(e) {
|
||||
if (e.detail.source === "touch") {
|
||||
this.move.x = e.detail.x;
|
||||
this.move.y = e.detail.y;
|
||||
}
|
||||
},
|
||||
// 拖动
|
||||
onTouchend() {
|
||||
this.x = this.move.x;
|
||||
this.y = this.move.y;
|
||||
setTimeout(() => {
|
||||
if (this.move.x < this.x2 / 2) this.x = this.x1;
|
||||
else this.x = this.x2;
|
||||
}, 100)
|
||||
},
|
||||
// 点击新增
|
||||
handleClickAdd(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.movableArea {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
|
||||
z-index: 80;
|
||||
|
||||
.movableView {
|
||||
pointer-events: auto; //可以点击
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 78rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(202,202,182,0.5);
|
||||
background: #FEE547;
|
||||
text{
|
||||
margin-top: 6rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +1,57 @@
|
||||
<template>
|
||||
<div class="aircraft-order">
|
||||
<Topnav :topLevel="topLevel" title="爱尚云" />
|
||||
<u-image width="100%" :src="fileUrl+banner" mode="widthFix" />
|
||||
<view class="order-list">
|
||||
<view class="order-item">
|
||||
|
||||
<view class="order-item" v-for="(item,index) in orders" :key="index">
|
||||
<view class="item-first">
|
||||
<view class="item-status">{{ item.mainOrderStatus }}</view>
|
||||
<view class="item-type">订单类型：<text>{{ item.orderType }}</text></view>
|
||||
</view>
|
||||
<view class="item-second">
|
||||
<view class="item-spot">
|
||||
<view class="item-dot"/>景区：{{ item.attractionId }}
|
||||
</view>
|
||||
<view class="item-route">
|
||||
<view class="item-dot"/>路线：{{ item.routeName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-third">
|
||||
<view class="item-identity">
|
||||
<u-image class="item-avatar" width="80rpx" height="80rpx"
|
||||
:src="fileUrl+(item.gender === 0 ? boyIcon : girlIcon)" />
|
||||
<view class="item-self">
|
||||
<text class="item-name">{{ item.customerName }}</text>
|
||||
<text class="item-phone">{{ item.customerPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-active">
|
||||
<u-button type="warning" :custom-style="customStyle" :hair-line="false">执行任务</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-empty" v-if="orders.length===0">
|
||||
<u-empty text="订单为空" mode="list"
|
||||
src="/static/empty.png" icon-size="300" font-size="40"
|
||||
margin-top="250"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
<Movable :iconName="fileUrl+addIcon" />
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
import Movable from './components/movable.vue';
|
||||
import Topnav from '@/components/topnav/index.vue';
|
||||
export default {
|
||||
// #ifdef MP
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
},
|
||||
// #endif
|
||||
components: { Movable, Topnav },
|
||||
props: {
|
||||
topLevel:{
|
||||
type: Number,
|
||||
@ -29,7 +63,58 @@ export default {
|
||||
fileUrl: configService.fileUrl + 'aerocraft/order/',//订单页图标基础路径
|
||||
// 轮播图
|
||||
banner: 'banner.png',
|
||||
|
||||
// 新增图标
|
||||
addIcon: 'add.png',
|
||||
// 女生头像
|
||||
girlIcon: 'girl.png',
|
||||
// 男生头像
|
||||
boyIcon: 'boy.png',
|
||||
// 订单列表
|
||||
orders: [{
|
||||
mainOrderStatus: '待接单',
|
||||
orderType: '载物',
|
||||
attractionId: '白云山',
|
||||
customerPhone: '13624566325',
|
||||
routeName: '南门→山顶广场',
|
||||
gender: 1,
|
||||
customerName: '李晓霞'
|
||||
},{
|
||||
mainOrderStatus: '待接单',
|
||||
orderType: '载人',
|
||||
attractionId: '白云山',
|
||||
customerPhone: '13624566325',
|
||||
routeName: '南门→山顶广场',
|
||||
gender: 0,
|
||||
customerName: '李道明'
|
||||
},{
|
||||
mainOrderStatus: '待接单',
|
||||
orderType: '载物',
|
||||
attractionId: '白云山',
|
||||
customerPhone: '13624566325',
|
||||
routeName: '南门→山顶广场',
|
||||
gender: 1,
|
||||
customerName: '李晓霞'
|
||||
},{
|
||||
mainOrderStatus: '待接单',
|
||||
orderType: '载物',
|
||||
attractionId: '白云山',
|
||||
customerPhone: '13624566325',
|
||||
routeName: '南门→山顶广场',
|
||||
gender: 1,
|
||||
customerName: '李晓霞'
|
||||
}],
|
||||
// 执行任务按钮样式
|
||||
customStyle: {
|
||||
backgroundColor: '#FEE547',
|
||||
color: '#333333',
|
||||
fontSize: '30rpx',
|
||||
fontWeight: 'bold',
|
||||
fontFamily: 'Source Han Sans SC',
|
||||
width: '180rpx',
|
||||
height: '72rpx',
|
||||
borderRadius: '12rpx',
|
||||
border: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@ -55,6 +140,104 @@ export default {
|
||||
border-radius: 24rpx 16rpx 16rpx 16rpx;
|
||||
.order-item{
|
||||
border-radius: 24rpx 16rpx 16rpx 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0rpx 0rpx 38rpx;
|
||||
background: #FFFFFF;
|
||||
margin-bottom: 26rpx;
|
||||
.item-first{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item-status{
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(0deg, #666666, #333333);
|
||||
border-radius: 24rpx 0rpx 30rpx 0rpx;
|
||||
margin-right: 30rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FFFEFE;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.item-type{
|
||||
margin-top: 20rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
text{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-second{
|
||||
margin: 38rpx 30rpx 0;
|
||||
border-bottom: 2rpx solid #E6E6E6;
|
||||
.item-spot,.item-route{
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item-dot{
|
||||
background-color: #FCCF16;
|
||||
border-radius: 50%;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
.item-spot{
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.item-route{
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
}
|
||||
.item-third{
|
||||
margin: 28rpx 30rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.item-identity{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item-avatar{
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
.item-self{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
.item-name{
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.item-phone{
|
||||
margin-bottom: 6rpx;
|
||||
font-family: Arial;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-active{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-empty{
|
||||
&::v-deep .u-icon__label{
|
||||
margin-top: 24rpx !important;
|
||||
font-weight: 500;
|
||||
font-family: Source Han Sans SC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
76
components/topnav/index.vue
Normal file
76
components/topnav/index.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<view class="nav-top" :style="{ height: CustomBar+'px',
|
||||
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }">
|
||||
<view class="nav-content" :style="{ paddingTop: StatusBar+'px' }">
|
||||
<u-icon v-if="showBack" name="arrow-left" size="36" @click="back"
|
||||
:color="topLevel===0? '#ffffff00' : `rgba(51, 51, 51,${topLevel})`"></u-icon>
|
||||
<view style="width: 35rpx;height: 35rpx;" v-else />
|
||||
<text :style="{ color: topLevel===0? '#ffffff00' : `rgba(51, 51, 51,${topLevel})` }">{{ title }}</text>
|
||||
<view style="width: 35rpx;height: 35rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// #ifdef MP
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
},
|
||||
// #endif
|
||||
props:{
|
||||
topLevel:{
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
title:{
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
showBack:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
// #ifdef MP
|
||||
// 微信小程序自定义导航栏参数
|
||||
StatusBar: this.StatusBar || 0,
|
||||
CustomBar: this.CustomBar || 0
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 返回
|
||||
back(){
|
||||
uni.navigateBack();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav-top{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background-color: aliceblue;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
.nav-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
width: 100%;
|
||||
text{
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/empty.png
Normal file
BIN
static/empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Loading…
Reference in New Issue
Block a user