提交 67445e8c authored 作者: 刘旭's avatar 刘旭

uni-h5

上级
node_modules
dist
\ No newline at end of file
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"app-plus" :
{
"launchtype" : "local"
},
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
{
"name": "uni-preset-vue",
"version": "0.0.0",
"scripts": {
"dev:app": "uni -p app",
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
"dev:mp-kuaishou": "uni -p mp-kuaishou",
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
"build:app": "uni build -p app",
"build:custom": "uni build -p",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-alipay": "uni build -p mp-alipay",
"build:mp-baidu": "uni build -p mp-baidu",
"build:mp-kuaishou": "uni build -p mp-kuaishou",
"build:mp-lark": "uni build -p mp-lark",
"build:mp-qq": "uni build -p mp-qq",
"build:mp-toutiao": "uni build -p mp-toutiao",
"build:mp-weixin": "uni build -p mp-weixin",
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-app-plus": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-components": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-h5": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3050320220729001",
"@rollup/plugin-alias": "^3.1.9",
"node-sass": "^7.0.1",
"sass": "^1.54.5",
"sass-loader": "^13.0.2",
"vue": "^3.2.37",
"vue-i18n": "^9.1.9"
},
"devDependencies": {
"@dcloudio/types": "^3.0.13",
"@dcloudio/uni-automator": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3050320220729001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3050320220729001",
"typescript": "^4.7.4",
"vite": "^2.9.14"
}
}
<script setup lang="ts">
// import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
// onLaunch(() => {
// console.log('App Launch');
// });
// onShow(() => {
// console.log('App Show');
// });
// onHide(() => {
// console.log('App Hide');
// });
</script>
<style lang="scss">
@import url(common/scss/iconfont.scss);
</style>
@font-face {
font-family: 'iconfont'; /* Project id 3604159 */
src: url('//at.alicdn.com/t/c/font_3604159_rbxjoznvkmj.woff2?t=1662358646339') format('woff2'),
url('//at.alicdn.com/t/c/font_3604159_rbxjoznvkmj.woff?t=1662358646339') format('woff'),
url('//at.alicdn.com/t/c/font_3604159_rbxjoznvkmj.ttf?t=1662358646339') format('truetype');
}
.iconfont {
font-family: 'iconfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jia:before {
content: '\e601';
}
.icon-icons03:before {
content: '\e69c';
}
.icon-shanchu:before {
content: '\ec7b';
}
.icon-xiangyou1:before {
content: '\e775';
}
.icon-shezhi:before {
content: '\e64b';
}
.icon-sousuo:before {
content: '\e600';
}
.icon-yanzhengmamima:before {
content: '\e6ba';
}
.icon-mima:before {
content: '\e620';
}
.icon-yanzhengyanzhengma:before {
content: '\e624';
}
.icon-jiahao2fill:before {
content: '\e728';
}
.icon-gouwuchetianjia:before {
content: '\e640';
}
.icon-taocan-suoxiao:before {
content: '\e8cd';
}
.icon-wode:before {
content: '\e70b';
}
.icon-dubanshixiang:before {
content: '\e618';
}
.icon-a-ziyuan16:before {
content: '\e66b';
}
<template>
<view style="margin-bottom: 20rpx;">
<view class="login-input">
<view :class="'iconfont ' + inputData.iconfont + ' login-icon'"></view>
<input
:type="inputData?.type"
:placeholder="inputData.placeholder"
:password="inputData?.password"
class="input-text"
v-model="inputData.inputValue"
@blur="handleValue"
/>
<text class="getcode" v-if="inputData.checkType === 'code'">获取验证码</text>
</view>
<text class="check" v-if="inputData.check">{{ inputData.checkContent }}</text>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let props = defineProps({
inputData: Object
});
let emits = defineEmits(['hangleInput']);
let handleValue = (Value: any) => {
emits('hangleInput', Value.detail.value, props.inputData?.checkType);
};
</script>
<style lang="scss" scoped>
.login-input {
display: flex;
flex-direction: inherit;
border: 1px solid #ccc;
border-radius: 50rpx;
width: 560rpx;
height: 70rpx;
.login-icon {
line-height: 70rpx;
margin: 0 15rpx;
font-size: 42rpx;
color: #c7c7c7;
}
.input-text {
height: 100%;
line-height: 70rpx;
flex: 1 1 auto;
}
.getcode {
height: 100%;
width: 144rpx;
font-size: 24rpx;
color: #c7c7c7;
line-height: 70rpx;
}
}
.check {
font-size: 24rpx;
color: red;
margin: 0 0 10rpx 21rpx;
}
</style>
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
import App from './App.vue'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
{
"name" : "msjf",
"appid" : "__UNI__3025CA1",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx927a7603ad45bdda",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3",
"h5" : {
"router" : {
"base" : "./",
"mode" : "hash"
},
"template" : "msjf.h5.html",
"title" : "茅山玖坊"
}
}
{
"topWindow": {
"path": "pages/header/index.vue",
"style": {
"height": "60px"
}
},
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"topWindow": false
}
},
{
"path": "pages/login/pwd",
"style": {
"navigationBarTitleText": "设置密码",
"enablePullDownRefresh": false,
"topWindow": false
}
},
{
"path": "pages/customized/order",
"style": {
"navigationBarTitleText": "订单",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/customized/queryRecord",
"style": {
"navigationBarTitleText": "查询记录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/customized/my",
"style": {
"navigationBarTitleText": "定制",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/customized/importExcel",
"style": {
"navigationBarTitleText": "导出Excel",
"enablePullDownRefresh": false,
"topWindow": false
}
},
{
"path": "pages/customized/queryPwd",
"style": {
"enablePullDownRefresh": false,
"navigationStyle": "custom",
"topWindow": false
}
},
{
"path": "pages/customized/setting",
"style": {
"navigationBarTitleText": "设置",
"enablePullDownRefresh": false,
"topWindow": false
}
},
{
"path": "pages/customized/uploadImageVideo",
"style": {
"navigationBarTitleText": "上传定制",
"enablePullDownRefresh": false,
"topWindow": false
}
},
{
"path": "pages/customized/uploadPreview",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"topWindow": false
}
},
{
"path": "pages/customized/preview",
"style": {
"navigationBarTitleText": "预览",
"enablePullDownRefresh": false,
"topWindow": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
// "tabBar": {
// // "position": "top",
// "color": "#bfbfbf",
// "selectedColor": "1296db",
// "backgroundColor": "#fff",
// "borderStyle": "white",
// "list": [{
// "pagePath": "pages/customized/order",
// "text": "订单",
// "iconPath": "static/dingdan-copy.png",
// "selectedIconPath": "static/dingdan.png"
// },
// {
// "pagePath": "pages/customized/queryRecord",
// "text": "查询记录",
// "iconPath": "static/sousuo-copy.png",
// "selectedIconPath": "static/sousuo.png"
// },
// {
// "pagePath": "pages/customized/my",
// "text": "定制",
// "iconPath": "static/wodeyushe-copy.png",
// "selectedIconPath": "static/wodeyushe.png"
// }
// ]
// },
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "", //模式名称
"path": "pages/customized/my", //启动页面,必选
"query": "" //启动参数,在页面的onLoad函数里面得到
}]
}
}
<template>
<view class="ecl-container">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="bars">
<text>导出类型</text>
<view class="right">
<view class="uni-input">{{ array[index] }}</view>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
</picker>
<uni-datetime-picker v-model="range" type="daterange" @change="changeDateTime" v-if="index == 0">
<view class="bars" @click="changPwd">
<text>选择时间</text>
<view class="right">
<view class="uni-input">{{ dateStr }}</view>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
</uni-datetime-picker>
<view class="bars" @click="selectOrder" v-if="index == 0">
<text>选择订单</text>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
<uni-popup ref="popup" type="bottom">
<scroll-view scroll-y class="popup-content">
<uni-search-bar :focus="true" v-model="searchValue" @cancel="clickCancel" placeholder="订单号" cancelButton="always" cancelText="搜索" />
<view class="content" v-for="(item, i) in list" :key="i">
<!-- <checkbox-group>
<label>
<checkbox value="cb" :checked="checkOrder" />
订单号:961973496748
</label>
</checkbox-group> -->
<checkbox-group @change="checkSelectItem($event, item)">
<label>
<checkbox :value="item.value" :checked="item.checked" />
{{ item.order }}
</label>
</checkbox-group>
<view class="divider" />
<view class="order-item" v-for="(list, i) in 5" :key="i">
<image src="/static/msjf-picture/msjf-17.jpg" mode="widthFix" style="width: 80rpx; margin-right: 20rpx"></image>
<view class="order-title">巷子浅大师版</view>
</view>
</view>
</scroll-view>
<view class="popup-footer">
<checkbox-group>
<label>
<checkbox value="cb" :checked="checkTrue" />
全选
</label>
</checkbox-group>
<view @click="clickConfirm">确定</view>
</view>
</uni-popup>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let popup = ref();
let index = ref<any>(0);
let array = ref(['自定义导入', '导出全部']);
let startDate = ref();
let endDate = ref();
let range = ref();
let dateStr = ref();
let searchValue = ref();
// 全部选中
let checkTrue = ref();
let list = ref([
{
order: '订单号:961973496748',
value: '1',
checked: false
},
{
order: '订单号:145463121654',
value: '2',
checked: true
}
]);
let checkSelectItem = (e: any) => {
console.log(e.detail.value);
};
// 导出类型
let bindPickerChange = (e: any) => {
index.value = e.detail.value;
};
// 选择时间
let changeDateTime = (e: any) => {
let date1 = e[0];
let date2 = e[1];
dateStr.value = date1 + '至' + date2;
};
// 选择订单
let selectOrder = () => {
popup.value.open('bottom');
};
// 搜索订单
let clickCancel = (e: any) => {
console.log(e.value);
};
// 确定按钮
let clickConfirm = () => {
popup.value.close();
};
</script>
<style lang="scss" scoped>
.ecl-container {
min-height: 100vh;
background-color: #eceff6;
margin-top: 20rpx;
.bars {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100rpx;
font-size: 28rpx;
background-color: #fff;
padding: 20rpx;
margin-bottom: 6rpx;
.right {
display: flex;
justify-content: space-between;
align-items: center;
.uni-input {
font-size: 24rpx;
color: #ccc;
margin-right: 10rpx;
}
}
}
}
.popup-content {
box-sizing: border-box;
background-color: #eceff6;
padding: 20rpx;
height: 80vh;
.content {
box-sizing: border-box;
width: 100%;
background-color: #fff;
padding: 40rpx;
border-radius: 10rpx;
margin-bottom: 20rpx;
.divider {
background: #ebedf0;
width: 100%;
height: 1rpx;
margin: 20rpx 0;
}
.order-item {
display: flex;
flex-direction: row;
margin-bottom: 10rpx;
}
}
}
.popup-footer {
position: fixed;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
background-color: #fff;
width: 100%;
height: 120rpx;
padding: 20rpx 40rpx 0 40rpx;
}
</style>
<template>
<view class="status_bar"><!-- 这里是状态栏 --></view>
<headerVue :color2="color"></headerVue>
<view class="my-container">
<view class="herder">
<text></text>
<view class="iconfont icon-shezhi icon" @click="openSetting"></view>
</view>
<view class="detail">
<view>中国茅台镇</view>
<view>高端定制酱酒首选品牌</view>
<view>Maotai Town,China The preferred brand</view>
<view class="english">of high-end customized sauce wine</view>
</view>
<view class="content">
<view class="top">
<image src="../../static/msjf-picture/msjf-09.png" mode="widthFix" class="top-image"></image>
<image src="../../static/msjf-picture/msjf-10.png" mode="widthFix" class="bottom-image" @click="currencyTemplate"></image>
</view>
<view class="top">
<image src="../../static/msjf-picture/msjf-11.png" mode="widthFix" class="top-image"></image>
<image src="../../static/msjf-picture/msjf-12.png" mode="widthFix" class="bottom-image" @click="blankTemplate" />
</view>
</view>
<upload-preview style="margin-top: 60rpx;" @initHavePage="initHavePage"></upload-preview>
<view class="qr-code">
<text style="margin-right: 60rpx;">科 技 赋 能</text>
<image src="../../static/msjf-picture/msjf-13.png" mode="widthFix" style="width: 144rpx;"></image>
<text style="margin-left: 60rpx;">高 端 酱 酒</text>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getHavePage } from '@/services/api';
import headerVue from '@/pages/header/index.vue';
import uploadPreview from './uploadPreview.vue';
let color = ref('#a27443');
let imageData = ref([] as any);
let videoData = ref();
// 通用模板初始数据
let currencyPage = ref();
let popup = ref();
let openSetting = () => {
uni.navigateTo({
url: './setting'
});
};
// 上传图片
let uploadImage = () => {
uni.chooseImage({
success(res: any) {
imageData.value = res.tempFiles;
console.log(res);
uni.navigateTo({
url: `./uploadImage?imageData=${encodeURIComponent(JSON.stringify(res.tempFiles))}&imageArr=${encodeURIComponent(JSON.stringify(res.tempFilePaths))}`
});
}
});
};
// 上传视频
let uploadVideo = () => {
uni.chooseVideo({
sourceType: ['camera', 'album'],
success(res: any) {
console.log(res);
videoData.value = res;
uni.navigateTo({
url: `./uploadVideo?videoData=${encodeURIComponent(JSON.stringify(res))}`
});
}
});
};
let currencyTemplate = () => {
uni.navigateTo({
url: `./uploadImageVideo?type=${JSON.stringify('currency')}&currencyPage=${JSON.stringify(currencyPage.value)}`
});
};
let blankTemplate = () => {
uni.navigateTo({
url: `./uploadImageVideo?type=${JSON.stringify('blank')}`
});
};
let initHavePage = async () => {
let res: any = await getHavePage();
if (res.statusCode == 200) {
console.log(res, '模板数据');
currencyPage.value = res.data.currencyPage;
uni.$emit('previewData', { previewData: res.data.customPage });
}
};
initHavePage();
</script>
<style lang="scss" scoped>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.my-container {
padding: 20rpx 30rpx 10rpx 30rpx;
.herder {
display: flex;
justify-content: space-between;
font-size: 18px;
margin-bottom: 20rpx;
.icon-shezhi:before {
font-size: 18px;
}
}
.top {
position: relative;
.top-image {
width: 100%;
}
.bottom-image {
position: absolute;
left: 62%;
bottom: 13%;
width: 200rpx;
}
&:nth-child(1) {
margin-bottom: 20rpx;
}
}
.detail {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 60rpx;
view {
color: rgb(211, 168, 130);
font-size: 32rpx;
font-weight: 600;
&:nth-child(3) {
font-size: 15rpx;
width: 460rpx;
margin-top: 20rpx;
font-weight: normal;
}
}
.english {
font-size: 15rpx;
width: 426rpx;
font-weight: normal;
}
}
.qr-code {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
width: 100%;
height: 140rpx;
margin: 100rpx 0 50rpx 0;
}
}
.popup-content {
width: 100%;
height: 100vh;
.popup-upload {
height: 100rpx;
font-size: 36rpx;
line-height: 100rpx;
text-align: center;
border-bottom: 1px solid #ccc;
}
}
</style>
<template>
<view class="order-container">
<view class="status_bar"><!-- 这里是状态栏 --></view>
<headerVue :color="color" />
<view v-for="(item1, i) in titleImg" :key="i" class="content">
<image :src="item1.imgUrl" mode="" class="order-image"></image>
<view v-for="(item, i) in orderData" :key="item.id" class="order-content">
<view class="order-left">
<!-- <checkbox-group @change="selected" style="margin: 0 10rpx;">
<label><checkbox class="selected" color="#555555" :checked="checked" /></label>
</checkbox-group> -->
<image :src="item.picUrl" mode="widthFix" class="order-left-image"></image>
</view>
<view class="order-right">
<text class="details-top">{{ item.goodsName }}</text>
<text class="details-center">{{ item.specifications[0] }}</text>
<view class="details-bottom">
<text style="color: #d50000; font-size: 34rpx">{{ item.price }}</text>
<text style="font-size: 24rpx; color: #ccc; margin-left: 20rpx">{{ item.number + '件' }}</text>
<!-- <text style="font-size: 24rpx; color: #ccc; margin-left: 20rpx">瓶 10件起订</text> -->
<!-- <view class="details-sum">
<text class="subtract" @click="reduce">-</text>
<text class="num">{{ num }}</text>
<text class="add" @click="add">+</text>
</view> -->
</view>
</view>
</view>
</view>
<text style="font-size: 24rpx; padding: 0 30rpx; color:#ccc">订购 时间:2022.8.24</text>
<view class="qr-code">
<text style="margin-right: 60rpx;">科 技 赋 能</text>
<image src="../../static/msjf-picture/msjf-13.png" mode="widthFix" style="width: 144rpx;"></image>
<text style="margin-left: 60rpx;">高 端 酱 酒</text>
</view>
<view style="width: 100%; height: 200rpx;"></view>
<view class="footer">
<image src="../../static/msjf-picture/msjf-05.jpg" mode="" class="bg-imag"></image>
<image src="../../static/msjf-picture/msjf-10.png" mode="widthFix" class="btn-image"></image>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getOrderList } from '@/services/api';
import headerVue from '@/pages/header/index.vue';
let color = ref('#a27443');
let checked = ref(true);
let money = ref('391.00');
let num = ref<any>(0);
// 订单数据
let orderData = ref();
// 图片标题
let titleImg = ref([
{
imgUrl: '/static/msjf-picture/msjf-14.png'
},
{
imgUrl: '/static/msjf-picture/msjf-18.png'
},
{
imgUrl: '/static/msjf-picture/msjf-19.png'
}
]);
// let add = () => {
// num.value++;
// };
// let reduce = () => {
// if (num.value < 1) return;
// else num.value--;
// };
// 获取订单数据
let initOrderList = async () => {
let res: any = await getOrderList();
if (res.data.errno === 0) orderData.value = res.data.data.list[0].goodsList;
console.log(orderData.value);
};
onLoad(() => {
initOrderList();
});
</script>
<style lang="scss" scoped>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.order-container {
.content {
padding: 30rpx;
.order-image {
width: 100%;
height: 60rpx;
margin-bottom: 6rpx;
}
.order-content {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
width: 100%;
min-height: 180rpx;
max-height: 200rpx;
padding: 10rpx 20rpx;
border: 1px solid #dfdfdf;
border-radius: 10rpx;
margin-bottom: 10rpx;
.order-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 160rpx;
height: 100%;
.order-left-image {
width: 120rpx;
height: 78px;
border-radius: 10rpx;
margin-right: 30rpx;
background-color: #ccc;
}
}
.order-right {
.details-top {
display: block;
font-size: 28rpx;
font-weight: 600;
margin-bottom: 6rpx;
}
.details-center {
display: block;
font-size: 24rpx;
}
.details-bottom {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
// .details-sum {
// margin-left: 10rpx;
// display: inline-block;
// border: 1px solid #d0d0d0;
// text {
// width: 40rpx;
// line-height: 50rpx;
// text-align: center;
// display: inline-block;
// background-color: #fff;
// }
// .add {
// color: #fa4305;
// border-left: 1px solid #d0d0d0;
// }
// .subtract {
// border-right: 1px solid #d0d0d0;
// }
// }
}
}
}
}
.qr-code {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
width: 100%;
height: 140rpx;
margin: 100rpx 0 50rpx 0;
}
.footer {
.bg-imag {
position: fixed;
bottom: 0;
width: 100%;
height: 120rpx;
}
.btn-image {
position: fixed;
bottom: 2%;
left: 38%;
width: 200rpx;
}
}
}
</style>
<template>
<view class="pre-container">
<view class="pre-image" v-for="(item, i) in pageData" :key="i">
<image v-if="item.type == 'image/jpeg'" :src="baseURL + item.pageComponent" mode="widthFix" style="width: 100%;"></image>
</view>
<view class="pre-video" v-for="(item, i) in pageData" :key="i"><video v-if="item.type != 'image/jpeg'" :src="baseURL + item.pageComponent" /></view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseURL } from '@/services/request';
let pageData = ref();
onLoad((options: any) => {
pageData.value = JSON.parse(options.pageData);
console.log(pageData.value);
});
</script>
<style lang="scss" scoped>
.pre-container {
box-sizing: border-box;
padding: 30rpx;
width: 100%;
height: 100vh;
.pre-image {
display: flex;
}
.pre-video {
video {
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
}
}
</style>
<template>
<uni-nav-bar left-icon="left" @clickLeft="clickLeft">
<template #default>
<view class="default">
<view :class="navbar == '0' ? 'sn switch' : 'sn'" @click="navbarLeft">SN码</view>
<view :class="navbar != '0' ? 'jiesuo switch' : 'jiesuo'" @click="navbarRight">解锁密码</view>
</view>
</template>
</uni-nav-bar>
<view class="query-container">
<view class="bgc"><uni-search-bar :focus="true" cancelButton="always" v-model="searchValue" @cancel="cancel" @clear="clear"></uni-search-bar></view>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
let searchValue = ref();
let navbar = ref('0');
let cancel = () => {
let page = getCurrentPages();
console.log(page);
};
let navbarLeft = () => {
navbar.value = '0';
};
let navbarRight = () => {
navbar.value = '1';
};
let clear = () => {};
let clickLeft = () => {
uni.navigateBack();
};
</script>
<style lang="scss" scoped>
::v-deep .uni-navbar__header-container {
justify-content: center;
align-items: center;
}
.default {
display: flex;
justify-content: flex-start;
width: 260rpx;
height: 50rpx;
font-size: 24rpx;
border: 2rpx solid #cccccc;
border-radius: 20rpx;
color: #4875ea;
overflow: hidden;
.sn {
height: 100%;
width: 50%;
border-right: 2rpx solid #cccccc;
text-align: center;
line-height: 50rpx;
}
.jiesuo {
height: 100%;
width: 50%;
text-align: center;
line-height: 50rpx;
}
.switch {
background-color: #4875ea;
color: #fff;
}
}
.query-container {
min-height: 100vh;
background-color: #eceff6;
.bgc {
height: 120rpx;
background-color: #fff;
}
}
</style>
<template>
<view class="record-container">
<view class="status_bar"><!-- 这里是状态栏 --></view>
<headerVue :color1="color"></headerVue>
<view class="query-content">
<view class="query-record">
<view class="content"><uni-search-bar cancelButton="always" v-model="searchValue" placeholder="SN" /></view>
</view>
<view class="query-list">
<image src="/static/msjf-picture/msjf-17.jpg" mode="heightFix" />
<view class="record">
<text class="record-text">轻奢纯棉刺绣水洗四件套</text>
<view class="record-center">
<uni-tag text="已开瓶" type="primary" :circle="true" size="mini"></uni-tag>
<!-- <uni-tag text="未开瓶" :circle="true" size="mini"></uni-tag> -->
<text style="margin-left: 20rpx;">17300762589</text>
</view>
<view class="record-footer">
<text class="price">¥178.0</text>
<text style="color: #ccc;">订单编号</text>
</view>
</view>
</view>
</view>
<!-- <view class="footer">
<button class="btn-footer" @click="importExcel">
<image src="/static/msjf-picture/msjf-01.png" mode="scaleToFill"></image>
<text class="text-left">导出Excel</text>
</button>
<button class="btn-footer" @click="queryPwd">
<image src="/static/msjf-picture/msjf-02.png" mode="scaleToFill"></image>
<text class="text-right">查询解锁密码</text>
</button>
</view> -->
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import headerVue from '@/pages/header/index.vue';
let color = ref('#a27443');
let queryPwd = () => {
uni.navigateTo({
url: './queryPwd'
});
};
let importExcel = () => {
uni.navigateTo({
url: './importExcel'
});
};
</script>
<style lang="scss" scoped>
page {
background-color: #eceff6;
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.record-container {
.query-content {
box-sizing: border-box;
padding: 20rpx;
.query-record {
box-sizing: border-box;
background-color: #fff;
padding: 0 30rpx;
.content {
padding: 10rpx;
width: 100%;
}
}
.query-list {
margin: 10rpx 0;
padding: 10rpx 50rpx 10rpx 30rpx;
box-sizing: border-box;
border-radius: 10rpx;
width: 100%;
height: 200rpx;
background-color: #fff;
border: 1px solid #ccc;
display: flex;
justify-content: flex-start;
image {
height: 100%;
margin-right: 50rpx;
}
.record {
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 12px;
.record-text {
font-size: 16px;
font-weight: 500;
// margin-bottom: 20rpx;
}
.record-center {
display: flex;
justify-content: space-between;
.uni-tag--circle {
width: 100rpx;
text-align: center;
}
}
.record-footer {
display: flex;
justify-content: space-between;
.price {
color: red;
font-size: 18px;
}
}
}
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 120rpx;
display: flex;
flex-direction: row;
font-size: 14px;
.btn-footer {
position: relative;
width: 50%;
border: none;
padding: 0;
border-radius: 0;
.text-left {
position: absolute;
top: 12%;
left: 30%;
color: #fff;
}
.text-right {
position: absolute;
top: 12%;
right: 20%;
color: #fff;
}
}
}
}
</style>
<template>
<view class="setting-container">
<view class="bars" @click="changPwd">
<text>修改密码</text>
<view class="iconfont icon-xiangyou1"></view>
</view>
<view class="bars" @click="logOut">
<text>退出登录</text>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let logOut = () => {
uni.navigateTo({
url: '/pages/login/login',
success() {
uni.clearStorage();
}
});
};
let changPwd = () => {
uni.navigateTo({
url: '/pages/login/pwd'
});
};
</script>
<style lang="scss" scoped>
.setting-container {
min-height: 100vh;
background-color: #eceff6;
padding-top: 20rpx;
.bars {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100rpx;
font-size: 28rpx;
background-color: #fff;
padding: 20rpx;
margin-bottom: 6rpx;
}
}
</style>
<template>
<view class="upload-container">
<uni-section title="定制" type="line">
<view class="choose-img">
<view v-for="(item, index) in imageVideoData" :key="index" class="box-img">
<view v-if="item.type == 'image/jpeg'" style="width: 100%;"><image :src="item.path" mode="widthFix" class="img-list" /></view>
<view v-else style="width: 100%;"><video :src="item.path" class="img-list" /></view>
<view class="iconfont icon-icons03 replace" @click="replaceImg(index)" style="color: #007aff;"></view>
<view class="iconfont icon-shanchu delele" @click="deleteImg(index)" style="color: #F56C6C;"></view>
</view>
</view>
<view type="primary" @click="upload" style="margin-top: 40rpx;" class="addImage"><view class="iconfont icon-jia"></view></view>
<button type="primary" @click="save" style="margin-top: 40rpx;">保存</button>
</uni-section>
</view>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { saveCustomPage } from '@/services/api';
import { baseURL } from '@/services/request';
let imageVideoData = ref([] as any);
// 区分通用还是空白
let type = ref();
onLoad((options: any) => {
if (options) {
let type = JSON.parse(options.type);
if (type == 'currency') {
// 通用定制模板
let currencyPage = JSON.parse(options.currencyPage);
for (let s in currencyPage) {
imageVideoData.value.push({
path: baseURL + currencyPage[s].cover,
type: 'image/jpeg'
});
}
} else if (type == 'edit') {
// 编辑模板列表
let pageData = JSON.parse(options.pageData);
for (let s in pageData) {
imageVideoData.value.push({
path: baseURL + pageData[s].pageComponent,
type: pageData[s].type
});
}
}
}
});
let upload = () => {
uni.showActionSheet({
title: '请选择上传类型',
itemList: ['图片', '视频'],
success(res: any) {
if (res.tapIndex == 0) uploadImage();
else uploadVideo();
}
});
};
// 上传图片
let uploadImage = () => {
uni.chooseImage({
success(res: any) {
for (let i = 0; i < res.tempFilePaths.length; i++) {
imageVideoData.value.push({
path: res.tempFilePaths[i],
type: res.tempFiles[i].type
});
}
}
});
};
// 上传视频
let uploadVideo = () => {
uni.chooseVideo({
sourceType: ['camera', 'album'],
success(res: any) {
imageVideoData.value.push({
path: res.tempFilePath,
type: res.tempFile.type
});
}
});
};
let save = () => {
var idArr = [];
for (let key in imageVideoData.value) {
uni.uploadFile({
url: baseURL + '/wx/customPage/upload',
filePath: imageVideoData.value[key].path,
name: 'file',
success(res: any) {
if (res.data.errno != 502) {
idArr.push(res.data);
if (Number(key) == imageVideoData.value.length - 1) {
saveCustomPage({ fileIds: idArr }).then((res: any) => {
if (res.statusCode == 200) {
imageVideoData.value = [];
close();
}
console.log('信息', res);
});
}
}
},
fail(res: any) {
console.log(res);
}
});
}
};
// 替换图片
let replaceImg = (index: number) => {
if (imageVideoData.value[index]['type'] == 'image/jpeg') {
uni.showModal({
cancelText: '取消',
confirmText: '确认',
content: '确认替换图片?',
success: (res: any) => {
console.log(res);
if (res.confirm) {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera', 'album'], //从相册选择
success: function(res: any) {
imageVideoData.value[index]['path'] = res.tempFiles[0].path;
}
});
}
}
});
} else {
uni.showModal({
cancelText: '取消',
confirmText: '确认',
content: '确认替换视频?',
success: (res: any) => {
console.log(res);
if (res.confirm) {
uni.chooseVideo({
sourceType: ['camera', 'album'], //从相册选择
success: function(res: any) {
imageVideoData.value[index]['path'] = res.tempFiles[0].path;
}
});
}
}
});
}
};
// 删除图片
let deleteImg = (index: number) => {
uni.showModal({
cancelText: '取消',
confirmText: '确认',
content: '确认删除图片?',
success: (res: any) => {
if (res.confirm) imageVideoData.value.splice(index, 1);
}
});
};
// 返回刷新
let close = () => {
//调用上一个页面中的方法
uni.navigateBack({
delta: 1,
success: () => {
var pages: any = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prePage = pages[pages.length - 2]; //上一个页面
prePage.$vm.initHavePage();
}
});
};
</script>
<style lang="scss" scoped>
.upload-container {
box-sizing: border-box;
padding: 20rpx 60rpx 20rpx 20rpx;
width: 100%;
height: 100vh;
background-color: #fff;
.choose-img {
display: flex;
flex-direction: column;
.box-img {
display: flex;
position: relative;
width: 100%;
// height: 160rpx;
margin-right: 10rpx;
.img-list {
width: 100%;
// background-color: pink;
}
.replace {
position: absolute;
top: 64rpx;
right: -48rpx;
color: rgba(0, 0, 0, 0.5);
font-size: 44rpx;
}
.delele {
position: absolute;
top: 10rpx;
right: -48rpx;
color: rgba(0, 0, 0, 0.5);
font-size: 44rpx;
}
.mark {
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: #fff;
background: rgba(0, 0, 0, 0.3);
left: 0%;
right: 0%;
// margin-top: -500px;
font-size: 26rpx;
text-align: center;
box-shadow: 2px -3px 100px -5px #ffffff;
}
}
}
.addImage {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #e2e2e2;
.icon-jia {
color: #fff;
font-size: 90rpx;
}
}
}
</style>
<template>
<uni-section title="定制模板列表" type="line">
<view class="preview-container">
<view v-for="(item, index) in previewData" :key="item.id">
<view class="preview-list">
<view class="img"><image :src="baseURL + item.cover" mode="aspectFill" class="preview-img" /></view>
<view class="preview-content">
<text>创建时间: {{ item.createTime }}</text>
<view class="options">
<view size="mini" @tap="preview(item.id)" class="box">预览</view>
<view @tap="preEdit(item.id)" class="box">编辑</view>
<view size="mini" @tap="preDelete(item.id)" class="box">删除</view>
</view>
</view>
</view>
<view v-if="index != previewData.length - 1" class="divider"></view>
</view>
</view>
</uni-section>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onBackPress } from '@dcloudio/uni-app';
import { baseURL } from '@/services/request';
import { getPageComponent, deletePageComponent } from '@/services/api';
let videoList = ref();
let imageArr = ref();
let imageValue = ref([] as any);
let emits = defineEmits(['initHavePage']);
// 模板列表
let previewData = ref();
// 模板子列表数据
let pageData = ref();
// 删除模板列表
let preDelete = async (id: number) => {
uni.showModal({
cancelText: '取消',
confirmText: '确认',
content: '确认删除图片?',
success: async (res: any) => {
if (res.confirm) {
let data: any = await deletePageComponent({ id });
if (data.data.errno == 0) emits('initHavePage');
}
}
});
};
// 获取预览数据
let preview = async (id: number) => {
let res: any = await getPageComponent({ pageId: id });
if (res.statusCode == 200) {
pageData.value = res.data;
uni.navigateTo({
url: `./preview?pageData=${JSON.stringify(pageData.value)}`
});
}
};
// 编辑模板数据
let preEdit = async (id: number) => {
let res: any = await getPageComponent({ pageId: id });
if (res.statusCode == 200) {
pageData.value = res.data;
uni.navigateTo({
url: `./uploadImageVideo?pageData=${JSON.stringify(pageData.value)}&type=${JSON.stringify('edit')}`
});
}
};
// 替换图片
let replacevideo = (index: number) => {
uni.showModal({
cancelText: '取消',
confirmText: '确认',
content: '确认替换图片?',
success: (res: any) => {
if (res.confirm) {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function(res: any) {
videoList.value[index]['path'] = res.tempFiles[0].path;
}
});
}
}
});
};
let initHavePage = async () => {
uni.$on('previewData', (data: any) => {
previewData.value = data.previewData;
});
};
initHavePage();
onBackPress(() => {
uni.navigateBack();
});
</script>
<style lang="scss" scoped>
.preview-container {
padding: 10rpx;
border: 2px solid #dfdfdf;
.preview-list {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100px;
padding: 10rpx 0;
.img {
width: 130px;
height: 100%;
display: flex;
align-items: center;
margin-right: 20rpx;
.preview-img {
width: 100%;
height: 100%;
margin-right: 100rpx;
}
}
.preview-content {
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 20rpx 0;
text {
font-size: 12px;
color: #ccc;
margin-bottom: 20%;
}
.options {
display: flex;
flex-direction: row;
align-items: flex-start;
.box {
width: 100rpx;
height: 40rpx;
text-align: center;
line-height: 42rpx;
// padding: 14rpx;
border: 1px solid #ccc;
border-radius: 7px;
margin-right: 10rpx;
}
}
}
}
.divider {
border: 0.5px solid #dfdfdf;
}
}
</style>
<template>
<view class="header-container">
<navigator url="/pages/customized/order" :style="{ color: color }" class="order">订单</navigator>
<navigator url="/pages/customized/queryRecord" :style="{ color: color1 }" class="queryRecord">查询信息</navigator>
<navigator url="/pages/customized/my" :style="{ color: color2 }" class="my">定制</navigator>
<!-- <custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current" @onTabItemTap="toSecondMenu" /> -->
</view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
let props = defineProps({
color: { type: String, default: '' },
color1: { type: String, default: '' },
color2: { type: String, default: '' }
});
</script>
<style lang="scss" scoped>
.header-container {
box-sizing: border-box;
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
padding: 30rpx;
background-color: #fff;
border-bottom: 1px solid #e8e8e8;
.order {
margin-left: 20rpx;
}
.hover {
color: red !important;
}
.queryrecord {
}
.my {
margin-right: 20rpx;
}
}
</style>
<template>
<view class="content">
<image class="logo" src="/static/logo.png" />
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const title = ref('Hello')
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
<template>
<view class="login-container">
<image src="/static/msjf-picture/msjf-06.png" mode="scaleToFill" class="title-iamge"></image>
<text class="login-text">欢迎登陆</text>
<text class="login-text1">茅山玖坊高端定制酒</text>
<view class="login-form">
<input-login :inputData="inputData" @hangleInput="hangleInput" />
<input-login :inputData="inputData1" @hangleInput="hangleInput" />
</view>
<image src="/static/msjf-picture/msjf-07.png" mode="" class="next-step" @click="clickNextStep"></image>
<text class="footer-text">定制管理平台</text>
</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { login } from '@/services/api';
import inputLogin from '@/components/inputLogin.vue';
// let baseUrl = 'http://139.186.162.12/';
// let baseUrl = 'http://192.168.2.209:8080/';
let inputData = reactive({
inputValue: 15616168157,
iconfont: 'icon-a-ziyuan16',
placeholder: '手机号码',
type: 'text',
checkType: 'phone',
check: false,
checkContent: '请输入有效手机号'
});
let inputData1 = reactive({
inputValue: 'user123',
iconfont: 'icon-mima',
placeholder: '密码',
type: 'password',
checkType: 'passWord',
check: false,
checkContent: '请输入验证码'
});
let hangleInput = (Value: any, type: string) => {
if (type === 'phone') {
let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
if (!reg.test(Value) || !Value) inputData.check = true;
else inputData.check = false;
} else {
if (!Value) inputData1.check = true;
else inputData1.check = false;
}
};
let clickNextStep = () => {
if (!inputData.inputValue || !inputData.inputValue) {
inputData.check = true;
inputData1.check = true;
return;
} else if (!inputData.check || !inputData1.check) {
initLogin(inputData.inputValue, inputData1.inputValue);
} else {
console.log('检验不通过');
}
};
let initLogin = async (mobile: number, password: string) => {
let res: any = await login({ mobile, password });
if (res.data.errno == 0) {
uni.setStorage({
key: 'token',
data: res.data.data.token,
success() {
uni.navigateTo({
url: '../customized/order',
success() {
uni.setStorage({
key: 'mobile',
data: inputData.inputValue
});
}
});
}
});
} else {
uni.showToast({
title: '手机号或密码错误',
icon: 'none'
});
}
};
</script>
<style lang="scss" scoped>
.login-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.title-iamge {
width: 300rpx;
height: 240rpx;
}
.login-text {
margin-top: 10%;
font-weight: 700;
font-size: 40rpx;
color: #1d2b5f;
}
.login-text1 {
font-weight: 700;
font-size: 40rpx;
color: #1d2b5f;
margin-top: 10rpx 0 20% 0;
}
.login-form {
margin-top: 15%;
}
.next-step {
margin-top: 20rpx;
width: 245rpx;
height: 90rpx;
}
.footer-text {
margin-top: 40%;
display: block;
width: 100%;
color: #d79972;
font-size: 30rpx;
text-align: center;
align-self: flex-end;
}
}
</style>
<template>
<view class="login-container">
<image src="/static/msjf-picture/msjf-06.png" mode="scaleToFill" class="title-iamge"></image>
<text class="login-text">请设置用户密码</text>
<view class="login-form">
<input-login :inputData="inputData" @hangleInput="hangleInput" />
<input-login :inputData="inputData1" @hangleInput="hangleInput" />
</view>
<image src="/static/msjf-picture/msjf-08.png" mode="" class="next-step" @click="clickComplete"></image>
<text class="footer-text">定制管理平台</text>
</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { resetPwd } from '@/services/api';
import inputLogin from '../../components/inputLogin.vue';
let inputData = reactive({
inputValue: '',
iconfont: 'icon-mima',
placeholder: '请输入登录密码',
password: true,
type: 'text',
checkType: 'password',
check: false,
checkContent: '密码不为空,且不少于6位'
});
let inputData1 = reactive({
inputValue: '',
iconfont: 'icon-yanzhengyanzhengma',
placeholder: '再次输入登录密码',
password: true,
type: 'text',
checkType: 'nextPassword',
check: false,
checkContent: '两次密码不一致'
});
// input校验
let hangleInput = (Value: any, type: string) => {
if (type === 'password') {
if (Value.length < 5) inputData.check = true;
else inputData.check = false;
} else {
if (inputData.inputValue.length !== Value.length) {
inputData1.check = true;
} else if (inputData.inputValue !== Value) {
inputData1.check = true;
} else {
inputData1.check = false;
}
}
};
let clickComplete = async () => {
if (!inputData.inputValue) inputData.check = true;
else if (!inputData1.inputValue) {
inputData1.check = true;
inputData1.checkContent = '确认密码不为空';
} else if (inputData.check) inputData.check = true;
else if (inputData1.check) {
inputData1.check = true;
inputData1.checkContent = '两次密码不一致';
} else {
uni.getStorage({
key: 'mobile',
async success(e: any) {
let res: any = await resetPwd({ mobile: e.data, password: inputData1.inputValue });
if (res.data.errno == 0) {
uni.navigateTo({
url: '/pages/login/login',
success() {
uni.clearStorage();
}
});
}
}
});
}
};
</script>
<style lang="scss" scoped>
.login-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.title-iamge {
width: 300rpx;
height: 240rpx;
}
.login-text {
margin-top: 10%;
font-weight: 700;
font-size: 40rpx;
color: #1d2b5f;
}
.login-text1 {
font-weight: 700;
font-size: 40rpx;
color: #1d2b5f;
margin-top: 10rpx 0 20% 0;
}
.login-form {
margin-top: 15%;
}
.next-step {
margin-top: 20rpx;
width: 245rpx;
height: 90rpx;
}
.footer-text {
margin-top: 40%;
display: block;
width: 100%;
color: #d79972;
font-size: 30rpx;
text-align: center;
align-self: flex-end;
}
}
</style>
import { request } from './request';
//登录接口
export let login = (data: object | any) => request('/wx/auth/login_by_mobile', 'POST', data);
// 修改密码
export let resetPwd = (data: any) => request('/wx/auth/reset_by_mobile', 'POST', data);
// 获取订单信息
export let getOrderList = () => request('/wx/order/list', 'GET');
// 保存定制文件
export let saveCustomPage = (data: any) => request('/wx/customPage/save', 'POST', data);
// 获取用户拥有宣传页模板接口
export let getHavePage = () => request('/wx/customPage/getHavePage', 'GET');
// 查询模板
export let getPageComponent = (pageId: number) => request('/wx/customPage/getPageComponent', 'GET', pageId);
// 删除模板
export let deletePageComponent = (id: number) => request('/wx/customPage/delete', 'POST', id);
//服务器接口地址
// const baseURL: string = 'http://139.186.162.12';
//本地调试接口地址
const baseURL: string = 'http://192.168.2.209:8080';
// 封装公共申请办法
function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: object | any) {
return new Promise(function(resolve, reject) {
let header: any;
if (uni.getStorageSync('token') !== undefined && uni.getStorageSync('token') !== '') {
header = {
'content-type': 'application/json',
'X-Litemall-Token': uni.getStorageSync('token')
};
} else {
let pages = getCurrentPages();
let curRoute = pages[pages.length - 1].route;
if (curRoute != 'pages/login/login') {
uni.showToast({
icon: 'none',
title: '请重新登录',
success() {
uni.navigateTo({
url: '/pages/login/login'
});
}
});
}
}
uni.request({
url: baseURL + url,
method: method,
data: data,
header: header,
success(res: any) {
uni.hideLoading();
if (res.statusCode == 200) {
resolve(res);
} else {
//其余异样
uni.showToast({
title: res.data.errmsg,
icon: 'none'
});
reject(res);
}
},
fail(err) {
uni.hideLoading();
//申请失败
uni.showToast({
title: '连接服务器失败',
icon: 'none'
});
reject(err);
}
});
});
}
export { request, baseURL };
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;
/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;
/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;
\ No newline at end of file
## 2.2.6(2022-06-30)
- 优化 组件样式,调整了组件图标大小、高度、颜色等,与uni-ui风格保持一致
## 2.2.5(2022-06-24)
- 修复 日历顶部年月及底部确认未国际化 bug
## 2.2.4(2022-03-31)
- 修复 Vue3 下动态赋值,单选类型未响应的 bug
## 2.2.3(2022-03-28)
- 修复 Vue3 下动态赋值未响应的 bug
## 2.2.2(2021-12-10)
- 修复 clear-icon 属性在小程序平台不生效的 bug
## 2.2.1(2021-12-10)
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的 bug
## 2.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
## 2.1.5(2021-11-09)
- 新增 提供组件设计资源,组件样式调整
## 2.1.4(2021-09-10)
- 修复 hide-second 在移动端的 bug
- 修复 单选赋默认值时,赋值日期未高亮的 bug
- 修复 赋默认值时,移动端未正确显示时间的 bug
## 2.1.3(2021-09-09)
- 新增 hide-second 属性,支持只使用时分,隐藏秒
## 2.1.2(2021-09-03)
- 优化 取消选中时(范围选)直接开始下一次选择, 避免多点一次
- 优化 移动端支持清除按钮,同时支持通过 ref 调用组件的 clear 方法
- 优化 调整字号大小,美化日历界面
- 修复 因国际化导致的 placeholder 失效的 bug
## 2.1.1(2021-08-24)
- 新增 支持国际化
- 优化 范围选择器在 pc 端过宽的问题
## 2.1.0(2021-08-09)
- 新增 适配 vue3
## 2.0.19(2021-08-09)
- 新增 支持作为 uni-forms 子组件相关功能
- 修复 在 uni-forms 中使用时,选择时间报 NAN 错误的 bug
## 2.0.18(2021-08-05)
- 修复 type 属性动态赋值无效的 bug
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
- 修复 组件未赋值时范围选左、右日历相同的 bug
## 2.0.17(2021-08-04)
- 修复 范围选未正确显示当前值的 bug
- 修复 h5 平台(移动端)报错 'cale' of undefined 的 bug
## 2.0.16(2021-07-21)
- 新增 return-type 属性支持返回 date 日期对象
## 2.0.15(2021-07-14)
- 修复 单选日期类型,初始赋值后不在当前日历的 bug
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
- 优化 移动端移除显示框的清空按钮,无实际用途
## 2.0.14(2021-07-14)
- 修复 组件赋值为空,界面未更新的 bug
- 修复 start 和 end 不能动态赋值的 bug
- 修复 范围选类型,用户选择后再次选择右侧日历(结束日期)显示不正确的 bug
## 2.0.13(2021-07-08)
- 修复 范围选择不能动态赋值的 bug
## 2.0.12(2021-07-08)
- 修复 范围选择的初始时间在一个月内时,造成无法选择的bug
## 2.0.11(2021-07-08)
- 优化 弹出层在超出视窗边缘定位不准确的问题
## 2.0.10(2021-07-08)
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合,导致日期字体看不清的 bug
- 优化 弹出层在超出视窗边缘被遮盖的问题
## 2.0.9(2021-07-07)
- 新增 maskClick 事件
- 修复 特殊情况日历 rpx 布局错误的 bug,rpx -> px
- 修复 范围选择时清空返回值不合理的bug,['', ''] -> []
## 2.0.8(2021-07-07)
- 新增 日期时间显示框支持插槽
## 2.0.7(2021-07-01)
- 优化 添加 uni-icons 依赖
## 2.0.6(2021-05-22)
- 修复 图标在小程序上不显示的 bug
- 优化 重命名引用组件,避免潜在组件命名冲突
## 2.0.5(2021-05-20)
- 优化 代码目录扁平化
## 2.0.4(2021-05-12)
- 新增 组件示例地址
## 2.0.3(2021-05-10)
- 修复 ios 下不识别 '-' 日期格式的 bug
- 优化 pc 下弹出层添加边框和阴影
## 2.0.2(2021-05-08)
- 修复 在 admin 中获取弹出层定位错误的bug
## 2.0.1(2021-05-08)
- 修复 type 属性向下兼容,默认值从 date 变更为 datetime
## 2.0.0(2021-04-30)
- 支持日历形式的日期+时间的范围选择
> 注意:此版本不向后兼容,不再支持单独时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)
## 1.0.6(2021-03-18)
- 新增 hide-second 属性,时间支持仅选择时、分
- 修复 选择跟显示的日期不一样的 bug
- 修复 chang事件触发2次的 bug
- 修复 分、秒 end 范围错误的 bug
- 优化 更好的 nvue 适配
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
</view>
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
</view>
</template>
<script>
export default {
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
},
checkHover: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
},
handleMousemove(weeks) {
this.$emit('handleMouse', weeks)
}
}
}
</script>
<style lang="scss" >
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1px 0;
position: relative;
}
.uni-calendar-item__weeks-box-text {
font-size: 14px;
// font-family: Lato-Bold, Lato;
font-weight: bold;
color: #455997;
}
.uni-calendar-item__weeks-lunar-text {
font-size: 12px;
color: #333;
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #dd524d;
}
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
cursor: default;
}
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
}
.uni-calendar-item--isDay {
position: absolute;
top: 10px;
right: 17%;
background-color: #dd524d;
width:6px;
height: 6px;
border-radius: 50%;
}
.uni-calendar-item--extra {
color: #dd524d;
opacity: 0.8;
}
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: #007aff;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
color: #333;
}
.uni-calendar-item--multiple {
background-color: #F6F7FC;
// color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: #409eff;
border-radius: 50%;
box-sizing: border-box;
border: 3px solid #F6F7FC;
}
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--before-checked-x {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
box-sizing: border-box;
background-color: #F6F7FC;
}
.uni-calendar-item--after-checked-x {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #F6F7FC;
}
</style>
{
"uni-datetime-picker.selectDate": "select date",
"uni-datetime-picker.selectTime": "select time",
"uni-datetime-picker.selectDateTime": "select datetime",
"uni-datetime-picker.startDate": "start date",
"uni-datetime-picker.endDate": "end date",
"uni-datetime-picker.startTime": "start time",
"uni-datetime-picker.endTime": "end time",
"uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel",
"uni-datetime-picker.year": "-",
"uni-datetime-picker.month": "",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN",
"uni-calender.confirm": "confirm"
}
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"uni-datetime-picker.selectDate": "选择日期",
"uni-datetime-picker.selectTime": "选择时间",
"uni-datetime-picker.selectDateTime": "选择日期时间",
"uni-datetime-picker.startDate": "开始日期",
"uni-datetime-picker.endDate": "结束日期",
"uni-datetime-picker.startTime": "开始时间",
"uni-datetime-picker.endTime": "结束时间",
"uni-datetime-picker.ok": "确定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "确认"
}
\ No newline at end of file
{
"uni-datetime-picker.selectDate": "選擇日期",
"uni-datetime-picker.selectTime": "選擇時間",
"uni-datetime-picker.selectDateTime": "選擇日期時間",
"uni-datetime-picker.startDate": "開始日期",
"uni-datetime-picker.endDate": "結束日期",
"uni-datetime-picker.startTime": "開始时间",
"uni-datetime-picker.endTime": "結束时间",
"uni-datetime-picker.ok": "確定",
"uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "確認"
}
\ No newline at end of file
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif
\ No newline at end of file
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.2.6",
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
"keywords": [
"uni-datetime-picker",
"uni-ui",
"uniui",
"日期时间选择器",
"日期时间"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
> `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载*非uni_modules版本*,旧版本将不再维护`
## DatetimePicker 时间选择器
> **组件名:uni-datetime-picker**
> 代码块: `uDatetimePicker`
该组件的优势是,支持**时间戳**输入和输出(起始时间、终止时间也支持时间戳),可**同时选择**日期和时间。
若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。
**_点击 picker 默认值规则:_**
- 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value,则初始值 value 为当前本地时间 Date.now(), 但不会显示在 picker 显示框中
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 1.0.2(2022-07-04)
- 修复 在uni-forms下样式不生效的bug
## 1.0.1(2021-11-23)
- 修复 参数为对象的情况下,url在某些情况显示错误的bug
## 1.0.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
## 0.2.16(2021-11-08)
- 修复 传入空对象 ,显示错误的Bug
## 0.2.15(2021-08-30)
- 修复 return-type="object" 时且存在v-model时,无法删除文件的Bug
## 0.2.14(2021-08-23)
- 新增 参数中返回 fileID 字段
## 0.2.13(2021-08-23)
- 修复 腾讯云传入fileID 不能回显的bug
- 修复 选择图片后,不能放大的问题
## 0.2.12(2021-08-17)
- 修复 由于 0.2.11 版本引起的不能回显图片的Bug
## 0.2.11(2021-08-16)
- 新增 clearFiles(index) 方法,可以手动删除指定文件
- 修复 v-model 值设为 null 报错的Bug
## 0.2.10(2021-08-13)
- 修复 return-type="object" 时,无法删除文件的Bug
## 0.2.9(2021-08-03)
- 修复 auto-upload 属性失效的Bug
## 0.2.8(2021-07-31)
- 修复 fileExtname属性不指定值报错的Bug
## 0.2.7(2021-07-31)
- 修复 在某种场景下图片不回显的Bug
## 0.2.6(2021-07-30)
- 修复 return-type为object下,返回值不正确的Bug
## 0.2.5(2021-07-30)
- 修复(重要) H5 平台下如果和uni-forms组件一同使用导致页面卡死的问题
## 0.2.3(2021-07-28)
- 优化 调整示例代码
## 0.2.2(2021-07-27)
- 修复 vue3 下赋值错误的Bug
- 优化 h5平台下上传文件导致页面卡死的问题
## 0.2.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.1.1(2021-07-02)
- 修复 sourceType 缺少默认值导致 ios 无法选择文件
## 0.1.0(2021-06-30)
- 优化 解耦与uniCloud的强绑定关系 ,如不绑定服务空间,默认autoUpload为false且不可更改
## 0.0.11(2021-06-30)
- 修复 由 0.0.10 版本引发的 returnType 属性失效的问题
## 0.0.10(2021-06-29)
- 优化 文件上传后进度条消失时机
## 0.0.9(2021-06-29)
- 修复 在uni-forms 中,删除文件 ,获取的值不对的Bug
## 0.0.8(2021-06-15)
- 修复 删除文件时无法触发 v-model 的Bug
## 0.0.7(2021-05-12)
- 新增 组件示例地址
## 0.0.6(2021-04-09)
- 修复 选择的文件非 file-extname 字段指定的扩展名报错的Bug
## 0.0.5(2021-04-09)
- 优化 更新组件示例
## 0.0.4(2021-04-09)
- 优化 file-extname 字段支持字符串写法,多个扩展名需要用逗号分隔
## 0.0.3(2021-02-05)
- 调整为uni_modules目录规范
- 修复 微信小程序不指定 fileExtname 属性选择失败的Bug
'use strict';
const ERR_MSG_OK = 'chooseAndUploadFile:ok';
const ERR_MSG_FAIL = 'chooseAndUploadFile:fail';
function chooseImage(opts) {
const {
count,
sizeType = ['original', 'compressed'],
sourceType = ['album', 'camera'],
extension
} = opts
return new Promise((resolve, reject) => {
uni.chooseImage({
count,
sizeType,
sourceType,
extension,
success(res) {
resolve(normalizeChooseAndUploadFileRes(res, 'image'));
},
fail(res) {
reject({
errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
});
},
});
});
}
function chooseVideo(opts) {
const {
camera,
compressed,
maxDuration,
sourceType = ['album', 'camera'],
extension
} = opts;
return new Promise((resolve, reject) => {
uni.chooseVideo({
camera,
compressed,
maxDuration,
sourceType,
extension,
success(res) {
const {
tempFilePath,
duration,
size,
height,
width
} = res;
resolve(normalizeChooseAndUploadFileRes({
errMsg: 'chooseVideo:ok',
tempFilePaths: [tempFilePath],
tempFiles: [
{
name: (res.tempFile && res.tempFile.name) || '',
path: tempFilePath,
size,
type: (res.tempFile && res.tempFile.type) || '',
width,
height,
duration,
fileType: 'video',
cloudPath: '',
}, ],
}, 'video'));
},
fail(res) {
reject({
errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
});
},
});
});
}
function chooseAll(opts) {
const {
count,
extension
} = opts;
return new Promise((resolve, reject) => {
let chooseFile = uni.chooseFile;
if (typeof wx !== 'undefined' &&
typeof wx.chooseMessageFile === 'function') {
chooseFile = wx.chooseMessageFile;
}
if (typeof chooseFile !== 'function') {
return reject({
errMsg: ERR_MSG_FAIL + ' 请指定 type 类型,该平台仅支持选择 image 或 video。',
});
}
chooseFile({
type: 'all',
count,
extension,
success(res) {
resolve(normalizeChooseAndUploadFileRes(res));
},
fail(res) {
reject({
errMsg: res.errMsg.replace('chooseFile:fail', ERR_MSG_FAIL),
});
},
});
});
}
function normalizeChooseAndUploadFileRes(res, fileType) {
res.tempFiles.forEach((item, index) => {
if (!item.name) {
item.name = item.path.substring(item.path.lastIndexOf('/') + 1);
}
if (fileType) {
item.fileType = fileType;
}
item.cloudPath =
Date.now() + '_' + index + item.name.substring(item.name.lastIndexOf('.'));
});
if (!res.tempFilePaths) {
res.tempFilePaths = res.tempFiles.map((file) => file.path);
}
return res;
}
function uploadCloudFiles(files, max = 5, onUploadProgress) {
files = JSON.parse(JSON.stringify(files))
const len = files.length
let count = 0
let self = this
return new Promise(resolve => {
while (count < max) {
next()
}
function next() {
let cur = count++
if (cur >= len) {
!files.find(item => !item.url && !item.errMsg) && resolve(files)
return
}
const fileItem = files[cur]
const index = self.files.findIndex(v => v.uuid === fileItem.uuid)
fileItem.url = ''
delete fileItem.errMsg
uniCloud
.uploadFile({
filePath: fileItem.path,
cloudPath: fileItem.cloudPath,
fileType: fileItem.fileType,
onUploadProgress: res => {
res.index = index
onUploadProgress && onUploadProgress(res)
}
})
.then(res => {
fileItem.url = res.fileID
fileItem.index = index
if (cur < len) {
next()
}
})
.catch(res => {
fileItem.errMsg = res.errMsg || res.message
fileItem.index = index
if (cur < len) {
next()
}
})
}
})
}
function uploadFiles(choosePromise, {
onChooseFile,
onUploadProgress
}) {
return choosePromise
.then((res) => {
if (onChooseFile) {
const customChooseRes = onChooseFile(res);
if (typeof customChooseRes !== 'undefined') {
return Promise.resolve(customChooseRes).then((chooseRes) => typeof chooseRes === 'undefined' ?
res : chooseRes);
}
}
return res;
})
.then((res) => {
if (res === false) {
return {
errMsg: ERR_MSG_OK,
tempFilePaths: [],
tempFiles: [],
};
}
return res
})
}
function chooseAndUploadFile(opts = {
type: 'all'
}) {
if (opts.type === 'image') {
return uploadFiles(chooseImage(opts), opts);
}
else if (opts.type === 'video') {
return uploadFiles(chooseVideo(opts), opts);
}
return uploadFiles(chooseAll(opts), opts);
}
export {
chooseAndUploadFile,
uploadCloudFiles
};
<template>
<view class="uni-file-picker__files">
<view v-if="!readonly" class="files-button" @click="choose">
<slot></slot>
</view>
<!-- :class="{'is-text-box':showType === 'list'}" -->
<view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
<!-- ,'is-list-card':showType === 'list-card' -->
<view class="uni-file-picker__lists-box" v-for="(item ,index) in list" :key="index" :class="{
'files-border':index !== 0 && styles.dividline}"
:style="index !== 0 && styles.dividline &&borderLineStyle">
<view class="uni-file-picker__item">
<!-- :class="{'is-text-image':showType === 'list'}" -->
<!-- <view class="files__image is-text-image">
<image class="header-image" :src="item.logo" mode="aspectFit"></image>
</view> -->
<view class="files__name">{{item.name}}</view>
<view v-if="delIcon&&!readonly" class="icon-del-box icon-files" @click="delFile(index)">
<view class="icon-del icon-files"></view>
<view class="icon-del rotate"></view>
</view>
</view>
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
:backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
</view>
<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
点击重试
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "uploadFile",
emits:['uploadFiles','choose','delFile'],
props: {
filesList: {
type: Array,
default () {
return []
}
},
delIcon: {
type: Boolean,
default: true
},
limit: {
type: [Number, String],
default: 9
},
showType: {
type: String,
default: ''
},
listStyles: {
type: Object,
default () {
return {
// 是否显示边框
border: true,
// 是否显示分隔线
dividline: true,
// 线条样式
borderStyle: {}
}
}
},
readonly:{
type:Boolean,
default:false
}
},
computed: {
list() {
let files = []
this.filesList.forEach(v => {
files.push(v)
})
return files
},
styles() {
let styles = {
border: true,
dividline: true,
'border-style': {}
}
return Object.assign(styles, this.listStyles)
},
borderStyle() {
let {
borderStyle,
border
} = this.styles
let obj = {}
if (!border) {
obj.border = 'none'
} else {
let width = (borderStyle && borderStyle.width) || 1
width = this.value2px(width)
let radius = (borderStyle && borderStyle.radius) || 5
radius = this.value2px(radius)
obj = {
'border-width': width,
'border-style': (borderStyle && borderStyle.style) || 'solid',
'border-color': (borderStyle && borderStyle.color) || '#eee',
'border-radius': radius
}
}
let classles = ''
for (let i in obj) {
classles += `${i}:${obj[i]};`
}
return classles
},
borderLineStyle() {
let obj = {}
let {
borderStyle
} = this.styles
if (borderStyle && borderStyle.color) {
obj['border-color'] = borderStyle.color
}
if (borderStyle && borderStyle.width) {
let width = borderStyle && borderStyle.width || 1
let style = borderStyle && borderStyle.style || 0
if (typeof width === 'number') {
width += 'px'
} else {
width = width.indexOf('px') ? width : width + 'px'
}
obj['border-width'] = width
if (typeof style === 'number') {
style += 'px'
} else {
style = style.indexOf('px') ? style : style + 'px'
}
obj['border-top-style'] = style
}
let classles = ''
for (let i in obj) {
classles += `${i}:${obj[i]};`
}
return classles
}
},
methods: {
uploadFiles(item, index) {
this.$emit("uploadFiles", {
item,
index
})
},
choose() {
this.$emit("choose")
},
delFile(index) {
this.$emit('delFile', index)
},
value2px(value) {
if (typeof value === 'number') {
value += 'px'
} else {
value = value.indexOf('px') !== -1 ? value : value + 'px'
}
return value
}
}
}
</script>
<style lang="scss">
.uni-file-picker__files {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: flex-start;
}
.files-button {
// border: 1px red solid;
}
.uni-file-picker__lists {
position: relative;
margin-top: 5px;
overflow: hidden;
}
.file-picker__mask {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
color: #fff;
font-size: 14px;
background-color: rgba(0, 0, 0, 0.4);
}
.uni-file-picker__lists-box {
position: relative;
}
.uni-file-picker__item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
padding: 8px 10px;
padding-right: 5px;
padding-left: 10px;
}
.files-border {
border-top: 1px #eee solid;
}
.files__name {
flex: 1;
font-size: 14px;
color: #666;
margin-right: 25px;
/* #ifndef APP-NVUE */
word-break: break-all;
word-wrap: break-word;
/* #endif */
}
.icon-files {
/* #ifndef APP-NVUE */
position: static;
background-color: initial;
/* #endif */
}
// .icon-files .icon-del {
// background-color: #333;
// width: 12px;
// height: 1px;
// }
.is-list-card {
border: 1px #eee solid;
margin-bottom: 5px;
border-radius: 5px;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.files__image {
width: 40px;
height: 40px;
margin-right: 10px;
}
.header-image {
width: 100%;
height: 100%;
}
.is-text-box {
border: 1px #eee solid;
border-radius: 5px;
}
.is-text-image {
width: 25px;
height: 25px;
margin-left: 5px;
}
.rotate {
position: absolute;
transform: rotate(90deg);
}
.icon-del-box {
/* #ifndef APP-NVUE */
display: flex;
margin: auto 0;
/* #endif */
align-items: center;
justify-content: center;
position: absolute;
top: 0px;
bottom: 0;
right: 5px;
height: 26px;
width: 26px;
// border-radius: 50%;
// background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
transform: rotate(-45deg);
}
.icon-del {
width: 15px;
height: 1px;
background-color: #333;
// border-radius: 1px;
}
/* #ifdef H5 */
@media all and (min-width: 768px) {
.uni-file-picker__files {
max-width: 375px;
}
}
/* #endif */
</style>
<template>
<view class="uni-file-picker__container">
<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
<view class="file-picker__box-content" :style="borderStyle">
<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
<view class="icon-del"></view>
<view class="icon-del rotate"></view>
</view>
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
:backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
</view>
<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
点击重试
</view>
</view>
</view>
<view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
<view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
<slot>
<view class="icon-add"></view>
<view class="icon-add rotate"></view>
</slot>
</view>
</view>
</view>
</template>
<script>
export default {
name: "uploadImage",
emits:['uploadFiles','choose','delFile'],
props: {
filesList: {
type: Array,
default () {
return []
}
},
disabled:{
type: Boolean,
default: false
},
disablePreview: {
type: Boolean,
default: false
},
limit: {
type: [Number, String],
default: 9
},
imageStyles: {
type: Object,
default () {
return {
width: 'auto',
height: 'auto',
border: {}
}
}
},
delIcon: {
type: Boolean,
default: true
},
readonly:{
type:Boolean,
default:false
}
},
computed: {
styles() {
let styles = {
width: 'auto',
height: 'auto',
border: {}
}
return Object.assign(styles, this.imageStyles)
},
boxStyle() {
const {
width = 'auto',
height = 'auto'
} = this.styles
let obj = {}
if (height === 'auto') {
if (width !== 'auto') {
obj.height = this.value2px(width)
obj['padding-top'] = 0
} else {
obj.height = 0
}
} else {
obj.height = this.value2px(height)
obj['padding-top'] = 0
}
if (width === 'auto') {
if (height !== 'auto') {
obj.width = this.value2px(height)
} else {
obj.width = '33.3%'
}
} else {
obj.width = this.value2px(width)
}
let classles = ''
for(let i in obj){
classles+= `${i}:${obj[i]};`
}
return classles
},
borderStyle() {
let {
border
} = this.styles
let obj = {}
const widthDefaultValue = 1
const radiusDefaultValue = 3
if (typeof border === 'boolean') {
obj.border = border ? '1px #eee solid' : 'none'
} else {
let width = (border && border.width) || widthDefaultValue
width = this.value2px(width)
let radius = (border && border.radius) || radiusDefaultValue
radius = this.value2px(radius)
obj = {
'border-width': width,
'border-style': (border && border.style) || 'solid',
'border-color': (border && border.color) || '#eee',
'border-radius': radius
}
}
let classles = ''
for(let i in obj){
classles+= `${i}:${obj[i]};`
}
return classles
}
},
methods: {
uploadFiles(item, index) {
this.$emit("uploadFiles", item)
},
choose() {
this.$emit("choose")
},
delFile(index) {
this.$emit('delFile', index)
},
prviewImage(img, index) {
let urls = []
if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
this.$emit("choose")
}
if(this.disablePreview) return
this.filesList.forEach(i => {
urls.push(i.url)
})
uni.previewImage({
urls: urls,
current: index
});
},
value2px(value) {
if (typeof value === 'number') {
value += 'px'
} else {
if (value.indexOf('%') === -1) {
value = value.indexOf('px') !== -1 ? value : value + 'px'
}
}
return value
}
}
}
</script>
<style lang="scss">
.uni-file-picker__container {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-wrap: wrap;
margin: -5px;
}
.file-picker__box {
position: relative;
// flex: 0 0 33.3%;
width: 33.3%;
height: 0;
padding-top: 33.33%;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
.file-picker__box-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px;
border: 1px #eee solid;
border-radius: 5px;
overflow: hidden;
}
.file-picker__progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* border: 1px red solid; */
z-index: 2;
}
.file-picker__progress-item {
width: 100%;
}
.file-picker__mask {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
color: #fff;
font-size: 12px;
background-color: rgba(0, 0, 0, 0.4);
}
.file-image {
width: 100%;
height: 100%;
}
.is-add {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
}
.icon-add {
width: 50px;
height: 5px;
background-color: #f1f1f1;
border-radius: 2px;
}
.rotate {
position: absolute;
transform: rotate(90deg);
}
.icon-del-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
position: absolute;
top: 3px;
right: 3px;
height: 26px;
width: 26px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
transform: rotate(-45deg);
}
.icon-del {
width: 15px;
height: 2px;
background-color: #fff;
border-radius: 2px;
}
</style>
/**
* 获取文件名和后缀
* @param {String} name
*/
export const get_file_ext = (name) => {
const last_len = name.lastIndexOf('.')
const len = name.length
return {
name: name.substring(0, last_len),
ext: name.substring(last_len + 1, len)
}
}
/**
* 获取扩展名
* @param {Array} fileExtname
*/
export const get_extname = (fileExtname) => {
if (!Array.isArray(fileExtname)) {
let extname = fileExtname.replace(/(\[|\])/g, '')
return extname.split(',')
} else {
return fileExtname
}
return []
}
/**
* 获取文件和检测是否可选
*/
export const get_files_and_is_max = (res, _extname) => {
let filePaths = []
let files = []
if(!_extname || _extname.length === 0){
return {
filePaths,
files
}
}
res.tempFiles.forEach(v => {
let fileFullName = get_file_ext(v.name)
const extname = fileFullName.ext.toLowerCase()
if (_extname.indexOf(extname) !== -1) {
files.push(v)
filePaths.push(v.path)
}
})
if (files.length !== res.tempFiles.length) {
uni.showToast({
title: `当前选择了${res.tempFiles.length}个文件 ,${res.tempFiles.length - files.length} 个文件格式不正确`,
icon: 'none',
duration: 5000
})
}
return {
filePaths,
files
}
}
/**
* 获取图片信息
* @param {Object} filepath
*/
export const get_file_info = (filepath) => {
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: filepath,
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
}
/**
* 获取封装数据
*/
export const get_file_data = async (files, type = 'image') => {
// 最终需要上传数据库的数据
let fileFullName = get_file_ext(files.name)
const extname = fileFullName.ext.toLowerCase()
let filedata = {
name: files.name,
uuid: files.uuid,
extname: extname || '',
cloudPath: files.cloudPath,
fileType: files.fileType,
url: files.path || files.path,
size: files.size, //单位是字节
image: {},
path: files.path,
video: {}
}
if (type === 'image') {
const imageinfo = await get_file_info(files.path)
delete filedata.video
filedata.image.width = imageinfo.width
filedata.image.height = imageinfo.height
filedata.image.location = imageinfo.path
} else {
delete filedata.image
}
return filedata
}
{
"id": "uni-file-picker",
"displayName": "uni-file-picker 文件选择上传",
"version": "1.0.2",
"description": "文件选择上传组件,可以选择图片、视频等任意文件并上传到当前绑定的服务空间",
"keywords": [
"uni-ui",
"uniui",
"图片上传",
"文件上传"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
## FilePicker 文件选择上传
> **组件名:uni-file-picker**
> 代码块: `uFilePicker`
文件选择上传组件,可以选择图片、视频等任意文件并上传到当前绑定的服务空间
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 1.3.5(2022-01-24)
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4(2022-01-24)
- 优化 size 支持其他单位
## 1.3.3(2022-01-17)
- 修复 nvue 有些图标不显示的bug,兼容老版本图标
## 1.3.2(2021-12-01)
- 优化 示例可复制图标名称
## 1.3.1(2021-11-23)
- 优化 兼容旧组件 type 值
## 1.3.0(2021-11-19)
- 新增 更多图标
- 优化 自定义图标使用方式
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7(2021-11-08)
## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5(2021-05-12)
- 新增 组件示例地址
## 1.1.4(2021-02-05)
- 调整为uni_modules目录规范
<template>
<!-- #ifdef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif -->
</template>
<script>
import icons from './icons.js';
const getVal = (val) => {
const reg = /^[0-9]*$/g
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
}
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('"+iconUrl+"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'UniIcons',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 16
},
customPrefix:{
type: String,
default: ''
}
},
data() {
return {
icons: icons.glyphs
}
},
computed:{
unicode(){
let code = this.icons.find(v=>v.font_class === this.type)
if(code){
return unescape(`%u${code.unicode}`)
}
return ''
},
iconSize(){
return getVal(this.size)
}
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
/* #endif */
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
</style>
.uniui-color:before {
content: "\e6cf";
}
.uniui-wallet:before {
content: "\e6b1";
}
.uniui-settings-filled:before {
content: "\e6ce";
}
.uniui-auth-filled:before {
content: "\e6cc";
}
.uniui-shop-filled:before {
content: "\e6cd";
}
.uniui-staff-filled:before {
content: "\e6cb";
}
.uniui-vip-filled:before {
content: "\e6c6";
}
.uniui-plus-filled:before {
content: "\e6c7";
}
.uniui-folder-add-filled:before {
content: "\e6c8";
}
.uniui-color-filled:before {
content: "\e6c9";
}
.uniui-tune-filled:before {
content: "\e6ca";
}
.uniui-calendar-filled:before {
content: "\e6c0";
}
.uniui-notification-filled:before {
content: "\e6c1";
}
.uniui-wallet-filled:before {
content: "\e6c2";
}
.uniui-medal-filled:before {
content: "\e6c3";
}
.uniui-gift-filled:before {
content: "\e6c4";
}
.uniui-fire-filled:before {
content: "\e6c5";
}
.uniui-refreshempty:before {
content: "\e6bf";
}
.uniui-location-filled:before {
content: "\e6af";
}
.uniui-person-filled:before {
content: "\e69d";
}
.uniui-personadd-filled:before {
content: "\e698";
}
.uniui-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.uniui-eye:before {
content: "\e651";
}
.uniui-eye-filled:before {
content: "\e66a";
}
.uniui-eye-slash:before {
content: "\e6b3";
}
.uniui-eye-slash-filled:before {
content: "\e6b4";
}
.uniui-info-filled:before {
content: "\e649";
}
.uniui-reload:before {
content: "\e6b2";
}
.uniui-micoff-filled:before {
content: "\e6b0";
}
.uniui-map-pin-ellipse:before {
content: "\e6ac";
}
.uniui-map-pin:before {
content: "\e6ad";
}
.uniui-location:before {
content: "\e6ae";
}
.uniui-starhalf:before {
content: "\e683";
}
.uniui-star:before {
content: "\e688";
}
.uniui-star-filled:before {
content: "\e68f";
}
.uniui-calendar:before {
content: "\e6a0";
}
.uniui-fire:before {
content: "\e6a1";
}
.uniui-medal:before {
content: "\e6a2";
}
.uniui-font:before {
content: "\e6a3";
}
.uniui-gift:before {
content: "\e6a4";
}
.uniui-link:before {
content: "\e6a5";
}
.uniui-notification:before {
content: "\e6a6";
}
.uniui-staff:before {
content: "\e6a7";
}
.uniui-vip:before {
content: "\e6a8";
}
.uniui-folder-add:before {
content: "\e6a9";
}
.uniui-tune:before {
content: "\e6aa";
}
.uniui-auth:before {
content: "\e6ab";
}
.uniui-person:before {
content: "\e699";
}
.uniui-email-filled:before {
content: "\e69a";
}
.uniui-phone-filled:before {
content: "\e69b";
}
.uniui-phone:before {
content: "\e69c";
}
.uniui-email:before {
content: "\e69e";
}
.uniui-personadd:before {
content: "\e69f";
}
.uniui-chatboxes-filled:before {
content: "\e692";
}
.uniui-contact:before {
content: "\e693";
}
.uniui-chatbubble-filled:before {
content: "\e694";
}
.uniui-contact-filled:before {
content: "\e695";
}
.uniui-chatboxes:before {
content: "\e696";
}
.uniui-chatbubble:before {
content: "\e697";
}
.uniui-upload-filled:before {
content: "\e68e";
}
.uniui-upload:before {
content: "\e690";
}
.uniui-weixin:before {
content: "\e691";
}
.uniui-compose:before {
content: "\e67f";
}
.uniui-qq:before {
content: "\e680";
}
.uniui-download-filled:before {
content: "\e681";
}
.uniui-pyq:before {
content: "\e682";
}
.uniui-sound:before {
content: "\e684";
}
.uniui-trash-filled:before {
content: "\e685";
}
.uniui-sound-filled:before {
content: "\e686";
}
.uniui-trash:before {
content: "\e687";
}
.uniui-videocam-filled:before {
content: "\e689";
}
.uniui-spinner-cycle:before {
content: "\e68a";
}
.uniui-weibo:before {
content: "\e68b";
}
.uniui-videocam:before {
content: "\e68c";
}
.uniui-download:before {
content: "\e68d";
}
.uniui-help:before {
content: "\e679";
}
.uniui-navigate-filled:before {
content: "\e67a";
}
.uniui-plusempty:before {
content: "\e67b";
}
.uniui-smallcircle:before {
content: "\e67c";
}
.uniui-minus-filled:before {
content: "\e67d";
}
.uniui-micoff:before {
content: "\e67e";
}
.uniui-closeempty:before {
content: "\e66c";
}
.uniui-clear:before {
content: "\e66d";
}
.uniui-navigate:before {
content: "\e66e";
}
.uniui-minus:before {
content: "\e66f";
}
.uniui-image:before {
content: "\e670";
}
.uniui-mic:before {
content: "\e671";
}
.uniui-paperplane:before {
content: "\e672";
}
.uniui-close:before {
content: "\e673";
}
.uniui-help-filled:before {
content: "\e674";
}
.uniui-paperplane-filled:before {
content: "\e675";
}
.uniui-plus:before {
content: "\e676";
}
.uniui-mic-filled:before {
content: "\e677";
}
.uniui-image-filled:before {
content: "\e678";
}
.uniui-locked-filled:before {
content: "\e668";
}
.uniui-info:before {
content: "\e669";
}
.uniui-locked:before {
content: "\e66b";
}
.uniui-camera-filled:before {
content: "\e658";
}
.uniui-chat-filled:before {
content: "\e659";
}
.uniui-camera:before {
content: "\e65a";
}
.uniui-circle:before {
content: "\e65b";
}
.uniui-checkmarkempty:before {
content: "\e65c";
}
.uniui-chat:before {
content: "\e65d";
}
.uniui-circle-filled:before {
content: "\e65e";
}
.uniui-flag:before {
content: "\e65f";
}
.uniui-flag-filled:before {
content: "\e660";
}
.uniui-gear-filled:before {
content: "\e661";
}
.uniui-home:before {
content: "\e662";
}
.uniui-home-filled:before {
content: "\e663";
}
.uniui-gear:before {
content: "\e664";
}
.uniui-smallcircle-filled:before {
content: "\e665";
}
.uniui-map-filled:before {
content: "\e666";
}
.uniui-map:before {
content: "\e667";
}
.uniui-refresh-filled:before {
content: "\e656";
}
.uniui-refresh:before {
content: "\e657";
}
.uniui-cloud-upload:before {
content: "\e645";
}
.uniui-cloud-download-filled:before {
content: "\e646";
}
.uniui-cloud-download:before {
content: "\e647";
}
.uniui-cloud-upload-filled:before {
content: "\e648";
}
.uniui-redo:before {
content: "\e64a";
}
.uniui-images-filled:before {
content: "\e64b";
}
.uniui-undo-filled:before {
content: "\e64c";
}
.uniui-more:before {
content: "\e64d";
}
.uniui-more-filled:before {
content: "\e64e";
}
.uniui-undo:before {
content: "\e64f";
}
.uniui-images:before {
content: "\e650";
}
.uniui-paperclip:before {
content: "\e652";
}
.uniui-settings:before {
content: "\e653";
}
.uniui-search:before {
content: "\e654";
}
.uniui-redo-filled:before {
content: "\e655";
}
.uniui-list:before {
content: "\e644";
}
.uniui-mail-open-filled:before {
content: "\e63a";
}
.uniui-hand-down-filled:before {
content: "\e63c";
}
.uniui-hand-down:before {
content: "\e63d";
}
.uniui-hand-up-filled:before {
content: "\e63e";
}
.uniui-hand-up:before {
content: "\e63f";
}
.uniui-heart-filled:before {
content: "\e641";
}
.uniui-mail-open:before {
content: "\e643";
}
.uniui-heart:before {
content: "\e639";
}
.uniui-loop:before {
content: "\e633";
}
.uniui-pulldown:before {
content: "\e632";
}
.uniui-scan:before {
content: "\e62a";
}
.uniui-bars:before {
content: "\e627";
}
.uniui-cart-filled:before {
content: "\e629";
}
.uniui-checkbox:before {
content: "\e62b";
}
.uniui-checkbox-filled:before {
content: "\e62c";
}
.uniui-shop:before {
content: "\e62f";
}
.uniui-headphones:before {
content: "\e630";
}
.uniui-cart:before {
content: "\e631";
}
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论