敢为人鲜小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

541 lines
14 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title="订单详情 " leftClick @leftClick="navigateBack" bgColor="#019245" color="#fff" />
  5. <!-- 店铺信息 -->
  6. <view class="shop-info">
  7. <view class="shop-header">
  8. <image class="shop-logo" :src="teamLeader.spotImage" mode="aspectFill"></image>
  9. <view class="shop-name-container">
  10. <text class="shop-name"> {{ teamLeader.spotName }} </text>
  11. <view class="shop-address">
  12. <view style="padding-top: 7rpx;">
  13. <!-- 需要置顶 -->
  14. <uv-icon name="map-fill" color="#019245" size="28rpx"></uv-icon>
  15. </view>
  16. <text class="address-text">{{ teamLeader.area }} {{ teamLeader.address }}</text>
  17. </view>
  18. <view class="shop-phone">
  19. <view style="padding-top: 7rpx;">
  20. <!-- 需要置顶 -->
  21. <uv-icon name="phone-fill" color="#019245" size="28rpx"></uv-icon>
  22. </view>
  23. <text class="phone-text">{{teamLeader.phone}}</text>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="order-status">
  29. <!-- 商品列表 -->
  30. <view class="food-list">
  31. <view class="food-item" v-for="(food, index) in showedFoods" :key="food.id">
  32. <image class="food-image" :src="food.goods.image" mode="aspectFill" />
  33. <view class="food-info">
  34. <text class="food-name">{{food.goods.title}}</text>
  35. <view class="food-sold">
  36. <uv-icon name="bag" size="28rpx"></uv-icon>
  37. <text>已售出 {{ food.goods.sales }}</text>
  38. </view>
  39. <text class="food-price"> <text style="font-size: 20rpx;"></text> {{food.goods.price}}</text>
  40. <text class="food-count">×{{food.num}}</text>
  41. </view>
  42. </view>
  43. <view class="expand-more" @tap="showAllFoods = !showAllFoods" v-if="orderDetail.goodsList.length > 3">
  44. <text>{{showAllFoods ? '收起' : '展开'}} ({{orderDetail.goodsList.length}})</text>
  45. <uv-icon :name="showAllFoods ? 'arrow-up' : 'arrow-down'" size="28rpx"></uv-icon>
  46. </view>
  47. </view>
  48. <!-- 订单信息 -->
  49. <view class="order-info">
  50. <view class="info-item">
  51. <text class="info-label">合计:</text>
  52. <text class="info-value price">{{ orderDetail.pricePay }}</text>
  53. </view>
  54. <view class="info-item">
  55. <text class="info-label">创建时间:</text>
  56. <text class="info-value">{{ orderDetail.createTime }}</text>
  57. </view>
  58. <view class="info-item">
  59. <text class="info-label">订单编号:</text>
  60. <text class="info-value">{{orderDetail.id}}</text>
  61. </view>
  62. </view>
  63. </view>
  64. <view class="discount-info-container">
  65. <!-- 优惠信息 -->
  66. <view class="discount-info">
  67. <view class="discount-header">
  68. <text>优惠</text>
  69. </view>
  70. <view class="discount-item">
  71. <view class="discount-left" v-if="orderDetail.pricePreferential">
  72. <image src="@/static/image/券.webp" mode="aspectFill" class="coupon-icon" />
  73. <view>新用户立减</view>
  74. </view>
  75. <text v-if="orderDetail.pricePreferential" class="discount-amount">{{orderDetail.pricePreferential}}</text>
  76. <text v-else class="none-discount-amount">未使用优惠卷</text>
  77. </view>
  78. </view>
  79. <!-- 备注 -->
  80. <view class="remark-section">
  81. <view class="remark-header">
  82. <text>备注</text>
  83. </view>
  84. <view class="remark-content">
  85. <input v-if="orderStatus === '0' " type="text" v-model="orderDetail.remark"
  86. placeholder="请输入您要备注的内容" placeholder-style="font-size: 28rpx" />
  87. <text v-else>{{orderDetail.remark || '无备注信息'}}</text>
  88. </view>
  89. </view>
  90. <!-- 支付方式 -->
  91. <uv-radio-group v-model="payMethod" v-if="orderStatus === '0' ">
  92. <view class="payment-methods">
  93. <view class="payment-item">
  94. <uv-icon name="weixin-circle-fill" size="70rpx" color="#019245" />
  95. <text class="payment-name">微信支付</text>
  96. <uv-radio activeColor="#019245" size="40rpx" name="0" />
  97. </view>
  98. <view class="payment-item">
  99. <uv-icon name="red-packet" size="70rpx" color="#019245" />
  100. <text class="payment-name">账户余额<text class="balance-text">(余额: {{ userInfo.balance }})</text></text>
  101. <!-- 钱不够就会禁用 -->
  102. <uv-radio activeColor="#019245" size="40rpx" name="1" :disabled="userInfo.balance < orderDetail.pricePay" />
  103. </view>
  104. </view>
  105. </uv-radio-group>
  106. <!-- 底部支付栏 -->
  107. <view class="bottom-bar">
  108. <view class="total-section">
  109. <text class="total-label">
  110. {{ (orderDetail.goodsList || []).length }}
  111. <text style="color: black;">合计</text>
  112. </text>
  113. <text class="total-price">{{ ( orderDetail.pricePay || 0 ).toFixed(2) || 0 }}</text>
  114. </view>
  115. <view class="pay-button" @tap="handlePay" v-if="orderStatus === '0' ">立即下单</view>
  116. <view class="pay-button" @tap="handleTake" v-if="orderStatus === '3'">取餐完成</view>
  117. </view>
  118. </view>
  119. </view>
  120. </template>
  121. <script>
  122. import navbar from '@/components/base/navbar.vue'
  123. import { mapState, mapMutations } from 'vuex'
  124. export default {
  125. components: {
  126. navbar
  127. },
  128. data() {
  129. return {
  130. id: '',
  131. payMethod: '0',
  132. showAllFoods: false,
  133. // orderStatus: '',
  134. orderDetail: {
  135. status: '',
  136. remark: '',
  137. goodsList: [],
  138. priceAll: 0,
  139. pricePay: 0,
  140. pricePreferential: 0,
  141. },
  142. cartDiscount: 0,
  143. teamLeader: {}
  144. }
  145. },
  146. computed: {
  147. ...mapState([ 'userInfo']),
  148. showedFoods() {
  149. return this.showAllFoods ? this.orderDetail.goodsList : (this.orderDetail.goodsList.length > 3 ? this.orderDetail.goodsList.slice(0, 3) : this.orderDetail.goodsList)
  150. },
  151. orderStatus() {
  152. return this.orderDetail.status
  153. },
  154. },
  155. onLoad(options) {
  156. // 如果是购物车调过来的结账页面
  157. if (options.id) {
  158. this.getOrderDetail(options.id)
  159. }
  160. },
  161. methods: {
  162. ...mapMutations([ 'clearCouponData']),
  163. // 返回上一页
  164. navigateBack() {
  165. uni.navigateBack()
  166. },
  167. // 获取订单详情
  168. getOrderDetail(id) {
  169. this.id = id
  170. this.$api('queryMemberOrderList', {
  171. id: this.id
  172. }, res => {
  173. if (res.code === 200) {
  174. this.orderDetail = res.result.records[0]
  175. this.teamLeader = res.result.records[0].teamLeader
  176. }
  177. })
  178. },
  179. // 处理支付
  180. handlePay() {
  181. uni.showLoading({
  182. title: '支付处理中...'
  183. })
  184. this.$api('payOrder',{
  185. payType: this.payMethod,
  186. orderId: this.id,
  187. }, res => {
  188. uni.hideLoading()
  189. if (res.code === 200) {
  190. if (this.payMethod == '0') {
  191. uni.requestPaymentWxPay(res)
  192. .then(( ) => {
  193. setTimeout(uni.redirectTo, 700, {
  194. url: '/pages/index/order?tabIndex=1'
  195. })
  196. })
  197. } else {
  198. uni.showModal({
  199. title: '提示',
  200. content: '确认使用余额支付吗?',
  201. confirmColor: '#019245',
  202. success: (result) => {
  203. if (result.confirm) {
  204. uni.showToast({
  205. title: '下单成功',
  206. icon: 'success'
  207. })
  208. setTimeout(uni.redirectTo, 700, {
  209. url: '/pages/index/order?tabIndex=1'
  210. })
  211. }
  212. }
  213. })
  214. }
  215. }
  216. })
  217. },
  218. // 取餐完成
  219. handleTake() {
  220. this.$api('finishMemberOrderById', {
  221. memberOrderId: this.id
  222. }, res => {
  223. if (res.code === 200) {
  224. uni.showToast({
  225. title: '取餐完成',
  226. icon: 'success'
  227. })
  228. setTimeout( () => {
  229. uni.navigateBack()
  230. }, 1000)
  231. }
  232. })
  233. }
  234. }
  235. }
  236. </script>
  237. <style lang="scss" scoped>
  238. .page {
  239. background-color: #f5f5f5;
  240. min-height: 100vh;
  241. padding-bottom: 120rpx;
  242. }
  243. .status-bar {
  244. background-color: #019245;
  245. padding: 30rpx;
  246. color: #fff;
  247. font-size: 32rpx;
  248. font-weight: 500;
  249. }
  250. .shop-info {
  251. background-color: #fff;
  252. margin: 20rpx;
  253. border-radius: 16rpx;
  254. padding: 20rpx;
  255. .shop-header {
  256. display: flex;
  257. align-items: center;
  258. // background-color: red;
  259. .shop-logo {
  260. width: 150rpx;
  261. height: 150rpx;
  262. // border-radius: 10rpx;
  263. margin-right: 20rpx;
  264. }
  265. .shop-name-container {
  266. flex: 1;
  267. .shop-name {
  268. font-size: 30rpx;
  269. font-weight: 500;
  270. margin-bottom: 10rpx;
  271. display: block;
  272. }
  273. .shop-address, .shop-phone {
  274. display: flex;
  275. align-items: start;
  276. font-size: 24rpx;
  277. color: $uni-color-third;
  278. margin-top: 8rpx;
  279. .address-text, .phone-text {
  280. margin-left: 8rpx;
  281. width: 80%;
  282. white-space: wrap;
  283. // overflow: hidden;
  284. // text-overflow: ellipsis;
  285. }
  286. }
  287. .shop-address-top{
  288. display: flex;
  289. align-items: start;
  290. background-color: red;
  291. // gap: 10rpx;
  292. }
  293. }
  294. }
  295. }
  296. .order-status{
  297. background-color: #fff;
  298. margin: 20rpx;
  299. border-radius: 16rpx;
  300. padding: 20rpx;
  301. .food-list {
  302. // gap: 20rpx;
  303. // background-color: #019245;
  304. .food-item {
  305. display: flex;
  306. margin-bottom: 20rpx;
  307. // background-color: red;
  308. .food-image {
  309. width: 120rpx;
  310. height: 120rpx;
  311. // border-radius: 10rpx;
  312. margin-right: 20rpx;
  313. }
  314. .food-info {
  315. flex: 1;
  316. display: flex;
  317. flex-direction: column;
  318. justify-content: space-between;
  319. position: relative;
  320. .food-name {
  321. font-size: 28rpx;
  322. font-weight: 500;
  323. }
  324. .food-sold {
  325. display: flex;
  326. align-items: center;
  327. font-size: 24rpx;
  328. color: $uni-color-third;
  329. }
  330. .food-price {
  331. font-size: 28rpx;
  332. color: #f00;
  333. }
  334. .food-count {
  335. color: black;
  336. position: absolute;
  337. bottom: 50%;
  338. right: 0;
  339. }
  340. }
  341. }
  342. .expand-more {
  343. display: flex;
  344. align-items: center;
  345. justify-content: center;
  346. padding: 20rpx 0 0;
  347. font-size: 24rpx;
  348. color: $uni-color-third;
  349. }
  350. }
  351. .order-info {
  352. padding-top: 20rpx;
  353. .info-item {
  354. display: flex;
  355. justify-content: space-between;
  356. margin-bottom: 15rpx;
  357. font-size: 26rpx;
  358. .info-label {
  359. color: black;
  360. }
  361. .info-value {
  362. color: #333;
  363. &.price {
  364. color: #f00;
  365. font-weight: 500;
  366. }
  367. }
  368. }
  369. }
  370. }
  371. .discount-info-container {
  372. background-color: #fff;
  373. margin: 20rpx;
  374. border-radius: 16rpx;
  375. padding: 20rpx;
  376. display: flex;
  377. flex-direction: column;
  378. gap: 40rpx;
  379. }
  380. .discount-info {
  381. display: flex;
  382. align-items: center;
  383. justify-content: space-between;
  384. .discount-header {
  385. font-size: 28rpx;
  386. }
  387. .discount-item {
  388. display: flex;
  389. justify-content: space-between;
  390. align-items: center;
  391. gap: 20rpx;
  392. .discount-left {
  393. display: flex;
  394. align-items: center;
  395. gap: 10rpx;
  396. .coupon-icon {
  397. width: 36rpx;
  398. height: 36rpx;
  399. margin-top: 6rpx;
  400. }
  401. }
  402. .discount-amount {
  403. color: #f00;
  404. font-weight: 500;
  405. }
  406. .none-discount-amount{
  407. color: gray;
  408. font-weight: 500;
  409. }
  410. }
  411. }
  412. .remark-section {
  413. display: flex;
  414. // flex-direction: column;
  415. gap: 40rpx;
  416. // background-color: red;
  417. align-items: center;
  418. .remark-header {
  419. font-size: 28rpx;
  420. // font-weight: 500;
  421. }
  422. .remark-content {
  423. font-size: 26rpx;
  424. color: black;
  425. min-height: 60rpx;
  426. display: flex;
  427. align-items: center;
  428. }
  429. }
  430. .payment-methods {
  431. background-color: #fff;
  432. width: 100%;
  433. margin: 20rpx;
  434. border-radius: 16rpx;
  435. padding: 20rpx;
  436. display: flex;
  437. flex-direction: column;
  438. gap: 20rpx;
  439. .payment-item {
  440. display: flex;
  441. align-items: center;
  442. padding: 20rpx 0;
  443. border-bottom: 1rpx solid #f5f5f5;
  444. &:last-child {
  445. border-bottom: none;
  446. }
  447. .payment-name {
  448. flex: 1;
  449. margin-left: 20rpx;
  450. font-size: 28rpx;
  451. .balance-text {
  452. font-size: 24rpx;
  453. color: $uni-color-third;
  454. margin-left: 10rpx;
  455. }
  456. }
  457. }
  458. }
  459. .bottom-bar {
  460. position: fixed;
  461. bottom: 0;
  462. left: 0;
  463. right: 0;
  464. height: 100rpx;
  465. background-color: #fff;
  466. display: flex;
  467. align-items: center;
  468. padding: 0 30rpx;
  469. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  470. .total-section {
  471. flex: 1;
  472. .total-label {
  473. font-size: 26rpx;
  474. color: $uni-color-third;
  475. }
  476. .total-price {
  477. font-size: 32rpx;
  478. color: #f00;
  479. margin-left: 10rpx;
  480. }
  481. }
  482. .pay-button {
  483. width: 240rpx;
  484. height: 80rpx;
  485. background-color: #019245;
  486. color: #fff;
  487. font-size: 30rpx;
  488. display: flex;
  489. align-items: center;
  490. justify-content: center;
  491. border-radius: 40rpx;
  492. }
  493. }
  494. </style>