oil-station/fuintAdmin_zt/src/views/components/Service/way.vue

<script >
import {getPidInfo, Userlist} from "@/api/system/Site/site";
import Yearff from "@/views/Site/components/yearff.vue";
import Beforeff from "@/views/Site/components/before.vue";
import Afterff from "@/views/Site/components/afterff.vue";

export default {
  components: {Afterff, Beforeff, Yearff},
  props:['deptId','id'],
  data() {
    return {
      value: true,
      storeDeptInfo:{},
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  created() {
    this.getInfo()
  },
  methods:{
    getInfo(){
      getPidInfo(this.deptId).then(res => {
        this.storeDeptInfo = res.data
      })
    },
  }
}
</script>

<template>
    <div class="container-app">
      <div class="d-s">
        <div class="left-size">机构名称：</div>
        <div>{{ storeDeptInfo.deptName || "--" }}</div>
      </div>
      <div class="d-s">
        <div class="left-size">负责人姓名：</div>
        <div>{{ storeDeptInfo.leaderName || "--" }}</div>
      </div>
      <div class="d-s">
        <div class="left-size">负责人电话：</div>
        <div>{{ storeDeptInfo.leaderPhone || "--" }}</div>
      </div>
      <div class="d-s">
        <div class="left-size">机构类型：</div>
        <div v-if="storeDeptInfo.deptType==1">代理商</div>
        <div v-if="storeDeptInfo.deptType==2">连锁店</div>
        <div v-if="storeDeptInfo.deptType==3">基本门店</div>
        <div v-if="storeDeptInfo.deptType==4">三方机构</div>
      </div>
      <div class="d-s">
        <div class="left-size">计费方式：</div>
        <div v-if="storeDeptInfo.turnoverType==1">无限制</div>
        <div v-if="storeDeptInfo.turnoverType==2">时间限制</div>
        <div v-if="storeDeptInfo.turnoverType==3">预付费</div>
        <div v-if="storeDeptInfo.turnoverType==4">后付费</div>
        <div v-if="storeDeptInfo.turnoverType==5">年付费</div>
        <div v-if="storeDeptInfo.turnoverType==6">可创建油站站点数量</div>
      </div>
<!--   年付费   -->
      <yearff v-if="storeDeptInfo.turnoverType==5" :deptId="this.deptId"></yearff>
<!--    预付费  -->
      <beforeff v-if="storeDeptInfo.turnoverType==3" :deptId="this.deptId"></beforeff>
<!--    后付费  -->
      <afterff v-if="storeDeptInfo.turnoverType==4" :deptId="this.deptId"></afterff>
<!--    时间限制限制  -->
      <div class="d-s" v-if="storeDeptInfo.turnoverType==2">
        <div class="left-size">开始时间：</div>
        <div>{{ storeDeptInfo.turnoverStartTime }}</div>
        <div class="left-size">结束时间：</div>
        <div>{{ storeDeptInfo.turnoverEndTime }}</div>
      </div>
<!--    可创建油站站点数量  -->
      <div class="d-s" v-if="storeDeptInfo.turnoverType==6">
        <div class="left-size">可创建油站站点数量：</div>
        <div>{{ storeDeptInfo.storeNum }}</div>
      </div>
      <div class="d-s" style="margin-top: 15px">
        <div class="left-size">机构状态：</div>
        <div>
          <el-switch
            v-model="storeDeptInfo.status"
            active-value="qy"
            inactive-value="jy"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
      </div>
      <div class="d-s">
        <div class="left-size">备注：</div>
        <div>--</div>
      </div>
    </div>
</template>

<style scoped lang="scss">
.container-app{
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  width: 98%;
  height: 80vh;
  overflow: auto;
  margin: 20px auto;
}
.d-s{
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}
.left-size{
  width: 100px;
  text-align: right;
}
</style>