Skip to content

S
self-support
Commit ac958e52 authored by Facius's avatar Facius
Browse files
Options

详情页面UI修改

parent d9db56f4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 254 additions and 1352 deletions
.env.js
View file @ ac958e52
......@@ -2,7 +2,7 @@
(function() {
let NODE_ENV = 'test'; // dev:开发环境 | test:测试环境 | prod:生产环境
let ENV_VAR = null;
let VERSION_NUMBER = '1.2.9';//版本号
let VERSION_NUMBER = '1.3.1';//版本号
//小程序是否审核通过，参数配置在ucenter库version表，对应版本号的is_audit设置为1，将显示学习视频
if (process.env.NODE_ENV === "development") {
if (NODE_ENV === 'dev') {
......
src/components/order/bottomButtons.vue 0 → 100644
View file @ ac958e52
<template>
<view class="bottom-button">
<view v-for="(item, index) in buttons" :class="['button-view', item.type]">
<u-button :class="['list-button', item.type]" @click="handleClick(index)"
:hover-class="item.type == 'image' ? 'none' : ''" :custom-style="buttonStyle[item.type]" type="primary"
shape="circle">
<view class="image-view" v-if="item.type == 'image'">
<image :src="baseImageUrl + item.image" class="image-content"></image>
</view>
<view :class="['text-content', item.type]">{{item.label}}</view>
</u-button>
</view>
</view>
</template>
<script>
export default {
props: {
buttons: {
type: Array,
default () {
return [{
label: '过程反馈',
type: 'image',
image: 'dianhua.png'
},
{
label: '异常签到',
type: 'image',
image: 'daohang.png'
},
{
label: '接单',
type: 'text',
image: ''
}
]
}
}
},
computed: {
baseImageUrl() {
return process.uniEnv.qn_base_url
},
buttonStyle() {
return {
'image': {
'background-color': 'transparent',
'border-color': 'transparent',
'display': 'flex',
'flex-direction': 'column',
'height': '104rpx',
'width': '82rpx',
'margin-right': '40rpx'
},
'text': {
'background-color': '#2272FF',
'border-color': 'transparent',
'display': 'flex',
'flex-direction': 'column',
'height': '104rpx',
'width': '100%'
},
}
},
},
methods: {
handleClick(index) {
this.$emit('submit', index)
}
}
}
</script>
<style lang="scss" scoped>
.bottom-button {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30rpx 44rpx 30rpx;
.button-view {
&.image {}
&.text {
width: 100%;
}
.list-button {
display: flex;
flex-direction: column;
max-width: 600rpx;
&.image {}
&.text {}
.image-view {
flex-shrink: 0;
background-color: #FFFFFF;
border-radius: 38rpx;
width: 76rpx;
height: 76rpx;
.image-content {
width: 76rpx;
height: 76rpx;
}
}
.text-content {
&.text {
color: #FFFFFF;
font-size: 32rpx;
font-weight: bold;
}
&.image {
color: #333333;
font-size: 20rpx;
line-height: 20rpx;
height: 20rpx;
margin-top: 8rpx;
}
}
}
}
}
</style>
src/components/order/index.vue
View file @ ac958e52
......@@ -196,6 +196,17 @@
showDistance() {
return this.orderType == 0 && this.location.length >= 2 && (this.orderData.contactAddressLatitud || this.orderData.contactAddressLongitud)
},
titles() {
return {
'waitAccept': '待' + this.type0Text, // 待接单、
'waitAppointment': '待预约', // 待预约、
'waitCheckIn': '待签到', // 待签到、
'waitFinish': '待完工', // 待完工、
'audit': '审核中', // 审核中、
'exception': '异常单', // 异常单、
'finish': '已完工', //已完工
}
},
types() {
return {
'waitAccept': 0, // 待接单、
......@@ -207,6 +218,9 @@
'finish': 6, //已完工
}
},
title() {
return this.titles[this.type]
},
orderDistance() {
return this.distance(this.orderData.contactAddressLatitud,this.orderData.contactAddressLongitud, this.location[0], this.location[1])
},
......@@ -267,10 +281,10 @@
methods: {
handleClick() {
// if (this.buttonDisabled) return
this.$emit('action')
this.$emit('action', this.orderData, this.title)
},
handleClickCell() {
this.$emit('click')
this.$emit('click', this.orderData, this.title)
},
handleChange(timestamp) {
if (this.timeout) this.$refs['order-count-down'].seconds += 2
......
src/components/upload - 副本/qiniup.js deleted 100644 → 0
View file @ d9db56f4
import qiniuUploader from '@/include/libs/qiniuUploader.js';
const globalUrl = process.uniEnv || {}
export default {
name: 'qiniup',
components: {},
data() {
return {
domain: 'http://upload.qiniup.com', // 七牛上传域名地址
uptokenURL: globalUrl.ucenterUrl.apiUrl + '/v1/tokens', // 上传token地址
files:[], // 上传文件
fileMaps:[], // 上传文件返回对象
keys:[], // 七牛返回key
uploadToken: '', // 上传token
maximum:999, // 最大上传数量
qiniuOptions: {}, // 七牛上传配置
};
},
created() {
this.initQiniu()
},
methods: {
initQiniu: function() {
var defaulfs = {
// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
region: 'ECN',
bucket: 'fa-cms',
qiniuBucketURLPrefix: 'uploads',
// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
// 由其他程序生成七牛云uptoken，然后直接写入uptoken
uptoken: '',
// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
uptokenURL: this.uptokenURL,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
uptokenFunc: function() {
},
// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain: this.domain,
// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
// 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
shouldUseQiniuFileName: true
};
let options = {}
if(Object.keys(this.qiniuOptions).length) {
Object.assign(options, defaulfs, this.qiniuOptions);
} else {
options = defaulfs;
}
// 将七牛云相关配置初始化进本sdk
qiniuUploader.init(options);
},
getUrlKey(file) {
let index = file.lastIndexOf('/');
let len = file.length
let name = file.substring(index + 1, len)
return name;
},
/**
* 确认上传
* @param {boolean} submit
*/
confirmUpload(submit = false) {
let self = this
const fileList = self.files
if (self.maximum - fileList.length <= 0) {
uni.showToast({
title: '图片数量不能大于' + self.maximum,
icon: 'none'
})
return
}
for (let file of fileList) {
let name = self.getUrlKey(file)
// 交给七牛上传
let item = {
src: '',
id: '',
key:'',
// filesize: '',
progress: 0
}
const params = {
name:name,
file:file,
}
qiniuUploader.upload(params, (res) => {
let inLen = self.maximum - fileList.length
if (inLen > 0) {
item.src = file
item.key = res.key || res.src
self.fileMaps.push(item);
self.keys.push(item.key)
if(submit) {
self.submitFile()
}
} else {
uni.showToast({
title: '图片数量不能大于9'
})
}
}, (error) => {
console.log('error: ' + error);
}, null, (res) => {
item.progress = res.progress
}, () => {
// 取消上传
}, () => {
// `before` 上传前执行的操作
}, (err) => {
// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
});
}
}
}
}
src/components/upload - 副本/upload.js deleted 100644 → 0
View file @ d9db56f4
import qiniuUploader from '@/include/libs/qiniuUploader.js';
const globalUrl = process.uniEnv || {}
export default {
name: 'upload-img',
components: {},
data() {
return {
domain: 'http://upload.qiniup.com',
uptokenURL: globalUrl.ucenterUrl.apiUrl + '/v1/tokens',
imgList: [],
imgs:[],
uploadToken: '',
selectNum:999,
};
},
computed: {
uploadBtnShow() {
let flag = this.imgList.length < this.selectNum
return flag && this.uploadVisible
}
},
created() {
this.initQiniu()
this.initImg();
},
methods: {
initQiniu: function() {
var options = {
// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
region: 'ECN',
bucket: 'fa-cms',
qiniuBucketURLPrefix: 'uploads',
// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
// 由其他程序生成七牛云uptoken，然后直接写入uptoken
uptoken: '',
// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
uptokenURL: this.uptokenURL,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
uptokenFunc: function() {
},
// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain: this.domain,
// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
// 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
shouldUseQiniuFileName: true
};
// 将七牛云相关配置初始化进本sdk
qiniuUploader.init(options);
},
chooseImage() {
if (this.selectNum - this.imgList.length <= 0) {
uni.showToast({
title: '图片数量不能大于' + this.selectNum,
icon: 'none'
})
return
}
uni.chooseImage({
count: this.selectNum, //默认9 this.selectNum
success: (chooseImageRes) => {
for (var i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
let file = chooseImageRes.tempFilePaths[i];
let index = file.lastIndexOf('/');
let len = file.length
let name = file.substring(index + 1, len)
// 交给七牛上传
let newLen = this.selectNum - this.imgList.length
let item = {
src: '',
id: '',
key:'',
// filesize: '',
progress: 0
}
const params = {
name:name,
file:file,
}
if (newLen > 0) {
qiniuUploader.upload(params, (res) => {
let inLen = this.selectNum - this.imgList.length
if (inLen > 0) {
item.src = file
item.key = res.key || res.src
this.imgList.push(item);
this.imgs.push(res.key)
// this.addRecord(item,res)
} else {
uni.showToast({
title: '图片数量不能大于9'
})
}
}, (error) => {
console.log('error: ' + error);
}, null, (res) => {
// item.filesize = res.totalBytesSent
item.progress = res.progress
}, () => {
// 取消上传
}, () => {
// `before` 上传前执行的操作
}, (err) => {
// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
});
}
}
}
})
},
perviewImg(index) {
let urls = []
this.imgList.map(item => {
urls.push(item.src)
})
uni.previewImage({
current: index,
urls: urls
});
},
initImg() {
//传入图片，回显
this.imgList = this.initImgList.map(item=>{
let imgItem = {
src:'',
id:''
}
if(typeof item === 'string'){
imgItem.src = item
}else{
imgItem.src = item.src || item.pic || item.image
imgItem.id = item.id || '0'
}
return imgItem
})
},
// async addRecord(item, res) {
// let path = res.key;
// let hash = res.hash;
// let ext = path.substr(path.lastIndexOf('.') + 1);
// //推送到增加记录接口
// let params = {
// filename: hash + '.' + ext,
// full_url: res.fileURL,
// absolute_path: path,
// filesize: item.filesize,
// ext: ext
// };
// let recordRes = await this.$u.api.qiniuRecord(params);
// if (recordRes.code != 1) {
// uni.showToast({
// title: recordRs.msg,
// icon: 'none'
// })
// return
// }
// item.id = recordRes.data.id.id
// },
async removeImg(index) {
this.imgList.splice(index, 1)
// this.$emit('image-change', this.imgList) //将图片回传父页面
},
getUrlKey(file) {
let index = file.lastIndexOf('/');
let len = file.length
let name = file.substring(index + 1, len)
return name;
}
}
}
src/pages.json
View file @ ac958e52
......@@ -42,8 +42,8 @@
{
"path": "pages/login/index",
"style": {
// "navigationBarTitleText": "授权登录",
"navigationBarBackgroundColor":"#FFFFFF",
// "navigationBarTitleText": "授权登录",
"navigationBarBackgroundColor":"#FFFFFF",
"disableScroll": true
}
}
......
src/pages/index/index.vue
View file @ ac958e52
......@@ -51,7 +51,7 @@
scroll-anchoring> -->
<view v-for="(item, index) in orderList" :key="index">
<OrderCell :orderData="item" type="waitAccept" :location="location"
@click="handleClick(item.orderId)" @action="handleAction(item.orderId)">
@click="handleClick" @action="handleClick">
</OrderCell>
</view>
<u-loadmore v-show="(search.pageNumber == 1 && loadedOrder) || search.pageNumber > 2" :status="currentLoadStatus" bgColor="#F4F5F7"></u-loadmore>
......@@ -166,15 +166,9 @@
this.getOrderCount()
this.initSettleInfo();
},
handleClick(orderId) { // 点击了cell
this.viewOderItem(orderId)
},
handleAction(orderId) { // 点击了按钮
this.viewOderItem(orderId)
},
viewOderItem(orderId) { // 跳转工单详情页面
handleClick(item, title) { // 跳转工单详情页面
uni.navigateTo({
url: 'pages/order/detail?id=' + orderId
url: 'pages/order/detail?id=' + item.orderId + '&title=' + title
})
},
async initSettleInfo() {
......
src/pages/index/order.vue
View file @ ac958e52
......@@ -28,8 +28,8 @@
<NoOrder v-if="noMore" type="black" :customStyle="noOrderCustomStyle" />
<template v-else>
<view v-for="(item, index) in orderList" :key="item.orderId">
<OrderCell :orderData="item" :type="orderType" :location="dataValue" @click="handleClick(item)"
@action="handleAction(item)"> </OrderCell>
<OrderCell :orderData="item" :type="orderType" :location="dataValue" @click="handleClick"
@action="handleClick"> </OrderCell>
</view>
<u-loadmore v-show="(pageNumber == 1 && loaded) || pageNumber > 2" :status="loadStatus" bgColor="#F4F5F7"></u-loadmore>
</template>
......@@ -282,17 +282,15 @@
}
});
},
viewOderItem(orderId) { // 跳转工单详情页面
uni.navigateTo({
url: 'pages/order/detail?id=' + orderId
})
},
handleClick(item) {
handleClick(item, title) {
console.log(item, title)
if(item.orderStatus===86 || item.orderStatus===88){
this.filish(item)
return
}
this.viewOderItem(item.orderId)
uni.navigateTo({
url: 'pages/order/detail?id=' + item.orderId + '&title=' + title
})
},
filish(item){
// 去完工
......@@ -305,13 +303,13 @@
+ "&auditResultsId=" + (item.auditResults?Object.keys(item.auditResults)[Object.keys(item.auditResults).length - 1]:'')
})
},
handleAction(item) {
if(item.orderStatus===86 || item.orderStatus===88){
this.filish(item)
return
}
this.viewOderItem(item.orderId)
},
// handleAction(item) {
// if(item.orderStatus===86 || item.orderStatus===88){
// this.filish(item)
// return
// }
// this.viewOderItem(item.orderId)
// },
handleClickSearch() {
uni.navigateTo({
url: 'pages/order/search'
......
src/pages/order/complete copy.vue deleted 100644 → 0
View file @ d9db56f4
This diff is collapsed.
src/pages/order/detail.vue
View file @ ac958e52
<template>
<view class="order-wrap">
<u-navbar back-icon-color="#FFFFFF" :background="background" :border-bottom="false"></u-navbar>
<view class="header">
<view class="title">订单信息</view>
<view v-show="allowRejection" class="button" @click="rejectOrder">拒单</view>
</view>
<u-navbar :title="title" title-color="#FFFFFF" title-size="32" back-icon-color="#FFFFFF" :background="background" :border-bottom="false"></u-navbar>
<view class="content">
<view class="header" v-if="order.currentOverTime && showTimeOut">
<view class="title">
<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{timeout ? '超' : '剩'}}</text></view>
<u-count-down :timestamp="timestampDiff(order.currentOverTime)" font-size="44" show-days separator="zh" separator-size="44"
:color="tipColor" :separator-color="tipColor" @change="timeOutChange(order.currentOverTime)" ref="order-count-down"></u-count-down>
</view>
<u-button v-if="allowRejection || 1" :custom-style="customStyle" size="mini" @click="rejectOrder" shape="circle">拒单</u-button>
</view>
<view class="card base-item">
<Detail :order="order" :readMore.sync="readMore" :operate="isAllowDianhuaAndDaohang"></Detail>
</view>
......@@ -36,8 +40,9 @@
</view>
</view>
</view>
<!-- 不是从我的页面进来不用显示 -->
<!-- 不是从我的页面进来才显示 -->
<template v-if="!isFromMine">
<BottomButtons :buttons="buttons" @submit="handleSubmit"></BottomButtons>
<view v-if="showCenterBtn" class="toolbar">
<!-- 背景，内容，请求接口 根据状态不同改变 {{operationDoing[order.orderStatus].background}} -->
<!-- 过程反馈 -->
......@@ -54,8 +59,8 @@
<view v-if="showCenterBtn" @click="$u.throttle(handleClickSure, 500)" class="button" :class="['center-button-view', btnClass]">
<text>{{ centerButtonText }}</text>
<view v-if="order.currentOverTime && showTimeOut" class="time-view">
<text style="padding-right: 8rpx;">{{order.currentOverTime > new Date().getTime()?'剩':'超'}}</text>
<u-count-down
<text style="padding-right: 8rpx;">{{timeOut?'剩':'超'}}</text>
<!-- <u-count-down
:timestamp="timestampDiff(order.currentOverTime)"
font-size="20"
color="#FFFFFF"
......@@ -70,7 +75,7 @@
:show-seconds="!threeDays()"
:separator="threeDays() ? 'zh' : 'colon'"
@change="timeOutChange(order.currentOverTime)" >
</u-count-down>
</u-count-down> -->
</view>
</view>
</view>
......@@ -102,6 +107,7 @@
import Customer from "@/components/mine/customer.vue"
import Record from "@/components/order/performanceRecord.vue"
import Detail from "@/components/order/detail.vue"
import BottomButtons from "@/components/order/bottomButtons.vue"
let now = new Date(new Date().toLocaleDateString()).getTime();
export default {
components: {
......@@ -110,11 +116,13 @@
// PopView,
Customer,
Record,
Detail
Detail,
BottomButtons
},
mixins: [baseFile],
data() {
return {
title: ' ',
readMore: true,
dateList: [
{day: now, timeRange: []},
......@@ -177,7 +185,22 @@
centerBtnDisabled:false,
isFromMine: false,
settlementInfo: {formatTime: '-', list: [], amount: ''},
unloaded: false
unloaded: false,
buttons: [{
label: '过程反馈',
type: 'image',
image: 'dianhua.png'
},
{
label: '异常签到',
type: 'image',
image: 'daohang.png'
},
{
label: '接单',
type: 'text',
image: ''
}]
}
},
onLoad(option) {
......@@ -186,6 +209,11 @@
if (option && option.id) {
this.orderId = option.id
}
if (option && option.title) {
this.title = decodeURIComponent(option.title)
} else {
this.title = "订单信息"
}
this.loadOrderDetail()
this.getLocation()
if (option && option.isFromMine) {
......@@ -211,7 +239,19 @@
let btnClass = "appoint-btn"
return btnClass
},
timeout() {
return this.order.currentOverTime < new Date().getTime()
},
tipColor() {
return this.timeout ? '#FA5A49' : '#FF930D'
},
customStyle() {
return {
'height': '48rpx',
'width': '100rpx',
'color': '#2272FF'
}
}
},
methods: {
updateLocation(){
......@@ -506,6 +546,9 @@
this.handleBtn()
}
},
handleSubmit(index) {
console.log(index)
},
handleBtn() {
console.log('click button')
if(!this.submitType){
......@@ -717,7 +760,7 @@
}else{
this.btnClass='timeOut-btn'
}
this.$refs['uCountDown'].seconds += 2
this.$refs['order-count-down'].seconds += 2
}
},
// handleClick(){
......@@ -751,26 +794,45 @@
flex-direction: column;
.header {
padding: 30rpx 30rpx 46rpx 30rpx;
padding: 24rpx 30rpx 24rpx 30rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #FFFFFF;
border-radius: 12rpx;
max-height: 100rpx;
.title {
line-height: 40rpx;
font-size:40rpx;
color:#fff;
display: flex;
align-items: center;
.bottom-tag-view {
width: 52rpx;
height: 52rpx;
border-radius: 26rpx;
color: #FFFFFF;
font-size: 26rpx;
background-color: #FF930D;
margin-right: 16rpx;
display: flex;
justify-content: center;
align-items: center;
&.timeout {
background-color: #FA5A49;
}
}
}
.button {
text-align: center;
width: 106rpx;
height: 52rpx;
border-radius: 40rpx;
font-size: 24rpx;
font-weight: 400;
line-height: 52rpx;
color: #DEDEDE;
// text-align: center;
// width: 106rpx;
// height: 52rpx;
// border-radius: 40rpx;
// font-size: 24rpx;
// font-weight: 400;
// line-height: 52rpx;
// color: #DEDEDE;
}
}
......
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