update

hanfei / VueSharedPrinting

Browse code update master
1 parent 1dd2199 commit a43edbdc6b94a9581dc04d14f170dd58e6686957 linda authored on 3 Jan 2024

Patch

Showing 7 changed files

Ignore Space Show notes View .gitignore
.DS_Store node_modules /dist .gitignore # local env files .env.local .env..local # Log files npm-debug.log yarn-debug.log* yarn-error.log* pnpm-debug.log* # Editor directories and files .idea .vscode .suo .ntvs* .njsproj .sln .sw? .DS_Store node_modules /dist # local env files .env.local .env..local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # Editor directories and files .idea .vscode .suo .ntvs* .njsproj .sln *.sw?

Ignore Space Show notes View

.gitignore

Ignore Space Show notes View .prettierrc 0 → 100644
{ "printWidth": 200, "eslintIntegration": true, "stylelintIntegration": true, "tabWidth": 2, "semi": false, "singleQuote": true, "bracketSpacing": true, "arrowParens": "avoid", "htmlWhitespaceSensitivity": "ignore", "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "files.insertFinalNewline": true, "useTabs": false, "endOfLine": "auto", "ignorePath": ".gnore", "trailingComma": "none" }

Ignore Space Show notes View

.prettierrc 0 → 100644

Ignore Space Show notes View package.json
{ "name": "tzshare", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^1.6.3", "core-js": "^3.6.5", "html2canvas": "^1.4.1", "postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9", "vue": "^2.6.11", "vue-router": "^3.2.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "less": "^4.2.0", "less-loader": "^7.3.0", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } { "name": "tzshare", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^1.6.2", "core-js": "^3.6.5", "html2canvas": "^1.4.1", "postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9", "vue": "^2.6.11", "vue-router": "^3.2.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "less": "^4.2.0", "less-loader": "^7.3.0", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

Ignore Space Show notes View

package.json

{
  "name": "tzshare",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.6.3",
    "core-js": "^3.6.5",
    "html2canvas": "^1.4.1",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

{
  "name": "tzshare",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "core-js": "^3.6.5",
    "html2canvas": "^1.4.1",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Ignore Space Show notes View src/api/resultApi.js
import request from '../utils/request' // 打印价格 export const getPrintPrice = params => { return request({ url: '/device/getPrintPriceList', params }) } // 获取设备ID export const getDeviceByCode = params => { return request({ url: '/device/getDeviceByCode', params }) } // 文件上传 export const upload2Pdf = data => { return request({ method: 'POST', url: '/file/upload2Pdf', data }) } import request from "../utils/request"; // 打印价格 export const getPrintPrice = (params) => { return request({ url: "/device/getPrintPriceList", params, }); }; export const getDeviceByCode = (params) => { return request({ url: "/device/getDeviceByCode", params, }); };

Ignore Space Show notes View

src/api/resultApi.js

Ignore Space Show notes View src/utils/request.js
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 console.log(config.url) // if (config.url === '/file/upload2Pdf') { // config.headers['enctype'] = 'multipart/form-data' // } console.log(config) return config }) request.interceptors.response.use(res => { return res.data }) export default request 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/utils/request.js

Ignore Space Show notes View src/views/argument.vue
<template> <!-- 参数设定--> <div class="transcoding"> <navbar :name="name" /> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、列印方向、份数，以及打印范围（如果需要打印全部页码，可忽略不用修改）/缩印格式等。</div> <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div> </div> <div class="right"> <!-- <div class="flex-between name">{{ pageData.name }}</div> --> <div class="flex-between"> <div>纸张规格</div> <div>{{ pageData.specification }}</div> </div> <div class="flex-between"> <div>颜色</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.colour == 0 ? 'act' : ''" @click="onChange('colour', 0)">黑白</div> <div class="flex-center" :class="pageData.colour == 1 ? 'act' : ''" @click="onChange('colour', 1)">彩色</div> </div> </div> <div class="flex-between"> <div>单双面</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.singledihedral == 0 ? 'act' : ''" @click="onChange('singledihedral', 0)">单面</div> <div class="flex-center" :class="pageData.singledihedral == 1 ? 'act' : ''" @click="onChange('singledihedral', 1)">双面</div> </div> </div> <!-- <div class="flex-between"> <div>方向</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.direction == 0 ? 'act' : ''" @click="onChange('direction', 0)">横向</div> <div class="flex-center" :class="pageData.direction == 1 ? 'act' : ''" @click="onChange('direction', 1)">纵向</div> </div> </div> --> <div class="flex-between"> <div>份数</div> <div class="import flex-center"> <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 1 ? 0 : pageData.copies - 1)" /> <input :value="pageData.copies" type="number" min="1" /> <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" /> </div> </div> <!-- <div class="flex-between">--> <!-- <div>打印范围（共13页）</div>--> <!-- <div class="flex-center print">--> <!-- <input :value="pageData.minPrint" type="number" min="1">--> <!-- <div>至</div>--> <!-- <input :value="pageData.maxPrint" type="number" min="1">--> <!-- </div>--> <!-- </div>--> <!-- <div class="flex-between">--> <!-- <div>缩印（多合一）</div>--> <!-- <div class="optionBox">--> <!-- <select>--> <!-- <option value="1">1页/张</option>--> <!-- <option value="2">2页/张</option>--> <!-- <option value="3">3页/张</option>--> <!-- </select>--> <!-- </div>--> <!-- </div>--> <div class="btn flex-center" @click="skip('pay', name)">下一步</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: 'argument', components: { navbar }, provide() { return { title: '', type: this.name } }, data() { return { name: this.$route.params.name, pageData: { name: '文件名称……文件名称.doc', //文件名称 specification: 'A4', //纸张规格 colour: 0, //颜色 singledihedral: 0, //单双面 direction: 0, //方向 copies: 1, //份数 maxPrint: 13, //打印范围最大 minPrint: 1, //打印范围最小 minimo: 0 //缩印 } } }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name } }) }, onChange(name, val) { this.pageData[name] = val }, variable(num) { this.pageData.copies = num } } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; text-indent: 2em; } } .right { display: flex; flex-direction: column; justify-content: center; width: 53.19rem; .css1(); padding: 0 4.81rem; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 3.75rem; .name { margin-top: 3.19rem; } .only { width: 17.25rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; overflow: hidden; div { width: 50%; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2.63rem; height: 100%; cursor: pointer; } .act { background: #61aa8f; color: #ffffff; } } .import { img { width: 2.75rem; height: 2.75rem; cursor: pointer; } } input { width: 6.38rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; margin: 0 0.94rem; } .optionBox { select { width: 13.69rem; height: 3.19rem; padding-right: 3.56rem; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url('../assets/demo16.png') no-repeat scroll right center transparent; background-position-x: 11rem; } select::-ms-expand { display: none; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; margin-top: 2.25rem; cursor: pointer; } } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } </style> <template> <!-- 参数设定--> <div class="transcoding"> <navbar :name="name"/> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、列印方向、份数，以及打印范围（如果需要打印全部页码，可忽略不用修改）/缩印格式等。</div> <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div> </div> <div class="right"> <div class="flex-between name">{{ pageData.name }}</div> <div class="flex-between"> <div>纸张规格</div><div>{{ pageData.specification }}</div> </div> <div class="flex-between"> <div>颜色</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.colour==0?'act':''" @click="onChange('colour',0)">黑白</div> <div class="flex-center" :class="pageData.colour==1?'act':''" @click="onChange('colour',1)">彩色</div> </div> </div> <div class="flex-between"> <div>单双面</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.singledihedral==0?'act':''" @click="onChange('singledihedral',0)">单面</div> <div class="flex-center" :class="pageData.singledihedral==1?'act':''" @click="onChange('singledihedral',1)">双面</div> </div> </div> <div class="flex-between"> <div>方向</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.direction==0?'act':''" @click="onChange('direction',0)">横向</div> <div class="flex-center" :class="pageData.direction==1?'act':''" @click="onChange('direction',1)">纵向</div> </div> </div> <div class="flex-between"> <div>份数</div> <div class="import flex-center"> <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies<1?0:pageData.copies-1)"> <input :value="pageData.copies" type="number" min="1"> <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies+1)"> </div> </div> <!-- <div class="flex-between">--> <!-- <div>打印范围（共13页）</div>--> <!-- <div class="flex-center print">--> <!-- <input :value="pageData.minPrint" type="number" min="1">--> <!-- <div>至</div>--> <!-- <input :value="pageData.maxPrint" type="number" min="1">--> <!-- </div>--> <!-- </div>--> <!-- <div class="flex-between">--> <!-- <div>缩印（多合一）</div>--> <!-- <div class="optionBox">--> <!-- <select>--> <!-- <option value="1">1页/张</option>--> <!-- <option value="2">2页/张</option>--> <!-- <option value="3">3页/张</option>--> <!-- </select>--> <!-- </div>--> <!-- </div>--> <div class="btn flex-center" @click="skip('pay',name)">下一步</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "argument", components: { navbar }, provide() { return { title: '', type: this.name } }, data() { return { name: this.$route.params.name, pageData: { name: '文件名称……文件名称.doc',//文件名称 specification: 'A4',//纸张规格 colour: 0,//颜色 singledihedral: 0,//单双面 direction: 0,//方向 copies: 1,//份数 maxPrint: 13,//打印范围最大 minPrint: 1,//打印范围最小 minimo: 0,//缩印 } } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, onChange(name,val) { this.pageData[name] = val }, variable(num) { this.pageData.copies = num }, }, } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; text-indent: 2em; } } .right { width: 53.19rem; .css1(); padding: 0 4.81rem; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 3.75rem; .name { margin-top: 3.19rem; } .only { width: 17.25rem; height: 3.19rem; background: #FFFFFF; border-radius: 0.63rem; border: 0.06rem solid #707070; overflow: hidden; div { width: 50%; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2.63rem; height: 100%; cursor: pointer; } .act { background: #61AA8F; color: #FFFFFF; } } .import { img { width: 2.75rem; height: 2.75rem; cursor: pointer; } } input { width: 6.38rem; height: 3.19rem; background: #FFFFFF; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; margin: 0 .94rem; } .optionBox { select { width: 13.69rem; height: 3.19rem; padding-right: 3.56rem; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; appearance:none; -moz-appearance:none; -webkit-appearance:none; background:url("../assets/demo16.png") no-repeat scroll right center transparent; background-position-x: 11rem; } select::-ms-expand{display: none;} } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; margin-top: 2.25rem; cursor: pointer; } } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } </style>

Ignore Space Show notes View

src/views/argument.vue

<template>
  
  <div class="transcoding">
    <navbar :name="name" />
    <div class="box flex-center">
      <div class="left">
        <div class="title">温馨提示</div>
        <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、列印方向、份数，以及打印范围（如果需要打印全部页码，可忽略不用修改）/缩印格式等。</div>
        <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div>
      </div>
      <div class="right">
        
        <div class="flex-between">
          <div>纸张规格</div>
          <div>{{ pageData.specification }}</div>
        </div>
        <div class="flex-between">
          <div>颜色</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.colour == 0 ? 'act' : ''" @click="onChange('colour', 0)">黑白</div>
            <div class="flex-center" :class="pageData.colour == 1 ? 'act' : ''" @click="onChange('colour', 1)">彩色</div>
          </div>
        </div>
        <div class="flex-between">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.singledihedral == 0 ? 'act' : ''" @click="onChange('singledihedral', 0)">单面</div>
            <div class="flex-center" :class="pageData.singledihedral == 1 ? 'act' : ''" @click="onChange('singledihedral', 1)">双面</div>
          </div>
        </div>
        
        <div class="flex-between">
          <div>份数</div>
          <div class="import flex-center">
            <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 1 ? 0 : pageData.copies - 1)" />
            <input :value="pageData.copies" type="number" min="1" />
            <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" />
          </div>
        </div>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        <div class="btn flex-center" @click="skip('pay', name)">下一步</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: 'argument',
  components: {
    navbar
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.$route.params.name,
      pageData: {
        name: '文件名称……文件名称.doc', //文件名称
        specification: 'A4', //纸张规格
        colour: 0, //颜色
        singledihedral: 0, //单双面
        direction: 0, //方向
        copies: 1, //份数
        maxPrint: 13, //打印范围最大
        minPrint: 1, //打印范围最小
        minimo: 0 //缩印
      }
    }
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    onChange(name, val) {
      this.pageData[name] = val
    },
    variable(num) {
      this.pageData.copies = num
    }
  }
}
</script>

.css1 {
    height: 100%;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
  }

.left {
    width: 46.44rem;
    margin-right: 1.88rem;
    .css1();

.title {
      font-size: 2.88rem;
      font-weight: bold;
      color: #d41212;
      line-height: 4.06rem;
      padding: 4.13rem 0 2.44rem;
    }

.content {
      width: 37rem;
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3rem;
      margin: 0 auto;
      text-align: left;
      text-indent: 2em;
    }
  }

.right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 53.19rem;
    .css1();
    padding: 0 4.81rem;
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 3.75rem;

.name {
      margin-top: 3.19rem;
    }

.only {
      width: 17.25rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      overflow: hidden;

div {
        width: 50%;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        line-height: 2.63rem;
        height: 100%;
        cursor: pointer;
      }

.act {
        background: #61aa8f;
        color: #ffffff;
      }
    }

.import {
      img {
        width: 2.75rem;
        height: 2.75rem;
        cursor: pointer;
      }
    }

input {
      width: 6.38rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      font-size: 1.88rem;
      font-weight: 400;
      color: #323232;
      text-align: center;
      margin: 0 0.94rem;
    }

.optionBox {
      select {
        width: 13.69rem;
        height: 3.19rem;
        padding-right: 3.56rem;
        border-radius: 0.63rem;
        border: 0.06rem solid #707070;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        text-align: center;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background: url('../assets/demo16.png') no-repeat scroll right center transparent;
        background-position-x: 11rem;
      }

select::-ms-expand {
        display: none;
      }
    }

.btn {
      width: 100%;
      height: 5.5rem;
      background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
      border-radius: 1.25rem;
      font-size: 1.88rem;
      font-weight: 400;
      color: #ffffff;
      line-height: 2.63rem;
      margin-top: 2.25rem;
      cursor: pointer;
    }
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>

<template>

  <div class="transcoding">
    <navbar :name="name"/>
    <div class="box flex-center">
      <div class="left">
        <div class="title">温馨提示</div>
        <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、列印方向、份数，以及打印范围（如果需要打印全部页码，可忽略不用修改）/缩印格式等。</div>
        <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div>
      </div>
      <div class="right">
        <div class="flex-between name">{{ pageData.name }}</div>
        <div class="flex-between">
          <div>纸张规格</div><div>{{ pageData.specification }}</div>
        </div>
        <div class="flex-between">
          <div>颜色</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.colour==0?'act':''" @click="onChange('colour',0)">黑白</div>
            <div class="flex-center" :class="pageData.colour==1?'act':''" @click="onChange('colour',1)">彩色</div>
          </div>
        </div>
        <div class="flex-between">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.singledihedral==0?'act':''" @click="onChange('singledihedral',0)">单面</div>
            <div class="flex-center" :class="pageData.singledihedral==1?'act':''" @click="onChange('singledihedral',1)">双面</div>
          </div>
        </div>
        <div class="flex-between">
          <div>方向</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.direction==0?'act':''" @click="onChange('direction',0)">横向</div>
            <div class="flex-center" :class="pageData.direction==1?'act':''" @click="onChange('direction',1)">纵向</div>
          </div>
        </div>
        <div class="flex-between">
          <div>份数</div>
          <div class="import flex-center">
            <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies<1?0:pageData.copies-1)">
            <input :value="pageData.copies" type="number" min="1">
            <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies+1)">
          </div>
        </div>


















        <div class="btn flex-center" @click="skip('pay',name)">下一步</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "argument",
  components: {
    navbar
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.$route.params.name,
      pageData: {
        name: '文件名称……文件名称.doc',//文件名称
        specification: 'A4',//纸张规格
        colour: 0,//颜色
        singledihedral: 0,//单双面
        direction: 0,//方向
        copies: 1,//份数
        maxPrint: 13,//打印范围最大
        minPrint: 1,//打印范围最小
        minimo: 0,//缩印
      }
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    onChange(name,val) {
      this.pageData[name] = val
    },
    variable(num) {
      this.pageData.copies = num
    },
  },
}
</script>

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0;
}
</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"> <!-- <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 class="bg-header"> <!-- 表格中单个单元格内容 --> <!-- <td>打印类型&格式</td> <td>单价</td> --> </tr> <tr :class="index === 0 ? 'bg-header' : ''" 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 { getPrintPrice } from '../api/resultApi' export default { name: 'explain', components: { navbar }, provide() { return { title: this.name, type: '' } }, data() { return { name: this.$route.params.name, tableData: [] } }, methods: { getPrintPrice() { getPrintPrice({ deviceId: this.cite.sbInfo.id }).then(res => { this.tableData = [{ name: '打印类型&格式', amount: '单价' }, ...res.data] }) } }, created() { this.getPrintPrice() }, mounted() {} } </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; } .bg-header { font-weight: bold; font-size: 1.3rem; background-color: #edeff6; } } } </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 class="bg-header"> <!-- 表格中单个单元格内容 --> <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 { getPrintPrice } from "../api/resultApi"; export default { name: "explain", components: { navbar, }, provide() { return { title: this.name, type: "", }; }, data() { return { name: this.$route.params.name, tableData: [], }; }, methods: { getPrintPrice() { getPrintPrice({ deviceId: this.cite.sbInfo.id }).then((res) => { this.tableData = res.data; }); }, }, created() { this.getPrintPrice(); }, mounted() {}, }; </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; } .bg-header { font-weight: bold; font-size: 1.3rem; background-color: #edeff6; } } } </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 class="bg-header">
            
            
          </tr>
          <tr :class="index === 0 ? 'bg-header' : ''" 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>

<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 class="bg-header">
            
            <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>

Show line notes below