youngee_b_api/pages/tasksquare/specialTask/information.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="margin-top: 160rpx;"></view>
		<view class="basicInfo">
			<image :src="mainImg" style="width: 150rpx;height: 150rpx;" mode="">
			</image>
			<view class="basicInfo_txt">
				<p style="margin-bottom: 10rpx;font-size: 35rpx;font-weight: 550;">{{project.project_name}}</p>
				<p style="font-size: 30rpx;">商品价值：{{project.Product.ProductPrice}}</p>
			</view>
		</view>

		<view class="address">
			<view>
				<image class="address_icon" :src="picture.icon_loc" mode="">
				</image>
			</view>
			<view style="width: 70%;">
				<view style="display: flex;">
					<p class='ipon' style="padding-right: 100rpx;">{{address.receiver_name}}</p>
					<p class='ipon'>{{address.phone_number}}</p>
				</view>
				<p class='ipon'>{{address.detail_addr}}</p>
			</view>
			<view class="address_edit" @click="editAddress()">
				<image :src="picture.icon_edit" mode="">
				</image>
			</view>
		</view>

		<view class="keyInfo">
			<h3>关键任务信息</h3>
			<view style="display: flex;margin-top: 10rpx;">
				<p style="font-weight: 600;">社媒平台：</p>
				<p>{{project.project_platform_t}}</p>
			</view>
			<p style="font-weight: 600;margin-top: 10rpx;">任务要求</p>
			<view class="keyInfo_task">
				<view style="display: flex;align-items: center;margin: 5rpx 0;">
					<p>内容形式：</p>
					<p class="keyInfo_task_txt">{{project.content}}</p>
				</view>
				<p style="margin: 5rpx 0;">商品描述：</p>
				<p class="keyInfo_task_txt"> {{project.Product.ProductDetail}}
				</p>
				<p style="margin: 5rpx 0;">任务详情：</p>
				<p class="keyInfo_task_txt"> {{project.project_detail}} </p>
			</view>
		</view>

		<view class="account">
			<view class="account_txt" @click="editAccount(item)">
				<image :src="project.PlatformInfo.platform_icon" mode=""></image>
				<span>{{account.platform_nickname}}</span>
			</view>
			<view class="account_fans">
				<p style="padding-right: 20rpx;color:#A8A8A8;">粉丝数</p>
				<p>{{account.show_fans_count}}</p>
			</view>
			<view class="account_btn" @click="editAccount(item)">
				<image :src="picture.togoimg" mode="" style="width: 16rpx;height: 30rpx;"></image>
			</view>
		</view>

		<view class="block"></view>
		<view class="submit">
			<button type="default" class="submit_btn" @click="submit()"> 确认邀请</button>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		fansview
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar
		},
		data() {
			return {
				mainImg: "https://horastar.obs.cn-east-3.myhuaweicloud.com/backstage_upload/bb531ede-28b5-49a0-8431-a1608fd35890.png",
				account_id: -1,
				address_id: -1,
				address: null,
				project: null,
				account: null,
				strategy: null,
				picture: {
					togoimg: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task16.png',
					icon_edit: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-edit.png',
					icon_loc: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/icon-loc.png',
					home8: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home8.png',
					home10: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home10.png',
					home11: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home11.png',
				},
				thirdPlatform: [],
				mysNavConfig: {
					isHome: false,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "信息确认",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png2.png",
						// 右图标
						rightPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		onShow() {
			this.getDefaultAddress();
			// 查询account	
			this.getAccount();
		},
		onLoad(options) {
			this.textObj = options.textObj.replace(/""/g, "");
			this.textObj = JSON.parse(decodeURIComponent(this.textObj))
			console.log(this.textObj)
			this.project = this.textObj.information
		},
		methods: {
			getAccount() {
				this.$https.get('/youngee/c/t/g/get-talent-account')
					.then(res => {
						console.log(res)
						if (res.data.code !== -3) {
							let account = res.data.data
							while (this.project == null) {}
							for (var i = 0; i < account.length; i++) {
								if (this.project.project_platform == account[i].platform_id) {
									this.account = account[i]
								}
							}
							this.account.show_fans_count = fansview(this.account.fans_count)
						}
					})
			},
			getDefaultAddress() {
				this.$https.get('/youngee/c/t/g/get-talent-default-address').then(res => {
					console.log("address")
					console.log(res.data.data)
					this.address = res.data.data;
				})
			},
			editAddress() {
				uni.navigateTo({
					url: '/pages/mycenter/addlocation?address_id=' + this.address.address_id + '&ismodify=1'
				});
			},
			editAccount() {
				uni.navigateTo({
					url: '/pages/mycenter/bindaccount?platform_id=' + this.account.platform_id + '&account_id=' +
						this.account.account_id
				});
			},
			// 提交确认报名
			submit() {
				console.log(this.project)

				// 2. 插入一条任务
				this.$https.post('/youngee/c/t/p/sign-up-task', {
					address_id: this.address.address_id,
					project_id: this.project.project_id,
					// strategy_id: this.strategy.strategy_id,
					// offer: this.strategy.offer,
				}).then(res => {
					if (res.data.code == 0) {
						var data = {
							task_id: res.data.data
						};
						data = JSON.stringify(data)
						uni.navigateTo({
							url: '/pages/tasksquare/success?textObj=' + encodeURIComponent(data)
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.basicInfo {
		display: flex;
		margin: 0 40rpx;

		.basicInfo_txt {
			margin-left: 40rpx;
			padding-top: 20rpx;
		}
	}

	.address {
		display: flex;
		margin: 50rpx 40rpx 0;
		justify-content: space-around;

		.address_icon {
			vertical-align: middle;
			width: 50rpx;
			height: 50rpx;
			display: inline-block;
			padding-right: 30rpx;
		}

		.address_edit {}

		.address_edit image {
			vertical-align: middle;
			width: 50rpx;
			height: 50rpx;
			display: inline-block;
			padding-right: 14rpx;
		}

		.ipon {
			color: #333333;
			font-size: 30rpx;
			font-weight: 500;
			margin-bottom: 10rpx;
		}
	}

	.keyInfo {
		margin: 50rpx 40rpx 0;

		.keyInfo_task {
			color: #999999;

			.keyInfo_task_txt {
				border: 1rpx solid #CCCCCC;
				border-radius: 10rpx;
				padding: 10rpx;
			}
		}
	}

	.keyInfo h3 {
		font-weight: 600;
	}

	.keyInfo p {
		font-size: 30rpx;
	}

	.account {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		width: 90%;
		padding: 16rpx;
		margin-top: 50rpx;
		font-size: 35rpx;

		.account_txt {
			display: inline-block;
			padding: 0 0 0 1%;
			width: 400rpx;
		}

		.account_txt image {
			vertical-align: middle;
			width: 50rpx;
			height: 50rpx;
			display: inline-block;
			padding-right: 14rpx;
		}

		.account_fans {
			display: flex;
			width: 250rpx;
		}

		.account_fans p {
			display: inline-block;
			color: #333333;
			font-weight: 550;
		}

		.account_btn {}
	}

	.block {
		width: 100%;
		height: 100rpx;
		margin-top: 5%;
	}

	.submit {
		box-shadow: 0rpx 5rpx 40rpx #ccc;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 90rpx;
		padding-top: 2%;
		background-color: #FFFFFF;

		.submit_btn {
			width: 60%;
			background-color: #FCCF41;
			border-radius: 20rpx;
			font-size: 36rpx;
			line-height: 200%;
			letter-spacing: 10rpx;
			font-weight: 500;
			height: 80%;
		}

	}
</style>