orderListButton.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template name="button">
  2. <view class="button-template">
  3. <!-- 底部按钮 -->
  4. <view class="button-content">
  5. <view class="btn btn-pay" v-if="btnState.isPay" @click.stop="btnConfirm('pay',order)">付款</view>
  6. <view class="btn btn-share" @click.stop="onShareCode(order.orderID)">分享订单</view>
  7. <view class="btn btn-confirm" v-if="btnState.isConfirmation" @click.stop="btnConfirm('confirmation',order)">确认订单</view>
  8. <view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel',order)">取消订单</view>
  9. <view class="btn btn-delete" v-if="btnState.isDelete" @click.stop="btnConfirm('delete',order)">删除订单</view>
  10. <view class="btn btn-query" v-if="btnState.isQuery" @click.stop="btnConfirm('query',order)">查看物流</view>
  11. <view class="btn " v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm',order)">确认收货</view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default{
  17. name:"button",
  18. props:{
  19. status: {
  20. type:Number
  21. },
  22. order: {
  23. type:Object
  24. },
  25. },
  26. data() {
  27. return{
  28. isShare:true,
  29. shareCode:'',
  30. btnState:this.initStatus(),
  31. mapStateArr:[
  32. {label:'isQuery',val:[4,5,12,13,33,22,23,32,77],status: true},
  33. {label:'isDelete',val:[6],status: true},
  34. {label:'isCancel',val:[0,111],status: true},
  35. {label:'isConfirm',val:[33],status: true},
  36. {label:'isConfirmation',val:[0],status: true},
  37. {label:'isPay',val:[11,12,13,21,22,23,111],status: true},
  38. ]
  39. }
  40. },
  41. created(){
  42. this.initData(this.status)
  43. },
  44. computed: {
  45. },
  46. watch:{
  47. status:{
  48. handler:function(val){
  49. this.initData(val)
  50. },
  51. deep:true//对象内部的属性监听,也叫深度监听
  52. }
  53. },
  54. methods:{
  55. initData(resVal) {
  56. /**
  57. * @分享按钮统一显示
  58. * @按钮根据状态显示
  59. * @(4、5、7、12、22、23、32)显示[查看物流]按钮,其他隐藏
  60. * @(6)显示[删除订单],其他隐藏
  61. * @(0、111)显示[取消订单],其他隐藏
  62. * @(21,31)只显示分享
  63. * @(13,33)显示[确认收货]和[查看物流]
  64. */
  65. this.btnState = this.initStatus()
  66. this.mapStateArr.forEach(el => {
  67. el.val.forEach(value => {
  68. if(resVal === value){
  69. this.btnState[el.label] = el.status
  70. }
  71. })
  72. })
  73. },
  74. initStatus(){
  75. let btnState= {
  76. isQuery: false,
  77. isDelete: false,
  78. isCancel: false,
  79. isConfirm: false,
  80. isShare: true,
  81. isConfirmation:false,
  82. }
  83. return btnState
  84. },
  85. getShareCode(code){
  86. this.shareCode = code
  87. },
  88. onShareCode(orderId){
  89. this.$parent.isShareModal = true
  90. this.$parent.btnoRderID = orderId
  91. this.$emit('shareConfirm')
  92. },
  93. btnConfirm(type,order){
  94. let data = {
  95. type:type,
  96. orderId:order.orderID,
  97. order:order
  98. }
  99. this.$emit('buttonConfirm',data)
  100. }
  101. }
  102. }
  103. </script>
  104. <style lang="scss">
  105. .button-template{
  106. width: 100%;
  107. height: auto;
  108. float: left;
  109. background: #FFFFFF;
  110. .button-content{
  111. width: 702rpx;
  112. height: auto;
  113. float: left;
  114. position: relative;
  115. .share-code{
  116. width: 200rpx;
  117. height: 64rpx;
  118. line-height: 64rpx;
  119. color: #2A45FF;
  120. text-align: left;
  121. position: absolute;
  122. font-size: $font-size-28;
  123. font-weight: bold;
  124. left: 24rpx;
  125. top: 24rpx;
  126. }
  127. .btn{
  128. width: 160rpx;
  129. height: 64rpx;
  130. margin:22rpx;
  131. line-height: 64rpx;
  132. font-size:$font-size-26;
  133. color: #999999;
  134. text-align: center;
  135. border-radius:6rpx;
  136. float: right;
  137. border-radius: 32rpx;
  138. border: 2rpx solid #999999;
  139. }
  140. .btn-color{
  141. background: $btn-confirm;
  142. margin: 22rpx 0 22rpx 22rpx;
  143. }
  144. .btn-cancel{
  145. // background:#FFFFFF;
  146. // color: #999999;
  147. // float: left;
  148. margin: 22rpx 0;
  149. text-align: center;
  150. }
  151. // .btn-delete{
  152. // background:linear-gradient(315deg,rgba(255,163,3,1) 0%,rgba(255,53,1,1) 100%);
  153. // }
  154. // .btn-query{
  155. // background:linear-gradient(135deg,rgba(255,212,129,1) 0%,rgba(198,129,0,1) 100%);
  156. // }
  157. .btn-confirm{
  158. background:#ff7a51;
  159. border: 2rpx solid #ff7a51;
  160. color: #FFFFFF;
  161. }
  162. .btn-pay{
  163. background:#f94b4b;
  164. margin-right: 0;
  165. color: #FFFFFF;
  166. border: 2rpx solid #f94b4b;
  167. }
  168. .btn-share{
  169. // background:linear-gradient(315deg,rgba(0,212,150,1) 0%,rgba(126,243,174,1) 100%);
  170. position: relative;
  171. .tips{
  172. width: 160rpx;
  173. height: 34rpx;
  174. padding: 10rpx 10rpx;
  175. background:linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(87,87,87,1) 100%);
  176. box-shadow:0px 2px 4px 0px rgba(0,0,0,0.2);
  177. border-radius: 8rpx;
  178. position: absolute;
  179. color: #FFFFFF;
  180. line-height: 34rpx;
  181. font-size: $font-size-24;
  182. text-align: left;
  183. right: 0;
  184. top: -65rpx;
  185. &:before{
  186. content: "";
  187. width: 25rpx;
  188. height: 25rpx;
  189. background:linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(87,87,87,1) 100%);
  190. position: absolute;
  191. bottom: -8rpx;
  192. right: 30rpx;
  193. z-index: -1;
  194. transform:rotate(45deg);
  195. }
  196. }
  197. }
  198. }
  199. }
  200. </style>