作者 xiaoqiu

首次提交

正在显示 73 个修改的文件 包含 4481 行增加0 行删除

要显示太多修改。

为保证性能只显示 73 of 73+ 个文件。

不能预览此文件类型
  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 +}
  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>
  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}})
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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
  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 +}
  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 +}
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  1 +<template>
  2 + <view class="privacy">
  3 + 隐私政策
  4 + </view>
  5 +</template>
  6 +
  7 +<script setup>
  8 +</script>
  9 +
  10 +<style lang="scss" scoped>
  11 +
  12 +</style>
  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>
  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>
不能预览此文件类型
不能预览此文件类型
不能预览此文件类型
  1 +import { createPinia } from 'pinia'
  2 +
  3 +const store = createPinia()
  4 +
  5 +export default store
  1 +import { defineStore } from 'pinia'
  2 +
  3 +const useTabbarStore = defineStore('tabbar', {
  4 + unistorage: true, // 是否持久化到内存
  5 + state: () => {
  6 + return {
  7 + employeeCurrent: 0,
  8 + societyCurrent: 0
  9 + }
  10 + }
  11 +})
  12 +export default useTabbarStore
  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
  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 +});
  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';
  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>
  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 +}
  1 +## DataSelect 下拉框选择器
  2 +> **组件名:uni-data-select**
  3 +> 代码块: `uDataSelect`
  4 +
  5 +当选项过多时,使用下拉菜单展示并选择内容
  6 +
  7 +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
  8 +#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
  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 +{
  2 + "uni-load-more.contentdown": "Pull up to show more",
  3 + "uni-load-more.contentrefresh": "loading...",
  4 + "uni-load-more.contentnomore": "No more data"
  5 +}
  1 +import en from './en.json'
  2 +import zhHans from './zh-Hans.json'
  3 +import zhHant from './zh-Hant.json'
  4 +export default {
  5 + en,
  6 + 'zh-Hans': zhHans,
  7 + 'zh-Hant': zhHant
  8 +}
  1 +{
  2 + "uni-load-more.contentdown": "上拉显示更多",
  3 + "uni-load-more.contentrefresh": "正在加载...",
  4 + "uni-load-more.contentnomore": "没有更多数据了"
  5 +}
  1 +{
  2 + "uni-load-more.contentdown": "上拉顯示更多",
  3 + "uni-load-more.contentrefresh": "正在加載...",
  4 + "uni-load-more.contentnomore": "沒有更多數據了"
  5 +}
  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>
  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 +}
  1 +
  2 +
  3 +### LoadMore 加载更多
  4 +> **组件名:uni-load-more**
  5 +> 代码块: `uLoadMore`
  6 +
  7 +
  8 +用于列表中,做滚动加载使用,展示 loading 的各种状态。
  9 +
  10 +
  11 +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
  12 +#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
  13 +
  14 +
  1 +## 1.0.3(2022-01-21)
  2 +- 优化 组件示例
  3 +## 1.0.2(2021-11-22)
  4 +- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
  5 +## 1.0.1(2021-11-22)
  6 +- 修复 vue3中scss语法兼容问题
  7 +## 1.0.0(2021-11-18)
  8 +- init
  1 +@import './styles/index.scss';
  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 +}
  1 +`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
  2 +
  3 +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
  4 +#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
  1 +@import './setting/_variables.scss';
  2 +@import './setting/_border.scss';
  3 +@import './setting/_color.scss';
  4 +@import './setting/_space.scss';
  5 +@import './setting/_radius.scss';
  6 +@import './setting/_text.scss';
  7 +@import './setting/_styles.scss';
  1 +.uni-border {
  2 + border: 1px $uni-border-1 solid;
  3 +}
  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 +};
  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);
  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);
  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.
  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 +[![stars](https://img.shields.io/github/stars/ijry/uview-plus?style=flat-square&logo=GitHub)](https://github.com/ijry/uview-plus)
  8 +[![forks](https://img.shields.io/github/forks/ijry/uview-plus?style=flat-square&logo=GitHub)](https://github.com/ijry/uview-plus)
  9 +[![issues](https://img.shields.io/github/issues/ijry/uview-plus?style=flat-square&logo=GitHub)](https://github.com/ijry/uview-plus/issues)
  10 +[![release](https://img.shields.io/github/v/release/ijry/uview-plus?style=flat-square)](https://gitee.com/jry/uview-plus/releases)
  11 +[![license](https://img.shields.io/github/license/ijry/uview-plus?style=flat-square)](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 +