873 lines
24 KiB
Vue
873 lines
24 KiB
Vue
<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>
|