466 lines
10 KiB
Vue
466 lines
10 KiB
Vue
<template>
|
|
<view class="tn-safe-area-inset-bottom">
|
|
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
|
|
<view class="tn-flex justify-content-item">
|
|
<view class="tn-bg-black tn-color-white tn-text-center"
|
|
style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
|
|
<text class="tn-icon-tag" style="font-size: 30rpx;"></text>
|
|
</view>
|
|
<view class="tn-text-lg tn-padding-right-xs tn-text-bold">
|
|
<text>申请类型</text>
|
|
<text style="color: #CC0033;margin-left: 5rpx;">*</text>
|
|
</view>
|
|
</view>
|
|
<view @click="show = true" class="justify-content-item tn-text-df tn-color-grey">
|
|
<text class="tn-padding-xs">{{thisType?thisType.name:'选择'}}</text>
|
|
<text class="tn-icon-right"></text>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="tn-flex tn-flex-col-center" style="margin:0px 20px;color: #777777;">
|
|
<div v-if="thisType">
|
|
<text class="tn-icon-tip-fill"></text>
|
|
<text style="margin-left: 10rpx;">{{thisType.desc}}</text>
|
|
</div>
|
|
</view>
|
|
<tn-select v-model="show" mode="single" valueName="id" labelName="name" :list="typeList"
|
|
@confirm="confirm"></tn-select>
|
|
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
|
|
<view class="tn-flex justify-content-item">
|
|
<view class="tn-bg-black tn-color-white tn-text-center"
|
|
style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
|
|
<text class="tn-icon-image" style="font-size: 30rpx;"></text>
|
|
</view>
|
|
<view class="tn-text-lg tn-padding-right-xs tn-text-bold">
|
|
<text>图片上传</text>
|
|
<text style="color: #CC0033;margin-left: 5rpx;">*</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tn-margin-left tn-padding-top-xs">
|
|
<tn-image-upload-drag ref="imageUpload" :action="action" :width="236" :height="236" :fileList="fileList"
|
|
:autoUpload="true" :maxCount="3" :showUploadList="true" :showProgress="false" name="file"
|
|
:deleteable="true" :header="formData" :customBtn="false" @on-list-change="onListChange"
|
|
:beforeUpload="beforeUpload" />
|
|
</view>
|
|
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
|
|
<view class="tn-flex justify-content-item">
|
|
<view class="tn-bg-black tn-color-white tn-text-center"
|
|
style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
|
|
<text class="tn-icon-topics" style="font-size: 30rpx;"></text>
|
|
</view>
|
|
<view class="tn-text-lg tn-padding-right-xs tn-text-bold">
|
|
<text>申请备注</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
|
|
<textarea v-model="desc" maxlength="500" placeholder="积分申请备注" placeholder-style="color:#AAAAAA"></textarea>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 悬浮按钮-->
|
|
<view class="tn-flex tn-footerfixed">
|
|
<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
|
|
<tn-button :disabled="disabled" backgroundColor="#FFA726" padding="40rpx 0" width="60%" shadow fontBold @tap="submitDo">
|
|
<text class="tn-color-white">提 交</text>
|
|
</tn-button>
|
|
</view>
|
|
</view>
|
|
<view class='tn-tabbar-height'></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
scoreList,
|
|
scoreAdd
|
|
} from "@/utils/api";
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
action: 'https://jf.hschool.com.cn/api/common/upload',
|
|
formData: {
|
|
Token: '',
|
|
},
|
|
desc: '',
|
|
fileList: [],
|
|
typeList: [],
|
|
thisType: '',
|
|
imgList:[],
|
|
disabled:false
|
|
}
|
|
},
|
|
mounted() {
|
|
const user = uni.getStorageSync('user');
|
|
this.formData.Token = user.token;
|
|
this.getScoreList();
|
|
},
|
|
methods: {
|
|
onListChange(lists) {
|
|
console.log(lists);
|
|
this.imgList=lists;
|
|
},
|
|
submitDo() {
|
|
console.log(this.imgList);
|
|
if(this.thisType==''){
|
|
uni.showToast({
|
|
title: '请选择申请类型！',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
if(this.imgList.length==0){
|
|
uni.showToast({
|
|
title: '请上传图片！',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
this.disabled=true;
|
|
let mediaList = [];
|
|
this.imgList.forEach(function(item, index) {
|
|
mediaList.push(item.response.data.url);
|
|
});
|
|
var images = mediaList.join(",");
|
|
scoreAdd({
|
|
'score_event_id': this.thisType.id,
|
|
'images': images,
|
|
'desc': this.desc
|
|
})
|
|
.then(res => {
|
|
console.log(res);
|
|
if(res.code==1){
|
|
uni.showToast({
|
|
title: '提交成功！',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
this.desc='';
|
|
this.thisType='';
|
|
this.imgList=[];
|
|
this.fileList=[];
|
|
this.$refs.imageUpload.clear();
|
|
}else{
|
|
this.disabled=false;
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
//this.typeList = res.data.list;
|
|
})
|
|
.catch(error => {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
getScoreList() {
|
|
scoreList()
|
|
.then(res => {
|
|
console.log(res);
|
|
this.typeList = res.data.list;
|
|
})
|
|
.catch(error => {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
beforeUpload(e, list) {
|
|
console.log(e);
|
|
},
|
|
confirm(d) {
|
|
console.log(d);
|
|
const result = this.typeList.find(item => item.id === d[0].value);
|
|
this.thisType = result;
|
|
},
|
|
// 跳转
|
|
tn(e) {
|
|
uni.navigateTo({
|
|
url: e,
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.template-index {
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.tn-tabbar-height {
|
|
min-height: 100rpx;
|
|
height: calc(120rpx + env(safe-area-inset-bottom) / 2);
|
|
}
|
|
|
|
/* 底部tabbar假阴影 start*/
|
|
.bg-tabbar-shadow {
|
|
background-image: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.1) 10rpx, #FFFFFF, #FFFFFF);
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: 450rpx;
|
|
width: 100vw;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 自定义导航栏内容 start */
|
|
.custom-nav {
|
|
height: 100%;
|
|
|
|
&__back {
|
|
margin: auto 5rpx;
|
|
font-size: 40rpx;
|
|
margin-right: 10rpx;
|
|
margin-left: 30rpx;
|
|
flex-basis: 5%;
|
|
}
|
|
|
|
&__search {
|
|
flex-basis: 60%;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&__box {
|
|
width: 100%;
|
|
height: 70%;
|
|
padding: 10rpx 0;
|
|
margin: 0 30rpx;
|
|
border-radius: 60rpx 60rpx 0 60rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
&__icon {
|
|
padding-right: 10rpx;
|
|
margin-left: 20rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
&__text {
|
|
// color: #AAAAAA;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo-image {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.logo-pic {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
// background-attachment:fixed;
|
|
background-position: top;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* 自定义导航栏内容 end */
|
|
|
|
|
|
/* 热门图片 start*/
|
|
.image-tuniao1 {
|
|
padding: 165rpx 0rpx;
|
|
font-size: 40rpx;
|
|
font-weight: 300;
|
|
position: relative;
|
|
}
|
|
|
|
.image-tuniao2 {
|
|
padding: 75rpx 0rpx;
|
|
font-size: 40rpx;
|
|
font-weight: 300;
|
|
position: relative;
|
|
}
|
|
|
|
.image-tuniao3 {
|
|
padding: 90rpx 0rpx;
|
|
font-size: 40rpx;
|
|
font-weight: 300;
|
|
position: relative;
|
|
}
|
|
|
|
.image-pic {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
// background-attachment:fixed;
|
|
background-position: top;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
/* 胶囊banner*/
|
|
.image-capsule {
|
|
padding: 100rpx 0rpx;
|
|
font-size: 40rpx;
|
|
font-weight: 300;
|
|
position: relative;
|
|
}
|
|
|
|
.image-piccapsule {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
// background-attachment:fixed;
|
|
background-position: top;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
|
|
/* 标题 start */
|
|
.nav_title {
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
|
|
&--wrap {
|
|
position: relative;
|
|
display: flex;
|
|
height: 120rpx;
|
|
font-size: 46rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
background-image: url(https://resource.tuniaokj.com/images/title_bg/title00.png);
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
/* 标题 end */
|
|
|
|
/* 业务展示 start */
|
|
.tn-info {
|
|
|
|
&__container {
|
|
margin-top: 10rpx;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
&__item {
|
|
width: 47.7%;
|
|
margin: 15rpx 0rpx 30rpx 0rpx;
|
|
padding: 40rpx 30rpx;
|
|
border-radius: 10rpx;
|
|
|
|
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
opacity: 1;
|
|
transform: scale(1, 1);
|
|
background-size: 100% 100%;
|
|
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
|
|
}
|
|
|
|
&__left {
|
|
|
|
&--icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
font-size: 40rpx;
|
|
margin-right: 20rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
opacity: 1;
|
|
transform: scale(1, 1);
|
|
background-size: 100% 100%;
|
|
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
font-size: 25rpx;
|
|
|
|
&--data {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
margin-top: 5rpx;
|
|
// font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__right {
|
|
&--icon {
|
|
position: absolute;
|
|
right: 0rpx;
|
|
top: 50rpx;
|
|
font-size: 100rpx;
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
|
|
&__bottom {
|
|
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
|
|
border-radius: 0 0 10rpx 10rpx;
|
|
position: absolute;
|
|
width: 85%;
|
|
line-height: 15rpx;
|
|
left: 50%;
|
|
bottom: -15rpx;
|
|
transform: translateX(-50%);
|
|
z-index: -1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-article {
|
|
border-radius: 8rpx;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
|
|
.image-pic {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
// background-attachment:fixed;
|
|
background-position: top;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.article-shadow {
|
|
border-radius: 15rpx;
|
|
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
/* 标签内容 start*/
|
|
.tn-tag-content {
|
|
&__item {
|
|
display: inline-block;
|
|
line-height: 35rpx;
|
|
padding: 0rpx 15rpx;
|
|
}
|
|
}
|
|
</style> |