orderButton.vue 5.5 KB

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