小鑫初始化推送

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

README.md

@@ -0,0 +1,21 @@
+# wenhuayun_index
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,82 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,69 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>wenhuayun_index</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,66 @@
+{
+  "name": "wenhuayun_index",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "ltlzx <942659938@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "element-ui": "^2.15.3",
+    "mavon-editor": "^2.9.1",
+    "moment": "^2.29.1",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+  @import "./assets/css/main.css";
+</style>

src/api/index.js

@@ -0,0 +1,338 @@
+import request from '../utils/request';
+
+// 用户开户
+export const openAccount = query => {
+  return request({
+      url: '/api/user.Account/openAccount',
+      method: 'post',
+      data: query
+  });
+};
+// 获取单个类型资料
+export const getAccountInfo = query => {
+  return request({
+      url: '/api/user.Account/getAccountInfo',
+      method: 'get',
+      params: query
+  });
+};
+// 获取用户是否已开户
+export const isOpenAccount = query => {
+  return request({
+      url: '/api/user.Account/isOpenAccount',
+      method: 'get',
+      params: query
+  });
+};
+// 资产分类列表
+export const assetClassList = query => {
+  return request({
+      url: '/api/user.Asset/assetClassList',
+      method: 'get',
+      params: query
+  });
+};
+// 资产列表
+export const assetList = query => {
+  return request({
+      url: '/api/user.Asset/assetList',
+      method: 'get',
+      params: query
+  });
+};
+// 获取资产类型
+export const get_asset_type = query => {
+  return request({
+      url: '/api/user.Asset/get_asset_type',
+      method: 'get',
+      params: query
+  });
+};
+// 获取省份数据
+export const getProvince = query => {
+  return request({
+      url: 'api/Index/getProvince',
+      method: 'get',
+      params: query
+  });
+};
+// 获取市份数据
+export const getCity = query => {
+  return request({
+      url: '/api/Index/getCity',
+      method: 'get',
+      params: query
+  });
+};
+// 获取区镇数据
+export const getArea = query => {
+  return request({
+      url: '/api/Index/getArea',
+      method: 'get',
+      params: query
+  });
+};
+// 资产挂牌
+export const cartellino = query => {
+  return request({
+      url: '/api/user.Asset/cartellino',
+      method: 'post',
+      data: query
+  });
+};
+// 上传支付文件
+export const uploadPayFile = query => {
+  return request({
+      url: '/api/user.Asset/uploadPayFile',
+      method: 'post',
+      data: query
+  });
+};
+// 获取挂牌费用
+export const getPrice = query => {
+  return request({
+      url: '/api/user.Asset/getPrice',
+      method: 'get',
+      params: query
+  });
+};
+// 挂牌公告列表
+export const assetNoticeList = query => {
+  return request({
+      url: '/api/user.Asset/assetNoticeList',
+      method: 'get',
+      params: query
+  });
+};
+// 资产详情
+export const assetInfo = query => {
+  return request({
+      url: '/api/user.Asset/assetInfo',
+      method: 'get',
+      params: query
+  });
+};
+// 判断是否能购买
+export const checkBuy = query => {
+  return request({
+      url: '/api/user.Order/checkBuy',
+      method: 'get',
+      params: query
+  });
+};
+// 资产分类详情
+export const assetClassInfo = query => {
+  return request({
+      url: '/api/user.Asset/assetClassInfo',
+      method: 'get',
+      params: query
+  });
+};
+// 获取确认订单信息
+export const getConfirmOrder = query => {
+  return request({
+      url: '/api/user.Order/getConfirmOrder',
+      method: 'post',
+      data: query
+  });
+};
+// 提交订单
+export const submitOrder = query => {
+  return request({
+      url: '/api/user.Order/submitOrder',
+      method: 'post',
+      data: query
+  });
+};
+// 获取订单信息
+export const orderInfo = query => {
+  return request({
+      url: '/api/user.Order/orderInfo',
+      method: 'get',
+      params: query
+  });
+};
+// 订单上传线下转账记录
+export const uploadingRecord = query => {
+  return request({
+      url: '/api/user.Order/uploadingRecord',
+      method: 'post',
+      data: query
+  });
+};
+// 上传支付凭证
+export const uploadingPaymentDocument = query => {
+  return request({
+      url: '/api/user.Order/uploadingPaymentDocument',
+      method: 'post',
+      data: query
+  });
+};
+// 修改资产挂牌
+export const update_cartellino = query => {
+  return request({
+      url: '/api/user.Asset/update_cartellino',
+      method: 'post',
+      data: query
+  });
+};
+// 挂牌方订单列表
+export const seller_order_list = query => {
+  return request({
+      url: '/api/user.Order/seller_order_list',
+      method: 'get',
+      params: query
+  });
+};
+// 挂牌方订单列表
+export const buyer_order_list = query => {
+  return request({
+      url: '/api/user.Order/buyer_order_list',
+      method: 'get',
+      params: query
+  });
+};
+// 上传签约合同
+export const uploadingContract = query => {
+  return request({
+      url: '/api/user.Order/uploadingContract',
+      method: 'post',
+      data: query
+  });
+};
+// 确认交付
+export const confirmDelivery = query => {
+  return request({
+      url: '/api/user.Order/confirmDelivery',
+      method: 'post',
+      data: query
+  });
+};
+// 成交公告列表
+export const delist = query => {
+  return request({
+      url: '/api/user.Order/delist',
+      method: 'get',
+      params: query
+  });
+};
+// // 摘牌公告列表
+export const end_list = query => {
+  return request({
+      url: '/api/user.Order/end_list',
+      method: 'get',
+      params: query
+  });
+};
+// // 站内通知
+export const informList = query => {
+  return request({
+      url: '/api/Index/informList',
+      method: 'get',
+      params: query
+  });
+};
+// 收藏资产
+export const collectAsset = query => {
+  return request({
+      url: '/api/user.Asset/collectAsset',
+      method: 'post',
+      data: query
+  });
+};
+// 取消收藏资产
+export const cancelCollectAsset = query => {
+  return request({
+      url: '/api/user.Asset/cancelCollectAsset',
+      method: 'post',
+      data: query
+  });
+};
+// 资产收藏列表
+export const CollectList = query => {
+  return request({
+      url: '/api/user.Asset/CollectList',
+      method: 'get',
+      params: query
+  });
+};
+// 获取顶级资产类型
+export const getTopAssetClass = query => {
+  return request({
+      url: '/api/user.Asset/getTopAssetClass',
+      method: 'get',
+      params: query
+  });
+};
+// 获取顶级资产类型
+export const index = query => {
+  return request({
+      url: '/api/user.Index/index',
+      method: 'get',
+      params: query
+  });
+};
+// 申请下架（摘牌）
+export const soldOut = query => {
+  return request({
+      url: '/api/user.Asset/soldOut',
+      method: 'post',
+      data: query
+  });
+};
+// 上传图片
+export const uploadimg = query => {
+  return request({
+      url: '/api/Index/uploadimg',
+      method: 'post',
+      data: query
+  });
+};
+// 发生短信验证码
+export const sendSmsCode = query => {
+  return request({
+      url: '/api/user.User/sendSmsCode',
+      method: 'post',
+      data: query
+  });
+};
+// 登录
+export const login = query => {
+  return request({
+      url: '/api/user.User/login',
+      method: 'post',
+      data: query
+  });
+};
+// 摘牌公告详情
+export const end_detail = query => {
+  return request({
+      url: '/api/user.Asset/end_detail',
+      method: 'get',
+      params: query
+  });
+};
+// 挂牌公告详情
+export const assetNoticeInfo = query => {
+  return request({
+      url: '/api/user.Asset/assetNoticeInfo',
+      method: 'get',
+      params: query
+  });
+};
+// 获取协议
+export const getagreement = query => {
+  return request({
+      url: '/api/Index/getagreement',
+      method: 'get',
+      params: query
+  });
+};
+// 获取文件类型
+export const getFileType = query => {
+  return request({
+      url: '/api/Index/getFileType',
+      method: 'get',
+      params: query
+  });
+};

src/assets/css/main.css

@@ -0,0 +1,184 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+}
+
+a {
+    text-decoration: none
+}
+/*------------------------修改type=number的样式------------------------------------------------*/
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"]{
+  -moz-appearance: textfield;
+}
+
+
+.content-box {
+    position: absolute;
+    left: 250px;
+    right: 0;
+    top: 70px;
+    bottom: 0;
+    padding-bottom: 30px;
+    -webkit-transition: left .3s ease-in-out;
+    transition: left .3s ease-in-out;
+    background: #f0f0f0;
+}
+
+.content {
+    width: auto;
+    height: 100%;
+    padding: 10px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+}
+
+.content-collapse {
+    left: 65px;
+}
+
+.container {
+    padding: 30px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.crumbs {
+    margin: 10px 0;
+}
+
+.el-table th {
+    background-color: #f5f7fa !important;
+}
+
+.pagination {
+    margin: 20px 0;
+    text-align: center;
+}
+
+.plugins-tips {
+    padding: 20px 10px;
+    margin-bottom: 20px;
+}
+
+.el-button+.el-tooltip {
+    margin-left: 10px;
+}
+
+.el-table tr:hover {
+    background: #f6faff;
+}
+
+.mgb20 {
+    margin-bottom: 20px;
+}
+
+.move-enter-active,
+.move-leave-active {
+    transition: opacity .5s;
+}
+
+.move-enter,
+.move-leave {
+    opacity: 0;
+}
+
+/*BaseForm*/
+
+.form-box {
+    width: 600px;
+}
+
+.form-box .line {
+    text-align: center;
+}
+
+.el-time-panel__content::after,
+.el-time-panel__content::before {
+    margin-top: -7px;
+}
+
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+    padding-bottom: 0;
+}
+
+/*Upload*/
+
+.pure-button {
+    width: 150px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: #fff;
+    border-radius: 3px;
+}
+
+.g-core-image-corp-container .info-aside {
+    height: 45px;
+}
+
+.el-upload--text {
+    background-color: #fff;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    box-sizing: border-box;
+    width: 360px;
+    height: 180px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.el-upload--text .el-icon-upload {
+    font-size: 67px;
+    color: #97a8be;
+    margin: 40px 0 16px;
+    line-height: 50px;
+}
+
+.el-upload--text {
+    color: #97a8be;
+    font-size: 14px;
+    text-align: center;
+}
+
+.el-upload--text em {
+    font-style: normal;
+}
+
+/*VueEditor*/
+
+.ql-container {
+    min-height: 400px;
+}
+
+.ql-snow .ql-tooltip {
+    transform: translateX(117.5px) translateY(10px) !important;
+}
+
+.editor-btn {
+    margin-top: 20px;
+}
+
+/*markdown*/
+
+.v-note-wrapper .v-note-panel {
+    min-height: 500px;
+}

src/components/common/Footer.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="body">
+    <div class="foot_top">
+      <div class="foot_top_left">
+        <div class="foot_top_left_item">
+          <img src="../../assets/img/header_logo.png" alt="" class="QRcode">
+          <span>深圳文化产权交易所</span>
+          <span>公众号</span>
+        </div>
+        <div class="foot_top_left_item">
+          <img src="../../assets/img/header_logo.png" alt="" class="QRcode">
+          <span>深圳文化产权交易所</span>
+          <span>公众号</span>
+        </div>
+        <div class="foot_top_left_item">
+          <img src="../../assets/img/header_logo.png" alt="" class="QRcode">
+          <span>深圳文化产权交易所</span>
+          <span>公众号</span>
+        </div>
+      </div>
+      <div class="foot_top_right">
+        <div class="foot_top_right_item">
+          <div class="foot_top_right_item_title">
+            <span class="title_span">深圳</span>
+            <span>SHENZHEN</span>
+          </div>
+          <p>地址：广东省深圳市福田区滨河大道5008号</p>
+          <p>电话：0755-88266839</p>
+          <p>邮箱：szwenjiaosuo@126.com</p>
+          <p>QQ：3446235353</p>
+        </div>
+        <div class="foot_top_right_item">
+          <div class="foot_top_right_item_title">
+            <span class="title_span">北京业务联络处</span>
+            <span>BEIJING</span>
+          </div>
+          <p>地址：北京市朝阳区华文国际传媒大厦C座427室</p>
+          <p>电话：010-84244880</p>
+          <p>邮箱：szwenjiaosuo@126.com</p>
+          <p>QQ：1124357341</p>
+        </div>
+      </div>
+    </div>
+    <div class="foot_info">
+      Copyright 2021 深圳文化产权交易所 | 粤ICP备11099274号 | 粤公网安备： 44030402001783号 | 拍卖经营批准书：4406441100002018 | 广东省文物拍卖许可证：粤文物证2019001号
+    </div>
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style scoped>
+  .body{
+    width: 100%;
+    border-top: 2px solid black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    margin-top: 30px;
+    background-color: rgba(37, 46, 75, 1);
+  }
+  .body>div{
+    width: 1200px;
+  }
+  .foot_top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .foot_top_left,.foot_top_right{
+    display: flex;
+    align-items: center;
+  }
+  .foot_top_left_item{
+    font-size: 12px;
+    display: flex;
+    flex-direction: column;
+    color: #F3F6FF;
+    align-items: center;
+    margin-left: 55px;
+  }
+  .foot_top_left_item:first-child,.foot_top_right_item:first-child{
+    margin-left: 0;
+  }
+  .QRcode{
+    width: 116px;
+    height: 116px;
+    margin-bottom: 5px;
+  }
+  .foot_top_right_item{
+    margin-left: 55px;
+    width: 272px;
+  }
+  .foot_top_right_item>p{
+    font-size: 12px;
+    color: #F3F6FF;
+    margin-top: 10px;
+  }
+  .foot_top_right_item_title{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 0;
+    border-bottom: 1px solid #AAAAAA;
+    font-size: 14px;
+    color: #F3F6FF;
+  }
+  .title_span{
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .foot_info{
+    font-size: 12px;
+    color: #F3F6FF;
+    margin-top: 20px;
+  }
+</style>

src/components/common/Header.vue

@@ -0,0 +1,443 @@
+<template>
+  <div class="header">
+    <div class="header_login">
+      <span>
+        <template v-if="login_type==1">
+          您好，{{login_info.username}}
+          <span class="header_login_span" @click="loginOut">退出登录</span>
+        </template>
+      </span>
+      <div class="header_title">
+        <span v-if="login_type==0" @click="showLogin">用户登录</span>
+        <span v-else @click="UserConsole(0,0)">交易平台首页</span>
+        <span @click="UserConsole(1,0)" v-if="login_type==1">用户控制台</span>
+        <span>联系客服</span>
+        <span>帮助中心</span>
+        <span>友情链接</span>
+      </div>
+    </div>
+    <div class="header_content">
+      <img src="../../assets/img/header_logo.png" alt="" class="header_logo">
+      <div class="header_sidebar">
+        <div class="header_sidebar_left">
+          <span v-for="(item , index) in sidebarList" :key='index' :class="activeClass==item.url ? 'activeClass': ''" @click="goPage(item.url)"> {{item.name}}</span>
+        </div>
+        <el-input
+          class="header_search"
+          placeholder="标的名称/所在地/编号"
+          suffix-icon="el-icon-search"
+          v-model="search">
+        </el-input>
+      </div>
+    </div>
+    <el-dialog title="登录" :visible.sync="isshowLogin" width="30%" center>
+      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
+        <el-form-item prop="phone">
+            <el-input v-model="param.phone" placeholder="请输入手机号码">
+                <el-button slot="prepend" icon="el-icon-user"></el-button>
+            </el-input>
+        </el-form-item>
+        <el-form-item prop="smscode">
+            <el-input
+                placeholder="请输入验证码 "
+                v-model="param.smscode"
+                @keyup.enter.native="submitForm()"
+            >
+                <el-button slot="prepend" icon="el-icon-lock"></el-button>
+                <el-button slot="suffix" class="code_button" @click="sendSmsCode" :disabled="isVerCode">
+                  <span v-if="!isVerCode">获取验证码</span>
+                  <span v-if="isVerCode">{{codeCount}}s</span>
+                </el-button>
+            </el-input>
+        </el-form-item>
+        <div class="login-btn">
+          <el-button type="primary" @click="submitForm()">登录</el-button>
+        </div>
+        <div class="reg">
+          <a href="https://www.szcaee.cn">用户注册</a>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+
+</template>
+<script>
+import {isOpenAccount,sendSmsCode,login} from '../../api/index'
+export default {
+  data() {
+    return {
+      activeClass:'',
+      search:'',
+      login_type:0 ,
+      examine_type:0,
+      examine_data:{},
+      sidebarListType:0,
+      sidebarList:[
+        {name:'首页',url:'/index'},
+        // {name:'标的分类',url:'/AssetClassification'},
+        {name:'标的分类',url:'/ClassificationDetails'},
+        {name:'挂牌公告',url:'/Listing'},
+        {name:'成交公告',url:'/Deal'},
+        {name:'摘牌公告',url:'/DelistingNotice'},
+        {name:'站内通知',url:'/StationNotice'},
+      ],
+      isshowLogin:false,
+      param:{
+        phone: '',
+        smscode: '',
+      },
+      rules: {
+        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
+        smscode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+      },
+      isVerCode:false,
+      codeCount:60,
+      login_info:''
+    }
+  },
+  methods:{
+    loginOut(){
+      localStorage.removeItem('login_info')
+      location.reload()
+    },
+    submitForm(){
+      this.$refs['login'].validate(valid=>{
+        if (valid) {
+          login(this.param).then(res=>{
+            console.info(res);
+            if (res.code==200) {
+              localStorage.setItem('login_info',JSON.stringify(res.data))
+              this.$message.success('登录成功~')
+              this.isshowLogin=false,
+              this.login_info=res.data;
+              this.login_type=1
+              localStorage.setItem('login_type',this.login_type)
+            }else{
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    },
+    //获取验证码
+    sendSmsCode(){
+       //axios请求
+      if (this.param.phone=='') {
+        this.$message.error('请输入手机号码~')
+        return false
+      }
+      sendSmsCode(this.param).then(res=>{
+        console.info(res);
+        if (res.code==101) {
+          this.$message.error(res.msg)
+          return  false
+        }else{
+          this.$message.success(res.msg)
+        }
+      })
+      // 验证码倒计时
+      if (!this.timer) {
+        this.codeCount = 60;
+        this.isVerCode = true;
+        this.timer = setInterval(() => {
+          if (this.codeCount > 0 && this.codeCount <= 60) {
+            this.codeCount--;
+          } else {
+            this.isVerCode =  false;
+            clearInterval(this.timer);
+            this.timer = null;
+          }
+        }, 1000);
+      }
+    },
+    isOpenAccount(){
+      if (this.sidebarListType==0) {
+        return false
+      }
+      let data={user_id:this.login_info.id}
+      // let data={user_id:8}
+      isOpenAccount(data).then(res => {
+        // console.info(res)
+        if(res.code==100){
+          this.examine_data=res.data
+          let index;
+          for(let i=0; i<this.sidebarList.length;i++){
+            if (this.activeClass==this.sidebarList[i].url) {
+              index=i
+            }
+          }
+          if(res.data.is_buyer>0 &&res.data.buyer_status==1){
+            this.sidebarList[0].url='/Purchaser'
+          }else{
+            this.sidebarList[0].url='/wkPurchaser'
+          }
+          if(res.data.is_enter_shop>0 &&res.data.enter_shop_status==1){
+            this.sidebarList[1].url='/Hoster'
+          }else{
+            this.sidebarList[1].url='/wkTrusteeship'
+          }
+          if(res.data.is_third_party>0 &&res.data.third_party_status==1){
+            this.sidebarList[2].url='/wkThird'
+          }else{
+            this.sidebarList[2].url='/wkThird'
+          }
+          if (typeof(index)=='undefined') {
+            for(let i=0; i<this.sidebarList.length;i++){
+              if (this.activeClass==this.sidebarList[i].url) {
+                index=i
+              }
+            }
+          }
+          if (typeof(index)!='undefined' && this.activeClass!=this.sidebarList[index].url) {
+            this.goPage(this.sidebarList[index].url)
+          }
+        }else{
+          this.$message.error(res.msg)
+        }
+      });
+    },
+    //显示用户登录
+    showLogin(){
+      this.isshowLogin=true
+    },
+    UserConsole(type,goType){
+      // this.login_type=type;
+      console.info(type)
+      this.sidebarListType=type
+      if(type==1){
+        this.sidebarList=[
+          {name:'摘牌方',url:''},
+          {name:'挂牌方',url:''},
+          {name:'第三方服务机构',url:''},
+          // {name:'我的账户',url:''},
+        ]
+        if(this.examine_data.is_buyer>0 && this.examine_data.buyer_status>0){
+          this.sidebarList[0].url='/Purchaser'
+        }else{
+          this.sidebarList[0].url='/wkPurchaser'
+        }
+        if(this.examine_data.is_enter_shop>0 && this.examine_data.enter_shop_status>0){
+          this.sidebarList[1].url='/Hoster'
+        }else{
+          this.sidebarList[1].url='/wkTrusteeship'
+        }
+        if(this.examine_data.is_third_party>0 && this.examine_data.third_party_status>0){
+          this.sidebarList[2].url='/wkThird'
+        }else{
+          this.sidebarList[2].url='/wkThird'
+        }
+        if(goType==0){
+          this.goPage(this.sidebarList[0].url)
+        }
+      }else{
+        this.sidebarList=[
+          {name:'首页',url:'/index'},
+          {name:'标的分类',url:'/ClassificationDetails'},
+          {name:'挂牌公告',url:'/Listing'},
+          {name:'成交公告',url:'/Deal'},
+          {name:'摘牌公告',url:'/DelistingNotice'},
+          {name:'站内通知',url:'/StationNotice'},
+        ]
+        if(goType==0){
+          this.goPage('/index')
+        }
+      }
+    },
+    goPage(url){
+      this.$router.replace(url)
+    },
+  },
+  watch:{
+    $route(newValue, oldValue){
+      this.activeClass='/'+newValue.path.split('/')[1]
+      if(this.login_type==1){
+        this.isOpenAccount()
+      }
+    },
+
+  },
+  created(){
+    this.login_info=JSON.parse(localStorage.getItem('login_info'));
+    if (this.login_info==null) {
+      this.login_type=0
+      localStorage.setItem('login_type',0)
+    }
+    console.info(this.login_info)
+    this.activeClass=this.$route.path
+    this.login_type=localStorage.getItem('login_type')
+    let type=0;
+    console.info(this.sidebarList)
+    for(let i=0 ; i<this.sidebarList.length;i++){
+      if (this.sidebarList[i].url==this.activeClass) {
+        type=0
+        return
+      }else{
+        type=1
+      }
+    }
+    if (type==1) {
+      this.UserConsole(this.login_type,1)
+    }
+    if(this.login_type==1){
+      this.isOpenAccount()
+    }
+
+  }
+}
+</script>
+<style scoped>
+  .header{
+    background-color: #29304D;
+    width: 100%;
+    height: 185px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .reg {
+    text-align: right;
+    /* margin-top: -10px; */
+  }
+  .reg a{
+    font-size: 13px;
+    color: #7F7F7F;
+  }
+  .header_login{
+    font-size: 12px;
+    color: #F6D79D;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 1200px;
+    line-height: 45px;
+    height: 45px;
+  }
+  .header_login_span{
+    display: inline-block;
+    margin-left: 20px;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  .code_button{
+    border-right: none;
+  }
+  .header_title{
+    text-align: right;
+    line-height: 45px;
+    color: #F6D79D;
+    font-size: 12px;
+  }
+  .header_title>span{
+    display: inline-block;
+    margin-right: 15px;
+  }
+  .header_title>span:hover{
+    color: #C94C4C;
+    cursor: pointer;
+  }
+  .header_title>span:last-child{
+    margin-right: 0;
+  }
+  .header_content{
+    height: 140px;
+    width: 1200px;
+    display: flex;
+    flex-direction: column;
+    /* align-items: center; */
+    justify-content: center;
+  }
+  .header_logo{
+    width: 300px;
+    height: 52px;
+  }
+  .header_sidebar{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 57px;
+  }
+  .header_sidebar_left{
+    color: white;
+  }
+  .header_sidebar_left>span{
+    display: inline-block;
+    width: 100px;
+    height: 30px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 30px;
+    cursor: pointer;
+    padding: 0 5px;
+  }
+  .header_sidebar_left>span:hover{
+    color: #C94C4C;
+    background-color: white;
+    border-radius: 25px;
+  }
+  .activeClass{
+    background-color: white;
+    border-radius: 20px 20px 0  0 ;
+    color: #C94C4C;
+  }
+  .activeClass:hover{
+    border-radius: 20px 20px 0  0 !important;
+  }
+  .header_search{
+    width: 220px;
+    margin-bottom: 10px;
+  }
+  .header_sidebar>>>.el-input__inner{
+    border: none ;
+    border-radius: 25px;
+  }
+  .header_search >>>.el-input__suffix{
+    color: #E9B7B7;
+    right: 10px;
+  }
+  .header_sidebar>>>.el-input__inner::-webkit-input-placeholder {
+    color: #F17F7F;
+  }
+  .header_sidebar>>>.el-input__inner::-moz-input-placeholder {
+    color: #F17F7F;
+  }
+  .header_sidebar>>>.el-input__inner::-ms-input-placeholder {
+    color: #F17F7F;
+  }
+.ms-title {
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 1px solid #ddd;
+}
+.ms-login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+}
+.ms-content {
+    padding: 30px 30px;
+}
+.el-input--small {
+    font-size: 13px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    font-size: 12px;
+    line-height: 30px;
+    color: #fff;
+}
+</style>

src/components/common/Home.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <Header ref="headerChild"></Header>
+    <div :class="isBody ?'body' :''">
+      <router-view @UserConsole="UserConsole"/>
+    </div>
+    <Footer/>
+  </div>
+</template>
+<script>
+import Header from './Header.vue';
+import Footer from './Footer.vue';
+export default {
+  data(){
+    return{
+      isBody:false
+    }
+  },
+  components:{
+    Header,Footer
+  },
+  methods:{
+    UserConsole(){
+
+    }
+  },
+  created(){
+    if (this.$route.path=='/index') {
+        this.isBody=false
+      }else{
+        this.isBody=true
+      }
+  },
+  watch:{
+    $route(newValue, oldValue){
+      if (newValue.path=='/index') {
+        this.isBody=false
+      }else{
+        this.isBody=true
+      }
+    }
+  },
+}
+</script>
+<style scoped>
+  body{
+    margin: 0;
+  }
+  .body{
+    width: 1200px;
+    margin: 0 auto;
+  }
+</style>

src/components/common/countDown.vue

@@ -0,0 +1,77 @@
+<template>
+    <span :endTime="endTime" :callback="callback" :endText="endText" class="order_time">
+        <slot>
+            {{content}}
+        </slot>
+    </span>
+</template>
+<script>
+  export default {
+      data(){
+          return {
+          content: '',
+          }
+      },
+      props:{
+          endTime:{
+              type: Number,
+              default :''
+          },
+          endText:{
+              type : String,
+              default:'已结束'
+          },
+          callback : {
+              type : Function,
+              default :''
+          }
+      },
+      mounted () {
+        this.countdowm(this.endTime)
+      },
+      methods: {
+        countdowm(timestamp){
+          let self = this;
+          let timer = setInterval(function(){
+              let nowTime = new Date();
+              let endTime = new Date(timestamp * 1000);
+              let t = endTime.getTime() - nowTime.getTime();
+              if(t>0){
+                  let day = Math.floor(t/86400000);
+                  let hour=Math.floor((t/3600000)%24);
+                  let min=Math.floor((t/60000)%60);
+                  let sec=Math.floor((t/1000)%60);
+                  hour = hour < 10 ? "0" + hour : hour;
+                  min = min < 10 ? "0" + min : min;
+                  sec = sec < 10 ? "0" + sec : sec;
+                  let format = '';
+                  if(day > 0){
+                      format =  `${day}天${hour}小时${min}分${sec}秒`;
+                  }
+                  if(day <= 0 && hour > 0 ){
+                      format = `${hour}小时${min}分${sec}秒`;
+                  }
+                  if(day <= 0 && hour <= 0){
+                      format =`${min}分${sec}秒`;
+                  }
+                  self.content = format;
+                  }else{
+                    clearInterval(timer);
+                    self.content = self.endText;
+                    self._callback();
+                  }
+                },1000);
+            },
+          _callback(){
+            if(this.callback && this.callback instanceof Function){
+              this.callback(...this);
+            }
+          }
+      }
+  }
+</script>
+<style scoped>
+  .order_time{
+    color: #89201F;
+  }
+</style>

src/components/common/country.js

@@ -0,0 +1,204 @@
+export function monthArray(){
+  const monthArray=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
+  return monthArray;
+}
+export function staticCountryArray(){
+  const countrys=[{
+    label: '热门国家',
+    options: [{value:'China',label:'中国'},]
+  },{
+    label: '所有国家',
+    options: [
+    {value:'Angola',label:'安哥拉'},
+    {value:'Afghanistan',label:'阿富汗'},
+    {value:'Albania',label:'阿尔巴尼亚'},
+    {value:'Algeria',label:'阿尔及利亚'},
+    {value:'Andorra',label:'安道尔共和国'},
+    {value:'Anguilla',label:'安圭拉岛'},
+    {value:'Antigua and Barbuda',label:'安提瓜和巴布达'},
+    {value:'Argentina',label:'阿根廷'},
+    {value:'Armenia',label:'亚美尼亚'},
+    {value:'Ascension',label:'阿森松'},
+    {value:'Australia',label:'澳大利亚'},
+    {value:'Austria',label:'奥地利'},
+    {value:'Azerbaijan',label:'阿塞拜疆'},
+    {value:'Bahamas',label:'巴哈马'},
+    {value:'Bahrain',label:'巴林'},
+    {value:'Bangladesh',label:'孟加拉国'},
+    {value:'Barbados',label:'巴巴多斯'},
+    {value:'Belarus',label:'白俄罗斯'},
+    {value:'Belgium',label:'比利时'},
+    {value:'Belize',label:'伯利兹'},
+    {value:'Benin',label:'贝宁'},
+    {value:'Bermuda Is',label:'百慕大群岛'},
+    {value:'Bolivia',label:'玻利维亚'},
+    {value:'Botswana',label:'博茨瓦纳'},
+    {value:'Brazil',label:'巴西'},
+    {value:'Brunei',label:'文莱'},
+    {value:'Bulgaria',label:'保加利亚'},
+    {value:'Burkina Faso',label:'布基纳法索'},
+    {value:'Burma',label:'缅甸'},
+    {value:'Burundi',label:'布隆迪'},
+    {value:'Cameroon',label:'喀麦隆'},
+    {value:'Canada',label:'加拿大'},
+    {value:'Cayman Is',label:'开曼群岛'},
+    {value:'Central African Republic',label:'中非共和国'},
+    {value:'Chad',label:'乍得'},
+    {value:'Chile',label:'智利'},
+    {value:'China',label:'中国'},
+    {value:'Colombia',label:'哥伦比亚'},
+    {value:'Congo',label:'刚果'},
+    {value:'Cook Is',label:'库克群岛'},
+    {value:'Costa Rica',label:'哥斯达黎加'},
+    {value:'Cuba',label:'古巴'},
+    {value:'Cyprus',label:'塞浦路斯'},
+    {value:'Czech Republic',label:'捷克'},
+    {value:'Denmark',label:'丹麦'},
+    {value:'Djibouti',label:'吉布提'},
+    {value:'Dominica Rep',label:'多米尼加共和国'},
+    {value:'Ecuador',label:'厄瓜多尔'},
+    {value:'Egypt',label:'埃及'},
+    {value:'EI Salvador',label:'萨尔瓦多'},
+    {value:'Estonia',label:'爱沙尼亚'},
+    {value:'Ethiopia',label:'埃塞俄比亚'},
+    {value:'Fiji',label:'斐济'},
+    {value:'Finland',label:'芬兰'},
+    {value:'France',label:'法国'},
+    {value:'French Guiana',label:'法属圭亚那'},
+    {value:'French Polynesia',label:'法属玻利尼西亚'},
+    {value:'Gabon',label:'加蓬'},
+    {value:'Gambia',label:'冈比亚'},
+    {value:'Georgia',label:'格鲁吉亚'},
+    {value:'Germany',label:'德国'},
+    {value:'Ghana',label:'加纳'},
+    {value:'Gibraltar',label:'直布罗陀'},
+    {value:'Greece',label:'希腊'},
+    {value:'Grenada',label:'格林纳达'},
+    {value:'Guam',label:'关岛'},
+    {value:'Guatemala',label:'危地马拉'},
+    {value:'Guinea',label:'几内亚'},
+    {value:'Guyana',label:'圭亚那'},
+    {value:'Haiti',label:'海地'},
+    {value:'Honduras',label:'洪都拉斯'},
+    {value:'Hungary',label:'匈牙利'},
+    {value:'Iceland',label:'冰岛'},
+    {value:'India',label:'印度'},
+    {value:'Indonesia',label:'印度尼西亚'},
+    {value:'Iran',label:'伊朗'},
+    {value:'Iraq',label:'伊拉克'},
+    {value:'Ireland',label:'爱尔兰'},
+    {value:'Israel',label:'以色列'},
+    {value:'Italy',label:'意大利'},
+    {value:'Ivory Coast',label:'科特迪瓦'},
+    {value:'Jamaica',label:'牙买加'},
+    {value:'Japan',label:'日本'},
+    {value:'Jordan',label:'约旦'},
+    {value:'Kampuchea (Cambodia )',label:'柬埔寨'},
+    {value:'Kazakstan',label:'哈萨克斯坦'},
+    {value:'Kenya',label:'肯尼亚'},
+    {value:'Korea',label:'韩国'},
+    {value:'Kuwait',label:'科威特'},
+    {value:'Kyrgyzstan',label:'吉尔吉斯坦'},
+    {value:'Laos',label:'老挝'},
+    {value:'Latvia',label:'拉脱维亚'},
+    {value:'Lebanon',label:'黎巴嫩'},
+    {value:'Lesotho',label:'莱索托'},
+    {value:'Liberia',label:'利比里亚'},
+    {value:'Libya',label:'利比亚'},
+    {value:'Liechtenstein',label:'列支敦士登'},
+    {value:'Lithuania',label:'立陶宛'},
+    {value:'Luxembourg',label:'卢森堡'},
+    {value:'Madagascar',label:'马达加斯加'},
+    {value:'Malawi',label:'马拉维'},
+    {value:'Malaysia',label:'马来西亚'},
+    {value:'Maldives',label:'马尔代夫'},
+    {value:'Mali',label:'马里'},
+    {value:'Malta',label:'马耳他'},
+    {value:'Mariana Is',label:'马里亚那群岛'},
+    {value:'Martinique',label:'马提尼克'},
+    {value:'Mauritius',label:'毛里求斯'},
+    {value:'Mexico',label:'墨西哥'},
+    {value:'Moldova',label:'摩尔多瓦'},
+    {value:'Monaco',label:'摩纳哥'},
+    {value:'Mongolia',label:'蒙古'},
+    {value:'Montserrat Is',label:'蒙特塞拉特岛'},
+    {value:'Morocco',label:'摩洛哥'},
+    {value:'Mozambique',label:'莫桑比克'},
+    {value:'Namibia',label:'纳米比亚'},
+    {value:'Nauru',label:'瑙鲁'},
+    {value:'Nepal',label:'尼泊尔'},
+    {value:'Netheriands Antilles',label:'荷属安的列斯'},
+    {value:'Netherlands',label:'荷兰'},
+    {value:'New Zealand',label:'新西兰'},
+    {value:'Nicaragua',label:'尼加拉瓜'},
+    {value:'Niger',label:'尼日尔'},
+    {value:'Nigeria',label:'尼日利亚'},
+    {value:'North Korea',label:'朝鲜'},
+    {value:'Norway',label:'挪威'},
+    {value:'Oman',label:'阿曼'},
+    {value:'Pakistan',label:'巴基斯坦'},
+    {value:'Panama',label:'巴拿马'},
+    {value:'Papua New Cuinea',label:'巴布亚新几内亚'},
+    {value:'Paraguay',label:'巴拉圭'},
+    {value:'Peru',label:'秘鲁'},
+    {value:'Philippines',label:'菲律宾'},
+    {value:'Poland',label:'波兰'},
+    {value:'Portugal',label:'葡萄牙'},
+    {value:'Puerto Rico',label:'波多黎各'},
+    {value:'Qatar',label:'卡塔尔'},
+    {value:'Reunion',label:'留尼旺'},
+    {value:'Romania',label:'罗马尼亚'},
+    {value:'Russia',label:'俄罗斯'},
+    {value:'Saint Lueia',label:'圣卢西亚'},
+    {value:'Saint Vincent',label:'圣文森特岛'},
+    {value:'Samoa Eastern',label:'东萨摩亚(美)'},
+    {value:'Samoa Western',label:'西萨摩亚'},
+    {value:'San Marino',label:'圣马力诺'},
+    {value:'Sao Tome and Principe',label:'圣多美和普林西比'},
+    {value:'Saudi Arabia',label:'沙特阿拉伯'},
+    {value:'Senegal',label:'塞内加尔'},
+    {value:'Seychelles',label:'塞舌尔'},
+    {value:'Sierra Leone',label:'塞拉利昂'},
+    {value:'Singapore',label:'新加坡'},
+    {value:'Slovakia',label:'斯洛伐克'},
+    {value:'Slovenia',label:'斯洛文尼亚'},
+    {value:'Solomon Is',label:'所罗门群岛'},
+    {value:'Somali',label:'索马里'},
+    {value:'South Africa',label:'南非'},
+    {value:'Spain',label:'西班牙'},
+    {value:'SriLanka',label:'斯里兰卡'},
+    {value:'St.Lucia',label:'圣卢西亚'},
+    {value:'St.Vincent',label:'圣文森特'},
+    {value:'Sudan',label:'苏丹'},
+    {value:'Suriname',label:'苏里南'},
+    {value:'Swaziland',label:'斯威士兰'},
+    {value:'Sweden',label:'瑞典'},
+    {value:'Switzerland',label:'瑞士'},
+    {value:'Syria',label:'叙利亚'},
+    {value:'Tajikstan',label:'塔吉克斯坦'},
+    {value:'Tanzania',label:'坦桑尼亚'},
+    {value:'Thailand',label:'泰国'},
+    {value:'Togo',label:'多哥'},
+    {value:'Tonga',label:'汤加'},
+    {value:'Trinidad and Tobago',label:'特立尼达和多巴哥'},
+    {value:'Tunisia',label:'突尼斯'},
+    {value:'Turkey',label:'土耳其'},
+    {value:'Turkmenistan',label:'土库曼斯坦'},
+    {value:'Uganda',label:'乌干达'},
+    {value:'Ukraine',label:'乌克兰'},
+    {value:'United Arab Emirates',label:'阿拉伯联合酋长国'},
+    {value:'United Kiongdom',label:'英国'},
+    {value:'United States of America',label:'美国'},
+    {value:'Uruguay',label:'乌拉圭'},
+    {value:'Uzbekistan',label:'乌兹别克斯坦'},
+    {value:'Venezuela',label:'委内瑞拉'},
+    {value:'Vietnam',label:'越南'},
+    {value:'Yemen',label:'也门'},
+    {value:'Yugoslavia',label:'南斯拉夫'},
+    {value:'Zimbabwe',label:'津巴布韦'},
+    {value:'Zaire',label:'扎伊尔'},
+    {value:'Zambia',label:'赞比亚'}
+    ]
+  }]
+  return countrys;
+}

src/components/page/AssetClassification.vue

@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <div class="condition" v-for="(item) in conditionList" :key="item.id">
+      <div class="condition_title">{{item.name}}</div>
+      <div class="condition_item" v-for="(item1) in item.children" :key="item1.id">
+        <span class="condition_item_span">{{item1.name}}</span>
+        <div class="condition_item_right">
+          <span v-for="(item2) in item1.children" :key="item2.id" @click="goDetails">{{item2.name}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {assetClassList} from '../../api/index'
+export default {
+  data(){
+    return{
+      conditionList:[
+        {title:'人才产权',data:[{name:'人力资本产权',condition:[{item:'使用权'},{item:'所有权'},{item:'收益权'},{item:'处置权'}]}]},
+        {
+          title:'无形实物资产 ',
+          data:[
+            {
+              name:'著作权',
+              condition:[
+                {item:'复制权'},{item:'发行权'},{item:'出租权'},{item:'展览权'},{item:'表演权'},{item:'放映权'},{item:'广播权'},{item:'摄制权'},
+                {item:'改编权'},{item:'翻译权'},{item:'汇编权'},{item:'信息网络传播权'},{item:'使用权'},{item:'所有权'}
+              ]
+            },
+            {
+              name:'专利权',
+              condition:[{item:'发明专利'},{item:'实用新型专利'},{item:'外观设计专利'},{item:'使用权'},{item:'所有权'}]
+            },
+            {
+              name:'专有技术',
+              condition:[
+                {item:'设计资料'},{item:'技术规范'},{item:'工艺流程'},{item:'配方'},{item:'图纸'},{item:'数据'},{item:'经营诀窍'},{item:'使用权'},{item:'所有权'}
+              ]
+            },
+            {
+              name:'商标资产',
+              condition:[{item:'商标专用权'},{item:'商标许可权'}]
+            },
+            {
+              name:'销售网络',
+              condition:[{item:'使用权'},{item:'所有权'}]
+            },
+            {
+              name:'客户关系',
+              condition:[{item:'使用权'},{item:'所有权'}]
+            },
+            {
+              name:'特许经营权',
+              condition:[{item:'独占许可'},{item:'独家许可'},{item:'普通许可'}]
+            },
+            {
+              name:'合同权益',
+              condition:[{item:'租赁合同'},{item:'劳务性合同'},{item:'销售合同'},{item:'债权合同'},{item:'股权合同'}]
+            },
+            {
+              name:'域名和商誉',
+              condition:[{item:'域名'},{item:'商誉'}]
+            },
+          ]
+        },
+        {
+          title:'有形实物资产 ',
+          data:[
+            {
+              name:'房屋',
+              condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}]
+            },
+            {
+              name:'土地',
+              condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}]
+            },
+            {
+              name:'园林绿化',
+              condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}]
+            },
+            {
+              name:'船舶',
+              condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}]
+            },
+            {
+              name:'车辆',
+              condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}]
+            },
+            {
+              name:'工艺品',
+              condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}]
+            },
+            {
+              name:'家具电器',
+              condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}]
+            },
+            {
+              name:'其他有形实物',
+              condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}]
+            },
+          ]
+        }
+      ]
+    }
+  },
+  created(){
+    this.assetClassList()
+  },
+  methods:{
+    //获取资产分类列表
+    assetClassList(){
+      assetClassList ().then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.conditionList=res.data
+        }
+      })
+    },
+    goDetails(){
+      this.$router.push('/ClassificationDetails')
+    }
+  }
+}
+</script>
+<style scoped>
+.condition{
+  margin-top: 30px;
+}
+.condition:first{
+  margin-top: 0;
+}
+.condition_title{
+  font-weight: bold;
+  font-size: 20px;
+  border-bottom: 2px solid #EAB1B1;
+}
+.condition_item{
+  margin-top: 15px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+.condition_item_span{
+  width: 150px;
+  display: inline-block;
+  color: #555555;
+}
+.condition_item_right{
+  margin-left: 20px;
+  font-size: 12px;
+  color: #555555;
+}
+.condition_item_right>span{
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 15px;
+}
+.condition_item_right>span:first{
+  margin-left: 0;
+}
+.condition_item_right>span:hover{
+  color: #C94C4C;
+}
+</style>

src/components/page/AssetDetails.vue

@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div class="asset">
+      <div class="asset_banner">
+        <el-carousel trigger="click" height="425px" ref="carousel">
+          <el-carousel-item v-for="(item,index) in listingList.serial_img" :key="index">
+            <img :src="item" alt="" class="asset_banner_img">
+          </el-carousel-item>
+        </el-carousel>
+        <div class="asset_banner1">
+          <img :src="item" alt="" v-for="(item,index) in listingList.serial_img" :key="index" @click="setActiveItem(index)">
+        </div>
+      </div>
+
+      <div class="asset_info">
+        <p class="asset_info_title">{{listingList.serial_name}}</p>
+        <p class="asset_info_p">
+          <span>评估价格：</span>
+          <span class="asset_info_span">¥ {{listingList.cartellino_type==1 ? listingList.price: listingList.start_auction_money}}</span>
+        </p>
+        <p class="asset_info_p">
+          <span>标的编号：</span>
+          <span class="asset_info_span1">{{listingList.serial_number}}</span>
+        </p>
+        <p class="asset_info_p">
+          <span>标的类型：</span>
+          <span class="asset_info_span1">{{listingList.serial_type_name}}</span>
+        </p>
+        <p class="asset_info_p">
+          <span>所在地：</span>
+          <span class="asset_info_span1">{{listingList.province_name}} {{listingList.city_name}} {{listingList.area_name}}</span>
+        </p>
+        <p class="asset_info_p">
+          <span>交易方式：</span>
+          <span class="asset_info_span1">{{listingList.buy_mode==1 ? '线下交易' : '线上交易'}}（{{listingList.goods_mode==1? '现场交付' :'物流配送'}}）</span>
+        </p>
+        <p class="asset_info_p">
+          <span>有效日期：</span>
+          <span class="asset_info_span1">{{listingList.effective_date}} 前</span>
+        </p>
+        <p class="asset_info_p">
+          <span>数量：</span>
+          <el-input v-model="listingList.pay_count" placeholder="请输入标的所在地" class="seach_input" ></el-input>
+          <span class="asset_info_span2">{{listingList.asset_unit}}（可购数量{{listingList.surplus_count}}{{listingList.asset_unit}}）</span>
+        </p>
+        <p class="asset_info_p1">浏览记录 {{listingList.views}}次</p>
+        <div class="asset_info_button">
+          <div class="purchase" @click="checkBuy(0)">
+            <span>{{listingList.surplus_count==0&&listingList.order_start==1?'正在交易':'立即购买' }}</span>
+            <countDown :endTime="listingList.pay_overdue_time" :callback="callback"  endText="已经结束了" class="countDown" v-if="listingList.surplus_count==0"></countDown>
+          </div>
+          <!-- <button class="purchase" @click="checkBuy(0)">{{listingList.surplus_count==0?'正在交易':'立即购买' }}</button> -->
+          <button class="assessment" @click="checkBuy(1)">标的评估</button>
+          <button class="collection" v-if="!listingList.is_collect" @click="collectAsset">放入收藏</button>
+          <button class="collection" v-else @click="cancelCollectAsset">取消收藏</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="asset1">
+      <div class="asset1_title">
+        <div  class="asset1_title_item" :class=" asset1_title==0?'asset1_title_item_active':'' " @click="tabAsset1_title(0)">标的介绍</div>
+        <!-- <div  class="asset1_title_item" :class=" asset1_title==1?'asset1_title_item_active':'' " @click="tabAsset1_title(1)">挂牌公告内容</div> -->
+        <!-- <div class="asset1_title_item">购买须知</div>
+        <div class="asset1_title_item">历史评价</div> -->
+      </div>
+      <div class="asset1_content">
+        <div class="asset1_content_title">交易信息</div>
+        <p>标的单价：¥ {{listingList.cartellino_type==1 ? listingList.price: listingList.start_auction_money}}</p>
+        <p>标的单位："{{listingList.asset_unit}}"</p>
+        <p>挂牌数量：{{listingList.count}}</p>
+        <p>起购数量：{{listingList.pay_count}}</p>
+        <p>付款方式：{{listingList.pay_mode==1?'网银支付':'对公转账'}}</p>
+        <p>交易方式：{{listingList.buy_mode==1?'线下交易':'线上交易'}}</p>
+
+        <div class="asset1_content_title">基础信息</div>
+        <p>标的名称：{{listingList.serial_name}}</p>
+        <p>标的类型：{{listingList.serial_type_name}}</p>
+        <p>标的所在地：{{listingList.province_name}} {{listingList.city_name}} {{listingList.area_name}}</p>
+        <p>标的基本情况：{{listingList.serial_describe}}</p>
+        <p>挂牌时长：{{listingList.effective_date}} 前</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {assetInfo,checkBuy,cancelCollectAsset,collectAsset} from '../../api/index'
+export default {
+  data(){
+    return{
+      number:1,
+      query:{
+        id:'',
+        count:'',
+        type:''
+      },
+      listingList:{},
+      asset1_title:0
+    }
+  },
+  components: {
+    countDown: () => import('../common/countDown.vue'),
+
+  },
+  created(){
+    this.query.id=this.$route.query.id
+    this.getData()
+  },
+  methods:{
+    tabAsset1_title(type){
+      this.asset1_title=type
+    },
+    callback(){
+
+    },
+    cancelCollectAsset(){
+      cancelCollectAsset(this.query).then(res=>{
+        console.info(res)
+        if (res.code==100) {
+          this.listingList.is_collect=false
+          this.$message.success('取消收藏成功！')
+        }else{
+          this.$message.error(res.msg);
+        }
+      })
+    },
+    collectAsset(){
+      console.info(this.query)
+      this.query.count=this.listingList.pay_count
+      collectAsset(this.query).then(res=>{
+        console.info(res)
+        if (res.code==100) {
+          this.listingList.is_collect=true
+          this.$message.success('收藏资产成功！')
+        }else{
+          this.$message.error(res.msg);
+        }
+      })
+    },
+    checkBuy(type){
+      this.query.count=this.listingList.pay_count
+      this.query.type=type
+      checkBuy(this.query).then(res => {
+        if(res.code==100){
+          this.query.count=this.listingList.pay_count
+          this.$router.push({path:'/order/confirmOrder',query:{step:0,id:this.query.id,count:this.query.count,type:0,orderType:type}})
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    getData(){
+      assetInfo(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.query.count=this.listingList.pay_count
+          this.listingList=res.data;
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    setActiveItem(index){
+      this.$refs.carousel.setActiveItem(index)
+    }
+  }
+}
+</script>
+<style scoped>
+  .assessment{
+    background: #D0A6A5;
+    font-size: 16px;
+    color: #89201F;
+    border: 1px solid #89201F;
+    margin: 0 5px;
+  }
+  .asset1_content_title{
+    font-size: 18px;
+    font-weight: bold;
+    margin: 20px 0;
+  }
+  .asset{
+    width: 100%;
+    border: 1px solid #CCCCCC;
+    height: 585px;
+    margin-top: 20px;
+    padding: 10px;
+    display: flex;
+  }
+  .asset1{
+    width: 100%;
+    border: 1px solid #CCCCCC;
+    padding-bottom: 15px;
+    margin-top: 20px;
+  }
+  .asset_banner{
+    width: 624px;
+    height: 425px;
+  }
+  .asset_banner_img{
+    width: 100%;
+    height: 100%;
+  }
+  .asset_banner1{
+    width: 624px;
+    height: 108px;
+    margin-top: 20px;
+    display: flex;
+    /* justify-content: space-between; */
+  }
+  .asset_banner1 img{
+    width: 147px;
+    height: 100%;
+    margin-right: 20px;
+  }
+  .asset_info{
+    margin-left: 20px;
+    padding-top: 15px;
+  }
+  .asset_info_title{
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+  .asset_info_p{
+    font-size: 18px;
+    color: #7F7F7F;
+    margin-bottom: 25px;
+    display: flex;
+    align-items: center;
+  }
+  .asset_info_span{
+    font-size: 36px;
+    color: #C94C4C;
+  }
+  .asset_info_span1{
+    color: #333333;
+    font-weight: bold;
+  }
+  .asset_info_span2{
+    color: #333333;
+  }
+  .seach_input{
+    width: 180px;
+    height: 40px;
+    border: 1px solid #CCCCCC;
+    margin-left: 15px;
+    margin-right: 5px;
+  }
+  .seach_input>>>.el-input__inner{
+    border: none;
+    padding-left: 5px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 18px;
+  }
+  .asset_info_p1{
+    font-size: 14px;
+    color: #7F7F7F;
+  }
+  .asset_info_button{
+    height: 50px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 53px;
+  }
+  .asset_info_button button{
+    width: 150px;
+    height: 100%;
+    border-radius: 2px;
+    font-size: 16px;
+    cursor: pointer;
+  }
+  .purchase{
+    border-radius: 2px;
+    font-size: 16px;
+    cursor: pointer;
+    width: 150px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: white;
+    background-color: rgba(201, 76, 76, 1);
+    border: none;
+  }
+  .collection{
+    background-color: rgba(233, 173, 133, 1);
+    border: 1px solid rgba(201, 76, 76, 1);
+    color: rgba(201, 76, 76, 1);
+  }
+  .asset1_title{
+    height: 70px;
+    border-bottom: 1px solid #ADADAD;
+    display: flex;
+  }
+  .asset1_title_item{
+    height: 100%;
+    width: 160px;
+    font-size: 22px;
+    color: #C94C4C;
+    border-right: 1px solid #ADADAD;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+  }
+  .asset1_title_item_active{
+    background: #C94C4C;
+    color: white;
+  }
+  .asset1_content{
+    padding: 20px ;
+  }
+  .asset1_content p{
+    margin-top: 10px;
+  }
+  .countDown{
+    margin-top: 5px;
+    font-size: 14px;
+    color: white;
+  }
+</style>

src/components/page/ClassificationDetails.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="body">
+    <div>
+      <div class="seach">
+        <div class="seach_left">
+          <img src="../../assets/img/all_zc.png" alt="">
+          <span>标的类型</span>
+        </div>
+        <div class="seach_right">
+          <el-radio-group v-model="query.serial_type" class="seach_group" @change="changeDate(3)">
+            <el-radio-button label="" >不限</el-radio-button>
+            <el-radio-button label="1">知识产权（著作权、专利权、专有技术、商标专有权）</el-radio-button>
+            <el-radio-button label="2">销售网络及客户关系</el-radio-button>
+            <el-radio-button label="3">特许经营权</el-radio-button>
+            <el-radio-button label="4">合同权益</el-radio-button>
+            <el-radio-button label="5">域名</el-radio-button>
+            <el-radio-button label="6">商誉</el-radio-button>
+            <el-radio-button label="7">时间和档期</el-radio-button>
+            <el-radio-button label="8">其它</el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="seach">
+        <div class="seach_left">
+          <img src="../../assets/img/all_zc1.png" alt="">
+          <span>标的所在地</span>
+        </div>
+        <div class="seach_right">
+          <el-radio-group  class="seach_group" @change="changeDate(2)">
+            <el-radio-button >不限</el-radio-button>
+          </el-radio-group>
+          <el-select  placeholder="选择具体省份" clearable  filterable v-model="query.province" class="select_city" @change="changeDate(0)">
+            <el-option
+            v-for="item in province"
+            :key="item.id"
+            :label="item.name"
+            :value="item.province_code" >
+            </el-option>
+          </el-select>
+          <el-select  placeholder="选择具体城市" clearable  filterable v-model="query.city" class="select_city" @change="changeDate(1)">
+            <el-option
+            v-for="item in city"
+            :key="item.id"
+            :label="item.name"
+            :value="item.city_code" >
+            </el-option>
+          </el-select>
+          <el-select  placeholder="选择具体区镇" clearable  filterable v-model="query.area" class="select_city" @change="changeDate(3)">
+            <el-option
+            v-for="item in area"
+            :key="item.id"
+            :label="item.name"
+            :value="item.area_code">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="seach">
+        <div class="seach_left">
+          <img src="../../assets/img/all_zc2.png" alt="">
+          <span>标的状态</span>
+        </div>
+        <div class="seach_right">
+          <el-radio-group v-model="query.asset_status" class="seach_group" @change="changeDate(3)">
+            <el-radio-button label="" >不限</el-radio-button>
+            <el-radio-button :label="1">挂牌中</el-radio-button>
+            <el-radio-button :label="2">交易中</el-radio-button>
+            <el-radio-button :label="3">已成交</el-radio-button>
+            <el-radio-button :label="4">已摘牌</el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+    </div>
+    <div class="seach1">
+      <div class="seach1_item">
+        <span>
+          全部资产 （
+          <span class="seach1_item_span">{{pageTotal}}</span>
+          ）
+        </span>
+      </div>
+      <div class="seach1_item">
+        <el-select  placeholder=""    v-model="query.sort" @change="changeDate(3)">
+          <el-option :key="0" label="标的价格升序" value="create_time asc"></el-option>
+          <el-option :key="1" label="标的价格降序" value="create_time desc"></el-option>
+          <el-option :key="2" label="挂牌时间升序" value="price asc"></el-option>
+          <el-option :key="3" label="挂牌时间降序" value="price desc"></el-option>
+        </el-select>
+      </div>
+      <div class="seach1_item">
+        <el-date-picker
+          v-model="query.date"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          value-format="yyyy-MM-dd"
+          @change="changeDate(3)"
+          :default-time="['00:00:00', '23:59:59']"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </div>
+      <div class="seach1_item">
+        <span>价格</span>
+        <el-input
+          class="seach_input"
+          v-model="query.min_price">
+          <span slot="prefix" class="el-input__icon ">￥</span>
+        </el-input>
+        <span>-</span>
+        <el-input
+          class="seach_input"
+          v-model="query.max_price">
+          <span slot="prefix" class="el-input__icon ">￥</span>
+        </el-input>
+        <button @click="changeDate(3)" class="seach_button">确定</button>
+      </div>
+    </div>
+
+    <div class="tabs">
+      <div class="tabs_item" @click="goDetails(item.id)" v-for="(item,index) in listingList" :key="index">
+        <img :src="item.serial_img" alt="" class="tabs_item_img">
+        <div class="tabs_item_lable">{{item.serial_number}}</div>
+        <div class="tabs_item_content">
+          <p class="tabs_item_content_title">{{item.serial_name}}</p>
+          <p class="tabs_item_content_p">
+            <span>资产价格： </span>
+            <span class="tabs_item_content_span">￥</span>
+            <span class="tabs_item_content_span tabs_item_content_span1">{{item.price}}</span>
+          </p>
+          <p class="tabs_item_content_p">
+            <span>标的类型： </span>
+            <span class="tabs_item_content_span2 tabs_item_content_span3">{{item. serial_type_name}}</span>
+          </p>
+          <p class="tabs_item_content_p">
+            <span>所在地： </span>
+            <span class="tabs_item_content_span2 tabs_item_content_span3">{{item.address}}</span>
+          </p>
+          <p class="tabs_item_content_p">
+            <span>有效日期： </span>
+            <span class="tabs_item_content_span2 ">{{item.effective_date}}前</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+
+  </div>
+</template>
+<script>
+import {assetClassInfo,getProvince,getCity,getArea,} from '../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        page:1,
+        limit:12,
+        province:'',
+        city:'',
+        area:'',
+        serial_type:'',
+        asset_status:'',
+        date:'',
+        min_price:'',
+        max_price:'',
+        sort:'create_time desc'
+      },
+      pageTotal:0,
+      listingList:[],
+      province:[],
+      city:[],
+      area:[],
+    }
+  },
+  created(){
+    this.getData()
+    this.getProvince();
+  },
+
+  methods:{
+    changeDate(type){
+      if(type==0){
+        this.getCity()
+      }else if(type==1){
+        this.getArea()
+      }else if(type==2){
+        this.query.province=''
+        this.query.city=''
+        this.query.area=''
+      }
+      console.info(this.query)
+      this.getData()
+    },
+    getProvince(){
+      getProvince().then(res => {
+        if(res.code==100){
+          this.province=res.list
+        }
+      })
+    },
+    getCity(){
+      let data={
+        code:this.query.province
+      }
+      getCity(data).then(res=>{
+        if(res.code==100){
+          this.city=res.list
+        }
+      })
+    },
+    getArea(){
+      let data={
+        code:this.query.city
+      }
+      getArea(data).then(res=>{
+        if(res.code==100){
+          this.area=res.list
+        }
+      })
+    },
+    getData(){
+      assetClassInfo(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.listingList=res.data.list;
+          this.pageTotal=res.data.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      // this.getData();
+    },
+    goDetails(id){
+      this.$router.push({path:'/AssetDetails',query:{id:id}})
+    }
+  }
+}
+</script>
+<style scoped>
+  .body{
+    width: 1200px;
+    margin: 0 auto;
+  }
+  .seach_button{
+    width: 60px;
+    height: 30px;
+    font-size: 12px;
+    color: #333333;
+    background-color: transparent;
+    border:1px solid #D7D7D7;
+    cursor: pointer;
+  }
+  .seach_input{
+    width: 100px;
+    margin: 0 15px;
+  }
+  .seach1{
+    width: 100%;
+    height: 50px;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  .seach1_item{
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid #D7D7D7;
+    font-size: 12px;
+    height: 100%;
+  }
+  .seach1_item_span{
+    color: #C94C4C;
+  }
+  .seach1_item:last-child{
+    border-right: none;
+  }
+  .select_city{
+    margin: 0 15px;
+  }
+  .seach{
+    padding: 25px 0;
+    border-bottom: 1px solid #D7D7D7;
+    display: flex;
+  }
+  .seach:last-child{
+    border-bottom: none;
+  }
+  .seach_left{
+    display: flex;
+    align-items: center;
+    font-weight: 650;
+    font-size: 14px;
+    color: #C94C4C;
+    width: 130px;
+    margin-right: 20px;
+  }
+  .seach_group >>> .el-radio-button--small .el-radio-button__inner{
+    border: none;
+    border-radius: 0;
+  }
+  .seach_group >>> .el-radio-button__orig-radio:checked+.el-radio-button__inner{
+    color: #FFF;
+    background-color: #C94C4C;
+    box-shadow: none;
+  }
+  .seach_left img{
+    width: 17px;
+    height: 17px;
+    margin-right: 5px;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .tabs{
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+  }
+  .tabs_item{
+    width: 283px;
+    height: 300px;
+    border: 1px solid #E9B7B7;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    position: relative;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .tabs_item:nth-child(4n+4){
+    margin-right: 0;
+  }
+  .tabs_item_img{
+    width: 100%;
+    height: 170px;
+    border-radius: 5px 5px 0 0;
+  }
+  .tabs_item_lable{
+    width: 100px;
+    height: 25px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    color: #FFFFFF;
+    background: #C94C4C;
+    z-index: 100;
+    line-height: 25px;
+    text-align: center;
+  }
+  .tabs_item_lable::after{
+    content: '';
+    border-top: 12.5px solid transparent;
+    border-left: 10px solid #C94C4C;
+    border-bottom: 12.5px solid transparent;
+    position: absolute;
+    top: 0;
+    left: 100px;
+  }
+  .breadcrumb{
+    margin-top: 30px;
+  }
+  .el-breadcrumb{
+    font-size: 18px;
+  }
+  .tabs_item_content{
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.5);
+    height: 150px;
+    margin-top: -40px;
+    /* padding: 10px 10px; */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    /* padding-bottom: 10px; */
+  }
+  .tabs_item_content_title{
+    width: 100%;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    background: rgba(238, 238, 238, 0.5);
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .tabs_item_content_p{
+    color: #7F7F7F;
+    font-size: 12px;
+    padding-left: 10px;
+  }
+  .tabs_item_content_span{
+    color: #C94C4C;
+  }
+  .tabs_item_content_span1{
+    font-size: 18px;
+  }
+  .tabs_item_content_span2{
+    color: #333333;
+  }
+  .tabs_item_content_span3{
+    font-weight: bold;
+  }
+</style>

src/components/page/Deal.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="body">
+    <div class="seach">
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>
+            全部资产 （
+            <span class="seach1_item_span">{{pageTotal}}</span>
+            ）
+          </span>
+        </div>
+        <div class="seach1_item">
+          <el-select  v-model="query.sort" @change="getData">
+            <el-option :key="0" label="资产价格升序" :value="1"></el-option>
+            <el-option :key="1" label="资产价格降序" :value="2"></el-option>
+            <el-option :key="2" label="挂牌时间升序" :value="3"></el-option>
+            <el-option :key="3" label="挂牌时间降序" :value="4"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <el-date-picker
+            v-model="query.create_time"
+            type="date"
+            placeholder="选择日期"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            @change="getData">
+          </el-date-picker>
+        </div>
+        <div class="seach1_item">
+          <span>价格</span>
+          <el-input
+            class="seach_input"
+            v-model="query.min_price">
+            <span slot="prefix" class="el-input__icon ">￥</span>
+          </el-input>
+          <span>-</span>
+          <el-input
+            class="seach_input"
+            v-model="query.max_price">
+            <span slot="prefix" class="el-input__icon ">￥</span>
+          </el-input>
+          <button @click="getData" class="seach_button">确定</button>
+        </div>
+      </div>
+
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>挂牌类型</span>
+          <el-select      v-model="query.cartellino_type" @change="getData" class="seach1_select">
+            <el-option :key="0" label="全部" value=""></el-option>
+            <el-option :key="1" label="协议" :value="1"></el-option>
+            <el-option :key="2" label="拍卖" :value="2"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <span>挂牌方名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入挂牌方关键字"
+            v-model="query.sell_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>挂牌编号</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入挂牌编号"
+            v-model="query.serial_number">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>标的名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入标的名称关键字"
+            v-model="query.asset_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <button @click="getData" class="seach_button">确定</button>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="tabs">
+      <el-table
+        :data="listData"
+        header-cell-class-name="theader"
+        :header-cell-style="{background:'#F3F3F3 !important',color:'#333333',height:'60px',fontSize:'14px'}"
+        style="width: 100%">
+        <el-table-column
+          prop="serial_number"
+          align="center"
+          label="挂牌编号">
+        </el-table-column>
+        <el-table-column
+          prop="firm_name"
+          align="center"
+          label="挂牌方名称">
+        </el-table-column>
+        <el-table-column
+          prop="serial_name"
+          align="center"
+          label="标的名称">
+        </el-table-column>
+        <el-table-column
+          prop="username"
+          align="center"
+          label="摘牌方名称">
+        </el-table-column>
+        <el-table-column
+          prop="pay_mode"
+          align="center"
+          label="挂牌类型">
+          <template slot-scope="scope">
+            <span>{{scope.row.pay_mode==1?'协议':'拍卖'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="price"
+          align="center"
+          label="交易总额">
+        </el-table-column>
+        <el-table-column
+          prop="create_time"
+          align="center"
+          :formatter="formatDate"
+          label="挂牌日期">
+        </el-table-column>
+        <el-table-column
+          prop="confirm_delivery_time"
+          :formatter="formatDate"
+          align="center"
+          label="成交日期">
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+
+  </div>
+</template>
+<script>
+import {delist} from '../../api/index'
+import moment from 'moment'
+export default {
+  data(){
+    return{
+      query:{
+        page:1,
+        limit:10,
+        sort:1,
+        create_time:'',
+        min_price:'',
+        max_price:'',
+        cartellino_type:'',
+        sell_name:'',
+        cartellino_id:'',
+        asset_name:'',
+        serial_number:''
+      },
+      pageTotal:0,
+      listData:[]
+    }
+  },
+  created(){
+    this.getData()
+  },
+  methods:{
+    //时间戳转换时间
+    formatDate(row,colnum){
+      return moment(row[colnum.property]*1000).format('YYYY-MM-DD HH:mm:ss')
+    },
+    getData(){
+      delist(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.listData=res.data.list;
+          this.pageTotal=res.data.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      this.getData();
+    }
+  }
+}
+</script>
+<style scoped>
+  .body{
+    width: 1200px;
+    margin: 0 auto;
+  }
+  .seach{
+    margin: 20px 0;
+  }
+  .seach1_select{
+    margin-left: 10px;
+    width: 170px;
+  }
+  .seach_button{
+    width: 60px;
+    height: 30px;
+    font-size: 12px;
+    color: #333333;
+    background-color: transparent;
+    border:1px solid #D7D7D7;
+    cursor: pointer;
+  }
+  .seach_input{
+    width: 100px;
+    margin: 0 15px;
+  }
+  .seach1{
+    width: 100%;
+    height: 50px;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  .seach1:last-child{
+    border-top: none;
+  }
+  .seach1_item{
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid #D7D7D7;
+    font-size: 12px;
+    height: 100%;
+  }
+  .seach1_item_span{
+    color: #C94C4C;
+  }
+  .seach1_item:last-child{
+    border-right: none;
+  }
+  .select_city{
+    margin: 0 15px;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .tabs{
+    margin-top: 20px;
+  }
+  .tabs>>> .el-table tr{
+    border:1px solid #E9B7B7 !important
+  }
+  .tabs>>>.el-table td, .el-table th.is-leaf{
+    border-bottom: none;
+  }
+  .tabs>>>.el-table::before{
+    height: 0;
+  }
+</style>

src/components/page/DelistingNotice.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="body">
+    <div class="seach">
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>
+            全部资产 （
+            <span class="seach1_item_span">{{pageTotal}}</span>
+            ）
+          </span>
+        </div>
+        <!-- <div class="seach1_item">
+          <el-select  v-model="query.sort" @change="getData">
+            <el-option :key="0" label="标的价格升序" :value="1"></el-option>
+            <el-option :key="1" label="标的价格降序" :value="2"></el-option>
+            <el-option :key="2" label="挂牌时间升序" :value="3"></el-option>
+            <el-option :key="3" label="挂牌时间降序" :value="4"></el-option>
+          </el-select>
+        </div> -->
+        <div class="seach1_item">
+          <el-date-picker
+            v-model="query.remove_time"
+            type="date"
+            placeholder="选择日期"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            @change="getData">
+          </el-date-picker>
+        </div>
+        <!-- <div class="seach1_item">
+          <span>价格</span>
+          <el-input
+            class="seach_input"
+            v-model="query.min_price">
+            <span slot="prefix" class="el-input__icon ">￥</span>
+          </el-input>
+          <span>-</span>
+          <el-input
+            class="seach_input"
+            v-model="query.max_price">
+            <span slot="prefix" class="el-input__icon ">￥</span>
+          </el-input>
+          <button @click="getData" class="seach_button">确定</button>
+        </div> -->
+      </div>
+
+      <div class="seach1">
+        <!-- <div class="seach1_item">
+          <span>挂牌类型</span>
+          <el-select      v-model="query.cartellino_type" @change="getData" class="seach1_select">
+            <el-option :key="0" label="全部" value=""></el-option>
+            <el-option :key="1" label="协议" :value="1"></el-option>
+            <el-option :key="2" label="拍卖" :value="2"></el-option>
+          </el-select>
+        </div> -->
+        <div class="seach1_item">
+          <span>挂牌方名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入挂牌方关键字"
+            v-model="query.seller">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>挂牌编号</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入挂牌编号"
+            v-model="query.id">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>标的名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入标的名称关键字"
+            v-model="query.asset_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <button @click="getData" class="seach_button">确定</button>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="tabs">
+      <el-table
+        :data="listData"
+        header-cell-class-name="theader"
+        @row-click="goDetails"
+        :header-cell-style="{background:'#F3F3F3 !important',color:'#333333',height:'60px',fontSize:'14px'}"
+        style="width: 100%">
+        <el-table-column
+          prop="id"
+          align="center"
+          label="挂牌代码">
+        </el-table-column>
+        <el-table-column
+          prop="firm_name"
+          align="center"
+          label="挂牌方名称">
+        </el-table-column>
+        <el-table-column
+          prop="serial_name"
+          align="center"
+          label="标的名称">
+        </el-table-column>
+        <el-table-column
+          prop="pay_mode"
+          align="center"
+          label="挂牌类型">
+          <template slot-scope="scope">
+            <span>{{scope.row.pay_mode==1?'协议':'拍卖'}}</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column
+          prop="create_time"
+          align="center"
+          :formatter="formatDate"
+          label="挂牌日期">
+        </el-table-column> -->
+        <el-table-column
+          prop="remove_time"
+          align="center"
+          label="摘牌日期">
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+
+  </div>
+</template>
+<script>
+import {end_list} from '../../api/index'
+import moment from 'moment'
+export default {
+  data(){
+    return{
+      query:{
+        page:1,
+        limit:10,
+        sort:1,
+        remove_time:'',
+        seller:'',
+        id:'',
+        asset_name:'',
+      },
+      pageTotal:0,
+      listData:[]
+    }
+  },
+  created(){
+    this.getData()
+  },
+  methods:{
+    goDetails(row, column, event){
+      this.$router.push({path:'/NoticeDetails',query:{id:row.id,type:1}})
+    },
+    //时间戳转换时间
+    formatDate(row,colnum){
+      return moment(row[colnum.property]*1000).format('YYYY-MM-DD HH:mm:ss')
+    },
+    getData(){
+      end_list(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.listData=res.data.list;
+          this.pageTotal=res.data.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      this.getData();
+    }
+  }
+}
+</script>
+<style scoped>
+  .body{
+    width: 1200px;
+    margin: 0 auto;
+  }
+  .seach{
+    margin: 20px 0;
+  }
+  .seach1_select{
+    margin-left: 10px;
+    width: 170px;
+  }
+  .seach_button{
+    width: 60px;
+    height: 30px;
+    font-size: 12px;
+    color: #333333;
+    background-color: transparent;
+    border:1px solid #D7D7D7;
+    cursor: pointer;
+  }
+  .seach_input{
+    width: 100px;
+    margin: 0 15px;
+  }
+  .seach1{
+    width: 100%;
+    height: 50px;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  .seach1:last-child{
+    border-top: none;
+  }
+  .seach1_item{
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid #D7D7D7;
+    font-size: 12px;
+    height: 100%;
+  }
+  .seach1_item_span{
+    color: #C94C4C;
+  }
+  .seach1_item:last-child{
+    border-right: none;
+  }
+  .select_city{
+    margin: 0 15px;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .tabs{
+    margin-top: 20px;
+  }
+  .tabs>>> .el-table tr{
+    border:1px solid #E9B7B7 !important
+  }
+  .tabs>>>.el-table td, .el-table th.is-leaf{
+    border-bottom: none;
+  }
+  .tabs>>>.el-table::before{
+    height: 0;
+  }
+</style>

src/components/page/Hoster/Listing.bak

@@ -0,0 +1,687 @@
+<template>
+  <div class="body" >
+    <p class="title">标的挂牌</p>
+    <div class="listing_title">基础信息</div>
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="150px" class="ruleForm"  label-position="left" @submit.native.prevent>
+      <el-form-item label="上传标的图片" prop="serial_img" >
+        <p class="listing_tips">上传高清质量标的正面图，有助快速通过审核，方便购买方了解资产，图片尺寸建议为800px * 800px</p>
+        <div class="listing_upload">
+          <el-upload
+            class="avatar-uploader"
+            :action="action"
+            :show-file-list="false"
+            :on-change="fileChange"
+
+            :on-success="(res)=>{handleAvatarSuccess(0,res,index)}" v-for="(item,index) in 5" :key="index">
+            <img v-if="ruleForm.serial_img[index]" :src="ruleForm.serial_img[index]" class="avatar">
+            <template  v-else>
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+              <p  class="avatar_p">添加上传图片</p>
+            </template>
+          </el-upload>
+        </div>
+      </el-form-item>
+      <el-form-item label="标的名称" prop="serial_name" >
+        <el-input v-model="ruleForm.serial_name" placeholder="最多允许输入30个汉字（60字符）" class="serial_name"></el-input>
+      </el-form-item>
+      <el-form-item label="标的类型" prop="asset_type_id" >
+        <p class="listing_tips">请确认或修改标的类型</p>
+        <el-cascader   filterable :props="props" ref="cascaderUnit"  :options="options" class="serial_name" v-model="ruleForm.asset_type_id" @change="changeType"></el-cascader>
+      </el-form-item>
+      <el-form-item label="标的其他类型" prop="asset_type_name" v-if="isTypeOther">
+        <el-input v-model="ruleForm.asset_type_name"    placeholder="请输入标的其他类型" class="listing_input"></el-input>
+      </el-form-item>
+      <el-form-item label="标的所在地" prop="province">
+        <el-select  placeholder="选择具体省份" clearable  filterable v-model="ruleForm.province" class="select_city" @change="changeDate(0)">
+          <el-option
+          v-for="item in province"
+          :key="item.id"
+          :label="item.name"
+          :value="item.province_code" >
+          </el-option>
+        </el-select>
+        <el-select  placeholder="选择具体城市" clearable  filterable v-model="ruleForm.city" class="select_city" @change="changeDate(1)">
+          <el-option
+          v-for="item in city"
+          :key="item.id"
+          :label="item.name"
+          :value="item.city_code" >
+          </el-option>
+        </el-select>
+        <el-select  placeholder="选择具体区镇" clearable  filterable v-model="ruleForm.area" class="select_city">
+          <el-option
+          v-for="item in area"
+          :key="item.id"
+          :label="item.name"
+          :value="item.area_code">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标的描述" prop="serial_content" >
+        <div class="listing_title1">
+          <p class="listing_tips">请如实并详细地填写资资产的基本情况</p>
+          <div class="listing_title1_right">
+            <span></span>
+            <!-- <a class="listing_button" :href="host+'/upload/doc/2021/10/163452699435510739.doc'">下载模板</a> -->
+            <el-upload
+              class="upload-demo"
+              :action="action1"
+              :show-file-list="false"
+              :on-error="handleAvatarError"
+              list-type="picture"
+              :on-success="(res,file,index)=>{handleAvatarSuccess1(res,file,'asset_file')}"
+              >
+              <button class="listing_button">上传文件</button>
+            </el-upload>
+          </div>
+        </div>
+        <mavon-editor
+          v-model="ruleForm.serial_content"
+          :subfield="false" ref="md" :boxShadow="false"
+          @imgAdd="$imgAdd" @change="change"
+          class="listing_editor"/>
+        <div class="upload_file">
+          <div class="listing_tips1">
+            已上传文件：
+            <div class="table_right_item" v-if="ruleForm.asset_file">
+              <span >{{file_name.asset_file}}</span>
+              <i class="el-icon-close" @click="deleteUrl(item,index,index1)"></i>
+            </div>
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="其他标的材料" :prop="ruleForm.buy_mode==2?'serial_img' :'' " >
+        <p class="listing_tips">请上传与标的相关的证明材料（线上交易请在此处上传相关资产）</p>
+        <el-upload
+          class="upload-demo"
+          :action="action1"
+          :show-file-list="false"
+          :on-error="handleAvatarError"
+          list-type="picture"
+          :on-success="(res,file,index)=>{handleAvatarSuccess1(res,file,'else_serial_file')}"
+          >
+          <button class="listing_button">上传文件</button>
+        </el-upload>
+        <div class="upload_file" v-if="ruleForm.else_serial_file!=''">
+          <div class="listing_tips1">
+            已上传文件：
+            <div class="table_right_item" >
+              <span >{{file_name.else_serial_file}}</span>
+              <i class="el-icon-close" @click="deleteUrl(item,index,index1)"></i>
+            </div>
+          </div>
+        </div>
+      </el-form-item>
+      <!-- <el-form-item label="内部决策情况" prop="decision" >
+        <el-radio v-model="ruleForm.decision" :label="1">个人同意</el-radio>
+        <el-radio v-model="ruleForm.decision" :label="2">股东会决议</el-radio>
+        <el-radio v-model="ruleForm.decision" :label="3">董事会决议</el-radio>
+        <el-radio v-model="ruleForm.decision" :label="4">总经理办公会决议</el-radio>
+        <el-radio v-model="ruleForm.decision" :label="5">其他</el-radio>
+        <el-input v-model="ruleForm.decision_case" v-if="ruleForm.decision==5" placeholder="请输入其他情况" class="listing_input"></el-input>
+      </el-form-item> -->
+      <el-form-item label="挂牌时长" prop="cartellino_time_id" >
+        <el-select  placeholder="选择挂牌时长" clearable  filterable v-model="ruleForm.cartellino_time_id" class="select_city1">
+          <el-option
+          v-for="item in price"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <div class="listing_title">交易信息</div>
+      <el-form-item label="挂牌类型" prop="cartellino_type" >
+        <el-radio v-model="ruleForm.cartellino_type" :label="1">协议</el-radio>
+        <!-- <el-radio v-model="ruleForm.cartellino_type" :label="2">拍卖</el-radio> -->
+      </el-form-item>
+      <el-form-item label="标的单价" prop="price" v-if="ruleForm.cartellino_type==1">
+        <el-input v-model="ruleForm.price"  onkeyup="value=value.replace(/[^\d]/g,'')"  placeholder="请输入单个标的的价格" class="listing_input"></el-input>
+      </el-form-item>
+      <div class="listing_flex">
+        <el-form-item label="起拍单价" prop="start_auction_money" v-if="ruleForm.cartellino_type==2">
+          <el-input v-model="ruleForm.start_auction_money"  onkeyup="value=value.replace(/[^\d]/g,'')"  placeholder="请输入起拍单价" class="listing_input"></el-input>
+        </el-form-item>
+        <el-form-item label="竞价金额" prop="bidding_money" v-if="ruleForm.cartellino_type==2">
+          <el-input v-model="ruleForm.bidding_money"  onkeyup="value=value.replace(/[^\d]/g,'')"  placeholder="请输入单次竞价时需要增加的金额" class="listing_input"></el-input>
+        </el-form-item>
+      </div>
+      <div class="listing_flex">
+        <el-form-item label="标的单位" prop="asset_unit" >
+          <el-input v-model="ruleForm.asset_unit"   placeholder="请输入单个标的单位的量词" class="listing_input"></el-input>
+        </el-form-item>
+        <el-form-item label="挂牌数量" prop="count">
+          <el-input v-model="ruleForm.count"  onkeyup="value=value.replace(/[^\d]/g,'')"  placeholder="请输入需要挂牌资产的数量" class="listing_input"></el-input>
+        </el-form-item>
+      </div>
+      <el-form-item label="起购数量" prop="pay_count">
+        <el-input v-model="ruleForm.pay_count"  onkeyup="value=value.replace(/[^\d]/g,'')"  placeholder="请输入购买时单次至少购买数量" class="listing_input"></el-input>
+      </el-form-item>
+      <el-form-item label="付款方式" prop="pay_mode" >
+        <el-radio v-model="ruleForm.pay_mode" :label="1">网银支付</el-radio>
+        <el-radio v-model="ruleForm.pay_mode" :label="2">对公转账</el-radio>
+        <span class="listing_tips">交易金额大于200万时系统自动选择对公转账</span>
+      </el-form-item>
+      <el-form-item label="交易方式" prop="buy_mode" >
+        <el-radio v-model="ruleForm.buy_mode" :label="1">线下交易</el-radio>
+        <!-- <el-radio v-model="ruleForm.buy_mode" :label="2">线上交易</el-radio> -->
+        <span class="listing_tips">选取线上交易请在基础信息内上传标的数据</span>
+      </el-form-item>
+      <!-- <el-form-item label="交付方式" prop="goods_mode">
+        <el-radio v-model="ruleForm.goods_mode" :label="1">现场交付</el-radio>
+        <el-radio v-model="ruleForm.goods_mode" :label="2">物流配送</el-radio>
+        <el-input v-model="ruleForm.express_money" v-if="ruleForm.goods_mode==2" placeholder="请输入物流配送金额" class="listing_input"></el-input>
+      </el-form-item> -->
+      <div class="listing_title">挂牌费用说明</div>
+      <el-form-item label="交付方式" prop="serial_img">
+        <el-checkbox-group v-model="ruleForm.pay_type">
+          <el-checkbox :label="1">线下转账</el-checkbox>
+          <el-checkbox :label="2">网银支付</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <div class="footer" >
+      <el-button class="submit" @click="submit" v-if="query.type!=0" :loading="loading">提交资料</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { mavonEditor } from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+import {get_asset_type,getProvince,getCity,getArea,cartellino,getPrice,assetInfo,update_cartellino,uploadimg } from '../../../api/index'
+export default {
+  data(){
+    return{
+      host:'http://wenhua.xingtongworld.com',
+      action:'http://wenhua.xingtongworld.com/api/Index/uploadimg',
+      action1:'http://wenhua.xingtongworld.com/api/Index/uploadFile',
+      query:{
+        id:'',
+        type:1
+      },
+      isTypeOther:false,
+      options:[],
+      props: {
+        value:'id',
+        label:'name',
+        leaf:'is_son',
+        emitPath:false
+      },
+      loading:false,
+      province:[],
+      city:[],
+      area:[],
+      price:[],
+      ruleForm:{
+        serial_name:'',
+        serial_img:[],
+        asset_type_id:'',
+        province:null,
+        city:'',
+        area:'',
+        serial_content:'',
+        else_serial_file:[],
+        // decision:1,
+        // decision_case:'',
+        cartellino_time_id:'',
+        cartellino_type:1,
+        price:'',
+        asset_unit:'',
+        count:'',
+        pay_count:'',
+        pay_mode:1,
+        buy_mode:1,
+        // goods_mode:1,
+        express_money:'',
+        start_auction_money:'',
+        bidding_money:'',
+        pay_type:[1],
+        asset_file:'',
+        asset_type_name:'',
+      },
+      file_name:{
+        asset_file:'',
+        else_serial_file:'',
+      },
+      rules:{
+        serial_img: [
+          { required: true, message: '请上传标的图片', trigger: 'blur' },
+        ],
+        asset_type_name: [
+          { required: true, message: '请输入标的其他类型', trigger: 'blur' },
+        ],
+        serial_name: [
+          { required: true, message: '请输入标的名称', trigger: 'blur' },
+        ],
+        asset_type_id: [
+          { required: true, message: '请选择标的类型', trigger: 'blur' },
+        ],
+        province: [
+          { required: true, message: '请选择标的所在地（省）', trigger: 'blur' },
+        ],
+        serial_content: [
+          { required: true, message: '请输入标的描述', trigger: 'blur' },
+        ],
+        else_serial_file: [
+          { required: true, message: '请上传其他标的材料', trigger: 'blur' },
+        ],
+        // decision: [
+        //   { required: true, message: '请选择内部决策情况', trigger: 'blur' },
+        // ],
+        cartellino_time_id: [
+          { required: true, message: '请选择挂牌时长', trigger: 'blur' },
+        ],
+        cartellino_type: [
+          { required: true, message: '请选择挂牌类型', trigger: 'blur' },
+        ],
+        price: [
+          { required: true, message: '请输入标的单价', trigger: 'blur' },
+        ],
+        asset_unit: [
+          { required: true, message: '请输入标的单位', trigger: 'blur' },
+        ],
+        count: [
+          { required: true, message: '请输入挂牌数量', trigger: 'blur' },
+        ],
+        pay_count: [
+          { required: true, message: '请输入购买时单次至少购买数量', trigger: 'blur' },
+        ],
+        pay_mode: [
+          { required: true, message: '请选择付款方式', trigger: 'blur' },
+        ],
+        buy_mode: [
+          { required: true, message: '请选择交易方式', trigger: 'blur' },
+        ],
+        // goods_mode: [
+        //   { required: true, message: '请选择交付方式', trigger: 'blur' },
+        // ],
+        pay_type: [
+          { required: true, message: '请选择支付方式', trigger: 'blur' },
+        ],
+        start_auction_money: [
+          { required: true, message: '请输入起拍单价', trigger: 'blur' },
+        ],
+        bidding_money: [
+          { required: true, message: '请输入竞价金额', trigger: 'blur' },
+        ],
+      },
+    }
+  },
+  components: {
+    mavonEditor
+  },
+  created(){
+    if(this.$route.query.id){
+      this.query=this.$route.query
+      this.getAssetInfo()
+    }
+    this.get_asset_type();
+    this.getProvince();
+    this.getPrice()
+  },
+  methods:{
+    changeType(val,opt){
+      const checkedNodes = this.$refs['cascaderUnit'].getCheckedNodes()
+      console.log(checkedNodes) // 获取当前点击的节点
+      if (checkedNodes[0].data.type==1) {
+        this.isTypeOther=true
+      }else{
+        this.isTypeOther=false
+      }
+    },
+    handleAvatarSuccess1(res,file,index){
+      console.info(file)
+      console.info(res)
+      if(res.code==1){
+        let contract=this.host+res.data.img_url;
+        // this.ruleForm[index]=contract
+        this.$set(this.ruleForm, index, contract);
+        this.$set(this.file_name, index, file.name);
+        console.info(this.ruleForm)
+        this.$message.success('文件上传成功！');
+      }else{
+        this.$message.error(res.msg);
+      }
+    },
+    handleAvatarError(){
+      this.$message.error('文件上传失败！');
+    },
+    //获取资产详情
+    getAssetInfo(){
+      assetInfo(this.query).then(res=>{
+        console.info(res)
+        if(res.code==100){
+          res.data.province=parseInt(res.data.province)
+          res.data.city=parseInt(res.data.city)
+          res.data.area=parseInt(res.data.area)
+          res.data.pay_type=[parseInt(res.data.pay_type)]
+          this.ruleForm=res.data
+          this.getCity()
+          this.getArea()
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    getPrice(){
+      getPrice().then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.price=res.data
+        }
+      })
+    },
+    changeDate(type){
+      if(type==0){
+        this.getCity()
+      }else if(type==1){
+        this.getArea()
+      }
+    },
+    getProvince(){
+      getProvince().then(res => {
+        if(res.code==100){
+          this.province=res.list
+        }
+      })
+    },
+    getCity(){
+      let data={
+        code:this.ruleForm.province
+      }
+      getCity(data).then(res=>{
+        if(res.code==100){
+          this.city=res.list
+        }
+      })
+    },
+    getArea(){
+      let data={
+        code:this.ruleForm.city
+      }
+      getArea(data).then(res=>{
+        if(res.code==100){
+          this.area=res.list
+        }
+      })
+    },
+    get_asset_type(){
+      get_asset_type().then(res=>{
+        if(res.code==100){
+          this.options=res.data
+        }
+      })
+    },
+    submit(){
+      console.info(this.ruleForm)
+      this.$refs["ruleForm1"].validate((valid) => {
+        if(valid){
+          this.loading=true
+          if(this.query.type==2){
+            this.update_cartellino()
+          }else{
+            this.cartellino()
+          }
+        }
+      })
+    },
+    //资产挂牌
+    cartellino(){
+      cartellino(this.ruleForm).then(res=>{
+        console.info(res)
+        this.loading=false
+        if(res.code==100){
+          this.$message.success('上传成功！请等待审核~');
+          this.$router.push({path:'/examine'});
+        }else{
+          this.$message.error(res.msg);
+        }
+      })
+    },
+    //修改资产挂牌
+    update_cartellino(){
+      update_cartellino(this.ruleForm).then(res=>{
+        console.info(res)
+        this.loading=false
+        if(res.code==100){
+          this.$message.success('修改成功！请等待审核~');
+          this.$router.push({path:'/examine'});
+        }else{
+          this.$message.error(res.msg);
+        }
+      })
+    },
+    // 将图片上传到服务器，返回地址替换到md中
+    $imgAdd(pos, $file){
+      var formdata = new FormData();
+      formdata.append('file', $file);
+      // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
+      // let data =
+      uploadimg(formdata).then(res=>{
+        if (res.code==1) {
+          let url=this.host + res.data.img_url;
+          this.$refs.md.$img2Url(pos, url);
+        }
+      })
+      // this.$axios({
+      //     url: this.action,
+      //     method: 'post',
+      //     data: formdata,
+      //     headers: { 'Content-Type': 'multipart/form-data' },
+      // }).then((url) => {
+      //     this.$refs.md.$img2Url(pos, url);
+      // })
+    },
+    change(value, render){
+      // render 为 markdown 解析后的结果
+      this.html = render;
+    },
+    fileChange(file){
+      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
+      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
+      const isLt3M = file.size / 1024 / 1024 < 10;
+      if (!isJPG) {
+        this.$message.error('只能是图片!');
+        this.$refs.upload.clearFiles();
+        return;
+      }
+      if (!isLt3M) {
+        this.$message.error('上传图片大小不能超过 10MB!');
+        this.$refs.upload.clearFiles();
+        return;
+      }
+    },
+    overstep(){
+      this.$message.error('只能上传一张图片！');
+    },
+    handleAvatarSuccess(type,res,index) {
+      console.info(res)
+      if(res.code == 1){
+        let url=this.host + res.data.img_url;
+        if(type==0){
+          console.info(index)
+          if(this.ruleForm.serial_img[index]){
+            // this.ruleForm.serial_img[index]=url
+            this.$set(this.ruleForm.serial_img,index,url)
+          }else{
+            this.ruleForm.serial_img.push(url)
+          }
+          console.info(this.ruleForm.serial_img)
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+  .body{
+    margin-top: 15px;
+  }
+  .title{
+    color: #333333;
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+  .listing_title1{
+    display: flex;
+    align-items: center;
+    width: 800px;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .listing_title{
+    background-color: #C94D4D;
+    color: white;
+    font-size: 16px;
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+  }
+  .upload_file{
+    margin: 15px 0;
+  }
+  .listing_flex{
+    display: flex;
+  }
+  .listing_editor{
+    min-height: 500px;
+    width: 800px;
+    border: 1px solid #D1D1D1;
+  }
+  .listing_title1_right{
+    width: 160px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .listing_button{
+    display: inline-block;
+    width: 70px;
+    height: 32px;
+    border-radius: 5px;
+    border: 1px solid #E7B0B0;
+    background: #F3D8D8;
+    font-size: 14px;
+    color: rgba(201, 76, 76, 0.898039215686275);
+    text-align: center;
+    cursor: pointer;
+  }
+  .listing_upload{
+    display: flex;
+    margin-top: 10px;
+  }
+  .select_type{
+    width: 800px;
+    height: 50px;
+    color: #7F7F7F;
+    padding-left: 15px;
+    line-height: 50px;
+    background-color: #FDF8F8;
+    border: 1px solid #F3D8D8;
+    margin-bottom: 10px;
+  }
+  .listing_tips1,listing_tips{
+    font-size: 14px;
+    color: rgba(127, 127, 127, 0.898039215686275);
+  }
+  .listing_tips1{
+    display: flex;
+    align-items: center;
+  }
+  .table_right_item{
+    width: 250px;
+    display: flex;
+    align-items: center;
+    color: #333333;
+    font-size: 14px;
+    justify-content: space-between;
+  }
+  .table_right_item>span{
+    cursor: pointer;
+  }
+  .table_right_item:hover{
+    color: #D85E5E;
+  }
+  .table_right_item>i{
+    cursor: pointer;
+  }
+  .listing_tips:hover{
+    color: #D85E5E;
+  }
+  .avatar_p{
+    font-size: 14px;
+    color: #7F7F7F;
+  }
+  .serial_name{
+    width: 800px;
+  }
+  .select_city{
+    width: 200px;
+    margin-right: 15px;
+  }
+  .select_city1{
+    width: 400px;
+  }
+  .listing_input{
+    width: 300px;
+  }
+  .footer{
+    text-align: center;
+    margin-top: 50px;
+  }
+  .submit{
+    width: 340px;
+    height: 40px;
+    background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282));
+    background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%);
+    font-size: 14px;
+    color: #FFFFFF;
+    border: none;
+    margin-bottom: 10px;
+  }
+
+
+
+  .avatar-uploader{
+    margin-right: 15px;
+  }
+  .ruleForm>>>.el-form-item__label{
+    padding-left: 20px;
+    text-align: right;
+  }
+  .avatar-uploader >>> .el-upload--text{
+      width: 120px;
+      height: 120px;
+      /* line-height: 120px; */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+  }
+  .avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+      border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+      font-size: 40px;
+      color: #8c939d;
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      color: #CB5151;
+  }
+  .avatar-uploader img{
+      width: 120px;
+      height: 120px;
+      line-height: 120px;
+  }
+</style>

src/components/page/Hoster/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div class="header">
+      <span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url,index)">{{item.name}}</span>
+    </div>
+    <div class="content1">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+      headerList:[
+        {name:'我的订单',url:'/Hoster'},
+        {name:'我的资产',url:'/Hoster/myAssets'},
+      ],
+      header_active:0
+    }
+  },
+  created(){
+    if(this.$route.query.type){
+      this.header_active=this.$route.query.type
+    }
+  },
+  methods:{
+    goPage(url,index){
+      this.$router.push({path:url,query:{type:index}} )
+      this.header_active=index;
+    }
+  }
+}
+</script>
+<style scoped>
+  .header{
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 20px;
+  }
+  .header_active{
+    color: #C94C4C;
+    border-bottom: 3px solid rgba(201, 76, 76, 1);
+  }
+  .header span{
+    display: inline-block;
+    padding: 0 10px;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .header span:hover{
+    color: #C94C4C;
+  }
+  .content1{
+    margin-top: 30px;
+  }
+</style>

src/components/page/Hoster/myAssets.vue

@@ -0,0 +1,653 @@
+<template>
+  <div>
+    <div class="header">
+      <div class="header_left">
+        <span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.status)">{{item.name}}</span>
+      </div>
+      <div class="header_right">
+        <button class="hedaer_button" @click="goDetails('',1)">标的挂牌</button>
+        <!-- <a class="hedaer_button"  :href="host+'/upload/doc/2021/10/163461522339789618.doc'">标的摘牌模板</a> -->
+      </div>
+    </div>
+    <div class="seach">
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>订单类型</span>
+          <el-select      v-model="query.cartellino_type" @change="assetList" class="seach1_select">
+            <el-option :key="0" label="全部" value=""></el-option>
+            <el-option :key="1" label="协议" :value="1"></el-option>
+            <el-option :key="2" label="拍卖" :value="2"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <span>创建时间</span>
+          <el-date-picker
+            v-model="query.date"
+            type="date"
+            placeholder="选择日期"
+            class="seach1_select1"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            @change="assetList">
+          </el-date-picker>
+        </div>
+        <div class="seach1_item">
+          <span>标的分类</span>
+          <el-select  v-model="query.asset_type_id" @change="assetList" class="seach1_select">
+            <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in AssetClass"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <span>标的名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入标的名称关键字"
+            v-model="query.serial_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <button @click="assetList" class="seach_button">确定</button>
+        </div>
+      </div>
+    </div>
+    <div class="body">
+      <el-table
+        :data="assetLists"
+        style="width: 100%"
+        :header-cell-style="{background:'#F3F3F3 !important',color:'#333333',height:'60px',fontSize:'14px'}"
+        :row-class-name="tableRowClassName">
+        <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
+        <el-table-column prop="name" label="资产" width="280" align="center">
+          <template slot-scope="scope" >
+            <dir class="order_item">
+              <img :src="scope.row.serial_img" alt="" class="order_item_img">
+              <div class="table_div">
+                <p class="table_p1">{{scope.row.serial_name}}</p>
+                <p class="table_p">挂牌方：{{scope.row.firm_name}}</p>
+              </div>
+            </dir>
+          </template>
+        </el-table-column>
+        <el-table-column  prop="price" label="单价" align="center"></el-table-column>
+        <el-table-column  prop="surplus_count" label="库存" align="center"></el-table-column>
+        <el-table-column  prop="count" label="数量" align="center"></el-table-column>
+        <el-table-column  prop="create_time" label="创建时间" :formatter="formatDate" align="center"></el-table-column>
+        <el-table-column  prop="send_time" label="发布时间"  align="center"></el-table-column>
+        <el-table-column  prop="out_time" label="下架时间" :formatter="formatDate" align="center"></el-table-column>
+        <el-table-column   label="标的状态" align="center">
+          <template slot-scope="scope">
+            <span>{{scope.row.asset_status==0 ? '待审核':scope.row.asset_status==1?'待复核':scope.row.asset_status==2?'发布中':scope.row.asset_status==3?'已下架': scope.row.asset_status==5?'待支付挂牌费':'已转让'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column   label="标的操作" align="center">
+          <template slot-scope="scope">
+            <template  v-if=" scope.row.asset_status==4 ||scope.row.asset_status==3">
+              <p  class="table_p2" @click="goDetails(scope.row.id,0)">查看资产</p>
+              <p  class="table_p2" @click="showDialog(scope.row,1)" v-if="scope.row.asset_check_status==0&&scope.row.asset_status==3 ">
+                摘牌审核
+              </p>
+            </template>
+            <template v-else-if="scope.row.asset_status==1">
+              <p  class="table_p2" @click="goDetails(scope.row.id,2)">编辑资产</p>
+              <p  class="table_p2" @click="goDetails1(scope.row.id)">审核情况</p>
+            </template>
+            <template v-else-if="scope.row.asset_status==2">
+              <p  class="table_p2" @click="goDetails(scope.row.id,0)">查看资产</p>
+              <!-- <el-upload
+              class="upload-demo"
+              :action="action1"
+              :show-file-list="false"
+              :on-error="handleAvatarError"
+              list-type="picture"
+              :on-success="(res,file,id)=>{handleAvatarSuccess1(res,file,scope.row.id)}"
+              > -->
+              <p  class="table_p2" @click="showDialog(scope.row,0)">申请摘牌</p>
+            <!-- </el-upload> -->
+            </template>
+            <template v-else-if="scope.row.asset_status==5 || scope.row.asset_status==0">
+              <p  class="table_p2" @click="goDetails(scope.row.id,0)">查看资产</p>
+              <p  class="table_p2" @click="goDetails1(scope.row.id)">审核情况</p>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+    <el-dialog title="" :visible.sync="editVisible1" :width="dialogType==0?'70%':''">
+      <template v-if="dialogType==0">
+        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '华文中宋'; font-size: 18pt;">人才产权摘牌申请书</span></p>
+        <p>&nbsp;</p>
+        <p style="text-align: right; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt;">金额单位：万元</span></p>
+        <table class="10">
+        <tr>
+        <td>
+        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">意向摘牌方名称</span></p>
+        </td>
+        <td colspan="3">
+        <p>
+          <el-input v-model="query1.delist_firm_name" class="table_input"></el-input>
+        </p>
+        </td>
+        </tr>
+        <tr>
+        <td>
+        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">拟</span><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">摘牌</span><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">标的名称</span></p>
+        </td>
+        <td>
+        <p>
+          <el-input v-model="query1.delist_asset_name" class="table_input"></el-input>
+        </p>
+        </td>
+        <td style="width:20%">
+        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">标的代码</span></p>
+        </td>
+        <td>
+        <p>
+          <el-input v-model="query1.delist_id" class="table_input"></el-input>
+        </p>
+        </td>
+        </tr>
+        <tr>
+        <td>
+        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">拟摘牌标的类型</span></p>
+        </td>
+        <td colspan="3">
+          <el-radio-group v-model="query1.delist_type" class="table_radio_group">
+            <el-radio  label="1" class="table_radio">知识产权（著作权、专利权、专有技术、商标专有权）</el-radio>
+            <el-radio  label="2" class="table_radio">销售网络及客户关系</el-radio>
+            <el-radio  label="3" class="table_radio">特许经营权</el-radio>
+            <el-radio  label="4" class="table_radio">合同权益</el-radio>
+            <el-radio  label="5" class="table_radio">域名</el-radio>
+            <el-radio  label="6" class="table_radio">商誉</el-radio>
+            <el-radio  label="7" class="table_radio">时间和档期</el-radio>
+            <div class="table_radio_group_div">
+              <el-radio  label="8" class="table_radio">其它</el-radio>
+              <el-input v-model="query1.delist_else_type" class="table_input table_input1" ></el-input>
+            </div>
+          </el-radio-group>
+        </td>
+        </tr>
+        <tr>
+        <td>
+        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">摘牌价格（万元）</span></p>
+        </td>
+        <td colspan="3">
+        <p>
+          <el-input v-model="query1.delist_money" class="table_input"></el-input>
+        </p>
+        </td>
+        </tr>
+        <tr>
+        <td>
+        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">摘牌资格条件说明</span></p>
+        </td>
+        <td colspan="3">
+        <p>
+          <el-input v-model="query1.delist_explain" class="table_input"></el-input>
+        </p>
+        </td>
+        </tr>
+        <tr>
+        <td>
+        <p style="text-align: center; margin-top: 0; margin-bottom: 0;"><span style="font-family: '仿宋'; font-size: 12pt; font-weight: bold;">其他</span></p>
+        </td>
+        <td colspan="3">
+        <p>
+          <el-input v-model="query1.delist_else_explain" class="table_input"></el-input>
+        </p>
+        </td>
+        </tr>
+        </table>
+        <p>&nbsp;</p>
+      </template>
+      <template v-else-if="dialogType==1">
+        <div class="examine_content">
+          <img src="../../../assets/img/examine_img.png" alt="" class="examine_img" >
+          <p class="examine_tips">
+            <span >资料已经提交，请耐心等待审核</span>
+          </p>
+        </div>
+      </template>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="editVisible1 = false">取 消</el-button>
+            <el-button type="primary" @click="soldOut">确 定</el-button>
+        </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import {assetList,getTopAssetClass,soldOut} from '../../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        cartellino_type:'',
+        date:'',
+        page:1,
+        limit:10,
+        status:'',
+        asset_type_id:'',
+        serial_name:''
+      },
+      dialogType:0,
+      host:'http://rccqapi.szcaee.cn',
+      action1:'http://rccqapi.szcaee.cn/api/Index/uploadFile',
+      assetLists:[],
+      pageTotal:0,
+      headerList:[
+        {name:'全部资产',status:''},
+        {name:'待审核',status:0},
+        {name:'待复核',status:1},
+        {name:'发布中',status:2},
+        {name:'已下架',status:3},
+        {name:'已转让',status:4},
+      ],
+      header_active:0,
+      AssetClass:[],
+      editVisible1:false,
+      query1:{
+        id:'',
+        delist_firm_name:'',
+        delist_asset_name:'',
+        delist_id:'',
+        delist_type:'',
+        delist_else_type:'',
+        delist_money:'',
+        delist_explain:'',
+        delist_else_explain:'',
+      }
+    }
+  },
+  created(){
+    this.assetList()
+    this.getTopAssetClass()
+  },
+  methods:{
+    goPage(e){
+      this.query.status=e
+      this.assetList()
+    },
+    showDialog(data,type){
+      if (type==0) {
+        this.query1.id=data.id;
+        this.query1.delist_id=data.serial
+        this.query1.delist_money=data.price/10000
+        this.query1.delist_firm_name=data.firm_name
+        this.query1.delist_asset_name=data.serial_name
+      }
+      this.dialogType=type
+      this.editVisible1=true
+    },
+    soldOut(file,id){
+      if (this.dialogType==0) {
+        if (this.query1. delist_firm_name=='') {
+          this.$message.error('意向摘牌方名称不能为空~')
+        }else if (this.query1.delist_asset_name=='') {
+          this.$message.error('拟摘牌标的名称不能为空~')
+        }else if (this.query1.delist_id=='') {
+          this.$message.error('标的代码不能为空~')
+        }else if (this.query1.delist_type=='') {
+          this.$message.error('请选择拟摘牌标的类型~')
+        }else if (this.query1.delist_type==8 && this.query1.delist_else_type=='') {
+          this.$message.error('请填写其他类型~')
+        }else if (this.query1.delist_money=='') {
+          this.$message.error('摘牌价格不能为空~')
+        }else if (this.query1.delist_explain=='') {
+          this.$message.error('摘牌资格条件说明不能为空~')
+        }else{
+          this.$confirm('申请摘牌并且审核通过后，该标的状态为已下架并且不可恢复，请问是否确定申请摘牌？', '提示').then(_ => {
+            soldOut(this.query1).then(res => {
+              console.info(res)
+              if(res.code==100){
+                this.$message.success('申请成功，请等待审核~')
+              }else{
+                this.$message.error(res.msg)
+              }
+            })
+          }).catch(_ => {});
+        }
+      }else{
+        this.editVisible1=false
+      }
+    },
+    handleAvatarError(){
+      this.$message.error('文件上传失败！');
+    },
+    handleAvatarSuccess1(res,file,id){
+      console.info(res)
+      if(res.code==1){
+        let contract=this.host+res.data.img_url;
+        this.soldOut(contract,id)
+      }else{
+        this.$message.error(res.msg);
+      }
+    },
+    getTopAssetClass(){
+      getTopAssetClass(this.query).then(res => {
+        // console.info(res)
+        if(res.code==100){
+          this.AssetClass=res.data;
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    goDetails1(id){
+      this.$router.push({path:'/examine',query:{id:id}})
+    },
+    goDetails(id,type){
+      // if (type==2) {
+
+      // }else{
+        this.$router.push({path:'/AssetListing',query:{id:id,type:type}})
+      // }
+    },
+    tableRowClassName({row, rowIndex}) {
+      let n=rowIndex
+      for(let i=0 ;i<this.assetLists.length;i++){
+        if (rowIndex ===2*i+1 ) {
+          return 'warning-row';
+        }
+      }
+      return '';
+    },
+    //时间戳转换时间
+    formatDate(row,colnum){
+      if(row[colnum.property]==0){
+        return ''
+      }else{
+        return moment(row[colnum.property]*1000).format('YYYY-MM-DD')
+      }
+    },
+    assetList(){
+      assetList(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.assetLists=res.data.list;
+          this.pageTotal=res.data.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      this.assetList();
+    }
+  }
+}
+</script>
+<style scoped>
+  .seach1_select1{
+    margin-left: 10px;
+  }
+  .body_header{
+    background: #F2F2F2;
+    width: 100%;
+    border: 1px solid #D7D7D7;
+    border-top: none;
+    font-size: 14px;
+    color: #333333;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+  .body_header span{
+    display: inline-block;
+    text-align: center;
+  }
+  .seach{
+    margin-top: 20px;
+  }
+  .seach1_select{
+    margin-left: 10px;
+    width: 170px;
+  }
+  .seach_button{
+    width: 60px;
+    height: 30px;
+    font-size: 12px;
+    color: #333333;
+    background-color: transparent;
+    border:1px solid #D7D7D7;
+    cursor: pointer;
+  }
+  .seach_input{
+    width: 100px;
+    margin: 0 15px;
+  }
+  .seach1{
+    width: 100%;
+    height: 50px;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  .seach1_item{
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    height: 100%;
+  }
+  .seach1_item_span{
+    color: #C94C4C;
+  }
+  .select_city{
+    margin: 0 15px;
+  }
+  .header{
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .header_right{
+    display: flex;
+    align-items: center;
+  }
+  .hedaer_button{
+    width: 100px;
+    height: 30px;
+    color: white;
+    border: none;
+    background: -moz-linear-gradient(top, #F8D89F 0%, #C94C4C 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#C94C4C));
+    background: -webkit-linear-gradient(top, #F8D89F 0%,#C94C4C 100%);
+    background: -o-linear-gradient(top, #F8D89F 0%,#C94C4C 100%);
+    background: -ms-linear-gradient(top, #F8D89F 0%,#C94C4C 100%);
+    background: linear-gradient(to bottom, #F8D89F 0%,#C94C4C 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 15px;
+    cursor: pointer;
+  }
+  .header_active{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .header span{
+    display: inline-block;
+    padding: 0 10px;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .header span:hover{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .order_item{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding: 15px 0;
+  }
+  .order_item:nth-child(2n+2){
+    background-color: #FDF8F8;
+  }
+  .order_item_id{
+    padding: 0 15px;
+  }
+  .order_item_img{
+    width: 100px;
+    height: 100px;
+    margin: 0 15px;
+  }
+  .order_item_info_title{
+    display: flex;
+    font-size: 14px;
+    color: #7F7F7F;
+    align-items: center;
+    width: 1020px;
+    justify-content: space-between;
+  }
+  .order_item_info_content{
+    display: flex;
+    align-items: center;
+    width: 1020px;
+    font-size: 14px;
+    justify-content: space-between;
+    margin-top: 5px;
+    color: #333333;
+  }
+  .order_item_info_content_left p{
+    width: 300px;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_price{
+    /* margin:0 30px; */
+    text-align: center;
+  }
+  .order_item_info_content_price_p{
+    text-decoration: line-through;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_all{
+    font-weight: bold;
+  }
+  .order_item_info_content_operation{
+    color: #555555;
+  }
+  .order_item_info_content_operation p{
+    margin-bottom: 5px;
+  }
+  .body>>>.warning-row{
+    background: #F2F2F2;
+  }
+  .table_div >p{
+    font-size: 12px;
+    text-align: left;
+  }
+  .table_p{
+    color: #7F7F7F;
+  }
+  .table_p1{
+    color: black;
+  }
+  .table_p2{
+    color: #294CC6;
+    cursor: pointer;
+  }
+
+
+  a.NoteRef {text-decoration: none;}
+  hr {height: 1px; padding: 0; margin: 1em 0; border: 0; border-top: 1px solid #CCC;}
+  table {border: 1px solid black; border-spacing: 0px; width : 100%; height: 500px;}
+  td {border: 1px solid black;}
+  .Normal {font-size: 10.5pt;}
+  h1 {font-size: 22pt; font-weight: bold;}
+  .Document Map {margin-top: 0; margin-bottom: 0;}
+  .Body Text {font-size: 42pt;}
+  .Body Text Indent {font-size: 12pt; font-weight: bold;}
+  .Body Text Indent  {margin-bottom: 6pt;}
+  .Balloon Text {font-size: 9pt;}
+  .footer {font-size: 9pt;}
+  .header {font-size: 9pt;}
+  .Hyperlink {color: #0000FF; text-decoration: underline ;}
+
+  .table_input >>> .el-input__inner{
+    border: none;
+    font-family: 仿宋;
+    font-size: 12pt;
+    font-weight: bold;
+  }
+  .table_radio{
+    font-family: 仿宋;
+    font-size: 12pt;
+    margin-bottom: 10px;
+  }
+  .table_radio_group{
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+  }
+  .table_input1>>> .el-input__inner{
+    border-bottom: 1px solid black;
+    width: 70%;
+    border-radius:0
+  }
+  .table_radio_group_div{
+    display: flex;
+    align-items: center;
+  }
+  .table_radio_group_div .table_radio{
+    margin-bottom: 0;
+  }
+
+
+
+
+  .examine_img{
+    width: 144px;
+    height: 129px;
+  }
+  .error_msg{
+    margin-top: 60px;
+    text-align: left;
+  }
+  .error_msg> p{
+    color: #555555;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  .examine_tips_span{
+    display: inline-block;
+    color: #C94C4C;
+    text-decoration: underline;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+  .examine_tips{
+    margin-top: 20px;
+  }
+  .examine_content{
+    width: 100%;
+    text-align: center;
+    padding-top: 40px;
+    color: #C3CBD6;
+    font-size: 14px;
+    box-sizing: border-box;
+  }
+</style>

src/components/page/Hoster/myOrder.vue

@@ -0,0 +1,352 @@
+<template>
+  <div>
+    <div class="header">
+      <span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="changeSelect(index,item.type)">{{item.name}}</span>
+    </div>
+    <div class="seach">
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>订单类型</span>
+          <el-select v-model="query.cartellino_type" @change="getData" class="seach1_select">
+            <el-option :key="0" label="全部" value=""></el-option>
+            <el-option :key="1" label="协议" :value="1"></el-option>
+            <el-option :key="2" label="拍卖" :value="2"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <span>摘牌方名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入挂牌方关键字"
+            v-model="query.buyer">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>下单时间</span>
+          <el-date-picker
+            v-model="query.create_time"
+            type="date"
+            placeholder="选择日期"
+            class="seach1_select1"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            @change="getData">
+          </el-date-picker>
+        </div>
+        <div class="seach1_item">
+          <span>标的名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入标的名称关键字"
+            v-model="query.asset_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <button @click="getData" class="seach_button">确定</button>
+        </div>
+      </div>
+      <div class="body_header">
+        <span style="width:48px">序号</span>
+        <span style="width:460px">标的</span>
+        <span style="width:100px">单价</span>
+        <span style="width:170px">数量</span>
+        <span style="width:115px">交易总额</span>
+        <span style="width:170px">交易状态</span>
+        <span style="width:75px;text-align: right;">交易操作</span>
+      </div>
+    </div>
+    <div class="body">
+      <div class="order_item" v-for="(item,index) in orderList" :key="index">
+        <div class="order_item_id">{{item.id}}</div>
+        <img :src="item.serial_img" alt="" class="order_item_img">
+        <div class="order_item_info">
+          <div class="order_item_info_title">
+            <span>{{item.create_time | formatDate}}</span>
+            <span>订单编号：{{item.batchcode}}</span>
+            <span>摘牌方：{{item.firm_name}}</span>
+            <span>标的编号：{{item.serial_number}}</span>
+          </div>
+          <div class="order_item_info_content">
+            <div class="order_item_info_content_left">
+              <p>{{item.serial_name}}</p>
+              <!-- <p>契税：¥ {{item.contract_tax}}</p> -->
+              <p>手续费：¥ {{item.service_charge}}</p>
+              <!-- <p>印花税：¥ {{item.printing_tax}}</p> -->
+            </div>
+            <div class="order_item_info_content_price">
+              <p>¥ {{item.price}}</p>
+            </div>
+            <div class="order_item_id">{{item.count}}</div>
+            <div class="order_item_info_content_all">¥ {{item.total_price}}</div>
+            <div>
+              <span v-if="item.status==0">待支付</span>
+              <span v-else-if="item.status==1">待审核付款</span>
+              <span v-else-if="item.status==2">待上传签约合同</span>
+              <span v-else-if="item.status==3">待确认签约合同</span>
+              <span v-else-if="item.status==4">待交付</span>
+              <span v-else-if="item.status==5">待确认交付</span>
+              <span v-else-if="item.status==6">待结算</span>
+              <span v-else-if="item.status==7">已完成</span>
+              <span v-else-if="item.status==8">已关闭</span>
+              <span v-else-if="item.status==9">退款中</span>
+              <span v-else-if="item.status==10">已退款</span>
+              <span v-else-if="item.status==11">已取消</span>
+              <p v-if="item.check_status==2" style="color:red">(审核不通过)</p>
+            </div>
+            <div class="order_item_info_content_operation">
+              <p @click="goDetails(item.status,item.batchcode,item.type)">订单详情</p>
+              <a v-if="item.status>=6" :href="item.sell_contract" target="_blank" rel="nofollow">下载合同</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import {seller_order_list} from '../../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        cartellino_type:'',
+        buyer:'',
+        create_time:'',
+        asset_name:'',
+        page:1,
+        limit:10,
+        order_status:''
+      },
+      pageTotal:0,
+
+      headerList:[
+        {name:'全部订单',type:''},
+        {name:'待付款',type:1},
+        {name:'待审核付款',type:6},
+        {name:'待签约',type:2},
+        {name:'待确认签约合同',type:7},
+        {name:'待交付',type:3},
+        {name:'待确认交付',type:8},
+        {name:'待结算',type:9},
+        {name:'已完成',type:4},
+        {name:'已关闭',type:5},
+      ],
+      orderList:[],
+      header_active:0
+    }
+  },
+  created(){
+    this.getData()
+  },
+  methods:{
+    goDetails(status,batchcode,orderType){
+      let step,
+      type=1,
+      url='/order/sellorderPendingPay';
+      if(status==0||status==1){
+        step=1
+      }else if(status==2||status==3){
+        step=2
+      }else if(status==4||status==5){
+        step=3
+      }else if(status==6 ){
+        step=4
+      }else if(status==7){
+        step=5
+        url='/order/orderDetails'
+      }else if (status==8) {
+        step=2
+        url='/order/orderDetails'
+        type=2
+      }
+      this.$router.push({path:url,query:{step:step,batchcode:batchcode,type:type,orderType:orderType}})
+    },
+    changeSelect(index,type){
+      this.header_active=index
+      this.query.order_status=type
+      this.getData()
+    },
+    getData(){
+      seller_order_list(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.orderList=res.data.list;
+          this.pageTotal=res.data.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      this.getData();
+    }
+  }
+}
+</script>
+<style scoped>
+  .seach1_select1{
+    margin-left: 10px;
+  }
+  .body_header{
+    background: #F2F2F2;
+    width: 100%;
+    border: 1px solid #D7D7D7;
+    border-top: none;
+    font-size: 14px;
+    color: #333333;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+  .body_header span{
+    display: inline-block;
+    text-align: center;
+  }
+  .seach{
+    margin: 20px 0;
+  }
+  .seach1_select{
+    margin-left: 10px;
+    width: 170px;
+  }
+  .seach_button{
+    width: 60px;
+    height: 30px;
+    font-size: 12px;
+    color: #333333;
+    background-color: transparent;
+    border:1px solid #D7D7D7;
+    cursor: pointer;
+  }
+  .seach_input{
+    width: 100px;
+    margin: 0 15px;
+  }
+  .seach1{
+    width: 100%;
+    height: 50px;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  .seach1:last-child{
+    border-top: none;
+  }
+  .seach1_item{
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    height: 100%;
+  }
+  .seach1_item_span{
+    color: #C94C4C;
+  }
+  .select_city{
+    margin: 0 15px;
+  }
+  .header{
+    font-size: 14px;
+  }
+  .header_active{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .header span{
+    display: inline-block;
+    padding: 0 10px;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .header span:hover{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .body{
+    margin-top: 10px;
+  }
+  .order_item{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding: 15px 0;
+  }
+  .order_item:nth-child(2n+2){
+    background-color: #F2F2F2;
+  }
+  .order_item_id{
+    padding: 0 15px;
+  }
+  .order_item_img{
+    width: 100px;
+    height: 100px;
+    margin: 0 15px;
+  }
+  .order_item_info_title{
+    display: flex;
+    font-size: 14px;
+    color: #7F7F7F;
+    align-items: center;
+    width: 1020px;
+    justify-content: space-between;
+  }
+  .order_item_info_content{
+    display: flex;
+    align-items: center;
+    width: 1020px;
+    font-size: 14px;
+    justify-content: space-between;
+    margin-top: 5px;
+    color: #333333;
+    padding-right: 15px;
+    box-sizing: border-box;
+  }
+  .order_item_info_content_left p{
+    width: 300px;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_price{
+    /* margin:0 30px; */
+    text-align: center;
+  }
+  .order_item_info_content_price_p{
+    text-decoration: line-through;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_all{
+    font-weight: bold;
+  }
+  .order_item_info_content_operation{
+    color: #555555;
+  }
+  .order_item_info_content_operation p{
+    margin-bottom: 5px;
+    cursor: pointer;
+  }
+  .order_item_info_content_operation a{
+    color: #555555;
+    cursor: pointer;
+  }
+</style>

src/components/page/Listing.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="body">
+    <div class="seach">
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>
+            全部资产 （
+            <span class="seach1_item_span">{{pageTotal}}</span>
+            ）
+          </span>
+        </div>
+        <div class="seach1_item">
+          <el-select  v-model="query.select" @change="getData">
+            <el-option :key="0" label="标的价格升序" :value="0"></el-option>
+            <el-option :key="1" label="标的价格降序" :value="1"></el-option>
+            <el-option :key="2" label="挂牌时间升序" :value="2"></el-option>
+            <el-option :key="3" label="挂牌时间降序" :value="3"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <el-date-picker
+            v-model="query.date"
+            type="date"
+            placeholder="选择日期"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            @change="getData">
+          </el-date-picker>
+        </div>
+        <div class="seach1_item">
+          <span>价格</span>
+          <el-input
+            class="seach_input"
+            v-model="query.min_price">
+            <span slot="prefix" class="el-input__icon ">￥</span>
+          </el-input>
+          <span>-</span>
+          <el-input
+            class="seach_input"
+            v-model="query.max_price">
+            <span slot="prefix" class="el-input__icon ">￥</span>
+          </el-input>
+          <button @click="getData" class="seach_button">确定</button>
+        </div>
+      </div>
+
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>挂牌类型</span>
+          <el-select      v-model="query.cartellino_type" @change="getData" class="seach1_select">
+            <el-option :key="0" label="全部" value=""></el-option>
+            <el-option :key="1" label="协议" :value="1"></el-option>
+            <el-option :key="2" label="拍卖" :value="2"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <span>挂牌方名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入挂牌方关键字"
+            v-model="query.username">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>标的代码</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入标的代码"
+            v-model="query.cartellino_id">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>标的名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入标的名称关键字"
+            v-model="query.serial_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <button @click="getData" class="seach_button">确定</button>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="tabs">
+      <div class="tabs_item" v-for="(item,index) in listingList" :key="index">
+        <img :src="item.serial_img[0]" alt="" class="tabs_item_img">
+        <div class="tabs_item_right">
+          <p class="tabs_item_right_p">{{item.serial}}</p>
+          <p class="tabs_item_right_p">{{item.serial_name}}</p>
+          <div class="tabs_item_right_div">
+            {{item.serial_describe}}
+          </div>
+          <p class="tabs_item_right_p1">{{item.create_time | formatDate('YYYY-MM-DD HH:mm:ss')}}</p>
+          <p class="tabs_item_right_p2" @click="goDetails(item.id)">点击详情 ></p>
+          <p class="tabs_item_right_p3">
+            <span class="tabs_item_right_span">挂牌方 </span>
+            <span>{{item.firm_name}}</span>
+          </p>
+          <p class="tabs_item_right_p3" style="margin-top:5px">
+            <span class="tabs_item_right_span">标的编号 </span>
+            <span>{{item.serial_number}}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import {assetNoticeList} from '../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        page:1,
+        limit:10,
+        order_type:'',
+        order_name:'',
+        date:'',
+        min_price:'',
+        max_price:'',
+        cartellino_type:'',
+        username:'',
+        cartellino_id:'',
+        serial_name:'',
+      },
+      pageTotal:0,
+      listingList:[]
+    }
+  },
+  created(){
+    this.getData()
+  },
+  methods:{
+    getData(){
+      assetNoticeList(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.listingList=res.data.list;
+          this.pageTotal=res.data.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    goDetails(id){
+      this.$router.push({path:'/NoticeDetails',query:{id:id,type:0}})
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      // this.getData();
+    }
+  },
+}
+</script>
+<style scoped>
+  .body{
+    width: 1200px;
+    margin: 0 auto;
+  }
+  .seach{
+    margin: 20px 0;
+  }
+  .seach1_select{
+    margin-left: 10px;
+    width: 170px;
+  }
+  .seach_button{
+    width: 60px;
+    height: 30px;
+    font-size: 12px;
+    color: #333333;
+    background-color: transparent;
+    border:1px solid #D7D7D7;
+    cursor: pointer;
+  }
+  .seach_input{
+    width: 100px;
+    margin: 0 15px;
+  }
+  .seach1{
+    width: 100%;
+    height: 50px;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  .seach1:last-child{
+    border-top: none;
+  }
+  .seach1_item{
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid #D7D7D7;
+    font-size: 12px;
+    height: 100%;
+  }
+  .seach1_item_span{
+    color: #C94C4C;
+  }
+  .seach1_item:last-child{
+    border-right: none;
+  }
+  .select_city{
+    margin: 0 15px;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .tabs{
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  .tabs_item{
+    width: 583px;
+    height: 232px;
+    background-color: #FDF8F8;
+    border: 1px solid #E9B7B7;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+  }
+  .tabs_item:nth-child(2n){
+    background: #F5FAFA;
+    border: 1px solid #99CCCC;
+  }
+  .tabs_item_img{
+    width: 201px;
+    height: 201px;
+    margin-right: 15px;
+  }
+  .tabs_item_right{
+    height: 201px;
+  }
+  .tabs_item_right_p{
+    font-size: 18px;
+    color: #C94C4C;
+    width: 324px;
+    overflow: hidden; /*文本超出隐藏*/
+    display:-webkit-box; /*盒子模型微弹性伸缩模型*/
+    -webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
+    -webkit-line-clamp: 2; /*文本显示3行*/
+  }
+  .tabs_item_right_div{
+    font-size: 14px;
+    color: #7F7F7F;
+    width: 324px;
+    overflow: hidden; /*文本超出隐藏*/
+    display:-webkit-box; /*盒子模型微弹性伸缩模型*/
+    -webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
+    -webkit-line-clamp: 3; /*文本显示3行*/
+    margin-top: 10px;
+  }
+  .tabs_item_right_p1{
+    font-size: 14px;
+    color: #7F7F7F;
+    text-align: right;
+  }
+  .tabs_item_right_p2{
+    font-size: 14px;
+    color: #C94C4C;
+    cursor: pointer;
+    margin: 5px 0;
+  }
+  .tabs_item_right_p3{
+    font-size: 14px;
+    color: #C94C4C;
+  }
+  .tabs_item_right_span{
+    color: #7F7F7F;
+  }
+</style>

src/components/page/NoticeDetails.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="path">{{type==0?'挂牌公告':'摘牌公告'}}</el-breadcrumb-item>
+        <el-breadcrumb-item>公告详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="tabs">
+      <div class="detalie">
+        <div class="detalie_title">所含标的物</div>
+        <div class="detalie_content">
+          <div class="tabs_item" @click="goDetails(detailsDate.id)" >
+            <img :src="detailsDate.serial_img" alt="" class="tabs_item_img">
+            <div class="tabs_item_lable">{{detailsDate.serial_number}}</div>
+            <div class="tabs_item_content">
+              <p class="tabs_item_content_title">{{detailsDate.serial_name}}</p>
+              <p class="tabs_item_content_p">
+                <span>资产价格： </span>
+                <span class="tabs_item_content_span">￥</span>
+                <span class="tabs_item_content_span tabs_item_content_span1">{{detailsDate.price}}</span>
+              </p>
+              <p class="tabs_item_content_p">
+                <span>标的类型： </span>
+                <span class="tabs_item_content_span2 tabs_item_content_span3">{{detailsDate.serial_type_name}}</span>
+              </p>
+              <p class="tabs_item_content_p">
+                <span>所在地： </span>
+                <span class="tabs_item_content_span2 tabs_item_content_span3">{{detailsDate.address}}</span>
+              </p>
+              <p class="tabs_item_content_p">
+                <span>有效日期： </span>
+                <span class="tabs_item_content_span2 ">{{detailsDate.effective_date}}前</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="detalie detalie1">
+        <div class="detalie_title">公告内容</div>
+        <div class="detalie_content">
+          <div class="detalie1_div" v-if="detailsDate.delist_file_img.length!=0">
+            <img :src="item" alt="" class="detalie1_img" v-for="(item,index) in detailsDate.delist_file_img" :key="index">
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import {end_detail,assetNoticeInfo} from '../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        id:''
+      },
+      type:0,
+      path:{
+        path:'/Listing'
+      },
+      detailsDate:{}
+    }
+  },
+  created(){
+    this.query.id=this.$route.query.id
+    this.type=this.$route.query.type
+    if (this.type==0) {
+      this.path={path:'/Listing'}
+      this.assetNoticeInfo()
+    }else{
+      this.path={path:'/DelistingNotice'}
+      this.end_detail()
+    }
+  },
+  methods:{
+    goDetails(id){
+      this.$router.push({path:'/AssetDetails',query:{id:id}})
+    },
+    end_detail(){
+      end_detail(this.query).then(res=>{
+        console.info(res)
+        if (res.code==100) {
+          this.detailsDate=res.data
+        }
+      })
+    },
+    assetNoticeInfo(){
+      assetNoticeInfo(this.query).then(res=>{
+        console.info(res)
+        if (res.code==100) {
+          this.detailsDate=res.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+  .tabs{
+    margin-top: 20px;
+    /* display: flex; */
+    border: 1px solid rgba(215, 215, 215, 1);
+    /* border: 1px solid #E9B7B7; */
+  }
+  .detalie{
+    display: flex;
+    min-height: 360px;
+  }
+  .detalie1{
+    border-top: 1px solid rgba(215, 215, 215, 1);
+  }
+  .detalie_title{
+    width: 110px;
+    min-height: 360px;
+    /* background: #F6E0E0; */
+    background-color: rgba(242, 242, 242, 1);
+    font-size: 18px;
+    /* color: #C94C4C; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    writing-mode: vertical-lr
+  }
+  .detalie_content{
+    /* background: #FDF8F8; */
+    padding: 20px 20px;
+    width: 1088px;
+    box-sizing: border-box;
+    border-left: 1px solid rgba(215, 215, 215, 1);
+  }
+  .detalie1_div{
+    text-align: center;
+  }
+  .detalie1_img{
+    width: 800px;
+    height: 800px;
+  }
+  .tabs_item{
+    width: 283px;
+    height: 300px;
+    border: 1px solid rgba(215, 215, 215, 1);
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    position: relative;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  .tabs_item_img{
+    width: 100%;
+    height: 170px;
+    border-radius: 5px 5px 0 0;
+  }
+  .tabs_item_lable{
+    width: 100px;
+    height: 25px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    color: #FFFFFF;
+    background: #C94C4C;
+    z-index: 100;
+    line-height: 25px;
+    text-align: center;
+  }
+  .tabs_item_lable::after{
+    content: '';
+    border-top: 12.5px solid transparent;
+    border-left: 10px solid #C94C4C;
+    border-bottom: 12.5px solid transparent;
+    position: absolute;
+    top: 0;
+    left: 100px;
+  }
+  .breadcrumb{
+    margin-top: 30px;
+  }
+  .el-breadcrumb{
+    font-size: 18px;
+  }
+  .seach_div{
+    display: flex;
+    align-items: center;
+  }
+  .tabs_item_content{
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.5);
+    height: 150px;
+    margin-top: -40px;
+    /* padding: 10px 10px; */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    /* padding-bottom: 10px; */
+  }
+  .tabs_item_content_title{
+    width: 100%;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    background: rgba(238, 238, 238, 0.5);
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .tabs_item_content_p{
+    color: #7F7F7F;
+    font-size: 12px;
+    padding-left: 10px;
+  }
+  .tabs_item_content_span{
+    color: #C94C4C;
+  }
+  .tabs_item_content_span1{
+    font-size: 18px;
+  }
+  .tabs_item_content_span2{
+    color: #333333;
+  }
+  .tabs_item_content_span3{
+    font-weight: bold;
+  }
+</style>

src/components/page/Order/confirmOrder.vue

@@ -0,0 +1,334 @@
+<template>
+  <div>
+    <p class="title">确认订单信息</p>
+    <div class="order_head">
+      <div class="order_head_item" >资产名称</div>
+      <div class="order_head_item" >资产编号</div>
+      <div class="order_head_item" >资产分类</div>
+      <div class="order_head_item" >资产单价</div>
+      <div class="order_head_item" >交易数量</div>
+      <div class="order_head_item" >金额小计</div>
+    </div>
+    <p class="order_title">挂牌方：{{orderInfo.account_name}}</p>
+    <div class="order_content">
+      <div class="order_content_item">
+        <img :src="orderInfo.serial_img" alt="" class="order_content_item_img">
+        <span class="order_content_item_span">{{orderInfo.serial_name}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfo.serial}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfo.asset_type_name}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>¥ {{orderInfo.money}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfo.count}}</span>
+      </div>
+      <div class="order_content_item">
+        <span class="order_price">¥ {{orderInfo.price}}</span>
+      </div>
+    </div>
+    <div class="order_other">
+      <div class="order_other_item">
+        <div class="order_message " :class="query.type==1?'order_message1':''">
+          <span>给挂牌方留言：</span>
+          <el-input
+            type="textarea"
+            class="order_message_input"
+            resize="none"
+            placeholder="请输入内容"
+            v-model="query.buy_message">
+          </el-input>
+        </div>
+        <!-- <div class="order_other_item_right" v-if="query.type==0"> -->
+        <div class="order_other_item_right" >
+          <div>
+            <span>手续费： ¥ {{orderInfo.service_charge}}</span>
+            <span class="order_price">¥ {{orderInfo.service_charge}}</span>
+          </div>
+          <!-- <div>
+            <span>印花税： ¥ {{orderInfo.printing_tax}}</span>
+            <span class="order_price">¥ {{orderInfo.printing_tax}}</span>
+          </div> -->
+        </div>
+      </div>
+      <div class="order_other_item order_other_item1">
+        <span>金额合计  </span>
+        <span class="all_price"> ¥ {{orderInfo.totall_price}}</span>
+      </div>
+    </div>
+    <div class="order_foot">
+      <div class="order_info">
+        <p class="order_info_item">
+          <span class="order_info_span">实付款：</span>
+          <span class="order_info_span1">¥ {{orderInfo.totall_price}}</span>
+        </p>
+        <p class="order_info_item">
+          <span class="order_info_span">联系地址： </span>
+          <el-input placeholder="联系地址" v-model="query.address" class="order_info_item_input" v-if="isEdit"></el-input>
+          <template v-else-if="!isEdit">
+            <span >{{orderInfo.express.address}}</span>
+            <span class="order_info_item1" @click="isEdit=true">编辑</span>
+          </template>
+        </p>
+        <p class="order_info_item">
+          <span class="order_info_span">联系人： </span>
+          <template v-if="isEdit">
+            <el-input placeholder="联系人" v-model="query.uname" class="order_info_item_input order_info_item_input1"></el-input>
+            <el-input placeholder="联系电话" v-model="query.phone" class="order_info_item_input order_info_item_input1"></el-input>
+          </template>
+          <span v-else-if="!isEdit">{{orderInfo.express.uname}} {{orderInfo.express.phone}}</span>
+        </p>
+      </div>
+      <button class="order_button" @click="submit">提交订单</button>
+    </div>
+  </div>
+</template>
+<script>
+import { getConfirmOrder,submitOrder} from '../../../api/index'
+export default {
+  name:'confirmOrder',
+  data(){
+    return{
+      query:{
+        id:'',
+        count:'',
+        buy_message:'',
+        type:'',
+        address:'',
+        phone:'',
+        uname:''
+      },
+      isEdit:false,
+      orderInfo:{
+        express:{}
+      }
+    }
+  },
+  created(){
+    this.query.id=this.$route.query.id
+    this.query.count=this.$route.query.count
+    this.query.type=this.$route.query.orderType
+    this.getDate()
+  },
+  methods:{
+    getDate(){
+      getConfirmOrder(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.orderInfo=res.data;
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    submit(){
+      submitOrder(this.query).then(res=>{
+        console.info(res)
+        if(res.code==100){
+          this.$router.push({path:'/order/orderPayment',query:{step:1,batchcode:res.data.batchcode,type:0}})
+          this.$emit('confirm',res.data)
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+  .title{
+    font-size: 14px;
+    margin-bottom: 30px;
+  }
+
+  .order_head{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    width: 100%;
+  }
+  .order_head_item{
+    width: 166px;
+    font-size: 12px;
+    color: #7F7F7F;
+    text-align: center;
+    border-bottom: 2px solid rgba(215, 215, 215, 1);
+    padding-bottom: 5px;
+  }
+  .order_head_item:first-child{
+    width:340px
+  }
+  .order_title{
+    font-size: 12px;
+    color: #7F7F7F;
+    margin-bottom: 5px;
+  }
+  .order_content{
+    height: 75px;
+    background-color: rgba(255, 255, 255, 0);
+    border-top: 1px dashed #AAAAAA;
+    border-bottom: 1px dashed #AAAAAA;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  .order_content_item{
+    width: 166px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    box-sizing: border-box;
+  }
+  .order_content_item:first-child{
+    width:340px;
+    justify-content: flex-start;
+    padding-left: 20px;
+  }
+  .order_content_item:last-child{
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+  .order_content_item_img{
+    width: 55px;
+    height: 55px;
+    margin-right: 10px;
+  }
+  .order_content_item_span{
+    display: inline-block;
+    width: 240px;
+  }
+  .order_price{
+    color: #EB4747;
+  }
+  .order_other{
+    margin-bottom: 20px;
+  }
+  .order_other_item{
+    display: flex;
+    justify-content: space-between;
+    height: 103px;
+    width: 100%;
+  }
+  .order_message{
+    width: 596px;
+    padding: 10px 20px;
+    display: flex;
+    font-size: 12px;
+    background: #F2F2F2;
+    box-sizing: border-box;
+  }
+  .order_message1{
+    width: 100%;
+  }
+  .order_message .order_message_input{
+    width: 455px;
+    margin-left: 10px;
+  }
+  .order_message_input >>>.el-textarea__inner{
+    height: 75px;
+  }
+  .order_other_item_right{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .order_other_item_right>div{
+    width: 601px;
+    /* height: 50px; */
+    height: 100%;
+    background-color: rgba(242, 242, 242, 1);
+    font-size: 12px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+  .order_other_item1{
+    height: 50px;
+    background: #F2F2F2;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+    font-size: 14px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+  .all_price{
+    color: #EB4747;
+    font-weight: 650;
+  }
+  .order_other_item1>span:first-child{
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .order_info{
+    width: 400px;
+    min-height: 140px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: rgba(137, 32, 31, 1);
+    text-align: right;
+    padding: 20px 0;
+    padding-right: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+  .order_info_item{
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    font-weight: 400;
+    color: #555555;
+    justify-content: flex-end;
+  }
+  .order_info_item1{
+    cursor: pointer;
+    color: blue;
+    font-size:12px ;
+    display: inline-block;
+    margin-left: 10px;
+  }
+  .order_info_item_input{
+    font-size: 12px;
+    width: auto;
+    margin-left: 5px;
+  }
+  .order_info_item_input1{
+    width: 30%;
+
+  }
+  .order_info_span{
+    font-weight: 650;
+    color: #333333;
+  }
+  .order_info_span1{
+    font-size: 24px;
+    color: #EB4747;
+    font-weight: 650;
+  }
+  .order_button{
+    font-size: 14px;
+    color: #FFFFFF;
+    width: 160px;
+    height: 40px;
+    background: #89201F;
+    border: none;
+  }
+  .order_foot{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+</style>

src/components/page/Order/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="body">
+    <p class="title">{{title[step]}}</p>
+    <el-steps :active="step" align-center class="step_bar">
+      <el-step title="确认订单" :description="confirmTime.confirm_order_time | formatDate" ></el-step>
+      <el-step title="订单付款" :description="confirmTime.pay_time | formatDate" v-if="type==0 || type==1"></el-step>
+      <template v-if="orderType==0">
+        <el-step title="线下签约" :description="confirmTime.confirm_contract_time | formatDate" v-if="type==0 || type==1"></el-step>
+        <el-step title="确认交付" :description="confirmTime.confirm_delivery_time | formatDate" v-if="type==0 || type==1"></el-step>
+        <el-step title="订单结算" :description="confirmTime.settlement_time | formatDate" v-if="type==1"></el-step>
+      </template>
+      <template v-else>
+        <el-step title="订单完成" :description="confirmTime.close_time | formatDate"></el-step>
+      </template>
+      <el-step title="订单关闭" :description="confirmTime.close_time | formatDate" v-if="type==2"></el-step>
+    </el-steps>
+    <router-view @confirm="confirm" ></router-view>
+  </div>
+</template>
+<script>
+export  default{
+  data(){
+    return{
+      step:0,
+      title:['确认订单','订单付款','线下签约','确认交付'],
+      confirmTime:'',
+      type:0,
+      //0是资产购买，1是资产评估购买
+      orderType:0
+    }
+  },
+  created(){
+    let orderType=localStorage.getItem('orderType')
+    console.info(orderType)
+    this.step= parseInt(this.$route.query.step)
+    console.info(this.$route)
+    this.type=this.$route.query.type
+    if (this.$route.query.orderType) {
+      this.orderType=this.$route.query.orderType
+      localStorage.setItem('orderType',this.orderType)
+    }else if (orderType) {
+      this.orderType=orderType
+    }
+  },
+  methods:{
+    confirm(val){
+      console.info(val);
+      this.confirmTime=val;
+      if (val.status==8 || val.status==2 || val.status==3) {
+        this.step=2
+        if (val.status==8) {
+          if (this.$route.path!='/order/orderDetails') {
+            this.$router.push({path:'/order/orderDetails',query:{batchcode:val.batchcode,type:2}})
+          }
+          this.type=2
+        }
+      }else if (val.status==0 ||val.status==1) {
+        this.step=1
+      }else if (val.status==4 ) {
+        this.step=3
+      }else if (val.status==6 ) {
+        this.step=4
+      }else if (val.status==7 ) {
+        this.step=5
+        if (this.$route.path!='/order/orderDetails') {
+          this.$router.push({path:'/order/orderDetails',query:{batchcode:val.batchcode,type:this.$route.query.type}})
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+  .body{
+    margin-top: 30px;
+  }
+  .title{
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+  .step_bar{
+    margin-bottom: 30px;
+  }
+  .step_bar>>>.el-step__icon{
+    width: 34px;
+    height: 34px;
+  }
+  .step_bar>>>.el-step.is-horizontal .el-step__line{
+    top: 17px;
+  }
+</style>

src/components/page/Order/orderDetails.vue

@@ -0,0 +1,347 @@
+<template>
+  <div>
+    <div class="order_info">
+      <div class="order_info_left">
+        <div class="order_info_left_title">订单信息</div>
+        <div class="order_info_left_content">
+          <div class="order_info_left_content_item">
+            <span>联系地址： </span>
+            <span>{{orderInfos.express_address}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>联系人：  </span>
+            <span>{{orderInfos.express_user}} {{orderInfos.express_userphone}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>订单编号：  </span>
+            <span>{{orderInfos.batchcode}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>下单时间：  </span>
+            <span>{{orderInfos.create_time | formatDate}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>挂牌方：  </span>
+            <span>{{orderInfos.sell_name}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>摘牌方留言： </span>
+            <span>{{orderInfos. sell_message}}</span>
+          </div>
+        </div>
+      </div>
+      <div class="order_info_right">
+        <div class="order_info_right_title">
+          <img src="../../../assets/img/order_stats2.png" alt="" v-if="type==2">
+          <img src="../../../assets/img/order_stats1.png" alt="" v-else>
+          <span>订单状态：{{type==2?'已关闭':'已完成'}}</span>
+        </div>
+        <p class="order_info_right_tips" v-if="type==0">双方交易已完成！</p>
+        <p class="order_info_right_tips" v-else-if="type==1">双方交易已完成！订单结算金额（¥ {{orderInfos.price}}）已转入开户账户，请及时查收！</p>
+        <p class="order_info_right_tips" v-else-if="type==2">交易订单已关闭！详情请咨询客服人员。</p>
+        <div class="order_info_right_tips" v-if="type!=2">
+          <span>您可以点击</span>
+          <a class="pay_button" :href="orderInfos.type==1?orderInfos.asset_report:orderInfos.transaction_pdf" target="_blank" rel="nofollow">{{orderInfos.type==1?'资产评估报告':'交易凭证'}}</a>
+          <span>下载{{orderInfos.type==1?'资产评估报告':'交易凭证'}}</span>
+        </div>
+      </div>
+    </div>
+    <div class="order_head">
+      <div class="order_head_item" >资产名称</div>
+      <div class="order_head_item" >资产编号</div>
+      <div class="order_head_item" >资产分类</div>
+      <div class="order_head_item" >资产单价</div>
+      <div class="order_head_item" >交易数量</div>
+      <div class="order_head_item" >金额小计</div>
+    </div>
+    <div class="order_content">
+      <div class="order_content_item">
+        <img :src="orderInfos.serial_img[0]" alt="" class="order_content_item_img">
+        <span class="order_content_item_span">{{orderInfos.serial_name}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>GM-BZ-165254
+          <!-- {{orderInfos.serial_name}} -->
+        </span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfos.asset_type_name}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>¥ {{orderInfos.single_price}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfos.count}}</span>
+      </div>
+      <div class="order_content_item">
+        <span class="order_price">¥ {{orderInfos.price}}</span>
+      </div>
+    </div>
+    <div class="order_other">
+      <div class="order_other_item">
+        <div class="order_message" :class="orderInfos.type==1?'order_message1':''">
+          <span>给挂牌方留言：</span>
+          <span>{{orderInfos.buy_message}}</span>
+        </div>
+        <div class="order_other_item_right" v-if="orderInfos.type==0">
+          <!-- <div>
+            <span>契税： ¥ {{orderInfos.contract_tax}}</span>
+            <span class="order_price">¥ {{orderInfos.contract_tax}}</span>
+          </div>
+          <div>
+            <span>印花税： ¥ {{orderInfos.printing_tax}}</span>
+            <span class="order_price">¥ {{orderInfos.printing_tax}}</span>
+          </div> -->
+          <div>
+            <span>手续费： ¥ {{orderInfos.service_charge}}</span>
+            <span class="order_price">¥ {{orderInfos.service_charge}}</span>
+          </div>
+        </div>
+      </div>
+      <div class="order_other_item order_other_item1">
+        <span>金额合计  </span>
+        <span class="all_price"> ¥ {{orderInfos.total_price}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {orderInfo} from '../../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        batchcode:'',
+        record:''
+      },
+      orderInfos:{
+        serial_img:[]
+      },
+      type:0
+    }
+  },
+  created(){
+    this.type=this.$route.query.type
+    this.query.batchcode=this.$route.query.batchcode
+    this.getData()
+  },
+  methods:{
+    getData(){
+      orderInfo(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.orderInfos=res.data
+          this.$emit('confirm',res.data)
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+  }
+}
+</script>
+<style scoped>
+  .order_info{
+    width: 100%;
+    min-height: 360px;
+    height: auto;
+    border: 1px solid rgba(215, 215, 215, 1);
+    margin-bottom: 30px;
+    display: flex;
+  }
+  .order_info_right{
+    width: 940px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 60px;
+    box-sizing: border-box;
+  }
+  .order_info_right_title{
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    margin-bottom: 35px;
+  }
+  .order_info_right_title img{
+    width: 30px;
+    height: 30px;
+    margin-right: 30px;
+  }
+  .order_info_right_tips{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    align-items: center;
+    margin-left: 80px;
+    margin-bottom: 25px;
+  }
+  .order_time{
+    color: #89201F;
+  }
+  .pay_button{
+    width: 90px;
+    font-size: 12px;
+    color: #555555;
+    height: 30px;
+    border: 1px solid #D7D7D7;
+    margin: 0 20px;
+    cursor: pointer;
+    background: #EFEFEF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .order_info_left{
+    width: 250px;
+    border-right: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+    background-color: #F2F2F2;
+  }
+  .order_info_left_title{
+    padding-left: 20px;
+    background-color: #E7E7E7;
+    display: flex;
+    height: 40px;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 650;
+    border-bottom: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+  }
+  .order_info_left_content{
+    padding: 10px 20px;
+    min-height: 320px;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+  }
+  .order_info_left_content_item{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    margin-bottom: 10px;
+  }
+  .order_info_left_content_item span:first-child{
+    display: inline-block;
+    width: 80px;
+    margin-right: 10px;
+  }
+  .order_info_left_content_item span:last-child{
+    display: inline-block;
+    width: 135px;
+  }
+  .order_head{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    width: 100%;
+  }
+  .order_head_item{
+    width: 166px;
+    font-size: 12px;
+    color: #7F7F7F;
+    text-align: center;
+    border-bottom: 2px solid rgba(215, 215, 215, 1);
+    padding-bottom: 5px;
+  }
+  .order_head_item:first-child{
+    width:340px
+  }
+  .order_content{
+    height: 75px;
+    background-color: rgba(255, 255, 255, 0);
+    border-top: 1px dashed #AAAAAA;
+    border-bottom: 1px dashed #AAAAAA;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  .order_content_item{
+    width: 166px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    box-sizing: border-box;
+  }
+  .order_content_item:first-child{
+    width:340px;
+    justify-content: flex-start;
+    padding-left: 20px;
+  }
+  .order_content_item:last-child{
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+  .order_content_item_img{
+    width: 55px;
+    height: 55px;
+    margin-right: 10px;
+  }
+  .order_content_item_span{
+    display: inline-block;
+    width: 240px;
+  }
+  .order_price{
+    color: #EB4747;
+  }
+  .order_other{
+    margin-bottom: 100px;
+  }
+  .order_other_item{
+    display: flex;
+    justify-content: space-between;
+    height: 103px;
+    width: 100%;
+  }
+  .order_message{
+    width: 596px;
+    padding: 10px 20px;
+    display: flex;
+    font-size: 12px;
+    background: #F2F2F2;
+    box-sizing: border-box;
+  }
+  .order_message1{
+    width: 100%;
+  }
+  .order_message .order_message_input{
+    width: 455px;
+    margin-left: 10px;
+  }
+  .order_message_input >>>.el-textarea__inner{
+    height: 75px;
+  }
+  .order_other_item_right{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .order_other_item_right>div{
+    width: 601px;
+    height: 50px;
+    background-color: rgba(242, 242, 242, 1);
+    font-size: 12px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+  .order_other_item1{
+    height: 50px;
+    background: #F2F2F2;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+    font-size: 14px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+</style>

src/components/page/Order/orderPayment.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <p class="title">请选择支付方式</p>
+    <div class="order_content">
+      <div class="order_content_item">
+        <el-radio v-model="query.radio" label="1" class="order_content_item_radio">线下转账</el-radio>
+        <span>请使用平台账户登记的银行账号通过银行柜台转账至深圳文化产权交易所指定对公账户（开户行：中国农业银行    开户名称：深圳文化产权交易所    开户账号：6228480125447858588）</span>
+      </div>
+      <div class="order_content_item">
+        <el-radio v-model="query.radio" label="2" class="order_content_item_radio">网上银行</el-radio>
+        <span>跳转至网银时请认真核对收款方，以保障支付安全。（请使用平台账户登记的银行账号进行交易）</span>
+      </div>
+    </div>
+    <div class="order_foot">
+      <button class="order_button" @click="submit">下一步</button>
+    </div>
+    <p class="order_tips">付款金额可能超限，限额如下</p>
+    <div>
+      <img src="../../../assets/img/order_process.png" alt="" class="order_process">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+      query:{
+        radio:'1'
+      }
+    }
+  },
+  methods:{
+    submit(){
+      this.$router.push({path:'/order/orderPendingPay',query:{step:1,batchcode:this.$route.query.batchcode,type:0}})
+    }
+  }
+}
+</script>
+<style scoped>
+  .title{
+    font-size: 14px;
+    margin-bottom: 30px;
+  }
+  .order_content{
+    border-top: 1px solid #DCDCDC;
+    border-bottom: 1px solid #DCDCDC;
+  }
+  .order_content_item{
+    height: 70px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: #AAAAAA;
+    font-size: 12px;
+    border-bottom: 1px solid #DCDCDC;
+  }
+  .order_content_item:last-child{
+    border-bottom: none;
+  }
+  .order_content_item_radio{
+    color: #333333;
+    margin-right: 30px;
+  }
+  .all_price{
+    color: #EB4747;
+    font-weight: 650;
+  }
+  .order_other_item1>span:first-child{
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .order_button{
+    font-size: 14px;
+    color: #FFFFFF;
+    width: 120px;
+    height: 40px;
+    background: #89201F;
+    border: none;
+  }
+  .order_foot{
+    display: flex;
+    margin: 15px 0;
+  }
+  .order_tips{
+    font-size: 12px;
+    margin-bottom: 20px;
+  }
+  .order_process{
+    width: 660px;
+  }
+</style>

src/components/page/Order/orderPendingPay.vue

@@ -0,0 +1,549 @@
+<template>
+  <div>
+    <div class="order_info">
+      <div class="order_info_left">
+        <div class="order_info_left_title">订单信息</div>
+        <div class="order_info_left_content">
+          <div class="order_info_left_content_item">
+            <span>联系地址： </span>
+            <span>{{orderInfos.express_address}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>联系人：  </span>
+            <span>{{orderInfos.express_user}} {{orderInfos.express_userphone}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>订单编号：  </span>
+            <span>{{orderInfos.batchcode}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>下单时间：  </span>
+            <span>{{orderInfos.create_time | formatDate}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>挂牌方：  </span>
+            <span>{{orderInfos.sell_name}}</span>
+          </div>
+          <template v-if="orderInfos.status>=2">
+            <div class="order_info_left_content_item">
+              <span>挂牌方联系人：  </span>
+              <span>{{orderInfos.sell_uname}}</span>
+            </div>
+            <div class="order_info_left_content_item">
+              <span>联系人电话：  </span>
+              <span>{{orderInfos.sell_phone}}</span>
+            </div>
+            <div class="order_info_left_content_item">
+              <span>挂牌方地址：  </span>
+              <span>{{orderInfos.sell_address}}</span>
+            </div>
+          </template>
+          <div class="order_info_left_content_item">
+            <span>摘牌方留言： </span>
+            <span>{{orderInfos. sell_message}}</span>
+          </div>
+        </div>
+      </div>
+      <div class="order_info_right">
+        <div class="order_info_right_title">
+          <img src="../../../assets/img/order_stats.png" alt="">
+          <span>订单状态：
+            <template v-if="orderInfos.status==0 && orderInfos.check_status==0">等待摘牌方付款</template>
+            <template v-else-if="orderInfos.status==1 && orderInfos.check_status==0">等待交易所确认</template>
+            <template v-else-if="orderInfos.status==1 && orderInfos.check_status==2">付款确认审核失败</template>
+            <template v-else-if="orderInfos.status==2 && orderInfos.check_status==0">等待双方上传签约合同</template>
+            <template v-else-if="orderInfos.status==3 && orderInfos.check_status==0">等待交易所确认签约合同</template>
+            <template v-else-if="orderInfos.status==3 && orderInfos.check_status==2">确认签约合同审核失败</template>
+            <template v-else-if="orderInfos.status==4 ">等待摘牌方确认交付</template>
+          </span>
+        </div>
+        <p class="order_info_right_tips" v-if="orderInfos.status==0 && orderInfos.check_status==0 || orderInfos.status==1 && orderInfos.check_status==2">
+          您还有
+          <countDown :endTime="orderInfos.pay_overdue_time"  :callback="callback"   endText="已经结束了"></countDown>
+          来付款，超时订单自动关闭。订单关闭后3天内不能再重复购买同一个资产，为避免不便之处，请尽快付款！
+        </p>
+        <p class="order_info_right_tips" v-if="orderInfos.status==4">
+          您还有
+          <countDown :endTime="orderInfos.pay_overdue_time"  :callback="callback"  endText="已经结束了"></countDown>
+          来确认，超时订单自动确认。订单确认后交易所将会出具双方交易凭证，确认资产交易成功，请尽快确认！
+        </p>
+        <p class="order_info_right_tips" v-else-if="orderInfos.status==1 && orderInfos.check_status==0">
+          已上传转账记录，还有
+          <countDown :endTime="orderInfos.pay_overdue_time" :callback="callback"   endText="已经结束了"></countDown>
+          由交易所确认，请耐心等候！
+        </p>
+        <p class="order_info_right_tips" v-else-if="orderInfos.status==2 && orderInfos.check_status==0 || orderInfos.status==3 && orderInfos.check_status==2">
+          请双方上传签约合同PDF文件扫描件，由交易所见证交易过程！
+        </p>
+        <p class="order_info_right_tips" v-else-if="orderInfos.status==3 && orderInfos.check_status==0">
+          交易所正在审核确认双方上传的签约合同，请耐心等候！
+        </p>
+        <template v-if="orderInfos.status==2 && orderInfos.check_status==0|| orderInfos.status==3 && orderInfos.check_status==0 ||orderInfos.status==3 && orderInfos.check_status==2">
+          <div class="order_info_right_tips">
+            <span>摘牌方上传</span>
+            <el-upload
+              v-if=" orderInfos.buy_contract==null && orderInfos.check_status==0 || orderInfos.check_status==2 &&orderInfos.buy_contract==''"
+              class="upload-demo"
+              :action="action1"
+              :show-file-list="false"
+              :on-error="handleAvatarError"
+              list-type="picture"
+              :on-success="(res,file)=>{handleAvatarSuccess1(res,file)}"
+              >
+              <span class="upload_span " :class="orderInfos.check_status==2?'upload_span2':''">{{orderInfos.check_status==2? '重新上传':'点击上传'}}</span>
+            </el-upload>
+            <a v-else class="upload_span upload-demo" :href="orderInfos.buy_contract"  download target="_blank" rel="nofollow">查看记录</a>
+          </div>
+          <div class="order_info_right_tips">
+            <span>挂牌方上传</span>
+            <!-- <a class="upload_span upload-demo"   @click="imgDetils(orderInfos.sell_contract)" >查看记录</a> -->
+            <a class="upload_span upload-demo" target="_blank" rel="nofollow" :href="orderInfos.sell_contract">查看记录</a>
+          </div>
+        </template>
+        <div class="order_info_right_tips" v-if="orderInfos.status==4 ">
+          <span>您可以点击</span>
+          <button class="pay_button" @click="confirmDelivery">确认交付</button>
+          <span>确认交易交付成功</span>
+        </div>
+        <div class="order_info_right_tips" v-if="orderInfos.status==0 || orderInfos.status==1 ">
+          <span>您可以</span>
+          <template v-if="orderInfos.status==0 && orderInfos.check_status==0 || orderInfos.status==1 && orderInfos.check_status==2">
+            <button class="pay_button">网银支付</button>
+            <span>或上传转账记录</span>
+            <el-upload
+              class="upload-demo"
+              :action="action"
+              :on-change="fileChange"
+              :show-file-list="false"
+              :on-error="handleAvatarError"
+              list-type="picture"
+              :on-success="(res,file)=>{handleAvatarSuccess(res,file)}"
+              >
+              <span class="upload_span">点击上传</span>
+            </el-upload>
+          </template>
+          <template v-else-if="orderInfos.status==1 && orderInfos.check_status==0">
+            <span class="upload_span1" @click="onPreview(orderInfos.pay_record)">查看记录</span>
+          </template>
+        </div>
+        <div class="error_msg" v-if="orderInfos.check_status==2">失败原因：{{orderInfos.check_content}}</div>
+      </div>
+    </div>
+    <div class="order_head">
+      <div class="order_head_item" >资产名称</div>
+      <div class="order_head_item" >资产编号</div>
+      <div class="order_head_item" >资产分类</div>
+      <div class="order_head_item" >资产单价</div>
+      <div class="order_head_item" >交易数量</div>
+      <div class="order_head_item" >金额小计</div>
+    </div>
+    <div class="order_content">
+      <div class="order_content_item">
+        <img :src="orderInfos.serial_img[0]" alt="" class="order_content_item_img">
+        <span class="order_content_item_span">{{orderInfos.serial_name}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfos.serial_number}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfos.asset_type_name}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>¥ {{orderInfos.single_price}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfos.count}}</span>
+      </div>
+      <div class="order_content_item">
+        <span class="order_price">¥ {{orderInfos.price}}</span>
+      </div>
+    </div>
+    <div class="order_other">
+      <div class="order_other_item">
+        <div class="order_message" :class="query.type==1?'order_message1':''">
+          <span>给挂牌方留言：</span>
+          <span>{{orderInfos.buy_message}}</span>
+        </div>
+        <div class="order_other_item_right" v-if="query.type==0">
+          <div>
+            <span>手续费： ¥ {{orderInfos.service_charge}}</span>
+            <span class="order_price">¥ {{orderInfos.service_charge}}</span>
+          </div>
+          <!-- <div>
+            <span>契税： ¥ {{orderInfos.contract_tax}}</span>
+            <span class="order_price">¥ {{orderInfos.contract_tax}}</span>
+          </div>
+          <div>
+            <span>印花税： ¥ {{orderInfos.printing_tax}}</span>
+            <span class="order_price">¥ {{orderInfos.printing_tax}}</span>
+          </div> -->
+        </div>
+      </div>
+      <div class="order_other_item order_other_item1">
+        <span>金额合计：   </span>
+        <span class="all_price"> ¥ {{orderInfos.total_price}}</span>
+      </div>
+    </div>
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :url-list="img_url"
+      :z-index="9999"
+    />
+  </div>
+</template>
+<script>
+import {orderInfo,uploadingRecord,uploadingContract,confirmDelivery} from '../../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        batchcode:'',
+        record:'',
+        type:null
+      },
+      showViewer:false,
+      img_url:[],
+      orderInfos:{
+        serial_img:[]
+      },
+      host:'http://rccqapi.szcaee.cn',
+      action:'http://rccqapi.szcaee.cn/api/Index/uploadimg',
+      action1:'http://rccqapi.szcaee.cn/api/Index/uploadFile',
+    }
+  },
+  components: {
+    ElImageViewer: () => import('element-ui/packages/image/src/image-viewer'),
+    countDown: () => import('../../common/countDown.vue'),
+
+  },
+  created(){
+    this.query.batchcode=this.$route.query.batchcode
+    this.getData()
+  },
+  methods:{
+    callback(e){
+      console.info(e)
+    },
+    confirmDelivery(){
+      confirmDelivery(this.query).then(res=>{
+        console.info(res)
+        if(res.code==100){
+          this.$router.push({path:'/order/orderDetails',query:{step:this.$route.query.step,batchcode:this.query.batchcode,type:this.$route.query.type}})
+        }
+      })
+    },
+    uploadingContract(contract){
+      let data={
+        buy_contract:contract,
+        batchcode:this.query.batchcode,
+      }
+      uploadingContract(data).then(res=>{
+        console.info(res)
+        if(res.code==100){
+          this.orderInfos.buy_contract=this.host+res.data.img_url;
+          this.$message.success('上传成功!');
+          this.getData()
+        }
+      })
+    },
+    imgDetils(img){
+      if(img!=null){
+        window.open = img;
+      }else{
+        this.$message.error('摘牌方还未上传签约合同')
+      }
+    },
+    getData(){
+      orderInfo(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.orderInfos=res.data
+          this.query.type=res.data.type
+          this.$emit('confirm',res.data)
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    uploadingRecord(){
+      uploadingRecord(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.$message.success('文件上传成功！请等待审核~');
+          this.getData()
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    onPreview(img) {
+      this.img_url = [img]
+      this.showViewer = true
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false
+    },
+    handleAvatarError(){
+      this.$message.error('文件上传失败！');
+    },
+    handleAvatarSuccess1(res,file){
+      console.info(res)
+      if(res.code==1){
+        let contract=this.host+res.data.img_url;
+        this.uploadingContract(contract)
+      }else{
+        this.$message.error(res.msg);
+      }
+    },
+    handleAvatarSuccess(res, file, index,key){
+      if(res.code==1){
+        this.query.record=this.host+res.data.img_url;
+        this.uploadingRecord()
+      }
+    },
+    fileChange(file){
+      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
+      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
+      const isLt3M = file.size / 1024 / 1024 < 3;
+      if (!isJPG) {
+          this.$message.error('只能是图片!');
+          this.$refs.upload.clearFiles();
+          return;
+      }
+      if (!isLt3M) {
+          this.$message.error('上传图片大小不能超过 3MB!');
+          this.$refs.upload.clearFiles();
+          // this.$set(this.query, 'goods_img', '');
+          return;
+      }
+    },
+  }
+}
+</script>
+<style scoped>
+  .upload-demo{
+    margin-left: 20px;
+  }
+  .upload_span2{
+    color: red;
+  }
+  .upload_span{
+    color: #294CC6;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .upload_span1{
+    color: #294CC6;
+    text-decoration: underline;
+    display: inline-block;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+  .order_info{
+    width: 100%;
+    min-height: 360px;
+    height: auto;
+    border: 1px solid rgba(215, 215, 215, 1);
+    margin-bottom: 30px;
+    display: flex;
+  }
+  .order_info_right{
+    width: 940px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 60px;
+    box-sizing: border-box;
+  }
+  .order_info_right_title{
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    margin-bottom: 35px;
+  }
+  .order_info_right_title img{
+    width: 30px;
+    height: 30px;
+    margin-right: 30px;
+  }
+  .order_info_right_tips{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    align-items: center;
+    margin-left: 80px;
+    margin-bottom: 25px;
+  }
+  .order_time{
+    color: #89201F;
+  }
+  .pay_button{
+    width: 80px;
+    font-size: 12px;
+    color: #555555;
+    height: 30px;
+    border: 1px solid #D7D7D7;
+    margin: 0 20px;
+    cursor: pointer;
+  }
+
+  .order_info_left{
+    width: 250px;
+    border-right: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+    background-color: #F2F2F2;
+  }
+  .order_info_left_title{
+    padding-left: 20px;
+    background-color: #E7E7E7;
+    display: flex;
+    height: 40px;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 650;
+    border-bottom: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+  }
+  .order_info_left_content{
+    padding: 10px 20px;
+    min-height: 320px;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+  }
+  .order_info_left_content_item{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    margin-bottom: 10px;
+  }
+  .order_info_left_content_item span:first-child{
+    display: inline-block;
+    width: 90px;
+    margin-right: 10px;
+    text-align: right;
+  }
+  .order_info_left_content_item span:last-child{
+    display: inline-block;
+    width: 120px;
+  }
+  .order_head{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    width: 100%;
+  }
+  .order_head_item{
+    width: 166px;
+    font-size: 12px;
+    color: #7F7F7F;
+    text-align: center;
+    border-bottom: 2px solid rgba(215, 215, 215, 1);
+    padding-bottom: 5px;
+  }
+  .order_head_item:first-child{
+    width:340px
+  }
+  .order_content{
+    height: 75px;
+    background-color: rgba(255, 255, 255, 0);
+    border-top: 1px dashed #AAAAAA;
+    border-bottom: 1px dashed #AAAAAA;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  .order_content_item{
+    width: 166px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    box-sizing: border-box;
+  }
+  .order_content_item:first-child{
+    width:340px;
+    justify-content: flex-start;
+    padding-left: 20px;
+  }
+  .order_content_item:last-child{
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+  .order_content_item_img{
+    width: 55px;
+    height: 55px;
+    margin-right: 10px;
+  }
+  .order_content_item_span{
+    display: inline-block;
+    width: 240px;
+  }
+  .order_price{
+    color: #EB4747;
+  }
+  .order_other{
+    margin-bottom: 100px;
+  }
+  .order_other_item{
+    display: flex;
+    justify-content: space-between;
+    height: 103px;
+    width: 100%;
+  }
+  .order_message{
+    width: 596px;
+    padding: 10px 20px;
+    display: flex;
+    font-size: 12px;
+    background: #F2F2F2;
+    box-sizing: border-box;
+  }
+  .order_message1{
+    width: 100%;
+  }
+  .order_message .order_message_input{
+    width: 455px;
+    margin-left: 10px;
+  }
+  .order_message_input >>>.el-textarea__inner{
+    height: 75px;
+  }
+  .order_other_item_right{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .order_other_item_right>div{
+    width: 601px;
+    height: 100%;
+    background-color: rgba(242, 242, 242, 1);
+    font-size: 12px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+  .order_other_item1{
+    height: 50px;
+    background: #F2F2F2;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+    font-size: 14px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+  .error_msg{
+    font-size: 12px;
+    color: #89201F;
+    margin-left: 80px;
+  }
+</style>

src/components/page/Order/sellOrderPendingPay.vue

@@ -0,0 +1,574 @@
+<template>
+  <div>
+    <div class="order_info">
+      <div class="order_info_left">
+        <div class="order_info_left_title">订单信息</div>
+        <div class="order_info_left_content">
+          <div class="order_info_left_content_item">
+            <span>联系地址： </span>
+            <span>{{orderInfos.express_address}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>联系人：  </span>
+            <span>{{orderInfos.express_user}} {{orderInfos.express_userphone}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>订单编号：  </span>
+            <span>{{orderInfos.batchcode}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>下单时间：  </span>
+            <span>{{orderInfos.create_time | formatDate}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>挂牌方：  </span>
+            <span>{{orderInfos.sell_name}}</span>
+          </div>
+          <div class="order_info_left_content_item">
+            <span>摘牌方留言： </span>
+            <span>{{orderInfos. sell_message}}</span>
+          </div>
+        </div>
+      </div>
+      <div class="order_info_right">
+        <div class="order_info_right_title">
+          <img src="../../../assets/img/order_stats.png" alt="">
+          <span>订单状态：
+            <template v-if="orderInfos.status==0 && orderInfos.check_status==0">等待摘牌方付款</template>
+            <template v-else-if="orderInfos.status==1 && orderInfos.check_status==0">等待交易所确认</template>
+            <template v-else-if="orderInfos.status==1 && orderInfos.check_status==2">摘牌方付款确认审核失败</template>
+            <template v-else-if="orderInfos.status==2 && orderInfos.check_status==0">等待双方上传签约合同</template>
+            <template v-else-if="orderInfos.status==3 && orderInfos.check_status==0">等待交易所确认签约合同</template>
+            <template v-else-if="orderInfos.status==3 && orderInfos.check_status==2">确认签约合同审核失败</template>
+            <template v-else-if="orderInfos.status==4 ">等待摘牌方确认交付</template>
+            <template v-else-if="orderInfos.status==6 ">订单结算中</template>
+          </span>
+        </div>
+        <p class="order_info_right_tips" v-if="orderInfos.status==0 && orderInfos.check_status==0 || orderInfos.status==1 && orderInfos.check_status==2">
+          摘牌方还要
+          <countDown :endTime="orderInfos.pay_overdue_time"   endText="已经结束了"></countDown>
+          来付款，超时订单自动关闭。
+        </p>
+        <p class="order_info_right_tips" v-if="orderInfos.status==6">
+          摘牌方已确认交付，该订单正在结算中，订单结算金额为（¥ {{orderInfos.price}}），请耐心等候！
+        </p>
+        <p class="order_info_right_tips" v-else-if="orderInfos.status==1 && orderInfos.check_status==0">
+          摘牌方已上传转账记录，还有
+          <countDown :endTime="orderInfos.pay_overdue_time"   endText="已经结束了"></countDown>
+          由交易所确认，请耐心等候！
+        </p>
+        <p class="order_info_right_tips" v-else-if="orderInfos.status==2 && orderInfos.check_status==0||orderInfos.status==3 && orderInfos.check_status==2">
+          <!-- 请双方上传签约合同PDF文件扫描件，由交易所见证交易过程！ -->
+          请支付交易服务费用{{orderInfos.service_charge}}元并且上传签约合同
+        </p>
+        <p class="order_info_right_tips" v-else-if="orderInfos.status==3 && orderInfos.check_status==0">
+          交易所正在审核确认双方上传的签约合同，请耐心等候！
+        </p>
+        <p class="order_info_right_tips" v-if="orderInfos.status==4">
+          摘牌方还有
+          <countDown :endTime="orderInfos.pay_overdue_time"   endText="已经结束了"></countDown>
+          来确认，超时订单自动确认。订单确认后交易所将会出具双方资产评估报告，确认资产交易成功！
+        </p>
+        <template v-if="orderInfos.status==2 && orderInfos.check_status==0 ||orderInfos.status==3 && orderInfos.check_status==0||orderInfos.status==3 && orderInfos.check_status==2">
+          <div class="order_info_right_tips">
+            <span>挂牌方上传</span>
+            <el-upload
+              v-if="orderInfos.sell_contract==null && orderInfos.check_status==0 || orderInfos.check_status==2 &&orderInfos.sell_contract==''"
+              class="upload-demo"
+              :action="action1"
+              :show-file-list="false"
+              :on-error="handleAvatarError"
+              list-type="picture"
+              style="margin-right:25px"
+              :on-success="(res,file)=>{handleAvatarSuccess1(res,file)}"
+              >
+              <span class="upload_span "  :class="orderInfos.check_status==2?'upload_span2':''">{{orderInfos.check_status==2? '重新上传':'点击上传'}}</span>
+            </el-upload>
+            <a v-else class="upload_span upload-demo" style="margin-right:25px;display:inline-block" :href="orderInfos.sell_contract" download>查看记录</a>
+
+            <span>支付凭证上传</span>
+            <el-upload
+              v-if="orderInfos.seller_payment_document=='' && orderInfos.check_status==0 || orderInfos.check_status==2 &&orderInfos.seller_payment_document==''"
+              class="upload-demo"
+              :action="action1"
+              :show-file-list="false"
+              :on-error="handleAvatarError"
+              list-type="picture"
+              :on-success="(res,file)=>{handleAvatarSuccess(res,file,1)}"
+              >
+              <span class="upload_span " :class="orderInfos.check_status==2?'upload_span2':''">{{orderInfos.check_status==2? '重新上传':'点击上传'}}</span>
+            </el-upload>
+            <a v-else class="upload_span upload-demo" :href="orderInfos.seller_payment_document" target="_blank" rel="nofollow" download>查看记录</a>
+
+          </div>
+          <div class="order_info_right_tips">
+            <span>摘牌方上传</span>
+              <!-- @click="imgDetils(orderInfos.buy_contract,0)" -->
+            <a class="upload_span upload-demo" :href="orderInfos.buy_contract" target="_blank" rel="nofollow" download>查看记录</a>
+          </div>
+        </template>
+        <div class="order_info_right_tips" v-if="orderInfos.status==6 ">
+          <span>您可以点击</span>
+          <!-- @click="imgDetils(orderInfos.type==1?orderInfos.asset_report_img:orderInfos.transaction_pdf)" -->
+          <a class="pay_button1" :href="orderInfos.type==1?orderInfos.asset_report:orderInfos.transaction_pdf" target="_blank" rel="nofollow" >{{orderInfos.type==1?'资产评估报告':'交易凭证'}}</a>
+          <span>下载{{orderInfos.type==1?'资产评估报告':'交易凭证'}}</span>
+        </div>
+        <div class="order_info_right_tips" v-if=" orderInfos.status==1">
+          <span>您可以</span>
+          <template v-if="orderInfos.status==0 && orderInfos.check_status==0 || orderInfos.status==1 && orderInfos.check_status==2">
+            <button class="pay_button">网银支付</button>
+            <span>或上传转账记录</span>
+            <el-upload
+              class="upload-demo"
+              :action="action"
+              :on-change="fileChange"
+              :show-file-list="false"
+              :on-error="handleAvatarError"
+              list-type="picture"
+              :on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}"
+              >
+              <span class="upload_span">点击上传</span>
+            </el-upload>
+          </template>
+          <template v-else-if="orderInfos.status==1 && orderInfos.check_status==0">
+            <span class="upload_span1" @click="onPreview(orderInfos.pay_record)">查看记录</span>
+          </template>
+        </div>
+        <div class="error_msg" v-if="orderInfos.check_status==2">失败原因：{{orderInfos.check_content}}</div>
+      </div>
+    </div>
+    <div class="order_head">
+      <div class="order_head_item" >资产名称</div>
+      <div class="order_head_item" >资产编号</div>
+      <div class="order_head_item" >资产分类</div>
+      <div class="order_head_item" >资产单价</div>
+      <div class="order_head_item" >交易数量</div>
+      <div class="order_head_item" >金额小计</div>
+    </div>
+    <div class="order_content">
+      <div class="order_content_item">
+        <img :src="orderInfos.serial_img[0]" alt="" class="order_content_item_img">
+        <span class="order_content_item_span">{{orderInfos.serial_name}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfos.serial_number}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfos.asset_type_name}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>¥ {{orderInfos.single_price}}</span>
+      </div>
+      <div class="order_content_item">
+        <span>{{orderInfos.count}}</span>
+      </div>
+      <div class="order_content_item">
+        <span class="order_price">¥ {{orderInfos.price}}</span>
+      </div>
+    </div>
+    <div class="order_other">
+      <div class="order_other_item">
+        <div class="order_message" style="width:100%">
+          <span>给挂牌方留言：</span>
+          <span>{{orderInfos.buy_message}}</span>
+        </div>
+        <!-- <div class="order_other_item_right"> -->
+          <!-- <div>
+            <span>契税： ¥ {{orderInfos.contract_tax}}</span>
+            <span class="order_price">¥ {{orderInfos.contract_tax}}</span>
+          </div>
+          <div>
+            <span>印花税： ¥ {{orderInfos.printing_tax}}</span>
+            <span class="order_price">¥ {{orderInfos.printing_tax}}</span>
+          </div> -->
+          <!-- <div>
+            <span>手续费： ¥ {{orderInfos.service_charge}}</span>
+            <span class="order_price">¥ {{orderInfos.service_charge}}</span>
+          </div> -->
+        <!-- </div> -->
+      </div>
+      <!-- <div class="order_other_item order_other_item1">
+        <span>金额合计  </span>
+        <span class="all_price"> ¥ {{orderInfos.total_price}}</span>
+      </div> -->
+    </div>
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :url-list="img_url"
+      :z-index="9999"
+    />
+  </div>
+</template>
+<script>
+import {orderInfo,uploadingRecord,uploadingContract,uploadingPaymentDocument} from '../../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        batchcode:'',
+        record:''
+      },
+      showViewer:false,
+      img_url:[],
+      orderInfos:{
+        serial_img:[]
+      },
+      host:'http://rccqapi.szcaee.cn',
+      action:'http://rccqapi.szcaee.cn/api/Index/uploadimg',
+      action1:'http://rccqapi.szcaee.cn/api/Index/uploadFile',
+    }
+  },
+  components: {
+    ElImageViewer: () => import('element-ui/packages/image/src/image-viewer'),
+    countDown: () => import('../../common/countDown.vue'),
+  },
+  created(){
+    this.query.batchcode=this.$route.query.batchcode
+    this.getData()
+  },
+  methods:{
+    uploadingContract(contract){
+      let data={
+        sell_contract:contract,
+        batchcode:this.query.batchcode,
+      }
+      uploadingContract(data).then(res=>{
+        console.info(res)
+        if(res.code==100){
+          this.orderInfos.buy_contract=this.host+res.data.img_url;
+          this.$message.success('上传成功!');
+          this.getData()
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    imgDetils(img,type,type1){
+      if(img!=null){
+        window.open = img;
+      }else{
+        if (type==0) {
+          this.$message.error('摘牌方还未上传签约合同')
+        }
+      }
+    },
+    getData(){
+      orderInfo(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.orderInfos=res.data
+          this.$emit('confirm',res.data)
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    uploadingRecord(){
+      uploadingRecord(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.$message.success('文件上传成功！请等待审核~');
+          this.getData()
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    uploadingPaymentDocument(){
+      uploadingPaymentDocument(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.$message.success('文件上传成功！请等待审核~');
+          this.getData()
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    onPreview(img) {
+      this.img_url = [img]
+      this.showViewer = true
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false
+    },
+    handleAvatarError(){
+      this.$message.error('文件上传失败！');
+    },
+    handleAvatarSuccess1(res,file){
+      console.info(res)
+      if(res.code==1){
+        let contract=this.host+res.data.img_url;
+        this.uploadingContract(contract)
+      }else{
+        this.$message.error(res.msg);
+      }
+    },
+
+    handleAvatarSuccess(res, file, type){
+      if(res.code==1){
+        if (type==0) {
+          this.query.record=this.host+res.data.img_url;
+          this.uploadingRecord()
+        }else{
+          this.query.seller_payment_document=this.host+res.data.img_url;
+          this.uploadingPaymentDocument()
+        }
+
+      }
+    },
+    fileChange(file){
+      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
+      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
+      const isLt3M = file.size / 1024 / 1024 < 3;
+      if (!isJPG) {
+          this.$message.error('只能是图片!');
+          this.$refs.upload.clearFiles();
+          return;
+      }
+      if (!isLt3M) {
+          this.$message.error('上传图片大小不能超过 3MB!');
+          this.$refs.upload.clearFiles();
+          // this.$set(this.query, 'goods_img', '');
+          return;
+      }
+    },
+  }
+}
+</script>
+<style scoped>
+  .upload-demo{
+    margin-left: 20px;
+  }
+  .upload_span2{
+    color: red;
+  }
+  .upload_span{
+    color: #294CC6;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .upload_span1{
+    color: #294CC6;
+    text-decoration: underline;
+    display: inline-block;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+  .order_info{
+    width: 100%;
+    min-height: 360px;
+    height: auto;
+    border: 1px solid rgba(215, 215, 215, 1);
+    margin-bottom: 30px;
+    display: flex;
+  }
+  .order_info_right{
+    width: 940px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 60px;
+    box-sizing: border-box;
+  }
+  .order_info_right_title{
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    margin-bottom: 35px;
+  }
+  .order_info_right_title img{
+    width: 30px;
+    height: 30px;
+    margin-right: 30px;
+  }
+  .order_info_right_tips{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    align-items: center;
+    margin-left: 80px;
+    margin-bottom: 25px;
+  }
+  .order_time{
+    color: #89201F;
+  }
+  .pay_button{
+    width: 80px;
+    font-size: 12px;
+    color: #555555;
+    height: 30px;
+    border: 1px solid #D7D7D7;
+    margin: 0 20px;
+    cursor: pointer;
+  }
+  .pay_button1{
+    width: 90px;
+    font-size: 12px;
+    color: #555555;
+    height: 30px;
+    border: 1px solid #D7D7D7;
+    margin: 0 20px;
+    cursor: pointer;
+    background: #EFEFEF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .order_info_left{
+    width: 250px;
+    border-right: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+    background-color: #F2F2F2;
+  }
+  .order_info_left_title{
+    padding-left: 20px;
+    background-color: #E7E7E7;
+    display: flex;
+    height: 40px;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 650;
+    border-bottom: 1px solid rgba(215, 215, 215, 1);
+    box-sizing: border-box;
+  }
+  .order_info_left_content{
+    padding: 10px 20px;
+    min-height: 320px;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+  }
+  .order_info_left_content_item{
+    font-size: 12px;
+    color: #555555;
+    display: flex;
+    margin-bottom: 10px;
+  }
+  .order_info_left_content_item span:first-child{
+    display: inline-block;
+    width: 80px;
+    margin-right: 10px;
+  }
+  .order_info_left_content_item span:last-child{
+    display: inline-block;
+    width: 135px;
+  }
+  .order_head{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    width: 100%;
+  }
+  .order_head_item{
+    width: 166px;
+    font-size: 12px;
+    color: #7F7F7F;
+    text-align: center;
+    border-bottom: 2px solid rgba(215, 215, 215, 1);
+    padding-bottom: 5px;
+  }
+  .order_head_item:first-child{
+    width:340px
+  }
+  .order_content{
+    height: 75px;
+    background-color: rgba(255, 255, 255, 0);
+    border-top: 1px dashed #AAAAAA;
+    border-bottom: 1px dashed #AAAAAA;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  .order_content_item{
+    width: 166px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    box-sizing: border-box;
+  }
+  .order_content_item:first-child{
+    width:340px;
+    justify-content: flex-start;
+    padding-left: 20px;
+  }
+  .order_content_item:last-child{
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
+  .order_content_item_img{
+    width: 55px;
+    height: 55px;
+    margin-right: 10px;
+  }
+  .order_content_item_span{
+    display: inline-block;
+    width: 240px;
+  }
+  .order_price{
+    color: #EB4747;
+  }
+  .order_other{
+    margin-bottom: 100px;
+  }
+  .order_other_item{
+    display: flex;
+    justify-content: space-between;
+    height: 103px;
+    width: 100%;
+  }
+  .order_message{
+    width: 596px;
+    padding: 10px 20px;
+    display: flex;
+    font-size: 12px;
+    background: #F2F2F2;
+    box-sizing: border-box;
+  }
+  .order_message .order_message_input{
+    width: 455px;
+    margin-left: 10px;
+  }
+  .order_message_input >>>.el-textarea__inner{
+    height: 75px;
+  }
+  .order_other_item_right{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .order_other_item_right>div{
+    width: 601px;
+    height: 100%;
+    background-color: rgba(242, 242, 242, 1);
+    font-size: 12px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+  .order_other_item1{
+    height: 50px;
+    background: #F2F2F2;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+    font-size: 14px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+  .error_msg{
+    font-size: 12px;
+    color: #89201F;
+    margin-left: 80px;
+  }
+</style>

src/components/page/Purchaser/Purchaser.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="header">
+      <span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url,index)">{{item.name}}</span>
+    </div>
+    <div class="content1">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+      headerList:[
+        {name:'我的订单',url:'/Purchaser'},
+        {name:'我的收藏',url:'/Purchaser/myCollection'},
+        // {name:'在线学习',url:'/Purchaser/study'},
+        // {name:'学习成果',url:'/Purchaser/achievements'}
+      ],
+      header_active:0
+    }
+  },
+  methods:{
+    goPage(url,index){
+      this.$router.push(url)
+      this.header_active=index
+    }
+  }
+}
+</script>
+<style scoped>
+  .header{
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 20px;
+  }
+  .header_active{
+    color: #C94C4C;
+    border-bottom: 3px solid rgba(201, 76, 76, 1);
+  }
+  .header span{
+    display: inline-block;
+    padding: 0 10px;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .header span:hover{
+    color: #C94C4C;
+  }
+  .content1{
+    margin-top: 30px;
+  }
+</style>

src/components/page/Purchaser/achievements.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="body">
+    <div class="title">荣誉墙</div>
+    <div class="achievements">
+      <div class="achievements_item" v-for="(item,index) in 7" :key="index">
+        <img src="../../../assets/img/header_logo.png" alt="" class="achievements_item_img">
+        <p class="achievements_item_p">《人才产权管理》第一章</p>
+        <p>考试成绩：100 分</p>
+        <p>成果日期：2021-07-13</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+
+    }
+  }
+}
+</script>
+<style scoped>
+  .body{
+    margin-top: 40px;
+  }
+  .title{
+    text-align: center;
+    font-size: 34px;
+    color: #C94C4C;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+  .achievements{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .achievements_item{
+    width: 200px;
+    height: 240px;
+    margin-bottom: 20px;
+    background: url('../../../assets/img/achievements_bg.png') no-repeat  ;
+    background-size: 100% 100%;
+    text-align: center;
+    padding-top: 10px;
+    color: #EAB1B1;
+    font-size: 12px;
+    margin-right: 40px;
+  }
+  .achievements_item >p{
+    margin-bottom: 5px;
+  }
+  .achievements_item_img{
+    width: 132px;
+    height: 132px;
+  }
+  .achievements_item_p{
+    font-size: 14px;
+    margin: 15px 0 !important;
+  }
+</style>

src/components/page/Purchaser/myCollection.vue

@@ -0,0 +1,307 @@
+<template>
+  <div>
+
+  <div class="seach">
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>订单类型</span>
+          <el-select      v-model="query.cartellino_type" @change="getData" class="seach1_select">
+            <el-option :key="0" label="全部" value=""></el-option>
+            <el-option :key="1" label="协议" :value="1"></el-option>
+            <el-option :key="2" label="拍卖" :value="2"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <span>挂牌方名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入挂牌方关键字"
+            v-model="query.username">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>收藏时间</span>
+          <el-date-picker
+            v-model="query.pay_time"
+            type="date"
+            placeholder="选择日期"
+            class="seach1_select1"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            @change="getData">
+          </el-date-picker>
+        </div>
+        <div class="seach1_item">
+          <span>资产名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入标的名称关键字"
+            v-model="query.serial_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <button @click="getData" class="seach_button">确定</button>
+        </div>
+      </div>
+
+      <div class="body_header">
+        <span style="width:48px">序号</span>
+        <span style="width:495px">资产</span>
+        <span style="width:115px">单价</span>
+        <span style="width:165px">数量</span>
+        <span style="width:140px">交易总额</span>
+        <span style="width:135px"></span>
+        <span style="width:85px;text-align: right;">交易操作</span>
+      </div>
+    </div>
+    <div class="body">
+      <div class="order_item" v-for="(item,index) in orderList" :key="index">
+        <div class="order_item_id" style="width:48px">{{item.asset_id}}</div>
+        <img :src="item.serial_img[0]" alt="" class="order_item_img">
+        <div class="order_item_info">
+          <div class="order_item_info_title">
+            <span>{{item.create_time | formatDate}}</span>
+            <!-- <span>订单编号：15852458965124</span> -->
+            <span>挂牌方：{{item.firm_name}}</span>
+            <span>资产编号：{{item.serial}}</span>
+          </div>
+          <div class="order_item_info_content">
+            <div class="order_item_info_content_left">
+              <p>{{item.serial_name}}</p>
+            </div>
+            <div class="order_item_info_content_price">
+              <p>¥ {{item.price}}</p>
+            </div>
+            <div class="order_item_id">{{item.count}}</div>
+            <div class="order_item_info_content_all">¥ {{item.total_price}}</div>
+            <div></div>
+            <div class="order_item_info_content_operation">
+              <p @click="checkBuy(item.asset_id,item.count)">立即购买</p>
+              <p @click="goDetails(item.asset_id)">资产详情</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import {CollectList,checkBuy} from '../../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        cartellino_type:'',
+        serial_name:'',
+        pay_time:'',
+        username:'',
+        page:1,
+        limit:10,
+      },
+      pageTotal:0,
+      orderList:[]
+    }
+  },
+  created(){
+    this.getData()
+  },
+  methods:{
+    checkBuy(id,count){
+      let data={id:id,count:count}
+      checkBuy(data).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.$router.push({path:'/order/confirmOrder',query:{step:0,id:id,count:count}})
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    goDetails(id){
+      this.$router.push({path:'/AssetDetails',query:{id:id}})
+    },
+    getData(){
+      CollectList(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.orderList=res.data.list;
+          this.pageTotal=res.data.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      this.getData();
+    }
+  }
+}
+</script>
+<style scoped>
+  .seach1_select1{
+    margin-left: 10px;
+  }
+  .seach{
+    margin: 20px 0;
+  }
+  .seach1_select{
+    margin-left: 10px;
+    width: 170px;
+  }
+  .seach_button{
+    width: 60px;
+    height: 30px;
+    font-size: 12px;
+    color: #333333;
+    background-color: transparent;
+    border:1px solid #D7D7D7;
+    cursor: pointer;
+  }
+  .seach_input{
+    width: 100px;
+    margin: 0 15px;
+  }
+  .seach1{
+    width: 100%;
+    height: 50px;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  .seach1:last-child{
+    border-top: none;
+  }
+  .seach1_item{
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    height: 100%;
+  }
+  .seach1_item_span{
+    color: #C94C4C;
+  }
+  .select_city{
+    margin: 0 15px;
+  }
+  .body_header{
+    background: #F2F2F2;
+    width: 100%;
+    border: 1px solid #D7D7D7;
+    border-top: none;
+    font-size: 14px;
+    color: #333333;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+  .body_header span{
+    display: inline-block;
+    text-align: center;
+  }
+  .header{
+    font-size: 14px;
+  }
+  .header_active{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .header span{
+    display: inline-block;
+    padding: 0 10px;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .header span:hover{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .body{
+    margin-top: 10px;
+  }
+  .order_item{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding: 15px 0;
+    padding-right: 15px;
+    box-sizing: border-box;
+  }
+  .order_item:nth-child(2n+2){
+    background-color: #F2F2F2;
+  }
+  .order_item_id{
+    padding: 0 15px;
+  }
+  .order_item_img{
+    width: 100px;
+    height: 100px;
+    margin: 0 15px;
+  }
+  .order_item_info_title{
+    display: flex;
+    font-size: 14px;
+    color: #7F7F7F;
+    align-items: center;
+    width: 1020px;
+  }
+  .order_item_info_title span{
+    display: inline-block;
+    margin-right: 50px;
+  }
+  .order_item_info_content{
+    display: flex;
+    align-items: center;
+    width: 1020px;
+    font-size: 14px;
+    justify-content: space-between;
+    margin-top: 5px;
+    color: #333333;
+    /* padding-right: 15px;
+    box-sizing: border-box; */
+  }
+  .order_item_info_content_left p{
+    width: 300px;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_price{
+    /* margin:0 30px; */
+    text-align: center;
+  }
+  .order_item_info_content_price_p{
+    text-decoration: line-through;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_all{
+    font-weight: bold;
+  }
+  .order_item_info_content_operation{
+    color: #555555;
+  }
+  .order_item_info_content_operation p{
+    margin-bottom: 5px;
+    cursor: pointer;
+  }
+</style>

src/components/page/Purchaser/myOrder.vue

@@ -0,0 +1,355 @@
+<template>
+  <div>
+    <div class="header">
+      <span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="changeSelect(index,item.type)">{{item.name}}</span>
+    </div>
+
+    <div class="seach">
+      <div class="seach1">
+        <div class="seach1_item">
+          <span>订单类型</span>
+          <el-select      v-model="query.cartellino_type" @change="getData" class="seach1_select">
+            <el-option :key="0" label="全部" value=""></el-option>
+            <el-option :key="1" label="标的交易" :value="1"></el-option>
+            <el-option :key="2" label="标的评估报告" :value="2"></el-option>
+          </el-select>
+        </div>
+        <div class="seach1_item">
+          <span>挂牌方名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入挂牌方关键字"
+            v-model="query.sell_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <span>下单时间</span>
+          <el-date-picker
+            v-model="query.create_time"
+            type="date"
+            placeholder="选择日期"
+            class="seach1_select1"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            @change="getData">
+          </el-date-picker>
+        </div>
+        <div class="seach1_item">
+          <span>标的名称</span>
+          <el-input
+            class="seach1_select"
+            placeholder="请输入标的名称关键字"
+            v-model="query.asset_name">
+          </el-input>
+        </div>
+        <div class="seach1_item">
+          <button @click="getData" class="seach_button">确定</button>
+        </div>
+      </div>
+      <div class="body_header">
+        <span style="width:48px">序号</span>
+        <span style="width:485px">标的</span>
+        <span style="width:100px">单价</span>
+        <span style="width:140px">数量</span>
+        <span style="width:160px">交易总额</span>
+        <span style="width:170px">交易状态</span>
+        <span style="width:75px;text-align: right;">交易操作</span>
+      </div>
+    </div>
+
+    <div class="body">
+      <div class="order_item" v-for="(item,index) in orderList" :key="index">
+        <div class="order_item_id">{{item.id}}</div>
+        <img :src="item.serial_img" alt="" class="order_item_img">
+        <div class="order_item_info">
+          <div class="order_item_info_title">
+            <span>{{item.create_time | formatDate}}</span>
+            <span>订单编号：{{item.batchcode}}</span>
+            <span>挂牌方：{{item.firm_name}}</span>
+            <span>标的编号：{{item.serial_number}}</span>
+          </div>
+          <div class="order_item_info_content">
+            <div class="order_item_info_content_left">
+              <p>{{item.serial_name}}</p>
+              <!-- <p>契税：¥ {{item.contract_tax}}</p>
+              <p>印花税：¥ {{item.printing_tax}}</p> -->
+              <p>手续费：¥ {{item.service_charge}}</p>
+            </div>
+            <div class="order_item_info_content_price">
+              <p>¥ {{item.price}}</p>
+            </div>
+            <div class="order_item_id">{{item.count}}</div>
+            <div class="order_item_info_content_all">交易总额：¥ {{item.total_price}}</div>
+            <div>
+              <span v-if="item.status==0">待支付</span>
+              <span v-else-if="item.status==1">待审核付款</span>
+              <span v-else-if="item.status==2">待上传签约合同</span>
+              <span v-else-if="item.status==3">待确认签约合同</span>
+              <span v-else-if="item.status==4">待交付</span>
+              <span v-else-if="item.status==5">待确认交付</span>
+              <!-- <span v-else-if="item.status==6">待结算</span> -->
+              <span v-else-if="item.status==7 ||item.status==6">已完成</span>
+              <span v-else-if="item.status==8">已关闭</span>
+              <span v-else-if="item.status==9">退款中</span>
+              <span v-else-if="item.status==10">已退款</span>
+              <span v-else-if="item.status==11">已取消</span>
+              <p v-if="item.check_status==2" style="color:red">(审核不通过)</p>
+            </div>
+            <div class="order_item_info_content_operation">
+              <p @click="goDetails(item.status,item.batchcode,item.type)">订单详情</p>
+              <a v-if="item.status>=6" :href="item.buy_contract" target="_blank" rel="nofollow">下载合同</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import {buyer_order_list} from '../../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        cartellino_type:'',
+        buyer:'',
+        create_time:'',
+        asset_name:'',
+        page:1,
+        limit:10,
+        order_status:''
+      },
+      pageTotal:50,
+
+      headerList:[
+        {name:'全部订单',type:''},
+        {name:'待付款',type:1},
+        {name:'待审核付款',type:6},
+        {name:'待签约',type:2},
+        {name:'待确认签约合同',type:7},
+        {name:'待交付',type:3},
+        {name:'待确认交付',type:8},
+        // {name:'待结算',type:9},
+        {name:'已完成',type:4},
+        {name:'已关闭',type:5},
+      ],
+      orderList:[],
+      header_active:0
+    }
+  },
+  created(){
+    this.getData()
+  },
+  methods:{
+    goDetails(status,batchcode,orderType){
+      let step,
+      type=0,
+      url='/order/orderPendingPay';
+      if(status==0||status==1){
+        step=1
+      }else if(status==2||status==3){
+        step=2
+      }else if(status==4||status==5){
+        step=3
+      }else if(status==6 ||status==7){
+        step=4
+        url='/order/orderDetails'
+      }else if (status==8) {
+        step=2
+        url='/order/orderDetails'
+        type=2
+      }
+      this.$router.push({path:url,query:{step:step,batchcode:batchcode,type:type,orderType:orderType}})
+    },
+    changeSelect(index,type){
+      this.header_active=index
+      this.query.order_status=type
+      this.getData()
+    },
+    getData(type){
+      if (type==1) {
+        // this.query.create_time=this.query.create_time/1000
+      }
+      buyer_order_list(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.orderList=res.data.list;
+          this.pageTotal=res.data.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      this.getData();
+    }
+  }
+}
+</script>
+<style scoped>
+  .seach1_select1{
+    margin-left: 10px;
+  }
+  .body_header{
+    background: #F2F2F2;
+    width: 100%;
+    border: 1px solid #D7D7D7;
+    border-top: none;
+    font-size: 14px;
+    color: #333333;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+  .body_header span{
+    display: inline-block;
+    text-align: center;
+  }
+  .header{
+    font-size: 14px;
+  }
+  .header_active{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .header span{
+    display: inline-block;
+    padding: 0 10px;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .header span:hover{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .seach{
+    margin: 20px 0;
+  }
+  .seach1_select{
+    margin-left: 10px;
+    width: 170px;
+  }
+  .seach_button{
+    width: 60px;
+    height: 30px;
+    font-size: 12px;
+    color: #333333;
+    background-color: transparent;
+    border:1px solid #D7D7D7;
+    cursor: pointer;
+  }
+  .seach_input{
+    width: 100px;
+    margin: 0 15px;
+  }
+  .seach1{
+    width: 100%;
+    height: 50px;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+  .seach1:last-child{
+    border-top: none;
+  }
+  .seach1_item{
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    height: 100%;
+  }
+  .seach1_item_span{
+    color: #C94C4C;
+  }
+  .select_city{
+    margin: 0 15px;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .body{
+    margin-top: 10px;
+  }
+  .order_item{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding: 15px 0;
+  }
+  .order_item:nth-child(2n+2){
+    background-color: #F2F2F2;
+  }
+  .order_item_id{
+    padding: 0 15px;
+  }
+  .order_item_img{
+    width: 100px;
+    height: 100px;
+    margin: 0 15px;
+  }
+  .order_item_info_title{
+    display: flex;
+    font-size: 14px;
+    color: #7F7F7F;
+    align-items: center;
+    width: 1020px;
+    justify-content: space-between;
+  }
+  .order_item_info_content{
+    display: flex;
+    align-items: center;
+    width: 1020px;
+    font-size: 14px;
+    justify-content: space-between;
+    margin-top: 5px;
+    color: #333333;
+    padding-right: 15px;
+    box-sizing: border-box;
+  }
+  .order_item_info_content_left p{
+    width: 300px;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_price{
+    /* margin:0 30px; */
+    text-align: center;
+  }
+  .order_item_info_content_price_p{
+    text-decoration: line-through;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_all{
+    font-weight: bold;
+  }
+  .order_item_info_content_operation{
+    color: #555555;
+  }
+  .order_item_info_content_operation p{
+    margin-bottom: 5px;
+    cursor: pointer;
+  }
+  .order_item_info_content_operation a{
+    color: #555555;
+    cursor: pointer;
+  }
+</style>

src/components/page/Purchaser/study.vue

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <div class="header">
+      <span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url)">{{item.name}}</span>
+    </div>
+    <div class="seach">
+      <div class="seach_item">
+        <el-input v-model="query.input" placeholder="请输入资产名称/资产编号或托管方名称" class="seach_input" suffix-icon="el-icon-search"></el-input>
+      </div>
+      <div class="seach_item">
+        <el-date-picker
+          v-model="query.time"
+          class="seach_input1"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+      </div>
+      <div class="seach_item">
+        <span class="el-dropdown-link">
+          展开更多筛选条件
+          <i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+      </div>
+    </div>
+    <div class="body_header">
+      <span style="width:48px">序号</span>
+      <span style="width:485px">学习内容</span>
+      <span style="width:120px">学习状态</span>
+      <span style="width:155px">学习进度</span>
+      <span style="width:130px">考试成绩</span>
+      <span style="width:85px;text-align: right;">学习操作</span>
+    </div>
+    <div class="body">
+      <div class="order_item" v-for="(item,index) in 4" :key="index">
+        <div class="order_item_id">1</div>
+        <img src="../../../assets/img/header_logo.png" alt="" class="order_item_img">
+        <div class="order_item_info">
+          <div class="order_item_info_title">
+            <span>2021-07-13 18:30:25</span>
+            <span>订单编号：15852458965124</span>
+            <span>托管方：东莞市芳华沉香园林景观有限公司</span>
+            <span>资产编号：GM-BZ-165254</span>
+          </div>
+          <div class="order_item_info_content">
+            <div class="order_item_info_content_left">
+              <p>东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</p>
+              <p>运费：¥ 80.00</p>
+              <p>服务费：¥ 1,000.00</p>
+            </div>
+            <div class="order_item_info_content_price">
+              <p class="order_item_info_content_price_p">¥ 30,000.00</p>
+              <p>单价：¥ 10,000.00</p>
+            </div>
+            <div class="order_item_id">数量：3</div>
+            <div class="order_item_info_content_all">交易总额：¥ 31,080.00</div>
+            <div>交易状态：已完成</div>
+            <div class="order_item_info_content_operation">
+              <p>开始学习</p>
+              <p>订单详情</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return{
+      query:{
+        input:'',
+        time:'',
+        page:1,
+        limit:10,
+      },
+      pageTotal:50,
+
+      headerList:[
+        {name:'全部内容',url:''},
+        {name:'未开始',url:''},
+        {name:'学习中',url:''},
+        {name:'待考试',url:''},
+        {name:'已完成',url:''},
+      ],
+      header_active:0
+    }
+  },
+  methods:{
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      // this.getData();
+    }
+  }
+}
+</script>
+<style scoped>
+  .body_header{
+    background: #F8E6E6;
+    width: 100%;
+    border: 1px solid #E9B7B7;
+    border-top: none;
+    font-size: 14px;
+    color: #C94C4C;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+  .body_header span{
+    display: inline-block;
+    text-align: center;
+  }
+  .header{
+    font-size: 14px;
+  }
+  .header_active{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .header span{
+    display: inline-block;
+    padding: 0 10px;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+  .header span:hover{
+    color: rgba(201, 76, 76, 0.698039215686274);
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .seach{
+    display: flex;
+    background-color: #FDF8F8;
+    border: 1px solid #E9B7B7;
+    height: 50px;
+    margin-top: 30px;
+    align-items: center;
+  }
+  .seach_item{
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-left: 20px;
+
+  }
+  .seach_input{
+    width: 260px;
+    border: 1px solid #E9B7B7;
+  }
+  .seach_input1{
+    border: 1px solid #E9B7B7;
+  }
+  .seach_input1>>>.el-input__inner{
+    border: none;
+  }
+  .seach_input>>>.el-input__inner{
+    border: none;
+    padding-left: 5px;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .body{
+    margin-top: 10px;
+  }
+  .order_item{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding: 15px 0;
+  }
+  .order_item:nth-child(2n+2){
+    background-color: #FDF8F8;
+  }
+  .order_item_id{
+    padding: 0 15px;
+  }
+  .order_item_img{
+    width: 100px;
+    height: 100px;
+    margin: 0 15px;
+  }
+  .order_item_info_title{
+    display: flex;
+    font-size: 14px;
+    color: #7F7F7F;
+    align-items: center;
+    width: 1020px;
+    justify-content: space-between;
+  }
+  .order_item_info_content{
+    display: flex;
+    align-items: center;
+    width: 1020px;
+    font-size: 14px;
+    justify-content: space-between;
+    margin-top: 5px;
+    color: #333333;
+  }
+  .order_item_info_content_left p{
+    width: 300px;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_price{
+    /* margin:0 30px; */
+    text-align: center;
+  }
+  .order_item_info_content_price_p{
+    text-decoration: line-through;
+    margin-bottom: 5px;
+  }
+  .order_item_info_content_all{
+    font-weight: bold;
+  }
+  .order_item_info_content_operation{
+    color: #555555;
+  }
+  .order_item_info_content_operation p{
+    margin-bottom: 5px;
+  }
+</style>

src/components/page/Purchaser/wkPurchaser.vue

@@ -0,0 +1,660 @@
+<template>
+  <div class="body">
+    <template v-if="check_status==-1">
+      <p class="title">摘牌申请信息完善</p>
+      <p class="title_info">用户在购买标的前需先进行开户信息审核，待审核通过后方能进行购买。（个人用户目前仅支持人才产权交易，如需交易有形实物标的或无形实物标的请注册机构用户！）</p>
+      <div class="subject">
+        <span>账户主体：</span>
+        <el-radio-group v-model="ruleForm.account_type"  @change="changeRadio">
+          <el-radio  :label="1">机构</el-radio>
+          <!-- <el-radio  :label="2">个人</el-radio> -->
+        </el-radio-group>
+      </div>
+      <div class="table">
+        <div class="table_left">
+          <p class="table_title">请如实上传以下资料：</p>
+          <div class="table_content">
+            <div class="table_content_item" v-for="(item,index) in upList" :key="index">
+              <span>
+                <span class="table_content_item_span" v-if="item.required">*</span>
+                {{item.name}}
+              </span>
+              <div class="table_content_item_upload">
+                <el-upload
+                  class="upload-demo"
+                  :action="action"
+                  :on-change="fileChange"
+                  :show-file-list="false"
+                  :on-error="handleAvatarError"
+                  list-type="picture"
+                  :on-success="(res,file)=>{handleAvatarSuccess(res,file,index,item.key)}"
+                  >
+                  <span class="upload_span">上传</span>
+                </el-upload>
+                <span class="el-icon-success" v-if="item.type==1"></span>
+                <a class="listing_button" v-if="item.upType==1 && item.file!=''" :href="item.file" style="margin-left:15px"  target="_blank" rel="nofollow">下载模板</a>
+              </div>
+            </div>
+          </div>
+
+          <p class="table_title">请确认并完善以下信息：</p>
+          <div class="table_content">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="200px" class="ruleForm"  label-position="left">
+              <template v-if="ruleForm.account_type==1">
+                <el-form-item label="机构名称" prop="firm_name" >
+                  <el-input v-model="ruleForm.firm_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="统一社会信用代码" prop="credit_code" >
+                  <el-input v-model="ruleForm.credit_code" placeholder="请输入"   oninput="if(value.length > 18)value = value.slice(0, 18)"></el-input>
+                </el-form-item>
+                <!-- <el-form-item label="主体类型" prop="main_type" >
+                  <el-input v-model="ruleForm.main_type" placeholder="请输入"></el-input>
+                </el-form-item> -->
+                <el-form-item label="注册资本（元）" prop="reg_money" >
+                  <el-input v-model="ruleForm.reg_money" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
+                </el-form-item>
+                <el-form-item label="法定代表人" prop="legal_name" >
+                  <el-input v-model="ruleForm.legal_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="住所" prop="domicile" >
+                  <el-input v-model="ruleForm.domicile" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="成立日期" prop="establish_time" >
+                  <el-date-picker
+                    v-model="ruleForm.establish_time"
+                    type="date"
+                    value-format="timestamp"
+                    placeholder="选择成立日期">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="收货地址" prop="address" >
+                  <el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系人" prop="uname" >
+                  <el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系电话" prop="phone"   >
+                  <el-input v-model.number="ruleForm.phone" placeholder="请输入"  oninput="if(value.length > 11)value = value.slice(0, 11)"></el-input>
+                </el-form-item>
+              </template>
+              <template v-else>
+                <el-form-item label="姓名" prop="username" >
+                  <el-input v-model="ruleForm.username" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="身份证号码" prop="id_card" >
+                  <el-input v-model="ruleForm.id_card" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="手机号码" prop="userphone" >
+                  <el-input v-model.number="ruleForm.userphone" placeholder="请输入"  oninput="if(value.length > 11)value = value.slice(0, 11)"></el-input>
+                </el-form-item>
+                <el-form-item label="开户行名称" prop="bank_name" >
+                  <el-input v-model="ruleForm.bank_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="银行卡号" prop="id_bank" >
+                  <el-input v-model.number="ruleForm.id_bank" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货地址" prop="address" >
+                  <el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系人" prop="uname" >
+                  <el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系电话" prop="phone" maxlength="11">
+                  <el-input v-model.number="ruleForm.phone" placeholder="请输入"></el-input>
+                </el-form-item>
+              </template>
+            </el-form>
+          </div>
+        </div>
+
+        <div class="table_right">
+          <p class="table_title">已上传资料：</p>
+          <div class="table_right_content">
+            <div  v-for="(item,index) in upList" :key="index" >
+              <template v-if="item.key=='else_file' && item.type==1">
+                <div class="table_right_item" v-for="(item1,index1) in item.url" :key="index1" >
+                  <span v-if="item.url[index1].type==0" @click="onPreview([item.url[index1].url])">{{item.name}}<span v-if="index1!=0">{{index1}}</span></span>
+                  <a class="table_right_item_a" v-else :href="item.url[index1].url" target="_blank" rel="nofollow">{{item.name}}<span v-if="index1!=0">{{index1}}</span></a>
+                  <i class="el-icon-close" @click="deleteUrl(item,index,index1)"></i>
+                </div>
+              </template>
+              <template v-else>
+                <div class="table_right_item" v-if="item.type==1" >
+                  <span v-if="item.url.type==0" @click="onPreview([item.url.url])">{{item.name}}</span>
+                  <a class="table_right_item_a" v-else :href="item.url.url" target="_blank" rel="nofollow">{{item.name}}</a>
+                  <i class="el-icon-close" @click="deleteUrl(item,index)"></i>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <button class="submit" @click="submit">提交资料</button>
+        <div>
+          <el-checkbox v-model="checked" :true-label=1 :false-label=2></el-checkbox>
+          <span class="footer_span">已阅读并同意</span>
+          <span class="footer_span1" @click="goAgreement(3)">《隐私权政策》</span>
+          <span class="footer_span1" @click="goAgreement(4)">《深圳文化产权交易所人才产权交易平台服务协议》</span>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="check_status==0 || check_status==2">
+      <p class="title">摘牌方开户信息完善</p>
+      <p class="title_info">用户在购买标的前需先进行开户信息审核，待审核通过后方能进行购买。（目前仅支持机构注册用户进行标的交易！）</p>
+      <div class="examine_content">
+        <img src="../../../assets/img/examine_img.png" alt="" class="examine_img" v-if="check_status==0">
+        <img src="../../../assets/img/examine_img1.png" alt="" class="examine_img" v-else-if="check_status==2">
+        <p class="examine_tips">
+          <template v-if="check_status==0">
+            <span >资料已经提交，请耐心等待审核</span>
+          </template>
+          <template v-else-if="check_status==2">
+            <span >审核失败！请重新提交资料</span>
+            <span class="examine_tips_span" @click="checkStatus">重新提交</span>
+          </template>
+        </p>
+        <div class="error_msg" v-if="check_status==2 && ruleForm.check_message!=''">
+          <p>失败原因：</p>
+          <p v-html="ruleForm.check_message"></p>
+        </div>
+      </div>
+    </template>
+
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :url-list="img_url"
+      :z-index="9999"
+    />
+  </div>
+</template>
+<script>
+import {openAccount,getAccountInfo,getFileType} from '../../../api/index';
+export default {
+  data(){
+    return{
+      subject:1,
+      checked:2,
+      check_status:-1,
+      disabled:false,
+      showViewer:false,
+      host:'http://wenhua.xingtongworld.com',
+      action:'http://wenhua.xingtongworld.com/api/Index/uploadFile',
+      upList:[
+          {name:'营业执照（复印件）',type:0,url:'',key:'business_license',required:true,upType:0},
+          {name:'法人代表证明书',type:0,url:'',key:'legal_certificate',required:true,upType:1,file:''},
+          {name:'法人身份证件（正面）',type:0,url:'',key:'legal_card_front',required:true,upType:0},
+          {name:'法人身份证件（反面）',type:0,url:'',key:'legal_card_backfacade',required:true,upType:0},
+          // {name:' 数字证书申请表',type:0,url:'',key:'number_certificate',required:true,upType:0},
+          {name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate',required:true,upType:0},
+          // {name:'标的证明文件',type:0,url:'',key:'asset_certificate',required:true,upType:0},
+          {name:'法人授权委托书',type:0,url:'',key:'legal_authorization',required:false,upType:1,file:''},
+          {name:'经办人身份证（正反面）',type:0,url:'',key:'operator_card_front',required:false,upType:0},
+          {name:'经办人身份证（反面）',type:0,url:'',key:'operator_card_backfacade',required:false,upType:0},
+          {name:'其他要求文件',type:0,url:[],key:'else_file',required:false,upType:1,file:''},
+      ],
+      ruleForm: {
+        open_account_type:'buyer',
+        account_type: 1,
+        business_license: '',
+        legal_certificate: '',
+        legal_card_front:'',
+        legal_card_backfacade:'',
+        legal_card: '',
+        number_certificate: '',
+        bank_account_certificate: '',
+        legal_authorization: '',
+        operator_card: '',
+        else_file: [],
+        user_card_front: '',
+        user_card_backfacade: '',
+        asset_certificate: '',
+        // asset_trusteeship: '',
+        firm_name: '',
+        credit_code: '',
+        main_type: '',
+        reg_money: '',
+        legal_name: '',
+        domicile: '',
+        establish_time: '',
+        username: '',
+        id_card: '',
+        userphone: '',
+        bank_name: '',
+        id_bank: '',
+        address: '',
+        uname: '',
+        phone: '',
+        check_message:''
+      },
+      rules: {
+        firm_name: [
+          { required: true, message: '请输入机构名称', trigger: 'blur' },
+        ],
+        credit_code: [
+          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
+        ],
+        // main_type: [
+        //   { required: true, message: '请输入主体类型', trigger: 'blur' },
+        // ],
+        reg_money: [
+          { required: true, message: '请输入注册资本', trigger: 'blur' },
+        ],
+        legal_name: [
+          { required: true, message: '请输入法定代表人', trigger: 'blur' },
+        ],
+        domicile: [
+          { required: true, message: '请输入住所', trigger: 'blur' },
+        ],
+        establish_time: [
+          { required: true, message: '请选择成立日期', trigger: 'blur' },
+        ],
+        address: [
+          { required: true, message: '请输入收货地址', trigger: 'blur' },
+        ],
+        uname: [
+          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
+        ],
+        phone: [
+          { required: true, message: '请输入收货人电话', trigger: 'blur' },
+        ],
+        username: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+        ],
+        id_card: [
+          { required: true, message: '请输入身份证号码', trigger: 'blur' },
+        ],
+        userphone: [
+          { required: true, message: '请输入手机号码', trigger: 'blur' },
+        ],
+        bank_name: [
+          { required: true, message: '请输入开户行名称', trigger: 'blur' },
+        ],
+        id_bank: [
+          { required: true, message: '请输入银行卡号', trigger: 'blur' },
+        ],
+      }
+    }
+  },
+  components: {
+    ElImageViewer: () => import('element-ui/packages/image/src/image-viewer')
+  },
+  created(){
+    this.getAccountInfo()
+  },
+  methods:{
+    goAgreement(type){
+      let routeData = this.$router.resolve({path: "/agreement",query: {type:type}});
+      window.open(routeData.href, '_blank');
+    },
+    checkStatus(){
+      this.check_status=-1
+    },
+    onPreview(img) {
+      this.img_url = img
+      this.showViewer = true
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false
+    },
+    //获取资料信息
+    getAccountInfo(){
+      let data={
+        open_account_type:'buyer'
+      }
+      getAccountInfo(data).then(res => {
+        console.info(res)
+        if (res.code==100) {
+          this.check_status=res.data.check_status
+          this.$set(this.upList[1], 'file', res.data.file[0]);
+          this.$set(this.upList[5], 'file', res.data.file[2]);
+          console.info(this.upList)
+          if(res.data!=null){
+            this.disabled=true
+            // this.changeRadio(res.data.account_type)
+            res.data.establish_time=res.data.establish_time*1000
+            res.data.check_message = res.data.check_message.replace(/\n/gm, "<br/>")
+            // this.upList.else_file=res.data.file[0]
+            // res.data.else_file=JSON.parse(res.data.else_file)
+            for(let key in res.data){
+              for(let item in this.ruleForm){
+                if(key==item){
+                  this.ruleForm[item]=res.data[key]
+                  continue;
+                }
+              }
+
+            }
+            this.getFileType()
+          }
+        }
+      });
+    },
+    getFileType(){
+      let data ={file_info:this.ruleForm}
+      getFileType(data).then(res=>{
+        console.info(res)
+        if (res.code==100 && res.file_info.length!=0) {
+          for(let key in res.file_info){
+            this.upList.forEach((v,i)=>{
+
+              if(key==v.key &&res.file_info[key]!=''){
+                if (key=='else_file' && res.file_info['else_file'] ==null) {
+                  v.type=0;
+                  v.url=[]
+                }else{
+                  v.type=1;
+                  v.url=res.file_info[key]
+                }
+              }
+
+            })
+          }
+        }
+      })
+    },
+    //切换rado事件
+    changeRadio(label){
+      if(label==1){
+        this.upList=[
+          {name:'营业执照（复印件）',type:0,url:'',key:'business_license'},
+          {name:'法人代表证明书',type:0,url:'',key:'legal_certificate'},
+          {name:'法人身份证件（复印件）',type:0,url:'',key:'legal_card'},
+          // {name:' 数字证书申请表',type:0,url:'',key:'number_certificate'},
+          {name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate'},
+          // {name:'标的证明文件',type:0,url:'',key:'asset_certificate'},
+          {name:'法人授权委托书',type:0,url:'',key:'legal_authorization'},
+          {name:'经办人身份证（复印件）',type:0,url:'',key:'operator_card'},
+          {name:'其他要求文件',type:0,url:[],key:'else_file'},
+        ]
+      }else{
+        this.upList=[
+          {name:'身份证正面',type:0,url:'',key:'user_card_front'},
+          {name:'身份证背面',type:0,url:'',key:'user_card_backfacade'},
+          // {name:' 数字证书申请表',type:0,url:'',key:'number_certificate'},
+          // {name:'标的证明文件',type:0,url:'',key:'asset_certificate'},
+          {name:'其他要求文件',type:0,url:[],key:'else_file'},
+        ]
+      }
+      this.ruleForm.else_file=[];
+    },
+    //删除图片
+    deleteUrl(item,index,index1){
+      if(item.key=="else_file"){
+        this.ruleForm.else_file.splice(index1,1)
+        this.upList[index].url.splice(index1,1)
+        if(this.ruleForm.else_file.length==0){
+          this.upList[index].type=0;
+          this.upList[index].url=[];
+          this.ruleForm[item.key]=[]
+        }
+      }else{
+        this.upList[index].type=0;
+        this.upList[index].url='';
+        this.ruleForm[item.key]=''
+      }
+    },
+    submit(){
+      console.info(this.ruleForm)
+      if (this.checked==2) {
+        this.$message.error('请先勾选《隐私权政策》等')
+      }else{
+        this.$refs["ruleForm1"].validate((valid) => {
+          if(valid){
+            if(this.ruleForm.account_type==1){
+              this.ruleForm.establish_time=this.ruleForm.establish_time/1000
+            }
+            openAccount(this.ruleForm).then(res => {
+              console.info(res)
+              if(res.code==101){
+                this.$message.error(res.msg);
+              }else{
+                this.$message.success('上传资料成功！请等待审核~');
+                this.check_status=0;
+                this.disabled=true
+              }
+              this.ruleForm.establish_time=this.ruleForm.establish_time*1000
+            });
+          }
+        })
+      }
+    },
+    handleAvatarError(){
+      this.$message.error('文件上传失败！');
+    },
+    handleAvatarSuccess(res, file, index,key){
+      console.info(file)
+      if(res.code==1){
+        const typeArr1 = ['application/pdf'];
+        const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1;
+        let type;
+        if (isJPG1) {
+          type=1
+        }else{
+          type=0
+        }
+        let data={
+          url:this.host+res.data.img_url,
+          type:type
+        }
+        if(key=="else_file"){
+
+          this.upList[index].type=1;
+          this.ruleForm.else_file.push(this.host+res.data.img_url)
+          this.upList[index].url.push(data);
+        }else{
+          this.upList[index].type=1;
+          this.upList[index].url=data;
+          this.ruleForm[key]=this.host+res.data.img_url
+        }
+        this.$message.success('文件上传成功！');
+      }
+    },
+    fileChange(file){
+      // const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
+      const typeArr1 = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf'];
+      // const isJPG = typeArr.indexOf(file.raw.type) !== -1;
+      const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1;
+      const isLt3M = file.size / 1024 / 1024 < 10;
+      // if (type==1) {
+        if (!isJPG1) {
+            this.$message.error('只能上传图片和PDF文件!');
+            this.$refs.upload.clearFiles();
+            return;
+        }
+      // }else{
+        // if (!isJPG) {
+        //     this.$message.error('只能是图片!');
+        //     this.$refs.upload.clearFiles();
+        //     return;
+        // }
+        if (!isLt3M) {
+            this.$message.error('上传图片和文件大小不能超过 10MB!');
+            this.$refs.upload.clearFiles();
+            // this.$set(this.query, 'goods_img', '');
+            return;
+        }
+      // }
+    },
+
+  }
+}
+</script>
+<style scoped>
+  .examine_img{
+    width: 144px;
+    height: 129px;
+  }
+  .error_msg{
+    margin-top: 60px;
+    text-align: left;
+  }
+  .error_msg> p{
+    color: #555555;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  .examine_tips_span{
+    display: inline-block;
+    color: #C94C4C;
+    text-decoration: underline;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+  .examine_tips{
+    margin-top: 20px;
+  }
+  .examine_content{
+    width: 100%;
+    text-align: center;
+    padding-top: 40px;
+    color: #C3CBD6;
+    font-size: 14px;
+    height: 700px;
+    box-sizing: border-box;
+  }
+  .body{
+    margin-top: 20px;
+  }
+  .title{
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  .title_info{
+    font-size: 12px;
+    color: #AAAAAA;
+  }
+  .table_right{
+    padding-left: 50px;
+  }
+  .table_right_content{
+    margin-top: 20px;
+  }
+  .table_right_item{
+    width: 300px;
+    display: flex;
+    align-items: center;
+    color: #333333;
+    font-size: 14px;
+    justify-content: space-between;
+  }
+  .table_right_item>span{
+    cursor: pointer;
+  }
+  .table_right_item>span:hover{
+    text-decoration: underline;
+  }
+  .table_right_item>i{
+    cursor: pointer;
+  }
+  .subject{
+    display: flex;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+  }
+  .subject >>>.el-radio, .el-radio__input{
+    line-height: inherit;
+    margin-left: 30px;
+  }
+  .table{
+    display: flex;
+    margin-top: 15px;
+  }
+  .table_left{
+    width: 800px;
+    border-right: 1px solid #EAB1B1;
+  }
+  .table_title{
+    font-size: 14px;
+    margin-bottom: 15px;
+  }
+  .table_content{
+    padding-left: 30px;
+    margin-bottom: 15px;
+    padding-right: 50px;
+  }
+  .table_content_item{
+    font-size: 14px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .table_content_item_upload{
+    display: flex;
+    align-items: center;
+    color: #C94C4C;
+  }
+  .el-icon-success{
+    font-size: 18px;
+  }
+  .upload-demo{
+    margin-right: 20px;
+  }
+  .upload_span{
+    color: #C94C4C;
+    text-decoration: underline;
+  }
+  .ruleForm>>>.el-form-item__label{
+    color: black;
+  }
+  .ruleForm>>>.el-input{
+    width: 500px;
+  }
+  .footer{
+    margin-top: 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+  .submit{
+    width: 340px;
+    height: 40px;
+    background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282));
+    background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%);
+    font-size: 14px;
+    color: #FFFFFF;
+    border: none;
+    margin-bottom: 10px;
+  }
+  .footer_span{
+    color: rgb(127, 127, 127);
+  }
+  .footer_span1{
+    color: rgb(201, 76, 76);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .table_content_item_span{
+    color: red;
+  }
+  .listing_button{
+    display: inline-block;
+    width: 70px;
+    height: 32px;
+    border-radius: 5px;
+    border: 1px solid #E7B0B0;
+    background: #F3D8D8;
+    font-size: 14px;
+    color: rgba(201, 76, 76, 0.898039215686275);
+    text-align: center;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .table_right_item_a{
+    color: black;
+  }
+  .table_right_item_a:hover{
+    text-decoration: underline;
+  }
+</style>

src/components/page/Purchaser/wkThird.vue

@@ -0,0 +1,630 @@
+<template>
+  <div class="body">
+    <template v-if="check_status==-1 || check_status==1">
+      <p class="title">第三方服务机构开户信息完善</p>
+      <p class="title_info">第三方服务机构开户用于服务平台中标的托管时的标的价格评估或标的价值评估，需有相关资质机构方能注册成功。</p>
+      <div class="subject">
+        <span>账户主体：</span>
+        <el-radio-group v-model="ruleForm.account_type" :disabled="disabled" @change="changeRadio">
+          <el-radio  :label="1">机构</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="table">
+        <div class="table_left">
+          <p class="table_title">请如实上传以下资料：</p>
+          <div class="table_content">
+            <div class="table_content_item" v-for="(item,index) in upList" :key="index">
+              <span>
+                <span class="table_content_item_span" v-if="item.required">*</span>
+                {{item.name}}
+              </span>
+              <div class="table_content_item_upload">
+                <el-upload
+                  class="upload-demo"
+                  :action="action"
+                  :on-change="fileChange"
+                  :show-file-list="false"
+                  :on-error="handleAvatarError"
+                  list-type="picture"
+                  :on-success="(res,file)=>{handleAvatarSuccess(res,file,index,item.key)}"
+                  >
+                  <span class="upload_span">上传</span>
+                </el-upload>
+                <span class="el-icon-success" v-if="item.type==1"></span>
+                <a class="listing_button" v-if="item.upType==1 && item.file!=''" :href="item.file" style="margin-left:15px"  target="_blank" rel="nofollow">下载模板</a>
+              </div>
+            </div>
+          </div>
+
+          <p class="table_title">请确认并完善以下信息：</p>
+          <div class="table_content">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="200px" class="ruleForm"  label-position="left">
+              <template v-if="ruleForm.account_type==1">
+                <el-form-item label="机构名称" prop="firm_name" >
+                  <el-input v-model="ruleForm.firm_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="统一社会信用代码" prop="credit_code" >
+                  <el-input v-model="ruleForm.credit_code" placeholder="请输入"   oninput="if(value.length > 18)value = value.slice(0, 18)"></el-input>
+                </el-form-item>
+                <!-- <el-form-item label="主体类型" prop="main_type" >
+                  <el-input v-model="ruleForm.main_type" placeholder="请输入"></el-input>
+                </el-form-item> -->
+                <el-form-item label="注册资本（元）" prop="reg_money" >
+                  <el-input v-model="ruleForm.reg_money" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
+                </el-form-item>
+                <el-form-item label="法定代表人" prop="legal_name" >
+                  <el-input v-model="ruleForm.legal_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="住所" prop="domicile" >
+                  <el-input v-model="ruleForm.domicile" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="成立日期" prop="establish_time" >
+                  <el-date-picker
+                    v-model="ruleForm.establish_time"
+                    type="date"
+                    value-format="timestamp"
+                    placeholder="选择成立日期">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="收货地址" prop="address" >
+                  <el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系人" prop="uname" >
+                  <el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系电话" prop="phone" >
+                  <el-input v-model.number="ruleForm.phone" placeholder="请输入"  oninput="if(value.length > 11)value = value.slice(0, 11)"></el-input>
+                </el-form-item>
+              </template>
+              <template v-else>
+                <el-form-item label="姓名" prop="username" >
+                  <el-input v-model="ruleForm.username" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="身份证号码" prop="id_card" >
+                  <el-input v-model="ruleForm.id_card" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="手机号码" prop="userphone" >
+                  <el-input v-model.number="ruleForm.userphone" placeholder="请输入"  oninput="if(value.length > 11)value = value.slice(0, 11)"></el-input>
+                </el-form-item>
+                <el-form-item label="开户行名称" prop="bank_name" >
+                  <el-input v-model="ruleForm.bank_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="银行卡号" prop="id_bank" >
+                  <el-input v-model.number="ruleForm.id_bank" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货地址" prop="address" >
+                  <el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系人" prop="uname" >
+                  <el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系电话" prop="phone" maxlength="11">
+                  <el-input v-model.number="ruleForm.phone" placeholder="请输入"></el-input>
+                </el-form-item>
+              </template>
+            </el-form>
+          </div>
+        </div>
+
+        <div class="table_right">
+          <p class="table_title">已上传资料：</p>
+          <div class="table_right_content">
+            <div  v-for="(item,index) in upList" :key="index" >
+              <template v-if="item.key=='else_file' && item.type==1">
+                <div class="table_right_item" v-for="(item1,index1) in item.url" :key="index1" >
+                  <span v-if="item.url[index1].type==0" @click="onPreview([item.url[index1].url])">{{item.name}}<span v-if="index1!=0">{{index1}}</span></span>
+                  <a class="table_right_item_a" v-else :href="item.url[index1].url" target="_blank" rel="nofollow">{{item.name}}<span v-if="index1!=0">{{index1}}</span></a>
+                  <!-- <span @click="onPreview([item.url[index1]])">{{item.name}}<span v-if="index1!=0">{{index1}}</span></span> -->
+                  <i class="el-icon-close" @click="deleteUrl(item,index,index1)"></i>
+                </div>
+              </template>
+              <template v-else>
+                <div class="table_right_item" v-if="item.type==1" >
+                  <span v-if="item.url.type==0" @click="onPreview([item.url.url])">{{item.name}}</span>
+                  <a class="table_right_item_a" v-else :href="item.url.url" target="_blank" rel="nofollow">{{item.name}}</a>
+                  <!-- <span @click="onPreview([item.url])">{{item.name}}</span> -->
+                  <i class="el-icon-close" @click="deleteUrl(item,index)"></i>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer" v-if="check_status==-1">
+        <button class="submit" @click="submit">提交资料</button>
+        <div>
+          <el-checkbox v-model="checked" :true-label=1 :false-label=2></el-checkbox>
+          <span class="footer_span">已阅读并同意</span>
+          <span class="footer_span1" @click="goAgreement(3)">《隐私权政策》</span>
+          <span class="footer_span1" @click="goAgreement(4)">《深圳文化产权交易所人才产权交易平台服务协议》</span>
+          <span class="footer_span1" @click="goAgreement(5)">《第三方服务机构申请与承诺》</span>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="check_status==0 || check_status==2">
+      <p class="title">第三方服务机构开户信息完善</p>
+      <p class="title_info">第三方服务机构开户用于服务平台中标的托管时的标的价格评估或标的价值评估，需有相关资质机构方能注册成功。</p>
+      <div class="examine_content">
+        <img src="../../../assets/img/examine_img.png" alt="" class="examine_img" v-if="check_status==0">
+        <img src="../../../assets/img/examine_img1.png" alt="" class="examine_img" v-else-if="check_status==2">
+        <p class="examine_tips">
+          <template v-if="check_status==0">
+            <span >资料已经提交，请耐心等待审核</span>
+          </template>
+          <template v-else-if="check_status==2">
+            <span >审核失败！请重新提交资料</span>
+            <span class="examine_tips_span" @click="checkStatus" >重新提交</span>
+          </template>
+        </p>
+        <div class="error_msg" v-if="check_status==2 && ruleForm.check_message!=''">
+          <p>失败原因：</p>
+          <p v-html="ruleForm.check_message"></p>
+        </div>
+      </div>
+    </template>
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :url-list="img_url"
+      :z-index="9999"
+    />
+  </div>
+</template>
+<script>
+import {openAccount,getAccountInfo,getFileType} from '../../../api/index';
+export default {
+  data(){
+    return{
+      subject:1,
+      checked:2,
+      check_status:-1,
+      disabled:false,
+      showViewer:false,
+      host:'http://wenhua.xingtongworld.com',
+      action:'http://wenhua.xingtongworld.com/api/Index/uploadimg',
+      upList:[
+        {name:'营业执照（复印件）',type:0,url:'',key:'business_license',required:true,upType:0},
+        {name:'法人代表证明书',type:0,url:'',key:'legal_certificate',required:true,upType:1,file:''},
+        {name:'法人身份证件（正面）',type:0,url:'',key:'legal_card_front',required:true,upType:0},
+        {name:'法人身份证件（反面）',type:0,url:'',key:'legal_card_backfacade',required:true,upType:0},
+        // {name:' 数字证书申请表',type:0,url:'',key:'number_certificate',required:true,upType:0},
+        {name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate',required:true,upType:0},
+        // {name:'标的证明文件',type:0,url:'',key:'asset_certificate',required:true,upType:0},
+        {name:'法人授权委托书',type:0,url:'',key:'legal_authorization',required:false,upType:1,file:''},
+        {name:'经办人身份证（正反面）',type:0,url:'',key:'operator_card_front',required:false,upType:0},
+        {name:'经办人身份证（反面）',type:0,url:'',key:'operator_card_backfacade',required:false,upType:0},
+        {name:'其他要求文件',type:0,url:[],key:'else_file',required:false,upType:1,file:''},
+      ],
+      ruleForm: {
+        open_account_type:'third_party',
+        account_type: 1,
+        business_license: '',
+        legal_certificate: '',
+        legal_card: '',
+        legal_card_front:'',
+        legal_card_backfacade:'',
+        number_certificate: '',
+        bank_account_certificate: '',
+        legal_authorization: '',
+        operator_card: '',
+        else_file: [],
+        user_card_front: '',
+        user_card_backfacade: '',
+        asset_certificate: '',
+        // asset_trusteeship: '',
+        firm_name: '',
+        credit_code: '',
+        main_type: '',
+        reg_money: '',
+        legal_name: '',
+        domicile: '',
+        establish_time: '',
+        username: '',
+        id_card: '',
+        userphone: '',
+        bank_name: '',
+        id_bank: '',
+        address: '',
+        uname: '',
+        phone: '',
+        check_message:''
+      },
+      rules: {
+        firm_name: [
+          { required: true, message: '请输入机构名称', trigger: 'blur' },
+        ],
+        credit_code: [
+          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
+        ],
+        // main_type: [
+        //   { required: true, message: '请输入主体类型', trigger: 'blur' },
+        // ],
+        reg_money: [
+          { required: true, message: '请输入注册资本', trigger: 'blur' },
+        ],
+        legal_name: [
+          { required: true, message: '请输入法定代表人', trigger: 'blur' },
+        ],
+        domicile: [
+          { required: true, message: '请输入住所', trigger: 'blur' },
+        ],
+        establish_time: [
+          { required: true, message: '请选择成立日期', trigger: 'blur' },
+        ],
+        address: [
+          { required: true, message: '请输入收货地址', trigger: 'blur' },
+        ],
+        uname: [
+          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
+        ],
+        phone: [
+          { required: true, message: '请输入收货人电话', trigger: 'blur' },
+        ],
+        username: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+        ],
+        id_card: [
+          { required: true, message: '请输入身份证号码', trigger: 'blur' },
+        ],
+        userphone: [
+          { required: true, message: '请输入手机号码', trigger: 'blur' },
+        ],
+        bank_name: [
+          { required: true, message: '请输入开户行名称', trigger: 'blur' },
+        ],
+        id_bank: [
+          { required: true, message: '请输入银行卡号', trigger: 'blur' },
+        ],
+      }
+    }
+  },
+  components: {
+    ElImageViewer: () => import('element-ui/packages/image/src/image-viewer')
+  },
+  created(){
+    this.getAccountInfo()
+  },
+  methods:{
+    goAgreement(type){
+      console.info(type)
+      let routeData = this.$router.resolve({path: "/agreement",query: {type:type}});
+      window.open(routeData.href, '_blank');
+    },
+    checkStatus(){
+      this.check_status=-1
+    },
+    //获取资料信息
+    getAccountInfo(){
+      let data={
+        open_account_type:'third_party'
+      }
+      getAccountInfo(data).then(res => {
+        console.info(res)
+        if (res.code==100) {
+          this.check_status=res.data.check_status
+          this.$set(this.upList[1], 'file', res.data.file[0]);
+          this.$set(this.upList[5], 'file', res.data.file[1]);
+          if(res.data!=null){
+            this.disabled=true
+            // this.changeRadio(res.data.account_type)
+            res.data.establish_time=res.data.establish_time*1000
+            res.data.check_message = res.data.check_message.replace(/\n/gm, "<br/>")
+            // res.data.else_file=JSON.parse(res.data.else_file)
+            for(let key in res.data){
+              for(let item in this.ruleForm){
+                if(key==item){
+                  this.ruleForm[item]=res.data[key]
+                  continue;
+                }
+              }
+            }
+          }
+        }
+      });
+    },
+    getFileType(){
+      let data ={file_info:this.ruleForm}
+      getFileType(data).then(res=>{
+        console.info(res)
+        if (res.code==100 && res.file_info.length!=0) {
+          for(let key in res.file_info){
+            this.upList.forEach((v,i)=>{
+
+              if(key==v.key &&res.file_info[key]!=''){
+                if (key=='else_file' && res.file_info['else_file'] ==null) {
+                  v.type=0;
+                  v.url=[]
+                }else{
+                  v.type=1;
+                  v.url=res.file_info[key]
+                }
+              }
+
+            })
+          }
+        }
+      })
+    },
+    //切换rado事件
+    changeRadio(label){
+      if(label==1){
+        this.upList=[
+          {name:'营业执照（复印件）',type:0,url:'',key:'business_license',required:true},
+          {name:'法人代表证明书',type:0,url:'',key:'legal_certificate',required:true},
+          {name:'法人身份证件（正反面）',type:0,url:'',key:'legal_card',required:true},
+          {name:' 数字证书申请表',type:0,url:'',key:'number_certificate',required:true},
+          {name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate',required:true},
+          {name:'标的证明文件',type:0,url:'',key:'asset_certificate',required:true},
+          {name:'法人授权委托书',type:0,url:'',key:'legal_authorization',required:false},
+          {name:'经办人身份证（正反面）',type:0,url:'',key:'operator_card',required:false},
+          {name:'其他要求文件',type:0,url:[],key:'else_file',required:false},
+        ]
+      }else{
+        this.upList=[
+          {name:'身份证正面',type:0,url:'',key:'user_card_front',required:true},
+          {name:'身份证背面',type:0,url:'',key:'user_card_backfacade',required:true},
+          {name:' 数字证书申请表',type:0,url:'',key:'number_certificate',required:true},
+          {name:'标的证明文件',type:0,url:'',key:'asset_certificate',required:true},
+          {name:'授权委托证明书',type:0,url:'',key:'asset_certificate',required:false},
+          {name:'被授权人身份证（正反面）',type:0,url:'',key:'asset_certificate',required:false},
+          {name:'其他要求文件',type:0,url:[],key:'else_file',required:false},
+        ]
+      }
+      this.ruleForm.else_file=[];
+    },
+    //删除图片
+    deleteUrl(item,index,index1){
+      if(item.key=="else_file"){
+        this.ruleForm.else_file.splice(index1,1)
+        this.upList[index].url.splice(index1,1)
+        if(this.ruleForm.else_file.length==0){
+          this.upList[index].type=0;
+          this.upList[index].url=[];
+          this.ruleForm[item.key]=[]
+        }
+      }else{
+        this.upList[index].type=0;
+        this.upList[index].url='';
+        this.ruleForm[item.key]=''
+      }
+    },
+    submit(){
+      console.info(this.ruleForm)
+      if (this.checked==2) {
+        this.$message.error('请先勾选《隐私权政策》等')
+      }else{
+        this.$refs["ruleForm1"].validate((valid) => {
+          if(valid){
+            if(this.ruleForm.account_type==1){
+              this.ruleForm.establish_time=this.ruleForm.establish_time/1000
+            }
+            openAccount(this.ruleForm).then(res => {
+              console.info(res)
+              if(res.code==101){
+                this.$message.error(res.msg);
+              }else{
+                this.$message.success('上传资料成功！请等待审核~');
+                this.disabled=true
+                this.check_status=0
+              }
+              this.ruleForm.establish_time=this.ruleForm.establish_time*1000
+            });
+          }
+        })
+      }
+    },
+    handleAvatarError(){
+      this.$message.error('文件上传失败！');
+    },
+    handleAvatarSuccess(res, file, index,key){
+      if(res.code==1){
+        const typeArr1 = ['application/pdf'];
+        const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1;
+        let type;
+        if (isJPG1) {
+          type=1
+        }else{
+          type=0
+        }
+        let data={
+          url:this.host+res.data.img_url,
+          type:type
+        }
+        if(key=="else_file"){
+          this.upList[index].type=1;
+          this.ruleForm.else_file.push(this.host+res.data.img_url)
+          this.upList[index].url.push(data);
+        }else{
+          this.upList[index].type=1;
+          this.upList[index].url=data;
+          this.ruleForm[key]=this.host+res.data.img_url
+        }
+        this.$message.success('文件上传成功！');
+      }
+    },
+    fileChange(file){
+      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf'];
+      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
+      const isLt3M = file.size / 1024 / 1024 < 10;
+      if (!isJPG) {
+          this.$message.error('只能上传图片和PDF文件!');
+          this.$refs.upload.clearFiles();
+          return;
+      }
+      if (!isLt3M) {
+          this.$message.error('上传图片大小不能超过 10MB!');
+          this.$refs.upload.clearFiles();
+          return;
+      }
+    },
+
+  }
+}
+</script>
+<style scoped>
+  .body{
+    margin-top: 20px;
+  }
+  .examine_img{
+    width: 144px;
+    height: 129px;
+  }
+  .error_msg{
+    margin-top: 60px;
+    text-align: left;
+  }
+  .error_msg> p{
+    color: #555555;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  .examine_tips_span{
+    display: inline-block;
+    color: #C94C4C;
+    text-decoration: underline;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+  .title{
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  .title_info{
+    font-size: 12px;
+    color: #AAAAAA;
+  }
+  .table_right{
+    padding-left: 50px;
+  }
+  .table_right_content{
+    margin-top: 20px;
+  }
+  .table_right_item{
+    width: 300px;
+    display: flex;
+    align-items: center;
+    color: #333333;
+    font-size: 14px;
+    justify-content: space-between;
+  }
+  .table_right_item>span{
+    cursor: pointer;
+  }
+  .table_right_item>span:hover{
+    text-decoration: underline;
+  }
+  .table_right_item>i{
+    cursor: pointer;
+  }
+  .subject{
+    display: flex;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+  }
+  .subject >>>.el-radio, .el-radio__input{
+    line-height: inherit;
+    margin-left: 30px;
+  }
+  .table{
+    display: flex;
+    margin-top: 15px;
+  }
+  .table_left{
+    width: 800px;
+    border-right: 1px solid #EAB1B1;
+  }
+  .table_title{
+    font-size: 14px;
+    margin-bottom: 15px;
+  }
+  .table_content{
+    padding-left: 30px;
+    margin-bottom: 15px;
+    padding-right: 50px;
+  }
+  .table_content_item{
+    font-size: 14px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .table_content_item_upload{
+    display: flex;
+    align-items: center;
+    color: #C94C4C;
+  }
+  .el-icon-success{
+    font-size: 18px;
+  }
+  .upload-demo{
+    margin-right: 20px;
+  }
+  .upload_span{
+    color: #C94C4C;
+    text-decoration: underline;
+  }
+  .ruleForm>>>.el-form-item__label{
+    color: black;
+  }
+  .ruleForm>>>.el-input{
+    width: 500px;
+  }
+  .footer{
+    margin-top: 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+  .submit{
+    width: 340px;
+    height: 40px;
+    background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282));
+    background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%);
+    font-size: 14px;
+    color: #FFFFFF;
+    border: none;
+    margin-bottom: 10px;
+  }
+  .footer_span{
+    color: rgb(127, 127, 127);
+  }
+  .footer_span1{
+    color: rgb(201, 76, 76);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .examine_content{
+    width: 100%;
+    text-align: center;
+    padding-top: 40px;
+    color: #C3CBD6;
+    font-size: 14px;
+    height: 700px;
+    box-sizing: border-box;
+  }
+  .table_content_item_span{
+    color: red;
+  }
+  .listing_button{
+    display: inline-block;
+    width: 70px;
+    height: 32px;
+    border-radius: 5px;
+    border: 1px solid #E7B0B0;
+    background: #F3D8D8;
+    font-size: 14px;
+    color: rgba(201, 76, 76, 0.898039215686275);
+    text-align: center;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/components/page/Purchaser/wkTrusteeship.vue

@@ -0,0 +1,668 @@
+<template>
+  <div class="body">
+    <template v-if="check_status==-1">
+      <p class="title">挂牌申请信息完善</p>
+      <p class="title_info">用户在托管标的前需先进行开户信息审核，待审核通过后方能进行托管。（个人用户目前仅支持人才产权交易，如需交易有形实物标的或无形实物标的请注册机构用户！）</p>
+      <div class="subject">
+        <span>账户主体：</span>
+        <el-radio-group v-model="ruleForm.account_type" :disabled="disabled" @change="changeRadio">
+          <el-radio  :label="1">机构</el-radio>
+          <el-radio  :label="2">个人</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="table">
+        <div class="table_left">
+          <p class="table_title">请如实上传以下资料：</p>
+          <div class="table_content">
+            <div class="table_content_item" v-for="(item,index) in upList" :key="index">
+              <span>
+                <span class="table_content_item_span" v-if="item.required">*</span>
+                {{item.name}}
+              </span>
+              <div class="table_content_item_upload">
+                <el-upload
+                  class="upload-demo"
+                  :action="action"
+                  :on-change="fileChange"
+                  :show-file-list="false"
+                  :on-error="handleAvatarError"
+                  list-type="picture"
+                  :on-success="(res,file)=>{handleAvatarSuccess(res,file,index,item.key)}"
+                  >
+                  <span class="upload_span">上传</span>
+                </el-upload>
+                <span class="el-icon-success" v-if="item.type==1"></span>
+                <a class="listing_button" v-if="item.upType==1 && item.file!=''" :href="item.file" style="margin-left:15px"  target="_blank" rel="nofollow">下载模板</a>
+              </div>
+            </div>
+          </div>
+
+          <p class="table_title">请确认并完善以下信息：</p>
+          <div class="table_content">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="200px" class="ruleForm"  label-position="left">
+              <template v-if="ruleForm.account_type==1">
+                <el-form-item label="机构名称" prop="firm_name" >
+                  <el-input v-model="ruleForm.firm_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="统一社会信用代码" prop="credit_code" >
+                  <el-input v-model="ruleForm.credit_code" placeholder="请输入"   oninput="if(value.length > 18)value = value.slice(0, 18)"></el-input>
+                </el-form-item>
+                <!-- <el-form-item label="主体类型" prop="main_type" >
+                  <el-input v-model="ruleForm.main_type" placeholder="请输入"></el-input>
+                </el-form-item> -->
+                <el-form-item label="注册资本（元）" prop="reg_money" >
+                  <el-input v-model="ruleForm.reg_money" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
+                </el-form-item>
+                <el-form-item label="法定代表人" prop="legal_name" >
+                  <el-input v-model="ruleForm.legal_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="住所" prop="domicile" >
+                  <el-input v-model="ruleForm.domicile" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="成立日期" prop="establish_time" >
+                  <el-date-picker
+                    v-model="ruleForm.establish_time"
+                    type="date"
+                    value-format="timestamp"
+                    placeholder="选择成立日期">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="收货地址" prop="address" >
+                  <el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系人" prop="uname" >
+                  <el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系电话" prop="phone" >
+                  <el-input v-model.number="ruleForm.phone" placeholder="请输入"  oninput="if(value.length > 11)value = value.slice(0, 11)"></el-input>
+                </el-form-item>
+              </template>
+              <template v-else>
+                <el-form-item label="姓名" prop="username" >
+                  <el-input v-model="ruleForm.username" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="身份证号码" prop="id_card" >
+                  <el-input v-model="ruleForm.id_card" placeholder="请输入"  oninput="if(value.length > 18)value = value.slice(0, 18)"></el-input>
+                </el-form-item>
+                <el-form-item label="手机号码" prop="userphone" >
+                  <el-input v-model.number="ruleForm.userphone" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="开户行名称" prop="bank_name" >
+                  <el-input v-model="ruleForm.bank_name" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="银行卡号" prop="id_bank" >
+                  <el-input v-model.number="ruleForm.id_bank" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货地址" prop="address" >
+                  <el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系人" prop="uname" >
+                  <el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="收货联系电话" prop="phone" >
+                  <el-input v-model.number="ruleForm.phone" placeholder="请输入"  oninput="if(value.length > 11)value = value.slice(0, 11)"></el-input>
+                </el-form-item>
+                <el-form-item label="传真" prop="fax" >
+                  <el-input v-model="ruleForm.fax" placeholder="请输入" ></el-input>
+                </el-form-item>
+                <el-form-item label="邮编" prop="postcode" >
+                  <el-input v-model="ruleForm.postcode" placeholder="请输入" ></el-input>
+                </el-form-item>
+                <el-form-item label="电子邮件" prop="email" >
+                  <el-input v-model="ruleForm.email" placeholder="请输入" ></el-input>
+                </el-form-item>
+              </template>
+            </el-form>
+          </div>
+        </div>
+
+        <div class="table_right">
+          <p class="table_title">已上传资料：</p>
+          <div class="table_right_content">
+            <div  v-for="(item,index) in upList" :key="index" >
+              <template v-if="item.key=='else_file' && item.type==1">
+                <div class="table_right_item" v-for="(item1,index1) in item.url" :key="index1" >
+                  <span v-if="item.url[index1].type==0" @click="onPreview([item.url[index1].url])">{{item.name}}<span v-if="index1!=0">{{index1}}</span></span>
+                  <a class="table_right_item_a" v-else :href="item.url[index1].url" target="_blank" rel="nofollow">{{item.name}}<span v-if="index1!=0">{{index1}}</span></a>
+                  <!-- <span @click="onPreview([item.url[index1]])">{{item.name}}<span v-if="index1!=0">{{index1}}</span></span> -->
+                  <i class="el-icon-close" @click="deleteUrl(item,index,index1)"></i>
+                </div>
+              </template>
+              <template v-else>
+                <div class="table_right_item" v-if="item.type==1" >
+                  <span v-if="item.url.type==0" @click="onPreview([item.url.url])">{{item.name}}</span>
+                  <a class="table_right_item_a" v-else :href="item.url.url" target="_blank" rel="nofollow">{{item.name}}</a>
+                  <!-- <span @click="onPreview([item.url])">{{item.name}}</span> -->
+                  <i class="el-icon-close" @click="deleteUrl(item,index)"></i>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <button class="submit" @click="submit">提交资料</button>
+        <div>
+          <el-checkbox v-model="checked" :true-label=1 :false-label=2></el-checkbox>
+          <span class="footer_span">已阅读并同意</span>
+          <span class="footer_span1" @click="goAgreement(3)">《隐私权政策》</span>
+          <span class="footer_span1" @click="goAgreement(4)">《深圳文化产权交易所人才产权交易平台服务协议》</span>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="check_status===0 || check_status==2">
+      <p class="title">挂牌方开户信息完善</p>
+      <p class="title_info">用户在挂牌标的前需要先进行开户信息审核，待审核通过后方能进行标的挂牌。</p>
+      <div class="examine_content">
+        <img src="../../../assets/img/examine_img.png" alt="" class="examine_img" v-if="check_status==0">
+        <img src="../../../assets/img/examine_img1.png" alt="" class="examine_img" v-else-if="check_status==2">
+        <p class="examine_tips">
+          <template v-if="check_status==0">
+            <span >资料已经提交，请耐心等待审核</span>
+          </template>
+          <template v-else-if="check_status==2">
+            <span >审核失败！请重新提交资料</span>
+            <span class="examine_tips_span" @click="checkStatus">重新提交</span>
+          </template>
+        </p>
+        <div class="error_msg" v-if="check_status==2 && ruleForm.check_message!=''">
+          <p>失败原因：</p>
+          <p v-html="ruleForm.check_message"></p>
+        </div>
+      </div>
+    </template>
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :url-list="img_url"
+      :z-index="9999"
+    />
+  </div>
+</template>
+<script>
+import {openAccount,getAccountInfo,getFileType} from '../../../api/index';
+export default {
+  data(){
+    return{
+      subject:1,
+      checked:2,
+      disabled:false,
+      check_status:-1,
+      showViewer:false,
+      host:'http://rccqapi.szcaee.cn',
+      action:'http://rccqapi.szcaee.cn/api/Index/uploadimg',
+      upList:[
+          {name:'营业执照（复印件）',type:0,url:'',key:'business_license',required:true,upType:0},
+          {name:'法人代表证明书',type:0,url:'',key:'legal_certificate',required:true,upType:1,file:''},
+          {name:'法人身份证件（正面）',type:0,url:'',key:'legal_card_front',required:true,upType:0},
+          {name:'法人身份证件（反面）',type:0,url:'',key:'legal_card_backfacade',required:true,upType:0},
+          // {name:' 数字证书申请表',type:0,url:'',key:'number_certificate',required:true,upType:0},
+          {name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate',required:true,upType:0},
+          // {name:'标的证明文件',type:0,url:'',key:'asset_certificate',required:true,upType:0},
+          {name:'法人授权委托书',type:0,url:'',key:'legal_authorization',required:false,upType:1,file:''},
+          {name:'经办人身份证（正反面）',type:0,url:'',key:'operator_card_front',required:false,upType:0},
+          {name:'经办人身份证（反面）',type:0,url:'',key:'operator_card_backfacade',required:false,upType:0},
+          {name:'其他要求文件',type:0,url:[],key:'else_file',required:false,upType:1,file:''},
+      ],
+      ruleForm: {
+        open_account_type:'enter_shop',
+        account_type: 1,
+        business_license: '',
+        legal_certificate: '',
+        legal_card: '',
+        legal_card_front:'',
+        legal_card_backfacade:'',
+        number_certificate: '',
+        bank_account_certificate: '',
+        legal_authorization: '',
+        operator_card: '',
+        else_file: [],
+        user_card_front: '',
+        user_card_backfacade: '',
+        asset_certificate: '',
+        // asset_trusteeship: '',
+        firm_name: '',
+        credit_code: '',
+        main_type: '',
+        reg_money: '',
+        legal_name: '',
+        domicile: '',
+        establish_time: '',
+        username: '',
+        id_card: '',
+        userphone: '',
+        bank_name: '',
+        id_bank: '',
+        address: '',
+        uname: '',
+        phone: '',
+        check_message:'',
+        fax: '',
+        postcode: '',
+        email:'',
+      },
+      rules: {
+        firm_name: [
+          { required: true, message: '请输入机构名称', trigger: 'blur' },
+        ],
+        credit_code: [
+          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
+        ],
+        // main_type: [
+        //   { required: true, message: '请输入主体类型', trigger: 'blur' },
+        // ],
+        reg_money: [
+          { required: true, message: '请输入注册资本', trigger: 'blur' },
+        ],
+        legal_name: [
+          { required: true, message: '请输入法定代表人', trigger: 'blur' },
+        ],
+        domicile: [
+          { required: true, message: '请输入住所', trigger: 'blur' },
+        ],
+        establish_time: [
+          { required: true, message: '请选择成立日期', trigger: 'blur' },
+        ],
+        address: [
+          { required: true, message: '请输入收货地址', trigger: 'blur' },
+        ],
+        uname: [
+          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
+        ],
+        phone: [
+          { required: true, message: '请输入收货人电话', trigger: 'blur' },
+        ],
+        username: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+        ],
+        id_card: [
+          { required: true, message: '请输入身份证号码', trigger: 'blur' },
+        ],
+        userphone: [
+          { required: true, message: '请输入手机号码', trigger: 'blur' },
+        ],
+        bank_name: [
+          { required: true, message: '请输入开户行名称', trigger: 'blur' },
+        ],
+        id_bank: [
+          { required: true, message: '请输入银行卡号', trigger: 'blur' },
+        ],
+        fax: [
+          { required: true, message: '请输入传真', trigger: 'blur' },
+        ],
+        postcode: [
+          { required: true, message: '请输入邮编', trigger: 'blur' },
+        ],
+        email: [
+          { required: true, message: '请输入电子邮件', trigger: 'blur' },
+        ],
+      },
+      mode_foel:[]
+    }
+  },
+  components: {
+    ElImageViewer: () => import('element-ui/packages/image/src/image-viewer')
+  },
+  created(){
+    this.getAccountInfo()
+  },
+  methods:{
+    goAgreement(type){
+      let routeData = this.$router.resolve({path: "/agreement",query: {type:type}});
+      window.open(routeData.href, '_blank');
+    },
+    checkStatus(){
+      this.check_status=-1
+    },
+    onPreview(img) {
+      this.img_url = img
+      this.showViewer = true
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false
+    },
+    //获取资料信息
+    getAccountInfo(){
+      let data={
+        open_account_type:'enter_shop'
+      }
+      getAccountInfo(data).then(res => {
+        console.info(res)
+        if (res.code==100) {
+          this.check_status=res.data.check_status
+          this.mode_foel=res.data.file
+          this.$set(this.upList[1], 'file', res.data.file[0]);
+          this.$set(this.upList[5], 'file', res.data.file[4]);
+          if(res.data!=null){
+            if (res.data.account_type) {
+              this.disabled=true
+              console.info(res.data.account_type)
+              this.changeRadio(res.data.account_type)
+            }
+            res.data.establish_time=res.data.establish_time*1000
+            res.data.check_message = res.data.check_message.replace(/\n/gm, "<br/>")
+            // res.data.else_file=JSON.parse(res.data.else_file)
+            for(let key in res.data){
+              for(let item in this.ruleForm){
+                if(key==item){
+                  this.ruleForm[item]=res.data[key]
+                  continue;
+                }
+              }
+            }
+          }
+        }
+      });
+    },
+    getFileType(){
+      let data ={file_info:this.ruleForm}
+      getFileType(data).then(res=>{
+        console.info(res)
+        if (res.code==100 && res.file_info.length!=0) {
+          for(let key in res.file_info){
+            this.upList.forEach((v,i)=>{
+
+              if(key==v.key &&res.file_info[key]!=''){
+                if (key=='else_file' && res.file_info['else_file'] ==null) {
+                  v.type=0;
+                  v.url=[]
+                }else{
+                  v.type=1;
+                  v.url=res.file_info[key]
+                }
+              }
+
+            })
+          }
+        }
+      })
+    },
+    //切换rado事件
+    changeRadio(label){
+      if(label==1){
+        this.upList=[
+
+          {name:'营业执照（复印件）',type:0,url:'',key:'business_license',required:true,upType:0},
+          {name:'法人代表证明书',type:0,url:'',key:'legal_certificate',required:true,upType:1,file:this.mode_foel[0]},
+          {name:'法人身份证件（正面）',type:0,url:'',key:'legal_card_front',required:true,upType:0},
+          {name:'法人身份证件（反面）',type:0,url:'',key:'legal_card_backfacade',required:true,upType:0},
+          {name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate',required:true,upType:0},
+          {name:'法人授权委托书',type:0,url:'',key:'legal_authorization',required:false,upType:1,file:this.mode_foel[4]},
+          {name:'经办人身份证（正反面）',type:0,url:'',key:'operator_card_front',required:false,upType:0},
+          {name:'经办人身份证（反面）',type:0,url:'',key:'operator_card_backfacade',required:false,upType:0},
+          {name:'其他要求文件',type:0,url:[],key:'else_file',required:false,upType:1,file:''},
+        ]
+      }else{
+        this.upList=[
+
+          {name:'身份证正面',type:0,url:'',key:'user_card_front',required:true,upType:0},
+          {name:'身份证背面',type:0,url:'',key:'user_card_backfacade',required:true,upType:0},
+          {name:'授权委托证明书',type:0,url:'',key:'legal_authorization',required:false,upType:1,file:this.mode_foel[5]},
+          {name:'被授权人身份证（正面）',type:0,url:'',key:'operator_card_front',required:false,upType:0},
+          {name:'被授权人身份证（反面）',type:0,url:'',key:'operator_card_backfacade',required:false,upType:0},
+          {name:'其他要求文件',type:0,url:[],key:'else_file',required:false,upType:0},
+        ]
+      }
+      this.ruleForm.else_file=[];
+    },
+    //删除图片
+    deleteUrl(item,index,index1){
+      if(item.key=="else_file"){
+        this.ruleForm.else_file.splice(index1,1)
+        this.upList[index].url.splice(index1,1)
+        if(this.ruleForm.else_file.length==0){
+          this.upList[index].type=0;
+          this.upList[index].url=[];
+          this.ruleForm[item.key]=[]
+        }
+      }else{
+        this.upList[index].type=0;
+        this.upList[index].url='';
+        this.ruleForm[item.key]=''
+      }
+    },
+    submit(){
+      console.info(this.ruleForm)
+      if (this.checked==2) {
+        this.$message.error('请先勾选《隐私权政策》等')
+      }else{
+        this.$refs["ruleForm1"].validate((valid) => {
+          if(valid){
+            if(this.ruleForm.account_type==1){
+              this.ruleForm.establish_time=this.ruleForm.establish_time/1000
+            }else{
+              this.ruleForm.establish_time=0
+            }
+            openAccount(this.ruleForm).then(res => {
+              console.info(res)
+              if(res.code==101){
+                this.$message.error(res.msg);
+              }else{
+                this.$message.success('上传资料成功！请等待审核~');
+                this.disabled=true
+                this.check_status=0
+              }
+              this.ruleForm.establish_time=this.ruleForm.establish_time*1000
+            });
+          }
+        })
+      }
+    },
+    handleAvatarError(){
+      this.$message.error('文件上传失败！');
+    },
+    handleAvatarSuccess(res, file, index,key){
+      if(res.code==1){
+        const typeArr1 = ['application/pdf'];
+        const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1;
+        let type;
+        if (isJPG1) {
+          type=1
+        }else{
+          type=0
+        }
+        let data={
+          url:this.host+res.data.img_url,
+          type:type
+        }
+        if(key=="else_file"){
+          this.upList[index].type=1;
+          this.ruleForm.else_file.push(this.host+res.data.img_url)
+          this.upList[index].url.push(data);
+        }else{
+          this.upList[index].type=1;
+          this.upList[index].url=data;
+          this.ruleForm[key]=this.host+res.data.img_url
+        }
+        this.$message.success('文件上传成功！');
+      }
+    },
+    fileChange(file){
+      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf'];
+      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
+      const isLt3M = file.size / 1024 / 1024 < 10;
+      if (!isJPG) {
+          this.$message.error('只能上传图片和PDF文件!');
+          this.$refs.upload.clearFiles();
+          return;
+      }
+      if (!isLt3M) {
+          this.$message.error('上传图片大小不能超过 10MB!');
+          this.$refs.upload.clearFiles();
+          // this.$set(this.query, 'goods_img', '');
+          return;
+      }
+    },
+
+  }
+}
+</script>
+<style scoped>
+
+  .body{
+    margin-top: 20px;
+  }
+  .examine_img{
+    width: 144px;
+    height: 129px;
+  }
+  .error_msg{
+    margin-top: 60px;
+    text-align: left;
+  }
+  .error_msg> p{
+    color: #555555;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  .examine_tips_span{
+    display: inline-block;
+    color: #C94C4C;
+    text-decoration: underline;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+  .title{
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  .title_info{
+    font-size: 12px;
+    color: #AAAAAA;
+  }
+  .table_right{
+    padding-left: 50px;
+  }
+  .table_right_content{
+    margin-top: 20px;
+  }
+  .table_right_item{
+    width: 300px;
+    display: flex;
+    align-items: center;
+    color: #333333;
+    font-size: 14px;
+    justify-content: space-between;
+  }
+  .table_right_item>span{
+    cursor: pointer;
+  }
+  .table_right_item>span:hover{
+    text-decoration: underline;
+  }
+  .table_right_item>i{
+    cursor: pointer;
+  }
+  .subject{
+    display: flex;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+  }
+  .subject >>>.el-radio, .el-radio__input{
+    line-height: inherit;
+    margin-left: 30px;
+  }
+  .table{
+    display: flex;
+    margin-top: 15px;
+  }
+  .table_left{
+    width: 800px;
+    border-right: 1px solid #EAB1B1;
+  }
+  .table_title{
+    font-size: 14px;
+    margin-bottom: 15px;
+  }
+  .table_content{
+    padding-left: 30px;
+    margin-bottom: 15px;
+    padding-right: 50px;
+  }
+  .table_content_item{
+    font-size: 14px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .table_content_item_upload{
+    display: flex;
+    align-items: center;
+    color: #C94C4C;
+  }
+  .el-icon-success{
+    font-size: 18px;
+  }
+  .upload-demo{
+    margin-right: 20px;
+  }
+  .upload_span{
+    color: #C94C4C;
+    text-decoration: underline;
+  }
+  .ruleForm>>>.el-form-item__label{
+    color: black;
+  }
+  .ruleForm>>>.el-input{
+    width: 500px;
+  }
+  .footer{
+    margin-top: 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+  .submit{
+    width: 340px;
+    height: 40px;
+    background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282));
+    background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%);
+    font-size: 14px;
+    color: #FFFFFF;
+    border: none;
+    margin-bottom: 10px;
+  }
+  .footer_span{
+    color: rgb(127, 127, 127);
+  }
+  .footer_span1{
+    color: rgb(201, 76, 76);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .examine_content{
+    width: 100%;
+    text-align: center;
+    padding-top: 40px;
+    color: #C3CBD6;
+    font-size: 14px;
+    height: 700px;
+    box-sizing: border-box;
+  }
+  .table_content_item_span{
+    color: red;
+  }
+  .listing_button{
+    display: inline-block;
+    width: 70px;
+    height: 32px;
+    border-radius: 5px;
+    border: 1px solid #E7B0B0;
+    background: #F3D8D8;
+    font-size: 14px;
+    color: rgba(201, 76, 76, 0.898039215686275);
+    text-align: center;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/components/page/StationNotice.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="body">
+
+    <div class="tabs">
+      <el-table
+        :data="tableData"
+        header-cell-class-name="theader"
+        :header-cell-style="{background:'#F2F2F2 !important',color:'#333333',height:'60px',fontSize:'14px'}"
+        @row-click="goDetails"
+        style="width: 100%">
+        <el-table-column
+          prop="create_time"
+          align="center"
+          label="发布日期">
+        </el-table-column>
+        <!-- <el-table-column
+          prop=""
+          align="center"
+          label="通知类型">
+        </el-table-column> -->
+        <el-table-column
+          prop="title"
+          align="center"
+          label="通知标题">
+        </el-table-column>
+        <el-table-column
+          prop="content"
+          align="center"
+          label="通知详情">
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next"
+        :current-page="query.page"
+        :page-size="query.limit"
+        :total="pageTotal"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+
+  </div>
+</template>
+<script>
+import {informList} from '../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        page:1,
+        limit:10,
+      },
+      tableData:[],
+      pageTotal:0
+    }
+  },
+  created(){
+    this.getData();
+  },
+  methods:{
+    goDetails(row){
+      console.info(row)
+      this.$router.push({path:'/StationNoticeDetails',query:{id:row.id}})
+    },
+    getData(){
+      informList(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.tableData=res.list;
+          this.pageTotal=res.count
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      this.getData();
+    }
+  }
+}
+</script>
+<style scoped>
+  .body{
+    width: 1200px;
+    margin: 0 auto;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .tabs{
+    margin-top: 20px;
+  }
+  .tabs>>> .el-table tr{
+    border:1px solid #E9B7B7 !important
+  }
+  .tabs>>>.el-table td, .el-table th.is-leaf{
+    border-bottom: none;
+  }
+  .tabs>>>.el-table::before{
+    height: 0;
+  }
+</style>

src/components/page/StationNoticeDetails.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="body">
+    <div class="title">{{tableData.title}}</div>
+    <div>{{tableData.content}}</div>
+
+  </div>
+</template>
+<script>
+import {informList} from '../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        id:''
+      },
+      tableData:{},
+    }
+  },
+  created(){
+    this.query.id=this.$route.query.id
+    this.getData();
+  },
+  methods:{
+    getData(){
+      informList(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.tableData=res.list[0];
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, 'page', val);
+      this.getData();
+    }
+  }
+}
+</script>
+<style scoped>
+  .body{
+    width: 1200px;
+    margin: 0 auto;
+    padding-top: 20px;
+    text-align: center;
+    min-height: 400px;
+  }
+  .el-dropdown-link{
+    color: #EAB1B1;
+    cursor: pointer;
+  }
+  .tabs{
+    margin-top: 20px;
+  }
+  .tabs>>> .el-table tr{
+    border:1px solid #E9B7B7 !important
+  }
+  .tabs>>>.el-table td, .el-table th.is-leaf{
+    border-bottom: none;
+  }
+  .tabs>>>.el-table::before{
+    height: 0;
+  }
+  .title{
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+</style>

src/components/page/agreement.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-html="agreement" style="padding-top:20px"></div>
+</template>
+<script>
+import {getagreement} from '../../api/index'
+export default {
+  data(){
+    return{
+      query:{
+        type:''
+      },
+      agreement:''
+    }
+  },
+  created(){
+    this.query.type=this.$route.query.type,
+    this.getagreement()
+  },
+  methods:{
+    getagreement(){
+      getagreement(this.query).then(res=>{
+        console.info(res)
+        if (res.code==100) {
+          this.agreement=res.list.content
+        }else{
+          this.$message.error(res.msg);
+        }
+      })
+    }
+  }
+}
+</script>

src/components/page/examine.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="body">
+      <p class="title">标的挂牌</p>
+      <!-- <p class="title_info">第三方服务机构开户用于服务平台中标的托管时的标的价格评估或标的价值评估，需有相关资质机构方能注册成功。</p> -->
+      <div class="examine_content">
+        <img src="../../assets/img/examine_img.png" alt="" class="examine_img" v-if="assetLists.asset_status==5&& assetLists.asset_check_status==0 ||check_status==0 || assetLists.asset_status==0">
+        <img src="../../assets/img/examine_img1.png" alt="" class="examine_img" v-else-if="assetLists.asset_check_status==2 || assetLists.asset_status==1">
+        <p class="examine_tips">
+          <template v-if="check_status==0 || assetLists.asset_status==0">
+            <span >挂牌资料已经提交，请耐心等待审核</span>
+          </template>
+          <template v-else-if="assetLists.asset_check_status==0 && assetLists.payment_document=='' &&assetLists.asset_status==5 ||assetLists.asset_check_status==2" >
+            <span v-if="assetLists.asset_check_status==0">
+              挂牌资料审核已通过,您需要支付挂牌费用
+              <span style="color:red">（{{assetLists.cartellino_money}}元）</span>
+              ,请上传支付凭证
+            </span>
+            <span v-else-if="assetLists.asset_check_status==2 &&  assetLists.payment_document==''">挂牌费的支付凭证未通过审核，请查看原因重新提交</span>
+            <span v-else>挂牌费的支付凭证已重新提交，请耐心等待审核</span>
+            <el-upload
+              class="upload-demo"
+              :action="action"
+              :show-file-list="false"
+              list-type="picture"
+              :on-change="fileChange"
+              :on-success="(res)=>{handleAvatarSuccess(res)}"
+              >
+              <span class="examine_tips_span"  >{{assetLists.asset_check_status==0? '点击上传':'重新上传'}}</span>
+            </el-upload>
+          </template>
+          <template v-else-if="assetLists.asset_check_status==0 && assetLists.payment_document!='' ">
+            <span >挂牌费的支付凭证用已经提交，请耐心等待审核</span>
+          </template>
+          <template v-else-if="assetLists.asset_status==1 ">
+            <span >资产审核不通过，请查看原因，重新提交</span>
+          </template>
+        </p>
+        <div class="error_msg" v-if="assetLists.asset_check_status==2  || assetLists.asset_status==1 ">
+          <p>失败原因：</p>
+          <p >{{assetLists.message}}</p>
+        </div>
+      </div>
+  </div>
+</template>
+<script>
+import {assetList,uploadPayFile} from '../../api/index';
+export default {
+  data(){
+    return{
+      check_status:0,
+      ruleForm:{},
+      query:{
+        id:'',
+        payment_document:''
+      },
+      assetLists:{},
+      host:'http://rccqapi.szcaee.cn',
+      action:'http://rccqapi.szcaee.cn/api/Index/uploadimg',
+
+    }
+  },
+  created(){
+    if (this.$route.query.id) {
+      this.query.id=this.$route.query.id
+      this.assetList()
+    }
+    // this.getAccountInfo()
+  },
+  methods:{
+    fileChange(file){
+      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
+      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
+      const isLt3M = file.size / 1024 / 1024 < 10;
+      if (!isJPG) {
+        this.$message.error('只能是图片!');
+        this.$refs.upload.clearFiles();
+        return;
+      }
+      if (!isLt3M) {
+        this.$message.error('上传图片大小不能超过 10MB!');
+        this.$refs.upload.clearFiles();
+        return;
+      }
+    },
+    handleAvatarSuccess(res) {
+      console.info(res)
+      if(res.code == 1){
+        let url=this.host + res.data.img_url
+        this.query.payment_document=url
+        uploadPayFile(this.query).then(res=>{
+          console.info(res)
+          if (res.code==100) {
+            this.$message.success('上传成功!');
+            this.assetList()
+          }else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
+    },
+    assetList(){
+      assetList(this.query).then(res => {
+        console.info(res)
+        if(res.code==100){
+          this.assetLists=res.data.list[0];
+          this.check_status=1
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    checkStatus(){
+      this.check_status=-1
+    },
+    submit(){
+      console.info(this.ruleForm)
+
+      this.$refs["ruleForm1"].validate((valid) => {
+        if(valid){
+          if(this.ruleForm.account_type==1){
+            this.ruleForm.establish_time=this.ruleForm.establish_time/1000
+          }
+          openAccount(this.ruleForm).then(res => {
+            console.info(res)
+            if(res.code==101){
+              this.$message.error(res.msg);
+            }else{
+              this.$message.success('上传资料成功！请等待审核~');
+              this.disabled=true
+              this.check_status=0
+            }
+            this.ruleForm.establish_time=this.ruleForm.establish_time*1000
+          });
+        }
+      })
+    },
+
+
+  }
+}
+</script>
+<style scoped>
+  .body{
+    margin-top: 20px;
+  }
+  .upload-demo{
+    margin-top: 10px;
+  }
+  .error_msg{
+    text-align: left;
+    color: black;
+    margin-top: 20px;
+  }
+  .error_msg p{
+    margin-bottom: 10px;
+  }
+  .examine_tips_span{
+    display: inline-block;
+    color: #C94C4C;
+    text-decoration: underline;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+  .title{
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  .title_info{
+    font-size: 12px;
+    color: #AAAAAA;
+  }
+  .table_right{
+    padding-left: 50px;
+  }
+  .table_right_content{
+    margin-top: 20px;
+  }
+  .table_right_item{
+    width: 300px;
+    display: flex;
+    align-items: center;
+    color: #333333;
+    font-size: 14px;
+    justify-content: space-between;
+  }
+  .table_right_item>span{
+    cursor: pointer;
+  }
+  .table_right_item>span:hover{
+    text-decoration: underline;
+  }
+  .table_right_item>i{
+    cursor: pointer;
+  }
+  .subject{
+    display: flex;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+  }
+  .subject >>>.el-radio, .el-radio__input{
+    line-height: inherit;
+    margin-left: 30px;
+  }
+  .table{
+    display: flex;
+    margin-top: 15px;
+  }
+  .table_left{
+    width: 800px;
+    border-right: 1px solid #EAB1B1;
+  }
+  .table_title{
+    font-size: 14px;
+    margin-bottom: 15px;
+  }
+  .table_content{
+    padding-left: 30px;
+    margin-bottom: 15px;
+    padding-right: 50px;
+  }
+  .table_content_item{
+    font-size: 14px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .table_content_item_upload{
+    display: flex;
+    align-items: center;
+    color: #C94C4C;
+  }
+  .el-icon-success{
+    font-size: 18px;
+  }
+  .upload-demo{
+    margin-right: 20px;
+  }
+  .upload_span{
+    color: #C94C4C;
+    text-decoration: underline;
+  }
+  .ruleForm>>>.el-form-item__label{
+    color: black;
+  }
+  .ruleForm>>>.el-input{
+    width: 500px;
+  }
+  .footer{
+    margin-top: 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+  .submit{
+    width: 340px;
+    height: 40px;
+    background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282));
+    background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%);
+    background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%);
+    font-size: 14px;
+    color: #FFFFFF;
+    border: none;
+    margin-bottom: 10px;
+  }
+  .footer_span{
+    color: rgb(127, 127, 127);
+  }
+  .footer_span1{
+    color: rgb(201, 76, 76);
+    text-decoration: underline;
+  }
+  .examine_content{
+    width: 100%;
+    text-align: center;
+    padding-top: 40px;
+    color: #C3CBD6;
+    font-size: 14px;
+    height: 700px;
+    box-sizing: border-box;
+  }
+  .table_content_item_span{
+    color: red;
+  }
+</style>

src/components/page/index.vue

@@ -0,0 +1,535 @@
+<template>
+  <div class="index_body">
+    <el-carousel trigger="click" height="754px" ref="carousel">
+      <el-carousel-item v-for="(item,index) in indexList.banner || 3" :key="index">
+        <img :src="item.img || '../../assets/img/index_banner.jpg' " :alt="item.name" class="asset_banner_img">
+      </el-carousel-item>
+    </el-carousel>
+    <div class="index_conent">
+      <div class="process">
+        <div class="process_tips">
+          <p>交易</p>
+          <p>流程</p>
+        </div>
+        <div class="process_item">
+          <div class="process_item_left">
+            <img src="../../assets/img/index_process.png" alt="">
+          </div>
+          <div class="process_item_right">
+            <p>第一步</p>
+            <p>注册登录</p>
+          </div>
+        </div>
+        <img src="../../assets/img/index_right.png" alt="" class="index_right">
+        <div class="process_item">
+          <div class="process_item_left">
+            <img src="../../assets/img/index_process1.png" alt="">
+          </div>
+          <div class="process_item_right">
+            <p>第二步</p>
+            <p>阅读公告</p>
+          </div>
+        </div>
+        <img src="../../assets/img/index_right.png" alt="" class="index_right">
+        <div class="process_item">
+          <div class="process_item_left">
+            <img src="../../assets/img/index_process2.png" alt="">
+          </div>
+          <div class="process_item_right">
+            <p>第三步</p>
+            <p>咨询看样</p>
+          </div>
+        </div>
+        <img src="../../assets/img/index_right.png" alt="" class="index_right">
+        <div class="process_item">
+          <div class="process_item_left">
+            <img src="../../assets/img/index_process3.png" alt="">
+          </div>
+          <div class="process_item_right">
+            <p>第四步</p>
+            <p>购买签约</p>
+          </div>
+        </div>
+        <img src="../../assets/img/index_right.png" alt="" class="index_right">
+        <div class="process_item">
+          <div class="process_item_left">
+            <img src="../../assets/img/index_process4.png" alt="">
+          </div>
+          <div class="process_item_right">
+            <p>第五步</p>
+            <p>标的交付</p>
+          </div>
+        </div>
+        <img src="../../assets/img/index_right.png" alt="" class="index_right">
+        <div class="process_item">
+          <div class="process_item_left">
+            <img src="../../assets/img/index_process5.png" alt="">
+          </div>
+          <div class="process_item_right">
+            <p>第六步</p>
+            <p>交易完成</p>
+          </div>
+        </div>
+      </div>
+      <div class="asset">
+        <div class="asset_left">
+          <div class="asset_left_title">
+            <div class="asset_title_left">
+              <span>热门</span>
+              <span>资产</span>
+            </div>
+            <div class="asset_title_right">
+              <div class="asset_title_right_item" v-for="(item,index) in indexList.views" :key="index">{{item}}</div>
+              <span>次浏览</span>
+            </div>
+          </div>
+          <div class="asset_left_content">
+            <div class="tabs_item" @click="goDetails(item.id,'/AssetDetails')" v-for="(item,index) in indexList.hot_list" :key="index">
+              <img :src="item.serial_img" alt="" class="tabs_item_img">
+              <div class="tabs_item_lable">{{item.serial_number}}</div>
+              <div class="tabs_item_content">
+                <p class="tabs_item_content_title">{{item.serial_name}}</p>
+                <p class="tabs_item_content_p">
+                  <span>资产价格： </span>
+                  <span class="tabs_item_content_span">￥</span>
+                  <span class="tabs_item_content_span tabs_item_content_span1">{{item.price}}</span>
+                </p>
+                <p class="tabs_item_content_p">
+                  <span>标的类型： </span>
+                  <span class="tabs_item_content_span2 tabs_item_content_span3">{{item. serial_type_name}}</span>
+                </p>
+                <p class="tabs_item_content_p">
+                  <span>所在地： </span>
+                  <span class="tabs_item_content_span2 tabs_item_content_span3">{{item.address}}</span>
+                </p>
+                <p class="tabs_item_content_p">
+                  <span>有效日期： </span>
+                  <span class="tabs_item_content_span2 ">{{item.effective_date}}前</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="asset_left_title">
+            <div class="asset_title_left">
+              <span>最新</span>
+              <span>标的</span>
+            </div>
+          </div>
+          <div class="asset_left_content">
+            <div class="tabs_item" @click="goDetails(item.id,'/AssetDetails')" v-for="(item,index) in indexList.news_list" :key="index">
+              <img :src="item.serial_img" alt="" class="tabs_item_img">
+              <div class="tabs_item_lable">{{item.serial_number}}</div>
+              <div class="tabs_item_content">
+                <p class="tabs_item_content_title">{{item.serial_name}}</p>
+                <p class="tabs_item_content_p">
+                  <span>资产价格： </span>
+                  <span class="tabs_item_content_span">￥</span>
+                  <span class="tabs_item_content_span tabs_item_content_span1">{{item.price}}</span>
+                </p>
+                <p class="tabs_item_content_p">
+                  <span>标的类型： </span>
+                  <span class="tabs_item_content_span2 tabs_item_content_span3">{{item. serial_type_name}}</span>
+                </p>
+                <p class="tabs_item_content_p">
+                  <span>所在地： </span>
+                  <span class="tabs_item_content_span2 tabs_item_content_span3">{{item.address}}</span>
+                </p>
+                <p class="tabs_item_content_p">
+                  <span>有效日期： </span>
+                  <span class="tabs_item_content_span2 ">{{item.effective_date}}前</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="asset_left_title">
+            <div class="asset_title_left">
+              <span>第三方服务机构</span>
+            </div>
+            <div class="asset_title_right">
+              <span class="asset_title_right_span">共</span>
+              <span>{{indexList.third_party_list.length}}</span>
+              <span class="asset_title_right_span">家</span>
+            </div>
+          </div>
+          <div class="asset_left_content" v-if="indexList.third_party_list.length!=0">
+            <div  class="tree_img" v-for="(item,index) in indexList.third_party_list" :key="index">{{item.firm_name}} </div>
+          </div>
+        </div>
+        <div class="notice">
+          <div class="notice_item" v-if="indexList.asset_notice_list.length!=0">
+            <p class="notice_item_title">
+              <span>挂牌公告</span>
+              <span @click="goPage('/Listing')">更多 ></span>
+            </p>
+            <div class="notice_item_info" v-for="(item,index) in indexList.asset_notice_list" :key="index" @click="goDetails(item.id,'/NoticeDetails',0)">
+              <div class="notice_item_info_div">{{item.serial_name}}</div>
+              <p class="notice_item_info_time">{{item.create_time | formatDate}}</p>
+            </div>
+          </div>
+          <div class="notice_item" v-if="indexList.end_list.length!=0">
+            <p class="notice_item_title">
+              <span>摘牌公告</span>
+              <span @click="goPage('/DelistingNotice')">更多 ></span>
+            </p>
+            <div class="notice_item_info"  v-for="(item,index) in indexList.end_list" :key="index" @click="goDetails(item.id,'/NoticeDetails',1)">
+              <div class="notice_item_info_div">{{item.serial_name}}</div>
+              <p class="notice_item_info_time">{{item.remove_time}} </p>
+            </div>
+          </div>
+          <div class="notice_item" v-if="indexList.delist.length!=0">
+            <p class="notice_item_title">
+              <span>成交公告</span>
+              <span @click="goPage('/Deal')">更多 ></span>
+            </p>
+            <div class="notice_item_info" v-for="(item,index) in indexList.delist" :key="index" >
+              <div class="notice_item_info_div">{{item.serial_name}}</div>
+              <p class="notice_item_info_time">{{item.confirm_delivery_time | formatDate}}</p>
+            </div>
+          </div>
+          <!-- <template v-if="indexList.delist.length!=0">
+            <div class="notice_item1">
+              <img src="../../assets/img/index_banner.jpg" alt="">
+              <div class="notice_item1_content">
+                <p>标的跳转营销标题1</p>
+                <p>这里写各种好好看的营销文案！</p>
+              </div>
+            </div>
+          </template> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {index} from '../../api/index'
+export default {
+  data(){
+    return{
+      indexList:{
+        hot_list:[],
+        news_list:[],
+        views:[],
+        third_party_list:[],
+        asset_notice_list:[],
+        delist:[],
+        end_list:[]
+      }
+    }
+  },
+  created(){
+    this.getIndex()
+  },
+  methods:{
+    getIndex(){
+      index(this.query).then(res=>{
+        console.info(res)
+        if(res.code==100){
+          this.indexList=res.data
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    goPage(url){
+      this.$router.push(url)
+    },
+    goDetails(id,url,type){
+      this.$router.push({path:url,query:{id:id,type:type}})
+    }
+  }
+}
+</script>
+<style scoped>
+  .index_body{
+    margin-top: 5px;
+  }
+  .tree_img{
+    width: 128px;
+    height: 60px;
+    cursor: pointer;
+    margin-right: 14px;
+    margin-bottom: 20px;
+  }
+  .tree_img:nth-child(n+4){
+    margin-right: 0;
+  }
+  .asset_title_right_span{
+    color: #333333;
+  }
+  .notice{
+    width: 300px;
+    padding: 15px 10px;
+    box-sizing: border-box;
+    background: #F2F2F2;
+    border: 1px solid #D7D7D7;
+    height: auto;
+  }
+  .notice_item1{
+    width: 242px;
+    margin: 0 auto;
+    margin-top: 20px;
+    background: white;
+  }
+  .notice_item1 img{
+    width: 100%;
+    height: 150px;
+  }
+  .notice_item1_content{
+    padding: 15px 0;
+    text-align: center;
+    font-size: 12px;
+    color: #555555;
+  }
+  .notice_item1_content p:last-child{
+    color: #7F7F7F;
+    margin-top: 5px;
+  }
+  .notice_item{
+    padding: 15px 0px;
+    border-bottom: 1px solid #D7D7D7;
+  }
+  .notice_item_title{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #333333;
+    padding: 0px 10px;
+  }
+  .notice_item_title span:last-child{
+    cursor: pointer;
+  }
+  .notice_item_info_time{
+    color: #AAAAAA;
+    text-align: right;
+    margin-top: 3px;
+  }
+  .notice_item_info{
+    padding: 0px 10px;
+    width: 240px;
+    font-size: 12px;
+    margin-top: 15px;
+    position: relative;
+    cursor: pointer;
+  }
+  .notice_item_info_div{
+    width: 100%;
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    position: relative;
+  }
+  .notice_item_info:after{
+    content:"";
+    width:0;
+    height:0;
+    position:absolute;
+    left:0px;
+    top:1px;
+    border-top:solid 6px transparent;
+    border-left:solid 6px #AAAAAA;       /* 黑色大三角形 */
+    border-bottom:solid 6px transparent;
+  }
+  .notice_item_title span:first-child{
+    font-size: 18px;
+  }
+  .asset{
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+  .asset_left{
+    width: 878px;
+  }
+  .asset_left_content{
+    display: flex;
+    width: 100%;
+    /* justify-content: space-between; */
+    flex-wrap: wrap;
+  }
+  .asset_title_right{
+    font-size: 14px;
+    color: #C94C4C;
+    display: flex;
+    align-items: center;
+  }
+  .asset_title_right_item{
+    width: 17px;
+    height: 23px;
+    background: #C94C4C;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+  }
+  .asset_title_left{
+    font-weight: 650;
+    font-size: 24px;
+    color: #555555;
+    display: flex;
+  }
+  .asset_title_left span:first-child{
+    color: #C94C4C;
+  }
+  .asset_left_title{
+    padding: 10px 0;
+    padding-right: 20px;
+    width: 100%;
+    border-bottom: 2px solid #D98282;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+  }
+  .asset_banner_img{
+    width: 100%;
+    height: 100%;
+  }
+  .index_conent{
+    width: 1200px;
+    margin: 0 auto;
+  }
+  .process{
+    width: 100%;
+    margin: 20px 0;
+    border: 1px solid #D7D7D7;
+    height: 80px;
+    display: flex;
+    align-items: center;
+  }
+  .process_tips{
+    width: 110px;
+    height: 100%;
+    background: #F2F2F2;
+    font-weight: 650;
+    font-size: 18px;
+    color: #333333;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .process_item{
+    margin: 0 36px;
+    font-size: 12px;
+    color: #7F7F7F;
+    display: flex;
+    align-items: center;
+  }
+  .process_item_left{
+    width: 27px;
+    height: 27px;
+    background: #D7D7D7;
+    border-radius: 50% 0px 50%  50% ;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+  }
+  .process_item_left img{
+    width: 15px;
+    height: 15px;
+  }
+  .process_item_right p:last-child{
+    font-weight: 650;
+    color: #333333;
+    margin-top: 5px;
+  }
+  .index_right{
+    width: 29px;
+    height: 29px;
+  }
+
+
+
+  .tabs_item{
+    width: 283px;
+    height: 300px;
+    border: 1px solid #E9B7B7;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    position: relative;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-right: 14px;
+  }
+  .tabs_item:nth-child(3n+3){
+    margin-right: 0;
+  }
+  .tabs_item_img{
+    width: 100%;
+    height: 170px;
+    border-radius: 5px 5px 0 0;
+  }
+  .tabs_item_lable{
+    width: 100px;
+    height: 25px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    color: #FFFFFF;
+    background: #C94C4C;
+    z-index: 100;
+    line-height: 25px;
+    text-align: center;
+  }
+  .tabs_item_lable::after{
+    content: '';
+    border-top: 12.5px solid transparent;
+    border-left: 10px solid #C94C4C;
+    border-bottom: 12.5px solid transparent;
+    position: absolute;
+    top: 0;
+    left: 100px;
+  }
+  .breadcrumb{
+    margin-top: 30px;
+  }
+  .el-breadcrumb{
+    font-size: 18px;
+  }
+  .tabs_item_content{
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.5);
+    height: 150px;
+    margin-top: -40px;
+    /* padding: 10px 10px; */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    /* padding-bottom: 10px; */
+  }
+  .tabs_item_content_title{
+    width: 100%;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    background: rgba(238, 238, 238, 0.5);
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .tabs_item_content_p{
+    color: #7F7F7F;
+    font-size: 12px;
+    padding-left: 10px;
+  }
+  .tabs_item_content_span{
+    color: #C94C4C;
+  }
+  .tabs_item_content_span1{
+    font-size: 18px;
+  }
+  .tabs_item_content_span2{
+    color: #333333;
+  }
+  .tabs_item_content_span3{
+    font-weight: bold;
+  }
+</style>

src/main.js

@@ -0,0 +1,45 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import moment from 'moment'
+Vue.config.productionTip = false
+
+Vue.use(ElementUI, {
+  size: 'small'
+});
+Vue.filter('formatDate',function (input,fmtstring) {//当input为时间戳，需转为Number类型
+  if(input){
+    return moment(input*1000).format('YYYY-MM-DD HH:mm:ss');
+}else{
+    return "";
+}
+});//使用钩子函数对路由进行权限跳转
+// router.beforeEach((to, from, next) => {
+//     const role = localStorage.getItem('login_info');
+//     if (!role && to.path !== '/index') {
+//         next('/index');
+//     } else if (to.meta.permission) {
+//         // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
+//         role === 'admin' ? next() : next('/403');
+//     } else {
+//         // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
+//         if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
+//             Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
+//                 confirmButtonText: '确定'
+//             });
+//         } else {
+//             next();
+//         }
+//     }
+// });
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

src/router/index.js

@@ -0,0 +1,177 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      redirect: 'index',
+    },
+    {
+      path: '/',
+        component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
+        meta: { title: '自述文件' },
+        children: [
+          {
+            path: '/index',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/index.vue'),
+            meta: { title: '首页' }
+          },
+          {
+            path: '/AssetClassification',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/AssetClassification.vue'),
+            meta: { title: '资产分类' }
+          },
+          {
+            path: '/agreement',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/agreement.vue'),
+            meta: { title: '协议' }
+          },
+          {
+            path: '/examine',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/examine.vue'),
+            meta: { title: '审核' }
+          },
+          {
+            path: '/Listing',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Listing.vue'),
+            meta: { title: '挂牌公告' }
+          },
+          {
+            path: '/Deal',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Deal.vue'),
+            meta: { title: '成交公告' }
+          },
+          {
+            path: '/DelistingNotice',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/DelistingNotice.vue'),
+            meta: { title: '摘牌公告' }
+          },
+          {
+            path: '/StationNotice',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/StationNotice.vue'),
+            meta: { title: '站内通知' }
+          },
+          {
+            path: '/StationNoticeDetails',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/StationNoticeDetails.vue'),
+            meta: { title: '站内通知详情' }
+          },
+          {
+            path: '/ClassificationDetails',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/ClassificationDetails.vue'),
+            meta: { title: '分类详情' }
+          },
+          {
+            path: '/AssetDetails',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/AssetDetails.vue'),
+            meta: { title: '资产详情' }
+          },
+          {
+            path: '/NoticeDetails',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/NoticeDetails.vue'),
+            meta: { title: '公共详情' }
+          },
+          {
+            path: '/wkPurchaser',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/wkPurchaser.vue'),
+            meta: { title: '购买方未开户' }
+          },
+          {
+            path: '/wkTrusteeship',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/wkTrusteeship.vue'),
+            meta: { title: '托管方未开户' }
+          },
+          {
+            path: '/wkThird',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/wkThird.vue'),
+            meta: { title: '第三方未开户' }
+          },
+          {
+            path: '/Purchaser',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/Purchaser.vue'),
+            meta: { title: '购买方已开户' },
+            children:[
+              {
+                path: '',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/myOrder.vue'),
+                meta: { title: '我的订单' }
+              },
+              {
+                path: 'myCollection',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/myCollection.vue'),
+                meta: { title: '我的收藏' }
+              },
+              {
+                path: 'study',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/study.vue'),
+                meta: { title: '在线学习' }
+              },
+              {
+                path: 'achievements',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/achievements.vue'),
+                meta: { title: '学习成果' }
+              },
+            ]
+          },
+          {
+            path: 'Hoster',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Hoster/index.vue'),
+            meta: { title: '托管方' },
+            children:[
+              {
+                path: '',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Hoster/myOrder.vue'),
+                meta: { title: '我的订单' }
+              },
+              {
+                path: 'myAssets',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Hoster/myAssets.vue'),
+                meta: { title: '我的资产' }
+              },
+            ]
+          },
+          {
+            path: 'AssetListing',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Hoster/Listing.vue'),
+            meta: { title: '资产挂牌' }
+          },
+          {
+            path: '/Order',
+            component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/index.vue'),
+            meta: { title: '订单' },
+            children:[
+              {
+                name:'confirmOrder',
+                path: 'confirmOrder',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/confirmOrder.vue'),
+                meta: { title: '确认订单' }
+              },
+              {
+                path: 'orderPayment',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/orderPayment.vue'),
+                meta: { title: '订单付款' }
+              },
+              {
+                path: 'orderPendingPay',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/orderPendingPay.vue'),
+                meta: { title: '买家订单付款' }
+              },
+              {
+                path: 'sellOrderPendingPay',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/sellOrderPendingPay.vue'),
+                meta: { title: '卖家订单付款' }
+              },
+              {
+                path: 'orderDetails',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Order/orderDetails.vue'),
+                meta: { title: '订单详情' }
+              },
+            ]
+          },
+        ]
+    }
+  ]
+})

src/utils/request.js

@@ -0,0 +1,57 @@
+import axios from 'axios';
+import router from '../router/index'
+const service = axios.create({
+    // process.env.NODE_ENV === 'development' 来判断是否开发环境
+    // easy-mock服务挂了，暂时不使用了
+    // baseURL: 'http://wenhua.xingtongworld.com/',
+    baseURL: 'http://rccqapi.szcaee.cn/',
+    timeout: 5000
+});
+
+service.interceptors.request.use(
+    config => {
+      var login_info=JSON.parse(localStorage.getItem('login_info'))
+      if(login_info!=null){
+        var token = login_info.session.session_id
+        if(token ){
+            config.headers['token'] = token
+        }
+      }
+
+      return config;
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+service.interceptors.response.use(
+    response => {
+      if (response.data.code === 303) {
+        localStorage.removeItem('login_info')
+        router.push('/index')
+        location.reload()
+        // location.reload()
+        // MessageBox.confirm('登录已超时，请重新登录', '退出', {
+        //     confirmButtonText: '登录',
+        //     cancelButtonText: '取消',
+        //     type: 'warning'
+        // }).then(() => {
+        //     storage.remove('seller_token')
+
+        // })
+      }
+      if (response.status === 200) {
+          return response.data;
+      } else {
+          Promise.reject();
+      }
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+export default service;

vue.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  //baseUrl: './',
+  publicPath:'/',
+  assetsDir: 'static',
+  productionSourceMap: false,
+  devServer: {
+      proxy: {
+          '/api': {
+              target: 'http://hpy3.yqygs.com',
+              changeOrigin: true,
+              pathRewrite: {
+              '^/api': '/api'
+              }
+          }
+      }
+  }
+}