other.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <template>
  2. <view>
  3. <custom-nav title="其他" showIndex></custom-nav>
  4. <view class="other-container" >
  5. <view
  6. v-for="(item, i) in moduleList"
  7. :key="i"
  8. class="module"
  9. :style="{ background: `url(${require('../../static/new_other/bg.png')}) no-repeat bottom, ${item.style}`, backgroundSize: '100% 126rpx' }"
  10. @click="toModuleLink(item.name)"
  11. >
  12. <view class="name">{{ item.name }}</view>
  13. <view
  14. class="icon"
  15. :style="{ backgroundImage: `url(${require('../../static/new_other/'+item.icon)})` }"
  16. ></view>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import { rankDay } from "@/api.js"
  23. import { mapState } from "vuex";
  24. export default {
  25. computed: {
  26. ...mapState([
  27. "userServerInfo"
  28. ])
  29. },
  30. data() {
  31. return {
  32. moduleList: [
  33. { name: '数据统计', style: 'linear-gradient(95deg, #FE5C51 0%, #FF7B5A 100%)', icon: '1.png' },
  34. { name: '培训课程表', style: 'linear-gradient(95deg, #FA924F 0%, #FF7B39 100%)', icon: '2.png' },
  35. //{ name: '礼品兑换', style: 'linear-gradient(95deg, #FB6FAC 0%, #FFAACF 100%)', icon: '3.png' },
  36. { name: '每日排行', style: 'linear-gradient(270deg, #FFBF51 0%, #FF5E58 100%)', icon: '4.png' },
  37. { name: '荣誉殿堂', style: 'linear-gradient(90deg, #E28EFF 0%, #EDBAFF 100%)', icon: '6.png' },
  38. { name: '荣誉榜单', style: 'linear-gradient(90deg, #FCC616 0%, #FED476 100%)', icon: '7.png' },
  39. { name: '地址填写', style: 'linear-gradient(90deg, #928EFF 0%, #BACAFF 100%)', icon: '8.png' },
  40. { name: '设置', style: 'linear-gradient(90deg, #5380FF 0%, #769FFE 100%)', icon: '5.png' }
  41. ],
  42. }
  43. },
  44. onLoad() {
  45. if (this.userServerInfo.upload_status) {
  46. this.moduleList.splice(6, 0, { name: '图片上传', style: 'linear-gradient(90deg, #FCC616, #FED476)', icon: '2.png' })
  47. }
  48. },
  49. methods: {
  50. toModuleLink(name) {
  51. let m = new Map([
  52. ['数据统计', () => this.tostatistics],
  53. ['培训课程表', () => this.toCourse],
  54. ['礼品兑换', () => this.toexchange],
  55. ['每日排行', () => this.toRankDay],
  56. ['设置', () => this.tosetting],
  57. ['荣誉殿堂', () => this.tohonour],
  58. ['荣誉榜单', () => this.toHotList],
  59. ['图片上传', () => this.toUpload],
  60. ['地址填写', () => this.toAddress],
  61. ])
  62. m.get(name)()()
  63. },
  64. toHotList(){
  65. uni.navigateTo({
  66. url: '../hot/hot'
  67. })
  68. },
  69. toRankDay(){ // 每日排行
  70. uni.removeStorageSync('rankDay')
  71. uni.showLoading()
  72. this.$ajax.get(rankDay).then(([, { data: res }]) => {
  73. uni.hideLoading()
  74. if(res.code === 200) {
  75. uni.setStorage({
  76. key: 'rankDay',
  77. data: res.data.path,
  78. success() {
  79. uni.navigateTo({
  80. url: '../rank-day/rank-day'
  81. })
  82. }
  83. })
  84. } else {
  85. uni.showModal({
  86. content: res.msg || '查看每日排行失败',
  87. showCancel: false
  88. })
  89. }
  90. }).catch(() => {
  91. uni.hideLoading()
  92. uni.showModal({
  93. content: '查看每日排行失败',
  94. showCancel: false
  95. })
  96. })
  97. let status=this.userServerInfo.signuped;
  98. if(status){
  99. uni.removeStorageSync('rankDay')
  100. uni.showLoading()
  101. this.$ajax.get(rankDay).then(([, { data: res }]) => {
  102. uni.hideLoading()
  103. if(res.code === 200) {
  104. uni.setStorage({
  105. key: 'rankDay',
  106. data: res.data.path,
  107. success() {
  108. uni.navigateTo({
  109. url: '../rank-day/rank-day'
  110. })
  111. }
  112. })
  113. } else {
  114. uni.showModal({
  115. content: res.msg || '查看每日排行失败',
  116. showCancel: false
  117. })
  118. }
  119. }).catch(() => {
  120. uni.hideLoading()
  121. uni.showModal({
  122. content: '查看每日排行失败',
  123. showCancel: false
  124. })
  125. })
  126. }else{
  127. uni.showModal({
  128. content: '请先报名',
  129. showCancel: false
  130. })
  131. }
  132. },
  133. toAddress(){
  134. uni.navigateTo({ url: '../addAddress/addAddress' })
  135. },
  136. // 数据统计
  137. tostatistics () {
  138. uni.navigateTo({ url: '../statistics/statistics' })
  139. },
  140. // 礼品兑换
  141. toexchange () {
  142. uni.navigateTo({ url: '../exchange/exchange' })
  143. },
  144. // 图片上传
  145. toUpload() {
  146. uni.navigateTo({ url: '../upload/upload' })
  147. },
  148. // 点击荣誉殿堂
  149. tohonour () {
  150. //普通用户直接跳转到荣誉殿堂页面
  151. if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) {
  152. uni.navigateTo({ url: '../honorList/index' })
  153. } else {
  154. //批发商和客服不可参赛,所以提示无参赛记录
  155. uni.showModal({
  156. content: "无参赛记录",
  157. showCancel: false
  158. })
  159. }
  160. },
  161. // 设置
  162. tosetting () {
  163. uni.navigateTo({ url: '../setting/setting' })
  164. },
  165. // 课程
  166. toCourse() {
  167. let now = Date.now()
  168. let { end_time, start_time } = this.userServerInfo
  169. let week
  170. if(now > end_time) {
  171. week = 3
  172. } else if (now < start_time) {
  173. week = 0
  174. } else {
  175. week = Math.ceil((now - start_time) / (7 * 24 * 60 * 60 * 1000))
  176. }
  177. uni.navigateTo({
  178. url: '../course/list?week='+week
  179. })
  180. }
  181. }
  182. }
  183. </script>
  184. <style lang="scss" scoped>
  185. .custom-nav {
  186. position: fixed;
  187. z-index: 2;
  188. top: 0;
  189. width: 100%;
  190. height: calc(44px + var(--status-bar-height));
  191. box-sizing: border-box;
  192. padding-top: var(--status-bar-height);
  193. display: flex;
  194. align-items: center;
  195. font-size: 40rpx;
  196. line-height: 40rpx;
  197. color: #2A2A2A;
  198. background: #FFFFFF;
  199. .back {
  200. font-size: 42rpx;
  201. line-height: 42rpx;
  202. margin-right: 8rpx;
  203. }
  204. }
  205. page {
  206. display: flex;
  207. flex-direction: column;
  208. .status_bar {
  209. // position: fixed;
  210. // top: 0;
  211. // padding-top: 40rpx;
  212. // left: 25rpx;
  213. height: 128rpx;
  214. z-index: 1000;
  215. line-height: 88rpx;
  216. background-color: #fff;
  217. width: 100%;
  218. display: flex;
  219. justify-content: space-between;
  220. align-items: center;
  221. }
  222. .other-container {
  223. width: 100%;
  224. // margin-top: 20rpx;
  225. padding: 20rpx;
  226. // padding-top: calc(44px + var(--status-bar-height) + 20rpx);
  227. background-color: #FFFFFF;
  228. display: flex;
  229. justify-content: space-between;
  230. align-items: center;
  231. flex-wrap: wrap;
  232. box-sizing: border-box;
  233. // margin-top: 128rpx;
  234. .module {
  235. width: calc(50% - 20rpx);
  236. // width: 330rpx;
  237. height: 220rpx;
  238. margin-right: 15rpx;
  239. margin-bottom: 30rpx;
  240. border-radius: 16rpx;
  241. &:nth-of-type(2n){
  242. margin-left: 15rpx;
  243. margin-right: 0;
  244. }
  245. padding-top: 60rpx;
  246. box-sizing: border-box;
  247. .name {
  248. color: #FFFFFF;
  249. font-size: 48rpx;
  250. line-height: 66rpx;
  251. text-align: center;
  252. }
  253. position: relative;
  254. overflow: hidden;
  255. .icon {
  256. width: 90rpx;
  257. height: 90rpx;
  258. position: absolute;
  259. background-position: bottom;
  260. background-repeat: no-repeat;
  261. background-size: 100% auto;
  262. right: 18rpx;
  263. bottom: -14rpx;
  264. }
  265. }
  266. }
  267. }
  268. </style>