dyqc_hdapp/pages/center/index.vue

1375 lines
34 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="allbg">
<view class="backImg flex flex-column align-items">
<!-- logo -->
<view class="title_logo">
<image
src="/static/fabu/fabuhd.png"
style="width: 237rpx; height: 57rpx"
></image>
</view>
<view class="box flex flex-column align-items" @click="tofb">
<view class="first flex flex-column align-items justify-start">
<view class="row flex align-items" style="margin-top: 25rpx;">
<span >
<input type="text" maxlength="20" placeholder="填写清晰的活动标题" class="inputl" v-model="form.title" placeholder-class="bttop" />
</span>
<span style="font-size: 24rpx;color: #9C9C9C;">(必填20字内)</span>
</view>
<view class="row flex align-items textarea_fb" style="margin-top: 25rpx;">
<u--textarea v-model="form.content" maxlength="400" placeholder="描述一下活动的亮点、活动内容、推荐的人群、叫大家一起运动吧~"
height="60" placeholder-class="bttop"></u--textarea>
</view>
<span class="line-row" style="margin-top: 0;"></span>
<!-- 图片 -->
<view class="row flex flex-column" style="margin-top: 42rpx;">
<u-upload :fileList="fileList1" @afterRead="afterRead" :previewFullImage="true" @delete="deletePic"
@oversize="oversize" name="1" multiple :maxSize="1*1024*1024" :maxCount="5">
<view class="pic_view">
<image src="@/static/index/upload1.png" mode="widthFix" style="width: 44rpx;height: 44rpx;" />
<span class="texts">添加图片</span>
</view>
</u-upload>
</view>
<span class="line-row"></span>
<view class="row flex align-items" style="margin-top: 25rpx; ">
<image src="@/static/fabu/jhdd.png" mode="widthFix" style="width: 44rpx;height: 44rpx;" />
<span class="label flex align-items">集合地点
</span>
<span class="row-right" @click="choose()" style="width:68%;">
<input class="input" type="text" disabled="true" placeholder="请填写地址" v-model="form.address"
placeholder-class="plasty" />
<u-icon name="arrow-right" color="#323232"></u-icon>
</span>
</view>
<view class="row flex align-items textarea_mph" style="margin-top: 30rpx;">
<u--textarea v-model="form.address_detail" maxlength="400" placeholder-class="bttops" placeholder="请输入详细地址/楼、门牌号"></u--textarea>
</view>
<view class="row flex align-items" style="margin: 30rpx 0;">
<image src="@/static/fabu/hdsj.png" mode="widthFix" style="width: 44rpx;height: 44rpx;" />
<span class="label flex align-items">活动时间
</span>
<span class="row-right" @click="dateShowHidden()" style="width:68%;">
<input type="text" placeholder="请选择活动时间" class="input" disabled="true" v-model="form.time"
placeholder-class="plasty" />
<u-icon name="arrow-right" color="#323232"></u-icon>
</span>
</view>
</view>
<view class="first flex flex-column align-items justify-start" style="margin-top: 20rpx;">
<view class="row flex align-items" style="margin-top: 25rpx;">
<span class="label flex align-items ">
<span style="color: #3D3D3D;">*</span>活动分类
</span>
<span class="row-right" @click="openBq">
<input type="text" placeholder="请选择活动分类" class="input" disabled="true" v-model="form.cate_idsName"
placeholder-class="plasty" />
<u-icon name="arrow-right" color="#323232"></u-icon>
</span>
</view>
<span class="line-row"></span>
<view class="row flex align-items" style="margin: 25rpx 0;" v-if="form.price != 0">
<span class="label flex align-items ">
<span style="color: #3D3D3D;">*</span>退款政策
</span>
<!-- @click="tuikuan = true" -->
<span class="row-right" >
<input type="text" placeholder="请选择退款政策" class="input" disabled="true" v-model="form.refund_id"
placeholder-class="plasty_c" />
<u-icon name="arrow-right" color="#323232"></u-icon>
</span>
</view>
</view>
<view class="first flex flex-column align-items justify-start" style="margin-top: 20rpx;">
<view class="row flex align-items" style="margin-top: 25rpx;">
<span class="label flex align-items ">
<span style="color: #3D3D3D;">*</span>
活动人数
</span>
<span class="row-right">
<input type="number" placeholder="请填写活动人数" class="input" v-model="form.stock"
placeholder-class="plasty" />
</span>
</view>
<span class="line-row"></span>
<view class="row flex align-items" style="margin-top: 25rpx;">
<span class="label flex align-items ">
<span style="color: #3D3D3D;">*</span>
活动价格
</span>
<span class="row-right">
<input type="text" placeholder="请填写活动价格" class="input" v-model="form.price"
placeholder-class="plasty" />
</span>
</view>
<span class="line-row"></span>
<view class="row flex align-items" style="margin: 25rpx 0;">
<span class="label flex align-items ">
<span style="color: #3D3D3D;">*</span>
报名时间
</span>
<span class="row-right" @click="birthShowHidden()">
<input type="text" placeholder="请选择报名时间" class="input" disabled="true" v-model="form.sign_time"
placeholder-class="plasty" />
<u-icon name="arrow-right" color="#323232"></u-icon>
</span>
</view>
</view>
</view>
<span style="margin: 30rpx 0 320rpx 0; width: 750rpx;" v-if="status == -1 || status == 2">
<cc-protocolBox :agree="agree" :protocolArr="protocolArr" @click="agree = false"
@protocolClick="protocolClick"></cc-protocolBox>
</span>
<view class="bottom flex align-items justify-center" v-if="status == -1 || status == 2">
<span class="flex align-items justify-center" @click="apply()" v-if="agree == true">确认发布</span>
<span class="flex align-items justify-center" v-if="agree == false"
style="background: #EEEEEE;color: #9C9C9C;">确认发布</span>
</view>
<!-- 退款政策 -->
<u-popup @touchmove.native.stop.prevent :closeable="false" :show="tuikuan" :round="22" mode="bottom" @close="closetuikuan"
@open="opentuikuan" :custom-style="popupStyletk">
<view class="popup_tkall">
<view class="popup_tk"> 选择退款政策</view>
<view class="closetk" @click="closetuikuan">取消</view>
<view class="confirmtk">确认</view>
<view class="popup-content">
<view class="popup-content-item" v-for="(item,index) in refund_list" :key="index" @click="selectItem(index,item)">
<span class="popup-content-item-title">{{ item.title }}</span>
<span v-html="item.desc" class="popup-content-item-content"></span>
</view>
</view>
</view>
</u-popup>
<!-- 声明 -->
<u-popup @touchmove.native.stop.prevent :closeable="true" :show="show" :round="10" mode="center" @close="close"
@open="open" :custom-style="popupStyle">
<span style="font-size: 42rpx;font-weight: 800;margin: 12rpx 0 24rpx 0;height: 120rpx;">《免责声明》</span>
<scroll-view ref="scrollView" :scroll-top="scrollTop" :show-scrollbar='true' @scrolltolower="handleScroll"
scroll-y="true" style="height: 800rpx;margin-bottom: 24rpx;">
<view class="popup flex align-items flex-column">
<rich-text :nodes="Negotiate"></rich-text>
</view>
</scroll-view>
<view class="popup-footer">
<span class="zhixiao" v-if="agreeShow == false">我同意</span>
<span class="zhixiao shows_zhidao" v-if="agreeShow == true"
@click="change">我同意</span>
</view>
</u-popup>
<!-- 活动分类 -->
<u-popup :show="showPopbq" mode="bottom" round="20" :customStyle="{'width':'750rpx','height':'1040rpx'}" :closeable="true"
@close="closebq">
<view class="popup_bq">
<img src="https://naweigetetest2.hschool.com.cn/dyqc/hdfenlei.png" alt="" />
<view class="flex flex-column w-100 bqlist">
<span>最近使用</span>
<view class="flex align-items allmybqs">
<view class="flex align-items bqpiece" v-for="(item_bq,index) in list" :key="index">
<span>
{{ item_bq.name }}
</span>
<u-icon name="close" color="#babdc7" @click="removebq(index)"></u-icon>
</view>
</view>
<span style="margin-top: 50rpx;">全部标签</span>
<scroll-view scroll-y="true" class="flex align-items allbqs">
<view style="display: flex; flex-wrap: wrap;">
<view class="flex align-items" :class="['bqpiece', { active: current === index }]" v-for="(item,index) in bqList" :key="index">
<span @click="addbq(item,index)">
{{ item.name }}
</span>
</view>
</view>
</scroll-view>
</view>
</view>
</u-popup>
<!-- 活动时间 -->
<u-datetime-picker @cancel="datecel" ref="dateRef" title="开始时间" :minDate="minDate" confirmText="下一步" @confirm="datefirm" :show="dateShow"
v-model="form.date" mode="datetime"></u-datetime-picker>
<u-datetime-picker @cancel="datecel1" ref="dateRef" title="结束时间" :minDate="minDate1" @confirm="datefirm1" :show="dateShow1"
v-model="form.date1" mode="datetime"></u-datetime-picker>
<!-- 报名时间 -->
<u-datetime-picker @cancel="birthCancel" ref="birthRef" title="开始时间" :minDate="minDate" @confirm="birthConfirm"
:show="birthShow" v-model="form.birth" mode="datetime"></u-datetime-picker>
<u-datetime-picker @cancel="birthCancel1" ref="birthRef" title="结束时间" :minDate="minDate1" @confirm="birthConfirm1"
:show="birthShow1" v-model="form.birth1" mode="datetime"></u-datetime-picker>
</view>
<tab-bar :tabBarShow="1"></tab-bar>
</view>
</template>
<script>
import dayjs from 'dayjs';
import {
dateWeek
} from '../../utils/dateFormat'
export default {
data() {
return {
showPopbq:false,//标签弹窗
bqList:[],//标签列表
cate_id:'',//标签id
list:[],
refund_list:[],//退款list
peopleShow:false, //活动弹窗
inputValue: '', // 用于绑定输入框的值
inputType: 'text' ,// 输入框类型
birthShow: false, // 日期弹窗
birthShow1: false, // 报名日期弹窗
value: false,
scrollTop: 0,
minDate: dayjs(new Date()).unix()*1000,
minDate1: dayjs(new Date()).unix()*1000,
old: {
scrollTop: 0
},
status: -1,
reason: '',
dateShow: false,
dateShow1: false,
show: false,
tuikuan: false,
State: '',
Negotiate: null, // 入驻协议
agree: false,
agreeShow: false,
protocolArr: ["<入驻协议>"],
form: {
cate_ids: '',
// 活动分类名字
cate_idsName:"",
content: '',
refund_id:'随时退',
price:1,
stock:'',
sign_time:'',
time:'',
images:'',
title: '',
address: '',
latitude: '',
longitude: '',
address_detail: '', //详细位置
date: '', //活动开始时间
date1: '', //活动结束时间
birth: '', //报名开始日期
birth1: '', //报名结束日期
},
apply_info: {},
popupStyle: {
width: '642rpx',
padding: '24rpx 24rpx 42rpx 24rpx',
height: '984rpx',
margin: '0 auto', // 水平居中
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
flexColumn: 'column'
},
popupStyletk: {
width: '710rpx',
padding: '24rpx 24rpx 42rpx 24rpx',
height: '984rpx',
margin: '0 auto', // 水平居中
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
flexColumn: 'column'
},
current:0,
institutionList: [],
images: '',
fileList1: [], // 用于存储第一个上传组件的文件列表
list1: '', // 存储第一个上传组件的图片URL最多3张
//活动转换的时间
times_b:'',
times_e:'',
//报名转换的时间
times_sinb:'',
times_sine:''
};
},
onLoad() {
this.tofb();
// this.searchStatus()
this.getAgreement()
this.getBqList();
this.getrefund_list();
this.getitembq();
},
onShow() {
this.form = {
cate_ids: '',
// 活动分类名字
cate_idsName:"",
content: '',
refund_id:'随时退',
price:1,
stock:'',
sign_time:'',
time:'',
images:'',
title: '',
address: '',
latitude: '',
longitude: '',
address_detail: '', //详细位置
date: '', //活动开始时间
date1: '', //活动结束时间
birth: '', //报名开始日期
birth1: '', //报名结束日期
}
},
filters: {
formatTimestamp(value) {
if (!value) return '';
const date = new Date(value * 1000); // 将秒转换为毫秒
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始需要加1并补零
const day = String(date.getDate()).padStart(2, '0'); // 补零
return `${year}-${month}-${day}`;
}
},
methods: {
//登录及发布
tofb() {
const token = uni.getStorageSync('token')
if (token) {
return true;
} else {
uni.showToast({
title: '请登录',
icon: 'none',
duration: 2000,
complete: function() {
setTimeout(function() {
uni.switchTab({
url: '/pages/my/index',
});
}, 2000);
}
});
}
},
// 获取本地最近使用
getitembq(){
if (uni.getStorageSync("zjlist") != "") {
this.list = JSON.parse(uni.getStorageSync("zjlist"));
let arr = this.list.map((item)=>{
return item.name
})
this.form.cate_idsName = arr.join(',');
}else{
uni.setStorageSync('zjlist',JSON.stringify(this.list))
}
},
//删除标签(本地)
removebq(i){
this.list.splice(i,1);
uni.setStorageSync('zjlist',JSON.stringify(this.list))
let arr = this.list.map((item)=>{
return item.name
})
this.form.cate_idsName = arr.join(',')
},
addbq(val,index){
this.current = index;
let arrbql = uni.getStorageSync("zjlist");
let arrbq = JSON.parse(arrbql);
let isbq = true;
for (let i = 0; i < arrbq.length; i++) {
if (arrbq[i].id == val.id) {
uni.showToast({
title: "已选择该标签",
icon: "none",
duration: 2000,
});
return isbq = false;
}
}
if (this.list.length < 3) {
if (isbq) {
this.list.push(val);
uni.setStorageSync('zjlist',JSON.stringify(this.list))
}
}else{
uni.showToast({
title: "最多添加3个标签",
icon: "none",
duration: 2000,
});
}
let arr = this.list.map((item)=>{
return item.name
})
this.form.cate_idsName = arr.join(',');
},
dateWeeks(e){
return dateWeek(e);
},
closebq() {
this.showPopbq = false
},
openBq() {
this.showPopbq = true
},
// 退费规则
getrefund_list(){
uni.$u.http
.get("/api/school.new_activity/refund_list", {
params: {
page: 1,
limit: 100
},
})
.then((res) => {
if (res.code == 1) {
this.refund_list = res.data.list;
} else {
uni.showToast({
title: res.msg,
icon: "none",
duration: 2000,
});
}
})
.catch((error) => {
uni.showToast({
title: "请求失败,请稍后再试",
icon: "none",
duration: 2000,
});
});
},
// 获取标签
getBqList() {
uni.$u.http
.get("/api/school.new_activity/cate_list", {
params: {
page: 1,
limit: 100
},
})
.then((res) => {
if (res.code == 1) {
this.bqList = res.data.list;
} else {
uni.showToast({
title: res.msg,
icon: "none",
duration: 2000,
});
}
})
.catch((error) => {
uni.showToast({
title: "请求失败,请稍后再试",
icon: "none",
duration: 2000,
});
});
},
//同意
handleScroll() {
this.agreeShow = true
},
getTime() {
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始需要加1
const day = String(currentDate.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
return formattedDate;
},
dateShowHidden() {
this.dateShow = true;
},
birthShowHidden() {
this.birthShow = true;
},
// 活动开始时间
datefirm(e) {
console.log(e)
// this.form.date = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss');
this.times_b = this.dateWeeks(e.value/1000);
this.dateShow = false
this.dateShow1 = true
},
// 活动结束时间
datefirm1(e) {
console.log(e)
// this.form.date1 = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss');
this.times_e = this.dateWeeks(e.value/1000);
this.form.time = this.times_b+' - '+this.times_e
this.dateShow1 = false
},
datecel(e) {
this.dateShow = false
},
datecel1(e) {
this.dateShow1 = false
},
// 报名开始日期
birthConfirm(e) {
// this.form.birth = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss');
this.times_sinb = this.dateWeeks(e.value/1000);
this.birthShow = false
this.birthShow1 = true
},
// 报名结束日期
birthConfirm1(e) {
// this.form.birth1 = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss');
this.times_sine = this.dateWeeks(e.value/1000);
this.form.sign_time = this.times_sinb+' - '+this.times_sine
this.birthShow1 = false
},
birthCancel() {
this.birthShow = false
},
birthCancel1() {
this.birthShow1 = false
},
close() {
this.show = false
},
closetuikuan() {
this.tuikuan = false
},
open() {
this.show = true
},
opentuikuan(){
this.tuikuan = true
},
change() {
this.agree = true
this.show = false
},
// 选择机构地址
protocolClick(tag) {
console.log(tag)
this.show = true
},
// 获取入驻协议文章
getAgreement() {
uni.$u.http.get('/api/index/agreement', {
params: {
}
}).then(res => {
if (res.code == 1) {
this.Negotiate = (res.data.entry_agreement).replace(/\<img/gi,
'<img style="max-width:100%;height:auto" ');
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
},
choose() {
console.log(11111)
const that = this
uni.chooseLocation({
success: function(res) {
console.log(res)
that.form.address = res.name
// that.form.address_detail = res.address
that.form.latitude = res.latitude
that.form.longitude = res.longitude
},
fail: function(rot) {
console.log(rot)
}
});
},
// 回调参数为包含columnIndex、value、values
confirm(e) {
console.log('confirm', e.value)
this.form.cut = e.value[0]
this.fileList1 = [],
this.list1 = '',
this.name = ''
},
oversize(e) {
this.$u.toast("请传1MB以内大小的图片");
return false;
},
// 删除图片
deletePic(event) {
const {
name,
index
} = event;
if (index >= 0 && index < this[`fileList${name}`].length) {
this[`fileList${name}`].splice(index, 1);
if (name === '1') {
//单张
// this.list1 = this.fileList1.length > 0 ? this.fileList1[0].url : '';
this.list1 = this.fileList1.map(item => item.url).join(',');
console.log('Updated list1:', this.list1);
}
// 确保对应的 list 字段是一个数组
let list = this[`list${name}`];
if (!Array.isArray(list)) {
console.warn(`list${name} is not an array, skipping splice operation`);
} else {
list.splice(index, 1);
console.log(`Updated list${name}:`, list);
}
} else {
console.error('Invalid index');
}
},
// 新增图片
async afterRead(event) {
let lists = [].concat(event.file);
let fileListLen = this[`fileList${event.name}`].length;
let categoryMap = [{
category: 'user'
},
{
category: 'user'
},
{
category: 'user'
},
{
category: 'cert'
},
{
category: 'cert'
},
{
category: 'cert'
},
];
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
});
});
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url, categoryMap[event.name - 1].category);
let item = this[`fileList${event.name}`][fileListLen];
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}));
console.log(this[`fileList${event.name}`], ` this[\`fileList${event.name}\`]`)
fileListLen++;
// 更新对应的list字段
if (event.name === '1') {
// this.list1 = this.fileList1[0]?.url || ''; //单张
this.list1 = this.fileList1.map(item => item.url).join(',');
}
}
},
uploadFilePromise(url, category) {
console.log('category', category)
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'https://naweigetetest2.hschool.com.cn/api/common/upload', // 仅为示例,非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test',
category: category
},
header: {
"token": uni.getStorageSync("token")
},
success: (res) => {
resolve(JSON.parse(res.data).data.fullurl);
},
fail: (err) => {
reject(err);
}
});
});
},
// 查询状态
// -1未申请 0待审核 1审核通过 2审核失败
searchStatus() {
uni.$u.http.get('/api/school/shop/auth_info', {
params: {}
}).then(res => {
if (res.code == 1) {
this.apply_info = res.data.apply_info
this.State = res.data.type
console.log(res.data.type)
if (res.data.auth_status == 2) {
this.status = 2
this.reason = res.data.reason
} else if (res.data.auth_status == 0) {
this.status = 0
} else if (res.data.auth_status == 1) {
this.status = 1
}
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
},
// 验证电话号码格式的方法
validateTel(tel) {
// 这里使用一个简单的正则表达式来验证电话号码格式
const telRegex = /^1[3-9]\d{9}$/; // 假设是中国大陆的手机号码格式
return telRegex.test(tel);
},
apply() {
let url = '';
let params = {};
this.form.cate_ids = this.list.map(item => item.id).join(',');
// 校验详细地址
if (this.form.address_detail == '') {
uni.showToast({
title: '请输入详细地址!',
icon: 'none',
duration: 2000
});
return;
}
// 校验位置
if (this.form.address == '') {
uni.showToast({
title: '请选择位置!',
icon: 'none',
duration: 2000
});
return;
}
// 校验标题
if (this.form.title == '') {
uni.showToast({
title: '请输入标题!',
icon: 'none',
duration: 2000
});
return;
}
// 校验详情
if (this.form.content == '') {
uni.showToast({
title: '请输入详情!',
icon: 'none',
duration: 2000
});
return;
}
// 校验照片
if (this.list1 == '') {
uni.showToast({
title: '请上传活动照片!',
icon: 'none',
duration: 2000
});
return;
}
// 校验照片至少上传3张
if (this.fileList1.length < 3) {
uni.showToast({
title: '活动照片至少三张!',
icon: 'none',
duration: 2000
});
return;
}
// 校验金额
if (this.form.price == '') {
uni.showToast({
title: '请输入金额!',
icon: 'none',
duration: 2000
});
return;
}
// 校验人数
if (this.form.stock == '') {
uni.showToast({
title: '请输入活动人数!',
icon: 'none',
duration: 2000
});
return;
}
// 校验报名时间
if (this.form.sign_time == '') {
uni.showToast({
title: '请选择报名时间!',
icon: 'none',
duration: 2000
});
return;
}
// 校验活动时间
if (this.form.time == '') {
uni.showToast({
title: '请选择活动时间!',
icon: 'none',
duration: 2000
});
return;
}
url = '/api/school.new_activity/add'
let hdtime = dayjs(this.form.date).format('YYYY-MM-DD HH:mm:ss')+' - '+dayjs(this.form.date1).format('YYYY-MM-DD HH:mm:ss');
let bmtime = dayjs(this.form.birth).format('YYYY-MM-DD HH:mm:ss')+' - '+dayjs(this.form.birth1).format('YYYY-MM-DD HH:mm:ss');
params = {
title: this.form.title,
cate_ids: this.form.cate_ids,
content: this.form.content,
refund_id:1,
price:this.form.price,
stock:this.form.stock,
sign_time:bmtime,
time:hdtime,
images:this.list1,
longitude: this.form.longitude,
latitude: this.form.latitude,
address: this.form.address,
address_detail: this.form.address_detail
}
uni.$u.http.post(url, params).then(res => {
if (res.code == 1) {
uni.showToast({
title: '发布中',
icon: 'none',
duration: 2000,
complete: function() {
setTimeout(function() {
uni.switchTab({
url: "/pages/my/index"
})
}, 2000);
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
}
}
}
</script>
<style lang="scss" scoped>
// .allbg{
// }
.title_logo{
width: 100%;
margin-top: 100rpx;
margin-left: 40rpx;
}
.backImg {
// background: linear-gradient(to bottom, #F1F2F8 0%, #F1F2F8 50%, #FFFFFF 100%);
width: 750rpx;
background-color: #f7f7f7;
background-image: url("https://naweigetetest2.hschool.com.cn/dyqc/bgx2.png");
background-size: 750rpx 797rpx;
background-repeat: no-repeat;
}
.w-100 {
width: 100%;
}
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.align-items {
align-items: center;
}
.flex-column {
flex-flow: column;
}
.justify-start {
justify-content: start;
}
.mar-top-30 {
margin-top: 30rpx;
}
.box {
width: 690rpx;
margin-top: 40rpx;
.title {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #C0C0C0;
margin: 42rpx 0 24rpx 0;
}
.reason {
width: 100%;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 36rpx;
color: #343434;
line-height: 36rpx;
padding: 30rpx;
width: 630rpx;
letter-spacing: 4.5rpx;
}
.first {
width: 100%;
// height: 266rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
// margin-top: 32rpx;
.row {
width: 642rpx;
margin-top: 7rpx;
justify-content: space-between;
.label {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #343434;
line-height: 32rpx;
min-width: 130rpx;
}
.pic_view{
width: 190rpx;
height: 190rpx;
background: #F7F7F7;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
.texts{
margin-top:20rpx ;
font-size: 24rpx;
color: #3D3D3D;
}
}
.row-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
}
.line-row {
margin-top: 25rpx;
width: 642rpx;
height: 1rpx;
background: #F0F0F0;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
}
::v-deep .plasty {
text-align: right;
}
::v-deep .plasty_c {
text-align: right;
color: #FF4810;
}
::v-deep .bttop {
font-size: 32rpx;
color: #9C9C9C;
}
.second {
width: 690rpx;
// height: 340rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 32rpx;
margin-bottom: 32rpx;
::v-deep .bttops {
font-size: 26rpx;
color: #9C9C9C;
}
}
.third {
width: 690rpx;
.header {
margin: 42rpx 0 24rpx 0;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #343434;
line-height: 32rpx;
}
}
}
.textarea_fb{
::v-deep .u-textarea {
height: 100%;
padding: 0;
border: none;
font-size: 26rpx;
color: #9C9C9C;
}
::v-deep .bttextarea {
font-size: 24rpx;
color: #9C9C9C;
}
}
.ji ::v-deep .u-upload .u-upload__wrap__preview__image {
width: 690rpx !important;
height: 450rpx !important;
}
.shenfen ::v-deep .u-upload .u-upload__wrap__preview__image {
width: 690rpx !important;
height: 450rpx !important;
}
.bottom {
width: 750rpx;
height: 162rpx;
background: #FFFFFF;
box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(111, 190, 255, 0.1);
border-radius: 0rpx 0rpx 0rpx 0rpx;
bottom: 128rpx;
position: fixed;
z-index: 10;
span {
width: 642rpx;
height: 80rpx;
background: #323232;
border-radius: 401rpx 401rpx 401rpx 401rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 36rpx;
color: #BBFC5B;
line-height: 32rpx;
}
}
.inputl{
text-align: left;
font-family: PingFang SC, PingFang SC;
font-size: 28rpx;
color: #343434;
line-height: 32rpx;
width: 500rpx;
}
.input {
text-align: right;
font-family: PingFang SC, PingFang SC;
font-size: 28rpx;
color: #343434;
line-height: 32rpx;
width: 500rpx;
}
.shenfen ::v-deep .u-transition.data-v-39e33bf2.vue-ref.u-fade-enter-to.u-fade-enter-active:not(:first-child) {
margin-top: 20rpx;
}
.popup {
// width: 690rpx;
height: 950rpx;
margin-top: 40rpx;
}
.popup-footer {
display: flex;
justify-content: center;
align-items: center;
// margin: 30rpx 0;
height: 146rpx;
.zhixiao {
height: 80rpx;
background: #E8E8E8;
//border-radius: 401rpx 401rpx 401rpx 401rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 36rpx;
color: #9C9C9C;
line-height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
bottom: 0;
border-radius: 0rpx 0rpx 20rpx 20rpx;
}
.shows_zhidao{
background-color: #323232;
color:#BBFC5B;
font-weight: 400;
font-size: 36rpx;
}
}
// 滚动条样式
::v-deep ::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px !important;
height: 1px !important;
overflow: auto !important;
background: #ccc !important;
-webkit-appearance: auto !important;
display: block;
}
::v-deep ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px !important;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
background: #7b7979 !important;
}
::v-deep ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
// border-radius: 10px !important;
background: #FFFFFF !important;
}
.textarea_mph{
::v-deep .u-textarea {
height: 100%;
padding: 20rpx;
border: none;
font-size: 26rpx;
color: #9C9C9C;
background: #F7F7F7 ;
border-radius: 18rpx;
}
::v-deep .bttextarea {
font-size: 24rpx;
color: #9C9C9C;
}
}
.popup_bq {
display: flex;
flex-direction: column;
align-items: center;
height: 1040rpx;
position: relative;
img {
position: absolute;
width: 750rpx;
height: 1040rpx;
top: -164rpx;
z-index: 0;
}
.bqlist{
margin-top: 160rpx;
z-index: 1;
margin-left: 80rpx;
height: 100%;
.allmybqs{
flex-wrap: wrap;
width: 720rpx;
}
.allbqs{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: wrap;
height: 620rpx;
width: 700rpx;
}
.bqpiece{
width: 210rpx;
height: 70rpx;
background: #F7F7F7;
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: flex;
justify-content: space-around;
align-items: center;
margin: 20rpx 20rpx 20rpx 0;
span{
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #323232;
display: flex;
align-items: center;
}
}
.bqpiece.active{
background: #C9FC7E;
}
}
}
.popup_tkall{
// height: 1100rpx;
.popup_tk{
font-size: 42rpx;font-weight: 800;margin: 12rpx 0 24rpx 0;height: 120rpx;
text-align: center;
}
.popup-content{
height: 900rpx;
overflow-y: auto;
}
.popup-content-item{
width: 690rpx;
padding: 30rpx;
box-sizing: border-box;
background: #F7F7F7;
border-radius: 18rpx 18rpx 18rpx 18rpx;
border: 2rpx solid #EAEAEA;
margin-bottom: 30rpx;
:active{
border-image: linear-gradient(270deg, rgba(251, 246, 109, 1), rgba(156, 234, 162, 1)) 2 2;
}
}
.closetk{
position: absolute;
top:46rpx;
left: 30rpx;
color: #9C9C9C;
font-size: 28rpx;
font-weight: 400;
font-family: PingFang SC, PingFang SC;
}
.confirmtk{
position: absolute;
top:46rpx;
right: 30rpx;
color: #3D3D3D;
font-size: 28rpx;
font-weight: 400;
font-family: PingFang SC, PingFang SC;
}
}
</style>