ts_aimz_uni/pages/index/home.vue

<template>
	<view id="title-box" class="title-container" style="padding-bottom: 60rpx;">
		<view class="bg-title"></view>
		<!-- 自定义title -->
		<view class="title-content">
			<!-- 上半部分 -->
			<view id="up-box">
				<view class="custom-navbar"
					:style="{'height':totalHeight+'px','padding-top':statusBarHeight+'px','justify-content':'flex-start','color':'white'}">
					<view class="navbar-title">AI喵著</view>
				</view>
				<!-- 充值/创建 -->
				<view class="title-func">
					<view class="create-btn" @click="createCopy">
						<view class="icon-add-custom" style="width: 40rpx;height: 40rpx;"></view>
						<text style="margin-left: 20rpx;text-align: center;font-size: 40rpx;">创建软著</text>
					</view>
					<view class="buy-btn" @click="goPayment">充值</view>
				</view>
				<!-- 通知信息 -->
				<view class="notice-box">
					<view class="icon icon-horn-ind"></view>
					<view class="marquee-container">
						<view class="marquee-text">{{noticeContent}}</view>
					</view>
				</view>
				<!-- 内容tab -->
				<view class="content-up">
					<view class="list-title-box">
						<view class="list-title">
							<view class="list-title-line"></view>
							<view class="list-title-txt">软著列表</view>
						</view>
						<view class="list-title-btns">
							<view @click="doChangeStatus('PROCESSING')"
								:class="currentStatus=='PROCESSING'? 'btn-select':'btn-normal'" class="border-left">进行中的
							</view>
							<view @click="doChangeStatus('COMPLETE')" data-value="COMPLETE"
								:class="currentStatus=='COMPLETE'? 'btn-select':'btn-normal'" class="border-right">已完成的
							</view>
						</view>
					</view>
					<scroll-view :scroll-x="true" class="mt-20 scroll-view_H" show-scrollbar="false">
						<view class="list-tabs">
							<block v-for="(item,index) in typeList" :key="index">
								<view :class="currentType==item.value? 'tab-select' :'tab-normal'" class="item-margin"
									@click="doChangeType(item.value)">
									{{item.label}}
								</view>
							</block>
							<view class="divider-h"></view>
							<block v-for="(item,index) in expandList" :key="index">
								<view :class="currentExpand==item.value? 'tab-select' :'tab-normal'" class="item-margin"
									@click="doChangeExpand(item.value)">
									{{item.label}}
								</view>
							</block>
							<view class="divider-h"></view>
							<block v-for="(item,index) in tagList" :key="index">
								<view :class="currentTag==item.key? 'tab-select' :'tab-normal'" class="item-margin"
									@click="doChangeTag(item.key)">
									{{item.value}}
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="content-box">
				<ContainerLoading :loadingVisible="listLoading" :style="{'height':contentHeight+'rpx'}"
					@doRefresh="doRefreshList">
					<scroll-view scroll-y="true" :style="{'height':contentHeight+'rpx'}" :lower-threshold="100"
						refresher-background="#FFFFFF00" @scrolltolower="doLoadMore">
						<view class="list-content">
							<block v-for="(item,index) in projectList" :key="index">
								<view class="list-item">
									<view class="item-img">
										<swiper class="cover" autoplay>
											<block v-for="(imgItem,imgIndex) in item.codeTypePage.previewImgs"
												:key="imgIndex">
												<swiper-item class="cover">
													<image class="cover" :src="imgItem"></image>
												</swiper-item>
											</block>
										</swiper>
										<view class="item-img-status">
											<text>{{status(item.generate.generateStatus,item.aiSetting.settingStatus)}}</text>
										</view>
									</view>
									<view class="item-content">
										<view class="list-item-content">
											<view class="project-name">{{item.projName}}</view>
											<view class="project-aff">
												<view class="icon icon-user-ind"></view>
												<text class="txt">{{item.apply.applyContactName}}</text>
											</view>
											<view class="project-create-time">{{item.gmtCreate}}</view>
										</view>
										<view class="list-item-btns">
											<view v-if="item.pay.servicePackageId != ''" class="project-status">套餐包
											</view>
											<rich-text v-else class="project-status single-line"
												:nodes="moneyTxt(8,12,(item.pay.payment/100))"></rich-text>
											<view v-if="item.btnStatus=='DOWNLOAD'" class="project-btn"
												@click="doShowDownload(item)">下载</view>
											<view v-else-if="item.btnStatus=='AIGEN'" class="project-btn"
												@click="doCreatePro(item)">生成</view>
											<view v-else-if="item.btnStatus=='RELOAD'" class="project-re-btn"
												@click="doReCreate(item)">重新生成</view>
											<view v-else-if="item.btnStatus=='GEN'" class="project-btn"
												@click="doCreatePro(item)">生成</view>
										</view>
									</view>
								</view>
							</block>
							<uni-load-more :status="loadMore" color="var(--divider-color)"></uni-load-more>
						</view>
					</scroll-view>
				</ContainerLoading>
			</view>
		</view>
		<!-- 下载弹窗 -->
		<uni-popup ref="downloadPopup" type="bottom" border-radius="15rpx 15rpx 0rpx 0rpx">
			<view class="bottom-dialog-container bg-gray" style="border-radius: 15rpx 15rpx 0rpx 0rpx;">
				<view
					style="font-size: 16px;font-weight: bold;align-self: center;display: flex;flex-direction: row;justify-content: center;align-items: center;">
					<view class="icon-download-blue size-48"></view>
					<text class="ml-10">资料下载</text>
				</view>
				<scroll-view scroll-y style="height: 80vh;">
					<view class="download-box">
						<view class="download-desc">
							<view class="link-title">
								<view class="bg-yellow">
									<view class="icon-link-yellow size-48"></view>
								</view>
								<text class="ml-10">项目预览链接</text>
							</view>
							<text class="download-item-desc">复制下方链接查看项目演示</text>
							<view class="link-box">
								<text :selectable="true" class="link" @click="copyLink">{{sysPreviewUrl}}</text>
							</view>
						</view>
						<view class="download-item">
							<view class="download-title">
								<view class="bg-green">
									<view class="icon-table size-48"></view>
								</view>
								<view class="download-title-txt">申请表</view>
							</view>
							<text class="download-item-desc">软件著作权登记申请表,包含软件名称、版本号、开发完成日期、著作权人信息等</text>
							<view class="download-btn-box">
								<view class="download-btn blue" @click="download"
									data-path="/route/proj/download/apply/" data-type="docx">
									<view class="ic-doc" style="width: 20px;height: 20px;"></view>
									<view class="download-btn-txt">Word格式</view>
								</view>
								<view class="download-btn gray" @click="download"
									data-path="/route/proj/download/apply-txt/" data-type="txt">
									<view class="ic-txt" style="width: 20px;height: 20px;"></view>
									<view class="download-btn-txt">TXT格式</view>
								</view>
							</view>
						</view>

						<view class="download-item">
							<view class="download-title">
								<view class="bg-yellow">
									<view class="icon-source size-48"></view>
								</view>
								<view class="download-title-txt">操作手册</view>
							</view>
							<text class="download-item-desc">软件的鉴别材料-操作手册</text>
							<view class="download-btn-box">
								<view class="download-btn blue" @click="download"
									data-path="/route/proj/download/manual/" data-type="docx">
									<view class="ic-doc" style="width: 20px;height: 20px;"></view>
									<view class="download-btn-txt">Word格式</view>
								</view>
								<view class="download-btn red" @click="download"
									data-path="/route/proj/download/manual/pdf/" data-type="pdf">
									<view class="ic-pdf" style="width: 20px;height: 20px;"></view>
									<view class="download-btn-txt">PDF格式</view>
								</view>
							</view>
						</view>
						<view class="download-item">
							<view class="download-title">
								<view class="bg-blue">
									<view class="icon-tool size-48"></view>
								</view>
								<view class="download-title-txt">源代码</view>
							</view>
							<text class="download-item-desc">软件的鉴别材料-项目源代码</text>
							<view class="download-btn-box">
								<view class="download-btn blue" @click="download" data-path="/route/proj/download/code/"
									data-type="docx">
									<view class="ic-doc" style="width: 20px;height: 20px;"></view>
									<view class="download-btn-txt">Word格式</view>
								</view>
								<view class="download-btn red" @click="download"
									data-path="/route/proj/download/code/pdf/" data-type="pdf">
									<view class="ic-pdf" style="width: 20px;height: 20px;"></view>
									<view class="download-btn-txt">PDF格式</view>
								</view>
							</view>
						</view>
						<view class="download-notes mt-20">
							<icon type="info" size="14" color="#3270FF" style="margin-top: 6rpx;"></icon>
							<view class="notes-content-box ml-10">
								<text style="font-weight: bold;font-size: 28rpx;">使用提示</text>
								<text class="mt-10">注: 受系统条件限制,如需下载程序、购买服务或查看演示视频,建议通过电脑端进行操作.</text>
								<text class="mt-20">温馨提示: 若您想把下载的文件留存到本地，打开预览页面后，在界面右上角操作栏内，选择使用其他软件打开或者保存文件功能就能实现。
								</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<DownloadProgress :isShow="downloading" :progress="downloadProgress"></DownloadProgress>
		<!-- 通知消息 -->
		<AdPopup :couponsList="tempCoupons" @ad-close="doCloseAd" @ad-furl="doFurlCoupons" :visible="showAd"></AdPopup>

		<uni-popup ref="msg" type="message">
			<uni-popup-message :isTop="false" :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import AdPopup from '@/components/ad-popup.vue'
	import ContainerLoading from '@/components/container-loading.vue'
	import DownloadProgress from '@/components/download-progress.vue'
	import ProApi from '@/common/js/net/projectApi.js'
	import UserApi from '@/common/js/net/UserApi.js'
	import {
		previewUrl,
		copyrightUrl
	} from '@/common/js/net/http.js'

	import {
		status,
		moneyTxt
	} from '@/common/js/conver.js'
	import {
		get,
		set
	} from '@/common/js/cache/storage.js';
	import {
		pxToRpx
	} from '@/common/js/util.js'
	import {
		homeTypeList,
		expandList
	} from '@/common/js/data.js'
	export default {
		components: {
			ContainerLoading,
			DownloadProgress,
			AdPopup
		},
		data() {
			return {
				contentHeight: 100,
				totalHeight: 50,
				statusBarHeight: 24,
				defaultNotice: '用AI创造，用平台保护——欢迎来到您的著作权守护站!',
				noticeContent: this.defaultNotice,
				currentStatus: 'PROCESSING', //默认状态   PROCESSING进行中  COMPLETE完成
				listLoading: 'loading', //loading 状态
				listRefreshTrig: false, //是否正在刷新
				imgUrl: previewUrl,
				cUrl: copyrightUrl,
				sysPreviewUrl: '', //系统预览地址
				pageData: {
					page: 1,
					rows: 10
				},
				typeList: homeTypeList,
				currentType: '',
				expandList: expandList,
				currentExpand: '',
				tagList: [],
				currentTag: '',
				projectList: [], //项目列表
				hasMore: true, //是否存在更多数据
				isLoadMore: false, //是否正在加载更多
				loadMore: 'more', //加载更多的状态 more/loading/noMore
				tempItem: null, //点击下载的临时条目
				downloadProgress: 0, //下载文件进度
				downloading: false, //下载文件中
				msgType: 'success', //消息类型  success error warn info
				msgTxt: '', //消息内容
				showAd: false, //显示优惠卷广告
				tempCoupons: null, //优惠卷
				isNoShowToday: false, //今日不再显示
			}
		},
		onLoad() {
			const _self = this
			_self.doGetNotice() //获取通知信息
			_self.doGetTagList() //获取Tag
			const params = _self.buildParams(1, true)
			_self.doGetSelfList(params, true)
			const noShowToday = get('noShowToday')
			const currentDate = new Date().toLocaleDateString();
			if (noShowToday && noShowToday === currentDate) {
				this.isNoShowToday = true
			} else {
				_self.doGetClaimsCoupons()
			}
			//计算状态栏等高度
			this.countBarHeight()
			//获取UserId
			this.getMineInfo()
		},
		onReady() {
			this.calculateRemainingHeight()
		},
		onPullDownRefresh() {
			this.doRefreshList()
			uni.stopPullDownRefresh()
		},
		methods: {
			status,
			moneyTxt,
			//计算状态栏等高度
			countBarHeight() {
				//#ifdef MP-WEIXIN || H5
				const windowInfo = uni.getWindowInfo()
				const deviceInfo = uni.getDeviceInfo()
				this.statusBarHeight = windowInfo.statusBarHeight
				this.totalHeight = deviceInfo.osName.toLowerCase() == 'ios' ? 48 : 50 // 导航栏总高度
				//#endif
				//#ifdef MP-ALIPAY ||MP-BAIDU||MP-TOUTIAO || MP-KUAISHOU || MP-XHS
				const deviceInfo = uni.getSystemInfoSync()
				console.log('设备信息', deviceInfo);
				this.statusBarHeight = deviceInfo.statusBarHeight
				this.totalHeight = deviceInfo.osName.toLowerCase() == 'ios' ? 48 : 50 // 导航栏总高度
				console.log('系统平台', deviceInfo.osName);
				//#endif
			},
			//获取我的个人信息
			getMineInfo() {
				UserApi.doGetMineAccount()
					.then(res => {
						set('userId', res.userId)
					})
					.catch(err => {
						console.log(err)
					})
			},
			//获取可以申领的优惠卷
			doGetClaimsCoupons() {
				const _self = this
				UserApi.doGetClaimsCouponsList()
					.then(res => {
						if (res && res.length > 0) {
							this.tempCoupons = res
							this.showAd = true
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 获取通知信息
			doGetNotice() {
				const _self = this
				console.log(_self.defaultNotice);
				ProApi.doGetNotice()
					.then(res => {
						console.log(res)
						_self.noticeContent = res.data && res.data != '' ? res.data : _self.defaultNotice
					})
					.catch(err => {
						console.log(err);
					})
			},
			//去创建项目
			createCopy() {
				uni.navigateTo({
					url: '/pages/copyright/createBuy/createBuy'
				})
			},
			//去充值
			goPayment() {
				uni.navigateTo({
					url: '/pages/pay/payment/payment'
				})
			},
			//切换状态
			doChangeStatus(e) {
				this.currentStatus = e
				const params = this.buildParams(1, true)
				this.doGetSelfList(params, true)
			},
			//获取标签
			doGetTagList() {
				const _self = this
				ProApi.doGetTagList()
					.then(res => {
						_self.tagList = res
					})
					.catch(err => {
						console.log(err)
					})
			},
			//切换type
			doChangeType(type) {
				const _self = this
				_self.currentType = type == _self.currentType ? '' : type
				const params = _self.buildParams(1, true)
				_self.doGetSelfList(params, true)
			},
			//切换expand
			doChangeExpand(expand) {
				const _self = this
				_self.currentExpand = expand == _self.currentExpand ? '' : expand
				const params = _self.buildParams(1, true)
				_self.doGetSelfList(params, true)
			},
			//切换tag
			doChangeTag(tag) {
				const _self = this
				_self.currentTag = tag == _self.currentTag ? '' : tag
				const params = _self.buildParams(1, true)
				_self.doGetSelfList(params, true)
			},
			//构建请求参数
			buildParams(page, isRefresh) {
				const _self = this
				_self.projectList = isRefresh ? [] : _self.projectList
				_self.pageData.page = page
				const [part1, part2] = _self.currentTag.split(':')
				const params = {
					page: _self.pageData.page,
					rows: _self.pageData.rows,
					tagNot: part2 ? part2 : '',
					tagDataId: part1,
					chargeType: _self.currentType, //
					chargeAdditionals: _self.currentExpand, //额外附加
					status: _self.currentStatus, //当前项目状态
				}
				return params
			},
			//获取项目列表
			doGetSelfList(params, isRefresh) {
				const _self = this
				_self.listLoading = isRefresh ? 'loading' : ''
				ProApi.doGetSelfProjectList(params)
					.then(res => {
						console.log(res)
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						const list = _self.addPrefixToPreviewImgs(res.rows)
						_self.listLoading = isRefresh ? status : ''
						_self.projectList = _self.projectList.concat(list)
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = _self.projectList.length < res.total
						if (_self.hasMore) {
							_self.loadMore = 'more'
						} else {
							_self.loadMore = 'noMore'
						}
					})
					.catch(err => {
						_self.listLoading = 'error'
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = true
						_self.loadMore = 'more'
					})
			},
			//刷新列表
			doRefreshList() {
				console.log('页面刷新...')
				const _self = this
				_self.listRefreshTrig = true
				_self.listLoading = 'loading'
				const params = _self.buildParams(1, true)
				_self.doGetSelfList(params, true)
			},
			//加载更多
			doLoadMore() {
				//判断是否正在加载中
				const _self = this
				if (_self.isLoadMore || !_self.hasMore) {
					return
				}
				_self.isLoadMore = true
				_self.loadMore = 'loading'
				_self.pageData.page = ++_self.pageData.page
				const params = _self.buildParams(_self.pageData.page, false)
				_self.doGetSelfList(params, false)
			},
			//计算剩余高度
			calculateRemainingHeight() {
				// 获取窗口高度
				const systemInfo = uni.getSystemInfoSync();
				const windowHeight = systemInfo.windowHeight;
				const screenHeight = systemInfo.screenHeight;
				const screenWidth = systemInfo.screenWidth
				console.log('系统属性', systemInfo)
				// bg-title  container-title
				// 获取已占用元素的高度
				const query = uni.createSelectorQuery().in(this);
				query.select('#up-box').boundingClientRect(data => {
					if (data) {
						const occupiedHeight = data.height;
						// 计算剩余高度
						let tabbarHeight = screenHeight - windowHeight
						// #ifdef MP-TOUTIAO
						this.contentHeight = windowHeight - occupiedHeight - 20
						// #endif
						// #ifdef MP-BAIDU || H5
						this.contentHeight = windowHeight - occupiedHeight - tabbarHeight - 10;
						// #endif
						console.log('计算前内容高度', this.contentHeight)
						let coverHeight = pxToRpx(this.contentHeight, screenWidth)
						this.contentHeight = coverHeight
						console.log('头布局高度', occupiedHeight)
						console.log('屏幕高度', screenHeight)
						console.log('窗口高度', windowHeight)
						console.log('计算内容高度', this.contentHeight)
					} else {
						console.log('未获取到高度');
					}
				}).exec();
			},
			//为列表图片添加前缀
			addPrefixToPreviewImgs(data) {
				const prefix = this.imgUrl;
				return data.map(item => {
					const aiStatuses = Object.values(item.aiSetting)
					const genderStatus = item.generate.generateStatus
					// 状态判断函数
					const isGenerating = () => genderStatus === 'GENERATING' || aiStatuses.includes('GENERATING');
					// 使用 indexOf 替代 includes
					// const isGenerating = () => genderStatus === STATUS.GENERATING || aiStatuses.indexOf('GENERATING') !== -1;
					const isSuccess = () => aiStatuses.every(s => s === 'SUCCESS') && genderStatus === 'SUCCESS';
					const shouldRegenerate = () => genderStatus === 'FAILED';
					// 主逻辑
					if (isGenerating()) {
						item.btnStatus = 'GENERATING'
					} else if (isSuccess()) {
						item.btnStatus = 'DOWNLOAD'
					} else if (!aiStatuses.every(s => s === 'SUCCESS')) {
						item.btnStatus = 'AIGEN'
					} else if (shouldRegenerate()) {
						item.btnStatus = 'RELOAD'
					} else {
						item.btnStatus = 'GEN'
					}
					if (item.codeTypePage && item.codeTypePage.previewImgs) {
						const imgIds = item.codeTypePage.previewImgs.split(',');
						item.codeTypePage.previewImgs = imgIds.map(id => prefix + id);
					}
					return item;
				});
			},
			//显示下载弹窗
			doShowDownload(item) {
				console.log('点击了下载')
				this.$refs.downloadPopup.open()
				this.sysPreviewUrl = `${this.cUrl}/${item.previewUrl}`
				this.tempItem = item
			},
			//复制链接到剪贴板
			copyLink() {
				uni.setClipboardData({
					data: this.sysPreviewUrl,
					success: function() {
						console.log('success');
					}
				});
			},
			//获取下载文件的响应头
			getFileHeader(url, header) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: url,
						method: 'HEAD',
						header: header,
						success: resolve,
						fail: reject
					})
				})
			},
			//点击下载
			async download(e) {
				const _self = this
				const postfix = e.currentTarget.dataset.type
				_self.downloadProgress = 0 //重置下载进度
				_self.downloading = true //显示进度
				this.$refs.downloadPopup.close() //关闭资料下载弹窗
				const path = e.currentTarget.dataset.path
				const url = this.cUrl + path + _self.tempItem.projId
				const fileName = _self.tempItem.projId + '.' + postfix
				const token = get('token')
				const header = {}
				if (token) {
					header.Auth = `Bearer ${token}`;
				}
				const downloadRes = await _self.doDownload(url, header)
				if (downloadRes && downloadRes.statusCode == 200) {
					//判断是txt还是文件
					if (downloadRes.tempFilePath.endsWith('.txt')) {
						_self.msgTxt = '下载成功'
						_self.msgType = 'success'
						_self.$refs.msg.open()
						_self.showDownload = false
						_self.downloading = false
						_self.downloadProgress = 0
						uni.navigateTo({
							url: '/pages/common/readTxt/readTxt?filePath=' +
								downloadRes.tempFilePath
						})
					} else {
						uni.openDocument({
							filePath: downloadRes.tempFilePath,
							showMenu: true,
							success(res) {
								console.log(res)
								_self.showDownload = false
								_self.downloading = false
								_self.downloadProgress = 0
							},
							fail(err) {
								_self.showErr('很抱歉，文件下载出现问题。建议您稍作等待，之后再尝试下载。')
							}
						})
					}
				} else {
					_self.showErr('很抱歉，文件下载出现问题。建议您稍作等待，之后再尝试下载。')
				}
			},
			//下载文件
			doDownload(url, header) {
				const _self = this
				return new Promise((resolve, reject) => {
					const downloadTask = uni.downloadFile({
						url: url,
						header: header,
						success: resolve,
						fail: reject
					})
					downloadTask.onProgressUpdate(res => {
						_self.downloadProgress = res.progress
					})
				})
			},
			showErr(msg) {
				const _self = this
				_self.msgTxt = msg
				_self.msgType = 'error'
				_self.showDownload = false
				_self.downloading = false
				_self.downloadProgress = 0
				_self.$refs.msg.open()
			},
			//关闭广告
			doCloseAd(e) {
				const isShow = e
				console.log('关闭广告', e);
				if (isShow) {
					const currentDate = new Date().toLocaleDateString();
					set('noShowToday', currentDate)
					this.isNoShowToday = true
				}
				this.showAd = false
			},
			//收下优惠卷
			doFurlCoupons(e) {
				console.log('收下优惠卷')
				const _self = this
				const isShow = e
				console.log(_self.tempCoupons)
				if (isShow) {
					const currentDate = new Date().toLocaleDateString();
					set('noShowToday', currentDate)
					_self.isNoShowToday = true
				}
				uni.showLoading({
					title: '领取中...',
				})
				const requests = _self.tempCoupons.map(item => {
					const coupons = {
						couponId: item.couponId
					}
					return UserApi.doSaveCoupons(coupons)
				})
				Promise.all(requests)
					.then(res => {
						setTimeout(() => {
							uni.hideLoading()
							_self.msgType = 'success'
							_self.msgTxt = '本次领取操作已成功，您可以在 “我的” 页面查看相关信息。'
							_self.$refs.msg.open()
						}, 1100)
					})
					.catch(err => {
						setTimeout(() => {
							uni.hideLoading()
							_self.msgType = 'error'
							_self.msgTxt = err.msg ? err.msg : '本次领取操作未成功，请重新进入小程序后再次尝试。'
							_self.$refs.msg.open()
						}, 1100)
					})
			},
			//去生成项目
			doCreatePro(e) {
				uni.showLoading({
					title: '生成中...',
				})
				const _self = this
				const item = e.currentTarget.dataset.value
				ProApi.doBuildProject(item.projId)
					.then(res => {
						// 刷新列表
						uni.hideLoading()
						console.log(res)
						_self.msgTxt = '正在生成中,请耐心等待'
						_self.msgType = 'success'
						_self.$refs.msg.open()
						_self.doRefreshList()
					})
					.catch(err => {
						console.log(err)
						uni.hideLoading()
						_self.msgType = 'error'
						_self.msgTxt = err.msg ? err.msg : '生成失败,请稍后重试'
						_self.$refs.msg.open()
					})
			},
			//重新生成
			doReCreate(e) {
				console.log(e)
				const item = e.currentTarget.dataset.value
				const _self = this
				uni.showLoading({
					title: '提交中...',
				})
				ProApi.doReCreate(item.projId)
					.then(res => {
						uni.hideLoading()
						_self.msgType = 'success'
						_self.msgTxt = '提交成功,正在生成中,请耐心等待'
						_self.$refs.msg.open()
						_self.doRefreshList()
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgTxt = err.msg ? err.msg : '提交失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
		}
	}
</script>

<style lang="scss">
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.navbar-title {
		font-size: 40rpx;
		text-align: left;
		font-weight: bold;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.title-container {
		display: flex;
		flex-direction: column;
		position: absolute;

		align-items: center;

	}

	.title-content {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		padding: 0rpx 30rpx 30rpx 30rpx;
		width: 100vw;
		box-sizing: border-box;
	}

	.bg-title {
		background-image: url('data:image/png;base64,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
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		width: 100vw;
		height: 520rpx;
	}

	.content-up {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		background-color: $white-color;
		margin-top: 30rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(206, 206, 206, 0.4);
	}

	.content-box {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-color: $white-color;
		// box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(206, 206, 206, 0.4);
	}

	.container-title {
		display: flex;
		flex-direction: column;
		height: 80px;
	}

	.title-func {
		display: flex;
		flex-direction: row;
	}

	.create-btn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 2.5;
		background-color: $btn-primary-color;
		color: #550101;
		border-radius: 10rpx;
		text-align: center;
	}

	.create-btn:active {
		background-color: $btn-primary-color-active;
	}

	.buy-btn {
		margin-left: 20rpx;
		line-height: 78px;
		width: 80px;
		height: 78px;
		border-radius: 4px;
		background-color: $btn-green-color;
		color: $white-color;
		font-size: 18px;
		text-align: center;
		font-family: PingFangSC-regular;
	}

	.buy-btn:active {
		background-color: $btn-green-color-active;
	}

	.notice-box {
		background-color: $btn-primary-color;
		margin-top: 20rpx;
		border-radius: 3px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 5px 10px;
	}

	.notice-box .icon {
		width: 20px;
		height: 20px;
	}

	.notice-box .txt {
		height: 20px;
		line-height: 17px;
		color: $text-brown-color;
		font-size: 12px;
		text-align: left;
		line-height: 20px;
		font-family: PingFangSC-light;
		margin-left: 15px;
	}

	.container-box {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.list-title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.list-title-txt {
		line-height: 23px;
		color: $text-color;
		font-size: 16px;
		font-family: TaipeiHei-bold;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.list-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.list-title-line {
		width: 10rpx;
		background-color: $primary-color;
		border-radius: 5rpx;
		height: 30rpx;
	}

	.list-title-btns {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 28rpx;
		text-align: center;

	}

	.btn-select {
		line-height: 20px;
		background-color: $bg-primary-shallow-color;
		color: $primary-color;
		font-size: 14px;
		text-align: center;
		padding: 5px;
		border: 1px solid $bg-primary-shallow-color;
	}

	.btn-normal {
		line-height: 20px;
		background-color: $white-color;
		color: $text-color;
		font-size: 14px;
		text-align: center;
		border: 1px solid $divider-color;
		padding: 5px;
	}

	.list-tabs {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100vw;
	}

	.tab-select {
		white-space: nowrap;
		line-height: 17px;
		border-radius: 2px;
		background-color: $primary-color-active;
		color: $text-brown-color;
		font-size: 12px;
		text-align: center;
		flex-wrap: nowrap;
		padding: 2px 5px;
	}

	.tab-normal {
		line-height: 17px;
		border-radius: 2px;
		background-color: $bg-gray-color;
		color: $text-gray-hint-color;
		font-size: 12px;
		text-align: center;
		flex-wrap: nowrap;
		white-space: nowrap;
		padding: 2px 5px;
	}

	.item-margin {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.item-margin:nth-of-type(n+2) {
		margin-left: 20rpx;
	}

	/* list */
	.list-content {
		display: flex;
		flex-direction: column;
	}

	.list-item {
		background-color: $gray-bg-color;
		border-radius: 2px;
		padding: 5px;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		max-width: 100%;
		align-items: center;
	}

	.list-item:nth-of-type(n+2) {
		margin-top: 20rpx;
	}

	.item-img {
		width: 200rpx;
		height: 132rpx;
		flex-shrink: 0;
		position: relative;
	}

	.item-img .cover {
		width: 200rpx;
		height: 132rpx;
		border-radius: 2px;
	}

	.item-img-status {
		background-color: $bg-green-status-light-color;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200rpx;
		font-size: 24rpx;
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
	}

	.item-content {
		display: flex;
		flex: 1;
		flex-direction: row;
		min-width: 0;
		height: 132rpx;
	}

	.list-item-content {
		flex: 0.8;
		max-width: 80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0rpx 15rpx;
	}

	.list-item-btns {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 132rpx;
		flex: 0.2;
		flex-shrink: 0;
	}

	.item-content-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}


	.project-name {
		color: $text-color;
		font-size: 28rpx;
		text-align: left;
		font-weight: bold;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.project-status {
		font-size: 24rpx;
		line-height: 40rpx;
		color: $text-color;
		font-weight: bold;
		text-align: center;
		white-space: nowrap;
	}


	.project-aff {
		color: $text-gray-desc-color;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.project-aff .icon {
		width: 14px;
		height: 14px;
	}

	.project-aff .txt {
		text-align: left;
		margin-left: 3px;
	}

	.project-btns {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;

	}

	.project-create-time {
		font-size: 24rpx;
		color: $text-gray-desc-color;
	}

	.project-btn {
		font-size: 20rpx;
		background-color: $primary-color;
		color: $white-color;
		padding: 8rpx 30rpx;
		border-radius: 5rpx;
		text-align: center;
		white-space: nowrap;
	}

	.project-btn:active {
		background-color: $primary-color-active;
	}

	.project-re-btn {
		font-size: 12px;
		background-color: rgba(255, 0, 0, 0.486);
		color: white;
		padding: 2px 5px;
		border-radius: 5px;
	}

	.project-re-btn:active {
		background-color: rgba(255, 0, 0, 0.301);
	}

	.project-btn-no {
		font-size: 28rpx;
		background-color: rgba(239, 239, 239, 1);
		color: white;
		padding: 8rpx 30rpx 8rpx 30rpx;
		border-radius: 10rpx;
	}

	.marquee-container {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		margin-left: 5px;
	}

	.marquee-text {
		display: inline-block;
		animation: marquee 25s linear infinite;
		color: $text-brown-color;
		font-size: 24rpx;
		margin-left: 15px;
		transform: translateX(100%);
		white-space: nowrap;
	}

	@keyframes marquee {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.custom-dialog {
		background-color: #F1F1F1;
	}

	.download-box {
		display: flex;
		flex-direction: column;
	}

	.download-item {
		display: flex;
		flex-direction: column;
		background-color: $white-color;
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 0rpx 5rpx $bg-gray-input-color;
		padding: 30rpx;
	}

	.download-item:nth-last-of-type(n+2) {
		margin-top: 20rpx;
	}


	.download-title {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.download-title-txt {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 15rpx;
	}

	.download-item-desc {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.download-btn-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0rpx 0rpx 0rpx;
	}

	.download-btn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 15rpx;
		border-radius: 5px;
		flex: 1;
	}

	.download-btn:nth-child(2) {
		margin-left: 40rpx;
	}

	.download-btn.blue {
		background-color: $bg-blue-shallow-color;
		color: $text-blue-color;
	}

	.download-btn.gray {
		background-color: $bg-gray-input-light-color;
		color: $text-brown-color;
	}

	.download-btn.red {
		background-color: $bg-red-shallow-color;
		color: $text-red-color;
	}

	.download-btn-txt {
		font-size: 24rpx;
		text-align: center;
		margin-left: 10rpx;
	}

	.download-btn:active {
		background-color: #d1d1d0;
	}




	.bg-blue {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: $bg-blue-shallow-color;
		width: 72rpx;
		height: 72rpx;
		border-radius: 15rpx;
	}

	.bg-yellow {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: $bg-primary-shallow-color;
		width: 72rpx;
		height: 72rpx;
		border-radius: 15rpx;
	}

	.bg-green {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: $bg-green-light-color;
		width: 72rpx;
		height: 72rpx;
		border-radius: 15rpx;
	}



	.bg-gray {
		background-color: $bg-gray-input-color;
	}

	.download-desc {
		display: flex;
		flex-direction: column;
		background-color: $white-color;
		padding: 30rpx;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	.link-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.link-box {
		background-color: $bg-gray-input-light-color;
		border-radius: 15rpx;
		padding: 10rpx;
		margin-top: 10rpx;
	}

	.link {
		margin-top: 5px;
		word-wrap: break-word;
		word-break: break-all;
		width: 85vw;
		font-size: 14px;
		color: $text-blue-color;
	}

	.custom-tips {
		margin-top: 80px;
	}

	.hint {
		font-size: 14px;
		text-align: center;
		color: $primary-color;
		font-weight: bold;
	}

	.download-notes {
		display: flex;
		flex-direction: row;
		border-left: 8rpx solid $blue-color;
		border-radius: 5rpx;
		background-color: $bg-blue-shallow-color;
		font-size: 24rpx;
		/* #ifdef MP-BAIDU */
		margin-bottom: 10rpx;
		/* #endif */
		/* #ifndef MP-BAIDU */
		margin-bottom: 80rpx;
		/* #endif */
		padding: 20rpx;
		box-shadow: 0rpx 0rpx 0rpx 5rpx $bg-gray-input-color;
	}

	.notes-title-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: $text-blue-color;
	}

	.notes-content-box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		color: $text-blue-color;
	}


	.weui-half-screen-dialog__ft {
		height: 0;
		padding: 0;
	}

	#popup-msg {
		top: 30px !important;
	}
</style>