订单页静态界面完善
This commit is contained in:
parent
f36da921c8
commit
e1516a9a43
@ -24,7 +24,8 @@
|
|||||||
<Loading :show="loading" />
|
<Loading :show="loading" />
|
||||||
<view @click="goTop">
|
<view @click="goTop">
|
||||||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :duration="500"
|
<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>
|
filter: 'opacity(0.96)'}"></u-back-top>
|
||||||
</view>
|
</view>
|
||||||
</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>
|
<template>
|
||||||
<div class="aircraft-order">
|
<div class="aircraft-order">
|
||||||
|
<Topnav :topLevel="topLevel" title="爱尚云" />
|
||||||
<u-image width="100%" :src="fileUrl+banner" mode="widthFix" />
|
<u-image width="100%" :src="fileUrl+banner" mode="widthFix" />
|
||||||
<view class="order-list">
|
<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>
|
</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>
|
<u-toast ref="uToast"></u-toast>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import configService from '@/common/config.service.js';
|
import configService from '@/common/config.service.js';
|
||||||
|
import Movable from './components/movable.vue';
|
||||||
|
import Topnav from '@/components/topnav/index.vue';
|
||||||
export default {
|
export default {
|
||||||
// #ifdef MP
|
// #ifdef MP
|
||||||
options: {
|
options: {
|
||||||
styleIsolation: 'shared'
|
styleIsolation: 'shared'
|
||||||
},
|
},
|
||||||
// #endif
|
// #endif
|
||||||
|
components: { Movable, Topnav },
|
||||||
props: {
|
props: {
|
||||||
topLevel:{
|
topLevel:{
|
||||||
type: Number,
|
type: Number,
|
||||||
@ -29,7 +63,58 @@ export default {
|
|||||||
fileUrl: configService.fileUrl + 'aerocraft/order/',//订单页图标基础路径
|
fileUrl: configService.fileUrl + 'aerocraft/order/',//订单页图标基础路径
|
||||||
// 轮播图
|
// 轮播图
|
||||||
banner: 'banner.png',
|
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:{
|
methods:{
|
||||||
@ -55,6 +140,104 @@ export default {
|
|||||||
border-radius: 24rpx 16rpx 16rpx 16rpx;
|
border-radius: 24rpx 16rpx 16rpx 16rpx;
|
||||||
.order-item{
|
.order-item{
|
||||||
border-radius: 24rpx 16rpx 16rpx 16rpx;
|
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