Skip to content

S
self-support
Commit a37be7be authored by 郭晓清's avatar 郭晓清
Browse files
Options

订单列表页面开发

parent ef7bc723
Hide whitespace changes
Inline Side-by-side
Showing with 321 additions and 39 deletions
src/common/api/order.js
View file @ a37be7be
import util from '@/utils/util.js'
let orderApiFun = function(vm){
let listByRecommendOrder = async (params = {}) => await vm.$u.get('/wxh-worker-rest/rest/recommend/order', params);
/**
* 工单数量查询接口
*/
let listOrderCount = async (params = {}) => await vm.$u.get('http://apidoc.banshouhui.com:3000/mock/31/wxh-worker-rest/rest/'+ util.getToken()+'/order/queryOrdersCount/V2', params);
/**
* 工单列表接口
*/
let listOrder = async (params = {}) => await vm.$u.get('http://apidoc.banshouhui.com:3000/mock/31/wxh-worker-rest/rest/'+ util.getToken()+'/order/revision/list', params);
const orderApi = {
listByRecommendOrder,
listOrderCount,
listOrder,
}
return orderApi
}
......
src/pages.json
View file @ a37be7be
......@@ -15,6 +15,12 @@
"style": {
"navigationBarTitleText": "订单"
}
},
{
"path": "pages/order/orderItem",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/order/complete",
......
src/pages/order/index.vue
View file @ a37be7be
......@@ -37,43 +37,38 @@
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view class="order" v-for="(res, index) in orderList[0]" :key="res.id">
<view class="order" v-for="(res, index) in orderList" :key="res.id">
<view class="top">
<view class="left">
<view class="tag">安装</view>
<view class="store">{{ res.store }}</view>
<view class="tag">{{ res.orderServiceType }}</view>
<view class="store">{{ res.categoryName }}</view>
<view >{{ res.orderNumber }}</view>
</view>
<view class="right">{{ res.deal }}</view>
<view class="right">{{ res.orderBusinessTypeText }}</view>
</view>
<view class="item" v-for="(item, idx) in res.goodsList" :key="idx">
<view class="content">
<view class="title u-line-2">
<text>工单编号：</text><text>{{ "OR2021041809827" }}</text>
</view>
<view class="title u-line-2">
<text>客户信息：</text><text>{{ "王先生" }}</text>
</view>
<view class="title u-line-2">
<text>联系方式：</text><text>{{ '189xxxxxxxx' }}</text>
</view>
<view class="content">
<view class="title u-line-2">
<text>{{res.contactName }}</text> <text style="margin-left: 8rpx;">{{ res.contactPhone }}</text>
</view>
<view class="address u-line-2">
<view class="left">
<u-icon name="map" size="32"></u-icon>
<text style="margin-left: 8rpx;">深圳市龙岗区南湾街道荔枝花园D座125号</text>
</view>
<view class="right">10.01km</view>
</view>
<view class="address u-line-2">
<view class="left">
<view ><u-icon name="map" size="32"></u-icon>
<text style="margin-left: 8rpx;">{{res.contactAddress }}</text></view>
</view>
<view class="right">{{getDistance(res.contactAddressLatitud,res.contactAddressLongitud)}}km</view>
</view>
<u-divider margin-top="16" half-width="630" border-color="#F4F5F7" :use-slot="false">
</u-divider>
<view class="bottom">
<view class="left">
<view class="tag">剩</view>
<u-count-down :timestamp="timestamp" font-size="44" color="#FF930D"></u-count-down>
</view>
<view class="right-btn">
去预约
<view class="right-btn" @click="viewOderItem">
<text>去预约</text>
</view>
</view>
</view>
......@@ -81,12 +76,51 @@
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view class="order" v-for="(res, index) in orderList" :key="res.id">
<view class="top">
<view class="left">
<view class="tag">{{ res.orderServiceType }}</view>
<view class="store">{{ res.categoryName }}</view>
<view >{{ res.orderNumber }}</view>
</view>
<view class="right">{{ res.orderBusinessTypeText }}</view>
</view>
<view class="content">
<view class="title u-line-2">
<text>{{res.contactName }}</text> <text style="margin-left: 8rpx;">{{ res.contactPhone }}</text>
</view>
</view>
<view class="address u-line-2">
<view class="left">
<view ><u-icon name="map" size="32"></u-icon>
<text style="margin-left: 8rpx;">{{res.contactAddress }}</text></view>
</view>
<view class="right">{{getDistance(res.contactAddressLatitud,res.contactAddressLongitud)}}km</view>
</view>
<u-divider margin-top="16" half-width="630" border-color="#F4F5F7" :use-slot="false">
</u-divider>
<view class="bottom">
<view class="left">
<view class="tag">剩</view>
<u-count-down :timestamp="timestamp" font-size="44" color="#FF930D"></u-count-down>
</view>
<view class="right-btn">
<text>去签到</text>
</view>
</view>
</view>
<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<scroll-view scroll-y style="height: 100%;width: 100%;" v-if="orderList.length<2">
<view class="page-box">
<view>
<view class="centre">
......@@ -100,9 +134,129 @@
</view>
</view>
</scroll-view>
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" v-else>
<view class="page-box">
<view class="order" v-for="(res, index) in orderList" :key="res.id">
<view class="top">
<view class="left">
<view class="tag">{{ res.orderServiceType }}</view>
<view class="store">{{ res.categoryName }}</view>
<view >{{ res.orderNumber }}</view>
</view>
<view class="right">{{ res.orderBusinessTypeText }}</view>
</view>
<view class="content">
<view class="title u-line-2">
<text>{{res.contactName }}</text> <text style="margin-left: 8rpx;">{{ res.contactPhone }}</text>
</view>
</view>
<view class="address u-line-2">
<view class="left">
<view ><u-icon name="map" size="32"></u-icon>
<text style="margin-left: 8rpx;">{{res.contactAddress }}</text></view>
</view>
<view class="right">{{getDistance(res.contactAddressLatitud,res.contactAddressLongitud)}}km</view>
</view>
<u-divider margin-top="16" half-width="630" border-color="#F4F5F7" :use-slot="false">
</u-divider>
<view class="bottom">
<view class="left">
<view class="tag">剩</view>
<u-count-down :timestamp="timestamp" font-size="44" color="#FF930D"></u-count-down>
</view>
<view class="right-btn" @click="viewOderItem">
<text>去完工</text>
</view>
</view>
</view>
<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view class="order" v-for="(res, index) in orderList" :key="res.id">
<view class="top">
<view class="left">
<view class="tag">{{ res.orderServiceType }}</view>
<view class="store">{{ res.categoryName }}</view>
<view >{{ res.orderNumber }}</view>
</view>
<view class="right">{{ res.orderBusinessTypeText }}</view>
</view>
<view class="content">
<view class="title u-line-2">
<text>{{res.contactName }}</text> <text style="margin-left: 8rpx;">{{ res.contactPhone }}</text>
</view>
</view>
<view class="address u-line-2">
<view class="left">
<view ><u-icon name="map" size="32"></u-icon>
<text style="margin-left: 8rpx;">{{res.contactAddress }}</text></view>
</view>
<view class="right">{{getDistance(res.contactAddressLatitud,res.contactAddressLongitud)}}km</view>
</view>
<u-divider margin-top="16" half-width="630" border-color="#F4F5F7" :use-slot="false">
</u-divider>
<view class="bottom">
<view class="left">
<view class="tag">剩</view>
<u-count-down :timestamp="timestamp" font-size="44" color="#FF930D"></u-count-down>
</view>
<view class="right-btn" @click="viewOderItem">
<text>审核中</text>
</view>
</view>
</view>
<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view class="order" v-for="(res, index) in orderList" :key="res.id">
<view class="top">
<view class="left">
<view class="tag">{{ res.orderServiceType }}</view>
<view class="store">{{ res.categoryName }}</view>
<view >{{ res.orderNumber }}</view>
</view>
<view class="right">{{ res.orderBusinessTypeText }}</view>
</view>
<view class="content">
<view class="title u-line-2">
<text>{{res.contactName }}</text> <text style="margin-left: 8rpx;">{{ res.contactPhone }}</text>
</view>
</view>
<view class="address u-line-2">
<view class="left">
<view ><u-icon name="map" size="32"></u-icon>
<text style="margin-left: 8rpx;">{{res.contactAddress }}</text></view>
</view>
<view class="right">{{getDistance(res.contactAddressLatitud,res.contactAddressLongitud)}}km</view>
</view>
<u-divider margin-top="16" half-width="630" border-color="#F4F5F7" :use-slot="false">
</u-divider>
<view class="bottom">
<view class="left">
<view class="tag">剩</view>
<u-count-down :timestamp="timestamp" font-size="44" color="#FF930D"></u-count-down>
</view>
<view class="right-btn" @click="viewOderItem">
<text>去处理</text>
</view>
</view>
</view>
<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
</swiper>
......@@ -114,8 +268,10 @@
export default {
data() {
return {
timestamp: 6666,
orderList: [[], [], [], []],
timestamp: 1,
//waitAccept、waitAppointment、waitCheckIn、waitFinish、exception、finish
indexStatus:{0:'waitAccept',1:'waitAppointment',2:'waitCheckIn',3:'waitFinish',4:'exception',4:'finish'},
orderList: [],
dataList: [
{
id: 1,
......@@ -219,13 +375,15 @@ export default {
swiperCurrent: 0,
tabsHeight: 0,
dx: 0,
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore']
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
dataValue:[],
total:0
};
},
onLoad() {
this.getLocation();
this.getOrderCount();
this.getOrderList(0);
this.getOrderList(1);
this.getOrderList(3);
},
computed: {
// 价格小数
......@@ -244,6 +402,48 @@ export default {
}
},
methods: {
/**
* 获取当前位置的经纬度
*/
getLocation() {
let self = this
const dataValue = this.dataValue || []
const waterInfo = this.waterInfo
uni.getLocation({
type: 'gcj02',
success: function(res) {
dataValue.push(res.longitude)
dataValue.push(res.latitude)
self.dataValue = dataValue
},
fail(err) {
}
});
},
getDistance(Latitud, Longitud){
return this.distance(Latitud,Longitud,this.dataValue[0],this.dataValue[1])
},
/**
* echo distance(116.3896,39.91917,116.3940,39.91726);
* 计算两点之间直线距离
* @param float $lon1 经度
* @param float $lat1 维度
* @param float $lon2 经度
* @param float $lat2 维度
* @return float 浮点数
*/
distance(la1, lo1, la2, lo2) {
var La1 = la1 * Math.PI / 180.0;
var La2 = la2 * Math.PI / 180.0;
var La3 = La1 - La2;
var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2),Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
s = s * 6378.137;//地球半径
s = Math.round(s * 10000) / 10000;
// console.log("计算结果",s,'KM');
return s?s.toFixed(2):0;
},
reachBottom() {
// 此tab为空数据
if (this.current != 2) {
......@@ -254,14 +454,70 @@ export default {
}
},
// 页面数据
getOrderList(idx) {
for (let i = 0; i < 5; i++) {
let index = this.$u.random(0, this.dataList.length - 1);
let data = JSON.parse(JSON.stringify(this.dataList[index]));
data.id = this.$u.guid();
this.orderList[idx].push(data);
}
this.loadStatus.splice(this.current, 1, 'loadmore');
getOrderList(index) {
// 状态处理
console.log("chage:",this.indexStatus[index])
var page=0
var pageSize=10
var param = {pageNumber:page,pageSize:pageSize,keyword:'',type:this.indexStatus[index]}
var self = this;
self.$u.api.listOrder(param).then((res) => {
if (res.code == 200) {
console.log("getOrderList",res.data)
if (res.data) {
self.orderList = res.data.list;
self.total =res.data.total;
}
} else {
console.log(res.message, "获取订单数量失败！");
}
});
// for (let i = 0; i < indexStatus.size; i++) {
// let index = this.$u.random(0, this.dataList.length - 1);
// let data = JSON.parse(JSON.stringify(this.dataList[index]));
// data.id = this.$u.guid();
// this.orderList[idx].push(data);
// }
// this.loadStatus.splice(this.current, 1, 'loadmore');
},
// 获取订单数量
getOrderCount() {
var self = this; // 加载订单列表
self.$u.api.listOrderCount().then((res) => {
if (res.code == 200) {
console.log("===",res.data)
if (res.data) {
self.list.forEach(item=>{
if(item.name==='待预约'){
item.count=res.data.toAppointmentCount
}else if(item.name==='待签到'){
item.count=res.data.toCheckinCount
}else if(item.name==='待完工'){
item.count=res.data.toFinishCount
}else if(item.name==='待审核'){
item.count=res.data.reviewingCount
}else if(item.name==='异常单'){
item.count=res.data.exceptionCount
}
})
}
} else {
console.log(res.message, "获取订单数量失败！");
}
});
},
getOrderList1() {// 加载工单列表
var self = this;
self.$u.api.listOrder().then((res) => {
if (res.code == 200) {
console.log("===",res.data)
if (res.data) {
}
} else {
console.log(res.message, "获取订单数量失败！");
}
});
},
// 总价
totalPrice(item) {
......@@ -281,6 +537,7 @@ export default {
},
// tab栏切换
change(index) {
console.log("============",index)
this.swiperCurrent = index;
this.getOrderList(index);
},
......@@ -291,6 +548,12 @@ export default {
this.$refs.tabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},viewOderItem() { // 跳转工单详情页面
let that = this;
let params ='' //`id=${e.id}&courseId=${e.courseId}&status=${e.status}`
uni.navigateTo({
url: `/pages/order/orderItem?${params}`
})
}
}
};
......
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