orderDet.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876
  1. <template>
  2. <view class="pages">
  3. <!-- 余额 -->
  4. <view class="tosend">
  5. <view class="tosend_text" v-if="dataDet.status == 6">制作中...</view>
  6. <view class="tosend_text" v-if="dataDet.status == 3 && dataDet.orderType == 1">待取餐</view>
  7. <view class="tosend_text" v-if="dataDet.status == 3 && dataDet.orderType == 2 && dataDet.riderUserId">配送中
  8. </view>
  9. <view class="tosend_text" v-if="dataDet.status == 3 && dataDet.orderType == 2 && dataDet.riderUserId==null">
  10. 待配送</view>
  11. <view class="tosend_text" v-if="dataDet.status == 4">已完成</view>
  12. <view class="tosend_text" v-if="dataDet.status == 5">已取消</view>
  13. <view class="tosend_text" v-if="dataDet.status == 7">待接单</view>
  14. <!-- <view class="btnCm" v-if="item.riderUserId">配送中</view>
  15. <view class="btnCm" v-else>待派送</view> -->
  16. <view class="tosend_cont" style="position: relative;margin-top: 20upx;" v-if="dataDet.orderType==2">
  17. <image src="../../static/images/order/dizhi.png"
  18. style="position: absolute;width: 32rpx;height: 40rpx;top: 50rpx;left: 32rpx;"></image>
  19. <view class="tosend_header_text" style="margin-left: 64rpx;"
  20. @tap="bindGps(address.lat,address.lng,address.addressDetail)">{{address.province}}{{address.city}}{{address.district}}{{address.addressDetail}}
  21. </view>
  22. <view class="tosend_cont_infor" style="margin-top: 0;margin-left: 64rpx;">
  23. <view class="tosend_cont_infor_le" @click="bindphone(address.userPhone)">
  24. {{address.userName}}&nbsp;&nbsp;{{address.userPhone}}
  25. </view>
  26. <!-- <view class="tosend_cont_infor_ri">{{dataDet.orderCode}}</view> -->
  27. </view>
  28. </view>
  29. <view class="tosend_header" style="margin-top: 20upx;">
  30. <!-- 排序 -->
  31. <view class="cont_two_top">
  32. <view class="cont_two_top_le" v-if="dataDet.status == 3">取餐号码</view>
  33. <!-- <view class="cont_two_top_ri" v-if="dataDet.status == 6">制作中</view> -->
  34. </view>
  35. <view v-if="dataDet.status == 3 && dataDet.orderType == 1" class="cont_two_text">{{dataDet.orderCode}}
  36. </view>
  37. <view v-if="dataDet.status == 3 && dataDet.orderType == 1" class="cont_two_text2">
  38. 前面还有<text>{{dataDet.countOrder?dataDet.countOrder:0}}</text>个人排队
  39. </view>
  40. <view v-if="dataDet.status != 3">
  41. <view class="flex justify-between">
  42. <view>取餐号码</view>
  43. <!-- <view class="cont_two_top_ri">制作中</view> -->
  44. </view>
  45. <view style="font-size:58upx;" class="text-center text-bold padding-tb">{{dataDet.orderCode}}</view>
  46. </view>
  47. <!-- 商品列表 -->
  48. <view class="tosend_header_food" v-for="(item,index) in dataDet.orderGoodsList" :key='index'>
  49. <view class="tosend_header_food_le">
  50. <image :src="item.goodsPicture" alt="加载失败" style="border-radius: 10rpx;"></image>
  51. </view>
  52. <view class="tosend_header_food_ce justify-between">
  53. <view class="tosend_header_food_text">{{item.goodsName}}</view>
  54. <view class="tosend_header_food_text2" v-if="item.skuMessage">{{item.skuMessage}}</view>
  55. <view class="tosend_header_food_text2">打包费</view>
  56. </view>
  57. <view class="tosend_header_food_ri">
  58. <view class="tosend_header_food_text"><text>¥</text>{{item.goodsPrice}}</view>
  59. <view class="tosend_header_food_text2">×{{item.goodsNum}}</view>
  60. <view class="tosend_header_food_text2"><text>¥</text>{{item.goodsPack}}/份</view>
  61. </view>
  62. </view>
  63. <view class="tosend_header_do do_bot" v-if="dataDet.errandMoney>0&&dataDet.orderType==2 && dataDet.errandMoneyIsShop=='本单未达到商家满减金额,跑腿费由用户承担'">
  64. <view>跑腿费</view>
  65. <view class="tosend_header_do_ri">¥{{dataDet.errandMoney}}</view>
  66. </view>
  67. <view class="tosend_header_do do_bot" v-if="dataDet.errandMoney>0&&dataDet.orderType==2 && dataDet.errandMoneyIsShop=='商家未开启配送费满减,跑腿费由用户承担'">
  68. <view>跑腿费</view>
  69. <view class="tosend_header_do_ri">¥{{dataDet.errandMoney}}</view>
  70. </view>
  71. <!-- <view class="tosend_header_do" v-if="dataDet.packMoney>0&& dataDet.orderType == 2">
  72. <view>打包费</view>
  73. <view class="tosend_header_do_ri">¥{{dataDet.packMoney}}</view>
  74. </view> -->
  75. <view class="tosend_header_do do_bot" v-if="dataDet.couponMoney>0">
  76. <view>优惠券</view>
  77. <view class="tosend_header_do_ri">-¥{{dataDet.couponMoney}}</view>
  78. </view>
  79. <view class="tosend_header_do margin-top">
  80. <view class="tosend_header_do_le2">实付</view>
  81. <view class="tosend_header_do_ri2"><text>¥</text>{{dataDet.payMoney}}</view>
  82. </view>
  83. </view>
  84. <!-- #ifdef APP -->
  85. <map v-if="dataDet.riderUserId != null && latitude && longitude&& dataDet.status == 3" id="map" @tap="goMap"
  86. style="width: 95%; height: 300rpx;margin-top: 20rpx;margin-left: 20rpx;" :markers="markers"
  87. :latitude="latitude" :longitude="longitude"></map>
  88. <!-- #endif -->
  89. <!-- #ifndef APP -->
  90. <map v-if="dataDet.riderUserId != null && latitude && longitude&& dataDet.status == 3" id="map" @tap="goMap"
  91. style="width: 95%; height: 300rpx;margin: 20rpx auto 0;" :markers="markers" :latitude="latitude"
  92. :longitude="longitude"></map>
  93. <!-- #endif -->
  94. <!-- 联系骑手 -->
  95. <view class="rider_box" v-if="dataDet.riderUserId!= null">
  96. <view class="flex justify-between align-center padding">
  97. <view style="font-size: 31rpx;color: black;">联系骑手...</view>
  98. <image @click="gotousu()" src="../../static/images/my/tousu.png" style="width: 43rpx;height: 39rpx;"
  99. mode=""></image>
  100. </view>
  101. <view>
  102. <u-line color="#F2F2F2" />
  103. </view>
  104. <view style="padding: 20rpx 25rpx;display: flex;justify-content: space-between;align-items: center;">
  105. <view style="display: flex;">
  106. <view class="rider_left">
  107. <image :src="dataDet.riderAvatar"></image>
  108. </view>
  109. <view style="margin-left: 10rpx;color: #333333;">
  110. <view>{{dataDet.riderUserName}}</view>
  111. <view>{{riderPhone}}</view>
  112. </view>
  113. </view>
  114. <view class="phone" @click="bindphone(dataDet.riderPhone)">联系TA</view>
  115. </view>
  116. </view>
  117. <!-- 评论信息 -->
  118. <view class="tosend_cont" v-if="dataDet.evaluateMessage">
  119. <view class="tosend_header_text">评论信息</view>
  120. <view>
  121. <view class="flex align-center">
  122. <image :src="dataDet.avatar?dataDet.avatar:'../../static/logo.png'"
  123. style="width: 40px;height: 40px;border-radius: 50%;"></image>
  124. <view class="flex justify-between align-center" style="width: 100%;margin-left: 5upx;">
  125. <view class="text-bold text-df">{{dataDet.userNickName}}</view>
  126. <view style="color: #999999;font-size: 24rpx;" v-if="dataDet.ecreateTime">
  127. {{dataDet.ecreateTime}}
  128. </view>
  129. </view>
  130. </view>
  131. <view class=" padding-left margin-left-xl" style="font-size: 30upx;">{{dataDet.evaluateMessage}}
  132. </view>
  133. <view class="flex justify-end padding-top-sm margin-right" @click="show = true"
  134. v-if="!dataDet.shopReplyMessage">
  135. <image src="../../static/images/order/pinglun.png" style="width: 20px;height: 20px;"></image>
  136. </view>
  137. <view class="padding-left margin-left-xl margin-top-sm" v-else>
  138. <view class="flex align-center">
  139. <view class=" flex align-center text-df" style="color: #999999;">
  140. <view class="text-df">商家回复:</view>{{dataDet.shopReplyMessage}}
  141. </view>
  142. </view>
  143. <!-- <view class="text-lg padding-left margin-left-xl">{{dataDet.shopReplyMessage}}</view> -->
  144. </view>
  145. </view>
  146. </view>
  147. <!-- 其他信息 -->
  148. <view class="tosend_cont ">
  149. <view class="tosend_header_text">其他信息</view>
  150. <view class="tosend_cont_infor" v-if="dataDet.remark">
  151. <view class="tosend_cont_infor_le">订单备注</view>
  152. <view class="tosend_cont_infor_ri">{{dataDet.remark}}</view>
  153. </view>
  154. <view class="tosend_cont_infor">
  155. <view class="tosend_cont_infor_le">取餐号码</view>
  156. <view class="tosend_cont_infor_ri">{{dataDet.orderCode}}</view>
  157. </view>
  158. <view class="tosend_cont_infor" v-if="dataDet.phone" @tap="call(dataDet.phone)">
  159. <view class="tosend_cont_infor_le">取餐电话</view>
  160. <image src="../../static/images/my/phone.png" style="width: 40upx;height: 40upx;"></image>
  161. <!-- <view class="tosend_cont_infor_ri">{{dataDet.phone}}</view> -->
  162. </view>
  163. <view class="tosend_cont_infor">
  164. <view class="tosend_cont_infor_le">下单时间</view>
  165. <view class="tosend_cont_infor_ri">{{dataDet.payTime}}</view>
  166. </view>
  167. <view class="flex justify-between align-center" style="margin-top: 3%;">
  168. <view class="tosend_cont_infor_le">订单编号</view>
  169. <view class="tosend_cont_infor_ri">{{dataDet.orderNumber}}</view>
  170. <view class="text-orange margin-left-lg" @click="copy(dataDet.orderNumber)">复制</view>
  171. </view>
  172. <view class="tosend_cont_infor padding-bottom-sm">
  173. <view class="tosend_cont_infor_le">支付方式</view>
  174. <view class="tosend_cont_infor_ri" v-if="dataDet.payType==1">微信支付</view>
  175. <view class="tosend_cont_infor_ri" v-if="dataDet.payType==2">余额支付</view>
  176. </view>
  177. </view>
  178. <view class="addgood" @click="refund()" v-if="dataDet.status == 6">退款</view>
  179. <view class="addgood" @click="finish()" v-if="dataDet.status == 6">制作完成</view>
  180. <view class="addgood" @click.stop="xiaoPiao()"
  181. v-if="dataDet.status == 6||dataDet.status == 3||dataDet.status == 4">补打小票</view>
  182. <view class="addgood" @click="refund()" v-if="dataDet.status == 3&&dataDet.orderType==2">退款</view>
  183. <view class="addgood" @click="peisong()" v-if="dataDet.status == 3&&dataDet.orderType==1">制作已完成</view>
  184. <view class="addgood" v-if="dataDet.status == 3&&dataDet.orderType==2&&dataDet.autoSendOrder == 1"
  185. @click.stop="succOrder(dataDet)">完成送达</view>
  186. <!-- <view class="addgood" @click="peisong()" v-if="dataDet.status == 3&&dataDet.orderType==2">餐品已完成,等待配送</view> -->
  187. <!-- 聊天室 -->
  188. <view class="chats" @click.stop="chat(dataDet)">
  189. <image src="../../static/images/img/chats.png"></image>
  190. <view class="shopxiaoix" v-if="ShopUnreadCount">{{ShopUnreadCount}}</view>
  191. </view>
  192. </view>
  193. <!-- 评论弹框 -->
  194. <u-popup v-model="show" mode="bottom" border-radius="14" :closeable="closeable">
  195. <view>
  196. <view class="margin padding-tb">
  197. <u-input v-model="pinglun" type="textarea" height="200" placeholder="请填写回复的内容" maxlengt="200"
  198. :clearable="false" style="background:#F5F5F5;" />
  199. </view>
  200. <view class="btn" @click="bindEvaluate()">提交</view>
  201. </view>
  202. </u-popup>
  203. </view>
  204. </template>
  205. <script>
  206. export default {
  207. data() {
  208. return {
  209. orderNumber: '',
  210. dataDet: {},
  211. orderType: '',
  212. latitude: '',
  213. longitude: '',
  214. markers: [], //标记点
  215. orderId: '',
  216. address: {},
  217. riderPhone: '',
  218. ShopUnreadCount: 0,
  219. pinglun: '',
  220. show: false,
  221. closeable: true,
  222. first: false
  223. }
  224. },
  225. onLoad(option) {
  226. uni.showLoading({
  227. title: '加载中...'
  228. })
  229. console.log(option)
  230. this.orderNumber = option.orderNumber
  231. this.orderId = option.orderId
  232. this.first = false
  233. this.getDataDet()
  234. let that = this
  235. setInterval(function() {
  236. that.getShopUnreadCount()
  237. }, 10000)
  238. },
  239. onShow() {
  240. this.first = false
  241. },
  242. methods: {
  243. //评论
  244. bindEvaluate() {
  245. let data = {
  246. shopReplyMessage: this.pinglun,
  247. orderNumber: this.orderNumber
  248. }
  249. this.$Request.postT("/admin/order/shopReplyEvaluate", data).then(res => {
  250. uni.hideLoading()
  251. if (res.code == 0) {
  252. this.show = false
  253. this.getDataDet()
  254. }
  255. });
  256. },
  257. goMap() {
  258. uni.navigateTo({
  259. url: '/pages/order/orderMap?indentNumber=' + this.orderNumber+'&orderId='+this.orderId
  260. })
  261. },
  262. //投诉
  263. gotousu() {
  264. console.log(this.orderNumber)
  265. uni.navigateTo({
  266. url: '/pages/my/comments?indentNumber=' + this.orderNumber
  267. })
  268. },
  269. // 拨打电话
  270. bindphone(e) {
  271. uni.makePhoneCall({
  272. phoneNumber: e
  273. });
  274. },
  275. // 一键导航
  276. bindGps(latitude, longitude, name, detailsadd) {
  277. console.log(latitude, longitude, name, detailsadd)
  278. uni.openLocation({
  279. latitude: latitude - 0, //要去的纬度-地址
  280. longitude: longitude - 0, //要去的经度-地址
  281. name: name, //地址名称
  282. address: detailsadd, //详细地址名称
  283. success: function() {
  284. console.log('导航成功');
  285. },
  286. fail: function(error) {
  287. console.log(error)
  288. }
  289. });
  290. },
  291. //聊天室
  292. chat(e) {
  293. // console.log(e)
  294. uni.navigateTo({
  295. url: '/pages/my/im?orderId=' + e.orderId
  296. })
  297. },
  298. //获取骑手位置
  299. getaddress(addressId, riderUserId) {
  300. console.log(addressId)
  301. let data = {
  302. addressId: addressId
  303. }
  304. this.$Request.getA("/app/address/selectAddressById", data).then(res => {
  305. // uni.hideLoading()
  306. console.log(res)
  307. if (res.code == 0) {
  308. this.address = res.data
  309. this.getRider(res.data.lat, res.data.lng, riderUserId)
  310. }
  311. });
  312. },
  313. //获取骑手信息
  314. getRider(lat, lng, riderUserId) {
  315. console.log(lat, lng, riderUserId, '111111')
  316. let data = {
  317. lat: lat,
  318. lng: lng,
  319. riderUserId: riderUserId
  320. }
  321. this.$Request.getA("/timedtask/selectRiderLocation", data).then(res => {
  322. if (res.code == 0) {
  323. console.log(res.data, '经纬度')
  324. this.latitude = res.data.riderLocation.lat;
  325. this.longitude = res.data.riderLocation.lng;
  326. this.markers = [{
  327. id: 1,
  328. latitude: res.data.riderLocation.lat,
  329. longitude: res.data.riderLocation.lng,
  330. iconPath: '../../static/images/order/rider.png',
  331. width: '40',
  332. height: '40'
  333. }]
  334. uni.hideLoading()
  335. }
  336. });
  337. },
  338. getDataDet() {
  339. let data = {
  340. // page: 1,
  341. // limit: 10,
  342. orderId: this.orderId
  343. }
  344. this.$Request.getA("/app/order/selectOrderById", data).then(res => {
  345. uni.hideLoading()
  346. if (res.code == 0) {
  347. this.dataDet = res.data
  348. let start = res.data.orderCode.length - 3;
  349. this.dataDet.orderCode = res.data.orderCode.substring(start, res.data.orderCode.length)
  350. this.getaddress(res.data.addressId, res.data.riderUserId)
  351. this.dataDet.orderGoodsList.forEach(res => {
  352. res.goodsPicture = res.goodsPicture.split(',')
  353. })
  354. this.dataDet.address = JSON.parse(this.dataDet.address)
  355. this.riderPhone = this.dataDet.riderPhone
  356. this.riderPhone = this.riderPhone.replace(this.dataDet.riderPhone.substr(3, 4), "****")
  357. // console.log(this.dataDet);
  358. // let phone = this.dataDet.riderPhone;
  359. // let result = phone.substring(0, 3) + "****" + phone.substring(7, 11);
  360. // // console.log(this.dataDet.riderPhone,result);
  361. // this.dataDet.riderPhone = result
  362. this.orderType = res.data.orderType
  363. console.log(this.dataDet, '2222222')
  364. }
  365. });
  366. },
  367. copy(value) {
  368. uni.setClipboardData({
  369. data: value, //要被复制的内容
  370. success: () => { //复制成功的回调函数
  371. uni.showToast({ //提示
  372. title: '复制成功'
  373. })
  374. }
  375. });
  376. },
  377. // 打电话
  378. call(phone) {
  379. uni.makePhoneCall({
  380. phoneNumber: phone
  381. });
  382. },
  383. // 打开地图
  384. openMap(e) {
  385. let latitude = e.latitude;
  386. let longitude = e.longitude;
  387. uni.openLocation({
  388. latitude: Number(latitude),
  389. longitude: Number(longitude),
  390. name: e.address,
  391. success: function() {
  392. console.log('success');
  393. }
  394. });
  395. },
  396. // 完成送达
  397. succOrder(e) {
  398. let that = this
  399. uni.showModal({
  400. title: '提示',
  401. content: '确认完成送达吗?',
  402. success: function(res) {
  403. if (res.confirm) {
  404. console.log('用户点击确定');
  405. let data = {
  406. orderId: e.orderId,
  407. // orderNumber: e.orderNumber,
  408. // shopId: that.shopId,
  409. // addressId: e.addressId,
  410. // status: 3
  411. }
  412. that.$Request.postT("/admin/order/accomplishOrder", data).then(res => {
  413. if (res.code == 0) {
  414. uni.navigateBack()
  415. }
  416. });
  417. } else if (res.cancel) {
  418. console.log('用户点击取消');
  419. }
  420. }
  421. });
  422. },
  423. refund() {
  424. let that = this
  425. uni.showModal({
  426. title: '提示',
  427. content: '确认退款吗?',
  428. success: function(res) {
  429. if (res.confirm) {
  430. console.log('用户点击确定');
  431. let data = {
  432. orderId: that.dataDet.orderId
  433. }
  434. that.$Request.postA("/admin/order/adminCancelOrder", data).then(res => {
  435. if (res.code == 0) {
  436. let pages = getCurrentPages(); // 当前页面
  437. let beforePage = pages[pages.length - 2]; // 上一页
  438. uni.navigateBack({
  439. success: function() {
  440. beforePage.onLoad(); // 执行上一页的onLoad方法
  441. }
  442. });
  443. }
  444. });
  445. } else if (res.cancel) {
  446. console.log('用户点击取消');
  447. }
  448. }
  449. });
  450. },
  451. // 补打小票
  452. xiaoPiao() {
  453. let that = this
  454. uni.showModal({
  455. title: '提示',
  456. content: '确认补打小票吗?',
  457. success: function(re) {
  458. if (re.confirm) {
  459. console.log('用户点击确定');
  460. let data = {
  461. orderId: that.dataDet.orderId,
  462. // orderNumber: e.orderNumber,
  463. // status: 8
  464. }
  465. that.$Request.post("/admin/order/print", data).then(res => {
  466. if (res.code == 0) {
  467. // that.page = 1
  468. // that.getOrderList()
  469. } else {
  470. that.$queue.showToast(res.msg)
  471. }
  472. });
  473. } else if (re.cancel) {
  474. console.log('用户点击取消');
  475. }
  476. }
  477. });
  478. },
  479. finish(e) {
  480. let that = this
  481. uni.showModal({
  482. title: '提示',
  483. content: '确认订单完成吗?',
  484. success: function(res) {
  485. if (res.confirm) {
  486. console.log('用户点击确定');
  487. let data = {
  488. orderId: that.dataDet.orderId,
  489. orderNumber: that.dataDet.orderNumber,
  490. status: 3
  491. }
  492. that.$Request.postJsonA("/admin/order/updateOrder", data).then(res => {
  493. if (res.code == 0) {
  494. let pages = getCurrentPages(); // 当前页面
  495. let beforePage = pages[pages.length - 2]; // 上一页
  496. uni.navigateBack({
  497. success: function() {
  498. beforePage.onLoad(); // 执行上一页的onLoad方法
  499. }
  500. });
  501. }
  502. });
  503. } else if (res.cancel) {
  504. console.log('用户点击取消');
  505. }
  506. }
  507. });
  508. },
  509. peisong(e) {
  510. let that = this
  511. uni.showModal({
  512. title: '提示',
  513. content: '确认开始配送吗?',
  514. success: function(res) {
  515. if (res.confirm) {
  516. console.log('用户点击确定');
  517. let data = {
  518. orderId: that.dataDet.orderId,
  519. orderNumber: that.dataDet.orderNumber,
  520. status: 4
  521. }
  522. that.$Request.postJsonA("/admin/order/updateOrder", data).then(res => {
  523. if (res.code == 0) {
  524. let pages = getCurrentPages(); // 当前页面
  525. let beforePage = pages[pages.length - 2]; // 上一页
  526. uni.navigateBack({
  527. success: function() {
  528. beforePage.onLoad(); // 执行上一页的onLoad方法
  529. }
  530. });
  531. }
  532. });
  533. } else if (res.cancel) {
  534. console.log('用户点击取消');
  535. }
  536. }
  537. });
  538. },
  539. //获取用户聊天消息
  540. getShopUnreadCount() {
  541. let that = this
  542. let data = {
  543. ordersId: that.orderId
  544. }
  545. that.$Request.getT("/shop/ordersChat/selectShopUnreadCount", data).then(res => {
  546. if (res.code == 0) {
  547. // that.ShopUnreadCount = res.data
  548. if (res.data > 0) {
  549. if (this.ShopUnreadCount != res.data && !this.first) {
  550. that.aplayAudio()
  551. this.ShopUnreadCount = res.data
  552. uni.showModal({
  553. title: '消息',
  554. content: '有' + res.data + '条消息,请前往聊天列表处理。',
  555. success: (ret) => {
  556. if (ret.confirm) {
  557. uni.redirectTo({
  558. url: '/pages/my/liaotian'
  559. })
  560. this.first = true
  561. } else {
  562. console.log('else', ret)
  563. that.defineCallBack()
  564. }
  565. }
  566. });
  567. // this.chatNum = data.data
  568. }
  569. } else {
  570. that.ShopUnreadCount = 0
  571. }
  572. }
  573. });
  574. },
  575. //消息提示
  576. aplayAudio() {
  577. // console.log('语音提示')
  578. const innerAudioContext = uni.createInnerAudioContext();
  579. innerAudioContext.autoplay = true;
  580. innerAudioContext.src =
  581. 'https://pw.xianmxkj.com/file/uploadPath/2022/01/19/0753211f78d718d44ee6372e33eae9ee.mp3';
  582. innerAudioContext.onPlay(() => {
  583. console.log('开始播放');
  584. });
  585. innerAudioContext.onError((res) => {
  586. console.log(res.errMsg);
  587. console.log(res.errCode);
  588. });
  589. },
  590. }
  591. }
  592. </script>
  593. <style scoped>
  594. /* 余额 */
  595. .tosend {
  596. width: 100%;
  597. height: 280rpx;
  598. /* background: -webkit-linear-gradient(top, #FCD202, #F5F5F5); */
  599. }
  600. .tosend_text {
  601. padding: 3% 3% 0%;
  602. font-size: 38upx;
  603. font-weight: 800;
  604. color: #333333;
  605. }
  606. .tosend_header {
  607. width: 94%;
  608. background-color: #FFFFFF;
  609. margin: 0 auto;
  610. border-radius: 18rpx;
  611. padding: 3%;
  612. }
  613. /* 排序 */
  614. .cont_two_top {
  615. width: 100%;
  616. display: flex;
  617. justify-content: space-between;
  618. }
  619. .cont_two_top_le {
  620. font-size: 30rpx;
  621. font-weight: 500;
  622. color: #333333;
  623. }
  624. .cont_two_top_ri {
  625. padding: 6rpx 10rpx;
  626. text-align: center;
  627. background: rgba(255, 19, 10, 0.2);
  628. font-size: 24rpx;
  629. border: 2rpx solid #FF130A;
  630. color: #FF130A;
  631. opacity: 0.6;
  632. border-radius: 8rpx;
  633. }
  634. .cont_two_text {
  635. font-size: 56rpx;
  636. text-align: center;
  637. font-weight: bold;
  638. color: #333333;
  639. margin: 5% 0;
  640. line-height: 32rpx;
  641. }
  642. .cont_two_text2 {
  643. font-size: 30rpx;
  644. width: 100%;
  645. font-weight: 500;
  646. color: #333333;
  647. text-align: center;
  648. padding-bottom: 4%;
  649. line-height: 32rpx;
  650. border-bottom: 1rpx solid #E6E6E6;
  651. }
  652. .cont_two_text2 text {
  653. color: #FF130A;
  654. }
  655. /* 商品列表 */
  656. .tosend_header_text {
  657. font-family: PingFang SC;
  658. font-weight: 800;
  659. color: #333333;
  660. line-height: 2;
  661. font-size: 30rpx;
  662. }
  663. .tosend_header_food {
  664. width: 100%;
  665. display: flex;
  666. margin-top: 35rpx;
  667. justify-content: space-between;
  668. }
  669. .tosend_header_food_le {
  670. /* width: 15%; */
  671. }
  672. .tosend_header_food_le image {
  673. width: 135rpx;
  674. height: 135rpx;
  675. }
  676. .tosend_header_food_ce {
  677. /* margin: 0 0 0 4%; */
  678. width: 57%;
  679. margin-left: 10upx;
  680. }
  681. .tosend_header_food_ri {
  682. text-align: right;
  683. width: 25%;
  684. }
  685. .tosend_header_food_text {
  686. font-size: 34rpx;
  687. font-weight: 500;
  688. color: #333333;
  689. line-height: 1.8;
  690. overflow: hidden;
  691. text-overflow: ellipsis;
  692. white-space: nowrap;
  693. }
  694. .tosend_header_food_text text {
  695. font-size: 25rpx;
  696. }
  697. .tosend_header_food_text2 {
  698. font-size: 26rpx;
  699. /* font-weight: 500; */
  700. color: #999999;
  701. }
  702. .do_top {
  703. padding-top: 3%;
  704. }
  705. .do_bot {
  706. padding-bottom: 3%;
  707. border-bottom: 2rpx solid #E6E6E6;
  708. }
  709. .tosend_header_do {
  710. width: 100%;
  711. color: #333333;
  712. font-size: 30rpx;
  713. display: flex;
  714. line-height: 1.5;
  715. }
  716. .tosend_header_do view {
  717. flex: 1;
  718. }
  719. .tosend_header_do_ri {
  720. text-align: right;
  721. }
  722. .tosend_header_do_le2 {
  723. font-family: PingFang SC;
  724. font-weight: 500;
  725. color: #999999;
  726. padding-top: 1.5%;
  727. }
  728. .tosend_header_do_ri2 {
  729. text-align: right;
  730. color: #EA0000;
  731. font-size: 40rpx;
  732. }
  733. .tosend_header_do_ri2 text {
  734. font-size: 30rpx;
  735. }
  736. /* 其他信息 */
  737. .tosend_cont {
  738. width: 94%;
  739. background-color: #FFFFFF;
  740. margin: 3% auto;
  741. border-radius: 18rpx;
  742. padding: 3%;
  743. }
  744. .tosend_cont_infor {
  745. display: flex;
  746. margin-top: 30rpx;
  747. }
  748. .tosend_cont_infor_le {
  749. flex: 1;
  750. color: #999999;
  751. }
  752. .tosend_cont_infor_ri {
  753. flex: 2;
  754. text-align: right;
  755. color: #333333;
  756. }
  757. .tosend_cont_text {
  758. text-align: right;
  759. }
  760. .addgood {
  761. width: 685upx;
  762. height: 88upx;
  763. background: #FFCC00;
  764. border-radius: 8upx;
  765. text-align: center;
  766. line-height: 88rpx;
  767. margin: 40rpx auto;
  768. font-size: 32rpx;
  769. font-weight: bold;
  770. color: #FFFFFF;
  771. }
  772. .chats {
  773. position: fixed;
  774. bottom: 70px;
  775. right: 15px;
  776. }
  777. .chats image {
  778. width: 60px;
  779. height: 60px;
  780. }
  781. /* 联系骑手 */
  782. .rider_box {
  783. width: 95%;
  784. margin: 0 auto;
  785. background: #ffffff;
  786. margin-top: 20rpx;
  787. border-radius: 10rpx;
  788. }
  789. .rider_left image {
  790. width: 80rpx;
  791. height: 85rpx;
  792. border-radius: 60%;
  793. }
  794. .phone {
  795. background: #FD6416;
  796. color: #ffffff;
  797. padding: 8rpx 15rpx;
  798. border-radius: 13rpx;
  799. font-size: 24rpx;
  800. }
  801. .shopxiaoix {
  802. background: red;
  803. color: #ffffff;
  804. width: 40rpx;
  805. height: auto;
  806. text-align: center;
  807. border-radius: 30rpx;
  808. position: relative;
  809. top: -66px;
  810. left: 35px;
  811. }
  812. .btn {
  813. width: 690upx;
  814. height: 88upx;
  815. margin: 30upx auto;
  816. background: #FCD202;
  817. box-shadow: 0px 10upx 20upx 0upx #FFD9B3;
  818. border-radius: 16upx;
  819. display: flex;
  820. align-items: center;
  821. justify-content: center;
  822. color: #000000;
  823. }
  824. </style>