template-parking-h5/src/crmPages/parkingReceipt/parkingChangeHeader.vue

<template>
  <scroll-view class="scroll-Y" scroll-y>
    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>

    <view class="part top">
      <view class="invoice-header">
        <view class="part-item header-type lines">
          <text class="part-item-key">抬头类型</text>
          <radio-group class="part-item-value" @change="radioChange">
            <label v-for="(item, index) in items" :key="item.value">
              <radio
                style="transform: scale(0.7)"
                color="#ED1C24"
                :value="item.value"
                :checked="index === condition.invoiceTitleType"
              />
              {{ item.name }}
            </label>
          </radio-group>
        </view>
        <view class="part-item lines">
          <text class="part-item-key">抬头名称</text>
          <view class="part-item-value">
            <input
              type="text"
              placeholder="请输入抬头名称"
              v-model="condition.invoiceTitleName"
            />
          </view>
        </view>
        <view class="part-item lines" v-if="isCompany">
          <text class="part-item-key">公司税号</text>
          <view class="part-item-value">
            <input
              type="text"
              placeholder="请输入公司税号"
              v-model="condition.corporationTax"
            />
          </view>
        </view>
        <view class="part-item lines">
          <text class="part-item-key">设为默认</text>
          <view class="part-item-value">
            <switch
              color="#8CC63F"
              :checked="isDefault"
              @change="switch1Change"
            />
          </view>
        </view>
      </view>
      <view class="invoice-more" v-if="isCompany">
        <view class="tab-title">更多信息(以下为选填内容)</view>
        <view class="part-item lines">
          <text class="part-item-key">公司地址</text>
          <view class="part-item-value">
            <input
              type="text"
              placeholder="请输入公司地址"
              v-model="condition.companyAddress"
            />
          </view>
        </view>
        <view class="part-item lines">
          <text class="part-item-key">公司电话</text>
          <view class="part-item-value">
            <input
              type="text"
              placeholder="请输入公司电话"
              v-model="condition.companyTel"
            />
          </view>
        </view>
        <view class="part-item lines">
          <text class="part-item-key">开户银行</text>
          <view class="part-item-value">
            <input
              type="text"
              placeholder="请输入开户银行"
              v-model="condition.depositBank"
            />
          </view>
        </view>
        <view class="part-item lines" style="border: none">
          <text class="part-item-key">开户账户</text>
          <view class="part-item-value">
            <input
              type="text"
              placeholder="请输入开户银行"
              v-model="condition.accountNumber"
            />
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="part middle">
            <view class="part-item">
                <text class="part-item-key">总金额</text>
                <text class="part-item-value"><text class="purple">10.00</text>元</text>
            </view>
        </view> -->
    <view class="part footer">
      <!-- <view class="tab-title">接收方式</view>
            <view class="part-item lines">
                <text class="part-item-key">电子邮箱</text>
                <text class="part-item-value">sota_xu@hafengkeji.com</text>
            </view> -->
      <view
        :class="{
          'push-again-btn': true,
          'blue-push-again-btn': custTypeId === 1,
          'green-push-again-btn': custTypeId === 2,
        }"
        @click="submit"
        >保存</view
      >
    </view>
  </scroll-view>
</template>

<script>
const app = getApp();
import { mapState } from 'vuex';
import MemberCacheTool from '@/utils/member-cache-tool.js';
export default {
  data() {
    return {
      picUrl: this.$picUrl,
      type: 'add',
      id: '',
      globalData: app.globalData,
      items: [
        { value: '0', name: '单位' },
        { value: '1', name: '个人/非企业单位' },
      ],
      isDefault: true, // 记录
      condition: {
        id: '', // |Long|否|抬头id
        invoiceTitleType: 0, // |int|是|抬头类型（ 0：单位，1:个人/非企业单位）
        invoiceTitleName: '', // |String|是|抬头名称
        corporationTax: '', // |String|是|公司税号|
        setDefault: '', // |int|是|设为默认(0：不默认，1：默认)
        depositBank: '', // |String|否|开户银行
        accountNumber: '', // |String|否|开户账号
        companyAddress: '', // |String|否|公司地址
        companyTel: '', // |String|否|公司电话
        createUser: '', // |String|是|创建人
        creator: '', // |Long|是|创建者id
        updateUser: app.globalData.wxMember.nickname, // |String|是|更新人
        updater: app.globalData.wxMember.id, // |Long|是|更新人id
        mobile: app.globalData.wxMember.mobile, // |String|是|手机号
        vipcode: app.globalData.member.vipcode, // |String|是|会员号
        openid: MemberCacheTool.getOpenId(app), // |String|是|openid
      },
      preUrl: '',
    };
  },
  computed: {
    isCompany: function () {
      return this.condition.invoiceTitleType == 0;
    },
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
  },
  onLoad(options) {
    console.log(this.globalData);
    if (options.type) this.type = options.type;
    if (options.id) (this.id = options.id), this.getInvoiceTitleById();
    // 埋点本地化
    this.preUrl = uni.getStorageSync('previousUrl');
    uni.setStorageSync(
      'previousUrl',
      '/pages/parkingFee/parkingReceipt/parkingChangeHeader.vue'
    );
  },
  methods: {
    radioChange: function (e) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === e.detail.value) {
          this.condition.invoiceTitleType = i;
          break;
        }
      }
    },
    switch1Change: function (e) {
      console.log('switch1 发生 change 事件，携带值为', e.target.value);
      this.isDefault = e.target.value;
    },
    // 根据抬头ID获取抬头详情信息  api/1.0/invoiceTitle/{id}
    getInvoiceTitleById() {
      const self = this;
      const params = {
        id: this.id,
      };
      self.$md(params);
      uni.request({
        url: self.$baseURL + 'api/1.0/invoiceTitle/' + this.id,
        method: 'GET',
        data: params,
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          console.log('获取抬头详情信息', res.data);
          if (res.data.code === 0) {
            self.condition = res.data.data;
            // 单独对默认选项进行赋值
            self.isDefault = res.data.data.setDefault === 1 ? true : false;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '服务器开小差了呢，请您稍后再试',
            icon: 'none',
          });
        },
      });
    },
    // 添加、编辑抬头信息
    submit() {
      const self = this;
      const url =
        self.type === 'add' ? 'api/1.0/invoiceTitle' : 'api/1.0/invoiceTitle';
      const methodType = self.type === 'add' ? 'POST' : 'PUT';
      if (self.type === 'add') {
        self.condition.createUser = self.globalData.wxMember.nickname;
        self.condition.creator = self.globalData.wxMember.id;
      }
      self.condition.setDefault = self.isDefault ? 1 : 0;
      const params = {
        ...self.condition,
      };
      console.log('提交信息', params);
      self.$md(params);
      uni.request({
        url: self.$baseURL + url,
        method: methodType,
        data: params,
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          console.log(res.data);
          if (res.data.code === 0) {
            uni.navigateBack({ delta: 1 });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '服务器开小差了呢，请您稍后再试',
            icon: 'none',
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../../styles/common.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
  .part {
    background-color: #ffffff;
    .part-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // padding: 32rpx 0;
      font-size: 28rpx;
      width: 91.4%;
      height: 87rpx;
      margin: 0 auto;
      .part-item-key {
        color: #333;
      }
      .part-item-value {
        color: #999;
        text-align: right;
        > label {
          margin-left: 20rpx;
        }
      }
    }
    .tab-title {
      color: #676767;
      padding: 30rpx 35rpx;
      background-color: #f1f1f1;
    }
    .lines {
      border-bottom: 2rpx solid #ececec;
    }
    .invoice-more {
      padding-bottom: 8rpx;
    }
  }
  .top {
    padding-top: 20rpx;
  }
  .middle {
    margin: 20rpx 0;
    .purple {
      color: #a668b1;
    }
  }
  .footer {
    width: 100%;
    height: 110rpx;
    position: fixed;
    bottom: 0rpx;
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: 20rpx;
    box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
    -webkit-box-shadow: 0 0 20rpx 0 hsla(0, 6%, 58%, 0.6);
    -moz-box-shadow: 0 0 20rpx 0 hsla(0, 6%, 58%, 0.6);
    // padding-top: 20rpx;
    .invoive-img {
      text-align: center;
      > image {
        width: 100%;
      }
      .download {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        > image {
          width: 32rpx;
        }
        > text {
          margin-left: 10rpx;
          color: #808080;
        }
      }
    }
    .push-again-btn {
      margin: 25rpx 30rpx;
      background-image: linear-gradient(to right, #7d4ea1, #40397c);
      border-radius: 50rpx;
      color: #ffffff;
      text-align: center;
      padding: 25rpx 0;
    }
    .blue-push-again-btn {
      .color-background-color('blue');
    }
    .green-push-again-btn {
      .color-background-color('green');
    }
  }
}
</style>