接下来，继续讲下一步的开发，整体功能如下图
首页
首先我们进入到首页的开发，首页是由顶部的logo和一个文本输入框及下面一排功能组成，这里的界面排版比较简单，普通的css加页面元素就可以完成，稍复杂一点的是选择提示词时，顶部需要出现一个提示词的效果，如文章写作神器
提示词弹窗选择效果
提示词弹窗效果
还有一点需要注意的是因为在微信小程序端textarea的层级是属于顶层渲染，是原生组件，所以在弹窗这类需要盖过textarea组件时，要把textarea隐藏掉
<AppProvider>
<view class="wrap">
<view class="box-question">
<view class="part-head">
<view class="user-img">
<image src="/static/logo.png" mode="aspectFill" class="img" />
</view>
<view class="user-text">我是
<picker style="display: inline" @change="onApiChange" :value="apiArray.findIndex(
t =>
t.value === (currentUser?.apiProvider || apiArray[0].value),
)
" :range="apiArray" range-key="name"><text class="blue">{{
apiArray.filter(
t =>
t.value === (currentUser?.apiProvider || apiArray[0].value),
)[0]?.displayName
}}</text><text class="user-text-arrow"></text></picker>智能大模型，请开始提问吧
</view>
</view>
<view class="content">
<view class="content_wrap">
<view v-if="cuewordItem" class="content_cueword">
<view class="content_cuetext">{{ cuewordItem.name }}</view><uni-icons class="content_icon" type="close"
size="40rpx" @click="clearCue" />
</view>
<view v-if="anaimage.base64" class="content_anaimage">
<uni-icons class="content_icon" type="close" color="#fff" size="40rpx" @click="clearAnaImage" />
<!--#if MP-WEIXIN -->
<image :src="anaimage.img" @click="previewImage(anaimage.img)" mode="aspectFit"
class="content_anaimage_img" />
<!--#endif -->
<!--#if H5 -->
<image :src="anaimage.base64" @click="previewImage(anaimage.base64)" mode="aspectFit"
class="content_anaimage_img" />
<!--#endif -->
</view>
<textarea :placeholder="cuewordItem?.placeHolder ||
placeholder +
(placeholder
? '\n' +
`每次问答消耗${-parseInt(
setting ? setting['ChatGPT.Consume.Ask'] : '0',
)}积分`
: '')
" class="content_area" rows="10" confirm-type="confirm" maxlength="1000" :value="question"
@confirm="send" @focus="onfocus" @blur="change"
v-show="!showPrivacy && !pointLimit && showTextArea"></textarea>
<view v-if="!showTextArea" :class="[
'content_area',
'content_area2',
question ? '' : 'content_placeholder',
]">
<view class="content_area2_text" v-for="item in ((question ||
cuewordItem?.placeHolder ||
(
placeholder +
(placeholder
? '\n' +
`每次问答消耗${-parseInt(
setting ? setting['ChatGPT.Consume.Ask'] : '0',
)}积分`
: '')
)).split('\n'))">{{ item }}</view>
</view>
</view>
<view class="delete" @click="clear">
<uni-icons type="trash" color="#3bafda" size="48rpx"></uni-icons>
</view>
<view class="content_box">
<view class="prompt" @click="showCueword" v-if="!anaimage.img"><text class="iconfont icon-cc-magic"></text>提示词
</view>
<view class="prompt" @click="chooseAnaImage" v-if="!cuewordItem">
<icon class="iconfont icon-tupianshibie imagetotext" />图文问答
</view>
<view class="content_block"></view>
<!-- <uni-icons
class="camera"
type="camera-filled"
color="#3bafda"
size="48rpx"
@click="chooseImageLanguage"
></uni-icons> -->
<!-- #ifdef MP-WEIXIN -->
<view @touchstart="startRecord" v-if="platform !== 'windows'">
<uni-icons type="mic-filled" color="#3bafda" size="48rpx"></uni-icons>
</view>
<!-- #endif -->
<button class="content_btn" @click="send">确认提问</button>
</view>
</view>
</view>
<!-- 常用功能 -->
<view class="box-templates">
<view class="part-head">
<view class="part-title">
<text class="iconfont icon-gengduo-copy"></text>
<text class="title">常用功能</text>
</view>
<!-- <view class="part-more">
<text class="more">更多</text>
<text class="iconfont icon-right"></text>
</view> -->
</view>
<view class="box-center">
<view class="box_tag" @click="goto('/pages/form/copyWriter')">
<view class="ico ico_1">
<text class="iconfont icon-wenan"></text>
</view>
<view class="text">写作助手</view>
</view>
<view class="box_tag" @click="goto('/pages/form/shareMood')">
<view class="ico ico_7">
<text class="iconfont icon-navicon-rqfz"></text>
</view>
<view class="text">朋友圈文案</view>
</view>
<view class="box_tag" v-if="versionShow" @click="goto('/pages/form/beName')">
<view class="ico ico_2">
<text class="iconfont icon-mingpian"></text>
</view>
<view class="text">宝宝取名</view>
</view>
<view class="box_tag" @click="goto('/pages/form/translate')">
<view class="ico ico_3">
<text class="iconfont iconfont icon-fanyi"></text>
</view>
<view class="text">在线翻译</view>
</view>
<view class="box_tag" @click="goto('/pages/form/pseudoOriginal')">
<view class="ico ico_4">
<text class="iconfont icon-zuoye"></text>
</view>
<view class="text">改写润色</view>
</view>
<view class="box_tag" @click="goto('/pages/form/workReport')">
<view class="ico ico_5">
<text class="iconfont icon-kefu"></text>
</view>
<view class="text">工作汇报</view>
</view>
<view class="box_tag" @click="goto('/pages/form/loveLetter')">
<view class="ico ico_6">
<text class="iconfont icon-aixin"></text>
</view>
<view class="text">情书</view>
</view>
<view class="box_tag" @click="goto('/pages/form/touristGuide')">
<view class="ico ico_8">
<text class="iconfont icon-news"></text>
</view>
<view class="text">旅游攻略</view>
</view>
</view>
</view>
<view class="box-templates" v-if="questionTemplate.totalCount > 0">
<view class="part-head">
<view class="part-title">
<text class="iconfont icon-hot"></text>
<text class="title">热门助手</text>
</view>
</view>
<assistitem />
</view>
</view>
<uni-popup type="bottom" ref="recordref" mask-background-color="rgba(0,0,0,0)" :safe-area="false" @maskClick="empty">
<view class="bg" :style="{ paddingBottom: paddingBottom }">
<tencentasr @record="record" @close="close" @clear="clear" @send="send" />
</view>
</uni-popup>
<!-- #ifdef H5 -->
<qrcode />
<!-- #endif -->
<!-- #ifdef H5 -->
<uni-popup ref="cueref" type="bottom" mask-background-color="rgba(0,0,0,0)" @maskClick="empty">
<view class="bg">
<cueword @select="selectCue" className="index_list" @close="empty"></cueword>
</view>
</uni-popup>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<uni-popup ref="cueref" type="bottom" mask-background-color="rgba(0,0,0,0)" @maskClick="empty" :safe-area="false">
<view class="bg">
<cueword @select="selectCue" className="index_list" @close="empty"></cueword>
</view>
</uni-popup>
<!-- #endif -->
<swtich-dialog @change="reaskChangeapi" />
</AppProvider>
首页节点代码
如有任何问题，请随时与我交流
扫码体验
