waitOrderDetail.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
  1. <template>
  2. <view class="order-pages">
  3. <view class="order-info">
  4. <!-- 订单状态 -->
  5. <view class="order-status">
  6. <view class="status-title flex align_center justify_center">
  7. <view class="t-icon icon t-icon-icon_complete"></view>
  8. {{orderInfo.orderStateDictValue}}
  9. </view>
  10. <view class="status-care">
  11. 预约时间:2021-05-10 15:10:05
  12. </view>
  13. </view>
  14. <!-- 服务信息 -->
  15. <view class="info-main">
  16. <view class="flex align_center">
  17. <view class="new-left">
  18. 陕西省西安市未央区华
  19. 帝金座602室
  20. </view>
  21. </view>
  22. <view class="time flex align_center justify_between">
  23. <text>百果园(贞观路店)</text>
  24. <view class="flex align_center">
  25. <view class="t-icon phone t-icon-icon_phone"></view>
  26. <text>18092252287</text>
  27. </view>
  28. </view>
  29. </view>
  30. <!-- 预约信息 -->
  31. <view class="item-info">
  32. <view class="item flex justify_between">
  33. <text>预约品类</text>
  34. <text>纸品类,金属类</text>
  35. </view>
  36. <view class="item flex justify_between">
  37. <text>预约重量</text>
  38. <text>50-100kg</text>
  39. </view>
  40. </view>
  41. <!-- 订单信息 -->
  42. <view class="item-info">
  43. <!-- <view class="item flex justify_between">
  44. <text class="item-title">订单信息</text>
  45. </view> -->
  46. <view class="item flex justify_between">
  47. <text>订单编号</text>
  48. <text>202102022225</text>
  49. </view>
  50. <view class="item flex justify_between">
  51. <text>下单时间</text>
  52. <text>2021-04-19 15:33</text>
  53. </view>
  54. <view class="item flex justify_between">
  55. <text>服务时间</text>
  56. <text>2021-04-19 15:33</text>
  57. </view>
  58. </view>
  59. <!-- 图片 -->
  60. <view class="item-info">
  61. <view class="item-title flex justify_between">
  62. <text>图片</text>
  63. </view>
  64. <view class="item flex">
  65. <u-image class="img-icon" :src="item.icon?item.icon:'../../static/img/mddef.jpg'" border-radius="16" width="160" height="160"></u-image>
  66. </view>
  67. </view>
  68. <!-- 回收品类明细 -->
  69. <view class="item-info">
  70. <view class="item-title flex justify_between">
  71. <text>回收品类明细</text>
  72. </view>
  73. <view class="item flex">
  74. <view class="item-type active">
  75. 纸质类
  76. </view>
  77. <view class="item-type">
  78. 纸质类
  79. </view>
  80. </view>
  81. <view class="item flex justify_between">
  82. <text>黄纸1.24元/kg</text>
  83. <text>5kg/6.20元</text>
  84. </view>
  85. </view>
  86. <!-- 金额 -->
  87. <view class="item-info">
  88. <view class="item flex justify_between">
  89. <text>应付金额</text>
  90. <text>22.20 元</text>
  91. </view>
  92. <view class="item flex justify_between">
  93. <text>支付方式</text>
  94. <text>线下</text>
  95. </view>
  96. </view>
  97. </view>
  98. </view>
  99. </template>
  100. <script>
  101. import moment from 'moment'
  102. export default {
  103. data() {
  104. return {
  105. orderInfo: {
  106. id: '',
  107. createDate: '2021-05-10 15:22',
  108. orderStateDictValue: '已完成',
  109. storeName: '昆仑润滑·车领主 (西咸新区-...',
  110. location: '2.9km',
  111. orderState:'WAIT_PAY',
  112. type: [
  113. {
  114. name:'纸质类',
  115. id: '1'
  116. },
  117. {
  118. name:'衣物类',
  119. id: '12'
  120. }
  121. ],
  122. orderGoodsList: [
  123. {
  124. goodsImages: '',
  125. goodsName: '水蜡免擦洗车(轿车)',
  126. payGold: 200,
  127. buyQty: 2,
  128. goodsNum: 5,
  129. },
  130. {
  131. goodsImages: '',
  132. goodsName: '水蜡免擦洗车(轿车)',
  133. payGold: 200,
  134. buyQty: 2,
  135. goodsNum: 5,
  136. },
  137. ],
  138. payGold: 450
  139. },
  140. totalPrice: 0, // 支付合计
  141. password: '', // 支付密码
  142. showSetPswModal: false, // 设置支付密码弹窗
  143. showInputPsw: false, // 打开输入密码弹窗
  144. showLeavePsw: false, // 打开确定放弃弹窗
  145. orderId: '', // 订单id
  146. leftTime: null,
  147. payFinish: false , // 是否支付成功
  148. focus: false
  149. }
  150. },
  151. onLoad(options) {
  152. // 监听设置密码是否成功
  153. uni.$once('setPswSuccess', this.setPsw)
  154. if (options.id) {
  155. console.log(options.id)
  156. this.orderId = options.id
  157. // this.getOrderDetail()
  158. }
  159. // 开启分享
  160. uni.showShareMenu({
  161. withShareTicket: true,
  162. menus: ['shareAppMessage', 'shareTimeline']
  163. })
  164. },
  165. computed: {
  166. },
  167. methods: {
  168. // 支付剩余时间
  169. leftTimeFun() {
  170. const date1 = moment().toArray() // 当前时间 数组形式
  171. const date2 = moment(this.orderInfo.orderTime).toDate() // 下单时间 日期格式
  172. const date3 = moment(date2).toArray() // 下单时间 数组形式
  173. const date4 = moment(date1).diff(moment(date3), 'seconds')//计算相差的秒数
  174. const tt = 30 - Math.ceil(date4/60) //向上取整
  175. if (tt > 0) {
  176. this.leftTime = tt
  177. } else {
  178. // this.getOrderDetail()
  179. this.leftTime = '00'
  180. }
  181. },
  182. // 获取订单详情
  183. getOrderDetail() {
  184. orderDetail({
  185. id: this.orderId
  186. }).then(res => {
  187. console.log(res,'rrrrrrrr')
  188. if (res.status == 200) {
  189. this.orderInfo = res.data
  190. if(this.orderInfo.orderState=='WAIT_PAY') {
  191. this.leftTimeFun()
  192. }
  193. }
  194. })
  195. },
  196. // 跳转到设置支付密码页
  197. toSetPwd () {
  198. uni.navigateTo({
  199. url:"/pages/userCenter/userInfo/smsVerification"
  200. })
  201. },
  202. // 设置密码成功, 打开输入密码弹窗
  203. setPsw (e) {
  204. if (e.success) {
  205. this.showInputPsw = true
  206. setTimeout(()=>{
  207. this.focus = true
  208. },300)
  209. }
  210. },
  211. // 关闭输入密码弹窗
  212. closePayModal(){
  213. if(!this.payFinish) {
  214. this.showLeavePsw = true
  215. }
  216. },
  217. //确认放弃
  218. canclePay() {
  219. this.password = ''
  220. this.showLeavePsw = false
  221. this.showInputPsw = false
  222. this.focus = false
  223. },
  224. // 继续支付
  225. payAgain () {
  226. this.focus = false
  227. this.showLeavePsw = false
  228. this.showInputPsw = true
  229. setTimeout(()=>{
  230. this.focus = true
  231. },300)
  232. },
  233. // 支付 判断用户是否设置过支付密码
  234. toPay() {
  235. this.totalPrice = this.orderInfo.originalGold
  236. this.payFinish = false
  237. // 判断用户是否设置过支付密码
  238. existPayPwd().then(res=>{
  239. console.log(res,'rrrrrr')
  240. if(res.status == 200) {
  241. // 设置过支付密码,输入密码
  242. if(res.data) {
  243. this.showInputPsw = true
  244. setTimeout(()=>{
  245. this.focus = true
  246. },300)
  247. } else {
  248. // 没设置过支付密码,提示设置密码
  249. this.showSetPswModal = true
  250. }
  251. }
  252. })
  253. },
  254. // 支付
  255. toPayOrder() {
  256. if (this.password === '') {
  257. uni.showToast({
  258. title: '请先输入支付密码',
  259. icon: 'none'
  260. })
  261. return false
  262. }
  263. let id = this.orderInfo.id
  264. let params = {
  265. payPwd: this.password,
  266. id: id
  267. }
  268. signPay(params).then(res=>{
  269. this.btnLoading = false
  270. if(res.status == 200) {
  271. // 关闭弹窗 刷新页面
  272. this.payFinish = true
  273. this.showInputPsw = false
  274. this.getOrderDetail()
  275. // 刷新订单列表
  276. uni.$emit('refresh')
  277. // 跳转到支付完成界面
  278. uni.navigateTo({
  279. url:"/pagesA/toOrder/payFinish?id=" + id
  280. })
  281. } else{
  282. this.password = ''
  283. }
  284. })
  285. },
  286. },
  287. }
  288. </script>
  289. <style lang="scss">
  290. .order-pages {
  291. width: 100%;
  292. height: 100vh;
  293. display: flex;
  294. flex-direction: column;
  295. background-color: #F5F5F5;
  296. .order-info {
  297. width: 100%;
  298. flex: 1;
  299. overflow-y: scroll;
  300. // 订单内容
  301. .info-main{
  302. background: #ffffff;
  303. padding: 10upx 32upx;
  304. margin: 20upx 32upx;
  305. border-radius: 24upx;
  306. box-shadow: 1px 1px 3px #EEEEEE;
  307. font-size: 28upx;
  308. background-image: url(../../static/order_bg_stor.png);
  309. background-repeat: no-repeat;
  310. .new-left{
  311. width: 360rpx;
  312. font-size: 36rpx;
  313. color: #191919;
  314. font-weight: 600;
  315. line-height: 44rpx;
  316. margin-top: 30rpx;
  317. }
  318. .time{
  319. padding: 20rpx 0;
  320. font-size: 32rpx;
  321. color: #7C7D7E;
  322. margin-top: 20rpx;
  323. view:last-child{
  324. font-size: 28rpx;
  325. color: #4C4C4C;
  326. margin-left: 6rpx;
  327. }
  328. }
  329. }
  330. // 状态
  331. .order-status {
  332. padding: 30upx 0;
  333. text-align: center;
  334. .status-title {
  335. font-size: 42upx;
  336. color: #191919;
  337. .icon{
  338. width: 48rpx;
  339. height: 48rpx;
  340. margin-right: 10rpx;
  341. }
  342. }
  343. .status-care {
  344. font-size: 28upx;
  345. margin-top: 10upx;
  346. color: #191919;
  347. >text {
  348. color: red;
  349. }
  350. }
  351. }
  352. // 订单信息列
  353. .item-info{
  354. border-radius: 24rpx;
  355. margin: 0rpx 32rpx 20rpx;
  356. padding: 0rpx 32rpx;
  357. background-color: #fff;
  358. .item-title{
  359. font-size: 32rpx;
  360. color: #181818;
  361. padding-top: 28rpx;
  362. }
  363. .item{
  364. padding: 28rpx 0;
  365. font-size: 32rpx;
  366. border-bottom: 1px solid #EBEBEB;
  367. :first-child{
  368. color: #7C7D7E;
  369. }
  370. :last-child-child{
  371. color: #222222;
  372. }
  373. &:last-child{
  374. border-bottom: none;
  375. }
  376. .item-type{
  377. width: 128rpx;
  378. height: 56rpx;
  379. border: 1px solid #979797;
  380. opacity: 1;
  381. border-radius: 28rpx;
  382. font-size: 24rpx;
  383. color: #999999;
  384. text-align: center;
  385. line-height: 56rpx;
  386. margin-right: 20rpx;
  387. }
  388. .item-type.active{
  389. background-color: #4F88F7;
  390. border: none;
  391. color: #fff;
  392. }
  393. }
  394. }
  395. .price-text {
  396. font-size: 20upx;
  397. margin-left: 10upx;
  398. }
  399. .price-num {
  400. font-size: 32upx;
  401. color: red;
  402. font-weight: 600;
  403. margin-right: 6rpx;
  404. }
  405. .u-cell {
  406. padding: 10rpx 32rpx;
  407. }
  408. }
  409. .footer {
  410. padding: 20rpx 32rpx;
  411. display: flex;
  412. background-color: #fff;
  413. .btn{
  414. flex: 1;
  415. height: 84rpx;
  416. font-size: 32rpx;
  417. text-align: center;
  418. line-height: 84rpx;
  419. }
  420. .btnCancleStyle{
  421. color: #666666;
  422. background: #E5E5E5;
  423. border-radius: 60rpx 0px 0px 60rpx;
  424. }
  425. .btnPayStyle{
  426. color: #191919;
  427. background: #FFD100;
  428. border-radius: 0rpx 60px 60px 0rpx;
  429. }
  430. .useBtn{
  431. width: 100%;
  432. height: 84rpx;
  433. font-size: 32rpx;
  434. text-align: center;
  435. line-height: 84rpx;
  436. color: #191919;
  437. background: #FFD100;
  438. border-radius: 60rpx
  439. }
  440. }
  441. }
  442. </style>