user.vue 40 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433
  1. <template>
  2. <view>
  3. <view class="user" v-if="appInfo.page_template == 2 || appInfo.page_template == 1">
  4. <!-- 头部 -->
  5. <view class="user-wrap" style="">
  6. <view class="setting iconfont icon31shezhi"></view>
  7. <!-- <view v-if="isLogin" class="info">
  8. <image @click="modify" class="avatar" mode="aspectFill"
  9. :src="userInfo.avatar ? userInfo.avatar : '/static/images/head.jpg'"></image>
  10. <view class="nickname">
  11. <text
  12. @click="copyText(userInfo.id_number)">{{ userInfo.nickname ? userInfo.nickname : '默认用户'}}</text>
  13. <u-icon name="edit-pen" color="#18b566" size="20" @click="modify"></u-icon>
  14. </view>
  15. </view> -->
  16. <!-- <view class="info" @click="getlogin"> -->
  17. <view class="info" @click="getlogin" v-if="!hasLogin">
  18. <image class="avatar" mode="aspectFill" src="/static/images/head.jpg"></image>
  19. <view class="nickname">点击立即登录/注册</view>
  20. </view>
  21. <view class="info" @click="" v-else>
  22. <image class="avatar" mode="aspectFill" src="/static/images/head.jpg"></image>
  23. <view class="nickname1" style="align-items: center;">您已登录</view>
  24. </view>
  25. </view>
  26. <!-- 订单状态 -->
  27. <view class="order-status" v-if="false">
  28. <view class="status-wrap">
  29. <!-- 单元格 -->
  30. <view class="cell" style="background: #000000d4;height: 112rpx;">
  31. <view class="cell-left">
  32. <u-icon name="integral" color="#ffd465" size="24"></u-icon>
  33. <block v-if="appInfo.number_member">
  34. <block v-if="appInfo.number_member == 1">
  35. <view class="cell-text" style="color: #ffd465;font-size: 30rpx;font-weight: bold;">
  36. {{appInfo.number_alias?appInfo.number_alias+':':'点数:'}}{{ userData.coin ? userData.coin : 0 }}
  37. </view>
  38. </block>
  39. </block>
  40. <block v-else>
  41. <view class="cell-text" style="color: #ffd465;font-size: 30rpx;font-weight: bold;">
  42. {{appInfo.number_alias?appInfo.number_alias+':':'点数:'}}{{ userData.coin ? userData.coin : 0 }}
  43. </view>
  44. </block>
  45. <block v-if="appInfo.number_member">
  46. <view v-if="appInfo.time_member&&appInfo.number_member == 1&&appInfo.time_member == 1"
  47. class="cell-text" style="color: #ffd465;font-size: 30rpx;font-weight: bold;">|
  48. </view>
  49. </block>
  50. <block v-else>
  51. <view v-if="appInfo.time_member&&appInfo.time_member == 1" class="cell-text"
  52. style="color: #ffd465;font-size: 30rpx;font-weight: bold;">|</view>
  53. </block>
  54. <block v-if="appInfo.time_member && appInfo.time_member == 1">
  55. <view style="flex-direction: column;display: flex;">
  56. <view class="cell-text" style="color: #ffd465;font-size: 30rpx;font-weight: bold;">
  57. 会员套餐:{{ userData.is_validity == 1 ? (userData.vip_time == 9999?'永久':userData.countdown+'天') : '0天' }}
  58. </view>
  59. </view>
  60. </block>
  61. </view>
  62. <!-- #ifdef MP-WEIXIN -->
  63. <navigator v-if="device != 'ios'" class="b-btn"
  64. :url="isLogin ? '/pages/user/member/member' : '/pages/user/signin'" @click="getroute">立即充值
  65. </navigator>
  66. <navigator v-else-if="device == 'ios'&&show_ios_pay" class="b-btn"
  67. :url="isLogin ? '/pages/user/member/member' : '/pages/user/signin'" @click="getroute">立即充值
  68. </navigator>
  69. <!-- #endif -->
  70. <!-- #ifdef H5 -->
  71. <navigator class="b-btn" :url="isLogin ? '/pages/user/member/member' : '/pages/user/signin'"
  72. @click="getroute">立即充值</navigator>
  73. <!-- #endif -->
  74. </view>
  75. </view>
  76. </view>
  77. <!-- 滑动导航 -->
  78. <!-- <view style="border-radius: 20rpx; overflow: hidden; margin: 0 20rpx;">
  79. <com-nav :list="list" :col="4"></com-nav>
  80. </view> -->
  81. <view class="com-item">
  82. <view class="com-wrap">
  83. <!-- #ifdef MP-WEIXIN -->
  84. <view v-if="appInfo.wxad_user && appInfo.wxad_user >= 1">
  85. <wike-flow-main :flowtype="appInfo.wxad_user" :banner_id="appInfo.banner_id"
  86. :video_banner_id="appInfo.video_banner_id" :native_id="appInfo.native_id"></wike-flow-main>
  87. </view>
  88. <!-- #endif -->
  89. </view>
  90. </view>
  91. <view v-if="userData.vip_info&&userData.is_validity>0" class="com-item">
  92. <view class="com-wrap">
  93. <view class="cell" @click="packagedetails = true">
  94. <view class="cell-left">
  95. <u-icon name="bookmark-fill" color="#24f083" size="22"></u-icon>
  96. <view class="cell-text">我的会员套餐详情</view>
  97. </view>
  98. <u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  99. </view>
  100. </view>
  101. </view>
  102. <!-- 用户功能 -->
  103. <!-- <view class="com-item">
  104. <view class="com-wrap">
  105. <view class="cell" @click="showcarmi = true">
  106. <view class="cell-left">
  107. <u-icon name="coupon-fill" color="#e83a30" size="22"></u-icon>
  108. <view class="cell-text">卡密兑换</view>
  109. </view>
  110. <u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  111. </view>
  112. <navigator class="cell" v-for="(item, index) in userList" :key="index" :url="item.url"
  113. @click="getroute">
  114. <view class="cell-left">
  115. <u-icon :name="item.icon" :color="item.color" size="22"></u-icon>
  116. <view class="cell-text">{{ item.title }}</view>
  117. </view>
  118. <u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  119. </navigator>
  120. <navigator class="cell" :url="isLogin ? '/pages/user/member/record' : '/pages/user/signin'"
  121. @click="getroute">
  122. <view class="cell-left">
  123. <u-icon name="bookmark-fill" color="#892fe8" size="22"></u-icon>
  124. <view class="cell-text">{{appInfo.number_alias?appInfo.number_alias:'点数'}}/会员套餐记录</view>
  125. </view>
  126. <u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  127. </navigator>
  128. </view>
  129. </view> -->
  130. <!-- 用户服务 -->
  131. <view class="com-item">
  132. <view class="com-wrap">
  133. <view v-if="!hasLogin" class="cell" @click="getlogin">
  134. <view class="cell-left">
  135. <!-- <u-icon name="scan" color="#007aff" size="22"></u-icon> -->
  136. <view class="cell-text">立即登录</view>
  137. </view>
  138. <u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  139. </view>
  140. <view v-if="hasLogin" class="cell" @click="loginout">
  141. <view class="cell-left">
  142. <!-- <u-icon name="scan" color="#007aff" size="22"></u-icon> -->
  143. <view class="cell-text">退出登录</view>
  144. </view>
  145. <u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  146. </view>
  147. <!-- <view v-if="qrcode" class="cell" @click="getqrcode">
  148. <view class="cell-left">
  149. <u-icon name="scan" color="#007aff" size="22"></u-icon>
  150. <view class="cell-text">关注公众号</view>
  151. </view>
  152. <u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  153. </view> -->
  154. <!-- <view class="cell">
  155. <view class="cell-left">
  156. <u-icon name="minus-circle-fill" color="#26B3A0" size="22"></u-icon>
  157. <view class="cell-text">使用教程</view>
  158. </view>
  159. <u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  160. <button openType="contact" style="width: 85%; background-color: red; position: absolute; opacity: 0;height: 10%;"></button>
  161. </view> -->
  162. <navigator class="cell" v-for="(item, index) in serverList" :key="index" :url="item.path">
  163. <view class="cell-left">
  164. <!-- <image class="cell-icon" :src="item.icon" mode="aspectFill"></image> -->
  165. <u-icon :name="item.icon" :color="item.color" size="22"></u-icon>
  166. <view class="cell-text">{{ item.title }}</view>
  167. </view>
  168. <view v-if="item.text" class="iconmore1">{{item.text}}</view>
  169. <u-icon v-else name="arrow-right" color="#9e9e9e" size="18"></u-icon>
  170. </navigator>
  171. </view>
  172. </view>
  173. <view class="com-item"><wike-ad></wike-ad></view>
  174. </view>
  175. <block v-if="appInfo.page_template == 3">
  176. <view class="top-backgroup">
  177. <image src='https://tnuiimage.tnkjapp.com/my/my-bg4.png' mode='widthFix' class='backgroud-image'>
  178. </image>
  179. </view>
  180. <view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
  181. <!-- 图标logo/头像 -->
  182. <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom"
  183. style="margin-top: -450rpx;">
  184. <view class="justify-content-item">
  185. <view class="tn-flex tn-flex-col-center tn-flex-row-left">
  186. <view class="logo-pic tn-shadow">
  187. <view class="logo-image">
  188. <image class="avatar" mode="aspectFill"
  189. :src="userInfo.avatar ? userInfo.avatar : '/static/images/head.jpg'"></image>
  190. </view>
  191. </view>
  192. <view class="tn-padding-right">
  193. <view class="tn-padding-right tn-padding-left-sm">
  194. <text
  195. class="tn-color-cat tn-text-xl tn-text-bold">{{ userInfo.nickname ? userInfo.nickname : '默认用户'}}</text>
  196. <!-- <text class=" tn-round tn-text-xs tn-bg-red tn-color-white tn-margin-left-sm" style="padding: 10rpx 20rpx;" @click="tn('/minePages/realname')">
  197. 未实名
  198. </text> -->
  199. </view>
  200. <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
  201. <text class="tn-color-gray tn-padding-left-sm tn-text-sm">id编号
  202. {{userInfo.id_number}}</text>
  203. </view>
  204. </view>
  205. </view>
  206. </view>
  207. </view>
  208. <view class="tn-margin-top-xl">
  209. <view class="button-vip tn-flex tn-flex-row-between tn-flex-col-center tn-shadow-blur"
  210. style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">
  211. <view class="tn-margin-left">
  212. <view class='title u-flex' style="color: #F1C68E;">
  213. <!-- <text class="tn-text-bold tn-text-xl">{{appInfo.number_alias?appInfo.number_alias+':':'点数:'}}{{ userData.coin ? userData.coin : 0 }}</text> -->
  214. <block v-if="appInfo.number_member">
  215. <block v-if="appInfo.number_member == 1">
  216. <view class="tn-text-bold tn-text-xl">
  217. {{appInfo.number_alias?appInfo.number_alias+':':'点数:'}}{{ userData.coin ? userData.coin : 0 }}
  218. </view>
  219. </block>
  220. </block>
  221. <block v-else>
  222. <view class="tn-text-bold tn-text-xl">
  223. {{appInfo.number_alias?appInfo.number_alias+':':'点数:'}}{{ userData.coin ? userData.coin : 0 }}
  224. </view>
  225. </block>
  226. <block v-if="appInfo.number_member">
  227. <view
  228. v-if="appInfo.time_member&&appInfo.number_member == 1&&appInfo.time_member == 1"
  229. class="tn-text-bold tn-text-xl">|</view>
  230. </block>
  231. <block v-else>
  232. <view v-if="appInfo.time_member&&appInfo.time_member == 1"
  233. class="tn-text-bold tn-text-xl">|</view>
  234. </block>
  235. <block v-if="appInfo.time_member && appInfo.time_member == 1">
  236. <view class="tn-text-bold tn-text-xl">
  237. 会员套餐:{{ userData.is_validity == 1 ? (userData.vip_time == 9999?'永久':userData.countdown+'天') : '0天' }}
  238. </view>
  239. </block>
  240. <!-- <text class="tn-icon-vip-text tn-text-center" style="position: absolute;margin: -22rpx 0 0 0;font-size: 92rpx;"></text> -->
  241. </view>
  242. <view class='tn-color-white tn-text-sm tn-padding-top-sm'>邀请好友赚取更多积分</view>
  243. </view>
  244. <view class="tn-margin-right">
  245. <tn-button shape="round" backgroundColor="#F1C68E" fontColor="#634738" padding="10rpx 0"
  246. width="160rpx" shadow
  247. @click="jump(isLogin ? '/pages/user/member/member' : '/pages/user/signin')">
  248. <!-- <text class="tn-icon-vip tn-padding-right-sm tn-text-lg"></text> -->
  249. <text class="tn-text-bold">充值</text>
  250. </tn-button>
  251. </view>
  252. </view>
  253. </view>
  254. <!-- 方式12 start-->
  255. <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
  256. <view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
  257. <view class="tn-padding-sm tn-margin-xs tn-radius" @click="showcarmi = true">
  258. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
  259. <view
  260. class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
  261. <view class="tn-icon-cube tn-color-cat"></view>
  262. </view>
  263. <view class="tn-text-center">
  264. <text class="tn-text-ellipsis">卡密兑换</text>
  265. </view>
  266. </view>
  267. </view>
  268. <view class="tn-padding-sm tn-margin-xs tn-radius" @click="jump('/pages/user/commission/index')"
  269. v-if="is_commission==1">
  270. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
  271. <view
  272. class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
  273. <view class="tn-icon-signpost tn-color-cat"></view>
  274. </view>
  275. <view class="tn-text-center">
  276. <text class="tn-text-ellipsis">我的团队</text>
  277. </view>
  278. </view>
  279. </view>
  280. <view class="tn-padding-sm tn-margin-xs tn-radius" @click="jump('/pages/user/draw/draw')"
  281. v-if="appInfo.is_aipainting&&appInfo.is_aipainting == 1">
  282. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
  283. <view
  284. class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
  285. <view class="tn-icon-refund tn-color-cat"></view>
  286. </view>
  287. <view class="tn-text-center">
  288. <text class="tn-text-ellipsis">绘画记录</text>
  289. </view>
  290. </view>
  291. </view>
  292. <view class="tn-padding-sm tn-margin-xs tn-radius"
  293. @click="jump('/pages/user/takenotes/takenotes')">
  294. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
  295. <view
  296. class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
  297. <view class="tn-icon-constellation tn-color-cat"></view>
  298. </view>
  299. <view class="tn-text-center">
  300. <text class="tn-text-ellipsis">问答记录</text>
  301. </view>
  302. </view>
  303. </view>
  304. </view>
  305. <view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
  306. <view class="tn-padding-sm tn-margin-xs tn-radius" @click="jump('/pages/user/userinfo')">
  307. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
  308. <view
  309. class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
  310. <view class="tn-icon-order tn-color-cat"></view>
  311. </view>
  312. <view class="tn-text-center">
  313. <text class="tn-text-ellipsis">修改用户信息</text>
  314. </view>
  315. </view>
  316. </view>
  317. <view class="tn-padding-sm tn-margin-xs tn-radius" @click="jump('/pages/user/member/record')">
  318. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
  319. <view
  320. class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
  321. <view class="tn-icon-calendar tn-color-cat"></view>
  322. </view>
  323. <view class="tn-text-center">
  324. <text
  325. class="tn-text-ellipsis">{{appInfo.number_alias?appInfo.number_alias:'点数'}}/会员套餐记录</text>
  326. </view>
  327. </view>
  328. </view>
  329. </view>
  330. </view>
  331. </view>
  332. <view class="tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm" style="padding:30rpx">
  333. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="getqrcode">
  334. <view class="tn-flex tn-flex-col-center">
  335. <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
  336. style="color: #7C8191;">
  337. <view class="tn-icon-qr-code"></view>
  338. </view>
  339. <view class="tn-margin-left-sm tn-flex-1">关注公众号</view>
  340. <view class="tn-color-gray tn-icon-right"></view>
  341. </view>
  342. </tn-list-cell>
  343. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"
  344. @click="jump('/pages/user/orderrecord/orderrecord')">
  345. <view class="tn-flex tn-flex-col-center">
  346. <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
  347. style="color: #7C8191;">
  348. <view class="tn-icon-shopbag-fill"></view>
  349. </view>
  350. <view class="tn-margin-left-sm tn-flex-1">订单记录</view>
  351. <view class="tn-color-gray tn-icon-right"></view>
  352. </view>
  353. </tn-list-cell>
  354. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"
  355. @click="jump('/pages/user/public/kefu')">
  356. <view class="tn-flex tn-flex-col-center">
  357. <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
  358. style="color: #7C8191;">
  359. <view class="tn-icon-science-fill"></view>
  360. </view>
  361. <view class="tn-margin-left-sm tn-flex-1">客服中心</view>
  362. <view class="tn-color-gray tn-icon-right"></view>
  363. </view>
  364. </tn-list-cell>
  365. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"
  366. @click="jump('/pages/user/public/agreement?type=aboutus')">
  367. <view class="tn-flex tn-flex-col-center">
  368. <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
  369. style="color: #7C8191;">
  370. <view class="tn-icon-light-fill"></view>
  371. </view>
  372. <view class="tn-margin-left-sm tn-flex-1">关于我们</view>
  373. <view class="tn-color-gray tn-icon-right"></view>
  374. </view>
  375. </tn-list-cell>
  376. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
  377. <view class="tn-flex tn-flex-col-center">
  378. <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
  379. style="color: #7C8191;">
  380. <view class="tn-icon-expand"></view>
  381. </view>
  382. <view class="tn-margin-left-sm tn-flex-1">版本</view>
  383. <view>4.6.2</view>
  384. </view>
  385. </tn-list-cell>
  386. </view>
  387. </block>
  388. <u-popup :show="showcarmi" mode="center" :round="10" @close="showcarmi = false">
  389. <view class="carmimodal">
  390. <view class="carmiclose" @click="showcarmi = false"><u-icon name="close-circle-fill" color="#fff"
  391. size="22"></u-icon></view>
  392. <view class="carmititle">输入卡密兑换</view>
  393. <view class="carmiinput"><u--input placeholder="请输入卡密" border="surround" clearable
  394. v-model="carmi"></u--input></view>
  395. <view @click="exchange" class="carmiexchange">立即兑换</view>
  396. <view v-if="appInfo.kf_qrcode_path" class="kf_qrcode tn-flex justify-center">
  397. <u--image :showLoading="true" :src="appInfo.kf_qrcode_path" width="100px" height="100px"
  398. @click="clickuimage(appInfo.kf_qrcode_path)"></u--image>
  399. </view>
  400. <view v-if="appInfo.kf_qrcode_path" class="u-text-center">
  401. <!-- #ifdef MP-WEIXIN -->
  402. 长按上方二维码,添加客服购买卡密
  403. <!-- #endif -->
  404. <!-- #ifdef H5 -->
  405. 保存上方二维码,添加客服购买卡密
  406. <!-- #endif -->
  407. </view>
  408. </view>
  409. </u-popup>
  410. <u-popup :show="packagedetails" @close="packagedetails = false" :round="15" closeable>
  411. <view class="select u-flex justify-center"><text>我的会员套餐详情</text></view>
  412. <u-notice-bar speed="60"
  413. :text="'当会员套餐内限量次数为0后再次使用会扣除当前已经拥有的'+(appInfo.number_alias ? appInfo.number_alias : '点数')"></u-notice-bar>
  414. <view class="expand u-flex flex-wrap">
  415. <view
  416. v-if="userData.vip_info&&userData.vip_info.gpt35_times == -1 || userData.vip_info&&userData.vip_info.gpt35_times > 0"
  417. class="surplus u-flex align-center">
  418. <view class="item">{{appInfo.gpt35_alias ? appInfo.gpt35_alias : 'ChatGPT 3.5'}} -
  419. {{userData.vip_info.gpt35_type == 'time'?'每日':'总'}}限量:{{userData.vip_info.gpt35_times == -1?'无限量':userData.vip_info.gpt35_times+'次'}}({{userData.vip_info.gpt35_type == 'time'?'今日已用量:':'总用量:'}}{{userData.vip_info.gpt35_used}}次)
  420. </view>
  421. </view>
  422. <view
  423. v-if="userData.vip_info&&userData.vip_info.gpt4_times == -1 || userData.vip_info&&userData.vip_info.gpt4_times > 0"
  424. class="surplus u-flex align-center" style="background: #f9ae3d;">
  425. <view class="item">{{appInfo.gpt4_alias ? appInfo.gpt4_alias : 'ChatGPT 4.0'}} -
  426. {{userData.vip_info.gpt4_type == 'time'?'每日':'总'}}限量:{{userData.vip_info.gpt4_times == -1?'无限量':userData.vip_info.gpt4_times+'次'}}({{userData.vip_info.gpt4_type == 'time'?'今日已用量:':'总用量:'}}{{userData.vip_info.gpt4_used}}次)
  427. </view>
  428. </view>
  429. <view
  430. v-if="userData.vip_info&&userData.vip_info.sd_times == -1 || userData.vip_info&&userData.vip_info.sd_times > 0"
  431. class="surplus u-flex align-center" style="background: #3c9cff;">
  432. <view class="item">StableDiffusion绘图 -
  433. {{userData.vip_info.sd_type == 'time'?'每日':'总'}}限量:{{userData.vip_info.sd_times == -1?'无限量':userData.vip_info.sd_times+'次'}}({{userData.vip_info.sd_type == 'time'?'今日已用量:':'总用量:'}}{{userData.vip_info.sd_used}}次)
  434. </view>
  435. </view>
  436. <view
  437. v-if="userData.vip_info&&userData.vip_info.mj_times == -1 || userData.vip_info&&userData.vip_info.mj_times > 0"
  438. class="surplus u-flex align-center" style="background: #26b3a0;">
  439. <view class="item">MidJourney绘图 -
  440. {{userData.vip_info.mj_type == 'time'?'每日':'总'}}限量:{{userData.vip_info.mj_times == -1?'无限量':userData.vip_info.mj_times+'次'}}({{userData.vip_info.mj_type == 'time'?'今日已用量:':'总用量:'}}{{userData.vip_info.mj_used}}次)
  441. </view>
  442. </view>
  443. </view>
  444. </u-popup>
  445. <block v-if="is_aipainting">
  446. <wike-tabbar2 v-if="appInfo.page_template == 3" :is_aipainting="is_aipainting" :onTabbar="true"
  447. :isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar2>
  448. <wike-tabbar v-else :onTabbar="true" :is_aipainting="is_aipainting" :isShowAnimate="true"
  449. :appInfos="appInfo.page_template"></wike-tabbar>
  450. </block>
  451. <wike-modal-qrcode :qrcode="qrcode" :showconcern="showconcern" @concernclose="concernclose"></wike-modal-qrcode>
  452. <wike-tabbar :onTabbar="true" :isShowAnimate="true"></wike-tabbar>
  453. </view>
  454. </template>
  455. <script>
  456. import {
  457. mapMutations,
  458. mapActions,
  459. mapState,
  460. mapGetters
  461. } from 'vuex';
  462. import {
  463. API_ROOT
  464. } from '@/common/request/request';
  465. let interstitialAd = null,
  466. timer,
  467. time2;
  468. export default {
  469. components: {},
  470. data() {
  471. return {
  472. hasLogin: false,
  473. // API_ROOT: API_ROOT,
  474. perfectResume: false, //简历是否完善
  475. tobheight: 45,
  476. platform: this.$platform.get(),
  477. showrealname: false,
  478. showworkermy: false,
  479. avatar: '',
  480. isLoading: true,
  481. // userInfo: {
  482. // headPicUrl: '/static/images/user/avatar.jpg',
  483. // nickName: '史蒂芬.林'
  484. // },
  485. orderStatusList: [{
  486. name: '待付款',
  487. icon: 'iconfont icon31daifukuan',
  488. status: 10
  489. },
  490. {
  491. name: '待发货',
  492. icon: 'iconfont icon31daifahuo',
  493. status: 30
  494. },
  495. {
  496. name: '待收货',
  497. icon: 'iconfont icon31daishouhuo',
  498. status: 40
  499. },
  500. {
  501. name: '待评价',
  502. icon: 'iconfont icon31daipingjia',
  503. status: 50
  504. },
  505. {
  506. name: '已完成',
  507. icon: 'iconfont icon31yiguanzhudianpu',
  508. status: 55
  509. }
  510. ],
  511. currentIndex: 0,
  512. list: [{
  513. icon: '/static/images/user/class-01.png',
  514. text: '我的电子券'
  515. },
  516. {
  517. icon: '/static/images/user/class-02.png',
  518. text: '退换/售后'
  519. },
  520. {
  521. icon: '/static/images/user/class-03.png',
  522. text: '我的积分'
  523. },
  524. {
  525. icon: '/static/images/user/class-04.png',
  526. text: '送礼提醒'
  527. }
  528. ],
  529. // userList: [{
  530. // title: '订单记录',
  531. // icon: 'shopping-cart-fill',
  532. // path: 'coupon-fill',
  533. // url: '/pages/user/orderrecord/orderrecord',
  534. // color: '#26b3a0'
  535. // },
  536. // {
  537. // title: '问答记录',
  538. // icon: 'question-circle-fill',
  539. // path: 'collect-list',
  540. // url: '/pages/user/takenotes/takenotes',
  541. // color: '#31c9e8'
  542. // },
  543. // {
  544. // title: '修改用户信息',
  545. // icon: 'setting-fill',
  546. // path: 'collect-list',
  547. // url: '/pages/user/userinfo',
  548. // color: '#5ac725'
  549. // },
  550. // ],
  551. // serverList: [{
  552. // title: '客服中心',
  553. // icon: 'server-fill',
  554. // path: '/pages/user/public/kefu',
  555. // color: '#e83a30'
  556. // },
  557. // {
  558. // title: '关于我们',
  559. // icon: 'account-fill',
  560. // path: '/pages/user/public/agreement?type=aboutus',
  561. // color: '#ffa726'
  562. // },
  563. // {
  564. // title: '版本',
  565. // icon: 'pushpin-fill',
  566. // text: '4.6.2',
  567. // color: '#24f083'
  568. // }
  569. // ],
  570. commission_setting: {},
  571. showcarmi: false,
  572. carmi: '',
  573. qrcode: '',
  574. is_aipainting: '',
  575. showconcern: false,
  576. gzhqrcode: '',
  577. packagedetails: false,
  578. plan: {},
  579. show_ios_pay: false,
  580. device: this.$platform.device(),
  581. // commission_alias:'分销中心'
  582. };
  583. },
  584. computed: {
  585. ...mapGetters(['appInfo', 'homeTemplate', 'isLogin', 'userInfo', 'userData'])
  586. },
  587. onShow: function() {
  588. if (uni.getStorageSync('token')) {
  589. this.hasLogin = true
  590. }
  591. if (this.isLogin) {
  592. this.getUserData();
  593. if (this.$ws.socketStatus()) {
  594. this.$ws.completeClose();
  595. }
  596. }
  597. this.systemwechat()
  598. // this.$store.dispatch('tabbarInit')
  599. },
  600. onLoad() {
  601. this.isLoading = false;
  602. // if (!this.isLogin) {
  603. // uni.navigateTo({
  604. // url: '/pages/user/signin'
  605. // });
  606. // uni.setStorageSync('route', '/pages/user/user');
  607. // }
  608. this.getCommissionSetting();
  609. this.getPlan();
  610. // this.systemwechat()
  611. // console.log(API_ROOT);
  612. },
  613. onReady() {
  614. let that = this;
  615. // #ifdef MP-WEIXIN
  616. clearTimeout(timer);
  617. // 在适合的场景显示插屏广告
  618. timer = setTimeout(function() {
  619. // 在页面onLoad回调事件中创建插屏广告实例
  620. if (wx.createInterstitialAd && that.appInfo.interstitial_status == 1) {
  621. interstitialAd = wx.createInterstitialAd({
  622. adUnitId: that.appInfo.interstitial_id
  623. });
  624. interstitialAd.onLoad(() => {});
  625. interstitialAd.onError(err => {});
  626. interstitialAd.onClose(() => {
  627. if (that.appInfo.interstitial_infinite_status && that.appInfo
  628. .interstitial_infinite_status == 1) {
  629. that.showInterstitial();
  630. } else {
  631. interstitialAd.show().catch(err => {
  632. console.error(err);
  633. });
  634. }
  635. });
  636. interstitialAd.show().catch(err => {
  637. console.error(err);
  638. });
  639. }
  640. }, 4000);
  641. // #endif
  642. },
  643. onUnload() {
  644. clearInterval(time2);
  645. },
  646. methods: {
  647. loginout() {
  648. let that = this;
  649. uni.showModal({
  650. confirmColor: '#26B3A0',
  651. title: '提示',
  652. content: '确认退出登录?',
  653. success: function(res) {
  654. if (res.confirm) {
  655. uni.removeStorageSync('token')
  656. setTimeout(() => {
  657. uni.reLaunch({
  658. url: '/pages/user/signin'
  659. })
  660. }, 1500)
  661. } else if (res.cancel) {
  662. console.log('用户点击取消');
  663. }
  664. }
  665. });
  666. },
  667. ...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
  668. getPlan() {
  669. let that = this;
  670. this.$http('conf.getGroupConf', {
  671. group: 'system.plan'
  672. }).then(res => {
  673. if (res.code == 0) {
  674. this.plan = res.data;
  675. if (res.data.is_ios_pay == 1 && that.checkTimeLimit()) {
  676. // ios可以付钱
  677. that.show_ios_pay = true
  678. }
  679. // uni.setNavigationBarTitle({
  680. // title: this.appInfo.site_name
  681. // });
  682. }
  683. });
  684. },
  685. getlogin() {
  686. // console.log(2222);
  687. uni.navigateTo({
  688. url: '/pages/user/signin'
  689. });
  690. uni.setStorageSync('route', '/pages/user/user');
  691. },
  692. systemwechat() {
  693. this.$http('conf.getGroupConf', {
  694. group: 'system.wechat'
  695. }).then(res => {
  696. if (res.code == 0) {
  697. this.qrcode = res.data.qrcode_path
  698. const focuson = uni.getStorageSync('focuson');
  699. // console.log(focuson);
  700. if (!focuson) {
  701. if (this.qrcode) {
  702. if (this.isLogin && this.appInfo.is_show_logged_qrcode == 1) {
  703. this.showconcern = true
  704. }
  705. }
  706. }
  707. }
  708. })
  709. },
  710. concernclose() {
  711. this.showconcern = false
  712. },
  713. copyText(text) {
  714. uni.setClipboardData({
  715. data: text,
  716. success: function() {
  717. // console.log('success');
  718. uni.showToast({
  719. title: '用户编号复制成功'
  720. });
  721. }
  722. });
  723. },
  724. modify() {
  725. uni.navigateTo({
  726. url: '/pages/user/userinfo'
  727. })
  728. },
  729. clickuimage(e) {
  730. uni.previewImage({
  731. urls: [e]
  732. })
  733. },
  734. // systemwechat(){
  735. // this.$http('conf.getGroupConf', { group: 'system.wechat' }).then(res => {
  736. // if (res.code == 0) {
  737. // if(res.data.qrcode){
  738. // this.qrcode = res.data.qrcode_path
  739. // }
  740. // }
  741. // })
  742. // },
  743. getCommissionSetting() {
  744. this.$http('conf.getGroupConf', {
  745. group: 'system.commission'
  746. }).then(res => {
  747. if (res.code == 0) {
  748. uni.setNavigationBarTitle({
  749. title: this.appInfo.site_name
  750. });
  751. // this.is_aipainting = this.appInfo.is_aipainting
  752. if (res.data.is_commission == 1) {
  753. let obj = {
  754. title: res.data.commission_alias ? res.data.commission_alias : '分销中心',
  755. icon: 'grid-fill',
  756. path: 'address-list',
  757. url: '/pages/user/commission/index',
  758. color: '#ffca28'
  759. };
  760. this.userList.splice(0, 0, obj);
  761. }
  762. if (this.appInfo.is_aipainting && this.appInfo.is_aipainting == 1) {
  763. let draw = {
  764. title: '绘画记录',
  765. icon: 'edit-pen-fill',
  766. path: 'address-list',
  767. url: '/pages/user/draw/draw',
  768. color: '#3c9cff'
  769. };
  770. this.userList.splice(1, 0, draw);
  771. this.is_aipainting = '1'
  772. } else {
  773. this.is_aipainting = '2'
  774. }
  775. }
  776. });
  777. },
  778. getroute() {
  779. if (!this.isLogin) {
  780. uni.setStorageSync('route', '/pages/user/user');
  781. }
  782. },
  783. exchange() {
  784. if (!this.isLogin) {
  785. uni.navigateTo({
  786. url: '/pages/user/signin'
  787. });
  788. uni.setStorageSync('route', '/pages/user/user');
  789. return;
  790. }
  791. uni.showLoading({
  792. title: '卡密兑换中...'
  793. });
  794. this.$http('member.kami', {
  795. code: this.carmi
  796. }).then(res => {
  797. if (res.code == 0) {
  798. uni.showToast({
  799. title: '兑换成功'
  800. });
  801. this.getUserData();
  802. this.showcarmi = false;
  803. }
  804. });
  805. },
  806. getuserinfo() {
  807. uni.navigateTo({
  808. url: '/pages/user/userinfo'
  809. });
  810. },
  811. getPersonalRealNameInfo() {
  812. this.$http('vertify.getPersonalRealNameInfo').then(res => {
  813. if (res.code == 0) {
  814. this.showrealname = false;
  815. } else {
  816. this.showrealname = true;
  817. }
  818. });
  819. },
  820. jump(e) {
  821. console.log(e);
  822. uni.navigateTo({
  823. url: e
  824. })
  825. },
  826. workermy() {
  827. this.$http('worker.my').then(res => {
  828. if (res.code == 0) {
  829. if (res.data.name) {
  830. this.showworkermy = true;
  831. } else {
  832. this.showworkermy = false;
  833. }
  834. } else {
  835. this.showworkermy = false;
  836. }
  837. });
  838. },
  839. getfeedback() {
  840. uni.showModal({
  841. content: '请联系客服,提供您的宝贵意见',
  842. title: '提示',
  843. confirmText: '联系客服',
  844. confirmColor: '#00ca88',
  845. success(res) {
  846. if (res.confirm) {
  847. uni.navigateTo({
  848. url: '/pages/user/public/kefu'
  849. });
  850. }
  851. }
  852. });
  853. },
  854. getqrcode() {
  855. // console.log(this.qrcode);
  856. uni.previewImage({
  857. urls: [this.qrcode]
  858. })
  859. },
  860. showInterstitial() {
  861. time2 = setInterval(
  862. function() {
  863. interstitialAd.show().catch(err => {
  864. console.error(err);
  865. });
  866. },
  867. this.appInfo.gap ? this.appInfo.gap * 1000 : 12000
  868. );
  869. }
  870. }
  871. };
  872. </script>
  873. <style lang="scss">
  874. page {
  875. background: #f2f2f2;
  876. }
  877. .btn-hover {
  878. background: #f2f2f2 !important;
  879. }
  880. .user {
  881. // height: 1800rpx;
  882. padding-bottom: 200rpx;
  883. .user-wrap {
  884. display: flex;
  885. justify-content: center;
  886. align-items: center;
  887. height: 56vw;
  888. padding: 30rpx;
  889. z-index: 9;
  890. // border-radius: 0 0 20% 20%;
  891. background: url('@/static/images/user_bg.jpg') no-repeat;
  892. background-size: cover;
  893. .setting {
  894. color: #fff;
  895. position: absolute;
  896. top: 60rpx;
  897. left: 60rpx;
  898. font-size: 50rpx;
  899. }
  900. .info {
  901. position: absolute;
  902. text-align: center;
  903. .avatar {
  904. width: 150rpx;
  905. height: 150rpx;
  906. border-radius: 50%;
  907. border: 4px solid #fff;
  908. }
  909. .nickname {
  910. color: #fff;
  911. font-size: 30rpx;
  912. margin-top: 20rpx;
  913. font-weight: bold;
  914. display: flex;
  915. }
  916. .nickname1 {
  917. color: #fff;
  918. font-size: 30rpx;
  919. margin-top: 20rpx;
  920. font-weight: bold;
  921. // display: flex;
  922. }
  923. }
  924. }
  925. .order-status {
  926. padding: 0 30rpx;
  927. margin-top: -8vw;
  928. .status-wrap {
  929. border-radius: 25rpx;
  930. overflow: hidden;
  931. .status-list {
  932. display: flex;
  933. justify-content: space-evenly;
  934. align-items: center;
  935. background: #fff;
  936. padding-top: 30rpx;
  937. padding-bottom: 30rpx;
  938. .status-item {
  939. flex: 1;
  940. display: flex;
  941. flex-direction: column;
  942. justify-content: center;
  943. align-items: center;
  944. .item-icon {
  945. line-height: 1;
  946. font-size: 65rpx;
  947. color: #bbb;
  948. }
  949. .item-text {
  950. font-size: 28rpx;
  951. color: #666;
  952. margin-top: 5rpx;
  953. }
  954. }
  955. }
  956. }
  957. }
  958. .com-item {
  959. padding-left: 30rpx;
  960. padding-right: 30rpx;
  961. margin-top: 20rpx;
  962. .com-wrap {
  963. border-radius: 25rpx;
  964. overflow: hidden;
  965. }
  966. }
  967. .cell {
  968. height: 110rpx;
  969. padding-left: 30rpx;
  970. padding-right: 30rpx;
  971. display: flex;
  972. justify-content: space-between;
  973. align-items: center;
  974. background: #fff;
  975. border-bottom: 1px solid #f8f8f8;
  976. &:active {
  977. background: #f2f2f2;
  978. }
  979. &:last-child {
  980. border-bottom: none !important;
  981. }
  982. .cell-left {
  983. display: flex;
  984. align-items: center;
  985. .cell-icon {
  986. width: 50rpx;
  987. height: 50rpx;
  988. }
  989. .cell-text {
  990. color: #666;
  991. font-size: 32rpx;
  992. margin-left: 20rpx;
  993. // font-size: 30rpx;
  994. }
  995. }
  996. .iconfont {
  997. font-size: 40rpx;
  998. color: #999;
  999. }
  1000. }
  1001. }
  1002. .b-btn {
  1003. // position: absolute;
  1004. // right: 20upx;
  1005. // top: 24upx;
  1006. width: 132upx;
  1007. height: 50upx;
  1008. text-align: center;
  1009. line-height: 50upx;
  1010. font-size: 24upx;
  1011. color: #36343c;
  1012. border-radius: 30px;
  1013. background: #ffd465;
  1014. z-index: 1;
  1015. }
  1016. .carmimodal {
  1017. width: 600rpx;
  1018. border-radius: 20rpx;
  1019. position: relative;
  1020. .carmiclose {
  1021. position: absolute;
  1022. right: 15rpx;
  1023. top: 15rpx;
  1024. }
  1025. .carmititle {
  1026. background: linear-gradient(to right, #00ca88, #00BCD4);
  1027. color: #fff;
  1028. height: 120rpx;
  1029. line-height: 120rpx;
  1030. font-size: 32rpx;
  1031. font-weight: bold;
  1032. text-align: center;
  1033. border-radius: 20rpx 20rpx 0 0;
  1034. margin-bottom: 60rpx;
  1035. }
  1036. .carmiinput {
  1037. margin: 30rpx;
  1038. }
  1039. .carmiexchange {
  1040. margin: 80rpx 30rpx 90rpx 30rpx;
  1041. background: linear-gradient(to right, #00ca88, #00BCD4);
  1042. color: #fff;
  1043. border-radius: 80rpx;
  1044. height: 80rpx;
  1045. line-height: 80rpx;
  1046. text-align: center;
  1047. }
  1048. .kf_qrcode {
  1049. // margin-left: 200rpx;
  1050. margin-bottom: 30rpx;
  1051. }
  1052. }
  1053. /* 顶部背景图 start */
  1054. .top-backgroup {
  1055. height: 450rpx;
  1056. z-index: -1;
  1057. .backgroud-image {
  1058. width: 100%;
  1059. height: 450rpx;
  1060. // z-index: -1;
  1061. }
  1062. }
  1063. /* 顶部背景图 end */
  1064. .mine {
  1065. max-height: 100vh;
  1066. }
  1067. /* 底部安全边距 start*/
  1068. .tn-tabbar-height {
  1069. min-height: 120rpx;
  1070. height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  1071. height: calc(140rpx + constant(safe-area-inset-bottom));
  1072. }
  1073. .tn-color-cat {
  1074. color: #1D2541;
  1075. }
  1076. .tn-bg-cat {
  1077. background-color: #1D2541;
  1078. }
  1079. /* 自定义导航栏内容 start */
  1080. .custom-nav {
  1081. height: 100%;
  1082. &__back {
  1083. margin: auto 5rpx;
  1084. font-size: 40rpx;
  1085. margin-right: 10rpx;
  1086. flex-basis: 5%;
  1087. width: 100rpx;
  1088. position: absolute;
  1089. }
  1090. }
  1091. /* 自定义导航栏内容 end */
  1092. /* 顶部背景图 end */
  1093. /* 用户头像 start */
  1094. .logo-image {
  1095. width: 110rpx;
  1096. height: 110rpx;
  1097. position: relative;
  1098. overflow: hidden;
  1099. border-radius: 50%;
  1100. }
  1101. .logo-pic {
  1102. background-size: cover;
  1103. background-repeat: no-repeat;
  1104. // background-attachment:fixed;
  1105. background-position: top;
  1106. border: 8rpx solid rgba(255, 255, 255, 0.05);
  1107. box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  1108. border-radius: 50%;
  1109. overflow: hidden;
  1110. // background-color: #FFFFFF;
  1111. }
  1112. /* 页面 start*/
  1113. .about-shadow {
  1114. border-radius: 15rpx;
  1115. box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  1116. }
  1117. .about {
  1118. &__wrap {
  1119. position: relative;
  1120. z-index: 1;
  1121. margin: 20rpx 30rpx;
  1122. }
  1123. }
  1124. /* 页面 end*/
  1125. /* 图标容器15 start */
  1126. .icon15 {
  1127. &__item {
  1128. width: 30%;
  1129. background-color: #FFFFFF;
  1130. border-radius: 10rpx;
  1131. padding: 30rpx;
  1132. margin: 20rpx 10rpx;
  1133. transform: scale(1);
  1134. transition: transform 0.3s linear;
  1135. transform-origin: center center;
  1136. &--icon {
  1137. width: 100rpx;
  1138. height: 100rpx;
  1139. font-size: 60rpx;
  1140. border-radius: 50%;
  1141. margin-bottom: 18rpx;
  1142. position: relative;
  1143. z-index: 1;
  1144. &::after {
  1145. content: " ";
  1146. position: absolute;
  1147. z-index: -1;
  1148. width: 100%;
  1149. height: 100%;
  1150. left: 0;
  1151. bottom: 0;
  1152. border-radius: inherit;
  1153. opacity: 1;
  1154. transform: scale(1, 1);
  1155. background-size: 100% 100%;
  1156. }
  1157. }
  1158. }
  1159. }
  1160. /* 图标容器12 start */
  1161. .tn-three {
  1162. position: absolute;
  1163. top: 50%;
  1164. right: 50%;
  1165. bottom: 50%;
  1166. left: 50%;
  1167. transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
  1168. text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
  1169. }
  1170. .icon20 {
  1171. &__item {
  1172. width: 30%;
  1173. background-color: #FFFFFF;
  1174. border-radius: 10rpx;
  1175. padding: 30rpx;
  1176. margin: 20rpx 10rpx;
  1177. transform: scale(1);
  1178. transition: transform 0.3s linear;
  1179. transform-origin: center center;
  1180. &--icon {
  1181. width: 100rpx;
  1182. height: 100rpx;
  1183. font-size: 60rpx;
  1184. border-radius: 50%;
  1185. margin-bottom: 18rpx;
  1186. position: relative;
  1187. z-index: 1;
  1188. &::after {
  1189. content: " ";
  1190. position: absolute;
  1191. z-index: -1;
  1192. width: 100%;
  1193. height: 100%;
  1194. left: 0;
  1195. bottom: 0;
  1196. border-radius: inherit;
  1197. opacity: 1;
  1198. transform: scale(1, 1);
  1199. background-size: 100% 100%;
  1200. background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
  1201. }
  1202. }
  1203. }
  1204. }
  1205. .button-vip {
  1206. width: 100%;
  1207. height: 150rpx;
  1208. border-radius: 15rpx;
  1209. position: relative;
  1210. z-index: 1;
  1211. &::after {
  1212. content: " ";
  1213. position: absolute;
  1214. z-index: -1;
  1215. width: 100%;
  1216. height: 100%;
  1217. left: 0;
  1218. bottom: 0;
  1219. border-radius: inherit;
  1220. opacity: 1;
  1221. transform: scale(1, 1);
  1222. background-size: 100% 100%;
  1223. background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
  1224. }
  1225. }
  1226. /* 图标容器12 start */
  1227. .icon12 {
  1228. &__item {
  1229. width: 30%;
  1230. background-color: #FFFFFF;
  1231. border-radius: 10rpx;
  1232. padding: 30rpx;
  1233. margin: 20rpx 10rpx;
  1234. transform: scale(1);
  1235. transition: transform 0.3s linear;
  1236. transform-origin: center center;
  1237. &--icon {
  1238. width: 15rpx;
  1239. height: 15rpx;
  1240. font-size: 50rpx;
  1241. border-radius: 50%;
  1242. margin-bottom: 38rpx;
  1243. position: relative;
  1244. z-index: 1;
  1245. &::after {
  1246. content: " ";
  1247. position: absolute;
  1248. z-index: -1;
  1249. width: 100%;
  1250. height: 100%;
  1251. left: 0;
  1252. bottom: 0;
  1253. border-radius: inherit;
  1254. opacity: 1;
  1255. transform: scale(1, 1);
  1256. background-size: 100% 100%;
  1257. }
  1258. }
  1259. }
  1260. }
  1261. /* 图标容器1 start */
  1262. .icon1 {
  1263. &__item {
  1264. // width: 30%;
  1265. background-color: #FFFFFF;
  1266. border-radius: 10rpx;
  1267. padding: 30rpx;
  1268. margin: 20rpx 10rpx;
  1269. transform: scale(1);
  1270. transition: transform 0.3s linear;
  1271. transform-origin: center center;
  1272. &--icon {
  1273. width: 40rpx;
  1274. height: 40rpx;
  1275. font-size: 40rpx;
  1276. border-radius: 50%;
  1277. position: relative;
  1278. z-index: 1;
  1279. &::after {
  1280. content: " ";
  1281. position: absolute;
  1282. z-index: -1;
  1283. width: 100%;
  1284. height: 100%;
  1285. left: 0;
  1286. bottom: 0;
  1287. border-radius: inherit;
  1288. opacity: 1;
  1289. transform: scale(1, 1);
  1290. background-size: 100% 100%;
  1291. background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
  1292. }
  1293. }
  1294. }
  1295. }
  1296. .avatar {
  1297. width: 110rpx;
  1298. height: 110rpx;
  1299. border-radius: 50%;
  1300. border: 3px solid #fff;
  1301. }
  1302. .iconmore1 {
  1303. font-size: 24rpx;
  1304. }
  1305. .select {
  1306. font-weight: bold;
  1307. font-size: 32rpx;
  1308. margin: 30rpx;
  1309. }
  1310. .expand {
  1311. // margin: 30rpx;
  1312. // position: relative;
  1313. padding: 30rpx;
  1314. // background: linear-gradient(to right, #00ca88, #00BCD4);
  1315. .surplus {
  1316. color: #fff;
  1317. font-size: 26rpx;
  1318. background: #e11462bf;
  1319. border-radius: 50rpx;
  1320. padding: 8rpx 12rpx;
  1321. margin-right: 20rpx;
  1322. margin-bottom: 15rpx;
  1323. .item {
  1324. margin-left: 10rpx;
  1325. }
  1326. }
  1327. }
  1328. </style>