用uniapp跨平台开发一款商用的ai绘图ai作画软件的全过程

随着科技的发展，人工智能将会是以后的主流方向，ai绘图、chatgpt高科技先后出台，都获得了火爆的发展，因此想借着势头开发一款主打ai绘图的app+小程序

一、前期准备

1、选定技术框架

因为后面需要多平台发布，而尽可能减少开发成本，因此选定了uniapp框架作为开发框架，前期目标是 android、ios以及 微信小程序三个平台，android平台名称：易绘，IOS端名称：易绘ai作画，微信小程序端：栾青易绘ai绘画。

2、ai绘图的api选择

有两个方向，一个是百度云，一个是腾讯云，各有优劣，价格方面腾讯云更优惠，但百度推出的时间更早。因为前期接入的是百度云的sdk，所以还是选择了百度云sdk。

3、功能整合

主打ai绘图（用文字生成图片），次功能头像制作、老照片修复处理，真人动漫化头像，二次元图片，壁纸美图。开放了一部分功能免费使用，以留住用户。

二、ai绘图

<template>
	<view>
		<uni-nav-bar :statusBar="true" :border="true" :fixed="true" :leftWidth="500">
			<template v-slot:left class="uni_flex_row_align_left">
				<view class="uni_flex_row_align_left uni_14px uni_font_medium ml14" v-if="isLogined" @click="gotoTaskList">
					<image src="@/static/icon/icon_task.png" style="width: 40rpx;height: 40rpx;margin-left: 10rpx;"></image>
					<text class="uni_15px ml6 uni_color_666">任务列表</text>
					<text class="ml4 mr2">(</text>
					<text class="uni_15px" style="color: #f43533;">{{taskNum}}</text>
					<text class="ml2">)</text>
				</view>
				<view v-else class="uni_14px uni_font_regular ml14 uni_color_666">
					用文字绘出梦想，用梦想成就未来
				</view>
			</template>
		</uni-nav-bar>
	
		<!-- 主绘制面板视图 -->
		<view class="page_root">
			
			<view style="width: 690rpx;height: 15rpx;"></view>
			<!-- 输入框内容 START -->
			<view class="input_box">
				<!-- 文本输入框 -->
				<textarea class="textarea_style uni_font_light" :maxlength="maxNum" placeholder="输入你的奇思妙想，AI智能为你作画" v-model="inputContent"></textarea>
				
				<!-- 信息操作栏 START -->
				<view class="input_action_bar">
					<view class="uni_flex_row_align_left" @click="startVoice">
						<uni-icons type="mic-filled" color="#9686FB" size="19"></uni-icons>
						<text class="uni_14px ml4 uni_font_regular input_func_text" style="color: #9686FB;">语音输入</text>
					</view>
					
					<view class="uni_flex_row_align_right">
						<view class="uni_flex_row_align_left" v-if="inputContent">
							<text class="num g1">{{inputContent.length || 0}}</text>
							<text class="num g2 ml4 mr4">/</text>
							<text class="num g2">{{maxNum}}</text>
						</view>
						
						<view class="uni_flex_row_align_right" v-else @click="gotoSchool">
							<uni-icons type="help" size="21" color="#9686FB"></uni-icons>
							<text class="uni_14px ml4 uni_font_regular input_func_text" style="color: #9686FB;">教程帮助</text>
						</view>
						
						<view class="sp_line" v-if="inputContent"></view>
						
						<!-- 清除 -->
						<uni-icons type="clear" v-if="inputContent" color="#9686FB" size="19" @click="onClear" click="ml10"></uni-icons>

						<!-- 复制 -->
						<uni-icons type="paperclip" v-if="inputContent" color="#9686FB" size="19" class="ml20" @click="onCopy"></uni-icons>
						
					</view>
				</view>
				<!-- 信息操作栏 START -->
			</view>
			<!-- 输入框内容 END -->
			
			<!-- 示例 START -->
			<view class="uni_flex_row_between mt6" v-if="exampleObj.id">
				<!-- 示例内容 -->
				<text class="tip_text" @click="onClickExample">示例：{{exampleObj.content}}</text>
				<!-- 刷新示例数据 -->
				<uni-icons :animation="animationData" type="loop" color="#9686FB" class="refresh_icon" size="18" @click="queryExample"></uni-icons>
			</view>
			<!-- 示例 END -->
			
			<!-- 关键字模块 START -->
			<view class="mt18 uni_flex_row_between_center">
				<view class="uni_flex_row_align_left">
					<image src="../../static/icon/icon_keyword.png" style="width: 36rpx; height: 36rpx;"></image>
					<text class="ml4 uni_16px uni_color_666">可以试试</text>
				</view>
				
				<view class="uni_flex_row_align_right">
					<uni-icons type="loop" color="#9686FB" size="17" @click="queryStyles"></uni-icons>
					<text class="ml4 uni_13px change_next" @click="queryStyles">换一批</text>
				</view>
			</view>
			
			<view class="uni_flex_warp uni_flex_row_between mt8">
				<view v-for="(keyword,id) in keywords" v-bind:key="id" class="tag_item" @click="onClickKeyword(keyword)">{{keyword.name}}</view>
			</view>
			
			<view class="uni_flex_row_align_left mt20">
				<text class="uni_16px uni_color_666">高级设置</text>
				<switch style="transform: scale(0.6);" color="#9686FB" :checked="isShowHeightSetting" @change="setSettingOfShowHeight"></switch>
			</view>
			
			<!-- 画作风格 START -->
			<view class="uni_flex_row_between mt10" v-if="isShowHeightSetting">
				<view class="uni_flex_row_align_left">
					<image src="../../static/icon/icon_style.png" style="width: 34rpx;height: 34rpx;"></image>
					<text class="ml4 uni_15px uni_color_666">绘图风格</text>
					<text class="ml4 uni_11px uni_color_bbb">(可选，默认不限风格)</text>
				</view>
				<view class="uni_flex_row_align_center select_button" @click="showPickerDataObj(true, 'style')">
					<text class="uni_14px uni_font_regular uni_color_app1">{{imageStyle.tag || '请选择风格'}}</text>
					<uni-icons type="right" color="#9686FB" class="ml6"></uni-icons>
				</view>
			</view>
			<!-- 画作风格 END -->
			
			<!-- 生成张数 START -->
			<view class="uni_flex_row_between mt12" v-if="isShowHeightSetting">
				<view class="uni_flex_row_align_left">
					<image src="../../static/icon/icon_number.png" style="width: 34rpx;height: 34rpx;"></image>
					<text class="ml4 uni_15px uni_color_666">图片生成张数</text>
					<text class="ml4 uni_11px uni_color_bbb">(可选，默认1张)</text>
				</view>
				<view class="uni_flex_row_align_center select_button" @click="showPickerDataObj(true, 'number')">
					<text class="uni_14px uni_font_regular uni_color_app1">{{createAiNumber + ' 张' || '请选择张数'}}</text>
					<uni-icons type="right" color="#9686FB" class="ml6"></uni-icons>
				</view>
			</view>
			<!-- 生成张数 END -->
			
			<!-- 画作分辨率 START -->
			<view class="uni_flex_row_between mt12" v-if="isShowHeightSetting">
				<view class="uni_flex_row_align_left">
					<image src="../../static/icon/icon_ratio.png" style="width: 34rpx;height: 34rpx;"></image>
					<text class="ml4 uni_15px uni_color_666">分辨率</text>
					<text class="ml4 uni_11px uni_color_bbb">(可选，默认1024*1536)</text>
				</view>
				<view class="uni_flex_row_align_center select_button" @click="showPickerDataObj(true, 'ratio')">
					<text class="uni_14px uni_font_regular uni_color_app1">{{imageRatio.tag || '请选择分辨率'}}</text>
					<uni-icons type="right" color="#9686FB" class="ml6"></uni-icons>
				</view>
			</view>
			<!-- 画作分辨率 END -->
			
			<!-- 开始绘画按钮 -->
			
			<view class="uni_flex_row_align_center mt30">
				<view class="start_button able" @click="onCheckStatusAndShowDialog">
					<text class="uni_font_regular" style="letter-spacing: 2rpx;">{{isLogined ? 'Ai 绘画创作':'登录后使用Ai绘画功能'}}</text>
				</view>
				
				<uni-badge :text="freeNum" absolute="rightTop" size="normal" :offset="[5,5]">
					<view v-if="freeNum>0" class="start_test_btn" @click="showTestDialog(true)">
						免费体验
					</view>
					<view v-else class="start_test_btn_unable">
						暂不可用
					</view>
				</uni-badge>
			</view>
			
			<!-- 客服信息 -->
			<view class="customer uni_12px mt10 uni_color_999">
				<text @click="onCopy('729913920')">QQ交流学习群：729913920 (点击复制)</text>
			</view>
				
		</view>
		
		<!-- 数据选择弹框 -->
		<uni-popup type="bottom" ref="pickerDataObj">
			<view class="popup_dialog_style">
				<view class="popup_dialog_title">
					<text class="uni_color_999 uni_font_regular" @click="showPickerDataObj(false)">取消</text>
					<text class="uni_color_000 uni_font_medium" v-if="dialogType === 'number'">请选择画作生成张数</text>
					<text class="uni_color_000 uni_font_medium" v-else-if="dialogType === 'style'">请选择画作风格</text>
					<text class="uni_color_000 uni_font_medium" v-else-if="dialogType === 'ratio'">请选择画作分辨率</text>
					<text class="uni_color_222 uni_font_regular" @click="onPickerData('',true)">确定</text>
				</view>
				<view class="uni_flex_warp uni_flex_row_between dialog_data_view" v-if="dialogType === 'number'">
					<text
						v-if="dialogType === 'number'"
						v-for="(dateItem, index) in dialogData" v-bind:key="index" 
						class="style_item_big" 
						:class="tempImageNumber === dateItem ? 'style_checked':''"
						@click="onPickerData(dateItem)">
						{{dateItem}}张
					</text>
				</view>
				
				<view class="uni_flex_warp uni_flex_row_align_left" v-if="dialogType === 'style'">
					<text
						v-for="(ratio,index) in styles" v-bind:key="index" 
						class="style_item_big" 
						:class="tempImageStyle.id === ratio.id ? 'style_checked':''"
						@click="onPickerData(ratio)">
						{{ratio.tag}}
					</text>
				</view>
				
				<view class="uni_flex_warp uni_flex_row_between" v-if="dialogType === 'ratio'">
					<text
						v-for="(ratio,index) in ratios" v-bind:key="index" 
						class="style_item_big" 
						:class="tempImageRatio.id === ratio.id ? 'style_checked':''"
						@click="onPickerData(ratio)">
						{{ratio.tag}}
					</text>
				</view>
			</view>
		</uni-popup>	
		
		<!-- 开始AI绘图任务后的状态展示弹窗 -->
		<uni-popup ref="taskStatusDialog" type="center">
			<view class="task_status_dialog">
				<image src="../../static/img_ai_status_dialog.gif" style="width: 400rpx;height: 160rpx;"></image>
				<view class="uni_14px uni_font_regular">{{aiRequestStatusText}}</view>
				<view class="uni_flex_row_align_center uni_flex_warp mt10 ml10 mr10">
					<view v-for="(wait,wid) in waitTime" v-bind:key="wid" class="white_point"></view>
				</view>
				<view class="mt4 uni_16px uni_font_medium">{{waitTime.length}}s</view>
			</view>
		</uni-popup>
			
		<uni-popup ref="dialogTest" type="bottom">
			<view class="test_dialog uni_flex_col_align_center">
				<view class="uni_font_medium uni_17px uni_color_333 mt10 mb15">免费体验说明</view>
				
				<text class="uni_15px uni_color_999 ml5 mr5" style="letter-spacing: 2rpx;">
					全系统今日总共还
					<text class="uni_font_regular uni_color_666">剩余{{freeNum}}次免费体验机会，</text>
					系统每天晚上20点下放随机数量的免费体验次数，当天用完即止，每个账号可先到先得免费使用一次ai绘图功能（注:为避免占用，每个账号每天有且只有一次免费体验机会）
				</text>
				
				<text class="dialog_btn bg1 mt30" @click="onConfirmTest">立即免费创作</text>
				<text class="dialog_btn bg3 mt20 mb15" @click="showTestDialog(false)">取消</text>
			</view>
		</uni-popup>	
		
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message type="error" :message="messageText" :duration="3200"></uni-popup-message>
		</uni-popup>
		
		<uni-popup ref="confirmDialog" type="center">
			<view class="uni_flex_col_align_center">
				<view class="confirm_dialog_bg mb10">
					<view class="uni_18px uni_color_000 uni_font_medium mt10 mb15">温馨提示</view>
					
					<view class="uni_16px uni_color_666 ml10 mr10" style="letter-spacing: 2rpx;">
						<text>您正在使用易绘的Ai绘画功能，此功能按次收费，本次操作将从您的易绘账号上</text>
						<text class="uni_16px uni_font_regular ml2 uni_color_red">扣除 {{price * createAiNumber}} 钻石</text>
						<text class="ml2">({{createAiNumber}}张图) 是否已知悉并确认？</text>
					</view>
					
					<!-- <view class="uni_16px uni_color_666" v-if="createAiNumber <= 1">您正在使用Ai绘画功能，AI绘图功能单次需扣除 {{price}} 钻石，是否确定？</view> -->
					<!-- <view class="uni_16px uni_color_666" v-else>您正在使用Ai绘画功能，当前您设置了同时生成{{createAiNumber}}张图片，本次需扣除 {{price * createAiNumber}} 钻石，是否确定并开始绘画？</view> -->
					<text class="dialog_btn bg1 mt30 mb20" @click="onClickStartButton('pay')">确认并开始绘画</text>
					<text v-if="couponNum>0" class="dialog_btn bg2 mb25" @click="onClickStartButton('coupon')">
						使用免费券抵扣<text class="uni_12px uni_color_fff uni_font_light">({{couponNum}}张)</text>
					</text>
					<!-- <text class="dialog_btn bg3 mt20 mb15" @click="showTestDialog(false)">取消绘画</text> -->
				</view>
				<uni-icons type="close" size="45" color="#ffffff" @click="showAiConfirmDialog(false)"></uni-icons>
			</view>
						
		</uni-popup>
	</view>
</template>

<script>
	import api from '../../common/network/api/api.js';
	import dataBase from '../../common/database.js';
	import UI from '../../common/UI.js';
	import handle from '../../common/handle.js';
	
	export default {
		data() {
			return {
				maxNum: 100,
				inputContent: '', // 输入的描述内容
				errorTip: '', // 错误提示
				exampleObj: {}, // 示例
				tempImageRatio: {},
				tempImageStyle: {},
				tempImageNumber: 1,
				imageStyle: {},
				imageRatio: {},
				keywords: [], // 关键字列表
				// simpleKeyWords:[], // 简单列表的关键字
				styles: [], // 风格列表
				ratios: [] ,// 分辨率列表
				countAiTask: undefined, // ai绘图状态弹窗的计时器
				waitTime: [], // ai绘图状态弹窗的 等待时间计时
				waiting: '', // 预估等待时间
				ableReload: true, // 是否可以重新加载
				aiRequestStatusText: '', // AI请求
				
				messageTimeoutTask: undefined, // 临时消息的计时器对象
				
				aiStatus: 0, // AI绘图状态 0|队列中  1|已完成
				aiId: '', // 唯一ID
				taskNum: 0,
				createAiNumber: 1, // 申请AI绘画的图片数量
				
				isLogined: false,
				price: 0,
				
				dialogType: '',
				dialogData: [],
				
				animationData:{},
				freeNum: 0, // 系统免费ai体验次数
				
				isShowHeightSetting: false,
			}
		},
		onShow() {
			this.init();
			this.getSettingOfShowHeight();
			console.error("环境：",process.env.NODE_ENV)
		},
		onLoad() {
			uni.$on('networkResume',()=>{
				this.init();
			});
		},
		onUnload() {
			uni.$off('networkResume');
			this.showTaskStatusDialog(false);
		},
		methods: {
			getSettingOfShowHeight(){
				let temp = dataBase.queryStorage('heightSetting') || false;
				this.isShowHeightSetting = temp;
				return temp;
			},
			setSettingOfShowHeight(e){
				this.isShowHeightSetting = e.detail.value;
				dataBase.insertStorage('heightSetting',e.detail.value);
			},
			showAiConfirmDialog(show){
				if(show)
					this.$refs.confirmDialog.open();
				else
					this.$refs.confirmDialog.close();
			},
			// 确定体验
			onConfirmTest(){
				this.showTestDialog(false);
			},
			showTestDialog(show){
				if(show){
					this.onCheckStatusAndShowDialog('free');
					// this.$refs.dialogTest.open();
				}else{
					this.$refs.dialogTest.close();
				}
			},
			init(){
				// 允许重新加载
				this.ableReload = true;
				this.isLogined = dataBase.queryLoginStatus();
				
				this.queryStyles(); // 查询风格/分辨率等
				this.queryExample(); // 查询示例
				
				if(this.isLogined){
					this.queryTaskNum(); // 查询任务数据
					api.doPost({action:'queryUnreadMessageNumber'}).then(res=>{
						let unread = res.data.unread;
						unread > 0 ? uni.showTabBarRedDot({index: 4}) :  uni.hideTabBarRedDot({index: 4});
					});
				}				
			},
			gotoSchool(){
				console.error("前往学院");
				uni.navigateTo({
					url:'/pages_sub/center/pages/school/school'
				});
			},
			// 前往任务列表页面
			gotoTaskList(){
				uni.navigateTo({
					url:'/pages_sub/ai/pages/ai-task-list/ai-task-list'
				});
			},
			// 查询任务数量
			queryTaskNum(){
				api.doPost({action:'queryAITaskNumOrList'}).then(res=>{
					this.taskNum = res.data.num;
					this.couponNum = res.data.freeConpon;
				});
			},
			// 点击主类关键字
			onClickKeyword(item){
				if(this.inputContent && this.inputContent.length > 0){
					let lastWord = this.inputContent.substring(this.inputContent.length - 1, this.inputContent.length);
					if(lastWord === '，'){
						this.inputContent = this.inputContent.substring(0, this.inputContent.length - 1);
					}
				}
				
				this.inputContent += (this.inputContent ? '，':'') + item.name;
				// 限制字数
				if(this.inputContent.length > this.maxNum){
					this.inputContent = this.inputContent.substring(0, this.maxNum);
				}
			},
			// 选择风格
			onPickerData(style, confirm){
				if(confirm){
					this.showPickerDataObj(false);
					switch(this.dialogType){
						case 'number': this.createAiNumber = this.tempImageNumber; break;
						case 'style': this.imageStyle = this.tempImageStyle; break;
						case 'ratio': this.imageRatio = this.tempImageRatio; break;
					}
				}else{
					switch(this.dialogType){
						case 'number': this.tempImageNumber = style; break;
						case 'style': this.tempImageStyle = style; break;
						case 'ratio': this.tempImageRatio = style; break;
					}
				}
			},
			// 显示和隐藏任务进度弹窗
			showTaskStatusDialog(show){
				const $that = this;
				
				if(this.countAiTask){
					clearInterval(this.countAiTask);
				}
				
				if(show){
					this.waitTime = [];
					
					$that.countAiTask = setInterval(()=>{
						$that.waitTime.push("");
						// 是否可以重新加载
						if($that.ableReload){
							$that.queryAiResult();
						}
					}, 2000);
					$that.$refs.taskStatusDialog.open();
				}else{
					$that.inputContent = '';
					$that.$refs.taskStatusDialog.close();
				}
			},
			// 检查条件以及展示价格确认
			onCheckStatusAndShowDialog(mode){
				const $that = this;
				// 未登录
				if(!this.isLogined){
					uni.showModal({
						title: '提示',
						content: '需要登录才能使用此功能，是否前往登录？',
						confirmText: '前往登录',
						cancelText: '暂不登录',
						complete(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'/pages_sub/login/pages/login/login'
								});
								return "NO";
							}
						}
					});
					return "NO";
				}
				
				if(!this.inputContent){
					this.messageText = '请在下方输入画作的文字描述'
					this.$refs.message.open();
					return "NO";
				}
				
				if(this.price > 0 && mode !== 'free'){
					// 开始ai的确认弹窗
					this.showAiConfirmDialog(true);
					return "NO";
				}
				
				$that.onClickStartButton(mode);
				return "OK"
			},
			// 开始AI绘画
			onClickStartButton(mode){
				// 隐藏确认对话框
				this.showAiConfirmDialog(false);
				
				uni.showLoading({
					title:'正在提交云端',
				});
				
				let data = {
					action:'queryAiTask',
					text: this.inputContent, 
					ratio: this.imageRatio.tag, 
					style: this.imageStyle.tag, 
					num:this.createAiNumber,
					mode: mode // 免费  付费
				};
				
				api.doPost(data).then(res=>{
					uni.hideLoading();
					if(res.code === 208){
						handle.gotoRecharge(res.message);
						return;
					}
					
					this.showTaskStatusDialog(true);
					this.aiStatus = res.data.status;
					this.aiId = res.data.aid;
					
					this.aiRequestStatusText = '已成功连接云端';
					
					// 队列中
					if(this.aiStatus === 0){
						this.waiting = res.data.waiting;
						this.aiRequestStatusText = "正在刻画绘图...，预估时长【"+res.data.waiting+"】";
						
						this.queryTaskNum();
					}
					// 已完成
					else{
						this.aiRequestStatusText = '已完成AI绘图作画任务';
						this.showTaskStatusDialog(false);
						
						console.error("AI绘图完成",res.data);
						uni.navigateTo({
							url:'/pages_sub/ai/pages/preview-ai-img/preview-ai-img?data='+JSON.stringify(res.data)
						});
					}
				},err=>{
					uni.hideLoading();
				});
			},
			// 单纯查询ai绘图状态
			queryAiResult(){
				this.ableReload = false;
				console.error("AI任务查询开始");
				api.doPost({action:'queryAiResult',aid:this.aiId}).then(res=>{
					console.error("AI任务查询结果：",res);
					let code = res.code;
					
					if(code === 200){
						this.showTaskStatusDialog(false);
						
						uni.navigateTo({
							url:'/pages_sub/ai/pages/preview-ai-img/preview-ai-img?data='+JSON.stringify(res.data)
						});
					}else{
						this.ableReload = true;
					}
				}, err=>{
					console.error("AI任务查询失败：",err);
					this.ableReload = false;
					this.showTaskStatusDialog(false);
				}).catch(e=>{
					console.error("AI任务发生异常：",e);
				});
			},
			// 清除内容
			onClear(){
				this.inputContent = '';
			},
			// 复制内容
			onCopy(text){
				uni.setClipboardData({
					data: this.inputContent,
					success() {
						uni.showToast({
							title:'复制成功~',
							icon:'success'
						});
					}
				});
			},
			// 显示/关闭数据选择弹窗
			showPickerDataObj(show, type){
				if(show){
					this.dialogType = type;
					
					switch(this.dialogType){
						case 'number': this.dialogData = [1,2,3,4,5,6]; break;
						case 'style': this.dialogData = this.styles; break;
						case 'ratio': this.dialogData = this.ratios; break;
					}
					
					this.$refs.pickerDataObj.open();
				}else{
					this.$refs.pickerDataObj.close();
				}
			},
			// 点击示例文字时，会把示例内容带入到输入框里
			onClickExample(){
				const $that = this;
				
				// 判断示例是否存在内容
				if(this.exampleObj.content){
					// 如果输入框内已有内容，就弹出对话框提示用户是否确定要用示例替换
					if(this.inputContent){
						uni.showModal({
							title:'温馨提示',
							content:"是否确定要用示例的内容「替换」输入框描述内容？",
							confirmText: '确认替换',
							cancelText: '取消',
							complete(res) {
								if(res.confirm){
									$that.inputContent = $that.exampleObj.content;
								}
							}
						})
					}else{
						this.inputContent = this.exampleObj.content;
					}
				}
			},
			// 加载/刷新示例
			queryExample(){
				let data = {
					action:'queryExample',
				}
				
				// 判断是否有id
				if(this.exampleObj && this.exampleObj.id){
					data.id = this.exampleObj.id;
				}
				
				api.doPost(data).then(res=>{
					this.exampleObj = res.data;
				});
			},
			// 查询风格列表
			queryStyles(){
				api.doPost({action:'queryStyles'}).then(res=>{
					this.styles = res.data.styles || [];
					this.ratios = res.data.ratios || [];
					this.keywords = res.data.keywords || [];
					this.price = res.data.price || 0;
					this.freeNum = res.data.freeNum;
					
					if(this.styles && this.styles.length > 0){
						this.imageStyle = this.styles[0];
						this.tempImageStyle = this.styles[0];
					}
					
					if(this.ratios && this.ratios.length > 0){
						this.imageRatio = this.ratios[0];
						this.tempImageRatio = this.ratios[0];
					}
				});
			},
			startVoice() {
				if(!this.isLogined){
					UI.gotoLoginWithComfirmDialog();
					return;
				}
				
				// #ifdef APP-PLUS
				// 开始语音识别
				const $that = this;
				plus.speech.startRecognize({
					engine: 'baidu'
				}, (e => {
					if (e) {
						$that.inputContent += e;
						
						// 限制字数
						if($that.inputContent.length > $that.maxNum){
							$that.inputContent = $that.inputContent.substring(0, $that.maxNum);
						}
					}
				}), (e => {
					if (e.code === 1310722) {
						uni.showToast({
							title: '抱歉，没有听清，请您提高音量再试一遍吧',
							icon: 'none'
						})
					}
				}))
				// #endif
			}
		}
	}
</script>

<style>
@import url('index.css');
</style>

三、成品展示图

下载链接: Android apk
苹果链接: AppStore链接

三、登录页

<template>
	<view class="page pageStyle">
		<view class="uni_flex_col_align_center flexX margin-top-100">
			<view class="uni_flex_col_align_center margin-bottom-50">
				<image src="/static/app_logo200.png" class="iconimg"></image>
				
				<view class="app_name uni_font_medium uni_25px">{{appName}}</view>
				<view class="app_version uni-font-regular">{{version}}</view>
			</view>
			
			<!-- #ifdef MP-WEIXIN -->
			<button @click="getuserinfo" withCredentials="true" class="btn_func uni_flex_row_align_center uni_font_medium">微信授权登陆</button>
			<view class="btn_func_un uni_flex_row_align_center uni-font-regular" @click="finishPage">暂不登录</view>
			<!-- #endif -->
			
			<!-- #ifdef APP-PLUS -->
			<view v-if="isShowWX" class="btn_func_bg uni_flex_row_align_center uni_font_medium" @click="doLoginAction('app-wx')">
				<image class="icon_wechat" src="/pages_sub/login/static/icon_share_wx.png"></image>
				<text style="letter-spacing: 4rpx;">微信授权登录</text>
			</view>

			<view v-if="isCanPhoneNumberLogin" class="btn_func_bg uni_flex_row_align_center uni_font_medium" @click="doLoginAction('mobile')">
				<uni-icons type="phone-filled" color="#E00300" size="20"></uni-icons>
				<view style="margin-left: 15rpx;">手机号一键登录</view>
			</view>

			<view class="btn_func_bg uni_flex_row_align_center uni_font_medium" @click="doLoginAction('apple')" v-if="isApple">
				<image class="icon_apple" src="/pages_sub/login/static/icon_apple.png"></image>
				<view>通过 Apple 登录</view>
			</view>
			
			<view class="btn_func_un uni_flex_row_align_center uni-font-regular" @click="finishPage">暂不登录</view>
			<!-- #endif -->
			
			<!-- #ifdef H5 -->
			<!-- 下载按钮 -->
			<view>
				<view class="uni_flex_row_align_center download_btn bbg1" @click="download(1)">
					<image style="width: 45rpx;height: 45rpx;" class="mr4" src="https://mp-4600ec1f-16af-433c-a045-130f8b08315f.cdn.bspapp.com/cloudstorage/3122fd08-63b0-42cd-91f1-f11421e72389.png"></image>
					<text class="uni_15px uni_font_regular" style="letter-spacing: 2rpx;">下载App (安卓)</text>
				</view>
				
				<view class="uni_flex_row_align_center download_btn bbg2" @click="download(2)">
					<image style="width: 40rpx;height: 40rpx;" class="mr4" src="https://mp-4600ec1f-16af-433c-a045-130f8b08315f.cdn.bspapp.com/cloudstorage/a8074492-ae50-42ad-ba0e-5399354ad9c6.png"></image>
					<text class="uni_15px uni_font_regular" style="letter-spacing: 2rpx;">下载App (苹果)</text>
				</view>
				
				<view class="uni_flex_col_align_center mt15">
					<image style="width: 288rpx;height: 288rpx;" class="mr4" src="https://luanqing.oss-cn-shanghai.aliyuncs.com/icon/yihui/min_code_yihui.jpeg"></image>
					<text class="uni_15px uni_font_regular mt6" style="letter-spacing: 2rpx;">微信小程序码</text>
				</view>
				
			</view>
			<!-- #endif -->
		</view>
		
		<!-- #ifdef APP-PLUS -->
		<view class="right uni_flex_col_align_center flexS">
			<view class="uni_flex_row_align_center uni_14px uni-font-regular">
				<checkbox style="transform: scale(0.65);" color="#8256f6" :checked="agreeState" @click="doAgree"></checkbox>
				<view class="uni-font-light">已阅读并同意</view>
				<view class="privacy uni_font_medium" @click="gotoUserAgreen">《用户服务协议》</view>
				<view class="privacy uni_font_medium" @click="gotoPrivacy">《隐私政策》</view>
			</view>
			
			<view class="uni_13px mt6">上海栾青网络科技有限公司出品</view>
			<view class="uni_13px mb15">Copyright © 2023</view>
		</view>
		<!-- #endif -->
	</view>
	
</template>

<script>
	// #ifdef APP-PLUS
	const univerifyManager = uni.getUniverifyManager()
	// #endif
	
	import api from '../../../../common/network/api/api.js';
	import dataBase from '../../../../common/database.js';
	
	export default{
		data(){
			return{
				agreeState: false,
				version:"v1.0",
				appName: '易绘',
				fromSource: 'index', // 来源，如果是index，则登录后返回主页，否则返回上一级
				code:undefined,
				isShowWX:true,
				isApple:false,
				isCanPhoneNumberLogin: false,
			}
		},
		onLoad(opt) {
			// #ifdef MP-WEIXIN
			const $that = this;
			
			this.fromSource = opt.fromSource || 'index';
			
			uni.login({
				success(res) {
					$that.code = res.code;
				},
				fail(res) {
				},
			})	
			// #endif
		},
		onShow() {
			const $that = this;
			$that.version = 'v'+ uni.getSystemInfoSync().appVersion;

			// #ifdef APP-PLUS
			if(plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
				console.log("微信应用已安装");
				$that.isShowWX = true;
			}else{
				console.log("微信应用未安装");
				$that.isShowWX = false;
			}
			
			uni.preLogin({
				provider:'univerify',
				success: (suc) => {
					this.isCanPhoneNumberLogin = true;
					if(univerifyManager){
						univerifyManager.preLogin();
					}
				},
			});
			
			this.isApple = uni.getSystemInfoSync().platform == 'ios';
			// #endif
		},
		methods:{
			download(type){
				if(type === 1){
					window.location.href = dataBase.appDownloadUrl;
				}else if(type === 2){
					window.location.href = 'https://apps.apple.com/cn/app/%E6%98%93%E7%BB%98ai%E4%BD%9C%E7%94%BB/id1670258950';
				}
			},
			finishPage(){
				uni.navigateBack({delta:1});
			},
			// 登录动作中枢
			doLoginAction(type){
				if(!this.agreeState){
					const $that = this;
					uni.showModal({
						title:'温馨提示',
						content:'您是否已阅读并同意 《用户服务协议》、 《隐私政策》？',
						confirmText:'同意并登录',
						cancelText:'拒绝',
						complete: (res) => {
							if(res.confirm){
								$that.agreeState = true;
								$that.doLoginAction(type);
							}
						}
					});
					return;
				}
				
				switch(type){
					case 'apple': this.login4ApplePhone(); break;
					case 'app-wx': this.login4AppWx(); break;
					case 'mobile': this.login4Mobild(); break;
				}
			},
			gotoUserAgreen(){
				uni.navigateTo({
					url:'/pages_sub/center/pages/webview/webview?url='+dataBase.appAgreement+'&title=用户协议'
				});
			},
			gotoPrivacy(){
				uni.navigateTo({
					url:'/pages_sub/center/pages/webview/webview?url='+dataBase.appPrivacy+'&title=隐私协议'
				});
			},
			doAgree(){
				this.agreeState = !this.agreeState;
			},
			// 手机号一键登录
			login4Mobild(){
				const $that = this;
				// 一键登录必须是手机使用流量的前提下才能获取到手机号码，用Wi-Fi联网时无法获取到手机号码，同时如果是双卡手机，获取到的手机号码是默认移动数据的那个手机卡的号码。
				// #ifdef APP-PLUS
				// 预登录 START
				// 1.提高一键登录的加载速度  
				// 2.判断一键登录环境是否可用
				univerifyManager.preLogin();
				
				// 调用一键登录弹框
				univerifyManager.login({
					univerifyStyle: {
					fullScreen:false,
					icon: {
						path:'/static/app_logo200.png'
					},
					privacyTerms:{
						defaultCheckBoxState: false,
						checkBoxSize: 14,
						privacyItems:[
							{  
								"url": dataBase.appAgreement, 
								"title": "用户服务协议"  
							},
							{  
								"url": dataBase.appPrivacy, 
								"title": "隐私协议"  
							}  
						]
					},
					authButton:{
						normalColor:"#9686FB",
						disabledColor:"#AAAAAA"
					},
				    otherLoginButton: {  
						visible: true, // 是否显示其他登录按钮，默认值：true  
						normalColor: "", // 其他登录按钮正常状态背景颜色 默认值：透明 
						highlightColor: "", // 其他登录按钮按下状态背景颜色 默认值：透明 
						textColor: "#656565", // 其他登录按钮文字颜色 默认值：#656565  
						title: "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”  
						borderColor: "",  //边框颜色 默认值：透明（仅iOS支持）  
						borderRadius: "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
					},  
				},
				success (auth) {
					uniCloud.callFunction({
						name:'getPhoneNumber',
						data:{ openid: auth.authResult.openid, access_token: auth.authResult.access_token},
						success(cloudRes) {
							let {code, phoneNumber} = cloudRes.result;
							console.error("手机号：",phoneNumber);
							
							if(code === 200){
								const data = {
									name: '手机用户',
									unionId: phoneNumber
								};
								$that.submitLoginData(data);
								univerifyManager.close();
							}else{
								univerifyManager.close();
							}
						},
						fail: (err) => {
							console.error("云函数失败：",err);
						}
					})
				},
				fail(res) {
					// 点击其他登录方式
					if(res.code === 30002){
						univerifyManager.close();
					}
				}
				})
			  // #endif
			},
			// 苹果登录
			login4ApplePhone(){
				const $that = this;
				uni.login({  
				    provider: 'apple', 
				    success(loginRes){  
				        // 登录成功  
				        uni.getUserInfo({  
				            provider: 'apple',  
				            success(res) {  
								// 苹果登录成功:{"errMsg":"getUserInfo:ok","userInfo":{"openId":"001465.6449e1ad2e46401488d67bae89d79c8a.1706","fullName":{"familyName":"许","giveName":"仕永","givenName":"仕永"},"email":"835588741@qq.com","authorizationCode":"c9acf4dd2a2a9491a93d158a7669b4165.0.mruwv.b0hncISXQbHMGinz5_f3vg","identityToken":"eyJraWQiOiJZdXlYb1kiLCJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJodHRwczovL2FwcGxlaWQuYXBwbGUuY29tIiwiYXVkIjoiY29tLmx1YW5xaW5nLmJhYnkiLCJleHAiOjE2MjA5MjU2MTIsImlhdCI6MTYyMDgzOTIxMiwic3ViIjoiMDAxNDY1LjY0NDllMWFkMmU0NjQwMTQ4OGQ2N2JhZTg5ZDc5YzhhLjE3MDYiLCJjX2hhc2giOiJqVG9MWHFKd3BBemxxSlNmV2xjWFBBIiwiZW1haWwiOiI4MzU1ODg3NDFAcXEuY29tIiwiZW1haWxfdmVyaWZpZWQiOiJ0cnVlIiwiYXV0aF90aW1lIjoxNjIwODM5MjEyLCJub25jZV9zdXBwb3J0ZWQiOnRydWUsInJlYWxfdXNlcl9zdGF0dXMiOjJ9.nAHGpGDpjALPmz-vReHjIAV3IyrYJTrLxHmLDqTd2AShYH6XZW3Qh-27aAgbWjg8_3w4Ex22Tpv8_NhKNTAIrHjCNMN5jnw6WkXL4-utKTZi4mlX4p_WiPpkZSa7e0cJZYKrN5b3UEiI1Vf6yu8b5TeKz4E7cg1Iq6RfFNmXLYJmt92WRtwSPexinTySjVvZmxGZ-_7nnh-TowHXjedLBsUsdB7oRlp1xSRpRQm78YKnibwmF2__iejPTmKL_WwOTXXBsg4NrF5h7rFS0Z7jGvA8WPziJxoaeHDP_j1Iw2pcmfzMLA7FhSXlkcYd38To2Wv01kOma0fLlfIm8JovIg","realUserStatus":2}} at pages/user/login/login.vue:93 __ERROR 
								console.error("苹果登录成功:",res?.userInfo?.fullName?.giveName || "苹果用户",res?.userInfo?.openId);
								
				                // 获取用户信息成功  
								const data = {
									name: res?.userInfo?.fullName?.giveName || "苹果用户",
									unionId: res?.userInfo?.openId
								};
								$that.submitLoginData(data);
				            }  
				        })  
				    },  
				});  
			},
			// App端微信
			login4AppWx(){
				const $that = this;

				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					  uni.getUserInfo({
					  	success(res) {
					  		const data = {
					  			avatar:res.userInfo.avatarUrl,
					  			name:res.userInfo.nickName,
					  			gender:res.userInfo.gender,
					  			unionId: res.userInfo.unionId,
					  		};
							
					  		$that.submitLoginData(data);
					  	},
					  })
				  },
				});
			},
			// 提交登录信息给后端
			submitLoginData(data){
				data.action = "submitLoginData";
				api.doPost(data).then(res=>{
					let temp = res.data;
					dataBase.insertUUIDAtStorage(temp.uuid);
					dataBase.insertTokenAtStorage(temp.token);
					this.finishPage();
				});
			},
			// 小程序专用 2
			getuserinfo(){
				let $that = this;
				let code = $that.code;		
				uni.showToast({
					title:'正在请求中',
					icon:'none'
				});
				
				uni.getUserProfile({
					desc:'用于登录获取昵称头像',
					success(res) {
						console.error("获取的用户资料：",JSON.stringify(res));
						
						const data = {
							action:'submitLoginDataMP',
							code:code,
							avatar:res.userInfo.avatarUrl,
							name:res.userInfo.nickName,
							gender:res.userInfo.gender,
						};
						
						api.doPost(data).then(response=>{
							dataBase.insertTokenAtStorage(response.data.token);
							dataBase.insertUUIDAtStorage(response.data.uuid);
							$that.finishPage();
						});
					}
				})
			},
		}
	}
</script>

<style>
	@import url("login.css");
</style>

四、头像制作

<template>
	<view>
		<uni-nav-bar :statusBar="true" :border="false" :fixed="true" :leftWidth="400" :rightWidth="200">
			<template v-slot:left class="uni_flex_row_align_left uni_14px uni_font_medium">
				<text class="button_import" @click="importImageBg">导入图片</text>
				<text class="button_save" @click="onSave2PhoneStorage">
					保存本地
					<!-- <text class="uni_12px" style="color: #E00300;">免费</text> -->
				</text>
			</template>
			<!-- #ifndef MP -->
			<template v-slot:right>
				<view class="uni_flex_row_align_center" @click="onClickHelp(true)">
					<uni-icons type="help-filled" size="22" color="#A2A3A4"></uni-icons>
					<view class="uni_12px uni_color_999">帮助</view>
				</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		
		<view class="uni_flex_col_align_center" v-if="isShowCanvas" style="background-color: #ffffff;position: sticky;top: 140rpx;z-index: 999;">
			<canvas id="canvasId" canvas-id="canvasId" class="avatar_panel" @touchstart="onTouchStart" @touchmove="onTouchMove"></canvas>
		</view>
		
		<!-- 缩放、旋转操作栏 START -->
		<view v-if="moveElement.url_mp || moveElement.url" class="uni_flex_row_align_center mt10">
			<view class="tag_fun_text2" @click="onImgTagRotate(-1)">
				<image class="tag_fun_img" src="../../static/icon/icon_left.png"></image>
			</view>

			<view class="tag_fun_text ml12 mr8" @click="onImgTagScan(-1)">缩小</view>
			
			<!-- #ifdef MP -->
			<!-- <image class="selected_tag" :src="moveElement.url_mp" mode="widthFix"></image> -->
			<!-- #endif -->
			
			<view class="tag_fun_text ml10 mr10" @click="onImgTagRemove">移除</view>
			
			<!-- #ifndef MP -->
			<!-- <image class="selected_tag" :src="moveElement.url" mode="widthFix"></image> -->
			<!-- #endif -->
			
			<view class="tag_fun_text ml8 mr12" @click="onImgTagScan(1)">放大</view>
			
			<view class="tag_fun_text2" @click="onImgTagRotate(1)">
				<image class="tag_fun_img" src="../../static/icon/icon_right.png"></image>
			</view>
		</view>
		<!-- 缩放、旋转操作栏 END -->
		
		<view class="uni_flex_row_align_left ml15 mt25">
			<image src="/static/icon/icon_color_piacker.png" style="width: 30rpx;height: 30rpx;"></image>
			<text class="uni_14px uni_color_222 ml8 uni_font_medium">背景颜色</text>
		</view>
		
		<view class="uni_flex_warp uni_flex_row_between ml15 mr15 mt12">
			<view v-for="(color,id) in colorList" class="bg" v-bind:key="id" :style="'background-color:#'+color" @click="onClickColorItem(color)"></view>
		</view>
		
		<view class="input_view ml15 mr15" v-if="false">
			<view class="uni_flex_row_align_left uni_font_regular uni_17px">
				<text class="mr2">#</text>
				<input class="input_style" maxlength="6" v-model="customColor" placeholder="请输入6位十六进制码" />
			</view>
			<view class="uni_flex_row_align_right" @click="onClickColorItem()">
				<text class="uni_green_209B5C uni_14px uni_font_medium">使用自定义</text>
				<view class="color_tag ml10" :style="'background-color:#'+customColor"></view>
			</view>
		</view>
		
		<view class="uni_flex_row_align_left ml15 mt25">
			<image src="/static/icon/icon_img_tag.png" style="width: 30rpx;height: 30rpx;"></image>
			<text class="uni_14px uni_color_222 ml8 uni_font_medium">装饰点缀图案</text>
		</view>
		
		<!-- 点缀的图案 -->
		<swiper class="uni_flex_col_align_center ml14 mr14 mt12" style="height: 365rpx;" :indicator-dots="true" indicator-active-color="#8256f6">
			<swiper-item v-for="(page,pid) in imgTag" v-bind:key="pid" style="width: 690rpx;">
				<view class="uni_flex_warp">
					<view class="tag_item" v-for="(tag, tid) in page" v-bind:key="tid" @click="onPickerImgTag(tag,tid)">
						<image class="tag_size" :src="tag.url"></image>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
<!-- 		<view class="page_tip_view mt20" v-if="false">
			<text class="uni_13px">三步自定义头像制作</text>
			<text class="mt4 uni_12px">1.选择背景，添加头像的背景主图</text>
			<text class="mt2 uni_12px">2.点击添加装饰点缀的图案</text>
			<text class="mt2 uni_12px">3.点击保存，即可保存到手机(相册查看)</text>
		</view> -->
		
		<uni-popup ref="showHelpDialog" type="top" :isMaskClick="false">
			<view class="popup_help_view">
				<view class="page_tip_view mt40">
					<text class="uni_13px">三步自定义头像制作</text>
					<text class="mt4 uni_12px">1.选择背景，添加头像的背景主图</text>
					<text class="mt2 uni_12px">2.点击添加装饰点缀的图案</text>
					<text class="mt2 uni_12px">3.点击保存，即可保存到手机(相册查看)</text>
				</view>
				<view style="height: 40rpx;"></view>
				<view class="mt18 uni_15px button_round_style" @click="onClickHelp(false)">好的</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '../../common/network/api/api';
	import dataBase from '../../common/database.js';
	
	export default {
		data() {
			return {
				isShowCanvas: true,
				// tagImages:[],
				
				drawTag:[], // 绘制在画布上的点缀图案列表
				imgTag:[],  // 可选的点缀图案
				canvasBG:'', // 画布的背景主图
				moveElement:{}, // 当前选中的元素
				canvasBgColor:'#ffffff', // 画布的背景颜色上色
				customColor:'FFFFFF', // 自定义颜色吗
				canvasSize: 231,
				colorList:["9686FB","6BADFF","77C38F","FFE16B","FF9F6B","FF6B6B"],
			}
		},
		onShow() {
			this.queryTags();
			
			this.isLogin = dataBase.queryLoginStatus();
			if(this.isLogin){
				api.doPost({action:'queryUnreadMessageNumber'}).then(res=>{
					let unread = res.data.unread;
					unread > 0 ? uni.showTabBarRedDot({index: 4}) :  uni.hideTabBarRedDot({index: 4});
				});
			}
		},
		methods: {
			onImgTagRemove(){
				let id = -1;
				this.drawTag.forEach((item,itemid)=>{
					if(item.id === this.moveElement.id){
						id = itemid;
					}
				});
				
				if(id != -1){
					this.drawTag.splice(id,1);
				}
				
				this.moveElement = {};
				this.drawCanvas();
			},
			// 保存到本地手机存储
			onSave2PhoneStorage(item){
				uni.canvasToTempFilePath({canvasId:'canvasId',success:(res)=>{
					// 保存到手机本地存储
					uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success:(res)=>{
						uni.showToast({
							title:'已下载到手机（可在相册查看）',
							icon:'none'
						});
					}});
				}});
			},
			// 导入头像主图
			importImageBg(){
				// #ifndef H5
				uni.chooseImage({
					count:1,
					crop: {width: 1000,height:1000,quality:100},
					success: (res) => {
						this.canvasBG = res.tempFilePaths[0];
						this.drawCanvas();
					}
				})
				// #endif
				
				// #ifdef H5
				uni.chooseFile({
					count:1,
					extension:['.png','.jpg'],
					complete: (res) => {
						console.error("选择成功：",res);
					}
				});
				// #endif
			},
			// 显示帮助弹窗
			onClickHelp(show){
				this.isShowCanvas = !show;
				if(show){
					this.$refs.showHelpDialog.open();
				}else{
					this.$refs.showHelpDialog.close();
				}
			},
			// 查询图案标签列表
			queryTags(){
				let tagData = dataBase.queryStorage("app_tag_lsit");
				if(tagData && tagData.date > (new Date().getTime())){
					this.imgTag = tagData.list;
				}else{
					api.doPost({action:'queryImageTag'}).then(res=>{
						let temp = res.data || [];
						
						let pageSize = 18;
						let pageNum = temp.length / 18 + (temp.length % 18 > 0 ? 1:0);
						pageNum = Math.floor(pageNum);
						
						this.imgTag = [];
						
						for(let i = 0 ; i < pageNum; i++){
							let sub; 
							if(i < pageNum - 1){
								sub = temp.slice(i * pageSize, pageSize);
							}else{
								sub = temp.slice(i * pageSize, i * pageSize + temp.length % 18);
							}
							
							this.imgTag.push(sub);
						}
						
						let insertData = { list: this.imgTag, date: (new Date().getTime() + 18000000) };
						dataBase.insertStorage('app_tag_lsit', insertData);
					})
				}
			},
			// 缩放
			onImgTagScan(mode){
				if(this.moveElement && this.moveElement.url){
					this.moveElement.width += (5 * mode); 
					this.moveElement.height += (5 * mode); 
				}	
				
				this.drawCanvas();
			},
			// 旋转
			onImgTagRotate(mode){
				if(this.moveElement && this.moveElement.url){
					if(this.moveElement.degree >= 360){
						this.moveElement.degree = mode === -1 ? 350:10;
					}else if(this.moveElement.degree <= 0){
						this.moveElement.degree = mode === -1 ? 360:10;
					}else{
						this.moveElement.degree += (10 * mode); 
					}
				}
				
				this.drawCanvas();
			},
			// 选择饰品图标
			onPickerImgTag(item,id){
				item.id = id;
				item.x = 0;
				item.y = 0;
				item.width = 50;
				item.height = 50;
				item.degree = 360;
				
				this.drawTag.push(item);
				this.drawCanvas();
			},
			// 点击颜色卡
			onClickColorItem(color){
				if(color){
					this.customColor = color;
					this.canvasBgColor = "#"+color;
					this.drawCanvas();
				}else{
					if(!this.customColor || this.customColor.length < 6){
						this.customColor = "FFFFFF";
						uni.showToast({
							title:"自定义颜色码不合法，请输入6位的十六进制颜色码",
							icon:'none'
						});
						return;
					}else{
						this.canvasBgColor = "#"+this.customColor;
						this.drawCanvas();
					}
				}
			},
			// 绘制的中枢核心方法
			drawCanvas(){
				const ctx = uni.createCanvasContext('canvasId');
			
				// 填充背景色
				ctx.setFillStyle(this.canvasBgColor);
				ctx.fillRect(0, 0, this.canvasSize, this.canvasSize);
				
				// 绘制背景图
				if(this.canvasBG){
					ctx.drawImage(this.canvasBG, this.bgLeft, this.bgTop, this.canvasSize, this.canvasSize);
				}
				
				// 饰品点缀图以及旋转逻辑处理
				this.drawTag.forEach(item=>{
					if(item.url){
						// 旋转的处理代码 
						if(item.degree > 0){
							ctx.translate(item.x + item.width / 2, item.y + item.height / 2);
							ctx.rotate(item.degree * Math.PI / 180);
							ctx.translate((item.x + item.width / 2) * -1, (item.y + item.height / 2) * -1);
						}
						
						if(this.moveElement && item.id === this.moveElement.id){
							ctx.setStrokeStyle('red');
							ctx.strokeRect(item.x - 2 , item.y - 2 , item.width + 2, item.height + 2)
						}
						
						// 绘制饰品点缀图
						//#ifdef MP
						ctx.drawImage(item.url_mp, item.x, item.y, item.width, item.height);
						//#endif
						
						//#ifndef MP
						ctx.drawImage(item.url, item.x, item.y, item.width, item.height);
						//#endif
					}
				});
				
				ctx.draw();
			},
			// 触摸开始，用于定位点击的是哪个tag装饰
			onTouchStart(e){
				let x = e.touches[0].x;
				let y = e.touches[0].y;
				
				x = x < 0 ? 0 : x;
				y = y < 0 ? 0 : y;
				
				x = x > this.canvasSize ? this.canvasSize : x;
				y = y > this.canvasSize ? this.canvasSize : y;
				
				let cur = this.drawTag.find(item=>{
					return ((x >= item.x && y >= item.y) && (x <= (item.x + item.width) && y <= (item.y + item.height)));
				});
				
				if(cur){
					this.moveElement = cur;
				}
				
				this.drawCanvas();
			},
			// 移动进行中，拖动生效
			onTouchMove(e){
				let x = e.touches[0].x;
				let y = e.touches[0].y;
				
				x = x < 0 ? 0 : x;
				y = y < 0 ? 0 : y;
				
				x = x - this.moveElement.width;
				y = y - this.moveElement.height;
				
				// let offset = 20;
				// x = x > this.canvasSize - this.moveElement.width - offset ? this.canvasSize - this.moveElement.width - offset : x;
				// y = y > this.canvasSize - this.moveElement.height - offset ? this.canvasSize - this.moveElement.height - offset: y;
				
				this.moveElement.x = x;
				this.moveElement.y = y;
				
				this.drawCanvas();
			},
		}
	}
</script>

<style>
@import url('index.css');
</style>