cm-list-button.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template name="button">
  2. <view class="button-template">
  3. <!-- 底部按钮 -->
  4. <view class="button-content">
  5. <view
  6. class="btn btn-cancel"
  7. v-if="secondHandOrderFlag != 1 && !rechargeGoods"
  8. @click.stop="btnConfirm('again', shopOrderId)"
  9. >再来一单</view
  10. >
  11. <view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel', shopOrderId)"
  12. >取消订单</view
  13. >
  14. <!-- <view class="btn btn-cancel" v-if="btnState.isDelete" @click.stop="btnConfirm('delete',orderId)">删除订单</view> -->
  15. <template>
  16. <view class="btn btn-cancel" v-if="btnState.isPay" @click.stop="onShareCode(shopOrderId, userId, 1)"
  17. >分享支付</view
  18. >
  19. <view class="btn btn-cancel" v-else @click.stop="onShareCode(shopOrderId, userId, 2)">分享订单</view>
  20. </template>
  21. <view
  22. class="btn btn-query"
  23. v-if="btnState.isQuery && order.secondHandOrderFlag != 1"
  24. @click.stop="btnConfirm('query', shopOrderId)"
  25. >查看物流</view
  26. >
  27. <!-- <view class="btn btn-color" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm', shopOrderId)"
  28. >确认订单</view
  29. > -->
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. name: 'button',
  36. props: {
  37. status: {
  38. type: Number
  39. },
  40. order: {
  41. type: Object
  42. },
  43. shopOrderId: {
  44. type: Number
  45. },
  46. userId: {
  47. type: Number
  48. },
  49. rechargeGoods: {
  50. type: Boolean
  51. },
  52. serviceProviderId: {
  53. type: Number
  54. },
  55. secondHandOrderFlag: {
  56. type: String
  57. }
  58. },
  59. data() {
  60. return {
  61. isShare: true,
  62. shareCode: '',
  63. btnState: this.initStatus(),
  64. mapStateArr: [
  65. { label: 'isQuery', val: [2, 3, 5, 6, 12, 13, 22, 23, 32, 33], status: true },
  66. { label: 'isDelete', val: [4], status: true },
  67. { label: 'isCancel', val: [0, 11], status: true },
  68. { label: 'isConfirm', val: [0], status: true },
  69. { label: 'isPay', val: [11, 12, 13, 21, 22, 23], status: true }
  70. ]
  71. }
  72. },
  73. created() {
  74. this.initData(this.status)
  75. },
  76. computed: {},
  77. watch: {
  78. status: {
  79. handler: function(val) {
  80. this.initData(val)
  81. },
  82. deep: true //对象内部的属性监听,也叫深度监听
  83. }
  84. },
  85. methods: {
  86. initData(resVal) {
  87. /**
  88. * @分享按钮统一显示
  89. * @按钮根据状态显示
  90. * @(4、5、7、12、22、23、32)显示[查看物流]按钮,其他隐藏
  91. * @(6)显示[删除订单],其他隐藏
  92. * @(0、111)显示[取消订单],其他隐藏
  93. * @(21,31)只显示分享
  94. * @(13,33)显示[确认收货]和[查看物流]
  95. */
  96. this.btnState = this.initStatus()
  97. this.mapStateArr.forEach(el => {
  98. el.val.forEach(value => {
  99. if (resVal === value) {
  100. this.btnState[el.label] = el.status
  101. }
  102. })
  103. })
  104. },
  105. initStatus() {
  106. let btnState = {
  107. isDelete: false,
  108. isCancel: false,
  109. isConfirm: false,
  110. isShare: true
  111. }
  112. return btnState
  113. },
  114. getShareCode(code) {
  115. this.shareCode = code
  116. },
  117. onShareCode(shopOrderId, userId, type) {
  118. if (this.order.onlinePay === 2) {
  119. this.$util.modal(
  120. '提示',
  121. '本订单不能进行线上支付,请让客户选择线下转账方式付款',
  122. '继续分享',
  123. '知道了',
  124. true,
  125. () => {
  126. this.$parent.isShareModal = true
  127. ;(this.$parent.handleShopOrderId = shopOrderId), (this.$parent.btnClubUserId = userId)
  128. this.$parent.isShareType = type
  129. this.$emit('shareConfirm')
  130. }
  131. )
  132. } else {
  133. this.$parent.isShareModal = true
  134. ;(this.$parent.handleShopOrderId = shopOrderId), (this.$parent.btnClubUserId = userId)
  135. this.$parent.isShareType = type
  136. this.$emit('shareConfirm')
  137. }
  138. },
  139. btnConfirm(type, shopOrderId) {
  140. let data = {
  141. type: type,
  142. shopOrderId: shopOrderId
  143. }
  144. this.$emit('buttonConfirm', data)
  145. }
  146. }
  147. }
  148. </script>
  149. <style lang="scss">
  150. .button-template {
  151. width: 100%;
  152. height: auto;
  153. float: left;
  154. background: #ffffff;
  155. .button-content {
  156. height: auto;
  157. float: right;
  158. position: relative;
  159. margin: 20rpx 0;
  160. .share-code {
  161. width: 200rpx;
  162. height: 64rpx;
  163. line-height: 64rpx;
  164. color: #2a45ff;
  165. text-align: left;
  166. position: absolute;
  167. font-size: $font-size-28;
  168. font-weight: bold;
  169. left: 24rpx;
  170. top: 24rpx;
  171. }
  172. .btn {
  173. width: 160rpx;
  174. height: 64rpx;
  175. line-height: 64rpx;
  176. font-size: $font-size-26;
  177. color: #ffffff;
  178. text-align: center;
  179. border-radius: 34rpx;
  180. // float: right;
  181. display: inline-block;
  182. }
  183. .btn-color {
  184. background: $btn-confirm;
  185. // margin: 22rpx 0 22rpx 22rpx;
  186. }
  187. .btn-cancel {
  188. border: 2rpx solid #999999;
  189. background: #ffffff;
  190. color: #666666;
  191. // float: left;
  192. margin-right: 15rpx;
  193. }
  194. .btn-delete {
  195. background: linear-gradient(315deg, rgba(255, 163, 3, 1) 0%, rgba(255, 53, 1, 1) 100%);
  196. }
  197. .btn-query {
  198. background: linear-gradient(135deg, rgba(255, 212, 129, 1) 0%, rgba(198, 129, 0, 1) 100%);
  199. }
  200. .btn-confirm {
  201. background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
  202. }
  203. .btn-share {
  204. background: linear-gradient(315deg, rgba(0, 212, 150, 1) 0%, rgba(126, 243, 174, 1) 100%);
  205. margin-right: 0;
  206. position: relative;
  207. .tips {
  208. width: 160rpx;
  209. height: 34rpx;
  210. padding: 10rpx 10rpx;
  211. background: #ff5b00;
  212. border-radius: 8rpx;
  213. position: absolute;
  214. color: #ffffff;
  215. line-height: 34rpx;
  216. font-size: $font-size-24;
  217. text-align: left;
  218. right: 0;
  219. top: -65rpx;
  220. &:before {
  221. content: '';
  222. width: 25rpx;
  223. height: 25rpx;
  224. background: #ff5b00;
  225. position: absolute;
  226. bottom: -8rpx;
  227. left: 30rpx;
  228. z-index: -1;
  229. transform: rotate(45deg);
  230. }
  231. }
  232. }
  233. }
  234. }
  235. </style>