movie.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  1. <template>
  2. <view class="page-movie" v-if="info">
  3. <uni-nav-bar :fixed="true" height="180rpx " title="活动详情" color="#FFF" left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
  4. <view class="movie-bg">
  5. <view class="move-content">
  6. <!-- 影剧信息 -->
  7. <view class="section1">
  8. <view class="movie-img">
  9. <image :src="info.imageUrl" mode="aspectFill" class="img"></image>
  10. </view>
  11. <view class="intro">
  12. <view class="title">{{info.name}}</view>
  13. <view class="tips">{{info.tips}}</view>
  14. </view>
  15. <view class="price">
  16. <text class="sign">¥</text>{{info.price}}
  17. </view>
  18. </view>
  19. <!-- 联系地址 -->
  20. <view class="section2">
  21. <view class="address">
  22. <block v-if="plan!=null">
  23. <view class="part">
  24. <view class="icon">
  25. <uni-icons custom-prefix="custom-icon" type="calendar" size="20" color="#bd3c3c"></uni-icons>
  26. </view>
  27. <view class="text">
  28. 日期:{{plan.startDate}} - {{plan.endDate}} ({{plan.startTime}} - {{plan.endTime}})
  29. </view>
  30. </view>
  31. </block>
  32. <block v-else>
  33. <view class="part">
  34. <view class="icon">
  35. <uni-icons custom-prefix="custom-icon" type="calendar" size="20" color="#bd3c3c"></uni-icons>
  36. </view>
  37. <view class="text">
  38. 时间:暂无时间按排
  39. </view>
  40. </view>
  41. </block>
  42. <view class="part" @click="onOpenMap">
  43. <view class="icon">
  44. <uni-icons custom-prefix="custom-icon" type="location" size="20" color="#bd3c3c"></uni-icons>
  45. </view>
  46. <view class="text" >
  47. 地点:{{info.address}}
  48. </view>
  49. </view>
  50. </view>
  51. <view class="customer">
  52. <view class="icon">
  53. <button open-type="contact" hover-class="none" style="background: none;"><uni-icons custom-prefix="custom-icon" type="chat" size="20" color="#bd3c3c"></uni-icons> </button>
  54. </view>
  55. <view class="name">客服</view>
  56. </view>
  57. </view>
  58. <!-- 主持人 -->
  59. <view class="section3">
  60. <ChairMan :type="info.type" :info="performer"></ChairMan>
  61. </view>
  62. <!-- 拼车中 -->
  63. <view class="section4" v-if="info.type=='1' && plan!=null">
  64. <view class="spare">
  65. <view class="status">
  66. <view class="txt">拼车中</view>
  67. <view class="status1">
  68. 接受拼车中
  69. </view>
  70. </view>
  71. <view class="time">
  72. <view class="part">
  73. <view class="txt">截止拼车</view>
  74. <view class="result">当前预约人数:</view>
  75. </view>
  76. <view class="part">
  77. <view class="txt">
  78. <view>{{plan.zcDate}}</view>
  79. <view>{{plan.startTime}}-{{plan.endTime}}</view>
  80. </view>
  81. <view class="result">{{plan.reqQty}}/{{plan.allowReqQty}}</view>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="btns">
  86. <button class="btn-share" open-type="share" hover-class="none" >分享拼车</button>
  87. </view>
  88. </view>
  89. <view class="section4" v-if="info.type=='2'">
  90. <view class="spare">
  91. <view class="status">
  92. <view class="status1">
  93. 接受预约中
  94. </view>
  95. </view>
  96. <view class="time" v-if="plan!=null">
  97. <view class="part">
  98. <view class="result" style="padding-left:10px;padding-top: 20px;"><text>当前预约人数:{{plan.reqQty+info.underLineQty}}/{{plan.allowReqQty+info.underLineQty}}人</text></view>
  99. </view>
  100. </view>
  101. </view>
  102. <view class="btns">
  103. <button class="btn-share" open-type="share" hover-class="none" >分享活动</button>
  104. </view>
  105. </view>
  106. <!-- <view class="section5" v-if="info.perFormerList.length>0">
  107. <view class="header-list">
  108. <block v-for="(it,index) in info.perFormerList">
  109. <view class="user">
  110. <image :src="it.image" class="img"></image>
  111. </view>
  112. </block>
  113. </view>
  114. </view> -->
  115. <!-- 角色介绍 -->
  116. <!-- <view class="section6">
  117. <view class="title">角色介绍</view>
  118. <view class="users">
  119. <view class="user">
  120. <view class="img">
  121. <image src="../../../static/temp/temp.png" class="icon"></image>
  122. </view>
  123. <view class='name'>姓名</view>
  124. </view>
  125. <view class="user">
  126. <view class="img">
  127. <image src="../../../static/temp/temp.png" class="icon"></image>
  128. </view>
  129. <view class='name'>姓名</view>
  130. </view>
  131. </view>
  132. </view> -->
  133. <view class="section7">
  134. <view class="title">活动介绍</view>
  135. <view class="content">
  136. <rich-text :nodes="info.content"></rich-text>
  137. </view>
  138. <view class="title" v-if="info.comments.length>0">往期活动</view>
  139. <view class="content1" style="width:100%!important;">
  140. <block v-for="(it,index) in info.comments" :key="index">
  141. <image :src="it" mode="widthFix" style="width:100%!important; " ></image>
  142. </block>
  143. </view>
  144. </view>
  145. </view>
  146. <view class="footer">
  147. <view class="footer-left">
  148. <!-- <view class="step-qty">
  149. <uni-number-box />
  150. </view>
  151. <view class="intro">
  152. 单人限购2张
  153. </view> -->
  154. </view>
  155. <view class="right">
  156. <text class="text" @click="onOpenTimer">{{ info.type === 1 ? '确认拼场' : (info.type === 2 ? '预约活动' : '') }}</text>
  157. </view>
  158. </view>
  159. </view>
  160. <uni-popup ref="calenderPop">
  161. <view class="times">
  162. <view class="calender-box">
  163. <uni-calendar
  164. class="uni-calendar--hook"
  165. :lunar="true"
  166. :selected="planSelected"
  167. :showMonth="true"
  168. :startDate="startDate"
  169. @change="onChangeCalender"
  170. />
  171. </view>
  172. </view>
  173. </uni-popup>
  174. <map id="map" ref="map" style="display: none;" v-if="info && info.id>0" :show-location="true" :latitude="info.latitude" :longitude="info.longitude"></map>
  175. <!-- <uni-popup ref="yyForm">
  176. <view class="yyform-item" v-if="currentReq!=null">
  177. <view class="item">
  178. <view class="caption">预约日期:</view>
  179. <view class="text">
  180. <uni-data-select
  181. :value="dataForm.yyDate"
  182. :localdata="planListItem"
  183. @change="onChangeYYDate"
  184. ></uni-data-select>
  185. </view>
  186. </view>
  187. <view class="item">
  188. <view class="caption">预约人数:</view>
  189. <view class="text">
  190. <uni-easyinput type="number" v-model="dataForm.yyQty" value="1" placeholder="请输入预约人数"></uni-easyinput>
  191. </view>
  192. </view>
  193. <view class="item">
  194. <view class="caption">预约人姓名:</view>
  195. <view class="text">
  196. <uni-easyinput type="text" v-model="dataForm.yyname" placeholder="请填写预约人姓名"></uni-easyinput>
  197. </view>
  198. </view>
  199. <view class="item">
  200. <button class="btn">提交预约</button>
  201. </view>
  202. </view>
  203. </uni-popup> -->
  204. </view>
  205. </template>
  206. <script>
  207. import {
  208. mapState,
  209. mapGetters,
  210. mapMutations
  211. } from 'vuex'
  212. const app = getApp();
  213. let hideLoading = true;
  214. import ChairMan from "@/components/ChairMan/ChairMan.vue"
  215. import {rebuildHtml} from "@/utils/util.js"
  216. export default {
  217. components:{
  218. ChairMan,
  219. },
  220. computed: {
  221. ...mapState(['store_id','systemInfo'])
  222. },
  223. data() {
  224. return {
  225. movieId:0,
  226. info:null,
  227. performer:null,
  228. plan:[],
  229. planList:[],
  230. planSelected:[],
  231. startDate:'',
  232. currentReq:null,
  233. planListItem:[],
  234. longitude:'',
  235. latitude:'',
  236. dataForm:{
  237. zcId:0,
  238. reqDate:'',
  239. userId:0,
  240. },
  241. };
  242. },
  243. onLoad(option){
  244. this.movieId=option.id||0;
  245. this.dataForm.zcId=this.movieId;
  246. this.dataForm.userId=uni.getStorageSync("user_id");
  247. console.log(this.dataForm.userId);
  248. },
  249. onReady() {
  250. setTimeout(()=>{
  251. this.initMovieInfo();
  252. },300);
  253. },
  254. methods:{
  255. onChangeYYDate(e){
  256. },
  257. //切换日期
  258. onChangeCalender(e){
  259. let _this=this;
  260. if(e.extraInfo?.data!=undefined){
  261. if(e.extraInfo.data.count.readyQty<=e.extraInfo.data.count.totalQty){
  262. _this.dataForm.reqDate=e.extraInfo.date;
  263. // #ifdef MP-WEIXIN
  264. if(_this.dataForm.userId<=0){
  265. uni.showToast({
  266. title:"用户信息不存在",
  267. icon:'none'
  268. });
  269. return false;
  270. }
  271. _this.confirmCreateReq();
  272. // #endif
  273. // #ifndef MP-WEIXIN
  274. uni.showToast({
  275. title:'请使用小程序提交',
  276. icon:'none'
  277. })
  278. // #endif
  279. }
  280. }
  281. },
  282. onOpenMap(e){
  283. let _this=this;
  284. console.log(_this.info);
  285. _this._mapContext = uni.createMapContext("map", _this);
  286. _this._mapContext.openMapApp({
  287. longitude:parseFloat(_this.info.longitude),
  288. latitude:parseFloat(_this.info.latitude),
  289. destination:_this.info.address,
  290. success:(res)=>{
  291. console.log("success");
  292. },
  293. fail:(res)=>{
  294. console.log("fail");
  295. },
  296. complete:(res)=>{
  297. console.log(_this.info);
  298. }
  299. })
  300. },
  301. confirmCreateReq(){
  302. let _this=this;
  303. uni.showModal({
  304. title:'确认预约',
  305. content:'您是否确认提交预约信息',
  306. cancelText:"取消",
  307. confirmText:"确认",
  308. success:(confirm)=>{
  309. if(confirm.confirm){
  310. _this.$http.request('zc/createReq',_this.dataForm, "", "", true).then(res => {
  311. if(res.code==200){
  312. if(res.data.payStatus=='2'){
  313. //末支付
  314. // #ifdef MP-WEIXIN
  315. wx.requestPayment({
  316. timeStamp: res.data.timeStamp,
  317. nonceStr: res.data.nonceStr,
  318. package: res.data.package,
  319. signType: res.data.signType,
  320. paySign: res.data.paySign,
  321. success: (res) => {
  322. uni.showToast({
  323. title:'您的预约申请已成功提交',
  324. icon:'success',
  325. success: (res) => {
  326. _this.$refs.calenderPop.close();
  327. }
  328. })
  329. },
  330. fail: (res) => {
  331. uni.showToast({
  332. title:'支付失败',
  333. icon:'error',
  334. })
  335. }
  336. })
  337. // #endif
  338. }else{
  339. uni.showToast({
  340. title:'您的预约申请已成功提交',
  341. icon:'success',
  342. success: () => {
  343. _this.$refs.calenderPop.close();
  344. }
  345. })
  346. }
  347. }
  348. }).catch(err => {})
  349. }
  350. }
  351. })
  352. },
  353. onBack(e){
  354. uni.navigateBack(-1);
  355. },
  356. onOpenTimer(e){
  357. if(this.plan==null){
  358. uni.showToast({
  359. title:"活动已过期,或暂无计划",
  360. icon:"error"
  361. })
  362. return;
  363. }
  364. this.$refs.calenderPop.open('bottom');
  365. let d=new Date();
  366. this.startDate=d.getFullYear()+"-"+(d.getMonth()+1)+'-'+d.getDate();
  367. this.loadPlanList();
  368. },
  369. //加载计划列表
  370. loadPlanList(){
  371. let _this=this;
  372. _this.$http.request('zc/plan', {
  373. zcId:_this.info.id,
  374. }, "", "", hideLoading).then(res => {
  375. _this.planList=res.data.dataList;
  376. _this.planSelected=res.data.dataList.map(res=>{
  377. let info=res.count.readyQty>=res.count.totalQty?"已约满":"可预约"+res.count.readyQty+"/"+res.count.totalQty;
  378. return {
  379. date:res.date,
  380. info:info,
  381. data:{
  382. ...res,
  383. custom:'已预约'+res.count.readyQty+"/"+res.count.totalQty+"人",
  384. name:'预约信息'
  385. }
  386. }
  387. })
  388. }).catch(err => {})
  389. },
  390. //加载活动信息
  391. initMovieInfo(){
  392. let _this=this;
  393. _this.$http.request('zc/info', {
  394. id:this.movieId
  395. }, "", "", hideLoading).then(res => {
  396. _this.info=res.data.info;
  397. _this.performer=res.data.perFormer;
  398. _this.plan=res.data.plan;
  399. _this.info.content=_this.info.content.replace(/\<img/gi, '<img style="width:100%";height:auto')
  400. _this.info.comments=_this.info.comments.replace(/\<img/gi, '<img style="width:100%";height:auto')
  401. }).catch(err => {})
  402. },
  403. }
  404. }
  405. </script>
  406. <style lang="scss">
  407. @import './movie.scss';
  408. </style>