cm-details-button.vue 5.3 KB

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