anmo-master/my/publish/editor.vue

<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: #2FB57A;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: #2FB57A;">缴纳保证金</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="#2FB57A" :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 configdata from '@/common/config.js';
	import jsfunRecord from '../components/jc-record/jc-record.vue'

	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: '#2FB57A',
					color: '#FFFFFF',
					border: 0
				},
				status: 1,
				customStyle1: {
					color: '#FFFFFF',
					position: "fixed",
					bottom: "15rpx",
					left: "0rpx",
					right: "0rpx",
					margin: "0rpx 50rpx",
					backgroundColor: '#2FB57A',
				},
				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: that.config("APIHOST1") + '/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: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										that.headImg.push(JSON.parse(uploadFileRes.data).data)
									}
									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			// 发布
			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: #2FB57A;
		border: 1rpx solid #2FB57A;
	}

	.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>