<template> <view class="page"> <view class="scoped-header" v-if="curObj.estate_name"> <view class="p1" style="color: #f00;font-weight: bold;">{{ curObj.estate_name || '' }} {{ curObj.remark || '' }}</view> <view class="p2" style="color: #f00;font-weight: bold;">截至时间:{{ curObj.end_at || '' }}</view> <view class="img"> <view class="t">点击二维码进群:</view> <image class="i" :src="curObj.image" mode="widthFix" @click="codePreview" /> </view> </view> <view class="form" v-if="curObj.estate_name"> <u-form :model="form" ref="uForm"> <u-form-item label-width="150" label="抖音名" prop="info1" required> <u-input placeholder="请输入抖音名" v-model="form.info1" type="text"></u-input> </u-form-item> <u-form-item label-width="150" label="抖音账号" prop="info2" required> <u-input placeholder="请输入抖音账号" v-model="form.info2" type="text"></u-input> </u-form-item> <u-form-item label-width="150" label="姓名" prop="info3" required> <u-input placeholder="请输入姓名" v-model="form.info3" disabled type="text"></u-input> </u-form-item> <u-form-item label-width="150" label="电话" prop="info4" required> <u-input placeholder="请输入电话" v-model="form.info4" disabled type="number"></u-input> </u-form-item> <u-form-item label-width="150" label="微信号" prop="info5" required> <u-input placeholder="请输入微信号" v-model="form.info5" type="text"></u-input> </u-form-item> <u-form-item label-width="150" label="粉丝数量" prop="info6" required> <u-input style="width: 100px;display: inline-block;" placeholder="请输入粉丝数量" v-model="form.info6" type="number"></u-input>个(单位) </u-form-item> <u-form-item label-width="150" label="获赞数量" prop="info7" required> <u-input style="width: 100px;display: inline-block;" placeholder="请输入获赞数量" v-model="form.info7" type="number"></u-input>个(单位) </u-form-item> <u-form-item label-width="150" label="所属区域" prop="info8" required> <u-input placeholder="请输入所属区域" v-model="form.info8" type="text" disabled @click="areaOpen"></u-input> </u-form-item> </u-form> <u-gap height="60"></u-gap> <u-button type="primary" @click="submitHandle">提交</u-button> </view> <view v-else class="t">暂无数据</view> <u-select v-model="isareaShow" :list="areaList" label-name="dict_label" @confirm="areaClose"></u-select> </view> </template> <script> import { arrToObj } from '@/utils' export default { data() { const userInfo2 = uni.getStorageSync('MD_userInfo2') return { curId: '', curObj: {}, isareaShow: false, areaList: [], form: { info1: null, info2: null, info3: userInfo2.nickname, info4: userInfo2.phone, info5: null, info6: null, info7: null, info8: null, }, eIds: [], eArr: [], phoneBefore3: '', phoneAfter4: '', customer_id: null, submitButtonDisabled: true, rules: { info1: [ { required: true, message: '抖音名不得为空', trigger: ['change', 'blur'] }, ], info2: [ { required: true, message: '抖音账号不得为空', trigger: ['change', 'blur'] }, ], info3: [ { required: true, message: '姓名不得为空', trigger: ['change', 'blur'] }, ], info4: [ { required: true, message: '电话不得为空', trigger: ['change', 'blur'] }, ], info5: [ { required: true, message: '微信号不得为空', trigger: ['change', 'blur'] }, ], info6: [ { required: true, message: '粉丝数量不得为空', trigger: ['change', 'blur'] }, ], info7: [ { required: true, message: '获赞数量不得为空', trigger: ['change', 'blur'] }, ], }, propertySelectShow: false, propertySelectList: [], estateList: [], areaTypeObj: {}, userInfo2: {}, curEstateName: '', salerSelectShow: false, salerSelectList: [], submitModalShow: false, modalShow: false, modalContent: '' }; }, onLoad(data) { const curId = data.id this.curId = curId || '' uni.api.cust.apiactivityinfo({id: this.curId}).then(res => { this.curObj = res.activity || {} }) }, onShareAppMessage(options) { var shareObj = { title: `${this.curObj.estate_name}${this.curObj.remark}`, path: `/pages/agent/activity/join?id=${this.curId}`, success: function(res) { }, complete: function(res) { console.log(res) }, } return shareObj }, onShareTimeline(options) { var shareObj = { title: `${this.curObj.estate_name}${this.curObj.remark}`, path: `/pages/agent/activity/join?id=${this.curId}`, success: function(res) { }, complete: function(res) { console.log(res) }, } return shareObj }, created () { const dictObj = uni.getStorageSync('MD_dict') || {} const atArr = dictObj.area_type || [] let areaList = [] atArr.forEach(item => { if (item.dict_label !== '独家合作' && item.dict_label !== '安义县' && item.dict_label !== '宜春' ) { areaList.push(item) } }) this.areaList = [...areaList] }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, methods: { codePreview () { const imgUrl = this.curObj.image if (imgUrl) { uni.previewImage({ current: imgUrl, urls: [imgUrl] }) } }, areaOpen () { this.isareaShow = true }, areaClose (arr) { this.isareaShow = false if (arr) { this.form.info8 = arr[0].label } }, phoneHandle () { let p = this.form.phone p = p.replace(/ /g, '') this.form.phone = p this.form = {...this.form} }, getEstateList () { uni.api.estate.apiestatelist({page_size: 100, report_open: 1, is_pub: 1, estate_name: this.curEstateName}).then(res => { let list = res.list || [] this.estateList = [...list] }) }, listItemHandle (val) { let eIds = [...this.eIds] let eArr = [...this.eArr] let cIndex = eIds.indexOf(val.estate_id) if (cIndex > -1 ) { eIds.splice(cIndex,1) eArr.splice(cIndex,1) } else { eIds.push(val.estate_id) eArr.push(val) } this.eIds = [...eIds] this.eArr = [...eArr] }, clearListHandle () { this.propertySelectShow = false this.eIds = [] this.eArr = [] this.form.estate_name = '' }, saveListHandle () { let errMsg = '' let eNames = this.eArr.map(item => { if (item.phone_type == '2') { errMsg = item.estate_name } return item.estate_name }) this.form.estate_name = eNames.join(',') if (this.eArr.length === 1 && this.eArr[0].phone_type == '2') { this.form.phone_type = '2' } else { this.form.phone_type = '1' } if (errMsg && this.eArr.length > 1) { uni.$msg(`${errMsg}是前三后四报备项目,请单独报备`) } else { this.propertySelectShow = false } }, // // 选择所属项目回调 // propertySelectConfirm(e) { // e.map((val, index) => { // this.form.estate_id = val.value; // this.form.estate_name = val.label; // }); // }, // openEstateList () { // uni.navigateTo({ // url: `/pages/estate/list?eid=${this.form.estate_id}&ename=${this.form.estate_name}` // }) // }, submitHandle() { const that = this this.$refs.uForm.validate(valid => { if (valid) { // 验证成功 let params = { activity_id: that.curId, info1: that.form.info1, info2: that.form.info2, info3: that.form.info3, info4: that.form.info4, info5: that.form.info5, info6: that.form.info6, info7: that.form.info7, info8: that.form.info8, } uni.api.cust.apiactivityenroll(params).then(res => { uni.$msgConfirm('报名成功', () => { uni.redirectTo({ url: `/pages/index/index` }) }, () => { uni.redirectTo({ url: `/pages/index/index` }) }) }) } else { console.log('验证失败'); } }); }, // 获取手机号 getPhoneNumber: function(e) { // 点击获取手机号码按钮 let _that = this; if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { _that.$refs.uToast.show({ title: '您可以在个人设置中再次绑定', type: 'warning' }); setTimeout(() => { _that.reLunchUser(); }, 1500); return; // 即用户拒绝授权 } console.log(e.detail.errMsg); console.log(e.detail.iv); console.log(e.detail.encryptedData); let iv = e.detail.iv; let encryptedData = e.detail.encryptedData; // 不是登陆完第一时间授权 wx.login({ success(res) { if (res.code) { // 设置用户手机号 _that.setUserPhoneNumber(encryptedData, iv, res.code); } else { this.$refs.uToast.show({ title: res.errMsg, type: 'warning' }); console.log('登录失败!' + res.errMsg); } } }); }, // 以下是工具函数 // 关闭键盘 hideKeyboard() { uni.hideKeyboard(); }, // 格式化日期的月份或天数的显示(小于10,在前面增加0) getFormatDate(value) { if (value == undefined || value == '') { return ''; } var str = value; if (parseInt(value) < 10) { str = '0' + value; } return str; } } }; </script> <style lang="scss"> .scoped-header { .img { display: flex; align-content: center; align-items: center; .i { width: 200rpx; height: 200rpx; } } } .page { padding: 20rpx; background-color: #ffffff; } .form { border-radius: 10rpx; padding: 0 40rpx; } .popup-body { .tips-title { font-size: $u-p; margin-bottom: 20rpx; } .tips-content { font-size: $u-p2; color: $u-tips-color; margin-bottom: 60rpx; } } .id_card { color: #606266; width: 100%; height: 350rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f4f5f6; font-size: $u-p2; } .footer { position: absolute; text-align: center; bottom: 40rpx; font-size: $u-p2; .agreement { color: $u-type-error; } } .slot-content { font-size: 28rpx; color: $u-content-color; padding: 20rpx; } .scoped-estate-list { .sel-item { display: flex; border-bottom: 1PX solid #dcdcdc; padding: 20rpx; &.cur { background: #369af7; border-radius: 10rpx; overflow: hidden; .img { opacity: .6; } .p1 { color: #fff; } .p3 { color: #fff; } } } .sel-left { width: 180rpx; border-radius: 10rpx; .img { width: 180rpx; height: 120rpx; border-radius: 10rpx; } } .sel-right { // width: 450rpx; margin-left: 20rpx; .p1 { font-size: 30rpx; font-weight: bold; margin-bottom: 10rpx; } .p2 { margin-bottom: 10rpx; } .p3 { color: #369af7; font-size: 24rpx; font-weight: bold; } } } .scoped-estate-popup { height: 100%; padding-bottom: 100rpx; .popup-body { box-sizing: border-box; border-bottom: 1PX solid #dcdcdc; } } .scoped-popup-header-input { position: fixed; width: 90%; display: flex; border-bottom: 1PX solid #dcdcdc; .input { flex: 1; padding-left: 20rpx; height: 80rpx; .u-input__input { height: 80rpx; } } .b { width: 200rpx; height: 80rpx; line-height: 80rpx; background: #2d8cf0; color: #fff; text-align: center; margin-left: 20rpx; } } </style>