newsaddsq.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
  1. <template>
  2. <view class="check">
  3. <uni-forms ref="form" :model="datainfo">
  4. <view class="cbox">
  5. <view class="chmain">
  6. <uni-forms-item label="资讯类型" name="communityType">
  7. <picker range-key='dictLabel' :disabled="isdisabled" :value="wzlxidx" :range="wzlxList" @change='bindDateChange'>
  8. <view class="flexc">
  9. <view class="flex1 txr f13 co27" v-if="datainfo.communityType&&!wzlx">{{statusFormats(datainfo.communityType,wzlxList,'wzlx')}}</view>
  10. <view class="flex1 txr f13" v-else :class="wzlx?'co27':'coa'">{{wzlx||"请选择资讯类型"}}</view>
  11. <view class="rimg"><image :src="rimg"></image></view>
  12. </view>
  13. </picker>
  14. </uni-forms-item>
  15. <uni-forms-item label="发布时间" name="publishTime">
  16. <picker mode="date" :disabled="isdisabled" @change='bindDateChangeb'>
  17. <view class="flexc">
  18. <view class="flex1 txr f13" :class="datainfo.publishTime?'co27':'coa'">{{datainfo.publishTime||"请选择发布时间"}}</view>
  19. <view class="rimg"><image :src="rimg"></image></view>
  20. </view>
  21. </picker>
  22. </uni-forms-item>
  23. <uni-forms-item label="是否启用" name="status">
  24. <view class="flexc" @click="getChangeFn">
  25. <view class="flex1"></view>
  26. <image :src="check" v-if="datainfo.status=='1'" class="checkimg"></image>
  27. <image :src="ncheck" v-else class="checkimg"></image>
  28. </view>
  29. </uni-forms-item>
  30. <!-- <uni-forms-item label="是否置顶" name="isTop">
  31. <picker range-key='dictLabel' :disabled="isdisabled" :value="sfztidx" :range="sfztList" @change='bindDateChangea'>
  32. <view class="flexc">
  33. <view class="flex1 txr f13 co27" v-if="datainfo.isTop&&!sfzt">{{statusFormats(datainfo.isTop,sfztList,'sfzt')}}</view>
  34. <view class="flex1 txr f13" v-else :class="sfzt?'co27':'coa'">{{sfzt||"请选择是否置顶"}}</view>
  35. <view class="rimg"><image :src="rimg"></image></view>
  36. </view>
  37. </picker>
  38. </uni-forms-item> -->
  39. </view>
  40. </view>
  41. <view class="cbox">
  42. <view class="chmain pb10">
  43. <uni-forms-item label-width='0' name="communityTitle">
  44. <uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.communityTitle" :inputBorder='false' placeholder="输入标题" />
  45. </uni-forms-item>
  46. <view>
  47. <view class='toolbar' @tap="format">
  48. <view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
  49. <view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
  50. <view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
  51. <view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
  52. <view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
  53. data-value="left"></view>
  54. <view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
  55. data-value="center"></view>
  56. <view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align"
  57. data-value="right"></view>
  58. <view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align"
  59. data-value="justify"></view>
  60. <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight"
  61. data-value="2"></view>
  62. <view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing"
  63. data-value="2em"></view>
  64. <view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"
  65. data-value="20px"></view>
  66. <view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
  67. data-name="marginBottom" data-value="20px"></view>
  68. <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
  69. <view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view>
  70. <view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize"
  71. data-value="24px"></view>
  72. <view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color"
  73. data-value="#0000ff"></view>
  74. <view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor"
  75. data-name="backgroundColor" data-value="#00ff00"></view>
  76. <view class="iconfont icon-date" @tap="insertDate"></view>
  77. <view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
  78. <view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list"
  79. data-value="ordered"></view>
  80. <view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list"
  81. data-value="bullet"></view>
  82. <view class="iconfont icon-undo" @tap="undo"></view>
  83. <view class="iconfont icon-redo" @tap="redo"></view>
  84. <view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
  85. <view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
  86. <view class="iconfont icon-fengexian" @tap="insertDivider"></view>
  87. <view class="iconfont icon-charutupian" @tap="insertImage"></view>
  88. <view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header"
  89. :data-value="1"></view>
  90. <view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"
  91. data-value="sub"></view>
  92. <view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script"
  93. data-value="super"></view>
  94. <view class="iconfont icon-shanchu" @tap="clear"></view>
  95. <view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction"
  96. data-value="rtl"></view>
  97. </view>
  98. <editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize
  99. @statuschange="onStatusChange" :read-only="isdisabled" @ready="onEditorReady">
  100. </editor>
  101. <!-- <editor-box ></editor-box> -->
  102. </view>
  103. <!-- <uni-forms-item label="文章类型" name="phonenumber">
  104. <view class="flexc">
  105. <picker range-key='dictLabel' :value="syqxidx" :range="sexs" @change='bindDateChange'>
  106. <view class="rimg"><image :src="rimg"></image></view>
  107. </picker>
  108. </view>
  109. </uni-forms-item> -->
  110. </view>
  111. </view>
  112. </uni-forms>
  113. <view class="rfbtn" @click="getEditFn" v-if="isdisabled">修改</view>
  114. <view class="rfbtn" @click="getSubmit" v-else>发布</view>
  115. <loading></loading>
  116. </view>
  117. </template>
  118. <script>
  119. import config from '@/config'
  120. import editorBox from "@/manage/components/editor/editor.vue"
  121. import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
  122. import {getDictionaryFn} from "@/api/system/user.js"
  123. import {selectValueKey,uploadmore} from "@/utils/common.js"
  124. import {newsDet,newsPut,newsAdd} from "@/api/work/manage.js"
  125. export default {
  126. components: {editorBox},
  127. data() {
  128. return {
  129. rimg: require('@/people/static/people/rimg.png'),
  130. baseUrl: config.baseUrl,
  131. checkflag:true,
  132. check: require('@/people/static/people/check.png'),
  133. ncheck: require('@/people/static/people/ncheck.png'),
  134. datainfo: {
  135. // "communityId":"社区资讯ID",
  136. "communityTitle":"",//社区资讯标题
  137. "communityType":"",//社区资讯类型(1:公告 2:通知 3:资讯)
  138. "communityContent":"",//社区资讯内容
  139. "status":"1",//社区资讯状态(1正常 2关闭)
  140. "publishTime":"",//发布时间
  141. // "coverImage":"封面图片",
  142. // "author":"作者",
  143. // "source":"来源",
  144. // "viewCount":"浏览次数",
  145. // "isTop":"是否置顶:Y(置顶)、N(不置顶)"
  146. },
  147. formats: {},
  148. readOnly: false,
  149. wzlx:'',
  150. wzlxidx:'0',
  151. wzlxList:[],
  152. sfzt:'否',
  153. sfztidx:'1',
  154. sfztList:[{dictLabel:'是',dictValue:'Y'},{dictLabel:'否',dictValue:'N'}],
  155. id:'',
  156. ptype:"add",
  157. isdisabled:false,
  158. editinfo:''
  159. }
  160. },
  161. onLoad: function(e) {
  162. this.init()
  163. if(e.id){
  164. this.id=e.id;
  165. this.ptype='edit';
  166. this.isdisabled=true;
  167. this.getDetailFn()
  168. }
  169. if(e.tabval&&e.tabval!='yty'){
  170. this.datainfo.communityType=e.tabval
  171. }
  172. },
  173. methods: {
  174. checkPermi,
  175. checkRole,
  176. getEditFn(){
  177. this.isdisabled=false;
  178. },
  179. statusFormats(data, list,type) {
  180. var aite=selectValueKey(list, data);
  181. if(type=='wzlx'){
  182. this.wzlxidx=aite.key
  183. }else if(type=='sfzt'){
  184. this.sfztidx=aite.key
  185. }
  186. return aite.actions;
  187. },
  188. bindDateChange(e){
  189. var val=e.detail.value;
  190. this.datainfo.communityType=this.wzlxList[val].dictValue;
  191. this.wzlx=this.wzlxList[val].dictLabel;
  192. },
  193. bindDateChangea(e){
  194. var val=e.detail.value;
  195. this.datainfo.isTop=this.sfztList[val].dictValue;
  196. this.sfzt=this.sfztList[val].dictLabel;
  197. },
  198. bindDateChangeb(e){
  199. var val=e.detail.value;
  200. this.datainfo.publishTime=val;
  201. },
  202. getChangeFn(){
  203. if(this.isdisabled){
  204. return
  205. }
  206. if(this.datainfo.status=='1'){
  207. this.datainfo.status='2'
  208. }else{
  209. this.datainfo.status='1'
  210. }
  211. },
  212. init(){
  213. // 文章类型
  214. getDictionaryFn('community_typ').then(res=>{
  215. if(res.code==200){
  216. if(res.data){
  217. this.wzlxList = res.data.map(v => {
  218. return {
  219. dictLabel: v.dictLabel,
  220. dictValue: v.dictValue
  221. }
  222. })
  223. }
  224. }
  225. })
  226. },
  227. getDetailFn(){
  228. var that=this;
  229. newsDet(this.id).then(res=>{
  230. if(res.code==200){
  231. this.datainfo=res.data;
  232. var data=JSON.parse(JSON.stringify(res.data))
  233. if(data.communityContent){
  234. var fwbinfo=this.formatRichText(res.data.communityContent);
  235. this.editinfo=fwbinfo;
  236. uni.createSelectorQuery().select('#editor').context(function(res) {
  237. that.editorCtx = res.context||'';
  238. that.editorCtx.setContents({
  239. html:fwbinfo
  240. })
  241. }).exec();
  242. }
  243. }
  244. })
  245. },
  246. getSubmit(){
  247. var that=this;
  248. this.$refs.form.validate().then(res => {
  249. var params=JSON.parse(JSON.stringify(this.datainfo))
  250. if(!params.communityType){
  251. this.$toast('请选择资讯类型')
  252. return
  253. }
  254. if(!params.publishTime){
  255. this.$toast('请选择发布时间')
  256. return
  257. }
  258. if(!params.communityTitle){
  259. this.$toast('请输入标题')
  260. return
  261. }
  262. var infoContent=''
  263. this.editorCtx.getContents({
  264. success: function(data) {
  265. var s=data.html;
  266. infoContent=s.replace(/\<img src="(http?:\/\/)([^\/]+)(:\d+)?/g,'<img src="');
  267. infoContent=infoContent.replace(/\<img src="(https?:\/\/)([^\/]+)(:\d+)?/g,'<img src="');
  268. }
  269. })
  270. params.communityContent=infoContent;
  271. if(this.ptype=='add'){
  272. newsAdd(params).then(res=>{
  273. if(res.code==200){
  274. this.$toast("新增成功")
  275. setTimeout(function(){
  276. uni.$emit("newsList")
  277. uni.navigateBack({
  278. delta:1
  279. })
  280. },1500)
  281. }
  282. })
  283. }else{
  284. newsPut(params).then(res=>{
  285. if(res.code==200){
  286. this.$toast("修改成功")
  287. setTimeout(function(){
  288. uni.$emit("newsList")
  289. uni.navigateBack({
  290. delta:1
  291. })
  292. },1500)
  293. }
  294. })
  295. }
  296. })
  297. },
  298. //解析富文本方法
  299. formatRichText(html) {
  300. let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
  301. match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '').replace(/style=""/gi, '');
  302. match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
  303. match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
  304. return match;
  305. });
  306. newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
  307. match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
  308. return match;
  309. });
  310. newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  311. newContent = newContent.replace(/\<img src="/gi,
  312. '<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;" src="' +this.baseUrl);
  313. return newContent;
  314. },
  315. readOnlyChange() {
  316. this.readOnly = !this.readOnly
  317. },
  318. onEditorReady() {
  319. var that=this;
  320. // #ifdef MP-BAIDU
  321. this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
  322. // #endif
  323. // #ifdef APP-PLUS || MP-WEIXIN || H5
  324. uni.createSelectorQuery().select('#editor').context((res) => {
  325. this.editorCtx = res.context
  326. that.editorCtx.setContents({
  327. html:that.editinfo
  328. })
  329. }).exec()
  330. // #endif
  331. },
  332. undo() {
  333. this.editorCtx.undo()
  334. },
  335. redo() {
  336. this.editorCtx.redo()
  337. },
  338. format(e) {
  339. let {
  340. name,
  341. value
  342. } = e.target.dataset
  343. if (!name) return
  344. // console.log('format', name, value)
  345. this.editorCtx.format(name, value)
  346. },
  347. onStatusChange(e) {
  348. const formats = e.detail
  349. this.formats = formats
  350. },
  351. insertDivider() {
  352. this.editorCtx.insertDivider({
  353. success: function() {
  354. console.log('insert divider success')
  355. }
  356. })
  357. },
  358. clear() {
  359. uni.showModal({
  360. title: '清空编辑器',
  361. content: '确定清空编辑器全部内容?',
  362. success: res => {
  363. if (res.confirm) {
  364. this.editorCtx.clear({
  365. success: function(res) {
  366. console.log("clear success")
  367. }
  368. })
  369. }
  370. }
  371. })
  372. },
  373. removeFormat() {
  374. this.editorCtx.removeFormat()
  375. },
  376. insertDate() {
  377. const date = new Date()
  378. const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  379. this.editorCtx.insertText({
  380. text: formatDate
  381. })
  382. },
  383. insertImage() {
  384. var that=this;
  385. uni.chooseImage({
  386. count: 1,
  387. success: (res) => {
  388. let img= res.tempFilePaths;
  389. let imglen = res.tempFilePaths.length;
  390. var fuwufile = [];
  391. uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
  392. var url=that.baseUrl+rs[0];
  393. that.editorCtx.insertImage({
  394. src: url,
  395. alt: '图像',
  396. success: function() {
  397. console.log('insert image success')
  398. }
  399. })
  400. })
  401. }
  402. })
  403. }
  404. }
  405. }
  406. </script>
  407. <style>
  408. page{background: #F3F3F0;}
  409. </style>
  410. <style lang="scss" scoped>
  411. .check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
  412. .check .cbox /deep/ .uni-forms-item:last-child{border: none;}
  413. .check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
  414. .check /deep/ .uni-easyinput{flex: 1;text-align: left;font-size: 26rpx;color: #222327;}
  415. .check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
  416. .check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
  417. .check /deep/ .uni-easyinput__content-input{padding-left: 0 !important;}
  418. .check /deep/ .uni-input-input{font-size: 26rpx;}
  419. .check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
  420. .check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
  421. .check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
  422. .check /deep/ .uni-data-checklist{flex: 0 0 auto;}
  423. .check{min-height: 100vh;padding: 20rpx 18rpx 110rpx;box-sizing: border-box;}
  424. .cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;
  425. .chmain{
  426. padding: 0 32rpx;
  427. .rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
  428. image{width: 100%;height: 100%;}
  429. }
  430. .checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
  431. }
  432. }
  433. @import "@/static/editor-icon.css";
  434. .page-body {
  435. height: calc(100vh - var(--window-top) - var(--status-bar-height));
  436. }
  437. .wrapper {
  438. height: 100%;
  439. }
  440. .editor-wrapper {
  441. height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
  442. background: #fff;
  443. }
  444. .iconfont {
  445. display: inline-block;
  446. padding: 8px 8px;
  447. width: 24px;
  448. height: 24px;
  449. cursor: pointer;
  450. font-size: 20px;
  451. }
  452. .toolbar {
  453. margin-bottom: 20rpx;
  454. box-sizing: border-box;
  455. border-bottom: 0;
  456. font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  457. }
  458. .ql-container {
  459. box-sizing: border-box;
  460. width: 100%;
  461. min-height: 30vh;
  462. height: 100%;
  463. font-size: 16px;
  464. line-height: 1.5;
  465. }
  466. .ql-active {
  467. color: #06c;
  468. }
  469. </style>