我的资产调整首页调整提交企业认证接口调整

This commit is contained in:
唐明明
2021-09-13 17:51:11 +08:00
parent c0ef48f7cf
commit ac59089e29
83 changed files with 7251 additions and 2958 deletions

View File

@@ -17,6 +17,6 @@
<style>
page{
background: #F8F8F8;
background: #f5f5f5;
}
</style>

View File

@@ -15,6 +15,13 @@ const employees = () => {
})
}
// 添加员工配置项
const employeesConfig = () => {
return request({
url: 'companies/employees/create'
})
}
// 添加员工
const addEmployees = (data) => {
return request({
@@ -26,5 +33,6 @@ const addEmployees = (data) => {
export {
employees,
employeesConfig,
addEmployees
}

View File

@@ -37,46 +37,46 @@ const managesGoodsIndex = data => {
})
}
// // 商品管理-商品增发
// const managesGoodsMint = data => {
// return request({
// url: 'manages/goods/'+data.id+'/mint',
// data:data,
// method:'POST'
// })
// }
// 商品管理-商品增发
const managesGoodsMint = data => {
return request({
url: 'manages/goods/'+data.id+'/mint',
data:data,
method:'POST'
})
}
// // 商品管理-商品燃烧
// const managesGoodsBurn = data => {
// return request({
// url: 'manages/goods/'+data.id+'/burn',
// data:data,
// method:'POST'
// })
// }
// 商品管理-商品燃烧
const managesGoodsBurn = data => {
return request({
url: 'manages/goods/'+data.id+'/burn',
data:data,
method:'POST'
})
}
// // 商品管理-商品上架
// const managesGoodsOnsale = id => {
// return request({
// url: 'manages/goods/'+id+'/onsale',
// method:'PUT'
// })
// }
// 商品管理-商品上架
const managesGoodsOnsale = id => {
return request({
url: 'manages/goods/'+id+'/onsale',
method:'PUT'
})
}
// // 商品管理-商品下架
// const managesGoodsOffsale = id => {
// return request({
// url: 'manages/goods/'+id+'/offsale',
// method:'PUT'
// })
// }
// 商品管理-商品下架
const managesGoodsOffsale = id => {
return request({
url: 'manages/goods/'+id+'/offsale',
method:'PUT'
})
}
// // 发布商品前置 manages/goods/create
// const managesGoodsCreateBefore = () => {
// return request({
// url: 'manages/goods/create'
// })
// }
// 发布商品前置 manages/goods/create
const managesGoodsCreateBefore = () => {
return request({
url: 'manages/goods/create'
})
}
// 发布商品
const managesGoodsCreate = (data) => {
@@ -92,10 +92,10 @@ export {
list,
goods,
managesGoodsIndex,
// managesGoodsMint,
// managesGoodsBurn,
// managesGoodsOnsale,
// managesGoodsOffsale,
// managesGoodsCreateBefore,
managesGoodsMint,
managesGoodsBurn,
managesGoodsOnsale,
managesGoodsOffsale,
managesGoodsCreateBefore,
managesGoodsCreate
}

View File

@@ -9,7 +9,7 @@
<uni-rate
:readonly="true"
color="#ddd"
active-color="#c82626"
active-color="#e93340"
:value="item.star"
:size="14"
/>

View File

@@ -0,0 +1,93 @@
<template>
<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]">
<image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item[urlKey]" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image>
</swiper-item>
</swiper>
</template>
<script>
export default {
props: {
imgList: {
type: Array,
default() {
return []
}
},
urlKey: {
type: String,
default() {
return ''
}
},
},
data() {
return {
currentIndex: 0,
dontFirstAnimation: true
}
},
methods: {
swiperChange(e) {
this.dontFirstAnimation = false
this.currentIndex = e.detail.current
},
clickImg(item) {
this.$emit('selected', item, this.currentIndex)
}
}
}
</script>
<style scoped>
.image-container {
width: 750rpx;
height: 350rpx;
}
.item-img {
width: 630rpx;
height: 300rpx;
border-radius: 14rpx;
animation: to-big .3s;
}
.swiper-item {
width: 630rpx;
height: 300rpx;
display: flex;
justify-content: center;
align-items: center;
}
.item-img-side {
width: 630rpx;
height: 260rpx;
border-radius: 14rpx;
animation: to-mini .3s;
}
.swiper-item-side {
width: 630rpx;
height: 260rpx;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes to-mini
{
from {
height: 300rpx;
}
to {
height: 260rpx;
}
}
@keyframes to-big
{
from {
height: 260rpx;
}
to {
height: 300rpx;
}
}
</style>

View File

@@ -31,14 +31,15 @@
"navigationStyle":"custom",
"navigationBarTitleText":"企业工具",
"navigationBarTextStyle":"white",
"navigationBarBackgroundColor":"#c82626"
"navigationBarBackgroundColor":"#e93340"
}
},{
"path": "pages/property/index",
"name": "Property",
"style": {
"navigationBarTitleText": "",
"navigationStyle":"custom"
"navigationStyle":"custom",
"navigationBarTextStyle":"white"
}
},{
"path" : "pages/goods/details",
@@ -177,7 +178,7 @@
"text": "保存",
"fontSize": "16",
"width": "80",
"color": "#c82626"
"color": "#e93340"
}
]
}
@@ -196,7 +197,7 @@
"text": "添加",
"fontSize": "14",
"width": "80",
"color": "#c82626"
"color": "#e93340"
}
]
}
@@ -222,7 +223,7 @@
"text": "发布",
"fontSize": "16",
"width": "80",
"color": "#c82626"
"color": "#e93340"
}
]
}
@@ -253,7 +254,7 @@
"text": "发布",
"fontSize": "14",
"width": "80",
"color": "#c82626"
"color": "#e93340"
}
]
}
@@ -302,7 +303,7 @@
"text": "创建",
"fontSize": "14",
"width": "80",
"color": "#c82626"
"color": "#e93340"
}
]
}
@@ -318,7 +319,7 @@
],
"tabBar": {
"color": "#bababa",
"selectedColor": "#c82626",
"selectedColor": "#e93340",
"backgroundColor": "#FFFFFF",
"borderStyle": "white",
"list": [{
@@ -346,8 +347,8 @@
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "易货",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"navigationBarBackgroundColor": "#f5f5f5",
"backgroundColor": "#f5f5f5"
},
"easycom": {
"nv": "@/uni_modules/pyh-nv/components/pyh-nv/pyh-nv.vue"

View File

@@ -13,15 +13,6 @@
<label>企业名称</label>
<input type="text" v-model="name" placeholder="输入企业名称" />
</view>
<view class="inputs">
<label>企业类型</label>
<picker v-if="type.length > 0" :range="type" :value="typeIndex" range-key="name" @change="changePicker" data-type="type">
<view class="picker-text nowrap">
{{type[typeIndex].name}}
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
</view>
</picker>
</view>
<view class="inputs">
<label>企业行业</label>
<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title" @change="changePicker" data-type="industry">
@@ -31,6 +22,13 @@
</view>
</picker>
</view>
<view class="inputs">
<label>经营类目</label>
<view class="picker-text" @click="opnePopup">
选择经营类目
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
</view>
</view>
<view class="inputs">
<label>法人姓名</label>
<input type="text" v-model="corporate" placeholder="输入法人姓名" />
@@ -51,6 +49,21 @@
<button type="default" size="default" @click="submitApplies">提交认证</button>
</view>
</view>
<!-- 经营类目 -->
<uni-popup ref="categoryPopup">
<view class="category-popup">
<view class="header">
<view class="title">经营类目</view>
<view class="subtitle">请选择经营类目</view>
</view>
<view class="category-flex">
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in category" :key="index" @click="item.check = !item.check">{{item.name}}</view>
</view>
<view class="btns">
<button type="default" size="default" @click="affirmCategory">确定</button>
</view>
</view>
</uni-popup>
</view>
</template>
@@ -67,22 +80,22 @@
org : "",
logo : "",
license : "",
type : [],
industry : [],
typeIndex : 0,
industryIndex: 0,
reason : ''
reason : '',
category : [],
categorys : []
};
},
created(){
// 读取配置信息
appliesCreate().then(res=>{
console.log(res)
this.industry = res.industries
this.type = res.type
this.formType = this.$Route.query.formType
this.name = res.info.name
this.typeIndex = res.type.findIndex(val => val.id === res.info.type.id) || 0
this.industryIndex = res.industries.findIndex(val => val.industry_id === res.info.industry.industry_id) || 0
this.category = res.info.categories
if(this.formType === 'put'){
appliesInfo().then(formValue => {
this.corporate = formValue.certification.name
@@ -91,7 +104,10 @@
this.logo = formValue.cover
this.license = formValue.certification.license
}).catch(valueErr => {
console.log(valueErr)
uni.showToast({
title: valueErr.message,
icon : 'none'
})
})
}
}).catch(err =>{
@@ -102,9 +118,22 @@
})
},
methods:{
// 选择经营类目
opnePopup(){
this.$refs.categoryPopup.open('bottom')
},
// 确认选择类目
affirmCategory(){
this.categorys = []
for(let val of this.category){
if(val.check){
this.categorys.push(val.category_id)
}
}
this.$refs.categoryPopup.close()
},
// 提交信息
submitApplies(){
let method = this.formType === 'put' ? 'PUT' : 'POST'
applies({
name : this.name,
@@ -113,8 +142,8 @@
user_name : this.corporate,
id_card : this.identity,
code : this.org,
type : this.type[this.typeIndex].id,
industry_id : this.industry[this.industryIndex].industry_id,
categories : this.categorys
}, method).then(res => {
uni.showModal({
title : '提示',
@@ -135,28 +164,23 @@
// 选择器
changePicker(e){
let changeType = e.target.dataset.type,
changeVlae = e.detail.value
switch(changeType){
case 'type':
this.typeIndex = changeVlae
break
case 'industry':
this.industryIndex = changeVlae
break
}
this.industryIndex = e.detail.value
},
// 上传图片
updImg(type){
uni.chooseImage({
count : 1,
success : choose => {
let paths = choose.tempFilePaths
uploading(paths).then(res => {
this[type] = res.url
console.log(this[type])
success : path => {
uploads([{
uri : path.tempFilePaths[0]
}]).then(res => {
this[type] = res.url[0]
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
})
@@ -255,5 +279,46 @@
}
}
}
// 经营类目
.category-popup{
background: #F5F5F5;
padding: 0 $padding * 2 $padding * 2 $padding * 2;
.header{
padding-bottom: $padding;
}
.category-flex{
margin: 0 -10rpx;
display: flex;
flex-wrap: wrap;
.category-flex-item{
margin: 10rpx;
background: white;
width: calc(33.33% - 20rpx);
line-height: 90rpx;
text-align: center;
font-size: $title-size-m;
@extend .nowrap;
&.show{
color: white;
background-color: $text-price;
}
}
}
.btns{
padding-top: $padding * 2;
button{
background: $text-price;
border-radius: 0;
height: 90rpx;
line-height: 90rpx;
font-size: $title-size;
color: white;
font-weight: bold;
&::after{
border: none;
}
}
}
}
}
</style>

View File

@@ -9,15 +9,6 @@
<label>企业名称</label>
<input type="text" v-model="name" placeholder="输入企业名称" />
</view>
<view class="inputs">
<label>企业类型</label>
<picker v-if="type.length > 0" :range="type" :value="typeIndex" range-key="name" @change="changePicker" data-type="type">
<view class="picker-text nowrap">
{{type[typeIndex].name}}
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
</view>
</picker>
</view>
<view class="inputs">
<label>企业行业</label>
<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title" @change="changePicker" data-type="industry">
@@ -40,16 +31,13 @@
data() {
return {
name : "",
type : [],
industry : [],
typeIndex : 0,
industryIndex: 0
};
},
created(){
createConfig().then(res=>{
this.type = res.type
this.industry = res.industries
this.industry = res
})
},
methods:{
@@ -57,7 +45,6 @@
next(){
inits({
name : this.name,
type : this.type[this.typeIndex].id,
industry_id : this.industry[this.industryIndex].industry_id
}).then(res => {
this.$Router.push({name: 'Prompt'})

View File

@@ -1,13 +1,17 @@
<template>
<view class="content">
<view class="content" v-if="!loging">
<!-- 基础信息 -->
<view class="info-card">
<view class="cover">
<view class="cover-add vertical">
<image src="@/static/icons/add-icon.png" mode="widthFix"></image>
<view class="cover-add vertical" @click="updCover">
<block v-if="cover != ''">
<image :src="cover" mode="aspectFill"></image>
</block>
<block v-else>
<image class="cover-default" src="@/static/icons/add-icon.png" mode="widthFix"></image>
<view>员工寸照</view>
</block>
</view>
<!-- <image src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image> -->
</view>
<view class="info-text">
<view class="info-inputs">
@@ -32,54 +36,99 @@
<!-- 权限设置 -->
<view class="title">权限设置</view>
<view class="jurisdiction">
<view class="item">
<checkbox-group @change="permissionChange">
<view class="item" v-for="(item, index) in permissions" :key="index">
<label>
<view class="item-title">运营者权限</view>
<view class="item-info">管理推广设置等模块权限可使用体验版小程序</view>
<checkbox class="item-checkbox" color="#c82626" />
</label>
</view>
<view class="item">
<label>
<view class="item-title">开发者权限</view>
<view class="item-info">开发模块权限可使用体验版小程序开发者工具IDE</view>
<checkbox class="item-checkbox" color="#c82626" />
</label>
</view>
<view class="item">
<label>
<view class="item-title">数据分析者基础分析</view>
<view class="item-info">统计模块权限可使用体验版小程序</view>
<checkbox class="item-checkbox" color="#c82626" />
<view class="item-title">{{item.title}}</view>
<view class="item-info">{{item.description}}</view>
<checkbox class="item-checkbox" color="#c82626" :value="item.permission_id" />
</label>
</view>
</checkbox-group>
</view>
<!-- 按钮 -->
<view class="add-btns">
<button size="default">确认添加</button>
<button size="default" @click="onAddEmployees">确认添加</button>
</view>
</view>
</template>
<script>
import { employeesConfig, addEmployees } from '@/apis/interfaces/employees'
import { uploads } from '@/apis/interfaces/uploading'
export default {
data() {
return {
section : [
{name: '技术部', id: 0},
{name: '市场部', id: 1},
{name: '南岗店', id: 2}
],
loging : true,
section : [],
permissions : [],
permissionIds: [],
sectionIndex : 0,
cover : '',
name : '',
phone : '',
job : ''
};
},
created() {
employeesConfig().then(res => {
this.section = res.store
this.permissions = res.permissions
this.loging = false
})
},
methods:{
// 选择部门
pickerChange(e){
this.sectionIndex = e.detail.value
},
// 权限选择
permissionChange(e){
this.permissionIds = e.detail.value
},
// 上传照片
updCover(){
uni.chooseImage({
crop: {width: 229, height: 320},
success: path=> {
uploads([{
uri : path.tempFilePaths[0]
}]).then(res => {
this.cover = res.url[0]
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
})
},
// 添加员工
onAddEmployees(){
addEmployees({
name : this.name,
mobileNo : this.phone,
job : this.job,
cover : this.cover,
position : 1,
order : 0,
store_id : this.section[this.sectionIndex].store_id,
permission : this.permissionIds
}).then(res => {
uni.showModal({
title : '提示',
content : res,
success : () => {
this.$Router.back()
}
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}
@@ -147,6 +196,10 @@
height: 100%;
text-align: center;
image{
width: 229rpx;
height: 320rpx;
}
image.cover-default{
width: 128rpx;
}
color: $text-gray-m;

View File

@@ -2,7 +2,7 @@
<view>
<!-- 状态栏 -->
<nv :config="nvConfig" @nvTabTap="onNvTab" @nvBtnTap="onRightBtn"></nv>
<block v-if="tabIndex === 0">
<block v-if="tabIndex === 1">
<!-- 推荐商家 -->
<view class="block-title">
<view class="title">
@@ -42,7 +42,7 @@
<uni-rate
:readonly="true"
color="#ddd"
active-color="#c82626"
active-color="#e93340"
:value="item.star"
:size="14"
/>
@@ -61,11 +61,11 @@
<industry-list :list="busList" @on-industry="onOpenWechat"/>
</block>
<!-- 易货商城 -->
<block v-if="tabIndex === 1">
<block v-if="tabIndex === 0">
<view class="header-back">
<!-- 轮播图 -->
<view class="banner">
<swiper class="banner-swiper" indicator-color="#c82626" indicator-active-color="#f8f8f8" indicator-dots autoplay>
<swiper class="banner-swiper" indicator-color="#e93340" indicator-active-color="#f8f8f8" indicator-dots autoplay>
<swiper-item v-for="(item, index) in banners" :key="index">
<image class="cover" :src="item.cover" mode="aspectFill"></image>
</swiper-item>
@@ -137,12 +137,12 @@
tabIndex : 0,
nvConfig : {
tabArr: [
{title:'广场', active:true},
{title:'易货'}
{title:'易货商城', active:true},
{title:'企业广场'}
],
color: '#FFF',
hideback: true,
bgColor: '#c82626',
bgColor: '#e93340',
btn: [{
icon: '/static/icons/search-icon.png',
@@ -166,7 +166,7 @@
};
},
created() {
this.getCompanies()
this.getMall()
},
methods:{
// tab
@@ -177,7 +177,7 @@
else this.nvConfig.tabArr[i].active = false
}
this.tabIndex = tabIndex
if(this.goods.length <= 0) this.getMall()
if(tabIndex == 1 && this.recommendBus.length <= 0) this.getCompanies()
},
// 搜索
onRightBtn(e){
@@ -190,7 +190,6 @@
// 企业广场
getCompanies(){
companies().then(res=>{
console.log(res)
this.recommendBus = res.positions
this.hotBus = res.hot
this.industryBus = [{title: '全部', industry_id: ''}, ...res.industries]
@@ -251,15 +250,21 @@
plus.share.getServices(res => {
let sweixin = null;
for(let val of res){
console.log(val)
if(val.id === weixin){
if(val.id === 'weixin'){
sweixin = val
return
}
}
sweixin ? sweixin.launchMiniProgram({
id: e.original_id
}):plus.nativeUI.alert('当前环境不支持微信操作!');
if(sweixin != null){
sweixin.launchMiniProgram({
id : e.original_id,
path: 'pages/index/index?scene=' + e.company_id,
})
}else{
uni.showToast({
title: '当前环境不支持打开微信小程序',
icon : 'none'
})
}
})
}
}

View File

@@ -131,10 +131,11 @@
skus_assets : '',
skus_charge : '',
skus_number : '',
skus_stock : ''
skus_stock : '',
};
},
methods: {
}
}
</script>

View File

@@ -33,7 +33,7 @@
:size="14"
/>
</view>
<view class="openbtn">进店</view>
<view class="openbtn" @click="onOpenWechat">进店</view>
</view>
<!-- 产品规格 -->
<view class="size">
@@ -72,15 +72,16 @@
return {
loding : true,
goodsObj: {},
identity: ''
identity: '',
company : {}
};
},
created() {
goods(this.$Route.query.id || 16).then(res=>{
console.log(res)
this.loding = false
this.goodsObj = res
this.identity = res.identity.id || ''
this.company = res.company
})
},
methods:{
@@ -99,6 +100,28 @@
qty : this.goodsObj.skus[0].number
}
})
},
// 打开微信小程序
onOpenWechat(){
plus.share.getServices(res => {
let sweixin = null;
for(let val of res){
if(val.id === 'weixin'){
sweixin = val
}
}
if(sweixin != null){
sweixin.launchMiniProgram({
id : this.company.original_id,
path: 'pages/index/index?scene=' + this.company.company_id
})
}else{
uni.showToast({
title: '当前环境不支持打开微信小程序',
icon : 'none'
})
}
})
}
}
}

View File

@@ -14,16 +14,41 @@
</template>
<template v-slot:footer="goods">
<view class="footer-btns">
<button class="button-item" size="mini">销毁</button>
<button class="button-item" size="mini">下架</button>
<block v-if="status == '1'">
<button class="button-item" size="mini" @click="openLay(goods.value, 'goodsBurn')">燃烧</button>
<button class="button-item" size="mini" @click="openLay(goods.value, 'goodsMint')">增发</button>
<button class="button-item" size="mini" @click="goodsOffsale(goods.value.goods_id)">下架</button>
</block>
<block v-if="status == '3'">
<button class="button-item" size="mini" @click="goodsOnsale(goods.value.goods_id)">上架</button>
</block>
<block v-if="status == '0' || status == '2'">
<button class="button-item" size="mini">修改</button>
<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
</block>
</view>
</template>
</goodsList>
<!-- 燃烧 增发 弹窗 -->
<uni-popup ref="popupLay" :safe-area="true" background-color="#ffffff">
<view class="popup">
<view class="title">库存{{stockType == 'goodsMint' ? '增发': '燃烧'}}</view>
<view class="des">
剩余库存
<text>{{itemGoods.stock}}</text>
</view>
<view class="des">
数量
<uni-number-box v-model='stock' :min="1" :max="stockType == 'goodsBurn' ? itemGoods.stock : 9999"></uni-number-box>
</view>
<view class="btn" @click="additionalOrBurning">确认</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { managesGoodsIndex } from '@/apis/interfaces/goods'
import { managesGoodsIndex, managesGoodsOffsale, managesGoodsOnsale, managesGoodsBurn, managesGoodsMint, managesGoodsCreateBefore } from '@/apis/interfaces/goods'
import goodsList from '@/components/goods-list/goods-list'
export default {
components: {
@@ -33,7 +58,10 @@
return {
status : 1,
goods : [],
pages : {}
pages : {},
itemGoods : {},
stock : 1,
stockType : ''
};
},
onShow() {
@@ -53,7 +81,78 @@
}).then(res => {
this.goods = res.data
this.pages = res.page
console.log(res)
})
},
// 下架
goodsOffsale(id){
let index = this.goods.findIndex(val => val.goods_id == id)
managesGoodsOffsale(id).then(res => {
this.goods.splice(index,1)
if(this.goods.length === 0) this.getList()
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none'
})
})
},
// 燃烧,增发
openLay(item, type){
this.itemGoods = item
this.stockType = type
this.stock = 1
this.$refs.popupLay.open('bottom')
},
// 提交燃烧,增发
additionalOrBurning(){
let data = {
id : this.itemGoods.goods_id,
stock: this.stock
}
switch (this.stockType){
case 'goodsBurn':
managesGoodsBurn({...data}).then(res => {
let goodsIndex = this.goods.findIndex(val => val.goods_id === this.itemGoods.goods_id)
this.itemGoods.stock -= data.stock
this.$refs.popupLay.close()
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
break;
case 'goodsMint':
managesGoodsMint({...data}).then(res => {
let goodsIndex = this.goods.findIndex(val => val.goods_id === this.itemGoods.goods_id)
this.itemGoods.stock += data.stock
this.$refs.popupLay.close()
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
break;
default:
uni.showToast({
title: '类型错误',
icon : 'none'
})
break;
}
},
// 上架
goodsOnsale(id){
let index = this.goods.findIndex(val => val.goods_id == id)
managesGoodsOnsale(id).then(res => {
this.goods.splice(index,1)
if(this.goods.length === 0) this.getList()
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none'
})
})
}
},
@@ -102,7 +201,7 @@
height: 60rpx;
line-height: 60rpx;
border-radius: 0;
width: calc(50% - 20rpx);
flex: 1;
background: $border-color-lg;
color: $text-gray;
&::after{
@@ -110,4 +209,38 @@
}
}
}
// 增发燃烧弹窗
.popup {
width: 100%;
background-color: #fff;
padding-bottom: $padding;
.title {
font-size: 36rpx;
text-align: center;
padding: 50rpx 30rpx 30rpx 30rpx;
font-weight: bold;
}
.btn {
background-color: $text-price;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #fff;
font-weight: bold;
font-size: $title-size;
margin: $padding * 2;
}
.des {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: $padding $padding * 2;
color: $text-gray;
text{
color: $text-color;
}
}
}
</style>

View File

@@ -2,96 +2,36 @@
<view>
<!-- 用户信息 -->
<view class="user">
<view class="user-tool">
<image src="@/static/icons/user_icon_00.png" mode="widthFix"></image>
</view>
<view class="user-content">
<view class="user-info">
<image class="info-cover" src="../../static/dev/good_cover_00.jpg" mode="aspectFill"></image>
<view class="info-nickname">唐明明</view>
<view class="info-signa">潮流就是我的态度</view>
<view class="info-tags">
<text class="info-tags-item">企业认证</text>
<text class="info-tags-item">SSS企业</text>
<text class="info-tags-item identity">普通用户</text>
<text class="info-tags-item vip">PULS企业</text>
</view>
</view>
<view class="user-sign">签到</view>
</view>
<view class="user-total">
<view class="total-item">
<view class="total-number">0</view>
<view class="total-text">商品收藏</view>
</view>
<view class="total-item">
<view class="total-number">0</view>
<view class="total-text">店铺收藏</view>
</view>
<view class="total-item">
<view class="total-number">0</view>
<view class="total-text">浏览记录</view>
</view>
<view class="total-item">
<view class="total-number">0</view>
<view class="total-text">优惠券</view>
</view>
</view>
<view class="user-vip">
<view class="vip-text">开通会员获得更多的权益</view>
<view class="vip-btn">立即开通</view>
</view>
</view>
<!-- 易货订单 -->
<view class="user-group">
<view class="title">
<view class="title-text">易货订单</view>
<view class="title-more">
全部订单
<uni-icons class="title-icon" color="#999" type="arrowright" size="14" />
</view>
</view>
<view class="group-flex order-flex">
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_00.png" mode="aspectFill"></image>
<view class="item-title">待付款</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_01.png" mode="aspectFill"></image>
<view class="item-title">待发货</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_02.png" mode="aspectFill"></image>
<view class="item-title">待提货</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_03.png" mode="aspectFill"></image>
<view class="item-title">待评价</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_04.png" mode="aspectFill"></image>
<view class="item-title">退货售后</view>
</view>
</view>
</view>
<!-- 易货中心管理 -->
<view class="user-group">
<view class="title">
<view class="title-text">易货中心管理</view>
<view class="title-more">
交易中心
<uni-icons class="title-icon" color="#999" type="arrowright" size="14" />
</view>
</view>
<view class="group-flex group-flex-3">
<view class="item">
<image class="item-cover" src="@/static/icons/user_icon_00.png" mode="aspectFill"></image>
<view class="item-title">上架中</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/user_icon_01.png" mode="aspectFill"></image>
<view class="item-title">寄存中</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/user_icon_02.png" mode="aspectFill"></image>
<view class="item-title">低价求购</view>
<view class="user-tabs">
<view class="user-tabs-item" :class="{'show': tabsIndex === 0}" @click="tabsIndex = 0">管理中心</view>
<view class="user-tabs-item" :class="{'show': tabsIndex === 1}" @click="tabsIndex = 1">我的推广</view>
</view>
</view>
<!-- 消息 -->
<view class="user-ad">
<uni-icons class="user-ad-icon" type="sound-filled" color="#e93340"></uni-icons>
<swiper class="user-ad-swiper" :interval="3000" autoplay vertical circular>
<swiper-item>
<view class="user-ad-item">恭喜用户0101成功开通PLUS企业会员</view>
</swiper-item>
<swiper-item>
<view class="user-ad-item">恭喜用户0101成功开通PLUS企业会员</view>
</swiper-item>
</swiper>
</view>
<block v-if="tabsIndex === 0">
<!-- 我的资产 -->
<view class="user-group">
<view class="title">
@@ -116,108 +56,247 @@
</view>
</view>
</view>
<!-- 管理工具 -->
<!-- 我的权证 -->
<view class="user-group">
<view class="title">
<view class="title-text">管理工具</view>
<view class="title-text">我的权证</view>
</view>
<view class="group-flex group-flex-4">
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_00.png" mode="aspectFill"></image>
<view class="item-title">店铺管理</view>
<view class="item-num">0</view>
<view class="item-title">权证持有</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_01.png" mode="aspectFill"></image>
<view class="item-title">员工管理</view>
<view class="item-num">0</view>
<view class="item-title">权证转让</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_02.png" mode="aspectFill"></image>
<view class="item-title">营销管理</view>
<view class="item-num">0</view>
<view class="item-title">已使用</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_02.png" mode="aspectFill"></image>
<view class="item-title">产品管理</view>
<view class="item-num">0</view>
<view class="item-title">已提货</view>
</view>
</view>
</view>
<!-- 我的权证 -->
<view class="user-group">
<view class="group-flex group-flex-4">
<view class="item">
<image class="item-cover" src="@/static/icons/user_icon_01.png" mode="aspectFill"></image>
<view class="item-title">商品收藏</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_02.png" mode="aspectFill"></image>
<view class="item-title">核销管理</view>
<image class="item-cover" src="@/static/icons/user_icon_02.png" mode="aspectFill"></image>
<view class="item-title">关注企业</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/order_icon_02.png" mode="aspectFill"></image>
<view class="item-title">卡券管理</view>
<image class="item-cover" src="@/static/icons/user_icon_03.png" mode="aspectFill"></image>
<view class="item-title">我的优惠券</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/user_icon_04.png" mode="aspectFill"></image>
<view class="item-title">地址管理</view>
</view>
</view>
</view>
</block>
<block v-else-if="tabsIndex === 1">
<!-- 我的权证 -->
<view class="user-group">
<view class="title">
<view class="title-text">推广数据</view>
</view>
<view class="group-flex group-flex-2">
<view class="item">
<view class="item-num">0</view>
<view class="item-title">推广人数</view>
</view>
<view class="item">
<view class="item-num">0</view>
<view class="item-title">推广企业</view>
</view>
</view>
</view>
<!-- 排名信息 -->
<view class="user-group">
<view class="title">
<view class="title-text">全站推广人数排名</view>
</view>
<view>
推广人数排名
</view>
</view>
<!-- 排名信息 -->
<view class="user-group">
<view class="title">
<view class="title-text">全站推广企业排名</view>
</view>
<view>
推广企业排名
</view>
</view>
<!-- 推广海报 -->
<carousel :img-list="imgList" url-key="url" @selected="selectedBanner"/>
</block>
<!-- 版权信息 -->
<view class="copyright">易品新境 beta 1.0.0</view>
</view>
</template>
<script>
import carousel from '@/components/vear-carousel/vear-carousel'
export default {
components: {
carousel
},
data() {
return {
tabsIndex: 1,
imgList: [{
url: 'https://img9.51tietu.net/pic/2019-091200/vgkpidei2tjvgkpidei2tj.jpg',
id: 1
},{
url: 'https://img9.51tietu.net/pic/2019-091200/euzekmi5m23euzekmi5m23.jpg',
id: 2
},{
url: 'https://img9.51tietu.net/pic/2019-091200/143tt0ta4sr143tt0ta4sr.jpg',
id: 3
}]
}
},
methods: {
// outLogin(){
// this.$store.commit('setToken', '')
// }
selectedBanner(item, index) {
console.log('🥒', item, index)
}
}
}
</script>
<style lang="scss" scoped>
// 退出按钮
.out-login{
padding: 0 $padding;
button{
background: $text-price;
height: 90rpx;
line-height: 90rpx;
color: white;
font-size: $title-size;
border-radius: $radius;
font-weight: bold;
&::after{
border: none;
}
}
}
// 消息通知
.user-ad{
position: relative;
background: white;
margin: $margin;
border-radius: $radius;
line-height: 90rpx;
padding: 0 $padding;
font-size: $title-size-m;
.user-ad-icon{
position: absolute;
}
.user-ad-swiper{
height: 90rpx;
padding-left: 50rpx;
.user-ad-item{
color: $text-gray;
@extend .nowrap;
}
}
}
// 用户
.user{
background: #f3f4f8;
.user-tool{
@extend .ios-top;
background: $text-price;
color: white;
padding-left: $padding;
padding-right: $padding;
padding-bottom: 200rpx;
line-height: 90rpx;
text-align: right;
font-size: $title-size-m;
image{
width: 58rpx;
}
}
.user-content{
padding: ($padding*3) $padding 0;
display: flex;
justify-content: space-between;
align-items: center;
.user-info{
position: relative;
width: 80%;
padding-left: $padding + 88;
height: 98rpx;
box-sizing: border-box;
margin: -140rpx $margin 0 $margin;
background: white;
border-radius: $radius;
text-align: center;
padding: 0 $padding ($padding + 50);
.info-cover{
position: absolute;
left: 0;
top: 0;
vertical-align: top;
height: 98rpx;
width: 98rpx;
width: 128rpx;
height: 128rpx;
border-radius: 50%;
border:solid 4rpx white;
margin-top: -64rpx;
box-sizing: border-box;
margin-bottom: $margin/2;
}
.info-nickname{
line-height: 55rpx;
font-size: $title-size + 4;
font-weight: bold;
font-size: $title-size + 4;
line-height: 50rpx;
}
.info-signa{
line-height: 50rpx;
color: $text-gray;
font-size: $title-size-sm;
}
.info-tags{
font-size: $title-size-sm - 4;
padding: ($padding/2) 0 0;
font-size: $title-size-sm - 2;
.info-tags-item{
background: #333333;
margin-right: $margin/2;
color: #e9dabb;
background: $text-price;
color: white;
margin: 0 ($margin/2);
padding: 0 ($padding/2);
border-radius: 20rpx;
line-height: 40rpx;
display: inline-block;
border-radius: 20rpx;
&.identity{
background-image: linear-gradient(to right, #e75e44, #e93340);
}
&.vip{
background-image: linear-gradient(to right, #f8e5c0, #d6a46a);
color: #8d4928;
}
}
}
.user-sign{
background: white;
width: 130rpx;
height: 60rpx;
line-height: 60rpx;
}
.user-tabs{
margin-top: -33rpx;
text-align: center;
.user-tabs-item{
display: inline-block;
width: 240rpx;
height: 66rpx;
line-height: 66rpx;
text-align: center;
background-color: white;
border:solid 1rpx $border-color;
font-size: $title-size-m;
&.show{
background: $text-price;
color: white;
border-color: $text-price;
}
}
}
.user-total{
padding: $padding ($padding - 10);
display: flex;
@@ -225,7 +304,7 @@
position: relative;
margin: 0 ($margin/3);
text-align: center;
width: calc(25% - #{$margin - 10});
width: calc(33.33% - #{$margin - 10});
.total-number{
font-size: $title-size;
font-weight: bold;
@@ -249,29 +328,6 @@
}
}
}
.user-vip{
display: flex;
justify-content: space-between;
background: #333333;
margin: 0 $margin;
border-radius: $radius $radius 0 0;
padding: $padding;
.vip-text{
line-height: 50rpx;
width: calc(100% - 180rpx);
color: #e9dabb;
font-size: $title-size-m;
}
.vip-btn{
background-color: #e9dabb;
color: #333333;
line-height: 50rpx;
width: 160rpx;
text-align: center;
border-radius: 25rpx;
font-size: $title-size-sm;
}
}
}
// 用户功能组
.user-group{
@@ -317,9 +373,10 @@
font-size: $title-size + 4;
}
.item-cover{
width: 62rpx;
height: 62rpx;
width: 72rpx;
height: 72rpx;
vertical-align: top;
margin-bottom: 10rpx;
}
.item-title{
font-size: $title-size-sm - 2;
@@ -341,6 +398,12 @@
width: calc(33.33% - #{$padding - 10});
}
}
.group-flex-2{
@extend .order-flex;
.item{
width: calc(50% - #{$padding - 10});
}
}
// 易品新境
.copyright{

View File

@@ -3,7 +3,7 @@
<view class="create-form">
<view class="header">
<view @click="updLogo">
<image class="logo" v-if="cover.showpath" :src="cover.showpath" mode="aspectFill" />
<image class="logo" style="border: none;" v-if="cover.showpath" :src="cover.showpath" mode="aspectFill" />
<image class="logo" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
</view>
<view class="inputs">

View File

@@ -68,6 +68,7 @@
methods:{
// tabs筛选
onTbas(type){
console.log(type)
getDate(type).then(res => {
this.tabsIndex = type
this.dateValue = res
@@ -123,7 +124,7 @@
// tabs
.tabs{
position: fixed;
z-index: 9;
z-index: 99;
top: 0;
left: 0;
width: 100%;

View File

@@ -148,6 +148,9 @@
</view>
</view>
</view>
<view class="">
<button type="default" @click="outLogin">退出登录</button>
</view>
<!-- 版权信息 -->
<view class="copyright">易品新境 beta 1.0.0</view>
</view>
@@ -161,7 +164,9 @@
}
},
methods: {
outLogin(){
this.$store.commit('setToken', '')
}
}
}
</script>

View File

@@ -12,7 +12,7 @@
$text-color: #333;
$text-gray: #555;
$text-gray-m: #999;
$text-price: #c82626;
$text-price: #e93340;
// 边框颜色
$border-color: #ddd;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 733 B

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 489 B

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 487 B

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@@ -0,0 +1,37 @@
## 1.6.22021-08-24
- 新增 支持国际化
## 1.6.12021-07-30
- 优化 vue3下事件警告的问题
## 1.6.02021-07-13
- 组件兼容 vue3如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.5.02021-06-23
- 新增 mask-click 遮罩层点击事件
## 1.4.52021-06-22
- 修复 nvue 平台中间弹出后点击内容再点击遮罩无法关闭的Bug
## 1.4.42021-06-18
- 修复 H5平台中间弹出后点击内容再点击遮罩无法关闭的Bug
## 1.4.32021-06-08
- 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题
- 修复 点击内容再点击遮罩无法关闭的Bug
## 1.4.22021-05-12
- 新增 组件示例地址
## 1.4.12021-04-29
- 修复 组件内放置 input 、textarea 组件,无法聚焦的问题
## 1.4.0 2021-04-29
- 新增 type 属性的 left\right 值,支持左右弹出
- 新增 open(String:type) 方法参数 ,可以省略 type 属性 ,直接传入类型打开指定弹窗
- 新增 backgroundColor 属性,可定义主窗口背景色,默认不显示背景色
- 新增 safeArea 属性,是否适配底部安全区
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
- 修复 App 端弹出等待的Bug
- 优化 提升低配设备性能,优化动画卡顿问题
- 优化 更简单的组件自定义方式
## 1.2.92021-02-05
- 优化 组件引用关系通过uni_modules引用组件
## 1.2.82021-02-05
- 调整为uni_modules目录规范
## 1.2.72021-02-05
- 调整为uni_modules目录规范
- 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端

View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif

View File

@@ -0,0 +1,263 @@
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
</view>
<view v-if="mode === 'base'" class="uni-dialog-content">
<slot>
<text class="uni-dialog-content-text">{{content}}</text>
</slot>
</view>
<view v-else class="uni-dialog-content">
<slot>
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="closeDialog">
<text class="uni-dialog-button-text">{{cancelText}}</text>
</view>
<view class="uni-dialog-button uni-border-left" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
mixins: [popup],
emits:['confirm','close'],
props: {
value: {
type: [String, Number],
default: ''
},
placeholder: {
type: [String, Number],
default: ''
},
type: {
type: String,
default: 'error'
},
mode: {
type: String,
default: 'base'
},
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
dialogType: 'error',
focus: false,
val: ""
}
},
computed: {
okText() {
return t("uni-popup.ok")
},
cancelText() {
return t("uni-popup.cancel")
},
placeholderText() {
return this.placeholder || t("uni-popup.placeholder")
},
titleText() {
return this.title || t("uni-popup.title")
}
},
watch: {
type(val) {
this.dialogType = val
},
mode(val) {
if (val === 'input') {
this.dialogType = 'info'
}
},
value(val) {
this.val = val
}
},
created() {
// 对话框遮罩不可点击
this.popup.disableMask()
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value
} else {
this.dialogType = this.type
}
},
mounted() {
this.focus = true
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
if (this.mode === 'input'){
this.$emit('confirm', this.val)
}else{
this.$emit('confirm')
}
if(this.beforeClose) return
this.popup.close()
},
/**
* 点击取消按钮
*/
closeDialog() {
this.$emit('close')
if(this.beforeClose) return
this.popup.close()
},
close(){
this.popup.close()
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup-dialog {
width: 300px;
border-radius: 15px;
background-color: #fff;
}
.uni-dialog-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 15px;
padding-bottom: 5px;
}
.uni-dialog-title-text {
font-size: 16px;
font-weight: 500;
}
.uni-dialog-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 5px 15px 15px 15px;
}
.uni-dialog-content-text {
font-size: 14px;
color: #6e6e6e;
}
.uni-dialog-button-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-dialog-button {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
}
.uni-border-left {
border-left-color: #f0f0f0;
border-left-style: solid;
border-left-width: 1px;
}
.uni-dialog-button-text {
font-size: 14px;
}
.uni-button-color {
color: #007aff;
}
.uni-dialog-input {
flex: 1;
font-size: 14px;
border: 1px #eee solid;
height: 40px;
padding: 0 10px;
border-radius: 5px;
color: #555;
}
.uni-popup__success {
color: #4cd964;
}
.uni-popup__warn {
color: #f0ad4e;
}
.uni-popup__error {
color: #dd524d;
}
.uni-popup__info {
color: #909399;
}
</style>

View File

@@ -0,0 +1,143 @@
<template>
<view class="uni-popup-message">
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
<slot>
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
</slot>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
/**
* PopUp 弹出层-消息提示
* @description 弹出层-消息提示
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} message 消息提示文字
* @property {String} duration 显示时间,设置为 0 则不会自动关闭
*/
export default {
name: 'uniPopupMessage',
mixins:[popup],
props: {
/**
* 主题 success/warning/info/error 默认 success
*/
type: {
type: String,
default: 'success'
},
/**
* 消息文字
*/
message: {
type: String,
default: ''
},
/**
* 显示时间,设置为 0 则不会自动关闭
*/
duration: {
type: Number,
default: 3000
},
maskShow:{
type:Boolean,
default:false
}
},
data() {
return {}
},
created() {
this.popup.maskShow = this.maskShow
this.popup.messageChild = this
},
methods: {
timerClose(){
if(this.duration === 0) return
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
this.popup.close()
},this.duration)
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup-message {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.uni-popup-message__box {
background-color: #e1f3d8;
padding: 10px 15px;
border-color: #eee;
border-style: solid;
border-width: 1px;
flex: 1;
}
@media screen and (min-width: 500px) {
.fixforpc-width {
margin-top: 20px;
border-radius: 4px;
flex: none;
min-width: 380px;
/* #ifndef APP-NVUE */
max-width: 50%;
/* #endif */
/* #ifdef APP-NVUE */
max-width: 500px;
/* #endif */
}
}
.uni-popup-message-text {
font-size: 14px;
padding: 0;
}
.uni-popup__success {
background-color: #e1f3d8;
}
.uni-popup__success-text {
color: #67C23A;
}
.uni-popup__warn {
background-color: #faecd8;
}
.uni-popup__warn-text {
color: #E6A23C;
}
.uni-popup__error {
background-color: #fde2e2;
}
.uni-popup__error-text {
color: #F56C6C;
}
.uni-popup__info {
background-color: #F2F6FC;
}
.uni-popup__info-text {
color: #909399;
}
</style>

View File

@@ -0,0 +1,185 @@
<template>
<view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
export default {
name: 'UniPopupShare',
mixins:[popup],
emits:['select'],
props: {
title: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
bottomData: [{
text: '微信',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'wx'
},
{
text: 'QQ',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina'
},
{
text: '百度',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
name: 'copy'
},
{
text: '其他',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
name: 'more'
}
]
}
},
created() {},
computed: {
cancelText() {
return t("uni-popup.cancel")
},
shareTitleText() {
return this.title || t("uni-popup.shareTitle")
}
},
methods: {
/**
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
})
this.close()
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
this.popup.close()
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup-share {
background-color: #fff;
}
.uni-share-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
}
.uni-share-title-text {
font-size: 14px;
color: #666;
}
.uni-share-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.uni-share-content-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
}
.uni-share-content-item {
width: 90px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
align-items: center;
}
.uni-share-content-item:active {
background-color: #f5f5f5;
}
.uni-share-image {
width: 30px;
height: 30px;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
}
.uni-share-button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
color: #666;
font-size: 16px;
}
.uni-share-button::after {
border-radius: 50px;
}
</style>

View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "cancel",
"uni-popup.ok": "ok",
"uni-popup.placeholder": "pleace enter",
"uni-popup.title": "Hint",
"uni-popup.shareTitle": "Share to"
}

View File

@@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif

View File

@@ -0,0 +1,26 @@
export default {
data() {
return {
}
},
created(){
this.popup = this.getParent()
},
methods:{
/**
* 获取父元素实例
*/
getParent(name = 'uniPopup') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
}
}

View File

@@ -0,0 +1,403 @@
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear">
<view @touchstart="touchstart" >
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view>
</uni-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件,为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [ture|false] 是否开启动画
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default {
name: 'uniPopup',
components: {
// #ifdef H5
keypress
// #endif
},
emits:['change','maskClick'],
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型可选值top: 顶部弹出层bottom底部弹出层center全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
maskClick: {
type: Boolean,
default: true
},
backgroundColor: {
type: String,
default: 'none'
},
safeArea:{
type: Boolean,
default: true
}
},
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
if (!this.config[newVal]) return
this[this.config[this.type]](true)
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom'
},
maskClass: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)'
},
transClass: {
position: 'fixed',
left: 0,
right: 0
},
maskShow: true,
mkclick: true,
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
}
},
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
},
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent'
}
return this.backgroundColor
}
},
mounted() {
const fixSize = () => {
const { windowWidth, windowHeight, windowTop, safeAreaInsets } = uni.getSystemInfoSync()
this.popupWidth = windowWidth
this.popupHeight = windowHeight + windowTop
// 是否适配底部安全区
if(this.safeArea){
this.safeAreaInsets = safeAreaInsets
}else{
this.safeAreaInsets = 0
}
}
fixSize()
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
created() {
this.mkclick = this.maskClick
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
},
methods: {
/**
* 公用方法,不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
/**
* 公用方法,遮罩层禁止点击
*/
disableMask() {
this.mkclick = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) {
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type
}
if (!this.config[direction]) {
console.error('缺少类型:', direction)
return
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
},
close(type) {
this.showTrans = false
this.$emit('change', {
show: false,
type: this.type
})
clearTimeout(this.timer)
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
},
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
touchstart(){
this.clearPropagation = false
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false
return
}
this.$emit('maskClick')
if (!this.mkclick) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
this.$nextTick(() => {
if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose()
}
})
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom'
this.ani = ['slide-bottom']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: (this.safeAreaInsets && this.safeAreaInsets.bottom) || 0,
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center'
this.ani = ['zoom-out', 'fade']
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center'
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
left(type) {
this.popupstyle = 'left'
this.ani = ['slide-left']
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
right(type) {
this.popupstyle = 'right'
this.ani = ['slide-right']
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ,后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
/* iphonex 等安全区设置,底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>

View File

@@ -0,0 +1,89 @@
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.6.2",
"description": " Popup 组件,提供常用的弹层",
"keywords": [
"uni-ui",
"弹出层",
"弹窗",
"popup",
"弹框"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "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"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
}
}

View File

@@ -0,0 +1,296 @@
## Popup 弹出层
> **组件名uni-popup**
> 代码块: `uPopup`
> 关联组件:`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share`,`uni-transition`
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件需要和 `uni-popup` 配套使用,暂不支持单独使用
> - `nvue` 中使用 `uni-popup` 时,尽量将组件置于其他元素后面,避免出现层级问题
> - `uni-popup` 并不能完全阻止页面滚动,可在打开 `uni-popup` 的时候手动去做一些处理,禁止页面滚动
> - 如果想在页面渲染完毕后就打开 `uni-popup` ,请在 `onReady` 或 `mounted` 生命周期内调用,确保组件渲染完毕
> - 在微信小程序开发者工具中启用真机调试popup 会延时出现,是因为 setTimeout 在真机调试中的延时问题导致的,预览和发布小程序不会出现此问题
> - 使用 `npm` 方式引入组件,如果确认引用正确,但是提示未注册组件或显示不正常,请尝试重新编译项目
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容,可能会影响组件的性能,导致组件无法打开或者打开卡顿
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如使用过程中有任何问题或者您对uni-ui有一些好的建议欢迎加入 uni-ui 交流群871950839
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
```
```javascript
export default {
methods:{
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')
}
}
}
```
### 设置主窗口背景色
在大多数场景下,并不需要设置 `background-color` 属性,因为`uni-popup`的主窗口默认是透明的,在向里面插入内容的时候 ,样式完全交由用户定制,如果设置了背景色 ,例如 `uni-popup-dialog` 中的圆角就很难去实现,不设置背景色,更适合用户去自由发挥。
而也有特例,需要我们主动去设置背景色,例如 `type = 'bottom'` 的时候 ,在异型屏中遇到了底部安全区问题(如 iphone 11因为 `uni-popup`的主要内容避开了安全区(设置`safe-area:true`),导致底部的颜色我们无法自定义,这时候使用 `background-color` 就可以解决这个问题。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
```
### 禁用打开动画
在某些场景 ,可能不希望弹层有动画效果 ,只需要将 `animation` 属性设置为 `false` 即可以关闭动画。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
```
### 禁用点击遮罩关闭
默认情况下,点击遮罩会自动关闭`uni-popup`,如不想点击关闭,只需将`mask-click`设置为`false`,这时候要关闭`uni-popup`,只能手动调用 `close` 方法。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" :mask-click="false">
<text>Popup</text>
<button @click="close">关闭</button>
</uni-popup>
```
```javascript
export default {
data() {
return {}
},
onReady() {},
methods: {
open() {
this.$refs.popup.open('top')
},
close() {
this.$refs.popup.close()
}
}
}
```
## API
### Popup Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|animation|Boolean|true|是否开启动画|
|type|String|'center'|弹出方式|
|mask-click|Boolean|true|蒙版点击是否关闭弹窗|
|background-color|String|'none'|主窗口背景色|
|safe-area|Boolean|true|是否适配底部安全区|
#### Type Options
|属性名|说明|
|:-:| :-:|
|top|顶部弹出 |
|center|居中弹出|
|bottom|底部弹出|
|left|左侧弹出|
|right|右侧弹出|
|message|预置样式 :消息提示|
|dialog|预置样式 :对话框|
|share|预置样式 :底部弹出分享示例 |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|open|打开弹出层|open(String:type) ,如果参数可代替 type 属性|
|close|关闭弹出层 |-|
### Popup Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|change|组件状态发生变化触发|e={show: truefalse,type:当前模式}|
|maskClick|点击遮罩层触发|-|
## 扩展组件说明
`uni-popup` 其实并没有任何样式,只提供基础的动画效果,给用户一个弹出层解决方案,仅仅是这样并不能满足开发需求,所以我们提供了三种基础扩展样式
### uni-popup-message 提示信息
`uni-popup``type`属性改为 `message`,并引入对应组件即可使用消息提示 *该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="message">
<uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
</uni-popup>
```
### PopupMessage Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|success|消息提示主题|
|message|String|-|消息提示文字|
|duration|Number|3000|消息显示时间超过显示时间组件自动关闭设置为0 将不会关闭,需手动调用 close 方法关闭|
#### Type Options
|属性名|说明|
|:-:| :-:|
|success|成功 |
|warn|警告|
|error|失败|
|info|消息|
### PopupMessage Slots
|名称|说明|
|:-:|:-:|
|default|消息内容,会覆盖 message 属性|
### uni-popup-dialog 对话框
`uni-popup``type`属性改为 `dialog`,并引入对应组件即可使用对话框 *该组件不支持单独使用*
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
```
```javascript
export default {
methods: {
open() {
this.$refs.popup.open()
},
/**
* 点击取消按钮触发
* @param {Object} done
*/
close() {
// TODO 做一些其他的事情before-close 为true的情况下手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
},
/**
* 点击确认按钮触发
* @param {Object} done
* @param {Object} value
*/
confirm(value) {
// 输入框的值
console.log(value)
// TODO 做一些其他的事情,手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
}
}
}
```
### PopupDialog Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|success|对话框标题主题,可选值: success/warn/info/error|
|mode|String|base| 对话框模式可选值base提示对话框/input可输入对话框|
|title|String|-|对话框标题|
|content|String|-|对话框内容base模式下生效|
|value| String\Number|-|输入框默认值input模式下生效|
|placeholder|String|-|输入框提示文字input模式下生效|
|before-close|Boolean|false | 是否拦截按钮事件如为true则不会关闭对话框关闭需要手动执行 uni-popup 的 close 方法|
#### PopupDialog Events
|事件称名 |说明|返回值|
|:-:|:-:|:-:|
|close|点击dialog取消按钮触发|-|
|confirm|点击dialog确定按钮触发|e={value:input模式下输入框的值}|
### PopupDialog Slots
|名称|说明|
|:-:|:-:|
|default|自定义内容,回覆盖原有的内容显示|
### uni-popup-share 分享示例
分享示例,不作为最终可使用的组件,只做为样式组件,供用户自行修改,`后续的开发计划是实现实际的分享逻辑,参数可配置`
`uni-popup``type` 属性改为 `share`,并引入对应组件即可使用 *该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="share">
<uni-popup-share title="分享到" @select="select"></uni-popup-share>
</uni-popup>
```
### PopupShare Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:| :-: |
|title|String|-|分享弹窗标题|
|before-close|Boolean|false | 是否拦截按钮事件如为true则不会关闭对话框关闭需要手动执行 uni-popup 的 close 方法|
### PopupShare Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|select|选择触发|e = {item,index}:所选参数|
**Tips**
- share 分享组件,只是作为一个扩展示例,如果需要修改数据源,请到组件内修改
## 帮助
在使用中如遇到无法解决的问题,请提 [Issues](https://github.com/dcloudio/uni-ui/issues) 给我们。
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup](https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup)

View File

@@ -0,0 +1,13 @@
## 1.2.02021-07-30
- 组件兼容 vue3如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.12021-05-12
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.1.02021-04-22
- 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑,使动画更流畅
- 优化 支持单独的动画类型
- 优化 文档示例
## 1.0.22021-02-05
- 调整为uni_modules目录规范

View File

@@ -0,0 +1,128 @@
// const defaultOption = {
// duration: 300,
// timingFunction: 'linear',
// delay: 0,
// transformOrigin: '50% 50% 0'
// }
// #ifdef APP-NVUE
const nvueAnimation = uni.requireNativePlugin('animation')
// #endif
class MPAnimation {
constructor(options, _this) {
this.options = options
this.animation = uni.createAnimation(options)
this.currentStepAnimates = {}
this.next = 0
this.$ = _this
}
_nvuePushAnimates(type, args) {
let aniObj = this.currentStepAnimates[this.next]
let styles = {}
if (!aniObj) {
styles = {
styles: {},
config: {}
}
} else {
styles = aniObj
}
if (animateTypes1.includes(type)) {
if (!styles.styles.transform) {
styles.styles.transform = ''
}
let unit = ''
if(type === 'rotate'){
unit = 'deg'
}
styles.styles.transform += `${type}(${args+unit}) `
} else {
styles.styles[type] = `${args}`
}
this.currentStepAnimates[this.next] = styles
}
_animateRun(styles = {}, config = {}) {
let ref = this.$.$refs['ani'].ref
if (!ref) return
return new Promise((resolve, reject) => {
nvueAnimation.transition(ref, {
styles,
...config
}, res => {
resolve()
})
})
}
_nvueNextAnimate(animates, step = 0, fn) {
let obj = animates[step]
if (obj) {
let {
styles,
config
} = obj
this._animateRun(styles, config).then(() => {
step += 1
this._nvueNextAnimate(animates, step, fn)
})
} else {
this.currentStepAnimates = {}
typeof fn === 'function' && fn()
this.isEnd = true
}
}
step(config = {}) {
// #ifndef APP-NVUE
this.animation.step(config)
// #endif
// #ifdef APP-NVUE
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
this.next++
// #endif
return this
}
run(fn) {
// #ifndef APP-NVUE
this.$.animationData = this.animation.export()
this.$.timer = setTimeout(() => {
typeof fn === 'function' && fn()
}, this.$.durationTime)
// #endif
// #ifdef APP-NVUE
this.isEnd = false
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
if(!ref) return
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
this.next = 0
// #endif
}
}
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
'translateZ'
]
const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
MPAnimation.prototype[type] = function(...args) {
// #ifndef APP-NVUE
this.animation[type](...args)
// #endif
// #ifdef APP-NVUE
this._nvuePushAnimates(type, args)
// #endif
return this
}
})
export function createAnimation(option, _this) {
if(!_this) return
clearTimeout(_this.timer)
return new MPAnimation(option, _this)
}

View File

@@ -0,0 +1,277 @@
<template>
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
</template>
<script>
import { createAnimation } from './createAnimation'
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
*/
export default {
name: 'uniTransition',
emits:['click','change'],
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: [Array, String],
default() {
return 'fade'
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default() {
return {}
}
},
customClass:{
type: String,
default: ''
}
},
data() {
return {
isShow: false,
transform: '',
opacity: 1,
animationData: {},
durationTime: 300,
config: {}
}
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
// 避免上来就执行 close,导致动画错乱
if (this.isShow) {
this.close()
}
}
},
immediate: true
}
},
computed: {
// 生成样式数据
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transform = ''
for (let i in styles) {
let line = this.toLine(i)
transform += line + ':' + styles[i] + ';'
}
return transform
},
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
}
},
created() {
// 动画默认配置
this.config = {
duration: this.duration,
timingFunction: 'ease',
transformOrigin: '50% 50%',
delay: 0
}
this.durationTime = this.duration
},
methods: {
/**
* ref 触发 初始化动画
*/
init(obj = {}) {
if (obj.duration) {
this.durationTime = obj.duration
}
this.animation = createAnimation(Object.assign(this.config, obj))
},
/**
* 点击组件触发回调
*/
onClick() {
this.$emit('click', {
detail: this.isShow
})
},
/**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return
for (let i in obj) {
try {
if(typeof obj[i] === 'object'){
this.animation[i](...obj[i])
}else{
this.animation[i](obj[i])
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
}
}
this.animation.step(config)
return this
},
/**
* ref 触发 执行动画
*/
run(fn) {
if (!this.animation) return
this.animation.run(fn)
},
// 开始过度动画
open() {
clearTimeout(this.timer)
this.transform = ''
this.isShow = true
let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') {
this.opacity = opacity
}
this.transform = transform
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
this.$nextTick(() => {
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step()
this.animation.run()
this.$emit('change', {
detail: this.isShow
})
}, 20)
})
},
// 关闭过度动画
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1
this.transform = transform
this.$emit('change', {
detail: this.isShow
})
})
},
// 处理动画开始前的默认样式
styleInit(type) {
let styles = {
transform: ''
}
let buildStyle = (type, mode) => {
if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode]
} else {
styles.transform += this.animationType(type)[mode] + ' '
}
}
if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildStyle(type, mode)
})
}
return styles
},
// 处理内置组合动画
tranfromInit(type) {
let buildTranfrom = (type, mode) => {
let aniNum = null
if (mode === 'fade') {
aniNum = type ? 0 : 1
} else {
aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1
}
if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1
}
if (mode === 'slide-right') {
aniNum = type ? '100%' : '0'
}
if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0'
}
}
this.animation[this.animationMode()[mode]](aniNum)
}
if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildTranfrom(type, mode)
})
}
return this.animation
},
animationType(type) {
return {
fade: type ? 1 : 0,
'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
}
},
// 内置动画类型与实际动画对应字典
animationMode() {
return {
fade: 'opacity',
'slide-top': 'translateY',
'slide-right': 'translateX',
'slide-bottom': 'translateY',
'slide-left': 'translateX',
'zoom-in': 'scale',
'zoom-out': 'scale'
}
},
// 驼峰转中横线
toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
}
}
</script>
<style></style>

View File

@@ -0,0 +1,83 @@
{
"id": "uni-transition",
"displayName": "uni-transition 过渡动画",
"version": "1.2.0",
"description": "元素的简单过渡动画",
"keywords": [
"uni-ui",
"uniui",
"动画",
"过渡",
"过渡动画"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "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"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

View File

@@ -0,0 +1,397 @@
## Transition 过渡动画
> **组件名uni-transition**
> 代码块: `uTransition`
元素过渡动画
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - rotate 旋转动画不需要填写 deg 单位,在小程序上填写单位动画不会执行
> - NVUE 下修改宽高动画,不能定位到中心点
> - 百度小程序下修改宽高 ,可能会影响其他动画,需注意
> - nvue 不支持 costom-class , 请使用 styles
> - 如使用过程中有任何问题或者您对uni-ui有一些好的建议欢迎加入 uni-ui 交流群871950839
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<template>
<view>
<button type="primary" @click="open">fade</button>
<uni-transition mode-class="fade" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
</view>
</template>
<script>
export default {
data() {
return {
show: false,
}
},
onLoad() {},
methods: {
open(mode) {
this.show = !this.show
},
change() {
console.log('触发动画')
}
}
}
</script>
```
### 样式覆盖
**注意:`nvue` 不支持 `custom-class` 属性 ,需要使用 `styles` 属性进行兼容**
使用 `custom-class` 属性绑定样式,可以自定义 `uni-transition` 的样式
```html
<template>
<view class="content">
<uni-transition custom-class="custom-transition" mode-class="fade" :duration="0" :show="true" />
</view>
</template>
<style>
/* 常规样式覆盖 */
.content >>> .custom-transition {
width:100px;
height:100px;
background-color:red;
}
</style>
<style lang="scss">
/* 如果使用 scss 需要使用 /deep/ */
.content /deep/ .custom-transition {
width:100px;
height:100px;
background-color:red;
}
</style>
```
如果使用 `styles` 注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
```html
<template>
<view class="content">
<uni-transition :styles="styles" mode-class="fade" :duration="0" :show="true" />
</view>
</template>
<script>
export default {
data() {
return {
styles:{
'width':'100px',
'height':'100px',
'backgroundColor':'red'
}
}
}
}
</script>
```
### 自定义动画
当内置动画类型不能满足需求的时候 ,可以使用 `step()` 和 `run()` 自定义动画,入参以及具体用法参考下方属性说明
`init()` 方法可以覆盖默认配置
```html
<template>
<view>
<button type="primary" @click="run">执行动画</button>
<uni-transition ref="ani" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" />
</view>
</template>
<script>
export default {
data() {
return {
show: true,
}
},
onReady() {
this.$refs.ani.init({
duration: 1000,
timingFunction: 'linear',
transformOrigin: '50% 50%',
delay: 500
})
},
methods: {
run() {
// 同时右平移到 100px,旋转 360 读
this.$refs.ani.step({
translateX: '100px',
rotate: '360'
})
// 上面的动画执行完成后等待200毫秒平移到 0px,旋转到 0 读
this.$refs.ani.step({
translateX: '0px',
rotate: '0'
},
{
timingFunction: 'ease-in',
duration: 200
})
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
})
}
}
}
</script>
```
## API
### Transition Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-:|
|show |Boolean|false |控制组件显示或隐藏 |
|mode-class |Array/String |- |内置过渡动画类型 |
|custom-class |String |- |自定义类名 |
|duration |Number |300 |过渡动画持续时间 |
|styles |Object |- |组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red` |
#### mode-class 内置过渡动画类型说明
**格式为** `'fade'` 或者 `['fade','slide-top']`
|属性名 |说明 |
|:-: |:-: |
|fade |渐隐渐出过渡 |
|slide-top |由上至下过渡 |
|slide-right |由右至左过渡 |
|slide-bottom |由下至上过渡 |
|slide-left |由左至右过渡 |
|zoom-in |由小到大过渡 |
|zoom-out |由大到小过渡 |
**注意**
组合使用时同一种类型相反的过渡动画如slide-top、slide-bottom同时使用时只有最后一个生效
### Transition Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击组件触发 |- |
|change |过渡动画结束时触发 | e = {detail:true} |
### Transition Methons
|方法名|说明|参数|
|:-:|:-:|:-:|
|init()|手动初始化配置|Function(OBJECT:config)|
|step()|动画队列|Function(OBJECT:type,OBJECT:config)|
|run()|执行动画|Function(FUNCTION:callback) |
### init(OBJECT:config)
**通过 ref 调用方法**
手动设置动画配置,需要在页面渲染完毕后调用
```javascript
this.$refs.ani.init({
duration: 1000,
timingFunction:'ease',
delay:500,
transformOrigin:'left center'
})
```
### step(OBJECT:type,OBJECT:config) 动画队列
**通过 ref 调用方法**
调用 `step()` 来表示一组动画完成,`step` 第一个参数可以传入任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。`step` 第二个参数可以传入一个跟 `uni.createAnimation()` 一样的配置参数用于指定当前组动画的配置。
Tips
- 第一个参数支持的动画参考下面的 `支持的动画`
- 第二个参数参考下面的 `动画配置`,可省略,如果省略继承`init`的配置
```javascript
this.$refs.ani.step({
translateX: '100px'
},{
duration: 1000,
timingFunction:'ease',
delay:500,
transformOrigin:'left center'
})
```
### run(FUNCTION:callback) 执行动画
**通过 ref 调用方法**
在执行 `step()` 后,需要调用 `run()` 来运行动画 ,否则动画会一直等待
`run()` 方法可以传入一个 `callback` 函数 ,会在所有动画执行完毕后回调
```javascript
this.$refs.ani.step({
translateX: '100px'
})
this.$refs.ani.run(()=>{
console.log('动画执行完毕')
})
```
### 动画配置
动画配置 `init()` 与 `step()` 第二个参数配置相同 ,如果配置`step() `第二个参数,将会覆盖 `init()` 的配置
|属性名|值|必填|默认值|说明|平台差异|
|:-:|:-:|:-:|:-:|:-:|:-:|
|duration|Number|否|400|动画持续时间单位ms|-|
|timingFunction|String|否|"linear"|定义动画的效果|-|
|delay|Number|否|0|动画延迟时间,单位 ms|-|
|needLayout|Boolean|否|false |动画执行是否影响布局|仅 nvue 支持|
|transformOrigin|String |否|"center center"|设置 [transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)|-|
### timingFunction 属性说明
|值|说明|平台差异|
|:-:|:-:|:-:|
|linear|动画从头到尾的速度是相同的|-|
|ease|动画以低速开始,然后加快,在结束前变慢|-|
|ease-in| 动画以低速开始|-|
|ease-in-out| 动画以低速开始和结束|-|
|ease-out|动画以低速结束|-|
|step-start|动画第一帧就跳至结束状态直到结束|nvue不支持|
|step-end|动画一直保持开始状态,最后一帧跳到结束状态|nvue不支持|
```javascript
// init 配置
this.$refs.ani.init({
duration: 1000,
timingFunction:'ease',
delay:500,
transformOrigin:'left center'
})
// step 配置
this.$refs.ani.step({
translateX: '100px'
},{
duration: 1000,
timingFunction:'ease',
delay:500,
transformOrigin:'left center'
})
```
### 支持的动画
动画方法
如果同一个动画方法有多个值,多个值使用数组分隔
```javascript
this.$refs.ani.step({
width:'100px',
scale: [1.2,0.8],
})
```
**样式:**
|属性名|值|说明|平台差异|
|:-:|:-:|:-:|:-:|
|opacity|value|透明度,参数范围 0~1|-|
|backgroundColor|color|颜色值|-|
|width|length|长度值,如果传入 Number 则默认使用 px可传入其他自定义单位的长度值|-|
|height|length|长度值,如果传入 Number 则默认使用 px可传入其他自定义单位的长度值|-|
|top|length|长度值,如果传入 Number 则默认使用 px可传入其他自定义单位的长度值|nvue 不支持|
|left|length|长度值,如果传入 Number 则默认使用 px可传入其他自定义单位的长度值|nvue 不支持|
|bottom|length|长度值,如果传入 Number 则默认使用 px可传入其他自定义单位的长度值|nvue 不支持|
|right|length|长度值,如果传入 Number 则默认使用 px可传入其他自定义单位的长度值|nvue 不支持|
```javascript
this.$refs.ani.step({
opacity: 1,
backgroundColor: '#ff5a5f',
widht:'100px',
height:'50rpx',
})
```
**旋转:**
旋转属性的值不需要填写单位
|属性名|值|说明|平台差异 |
|:-:|:-:|:-:|:-:|
|rotate|deg|deg的范围-180~180从原点顺时针旋转一个deg角度 |-|
|rotateX|deg|deg的范围-180~180在X轴旋转一个deg角度 |-|
|rotateY|deg|deg的范围-180~180在Y轴旋转一个deg角度 |-|
|rotateZ|deg|deg的范围-180~180在Z轴旋转一个deg角度 |nvue不支持|
|rotate3d|x,y,z,deg| 同 [transform-function rotate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()) |nvue不支持|
```javascript
this.$refs.ani.step({
rotateX: 45,
rotateY: 45
})
```
**缩放:**
|属性名|值|说明|平台差异|
|:-:|:-:|:-: |:-:|
|scale|sx,[sy]|一个参数时表示在X轴、Y轴同时缩放sx倍数两个参数时表示在X轴缩放sx倍数在Y轴缩放sy倍数|-|
|scaleX|sx|在X轴缩放sx倍数|-|
|scaleY|sy|在Y轴缩放sy倍数|-|
|scaleZ|sz|在Z轴缩放sy倍数|nvue不支持|
|scale3d|sx,sy,sz|在X轴缩放sx倍数在Y轴缩放sy倍数在Z轴缩放sz倍数|nvue不支持|
```javascript
this.$refs.ani.step({
scale: [1.2,0.8]
})
```
**偏移:**
|属性名|值|说明|平台差异|
|:-:|:-:|:-:|:-:|
|translate|tx,[ty]|一个参数时表示在X轴偏移tx单位px两个参数时表示在X轴偏移tx在Y轴偏移ty单位px。|-|
|translateX|tx| 在X轴偏移tx单位px|-|
|translateY|ty| 在Y轴偏移tx单位px|-|
|translateZ|tz| 在Z轴偏移tx单位px|nvue不支持|
|translate3d|tx,ty,tz| 在X轴偏移tx在Y轴偏移ty在Z轴偏移tz单位px|nvue不支持|
```javascript
this.$refs.ani.step({
translateX: '100px'
})
```
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)

View File

@@ -1,8 +1,8 @@
var isReady=false;var onReadyCallbacks=[];
var isServiceReady=false;var onServiceReadyCallbacks=[];
var __uniConfig = {"pages":["pages/equity/index","pages/market/index","pages/store/index","pages/property/index","pages/goods/details","pages/login/login","pages/company/registered","pages/company/prompt","pages/vip/index","pages/equity/search","pages/market/logs","pages/order/buy","pages/order/index","pages/order/details","pages/order/sales","pages/goods/lists","pages/company/approve","pages/store/visitors","pages/store/customer","pages/store/basics","pages/employees/list","pages/employees/add","pages/goods/management","pages/goods/add","pages/coupons/index","pages/coupons/management","pages/coupons/add","pages/coupons/selectGoods","pages/coupons/magDetails","pages/verification/index","pages/verification/details","pages/shop/lists","pages/shop/create"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"易货","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":"#F8F8F8"},"tabBar":{"color":"#bababa","selectedColor":"#c82626","backgroundColor":"#FFFFFF","borderStyle":"white","list":[{"pagePath":"pages/equity/index","text":"通证权易","iconPath":"static/tabBar/tabBar_icon_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png"},{"pagePath":"pages/market/index","text":"转让市场","iconPath":"static/tabBar/tabBar_icon_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png"},{"pagePath":"pages/store/index","text":"企业工具","iconPath":"static/tabBar/tabBar_icon_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png"},{"pagePath":"pages/property/index","text":"我的资产","iconPath":"static/tabBar/tabBar_icon_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png"}]},"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":false,"autoclose":true},"appname":"易品新境","compilerVersion":"3.2.3","entryPagePath":"pages/equity/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
var __uniRoutes = [{"path":"/pages/equity/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationStyle":"custom","navigationBarTextStyle":"white"}},{"path":"/pages/market/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"转让市场","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"成交历史","fontSize":"14","width":"80","color":"#555555"}]}}},{"path":"/pages/store/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationStyle":"custom","navigationBarTitleText":"企业工具","navigationBarTextStyle":"white","navigationBarBackgroundColor":"#c82626"}},{"path":"/pages/property/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"","navigationStyle":"custom"}},{"path":"/pages/goods/details","meta":{},"window":{"navigationBarTitleText":"","titleNView":{"backgroundColor":"#FFFFFF","type":"transparent","buttons":[{"text":"分享","fontSize":"12","color":"#555555"}]}}},{"path":"/pages/login/login","meta":{},"window":{"navigationBarTitleText":"","navigationBarBackgroundColor":"#FFFFFF","disableScroll":true}},{"path":"/pages/company/registered","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/company/prompt","meta":{},"window":{"navigationBarTitleText":"","navigationBarBackgroundColor":"#FFFFFF","disableScroll":true,"titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"先逛一逛","fontSize":"14","width":"80","color":"#555555"}]}}},{"path":"/pages/vip/index","meta":{},"window":{"navigationBarTitleText":"会员","navigationBarBackgroundColor":"#1f1b1c","navigationBarTextStyle":"white","backgroundColor":"#fefaef"}},{"path":"/pages/equity/search","meta":{},"window":{"navigationBarTitleText":"搜索"}},{"path":"/pages/market/logs","meta":{},"window":{"navigationBarTitleText":"成交历史"}},{"path":"/pages/order/buy","meta":{},"window":{"navigationBarTitleText":"确认订单","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/order/index","meta":{},"window":{"navigationBarTitleText":"订单管理"}},{"path":"/pages/order/details","meta":{},"window":{"navigationBarTitleText":"订单详情"}},{"path":"/pages/order/sales","meta":{},"window":{"navigationBarTitleText":"售后"}},{"path":"/pages/goods/lists","meta":{},"window":{"navigationBarTitleText":"商品列表","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/company/approve","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/store/visitors","meta":{},"window":{"navigationBarTitleText":"访客统计","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/store/customer","meta":{},"window":{"navigationBarTitleText":"成交客户","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/store/basics","meta":{},"window":{"navigationBarTitleText":"基础信息","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"保存","fontSize":"16","width":"80","color":"#c82626"}]}}},{"path":"/pages/employees/list","meta":{},"window":{"navigationBarTitleText":"员工","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"添加","fontSize":"14","width":"80","color":"#c82626"}]}}},{"path":"/pages/employees/add","meta":{},"window":{"navigationBarTitleText":"添加员工","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/goods/management","meta":{},"window":{"navigationBarTitleText":"产品权证","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"发布","fontSize":"16","width":"80","color":"#c82626"}]}}},{"path":"/pages/goods/add","meta":{},"window":{"navigationBarTitleText":"发布权证","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/coupons/index","meta":{},"window":{"navigationBarTitleText":"优惠券"}},{"path":"/pages/coupons/management","meta":{},"window":{"navigationBarTitleText":"优惠券管理","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"发布","fontSize":"14","width":"80","color":"#c82626"}]}}},{"path":"/pages/coupons/add","meta":{},"window":{"navigationBarTitleText":"发布优惠券","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/coupons/selectGoods","meta":{},"window":{"navigationBarTitleText":"选择产品","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/coupons/magDetails","meta":{},"window":{"navigationBarTitleText":"优惠券详情"}},{"path":"/pages/verification/index","meta":{},"window":{"navigationBarTitleText":"扫码验证"}},{"path":"/pages/verification/details","meta":{},"window":{"navigationBarTitleText":"核销券详情"}},{"path":"/pages/shop/lists","meta":{},"window":{"navigationBarTitleText":"部门/门店","navigationBarBackgroundColor":"#FFFFFF","titleNView":{"buttons":[{"text":"创建","fontSize":"14","width":"80","color":"#c82626"}]}}},{"path":"/pages/shop/create","meta":{},"window":{"navigationBarTitleText":"创建门店/部门","navigationBarBackgroundColor":"#FFFFFF"}}];
var __uniConfig = {"pages":["pages/equity/index","pages/market/index","pages/store/index","pages/property/index","pages/goods/details","pages/login/login","pages/company/registered","pages/company/prompt","pages/vip/index","pages/equity/search","pages/market/logs","pages/order/buy","pages/order/index","pages/order/details","pages/order/sales","pages/goods/lists","pages/company/approve","pages/store/visitors","pages/store/customer","pages/store/basics","pages/employees/list","pages/employees/add","pages/goods/management","pages/goods/add","pages/coupons/index","pages/coupons/management","pages/coupons/add","pages/coupons/selectGoods","pages/coupons/magDetails","pages/verification/index","pages/verification/details","pages/shop/lists","pages/shop/create"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"易货","navigationBarBackgroundColor":"#f5f5f5","backgroundColor":"#f5f5f5"},"tabBar":{"color":"#bababa","selectedColor":"#e93340","backgroundColor":"#FFFFFF","borderStyle":"white","list":[{"pagePath":"pages/equity/index","text":"通证权易","iconPath":"static/tabBar/tabBar_icon_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png"},{"pagePath":"pages/market/index","text":"转让市场","iconPath":"static/tabBar/tabBar_icon_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png"},{"pagePath":"pages/store/index","text":"企业工具","iconPath":"static/tabBar/tabBar_icon_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png"},{"pagePath":"pages/property/index","text":"我的资产","iconPath":"static/tabBar/tabBar_icon_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png"}]},"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":false,"autoclose":true},"appname":"易品新境","compilerVersion":"3.2.3","entryPagePath":"pages/company/approve","entryPageQuery":"","realEntryPagePath":"pages/equity/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
var __uniRoutes = [{"path":"/pages/equity/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationStyle":"custom","navigationBarTextStyle":"white"}},{"path":"/pages/market/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"转让市场","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"成交历史","fontSize":"14","width":"80","color":"#555555"}]}}},{"path":"/pages/store/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationStyle":"custom","navigationBarTitleText":"企业工具","navigationBarTextStyle":"white","navigationBarBackgroundColor":"#e93340"}},{"path":"/pages/property/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"","navigationStyle":"custom","navigationBarTextStyle":"white"}},{"path":"/pages/goods/details","meta":{},"window":{"navigationBarTitleText":"","titleNView":{"backgroundColor":"#FFFFFF","type":"transparent","buttons":[{"text":"分享","fontSize":"12","color":"#555555"}]}}},{"path":"/pages/login/login","meta":{},"window":{"navigationBarTitleText":"","navigationBarBackgroundColor":"#FFFFFF","disableScroll":true}},{"path":"/pages/company/registered","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/company/prompt","meta":{},"window":{"navigationBarTitleText":"","navigationBarBackgroundColor":"#FFFFFF","disableScroll":true,"titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"先逛一逛","fontSize":"14","width":"80","color":"#555555"}]}}},{"path":"/pages/vip/index","meta":{},"window":{"navigationBarTitleText":"会员","navigationBarBackgroundColor":"#1f1b1c","navigationBarTextStyle":"white","backgroundColor":"#fefaef"}},{"path":"/pages/equity/search","meta":{},"window":{"navigationBarTitleText":"搜索"}},{"path":"/pages/market/logs","meta":{},"window":{"navigationBarTitleText":"成交历史"}},{"path":"/pages/order/buy","meta":{},"window":{"navigationBarTitleText":"确认订单","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/order/index","meta":{},"window":{"navigationBarTitleText":"订单管理"}},{"path":"/pages/order/details","meta":{},"window":{"navigationBarTitleText":"订单详情"}},{"path":"/pages/order/sales","meta":{},"window":{"navigationBarTitleText":"售后"}},{"path":"/pages/goods/lists","meta":{},"window":{"navigationBarTitleText":"商品列表","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/company/approve","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/store/visitors","meta":{},"window":{"navigationBarTitleText":"访客统计","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/store/customer","meta":{},"window":{"navigationBarTitleText":"成交客户","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/store/basics","meta":{},"window":{"navigationBarTitleText":"基础信息","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"保存","fontSize":"16","width":"80","color":"#e93340"}]}}},{"path":"/pages/employees/list","meta":{},"window":{"navigationBarTitleText":"员工","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"添加","fontSize":"14","width":"80","color":"#e93340"}]}}},{"path":"/pages/employees/add","meta":{},"window":{"navigationBarTitleText":"添加员工","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/goods/management","meta":{},"window":{"navigationBarTitleText":"产品权证","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"发布","fontSize":"16","width":"80","color":"#e93340"}]}}},{"path":"/pages/goods/add","meta":{},"window":{"navigationBarTitleText":"发布权证","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/coupons/index","meta":{},"window":{"navigationBarTitleText":"优惠券"}},{"path":"/pages/coupons/management","meta":{},"window":{"navigationBarTitleText":"优惠券管理","titleNView":{"backgroundColor":"#FFFFFF","buttons":[{"text":"发布","fontSize":"14","width":"80","color":"#e93340"}]}}},{"path":"/pages/coupons/add","meta":{},"window":{"navigationBarTitleText":"发布优惠券","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/coupons/selectGoods","meta":{},"window":{"navigationBarTitleText":"选择产品","navigationBarBackgroundColor":"#FFFFFF"}},{"path":"/pages/coupons/magDetails","meta":{},"window":{"navigationBarTitleText":"优惠券详情"}},{"path":"/pages/verification/index","meta":{},"window":{"navigationBarTitleText":"扫码验证"}},{"path":"/pages/verification/details","meta":{},"window":{"navigationBarTitleText":"核销券详情"}},{"path":"/pages/shop/lists","meta":{},"window":{"navigationBarTitleText":"部门/门店","navigationBarBackgroundColor":"#FFFFFF","titleNView":{"buttons":[{"text":"创建","fontSize":"14","width":"80","color":"#e93340"}]}}},{"path":"/pages/shop/create","meta":{},"window":{"navigationBarTitleText":"创建门店/部门","navigationBarBackgroundColor":"#FFFFFF"}}];
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:Math.round(f/20)})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:void 0,window:void 0,document:void 0,frames:void 0,self:void 0,location:void 0,navigator:void 0,localStorage:void 0,history:void 0,Caches:void 0,screen:void 0,alert:void 0,confirm:void 0,prompt:void 0,fetch:void 0,XMLHttpRequest:void 0,WebSocket:void 0,webkit:void 0,print:void 0}}}});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__CD19AAD","name":"易品新境","version":{"name":"1.0.0","code":"100"},"description":"易品新境为商家提供营销引流工具","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"OAuth":{},"Payment":{},"Share":{},"Geolocation":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"autoclose":false,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#F8F8F8"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"safearea":{"bottom":{"offset":"none"}},"distribute":{"icons":{"android":{"hdpi":"unpackage/res/icons/72x72.png","xhdpi":"unpackage/res/icons/96x96.png","xxhdpi":"unpackage/res/icons/144x144.png","xxxhdpi":"unpackage/res/icons/192x192.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"}}},"splashscreen":{"androidStyle":"common"},"google":{"permissions":["<uses-feature android:name=\"android.hardware.camera\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]},"apple":{},"plugins":{"oauth":{"univerify":{},"weixin":{"appid":"wx222fbe58feee7819","appsecret":"3d24525a636d7573a8fae885097d5cf7","UniversalLinks":""}},"payment":{"weixin":{"__platform__":["android"],"appid":"wx222fbe58feee7819","UniversalLinks":""}},"share":{"weixin":{"appid":"wx222fbe58feee7819","UniversalLinks":""}},"maps":{},"ad":{},"geolocation":{},"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"arguments":"{\"name\":\"\",\"path\":\"\",\"query\":\"\",\"id\":0}","allowsInlineMediaPlayback":true,"uni-app":{"compilerVersion":"3.2.3","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"color":"#bababa","selectedColor":"#c82626","backgroundColor":"#FFFFFF","borderStyle":"rgba(255,255,255,0.4)","list":[{"pagePath":"pages/equity/index","text":"通证权易","iconPath":"static/tabBar/tabBar_icon_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png"},{"pagePath":"pages/market/index","text":"转让市场","iconPath":"static/tabBar/tabBar_icon_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png"},{"pagePath":"pages/store/index","text":"企业工具","iconPath":"static/tabBar/tabBar_icon_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png"},{"pagePath":"pages/property/index","text":"我的资产","iconPath":"static/tabBar/tabBar_icon_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png"}],"height":"50px","child":["lauchwebview"],"selected":0},"launch_path":"__uniappview.html"}}
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__CD19AAD","name":"易品新境","version":{"name":"1.0.0","code":"100"},"description":"易品新境为商家提供营销引流工具","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"OAuth":{},"Payment":{},"Share":{},"Geolocation":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"autoclose":false,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#f5f5f5"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"safearea":{"bottom":{"offset":"none"}},"distribute":{"icons":{"android":{"hdpi":"unpackage/res/icons/72x72.png","xhdpi":"unpackage/res/icons/96x96.png","xxhdpi":"unpackage/res/icons/144x144.png","xxxhdpi":"unpackage/res/icons/192x192.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"}}},"splashscreen":{"androidStyle":"common"},"google":{"permissions":["\u003cuses-feature android:name\u003d\"android.hardware.camera\"/\u003e","\u003cuses-feature android:name\u003d\"android.hardware.camera.autofocus\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.ACCESS_NETWORK_STATE\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.ACCESS_WIFI_STATE\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.CAMERA\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.CHANGE_NETWORK_STATE\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.CHANGE_WIFI_STATE\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.FLASHLIGHT\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.MODIFY_AUDIO_SETTINGS\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.READ_LOGS\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.READ_PHONE_STATE\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.VIBRATE\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.WAKE_LOCK\"/\u003e","\u003cuses-permission android:name\u003d\"android.permission.WRITE_SETTINGS\"/\u003e"]},"apple":{},"plugins":{"oauth":{"univerify":{},"weixin":{"appid":"wx222fbe58feee7819","appsecret":"3d24525a636d7573a8fae885097d5cf7","UniversalLinks":""}},"payment":{"weixin":{"__platform__":["android"],"appid":"wx222fbe58feee7819","UniversalLinks":""}},"share":{"weixin":{"appid":"wx222fbe58feee7819","UniversalLinks":""}},"maps":{},"ad":{},"geolocation":{},"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"allowsInlineMediaPlayback":true,"uni-app":{"compilerVersion":"3.2.3","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"color":"#bababa","selectedColor":"#e93340","backgroundColor":"#FFFFFF","borderStyle":"rgba(255,255,255,0.4)","list":[{"pagePath":"pages/equity/index","text":"通证权易","iconPath":"static/tabBar/tabBar_icon_00.png","selectedIconPath":"static/tabBar/tabBar_show_00.png"},{"pagePath":"pages/market/index","text":"转让市场","iconPath":"static/tabBar/tabBar_icon_01.png","selectedIconPath":"static/tabBar/tabBar_show_01.png"},{"pagePath":"pages/store/index","text":"企业工具","iconPath":"static/tabBar/tabBar_icon_02.png","selectedIconPath":"static/tabBar/tabBar_show_02.png"},{"pagePath":"pages/property/index","text":"我的资产","iconPath":"static/tabBar/tabBar_icon_03.png","selectedIconPath":"static/tabBar/tabBar_show_03.png"}],"height":"50px"},"launch_path":"__uniappview.html","arguments":"{\"pathName\":\"pages/company/approve\",\"query\":\"\"}"}}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 733 B

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 489 B

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 487 B

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB