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

869 lines
22 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>
<view class="text-white padding bg radius margin">
<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="服务类型">
<view v-if="game == ''" @click="openJn(game)" style="color: #cccccc;">
选择服务类型(多选)
</view>
<view v-else style="display: inline-flex;">
<view v-for="(item,index) in game" @click="openJn(game)"
style="background: #096f4b;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.orderLevel" placeholder="请填写(必填)" disabled="true" @click="JYshow = true" />
</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 ">
<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 class="text-lg margin-top-sm">头像上传(可多张)</view>
<view class="flex" style="overflow: hidden;flex-direction: initial;">
<view class="margin-top flex margin-right-sm" v-if="headImg.length">
<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 class="margin-top" @click="addImage(1)" v-if="headImg.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 class="text-lg margin-top-sm">持有资质证书 (可多张)</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view class="margin-top flex margin-right-sm flex-wrap" v-if="certificateImg.length">
<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 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 class="margin-lr bg radius " style="margin-bottom: 240rpx;">
<view class="padding">
<view style="color: #096f4b;">缴纳保证金</view>
<view class="flex justify-between align-center" style="line-height: 60rpx;">
<view style="color: #999999;" class="text-sm">满足一定条件即可申请返还保证金</view>
<view style="color: #F1413D;">¥{{money}}</view>
</view>
</view>
</view>
<view class="tabbar">
<view>
支付:<text style="color: #F1413D;">¥{{money}}</text>
</view>
<view>
<u-button v-if="id" @click="update" class="margin-top" :custom-style="customStyle" shape="circle"
:hair-line="false">发布并支付</u-button>
<u-button v-else @click="submit" class="margin-top" :custom-style="customStyle" shape="circle"
:hair-line="false">发布并支付</u-button>
</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-popup v-model="showpay" mode="bottom" :closeable="closeable">
<view class="popup_pay">
<view style="background-color: #fff;">
<view style="padding: 0 20upx;margin-top: 60rpx;margin-bottom: 20rpx;">
<view
style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
v-for="(item,index) in openLists" :key='index'>
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
</image>
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
{{item.text}}
</view>
<radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item)'>
<label class="tui-radio">
<radio color="#096f4b" :checked="openWay === item.id ? true : false" />
</label>
</radio-group>
</view>
</view>
</view>
<view class="pay_btn" @click="pay()">确认支付</view>
</view>
</u-popup>
<!-- <u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet> -->
</view>
</template>
<script>
import jsfunRecord from '../components/jc-record/jc-record.vue'
import * as websocketUtils from 'utils/websocketUtils.js';
export default {
components: {
jsfunRecord
},
data() {
return {
form: {
myLevel: '',
gameId: '',
orderLevel: '',
money: '',
describes: '',
//头像上传
headImg: [],
//资质证书
certificateImg: [],
city: '',
id: 0,
//地区
region: ''
},
disabled: false,
lableStyle: {
fontSize: '32rpx'
},
customStyle: {
backgroundColor: '#096f4b',
color: '#FFFFFF',
border: 0
},
status: 1,
customStyle1: {
color: '#FFFFFF',
position: "fixed",
bottom: "15rpx",
left: "0rpx",
right: "0rpx",
margin: "0rpx 50rpx",
backgroundColor: '#096f4b',
},
selarr: [],
show: false,
gameList: [],
game: '',
checked: false,
disabled: false,
number: 0,
id: '',
//地区选择
Dqshow: false,
//头像上传
headImg: [],
//资质证书
certificateImg: [],
region: '',
count: 0,
JYshow: false,
list: [{
value: '1',
label: '60分钟'
}, {
value: '2',
label: '90分钟'
}, {
value: '3',
label: '120分钟'
}, {
value: '4',
label: '3小时'
},
{
value: '5',
label: '4小时'
}, {
value: '6',
label: '5小时'
}
],
money: 0,
showpay: false,
openLists: [],
openWay: 1,
closeable: true
}
},
onLoad() {
this.form.city = uni.getStorageSync('city')
this.form.latitude = uni.getStorageSync('latitude')
this.form.longitude = uni.getStorageSync('longitude')
this.getData(1)
this.getGameList()
// #ifdef APP
this.openLists = [{
image: '../../static/images/icon_weixin.png',
text: '微信',
id: 1
}, {
image: '../../static/images/zhifubao.png',
text: '支付宝',
id: 2
}],
this.openWay = 1;
// #endif
// #ifdef MP-WEIXIN
this.openLists = [{
image: '../../static/images/icon_weixin.png',
text: '微信',
id: 1
}],
this.openWay = 1;
// #endif
// #ifdef H5
this.openLists = [{
image: '../../static/images/zhifubao.png',
text: '支付宝',
id: 2
}]
this.openWay = 2;
// #endif
},
onShow() {
this.Getmoney()
},
methods: {
// 保证金
Getmoney() {
this.$Request.get("/app/common/type/239").then(res => {
console.log(res)
if (res.code == 0) {
this.money = res.data.value
}
});
},
//经验筛选
Getjy(e) {
console.log(e);
this.form.orderLevel = e[0].label
},
//头像删除
headImgremove(){
this.headImg.splice(index, 1)
},
//资质证书删除
removeImg(index) {
this.certificateImg.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
},
select(e) {
this.status = e
},
// 图片上传
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)
}
}
uni.hideLoading();
}
});
}
}
})
},
addImage(e) {
let that = this
uni.chooseImage({
count: 3,
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.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();
if (!this.form.myLevel) {
uni.showToast({
title: '请填写发布标题',
icon: 'none',
duration: 1000
})
return
}
if (this.game == '') {
uni.showToast({
title: '请选择服务类型',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.orderLevel) {
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
}
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.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();
if (!this.form.myLevel) {
uni.showToast({
title: '请填写发布标题',
icon: 'none',
duration: 1000
})
return
}
if (this.game == '') {
uni.showToast({
title: '请选择服务类型',
icon: 'none',
duration: 1000
})
return
}
if (!this.form.orderLevel) {
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
}
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.form.authentication = res.data.authentication
this.form.orderLevel = res.data.orderLevel
this.region = res.data.region
}
});
},
pay() {
let userId = uni.getStorageSync('userId')
data = {
name: this.form.name,
idNumber: this.form.idNumber,
birthdate: this.form.birth,
sex: this.sex,
phone: this.form.phone,
front: this.form.front,
back: this.form.back,
remek: this.form.remek,
infantImg: this.form.infantImg,
infantImgs: this.form.infantImgs,
classify: this.classify,
userId: userId
}
console.log(data, 'pppp1')
this.showpay = false
if (this.openWay == 1) { //微信支付
// #ifdef MP-WEIXIN
this.$Request.postJson('/app/wxPay/wxPayJsApiUserCertification', data).then(res => {
console.log(res)
if (res.code == 0) {
// this.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timestamp,
nonceStr: res.data.noncestr,
package: res.data.package,
signType: res.data.signType,
paySign: res.data.sign,
success: function(res) {
console.log(res)
uni.switchTab({
url: '/pages/my/index'
})
},
fail: function(err) {
this.$queue.showToast('支付失败');
}
});
}
});
// #endif
// #ifdef H5
this.$Request.postJson('/app/wxPay/wxPayMpUserCertification', data).then(res => {
this.showpay = false
that.callPay(res);
});
// #endif
// #ifdef APP
this.$Request.postJson('/app/wxPay/payAppUserCertification', data).then(res => {
console.log(res)
this.showpay = false
if (res.code == 0) {
this.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
}
});
// #endif
} else if (this.openWay == 2) { //支付宝支付
// #ifdef H5
this.$Request.postJson('/app/aliPay/payOrderUserCertification', data).then(
res => {
this.showpay = false
const div = document.createElement('div')
div.innerHTML = res.data //此处form就是后台返回接收到的数据
document.body.appendChild(div)
document.forms[0].submit()
});
// #endif
// #ifdef APP-PLUS
this.$Request.postJson('/app/aliPay/payAppUserCertification', data).then(
res => {
this.showpay = false
this.setPayment('alipay', res.data);
});
// #endif
}
},
callPay: function(response) {
if (typeof WeixinJSBridge === "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
}
} else {
this.onBridgeReady(response);
}
},
onBridgeReady: function(response) {
let that = this;
if (!response.package) {
return;
}
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": response.appid, //公众号名称,由商户传入
"timeStamp": response.timestamp, //时间戳自1970年以来的秒数
"nonceStr": response.noncestr, //随机串
"package": response.package,
"signType": response.signType, //微信签名方式:
"paySign": response.sign //微信签名
},
function(res) {
if (res.err_msg === "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok但并不保证它绝对可靠。
uni.showLoading({
title: '支付成功'
});
uni.hideLoading();
uni.navigateTo({
url: '/pages/my/index'
})
} else {
uni.hideLoading();
}
WeixinJSBridge.log(response.err_msg);
}
);
},
isCheckPay(code, name, order) {
if (code == 0) {
this.setPayment(name, order);
} else {
uni.hideLoading();
uni.showToast({
title: '支付信息有误'
});
}
},
setPayment(name, order) {
uni.requestPayment({
provider: name,
orderInfo: order, //微信、支付宝订单数据
success: function(res) {
uni.hideLoading();
uni.showLoading({
title: '支付成功'
});
uni.switchTab({
url: '/pages/my/index'
})
},
fail: function(err) {
uni.hideLoading();
},
complete() {
uni.hideLoading();
}
});
}
}
}
</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: #096f4b;
border: 1rpx solid #096f4b;
}
.tabbar {
width: 100%;
height: 98upx;
background: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 0upx 40upx;
}
.popup_pay {
width: 100%;
position: relative;
padding-bottom: 45rpx;
/* height: 160px; */
/* #ifndef MP-WEIXIN */
/* height: 130px; */
/* #endif */
}
.pay_btn {
width: 90%;
margin: 0 auto;
text-align: center;
background: #1777FF;
height: 80rpx;
border-radius: 16rpx;
color: #ffffff;
line-height: 80rpx;
}
</style>