样式优化

zhiyangdu
1 parent 2b385494
Showing 5 changed files with 181 additions and 145 deletions
src/components/swiper/swiper.vue
src/main.js
src/pages/goodDetails/goodDetails.less
src/pages/goodDetails/goodDetails.vue
src/pages/pointsMall/pointsMall.vue
@@ -10,7 +10,7 @@
             </swipe-item>
               <template v-if="isPointsMall" #indicator>
                 <div class="custom-indicator">
-                  {{ current + 1 }}/4
+                  {{ current + 1 }}/{{swipers.length}}
                 </div>
               </template>
         </swipe>
@@ -4,13 +4,25 @@ import router from &quot;./router/&quot;;
 import VueResource from "vue-resource";
 import VueHead from "vue-head";
 import sha1 from "sha1";
-import 'mint-ui/lib/style.css';
-import { Toast, Indicator,InfiniteScroll } from "mint-ui";
-import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview, Tab, Tabs, CountDown} from "vant";
+import "mint-ui/lib/style.css";
+import { Toast, Indicator, InfiniteScroll } from "mint-ui";
+import {
+    Rate,
+    Popup,
+    Lazyload,
+    Search,
+    PullRefresh,
+    Picker,
+    Image,
+    ImagePreview,
+    Tab,
+    Tabs,
+    CountDown
+} from "vant";
 import App from "./App";
-import IdCard from './common/IdCard';
-import VueClipboard from 'vue-clipboard2';
-import VueBus from 'vue-bus';
+import IdCard from "./common/IdCard";
+import VueClipboard from "vue-clipboard2";
+import VueBus from "vue-bus";
 Vue.use(Vuex);
 Vue.use(VueResource);
 Vue.use(VueHead, { separator: " " });
@@ -40,89 +52,89 @@ Vue.use(VueBus);
 Vue.use(InfiniteScroll);
 // 解决低版手机浏览器不支持es6写法，将es6转成es5
-import 'babel-polyfill';
-import promise from 'es6-promise';
-require('es6-promise').polyfill();
+import "babel-polyfill";
+import promise from "es6-promise";
+require("es6-promise").polyfill();
 promise.polyfill();
 // 安卓5.1兼容
-import 'url-search-params-polyfill';
+import "url-search-params-polyfill";
 Vue.config.productionTip = false;
 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"）
-Vue.prototype.mode = "dev";
+Vue.prototype.mode = "prod";
 // 微信JS-SDK对象
 Vue.prototype.jweixin = {
     value: null
-}
+};
 // 是否是iPhone平台，默认不是，common.vue进行判断设置
 Vue.prototype.isiPhone = {
     value: false
-}
+};
 // 是否是iPad平台，默认不是，common.vue进行判断设置
 Vue.prototype.isiPad = {
     value: false
-}
+};
 // 是否是Android平台，默认不是，common.vue进行判断设置
 Vue.prototype.isAndroid = {
     value: false
-}
+};
 // 是否在App内，默认不在，common.vue进行判断设置
 Vue.prototype.isCNLive = {
     value: false
-}
+};
 // 是否在App内（一组WebView），默认不在，common.vue进行判断设置
 Vue.prototype.isPlat = {
-	value: false
-}
+    value: false
+};
 // 是否在支付宝内，默认不在，common.vue进行判断设置
 Vue.prototype.isAliPay = {
     value: false
-}
+};
 // 是否在微信内，默认不在，common.vue进行判断设置
 Vue.prototype.isWeChat = {
     value: false,
     version: []
-}
+};
 // 是否在QQ内，默认不在，common.vue进行判断设置
 Vue.prototype.isQQ = {
     value: false
-}
+};
 // 是否在小米浏览器内，默认不在，common.vue进行判断设置
 Vue.prototype.isXiaoMi = {
-	value: false
-}
+    value: false
+};
 /* 后端API版本控制参数 开始 */
 // 参数设置
 Vue.prototype.apiVersion = {
     LuckDraw: "LuckDraw", // 活动接口
-    index:"Index3",// 主接口
-    miniapp:"Miniapp2",// 调用微信相关接口
+    index: "Index3", // 主接口
+    miniapp: "Miniapp2", // 调用微信相关接口
     dynamic: "Dynamic", // 达人动态相关接口
     LeadGoose: "LeadGoose", // 领头雁项目
     // addAddresss:"https://managemall.cnlive.com/",// 生产环境url
-    addAddresss:"https://wjjshop.cnlive.com/"// 测试环境url
-}
+    addAddresss: "https://wjjshop.cnlive.com/" // 测试环境url
+};
 /**
  * 获取后端API版本
  */
 Vue.prototype.getApiVersion = function() {
     return this.apiVersion;
-}
+};
 /* 后端API版本控制参数 结束 */
 /* 设置图片尺寸参数 开始 */
@@ -133,12 +145,11 @@ Vue.prototype.SIGN = {
     MIDDLE: "?imageMogr2/thumbnail/400/format/jpg",
     BIG: "?imageMogr2/thumbnail/750/format/jpg",
     SOURCE: ""
-}
+};
 /* 设置图片尺寸参数 结束 */
 /* 根据模式，获取相关请求参数 开始 */
 Vue.prototype.getParams = function(mode) {
-
     // 返回参数
     let params = {};
@@ -149,12 +160,12 @@ Vue.prototype.getParams = function(mode) {
                 headers: {
                     "content-type": "application/x-www-form-urlencoded",
                     "Phone-Model": "Wap",
-                    "Version":"1.0.1"
+                    Version: "1.0.1"
                 },
                 sellerCategory: {
                     url: "http://wjjh5test.cnlive.com/hqyw.html"
                 }
-            }
+            };
             params.cnlive = {
                 apiAddress: "https://api.cnlive.com",
                 params: {
@@ -162,35 +173,42 @@ Vue.prototype.getParams = function(mode) {
                     appKey: "9c5619e9be747bb3b925dd215ca5923d86f12c09b9394f",
                     secret: "1e6380cb347255e777f72b5aa60f41daa68443a132aaea",
                     ver: "1.0",
-                    page_url: "https://wjjshop.cnlive.com/html/votes/1/#/pages/redirect/redirect",
-                    timestamp: new Date().getTime().toString().substr(0, 10)
+                    page_url:
+                        "https://wjjshop.cnlive.com/html/votes/1/#/pages/redirect/redirect",
+                    timestamp: new Date()
+                        .getTime()
+                        .toString()
+                        .substr(0, 10)
                 },
                 headers: {
                     "content-type": "application/x-www-form-urlencoded"
                 }
-            }
+            };
             break;
         case "prod":
-
             // 请求头
             let app_key = "769_jnjxdh3w53";
-            let timestamp = new Date().getTime().toString().substr(0, 10);
-            let nonce = "MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCpeLgK0vk5POU5PQ";
+            let timestamp = new Date()
+                .getTime()
+                .toString()
+                .substr(0, 10);
+            let nonce =
+                "MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCpeLgK0vk5POU5PQ";
             params.shop = {
                 apiAddress: "https://managemall.cnlive.com",
                 headers: {
                     "App-Key": app_key,
-                    "Timestamp": timestamp,
-                    "Signature": sha1(app_key + nonce + timestamp),
+                    Timestamp: timestamp,
+                    Signature: sha1(app_key + nonce + timestamp),
                     "content-type": "application/x-www-form-urlencoded",
                     "Phone-Model": "Wap",
-                    "Version":"1.0.1"
+                    Version: "1.0.1"
                 },
                 sellerCategory: {
                     url: "http://wjjh5.cnlive.com/hqyw.html"
                 }
-            }
+            };
             params.cnlive = {
                 apiAddress: "https://api.cnlive.com",
                 params: {
@@ -198,13 +216,17 @@ Vue.prototype.getParams = function(mode) {
                     appKey: "0d57b045ec0c3988a682d94c644e66b9b8e0d2b8ef937d",
                     secret: "275e8dc29274a1186d82f65bc607c231d02bcb3bfd8976",
                     ver: "1.0",
-                    page_url: "https://managemall.cnlive.com/html/votes/1/#/pages/redirect/redirect",
-                    timestamp: new Date().getTime().toString().substr(0, 10)
+                    page_url:
+                        "https://managemall.cnlive.com/html/votes/1/#/pages/redirect/redirect",
+                    timestamp: new Date()
+                        .getTime()
+                        .toString()
+                        .substr(0, 10)
                 },
                 headers: {
                     "content-type": "application/x-www-form-urlencoded"
                 }
-            }
+            };
             break;
         case "dev":
         default:
@@ -216,7 +238,7 @@ Vue.prototype.getParams = function(mode) {
                 sellerCategory: {
                     url: "http://wjjh5test.cnlive.com/hqyw.html"
                 }
-            }
+            };
             params.cnlive = {
                 apiAddress: "https://api.cnlive.com",
                 params: {
@@ -224,22 +246,25 @@ Vue.prototype.getParams = function(mode) {
                     appKey: "9c5619e9be747bb3b925dd215ca5923d86f12c09b9394f",
                     secret: "1e6380cb347255e777f72b5aa60f41daa68443a132aaea",
                     ver: "1.0",
-                    page_url: "http://172.16.2.171:8083/html/votes/1/#/pages/redirect/redirect",
-                    timestamp: new Date().getTime().toString().substr(0, 10)
+                    page_url:
+                        "http://172.16.2.171:8083/html/votes/1/#/pages/redirect/redirect",
+                    timestamp: new Date()
+                        .getTime()
+                        .toString()
+                        .substr(0, 10)
                 },
                 headers: {
                     "content-type": "application/x-www-form-urlencoded"
                 }
-            }
+            };
     }
     return params;
-}
+};
 /* 根据模式，获取相关请求参数 结束 */
 /* cnlive接口，sign处理 开始 */
 Vue.prototype.getCnliveParams = function(datas, params, method = "GET") {
-
     // 返回结果，根据method返回不同值，Object or Array
     let result = {};
@@ -266,7 +291,6 @@ Vue.prototype.getCnliveParams = function(datas, params, method = &quot;GET&quot;) {
     for (let i in keySortArr) {
         if (p[keySortArr[i]]) {
-
             // 签名数组
             stringArr.push(keySortArr[i] + "=" + p[keySortArr[i]]);
@@ -286,14 +310,12 @@ Vue.prototype.getCnliveParams = function(datas, params, method = &quot;GET&quot;) {
     // OPEN方式参数
     if (method.toUpperCase() == "OPEN") {
-
         // 加入签名
         paramsArr.push("sign=" + sign);
         // 设置返回
         result = paramsArr;
     } else {
-
         // 加入签名
         p.sign = sign;
@@ -302,7 +324,7 @@ Vue.prototype.getCnliveParams = function(datas, params, method = &quot;GET&quot;) {
     }
     return result;
-}
+};
 /* cnlive接口，sign处理 结束 */
 /* AJAX请求 开始 */
@@ -315,7 +337,6 @@ Vue.prototype.getCnliveParams = function(datas, params, method = &quot;GET&quot;) {
  * @param {object} ext          [扩展参数]
  */
 Vue.prototype.http = function(path, data, callback, ext) {
-
     /**
      * get请求处理
      * @param {object} context      [Vue对象]
@@ -326,44 +347,41 @@ Vue.prototype.http = function(path, data, callback, ext) {
      * @param {object} headers      [请求头]
      */
     function get(context, path, data, callback, ext, headers) {
-
         // 时间戳
         data._timestamp = new Date().getTime();
         let params = {
-            emulateJSON: true,           // 按照普通表单形式传送
+            emulateJSON: true, // 按照普通表单形式传送
             // withCredentials: true,
             params: data,
             _timeout: 30000,
             headers
-        }
+        };
         // HTTP请求
-        context.$http.get(path, params).then(resp => {
-
-            // 获取返回数据
-            let respBody = resp.body;
-
-            // 处理回调
-            if (typeof callback === "function") {
-                if (ext) {
-
-                    // 回调，同时返回扩展参数
-                    callback(respBody, ext);
-                } else {
-
-                    // 回调
-                    callback(respBody);
+        context.$http.get(path, params).then(
+            resp => {
+                // 获取返回数据
+                let respBody = resp.body;
+
+                // 处理回调
+                if (typeof callback === "function") {
+                    if (ext) {
+                        // 回调，同时返回扩展参数
+                        callback(respBody, ext);
+                    } else {
+                        // 回调
+                        callback(respBody);
+                    }
                 }
+            },
+            err => {
+                /* 加载错误处理 开始 */
+                Indicator.close();
+                Toast("请求出错");
+                /* 加载错误处理 结束 */
             }
-        }, err => {
-
-            /* 加载错误处理 开始 */
-            Indicator.close();
-            Toast("请求出错");
-            /* 加载错误处理 结束 */
-
-        });
+        );
     }
     /**
@@ -376,48 +394,44 @@ Vue.prototype.http = function(path, data, callback, ext) {
      * @param {object} headers      [请求头]
      */
     function post(context, path, data, callback, ext, headers) {
-
         // 时间戳
         data._timestamp = new Date().getTime();
         // 请求配置
         let requestConfig = {
-            emulateJSON: true,           // 按照普通表单形式传送
+            emulateJSON: true, // 按照普通表单形式传送
             // withCredentials: true,
             headers,
             _timeout: 30000
-        }
+        };
         // HTTP请求
-        context.$http.post(path, data, requestConfig).then(resp => {
-
-            // 获取返回数据
-            let respBody = resp.body;
-
-            // 处理回调
-            if (typeof(callback) === "function") {
-                if (ext) {
-
-                    // 回调，同时返回扩展参数
-                    callback(respBody, ext);
-                } else {
-
-                    // 回调
-                    callback(respBody);
+        context.$http.post(path, data, requestConfig).then(
+            resp => {
+                // 获取返回数据
+                let respBody = resp.body;
+
+                // 处理回调
+                if (typeof callback === "function") {
+                    if (ext) {
+                        // 回调，同时返回扩展参数
+                        callback(respBody, ext);
+                    } else {
+                        // 回调
+                        callback(respBody);
+                    }
                 }
+            },
+            err => {
+                /* 加载错误处理 开始 */
+                Indicator.close();
+                Toast("请求出错");
+                /* 加载错误处理 结束 */
             }
-        }, err => {
-
-            /* 加载错误处理 开始 */
-            Indicator.close();
-            Toast("请求出错");
-            /* 加载错误处理 结束 */
-
-        });
+        );
     }
-    if(path) {
-
+    if (path) {
         // 上下文
         let context = this;
@@ -437,45 +451,55 @@ Vue.prototype.http = function(path, data, callback, ext) {
         let api = "shop";
         // 请求方式
-        if (typeof(ext) === "object" && ext.method) {
-            if(methodsArr.includes(ext.method.toUpperCase())) {
+        if (typeof ext === "object" && ext.method) {
+            if (methodsArr.includes(ext.method.toUpperCase())) {
                 method = ext.method.toUpperCase();
             }
         }
         // 请求地址
-        if (typeof(ext) === "object" && ext.api) {
-            if(apiArr.includes(ext.api.toLowerCase())) {
+        if (typeof ext === "object" && ext.api) {
+            if (apiArr.includes(ext.api.toLowerCase())) {
                 api = ext.api.toLowerCase();
             }
         }
         // cnlive接口，sign处理
         if (api == "cnlive") {
-
             // 获取cnlive接口所需参数（包括sign获取等封装）
             data = this.getCnliveParams(data, params[api].params, method);
         }
         // 判断请求方式
         if (method.toUpperCase() === "OPEN") {
-
             // 打开页面
-            window.location.href = params[api].apiAddress + path + "?" + data.join("&");
+            window.location.href =
+                params[api].apiAddress + path + "?" + data.join("&");
         } else {
-
             // 判断请求类型
             switch (method) {
                 case "POST":
-
                     // 调用post方法
-                    post(context, params[api].apiAddress + path, data, callback, ext, params.shop.headers);
+                    post(
+                        context,
+                        params[api].apiAddress + path,
+                        data,
+                        callback,
+                        ext,
+                        params.shop.headers
+                    );
                     break;
                 case "GET":
                 default:
-
                     // 调用get方法
-                    get(context, params[api].apiAddress + path, data, callback, ext, params.shop.headers);
+                    get(
+                        context,
+                        params[api].apiAddress + path,
+                        data,
+                        callback,
+                        ext,
+                        params.shop.headers
+                    );
                     break;
             }
         }
@@ -484,7 +508,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
 /*vue-resource请求超时timeout设置*/
 Vue.http.interceptors.push((request, next) => {
-
     let timeout;
     // 如果某个请求设置了_timeout,那么超过该时间，会中断该（abort）请求,并执行请求设置的钩子函数onTimeout方法，不会执行then方法。
@@ -502,7 +525,6 @@ Vue.http.interceptors.push((request, next) =&gt; {
 /* 过滤器 开始 */
 Vue.filter("datetime", function(value, fmt) {
-
     // 时间戳转换日期对象
     let datetime = new Date(value);
     // datetime.setTime(value);
@@ -527,14 +549,29 @@ Vue.filter(&quot;datetime&quot;, function(value, fmt) {
         "6": "/u516d"
     };
     if (/(y+)/.test(fmt)) {
-        fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
+        fmt = fmt.replace(
+            RegExp.$1,
+            (datetime.getFullYear() + "").substr(4 - RegExp.$1.length)
+        );
     }
     if (/(E+)/.test(fmt)) {
-        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length > 1 ? RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468" : "") + week[datetime.getDay() + ""]);
+        fmt = fmt.replace(
+            RegExp.$1,
+            (RegExp.$1.length > 1
+                ? RegExp.$1.length > 2
+                    ? "/u661f/u671f"
+                    : "/u5468"
+                : "") + week[datetime.getDay() + ""]
+        );
     }
     for (var k in o) {
         if (new RegExp("(" + k + ")").test(fmt)) {
-            fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+            fmt = fmt.replace(
+                RegExp.$1,
+                RegExp.$1.length == 1
+                    ? o[k]
+                    : ("00" + o[k]).substr(("" + o[k]).length)
+            );
         }
     }
@@ -577,13 +614,12 @@ Vue.prototype.$iFrame = {
  */
 Vue.prototype.getStore = function(key) {
     return store.state[key];
-}
+};
 /* 获取Vuex参数 结束 */
 /* 状态管理 开始 */
 const store = new Vuex.Store({
     state: {
-
         // debug模式
         debug: true,
@@ -597,7 +633,6 @@ const store = new Vuex.Store({
         uid: 0
     },
     mutations: {
-
         // 设置设备类型
         setDeviceType(state, deviceType) {
             state.deviceType = deviceType;
@@ -65,6 +65,11 @@
         .right{
           margin-left: 28px;
         }
+        span{
+          width: 46px;
+          height: 1.5px;
+          background-color: #B4B4B4;          
+        }
       }
       .good-desc{
         margin:40px 40px 10px 40px;
@@ -47,13 +47,13 @@
             <!-- 商品信息 -->
             <div class="goods-info">
               <div class="good-title">
-                <span class="left">————</span>商品详情<span class="right">————</span>
+                <span class="left"></span>商品详情<span class="right"></span>
               </div>
               <div class="good-desc">
                 商品详情的文字内容的书写的的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置
               </div>
               <div class="good-title">
-                <span class="left">————</span>兑换规则<span class="right">————</span>
+                <span class="left"></span>兑换规则<span class="right"></span>
               </div>
               <div class="good-desc">
                 <div class="text-left">商品详情的文字内容的书写的的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置</div>
@@ -67,7 +67,7 @@
                 </div>
               </div>
               <div class="good-title">
-                <span class="left">————</span>相似商品<span class="right">————</span>
+                <span class="left"></span>相似商品<span class="right"></span>
               </div>
                <!-- 像是商品推荐 -->
               <!-- 商品样式 7 列表 -->
@@ -57,7 +57,7 @@
             <!-- 为你推荐商品列表 -->
             <div class="list-box">
                 <!-- 商品展示样式 2 -->
-                <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)"
+                <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDetail(item)"
                     :item="item"
                     pid="4">
                 </goods-item-2>
@@ -158,17 +158,13 @@ export default {
     * @param {Object} item [数据对象]
     */
     toDetail (item) {
-
       // 判断通用跳转函数是否存在
-      if (typeof this.$parent.gotoDetail === 'function') {
-
-
-        console.log('toDetail', item);
-
-
-        // 通用跳转
-        this.$parent.gotoDetail(item);
-      }
+      this.$router.push({
+        path: '/goodDetails',
+        query: {
+          goodsId: item.id,
+        }
+      })
     },
     /**
      * 分享