服务申请

src/components/infoList.vue

@@ -14,7 +14,10 @@ export default {
 
     }
   },
-  props:['list_arr']
+  props:['list_arr'],
+  mounted(){
+      console.log(this.$solts);
+  }
 };
 </script>
 

src/components/shop-car-apply/apply_foot.vue

+<template>
+    <div class="footout">
+        <span>共项服务</span> 
+        <span class="applybtn">提交申请</span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['num'],
+    components: {
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.footout{
+    width: 100%;
+    height: 84px;
+    background-color: rgba(255, 255, 255, 1);
+	box-shadow: 0px 3px 6px 0px 
+		rgba(244, 247, 252, 1);
+	border-radius: 12px;
+    padding: 20px;
+    text-align: right;
+}
+.applybtn{
+    color: rgba(252, 239, 214, 1);
+    width: 221px;
+	height: 44px;
+    line-height: 44px;
+    text-align: center;
+    display: inline-block;
+	background-color: rgba(229, 102, 0, 1);
+	border-radius: 8px;
+}
+</style>

src/components/shop-car-apply/apply_form.vue

+<template>
+  <div class="formout">
+    <el-form
+      :inline="true"
+      :model="formInline"
+      label-width="0px"
+      :rules="rules"
+      ref="ruleForm"
+      class="demo-form-inline"
+    >
+      <el-form-item>
+        <p class="formname">申请部门：</p>
+        <el-input
+          disabled
+          v-model="formInline.depart"
+          placeholder="审批人"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="preson">
+        <p class="formname">部门联系人：</p>
+        <el-input v-model="formInline.preson" placeholder="审批人"></el-input>
+      </el-form-item>
+      <el-form-item prop="phone">
+        <p class="formname">联系电话：</p>
+        <el-input v-model="formInline.phone" placeholder="审批人"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  components: {},
+  data() {
+    return {
+      formInline: {
+        depart: "",
+        preson: "",
+        phone: "",
+      },
+      rules: {
+        preson: [
+          { required: true, message: "请输入部门联系人", trigger: "blur" },
+        ],
+        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
+      },
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    submitForm() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style>
+.formout .el-input__inner {
+  width: 550px;
+}
+</style>
+<style scoped>
+.formout {
+  width: 100%;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 3px 6px 0px rgba(195, 202, 248, 0.25);
+  border-radius: 12px;
+  padding: 30px;
+}
+.formout .formname {
+  width: 520px;
+  color: rgba(88, 97, 122, 1);
+}
+.formout .el-form-item {
+  margin-right: 20px;
+}
+.formout .el-form-item:nth-of-type(2) {
+  margin-right: 0px;
+}
+</style>

src/components/shop-car-apply/apply_service_state.vue

+<template>
+  <div class="outborder">
+    <div class="outservice">
+      <div class="serviceinfo">
+        <div
+          class="pic"
+          :style="{ backgroundImage: 'url(' + data.img + ')' }"
+        ></div>
+        <div class="info">
+          <p>
+            {{ data.title }}
+            <span
+              v-for="(item, index) in data.tips"
+              :key="index + 4000"
+              :style="
+                item.type == 'nor'
+                  ? { color: '#fff', backgroundColor: 'rgba(83, 98, 238, 1)' }
+                  : item.type == 'share'
+                  ? {
+                      color: 'rgba(37, 189, 177, 1)',
+                      backgroundColor: 'rgba(231, 253, 252, 1)',
+                      border: 'solid 1px rgba(139, 214, 208, 1)',
+                    }
+                  : item.type == 'mg'
+                  ? {
+                      color: 'rgba(225, 82, 96, 1)',
+                      backgroundColor: 'rgba(255, 239, 239, 1)',
+                      border: 'solid 1px rgba(215, 164, 169, 1)',
+                    }
+                  : {}
+              "
+              >{{ item.tip }}</span
+            >
+          </p>
+          <p>{{ data.type }}</p>
+          <p>{{ data.auth }}</p>
+        </div>
+      </div>
+      <div class="size">
+        <p>{{ data.size }}</p>
+        <P>{{ data.applytype }}</P>
+      </div>
+      <div class="num">
+        {{ data.num }}
+      </div>
+      <div class="oprate">
+        <upload-file
+          v-if="data.isMg"
+          :drag="false"
+          type="default"
+        ></upload-file>
+      </div>
+    </div>
+    <p class="inputtitle">应用场景：</p>
+    <div class="system">
+      <el-input
+        v-model="sceneinput"
+        placeholder="请填写申请服务的应用场景"
+      ></el-input>
+    </div>
+    <p class="inputtitle degr" @click="showtable = !showtable">
+      <i :class="showtable ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i
+      >选择需要申请的数据项：
+    </p>
+    <table-um
+      v-show="showtable"
+      :isSelection="true"
+      :headers="headers"
+      :stripe="true"
+      :url="data.tableurl"
+      class="table"
+    ></table-um>
+  </div>
+</template>
+
+<script>
+import uploadFile from "@/components/upload_file";
+import tableUm from "../table-um";
+export default {
+  props: ["data"],
+  components: {
+    uploadFile,
+    tableUm,
+  },
+  data() {
+    return {
+      sceneinput: "",
+      showtable: false,
+      headers: [
+        {
+          label: "字段编码",
+          prop: "code",
+          align: "left",
+          minWidth: "20%",
+        },
+        {
+          label: "字段名称",
+          prop: "name",
+          align: "left",
+          minWidth: "20%",
+        },
+        {
+          label: "字段类型",
+          prop: "type",
+          align: "center",
+          width: "150",
+        },
+        {
+          label: "字段描述",
+          prop: "desc",
+          align: "left",
+          minWidth: "50%",
+        },
+      ],
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.outborder{
+    border-bottom: 2px solid rgba(244, 247, 252, 1);
+}
+.outservice {
+  width: 100%;
+  overflow: hidden;
+  padding: 25px 30px;
+}
+.outservice > div {
+  float: left;
+}
+.serviceinfo {
+  width: 415px;
+  margin-right: 90px;
+}
+.pic {
+  width: 116px;
+  height: 116px;
+  float: left;
+  background-size: contain;
+  margin-right: 20px;
+}
+.info {
+  float: left;
+  width: 270px;
+}
+.info p {
+  color: rgba(136, 144, 167, 1);
+}
+.info p:nth-of-type(1) {
+  color: rgba(13, 24, 71, 1);
+  font-size: 16px;
+  margin-bottom: 20px;
+  line-height: 22px;
+}
+.info p:nth-of-type(2) {
+  margin-bottom: 15px;
+}
+.info p:nth-of-type(1) span {
+  display: inline-block;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 4px;
+  margin: 0 10px;
+  font-size: 12px;
+  padding: 0 9px;
+}
+.size {
+  width: 240px;
+  height: 107px;
+  background-color: rgba(249, 250, 252, 1);
+  border-radius: 8px;
+  margin-right: 70px;
+  padding: 20px;
+  color: rgba(136, 144, 167, 1);
+}
+.size p:nth-of-type(1) {
+  line-height: 22px;
+  margin-bottom: 10px;
+}
+.num {
+  width: 138px;
+  height: 107px;
+  line-height: 107px;
+  font-size: 16px;
+  color: rgba(88, 97, 122, 1);
+  margin-right: 55px;
+  text-align: center;
+}
+.oprate {
+  width: 130px;
+  height: 107px;
+  padding-top: 34px;
+  padding-left: 30px;
+}
+.inputtitle {
+  color: rgba(88, 97, 122, 1);
+  padding-left: 45px;
+  margin: 15px 0;
+}
+.system {
+  padding: 0 30px;
+  position: relative;
+}
+.system .el-select {
+  position: absolute;
+  left: 30px;
+  top: 0;
+}
+.degr {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.table{
+    margin: 0 30px 20px;
+}
+</style>

src/components/shop-car-apply/service_list.vue

+<template>
+    <div class="out_list">
+        <p class="list_title">
+            <span>服务信息</span>
+            <span>规格</span>
+            <span>数量</span>
+            <span>操作</span>
+        </p>
+        <apply-service-state  v-for="(item,index) in service_arr" :idx="index" :key="index+5000" :data="item"></apply-service-state>
+        
+    </div>
+</template>
+
+<script>
+import applyServiceState from './apply_service_state'
+
+export default {
+    props: ['service_arr'],
+    components: {
+        applyServiceState,
+        
+    },
+    data() {
+        return {
+            
+            
+        };
+    },
+    watch: {
+        
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style>
+
+</style>
+<style scoped>
+.out_list{
+    width: 100%;
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 1);
+	box-shadow: 0px 3px 6px 0px 
+		rgba(244, 247, 252, 1);
+	border-radius: 12px;
+}
+.list_title{
+    height: 48px;
+    line-height: 48px;
+	background-color: rgba(229, 240, 255, 1);
+    padding: 0 40px;
+}
+.list_title span{
+    color: rgba(36, 44, 67, 1);
+    font-weight: bold;
+}
+.list_title span:nth-of-type(1){
+    margin-right: 460px;
+}
+.list_title span:nth-of-type(2){
+    margin-right: 315px;
+}
+.list_title span:nth-of-type(3){
+    margin-right: 155px;
+}
+
+</style>

src/pages/shop_car_apply.vue

+<template>
+    <div class="apply_container">
+        <info-list :list_arr="module_arr">
+            <apply-form slot="apply_info"></apply-form>
+            <service-list slot="apply_service" :service_arr="service_arr"></service-list>
+        </info-list>
+
+        <div class="footout">
+            <span>共{{service_arr.length}}项服务</span> 
+            <span class="applybtn">提交申请</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import infoList from "../components/infoList";
+import applyForm from "../components/shop-car-apply/apply_form";
+import serviceList from "../components/shop-car-apply/service_list";
+export default {
+    props: {
+
+    },
+    components: {
+        infoList,
+        applyForm,
+        serviceList
+    },
+    data() {
+        return {
+            module_arr:[
+                {
+                    title:'服务申请',
+                    type:'solt',
+                    solt_name:'apply_info'
+                },
+                {
+                    title:'申请的服务',
+                    type:'solt',
+                    solt_name:'apply_service'
+                },
+                
+            ],
+            service_arr:[
+                {
+                    img:'http://b-ssl.duitang.com/uploads/item/201705/09/20170509165713_NiHaG.jpeg',
+                    title:'水路货物周转量情况水路货物周转量情况',
+                    tips:[
+                        {
+                            tip:'Map Service',
+                            type:'nor'
+                        },
+                        {
+                            tip:'共享',
+                            type:'share'
+                        },
+                    ],
+                    type:'基础数据服务',
+                    auth:'贵州省交通运输厅',
+                    size:'规格：访问次数：20/日，访问量：100/日',
+                    applytype:'申请方式：按月',
+                    num:1,
+                    isMg:false,
+                    tableurl:'applydata',
+                },
+                {
+                    img:'http://b-ssl.duitang.com/uploads/item/201705/09/20170509165713_NiHaG.jpeg',
+                    title:'水路货物周转量情况水路货物周转量情况',
+                    tips:[
+                        {
+                            tip:'Map Service',
+                            type:'nor'
+                        },
+                        {
+                            tip:'敏感',
+                            type:'mg'
+                        },
+                    ],
+                    type:'基础数据服务',
+                    auth:'贵州省交通运输厅',
+                    size:'规格：访问次数：20/日，访问量：100/日',
+                    applytype:'申请方式：按月',
+                    num:1,
+                    isMg:true,
+                    tableurl:'applydata',
+                },
+            ],
+           
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.apply_container{
+    width: 1200px;
+    margin: 0 auto;
+    overflow: hidden;
+}
+.footout{
+    width: 100%;
+    height: 84px;
+    background-color: rgba(255, 255, 255, 1);
+	box-shadow: 0px 3px 6px 0px 
+		rgba(244, 247, 252, 1);
+	border-radius: 12px;
+    padding: 20px;
+    text-align: right;
+    margin: 20px 0;
+}
+.applybtn{
+    color: rgba(252, 239, 214, 1);
+    width: 200px;
+	height: 44px;
+    line-height: 44px;
+    text-align: center;
+    display: inline-block;
+	background-color: rgba(229, 102, 0, 1);
+	border-radius: 8px;
+    margin-left: 20px;
+    cursor: pointer;
+}
+</style>

src/router/index.js

@@ -116,6 +116,11 @@ export default new Router({
               name: "shoppingCart",
               component: () => import("@/pages/shopping_cart"),
             },
+            {
+              path: "/shop/shop_car_apply", // 购物车页
+              name: "shopCarApply",
+              component: () => import("@/pages/shop_car_apply"),
+            },
           ],
         },
         {

static/data.json

@@ -495,6 +495,46 @@
         "explanation": "上海市普陀区金沙江路 1516 弄"
       }
     ],
+    "applydata":[
+      {
+        "id": 1,
+        "code": "weqwe",
+        "type": "字符串",
+        "name": "王小虎",
+        "desc": "上海市普陀区金沙江路 1518 弄"
+      },
+      {
+        "id": 2,
+        "code": "weqwe",
+        "type": "字符串",
+        "name": "王小虎",
+        "desc": "上海市普陀区金沙江路 1518 弄"
+      },
+      {
+        "id": 3,
+        "code": "weqwe",
+        "type": "字符串",
+        "name": "王小虎",
+        "desc": "上海市普陀区金沙江路 1518 弄",
+        "children":[
+          {
+            "id": 12,
+            "code": "weqwe",
+            "type": "字符串",
+            "name": "王小虎",
+            "desc": "上海市普陀区金沙江路 1518 弄"
+          },
+          {
+            "id": 13,
+            "code": "weqwe",
+            "type": "字符串",
+            "name": "王小虎",
+            "desc": "上海市普陀区金沙江路 1518 弄"
+          }
+        ]
+      }
+      
+    ],
     "fhcstx": [
       {
         "id": 1,