Yii2 集成 Vue 做了个手机购物车 [ 技术分享 ]
最近使用 Yii2 集成 Vue 实现购物车，发几张效果图： 有需要干活的老板可以联系我，谢谢！
购物车
确认订单
新建收货地址
选择收货地址
修改收货地址
（全文完）
共 6 条回复
-
-
-
-
@╃巡洋艦㊣ 代码在这里：
<?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}} {{receiver_cur.tel}}</h4> <h5><span v-show="receiver_cur.is_default"><span class="badge redbg" >默认</span> </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> <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">×</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">×</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}} {{r.tel}}</h4> <h5> {{r.provname.areaname}}{{r.cityname.areaname}}{{areaname(r.distname)}}{{r.addr}} <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); ?>chupjun 觉得很赞 -
前台效果可以看这里：
https://m.cncaraudio.com/m/goods/ -
副董事长
阿江
注册时间：2015-10-18
最后登录：2024-03-03
在线时长：186小时21分
最后登录：2024-03-03
在线时长：186小时21分
- 粉丝94
- 金钱16816
- 威望160
- 积分20276