Hooke / custom_form

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c8cf6294 1 parent 56c63cb8

✨ feat: 配置全局less样式

Inline Side-by-side
Showing 15 changed files with 275 additions and 25 deletions
......@@ -8,6 +8,8 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
NutCol: typeof import('@nutui/nutui-taro')['Col']
NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
NutRow: typeof import('@nutui/nutui-taro')['Row']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
......
......@@ -11,11 +11,15 @@ module.exports = {
target: 'web',
// 配置代理，解决跨域问题
devServer: {
host: '0.0.0.0',
port: '10086', // 设置端口号
// https: true, //是否使用https协议
open: false, //启动后，使用默认浏览器打开网页
hot: true, //是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
// hot: true, //是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
proxy: createProxy(PROXY_PREFIX, DEV_PROXY_TARGET),
// 处理开发者工具报错问题，host没有配置导致
historyApiFallback: true,
allowedHosts: "all",
},
},
}
......
/*
* @Date: 2023-03-23 11:17:54
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-03-23 17:55:06
* @LastEditTime: 2023-03-24 10:59:28
* @FilePath: /custom_form/config/index.js
* @Description: 文件描述
*/
......@@ -10,6 +10,12 @@ const path = require('path')
import ComponentsPlugin from 'unplugin-vue-components/webpack'
import NutUIResolver from '@nutui/nutui-taro/dist/resolver'
const pluginOptions = {
less: {
patterns: [path.resolve(__dirname, '..', 'src/assets/styles/base.less')],
},
}
const config = {
projectName: 'custom_form',
date: '2023-3-23',
......@@ -49,6 +55,7 @@ const config = {
enableCookie: true,
},
],
['taro-plugin-style-resource', pluginOptions],
],
defineConstants: {},
copy: {
......@@ -120,7 +127,7 @@ const config = {
generateScopedName: '[name]__[local]___[hash:base64:5]',
},
},
}
},
},
}
......
......@@ -57,6 +57,7 @@
"axios-miniprogram": "^2.0.0-rc-2",
"dayjs": "^1.11.7",
"pinia": "^2.0.33",
"taro-plugin-style-resource": "^0.1.9",
"vue": "^3.0.0",
"weixin-js-sdk": "^1.6.0"
},
......
.modify-top {
z-index: 36;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10px;
background-image: url('http://gyzs.onwall.cn/top-xian%402x.png');
background-size: contain;
}
.content-bg {
/**
* background-color and background-image 共存，不能使用渐变色
* 图片铺平当时精度提高看看效果
* 直接用渐变色
* 不使用渐变色背景
*/
height: 100%;
min-height: 100vh;
// background-image: url('@images/bg-yellow-duan@2x.png');
background-image: url('http://gyzs.onwall.cn/bg-yellow-duan%402x.png');
// background-size: cover;
// background: linear-gradient(360deg, #FDD347 0%, #FFED6D 100%) ;
}
@namespace: 'wxggzs';
/* ============ 颜色 ============ */
// 主色调
@base-color: #8F652E;
// 文字颜色
@base-font-color: #333333;
@sub-font-color: #999999;
// 定义一个映射
#colors() {
base-color: @base-color;
base-font-color: @base-font-color;
}
// 混合
.width100 {
width: 100%;
}
.van-multi-ellipsis--l4 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.van-multi-ellipsis--l5 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.van-multi-ellipsis--l6 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
// 自定义图片显示
:deep(.van-image.custom-image) {
img {
border-radius: 5px;
}
}
.multi-ellipsis--l1 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.multi-ellipsis--l2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.multi-ellipsis--l3 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.multi-ellipsis--l4 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.multi-ellipsis--l5 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.multi-ellipsis--l6 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
export default definePageConfig({
navigationBarTitleText: '首页'
navigationBarTitleText: ''
})
......
......@@ -5,11 +5,15 @@
<div style="background-color: red; color: white;">span:24</div>
</nut-col>
</nut-row>
<nut-config-provider :theme-vars="themeVars">
<nut-dialog no-cancel-btn title="温馨提示" content="表单收集量已达到限额，无法再提交数据。" v-model:visible="show_reach_sjsj_max_count" @ok="onOk" />
</nut-config-provider>
</view>
</template>
<script setup>
import { computed, watchEffect, onMounted } from "vue";
import { ref, computed, watchEffect, onMounted } from "vue";
import Taro from '@tarojs/taro'
import { useDidShow } from '@tarojs/taro'
import request from '@/utils/request';
import { storeToRefs } from 'pinia'
......@@ -22,13 +26,21 @@ import { apiList } from '@/api/wx/jsApiList.js'
import { styleColor } from "@/constant.js";
import { getFormSettingAPI } from "@/api/form.js";
// TAG: 自定义主题颜色
const themeVars = {
primaryColor: styleColor.baseColor,
};
// web端判断
const is_pc = computed(() => process.env.TARO_ENV === 'h5' && wxInfo().isPC);
const store = mainStore();
const { formInfo } = storeToRefs(store);
console.warn(is_pc.value);
const show_reach_sjsj_max_count = ref(false);
const onOk = () => {
show_reach_sjsj_max_count.value = false;
}
onMounted(async () => {
const code = getUrlParams(location.href) ? getUrlParams(location.href).code : '';
......@@ -54,29 +66,41 @@ onMounted(async () => {
if (process.env.NODE_ENV !== 'development' && no_auth_info && form_setting.wxzq_scope) {
// 预览模式不开启
if (no_preview_model) {
$router.replace({
path: '/auth',
query: {
href: location.hash,
code
}
});
// $router.replace({
// path: '/auth',
// query: {
// href: location.hash,
// code
// }
// });
Taro.redirectTo({
url: `../auth/index?href=${location.hash}&code=${code}`
})
}
} else {
// 判断跳转页面
if (form_setting.sjsj_enable === 0 && !form_setting.sjsj_enable) {
// 表单已结束 -
$router.push("/stop?status=disable");
// 表单已结束
// $router.push("/stop?status=disable");
Taro.navigateTo({
url: '../stop/index?status=disable'
})
}
// 开启后有开始和结束时间，不在时间范围的显示表单还未开始或者已经结束
if (form_setting.sjsj_is_time_range && form_setting.sjsj_is_time_range) {
// 未开始
if (form_setting.server_time < form_setting.sjsj_begin_time) {
$router.push("/stop?status=apply");
// $router.push("/stop?status=apply");
Taro.navigateTo({
url: '../stop/index?status=apply'
})
}
// 已结束
if (form_setting.server_time > form_setting.sjsj_end_time) {
$router.push("/stop?status=finish");
// $router.push("/stop?status=finish");
Taro.navigateTo({
url: '../stop/index?status=finish'
})
}
}
// 启用分享功能，非预览模式
......@@ -93,12 +117,13 @@ onMounted(async () => {
}
// 当数据量达到限额时，该表单将不能继续提交数据。
if (form_setting.is_reach_sjsj_max_count) {
showDialog({
title: '温馨提示',
message: '表单收集量已达到限额，无法再提交数据。',
theme: 'round-button',
confirmButtonColor: styleColor.baseColor
});
// showDialog({
// title: '温馨提示',
// message: '表单收集量已达到限额，无法再提交数据。',
// theme: 'round-button',
// confirmButtonColor: styleColor.baseColor
// });
show_reach_sjsj_max_count.value = true;
}
// 设定填写次数
if (form_setting.wxzq_scope && no_preview_model) {
......@@ -110,4 +135,44 @@ onMounted(async () => {
</script>
<style lang="less">
@prefix: ~"@{namespace}-x";
html,
body {
width: 100%;
// height: 100%;
color: @base-font-color;
// background-color: #f7f8fa;
// background-color: #fff9ef;
padding: 0;
margin: 0;
}
body {
position: relative;
p {
margin: 0;
padding: 0;
}
}
#app {
min-height: calc(100vh);
position: relative;
}
.@{prefix} {
color: red;
}
.global-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.zIndex {
z-index: 4500 !important;
}
</style>
......
/*
* @Date: 2023-03-24 09:19:34
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-03-24 09:19:46
* @FilePath: /custom_form/src/pages/table/index.config.js
* @Description: 文件描述
*/
export default definePageConfig({
navigationBarTitleText: '表单',
})
<!--
* @Date: 2023-03-24 09:19:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-03-24 09:20:19
* @FilePath: /custom_form/src/pages/table/index.vue
* @Description: 文件描述
-->
<template>
<div class=""></div>
</template>
<script setup>
import { ref } from 'vue'
</script>
<style lang="less" scoped>
</style>
......@@ -6490,7 +6490,7 @@ glob-to-regexp@^0.4.1:
resolved "https://mirrors.cloud.tencent.com/npm/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
version "7.2.3"
resolved "https://mirrors.cloud.tencent.com/npm/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
......@@ -11853,6 +11853,16 @@ style-loader@3.3.1:
resolved "https://mirrors.cloud.tencent.com/npm/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
style-resources-loader@^1.5.0:
version "1.5.0"
resolved "https://mirrors.cloud.tencent.com/npm/style-resources-loader/-/style-resources-loader-1.5.0.tgz#6e0585ca475b9dac45387c308be90d74c814f41f"
integrity sha512-fIfyvQ+uvXaCBGGAgfh+9v46ARQB1AWdaop2RpQw0PBVuROsTBqGvx8dj0kxwjGOAyq3vepe4AOK3M6+Q/q2jw==
dependencies:
glob "^7.2.0"
loader-utils "^2.0.0"
schema-utils "^2.7.0"
tslib "^2.3.1"
style-search@^0.1.0:
version "0.1.0"
resolved "https://mirrors.cloud.tencent.com/npm/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
......@@ -12095,6 +12105,13 @@ taro-css-to-react-native@3.6.2:
css-mediaquery "^0.1.2"
postcss-value-parser "^3.3.0"
taro-plugin-style-resource@^0.1.9:
version "0.1.9"
resolved "https://mirrors.cloud.tencent.com/npm/taro-plugin-style-resource/-/taro-plugin-style-resource-0.1.9.tgz#46448a384a8d96bbe4c363c8bed2d1c5ec031803"
integrity sha512-YAxPbGN8fqpy09fHwqvUTXBxd30vrt54MDn9/fT3YDPfMZ+yVFRcmfg05FjaB+At4JVeISW7rrS37hT/IdnypQ==
dependencies:
style-resources-loader "^1.5.0"
terser-webpack-plugin@^5.1.3:
version "5.3.7"
resolved "https://mirrors.cloud.tencent.com/npm/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz#ef760632d24991760f339fe9290deb936ad1ffc7"
......@@ -12299,7 +12316,7 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
resolved "https://mirrors.cloud.tencent.com/npm/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.3, tslib@^2.3.0:
tslib@^2.0.3, tslib@^2.3.0, tslib@^2.3.1:
version "2.5.0"
resolved "https://mirrors.cloud.tencent.com/npm/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
......