9 changed files with 433 additions and 192 deletions
Unified View
Diff Options
-
+185 -0components/order/orderCard.vue
-
+29 -2components/product/productCard.vue
-
+8 -3pages.json
-
+0 -160pages/index/order.vue
-
+1 -27pages_order/order/createOrder.vue
-
+210 -0pages_order/order/verifyOrder.vue
-
BINpages_order/static/verifyOrder/icon-checked.png
-
BINpages_order/static/verifyOrder/icon-clock.png
-
BINpages_order/static/verifyOrder/temp-qrcode.png
+ 185
- 0
components/order/orderCard.vue
View File
| @ -0,0 +1,185 @@ | |||||
| <template> | |||||
| <view class="card order order-card__view"> | |||||
| <view class="flex overview"> | |||||
| <text class="title">{{ data.title }}</text> | |||||
| <text class="state">{{ stateCodeAndDescFieldsMapping[data.state] }}</text> | |||||
| </view> | |||||
| <view class="flex detail"> | |||||
| <image class="img" :src="data.imgUrl"></image> | |||||
| <view class="info"> | |||||
| <view class="desc"> | |||||
| <view class="row">{{ `服务内容：${data.desc || '-'}` }}</view> | |||||
| <view class="row">{{ `下单时间：${data.createTime || '-'}` }}</view> | |||||
| <view class="row">{{ `订单号：${data.orderNo || '-'}` }}</view> | |||||
| </view> | |||||
| <view class="price"> | |||||
| 总价格：<text class="unit">¥</text><text class="count">{{ data.price }}</text> | |||||
| </view> | |||||
| <view class="btns" v-if="[0, 1].includes(data.state)"> | |||||
| <!-- 待付款 --> | |||||
| <template v-if="data.state === 0"> | |||||
| <button plain class="btn btn-plain" @click="onCancel">取消订单</button> | |||||
| <button plain class="btn" @click="onPay">立即付款</button> | |||||
| </template> | |||||
| <!-- 待核销 --> | |||||
| <template v-if="data.state === 1"> | |||||
| <button plain class="btn" @click="onVerify">去核销</button> | |||||
| </template> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import mixinsOrder from '@/mixins/order.js' | |||||
| const TEST_DATA = { | |||||
| id: '001', | |||||
| imgUrl: '../../static/image/home/temp-product.png', | |||||
| title: '60分钟肩颈推拿按摩', | |||||
| desc: '疏通经络 放松肌肉', | |||||
| price: 264, | |||||
| orderNo: 'da123567', | |||||
| createTime: '2024-12-24 18:45:23', | |||||
| state: 1, | |||||
| } | |||||
| export default { | |||||
| mixins: [mixinsOrder], | |||||
| props: { | |||||
| data: { | |||||
| type: Object, | |||||
| default() { | |||||
| // todo: delete | |||||
| return TEST_DATA | |||||
| } | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| stateCodeAndDescFieldsMapping: { | |||||
| 0: '待付款', | |||||
| 1: '待核销', | |||||
| 2: '已完成', | |||||
| 3: '已取消', | |||||
| } | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| onCancel() { | |||||
| this.cancelOrder(this.data) | |||||
| }, | |||||
| onPay() { | |||||
| this.toPayOrder(this.data) | |||||
| }, | |||||
| onVerify() { | |||||
| // todo | |||||
| this.$utils.navigateTo(`/pages_order/order/verifyOrder?id=${this.data.id}`) | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .order { | |||||
| background-color: $uni-fg-color; | |||||
| padding: 15rpx 33rpx 0 30rpx; | |||||
| & + & { | |||||
| margin-top: 20rpx; | |||||
| } | |||||
| } | |||||
| .overview { | |||||
| justify-content: space-between; | |||||
| font-size: 28rpx; | |||||
| .title { | |||||
| color: #000000; | |||||
| font-weight: 700; | |||||
| } | |||||
| .state { | |||||
| color: $uni-color-light; | |||||
| } | |||||
| } | |||||
| .detail { | |||||
| margin-top: 9rpx; | |||||
| align-items: flex-start; | |||||
| .img { | |||||
| width: 167rpx; | |||||
| height: 167rpx; | |||||
| margin-right: 15rpx; | |||||
| margin-bottom: 29rpx; | |||||
| } | |||||
| } | |||||
| .info { | |||||
| flex: 1; | |||||
| font-size: 22rpx; | |||||
| .desc { | |||||
| background-color: #F5F5F5; | |||||
| border-radius: 5rpx; | |||||
| padding: 13rpx 16rpx; | |||||
| color: #999999; | |||||
| } | |||||
| .row + .row { | |||||
| margin-top: 6rpx; | |||||
| } | |||||
| .price { | |||||
| margin-top: 8rpx; | |||||
| text-align: right; | |||||
| color: #000000; | |||||
| .count, | |||||
| .unit { | |||||
| color: #FF2A2A; | |||||
| } | |||||
| .unit { | |||||
| font-size: 18rpx; | |||||
| } | |||||
| } | |||||
| .btns { | |||||
| margin-top: 16rpx; | |||||
| margin-bottom: 9rpx; | |||||
| text-align: right; | |||||
| font-size: 0; | |||||
| } | |||||
| } | |||||
| .btn { | |||||
| display: inline-block; | |||||
| width: auto; | |||||
| min-width: 145rpx; | |||||
| height: auto; | |||||
| padding: 14rpx 28rpx; | |||||
| box-sizing: border-box; | |||||
| border: none; | |||||
| border-radius: 29rpx; | |||||
| margin: 0; | |||||
| font-size: 22rpx; | |||||
| line-height: 1; | |||||
| color: #FFFFFF; | |||||
| background-image: linear-gradient(to right, #84A73F, #D8FF8F); | |||||
| & + & { | |||||
| margin-left: 39rpx; | |||||
| } | |||||
| &-plain { | |||||
| border: 2rpx solid #999999; | |||||
| color: #999999; | |||||
| background: none; | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 29
- 2
components/product/productCard.vue
View File
+ 8
- 3
pages.json
View File
+ 0
- 160
pages/index/order.vue
View File
+ 1
- 27
pages_order/order/createOrder.vue
View File
+ 210
- 0
pages_order/order/verifyOrder.vue
View File
| @ -0,0 +1,210 @@ | |||||
| <template> | |||||
| <view class="page"> | |||||
| <navbar title="核销详情" leftClick @leftClick="$utils.navigateBack" color="#fff" /> | |||||
| <view class="flex page-header"> | |||||
| <image class="icon" src="@/pages_order/static/verifyOrder/icon-clock.png" mode="widthFix"></image> | |||||
| <text>待核销</text> | |||||
| </view> | |||||
| <view class="page-content"> | |||||
| <!-- 商品详情 --> | |||||
| <productCard :data="productDetail" size="medium" :readonly="true"></productCard> | |||||
| <view class="card rights"> | |||||
| <view class="flex rights-item" v-for="item in orderDetail.rights" :key="item"> | |||||
| <image class="rights-icon" src="@/pages_order/static/verifyOrder/icon-checked.png" mode="widthFix"></image> | |||||
| <text>{{ item }}</text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="card info"> | |||||
| <view class="info-header">核销信息</view> | |||||
| <view class="flex flex-column info-content"> | |||||
| <image class="info-qr" :src="orderDetail.qrCodeImgUrl" mode="widthFix"></image> | |||||
| <view class="info-no">{{ `订单号：${orderDetail.orderNo}` }}</view> | |||||
| <view class="info-desc">{{ `有效时间：${orderDetail.startTime}至${orderDetail.endTime}` }}</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 下单 --> | |||||
| <view class="flex bar"> | |||||
| <button plain class="btn btn-plain" @click="onRefund">申请退款</button> | |||||
| <button plain class="btn" @click="onBuyAgain">再次购买</button> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import productCard from '@/components/product/productCard.vue' | |||||
| const TEMP_BANNER_IMG_URL = 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280' | |||||
| export default { | |||||
| components: { | |||||
| productCard, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| // todo: fetch | |||||
| productDetail: { | |||||
| id: '001', | |||||
| imgUrl: TEMP_BANNER_IMG_URL, | |||||
| price: 99, | |||||
| num: 1, | |||||
| sales: 235, | |||||
| title: '60分钟肩颈推拿按摩', | |||||
| desc: '疏通经络 放松肌肉', | |||||
| tags: ['专业技师', '舒适环境', '深度放松'], | |||||
| details: '<p>这里是商品详情..............<br/>这里是商品详情..............</p>' | |||||
| }, | |||||
| orderDetail: { | |||||
| id: '001', | |||||
| orderNo: 'da123567', | |||||
| qrCodeImgUrl: '../static/verifyOrder/temp-qrcode.png', | |||||
| startTime: '2025-03-14', | |||||
| endTime: '2025-04-14', | |||||
| rights: ['过期退', '随时退'] | |||||
| }, | |||||
| } | |||||
| }, | |||||
| onLoad(option) { | |||||
| const { id } = option | |||||
| // todo: fetch order data & product data by order id | |||||
| }, | |||||
| methods: { | |||||
| onRefund() { | |||||
| // todo | |||||
| }, | |||||
| onBuyAgain() { | |||||
| // todo: check | |||||
| this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.productDetail.id}`) | |||||
| }, | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| $bar-height: 132rpx; | |||||
| .page { | |||||
| background-color: #F5F5F5; | |||||
| /deep/ .nav-bar__view { | |||||
| background-image: linear-gradient(#84A73F, #D8FF8F); | |||||
| } | |||||
| &-header { | |||||
| color: #000000; | |||||
| font-size: 28rpx; | |||||
| margin-top: 24rpx; | |||||
| .icon { | |||||
| width: 30rpx; | |||||
| height: auto; | |||||
| margin-right: 17rpx; | |||||
| } | |||||
| } | |||||
| &-content { | |||||
| padding: 11rpx 13rpx; | |||||
| } | |||||
| } | |||||
| .rights { | |||||
| margin-top: 15rpx; | |||||
| padding: 23rpx 48rpx; | |||||
| color: #000000; | |||||
| font-size: 28rpx; | |||||
| &-item { | |||||
| margin-right: 70rpx; | |||||
| display: inline-flex; | |||||
| } | |||||
| &-icon { | |||||
| width: 30rpx; | |||||
| height: auto; | |||||
| margin-right: 12rpx; | |||||
| } | |||||
| } | |||||
| .info { | |||||
| margin-top: 19rpx; | |||||
| padding: 25rpx 41rpx 51rpx 41rpx; | |||||
| font-size: 28rpx; | |||||
| &-header { | |||||
| color: #000000; | |||||
| padding: 0 0 16rpx 7rpx; | |||||
| border-bottom: 1rpx dashed #C7C7C7; | |||||
| } | |||||
| &-qr { | |||||
| width: 279rpx; | |||||
| height: auto; | |||||
| margin-top: 57rpx; | |||||
| } | |||||
| &-no { | |||||
| color: #84A73F; | |||||
| margin-top: 16rpx; | |||||
| } | |||||
| &-desc { | |||||
| color: #999999; | |||||
| font-size: 22rpx; | |||||
| margin-top: 65rpx; | |||||
| } | |||||
| } | |||||
| .bar { | |||||
| position: fixed; | |||||
| bottom: 0; | |||||
| left: 0; | |||||
| width: 100vw; | |||||
| height: $bar-height; | |||||
| padding-bottom: env(safe-area-inset-bottom); | |||||
| background-color: $uni-fg-color; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| .btn { | |||||
| display: inline-block; | |||||
| width: auto; | |||||
| height: auto; | |||||
| padding: 24rpx 50rpx; | |||||
| box-sizing: border-box; | |||||
| border: none; | |||||
| border-radius: 44rpx; | |||||
| margin: 0; | |||||
| font-size: 28rpx; | |||||
| line-height: 1; | |||||
| color: #FFFFFF; | |||||
| background-image: linear-gradient(to right, #84A73F, #D8FF8F); | |||||
| & + & { | |||||
| margin-left: 39rpx; | |||||
| } | |||||
| &:last-child { | |||||
| margin-right: 54rpx; | |||||
| } | |||||
| &-plain { | |||||
| border: 2rpx solid #999999; | |||||
| color: #999999; | |||||
| background: none; | |||||
| } | |||||
| } | |||||
| </style> | |||||
BIN
pages_order/static/verifyOrder/icon-checked.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 867 B |
BIN
pages_order/static/verifyOrder/icon-clock.png
View File
| Before | After |
|---|---|
|
|
| Width: 31 | Height: 31 | Size: 1.3 KiB |
BIN
pages_order/static/verifyOrder/temp-qrcode.png
View File
| Before | After |
|---|---|
|
|
| Width: 279 | Height: 279 | Size: 28 KiB |