sellerOrderButton.vue 4.0 KB

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