detail.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772
  1. <template>
  2. <!-- 页面头部 -->
  3. <HomePageHead></HomePageHead>
  4. <!-- 导航栏 -->
  5. <HomePageNavigation1></HomePageNavigation1>
  6. <!-- 列表页广告一 -->
  7. <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
  8. <!-- 面包屑导航 -->
  9. <div class="breadcrumb">
  10. <div class="inner">
  11. <span class="location">当前位置:</span>
  12. <el-breadcrumb :separator-icon="ArrowRight">
  13. <el-breadcrumb-item>
  14. <NuxtLink to="/">首页</NuxtLink>
  15. </el-breadcrumb-item>
  16. <el-breadcrumb-item>
  17. <NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
  18. </el-breadcrumb-item>
  19. <el-breadcrumb-item>
  20. <NuxtLink :to="`list-1.html`"> {{ routLevelTitle }}</NuxtLink>
  21. </el-breadcrumb-item>
  22. <el-breadcrumb-item class="phone_breadcrumb_text">
  23. {{ routeNewsTtitle }}
  24. </el-breadcrumb-item>
  25. </el-breadcrumb>
  26. </div>
  27. </div>
  28. <!-- 资讯列表 -->
  29. <div class="newsDetail">
  30. <div class="inner">
  31. <div class="innerLeft">
  32. <div class="LeftTop">
  33. <h1>{{ newsDetail.title }}</h1>
  34. <p class="phone_none">
  35. 来源: <span>{{ newsDetail.copyfrom }}</span>
  36. 作者: <span>{{ newsDetail.author }}</span>
  37. 发布时间: <span>{{ time }}</span>
  38. </p>
  39. <p class="pc_none">
  40. <span>{{ newsDetail.copyfrom }}</span>
  41. <span>{{ newsDetail.author }}</span>
  42. <span>{{ time }}</span>
  43. </p>
  44. <!-- <img :src="newsDetail.imgurl" v-if="newsDetail.imgurl&&newsDetail.level==2||newsDetail.level==3"> -->
  45. </div>
  46. <!-- <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div> -->
  47. <div
  48. class="leftBottom"
  49. v-html="newsDetail.content"
  50. v-if="newsDetail.content"
  51. @click="openPreview">
  52. </div>
  53. <div v-if="previewVisible" class="preview-modal" @click="closePreview">
  54. <img :src="selectedImage" alt="Preview">
  55. </div>
  56. <!-- 免责声明: -->
  57. <div class="disclaimer" v-if="newsDetail.copyfrom!='本网'">
  58. <p>原文链接:{{ newsDetail.fromurl }}</p>
  59. <p>[免责声明]本文来源于网络转载,仅供学习交流使用,不构成商业目的。 版权归原作者所有,如涉及作品内容,版权和其他问题,请在30日与本网联系,我们将第一时间处理。</p>
  60. </div>
  61. <div v-if="articleChoice">
  62. <!-- 投票 start ---------------------------------------->
  63. <div class="index_3_box_vote" v-if="articleChoice">
  64. <div class="voteTitle">投票区</div>
  65. <div class="inquire">
  66. <p v-if="voteList.length>0">{{voteList[0].survey_name}}</p>
  67. <div class="radioBox">
  68. <!--投票选项-->
  69. <div v-if="!isDisabled">
  70. <div class="radio" v-if="isRadio">
  71. <el-radio-group v-model="radio1" @change="handleRadioChange">
  72. <el-radio v-for="item in voteList" :key="item.id" :value="item.id" size="large">
  73. <span v-if="item.is_other == 0">{{item.choice_name}}</span>
  74. <span v-else>其他</span>
  75. </el-radio>
  76. </el-radio-group>
  77. <el-input
  78. v-if="showUserChoice"
  79. v-model="userChoice"
  80. :rows="2"
  81. type="textarea"
  82. resize="none"
  83. placeholder="请输入.."
  84. />
  85. </div>
  86. <div class="checkInputBox" v-else>
  87. <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
  88. <span v-for="item in voteList" :key="item.id">
  89. <span v-if="item.is_other == 0">
  90. <el-checkbox size="large" :label="item.choice_name" :value="item.id"/>
  91. </span>
  92. <span v-else>
  93. <el-checkbox size="large" label="其他" :value="item.id"/>
  94. </span>
  95. </span>
  96. </el-checkbox-group>
  97. <el-input
  98. v-if="showUserChoice"
  99. v-model="userChoice"
  100. :rows="2"
  101. type="textarea"
  102. resize="none"
  103. placeholder="请输入.."
  104. />
  105. </div>
  106. </div>
  107. <!--投票结果-->
  108. <div class="inquireData" v-else>
  109. <div v-for="item in websiteSurveyData.data" :key="item.id">
  110. <div class="inquireDataItem active" v-if="item.status == 1">
  111. <div class="inquireDataItemTitle">
  112. <span v-if="item.choice_name == ''">其他</span>
  113. <span v-else>{{item.choice_name}}</span>
  114. </div>
  115. <div class="inquireDataItemNum">{{item.results}}票</div>
  116. </div>
  117. <div class="inquireDataItem" v-else>
  118. <div class="inquireDataItemTitle">
  119. <span v-if="item.choice_name == ''">其他</span>
  120. <span v-else>{{item.choice_name}}</span>
  121. </div>
  122. <div class="inquireDataItemNum">{{item.results}}票</div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="btn">
  128. <button class="voting" @click="addWebsiteSurvey" :disabled="isDisabled" v-if="!isDisabled">投票</button>
  129. </div>
  130. </div>
  131. </div>
  132. <!-- 投票 end ---------------------------------------->
  133. </div>
  134. <div class="recommendRead" v-if="newsDetail.commendArticle != false">
  135. <div class="recommendReadTitle">
  136. <span class="read_title">
  137. 推荐阅读
  138. </span>
  139. </div>
  140. <div class="recommendReadList">
  141. <div class="recommendReadListTitle" v-for="(item, index) in newsDetail.commendArticle"
  142. :key="item.id">
  143. <a :href="`/${item.alias_pinyin}/${item.id}.html`" v-if="index < 3">
  144. {{ item.title }}
  145. </a>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. <div class="innerRight">
  151. <!-- 热点资讯1 -->
  152. <div class="hotList1">
  153. <DetailHotNews></DetailHotNews>
  154. </div>
  155. <!-- 热点资讯2 -->
  156. <div class="hotList2">
  157. <DetailHotNews2></DetailHotNews2>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <!-- 页面底部 -->
  163. <HomeFoot1></HomeFoot1>
  164. </template>
  165. <script setup>
  166. //1.页面依赖 start ---------------------------------------->
  167. import { onMounted } from 'vue'
  168. import { ElBreadcrumb, ElBreadcrumbItem,ElRadio, ElRadioGroup,ElCheckbox,ElCheckboxGroup,ElMessage,ElInput } from 'element-plus'
  169. import { ArrowRight } from '@element-plus/icons-vue'
  170. const nuxtApp = useNuxtApp();
  171. const axios = nuxtApp.$axios;
  172. //1.1 获得跳转过来的id
  173. const route = useRoute();
  174. const articleId = parseInt(route.params.id); //获得该页面的id
  175. //1.2 获得父级栏目的名称、id
  176. //获得当前的完整路径
  177. const fullPath = route.path;
  178. // //拆分,取出来中间这一段,然后提取数字部分
  179. // const segments = fullPath.split('/');
  180. // const targetSegment = segments[1];
  181. const targetSegment = getRoutePath(1);
  182. const targetSegment1 = getRoutePath(2);
  183. const targetSegment2 = getRoutePath(3);
  184. // const numberPart = targetSegment.match(/\d+$/)?.[0];
  185. // const routeId = numberPart;
  186. let routeId;
  187. //通过导航路径反向查询导航id
  188. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  189. method: 'GET',
  190. query: {
  191. 'pinyin': targetSegment+'/'+targetSegment1,
  192. },
  193. });
  194. if(getRouteId.code == 200){
  195. routeId = getRouteId.data.category_id
  196. }else{
  197. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  198. console.log("错误位置:通过url路径查询导航池id")
  199. console.log("后端错误反馈:",getRouteId.message)
  200. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  201. }
  202. //面包屑导航
  203. const parent_name = ref("");
  204. const parent_id = ref("");
  205. const parent_pinyin = ref("");
  206. let getParentNav = async () => {
  207. const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
  208. method: 'GET',
  209. query: {
  210. 'catid': routeId
  211. },
  212. });
  213. console.log("获取面包屑导航",listData);
  214. if (listData.code == 200) {
  215. parent_name.value = listData.data.parent_name;
  216. parent_id.value = listData.data.parent_id;
  217. parent_pinyin.value = listData.data.parent_pinyin;
  218. } else {
  219. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  220. console.log("错误位置:获取面包屑导航")
  221. console.log("后端错误反馈:", listData.message)
  222. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  223. }
  224. }
  225. //获得父级栏目详情
  226. getParentNav();
  227. //1.页面依赖 end ---------------------------------------->
  228. //2.页面数据 start ---------------------------------------->
  229. //2.1 资讯详情
  230. const newsDetail = ref({})
  231. const routeNewsTtitle = ref("");
  232. //2.2 发布日期
  233. const time = ref("");
  234. //2.3 路径
  235. const routLevelTitle = ref("");
  236. const routLevelId = ref("");
  237. //是否展示投票
  238. const articleChoice = ref(false);
  239. //2.4获取详情
  240. async function getPageData() {
  241. const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
  242. method: 'GET',
  243. query: {
  244. 'articleid': articleId
  245. },
  246. });
  247. if(mkdata.code==200){
  248. //判断是否显示投票
  249. if(mkdata.data.is_survey==1){
  250. console.log("本篇文章含有投票!")
  251. articleChoice.value = true;
  252. getVoteList();
  253. }
  254. //获取内容
  255. newsDetail.value = mkdata.data;
  256. //获取路径
  257. routLevelTitle.value = newsDetail.value.cat_name;
  258. routLevelId.value = newsDetail.value.category_id;
  259. //获取发布时间
  260. time.value = newsDetail.value.updated_at.split(' ')[0];
  261. //修正标题长度
  262. if (newsDetail.value.title.length >= 30) {
  263. routeNewsTtitle.value = newsDetail.value.title.substr(0, 5) + "...";
  264. } else {
  265. routeNewsTtitle.value = newsDetail.value.title
  266. }
  267. }else{
  268. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  269. // console.log("错误位置:获取详情内容")
  270. // console.log("后端错误反馈:",mkdata.message)
  271. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  272. }
  273. }
  274. getPageData();
  275. //2.5 获得广告
  276. //广告列表
  277. let adImg1 = ref([]);
  278. // async function getAdData(){
  279. // const adData = await requestDataPromise('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'DETAIL'}});
  280. // if(adData.code==200){
  281. // for(let item of adData.data){
  282. // if(item.ad_tag == 'DETAIL_0001'){
  283. // adImg1.value = item;
  284. // }
  285. // }
  286. // }else{
  287. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  288. // console.log("错误位置:获取详情页广告列表")
  289. // console.log("后端错误反馈:",adData.message)
  290. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  291. // }
  292. // }
  293. // getAdData();
  294. onMounted(async () => {
  295. const { $webUrl, $CwebUrl } = useNuxtApp();
  296. //广告1
  297. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
  298. const responseAd1 = await fetch(url, {
  299. headers: {
  300. 'Content-Type': 'application/json',
  301. 'Userurl': $CwebUrl,
  302. 'Origin': $CwebUrl
  303. }
  304. });
  305. const resultAd1 = await responseAd1.json();
  306. adImg1.value = resultAd1.data[0];
  307. })
  308. //2.页面数据 end ---------------------------------------->
  309. //3.设置seo信息 start---------------------------------------->
  310. //3.1 设置seo信息
  311. const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
  312. method: 'GET',
  313. query: {
  314. 'articleid': articleId
  315. },
  316. });
  317. if(setData.code==200){
  318. let seoTitle = setData.data.title;
  319. let seoDescription = setData.data.introduce;
  320. let seoKeywords = setData.data.keyword;
  321. let seoSuffix = setData.data.suffix;
  322. let seoName = setData.data.website_name;
  323. useSeoMeta({
  324. title: seoTitle + "_" + seoName + "_" + seoSuffix,
  325. meta: [
  326. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
  327. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
  328. { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
  329. ]
  330. });
  331. }else{
  332. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  333. // console.log("错误位置:设置详情页面SEO数据")
  334. // console.log("后端错误反馈:",setData.message)
  335. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  336. }
  337. //3.设置seo信息 end---------------------------------------->
  338. //4.投票 start---------------------------------------->
  339. const radio1 = ref(''); //单选
  340. const check1 = ref([]); //多选
  341. const isDisabled = ref(false);//是否禁用提交按钮
  342. const isRadio = ref(true);//是否渲染单选
  343. const userSurId = ref('');//投票属于哪一篇文章
  344. const userChoice = ref('');//用于判断用户选择了其他选项以后,输入的值
  345. const userIsChoice = ref('');//用于判断其他选项目前是什么值
  346. const showUserChoice = ref(false);//是否显示其他输入框
  347. const websiteSurveyData = ref([]);//投票结果
  348. //3.2获得投票列表
  349. let voteList = ref([]);
  350. async function getVoteList(){
  351. const voteData = await requestHome('/web/getWebsiteSurvey',{method:'GET',query:{'art_id':articleId}});
  352. console.log(778899)
  353. console.log(voteData)
  354. if(voteData.code == 200){
  355. voteList.value = voteData.data;
  356. console.log(voteList.value)
  357. //判断显示单选还是多选
  358. //survey_type 0是单选 1是多选
  359. if(voteData.data[0].survey_type == 0){
  360. isRadio.value = true;
  361. console.log("1111")
  362. }else{
  363. isRadio.value = false;
  364. }
  365. //把最后一个的值拿出来 用于判断用户是否选择了其他
  366. for(let item of voteData.data){
  367. //如果含有其他
  368. if(item.is_other==1){
  369. userIsChoice.value = item.id;
  370. }
  371. }
  372. //用户投票属于哪一篇文章
  373. userSurId.value = voteData.data[0].sur_id;
  374. }else{
  375. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  376. console.log("错误位置:首页投票")
  377. console.log("后端错误反馈:",voteData.message)
  378. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  379. }
  380. }
  381. //3.2当用户选择了选项,判断是否展示其他输入框
  382. const handleRadioChange = (value) => {
  383. if(value == userIsChoice.value){
  384. showUserChoice.value = true;
  385. }else{
  386. showUserChoice.value = false;
  387. }
  388. }
  389. const handleCheckboxChange = (value) => {
  390. if (value.includes(userIsChoice.value)) {
  391. showUserChoice.value = true;
  392. } else {
  393. showUserChoice.value = false;
  394. }
  395. }
  396. //3.2发起投票
  397. async function addWebsiteSurvey(){
  398. //判断当前是单选还是多选
  399. console.log(isRadio.value)
  400. if(isRadio.value){
  401. console.log("用户单选!")
  402. if(radio1.value!=''){
  403. //先判断一下是否使用了其他选项
  404. if(showUserChoice.value){
  405. if(userChoice.value!=''){
  406. //文章id
  407. // console.log(userSurId.value)
  408. // 用户输入的值
  409. // console.log(userChoice.value)
  410. //如果使用了其他,其他的选项需要增加进去
  411. const ChoiceData = await requestHome('/web/addWebsiteSurveyOption',{
  412. method:'GET',
  413. query:{
  414. 'sur_id':userSurId.value,//投票的新闻id
  415. 'choice_name':userChoice.value,//投票的选项id
  416. }
  417. });
  418. if(ChoiceData.code == 200){
  419. //提交完其他选项以后,再正式发起投票
  420. const mkData = await requestHome('/web/addWebsiteSurveyVote',{
  421. method:'GET',
  422. query:{
  423. 'sur_id':userSurId.value,
  424. 'choice_id':ChoiceData.data
  425. }
  426. });
  427. if(mkData.code == 200){
  428. ElMessage.success('投票成功!')
  429. //把投票结果显示到页面上 禁用投票按钮
  430. isDisabled.value = true;
  431. websiteSurveyData.value = mkData.data;
  432. //遍历一下,把用户选中的那个设置status为1
  433. let data = mkData.data;
  434. //遍历一下,把用户选中的那个设置status为1
  435. for(let item of data.data){
  436. for(let i of data.choice){
  437. if(item.id == i){
  438. console.log(item.id)
  439. item.status = 1;
  440. }
  441. }
  442. }
  443. websiteSurveyData.value = data;
  444. }else{
  445. ElMessage.error(mkData.message)
  446. }
  447. }else{
  448. ElMessage.error('其他投票失败!')
  449. }
  450. }else{
  451. ElMessage.error('请输入选项内容!')
  452. }
  453. }else{
  454. //如果没选择其他,直接提交选择的内容
  455. const mkData = await requestHome('/web/addWebsiteSurveyVote',{
  456. method:'GET',
  457. query:{
  458. 'sur_id':userSurId.value,
  459. 'choice_id':radio1.value
  460. }
  461. });
  462. if(mkData.code == 200){
  463. ElMessage.success('投票成功!')
  464. //把投票结果显示到页面上 禁用投票按钮
  465. isDisabled.value = true;
  466. let data = mkData.data;
  467. //遍历一下,把用户选中的那个设置status为1
  468. for(let item of data.data){
  469. for(let i of data.choice){
  470. if(item.id == i){
  471. item.status = 1;
  472. }
  473. }
  474. }
  475. websiteSurveyData.value = data;
  476. }else{
  477. ElMessage.error('投票失败!')
  478. }
  479. }
  480. }else{
  481. ElMessage.error('请选择一个选项')
  482. }
  483. }else{
  484. console.log("多选!")
  485. //多选
  486. if(check1.value!=[]){
  487. //先判断一下是否使用了其他选项
  488. if(showUserChoice.value){
  489. if(userChoice.value!=''){
  490. //判断用户是否只选择了一个其他
  491. if(check1.value.length == 1){
  492. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption',{
  493. method:'GET',
  494. query:{
  495. 'sur_id':userSurId.value,//投票的新闻id
  496. 'choice_name':userChoice.value,//用户输入的其他选项文字
  497. }
  498. });
  499. if(ChoiceData.code == 200){
  500. //提交完其他选项以后,再正式发起投票
  501. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
  502. method:'GET',
  503. query:{
  504. 'sur_id':userSurId.value,
  505. 'choice_id':ChoiceData.data
  506. }
  507. });
  508. if(mkData.code == 200){
  509. ElMessage.success('投票成功!')
  510. //把投票结果显示到页面上 禁用投票按钮
  511. isDisabled.value = true;
  512. websiteSurveyData.value = mkData.data;
  513. //遍历一下,把用户选中的那个设置status为1
  514. let data = mkData.data;
  515. //遍历一下,把用户选中的那个设置status为1
  516. for(let item of data.data){
  517. for(let i of data.choice){
  518. if(item.id == i){
  519. console.log(item.id)
  520. item.status = 1;
  521. }
  522. }
  523. }
  524. websiteSurveyData.value = data;
  525. }else{
  526. ElMessage.error(mkData.message)
  527. }
  528. }else{
  529. ElMessage.error('其他投票失败!')
  530. }
  531. }else{
  532. //用户选择了除了其他以外,还包括别的选项
  533. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption',{
  534. method:'GET',
  535. query:{
  536. 'sur_id':userSurId.value,//投票的新闻id
  537. 'choice_name':userChoice.value,//用户输入的其他选项文字
  538. }
  539. });
  540. if(ChoiceData.code == 200){
  541. let data = check1.value;
  542. //找到多选的数组,把其他默认值给替换掉
  543. for (let i = 0; i < data.length; i++) {
  544. if (data[i] == userIsChoice.value) {
  545. data[i] = ChoiceData.data;
  546. }
  547. }
  548. let jsonArray = JSON.stringify(data);
  549. //提交完其他选项以后,再正式发起投票
  550. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
  551. method:'GET',
  552. query:{
  553. 'sur_id':userSurId.value,
  554. 'choice_id':jsonArray
  555. }
  556. });
  557. if(mkData.code == 200){
  558. ElMessage.success('投票成功!')
  559. //把投票结果显示到页面上 禁用投票按钮
  560. isDisabled.value = true;
  561. websiteSurveyData.value = mkData.data;
  562. //遍历一下,把用户选中的那个设置status为1
  563. let data = mkData.data;
  564. //遍历一下,把用户选中的那个设置status为1
  565. for(let item of data.data){
  566. for(let i of data.choice){
  567. if(item.id == i){
  568. //console.log(item.id)
  569. item.status = 1;
  570. }
  571. }
  572. }
  573. websiteSurveyData.value = data;
  574. }else{
  575. ElMessage.error(mkData.message)
  576. }
  577. }else{
  578. ElMessage.error('其他投票失败!')
  579. }
  580. }
  581. }else{
  582. ElMessage.error('请输入选项内容!')
  583. }
  584. }else{
  585. let jsonArray = JSON.stringify(check1.value);
  586. //如果没选择其他,直接提交选择的内容
  587. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
  588. method:'GET',
  589. query:{
  590. 'sur_id':userSurId.value,
  591. 'choice_id':jsonArray
  592. }
  593. });
  594. if(mkData.code == 200){
  595. ElMessage.success('投票成功!')
  596. //把投票结果显示到页面上 禁用投票按钮
  597. isDisabled.value = true;
  598. websiteSurveyData.value = mkData.data;
  599. //遍历一下,把用户选中的那个设置status为1
  600. let data = mkData.data;
  601. //遍历一下,把用户选中的那个设置status为1
  602. for(let item of data.data){
  603. for(let i of data.choice){
  604. if(item.id == i){
  605. console.log(item.id)
  606. item.status = 1;
  607. }
  608. }
  609. }
  610. websiteSurveyData.value = data;
  611. }else{
  612. ElMessage.error('投票失败!')
  613. }
  614. }
  615. }else{
  616. ElMessage.error('请选择一个选项')
  617. }
  618. }
  619. }
  620. //4.投票 end---------------------------------------->
  621. //5.页面图片放大 start---------------------------------------->
  622. const previewVisible = ref(false)
  623. const selectedImage = ref(' ')
  624. const openPreview = (event) => {
  625. if (event.target.tagName === 'IMG') {
  626. selectedImage.value = event.target.src;
  627. previewVisible.value = true;
  628. }
  629. }
  630. const closePreview = () => {
  631. previewVisible.value = false;
  632. }
  633. //5.页面图片放大 end---------------------------------------->
  634. </script>
  635. <style lang="less" scoped>
  636. @import url('@/assets/css/detail.less');
  637. </style>
  638. <style lang="less" scoped>
  639. @media screen and (min-width:801px){/*pc*/
  640. .pc_none{display:none;}
  641. }
  642. @media screen and (max-width:800px){/*ipad_phone*/
  643. .location{float:left;width:auto!important;}
  644. .breadcrumb .el-breadcrumb{width:100%;display:block;}
  645. .breadcrumb{margin:15px auto 10px;}
  646. // .breadcrumb .inner{ height:24px; }
  647. .breadcrumb .phone_breadcrumb_text{
  648. display:block;float:none;
  649. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  650. }
  651. .breadcrumb .location{ font-size: 14px; margin-right:5px;}
  652. .breadcrumb span { font-size: 14px; }
  653. .newsDetail .inner .innerLeft .LeftTop > h1{font-size:20px;line-height:28px;margin-bottom:15px;}
  654. .newsDetail .inner .innerLeft .LeftTop{margin-top:15px;font-size:18px;}
  655. .newsDetail .inner{width:92%;}
  656. .innerLeft{width:100%;}
  657. .newsDetail .inner .innerLeft .LeftTop > p{height:auto;}
  658. .newsDetail .inner .innerLeft .leftBottom{width:100%;margin-bottom:15px;}
  659. .newsDetail .inner .innerLeft .leftBottom :deep(img){max-width:100%;height:auto!important;}
  660. .index_3_box_vote .inquire{margin-top:15px;height:auto;}
  661. .index_3_box_vote .inquire p{height:auto;padding:0;font-size:14px;
  662. margin:0px 0px 5px 18px;}
  663. .index_3_box_vote .inquire .radio .el-radio.el-radio--large .el-radio__label span{font-size:14px;}
  664. .index_3_box_vote .voteTitle{font-size:14px;}
  665. .index_3_box_vote .inquire .btn{padding-left:22px;}
  666. .index_3_box_vote{overflow:hidden;}
  667. .index_3_box_vote .inquire .radio .el-radio.el-radio--large{margin-bottom:3px;}
  668. .index_3_box_vote .inquire .radioBox{height:auto;
  669. padding:0px 0px 12px 18px;}
  670. .index_3_box_vote .inquire .radio .el-radio-group{width:100%;}
  671. .index_3_box_vote .inquire .btn button{width:auto;padding:0px 10px;line-height:33px;height:33px;font-size:14px;margin-bottom:14px;}
  672. .newsDetail .inner .innerLeft .disclaimer{width:100%; }
  673. .newsDetail .inner .innerLeft .disclaimer *{word-wrap: break-word;width:100%!important;display:block!important;
  674. overflow-wrap: break-word;font-size:16px;
  675. white-space: pre-wrap;
  676. word-break: break-all;
  677. }
  678. // 推荐阅读
  679. .newsDetail .inner .innerLeft .recommendRead{
  680. width:100%;margin:22px 0px;
  681. }
  682. .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle{width:100%;height:auto;}
  683. .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title{
  684. width:auto;font-size:14px;box-sizing:border-box;height:33px;line-height:33px;
  685. border-bottom:1px solid #49A769;
  686. }
  687. .newsDetail .inner .innerLeft .recommendRead .recommendReadList{
  688. height:auto;margin-top:11px; min-height:auto;padding-bottom:8px;
  689. }
  690. .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle{
  691. margin-top:0px;overflow:hidden;
  692. }
  693. .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle a{
  694. line-height:33px;height:33px;font-size:14px;float:left;max-width:90%;
  695. word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
  696. }
  697. .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle[data-v-1ea5c530]:nth-child(1)::after{font-size:12px;}
  698. .newsDetail .inner .innerLeft .LeftTop > p span:nth-last-of-type(1){margin-right:0px;}
  699. .innerRight{display:none;}
  700. .phone_none{display:none;}
  701. }
  702. </style>