draw.vue 49 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832
  1. <template>
  2. <view>
  3. <view style="color: #fff;">
  4. <tn-nav-bar backgroundColor="#26b3a0" :bottomShadow="false">AI绘图</tn-nav-bar>
  5. <view :style="{ height: tobheight + 'px' }"></view>
  6. </view>
  7. <u-notice-bar :text="noticebar" step speed="800"></u-notice-bar>
  8. <view style="margin: 30rpx 30rpx 0;">
  9. <tn-subsection :list="tabslist" :current="current" mode="button" :borderRadius="50"
  10. backgroundColor="tn-cool-bg-color-9" @change="getsubsection" buttonColor="tn-cool-bg-color-7"
  11. inactiveColor="#FFFFFF" activeColor="#27A1BA"></tn-subsection>
  12. </view>
  13. <view class="directask">
  14. <view v-if="modelslist.length>0" class="cu-form-group">
  15. <view class="cu-title flxe align-center justify-between">
  16. <view class="title flxe align-center">模型选择</view>
  17. <block v-if="showmj">
  18. <u-tag v-if="userData.vip_info&&userData.is_validity>0"
  19. :text="(userData.vip_info.mj_type == 'time'?'今日':'会员')+'剩余mj绘画:'+(userData.vip_info.mj_times==-1?'无限量':userData.vip_info.mj_times-userData.vip_info.mj_used+'次')"
  20. plain shape="circle" plainFill color="#26b3a0" borderColor="#26b3a0"
  21. bgColor="#26b3a014"></u-tag>
  22. </block>
  23. <block v-else>
  24. <u-tag v-if="userData.vip_info&&userData.is_validity>0"
  25. :text="(userData.vip_info.sd_type == 'time'?'今日':'会员')+'剩余sd绘画:'+(userData.vip_info.sd_times == -1?'无限量':userData.vip_info.sd_times-userData.vip_info.sd_used+'次')"
  26. plain shape="circle" plainFill color="#26b3a0" borderColor="#26b3a0"
  27. bgColor="#26b3a014"></u-tag>
  28. </block>
  29. </view>
  30. <view class="engine-container" @click="showmode = true">
  31. <view class="model_view">模型:{{xzmodels}}</view>
  32. <u-icon name="arrow-down-fill" color="#9e9e9e"></u-icon>
  33. </view>
  34. </view>
  35. <view class="cu-form-group" :style="engineid != 0 ? 'margin-top: 20rpx' : ''">
  36. <view class="cu-title flxe align-center justify-between">
  37. <view class="title flxe align-center">画面描述</view>
  38. <!-- <u-icon @click="keywords = '',galleryid =''" name="trash-fill" color="#9e9e9e" size="24"></u-icon> -->
  39. </view>
  40. <view class="textarea-container">
  41. <textarea class="textarea" v-model="keywords" cursor-spacing="30rpx" :maxlength="500"
  42. placeholder-style="color: #9e9e9e;font-size:28rpx"
  43. placeholder="输入你的创意,支持中英文,用逗号分隔,关键词越多越精确,关键词越少AI自由发挥越多,如:最好的质量,城市,大雨,远景,赛博朋克" value="keywords"
  44. @input="textareainput" />
  45. <view class="textareaoperate tn-flex align-center justify-between">
  46. <!-- <view @click="getincrease" class="increase">描述增幅</view> -->
  47. <view @click="show_gpt = true" class="increase tn-main-gradient-orangeyellow">咒语助手</view>
  48. <view class="tn-flex align-center" style="color: #9e9e9e;">
  49. <view class="">{{cursor}}/500</view>
  50. <view style="margin: 0 20rpx;">||</view>
  51. <u-icon @click="keywords = '',galleryid ='',cursor = 0" name="trash-fill" color="#9e9e9e"
  52. size="24"></u-icon>
  53. </view>
  54. </view>
  55. </view>
  56. <!-- <view class="tn-flex align-center justify-between polish">
  57. <view class="tn-flex">
  58. <view style="margin-right: 10rpx;">描述增幅</view>
  59. <u-icon @click="getincrease" name="question-circle" color="#909399" size="20"></u-icon>
  60. </view>
  61. <u-switch size="26" space="2" activeColor="#f9ae3d" inactiveColor="#f1f1f1" v-model="increaseswitch" @change="changepolish"></u-switch>
  62. </view> -->
  63. <view v-if="gallerylist.length>0&&!showmj" class="try-tips">
  64. <scroll-view class="scroll-view" scroll-x="true">
  65. <block v-for="(item,index) in gallerylist" :key="index">
  66. <view @click="tapgallery(index)" class="scroll-item"
  67. :style="{background: galleryid == item.id?'#26b3a0':'',color: galleryid == item.id?'#fff':''}">
  68. {{item.name}}
  69. </view>
  70. </block>
  71. </scroll-view>
  72. <view class="change" @click="initWords"><text class="tn-icon-circle-arrow tn-color-cat"
  73. style="font-size: 34rpx;"></text></view>
  74. </view>
  75. </view>
  76. <!-- <view class="words-ocntainer">
  77. <view class="sentences">
  78. <view class="item" v-for="(item, index) in sentence" :key="index" @click="onWords(item)">{{ item }}</view>
  79. </view>
  80. <view class="tags">
  81. <view class="item" v-for="(item, index) in word" :key="index" @click="onWords(item)">{{ item }}</view>
  82. </view>
  83. </view> -->
  84. <!-- <view class="cu-form-group" style="margin-bottom: 0;">
  85. <view class="cu-title"><view class="title flxe align-center">风格选择</view></view>
  86. </view> -->
  87. <!-- <view class="cu-form-group">
  88. <view class="cu-title flxe align-center justify-between">
  89. <view class="title flxe align-center">风格选择</view>
  90. </view>
  91. <scroll-view class="scrollview" scroll-x="true" style="height: 140rpx;">
  92. <block v-for="(item, index) in custyle" :key="index">
  93. <view class="scrollstyle">
  94. <image :src="item.img" mode="aspectFill"></image>
  95. <view>{{ item.title }}</view>
  96. </view>
  97. </block>
  98. </scroll-view>
  99. </view> -->
  100. <!-- <view class="cu-form-group" v-if="engineid == 1 || engineid == 2">
  101. <view class="cu-title"><view class="title flxe align-center">智能拓展</view></view>
  102. <scroll-view class="scrollview" scroll-x="true">
  103. <view class="scrollitems" :class="form.enable_face_enhance ? 'active' : ''" @click="onExtend(0)">面部强化</view>
  104. <view class="scrollitems" :class="form.is_last_layer_skip ? 'active' : ''" @click="onExtend(1)">色彩狂化</view>
  105. </scroll-view>
  106. </view> -->
  107. <view v-if="!showmj" class="cu-form-group">
  108. <view class="cu-title">
  109. <view class="title flxe align-center">图片比例</view>
  110. </view>
  111. <view class="flxe proportion">
  112. <view class="radio flxe align-center justify-center flxe-column"
  113. :class="ratioIndex == 0 ? 'active' : ''" @click="ratio(0)">
  114. <view class="cu-proportion flxe align-center justify-center">
  115. <view class="proportion1"></view>
  116. </view>
  117. <view class="describe">1:1</view>
  118. </view>
  119. <view class="radio flxe align-center justify-center flxe-column"
  120. :class="ratioIndex == 1 ? 'active' : ''" @click="ratio(1)">
  121. <view class="cu-proportion flxe align-center justify-center">
  122. <view class="proportion2"></view>
  123. </view>
  124. <view class="describe">3:4</view>
  125. </view>
  126. <view class="radio flxe align-center justify-center flxe-column"
  127. :class="ratioIndex == 2 ? 'active' : ''" @click="ratio(2)">
  128. <view class="cu-proportion flxe align-center justify-center">
  129. <view class="proportion3"></view>
  130. </view>
  131. <view class="describe">4:3</view>
  132. </view>
  133. <!-- <view class="radio flxe align-center justify-center flxe-column" :class="ratioIndex == 3 ? 'active' : ''" @click="ratio(3)">
  134. <view class="cu-proportion flxe align-center justify-center"><view class="proportion2"></view></view>
  135. <view class="describe">9:16</view>
  136. </view>
  137. <view class="radio flxe align-center justify-center flxe-column" :class="ratioIndex == 4 ? 'active' : ''" @click="ratio(4)">
  138. <view class="cu-proportion flxe align-center justify-center"><view class="proportion3"></view></view>
  139. <view class="describe">16:9</view>
  140. </view> -->
  141. </view>
  142. </view>
  143. <view class="cu-form-group">
  144. <view class="cu-title">
  145. <view class="title flxe align-center">参考图(可选)</view>
  146. </view>
  147. <view class="desc-tips">AI绘画时会参考您所上传的参考图的风格进行构图</view>
  148. <view class="cu-upload flxe align-center justify-center">
  149. <image class="upload-img" :src="refer_img" v-if="refer_img" mode="aspectFill"
  150. @click="preViewImg(refer_img)"></image>
  151. <view class="upload-delete tn-icon-delete tn-color-cat" style="font-size: 40rpx;" v-if="refer_img"
  152. @click="deleteImg()"></view>
  153. <view class="flxe flxe-column align-center" v-else @click="uploadImg(engineid)">
  154. <u-icon name="plus-circle-fill" color="#26b3a0" size="28"></u-icon>
  155. <view class="upload">上传图片</view>
  156. </view>
  157. </view>
  158. </view>
  159. <!-- <view class="cu-form-group">
  160. <view class="cu-title"><view class="title flxe align-center">参考图相似度</view></view>
  161. <view class="desc-tips">相似度越高越遵照原图风格,越低越有创意</view>
  162. <u-slider v-if="engineid == 0" v-model="form.fidelity" showValue activeColor="#26b3a0" blockColor="#26b3a0" min="0" max="100"></u-slider>
  163. <u-slider v-else v-model="form.init_strength" showValue activeColor="#26b3a0" blockColor="#26b3a0" min="0" max="70"></u-slider>
  164. </view> -->
  165. <view class="cu-form-group">
  166. <view class="cu-title">
  167. <view class="title flxe align-center">生成数量</view>
  168. </view>
  169. <view class="flxe generate">
  170. <block v-if="!showmj">
  171. <view class="xz_generate flxe align-center justify-center"
  172. :class="form.samples == 1 ? 'xz_gactive' : ''" @click="form.samples = 1">
  173. <view :style="{color: form.samples == 1 ? '#26b3a0':''}">1张</view>
  174. </view>
  175. <!-- <view class="xz_generate flxe align-center justify-center" :class="form.samples == 2 ? 'xz_gactive' : ''" @click="form.samples = 2">
  176. <view :style="{color: form.samples == 2 ? '#26b3a0':''}">2张</view>
  177. </view>
  178. <view class="xz_generate flxe align-center justify-center" :class="form.samples == 3 ? 'xz_gactive' : ''" @click="form.samples = 3">
  179. <view :style="{color: form.samples == 3 ? '#26b3a0':''}">3张</view>
  180. </view> -->
  181. </block>
  182. <block v-else>
  183. <view class="xz_generate flxe align-center justify-center"
  184. :class="form.samples == 4 ? 'xz_gactive' : ''" @click="form.samples = 4">
  185. <view :style="{color: form.samples == 4 ? '#26b3a0':''}">4张</view>
  186. </view>
  187. </block>
  188. </view>
  189. </view>
  190. <!-- <view class="footer">
  191. <view @click="createClick" class="Btn1" :data-styleid="1" hoverClass="active">
  192. <view class="create">
  193. <view>生成 | 需要消耗{{ needCoin }}积分</view>
  194. </view>
  195. </view>
  196. </view> -->
  197. </view>
  198. <!-- 生成按钮 -->
  199. <view class="dygbhg">
  200. <navigator class="whole" open-type="navigateBack">退出</navigator>
  201. <block v-if="showmj">
  202. <view
  203. v-if="userData.vip_info&&userData.is_validity>0&&userData.vip_info.mj_times-userData.vip_info.mj_used>0 ||userData.vip_info&&userData.is_validity>0&&userData.vip_info.mj_times == -1"
  204. @click="createClick" class="distinguish">立即生成</view>
  205. <view v-else @click="createClick" class="distinguish">生成 |
  206. 需要消耗{{ plan.unlock_mj_aipainting}}{{appInfo.number_alias ? appInfo.number_alias : '点数'}}</view>
  207. </block>
  208. <!-- Ai币按钮 -->
  209. <block v-else>
  210. <view
  211. v-if="userData.vip_info&&userData.is_validity>0&&userData.vip_info.sd_times-userData.vip_info.sd_used>0 ||userData.vip_info&&userData.is_validity>0&&userData.vip_info.sd_times == -1"
  212. @click="createClick" class="distinguish">立即生成</view>
  213. <view v-else @click="createClick" class="distinguish">生成 |
  214. 需要消耗{{ plan.unlock_aipainting*form.samples}}{{appInfo.number_alias ? appInfo.number_alias : '点数'}}
  215. </view>
  216. </block>
  217. </view>
  218. <u-loading-page :loading="loading" loading-text="正在加载" icon-size="35" bgColor="#1a1a1a" color="#fff"
  219. loadingColor="#fff"></u-loading-page>
  220. <u-popup :show="showmode" @close="showmode = false" safeAreaInsetTop :round="15" closeable>
  221. <view class="select u-flex justify-center"><text>选择模型</text></view>
  222. <scroll-view scroll-y="true" class="scroll_mode">
  223. <view class="tn-flex justify-between flex-wrap">
  224. <block v-for="(item,index) in modelslist" :key="index">
  225. <view v-if="item.title" class="card" :style="{borderColor: modelsid == index?'#91F7C1':''}"
  226. @click="modelsid = index,showmode = false,form.model_id = item.model_id.toString(),xzmodels = item.name,form.name = item.name">
  227. <u-swiper :list="item.imgs" radius="0" height="110" indicator indicatorMode="line"
  228. circular></u-swiper>
  229. <view class="card-info">
  230. <view class="card-info-title">{{item.title}}</view>
  231. <view class="card-info-desc">{{item.name}}</view>
  232. </view>
  233. </view>
  234. </block>
  235. </view>
  236. </scroll-view>
  237. </u-popup>
  238. <u-popup :show="show_gpt" @close="show_gpt = false" mode="center" :round="10" closeable safeAreaInsetTop>
  239. <view class="gpt-select">
  240. <view class="gpt-title"><u--text text="咒语助手" iconStyle="font-size: 20px" color="#1a1a1a" bold size="18"
  241. lineHeight="30"></u--text></view>
  242. <u--text text="针对AI绘画场景下的gpt模型,能够生成高质量的描述词" color="#9e9e9e" size="14" lineHeight="30"></u--text>
  243. <!-- <u--text text="输入你的创意 想象" iconStyle="font-size: 20px" bold size="16" lineHeight="30"></u--text> -->
  244. <view class="gpt-textarea-container"><u--textarea v-model="gpt_keywords" placeholder="输入你的创意 想象"
  245. count></u--textarea></view>
  246. <view class="use-gpt">
  247. <u-button :text="appInfo.number_alias ? '灵感一现(消耗1'+appInfo.number_alias+')':'灵感一现(消耗1点数)'"
  248. shape="circle" color="linear-gradient(to right, rgb(255, 202, 40), rgb(255, 167, 38))"
  249. @click="getGpt"></u-button>
  250. </view>
  251. <view class="gpt-textarea-container" style="margin-bottom: 20rpx;"><u--textarea height="200"
  252. v-model="gpt_text" v-if="gpt_text"></u--textarea></view>
  253. <u-button type="success" @click="setGpt" plain text="使用" shape="circle" v-if="gpt_text"></u-button>
  254. </view>
  255. </u-popup>
  256. <!-- midJourneyAi币不足弹窗 -->
  257. <wike-model v-if="signShow" :authorize="false" :title="signTitle" btnText="立即获取" @save="signSign"
  258. @close="signShow = false"></wike-model>
  259. <wike-modal-qrcode :qrcode="gzhqrcode" :showconcern="showconcern"
  260. @concernclose="concernclose"></wike-modal-qrcode>
  261. <!-- <wike-tabbar :onTabbar="true" :isShowAnimate="true"></wike-tabbar> -->
  262. <!-- <u-picker :show="showmode" :columns="modelslist" keyName="name" @cancel="showmode = false"></u-picker> -->
  263. </view>
  264. </template>
  265. <script>
  266. import {
  267. mapMutations,
  268. mapActions,
  269. mapState,
  270. mapGetters
  271. } from 'vuex';
  272. import {
  273. apiurl
  274. } from '@/common/request/request';
  275. let rewardedVideoAd = null;
  276. export default {
  277. mixins: [],
  278. components: {},
  279. data() {
  280. return {
  281. signShow: false,
  282. signTitle: '',
  283. tobheight: 45,
  284. platform: this.$platform.get(),
  285. indexList: [],
  286. show_gpt: false,
  287. gpt_keywords: '',
  288. gpt_text: '',
  289. cursor: 0,
  290. form: {
  291. // is_anime: true,
  292. // style: '',
  293. // task: 'txt2img',
  294. // act: '',
  295. // fidelity: 50,
  296. // text: '',
  297. // prompt: '',
  298. // init_image: '',
  299. // init_strength: 50,
  300. // guidence_scale: 15,
  301. // ratio: 2,
  302. // enable_face_enhance: false,
  303. // is_last_layer_skip: false,
  304. // engine: 'stable_diffusion'
  305. name: '',
  306. init_image: '',
  307. prompt: '',
  308. width: '',
  309. height: '',
  310. guidance_scale: '7',
  311. samples: '1',
  312. model_id: '',
  313. scheduler: 'DDPMScheduler',
  314. type: 'text2img',
  315. num_inference_steps: '30',
  316. // lora_model:'guofeng3-lora'
  317. },
  318. word: [],
  319. sentence: [],
  320. enable_face_enhance: false,
  321. is_last_layer_skip: false,
  322. ratioIndex: 0,
  323. isConnected: true, //是否有网
  324. page: 1,
  325. loadmore: 'loading',
  326. loading: true,
  327. slider: 50,
  328. value2: '',
  329. keywords: '',
  330. increase: '',
  331. noincrease: '',
  332. increaseswitch: false,
  333. keyword: ['莫斯科', '日落', '橄榄树', '椰子树', '小兔子梵高', '海底世界', '星球'],
  334. custyle: [{
  335. img: 'https://pub-8b49af329fae499aa563997f5d4068a4.r2.dev/generations/18134196791680595205.png',
  336. title: '真人模型'
  337. }, {
  338. img: 'https://pub-8b49af329fae499aa563997f5d4068a4.r2.dev/generations/17763741241683163592.png',
  339. title: '宠物模型'
  340. }, {
  341. img: 'https://pub-8b49af329fae499aa563997f5d4068a4.r2.dev/generations/4740030011682234157.png',
  342. title: '漫画模型'
  343. }, {
  344. img: 'https://pub-8b49af329fae499aa563997f5d4068a4.r2.dev/generations/20527297251680823430.png',
  345. title: '海底模型'
  346. }],
  347. showcoin: false,
  348. addSuc: false,
  349. plan: {},
  350. // needCoin: 0,
  351. cos_img: '',
  352. cos_id: 0,
  353. refer_img: '',
  354. refer_id: 0,
  355. engine: 'sd',
  356. engineid: 0,
  357. needCoin: 0,
  358. gallerylist: [],
  359. galleryid: '',
  360. modelslist: [],
  361. modelsid: 0,
  362. xzmodels: '',
  363. showmode: false,
  364. noticebar: ['精美图片需要时间打磨,预计20秒-120秒出图',
  365. // '图片生成中请不要退出,否则可能会生成失败'
  366. ],
  367. tabslist: ['StableDiffusion绘图', 'MidJourney绘图'],
  368. curNow: 0,
  369. cardswiper: [
  370. 'https://cos.iseeds.xyz/cover/3.0-1.jpg',
  371. 'https://cos.iseeds.xyz/cover/hhjmix-3.png',
  372. 'https://cos.iseeds.xyz/style/gufeng1.png',
  373. ],
  374. showmj: false,
  375. current: 0,
  376. showconcern: false,
  377. gzhqrcode: '',
  378. proportion: ''
  379. };
  380. },
  381. computed: {
  382. ...mapGetters(['appInfo', 'homeTemplate', 'userInfo', 'isLogin', 'userData'])
  383. },
  384. onLoad() {
  385. if (this.platform == 'wxMiniProgram') {
  386. var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight;
  387. var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop;
  388. this.tobheight = menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height;
  389. }
  390. if (this.$Route.query.prompt) {
  391. this.keywords = this.$Route.query.prompt
  392. this.cursor = this.$Route.query.prompt.length
  393. this.current = this.$Route.query.engine == 'sd' ? 0 : 1
  394. this.showmj = this.$Route.query.engine == 'sd' ? false : true
  395. if (this.$Route.query.engine == 'sd') {
  396. this.form.samples = 1
  397. this.engine = 'sd'
  398. this.modelslist = []
  399. this.getModels();
  400. } else {
  401. this.form.samples = 4
  402. this.engine = 'mj'
  403. this.modelslist = []
  404. this.getModels();
  405. }
  406. }
  407. this.gallery();
  408. this.getModels();
  409. this.getPlan()
  410. },
  411. onShow() {
  412. // 网络变化检测
  413. uni.onNetworkStatusChange(res => {
  414. this.isConnected = res.isConnected;
  415. });
  416. if (this.isLogin) {
  417. this.getUserData();
  418. }
  419. this.systemwechat()
  420. },
  421. onReady() {
  422. // #ifdef MP-WEIXIN
  423. if (wx.createRewardedVideoAd && this.appInfo.video_status == 1) {
  424. rewardedVideoAd = wx.createRewardedVideoAd({
  425. adUnitId: this.appInfo.video_id
  426. });
  427. rewardedVideoAd.onLoad(() => {
  428. console.log('onLoad event emit');
  429. });
  430. rewardedVideoAd.onError(err => {
  431. console.log('onError event emit', err);
  432. });
  433. rewardedVideoAd.onClose(res => {
  434. if (res && res.isEnded) {
  435. // 正常播放结束,可以下发游戏奖励
  436. this.memberAddCoin();
  437. this.showcoin = false;
  438. } else {
  439. // 播放中途退出,不下发游戏奖励
  440. uni.showToast({
  441. title: '看完广告后才可获得积分哦',
  442. icon: 'none'
  443. });
  444. }
  445. });
  446. }
  447. // #endif
  448. this.loading = false;
  449. },
  450. methods: {
  451. ...mapActions(['appInit', 'logout', 'getUserInfo', 'getUserData']),
  452. signSign() {
  453. uni.navigateTo({
  454. url: '/pages/user/member/member'
  455. });
  456. this.signShow = false
  457. },
  458. systemwechat() {
  459. this.$http('conf.getGroupConf', {
  460. group: 'system.wechat'
  461. }).then(res => {
  462. if (res.code == 0) {
  463. this.gzhqrcode = res.data.qrcode_path
  464. const focuson = uni.getStorageSync('focuson');
  465. // console.log(focuson);
  466. if (!focuson) {
  467. if (this.gzhqrcode) {
  468. if (this.isLogin && this.appInfo.is_show_logged_qrcode == 1) {
  469. this.showconcern = true
  470. }
  471. }
  472. }
  473. }
  474. })
  475. },
  476. concernclose() {
  477. this.showconcern = false
  478. },
  479. getsubsection(e) {
  480. this.showmj = e.index == 1 ? true : false
  481. this.current = e.index
  482. this.modelsid = 0
  483. if (e.index == 1) {
  484. this.form.samples = 4
  485. this.engine = 'mj'
  486. this.modelslist = []
  487. this.getModels();
  488. } else {
  489. this.form.samples = 1
  490. this.engine = 'sd'
  491. this.modelslist = []
  492. this.getModels();
  493. }
  494. this.initWords()
  495. },
  496. async getGpt() {
  497. if (!this.isLogin) {
  498. uni.navigateTo({
  499. url: '/pages/user/signin'
  500. });
  501. uni.setStorageSync('route', '/pages/painting/draw');
  502. return;
  503. }
  504. if (!this.gpt_keywords) {
  505. uni.showToast({
  506. title: '请填写描述词',
  507. icon: 'none'
  508. });
  509. return;
  510. }
  511. if (this.userData.coin == 0) {
  512. var alias = this.appInfo.number_alias ? this.appInfo.number_alias : '点数';
  513. this.signTitle =
  514. "<p style='font-weight: 550;font-size: 16px;'>灵感一现需要<span style='color: #26b3a0;padding: 0 4px;'>" +
  515. 1 + "</span><span>" + alias +
  516. "</span></p><p style='padding-top: 10px;'>您当前有<span style='color: #26b3a0;padding: 0 4px;'>" +
  517. this.userData.coin + "</span><span>" + alias + "</span>,不支持会员时长,无法生成,快去获取<span>" + alias +
  518. "</span>吧</p>"
  519. this.signShow = true
  520. return;
  521. }
  522. uni.showLoading({
  523. title: '内容审核中...'
  524. })
  525. // #ifdef H5
  526. let check = this.appInfo.is_h5_filter && this.appInfo.is_h5_filter == 1 ? await this.getcheckText(this
  527. .gpt_keywords) :
  528. 1;
  529. // #endif
  530. // #ifdef MP-WEIXIN
  531. let check = await this.getcheckText(this.gpt_keywords);
  532. // #endif
  533. if (check == 1) {
  534. uni.showLoading({
  535. title: '咒语生成中...'
  536. })
  537. this.$http('gallery.chat', {
  538. prompt: this.gpt_keywords
  539. }).then(res => {
  540. if (res.code == 0) {
  541. this.gpt_text = res.data;
  542. uni.hideLoading();
  543. } else {
  544. uni.hideLoading();
  545. uni.showToast({
  546. title: '使用咒语失败,请尝试重试',
  547. icon: 'none'
  548. });
  549. }
  550. });
  551. }
  552. },
  553. setGpt() {
  554. // console.log(this.gpt_text.indexOf("英文:"));
  555. if (this.gpt_text.indexOf("英文:") != -1) {
  556. let index = this.gpt_text.indexOf("英文:");
  557. let text = this.gpt_text.substring(index + 3);
  558. // console.log(text);
  559. this.keywords = text
  560. this.cursor = this.keywords.length
  561. // console.log(this.keywords.length);
  562. } else {
  563. let text = this.gpt_text;
  564. this.keywords = text
  565. this.cursor = this.keywords.length
  566. }
  567. this.show_gpt = false
  568. },
  569. textareainput(e) {
  570. // console.log(e.detail.cursor);
  571. this.cursor = e.detail.cursor
  572. },
  573. sectionChange(index) {
  574. this.curNow = index;
  575. },
  576. gallery() {
  577. let that = this;
  578. this.$http('gallery.getWords').then(res => {
  579. if (res.code == 0) {
  580. this.gallerylist = res.data
  581. }
  582. });
  583. },
  584. getModels() {
  585. let that = this;
  586. this.$http('gallery.getModels', {
  587. engine: that.engine
  588. }).then(res => {
  589. if (res.code == 0) {
  590. uni.setNavigationBarTitle({
  591. title: this.appInfo.site_name
  592. });
  593. this.modelslist = res.data
  594. this.form.model_id = this.modelslist[this.modelsid].model_id.toString()
  595. this.form.name = this.modelslist[this.modelsid].name
  596. // this.needCoin = this.modelslist[this.modelsid].coin
  597. this.xzmodels = this.modelslist[this.modelsid].name
  598. // console.log(this.modelslist);
  599. if (this.$Route.query.model_name) {
  600. for (var ty = 0; ty < this.modelslist.length; ty++) {
  601. if (this.$Route.query.model_name == this.modelslist[ty].name) {
  602. // console.log(ty);
  603. this.modelsid = ty
  604. this.form.model_id = this.modelslist[ty].model_id.toString()
  605. // this.needCoin = this.modelslist[ty].coin
  606. this.xzmodels = this.modelslist[ty].name
  607. this.form.name = this.modelslist[ty].name
  608. }
  609. }
  610. }
  611. }
  612. });
  613. },
  614. tapgallery(e) {
  615. // console.log(this.gallerylist[e].guide.slice(0,500));
  616. this.keywords = this.gallerylist[e].guide.slice(0, 500)
  617. this.galleryid = this.gallerylist[e].id
  618. this.cursor = this.keywords.length
  619. },
  620. changepolish() {
  621. // console.log(e);
  622. uni.showLoading({
  623. title: '描述增幅中...'
  624. })
  625. this.$http('gallery.chat', {
  626. prompt: this.keywords
  627. }).then(res => {
  628. if (res.code == 0) {
  629. // this.increaseswitch = e
  630. // this.increase = res.data
  631. this.keywords = res.data
  632. }
  633. });
  634. // if(e){
  635. // if(this.increase){
  636. // this.keywords = this.increase
  637. // return;
  638. // }
  639. // this.increaseswitch = false
  640. // uni.showLoading({
  641. // title:'描述增幅中...'
  642. // })
  643. // this.noincrease = this.keywords
  644. // this.$http('gallery.chat', {prompt:this.keywords}).then(res => {
  645. // if (res.code == 0) {
  646. // this.increaseswitch = e
  647. // this.increase = res.data
  648. // this.keywords = res.data
  649. // }
  650. // });
  651. // return;
  652. // }
  653. // this.keywords = this.noincrease
  654. },
  655. getincrease() {
  656. var that = this;
  657. if (!this.keywords) {
  658. uni.showToast({
  659. title: '请输入描述',
  660. icon: 'none'
  661. })
  662. return;
  663. }
  664. uni.showModal({
  665. confirmText: '立即增幅',
  666. // showCancel:false,
  667. confirmColor: '#26B3A0',
  668. content: '如果你正在寻找灵感,或懒得输入描述词,开启描述增幅GTP模型将自动根据你的输入的描述词为你补充描述词',
  669. title: '提示',
  670. success(res) {
  671. if (res.confirm) {
  672. that.changepolish()
  673. }
  674. }
  675. });
  676. },
  677. // loadmores() {
  678. // for (let i = 0; i < 30; i++) {
  679. // this.indexList.push({
  680. // url: this.urls[uni.$u.random(0, this.urls.length - 1)]
  681. // });
  682. // }
  683. // },
  684. getPlan() {
  685. this.$http('conf.getGroupConf', {
  686. group: 'system.plan'
  687. }).then(res => {
  688. if (res.code == 0) {
  689. this.plan = res.data;
  690. uni.setNavigationBarTitle({
  691. title: this.appInfo.site_name
  692. });
  693. // console.log(this.plan);
  694. }
  695. });
  696. },
  697. initWords() {
  698. this.gallerylist = uni.$u.randomArray(this.gallerylist)
  699. },
  700. ratio(e) {
  701. this.ratioIndex = e;
  702. },
  703. onExtend(e) {
  704. if (e == 0) {
  705. this.form.enable_face_enhance = !this.enable_face_enhance;
  706. } else {
  707. this.form.is_last_layer_skip = !this.is_last_layer_skip;
  708. }
  709. },
  710. onWords(e) {
  711. this.keywords = this.keywords ? this.keywords + ',' + e : e;
  712. },
  713. // 点击生成按钮
  714. async createClick() {
  715. var that = this;
  716. // 判断用户是否登录
  717. if (!this.isLogin) {
  718. uni.navigateTo({
  719. url: '/pages/user/signin'
  720. });
  721. uni.setStorageSync('route', '/pages/painting/draw');
  722. return;
  723. }
  724. if (that.appInfo.time_member && that.appInfo.time_member == 1) {
  725. if (that.showmj) {
  726. if (that.userData.vip_info && that.userData.is_validity > 0 && that.userData.vip_info
  727. .mj_used ==
  728. that.userData.vip_info.mj_times && this.userData.coin < this.plan.unlock_mj_aipainting) {
  729. var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
  730. // this.signTitle = "<p style='font-weight: 550;font-size: 16px;'>您的绘画<span>" + alias +
  731. // "</span>不足或会员套餐内剩余绘画次数不足,无法生成绘画</p>"
  732. this.signTitle =
  733. "<p style='font-weight: 550;font-size: 16px;'>绘画需要<span style='color: #26b3a0;padding: 0 4px;'>" +
  734. that.plan.unlock_mj_aipainting + "</span><span>" + alias +
  735. "</span></p><p style='padding-top: 10px;'>您的绘画<span>" + alias +
  736. "</span>不足或会员套餐内剩余次数不足,无法生成绘画</p>"
  737. this.signShow = true
  738. return;
  739. }
  740. if (that.userData.is_validity == 0 && this.userData.coin < this.plan.unlock_mj_aipainting) {
  741. // 用户绘制没Mjai币不足
  742. console.log('999999999999999999999999999-2');
  743. var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
  744. this.signTitle =
  745. "<p style='font-weight: 550;font-size: 16px;'>绘画需要<span style='color: #26b3a0;padding: 0 4px;'>" +
  746. that.plan.unlock_mj_aipainting + "</span><span>" + alias +
  747. "</span></p><p style='padding-top: 10px;'>您的绘画<span>" + alias +
  748. "</span>不足或会员套餐内剩余次数不足,无法生成绘画</p>"
  749. this.signShow = true
  750. return;
  751. }
  752. } else {
  753. // 消耗Ai币
  754. // 验证是否符合生成条件
  755. if (that.userData.vip_info && that.userData.is_validity > 0 && that.userData.vip_info
  756. .sd_used == that.userData.vip_info
  757. .sd_times && this.userData.coin < (this.plan.unlock_aipainting * this.form.samples)) {
  758. var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
  759. // this.signTitle = "<p style='font-weight: 550;font-size: 16px;'>您的绘画<span>" + alias +
  760. // "</span>不足或会员套餐内剩余次数不足,无法生成绘画</p>"
  761. this.signTitle =
  762. "<p style='font-weight: 550;font-size: 16px;'>绘画需要<span style='color: #26b3a0;padding: 0 4px;'>" +
  763. (this.plan.unlock_aipainting * this.form.samples) + "</span><span>" + alias +
  764. "</span></p><p style='padding-top: 10px;'>您的绘画<span>" + alias +
  765. "</span>不足或会员套餐内剩余次数不足,无法生成绘画</p>"
  766. this.signShow = true
  767. return;
  768. }
  769. if (that.userData.is_validity == 0 && this.userData.coin < (this.plan.unlock_aipainting * this
  770. .form.samples)) {
  771. var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
  772. this.signTitle =
  773. "<p style='font-weight: 550;font-size: 16px;'>绘画需要<span style='color: #26b3a0;padding: 0 4px;'>" +
  774. (this.plan.unlock_aipainting * this.form.samples) + "</span><span>" + alias +
  775. "</span></p><p style='padding-top: 10px;'>您的绘画<span>" + alias +
  776. "</span>不足或会员套餐内剩余次数不足,无法生成绘画</p>"
  777. this.signShow = true
  778. return;
  779. }
  780. }
  781. } else {
  782. if (that.showmj && this.userData.coin < this.plan.unlock_mj_aipainting) {
  783. var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
  784. this.signTitle =
  785. "<p style='font-weight: 550;font-size: 16px;'>mj绘画需要<span style='color: #26b3a0;padding: 0 4px;'>" +
  786. this.plan.unlock_mj_aipainting + "</span><span>" + alias +
  787. "</span></p><p style='padding-top: 10px;'>您当前有<span style='color: #26b3a0;padding: 0 4px;'>" +
  788. this.userData.coin + "</span><span>" + alias + "</span>,无法生成绘画,快去获取<span>" + alias +
  789. "</span>吧</p>"
  790. this.signShow = true
  791. return;
  792. }
  793. if (!that.showmj && this.userData.coin < (this.plan.unlock_aipainting * this.form.samples)) {
  794. var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
  795. this.signTitle =
  796. "<p style='font-weight: 550;font-size: 16px;'>sd绘画需要<span style='color: #26b3a0;padding: 0 4px;'>" +
  797. this.plan.unlock_aipainting * this.form.samples + "</span><span>" + alias +
  798. "</span></p><p style='padding-top: 10px;'>您当前有<span style='color: #26b3a0;padding: 0 4px;'>" +
  799. this.userData.coin + "</span><span>" + alias + "</span>,无法生成绘画,快去获取<span>" + alias +
  800. "</span>吧</p>"
  801. this.signShow = true
  802. return;
  803. }
  804. }
  805. // if(that.showmj){
  806. // if(this.userData.coin < this.plan.unlock_mj_aipainting){
  807. // var alias = this.appInfo.number_alias ? this.appInfo.number_alias : '点数';
  808. // this.signTitle = "<p style='font-weight: 550;font-size: 16px;'>绘画需要<span style='color: #26b3a0;padding: 0 4px;'>"+this.plan.unlock_mj_aipainting+"</span><span>"+alias+"</span></p><p style='padding-top: 10px;'>您当前有<span style='color: #26b3a0;padding: 0 4px;'>"+this.userData.coin+"</span><span>"+alias+"</span>,不支持会员时长,无法生成绘画,快去获取<span>"+alias+"</span>吧</p>"
  809. // this.signShow = true
  810. // return;
  811. // }
  812. // }else{
  813. // if(this.userData.coin < (this.plan.unlock_aipainting*this.form.samples)){
  814. // var alias = this.appInfo.number_alias ? this.appInfo.number_alias : '点数';
  815. // this.signTitle = "<p style='font-weight: 550;font-size: 16px;'>绘画需要<span style='color: #26b3a0;padding: 0 4px;'>"+this.plan.unlock_aipainting*this.form.samples+"</span><span>"+alias+"</span></p><p style='padding-top: 10px;'>您当前有<span style='color: #26b3a0;padding: 0 4px;'>"+this.userData.coin+"</span><span>"+alias+"</span>,不支持会员时长,无法生成绘画,快去获取<span>"+alias+"</span>吧</p>"
  816. // this.signShow = true
  817. // return;
  818. // }
  819. // }
  820. if (!this.keywords) {
  821. uni.showToast({
  822. title: '请输入画面描述词',
  823. icon: 'none'
  824. });
  825. return;
  826. }
  827. // console.log(this.form);
  828. if (!this.form.model_id) {
  829. uni.showToast({
  830. title: '请选择绘图模型',
  831. icon: 'none'
  832. });
  833. return;
  834. }
  835. // else if (this.userInfo.coin < 100) {
  836. // var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
  837. // uni.showModal({
  838. // confirmText: '立即获取',
  839. // confirmColor: '#26B3A0',
  840. // content: '您的' + alias + '不足,当前绘画需要'+ that.plan.lock_aipainting+alias+',暂不支持会员时长。',
  841. // title: '提示',
  842. // success(res) {
  843. // if (res.confirm) {
  844. // uni.navigateTo({
  845. // url: '/pages/user/member/member'
  846. // });
  847. // }
  848. // }
  849. // });
  850. // return;
  851. // this.showcoin = true;
  852. // return;
  853. // }
  854. else {
  855. // this.gallerychat()
  856. uni.showLoading({
  857. title: '内容审核中...'
  858. })
  859. // #ifdef H5
  860. let check = this.appInfo.is_h5_filter && this.appInfo.is_h5_filter == 1 ? await this.getcheckText(
  861. this.keywords) :
  862. 1;
  863. // #endif
  864. // #ifdef MP-WEIXIN
  865. let check = await this.getcheckText(this.keywords);
  866. // #endif
  867. if (check == 1) {
  868. this.aiPlay(this.keywords);
  869. }
  870. }
  871. // uni.navigateTo({
  872. // url:'/pages/painting/generate'
  873. // })
  874. },
  875. getcheckText(e) {
  876. var that = this;
  877. return new Promise((resolve, reject) => {
  878. that.$http('ai.checkText', {
  879. prompt: e
  880. }).then(res => {
  881. if (res.code == 0) {
  882. resolve(1);
  883. }
  884. })
  885. });
  886. },
  887. gallerychat() {
  888. uni.showLoading({
  889. title: '润色中...'
  890. })
  891. this.$http('gallery.chat', {
  892. prompt: this.keywords
  893. }).then(res => {
  894. if (res.code == 0) {
  895. this.aiPlay(res.data);
  896. }
  897. });
  898. },
  899. aiPlay(e) {
  900. let that = this;
  901. that.form.prompt = e;
  902. switch (this.ratioIndex) {
  903. case 0:
  904. that.form.width = '512';
  905. that.form.height = '512';
  906. that.proportion = '';
  907. break;
  908. case 1:
  909. that.form.width = '512';
  910. that.form.height = '768';
  911. that.proportion = ' --ar 3:4';
  912. break;
  913. case 2:
  914. that.form.width = '768';
  915. that.form.height = '512';
  916. that.proportion = ' --ar 4:3';
  917. break;
  918. case 3:
  919. that.form.width = '512';
  920. that.form.height = '1024';
  921. that.proportion = ' --ar 9:16';
  922. break;
  923. case 4:
  924. that.form.width = '1024';
  925. that.form.height = '512';
  926. that.proportion = ' --ar 16:9';
  927. break;
  928. }
  929. if (that.refer_img) {
  930. that.form.init_image = that.refer_img;
  931. that.form.type = 'img2img';
  932. } else {
  933. that.form.type = 'text2img';
  934. }
  935. // console.log(that.form);
  936. uni.navigateTo({
  937. url: that.showmj ? '/pages/painting/generate?prompt=' + ((that.refer_img ? that.refer_img +
  938. ' ' : '') + that.form.prompt + (that.proportion ? that.proportion : '')) +
  939. '&model_id=' + (that.modelslist.length > 0 ? this.form.model_id : '') + '&version=' + (that
  940. .modelslist.length > 0 ? that.modelslist[this.modelsid].version : '-- v5') +
  941. '&needCoin=' + that.plan.unlock_mj_aipainting : '/pages/painting/details?form=' + JSON
  942. .stringify(this.form)
  943. });
  944. // this.$http('gallery.create', this.form).then(res => {
  945. // if (res.code == 0) {
  946. // if(res.data.output.length > 0){
  947. // uni.navigateTo({
  948. // url: '/pages/painting/details?url=' + res.data.output
  949. // });
  950. // }else{
  951. // uni.showToast({
  952. // title:'生成失败',
  953. // icon:'error'
  954. // })
  955. // }
  956. // uni.hideLoading();
  957. // }
  958. // });
  959. },
  960. close_blur_view() {
  961. this.showcoin = false;
  962. },
  963. toMember() {
  964. uni.navigateTo({
  965. url: '/pages/member/member'
  966. });
  967. },
  968. toWelfare() {
  969. uni.switchTab({
  970. url: '/pages/welfare/welfare'
  971. });
  972. },
  973. showVideoAd() {
  974. if (rewardedVideoAd) {
  975. uni.showToast({
  976. title: '广告拉取中',
  977. icon: 'none'
  978. });
  979. rewardedVideoAd.show().catch(() => {
  980. // 失败重试
  981. rewardedVideoAd
  982. .load()
  983. .then(() => rewardedVideoAd.show())
  984. .catch(err => {
  985. console.log('激励视频 广告显示失败');
  986. uni.showToast({
  987. title: '广告显示失败',
  988. icon: 'none'
  989. });
  990. });
  991. });
  992. }
  993. },
  994. memberAddCoin() {
  995. this.$http('member.addCoin', {
  996. type: 'video'
  997. }).then(res => {
  998. if (res.code == 0) {
  999. uni.showToast({
  1000. title: '获得积分+' + res.data
  1001. });
  1002. // let coin = {coin: this.userData.coin+1}
  1003. // that.$store.commit('userData',coin)
  1004. this.getUserInfo();
  1005. } else {
  1006. uni.showToast({
  1007. title: '获得积分失败',
  1008. icon: 'none'
  1009. });
  1010. }
  1011. });
  1012. },
  1013. uploadImg(engineid) {
  1014. let that = this;
  1015. uni.chooseImage({
  1016. count: 1, //count: 6, //默认9
  1017. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  1018. sourceType: ['album'], //从相册选择
  1019. success: function(res) {
  1020. const path = res.tempFilePaths[0];
  1021. uni.uploadFile({
  1022. url: apiurl('common/upload'),
  1023. filePath: path,
  1024. // name: 'img',
  1025. // formData: {
  1026. // platform: $platform.get(),
  1027. // accept: 'image'
  1028. // },
  1029. name: 'file',
  1030. formData: {
  1031. accept: 'image'
  1032. },
  1033. success: res2 => {
  1034. let a = JSON.parse(res2.data);
  1035. if (a.code == 0) {
  1036. // if (engineid == 0) {
  1037. // that.cos_img = a.data.path;
  1038. // that.cos_id = a.data.id;
  1039. // } else {
  1040. that.refer_img = a.data.path;
  1041. that.refer_id = a.data.id;
  1042. // }
  1043. } else {
  1044. uni.showToast({
  1045. title: '上传图片失败',
  1046. icon: 'none'
  1047. });
  1048. }
  1049. }
  1050. });
  1051. }
  1052. });
  1053. },
  1054. preViewImg(img) {
  1055. uni.previewImage({
  1056. urls: [img],
  1057. longPressActions: {
  1058. itemList: ['发送给朋友', '保存图片', '收藏'],
  1059. success: function(data) {},
  1060. fail: function(err) {
  1061. console.log(err.errMsg);
  1062. }
  1063. }
  1064. });
  1065. },
  1066. deleteImg() {
  1067. // if (engineid == 0) {
  1068. // this.cos_img = '';
  1069. // this.cos_id = 0;
  1070. // } else {
  1071. this.refer_img = '';
  1072. // this.refer_id = 0;
  1073. // }
  1074. },
  1075. open() {
  1076. // console.log('open');
  1077. },
  1078. }
  1079. };
  1080. </script>
  1081. <style lang="scss">
  1082. .bg {
  1083. position: fixed;
  1084. top: 0;
  1085. width: 100%;
  1086. height: 100%;
  1087. // background: linear-gradient(-45deg, #1a1a1a, #262626, #0d0d0d);
  1088. z-index: -1;
  1089. }
  1090. @-webkit-keyframes Btn1 {
  1091. 0% {
  1092. background-position: 0 50%;
  1093. }
  1094. 50% {
  1095. background-position: 100% 50%;
  1096. }
  1097. 100% {
  1098. background-position: 0 50%;
  1099. }
  1100. }
  1101. @keyframes Btn1 {
  1102. 0% {
  1103. background-position: 0 50%;
  1104. }
  1105. 50% {
  1106. background-position: 100% 50%;
  1107. }
  1108. 100% {
  1109. background-position: 0 50%;
  1110. }
  1111. }
  1112. @-webkit-keyframes Btn1_ {
  1113. 0% {
  1114. transform: translateX(-100%);
  1115. }
  1116. 100% {
  1117. transform: translateX(0);
  1118. }
  1119. }
  1120. @keyframes Btn1_ {
  1121. 0% {
  1122. transform: translateX(-100%);
  1123. }
  1124. 100% {
  1125. transform: translateX(0);
  1126. }
  1127. }
  1128. .Btn1::before {
  1129. // animation: Btn1__1 0.4s linear 0.4s infinite;
  1130. background: #fff;
  1131. border-radius: 100rpx;
  1132. content: '';
  1133. height: 100rpx;
  1134. left: calc(50% - 50rpx);
  1135. opacity: 0;
  1136. position: absolute;
  1137. top: calc(50% - 50rpx);
  1138. width: 100rpx;
  1139. }
  1140. @-webkit-keyframes Btn1__1 {
  1141. 0% {
  1142. opacity: 0.7;
  1143. transform: scale(0);
  1144. }
  1145. 100% {
  1146. opacity: 0;
  1147. transform: scale(2);
  1148. }
  1149. }
  1150. @keyframes Btn1__1 {
  1151. 0% {
  1152. opacity: 0.7;
  1153. transform: scale(0);
  1154. }
  1155. 100% {
  1156. opacity: 0;
  1157. transform: scale(2);
  1158. }
  1159. }
  1160. .Btn1::after {
  1161. // animation: Btn1__2 0.8s linear 0.4s infinite;
  1162. background: #fff;
  1163. border-radius: 100rpx;
  1164. content: '';
  1165. height: 100rpx;
  1166. left: calc(50% - 50rpx);
  1167. opacity: 0;
  1168. position: absolute;
  1169. top: calc(50% - 50rpx);
  1170. width: 100rpx;
  1171. }
  1172. @-webkit-keyframes Btn1__2 {
  1173. 0% {
  1174. opacity: 0.7;
  1175. transform: scale(0);
  1176. }
  1177. 100% {
  1178. opacity: 0;
  1179. transform: scale(2.5);
  1180. }
  1181. }
  1182. @keyframes Btn1__2 {
  1183. 0% {
  1184. opacity: 0.7;
  1185. transform: scale(0);
  1186. }
  1187. 100% {
  1188. opacity: 0;
  1189. transform: scale(2.5);
  1190. }
  1191. }
  1192. .Btn1 text {
  1193. line-height: 38rpx;
  1194. text-align: center;
  1195. }
  1196. .Btn1 image {
  1197. animation: Btn1_image 0.8s linear infinite alternate;
  1198. left: 30rpx;
  1199. position: absolute;
  1200. top: -30rpx;
  1201. }
  1202. @-webkit-keyframes Btn1_image {
  1203. 0% {
  1204. transform: rotate(0);
  1205. }
  1206. 100% {
  1207. transform: rotate(18deg);
  1208. }
  1209. }
  1210. @keyframes Btn1_image {
  1211. 0% {
  1212. transform: rotate(0);
  1213. }
  1214. 100% {
  1215. transform: rotate(18deg);
  1216. }
  1217. }
  1218. .cu-form-group {
  1219. padding: 16rpx 0;
  1220. .cu-title {
  1221. margin-bottom: 4rpx;
  1222. .title {
  1223. text-align: justify;
  1224. padding-right: 30rpx;
  1225. font-size: 30rpx;
  1226. position: relative;
  1227. height: 60rpx;
  1228. line-height: 60rpx;
  1229. min-width: calc(5em + 15px);
  1230. font-weight: bold;
  1231. color: #000;
  1232. // view {
  1233. // color: red;
  1234. // }
  1235. // .shu {
  1236. // background: #fff;
  1237. // width: 5px;
  1238. // height: 38rpx;
  1239. // margin-right: 20rpx;
  1240. // }
  1241. }
  1242. .cu-empty {
  1243. .empty {
  1244. margin-right: 8rpx;
  1245. font-size: 26rpx;
  1246. color: #fff;
  1247. z-index: 9;
  1248. }
  1249. }
  1250. }
  1251. .engine-container {
  1252. background-color: #f1f1f1;
  1253. padding: 20rpx;
  1254. border-radius: 22rpx;
  1255. display: flex;
  1256. justify-content: space-between;
  1257. margin-top: 16rpx;
  1258. .model_view {
  1259. color: #9e9e9e;
  1260. }
  1261. }
  1262. .textarea-container {
  1263. // padding: 30rpx;
  1264. background: #f1f1f1;
  1265. border-radius: 18rpx;
  1266. // textarea {
  1267. // width: 100%;
  1268. // height: 100rpx;
  1269. // font-size: 28rpx;
  1270. // color: #303133db;
  1271. // }
  1272. .textarea {
  1273. background-color: #f1f1f1;
  1274. width: 100%;
  1275. height: 260rpx;
  1276. padding: 20rpx;
  1277. border-radius: 18rpx;
  1278. margin-top: 16rpx;
  1279. color: #9e9e9e;
  1280. }
  1281. .textareaoperate {
  1282. padding: 0 30rpx 22rpx;
  1283. .increase {
  1284. // background: #ffa726;
  1285. color: #fff;
  1286. padding: 6px 16px;
  1287. font-size: 14px;
  1288. border-radius: 20px;
  1289. }
  1290. view {
  1291. font-size: 32rpx;
  1292. // margin-right: 30rpx;
  1293. }
  1294. }
  1295. .trash {
  1296. width: 100%;
  1297. justify-content: flex-end;
  1298. }
  1299. }
  1300. .scrollview {
  1301. white-space: nowrap;
  1302. margin-top: 16rpx;
  1303. .scrollitems {
  1304. display: inline-block;
  1305. background: #f3f3f3;
  1306. text-align: center;
  1307. padding: 12rpx 32rpx;
  1308. margin-right: 30rpx;
  1309. border-radius: 6rpx;
  1310. font-size: 26rpx;
  1311. }
  1312. .scrollitems.active {
  1313. background: #6f2fdb;
  1314. color: #fff;
  1315. }
  1316. }
  1317. .scrollstyle {
  1318. display: inline-block;
  1319. position: relative;
  1320. width: 200rpx;
  1321. height: 140rpx;
  1322. margin-right: 30rpx;
  1323. image {
  1324. width: 200rpx;
  1325. height: 140rpx;
  1326. border-style: solid;
  1327. border-color: #ffca28;
  1328. border-width: 8rpx;
  1329. }
  1330. view {
  1331. position: absolute;
  1332. bottom: 8rpx;
  1333. width: 184rpx;
  1334. text-align: center;
  1335. color: #fff;
  1336. background: #000000a8;
  1337. font-size: 24rpx;
  1338. margin-left: 8rpx;
  1339. }
  1340. }
  1341. .proportion {
  1342. // margin-left: 30rpx;
  1343. display: flex;
  1344. margin-top: 16rpx;
  1345. .radio {
  1346. margin-right: 48rpx;
  1347. border-radius: 8rpx;
  1348. }
  1349. .describe {
  1350. font-size: 28rpx;
  1351. margin-top: 12rpx;
  1352. color: #9e9e9e;
  1353. }
  1354. }
  1355. .cu-proportion {
  1356. width: 100rpx;
  1357. height: 100rpx;
  1358. border-style: solid;
  1359. border-width: 4rpx;
  1360. border-radius: 10rpx;
  1361. border-color: #d9d9d9;
  1362. .proportion1 {
  1363. width: 72rpx;
  1364. height: 72rpx;
  1365. background: #d9d9d9;
  1366. border-radius: 10rpx;
  1367. }
  1368. .proportion2 {
  1369. width: 45rpx;
  1370. height: 72rpx;
  1371. border-radius: 4rpx;
  1372. background: #d9d9d9;
  1373. border-radius: 10rpx;
  1374. }
  1375. .proportion3 {
  1376. width: 72rpx;
  1377. height: 45rpx;
  1378. border-radius: 4rpx;
  1379. background: #d9d9d9;
  1380. border-radius: 10rpx;
  1381. }
  1382. }
  1383. .radio.active {
  1384. color: #26b3a0;
  1385. .cu-proportion {
  1386. border-color: #26b3a0;
  1387. }
  1388. .cu-proportion view {
  1389. background: #26b3a0;
  1390. }
  1391. }
  1392. .cu-upload {
  1393. width: 100%;
  1394. height: 260rpx;
  1395. background: #f1f1f1;
  1396. border-radius: 20rpx;
  1397. // border-style: double;
  1398. border-color: #d3d4d6;
  1399. position: relative;
  1400. .upload-img {
  1401. width: 100%;
  1402. height: 100%;
  1403. border-radius: 20rpx;
  1404. }
  1405. .upload-delete {
  1406. position: absolute;
  1407. right: 8rpx;
  1408. top: 8rpx;
  1409. color: #26b3a0;
  1410. }
  1411. .upload {
  1412. margin-top: 12rpx;
  1413. color: #9e9e9e;
  1414. }
  1415. }
  1416. .tn-slider__custom-block {
  1417. background-color: #fff;
  1418. width: auto;
  1419. height: 40rpx;
  1420. line-height: 40rpx;
  1421. padding: 0 5rpx;
  1422. border-radius: 50%;
  1423. text-align: center;
  1424. color: #ffffff;
  1425. }
  1426. }
  1427. .bnt {
  1428. font-size: 32rpx;
  1429. font-weight: bold;
  1430. color: #fff;
  1431. width: 690rpx;
  1432. height: 100rpx;
  1433. text-align: center;
  1434. border-radius: 100rpx;
  1435. line-height: 100rpx;
  1436. margin: 64rpx auto 15rpx;
  1437. background: #fff;
  1438. }
  1439. .buttonhover {
  1440. background: #fff;
  1441. opacity: 0.7;
  1442. }
  1443. /* 底部安全边距 start*/
  1444. .tn-tabbar-height {
  1445. min-height: 120rpx;
  1446. height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  1447. height: calc(140rpx + constant(safe-area-inset-bottom));
  1448. }
  1449. .try-tips {
  1450. // padding: 0 16rpx;
  1451. display: flex;
  1452. align-items: center;
  1453. justify-content: space-between;
  1454. margin-top: 20rpx;
  1455. // color: #d9d9d9;
  1456. .change {
  1457. display: flex;
  1458. align-items: center;
  1459. &-text {
  1460. margin-left: 6rpx;
  1461. }
  1462. }
  1463. }
  1464. .polish {
  1465. margin-top: 20rpx;
  1466. view {
  1467. font-size: 30rpx;
  1468. font-weight: bold;
  1469. color: #000;
  1470. // margin-right: 30rpx;
  1471. }
  1472. }
  1473. .words-ocntainer {
  1474. padding: 0 16rpx;
  1475. .sentences {
  1476. display: flex;
  1477. flex-wrap: wrap;
  1478. .item {
  1479. padding: 8rpx 16rpx;
  1480. margin-bottom: 10rpx;
  1481. background: #333333;
  1482. color: #8f8f8f;
  1483. font-size: 14px;
  1484. border-radius: 10rpx;
  1485. font-size: 13px;
  1486. }
  1487. }
  1488. .tags {
  1489. display: flex;
  1490. flex-wrap: wrap;
  1491. .item {
  1492. padding: 8rpx 16rpx;
  1493. margin-bottom: 10rpx;
  1494. margin-right: 10rpx;
  1495. background: #333333;
  1496. color: #8f8f8f;
  1497. font-size: 14px;
  1498. border-radius: 10rpx;
  1499. font-size: 13px;
  1500. }
  1501. }
  1502. }
  1503. .desc-tips {
  1504. margin-bottom: 20rpx;
  1505. color: #d9d9d9;
  1506. font-size: 13px;
  1507. }
  1508. .footer {
  1509. margin-top: 80rpx;
  1510. // padding-bottom: 100rpx;
  1511. position: fixed;
  1512. bottom: 60rpx;
  1513. width: 92%;
  1514. z-index: 999;
  1515. border-radius: 20rpx;
  1516. .Btn1 {
  1517. // animation: Btn1 3s ease infinite alternate, Btn1_ 0.4s linear alternate;
  1518. // background: linear-gradient(60deg, #f79533, #f37055, #6f2fdb, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  1519. // background-size: 300% 300%;
  1520. // border: solid #fff;
  1521. // border-radius: 20rpx;
  1522. // border-width: 2rpx 2rpx 6rpx;
  1523. // box-shadow: 0rpx 20rpx 20rpx 0rpx rgba(162, 253, 197, 0.4);
  1524. border-radius: 20rpx;
  1525. background: linear-gradient(to right, #00ca88, #00BCD4);
  1526. color: #fff;
  1527. display: flex;
  1528. font-size: 30rpx;
  1529. font-weight: 600;
  1530. height: 80rpx;
  1531. justify-content: center;
  1532. align-items: center;
  1533. // width: 650rpx;
  1534. .create {
  1535. width: 100%;
  1536. display: flex;
  1537. align-items: center;
  1538. flex-direction: column;
  1539. }
  1540. }
  1541. }
  1542. .userAvatarUrl_view {
  1543. border-radius: 100rpx;
  1544. height: 80rpx;
  1545. margin-bottom: 15rpx;
  1546. overflow: hidden;
  1547. width: 80rpx;
  1548. }
  1549. .scroll-view {
  1550. white-space: nowrap;
  1551. width: 94%;
  1552. .scroll-item {
  1553. display: inline-block;
  1554. text-align: center;
  1555. margin-right: 10rpx;
  1556. padding: 10rpx 20rpx;
  1557. background-color: #f1f1f1;
  1558. height: 60rpx;
  1559. border-radius: 30rpx;
  1560. color: #26b3a0;
  1561. }
  1562. }
  1563. .directask {
  1564. padding: 14rpx 30rpx 250rpx;
  1565. }
  1566. .dygbhg {
  1567. background: #ffffff;
  1568. border-radius: 20rpx 20rpx 0 0;
  1569. position: fixed;
  1570. bottom: 0;
  1571. width: 100%;
  1572. box-shadow: 0px 0px 10px #00000024;
  1573. display: flex;
  1574. align-items: center;
  1575. justify-content: space-evenly;
  1576. z-index: 999;
  1577. }
  1578. .whole {
  1579. width: 30%;
  1580. height: 80rpx;
  1581. display: flex;
  1582. color: #ffffff;
  1583. align-items: center;
  1584. justify-content: center;
  1585. background: #d9d9d9;
  1586. // font-weight: bold;
  1587. border-radius: 60rpx;
  1588. }
  1589. .distinguish {
  1590. width: 56%;
  1591. height: 80rpx;
  1592. display: flex;
  1593. color: #ffffff;
  1594. align-items: center;
  1595. justify-content: center;
  1596. background: linear-gradient(to right, #00ca88, #00BCD4);
  1597. font-weight: bold;
  1598. border-radius: 60rpx;
  1599. margin: 38rpx 0;
  1600. margin-left: 4%;
  1601. }
  1602. .select {
  1603. font-weight: bold;
  1604. font-size: 32rpx;
  1605. margin: 30rpx;
  1606. }
  1607. .scroll_mode {
  1608. height: 1100rpx;
  1609. padding: 0rpx 30rpx 30rpx;
  1610. .card {
  1611. // border-radius: 8px;
  1612. width: 32%;
  1613. height: 12.5rem;
  1614. background: #f1f1f180;
  1615. margin-bottom: 20rpx;
  1616. border-style: solid;
  1617. border-color: #fff;
  1618. border-width: 3px;
  1619. // border: 3px solid transparent;
  1620. .card-info {
  1621. padding: .4375rem .375rem;
  1622. .card-info-title {
  1623. // color: #fff;
  1624. line-height: 1.5rem;
  1625. }
  1626. .card-info-desc {
  1627. font-size: 24rpx;
  1628. line-height: 1.25rem;
  1629. height: 40px;
  1630. color: #999;
  1631. display: -webkit-box;
  1632. -webkit-line-clamp: 2;
  1633. -webkit-box-orient: vertical;
  1634. overflow: hidden;
  1635. }
  1636. }
  1637. }
  1638. }
  1639. .generate {
  1640. margin-top: 8px;
  1641. .xz_generate {
  1642. width: 150rpx;
  1643. height: 90rpx;
  1644. background: #f1f1f1;
  1645. margin-right: 30rpx;
  1646. border-style: solid;
  1647. border-color: #f1f1f1;
  1648. border-width: 3px;
  1649. border-radius: 6px;
  1650. }
  1651. .xz_gactive {
  1652. width: 150rpx;
  1653. height: 90rpx;
  1654. background: #f1f1f1;
  1655. border-style: solid;
  1656. border-color: #26b3a0;
  1657. border-width: 3px;
  1658. border-radius: 6px;
  1659. }
  1660. }
  1661. .gpt-select {
  1662. padding: 30rpx;
  1663. .gpt-textarea-container {
  1664. margin-top: 20rpx;
  1665. }
  1666. .use-gpt {
  1667. margin-top: 30rpx;
  1668. }
  1669. }
  1670. </style>