jsm-mall-h5-front/src/packageHome/pages/addvalue/check.vue

<template>
  <zj-page-layout>
    <view class="top-container">
      <view class="input">
        <u-input placeholder="请输入条码" v-model="code">
          <template slot="suffix">
            <u-icon @click="scanCode" name="scan" size="30"></u-icon>
          </template>
        </u-input>
      </view>
      <u-button type="primary" @tap="getDetail" text="查询"></u-button>
    </view>

    <view class="all-container" v-for="(item, index) in dataList" :key="index">
      <view class="info-container card">
        <view class="common-title">延保信息</view>
        <view>
          <view class="row">
            <view class="label">订单单号</view>
            <view class="value">{{ item.id }}</view>
          </view>
          <view class="row">
            <view class="label">服务类型</view>
            <view class="value">延保</view>
          </view>
          <view class="row">
            <view class="label">产品品牌</view>
            <view class="value">{{ item.brandName }}</view>
          </view>
          <view class="row">
            <view class="label">产品大类</view>
            <view class="value">{{ item.mainName }}</view>
          </view>
          <view class="row">
            <view class="label">服务内容</view>
            <view class="value">{{ item.increContent }}</view>
          </view>
          <view class="row">
            <view class="label">使用限值</view>
            <view class="value">{{ item.limitNum + '年' }}</view>
          </view>
          <view class="row">
            <view class="label">下单时间</view>
            <view class="value">{{ item.createTime }}</view>
          </view>
          <view class="row">
            <view class="label">销售网点</view>
            <view class="value">{{ item.websitName }}</view>
          </view>
        </view>
      </view>

      <view class="info-container card">
        <view class="common-title">产品信息</view>
        <view>
          <view class="row">
            <view class="label">内机条码</view>
            <view class="value">{{ item.insideCode }}</view>
          </view>
          <view class="row">
            <view class="label">原保到期</view>
            <view class="value">{{ item.insureTime.substring(0, 10) }}</view>
          </view>
          <view class="row">
            <view class="label">服务期限</view>
            <view class="value">{{
              item.insureTime.substring(0, 10) + '至' + item.serviceEndTime.substring(0, 10)
            }}</view>
          </view>
        </view>
        <view class="imgs">
          <view class="it">
            <image :src="item.insideCodeImg" mode="aspectFill"></image>
            <view class="text">内机条码</view>
          </view>
          <view class="it">
            <image :src="item.machineImg" mode="aspectFill"></image>
            <view class="text">机器铭牌（含出厂日期）</view>
          </view>
          <view class="it">
            <image :src="item.buyCertImg" mode="aspectFill"></image>
            <view class="text">购机凭证</view>
          </view>
        </view>
      </view>

      <view class="user-container card">
        <view class="common-title">客户信息</view>
        <view class="user">{{ item.userName }} {{ item.userMobile }}</view>
        <view class="address">{{ item.userAddress }}</view>
      </view>
    </view>
  </zj-page-layout>
</template>

<script>
import { wxScanCode } from '@/common/utils/util.js'

export default {
  data() {
    return {
      dataList: [],
      code: ''
    }
  },

  onLoad() {
    // this.getDetail();
  },

  computed: {
    deadline() {
      return function (time, num) {
        let date = new Date(time)
        date.setFullYear(date.getFullYear() + num)
        let y = date.getFullYear(),
          m = date.getMonth() + 1,
          d = date.getDate()
        return `${y}-${m > 9 ? m : '0' + m}-${d > 9 ? d : '0' + d}`
      }
    }
  },

  methods: {
    getDetail() {
      if (!this.code) {
        return this.$toast('请先输入或扫描条码！')
      }
      this.$api
        .post('/increConfig/listIncreCode', {
          pageNum: 1,
          pageSize: 10,
          code: this.code,
          payStatus: 'PAID'
        })
        .then(res => {
          if (res.data.records.length == 0) {
            this.$toast('暂未查询到该条码的延保信息')
          }
          this.dataList = res.data.records
        })
    },

    // 扫码
    async scanCode() {
      var codeVal = await wxScanCode(['barCode'])
      this.code = codeVal
      this.getDetail()
    },

    // 下拉刷新
    refresherrefresh() {},

    // 触底加载
    scrolltolower() {}
  }
}
</script>

<style lang="scss" scoped>
.top-container {
  padding: 30rpx 30rpx 0;
  ::v-deep .u-input {
    background: #ffffff;
    height: 80rpx;
  }
  ::v-deep .u-button {
    margin-top: 20rpx;
  }
}
.card {
  @include zj-card;
  padding: 30rpx;
  margin-top: 30rpx;
}
.common-title {
  font-weight: 500;
}
.all-container {
  padding: 0 30rpx 30rpx;
}
.info-container {
  .row {
    display: flex;
    margin-top: 20rpx;
    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .value {
      font-size: 28rpx;
    }
    .ctrl {
      font-size: 28rpx;
      color: $theme-color;
      margin-left: 20rpx;
    }
  }
  .imgs {
    display: flex;
    margin-top: 20rpx;
    .it {
      width: 180rpx;
      margin-right: 30rpx;
      image {
        width: 180rpx;
        height: 180rpx;
      }
      .text {
        font-size: 24rpx;
        text-align: center;
      }
    }
  }
}
.user-container {
  .user {
    font-size: 28rpx;
    margin-top: 20rpx;
  }
  .address {
    font-size: 28rpx;
    margin-top: 20rpx;
  }
}
</style>