orderDetail.vue 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255
  1. <template>
  2. <view class="container">
  3. <view class="order-type-info">
  4. <view class="order-type-title">{{orderType.title}}</view>
  5. <view class="order-type-text">{{orderType.text}}
  6. </view>
  7. </view>
  8. <view class="address-info-box">
  9. <view class="address-icon">
  10. <text class="iconfont icondizhi"></text>
  11. </view>
  12. <view class="address-content">
  13. <text class="address-info">
  14. <text class="address-name">{{orderData.recName}}</text>
  15. <text class="address-phone">{{orderData.recMobile}}</text>
  16. </text>
  17. <view class="address-detail">{{orderData.address}}</view>
  18. </view>
  19. </view>
  20. <view class="goods-info-box">
  21. <view class="shop-info" @click.stop="gotoShop()">
  22. <text class="iconfont icondianpu"></text>
  23. <text class="shop-name">{{orderData.merchantInfoResVO.supplierName}}</text>
  24. <text class="iconfont iconfangxiang" v-if="orderData.tenantCode != 'admin'"></text>
  25. </view>
  26. <view class="goods-list">
  27. <view class="goods-row" v-for="(item, index) in orderData.merchantInfoResVO.products" :key="index">
  28. <image class="goods-img" :src="item.imgUrl" mode="aspectFill"></image>
  29. <view class="goods-info">
  30. <view class="goods-name">{{item.productName}}</view>
  31. <view class="goods-type">
  32. 类型:{{item.productType == 1 ? '普通商品' : (item.productType == 2 ? '拍卖商品' : (item.productType == 3 ? '自助采摘' : '共享种植'))}}
  33. </view>
  34. <view class="plant-area" v-if="item.productType == 4">面积:{{item.areaSize}}㎡</view>
  35. <view class="goods-price-number">
  36. <text class="goods-unit">¥</text>
  37. <text class="goods-price">{{item.bizPrice}}</text>
  38. <text class="goods-number">x{{item.buyNum}}</text>
  39. <text class="plant-text" v-if="item.productType == 4">有效期:{{item.term}}天</text>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="order-info">
  45. <u-cell-group :border="false">
  46. <u-cell-item title="商品金额" :value="'¥' + orderData.orderSum" :arrow="false" :border-bottom="false"></u-cell-item>
  47. <u-cell-item title="积分抵扣" :value="'-¥' + orderData.integralAmount" :arrow="false" :border-bottom="false" v-if="goodType == 1"></u-cell-item>
  48. <u-cell-item title="优惠券" :value="'-¥' + orderData.couponDiscountAmount" :arrow="false" :border-bottom="false" v-if="goodType == 1"></u-cell-item>
  49. <u-cell-item title="备注" :value="orderData.notes" :arrow="false" :border-bottom="false"></u-cell-item>
  50. </u-cell-group>
  51. </view>
  52. <view class="pay-info">
  53. <text class="pay-text">实付款</text>
  54. <text class="pay-price">¥{{orderData.paySum}}</text>
  55. </view>
  56. </view>
  57. <view class="order-info-box" @click="goToMessage()">
  58. <view class="info-title-box">
  59. <view class="info-title">留言板</view>
  60. <text class="iconfont iconfangxiang"></text>
  61. </view>
  62. <view class="info-content-box">
  63. <view class="message-row" v-for="(item, index1) in orderData.leas" :key="index1">
  64. <image class="message-head" :src="item.headImg" mode="aspectFill"></image>
  65. <view class="message-info-box">
  66. <view class="message-name">{{item.name}}</view>
  67. <view class="message-date">{{item.leaMsgTime}}</view>
  68. <view class="message-text">{{item.leaMsgContent}}</view>
  69. <!-- <view class="message-img-box" v-for="(site, index2) in item.orderLeaImgResVOs" :key="index2">
  70. <image class="message-img" :src="site.imgUrl" mode="aspectFill"></image>
  71. </view> -->
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="order-info-box">
  77. <view class="info-title-box">
  78. <view class="info-title">订单信息</view>
  79. </view>
  80. <view class="info-content-box">
  81. <view class="order-info-row">订单编号:{{orderData.orderCode}}</view>
  82. <view class="order-info-row">创建时间:{{orderData.addOrderTime}}</view>
  83. <view class="order-info-row" v-if="orderData.orderStatus > 1 && orderData.orderStatus != 6">支付时间:{{orderData.payTime ? orderData.payTime : orderData.addOrderTime}}</view>
  84. <view class="order-info-row" v-if="orderData.orderStatus > 2 && orderData.orderStatus != 6 && orderData.orderStatus != 4">发货时间:{{orderData.sendTime ? orderData.sendTime : '-'}}</view>
  85. <view class="order-info-row" v-if="orderData.orderStatus > 3 && orderData.orderStatus != 6 && orderData.orderStatus != 4">收货时间:{{orderData.confirmTime ? orderData.sendTime : '-'}}</view>
  86. <view class="order-info-row" v-if="orderData.orderStatus == 6">取消时间:{{orderData.cancelTime}}</view>
  87. </view>
  88. </view>
  89. <view class="order-info-box" v-if="orderData.evaluateResVO.evaluateContent">
  90. <view class="info-title-box">
  91. <view class="info-title">评价信息</view>
  92. </view>
  93. <view class="info-content-box">
  94. <view class="assess-row">
  95. <image class="assess-head" mode="aspectFill" :src="orderData.merchantInfoResVO.headImg"></image>
  96. <view class="assess-info">
  97. <view class="assess-name">{{orderData.nickname}}</view>
  98. <view class="assess-date">{{orderData.evaluateResVO.evaluateTime ? orderData.evaluateResVO.evaluateTime : ''}}</view>
  99. <view class="assess-sore-box">
  100. <u-rate v-model="orderData.evaluateResVO.score" active-color="#FFAE21" disabled></u-rate>
  101. </view>
  102. <view class="assess-text">{{orderData.evaluateResVO.evaluateContent ? orderData.evaluateResVO.evaluateContent : '暂无评价'}}</view>
  103. <view class="assess-img-box">
  104. <image class="img-col" mode="aspectFill" :src="item.imgUrl" v-for="(item,i) in orderData.evaluateResVO.evaluateImgs" :key="i" @tap="_previewImage(item.imgUrl,i)"></image>
  105. </view>
  106. </view>
  107. <view class="shop-reply-box" v-if="orderData.evaluateResVO.replyContent">
  108. <view class="shop-head">
  109. <view class="iconfont icondianpu"></view>
  110. <view class="shop-name">店家回复</view>
  111. </view>
  112. <view class="shop-reply">{{orderData.evaluateResVO.replyContent}}</view>
  113. </view>
  114. </view>
  115. </view>
  116. </view>
  117. <!-- </view> -->
  118. <uni-goods-nav :fill="true" :options="[]" @click="" @buttonClick="orderHandle" class="order-handle" :buttonGroup="buttonGroup" />
  119. <u-modal v-model="modalShow" :content="modalContent" @confirm="submitHandle" :async-close="true" :show-cancel-button="true"></u-modal>
  120. <u-top-tips ref="uTips"></u-top-tips>
  121. <view class="uni-popup-dialog" :hidden="show_qx">
  122. <view class="uni-dialog-title">
  123. <text class="uni-dialog-title-text">提示</text>
  124. </view>
  125. <view class="uni-dialog-content">
  126. <text class="uni-dialog-content-text">请在设置中开启摄像头权限和麦克风权限</text>
  127. </view>
  128. <view class="uni-dialog-button-group">
  129. <button class="uni-dialog-button uni-border-left" open-type="openSetting" @click="closeSetting">
  130. 设置权限
  131. </button>
  132. </view>
  133. </view>
  134. <view class="qx_bg" :hidden="show_qx">
  135. </view>
  136. </view>
  137. </template>
  138. <script>
  139. const NET = require('@/utils/request')
  140. const API = require('@/config/api')
  141. export default {
  142. components: {},
  143. data() {
  144. return {
  145. show_qx:true,
  146. orderType: {
  147. title: '',
  148. text: '',
  149. },
  150. orderData: {
  151. orderId: '',
  152. addOrderTime: '',
  153. recName: '',
  154. recMobile: '',
  155. address: '',
  156. merchantInfoResVO: {
  157. supplierName: '',
  158. products: [],
  159. },
  160. orderSum: 0,
  161. integralAmount: 0,
  162. couponDiscountAmount: 0,
  163. notes: 'xxxxx',
  164. paySum: 0,
  165. leas: [],
  166. orderCode: '',
  167. payTime: '',
  168. sendTime: '',
  169. confirmTime: '',
  170. cancelTime: '',
  171. tenantCode: '',
  172. evaluateReplyStatus: 1,
  173. },
  174. goodType: 1,
  175. buttonGroup: [],
  176. modalShow: false,
  177. handleType: '',
  178. modalContent: '',
  179. }
  180. },
  181. onLoad(options) {
  182. this.userData = uni.getStorageSync("userData")
  183. NET.request(API.getOrderDetail, {
  184. flag: 1,
  185. orderId: options.orderId,
  186. orderStatus: options.orderStatus,
  187. }, 'GET').then(res => {
  188. this.orderData = res.data
  189. if (this.orderData.addOrderTime) {
  190. let tempTime = new Date(this.orderData.addOrderTime).getTime()
  191. let addTempTime = new Date(tempTime + 1000 * 60 * 60 * 24)
  192. let addYear = addTempTime.getFullYear()
  193. let addMonth = addTempTime.getMonth() + 1
  194. let addDay = addTempTime.getDate()
  195. let addHours = addTempTime.getHours()
  196. let addMin = addTempTime.getMinutes()
  197. let addSeconds = addTempTime.getSeconds()
  198. this.orderData.overTime = addYear + '年' + addMonth + '月' + addDay + '日' + addHours + ':' + addMin + ':' +
  199. addSeconds
  200. // this.orderData.tempTimeArr = this.orderData.addOrderTime.split(' ')
  201. // let tempDate = new Date(this.orderData.tempTimeArr[0].replace(/-/g, "/"))
  202. // this.orderData.overTime = new Date(tempDate.setDate(tempDate.getDate() + 1))
  203. }
  204. if (this.orderData.merchantInfoResVO.products.length && this.orderData.merchantInfoResVO.products[0].productType !=
  205. 2 && this.orderData.merchantInfoResVO.products[0].productType != 4) {
  206. this.goodType = 1
  207. } else {
  208. this.goodType = 2
  209. }
  210. switch (JSON.stringify(this.orderData.orderStatus)) {
  211. case '1':
  212. this.buttonGroup = [{
  213. text: '取消订单',
  214. backgroundColor: '#75BD60',
  215. color: '#fff'
  216. }, {
  217. text: '立即支付',
  218. backgroundColor: '#52A63A',
  219. color: '#fff'
  220. }]
  221. break;
  222. case '2':
  223. var someVaule = this.orderData.merchantInfoResVO.products.some(v => {
  224. Number(v.productType)
  225. return v.productType == 1
  226. })
  227. if (!someVaule) {
  228. if (this.orderData.merchantInfoResVO.products.every(v => {
  229. Number(v.productType)
  230. return v.productType == 3
  231. })) {
  232. this.buttonGroup = [{
  233. text: '申请售后',
  234. backgroundColor: '#75BD60',
  235. color: '#fff'
  236. }, {
  237. text: '自助采摘',
  238. backgroundColor: '#52A63A',
  239. color: '#fff'
  240. }]
  241. } else {
  242. this.buttonGroup = [{
  243. text: '申请售后',
  244. backgroundColor: '#75BD60',
  245. color: '#fff'
  246. }]
  247. }
  248. } else {
  249. this.buttonGroup = [{
  250. text: '申请售后',
  251. backgroundColor: '#75BD60',
  252. color: '#fff'
  253. }]
  254. }
  255. break;
  256. case '3':
  257. this.buttonGroup = [{
  258. text: '申请售后',
  259. backgroundColor: '#52A63A',
  260. color: '#fff'
  261. }, {
  262. text: '确认收货',
  263. backgroundColor: '#52A63A',
  264. color: '#fff'
  265. }, {
  266. text: '追踪物流',
  267. backgroundColor: '#52A63A',
  268. color: '#fff'
  269. }]
  270. break;
  271. case '4':
  272. if (this.orderData.merchantInfoResVO.products.every(v => {
  273. Number(v.productType)
  274. return v.productType == 4
  275. })) {
  276. this.buttonGroup = [{
  277. text: '申请售后',
  278. backgroundColor: '#75BD60',
  279. color: '#fff'
  280. }, {
  281. text: '我的种植',
  282. backgroundColor: '#52A63A',
  283. color: '#fff'
  284. }]
  285. } else {
  286. this.buttonGroup = [{
  287. text: '申请售后',
  288. backgroundColor: '#75BD60',
  289. color: '#fff'
  290. }]
  291. }
  292. break;
  293. default:
  294. this.buttonGroup = [{
  295. text: '申请售后',
  296. backgroundColor: '#52A63A',
  297. color: '#fff'
  298. }]
  299. }
  300. if (this.orderData.orderStatus == 4 && this.orderData.evaluateReplyStatus == 1) {
  301. if (this.orderData.orderType !=3 && this.orderData.orderType !=4)
  302. this.buttonGroup.push({
  303. text: '评价',
  304. backgroundColor: '#52A63A',
  305. color: '#fff'
  306. })
  307. }
  308. this.getOrderType()
  309. }).catch(error => {
  310. this.$refs.uTips.show({
  311. title: error.data.msg,
  312. type: 'warning',
  313. })
  314. })
  315. // this.getOrderType()
  316. },
  317. onShow() {},
  318. methods: {
  319. closeSetting:function(){
  320. this.show_qx=true;
  321. },
  322. // 获取订单类型
  323. getOrderType() {
  324. if (!this.orderData.auctionStatus) {
  325. switch (this.orderData.orderStatus) {
  326. case 1:
  327. this.orderType = {
  328. title: '等待买家付款',
  329. text: '订单将于' + this.orderData.overTime + '关闭',
  330. date: this.orderData.overTime
  331. }
  332. break;
  333. case 2:
  334. this.orderType = {
  335. title: '等待卖家发货',
  336. text: '您的商品正在打包等待发货',
  337. }
  338. break;
  339. case 3:
  340. this.orderType = {
  341. title: '等待商品送达',
  342. text: '您的商品已发出正在路上,请耐心等待',
  343. }
  344. break;
  345. case 4:
  346. this.orderType = {
  347. title: '商品已送达',
  348. text: '',
  349. }
  350. break;
  351. case 5:
  352. this.orderType = {
  353. title: '交易已完成',
  354. text: '',
  355. }
  356. break;
  357. default:
  358. this.orderType = {
  359. title: '交易已取消',
  360. text: '',
  361. }
  362. }
  363. } else {
  364. switch (this.orderData.auctionStatus) {
  365. case 1:
  366. this.orderType = {
  367. title: '竞拍中',
  368. text: '',
  369. }
  370. break;
  371. case 2:
  372. switch (this.orderData.orderStatus) {
  373. case 2:
  374. this.orderType = {
  375. title: '竞拍成功-等待卖家发货',
  376. text: '您的商品正在打包等待发货',
  377. }
  378. break;
  379. case 3:
  380. this.orderType = {
  381. title: '竞拍成功-等待商品送达',
  382. text: '您的商品已发出正在路上,请耐心等待',
  383. }
  384. break;
  385. case 4:
  386. this.orderType = {
  387. title: '竞拍成功-商品已送达',
  388. text: '',
  389. }
  390. break;
  391. case 5:
  392. this.orderType = {
  393. title: '竞拍成功-交易已完成',
  394. text: '',
  395. }
  396. break;
  397. }
  398. break;
  399. case 3:
  400. this.orderType = {
  401. title: '竞拍失败',
  402. text: '',
  403. }
  404. break;
  405. }
  406. }
  407. },
  408. // 操作
  409. orderHandle(e) {
  410. if (this.orderData.orderStatus == 1) {
  411. if (e.index == 0) {
  412. // 取消订单
  413. this.modalContent = '请确定是否取消订单'
  414. this.handleType = 1
  415. this.modalShow = true
  416. } else if (e.index == 1) {
  417. // 立即支付
  418. this.modalContent = '请确定是否立即支付'
  419. this.handleType = 2
  420. this.modalShow = true
  421. }
  422. } else {
  423. if (e.index == 0) {
  424. // 申请售后
  425. NET.request(API.applyService, {
  426. tenantCode: this.orderData.tenantCode
  427. }, 'GET').then(res => {
  428. uni.makePhoneCall({
  429. phoneNumber: res.data.contactTel
  430. });
  431. }).catch(error => {
  432. this.$refs.uTips.show({
  433. title: error.data.msg,
  434. type: 'warning',
  435. })
  436. })
  437. } else {
  438. if (this.orderData.orderStatus == 2) {
  439. var that=this;
  440. wx.getSetting({
  441. success(res) {
  442. if (!res.authSetting['scope.camera']){
  443. that.show_qx=false;
  444. }else if (!res.authSetting['scope.record']){
  445. that.show_qx=false;
  446. }else{
  447. uni.navigateTo({
  448. url: '/pagesGood/pickVideo?orderId=' + that.orderData.orderId + '&tenantCode=' + that.orderData.tenantCode
  449. });
  450. }
  451. }
  452. })
  453. // 自助采摘
  454. } else if (this.orderData.orderStatus == 3) {
  455. if (e.index == 1) {
  456. // 确认收货
  457. this.modalContent = '请确定是否确认收货'
  458. this.handleType = 3
  459. this.modalShow = true
  460. } else {
  461. // 追踪物流
  462. uni.navigateTo({
  463. url: '/pagesMain/logisticsDeatil?logisticCode=' + this.orderData.logisticsNum
  464. });
  465. }
  466. } else if (this.orderData.orderStatus == 4) {
  467. if (e.index == 1) {
  468. // 去我的种植
  469. uni.navigateTo({
  470. url: '/pagesGood/goodDetails?minePlant=true&goodId=' + this.orderData.merchantInfoResVO.products[0].productId + '&orderId=' + this.orderData.orderId
  471. });
  472. }
  473. } else {
  474. // 评价
  475. uni.navigateTo({
  476. url: '/pagesMain/evaluateForm?orderId=' + this.orderData.orderId + '&tenantCode=' + this.orderData.tenantCode +
  477. '&productIds=' + this.orderData.merchantInfoResVO.products.map(site => {
  478. return site.productId
  479. }).join(',')
  480. });
  481. }
  482. }
  483. }
  484. },
  485. // 状态流转
  486. submitHandle() {
  487. if (this.handleType == 1) {
  488. // 取消订单
  489. NET.request(API.cancelOrder, {
  490. orderId: this.orderData.orderId
  491. }, 'GET').then(res => {
  492. this.modalShow = false
  493. this.$refs.uTips.show({
  494. title: '取消订单成功',
  495. type: 'success',
  496. })
  497. setTimeout(() => {
  498. uni.reLaunch({
  499. url: '/pagesMain/orderList?type=' + 1
  500. });
  501. }, 1000)
  502. }).catch(error => {
  503. this.modalShow = false
  504. this.$refs.uTips.show({
  505. title: error.data.msg,
  506. type: 'warning',
  507. })
  508. })
  509. } else if (this.handleType == 2) {
  510. // 立即支付
  511. NET.request(API.payOrder, {
  512. mid: uni.getStorageSync("userData").userId,
  513. orderCode: this.orderData.orderCode,
  514. orderId: this.orderData.orderId,
  515. }, 'POST').then(res => {
  516. this.modalShow = false
  517. uni.requestPayment({
  518. provider: 'wxpay',
  519. timeStamp: res.data.timeStamp,
  520. nonceStr: res.data.nonceStr,
  521. package: res.data.packageValue,
  522. signType: res.data.signType,
  523. paySign: res.data.paySign,
  524. success: (payRes) => {
  525. console.log('success:' + JSON.stringify(payRes));
  526. uni.navigateTo({
  527. url: '/pagesMain/paySuccess?orderId=' + this.orderData.orderId
  528. });
  529. },
  530. fail: (error) => {
  531. console.log('fail:' + JSON.stringify(error));
  532. this.$refs.uTips.show({
  533. title: '支付失败',
  534. type: 'warning',
  535. })
  536. }
  537. })
  538. }).catch(error => {
  539. this.modalShow = false
  540. this.$refs.uTips.show({
  541. title: error.data.msg,
  542. type: 'warning',
  543. })
  544. })
  545. // setTimeout(() => {
  546. // uni.reLaunch({
  547. // url: '/pagesMain/orderList?type=' + 3
  548. // });
  549. // }, 1000)
  550. } else if (this.handleType == 3) {
  551. // 确认收货
  552. NET.request(API.confirmOrder, {
  553. orderId: this.orderData.orderId
  554. }, 'GET').then(res => {
  555. this.modalShow = false
  556. this.$refs.uTips.show({
  557. title: '确认收货成功',
  558. type: 'success',
  559. })
  560. setTimeout(() => {
  561. uni.reLaunch({
  562. url: '/pagesMain/orderList?type=' + 5
  563. });
  564. }, 1000)
  565. }).catch(error => {
  566. this.modalShow = false
  567. this.$refs.uTips.show({
  568. title: error.data.msg,
  569. type: 'warning',
  570. })
  571. })
  572. }
  573. },
  574. // 跳转留言列表
  575. goToMessage() {
  576. uni.navigateTo({
  577. url: '/pagesMain/messageList?orderId=' + this.orderData.orderId + '&tenantCode=' + this.orderData.tenantCode
  578. });
  579. },
  580. // 跳转商铺
  581. gotoShop() {
  582. if (this.orderData.tenantCode != 'admin') {
  583. if (this.orderData.merchantInfoResVO.products.length) {
  584. uni.navigateTo({
  585. url: '/pagesGood/shopDetails?goodId=' + this.orderData.merchantInfoResVO.products[0].productId
  586. });
  587. }
  588. }
  589. },
  590. // 图片预览
  591. _previewImage(image,index) {
  592. var imgArr = [];
  593. imgArr.push(image);
  594. //预览图片
  595. uni.previewImage({
  596. urls: imgArr,
  597. current: imgArr[index]
  598. });
  599. }
  600. }
  601. }
  602. </script>
  603. <style>
  604. page {
  605. background-color: #f7f7f7;
  606. }
  607. </style>
  608. <style lang="less" scoped>
  609. page {
  610. width: 100%;
  611. height: 100%;
  612. }
  613. .container {
  614. width: 100%;
  615. height: 100%;
  616. float: left;
  617. background-color: #f7f7f7;
  618. // box-sizing: border-box;
  619. // padding-bottom: 50px;
  620. overflow-y: auto;
  621. .order-type-info {
  622. width: 100%;
  623. height: 115px;
  624. float: left;
  625. box-sizing: border-box;
  626. padding: 22px 100px 0 15px;
  627. background: #52A63A;
  628. border-radius: 0px 0px 20px 20px;
  629. background-size: 62px;
  630. background-position: calc(100% - 48px) 12px;
  631. background-repeat: no-repeat;
  632. background-image: url(@/static/images/orderDetail.png);
  633. .order-type-title {
  634. width: 100%;
  635. float: left;
  636. height: 20px;
  637. line-height: 20px;
  638. font-size: 15px;
  639. font-family: PingFang SC;
  640. color: #FFFFFF;
  641. margin-bottom: 4px;
  642. }
  643. .order-type-text {
  644. width: 100%;
  645. float: left;
  646. height: 20px;
  647. line-height: 20px;
  648. font-size: 12px;
  649. font-family: PingFang SC;
  650. color: #FFFFFF;
  651. }
  652. }
  653. .address-info-box {
  654. width: calc(100% - 30px);
  655. float: left;
  656. box-sizing: border-box;
  657. padding: 16px 18px 16px 16px;
  658. margin: -34px 15px 10px 15px;
  659. background: #FFFFFF;
  660. border-radius: 10px;
  661. .address-icon {
  662. width: 36px;
  663. height: 40px;
  664. float: left;
  665. align-items: center;
  666. display: flex;
  667. .iconfont {
  668. color: #52A63A;
  669. font-size: 36px;
  670. }
  671. }
  672. .address-content {
  673. width: calc(100% - 56px);
  674. height: 40px;
  675. float: left;
  676. margin: 0 8px 0 12px;
  677. .address-info {
  678. height: 20px;
  679. font-family: PingFang SC;
  680. line-height: 20px;
  681. overflow: hidden;
  682. text-overflow: ellipsis;
  683. white-space: nowrap;
  684. .address-name {
  685. font-size: 16px;
  686. color: #333333;
  687. margin-right: 14px;
  688. }
  689. .address-phone {
  690. font-size: 12px;
  691. color: #666666;
  692. }
  693. }
  694. .address-detail {
  695. height: 20px;
  696. font-size: 16px;
  697. font-family: PingFang SC;
  698. color: #333333;
  699. line-height: 20px;
  700. overflow: hidden;
  701. text-overflow: ellipsis;
  702. white-space: nowrap;
  703. }
  704. }
  705. }
  706. .goods-info-box {
  707. width: calc(100% - 30px);
  708. float: left;
  709. margin: 0 15px 10px 15px;
  710. background: #FFFFFF;
  711. border-radius: 10px;
  712. .shop-info {
  713. width: 100%;
  714. height: 48px;
  715. float: left;
  716. box-sizing: border-box;
  717. padding: 13px 15px 12px 15px;
  718. border-bottom: 1px solid #EEEEEE;
  719. line-height: 22px;
  720. .icondianpu {
  721. font-size: 22px;
  722. color: #333333;
  723. }
  724. .shop-name {
  725. font-size: 15px;
  726. font-family: PingFang SC;
  727. color: #333333;
  728. margin: 0 8px 0 10px;
  729. }
  730. .iconshangjia {
  731. font-size: 12px;
  732. color: #999999;
  733. }
  734. }
  735. .goods-list {
  736. width: 100%;
  737. float: left;
  738. box-sizing: border-box;
  739. padding: 10px 15px 0 15px;
  740. .goods-row {
  741. width: 100%;
  742. height: 90px;
  743. float: left;
  744. display: flex;
  745. margin-bottom: 10px;
  746. .goods-img {
  747. width: 90px;
  748. height: 90px;
  749. border-radius: 5px;
  750. object-fit: cover;
  751. }
  752. .goods-info {
  753. width: calc(100% - 106px);
  754. height: 90px;
  755. margin-left: 16px;
  756. .goods-name {
  757. width: 100%;
  758. height: 36px;
  759. float: left;
  760. font-size: 14px;
  761. font-family: PingFang SC;
  762. color: #333333;
  763. line-height: 18px;
  764. overflow: hidden;
  765. text-overflow: ellipsis;
  766. display: -webkit-box;
  767. -webkit-line-clamp: 2;
  768. -webkit-box-orient: vertical;
  769. word-wrap: break-word;
  770. }
  771. .goods-type {
  772. height: 20px;
  773. float: left;
  774. background: #F0F0F0;
  775. border-radius: 4px;
  776. padding: 0 8px;
  777. margin: 6px 0;
  778. font-size: 10px;
  779. font-family: PingFang SC;
  780. color: #666666;
  781. line-height: 20px;
  782. }
  783. .plant-area {
  784. height: 20px;
  785. float: right;
  786. margin: 6px 0;
  787. font-size: 12px;
  788. font-family: PingFang SC;
  789. color: #333333;
  790. }
  791. .goods-price-number {
  792. width: 100%;
  793. height: 20px;
  794. float: left;
  795. line-height: 20px;
  796. font-family: PingFang SC;
  797. color: #333333;
  798. .goods-unit {
  799. font-size: 12px;
  800. }
  801. .goods-price {
  802. font-size: 15px;
  803. margin-right: 6px;
  804. }
  805. .goods-number {
  806. font-size: 12px;
  807. }
  808. }
  809. .plant-text {
  810. float: right;
  811. font-size: 12px;
  812. font-family: PingFang SC;
  813. color: #333333;
  814. }
  815. }
  816. }
  817. }
  818. .order-info {
  819. width: 100%;
  820. float: left;
  821. /deep/.u-cell {
  822. padding: 6px 16px;
  823. }
  824. }
  825. .pay-info {
  826. width: 100%;
  827. height: 46px;
  828. float: left;
  829. box-sizing: border-box;
  830. border-top: 1px solid #EEEEEE;
  831. padding-right: 15px;
  832. line-height: 44px;
  833. font-family: PingFang SC;
  834. font-size: 14px;
  835. text-align: right;
  836. white-space: nowrap;
  837. .pay-text {
  838. float: left;
  839. color: #333333;
  840. margin-left: 15px;
  841. }
  842. .pay-price {
  843. color: #52A63A;
  844. }
  845. }
  846. }
  847. .order-info-box {
  848. width: calc(100% - 30px);
  849. float: left;
  850. margin: 0 15px 10px 15px;
  851. background: #FFFFFF;
  852. border-radius: 10px;
  853. .info-title-box {
  854. width: 100%;
  855. height: 48px;
  856. float: left;
  857. box-sizing: border-box;
  858. padding: 15px 15px 14px 15px;
  859. border-bottom: 1px solid #EEEEEE;
  860. line-height: 18px;
  861. white-space: nowrap;
  862. .info-title {
  863. height: 18px;
  864. float: left;
  865. font-size: 15px;
  866. font-family: PingFang SC;
  867. color: #333333;
  868. margin-right: 8px;
  869. padding-left: 10px;
  870. border-left: 2px solid #74BD60;
  871. }
  872. .iconfangxiang {
  873. float: right;
  874. font-size: 12px;
  875. color: #999999;
  876. }
  877. }
  878. .info-content-box {
  879. width: 100%;
  880. float: left;
  881. padding: 15px 0;
  882. .message-row {
  883. width: 100%;
  884. float: left;
  885. box-sizing: border-box;
  886. padding: 0 15px;
  887. margin-bottom: 15px;
  888. .message-head {
  889. width: 50px;
  890. height: 50px;
  891. object-fit: cover;
  892. float: left;
  893. border-radius: 50%;
  894. overflow: hidden;
  895. }
  896. .message-info-box {
  897. width: calc(100% - 75px);
  898. float: right;
  899. .message-name {
  900. width: 50%;
  901. height: 30px;
  902. float: left;
  903. font-size: 15px;
  904. font-family: PingFang SC;
  905. color: #333333;
  906. line-height: 30px;
  907. overflow: hidden;
  908. text-overflow: ellipsis;
  909. white-space: nowrap;
  910. }
  911. .message-date {
  912. width: 50%;
  913. height: 30px;
  914. float: left;
  915. font-size: 12px;
  916. font-family: PingFang SC;
  917. color: #666666;
  918. text-align: right;
  919. line-height: 30px;
  920. overflow: hidden;
  921. text-overflow: ellipsis;
  922. white-space: nowrap;
  923. }
  924. .message-text {
  925. width: 100%;
  926. height: 20px;
  927. float: left;
  928. font-size: 12px;
  929. font-family: PingFang SC;
  930. color: #666666;
  931. line-height: 20px;
  932. overflow: hidden;
  933. text-overflow: ellipsis;
  934. white-space: nowrap;
  935. }
  936. .message-img-box {
  937. width: 100%;
  938. float: left;
  939. .message-img {
  940. width: 76px;
  941. height: 76px;
  942. object-fit: cover;
  943. float: left;
  944. margin: 0 10px 10px 0;
  945. }
  946. }
  947. }
  948. }
  949. .message-row:last-child {
  950. margin-bottom: 0;
  951. }
  952. .order-info-row {
  953. width: 100%;
  954. float: left;
  955. box-sizing: border-box;
  956. padding: 0 15px;
  957. font-size: 12px;
  958. font-family: PingFang SC;
  959. color: #333333;
  960. line-height: 26px;
  961. word-break: break-all;
  962. }
  963. }
  964. .assess-row {
  965. width: calc(100% - 30px);
  966. margin: 0 15px;
  967. float: left;
  968. // border-top: 1px solid #F6F6F6;
  969. padding: 12px 0;
  970. .assess-head {
  971. width: 50px;
  972. height: 50px;
  973. float: left;
  974. object-fit: cover;
  975. border-radius: 50%;
  976. }
  977. .assess-info {
  978. width: calc(100% - 62px);
  979. margin-left: 12px;
  980. float: left;
  981. .assess-name {
  982. height: 18px;
  983. float: left;
  984. line-height: 18px;
  985. font-size: 15px;
  986. font-family: PingFang SC;
  987. font-weight: bold;
  988. color: #343434;
  989. }
  990. .assess-date {
  991. height: 18px;
  992. float: right;
  993. line-height: 18px;
  994. font-size: 12px;
  995. font-family: PingFang SC;
  996. font-weight: bold;
  997. color: #666666;
  998. }
  999. .assess-sore-box {
  1000. width: 100%;
  1001. height: 16px;
  1002. float: left;
  1003. margin: 6px 0;
  1004. }
  1005. .assess-text {
  1006. width: 100%;
  1007. float: left;
  1008. font-size: 12px;
  1009. font-family: PingFang SC;
  1010. font-weight: bold;
  1011. color: #666666;
  1012. line-height: 16px;
  1013. margin: 8px 0 10px 0;
  1014. overflow: hidden;
  1015. text-overflow: ellipsis;
  1016. display: -webkit-box;
  1017. -webkit-line-clamp: 2;
  1018. -webkit-box-orient: vertical;
  1019. word-wrap: break-word;
  1020. }
  1021. .assess-img-box {
  1022. width: 100%;
  1023. float: left;
  1024. display: flex;
  1025. .img-col {
  1026. height: 60px;
  1027. width: 60px;
  1028. object-fit: cover;
  1029. margin: 0 10px 10px 0;
  1030. }
  1031. }
  1032. }
  1033. .shop-reply-box {
  1034. width: 100%;
  1035. float: left;
  1036. background: #F5F5F5;
  1037. border-radius: 5px;
  1038. margin-top: 10px;
  1039. .shop-head {
  1040. width: 100%;
  1041. height: 36px;
  1042. float: left;
  1043. box-sizing: border-box;
  1044. padding: 10px 12px;
  1045. .icondianpu {
  1046. width: 16px;
  1047. height: 16px;
  1048. float: left;
  1049. color: #52A63A;
  1050. font-size: 20px;
  1051. margin-right: 8px;
  1052. }
  1053. .shop-name {
  1054. height: 16px;
  1055. float: left;
  1056. font-size: 15px;
  1057. font-family: PingFang SC;
  1058. color: #52A63A;
  1059. line-height: 16px;
  1060. }
  1061. }
  1062. .shop-reply {
  1063. width: 100%;
  1064. float: left;
  1065. box-sizing: border-box;
  1066. padding: 0 12px 12px 12px;
  1067. font-size: 12px;
  1068. font-family: PingFang SC;
  1069. color: #666666;
  1070. line-height: 16px;
  1071. }
  1072. }
  1073. }
  1074. }
  1075. .order-handle {
  1076. width: 100%;
  1077. height: 50px;
  1078. float: left;
  1079. border-top: 1px solid #cccccc;
  1080. }
  1081. }
  1082. .uni-popup-dialog {
  1083. width: 80vw;
  1084. border-radius: 15px;
  1085. background-color: #fff;
  1086. position: fixed;
  1087. margin-left: 10vw;
  1088. top: 34vh;
  1089. z-index: 1001;
  1090. }
  1091. .uni-dialog-title {
  1092. /* #ifndef APP-NVUE */
  1093. display: flex;
  1094. /* #endif */
  1095. flex-direction: row;
  1096. justify-content: center;
  1097. padding-top: 15px;
  1098. padding-bottom: 5px;
  1099. }
  1100. .uni-dialog-title-text {
  1101. font-size: 16px;
  1102. font-weight: 500;
  1103. }
  1104. .uni-dialog-content {
  1105. /* #ifndef APP-NVUE */
  1106. display: flex;
  1107. /* #endif */
  1108. flex-direction: row;
  1109. justify-content: center;
  1110. align-items: center;
  1111. padding: 5px 15px 15px 15px;
  1112. text-align: center;
  1113. }
  1114. .uni-dialog-content-text {
  1115. font-size: 14px;
  1116. color: #6e6e6e;
  1117. }
  1118. .uni-dialog-button-group {
  1119. /* #ifndef APP-NVUE */
  1120. display: flex;
  1121. /* #endif */
  1122. flex-direction: row;
  1123. border-top-color: #f5f5f5;
  1124. border-top-style: solid;
  1125. border-top-width: 1px;
  1126. }
  1127. .uni-dialog-button {
  1128. /* #ifndef APP-NVUE */
  1129. display: flex;
  1130. /* #endif */
  1131. background: rgba(0, 0, 0, 0);
  1132. border: none;
  1133. flex: 1;
  1134. flex-direction: row;
  1135. justify-content: center;
  1136. align-items: center;
  1137. height: 45px;
  1138. }
  1139. .uni-border-left {
  1140. border-left-color: #f0f0f0;
  1141. border-left-style: solid;
  1142. border-left-width: 0px;
  1143. }
  1144. .uni-dialog-button-text {
  1145. font-size: 14px;
  1146. }
  1147. .uni-button-color {
  1148. color: #007aff;
  1149. }
  1150. .uni-dialog-input {
  1151. flex: 1;
  1152. font-size: 14px;
  1153. }
  1154. .uni-popup__success {
  1155. color: #4cd964;
  1156. }
  1157. .uni-popup__warn {
  1158. color: #f0ad4e;
  1159. }
  1160. .uni-popup__error {
  1161. color: #dd524d;
  1162. }
  1163. .uni-popup__info {
  1164. color: #909399;
  1165. }
  1166. .qx_bg{
  1167. width: 100vw;
  1168. height: 100vh;
  1169. background: rgba(0, 0, 0, 0.25);
  1170. position: fixed;
  1171. top: 0px;
  1172. left: 0px;
  1173. z-index: 1000;
  1174. }
  1175. </style>