Home Explore Help
Register Sign In
usoft
/
mall-web-ssr
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge remote-tracking branch 'origin/feature/yc-mobile-1020' into feature/wangcz-mobile-1020

# Conflicts:
#	components/mobile/search/brandList.vue
#	components/mobile/search/detailBrand.vue
wangcz 8 years ago
parent
216359242c b1d631dfd0
commit
7995868804
9 changed files with 104 additions and 35 deletions
Unified View Show Diff Stats
  1. 2 1
      app.html
  2. 3 1
      assets/scss/mobileCommon.scss
  3. 1 1
      components/default/Header.vue
  4. 66 16
      components/mobile/MobileHeader.vue
  5. 12 6
      components/mobile/brand/BrandDetail.vue
  6. 19 10
      components/mobile/brand/ComponentDetail.vue
  7. 0 0
      components/mobile/search/brandList.vue
  8. 0 0
      components/mobile/search/detailBrand.vue
  9. 1 0
      package.json

+ 2 - 1
app.html
View File 

@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css"/>
 
-  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_2v610xi22j0xusor.css">
 
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_mca1wkdhzrzoajor.css">
 
   {{ HEAD }}
 
   {{ HEAD }}
 
   <script>
 
   <script>
 
     (function (w, d) {
 
     (function (w, d) {
 
@@ -51,4 +51,5 @@
 
 <body {{ BODY_ATTRS }}>
 
 <body {{ BODY_ATTRS }}>
 
 {{ APP }}
 
 {{ APP }}
 
 </body>
 
 </body>
 
+<!--<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>-->
 
 </html>
 
 </html>

+ 3 - 1
assets/scss/mobileCommon.scss
View File 

@@ -64,9 +64,11 @@
 
         width: 1.5rem;
 
         width: 1.5rem;
 
         height: 1.52rem;
 
         height: 1.52rem;
 
         padding-top: .3rem;
 
         padding-top: .3rem;
 
-        img {
 
+        i {
 
           margin: 0 auto;
 
           margin: 0 auto;
 
           display: block;
 
           display: block;
 
+          font-size: .55rem;
 
+          width: .54rem;
 
         }
 
         }
 
         span {
 
         span {
 
           display: block;
 
           display: block;

+ 1 - 1
components/default/Header.vue
View File 

@@ -104,7 +104,7 @@
 
         this.toggleEnterprises()
 
         this.toggleEnterprises()
 
         this.$http.get(`/user/authentication/${en.uu}`).then(() => {
 
         this.$http.get(`/user/authentication/${en.uu}`).then(() => {
 
           this.$store.dispatch('loadUserInfo')
 
           this.$store.dispatch('loadUserInfo')
 
-//          window.location.reload()
 
+          window.location.reload()
 
         })
 
         })
 
       }
 
       }
 
     },
 
     },

+ 66 - 16
components/mobile/MobileHeader.vue
View File 

@@ -6,43 +6,47 @@
 
         <div class="mobile-modal-content" v-if="showDefaultAddr">
 
         <div class="mobile-modal-content" v-if="showDefaultAddr">
 
           <div>商家地址：深圳市南山区英唐大厦6楼</div>
 
           <div>商家地址：深圳市南山区英唐大厦6楼</div>
 
           <div class="content-line link-url">在线咨询</div>
 
           <div class="content-line link-url">在线咨询</div>
 
-          <div>致电：<span class="content-line link-url">0755-96586323</span></div>
 
+          <div>致电：<a href="tel:0755-96586323" class="content-line link-url">0755-96586323</a></div>
 
+          <div>邮件：<a href="mailto:yrsc@usoftchina.com" class="content-line link-url">yrsc@usoftchina.com</a></div>
 
         </div>
 
         </div>
 
         <div class="mobile-modal-content" v-if="!showDefaultAddr">
 
         <div class="mobile-modal-content" v-if="!showDefaultAddr">
 
         <div>商家地址：{{store.enterprise.enAddress || store.enterprise.address}}</div>
 
         <div>商家地址：{{store.enterprise.enAddress || store.enterprise.address}}</div>
 
         <div class="content-line link-url">在线咨询</div>
 
         <div class="content-line link-url">在线咨询</div>
 
-        <div>致电：<span class="content-line link-url">{{store.enterprise.enTel}}</span></div>
 
+        <div>致电：<a :href="'tel:'+store.enterprise.enTel" class="content-line link-url">{{store.enterprise.enTel}}</a></div>
 
+          <div>邮件：<a :href="'mailto:'+store.enterprise.enEmail" class="content-line link-url">{{store.enterprise.enEmail}}</a></div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
       <div class="mobile-share-box" v-if="showShare">
 
       <div class="mobile-share-box" v-if="showShare">
 
         <div class="share-area">
 
         <div class="share-area">
 
           <ul>
 
           <ul>
 
             <li class="share-item" @click="shareWeChat">
 
             <li class="share-item" @click="shareWeChat">
 
-              <img src="/images/mobile/@2x/share/weChat@2x.png" alt="">
 
+             <i class="icon-weixin iconfont" style="color: #07af12;"></i>
 
               <span>微信</span>
 
               <span>微信</span>
 
             </li>
 
             </li>
 
-            <li class="share-item">
 
-              <img src="/images/mobile/@2x/share/QQ@2x.png" alt="">
 
+            <li class="share-item" @click="shareQQ">
 
+              <i class="icon-qq1 iconfont" style="color: #5872f4;"></i>
 
               <span>QQ</span>
 
               <span>QQ</span>
 
             </li>
 
             </li>
 
             <li class="share-item" @click="shareWeibo">
 
             <li class="share-item" @click="shareWeibo">
 
-              <img src="/images/mobile/@2x/share/sina@2x.png" alt="">
 
+              <i class="icon-ff0000 iconfont" style="color: #ff0000;"></i>
 
               <span>微博</span>
 
               <span>微博</span>
 
             </li>
 
             </li>
 
-            <li class="share-item">
 
-              <img src="/images/mobile/@2x/share/message@2x.png" alt="">
 
+            <li class="share-item" @click="shareMessage">
 
+              <i class="icon-msnui-msg-invert iconfont" style="color: #25cdb7"></i>
 
               <span>短信</span>
 
               <span>短信</span>
 
+              <a href="sms:" class="hide" id="share-sms"></a>
 
             </li>
 
             </li>
 
-            <li class="share-item">
 
-              <img src="/images/mobile/@2x/share/email@2x.png" alt="">
 
+            <li class="share-item" @click="shareEmail">
 
+              <i class="icon-youjian iconfont" style="height: .57rem;font-size: .41rem;color:#f18215;"></i>
 
               <span>邮件</span>
 
               <span>邮件</span>
 
+              <a href="mailto:" class="hide" id="share-mail"></a>
 
             </li>
 
             </li>
 
-            <li class="share-item">
 
-              <img src="/images/mobile/@2x/share/flash@2x.png" alt="">
 
+            <li class="share-item" @click="flash">
 
+              <i class="icon-shuaxin iconfont" style="color: #2584cd;"></i>
 
               <span>刷新</span>
 
               <span>刷新</span>
 
             </li>
 
             </li>
 
-            <li class="share-item">
 
-              <img src="/images/mobile/@2x/share/copylink@2x.png" alt="">
 
+            <li class="share-item" @click="copyLink" id="copyLink"  :data-clipboard-text="url">
 
+              <i class="icon-lianjie iconfont" style="color: #73b0df;"></i>
 
               <span>复制链接</span>
 
               <span>复制链接</span>
 
             </li>
 
             </li>
 
           </ul>
 
           </ul>
 
@@ -59,13 +63,16 @@
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 <script>
 
 <script>
 
+  import Clipboard from 'clipboard'
 
   export default {
 
   export default {
 
     data () {
 
     data () {
 
       return {
 
       return {
 
         showStoreInfo: false,
 
         showStoreInfo: false,
 
         showShare: false,
 
         showShare: false,
 
         rightIcon: 'share',
 
         rightIcon: 'share',
 
-        showDefaultAddr: true
 
+        showDefaultAddr: true,
 
+        url: '',
 
+        clipboard: {}
 
       }
 
       }
 
     },
 
     },
 
     computed: {
 
     computed: {
 
@@ -82,6 +89,19 @@
 
         return this.$store.state.componentDetail.detail.data
 
         return this.$store.state.componentDetail.detail.data
 
       }
 
       }
 
     },
 
     },
 
+    mounted () {
 
+      let _this = this
 
+      _this.url = window.location.href
 
+      _this.clipboard = new Clipboard('#copyLink')
 
+      _this.clipboard.on('success', e => {
 
+        _this.clipboard.destroy()
 
+        _this.showShare = false
 
+      })
 
+      _this.clipboard.on('error', e => {
 
+        alert('浏览器不支持自动复制，请手动复制')
 
+        _this.clipboard.destroy()
 
+      })
 
+    },
 
     methods: {
 
     methods: {
 
       goLastPage: function () {
 
       goLastPage: function () {
 
         window.history.back(-1)
 
         window.history.back(-1)
 
@@ -137,7 +157,34 @@
 
         _shareUrl += '&sourceUrl=' + encodeURIComponent('')
 
         _shareUrl += '&sourceUrl=' + encodeURIComponent('')
 
         _shareUrl += '&content=' + 'utf-8'   // 参数content设置页面编码gb2312|utf-8，可选参数
 
         _shareUrl += '&content=' + 'utf-8'   // 参数content设置页面编码gb2312|utf-8，可选参数
 
         _shareUrl += '&pic=' + encodeURIComponent('')  // 参数pic设置图片链接|默认为空，可选参数
 
         _shareUrl += '&pic=' + encodeURIComponent('')  // 参数pic设置图片链接|默认为空，可选参数
 
-        window.open(_shareUrl, '_blank', 'width=' + 300 + ',height=' + 300 + ',top=' + 300 + ',left=' + 300 + ',toolbar=no,menubar=no,scrollbars=no, resizable=1,location=no,status=0')
 
+        window.open(_shareUrl)
 
+        this.showShare = false
 
+      },
 
+      shareWeChat: function () {
 
+      },
 
+      shareQQ: function () {
 
+        let url = encodeURIComponent(document.location)
 
+        let title = encodeURIComponent(document.title)
 
+        let source = encodeURIComponent('')
 
+        let desc = '优软商城'
 
+        let pics = 'http://dfs.ubtob.com/group1/M00/4F/C3/CgpkyFnxWjOAMy5DAAlh1PrLlc8684.png'
 
+        window.open('http://connect.qq.com/widget/shareqq/index.html?url=' +
 
+          url + '&title=' + title + '&source=' + source + '&desc=' + desc + '&pics=' + pics)
 
+        this.showShare = false
 
+      },
 
+      shareMessage: function () {
 
+        document.getElementById('share-sms').click()
 
+      },
 
+      shareEmail: function () {
 
+        document.getElementById('share-mail').click()
 
+      },
 
+      flash: function () {
 
+        window.location.reload()
 
+      },
 
+      copyLink: function () {
 
+        let _this = this
 
+        _this.url = window.location.href
 
+        _this.clipboard = new Clipboard('#copyLink')
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }
 
@@ -171,4 +218,7 @@
 
   .mobile-header i{
 
   .mobile-header i{
 
     font-size:.4rem;
 
     font-size:.4rem;
 
   }
 
   }
 
+  .hide {
 
+    display: none;
 
+  }
 
 </style>
 
 </style>

+ 12 - 6
components/mobile/brand/BrandDetail.vue
View File 

@@ -50,7 +50,7 @@
 
       <ul class="product-list">
 
       <ul class="product-list">
 
         <li v-for="product in productList.content">
 
         <li v-for="product in productList.content">
 
           <nuxt-link class="text-left" :to="'/mobile/brand/componentDetail/' + product.uuid">{{product.code}}</nuxt-link>
 
           <nuxt-link class="text-left" :to="'/mobile/brand/componentDetail/' + product.uuid">{{product.code}}</nuxt-link>
 
-          <a class="text-right">规格书 <img src="/images/mobile/@2x/productDetail/view@2x.png" alt=""></a>
 
+          <a class="text-right" @click="toShowPdf(product.attach)">规格书 <i class="icon-chakan iconfont"></i></a>
 
         </li>
 
         </li>
 
       </ul>
 
       </ul>
 
     </div>
 
     </div>
 
@@ -200,6 +200,11 @@
 
         if (!this.isInList) {
 
         if (!this.isInList) {
 
           this.showKindList = false
 
           this.showKindList = false
 
         }
 
         }
 
+      },
 
+      toShowPdf: function (url) {
 
+        if (url !== '1') {
 
+          window.location.href = url
 
+        }
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }
 
@@ -216,7 +221,7 @@
 
       display: inline-block;
 
       display: inline-block;
 
       border: .01rem solid #e75610;
 
       border: .01rem solid #e75610;
 
       margin: .38rem auto;
 
       margin: .38rem auto;
 
-      line-height: 2.21rem;
 
+      line-height: 2.13rem;
 
       img {
 
       img {
 
         max-height: 2.13rem;
 
         max-height: 2.13rem;
 
       }
 
       }
 
@@ -355,11 +360,12 @@
 
           .text-right {
 
           .text-right {
 
             float: right;
 
             float: right;
 
             color: #333;
 
             color: #333;
 
-            img {
 
-              margin-left: .54rem;
 
-              width: .39rem;
 
-              height: .26rem;
 
+            i {
 
+              font-size: .55rem;
 
+              float: right;
 
               margin-right: .27rem;
 
               margin-right: .27rem;
 
+              margin-left: .54rem;
 
+              color: #6fcafe;
 
             }
 
             }
 
           }
 
           }
 
         }
 
         }

+ 19 - 10
components/mobile/brand/ComponentDetail.vue
View File 

@@ -9,9 +9,9 @@
 
         <span>品牌：</span>
 
         <span>品牌：</span>
 
         <span>{{component.brand.nameCn}}</span>
 
         <span>{{component.brand.nameCn}}</span>
 
       </div>
 
       </div>
 
-      <div class="base-detail-item">
 
+      <div class="base-detail-item attach" @click="goAttach(component.attach)">
 
         <span>规格书：</span>
 
         <span>规格书：</span>
 
-        <img src="/images/mobile/@2x/productDetail/view@2x.png" alt="">
 
+        <i class="icon-chakan iconfont"></i>
 
       </div>
 
       </div>
 
       <div class="base-detail-item" v-if="component.description">
 
       <div class="base-detail-item" v-if="component.description">
 
         <span class="description">产品描述：{{component.description}}</span>
 
         <span class="description">产品描述：{{component.description}}</span>
 
@@ -108,10 +108,6 @@
 
       component () {
 
       component () {
 
         return this.$store.state.componentDetail.detail.data
 
         return this.$store.state.componentDetail.detail.data
 
       },
 
       },
 
-//      stores () {
 
-//        console.log(this.$store.state.componentStore.store.data)
 
-//        return this.$store.state.componentStore.store.data
 
-//      },
 
       storeList () {
 
       storeList () {
 
         let storeList = this.$store.state.componentInformation.information.data
 
         let storeList = this.$store.state.componentInformation.information.data
 
         let _self = this
 
         let _self = this
 
@@ -159,6 +155,13 @@
 
         }
 
         }
 
         return num
 
         return num
 
       }
 
       }
 
+    },
 
+    methods: {
 
+      goAttach: function (url) {
 
+        if (url !== '1') {
 
+          window.location.href = url
 
+        }
 
+      }
 
     }
 
     }
 
   }
 
   }
 
 </script>
 
 </script>
 
@@ -172,9 +175,15 @@
 
       padding-top: .34rem;
 
       padding-top: .34rem;
 
       .base-detail-item {
 
       .base-detail-item {
 
         margin-bottom: .3rem;
 
         margin-bottom: .3rem;
 
-        img {
 
-          width: .39rem;
 
-          height: .26rem;
 
+        position: relative;
 
+        &.attach {
 
+          display: inline-block;
 
+        }
 
+        i {
 
+          font-size: .55rem;
 
+          color: #6fcafe;
 
+          position: absolute;
 
+          top: -.13rem;
 
         }
 
         }
 
         &:last-child {
 
         &:last-child {
 
           margin-bottom: 0;
 
           margin-bottom: 0;
 
@@ -283,7 +292,7 @@
 
       .param-item {
 
       .param-item {
 
         padding: .19rem .4rem;
 
         padding: .19rem .4rem;
 
         &:nth-child(even) {
 
         &:nth-child(even) {
 
-          background: #eee;
 
+          background: #efeeee;
 
         }
 
         }
 
         .prop-name {
 
         .prop-name {
 
           width: 3.72rem;
 
           width: 3.72rem;

+ 0 - 0
components/mobile/search/brandList.vue
View File


+ 0 - 0
components/mobile/search/detailBrand.vue
View File


+ 1 - 0
package.json
View File 

@@ -8,6 +8,7 @@
 
     "axios": "^0.15.3",
 
     "axios": "^0.15.3",
 
     "bezier-easing": "^2.0.3",
 
     "bezier-easing": "^2.0.3",
 
     "bootstrap": "^3.3.7",
 
     "bootstrap": "^3.3.7",
 
+    "clipboard": "^1.7.1",
 
     "cookiejar": "^2.1.1",
 
     "cookiejar": "^2.1.1",
 
     "cross-env": "^3.1.4",
 
     "cross-env": "^3.1.4",
 
     "element-ui": "^1.3.7",
 
     "element-ui": "^1.3.7",