youngee_c_web_v2/page_selectionsquare/selectiondetail/information.vue

<template>
	<view>
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></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: 31rpx; font-weight: bold;">
					{{selection.selection_name}}
				</p>
				<p style="font-size: 27rpx;">售价：￥{{selection.YounggeeProduct[0].product_price}} &nbsp;&nbsp;&nbsp;&nbsp;
					样叽高佣：{{selection.YounggeeProduct[0].exclusive_commission}}%</p>
				<p style="font-size: 27rpx;" v-if="selection.task_mode === 1">
					额外悬赏：￥{{selection.RewardStrategy[0].per_reward}}</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.full_detail_addr}}</p>
			</view>
			<view class="address_edit" @click="editAddress()">
				<image :src="picture.icon_edit" mode="">
				</image>
			</view>
		</view>

		<view class="keyInfo">
			<p style="margin-bottom: 30rpx;font-size: 36rpx; font-weight: bold;">任务要求</p>
			<!-- <p>内容形式：{{selection.show_content_type}}</p> -->
			<p>带货链接:{{selection.product_url}}
				<image :src="picture.icon_copy" mode="" class="copy-img" @click="handleCopy('123')" />
			</p>
			<p>领样要求:</p>
			<!-- 具体领样品要求（粉丝数量） -->
			<view class="markcontent">
				<view class="" v-for="item in selection.FreeStrategy">
					<p style=" margin-top: 20rpx; margin-bottom: 20rpx; font-size: 26rpx;">
						粉丝量{{getFansLabel(item.fans_num)}}，近30天橱窗销量≥{{item.sale_num}}单</p>
				</view>

			</view>
		</view>

		<view class="account" @click="editAccount()">
			<view class="account_txt">
				<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/lQLPDhrXwll1_NcjI7AD0T3viYtxQwGOvh1SwG0A_35_35.png" mode=""></image>
				<span>{{account.nick_name}}</span>
			</view>
			<view class="account_fans">
				<p style="padding-right: 20rpx;color:#A8A8A8;">粉丝数</p>
				<p>{{account.fan}}</p>
			</view>
			<view class="account_btn">
				<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 region from '@/components/pca-code.json';
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import {
		fansview
	} from '@/components/utils.js';
	export default {
		components: {
			mvBar
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				picture: getApp().globalData.picture,
				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",
					},
				},
				options: [{
						value: '1',
						label: '所有人均可领取'
					},
					{
						value: '2',
						label: '1w下'
					},
					{
						value: '3',
						label: '1w-10w'
					},
					{
						value: '4',
						label: '10w-100w'
					},
					{
						value: '5',
						label: '100w-500w'
					},
					{
						value: '6',
						label: '500w-1000w'
					},
					{
						value: '7',
						label: '1000w以上'
					},
				],

				selection: {},
				product: {},
				youngTeamId: "",
				youngLeadTeamId: "",
				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,
				thirdPlatform: [],
				saleNum_30: 0,
			}
		},
		onShow() {
			// 根据address_id查询address
			this.getDefaultAddress();
			// 查询account	
			this.getTalentAccountInfo();
		},
		onLoad(options) {
			this.textObj = options.textObj.replace(/""/g, "");
			this.textObj = JSON.parse(decodeURIComponent(this.textObj))
			console.log("详情页传来的数据",this.textObj)
			this.saleNum_30=this.textObj.saleNum_30
			this.selection = this.textObj.selection
			console.log("this.selection------>", this.selection)
			this.product = this.selection.YounggeeProduct[0]
			this.youngTeamId = this.textObj.youngTeamId
			this.youngLeadTeamId = this.textObj.youngLeadTeamId

			for (let i = 0; i < this.selection.YounggeeProductPhoto.length; ++i) {
				if (this.selection.YounggeeProductPhoto[i].symbol === 1) {
					this.mainImg = this.selection.YounggeeProductPhoto[i].photo_url
				}
			}
			console.log("this.mainIma---->", this.mainImg)
			if (this.youngLeadTeamId === "") {
				this.getLeadYoungTeamId()
			}
		},
		methods: {
			getFansLabel(fansNum) {
				const option = this.options.find(o => o.value === fansNum.toString());
				return option ? option.label : fansNum;
			},
			handleCopy(content) {
				wx.setClipboardData({
					data: content,
					success: function(res) {
						console.log("复制成功");
					}
				});
			},
			getLeadYoungTeamId() {
				// 调用后端接口，创建young之团，若young之团存在则返回teamid，否则创建young之团并返回id
				return this.$https.post('/youngee/c/t/p/add-young-team', {
						selection_id: this.selection.selection_id,
						project_type: 2,
					})
					.then(res => {
						console.log(res)
						this.youngLeadTeamId = res.data.data;
					})
			},
			//账号信息
			getTalentAccountInfo() {
				return this.$https.get('/youngee/c/t/g/get-talent-account-kuaishou')
					.then(res => {
						this.account=res.data.data[0]
					})
				// console.log("account数组——————：  ",res)
			},
			getDefaultAddress() {
				this.$https.get('/youngee/c/t/g/get-talent-default-address').then(res => {
					console.log(res.data.data)
					this.address = res.data.data;
					let a = this.address.region_code.toString().slice(0, 2)
					let b = this.address.region_code.toString().slice(0, 4)
					let c = 0
					for (var i = 0; i < region.length; i++) {
						if (region[i].code == a) {
							a = region[i].name
							for (var j = 0; j < region[i].children.length; j++) {
								if (region[i].children[j].code == b) {
									b = region[i].children[j].name
									for (var o = 0; o < region[i].children[j].children.length; o++) {
										if (region[i].children[j].children[o].code == this.address
											.region_code) {
											c = region[i].children[j].children[o].name
										}
									}
								}

							}
						}
					}
					this.address.full_detail_addr = a + b + c + this.address.detail_addr
				})
			},
			editAddress() {
				uni.navigateTo({
					url: '/page_mycenter/myinformation/addlocation?address_id=' + this.address.address_id +
						'&ismodify=1'
				});
			},
			editAccount() {
				uni.navigateTo({
					url: '/page_mycenter/bindaccounts/kuaishoubind' 
				});
			},
			debugSubmit() {
				uni.navigateTo({
					url: '/page_tasksquare/wholetask/success'
				});
			},
			async submit(){
				
				//肯定有地址，样品肯定够，肯定有效期内，否则立即领样按钮无法点击
				console.log("api----", this.product.kuaishou_product_id)
				//调用加入橱窗api
				this.$https.get('/youngee/c/t/g/add-window' +
					"?" +
					"product_id" +
					"=" +
					this.product.kuaishou_product_id
				).then(res => {
					console.log("add window res****", res)
					//未开通
					let api_result = res.data.data.data[0]
					if (api_result.result == 1800533) {
						uni.showModal({
							content: '添加橱窗失败，免费领样申请失败', // 这里设置弹窗的内容
							showCancel: false, // 不显示取消按钮
							confirmText: '知道了', // 设置确认按钮的文本
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击知道了');
								}
							}
						});
					} else if (api_result.result == 1800550) {
						uni.showModal({
							content: '添加橱窗失败，免费领样申请失败', // 这里设置弹窗的内容
							showCancel: false, // 不显示取消按钮
							confirmText: '知道了', // 设置确认按钮的文本
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击知道了');
								}
							}
						});
					} else {
						//添加到seltask带货任务中
						console.log("提交报名")
						// 直接报名
						console.log("********", this.selection.product_id)
						console.log("this.account.fan********111", this.account.fan)
						console.log("this.saleNum_30********111", this.saleNum_30)
						this.$https.post('/youngee/c/t/p/sign-up-sec-task', {
							address_id: this.address.address_id,
							selection_id: this.selection.selection_id,
							lead_team_id: this.youngLeadTeamId,
							team_id: this.youngTeamId,
							product_id: this.selection.product_id,
							//新增
							saleNum: this.saleNum_30,
							fans: this.account.fan,
						}).then(res => {
							console.log("sign-up-sec-task 的res",res)
							if (res.data.code == 0) {
								var data = {
									task_id: res.data.data.task_id
								};
								data = JSON.stringify(data)
								uni.navigateTo({
									url: '/page_selectionsquare/selectiondetail/success?textObj=' +
										encodeURIComponent(
											data)
								});
							} else {
								uni.showModal({
									content: '网络繁忙，请小主稍后再试~',
								});
								
							}
							
						})
						
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	text {
		font-size: 32rpx;
	}

	p {
		font-size: 32rpx;
	}

	.basicInfo {
		display: flex;
		margin: 0 40rpx;
		padding: 30rpx 0;

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

	.address {
		display: flex;
		margin: 30rpx 40rpx 0;
		padding: 30rpx 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;
			margin-bottom: 10rpx;
		}
	}

	.keyInfo {
		margin: 30rpx 40rpx;
	}

	.keyInfo span {
		display: flex;
		align-items: center;
		margin: 10rpx 0;
	}

	.keyInfo p {
		margin: 25rpx 0;
	}


	.account {
		display: flex;
		align-items: center;
		width: 690rpx;
		padding: 24rpx 0;
		margin: 0 auto;

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

		.account_txt span {
			color: #333333;
			font-weight: 550;
			text-indent: 2em;
			font-size: 32rpx;
		}


		.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 {
			background-color: #FCCF41;
			border-radius: 20rpx;
			font-size: 30rpx;
			line-height: 220%;
			letter-spacing: 5rpx;
			height: 80%;
		}

	}
</style>