You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

444 lines
8.8 KiB

10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
  1. <!-- 首页 -->
  2. <template>
  3. <view class="home bx">
  4. <!-- 首页顶部 -->
  5. <view class="home-top content">
  6. <view class="menu-icon" @click="centerShow = true;$play()">
  7. <image src="@/static/home/menu.png" mode="aspectFit"></image>
  8. </view>
  9. <view class="logo">
  10. Tiktok
  11. </view>
  12. <view class="sign">
  13. <image @click="toSignin" src="../../static/home/sign.png" mode="widthFix"></image>
  14. </view>
  15. </view>
  16. <!-- 通知 -->
  17. <view class="notification">
  18. <u-notice-bar :text="notification[notificationType[$i18n.locale]] || ''" bgColor="#000"
  19. color="white"></u-notice-bar>
  20. </view>
  21. <!-- 用户信息 -->
  22. <view class="user-info content">
  23. <view class="user-name">{{ userInfo.account }}</view>
  24. <view class="member-image">
  25. <image :src="vipInfo.icon" mode="aspectFit"></image>
  26. </view>
  27. </view>
  28. <!-- 菜单列表 -->
  29. <view class="menu-list content">
  30. <view v-for="(item,index) in onList" :key="index" @click="clickMenu(index)" class="menu-item">
  31. <image :src="item.icon" mode="aspectFit"></image>
  32. <view class="menu-descript">{{ $t(`page.home.${menuTitles[index]}`) }}</view>
  33. </view>
  34. </view>
  35. <!-- 会员等级信息 -->
  36. <view class="member-list content">
  37. <view class="member-item" v-for="(item, index) in vipList" :key="index">
  38. <view class="status-icon">
  39. <view v-if="item.current" class="current">current</view>
  40. <uni-icons v-else type="locked" size="20" color="#000"></uni-icons>
  41. </view>
  42. <view class="img-box">
  43. <image :src="item.icon" mode="aspectFit"></image>
  44. </view>
  45. <view class="menber-descript">{{ item.title }}</view>
  46. <!-- 权益列表 -->
  47. <view class="equity-list">
  48. <view class="equity-item">
  49. <!-- Receive a set of 40 apps data tasks -->
  50. {{ $t('page.home.equity_item_1', [item.num]) }}
  51. </view>
  52. <view class="equity-item">
  53. {{ $t('page.home.equity_item_2', [item.percentage]) }}
  54. </view>
  55. <view class="equity-item">
  56. {{ $t('page.home.equity_item_3', [item.price]) }}
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <!-- 协议列表 -->
  62. <view class="agreement-list">
  63. <view v-for="(item,index) in outList" :key="index" @click="toinstructions(index)" class="agreement-item">
  64. <image :src="item.icon" mode="aspectFit"></image>
  65. <view class="agreement-descript">{{ $t(`page.home.${agreementTitles[index]}`) }}</view>
  66. </view>
  67. </view>
  68. <sTabbar select="0" />
  69. <center :show="centerShow" :userInfo="userInfo" @close="centerShow = false;$play()" />
  70. <!-- 客服列表 -->
  71. <serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
  72. </view>
  73. </template>
  74. <script>
  75. import sTabbar from '@/components/base/tabBar.vue'
  76. import center from '@/components/center/center.vue'
  77. import serviceList from '@/components/serviceList/serviceList.vue'
  78. export default {
  79. components: {
  80. sTabbar,
  81. center,
  82. serviceList
  83. },
  84. data() {
  85. return {
  86. notification: {},
  87. centerShow: false,
  88. showService: false,
  89. menuTitles: ['CustomerService', 'Certifcate', 'Deposit', 'Withdraw'],
  90. agreementTitles: ['agreement_item_1', 'agreement_item_2', 'agreement_item_3', 'agreement_item_4'],
  91. serverList: [],
  92. onList: [],
  93. outList: [],
  94. vipList: [],
  95. userInfo: {},
  96. vipInfo: {},
  97. notificationType: {
  98. en: 'keyEnglish',
  99. es: "keySpanish",
  100. "zh": "keyChinese"
  101. },
  102. }
  103. },
  104. onShow() {
  105. this.getIndexIcon()
  106. this.getNotice()
  107. this.getUserInfo()
  108. this.forgetPass()
  109. },
  110. methods: {
  111. //跳转证书页面
  112. toCertificate() {
  113. uni.navigateTo({
  114. url: `/pages/instructions/instructions?index=1&type=onList`
  115. })
  116. },
  117. //跳转充值页面
  118. toPurse() {
  119. uni.navigateTo({
  120. url: '/pages/purse/purse'
  121. })
  122. },
  123. //跳转提现页面
  124. toWithdraw() {
  125. uni.navigateTo({
  126. url: '/pages/withdraw/withdraw'
  127. })
  128. },
  129. //显示客服列表
  130. revealServiceList() {
  131. this.showService = true;
  132. },
  133. //关闭客服列表
  134. closeServiceList() {
  135. this.showService = false;
  136. },
  137. //跳转说明页面(六合一)
  138. toinstructions(index) {
  139. this.$play()
  140. uni.navigateTo({
  141. url: `/pages/instructions/instructions?index=${index}`
  142. })
  143. },
  144. //获取首页图标
  145. getIndexIcon() {
  146. this.request('indexIcon').then(res => {
  147. if (res.code == 200) {
  148. this.onList = res.result.onList;
  149. this.outList = res.result.outList;
  150. }
  151. })
  152. },
  153. //获取vip套餐
  154. getVipShop() {
  155. this.request('vipShop').then(res => {
  156. if (res.code == 200) {
  157. res.result.forEach(item => {
  158. if (this.vipInfo && item.id == this.vipInfo.id) {
  159. item.current = true
  160. }
  161. })
  162. this.vipList = res.result
  163. }
  164. })
  165. },
  166. //获取通知
  167. getNotice() {
  168. this.request('indexNotice').then(res => {
  169. if (res.code == 200) {
  170. this.notification = res.result
  171. }
  172. })
  173. },
  174. //用户点击菜单
  175. clickMenu(index) {
  176. this.$play()
  177. if (index == 0) {
  178. this.revealServiceList()
  179. }
  180. if (index == 1) {
  181. this.toCertificate()
  182. }
  183. if (index == 2) {
  184. this.toPurse()
  185. }
  186. if (index == 3) {
  187. this.toWithdraw()
  188. }
  189. },
  190. //获取用户信息
  191. getUserInfo() {
  192. this.request('userInfo').then(res => {
  193. if (res.code == 200) {
  194. this.userInfo = res.result.userInfo
  195. this.vipInfo = res.result.vip
  196. this.getVipShop()
  197. }
  198. })
  199. },
  200. //忘记密码(获取客服列表)
  201. forgetPass() {
  202. this.request('forgetPass').then(res => {
  203. if (res.code == 200) {
  204. this.serverList = res.result
  205. }
  206. })
  207. },
  208. //跳转签到页面
  209. toSignin() {
  210. this.$play()
  211. uni.navigateTo({
  212. url: '/pages/signIn/signIn'
  213. })
  214. }
  215. }
  216. }
  217. </script>
  218. <style lang="scss" scoped>
  219. .home {
  220. width: 750rpx;
  221. min-height: 100vh;
  222. margin: 0 auto;
  223. // background-color: black;
  224. // background-image: url('@/static/home/bg.png');
  225. background-size: 100%;
  226. background-repeat: no-repeat;
  227. // color: white;
  228. padding-bottom: 200rpx;
  229. .content {
  230. width: 96%;
  231. margin: 0 auto;
  232. }
  233. .home-top {
  234. display: flex;
  235. justify-content: space-between;
  236. align-items: center;
  237. height: 60rpx;
  238. padding: 20rpx 0rpx;
  239. .menu-icon {
  240. image {
  241. width: 50rpx;
  242. height: 50rpx;
  243. }
  244. }
  245. .logo {
  246. color: uni-bg-color-app;
  247. font-weight: bold;
  248. font-size: 32rpx;
  249. }
  250. .sign {
  251. image {
  252. width: 60rpx;
  253. }
  254. }
  255. }
  256. .user-info {
  257. display: flex;
  258. flex-direction: column;
  259. align-items: center;
  260. margin: 20rpx 0rpx;
  261. .user-name {
  262. font-size: 34rpx;
  263. }
  264. .member-image {
  265. image {
  266. width: 150rpx;
  267. height: 110rpx;
  268. }
  269. }
  270. }
  271. .menu-list,
  272. .agreement-list {
  273. display: flex;
  274. flex-wrap: wrap;
  275. justify-content: space-around;
  276. text-align: center;
  277. .menu-item,
  278. .agreement-item {
  279. display: flex;
  280. flex-direction: column;
  281. align-items: center;
  282. width: calc(25% - 20px);
  283. flex-shrink: 0;
  284. image {
  285. width: 110rpx;
  286. height: 110rpx;
  287. }
  288. .menu-descript {
  289. box-sizing: border-box;
  290. width: 100%;
  291. text-align: center;
  292. word-break: break-all;
  293. font-size: 24rpx;
  294. margin: 10rpx 0rpx;
  295. padding: 0rpx 12rpx;
  296. }
  297. }
  298. .agreement-item {
  299. font-size: 19rpx;
  300. image {
  301. width: 90rpx;
  302. height: 90rpx;
  303. }
  304. }
  305. }
  306. .agreement-list {
  307. padding-bottom: 40rpx;
  308. }
  309. .member-list {
  310. display: flex;
  311. flex-wrap: wrap;
  312. justify-content: space-between;
  313. margin: 20rpx auto;
  314. .member-item {
  315. position: relative;
  316. box-sizing: border-box;
  317. padding: 15rpx;
  318. width: calc(50% - 10rpx);
  319. border-radius: 10rpx;
  320. border: 1px solid #00000080;
  321. margin-bottom: 25rpx;
  322. .status-icon {
  323. box-sizing: border-box;
  324. position: absolute;
  325. width: 100%;
  326. display: flex;
  327. justify-content: flex-end;
  328. padding: 0rpx 20rpx;
  329. .current {
  330. display: flex;
  331. align-items: center;
  332. justify-content: center;
  333. width: 120rpx;
  334. background-image: url('@/static/home/current.png');
  335. background-size: 100%;
  336. background-repeat: no-repeat;
  337. color: black;
  338. font-size: 25rpx;
  339. }
  340. }
  341. .img-box {
  342. display: flex;
  343. justify-content: center;
  344. width: 150rpx;
  345. height: 110rpx;
  346. overflow: hidden;
  347. margin: 20rpx auto;
  348. image {
  349. width: 150rpx;
  350. height: 110rpx;
  351. }
  352. }
  353. .menber-descript {
  354. text-align: center;
  355. color: $uni-bg-color-app;
  356. font-size: 28rpx;
  357. margin-bottom: 10rpx;
  358. }
  359. .equity-list {
  360. // color: white;
  361. font-size: 20rpx;
  362. padding-bottom: 40rpx;
  363. .equity-item {
  364. padding-left: 15rpx;
  365. position: relative;
  366. word-break: break-all;
  367. &::before {
  368. position: absolute;
  369. left: 0;
  370. top: 10rpx;
  371. content: '';
  372. width: 5rpx;
  373. height: 5rpx;
  374. background: white;
  375. border-radius: 50%;
  376. }
  377. }
  378. }
  379. }
  380. }
  381. }
  382. </style>