625 lines
16 KiB
Vue
625 lines
16 KiB
Vue
<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.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-wrap: wrap;">
|
||
<view v-if="headImg.length">
|
||
<view class="margin-top flex margin-right-sm flex-wrap">
|
||
<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%;" @click="previewImg(index)">
|
||
</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(2)" 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">服务详情图（最多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%;" @click="previewImgs(index)">
|
||
</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(1)" 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-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: 2,
|
||
game: '',
|
||
gameId: '',
|
||
money: '',
|
||
//服务详情图
|
||
detailsImg: [],
|
||
city: '',
|
||
id: 0,
|
||
|
||
myLevel: '',
|
||
//地区
|
||
region: '',
|
||
describes: '',
|
||
headImg: ''
|
||
},
|
||
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',
|
||
},
|
||
gameList: [],
|
||
listgame: '',
|
||
selarr: [],
|
||
show: false,
|
||
game: '',
|
||
checked: false,
|
||
disabled: false,
|
||
|
||
number: 0,
|
||
homepageImg: '',
|
||
id: '',
|
||
Imgo: [],
|
||
|
||
//地区选择
|
||
Dqshow: false,
|
||
//详情图上传
|
||
detailsImg: [],
|
||
headImg: [],
|
||
region: ''
|
||
}
|
||
},
|
||
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: {
|
||
// 技能列表
|
||
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;
|
||
|
||
},
|
||
//地区选择
|
||
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
|
||
},
|
||
// 详情图删除
|
||
removeImg(index) {
|
||
this.detailsImg.splice(index, 1)
|
||
},
|
||
// 预览照片
|
||
previewImgs(index) {
|
||
let _this = this;
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: _this.detailsImg
|
||
});
|
||
},
|
||
// 详情图删除
|
||
headImgremove(index) {
|
||
this.headImg.splice(index, 1)
|
||
},
|
||
// 预览照片
|
||
previewImg(index) {
|
||
let _this = this;
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: _this.headImg
|
||
});
|
||
},
|
||
|
||
openJn(item) {
|
||
console.log(item)
|
||
this.show = true
|
||
|
||
// item.ischeck = true
|
||
},
|
||
// 选中提交
|
||
bindGame() {
|
||
this.game = this.selarr
|
||
console.log(this.form.game, '5555555')
|
||
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
|
||
if (that.detailsImg.length <= 6) {
|
||
that.detailsImg.push(JSON.parse(uploadFileRes.data)
|
||
.data)
|
||
}
|
||
// that.detailsImg.push(JSON.parse(uploadFileRes.data).data)
|
||
} else if (e == 2) {
|
||
// that.headImg.push(JSON.parse(uploadFileRes.data).data)
|
||
that.headImg.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 < 1; 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 == 2) {
|
||
// that.form.homepageImg = JSON.parse(uploadFileRes.data).data
|
||
that.headImg.push(JSON.parse(uploadFileRes.data).data)
|
||
}
|
||
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 发布
|
||
submit() {
|
||
this.form.detailsImg = this.detailsImg
|
||
this.form.detailsImg = this.form.detailsImg.toString();
|
||
|
||
this.form.headImg = this.headImg
|
||
this.form.headImg = this.form.headImg.toString();
|
||
|
||
|
||
if (!this.form.myLevel) {
|
||
uni.showToast({
|
||
title: '请填写发布标题',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return
|
||
}
|
||
// if (!this.form.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.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.detailsImg = this.detailsImg
|
||
this.form.detailsImg = this.form.detailsImg.toString();
|
||
|
||
this.form.headImg = this.headImg
|
||
this.form.headImg = this.form.headImg.toString();
|
||
if (!this.form.myLevel) {
|
||
uni.showToast({
|
||
title: '请填写发布标题',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return
|
||
}
|
||
// if (!this.form.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.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)
|
||
}
|
||
});
|
||
},
|
||
// 选择游戏
|
||
selConfirm(e) {
|
||
// console.log(e);
|
||
this.form.game = e[0].label
|
||
this.form.gameId = e[0].value
|
||
},
|
||
getData(e) {
|
||
let data = {
|
||
id: e
|
||
}
|
||
this.$Request.get("/app/orderTaking/queryTakingOrder", data).then(res => {
|
||
if (res.code == 0 && res.data) {
|
||
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.detailsImg = res.data.detailsImg
|
||
this.detailsImg = res.data.detailsImg.split(',')
|
||
|
||
this.form.headImg = res.data.headImg ? res.data.headImg : ''
|
||
this.headImg = res.data.headImg.split(',')
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</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>
|