阿江 2019-02-20 14:14:46 2635次浏览 6条回复 0 0 0

最近使用 Yii2 集成 Vue 实现购物车,发几张效果图: 有需要干活的老板可以联系我,谢谢!

购物车

购物车

确认订单

确认订单

新建收货地址

新建收货地址

选择收货地址

选择收货地址

修改收货地址

修改收货地址 (全文完)

  • 回复于 2019-02-21 14:01 举报

    谢谢楼主秀了一手好图。

  • 回复于 2019-02-21 15:20 举报

    有需要干活的老板可以联系我

  • 回复于 2019-02-22 14:54 举报

    我没看到和 Yii2 有关的信息

  • 回复于 2019-02-27 08:32 举报

    代码在这里:

    <?php
    
    /* @var $this yii\web\View */
    /* @var $form yii\bootstrap\ActiveForm */
    /* @var $model app\models\LoginForm */
    
    use yii\helpers\Html;
    use yii\bootstrap\ActiveForm;
    use yii\helpers\Url;
    use app\models\Cart;
    use yii\helpers\ArrayHelper;
    use app\models\Common;
    
    $pagename= '填写订单';
    $this->title = $pagename.'-'.\Yii::$app->name;
    $this->params['breadcrumbs'][] = $pagename;
    $user=Yii::$app->user->identity;
    $url_form = Url::to(['cart-confirm']);
    ?>
    <div class="site-contact" id="app">
        <div class="text-center"><h4 class="pagename"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> <?=$pagename?></h4></div>
        <?php
        $cform=ActiveForm::begin([
            'id'=>'cart_form',
            'action'=>['new-order'],
            'validationUrl'=>['validate-order'],
        ]);
        ?>
        <div class="panel panel-default">
            <div class="panel-heading">收货地址
            </div>
            <div class="panel-body" @click="changeReceiver">
                <div v-if="receiver_cur_view">
                    <h4>{{receiver_cur.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{receiver_cur.tel}}</h4>
                    <h5><span v-show="receiver_cur.is_default"><span class="badge redbg" >默认</span>&nbsp;&nbsp;&nbsp;</span>
                        {{address(receiver_cur)}}{{receiver_cur.addr}}
                    </h5>
                </div>
                <div v-if="!receiver_cur_view">
                    <button class="btn btn-primary" type="button">新建收货地址</button>
                </div>
            </div>
        </div>
        <?php
        echo $cform->field($model,'receiver')->hiddenInput(['v-model'=>'receiverid_cur'])->label(false);
        ?>
        <div class="panel panel-default">
            <div class="panel-heading">选购的商品</div>
            <?php
            echo "<table class='table'>";
            $price_goods=0;
            foreach($cartgoods as $item){
                echo "<tr><td width='60'><img class='cartimg' src='".$item['img']."'></td><td>".$item['title']."<br>¥".$item['price']." x ".$item['num']."</td></tr>";
                $price_goods+=$item['price']*$item['num'];
            }
            echo "</table>";
            ?>
        </div>
    
        <div class="panel panel-default">
            <div class="panel-heading">支付方式</div>
            <div class="panel-body">
            <?php
            echo $cform->field($model,'paytype')->radioList(Cart::$arrPayType,['value'=>'1'])->label(false);
            ?>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">配送方式</div>
            <div class="panel-body">
                <?php
                echo $cform->field($model,'shiptype')->radioList(Cart::$arrShipType,['value'=>1])->label(false);
                ?>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">订单金额</div>
            <?php
            $price_ship=0;
            $price_sum=$price_goods+$price_ship;
            ?>
            <TABLE class="table">
                <TR>
                    <TD>商品金额</TD>
                    <TD><?=Common::price($price_goods)?></TD>
                </TR>
                <TR>
                    <TD>运费</TD>
                    <TD><?=Common::price($price_ship)?></TD>
                </TR>
                <TR>
                    <TD>合计</TD>
                    <TD class="price"><?=Common::price($price_sum)?></TD>
                </TR>
            </TABLE>
        </div>
        <div class="text-center">
            <button class="btn btn-default" @click="gocart" type="button">返回</button>&nbsp;&nbsp;&nbsp;
            <button class="btn btn-danger btn-lg  myModal-button-confirm" type="submit">提交订单</button>
        </div>
        <?php
        ActiveForm::end()
        ?>
        <div class="modal fade" id="edit_receiver" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content" style="padding:30px 0;">
                    <div class="modal-header" style="border-bottom:0px">
                        <button type="button" class="close myModal-header-close" data-dismiss="modal" aria-label="Close">&times;</button>
                        <h4 class="modal-title">{{action_receiver}}</h4>
                    </div>
                    <div class="modal-body text-center" style="border-bottom:0px;">
                        <?php
                        $form=ActiveForm::begin([
                            'id'=>'edit_receiver_form',                        
                        ]);?>
                        <?=$form->field($receiverModel,'name',['enableAjaxValidation' => true])->textInput(['placeholder'=>$receiverModel->getAttributeLabel('name'),'v-model'=>'receiver_info.name'])->label(false)?>
                        <?=$form->field($receiverModel,'tel')->textInput(['placeholder'=>$receiverModel->getAttributeLabel('tel'),'v-model'=>'receiver_info.tel'])->label(false)?>
                        <?=$form->field($receiverModel, 'provid')->widget(\app\widgets\ActiveDropDownList::className(),['template'=>'<select id="tbreceiver-provid" v-model="provid" class="form-control" @change="changeProv" name="TbReceiver[provid]" > <option  v-for="(item,key) in prov" :value="key">{{item}}</option></select>'])->label(false)?>
                        <?=$form->field($receiverModel, 'cityid',['options'=>['v-show'=>'city_view']])->widget(\app\widgets\ActiveDropDownList::className(),['template'=>'<select id="tbreceiver-cityid" v-model="cityid" class="form-control" @change="changeCity" name="TbReceiver[cityid]"><option  v-for="(item,key) in city"  :value="key" >{{item}}</option></select>'])->label(false)?>
                        <?=$form->field($receiverModel, 'distid',['options'=>['v-show'=>'dist_view']])->widget(\app\widgets\ActiveDropDownList::className(),['template'=>'<select id="tbreceiver-distid" v-model="distid" class="form-control" name="TbReceiver[distid]"> <option  v-for="(item,key) in dist"  :value="key" >{{item}}</option></select>'])->label(false)?>
                        <?=$form->field($receiverModel,'addr')->textInput(['placeholder'=>$receiverModel->getAttributeLabel('addr'),'v-model'=>'receiver_info.addr'])->label(false)?>
                        <?=$form->field($receiverModel,'is_default')->checkbox(['placeholder'=>$receiverModel->getAttributeLabel('is_default'),'v-model'=>'receiver_info.is_default'])->label('设置为默认收货人')?>
                        <button type="submit" class="btn btn-danger btn-lg myModal-button-confirm">保存并使用</button>
                        <?=$form->field($receiverModel,'id')->hiddenInput(['v-model'=>'receiver_info.id'])->label(false)?>
                        <?php ActiveForm::end()?>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <div class="modal fade" id="change_receiver" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content" style="padding:40px 0;">
                    <div class="modal-header" style="border-bottom:0px;">
                        <button type="button" class="close myModal-header-close" data-dismiss="modal" aria-label="Close">&times;</button>
                        <h4 class="modal-title" id="exampleModalLabel">收货地址</h4>
                    </div>
                    <div class="modal-body text-center" style="border-bottom:0px">
                        <table class="table">
                            <tr v-for="(r,index) in receivers" v-if="r">
                                <td v-if="r.id==receiver_cur.id" width="30" valign="middle" align="center" style="vertical-align: middle">
                                    <span class="badge redbg" >
                                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                    </span>
                                </td>
                                <td @click="upReceiver(r.id)" align="left" :colspan="colspan2(r.id)" >
                                    <h4>{{r.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{r.tel}}</h4>
                                    <h5>
                                        {{r.provname.areaname}}{{r.cityname.areaname}}{{areaname(r.distname)}}{{r.addr}}&nbsp;&nbsp;&nbsp;<span class="badge redbg" v-show="r.is_default">默认</span>
                                    </h5>
                                </td>
                                <td style="vertical-align: middle" @click="editReceiver(r.id)">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                </td>
                            </tr>
                        </table>
                        <div>
                            <button type="button" @click="newReceiver" class="btn btn-danger btn-lg myModal-button-confirm"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新建收货地址</button>
                        </div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
    <?php
    $this->registerJsFile('/js/jquery.serialize-object.min.js',[
        'depends'=>'app\assets\MobileAsset',
    ]);
    $prov_cities = json_encode(Yii::$app->params['prov_cities']);
    $receivers = json_encode($receivers);
    //当前选择的收货人id
    $receiverid= $model->receiver;
    $js=<<<JS
       var app = new Vue({
           el: '#app',
           data:{
               prov:{},
               prov_cities:$prov_cities,
               provid:'',
               city:{},
               cityid:'',
               city_view: false,
               dist:{},
               distid:'',
               dist_view: false,
               receivers:$receivers,
               receiver_cur:'',
               receiver_first:'2',
               receiver_info:{},
               receiverid_def:'$receiverid_def',
               url_form:'$url_form',
               action_receiver:'新建收货地址',
               csrf:document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
           },
           created(){
               var receiverid = '$receiverid';
               if(receiverid&&this.receivers[receiverid]){
                   this.receiver_cur=this.receivers[receiverid];
               }
           },
           mounted(){
               this.valProv(); 
           },
            methods:{
               gocart(){
                   location.href='/mob-mem/cart/';
               },
               changeReceiver(){
                   var len=Object.keys(this.receivers).length;
                   if(len>0){
                       this.receiver_first='2';
                     $('#change_receiver').modal('show'); 
                   }else{
                       this.receiver_first='1';
                       // this.receiver_info.is_default=true;
                       this.newReceiver();
                   }
               },
               editReceiver(id){
                    this.receiver_first='2';
                    $('#change_receiver').modal('hide'); 
                    this.action_receiver='修改收货地址';
                    $('#edit_receiver').modal('show'); 
                    this.receiver_info=this.receivers[id];
                    this.provid = this.receiver_info.provid;
                    this.valArea(this.provid,2,1);
               },
               newReceiver(){
                    $('#change_receiver').modal('hide'); 
                    this.action_receiver='新建收货地址';
                    if(this.receiver_first=='1'){
                        this.receiver_info={'is_default':true};
                    }else{
                        this.receiver_info={};
                    }
                    this.provid='';
                    this.cityid='';
                    this.distid='';
                    this.prov_view=true;
                    this.city_view=false;
                    this.dist_view=false;
                    $('#edit_receiver').modal('show'); 
               },
               upReceiver(id){
                    var url  = "/mob-mem/up-receiver/";
                     var data=Qs.stringify({
                         id,
                         _csrf:this.csrf,
                     });
                     axios.post(url,data).then((res)=>{
                        var resData = res.data;
                        if(resData.error != "") {
                             console.log(resData.error);
                        }else{
                           this.receiver_cur=this.receivers[id];  
                           $('#change_receiver').modal('hide'); 
                        }
                     }).catch(function(){
                          console.log("出错了");
                     });              
               },
               valProv(){
                   this.valArea(0,1,0);
               },
               valArea(areaid,level,istop){
                     var url  = "/mob-mem/val-area/";
                     var data=Qs.stringify({
                         area:areaid, 
                         level:level,
                         _csrf:this.csrf,
                     });
                     axios.post(url,data).then((res)=>{
                        var resData = res.data;
                        if(resData.error != "") {
                             console.log(resData.error);
                        }else{
                            if(level==2){
                            // console.log(this.provid);
                                this.city=resData.data;
                                this.cityid='';
                                this.distid='';
                                var provs=Object.getOwnPropertyNames(this.prov_cities);
                                // console.log(provs);
                                var index = provs.indexOf(this.provid);
                                if(index > -1){
                                    this.city_view=false;
                                    this.cityid=this.prov_cities[provs[index]];
                                    if(istop == 0){
                                        this.valArea(this.cityid, 3, 0);
                                    }
                                }else if(this.provid==""){
                                    this.city_view=false;
                                    this.dist_view=false;
                                }else{
                                    this.city_view=true;
                                    this.dist_view=false;
                                }
                                if(istop == 1){
                                    this.cityid = this.receiver_info.cityid;
                                    this.valArea(this.cityid, 3, 1);
                                }
                            }else if(level==3){
                                this.dist=resData.data;
                                var len=Object.keys(resData.data).length;
                                this.distid='';
                                if(len==0){
                                    this.dist_view=false;
                                    this.dist = {'-1':''};
                                    this.distid=-1;
                                }else{
                                    if(this.cityid==""){
                                        this.dist_view=false;
                                    }else{
                                        this.dist_view=true;
                                    }
                                    if(istop == 1){
                                        this.valArea(this.cityid, 3, 2);
                                    }else if(istop == 2){
                                        this.distid = this.receiver_info.distid;
                                    }
                                }
                            // console.log(this.cityid);
                            }else if(level==1){
                                this.prov=resData.data;
                                this.provid=''; 
                                this.cityid='';
                                this.distid='';
                            }
                            // console.log(Object.keys(resData.data).length);
                        }
                     }).catch(function(){
                          console.log("出错了");
                     });               
               },
               changeProv(){
                  this.valArea(this.provid,2,0);
               },
               changeCity(){
                  this.valArea(this.cityid,3,0);
               },
            },
            computed:{
               receiverid_cur(){
                  var len =  Object.keys(this.receiver_cur).length; 
                  if(len>0){
                      return this.receiver_cur.id;
                  } 
                  return '';
               },
               colspan2(){
                   return function(id){
                      var len =  Object.keys(this.receiver_cur).length; 
                      if(len>0){
                       if(id!=this.receiver_cur.id){
                           return '2';
                       }
                      }                    
                       return '1';
                   }
               },
               areaname(){
                   return function(area){
                        if(area){
                            return area.areaname;
                        }
                        return '';
                   };
               },
               address(){
                   return function(receiver){
                      return this.areaname(receiver.provname)+this.areaname(receiver.cityname)+this.areaname(receiver.distname);
                   }
               },
               receiver_cur_view(){
                   let len =  Object.keys(this.receiver_cur).length;
                    return  len>0?true:false;
               },
            },
           });
            $('#edit_receiver_form').on('beforeSubmit', function(e) {
                var url='/mob-mem/add-receiver/';
                var data=$("#edit_receiver_form").serialize();
                PageAddOverlayer();
                 axios.post(url,data).then((res)=>{
                    var resData = res.data;
                    if(resData.error != "") {
                         console.log(resData.error);
                        // console.log("出了点小问题");
                    }else{
                        app.receiver_first='2';
                        app.receivers[resData.data['id']]=resData.data;
                        app.receiver_cur=resData.data;
                        if(app.receiver_cur.is_default){
                            if(app.receiverid_def>0){
                                app.receivers[app.receiverid_def]['is_default']=false;
                            }
                            app.receivers[app.receiver_cur.id]['is_default']=true;
                            app.receiverid_def=app.receiver_cur.id;
                        }
                        // $('#receiver').html(resData.html);
                        $('#edit_receiver').modal('hide'); 
                    }
                    PageRemoveOverlayer();
                 }).catch(function(){
                    console.log("添加收货人信息时出了点小问题");
                    PageRemoveOverlayer();
                 });            
                return false;
            }).on('submit', function(e){
                e.preventDefault();
            });
    JS;
    $this->registerJs($js,static::POS_END);
    ?>
    
    觉得很赞
  • 回复于 2019-02-27 08:37 举报

    前台效果可以看这里:
    https://m.cncaraudio.com/m/goods/

  • 回复于 2019-02-27 12:16 举报

    查看效果时,不要用华为手机默认的浏览器,它对Modal解析不正常。使用UC或CHROME浏览器都可以。

您需要登录后才可以回复。登录 | 立即注册