123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463 |
- <template>
- <view class="page-movie" v-if="info">
-
- <uni-nav-bar :fixed="true" height="180rpx " title="活动详情" color="#FFF" left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
-
- <view class="movie-bg">
- <view class="move-content">
- <!-- 影剧信息 -->
- <view class="section1">
- <view class="movie-img">
- <image :src="info.imageUrl" mode="aspectFill" class="img"></image>
- </view>
- <view class="intro">
- <view class="title">{{info.name}}</view>
- <view class="tips">{{info.tips}}</view>
-
- </view>
- <view class="price">
- <text class="sign">¥</text>{{info.price}}
- </view>
- </view>
- <!-- 联系地址 -->
- <view class="section2">
- <view class="address">
- <block v-if="plan!=null">
-
- <view class="part">
- <view class="icon">
- <uni-icons custom-prefix="custom-icon" type="calendar" size="20" color="#bd3c3c"></uni-icons>
- </view>
- <view class="text">
- 日期:{{plan.startDate}} - {{plan.endDate}} ({{plan.startTime}} - {{plan.endTime}})
- </view>
- </view>
- </block>
- <block v-else>
- <view class="part">
- <view class="icon">
- <uni-icons custom-prefix="custom-icon" type="calendar" size="20" color="#bd3c3c"></uni-icons>
- </view>
- <view class="text">
- 时间:暂无时间按排
- </view>
- </view>
-
- </block>
- <view class="part" @click="onOpenMap">
- <view class="icon">
- <uni-icons custom-prefix="custom-icon" type="location" size="20" color="#bd3c3c"></uni-icons>
- </view>
- <view class="text" >
- 地点:{{info.address}}
- </view>
- </view>
- </view>
- <view class="customer">
- <view class="icon">
- <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>
- </view>
- <view class="name">客服</view>
- </view>
- </view>
-
- <!-- 主持人 -->
-
- <view class="section3">
- <ChairMan :type="info.type" :info="performer"></ChairMan>
- </view>
- <!-- 拼车中 -->
- <view class="section4" v-if="info.type=='1' && plan!=null">
- <view class="spare">
- <view class="status">
- <view class="txt">拼车中</view>
- <view class="status1">
- 接受拼车中
- </view>
-
- </view>
- <view class="time">
- <view class="part">
- <view class="txt">截止拼车</view>
- <view class="result">当前预约人数:</view>
- </view>
- <view class="part">
- <view class="txt">
- <view>{{plan.zcDate}}</view>
- <view>{{plan.startTime}}-{{plan.endTime}}</view>
- </view>
-
- <view class="result">{{plan.reqQty}}/{{plan.allowReqQty}}</view>
- </view>
- </view>
- </view>
- <view class="btns">
- <button class="btn-share" open-type="share" hover-class="none" >分享拼车</button>
- </view>
- </view>
-
-
-
- <view class="section4" v-if="info.type=='2'">
- <view class="spare">
- <view class="status">
-
- <view class="status1">
- 接受预约中
- </view>
-
- </view>
- <view class="time" v-if="plan!=null">
- <view class="part">
- <view class="result" style="padding-left:10px;padding-top: 20px;"><text>当前预约人数:{{plan.reqQty+info.underLineQty}}/{{plan.allowReqQty+info.underLineQty}}人</text></view>
- </view>
- </view>
- </view>
- <view class="btns">
- <button class="btn-share" open-type="share" hover-class="none" >分享活动</button>
- </view>
- </view>
- <!-- <view class="section5" v-if="info.perFormerList.length>0">
- <view class="header-list">
- <block v-for="(it,index) in info.perFormerList">
- <view class="user">
- <image :src="it.image" class="img"></image>
- </view>
- </block>
- </view>
- </view> -->
- <!-- 角色介绍 -->
- <!-- <view class="section6">
- <view class="title">角色介绍</view>
- <view class="users">
- <view class="user">
- <view class="img">
- <image src="../../../static/temp/temp.png" class="icon"></image>
- </view>
- <view class='name'>姓名</view>
- </view>
- <view class="user">
- <view class="img">
- <image src="../../../static/temp/temp.png" class="icon"></image>
- </view>
- <view class='name'>姓名</view>
- </view>
- </view>
- </view> -->
-
- <view class="section7">
- <view class="title">活动介绍</view>
- <view class="content">
- <rich-text :nodes="info.content"></rich-text>
- </view>
- <view class="title" v-if="info.comments.length>0">往期活动</view>
- <view class="content1" style="width:100%!important;">
- <block v-for="(it,index) in info.comments" :key="index">
-
-
- <image :src="it" mode="widthFix" style="width:100%!important; " ></image>
-
- </block>
- </view>
- </view>
-
- </view>
-
- <view class="footer">
- <view class="footer-left">
- <!-- <view class="step-qty">
- <uni-number-box />
- </view>
- <view class="intro">
- 单人限购2张
- </view> -->
- </view>
- <view class="right">
- <text class="text" @click="onOpenTimer">{{ info.type === 1 ? '确认拼场' : (info.type === 2 ? '预约活动' : '') }}</text>
- </view>
- </view>
- </view>
-
-
- <uni-popup ref="calenderPop">
- <view class="times">
- <view class="calender-box">
- <uni-calendar
- class="uni-calendar--hook"
- :lunar="true"
- :selected="planSelected"
- :showMonth="true"
- :startDate="startDate"
- @change="onChangeCalender"
- />
- </view>
- </view>
- </uni-popup>
-
- <map id="map" ref="map" style="display: none;" v-if="info && info.id>0" :show-location="true" :latitude="info.latitude" :longitude="info.longitude"></map>
-
-
-
- <!-- <uni-popup ref="yyForm">
- <view class="yyform-item" v-if="currentReq!=null">
- <view class="item">
- <view class="caption">预约日期:</view>
- <view class="text">
- <uni-data-select
- :value="dataForm.yyDate"
- :localdata="planListItem"
- @change="onChangeYYDate"
- ></uni-data-select>
- </view>
- </view>
- <view class="item">
- <view class="caption">预约人数:</view>
- <view class="text">
- <uni-easyinput type="number" v-model="dataForm.yyQty" value="1" placeholder="请输入预约人数"></uni-easyinput>
- </view>
- </view>
- <view class="item">
- <view class="caption">预约人姓名:</view>
- <view class="text">
- <uni-easyinput type="text" v-model="dataForm.yyname" placeholder="请填写预约人姓名"></uni-easyinput>
- </view>
- </view>
- <view class="item">
- <button class="btn">提交预约</button>
- </view>
- </view>
-
- </uni-popup> -->
- </view>
- </template>
- <script>
- import {
- mapState,
- mapGetters,
- mapMutations
- } from 'vuex'
- const app = getApp();
- let hideLoading = true;
- import ChairMan from "@/components/ChairMan/ChairMan.vue"
- import {rebuildHtml} from "@/utils/util.js"
-
- export default {
- components:{
- ChairMan,
- },
- computed: {
- ...mapState(['store_id','systemInfo'])
- },
- data() {
- return {
- movieId:0,
- info:null,
- performer:null,
- plan:[],
- planList:[],
- planSelected:[],
- startDate:'',
- currentReq:null,
- planListItem:[],
- longitude:'',
- latitude:'',
- dataForm:{
- zcId:0,
- reqDate:'',
- userId:0,
- },
- };
- },
- onLoad(option){
- this.movieId=option.id||0;
- this.dataForm.zcId=this.movieId;
- this.dataForm.userId=uni.getStorageSync("user_id");
- console.log(this.dataForm.userId);
-
- },
- onReady() {
- setTimeout(()=>{
- this.initMovieInfo();
- },300);
- },
- methods:{
-
-
- onChangeYYDate(e){
-
- },
- //切换日期
- onChangeCalender(e){
- let _this=this;
- if(e.extraInfo?.data!=undefined){
- if(e.extraInfo.data.count.readyQty<=e.extraInfo.data.count.totalQty){
- _this.dataForm.reqDate=e.extraInfo.date;
- // #ifdef MP-WEIXIN
- if(_this.dataForm.userId<=0){
- uni.showToast({
- title:"用户信息不存在",
- icon:'none'
- });
- return false;
- }
- _this.confirmCreateReq();
- // #endif
- // #ifndef MP-WEIXIN
- uni.showToast({
- title:'请使用小程序提交',
- icon:'none'
- })
- // #endif
- }
- }
- },
- onOpenMap(e){
- let _this=this;
- console.log(_this.info);
- _this._mapContext = uni.createMapContext("map", _this);
- _this._mapContext.openMapApp({
- longitude:parseFloat(_this.info.longitude),
- latitude:parseFloat(_this.info.latitude),
- destination:_this.info.address,
- success:(res)=>{
- console.log("success");
- },
- fail:(res)=>{
- console.log("fail");
-
- },
- complete:(res)=>{
- console.log(_this.info);
- }
- })
-
- },
- confirmCreateReq(){
- let _this=this;
- uni.showModal({
- title:'确认预约',
- content:'您是否确认提交预约信息',
- cancelText:"取消",
- confirmText:"确认",
- success:(confirm)=>{
- if(confirm.confirm){
- _this.$http.request('zc/createReq',_this.dataForm, "", "", true).then(res => {
-
- if(res.code==200){
- if(res.data.payStatus=='2'){
- //末支付
- // #ifdef MP-WEIXIN
- wx.requestPayment({
- timeStamp: res.data.timeStamp,
- nonceStr: res.data.nonceStr,
- package: res.data.package,
- signType: res.data.signType,
- paySign: res.data.paySign,
- success: (res) => {
- uni.showToast({
- title:'您的预约申请已成功提交',
- icon:'success',
- success: (res) => {
- _this.$refs.calenderPop.close();
- }
- })
- },
- fail: (res) => {
- uni.showToast({
- title:'支付失败',
- icon:'error',
- })
- }
- })
-
- // #endif
-
- }else{
-
- uni.showToast({
- title:'您的预约申请已成功提交',
- icon:'success',
- success: () => {
- _this.$refs.calenderPop.close();
- }
- })
- }
-
-
- }
-
-
- }).catch(err => {})
- }
- }
- })
-
-
- },
- onBack(e){
- uni.navigateBack(-1);
- },
- onOpenTimer(e){
- if(this.plan==null){
- uni.showToast({
- title:"活动已过期,或暂无计划",
- icon:"error"
- })
- return;
- }
-
-
- this.$refs.calenderPop.open('bottom');
- let d=new Date();
- this.startDate=d.getFullYear()+"-"+(d.getMonth()+1)+'-'+d.getDate();
- this.loadPlanList();
- },
-
- //加载计划列表
- loadPlanList(){
- let _this=this;
- _this.$http.request('zc/plan', {
- zcId:_this.info.id,
- }, "", "", hideLoading).then(res => {
- _this.planList=res.data.dataList;
- _this.planSelected=res.data.dataList.map(res=>{
- let info=res.count.readyQty>=res.count.totalQty?"已约满":"可预约"+res.count.readyQty+"/"+res.count.totalQty;
- return {
- date:res.date,
- info:info,
- data:{
- ...res,
- custom:'已预约'+res.count.readyQty+"/"+res.count.totalQty+"人",
- name:'预约信息'
- }
- }
- })
- }).catch(err => {})
- },
- //加载活动信息
- initMovieInfo(){
- let _this=this;
- _this.$http.request('zc/info', {
- id:this.movieId
- }, "", "", hideLoading).then(res => {
- _this.info=res.data.info;
-
- _this.performer=res.data.perFormer;
- _this.plan=res.data.plan;
-
- _this.info.content=_this.info.content.replace(/\<img/gi, '<img style="width:100%";height:auto')
- _this.info.comments=_this.info.comments.replace(/\<img/gi, '<img style="width:100%";height:auto')
-
-
- }).catch(err => {})
- },
- }
-
- }
- </script>
- <style lang="scss">
- @import './movie.scss';
- </style>
|