141 lines
4.5 KiB
Vue
141 lines
4.5 KiB
Vue
<template lang="pug">
|
||
.participate.content
|
||
.toutu
|
||
img.img(:src='getActivityRecord.enroll_image')
|
||
MyPanel(title='参加活动')
|
||
van-field( v-model="name" label="姓名" placeholder='输入姓名')
|
||
van-field( v-model="tel" label="手机号" placeholder='输入手机号')
|
||
van-field( v-model="message" rows="2" autosize label="作品主题" type="textarea" maxlength="50" placeholder="请输入作品主题" show-word-limit)
|
||
.somCell
|
||
.title.flex
|
||
.left.flex1 上传参赛者照片
|
||
.right.flex1 可上传1-3张
|
||
.center
|
||
//- 图片上传
|
||
.updata_img
|
||
.preview_img(v-for='(item,index) in imgSrcUrl' :key='index')
|
||
img(:src='item')
|
||
van-icon.preview_close(name="close" @click='closeImg(index)')
|
||
.updata_click(@click='updataImg' v-if='imgSrcUrl.length < 3')
|
||
van-icon.preview_plus(name="plus")
|
||
.participate_button(@click='signUp') 提交
|
||
popup(:show='show' title='报名成功' text='感谢您的参与 我们会尽快完成审核' url='/')
|
||
</template>
|
||
<script lang="ts">
|
||
import {Component, Provide, Vue, Inject} from 'vue-property-decorator';
|
||
import { Getter } from 'vuex-class'
|
||
import MyPanel from '@/components/MyPanel.vue'
|
||
import popup from '@/components/Popup.vue'
|
||
|
||
@Component({
|
||
components: {
|
||
MyPanel,
|
||
popup
|
||
}
|
||
})
|
||
export default class Participate extends Vue {
|
||
$http: any
|
||
$utils: any
|
||
|
||
@Getter('getActivityRecord') getActivityRecord: any
|
||
|
||
private name: string = ''
|
||
private tel: string = ''
|
||
private message: string = ''
|
||
|
||
// 图片的base64编码用于预览
|
||
private imgSrcUrl: string[] = []
|
||
// 图片保存在服务器上的id
|
||
private imgSrcId: string[] = []
|
||
|
||
// 控制弹出层
|
||
private show: boolean = false
|
||
|
||
created(){
|
||
document.body.style.backgroundColor = '#ffffff'
|
||
this.wxConfig()
|
||
}
|
||
private async signUp(): Promise<void> {
|
||
if(this.name == ''){
|
||
this.$toast('请输入姓名')
|
||
return
|
||
}
|
||
if(this.tel == ''){
|
||
this.$toast('输入手机号')
|
||
return
|
||
}
|
||
if(this.message == ''){
|
||
this.$toast('请输入作品主题')
|
||
return
|
||
}
|
||
if(this.imgSrcUrl.length <= 0){
|
||
this.$toast('请上传参赛照片')
|
||
return
|
||
}
|
||
let data = {
|
||
user_name: this.name,
|
||
telnum: this.tel,
|
||
title: this.message,
|
||
img: [...this.imgSrcId]
|
||
}
|
||
let rel = await this.$http.PublicService.signUp(data)
|
||
if(rel !== 0){
|
||
this.show = !this.show
|
||
}
|
||
}
|
||
|
||
private async wxConfig(): Promise<void> {
|
||
let data = await this.$http.PublicService.getSignPackage()
|
||
this.$utils.wxConfig(data)
|
||
}
|
||
|
||
// 图片上传
|
||
private async updataImg(): Promise<void> {
|
||
let that = this
|
||
this.$utils.wxSdk((rel: any)=>{
|
||
rel.chooseImage({
|
||
count: 1, // 默认9
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success: function (r: any) {
|
||
rel.getLocalImgData({
|
||
localId: r.localIds[0], // 图片的localID
|
||
success: function (r1: any) {
|
||
const u = navigator.userAgent, app = navigator.appVersion;
|
||
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
|
||
const s = 'data:image/jpg;base64,'
|
||
if(isAndroid){
|
||
that.imgSrcUrl.push(`${s}${r1.localData}`)
|
||
}else{
|
||
that.imgSrcUrl.push(r1.localData)
|
||
}
|
||
}
|
||
});
|
||
rel.uploadImage({
|
||
localId: r.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
|
||
isShowProgressTips: 1, // 默认为1，显示进度提示
|
||
success: function (r2: any) {
|
||
that.imgSrcId.push(r2.serverId)
|
||
},
|
||
fail: (err:any)=>{
|
||
console.log(err,"err");
|
||
}
|
||
});
|
||
}
|
||
});
|
||
})
|
||
}
|
||
|
||
// 删除图片
|
||
private closeImg(index: number) :void {
|
||
let imgSrcUrl = this.imgSrcUrl, imgSrcId = this.imgSrcId;
|
||
imgSrcUrl.splice(index, 1)
|
||
imgSrcId.splice(index, 1)
|
||
this.imgSrcUrl = imgSrcUrl
|
||
this.imgSrcId = imgSrcId
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="stylus" scoped>
|
||
@import "~@assets/stylus/page/participate.styl"
|
||
</style> |