You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1316 lines
38 KiB

6 months ago
<template>
<view :style="'background-color: '+activityData.color">
<form v-if="!posterStatus" @submit="formSubmit">
<view v-if="activityData.activity_name" class='personal-data' :style="viewColor">
<view class='list'>
<!--活动背景图-->
<view class="activity-pic">
<image :src="activityData.pic" class="image" mode="widthFix"></image>
</view>
<view class="wrapper">
<view class="text-info">
<view class="acea-row activity-name">
<view class="title line2">{{activityData.activity_name}}</view>
<view class="share" @click="listenerActionSheet">
<i class="iconfont icon-fenxiang4"></i>
分享
</view>
</view>
<view class="activity-item">
<view class="iconfont icon-huodong-shijian"></view>
<view v-if="activityData.start_time&&activityData.end_time" class="info">
{{formatDate(new Date(activityData.start_time))}} - {{formatDate(new Date(activityData.end_time))}}
</view>
</view>
<view class="activity-item">
<view class="iconfont icon-huodong-renshu"></view>
<view class="info">{{activityData.count == 0 ? '不限人数' : activityData.count+'人'}}</view>
</view>
<view class="activity-item">
<view class="iconfont icon-huodong-renshu"></view>
<view class="info info-theme">
{{activityData.total}}
</view>
</view>
<view class="acea-row">
<view class="iconfont icon-huodong-jianjie"></view>
<view class="info acea-info">{{activityData.info}}</view>
</view>
</view>
</view>
<view class='wrapper' :class="{'form-wrapper' : disabled}" v-if="formData.length">
<view class='item acea-row row-between-wrapper' :class="{on:(item.name=='radios' || item.name=='checkboxs'),on2:item.name == 'dateranges',on3:item.name == 'citys'}" v-for="(item,index) in formData" :key="index">
<view class="name">
{{ item.titleConfig.value }}
<span class="asterisk" v-if="item.titleShow.val">*</span>
</view>
<!-- radio -->
<view v-if="item.name=='radios'" class="discount">
<radio-group @change="radioChange($event, index, item)" class="acea-row row-middle row-right item-select" :class="disabled == 1 ? 'disabled' : ''">
<label class="radio" v-for="(j,jindex) in item.wordsConfig.list" :key="jindex">
<view class="acea-row row-middle">
<!-- #ifndef MP -->
<radio :value="jindex.toString()" :checked='j.show'/>
<!-- #endif -->
<!-- #ifdef MP -->
<radio :value="jindex" :checked='j.show'/>
<!-- #endif -->
<view>{{j.val}}</view>
</view>
</label>
</radio-group>
</view>
<!-- checkbox -->
<view v-if="item.name=='checkboxs'" class="discount">
<checkbox-group @change="checkboxChange($event, index, item)" class="acea-row row-middle row-right item-select" :class="disabled == 1 ? 'disabled' : ''">
<label class="radio" v-for="(j,jindex) in item.wordsConfig.list" :key="jindex">
<view class="acea-row row-middle">
<!-- #ifndef MP -->
<checkbox :value="jindex.toString()" :checked="j.show" style="transform:scale(0.9)" />
<!-- #endif -->
<!-- #ifdef MP -->
<checkbox :value="jindex" :checked="j.show" style="transform:scale(0.9)" />
<!-- #endif -->
<view>{{j.val}}</view>
</view>
</label>
</checkbox-group>
</view>
<!-- text -->
<view v-if="item.name=='texts' && item.valConfig.tabVal == 0" class="discount">
<input type="text" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled"/>
</view>
<!-- number -->
<view v-if="item.name=='texts' && item.valConfig.tabVal == 4" class="discount">
<input type="number" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled"/>
</view>
<!-- email -->
<view v-if="item.name=='texts' && item.valConfig.tabVal == 3" class="discount">
<input type="text" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled"/>
</view>
<!-- date -->
<view v-if="item.name=='dates'" class="discount">
<picker mode="date" :value="item.value" @change="bindDateChange($event,index)" :class="item.value.length ? '' : 'placeholder'">
<view class="acea-row row-between-wrapper">
<view v-if="item.value == ''">{{item.tipConfig.value}}</view>
<view v-else>{{item.value}}</view>
<text class='iconfont icon-jiantou'></text>
</view>
</picker>
</view>
<!-- dateranges -->
<view v-if="item.name=='dateranges'" class="discount" :class="item.value.length ? '' : 'placeholder'">
<uni-datetime-picker v-model="item.value" type="daterange" @maskClick="maskClick" :class="disabled == 1 ? 'disabled' : ''">
{{item.value.length?item.value[0]+' - '+item.value[1]:item.tipConfig.value}}
<text class='iconfont icon-jiantou'></text>
</uni-datetime-picker>
</view>
<!-- time -->
<view v-if="item.name=='times'" class="discount" :class="item.value.length ? '' : 'placeholder'">
<picker mode="time" :value="item.value" @change="bindTimeChange($event,index)"
:placeholder="item.tipConfig.value" :class="disabled == 1 ? 'disabled' : ''">
<view class="acea-row row-between-wrapper">
<view v-if="item.value == ''">{{item.tipConfig.value}}</view>
<view v-else>{{item.value}}</view>
<text class='iconfont icon-jiantou'></text>
</view>
</picker>
</view>
<!-- timeranges -->
<view v-if="item.name=='timeranges'" class="discount acea-row row-between-wrapper" @click="getTimeranges(index)" :class="item.value.length ? '' : 'placeholder'">
<view v-if="item.value">{{item.value}}</view>
<view v-else>{{item.tipConfig.value}}</view>
<text class='iconfont icon-jiantou'></text>
</view>
<!-- select -->
<view v-if="item.name=='selects'" class="discount">
<picker :value="item.value" :range="item.wordsConfig.list" @change="bindSelectChange($event,index,item)" range-key="val" :class="disabled ? 'disabled' : ''">
<view class="acea-row row-between-wrapper">
<view v-if="item.value">{{item.value}}</view>
<view v-else class="placeholder">请选择</view>
<text class='iconfont icon-jiantou'></text>
</view>
</picker>
</view>
<!-- city -->
<view v-if="item.name=='citys'" class="discount" @click="changeRegion(index)" :class="disabled ? 'disabled' : ''">
<view class="acea-row row-middle row-right">
<view class="city" v-if="item.value == ''">{{item.tipConfig.value}}</view>
<view class="city item-select" v-else>{{item.value}}</view>
<text class='iconfont icon-jiantou'></text>
</view>
</view>
<!-- id -->
<view v-if="item.name=='texts' && item.valConfig.tabVal == 2" class="discount">
<input type="idcard" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled" />
</view>
<!-- phone -->
<view v-if="item.name=='texts' && item.valConfig.tabVal == 1" class="discount">
<input type="number" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled" />
</view>
<!-- img -->
<view v-if="item.name=='uploadPicture'" class="confirmImg" style="padding-bottom: 0;">
<view class='upload acea-row row-middle'>
<view class='pictrue' v-for="(items,indexs) in item.value" :key="indexs">
<image :src='items' mode="aspectFill"></image>
<view v-if="!disabled" class="close acea-row row-center-wrapper" @tap='DelPic(index,indexs)'>
<view class="iconfont icon-guanbi5"></view>
</view>
</view>
<view class='pictrue acea-row row-center-wrapper row-column' @tap.stop='uploadpic(index)'
v-if="item.value.length < item.numConfig.val && !disabled">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="footer">
<button v-if="activityData.time_status==-1" class='modifyBnt disabled'>已结束</button>
<button v-else-if="activityData.count==activityData.total && activityData.count!=0" class='modifyBnt disabled'>已报满</button>
<button v-else-if="disabled && activityData.time_status==1" class='modifyBnt' @click="listenerActionSheet">分享好友</button>
<block v-else>
<button v-if="activityData.time_status==1" class='modifyBnt' formType="submit">提交报名</button>
<button v-else-if="activityData.time_status==0" class='modifyBnt disabled'>未开始</button>
</block>
</view>
</view>
</form>
<timeranges :isShow='isShow' :time='timeranges' @confrim="confrim" @cancel="cancels"></timeranges>
<!--提交成功弹窗-->
<view class="success" v-if="isShowbox">
<view class="bg" @click="isShowbox=false"></view>
<view class="con">
<image :src="domain+'/static/images/sign_success.png'" mode=""></image>
<view class="title">报名成功</view>
<view class="text">感谢参与您已完成报名</view>
<view class="foot">
<navigator url="/pages/activity/my_registrate/index" hover-class='none' class="btn">查看详情</navigator>
<view class="btn" @click="listenerActionSheet">分享报名</view>
</view>
</view>
</view>
<!-- 分享按钮 -->
<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
<!-- #ifndef MP -->
<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox=true;posters=false;">
<view class="iconfont icon-weixin3"></view>
<view class="">发送给朋友</view>
</button>
<!-- #endif -->
<!-- #ifdef MP -->
<button class="item" :class="weixinStatus ? 'item3' : ''" open-type="share" hover-class='none' @click="goFriend">
<view class="iconfont icon-weixin3"></view>
<view class="">发送给朋友</view>
</button>
<!-- #endif -->
<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @tap="goPoster">
<view class="iconfont icon-haibao"></view>
<view class="">生成海报</view>
</button>
</view>
<view class="mask" v-if="posters" @click="listenerActionClose"></view>
<!-- 发送给朋友图片 -->
<view class="share-box" v-if="H5ShareBox">
<image :src="`${domain}/static/images/share-info.png`" @click="H5ShareBox=false;"></image>
</view>
<areaWindow ref="areaWindow" :display="display" :address='addressInfoArea' :cityShow='cityShow' @submit="OnAreaAddress" @changeClose="changeAddressClose"></areaWindow>
<!--分享海报-->
<view class='distribution-posters' v-if="posterStatus">
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
@change="bindchange" previous-margin="40px" next-margin="40px">
<block v-for="(item,index) in spreadData" :key="index" class="img-list">
<swiper-item class="aaa">
<div class="box" ref="bill" :class="swiperIndex == index ? 'active' : 'quiet'">
<view class="user-msg">
<view class="user-code">
<image class="canvas" :style="{height:hg+'px'}" :src="posterImage[index]"
v-if="posterImage[index]"></image>
<canvas class="canvas" :style="{height:hg+'px'}" :canvas-id="'myCanvas'+ index"
v-else></canvas>
</view>
</view>
</div>
<!-- <image :src="item.wap_poster" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill' /> -->
</swiper-item>
</block>
</swiper>
<!-- #ifndef H5 -->
<view class='keep b-color' @click='savePosterPath(posterImage[swiperIndex])' :style="viewColor">保存海报</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
const CACHE_CITY = {};
import { registrateDetail, registrateCreate, registrateRecordDetail,
registratePoster, imgToBase } from '@/api/user.js';
import shareScence from '@/libs/spread';
import { switchH5Login, getCity } from '@/api/api.js';
import { mapGetters } from "vuex";
import { toLogin } from '@/libs/login.js';
import { HTTP_REQUEST_URL } from '@/config/app';
import dayjs from "@/plugin/dayjs/dayjs.min.js";
import areaWindow from '@/components/areaWindow';
import timeranges from '@/components/timeranges';
export default {
data() {
return {
domain: HTTP_REQUEST_URL,
userInfo: {},
activityData: {},
formData: {},
loginType: 'h5', //app.globalData.loginType
activity_id: "",
isShowbox: false,
selectIndex:0,
timerangesIndex:0,
newImg: [],
display: false,
cityShow: 2,
addressInfoArea: [],
timeranges: [],
mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false,
posters: false,
weixinStatus: false,
posterStatus: false,
H5ShareBox: false,
disabled: false,
isShow:false,
imgUrls: [],
indicatorDots: false,
posterImageStatus: true,
circular: false,
autoplay: false,
interval: 3000,
duration: 500,
swiperIndex: 0,
spreadList: [],
spid: "",
poster: '',
spreadData: [{}], //新海报数据
nickName: "",
siteName: "",
mpUrl: "",
canvasImageUrl: '',
posterImage: [],
//二维码参数
codeShow: false,
cid: '1',
ifShow: true,
val: "", // 要生成的二维码值
size: 200, // 二维码大小
unit: 'upx', // 单位
background: '#FFF', // 背景色
foreground: '#000', // 前景色
pdground: '#32dbc6', // 角标色
icon: '', // 二维码图标
iconsize: 40, // 二维码图标大小
lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
onval: true, // val值变化时自动重新生成二维码
loadMake: true, // 组件加载完成后自动生成二维码
src: '', // 二维码生成后的图片地址或base64
codeSrc: "",
wd: 225,
hg: 500
};
},
components: {
areaWindow,
timeranges,
},
computed:{
...mapGetters(['isLogin','viewColor','keyColor']),
},
watch: {
},
onLoad(option) {
this.activity_id = option.id
this.spid = option.spid
let current = (dayjs(new Date(Number(new Date().getTime()))).format('HH:mm')).split(':');
let currentArray = current;
currentArray.push(0);
let arrayNew = [];
[...currentArray,...current].forEach(item=>{
arrayNew.push(Number(item))
})
this.timeranges = arrayNew;
if (this.isLogin) {
this.registrateDetail();
shareScence(this.spid,this.isLogin)
}else{
toLogin()
}
},
onShow() {
},
/**
* 用户点击右上角分享
*/
// #ifdef MP
onShareAppMessage: function() {
let that = this;
that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
return {
title: that.activityData.activity_name || '',
imageUrl: that.activityData.pic || '',
path: '/activity/registrate_activity/index?id=' + that.activity_id + '&spid=' + that.uid,
}
},
onShareTimeline: function() {
let that = this;
that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
return {
title: that.activityData.activity_name || '',
query: {
id: that.activity_id,
spid: that.uid
},
imageUrl: that.activityData.pic || ''
}
},
// #endif
methods: {
/*判断时间大小*/
compareTime(time) {
var date1 = new Date(time);
var date2 = new Date();
if (date1 > date2) {
return true;
} else if (date1 <= date2) {
return false;
}
},
formatDate(date){
let year = date.getFullYear();
let month = date.getMonth()+1;
let day = date.getDate();
let H = date.getHours();
let M = date.getMinutes();
let S = date.getSeconds();
month = month < 10 ?'0'+ month : month;
day = day < 10 ?'0'+ day : day;
H = H < 10 ?'0'+ H : H;
M = M < 10 ?'0'+ M : M;
S = S < 10 ?'0'+ S : S;
return year+'.'+month+'.'+day +'.'+H +':'+M;
},
/**
* 获取表单数据详情
*/
registrateDetail: function() {
let that = this;
uni.showLoading()
registrateDetail(that.activity_id).then(res => {
uni.hideLoading()
let data = res.data;
if(data.activity_related_id){
that.disabled = true
that.getRecordDetail(data.activity_related_id)
}else{
that.$set(that, 'activityData', data);
that.disabled = that.compareTime(data.end_time) ? false : true
if(that.disabled){
return this.$util.Tips({
title: '活动已结束'
}, {
tab: 3,
url: 1
})
}
if(data.systemForm&&data.systemForm.value){
let formData = that.objToArr(data.systemForm.value)
that.filterData(formData)
}else{
return this.$util.Tips({
title: '关联表单已被删除'
}, {
tab: 3,
url: 1
})
}
}
}).catch(err => {
uni.hideLoading();
return this.$util.Tips({
title: err
}, {
tab: 3,
url: 1
})
})
},
getRecordDetail(id){
let that = this
registrateRecordDetail(id).then(res => {
uni.hideLoading()
let data = res.data;
that.$set(that, 'activityData', data.activity);
let formData = that.objToArr(data.form_value)
formData.forEach((item, index)=>{
for(var i in data.value){
if(item['key'] == i){
item.value = data.value[i]
if(item['name']=='checkboxs' || item['name']=='radios'){
let valueList = data.value[i].split(',')
item['wordsConfig']['list'].forEach((list,idx)=>{
valueList.forEach((val,i)=>{
if(list['val'] == val){
item['wordsConfig']['list'][idx]['show'] = true
}
})
})
}
}
}
})
function sortNumber(a, b) {
return a.timestamp - b.timestamp;
}
formData.sort(sortNumber);
that.$set(that, 'formData', formData);
}).catch(err => {
uni.hideLoading();
return that.$util.Tips({
title: err
}, {
tab: 3,
url: 1
})
})
},
filterData(formData){
let that = this;
formData.forEach((item, index, arr)=>{
that.$set(item, 'value', "");
CACHE_CITY[index] = ''; //清空省市区
if(item.name == 'texts'){
if(item.defaultValConfig.value){
item.value = item.defaultValConfig.value
}else{
item.value = ''
}
}else if(item.name == 'radios'){
item.value = item.wordsConfig.list[0].val
}else if(item.name == 'uploadPicture'){
item.value = [];
}else if(item.name == 'dateranges'){
if(item.valConfig.tabVal==0){
if(item.valConfig.tabData==0){
let obj = dayjs(new Date(Number(new Date().getTime()))).format('YYYY-MM-DD');
item.value = [obj,obj]
}else{
let data1 = dayjs(new Date(Number(new Date(item.valConfig.specifyDate[0]).getTime()))).format('YYYY-MM-DD');
let data2 = dayjs(new Date(Number(new Date(item.valConfig.specifyDate[1]).getTime()))).format('YYYY-MM-DD');
item.value = [data1,data2];
}
}else{
item.value = [];
}
}else{
if(['times','dates','timeranges'].indexOf(item.name) != -1){
if(item.valConfig.tabVal==0){
if(item.valConfig.tabData==0){
if(item.name == 'times'){
item.value = dayjs(new Date(Number(new Date().getTime()))).format('HH:mm');
}else if(item.name == 'dates'){
item.value = dayjs(new Date(Number(new Date().getTime()))).format('YYYY-MM-DD');
}else{
let current = dayjs(new Date(Number(new Date().getTime()))).format('HH:mm');
item.value = current+' - '+current;
}
}else{
if(item.name == 'times' || item.name == 'dates'){
item.value = item.valConfig.specifyDate;
}else{
item.value = item.valConfig.specifyDate[0]+' - '+item.valConfig.specifyDate[1];
}
}
}else{
item.value = '';
}
}else if(item.name == 'city'){
item.value = '';
}else{
item.value = '';
}
}
})
function sortNumber(a, b) {
return a.timestamp - b.timestamp;
}
formData.sort(sortNumber);
that.$set(that, 'formData', formData);
},
// 对象转数组
objToArr(data) {
let obj = Object.keys(data);
let m = obj.map(key => data[key]);
return m;
},
// 单选
radioChange(e, index, item){
this.formData[index].value = item.wordsConfig.list[e.detail.value].val
},
clickTextArea() {
this.$refs.textarea.focus()
},
bindDateChange(e, index) {
this.formData[index].value = e.target.value
this.$forceUpdate()
},
bindTimeChange(e, index) {
this.formData[index].value = e.target.value
},
bindSelectChange(e, index, item) {
this.$set(this.formData[index], 'value', item.wordsConfig.list[e.detail.value].val);
},
getTimeranges(index){
this.isShow = true
this.timerangesIndex = index
},
confrim(e){
this.isShow = false;
this.formData[this.timerangesIndex].value = e.time;
let arrayNew = [];
e.val.forEach(item=>{
arrayNew.push(Number(item))
})
this.timeranges = arrayNew;
},
cancels(){
this.isShow = false;
},
// 多选
checkboxChange(e, index, item){
let obj = e.detail.value;
let val = '';
item.wordsConfig.list.forEach((j,jindex)=>{
obj.forEach(x=>{
if(jindex == x){
val = val +(val?',':'') + j.val;
}
})
})
this.formData[index].value = val
},
OnAreaAddress(address){
let addr = '';
addr = address.map(v=>v.name).join('/');
this.formData[this.timerangesIndex].value = addr;
CACHE_CITY[this.timerangesIndex] = address;
},
changeRegion(index){
if(!this.formData[index].value){
this.addressInfoArea = [];
}
this.timerangesIndex = index;
this.cityShow = Number(this.formData[index].valConfig.tabVal) + 1;
this.display = true;
if(CACHE_CITY[index]){
this.addressInfoArea = CACHE_CITY[index];
}
},
// 关闭地址弹窗;
changeAddressClose: function() {
this.display = false;
},
/**上传文件*/
uploadpic: function(index) {
let that = this;
this.$util.uploadImageOne('upload/image', function(res) {
that.newImg.push(res.data.path);
that.$set(that.formData[index], 'value', that.newImg);
});
},
/**
* 删除图片
*
*/
DelPic: function(index, indexs) {
let that = this,
pic = this.formData[index].value;
that.formData[index].value.splice(indexs, 1);
that.$set(that.formData[index], 'value', that.formData[index].value);
},
/**
* 提交修改
*/
formSubmit: function(e) {
let that = this,parmas={};
if(!that.isLogin){
toLogin()
}else{
for (var i = 0; i < that.formData.length; i++) {
let data = that.formData[i]
if (['radios'].indexOf(data.name) == -1 && (data.titleShow.val || (['uploadPicture','dateranges'].indexOf(data.name) == -1 && data.value && data.value.trim()))) {
if ((data.name === 'texts' && data.valConfig.tabVal == 0) || ['dates','times','selects','citys','checkboxs'].indexOf(data.name) != -1) {
if (!data.value || (data.value && !data.value.trim())) {
return that.$util.Tips({
title: `请选择${data.titleConfig.value}`
});
}
}
if(data.name === 'timeranges'){
if(!data.value){
return that.$util.Tips({
title: `请选择${data.titleConfig.value}`
});
}
}
if (data.name === 'dateranges') {
if (!data.value.length) {
return that.$util.Tips({
title: `请选择${data.titleConfig.value}`
});
}
}
if (data.name === 'texts' && data.valConfig.tabVal == 4) {
if (data.value <= 0) {
return that.$util.Tips({
title: `请填写大于0的${data.titleConfig.value}`
});
}
}
if (data.name === 'texts' && data.valConfig.tabVal == 3) {
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(data.value)) {
return that.$util.Tips({
title: `请填写正确的${data.titleConfig.value}`
});
}
}
if (data.name === 'texts' && data.valConfig.tabVal == 1) {
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(data.value)) {
return that.$util.Tips({
title: `请填写正确的${data.titleConfig.value}`
});
}
}
if (data.name === 'texts' && data.valConfig.tabVal == 2) {
if (!
/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/i
.test(data.value)) {
return that.$util.Tips({
title: `请填写正确的${data.titleConfig.value}`
});
}
}
if (data.name === 'uploadPicture') {
if (!data.value.length) {
return that.$util.Tips({
title: `请上传${data.titleConfig.value}`
});
}
}
}
parmas[data.key]=data.value
}
}
uni.showLoading({
title: '提交中',
mask: true
});
registrateCreate(that.activity_id,parmas).then(res => {
uni.hideLoading();
that.isShowbox = true;
}).catch(err => {
uni.hideLoading();
return that.$util.Tips({
title: err
});
});
},
/**
* 分享打开
*
*/
listenerActionSheet: function() {
if (this.isLogin == false) {
toLogin()
} else {
// #ifdef H5
if (this.$wechat.isWeixin() === true) {
this.weixinStatus = true;
}
// #endif
this.posters = !this.posters;
}
},
// 分享关闭
listenerActionClose: function() {
this.posters = false;
},
bindchange(e) {
this.swiperIndex = e.detail.current;
},
async goPoster() {
var that = this;
that.posters = false;
that.posterStatus = true;
this.isShowbox = false;
this.$nextTick(() => {
let selector = uni.createSelectorQuery().select('.aaa');
selector.fields({
size: true
}, data => {
console.log(data)
this.wd = data.width
this.hg = data.height
}).exec();
})
await this.getPosters()
},
//获取图片
async getPosters() {
let that = this
let rqData = {
id: that.activityData.activity_id,
// #ifdef MP
type: 'routine',
// #endif
// #ifndef MP
type: 'h5',
// #endif
}
let res = await registratePoster(that.activityData.activity_id)
that.spreadData = res.data.poster
that.nickName = res.data.nickname
// #ifdef MP || APP-PLUS
let mpUrl = await that.downloadFilestoreImage(res.data.qrcode)
// #endif
// #ifdef H5 || APP-PLUS
let qrCode = await that.imgToBase(res.data.qrcode)
// #endif
uni.showLoading({
title: '海报生成中',
mask: true
});
for (let i = 0; i < res.data.poster.length; i++) {
let arr2
// #ifdef MP || APP-PLUS
arr2 = [mpUrl, await that.downloadFilestoreImage(res.data.poster[i])]
// #endif
// #ifdef H5
let img = await that.imgToBase(res.data.poster[i])
arr2 = [qrCode, img]
// #endif
that.$util.userPosterCanvas(arr2, res.data.nickname, res.data.mark, i, that.wd, that.hg, (tempFilePath) => {
that.$set(that.posterImage, i, tempFilePath);
});
uni.hideLoading();
}
},
async imgToBase(url) {
let res = await imgToBase({
image: url
})
return res.data.image
},
//图片转符合安全域名路径
downloadFilestoreImage(url) {
return new Promise((resolve, reject) => {
let that = this;
uni.downloadFile({
url: url,
success: function(res) {
resolve(res.tempFilePath);
},
fail: function() {
return that.$util.Tips({
title: ''
});
}
});
})
},
savePosterPath(url) {
let that = this;
// #ifdef MP
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function(res) {
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
});
}
});
} else {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function(res) {
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
});
}
}
});
// #endif
// #ifdef APP-PLUS
uni.saveImageToPhotosAlbum({
filePath: url,
success: function(res) {
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
});
// #endif
},
// 小程序关闭分享弹窗;
goFriend: function() {
this.posters = false;
// this.H5ShareBox = true
},
}
}
</script>
<style scoped lang="scss">
/deep/radio .wx-radio-input.wx-radio-input-checked,
/deep/uni-radio .uni-radio-input.uni-radio-input-checked {
border: 1px solid var(--view-theme)!important;
background-color: var(--view-theme)!important;
}
/deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked,
/deep/checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border: 1px solid var(--view-theme)!important;
background-color: var(--view-theme)!important;
color: #fff!important;
}
.personal-data{
padding-bottom: 150rpx;
padding-bottom: calc(150rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
padding-bottom: calc(150rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
min-height: 100vh;
}
.personal-data .activity-pic{
display: flex;
align-items: center;
justify-content: center;
.image{
width: 100%;
}
}
.personal-data .wrapper {
background-color: #fff;
width: 710rpx;
border-radius: 16rpx;
margin: 0 auto;
position: relative;
top: -20rpx;
+.wrapper{
margin-top: 20rpx;
}
}
.form-wrapper{
pointer-events: none;
}
.personal-data .wrapper .text-info{
padding: 30rpx;
>view{
+view{
margin-top: 30rpx;
}
}
.activity-name{
justify-content: space-between;
.title{
width: 580rpx;
color: #282828;
font-size: 32rpx;
font-weight: bold;
}
}
.share{
text-align: center;
color: #666666;
font-size: 18rpx;
cursor: pointer;
.icon-fenxiang4{
display: block;
color: #282828;
font-size: 34rpx;
margin: 0 0 3rpx 0;
}
}
.iconfont{
margin-right: 17rpx;
}
.activity-item{
display: flex;
align-items: center;
}
}
.personal-data .wrapper .text-info .iconfont{
color: #666666;
}
.personal-data .wrapper .text-info .info{
color: #282828;
&.info-theme{
color: var(--view-theme);
}
}
.personal-data .wrapper .text-info .acea-info{
width: 600rpx;
text-align: justify;
word-break: break-all;
}
.personal-data .wrapper .item .name {
position: relative;
width: 190rpx;
}
.personal-data .wrapper .item {
padding: 27rpx 30rpx;
font-size: 28rpx;
color: #282828;
position: relative;
&::after{
content: "";
width: 670rpx;
border-bottom: 1px solid #eee;
position: absolute;
bottom: 0;
}
}
.personal-data .wrapper .disabled{
pointer-events: none;
}
.personal-data .wrapper .item.on{
padding: 16rpx 30rpx;
align-items: baseline;
}
.personal-data .wrapper .item.on3{
align-items: baseline;
}
.personal-data .wrapper .item .discount {
color: #282828;
font-size: 30rpx;
}
.personal-data .wrapper .item.on .discount,
.personal-data .wrapper .item.on3 .discount{
width: 460rpx;
text-align: right;
}
.personal-data .wrapper .item .item-select{
color: #282828;
}
.personal-data .wrapper .item.on3 .discount .city{
width: 400rpx;
color: #ccc;
&.item-select{
color: #282828;
}
}
.personal-data .wrapper .item .discount input {
text-align: right;
width: 450rpx;
}
.personal-data .wrapper .item .discount .iconfont {
color: #BBBBBB;
font-size: 28rpx;
margin-left: 15rpx;
}
.personal-data .wrapper .item .discount .num {
font-size: 32rpx;
margin-right: 20rpx;
}
.personal-data .wrapper .item .discount .radio{
margin: 0 22rpx 0 22rpx;
padding: 10rpx 0;
}
.personal-data .wrapper .item .discount .radio /deep/uni-checkbox .uni-checkbox-input{
border-radius: 0;
}
.personal-data .wrapper .item textarea {
background-color: #f9f9f9;
width: 650rpx;
height: 140rpx;
border-radius: 3rpx;
margin-top: 30rpx;
padding: 25rpx 28rpx;
box-sizing: border-box;
}
.personal-data .wrapper .item .placeholder {
color: #ccc;
font-size: 30rpx;
}
.asterisk{
color: red;
}
.footer{
background: #ffffff;
width: 750rpx;
height: 126rpx;
height: calc(126rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
height: calc(126rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
bottom: 0;
}
.personal-data .modifyBnt {
font-size: 32rpx;
color: var(--view-theme);
background-color: #ffffff;
border: 1px solid var(--view-theme);
width: 690rpx;
height: 90rpx;
border-radius: 50rpx;
text-align: center;
line-height: 90rpx;
&.disabled{
color: #ffffff;
background-color: #BBBBBB;
border-color: #BBBBBB;
}
}
.success {
z-index: 10;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.con {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 520rpx;
height: 526rpx;
background: #fff;
border-radius: 10rpx;
font-size: 34rpx;
color: #282828;
image {
width: 214rpx;
height: 180rpx;
}
.title{
color: #282828;
font-size: 32rpx;
font-weight: bold;
}
.text{
color: #999999;
font-size: 26rpx;
margin-top: 30rpx;
}
.foot {
height: 78rpx;
border-top: 1px solid #EAEAEA;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
.btn{
color: #999999;
font-size: 26rpx;
width: 50%;
text-align: center;
height: 78rpx;
display: flex;
align-items: center;
justify-content: center;
+.btn{
color: #E93323;
position: relative;
&::before{
content: "";
display: block;
width: 1px;
height: 78rpx;
background: #EAEAEA;
position: absolute;
left: 0;
top: 0;
}
}
}
}
}
}
.generate-posters {
width: 100%;
height: 170rpx;
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
z-index: 301;
transform: translate3d(0, 100%, 0);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
border-top: 1rpx solid #eee;
}
.generate-posters.on {
transform: translate3d(0, 0, 0);
}
.generate-posters .item {
/* #ifdef H5 */
flex: 50%;
/* #endif */
/* #ifndef H5 */
flex: 33.33%;
/* #endif */
text-align: center;
font-size: 30rpx;
&.item3{
flex: 33.33%;
}
}
.generate-posters .item .iconfont {
font-size: 80rpx;
color: #5eae72;
}
.generate-posters .item .iconfont.icon-haibao {
color: #5391f1;
}
.generate-posters .item .iconfont.icon-fuzhikouling1 {
color: #FBB324;
}
.distribution-posters{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #a3a3a3;
}
.canvas {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.box {
width: 100%;
height: 100%;
position: relative;
border-radius: 18rpx;
overflow: hidden;
.user-msg {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.user-code {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
image {
width: 100%;
}
}
}
}
.img-list {
margin-right: 40px;
}
.distribution-posters swiper {
width: 100%;
height: 1000rpx;
position: relative;
margin-top: 40rpx;
}
.distribution-posters .slide-image {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 15rpx;
}
.distribution-posters /deep/.active {
transform: none;
transition: all 0.2s ease-in 0s;
}
.distribution-posters /deep/ .quiet {
transform: scale(0.8333333);
transition: all 0.2s ease-in 0s;
}
.distribution-posters .keep {
font-size: 30rpx;
color: #fff;
width: 600rpx;
height: 80rpx;
border-radius: 50rpx;
text-align: center;
line-height: 80rpx;
margin: 38rpx auto;
background-color: var(--view-theme);
}
.share-box {
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
}
}
</style>