正在显示
73 个修改的文件
包含
4481 行增加
和
0 行删除
.DS_Store
0 → 100644
不能预览此文件类型
.hbuilderx/launch.json
0 → 100644
| 1 | +{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ | ||
| 2 | + // launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数 | ||
| 3 | + "version": "0.0", | ||
| 4 | + "configurations": [{ | ||
| 5 | + "default" : | ||
| 6 | + { | ||
| 7 | + "launchtype" : "local" | ||
| 8 | + }, | ||
| 9 | + "mp-weixin" : | ||
| 10 | + { | ||
| 11 | + "launchtype" : "local" | ||
| 12 | + }, | ||
| 13 | + "type" : "uniCloud" | ||
| 14 | + } | ||
| 15 | + ] | ||
| 16 | +} |
App.vue
0 → 100644
| 1 | +<script> | ||
| 2 | + export default { | ||
| 3 | + onLaunch: function() { | ||
| 4 | + console.log('App Launch') | ||
| 5 | + }, | ||
| 6 | + onShow: function() { | ||
| 7 | + console.log('App Show') | ||
| 8 | + }, | ||
| 9 | + onHide: function() { | ||
| 10 | + console.log('App Hide') | ||
| 11 | + } | ||
| 12 | + } | ||
| 13 | +</script> | ||
| 14 | + | ||
| 15 | +<style lang="scss"> | ||
| 16 | + /*每个页面公共css */ | ||
| 17 | + /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */ | ||
| 18 | + @import "@/uni_modules/uview-plus/index.scss"; | ||
| 19 | + view { | ||
| 20 | + box-sizing: border-box; | ||
| 21 | + } | ||
| 22 | +</style> |
api/user.js
0 → 100644
| 1 | +import { http } from '@/uni_modules/uview-plus' | ||
| 2 | + | ||
| 3 | +// 用户登录 | ||
| 4 | +export const userLogin = (data, config = {}) => http.post('/api/users/login', data, config) | ||
| 5 | + | ||
| 6 | +// 用户注册 | ||
| 7 | +export const userReg = (data) => http.post('/api/users/register', data) | ||
| 8 | + | ||
| 9 | +// 获取用户信息 | ||
| 10 | +export const getUserInfo = () => http.get('/update/getInfo', {custom: {auth: true}}) | ||
| 11 | +// 更新用户信息 | ||
| 12 | +export const updateUserInfo = (data) => http.put('/update/editInfo', data, {custom: {auth: true}}) |
components/carCard.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="carCard" @click="skip"> | ||
| 3 | + <slot name="header"></slot> | ||
| 4 | + <slot name="center"></slot> | ||
| 5 | + <view class="rowLine"></view> | ||
| 6 | + <slot name="footer"></slot> | ||
| 7 | + <view class="tip" :style="{backgroundColor: bgColor, color: fontColor}">{{ tipContent === '' ? textContent : tipContent }}</view> | ||
| 8 | + </view> | ||
| 9 | +</template> | ||
| 10 | + | ||
| 11 | +<script setup> | ||
| 12 | +import { computed } from 'vue'; | ||
| 13 | +const props = defineProps({ | ||
| 14 | + carInfo: { | ||
| 15 | + type: Object, | ||
| 16 | + require: true | ||
| 17 | + }, | ||
| 18 | + tipContent: { | ||
| 19 | + type: String, | ||
| 20 | + default: '' | ||
| 21 | + } | ||
| 22 | +}) | ||
| 23 | +const emit = defineEmits(['onSkip']) | ||
| 24 | +const bgColor = computed(() => { | ||
| 25 | + let index = props.carInfo.status || 99 | ||
| 26 | + let objColor = { | ||
| 27 | + 0: '#D5E5FF', | ||
| 28 | + 1: '#DED5FF', | ||
| 29 | + 2: '#FFD5D5' | ||
| 30 | + } | ||
| 31 | + return objColor[index] || '#D5E5FF' | ||
| 32 | +}) | ||
| 33 | +const fontColor = computed(() => { | ||
| 34 | + let index = props.carInfo.status || 99 | ||
| 35 | + let objColor = { | ||
| 36 | + 0: '#3680FE', | ||
| 37 | + 1: '#7F36FE', | ||
| 38 | + 2: '#C81515' | ||
| 39 | + } | ||
| 40 | + return objColor[index] || '#3680FE' | ||
| 41 | +}) | ||
| 42 | +const textContent = computed(() => { | ||
| 43 | + let index = props.carInfo.status || 99 | ||
| 44 | + let objColor = { | ||
| 45 | + 0: '已提交', | ||
| 46 | + 1: '等待修改', | ||
| 47 | + 2: '已作废' | ||
| 48 | + } | ||
| 49 | + return objColor[index] || '' | ||
| 50 | +}) | ||
| 51 | + | ||
| 52 | +const skip = () => { | ||
| 53 | + emit('onSkip', props.carInfo.carId) | ||
| 54 | +} | ||
| 55 | +</script> | ||
| 56 | + | ||
| 57 | +<style lang="scss" scoped> | ||
| 58 | +.carCard{ | ||
| 59 | + position: relative; | ||
| 60 | + padding: 20rpx 30rpx 34rpx; | ||
| 61 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 62 | + background: #fff; | ||
| 63 | + border-radius: 20rpx; | ||
| 64 | + .rowLine{ | ||
| 65 | + width: 100%; | ||
| 66 | + height: 2rpx; | ||
| 67 | + background-color: #eee; | ||
| 68 | + margin: 20rpx 0; | ||
| 69 | + } | ||
| 70 | + .tip{ | ||
| 71 | + position: absolute; | ||
| 72 | + top: 0; | ||
| 73 | + right: 0; | ||
| 74 | + width: 120rpx; | ||
| 75 | + height: 40rpx; | ||
| 76 | + text-align: center; | ||
| 77 | + font-size: 20rpx; | ||
| 78 | + line-height: 40rpx; | ||
| 79 | + border-radius: 0rpx 20rpx 0rpx 20rpx; | ||
| 80 | + color: #3680FE; | ||
| 81 | + background-color: #D5E5FF; | ||
| 82 | + } | ||
| 83 | +} | ||
| 84 | +</style> |
components/centerLine.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="centerLine" :style="{color: fontColor}"> | ||
| 3 | + <text @click="updateCarInfo">{{ leftContent }}</text> | ||
| 4 | + <text class="line" :style="{backgroundColor: fontColor}"></text> | ||
| 5 | + <text @click="deleteCar">{{ rightContent }}</text> | ||
| 6 | + </view> | ||
| 7 | +</template> | ||
| 8 | + | ||
| 9 | +<script setup> | ||
| 10 | +const props = defineProps({ | ||
| 11 | + fontColor: { | ||
| 12 | + type: String, | ||
| 13 | + default: '#3680FE' | ||
| 14 | + }, | ||
| 15 | + leftContent: { | ||
| 16 | + type: String, | ||
| 17 | + default: '修改车辆信息' | ||
| 18 | + }, | ||
| 19 | + rightContent: { | ||
| 20 | + type: String, | ||
| 21 | + default: '删除车辆' | ||
| 22 | + }, | ||
| 23 | +}) | ||
| 24 | + | ||
| 25 | +// 修改车辆信息 | ||
| 26 | +const updateCarInfo = () => { | ||
| 27 | + if(props.leftContent === '修改车辆信息') { | ||
| 28 | + | ||
| 29 | + } | ||
| 30 | +} | ||
| 31 | +// 删除车辆信息 | ||
| 32 | +const deleteCar = () => { | ||
| 33 | + if(props.rightContent === '删除车辆'){ | ||
| 34 | + | ||
| 35 | + } | ||
| 36 | +} | ||
| 37 | + | ||
| 38 | +</script> | ||
| 39 | + | ||
| 40 | +<style lang="scss" scoped> | ||
| 41 | +.centerLine{ | ||
| 42 | + display: flex; | ||
| 43 | + align-items: center; | ||
| 44 | + font-size: 20rpx; | ||
| 45 | + .line{ | ||
| 46 | + height: 20rpx; | ||
| 47 | + width: 2rpx; | ||
| 48 | + margin: 0 20rpx; | ||
| 49 | + } | ||
| 50 | +} | ||
| 51 | +</style> |
components/commentCard.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="commentCard"> | ||
| 3 | + <view class="u-line-1 title">客户对产品意向很高,希望价格优惠...</view> | ||
| 4 | + <view class="line-row"> | ||
| 5 | + <view class="line-item"> | ||
| 6 | + <u-icon name="clock" color="#231F20" size="18"></u-icon> | ||
| 7 | + <text class="content">2024-09-09</text> | ||
| 8 | + </view> | ||
| 9 | + <view class="line-item"> | ||
| 10 | + <u-icon name="order" color="#231F20" size="18"></u-icon> | ||
| 11 | + <text class="content">admin</text> | ||
| 12 | + </view> | ||
| 13 | + </view> | ||
| 14 | + </view> | ||
| 15 | +</template> | ||
| 16 | + | ||
| 17 | +<script setup> | ||
| 18 | + | ||
| 19 | +</script> | ||
| 20 | + | ||
| 21 | +<style lang="scss" scoped> | ||
| 22 | +.commentCard{ | ||
| 23 | + padding: 30rpx 22rpx 40rpx; | ||
| 24 | + background: #EFF1FF; | ||
| 25 | + border-radius: 12rpx; | ||
| 26 | + .title{ | ||
| 27 | + color: #3D3D3D; | ||
| 28 | + font-size: 28rpx; | ||
| 29 | + line-height: 38rpx; | ||
| 30 | + } | ||
| 31 | + .line-row{ | ||
| 32 | + display: flex; | ||
| 33 | + align-items: center; | ||
| 34 | + justify-content: space-between; | ||
| 35 | + margin-top: 20rpx; | ||
| 36 | + .line-item{ | ||
| 37 | + display: flex; | ||
| 38 | + align-items: center; | ||
| 39 | + .content{ | ||
| 40 | + color: #3D3D3D; | ||
| 41 | + font-size: 24rpx; | ||
| 42 | + line-height: 32rpx; | ||
| 43 | + margin-left: 20rpx; | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | +} | ||
| 48 | +</style> |
components/navTop.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="navTop"> | ||
| 3 | + <image style="width: 32rpx;" src="@/static/commonImage/big-car.png" mode="widthFix"></image> | ||
| 4 | + <text class="top-text">{{ carNum }}</text> | ||
| 5 | + </view> | ||
| 6 | +</template> | ||
| 7 | + | ||
| 8 | +<script setup> | ||
| 9 | +defineProps({ | ||
| 10 | + carNum: { | ||
| 11 | + type: String, | ||
| 12 | + default: '桂A·66666' | ||
| 13 | + } | ||
| 14 | +}) | ||
| 15 | +</script> | ||
| 16 | + | ||
| 17 | +<style lang="scss" scoped> | ||
| 18 | +.navTop{ | ||
| 19 | + display: flex; | ||
| 20 | + align-items: center; | ||
| 21 | + gap: 20rpx; | ||
| 22 | + margin-bottom: 20rpx; | ||
| 23 | + .top-text{ | ||
| 24 | + font-weight: 500; | ||
| 25 | + font-size: 28rpx; | ||
| 26 | + line-height: 38rpx; | ||
| 27 | + color: #3d3d3d; | ||
| 28 | + } | ||
| 29 | +} | ||
| 30 | +</style> |
components/operateList.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="operate"> | ||
| 3 | + <view class="operate_list"> | ||
| 4 | + <view class="operate_item"> | ||
| 5 | + <text class="operate_btn" :class="{active: current === 0 }" @click="handleReturn">退回</text> | ||
| 6 | + </view> | ||
| 7 | + <view class="operate_item"> | ||
| 8 | + <text class="operate_btn" :class="{active: current === 1 }" @click="handleInvalid">作废</text> | ||
| 9 | + </view> | ||
| 10 | + <view class="operate_item"> | ||
| 11 | + <text class="operate_btn" :class="{active: current === 2 }" @click="handleUpdate">修改</text> | ||
| 12 | + </view> | ||
| 13 | + <view class="operate_item"> | ||
| 14 | + <text class="operate_btn" :class="{active: current === 3 }" @click="handleCirculation">流转</text> | ||
| 15 | + </view> | ||
| 16 | + </view> | ||
| 17 | + </view> | ||
| 18 | +</template> | ||
| 19 | + | ||
| 20 | +<script setup> | ||
| 21 | +import { ref } from 'vue' | ||
| 22 | +const current = ref(9) | ||
| 23 | +const handleReturn = () => { | ||
| 24 | + current.value = 0 | ||
| 25 | + } | ||
| 26 | + const handleInvalid = () => { | ||
| 27 | + current.value = 1 | ||
| 28 | + } | ||
| 29 | + const handleUpdate = () => { | ||
| 30 | + current.value = 2 | ||
| 31 | + } | ||
| 32 | + const handleCirculation = () => { | ||
| 33 | + current.value = 3 | ||
| 34 | + } | ||
| 35 | +</script> | ||
| 36 | + | ||
| 37 | +<style lang="scss" scoped> | ||
| 38 | +.operate{ | ||
| 39 | + .operate_list{ | ||
| 40 | + display: flex; | ||
| 41 | + align-items: center; | ||
| 42 | + .operate_item{ | ||
| 43 | + display: flex; | ||
| 44 | + align-items: center; | ||
| 45 | + justify-content: center; | ||
| 46 | + flex: 1; | ||
| 47 | + height: 40rpx; | ||
| 48 | + border-right: 2rpx solid #3680FE; | ||
| 49 | + &:last-child{ | ||
| 50 | + border-right: 0; | ||
| 51 | + } | ||
| 52 | + .operate_btn{ | ||
| 53 | + width: 100rpx; | ||
| 54 | + height: 40rpx; | ||
| 55 | + line-height: 40rpx; | ||
| 56 | + font-size: 24rpx; | ||
| 57 | + text-align: center; | ||
| 58 | + border-radius: 8rpx; | ||
| 59 | + &.active{ | ||
| 60 | + background: #3680FE; | ||
| 61 | + color: #fff; | ||
| 62 | + } | ||
| 63 | + } | ||
| 64 | + } | ||
| 65 | + } | ||
| 66 | +} | ||
| 67 | +</style> |
components/ownerInfo.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="ownerInfo"> | ||
| 3 | + <view class="info_item">车主:张三</view> | ||
| 4 | + <view class="info_item">客户来源:客户介绍</view> | ||
| 5 | + <view class="info_item">车辆类型:奔驰C级</view> | ||
| 6 | + <view class="info_item">客户归属:admin</view> | ||
| 7 | + <view class="info_item">下次跟进:2024-09-08</view> | ||
| 8 | + <view class="info_item">创建日期:2024-09-01</view> | ||
| 9 | + </view> | ||
| 10 | +</template> | ||
| 11 | + | ||
| 12 | +<script setup> | ||
| 13 | + | ||
| 14 | +</script> | ||
| 15 | + | ||
| 16 | +<style lang="scss" scoped> | ||
| 17 | +.ownerInfo{ | ||
| 18 | + display: flex; | ||
| 19 | + flex-wrap: wrap; | ||
| 20 | + .info_item{ | ||
| 21 | + width: 50%; | ||
| 22 | + font-size: 20rpx; | ||
| 23 | + line-height: 26rpx; | ||
| 24 | + color: #999; | ||
| 25 | + margin-bottom: 10rpx; | ||
| 26 | + } | ||
| 27 | +} | ||
| 28 | +</style> |
components/wordInfo.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="wordInfo"> | ||
| 3 | + <text style="min-width: 160rpx;">车主:{{ userName }}</text> | ||
| 4 | + <text>车辆类型:{{ carType }}</text> | ||
| 5 | + <text class="applyTime">{{ applyTime }}</text> | ||
| 6 | + </view> | ||
| 7 | +</template> | ||
| 8 | + | ||
| 9 | +<script setup> | ||
| 10 | +defineProps({ | ||
| 11 | + carType: { | ||
| 12 | + type: String, | ||
| 13 | + default: '' | ||
| 14 | + }, | ||
| 15 | + userName: { | ||
| 16 | + type: String, | ||
| 17 | + default: '' | ||
| 18 | + }, | ||
| 19 | + applyTime: { | ||
| 20 | + type: String, | ||
| 21 | + default: '' | ||
| 22 | + } | ||
| 23 | +}) | ||
| 24 | +</script> | ||
| 25 | + | ||
| 26 | +<style lang="scss" scoped> | ||
| 27 | +.wordInfo{ | ||
| 28 | + position: relative; | ||
| 29 | + display: flex; | ||
| 30 | + align-items: center; | ||
| 31 | + line-height: 26rpx; | ||
| 32 | + color: #999; | ||
| 33 | + font-size: 20rpx; | ||
| 34 | + .applyTime{ | ||
| 35 | + position: absolute; | ||
| 36 | + top: -20rpx; | ||
| 37 | + right: 0; | ||
| 38 | + } | ||
| 39 | +} | ||
| 40 | +</style> |
index.html
0 → 100644
| 1 | +<!DOCTYPE html> | ||
| 2 | +<html lang="en"> | ||
| 3 | + <head> | ||
| 4 | + <meta charset="UTF-8" /> | ||
| 5 | + <script> | ||
| 6 | + var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || | ||
| 7 | + CSS.supports('top: constant(a)')) | ||
| 8 | + document.write( | ||
| 9 | + '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + | ||
| 10 | + (coverSupport ? ', viewport-fit=cover' : '') + '" />') | ||
| 11 | + </script> | ||
| 12 | + <title></title> | ||
| 13 | + <!--preload-links--> | ||
| 14 | + <!--app-context--> | ||
| 15 | + </head> | ||
| 16 | + <body> | ||
| 17 | + <div id="app"><!--app-html--></div> | ||
| 18 | + <script type="module" src="/main.js"></script> | ||
| 19 | + </body> | ||
| 20 | +</html> |
main.js
0 → 100644
| 1 | +import App from './App' | ||
| 2 | + | ||
| 3 | +import uviewPlus from '@/uni_modules/uview-plus' | ||
| 4 | +import store from './store' | ||
| 5 | +import {initRequest} from './utils/request.js' | ||
| 6 | + | ||
| 7 | +// #ifndef VUE3 | ||
| 8 | +import Vue from 'vue' | ||
| 9 | +import './uni.promisify.adaptor' | ||
| 10 | +Vue.config.productionTip = false | ||
| 11 | +App.mpType = 'app' | ||
| 12 | +const app = new Vue({ | ||
| 13 | + ...App | ||
| 14 | +}) | ||
| 15 | +app.$mount() | ||
| 16 | +// #endif | ||
| 17 | + | ||
| 18 | +// #ifdef VUE3 | ||
| 19 | +import { createSSRApp } from 'vue' | ||
| 20 | +export function createApp() { | ||
| 21 | + const app = createSSRApp(App) | ||
| 22 | + initRequest(app) | ||
| 23 | + app.use(uviewPlus).use(store) | ||
| 24 | + return { | ||
| 25 | + app | ||
| 26 | + } | ||
| 27 | +} | ||
| 28 | +// #endif |
manifest.json
0 → 100644
| 1 | +{ | ||
| 2 | + "name" : "car-insurance", | ||
| 3 | + "appid" : "__UNI__65AAA9F", | ||
| 4 | + "description" : "", | ||
| 5 | + "versionName" : "1.0.0", | ||
| 6 | + "versionCode" : "100", | ||
| 7 | + "transformPx" : false, | ||
| 8 | + /* 5+App特有相关 */ | ||
| 9 | + "app-plus" : { | ||
| 10 | + "usingComponents" : true, | ||
| 11 | + "nvueStyleCompiler" : "uni-app", | ||
| 12 | + "compilerVersion" : 3, | ||
| 13 | + "splashscreen" : { | ||
| 14 | + "alwaysShowBeforeRender" : true, | ||
| 15 | + "waiting" : true, | ||
| 16 | + "autoclose" : true, | ||
| 17 | + "delay" : 0 | ||
| 18 | + }, | ||
| 19 | + /* 模块配置 */ | ||
| 20 | + "modules" : {}, | ||
| 21 | + /* 应用发布信息 */ | ||
| 22 | + "distribute" : { | ||
| 23 | + /* android打包配置 */ | ||
| 24 | + "android" : { | ||
| 25 | + "permissions" : [ | ||
| 26 | + "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", | ||
| 27 | + "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", | ||
| 28 | + "<uses-permission android:name=\"android.permission.VIBRATE\"/>", | ||
| 29 | + "<uses-permission android:name=\"android.permission.READ_LOGS\"/>", | ||
| 30 | + "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", | ||
| 31 | + "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", | ||
| 32 | + "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", | ||
| 33 | + "<uses-permission android:name=\"android.permission.CAMERA\"/>", | ||
| 34 | + "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", | ||
| 35 | + "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", | ||
| 36 | + "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", | ||
| 37 | + "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", | ||
| 38 | + "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", | ||
| 39 | + "<uses-feature android:name=\"android.hardware.camera\"/>", | ||
| 40 | + "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" | ||
| 41 | + ] | ||
| 42 | + }, | ||
| 43 | + /* ios打包配置 */ | ||
| 44 | + "ios" : {}, | ||
| 45 | + /* SDK配置 */ | ||
| 46 | + "sdkConfigs" : {} | ||
| 47 | + } | ||
| 48 | + }, | ||
| 49 | + /* 快应用特有相关 */ | ||
| 50 | + "quickapp" : {}, | ||
| 51 | + /* 小程序特有相关 */ | ||
| 52 | + "mp-weixin" : { | ||
| 53 | + "appid" : "wx2884bf0a53ee40b3", | ||
| 54 | + "setting" : { | ||
| 55 | + "urlCheck" : false, | ||
| 56 | + "minified" : true | ||
| 57 | + }, | ||
| 58 | + "usingComponents" : true, | ||
| 59 | + "lazyCodeLoading": "requiredComponents" | ||
| 60 | + }, | ||
| 61 | + "mp-alipay" : { | ||
| 62 | + "usingComponents" : true | ||
| 63 | + }, | ||
| 64 | + "mp-baidu" : { | ||
| 65 | + "usingComponents" : true | ||
| 66 | + }, | ||
| 67 | + "mp-toutiao" : { | ||
| 68 | + "usingComponents" : true | ||
| 69 | + }, | ||
| 70 | + "uniStatistics" : { | ||
| 71 | + "enable" : false | ||
| 72 | + }, | ||
| 73 | + "vueVersion" : "3" | ||
| 74 | +} |
pages.json
0 → 100644
| 1 | +{ | ||
| 2 | + "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages | ||
| 3 | + { | ||
| 4 | + "path" : "pages/login/login", | ||
| 5 | + "style" : | ||
| 6 | + { | ||
| 7 | + "navigationBarTitleText" : "", | ||
| 8 | + "navigationStyle": "custom" | ||
| 9 | + } | ||
| 10 | + }, | ||
| 11 | + { | ||
| 12 | + "path": "pages/index/index", | ||
| 13 | + "style": { | ||
| 14 | + "navigationBarTitleText": "", | ||
| 15 | + "navigationStyle": "custom" | ||
| 16 | + } | ||
| 17 | + }, | ||
| 18 | + { | ||
| 19 | + "path" : "pages/my/my", | ||
| 20 | + "style" : | ||
| 21 | + { | ||
| 22 | + "navigationBarTitleText" : "", | ||
| 23 | + "navigationStyle": "custom" | ||
| 24 | + } | ||
| 25 | + }, | ||
| 26 | + { | ||
| 27 | + "path" : "pages/carDetail/carDetail", | ||
| 28 | + "style" : | ||
| 29 | + { | ||
| 30 | + "navigationBarTitleText" : "车辆信息", | ||
| 31 | + "navigationBarBackgroundColor": "#FFFFFF" | ||
| 32 | + } | ||
| 33 | + }, | ||
| 34 | + { | ||
| 35 | + "path" : "pages/privacy/privacy", | ||
| 36 | + "style" : | ||
| 37 | + { | ||
| 38 | + "navigationBarTitleText" : "车险小程序隐私政策" | ||
| 39 | + } | ||
| 40 | + }, | ||
| 41 | + { | ||
| 42 | + "path" : "pages/companyHome/companyHome", | ||
| 43 | + "style" : | ||
| 44 | + { | ||
| 45 | + "navigationBarTitleText" : "", | ||
| 46 | + "navigationStyle": "custom" | ||
| 47 | + } | ||
| 48 | + }, | ||
| 49 | + { | ||
| 50 | + "path" : "pages/companyMy/companyMy", | ||
| 51 | + "style" : | ||
| 52 | + { | ||
| 53 | + "navigationBarTitleText" : "", | ||
| 54 | + "navigationStyle": "custom" | ||
| 55 | + } | ||
| 56 | + }, | ||
| 57 | + { | ||
| 58 | + "path" : "pages/ownerDetail/ownerDetail", | ||
| 59 | + "style" : | ||
| 60 | + { | ||
| 61 | + "navigationBarTitleText" : "", | ||
| 62 | + "navigationStyle": "custom" | ||
| 63 | + } | ||
| 64 | + }, | ||
| 65 | + { | ||
| 66 | + "path" : "pages/societyHome/societyHome", | ||
| 67 | + "style" : | ||
| 68 | + { | ||
| 69 | + "navigationBarTitleText" : "", | ||
| 70 | + "navigationStyle": "custom" | ||
| 71 | + } | ||
| 72 | + }, | ||
| 73 | + { | ||
| 74 | + "path" : "pages/societyMy/societyMy", | ||
| 75 | + "style" : | ||
| 76 | + { | ||
| 77 | + "navigationBarTitleText" : "", | ||
| 78 | + "navigationStyle": "custom" | ||
| 79 | + } | ||
| 80 | + } | ||
| 81 | + ], | ||
| 82 | + // 底部导航管理 | ||
| 83 | + "tabBar": { | ||
| 84 | + "color": "#707070", | ||
| 85 | + "selectedColor": "#3680FE", | ||
| 86 | + "borderStyle": "black", | ||
| 87 | + "backgroundColor": "#ffffff", | ||
| 88 | + "list": [ | ||
| 89 | + { | ||
| 90 | + "pagePath": "pages/index/index", | ||
| 91 | + "iconPath": "static/tabbarIcon/car.png", | ||
| 92 | + "selectedIconPath": "static/tabbarIcon/car-active.png", | ||
| 93 | + "text": "车辆管理" | ||
| 94 | + }, | ||
| 95 | + { | ||
| 96 | + "pagePath": "pages/my/my", | ||
| 97 | + "iconPath": "static/tabbarIcon/my.png", | ||
| 98 | + "selectedIconPath": "static/tabbarIcon/my-active.png", | ||
| 99 | + "text": "我的" | ||
| 100 | + }] | ||
| 101 | + }, | ||
| 102 | + "easycom": { | ||
| 103 | + "autoscan": true, | ||
| 104 | + // 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175 | ||
| 105 | + "custom": { | ||
| 106 | + "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue", | ||
| 107 | + "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue", | ||
| 108 | + "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue" | ||
| 109 | + } | ||
| 110 | + }, | ||
| 111 | + "globalStyle": { | ||
| 112 | + "navigationBarTextStyle": "black", | ||
| 113 | + "navigationBarTitleText": "uni-app", | ||
| 114 | + "navigationBarBackgroundColor": "#F8F8F8", | ||
| 115 | + "backgroundColor": "#F8F8F8" | ||
| 116 | + }, | ||
| 117 | + "uniIdRouter": {} | ||
| 118 | +} |
pages/carDetail/carDetail.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="carDetail" :style="{height:showPicker?'100vh':'',overflow:showPicker?'hidden':''}"> | ||
| 3 | + <up-form :model="form" ref="uFormRef" label-width="130" :labelStyle="labelStyle"> | ||
| 4 | + <view class="carInfo"> | ||
| 5 | + <navTop carNum="桂A·66666" /> | ||
| 6 | + <view class="centerContent"> | ||
| 7 | + <view class="carBand">梅赛德斯奔驰</view> | ||
| 8 | + <view class="carModel">2024 1.6L双离合变速器 两厢 双离合 舒适型 国IV 5座</view> | ||
| 9 | + </view> | ||
| 10 | + <view class="rowLine"></view> | ||
| 11 | + <up-form-item label="上年承保公司" prop="sysDeptName"> | ||
| 12 | + <up-input v-model="form.sysDeptName" fontSize="28rpx" color="#999" placeholder="请输入上年承保公司" border="none" inputAlign="right" /> | ||
| 13 | + </up-form-item> | ||
| 14 | + </view> | ||
| 15 | + <!-- 车主信息 --> | ||
| 16 | + <view class="carInfo"> | ||
| 17 | + <view class="card_title">车主信息</view> | ||
| 18 | + <up-form-item label="车主姓名" prop="name"> | ||
| 19 | + <up-input v-model="form.name" fontSize="28rpx" color="#999" placeholder="请输入真实姓名" border="none" inputAlign="right" /> | ||
| 20 | + </up-form-item> | ||
| 21 | + <up-form-item label="身份证号" prop="identificationNumber"> | ||
| 22 | + <up-input v-model="form.identificationNumber" fontSize="28rpx" color="#999" placeholder="请输入身份证号" border="none" inputAlign="right" /> | ||
| 23 | + </up-form-item> | ||
| 24 | + </view> | ||
| 25 | + <!-- 行驶信息 --> | ||
| 26 | + <view class="carInfo"> | ||
| 27 | + <view class="card_title">行驶证信息</view> | ||
| 28 | + <up-form-item label="车牌号码" prop="licensePlateNumber"> | ||
| 29 | + <up-input v-model="form.licensePlateNumber" fontSize="28rpx" color="#999" placeholder="请输入车牌号码" border="none" inputAlign="right" /> | ||
| 30 | + </up-form-item> | ||
| 31 | + <up-form-item label="号牌种类" prop="lincensePlateType"> | ||
| 32 | + <up-input v-model="form.lincensePlateType" fontSize="28rpx" color="#999" placeholder="请选择号牌种类" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['黄色车牌', '绿色车牌', '白色车牌', '蓝色车牌'])" /> | ||
| 33 | + </up-form-item> | ||
| 34 | + <up-form-item label="车架号" prop="frameNumber"> | ||
| 35 | + <up-input v-model="form.frameNumber" fontSize="28rpx" color="#999" placeholder="请输入车架号" border="none" inputAlign="right" /> | ||
| 36 | + </up-form-item> | ||
| 37 | + <up-form-item label="发动机号" prop="engineNumber"> | ||
| 38 | + <up-input v-model="form.engineNumber" fontSize="28rpx" color="#999" placeholder="请输入发动机号" border="none" inputAlign="right" /> | ||
| 39 | + </up-form-item> | ||
| 40 | + <up-form-item label="车辆类型" prop="vehicleType"> | ||
| 41 | + <up-input v-model="form.vehicleType" fontSize="28rpx" color="#999" placeholder="请选择车辆类型" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['小轿车', '大货车', '两厢车'])" /> | ||
| 42 | + </up-form-item> | ||
| 43 | + <up-form-item label="车辆使用性质" prop="vehicleNature"> | ||
| 44 | + <up-input v-model="form.vehicleNature" fontSize="28rpx" color="#999" placeholder="请选择车辆使用性质" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['运营车辆', '私家车', '公务车'])" /> | ||
| 45 | + </up-form-item> | ||
| 46 | + <up-form-item label="核定客载数(人)" prop="passengersNumber"> | ||
| 47 | + <up-input v-model="form.passengersNumber" fontSize="28rpx" color="#999" placeholder="请输入核载人数" border="none" inputAlign="right" /> | ||
| 48 | + </up-form-item> | ||
| 49 | + <up-form-item label="核定载质量(千克)" prop="passengerCapacity"> | ||
| 50 | + <up-input v-model="form.passengerCapacity" fontSize="28rpx" color="#999" placeholder="请输入核载重量" border="none" inputAlign="right" /> | ||
| 51 | + </up-form-item> | ||
| 52 | + <up-form-item label="排量毫升" prop="emissions"> | ||
| 53 | + <up-input v-model="form.emissions" fontSize="28rpx" color="#999" placeholder="请输入排放量" border="none" inputAlign="right" /> | ||
| 54 | + </up-form-item> | ||
| 55 | + <view class="carModelBox"> | ||
| 56 | + <view class="model_line"> | ||
| 57 | + <text class="leftContent">车辆型号</text> | ||
| 58 | + <up-input v-model="form.vehicleModel" fontSize="28rpx" color="#999" placeholder="请填写车辆型号" border="none" inputAlign="right" @change="getSearch" /> | ||
| 59 | + </view> | ||
| 60 | + <up-transition :show="showList"> | ||
| 61 | + <view class="searchList"> | ||
| 62 | + <view class="searchItem">123</view> | ||
| 63 | + <view class="searchItem">123</view> | ||
| 64 | + <view class="searchItem">123</view> | ||
| 65 | + <view class="searchItem">123</view> | ||
| 66 | + </view> | ||
| 67 | + </up-transition> | ||
| 68 | + </view> | ||
| 69 | + <up-form-item label="中文品牌" prop="vehicleBrand"> | ||
| 70 | + <up-input v-model="form.vehicleBrand" fontSize="28rpx" color="#999" placeholder="请选择车辆品牌" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['宝马', '奔驰', '劳斯莱斯'])" /> | ||
| 71 | + </up-form-item> | ||
| 72 | + <up-form-item label="准牵引质量" prop="tractionMass"> | ||
| 73 | + <up-input v-model="form.tractionMass" fontSize="28rpx" color="#999" placeholder="请填写准牵引准质量" border="none" inputAlign="right" /> | ||
| 74 | + </up-form-item> | ||
| 75 | + <up-form-item label="保险需求" prop="requirements"> | ||
| 76 | + <up-input v-model="form.requirements" fontSize="28rpx" color="#999" placeholder="请选择保险需求" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['强险', '商险'])" /> | ||
| 77 | + </up-form-item> | ||
| 78 | + </view> | ||
| 79 | + | ||
| 80 | + <view class="tip">请认真核实车辆信息,实际投保车辆信息以保险公司确认为准</view> | ||
| 81 | + | ||
| 82 | + <view class="btn delBtn" @click="deleteCar">删除车辆</view> | ||
| 83 | + <view class="btn confirmBtn">确认</view> | ||
| 84 | + </up-form> | ||
| 85 | + <up-picker :show="showPicker" :columns="columns" :closeOnClickOverlay="true" @close="onCancel" @cancel="onCancel" @confirm="showPicker = false"></up-picker> | ||
| 86 | + <up-popup :show="showTip" mode="center" :safeAreaInsetBottom="false" round="20" @close="showTip = false"> | ||
| 87 | + <view class="notice"> | ||
| 88 | + <view class="notice_title">温馨提示</view> | ||
| 89 | + <view class="notice_content"> | ||
| 90 | + 本平台仅供出租租赁车辆提供登记服务 | ||
| 91 | + </view> | ||
| 92 | + <view class="btn" @click="showTip = false">我已认真阅读并同意以上内容</view> | ||
| 93 | + </view> | ||
| 94 | + </up-popup> | ||
| 95 | + </view> | ||
| 96 | +</template> | ||
| 97 | + | ||
| 98 | +<script setup> | ||
| 99 | +import { ref } from 'vue'; | ||
| 100 | +import navTop from '@/components/navTop.vue'; | ||
| 101 | +import { onLoad } from '@dcloudio/uni-app' | ||
| 102 | +const showPicker = ref(false) | ||
| 103 | +const showTip = ref(true) | ||
| 104 | +const columns = ref([]) | ||
| 105 | +const labelStyle = { | ||
| 106 | + fontSize: '28rpx', | ||
| 107 | + lineHeight: '38rpx', | ||
| 108 | + color: '#3D3D3D' | ||
| 109 | +} | ||
| 110 | +const showList = ref(false) | ||
| 111 | +const icon = ref('arrow-down') | ||
| 112 | +const form = ref({ | ||
| 113 | + name: '', | ||
| 114 | + identificationNumber: '', | ||
| 115 | + sysDeptName: '', | ||
| 116 | + licensePlateNumber: '', | ||
| 117 | + lincensePlateType: '', | ||
| 118 | + frameNumber: '', | ||
| 119 | + engineNumber: '', | ||
| 120 | + vehicleType: '', | ||
| 121 | + vehicleNature: '', | ||
| 122 | + passengersNumber: '', | ||
| 123 | + passengerCapacity: '', | ||
| 124 | + emissions: '', | ||
| 125 | + vehicleModel: '', | ||
| 126 | + vehicleBrand: '', | ||
| 127 | + tractionMass: '', | ||
| 128 | + requirements: '' | ||
| 129 | +}) | ||
| 130 | +onLoad((options) => { | ||
| 131 | + | ||
| 132 | +}) | ||
| 133 | +const getSearch = (value) => { | ||
| 134 | + if(uni.$u.trim(value)){ | ||
| 135 | + showList.value = true | ||
| 136 | + } else { | ||
| 137 | + showList.value = false | ||
| 138 | + } | ||
| 139 | +} | ||
| 140 | +const openSelect = (arr) => { | ||
| 141 | + columns.value = [] | ||
| 142 | + columns.value.push(arr) | ||
| 143 | + showPicker.value = true | ||
| 144 | + icon.value = 'arrow-up' | ||
| 145 | +} | ||
| 146 | +const onCancel = () => { | ||
| 147 | + showPicker.value = false | ||
| 148 | + icon.value = 'arrow-down' | ||
| 149 | +} | ||
| 150 | +const deleteCar = () => { | ||
| 151 | + uni.showModal({ | ||
| 152 | + title: '删除车辆提示', | ||
| 153 | + content: '删除车辆后将无法及时收到投保方案解答与最新优惠,且无法恢复车辆信息。是否继续删除?', | ||
| 154 | + success: function (res) { | ||
| 155 | + if (res.confirm) { | ||
| 156 | + console.log('用户点击确定'); | ||
| 157 | + } else if (res.cancel) { | ||
| 158 | + console.log('用户点击取消'); | ||
| 159 | + } | ||
| 160 | + } | ||
| 161 | + }) | ||
| 162 | +} | ||
| 163 | +</script> | ||
| 164 | + | ||
| 165 | +<style lang="scss" scoped> | ||
| 166 | +.carDetail{ | ||
| 167 | + padding: 20rpx 30rpx 40rpx; | ||
| 168 | + background: #F8F9FF; | ||
| 169 | + .carInfo{ | ||
| 170 | + padding: 22rpx 30rpx; | ||
| 171 | + background: #FFFFFF; | ||
| 172 | + border-radius: 20rpx; | ||
| 173 | + margin-bottom: 20rpx; | ||
| 174 | + .card_title{ | ||
| 175 | + color: #3d3d3d; | ||
| 176 | + font-size: 28rpx; | ||
| 177 | + line-height: 38rpx; | ||
| 178 | + font-weight: 500; | ||
| 179 | + } | ||
| 180 | + .carBand{ | ||
| 181 | + font-size: 24rpx; | ||
| 182 | + color: #333; | ||
| 183 | + margin-bottom: 10rpx; | ||
| 184 | + } | ||
| 185 | + .carModel{ | ||
| 186 | + font-size: 20rpx; | ||
| 187 | + color: #999; | ||
| 188 | + } | ||
| 189 | + .rowLine{ | ||
| 190 | + width: 100%; | ||
| 191 | + height: 2rpx; | ||
| 192 | + background-color: #eee; | ||
| 193 | + margin: 16rpx 0 20rpx; | ||
| 194 | + } | ||
| 195 | + } | ||
| 196 | + | ||
| 197 | + .tip{ | ||
| 198 | + color: #999; | ||
| 199 | + font-size: 20rpx; | ||
| 200 | + line-height: 26rpx; | ||
| 201 | + margin: 20px 0; | ||
| 202 | + } | ||
| 203 | + .btn{ | ||
| 204 | + height: 80rpx; | ||
| 205 | + line-height: 80rpx; | ||
| 206 | + text-align: center; | ||
| 207 | + font-size: 28rpx; | ||
| 208 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 209 | + border-radius: 20rpx; | ||
| 210 | + } | ||
| 211 | + .delBtn{ | ||
| 212 | + color: #999999; | ||
| 213 | + background: #FFFFFF; | ||
| 214 | + margin-bottom: 20rpx; | ||
| 215 | + } | ||
| 216 | + .confirmBtn{ | ||
| 217 | + color: #fff; | ||
| 218 | + background: #3680FE; | ||
| 219 | + } | ||
| 220 | +} | ||
| 221 | +.notice{ | ||
| 222 | + position: relative; | ||
| 223 | + width: 690rpx; | ||
| 224 | + height: 360rpx; | ||
| 225 | + background: #FFFFFF; | ||
| 226 | + padding: 40rpx 30rpx 0; | ||
| 227 | + border-radius: 20rpx; | ||
| 228 | + overflow: hidden; | ||
| 229 | + .notice_title{ | ||
| 230 | + text-align: center; | ||
| 231 | + font-size: 36rpx; | ||
| 232 | + line-height: 48rpx; | ||
| 233 | + color: #3D3D3D; | ||
| 234 | + margin-bottom: 40rpx; | ||
| 235 | + } | ||
| 236 | + .notice_content{ | ||
| 237 | + text-align: center; | ||
| 238 | + font-size: 28rpx; | ||
| 239 | + line-height: 38rpx; | ||
| 240 | + color: #999; | ||
| 241 | + } | ||
| 242 | + .btn{ | ||
| 243 | + position: absolute; | ||
| 244 | + bottom: 0; | ||
| 245 | + left: 0; | ||
| 246 | + width: 100%; | ||
| 247 | + line-height: 100rpx; | ||
| 248 | + text-align: center; | ||
| 249 | + height: 100rpx; | ||
| 250 | + color: #3680FE; | ||
| 251 | + font-size: 28rpx; | ||
| 252 | + border-top: 2rpx solid #eee; | ||
| 253 | + } | ||
| 254 | +} | ||
| 255 | + | ||
| 256 | +.carModelBox{ | ||
| 257 | + position: relative; | ||
| 258 | + padding: 20rpx 0; | ||
| 259 | + .model_line{ | ||
| 260 | + display: flex; | ||
| 261 | + align-items: center; | ||
| 262 | + .leftContent{ | ||
| 263 | + width: 130px; | ||
| 264 | + font-size: 28rpx; | ||
| 265 | + line-height: 38rpx; | ||
| 266 | + color: #3d3d3d; | ||
| 267 | + } | ||
| 268 | + } | ||
| 269 | + .searchList{ | ||
| 270 | + position: absolute; | ||
| 271 | + bottom: 200%; | ||
| 272 | + left: 0; | ||
| 273 | + width: 100%; | ||
| 274 | + background-color: #fff; | ||
| 275 | + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; | ||
| 276 | + z-index: 9; | ||
| 277 | + border-radius: 20rpx; | ||
| 278 | + padding: 20rpx 30rpx; | ||
| 279 | + transition: all .5s; | ||
| 280 | + &::after{ | ||
| 281 | + position: absolute; | ||
| 282 | + bottom: -50rpx; | ||
| 283 | + left: 20rpx; | ||
| 284 | + content: ''; | ||
| 285 | + width: 0px; | ||
| 286 | + height: 0px; | ||
| 287 | + border: 30rpx solid transparent; | ||
| 288 | + border-top-color: #fff; | ||
| 289 | + } | ||
| 290 | + } | ||
| 291 | +} | ||
| 292 | +</style> |
pages/companyHome/companyHome.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="company_container"> | ||
| 3 | + <up-navbar placeholder :leftIconSize="0" bgColor="transparent" /> | ||
| 4 | + <view class="work_box"> | ||
| 5 | + <!-- 头部导航 --> | ||
| 6 | + <view class="nav_header"> | ||
| 7 | + <view class="nav_item" :class="{ active: expertActive === 0 }" @click="expertActive = 0">待办事项</view> | ||
| 8 | + <view class="colLine"></view> | ||
| 9 | + <view class="nav_item" :class="{ active: expertActive === 1 }" @click="expertActive = 1">车主信息</view> | ||
| 10 | + </view> | ||
| 11 | + <!-- 内容模块 --> | ||
| 12 | + <view class="expert_content"> | ||
| 13 | + <swiper class="swiper" circular :current="expertActive" @animationfinish="toggleSwiper"> | ||
| 14 | + <swiper-item> | ||
| 15 | + <view class="swiper-item"> | ||
| 16 | + <scroll-view scroll-y="true" class="scroll-history"> | ||
| 17 | + <view class="work_list"> | ||
| 18 | + <carCard v-for="carItem in carList" :key="carItem.carId" tipContent="待办" :carInfo="carItem"> | ||
| 19 | + <template #header> | ||
| 20 | + <navTop :carNum="carItem.carNum" /> | ||
| 21 | + </template> | ||
| 22 | + <template #center> | ||
| 23 | + <wordInfo :carType="carItem.carType" :userName="carItem.name" :applyTime="carItem.createTime" /> | ||
| 24 | + </template> | ||
| 25 | + <template #footer> | ||
| 26 | + <centerLine></centerLine> | ||
| 27 | + </template> | ||
| 28 | + </carCard> | ||
| 29 | + </view> | ||
| 30 | + </scroll-view> | ||
| 31 | + </view> | ||
| 32 | + </swiper-item> | ||
| 33 | + <swiper-item> | ||
| 34 | + <view class="swiper-item"> | ||
| 35 | + <scroll-view scroll-y="true" class="scroll-history"> | ||
| 36 | + <view class="work_list"> | ||
| 37 | + <carCard v-for="carItem in carList" :key="carItem.carId" tipContent="查看详情" :carInfo="carItem" @onSkip="goCarDetail"> | ||
| 38 | + <template #header> | ||
| 39 | + <navTop :carNum="carItem.carNum" /> | ||
| 40 | + </template> | ||
| 41 | + <template #center> | ||
| 42 | + <ownerInfo /> | ||
| 43 | + </template> | ||
| 44 | + <template #footer> | ||
| 45 | + <view class="delInfo"> | ||
| 46 | + <text @click="delOwnerInfo(carItem.carId)">删除车主信息</text> | ||
| 47 | + </view> | ||
| 48 | + </template> | ||
| 49 | + </carCard> | ||
| 50 | + </view> | ||
| 51 | + </scroll-view> | ||
| 52 | + </view> | ||
| 53 | + </swiper-item> | ||
| 54 | + </swiper> | ||
| 55 | + </view> | ||
| 56 | + | ||
| 57 | + </view> | ||
| 58 | + <!-- 底部导航栏 --> | ||
| 59 | + <up-tabbar | ||
| 60 | + :value="useTabbar.employeeCurrent" | ||
| 61 | + activeColor="#3680FE" | ||
| 62 | + inactiveColor="#707070" | ||
| 63 | + > | ||
| 64 | + <up-tabbar-item text="主页" icon="home" badge="11"></up-tabbar-item> | ||
| 65 | + <up-tabbar-item text="我的" icon="account" @click="goRouter"> | ||
| 66 | + <template #active-icon> | ||
| 67 | + <image style="width: 48rpx;" class="u-page__item__slot-icon" src="@/static/tabbarIcon/my-active.png" mode="widthFix"></image> | ||
| 68 | + </template> | ||
| 69 | + <template #inactive-icon> | ||
| 70 | + <image style="width: 48rpx;" class="u-page__item__slot-icon" src="@/static/tabbarIcon/my.png" mode="widthFix"></image> | ||
| 71 | + </template> | ||
| 72 | + </up-tabbar-item> | ||
| 73 | + </up-tabbar> | ||
| 74 | + </view> | ||
| 75 | +</template> | ||
| 76 | + | ||
| 77 | +<script setup> | ||
| 78 | + import { ref } from 'vue'; | ||
| 79 | + import carCard from '@/components/carCard.vue'; | ||
| 80 | + import centerLine from '@/components/centerLine.vue'; | ||
| 81 | + import wordInfo from '@/components/wordInfo.vue'; | ||
| 82 | + import navTop from '@/components/navTop.vue'; | ||
| 83 | + import ownerInfo from '@/components/ownerInfo.vue'; | ||
| 84 | + import useTabbarStore from '@/store/modules/tabbar.js' | ||
| 85 | + const useTabbar = useTabbarStore() | ||
| 86 | + const carList = ref([ | ||
| 87 | + { carId: 1, carNum: '桂A·66666', carType: '奔驰C级', name: '张三', createTime: '2024-09-08 10:12' }, | ||
| 88 | + { carId: 2, carNum: '桂A·77777', carType: '奔驰C级', name: '李四', createTime: '2024-09-08 10:12' }, | ||
| 89 | + { carId: 3, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 90 | + { carId: 4, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 91 | + { carId: 5, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 92 | + { carId: 6, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 93 | + { carId: 7, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 94 | + { carId: 8, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 95 | + { carId: 9, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 96 | + { carId: 10, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 97 | + { carId: 11, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 98 | + ]) | ||
| 99 | + const expertActive = ref(0) | ||
| 100 | + // 检测手机滑动 | ||
| 101 | + const toggleSwiper = (event) => { | ||
| 102 | + expertActive.value = event.detail?.current | ||
| 103 | + } | ||
| 104 | + // 删除车主信息 | ||
| 105 | + const delOwnerInfo = (id) => { | ||
| 106 | + uni.showModal({ | ||
| 107 | + title: '删除车主信息', | ||
| 108 | + content: '是否删除车主信息,该操作不可逆?', | ||
| 109 | + success: function (res) { | ||
| 110 | + if (res.confirm) { | ||
| 111 | + uni.$u.toast('删除成功') | ||
| 112 | + } else if (res.cancel) { | ||
| 113 | + console.log('用户点击取消'); | ||
| 114 | + } | ||
| 115 | + } | ||
| 116 | + }) | ||
| 117 | + } | ||
| 118 | + | ||
| 119 | + const goRouter = (index) => { | ||
| 120 | + useTabbar.employeeCurrent = index | ||
| 121 | + uni.redirectTo({ | ||
| 122 | + url: '/pages/companyMy/companyMy' | ||
| 123 | + }) | ||
| 124 | + } | ||
| 125 | + // 车主详情 | ||
| 126 | + const goCarDetail = () => { | ||
| 127 | + uni.navigateTo({ | ||
| 128 | + url: '/pages/ownerDetail/ownerDetail' | ||
| 129 | + }) | ||
| 130 | + } | ||
| 131 | +</script> | ||
| 132 | + | ||
| 133 | +<style lang="scss" scoped> | ||
| 134 | +.company_container{ | ||
| 135 | + width: 100%; | ||
| 136 | + height: 100vh; | ||
| 137 | + background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat; | ||
| 138 | + background-size: 100% 100%; | ||
| 139 | + overflow: hidden; | ||
| 140 | + .work_box{ | ||
| 141 | + height: calc(100vh - 88rpx); | ||
| 142 | + background-color: #F8F9FF; | ||
| 143 | + .nav_header{ | ||
| 144 | + display: flex; | ||
| 145 | + align-items: center; | ||
| 146 | + width: 100%; | ||
| 147 | + height: 80rpx; | ||
| 148 | + background: #FFFFFF; | ||
| 149 | + .nav_item{ | ||
| 150 | + flex: 1; | ||
| 151 | + text-align: center; | ||
| 152 | + height: 80rpx; | ||
| 153 | + line-height: 80rpx; | ||
| 154 | + font-size: 28rpx; | ||
| 155 | + color: #999; | ||
| 156 | + &.active{ | ||
| 157 | + font-weight: 500; | ||
| 158 | + color: #333; | ||
| 159 | + } | ||
| 160 | + } | ||
| 161 | + .colLine{ | ||
| 162 | + width: 2rpx; | ||
| 163 | + height: 40rpx; | ||
| 164 | + background: #D8D8D8; | ||
| 165 | + } | ||
| 166 | + } | ||
| 167 | + | ||
| 168 | + .work_list{ | ||
| 169 | + padding: 20rpx 30rpx 200rpx; | ||
| 170 | + display: flex; | ||
| 171 | + flex-direction: column; | ||
| 172 | + gap: 20rpx; | ||
| 173 | + } | ||
| 174 | + } | ||
| 175 | +} | ||
| 176 | +.delInfo{ | ||
| 177 | + font-size: 20rpx; | ||
| 178 | + line-height: 26rpx; | ||
| 179 | + color: #3680FE; | ||
| 180 | +} | ||
| 181 | +.scroll-history { | ||
| 182 | + height: calc(100vh - 256rpx); | ||
| 183 | +} | ||
| 184 | +.swiper { | ||
| 185 | + height: calc(100vh - 256rpx); | ||
| 186 | +} | ||
| 187 | +</style> |
pages/companyMy/companyMy.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="app-container"> | ||
| 3 | + <up-navbar placeholder :leftIconSize="0" bgColor="transparent" /> | ||
| 4 | + <view class="car_list"> | ||
| 5 | + <view class="line_title"> | ||
| 6 | + <text class="left_title" style="color: #fff;">我的信息</text> | ||
| 7 | + <text style="color: #fff;">更新实名信息</text> | ||
| 8 | + </view> | ||
| 9 | + <view class="user-box"> | ||
| 10 | + <up-form :model="userForm" ref="userFormRef"> | ||
| 11 | + <up-form-item prop="name"> | ||
| 12 | + <up-input v-model="userForm.name" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入真实姓名"> | ||
| 13 | + <template #prefix> | ||
| 14 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/user.png" mode="widthFix"></image> | ||
| 15 | + </template> | ||
| 16 | + </up-input> | ||
| 17 | + </up-form-item> | ||
| 18 | + <up-form-item prop="identificationNumber"> | ||
| 19 | + <up-input v-model="userForm.identificationNumber" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号"> | ||
| 20 | + <template #prefix> | ||
| 21 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image> | ||
| 22 | + </template> | ||
| 23 | + </up-input> | ||
| 24 | + </up-form-item> | ||
| 25 | + <up-form-item prop="phone"> | ||
| 26 | + <up-input v-model="userForm.phone" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入手机号码"> | ||
| 27 | + <template #prefix> | ||
| 28 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/phone.png" mode="widthFix"></image> | ||
| 29 | + </template> | ||
| 30 | + </up-input> | ||
| 31 | + </up-form-item> | ||
| 32 | + </up-form> | ||
| 33 | + </view> | ||
| 34 | + <view class="line_title"> | ||
| 35 | + <text class="left_title">状态设置</text> | ||
| 36 | + </view> | ||
| 37 | + | ||
| 38 | + <view class="status"> | ||
| 39 | + <view class="statusBtn" :class="{active: status === 0}" @click="status = 0">在岗</view> | ||
| 40 | + <view class="statusBtn" :class="{active: status === 1}" @click="status = 1">离岗</view> | ||
| 41 | + </view> | ||
| 42 | + | ||
| 43 | + <view class="loginBtn" @click="loginOut">退出登录</view> | ||
| 44 | + </view> | ||
| 45 | + <!-- 底部导航栏 --> | ||
| 46 | + <up-tabbar | ||
| 47 | + :value="useTabbar.employeeCurrent" | ||
| 48 | + activeColor="#3680FE" | ||
| 49 | + inactiveColor="#707070" | ||
| 50 | + > | ||
| 51 | + <up-tabbar-item text="主页" icon="home" @click="goRouter"></up-tabbar-item> | ||
| 52 | + <up-tabbar-item text="我的" icon="account"></up-tabbar-item> | ||
| 53 | + </up-tabbar> | ||
| 54 | + </view> | ||
| 55 | +</template> | ||
| 56 | + | ||
| 57 | +<script setup> | ||
| 58 | +import { ref } from 'vue' | ||
| 59 | +import { onReady } from '@dcloudio/uni-app' | ||
| 60 | +import useTabbarStore from '@/store/modules/tabbar.js' | ||
| 61 | +const useTabbar = useTabbarStore() | ||
| 62 | +const status = ref(0) | ||
| 63 | +const showNotice = ref(true) | ||
| 64 | +// 用户参数 | ||
| 65 | +const userForm = ref({ | ||
| 66 | + name: '', | ||
| 67 | + identificationNumber: '', | ||
| 68 | + phone: '' | ||
| 69 | +}) | ||
| 70 | +const customStyle = { | ||
| 71 | + height: '80rpx', | ||
| 72 | + backgroundColor: '#F9F9F9', | ||
| 73 | + paddingLeft: '40rpx' | ||
| 74 | +} | ||
| 75 | +const placeholderStyle = { | ||
| 76 | + color: '#bbb', | ||
| 77 | + fontSize: '28rpx' | ||
| 78 | +} | ||
| 79 | +// 表单引用 | ||
| 80 | +const userFormRef = ref(null) | ||
| 81 | +// 校验规则 | ||
| 82 | +const rules = { | ||
| 83 | + name: [ | ||
| 84 | + { required: true, message: '请输入姓名', trigger: ['blur', 'change'] }, | ||
| 85 | + { min: 2, max: 6, message: '名字应在2到6个字', trigger: ['blur', 'change'] }, | ||
| 86 | + { validator: (rule, value, callback) => { | ||
| 87 | + return uni.$u.test.chinese(value) | ||
| 88 | + }, | ||
| 89 | + message: '请输入中文', | ||
| 90 | + // 触发器可以同时用blur和change | ||
| 91 | + trigger: ['change','blur'], | ||
| 92 | + } | ||
| 93 | + ], | ||
| 94 | + identificationNumber: [ | ||
| 95 | + { required: true, message: '请输入身份证号', trigger: ['blur', 'change'] }, | ||
| 96 | + { validator: (rule, value, callback) => { | ||
| 97 | + return uni.$u.test.idCard(value) | ||
| 98 | + }, | ||
| 99 | + message: '身份证号码不正确', | ||
| 100 | + // 触发器可以同时用blur和change | ||
| 101 | + trigger: ['change','blur'], | ||
| 102 | + } | ||
| 103 | + ], | ||
| 104 | + phone: [ | ||
| 105 | + { required: true, message: '请输入手机号', trigger: ['blur', 'change'] }, | ||
| 106 | + { validator: (rule, value, callback) => { | ||
| 107 | + return uni.$u.test.mobile(value) | ||
| 108 | + }, | ||
| 109 | + message: '手机号码不正确', | ||
| 110 | + // 触发器可以同时用blur和change | ||
| 111 | + trigger: ['change','blur'], | ||
| 112 | + } | ||
| 113 | + ] | ||
| 114 | +} | ||
| 115 | +// 微信小程序需要在此注册校验规则 | ||
| 116 | +onReady(() => { | ||
| 117 | + userFormRef.value.setRules(rules) | ||
| 118 | +}) | ||
| 119 | +const loginOut = () => { | ||
| 120 | + | ||
| 121 | +} | ||
| 122 | + | ||
| 123 | +const goRouter = (index) => { | ||
| 124 | + useTabbar.employeeCurrent = index | ||
| 125 | + uni.redirectTo({ | ||
| 126 | + url: '/pages/companyHome/companyHome' | ||
| 127 | + }) | ||
| 128 | +} | ||
| 129 | +// 提交方法 | ||
| 130 | +const submit = () => { | ||
| 131 | + userFormRef.value.validate().then(async valid => { | ||
| 132 | + if (valid) { | ||
| 133 | + uni.$u.toast('登录成功') | ||
| 134 | + } else { | ||
| 135 | + uni.$u.toast('校验失败') | ||
| 136 | + } | ||
| 137 | + }).catch(() => { | ||
| 138 | + // 处理验证错误 | ||
| 139 | + uni.$u.toast('校验失败') | ||
| 140 | + }); | ||
| 141 | +} | ||
| 142 | +</script> | ||
| 143 | + | ||
| 144 | +<style lang="scss" scoped> | ||
| 145 | +.app-container{ | ||
| 146 | + width: 100%; | ||
| 147 | + height: 100vh; | ||
| 148 | + padding: 0 30rpx; | ||
| 149 | + background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat; | ||
| 150 | + background-size: 100% 100%; | ||
| 151 | + overflow: hidden; | ||
| 152 | + | ||
| 153 | + .user-box{ | ||
| 154 | + width: 690rpx; | ||
| 155 | + padding: 40rpx 44rpx; | ||
| 156 | + background-color: #fff; | ||
| 157 | + z-index: 10; | ||
| 158 | + margin: 0 auto 40rpx; | ||
| 159 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 160 | + border-radius: 40rpx; | ||
| 161 | + } | ||
| 162 | + | ||
| 163 | + // 车辆列表 | ||
| 164 | + .car_list{ | ||
| 165 | + display: flex; | ||
| 166 | + flex-direction: column; | ||
| 167 | + gap: 20rpx; | ||
| 168 | + .line_title{ | ||
| 169 | + display: flex; | ||
| 170 | + justify-content: space-between; | ||
| 171 | + font-size: 24rpx; | ||
| 172 | + color: #999; | ||
| 173 | + line-height: 32rpx; | ||
| 174 | + .left_title{ | ||
| 175 | + font-size: 32rpx; | ||
| 176 | + line-height: 42rpx; | ||
| 177 | + color: #333; | ||
| 178 | + } | ||
| 179 | + } | ||
| 180 | + .car_data{ | ||
| 181 | + padding: 0 30rpx; | ||
| 182 | + background: #FFFFFF; | ||
| 183 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 184 | + border-radius: 40rpx; | ||
| 185 | + margin-bottom: 60rpx; | ||
| 186 | + .car_item{ | ||
| 187 | + padding: 30rpx 0; | ||
| 188 | + border-bottom: 2rpx solid #eee; | ||
| 189 | + &:last-child{ | ||
| 190 | + border-bottom: 0; | ||
| 191 | + } | ||
| 192 | + } | ||
| 193 | + } | ||
| 194 | + .loginBtn{ | ||
| 195 | + width: 100%; | ||
| 196 | + height: 80rpx; | ||
| 197 | + line-height: 80rpx; | ||
| 198 | + text-align: center; | ||
| 199 | + font-size: 28rpx; | ||
| 200 | + color: #fff; | ||
| 201 | + font-weight: 500; | ||
| 202 | + background: #3680FE; | ||
| 203 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 204 | + border-radius: 40rpx; | ||
| 205 | + margin-top: 40rpx; | ||
| 206 | + } | ||
| 207 | + } | ||
| 208 | +} | ||
| 209 | + | ||
| 210 | +.status{ | ||
| 211 | + display: flex; | ||
| 212 | + align-items: center; | ||
| 213 | + justify-content: space-between; | ||
| 214 | + padding: 40rpx 46rpx; | ||
| 215 | + background: #FFFFFF; | ||
| 216 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 217 | + border-radius: 40rpx; | ||
| 218 | + .statusBtn{ | ||
| 219 | + width: 280rpx; | ||
| 220 | + height: 80rpx; | ||
| 221 | + text-align: center; | ||
| 222 | + line-height: 80rpx; | ||
| 223 | + color: #999; | ||
| 224 | + background: #FFFFFF; | ||
| 225 | + border-radius: 200rpx; | ||
| 226 | + border: 2rpx solid #BBBBBB; | ||
| 227 | + &.active{ | ||
| 228 | + color: #fff; | ||
| 229 | + background: #75A8FF; | ||
| 230 | + } | ||
| 231 | + } | ||
| 232 | +} | ||
| 233 | +</style> |
pages/index/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="app-container"> | ||
| 3 | + <up-navbar placeholder :leftIconSize="0" bgColor="transparent" /> | ||
| 4 | + <view class="car_list"> | ||
| 5 | + <view class="title">车辆管理</view> | ||
| 6 | + <carCard v-for="carItem in carList" :key="carItem.carId" :carInfo="carItem"> | ||
| 7 | + <template #header> | ||
| 8 | + <navTop :carNum="carItem.carNum" /> | ||
| 9 | + </template> | ||
| 10 | + <template #center> | ||
| 11 | + <centerLine :leftContent="carItem.carBrand" fontColor="#999" :rightContent="carItem.address"></centerLine> | ||
| 12 | + </template> | ||
| 13 | + <template #footer> | ||
| 14 | + <centerLine></centerLine> | ||
| 15 | + </template> | ||
| 16 | + </carCard> | ||
| 17 | + <view class="addBtn" @click="addCarInfo">登记车辆保险信息</view> | ||
| 18 | + </view> | ||
| 19 | + | ||
| 20 | + <up-popup :show="showNotice" mode="center" :safeAreaInsetBottom="false" round="20" @close="showNotice = false"> | ||
| 21 | + <view class="notice"> | ||
| 22 | + <view class="notice_title">通知公告</view> | ||
| 23 | + <view class="notice_content"> | ||
| 24 | + 1.我是公告我是公告我是公告我是公告我是公告我是公告我是公告我是公告我是公告 | ||
| 25 | + 2.我是公告我是公告我是公告我是公告我是公告我是公告我是公告我是公告我是公告我是公告我是公告我是公告我是公告 | ||
| 26 | + 3.我是公告我是公告我是公告我是公告 | ||
| 27 | + </view> | ||
| 28 | + <view class="btn" @click="showNotice = false">确认</view> | ||
| 29 | + </view> | ||
| 30 | + </up-popup> | ||
| 31 | + </view> | ||
| 32 | +</template> | ||
| 33 | + | ||
| 34 | +<script setup> | ||
| 35 | +import { ref } from 'vue' | ||
| 36 | +import carCard from '@/components/carCard.vue'; | ||
| 37 | +import centerLine from '@/components/centerLine.vue'; | ||
| 38 | +import navTop from '@/components/navTop.vue'; | ||
| 39 | +const showNotice = ref(true) | ||
| 40 | +const carList = ref([ | ||
| 41 | + { carId: 1, carNum: '桂A·66666', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 0 }, | ||
| 42 | + { carId: 2, carNum: '桂A·77777', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 1 }, | ||
| 43 | + { carId: 3, carNum: '桂A·77777', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 2 } | ||
| 44 | +]) | ||
| 45 | +const addCarInfo = () => { | ||
| 46 | + uni.navigateTo({ | ||
| 47 | + url: '/pages/carDetail/carDetail' | ||
| 48 | + }) | ||
| 49 | +} | ||
| 50 | +</script> | ||
| 51 | + | ||
| 52 | +<style lang="scss" scoped> | ||
| 53 | +.app-container{ | ||
| 54 | + width: 100%; | ||
| 55 | + height: 100vh; | ||
| 56 | + padding: 0 30rpx; | ||
| 57 | + background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat; | ||
| 58 | + background-size: 100% 100%; | ||
| 59 | + overflow: hidden; | ||
| 60 | + .car_list{ | ||
| 61 | + display: flex; | ||
| 62 | + flex-direction: column; | ||
| 63 | + gap: 20rpx; | ||
| 64 | + .title{ | ||
| 65 | + font-size: 32rpx; | ||
| 66 | + line-height: 42rpx; | ||
| 67 | + color: #fff; | ||
| 68 | + } | ||
| 69 | + .addBtn{ | ||
| 70 | + width: 100%; | ||
| 71 | + height: 80rpx; | ||
| 72 | + line-height: 80rpx; | ||
| 73 | + text-align: center; | ||
| 74 | + font-size: 28rpx; | ||
| 75 | + color: #3d3d3d; | ||
| 76 | + font-weight: 500; | ||
| 77 | + background: #FFFFFF; | ||
| 78 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 79 | + border-radius: 20rpx; | ||
| 80 | + } | ||
| 81 | + } | ||
| 82 | +} | ||
| 83 | +.notice{ | ||
| 84 | + position: relative; | ||
| 85 | + width: 690rpx; | ||
| 86 | + height: 600rpx; | ||
| 87 | + background: #FFFFFF; | ||
| 88 | + padding: 40rpx 30rpx 0; | ||
| 89 | + border-radius: 20rpx; | ||
| 90 | + overflow: hidden; | ||
| 91 | + .notice_title{ | ||
| 92 | + text-align: center; | ||
| 93 | + font-size: 36rpx; | ||
| 94 | + line-height: 48rpx; | ||
| 95 | + color: #3D3D3D; | ||
| 96 | + margin-bottom: 40rpx; | ||
| 97 | + } | ||
| 98 | + .notice_content{ | ||
| 99 | + font-size: 28rpx; | ||
| 100 | + line-height: 38rpx; | ||
| 101 | + color: #999; | ||
| 102 | + } | ||
| 103 | + .btn{ | ||
| 104 | + position: absolute; | ||
| 105 | + bottom: 0; | ||
| 106 | + left: 0; | ||
| 107 | + width: 100%; | ||
| 108 | + line-height: 100rpx; | ||
| 109 | + text-align: center; | ||
| 110 | + height: 100rpx; | ||
| 111 | + color: #3680FE; | ||
| 112 | + font-size: 28rpx; | ||
| 113 | + border-top: 2rpx solid #eee; | ||
| 114 | + } | ||
| 115 | +} | ||
| 116 | +</style> |
pages/login/login.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="login-container"> | ||
| 3 | + | ||
| 4 | + <view class="login-box"> | ||
| 5 | + <up-form :model="logForm" ref="logFormRef"> | ||
| 6 | + <up-form-item prop="name"> | ||
| 7 | + <up-input v-model="logForm.name" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入真实姓名"> | ||
| 8 | + <template #prefix> | ||
| 9 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/user.png" mode="widthFix"></image> | ||
| 10 | + </template> | ||
| 11 | + </up-input> | ||
| 12 | + </up-form-item> | ||
| 13 | + <up-form-item prop="identificationNumber"> | ||
| 14 | + <up-input v-model="logForm.identificationNumber" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号"> | ||
| 15 | + <template #prefix> | ||
| 16 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image> | ||
| 17 | + </template> | ||
| 18 | + </up-input> | ||
| 19 | + </up-form-item> | ||
| 20 | + </up-form> | ||
| 21 | + </view> | ||
| 22 | + | ||
| 23 | + <view class="tip"> | ||
| 24 | + 未注册或绑定该车型平台的身份证号,将帮你注册新账号,点击登录即代表你同意<text style="color: #3680FE;" @click="goPrivacy">《隐私政策》</text> | ||
| 25 | + </view> | ||
| 26 | + <view class="log-btn" @click="submit">登录</view> | ||
| 27 | + </view> | ||
| 28 | +</template> | ||
| 29 | + | ||
| 30 | +<script setup> | ||
| 31 | +import { reactive, ref } from 'vue'; | ||
| 32 | +import { onReady } from '@dcloudio/uni-app' | ||
| 33 | +// 登录参数 | ||
| 34 | +const logForm = ref({ | ||
| 35 | + name: '', | ||
| 36 | + identificationNumber: '' | ||
| 37 | +}) | ||
| 38 | +// 表单引用 | ||
| 39 | +const logFormRef = ref(null) | ||
| 40 | +// 校验规则 | ||
| 41 | +const rules = { | ||
| 42 | + name: [ | ||
| 43 | + { required: true, message: '请输入姓名', trigger: ['blur', 'change'] }, | ||
| 44 | + { min: 2, max: 6, message: '名字应在2到6个字', trigger: ['blur', 'change'] }, | ||
| 45 | + { validator: (rule, value, callback) => { | ||
| 46 | + return uni.$u.test.chinese(value) | ||
| 47 | + }, | ||
| 48 | + message: '请输入中文', | ||
| 49 | + // 触发器可以同时用blur和change | ||
| 50 | + trigger: ['change','blur'], | ||
| 51 | + } | ||
| 52 | + ], | ||
| 53 | + identificationNumber: [ | ||
| 54 | + { required: true, message: '请输入身份证号', trigger: ['blur', 'change'] }, | ||
| 55 | + { validator: (rule, value, callback) => { | ||
| 56 | + return uni.$u.test.idCard(value) | ||
| 57 | + }, | ||
| 58 | + message: '身份证号码不正确', | ||
| 59 | + // 触发器可以同时用blur和change | ||
| 60 | + trigger: ['change','blur'], | ||
| 61 | + } | ||
| 62 | + ] | ||
| 63 | +} | ||
| 64 | +const customStyle = { | ||
| 65 | + height: '80rpx', | ||
| 66 | + backgroundColor: '#F9F9F9', | ||
| 67 | + paddingLeft: '40rpx' | ||
| 68 | +} | ||
| 69 | +const placeholderStyle = { | ||
| 70 | + color: '#bbb', | ||
| 71 | + fontSize: '28rpx' | ||
| 72 | +} | ||
| 73 | +// 微信小程序需要在此注册校验规则 | ||
| 74 | +onReady(() => { | ||
| 75 | + logFormRef.value.setRules(rules) | ||
| 76 | +}) | ||
| 77 | + | ||
| 78 | +const goPrivacy = () => { | ||
| 79 | + uni.navigateTo({ | ||
| 80 | + url: '/pages/privacy/privacy' | ||
| 81 | + }) | ||
| 82 | +} | ||
| 83 | +// 提交方法 | ||
| 84 | +const submit = () => { | ||
| 85 | + logFormRef.value.validate().then(async valid => { | ||
| 86 | + if (valid) { | ||
| 87 | + uni.$u.toast('登录成功') | ||
| 88 | + } else { | ||
| 89 | + uni.$u.toast('校验失败') | ||
| 90 | + } | ||
| 91 | + }).catch(() => { | ||
| 92 | + // 处理验证错误 | ||
| 93 | + uni.$u.toast('校验失败') | ||
| 94 | + }); | ||
| 95 | +} | ||
| 96 | +</script> | ||
| 97 | + | ||
| 98 | +<style lang="scss" scoped> | ||
| 99 | +.login-container{ | ||
| 100 | + width: 100%; | ||
| 101 | + height: 100vh; | ||
| 102 | + background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-login_20240925112841A003.png') no-repeat; | ||
| 103 | + background-size: 100% 100%; | ||
| 104 | + overflow: hidden; | ||
| 105 | + .login-box{ | ||
| 106 | + width: 690rpx; | ||
| 107 | + padding: 40rpx 44rpx; | ||
| 108 | + background-color: #fff; | ||
| 109 | + z-index: 10; | ||
| 110 | + margin: 442rpx auto 40rpx; | ||
| 111 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 112 | + border-radius: 40rpx; | ||
| 113 | + .employeeStatus{ | ||
| 114 | + display: flex; | ||
| 115 | + align-items: center; | ||
| 116 | + gap: 40rpx; | ||
| 117 | + margin-top: 30rpx; | ||
| 118 | + .btn{ | ||
| 119 | + flex: 1; | ||
| 120 | + height: 80rpx; | ||
| 121 | + background: #FFFFFF; | ||
| 122 | + border-radius: 200rpx; | ||
| 123 | + border: 2rpx solid #BBBBBB; | ||
| 124 | + font-size: 28rpx; | ||
| 125 | + text-align: center; | ||
| 126 | + line-height: 80rpx; | ||
| 127 | + color: #999; | ||
| 128 | + &.active{ | ||
| 129 | + background: #75A8FF; | ||
| 130 | + color: #fff; | ||
| 131 | + } | ||
| 132 | + } | ||
| 133 | + } | ||
| 134 | + } | ||
| 135 | + .tip{ | ||
| 136 | + color: #666; | ||
| 137 | + font-size: 24rpx; | ||
| 138 | + line-height: 28rpx; | ||
| 139 | + padding: 0 40rpx; | ||
| 140 | + margin-bottom: 20rpx; | ||
| 141 | + } | ||
| 142 | + .log-btn{ | ||
| 143 | + width: 690rpx; | ||
| 144 | + height: 80rpx; | ||
| 145 | + line-height: 80rpx; | ||
| 146 | + text-align: center; | ||
| 147 | + background: #3680FE; | ||
| 148 | + font-size: 28rpx; | ||
| 149 | + margin: 0 auto; | ||
| 150 | + color: #fff; | ||
| 151 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 152 | + border-radius: 200rpx; | ||
| 153 | + } | ||
| 154 | +} | ||
| 155 | +</style> |
pages/my/my.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="app-container"> | ||
| 3 | + <up-navbar placeholder :leftIconSize="0" bgColor="transparent" /> | ||
| 4 | + <view class="car_list"> | ||
| 5 | + <view class="line_title"> | ||
| 6 | + <text class="left_title" style="color: #fff;">我的信息</text> | ||
| 7 | + <text style="color: #fff;">去实名认证</text> | ||
| 8 | + </view> | ||
| 9 | + <view class="user-box"> | ||
| 10 | + <up-form :model="userForm" ref="userFormRef"> | ||
| 11 | + <up-form-item prop="name"> | ||
| 12 | + <up-input v-model="userForm.name" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入真实姓名"> | ||
| 13 | + <template #prefix> | ||
| 14 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/user.png" mode="widthFix"></image> | ||
| 15 | + </template> | ||
| 16 | + </up-input> | ||
| 17 | + </up-form-item> | ||
| 18 | + <up-form-item prop="identificationNumber"> | ||
| 19 | + <up-input v-model="userForm.identificationNumber" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号"> | ||
| 20 | + <template #prefix> | ||
| 21 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image> | ||
| 22 | + </template> | ||
| 23 | + </up-input> | ||
| 24 | + </up-form-item> | ||
| 25 | + <up-form-item prop="phone"> | ||
| 26 | + <up-input v-model="userForm.phone" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号"> | ||
| 27 | + <template #prefix> | ||
| 28 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image> | ||
| 29 | + </template> | ||
| 30 | + </up-input> | ||
| 31 | + </up-form-item> | ||
| 32 | + </up-form> | ||
| 33 | + </view> | ||
| 34 | + <view class="line_title"> | ||
| 35 | + <text class="left_title">我的车辆</text> | ||
| 36 | + <text>去修改车辆信息</text> | ||
| 37 | + </view> | ||
| 38 | + | ||
| 39 | + <view class="car_data"> | ||
| 40 | + <view v-for="carItem in carList" :key="carItem.carId" class="car_item"> | ||
| 41 | + <navTop :carNum="carItem.carNum" /> | ||
| 42 | + <centerLine :leftContent="carItem.carBrand" fontColor="#999" :rightContent="carItem.address" /> | ||
| 43 | + </view> | ||
| 44 | + </view> | ||
| 45 | + <view class="loginBtn" @click="addCarInfo">退出登录</view> | ||
| 46 | + </view> | ||
| 47 | + </view> | ||
| 48 | +</template> | ||
| 49 | + | ||
| 50 | +<script setup> | ||
| 51 | +import { ref } from 'vue' | ||
| 52 | +import { onReady } from '@dcloudio/uni-app' | ||
| 53 | +import centerLine from '@/components/centerLine.vue'; | ||
| 54 | +import navTop from '@/components/navTop.vue'; | ||
| 55 | +const showNotice = ref(true) | ||
| 56 | +const carList = ref([ | ||
| 57 | + { carId: 1, carNum: '桂A·66666', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 0 }, | ||
| 58 | + { carId: 2, carNum: '桂A·77777', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 1 }, | ||
| 59 | + { carId: 3, carNum: '桂A·77777', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 2 } | ||
| 60 | +]) | ||
| 61 | +// 用户参数 | ||
| 62 | +const userForm = ref({ | ||
| 63 | + name: '', | ||
| 64 | + identificationNumber: '', | ||
| 65 | + phone: '' | ||
| 66 | +}) | ||
| 67 | +const customStyle = { | ||
| 68 | + height: '80rpx', | ||
| 69 | + backgroundColor: '#F9F9F9', | ||
| 70 | + paddingLeft: '40rpx' | ||
| 71 | +} | ||
| 72 | +const placeholderStyle = { | ||
| 73 | + color: '#bbb', | ||
| 74 | + fontSize: '28rpx' | ||
| 75 | +} | ||
| 76 | +// 表单引用 | ||
| 77 | +const userFormRef = ref(null) | ||
| 78 | +// 校验规则 | ||
| 79 | +const rules = { | ||
| 80 | + name: [ | ||
| 81 | + { required: true, message: '请输入姓名', trigger: ['blur', 'change'] }, | ||
| 82 | + { min: 2, max: 6, message: '名字应在2到6个字', trigger: ['blur', 'change'] }, | ||
| 83 | + { validator: (rule, value, callback) => { | ||
| 84 | + return uni.$u.test.chinese(value) | ||
| 85 | + }, | ||
| 86 | + message: '请输入中文', | ||
| 87 | + // 触发器可以同时用blur和change | ||
| 88 | + trigger: ['change','blur'], | ||
| 89 | + } | ||
| 90 | + ], | ||
| 91 | + identificationNumber: [ | ||
| 92 | + { required: true, message: '请输入身份证号', trigger: ['blur', 'change'] }, | ||
| 93 | + { validator: (rule, value, callback) => { | ||
| 94 | + return uni.$u.test.idCard(value) | ||
| 95 | + }, | ||
| 96 | + message: '身份证号码不正确', | ||
| 97 | + // 触发器可以同时用blur和change | ||
| 98 | + trigger: ['change','blur'], | ||
| 99 | + } | ||
| 100 | + ], | ||
| 101 | + phone: [ | ||
| 102 | + { required: true, message: '请输入手机号', trigger: ['blur', 'change'] }, | ||
| 103 | + { validator: (rule, value, callback) => { | ||
| 104 | + return uni.$u.test.mobile(value) | ||
| 105 | + }, | ||
| 106 | + message: '手机号码不正确', | ||
| 107 | + // 触发器可以同时用blur和change | ||
| 108 | + trigger: ['change','blur'], | ||
| 109 | + } | ||
| 110 | + ] | ||
| 111 | +} | ||
| 112 | +// 微信小程序需要在此注册校验规则 | ||
| 113 | +onReady(() => { | ||
| 114 | + userFormRef.value.setRules(rules) | ||
| 115 | +}) | ||
| 116 | +const addCarInfo = () => { | ||
| 117 | + uni.navigateTo({ | ||
| 118 | + url: '/pages/carDetail/carDetail' | ||
| 119 | + }) | ||
| 120 | +} | ||
| 121 | +// 提交方法 | ||
| 122 | +const submit = () => { | ||
| 123 | + userFormRef.value.validate().then(async valid => { | ||
| 124 | + if (valid) { | ||
| 125 | + uni.$u.toast('登录成功') | ||
| 126 | + } else { | ||
| 127 | + uni.$u.toast('校验失败') | ||
| 128 | + } | ||
| 129 | + }).catch(() => { | ||
| 130 | + // 处理验证错误 | ||
| 131 | + uni.$u.toast('校验失败') | ||
| 132 | + }); | ||
| 133 | +} | ||
| 134 | +</script> | ||
| 135 | + | ||
| 136 | +<style lang="scss" scoped> | ||
| 137 | +.app-container{ | ||
| 138 | + width: 100%; | ||
| 139 | + height: 100vh; | ||
| 140 | + padding: 0 30rpx; | ||
| 141 | + background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat; | ||
| 142 | + background-size: 100% 100%; | ||
| 143 | + overflow: hidden; | ||
| 144 | + | ||
| 145 | + .user-box{ | ||
| 146 | + width: 690rpx; | ||
| 147 | + padding: 40rpx 44rpx; | ||
| 148 | + background-color: #fff; | ||
| 149 | + z-index: 10; | ||
| 150 | + margin: 0 auto 40rpx; | ||
| 151 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 152 | + border-radius: 40rpx; | ||
| 153 | + } | ||
| 154 | + | ||
| 155 | + // 车辆列表 | ||
| 156 | + .car_list{ | ||
| 157 | + display: flex; | ||
| 158 | + flex-direction: column; | ||
| 159 | + gap: 20rpx; | ||
| 160 | + .line_title{ | ||
| 161 | + display: flex; | ||
| 162 | + justify-content: space-between; | ||
| 163 | + font-size: 24rpx; | ||
| 164 | + color: #999; | ||
| 165 | + line-height: 32rpx; | ||
| 166 | + .left_title{ | ||
| 167 | + font-size: 32rpx; | ||
| 168 | + line-height: 42rpx; | ||
| 169 | + color: #333; | ||
| 170 | + } | ||
| 171 | + } | ||
| 172 | + .car_data{ | ||
| 173 | + padding: 0 30rpx; | ||
| 174 | + background: #FFFFFF; | ||
| 175 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 176 | + border-radius: 40rpx; | ||
| 177 | + margin-bottom: 60rpx; | ||
| 178 | + .car_item{ | ||
| 179 | + padding: 30rpx 0; | ||
| 180 | + border-bottom: 2rpx solid #eee; | ||
| 181 | + &:last-child{ | ||
| 182 | + border-bottom: 0; | ||
| 183 | + } | ||
| 184 | + } | ||
| 185 | + } | ||
| 186 | + .loginBtn{ | ||
| 187 | + width: 100%; | ||
| 188 | + height: 80rpx; | ||
| 189 | + line-height: 80rpx; | ||
| 190 | + text-align: center; | ||
| 191 | + font-size: 28rpx; | ||
| 192 | + color: #fff; | ||
| 193 | + font-weight: 500; | ||
| 194 | + background: #3680FE; | ||
| 195 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 196 | + border-radius: 40rpx; | ||
| 197 | + } | ||
| 198 | + } | ||
| 199 | +} | ||
| 200 | +</style> |
pages/ownerDetail/ownerDetail.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="company_container"> | ||
| 3 | + <up-navbar placeholder title="车主详情" autoBack leftIconColor="#fff" :titleStyle="titleStyle" bgColor="transparent" /> | ||
| 4 | + <view class="work_box"> | ||
| 5 | + <!-- 车主信息 --> | ||
| 6 | + <view class="ownerInfo"> | ||
| 7 | + <view class="header_info"> | ||
| 8 | + <navTop /> | ||
| 9 | + <ownerInfo /> | ||
| 10 | + </view> | ||
| 11 | + <view class="navlist"> | ||
| 12 | + <view v-for="(item, index) in navList" :key="item.id" class="nav_item" :class="{active: current === index}" @click="toggle(index)"> | ||
| 13 | + {{ item.title }} | ||
| 14 | + </view> | ||
| 15 | + <view class="line"></view> | ||
| 16 | + </view> | ||
| 17 | + | ||
| 18 | + <view v-for="scheduleItem in 10" :key="scheduleItem" class="schedule"> | ||
| 19 | + <view class="applyTime"> | ||
| 20 | + <text class="li"></text> | ||
| 21 | + <text>2024-09-09</text> | ||
| 22 | + </view> | ||
| 23 | + <commentCard /> | ||
| 24 | + </view> | ||
| 25 | + </view> | ||
| 26 | + </view> | ||
| 27 | + </view> | ||
| 28 | +</template> | ||
| 29 | + | ||
| 30 | +<script setup> | ||
| 31 | + import { ref } from 'vue'; | ||
| 32 | + import navTop from '@/components/navTop.vue'; | ||
| 33 | + import ownerInfo from '@/components/ownerInfo.vue'; | ||
| 34 | + import commentCard from '@/components/commentCard.vue'; | ||
| 35 | + const current = ref(0) | ||
| 36 | + const navList = ref([ | ||
| 37 | + { id: 1, title: "进度汇报" }, | ||
| 38 | + { id: 2, title: "转单" }, | ||
| 39 | + { id: 3, title: "办结" } | ||
| 40 | + ]) | ||
| 41 | + const titleStyle = { | ||
| 42 | + fontSize: '36rpx', | ||
| 43 | + color: '#fff', | ||
| 44 | + fontWeight: 500 | ||
| 45 | + } | ||
| 46 | + const leftWidth = ref(0) | ||
| 47 | + const toggle = (index) => { | ||
| 48 | + leftWidth.value = `${index * 230}rpx` | ||
| 49 | + current.value = index | ||
| 50 | + } | ||
| 51 | +</script> | ||
| 52 | + | ||
| 53 | +<style lang="scss" scoped> | ||
| 54 | +.company_container{ | ||
| 55 | + width: 100%; | ||
| 56 | + height: 100vh; | ||
| 57 | + background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat; | ||
| 58 | + background-size: 100% 100%; | ||
| 59 | + overflow: hidden; | ||
| 60 | + .work_box{ | ||
| 61 | + padding: 20rpx 30rpx 180rpx; | ||
| 62 | + height: calc(100vh - 88rpx); | ||
| 63 | + background-color: #F8F9FF; | ||
| 64 | + overflow-y: scroll; | ||
| 65 | + .ownerInfo{ | ||
| 66 | + background: #fff; | ||
| 67 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 68 | + border-radius: 20rpx; | ||
| 69 | + overflow: hidden; | ||
| 70 | + .header_info{ | ||
| 71 | + padding: 22rpx 30rpx; | ||
| 72 | + } | ||
| 73 | + } | ||
| 74 | + } | ||
| 75 | +} | ||
| 76 | + | ||
| 77 | +.navlist{ | ||
| 78 | + position: relative; | ||
| 79 | + display: flex; | ||
| 80 | + align-items: center; | ||
| 81 | + height: 58rpx; | ||
| 82 | + .line{ | ||
| 83 | + position: absolute; | ||
| 84 | + bottom: 0; | ||
| 85 | + left: v-bind(leftWidth); | ||
| 86 | + width: 230rpx; | ||
| 87 | + height: 4rpx; | ||
| 88 | + background-color: #3680FE; | ||
| 89 | + transition: all .5s; | ||
| 90 | + } | ||
| 91 | + .nav_item{ | ||
| 92 | + flex: 1; | ||
| 93 | + text-align: center; | ||
| 94 | + color: #999999; | ||
| 95 | + font-size: 24rpx; | ||
| 96 | + line-height: 58rpx; | ||
| 97 | + &.active{ | ||
| 98 | + color: #3680FE; | ||
| 99 | + font-weight: 500; | ||
| 100 | + } | ||
| 101 | + } | ||
| 102 | +} | ||
| 103 | + | ||
| 104 | +.schedule{ | ||
| 105 | + padding: 20rpx 30rpx 30rpx; | ||
| 106 | + border-bottom: 2rpx solid #eee; | ||
| 107 | + .applyTime{ | ||
| 108 | + display: flex; | ||
| 109 | + align-items: center; | ||
| 110 | + gap: 20rpx; | ||
| 111 | + color: #3d3d3d; | ||
| 112 | + font-size: 24rpx; | ||
| 113 | + line-height: 32rpx; | ||
| 114 | + margin-bottom: 20rpx; | ||
| 115 | + .li{ | ||
| 116 | + width: 12rpx; | ||
| 117 | + height: 12rpx; | ||
| 118 | + border-radius: 50%; | ||
| 119 | + background-color: #3680FE; | ||
| 120 | + } | ||
| 121 | + } | ||
| 122 | + &:last-child{ | ||
| 123 | + border-bottom: 0; | ||
| 124 | + } | ||
| 125 | +} | ||
| 126 | +</style> |
pages/privacy/privacy.vue
0 → 100644
pages/societyHome/societyHome.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="company_container"> | ||
| 3 | + <up-navbar placeholder :leftIconSize="0" bgColor="transparent" /> | ||
| 4 | + <view class="work_box"> | ||
| 5 | + <view class="work_list"> | ||
| 6 | + <carCard v-for="carItem in carList" :key="carItem.carId" tipContent="待办" :carInfo="carItem"> | ||
| 7 | + <template #header> | ||
| 8 | + <navTop :carNum="carItem.carNum" /> | ||
| 9 | + </template> | ||
| 10 | + <template #center> | ||
| 11 | + <wordInfo :carType="carItem.carType" :userName="carItem.name" :applyTime="carItem.createTime" /> | ||
| 12 | + </template> | ||
| 13 | + <template #footer> | ||
| 14 | + <operateList /> | ||
| 15 | + </template> | ||
| 16 | + </carCard> | ||
| 17 | + </view> | ||
| 18 | + </view> | ||
| 19 | + | ||
| 20 | + <!-- 底部导航栏 --> | ||
| 21 | + <up-tabbar | ||
| 22 | + :value="useTabbar.societyCurrent" | ||
| 23 | + activeColor="#3680FE" | ||
| 24 | + inactiveColor="#707070" | ||
| 25 | + > | ||
| 26 | + <up-tabbar-item text="主页" icon="home" badge="11"></up-tabbar-item> | ||
| 27 | + <up-tabbar-item text="我的" icon="account" @click="goRouter"> | ||
| 28 | + <template #active-icon> | ||
| 29 | + <image style="width: 48rpx;" class="u-page__item__slot-icon" src="@/static/tabbarIcon/my-active.png" mode="widthFix"></image> | ||
| 30 | + </template> | ||
| 31 | + <template #inactive-icon> | ||
| 32 | + <image style="width: 48rpx;" class="u-page__item__slot-icon" src="@/static/tabbarIcon/my.png" mode="widthFix"></image> | ||
| 33 | + </template> | ||
| 34 | + </up-tabbar-item> | ||
| 35 | + </up-tabbar> | ||
| 36 | + | ||
| 37 | + </view> | ||
| 38 | +</template> | ||
| 39 | + | ||
| 40 | +<script setup> | ||
| 41 | + import { ref } from 'vue'; | ||
| 42 | + import carCard from '@/components/carCard.vue'; | ||
| 43 | + import navTop from '@/components/navTop.vue'; | ||
| 44 | + import wordInfo from '@/components/wordInfo.vue'; | ||
| 45 | + import operateList from '@/components/operateList.vue'; | ||
| 46 | + import useTabbarStore from '@/store/modules/tabbar.js' | ||
| 47 | + const useTabbar = useTabbarStore() | ||
| 48 | + const carList = ref([ | ||
| 49 | + { carId: 1, carNum: '桂A·66666', carType: '奔驰C级', name: '张三', createTime: '2024-09-08 10:12' }, | ||
| 50 | + { carId: 2, carNum: '桂A·77777', carType: '奔驰C级', name: '李四', createTime: '2024-09-08 10:12' }, | ||
| 51 | + { carId: 3, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 52 | + { carId: 4, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 53 | + { carId: 5, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 54 | + { carId: 6, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 55 | + { carId: 7, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 56 | + { carId: 8, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 57 | + { carId: 9, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 58 | + { carId: 10, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 59 | + { carId: 11, carNum: '桂A·77777', carType: '梅赛德斯奔驰', name: '王五', createTime: '2024-09-08 10:12' }, | ||
| 60 | + ]) | ||
| 61 | + const titleStyle = { | ||
| 62 | + fontSize: '36rpx', | ||
| 63 | + color: '#fff', | ||
| 64 | + fontWeight: 500 | ||
| 65 | + } | ||
| 66 | + const goRouter = (index) => { | ||
| 67 | + useTabbar.societyCurrent = index | ||
| 68 | + uni.redirectTo({ | ||
| 69 | + url: '/pages/societyMy/societyMy' | ||
| 70 | + }) | ||
| 71 | + } | ||
| 72 | +</script> | ||
| 73 | + | ||
| 74 | +<style lang="scss" scoped> | ||
| 75 | +.company_container{ | ||
| 76 | + width: 100%; | ||
| 77 | + height: 100vh; | ||
| 78 | + background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat; | ||
| 79 | + background-size: 100% 100%; | ||
| 80 | + overflow: hidden; | ||
| 81 | + .work_box{ | ||
| 82 | + padding: 20rpx 30rpx 250rpx; | ||
| 83 | + height: calc(100vh - 88rpx); | ||
| 84 | + background-color: #F8F9FF; | ||
| 85 | + overflow-y: scroll; | ||
| 86 | + .work_list{ | ||
| 87 | + display: flex; | ||
| 88 | + flex-direction: column; | ||
| 89 | + gap: 20rpx; | ||
| 90 | + } | ||
| 91 | + } | ||
| 92 | +} | ||
| 93 | +</style> |
pages/societyMy/societyMy.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="app-container"> | ||
| 3 | + <up-navbar placeholder :leftIconSize="0" bgColor="transparent" /> | ||
| 4 | + <view class="car_list"> | ||
| 5 | + <view class="line_title"> | ||
| 6 | + <text class="left_title" style="color: #fff;">我的信息</text> | ||
| 7 | + <text style="color: #fff;">更新实名信息</text> | ||
| 8 | + </view> | ||
| 9 | + <view class="user-box"> | ||
| 10 | + <up-form :model="userForm" ref="userFormRef"> | ||
| 11 | + <up-form-item prop="name"> | ||
| 12 | + <up-input v-model="userForm.name" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入真实姓名"> | ||
| 13 | + <template #prefix> | ||
| 14 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/user.png" mode="widthFix"></image> | ||
| 15 | + </template> | ||
| 16 | + </up-input> | ||
| 17 | + </up-form-item> | ||
| 18 | + <up-form-item prop="identificationNumber"> | ||
| 19 | + <up-input v-model="userForm.identificationNumber" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号"> | ||
| 20 | + <template #prefix> | ||
| 21 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image> | ||
| 22 | + </template> | ||
| 23 | + </up-input> | ||
| 24 | + </up-form-item> | ||
| 25 | + <up-form-item prop="phone"> | ||
| 26 | + <up-input v-model="userForm.phone" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入手机号码"> | ||
| 27 | + <template #prefix> | ||
| 28 | + <image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/phone.png" mode="widthFix"></image> | ||
| 29 | + </template> | ||
| 30 | + </up-input> | ||
| 31 | + </up-form-item> | ||
| 32 | + </up-form> | ||
| 33 | + </view> | ||
| 34 | + | ||
| 35 | + <view class="loginBtn" @click="loginOut">退出登录</view> | ||
| 36 | + </view> | ||
| 37 | + <!-- 底部导航栏 --> | ||
| 38 | + <up-tabbar | ||
| 39 | + :value="useTabbar.societyCurrent" | ||
| 40 | + activeColor="#3680FE" | ||
| 41 | + inactiveColor="#707070" | ||
| 42 | + > | ||
| 43 | + <up-tabbar-item text="主页" icon="home" @click="goRouter"></up-tabbar-item> | ||
| 44 | + <up-tabbar-item text="我的" icon="account"></up-tabbar-item> | ||
| 45 | + </up-tabbar> | ||
| 46 | + </view> | ||
| 47 | +</template> | ||
| 48 | + | ||
| 49 | +<script setup> | ||
| 50 | +import { ref } from 'vue' | ||
| 51 | +import { onReady } from '@dcloudio/uni-app' | ||
| 52 | +import useTabbarStore from '@/store/modules/tabbar.js' | ||
| 53 | +const useTabbar = useTabbarStore() | ||
| 54 | +const showNotice = ref(true) | ||
| 55 | +// 用户参数 | ||
| 56 | +const userForm = ref({ | ||
| 57 | + name: '', | ||
| 58 | + identificationNumber: '', | ||
| 59 | + phone: '' | ||
| 60 | +}) | ||
| 61 | +const customStyle = { | ||
| 62 | + height: '80rpx', | ||
| 63 | + backgroundColor: '#F9F9F9', | ||
| 64 | + paddingLeft: '40rpx' | ||
| 65 | +} | ||
| 66 | +const placeholderStyle = { | ||
| 67 | + color: '#bbb', | ||
| 68 | + fontSize: '28rpx' | ||
| 69 | +} | ||
| 70 | +// 表单引用 | ||
| 71 | +const userFormRef = ref(null) | ||
| 72 | +// 校验规则 | ||
| 73 | +const rules = { | ||
| 74 | + name: [ | ||
| 75 | + { required: true, message: '请输入姓名', trigger: ['blur', 'change'] }, | ||
| 76 | + { min: 2, max: 6, message: '名字应在2到6个字', trigger: ['blur', 'change'] }, | ||
| 77 | + { validator: (rule, value, callback) => { | ||
| 78 | + return uni.$u.test.chinese(value) | ||
| 79 | + }, | ||
| 80 | + message: '请输入中文', | ||
| 81 | + // 触发器可以同时用blur和change | ||
| 82 | + trigger: ['change','blur'], | ||
| 83 | + } | ||
| 84 | + ], | ||
| 85 | + identificationNumber: [ | ||
| 86 | + { required: true, message: '请输入身份证号', trigger: ['blur', 'change'] }, | ||
| 87 | + { validator: (rule, value, callback) => { | ||
| 88 | + return uni.$u.test.idCard(value) | ||
| 89 | + }, | ||
| 90 | + message: '身份证号码不正确', | ||
| 91 | + // 触发器可以同时用blur和change | ||
| 92 | + trigger: ['change','blur'], | ||
| 93 | + } | ||
| 94 | + ], | ||
| 95 | + phone: [ | ||
| 96 | + { required: true, message: '请输入手机号', trigger: ['blur', 'change'] }, | ||
| 97 | + { validator: (rule, value, callback) => { | ||
| 98 | + return uni.$u.test.mobile(value) | ||
| 99 | + }, | ||
| 100 | + message: '手机号码不正确', | ||
| 101 | + // 触发器可以同时用blur和change | ||
| 102 | + trigger: ['change','blur'], | ||
| 103 | + } | ||
| 104 | + ] | ||
| 105 | +} | ||
| 106 | +// 微信小程序需要在此注册校验规则 | ||
| 107 | +onReady(() => { | ||
| 108 | + userFormRef.value.setRules(rules) | ||
| 109 | +}) | ||
| 110 | +const loginOut = () => { | ||
| 111 | + | ||
| 112 | +} | ||
| 113 | + | ||
| 114 | +const goRouter = (index) => { | ||
| 115 | + useTabbar.societyCurrent = index | ||
| 116 | + uni.redirectTo({ | ||
| 117 | + url: '/pages/societyHome/societyHome' | ||
| 118 | + }) | ||
| 119 | +} | ||
| 120 | +// 提交方法 | ||
| 121 | +const submit = () => { | ||
| 122 | + userFormRef.value.validate().then(async valid => { | ||
| 123 | + if (valid) { | ||
| 124 | + uni.$u.toast('登录成功') | ||
| 125 | + } else { | ||
| 126 | + uni.$u.toast('校验失败') | ||
| 127 | + } | ||
| 128 | + }).catch(() => { | ||
| 129 | + // 处理验证错误 | ||
| 130 | + uni.$u.toast('校验失败') | ||
| 131 | + }); | ||
| 132 | +} | ||
| 133 | +</script> | ||
| 134 | + | ||
| 135 | +<style lang="scss" scoped> | ||
| 136 | +.app-container{ | ||
| 137 | + width: 100%; | ||
| 138 | + height: 100vh; | ||
| 139 | + padding: 0 30rpx; | ||
| 140 | + background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat; | ||
| 141 | + background-size: 100% 100%; | ||
| 142 | + overflow: hidden; | ||
| 143 | + | ||
| 144 | + .user-box{ | ||
| 145 | + width: 690rpx; | ||
| 146 | + padding: 40rpx 44rpx; | ||
| 147 | + background-color: #fff; | ||
| 148 | + z-index: 10; | ||
| 149 | + margin: 0 auto 40rpx; | ||
| 150 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 151 | + border-radius: 40rpx; | ||
| 152 | + } | ||
| 153 | + | ||
| 154 | + // 车辆列表 | ||
| 155 | + .car_list{ | ||
| 156 | + display: flex; | ||
| 157 | + flex-direction: column; | ||
| 158 | + gap: 20rpx; | ||
| 159 | + .line_title{ | ||
| 160 | + display: flex; | ||
| 161 | + justify-content: space-between; | ||
| 162 | + font-size: 24rpx; | ||
| 163 | + color: #999; | ||
| 164 | + line-height: 32rpx; | ||
| 165 | + .left_title{ | ||
| 166 | + font-size: 32rpx; | ||
| 167 | + line-height: 42rpx; | ||
| 168 | + color: #333; | ||
| 169 | + } | ||
| 170 | + } | ||
| 171 | + .car_data{ | ||
| 172 | + padding: 0 30rpx; | ||
| 173 | + background: #FFFFFF; | ||
| 174 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 175 | + border-radius: 40rpx; | ||
| 176 | + margin-bottom: 60rpx; | ||
| 177 | + .car_item{ | ||
| 178 | + padding: 30rpx 0; | ||
| 179 | + border-bottom: 2rpx solid #eee; | ||
| 180 | + &:last-child{ | ||
| 181 | + border-bottom: 0; | ||
| 182 | + } | ||
| 183 | + } | ||
| 184 | + } | ||
| 185 | + .loginBtn{ | ||
| 186 | + width: 100%; | ||
| 187 | + height: 80rpx; | ||
| 188 | + line-height: 80rpx; | ||
| 189 | + text-align: center; | ||
| 190 | + font-size: 28rpx; | ||
| 191 | + color: #fff; | ||
| 192 | + font-weight: 500; | ||
| 193 | + background: #3680FE; | ||
| 194 | + box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06); | ||
| 195 | + border-radius: 40rpx; | ||
| 196 | + margin-top: 40rpx; | ||
| 197 | + } | ||
| 198 | + } | ||
| 199 | +} | ||
| 200 | +</style> |
static/.DS_Store
0 → 100644
不能预览此文件类型
static/commonImage/.DS_Store
0 → 100644
不能预览此文件类型
static/commonImage/IdCard.png
0 → 100644
3.5 KB
static/commonImage/big-car.png
0 → 100644
3.6 KB
static/commonImage/phone.png
0 → 100644
4.0 KB
static/commonImage/user.png
0 → 100644
3.2 KB
static/logo.png
0 → 100644
3.9 KB
static/tabbarIcon/.DS_Store
0 → 100644
不能预览此文件类型
static/tabbarIcon/Home-active.png
0 → 100644
3.1 KB
static/tabbarIcon/Home.png
0 → 100644
3.0 KB
static/tabbarIcon/car-active.png
0 → 100644
3.8 KB
static/tabbarIcon/car.png
0 → 100644
3.8 KB
static/tabbarIcon/my-active.png
0 → 100644
3.7 KB
static/tabbarIcon/my.png
0 → 100644
3.6 KB
store/index.js
0 → 100644
store/modules/tabbar.js
0 → 100644
store/modules/user.js
0 → 100644
| 1 | +import { defineStore } from 'pinia' | ||
| 2 | +import storage from '@/utils/storage.js' | ||
| 3 | +import { userLogin, getUserInfo } from '@/api/user' | ||
| 4 | +// 登陆成功后执行 | ||
| 5 | +const loginSuccess = (that, token) => { | ||
| 6 | + // 过期时间30天 | ||
| 7 | + const expiryTime = 30 * 86400 | ||
| 8 | + // 保存tokne到缓存 | ||
| 9 | + storage.set('xiaoming_token', token, expiryTime) | ||
| 10 | + // 记录到store全局变量 | ||
| 11 | + that.token = token | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +// 保存用户信息 | ||
| 15 | +const userInfoSuccess = (that, userInfo) => { | ||
| 16 | + // 过期时间30天 | ||
| 17 | + const expiryTime = 30 * 86400 | ||
| 18 | + storage.set('xiaoming_userInfo', userInfo, expiryTime) | ||
| 19 | + // 记录到store全局变量 | ||
| 20 | + that.userInfo = userInfo | ||
| 21 | +} | ||
| 22 | + | ||
| 23 | +const useUserStore = defineStore('user', { | ||
| 24 | + unistorage: true, // 是否持久化到内存 | ||
| 25 | + state: () => { | ||
| 26 | + return { | ||
| 27 | + token: storage.get('xiaoming_token', '123'), | ||
| 28 | + userInfo: storage.get('xiaoming_userInfo', null) | ||
| 29 | + } | ||
| 30 | + }, | ||
| 31 | + actions: { | ||
| 32 | + // 用户登录 | ||
| 33 | + login(data) { | ||
| 34 | + let that = this | ||
| 35 | + return new Promise((resolve, reject) => { | ||
| 36 | + userLogin(data) | ||
| 37 | + .then(response => { | ||
| 38 | + const { token } = response | ||
| 39 | + loginSuccess(that, token) | ||
| 40 | + resolve(response) | ||
| 41 | + }) | ||
| 42 | + .catch(reject) | ||
| 43 | + }) | ||
| 44 | + }, | ||
| 45 | + // 获取用户信息 | ||
| 46 | + getUser() { | ||
| 47 | + let that = this | ||
| 48 | + return new Promise((resolve, reject) => { | ||
| 49 | + getUserInfo() | ||
| 50 | + .then(response => { | ||
| 51 | + userInfoSuccess(that, response.data) | ||
| 52 | + resolve(response) | ||
| 53 | + }) | ||
| 54 | + .catch(reject) | ||
| 55 | + }) | ||
| 56 | + }, | ||
| 57 | + // 退出登录 | ||
| 58 | + Logout() { | ||
| 59 | + const store = this | ||
| 60 | + return new Promise((resolve, reject) => { | ||
| 61 | + // 删除缓存中的tokne和userInfo | ||
| 62 | + storage.remove('xiaoming_token') | ||
| 63 | + storage.remove('xiaoming_userInfo') | ||
| 64 | + resolve() | ||
| 65 | + }) | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | +}) | ||
| 69 | + | ||
| 70 | + | ||
| 71 | +export default useUserStore |
uni.promisify.adaptor.js
0 → 100644
| 1 | +uni.addInterceptor({ | ||
| 2 | + returnValue (res) { | ||
| 3 | + if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) { | ||
| 4 | + return res; | ||
| 5 | + } | ||
| 6 | + return new Promise((resolve, reject) => { | ||
| 7 | + res.then((res) => res[0] ? reject(res[0]) : resolve(res[1])); | ||
| 8 | + }); | ||
| 9 | + }, | ||
| 10 | +}); |
uni.scss
0 → 100644
| 1 | +/** | ||
| 2 | + * 这里是uni-app内置的常用样式变量 | ||
| 3 | + * | ||
| 4 | + * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 | ||
| 5 | + * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App | ||
| 6 | + * | ||
| 7 | + */ | ||
| 8 | + | ||
| 9 | +/** | ||
| 10 | + * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 | ||
| 11 | + * | ||
| 12 | + * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 | ||
| 13 | + */ | ||
| 14 | + | ||
| 15 | +/* 颜色变量 */ | ||
| 16 | + | ||
| 17 | +/* 行为相关颜色 */ | ||
| 18 | +$uni-color-primary: #007aff; | ||
| 19 | +$uni-color-success: #4cd964; | ||
| 20 | +$uni-color-warning: #f0ad4e; | ||
| 21 | +$uni-color-error: #dd524d; | ||
| 22 | + | ||
| 23 | +/* 文字基本颜色 */ | ||
| 24 | +$uni-text-color:#333;//基本色 | ||
| 25 | +$uni-text-color-inverse:#fff;//反色 | ||
| 26 | +$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息 | ||
| 27 | +$uni-text-color-placeholder: #808080; | ||
| 28 | +$uni-text-color-disable:#c0c0c0; | ||
| 29 | + | ||
| 30 | +/* 背景颜色 */ | ||
| 31 | +$uni-bg-color:#ffffff; | ||
| 32 | +$uni-bg-color-grey:#f8f8f8; | ||
| 33 | +$uni-bg-color-hover:#f1f1f1;//点击状态颜色 | ||
| 34 | +$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 | ||
| 35 | + | ||
| 36 | +/* 边框颜色 */ | ||
| 37 | +$uni-border-color:#c8c7cc; | ||
| 38 | + | ||
| 39 | +/* 尺寸变量 */ | ||
| 40 | + | ||
| 41 | +/* 文字尺寸 */ | ||
| 42 | +$uni-font-size-sm:12px; | ||
| 43 | +$uni-font-size-base:14px; | ||
| 44 | +$uni-font-size-lg:16px; | ||
| 45 | + | ||
| 46 | +/* 图片尺寸 */ | ||
| 47 | +$uni-img-size-sm:20px; | ||
| 48 | +$uni-img-size-base:26px; | ||
| 49 | +$uni-img-size-lg:40px; | ||
| 50 | + | ||
| 51 | +/* Border Radius */ | ||
| 52 | +$uni-border-radius-sm: 2px; | ||
| 53 | +$uni-border-radius-base: 3px; | ||
| 54 | +$uni-border-radius-lg: 6px; | ||
| 55 | +$uni-border-radius-circle: 50%; | ||
| 56 | + | ||
| 57 | +/* 水平间距 */ | ||
| 58 | +$uni-spacing-row-sm: 5px; | ||
| 59 | +$uni-spacing-row-base: 10px; | ||
| 60 | +$uni-spacing-row-lg: 15px; | ||
| 61 | + | ||
| 62 | +/* 垂直间距 */ | ||
| 63 | +$uni-spacing-col-sm: 4px; | ||
| 64 | +$uni-spacing-col-base: 8px; | ||
| 65 | +$uni-spacing-col-lg: 12px; | ||
| 66 | + | ||
| 67 | +/* 透明度 */ | ||
| 68 | +$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 | ||
| 69 | + | ||
| 70 | +/* 文章场景相关 */ | ||
| 71 | +$uni-color-title: #2C405A; // 文章标题颜色 | ||
| 72 | +$uni-font-size-title:20px; | ||
| 73 | +$uni-color-subtitle: #555555; // 二级标题颜色 | ||
| 74 | +$uni-font-size-subtitle:26px; | ||
| 75 | +$uni-color-paragraph: #3F536E; // 文章段落颜色 | ||
| 76 | +$uni-font-size-paragraph:15px; | ||
| 77 | + | ||
| 78 | +/* uni.scss */ | ||
| 79 | +@import '@/uni_modules/uview-plus/theme.scss'; |
uni_modules/uni-data-select/changelog.md
0 → 100644
| 1 | +## 1.0.8(2024-03-28) | ||
| 2 | +- 修复 在vue2下:style动态绑定导致编译失败的bug | ||
| 3 | +## 1.0.7(2024-01-20) | ||
| 4 | +- 修复 长文本回显超过容器的bug,超过容器部分显示省略号 | ||
| 5 | +## 1.0.6(2023-04-12) | ||
| 6 | +- 修复 微信小程序点击时会改变背景颜色的 bug | ||
| 7 | +## 1.0.5(2023-02-03) | ||
| 8 | +- 修复 禁用时会显示清空按钮 | ||
| 9 | +## 1.0.4(2023-02-02) | ||
| 10 | +- 优化 查询条件短期内多次变更只查询最后一次变更后的结果 | ||
| 11 | +- 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue | ||
| 12 | +## 1.0.3(2023-01-16) | ||
| 13 | +- 修复 不关联服务空间报错的问题 | ||
| 14 | +## 1.0.2(2023-01-14) | ||
| 15 | +- 新增 属性 `format` 可用于格式化显示选项内容 | ||
| 16 | +## 1.0.1(2022-12-06) | ||
| 17 | +- 修复 当where变化时,数据不会自动更新的问题 | ||
| 18 | +## 0.1.9(2022-09-05) | ||
| 19 | +- 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框 | ||
| 20 | +## 0.1.8(2022-08-29) | ||
| 21 | +- 修复 点击的位置不准确 | ||
| 22 | +## 0.1.7(2022-08-12) | ||
| 23 | +- 新增 支持 disabled 属性 | ||
| 24 | +## 0.1.6(2022-07-06) | ||
| 25 | +- 修复 pc端宽度异常的bug | ||
| 26 | +## 0.1.5 | ||
| 27 | +- 修复 pc端宽度异常的bug | ||
| 28 | +## 0.1.4(2022-07-05) | ||
| 29 | +- 优化 显示样式 | ||
| 30 | +## 0.1.3(2022-06-02) | ||
| 31 | +- 修复 localdata 赋值不生效的 bug | ||
| 32 | +- 新增 支持 uni.scss 修改颜色 | ||
| 33 | +- 新增 支持选项禁用(数据选项设置 disabled: true 即禁用) | ||
| 34 | +## 0.1.2(2022-05-08) | ||
| 35 | +- 修复 当 value 为 0 时选择不生效的 bug | ||
| 36 | +## 0.1.1(2022-05-07) | ||
| 37 | +- 新增 记住上次的选项(仅 collection 存在时有效) | ||
| 38 | +## 0.1.0(2022-04-22) | ||
| 39 | +- 初始化 |
| 1 | +<template> | ||
| 2 | + <view class="uni-stat__select"> | ||
| 3 | + <span v-if="label" class="uni-label-text hide-on-phone">{{label + ':'}}</span> | ||
| 4 | + <view class="uni-stat-box" :class="{'uni-stat__actived': current}"> | ||
| 5 | + <view class="uni-select" :class="{'uni-select--disabled':disabled}"> | ||
| 6 | + <view class="uni-select__input-box" @click="toggleSelector"> | ||
| 7 | + <view v-if="current" class="uni-select__input-text">{{textShow}}</view> | ||
| 8 | + <view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view> | ||
| 9 | + <view v-if="current && clear && !disabled" @click.stop="clearVal"> | ||
| 10 | + <uni-icons type="clear" color="#c0c4cc" size="24" /> | ||
| 11 | + </view> | ||
| 12 | + <view v-else> | ||
| 13 | + <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" /> | ||
| 14 | + </view> | ||
| 15 | + </view> | ||
| 16 | + <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" /> | ||
| 17 | + <view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector"> | ||
| 18 | + <view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view> | ||
| 19 | + <scroll-view scroll-y="true" class="uni-select__selector-scroll"> | ||
| 20 | + <view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0"> | ||
| 21 | + <text>{{emptyTips}}</text> | ||
| 22 | + </view> | ||
| 23 | + <view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" | ||
| 24 | + @click="change(item)"> | ||
| 25 | + <text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> | ||
| 26 | + </view> | ||
| 27 | + </scroll-view> | ||
| 28 | + </view> | ||
| 29 | + </view> | ||
| 30 | + </view> | ||
| 31 | + </view> | ||
| 32 | +</template> | ||
| 33 | + | ||
| 34 | +<script> | ||
| 35 | + /** | ||
| 36 | + * DataChecklist 数据选择器 | ||
| 37 | + * @description 通过数据渲染的下拉框组件 | ||
| 38 | + * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select | ||
| 39 | + * @property {String} value 默认值 | ||
| 40 | + * @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}] | ||
| 41 | + * @property {Boolean} clear 是否可以清空已选项 | ||
| 42 | + * @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效 | ||
| 43 | + * @property {String} label 左侧标题 | ||
| 44 | + * @property {String} placeholder 输入框的提示文字 | ||
| 45 | + * @property {Boolean} disabled 是否禁用 | ||
| 46 | + * @property {String} placement 弹出位置 | ||
| 47 | + * @value top 顶部弹出 | ||
| 48 | + * @value bottom 底部弹出(default) | ||
| 49 | + * @event {Function} change 选中发生变化触发 | ||
| 50 | + */ | ||
| 51 | + | ||
| 52 | + export default { | ||
| 53 | + name: "uni-data-select", | ||
| 54 | + mixins: [uniCloud.mixinDatacom || {}], | ||
| 55 | + props: { | ||
| 56 | + localdata: { | ||
| 57 | + type: Array, | ||
| 58 | + default () { | ||
| 59 | + return [] | ||
| 60 | + } | ||
| 61 | + }, | ||
| 62 | + value: { | ||
| 63 | + type: [String, Number], | ||
| 64 | + default: '' | ||
| 65 | + }, | ||
| 66 | + modelValue: { | ||
| 67 | + type: [String, Number], | ||
| 68 | + default: '' | ||
| 69 | + }, | ||
| 70 | + label: { | ||
| 71 | + type: String, | ||
| 72 | + default: '' | ||
| 73 | + }, | ||
| 74 | + placeholder: { | ||
| 75 | + type: String, | ||
| 76 | + default: '请选择' | ||
| 77 | + }, | ||
| 78 | + emptyTips: { | ||
| 79 | + type: String, | ||
| 80 | + default: '无选项' | ||
| 81 | + }, | ||
| 82 | + clear: { | ||
| 83 | + type: Boolean, | ||
| 84 | + default: true | ||
| 85 | + }, | ||
| 86 | + defItem: { | ||
| 87 | + type: Number, | ||
| 88 | + default: 0 | ||
| 89 | + }, | ||
| 90 | + disabled: { | ||
| 91 | + type: Boolean, | ||
| 92 | + default: false | ||
| 93 | + }, | ||
| 94 | + // 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}" | ||
| 95 | + format: { | ||
| 96 | + type: String, | ||
| 97 | + default: '' | ||
| 98 | + }, | ||
| 99 | + placement: { | ||
| 100 | + type: String, | ||
| 101 | + default: 'bottom' | ||
| 102 | + } | ||
| 103 | + }, | ||
| 104 | + data() { | ||
| 105 | + return { | ||
| 106 | + showSelector: false, | ||
| 107 | + current: '', | ||
| 108 | + mixinDatacomResData: [], | ||
| 109 | + apps: [], | ||
| 110 | + channels: [], | ||
| 111 | + cacheKey: "uni-data-select-lastSelectedValue", | ||
| 112 | + }; | ||
| 113 | + }, | ||
| 114 | + created() { | ||
| 115 | + this.debounceGet = this.debounce(() => { | ||
| 116 | + this.query(); | ||
| 117 | + }, 300); | ||
| 118 | + if (this.collection && !this.localdata.length) { | ||
| 119 | + this.debounceGet(); | ||
| 120 | + } | ||
| 121 | + }, | ||
| 122 | + computed: { | ||
| 123 | + typePlaceholder() { | ||
| 124 | + const text = { | ||
| 125 | + 'opendb-stat-app-versions': '版本', | ||
| 126 | + 'opendb-app-channels': '渠道', | ||
| 127 | + 'opendb-app-list': '应用' | ||
| 128 | + } | ||
| 129 | + const common = this.placeholder | ||
| 130 | + const placeholder = text[this.collection] | ||
| 131 | + return placeholder ? | ||
| 132 | + common + placeholder : | ||
| 133 | + common | ||
| 134 | + }, | ||
| 135 | + valueCom() { | ||
| 136 | + // #ifdef VUE3 | ||
| 137 | + return this.modelValue; | ||
| 138 | + // #endif | ||
| 139 | + // #ifndef VUE3 | ||
| 140 | + return this.value; | ||
| 141 | + // #endif | ||
| 142 | + }, | ||
| 143 | + textShow() { | ||
| 144 | + // 长文本显示 | ||
| 145 | + let text = this.current; | ||
| 146 | + if (text.length > 10) { | ||
| 147 | + return text.slice(0, 25) + '...'; | ||
| 148 | + } | ||
| 149 | + return text; | ||
| 150 | + }, | ||
| 151 | + getOffsetByPlacement() { | ||
| 152 | + switch (this.placement) { | ||
| 153 | + case 'top': | ||
| 154 | + return "bottom:calc(100% + 12px);"; | ||
| 155 | + case 'bottom': | ||
| 156 | + return "top:calc(100% + 12px);"; | ||
| 157 | + } | ||
| 158 | + } | ||
| 159 | + }, | ||
| 160 | + | ||
| 161 | + watch: { | ||
| 162 | + localdata: { | ||
| 163 | + immediate: true, | ||
| 164 | + handler(val, old) { | ||
| 165 | + if (Array.isArray(val) && old !== val) { | ||
| 166 | + this.mixinDatacomResData = val | ||
| 167 | + } | ||
| 168 | + } | ||
| 169 | + }, | ||
| 170 | + valueCom(val, old) { | ||
| 171 | + this.initDefVal() | ||
| 172 | + }, | ||
| 173 | + mixinDatacomResData: { | ||
| 174 | + immediate: true, | ||
| 175 | + handler(val) { | ||
| 176 | + if (val.length) { | ||
| 177 | + this.initDefVal() | ||
| 178 | + } | ||
| 179 | + } | ||
| 180 | + }, | ||
| 181 | + | ||
| 182 | + }, | ||
| 183 | + methods: { | ||
| 184 | + debounce(fn, time = 100) { | ||
| 185 | + let timer = null | ||
| 186 | + return function(...args) { | ||
| 187 | + if (timer) clearTimeout(timer) | ||
| 188 | + timer = setTimeout(() => { | ||
| 189 | + fn.apply(this, args) | ||
| 190 | + }, time) | ||
| 191 | + } | ||
| 192 | + }, | ||
| 193 | + // 执行数据库查询 | ||
| 194 | + query() { | ||
| 195 | + this.mixinDatacomEasyGet(); | ||
| 196 | + }, | ||
| 197 | + // 监听查询条件变更事件 | ||
| 198 | + onMixinDatacomPropsChange() { | ||
| 199 | + if (this.collection) { | ||
| 200 | + this.debounceGet(); | ||
| 201 | + } | ||
| 202 | + }, | ||
| 203 | + initDefVal() { | ||
| 204 | + let defValue = '' | ||
| 205 | + if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) { | ||
| 206 | + defValue = this.valueCom | ||
| 207 | + } else { | ||
| 208 | + let strogeValue | ||
| 209 | + if (this.collection) { | ||
| 210 | + strogeValue = this.getCache() | ||
| 211 | + } | ||
| 212 | + if (strogeValue || strogeValue === 0) { | ||
| 213 | + defValue = strogeValue | ||
| 214 | + } else { | ||
| 215 | + let defItem = '' | ||
| 216 | + if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) { | ||
| 217 | + defItem = this.mixinDatacomResData[this.defItem - 1].value | ||
| 218 | + } | ||
| 219 | + defValue = defItem | ||
| 220 | + } | ||
| 221 | + if (defValue || defValue === 0) { | ||
| 222 | + this.emit(defValue) | ||
| 223 | + } | ||
| 224 | + } | ||
| 225 | + const def = this.mixinDatacomResData.find(item => item.value === defValue) | ||
| 226 | + this.current = def ? this.formatItemName(def) : '' | ||
| 227 | + }, | ||
| 228 | + | ||
| 229 | + /** | ||
| 230 | + * @param {[String, Number]} value | ||
| 231 | + * 判断用户给的 value 是否同时为禁用状态 | ||
| 232 | + */ | ||
| 233 | + isDisabled(value) { | ||
| 234 | + let isDisabled = false; | ||
| 235 | + | ||
| 236 | + this.mixinDatacomResData.forEach(item => { | ||
| 237 | + if (item.value === value) { | ||
| 238 | + isDisabled = item.disable | ||
| 239 | + } | ||
| 240 | + }) | ||
| 241 | + | ||
| 242 | + return isDisabled; | ||
| 243 | + }, | ||
| 244 | + | ||
| 245 | + clearVal() { | ||
| 246 | + this.emit('') | ||
| 247 | + if (this.collection) { | ||
| 248 | + this.removeCache() | ||
| 249 | + } | ||
| 250 | + }, | ||
| 251 | + change(item) { | ||
| 252 | + if (!item.disable) { | ||
| 253 | + this.showSelector = false | ||
| 254 | + this.current = this.formatItemName(item) | ||
| 255 | + this.emit(item.value) | ||
| 256 | + } | ||
| 257 | + }, | ||
| 258 | + emit(val) { | ||
| 259 | + this.$emit('input', val) | ||
| 260 | + this.$emit('update:modelValue', val) | ||
| 261 | + this.$emit('change', val) | ||
| 262 | + if (this.collection) { | ||
| 263 | + this.setCache(val); | ||
| 264 | + } | ||
| 265 | + }, | ||
| 266 | + toggleSelector() { | ||
| 267 | + if (this.disabled) { | ||
| 268 | + return | ||
| 269 | + } | ||
| 270 | + | ||
| 271 | + this.showSelector = !this.showSelector | ||
| 272 | + }, | ||
| 273 | + formatItemName(item) { | ||
| 274 | + let { | ||
| 275 | + text, | ||
| 276 | + value, | ||
| 277 | + channel_code | ||
| 278 | + } = item | ||
| 279 | + channel_code = channel_code ? `(${channel_code})` : '' | ||
| 280 | + | ||
| 281 | + if (this.format) { | ||
| 282 | + // 格式化输出 | ||
| 283 | + let str = ""; | ||
| 284 | + str = this.format; | ||
| 285 | + for (let key in item) { | ||
| 286 | + str = str.replace(new RegExp(`{${key}}`, "g"), item[key]); | ||
| 287 | + } | ||
| 288 | + return str; | ||
| 289 | + } else { | ||
| 290 | + return this.collection.indexOf('app-list') > 0 ? | ||
| 291 | + `${text}(${value})` : | ||
| 292 | + ( | ||
| 293 | + text ? | ||
| 294 | + text : | ||
| 295 | + `未命名${channel_code}` | ||
| 296 | + ) | ||
| 297 | + } | ||
| 298 | + }, | ||
| 299 | + // 获取当前加载的数据 | ||
| 300 | + getLoadData() { | ||
| 301 | + return this.mixinDatacomResData; | ||
| 302 | + }, | ||
| 303 | + // 获取当前缓存key | ||
| 304 | + getCurrentCacheKey() { | ||
| 305 | + return this.collection; | ||
| 306 | + }, | ||
| 307 | + // 获取缓存 | ||
| 308 | + getCache(name = this.getCurrentCacheKey()) { | ||
| 309 | + let cacheData = uni.getStorageSync(this.cacheKey) || {}; | ||
| 310 | + return cacheData[name]; | ||
| 311 | + }, | ||
| 312 | + // 设置缓存 | ||
| 313 | + setCache(value, name = this.getCurrentCacheKey()) { | ||
| 314 | + let cacheData = uni.getStorageSync(this.cacheKey) || {}; | ||
| 315 | + cacheData[name] = value; | ||
| 316 | + uni.setStorageSync(this.cacheKey, cacheData); | ||
| 317 | + }, | ||
| 318 | + // 删除缓存 | ||
| 319 | + removeCache(name = this.getCurrentCacheKey()) { | ||
| 320 | + let cacheData = uni.getStorageSync(this.cacheKey) || {}; | ||
| 321 | + delete cacheData[name]; | ||
| 322 | + uni.setStorageSync(this.cacheKey, cacheData); | ||
| 323 | + }, | ||
| 324 | + } | ||
| 325 | + } | ||
| 326 | +</script> | ||
| 327 | + | ||
| 328 | +<style lang="scss"> | ||
| 329 | + $uni-base-color: #6a6a6a !default; | ||
| 330 | + $uni-main-color: #333 !default; | ||
| 331 | + $uni-secondary-color: #909399 !default; | ||
| 332 | + $uni-border-3: #e5e5e5; | ||
| 333 | + | ||
| 334 | + /* #ifndef APP-NVUE */ | ||
| 335 | + @media screen and (max-width: 500px) { | ||
| 336 | + .hide-on-phone { | ||
| 337 | + display: none; | ||
| 338 | + } | ||
| 339 | + } | ||
| 340 | + | ||
| 341 | + /* #endif */ | ||
| 342 | + .uni-stat__select { | ||
| 343 | + display: flex; | ||
| 344 | + align-items: center; | ||
| 345 | + // padding: 15px; | ||
| 346 | + /* #ifdef H5 */ | ||
| 347 | + cursor: pointer; | ||
| 348 | + /* #endif */ | ||
| 349 | + width: 100%; | ||
| 350 | + flex: 1; | ||
| 351 | + box-sizing: border-box; | ||
| 352 | + } | ||
| 353 | + | ||
| 354 | + .uni-stat-box { | ||
| 355 | + width: 100%; | ||
| 356 | + flex: 1; | ||
| 357 | + } | ||
| 358 | + | ||
| 359 | + .uni-stat__actived { | ||
| 360 | + width: 100%; | ||
| 361 | + flex: 1; | ||
| 362 | + // outline: 1px solid #2979ff; | ||
| 363 | + } | ||
| 364 | + | ||
| 365 | + .uni-label-text { | ||
| 366 | + font-size: 14px; | ||
| 367 | + font-weight: bold; | ||
| 368 | + color: $uni-base-color; | ||
| 369 | + margin: auto 0; | ||
| 370 | + margin-right: 5px; | ||
| 371 | + } | ||
| 372 | + | ||
| 373 | + .uni-select { | ||
| 374 | + font-size: 14px; | ||
| 375 | + border: 1px solid $uni-border-3; | ||
| 376 | + box-sizing: border-box; | ||
| 377 | + border-radius: 4px; | ||
| 378 | + padding: 0 5px; | ||
| 379 | + padding-left: 10px; | ||
| 380 | + position: relative; | ||
| 381 | + /* #ifndef APP-NVUE */ | ||
| 382 | + display: flex; | ||
| 383 | + user-select: none; | ||
| 384 | + /* #endif */ | ||
| 385 | + flex-direction: row; | ||
| 386 | + align-items: center; | ||
| 387 | + border-bottom: solid 1px $uni-border-3; | ||
| 388 | + width: 100%; | ||
| 389 | + flex: 1; | ||
| 390 | + height: 35px; | ||
| 391 | + | ||
| 392 | + &--disabled { | ||
| 393 | + background-color: #f5f7fa; | ||
| 394 | + cursor: not-allowed; | ||
| 395 | + } | ||
| 396 | + } | ||
| 397 | + | ||
| 398 | + .uni-select__label { | ||
| 399 | + font-size: 16px; | ||
| 400 | + // line-height: 22px; | ||
| 401 | + height: 35px; | ||
| 402 | + padding-right: 10px; | ||
| 403 | + color: $uni-secondary-color; | ||
| 404 | + } | ||
| 405 | + | ||
| 406 | + .uni-select__input-box { | ||
| 407 | + height: 35px; | ||
| 408 | + position: relative; | ||
| 409 | + /* #ifndef APP-NVUE */ | ||
| 410 | + display: flex; | ||
| 411 | + /* #endif */ | ||
| 412 | + flex: 1; | ||
| 413 | + flex-direction: row; | ||
| 414 | + align-items: center; | ||
| 415 | + } | ||
| 416 | + | ||
| 417 | + .uni-select__input { | ||
| 418 | + flex: 1; | ||
| 419 | + font-size: 14px; | ||
| 420 | + height: 22px; | ||
| 421 | + line-height: 22px; | ||
| 422 | + } | ||
| 423 | + | ||
| 424 | + .uni-select__input-plac { | ||
| 425 | + font-size: 14px; | ||
| 426 | + color: $uni-secondary-color; | ||
| 427 | + } | ||
| 428 | + | ||
| 429 | + .uni-select__selector { | ||
| 430 | + /* #ifndef APP-NVUE */ | ||
| 431 | + box-sizing: border-box; | ||
| 432 | + /* #endif */ | ||
| 433 | + position: absolute; | ||
| 434 | + left: 0; | ||
| 435 | + width: 100%; | ||
| 436 | + background-color: #FFFFFF; | ||
| 437 | + border: 1px solid #EBEEF5; | ||
| 438 | + border-radius: 6px; | ||
| 439 | + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); | ||
| 440 | + z-index: 3; | ||
| 441 | + padding: 4px 0; | ||
| 442 | + } | ||
| 443 | + | ||
| 444 | + .uni-select__selector-scroll { | ||
| 445 | + /* #ifndef APP-NVUE */ | ||
| 446 | + max-height: 200px; | ||
| 447 | + box-sizing: border-box; | ||
| 448 | + /* #endif */ | ||
| 449 | + } | ||
| 450 | + | ||
| 451 | + /* #ifdef H5 */ | ||
| 452 | + @media (min-width: 768px) { | ||
| 453 | + .uni-select__selector-scroll { | ||
| 454 | + max-height: 600px; | ||
| 455 | + } | ||
| 456 | + } | ||
| 457 | + | ||
| 458 | + /* #endif */ | ||
| 459 | + | ||
| 460 | + .uni-select__selector-empty, | ||
| 461 | + .uni-select__selector-item { | ||
| 462 | + /* #ifndef APP-NVUE */ | ||
| 463 | + display: flex; | ||
| 464 | + cursor: pointer; | ||
| 465 | + /* #endif */ | ||
| 466 | + line-height: 35px; | ||
| 467 | + font-size: 14px; | ||
| 468 | + text-align: center; | ||
| 469 | + /* border-bottom: solid 1px $uni-border-3; */ | ||
| 470 | + padding: 0px 10px; | ||
| 471 | + } | ||
| 472 | + | ||
| 473 | + .uni-select__selector-item:hover { | ||
| 474 | + background-color: #f9f9f9; | ||
| 475 | + } | ||
| 476 | + | ||
| 477 | + .uni-select__selector-empty:last-child, | ||
| 478 | + .uni-select__selector-item:last-child { | ||
| 479 | + /* #ifndef APP-NVUE */ | ||
| 480 | + border-bottom: none; | ||
| 481 | + /* #endif */ | ||
| 482 | + } | ||
| 483 | + | ||
| 484 | + .uni-select__selector__disabled { | ||
| 485 | + opacity: 0.4; | ||
| 486 | + cursor: default; | ||
| 487 | + } | ||
| 488 | + | ||
| 489 | + /* picker 弹出层通用的指示小三角 */ | ||
| 490 | + .uni-popper__arrow_bottom, | ||
| 491 | + .uni-popper__arrow_bottom::after, | ||
| 492 | + .uni-popper__arrow_top, | ||
| 493 | + .uni-popper__arrow_top::after, | ||
| 494 | + { | ||
| 495 | + position: absolute; | ||
| 496 | + display: block; | ||
| 497 | + width: 0; | ||
| 498 | + height: 0; | ||
| 499 | + border-color: transparent; | ||
| 500 | + border-style: solid; | ||
| 501 | + border-width: 6px; | ||
| 502 | + } | ||
| 503 | + | ||
| 504 | + .uni-popper__arrow_bottom { | ||
| 505 | + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | ||
| 506 | + top: -6px; | ||
| 507 | + left: 10%; | ||
| 508 | + margin-right: 3px; | ||
| 509 | + border-top-width: 0; | ||
| 510 | + border-bottom-color: #EBEEF5; | ||
| 511 | + } | ||
| 512 | + | ||
| 513 | + .uni-popper__arrow_bottom::after { | ||
| 514 | + content: " "; | ||
| 515 | + top: 1px; | ||
| 516 | + margin-left: -6px; | ||
| 517 | + border-top-width: 0; | ||
| 518 | + border-bottom-color: #fff; | ||
| 519 | + } | ||
| 520 | + | ||
| 521 | + .uni-popper__arrow_top { | ||
| 522 | + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | ||
| 523 | + bottom: -6px; | ||
| 524 | + left: 10%; | ||
| 525 | + margin-right: 3px; | ||
| 526 | + border-bottom-width: 0; | ||
| 527 | + border-top-color: #EBEEF5; | ||
| 528 | + } | ||
| 529 | + | ||
| 530 | + .uni-popper__arrow_top::after { | ||
| 531 | + content: " "; | ||
| 532 | + bottom: 1px; | ||
| 533 | + margin-left: -6px; | ||
| 534 | + border-bottom-width: 0; | ||
| 535 | + border-top-color: #fff; | ||
| 536 | + } | ||
| 537 | + | ||
| 538 | + | ||
| 539 | + .uni-select__input-text { | ||
| 540 | + // width: 280px; | ||
| 541 | + width: 100%; | ||
| 542 | + color: $uni-main-color; | ||
| 543 | + white-space: nowrap; | ||
| 544 | + text-overflow: ellipsis; | ||
| 545 | + --o-text-overflow: ellipsis; | ||
| 546 | + overflow: hidden; | ||
| 547 | + } | ||
| 548 | + | ||
| 549 | + .uni-select__input-placeholder { | ||
| 550 | + color: $uni-base-color; | ||
| 551 | + font-size: 12px; | ||
| 552 | + } | ||
| 553 | + | ||
| 554 | + .uni-select--mask { | ||
| 555 | + position: fixed; | ||
| 556 | + top: 0; | ||
| 557 | + bottom: 0; | ||
| 558 | + right: 0; | ||
| 559 | + left: 0; | ||
| 560 | + z-index: 2; | ||
| 561 | + } | ||
| 562 | +</style> |
uni_modules/uni-data-select/package.json
0 → 100644
| 1 | +{ | ||
| 2 | + "id": "uni-data-select", | ||
| 3 | + "displayName": "uni-data-select 下拉框选择器", | ||
| 4 | + "version": "1.0.8", | ||
| 5 | + "description": "通过数据驱动的下拉框选择器", | ||
| 6 | + "keywords": [ | ||
| 7 | + "uni-ui", | ||
| 8 | + "select", | ||
| 9 | + "uni-data-select", | ||
| 10 | + "下拉框", | ||
| 11 | + "下拉选" | ||
| 12 | +], | ||
| 13 | + "repository": "https://github.com/dcloudio/uni-ui", | ||
| 14 | + "engines": { | ||
| 15 | + "HBuilderX": "^3.1.1" | ||
| 16 | + }, | ||
| 17 | + "directories": { | ||
| 18 | + "example": "../../temps/example_temps" | ||
| 19 | + }, | ||
| 20 | +"dcloudext": { | ||
| 21 | + "sale": { | ||
| 22 | + "regular": { | ||
| 23 | + "price": "0.00" | ||
| 24 | + }, | ||
| 25 | + "sourcecode": { | ||
| 26 | + "price": "0.00" | ||
| 27 | + } | ||
| 28 | + }, | ||
| 29 | + "contact": { | ||
| 30 | + "qq": "" | ||
| 31 | + }, | ||
| 32 | + "declaration": { | ||
| 33 | + "ads": "无", | ||
| 34 | + "data": "无", | ||
| 35 | + "permissions": "无" | ||
| 36 | + }, | ||
| 37 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | ||
| 38 | + "type": "component-vue" | ||
| 39 | + }, | ||
| 40 | + "uni_modules": { | ||
| 41 | + "dependencies": ["uni-load-more"], | ||
| 42 | + "encrypt": [], | ||
| 43 | + "platforms": { | ||
| 44 | + "cloud": { | ||
| 45 | + "tcb": "y", | ||
| 46 | + "aliyun": "y", | ||
| 47 | + "alipay": "n" | ||
| 48 | + }, | ||
| 49 | + "client": { | ||
| 50 | + "App": { | ||
| 51 | + "app-vue": "u", | ||
| 52 | + "app-nvue": "n" | ||
| 53 | + }, | ||
| 54 | + "H5-mobile": { | ||
| 55 | + "Safari": "y", | ||
| 56 | + "Android Browser": "y", | ||
| 57 | + "微信浏览器(Android)": "y", | ||
| 58 | + "QQ浏览器(Android)": "y" | ||
| 59 | + }, | ||
| 60 | + "H5-pc": { | ||
| 61 | + "Chrome": "y", | ||
| 62 | + "IE": "y", | ||
| 63 | + "Edge": "y", | ||
| 64 | + "Firefox": "y", | ||
| 65 | + "Safari": "y" | ||
| 66 | + }, | ||
| 67 | + "小程序": { | ||
| 68 | + "微信": "y", | ||
| 69 | + "阿里": "u", | ||
| 70 | + "百度": "u", | ||
| 71 | + "字节跳动": "u", | ||
| 72 | + "QQ": "u", | ||
| 73 | + "京东": "u" | ||
| 74 | + }, | ||
| 75 | + "快应用": { | ||
| 76 | + "华为": "u", | ||
| 77 | + "联盟": "u" | ||
| 78 | + }, | ||
| 79 | + "Vue": { | ||
| 80 | + "vue2": "y", | ||
| 81 | + "vue3": "y" | ||
| 82 | + } | ||
| 83 | + } | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | +} |
uni_modules/uni-data-select/readme.md
0 → 100644
uni_modules/uni-load-more/changelog.md
0 → 100644
| 1 | +## 1.3.3(2022-01-20) | ||
| 2 | +- 新增 showText属性 ,是否显示文本 | ||
| 3 | +## 1.3.2(2022-01-19) | ||
| 4 | +- 修复 nvue 平台下不显示文本的bug | ||
| 5 | +## 1.3.1(2022-01-19) | ||
| 6 | +- 修复 微信小程序平台样式选择器报警告的问题 | ||
| 7 | +## 1.3.0(2021-11-19) | ||
| 8 | +- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | ||
| 9 | +- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more) | ||
| 10 | +## 1.2.1(2021-08-24) | ||
| 11 | +- 新增 支持国际化 | ||
| 12 | +## 1.2.0(2021-07-30) | ||
| 13 | +- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | ||
| 14 | +## 1.1.8(2021-05-12) | ||
| 15 | +- 新增 组件示例地址 | ||
| 16 | +## 1.1.7(2021-03-30) | ||
| 17 | +- 修复 uni-load-more 在首页使用时,h5 平台报 'uni is not defined' 的 bug | ||
| 18 | +## 1.1.6(2021-02-05) | ||
| 19 | +- 调整为uni_modules目录规范 |
| 1 | +<template> | ||
| 2 | + <view class="uni-load-more" @click="onClick"> | ||
| 3 | + <!-- #ifdef APP-NVUE --> | ||
| 4 | + <loading-indicator v-if="!webviewHide && status === 'loading' && showIcon" | ||
| 5 | + :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true" | ||
| 6 | + class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator> | ||
| 7 | + <!-- #endif --> | ||
| 8 | + <!-- #ifdef H5 --> | ||
| 9 | + <svg width="24" height="24" viewBox="25 25 50 50" | ||
| 10 | + v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" | ||
| 11 | + :style="{width:iconSize+'px',height:iconSize+'px'}" | ||
| 12 | + class="uni-load-more__img uni-load-more__img--android-H5"> | ||
| 13 | + <circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle> | ||
| 14 | + </svg> | ||
| 15 | + <!-- #endif --> | ||
| 16 | + <!-- #ifndef APP-NVUE || H5 --> | ||
| 17 | + <view | ||
| 18 | + v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" | ||
| 19 | + :style="{width:iconSize+'px',height:iconSize+'px'}" | ||
| 20 | + class="uni-load-more__img uni-load-more__img--android-MP"> | ||
| 21 | + <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> | ||
| 22 | + <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> | ||
| 23 | + <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> | ||
| 24 | + </view> | ||
| 25 | + <!-- #endif --> | ||
| 26 | + <!-- #ifndef APP-NVUE --> | ||
| 27 | + <view v-else-if="!webviewHide && status === 'loading' && showIcon" | ||
| 28 | + :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5"> | ||
| 29 | + <image :src="imgBase64" mode="widthFix"></image> | ||
| 30 | + </view> | ||
| 31 | + <!-- #endif --> | ||
| 32 | + <text v-if="showText" class="uni-load-more__text" | ||
| 33 | + :style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text> | ||
| 34 | + </view> | ||
| 35 | +</template> | ||
| 36 | + | ||
| 37 | +<script> | ||
| 38 | + let platform | ||
| 39 | + setTimeout(() => { | ||
| 40 | + platform = uni.getSystemInfoSync().platform | ||
| 41 | + }, 16) | ||
| 42 | + | ||
| 43 | + import { | ||
| 44 | + initVueI18n | ||
| 45 | + } from '@dcloudio/uni-i18n' | ||
| 46 | + import messages from './i18n/index.js' | ||
| 47 | + const { | ||
| 48 | + t | ||
| 49 | + } = initVueI18n(messages) | ||
| 50 | + | ||
| 51 | + /** | ||
| 52 | + * LoadMore 加载更多 | ||
| 53 | + * @description 用于列表中,做滚动加载使用,展示 loading 的各种状态 | ||
| 54 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=29 | ||
| 55 | + * @property {String} status = [more|loading|noMore] loading 的状态 | ||
| 56 | + * @value more loading前 | ||
| 57 | + * @value loading loading中 | ||
| 58 | + * @value noMore 没有更多了 | ||
| 59 | + * @property {Number} iconSize 指定图标大小 | ||
| 60 | + * @property {Boolean} iconSize = [true|false] 是否显示 loading 图标 | ||
| 61 | + * @property {String} iconType = [snow|circle|auto] 指定图标样式 | ||
| 62 | + * @value snow ios雪花加载样式 | ||
| 63 | + * @value circle 安卓唤醒加载样式 | ||
| 64 | + * @value auto 根据平台自动选择加载样式 | ||
| 65 | + * @property {String} color 图标和文字颜色 | ||
| 66 | + * @property {Object} contentText 各状态文字说明,值为:{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"} | ||
| 67 | + * @event {Function} clickLoadMore 点击加载更多时触发 | ||
| 68 | + */ | ||
| 69 | + export default { | ||
| 70 | + name: 'UniLoadMore', | ||
| 71 | + emits: ['clickLoadMore'], | ||
| 72 | + props: { | ||
| 73 | + status: { | ||
| 74 | + // 上拉的状态:more-loading前;loading-loading中;noMore-没有更多了 | ||
| 75 | + type: String, | ||
| 76 | + default: 'more' | ||
| 77 | + }, | ||
| 78 | + showIcon: { | ||
| 79 | + type: Boolean, | ||
| 80 | + default: true | ||
| 81 | + }, | ||
| 82 | + iconType: { | ||
| 83 | + type: String, | ||
| 84 | + default: 'auto' | ||
| 85 | + }, | ||
| 86 | + iconSize: { | ||
| 87 | + type: Number, | ||
| 88 | + default: 24 | ||
| 89 | + }, | ||
| 90 | + color: { | ||
| 91 | + type: String, | ||
| 92 | + default: '#777777' | ||
| 93 | + }, | ||
| 94 | + contentText: { | ||
| 95 | + type: Object, | ||
| 96 | + default () { | ||
| 97 | + return { | ||
| 98 | + contentdown: '', | ||
| 99 | + contentrefresh: '', | ||
| 100 | + contentnomore: '' | ||
| 101 | + } | ||
| 102 | + } | ||
| 103 | + }, | ||
| 104 | + showText: { | ||
| 105 | + type: Boolean, | ||
| 106 | + default: true | ||
| 107 | + } | ||
| 108 | + }, | ||
| 109 | + data() { | ||
| 110 | + return { | ||
| 111 | + webviewHide: false, | ||
| 112 | + platform: platform, | ||
| 113 | + imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZVHb98LM+F5bHL8khA1iSeiyQBCRM+YGqKUnnJTDLGI0BGZlKDIU2MMglUiDApEZvSsZnQtBRJtKwQNKQMFYeRDR10WOLd8ljYXdh+v8v5fR3Od+797t1dnOnO/Ofce77z+J//+b/P+ZqtXbs2sJ9MJhNUV1cHJ06cCJo3bx7EPc2aNcvpy7pWrVoF+/fvDyoqKoI2bdoE9fX1F7TjN8a+EXBn/fkfvw942Tf+wYMHg9mzZwfjxo0LDhw4EPa1x2MbFw/fOGfPng1qa2tzcCkILsLDydq2bRsunpOTMM7TD/W/tZDZhPdeKD+yGxHhdu3aBV27dg3OnDlzMVANMheLAO3btw8KCwuDmpoaX5OxbgUIMEq7K8IcPnw4KCsrC/r37x8cP378/4cAXAB3vqSkJMuiDhTkw+XcuXNhOWbMmKBly5YhUT8xArhyFvP0BfwRsAuwxJZJsm/nzp2DTp06he/OU+cZ64K6o0ePBkOHDg2GDx8e6gEbJ5Q/NHNuAJQ1hgBeHUDlR7nVTkY8rQAvAi4z34vR/mPs1FoRsaCgIJThI0eOBC1atEiFGGV+5MiRoS45efJkqFjJFXV1dQuA012m2WcwTw98fy6CqBdsaiIO4CScrGPHjvk4odhavPquRtFWXEC25VgkREKOCh/qDSq+vn37htzD/mZTOmOc5U7zKzBPEedygWshcDyWvs30igAbU+6oyMgJBCFhwQE0fccxN60Ay9iebbjoDh06hMowjQxT4fXq1SskArmHZpkArvixp/kWzHdMeArExSJEaiXIjjRjRJ4DaAGWpibLzXN3Fm1vA5teBgh3j1Rv3bp1YgKwPdmf2p9zcyNYYgPKMfY0T5f5nNYdw158nJ8QawW4CLKwiOBSEgO/hok2eBydR+3dYH+PLxA5J8Vv0KBBwenTp0P2JWAx6+yFEBfs8lMY+y0SWMBNI9E4ThKi58VKTg3FQZS1RQF1cz27eC0QHMu+3E0SkUowjhVt5VdaWhp07949ZHv2Qd1EjDXM2cla1M0nl3GxAs3J9yREzyTdFVKVFOaE9qRA8GM0WebRuo9JGZKA7Mv2SeS/Z8+eoQ9BArMfFrLGo6jvxbhHbJZnKX2Rzz1O7QhJJ9Cs2ZMaWIyq/zhdeqPNfIoHd58clIQD+JSXl4dKlyIAuBdVXZwFVWKspSSoxE++h8x4k3uCnEhE4I5KwRiFWGOU0QWKiCYLbdoRMRKAu2kQ9vkfLU6dOhX06NEjlH+yMRZSinnuyWnYosVcji8CEA/6Cg2JF+IIUBqnGKUTCNwtwBN4f89RiK1R96DEgO2o0NDmtEdvVFdVVYV+P3UAPUEs6GFwV3PHmXkD4vh74iDFJysVI/MlaQhwKeBNTLYX5VuA8T4/gZxA4MRGFxDB6R7OmYPfyykGRJbyie+XnGYnQIC/coH9+vULiYrxrkL9ZA9+0ykaHIfEpM7ge8TiJ2CsHYwyMfafAF1yCGBHYIbCVDjDjKt7BeB51D+LgQa6OkG7IDYEEtvQ7lnXLKLtLdLuJBpE4gPUXcW2+PkZwOex+4cGDhwYDBkyRL7/HFcEwUGPo/8uWRUpYnfxGHco8HkewLHLyYmAawAPuIFZxhOpDfJQ8gbUv41yORAptMWBNr6oqMhWird5+u+iHmBb2nhjDV7HWBNQTgK8y11l5NetWzc5ULscAtSj7nbNI0skhWeUZCc0W4nyH/jO4Vz0u1IeYhbk4AiwM6tjxIWByHsoZ9qcIBPJd/y+DwPfBESOmCa/QF3WiZHucLlEDpNxcNhmheEOPgdQNx6/VZFQzFZ5TN08AHXQt2Ii3EdyFuUsPtTcGPhW5iMiCNELvz+Gdn9huG4HUJaW/w3g0wxV0XaG7arG2WeKiUWYM4Y7GO5ezshTARbbWGw/DvXkpp/ivVvE0JVoMxN4rpGzJMhE5Pl+xlATsDIqikP9F9D2z3h9nOksEUFhK+qO4rcPkoalMQ/HqJLIyb3F3JdjrCcw1yZ8joyJLR5gCo54etlag7qIoeNh1N1BRYj3DTFJ0elotxPlVzkGuYAmL0VSJVGAJA41c4Z6A3BzTLfn0HYwYKEI6CUAMzZEWvLsIcQOo1AmmyyM72nHJCfYsogflGV6jEk9vyQZXSuq6w4c16NsGcGZbwOPr+H1RkOk2LEzjNepxQkihHSCQ4ynAYNRx2zMKV92CQMWqj8J0BRE8EShxRFN6YrfCRhC0x3r/Zm4IbQCcmJoV0kMamllccR6FjHqUC5F2R/wS2dcymOlfAKOS4KmzQb5cpNC2MC7JhVn5wjXoJ44rYhLh8n0eXOCorJxa7POjbSlCGVczr34/RsAmrcvo9s+wGp3tzVhntxiXiJ4nvEYb4FJkf0O8HocAePmLvCxnL0AORraVekJk6TYjDabRVXfRE2lCN1h6ZQRN1+InUbsCpKwoBZHh0dODN9JBCUffItXxEavTQkUtnfTVAplCWL3JISz29h4NjotnuSsQKJCk8dF+kJR6RARjrqFVmfPnj3ZbK8cIJ0msd6jgHPGtfVTQ8VLmlvh4mct9sobRmPic0DyDQQnx/NlfYUgyz59+oScsH379pAwXABD32nTpoUHIToESeI5mnbE/UqDdyLcafEBf2MCqgC7NwxIbMREJQ0g4D4sfJwnD+AmRrII05cfMWJE+L1169bQr+fip06dGp4oJ83lmYd5wj/EmMa4TaHivo4EeCguYZBnkB5g2aWA69OIEnUHOaGysjIYMGBAMGnSpODYsWPZwCpFmm4lNq+4gSLQA7jcX8DwtjEyRC8wjabnXEx9kfWnTJkSJkAo90xpJVV+FmcVNeYAF5zWngS4C4O91MBxmAv8blLEpbjI5sz9MTdAhcgkCT1RO8mZkAjfiYpTEvStAS53Uw1vAiUGgZ3GpuQEYvoiBqlIan7kSDHnTwJQFNiPu0+5VxCVYhcZIjNrdXUDdp+Eq5AZ3Gkg8QAyVZRZIk4Tl4QAbF9cXJxNYZMAtAokgs4BrNxEpCtteXg7DDTMDKYNSuQdKsnJBek7HxewvxaosWxLYXtw+cJp18217wql4aKCfBNoEu0O5VU+PhctJ0YeXD4C6JQpyrlpSLTojpGGGN5YwNziChdIZLk4lvLcFJ9jMX3QdiImY9bmGQU+TRUL5CHITTRlgF8D9ouD1MfmLoEPl5xokIumZ2cfgMpHt47IW9N64Hsh7wQYYjyIugWuF5fCqYncXRd5vPMWyizzvhi/32+nvG0dZc9vR6fZOu0md5e+uC408FvKSIOZwXlGvxPv95izA2Vtvg1xKFWARI+vMX66HUhpQQb643uW1bSjuTWyw2SBvDrBvjFic1eGGlz5esq3ko9uSIlBRqPuFcCv8F4WIcN12nVaBd0SaYwI6PDDImR11JkqgHcPmQssjxIn6bUshygDFJUTxPMpHk+jfjPgupgdnYV2R/g7xSjtpah8RJBewhwf0gGK6XI92u4wXFEU40afJ4DN4h5LcAd+40HI3JgJecuT0c062W0i2hQJUTcxan3/CMW1PF2K6bbA+Daz4xRs1D3Br1Cm0OihKCqizW78/nXAF/G5TXrEcVzaNMH6CyMswqsAHqDyDLEyou8lwOXnKF8DjI6KjV3KzMBiXkDH8ij/H214J5A596ekrZ3F0zXlWeL7+P5eUrNo3/QwC15uxthuzidy7DzKRwEDaAViiDgKbTbz7CJnzo0bN7pIfIiid8SuPwn25o3QCmpnyjlZkyxPP8EomCJzrGb7GJMx7tNsq4MT2xMUYaiErZOluTzKsnz3gwCeCZyVRZJfYplNEokEjwrPtxlxjeYAk+F1F74VAzPxQRNYYdtpOUvWs8J1sGhBJMNsb7igN8plJs1eSmLIhLKE4rvaCX27gOhLpLOsIzJ7qn/i+wZzcvSOZ23/du8TZjwV8zHIXoP4R3ifBxiFz1dcVpa3aPntPE+c6TmIWE9EtcMmAcPdWAhYhAXxcLOQi9L1WhD1Sc8p1d2oL7XGiRKp8F4A2i8K/nfI+y/gsTDJ/YC/8+AD5Uh04KHiGl+cIFPnBDDrPMjwRGkLXyxO4VGbfQWnDH2v0bVWE3C9QOXlepbgjEfIJQI6XDG3z5ahD9cw2pS78ipB85wyScNTvsVzlzzhL8/jRrnmVjfFJK/m3m4nj9vbgQTguT8XZTjsm672R5uJKEaQmBI/c58gyus8ZDagLpEVSJBIyHp4jn++xqPV71OgQgJYEWOtZ/haxRtKmWOBu8xdBLftWltsY84zE6WIEy/eIOWL+BaayMx+KHtL7EAkqdNDLiEXmEMUHniedtJqg9HmZtfvt26vNi0BdG3Ft3g8ZOf7PAu59TxtzivLNIekyi+wD1i8CuUiD9FXAa8C+/xS3JPmZnomyc7H+fb4/Se0bk41Fel621r4cgVxbq91V4jVqwB7HTe2M7jgB+QWHavZkDRPmZcASoZEmBx6i75bGjPcMdL4/VKGFAGWZkGzPG0XAbdL9A81G5LOmUnC9hHKJeO7dcUMjblSl12867ElFTtaGl20xvvLGPdVz/8TVuU7y0x1PG7vtNg24oz9Uo/Z412++VFWI7Fcog9tu9Lm6gvRmIPv9x1xmQAu6RDkXtbOtlGEmpgD5Nvnyc0dcv0EE6cfdi1HmhMf9wDF3k3gtRvEedhxjpgfqPb9PU9iEJHnyOUA7bQUXh6kq/D7l2iTjWv7XOD530BDr8jIrus+srXjt4MzumJMHuTsBa63YKE1+RR5lBjEikCCnWKWiHdzOgKO+nRIBAF88za/IFmJ3eMZov4CYxGBabcpGL8EYx+SeMXJeRwHNsV/h+vdxeuhEpN3ZyNY78Gm2fknJxVGhyjixPiQvVkNzT1elD9Py/aTAL64Hb9vcYmC9zfdXdT/C1LeGbg4rnBaAihDFJH12W5ulfNCNe/xTsP3bp8ikzJs5BF+5PNfAQYAPaseTdsEcaYAAAAASUVORK5CYII=' | ||
| 114 | + } | ||
| 115 | + }, | ||
| 116 | + computed: { | ||
| 117 | + iconSnowWidth() { | ||
| 118 | + return (Math.floor(this.iconSize / 24) || 1) * 2 | ||
| 119 | + }, | ||
| 120 | + contentdownText() { | ||
| 121 | + return this.contentText.contentdown || t("uni-load-more.contentdown") | ||
| 122 | + }, | ||
| 123 | + contentrefreshText() { | ||
| 124 | + return this.contentText.contentrefresh || t("uni-load-more.contentrefresh") | ||
| 125 | + }, | ||
| 126 | + contentnomoreText() { | ||
| 127 | + return this.contentText.contentnomore || t("uni-load-more.contentnomore") | ||
| 128 | + } | ||
| 129 | + }, | ||
| 130 | + mounted() { | ||
| 131 | + // #ifdef APP-PLUS | ||
| 132 | + var pages = getCurrentPages(); | ||
| 133 | + var page = pages[pages.length - 1]; | ||
| 134 | + var currentWebview = page.$getAppWebview(); | ||
| 135 | + currentWebview.addEventListener('hide', () => { | ||
| 136 | + this.webviewHide = true | ||
| 137 | + }) | ||
| 138 | + currentWebview.addEventListener('show', () => { | ||
| 139 | + this.webviewHide = false | ||
| 140 | + }) | ||
| 141 | + // #endif | ||
| 142 | + }, | ||
| 143 | + methods: { | ||
| 144 | + onClick() { | ||
| 145 | + this.$emit('clickLoadMore', { | ||
| 146 | + detail: { | ||
| 147 | + status: this.status, | ||
| 148 | + } | ||
| 149 | + }) | ||
| 150 | + } | ||
| 151 | + } | ||
| 152 | + } | ||
| 153 | +</script> | ||
| 154 | + | ||
| 155 | +<style lang="scss" > | ||
| 156 | + .uni-load-more { | ||
| 157 | + /* #ifndef APP-NVUE */ | ||
| 158 | + display: flex; | ||
| 159 | + /* #endif */ | ||
| 160 | + flex-direction: row; | ||
| 161 | + height: 40px; | ||
| 162 | + align-items: center; | ||
| 163 | + justify-content: center; | ||
| 164 | + } | ||
| 165 | + | ||
| 166 | + .uni-load-more__text { | ||
| 167 | + font-size: 14px; | ||
| 168 | + margin-left: 8px; | ||
| 169 | + } | ||
| 170 | + | ||
| 171 | + .uni-load-more__img { | ||
| 172 | + width: 24px; | ||
| 173 | + height: 24px; | ||
| 174 | + // margin-right: 8px; | ||
| 175 | + } | ||
| 176 | + | ||
| 177 | + .uni-load-more__img--nvue { | ||
| 178 | + color: #666666; | ||
| 179 | + } | ||
| 180 | + | ||
| 181 | + .uni-load-more__img--android, | ||
| 182 | + .uni-load-more__img--ios { | ||
| 183 | + width: 24px; | ||
| 184 | + height: 24px; | ||
| 185 | + transform: rotate(0deg); | ||
| 186 | + } | ||
| 187 | + | ||
| 188 | + /* #ifndef APP-NVUE */ | ||
| 189 | + .uni-load-more__img--android { | ||
| 190 | + animation: loading-ios 1s 0s linear infinite; | ||
| 191 | + } | ||
| 192 | + | ||
| 193 | + @keyframes loading-android { | ||
| 194 | + 0% { | ||
| 195 | + transform: rotate(0deg); | ||
| 196 | + } | ||
| 197 | + | ||
| 198 | + 100% { | ||
| 199 | + transform: rotate(360deg); | ||
| 200 | + } | ||
| 201 | + } | ||
| 202 | + | ||
| 203 | + .uni-load-more__img--ios-H5 { | ||
| 204 | + position: relative; | ||
| 205 | + animation: loading-ios-H5 1s 0s step-end infinite; | ||
| 206 | + } | ||
| 207 | + | ||
| 208 | + .uni-load-more__img--ios-H5 image { | ||
| 209 | + position: absolute; | ||
| 210 | + width: 100%; | ||
| 211 | + height: 100%; | ||
| 212 | + left: 0; | ||
| 213 | + top: 0; | ||
| 214 | + } | ||
| 215 | + | ||
| 216 | + @keyframes loading-ios-H5 { | ||
| 217 | + 0% { | ||
| 218 | + transform: rotate(0deg); | ||
| 219 | + } | ||
| 220 | + | ||
| 221 | + 8% { | ||
| 222 | + transform: rotate(30deg); | ||
| 223 | + } | ||
| 224 | + | ||
| 225 | + 16% { | ||
| 226 | + transform: rotate(60deg); | ||
| 227 | + } | ||
| 228 | + | ||
| 229 | + 24% { | ||
| 230 | + transform: rotate(90deg); | ||
| 231 | + } | ||
| 232 | + | ||
| 233 | + 32% { | ||
| 234 | + transform: rotate(120deg); | ||
| 235 | + } | ||
| 236 | + | ||
| 237 | + 40% { | ||
| 238 | + transform: rotate(150deg); | ||
| 239 | + } | ||
| 240 | + | ||
| 241 | + 48% { | ||
| 242 | + transform: rotate(180deg); | ||
| 243 | + } | ||
| 244 | + | ||
| 245 | + 56% { | ||
| 246 | + transform: rotate(210deg); | ||
| 247 | + } | ||
| 248 | + | ||
| 249 | + 64% { | ||
| 250 | + transform: rotate(240deg); | ||
| 251 | + } | ||
| 252 | + | ||
| 253 | + 73% { | ||
| 254 | + transform: rotate(270deg); | ||
| 255 | + } | ||
| 256 | + | ||
| 257 | + 82% { | ||
| 258 | + transform: rotate(300deg); | ||
| 259 | + } | ||
| 260 | + | ||
| 261 | + 91% { | ||
| 262 | + transform: rotate(330deg); | ||
| 263 | + } | ||
| 264 | + | ||
| 265 | + 100% { | ||
| 266 | + transform: rotate(360deg); | ||
| 267 | + } | ||
| 268 | + } | ||
| 269 | + | ||
| 270 | + /* #endif */ | ||
| 271 | + | ||
| 272 | + /* #ifdef H5 */ | ||
| 273 | + .uni-load-more__img--android-H5 { | ||
| 274 | + animation: loading-android-H5-rotate 2s linear infinite; | ||
| 275 | + transform-origin: center center; | ||
| 276 | + } | ||
| 277 | + | ||
| 278 | + .uni-load-more__img--android-H5 circle { | ||
| 279 | + display: inline-block; | ||
| 280 | + animation: loading-android-H5-dash 1.5s ease-in-out infinite; | ||
| 281 | + stroke: currentColor; | ||
| 282 | + stroke-linecap: round; | ||
| 283 | + } | ||
| 284 | + | ||
| 285 | + @keyframes loading-android-H5-rotate { | ||
| 286 | + 0% { | ||
| 287 | + transform: rotate(0deg); | ||
| 288 | + } | ||
| 289 | + | ||
| 290 | + 100% { | ||
| 291 | + transform: rotate(360deg); | ||
| 292 | + } | ||
| 293 | + } | ||
| 294 | + | ||
| 295 | + @keyframes loading-android-H5-dash { | ||
| 296 | + 0% { | ||
| 297 | + stroke-dasharray: 1, 200; | ||
| 298 | + stroke-dashoffset: 0; | ||
| 299 | + } | ||
| 300 | + | ||
| 301 | + 50% { | ||
| 302 | + stroke-dasharray: 90, 150; | ||
| 303 | + stroke-dashoffset: -40; | ||
| 304 | + } | ||
| 305 | + | ||
| 306 | + 100% { | ||
| 307 | + stroke-dasharray: 90, 150; | ||
| 308 | + stroke-dashoffset: -120; | ||
| 309 | + } | ||
| 310 | + } | ||
| 311 | + | ||
| 312 | + /* #endif */ | ||
| 313 | + | ||
| 314 | + /* #ifndef APP-NVUE || H5 */ | ||
| 315 | + .uni-load-more__img--android-MP { | ||
| 316 | + position: relative; | ||
| 317 | + width: 24px; | ||
| 318 | + height: 24px; | ||
| 319 | + transform: rotate(0deg); | ||
| 320 | + animation: loading-ios 1s 0s ease infinite; | ||
| 321 | + } | ||
| 322 | + | ||
| 323 | + .uni-load-more__img--android-MP .uni-load-more__img-icon { | ||
| 324 | + position: absolute; | ||
| 325 | + box-sizing: border-box; | ||
| 326 | + width: 100%; | ||
| 327 | + height: 100%; | ||
| 328 | + border-radius: 50%; | ||
| 329 | + border: solid 2px transparent; | ||
| 330 | + border-top: solid 2px #777777; | ||
| 331 | + transform-origin: center; | ||
| 332 | + } | ||
| 333 | + | ||
| 334 | + .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) { | ||
| 335 | + animation: loading-android-MP-1 1s 0s linear infinite; | ||
| 336 | + } | ||
| 337 | + | ||
| 338 | + .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) { | ||
| 339 | + animation: loading-android-MP-2 1s 0s linear infinite; | ||
| 340 | + } | ||
| 341 | + | ||
| 342 | + .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) { | ||
| 343 | + animation: loading-android-MP-3 1s 0s linear infinite; | ||
| 344 | + } | ||
| 345 | + | ||
| 346 | + @keyframes loading-android { | ||
| 347 | + 0% { | ||
| 348 | + transform: rotate(0deg); | ||
| 349 | + } | ||
| 350 | + | ||
| 351 | + 100% { | ||
| 352 | + transform: rotate(360deg); | ||
| 353 | + } | ||
| 354 | + } | ||
| 355 | + | ||
| 356 | + @keyframes loading-android-MP-1 { | ||
| 357 | + 0% { | ||
| 358 | + transform: rotate(0deg); | ||
| 359 | + } | ||
| 360 | + | ||
| 361 | + 50% { | ||
| 362 | + transform: rotate(90deg); | ||
| 363 | + } | ||
| 364 | + | ||
| 365 | + 100% { | ||
| 366 | + transform: rotate(360deg); | ||
| 367 | + } | ||
| 368 | + } | ||
| 369 | + | ||
| 370 | + @keyframes loading-android-MP-2 { | ||
| 371 | + 0% { | ||
| 372 | + transform: rotate(0deg); | ||
| 373 | + } | ||
| 374 | + | ||
| 375 | + 50% { | ||
| 376 | + transform: rotate(180deg); | ||
| 377 | + } | ||
| 378 | + | ||
| 379 | + 100% { | ||
| 380 | + transform: rotate(360deg); | ||
| 381 | + } | ||
| 382 | + } | ||
| 383 | + | ||
| 384 | + @keyframes loading-android-MP-3 { | ||
| 385 | + 0% { | ||
| 386 | + transform: rotate(0deg); | ||
| 387 | + } | ||
| 388 | + | ||
| 389 | + 50% { | ||
| 390 | + transform: rotate(270deg); | ||
| 391 | + } | ||
| 392 | + | ||
| 393 | + 100% { | ||
| 394 | + transform: rotate(360deg); | ||
| 395 | + } | ||
| 396 | + } | ||
| 397 | + | ||
| 398 | + /* #endif */ | ||
| 399 | +</style> |
uni_modules/uni-load-more/package.json
0 → 100644
| 1 | +{ | ||
| 2 | + "id": "uni-load-more", | ||
| 3 | + "displayName": "uni-load-more 加载更多", | ||
| 4 | + "version": "1.3.3", | ||
| 5 | + "description": "LoadMore 组件,常用在列表里面,做滚动加载使用。", | ||
| 6 | + "keywords": [ | ||
| 7 | + "uni-ui", | ||
| 8 | + "uniui", | ||
| 9 | + "加载更多", | ||
| 10 | + "load-more" | ||
| 11 | +], | ||
| 12 | + "repository": "https://github.com/dcloudio/uni-ui", | ||
| 13 | + "engines": { | ||
| 14 | + "HBuilderX": "" | ||
| 15 | + }, | ||
| 16 | + "directories": { | ||
| 17 | + "example": "../../temps/example_temps" | ||
| 18 | + }, | ||
| 19 | + "dcloudext": { | ||
| 20 | + "category": [ | ||
| 21 | + "前端组件", | ||
| 22 | + "通用组件" | ||
| 23 | + ], | ||
| 24 | + "sale": { | ||
| 25 | + "regular": { | ||
| 26 | + "price": "0.00" | ||
| 27 | + }, | ||
| 28 | + "sourcecode": { | ||
| 29 | + "price": "0.00" | ||
| 30 | + } | ||
| 31 | + }, | ||
| 32 | + "contact": { | ||
| 33 | + "qq": "" | ||
| 34 | + }, | ||
| 35 | + "declaration": { | ||
| 36 | + "ads": "无", | ||
| 37 | + "data": "无", | ||
| 38 | + "permissions": "无" | ||
| 39 | + }, | ||
| 40 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | ||
| 41 | + }, | ||
| 42 | + "uni_modules": { | ||
| 43 | + "dependencies": ["uni-scss"], | ||
| 44 | + "encrypt": [], | ||
| 45 | + "platforms": { | ||
| 46 | + "cloud": { | ||
| 47 | + "tcb": "y", | ||
| 48 | + "aliyun": "y" | ||
| 49 | + }, | ||
| 50 | + "client": { | ||
| 51 | + "App": { | ||
| 52 | + "app-vue": "y", | ||
| 53 | + "app-nvue": "y" | ||
| 54 | + }, | ||
| 55 | + "H5-mobile": { | ||
| 56 | + "Safari": "y", | ||
| 57 | + "Android Browser": "y", | ||
| 58 | + "微信浏览器(Android)": "y", | ||
| 59 | + "QQ浏览器(Android)": "y" | ||
| 60 | + }, | ||
| 61 | + "H5-pc": { | ||
| 62 | + "Chrome": "y", | ||
| 63 | + "IE": "y", | ||
| 64 | + "Edge": "y", | ||
| 65 | + "Firefox": "y", | ||
| 66 | + "Safari": "y" | ||
| 67 | + }, | ||
| 68 | + "小程序": { | ||
| 69 | + "微信": "y", | ||
| 70 | + "阿里": "y", | ||
| 71 | + "百度": "y", | ||
| 72 | + "字节跳动": "y", | ||
| 73 | + "QQ": "y" | ||
| 74 | + }, | ||
| 75 | + "快应用": { | ||
| 76 | + "华为": "u", | ||
| 77 | + "联盟": "u" | ||
| 78 | + }, | ||
| 79 | + "Vue": { | ||
| 80 | + "vue2": "y", | ||
| 81 | + "vue3": "y" | ||
| 82 | + } | ||
| 83 | + } | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | +} |
uni_modules/uni-load-more/readme.md
0 → 100644
uni_modules/uni-scss/changelog.md
0 → 100644
uni_modules/uni-scss/index.scss
0 → 100644
| 1 | +@import './styles/index.scss'; |
uni_modules/uni-scss/package.json
0 → 100644
| 1 | +{ | ||
| 2 | + "id": "uni-scss", | ||
| 3 | + "displayName": "uni-scss 辅助样式", | ||
| 4 | + "version": "1.0.3", | ||
| 5 | + "description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。", | ||
| 6 | + "keywords": [ | ||
| 7 | + "uni-scss", | ||
| 8 | + "uni-ui", | ||
| 9 | + "辅助样式" | ||
| 10 | +], | ||
| 11 | + "repository": "https://github.com/dcloudio/uni-ui", | ||
| 12 | + "engines": { | ||
| 13 | + "HBuilderX": "^3.1.0" | ||
| 14 | + }, | ||
| 15 | + "dcloudext": { | ||
| 16 | + "category": [ | ||
| 17 | + "JS SDK", | ||
| 18 | + "通用 SDK" | ||
| 19 | + ], | ||
| 20 | + "sale": { | ||
| 21 | + "regular": { | ||
| 22 | + "price": "0.00" | ||
| 23 | + }, | ||
| 24 | + "sourcecode": { | ||
| 25 | + "price": "0.00" | ||
| 26 | + } | ||
| 27 | + }, | ||
| 28 | + "contact": { | ||
| 29 | + "qq": "" | ||
| 30 | + }, | ||
| 31 | + "declaration": { | ||
| 32 | + "ads": "无", | ||
| 33 | + "data": "无", | ||
| 34 | + "permissions": "无" | ||
| 35 | + }, | ||
| 36 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | ||
| 37 | + }, | ||
| 38 | + "uni_modules": { | ||
| 39 | + "dependencies": [], | ||
| 40 | + "encrypt": [], | ||
| 41 | + "platforms": { | ||
| 42 | + "cloud": { | ||
| 43 | + "tcb": "y", | ||
| 44 | + "aliyun": "y" | ||
| 45 | + }, | ||
| 46 | + "client": { | ||
| 47 | + "App": { | ||
| 48 | + "app-vue": "y", | ||
| 49 | + "app-nvue": "u" | ||
| 50 | + }, | ||
| 51 | + "H5-mobile": { | ||
| 52 | + "Safari": "y", | ||
| 53 | + "Android Browser": "y", | ||
| 54 | + "微信浏览器(Android)": "y", | ||
| 55 | + "QQ浏览器(Android)": "y" | ||
| 56 | + }, | ||
| 57 | + "H5-pc": { | ||
| 58 | + "Chrome": "y", | ||
| 59 | + "IE": "y", | ||
| 60 | + "Edge": "y", | ||
| 61 | + "Firefox": "y", | ||
| 62 | + "Safari": "y" | ||
| 63 | + }, | ||
| 64 | + "小程序": { | ||
| 65 | + "微信": "y", | ||
| 66 | + "阿里": "y", | ||
| 67 | + "百度": "y", | ||
| 68 | + "字节跳动": "y", | ||
| 69 | + "QQ": "y" | ||
| 70 | + }, | ||
| 71 | + "快应用": { | ||
| 72 | + "华为": "n", | ||
| 73 | + "联盟": "n" | ||
| 74 | + }, | ||
| 75 | + "Vue": { | ||
| 76 | + "vue2": "y", | ||
| 77 | + "vue3": "y" | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + } | ||
| 81 | + } | ||
| 82 | +} |
uni_modules/uni-scss/readme.md
0 → 100644
uni_modules/uni-scss/styles/index.scss
0 → 100644
| 1 | + | ||
| 2 | +// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐 | ||
| 3 | +// @mixin get-styles($k,$c) { | ||
| 4 | +// @if $k == size or $k == weight{ | ||
| 5 | +// font-#{$k}:#{$c} | ||
| 6 | +// }@else{ | ||
| 7 | +// #{$k}:#{$c} | ||
| 8 | +// } | ||
| 9 | +// } | ||
| 10 | +$uni-ui-color:( | ||
| 11 | + // 主色 | ||
| 12 | + primary: $uni-primary, | ||
| 13 | + primary-disable: $uni-primary-disable, | ||
| 14 | + primary-light: $uni-primary-light, | ||
| 15 | + // 辅助色 | ||
| 16 | + success: $uni-success, | ||
| 17 | + success-disable: $uni-success-disable, | ||
| 18 | + success-light: $uni-success-light, | ||
| 19 | + warning: $uni-warning, | ||
| 20 | + warning-disable: $uni-warning-disable, | ||
| 21 | + warning-light: $uni-warning-light, | ||
| 22 | + error: $uni-error, | ||
| 23 | + error-disable: $uni-error-disable, | ||
| 24 | + error-light: $uni-error-light, | ||
| 25 | + info: $uni-info, | ||
| 26 | + info-disable: $uni-info-disable, | ||
| 27 | + info-light: $uni-info-light, | ||
| 28 | + // 中性色 | ||
| 29 | + main-color: $uni-main-color, | ||
| 30 | + base-color: $uni-base-color, | ||
| 31 | + secondary-color: $uni-secondary-color, | ||
| 32 | + extra-color: $uni-extra-color, | ||
| 33 | + // 背景色 | ||
| 34 | + bg-color: $uni-bg-color, | ||
| 35 | + // 边框颜色 | ||
| 36 | + border-1: $uni-border-1, | ||
| 37 | + border-2: $uni-border-2, | ||
| 38 | + border-3: $uni-border-3, | ||
| 39 | + border-4: $uni-border-4, | ||
| 40 | + // 黑色 | ||
| 41 | + black:$uni-black, | ||
| 42 | + // 白色 | ||
| 43 | + white:$uni-white, | ||
| 44 | + // 透明 | ||
| 45 | + transparent:$uni-transparent | ||
| 46 | +) !default; | ||
| 47 | +@each $key, $child in $uni-ui-color { | ||
| 48 | + .uni-#{"" + $key} { | ||
| 49 | + color: $child; | ||
| 50 | + } | ||
| 51 | + .uni-#{"" + $key}-bg { | ||
| 52 | + background-color: $child; | ||
| 53 | + } | ||
| 54 | +} | ||
| 55 | +.uni-shadow-sm { | ||
| 56 | + box-shadow: $uni-shadow-sm; | ||
| 57 | +} | ||
| 58 | +.uni-shadow-base { | ||
| 59 | + box-shadow: $uni-shadow-base; | ||
| 60 | +} | ||
| 61 | +.uni-shadow-lg { | ||
| 62 | + box-shadow: $uni-shadow-lg; | ||
| 63 | +} | ||
| 64 | +.uni-mask { | ||
| 65 | + background-color:$uni-mask; | ||
| 66 | +} |
| 1 | +@mixin radius($r,$d:null ,$important: false){ | ||
| 2 | + $radius-value:map-get($uni-radius, $r) if($important, !important, null); | ||
| 3 | + // Key exists within the $uni-radius variable | ||
| 4 | + @if (map-has-key($uni-radius, $r) and $d){ | ||
| 5 | + @if $d == t { | ||
| 6 | + border-top-left-radius:$radius-value; | ||
| 7 | + border-top-right-radius:$radius-value; | ||
| 8 | + }@else if $d == r { | ||
| 9 | + border-top-right-radius:$radius-value; | ||
| 10 | + border-bottom-right-radius:$radius-value; | ||
| 11 | + }@else if $d == b { | ||
| 12 | + border-bottom-left-radius:$radius-value; | ||
| 13 | + border-bottom-right-radius:$radius-value; | ||
| 14 | + }@else if $d == l { | ||
| 15 | + border-top-left-radius:$radius-value; | ||
| 16 | + border-bottom-left-radius:$radius-value; | ||
| 17 | + }@else if $d == tl { | ||
| 18 | + border-top-left-radius:$radius-value; | ||
| 19 | + }@else if $d == tr { | ||
| 20 | + border-top-right-radius:$radius-value; | ||
| 21 | + }@else if $d == br { | ||
| 22 | + border-bottom-right-radius:$radius-value; | ||
| 23 | + }@else if $d == bl { | ||
| 24 | + border-bottom-left-radius:$radius-value; | ||
| 25 | + } | ||
| 26 | + }@else{ | ||
| 27 | + border-radius:$radius-value; | ||
| 28 | + } | ||
| 29 | +} | ||
| 30 | + | ||
| 31 | +@each $key, $child in $uni-radius { | ||
| 32 | + @if($key){ | ||
| 33 | + .uni-radius-#{"" + $key} { | ||
| 34 | + @include radius($key) | ||
| 35 | + } | ||
| 36 | + }@else{ | ||
| 37 | + .uni-radius { | ||
| 38 | + @include radius($key) | ||
| 39 | + } | ||
| 40 | + } | ||
| 41 | +} | ||
| 42 | + | ||
| 43 | +@each $direction in t, r, b, l,tl, tr, br, bl { | ||
| 44 | + @each $key, $child in $uni-radius { | ||
| 45 | + @if($key){ | ||
| 46 | + .uni-radius-#{"" + $direction}-#{"" + $key} { | ||
| 47 | + @include radius($key,$direction,false) | ||
| 48 | + } | ||
| 49 | + }@else{ | ||
| 50 | + .uni-radius-#{$direction} { | ||
| 51 | + @include radius($key,$direction,false) | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | +} |
| 1 | + | ||
| 2 | +@mixin fn($space,$direction,$size,$n) { | ||
| 3 | + @if $n { | ||
| 4 | + #{$space}-#{$direction}: #{$size*$uni-space-root}px | ||
| 5 | + } @else { | ||
| 6 | + #{$space}-#{$direction}: #{-$size*$uni-space-root}px | ||
| 7 | + } | ||
| 8 | +} | ||
| 9 | +@mixin get-styles($direction,$i,$space,$n){ | ||
| 10 | + @if $direction == t { | ||
| 11 | + @include fn($space, top,$i,$n); | ||
| 12 | + } | ||
| 13 | + @if $direction == r { | ||
| 14 | + @include fn($space, right,$i,$n); | ||
| 15 | + } | ||
| 16 | + @if $direction == b { | ||
| 17 | + @include fn($space, bottom,$i,$n); | ||
| 18 | + } | ||
| 19 | + @if $direction == l { | ||
| 20 | + @include fn($space, left,$i,$n); | ||
| 21 | + } | ||
| 22 | + @if $direction == x { | ||
| 23 | + @include fn($space, left,$i,$n); | ||
| 24 | + @include fn($space, right,$i,$n); | ||
| 25 | + } | ||
| 26 | + @if $direction == y { | ||
| 27 | + @include fn($space, top,$i,$n); | ||
| 28 | + @include fn($space, bottom,$i,$n); | ||
| 29 | + } | ||
| 30 | + @if $direction == a { | ||
| 31 | + @if $n { | ||
| 32 | + #{$space}:#{$i*$uni-space-root}px; | ||
| 33 | + } @else { | ||
| 34 | + #{$space}:#{-$i*$uni-space-root}px; | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +@each $orientation in m,p { | ||
| 40 | + $space: margin; | ||
| 41 | + @if $orientation == m { | ||
| 42 | + $space: margin; | ||
| 43 | + } @else { | ||
| 44 | + $space: padding; | ||
| 45 | + } | ||
| 46 | + @for $i from 0 through 16 { | ||
| 47 | + @each $direction in t, r, b, l, x, y, a { | ||
| 48 | + .uni-#{$orientation}#{$direction}-#{$i} { | ||
| 49 | + @include get-styles($direction,$i,$space,true); | ||
| 50 | + } | ||
| 51 | + .uni-#{$orientation}#{$direction}-n#{$i} { | ||
| 52 | + @include get-styles($direction,$i,$space,false); | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | + } | ||
| 56 | +} |
| 1 | +/* #ifndef APP-NVUE */ | ||
| 2 | + | ||
| 3 | +$-color-white:#fff; | ||
| 4 | +$-color-black:#000; | ||
| 5 | +@mixin base-style($color) { | ||
| 6 | + color: #fff; | ||
| 7 | + background-color: $color; | ||
| 8 | + border-color: mix($-color-black, $color, 8%); | ||
| 9 | + &:not([hover-class]):active { | ||
| 10 | + background: mix($-color-black, $color, 10%); | ||
| 11 | + border-color: mix($-color-black, $color, 20%); | ||
| 12 | + color: $-color-white; | ||
| 13 | + outline: none; | ||
| 14 | + } | ||
| 15 | +} | ||
| 16 | +@mixin is-color($color) { | ||
| 17 | + @include base-style($color); | ||
| 18 | + &[loading] { | ||
| 19 | + @include base-style($color); | ||
| 20 | + &::before { | ||
| 21 | + margin-right:5px; | ||
| 22 | + } | ||
| 23 | + } | ||
| 24 | + &[disabled] { | ||
| 25 | + &, | ||
| 26 | + &[loading], | ||
| 27 | + &:not([hover-class]):active { | ||
| 28 | + color: $-color-white; | ||
| 29 | + border-color: mix(darken($color,10%), $-color-white); | ||
| 30 | + background-color: mix($color, $-color-white); | ||
| 31 | + } | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | +} | ||
| 35 | +@mixin base-plain-style($color) { | ||
| 36 | + color:$color; | ||
| 37 | + background-color: mix($-color-white, $color, 90%); | ||
| 38 | + border-color: mix($-color-white, $color, 70%); | ||
| 39 | + &:not([hover-class]):active { | ||
| 40 | + background: mix($-color-white, $color, 80%); | ||
| 41 | + color: $color; | ||
| 42 | + outline: none; | ||
| 43 | + border-color: mix($-color-white, $color, 50%); | ||
| 44 | + } | ||
| 45 | +} | ||
| 46 | +@mixin is-plain($color){ | ||
| 47 | + &[plain] { | ||
| 48 | + @include base-plain-style($color); | ||
| 49 | + &[loading] { | ||
| 50 | + @include base-plain-style($color); | ||
| 51 | + &::before { | ||
| 52 | + margin-right:5px; | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | + &[disabled] { | ||
| 56 | + &, | ||
| 57 | + &:active { | ||
| 58 | + color: mix($-color-white, $color, 40%); | ||
| 59 | + background-color: mix($-color-white, $color, 90%); | ||
| 60 | + border-color: mix($-color-white, $color, 80%); | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | + } | ||
| 64 | +} | ||
| 65 | + | ||
| 66 | + | ||
| 67 | +.uni-btn { | ||
| 68 | + margin: 5px; | ||
| 69 | + color: #393939; | ||
| 70 | + border:1px solid #ccc; | ||
| 71 | + font-size: 16px; | ||
| 72 | + font-weight: 200; | ||
| 73 | + background-color: #F9F9F9; | ||
| 74 | + // TODO 暂时处理边框隐藏一边的问题 | ||
| 75 | + overflow: visible; | ||
| 76 | + &::after{ | ||
| 77 | + border: none; | ||
| 78 | + } | ||
| 79 | + | ||
| 80 | + &:not([type]),&[type=default] { | ||
| 81 | + color: #999; | ||
| 82 | + &[loading] { | ||
| 83 | + background: none; | ||
| 84 | + &::before { | ||
| 85 | + margin-right:5px; | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | + | ||
| 89 | + | ||
| 90 | + | ||
| 91 | + &[disabled]{ | ||
| 92 | + color: mix($-color-white, #999, 60%); | ||
| 93 | + &, | ||
| 94 | + &[loading], | ||
| 95 | + &:active { | ||
| 96 | + color: mix($-color-white, #999, 60%); | ||
| 97 | + background-color: mix($-color-white,$-color-black , 98%); | ||
| 98 | + border-color: mix($-color-white, #999, 85%); | ||
| 99 | + } | ||
| 100 | + } | ||
| 101 | + | ||
| 102 | + &[plain] { | ||
| 103 | + color: #999; | ||
| 104 | + background: none; | ||
| 105 | + border-color: $uni-border-1; | ||
| 106 | + &:not([hover-class]):active { | ||
| 107 | + background: none; | ||
| 108 | + color: mix($-color-white, $-color-black, 80%); | ||
| 109 | + border-color: mix($-color-white, $-color-black, 90%); | ||
| 110 | + outline: none; | ||
| 111 | + } | ||
| 112 | + &[disabled]{ | ||
| 113 | + &, | ||
| 114 | + &[loading], | ||
| 115 | + &:active { | ||
| 116 | + background: none; | ||
| 117 | + color: mix($-color-white, #999, 60%); | ||
| 118 | + border-color: mix($-color-white, #999, 85%); | ||
| 119 | + } | ||
| 120 | + } | ||
| 121 | + } | ||
| 122 | + } | ||
| 123 | + | ||
| 124 | + &:not([hover-class]):active { | ||
| 125 | + color: mix($-color-white, $-color-black, 50%); | ||
| 126 | + } | ||
| 127 | + | ||
| 128 | + &[size=mini] { | ||
| 129 | + font-size: 16px; | ||
| 130 | + font-weight: 200; | ||
| 131 | + border-radius: 8px; | ||
| 132 | + } | ||
| 133 | + | ||
| 134 | + | ||
| 135 | + | ||
| 136 | + &.uni-btn-small { | ||
| 137 | + font-size: 14px; | ||
| 138 | + } | ||
| 139 | + &.uni-btn-mini { | ||
| 140 | + font-size: 12px; | ||
| 141 | + } | ||
| 142 | + | ||
| 143 | + &.uni-btn-radius { | ||
| 144 | + border-radius: 999px; | ||
| 145 | + } | ||
| 146 | + &[type=primary] { | ||
| 147 | + @include is-color($uni-primary); | ||
| 148 | + @include is-plain($uni-primary) | ||
| 149 | + } | ||
| 150 | + &[type=success] { | ||
| 151 | + @include is-color($uni-success); | ||
| 152 | + @include is-plain($uni-success) | ||
| 153 | + } | ||
| 154 | + &[type=error] { | ||
| 155 | + @include is-color($uni-error); | ||
| 156 | + @include is-plain($uni-error) | ||
| 157 | + } | ||
| 158 | + &[type=warning] { | ||
| 159 | + @include is-color($uni-warning); | ||
| 160 | + @include is-plain($uni-warning) | ||
| 161 | + } | ||
| 162 | + &[type=info] { | ||
| 163 | + @include is-color($uni-info); | ||
| 164 | + @include is-plain($uni-info) | ||
| 165 | + } | ||
| 166 | +} | ||
| 167 | +/* #endif */ |
| 1 | +@mixin get-styles($k,$c) { | ||
| 2 | + @if $k == size or $k == weight{ | ||
| 3 | + font-#{$k}:#{$c} | ||
| 4 | + }@else{ | ||
| 5 | + #{$k}:#{$c} | ||
| 6 | + } | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +@each $key, $child in $uni-headings { | ||
| 10 | + /* #ifndef APP-NVUE */ | ||
| 11 | + .uni-#{$key} { | ||
| 12 | + @each $k, $c in $child { | ||
| 13 | + @include get-styles($k,$c) | ||
| 14 | + } | ||
| 15 | + } | ||
| 16 | + /* #endif */ | ||
| 17 | + /* #ifdef APP-NVUE */ | ||
| 18 | + .container .uni-#{$key} { | ||
| 19 | + @each $k, $c in $child { | ||
| 20 | + @include get-styles($k,$c) | ||
| 21 | + } | ||
| 22 | + } | ||
| 23 | + /* #endif */ | ||
| 24 | +} |
| 1 | +// @use "sass:math"; | ||
| 2 | +@import '../tools/functions.scss'; | ||
| 3 | +// 间距基础倍数 | ||
| 4 | +$uni-space-root: 2 !default; | ||
| 5 | +// 边框半径默认值 | ||
| 6 | +$uni-radius-root:5px !default; | ||
| 7 | +$uni-radius: () !default; | ||
| 8 | +// 边框半径断点 | ||
| 9 | +$uni-radius: map-deep-merge( | ||
| 10 | + ( | ||
| 11 | + 0: 0, | ||
| 12 | + // TODO 当前版本暂时不支持 sm 属性 | ||
| 13 | + // 'sm': math.div($uni-radius-root, 2), | ||
| 14 | + null: $uni-radius-root, | ||
| 15 | + 'lg': $uni-radius-root * 2, | ||
| 16 | + 'xl': $uni-radius-root * 6, | ||
| 17 | + 'pill': 9999px, | ||
| 18 | + 'circle': 50% | ||
| 19 | + ), | ||
| 20 | + $uni-radius | ||
| 21 | +); | ||
| 22 | +// 字体家族 | ||
| 23 | +$body-font-family: 'Roboto', sans-serif !default; | ||
| 24 | +// 文本 | ||
| 25 | +$heading-font-family: $body-font-family !default; | ||
| 26 | +$uni-headings: () !default; | ||
| 27 | +$letterSpacing: -0.01562em; | ||
| 28 | +$uni-headings: map-deep-merge( | ||
| 29 | + ( | ||
| 30 | + 'h1': ( | ||
| 31 | + size: 32px, | ||
| 32 | + weight: 300, | ||
| 33 | + line-height: 50px, | ||
| 34 | + // letter-spacing:-0.01562em | ||
| 35 | + ), | ||
| 36 | + 'h2': ( | ||
| 37 | + size: 28px, | ||
| 38 | + weight: 300, | ||
| 39 | + line-height: 40px, | ||
| 40 | + // letter-spacing: -0.00833em | ||
| 41 | + ), | ||
| 42 | + 'h3': ( | ||
| 43 | + size: 24px, | ||
| 44 | + weight: 400, | ||
| 45 | + line-height: 32px, | ||
| 46 | + // letter-spacing: normal | ||
| 47 | + ), | ||
| 48 | + 'h4': ( | ||
| 49 | + size: 20px, | ||
| 50 | + weight: 400, | ||
| 51 | + line-height: 30px, | ||
| 52 | + // letter-spacing: 0.00735em | ||
| 53 | + ), | ||
| 54 | + 'h5': ( | ||
| 55 | + size: 16px, | ||
| 56 | + weight: 400, | ||
| 57 | + line-height: 24px, | ||
| 58 | + // letter-spacing: normal | ||
| 59 | + ), | ||
| 60 | + 'h6': ( | ||
| 61 | + size: 14px, | ||
| 62 | + weight: 500, | ||
| 63 | + line-height: 18px, | ||
| 64 | + // letter-spacing: 0.0125em | ||
| 65 | + ), | ||
| 66 | + 'subtitle': ( | ||
| 67 | + size: 12px, | ||
| 68 | + weight: 400, | ||
| 69 | + line-height: 20px, | ||
| 70 | + // letter-spacing: 0.00937em | ||
| 71 | + ), | ||
| 72 | + 'body': ( | ||
| 73 | + font-size: 14px, | ||
| 74 | + font-weight: 400, | ||
| 75 | + line-height: 22px, | ||
| 76 | + // letter-spacing: 0.03125em | ||
| 77 | + ), | ||
| 78 | + 'caption': ( | ||
| 79 | + 'size': 12px, | ||
| 80 | + 'weight': 400, | ||
| 81 | + 'line-height': 20px, | ||
| 82 | + // 'letter-spacing': 0.03333em, | ||
| 83 | + // 'text-transform': false | ||
| 84 | + ) | ||
| 85 | + ), | ||
| 86 | + $uni-headings | ||
| 87 | +); | ||
| 88 | + | ||
| 89 | + | ||
| 90 | + | ||
| 91 | +// 主色 | ||
| 92 | +$uni-primary: #2979ff !default; | ||
| 93 | +$uni-primary-disable:lighten($uni-primary,20%) !default; | ||
| 94 | +$uni-primary-light: lighten($uni-primary,25%) !default; | ||
| 95 | + | ||
| 96 | +// 辅助色 | ||
| 97 | +// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 | ||
| 98 | +$uni-success: #18bc37 !default; | ||
| 99 | +$uni-success-disable:lighten($uni-success,20%) !default; | ||
| 100 | +$uni-success-light: lighten($uni-success,25%) !default; | ||
| 101 | + | ||
| 102 | +$uni-warning: #f3a73f !default; | ||
| 103 | +$uni-warning-disable:lighten($uni-warning,20%) !default; | ||
| 104 | +$uni-warning-light: lighten($uni-warning,25%) !default; | ||
| 105 | + | ||
| 106 | +$uni-error: #e43d33 !default; | ||
| 107 | +$uni-error-disable:lighten($uni-error,20%) !default; | ||
| 108 | +$uni-error-light: lighten($uni-error,25%) !default; | ||
| 109 | + | ||
| 110 | +$uni-info: #8f939c !default; | ||
| 111 | +$uni-info-disable:lighten($uni-info,20%) !default; | ||
| 112 | +$uni-info-light: lighten($uni-info,25%) !default; | ||
| 113 | + | ||
| 114 | +// 中性色 | ||
| 115 | +// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 | ||
| 116 | +$uni-main-color: #3a3a3a !default; // 主要文字 | ||
| 117 | +$uni-base-color: #6a6a6a !default; // 常规文字 | ||
| 118 | +$uni-secondary-color: #909399 !default; // 次要文字 | ||
| 119 | +$uni-extra-color: #c7c7c7 !default; // 辅助说明 | ||
| 120 | + | ||
| 121 | +// 边框颜色 | ||
| 122 | +$uni-border-1: #F0F0F0 !default; | ||
| 123 | +$uni-border-2: #EDEDED !default; | ||
| 124 | +$uni-border-3: #DCDCDC !default; | ||
| 125 | +$uni-border-4: #B9B9B9 !default; | ||
| 126 | + | ||
| 127 | +// 常规色 | ||
| 128 | +$uni-black: #000000 !default; | ||
| 129 | +$uni-white: #ffffff !default; | ||
| 130 | +$uni-transparent: rgba($color: #000000, $alpha: 0) !default; | ||
| 131 | + | ||
| 132 | +// 背景色 | ||
| 133 | +$uni-bg-color: #f7f7f7 !default; | ||
| 134 | + | ||
| 135 | +/* 水平间距 */ | ||
| 136 | +$uni-spacing-sm: 8px !default; | ||
| 137 | +$uni-spacing-base: 15px !default; | ||
| 138 | +$uni-spacing-lg: 30px !default; | ||
| 139 | + | ||
| 140 | +// 阴影 | ||
| 141 | +$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; | ||
| 142 | +$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; | ||
| 143 | +$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; | ||
| 144 | + | ||
| 145 | +// 蒙版 | ||
| 146 | +$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
| 1 | +// 合并 map | ||
| 2 | +@function map-deep-merge($parent-map, $child-map){ | ||
| 3 | + $result: $parent-map; | ||
| 4 | + @each $key, $child in $child-map { | ||
| 5 | + $parent-has-key: map-has-key($result, $key); | ||
| 6 | + $parent-value: map-get($result, $key); | ||
| 7 | + $parent-type: type-of($parent-value); | ||
| 8 | + $child-type: type-of($child); | ||
| 9 | + $parent-is-map: $parent-type == map; | ||
| 10 | + $child-is-map: $child-type == map; | ||
| 11 | + | ||
| 12 | + @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ | ||
| 13 | + $result: map-merge($result, ( $key: $child )); | ||
| 14 | + }@else { | ||
| 15 | + $result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); | ||
| 16 | + } | ||
| 17 | + } | ||
| 18 | + @return $result; | ||
| 19 | +}; |
uni_modules/uni-scss/theme.scss
0 → 100644
| 1 | +// 间距基础倍数 | ||
| 2 | +$uni-space-root: 2; | ||
| 3 | +// 边框半径默认值 | ||
| 4 | +$uni-radius-root:5px; | ||
| 5 | +// 主色 | ||
| 6 | +$uni-primary: #2979ff; | ||
| 7 | +// 辅助色 | ||
| 8 | +$uni-success: #4cd964; | ||
| 9 | +// 警告色 | ||
| 10 | +$uni-warning: #f0ad4e; | ||
| 11 | +// 错误色 | ||
| 12 | +$uni-error: #dd524d; | ||
| 13 | +// 描述色 | ||
| 14 | +$uni-info: #909399; | ||
| 15 | +// 中性色 | ||
| 16 | +$uni-main-color: #303133; | ||
| 17 | +$uni-base-color: #606266; | ||
| 18 | +$uni-secondary-color: #909399; | ||
| 19 | +$uni-extra-color: #C0C4CC; | ||
| 20 | +// 背景色 | ||
| 21 | +$uni-bg-color: #f5f5f5; | ||
| 22 | +// 边框颜色 | ||
| 23 | +$uni-border-1: #DCDFE6; | ||
| 24 | +$uni-border-2: #E4E7ED; | ||
| 25 | +$uni-border-3: #EBEEF5; | ||
| 26 | +$uni-border-4: #F2F6FC; | ||
| 27 | + | ||
| 28 | +// 常规色 | ||
| 29 | +$uni-black: #000000; | ||
| 30 | +$uni-white: #ffffff; | ||
| 31 | +$uni-transparent: rgba($color: #000000, $alpha: 0); |
uni_modules/uni-scss/variables.scss
0 → 100644
| 1 | +@import './styles/setting/_variables.scss'; | ||
| 2 | +// 间距基础倍数 | ||
| 3 | +$uni-space-root: 2; | ||
| 4 | +// 边框半径默认值 | ||
| 5 | +$uni-radius-root:5px; | ||
| 6 | + | ||
| 7 | +// 主色 | ||
| 8 | +$uni-primary: #2979ff; | ||
| 9 | +$uni-primary-disable:mix(#fff,$uni-primary,50%); | ||
| 10 | +$uni-primary-light: mix(#fff,$uni-primary,80%); | ||
| 11 | + | ||
| 12 | +// 辅助色 | ||
| 13 | +// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 | ||
| 14 | +$uni-success: #18bc37; | ||
| 15 | +$uni-success-disable:mix(#fff,$uni-success,50%); | ||
| 16 | +$uni-success-light: mix(#fff,$uni-success,80%); | ||
| 17 | + | ||
| 18 | +$uni-warning: #f3a73f; | ||
| 19 | +$uni-warning-disable:mix(#fff,$uni-warning,50%); | ||
| 20 | +$uni-warning-light: mix(#fff,$uni-warning,80%); | ||
| 21 | + | ||
| 22 | +$uni-error: #e43d33; | ||
| 23 | +$uni-error-disable:mix(#fff,$uni-error,50%); | ||
| 24 | +$uni-error-light: mix(#fff,$uni-error,80%); | ||
| 25 | + | ||
| 26 | +$uni-info: #8f939c; | ||
| 27 | +$uni-info-disable:mix(#fff,$uni-info,50%); | ||
| 28 | +$uni-info-light: mix(#fff,$uni-info,80%); | ||
| 29 | + | ||
| 30 | +// 中性色 | ||
| 31 | +// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 | ||
| 32 | +$uni-main-color: #3a3a3a; // 主要文字 | ||
| 33 | +$uni-base-color: #6a6a6a; // 常规文字 | ||
| 34 | +$uni-secondary-color: #909399; // 次要文字 | ||
| 35 | +$uni-extra-color: #c7c7c7; // 辅助说明 | ||
| 36 | + | ||
| 37 | +// 边框颜色 | ||
| 38 | +$uni-border-1: #F0F0F0; | ||
| 39 | +$uni-border-2: #EDEDED; | ||
| 40 | +$uni-border-3: #DCDCDC; | ||
| 41 | +$uni-border-4: #B9B9B9; | ||
| 42 | + | ||
| 43 | +// 常规色 | ||
| 44 | +$uni-black: #000000; | ||
| 45 | +$uni-white: #ffffff; | ||
| 46 | +$uni-transparent: rgba($color: #000000, $alpha: 0); | ||
| 47 | + | ||
| 48 | +// 背景色 | ||
| 49 | +$uni-bg-color: #f7f7f7; | ||
| 50 | + | ||
| 51 | +/* 水平间距 */ | ||
| 52 | +$uni-spacing-sm: 8px; | ||
| 53 | +$uni-spacing-base: 15px; | ||
| 54 | +$uni-spacing-lg: 30px; | ||
| 55 | + | ||
| 56 | +// 阴影 | ||
| 57 | +$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); | ||
| 58 | +$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); | ||
| 59 | +$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); | ||
| 60 | + | ||
| 61 | +// 蒙版 | ||
| 62 | +$uni-mask: rgba($color: #000000, $alpha: 0.4); |
uni_modules/uview-plus/LICENSE
0 → 100644
| 1 | +MIT License | ||
| 2 | + | ||
| 3 | +Copyright (c) 2020 www.uviewui.com | ||
| 4 | + | ||
| 5 | +Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| 6 | +of this software and associated documentation files (the "Software"), to deal | ||
| 7 | +in the Software without restriction, including without limitation the rights | ||
| 8 | +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| 9 | +copies of the Software, and to permit persons to whom the Software is | ||
| 10 | +furnished to do so, subject to the following conditions: | ||
| 11 | + | ||
| 12 | +The above copyright notice and this permission notice shall be included in all | ||
| 13 | +copies or substantial portions of the Software. | ||
| 14 | + | ||
| 15 | +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| 16 | +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| 17 | +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| 18 | +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| 19 | +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| 20 | +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| 21 | +SOFTWARE. |
uni_modules/uview-plus/README.md
0 → 100644
| 1 | +<p align="center"> | ||
| 2 | + <img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;"> | ||
| 3 | +</p> | ||
| 4 | +<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uview-plus 3.0</h3> | ||
| 5 | +<h3 align="center">多平台快速开发的UI框架</h3> | ||
| 6 | + | ||
| 7 | +[](https://github.com/ijry/uview-plus) | ||
| 8 | +[](https://github.com/ijry/uview-plus) | ||
| 9 | +[](https://github.com/ijry/uview-plus/issues) | ||
| 10 | +[](https://gitee.com/jry/uview-plus/releases) | ||
| 11 | +[](https://en.wikipedia.org/wiki/MIT_License) | ||
| 12 | + | ||
| 13 | +## 说明 | ||
| 14 | + | ||
| 15 | +uview-plus,是uni-app全面兼容vue3/nvue的uni-app生态框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水。uview-plus是基于uView2.x移植的支持vue3的版本,感谢uView。 | ||
| 16 | + | ||
| 17 | +## [官方文档:https://uview-plus.jiangruyi.com](https://uview-plus.jiangruyi.com) | ||
| 18 | + | ||
| 19 | + | ||
| 20 | +## 预览 | ||
| 21 | + | ||
| 22 | +您可以通过**微信**扫码,查看最佳的演示效果。 | ||
| 23 | +<br> | ||
| 24 | +<br> | ||
| 25 | +<img src="https://uview-plus.jiangruyi.com/common/h5_qrcode.png" width="220" height="220" > | ||
| 26 | + | ||
| 27 | +## 链接 | ||
| 28 | + | ||
| 29 | +- [官方文档](https://uview-plus.jiangruyi.com) | ||
| 30 | +- [更新日志](https://uview-plus.jiangruyi.com/components/changelog.html) | ||
| 31 | +- [升级指南](https://uview-plus.jiangruyi.com/components/changeGuide.html) | ||
| 32 | +- [关于我们](https://uview-plus.jiangruyi.com/cooperation/about.html) | ||
| 33 | + | ||
| 34 | +## 交流反馈 | ||
| 35 | + | ||
| 36 | +欢迎加入我们的QQ群交流反馈:[点此跳转](https://uview-plus.jiangruyi.com/components/addQQGroup.html) | ||
| 37 | + | ||
| 38 | +## 关于PR | ||
| 39 | + | ||
| 40 | +> 我们非常乐意接受各位的优质PR,但在此之前我希望您了解uview-plus是一个需要兼容多个平台的(小程序、h5、ios app、android app)包括nvue页面、vue页面。 | ||
| 41 | +> 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢! | ||
| 42 | + | ||
| 43 | +## 安装 | ||
| 44 | + | ||
| 45 | +#### **uni-app插件市场链接** —— [https://ext.dcloud.net.cn/plugin?name=uview-plus](https://ext.dcloud.net.cn/plugin?name=uview-plus) | ||
| 46 | + | ||
| 47 | +请通过[官网安装文档](https://uview-plus.jiangruyi.com/components/install.html)了解更详细的内容 | ||
| 48 | + | ||
| 49 | +## 快速上手 | ||
| 50 | + | ||
| 51 | +请通过[快速上手](https://uview-plus.jiangruyi.com/components/quickstart.html)了解更详细的内容 | ||
| 52 | + | ||
| 53 | +## 使用方法 | ||
| 54 | +配置easycom规则后,自动按需引入,无需`import`组件,直接引用即可。 | ||
| 55 | + | ||
| 56 | +```html | ||
| 57 | +<template> | ||
| 58 | + <u-button text="按钮"></u-button> | ||
| 59 | +</template> | ||
| 60 | +``` | ||
| 61 | + | ||
| 62 | +## 版权信息 | ||
| 63 | +uview-plus遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议,意味着您无需支付任何费用,也无需授权,即可将uview-plus应用到您的产品中。 | ||
| 64 | + |
-
请 注册 或 登录 后发表评论