sellerDetaileButton.vue 5.0 KB

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