orderButton.vue 4.9 KB

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