1316 lines
38 KiB
Vue
1316 lines
38 KiB
Vue
|
<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>
|