questionsDetails.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <template>
  2. <view class="content">
  3. <view class="detail-cont">
  4. <view class="title">{{item.title}}</view>
  5. <view class="info">
  6. <view class="reads">阅读数:{{item.views}}</view>
  7. <view class="time">{{item.createTime}}</view>
  8. </view>
  9. <!-- 正文 -->
  10. <view class="full-text">
  11. <view v-html="item.answers"></view>
  12. </view>
  13. </view>
  14. <view class="ad">
  15. <u-swiper
  16. :list="advImgs"
  17. indicator
  18. indicatorMode="line"
  19. circular
  20. @click="handleAdvClick"
  21. ></u-swiper>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. import {getAdvList} from '@/api/adv.js'
  27. import {getQuestionsById} from '@/api/index'
  28. export default {
  29. data() {
  30. return {
  31. advs:[],
  32. advImgs:[],
  33. id:null,
  34. item:{},
  35. };
  36. },
  37. onLoad(option) {
  38. this.id=option.id;
  39. },
  40. onShow() {
  41. this.getAdvList();
  42. this.getQuestionsById();
  43. },
  44. onShareAppMessage(res) {
  45. if(this.$isLogin()){
  46. return {
  47. title: this.item.vesselName,
  48. path: '/pages_index/questionsDetails?id='+this.id,
  49. imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  50. }
  51. }
  52. },
  53. //分享到朋友圈
  54. onShareTimeline(res) {
  55. if(this.utils.isLogin()){
  56. return {
  57. title: this.item.title,
  58. imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  59. }
  60. }
  61. },
  62. methods:{
  63. handleAdvClick(index){
  64. var ad=this.advs[index];
  65. console.log(ad.advUrl);
  66. if(ad.showType==1){
  67. uni.setStorageSync('url',ad.advUrl);
  68. uni.navigateTo({
  69. url:"h5"
  70. })
  71. }
  72. else if(ad.showType==2){
  73. uni.navigateTo({
  74. url:ad.advUrl
  75. })
  76. }
  77. else if(ad.showType==3){
  78. uni.setStorageSync('content',ad.content);
  79. uni.navigateTo({
  80. url:"content"
  81. })
  82. }
  83. },
  84. getAdvList() {
  85. //联网加载数据
  86. var that = this;
  87. var data = {
  88. advType:6
  89. };
  90. getAdvList(data).then(res => {
  91. if(res.code==200){
  92. that.advImgs=[];
  93. that.advs=[];
  94. res.data.forEach(function(element) {
  95. if(element.imageUrl!=null&&element.imageUrl!=""){
  96. that.advs.push(element);
  97. that.advImgs.push(element.imageUrl);
  98. }
  99. });
  100. }else{
  101. uni.showToast({
  102. icon:'none',
  103. title: "请求失败",
  104. });
  105. }
  106. });
  107. },
  108. getQuestionsById(){
  109. let data = {id:this.id};
  110. getQuestionsById(data).then(
  111. res => {
  112. if(res.code==200){
  113. this.item=res.data;
  114. }else{
  115. uni.showToast({
  116. icon:'none',
  117. title: "请求失败",
  118. });
  119. }
  120. },
  121. rej => {}
  122. );
  123. },
  124. }
  125. }
  126. </script>
  127. <style lang="scss">
  128. page{
  129. height: 100%;
  130. }
  131. .content{
  132. height: 100%;
  133. display: flex;
  134. flex-direction: column;
  135. }
  136. .detail-cont{
  137. flex: 1;
  138. padding: 40upx;
  139. overflow-y: auto;
  140. .title{
  141. font-size: 40upx;
  142. font-family: PingFang SC;
  143. // font-weight: bold;
  144. color: #222222;
  145. line-height: 70upx;
  146. }
  147. .info{
  148. display: flex;
  149. align-items: center;
  150. font-size: 24upx;
  151. font-family: PingFang SC;
  152. font-weight: 500;
  153. color: #999999;
  154. line-height: 48upx;
  155. margin: 23upx 0;
  156. .reads{
  157. margin-right: 30upx;
  158. }
  159. }
  160. .full-text{
  161. font-size: 36upx;
  162. font-family: PingFang SC;
  163. // font-weight: 500;
  164. color: #222222;
  165. line-height: 60upx;
  166. }
  167. }
  168. .ad{
  169. margin-bottom: 50rpx;
  170. width: 100%;
  171. padding: 15rpx;
  172. }
  173. .recent-reads{
  174. flex-shrink: 0;
  175. box-sizing: border-box;
  176. height: 121upx;
  177. background: #FFFFFF;
  178. border-top: 1px solid #F0F0F0;
  179. padding: 0 40upx 0 37upx;
  180. display: flex;
  181. align-items: center;
  182. justify-content: space-between;
  183. .left{
  184. display: flex;
  185. align-items: center;
  186. .label{
  187. font-size: 28upx;
  188. font-family: PingFang SC;
  189. font-weight: 500;
  190. color: #666666;
  191. line-height: 1;
  192. margin-right: 20upx;
  193. }
  194. .peop-box{
  195. display: flex;
  196. align-items: center;
  197. .head-box{
  198. margin-right: 28upx;
  199. display: flex;
  200. align-items: center;
  201. .head{
  202. width: 48upx;
  203. height: 48upx;
  204. border-radius: 50%;
  205. overflow: hidden;
  206. box-shadow: 0 0 0 1px #fff;
  207. margin-right: -10upx;
  208. image{
  209. width: 100%;
  210. height: 100%;
  211. }
  212. }
  213. }
  214. .arrow{
  215. width: 13upx;
  216. height: 23upx;
  217. }
  218. }
  219. }
  220. .share-btn{
  221. position: relative;
  222. width: 240upx;
  223. height: 80upx;
  224. line-height: 80upx;
  225. font-size: 30upx;
  226. font-family: PingFang SC;
  227. font-weight: 500;
  228. color: #FFFFFF;
  229. background: #C39A58;
  230. border-radius: 40upx;
  231. display: flex;
  232. align-items: center;
  233. justify-content: center;
  234. image{
  235. width: 32upx;
  236. height: 32upx;
  237. margin-right: 15upx;
  238. }
  239. .share{
  240. position: absolute;
  241. width: 100%;
  242. height: 100%;
  243. opacity: 0;
  244. }
  245. }
  246. }
  247. .inquiry{
  248. width: 131upx;
  249. height: 131upx;
  250. position: fixed;
  251. right: 22upx;
  252. bottom: 193upx;
  253. z-index: 99;
  254. .content{
  255. position: relative;
  256. image{
  257. width: 100%;
  258. height: 100%;
  259. position: absolute;
  260. top: 0;
  261. left: 0;
  262. z-index: 9;
  263. }
  264. .text{
  265. position: absolute;
  266. top: 70upx;
  267. left: 50%;
  268. transform: translateX(-50%);
  269. z-index: 10;
  270. font-size: 22upx;
  271. font-family: PingFang SC;
  272. font-weight: bold;
  273. color: #C39A58;
  274. line-height: 1;
  275. }
  276. }
  277. }
  278. .contact-btn{
  279. display: inline-block;
  280. position: absolute;
  281. top: 0;
  282. left: 0;
  283. width: 100%;
  284. height: 100%;
  285. opacity: 0;
  286. z-index: 9999;
  287. }
  288. </style>