user.vue 40 KB

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