123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template name="button">
- <view class="button-template">
- <!-- 底部按钮 -->
- <view class="button-content">
- <view class="btn btn-pay" v-if="btnState.isPay" @click.stop="btnConfirm('pay',order)">付款</view>
- <view class="btn btn-pay" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm',order)">确认收货</view>
- <view class="btn btn-pay" v-if="btnState.isAgain" @click.stop="btnConfirm('again',order)">再次购买</view>
- <view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel',order)">取消订单</view>
- <view class="btn btn-cancel" v-if="btnState.isDelete" @click.stop="btnConfirm('delete',order)">删除订单</view>
- <view class="btn btn-cancel" v-if="btnState.isQuery && order.secondHandOrderFlag!=1" @click.stop="btnConfirm('query',order)">查看物流</view>
- </view>
- </view>
- </template>
- <script>
- export default{
- name:"button",
- props:{
- status: {
- type:Number
- },
- order: {
- type:Object
- },
- },
- data() {
- return{
- isShare:true,
- shareCode:'',
- btnState:this.initStatus(),
- mapStateArr:[
- {label:'isQuery',val:[4,5,12,13,33,22,23,32,77],status: true},
- {label:'isDelete',val:[6],status: true},
- {label:'isCancel',val:[0,111],status: true},
- {label:'isConfirm',val:[33],status: true},
- {label:'isAgain',val:[33],status: true},
- {label:'isPay',val:[11,12,13,21,22,23,111],status: true},
- ]
- }
- },
- created(){
- this.initData(this.status)
- },
- computed: {
- },
- watch:{
- status:{
- handler:function(val){
- this.initData(val)
- },
- deep:true//对象内部的属性监听,也叫深度监听
- }
- },
- methods:{
- initData(resVal) {
- /**
- * @分享按钮统一显示
- * @按钮根据状态显示
- * @(4、5、7、12、22、23、32)显示[查看物流]按钮,其他隐藏
- * @(6)显示[删除订单],其他隐藏
- * @(0、111)显示[取消订单],其他隐藏
- * @(21,31)只显示分享
- * @(13,33)显示[确认收货]和[查看物流]
- */
- this.btnState = this.initStatus()
- this.mapStateArr.forEach(el => {
- el.val.forEach(value => {
- if(resVal === value){
- this.btnState[el.label] = el.status
- }
- })
- })
- },
- initStatus(){
- let btnState= {
- isQuery: false,
- isDelete: false,
- isCancel: false,
- isConfirm: false,
- isAgain: false,
- }
- return btnState
- },
- getShareCode(code){
- this.shareCode = code
- },
- btnConfirm(type,order){
- let data = {
- type:type,
- orderId:order.orderId,
- order:order
- }
- this.$emit('buttonConfirm',data)
- }
- }
- }
- </script>
- <style lang="scss">
- .button-template{
- width: 100%;
- height: auto;
- float: left;
- background: #FFFFFF;
- .button-content{
- height: auto;
- float: right;
- position: relative;
- .share-code{
- width: 200rpx;
- height: 64rpx;
- line-height: 64rpx;
- color: #2A45FF;
- text-align: left;
- position: absolute;
- font-size: $font-size-28;
- font-weight: bold;
- left: 24rpx;
- top: 24rpx;
- }
- .btn{
- width: 160rpx;
- height: 64rpx;
- margin: 22rpx 0 20rpx 20rpx;
- line-height: 64rpx;
- font-size:$font-size-26;
- color: #333333;
- text-align: center;
- float: right;
- border-radius: 34rpx;
- border: 2rpx solid #333333;
- &.btn-pay{
- border-color: $color-system;
- color: $color-system;
- }
- &.btn-cancel{
- text-align: center;
- }
- }
- }
- }
- </style>
|