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

803 lines
21 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="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>