h5-webgl-program/src/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize.html

<div class="bookingSheet">
    <!-- <shareOption @afterUserHandle="afterShareOptionHandle" @optionChange="optionChange" :showShareOptions="showShareOptions"></shareOption> -->
    <mynavbar :barData='navbar'/>
	<!-- <authview id="authView" :showPhoneModel="showPhoneModel"></authview> -->
    <div class="contentBox">
        <!-- 图片区域 -->
        <div class="picArea">
            <div class="master-pic" v-if="tabData[tabIndex] && tabData[tabIndex].hardboundEffect.length>0">
				<el-carousel :autoplay="false" :loop="false" :indicator-dots="false"
					@change="swiperChangeImg" class="master-pic-swiper" 
					:current="currImgIdx" ref="carousel">
                    <el-carousel-item v-for="(img,s) in tabData[tabIndex].hardboundEffect" :key="s" :item-id="s" class="master-pic-img">
                        <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" class="master-pic-img" :src="img" mode="aspectFill" />
                        <!-- <c-img class="master-pic-img" :style="'background-color:#fff'" :src="img" mode="aspectFill"></c-img> -->
                    </el-carousel-item>
                </el-carousel>
				<div class="indicator-view rows" v-if="tabData[tabIndex].hardboundEffect && tabData[tabIndex].hardboundEffect.length > 1">
					<div class="indicator-item" :class="{'active': currImgIdx == idx}" 
					v-for="(item, idx) in tabData[tabIndex].hardboundEffect" :key="idx"></div>
				</div>
            </div>
			<div class="mask"></div>
			<img class="text-img" src="https://dm.static.elab-plus.com/miniProgram/text-img.png" mode="widthFix"/>
			<div class="lookHouseView rows justify-center" v-if="tabIndex==0 && projectUserId==userId" @click="toMode">
				<img class="icon-ai" src="https://dm.static.elab-plus.com/miniProgram/iconfont/icon-ai.png" mode="widthFix"/>
				查看户型
			</div>
            <div class="tabList rows flex-start">
				<div @click="changeTab(index)" class="tab-item columns" :class="{'tabActive': tabIndex == index}" 
					v-for="(tab,index) in tabData" :key="index" >
					<img class="tab-img" :src="tab.imgUrl" mode="aspectFill" />
					<div class="tab-info rows rows-between">
						<div class="eslipe">{{tab.name || '-'}}</div>
						<div class="eslipe" v-if="tab.area">{{tab.area || '-'}}㎡</div>
					</div>
				</div>
            </div>
        </div>
        <!-- 提交信息区域 -->
        <div class="booking-info" :style="{'color':tabIndex==0?'#fff':'#fff'}" v-if="layoutStruct">
			<!-- <div class="left-line line"></div>
			<div class="right-line line"></div>
			<div class="writingBox rows">
				<img class="writing-img" :src="layoutStruct.houseImg || plotHeadDeafultImg" />
				<div class="wiriting-right" >
					<div class="font40 wiriting-text">{{projectUserId&&projectUserId!=userId?'':'我的'}}私人定制</div>
					<div class="font52 wiriting-text">{{layoutStruct.houseName || ''}}</div>
				</div>
			</div> -->
			<div class="title">{{layoutStruct.houseName}} · 梦想设计</div>
            <!-- 文字信息区域 -->
            <div class="info-bar">
				<div class="info-item" v-for="(item,index) in expand" :key="index">
				    <div class="info-item-label">{{item.name}}</div>
				    <div class="info-item-value">{{item.value || '-'}}</div>
				</div>
            </div>
        </div>
		<!-- 支付后的显示视图 -->
		<div class="pay-view columns" v-if="projectUserId==userId">
		    <div class="t1 rows" style="margin-bottom: 6px;">订金权益说明<i class="iconfont icon-shuoming rows" style="margin-left: 6px;"></i></div>
		    <div class="t2">支付订金 ￥99</div>
		    <div class="t2" style="margin-bottom: 22.5px;">立得专属私人空间定制方案</div>
		    <div class="rows " v-if="payed==1">
		        <div class="bottom-btn btn-qw rows justify-center" @click="conectUS">
		            加企微 · 定制服务
		        </div>
		        <div class="bottom-btn btn-share rows justify-center" @click="share">
		            <i class="iconfont icon-Shared rows" style="margin-right: 8px;"></i>立即分享
		        </div>
		    </div>
		</div>
        <!-- 作品支持说明 不是作者本人 -->
		<div class="info-view columns justify-center" v-if="layoutStruct && projectUserId!=userId">
			<div class="bottom-title" :style="{'color':tabIndex==0?'#fff':'#000'}">
				- 支持我的梦想家 -
			</div>
			<div class="bottom-tips" :style="{'color':tabIndex==0?'#fff':'#000'}">
				喜欢我的设计吗，给我投一票吧~
			</div>
			<!-- 支持率 -->
			<!-- <div class="rows justify-center info-point">
				<div class="left-word">{{proportion}}%</div>
				<div class="line-view rows">
					<div class="left-line" :style="{width:proportion+'%'}"></div>
					<div class="right-line" :style="{width:(100 - proportion)+'%'}"></div>
				</div>
				<div class="right-word">{{100 - proportion}}%</div>
			</div> -->
			<div class="sub-view-result columns" v-if="layoutStruct.clickLike!=null">
				<img class="img" :src="layoutStruct.clickLike?'https://dm.static.elab-plus.com/miniProgram/like.png':'https://dm.static.elab-plus.com/miniProgram/unlike.png'"></img>
				<!-- <div class="text rows justify-center">感谢您的投票</div> -->
			</div>
			<!-- <div class="sub-view rows justify-center" v-else>
				<div class="left rows justify-center" @click="likeOrView(1)">喜欢</div>
				<div class="right rows justify-center" @click="likeOrView(2)">不喜欢</div>
			</div> -->
			
			<div class="info-head columns rows-between" v-if="total && headList && headList.length>0">
				<div class="head-list rows justify-center">
					<img class="wg-head" v-for="(item,idx) in headList" :key="idx" 
					:src="item?item:'https://dm.static.elab-plus.com/elabWepy/default-head.png'"></img>
				</div>
				<div class="text-sty">
					已经有{{total}}人参与梦想家创建
				</div>
			</div>
            <div class="rows justify-center" style="margin-top: 60px;">
                <div class="bottom-btn btn-qw rows justify-center" @click="toCustomized">
                    设计我的梦想家
                </div>
                <div class="bottom-btn btn-share rows justify-center" @click="toIndex">
                    {{landDataId?'返回':'返回项目首页'}}
                </div>
            </div>
		</div>
		<!-- 底部悬浮按钮占位 -->
        <div style="width: 100%;height: 100px;"></div>
        <!-- 底部按钮 不是作者本人-->
        <div class="bottom-view rows rows-between" v-if="layoutStruct && projectUserId!=userId">
            <template v-if="layoutStruct.clickLike!=null">
                <div class="left rows justify-center" style="color:#ccc">不喜欢</div>
                <div class="right rows justify-center" style="background: rgba(255, 255, 255, 0.33);color:#ccc">喜欢</div>
            </template>
            <template v-else>
                <div class="left rows justify-center" @click="likeOrView(2)">不喜欢</div>
                <div class="right rows justify-center" @click="likeOrView(1)">喜欢</div>
            </template>
		</div>
		<!-- 作者本人-未支付 -->
        <div class="bottom-view rows justify-center" v-else-if="payed==0">
			<!-- <div class="btn columns" @click="share">
				<i class="iconfont icon-Shared rows"></i>
				分享
			</div>
			<div class="btn columns" @click="conectUS">
				<i class="iconfont icon-Comment rows"></i>
				联系我们
			</div> -->
			<div class="bottom-btn btn-qw rows justify-center" style="margin-right: 0px;width: 143px;color: #ed9e5b;background: #fff;margin-right: 30px;" @click="toIndex">
				{{landDataId?'返回':'返回项目首页'}}
			</div>
            <div class="bottom-btn btn-share rows justify-center" style="width: 124px;" @click="payOrder">
                下单
            </div>
		</div>
        <!-- 作者本人-已经支付 -->
        <!-- <div class="bottom-view rows justify-center" v-else-if="payed==1">
        	<div class="bottom-btn btn-qw rows justify-center" style="margin-right: 0px;width: 143px;color: #ed9e5b;background: #fff;margin-right: 30px;" @click="toIndex">
        		{{landDataId?'返回':'返回项目首页'}}
        	</div>
            <div class="bottom-btn btn-share rows justify-center" style="width: 124px;" @click="toCustomized">
                设计我的梦想家
            </div>
        </div> -->
		<!-- 高斯背景图 -->
		<div class="swiper-img-gs-mh"  >
			<img class="img" mode="aspectFill" src="https://dm.static.elab-plus.com/miniProgram/test-bg.jpg" />
		</div>
		
    </div>
	<!-- 弹窗 -->
	<div class="pop-view" v-if="showUserInput">
		<div class="pop-main">
			<i class="modelClose iconfont icon-close" @click="hidePop"></i>
			<div class="title">请留下您的联系方式</div>
			<div class="content">
				<div class="item" style="margin-bottom: 40px;">
					<div class="item-title">姓名</div>
					<div class="item-input rows">
						<input class="input-real" type="text" autofocus placeholder="请填写您的姓名昵称" 
						v-model="name" />
					</div>
				</div>
				<div class="item" style="margin-bottom: 20px;">
					<div class="item-title">手机号</div>
					<div class="item-input rows">
						<input class="input-real" type="number" autofocus placeholder="请填写您的手机号" 
						v-model="tel" />
						<div v-if="verifyText" class="input-tips rows justify-center" @click="getVerifyCode">{{verifyText}}</div>
					</div>
				</div>
				<div class="item">
					<div class="item-input rows">
						<input class="input-real" type="number" autofocus placeholder="请填写验证码" 
						v-model="verifyCode"/>
						<div class="input-tips rows justify-center" @click="getVerifyCode">发送验证码</div>
					</div>
				</div>
			</div>
			<div class="btn rows justify-center" @click="sendPhone">确定</div>
		</div>
	</div>
	<div class="pop-shareImg" v-if="showPopup">
		<img class="share-img" @click="showPopup = false;" src="https://dm.static.elab-plus.com/miniProgram/shareImg1.png" mode="widthFix" />
		<div class="btn rows justify-center" @click="showPopup = false;">我知道啦</div>
	</div>
	<!-- 添加企微弹出层 -->
    <!-- <div class="f-popup-bom-container" @click.stop.prevent="showPopup=false" v-show="showPopup">
		<div class="f-popup-view">
            <img class="closeIcon" @click="showPopup = false;" src="https://dm.static.elab-plus.com/mini-program/closeIcon.png" mode="widthFix" />
			<scroll-view scroll-y="true" class="f-popup-bom" @click.stop.prevent="catchEvent" :enhanced="true" :show-scrollbar="false">
                <img mode="widthFix" :show-menu-by-longpress="true" class="qrCode" :src="enterpriseWechat" />
            </scroll-view>
		</div>
	</div> -->
</div>