orderDet.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877
  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. sendSmsFlag:0
  408. // orderNumber: e.orderNumber,
  409. // shopId: that.shopId,
  410. // addressId: e.addressId,
  411. // status: 3
  412. }
  413. that.$Request.postT("/admin/order/accomplishOrder", data).then(res => {
  414. if (res.code == 0) {
  415. uni.navigateBack()
  416. }
  417. });
  418. } else if (res.cancel) {
  419. console.log('用户点击取消');
  420. }
  421. }
  422. });
  423. },
  424. refund() {
  425. let that = this
  426. uni.showModal({
  427. title: '提示',
  428. content: '确认退款吗?',
  429. success: function(res) {
  430. if (res.confirm) {
  431. console.log('用户点击确定');
  432. let data = {
  433. orderId: that.dataDet.orderId
  434. }
  435. that.$Request.postA("/admin/order/adminCancelOrder", data).then(res => {
  436. if (res.code == 0) {
  437. let pages = getCurrentPages(); // 当前页面
  438. let beforePage = pages[pages.length - 2]; // 上一页
  439. uni.navigateBack({
  440. success: function() {
  441. beforePage.onLoad(); // 执行上一页的onLoad方法
  442. }
  443. });
  444. }
  445. });
  446. } else if (res.cancel) {
  447. console.log('用户点击取消');
  448. }
  449. }
  450. });
  451. },
  452. // 补打小票
  453. xiaoPiao() {
  454. let that = this
  455. uni.showModal({
  456. title: '提示',
  457. content: '确认补打小票吗?',
  458. success: function(re) {
  459. if (re.confirm) {
  460. console.log('用户点击确定');
  461. let data = {
  462. orderId: that.dataDet.orderId,
  463. // orderNumber: e.orderNumber,
  464. // status: 8
  465. }
  466. that.$Request.post("/admin/order/print", data).then(res => {
  467. if (res.code == 0) {
  468. // that.page = 1
  469. // that.getOrderList()
  470. } else {
  471. that.$queue.showToast(res.msg)
  472. }
  473. });
  474. } else if (re.cancel) {
  475. console.log('用户点击取消');
  476. }
  477. }
  478. });
  479. },
  480. finish(e) {
  481. let that = this
  482. uni.showModal({
  483. title: '提示',
  484. content: '确认订单完成吗?',
  485. success: function(res) {
  486. if (res.confirm) {
  487. console.log('用户点击确定');
  488. let data = {
  489. orderId: that.dataDet.orderId,
  490. orderNumber: that.dataDet.orderNumber,
  491. status: 3
  492. }
  493. that.$Request.postJsonA("/admin/order/updateOrder", data).then(res => {
  494. if (res.code == 0) {
  495. let pages = getCurrentPages(); // 当前页面
  496. let beforePage = pages[pages.length - 2]; // 上一页
  497. uni.navigateBack({
  498. success: function() {
  499. beforePage.onLoad(); // 执行上一页的onLoad方法
  500. }
  501. });
  502. }
  503. });
  504. } else if (res.cancel) {
  505. console.log('用户点击取消');
  506. }
  507. }
  508. });
  509. },
  510. peisong(e) {
  511. let that = this
  512. uni.showModal({
  513. title: '提示',
  514. content: '确认开始配送吗?',
  515. success: function(res) {
  516. if (res.confirm) {
  517. console.log('用户点击确定');
  518. let data = {
  519. orderId: that.dataDet.orderId,
  520. orderNumber: that.dataDet.orderNumber,
  521. status: 4
  522. }
  523. that.$Request.postJsonA("/admin/order/updateOrder", data).then(res => {
  524. if (res.code == 0) {
  525. let pages = getCurrentPages(); // 当前页面
  526. let beforePage = pages[pages.length - 2]; // 上一页
  527. uni.navigateBack({
  528. success: function() {
  529. beforePage.onLoad(); // 执行上一页的onLoad方法
  530. }
  531. });
  532. }
  533. });
  534. } else if (res.cancel) {
  535. console.log('用户点击取消');
  536. }
  537. }
  538. });
  539. },
  540. //获取用户聊天消息
  541. getShopUnreadCount() {
  542. let that = this
  543. let data = {
  544. ordersId: that.orderId
  545. }
  546. that.$Request.getT("/shop/ordersChat/selectShopUnreadCount", data).then(res => {
  547. if (res.code == 0) {
  548. // that.ShopUnreadCount = res.data
  549. if (res.data > 0) {
  550. if (this.ShopUnreadCount != res.data && !this.first) {
  551. that.aplayAudio()
  552. this.ShopUnreadCount = res.data
  553. uni.showModal({
  554. title: '消息',
  555. content: '有' + res.data + '条消息,请前往聊天列表处理。',
  556. success: (ret) => {
  557. if (ret.confirm) {
  558. uni.redirectTo({
  559. url: '/pages/my/liaotian'
  560. })
  561. this.first = true
  562. } else {
  563. console.log('else', ret)
  564. that.defineCallBack()
  565. }
  566. }
  567. });
  568. // this.chatNum = data.data
  569. }
  570. } else {
  571. that.ShopUnreadCount = 0
  572. }
  573. }
  574. });
  575. },
  576. //消息提示
  577. aplayAudio() {
  578. // console.log('语音提示')
  579. const innerAudioContext = uni.createInnerAudioContext();
  580. innerAudioContext.autoplay = true;
  581. innerAudioContext.src =
  582. 'https://pw.xianmxkj.com/file/uploadPath/2022/01/19/0753211f78d718d44ee6372e33eae9ee.mp3';
  583. innerAudioContext.onPlay(() => {
  584. console.log('开始播放');
  585. });
  586. innerAudioContext.onError((res) => {
  587. console.log(res.errMsg);
  588. console.log(res.errCode);
  589. });
  590. },
  591. }
  592. }
  593. </script>
  594. <style scoped>
  595. /* 余额 */
  596. .tosend {
  597. width: 100%;
  598. height: 280rpx;
  599. /* background: -webkit-linear-gradient(top, #FCD202, #F5F5F5); */
  600. }
  601. .tosend_text {
  602. padding: 3% 3% 0%;
  603. font-size: 38upx;
  604. font-weight: 800;
  605. color: #333333;
  606. }
  607. .tosend_header {
  608. width: 94%;
  609. background-color: #FFFFFF;
  610. margin: 0 auto;
  611. border-radius: 18rpx;
  612. padding: 3%;
  613. }
  614. /* 排序 */
  615. .cont_two_top {
  616. width: 100%;
  617. display: flex;
  618. justify-content: space-between;
  619. }
  620. .cont_two_top_le {
  621. font-size: 30rpx;
  622. font-weight: 500;
  623. color: #333333;
  624. }
  625. .cont_two_top_ri {
  626. padding: 6rpx 10rpx;
  627. text-align: center;
  628. background: rgba(255, 19, 10, 0.2);
  629. font-size: 24rpx;
  630. border: 2rpx solid #FF130A;
  631. color: #FF130A;
  632. opacity: 0.6;
  633. border-radius: 8rpx;
  634. }
  635. .cont_two_text {
  636. font-size: 56rpx;
  637. text-align: center;
  638. font-weight: bold;
  639. color: #333333;
  640. margin: 5% 0;
  641. line-height: 32rpx;
  642. }
  643. .cont_two_text2 {
  644. font-size: 30rpx;
  645. width: 100%;
  646. font-weight: 500;
  647. color: #333333;
  648. text-align: center;
  649. padding-bottom: 4%;
  650. line-height: 32rpx;
  651. border-bottom: 1rpx solid #E6E6E6;
  652. }
  653. .cont_two_text2 text {
  654. color: #FF130A;
  655. }
  656. /* 商品列表 */
  657. .tosend_header_text {
  658. font-family: PingFang SC;
  659. font-weight: 800;
  660. color: #333333;
  661. line-height: 2;
  662. font-size: 30rpx;
  663. }
  664. .tosend_header_food {
  665. width: 100%;
  666. display: flex;
  667. margin-top: 35rpx;
  668. justify-content: space-between;
  669. }
  670. .tosend_header_food_le {
  671. /* width: 15%; */
  672. }
  673. .tosend_header_food_le image {
  674. width: 135rpx;
  675. height: 135rpx;
  676. }
  677. .tosend_header_food_ce {
  678. /* margin: 0 0 0 4%; */
  679. width: 57%;
  680. margin-left: 10upx;
  681. }
  682. .tosend_header_food_ri {
  683. text-align: right;
  684. width: 25%;
  685. }
  686. .tosend_header_food_text {
  687. font-size: 34rpx;
  688. font-weight: 500;
  689. color: #333333;
  690. line-height: 1.8;
  691. overflow: hidden;
  692. text-overflow: ellipsis;
  693. white-space: nowrap;
  694. }
  695. .tosend_header_food_text text {
  696. font-size: 25rpx;
  697. }
  698. .tosend_header_food_text2 {
  699. font-size: 26rpx;
  700. /* font-weight: 500; */
  701. color: #999999;
  702. }
  703. .do_top {
  704. padding-top: 3%;
  705. }
  706. .do_bot {
  707. padding-bottom: 3%;
  708. border-bottom: 2rpx solid #E6E6E6;
  709. }
  710. .tosend_header_do {
  711. width: 100%;
  712. color: #333333;
  713. font-size: 30rpx;
  714. display: flex;
  715. line-height: 1.5;
  716. }
  717. .tosend_header_do view {
  718. flex: 1;
  719. }
  720. .tosend_header_do_ri {
  721. text-align: right;
  722. }
  723. .tosend_header_do_le2 {
  724. font-family: PingFang SC;
  725. font-weight: 500;
  726. color: #999999;
  727. padding-top: 1.5%;
  728. }
  729. .tosend_header_do_ri2 {
  730. text-align: right;
  731. color: #EA0000;
  732. font-size: 40rpx;
  733. }
  734. .tosend_header_do_ri2 text {
  735. font-size: 30rpx;
  736. }
  737. /* 其他信息 */
  738. .tosend_cont {
  739. width: 94%;
  740. background-color: #FFFFFF;
  741. margin: 3% auto;
  742. border-radius: 18rpx;
  743. padding: 3%;
  744. }
  745. .tosend_cont_infor {
  746. display: flex;
  747. margin-top: 30rpx;
  748. }
  749. .tosend_cont_infor_le {
  750. flex: 1;
  751. color: #999999;
  752. }
  753. .tosend_cont_infor_ri {
  754. flex: 2;
  755. text-align: right;
  756. color: #333333;
  757. }
  758. .tosend_cont_text {
  759. text-align: right;
  760. }
  761. .addgood {
  762. width: 685upx;
  763. height: 88upx;
  764. background: #FFCC00;
  765. border-radius: 8upx;
  766. text-align: center;
  767. line-height: 88rpx;
  768. margin: 40rpx auto;
  769. font-size: 32rpx;
  770. font-weight: bold;
  771. color: #FFFFFF;
  772. }
  773. .chats {
  774. position: fixed;
  775. bottom: 70px;
  776. right: 15px;
  777. }
  778. .chats image {
  779. width: 60px;
  780. height: 60px;
  781. }
  782. /* 联系骑手 */
  783. .rider_box {
  784. width: 95%;
  785. margin: 0 auto;
  786. background: #ffffff;
  787. margin-top: 20rpx;
  788. border-radius: 10rpx;
  789. }
  790. .rider_left image {
  791. width: 80rpx;
  792. height: 85rpx;
  793. border-radius: 60%;
  794. }
  795. .phone {
  796. background: #FD6416;
  797. color: #ffffff;
  798. padding: 8rpx 15rpx;
  799. border-radius: 13rpx;
  800. font-size: 24rpx;
  801. }
  802. .shopxiaoix {
  803. background: red;
  804. color: #ffffff;
  805. width: 40rpx;
  806. height: auto;
  807. text-align: center;
  808. border-radius: 30rpx;
  809. position: relative;
  810. top: -66px;
  811. left: 35px;
  812. }
  813. .btn {
  814. width: 690upx;
  815. height: 88upx;
  816. margin: 30upx auto;
  817. background: #FCD202;
  818. box-shadow: 0px 10upx 20upx 0upx #FFD9B3;
  819. border-radius: 16upx;
  820. display: flex;
  821. align-items: center;
  822. justify-content: center;
  823. color: #000000;
  824. }
  825. </style>