Merge branch 'master' of http://git.yn-ce.com/git/hanfei/VueSharedPrinting

hanfei / VueSharedPrinting

Browse code Merge branch 'master' of http://git.yn-ce.com/git/hanfei/VueSharedPrinting master
commit c075a98b88eb83fb5a0d3b8ce7a7b3204a27d4a7 2 parents 844d577 + 5b11f80 hanfei authored on 2 Jan 2024

Patch

Showing 3 changed files

Ignore Space Show notes View src/api/resultApi.js 0 → 100644
import request from "../utils/request"; // 打印价格 export const getPrintPrice = (data) => { return request({ url: "/device/getPrintPriceList", params: data, }); };

Ignore Space Show notes View src/utils/request.js 0 → 100644
import axios from "axios"; const request = axios.create({ baseURL: window.location.origin + "/api", timeout: 15000, // request timeout }); request.interceptors.request.use((config) => { // const token = getToken() // config.headers["Authorization"] = "Bearer " + token return config; }); request.interceptors.response.use((res) => { return res.data; }); export default request;

Ignore Space Show notes View src/views/explain.vue
<template> <!--说明--> <div class="explain"> <navbar :name="name" /> <div class="box"> <div v-if="name == '使用教程'"> <div class="content"> 使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程 </div> </div> <div v-if="name == '打印价格'" class="flex-center"> <!-- <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> --> <!-- 整个表格内容 --> <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0" > <!-- 表格中一行的内容 --> <tr style=" font-weight: bold; font-size: 1.3rem; background-color: #edeff6; " > <!-- 表格中单个单元格内容 --> <td>打印类型&格式</td> <td>单价</td> </tr> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.amount }}</td> </tr> </table> </div> <div v-if="name == '客服助手'"> <div class="content"> 尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import axios from "axios"; import { getPrintPrice } from "../api/resultApi"; export default { name: "explain", components: { navbar, }, provide() { return { title: this.name, type: "", }; }, data() { return { name: this.$route.params.name, tableData: [ // { name: "A4黑白单面", amount: "元张" }, // { name: "A4黑白双面", amount: "元张" }, // { name: "A4彩色双面", amount: "元张" }, // { name: "扫描复印黑白单面", amount: "元张" }, // { name: "扫描复印黑白双面", amount: "元张" }, // { name: "扫描复印彩色单面", amount: "元张" }, // { name: "扫描复印深色双面", amount: "元张" }, // { name: "证件照", amount: "元张" }, // { name: "照片", amount: "元张" }, // { name: "身份证黑白单面", amount: "元张" }, // { name: "身份证黑户双面", amount: "元张" }, // { name: "身份证彩色单面", amount: "元张" }, // { name: "身份证彩色双面", amount: "元张" }, ], }; }, methods: { getDate() { // 获取数据 let data = { deviceId: "123", printType: "DocumentPrinting", }; axios .get("/device/getPrintPrice", data) .then(function (res) { console.log(res); }) .catch(function (error) { console.log(error); }); }, getPrintPrice() { getPrintPrice({ deviceId: 3 }).then((res) => { // console.log(res); this.tableData = res.data; }); }, }, created() { this.getPrintPrice(); }, mounted() { this.getDate(); }, }; </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 32rem; padding: 6rem 0; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; > div { height: 100%; overflow-y: auto; } .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } } } </style> <template> <!--说明--> <div class="explain"> <navbar :name="name" /> <div class="box"> <div v-if="name == '使用教程'"> <div class="content"> 使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程 </div> </div> <div v-if="name == '打印价格'" class="flex-center"> <!-- <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> --> <!-- 整个表格内容 --> <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0" > <!-- 表格中一行的内容 --> <tr> <!-- 表格中单个单元格内容 --> <td>打印类型&格式</td> <td>单价</td> </tr> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.type }}</td> <td>{{ item.price }}</td> </tr> </table> </div> <div v-if="name == '客服助手'"> <div class="content"> 尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import axios from "axios"; export default { name: "explain", components: { navbar, }, provide() { return { title: this.name, type: "", }; }, data() { return { name: this.$route.params.name, tableData: [ { type: "A4黑白单面", price: "元张" }, { type: "A4黑白双面", price: "元张" }, { type: "A4彩色双面", price: "元张" }, { type: "扫描复印黑白单面", price: "元张" }, { type: "扫描复印黑白双面", price: "元张" }, { type: "扫描复印彩色单面", price: "元张" }, { type: "扫描复印深色双面", price: "元张" }, { type: "证件照", price: "元张" }, { type: "照片", price: "元张" }, { type: "身份证黑白单面", price: "元张" }, { type: "身份证黑户双面", price: "元张" }, { type: "身份证彩色单面", price: "元张" }, { type: "身份证彩色双面", price: "元张" }, ], }; }, methods: { getDate() { // 获取数据 let data = { deviceId: "123", printType: "DocumentPrinting", }; axios .get("/device/getPrintPrice", data) .then(function (res) { console.log(res); }) .catch(function (error) { console.log(error); }); }, }, mounted() { this.getDate(); }, }; </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 32rem; padding: 6rem 0; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; > div { height: 100%; overflow-y: auto; } .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } } } </style>

Ignore Space Show notes View

src/views/explain.vue

<template>
  
  <div class="explain">
    <navbar :name="name" />
    <div class="box">
      <div v-if="name == '使用教程'">
        <div class="content">
          使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程
        </div>
      </div>
      <div v-if="name == '打印价格'" class="flex-center">
        
        
        <table
          border="1"
          width="500"
          height="100%"
          align="center"
          cellpadding="10"
          cellspacing="0"
        >
          
          <tr
            style="
              font-weight: bold;
              font-size: 1.3rem;
              background-color: #edeff6;
            "
          >
            
            <td>打印类型&格式</td>
            <td>单价</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.amount }}</td>
          </tr>
        </table>
      </div>
      <div v-if="name == '客服助手'">
        <div class="content">
          尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话
          400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。
        </div>
      </div>
    </div>
  </div>
</template>

axios
        .get("/device/getPrintPrice", data)
        .then(function (res) {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getPrintPrice() {
      getPrintPrice({ deviceId: 3 }).then((res) => {
        // console.log(res);
        this.tableData = res.data;
      });
    },
  },
  created() {
    this.getPrintPrice();
  },
  mounted() {
    this.getDate();
  },
};
</script>

<template>
  
  <div class="explain">
    <navbar :name="name" />
    <div class="box">
      <div v-if="name == '使用教程'">
        <div class="content">
          使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程
        </div>
      </div>
      <div v-if="name == '打印价格'" class="flex-center">
        
        
        <table
          border="1"
          width="500"
          height="100%"
          align="center"
          cellpadding="10"
          cellspacing="0"
        >
          
          <tr>
            
            <td>打印类型&格式</td>
            <td>单价</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.type }}</td>
            <td>{{ item.price }}</td>
          </tr>
        </table>
      </div>
      <div v-if="name == '客服助手'">
        <div class="content">
          尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话
          400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。
        </div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "explain",
  components: {
    navbar,
  },
  provide() {
    return {
      title: this.name,
      type: "",
    };
  },
  data() {
    return {
      name: this.$route.params.name,
      tableData: [
        { type: "A4黑白单面", price: "**元张" },
        { type: "A4黑白双面", price: "**元张" },
        { type: "A4彩色双面", price: "**元张" },
        { type: "扫描复印黑白单面", price: "**元张" },
        { type: "扫描复印黑白双面", price: "**元张" },
        { type: "扫描复印彩色单面", price: "**元张" },
        { type: "扫描复印深色双面", price: "**元张" },
        { type: "证件照", price: "**元张" },
        { type: "照片", price: "**元张" },
        { type: "身份证黑白单面", price: "**元张" },
        { type: "身份证黑户双面", price: "**元张" },
        { type: "身份证彩色单面", price: "**元张" },
        { type: "身份证彩色双面", price: "**元张" },
      ],
    };
  },
  methods: {
    getDate() {
      // 获取数据
      let data = {
        deviceId: "123",
        printType: "DocumentPrinting",
      };

axios
        .get("/device/getPrintPrice", data)
        .then(function (res) {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.getDate();
  },
};
</script>

Show line notes below