front-end/ghsApp/src/admin/expend/addExpend.vue

<template>
  <view class="app-content">
    <view>
      <form @submit="formSubmit">
        <view class="module-com input-line-wrap">

          <tui-list-cell class="line-cell" :hover="false" :arrow="false">
            <view class="tui-title">类型</view>
            <button class="admin-button-com middle" @tap="form.type = 3" :class="form.type == 3? 'blue' : 'default'">伙食</button>
            <button class="admin-button-com middle" @tap="form.type = 0" :class="form.type == 0 ? 'blue' : 'default'">店租</button>
            <button class="admin-button-com middle" @tap="form.type = 1" :class="form.type == 1? 'blue' : 'default'">水电</button>
            <button class="admin-button-com middle" @tap="form.type = 2" :class="form.type == 2? 'blue' : 'default'">物业</button>
            <button class="admin-button-com middle" @tap="form.type = 4" :class="form.type == 4? 'blue' : 'default'">房租</button>
            <button class="admin-button-com middle" @tap="form.type = 5" :class="form.type == 5? 'blue' : 'default'">其它</button>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :arrow="true">
            <view class="tui-title">支付</view>
            <picker mode="selector" :value="form.payWay" :range="payWayList" range-key="name" @change="payWayChange" class="tui-input" >
              <input v-model="form.payWay" name="payWay" type="text" hidden />
              <view style="padding:6upx 0 6upx 0;">{{payWayList[payWayindex].name}}</view>
            </picker>
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false">
              <view class="tui-title">金额</view>
              <input v-model="form.amount" type="digit" @focus="form.amount=''" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="amount" placeholder="请填写" />
          </tui-list-cell>

          <tui-list-cell class="line-cell remark-wrap" :hover="false">
            <view class="tui-title">备注</view>
            <view class="tui-input">
              <textarea v-model="form.remark" @focus="form.remark=''" style="height:80upx;" class="tui-textarea remark" name="remark" placeholder-class="phcolor" placeholder="选填" />
            </view>
          </tui-list-cell>
        </view>
        <view class="confirm-btn">
          <view style="margin-bottom:20upx;font-size:33upx;color:red;font-weight:bold;">当前在：{{shopInfo.shopName}}</view>
          <button class="admin-button-com big blue" formType="submit">添加</button>
        </view>
      </form>
    </view>
  </view>
</template>
<script>
import TuiListCell from "@/components/plugin/list-cell";
import { addExpend} from '@/api/expend'
import {currentShop} from "@/api/shop";
export default {
  name: "addExpend",
  components: {
    TuiListCell
  },
  data() {
    return {
      form:{
        //0店租 1水电 2物业 3伙食 4房租 5其它
        type:3,
        amount:'',
        remark:'',
        payWay:0
      },
      payWayList:[{name:"员工微信",id:0},{name:"现金",id:4},{name:"员工支付宝",id:1},{name:"银行卡",id:5}],
      payWayindex:0,
      shopInfo:{shopName:''}
    };
  },
  onLoad () {
			currentShop().then(res => {
				this.shopInfo = res.data
			})
  },
  methods: {
		payWayChange(e){
			let index = e.detail.value
			this.payWayindex = index
      this.form.payWay = this.payWayList[index].id
		},
    formSubmit(){
      if(Number(this.form.amount) <= 0){
        this.$msg('请填写金额')
        return false
      }
			this.$util.confirmModal({content:'确认提交？'},() => {
        addExpend(this.form).then(res=>{
          if(res.code == 1){
              this.$msg("提交成功");
              setTimeout(function(){
                uni.navigateBack({ delta: 1 })
              },1000)
          }
        })
			})
    }
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 20upx);
  padding-top: 20upx;
}
.prompt-text {
  color: $fontColor3;
  padding-left: 30upx;
  margin-bottom: 30upx;
}
.module-com {
  margin-bottom: 20upx;
  .member-wrap {
    .member-det {
      font-size: 24upx;
      margin-left: 20upx;
    }
  }
  .remark-wrap {
    align-items: flex-start;
    .remark {
      height: 240upx;
    }
  }
}
.confirm-btn {
  width: calc(100% - 60upx);
  margin: 60upx 30upx 20upx;
  .admin-button-com {
    width: 100%;
  }
}
</style>