<template>
|
<view class="page_bg">
|
<uv-navbar title="新增模版" :autoBack="true" :placeholder="true" leftIconColor="#fff" bgColor="rgba(0,0,0,0)" titleStyle="color:#fff"></uv-navbar>
|
|
<view class="temp">
|
<view class="temp_item">
|
<view class="title">
|
模版名称
|
</view>
|
<view class="item">
|
<uv-input placeholder="请输入名称" border="none" v-model="tempName" fontSize="27rpx" customStyle="background: #ECEFF6;padding:18rpx 20rpx;border-radius: 10rpx;"></uv-input>
|
</view>
|
</view>
|
<view class="temp_item">
|
<view class="title">
|
屏幕规格
|
</view>
|
<view class="item">
|
<uv-radio-group v-model="specVal" placement="column">
|
<uv-radio
|
class="spec_radio"
|
v-for="(item, index) in specList"
|
:key="index"
|
:label="item.name"
|
:name="item.name">
|
</uv-radio>
|
</uv-radio-group>
|
</view>
|
</view>
|
<view class="temp_item">
|
<view class="title">
|
动画方式
|
</view>
|
<view class="item">
|
<uv-radio-group v-model="modeVal" placement="column" @change="changeMode">
|
<uv-radio
|
class="spec_radio"
|
v-for="(item, index) in modeList"
|
:key="index"
|
:label="item.name"
|
:name="item.val">
|
</uv-radio>
|
</uv-radio-group>
|
</view>
|
</view>
|
|
<view class="temp_item">
|
<view class="title">
|
动画帧数
|
</view>
|
<view class="item" @click="clickTotal">
|
<uv-input placeholder="请输入" readonly border="none" v-model="total" suffixIcon="arrow-right"
|
suffixIconStyle="color: #bbb" fontSize="26rpx" customStyle="background: #ECEFF6;padding:18rpx 20rpx;border-radius: 10rpx;"></uv-input>
|
</view>
|
</view>
|
<view class="temp_item" v-if="modeVal == 1">
|
<view class="title">
|
动画速度
|
</view>
|
<view class="item" @click="clickSpeed">
|
<uv-input placeholder="请输入" readonly border="none" v-model="speed" suffixIcon="arrow-right"
|
suffixIconStyle="color: #bbb" fontSize="26rpx" customStyle="background: #ECEFF6;padding:18rpx 20rpx;border-radius: 10rpx;"></uv-input>
|
</view>
|
</view>
|
<!-- <view class="temp_item" v-if="modeVal == 1">
|
<view class="title">
|
循环次数
|
</view>
|
<view class="item">
|
<uv-input placeholder="请输入" readonly border="none" v-model="cycle" suffixIcon="arrow-right"
|
suffixIconStyle="color: #bbb" fontSize="26rpx" customStyle="background: #ECEFF6;padding:18rpx 20rpx;border-radius: 10rpx;"></uv-input>
|
</view>
|
</view> -->
|
|
<view class="temp_item1" v-for="(item,index) in total" :key="index">
|
<view class="title">
|
动画第{{item}}帧
|
</view>
|
<view class="item">
|
<uv-button text="编辑" @click="clickGoAnim(item)" shape="circle" size="small" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)"></uv-button>
|
</view>
|
</view>
|
|
</view>
|
|
|
<!-- <view class="temp_btn" @click="clickGoAnim">
|
编辑动画
|
</view> -->
|
|
<view class="footer_none"></view>
|
<view class="footer_btn">
|
<uv-button text="保存" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)" shape="circle" @click="clickTempleteAdd()"></uv-button>
|
</view>
|
|
<!-- 动画帧数 -->
|
<uv-picker ref="pickerTotal" :columns="columnsTotal" @confirm="confirmTotal"></uv-picker>
|
|
<!-- 动画速度 -->
|
<uv-picker ref="pickerSpeed" :columns="columnsSpeed" @confirm="confirmSpeed"></uv-picker>
|
|
</view>
|
</template>
|
|
<script>
|
import { templeteAdd } from '@/api/api.js'
|
export default {
|
data() {
|
return {
|
tempName: '',
|
specList: [{
|
name: '12*24'
|
}, {
|
name: '16*24'
|
}, {
|
name: '18*24'
|
}],
|
specVal: '12*24',
|
modeList: [
|
{
|
name: '单个动画帧',
|
val: 0
|
},
|
{
|
name: '动画帧切换',
|
val: 1
|
}
|
],
|
modeVal: 0,
|
columnsTotal: [
|
[2,3,4,5,6,7,8,9]
|
],
|
total: 1,
|
columnsSpeed: [
|
[10,20,30,40,50,60,70,80,90]
|
],
|
speed: 10,
|
cycle: 1,
|
fpsData: [],
|
fpsIndex: 1,
|
fpsIds: []
|
}
|
},
|
onLoad() {
|
|
},
|
onShow() {
|
console.log('------onShow')
|
const fpsParams = uni.getStorageSync('fpsParams');
|
// if (fpsParams) {
|
// console.log('收到回传参数：', fpsParams);
|
// this.fpsIndex = fpsParams.fpsIndex+1
|
// this.fpsData[fpsParams.fpsIndex] = fpsParams.data;
|
// this.fpsIds.push(fpsParams.fpsIndex)
|
// console.log(this.fpsIndex, this.fpsData);
|
// uni.removeStorageSync('fpsParams'); // 清理掉
|
// }
|
if (fpsParams) {
|
console.log('收到回传参数：', fpsParams);
|
// 用 splice 代替下标赋值
|
this.fpsIndex = fpsParams.fpsIndex+1
|
this.fpsData.splice(fpsParams.fpsIndex, 1, fpsParams.data);
|
|
if (!this.fpsIds.includes(fpsParams.fpsIndex + 1)) {
|
this.fpsIds.push(fpsParams.fpsIndex + 1);
|
}
|
console.log(this.fpsIndex, this.fpsData);
|
uni.removeStorageSync('fpsParams'); // 清理掉
|
}
|
},
|
methods: {
|
clickTempleteAdd(){
|
if(!this.tempName){
|
uni.showToast({
|
title: '请输入模版名称',
|
duration: 2000,
|
icon: 'none'
|
});
|
return
|
}
|
if(this.fpsIds.length == 0){
|
uni.showToast({
|
title: '请编辑动画帧',
|
duration: 2000,
|
icon: 'none'
|
});
|
return
|
}
|
let totalArr = new Array(this.total).fill(0).map((_, i) => i + 1);
|
let diffBA = totalArr.filter(v => !this.fpsIds.includes(v));
|
console.log(totalArr, diffBA)
|
if(diffBA.length != 0){
|
uni.showToast({
|
title: '请编辑第'+ Math.min(...diffBA) +'帧',
|
duration: 2000,
|
icon: 'none'
|
});
|
return
|
}
|
|
templeteAdd({
|
name: this.tempName,
|
userId: uni.getStorageSync('userId'),
|
screen: this.specVal, //屏幕
|
fpsTotal: this.total, //总帧数
|
speed: this.speed, //速度
|
|
fpsData: JSON.stringify(this.fpsData)
|
}).then(res=>{
|
console.log('添加动画模版',res)
|
uni.showToast({
|
title: res.msg,
|
duration: 2000,
|
icon: 'none'
|
});
|
if(res.code == 200){
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
},
|
clickSpeed(){
|
this.$refs.pickerSpeed.open();
|
},
|
confirmSpeed(e) {
|
console.log('confirmSpeed', e.value[0]);
|
this.speed = e.value[0]
|
},
|
clickTotal(){
|
if(this.total != 1){
|
this.$refs.pickerTotal.open();
|
}
|
},
|
confirmTotal(e) {
|
console.log('confirmTotal', e.value[0]);
|
this.total = e.value[0]
|
},
|
changeMode(e){
|
if(e == 0){
|
this.total = 1
|
}
|
else{
|
this.total = 2
|
}
|
this.fpsIndex = 1
|
this.fpsData = []
|
},
|
clickGoAnim(index){
|
console.log(this.fpsIndex, index)
|
// if(this.fpsIndex > index){
|
// uni.showToast({
|
// title: '请先编辑第'+this.fpsIndex+'帧',
|
// duration: 2000,
|
// icon: 'none'
|
// });
|
// return
|
// }
|
uni.navigateTo({
|
url: '/pages/animation/animation?fps='+index
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.footer_none{
|
height: 200rpx;
|
}
|
.footer_btn{
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
padding:30rpx 40rpx;
|
}
|
.temp_btn{
|
position: fixed;
|
left: 30rpx;
|
bottom: 60rpx;
|
right: 30rpx;
|
box-sizing: border-box;
|
height: 96rpx;
|
background: linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%);
|
border-radius: 385rpx 385rpx 385rpx 385rpx;
|
font-size: 30rpx;
|
color: #FFFFFF;
|
line-height: 96rpx;
|
text-align: center;
|
}
|
.spec_radio{
|
margin-top: 30rpx;
|
&:first-child{
|
margin-top: 10rpx;
|
}
|
}
|
.temp{
|
padding:0 30rpx;
|
.temp_item1{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0.5) 100%);
|
box-shadow: 8rpx 8rpx 23rpx 0rpx rgba(67,147,248,0.1), -8rpx -8rpx 23rpx 0rpx rgba(255,255,255,0.4);
|
border-radius: 23rpx 23rpx 23rpx 23rpx;
|
border: 2rpx solid #FFFFFF;
|
padding:30rpx;
|
box-sizing: border-box;
|
margin-top: 24rpx;
|
.title{
|
flex-shrink: 0;
|
font-size: 30rpx;
|
color: rgba(0,0,0,0.9);
|
line-height: 40rpx;
|
|
}
|
.item{
|
|
}
|
}
|
.temp_item{
|
background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0.5) 100%);
|
box-shadow: 8rpx 8rpx 23rpx 0rpx rgba(67,147,248,0.1), -8rpx -8rpx 23rpx 0rpx rgba(255,255,255,0.4);
|
border-radius: 23rpx 23rpx 23rpx 23rpx;
|
border: 2rpx solid #FFFFFF;
|
padding:30rpx;
|
box-sizing: border-box;
|
margin-top: 24rpx;
|
.title{
|
flex-shrink: 0;
|
font-size: 30rpx;
|
color: rgba(0,0,0,0.9);
|
line-height: 40rpx;
|
}
|
.item{
|
margin-top: 15rpx;
|
}
|
}
|
}
|
.page_bg{
|
width: 100%;
|
min-height: calc(100vh - var(--window-bottom));
|
background:url('/static/img/bg_2.jpg') no-repeat center top;
|
background-size: 100% auto;
|
}
|
</style>
|
