1

.env.development

@@ -0,0 +1,3 @@
+NODE_ENV=development
+VUE_APP_STAGE=development
+VUE_APP_URL='https://www.baidu.com'

.env.production

@@ -0,0 +1,3 @@
+NODE_ENV=production
+VUE_APP_STAGE=production
+VUE_APP_URL='https://www.baidu.com'

.env.test

@@ -0,0 +1,3 @@
+NODE_ENV=test
+VUE_APP_STAGE=test
+VUE_APP_URL='https://www.baidu.com'

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.idea
+.vscode

.eslintrc.js

@@ -0,0 +1,62 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    commonjs: true,
+    es6: true,
+    amd: true,
+  },
+  globals: {},
+  extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', 'vue'],
+      },
+    },
+  },
+  plugins: ['prettier'],
+  rules: {
+    // 0表示不不处理，1表示警告，2表示错误并退出
+    'vue/multi-word-component-names': 'off', // 要求组件名称始终为多字
+    "no-tabs":"off",
+    // camelcase: 1, // 驼峰命名
+    // 'prettier/prettier': 0, // 会优先采用prettierrc.json的配置，不符合规则会提示错误
+    // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    // 'comma-dangle': 'off',
+    // 'import/prefer-default-export': 'off', // 优先export default导出
+    // 'no-param-reassign': 'off', // 函数参数属性的赋值
+    // semi: [2, 'never'],
+    // 'no-unused-expressions': 'off', // 联式调用使用?
+    // 'import/no-cycle': 'off', // 导入循环引用报错
+    // 'arrow-parens': 'off', // 箭头函数一个参数可以不要括号
+    // 'no-underscore-dangle': 'off', // 无下划线
+    // 'no-plusplus': 'off', //  使用一元运算符
+    // 'object-curly-newline': 'off',
+    // 'no-restricted-syntax': 'off', // 使用for of
+    // 'operator-linebreak': 'off', // after
+    // 'arrow-body-style': 'off',
+    // // 暂时屏蔽检测@别名
+    // 'import/no-useless-path-segments': 'off',
+    // 'import/no-unresolved': 'off',
+    // 'import/extensions': 'off',
+    // 'import/no-absolute-path': 'off',
+    // 'import/no-extraneous-dependencies': 'off',
+    // 'newline-per-chained-call': ['error', { ignoreChainWithDepth: 10 }],
+    // 'linebreak-style': [0, 'error', 'windows'],
+    // 'no-shadow': 'off', // 注意你必须禁用基本规则，因为它可以报告不正确的错误
+    // 'keyword-spacing': [
+    //   2,
+    //   {
+    //     before: true,
+    //     after: true,
+    //   },
+    // ] // 强制在关键字前后使用一致的空格
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.idea
+.vscode

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged --allow-empty 

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "*.{ts,vue}": ["eslint", "prettier --write"]
+}

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+public

.prettierrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  tabWidth: 2, // tab缩进大小,默认为2
+  useTabs: false, // 使用tab缩进，默认false
+  semi: false, // 使用分号, 默认true
+  singleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
+  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
+  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
+  proseWrap: 'preserve', // "always" - 当超出print width（上面有这个参数）时就折行 "never" - 不折行 "perserve" - 按照文件原样折行
+  trailingComma: 'none', // 对象最后一项默认格式化会加逗号
+  arrowParens: 'avoid', // 箭头函数参数括号 默认avoid 可选 avoid(能省略括号的时候就省略)| always(总是有括号)
+  bracketSpacing: true, // 对象中的空格 默认true{ foo: bar } false:{foo: bar}
+  printWidth: 100 // 一行多长，超过的会换行
+}

package.json

@@ -0,0 +1,87 @@
+{
+  "name": "h5-v2-template",
+  "version": "1.0.0",
+  "private": true,
+  "author": {
+    "name": "鹏多多",
+    "email": "993080086@qq.com",
+    "url": "https://github.com/wp993080086"
+  },
+  "scripts": {
+    "serve": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build --mode production",
+    "build_test": "vue-cli-service build --mode test",
+    "lint": "vue-cli-service lint",
+    "lint-fix": "vue-cli-service lint ./src --ext .vue,.js",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@vue/composition-api": "^1.7.2",
+    "axios": "^1.7.7",
+    "echarts": "^5.5.1",
+    "echarts-map": "^3.0.1",
+    "html2canvas": "^1.4.1",
+    "jsonp": "^0.2.1",
+    "qrcodejs2": "^0.0.2",
+    "qs": "^6.10.3",
+    "swiper": "5",
+    "swiper-vue2": "^1.0.10",
+    "vant": "^2.12.48",
+    "vue": "^2.6.14",
+    "vue-cli-plugin-windicss": "^1.1.6",
+    "vue-cropp": "^1.1.8",
+    "vue-echarts": "^7.0.3",
+    "vue-router": "^3.5.4",
+    "vue2-preview": "^1.0.5",
+    "vuex": "^3.6.2",
+    "weixin-js-sdk": "^1.6.5",
+    "windicss": "^3.5.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
+    "autoprefixer": "^10.4.7",
+    "babel-plugin-import": "^1.13.3",
+    "compression-webpack-plugin": "^6.1.1",
+    "core-js": "^3.23.2",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vuejs-accessibility": "^1.1.0",
+    "husky": "^7.0.2",
+    "lint-staged": "^11.1.2",
+    "postcss-px-to-viewport": "^1.1.1",
+    "prettier": "^2.7.1",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.0",
+    "style-resources-loader": "^1.5.0",
+    "vue-template-compiler": "^2.6.14",
+    "webpack-bundle-analyzer": "^4.5.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

postcss.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport': {
+      unitToConvert: 'px', // 需要转换的单位，默认为"px"
+      viewportWidth: 375, // 设计稿的视口宽度
+      exclude: [/node_modules/], // 解决vant375,设计稿750问题。忽略某些文件夹下的文件或特定文件
+      unitPrecision: 5, // 单位转换后保留的精度
+      propList: ['*'], // 能转化为vw的属性列表
+      viewportUnit: 'vw', // 希望使用的视口单位
+      fontViewportUnit: 'vw', // 字体使用的视口单位
+      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
+      replace: true, //  是否直接更换属性值，而不添加备用属性
+      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+      landscapeUnit: 'vw', // 横屏时使用的单位
+      landscapeWidth: 1125 // 横屏时使用的视口宽度
+    }
+  }
+}

public/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta name="viewport" content="viewport-fit=cover">
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
+    <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> -->
+    <script src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0">
+    <title>南华灯会</title>
+    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
+      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
+    <% } %>  
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue ！</strong>
+    </noscript>
+    <div id="app"></div>
+    <% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>  
+  </body>
+  
+<script>
+  // VConsole 默认会挂载到 `window.VConsole` 上
+  // var vConsole = new window.VConsole();
+</script>
+</html>

src/App.vue

@@ -0,0 +1,207 @@
+<template>
+  <div id="app">
+    <!-- <van-nav-bar
+      title="南华云灯会"
+      left-arrow
+      :border="false"
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    /> -->
+    <page-slide indexPagePath="/login">
+      <router-view
+        class="pageContent"
+        :style="{ height: isshow ? 'calc(100vh - 65px)' : '100vh' }"
+      />
+    </page-slide>
+    <tabbar v-show="isshow" />
+  </div>
+</template>
+
+<script>
+import pageSlide from '@/components/page-slide'
+import tabbar from '@/components/tabbar/index.vue'
+import jsonp from 'jsonp'
+import wx from 'weixin-js-sdk'
+export default {
+  name: 'App',
+  components: {
+    pageSlide,
+    tabbar
+  },
+  created() {
+    let token = this.getUrlParams("token")
+    if (token) {
+      this.$store.commit('home/setToken', token)
+    }
+    window.onhashchange = () => {
+      console.log('监听到了hash地址的变化', location.hash)
+      // location.hash方法用于获取哈希地址
+      switch (location.hash) {
+        case '#/home':
+          this.comName = 'Home'
+          break
+        case '#/movie':
+          this.comName = 'Movie'
+          break
+        case '#/about':
+          this.comName = 'About'
+          break
+      }
+    }
+  },
+  computed: {
+    isshow() {
+      return this.$route.meta.showHeader
+    }
+  },
+  mounted() {
+    this.wxShare()
+  },
+  methods: {
+    async getWinxinCodeFun(huiyi_id){//获得微信code
+            var self=this;
+            if(this.getQuery("code")){
+                // 拿到code值
+                self.code=tools.getQuery("code");
+                //把微信打乱的url地址静默修复
+                var changeUrl=`${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.hash}${window.location.search}`;
+                window.history.pushState({},0, changeUrl);
+
+                WXAPI.wxLogin(self.code).then((sucData)=>{//调用后台的微信登录方法
+                    self.commonLoginFun(sucData);//调用登录成功后的公共方法
+                })
+                return;
+            }
+            var appId = 'wxc09c15943347c4a4';//后端接口获取appid什么的
+            var url=encodeURIComponent(window.location.href);
+            var getCodeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`;
+            window.location.href = getCodeUrl;
+        },
+    getQuery(name) {
+      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) {
+          return unescape(r[2]);
+      }
+      return null;
+    },
+    getUrlParams(name) {
+      let url =  window.location.href
+        // 通过 ? 分割获取后面的参数字符串
+        let urlStr = url.split('?') && url.split('?')[1]
+        // 创建空对象存储参数
+      let obj = {};
+        // 再通过 & 将每一个参数单独分割出来
+      let paramsArr = urlStr && urlStr.split('&') || []
+      for(let i = 0,len = paramsArr.length;i < len;i++){
+            // 再通过 = 将每一个参数分割为 key:value 的形式
+        let arr = paramsArr[i].split('=')
+        obj[arr[0]] = arr[1];
+      }
+      return obj && obj[name]
+    },
+    onClickLeft() {
+      this.$router.go(-1)
+    },
+    onClickRight() {},
+    wxShare() {
+      let url = window.location.href.split('#')[0]
+      if (window.location.ancestorOrigins) {
+        url = window.location.ancestorOrigins[0]
+      }
+      jsonp(
+        'https://www.4dage.com/wechat/jssdk/share/?uri=' +
+          window.escape(url) +
+          '&name=厦门四维时代微信公众号',
+        'success_jsonp',
+        function (err, data) {
+          if (err) {
+            console.err(err)
+          } else {
+            console.log(wx)
+            wx.config({
+              debug: false, // 开启调试模式
+              appId: data.appId,
+              timestamp: data.timestamp,
+              nonceStr: data.nonceStr,
+              signature: data.signature,
+              jsApiList: [
+                'checkJsApi',
+                'onMenuShareTimeline',
+                'onMenuShareAppMessage',
+                'onMenuShareQQ',
+                'onMenuShareWeibo',
+                'hideMenuItems',
+                'showMenuItems',
+                'hideAllNonBaseMenuItem',
+                'showAllNonBaseMenuItem',
+                'translateVoice',
+                'startRecord',
+                'stopRecord',
+                'onRecordEnd',
+                'playVoice',
+                'pauseVoice',
+                'stopVoice',
+                'uploadVoice',
+                'downloadVoice'
+              ]
+            })
+          }
+          wx.error(function (err) {
+            console.log(err,'err')
+          })
+          wx.ready(function () {
+            var shareData = {
+              title: '四维看看', //  标题
+              desc: '可将线下场景自动转为线上四维场景。好用不贵，全球百万用户首选', //  描述
+              link: window.location.href, //  分享的URL，必须和当前打开的网页的URL是一样的
+              imgUrl: 'https://4dkk.4dage.com/FDKKIMG/icon/kankan_icon180.png', //  缩略图地址
+              success: function () {},
+              cancel: function () {}
+            }
+            wx.onMenuShareAppMessage(shareData)
+            wx.onMenuShareTimeline(shareData)
+            wx.onMenuShareQQ(shareData)
+            wx.onMenuShareQZone(shareData)
+          })
+        }
+      )
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  width: 100%;
+  height: 100%;
+  /* padding-top: 46px; */
+  position: relative;
+}
+.pageContent {
+  /* padding-top: 46px; */
+  position: relative;
+}
+.van-nav-bar {
+  position: absolute;
+  width: 100%;
+  border: none !important;
+  background: none !important;
+}
+.van-nav-bar__title,
+.van-nav-bar .van-icon {
+  color: #fff;
+}
+.showImgbase64{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  position: absolute;
+  z-index: 11;
+}
+.van-image__img{
+  width: auto;
+  height: auto;
+}
+</style>

src/api/request.js

@@ -0,0 +1,68 @@
+import axios from 'axios'
+import router from '../router/index'
+import { Toast } from 'vant';
+import store from '../store/index';
+axios.defaults.withCredentials = false;
+axios.defaults.headers.common['token'] = store.state.home.token || window.localStorage.getItem("token");
+axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头
+
+// http request拦截器 添加一个请求拦截器
+axios.interceptors.request.use(function (config) {
+  let token = store.state.home.token || window.localStorage.getItem("token")
+  console.log(config, "config");
+  if (token) {
+    //将token放到请求头发送给服务器,将tokenkey放在请求头中
+    config.headers.token = token;
+    //也可以这种写法
+    // config.headers['token'] = token;
+  }
+  return config;
+}, function (error) {
+  Toast.fail('请求超时');
+  // Do something with request error
+  return Promise.reject(error);
+});
+
+// 添加一个响应拦截器
+axios.interceptors.response.use(function (response) {
+  if (response.data && response.data.code) {
+    if (response.data.message === 'token失效' || response.data.message === '请求头中没有token') {
+      //未登录
+      Toast.fail("登录信息已失效，请重新登录");
+      router.push('/login');
+    }
+    if (parseInt(response.data.code) === -1) {
+      Toast.fail(response.data.msg);
+      // Toast.fail("请求失败");
+    }
+  }
+  return response;
+}, function (error) {
+  Toast.fail("服务器连接失败");
+  return Promise.reject(error);
+})
+
+let base = 'https://sit-nanhuacs.4dage.com/';
+
+//通用方法
+export const POST = (url, params, config) => {
+  const getTimestamp = new Date().getTime();
+  return axios.post(`${base}${url}?timer=${getTimestamp}`, params, config).then(res => res.data)
+}
+
+export const GET = (url, params) => {
+  const getTimestamp = new Date().getTime();
+  return axios.get(`${base}${url}?timer=${getTimestamp}`, { params: params }).then(res => res.data)
+}
+
+export const PUT = (url, params) => {
+  return axios.put(`${base}${url}`, params).then(res => res.data)
+}
+
+export const DELETE = (url, params) => {
+  return axios.delete(`${base}${url}`, { params: params }).then(res => res.data)
+}
+
+export const PATCH = (url, params) => {
+  return axios.patch(`${base}${url}`, params).then(res => res.data)
+}

src/components/HelloWorld.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<style scoped></style>

src/components/echars/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="map-view">
+    <div id="main" style="width: 100vw;"></div>
+  </div>
+</template>
+<script>
+import geoJson from './china.json' //引入地图数据
+export default {
+  data() {
+    return {
+      mapData: [
+        {
+          name: '新疆维吾尔自治区',
+          value: 0
+        },
+        {
+          name: '西藏自治区',
+          value: 0
+        },
+        {
+          name: '内蒙古自治区',
+          value: 0
+        },
+        {
+          name: '青海省',
+          value: 0
+        },
+        {
+          name: '四川省',
+          value: 0
+        },
+        {
+          name: '黑龙江省',
+          value: 0
+        },
+        {
+          name: '甘肃省',
+          value: 0
+        },
+        {
+          name: '云南省',
+          value: 4
+        },
+        {
+          name: '广西壮族自治区',
+          value: 40
+        },
+        {
+          name: '湖南省',
+          value: 89
+        },
+        {
+          name: '陕西省',
+          value: 40
+        },
+        {
+          name: '广东省',
+          value: 54
+        },
+        {
+          name: '吉林省',
+          value: 15
+        },
+        {
+          name: '河北省',
+          value: 81
+        },
+        {
+          name: '湖北省',
+          value: 82
+        },
+        {
+          name: '贵州省',
+          value: 32
+        },
+        {
+          name: '山东省',
+          value: 11
+        },
+        {
+          name: '江西省',
+          value: 64
+        },
+        {
+          name: '河南省',
+          value: 38
+        },
+        {
+          name: '辽宁省',
+          value: 82
+        },
+        {
+          name: '山西省',
+          value: 50
+        },
+        {
+          name: '安徽省',
+          value: 45
+        },
+        {
+          name: '福建省',
+          value: 76
+        },
+        {
+          name: '浙江省',
+          value: 30
+        },
+        {
+          name: '江苏省',
+          value: 9
+        },
+        {
+          name: '重庆市',
+          value: 91
+        },
+        {
+          name: '宁夏回族自治区',
+          value: 17
+        },
+        {
+          name: '海南省',
+          value: 27
+        },
+        {
+          name: '台湾省',
+          value: 79
+        },
+        {
+          name: '北京市',
+          value: 40
+        },
+        {
+          name: '天津市',
+          value: 33
+        },
+        {
+          name: '上海市',
+          value: 69
+        },
+        {
+          name: '香港特别行政区',
+          value: 23
+        },
+        {
+          name: '澳门特别行政区',
+          value: 37
+        }
+      ]
+    }
+  },
+  props: {
+    data: {
+        type: Array,
+        default: () => []
+    }
+  },
+  mounted() {
+    let myChart = this.$echarts.init(document.getElementById('main'))
+    this.$echarts.registerMap('china', geoJson)
+    console.log(this.data, 'data')
+    let option = {
+      geo: {
+        map: 'china',
+        aspectScale: 0.75,
+        zoom: 1.1,
+        itemStyle: {
+          normal: {
+            areaColor: 'transparent',
+            borderColor: 'transparent',
+            borderWidth: 2,
+            shadowColor: 'rgba(63, 218, 255, 0.5)',
+            shadowBlur: 30
+          },
+          emphasis: {
+            areaColor: '#2B91B7'
+          }
+        }
+      },
+      visualMap: {
+        type: 'piecewise',
+        show: false,
+        pieces: [
+          {
+            max: 1,
+            label: '安全',
+            color: 'transparent',//'#56997A',//
+          },
+          {
+            min: 1,
+            max: 60,
+            label: '警告',
+            color: 'RGBA(247, 238, 167, .5)'
+          },
+          {
+            min: 60,
+            label: '危险',
+            color: 'RGBA(247, 238, 167, 1)'
+          }
+        ],
+        color: 'transparent',
+        textStyle: {
+          color: '#fff'
+        },
+        visibility: 'off'
+      },
+      series: [
+        {
+          type: 'map',
+          zoom: 1.2,
+          map: 'china',
+          data: this.data,
+          itemStyle: {
+            normal: {
+              show: true,
+              areaColor: 'transparent',
+              borderColor: 'transparent',
+              borderWidth: '1'
+            }
+          },
+          label: {
+            normal: {
+              show: false, //显示省份标签
+              textStyle: {
+                color: 'rgb(249, 249, 249)', //省份标签字体颜色
+                fontSize: 12
+              },
+              formatter: p => {
+                let val = p.value
+                if (window.isNaN(val)) {
+                  val = 0
+                }
+                //
+                switch (p.name) {
+                  case '内蒙古自治区':
+                    p.name = '内蒙古'
+                    break
+                  case '西藏自治区':
+                    p.name = '西藏'
+                    break
+                  case '新疆维吾尔自治区':
+                    p.name = '新疆'
+                    break
+                  case '宁夏回族自治区':
+                    p.name = '宁夏'
+                    break
+                  case '广西壮族自治区':
+                    p.name = '广西'
+                    break
+                  case '香港特别行政区':
+                    p.name = '香港'
+                    break
+                  case '澳门特别行政区':
+                    p.name = '澳门'
+                    break
+                  default:
+                  // code
+                }
+                if (p.name === '内蒙古自治区') {
+                  p.name = '内蒙古'
+                }
+                let txtCon = p.name
+                return txtCon
+              }
+            },
+            emphasis: {
+              //对应的鼠标悬浮效果
+              show: true,
+              textStyle: {
+                color: '#000'
+              }
+            }
+          }
+        }
+      ]
+    }
+    myChart.setOption(option)
+  }
+}
+</script>
+<style lang="scss">
+.map-view {
+  width: 100%;
+
+  #main {
+    width: 100%;
+    height: 600px;
+  }
+}
+</style>

src/components/page-slide/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <transition :name="directionName">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'PageSlide',
+  props: {
+    // 首页路由path
+    indexPagePath: {
+      type: String,
+      default: '/',
+      required: true
+    }
+  },
+  data() {
+    return {
+      directionName: '', // 页面切换方向：slide-left左滑前进、slide-right右滑后退
+      routeStack: [] // 存储路由栈
+    }
+  },
+  watch: {
+    $route(val) {
+      this.handleRouteChange(val)
+    }
+  },
+  created() {
+    this.routeStack = this.getSessionRouteStack() || [{ path: this.indexPagePath }]
+  },
+  methods: {
+    handleRouteChange(to) {
+      const len = this.routeStack.length
+      const currentRoute = this.routeStack[len - 1]
+      // 判断是否是刷新路由
+      if (currentRoute.path !== to.path) {
+        if (len === 1) {
+          // 初次打开非首页路由，前进
+          this.setPageForward(to)
+        } else {
+          // len > 1
+          const lastRoute = this.routeStack[len - 2]
+          if (lastRoute.path === to.path) {
+            // 打开上一页路由，后退
+            this.setPageBack(currentRoute)
+          } else if (to.path === this.indexPagePath) {
+            // 中途打开首页，后退，重置路由栈
+            this.setDirectionName('slide-right')
+            this.resetRouteStack()
+          } else {
+            // 常规情况，前进
+            this.setPageForward(to)
+          }
+        }
+      }
+    },
+    // 前进
+    setPageForward(route) {
+      this.setDirectionName('slide-left')
+      this.pushRouteStack(route)
+    },
+    // 后退
+    setPageBack() {
+      this.setDirectionName('slide-right')
+      this.popRouteStack()
+    },
+    // 设置页面方向
+    setDirectionName(name) {
+      this.directionName = name
+    },
+    // 重置
+    resetRouteStack() {
+      this.routeStack = [{ path: this.indexPagePath }]
+      this.setSessionRouteStack()
+    },
+    pushRouteStack(route) {
+      const { path } = route
+      this.routeStack.push({ path })
+      this.setSessionRouteStack()
+    },
+    popRouteStack() {
+      this.routeStack.pop()
+      this.setSessionRouteStack()
+    },
+    setSessionRouteStack() {
+      try {
+        sessionStorage.setItem('routeStack', JSON.stringify(this.routeStack))
+      } catch (error) {
+        console.warn('storage is not supported')
+      }
+    },
+    getSessionRouteStack() {
+      const str = sessionStorage.getItem('routeStack')
+      if (!str) {
+        return null
+      }
+      let val = []
+      try {
+        val = JSON.parse(str)
+      } catch (error) {
+        console.warn('parse routeStack wrong')
+      }
+      return val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  position: absolute;
+  width: 100%;
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.slide-left-enter,
+.slide-right-leave-active {
+  opacity: 0;
+  transform: translate(100%, 0);
+}
+.slide-left-leave-active,
+.slide-right-enter {
+  opacity: 0;
+  transform: translate(-100%, 0);
+}
+</style>

src/components/share/scren.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="content">
+    <div class="home-img">
+      <!-- <web-div class="relative z-0" :src="weburl" ></web-div> -->
+    </div>
+    <van-popup :show="show" mode="center" round @close="close" @open="open">
+        <div class="mySharepopup">
+          <div class="close" @click="close">
+            <img width="42px" height="42px" src="/static/img/icon_cancel@2x.png"></img>
+          </div>
+          <div class="text">
+              <img width="295px" height="450px" src="/static/img/img_cover@2x.jpg"></img>
+            <div class="flex justify-between shareImg">
+              <div class="code">
+                <img width="66px" height="66px" src="/static/img/icon_scan_active@2x.png"></img>
+              </div>
+              <div class="zz">
+                <img width="122px" height="113px" src="/static/img/insignia@2x.png"></img>
+              </div>
+            </div>
+          </div>
+          <div class="bottom">
+            <div class="text" style="width: 100%">              
+                <div mt-10>第<text >5462</text>位游客完成打卡</div>
+            </div>
+          </div>
+          <div class="butList flex justify-around my-10">
+            <!-- <div class="share">
+              <u-button :customStyle="{opacity: 0,width: '50px', height: '50px',}" type="primary" icon="share" plain text=" " open-type="share"></u-button>
+              <u-icon name="share" color="#2979ff" size="28"></u-icon>
+            </div> -->
+            <u-icon name="download" color="#2979ff" size="28"></u-icon>
+          </div>
+        </div>
+		</van-popup>
+  </div>
+</template>
+
+<script>
+// import uButton from "udiv-ui/components/u-button/u-button.vue";
+export default {
+  components: {
+    // uButton
+  },
+  data() {
+    return {
+      title: "Hello",
+      show: true,
+      weburl: "https://test.4dkankan.com/spg.html?m=KK-t-fs8TbMny2Zb&lang=zh"
+    };
+  },
+  onLoad() {},
+  methods: {
+    handleHome() {
+      console.log("开启云上观灯", uni);
+      uni.$u.route("/pages/home/home");
+    },
+    close() {
+      this.show = false
+      // console.log('close');
+    },
+    open() {
+
+    },
+    handleShare() {
+      uni.share({
+        provider: "weixin",
+        scene: "WXSceneTimeline",
+        type: 1,
+        summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
+        success: function (res) {
+          console.log("success:" + JSON.stringify(res));
+        },
+        fail: function (err) {
+          console.log("fail:" + JSON.stringify(err));
+        }
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.mySharepopup{
+  // width: 330px;
+  // height: 537px;
+  padding: 19px 17px 0px 17px;
+  .close{
+    position: absolute;
+    right: -20px;
+    top: -20px;
+    width: 42px;
+    height: 42px;
+  }
+  .butList{
+    position: absolute;
+    bottom: -80px;
+    left: calc(50% - 14px);
+    .share{
+      position: relative;
+      .u-icon{
+        position: absolute;
+        left: calc(50% - 14px);
+        top: calc(50% - 14px);
+      }
+    }
+  }
+  .text{
+    position: relative;
+    .shareImg{
+      width: 100%;
+      position: absolute;
+      bottom: -30px;
+    }
+  }
+  .bottom{
+    font-weight: 400;
+    height: 50px;
+    font-size: 16px;
+    color: #000000;
+    line-height: 19px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    position: relative;
+    bottom: -30px;
+    text {
+      font-size: 20px;
+      color: #B1967B;
+    }
+  }
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  width: 100%;
+  .urlContent{
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+  .right{
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+}
+
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin-top: 200rpx;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50rpx;
+}
+
+.text-area {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 50%;
+}
+
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
+.home-img{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  .share{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 30px;
+    border: 1px solid #2979ff;
+
+  }
+}
+.van-popup__content__close{
+  right: calc(50% - 4.5px) !important;
+  bottom: -40px !important;
+  z-index: 10;
+  border: 1px solid #fff;
+  border-radius: 20px;
+  padding: 5px;
+  color: #fff;
+  .u-icon__icon {
+     color: #fff !important;
+  }
+}
+</style>

src/components/tabbar/index.vue

@@ -0,0 +1,401 @@
+<template>
+  <div>
+    <div class="tabbar" :class="{dark: handleType}">
+      <div
+        class="tabbarItem"
+        @click="handleItem(item, index)"
+        :class="{ activeMenu: active == index }"
+        v-for="(item, index) in list"
+        :key="index"
+      >
+        <div :class="{ aotoImg: index == 2 }">
+          <img
+            :src="active == index ? item.active : handleType ? item.dark : item.light"
+            :width="index == 2 ? '50px' : '48px'"
+            :height="index == 2 ? '50px' : '48px'"
+          ></img>
+        </div>
+        <div class="hightImg" v-show="active == index">
+          <img
+            src="/static/img/icon_active@2x.png"
+            width="68px"
+            height="81px"
+          ></img>
+        </div>
+        <div class="tabbarItemText" :class="{ active: active == index }">{{
+          item.name
+        }}</div>
+      </div>
+    </div>
+    <van-popup
+      closeIconPos="bottom-right"
+      v-model="show"
+      position="center"
+      round
+      bgColor="transparent"
+      style="background: transparent"
+      @close="close"
+      @open="open"
+    >
+      <div class="codeData" ref="downDiv">
+        <div class="close" @click="close">
+          <img
+            width="42px"
+            height="42px"
+            src="/static/img/icon_cancel@2x.png"
+          ></img>
+        </div>
+        <div class="text">
+          <img
+            width="100%"
+            height="185px"
+            src="https://4dscene.4dage.com/new4dkk/v2/lang/images/solutions/government/survey1.png"
+          ></img>
+          <div class="text-center pt-20px pb-8px text-2xl">一花五叶</div>
+          <img
+            width="100%"
+            height="10px"
+            src="https://4dscene.4dage.com/new4dkk/deng/static/img/line@2x.png"
+          ></img>
+          <div class="codeDataText">
+            此灯组以禅宗“一花五叶”为主题，传承禅宗经典。您可欣赏花开五叶的意象，感受南宗禅衍化出临济、曹洞、法眼、沩仰和云门五家，发展壮大的辉煌历史，领悟慧能大师法脉的深邃智慧。
+          </div>
+          <div class="codeImg flex justify-end items-center">
+            <div class="qrcode" ref="qrCodeUrl1"></div>
+            <div class="qrcode" ref="qrCodeUrl2"></div>
+          </div>
+        </div>
+      </div>
+      <div class="codebutList">
+          <!-- <div class="downText" v-if="false">
+            <div class="img flex justify-center items-center">
+              <div style="width: 36px; height: 36px">
+                <img
+                width="36px"
+                height="36px"
+                src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_download@2x.png"
+              ></img>
+              </div>
+              <div class="pl-10">下载图片</div>
+            </div>
+            <div class="tips">完成6处打卡，即可点灯祈愿</div>
+          </div> -->
+          <div class="downButtom flex justify-center">
+            <div class="downButtomItem" @click="handleDown">下载图片</div>
+            <div class="downButtomItem" @click="handleqiyuan">去祈愿</div>
+          </div>
+        </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import QRCode from 'qrcodejs2'
+let wx = window.wx
+// import QiyanQrcode from '@/components/qiyan-qrcode/qiyan-qrcode.vue'
+// import uButton from "udiv-ui/components/u-button/u-button.vue";
+export default {
+  components: {
+    // QiyanQrcode
+  },
+  data() {
+    return {
+      show: false,
+      qrcode1: null,
+      qrcode2: null,
+      title1: '1.现在时间戳：' + Date.now(),
+      list: [
+        {
+          active: '/static/img/icon_home_active.png',
+          dark: '/static/img/icon_home_dark.png',
+          light: '/static/img/icon_home_light.png',
+          name: '首页',
+          path: '/home'
+        },
+        {
+          active: '/static/img/icon_scan_active@2x.png',
+          dark: '/static/img/icon_scan_dark@2x.png',
+          light: '/static/img/icon_scan_light@2x.png',
+          name: '扫码打卡'
+        },
+        {
+          active: '/static/img/icon_map_active@2x.png',
+          dark: '/static/img/icon_map_dark@2x.png',
+          light: '/static/img/icon_map_light@2x.png',
+          name: '地图',
+          path: '/map'
+        },
+        {
+          active: '/static/img/icon_ai_active@2x.png',
+          dark: '/static/img/icon_ai_dark@2x.png',
+          light: '/static/img/icon_ai_light@2x.png',
+          name: '妙笔生花',
+          path: '/composite'
+        },
+        {
+          active: '/static/img/icon_lotus_active@2x.png',
+          dark: '/static/img/icon_lotus_dark@2x.png',
+          light: '/static/img/icon_lotus_light@2x.png',
+          name: '点亮',
+          path: '/prayers/clocked'
+        },
+        // {
+        //   active: '/static/img/icon_user_active@2x.png',
+        //   dark: '/static/img/icon_user_dark@2x.png',
+        //   light: '/static/img/icon_user_light@2x.png',
+        //   name: '我的',
+        //   path: '/my'
+        // }
+      ],
+      title: 'Hello'
+    }
+  },
+  computed: {
+    ...mapState('home', ['active']),
+    handleType() {
+      return this.$route.name == 'PrayersClocked'? true : false
+    }
+  },
+  watch: {
+    $route(to, from) {
+      let path = to.path
+      console.log('handleItem', path)
+      this.list.map((item, index) => {
+        if (to.path == item.path) {
+          this.$store.commit('home/changeActive', index)
+        }
+      })
+    }
+  },
+  mounted() {
+    // let path = this.$route.path
+    // this.list.map((item, index) => {
+    //   if (path == item.path) {
+    //     console.log('path', path, item, index)
+    //     this.$store.commit('home/changeActive', index)
+    //   }
+    // })
+  },
+  methods: {
+    handleItem(item, index) {
+      console.log('handleItem', item, index)
+      let that = this
+      if (item.name == '扫码打卡') {
+        // 只允许通过相机扫码
+        // uni.scanCode({
+        //   onlyFromCamera: true,
+        //   success: function (res) {
+        //     console.log('条码类型：' + res.scanType)
+        //     console.log('条码内容：' + res.result)
+        // wx.miniProgram.postMessage({ data: { foo: 'scanCode', type: 'tabbar' } })
+        wx.miniProgram.navigateTo({
+          url: '/pages/my/index?scanCode=true'
+        })
+        // that.show = true
+        // that.$store.commit('home/changeActive', index)
+        // setTimeout(() => {
+        //   this.creatQrCode()
+        // }, 200)
+        //   },
+        //   fail: function (e) {
+        //     console.log('扫码失败', e)
+        //     that.show = true
+        //   }
+        // })
+        return
+      }else if (item.name == '我的') {
+        this.$store.commit('home/changeActive', 4)
+        wx.miniProgram.navigateTo({
+          url: '/pages/my/index',
+          active: 4
+        })
+        return
+      }
+      console.log('handleItem', item, index, this.active)
+      if(this.active == index) return
+      // that.$store.commit('home/changeActive', index)
+      if (item.path) {
+        this.$router.push(item.path)
+      }
+    },
+    handleHome() {
+      console.log('开启云上观灯', uni)
+      // uni.$u.route('/pages/home/home')
+    },
+    handleDown() {
+      this.$store.dispatch('home/saveImage', this.$refs.downDiv)
+    },
+    handleqiyuan() {
+      this.show = false
+      this.$router.push('/prayers/list')
+    },
+    close() {
+      console.log('close', this.qrcode1, this.qrcode2)
+      this.show = false
+      // console.log('close');
+    },
+    open() {},
+    creatQrCode() {
+      if (this.qrcode1) {
+        this.qrcode1 && this.qrcode1.clear() //清除二维码
+        this.qrcode2 && this.qrcode2.clear() //清除二维码
+        this.qrcode1.makeCode('xxxxx')
+        this.qrcode2.makeCode('ssssss')
+      } else {
+        this.qrcode1 = new QRCode(this.$refs.qrCodeUrl1, {
+          text: 'xxxx', // 需要转换为二维码的内容
+          width: 72,
+          height: 72,
+          colorDark: '#000000',
+          colorLight: '#ffffff',
+          correctLevel: QRCode.CorrectLevel.H
+        })
+        this.qrcode2 = new QRCode(this.$refs.qrCodeUrl2, {
+          text: 'xxxx', // 需要转换为二维码的内容
+          width: 72,
+          height: 72,
+          colorDark: '#000000',
+          colorLight: '#ffffff',
+          correctLevel: QRCode.CorrectLevel.H
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tabbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: fixed;
+  bottom: 0;
+  width: 100vw;
+  z-index: 1000;
+  height: 81px;
+  left: 0;
+  padding: -2px 0 16px 0;
+  background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/menu_light@2x.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  .tabbarbg {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .tabbarItem {
+    text-align: center;
+    width: 50px;
+    font-weight: 400;
+    font-size: 11px;
+    color: #303030;
+    line-height: 13px;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+    .hightImg {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      left: -10px;
+    }
+    .aotoImg {
+      position: relative;
+      top: -5px;
+    }
+  }
+}
+.dark {
+  background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/menu_dark@2x.png);
+  .tabbarItem{
+    color: #fff;
+  }
+}
+.codebutList {
+  text-align: center;
+  position: relative;
+  width: 100%;
+  // top: 76px;
+  .downText {
+    .img {
+      margin-right: 10px;
+      font-weight: 400;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 19px;
+      text-align: center;
+    }
+    .tips {
+      padding-top: 10px;
+      font-weight: 400;
+      font-size: 16px;
+      color: #a49d94;
+      line-height: 19px;
+      text-align: center;
+    }
+  }
+  .downButtom {
+    .downButtomItem {
+      width: 140px;
+      height: 42px;
+      background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/btn01@2x.png) 100% 100%
+        no-repeat;
+      background-size: cover;
+      font-weight: 400;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 19px;
+      font-style: normal;
+      margin: 0 5px;
+      line-height: 42px;
+      text-align: center;
+    }
+  }
+}
+.codeData {
+  // background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop2@2x.png) no-repeat cover;
+  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop2@2x.png) 100% 100% no-repeat;
+  background-size: 100% 100%;
+  width: calc(100vw - 108px);
+  height: 490px;
+  padding: 48px 52px 30px 36px;
+  position: relative;
+  .close {
+    position: absolute;
+    right: -0px;
+    top: -0px;
+    width: 42px;
+    height: 42px;
+  }
+  .text {
+    font-weight: 400;
+    font-size: 24px;
+    color: #d86332;
+    line-height: 29px;
+    position: relative;
+    padding-bottom: 72px;
+    .codeDataText {
+      padding: 8px 0 16px 0;
+      font-weight: 400;
+      font-size: 14px;
+      color: #b1967b;
+      line-height: 18px;
+      text-align: left;
+    }
+    .codeImg {
+      text-align: right;
+      width: 100%;
+      height: 72px;
+      // float: right;
+      .qrcode {
+        padding: 5px;
+        margin: 0 5px;
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Vant from 'vant';
+import router from './router';
+import store from './store';
+import App from './App.vue';
+import './static/styles/reset.css';
+import 'windi.css';
+import Swiper from 'swiper'
+import "swiper/css/swiper.css";
+import *as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+import { POST, GET } from './api/request';
+ // 引入图片预览插件
+import ViewPreview from 'vue2-preview';
+Vue.use(ViewPreview);
+Vue.prototype.postRequest = POST;
+Vue.prototype.getRequest = GET;
+Vue.config.productionTip = false;
+Vue.use(Vant);
+const app = new Vue({
+  render: (h) => h(App),
+  router,
+  store,
+});
+
+app.$mount('#app');

src/pages/base/login.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="content">
+    <!-- <img :showLoading="true" src="/static/img/img_cover@2x.jpg" width="100vw" height="100vh"></img> -->
+    <div class="fixed bottom-48 w-full text-center">
+      <!-- <div class="absolute" style="left: calc(50% - 112px); bottom: 100px">
+        <img src="/static/img/btn_enter@2x.png" width="224px" height="55px" />
+      </div> -->
+      <div class="butText text-center" @click="handleHome">开始云游</div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import uButton from "udiv-ui/components/u-button/u-button.vue";
+export default {
+  components: {
+    // uButton
+  },
+  data() {
+    return {
+      title: 'Hello'
+    }
+  },
+  onLoad() {},
+  methods: {
+    handleHome() {
+      console.log('开启云上观灯')
+      this.$router.push('/home')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  width: 100%;
+  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/img_cover@2x.jpg) 100% 100%
+    no-repeat;
+  background-size: 100% 100%;
+}
+
+.butText {
+  font-weight: 400;
+  font-size: 24px;
+  width: 225px;
+  height: 58px;
+  color: #ffffff;
+  line-height: 36px;
+  text-shadow: 0px 0px 8px #fff9b1, 0px 0px 27px #fff9b1, 0px 0px 4px #d86332;
+  font-style: normal;
+  text-transform: none;
+  position: absolute;
+  font-family: KingHwa_OldSong, KingHwa_OldSong;
+  font-weight: 400;
+  font-size: 24px;
+  color: #ffffff;
+  line-height: 36px;
+  text-shadow: 0px 0px 8px #fff9b1, 0px 0px 27px #fff9b1, 0px 0px 4px #d86332;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  left: calc(50% - 112px);
+  text-align: center;
+  line-height: 58px;
+  z-index: 10;
+  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/btn_enter@2x.png) 100% 100%
+    no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/pages/base/not-found.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="not_found_box">
+    <h1>not-found</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFound'
+}
+</script>
+
+<style scoped lang="scss"></style>

src/pages/composite/img.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="home">
+    <div
+      class="image-box dropContainer"
+      ref="maskBox"
+      @touchmove="touchmove"
+      @touchstart="touchstart"
+    >
+      <!-- @touchend="onmousedownHandle" -->
+      <img
+        id="Drop"
+        :src="src"
+        alt=""
+        :style="{
+          width: imgW + 'px',
+          height: 'auto',
+          top: top + 'px',
+          left: left + 'px',
+          transform: scale
+        }"
+      />
+    </div>
+    <img class="bgsrc" :src="bgsrc" alt="" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HomeView',
+  props: {
+    src: {
+      type: String,
+      default: 'https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png'
+    },
+    bgsrc: {
+      type: String,
+      default: 'https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png'
+    }
+  },
+  data() {
+    return {
+      imageUrl: 'https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png',
+      imgW: 0,
+      imgW: 0,
+      imgH: 0,
+      deg: 0,
+      top: 0,
+      left: 0,
+      scale: 'scale(1)',
+      myscale: 0,
+      size: 0,
+      // 位置差
+      disX: 0,
+      disY: 0,
+      DropEl: null,
+      dropContainer: null,
+      mousewheelevt: null
+    }
+  },
+  mounted() {
+    // 获取元素
+    let that = this
+    this.DropEl = document.getElementById('Drop')
+    this.dropContainer = document.getElementsByClassName('dropContainer')[0]
+    console.log(this.DropEl)
+    // this.imageUrl = this.imageUrl1
+    //初始化图片
+    this.initImage()
+    var container = this.DropEl
+    var startX, startY, myscale
+    var distanceStart, distanceEnd
+
+    container.addEventListener('touchstart', function (e) {
+      var touches = e.touches
+      if (touches.length == 2) {
+        // 双指触摸
+        startX = Math.abs(touches[0].pageX - touches[1].pageX)
+        startY = Math.abs(touches[0].pageY - touches[1].pageY)
+        distanceStart = Math.sqrt(startX * startX + startY * startY) // 计算两个触点之间的距离
+      }
+    })
+
+    container.addEventListener('touchmove', function (e) {
+      var touches = e.touches
+      if (touches.length == 2) {
+        // 双指触摸
+        var endX = Math.abs(touches[0].pageX - touches[1].pageX)
+        var endY = Math.abs(touches[0].pageY - touches[1].pageY)
+        distanceEnd = Math.sqrt(endX * endX + endY * endY) // 计算两个触点之间的距离
+        var distanceDiff = distanceEnd - distanceStart // 计算距离差值
+        console.log(distanceDiff, 'distanceDiff')
+        var scale = (distanceEnd / distanceStart)// 计算缩放比例
+        if(distanceDiff>0){
+          scale += that.myscale
+        }else{
+          // scale -= that.myscale
+        }
+        // + that.myscale
+        // 根据缩放比例来缩放图片或其他内容
+        myscale = scale
+        that.scale = 'scale(' + scale + ')'
+        container.style.transform = 'scale(' +  scale + ')'
+        console.log(scale, 'scale', that.myscale)
+      }
+    })
+    // container.addEventListener('touchend', function (e) {
+    //   this.myscale = myscale
+    //   console.log(myscale, 'mouseout', that.myscale)
+    // })
+    container.addEventListener('touchend', function (e) {
+      startX = null
+      startY = null
+      distanceStart = null
+      distanceEnd = null
+      that.myscale = myscale
+      console.log(myscale, 'mouseout', that.myscale)
+    })
+    // 兼容火狐浏览器
+    this.mousewheelevt = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel'
+    // 为空间区域绑定鼠标滚轮事件 =》 处理函数是wheelHandle
+    // 如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多
+    this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle, { passive: true })
+  },
+  beforeDestroy() {
+    //取消监听
+    this.$refs.maskBox.removeEventListener(this.mousewheelevt, this.wheelHandle, { passive: true })
+  },
+  methods: {
+    // 手指落下时触发
+    touchstart(event) {
+      // 1，计算位置差 因为clientX和offsetLeft的属性返回的位置不一样 要相减得到拖动元素内实际点击的位置
+      // pageX 永远大于等于 offsetLeft pageY也是同理
+      this.disX = event.targetTouches[0].pageX - this.DropEl.offsetLeft
+      this.disY = event.targetTouches[0].pageY - this.DropEl.offsetTop
+    },
+    // 手指移动时触发
+    touchmove(event) {
+      // 2，获取手指移动的实时位置  需要减去位置差
+      let moveX = event.targetTouches[0].pageX - this.disX
+      let moveY = event.targetTouches[0].pageY - this.disY
+
+      // 3，获取容器的宽高和拖动元素的宽高  每一次移动都会获取一次 ，建议放在外面进行获取
+      let dragHeight = this.DropEl.offsetHeight
+      let dragWidth = this.DropEl.offsetWidth
+      let dragContainerWidth = this.dropContainer.offsetWidth //获取容器的高度和宽度
+      let dragContainerHeight = this.dropContainer.offsetHeight
+
+      // 4，控制范围：在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
+      // if (moveX <= 0) {
+      //   moveX = 0;
+      // }
+      // // 上边界
+      // if (moveY <= 0) {
+      //   moveY = 0;
+      // }
+      //下边界  容器高度 - 拖动元素高度
+      // if (moveY >= dragContainerHeight - dragHeight) {
+      // moveY = dragContainerHeight - dragHeight;
+      // }
+      //右边界   容器宽度 - 拖动元素宽度
+      // if (moveX >= dragContainerWidth - dragWidth) {
+      // moveX = dragContainerWidth - dragWidth;
+      // }
+      // 5，开始移动
+      console.log(moveX, moveY, 'moveX, moveY')
+      this.left = moveX
+      this.top = moveY
+      // this.style.left = moveX + "px";
+      // this.style.top = moveY + "px";
+    },
+    /**
+     * 切换图片
+     *  flag: 1竖图 2 横图
+     */
+    switchImgHandle(flag) {
+      if (flag === 1) {
+        this.imageUrl = this.imageUrl1
+      } else {
+        this.imageUrl = this.imageUrl2
+      }
+      this.handleReset()
+    },
+    /**
+     * 获取图片的url
+     * @param {string} url
+     */
+    getImgSize(url) {
+      return new Promise((resolve, reject) => {
+        let imgObj = new Image()
+        imgObj.src = url
+        imgObj.onload = () => {
+          resolve({
+            width: imgObj.width,
+            height: imgObj.height
+          })
+        }
+      })
+    },
+    /**
+     * 初始化图片
+     */
+    async initImage() {
+      if (!this.imageUrl) {
+        return
+      }
+      let { width, height } = await this.getImgSize(this.imageUrl)
+      // 设置原始图片的大小
+      let realWidth = width
+      let realHeight = height
+
+      // 获取高宽比例
+      const whRatio = realWidth / realHeight
+      const hwRatio = realHeight / realWidth
+
+      //获取盒子的大小
+      const boxW = this.$refs.maskBox.clientWidth
+      const boxH = this.$refs.maskBox.clientHeight
+
+      if (realWidth >= realHeight) {
+        this.imgH = hwRatio * boxW
+        const nih = this.imgH
+        if (nih > boxH) {
+          this.imgH = boxH
+          this.imgW = whRatio * boxH
+        } else {
+          this.imgW = boxW
+        }
+        this.top = (boxH - this.imgH) / 2
+        this.left = (boxW - this.imgW) / 2
+      } else {
+        this.imgW = (boxH / realHeight) * realWidth
+        this.imgH = boxH
+        this.left = (boxW - this.imgW) / 2
+      }
+    },
+    /**
+     * 旋转
+     */
+    handleRotate() {
+      this.deg += 90
+      if (this.deg >= 360) {
+        this.deg = 0
+      }
+      this.size = 0
+      this.scale = `${this.scale} rotateZ(${this.deg}deg)`
+    },
+
+    /**
+     * 图片的缩放
+     *    zoom >0 放大
+     *    zoom <0 缩小
+     */
+    imgScaleHandle(zoom) {
+      this.size += zoom
+      if (this.size < -0.5) {
+        this.size = -0.5
+      }
+      this.scale = `scale(${1 + this.size}) rotateZ(${this.deg}deg)`
+    },
+
+    /**
+     * 重置
+     */
+    handleReset() {
+      this.imgW = 0
+      this.imgH = 0
+      this.top = 0
+      this.left = 0
+      this.deg = 0
+      this.scale = 'scale(1)'
+      this.size = 0
+      this.initImage()
+    },
+
+    /**
+     * 鼠标滚动 实现放大缩小
+     */
+    wheelHandle(e) {
+      const ev = e || window.event // 兼容性处理 => 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta
+      // dir = -dir; // dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120)
+      const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta
+      //滚动的数值 / 2000 => 表示滚动的比例，用此比例作为图片缩放的比例
+      this.imgScaleHandle(dir / 2000)
+    },
+
+    /**
+     * 处理图片拖动
+     */
+    onmousedownHandle(e) {
+      console.log('onmousedownHandle', e)
+      const that = this
+      this.$refs.maskBox.onmousemove = function (el) {
+        const ev = el || window.event // 阻止默认事件
+        ev.preventDefault()
+        that.left += ev.movementX
+        that.top += ev.movementY
+      }
+      this.$refs.maskBox.onmouseup = function () {
+        // 鼠标抬起时将操作区域的鼠标按下和抬起事件置为null 并初始化
+        that.$refs.maskBox.onmousemove = null
+        that.$refs.maskBox.onmouseup = null
+      }
+      if (e.preventDefault) {
+        e.preventDefault()
+      } else {
+        return false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.home {
+  width: 100vw;
+  margin: 50px auto;
+  position: relative;
+  height: 100%;
+}
+
+.bgsrc {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  pointer-events: none;
+  position: absolute;
+  z-index: 10;
+  left: calc(50% - 50vw);
+  top: calc(50% - 50vw - 115px);
+}
+.btn-area {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 50px;
+}
+.btn-area button {
+  width: 100px;
+  height: 40px;
+  font-size: 18px;
+  margin-right: 10px;
+}
+.image-box {
+  position: relative;
+  margin: 0 auto;
+  width: 100vw;
+  height: calc(100vh - 300px);
+  /* border: 1px solid #333; */
+  overflow: hidden;
+}
+.image-box img {
+  position: absolute;
+  cursor: pointer;
+}
+</style>
+

src/pages/composite/index.vue

@@ -0,0 +1,468 @@
+<template>
+  <div class="composite-page" :style="{ paddingTop: 0, backgroundImage: `url(${getImgUrl()})` }">
+    <div class="compositeImg" v-if="!imgUrl">
+      <van-uploader :after-read="afterRead" class="img-uploader" :max-count="1" v-model="fileList">
+        <img src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_upload.svg" alt="" />
+        <div>上传照片进行合成</div>
+        <span>请上传竖屏图片</span>
+      </van-uploader>
+      <img
+        class="bg"
+        style="top: -265px; right: -185px"
+        src="https://4dscene.4dage.com/new4dkk/deng/static/img/img_loading_active@2x.png"
+        alt=""
+      />
+      <img
+        class="bg"
+        style="bottom: -265px; left: -185px"
+        src="https://4dscene.4dage.com/new4dkk/deng/static/img/img_loading_active@2x.png"
+        alt=""
+      />
+    </div>
+    <div class="compositeImg showimg1" v-else ref="downDiv">
+      <myImg :src="imgUrl" :bgsrc="activeImg" />
+      <div v-if="imgUrl && !showShare" class="bit2 mybut" @click="handleSavaimg">
+        <!-- <img style="margin: 0; height: 24px; width: 24px" src="/static/img/dowm.png" alt="" /> -->
+        查看图片
+      </div>
+      <!-- <div class="scz"><van-icon name="photo-o" size="26" style="margin-right: 11px" />照片合成中...</div> -->
+      <!-- <div class="result">
+        <div class="butlist flex justify-between">
+          <div class="bit2">
+            下载图片
+          </div>
+        </div>
+      </div> -->
+    </div>
+    <div class="list">
+      <div class="mbl"></div>
+      <div class="title" :style="{ color: imgUrl ? '#fff' : '#303030' }">请选择艺术风格</div>
+      <div class="listcontent">
+        <div
+          class="listItem" :style="{ backgroundImage: `url(${imgUrl})` }"
+          v-for="(item, index) in list"
+          :class="{ active: active == index }"
+          @click="handleacibe(item, index)"
+          :key="index"
+        >
+          <img :src="item.img" alt="" />
+          <!-- <div>{{ item.name }}</div> -->
+        </div>
+      </div>
+    </div>
+    <van-image-preview
+      ref="downDiv"
+      v-model="show"
+      :images="fileList.map(ele => ele.src)"
+      :maxZoom="10"
+      :minZoom="0.1"
+      @change="onChange"
+    >
+      <template v-slot:index>第{{ index }}页</template>
+    </van-image-preview>
+    <van-popup
+      closeIconPos="bottom-right"
+      v-model="shareImg"
+      position="center"
+      bgColor="transparent"
+      style="background: transparent"
+      @close="shareImg = false;showShare = false;"
+    >
+      <div style="width: calc(100vw - 40px)">
+        <img style="width: 100%" :src="img" alt="">
+        <div class="pl-10px tips" style="    text-align: center;
+    color: #fff;
+    margin-top: 10px">长按保存图片</div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import Cropp from 'vue-cropp'
+import { toast, alert, confirm, notify } from '@/utils/toast'
+import Loading from '@/utils/loading'
+import myImg from './img.vue'
+import axios from 'axios'
+import { ImagePreview } from 'vant'
+export default {
+  name: 'Login',
+  components: {
+    Cropp,
+    myImg
+  },
+  data() {
+    return {
+      active: 0,
+      activeImg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/03@2x.png',
+      show: false,
+      shareImg: false,
+      showShare: false,
+      imgUrl: '',
+      fileList: [],
+      imgs: [
+        {
+          src: 'https://4dscene.4dage.com/new4dkk/deng/static/img/homeBg.jpg',
+          w: 375,
+          h: 250
+        }
+      ],
+      list: [
+        {
+          name: '黑白',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/03@2x.png'
+        },
+        {
+          name: '黑白',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/01@2x.png'
+        },
+        {
+          name: '黑白',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/02@2x.png'
+        },
+        {
+          name: '黑白',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/04@2x.png'
+        },
+        {
+          name: '黑白',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/05@2x.png'
+        },
+        {
+          name: '黑白',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/06@2x.png'
+        }
+      ]
+    }
+  },
+  mounted() {
+    // ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']);
+    this.handleVueX()
+    this.handleMapState()
+    this.handleMapGetters()
+  },
+  computed: {
+    ...mapState(['base']),
+    ...mapState('home', ['img'])
+  },
+  methods: {
+    getImgUrl() {
+      return 'https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png'
+    },
+    showLoading() {
+      Loading.show()
+      setTimeout(() => {
+        Loading.hide()
+      }, 3000)
+    },
+    afterRead(file) {
+      // 此时可以自行将文件上传至服务器
+      console.log(file)
+      let that = this
+      let imgFile = new FormData()
+      imgFile.append('type', 'img')
+      imgFile.append('file', this.fileList[0].file)
+      let headers = {
+        'Content-Type': 'multipart/form-data',
+        'Access-Control-Allow-Credentials': true,
+        token: localStorage.getItem('token')
+      }
+      axios
+        .post('https://sit-nanhuacs.4dage.com/api/wx/upload', imgFile, { headers })
+        .then(res => {
+          file.src = 'https://sit-nanhuacs.4dage.com' + res.data.data.filePath
+          that.imgUrl = 'https://sit-nanhuacs.4dage.com' + res.data.data.filePath
+        })
+        .catch(() => {})
+      // this.postRequest('/api/wx/upload', imgFile, {header}).then(r => {
+      //     if (r.data.success) {
+      //       this.imgKey.push(r.data.data.key)
+      //     }
+      //   })
+    },
+    // toast
+    onChange(index) {
+      console.log(index)
+    },
+    onChange(index) {
+      console.log(index)
+    },
+    handleToast(type) {
+      toast('这是Toast提示', type)
+    },
+    // alert
+    handleAlert() {
+      alert('确认删除吗？')
+        .then(() => {
+          toast('你点了确认')
+        })
+        .catch(() => {
+          toast('你点了关闭')
+        })
+    },
+    // confirm
+    handleConfirm() {
+      confirm('是否确认删除？')
+        .then(() => {
+          toast('你点了确认')
+        })
+        .catch(() => {
+          toast('你点了取消')
+        })
+    },
+    // notify
+    handleNotify() {
+      notify('通知通知通知', 0)
+    },
+    // 新开页面
+    openHomePage() {
+      const path = this.$router.resolve({
+        name: 'Home',
+        query: {
+          id: '123'
+        }
+      })
+      window.open(path.href, '_blank')
+    },
+    // 去登陆页
+    toHmoe() {
+      this.$router.push({
+        name: 'Login',
+        query: {
+          id: '123',
+          type: 'edit'
+        }
+      })
+    },
+    // 使用vuex读取state
+    handleVueX() {
+      console.log(this.$store.state.base.b)
+    },
+    // 使用mapState映射vuex
+    handleMapState() {
+      console.log(this.base.b)
+    },
+    // 使用mapGetters映射getters
+    handleMapGetters() {
+      console.log(this.getB)
+    },
+    handleacibe(item, index) {
+      this.active = index
+      this.activeImg = item.img
+    },
+    handleSavaimg() {
+      let that = this
+      console.log('base64', this.$refs.downDiv)
+      this.showShare = true
+      if(!this.$refs.downDiv) return
+      this.$store.commit('home/setImg', null)
+      this.$nextTick(() => {
+        console.log('DOM updated!')
+        // 在 DOM 更新后执行的回调函数
+        setTimeout(() => {
+          that.shareImg = true
+          that.$store.dispatch('home/saveImage', that.$refs.downDiv)
+        }, 1000)
+        // this.$store.dispatch('home/saveImage', this.$refs.downDiv)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.composite-page {
+  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png);
+  background-size: cover;
+  height: 100%;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  padding-top: 46px;
+  .showimg1 {
+    background: rgba(39, 26, 12, 0.5);
+    border-radius: 0px 0px 0px 0px;
+    backdrop-filter: blur(5px);
+    top: -4px;
+  }
+  .compositeImg {
+    // overflow-x: hidden;
+    text-align: center;
+    position: relative;
+    height: calc(100% - 209px);
+    .mybut {
+      position: absolute;
+      bottom: 0;
+      right: 6.4vw;
+      z-index: 10;
+      /* margin: 0 auto; */
+      width: 100px;
+      left: calc(50% - 50px);
+      height: 42px;
+          width: 124px;
+          line-height: 42px;
+          background: rgba(187, 171, 146, 0.8);
+          border-radius: 38px 38px 38px 38px;
+          border: 1px solid #fff9b1;
+          color: #5b472e;
+    }
+    .scz {
+      width: 217px;
+      height: 65px;
+      line-height: 65px;
+      text-align: center;
+      background: rgba(187, 171, 146, 0.8);
+      border-radius: 38px 38px 38px 38px;
+      position: absolute;
+      left: calc(50% - 108px);
+      top: calc(50% - 32px);
+    }
+    .result {
+      width: 256px;
+      height: 423px;
+      margin: 0 auto;
+      position: relative;
+      top: 69px;
+      // position: relative;
+      // left: calc(50% - 128px);
+      .img {
+        width: 248px;
+        height: 300px;
+        background: #ffffff;
+        padding: 13px 9px 46px 9px;
+        border-radius: 0px 0px 0px 0px;
+        img {
+          width: 248px;
+          height: 100%;
+          object-fit: cover;
+          margin: 0;
+        }
+      }
+      .butlist {
+        margin-top: 19px;
+        width: 270px;
+        // padding: 0 9px;
+        .bit1 {
+          height: 42px;
+          width: 124px;
+          line-height: 42px;
+          background: rgba(33, 28, 21, 0.6);
+          border-radius: 38px 38px 38px 38px;
+          border: 1px solid #bbab92;
+          color: #e3c991;
+        }
+        .bit2 {
+          height: 42px;
+          width: 124px;
+          line-height: 42px;
+          background: rgba(187, 171, 146, 0.8);
+          border-radius: 38px 38px 38px 38px;
+          border: 1px solid #fff9b1;
+          color: #5b472e;
+        }
+      }
+    }
+    .bg {
+      position: absolute;
+      width: 370px;
+      height: auto;
+      cursor: none;
+      pointer-events: none;
+      opacity: 0.15;
+    }
+    img {
+      width: 54px;
+      height: 54px;
+      object-fit: cover;
+      margin-top: 50%;
+    }
+    div {
+      margin: 4px 0;
+      font-weight: 400;
+      font-size: 16px;
+      color: #303030;
+      line-height: 19px;
+      text-align: center;
+    }
+    span {
+      font-weight: 400;
+      font-size: 14px;
+      color: #b1967b;
+      line-height: 16px;
+    }
+  }
+  .list {
+    padding: 11px 0 22px 0;
+    border-top: 1px solid #ffffff;
+    position: relative;
+    .mbl {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      background: rgba(203, 202, 186, 0.4);
+      box-shadow: inset 0px 8px 7px 0px rgba(255, 255, 255, 0.25);
+      z-index: 0;
+    }
+    .title {
+      position: relative;
+      z-index: 1;
+      font-weight: 400;
+      font-size: 14px;
+      color: #303030;
+      line-height: 16px;
+      margin-bottom: 14px;
+      padding: 0 14px;
+    }
+    .listcontent {
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      position: relative;
+      z-index: 1;
+      padding: 0 14px;
+      display: flex;
+      width: calc(100% - 28px);
+      overflow-x: scroll;
+      overflow-y: hidden;
+      .listItem {
+        font-weight: 400;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 14px;
+        text-align: center;
+        height: 136px;
+        width: 96px;
+        margin-right: 10px;
+        position: relative;
+        background-size: 100%;
+        background-repeat: no-repeat;
+        img {
+          height: 136px;
+          width: 96px;
+          object-fit: cover;
+        }
+        div {
+          position: absolute;
+          bottom: 10px;
+          width: 100%;
+          text-align: center;
+          color: #fff;
+          z-index: 1;
+        }
+      }
+
+      .active {
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+        box-shadow: 0px 0px 17px 0px #fff9b1;
+        border-radius: 0px 0px 0px 0px;
+        border: 2px solid #e3c991;
+      }
+    }
+  }
+  
+  .bit2 {
+        }
+}
+</style>

src/pages/demo/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="login_box">
+    <van-button type="info" @click="handleToast(0)">普通Toast</van-button>
+    <van-button type="success" @click="handleToast(1)">成功Toast</van-button>
+    <van-button type="danger" @click="handleToast(2)">失败Toast</van-button>
+    <van-button type="danger" @click="showLoading">Loading</van-button>
+    <br />
+    <van-button plain @click="handleAlert">Alert</van-button>
+    <van-button type="primary" plain @click="handleConfirm">Confirm</van-button>
+    <van-button type="success" plain @click="handleNotify">Notify</van-button>
+    <van-button type="info" plain @click="openHomePage">打开首页</van-button>
+    <br />
+    <h1>{{ getB }}</h1>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import { toast, alert, confirm, notify } from '@/utils/toast'
+import Loading from '@/utils/loading'
+
+export default {
+  name: 'Login',
+  mounted() {
+    this.handleVueX()
+    this.handleMapState()
+    this.handleMapGetters()
+  },
+  computed: {
+    ...mapState(['base']),
+    ...mapGetters('base', ['getB'])
+  },
+  methods: {
+    showLoading() {
+      Loading.show()
+      setTimeout(() => {
+        Loading.hide()
+      }, 3000)
+    },
+    // toast
+    handleToast(type) {
+      toast('这是Toast提示', type)
+    },
+    // alert
+    handleAlert() {
+      alert('确认删除吗？')
+        .then(() => {
+          toast('你点了确认')
+        })
+        .catch(() => {
+          toast('你点了关闭')
+        })
+    },
+    // confirm
+    handleConfirm() {
+      confirm('是否确认删除？')
+        .then(() => {
+          toast('你点了确认')
+        })
+        .catch(() => {
+          toast('你点了取消')
+        })
+    },
+    // notify
+    handleNotify() {
+      notify('通知通知通知', 0)
+    },
+    // 新开页面
+    openHomePage() {
+      const path = this.$router.resolve({
+        name: 'Home',
+        query: {
+          id: '123'
+        }
+      })
+      window.open(path.href, '_blank')
+    },
+    // 去登陆页
+    toHmoe() {
+      this.$router.push({
+        name: 'Login',
+        query: {
+          id: '123',
+          type: 'edit'
+        }
+      })
+    },
+    // 使用vuex读取state
+    handleVueX() {
+      console.log(this.$store.state.base.b)
+    },
+    // 使用mapState映射vuex
+    handleMapState() {
+      console.log(this.base.b)
+    },
+    // 使用mapGetters映射getters
+    handleMapGetters() {
+      console.log(this.getB)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.login_box {
+  padding: 20px;
+}
+</style>

src/pages/home/index.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="content">
+    <div class="home-img" id="home-img">
+      <div class="homeBg">
+          <div class="list">
+            <div
+              class="itme"
+              :class="{ active: item.id == active }"
+              v-for="item in list"
+              :style="item.style"
+              :key="item.id"
+              @click.stop="handleItem(item)"
+            >
+              <div class="itmeText">{{ item.title }}</div>
+              <div class="mypopup" :style="{top: item.title == '宝林道场'?'125px':''}">
+                <div class="popupImg">
+                  <div class="but" v-if="!codeList.includes(item.m)" @click="handleDaka(item)">可打卡</div>
+                  <img
+                    width="209px"
+                    height="131px"
+                    radius="10"
+                    :src="'https://4dscene.4dage.com/new4dkk/deng/static/img/m/cjms.jpg'||item.img"
+                  ></img>
+                  <div class="title">{{ item.title }}</div>
+                </div>
+                <div
+                  class="flex justify-evenly butList content-center items-center"
+                  style="line-height: 24px; color: #fff"
+                >
+                  <div class="flex justify-around content-center  items-center" @click="handleRoam">
+                    <img src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_3d@2x.png" />
+                    漫游
+                  </div>
+                  <!-- <div class="border"></div>
+                  <div class="flex justify-around content-center  items-center">
+                    <img src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_navigator@2x.png" />
+                    导航
+                  </div> -->
+                </div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+    <tabbar />
+    <!-- <div class="fixed bottom-40 flex w-full justify-around" style="">
+      <div class="text-center">
+        点亮祈福
+        <u-icon
+          class="text-center flex-col-reverse"
+          name="scan"
+          color="#2979ff"
+          size="28"
+        ></u-icon>
+      </div>
+
+      <div class="text-center">
+        扫码打卡
+        <u-icon
+          class="text-center flex-col-reverse"
+          name="scan"
+          color="#2979ff"
+          size="28"
+        ></u-icon>
+      </div>
+    </div> -->
+    <!-- <tabbar></tabbar> -->
+    <!-- <van-popup
+      closeIconPos="bottom-right"
+      :show="show"
+      mode="center"
+      round="10"
+      :closeable="true"
+      @close="close"
+      @open="open"
+    >
+      <div>
+        <div class="text">
+          <img
+            src="https://4dscene.4dage.com/new4dkk/v2/lang/images/solutions/government/survey1.png"
+          ></img>
+          <text mt-10>出淤泥而不染，濯清涟而不妖</text>
+        </div>
+        <div class="butList flex justify-around my-10">
+          <u-button
+            @click="handleRoam"
+            style="width: 60px"
+            type="primary"
+            plain
+            icon="car"
+            size="small"
+            shape="circle"
+            text="漫游"
+          ></u-button>
+          <u-button
+            @click="handleMap"
+            style="width: 60px"
+            type="primary"
+            plain
+            icon="map"
+            size="small"
+            shape="circle"
+            text="祈愿地图"
+          ></u-button>
+          <u-button
+            style="width: 60px"
+            type="primary"
+            plain
+            icon="map"
+            size="small"
+            shape="circle"
+            text="导航"
+          ></u-button>
+        </div>
+      </div>
+    </van-popup> -->
+  </div>
+</template>
+
+<script>
+import tabbar from "@/components/tabbar/index.vue";
+import { Toast } from 'vant';
+export default {
+  components: {
+    tabbar,
+  },
+  data() {
+    return {
+      title: 'Hello',
+      show: false,
+      codeList: [],
+      active: null,
+      list: [
+        {
+          id: 1,
+          title: '大雄宝殿',
+          m: 'SG-PHP2F5mD35e',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/02.png',
+          style: {
+            left: '315px',
+            top: '326px',
+          }
+        },{
+          id: 8,
+          title: '灵照塔',
+          m: 'SG-PHP2F5mD35e',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/02.png',
+          style: {
+            left: '373px',
+            top: '260px',
+          }
+        },
+        {
+          id: 2,
+          title: '宝林道场',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/01.png',
+          m: 'SG-OMcbiNUQwPE',
+          style: {
+            left: '355px',
+            top: '114px'
+          }
+        },
+        {
+          id: 3,
+          title: '琉璃光如来',
+          m: 'SG-E3S63H7X7QI',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/03.png',
+          style: {
+            left: '317px',
+            top: '570px'
+          }
+        },
+        {
+          id: 4,
+          title: '祈福长廊',
+          m: 'SG-7uj9R1IZNsp',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/05.png',
+          style: {
+            left: '354px',
+            top: '660px'
+          }
+        },
+        {
+          id: 5,
+          title: '典藏罗汉像',
+          m: 'SG-zlWvkf1WATJ',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/06.png',
+          style: {
+            left: '349px',
+            top: '455px'
+          }
+        },
+        // {
+        //   id: 6,
+        //   title: '宝林道场',
+        //   img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/07.png',
+        //   m: 'SG-QHk73u8zRxD',
+        //   style: {}
+        // },
+        {
+          id: 7,
+          title: '文化长廊',
+          m: 'SG-w51bY2f2Ojj',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/11.png',
+          style: {
+            left: '531px',
+            top: '467px',
+          }
+        },
+        {
+          id: 9,
+          title: '一花五叶',
+          m: 'SG-w51bY2f2Ojj',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/11.png',
+          style: {    
+            left: '353px',
+            top: '798px'
+          }
+        },
+        {
+          id: 10,
+          title: '智药三藏寻源',
+          m: 'SG-w51bY2f2Ojj',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/11.png',
+          style: {    
+            left: '323px',
+            top: '750px'
+          }
+        },
+      ]
+    }
+  },
+  onLoad() {},
+  created() {
+    this.getRequest('/api/wx/getCode').then((res) => {
+      this.codeList = res.data || []
+    })
+  },
+  mounted() {
+    // document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置
+    document.getElementById('home-img').scrollLeft=150;//通过scrollTop设置滚动到200位置
+  },
+  methods: {
+    handleMap() {
+      // uni.$u.route("/pages/home/map");
+    },
+    handleRoam() {
+      Toast('功能开发中~');
+      // uni.$u.route("/pages/home/roam");
+    },
+    handleItem(item) {
+      // Toast('功能开发中~');
+      this.active = item.id
+    },
+    close() {
+      this.show = false
+      // console.log('close');
+    },
+    open() {},
+    handleDaka(param) {
+      this.getRequest('/api/wx/clockIn', {code: param.m}).then((res) => {
+        Toast('打卡成功');
+        this.codeList.push(param.m)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+.home-img {
+  width: 100vw;
+  height: 859px;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  // position: absolute;
+  // left: 0;
+  // right: 0;
+  // top: 0;
+  // bottom: 0;
+  .homeBg {
+    width: 200.33333vw;
+    background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/homeBg.jpg);
+    background-size: 826px 859px;
+    height: 223.33333vw;
+    background-repeat: no-repeat;
+    position: relative;
+    .list {
+      width: 100%;
+      height: 100%;
+      .itme {
+        background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/tab_normal@2x.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        // border-radius: 50%;
+        text-align: center;
+        line-height: 30px;
+        width: 27px;
+        height: 108px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #fff;
+        // color: #5B472E;
+        line-height: 17px;
+        text-align: center;
+        // letter-spacing: 10px;
+        // vertical-align: middle;
+        .bg {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          z-index: -1;
+        }
+        .itmeText {
+          writing-mode: vertical-rl;
+          position: relative;
+          left: 5px;
+          top: 22px;
+          // letter-spacing: normal;
+          // display: table-cell;
+          // vertical-align: middle;
+        }
+        .mypopup {
+          display: none;
+          width: 230px;
+          height: 162px;
+          position: absolute;
+          bottom: 108px;
+          background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop3@2x.png) 100% 100% no-repeat;
+          background-size: 100%;
+          // background: linear-gradient(158deg, rgba(193, 149, 97, 0.85) 0%, #5b472e 100%);
+          // border: 1px solid;
+          left: -95px;
+          border-radius: 15px;
+          z-index: 10;
+          .popupImg {
+            letter-spacing: 0;
+            width: 209px;
+            height: 131px;
+            margin: 0 auto;
+            position: relative;
+            top: -10px;
+            border-radius: 10px;
+            overflow: hidden;
+            .title {
+              font-weight: bold;
+              font-size: 14px;
+              color: #ffffff;
+              line-height: 16px;
+              text-align: center;
+              position: absolute;
+              bottom: 10px;
+              left: 20px;
+            }
+            img {
+              width: 100%;
+              height: 131px;
+              object-fit: cover;
+              border-radius: 10px;
+            }
+            .but {
+              width: 63px;
+              height: 25px;
+              position: absolute;
+              right: 10px;
+              top: 10px;
+              border-radius: 20px 20px 20px 20px;
+              border: 1px solid #fff9b6;
+              text-align: center;
+              color: #fff9b6;
+              line-height: 25px;
+              font-weight: 400;
+              font-size: 12px;
+              color: #fff9b6;
+              z-index: 1;
+            }
+          }
+          .butList {
+            .border {
+              width: 1px;
+              height: 26px;
+              border-radius: 0px 0px 0px 0px;
+              border-left: 1px solid;
+              border-image: linear-gradient(
+                  180deg,
+                  rgba(255, 255, 255, 0),
+                  rgba(255, 255, 255, 1),
+                  rgba(255, 255, 255, 0)
+                )
+                1 1;
+            }
+            img {
+              width: 24px;
+              height: 24px;
+            }
+          }
+        }
+      }
+      .active {
+        background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/tab_active@2x.png);
+        color: #5b472e;
+        .mypopup {
+          display: block;
+        }
+      }
+    }
+    .img {
+      height: calc(100vh - 81px);
+      position: relative;
+      z-index: -1;
+      overflow-x: auto;
+      width: 700px;
+      img {
+        height: 100%;
+        position: relative;
+        z-index: -1;
+      }
+    }
+  }
+}
+</style>

src/pages/home/map.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="homeMap">
+    <div class="map">
+      <div :scroll-x="true" class="scrolldiv-box">
+        <div class="chinaMap" v-show="show">
+          <echarsMap :data="province" v-if="province.length"></echarsMap>
+        </div>
+        <div class="allMap" v-show="!show">
+          <div class="goChina" @click="show = !show"></div>
+        </div>
+      </div>
+    </div>
+    <div class="people">
+      <img
+        height="30px"
+        width="30px"
+        mode="heightFix"
+        src="/static/img/icon_lotus_dark@2x.png"
+      ></img>
+      <span class="peopleNum">祈愿人数</span>
+      <span class="peopleNum">{{ people }}</span>
+    </div>
+    <div class="bottom flex justify-between items-end">
+      <div class="list">
+        <div class="listItem" v-for="item in list" :key="item.id">
+          {{item.creatorName}}
+          <span style="color: #7EE3DE">【{{item.province}}】</span>
+          {{item.name}}
+        </div>
+      </div>
+      <div class="qiyuan" @click="handleqiyuan">
+        <img
+              height="70px"
+              width="70px"
+              mode="heightFix"
+              src="/static/img/btn_wish@2x.png"
+            ></img>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarsMap from '@/components/echars/index.vue'
+export default {
+  components: {
+    echarsMap
+  },
+  data() {
+    return {
+      show: false,
+      people: 0,
+      province: [],
+      list: []
+    }
+  },
+  onReady() {},
+  created() {
+    this.getRequest('/api/show/pray/getList').then(res => {
+      console.log(res, 'getList')
+      this.list = res.data
+    })
+    this.getRequest('/api/show/pray/count').then(res => {
+      console.log(res, 'getList')
+      this.people = res.data.total
+      let province = []
+      for (let key of Object.keys(res.data.province)) {  
+        console.log(key); // 'a', 'b', 'c'  
+        province.push({
+          name: key,
+          value: res.data.province[key]
+        })
+      }
+      this.province = province
+    })
+  },
+  methods: {
+    handleHome() {
+      // console.log('开启云上观灯', uni)
+      // uni.$u.route('/pages/home/home')
+    },
+    handleqiyuan() {
+      this.show = false
+      this.$router.push('/prayers/list')
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.homeMap {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/bg03@2x.png) 100% 100% no-repeat;
+  background-size: cover;
+  .bottom {
+    width: calc(100% - 47px);
+    position: absolute;
+    bottom: 50px;
+    left: 0;
+    height: 25vh;
+    padding: 0 27px 0 20px;
+    .list {
+      .listItem {
+        padding: 6px 10px;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 50px;
+        margin-top: 10px;
+        font-weight: 400;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 14px;
+        text-align: center;
+        font-style: normal;
+      }
+    }
+  }
+  .people {
+    position: absolute;
+    height: 35px;
+    padding: 0 5px;
+    background: rgba(0, 0, 0, 0.5);
+    right: 0;
+    top: 125px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px 0 0 20px;
+    .peopleNum {
+      font-size: 24rpx;
+      color: #fff;
+      margin-right: 8px;
+    }
+  }
+  .map {
+    width: 100%;
+    height: 100%;
+    .scrolldiv-box {
+      white-space: nowrap; // 滚动必须加的属性
+      width: 100%;
+      height: 100%;
+    }
+    .chinaMap {
+      overflow: hidden;
+      width: 100vw;
+      height: 100%;
+      background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/chinaMap.jpg) 100% 100%
+        no-repeat;
+      // background-position: 20px 34px;
+      background-size: 100%;
+      background-position: 2px 11px;
+    }
+    .allMap {
+      width: 375px;
+      height: calc(100vh - 358px);
+      background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/map@2x.png) 100% 55%
+        no-repeat;
+      background-position-y: 47px;
+      background-position-x: -231px;
+      // background-size: 100vh 1097px;
+      // background-size: cover;
+      background-size: 183vw auto;
+      position: relative;
+      // background-position: -1758px -600px;
+      .goChina {
+        width: 100px;
+        height: 100px;
+        position: absolute;
+        left: 240px;
+        top: 236px;
+      }
+    }
+  }
+}
+</style>

src/pages/prayers/clocked.vue

@@ -0,0 +1,598 @@
+<template>
+  <div class="clockedPage">
+    <div class="clocked" v-if="!checkLight">
+      <div class="tips" style="padding-top: 138px;">
+      完成至少6处扫码打卡
+    </div>
+    <div class="xzlp">
+      <div class="list">
+        <div class="item" v-for="(item, index) in list" v-show="index<codeList.length" :key="index" :class="item.class" @click="handleItem(item)">
+          <img class="itemImg" :src="item.img" alt="">
+        </div>
+      </div>
+    </div>
+    </div>
+    <div class="deng" v-else>
+    <div class="dengList" @click="showlist = false">
+      <div class="showinfo">
+        <div class="dengimg">
+          <!-- <div class="page">
+            <div class="pageIcon" @click.stop="handleNext(true)">
+              <van-icon name="arrow-left" size="48px" />
+            </div>
+            <div class="pageIcon" @click.stop="handleNext(false)">
+              <van-icon name="arrow" size="48px" />
+            </div>
+          </div> -->
+          <img class="hua" :src="active.bgimg" alt="">
+        </div>
+        <div class="title">{{active.name}}</div>
+        <div class="text">{{active.text}}</div>
+        <div class="downButtomItem" @click.stop="handleShare">分享</div>
+        <div class="tips" style="font-size: 12px">您已完成祈愿，请明天再来</div>
+      </div>
+    </div>
+    </div>
+    <!-- <van-popup
+      closeIconPos="bottom-right"
+      v-model="showlist"
+      position="center"
+      round
+      bgColor="transparent"
+      style="background: transparent"
+      @close="close"
+      @open="open"
+    >
+    <div class="dengList" @click="showlist = false">
+      <div class="showinfo" v-if="active">
+        <div class="dengimg">
+          <div class="page">
+            <div class="pageIcon" @click.stop="handleNext(true)">
+              <van-icon name="arrow-left" size="48px" />
+            </div>
+            <div class="pageIcon" @click.stop="handleNext(false)">
+              <van-icon name="arrow" size="48px" />
+            </div>
+          </div>
+          <img class="hua" :src="active.bgimg" alt="">
+        </div>
+        <div class="title">{{active.name}}</div>
+        <div class="text">{{active.text}}</div>
+        <div class="downButtomItem" @click.stop="handleShare">分享</div>
+        <div class="tips" style="font-size: 12px">您已完成祈愿，请明天再来</div>
+      </div>
+    </div>
+    </van-popup> -->
+    <van-popup
+      closeIconPos="bottom-right"
+      v-model="showShare"
+      position="center"
+      round
+      bgColor="transparent"
+      style="background: transparent"
+      @close="close"
+      @open="open"
+    >
+      <div class="sharePop" ref="downDiv">
+        <div class="codeData">
+          <img :src="img" class="showImgbase64" alt="">
+        <div class="close" @click="showShare = false">
+          <img
+            width="42px"
+            height="42px"
+            src="/static/img/icon_cancel@2x.png"
+          ></img>
+        </div>
+        <img class="huaimg" :src="active && active.img" alt="">
+        <div class="text">
+          <div class="textContent">
+            <div class="title">{{active && active.name}}</div>
+            <div class="textlist" >{{active && active.text}}</div>
+          </div>
+          <div class="codeImg flex justify-end items-center">
+            <div class="qrcode" ref="qrCodeUrl1"></div>
+            <div class="qrcode" ref="qrCodeUrl2"></div>
+          </div>
+        </div>
+      </div>
+      <div class="codebutList">
+          <div class="downText" v-if="img">
+            <div class="img flex justify-center items-center">
+              <!-- <div style="width: 36px; height: 36px">
+                <img
+                width="36px"
+                height="36px"
+                src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_download@2x.png"
+              ></img>
+              </div> -->
+              <div class="pl-10px">长按保存图片</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import QRCode from 'qrcodejs2'
+import { Toast } from 'vant'
+// import QiyanQrcode from '@/components/qiyan-qrcode/qiyan-qrcode.vue'
+// import uButton from "udiv-ui/components/u-button/u-button.vue";
+export default {
+  components: {
+    // QiyanQrcode
+  },
+  data() {
+    return {
+      show: false,
+      showShare: false,
+      showlist: false,
+      qrcode1: null,
+      active: {
+          class: 'item1',
+          name: '清净灯',
+          text: '白色光由佛陀的骨齿放出，白色的莲花灯代表清净与纯洁。清净灯寓意内心的无染与脱离烦恼，法性的纯净无染引导众生走向内在的自由与心灵的澄明，帮助修行者从轮回中得到解脱，达至清净的境界。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flowerwhite@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_white@2x.png'
+        },
+      qrcode2: null,
+      checkLight: false,
+      imgobj: {
+        item1: {
+          class: 'item1',
+          name: '清净灯',
+          text: '白色光由佛陀的骨齿放出，白色的莲花灯代表清净与纯洁。清净灯寓意内心的无染与脱离烦恼，法性的纯净无染引导众生走向内在的自由与心灵的澄明，帮助修行者从轮回中得到解脱，达至清净的境界。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flowerwhite@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_white@2x.png'
+        },
+        item2: {
+          class: 'item2',
+          name: '中道灯',
+          text: '黄色光由佛陀的皮肤放出，黄色的莲花灯代表佛教核心教义中的中道。中道教义强调远离两极对立，如有无、苦乐、生灭，主张修行者应在平衡中找到觉悟的道路。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_yellow@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_yellow@2x.png'
+        },
+        item3: {
+          class: 'item3',
+          name: '福德灯',
+          text: '赤色光由佛陀的肌肉放出，赤色莲花灯光辉映着成就福德的力量，为修行者带来无穷的加持与福报。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_orange@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_orange@2x.png'
+        },
+        item4: {
+          class: 'item4',
+          name: '智慧灯',
+          text: '橙色光由佛陀的掌、踵和唇放出，象征佛法与智慧，橙色莲花灯光寓意智慧圆满与庄严，照亮觉悟之路。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_pink@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_pink@2x.png'
+        },
+        item5: {
+          class: 'item5',
+          name: '真如灯',
+          text: '第六色为前五色合成，代表佛教不可见的真理与真如，真如灯非肉眼所能见，代表佛教的真理、真如。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_colorful@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_colorful@2x.png'
+        },
+        item6: {
+          class: 'item6',
+          name: '慈悲灯',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_purpose@2x.png',
+          text: '蓝色光由佛陀的毛发放出，象征慈悲与和平，莲花灯柔和的蓝光引导众生向慈爱之道前行，照亮内心的宁静与祥和。',
+          // img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_purpose@2x.png'
+        },
+        none: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png'
+      },
+      codeList:[],
+      list: [
+        {
+          class: 'item1',
+          name: '清净灯',
+          text: '白色光由佛陀的骨齿放出，白色的莲花灯代表清净与纯洁。清净灯寓意内心的无染与脱离烦恼，法性的纯净无染引导众生走向内在的自由与心灵的澄明，帮助修行者从轮回中得到解脱，达至清净的境界。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flowerwhite@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_white@2x.png'
+        },
+        {
+          class: 'item2',
+          name: '中道灯',
+          text: '黄色光由佛陀的皮肤放出，黄色的莲花灯代表佛教核心教义中的中道。中道教义强调远离两极对立，如有无、苦乐、生灭，主张修行者应在平衡中找到觉悟的道路。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_yellow@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_yellow@2x.png'
+        },
+        {
+          class: 'item3',
+          name: '福德灯',
+          text: '赤色光由佛陀的肌肉放出，赤色莲花灯光辉映着成就福德的力量，为修行者带来无穷的加持与福报。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_orange@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_orange@2x.png'
+        },
+        {
+          class: 'item4',
+          name: '智慧灯',
+          text: '橙色光由佛陀的掌、踵和唇放出，象征佛法与智慧，橙色莲花灯光寓意智慧圆满与庄严，照亮觉悟之路。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_pink@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_pink@2x.png'
+        },
+        {
+          class: 'item5',
+          name: '真如灯',
+          text: '第六色为前五色合成，代表佛教不可见的真理与真如，真如灯非肉眼所能见，代表佛教的真理、真如。',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_colorful@2x.png',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_colorful@2x@2x.png'
+        },
+        {
+          class: 'item6',
+          name: '慈悲灯',
+          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_purpose@2x.png',
+          text: '蓝色光由佛陀的毛发放出，象征慈悲与和平，莲花灯柔和的蓝光引导众生向慈爱之道前行，照亮内心的宁静与祥和。',
+          // img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png',
+          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_purpose@2x.png',
+        },
+      ]
+    }
+  },
+  watch: {
+    img(val) {
+      console.log(val, '图片生成出来了')
+    }
+  },
+  computed: {
+    ...mapState('home', ['img'])
+  },
+  mounted() {
+    let obj = {
+      '清净灯': 'item1',
+      '中道灯': 'item2',
+      '福德灯': 'item3',
+      '智慧灯': 'item4',
+      '真如灯': 'item5',
+      '慈悲灯': 'item6',
+    }
+    this.getRequest('/api/wx/getCode').then(res => {
+      this.codeList = res.data || []
+      // if(this.codeList.length > 6) {
+      //   this.list.length = 6
+      // }else{
+      //   this.list.length = this.codeList.length
+      // }
+      console.log(res, 'getCode', this.codeList, this.list)
+    })
+    this.getRequest('/api/wx/checkLight', {}).then(res => {
+      console.log(res, '是否点过灯')
+      this.checkLight = res.msg == '2'?'':res.msg
+      this.active = this.imgobj[obj[this.checkLight]]
+    })
+    // if (this.list.length != 6) {
+    //   this.list.push({
+    //     class: 'item' + (this.list.length + 1),
+    //     name: 'none',
+    //     img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png'
+    //   })
+    // }
+    // console.log(this.imgobj
+  },
+  methods: {
+    handleItem(item) {
+      if (item.img == 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png') {
+        //none
+        // if (this.checkLight) {
+        //   Toast('今天已点灯，请明天再来')
+        // } else {
+          this.getRequest('/api/wx/light/open', {code: item.name}).then(res => {
+            Toast('点灯成功')
+          })
+        // }
+        return
+      }
+      if(this.codeList.length <6){
+        Toast('请至少完成6处打卡')
+        return
+      }else{
+        this.getRequest('/api/wx/light/open', {code: item.name}).then(res => {
+            Toast('点灯成功')
+          })
+      }
+      this.checkLight  = item.name
+      this.active = this.imgobj[item.class]
+      // this.showlist = true
+    },
+    close() {
+      this.showlist = false
+      // console.log('close');
+    },
+    open() {},
+    handleNext(type) {
+      console.log(type)
+    },
+    handleShare() {
+      this.showShare = true
+      this.showlist = false
+      // setTimeout(() => {
+      //   this.creatQrCode();
+      // }, 100);
+      this.$store.commit('home/setImg', null)
+      this.$nextTick(() => {
+        console.log('DOM updated!')
+        // 在 DOM 更新后执行的回调函数
+        setTimeout(() => {
+          this.$store.dispatch('home/saveImage', this.$refs.downDiv)
+        }, 1000)
+        // this.$store.dispatch('home/saveImage', this.$refs.downDiv)
+      })
+    },
+    creatQrCode() {
+      if (this.qrcode1) {
+        this.qrcode1 && this.qrcode1.clear() // 清除二维码
+        this.qrcode2 && this.qrcode2.clear() // 清除二维码
+        this.qrcode1.makeCode('xxxxx')
+        this.qrcode2.makeCode('ssssss')
+      } else {
+        this.qrcode1 = new QRCode(this.$refs.qrCodeUrl1, {
+          text: 'xxxx', // 需要转换为二维码的内容
+          width: 46,
+          height: 46,
+          colorDark: '#000000',
+          colorLight: '#ffffff',
+          correctLevel: QRCode.CorrectLevel.H
+        })
+        this.qrcode2 = new QRCode(this.$refs.qrCodeUrl2, {
+          text: 'xxxx', // 需要转换为二维码的内容
+          width: 46,
+          height: 46,
+          colorDark: '#000000',
+          colorLight: '#ffffff',
+          correctLevel: QRCode.CorrectLevel.H
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.clockedPage {
+  width: 100%;
+  height: 100%;
+  min-height: calc(100vh - 138px);
+  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/bg02@2x.png)
+      100% 100% no-repeat;
+    background-size: 100% 100%;
+  .tips {
+    font-weight: 400;
+    font-size: 15px;
+    color: #b8b8b8;
+    line-height: 23px;
+    text-align: center;
+  }
+  .xzlp {
+    width: 367px;
+    height: 378px;
+    background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/img_loading_normal@2x.png)
+      100% 100% no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    .list {
+      width: 100%;
+      height: 100%;
+      .item {
+        position: absolute;
+        width: 126px;
+        height: 115px;
+        .itemImg {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .item1 {
+        left: 12px;
+        top: 65px;
+      }
+      .item2 {
+        left: calc(50% - 63px);
+        top: 10px;
+      }
+      .item3 {
+        right: 12px;
+        top: 65px;
+      }
+      .item4 {
+        right: 12px;
+        bottom: 65px;
+      }
+      .item5 {
+        left: calc(50% - 63px);
+        bottom: 10px;
+      }
+      .item6 {
+        left: 12px;
+        bottom: 65px;
+      }
+    }
+  }
+  .codebutList {
+    text-align: center;
+    position: relative;
+    top: 31px;
+    width: 100%;
+    // top: 76px;
+    .downText {
+      .img {
+        margin-right: 10px;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 19px;
+        text-align: center;
+      }
+      .tips {
+        padding-top: 10px;
+        font-weight: 400;
+        font-size: 16px;
+        color: #a49d94;
+        line-height: 19px;
+        text-align: center;
+      }
+    }
+    .downButtom {
+      .downButtomItem {
+        width: 140px;
+        height: 42px;
+        background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/btn01@2x.png) 100% 100%
+          no-repeat;
+        background-size: cover;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 19px;
+        font-style: normal;
+        margin: 0 5px;
+        line-height: 42px;
+        text-align: center;
+      }
+    }
+  }
+  .sharePop {
+    padding: 0 20px 60px 20px;
+    width: calc(100vw - 60px);
+    position: relative;
+    .huaimg {
+      width: 205px;
+      height: 190px;
+      object-fit: cover;
+      transform: rotate(-33deg);
+      position: absolute;
+      left: -55px;
+      top: 20px;
+    }
+  }
+  .codeData {
+    // background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop2@2x.png) no-repeat cover;
+    background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop@2x.jpg) 100% 100%
+      no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    // width: calc(100vw - 108px);
+    height: 522px;
+    position: relative;
+    .close {
+      position: absolute;
+      right: -20px;
+      top: -0px;
+      // width: 42px;
+      height: 42px;
+      z-index: 10;
+    }
+    .text {
+      font-weight: 400;
+      font-size: 24px;
+      color: #d86332;
+      line-height: 29px;
+      position: relative;
+      padding-bottom: 72px;
+      padding-right: 37px;
+      .textContent {
+        padding: 73px 0px 10px 0;
+        font-size: 14px;
+        line-height: 17px;
+        word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/
+        word-break: break-all;
+        text-align: right;
+        display: flex;
+        direction: rtl;
+        div {
+          width: 25px;
+          text-align: center;
+        }
+        .textlist {
+          padding-top: 40px;
+          height: 306px;
+          writing-mode: vertical-rl;
+          text-align: left;
+          // overflow: hidden; //超出的文本隐藏
+          // text-overflow: ellipsis; //溢出用省略号显示
+          // white-space:nowrap; //溢出不换行
+        }
+        .title {
+          font-weight: 400;
+          font-size: 16px;
+          color: #b1967b;
+          line-height: 19px;
+        }
+      }
+      .codeImg {
+        text-align: right;
+        width: 100%;
+        height: 72px;
+        // float: right;
+        .qrcode {
+          padding: 5px;
+          margin: 0 5px;
+          background: #fff;
+        }
+      }
+    }
+  }
+  .dengList {
+    padding: 50px 30px 0 30px;
+    .showinfo {
+      text-align: center;
+      .dengimg {
+        width: 322px;
+        height: auto;
+        .hua {
+          width: 100%;
+          height: auto;
+          object-fit: cover;
+        }
+        .page {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+          width: 100vw;
+          top: 220px;
+          right: 29px;
+          &Icon {
+            width: 48px;
+            height: 48px;
+            color: #e3c991;
+          }
+        }
+      }
+      .title {
+        font-weight: 400;
+        font-size: 30px;
+        color: #fff9b1;
+        line-height: 35px;
+        position: relative;
+        top: -50px;
+      }
+      .text {
+        text-align: left;
+        font-weight: 400;
+        font-size: 14px;
+        color: #e3c991;
+        line-height: 16px;
+      }
+      .downButtomItem {
+        width: 140px;
+        height: 42px;
+        background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/btn01@2x.png) 100% 100%
+          no-repeat;
+        background-size: cover;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 19px;
+        font-style: normal;
+        margin: 48px auto 11px auto;
+        line-height: 42px;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>