miao/miaomiao/www/templates/home/dream-detail.html

<ion-view view-title="梦想">
    <ion-nav-buttons side="right">
        <button class="button button-clear" style="height: 37px; margin-top: 0.6px" ng-click="toMessage()">
            <img ng-if="showMessage==1" src="img/icon_message_h.svg" style="height: 60%; width: 100%">
            <img ng-if="showMessage==0" src="img/icon_message_n.svg" style="height: 55%; width: 100%">
        </button>
        <button ng-click="share($event)" class="button button-clear" style="height: 37px; margin-top: 0.5px">
            <img src="img/icon_share.svg" style="height: 55%; width: 100%">
        </button>
    </ion-nav-buttons>
    <div ng-if="type==1 && user.id != dream.user_id" style="position: fixed; bottom: -8px; width: 100%; z-index: 5;background: #fff;border-top: 1px solid #ECF2F7;height: 68px">
        <div class="row">
            <div class="col dreamButton">
                <button ng-click="openSupport()" class="button button-outline button-calm" style="border: 1px solid #00C3DA">
                    支持乘数<br>
                    ×{{multi.result}}
                </button>
            </div>
            <div class="col dreamButton">
                <button class="button button-calm" ng-click="support($event)">支持</button>
            </div>
            <div class="col dreamButton" ng-if="dream.is_collection==0">
                <button class="button button-outline button-calm" style="border: 1px solid #00C3DA" ng-click="collectionDream(1)">＋收藏</button>
            </div>
            <div class="col dreamButton" ng-if="dream.is_collection==1">
                <button class="button button-outline" style="background: #fff; border: 1px solid #A3A3A3"  ng-click="collectionDream(0)">已收藏</button>
            </div>
        </div>
    </div>
    <div class="tabs-striped tabs-top">
        <div class="tabs">
            <a ng-class="type==1?'tab-item active':'tab-item'" ng-click="changeType(1)">
                主页
            </a>
            <a ng-class="type==2?'tab-item active':'tab-item'" ng-click="changeType(2)">
                互动
            </a>
            <a ng-class="type==3?'tab-item active':'tab-item'" ng-click="changeType(3)">
                排行榜
            </a>
        </div>
    </div>
    <ion-content style="background: #fff" ng-click="cancelSupport()">
        <div class="icontent" ng-if="type==1">
            <div class="list detail-list">
                <div class="item" style="padding: 0">
                    <ion-slides slider="data.slider">
                        <ion-slide-page ng-if="dream.video">
                            <div class="box banner">
                                <video ng-src="{{dream.video | trustUrl}}" poster="{{dream.vpic}}" width="100%" style="max-height: 400px" class="centerme" controls="controls" ></video>
                            </div>
                        </ion-slide-page>
                        <ion-slide-page ng-repeat="img in dream.imgs" >
                                <div class="box banner" style="width: 100%"><img ng-src="{{img.pic}}" style="width: 100%;" /></div>
                        </ion-slide-page>
                    </ion-slides>
                </div>
                <div class="item" style="padding: 0 16px">
                    <p style="font-size: 17px; color: #000">{{dream.name}}</p>
                    <p style="font-size: 13px;" ng-style="aboutStyle" ng-bind-html="dream.about | trustHtml">
                    </p>
                    <div style="text-align: center">
                        <i class="icon ion-chevron-down" ng-if="showAbout" ng-style="aboutStyle" style="color: #00C3DA;" ng-click="showText()"></i>
                        <i class="icon ion-chevron-up" ng-if="hideAbout" ng-style="aboutStyle" style="color: #00C3DA" ng-click="hideText()"></i>
                    </div>
                </div>
                <div class="item detail-item2" style="padding:5px; border-top: 1px solid #E6E6E6;">
                    <div class="row">
                        <div class="col" style="text-align:left">
                            <h2>{{timer}}</h2>
                            <p>剩余时间</p>
                        </div>
                        <div class="col" style="text-align:right">
                            <h2>{{dream.score}}</h2>
                            <p>当前获得梦想分数</p>
                        </div>
                    </div>
                </div>
                <div class="item" style="padding:0 5px; border-top: 1px solid #E6E6E6;">
                    <div class="row">
                        <div class="col" style="text-align:left">
                            <p style="color: #FF6600; font-size: 16px">{{dream.get_coin}}</p>
                            <p>目前已获梦想币</p>
                        </div>
                        <div class="col" style="text-align:right">
                            <h2>{{dream.coin}}</h2>
                            <p>我要求的梦想币</p>
                        </div>
                    </div>
                    <div class="reply-bar">
                        <div ng-if="100*dream.get_coin/dream.coin<100" style="width: {{100*dream.get_coin/dream.coin}}%;">
                        </div>
                        <div ng-if="100*dream.get_coin/dream.coin>=100" style="width: 100%;">
                        </div>
                    </div>
                </div>
                <div class="detail-head" style="height: 130px" ng-if="dream.top3user.length>0">
                    <div class="row" ng-if="dream.top3user.length<2">
                        <div class="col top1" ng-if="dream.top3user.length>0" style="background: url('img/img_No1.svg') no-repeat; background-size: 100% 100%;">
                            <img style="width: 75px; height: 75px; margin: 25px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[0].avatar }}" /><br>
                        </div>
                        <div class="col top2" ng-if="dream.top3user.length>1" style="margin-top: 10px; background: url('img/img_No2.svg') no-repeat; background-size: 100% 100%;">
                            <img style="width: 67px; margin: 22px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[1].avatar }}" /><br>
                        </div>
                    </div>
                    <div class="row" ng-if="dream.top3user.length>2">
                        <div class="col top2" ng-if="dream.top3user.length>1" style="margin-top: 10px; background: url('img/img_No2.svg') no-repeat; background-size: 100% 100%;">
                            <img style="width: 67px; margin: 22px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[1].avatar }}" /><br>
                        </div>
                        <div class="col top1" ng-if="dream.top3user.length>0" style="background: url('img/img_No1.svg') no-repeat; background-size: 100% 100%;">
                            <img style="width: 75px; height: 75px; margin: 25px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[0].avatar }}" /><br>
                        </div>
                        <div class="col top2" ng-if="dream.top3user.length>2" style="margin-top: 10px; background: url('img/img_No3.svg') no-repeat; background-size: 100% 100%;">
                            <img style="width: 67px; margin: 22px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[2].avatar }}" /><br>
                        </div>
                    </div>
                </div>
                <div ng-if="dream.top3user.length==0" style="background: #f6f6f6;">
                    <div class="row" >
                        <div class="col" align="center">
                            <img ng-src="img/pic_leaves.png">
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 152px; margin: 0 auto" ng-if="dream.code">
                <img ng-src="{{dream.code}}" style="width: 150px; height: 150px">
            </div>
        </div>
        <div ng-if="type==2" class="hdcontent">
            <div style="color: red">
                <div class="list">
                    <div ng-if="user.id == dream.user.id" class="item itemjs" style="padding: 10px" >
                        <a class="button button-outline button-block button-calm button-icon" ng-click="openModal()">
                            <i class="icon ion-plus"></i>
                            发布梦想互动
                        </a>
                    </div>
                    <div class="item" style="border-bottom:15px solid #F2F2F2;" ng-click="add_comment()" ng-repeat="interaction in dream.interactions">
                        <img  class="head" ng-src="{{dream.user.avatar}}" />
                        <span  class="utitle">{{dream.user.nickname}}</span>
                        <!--<span class="utitle kz">{{dream.end_time | lastDate}}</span>-->
                        <span class="utitle kz">{{dream.created_at}}</span>
                        <p class="subtile"  style="white-space:normal; color: #666666">{{interaction.title}}</p>
                        <div class="picts item">
                            <img class="slt" ng-click="showBigImage('{{interaction.pic1}}')" ng-src="{{interaction.pic1}}" ng-if="interaction.pic1"/>
                            <img class="slt" ng-src="{{interaction.pic2}}" ng-if="interaction.pic2"/>
                            <img class="slt" ng-src="{{interaction.pic3}}" ng-if="interaction.pic3"/>
                            <img class="slt" ng-src="{{interaction.pic4}}" ng-if="interaction.pic4"/>
                            <img class="slt" ng-src="{{interaction.pic5}}" ng-if="interaction.pic5"/>
                            <img class="slt" ng-src="{{interaction.pic6}}" ng-if="interaction.pic6"/>
                            <img class="slt" ng-src="{{interaction.pic7}}" ng-if="interaction.pic7"/>
                            <img class="slt" ng-src="{{interaction.pic8}}" ng-if="interaction.pic8"/>
                        </div>
                        <p ng-click="replay($event,dream.user.nickname)" style="margin: 10px 0 0 50px; color: #00C3DA">评论</p>
                        <div class="item item-input" ng-if="input.show">
                            <input name="comment" type="text" focus-me="input.focus" placeholder="{{input.placeholder}}" ng-model="vm.comment" style="padding: 0 20px;">

                        </div>
                        <!--<div class="list padding">
                            <div class="item subitem" ng-click="replay($event,'百川1')">
                                <img ng-src="img/demo/head4.jpg" />
                                <span>百川1</span>
                                <span>2016-08-08 11:11</span>
                                <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                            </div>
                            <div class="item item-input" ng-if="input.show">
                                <input name="comment" type="text" focus-me="input.focus" placeholder="{{input.placeholder}}" ng-model="vm.comment" style="padding: 0 20px;">
                            </div>
                            <div style="color: #00C3DA; margin-left: 50px">
                                查看更多评论
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <div ng-if="type==3" class="phbcontent">
            <div class="detail-head" style="height: 180px" ng-if="dream.top3user.length>0">
                <div class="row" ng-if="dream.top3user.length<2">
                    <div class="col top1" ng-if="dream.top3user.length>0" style="background: url('img/img_No1.svg') no-repeat; background-size: 100% 100%;">
                        <img style="width: 75px; height: 75px; margin: 25px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[0].avatar }}" /><br>
                        {{ dream.top3user[0].nickname }}<br>
                        <img ng-src="img/icon_gongxian.svg" style="height: 18px; width: 18px; margin-top: 5px" />
                        <em style="font-size: 16px">{{ dream.top3user[0].score }}</em>
                    </div>
                    <div class="col top2" ng-if="dream.top3user.length>1" style="background: url('img/img_No2.svg') no-repeat; background-size: 100% 100%;">
                        <img style="width: 67px; margin: 22px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[1].avatar }}" /><br>
                        {{ dream.top3user[1].nickname }}<br>
                        <img ng-src="img/icon_gongxian.svg" style="height: 20px; width: 20px; margin-top: 5px" />
                        <em style="font-size: 18px">{{ dream.top3user[1].score }}</em>
                    </div>
                </div>
                <div class="row" ng-if="dream.top3user.length>2">
                    <div class="col top2" ng-if="dream.top3user.length>1" style="background: url('img/img_No2.svg') no-repeat; background-size: 100% 100%;">
                        <img style="width: 67px; margin: 22px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[1].avatar }}" /><br>
                        {{ dream.top3user[1].nickname }}<br>
                        <img ng-src="img/icon_gongxian.svg" style="height: 20px; width: 20px; margin-top: 5px" />
                        <em style="font-size: 18px">{{ dream.top3user[1].score }}</em>
                    </div>
                    <div class="col top1" ng-if="dream.top3user.length>0" style="background: url('img/img_No1.svg') no-repeat; background-size: 100% 100%;">
                        <img style="width: 75px; height: 75px; margin: 25px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[0].avatar }}" /><br>
                        {{ dream.top3user[0].nickname }}<br>
                        <img ng-src="img/icon_gongxian.svg" style="height: 18px; width: 18px; margin-top: 5px" />
                        <em style="font-size: 16px">{{ dream.top3user[0].score }}</em>
                    </div>
                    <div class="col top2" ng-if="dream.top3user.length>2" style="background: url('img/img_No3.svg') no-repeat; background-size: 100% 100%;">
                        <img style="width: 67px; margin: 22px 0 8px 0; border-radius: 100%;" ng-src="{{ dream.top3user[2].avatar }}" /><br>
                        {{ dream.top3user[2].nickname }}<br>
                        <img ng-src="img/icon_gongxian.svg" style="height: 20px; width: 20px; margin-top: 5px" />
                        <em style="font-size: 18px">{{ dream.top3user[2].score }}</em>
                    </div>
                </div>
            </div>
            <div ng-if="dream.top3user.length==0" style="background: #f6f6f6;">
                <div class="row" >
                    <div class="col" align="center">
                        <img ng-src="img/pic_leaves.png">
                    </div>
                </div>
            </div>
            <div class="list padding">
                <div class="item" ng-if="$index > 2 " ng-repeat="user in dream.topuser" style="border-bottom: 1px solid #DFDFDF">
                    <div style="float:left; color: #808080; font-size: 30px; font-weight: bold; margin-top: 10px">
                        {{$index+1}}
                    </div>
                    <div style="padding-left:20px; float:left;">
                        <div style="float:left;">
                            <img style="width:40px;border-radius:100%" ng-src="{{user.avatar}}" />
                        </div>
                        <div style="float:left; margin-left: 10px">
                            <div style="font-size: 16px">{{user.nickname}}</div>
                            <div style="color:#9E9E9E;">{{user.signture}}</div>
                        </div>
                    </div>
                    <div style="float: right;">
                        <div style="font-weight:500; font-size: 18px">{{user.score}}</div>
                        <div style="color:#9E9E9E;">贡献</div>
                    </div>
                </div>
            </div>
            
        </div>
        <!--点击看大图-->
        <div ng-if="bigImage && type==2" ng-click="hideBigImage()" class="popover-backdrop">
            <img ng-src="{{url}}">
        </div>
     <script id="interaction-modal.html" type="text/ng-template">
      <div class="modal">
        <ion-header-bar class="bar-calm bar bar-header has-tabs-top">
          <h1 class="title">发布梦想互动</h1>
        <button class="button button-clear" ng-click="closeModal()">关闭</button>
        </ion-header-bar>
        <ion-content>
          <div class="addcontent list">
            <div class="item">我的梦想互动信息</div>
            <div class="item itemjs">
                <textarea rows="4" cols="50" placeholder="添加梦想互动信息" ng-model="vm.title" style="border: 1px solid #00C3DA;padding: 10px;width: 98%;"></textarea>
            </div>
            <div class="item">上传图片，让别人更好的了解你的梦想</div>
            <div class="item itemjs">
                <a ng-repeat="item in imgs" ng-click="showImages(item)" class="img-file-up">
                    <b style="background-image:url({{item}});"><em ng-click="deletefile(item)" class="ion-ios-close-outline"></em></b>
                </a>
                <a class="btn-file-up" ng-click="addpict()">
                    <img ng-src="img/icon_photo.svg" style="height: 40px; width: 40px; text-align: center; line-height: 40px" /><br>
                    <em style="font-size: 16px">添加图片</em>
                </a>
                <video ng-src="{{video.file | trustUrl}}" ng-show="video.isOK" poster="{{video.vpic}}" height="72px" width="72px" controls="controls">
                </video>
                <a class="btn-file-up" ng-click="addvideo()" ng-show="!video.isOK">
                    <img src="img/icon_video.svg" style="height: 40px; width: 40px; text-align: center; line-height: 40px" /><br>
                    <em style="font-size: 16px">添加视频</em>
                </a>
            </div>

        </div>
        <div class="padding">
            <button type="submit"  class="button button-full button-calm" ng-click="add()">
                发布梦想互动
            </button>
        </div>
        </ion-content>
      </div>
    </script>
    <script id="recharge-modal.html" type="text/ng-template">
      <div class="modal">
        <ion-header-bar class="bar-calm bar bar-header has-tabs-top">
            <button class="button button-clear" ng-click="closeRechargeModal()">关闭</button>
            <h1 class="title">充值</h1>
            <button class="button button-clear" ui-sref="app.pay">支付说明</button>
        </ion-header-bar>
        <ion-content>
            <div class="list recharge padding">
                <div class="item" style="padding:20px">
                    <div class="row">
                        <div class="col col-20">
                            <img ng-src="img/icon_gold.svg" style="height: 100%; width: 100%">
                        </div>
                        <div class="col">
                            <div>剩余梦想币</div>
                            <div class="re-num">{{vm.coin}}</div>
                        </div>
                        <div class="col col-33" style="padding: 30px 0 0 20px">
                            <a ui-sref="app.withdraw" style="border: 1px solid #00C3DA; color: #00C3DA; padding: 5px 25px; border-radius: 30px;">提现</a>
                        </div>
                    </div>
                </div>
                <div class="item item-input" style="padding-top: 20px; padding-bottom: 20px">
                    <span class="input-label" style="width: 60px">金额</span>
                    <input type="number" placeholder="请输入充值金额" ng-model="vm.money">
                </div>
                <div class="item" style="color: #969696; padding-top: 40px">
                    选择支付方式
                </div>
                <ion-list class="re-radio">
                    <ion-radio ng-model="choice" ng-value="'A'">
                        <img ng-src="img/icon_ Alipay.svg" />
                        <span>支付宝支付</span>
                    </ion-radio>
                    <ion-radio ng-model="choice" ng-value="'B'">
                        <img ng-src="img/icon_ WeChat Pay.svg" />
                        <span>微信支付</span>
                    </ion-radio>
                </ion-list>
            </div>
            <div class="padding">
                <button  class="button button-block button-calm" ng-click="recharge(vm.money)">
                    支付
                </button>
            </div>
        </ion-content>
      </div>
    </script>
    </ion-content>
        <div class="detail-like" ng-if="tosupport">
            <div style="text-align: center; border-bottom: 3px solid #8D8D8E">
                <img ng-src="img/img_miao.png" style="width: 25%; height: 55px;margin-bottom: -13px">
            </div>
            <div style="background: #fff;">
                <div class="coin">
                    <div class="row">
                        <div class="col box {{index==2?'selected':''}}" ng-click="changeIndex(2)" ng-model="coin">
                            <div style="float:left; width: 35%;  margin-top: 2%; margin-left: 5%">
                                <img ng-src="img/icon_kiss.png" style="width: 100%;">
                            </div>
                            <div style="float:right; width: 20%; margin-top: 5%; margin-right: 5px">
                                <img ng-src="img/icon_gold.svg" style="width: 100%">
                            </div>
                            <div style="float:right; color: #000;font-size: 16px; margin-top: 12%; margin-right: 3%">
                                20
                            </div>
                        </div>
                        <div class="col box {{index==5?'selected':''}}" ng-click="changeIndex(5)" ng-model="coin">
                            <div style="float:left; width: 35%;  margin-top: 2%; margin-left: 5%">
                                <img ng-src="img/icon_candy.png" style="width: 100%;">
                            </div>
                            <div style="float:right; width: 20%; margin-top: 5%; margin-right: 5px">
                                <img ng-src="img/icon_gold.svg" style="width: 100%">
                            </div>
                            <div style="float:right; color: #000;font-size: 16px; margin-top: 12%; margin-right: 3%">
                                50
                            </div>
                        </div>
                        <div class="col box {{index==10?'selected':''}}" ng-click="changeIndex(10)" ng-model="coin">
                            <div style="float:left; width: 35%;  margin-top: 2%; margin-left: 5%">
                                <img ng-src="img/icon_balloon.png" style="width: 100%;">
                            </div>
                            <div style="float:right; width: 20%; margin-top: 5%; margin-right: 5px">
                                <img ng-src="img/icon_gold.svg" style="width: 100%">
                            </div>
                            <div style="float:right; color: #000;font-size: 16px; margin-top: 12%; margin-right: 3%">
                                100
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col box {{index==20?'selected':''}}" ng-click="changeIndex(20)" ng-model="coin">
                            <div style="float:left; width: 35%; margin-top: 2%; margin-left: 5%">
                                <img ng-src="img/icon_rose.png" style="width: 100%;">
                            </div>
                            <div style="float:right; width: 20%; margin-top: 5%; margin-right: 5px">
                                <img ng-src="img/icon_gold.svg" style="width: 100%">
                            </div>
                            <div style="float:right; color: #000;font-size: 16px; margin-top: 12%; margin-right: 3%">
                                200
                            </div>
                        </div>
                        <div class="col box {{index==30?'selected':''}}" ng-click="changeIndex(30)" ng-model="coin">
                            <div style="float:left; width: 35%; margin-top: 3%; margin-left: 5%">
                                <img ng-src="img/icon_haert.png" style="width: 100%;">
                            </div>
                            <div style="float:right; width: 20%; margin-top: 5%; margin-right: 5px">
                                <img ng-src="img/icon_gold.svg" style="width: 100%">
                            </div>
                            <div style="float:right; color: #000;font-size: 16px; margin-top: 12%; margin-right: 3%">
                                300
                            </div>
                        </div>
                        <div class="col box {{index==50?'selected':''}}" ng-click="changeIndex(50)" ng-model="coin">
                            <div style="float:left; width: 35%; margin-top: 2%; margin-left: 5%">
                                <img ng-src="img/icon_diamond.png" style="width: 100%;">
                            </div>
                            <div style="float:right; width: 20%; margin-top: 5%; margin-right: 5px">
                                <img ng-src="img/icon_gold.svg" style="width: 100%">
                            </div>
                            <div style="float:right; color: #000;font-size: 16px; margin-top: 12%; margin-right: 3%">
                                500
                            </div>
                        </div>
                    </div>
                </div>
                <div class="send">
                    <div style="float:left;">余额：
                    </div>
                    <div style="float: left;width: 90px;">
                        <div style="float:left; padding-top: 4px;height: 45px;">
                            <img ng-src="img/icon_gold.svg"/>
                        </div>
                        <em>{{user.coin}}&nbsp;</em>
                    </div>
                    <div class="calm" ng-click="toRecharge()" style="float: left;">
                        <div style="float:left; padding-top: 4px;height: 45px;">
                            <img ng-src="img/icon_ recharge.png">
                        </div>
                        <em>&nbsp;充值</em>
                    </div>
                    <span style="height:100%;float: right;">
                        <a style="border-radius:90px; min-width: 60px; height: 30px; min-height: 30px; font-size:1.1em; padding: 0; line-height: 24px; margin-top: 9px" class="button button-calm"  ng-click="supportDream()">发送</a>
                    </span>
                </div>
            </div>
        </div>
    <div class="detail-like" ng-if="toshare">
        <div class="row">
            <div class="col" ng-click="shareDream(1)">
                <img ng-src="img/friends.svg" ><br>
                分享给朋友
            </div>
            <div class="col" ng-click="shareDream(2)">
                <img ng-src="img/Moments.svg" ><br>
                分享到朋友圈
            </div>
        </div>
    </div>
     <script id="supportExplain.html" type="text/ng-template">
            <div class="modal">
                <ion-header-bar class="bar-calm bar bar-header has-tabs-top">
                    <h1 class="title">说明</h1>
                    <button class="button button-clear" ng-click="closeSupportmodal()">关闭</button>
                </ion-header-bar>
                <ion-content style="color: red">
                    1.测试文本
                </ion-content>
            </div>
    </script>
</ion-view>