1069 lines
26 KiB
Vue
1069 lines
26 KiB
Vue
<template>
|
||
<view class="container-box">
|
||
<navigation-bar-vue title="发布种草通告" style="width: 100%;" background-color="#ffffff"
|
||
title-color="#000000"></navigation-bar-vue>
|
||
<view class="content">
|
||
<!-- 操作按钮 -->
|
||
<view class="dl-opt-box">
|
||
<view class="dl-menu-box">
|
||
<view @click="handleUserAgrement(globalConfig.appInfo.agreements[7])" class="dl-menu">
|
||
<image class="dl-vip" src="@/static/detail/shenhebiaozhun.png" mode="aspectFit"></image>
|
||
{{globalConfig.appInfo.agreements[7].title}}
|
||
</view>
|
||
<view @click="handleUserAgrement(globalConfig.appInfo.agreements[8])" class="dl-menu">
|
||
<image class="dl-vip" src="@/static/detail/jinjiejiqiao.png" mode="aspectFit"></image>
|
||
{{globalConfig.appInfo.agreements[8].title}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="data-list-box">
|
||
<view class="form-warn">
|
||
<image src="@/static/detail/warn.png" mode="aspectFit"></image>
|
||
<text>注意：请勿发布直发、代发等虚假通告
|
||
为了您的信息安全，平台不建议填写您的银行卡号、身份证号、密码等隐私信息</text>
|
||
</view>
|
||
|
||
|
||
<view class="form-content">
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
标题
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" v-model="dataObj.title" type="text" placeholder="请输入" />
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
平台
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-data-select v-model="dataObj.platformCode" :localdata="platFormRange"
|
||
@change="change($event,'platformCode')" :clear="false"
|
||
:imgCode="dataObj.platformCode"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
截止时间
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-datetime-picker type="date" :clear-icon="false" v-model="dataObj.endDate"
|
||
@maskClick="maskClick" />
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
稿费下限
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" v-model="dataObj.feeDown" type="digit" placeholder="最低" />
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable">
|
||
稿费上限
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" v-model="dataObj.feeUp" type="digit" placeholder="最高(不填代表无上限)" />
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable">
|
||
招募名额
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" v-model="dataObj.needNum" type="number"
|
||
placeholder="请输入(不填代表无上限)" />
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
是否需自报价
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-data-select v-model="dataObj.isSelfPrice" :localdata="ifHasRange"
|
||
@change="change($event,'isSelfPrice')" :clear="false"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
是否平台结算
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-data-select v-model="dataObj.isPlatformFree" :localdata="ifHasRange"
|
||
@change="change($event,'isPlatformFree')" :clear="false"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
是否有赠品
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-data-select v-model="dataObj.haveGift" :localdata="ifHasRange"
|
||
@change="change($event,'gift')" :clear="false"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
是否公开品牌
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-data-select v-model="dataObj.isShowBrand" :localdata="ifHasRange"
|
||
@change="change($event,'isShowBrand')" :clear="false"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
品牌
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" v-model="dataObj.brand" type="text" placeholder="请输入" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item-field">
|
||
<view class="item-lable is-required">
|
||
粉丝下限
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" v-model="dataObj.fansDown" type="digit" placeholder="最低" />
|
||
|
||
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable ">
|
||
粉丝上限
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" v-model="dataObj.fansUp" type="digit" placeholder="最高(不填代表无上限)" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item-field">
|
||
<view class="item-lable ">
|
||
地区要求
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-data-picker placeholder="请选择" popup-title="请选择收件地址" :localdata="dataTree"
|
||
v-model="dataObj.cityId" @change="onchange" @nodeclick="onnodeclick"
|
||
@popupopened="onpopupopened" @popupclosed="onpopupclosed">
|
||
</uni-data-picker>
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable">
|
||
博主类型 <text class="little-text">(可多选)</text>
|
||
</view>
|
||
<view class="item-value">
|
||
<view class="line-row" v-for="(item,index) in bloggerTypeList">
|
||
<view v-for="(t,i) in item"
|
||
:class="dataObj.bloggerTypesList.includes(t.value)?'line-item click':'line-item'"
|
||
@click="changeChooseValue(t.value,'bloggerTypesList','bloggerTypes')">
|
||
<uni-icons v-if="'new'==t.value" type="plusempty" size="18"></uni-icons>
|
||
<text v-else>{{t.text}}</text>
|
||
</view>
|
||
<view style="clear: both;"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item-field">
|
||
<view class="item-lable ">
|
||
产品图
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-file-picker :value="fileList" :sizeType="sizeType"
|
||
@select="afterRead($event,'fileList')" @delete="deleteFile($event,'fileList')"
|
||
limit="9"></uni-file-picker>
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
<view class="item-lable ">
|
||
微信群码<text class="little-text">(选填)</text>
|
||
</view>
|
||
<view class="item-value">
|
||
<uni-file-picker :value="groupImageList" :sizeType="sizeType"
|
||
@select="afterRead($event,'groupImageList')"
|
||
@delete="deleteFile($event,'groupImageList')" limit="1"></uni-file-picker>
|
||
</view>
|
||
</view>
|
||
<view class="item-field">
|
||
|
||
<view class="item-lable is-required">
|
||
通告明细
|
||
</view>
|
||
<view class="item-value">
|
||
<textarea v-model="dataObj.detail" style="height: 600rpx;" type="text"
|
||
placeholder="请输入通告明细" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 自定义表单 -->
|
||
<view class="form-content">
|
||
<view class="item-field-row" style="padding-top: 0;">
|
||
<view class="item-lable " style="flex: 1;">
|
||
自定义报名信息收集：
|
||
</view>
|
||
<view class="item-value" style="width: 200rpx;">
|
||
<uni-icons type="plusempty" size="18"></uni-icons><text @click="addNewField()">添加信息</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item-field-row" v-for="(item,index) in customFieldList">
|
||
<view class="item-lable is-required">
|
||
{{item}}
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" disabled type="text" placeholder="请输入" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="dl-bottom-box">
|
||
<!-- 预览 -->
|
||
<view class="view-dom" @click="preview()">
|
||
预览
|
||
</view>
|
||
<view class="public-dom" @click="publish()">
|
||
发布
|
||
</view>
|
||
</view>
|
||
<!-- 输入框示例 -->
|
||
<uni-popup ref="inputDialog" type="dialog">
|
||
<uni-popup-dialog ref="inputClose" mode="input" title="新增博主类型" placeholder="请输入博主类型"
|
||
@confirm="dialogInputConfirm"></uni-popup-dialog>
|
||
</uni-popup>
|
||
<!-- 输入框示例 -->
|
||
<uni-popup ref="inputDialogCus" type="dialog">
|
||
<uni-popup-dialog ref="inputClose" mode="input" title="新增信息" placeholder="请输入信息"
|
||
@confirm="dialogInputConfirmCus"></uni-popup-dialog>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||
import {
|
||
toast
|
||
} from '@/utils/common.js'
|
||
import upload from '@/utils/upload'
|
||
import {
|
||
uniListByParentCode
|
||
} from '@/api/system/config.js'
|
||
import config from '@/config';
|
||
import {
|
||
treeCity
|
||
} from '@/api/business/base.js'
|
||
import {
|
||
saveNotice,
|
||
getNoticeDetail
|
||
} from '@/api/business/notice';
|
||
export default {
|
||
components: {
|
||
navigationBarVue,
|
||
},
|
||
data() {
|
||
return {
|
||
//城市树结构
|
||
dataTree: [],
|
||
//一行显示几个
|
||
showNum: 4,
|
||
globalConfig: getApp().globalData.config,
|
||
//博主分类
|
||
bloggerTypeList: [],
|
||
//所有可选的平台
|
||
platFormRange: [],
|
||
globalConfig: getApp().globalData.config,
|
||
uploadUrl: config.baseUrl,
|
||
sizeType: ['compressed'],
|
||
//产品图片数组
|
||
fileList: [],
|
||
//微信群码
|
||
groupImageList: [],
|
||
//自定义表单
|
||
customFieldList: [],
|
||
dataObj: {
|
||
isRead: 0,
|
||
title: "",
|
||
brand: "",
|
||
platformCode: "xiaohongshu",
|
||
feeLimit: 0,
|
||
feeDown: null,
|
||
feeUp: null,
|
||
haveGift: null,
|
||
giftDetail: "",
|
||
giftPrice: null,
|
||
endDate: null,
|
||
needNum: null,
|
||
fansLimit: 0,
|
||
fansDown: null,
|
||
fansUp: null,
|
||
// 报名是否需符合粉丝要求(0否|1是)
|
||
isEligible: null,
|
||
//博主类型，按逗号拼接
|
||
bloggerTypes: "",
|
||
//博主类型数组，方便判断
|
||
bloggerTypesList: [],
|
||
tel: "",
|
||
wechat: "",
|
||
// 是否公开联系方式(0否|1是)
|
||
isShowTel: null,
|
||
},
|
||
isEligibleList: [{
|
||
text: '报名需符合粉丝要求',
|
||
value: true
|
||
}],
|
||
isShowTelList: [{
|
||
text: '不公开联系方式，我会自己联系博主',
|
||
value: true
|
||
}],
|
||
readBookList: [{
|
||
text: '我已阅读并同意',
|
||
value: true
|
||
}],
|
||
//有无限制下拉框可选值
|
||
ifHasRange: [{
|
||
value: 0,
|
||
text: "否"
|
||
},
|
||
{
|
||
value: 1,
|
||
text: "是"
|
||
}
|
||
],
|
||
//是否限制
|
||
limitRange: [{
|
||
value: 0,
|
||
text: "不限制"
|
||
},
|
||
{
|
||
value: 1,
|
||
text: "限制"
|
||
}
|
||
],
|
||
|
||
}
|
||
},
|
||
onLoad(params) {
|
||
this.initData("dl_platform", 'platFormRange')
|
||
this.initData("dl_blogger_type", "bloggerTypeList")
|
||
this.initAddress()
|
||
if (params.sameId) {
|
||
this.getSameNotice(params.sameId)
|
||
}
|
||
},
|
||
methods: {
|
||
getSameNotice(sameId) {
|
||
getNoticeDetail({
|
||
noticeId: sameId
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.dataObj = res.data.noticeDetail
|
||
this.dataObj.id = null
|
||
if (res.data.noticeDetail.bloggerTypes) {
|
||
this.dataObj.bloggerTypesList = res.data.noticeDetail.bloggerTypes.split(",")
|
||
}
|
||
//处理产品图和群码
|
||
if (this.dataObj.images) {
|
||
this.dataObj.images.split(',').forEach(it => {
|
||
this.fileList.push({
|
||
url: config.baseUrl + it
|
||
})
|
||
})
|
||
}
|
||
if (this.dataObj.groupImage) {
|
||
this.dataObj.groupImage.split(',').forEach(it => {
|
||
this.groupImageList.push({
|
||
url: config.baseUrl + it
|
||
})
|
||
})
|
||
}
|
||
if (this.dataObj.customForm) {
|
||
this.customFieldList = this.dataObj.customForm
|
||
}
|
||
|
||
|
||
}
|
||
}).catch((e) => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
duration: 2000,
|
||
title: e
|
||
});
|
||
})
|
||
},
|
||
validForm(data) {
|
||
if (!data.title) {
|
||
uni.showToast({
|
||
title: '标题必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
|
||
if (!data.platformCode) {
|
||
uni.showToast({
|
||
title: '平台必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
|
||
if (!data.endDate) {
|
||
uni.showToast({
|
||
title: '截止时间必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
|
||
if (!data.feeDown) {
|
||
uni.showToast({
|
||
title: '稿费下限必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
if (data.isSelfPrice == null || data.isSelfPrice == undefined) {
|
||
uni.showToast({
|
||
title: '是否需自报价必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
if (data.isPlatformFree == null || data.isPlatformFree == undefined) {
|
||
uni.showToast({
|
||
title: '是否平台结算必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
if (data.haveGift == null || data.haveGift == undefined) {
|
||
uni.showToast({
|
||
title: '是否有赠品必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
if (data.isShowBrand == null || data.isShowBrand == undefined) {
|
||
uni.showToast({
|
||
title: '是否公开品牌必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
if (!data.brand) {
|
||
uni.showToast({
|
||
title: '品牌必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
if (!data.fansDown) {
|
||
uni.showToast({
|
||
title: '粉丝下限必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
|
||
if (!data.detail) {
|
||
uni.showToast({
|
||
title: '通告明细必填',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return true;
|
||
}
|
||
},
|
||
//预览功能
|
||
preview() {
|
||
if (this.validForm(this.dataObj)) {
|
||
return
|
||
}
|
||
//草稿状态
|
||
this.dataObj.approvalStatus = '8'
|
||
if (this.fileList && this.fileList.length > 0) {
|
||
this.dataObj.images = []
|
||
this.dataObj.groupImage = ''
|
||
this.fileList.forEach(it => {
|
||
this.dataObj.images.push(it.url.replace(config.baseUrl, ''))
|
||
})
|
||
if (this.dataObj.images && this.dataObj.images.length > 0) {
|
||
this.dataObj.images = this.dataObj.images.join(',')
|
||
}
|
||
}
|
||
|
||
|
||
this.groupImageList.forEach(it => {
|
||
this.dataObj.groupImage = it.url.replace(config.baseUrl, '')
|
||
})
|
||
|
||
this.dataObj.customForm = this.customFieldList
|
||
saveNotice(this.dataObj).then(res => {
|
||
this.dataObj.id = res.data.noticeId
|
||
this.goDetail(res.data.noticeId)
|
||
|
||
})
|
||
},
|
||
publish() {
|
||
if (this.validForm(this.dataObj)) {
|
||
return
|
||
}
|
||
//待审核状态
|
||
this.dataObj.approvalStatus = '0'
|
||
if (this.fileList && this.fileList.length > 0) {
|
||
this.dataObj.images = []
|
||
this.dataObj.groupImage = ''
|
||
this.fileList.forEach(it => {
|
||
this.dataObj.images.push(it.url.replace(config.baseUrl, ''))
|
||
})
|
||
if (this.dataObj.images && this.dataObj.images.length > 0) {
|
||
this.dataObj.images = this.dataObj.images.join(',')
|
||
}
|
||
}
|
||
|
||
|
||
this.groupImageList.forEach(it => {
|
||
this.dataObj.groupImage = it.url.replace(config.baseUrl, '')
|
||
})
|
||
|
||
this.dataObj.customForm = this.customFieldList
|
||
saveNotice(this.dataObj).then(res => {
|
||
this.dataObj.id = res.data.noticeId
|
||
uni.showToast({
|
||
title: '发布成功等待审核',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
|
||
setTimeout(function() {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 查看通告详情
|
||
* @param {Object} item
|
||
*/
|
||
goDetail(noticeId) {
|
||
this.$tab.navigateTo(`/pages/notice/detail?id=${noticeId}&type=preview`)
|
||
},
|
||
saveData() {
|
||
console.log(this.dataObj, 357);
|
||
|
||
},
|
||
/**初始化树结构*/
|
||
initAddress() {
|
||
treeCity().then(res => {
|
||
res.data.forEach(it => {
|
||
if (it.children) {
|
||
it.children.forEach(item => {
|
||
item.children = null
|
||
})
|
||
}
|
||
})
|
||
this.dataTree = res.data
|
||
}).catch((e) => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
duration: 2000,
|
||
title: e
|
||
});
|
||
})
|
||
},
|
||
// 查看相关协议
|
||
handleUserAgrement(site) {
|
||
this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
|
||
},
|
||
/**
|
||
* 添加字段
|
||
*/
|
||
addNewField() {
|
||
this.$refs.inputDialogCus.open()
|
||
},
|
||
// 查看相关协议
|
||
handleUserAgrement(site) {
|
||
this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
|
||
},
|
||
/**初始化字典数据*/
|
||
initData(code, key) {
|
||
let that = this
|
||
uniListByParentCode({
|
||
code: code
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
if ("bloggerTypeList" == key) {
|
||
let thisArray = res.data
|
||
thisArray.push({
|
||
text: "",
|
||
value: "new"
|
||
})
|
||
for (let i = 0; i < thisArray.length; i += that.showNum) {
|
||
that[key].push(thisArray.slice(i, i + that.showNum));
|
||
}
|
||
} else {
|
||
that[key] = res.data
|
||
}
|
||
}
|
||
}).catch((e) => {
|
||
toast(e)
|
||
})
|
||
},
|
||
//改变选中值
|
||
change(e, type) {},
|
||
/**
|
||
* 复选框
|
||
* @param {Object} e
|
||
*/
|
||
chooseBoxFun(e, key) {
|
||
if (e.detail.value.length > 0) {
|
||
//选中
|
||
this.dataObj[key] = 1
|
||
} else {
|
||
//未选中
|
||
this.dataObj[key] = 0
|
||
}
|
||
console.log(this.dataObj)
|
||
},
|
||
afterRead(file, key) {
|
||
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
||
upload({
|
||
url: '',
|
||
filePath: file.tempFilePaths[i]
|
||
}).then((res) => {
|
||
console.log(res, '215')
|
||
this[key].push({
|
||
url: res.url
|
||
})
|
||
console.log(this[key], "this[key]")
|
||
})
|
||
}
|
||
},
|
||
deleteFile(index, key) {
|
||
console.log('删除文件', this[key][index]);
|
||
this[key].splice(index, 1);
|
||
},
|
||
/**
|
||
* 选择
|
||
* @param {Object} value
|
||
* @param {Object} keyList
|
||
* @param {Object} key
|
||
*/
|
||
changeChooseValue(value, keyList, key) {
|
||
if ('new' == value) {
|
||
this.$refs.inputDialog.open()
|
||
} else {
|
||
if (this.dataObj[keyList].includes(value)) {
|
||
//原来包含，需要去掉
|
||
let newList = []
|
||
this.dataObj[keyList].map((item) => {
|
||
if (value != item) {
|
||
newList.push(item)
|
||
}
|
||
})
|
||
this.dataObj[keyList] = newList
|
||
} else {
|
||
//没有，追加
|
||
this.dataObj[keyList].push(value)
|
||
}
|
||
this.dataObj[key] = this.dataObj[keyList].join(",")
|
||
}
|
||
},
|
||
dialogInputConfirm(val) {
|
||
let thisObj = {
|
||
text: val,
|
||
value: val
|
||
}
|
||
//TODO 这里还需要走后台的插入接口---添加博主类型
|
||
let endArray = this.bloggerTypeList[this.bloggerTypeList.length - 1]
|
||
if (endArray.length == this.showNum) {
|
||
//正好是一行，需要替换掉最后一个，另起一个新数组
|
||
endArray[endArray.length - 1] = thisObj
|
||
let newArray = [{
|
||
text: "",
|
||
value: "new"
|
||
}]
|
||
this.bloggerTypeList[this.bloggerTypeList.length - 1] = endArray
|
||
this.bloggerTypeList.push(newArray)
|
||
} else {
|
||
//不到一行，在倒数第二位插入本对象
|
||
endArray.splice(endArray.length - 1, 0, thisObj)
|
||
this.bloggerTypeList[this.bloggerTypeList.length - 1] = endArray
|
||
}
|
||
// 关闭窗口后，恢复默认内容
|
||
this.$refs.inputDialog.close()
|
||
},
|
||
dialogInputConfirmCus(val) {
|
||
let thisObj = val
|
||
this.customFieldList.push(thisObj)
|
||
// 关闭窗口后，恢复默认内容
|
||
this.$refs.inputDialogCus.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container-box {
|
||
padding-top: calc(90rpx + var(--status-bar-height));
|
||
border-top: 1rpx solid #F4F4F4;
|
||
background-color: white;
|
||
width: 100%;
|
||
color: #363636;
|
||
font-size: 30rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
.content {
|
||
border-top: 1rpx solid #F4F4F4;
|
||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 232rpx);
|
||
overflow-y: scroll;
|
||
width: 100%;
|
||
background-color: #F2F2F2;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
justify-content: start;
|
||
position: relative;
|
||
|
||
.dl-opt-box {
|
||
background-color: white;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.dl-menu-box {
|
||
color: #929292;
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
padding-top: 20rpx;
|
||
|
||
.dl-menu {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #FC1F3E;
|
||
margin: 0 20rpx;
|
||
padding-bottom: 15rpx;
|
||
text-align: center;
|
||
|
||
image {
|
||
margin-right: 10rpx;
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.data-list-box {
|
||
flex: 1;
|
||
overflow-y: scroll;
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
justify-content: start;
|
||
width: 100%;
|
||
|
||
.form-warn {
|
||
width: 100%;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
background-color: #FDECD9;
|
||
color: #FF6627;
|
||
border-radius: 20rpx;
|
||
padding: 15rpx;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
text {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
}
|
||
}
|
||
|
||
.form-content {
|
||
width: 100%;
|
||
background-color: white;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
margin-top: 25rpx;
|
||
|
||
.item-field-row {
|
||
width: 100%;
|
||
padding-top: 15rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
padding-bottom: 15rpx;
|
||
border-bottom: 1rpx solid #F4F4F4;
|
||
|
||
.img-upload {
|
||
width: 50%;
|
||
margin: 10rpx 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.is-required:before {
|
||
content: "*";
|
||
color: #FC1F3E;
|
||
|
||
image {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.item-lable {
|
||
font-weight: bold;
|
||
width: 210rpx;
|
||
padding: 15rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
|
||
}
|
||
|
||
.item-value {
|
||
flex: 1;
|
||
padding-left: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
input {
|
||
width: 100%;
|
||
padding-left: 20rpx;
|
||
line-height: 1;
|
||
height: 70rpx;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.choose-add {
|
||
color: #686868;
|
||
padding: 10rpx 0 10rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
color: #686868;
|
||
padding: 10rpx 0 10rpx 20rpx;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-field {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
justify-content: center;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #F4F4F4;
|
||
|
||
.warn-little-text {
|
||
color: #FE9860;
|
||
font-size: 18rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.is-required:before {
|
||
content: "*";
|
||
color: #FC1F3E;
|
||
|
||
image {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.item-lable {
|
||
padding: 15rpx 0;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.little-text {
|
||
padding-left: 10rpx;
|
||
font-weight: normal;
|
||
color: #929292;
|
||
}
|
||
}
|
||
|
||
.item-value {
|
||
width: 100%;
|
||
|
||
.line-row {
|
||
width: 100%;
|
||
|
||
.line-item {
|
||
width: calc(25% - 16rpx);
|
||
border: 1rpx solid #E9E9E9;
|
||
margin: 8rpx 8rpx;
|
||
float: left;
|
||
border-radius: 25rpx;
|
||
color: #363636;
|
||
text-align: center;
|
||
padding: 8rpx 15rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.click {
|
||
color: #FC1F3E !important;
|
||
border: 1rpx solid #FC1F3E !important;
|
||
}
|
||
}
|
||
|
||
.dl-drawer-item {
|
||
display: flex;
|
||
color: #929292;
|
||
align-items: center;
|
||
justify-content: start;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
input {
|
||
width: 100%;
|
||
padding-left: 20rpx;
|
||
line-height: 1;
|
||
height: 70rpx;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.choose-add {
|
||
color: #686868;
|
||
padding: 10rpx 0 10rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
color: #686868;
|
||
padding: 10rpx 0 10rpx 20rpx;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dl-bottom-box {
|
||
border-top: 1rpx solid #EEEEEE;
|
||
height: calc(var(--window-bottom) + 140rpx);
|
||
padding-bottom: var(--window-bottom);
|
||
color: #363636;
|
||
position: fixed;
|
||
padding-bottom: 20rpx;
|
||
bottom: 0;
|
||
background-color: #F7F7F7;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9;
|
||
|
||
.view-dom {
|
||
flex: 1;
|
||
margin: 0 30rpx;
|
||
color: #181D24;
|
||
background-image: linear-gradient(to right, #F7DDBD, #EFCBA0);
|
||
padding: 20rpx 0;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.public-dom {
|
||
flex: 1;
|
||
margin: 0 30rpx;
|
||
padding: 20rpx 0;
|
||
border-radius: 30rpx;
|
||
color: white;
|
||
background-color: #FC1F3E;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.line-row-bottom {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.text-red {
|
||
color: #FC1F3E;
|
||
}
|
||
}
|
||
}
|
||
|
||
.checklist-box {
|
||
margin-right: 0 !important;
|
||
}
|
||
</style>
|