首次提交
This commit is contained in:
duan
188
pages/order/complaint/complaint.vue
Normal file
188
pages/order/complaint/complaint.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="online_box">
|
||||
<view class="part1">
|
||||
<view class="online_left">投诉类型</view>
|
||||
<view class="online_right" @click="show = true">
|
||||
{{complaintName?complaintName:'请选择投诉类型'}}
|
||||
<image src="../../../static/images/index/right.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<u-line color="#E6E6E6" />
|
||||
<view class="online">
|
||||
<view class="tit">投诉理由</view>
|
||||
<view class="text_box" style="margin-top: 20rpx;">
|
||||
<u-input v-model="value" height="300" :type="type" :border="border" :clearable="false"
|
||||
placeholder="请描述问题发生的情况" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" @click="bindorder">立即提交</view>
|
||||
|
||||
<u-picker v-model="show" mode="selector" :range="typeList" range-key="illegal" @confirm='select'></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
value: '',
|
||||
type: 'textarea',
|
||||
border: true,
|
||||
indentNumber: '',
|
||||
complaintName: '',
|
||||
typeList: [],
|
||||
IllegalId: '',
|
||||
indentType: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
this.indentNumber = options.indentNumber
|
||||
this.indentType = options.indentType
|
||||
this.getTypeList()
|
||||
},
|
||||
methods: {
|
||||
select(e) {
|
||||
console.log(e)
|
||||
this.complaintName = this.typeList[e].illegal
|
||||
this.IllegalId = this.typeList[e].id
|
||||
|
||||
},
|
||||
getTypeList() {
|
||||
this.$Request.get('/shop/illegalType/selectIllegalTypeList').then(res => {
|
||||
if (res.code == 0) {
|
||||
this.typeList = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
bindorder() {
|
||||
if (this.IllegalId == '') {
|
||||
uni.showToast({
|
||||
title: '请选择投诉类型',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.value == '') {
|
||||
uni.showToast({
|
||||
title: '请填写投诉原因',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$Request.postJson('/app/tbindent/insertComplaint', {
|
||||
indentNumber: this.indentNumber,
|
||||
wrongExplain: this.value,
|
||||
illegalId: this.IllegalId,
|
||||
indentType: '5',
|
||||
type: '1',
|
||||
userId: uni.getStorageSync('userId')
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
} else {
|
||||
console.log('失败：', res.data)
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.online_box {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 30rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.part1 {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.online_left {
|
||||
flex: 1;
|
||||
font-size: 27rpx;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.online_right {
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.online_right image {
|
||||
width: 12rpx;
|
||||
height: 21rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.online_title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2rpx;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.online {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 34rpx;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 27rpx;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2rpx;
|
||||
margin-top: 19rpx;
|
||||
}
|
||||
|
||||
.u-input--border {
|
||||
border: none !important;
|
||||
background: #F5F5F5 !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
background: #FF7F00;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: white;
|
||||
border-radius: 15rpx;
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
866
pages/order/detail.vue
Normal file
866
pages/order/detail.vue
Normal file
@@ -0,0 +1,866 @@
|
||||
<template>
|
||||
<view class="order_details">
|
||||
<!-- 待支付 -->
|
||||
<view class="part_one">
|
||||
<view>
|
||||
<!-- 订单状态 -->
|
||||
<view class="rider_order" v-if="orderDetails.indentState == 0">待付款</view>
|
||||
<view class="rider_order"
|
||||
v-if="orderDetails.indentState == 1||orderDetails.indentState ==8||orderDetails.indentState ==9||orderDetails.indentState ==10">
|
||||
已取消</view>
|
||||
<view class="rider_order" v-if="orderDetails.indentState == 2">待接单</view>
|
||||
<view class="rider_order" v-if="orderDetails.indentState == 5">待确认</view>
|
||||
<view class="rider_order" v-if="orderDetails.indentState == 3">已接单</view>
|
||||
<view class="rider_order" v-if="orderDetails.indentState ==4">派送中</view>
|
||||
<view class="rider_order" v-if="orderDetails.indentState ==6||orderDetails.indentState ==7">已完成
|
||||
</view>
|
||||
<!-- 订单提示状态 -->
|
||||
<view class="rider_tit" v-if="orderDetails.indentState == 2">请耐心等待骑手接单...</view>
|
||||
<view class="rider_tit" v-if="orderDetails.indentState == 0">请及时支付订单，否则将自动取消</view>
|
||||
<!-- <view class="rider_tit"
|
||||
v-if="orderDetails.indentState ==5||orderDetails.indentState ==6||orderDetails.indentState ==7">
|
||||
写下您的评价感受吧！</view> -->
|
||||
<view class="rider_tit"
|
||||
v-if="orderDetails.indentState == 1||orderDetails.indentState ==8||orderDetails.indentState ==9||orderDetails.indentState ==10">
|
||||
订单已被您取消</view>
|
||||
<view class="rider_tit" v-if="orderDetails.indentState == 3||orderDetails.indentState ==4">骑手已接单，尽快为您派送
|
||||
</view>
|
||||
|
||||
<!-- 订单按钮状态 -->
|
||||
<view style="display: flex;justify-content: flex-end;margin-top: 30rpx;margin-right: 20rpx;">
|
||||
<!-- <view class="btn1" @tap.stop="bindcomment(orderDetails)"
|
||||
v-if="orderDetails.indentState ==7||orderDetails.indentState == 6&&!orderDetails.evaluateMessage">
|
||||
去评论
|
||||
</view> -->
|
||||
<view class="btn1" v-if="orderDetails.indentState == 0||orderDetails.indentState == 2"
|
||||
@tap.stop="bindorderOff(orderDetails)">取消订单</view>
|
||||
<view class="btn1" @tap.stop="bindconfirm(orderDetails)" v-if="orderDetails.indentState == 5">确认订单
|
||||
</view>
|
||||
<view class="btn2" @tap.stop="bindorder(orderDetails)"
|
||||
v-if="orderDetails.indentState == 1||orderDetails.indentState == 3||orderDetails.indentState ==8||
|
||||
orderDetails.indentState ==9||orderDetails.indentState ==10||orderDetails.indentState == 4||orderDetails.indentState == 6">再来一单</view>
|
||||
<view class="btn2" v-if="orderDetails.indentState == 0" @tap.stop="bindorderpay(orderDetails)">立即付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 购买时间 -->
|
||||
<view class="five_box" style="padding: 30rpx 30rpx;">
|
||||
<text>预约时间</text>
|
||||
<text style="font-weight: bold;">{{orderDetails.sendOutTime?orderDetails.sendOutTime:''}}</text>
|
||||
</view>
|
||||
|
||||
<map v-if="(orderDetails.indentState == 3||orderDetails.indentState == 4||orderDetails.indentState == 5) && latitude && longitude"
|
||||
id="map" @tap="goMap" style="width: 95%; height: 300rpx;margin: 20rpx auto 0;" :markers="markers"
|
||||
:latitude="latitude" :longitude="longitude"></map>
|
||||
|
||||
<!-- 同城购买-->
|
||||
<view class="part_three" v-if="orderDetails.indentType == 3">
|
||||
<view class="city_pay">
|
||||
<view class="city_box">同城购买</view>
|
||||
<text v-if="orderDetails.buyType == 0">就近购买</text>
|
||||
<text v-else>指定购买</text>
|
||||
</view>
|
||||
<view class="pay_tit">{{orderDetails.productDetails?orderDetails.productDetails:''}}</view>
|
||||
</view>
|
||||
<!-- 同城服务-->
|
||||
<view class="part_three" v-if="orderDetails.indentType == 4">
|
||||
<view class="city_pay">
|
||||
<view class="city_box">同城服务</view>
|
||||
<text v-if="orderDetails.serviceType">{{orderDetails.serviceType}}</text>
|
||||
</view>
|
||||
<view class="pay_tit">{{orderDetails.serviceDetails?orderDetails.serviceDetails:''}}</view>
|
||||
</view>
|
||||
<!-- 骑手商家地址 -->
|
||||
<view class="part_four">
|
||||
<view class="city_pay" v-if="orderDetails.indentType !=3&&orderDetails.indentType !=4">
|
||||
<view class="city_box" v-if="orderDetails.indentType == 1">帮我送</view>
|
||||
<view class="city_box" v-if="orderDetails.indentType == 2">帮我取</view>
|
||||
<text v-if="orderDetails.itemType">{{orderDetails.itemType}}</text>
|
||||
<text v-if="orderDetails.itemValue">{{orderDetails.itemValue}}</text>
|
||||
<text v-if="orderDetails.itemWeight">{{orderDetails.itemWeight}}</text>
|
||||
</view>
|
||||
<view v-if="orderDetails.indentType !=3&&orderDetails.indentType != 4">
|
||||
<u-line color="#F2F2F2" />
|
||||
</view>
|
||||
<!-- 发货地址 -->
|
||||
<view class="one_box" v-if="orderDetails.indentType != 4" style="margin-top: 30rpx;">
|
||||
<view class="box_dian">
|
||||
<image src="../../static/images/order/mai.png" v-if="orderDetails.indentType == 3"></image>
|
||||
<image src="../../static/images/order/icon_f.png" v-else></image>
|
||||
</view>
|
||||
<view class="box_addres">
|
||||
<view class="add">{{orderDetails.shopAddressDetail}}</view>
|
||||
<view class="num">
|
||||
<view class="name" v-if="orderDetails.indentType !=3">
|
||||
{{orderDetails.shopName}} <text>{{orderDetails.shopPhone}}</text>
|
||||
<!-- <view class="phone_bd" @click="bindphone(0)">拨打</view> -->
|
||||
</view>
|
||||
<!-- <view class="name" v-else>暂无信息</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 收获地址 -->
|
||||
<view class="one_box" style="margin-top: 20rpx;margin-bottom: 30rpx;">
|
||||
<view class="box_dian">
|
||||
<image src="../../static/images/order/icon_s.png"></image>
|
||||
</view>
|
||||
<view class="box_addres">
|
||||
<view class="add">{{orderDetails.userAddressDetail}}</view>
|
||||
<view class="num">
|
||||
<view class="name">
|
||||
{{orderDetails.userName}}<text>{{orderDetails.userPhone}}</text>
|
||||
<!-- <view class="phone_bd" @click="bindphone()">联系TA</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-line color="#F2F2F2" />
|
||||
<view class="address_pay">
|
||||
<view class="runing_pay">
|
||||
跑腿费
|
||||
</view>
|
||||
<view class="runing_distance">
|
||||
<!-- {{orderDetails.distance}}m -->
|
||||
<text>￥{{orderDetails.indentBasicsMoney?orderDetails.indentBasicsMoney:0}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 联系骑手 -->
|
||||
<view class="rider_box"
|
||||
v-if="orderDetails.indentState != 0&&orderDetails.indentState != 1&&orderDetails.indentState != 8&&orderDetails.indentState != 2&&orderDetails.indentState != 9&&orderDetails.indentState != 10">
|
||||
<!-- <view style="font-size: 31rpx;color: black;padding: 20rpx 25rpx;">联系骑手...</view> -->
|
||||
<view class="flex justify-between align-center padding">
|
||||
<view style="font-size: 31rpx;color: black;">联系骑手...</view>
|
||||
<image @click="complaint" src="../../static/images/order/tousu.png" style="width: 43rpx;height: 39rpx;"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<view>
|
||||
<u-line color="#F2F2F2" />
|
||||
</view>
|
||||
<view style="padding: 20rpx 25rpx;display: flex;justify-content: space-between;align-items: center;">
|
||||
<view style="display: flex;">
|
||||
<view class="rider_left">
|
||||
<image :src="orderDetails.avatar"></image>
|
||||
</view>
|
||||
<view style="margin-left: 10rpx;color: #333333;">
|
||||
<view>{{orderDetails.riderNickName}}</view>
|
||||
<view>{{orderDetails.phone1}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="phone" @click="bindphone()">联系TA</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 收货码 -->
|
||||
<view class="five_box1">
|
||||
<view class="part_seven" v-if="orderDetails.orderCode">
|
||||
<text>收货码</text>
|
||||
<text>{{orderDetails.orderCode}}</text>
|
||||
</view>
|
||||
<!-- 备注 -->
|
||||
<view class="part_seven"
|
||||
v-if="orderDetails.indentType != 4&&orderDetails.indentType != 3&&orderDetails.remarks">
|
||||
<text>备注</text>
|
||||
<view style="text-align: right;flex: 1;">{{orderDetails.remarks}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="part_six">
|
||||
<view class="order_info">
|
||||
订单信息
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_name">订单号码</view>
|
||||
<view class="order_nums">{{orderDetails.indentNumber}}
|
||||
<u-icon @click="copy(orderDetails.indentNumber)" name="cut" style="margin-left: 6rpx;" size="32">
|
||||
</u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_name">下单时间</view>
|
||||
<view class="order_nums">{{orderDetails.createTime}}</view>
|
||||
</view>
|
||||
<view class="order_list">
|
||||
<view class="order_name">支付方式</view>
|
||||
<view class="order_nums">在线支付</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单下单详情 -->
|
||||
<view class="part_sevens">
|
||||
<view class="order_info">
|
||||
订单下单支出
|
||||
</view>
|
||||
<!-- <view class="order_list">
|
||||
<view class="order_name">跑腿费</view>
|
||||
<view class="order_nums">{{orderDetails.errandMoney}}</view>
|
||||
</view> -->
|
||||
<view class="order_list" v-if="orderDetails.tip">
|
||||
<view class="order_name">小费</view>
|
||||
<view class="order_nums">￥{{orderDetails.tip}}</view>
|
||||
</view>
|
||||
<view class="order_list" v-if="orderDetails.prepayMoney">
|
||||
<view class="order_name">预付价格</view>
|
||||
<view class="order_nums">￥{{orderDetails.prepayMoney}}</view>
|
||||
</view>
|
||||
<view class="order_list" v-if="orderDetails.redPacketAmount">
|
||||
<view class="order_name">红包</view>
|
||||
<view class="order_nums">-￥{{orderDetails.redPacketAmount}}</view>
|
||||
</view>
|
||||
<view class="order_list" v-if="orderDetails.cargoInsuranceFlag == 0">
|
||||
<view class="order_name">物品保价</view>
|
||||
<view class="order_nums">￥{{orderDetails.cargoInsurance}}</view>
|
||||
</view>
|
||||
<view class="order_list" v-if="orderDetails.indentMoney">
|
||||
<view class="order_name" style="color: black;font-size: 28rpx;">订单总支出</view>
|
||||
<view class="order_nums" style="color: red;font-size: 28rpx;">￥{{orderDetails.indentMoney}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <image
|
||||
v-if="orderDetails.indentState ==3||orderDetails.indentState ==4||orderDetails.indentState ==5||orderDetails.indentState ==6||orderDetails.indentState ==7"
|
||||
src="../../static/images/order/kefu.png"
|
||||
style="width: 100rpx;height: 100rpx;position: fixed;bottom: 100rpx;right: 70rpx;" @click="goChat()" mode="">
|
||||
</image> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderDetails: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
markers: [], //标记点
|
||||
lat: '',
|
||||
lng: ''
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
let that = this
|
||||
this.indentNumber = e.indentNumber
|
||||
that.userList()
|
||||
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getLocation(e) {
|
||||
let data = {
|
||||
riderUserId: e,
|
||||
lat: this.lat,
|
||||
lng: this.lng
|
||||
}
|
||||
this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
|
||||
if (res.code === 0) {
|
||||
|
||||
console.log(res.data, '经纬度')
|
||||
this.latitude = res.data.riderLocation.lat;
|
||||
this.longitude = res.data.riderLocation.lng;
|
||||
|
||||
this.markers = [{
|
||||
id: 1,
|
||||
latitude: res.data.riderLocation.lat,
|
||||
longitude: res.data.riderLocation.lng,
|
||||
iconPath: '../../static/images/order/rider.png',
|
||||
width: '40',
|
||||
height: '40'
|
||||
}]
|
||||
}
|
||||
});
|
||||
},
|
||||
goMap() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/paotuiMap?indentNumber=' + this.indentNumber
|
||||
})
|
||||
},
|
||||
goChat() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/shop/im?ordersId=' + this.orderDetails.indentId
|
||||
})
|
||||
},
|
||||
// 拨打电话
|
||||
bindphone() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.orderDetails.phone
|
||||
});
|
||||
},
|
||||
//请求详情数据
|
||||
userList() {
|
||||
let that=this;
|
||||
this.$Request.postT('/app/tbindent/userIndentMessage?indentNumber=' + this.indentNumber).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
this.orderDetails = res.data
|
||||
if (this.orderDetails.phone) {
|
||||
this.orderDetails.phone1 = this.orderDetails.phone.substring(0, 3) + "****" + this
|
||||
.orderDetails.phone.substring(7, 11);
|
||||
}
|
||||
uni.getLocation({
|
||||
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||
success: function(res) {
|
||||
that.lat = res.latitude;
|
||||
that.lng = res.longitude;
|
||||
that.getLocation(this.orderDetails.riderUserId)
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
// 再来一单
|
||||
bindorder(e) {
|
||||
console.log(e)
|
||||
if (e.indentType == 1 || e.indentType == 2) {
|
||||
let index = e.indentType
|
||||
uni.navigateTo({
|
||||
url: '/running/Helpsend/Helpsend?indentNumber=' + e.indentNumber + '&index=' + index
|
||||
})
|
||||
} else if (e.indentType == 3) {
|
||||
let index = e.indentType
|
||||
let current = e.buyType
|
||||
uni.navigateTo({
|
||||
url: '/running/Helppay/Helppay?indentNumber=' + e.indentNumber + '&index=' + index +
|
||||
'¤t=' + current
|
||||
})
|
||||
} else {
|
||||
let index = e.indentType
|
||||
uni.navigateTo({
|
||||
url: '/running/Cityservice/Cityservice?indentNumber=' + e.indentNumber + '&index=' + index
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 去评论
|
||||
bindcomment(e) {
|
||||
console.log(e)
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/comments/comments?indentNumber=' + e.indentNumber + '&riderUserId=' + e
|
||||
.riderUserId
|
||||
})
|
||||
},
|
||||
// 取消订单
|
||||
bindorderOff(e) {
|
||||
// console.log(e)this.orderDetails.userFine
|
||||
let indentNumber = e.indentNumber
|
||||
console.log(indentNumber)
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '确定取消订单?',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.$Request.postT('/app/tbindent/userCancleIndent?indentNumber=' + indentNumber)
|
||||
.then(res => {
|
||||
// console.log(res)
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '订单取消成功'
|
||||
});
|
||||
this.userList()
|
||||
// setTimeout(function() {
|
||||
// uni.navigateBack();
|
||||
// }, 1000);
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '订单失败',
|
||||
content: res.msg
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//确认订单
|
||||
bindconfirm(e) {
|
||||
// console.log(e)
|
||||
let indentNumber = e.indentNumber
|
||||
console.log(indentNumber)
|
||||
this.$Request.postT('/app/tbindent/userDelivery?indentNumber=' + indentNumber).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '订单确认成功'
|
||||
});
|
||||
this.userList()
|
||||
// setTimeout(function() {
|
||||
// uni.navigateBack();
|
||||
// }, 1000);
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '订单确认失败',
|
||||
content: res.msg
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 立即付款
|
||||
bindorderpay(e) {
|
||||
console.log(e)
|
||||
let indentNumber = e.indentNumber
|
||||
uni.navigateTo({
|
||||
url: '/running/order/pay/pay?indentNumber=' + indentNumber
|
||||
})
|
||||
},
|
||||
copy(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
complaint() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/complaint/complaint?indentNumber=' + this.orderDetails.indentNumber +
|
||||
'&indentType=' + this.orderDetails.indentType
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* #ifndef MP-WEIXIN */
|
||||
page {
|
||||
background: #F2EDED;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.order_details {
|
||||
width: 100%;
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
|
||||
/* 待支付 */
|
||||
.part_one {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
height: 230rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.city_box {
|
||||
width: 110rpx;
|
||||
line-height: 42rpx;
|
||||
background: #c4e2ff;
|
||||
color: #49A5FF;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.city_pay {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.city_pay text {
|
||||
font-size: 30rpx;
|
||||
letter-spacing: 2rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.rider_order {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
padding-top: 20rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.rider_tit {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
color: #999999;
|
||||
font-size: 31rpx;
|
||||
margin-top: 10rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.order_btn {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.close_order {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.close_btn {
|
||||
border: 1rpx solid #CCCCCC;
|
||||
width: 245rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
border-radius: 75rpx;
|
||||
font-size: 31rpx;
|
||||
color: #999999;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.tip_order {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.close_tip {
|
||||
width: 245rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
border-radius: 75rpx;
|
||||
font-size: 31rpx;
|
||||
color: white;
|
||||
letter-spacing: 2rpx;
|
||||
background: #FF7F00;
|
||||
}
|
||||
|
||||
/* 骑手商家地址 */
|
||||
.part_four {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20rpx;
|
||||
background: #FFFFFF;
|
||||
/* height: 390rpx; */
|
||||
border-radius: 10rpx;
|
||||
padding: 15rpx 15rpx;
|
||||
|
||||
}
|
||||
|
||||
.u-line {
|
||||
border-bottom-width: 6rpx !important;
|
||||
}
|
||||
|
||||
.one_box {
|
||||
width: 100%;
|
||||
/* height: 100rpx; */
|
||||
/* background: #F5F5F5; */
|
||||
margin: 0 auto;
|
||||
border-radius: 12upx;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.box_dian {
|
||||
/* flex: 1; */
|
||||
width: 10%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.box_dian image {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
|
||||
.box_name {
|
||||
flex: 5;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.box_addres {
|
||||
/* flex: 5; */
|
||||
width: 85%;
|
||||
font-size: 31rpx;
|
||||
}
|
||||
|
||||
.add {
|
||||
/* color: #333333;
|
||||
font-size: 31rpx;
|
||||
letter-spacing: 2upx;
|
||||
font-weight: bold;
|
||||
margin-top: 20upx; */
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline;
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.name text {
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
margin-left: 30upx;
|
||||
}
|
||||
|
||||
.address_pay {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx
|
||||
}
|
||||
|
||||
.runing_pay {
|
||||
flex: 1;
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.runing_distance {
|
||||
flex: 1;
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
letter-spacing: 1rpx;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.runing_distance text {
|
||||
font-size: 31rpx;
|
||||
color: black;
|
||||
margin-left: 35rpx;
|
||||
}
|
||||
|
||||
/* 收货码 */
|
||||
.five_box {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 35rpx;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.five_box1 {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 35rpx;
|
||||
|
||||
/* display: flex;
|
||||
justify-content: space-between; */
|
||||
}
|
||||
|
||||
.part_five {
|
||||
/* height: 85rpx; */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.take_number {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
text-indent: 30rpx;
|
||||
}
|
||||
|
||||
.numbers {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
/* 订单信息 */
|
||||
.part_six {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
height: 275rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
/* margin-bottom: 100rpx; */
|
||||
|
||||
}
|
||||
|
||||
.order_info {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 31rpx;
|
||||
font-weight: bold;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
|
||||
.order_list {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
height: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
.order_name {
|
||||
flex: 1;
|
||||
color: #999999;
|
||||
font-size: 29rpx;
|
||||
letter-spacing: 2rpx;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.order_nums {
|
||||
flex: 2;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 2rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 同城服务 */
|
||||
.part_three {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.city_pay {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
/* height: 90rpx; */
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.city_pay text {
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 2rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.city_box {
|
||||
width: 110rpx;
|
||||
line-height: 42rpx;
|
||||
background: #c4e2ff;
|
||||
color: #49A5FF;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.pay_tit {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
width: 170upx;
|
||||
font-size: 28rpx;
|
||||
line-height: 60upx;
|
||||
text-align: center;
|
||||
border: 1upx solid #9C9C9C;
|
||||
border-radius: 20upx;
|
||||
color: #9C9C9C;
|
||||
margin-right: 30upx;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
width: 170upx;
|
||||
line-height: 60upx;
|
||||
color: white;
|
||||
background: #FF6A04;
|
||||
font-size: 22upx;
|
||||
text-align: center;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 20upx;
|
||||
}
|
||||
|
||||
.phone_bd {
|
||||
display: inline-block;
|
||||
background: #FF6A04;
|
||||
color: #ffffff;
|
||||
padding: 0rpx 15rpx;
|
||||
margin-left: 14rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.part_seven {
|
||||
padding: 20rpx 0;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.part_sevens {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
/* height: 275rpx; */
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
padding-bottom: 20rpx;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
|
||||
/* 联系骑手 */
|
||||
.rider_box {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
}
|
||||
|
||||
.rider_left image {
|
||||
width: 80rpx;
|
||||
height: 85rpx;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.phone {
|
||||
background: #FD6416;
|
||||
color: #ffffff;
|
||||
padding: 8rpx 15rpx;
|
||||
border-radius: 13rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
442
pages/order/feedback.vue
Normal file
442
pages/order/feedback.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- <view class="feedback-title"> -->
|
||||
<!-- <text>评价</text> -->
|
||||
<!-- <text @tap="chooseMsg">快速键入</text> -->
|
||||
<!-- </view> -->
|
||||
<view class="feedback-body">
|
||||
<textarea placeholder="请输入你的评价..." v-model="sendDate.content" class="feedback-textare" />
|
||||
</view>
|
||||
<!-- <view class="feedback-title"><text>QQ/邮箱</text></view> -->
|
||||
<!-- <view class="feedback-body"><input class="feedback-input" v-model="sendDate.mail" placeholder="方便我们联系你 " /></view> -->
|
||||
|
||||
<view class="text-white padding bg radius margin-tb">
|
||||
<view>
|
||||
<view class="text-lg margin-top-sm text-black">商品评价图（可多张）</view>
|
||||
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
|
||||
<view>
|
||||
<view class="margin-top flex margin-right-sm flex-wrap">
|
||||
<view class="flex"
|
||||
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
|
||||
v-for="(image,index) in shopBanner" :key="index">
|
||||
<!-- <image :src="image" style="width: 100%;height: 100%;"></image> -->
|
||||
<image :src="image" style="width: 100%;height: 100%;"></image>
|
||||
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
|
||||
@click="removeImg(index)">
|
||||
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="flex"
|
||||
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;" @click="addImages(2)" v-if="shopBanner.length<9">
|
||||
<!-- <image :src="image" style="width: 100%;height: 100%;"></image> -->
|
||||
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
|
||||
class="flex justify-center align-center">
|
||||
<view>
|
||||
<view class="text-center">
|
||||
<image src="/static/images/addimg.png" style="width: 65rpx;height: 55rpx;">
|
||||
</image>
|
||||
</view>
|
||||
<view class="text-center text-black">添加图片</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="feedback-title feedback-star-view">
|
||||
<text>订单评分</text>
|
||||
<view class="feedback-star-view">
|
||||
<!-- <text class="feedback-star" v-for="(value, key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''" @tap="chooseStar(value)"></text> -->
|
||||
</view>
|
||||
<u-rate :count="count" min-count='1' active-color="#FCD202" v-model="value"></u-rate>
|
||||
</view>
|
||||
<button type="primary" style="background: #FCD202;margin-top: 32upx;" class="feedback-submit"
|
||||
@tap="send">提交</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configUrl from '../../common/config.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopBanner: [],
|
||||
msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
|
||||
stars: [1, 2, 3, 4, 5],
|
||||
imageList: [],
|
||||
sendDate: {
|
||||
score: 5,
|
||||
content: '',
|
||||
contact: '',
|
||||
goodsId: '',
|
||||
ordersId: '',
|
||||
orderNumber: '',
|
||||
shopId: ''
|
||||
},
|
||||
|
||||
count: 5,
|
||||
value: 5,
|
||||
goodsId: '',
|
||||
ordersId: '',
|
||||
orderNumber: '',
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.sendDate.goodsId = e.goodsId
|
||||
this.sendDate.ordersId = e.ordersId
|
||||
this.sendDate.orderNumber = e.orderNumber
|
||||
this.sendDate.shopId = e.shopId
|
||||
// let deviceInfo = {
|
||||
// appid: plus.runtime.appid,
|
||||
// imei: plus.device.imei, //设备标识
|
||||
// p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
|
||||
// md: plus.device.model, //设备型号
|
||||
// app_version: plus.runtime.version,
|
||||
// plus_version: plus.runtime.innerVersion, //基座版本号
|
||||
// os: plus.os.version,
|
||||
// net: '' + plus.networkinfo.getCurrentType()
|
||||
// };
|
||||
// this.sendDate = Object.assign(deviceInfo, this.sendDate);
|
||||
},
|
||||
methods: {
|
||||
// 图片上传
|
||||
addImages(e) {
|
||||
let that = this
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
sourceType: ['album', 'camera'],
|
||||
success: res => {
|
||||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||
that.$queue.showLoading("上传中...");
|
||||
uni.uploadFile({ // 上传接口
|
||||
// url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
|
||||
// url: 'https://tcwm.xianmaxiong.com/sqx_fast/alioss/upload',
|
||||
url:configUrl.APIHOST+'/alioss/upload',
|
||||
filePath: res.tempFilePaths[i],
|
||||
name: 'file',
|
||||
success: (uploadFileRes) => {
|
||||
if (that.shopBanner.length < 9) {
|
||||
if(JSON.parse(uploadFileRes.data).data){
|
||||
that.shopBanner.push(JSON.parse(uploadFileRes.data).data)
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'图片上传失败，请重试',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
console.log(that.shopBanner)
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 评价图删除
|
||||
removeImg(index) {
|
||||
this.shopBanner.splice(index, 1)
|
||||
},
|
||||
close(e) {
|
||||
this.imageList.splice(e, 1);
|
||||
},
|
||||
chooseMsg() {
|
||||
//快速输入
|
||||
uni.showActionSheet({
|
||||
itemList: this.msgContents,
|
||||
success: res => {
|
||||
this.sendDate.content = this.msgContents[res.tapIndex];
|
||||
}
|
||||
});
|
||||
},
|
||||
chooseImg() {
|
||||
//选择图片
|
||||
uni.chooseImage({
|
||||
sourceType: ['camera', 'album'],
|
||||
sizeType: 'compressed',
|
||||
count: 8 - this.imageList.length,
|
||||
success: res => {
|
||||
this.imageList = this.imageList.concat(res.tempFilePaths);
|
||||
}
|
||||
});
|
||||
},
|
||||
chooseStar(e) {
|
||||
//点击评星
|
||||
this.sendDate.score = e;
|
||||
},
|
||||
previewImage() {
|
||||
//预览图片
|
||||
uni.previewImage({
|
||||
urls: this.imageList
|
||||
});
|
||||
},
|
||||
send() {
|
||||
//发送反馈
|
||||
// console.log(this.sendDate,'111111111');
|
||||
// console.log(this.shopBanner.join(','),'22222222222222222')
|
||||
|
||||
if (!this.sendDate.content) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入评价内容'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.shopBanner.length){
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请上传商品评价图'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$queue.showLoading('加载中...');
|
||||
console.log(this.orderNumber)
|
||||
|
||||
this.$Request.postJson('/app/order/insertEvaluate', {
|
||||
goodsId: this.sendDate.goodsId,
|
||||
ordersId: this.sendDate.ordersId,
|
||||
orderNumber: this.sendDate.orderNumber,
|
||||
evaluateMessage: this.sendDate.content,
|
||||
score: this.value,
|
||||
shopId: this.sendDate.shopId,
|
||||
pictures:this.shopBanner.length>0?this.shopBanner.join(','):[]
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
uni.showToast({
|
||||
title: '评价成功'
|
||||
});
|
||||
setTimeout(function() {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '评价失败',
|
||||
content: res.msg
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
.input-view {
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
.close-view {
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #ff5053;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 上传 */
|
||||
.uni-uploader {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-uploader-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uni-uploader-info {
|
||||
color: #b2b2b2;
|
||||
}
|
||||
|
||||
.uni-uploader-body {
|
||||
margin-top: 16upx;
|
||||
}
|
||||
|
||||
.uni-uploader__files {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.uni-uploader__file {
|
||||
margin: 10upx;
|
||||
width: 210upx;
|
||||
height: 210upx;
|
||||
}
|
||||
|
||||
.uni-uploader__img {
|
||||
display: block;
|
||||
width: 210upx;
|
||||
height: 210upx;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box {
|
||||
position: relative;
|
||||
margin: 10upx;
|
||||
width: 208upx;
|
||||
height: 208upx;
|
||||
border: 2upx solid #d9d9d9;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:before,
|
||||
.uni-uploader__input-box:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:before {
|
||||
width: 4upx;
|
||||
height: 79upx;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:after {
|
||||
width: 79upx;
|
||||
height: 4upx;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:active {
|
||||
border-color: #999999;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:active:before,
|
||||
.uni-uploader__input-box:active:after {
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.uni-uploader__input {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*问题反馈*/
|
||||
.feedback-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20upx;
|
||||
color: #8f8f94;
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
.feedback-star-view.feedback-title {
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feedback-quick {
|
||||
position: relative;
|
||||
padding-right: 40upx;
|
||||
}
|
||||
|
||||
.feedback-quick:after {
|
||||
font-family: uniicons;
|
||||
font-size: 40upx;
|
||||
content: '\e581';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
color: #bbb;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.feedback-body {
|
||||
font-size: 32upx;
|
||||
padding: 16upx;
|
||||
margin: 16upx;
|
||||
border-radius: 16upx;
|
||||
background: #F2F2F2;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.feedback-textare {
|
||||
height: 200upx;
|
||||
font-size: 30upx;
|
||||
line-height: 50upx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10upx 0upx 0;
|
||||
color: #8f8f94;
|
||||
}
|
||||
|
||||
.feedback-input {
|
||||
font-size: 32upx;
|
||||
height: 60upx;
|
||||
padding: 15upx 20upx;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
.feedback-uploader {
|
||||
padding: 22upx 20upx;
|
||||
}
|
||||
|
||||
.feedback-star {
|
||||
font-family: uniicons;
|
||||
font-size: 40upx;
|
||||
margin-left: 6upx;
|
||||
}
|
||||
|
||||
.feedback-star-view {
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
.feedback-star:after {
|
||||
content: '\e408';
|
||||
}
|
||||
|
||||
.feedback-star.active {
|
||||
color: #ffb400;
|
||||
}
|
||||
|
||||
.feedback-star.active:after {
|
||||
content: '\e438';
|
||||
}
|
||||
|
||||
.feedback-submit {
|
||||
background: #007aff;
|
||||
color: #ffffff;
|
||||
margin: 20upx;
|
||||
}
|
||||
</style>
|
||||
449
pages/order/feedbacks.vue
Normal file
449
pages/order/feedbacks.vue
Normal file
@@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="feedback-title">
|
||||
<text>是否满意</text>
|
||||
<text @tap="chooseMsg">{{satisfactionFlagName?satisfactionFlagName:'请选择是否满意'}}</text>
|
||||
</view>
|
||||
<view class="feedback-body">
|
||||
<textarea placeholder="请输入你的评价..." v-model="sendDate.content" class="feedback-textare" />
|
||||
</view>
|
||||
<!-- <view class="feedback-title"><text>QQ/邮箱</text></view> -->
|
||||
<!-- <view class="feedback-body"><input class="feedback-input" v-model="sendDate.mail" placeholder="方便我们联系你 " /></view> -->
|
||||
|
||||
<!-- <view class="text-white padding bg radius margin-tb-sm">
|
||||
<view>
|
||||
<view class="text-lg text-black">评价图（可多张）</view>
|
||||
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
|
||||
<view>
|
||||
<view class="margin-top flex margin-right-sm flex-wrap">
|
||||
<view class="flex"
|
||||
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
|
||||
v-for="(image,index) in shopBanner" :key="index">
|
||||
<image :src="image" style="width: 100%;height: 100%;"></image>
|
||||
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
|
||||
@click="removeImg(index)">
|
||||
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="flex"
|
||||
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;" @click="addImages(2)" v-if="shopBanner.length<9">
|
||||
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
|
||||
class="flex justify-center align-center">
|
||||
<view>
|
||||
<view class="text-center">
|
||||
<image src="/static/images/addimg.png" style="width: 65rpx;height: 55rpx;">
|
||||
</image>
|
||||
</view>
|
||||
<view class="text-center text-black">添加图片</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="feedback-title feedback-star-view">
|
||||
<text>订单评分</text>
|
||||
<view class="feedback-star-view">
|
||||
</view>
|
||||
<u-rate :count="count" min-count='1' active-color="#FCD202" v-model="value"></u-rate>
|
||||
</view> -->
|
||||
<button type="primary" style="background: #FCD202;margin-top: 32upx;" class="feedback-submit"
|
||||
@tap="send">提交</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configUrl from '../../common/config.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
satisfactionFlag:0,
|
||||
satisfactionFlagName:'满意',
|
||||
shopBanner: [],
|
||||
msgContents: ['满意', '不满意'],
|
||||
stars: [1, 2, 3, 4, 5],
|
||||
imageList: [],
|
||||
sendDate: {
|
||||
score: 5,
|
||||
content: '',
|
||||
contact: '',
|
||||
goodsId: '',
|
||||
ordersId: '',
|
||||
orderNumber: '',
|
||||
shopId: ''
|
||||
},
|
||||
|
||||
count: 5,
|
||||
value: 5,
|
||||
goodsId: '',
|
||||
ordersId: '',
|
||||
orderNumber: '',
|
||||
indentNumber:''
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.indentNumber = e.indentNumber;
|
||||
// this.sendDate.goodsId = e.goodsId
|
||||
// this.sendDate.ordersId = e.ordersId
|
||||
// this.sendDate.orderNumber = e.orderNumber
|
||||
// this.sendDate.shopId = e.shopId
|
||||
// let deviceInfo = {
|
||||
// appid: plus.runtime.appid,
|
||||
// imei: plus.device.imei, //设备标识
|
||||
// p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
|
||||
// md: plus.device.model, //设备型号
|
||||
// app_version: plus.runtime.version,
|
||||
// plus_version: plus.runtime.innerVersion, //基座版本号
|
||||
// os: plus.os.version,
|
||||
// net: '' + plus.networkinfo.getCurrentType()
|
||||
// };
|
||||
// this.sendDate = Object.assign(deviceInfo, this.sendDate);
|
||||
},
|
||||
methods: {
|
||||
// 图片上传
|
||||
addImages(e) {
|
||||
let that = this
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
sourceType: ['album', 'camera'],
|
||||
success: res => {
|
||||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||
that.$queue.showLoading("上传中...");
|
||||
uni.uploadFile({ // 上传接口
|
||||
// url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
|
||||
// url: 'https://tcwm.xianmaxiong.com/sqx_fast/alioss/upload',
|
||||
url:configUrl.APIHOST+'/alioss/upload',
|
||||
filePath: res.tempFilePaths[i],
|
||||
name: 'file',
|
||||
success: (uploadFileRes) => {
|
||||
if (that.shopBanner.length < 9) {
|
||||
if(JSON.parse(uploadFileRes.data).data){
|
||||
that.shopBanner.push(JSON.parse(uploadFileRes.data).data)
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'图片上传失败，请重试',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
console.log(that.shopBanner)
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 评价图删除
|
||||
removeImg(index) {
|
||||
this.shopBanner.splice(index, 1)
|
||||
},
|
||||
close(e) {
|
||||
this.imageList.splice(e, 1);
|
||||
},
|
||||
chooseMsg() {
|
||||
//快速输入
|
||||
uni.showActionSheet({
|
||||
itemList: this.msgContents,
|
||||
success: res => {
|
||||
console.log(res.tapIndex)
|
||||
this.satisfactionFlagName = this.msgContents[res.tapIndex];
|
||||
this.satisfactionFlag = res.tapIndex;
|
||||
}
|
||||
});
|
||||
},
|
||||
chooseImg() {
|
||||
//选择图片
|
||||
uni.chooseImage({
|
||||
sourceType: ['camera', 'album'],
|
||||
sizeType: 'compressed',
|
||||
count: 8 - this.imageList.length,
|
||||
success: res => {
|
||||
this.imageList = this.imageList.concat(res.tempFilePaths);
|
||||
}
|
||||
});
|
||||
},
|
||||
chooseStar(e) {
|
||||
//点击评星
|
||||
this.sendDate.score = e;
|
||||
},
|
||||
previewImage() {
|
||||
//预览图片
|
||||
uni.previewImage({
|
||||
urls: this.imageList
|
||||
});
|
||||
},
|
||||
send() {
|
||||
//发送反馈
|
||||
// console.log(this.sendDate,'111111111');
|
||||
// console.log(this.shopBanner.join(','),'22222222222222222')
|
||||
|
||||
if(!this.satisfactionFlagName){
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请选择是否满意'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.sendDate.content) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入评价内容'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// if(!this.shopBanner.length){
|
||||
// uni.showToast({
|
||||
// icon: 'none',
|
||||
// title: '请上传评价图'
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
this.$queue.showLoading('加载中...');
|
||||
// console.log(this.orderNumber)
|
||||
|
||||
this.$Request.postJson('/app/apperrandevaluate/userEvaluate', {
|
||||
indentNumber: this.indentNumber,
|
||||
evaluateMessage: this.sendDate.content,
|
||||
satisfactionFlag: this.satisfactionFlag
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
uni.showToast({
|
||||
title: '评价成功'
|
||||
});
|
||||
setTimeout(function() {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '评价失败',
|
||||
content: res.msg
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
.input-view {
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
.close-view {
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #ff5053;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 上传 */
|
||||
.uni-uploader {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-uploader-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uni-uploader-info {
|
||||
color: #b2b2b2;
|
||||
}
|
||||
|
||||
.uni-uploader-body {
|
||||
margin-top: 16upx;
|
||||
}
|
||||
|
||||
.uni-uploader__files {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.uni-uploader__file {
|
||||
margin: 10upx;
|
||||
width: 210upx;
|
||||
height: 210upx;
|
||||
}
|
||||
|
||||
.uni-uploader__img {
|
||||
display: block;
|
||||
width: 210upx;
|
||||
height: 210upx;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box {
|
||||
position: relative;
|
||||
margin: 10upx;
|
||||
width: 208upx;
|
||||
height: 208upx;
|
||||
border: 2upx solid #d9d9d9;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:before,
|
||||
.uni-uploader__input-box:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:before {
|
||||
width: 4upx;
|
||||
height: 79upx;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:after {
|
||||
width: 79upx;
|
||||
height: 4upx;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:active {
|
||||
border-color: #999999;
|
||||
}
|
||||
|
||||
.uni-uploader__input-box:active:before,
|
||||
.uni-uploader__input-box:active:after {
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.uni-uploader__input {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*问题反馈*/
|
||||
.feedback-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20upx;
|
||||
color: #333333;
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
.feedback-star-view.feedback-title {
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feedback-quick {
|
||||
position: relative;
|
||||
padding-right: 40upx;
|
||||
}
|
||||
|
||||
.feedback-quick:after {
|
||||
font-family: uniicons;
|
||||
font-size: 40upx;
|
||||
content: '\e581';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
color: #bbb;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.feedback-body {
|
||||
font-size: 32upx;
|
||||
padding: 16upx;
|
||||
margin: 16upx;
|
||||
border-radius: 16upx;
|
||||
background: #F2F2F2;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.feedback-textare {
|
||||
height: 200upx;
|
||||
font-size: 30upx;
|
||||
line-height: 50upx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10upx 0upx 0;
|
||||
color: #8f8f94;
|
||||
}
|
||||
|
||||
.feedback-input {
|
||||
font-size: 32upx;
|
||||
height: 60upx;
|
||||
padding: 15upx 20upx;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
.feedback-uploader {
|
||||
padding: 22upx 20upx;
|
||||
}
|
||||
|
||||
.feedback-star {
|
||||
font-family: uniicons;
|
||||
font-size: 40upx;
|
||||
margin-left: 6upx;
|
||||
}
|
||||
|
||||
.feedback-star-view {
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
.feedback-star:after {
|
||||
content: '\e408';
|
||||
}
|
||||
|
||||
.feedback-star.active {
|
||||
color: #ffb400;
|
||||
}
|
||||
|
||||
.feedback-star.active:after {
|
||||
content: '\e438';
|
||||
}
|
||||
|
||||
.feedback-submit {
|
||||
background: #007aff;
|
||||
color: #ffffff;
|
||||
margin: 20upx;
|
||||
}
|
||||
</style>
|
||||
1511
pages/order/index.vue
Normal file
1511
pages/order/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
205
pages/order/paotuiMap.vue
Normal file
205
pages/order/paotuiMap.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<view v-if="XCXIsSelect=='是'">
|
||||
<map id="map" style="width: 100%; height: 700px;" :latitude="latitude" :longitude="longitude" :markers="markers"
|
||||
:show-location="true">
|
||||
</map>
|
||||
|
||||
<cover-view class="controls-title">
|
||||
<cover-view class="tabs_box">
|
||||
<cover-image class="pay_img" src="../../static/images/order/avatar.png"></cover-image>
|
||||
<cover-view class="flex flex-sub margin-left-sm flex-direction justify-between">
|
||||
<cover-view class="pay_name">骑手预计{{rider.mDateTime[1]}}送达</cover-view>
|
||||
<cover-view class="text-gray margin-top" style="margin-top: 5rpx;">
|
||||
距离您{{rider.aDouble}}
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="flex">
|
||||
<cover-image class="pay_img1 margin-right" @click="goNav" src="../../static/images/order/im.png"></cover-image>
|
||||
<cover-image class="pay_img1" @click="call" src="../../static/images/order/phone.png"></cover-image>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
markers: [], //标记点
|
||||
indentNumber: '',
|
||||
riderUserId: '',
|
||||
orderDetails: {},
|
||||
rider: {},
|
||||
timer: '',
|
||||
XCXIsSelect: '是',
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.XCXIsSelect = this.$queue.getData('XCXIsSelect');
|
||||
if (this.XCXIsSelect == '否') {
|
||||
this.getGuize()
|
||||
uni.setNavigationBarTitle({
|
||||
title: '隐私政策'
|
||||
});
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '地图'
|
||||
});
|
||||
}
|
||||
let that = this
|
||||
that.indentNumber = option.indentNumber
|
||||
|
||||
that.getData()
|
||||
|
||||
|
||||
},
|
||||
onShow() {
|
||||
let that = this
|
||||
this.timer = setInterval(function() {
|
||||
that.getLocation()
|
||||
}, 10000)
|
||||
},
|
||||
onHide() {
|
||||
console.log(this.timer,'定时器')
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.$Request.postT('/app/tbindent/userIndentMessage?indentNumber=' + this.indentNumber).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
this.orderDetails = res.data
|
||||
console.log(this.orderDetails.avatar)
|
||||
let marker = {
|
||||
id: 1,
|
||||
latitude: res.data.userLat,
|
||||
longitude: res.data.userLng,
|
||||
iconPath: '../../static/images/order/01.png',
|
||||
width: '40',
|
||||
height: '40'
|
||||
}
|
||||
this.markers.push(marker)
|
||||
this.riderUserId = this.orderDetails.riderUserId
|
||||
this.getLocation()
|
||||
console.log(this.markers)
|
||||
}
|
||||
});
|
||||
},
|
||||
getLocation() {
|
||||
let data = {
|
||||
riderUserId: this.riderUserId,
|
||||
lat: this.orderDetails.userLat,
|
||||
lng: this.orderDetails.userLng
|
||||
}
|
||||
this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.latitude = res.data.riderLocation.lat;
|
||||
this.longitude = res.data.riderLocation.lng;
|
||||
this.rider = res.data
|
||||
this.rider.mDateTime = res.data.mDateTime.split(' ')
|
||||
if (this.rider.aDouble > 1000) {
|
||||
this.rider.aDouble = Number((this.rider.aDouble / 1000)).toFixed(2)+"km"
|
||||
}else{
|
||||
if(this.rider.aDouble==0){
|
||||
this.rider.aDouble = "0m";
|
||||
}else{
|
||||
this.rider.aDouble = Number(this.rider.aDouble).toFixed(1) +"m";
|
||||
}
|
||||
}
|
||||
|
||||
let marker = {
|
||||
id: 2,
|
||||
latitude: res.data.riderLocation.lat,
|
||||
longitude: res.data.riderLocation.lng,
|
||||
iconPath: '../../static/images/order/rider.png',
|
||||
width: '40',
|
||||
height: '40',
|
||||
}
|
||||
this.markers.push(marker)
|
||||
}
|
||||
});
|
||||
},
|
||||
call() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.orderDetails.phone
|
||||
});
|
||||
},
|
||||
goNav() {
|
||||
uni.navigateTo({
|
||||
url: '/pageA/kefu/kefu'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.controls-title {
|
||||
width: 90%;
|
||||
/* height: 220upx; */
|
||||
/* line-height: 220upx; */
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
margin: 40upx;
|
||||
border-radius: 26upx;
|
||||
box-shadow: 0upx 30upx 40upx 0upx rgba(187, 170, 163, 0.20);
|
||||
/* margin: 0 40rpx; */
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.tabs_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.pay_tit {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pay_img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.pay_img1 {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.tabs_bottom {
|
||||
margin: 0 20rpx 20rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pay_btn {
|
||||
padding: 5rpx 16rpx;
|
||||
border: solid 2rpx #999999;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.pay_name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pay_line {
|
||||
height: 2rpx;
|
||||
background-color: #afafaf;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
</style>
|
||||
623
pages/order/takefood.vue
Normal file
623
pages/order/takefood.vue
Normal file
@@ -0,0 +1,623 @@
|
||||
<template>
|
||||
<view class="pages" v-if="XCXIsSelect=='是'">
|
||||
<!-- 余额 -->
|
||||
<view class="tosend" v-if="dataDet">
|
||||
<view class="tosend_text" v-if="dataDet.status == 3&&dataDet.orderType==1">待取餐</view>
|
||||
<view class="tosend_text" v-if="dataDet.status == 3&&dataDet.orderType==2">配送中</view>
|
||||
<view class="tosend_text" v-if="dataDet.status == 4">已完成</view>
|
||||
<view class="tosend_text" v-if="dataDet.status == 5">已取消</view>
|
||||
<view class="tosend_text" v-if="dataDet.status == 6">制作中</view>
|
||||
<view class="tosend_text" v-if="dataDet.status == 7">待接单</view>
|
||||
<view class="tosend_text" v-if="dataDet.status == 8">已取消</view>
|
||||
|
||||
<view class="flex justify-center" v-if="dataDet.orderType==1" style="width: 100%;height: 140rpx;margin-bottom: 30rpx;">
|
||||
<view class="flex justify-center" style="width: 94%;height: 100%;border-radius: 18rpx;background-color: #ffffff;padding: 3%;">
|
||||
<view class="flex justify-between align-center" style="width: 100%;height: 100%;">
|
||||
<image :src="shopInfo.shopCover?shopInfo.shopCover:'../../static/logo.png'" style="width: 110rpx;height: 110rpx;border-radius: 8rpx;" mode=""></image>
|
||||
<view class="flex flex-wrap align-center" style="width: 80%;height: 100%;">
|
||||
<view class="" style="width: 100%;font-size: 30rpx;" @click="call">
|
||||
<text style="font-weight: bold;">{{shopInfo.shopName?shopInfo.shopName:''}}</text>
|
||||
<text style="margin-left: 10rpx;font-weight: bold;">{{shopInfo.phones?shopInfo.phones:''}}</text>
|
||||
<u-icon name="phone" size="30" color="#999999" style=""></u-icon>
|
||||
</view>
|
||||
<view class="flex align-center" style="width: 100%;color: #999999;font-size: 24rpx;" @click="goMaps">
|
||||
<u-icon name="map" size="30" color="#999999" style="margin-right: 10rpx;"></u-icon>
|
||||
{{shopInfo.detailedAddress?shopInfo.detailedAddress:''}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tosend_header">
|
||||
<!-- 排序 -->
|
||||
<view class="cont_two_top" v-if="dataDet.status == 3&&dataDet.orderType==1">
|
||||
<view class="cont_two_top_le">取餐号码</view>
|
||||
<!-- <view class="cont_two_top_ri">制作中</view> -->
|
||||
</view>
|
||||
<view v-if="dataDet.status == 3&&dataDet.orderType==1" class="cont_two_text">{{dataDet.orderCode}}
|
||||
</view>
|
||||
<view v-if="dataDet.status == 3&&dataDet.orderType==1" class="cont_two_text2">
|
||||
前面还有<text>{{dataDet.countOrder}}</text>个订单</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view v-if="dataDet" class="tosend_header_food" v-for="(item,index) in dataDet.orderGoodsList"
|
||||
:key='index'>
|
||||
<view class="tosend_header_food_le">
|
||||
<image :src="item.goodsPicture[0]" style="border-radius: 10rpx;" mode=""></image>
|
||||
</view>
|
||||
<view class="flex-sub margin-left-sm">
|
||||
<view class="flex justify-between align-center">
|
||||
<view class="text-lg text-bold text-black">{{item.goodsName}}</view>
|
||||
<view class="text-lg text-bold text-black"><text class="text-sm">¥</text>{{item.goodsPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between align-center text-gray">
|
||||
<view v-if="item.skuMessage">{{item.skuMessage}}</view>
|
||||
<view>X{{item.goodsNum}}</view>
|
||||
</view>
|
||||
<view class="flex justify-between align-center text-gray" v-if="item.goodsPack">
|
||||
<view>打包费</view>
|
||||
<view>￥{{item.goodsPack}} / 份</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tosend_header_do " v-if="dataDet.couponMoney>0">
|
||||
<view>优惠券</view>
|
||||
<view class="tosend_header_do_ri">-￥{{dataDet.couponMoney}}</view>
|
||||
</view>
|
||||
<view class="tosend_header_do do_bot" v-if="dataDet.errandMoney>0&&dataDet.orderType==2">
|
||||
<view>跑腿费</view>
|
||||
<view class="tosend_header_do_ri">￥{{dataDet.errandMoney}}</view>
|
||||
</view>
|
||||
<view class="tosend_header_do">
|
||||
<view class="tosend_header_do_le2">实付</view>
|
||||
<view class="tosend_header_do_ri2"><text>￥</text>{{dataDet.payMoney}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-center" v-if="dataDet">
|
||||
<map v-if="dataDet.status == 3 && latitude && longitude" id="map" @tap="goMap"
|
||||
style="width: 95%; height: 300rpx;margin: 20rpx auto 0;" :markers="markers" :latitude="latitude"
|
||||
:longitude="longitude"></map>
|
||||
</view>
|
||||
|
||||
<!-- 骑手信息 -->
|
||||
<view class="rider_box" v-if="dataDet&&(dataDet.status == 3||dataDet.status == 4)&&dataDet.riderUserId">
|
||||
<view class="flex justify-between align-center padding">
|
||||
<view style="font-size: 31rpx;color: black;">联系骑手</view>
|
||||
<image @click="complaint" src="../../static/images/order/tousu.png"
|
||||
style="width: 43rpx;height: 39rpx;" mode=""></image>
|
||||
</view>
|
||||
<view>
|
||||
<u-line color="#F2F2F2" />
|
||||
</view>
|
||||
<view style="padding: 20rpx 25rpx;display: flex;justify-content: space-between;align-items: center;">
|
||||
<view style="display: flex;">
|
||||
<view class="rider_left">
|
||||
<image :src="dataDet.riderAvatar"></image>
|
||||
</view>
|
||||
<view style="margin-left: 10rpx;color: #333333;">
|
||||
<view>{{dataDet.riderUserName}}</view>
|
||||
<view>{{dataDet.riderPhone1}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="phone" @click="bindphone(dataDet.riderPhone)">联系TA</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 其他信息 -->
|
||||
<view class="tosend_cont" v-if="dataDet">
|
||||
<view class="tosend_header_text">
|
||||
<text>订单信息</text>
|
||||
</view>
|
||||
<view class="tosend_cont_infor" v-if="dataDet.orderType==1">
|
||||
<view class="tosend_cont_infor_le">取餐号码</view>
|
||||
<view class="tosend_cont_infor_ri">{{dataDet.orderCode}}</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor">
|
||||
<view class="tosend_cont_infor_le">订单编号</view>
|
||||
<view class="tosend_cont_infor_ri">{{dataDet.orderNumber}}
|
||||
<u-icon @click="copy(dataDet.orderNumber)" name="order" style="margin-left: 6rpx;" size="32">
|
||||
</u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor">
|
||||
<view class="tosend_cont_infor_le">下单时间</view>
|
||||
<view class="tosend_cont_infor_ri">{{dataDet.payTime}}</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor">
|
||||
<view class="tosend_cont_infor_le">支付方式</view>
|
||||
<view class="tosend_cont_infor_ri" v-if="dataDet.payType==1">微信支付</view>
|
||||
<view class="tosend_cont_infor_ri" v-if="dataDet.payType==2">余额支付</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor" v-if="dataDet.orderType==2">
|
||||
<view class="tosend_cont_infor_le">联系人</view>
|
||||
<view class="tosend_cont_infor_ri">{{dataDet.address.userName}}</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor" v-if="dataDet.orderType==2">
|
||||
<view class="tosend_cont_infor_le">联系方式</view>
|
||||
<view class="tosend_cont_infor_ri">{{dataDet.address.userPhone}}</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor" v-if="dataDet.orderType==2">
|
||||
<view class="tosend_cont_infor_le">详细地址</view>
|
||||
<view class="tosend_cont_infor_ri">
|
||||
{{dataDet.address.province}}{{dataDet.address.city}}{{dataDet.address.district}}{{dataDet.address.addressDetail}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor" v-if="dataDet.remark">
|
||||
<view class="tosend_cont_infor_le">订单备注</view>
|
||||
<view class="tosend_cont_infor_ri">
|
||||
{{dataDet.remark}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 100rpx;height: 100rpx;position: fixed;bottom: 100rpx;right: 70rpx;" v-if="dataDet">
|
||||
<image src="../../static/images/order/kefu.png" style="width: 100%;height: 100%;" @click="goChat()" mode="">
|
||||
</image>
|
||||
<view class="shopxiaoix" v-if="RiderUnreadCount>0">{{RiderUnreadCount}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
dataDet: '',
|
||||
markers: [], //标记点
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
RiderUnreadCount: 0,
|
||||
XCXIsSelect: '是',
|
||||
shopId:'',
|
||||
shopInfo:{},
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.XCXIsSelect = this.$queue.getData('XCXIsSelect');
|
||||
if (this.XCXIsSelect == '否') {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '隐私政策'
|
||||
});
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '订单详情'
|
||||
});
|
||||
}
|
||||
let that = this
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
that.orderId = option.orderId
|
||||
that.shopId = option.shopId
|
||||
uni.getLocation({
|
||||
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||
success: function(res) {
|
||||
that.lat = res.latitude;
|
||||
that.lng = res.longitude;
|
||||
that.getDataDet()
|
||||
},fail(e) {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '您的定位权限未开启，请开启后再来操作吧！',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if(res.confirm){
|
||||
uni.openSetting({ // 打开设置页
|
||||
success(rea) {
|
||||
console.log(rea.authSetting)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
this.getRiderUnreadCount()
|
||||
this.getShopInfo()
|
||||
},
|
||||
created() {
|
||||
this.RiderUnreadCount = setInterval(() => {
|
||||
this.getRiderUnreadCount()
|
||||
}, 5000)
|
||||
},
|
||||
methods: {
|
||||
// 点击调起地图查看位置
|
||||
goMaps() {
|
||||
let that = this;
|
||||
let lati = parseFloat(that.shopInfo.shopLat);
|
||||
let longi = parseFloat(that.shopInfo.shopLng);
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success(res) {
|
||||
uni.openLocation({
|
||||
name: that.shopInfo.shopName,
|
||||
latitude: lati,
|
||||
longitude: longi,
|
||||
success: function() {}
|
||||
});
|
||||
},
|
||||
fail(err) {}
|
||||
});
|
||||
},
|
||||
// 打电话
|
||||
call() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.shopInfo.phone
|
||||
});
|
||||
},
|
||||
//获取店铺信息
|
||||
getShopInfo(){
|
||||
let data ={
|
||||
shopId:this.shopId
|
||||
}
|
||||
this.$Request.get("/app/shop/selectShopMessage", data).then(res => {
|
||||
if(res.code == 0 && res.data){
|
||||
this.shopInfo = res.data
|
||||
let phoneNumber = this.shopInfo.phone.toString() //先强制转换成字符串类型
|
||||
this.shopInfo.phones = phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
|
||||
}
|
||||
})
|
||||
},
|
||||
getDataDet() {
|
||||
let data = {
|
||||
orderId: this.orderId
|
||||
}
|
||||
this.$Request.get("/app/order/selectOrderById", data).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 0) {
|
||||
this.dataDet = res.data
|
||||
// this.dataDet.goodsMessage = JSON.parse(this.dataDet.goodsMessage)
|
||||
|
||||
this.dataDet.orderCode = this.dataDet.orderCode.substring(this.dataDet.orderCode.length -
|
||||
3, this.dataDet.orderCode.length)
|
||||
this.dataDet.orderGoodsList.forEach(res => {
|
||||
res.goodsPicture = res.goodsPicture.split(',')
|
||||
})
|
||||
if (this.dataDet.riderPhone) {
|
||||
this.dataDet.riderPhone1 = this.dataDet.riderPhone.substring(0, 3) + "****" + this
|
||||
.dataDet.riderPhone.substring(7, 11);
|
||||
}
|
||||
|
||||
this.dataDet.address = this.dataDet.address ? JSON.parse(this.dataDet.address) : ''
|
||||
console.log(this.dataDet.address)
|
||||
if (this.dataDet.riderUserId) {
|
||||
this.getLocation(this.dataDet.riderUserId)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
goChat() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/shop/im?ordersId=' + this.orderId
|
||||
})
|
||||
},
|
||||
getLocation(e) {
|
||||
let data = {
|
||||
riderUserId: e,
|
||||
lat: this.lat,
|
||||
lng: this.lng
|
||||
}
|
||||
this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
|
||||
if (res.code === 0) {
|
||||
|
||||
console.log(res.data, '经纬度')
|
||||
this.latitude = res.data.riderLocation.lat;
|
||||
this.longitude = res.data.riderLocation.lng;
|
||||
|
||||
this.markers = [{
|
||||
id: 1,
|
||||
latitude: res.data.riderLocation.lat,
|
||||
longitude: res.data.riderLocation.lng,
|
||||
iconPath: '../../static/images/order/rider.png',
|
||||
width: '40',
|
||||
height: '40'
|
||||
}]
|
||||
}
|
||||
});
|
||||
},
|
||||
goMap() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/waimaiMap?orderId=' + this.orderId
|
||||
})
|
||||
},
|
||||
// 拨打电话
|
||||
bindphone(e) {
|
||||
console.log(e)
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e
|
||||
});
|
||||
},
|
||||
complaint() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/complaint/complaint?indentNumber=' + this.dataDet.indentNumber +
|
||||
'&indentType=5'
|
||||
})
|
||||
},
|
||||
copy(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '复制成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getRiderUnreadCount() {
|
||||
let that = this
|
||||
let data = {
|
||||
ordersId: that.orderId
|
||||
}
|
||||
that.$Request.getT("/app/ordersChat/selectUserUnreadCount", data).then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data > 0) {
|
||||
if (that.RiderUnreadCount != res.data) {
|
||||
that.aplayAudio()
|
||||
that.RiderUnreadCount = res.data
|
||||
}
|
||||
} else {
|
||||
that.RiderUnreadCount = 0
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 语音播报
|
||||
aplayAudio() {
|
||||
// const audio = document.getElementById('audio')
|
||||
|
||||
// audio.play()
|
||||
// console.log('语音提示')
|
||||
const innerAudioContext = uni.createInnerAudioContext();
|
||||
innerAudioContext.autoplay = true;
|
||||
innerAudioContext.src =
|
||||
'https://pw.xianmxkj.com/file/uploadPath/2022/01/19/0753211f78d718d44ee6372e33eae9ee.mp3';
|
||||
innerAudioContext.onPlay(() => {
|
||||
console.log('开始播放');
|
||||
});
|
||||
innerAudioContext.onError((res) => {
|
||||
console.log(res.errMsg);
|
||||
console.log(res.errCode);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 余额 */
|
||||
.tosend {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
background: -webkit-linear-gradient(top, #FCD202, #F5F5F5);
|
||||
}
|
||||
|
||||
.tosend_text {
|
||||
padding: 3% 3% 4%;
|
||||
font-size: 48rpx;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tosend_header {
|
||||
width: 94%;
|
||||
background-color: #FFFFFF;
|
||||
margin: 0 auto;
|
||||
border-radius: 18rpx;
|
||||
padding: 3%;
|
||||
}
|
||||
|
||||
/* 排序 */
|
||||
.cont_two_top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cont_two_top_le {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.cont_two_top_ri {
|
||||
padding: 6rpx 10rpx;
|
||||
text-align: center;
|
||||
background: rgba(255, 19, 10, 0.2);
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid #FF130A;
|
||||
color: #FF130A;
|
||||
opacity: 0.6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.cont_two_text {
|
||||
font-size: 56rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin: 5% 0;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.cont_two_text2 {
|
||||
font-size: 30rpx;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
padding-bottom: 4%;
|
||||
line-height: 32rpx;
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
}
|
||||
|
||||
.cont_two_text2 text {
|
||||
color: #FF130A;
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.tosend_header_text {
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
line-height: 2;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tosend_header_food {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.tosend_header_food_le {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.tosend_header_food_le image {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
}
|
||||
|
||||
.tosend_header_food_ce {
|
||||
margin: 0 0 0 4%;
|
||||
width: 57%;
|
||||
}
|
||||
|
||||
.tosend_header_food_ri {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.tosend_header_food_text {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tosend_header_food_text text {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.tosend_header_food_text2 {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.do_top {
|
||||
padding-top: 3%;
|
||||
}
|
||||
|
||||
.do_bot {
|
||||
padding-bottom: 3%;
|
||||
border-bottom: 2rpx solid #E6E6E6;
|
||||
}
|
||||
|
||||
.tosend_header_do {
|
||||
width: 100%;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tosend_header_do view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tosend_header_do_ri {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tosend_header_do_le2 {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
padding-top: 1.5%;
|
||||
}
|
||||
|
||||
.tosend_header_do_ri2 {
|
||||
text-align: right;
|
||||
color: #EA0000;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.tosend_header_do_ri2 text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 其他信息 */
|
||||
.tosend_cont {
|
||||
width: 94%;
|
||||
background-color: #FFFFFF;
|
||||
margin: 3% auto;
|
||||
border-radius: 18rpx;
|
||||
padding: 3%;
|
||||
}
|
||||
|
||||
.tosend_cont_infor {
|
||||
display: flex;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.tosend_cont_infor_le {
|
||||
flex: 1;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.tosend_cont_infor_ri {
|
||||
flex: 2;
|
||||
text-align: right;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tosend_cont_text {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 联系骑手 */
|
||||
.rider_box {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
}
|
||||
|
||||
.rider_left image {
|
||||
width: 80rpx;
|
||||
height: 85rpx;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.phone {
|
||||
background: #FD6416;
|
||||
color: #ffffff;
|
||||
padding: 8rpx 15rpx;
|
||||
border-radius: 13rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.shopxiaoix {
|
||||
background: red;
|
||||
color: #ffffff;
|
||||
width: auto;
|
||||
padding: 5rpx 12rpx;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
border-radius: 30rpx;
|
||||
position: absolute;
|
||||
top: -4rpx;
|
||||
right: -4rpx;
|
||||
}
|
||||
</style>
|
||||
216
pages/order/waimaiMap.vue
Normal file
216
pages/order/waimaiMap.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view>
|
||||
<map id="map" style="width: 100%; height: 700px;" :latitude="latitude" :longitude="longitude" :markers="markers"
|
||||
:show-location="true">
|
||||
</map>
|
||||
|
||||
<cover-view class="controls-title">
|
||||
<cover-view class="tabs_box">
|
||||
<cover-image class="pay_img" src="../../static/images/order/avatar.png"></cover-image>
|
||||
<cover-view class="flex flex-sub margin-left-sm flex-direction justify-between">
|
||||
<cover-view class="pay_name">骑手预计{{rider.mDateTime[1]}}送达</cover-view>
|
||||
<cover-view class="text-gray margin-top" style="margin-top: 5rpx;">
|
||||
距离您{{rider.aDouble}}
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="flex">
|
||||
<cover-image class="pay_img1 margin-right" @click="goNav" src="../../static/images/order/im.png"></cover-image>
|
||||
<cover-image class="pay_img1" @click="call" src="../../static/images/order/phone.png"></cover-image>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
markers: [], //标记点
|
||||
orderId: '',
|
||||
riderUserId: '',
|
||||
orderDetails: {},
|
||||
rider: {},
|
||||
timer: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
let that = this
|
||||
that.orderId = option.orderId
|
||||
uni.getLocation({
|
||||
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||
success: function(res) {
|
||||
that.lat = res.latitude;
|
||||
that.lng = res.longitude;
|
||||
that.getData()
|
||||
|
||||
},fail(e) {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '您的定位权限未开启，请开启后再来操作吧！',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if(res.confirm){
|
||||
uni.openSetting({ // 打开设置页
|
||||
success(rea) {
|
||||
console.log(rea.authSetting)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
onShow() {
|
||||
let that = this
|
||||
that.timer = setInterval(function() {
|
||||
that.getLocation()
|
||||
}, 10000)
|
||||
},
|
||||
onHide() {
|
||||
console.log(this.timer,'定时器')
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
onBackPress(e){
|
||||
console.log("监听返回按钮事件",this.timer);
|
||||
clearInterval(this.timer)
|
||||
// 此处一定姚要return为true，否则页面不会返回到指定路径
|
||||
return true;
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.$Request.get('/app/order/selectOrderById?orderId=' + this.orderId).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
this.orderDetails = res.data
|
||||
|
||||
this.riderUserId = res.data.riderUserId
|
||||
this.getLocation()
|
||||
// console.log(this.markers)
|
||||
}
|
||||
});
|
||||
},
|
||||
getLocation() {
|
||||
let data = {
|
||||
riderUserId: this.riderUserId,
|
||||
lat: this.lat,
|
||||
lng: this.lng
|
||||
}
|
||||
this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.latitude = res.data.riderLocation.lat;
|
||||
this.longitude = res.data.riderLocation.lng;
|
||||
this.rider = res.data
|
||||
this.rider.mDateTime = res.data.mDateTime.split(' ')
|
||||
if (this.rider.aDouble > 1000) {
|
||||
this.rider.aDouble = Number((this.rider.aDouble / 1000)).toFixed(2)+"km"
|
||||
}else{
|
||||
if(this.rider.aDouble==0){
|
||||
this.rider.aDouble = "0m";
|
||||
}else{
|
||||
this.rider.aDouble = Number(this.rider.aDouble).toFixed(1) +"m";
|
||||
}
|
||||
}
|
||||
|
||||
let marker = {
|
||||
id: 2,
|
||||
latitude: res.data.riderLocation.lat,
|
||||
longitude: res.data.riderLocation.lng,
|
||||
iconPath: '../../static/images/order/rider.png',
|
||||
width: '40',
|
||||
height: '40',
|
||||
}
|
||||
this.markers.push(marker)
|
||||
}
|
||||
});
|
||||
},
|
||||
call() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.orderDetails.riderPhone
|
||||
});
|
||||
},
|
||||
goNav() {
|
||||
uni.navigateTo({
|
||||
url: '/my/setting/chat'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.controls-title {
|
||||
width: 90%;
|
||||
/* height: 220upx; */
|
||||
/* line-height: 220upx; */
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
margin: 40upx;
|
||||
border-radius: 26upx;
|
||||
box-shadow: 0upx 30upx 40upx 0upx rgba(187, 170, 163, 0.20);
|
||||
/* margin: 0 40rpx; */
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.tabs_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.pay_tit {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pay_img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.pay_img1 {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.tabs_bottom {
|
||||
margin: 0 20rpx 20rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pay_btn {
|
||||
padding: 5rpx 16rpx;
|
||||
border: solid 2rpx #999999;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.pay_name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pay_line {
|
||||
height: 2rpx;
|
||||
background-color: #afafaf;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user