首次提交
This commit is contained in:
duan
816
pages/order/detail.vue
Normal file
816
pages/order/detail.vue
Normal file
@@ -0,0 +1,816 @@
|
||||
<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">
|
||||
|
||||
<text v-if="orderDetails.evaluateMessage">评价内容：{{orderDetails.evaluateMessage}}</text>
|
||||
<text v-else>写下您的评价感受吧！</text>
|
||||
</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: 16upx;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;font-size: 30upx;">
|
||||
<text>预约时间</text>
|
||||
<text style="font-weight: bold;">{{orderDetails.sendOutTime}}</text>
|
||||
</view>
|
||||
|
||||
<map v-if="orderDetails.indentState == 4 && 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}}</view>
|
||||
</view>
|
||||
<!-- 同城服务-->
|
||||
<view class="part_three" v-if="orderDetails.indentType == 4">
|
||||
<view class="city_pay">
|
||||
<view class="city_box">同城服务</view>
|
||||
<text>{{orderDetails.serviceType}}</text>
|
||||
</view>
|
||||
<view class="pay_tit">{{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>{{orderDetails.itemType}}</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/image/mai.png" v-if="orderDetails.indentType == 3"></image>
|
||||
<image src="../../../static/image/icon_f.png" v-else></image>
|
||||
</view>
|
||||
<view class="box_addres">
|
||||
<view class="add">
|
||||
{{orderDetails.shipAddress?orderDetails.shipAddress:''}}{{orderDetails.shipAddressDetail}}
|
||||
</view>
|
||||
<view class="num">
|
||||
<view class="name" v-if="orderDetails.indentType !=3">
|
||||
{{orderDetails.shipUserName}} <text>{{orderDetails.shipUserPhone}}</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/image/icon_s.png"></image>
|
||||
</view>
|
||||
<view class="box_addres">
|
||||
<view class="add">{{orderDetails.deliveryAddress}}{{orderDetails.deilveryAddressDetail}}</view>
|
||||
<view class="num">
|
||||
<view class="name">
|
||||
{{orderDetails.deliveryUserName}}<text>{{orderDetails.deliveryUserPhone}}</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">
|
||||
<text v-if="orderDetails.distance">{{orderDetails.distance/1000}}公里</text>
|
||||
<text>￥{{orderDetails.indentBasicsMoney}}</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 class="flex justify-between align-center padding">
|
||||
<view style="font-size: 31rpx;color: black;">联系骑手...</view>
|
||||
<image @click="complaint" src="../../../static/image/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.phone}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="phone" @click="bindphone()">联系TA</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}}</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 class="order_list" v-if="orderDetails.itemCode">
|
||||
|
||||
<view class="order_name" style="color: #FF6A04;">收货码</view>
|
||||
<view class="order_nums" style="color: #FF6A04;">{{orderDetails.itemCode}}</view>
|
||||
</view>
|
||||
<view class="order_list"
|
||||
v-if="orderDetails.indentType != 4&&orderDetails.indentType != 3&&orderDetails.remarks">
|
||||
<view class="order_name">备注</view>
|
||||
<view class="order_nums">{{orderDetails.remarks}}</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.indentBasicsMoney}}</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">
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderDetails: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
markers: [], //标记点
|
||||
}
|
||||
},
|
||||
onLoad(data) {
|
||||
let that = this
|
||||
console.log(data)
|
||||
that.indentNumber = data.indentNumber
|
||||
if (!data) {
|
||||
that.orderDetails = JSON.stringify(data.data)
|
||||
}
|
||||
// console.log(that.orderDetails)
|
||||
that.userList()
|
||||
|
||||
},
|
||||
methods: {
|
||||
getLocation(e) {
|
||||
let data = {
|
||||
riderUserId: e,
|
||||
lat: this.orderDetails.deliveryAddressLatitude,
|
||||
lng: this.orderDetails.deliveryAddressLongitude
|
||||
}
|
||||
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/orderDetail/orderMap?indentNumber=' + this.indentNumber
|
||||
})
|
||||
},
|
||||
// 拨打电话
|
||||
bindphone() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.orderDetails.phone
|
||||
});
|
||||
},
|
||||
userList() {
|
||||
this.$Request.postT('/app/indent/userIndentMessage?indentNumber=' + this.indentNumber).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
this.orderDetails = res.data
|
||||
this.getLocation(this.orderDetails.riderUserId)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 再来一单
|
||||
bindorder(e) {
|
||||
console.log(e)
|
||||
if (e.indentType == 1 || e.indentType == 2) {
|
||||
let index = e.indentType
|
||||
uni.navigateTo({
|
||||
url: '/pages/Helpsend/Helpsend?indentNumber=' + e.indentNumber + '&index=' + index
|
||||
})
|
||||
} else if (e.indentType == 3) {
|
||||
let index = e.indentType
|
||||
let current = e.buyType
|
||||
uni.navigateTo({
|
||||
url: '/pages/Helppay/Helppay?indentNumber=' + e.indentNumber + '&index=' + index +
|
||||
'¤t=' + current
|
||||
})
|
||||
} else if (e.indentType == 4) {
|
||||
let index = e.indentType
|
||||
uni.navigateTo({
|
||||
url: '/pages/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/indent/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/indent/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: '/pages/order/pay/pay?indentNumber=' + indentNumber
|
||||
})
|
||||
},
|
||||
complaint() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/complaint/complaint?indentNumber=' + this.orderDetails.indentNumber
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* #ifndef MP-WEIXIN */
|
||||
page {
|
||||
background: #F2EDED;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.order_details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 待支付 */
|
||||
.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: 30upx;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.part_sevens {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
/* height: 275rpx; */
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 10upx;
|
||||
border-radius: 10rpx;
|
||||
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>
|
||||
1283
pages/order/index.vue
Normal file
1283
pages/order/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
872
pages/order/orderDet.vue
Normal file
872
pages/order/orderDet.vue
Normal file
@@ -0,0 +1,872 @@
|
||||
<template>
|
||||
<view class="pages">
|
||||
<!-- 余额 -->
|
||||
<view class="tosend">
|
||||
<view class="tosend_text" v-if="dataDet.status == 6">制作中...</view>
|
||||
<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 && dataDet.riderUserId">配送中
|
||||
</view>
|
||||
<view class="tosend_text" v-if="dataDet.status == 3 && dataDet.orderType == 2 && dataDet.riderUserId==null">
|
||||
待配送</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 == 7">待接单</view>
|
||||
<!-- <view class="btnCm" v-if="item.riderUserId">配送中</view>
|
||||
<view class="btnCm" v-else>待派送</view> -->
|
||||
|
||||
<view class="tosend_cont" style="position: relative;margin-top: 20upx;" v-if="dataDet.orderType==2">
|
||||
<image src="../../static/images/order/dizhi.png"
|
||||
style="position: absolute;width: 32rpx;height: 40rpx;top: 50rpx;left: 32rpx;"></image>
|
||||
<view class="tosend_header_text" style="margin-left: 64rpx;"
|
||||
@tap="bindGps(address.lat,address.lng,address.addressDetail)">{{address.province}}{{address.city}}{{address.district}}{{address.addressDetail}}
|
||||
</view>
|
||||
<view class="tosend_cont_infor" style="margin-top: 0;margin-left: 64rpx;">
|
||||
<view class="tosend_cont_infor_le" @click="bindphone(address.userPhone)">
|
||||
{{address.userName}} {{address.userPhone}}
|
||||
</view>
|
||||
<!-- <view class="tosend_cont_infor_ri">{{dataDet.orderCode}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="tosend_header" style="margin-top: 20upx;">
|
||||
<!-- 排序 -->
|
||||
<view class="cont_two_top">
|
||||
<view class="cont_two_top_le" v-if="dataDet.status == 3">取餐号码</view>
|
||||
<!-- <view class="cont_two_top_ri" v-if="dataDet.status == 6">制作中</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?dataDet.countOrder:0}}</text>个人排队
|
||||
</view>
|
||||
<view v-if="dataDet.status != 3">
|
||||
<view class="flex justify-between">
|
||||
<view>取餐号码</view>
|
||||
<!-- <view class="cont_two_top_ri">制作中</view> -->
|
||||
</view>
|
||||
<view style="font-size:58upx;" class="text-center text-bold padding-tb">{{dataDet.orderCode}}</view>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="tosend_header_food" v-for="(item,index) in dataDet.orderGoodsList" :key='index'>
|
||||
<view class="tosend_header_food_le">
|
||||
<image :src="item.goodsPicture" alt="加载失败" style="border-radius: 10rpx;"></image>
|
||||
</view>
|
||||
<view class="tosend_header_food_ce justify-between">
|
||||
<view class="tosend_header_food_text">{{item.goodsName}}</view>
|
||||
<view class="tosend_header_food_text2" v-if="item.skuMessage">{{item.skuMessage}}</view>
|
||||
<view class="tosend_header_food_text2">打包费</view>
|
||||
</view>
|
||||
<view class="tosend_header_food_ri">
|
||||
<view class="tosend_header_food_text"><text>¥</text>{{item.goodsPrice}}</view>
|
||||
<view class="tosend_header_food_text2">×{{item.goodsNum}}</view>
|
||||
<view class="tosend_header_food_text2"><text>¥</text>{{item.goodsPack}}/份</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tosend_header_do do_top" 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" v-if="dataDet.packMoney>0&& dataDet.orderType == 2">
|
||||
<view>打包费</view>
|
||||
<view class="tosend_header_do_ri">￥{{dataDet.packMoney}}</view>
|
||||
</view> -->
|
||||
<view class="tosend_header_do do_bot" v-if="dataDet.couponMoney>0">
|
||||
<view>优惠券</view>
|
||||
<view class="tosend_header_do_ri">-￥{{dataDet.couponMoney}}</view>
|
||||
</view>
|
||||
<view class="tosend_header_do margin-top">
|
||||
<view class="tosend_header_do_le2">实付</view>
|
||||
<view class="tosend_header_do_ri2"><text>￥</text>{{dataDet.payMoney}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef APP -->
|
||||
<map v-if="dataDet.riderUserId != null && latitude && longitude&& dataDet.status == 3" id="map" @tap="goMap"
|
||||
style="width: 95%; height: 300rpx;margin-top: 20rpx;margin-left: 20rpx;" :markers="markers"
|
||||
:latitude="latitude" :longitude="longitude"></map>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP -->
|
||||
<map v-if="dataDet.riderUserId != null && latitude && longitude&& dataDet.status == 3" id="map" @tap="goMap"
|
||||
style="width: 95%; height: 300rpx;margin: 20rpx auto 0;" :markers="markers" :latitude="latitude"
|
||||
:longitude="longitude"></map>
|
||||
<!-- #endif -->
|
||||
<!-- 联系骑手 -->
|
||||
<view class="rider_box" v-if="dataDet.riderUserId!= null">
|
||||
<view class="flex justify-between align-center padding">
|
||||
<view style="font-size: 31rpx;color: black;">联系骑手...</view>
|
||||
<image @click="gotousu()" src="../../static/images/my/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>{{riderPhone}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="phone" @click="bindphone(dataDet.riderPhone)">联系TA</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评论信息 -->
|
||||
<view class="tosend_cont" v-if="dataDet.evaluateMessage">
|
||||
<view class="tosend_header_text">评论信息</view>
|
||||
<view>
|
||||
<view class="flex align-center">
|
||||
<image :src="dataDet.avatar?dataDet.avatar:'../../static/logo.png'"
|
||||
style="width: 40px;height: 40px;border-radius: 50%;"></image>
|
||||
<view class="flex justify-between align-center" style="width: 100%;margin-left: 5upx;">
|
||||
<view class="text-bold text-df">{{dataDet.userNickName}}</view>
|
||||
<view style="color: #999999;font-size: 24rpx;" v-if="dataDet.ecreateTime">
|
||||
{{dataDet.ecreateTime}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class=" padding-left margin-left-xl" style="font-size: 30upx;">{{dataDet.evaluateMessage}}
|
||||
</view>
|
||||
<view class="flex justify-end padding-top-sm margin-right" @click="show = true"
|
||||
v-if="!dataDet.shopReplyMessage">
|
||||
<image src="../../static/images/order/pinglun.png" style="width: 20px;height: 20px;"></image>
|
||||
</view>
|
||||
<view class="padding-left margin-left-xl margin-top-sm" v-else>
|
||||
<view class="flex align-center">
|
||||
<view class=" flex align-center text-df" style="color: #999999;">
|
||||
<view class="text-df">商家回复:</view>{{dataDet.shopReplyMessage}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="text-lg padding-left margin-left-xl">{{dataDet.shopReplyMessage}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 其他信息 -->
|
||||
<view class="tosend_cont ">
|
||||
<view class="tosend_header_text">其他信息</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 class="tosend_cont_infor">
|
||||
<view class="tosend_cont_infor_le">取餐号码</view>
|
||||
<view class="tosend_cont_infor_ri">{{dataDet.orderCode}}</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor" v-if="dataDet.phone" @tap="call(dataDet.phone)">
|
||||
<view class="tosend_cont_infor_le">取餐电话</view>
|
||||
<image src="../../static/images/my/phone.png" style="width: 40upx;height: 40upx;"></image>
|
||||
<!-- <view class="tosend_cont_infor_ri">{{dataDet.phone}}</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="flex justify-between align-center" style="margin-top: 3%;">
|
||||
<view class="tosend_cont_infor_le">订单编号</view>
|
||||
<view class="tosend_cont_infor_ri">{{dataDet.orderNumber}}</view>
|
||||
<view class="text-orange margin-left-lg" @click="copy(dataDet.orderNumber)">复制</view>
|
||||
</view>
|
||||
<view class="tosend_cont_infor padding-bottom-sm">
|
||||
<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>
|
||||
|
||||
<view class="addgood" @click="refund()" v-if="dataDet.status == 6">退款</view>
|
||||
<view class="addgood" @click="finish()" v-if="dataDet.status == 6">制作完成</view>
|
||||
<view class="addgood" @click.stop="xiaoPiao()"
|
||||
v-if="dataDet.status == 6||dataDet.status == 3||dataDet.status == 4">补打小票</view>
|
||||
|
||||
<view class="addgood" @click="refund()" v-if="dataDet.status == 3&&dataDet.orderType==2">退款</view>
|
||||
<view class="addgood" @click="peisong()" v-if="dataDet.status == 3&&dataDet.orderType==1">制作已完成</view>
|
||||
<view class="addgood" v-if="dataDet.status == 3&&dataDet.orderType==2&&dataDet.autoSendOrder == 1"
|
||||
@click.stop="succOrder(dataDet)">完成送达</view>
|
||||
<!-- <view class="addgood" @click="peisong()" v-if="dataDet.status == 3&&dataDet.orderType==2">餐品已完成,等待配送</view> -->
|
||||
<!-- 聊天室 -->
|
||||
<view class="chats" @click.stop="chat(dataDet)">
|
||||
<image src="../../static/images/img/chats.png"></image>
|
||||
<view class="shopxiaoix" v-if="ShopUnreadCount">{{ShopUnreadCount}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评论弹框 -->
|
||||
<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="closeable">
|
||||
<view>
|
||||
<view class="margin padding-tb">
|
||||
<u-input v-model="pinglun" type="textarea" height="200" placeholder="请填写回复的内容" maxlengt="200"
|
||||
:clearable="false" style="background:#F5F5F5;" />
|
||||
</view>
|
||||
<view class="btn" @click="bindEvaluate()">提交</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderNumber: '',
|
||||
dataDet: {},
|
||||
orderType: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
markers: [], //标记点
|
||||
orderId: '',
|
||||
address: {},
|
||||
riderPhone: '',
|
||||
ShopUnreadCount: 0,
|
||||
pinglun: '',
|
||||
show: false,
|
||||
closeable: true,
|
||||
first: false
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
console.log(option)
|
||||
this.orderNumber = option.orderNumber
|
||||
this.orderId = option.orderId
|
||||
this.first = false
|
||||
this.getDataDet()
|
||||
let that = this
|
||||
setInterval(function() {
|
||||
that.getShopUnreadCount()
|
||||
}, 10000)
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.first = false
|
||||
},
|
||||
methods: {
|
||||
//评论
|
||||
bindEvaluate() {
|
||||
let data = {
|
||||
shopReplyMessage: this.pinglun,
|
||||
orderNumber: this.orderNumber
|
||||
}
|
||||
this.$Request.postT("/admin/order/shopReplyEvaluate", data).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 0) {
|
||||
this.show = false
|
||||
this.getDataDet()
|
||||
}
|
||||
});
|
||||
},
|
||||
goMap() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/orderMap?indentNumber=' + this.orderNumber+'&orderId='+this.orderId
|
||||
})
|
||||
},
|
||||
//投诉
|
||||
gotousu() {
|
||||
console.log(this.orderNumber)
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/comments?indentNumber=' + this.orderNumber
|
||||
})
|
||||
},
|
||||
// 拨打电话
|
||||
bindphone(e) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e
|
||||
});
|
||||
},
|
||||
// 一键导航
|
||||
bindGps(latitude, longitude, name, detailsadd) {
|
||||
console.log(latitude, longitude, name, detailsadd)
|
||||
uni.openLocation({
|
||||
latitude: latitude - 0, //要去的纬度-地址
|
||||
longitude: longitude - 0, //要去的经度-地址
|
||||
name: name, //地址名称
|
||||
address: detailsadd, //详细地址名称
|
||||
success: function() {
|
||||
console.log('导航成功');
|
||||
},
|
||||
fail: function(error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
},
|
||||
//聊天室
|
||||
chat(e) {
|
||||
// console.log(e)
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/im?orderId=' + e.orderId
|
||||
})
|
||||
},
|
||||
//获取骑手位置
|
||||
getaddress(addressId, riderUserId) {
|
||||
console.log(addressId)
|
||||
let data = {
|
||||
addressId: addressId
|
||||
}
|
||||
this.$Request.getA("/app/address/selectAddressById", data).then(res => {
|
||||
// uni.hideLoading()
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
this.address = res.data
|
||||
this.getRider(res.data.lat, res.data.lng, riderUserId)
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取骑手信息
|
||||
getRider(lat, lng, riderUserId) {
|
||||
console.log(lat, lng, riderUserId, '111111')
|
||||
let data = {
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
riderUserId: riderUserId
|
||||
}
|
||||
this.$Request.getA("/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'
|
||||
}]
|
||||
uni.hideLoading()
|
||||
}
|
||||
});
|
||||
},
|
||||
getDataDet() {
|
||||
let data = {
|
||||
// page: 1,
|
||||
// limit: 10,
|
||||
orderId: this.orderId
|
||||
}
|
||||
this.$Request.getA("/app/order/selectOrderById", data).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 0) {
|
||||
this.dataDet = res.data
|
||||
|
||||
let start = res.data.orderCode.length - 3;
|
||||
this.dataDet.orderCode = res.data.orderCode.substring(start, res.data.orderCode.length)
|
||||
this.getaddress(res.data.addressId, res.data.riderUserId)
|
||||
this.dataDet.orderGoodsList.forEach(res => {
|
||||
res.goodsPicture = res.goodsPicture.split(',')
|
||||
})
|
||||
this.dataDet.address = JSON.parse(this.dataDet.address)
|
||||
this.riderPhone = this.dataDet.riderPhone
|
||||
this.riderPhone = this.riderPhone.replace(this.dataDet.riderPhone.substr(3, 4), "****")
|
||||
// console.log(this.dataDet);
|
||||
// let phone = this.dataDet.riderPhone;
|
||||
// let result = phone.substring(0, 3) + "****" + phone.substring(7, 11);
|
||||
// // console.log(this.dataDet.riderPhone,result);
|
||||
// this.dataDet.riderPhone = result
|
||||
this.orderType = res.data.orderType
|
||||
console.log(this.dataDet, '2222222')
|
||||
}
|
||||
});
|
||||
},
|
||||
copy(value) {
|
||||
uni.setClipboardData({
|
||||
data: value, //要被复制的内容
|
||||
success: () => { //复制成功的回调函数
|
||||
uni.showToast({ //提示
|
||||
title: '复制成功'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
// 打电话
|
||||
call(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
});
|
||||
},
|
||||
// 打开地图
|
||||
openMap(e) {
|
||||
let latitude = e.latitude;
|
||||
let longitude = e.longitude;
|
||||
uni.openLocation({
|
||||
latitude: Number(latitude),
|
||||
longitude: Number(longitude),
|
||||
name: e.address,
|
||||
success: function() {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
},
|
||||
// 完成送达
|
||||
succOrder(e) {
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认完成送达吗?',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
let data = {
|
||||
orderId: e.orderId,
|
||||
// orderNumber: e.orderNumber,
|
||||
// shopId: that.shopId,
|
||||
// addressId: e.addressId,
|
||||
// status: 3
|
||||
}
|
||||
that.$Request.postT("/admin/order/accomplishOrder", data).then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
refund() {
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认退款吗?',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
let data = {
|
||||
orderId: that.dataDet.orderId
|
||||
}
|
||||
that.$Request.postA("/admin/order/adminCancelOrder", data).then(res => {
|
||||
if (res.code == 0) {
|
||||
let pages = getCurrentPages(); // 当前页面
|
||||
let beforePage = pages[pages.length - 2]; // 上一页
|
||||
uni.navigateBack({
|
||||
success: function() {
|
||||
beforePage.onLoad(); // 执行上一页的onLoad方法
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 补打小票
|
||||
xiaoPiao() {
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认补打小票吗?',
|
||||
success: function(re) {
|
||||
if (re.confirm) {
|
||||
console.log('用户点击确定');
|
||||
let data = {
|
||||
orderId: that.dataDet.orderId,
|
||||
// orderNumber: e.orderNumber,
|
||||
// status: 8
|
||||
}
|
||||
that.$Request.post("/admin/order/print", data).then(res => {
|
||||
if (res.code == 0) {
|
||||
// that.page = 1
|
||||
// that.getOrderList()
|
||||
} else {
|
||||
that.$queue.showToast(res.msg)
|
||||
}
|
||||
});
|
||||
} else if (re.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
finish(e) {
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认订单完成吗?',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
let data = {
|
||||
orderId: that.dataDet.orderId,
|
||||
orderNumber: that.dataDet.orderNumber,
|
||||
status: 3
|
||||
}
|
||||
that.$Request.postJsonA("/admin/order/updateOrder", data).then(res => {
|
||||
if (res.code == 0) {
|
||||
let pages = getCurrentPages(); // 当前页面
|
||||
let beforePage = pages[pages.length - 2]; // 上一页
|
||||
uni.navigateBack({
|
||||
success: function() {
|
||||
beforePage.onLoad(); // 执行上一页的onLoad方法
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
peisong(e) {
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认开始配送吗?',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
let data = {
|
||||
orderId: that.dataDet.orderId,
|
||||
orderNumber: that.dataDet.orderNumber,
|
||||
status: 4
|
||||
}
|
||||
that.$Request.postJsonA("/admin/order/updateOrder", data).then(res => {
|
||||
if (res.code == 0) {
|
||||
let pages = getCurrentPages(); // 当前页面
|
||||
let beforePage = pages[pages.length - 2]; // 上一页
|
||||
uni.navigateBack({
|
||||
success: function() {
|
||||
beforePage.onLoad(); // 执行上一页的onLoad方法
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取用户聊天消息
|
||||
getShopUnreadCount() {
|
||||
let that = this
|
||||
let data = {
|
||||
ordersId: that.orderId
|
||||
}
|
||||
that.$Request.getT("/shop/ordersChat/selectShopUnreadCount", data).then(res => {
|
||||
if (res.code == 0) {
|
||||
// that.ShopUnreadCount = res.data
|
||||
if (res.data > 0) {
|
||||
if (this.ShopUnreadCount != res.data && !this.first) {
|
||||
that.aplayAudio()
|
||||
this.ShopUnreadCount = res.data
|
||||
uni.showModal({
|
||||
title: '消息',
|
||||
content: '有' + res.data + '条消息，请前往聊天列表处理。',
|
||||
success: (ret) => {
|
||||
if (ret.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/liaotian'
|
||||
})
|
||||
this.first = true
|
||||
} else {
|
||||
console.log('else', ret)
|
||||
that.defineCallBack()
|
||||
}
|
||||
}
|
||||
});
|
||||
// this.chatNum = data.data
|
||||
}
|
||||
} else {
|
||||
that.ShopUnreadCount = 0
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//消息提示
|
||||
aplayAudio() {
|
||||
// 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% 0%;
|
||||
font-size: 38upx;
|
||||
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-family: PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
line-height: 2;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.tosend_header_food {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 35rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tosend_header_food_le {
|
||||
/* width: 15%; */
|
||||
}
|
||||
|
||||
.tosend_header_food_le image {
|
||||
width: 135rpx;
|
||||
height: 135rpx;
|
||||
}
|
||||
|
||||
.tosend_header_food_ce {
|
||||
/* margin: 0 0 0 4%; */
|
||||
width: 57%;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
|
||||
.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;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tosend_header_food_text text {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.tosend_header_food_text2 {
|
||||
font-size: 26rpx;
|
||||
/* 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: 30rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.addgood {
|
||||
width: 685upx;
|
||||
height: 88upx;
|
||||
background: #FFCC00;
|
||||
border-radius: 8upx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
margin: 40rpx auto;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.chats {
|
||||
position: fixed;
|
||||
bottom: 70px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.chats image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* 联系骑手 */
|
||||
.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: 40rpx;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
border-radius: 30rpx;
|
||||
position: relative;
|
||||
top: -66px;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 690upx;
|
||||
height: 88upx;
|
||||
margin: 30upx auto;
|
||||
background: #FCD202;
|
||||
box-shadow: 0px 10upx 20upx 0upx #FFD9B3;
|
||||
border-radius: 16upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000000;
|
||||
|
||||
}
|
||||
</style>
|
||||
234
pages/order/orderMap.vue
Normal file
234
pages/order/orderMap.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<view>
|
||||
<map id="map" style="width: 100%; height: 720px;" :latitude="latitude" :longitude="longitude" :markers="markers"
|
||||
:show-location="true">
|
||||
</map>
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<cover-view class="controls-title">
|
||||
|
||||
<cover-view class="tabs_box">
|
||||
<cover-image class="pay_img" src="../../static/images/my/avatar.png"></cover-image>
|
||||
<cover-view class="flex flex-sub margin-left-sm flex-direction justify-between">
|
||||
<cover-view class="pay_name">骑手预计<text class="text-df">{{rider.mDateTime}}</text>送达</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/my/im.png">
|
||||
</cover-image>
|
||||
<cover-image class="pay_img1" @click="call" src="../../static/images/my/phone.png"></cover-image>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<cover-view class="controls-titles">
|
||||
<cover-view class="tabs_box">
|
||||
<cover-view style="position: relative;top: 0rpx;left: 0rpx;">
|
||||
<cover-image class="pay_img" src="../../static/images/my/avatar.png"></cover-image>
|
||||
<cover-view style="position: absolute;top: 5rpx;left: 120rpx;">
|
||||
<cover-view class="pay_name">骑手预计{{rider.mDateTime}}送达</cover-view>
|
||||
<cover-view class="text-gray margin-top" style="margin-top: 5rpx;">
|
||||
距离您{{rider.aDouble}}
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view style="position: absolute;top: 5rpx;right: 0rpx;">
|
||||
<cover-view style="position: relative;top: 0rpx;left: 0rpx;">
|
||||
<cover-view style="position: absolute;top: 15rpx;right: 40rpx;">
|
||||
<cover-image class="pay_img1 margin-right" @click="goNav" src="../../static/images/my/im.png">
|
||||
</cover-image>
|
||||
</cover-view>
|
||||
<cover-view style="position: absolute;top: 15rpx;right: 0rpx;">
|
||||
<cover-image class="pay_img1" @click="call" src="../../static/images/my/phone.png"></cover-image>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
markers: [], //标记点
|
||||
indentNumber: '',
|
||||
riderUserId: '',
|
||||
orderDetails: {},
|
||||
rider: {},
|
||||
timer: '',
|
||||
orderId:'',
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
let that = this
|
||||
that.indentNumber = option.indentNumber
|
||||
that.orderId = option.orderId
|
||||
that.getData()
|
||||
|
||||
|
||||
},
|
||||
onShow() {
|
||||
let that = this
|
||||
this.timer = setInterval(function() {
|
||||
that.getData()
|
||||
}, 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
|
||||
this.riderUserId = this.orderDetails.riderUserId
|
||||
this.getLocation()
|
||||
}
|
||||
});
|
||||
},
|
||||
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
|
||||
let mDateTime = res.data.mDateTime.length - 14;
|
||||
// this.dataDet.orderCode = res.data.orderCode.substring(start, res.data.orderCode.length)
|
||||
this.rider.mDateTime = res.data.mDateTime.substring(mDateTime, res.data.mDateTime.length)
|
||||
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: '/pages/my/chat'
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/im?orderId=' + this.orderId
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.controls-titles {
|
||||
width: 90%;
|
||||
/* height: 220upx; */
|
||||
/* line-height: 220upx; */
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 180rpx;
|
||||
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: 20rpx;
|
||||
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: 28rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pay_line {
|
||||
height: 2rpx;
|
||||
background-color: #afafaf;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user