dianliang/dl_uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
569a62b530
dl_uniapp/pages/notice/public-notice.vue

838 lines
22 KiB
Vue
Raw Normal View History

1
2025-04-11 15:08:25 +08:00
<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-data-select v-model="dataObj.feeLimit" :localdata="ifHasRange"
@change="change($event,'fee')" :clear="false"></uni-data-select>
<view class="dl-drawer-item" v-if="dataObj.feeLimit">
<input class="uni-input" v-model="dataObj.feeDown" type="digit" placeholder="最低" />
<view>—</view>
<input class="uni-input" v-model="dataObj.feeUp" type="digit" placeholder="最高" />
</view>
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
赠品
</view>
<view class="item-value">
<uni-data-select v-model="dataObj.giftLimit" :localdata="ifHasRange"
@change="change($event,'gift')" :clear="false"></uni-data-select>
<view class="dl-drawer-item" v-if="dataObj.giftLimit">
<textarea v-model="dataObj.giftDetail" type="text" placeholder="请输入赠品明细" />
</view>
<view class="dl-drawer-item" v-if="dataObj.giftLimit">
<input class="uni-input" v-model="dataObj.giftDetail" type="number"
placeholder="请输入赠品价值(元)" />
</view>
</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.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.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.fansLimit" :localdata="limitRange"
@change="change($event,'fans')" :clear="false"></uni-data-select>
<view class="dl-drawer-item" v-if="dataObj.fansLimit">
<input class="uni-input" v-model="dataObj.fansDown" type="digit" placeholder="最低" />
<view>—</view>
<input class="uni-input" v-model="dataObj.fansUp" type="digit" placeholder="最高" />
</view>
<view class="dl-drawer-item" v-if="dataObj.fansLimit">
<uni-data-checkbox @change="chooseBoxFun($event,'isEligible')" multiple
:localdata="isEligibleList" />
</view>
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
通告明细
</view>
<view class="item-value">
<textarea v-model="dataObj.giftDetail" style="height: 600rpx;" type="text"
placeholder="请输入赠品明细" />
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
产品图
</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 is-required">
博主类型 <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>
<view class="form-content">
<view class="item-field">
<view class="item-lable is-required">
联系方式：
</view>
<view class="item-value">
</view>
</view>
<view class="item-field-row">
<view class="item-lable is-required">
电话
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.tel" type="text" placeholder="请输入" />
</view>
</view>
<view class="item-field-row">
<view class="item-lable is-required">
微信
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.wechat" type="text" placeholder="请输入" />
</view>
</view>
<view class="item-field-row">
<view class="line-row">
<uni-data-checkbox @change="chooseBoxFun($event,'isShowTel')" multiple
:localdata="isShowTelList" />
</view>
</view>
</view>
<!-- 自定义表单 -->
<view class="form-content">
<view class="item-field-row" style="padding-top: 0;">
<view class="item-lable is-required" 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="form-warn">
<image src="@/static/detail/warn.png" mode="aspectFit"></image>
<text>注意：为了您的信息安全，平台不建议填写您的银行卡号、身份证号、密码等隐私信息。</text>
</view>
<view class="item-field-row" v-for="(item,index) in customFieldList">
<view class="item-lable is-required">
{{item.labelTitle}}
</view>
<view class="item-value">
<input class="uni-input" v-model="item.value" type="text" placeholder="请输入" />
</view>
</view>
</view>
<!-- 微信群码 -->
<view class="form-content">
<view class="item-field">
<view class="item-lable is-required">
微信群码<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>
1
2025-04-11 15:15:00 +08:00
<view class="line-row-bottom">
<uni-data-checkbox @change="chooseBoxFun($event,'isRead')" multiple :localdata="readBookList" />
<text @click="handleUserAgrement(globalConfig.appInfo.agreements[1])"
class="text-red">《{{globalConfig.appInfo.agreements[1].title}}》</text>
</view>
1
2025-04-11 15:08:25 +08:00
</view>
</view>
<view class="dl-bottom-box">
<!-- 预览 -->
<view class="view-dom">
预览
</view>
<view class="public-dom">
发布
</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';
export default {
components: {
navigationBarVue,
},
data() {
return {
//一行显示几个
showNum: 4,
1
2025-04-11 15:15:00 +08:00
globalConfig: getApp().globalData.config,
1
2025-04-11 15:08:25 +08:00
//博主分类
bloggerTypeList: [],
//所有可选的平台
platFormRange: [],
globalConfig: getApp().globalData.config,
uploadUrl: config.baseUrl,
sizeType: ['compressed'],
//产品图片数组
fileList: [],
//微信群码
groupImageList: [],
//自定义表单
customFieldList: [{
labelTitle: "姓名",
value: "",
sort: 1
}, {
labelTitle: "身份证号",
value: "",
sort: 2
}],
dataObj: {
1
2025-04-11 15:15:00 +08:00
isRead: false,
1
2025-04-11 15:08:25 +08:00
title: "",
brand: "",
platformCode: "",
feeLimit: false,
feeDown: null,
feeUp: null,
giftLimit: false,
giftDetail: "",
giftPrice: null,
endDate: null,
needNum: null,
fansLimit: false,
fansDown: null,
fansUp: null,
// 报名是否需符合粉丝要求(0否|1是)
isEligible: 0,
//博主类型，按逗号拼接
bloggerTypes: "",
//博主类型数组，方便判断
bloggerTypesList: [],
tel: "",
wechat: "",
// 是否公开联系方式(0否|1是)
isShowTel: 0,
},
isEligibleList: [{
text: '报名需符合粉丝要求',
value: true
}],
isShowTelList: [{
text: '不公开联系方式，我会自己联系博主',
value: true
}],
1
2025-04-11 15:15:00 +08:00
readBookList: [{
text: '我已阅读并同意',
value: true
}],
1
2025-04-11 15:08:25 +08:00
//有无限制下拉框可选值
ifHasRange: [{
value: false,
text: "无"
},
{
value: true,
text: "有"
}
],
//是否限制
limitRange: [{
value: false,
text: "不限制"
},
{
value: true,
text: "限制"
}
],
}
},
onLoad() {
this.initData("dl_platform", 'platFormRange')
this.initData("dl_blogger_type", "bloggerTypeList")
},
methods: {
1
2025-04-11 15:15:00 +08:00
// 查看相关协议
handleUserAgrement(site) {
this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
},
1
2025-04-11 15:08:25 +08:00
/**
* 添加字段
*/
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 = {
labelTitle: val,
value: ""
}
if (this.customFieldList.length == 0) {
//直接添加
thisObj.sort = 1
} else {
//取最后一个字段
let endFieldObj = this.customFieldList[this.customFieldList.length - 1]
thisObj.sort = endFieldObj.sort + 1
}
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 {
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 {
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: 999;
.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;
}
}
1
2025-04-11 15:15:00 +08:00
.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;
1
2025-04-11 15:08:25 +08:00
}
</style>
Reference in New Issue Copy Permalink