businessCard/cardPrint.vue

<template>
    <view>
        <uni-section :title="`${cardRuleName}(${cardTypeName})`" type="line">
            <uni-card padding="0" spacing="0">
                <uni-list>
                    <uni-list-item title="适应车场" :rightText="plName">
                        <text></text>
                    </uni-list-item>
                    <uni-list-item :title="`价格：¥${price}/张`" :rightText="`商户库存：${cardNum}张`"></uni-list-item>
                </uni-list>
            </uni-card>
        </uni-section>
        <view class="paddinglr30 bg-white" style="margin-top: 10px;padding-top: 10px;padding-bottom: 10px;">
            <text style="float: left;margin-right: 15px;line-height: 29px;">打印张数:</text>
            <uni-number-box @change="changeValue" min="1" :max="maxNum"/>
        </view>
        <view class="uni-padding-wrap uni-common-mt">
            <!--<button type="primary" style="margin-bottom: 15px">停止自动发放</button>-->
            <button type="warn">立即打印</button>
        </view>
    </view>
</template>
<script>
export default {
  data() {
    return {
      numberValue: 0,// 选择打印张数
      cardTypeName: '',// 卡类型名称
      cardRuleName: '',// 卡名称
      plName:'', // 停车场
      price:'', // 卡价格
      cardNum:'', // 库存
      maxNum:'', // 最多可打印
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    let option = JSON.parse(params.optionData)
    console.log(option)
    this.cardTypeName = option.cardTypeName
    this.cardRuleName = option.cardRuleName
    this.plName = option.plName
    this.price = option.value
    this.cardNum = option.cardNum
    this.maxNum = option.cardNum
  },
  onShow() {
    var me = this;
    // GetbillQueryInfo(carnum, orderId, parkCode, cardNo, couponType, disValue) {
  },
  computed: {
  },
  methods: {
    changeValue(value) {
      this.numberValue = value
    },
    actionsClick(text) {
      uni.showToast({
        title: text,
        icon: 'none'
      })
    },
  }
}
</script>
<style lang="scss" scoped>
    /deep/ .uni-section {
        padding-bottom: 10px;
    }
    .rechargeWrap {
        position: relative;
        .rechargeArrow {
            position: absolute;
            right: 10px;
            top: 30px;
            font-size: 20px;
            color: #999;
        }
    }
    .recordCon {
        padding-right: 35px;
        color: #999;
        display: flex;
        justify-content: space-between;
    }
    .container {
        overflow: hidden;
    }
    .custom-cover {
        flex: 1;
        flex-direction: row;
        position: relative;
    }
    .cover-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background-color: rgba($color: #000000, $alpha: 0.4);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 15px;
        font-size: 14px;
        color: #fff;
    }
    .card-actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 45px;
        border-top: 1px #eee solid;
    }
    .card-actions-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .card-actions-item-text {
        font-size: 12px;
        color: #666;
        margin-left: 5px;
    }
    .cover-image {
        flex: 1;
        height: 150px;
    }
    .no-border {
        border-width: 0;
    }
</style>