2. 程式人生 > >僅此記錄巧用vue.js的一個頁面

僅此記錄巧用vue.js的一個頁面

阿新 • • 發佈：2018-12-21

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
    <script src="//images.zaijiawan.com/small-res/component/vue/2.3.3/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/
 
[email protected]/dist/vue.js"></script>
    <script src="//images.zaijiawan.com/small-res/component/axios/0.17.1/axios.min.js"></script>
    <script src="//images.zaijiawan.com/small-res/component/jquery/3.1.1/jquery-3.1.1.min.js"></script>
    <link href="//images.zaijiawan.com/small-res/component/bootstrap/3.3.7/bootstrap.min.css" rel="stylesheet">
    <script src="//images.zaijiawan.com/small-res/component/bootstrap/3.3.7/bootstrap.min.js"></script>
    <script src="//images.zaijiawan.com/small-res/component/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="../../js/global-component.js"></script>
    <script src="../../js/global.js"></script>
    <link rel="stylesheet" href="../../css/global.css">
    <title>新增有贊商品-1688商城商品模版</title>
</head>
<body>
<div id="app">
    <global-nav :user="user_display"></global-nav>
    <div class="div-main">
        <global-sidebar tab="insertTemplate"></global-sidebar>
        <div class="div-main-content">
            <p class="p-main-content-title">新增有贊商品-1688商城商品模版</p>
            <div class="div-main-content-page">
                <div class="alert alert-info" role="alert">
                    <strong>該功能目前處於測試階段：新增商品模版後請到商品模版列表認真核對記錄是否準確無誤！</strong>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control"  name="query" v-model="query" placeholder="查詢有贊商品">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" type="button " @click="search">搜尋</button>
                           </span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">有贊商品id：</label>
                        <div class="col-sm-10">
                            <p class="form-control-static">{{youzanId}}</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">有贊名稱：</label>
                        <div class="col-sm-10">
                            <p class="form-control-static">{{youzanName}}</p>
                        </div>
                    </div>
                </div>
                <!-- Nav tabs -->
                <div>
                    <ul class="nav nav-tabs" role="tablist" id="skuTabs">
                        <li role="presentation" v-for="(sku,index) in youzanSku" style="display: flex;justify-content: left;align-items: center;">
                            <a aria-controls="home" role="tab" data-toggle="tab" :href="setHref(sku.skuId)">規格{{index+1}}</a>
                            <span class="glyphicon glyphicon-remove" aria-hidden="true" @click="shunDownTab(index)" style="margin-left: -18px;margin-top: -28px;"></span>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content" id="tabContent">
                        <div role="tabpanel" class="tab-pane" style="width: 70%" v-for="(sku,index) in info.youzanSkuInfo" :id="setTabContentId(sku.youzanSkuId)">
                            <div class=form-horizontal>
                                <div class=form-group>
                                    <label class=col-sm-2 control-label>規格id：</label>
                                    <div class=col-sm-10>
                                        <p class=form-control-static>{{sku.youzanSkuId}}</p>
                                    </div>
                                </div>
                                <div class=form-group>
                                    <label class=col-sm-2 control-label>商品規格：</label>
                                    <div class=col-sm-10>
                                        <p class=form-control-static>{{sku.youzanSkuName}}</p>
                                    </div>
                                </div>
                                <div class=form-group>
                                    <label class=col-sm-2 control-label>商品數量</label>
                                    <div class=col-sm-10>
                                        <p class=form-control-static>1</p>
                                    </div>
                                </div>
                                <div class=form-horizontal v-for="goods in sku.aliGoodsInfo">
                                    <hr style="border: #aaaaaa 1px solid;">
                                    <div class=form-group>
                                        <label class=col-sm-2 control-label>1688商品id</label>
                                        <div class=col-sm-10>
                                            <input type=text class=form-control name="goods.aliGoodsId" v-model="goods.aliGoodsId"  placeholder="aliGoodsId">
                                        </div>
                                    </div>
                                    <div class=form-group>
                                        <label  class=col-sm-2 control-label>1688商品名</label>
                                        <div class=col-sm-10>
                                            <input type=text class=form-control name="goods.aliGoodsName" v-model="goods.aliGoodsName" placeholder="aliGoodsName">
                                        </div>
                                    </div>
                                    <div class=form-group>
                                        <label  class=col-sm-2 control-label>規格1</label>
                                        <div class=col-sm-10>
                                            <input type=text class=form-control name="goods.aliSku1" v-model="goods.aliSku1" placeholder="aliSku1">
                                        </div>
                                    </div>
                                    <div class=form-group>
                                        <label  class=col-sm-2 control-label>規格2</label>
                                        <div class=col-sm-10>
                                            <input type=text class=form-control name="goods.aliSku2" v-model="goods.aliSku2" placeholder="aliSku2">
                                        </div>
                                    </div>
                                    <div class=form-group style="display: flex;justify-content: left;align-items: center;">
                                        <label class=col-sm-2 control-label>1688商品數量</label>
                                        <div class=col-sm-10>
                                            <input type=text class=form-control name="goods.aliNum"  v-model="goods.aliNum" placeholder="aliNum">
                                        </div>
                                        <span style="margin-right:-30px;"><img @click="addAliGoodsInfo(sku)" src="http://images0.zaijiawan.com/wechat/material/
 
[email protected]!ori"></span>
                                    </div>
                                </div>
                            </div>
                            <hr style="border: #aaaaaa 1px solid;">
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-primary" @click="saveToDB()">確定新增</button>
            </div>
        </div>
    </div>
    <!-- 搜尋商品模態框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        商品列表
                    </h4>
                </div>
                <div class="modal-body" id="modalBody">
                    <div v-for="goods in searchList">
                        <div><span @click="addGoods(goods)"><img src="http://images0.zaijiawan.com/wechat/material/
 
[email protected]!ori"></span>{{goods.youzanGoodsId}}&nbsp&nbsp&nbsp{{goods.title}}</div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>


</body>
</html>
<style>
    .nav-tabs>li{
        background-color: rgb(209, 238, 238);
    }

</style>
<script>
    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })

    var app = new Vue({
        el: '#app',
        data: {
            user_display: '',
            searchList: [],
            query: '',
            youzanId: '',
            youzanName: '',
            youzanSku: [],

            <!-- 頁面元素資訊-->
            info: {
                youzanId: '',
                youzanName: '',
                youzanSkuInfo: [

                ],
            },
            <!-- youzanSkuInf內結構
            youzanSkuInfo:{
                    youzanSkuId: '',
                    youzanSkuName: '',
                    youzanNum:'',
                    aliGoodsInfo: [
                        {
                            aliGoodsId: '',
                            aliGoodsName: '',
                            aliSku1: '',
                            aliSku2: '',
                            aliNum: ''
                        }
                    ]
            },
        -->
        },
        methods: {
            search: function () {
                console.log("搜尋商品");
                axios.get('../../aliGoodsOrder/template/search/goods?q=' + app.query)
                    .then(function (response) {
                        console.log(response.data);
                        app.searchList = response.data;
                    });
            },
            setHref: function(id){
                return "#content" + id;
            },
            setTabContentId :function(id){
                return "content" + id;
            },
            addAliGoodsInfo: function(sku){
                sku.aliGoodsInfo.push({
                    aliGoodsId: '',
                    aliGoodsName: '',
                    aliSku1: '',
                    aliSku2: '',
                    aliNum: ''
                });
            },
            addGoods: function (goods) {
               app.youzanId = goods.youzanGoodsId;
               app.youzanName = goods.title;
               app.info.youzanId = app.youzanId;
               app.info.youzanName = app.youzanName;

               app.getSkuInfo(goods.youzanGoodsId);

               $("#myModal").modal('hide');


            },
            getSkuInfo: function (id) {
                axios.get('../../aliGoodsOrder/template/get/goods?id='+id)
                    .then(function (response) {
                        console.log(response.data);
                        app.youzanSku = response.data;
                        //將之前的資訊清除
                        app.info.youzanSkuInfo=[];
                        app.getinfo();
                    });
            },
            getinfo :function(){
                for(var i = 0; i < app.youzanSku.length ; i++){
                    app.info.youzanSkuInfo.push({
                        youzanSkuId: app.youzanSku[i].skuId,
                        youzanSkuName: app.youzanSku[i].propertiesNameJsonStringSku,
                        youzanNum:1,
                        aliGoodsInfo: [
                            {
                                aliGoodsId: '',
                                aliGoodsName: '',
                                aliSku1: '',
                                aliSku2: '',
                                aliNum: ''
                            }
                        ]
                    });
                }
            },
            shunDownTab: function (index) {
                app.info.youzanSkuInfo.splice(index,1);
                console.log("刪除前："+JSON.stringify(app.youzanSku));
                app.youzanSku.splice(index,1);
                console.log("刪除後："+JSON.stringify(app.youzanSku));

            },
            saveToDB:function () {
            console.log("我添加了！");
            console.log(JSON.stringify(app.info));
            var params = new URLSearchParams();
            params.append("info",JSON.stringify(app.info));
            axios.post('../../aliGoodsOrder/template/save',params)
                .then(function (response) {
                    var respData = response.data;
                    if(respData.result === 'ok'){
                        alert("新增成功！");
                    } else{
                        alert("新增失敗，可能存在重複新增！請核對後再進行操作！");
                    }
                });

            }
        }

    });




</script>

 

相關推薦

僅此記錄巧用vue.js的一個頁面

  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge

用vue開發一個app（2，main.js）

.html 第一次用 courier ace 第一次 router -s 提示 新建 昨天跟著vue的官網搭建了vue的一個腳手架，我也是第一次用VUE一切都在摸索階段。 今天試著看下裏面腳手架裏面有點什麽東西 先看看main.js

用Vue.js來開發一個電影App的前端部分

column 多種方式 -a 目標 部分 cli 多路由 cdn tor 我們要構建一個什麽樣的App？ 我們大多數人使用在線流媒體服務（如Netflix）觀看我們最喜歡的電影或者節目。這篇文章將重點介紹如何通過使用vue.js 2建立一個類似風格的電影流媒體WEB交互界

用Vue.js搭建一個小說閱讀網站

1.簡介 這是一個使用vue.js + mint-ui + .net core api的小說網站。 最近在學習vue.js，而拋開實踐的學習都是在裝逼，所以結合實際，準備做一個小說網站，這樣麻麻再也不用擔心我在看小說時被不良資訊侵擾了哈哈。 首先說明一下，小說資料來源於網路搜尋，並不直接儲存於自己的伺服

用vue.js的v-for，v-if，computed寫一個分頁樣式

在學Vue，總想寫個分頁，先寫了一個樣式。 主要看思路： 思路簡單，得到總頁數，判斷總頁數，迴圈。 先判斷總頁數是否需要分頁，總頁數==1頁就不分了。 再判斷總頁數<11就不用……。 總頁數>11，就要用到1…… 678 …… 末頁 通過v-if 判斷，通過v-for迴圈。 效果圖： 程式碼如

用vue寫一個商城的上貨元件（簡單易懂版，50行js實現效果）

0、結果放前面 加個Star後，fork下來。 然後在控制檯，先輸入npm install安裝依賴，再輸入npm run dev執行檢視效果 1、先列需求 一切開發都是基於需求做的，所以需求先行，根據需求設計功能。 需求如下： 上貨商品有多

用Vue.js遞迴元件構建一個可摺疊的樹形選單

在Vue.js中一個遞迴元件呼叫的是其本身，如： Vue.component('recursive-component', { template: `<!--Invoking myself!--> &

用vue.js和vue-router重構一個網站

拿了個以前的專案做練手，用了vue-cli，vue-router，vuex。主要還是想學習一下webpack和單檔案元件的思想。不過程式碼寫得其實挺匆忙，感覺還有很多地方還能改進，元件化思想還是不能很好的掌握。 github地址：https://github.

用vue.js寫一個級聯聯動效果

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>vue.js級聯</title><script src="js/vue.js"&g

用Vue實現一個全選指令

lld http 做了 hbm n) 功能 sin fur sbc 最近用vue做了兩個項目，都需要實現全選反選的功能，兩個項目用了兩種實現方法，第一個項目用vue的computed，第二個項目用指令來實現，用起來，發覺指令更加方便。 第一次做全選的時候是剛開始接觸vue不

用vue做一個酷炫的menu

方法 tar ges enter 導入 count https 簡單 ren 寫在前面 最近看到一個非常酷炫的menu插件，一直想把它鼓搗成vue形式，誰讓我是vue的死灰粉呢，如果這都不算愛??。??開個小玩耍，我們一起來探索黑魔法吧。觀看本教程的讀者需要

巧用underscore.js處理復雜的json

mapreduce 過濾 aud 復雜 固定 string 裏的 red count underscore.js是非常小巧的js工具庫，特別方便處理數組，對象，json等 引入underscore.js： var _ = require(‘underscore‘);

在上線項目中，用Vue寫一個星級評價

spa align wid cti function top icon com ont 先看一下效果： html: <div class="big-star-box"> <img :src="imgNum>0 ?

Vue.js——一個todolist的小嚐試

前言： 至此為止，還仍然是跟著Vue.js的官方文件，對照網路上的一些教程進行較為分散的學習。大部分還停留在理論性的表面學習與對於官方文件中示例程式碼的理解。因為缺少實戰，還是有些雲裡霧裡。所以這一篇，準備對Vue來一個小小的實戰。 演示示例 實現功能： 實現瀏

用 Vue 做一個簡單的購物app

有意思 應用程序 其中 ins com 簡單的 node.js 引入 大神 前言 最近在學習Vue的使用。看了官方文檔之後，感覺挺有意思的。於是著手做了一個簡單的購物app。這是我第一次在這個網站上寫分享，如有不當之處，請多多指教。 一整個項目寫下來，最大的感覺就是組件式開

用Vue實現一個簡單的輪播效果

Vue實現簡單的輪播效果，用的的一些常用系統指令： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

一步一步教你用 Vue.js + Vuex 製作專門收藏微信公眾號的 app

寫於 2016.06.30 只看不讚，或者只收藏不讚的都是耍流氓，放學別走，我找我哥收拾你們。 專案地址：github.com/jrainlau/we… 下載&執行 git clone [email protected]:jra

用vue.js寫todoMvc

HTML部分 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content

用 Vue 編寫一個長按指令

有沒有想過只需按住一個按鈕幾秒鐘就能在你的 Vue 應用中觸發一個功能？ 有沒有想過建立一個按鈕，按下一次就可以清除單次輸入（或者持續按住可以清除所有輸入）？ 想過？太好了，英雄所見略同。 本文就是講解如何在按下（或者按住）一個按鈕時，既執行一個函式，又

Vue.js 關於頁面載入完成後執行一個方法的問題

首先我們會想著在mounted或者created裡面加入想要執行的方法，但是有的時候會遇到在你執行這個方法的時候，頁面還並沒有被渲染完成，所以就會出現這個方法在匹配頁面標籤報錯的情況。 解決思路： 1.通過子頁面呼叫父頁面的方法，因為在子頁面開始渲染的時候，你的父頁面肯定