donateDetail.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874
  1. <template>
  2. <view class="detail">
  3. <view class="top">
  4. <image :src="$store.state.baseURL + proInfo.image" mode=""></image>
  5. <view class="title clamp">{{ proInfo.title }}</view>
  6. <view class="tip">
  7. <view class=""></view>
  8. 基本信息
  9. </view>
  10. <view class="base-info">
  11. <view class="item">
  12. <text>捐赠进度</text>
  13. <text class="status">{{ proInfo.project_progress*100 }}%</text>
  14. </view>
  15. <view class="item">
  16. <text>创立时间</text>
  17. {{ proInfo.start_time | time }}
  18. </view>
  19. <view class="item">
  20. <text>开始时间</text>
  21. {{ proInfo.start_time | time }}
  22. </view>
  23. <view class="item">
  24. <text>结束时间</text>
  25. {{ proInfo.end_time | time }}
  26. </view>
  27. </view>
  28. <view class="dynamic flex" v-if="newItem">
  29. <view class="left">实时动态</view>
  30. <view class="right flex">
  31. <view>捐赠时间:{{ newItem.add_time | time }}</view>
  32. <view>
  33. 捐赠人:
  34. <text>{{ newItem.name | name }}</text>
  35. </view>
  36. <view class="clamp" style="width: 500rpx;">捐赠数量:{{ newItem.item | item(typeList) }}</view>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="content">
  41. <view class="content-nav flex">
  42. <view class="nav-item" v-for="(item, index) in navList" :key="index" :class="{ active: currentIndex === index }" @click="navClick(index)">{{ item }}</view>
  43. </view>
  44. </view>
  45. <view v-if="currentIndex === 0">
  46. <view class="item-detail" ref="swiperItemOne">
  47. <view class="tip">
  48. <view class=""></view>
  49. 捐赠介绍
  50. </view>
  51. <view class="item-content" v-html="proInfo.info"></view>
  52. <view class="tip">
  53. <view class=""></view>
  54. 项目需求
  55. </view>
  56. <view class="item-needs">
  57. <view class="need-item" v-for="item in proInfo.project_donation_info">
  58. <view class="">
  59. {{ item.project_donation_id | type(typeList) }}:
  60. <text>{{ item.project_donation_num }}</text>
  61. </view>
  62. <view class="">
  63. 最低需求捐赠数:
  64. <text>{{ item.project_donation_num }}</text>
  65. </view>
  66. <!-- <view class="">
  67. 物资捐赠要求:
  68. <text>全新</text>
  69. </view> -->
  70. </view>
  71. <!-- <view class="need-item">
  72. <view class="">
  73. 帐篷类(帐篷):
  74. <text>500</text>
  75. </view>
  76. <view class="">
  77. 最低需求捐赠数:
  78. <text>500</text>
  79. </view>
  80. <view class="">
  81. 物资捐赠要求:
  82. <text>全新</text>
  83. </view>
  84. </view> -->
  85. </view>
  86. </view>
  87. </view>
  88. <view v-else class="feedback">
  89. <view class="feedback-nav">
  90. <view class="nav-item" :class="{ action: navCurrentIndex === 0 }" @click="lookmore(0)">全部</view>
  91. <view class="nav-item" :class="{ action: navCurrentIndex === 1 }" @click="lookmore(1)">已成功</view>
  92. <view class="nav-item nav-item-err" :class="{ action: navCurrentIndex === 2 }" @click="lookmore(2)">已失败</view>
  93. </view>
  94. <view class="feedback-content">
  95. <view class="overall" v-if="navCurrentIndex === 0 && proInfo.status === 2">
  96. <view class="title">项目整体反馈</view>
  97. <view class="content">{{ proInfo.feedback }}</view>
  98. </view>
  99. <view class="without" v-if="backList.length === 0">
  100. 暂无捐赠
  101. </view>
  102. <template v-if="navCurrentIndex === 0">
  103. <view class="feedback-item" :key="item.id" v-for="item in backList">
  104. <view class="item-top">
  105. <image src="../../static/img/002.png" mode=""></image>
  106. <view class="item-name-time">
  107. <view class="item-name">孝感捐赠</view>
  108. <view class="item-time">{{ item.time | time }}</view>
  109. </view>
  110. </view>
  111. <view class="item-content">
  112. <text>{{ item.name }}</text>
  113. {{ item.time | time }}, {{ item.message }}
  114. </view>
  115. </view>
  116. </template>
  117. <template v-if="navCurrentIndex === 1">
  118. <view class="feedback-item" :key="item.id" v-for="item in backList" v-if="item.order_status !== -1">
  119. <view class="item-top">
  120. <image src="../../static/img/002.png" mode=""></image>
  121. <view class="item-name-time">
  122. <view class="item-name">孝感捐赠</view>
  123. <view class="item-time">{{ item.time | time }}</view>
  124. </view>
  125. </view>
  126. <view class="item-content">
  127. <text>{{ item.name }}</text>
  128. {{ item.time | time }}, {{ item.message }}
  129. </view>
  130. </view>
  131. </template>
  132. <template v-if="navCurrentIndex === 2">
  133. <view class="feedback-item" :key="item.id" v-for="item in backList" v-if="item.order_status === -1">
  134. <view class="item-top">
  135. <image src="../../static/img/002.png" mode=""></image>
  136. <view class="item-name-time">
  137. <view class="item-name">孝感捐赠</view>
  138. <view class="item-time">{{ item.time | time }}</view>
  139. </view>
  140. </view>
  141. <view class="item-content">
  142. <text>{{ item.name }}</text>
  143. {{ item.message }}
  144. </view>
  145. </view>
  146. </template>
  147. </view>
  148. </view>
  149. <view class="jg" style="height: 99rpx;"></view>
  150. <view class="btn-wrapper flex">
  151. <view class="btn1 btn" @click="navTo('/pages/donate/progress?id=' + proInfo.id)">实时进展</view>
  152. <view class="btn2 btn" @click="proInfo.status == 2 ? want() : cant()">我要捐赠</view>
  153. </view>
  154. <uni-popup ref="popup" type="center">
  155. <view class="type-box">
  156. <image src="../../static/img/sele.png" mode="" class="bg"></image>
  157. <view class="box-title">捐款类型</view>
  158. <view class="box-tip">请选择您的捐赠身份类型</view>
  159. <view class="box-btn" @click="chooseType(0)">
  160. <image src="../../static/icon/jz1.png" mode=""></image>
  161. <view class="btn-title">个人捐赠</view>
  162. <view class="qq" :class="{ action: jxType === 0 }"><view class="yx"></view></view>
  163. </view>
  164. <view class="box-btn" @click="chooseType(1)">
  165. <image src="../../static/icon/jz2.png" mode=""></image>
  166. <view class="">企业(团队)捐赠</view>
  167. <view class="qq" :class="{ action: jxType === 1 }"><view class="yx"></view></view>
  168. </view>
  169. <view class="qr" @click="qr()">确认</view>
  170. </view>
  171. </uni-popup>
  172. </view>
  173. </template>
  174. <script>
  175. import { getProjectInfo, createProject, getDonationInfo, getAllOrder, getMyorder ,getBill,getOrderInfo,getUserList} from '../../api/money.js';
  176. let that;
  177. export default {
  178. data() {
  179. return {
  180. navList: ['捐赠详情', '捐赠反馈'],
  181. currentIndex: 0,
  182. swiperHeight: 0,
  183. navCurrentIndex: 0,
  184. jxType: 0,
  185. pid: 0,
  186. proInfo: {},
  187. typeList: [], //物资分类列表
  188. newItem: null, //最新动态,
  189. isBottom: false,
  190. backList: [], //反馈lis
  191. pushBoolen:false,
  192. endTime: null,
  193. timer: null,
  194. newtime: 0
  195. };
  196. },
  197. onReachBottom() {
  198. // this.isBottom = true;
  199. // let a = Math.floor( ((new Date()).getTime() - num*1000)/1000)
  200. // let c = setInterval((e) => {
  201. // a--
  202. // if(a == 0){
  203. // pushBoolen
  204. // clearInterval(c)
  205. // }
  206. // },1000)
  207. },
  208. onHide() {
  209. console.log('页面隐藏')
  210. clearInterval(this.timer)
  211. },
  212. filters: {
  213. time(val) {
  214. let str = '';
  215. // console.log(val)
  216. if (val) {
  217. let date = new Date(val * 1000);
  218. let Y = date.getFullYear();
  219. let M = date.getMonth() + 1 > 9 ? (date.getMonth()+1) : '0' + (date.getMonth()+1);
  220. let D = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
  221. str = Y + '.' + M + '.' + D;
  222. }
  223. return str;
  224. },
  225. type(val, typeList) {
  226. let str = '';
  227. let arr = typeList;
  228. let len = arr.length;
  229. for (let i = 0; i < len; i++) {
  230. if (arr[i].id == val) {
  231. str = arr[i].name
  232. }
  233. }
  234. return str
  235. },
  236. name(val, typeList) {
  237. let str = '';
  238. if (val) {
  239. str = val.substr(0, 1);
  240. }
  241. return str + '**';
  242. },
  243. item(val, typeList) {
  244. let str = '';
  245. if (val) {
  246. let arr = val.map(item => {
  247. for (let i = 0; i < typeList.length; i++) {
  248. if (item.project_donation_id == typeList[i].id) {
  249. str = str + typeList[i].name + ' ' + item.project_donation_num + ' ' + ' ';
  250. }
  251. }
  252. });
  253. }
  254. return str;
  255. }
  256. },
  257. onLoad(opt) {
  258. console.log('onLoadonLoadonLoadonLoadonLoadonLoadonLoadonLoad');
  259. that = this;
  260. this.pid = opt.id;
  261. console.log(this.pid, '5555555555555555555555');
  262. this.getNewOrder();
  263. this.loadDate(this.pid);
  264. this.getDonationInfo();
  265. // this.getBill()
  266. // this.getOrderInfo()
  267. clearInterval(this.timer)
  268. },
  269. methods: {
  270. loadDate(id) {
  271. getProjectInfo({
  272. id: id
  273. }).then(res => {
  274. console.log(res,'00000000000000000000000000000')
  275. let data = res.data;
  276. console.log(data, 'loaddata++++++++++');
  277. data.info = data.info.replace(/<img /g, '<img style="width:100%"');
  278. this.setTime(data.end_time)
  279. // this.endTime = data.end_time
  280. // this.newtime = Math.floor((new Date().getTime() - this.endTime*1000)/1000)
  281. // console.log(this.endTime,this.newtime,'--------------------------')
  282. // this.timer = setInterval( () => {
  283. // this.newtime--
  284. // if(this.newtime==0){
  285. // this.pushBoolen = true
  286. // clearInterval(this.timer)
  287. // }
  288. // },1000)
  289. this.proInfo = data;
  290. console.log(this.proInfo, 'this.proInfo++++++++++++++++');
  291. let arr = this.proInfo.project_donation_info;
  292. let len = arr.length;
  293. let map = {},
  294. dest = [];
  295. for (var i = 0; i < len; i++) {
  296. var ai = arr[i];
  297. if (!map[ai.project_donation_id]) {
  298. dest.push(ai);
  299. map[ai.project_donation_id] = ai;
  300. } else {
  301. for (var j = 0; j < dest.length; j++) {
  302. var dj = dest[j];
  303. if (dj.project_donation_id == ai.project_donation_id) {
  304. dj.project_donation_num = dj.project_donation_num + ai.project_donation_num;
  305. dj.received = dj.received + ai.received;
  306. dj.send_num = dj.send_num + ai.send_num;
  307. dj.transport = dj.transport + ai.transport;
  308. break;
  309. }
  310. }
  311. }
  312. }
  313. this.proInfo.project_donation_info = dest;
  314. console.log(this.proInfo.project_donation_info, 'proInfo.item++++++++++++++++++++++++++');
  315. });
  316. },
  317. navTo(url) {
  318. uni.navigateTo({
  319. url: url
  320. });
  321. },
  322. navClick(index) {
  323. this.currentIndex = index;
  324. },
  325. lookmore(index) {
  326. this.navCurrentIndex = index;
  327. },
  328. want() {
  329. if(this.pushBoolen){
  330. return this.$api.msg('捐赠活动已结束');
  331. }
  332. this.$refs.popup.open();
  333. },
  334. chooseType(index) {
  335. this.jxType = index;
  336. },
  337. qr() {
  338. this.$refs.popup.close();
  339. let wzList = [];
  340. let list = this.proInfo.project_donation_info;
  341. list.map(item => {
  342. for (let i = 0; i < this.typeList.length; i++) {
  343. if (item.project_donation_id === this.typeList[i].id) {
  344. wzList.push(this.typeList[i]);
  345. }
  346. }
  347. });
  348. console.log(wzList, '**************************************');
  349. this.navTo('/pages/donate/idonate?type=' + this.jxType + '&id=' + this.proInfo.id + '&wzlist=' + JSON.stringify(wzList));
  350. },
  351. //获取物资分类列表
  352. getDonationInfo() {
  353. getDonationInfo().then(({ data }) => {
  354. this.typeList = data;
  355. console.log(this.typeList, '获取所有物资');
  356. });
  357. },
  358. getNewOrder() {
  359. getAllOrder({
  360. project_id: this.pid,
  361. page: 1,
  362. limit: 10000
  363. }).then(({ data }) => {
  364. if (data.count !== 0) {
  365. console.log(data, '999999999999999999999999');
  366. // this.newItem = data.list[0];
  367. if (!this.newItem) {
  368. this.$set(this, 'newItem', data.list[0]);
  369. }
  370. this.backList = data.list.map(item => {
  371. switch (item.order_status) {
  372. case 6:
  373. item.time = item.feedback_time;
  374. item.message = item.feedback || '您捐赠的物资已送至受捐者,感谢您的爱心!';
  375. break;
  376. case 4:
  377. item.time = item.out_delivery_time;
  378. item.message = item.out_delivery_remark || '捐赠物资已出库';
  379. break;
  380. case 3:
  381. item.time = item.receiving_time;
  382. item.message = item.receiving_remark || '捐赠物资已入库';
  383. break;
  384. // case: '已发货'
  385. case 1:
  386. item.time = item.verify_time;
  387. item.message = item.verify_remark || '捐赠审核已通过';
  388. break;
  389. case -1:
  390. item.time = item.verify_time;
  391. item.message = item.verify_remark || '您的申请未通过,您可重新提交申请,感谢您的爱心!';
  392. break;
  393. case 0:
  394. item.time = item.add_time;
  395. item.message = item.verify_remark || '感谢您的爱心!';
  396. break;
  397. default:
  398. item.time = item.add_time;
  399. item.message = '感谢您的爱心!';
  400. }
  401. console.log(item, '捐赠反馈444444444444444444444444');
  402. return item;
  403. });
  404. console.log(this.newItem, '88888888888888888');
  405. console.log(this.backList, 'this.backList+++++++++++++++++++++++');
  406. }
  407. });
  408. },
  409. getItem(item) {
  410. // this.getDonationInfo()
  411. let str = '';
  412. console.log(item);
  413. if (item) {
  414. item.forEach(item => {
  415. for (let i = 0; i < this.typeList.length; i++) {
  416. if (item.project_donation_id === this.typeList[i].project_donation_id) {
  417. str = str + this.typeList[i].project_donation_name + item.project_donation_num + '';
  418. }
  419. }
  420. });
  421. }
  422. console.log(str, '222222222222222222');
  423. return str;
  424. },
  425. cant() {
  426. console.log(this.pushBoolen)
  427. if(this.pushBoolen){
  428. return this.$api.msg('捐赠活动已结束');
  429. }
  430. if(this.proInfo.status === -1){
  431. this.$api.msg('捐赠活动无效');
  432. }
  433. if(this.proInfo.status === 0){
  434. this.$api.msg('捐赠活动未开始');
  435. }
  436. if(this.proInfo.status === 2){
  437. this.$api.msg('捐赠活动已结束');
  438. }
  439. },
  440. getBill() {
  441. getBill({
  442. project_id: this.pid,
  443. page:1,
  444. limit:1,
  445. type: 0
  446. }).then(res => {
  447. console.log(res,'getBill++++++++++++')
  448. })
  449. },
  450. getOrderInfo() {
  451. getOrderInfo({
  452. id: 44
  453. }).then( res => {
  454. console.log(res,'getOrderInfo+++++++++++++++')
  455. })
  456. },
  457. setTime(endTime) {
  458. this.endTime = endTime
  459. this.newtime = Math.floor((new Date().getTime() - this.endTime*1000)/1000 )
  460. if(this.newtime<0){
  461. // this.pushBoolen = true
  462. console.log(this.newtime,'newtime+++++++++++++++')
  463. this.timer = setInterval(()=> {
  464. this.newtime++
  465. console.log(this.newtime)
  466. if(this.newtime==0){
  467. this.pushBoolen = true
  468. clearInterval(this.timer)
  469. }
  470. },1000)
  471. }else {
  472. this.pushBoolen = true
  473. }
  474. }
  475. }
  476. };
  477. </script>
  478. <style lang="scss" scoped>
  479. page {
  480. width: 100%;
  481. }
  482. .top {
  483. // height: 863rpx;
  484. background-color: #fff;
  485. border-top: 1rpx solid #f6f6f6;
  486. padding-top: 33rpx;
  487. margin-bottom: 20rpx;
  488. image {
  489. display: block;
  490. width: 680rpx;
  491. height: 375rpx;
  492. border-radius: 20rpx;
  493. margin: 0 auto;
  494. // background-color: red;
  495. }
  496. .title {
  497. width: 580rpx;
  498. font-size: 32rpx;
  499. font-family: PingFang SC;
  500. font-weight: bold;
  501. color: #333333;
  502. line-height: 1;
  503. padding-top: 28rpx;
  504. padding-left: 42rpx;
  505. margin-bottom: 39rpx;
  506. }
  507. .base-info {
  508. font-size: 27rpx;
  509. font-family: PingFang SC;
  510. font-weight: 500;
  511. color: #999999;
  512. line-height: 1;
  513. display: flex;
  514. padding: 0 56rpx;
  515. flex-wrap: wrap;
  516. .item {
  517. width: 50%;
  518. padding-bottom: 40rpx;
  519. .status {
  520. color: red;
  521. font-weight: bold;
  522. }
  523. text {
  524. font-size: 26rpx;
  525. font-family: PingFang SC;
  526. font-weight: 500;
  527. color: #666666;
  528. display: inline-block;
  529. margin-right: 15rpx;
  530. }
  531. }
  532. }
  533. .dynamic {
  534. width: 666rpx;
  535. height: 111rpx;
  536. background: #efefef;
  537. border-radius: 10rpx;
  538. margin: 5rpx auto 0;
  539. .left {
  540. width: 115rpx;
  541. height: 111rpx;
  542. background: #5c93fc;
  543. border-radius: 10rpx 0px 0px 10rpx;
  544. font-size: 28rpx;
  545. font-family: PingFang SC;
  546. font-weight: 500;
  547. color: #ffffff;
  548. line-height: 34rpx;
  549. padding: 22rpx 29rpx;
  550. margin-right: 15rpx;
  551. }
  552. .right {
  553. font-size: 22rpx;
  554. font-family: PingFang SC;
  555. font-weight: 400;
  556. color: #333333;
  557. line-height: 1;
  558. padding: 12rpx 0;
  559. flex-direction: column;
  560. justify-content: space-between;
  561. text {
  562. color: red;
  563. font-weight: bold;
  564. }
  565. }
  566. }
  567. }
  568. .content {
  569. .content-nav {
  570. height: 82rpx;
  571. background: #ffffff;
  572. font-size: 30rpx;
  573. font-family: PingFang SC;
  574. font-weight: 500;
  575. color: #999999;
  576. line-height: 82rpx;
  577. justify-content: space-around;
  578. .active {
  579. border-bottom: 4rpx solid #fa7e67;
  580. color: #fa7e67;
  581. font-weight: bold;
  582. }
  583. }
  584. }
  585. .tip {
  586. margin-left: 42rpx;
  587. font-size: 30rpx;
  588. font-family: PingFang SC;
  589. font-weight: bold;
  590. color: #333333;
  591. line-height: 1;
  592. margin-bottom: 34rpx;
  593. view {
  594. display: inline-block;
  595. width: 4rpx;
  596. height: 30rpx;
  597. background: #fa7e67;
  598. border-radius: 2rpx;
  599. margin-right: 9rpx;
  600. position: relative;
  601. bottom: -2rpx;
  602. }
  603. }
  604. .btn-wrapper {
  605. position: fixed;
  606. bottom: 0;
  607. width: 100%;
  608. .btn {
  609. width: 50%;
  610. text-align: center;
  611. height: 99rpx;
  612. line-height: 99rpx;
  613. font-size: 34rpx;
  614. font-family: PingFang SC;
  615. font-weight: 500;
  616. color: #ffffff;
  617. }
  618. .btn1 {
  619. background-color: #f7c03e;
  620. }
  621. .btn2 {
  622. background-color: #fa7e67;
  623. }
  624. }
  625. .item-detail {
  626. height: 100%;
  627. padding-top: 42rpx;
  628. .item-content {
  629. padding: 0 78rpx 0 48rpx;
  630. font-size: 26rpx;
  631. font-family: PingFang SC;
  632. font-weight: 500;
  633. color: #666666;
  634. line-height: 44rpx;
  635. margin-bottom: 32rpx;
  636. }
  637. .item-needs {
  638. .need-item {
  639. width: 666rpx;
  640. height: 100rpx;
  641. background: #f3f3f3;
  642. border-radius: 10rpx;
  643. margin: 0 auto;
  644. font-size: 26rpx;
  645. font-family: PingFang SC;
  646. font-weight: 500;
  647. color: #333333;
  648. margin-bottom: 10rpx;
  649. padding-top: 20rpx;
  650. padding-left: 13rpx;
  651. line-height: 1;
  652. view {
  653. margin-bottom: 15rpx;
  654. text {
  655. color: #e80000;
  656. }
  657. }
  658. }
  659. }
  660. }
  661. .feedback {
  662. padding: 25rpx 41rpx 36rpx;
  663. .feedback-nav {
  664. margin-bottom: 20rpx;
  665. .nav-item {
  666. display: inline-block;
  667. width: 100rpx;
  668. height: 55rpx;
  669. background: #fdcbc2;
  670. box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
  671. border-radius: 10rpx;
  672. margin-right: 20rpx;
  673. text-align: center;
  674. line-height: 55rpx;
  675. font-size: 24rpx;
  676. font-family: PingFang SC;
  677. font-weight: 500;
  678. color: #ffffff;
  679. }
  680. .nav-item-err {
  681. color: #999999;
  682. background: #f1f1f0;
  683. }
  684. .action {
  685. background: #fa7e67;
  686. color: #fff;
  687. }
  688. }
  689. .feedback-content {
  690. .overall {
  691. .title {
  692. width: 667rpx;
  693. height: 75rpx;
  694. background: #fa7e67;
  695. box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
  696. border-radius: 10rpx 10rpx 0px 0px;
  697. font-size: 28rpx;
  698. font-family: PingFang SC;
  699. font-weight: bold;
  700. color: #ffffff;
  701. line-height: 75rpx;
  702. padding-left: 17rpx;
  703. }
  704. .content {
  705. padding: 33rpx 36rpx 43rpx 30rpx;
  706. width: 667rpx;
  707. background-color: #fff;
  708. box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
  709. border-radius: 0px 0px 10rpx 10rpx;
  710. font-size: 26rpx;
  711. font-family: PingFang SC;
  712. font-weight: 500;
  713. color: #999999;
  714. line-height: 42rpx;
  715. }
  716. }
  717. .feedback-item {
  718. margin: 20rpx auto;
  719. // display: flex;
  720. background-color: #fff;
  721. box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
  722. border-radius: 10rpx 10rpx 10rpx;
  723. .item-top {
  724. height: 118rpx;
  725. border-radius: 10px 10px 0 0;
  726. border-bottom: 1px solid #ececec;
  727. padding: 25rpx 0 0 17rpx;
  728. display: flex;
  729. image {
  730. width: 77rpx;
  731. height: 77rpx;
  732. border-radius: 50%;
  733. // background-color: red;
  734. margin-right: 12rpx;
  735. }
  736. .item-name-time {
  737. .item-name {
  738. font-size: 28rpx;
  739. font-family: PingFang SC;
  740. font-weight: bold;
  741. color: #333333;
  742. line-height: 35rpx;
  743. }
  744. .item-time {
  745. font-size: 24rpx;
  746. font-family: PingFang SC;
  747. font-weight: 500;
  748. color: #999999;
  749. line-height: 50rpx;
  750. }
  751. }
  752. }
  753. .item-content {
  754. padding: 25rpx 47rpx 40rpx 30rpx;
  755. border-radius: 0 0 10rpx 10rpx;
  756. font-size: 26rpx;
  757. font-family: PingFang SC;
  758. font-weight: 500;
  759. color: #999;
  760. line-height: 42rpx;
  761. text {
  762. color: #e80000;
  763. font-weight: bold;
  764. }
  765. }
  766. }
  767. }
  768. }
  769. .type-box {
  770. width: 542rpx;
  771. height: 575rpx;
  772. // background: linear-gradient(0deg, rgba(249, 98, 105, 0.06), rgba(255, 255, 255, 0.06));
  773. border-radius: 20rpx;
  774. background-color: #fff;
  775. position: relative;
  776. .bg {
  777. width: 100%;
  778. height: 138rpx;
  779. position: absolute;
  780. }
  781. .box-title {
  782. text-align: center;
  783. font-size: 36rpx;
  784. font-family: PingFang SC;
  785. font-weight: bold;
  786. color: #333333;
  787. line-height: 1;
  788. padding-top: 77rpx;
  789. }
  790. .box-tip {
  791. text-align: center;
  792. font-size: 24rpx;
  793. font-family: PingFang SC;
  794. font-weight: 500;
  795. color: #808080;
  796. line-height: 1;
  797. padding-top: 12rpx;
  798. margin-bottom: 43rpx;
  799. }
  800. .box-btn {
  801. margin: 0 auto;
  802. width: 460rpx;
  803. height: 95rpx;
  804. display: flex;
  805. align-items: center;
  806. border-bottom: 1px solid #f3efef;
  807. position: relative;
  808. image {
  809. height: 43rpx;
  810. width: 43rpx;
  811. // background-color: red;
  812. margin-right: 15rpx;
  813. }
  814. .qq {
  815. width: 32rpx;
  816. height: 32rpx;
  817. border: 1px solid #808080;
  818. opacity: 0.5;
  819. border-radius: 50%;
  820. position: absolute;
  821. right: 0;
  822. }
  823. .action {
  824. border-color: #fa7e67;
  825. // position: relative;
  826. .yx {
  827. width: 20rpx;
  828. height: 20rpx;
  829. background: #fa7e67;
  830. // border: 1px solid #FA7E67;
  831. border-radius: 50%;
  832. position: absolute;
  833. top: 0;
  834. bottom: 0;
  835. left: 0;
  836. right: 0;
  837. margin: auto;
  838. }
  839. }
  840. }
  841. .qr {
  842. width: 460rpx;
  843. height: 71rpx;
  844. background: #fa7e67;
  845. box-shadow: 0px 16rpx 16rpx 0px rgba(250, 126, 103, 0.5);
  846. border-radius: 10rpx;
  847. font-size: 28rpx;
  848. font-family: PingFang SC;
  849. font-weight: 500;
  850. color: #ffffff;
  851. text-align: center;
  852. line-height: 71rpx;
  853. margin: 62rpx auto 0;
  854. }
  855. }
  856. .without {
  857. padding: 40rpx;
  858. width: 100%;
  859. height: 100%;
  860. text-align: center;
  861. }
  862. </style>