|
@@ -1,244 +0,0 @@
|
|
|
-<template name="button">
|
|
|
- <view class="button-template">
|
|
|
- <!-- 底部按钮 -->
|
|
|
- <view class="button-content">
|
|
|
- <view class="btn btn-payment" v-if="order.affirmPaymentFlag == 10" @click.stop="btnConfirm('payment',order)">确认打款<text>供应商</text></view>
|
|
|
- <view class="btn btn-pay" v-if="btnState.isPay" @click.stop="btnConfirm('pay',order)">付款</view>
|
|
|
- <view class="btn btn-confirm" v-if="btnState.isConfirmation" @click.stop="btnConfirm('confirmation',order)">确认订单</view>
|
|
|
- <view class="btn btn-share" @click.stop="onShareCode(order.orderId)">分享订单</view>
|
|
|
- <view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel',order)">取消订单</view>
|
|
|
- <!-- <view class="btn btn-delete" v-if="btnState.isDelete" @click.stop="btnConfirm('delete',order)">删除订单</view> -->
|
|
|
- <view class="btn btn-query" v-if="btnState.isQuery && order.secondHandOrderFlag!=1" @click.stop="btnConfirm('query',order)">查看物流</view>
|
|
|
- <view class="btn btn-firm" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm',order)">
|
|
|
- 确认收货
|
|
|
- <view class="tips">采美豆<text class="line"></text></view>
|
|
|
- </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:'isConfirmation',val:[0],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,
|
|
|
- isShare: true,
|
|
|
- isConfirmation:false,
|
|
|
- }
|
|
|
- return btnState
|
|
|
- },
|
|
|
- getShareCode(code){
|
|
|
- this.shareCode = code
|
|
|
- },
|
|
|
- onShareCode(orderId){
|
|
|
- this.$parent.isShareModal = true
|
|
|
- this.$parent.btnoRderID = orderId
|
|
|
- this.$emit('shareConfirm')
|
|
|
- },
|
|
|
- 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: 150rpx;
|
|
|
- height: 64rpx;
|
|
|
- margin: 22rpx 0 20rpx 20rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- font-size:$font-size-26;
|
|
|
- color: #999999;
|
|
|
- text-align: center;
|
|
|
- float: right;
|
|
|
- border-radius: 34rpx;
|
|
|
- border: 2rpx solid #999999;
|
|
|
- &.btn-payment{
|
|
|
- line-height: 38rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- background: #f9a94b;
|
|
|
- color: #fff;
|
|
|
- border: 2rpx solid #f9a94b;
|
|
|
- text{
|
|
|
- display: block;
|
|
|
- line-height: 15rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-color{
|
|
|
- background: $btn-confirm;
|
|
|
- // margin: 22rpx 0 22rpx 22rpx;
|
|
|
- }
|
|
|
- .btn-cancel{
|
|
|
- // background:#FFFFFF;
|
|
|
- // color: #999999;
|
|
|
- // float: left;
|
|
|
- // margin: 22rpx 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- // .btn-delete{
|
|
|
- // background:linear-gradient(315deg,rgba(255,163,3,1) 0%,rgba(255,53,1,1) 100%);
|
|
|
- // }
|
|
|
- // .btn-query{
|
|
|
- // background:linear-gradient(135deg,rgba(255,212,129,1) 0%,rgba(198,129,0,1) 100%);
|
|
|
- // }
|
|
|
- .btn-confirm{
|
|
|
- background:#ff7a51;
|
|
|
- border-color:#ff7a51;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .btn-pay{
|
|
|
- background:#f94b4b;
|
|
|
- color: #FFFFFF;
|
|
|
- border: 2rpx solid #f94b4b;
|
|
|
- }
|
|
|
- .btn-firm{
|
|
|
- position:relative;
|
|
|
- .tips{
|
|
|
- width: 74rpx;
|
|
|
- height: 32rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- padding: 0 7rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- background-color: #ffe6dc;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-20;
|
|
|
- position:absolute;
|
|
|
- right: 0;
|
|
|
- top: -40rpx;
|
|
|
- z-index: 90;
|
|
|
- .line{
|
|
|
- display: block;
|
|
|
- width: 20rpx;
|
|
|
- height: 20rpx;
|
|
|
- background-color: #ffe6dc;
|
|
|
- position: relative;
|
|
|
- bottom: 18rpx;
|
|
|
- left: 15rpx;
|
|
|
- z-index: -1;
|
|
|
- transform:rotate(45deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-share{
|
|
|
- // background:linear-gradient(315deg,rgba(0,212,150,1) 0%,rgba(126,243,174,1) 100%);
|
|
|
- position: relative;
|
|
|
- .tips{
|
|
|
- width: 160rpx;
|
|
|
- height: 34rpx;
|
|
|
- padding: 10rpx 10rpx;
|
|
|
- background:linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(87,87,87,1) 100%);
|
|
|
- box-shadow:0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
|
- border-radius: 8rpx;
|
|
|
- position: absolute;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 34rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: left;
|
|
|
- right: 0;
|
|
|
- top: -65rpx;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- width: 25rpx;
|
|
|
- height: 25rpx;
|
|
|
- background:linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(87,87,87,1) 100%);
|
|
|
- position: absolute;
|
|
|
- bottom: -8rpx;
|
|
|
- right: 30rpx;
|
|
|
- z-index: -1;
|
|
|
- transform:rotate(45deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|