sadjv2/anmo-shop/my/publish/editor.vue

803 lines
21 KiB
Vue
Raw Permalink Normal View History

2024-06-04 10:11:25 +08:00
<template>
<view class="padding">
<view class="text-white padding bg radius">
<u-form :model="form" ref="uForm" label-position="top" :label-style='lableStyle'>
<u-form-item label="标题">
<u-input v-model="form.myLevel" placeholder="请填写标题内容" />
</u-form-item>
<u-form-item label="个人经验">
<u-input v-model="form.orderLevel" placeholder="请填写(必填)" disabled="true" @click="JYshow = true" />
</u-form-item>
<u-form-item label="服务地区">
<u-input v-model="form.region" disabled="true" placeholder="请填写" @click="bindOpen()" />
</u-form-item>
<u-form-item label="技能">
<!-- <u-input v-model="form.game" disabled placeholder="可商议" @click="show = true" /> -->
<view v-if="game == ''" @click="openJn(game)">
选择技能分类多选
</view>
<view v-else style="display: inline-flex;">
<view v-for="(item,index) in game" @click="openJn(game)"
style="background: #557EFD;margin-right: 15rpx;color: #FFFFFF;padding: 0rpx 15rpx;border-radius: 15rpx;">
{{item.gameName?item.gameName:item}}
</view>
</view>
</u-form-item>
<u-form-item label="期望薪资(月薪)">
<u-input v-model="form.money" type="number" placeholder="请填写(必填)" />
</u-form-item>
</u-form>
</view>
<view class="text-white padding bg radius margin-tb">
<view>
<view class="text-lg">特长描述</view>
<view class="margin-tb-sm">
<u-input v-model="form.describes" type="textarea" height="200" placeholde="请描述一下您的特长" maxlengt="200"
:clearable="false" />
</view>
</view>
<view>
<view class="text-lg margin-top-sm">头像上传</view>
<view class="flex" style="overflow: hidden;flex-direction: initial;">
<view v-if="headImg.length">
<view class="margin-top flex margin-right-sm">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 10rpx;position: relative;"
v-for="(image,index) in headImg" :key="index">
<image :src="image" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="headImgremove(index)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImage(1)" v-if="headImg.length<=0">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../../static/images/my/add.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="text-lg margin-top-sm">持有资质证书 (可多张)</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="certificateImg.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
v-for="(image,index) in certificateImg" :key="index">
<image :src="image" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImg(index)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImages(2)" v-if="certificateImg.length<=2">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../../static/images/my/add.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="text-lg margin-top-sm">工作照片 (可多张)</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="workImg.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
v-for="(image,index) in workImg" :key="index">
<image :src="image" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="workImgremove(index)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImages(3)" v-if="workImg.length<=2">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../../static/images/my/add.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="text-lg margin-top">服务详情图最多6张</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="detailsImg.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;"
v-for="(image,index) in detailsImg" :key="index">
<image :src="image" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImgdetail(index)">
<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImages(4)" v-if="detailsImg.length<=5">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../../static/images/my/add.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center">选择图片</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 经验筛选 -->
<u-select v-model="JYshow" :list="list" @confirm="Getjy"></u-select>
<!-- 地区选择 -->
<u-picker v-model="Dqshow" mode="region" @confirm="bindRegion"></u-picker>
<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true">
<view class="fl_pop">
<view class="flex flex-wrap" style="padding: 100rpx 60rpx;margin-bottom: 50rpx;">
<view v-for="(item,index) in gameList" :key="index" class="flex margin-right-sm"
@click="bindList(index,item)">
<text class="tabBox margin-top-xs"
:class="item.ischeck==true?'btnnum':''">{{item.gameName}}</text>
</view>
<u-button @click="bindGame()" :custom-style="customStyle1">确定</u-button>
</view>
</view>
</u-popup>
<u-button v-if="id" @click="update" class="margin-top" :custom-style="customStyle" shape="square"
:hair-line="false">提交发布</u-button>
<u-button v-else @click="submit" class="margin-top" :custom-style="customStyle" shape="square"
:hair-line="false">提交发布</u-button>
<!-- <u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet> -->
</view>
</template>
<script>
import * as websocketUtils from 'utils/websocketUtils.js';
import jsfunRecord from '../components/jc-record/jc-record.vue'
export default {
components: {
jsfunRecord
},
data() {
return {
form: {
authentication: 1,
game: '',
gameId: '',
money: '',
//头像上传
headImg: [],
//资质证书
certificateImg: [],
//工作照片
workImg: [],
city: '',
id: 0,
unit: '小时',
myLevel: '',
//地区
region: '',
describes: '',
detailsImg: '',
orderLevel: ''
},
disabled: false,
jiedanList: [{
name: '小时',
checked: true,
disabled: 1
}, {
name: '天',
checked: false,
disabled: 2
}],
lableStyle: {
// color: '#FFFFFF',
fontSize: '32rpx'
},
customStyle: {
backgroundColor: '#005DFF',
color: '#FFFFFF',
border: 0
},
status: 1,
customStyle1: {
color: '#FFFFFF',
position: "fixed",
bottom: "15rpx",
left: "0rpx",
right: "0rpx",
margin: "0rpx 50rpx",
backgroundColor: '#005DFF',
},
selarr: [],
show: false,
gameList: [],
listgame: '',
game: '',
checked: false,
disabled: false,
number: 0,
homepageImg: '',
id: '',
Imgo: [],
//地区选择
Dqshow: false,
//头像上传
headImg: [],
//资质证书
certificateImg: [],
//工作照片
workImg: [],
detailsImg: [],
region: '',
count: 0,
JYshow: false,
list: [{
value: '1',
label: '无经验'
}, {
value: '2',
label: '1年以下经验'
}, {
value: '3',
label: '1-3年经验'
}, {
value: '4',
label: '3-5年经验'
},
{
value: '5',
label: '5-8年经验'
}, {
value: '6',
label: '8年以上经验'
}
],
}
},
onLoad(option) {
this.id = option.id
this.form.id = option.id
this.form.city = uni.getStorageSync('city')
this.form.latitude = uni.getStorageSync('latitude')
this.form.longitude = uni.getStorageSync('longitude')
this.getData(this.id)
this.getGameList()
},
onShow() {
},
methods: {
//经验筛选
Getjy(e) {
console.log(e);
this.form.orderLevel = e[0].label
},
// 详情图删除
headImgremove(index) {
this.headImg.splice(index, 1)
},
// 详情图删除
removeImg(index) {
this.detailsImg.splice(index, 1)
},
removeImg(index) {
// console.log(index,'111111111',this.form.headImg)
this.certificateImg.splice(index, 1)
},
workImgremove(index) {
this.workImg.splice(index, 1)
},
removeImgdetail(index){
this.detailsImg.splice(index, 1)
},
// 技能列表
bindList(index, item) {
console.log(index)
if (this.selarr.length > 1 && item.ischeck == false) {
uni.showToast({
title: '最多选择2个技能',
icon: 'none'
})
return
}
if (item.ischeck == false) {
item.ischeck = true;
this.selarr.push(item)
} else {
item.ischeck = false;
let index11 = this.selarr.indexOf(index)
this.selarr.splice(index11, 1)
}
this.selarr = this.selarr;
},
openJn(item) {
console.log(item)
this.show = true
// item.ischeck = true
},
//地区选择
bindOpen() {
this.Dqshow = true
},
bindRegion(e) {
console.log(e)
this.region = e.province.label + e.city.label + e.area.label
this.form.region = e.province.label + ',' + e.city.label + ',' + e.area.label
},
// 选中提交
bindGame() {
this.game = this.selarr
let gameId = "";
for (var game in this.selarr) {
gameId = gameId + "," + this.selarr[game].gameName
}
gameId = gameId.substring(1, gameId.length);
this.form.gameId = gameId
this.show = false
},
jiedanChange(e) {
this.form.unit = e;
},
select(e) {
this.status = e
},
endChange(e) {
if (this.startHour >= e.hour) {
uni.showToast({
title: '结束时间必须大于开始时间一个小时以上',
icon: "none"
})
return
}
this.endTime = e.hour + ':' + e.minute
this.form.orderTakingTime = this.startTime + '~' + this.endTime
},
// 图片上传
addImages(e) {
let that = this
uni.chooseImage({
count: 6,
sourceType: ['album', 'camera'],
success: res => {
for (let i = 0; i < res.tempFilePaths.length; i++) {
that.$queue.showLoading("上传中...");
uni.uploadFile({ // 上传接口
url: websocketUtils.uploadFileUrl(), //真实的接口地址
// url: 'https://jiazheng.xianmxkj.com/sqx_fast/alioss/upload',
filePath: res.tempFilePaths[i],
name: 'file',
success: (uploadFileRes) => {
if (e == 1) {
// that.form.homepageImg = JSON.parse(uploadFileRes.data).data
that.headImg.push(JSON.parse(uploadFileRes.data).data)
} else if (e == 2) {
if (that.certificateImg.length <= 5) {
that.certificateImg.push(JSON.parse(uploadFileRes.data)
.data)
}
} else if (e == 3) {
if (that.workImg.length <= 5) {
that.workImg.push(JSON.parse(uploadFileRes.data).data)
}
} else if (e == 4) {
if (that.detailsImg.length <= 5) {
that.detailsImg.push(JSON.parse(uploadFileRes.data)
.data)
}
}
uni.hideLoading();
}
});
}
}
})
},
addImage(e) {
let that = this
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
success: res => {
for (let i = 0; i < res.tempFilePaths.length; i++) {
that.$queue.showLoading("上传中...");
uni.uploadFile({ // 上传接口
url: websocketUtils.uploadFileUrl(), //真实的接口地址
// url: 'https://jiazheng.xianmxkj.com/sqx_fast/alioss/upload',
filePath: res.tempFilePaths[i],
name: 'file',
success: (uploadFileRes) => {
if (e == 1) {
// that.form.homepageImg = JSON.parse(uploadFileRes.data).data
that.headImg.push(JSON.parse(uploadFileRes.data).data)
}
uni.hideLoading();
}
});
}
}
})
},
// 发布
submit() {
this.form.headImg = this.headImg
this.form.headImg = this.form.headImg.toString();
this.form.certificateImg = this.certificateImg
this.form.certificateImg = this.form.certificateImg.toString();
this.form.workImg = this.workImg
this.form.workImg = this.form.workImg.toString();
this.form.detailsImg = this.detailsImg
this.form.detailsImg = this.form.detailsImg.toString();
if (!this.form.myLevel) {
uni.showToast({
title: '请填写发布标题',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.orderLevel) {
uni.showToast({
title: '请填写经验',
icon: 'none',
duration: 1000
})
return
}
// if (!this.region) {
// uni.showToast({
// title: '请选择服务地区',
// icon: 'none',
// duration: 1000
// })
// return
// }
if (this.game == '') {
uni.showToast({
title: '请选择发布分类',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.money) {
uni.showToast({
title: '请填写期望薪资',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.describes) {
uni.showToast({
title: '请填写特长描述',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.headImg) {
uni.showToast({
title: '请上传头像',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.certificateImg) {
uni.showToast({
title: '请上传资质证书',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.workImg) {
uni.showToast({
title: '请上传工作照片',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.detailsImg) {
uni.showToast({
title: '请上传服务详情图',
icon: 'none',
duration: 1000
})
return
}
console.log(this.form)
this.form.id = ''
this.$Request.get("/app/orderTaking/insertOrderTaking", this.form).then(res => {
if (res.code == 0) {
uni.showToast({
title: res.msg,
icon: 'none'
})
setTimeout(function() {
// uni.navigateBack()
uni.navigateTo({
url: '/my/publish/index'
})
}, 1000)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
},
// 重新编辑
update() {
this.form.headImg = this.headImg
this.form.headImg = this.form.headImg.toString();
this.form.certificateImg = this.certificateImg
this.form.certificateImg = this.form.certificateImg.toString();
this.form.workImg = this.workImg
this.form.workImg = this.form.workImg.toString();
this.form.detailsImg = this.detailsImg
this.form.detailsImg = this.form.detailsImg.toString();
if (!this.form.myLevel) {
uni.showToast({
title: '请填写发布标题',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.orderLevel) {
uni.showToast({
title: '请填写经验',
icon: 'none',
duration: 1000
})
return
}
// if (!this.region) {
// uni.showToast({
// title: '请选择服务地区',
// icon: 'none',
// duration: 1000
// })
// return
// }
if (this.game == '') {
uni.showToast({
title: '请选择发布分类',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.money) {
uni.showToast({
title: '请填写期望薪资',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.describes) {
uni.showToast({
title: '请填写特长描述',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.headImg) {
uni.showToast({
title: '请上传头像',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.certificateImg) {
uni.showToast({
title: '请上传资质证书',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.workImg) {
uni.showToast({
title: '请上传工作照片',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.detailsImg) {
uni.showToast({
title: '请上传服务详情图',
icon: 'none',
duration: 1000
})
return
}
this.$Request.get("/app/orderTaking/updateTakingOrder", this.form).then(res => {
if (res.code == 0) {
uni.showToast({
title: '编辑成功',
icon: 'none'
})
setTimeout(function() {
// uni.navigateBack()
uni.navigateTo({
url: '/my/publish/index'
})
}, 1000)
}
});
},
// 获取游戏列表
getGameList() {
this.$Request.get("/app/appGame/queryGameName").then(res => {
if (res.code == 0) {
res.data.forEach(res => {
res.label = res.gameName
res.value = res.id
res.ischeck = false
})
if (this.id) {
for (var i = 0; i < res.data.length; i++) {
for (var a = 0; a < this.game.length; a++) {
if (res.data[i].gameName == this.game[a]) {
res.data[i].ischeck = true
}
}
}
}
this.gameList = res.data
console.log(this.gameList)
}
});
},
getData(e) {
let data = {
id: e
}
this.$Request.get("/app/orderTaking/queryTakingOrder", data).then(res => {
if (res.code == 0) {
this.game = res.data.gameId.split(',')
this.form.gameId = res.data.gameId
this.form.myLevel = res.data.myLevel
this.form.region = res.data.region
this.form.money = res.data.oldMoney
this.form.describes = res.data.describes
this.form.headImg = res.data.headImg ? res.data.headImg : ''
this.headImg = res.data.headImg.split(',') ? res.data.headImg.split(',') : ''
this.form.certificateImg = res.data.certificateImg ? res.data.certificateImg : ''
this.certificateImg = res.data.certificateImg.split(',') ? res.data.certificateImg.split(
',') : ''
this.workImg = res.data.workImg.split(',') ? res.data.workImg.split(',') : ''
this.form.workImg = res.data.workImg ? res.data.workImg : ''
this.detailsImg = res.data.detailsImg.split(',') ? res.data.detailsImg.split(',') : ''
this.form.detailsImg = res.data.detailsImg ? res.data.detailsImg : ''
this.form.authentication = res.data.authentication
this.form.orderLevel = res.data.orderLevel
this.region = res.data.region
}
});
},
// 清除录音
clearAudio() {
this.status = 1
this.recordLength = 0
this.form.voiceIntroduce = ''
},
}
}
</script>
<style>
page {
background-color: #F5F5F5;
}
.bg {
background-color: #FFFFFF;
}
.tabBox {
border: 1rpx solid #999999;
padding: 15rpx 20rpx;
border-radius: 15rpx;
font-size: 28rpx;
}
.btnnum {
color: #005DFF;
border: 1rpx solid #005DFF;
}
</style>