sellerOrderButton.vue 4.4 KB

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