user.vue 40 KB

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