info.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. <template>
  2. <view class="main">
  3. <view class="top">
  4. <view class="left">
  5. <image v-if="info.file.length>0" class="image" :src="info.file&&info.file.length>0?info.file[0].url:''"
  6. mode="aspectFill">
  7. <image v-else class="image" :src="config.file&&config.file.length>0?config.file[0].url:''"
  8. mode="aspectFill">
  9. </view>
  10. <view class="right">
  11. <view class="right_1 textOver">{{info.name||'暂无'}}</view>
  12. <view class="right_2">已售 {{info.buy_num||0}}</view>
  13. <view class="right_3">
  14. <uni-fav :checked="info.is_collect" @tap.stop="onClick(info)" />
  15. </view>
  16. </view>
  17. </view>
  18. <view class="center">
  19. <scroll-view scroll-y="true" class="scroll-view">
  20. <view class="list-scroll-view">
  21. <view class="center_1" v-if="info.buy_explain">
  22. <view class="name">购买须知</view>
  23. <view class="cotent">
  24. <rich-text :nodes="formatRichText(info.buy_explain)"></rich-text>
  25. </view>
  26. </view>
  27. <view class="center_1" v-if="info.use_explain">
  28. <view class="name">使用说明</view>
  29. <view class="cotent">
  30. <rich-text :nodes="formatRichText(info.use_explain)"></rich-text>
  31. </view>
  32. </view>
  33. <view class="center_1" v-if="info.money_explain">
  34. <view class="name">费用说明</view>
  35. <view class="cotent">
  36. <rich-text :nodes="formatRichText(info.money_explain)"></rich-text>
  37. </view>
  38. </view>
  39. <view class="center_1" v-if="info.other_explain">
  40. <view class="name">其他说明</view>
  41. <view class="cotent">
  42. <rich-text :nodes="formatRichText(info.other_explain)"></rich-text>
  43. </view>
  44. </view>
  45. <view class="evaluate" v-if="rateList.length>0">
  46. <view class="evaluate_1">评价</view>
  47. <scroll-view scroll-y="true" class="scroll">
  48. <view class="list-scroll-view">
  49. <view class="list" v-for="(item,index) in rateList" :key="index">
  50. <image class="image"
  51. :src="item.user.logo&&item.user.logo.length>0?item.user.logo[0].url:'../../static/my.png'"
  52. mode="aspectFill">
  53. </image>
  54. <view class="other">
  55. <view class="name textOver">{{item.user.nick_name||'暂无'}}</view>
  56. <view class="content"><uni-rate size="18" :readonly="true" :value="item.rate" />
  57. </view>
  58. <view class="content">{{item.content||'暂无'}}</view>
  59. <view class="content">
  60. <div v-for="(i,indexx) in item.file" :key="indexx">
  61. <image class="images" :src="i.url" mode="aspectFill">
  62. </image>
  63. </div>
  64. </view>
  65. <view class="name">{{item.create_time||'暂无'}}</view>
  66. </view>
  67. </view>
  68. <view class="is_bottom" v-if="is_bottom">
  69. <text>{{config.bottom_title||'到底了!'}}</text>
  70. </view>
  71. </view>
  72. </scroll-view>
  73. </view>
  74. </view>
  75. </scroll-view>
  76. </view>
  77. <view class="foot">
  78. <view class="money">
  79. <text>¥{{info.original_price||'暂无'}}</text>
  80. <text>¥{{info.money||'暂无'}}起</text>
  81. </view>
  82. <view class="button">
  83. <button type="warn" @tap.stop="toBuy(info)">预订</button>
  84. </view>
  85. </view>
  86. </view>
  87. </template>
  88. <script>
  89. import moment from 'moment';
  90. export default {
  91. data() {
  92. return {
  93. id: '',
  94. user: {},
  95. config: {},
  96. info: {
  97. file: []
  98. },
  99. // 字典表
  100. typeList: [],
  101. // 评价
  102. rateList: []
  103. }
  104. },
  105. onLoad: async function(e) {
  106. const that = this;
  107. that.$set(that, `id`, e && e.id || '');
  108. that.searchConfig();
  109. },
  110. onShow: async function(e) {
  111. const that = this;
  112. await that.searchToken();
  113. await that.searchOther();
  114. await that.search();
  115. },
  116. methods: {
  117. searchToken() {
  118. const that = this;
  119. try {
  120. const res = uni.getStorageSync('token');
  121. if (res) that.$set(that, `user`, res);
  122. } catch (e) {
  123. uni.showToast({
  124. title: err.errmsg,
  125. icon: 'error',
  126. duration: 2000
  127. });
  128. }
  129. },
  130. searchConfig() {
  131. const that = this;
  132. try {
  133. const res = uni.getStorageSync('config');
  134. if (res) that.$set(that, `config`, res);
  135. } catch (e) {
  136. uni.showToast({
  137. title: err.errmsg,
  138. icon: 'error',
  139. duration: 2000
  140. });
  141. }
  142. },
  143. async search() {
  144. const that = this;
  145. if (that.id) {
  146. const info = {}
  147. if (that.user._id) info.user = that.user._id
  148. const res = await that.$api(`/ticket/ticket/${that.id}`, 'GET', info)
  149. if (res.errcode == '0') {
  150. const type = that.typeList.find(i => i.value == res.data.type)
  151. if (type) res.data.zhType = type.label
  152. that.$set(that, `info`, res.data)
  153. } else {
  154. uni.showToast({
  155. title: res.errmsg,
  156. });
  157. }
  158. // 评价
  159. const rate = await that.$api(`/rateOrder`, 'GET', {
  160. source: that.id,
  161. status: '1',
  162. })
  163. if (rate.errcode == '0') that.$set(that, `rateList`, rate.data);
  164. }
  165. },
  166. // 处理富文本
  167. formatRichText(html) {
  168. if (html) {
  169. // 富文本内容格式化
  170. return html && html.replace(/<img[^>]*>/gi, function(match, capture) {
  171. // 查找所有的 img 元素
  172. return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi,
  173. '')
  174. // 删除找到的所有 img 元素中的 style 属性
  175. }).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性,并设置宽度为 100%
  176. }
  177. },
  178. // 收藏
  179. async onClick(item) {
  180. const that = this;
  181. if (that.user && that.user._id) {
  182. let res;
  183. if (item.is_collect == false) {
  184. const form = {
  185. user: that.user._id,
  186. source: item._id,
  187. source_type: "ticket",
  188. type: '1',
  189. create_time: moment().format('YYYY-MM-DD HH:mm:ss'),
  190. }
  191. res = await that.$api(`/like`, 'POST', form);
  192. } else res = await that.$api(`/like/${item.collect}`, 'DELETE', {})
  193. if (res.errcode == '0') that.search()
  194. } else {
  195. uni.navigateTo({
  196. url: `/pagesIndex/login/index`
  197. })
  198. }
  199. },
  200. // 预订
  201. toBuy(item) {
  202. const that = this;
  203. if (that.user && that.user._id) {
  204. uni.navigateTo({
  205. url: `/pagesIndex/order/order?id=${item.id||item._id}`
  206. })
  207. } else {
  208. uni.navigateTo({
  209. url: `/pagesIndex/login/index`
  210. })
  211. }
  212. },
  213. // 查询其他信息
  214. async searchOther() {
  215. const that = this;
  216. let res;
  217. // 查询类型
  218. res = await that.$api(`/dictData`, 'GET', {
  219. type: 'project_type',
  220. is_use: '0',
  221. })
  222. if (res.errcode == '0') that.$set(that, `typeList`, res.data);
  223. },
  224. }
  225. }
  226. </script>
  227. <style lang="scss" scoped>
  228. .main {
  229. display: flex;
  230. flex-direction: column;
  231. width: 100vw;
  232. height: 100vh;
  233. .top {
  234. display: flex;
  235. padding: 1vw;
  236. border-radius: 5px;
  237. border: 1px solid var(--f9Color);
  238. .left {
  239. width: 25vw;
  240. .image {
  241. width: 100%;
  242. height: 25vw;
  243. }
  244. }
  245. .right {
  246. padding: 2vw;
  247. width: 65vw;
  248. margin: 0 0 0 2vw;
  249. .right_1 {
  250. font-size: var(--font18Size);
  251. font-weight: bold;
  252. padding: 0 0 2px 0;
  253. }
  254. .right_2 {
  255. padding: 0 0 2px 0;
  256. font-size: var(--font14Size);
  257. color: var(--f85Color);
  258. }
  259. .right_3 {
  260. display: flex;
  261. justify-content: flex-end;
  262. }
  263. }
  264. }
  265. .center {
  266. position: relative;
  267. flex-grow: 1;
  268. .center_1 {
  269. padding: 2vw;
  270. .name {
  271. padding: 3vw 0;
  272. font-size: var(--font18Size);
  273. font-weight: bold;
  274. }
  275. .content {
  276. padding: 2vw;
  277. }
  278. }
  279. .evaluate {
  280. .evaluate_1 {
  281. padding: 2vw;
  282. font-size: var(--font18Size);
  283. font-weight: bold;
  284. border-bottom: 1px solid var(--f9Color);
  285. }
  286. .list {
  287. display: flex;
  288. align-items: center;
  289. padding: 2vw;
  290. .image {
  291. width: 10vw;
  292. height: 10vw;
  293. border-radius: 10vw;
  294. }
  295. .other {
  296. display: flex;
  297. flex-direction: column;
  298. width: 80vw;
  299. padding: 2vw;
  300. border-bottom: 1px solid var(--f9Color);
  301. font-size: var(--font12Size);
  302. .name {
  303. color: var(--f85Color);
  304. padding: 2px 0;
  305. }
  306. .content {
  307. display: flex;
  308. margin: 1vw 0;
  309. .images {
  310. width: 15vw;
  311. height: 15vw;
  312. margin: 0 5px 0 0;
  313. }
  314. }
  315. }
  316. }
  317. }
  318. }
  319. .foot {
  320. display: flex;
  321. justify-content: space-between;
  322. align-items: center;
  323. padding: 2vw;
  324. background-color: var(--mainColor);
  325. .money {
  326. text-align: right;
  327. color: var(--fF0Color);
  328. font-size: var(--font16Size);
  329. font-weight: bold;
  330. text:first-child {
  331. text-decoration: line-through;
  332. color: var(--f69Color);
  333. font-size: var(--font12Size);
  334. font-weight: 400;
  335. }
  336. }
  337. .button {
  338. button {
  339. width: 30vw;
  340. font-size: var(--font14Size);
  341. border-radius: 40px;
  342. background: linear-gradient(to right, #00BFFF, #007AFF);
  343. }
  344. }
  345. }
  346. }
  347. .scroll-view {
  348. position: absolute;
  349. top: 0;
  350. left: 0;
  351. right: 0;
  352. bottom: 0;
  353. .list-scroll-view {
  354. display: flex;
  355. flex-direction: column;
  356. }
  357. }
  358. .is_bottom {
  359. width: 100%;
  360. text-align: center;
  361. text {
  362. padding: 2vw 0;
  363. display: inline-block;
  364. color: var(--f85Color);
  365. font-size: var(--font14Size);
  366. }
  367. }
  368. </style>