推拿小程序前端代码仓库
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.

288 lines
5.8 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title="订单" leftClick @leftClick="$utils.navigateBack" color="#fff" />
  5. <!-- 订单筛选 -->
  6. <view class="tabs">
  7. <uv-tabs :list="tabs"
  8. :customStyle="{
  9. backgroundColor: '#FFFFFF',
  10. }"
  11. :activeStyle="{
  12. color: '#84A73F',
  13. fontSize: '28rpx',
  14. whiteSpace: 'nowrap',
  15. paddingTop: '29rpx',
  16. paddingBottom: '21rpx',
  17. }"
  18. :inactiveStyle="{
  19. color: '#000000',
  20. fontSize: '28rpx',
  21. whiteSpace: 'nowrap',
  22. paddingTop: '29rpx',
  23. paddingBottom: '21rpx',
  24. }"
  25. lineHeight="8rpx"
  26. lineWidth="92rpx"
  27. lineColor="linear-gradient(to right, #84A73F, #D8FF8F)"
  28. :scrollable="false"
  29. :current="current"
  30. @click="clickTabs"></uv-tabs>
  31. </view>
  32. <view class="list">
  33. <orderCard v-for="item in list" :data="item" :key="item.id"></orderCard>
  34. <!-- todo: delete -->
  35. <orderCard></orderCard>
  36. </view>
  37. <template v-if="false">
  38. <view class="list">
  39. <view class="item" v-for="(item, index) in list" @click="toOrderDetail(item.id)" :key="index">
  40. <view class="content" :key="index" v-for="(good, index) in item.commonOrderSkuList">
  41. <view class="top">
  42. <view class="service">
  43. {{ good.title }}
  44. </view>
  45. <view class="status">
  46. <text> {{ tabs[Number(item.state) + 1].name }}</text>
  47. </view>
  48. </view>
  49. <view class="main">
  50. <view class="left">
  51. <image mode="aspectFill" :src="good.image && good.image.split(',')[0]"></image>
  52. </view>
  53. <view class="right">
  54. <view class="text-hidden-1">
  55. 客户姓名{{item.name}}
  56. </view>
  57. <view class="text-hidden-1">
  58. 下单时间{{item.createTime}}
  59. </view>
  60. <view class="text-hidden-1">
  61. 联系电话{{item.phone}}
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. <view class="bottom">
  67. <view class="price">
  68. <text class="total-title">总价格</text>
  69. <text class="unit"></text>
  70. <text class="num">{{item.price}}</text>
  71. <text class="c-unit"></text>
  72. </view>
  73. <view @click.stop="toPayOrder(item)" class="btn" v-if="item.state == 0">
  74. 立即付款
  75. </view>
  76. <view @click.stop="cancelOrder(item)" class="btn" v-if="item.state == 0">
  77. 取消订单
  78. </view>
  79. <view class="btn" @click.stop="confirmOrder(item)" v-if="item.state == 2">
  80. 确认收货
  81. </view>
  82. <view @click.stop="$refs.customerServicePopup.open()" class="btn" v-if="item.state > 0">
  83. 联系客服
  84. </view>
  85. </view>
  86. </view>
  87. <view style="
  88. margin-top: 20rpx;
  89. min-width: 700rpx;">
  90. <uv-empty mode="list" v-if="list.length == 0"></uv-empty>
  91. </view>
  92. </view>
  93. </template>
  94. <customerServicePopup ref="customerServicePopup" />
  95. <tabber select="order" />
  96. </view>
  97. </template>
  98. <script>
  99. import orderCard from '@/components/order/orderCard.vue'
  100. import {
  101. mapGetters
  102. } from 'vuex'
  103. import mixinsList from '@/mixins/list.js'
  104. import mixinsOrder from '@/mixins/order.js'
  105. import tabber from '@/components/base/tabbar.vue'
  106. import customerServicePopup from '@/components/config/customerServicePopup.vue'
  107. export default {
  108. mixins: [mixinsList, mixinsOrder],
  109. components: {
  110. orderCard,
  111. tabber,
  112. customerServicePopup,
  113. },
  114. computed: {},
  115. data() {
  116. return {
  117. tabs: [{
  118. name: '全部订单'
  119. },
  120. {
  121. name: '待付款'
  122. },
  123. {
  124. name: '待核销'
  125. },
  126. {
  127. name: '已完成'
  128. },
  129. {
  130. name: '已取消'
  131. },
  132. ],
  133. current: 0,
  134. mixinsListApi: 'getOrderPageList',
  135. }
  136. },
  137. onLoad(args) {
  138. this.current = args.type || 0
  139. this.clickTabs({
  140. index: this.current
  141. })
  142. },
  143. methods: {
  144. //点击tab栏
  145. clickTabs({
  146. index
  147. }) {
  148. if (index == 0) {
  149. delete this.queryParams.state
  150. } else {
  151. this.queryParams.state = index - 1
  152. }
  153. this.getData()
  154. },
  155. //跳转订单详情页面
  156. toOrderDetail(id) {
  157. uni.navigateTo({
  158. url: '/pages_order/order/orderDetail?id=' + id
  159. })
  160. },
  161. }
  162. }
  163. </script>
  164. <style scoped lang="scss">
  165. .page {
  166. background-color: #F5F5F5;
  167. /deep/ .nav-bar__view {
  168. background-image: linear-gradient(#84A73F, #D8FF8F);
  169. }
  170. }
  171. .tabs {
  172. /deep/ .uv-tabs__wrapper__nav__line {
  173. bottom: 0;
  174. }
  175. }
  176. .list {
  177. padding: 16rpx 17rpx;
  178. }
  179. .list {
  180. .item {
  181. width: calc(100% - 40rpx);
  182. background-color: #fff;
  183. margin: 20rpx;
  184. box-sizing: border-box;
  185. border-radius: 16rpx;
  186. padding: 30rpx;
  187. .content {
  188. .top {
  189. display: flex;
  190. justify-content: space-between;
  191. align-items: center;
  192. font-size: 34rpx;
  193. .status {
  194. font-weight: 600;
  195. color: #FFAC2F;
  196. flex-shrink: 0;
  197. margin-left: 20rpx;
  198. }
  199. }
  200. .main {
  201. display: flex;
  202. margin: 20rpx 0rpx;
  203. .left {
  204. display: flex;
  205. align-items: center;
  206. justify-content: center;
  207. width: 180rpx;
  208. height: 180rpx;
  209. image {
  210. width: 95%;
  211. height: 95%;
  212. border-radius: 10rpx;
  213. }
  214. }
  215. .right {
  216. display: flex;
  217. flex-direction: column;
  218. justify-content: space-between;
  219. width: calc(100% - 200rpx);
  220. color: #777;
  221. font-size: 26rpx;
  222. padding: 30rpx 20rpx;
  223. box-sizing: border-box;
  224. margin-left: 20rpx;
  225. border-radius: 10rpx;
  226. background-color: #F8F8F8;
  227. }
  228. }
  229. }
  230. .bottom {
  231. display: flex;
  232. justify-content: space-between;
  233. font-size: 25rpx;
  234. .price {
  235. .total-title {}
  236. .num {
  237. font-size: 36rpx;
  238. }
  239. .num,
  240. .unit,
  241. .c-unit {
  242. color: $uni-color;
  243. }
  244. }
  245. .btn {
  246. border: 1px solid #C7C7C7;
  247. padding: 10rpx 20rpx;
  248. border-radius: 40rpx;
  249. color: #575757;
  250. }
  251. }
  252. }
  253. }
  254. </style>