@ -0,0 +1,192 @@ | |||
<!-- 结单 --> | |||
<template> | |||
<view class="finish"> | |||
<navbar title="结单" :leftClick="leftClick"></navbar> | |||
<uv-form labelPosition="top" :model="form" :rules="rules" ref="form" labelWidth="140"> | |||
<uv-form-item label="处理结果" prop="form.processingResult"> | |||
<uv-input @focus="processingPickerOpen" placeholder="请选择处理结果" v-model="form.processingResult" | |||
:fontSize="30"></uv-input> | |||
</uv-form-item> | |||
<uv-form-item label="收费金额" prop="form.money"> | |||
<uv-input placeholder="请输入收费金额" type="number" v-model="form.money" :fontSize="30"></uv-input> | |||
</uv-form-item> | |||
<uv-form-item label="处理说明" prop="form.instructions"> | |||
<uv-textarea v-model="form.instructions" :maxlength="200" :height="120" count | |||
placeholder="请输入处理说明"></uv-textarea> | |||
</uv-form-item> | |||
<uv-form-item label="照片" prop="form.images"> | |||
<view class="image-list"> | |||
<view @click="openImageMenu(index)" v-for="(item,index) in form.images" :key="index" | |||
class="image-item"> | |||
<image :src="item" mode="widthFix"></image> | |||
</view> | |||
<view v-if="form.images.length < maxUpload" @click="chooseImage" class="upload"> | |||
<uv-icon name="camera-fill" color="#3c9cff" size="50"></uv-icon> | |||
</view> | |||
</view> | |||
</uv-form-item> | |||
<uv-button type="primary" text="结单" shape="circle" customStyle="margin-top: 10px" | |||
@click="submit"></uv-button> | |||
<!-- 选择完成状态 --> | |||
<uv-picker ref="processing" :columns="processingList" :itemHeight="100" :round="20" keyName="label" | |||
title="选择处理结果" @confirm="floorConfirm"></uv-picker> | |||
<!-- 图片操作菜单 --> | |||
<uv-action-sheet ref="actionSheet" :actions="list" :round="20" cancelText="取消" title="图片操作" | |||
@select="selectImageSheet"> </uv-action-sheet> | |||
</uv-form> | |||
</view> | |||
</template> | |||
<script> | |||
import navbar from '../../components/base/navbar.vue' | |||
export default { | |||
name: 'Finish', | |||
components: { | |||
navbar | |||
}, | |||
data() { | |||
return { | |||
form: { | |||
processingResult: '', | |||
money: 0, | |||
instructions: '', | |||
images: [] | |||
}, | |||
rules: { | |||
}, | |||
processingList: [ | |||
[{ | |||
id: 0, | |||
label: '已处理' | |||
}, | |||
{ | |||
id: 1, | |||
label: '未处理' | |||
} | |||
] | |||
], | |||
maxUpload: 4, | |||
currentIndex: 0, | |||
list: [ //图片操作菜单操作项 | |||
{ | |||
name: '查看图片', | |||
id: 0 | |||
}, | |||
{ | |||
name: '删除图片', | |||
id: 1 | |||
} | |||
], | |||
} | |||
}, | |||
methods: { | |||
//返回 | |||
leftClick() { | |||
uni.switchTab({ | |||
url: '/pages/repairList/repairList' | |||
}) | |||
}, | |||
//打开处理结果 | |||
processingPickerOpen() { | |||
this.$refs.processing.open(); | |||
}, | |||
//用户选择了处理结果 | |||
floorConfirm(floor) { | |||
this.form.processingResult = floor.value[0].label | |||
}, | |||
//选择文件 | |||
chooseImage() { | |||
this.$utils.chooseImage(res => { | |||
res.tempFiles.forEach(file => { | |||
console.log(file); | |||
this.aliUpload(file) | |||
}) | |||
}) | |||
}, | |||
//阿里云oss上传 | |||
aliUpload(file) { | |||
this.$uploadFileToOSS(file).then(filePath => { | |||
this.form.images.push(filePath) | |||
}) | |||
}, | |||
//打开图片操作菜单 | |||
openImageMenu(index) { | |||
this.currentIndex = index | |||
this.$refs.actionSheet.open(); | |||
}, | |||
//用户选择了图片操作选项 | |||
selectImageSheet(imageSheet) { | |||
let { | |||
id | |||
} = imageSheet | |||
if (id) { | |||
this.deleteImageAsList() | |||
} else { | |||
this.viewImageAsList() | |||
} | |||
}, | |||
//查看图片 | |||
viewImageAsList() { | |||
this.$utils.previewImage({ | |||
current: this.currentIndex, | |||
urls: this.form.images | |||
}) | |||
}, | |||
//删除图片 | |||
deleteImageAsList() { | |||
this.form.images = this.form.images.filter((_, index) => { | |||
return index != this.currentIndex | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style> | |||
.finish { | |||
width: 96%; | |||
margin: 0rpx auto; | |||
} | |||
.image-list { | |||
width: 100%; | |||
display: flex; | |||
flex-wrap: wrap; | |||
padding-top: 20rpx; | |||
} | |||
.image-item, | |||
.upload { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 24%; | |||
height: 174rpx; | |||
background: #f8f8f8; | |||
margin-left: 1%; | |||
border-radius: 15rpx; | |||
overflow: hidden; | |||
margin-bottom: 20rpx;; | |||
} | |||
.image-item image { | |||
width: 100%; | |||
} | |||
</style> |
@ -0,0 +1,195 @@ | |||
<template> | |||
<view class="content"> | |||
<!-- app和小程序使用以下svg会报错 h5正常 --> | |||
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |||
width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice"> | |||
<defs> | |||
<linearGradient id="bg"> | |||
<stop offset="0%" style="stop-color:rgba(130, 158, 249, 0.06)"></stop> | |||
<stop offset="50%" style="stop-color:rgba(76, 190, 255, 0.6)"></stop> | |||
<stop offset="100%" style="stop-color:rgba(115, 209, 72, 0.2)"></stop> | |||
</linearGradient> | |||
<path id="wave" fill="url(#bg)" | |||
d="M-363.852,502.589c0,0,236.988-41.997,505.475,0 | |||
s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z" /> | |||
</defs> | |||
<g> | |||
<use xlink:href='#wave' opacity=".3"> | |||
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s" | |||
calcMode="spline" values="270 230; -334 180; 270 230" keyTimes="0; .5; 1" | |||
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" /> | |||
</use> | |||
<use xlink:href='#wave' opacity=".6"> | |||
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="8s" | |||
calcMode="spline" values="-270 230;243 220;-270 230" keyTimes="0; .6; 1" | |||
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" /> | |||
</use> | |||
<use xlink:href='#wave' opacty=".9"> | |||
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s" | |||
calcMode="spline" values="0 230;-140 200;0 230" keyTimes="0; .4; 1" | |||
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" /> | |||
</use> | |||
</g> | |||
</svg> --> | |||
<view class="loginBox"> | |||
<h3 style="text-align: center;margin-bottom:120rpx;">欢迎登录</h3> | |||
<view class="inputBox"> | |||
<view class="ipt"> | |||
<uni-icons type="contact" size="24" color="rgb(66,157,250)"></uni-icons> | |||
<input type="text" value="" placeholder="请输入手机号"/> | |||
</view> | |||
<view class="ipt"> | |||
<uni-icons type="eye" size="24" color="rgb(66,157,250)"></uni-icons> | |||
<input type="passsword" value="" placeholder="请输入密码"/> | |||
</view> | |||
<view class="ipt"> | |||
<uni-icons type="checkmarkempty" size="24" color="rgb(66,157,250)"></uni-icons> | |||
<input type="text" value="" placeholder="请输入验证码"/> | |||
<view class="yzm"> | |||
验证码 | |||
</view> | |||
</view> | |||
<button @click="login">登录</button> | |||
<view class="forgetPwd"> | |||
<!-- <span>忘记密码</span> --> | |||
<!-- <span>没有账号,去注册</span> --> | |||
</view> | |||
</view> | |||
<view class="tipbox"> | |||
<view class="txt"> | |||
—— 其他账号登录 —— | |||
</view> | |||
<view class="otherUser"> | |||
<uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
//登录 | |||
login(){ | |||
uni.switchTab({ | |||
url: '/pages/repair/repair' | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
svg { | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
width: 100%; | |||
height:40%; | |||
box-sizing: border-box; | |||
display: block; | |||
background-color: #ffffff; | |||
} | |||
.loginBox{ | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%,-60%); | |||
width: 90%; | |||
border-radius: 20rpx; | |||
padding: 60rpx; | |||
box-sizing: border-box; | |||
} | |||
h3{ | |||
color:rgb(66,157,250); | |||
font-size: 40rpx; | |||
letter-spacing: 10rpx; | |||
margin-bottom: 40rpx; | |||
} | |||
.inputBox{ | |||
} | |||
.ipt{ | |||
height: 86rpx; | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
margin-bottom: 40rpx; | |||
background-color: #f5f5f5; | |||
border-radius: 10rpx; | |||
padding-left: 10rpx; | |||
} | |||
.ipt input{ | |||
margin-left: 20rpx; | |||
font-size: 28rpx; | |||
} | |||
.ipt input{ | |||
margin-left: 20rpx; | |||
} | |||
.forgetPwd{ | |||
margin-top: 30rpx; | |||
font-size: 26rpx; | |||
color: #b5b5b5; | |||
text-align: end; | |||
padding:0 10rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
} | |||
button{ | |||
margin-top: 20rpx; | |||
line-height: 85rpx; | |||
text-align: center; | |||
background: rgb(66,157,250); | |||
border-radius: 40rpx; | |||
color: #fff; | |||
margin-top: 40rpx; | |||
} | |||
.tip{ | |||
text-align: center; | |||
font-size: 28rpx; | |||
position: fixed; | |||
bottom: 50rpx; | |||
left: 50%; | |||
transform: translate(-50%,-50%); | |||
color: #f4f4f4; | |||
} | |||
.tipbox { | |||
text-align: center; | |||
margin-top: 100rpx; | |||
} | |||
.otherUser { | |||
margin-top: 30rpx; | |||
display: flex; | |||
justify-content: center; | |||
} | |||
.txt { | |||
font-size: 28rpx; | |||
color: #cbcbcb; | |||
} | |||
.otherUser .uni-icons { | |||
margin-left: 20rpx; | |||
} | |||
.yzm{ | |||
text-align: end; | |||
font-size: 24rpx; | |||
background: linear-gradient(to right,rgb(66,157,250),rgb(0, 170, 127)); | |||
height: 60rpx; | |||
width: 150rpx; | |||
line-height: 60rpx; | |||
text-align: center; | |||
border-radius: 10rpx; | |||
color: #fff; | |||
} | |||
</style> |
@ -0,0 +1,70 @@ | |||
<!-- 驳回 --> | |||
<template> | |||
<view class="reject"> | |||
<navbar title="驳回" :leftClick="leftClick"></navbar> | |||
<uv-form labelPosition="left" :model="form" :rules="rules" errorType="toast" ref="form" labelWidth="0"> | |||
<uv-form-item label="" prop="reason"> | |||
<uv-textarea v-model="form.reason" :maxlength="200" :height="120" count | |||
placeholder="请输入驳回原因"></uv-textarea> | |||
</uv-form-item> | |||
<uv-button type="primary" text="驳回" shape="circle" customStyle="margin-top: 10px" | |||
@click="submit"></uv-button> | |||
</uv-form> | |||
</view> | |||
</template> | |||
<script> | |||
import navbar from '../../components/base/navbar.vue' | |||
export default { | |||
name: 'Reject', | |||
components: { | |||
navbar | |||
}, | |||
data() { | |||
return { | |||
form: { | |||
reason: '' | |||
}, | |||
rules: { | |||
'reason': { | |||
type: 'string', | |||
required: true, | |||
message: '请填写姓名', | |||
trigger: ['blur', 'change'] | |||
} | |||
}, | |||
} | |||
}, | |||
methods: { | |||
//驳回 | |||
submit() { | |||
this.$refs.form.validate().then(res => { | |||
}).catch(errors => { | |||
uni.showToast({ | |||
icon: 'none', | |||
title: '请填写驳回原因' | |||
}) | |||
}) | |||
}, | |||
//返回 | |||
leftClick() { | |||
uni.switchTab({ | |||
url: '/pages/repairList/repairList' | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.reject { | |||
width: 96%; | |||
margin: 0rpx auto; | |||
} | |||
</style> |
@ -0,0 +1,248 @@ | |||
<!-- 报修 --> | |||
<template> | |||
<view class="repair bx reserveSpace"> | |||
<!-- <view class="repair-title"> | |||
<text>申请报修</text> | |||
</view> --> | |||
<uv-form :model="form" :rules="rules" :useBeforeRead="true" ref="form" labelPosition="left" labelWidth="100"> | |||
<uv-form-item label="楼栋" prop="form.building" borderBottom> | |||
<uv-input @focus="floorPickerOpen" placeholder="请选择楼层" v-model="form.building" border="none" :fontSize="30"></uv-input> | |||
<template v-slot:right> | |||
<uv-icon name="arrow-right"></uv-icon> | |||
</template> | |||
</uv-form-item> | |||
<uv-form-item label="室号" prop="form.room" borderBottom> | |||
<uv-input @focus="roomPickerOpen" placeholder="请选择室号" v-model="form.room" border="none" :fontSize="30"></uv-input> | |||
<template v-slot:right> | |||
<uv-icon name="arrow-right"></uv-icon> | |||
</template> | |||
</uv-form-item> | |||
<uv-form-item label="项目" prop="form.project" borderBottom> | |||
<uv-input v-model="form.project" placeholder="请填写项目" :fontSize="30" border="none"></uv-input> | |||
</uv-form-item> | |||
<uv-form-item label="姓名" prop="form.name" borderBottom> | |||
<uv-input v-model="form.name" placeholder="请填写姓名" :fontSize="30" border="none"></uv-input> | |||
</uv-form-item> | |||
<uv-form-item label="简介" prop="form.intro" borderBottom> | |||
<uv-textarea v-model="form.intro" :height="140" :maxlength="200" textStyle="font-size : 30rpx" count | |||
placeholder="请输入内容"></uv-textarea> | |||
</uv-form-item> | |||
<uv-form-item label="电话号" prop="form.name" borderBottom> | |||
<uv-input v-model="form.phone" placeholder="请填写电话号" border="none" :fontSize="30"></uv-input> | |||
</uv-form-item> | |||
<uv-form-item label="照片" prop="form.images" labelPosition="top"> | |||
<view class="image-list"> | |||
<view @click="openImageMenu(index)" v-for="(item,index) in form.images" :key="index" | |||
class="image-item"> | |||
<image :src="item" mode="widthFix"></image> | |||
</view> | |||
<view v-if="form.images.length < maxUpload" @click="uploadImage" class="upload"> | |||
<uv-icon name="camera-fill" color="#3c9cff" size="50"></uv-icon> | |||
</view> | |||
</view> | |||
</uv-form-item> | |||
<uv-button type="primary" text="提交" shape="circle" customStyle="margin-top: 10px" | |||
@click="submitRepair"></uv-button> | |||
</uv-form> | |||
<!-- 报修地址选择(楼栋) --> | |||
<uv-picker ref="floorPicker" :columns="floorList" :itemHeight="100" :round="20" keyName="label" title="选择楼栋" | |||
@confirm="floorConfirm"></uv-picker> | |||
<!-- 报修地址选择(室号) --> | |||
<uv-picker ref="roomPicker" :columns="roomNumberList" :itemHeight="100" :round="20" keyName="label" title="选择室号" | |||
@confirm="roomConfirm"></uv-picker> | |||
<!-- 图片操作菜单 --> | |||
<uv-action-sheet ref="actionSheet" :actions="list" :round="20" cancelText="取消" title="图片操作" | |||
@select="selectImageSheet"> </uv-action-sheet> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'Repair', | |||
data() { | |||
return { | |||
form: { | |||
building: '', //楼栋 | |||
room: '', //室号 | |||
project: '', //项目 | |||
phone: '', //手机号 | |||
name: '', //姓名 | |||
intro: '', //简介 | |||
images: [] | |||
}, | |||
rules: { //参数校验 | |||
'form.name': { | |||
type: 'string', | |||
required: true, | |||
message: '请填写姓名', | |||
trigger: ['blur', 'change'] | |||
} | |||
}, | |||
maxUpload: 4, //最大上传图片张数 | |||
list: [ //图片操作菜单操作项 | |||
{ | |||
name: '查看图片', | |||
id: 0 | |||
}, | |||
{ | |||
name: '删除图片', | |||
id: 1 | |||
} | |||
], | |||
currentIndex: undefined, //当前操作的图片索引 | |||
floorList: [ | |||
[{ | |||
id: 0, | |||
label: '楼栋1' | |||
}, | |||
{ | |||
id: 1, | |||
label: '楼栋2' | |||
} | |||
] | |||
], //楼栋列表 | |||
roomNumberList: [ | |||
[{ | |||
id: 0, | |||
label: 'A1001' | |||
}, | |||
{ | |||
id: 1, | |||
label: 'A1002' | |||
} | |||
] | |||
], //室号列表 | |||
} | |||
}, | |||
methods: { | |||
//上传图片 | |||
uploadImage(){ | |||
let self = this | |||
this.$Oss.ossUploadImage({ | |||
success(res){ | |||
self.form.images.push(res) | |||
} | |||
}) | |||
}, | |||
//打开图片操作菜单 | |||
openImageMenu(index) { | |||
this.currentIndex = index | |||
this.$refs.actionSheet.open(); | |||
}, | |||
//用户选择了图片操作选项 | |||
selectImageSheet(imageSheet) { | |||
let { | |||
id | |||
} = imageSheet | |||
if (id) { | |||
this.deleteImageAsList() | |||
} else { | |||
this.viewImageAsList() | |||
} | |||
}, | |||
//查看图片 | |||
viewImageAsList() { | |||
this.$utils.previewImage({ | |||
current: this.currentIndex, | |||
urls: this.form.images | |||
}) | |||
}, | |||
//删除图片 | |||
deleteImageAsList() { | |||
this.form.images = this.form.images.filter((_, index) => { | |||
return index != this.currentIndex | |||
}) | |||
}, | |||
//用户选择了楼栋 | |||
floorConfirm(floor) { | |||
this.form.building = floor.value[0].label | |||
}, | |||
//打开选择楼栋 | |||
floorPickerOpen() { | |||
this.$refs.floorPicker.open(); | |||
}, | |||
//用户选择了室号 | |||
roomConfirm(floor) { | |||
this.form.room = floor.value[0].label | |||
}, | |||
//打开选择室号 | |||
roomPickerOpen() { | |||
this.$refs.roomPicker.open(); | |||
}, | |||
//提交报修 | |||
submitRepair() { | |||
console.log(this.form); | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.bx { | |||
width: 96%; | |||
margin: 0rpx auto; | |||
} | |||
.repair-title { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100rpx; | |||
padding-top: 100rpx; | |||
} | |||
.repair-title text { | |||
font-size: 40rpx; | |||
font-weight: bold; | |||
height: 70rpx; | |||
border-bottom: 8rpx solid #3c9cff; | |||
} | |||
.image-list { | |||
width: 100%; | |||
display: flex; | |||
flex-wrap: wrap; | |||
padding-top: 20rpx; | |||
} | |||
.image-item, | |||
.upload { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 24%; | |||
height: 174rpx; | |||
background: #f8f8f8; | |||
margin-left: 1%; | |||
border-radius: 15rpx; | |||
overflow: hidden; | |||
margin-bottom: 20rpx; | |||
} | |||
.image-item image { | |||
width: 100%; | |||
} | |||
</style> |
@ -0,0 +1,175 @@ | |||
<template> | |||
<view class="repairList reserveSpace"> | |||
<view class="tab"> | |||
<uv-tabs :list="list" lineWidth="60" lineHeight="10" @click="selectTag"></uv-tabs> | |||
</view> | |||
<view class="repairList-main"> | |||
<view v-for="item in 10" class="repairItem"> | |||
<view class="repairMain"> | |||
<!-- <view class="userName">用户名</view> --> | |||
<view class="build"> | |||
<view> | |||
<text style="margin-right: 10rpx;">楼栋:楼栋1</text> | |||
<text>室号:A1001</text> | |||
</view> | |||
<text style="font-size: 26rpx;">2024-12-12</text> | |||
</view> | |||
<view class="desc"> | |||
近期,我所在的学生宿舍楼X栋XXX室遇到了一个亟需解决的问题,特此提交报修申请。具体故障为:宿舍内卫生间水龙头出现持续滴漏现象,已持续多日,不仅造成了水资源的浪费,还影响了寝室的日常使用和休息环境。夜间滴水声尤为明显,干扰了同学们的睡眠质量。我们初步检查,未能自行解决,判断可能是内部密封件老化或松动所致。为尽快恢复宿舍正常生活环境,恳请学校后勤部门能尽快安排专业维修人员前来检查并修复,我们将积极配合维修工作,确保宿舍设施尽快恢复正常使用。感谢学校对我们学习生活环境的关心与支持! | |||
</view> | |||
<view class="repairImages"> | |||
<view v-for="(item,index) in urls" :key="index" class="image-item"> | |||
<image @click="viewImageAsList(index)" :src="item" mode="widthFix"></image> | |||
</view> | |||
</view> | |||
<view class="btns"> | |||
<view @click="toReject" class="btn">驳回</view> | |||
<view @click="toFinish" class="btn">结单</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
urls: [ | |||
'http://www.mxqih.top:666/logo.png', | |||
'http://www.mxqih.top:666/logo.png', | |||
'http://www.mxqih.top:666/logo.png' | |||
], | |||
list: [{ | |||
name: '待完成', | |||
}, { | |||
name: '已完成', | |||
}], | |||
current: 0, | |||
currentIndex : 0 | |||
} | |||
}, | |||
methods: { | |||
//跳转驳回 | |||
toReject() { | |||
uni.navigateTo({ | |||
url: '/pages/reject/reject' | |||
}) | |||
}, | |||
//跳转结单页面 | |||
toFinish() { | |||
uni.navigateTo({ | |||
url: '/pages/finish/finish' | |||
}) | |||
}, | |||
//查看图片 | |||
viewImageAsList(index) { | |||
this.currentIndex = index | |||
this.$utils.previewImage({ | |||
current: this.currentIndex, | |||
urls: this.urls | |||
}) | |||
}, | |||
//选择了顶部的标签 | |||
selectTag(tag){ | |||
console.log(tag); | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.repairList{ | |||
background: #f8f8f8; | |||
} | |||
.tab{ | |||
display: flex; | |||
align-items: center; | |||
height: 80rpx; | |||
background: white; | |||
margin-bottom: 20rpx; | |||
} | |||
.repairList-main { | |||
min-height: 100vh; | |||
} | |||
.repairItem { | |||
display: flex; | |||
background: white; | |||
width: 96%; | |||
margin: 0rpx auto; | |||
border-radius: 20rpx; | |||
margin-bottom: 20rpx; | |||
} | |||
.repairMain { | |||
width: 100%; | |||
box-sizing: border-box; | |||
padding-left: 20rpx; | |||
} | |||
/* | |||
.userName { | |||
font-size: 32rpx; | |||
margin: 10rpx 0rpx; | |||
} */ | |||
.build { | |||
display: flex; | |||
justify-content: space-between; | |||
font-size: 28rpx; | |||
margin: 20rpx 0rpx; | |||
} | |||
.desc { | |||
height: 200rpx; | |||
overflow-y: scroll; | |||
margin-bottom: 20rpx; | |||
} | |||
.repairImages { | |||
display: flex; | |||
flex-wrap: wrap; | |||
margin: 10rpx 0rpx; | |||
} | |||
.image-item { | |||
width: 24%; | |||
margin-left: 1%; | |||
height: 180rpx; | |||
overflow: hidden; | |||
} | |||
.image-item image { | |||
width: 100%; | |||
} | |||
.btns { | |||
margin: 20rpx 0rpx; | |||
display: flex; | |||
justify-content: flex-end; | |||
} | |||
.btn { | |||
width: 200rpx; | |||
height: 50rpx; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 50rpx; | |||
margin-left: 15rpx; | |||
font-size: 30rpx; | |||
color: white; | |||
background: #f9ae3d; | |||
} | |||
.btn:nth-child(2) { | |||
background: #3c9cff; | |||
} | |||
</style> |
@ -0,0 +1,42 @@ | |||
## 2.0.10(2024-06-07) | |||
- 优化 uni-app x 中,size 属性的类型 | |||
## 2.0.9(2024-01-12) | |||
fix: 修复图标大小默认值错误的问题 | |||
## 2.0.8(2023-12-14) | |||
- 修复 项目未使用 ts 情况下,打包报错的bug | |||
## 2.0.7(2023-12-14) | |||
- 修复 size 属性为 string 时,不加单位导致尺寸异常的bug | |||
## 2.0.6(2023-12-11) | |||
- 优化 兼容老版本icon类型,如 top ,bottom 等 | |||
## 2.0.5(2023-12-11) | |||
- 优化 兼容老版本icon类型,如 top ,bottom 等 | |||
## 2.0.4(2023-12-06) | |||
- 优化 uni-app x 下示例项目图标排序 | |||
## 2.0.3(2023-12-06) | |||
- 修复 nvue下引入组件报错的bug | |||
## 2.0.2(2023-12-05) | |||
-优化 size 属性支持单位 | |||
## 2.0.1(2023-12-05) | |||
- 新增 uni-app x 支持定义图标 | |||
## 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目录规范 |
@ -0,0 +1,91 @@ | |||
<template> | |||
<text class="uni-icons" :style="styleObj"> | |||
<slot>{{unicode}}</slot> | |||
</text> | |||
</template> | |||
<script> | |||
import { fontData, IconsDataItem } from './uniicons_file' | |||
/** | |||
* Icons 图标 | |||
* @description 用于展示 icon 图标 | |||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 | |||
* @property {Number,String} size 图标大小 | |||
* @property {String} type 图标图案,参考示例 | |||
* @property {String} color 图标颜色 | |||
* @property {String} customPrefix 自定义图标 | |||
* @event {Function} click 点击 Icon 触发事件 | |||
*/ | |||
export default { | |||
name: "uni-icons", | |||
props: { | |||
type: { | |||
type: String, | |||
default: '' | |||
}, | |||
color: { | |||
type: String, | |||
default: '#333333' | |||
}, | |||
size: { | |||
type: [Number, String], | |||
default: 16 | |||
}, | |||
fontFamily: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
unicode() : string { | |||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type }) | |||
if (codes !== null) { | |||
return codes.unicode | |||
} | |||
return '' | |||
}, | |||
iconSize() : string { | |||
const size = this.size | |||
if (typeof size == 'string') { | |||
const reg = /^[0-9]*$/g | |||
return reg.test(size as string) ? '' + size + 'px' : '' + size; | |||
// return '' + this.size | |||
} | |||
return this.getFontSize(size as number) | |||
}, | |||
styleObj() : UTSJSONObject { | |||
if (this.fontFamily !== '') { | |||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily } | |||
} | |||
return { color: this.color, fontSize: this.iconSize } | |||
} | |||
}, | |||
created() { }, | |||
methods: { | |||
/** | |||
* 字体大小 | |||
*/ | |||
getFontSize(size : number) : string { | |||
return size + 'px'; | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
@font-face { | |||
font-family: UniIconsFontFamily; | |||
src: url('./uniicons.ttf'); | |||
} | |||
.uni-icons { | |||
font-family: UniIconsFontFamily; | |||
font-size: 18px; | |||
font-style: normal; | |||
color: #333; | |||
} | |||
</style> |
@ -0,0 +1,110 @@ | |||
<template> | |||
<!-- #ifdef APP-NVUE --> | |||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text> | |||
<!-- #endif --> | |||
<!-- #ifndef APP-NVUE --> | |||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"> | |||
<slot></slot> | |||
</text> | |||
<!-- #endif --> | |||
</template> | |||
<script> | |||
import { fontData } from './uniicons_file_vue.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: '' | |||
}, | |||
fontFamily: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
data() { | |||
return { | |||
icons: fontData | |||
} | |||
}, | |||
computed: { | |||
unicode() { | |||
let code = this.icons.find(v => v.font_class === this.type) | |||
if (code) { | |||
return code.unicode | |||
} | |||
return '' | |||
}, | |||
iconSize() { | |||
return getVal(this.size) | |||
}, | |||
styleObj() { | |||
if (this.fontFamily !== '') { | |||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};` | |||
} | |||
return `color: ${this.color}; font-size: ${this.iconSize};` | |||
} | |||
}, | |||
methods: { | |||
_onClick() { | |||
this.$emit('click') | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss"> | |||
/* #ifndef APP-NVUE */ | |||
@import './uniicons.css'; | |||
@font-face { | |||
font-family: uniicons; | |||
src: url('./uniicons.ttf'); | |||
} | |||
/* #endif */ | |||
.uni-icons { | |||
font-family: uniicons; | |||
text-decoration: none; | |||
text-align: center; | |||
} | |||
</style> |
@ -0,0 +1,664 @@ | |||
.uniui-cart-filled:before { | |||
content: "\e6d0"; | |||
} | |||
.uniui-gift-filled:before { | |||
content: "\e6c4"; | |||
} | |||
.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-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-arrowthinleft:before { | |||
content: "\e6d2"; | |||
} | |||
.uniui-arrowthinup:before { | |||
content: "\e6d3"; | |||
} | |||
.uniui-arrowthindown:before { | |||
content: "\e6d4"; | |||
} | |||
.uniui-back:before { | |||
content: "\e6b9"; | |||
} | |||
.uniui-forward:before { | |||
content: "\e6ba"; | |||
} | |||
.uniui-arrow-right:before { | |||
content: "\e6bb"; | |||
} | |||
.uniui-arrow-left:before { | |||
content: "\e6bc"; | |||
} | |||
.uniui-arrow-up:before { | |||
content: "\e6bd"; | |||
} | |||
.uniui-arrow-down:before { | |||
content: "\e6be"; | |||
} | |||
.uniui-arrowthinright:before { | |||
content: "\e6d1"; | |||
} | |||
.uniui-down:before { | |||
content: "\e6b8"; | |||
} | |||
.uniui-bottom:before { | |||
content: "\e6b8"; | |||
} | |||
.uniui-arrowright:before { | |||
content: "\e6d5"; | |||
} | |||
.uniui-right:before { | |||
content: "\e6b5"; | |||
} | |||
.uniui-up:before { | |||
content: "\e6b6"; | |||
} | |||
.uniui-top:before { | |||
content: "\e6b6"; | |||
} | |||
.uniui-left:before { | |||
content: "\e6b7"; | |||
} | |||
.uniui-arrowup:before { | |||
content: "\e6d6"; | |||
} | |||
.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-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"; | |||
} |
@ -0,0 +1,664 @@ | |||
export type IconsData = { | |||
id : string | |||
name : string | |||
font_family : string | |||
css_prefix_text : string | |||
description : string | |||
glyphs : Array<IconsDataItem> | |||
} | |||
export type IconsDataItem = { | |||
font_class : string | |||
unicode : string | |||
} | |||
export const fontData = [ | |||
{ | |||
"font_class": "arrow-down", | |||
"unicode": "\ue6be" | |||
}, | |||
{ | |||
"font_class": "arrow-left", | |||
"unicode": "\ue6bc" | |||
}, | |||
{ | |||
"font_class": "arrow-right", | |||
"unicode": "\ue6bb" | |||
}, | |||
{ | |||
"font_class": "arrow-up", | |||
"unicode": "\ue6bd" | |||
}, | |||
{ | |||
"font_class": "auth", | |||
"unicode": "\ue6ab" | |||
}, | |||
{ | |||
"font_class": "auth-filled", | |||
"unicode": "\ue6cc" | |||
}, | |||
{ | |||
"font_class": "back", | |||
"unicode": "\ue6b9" | |||
}, | |||
{ | |||
"font_class": "bars", | |||
"unicode": "\ue627" | |||
}, | |||
{ | |||
"font_class": "calendar", | |||
"unicode": "\ue6a0" | |||
}, | |||
{ | |||
"font_class": "calendar-filled", | |||
"unicode": "\ue6c0" | |||
}, | |||
{ | |||
"font_class": "camera", | |||
"unicode": "\ue65a" | |||
}, | |||
{ | |||
"font_class": "camera-filled", | |||
"unicode": "\ue658" | |||
}, | |||
{ | |||
"font_class": "cart", | |||
"unicode": "\ue631" | |||
}, | |||
{ | |||
"font_class": "cart-filled", | |||
"unicode": "\ue6d0" | |||
}, | |||
{ | |||
"font_class": "chat", | |||
"unicode": "\ue65d" | |||
}, | |||
{ | |||
"font_class": "chat-filled", | |||
"unicode": "\ue659" | |||
}, | |||
{ | |||
"font_class": "chatboxes", | |||
"unicode": "\ue696" | |||
}, | |||
{ | |||
"font_class": "chatboxes-filled", | |||
"unicode": "\ue692" | |||
}, | |||
{ | |||
"font_class": "chatbubble", | |||
"unicode": "\ue697" | |||
}, | |||
{ | |||
"font_class": "chatbubble-filled", | |||
"unicode": "\ue694" | |||
}, | |||
{ | |||
"font_class": "checkbox", | |||
"unicode": "\ue62b" | |||
}, | |||
{ | |||
"font_class": "checkbox-filled", | |||
"unicode": "\ue62c" | |||
}, | |||
{ | |||
"font_class": "checkmarkempty", | |||
"unicode": "\ue65c" | |||
}, | |||
{ | |||
"font_class": "circle", | |||
"unicode": "\ue65b" | |||
}, | |||
{ | |||
"font_class": "circle-filled", | |||
"unicode": "\ue65e" | |||
}, | |||
{ | |||
"font_class": "clear", | |||
"unicode": "\ue66d" | |||
}, | |||
{ | |||
"font_class": "close", | |||
"unicode": "\ue673" | |||
}, | |||
{ | |||
"font_class": "closeempty", | |||
"unicode": "\ue66c" | |||
}, | |||
{ | |||
"font_class": "cloud-download", | |||
"unicode": "\ue647" | |||
}, | |||
{ | |||
"font_class": "cloud-download-filled", | |||
"unicode": "\ue646" | |||
}, | |||
{ | |||
"font_class": "cloud-upload", | |||
"unicode": "\ue645" | |||
}, | |||
{ | |||
"font_class": "cloud-upload-filled", | |||
"unicode": "\ue648" | |||
}, | |||
{ | |||
"font_class": "color", | |||
"unicode": "\ue6cf" | |||
}, | |||
{ | |||
"font_class": "color-filled", | |||
"unicode": "\ue6c9" | |||
}, | |||
{ | |||
"font_class": "compose", | |||
"unicode": "\ue67f" | |||
}, | |||
{ | |||
"font_class": "contact", | |||
"unicode": "\ue693" | |||
}, | |||
{ | |||
"font_class": "contact-filled", | |||
"unicode": "\ue695" | |||
}, | |||
{ | |||
"font_class": "down", | |||
"unicode": "\ue6b8" | |||
}, | |||
{ | |||
"font_class": "bottom", | |||
"unicode": "\ue6b8" | |||
}, | |||
{ | |||
"font_class": "download", | |||
"unicode": "\ue68d" | |||
}, | |||
{ | |||
"font_class": "download-filled", | |||
"unicode": "\ue681" | |||
}, | |||
{ | |||
"font_class": "email", | |||
"unicode": "\ue69e" | |||
}, | |||
{ | |||
"font_class": "email-filled", | |||
"unicode": "\ue69a" | |||
}, | |||
{ | |||
"font_class": "eye", | |||
"unicode": "\ue651" | |||
}, | |||
{ | |||
"font_class": "eye-filled", | |||
"unicode": "\ue66a" | |||
}, | |||
{ | |||
"font_class": "eye-slash", | |||
"unicode": "\ue6b3" | |||
}, | |||
{ | |||
"font_class": "eye-slash-filled", | |||
"unicode": "\ue6b4" | |||
}, | |||
{ | |||
"font_class": "fire", | |||
"unicode": "\ue6a1" | |||
}, | |||
{ | |||
"font_class": "fire-filled", | |||
"unicode": "\ue6c5" | |||
}, | |||
{ | |||
"font_class": "flag", | |||
"unicode": "\ue65f" | |||
}, | |||
{ | |||
"font_class": "flag-filled", | |||
"unicode": "\ue660" | |||
}, | |||
{ | |||
"font_class": "folder-add", | |||
"unicode": "\ue6a9" | |||
}, | |||
{ | |||
"font_class": "folder-add-filled", | |||
"unicode": "\ue6c8" | |||
}, | |||
{ | |||
"font_class": "font", | |||
"unicode": "\ue6a3" | |||
}, | |||
{ | |||
"font_class": "forward", | |||
"unicode": "\ue6ba" | |||
}, | |||
{ | |||
"font_class": "gear", | |||
"unicode": "\ue664" | |||
}, | |||
{ | |||
"font_class": "gear-filled", | |||
"unicode": "\ue661" | |||
}, | |||
{ | |||
"font_class": "gift", | |||
"unicode": "\ue6a4" | |||
}, | |||
{ | |||
"font_class": "gift-filled", | |||
"unicode": "\ue6c4" | |||
}, | |||
{ | |||
"font_class": "hand-down", | |||
"unicode": "\ue63d" | |||
}, | |||
{ | |||
"font_class": "hand-down-filled", | |||
"unicode": "\ue63c" | |||
}, | |||
{ | |||
"font_class": "hand-up", | |||
"unicode": "\ue63f" | |||
}, | |||
{ | |||
"font_class": "hand-up-filled", | |||
"unicode": "\ue63e" | |||
}, | |||
{ | |||
"font_class": "headphones", | |||
"unicode": "\ue630" | |||
}, | |||
{ | |||
"font_class": "heart", | |||
"unicode": "\ue639" | |||
}, | |||
{ | |||
"font_class": "heart-filled", | |||
"unicode": "\ue641" | |||
}, | |||
{ | |||
"font_class": "help", | |||
"unicode": "\ue679" | |||
}, | |||
{ | |||
"font_class": "help-filled", | |||
"unicode": "\ue674" | |||
}, | |||
{ | |||
"font_class": "home", | |||
"unicode": "\ue662" | |||
}, | |||
{ | |||
"font_class": "home-filled", | |||
"unicode": "\ue663" | |||
}, | |||
{ | |||
"font_class": "image", | |||
"unicode": "\ue670" | |||
}, | |||
{ | |||
"font_class": "image-filled", | |||
"unicode": "\ue678" | |||
}, | |||
{ | |||
"font_class": "images", | |||
"unicode": "\ue650" | |||
}, | |||
{ | |||
"font_class": "images-filled", | |||
"unicode": "\ue64b" | |||
}, | |||
{ | |||
"font_class": "info", | |||
"unicode": "\ue669" | |||
}, | |||
{ | |||
"font_class": "info-filled", | |||
"unicode": "\ue649" | |||
}, | |||
{ | |||
"font_class": "left", | |||
"unicode": "\ue6b7" | |||
}, | |||
{ | |||
"font_class": "link", | |||
"unicode": "\ue6a5" | |||
}, | |||
{ | |||
"font_class": "list", | |||
"unicode": "\ue644" | |||
}, | |||
{ | |||
"font_class": "location", | |||
"unicode": "\ue6ae" | |||
}, | |||
{ | |||
"font_class": "location-filled", | |||
"unicode": "\ue6af" | |||
}, | |||
{ | |||
"font_class": "locked", | |||
"unicode": "\ue66b" | |||
}, | |||
{ | |||
"font_class": "locked-filled", | |||
"unicode": "\ue668" | |||
}, | |||
{ | |||
"font_class": "loop", | |||
"unicode": "\ue633" | |||
}, | |||
{ | |||
"font_class": "mail-open", | |||
"unicode": "\ue643" | |||
}, | |||
{ | |||
"font_class": "mail-open-filled", | |||
"unicode": "\ue63a" | |||
}, | |||
{ | |||
"font_class": "map", | |||
"unicode": "\ue667" | |||
}, | |||
{ | |||
"font_class": "map-filled", | |||
"unicode": "\ue666" | |||
}, | |||
{ | |||
"font_class": "map-pin", | |||
"unicode": "\ue6ad" | |||
}, | |||
{ | |||
"font_class": "map-pin-ellipse", | |||
"unicode": "\ue6ac" | |||
}, | |||
{ | |||
"font_class": "medal", | |||
"unicode": "\ue6a2" | |||
}, | |||
{ | |||
"font_class": "medal-filled", | |||
"unicode": "\ue6c3" | |||
}, | |||
{ | |||
"font_class": "mic", | |||
"unicode": "\ue671" | |||
}, | |||
{ | |||
"font_class": "mic-filled", | |||
"unicode": "\ue677" | |||
}, | |||
{ | |||
"font_class": "micoff", | |||
"unicode": "\ue67e" | |||
}, | |||
{ | |||
"font_class": "micoff-filled", | |||
"unicode": "\ue6b0" | |||
}, | |||
{ | |||
"font_class": "minus", | |||
"unicode": "\ue66f" | |||
}, | |||
{ | |||
"font_class": "minus-filled", | |||
"unicode": "\ue67d" | |||
}, | |||
{ | |||
"font_class": "more", | |||
"unicode": "\ue64d" | |||
}, | |||
{ | |||
"font_class": "more-filled", | |||
"unicode": "\ue64e" | |||
}, | |||
{ | |||
"font_class": "navigate", | |||
"unicode": "\ue66e" | |||
}, | |||
{ | |||
"font_class": "navigate-filled", | |||
"unicode": "\ue67a" | |||
}, | |||
{ | |||
"font_class": "notification", | |||
"unicode": "\ue6a6" | |||
}, | |||
{ | |||
"font_class": "notification-filled", | |||
"unicode": "\ue6c1" | |||
}, | |||
{ | |||
"font_class": "paperclip", | |||
"unicode": "\ue652" | |||
}, | |||
{ | |||
"font_class": "paperplane", | |||
"unicode": "\ue672" | |||
}, | |||
{ | |||
"font_class": "paperplane-filled", | |||
"unicode": "\ue675" | |||
}, | |||
{ | |||
"font_class": "person", | |||
"unicode": "\ue699" | |||
}, | |||
{ | |||
"font_class": "person-filled", | |||
"unicode": "\ue69d" | |||
}, | |||
{ | |||
"font_class": "personadd", | |||
"unicode": "\ue69f" | |||
}, | |||
{ | |||
"font_class": "personadd-filled", | |||
"unicode": "\ue698" | |||
}, | |||
{ | |||
"font_class": "personadd-filled-copy", | |||
"unicode": "\ue6d1" | |||
}, | |||
{ | |||
"font_class": "phone", | |||
"unicode": "\ue69c" | |||
}, | |||
{ | |||
"font_class": "phone-filled", | |||
"unicode": "\ue69b" | |||
}, | |||
{ | |||
"font_class": "plus", | |||
"unicode": "\ue676" | |||
}, | |||
{ | |||
"font_class": "plus-filled", | |||
"unicode": "\ue6c7" | |||
}, | |||
{ | |||
"font_class": "plusempty", | |||
"unicode": "\ue67b" | |||
}, | |||
{ | |||
"font_class": "pulldown", | |||
"unicode": "\ue632" | |||
}, | |||
{ | |||
"font_class": "pyq", | |||
"unicode": "\ue682" | |||
}, | |||
{ | |||
"font_class": "qq", | |||
"unicode": "\ue680" | |||
}, | |||
{ | |||
"font_class": "redo", | |||
"unicode": "\ue64a" | |||
}, | |||
{ | |||
"font_class": "redo-filled", | |||
"unicode": "\ue655" | |||
}, | |||
{ | |||
"font_class": "refresh", | |||
"unicode": "\ue657" | |||
}, | |||
{ | |||
"font_class": "refresh-filled", | |||
"unicode": "\ue656" | |||
}, | |||
{ | |||
"font_class": "refreshempty", | |||
"unicode": "\ue6bf" | |||
}, | |||
{ | |||
"font_class": "reload", | |||
"unicode": "\ue6b2" | |||
}, | |||
{ | |||
"font_class": "right", | |||
"unicode": "\ue6b5" | |||
}, | |||
{ | |||
"font_class": "scan", | |||
"unicode": "\ue62a" | |||
}, | |||
{ | |||
"font_class": "search", | |||
"unicode": "\ue654" | |||
}, | |||
{ | |||
"font_class": "settings", | |||
"unicode": "\ue653" | |||
}, | |||
{ | |||
"font_class": "settings-filled", | |||
"unicode": "\ue6ce" | |||
}, | |||
{ | |||
"font_class": "shop", | |||
"unicode": "\ue62f" | |||
}, | |||
{ | |||
"font_class": "shop-filled", | |||
"unicode": "\ue6cd" | |||
}, | |||
{ | |||
"font_class": "smallcircle", | |||
"unicode": "\ue67c" | |||
}, | |||
{ | |||
"font_class": "smallcircle-filled", | |||
"unicode": "\ue665" | |||
}, | |||
{ | |||
"font_class": "sound", | |||
"unicode": "\ue684" | |||
}, | |||
{ | |||
"font_class": "sound-filled", | |||
"unicode": "\ue686" | |||
}, | |||
{ | |||
"font_class": "spinner-cycle", | |||
"unicode": "\ue68a" | |||
}, | |||
{ | |||
"font_class": "staff", | |||
"unicode": "\ue6a7" | |||
}, | |||
{ | |||
"font_class": "staff-filled", | |||
"unicode": "\ue6cb" | |||
}, | |||
{ | |||
"font_class": "star", | |||
"unicode": "\ue688" | |||
}, | |||
{ | |||
"font_class": "star-filled", | |||
"unicode": "\ue68f" | |||
}, | |||
{ | |||
"font_class": "starhalf", | |||
"unicode": "\ue683" | |||
}, | |||
{ | |||
"font_class": "trash", | |||
"unicode": "\ue687" | |||
}, | |||
{ | |||
"font_class": "trash-filled", | |||
"unicode": "\ue685" | |||
}, | |||
{ | |||
"font_class": "tune", | |||
"unicode": "\ue6aa" | |||
}, | |||
{ | |||
"font_class": "tune-filled", | |||
"unicode": "\ue6ca" | |||
}, | |||
{ | |||
"font_class": "undo", | |||
"unicode": "\ue64f" | |||
}, | |||
{ | |||
"font_class": "undo-filled", | |||
"unicode": "\ue64c" | |||
}, | |||
{ | |||
"font_class": "up", | |||
"unicode": "\ue6b6" | |||
}, | |||
{ | |||
"font_class": "top", | |||
"unicode": "\ue6b6" | |||
}, | |||
{ | |||
"font_class": "upload", | |||
"unicode": "\ue690" | |||
}, | |||
{ | |||
"font_class": "upload-filled", | |||
"unicode": "\ue68e" | |||
}, | |||
{ | |||
"font_class": "videocam", | |||
"unicode": "\ue68c" | |||
}, | |||
{ | |||
"font_class": "videocam-filled", | |||
"unicode": "\ue689" | |||
}, | |||
{ | |||
"font_class": "vip", | |||
"unicode": "\ue6a8" | |||
}, | |||
{ | |||
"font_class": "vip-filled", | |||
"unicode": "\ue6c6" | |||
}, | |||
{ | |||
"font_class": "wallet", | |||
"unicode": "\ue6b1" | |||
}, | |||
{ | |||
"font_class": "wallet-filled", | |||
"unicode": "\ue6c2" | |||
}, | |||
{ | |||
"font_class": "weibo", | |||
"unicode": "\ue68b" | |||
}, | |||
{ | |||
"font_class": "weixin", | |||
"unicode": "\ue691" | |||
} | |||
] as IconsDataItem[] | |||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson) |
@ -0,0 +1,649 @@ | |||
export const fontData = [ | |||
{ | |||
"font_class": "arrow-down", | |||
"unicode": "\ue6be" | |||
}, | |||
{ | |||
"font_class": "arrow-left", | |||
"unicode": "\ue6bc" | |||
}, | |||
{ | |||
"font_class": "arrow-right", | |||
"unicode": "\ue6bb" | |||
}, | |||
{ | |||
"font_class": "arrow-up", | |||
"unicode": "\ue6bd" | |||
}, | |||
{ | |||
"font_class": "auth", | |||
"unicode": "\ue6ab" | |||
}, | |||
{ | |||
"font_class": "auth-filled", | |||
"unicode": "\ue6cc" | |||
}, | |||
{ | |||
"font_class": "back", | |||
"unicode": "\ue6b9" | |||
}, | |||
{ | |||
"font_class": "bars", | |||
"unicode": "\ue627" | |||
}, | |||
{ | |||
"font_class": "calendar", | |||
"unicode": "\ue6a0" | |||
}, | |||
{ | |||
"font_class": "calendar-filled", | |||
"unicode": "\ue6c0" | |||
}, | |||
{ | |||
"font_class": "camera", | |||
"unicode": "\ue65a" | |||
}, | |||
{ | |||
"font_class": "camera-filled", | |||
"unicode": "\ue658" | |||
}, | |||
{ | |||
"font_class": "cart", | |||
"unicode": "\ue631" | |||
}, | |||
{ | |||
"font_class": "cart-filled", | |||
"unicode": "\ue6d0" | |||
}, | |||
{ | |||
"font_class": "chat", | |||
"unicode": "\ue65d" | |||
}, | |||
{ | |||
"font_class": "chat-filled", | |||
"unicode": "\ue659" | |||
}, | |||
{ | |||
"font_class": "chatboxes", | |||
"unicode": "\ue696" | |||
}, | |||
{ | |||
"font_class": "chatboxes-filled", | |||
"unicode": "\ue692" | |||
}, | |||
{ | |||
"font_class": "chatbubble", | |||
"unicode": "\ue697" | |||
}, | |||
{ | |||
"font_class": "chatbubble-filled", | |||
"unicode": "\ue694" | |||
}, | |||
{ | |||
"font_class": "checkbox", | |||
"unicode": "\ue62b" | |||
}, | |||
{ | |||
"font_class": "checkbox-filled", | |||
"unicode": "\ue62c" | |||
}, | |||
{ | |||
"font_class": "checkmarkempty", | |||
"unicode": "\ue65c" | |||
}, | |||
{ | |||
"font_class": "circle", | |||
"unicode": "\ue65b" | |||
}, | |||
{ | |||
"font_class": "circle-filled", | |||
"unicode": "\ue65e" | |||
}, | |||
{ | |||
"font_class": "clear", | |||
"unicode": "\ue66d" | |||
}, | |||
{ | |||
"font_class": "close", | |||
"unicode": "\ue673" | |||
}, | |||
{ | |||
"font_class": "closeempty", | |||
"unicode": "\ue66c" | |||
}, | |||
{ | |||
"font_class": "cloud-download", | |||
"unicode": "\ue647" | |||
}, | |||
{ | |||
"font_class": "cloud-download-filled", | |||
"unicode": "\ue646" | |||
}, | |||
{ | |||
"font_class": "cloud-upload", | |||
"unicode": "\ue645" | |||
}, | |||
{ | |||
"font_class": "cloud-upload-filled", | |||
"unicode": "\ue648" | |||
}, | |||
{ | |||
"font_class": "color", | |||
"unicode": "\ue6cf" | |||
}, | |||
{ | |||
"font_class": "color-filled", | |||
"unicode": "\ue6c9" | |||
}, | |||
{ | |||
"font_class": "compose", | |||
"unicode": "\ue67f" | |||
}, | |||
{ | |||
"font_class": "contact", | |||
"unicode": "\ue693" | |||
}, | |||
{ | |||
"font_class": "contact-filled", | |||
"unicode": "\ue695" | |||
}, | |||
{ | |||
"font_class": "down", | |||
"unicode": "\ue6b8" | |||
}, | |||
{ | |||
"font_class": "bottom", | |||
"unicode": "\ue6b8" | |||
}, | |||
{ | |||
"font_class": "download", | |||
"unicode": "\ue68d" | |||
}, | |||
{ | |||
"font_class": "download-filled", | |||
"unicode": "\ue681" | |||
}, | |||
{ | |||
"font_class": "email", | |||
"unicode": "\ue69e" | |||
}, | |||
{ | |||
"font_class": "email-filled", | |||
"unicode": "\ue69a" | |||
}, | |||
{ | |||
"font_class": "eye", | |||
"unicode": "\ue651" | |||
}, | |||
{ | |||
"font_class": "eye-filled", | |||
"unicode": "\ue66a" | |||
}, | |||
{ | |||
"font_class": "eye-slash", | |||
"unicode": "\ue6b3" | |||
}, | |||
{ | |||
"font_class": "eye-slash-filled", | |||
"unicode": "\ue6b4" | |||
}, | |||
{ | |||
"font_class": "fire", | |||
"unicode": "\ue6a1" | |||
}, | |||
{ | |||
"font_class": "fire-filled", | |||
"unicode": "\ue6c5" | |||
}, | |||
{ | |||
"font_class": "flag", | |||
"unicode": "\ue65f" | |||
}, | |||
{ | |||
"font_class": "flag-filled", | |||
"unicode": "\ue660" | |||
}, | |||
{ | |||
"font_class": "folder-add", | |||
"unicode": "\ue6a9" | |||
}, | |||
{ | |||
"font_class": "folder-add-filled", | |||
"unicode": "\ue6c8" | |||
}, | |||
{ | |||
"font_class": "font", | |||
"unicode": "\ue6a3" | |||
}, | |||
{ | |||
"font_class": "forward", | |||
"unicode": "\ue6ba" | |||
}, | |||
{ | |||
"font_class": "gear", | |||
"unicode": "\ue664" | |||
}, | |||
{ | |||
"font_class": "gear-filled", | |||
"unicode": "\ue661" | |||
}, | |||
{ | |||
"font_class": "gift", | |||
"unicode": "\ue6a4" | |||
}, | |||
{ | |||
"font_class": "gift-filled", | |||
"unicode": "\ue6c4" | |||
}, | |||
{ | |||
"font_class": "hand-down", | |||
"unicode": "\ue63d" | |||
}, | |||
{ | |||
"font_class": "hand-down-filled", | |||
"unicode": "\ue63c" | |||
}, | |||
{ | |||
"font_class": "hand-up", | |||
"unicode": "\ue63f" | |||
}, | |||
{ | |||
"font_class": "hand-up-filled", | |||
"unicode": "\ue63e" | |||
}, | |||
{ | |||
"font_class": "headphones", | |||
"unicode": "\ue630" | |||
}, | |||
{ | |||
"font_class": "heart", | |||
"unicode": "\ue639" | |||
}, | |||
{ | |||
"font_class": "heart-filled", | |||
"unicode": "\ue641" | |||
}, | |||
{ | |||
"font_class": "help", | |||
"unicode": "\ue679" | |||
}, | |||
{ | |||
"font_class": "help-filled", | |||
"unicode": "\ue674" | |||
}, | |||
{ | |||
"font_class": "home", | |||
"unicode": "\ue662" | |||
}, | |||
{ | |||
"font_class": "home-filled", | |||
"unicode": "\ue663" | |||
}, | |||
{ | |||
"font_class": "image", | |||
"unicode": "\ue670" | |||
}, | |||
{ | |||
"font_class": "image-filled", | |||
"unicode": "\ue678" | |||
}, | |||
{ | |||
"font_class": "images", | |||
"unicode": "\ue650" | |||
}, | |||
{ | |||
"font_class": "images-filled", | |||
"unicode": "\ue64b" | |||
}, | |||
{ | |||
"font_class": "info", | |||
"unicode": "\ue669" | |||
}, | |||
{ | |||
"font_class": "info-filled", | |||
"unicode": "\ue649" | |||
}, | |||
{ | |||
"font_class": "left", | |||
"unicode": "\ue6b7" | |||
}, | |||
{ | |||
"font_class": "link", | |||
"unicode": "\ue6a5" | |||
}, | |||
{ | |||
"font_class": "list", | |||
"unicode": "\ue644" | |||
}, | |||
{ | |||
"font_class": "location", | |||
"unicode": "\ue6ae" | |||
}, | |||
{ | |||
"font_class": "location-filled", | |||
"unicode": "\ue6af" | |||
}, | |||
{ | |||
"font_class": "locked", | |||
"unicode": "\ue66b" | |||
}, | |||
{ | |||
"font_class": "locked-filled", | |||
"unicode": "\ue668" | |||
}, | |||
{ | |||
"font_class": "loop", | |||
"unicode": "\ue633" | |||
}, | |||
{ | |||
"font_class": "mail-open", | |||
"unicode": "\ue643" | |||
}, | |||
{ | |||
"font_class": "mail-open-filled", | |||
"unicode": "\ue63a" | |||
}, | |||
{ | |||
"font_class": "map", | |||
"unicode": "\ue667" | |||
}, | |||
{ | |||
"font_class": "map-filled", | |||
"unicode": "\ue666" | |||
}, | |||
{ | |||
"font_class": "map-pin", | |||
"unicode": "\ue6ad" | |||
}, | |||
{ | |||
"font_class": "map-pin-ellipse", | |||
"unicode": "\ue6ac" | |||
}, | |||
{ | |||
"font_class": "medal", | |||
"unicode": "\ue6a2" | |||
}, | |||
{ | |||
"font_class": "medal-filled", | |||
"unicode": "\ue6c3" | |||
}, | |||
{ | |||
"font_class": "mic", | |||
"unicode": "\ue671" | |||
}, | |||
{ | |||
"font_class": "mic-filled", | |||
"unicode": "\ue677" | |||
}, | |||
{ | |||
"font_class": "micoff", | |||
"unicode": "\ue67e" | |||
}, | |||
{ | |||
"font_class": "micoff-filled", | |||
"unicode": "\ue6b0" | |||
}, | |||
{ | |||
"font_class": "minus", | |||
"unicode": "\ue66f" | |||
}, | |||
{ | |||
"font_class": "minus-filled", | |||
"unicode": "\ue67d" | |||
}, | |||
{ | |||
"font_class": "more", | |||
"unicode": "\ue64d" | |||
}, | |||
{ | |||
"font_class": "more-filled", | |||
"unicode": "\ue64e" | |||
}, | |||
{ | |||
"font_class": "navigate", | |||
"unicode": "\ue66e" | |||
}, | |||
{ | |||
"font_class": "navigate-filled", | |||
"unicode": "\ue67a" | |||
}, | |||
{ | |||
"font_class": "notification", | |||
"unicode": "\ue6a6" | |||
}, | |||
{ | |||
"font_class": "notification-filled", | |||
"unicode": "\ue6c1" | |||
}, | |||
{ | |||
"font_class": "paperclip", | |||
"unicode": "\ue652" | |||
}, | |||
{ | |||
"font_class": "paperplane", | |||
"unicode": "\ue672" | |||
}, | |||
{ | |||
"font_class": "paperplane-filled", | |||
"unicode": "\ue675" | |||
}, | |||
{ | |||
"font_class": "person", | |||
"unicode": "\ue699" | |||
}, | |||
{ | |||
"font_class": "person-filled", | |||
"unicode": "\ue69d" | |||
}, | |||
{ | |||
"font_class": "personadd", | |||
"unicode": "\ue69f" | |||
}, | |||
{ | |||
"font_class": "personadd-filled", | |||
"unicode": "\ue698" | |||
}, | |||
{ | |||
"font_class": "personadd-filled-copy", | |||
"unicode": "\ue6d1" | |||
}, | |||
{ | |||
"font_class": "phone", | |||
"unicode": "\ue69c" | |||
}, | |||
{ | |||
"font_class": "phone-filled", | |||
"unicode": "\ue69b" | |||
}, | |||
{ | |||
"font_class": "plus", | |||
"unicode": "\ue676" | |||
}, | |||
{ | |||
"font_class": "plus-filled", | |||
"unicode": "\ue6c7" | |||
}, | |||
{ | |||
"font_class": "plusempty", | |||
"unicode": "\ue67b" | |||
}, | |||
{ | |||
"font_class": "pulldown", | |||
"unicode": "\ue632" | |||
}, | |||
{ | |||
"font_class": "pyq", | |||
"unicode": "\ue682" | |||
}, | |||
{ | |||
"font_class": "qq", | |||
"unicode": "\ue680" | |||
}, | |||
{ | |||
"font_class": "redo", | |||
"unicode": "\ue64a" | |||
}, | |||
{ | |||
"font_class": "redo-filled", | |||
"unicode": "\ue655" | |||
}, | |||
{ | |||
"font_class": "refresh", | |||
"unicode": "\ue657" | |||
}, | |||
{ | |||
"font_class": "refresh-filled", | |||
"unicode": "\ue656" | |||
}, | |||
{ | |||
"font_class": "refreshempty", | |||
"unicode": "\ue6bf" | |||
}, | |||
{ | |||
"font_class": "reload", | |||
"unicode": "\ue6b2" | |||
}, | |||
{ | |||
"font_class": "right", | |||
"unicode": "\ue6b5" | |||
}, | |||
{ | |||
"font_class": "scan", | |||
"unicode": "\ue62a" | |||
}, | |||
{ | |||
"font_class": "search", | |||
"unicode": "\ue654" | |||
}, | |||
{ | |||
"font_class": "settings", | |||
"unicode": "\ue653" | |||
}, | |||
{ | |||
"font_class": "settings-filled", | |||
"unicode": "\ue6ce" | |||
}, | |||
{ | |||
"font_class": "shop", | |||
"unicode": "\ue62f" | |||
}, | |||
{ | |||
"font_class": "shop-filled", | |||
"unicode": "\ue6cd" | |||
}, | |||
{ | |||
"font_class": "smallcircle", | |||
"unicode": "\ue67c" | |||
}, | |||
{ | |||
"font_class": "smallcircle-filled", | |||
"unicode": "\ue665" | |||
}, | |||
{ | |||
"font_class": "sound", | |||
"unicode": "\ue684" | |||
}, | |||
{ | |||
"font_class": "sound-filled", | |||
"unicode": "\ue686" | |||
}, | |||
{ | |||
"font_class": "spinner-cycle", | |||
"unicode": "\ue68a" | |||
}, | |||
{ | |||
"font_class": "staff", | |||
"unicode": "\ue6a7" | |||
}, | |||
{ | |||
"font_class": "staff-filled", | |||
"unicode": "\ue6cb" | |||
}, | |||
{ | |||
"font_class": "star", | |||
"unicode": "\ue688" | |||
}, | |||
{ | |||
"font_class": "star-filled", | |||
"unicode": "\ue68f" | |||
}, | |||
{ | |||
"font_class": "starhalf", | |||
"unicode": "\ue683" | |||
}, | |||
{ | |||
"font_class": "trash", | |||
"unicode": "\ue687" | |||
}, | |||
{ | |||
"font_class": "trash-filled", | |||
"unicode": "\ue685" | |||
}, | |||
{ | |||
"font_class": "tune", | |||
"unicode": "\ue6aa" | |||
}, | |||
{ | |||
"font_class": "tune-filled", | |||
"unicode": "\ue6ca" | |||
}, | |||
{ | |||
"font_class": "undo", | |||
"unicode": "\ue64f" | |||
}, | |||
{ | |||
"font_class": "undo-filled", | |||
"unicode": "\ue64c" | |||
}, | |||
{ | |||
"font_class": "up", | |||
"unicode": "\ue6b6" | |||
}, | |||
{ | |||
"font_class": "top", | |||
"unicode": "\ue6b6" | |||
}, | |||
{ | |||
"font_class": "upload", | |||
"unicode": "\ue690" | |||
}, | |||
{ | |||
"font_class": "upload-filled", | |||
"unicode": "\ue68e" | |||
}, | |||
{ | |||
"font_class": "videocam", | |||
"unicode": "\ue68c" | |||
}, | |||
{ | |||
"font_class": "videocam-filled", | |||
"unicode": "\ue689" | |||
}, | |||
{ | |||
"font_class": "vip", | |||
"unicode": "\ue6a8" | |||
}, | |||
{ | |||
"font_class": "vip-filled", | |||
"unicode": "\ue6c6" | |||
}, | |||
{ | |||
"font_class": "wallet", | |||
"unicode": "\ue6b1" | |||
}, | |||
{ | |||
"font_class": "wallet-filled", | |||
"unicode": "\ue6c2" | |||
}, | |||
{ | |||
"font_class": "weibo", | |||
"unicode": "\ue68b" | |||
}, | |||
{ | |||
"font_class": "weixin", | |||
"unicode": "\ue691" | |||
} | |||
] | |||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson) |
@ -0,0 +1,89 @@ | |||
{ | |||
"id": "uni-icons", | |||
"displayName": "uni-icons 图标", | |||
"version": "2.0.10", | |||
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。", | |||
"keywords": [ | |||
"uni-ui", | |||
"uniui", | |||
"icon", | |||
"图标" | |||
], | |||
"repository": "https://github.com/dcloudio/uni-ui", | |||
"engines": { | |||
"HBuilderX": "^3.2.14" | |||
}, | |||
"directories": { | |||
"example": "../../temps/example_temps" | |||
}, | |||
"dcloudext": { | |||
"sale": { | |||
"regular": { | |||
"price": "0.00" | |||
}, | |||
"sourcecode": { | |||
"price": "0.00" | |||
} | |||
}, | |||
"contact": { | |||
"qq": "" | |||
}, | |||
"declaration": { | |||
"ads": "无", | |||
"data": "无", | |||
"permissions": "无" | |||
}, | |||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||
"type": "component-vue" | |||
}, | |||
"uni_modules": { | |||
"dependencies": ["uni-scss"], | |||
"encrypt": [], | |||
"platforms": { | |||
"cloud": { | |||
"tcb": "y", | |||
"aliyun": "y", | |||
"alipay": "n" | |||
}, | |||
"client": { | |||
"App": { | |||
"app-vue": "y", | |||
"app-nvue": "y", | |||
"app-uvue": "y" | |||
}, | |||
"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", | |||
"钉钉": "y", | |||
"快手": "y", | |||
"飞书": "y", | |||
"京东": "y" | |||
}, | |||
"快应用": { | |||
"华为": "y", | |||
"联盟": "y" | |||
}, | |||
"Vue": { | |||
"vue2": "y", | |||
"vue3": "y" | |||
} | |||
} | |||
} | |||
} | |||
} |
@ -0,0 +1,8 @@ | |||
## Icons 图标 | |||
> **组件名:uni-icons** | |||
> 代码块: `uIcons` | |||
用于展示 icons 图标 。 | |||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons) | |||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
@ -0,0 +1,8 @@ | |||
## 1.0.3(2022-01-21) | |||
- 优化 组件示例 | |||
## 1.0.2(2021-11-22) | |||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 | |||
## 1.0.1(2021-11-22) | |||
- 修复 vue3中scss语法兼容问题 | |||
## 1.0.0(2021-11-18) | |||
- init |
@ -0,0 +1 @@ | |||
@import './styles/index.scss'; |
@ -0,0 +1,82 @@ | |||
{ | |||
"id": "uni-scss", | |||
"displayName": "uni-scss 辅助样式", | |||
"version": "1.0.3", | |||
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。", | |||
"keywords": [ | |||
"uni-scss", | |||
"uni-ui", | |||
"辅助样式" | |||
], | |||
"repository": "https://github.com/dcloudio/uni-ui", | |||
"engines": { | |||
"HBuilderX": "^3.1.0" | |||
}, | |||
"dcloudext": { | |||
"category": [ | |||
"JS SDK", | |||
"通用 SDK" | |||
], | |||
"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": [], | |||
"encrypt": [], | |||
"platforms": { | |||
"cloud": { | |||
"tcb": "y", | |||
"aliyun": "y" | |||
}, | |||
"client": { | |||
"App": { | |||
"app-vue": "y", | |||
"app-nvue": "u" | |||
}, | |||
"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" | |||
}, | |||
"快应用": { | |||
"华为": "n", | |||
"联盟": "n" | |||
}, | |||
"Vue": { | |||
"vue2": "y", | |||
"vue3": "y" | |||
} | |||
} | |||
} | |||
} | |||
} |
@ -0,0 +1,4 @@ | |||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。 | |||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) | |||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
@ -0,0 +1,7 @@ | |||
@import './setting/_variables.scss'; | |||
@import './setting/_border.scss'; | |||
@import './setting/_color.scss'; | |||
@import './setting/_space.scss'; | |||
@import './setting/_radius.scss'; | |||
@import './setting/_text.scss'; | |||
@import './setting/_styles.scss'; |
@ -0,0 +1,3 @@ | |||
.uni-border { | |||
border: 1px $uni-border-1 solid; | |||
} |
@ -0,0 +1,66 @@ | |||
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐 | |||
// @mixin get-styles($k,$c) { | |||
// @if $k == size or $k == weight{ | |||
// font-#{$k}:#{$c} | |||
// }@else{ | |||
// #{$k}:#{$c} | |||
// } | |||
// } | |||
$uni-ui-color:( | |||
// 主色 | |||
primary: $uni-primary, | |||
primary-disable: $uni-primary-disable, | |||
primary-light: $uni-primary-light, | |||
// 辅助色 | |||
success: $uni-success, | |||
success-disable: $uni-success-disable, | |||
success-light: $uni-success-light, | |||
warning: $uni-warning, | |||
warning-disable: $uni-warning-disable, | |||
warning-light: $uni-warning-light, | |||
error: $uni-error, | |||
error-disable: $uni-error-disable, | |||
error-light: $uni-error-light, | |||
info: $uni-info, | |||
info-disable: $uni-info-disable, | |||
info-light: $uni-info-light, | |||
// 中性色 | |||
main-color: $uni-main-color, | |||
base-color: $uni-base-color, | |||
secondary-color: $uni-secondary-color, | |||
extra-color: $uni-extra-color, | |||
// 背景色 | |||
bg-color: $uni-bg-color, | |||
// 边框颜色 | |||
border-1: $uni-border-1, | |||
border-2: $uni-border-2, | |||
border-3: $uni-border-3, | |||
border-4: $uni-border-4, | |||
// 黑色 | |||
black:$uni-black, | |||
// 白色 | |||
white:$uni-white, | |||
// 透明 | |||
transparent:$uni-transparent | |||
) !default; | |||
@each $key, $child in $uni-ui-color { | |||
.uni-#{"" + $key} { | |||
color: $child; | |||
} | |||
.uni-#{"" + $key}-bg { | |||
background-color: $child; | |||
} | |||
} | |||
.uni-shadow-sm { | |||
box-shadow: $uni-shadow-sm; | |||
} | |||
.uni-shadow-base { | |||
box-shadow: $uni-shadow-base; | |||
} | |||
.uni-shadow-lg { | |||
box-shadow: $uni-shadow-lg; | |||
} | |||
.uni-mask { | |||
background-color:$uni-mask; | |||
} |
@ -0,0 +1,55 @@ | |||
@mixin radius($r,$d:null ,$important: false){ | |||
$radius-value:map-get($uni-radius, $r) if($important, !important, null); | |||
// Key exists within the $uni-radius variable | |||
@if (map-has-key($uni-radius, $r) and $d){ | |||
@if $d == t { | |||
border-top-left-radius:$radius-value; | |||
border-top-right-radius:$radius-value; | |||
}@else if $d == r { | |||
border-top-right-radius:$radius-value; | |||
border-bottom-right-radius:$radius-value; | |||
}@else if $d == b { | |||
border-bottom-left-radius:$radius-value; | |||
border-bottom-right-radius:$radius-value; | |||
}@else if $d == l { | |||
border-top-left-radius:$radius-value; | |||
border-bottom-left-radius:$radius-value; | |||
}@else if $d == tl { | |||
border-top-left-radius:$radius-value; | |||
}@else if $d == tr { | |||
border-top-right-radius:$radius-value; | |||
}@else if $d == br { | |||
border-bottom-right-radius:$radius-value; | |||
}@else if $d == bl { | |||
border-bottom-left-radius:$radius-value; | |||
} | |||
}@else{ | |||
border-radius:$radius-value; | |||
} | |||
} | |||
@each $key, $child in $uni-radius { | |||
@if($key){ | |||
.uni-radius-#{"" + $key} { | |||
@include radius($key) | |||
} | |||
}@else{ | |||
.uni-radius { | |||
@include radius($key) | |||
} | |||
} | |||
} | |||
@each $direction in t, r, b, l,tl, tr, br, bl { | |||
@each $key, $child in $uni-radius { | |||
@if($key){ | |||
.uni-radius-#{"" + $direction}-#{"" + $key} { | |||
@include radius($key,$direction,false) | |||
} | |||
}@else{ | |||
.uni-radius-#{$direction} { | |||
@include radius($key,$direction,false) | |||
} | |||
} | |||
} | |||
} |
@ -0,0 +1,56 @@ | |||
@mixin fn($space,$direction,$size,$n) { | |||
@if $n { | |||
#{$space}-#{$direction}: #{$size*$uni-space-root}px | |||
} @else { | |||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px | |||
} | |||
} | |||
@mixin get-styles($direction,$i,$space,$n){ | |||
@if $direction == t { | |||
@include fn($space, top,$i,$n); | |||
} | |||
@if $direction == r { | |||
@include fn($space, right,$i,$n); | |||
} | |||
@if $direction == b { | |||
@include fn($space, bottom,$i,$n); | |||
} | |||
@if $direction == l { | |||
@include fn($space, left,$i,$n); | |||
} | |||
@if $direction == x { | |||
@include fn($space, left,$i,$n); | |||
@include fn($space, right,$i,$n); | |||
} | |||
@if $direction == y { | |||
@include fn($space, top,$i,$n); | |||
@include fn($space, bottom,$i,$n); | |||
} | |||
@if $direction == a { | |||
@if $n { | |||
#{$space}:#{$i*$uni-space-root}px; | |||
} @else { | |||
#{$space}:#{-$i*$uni-space-root}px; | |||
} | |||
} | |||
} | |||
@each $orientation in m,p { | |||
$space: margin; | |||
@if $orientation == m { | |||
$space: margin; | |||
} @else { | |||
$space: padding; | |||
} | |||
@for $i from 0 through 16 { | |||
@each $direction in t, r, b, l, x, y, a { | |||
.uni-#{$orientation}#{$direction}-#{$i} { | |||
@include get-styles($direction,$i,$space,true); | |||
} | |||
.uni-#{$orientation}#{$direction}-n#{$i} { | |||
@include get-styles($direction,$i,$space,false); | |||
} | |||
} | |||
} | |||
} |
@ -0,0 +1,167 @@ | |||
/* #ifndef APP-NVUE */ | |||
$-color-white:#fff; | |||
$-color-black:#000; | |||
@mixin base-style($color) { | |||
color: #fff; | |||
background-color: $color; | |||
border-color: mix($-color-black, $color, 8%); | |||
&:not([hover-class]):active { | |||
background: mix($-color-black, $color, 10%); | |||
border-color: mix($-color-black, $color, 20%); | |||
color: $-color-white; | |||
outline: none; | |||
} | |||
} | |||
@mixin is-color($color) { | |||
@include base-style($color); | |||
&[loading] { | |||
@include base-style($color); | |||
&::before { | |||
margin-right:5px; | |||
} | |||
} | |||
&[disabled] { | |||
&, | |||
&[loading], | |||
&:not([hover-class]):active { | |||
color: $-color-white; | |||
border-color: mix(darken($color,10%), $-color-white); | |||
background-color: mix($color, $-color-white); | |||
} | |||
} | |||
} | |||
@mixin base-plain-style($color) { | |||
color:$color; | |||
background-color: mix($-color-white, $color, 90%); | |||
border-color: mix($-color-white, $color, 70%); | |||
&:not([hover-class]):active { | |||
background: mix($-color-white, $color, 80%); | |||
color: $color; | |||
outline: none; | |||
border-color: mix($-color-white, $color, 50%); | |||
} | |||
} | |||
@mixin is-plain($color){ | |||
&[plain] { | |||
@include base-plain-style($color); | |||
&[loading] { | |||
@include base-plain-style($color); | |||
&::before { | |||
margin-right:5px; | |||
} | |||
} | |||
&[disabled] { | |||
&, | |||
&:active { | |||
color: mix($-color-white, $color, 40%); | |||
background-color: mix($-color-white, $color, 90%); | |||
border-color: mix($-color-white, $color, 80%); | |||
} | |||
} | |||
} | |||
} | |||
.uni-btn { | |||
margin: 5px; | |||
color: #393939; | |||
border:1px solid #ccc; | |||
font-size: 16px; | |||
font-weight: 200; | |||
background-color: #F9F9F9; | |||
// TODO 暂时处理边框隐藏一边的问题 | |||
overflow: visible; | |||
&::after{ | |||
border: none; | |||
} | |||
&:not([type]),&[type=default] { | |||
color: #999; | |||
&[loading] { | |||
background: none; | |||
&::before { | |||
margin-right:5px; | |||
} | |||
} | |||
&[disabled]{ | |||
color: mix($-color-white, #999, 60%); | |||
&, | |||
&[loading], | |||
&:active { | |||
color: mix($-color-white, #999, 60%); | |||
background-color: mix($-color-white,$-color-black , 98%); | |||
border-color: mix($-color-white, #999, 85%); | |||
} | |||
} | |||
&[plain] { | |||
color: #999; | |||
background: none; | |||
border-color: $uni-border-1; | |||
&:not([hover-class]):active { | |||
background: none; | |||
color: mix($-color-white, $-color-black, 80%); | |||
border-color: mix($-color-white, $-color-black, 90%); | |||
outline: none; | |||
} | |||
&[disabled]{ | |||
&, | |||
&[loading], | |||
&:active { | |||
background: none; | |||
color: mix($-color-white, #999, 60%); | |||
border-color: mix($-color-white, #999, 85%); | |||
} | |||
} | |||
} | |||
} | |||
&:not([hover-class]):active { | |||
color: mix($-color-white, $-color-black, 50%); | |||
} | |||
&[size=mini] { | |||
font-size: 16px; | |||
font-weight: 200; | |||
border-radius: 8px; | |||
} | |||
&.uni-btn-small { | |||
font-size: 14px; | |||
} | |||
&.uni-btn-mini { | |||
font-size: 12px; | |||
} | |||
&.uni-btn-radius { | |||
border-radius: 999px; | |||
} | |||
&[type=primary] { | |||
@include is-color($uni-primary); | |||
@include is-plain($uni-primary) | |||
} | |||
&[type=success] { | |||
@include is-color($uni-success); | |||
@include is-plain($uni-success) | |||
} | |||
&[type=error] { | |||
@include is-color($uni-error); | |||
@include is-plain($uni-error) | |||
} | |||
&[type=warning] { | |||
@include is-color($uni-warning); | |||
@include is-plain($uni-warning) | |||
} | |||
&[type=info] { | |||
@include is-color($uni-info); | |||
@include is-plain($uni-info) | |||
} | |||
} | |||
/* #endif */ |
@ -0,0 +1,24 @@ | |||
@mixin get-styles($k,$c) { | |||
@if $k == size or $k == weight{ | |||
font-#{$k}:#{$c} | |||
}@else{ | |||
#{$k}:#{$c} | |||
} | |||
} | |||
@each $key, $child in $uni-headings { | |||
/* #ifndef APP-NVUE */ | |||
.uni-#{$key} { | |||
@each $k, $c in $child { | |||
@include get-styles($k,$c) | |||
} | |||
} | |||
/* #endif */ | |||
/* #ifdef APP-NVUE */ | |||
.container .uni-#{$key} { | |||
@each $k, $c in $child { | |||
@include get-styles($k,$c) | |||
} | |||
} | |||
/* #endif */ | |||
} |
@ -0,0 +1,146 @@ | |||
// @use "sass:math"; | |||
@import '../tools/functions.scss'; | |||
// 间距基础倍数 | |||
$uni-space-root: 2 !default; | |||
// 边框半径默认值 | |||
$uni-radius-root:5px !default; | |||
$uni-radius: () !default; | |||
// 边框半径断点 | |||
$uni-radius: map-deep-merge( | |||
( | |||
0: 0, | |||
// TODO 当前版本暂时不支持 sm 属性 | |||
// 'sm': math.div($uni-radius-root, 2), | |||
null: $uni-radius-root, | |||
'lg': $uni-radius-root * 2, | |||
'xl': $uni-radius-root * 6, | |||
'pill': 9999px, | |||
'circle': 50% | |||
), | |||
$uni-radius | |||
); | |||
// 字体家族 | |||
$body-font-family: 'Roboto', sans-serif !default; | |||
// 文本 | |||
$heading-font-family: $body-font-family !default; | |||
$uni-headings: () !default; | |||
$letterSpacing: -0.01562em; | |||
$uni-headings: map-deep-merge( | |||
( | |||
'h1': ( | |||
size: 32px, | |||
weight: 300, | |||
line-height: 50px, | |||
// letter-spacing:-0.01562em | |||
), | |||
'h2': ( | |||
size: 28px, | |||
weight: 300, | |||
line-height: 40px, | |||
// letter-spacing: -0.00833em | |||
), | |||
'h3': ( | |||
size: 24px, | |||
weight: 400, | |||
line-height: 32px, | |||
// letter-spacing: normal | |||
), | |||
'h4': ( | |||
size: 20px, | |||
weight: 400, | |||
line-height: 30px, | |||
// letter-spacing: 0.00735em | |||
), | |||
'h5': ( | |||
size: 16px, | |||
weight: 400, | |||
line-height: 24px, | |||
// letter-spacing: normal | |||
), | |||
'h6': ( | |||
size: 14px, | |||
weight: 500, | |||
line-height: 18px, | |||
// letter-spacing: 0.0125em | |||
), | |||
'subtitle': ( | |||
size: 12px, | |||
weight: 400, | |||
line-height: 20px, | |||
// letter-spacing: 0.00937em | |||
), | |||
'body': ( | |||
font-size: 14px, | |||
font-weight: 400, | |||
line-height: 22px, | |||
// letter-spacing: 0.03125em | |||
), | |||
'caption': ( | |||
'size': 12px, | |||
'weight': 400, | |||
'line-height': 20px, | |||
// 'letter-spacing': 0.03333em, | |||
// 'text-transform': false | |||
) | |||
), | |||
$uni-headings | |||
); | |||
// 主色 | |||
$uni-primary: #2979ff !default; | |||
$uni-primary-disable:lighten($uni-primary,20%) !default; | |||
$uni-primary-light: lighten($uni-primary,25%) !default; | |||
// 辅助色 | |||
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 | |||
$uni-success: #18bc37 !default; | |||
$uni-success-disable:lighten($uni-success,20%) !default; | |||
$uni-success-light: lighten($uni-success,25%) !default; | |||
$uni-warning: #f3a73f !default; | |||
$uni-warning-disable:lighten($uni-warning,20%) !default; | |||
$uni-warning-light: lighten($uni-warning,25%) !default; | |||
$uni-error: #e43d33 !default; | |||
$uni-error-disable:lighten($uni-error,20%) !default; | |||
$uni-error-light: lighten($uni-error,25%) !default; | |||
$uni-info: #8f939c !default; | |||
$uni-info-disable:lighten($uni-info,20%) !default; | |||
$uni-info-light: lighten($uni-info,25%) !default; | |||
// 中性色 | |||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 | |||
$uni-main-color: #3a3a3a !default; // 主要文字 | |||
$uni-base-color: #6a6a6a !default; // 常规文字 | |||
$uni-secondary-color: #909399 !default; // 次要文字 | |||
$uni-extra-color: #c7c7c7 !default; // 辅助说明 | |||
// 边框颜色 | |||
$uni-border-1: #F0F0F0 !default; | |||
$uni-border-2: #EDEDED !default; | |||
$uni-border-3: #DCDCDC !default; | |||
$uni-border-4: #B9B9B9 !default; | |||
// 常规色 | |||
$uni-black: #000000 !default; | |||
$uni-white: #ffffff !default; | |||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; | |||
// 背景色 | |||
$uni-bg-color: #f7f7f7 !default; | |||
/* 水平间距 */ | |||
$uni-spacing-sm: 8px !default; | |||
$uni-spacing-base: 15px !default; | |||
$uni-spacing-lg: 30px !default; | |||
// 阴影 | |||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; | |||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; | |||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; | |||
// 蒙版 | |||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
@ -0,0 +1,19 @@ | |||
// 合并 map | |||
@function map-deep-merge($parent-map, $child-map){ | |||
$result: $parent-map; | |||
@each $key, $child in $child-map { | |||
$parent-has-key: map-has-key($result, $key); | |||
$parent-value: map-get($result, $key); | |||
$parent-type: type-of($parent-value); | |||
$child-type: type-of($child); | |||
$parent-is-map: $parent-type == map; | |||
$child-is-map: $child-type == map; | |||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ | |||
$result: map-merge($result, ( $key: $child )); | |||
}@else { | |||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); | |||
} | |||
} | |||
@return $result; | |||
}; |
@ -0,0 +1,31 @@ | |||
// 间距基础倍数 | |||
$uni-space-root: 2; | |||
// 边框半径默认值 | |||
$uni-radius-root:5px; | |||
// 主色 | |||
$uni-primary: #2979ff; | |||
// 辅助色 | |||
$uni-success: #4cd964; | |||
// 警告色 | |||
$uni-warning: #f0ad4e; | |||
// 错误色 | |||
$uni-error: #dd524d; | |||
// 描述色 | |||
$uni-info: #909399; | |||
// 中性色 | |||
$uni-main-color: #303133; | |||
$uni-base-color: #606266; | |||
$uni-secondary-color: #909399; | |||
$uni-extra-color: #C0C4CC; | |||
// 背景色 | |||
$uni-bg-color: #f5f5f5; | |||
// 边框颜色 | |||
$uni-border-1: #DCDFE6; | |||
$uni-border-2: #E4E7ED; | |||
$uni-border-3: #EBEEF5; | |||
$uni-border-4: #F2F6FC; | |||
// 常规色 | |||
$uni-black: #000000; | |||
$uni-white: #ffffff; | |||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
@ -0,0 +1,62 @@ | |||
@import './styles/setting/_variables.scss'; | |||
// 间距基础倍数 | |||
$uni-space-root: 2; | |||
// 边框半径默认值 | |||
$uni-radius-root:5px; | |||
// 主色 | |||
$uni-primary: #2979ff; | |||
$uni-primary-disable:mix(#fff,$uni-primary,50%); | |||
$uni-primary-light: mix(#fff,$uni-primary,80%); | |||
// 辅助色 | |||
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 | |||
$uni-success: #18bc37; | |||
$uni-success-disable:mix(#fff,$uni-success,50%); | |||
$uni-success-light: mix(#fff,$uni-success,80%); | |||
$uni-warning: #f3a73f; | |||
$uni-warning-disable:mix(#fff,$uni-warning,50%); | |||
$uni-warning-light: mix(#fff,$uni-warning,80%); | |||
$uni-error: #e43d33; | |||
$uni-error-disable:mix(#fff,$uni-error,50%); | |||
$uni-error-light: mix(#fff,$uni-error,80%); | |||
$uni-info: #8f939c; | |||
$uni-info-disable:mix(#fff,$uni-info,50%); | |||
$uni-info-light: mix(#fff,$uni-info,80%); | |||
// 中性色 | |||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 | |||
$uni-main-color: #3a3a3a; // 主要文字 | |||
$uni-base-color: #6a6a6a; // 常规文字 | |||
$uni-secondary-color: #909399; // 次要文字 | |||
$uni-extra-color: #c7c7c7; // 辅助说明 | |||
// 边框颜色 | |||
$uni-border-1: #F0F0F0; | |||
$uni-border-2: #EDEDED; | |||
$uni-border-3: #DCDCDC; | |||
$uni-border-4: #B9B9B9; | |||
// 常规色 | |||
$uni-black: #000000; | |||
$uni-white: #ffffff; | |||
$uni-transparent: rgba($color: #000000, $alpha: 0); | |||
// 背景色 | |||
$uni-bg-color: #f7f7f7; | |||
/* 水平间距 */ | |||
$uni-spacing-sm: 8px; | |||
$uni-spacing-base: 15px; | |||
$uni-spacing-lg: 30px; | |||
// 阴影 | |||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); | |||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); | |||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); | |||
// 蒙版 | |||
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
@ -0,0 +1,95 @@ | |||
export const Base64 = { | |||
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", | |||
encode: function(input) { | |||
var output = ""; | |||
var chr1, chr2, chr3, enc1, enc2, enc3, enc4; | |||
var i = 0; | |||
input = Base64._utf8_encode(input); | |||
while (i < input.length) { | |||
chr1 = input.charCodeAt(i++); | |||
chr2 = input.charCodeAt(i++); | |||
chr3 = input.charCodeAt(i++); | |||
enc1 = chr1 >> 2; | |||
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); | |||
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); | |||
enc4 = chr3 & 63; | |||
if (isNaN(chr2)) { | |||
enc3 = enc4 = 64; | |||
} else if (isNaN(chr3)) { | |||
enc4 = 64; | |||
} | |||
output = output + | |||
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + | |||
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4); | |||
} | |||
return output; | |||
}, | |||
decode: function(input) { | |||
var output = ""; | |||
var chr1, chr2, chr3; | |||
var enc1, enc2, enc3, enc4; | |||
var i = 0; | |||
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); | |||
while (i < input.length) { | |||
enc1 = this._keyStr.indexOf(input.charAt(i++)); | |||
enc2 = this._keyStr.indexOf(input.charAt(i++)); | |||
enc3 = this._keyStr.indexOf(input.charAt(i++)); | |||
enc4 = this._keyStr.indexOf(input.charAt(i++)); | |||
chr1 = (enc1 << 2) | (enc2 >> 4); | |||
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); | |||
chr3 = ((enc3 & 3) << 6) | enc4; | |||
output = output + String.fromCharCode(chr1); | |||
if (enc3 != 64) { | |||
output = output + String.fromCharCode(chr2); | |||
} | |||
if (enc4 != 64) { | |||
output = output + String.fromCharCode(chr3); | |||
} | |||
} | |||
output = Base64._utf8_decode(output); | |||
return output; | |||
}, | |||
_utf8_encode: function(string) { | |||
string = string.replace(/\r\n/g, "\n"); | |||
var utftext = ""; | |||
for (var n = 0; n < string.length; n++) { | |||
var c = string.charCodeAt(n); | |||
if (c < 128) { | |||
utftext += String.fromCharCode(c); | |||
} else if ((c > 127) && (c < 2048)) { | |||
utftext += String.fromCharCode((c >> 6) | 192); | |||
utftext += String.fromCharCode((c & 63) | 128); | |||
} else { | |||
utftext += String.fromCharCode((c >> 12) | 224); | |||
utftext += String.fromCharCode(((c >> 6) & 63) | 128); | |||
utftext += String.fromCharCode((c & 63) | 128); | |||
} | |||
} | |||
return utftext; | |||
}, | |||
_utf8_decode: function(utftext) { | |||
var string = ""; | |||
var i = 0; | |||
var c = c1 = c2 = 0; | |||
while (i < utftext.length) { | |||
c = utftext.charCodeAt(i); | |||
if (c < 128) { | |||
string += String.fromCharCode(c); | |||
i++; | |||
} else if ((c > 191) && (c < 224)) { | |||
c2 = utftext.charCodeAt(i + 1); | |||
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); | |||
i += 2; | |||
} else { | |||
c2 = utftext.charCodeAt(i + 1); | |||
c3 = utftext.charCodeAt(i + 2); | |||
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); | |||
i += 3; | |||
} | |||
} | |||
return string; | |||
} | |||
} |
@ -0,0 +1,117 @@ | |||
var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; | |||
let Crypto = {}; | |||
var util = Crypto.util = { | |||
rotl: function(n, b) { | |||
return (n << b) | (n >>> (32 - b)); | |||
}, | |||
rotr: function(n, b) { | |||
return (n << (32 - b)) | (n >>> b); | |||
}, | |||
endian: function(n) { | |||
if (n.constructor == Number) { | |||
return util.rotl(n, 8) & 0x00FF00FF | | |||
util.rotl(n, 24) & 0xFF00FF00; | |||
} | |||
for (var i = 0; i < n.length; i++) | |||
n[i] = util.endian(n[i]); | |||
return n; | |||
}, | |||
randomBytes: function(n) { | |||
for (var bytes = []; n > 0; n--) | |||
bytes.push(Math.floor(Math.random() * 256)); | |||
return bytes; | |||
}, | |||
stringToBytes: function(str) { | |||
var bytes = []; | |||
for (var i = 0; i < str.length; i++) | |||
bytes.push(str.charCodeAt(i)); | |||
return bytes; | |||
}, | |||
bytesToString: function(bytes) { | |||
var str = []; | |||
for (var i = 0; i < bytes.length; i++) | |||
str.push(String.fromCharCode(bytes[i])); | |||
return str.join(""); | |||
}, | |||
stringToWords: function(str) { | |||
var words = []; | |||
for (var c = 0, b = 0; c < str.length; c++, b += 8) | |||
words[b >>> 5] |= str.charCodeAt(c) << (24 - b % 32); | |||
return words; | |||
}, | |||
bytesToWords: function(bytes) { | |||
var words = []; | |||
for (var i = 0, b = 0; i < bytes.length; i++, b += 8) | |||
words[b >>> 5] |= bytes[i] << (24 - b % 32); | |||
return words; | |||
}, | |||
wordsToBytes: function(words) { | |||
var bytes = []; | |||
for (var b = 0; b < words.length * 32; b += 8) | |||
bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF); | |||
return bytes; | |||
}, | |||
bytesToHex: function(bytes) { | |||
var hex = []; | |||
for (var i = 0; i < bytes.length; i++) { | |||
hex.push((bytes[i] >>> 4).toString(16)); | |||
hex.push((bytes[i] & 0xF).toString(16)); | |||
} | |||
return hex.join(""); | |||
}, | |||
hexToBytes: function(hex) { | |||
var bytes = []; | |||
for (var c = 0; c < hex.length; c += 2) | |||
bytes.push(parseInt(hex.substr(c, 2), 16)); | |||
return bytes; | |||
}, | |||
bytesToBase64: function(bytes) { | |||
if (typeof btoa == "function") return btoa(util.bytesToString(bytes)); | |||
var base64 = [], | |||
overflow; | |||
for (var i = 0; i < bytes.length; i++) { | |||
switch (i % 3) { | |||
case 0: | |||
base64.push(base64map.charAt(bytes[i] >>> 2)); | |||
overflow = (bytes[i] & 0x3) << 4; | |||
break; | |||
case 1: | |||
base64.push(base64map.charAt(overflow | (bytes[i] >>> 4))); | |||
overflow = (bytes[i] & 0xF) << 2; | |||
break; | |||
case 2: | |||
base64.push(base64map.charAt(overflow | (bytes[i] >>> 6))); | |||
base64.push(base64map.charAt(bytes[i] & 0x3F)); | |||
overflow = -1; | |||
} | |||
} | |||
if (overflow != undefined && overflow != -1) | |||
base64.push(base64map.charAt(overflow)); | |||
while (base64.length % 4 != 0) base64.push("="); | |||
return base64.join(""); | |||
}, | |||
base64ToBytes: function(base64) { | |||
if (typeof atob == "function") return util.stringToBytes(atob(base64)); | |||
base64 = base64.replace(/[^A-Z0-9+\/]/ig, ""); | |||
var bytes = []; | |||
for (var i = 0; i < base64.length; i++) { | |||
switch (i % 4) { | |||
case 1: | |||
bytes.push((base64map.indexOf(base64.charAt(i - 1)) << 2) | | |||
(base64map.indexOf(base64.charAt(i)) >>> 4)); | |||
break; | |||
case 2: | |||
bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0xF) << 4) | | |||
(base64map.indexOf(base64.charAt(i)) >>> 2)); | |||
break; | |||
case 3: | |||
bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0x3) << 6) | | |||
(base64map.indexOf(base64.charAt(i)))); | |||
break; | |||
} | |||
} | |||
return bytes; | |||
} | |||
}; | |||
Crypto.mode = {}; | |||
export default Crypto; |
@ -0,0 +1,29 @@ | |||
import Crypto from '@/utils/oss-upload/common/crypto/crypto.js.js'; | |||
(function() { | |||
// Shortcut | |||
var util = Crypto.util; | |||
Crypto.HMAC = function(hasher, message, key, options) { | |||
// Allow arbitrary length keys | |||
key = key.length > hasher._blocksize * 4 ? | |||
hasher(key, { | |||
asBytes: true | |||
}) : | |||
util.stringToBytes(key); | |||
// XOR keys with pad constants | |||
var okey = key, | |||
ikey = key.slice(0); | |||
for (var i = 0; i < hasher._blocksize * 4; i++) { | |||
okey[i] ^= 0x5C; | |||
ikey[i] ^= 0x36; | |||
} | |||
var hmacbytes = hasher(util.bytesToString(okey) + | |||
hasher(util.bytesToString(ikey) + message, { | |||
asString: true | |||
}), { | |||
asBytes: true | |||
}); | |||
return options && options.asBytes ? hmacbytes : | |||
options && options.asString ? util.bytesToString(hmacbytes) : | |||
util.bytesToHex(hmacbytes); | |||
}; | |||
})(); |
@ -0,0 +1,59 @@ | |||
import Crypto from '@/utils/oss-upload/common/crypto/crypto.js.js'; | |||
(function() { | |||
// Shortcut | |||
var util = Crypto.util; | |||
// Public API | |||
var SHA1 = Crypto.SHA1 = function(message, options) { | |||
var digestbytes = util.wordsToBytes(SHA1._sha1(message)); | |||
return options && options.asBytes ? digestbytes : | |||
options && options.asString ? util.bytesToString(digestbytes) : | |||
util.bytesToHex(digestbytes); | |||
}; | |||
// The core | |||
SHA1._sha1 = function(message) { | |||
var m = util.stringToWords(message), | |||
l = message.length * 8, | |||
w = [], | |||
H0 = 1732584193, | |||
H1 = -271733879, | |||
H2 = -1732584194, | |||
H3 = 271733878, | |||
H4 = -1009589776; | |||
// Padding | |||
m[l >> 5] |= 0x80 << (24 - l % 32); | |||
m[((l + 64 >>> 9) << 4) + 15] = l; | |||
for (var i = 0; i < m.length; i += 16) { | |||
var a = H0, | |||
b = H1, | |||
c = H2, | |||
d = H3, | |||
e = H4; | |||
for (var j = 0; j < 80; j++) { | |||
if (j < 16) w[j] = m[i + j]; | |||
else { | |||
var n = w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16]; | |||
w[j] = (n << 1) | (n >>> 31); | |||
} | |||
var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + ( | |||
j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 : | |||
j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 : | |||
j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 : | |||
(H1 ^ H2 ^ H3) - 899497514); | |||
H4 = H3; | |||
H3 = H2; | |||
H2 = (H1 << 30) | (H1 >>> 2); | |||
H1 = H0; | |||
H0 = t; | |||
} | |||
H0 += a; | |||
H1 += b; | |||
H2 += c; | |||
H3 += d; | |||
H4 += e; | |||
} | |||
return [H0, H1, H2, H3, H4]; | |||
}; | |||
// Package private blocksize | |||
SHA1._blocksize = 16; | |||
})(); |
@ -0,0 +1,36 @@ | |||
import Crypto from '@/utils/oss-upload/common/crypto/crypto.js.js'; | |||
import '@/utils/oss-upload/common/crypto/hmac.js'; | |||
import '@/utils/oss-upload/common/crypto/sha1.js'; | |||
import { Base64 } from '@/utils/oss-upload/common/crypto/base64.js'; | |||
import ossConfig from '@/config.js' | |||
let date = new Date() | |||
date = date.setHours(date.getHours() + 1) | |||
let extime = "" + new Date(date).toISOString() | |||
let policyText = { | |||
"expiration": extime, | |||
"conditions": [ | |||
["content-length-range", 0, 1024 * 1024 * 100] // 设置上传文件的大小限制 | |||
] | |||
}; | |||
let config = { | |||
accessid: ossConfig.aliOss.config.accessKeyId, | |||
accesskey: ossConfig.aliOss.config.accessKeySecret, | |||
osshost: ossConfig.aliOss.url, | |||
policyBase64: Base64.encode(JSON.stringify(policyText)) | |||
} | |||
let message = config.policyBase64; | |||
let bytes = Crypto.HMAC(Crypto.SHA1, message, config.accesskey, { | |||
asBytes: true | |||
}); | |||
let signature = Crypto.util.bytesToBase64(bytes); | |||
let timetamp = new Date().getTime(); | |||
let OSSConfig = { | |||
name: 'aliyun', | |||
host: config.osshost, | |||
accessid: config.accessid, | |||
signature: signature, | |||
policyBase64: config.policyBase64, | |||
} | |||
export default OSSConfig; |
@ -0,0 +1,139 @@ | |||
/** | |||
* 阿里云OSS工具类 | |||
*/ | |||
import OSSConfig from "@/utils/oss-upload/oss/OSSConfig.js" | |||
//支持web端 | |||
import { | |||
uploadFileToOSS | |||
} from '@/utils/oss-upload/oss/web.js' | |||
import ossConfig from '@/config.js' | |||
/** | |||
* 生成一个随机的Key | |||
*/ | |||
function storeKey() { | |||
let s = []; | |||
let hexDigits = "0123456789abcdef"; | |||
for (let i = 0; i < 36; i++) { | |||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); | |||
} | |||
s[14] = "4"; | |||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); | |||
s[8] = s[13] = s[18] = s[23] = "-"; | |||
return s.join(""); | |||
} | |||
/** | |||
* 根据当天日期在OSS端生成文件夹 | |||
*/ | |||
function storeFolder() { | |||
const date = new Date(); | |||
const formatNumber = n => { | |||
n = n.toString() | |||
return n[1] ? n : '0' + n | |||
} | |||
return [date.getFullYear(), date.getMonth() + 1, date.getDate()].map(formatNumber).join('-') | |||
} | |||
/** | |||
* 阿里云OSS上传文件, 所有具体功能的工具函数均基于此 | |||
* 注意, resolve时一定为上传成功, 返回OSS上的Key | |||
* @param filePath 待上传文件的URI | |||
* @param key 存储桶中的目标文件名 | |||
* @param folder 存储桶中的目标文件夹 | |||
*/ | |||
export function ossUpload(filePath, key = storeKey(), folder = storeFolder()) { | |||
return new Promise((resolve, reject) => { | |||
if (folder && folder?.length > 0) { | |||
if (folder[0] == "/") folder = folder.slice(1, folder.length) | |||
if (folder[folder.length - 1] != "/") folder += "/" | |||
key = folder + key | |||
} | |||
const filePrefixArr = filePath.split(".") | |||
key += `.${filePrefixArr[filePrefixArr.length - 1]}` | |||
let config = { | |||
url: OSSConfig.host, | |||
name: 'file', | |||
filePath, | |||
formData: { | |||
key, | |||
policy: OSSConfig.policyBase64, | |||
OSSAccessKeyId: OSSConfig.accessid, | |||
success_action_status: '200', | |||
signature: OSSConfig.signature, | |||
}, | |||
success(res) { | |||
if (res.errMsg.includes("uploadFile:ok")) { | |||
resolve(ossConfig.aliOss.url + key) | |||
} else { | |||
reject(res) | |||
} | |||
}, | |||
fail(err) { | |||
reject(err) | |||
} | |||
} | |||
uni.uploadFile(config) | |||
}) | |||
} | |||
/** | |||
* 阿里云OSS上传图片 | |||
* @param {compressed, key, folder, success, fail} compressed: 是否压缩 key: 存储桶中的目标文件名 folder: 存储桶中的目标文件夹 | |||
*/ | |||
export function ossUploadImage({ | |||
key, | |||
folder, | |||
compressed = true, //是否压缩 | |||
success, //成功时的回调 | |||
fail //失败时的回调 | |||
}) { | |||
const sizeType = [compressed ? 'compressed' : 'original'] | |||
uni.chooseImage({ | |||
count: 1, | |||
sizeType, | |||
success(res) { | |||
// #ifdef H5 | |||
return uploadFileToOSS(res.tempFiles[0]).then(success).catch(fail) | |||
// #endif | |||
ossUpload(res.tempFilePaths[0], key, folder).then(success).catch(fail) | |||
}, | |||
fail | |||
}) | |||
} | |||
/** | |||
* 阿里云OSS上传视频 | |||
* @param { key, folder, sourceType, compressed, maxDuration, camera, success, fail} | |||
* key: 存储桶中的目标文件名 folder: 存储桶中的目标文件夹 其它参数同uni.chooseVideo(mpWeixin) | |||
*/ | |||
export function ossUploadVideo({ | |||
key, | |||
folder, | |||
sourceType = ['album', 'camera'], //album 从相册选视频, camera 使用相机拍摄 | |||
compressed = true, //是否压缩所选的视频源文件 | |||
maxDuration = 60, //拍摄视频最长拍摄时间, 单位秒。最长支持 60 秒 | |||
camera = 'back', //调用相机方向, 'front'、'back', 默认'back' | |||
success, //成功时的回调 | |||
fail //失败时的回调 | |||
}) { | |||
uni.chooseVideo({ | |||
sourceType, | |||
compressed, | |||
maxDuration, | |||
camera, | |||
success(res) { | |||
// #ifdef H5 | |||
return uploadFileToOSS(res.tempFile).then(success).catch(fail) | |||
// #endif | |||
ossUpload(res.tempFilePath, key, folder).then(success).catch(fail) | |||
}, | |||
fail | |||
}) | |||
} | |||
const OSS = { | |||
ossUploadVideo, | |||
ossUploadImage, | |||
ossUpload | |||
} | |||
export default OSS; |
@ -0,0 +1,63 @@ | |||
// 此方法适用于web | |||
import OSS from "ali-oss" | |||
import config from '@/config.js' | |||
/** | |||
* 生成一个随机的Key | |||
*/ | |||
function storeKey() { | |||
let s = []; | |||
let hexDigits = "0123456789abcdef"; | |||
for (let i = 0; i < 36; i++) { | |||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); | |||
} | |||
s[14] = "4"; | |||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); | |||
s[8] = s[13] = s[18] = s[23] = "-"; | |||
return s.join(""); | |||
} | |||
/** | |||
* 根据当天日期在OSS端生成文件夹 | |||
*/ | |||
function storeFolder() { | |||
const date = new Date(); | |||
const formatNumber = n => { | |||
n = n.toString() | |||
return n[1] ? n : '0' + n | |||
} | |||
return [date.getFullYear(), date.getMonth() + 1, date.getDate()].map(formatNumber).join('-') | |||
} | |||
export function uploadFileToOSS(file) { | |||
uni.showLoading({ | |||
title: '上传中...' | |||
}); | |||
return new Promise((resolve,reject) => { | |||
// 创建OSS实例 | |||
const client = new OSS(config.aliOss.config); | |||
// 设置文件名和文件目录 | |||
const suffix = '.' + file.name.split('.').pop(); | |||
let key = storeFolder() | |||
if(key[key.length - 1] != '/') key += '/' | |||
const fileName = key + storeKey() + suffix; // 注意:文件名需要是唯一的 | |||
// 使用put接口上传文件 | |||
client.multipartUpload(fileName, file, { | |||
headers: { | |||
'Content-Disposition': 'inline', | |||
'Content-Type': file.type | |||
} | |||
}).then(res => { | |||
uni.hideLoading(); | |||
resolve(config.aliOss.url + res.name); | |||
}).catch(err => { | |||
uni.hideLoading(); | |||
reject(err) | |||
}) | |||
}) | |||
} |