testDetails.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <view class="content">
  3. <view class="bg-box">
  4. <image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/71014b69fdcc4b56ae2a84bdc28f11c3.png"></image>
  5. <view class="title-box">
  6. <view class="title">
  7. {{item.name}}
  8. </view>
  9. </view>
  10. </view>
  11. <view class="cont">
  12. <view class="msg-box">
  13. <view class="msg">{{item.msg}}</view>
  14. </view>
  15. <view class="line"></view>
  16. <view class="desc-box">
  17. <view class="desc" v-html="item.descs"> </view>
  18. </view>
  19. <view class="btn-box">
  20. <view class="btn" @click="navTo('./test?tempId='+item.tempId)">立即开始测试</view>
  21. </view>
  22. <!-- <view class="logo">
  23. <image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/b95950e4208c493d8b74ce0de220c65c.png"></image>
  24. </view> -->
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. import {getTestDetails} from '@/api/test.js'
  30. export default {
  31. data() {
  32. return {
  33. tempId:null,
  34. item:{},
  35. };
  36. },
  37. onLoad(option) {
  38. this.tempId=option.tempId;
  39. },
  40. onShow() {
  41. this.getTestDetails();
  42. },
  43. //发送给朋友
  44. onShareAppMessage(res) {
  45. if(this.$isLogin()){
  46. return {
  47. title: "健康自测",
  48. path: '/pages_index/testDetails?tempId='+this.tempId,
  49. imageUrl: 'https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736944490230.png' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  50. }
  51. }
  52. },
  53. //分享到朋友圈
  54. onShareTimeline(res) {
  55. if(this.utils.isLogin()){
  56. return {
  57. title: "健康自测",
  58. imageUrl: 'https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736944490230.png' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  59. }
  60. }
  61. },
  62. methods:{
  63. navTo(url) {
  64. if(this.utils.isLogin()){
  65. uni.navigateTo({
  66. url: url
  67. })
  68. }else{
  69. uni.navigateTo({
  70. url:'/pages/auth/login'
  71. })
  72. }
  73. // this.$isLogin().then(
  74. // res => {
  75. // console.log(res)
  76. // if(res){
  77. // uni.navigateTo({
  78. // url: url
  79. // })
  80. // }
  81. // else{
  82. // uni.navigateTo({
  83. // url:'/pages/auth/login'
  84. // })
  85. // }
  86. // }
  87. // );
  88. },
  89. getTestDetails(){
  90. let data = {tempId:this.tempId};
  91. getTestDetails(data).then(
  92. res => {
  93. if(res.code==200){
  94. this.item=res.data;
  95. uni.setNavigationBarTitle({
  96. title: this.item.name+"自测"
  97. });
  98. }else{
  99. uni.showToast({
  100. icon:'none',
  101. title: "请求失败",
  102. });
  103. }
  104. },
  105. rej => {}
  106. );
  107. },
  108. }
  109. }
  110. </script>
  111. <style lang="scss">
  112. page{
  113. height: 100%;
  114. }
  115. .content{
  116. position: relative;
  117. height: 100%;
  118. display: flex;
  119. flex-direction: column;
  120. .bg-box{
  121. position: absolute;
  122. width: 100%;
  123. height: 600rpx;
  124. .title-box{
  125. top: 50rpx;
  126. left:50rpx;
  127. position: absolute;
  128. .title{
  129. border-radius: 5rpx;
  130. border: 1rpx solid #fff;
  131. padding: 20rpx 30rpx;
  132. font-size: 36rpx;
  133. font-family: Source Han Sans CN;
  134. font-weight: bold;
  135. color: #fff;
  136. }
  137. }
  138. image{
  139. position: absolute;
  140. width: 100%;
  141. height: 100%;
  142. }
  143. }
  144. .cont{
  145. position: relative;
  146. margin-top: 550rpx;
  147. z-index: 9999;
  148. padding: 30rpx;
  149. height: 100%;
  150. display: flex;
  151. flex-direction: column;
  152. padding: 30rpx;
  153. background-color: #fff;
  154. border-radius: 30rpx 30rpx 0rpx 0rpx;
  155. .msg-box{
  156. .msg{
  157. font-size: 36rpx;
  158. font-family: Source Han Sans CN;
  159. font-weight: bold;
  160. color: #111;
  161. }
  162. }
  163. .line{
  164. margin: 15rpx 0rpx;
  165. background-color: #F6F6F6;
  166. height:5rpx;
  167. width: 100%;
  168. }
  169. .desc-box{
  170. margin-top: 20rpx;
  171. background: #FFFFFF;
  172. .desc{
  173. color: #814E1B;
  174. }
  175. }
  176. .logo{
  177. display: flex;
  178. align-items: center;
  179. justify-content: center;
  180. margin: 60rpx 0rpx;
  181. width: 100%;
  182. image{
  183. width: 200rpx;
  184. height:100rpx;
  185. }
  186. }
  187. .btn-box{
  188. margin-top: 60rpx;
  189. height: 140upx;
  190. width: 100%;
  191. box-sizing: border-box;
  192. display: flex;
  193. align-items: center;
  194. justify-content: center;
  195. .btn{
  196. width: 100%;
  197. height: 88upx;
  198. line-height: 88upx;
  199. text-align: center;
  200. font-size: 34upx;
  201. font-family: PingFang SC;
  202. font-weight: bold;
  203. color: #FFFFFF;
  204. background: #018C39;
  205. border-radius: 50upx;
  206. }
  207. }
  208. }
  209. }
  210. </style>