Browse Source

修正微信跳转

shenjj 7 years ago
parent
commit
7dd3fea6b4
3 changed files with 279 additions and 216 deletions
  1. 8 8
      components/mobile/Home.vue
  2. 269 206
      pages/mobile/product/_batchCode.vue
  3. 2 2
      pages/mobile/wechat/index.vue

+ 8 - 8
components/mobile/Home.vue

@@ -209,14 +209,14 @@
         let info = localStorage.getItem('USOFTMALLWECHATINFO')
         // 如果本地有缓存 则证明存在openid
         if (ua.match(/micromessenger/i) && ua.match(/micromessenger/i)[0] === 'micromessenger' && !this.$route.query.code && !info) {
-          window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb3274b676737a319&redirect_uri=https://www.usoftmall.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
-          // window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd29bbca61728b189&redirect_uri=http://gwzcfb.natappfree.cc&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
-        } else if (ua.match(/micromessenger/i) && ua.match(/micromessenger/i)[0] === 'micromessenger') {
-          if (info) {
-            this.$store.commit('option/REQUEST_WECHATINFO_STATUS_SUCCESS', JSON.parse(info))
-          } else {
-            this.$store.dispatch('GerWechatInfo', {code: this.$route.query.code})
-          }
+            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb3274b676737a319&redirect_uri=https://www.usoftmall.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
+            // window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd29bbca61728b189&redirect_uri=http://gwzcfb.natappfree.cc&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
+          } else if (ua.match(/micromessenger/i) && ua.match(/micromessenger/i)[0] === 'micromessenger') {
+            if (info) {
+              this.$store.commit('option/REQUEST_WECHATINFO_STATUS_SUCCESS', JSON.parse(info))
+            } else {
+              this.$store.dispatch('GerWechatInfo', {code: this.$route.query.code})
+            }
         }
       })
     }

+ 269 - 206
pages/mobile/product/_batchCode.vue

@@ -1,41 +1,81 @@
 <template>
   <div class="mobile-content commodity-detail">
     <div class="logo-wrap">
+      <div class="wrap-title"><span class="line"></span>图片信息</div>
       <img :src="commodity.img || '/images/store/common/default.png'" alt="">
     </div>
-    <div class="content-wrap">
-      <div class="content-line cl-title">
-        <span class="code text-ellipse inline-block">{{commodity.code}}</span>
-        <div class="focus-wrap inline-block" :class="{'active': isFocus}">
-          <i class="iconfont icon-shoucang" @click="collectStore"></i>
-          <span>店铺关注</span>
+    <div class="product-info">
+      <div class="wrap-title"><span class="line"></span>产品信息</div>
+      <div class="middle">
+        <div class="list">
+          <div class="fl">
+            <div class="name">品牌:</div>
+            <div class="text">{{commodity.brandNameEn}}</div>
+          </div>
         </div>
-      </div>
-      <div class="content-line cl-price1">
-        <div class="fl">
-          <p class="price-tag">价格:</p>
-          <span>数量:</span>
+        <div class="list">
+          <div class="fl">
+            <div class="name">类目(产品名称):</div>
+            <div class="text">{{commodity.kindNameCn || '-'}}</div>
+          </div>
         </div>
-        <ul>
-          <li class="text-ellipse inline-block price-level" v-for="price in priceLevel1">
-            <p><span>{{isRMB ? '¥' : '$'}}</span>
-              {{isRMB ? price.rMBPrice : price.uSDPrice}}
-            </p>
-            <span>{{price.start}}+</span>
-          </li>
-        </ul>
-        <i :class="`iconfont icon-arrow-${isMore ? 'up' : 'down'}`" @click="isMore = !isMore" v-if="priceLevel2.length"></i>
-      </div>
-      <div class="content-line cl-price2" v-if="priceLevel2.length && isMore">
-        <ul>
-          <li class="text-ellipse inline-block price-level" v-for="price in priceLevel2">
-            <p><span>$</span>159.00</p>
-            <span>1+</span>
-          </li>
-        </ul>
+        <div class="list">
+          <div class="name">规格:</div>
+          <div class="text">{{commodity.spec || '-'}}</div>
+        </div>
+        <div class="list">
+          <div class="name">包装方式:</div>
+          <div class="text">{{commodity.packaging || '无包装信息'}}</div>
+        </div>
+        <div class="list">
+          <div class="name">最小包装数:</div>
+          <div class="text">{{commodity.minPackQty}}</div>
+        </div>
+
+        <div class="list">
+          <div class="com-info">
+            <span class="name">库存</span>:<span v-text="commodity.reserve || 0"></span><em style="margin-left: 3px;">PCS</em>
+            (<span v-text="commodity.minBuyQty || 1"></span>个起订)
+            <span class="can-div-sell" v-if="commodity.breakUp">可拆卖</span>
+          </div>
+        </div>
+
+        <div class="list">
+          <div class="name">交期(天):</div>
+          <div class="text red" v-if="commodity.b2cMaxDelivery && (commodity.b2cMaxDelivery != commodity.b2cMinDelivery)" v-text="commodity.b2cMinDelivery + '-'+ commodity.b2cMaxDelivery"></div>
+          <div class="text rd" v-if="commodity.b2cMaxDelivery && (commodity.b2cMaxDelivery == commodity.b2cMinDelivery)" v-text="commodity.b2cMinDelivery"></div>
+        </div>
+
+        <!--<div class="list">-->
+          <!--<div class="name">最小起订量:</div>-->
+          <!--<div class="text" style="color: #f31919">{{commodity.minBuyQty}}</div>-->
+        <!--</div>-->
+
+        <!--<div class="list">-->
+          <!--<div class="name">生产日期:</div>-->
+          <!--<div class="text" :title="item.produceDate">{{commodity.produceDate || '-'}}</div>-->
+        <!--</div>-->
+
+        <div class="list">
+          <div class="name left">价格梯度:</div>
+          <div class="table left">
+            <ul>
+              <li class="title">
+                <div>分段数量/PCS</div>
+                <div>分段单价</div>
+              </li>
+              <li v-for="price in commodity.prices">
+                <div>{{price.start}}+</div>
+                <div v-if="commodity.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
+                <div v-else>${{price.rMBPrice}}</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+
       </div>
       <div class="content-line link cl-price2">
-        <ul>
+        <ul class="clearfix">
           <nuxt-link :to="`/mobile/shop/${storeInfo.uuid}`" tag="li" class="text-ellipse inline-block price-level">
             <i class="iconfont icon-shouye-copy"></i>
             <p>店铺</p>
@@ -51,38 +91,6 @@
         </ul>
       </div>
     </div>
-    <div class="item-wrap">
-      <p>产品信息</p>
-      <div class="com-info">
-        <span class="name">品牌</span>:<span v-text="commodity.brandNameEn"></span>
-      </div>
-      <div class="com-info">
-        <span class="name no-letter">类目(产品名称)</span>:<span v-text="commodity.kindNameCn || '无类目信息'"></span>
-      </div>
-      <div class="com-info">
-        <span class="name">规格</span>:<span v-text="commodity.spec || '无规格信息'"></span>
-      </div>
-      <div class="com-info">
-        <span class="name">包装</span>:<span v-text="commodity.packaging || '无包装信息'"></span>
-      </div>
-      <div class="com-info">
-        <span class="name">最小包装数</span>:<span v-text="commodity.minPackQty || '无最小包装数信息'"></span>
-      </div>
-      <div class="com-info">
-        <span class="name">库存</span>:<span v-text="commodity.reserve || 0"></span><em style="margin-left: 3px;">PCS</em>
-        (<span v-text="commodity.minBuyQty || 1"></span>个起订)
-        <span class="can-div-sell" v-if="commodity.breakUp">可拆卖</span>
-      </div>
-      <div class="com-info">
-        <span class="name">交期</span>:
-        <div class="delivery inline-block">
-          <span v-text="commodity.b2cMinDelivery || 0"></span>
-          <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery">-</span>
-          <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery" v-text="commodity.b2cMaxDelivery || 0"></span>
-          <span>(天)</span>
-        </div>
-      </div>
-    </div>
     <div class="params-wrap">
       <p>产品参数</p>
       <ul v-if="component.properties && component.properties.length">
@@ -140,6 +148,7 @@
     },
     computed: {
       commodity () {
+        console.log(this.$store.state.shop.storeInfo.commodity.data)
         return this.$store.state.shop.storeInfo.commodity.data
       },
       isRMB () {
@@ -215,144 +224,232 @@
 </script>
 <style lang="scss" scoped>
   .commodity-detail {
-    .logo-wrap {
-      height: 5.18rem;
-      line-height: 5.18rem;
-      background: #fff;
-      text-align: center;
-      img {
-       /* border: .01rem solid #ccc;*/
-        max-width: 4.06rem;
-        max-height: 3.27rem;
+    background: #f1f3f6;
+    .wrap-title {
+      color: #333;
+      font-size: 0.28rem;
+      border-bottom: 1px solid #d3d3d3;
+      height: 0.5rem;
+      text-align: left;
+      padding: 0 0 0.1rem 0.05rem;
+      margin: 0.17rem 0.25rem 0.13rem 0.25rem;
+      line-height: 0.5rem;
+      .line{
+        width: 0.05rem;
+        background: #3f84f6;
+        display: inline-block;
+        vertical-align: top;
+        margin-right: 0.08rem;
+        height: 0.28rem;
+        margin-top: 0.09rem;
       }
     }
-    .content-wrap {
-      -webkit-box-shadow: 0 -2px 7px 0 rgba(143, 141, 141, 0.25);
-      -moz-box-shadow: 0 -2px 7px 0 rgba(143, 141, 141, 0.25);
-      box-shadow: 0 -2px 7px 0 rgba(143, 141, 141, 0.25);
-      border-bottom: .1rem solid #f4f4f4;
-      .content-line {
-        height: 1.04rem;
-        border-bottom: .01rem solid #d9d9d9;
-        &.cl-title {
-          padding: .14rem 0 .14rem .2rem;
-          .code {
-            font-size: .3rem;
-            font-weight: bold;
-            width: 6.22rem;
-            padding-right: .3rem;
-            border-right: .01rem solid #e1e1e1;
-            line-height: .76rem;
+    .product-info {
+      background: #fff;
+      margin: 0.2rem;
+      border: 1px solid #e3e5e8;
+      padding-bottom: 0.2rem;
+      .middle {
+        padding: 0.24rem 0.24rem 0px;
+        background: #fff;
+        .pms {
+          color: #f57710;
+          border: 1px solid #f57710;
+          border-radius: 0.4rem;
+          background: #fff;
+          font-size: 0.24rem;
+          height: 0.4rem;
+          line-height: 0.4rem;
+          width: 0.8rem;
+          text-align: center;
+        }
+        .list {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          .left {
+            float: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .textinfo {
+            color: #0067e7;
+            font-size: 0.3rem;
           }
-          .focus-wrap {
-            width: .9rem;
+          .button {
+            font-size: 0.28rem;
+            color: #1a58dd;
+            width: 0.92rem;
             text-align: center;
-            margin-left: .15rem;
-            i {
-              font-size: .4rem;
-              display: block;
-              color: #dddddd;
-            }
-            span {
-              font-size: .2rem;
-            }
-            &.active {
-              i {
-                color: #ff7803;
-              }
-            }
+            border-radius: 5px;
+            border:1px solid #1a58dd;
+            display: inline-block;
+            margin-right: 0.2rem;
           }
-        }
-        .price-level {
-          text-align: center;
-          font-size: .24rem;
-          border-right: .01rem solid #b0b0b0;
-          &:last-child {
-            border-right: none;
+          margin-bottom: 0.18rem;
+          &::after{
+            clear: both;
+            display: block;
+            content: ' ';
+            visibility: hidden;
+            zoom: 1;
           }
-          p {
-            font-size: .38rem;
-            color: #f42d29;
+          .fl {
+            width: 3.8rem;
+            float: left;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            max-width: 1.88rem;
-            margin: 0 auto;
-            span {
-              font-size: .22rem;
-            }
           }
-        }
-        &.cl-price1 {
-          padding: .1rem .18rem 0;
-          .fl {
-            font-size: .24rem;
-            text-align: center;
-            margin-top: .08rem;
-            .price-tag {
-              width: .69rem;
-              height: .34rem;
-              line-height: .34rem;
-              text-align: center;
-              background: #f42d29;
-              border-radius: .1rem;
-              color: #fff;
-              margin: .02rem 0 .06rem;
-            }
+          .fr {
+            text-align: left;
+            width: 2rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
-          ul {
-            display: inline-block;
-            li {
-              width: 1.96rem;
+          &.list-long {
+            .fl {
+              width: 100% !important;
             }
           }
-          i {
-            font-size: .32rem;
+          .name {
+            color: #666;
+            font-size: 0.3rem;
+            display: inline-block;
           }
-        }
-        &.cl-price2 {
-          padding-top: .1rem;
-          ul {
-            text-align: center;
-            li {
-              width: 2.83rem;
+          .text {
+            display: inline-block;
+            color: #333;
+            font-size: 0.3rem;
+            &.red {
+              color: #e6353d;
             }
           }
-        }
-        &.link {
-          padding-top: .18rem;
-          ul {
+          .table {
+            width: 4.8rem;
+            margin-bottom: 0;
+            margin-top: 0;
             li {
-              width: 33%;
-              &.active {
-                i {
-                  color: #d81e06;
-                }
+              height: 0.43rem;
+              line-height: 0.43rem;
+              border-left: .01rem solid #c5c5c5;
+              font-size: .28rem;
+              &::after {
+                clear: both;
+                display: block;
+                content: ' ';
+                visibility: hidden;
+                zoom: 1;
               }
-            }
-            i {
-              font-size: .39rem;
-              &.icon-kefu1 {
-                font-size: .44rem;
-                position: relative;
-                top: -.05rem;
-                color: #ff6000;
-                & + p {
-                  margin-top: -.07rem;
-                }
+              div {
+                text-align: center;
+                width: 50%;
+                float: left;
+                border-right: .01rem solid #c5c5c5;
+                border-bottom: .01rem solid #c5c5c5;
               }
-              &.icon-shouye-copy {
-                color: #3f84f6;
+              &:nth-child(odd) {
+                background: #ddd;
+                color: #666;
+                font-size: 0.28rem;
               }
+              &:nth-child(even) {
+                background: #fcfcfc;
+                color: #666;
+                font-size: 0.28rem;
+              }
+              &:nth-last-of-type(1){
+                color: #f31919;
+              }
+              &.title {
+                font-size: 0.28rem;
+                color: #333;
+              }
+            }
+          }
+        }
+      }
+      .com-info {
+        line-height: .5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        .name {
+          color: #666;
+        }
+        .can-div-sell {
+          font-size: 0.18rem;
+          margin-left: 0.1rem;
+          display: inline-block;
+          height: .3rem;
+          line-height: .3rem;
+          width: .7rem;
+          text-align: center;
+          background: #3f84f6;
+          color: #fff;
+          font-weight: bold;
+          border-radius: 3px;
+        }
+      }
+      .content-line {
+        ul {
+          li {
+            width: 2rem;
+            height:0.54rem;
+            line-height: 0.54rem;
+            float: left;
+            margin-right: 0.25rem;
+            font-size: 0.28rem;
+            color: #fff;
+            border-radius: 0.08rem;
+            i {
+              display: inline-block;
+              margin-right: 0.1rem;
+              margin-left: 0.1rem;
+            }
+            &:nth-last-of-type(1) {
+              margin-right: 0;
+              background: #fff;
+              color: #3f84f6;
+              border: 1px solid #3f84f6;
+            }
+            &:nth-child(1) {
+              background: #3f84f6;
+              border: 1px solid #3f84f6;
+              margin-left: 0.2rem;
+            }
+            &:nth-child(2) {
+              background: #ff6000;
+              border: 1px solid #ff6000;
             }
             p {
-              font-size: .2rem;
-              color: #333;
+              display: inline-block;
+              text-align: center;
+              line-height: 0.5rem;
+              vertical-align: top;
+              &:nth-of-type(1) {
+                margin-left: 0.25rem;
+              }
             }
           }
         }
       }
     }
+    .logo-wrap {
+      height: 5.18rem;
+      background: #fff;
+      text-align: center;
+      margin: 0.2rem;
+      border: 1px solid #e3e5e8;
+      img {
+       /* border: .01rem solid #ccc;*/
+        max-width: 4.06rem;
+        max-height: 3.27rem;
+        margin-top: 0.4rem;
+      }
+    }
     .params-wrap {
       background: #fff;
       padding: .29rem .23rem;
@@ -385,40 +482,6 @@
         }
       }
     }
-    .item-wrap {
-      padding: .3rem 0;
-      border-bottom: .1rem solid #f4f4f4;
-      p {
-        font-size: .26rem;
-        text-align: center;
-        margin-bottom: .24rem;
-        font-weight: bold;
-      }
-      .com-info {
-        padding-left: .5rem;
-        padding-right: .2rem;
-        line-height: .5rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        .name {
-          color: #666;
-        }
-        .can-div-sell {
-          font-size: 0.18rem;
-          margin-left: 0.1rem;
-          display: inline-block;
-          height: .3rem;
-          line-height: .3rem;
-          width: .7rem;
-          text-align: center;
-          background: #3f84f6;
-          color: #fff;
-          font-weight: bold;
-          border-radius: 3px;
-        }
-      }
-    }
   }
   .com-none-state {
     padding: .2rem 0;

+ 2 - 2
pages/mobile/wechat/index.vue

@@ -16,7 +16,7 @@
         <li class="telphone">
           <input placeholder="请输入手机号" type="tel" maxlength="11" @blur="telphoneBlur" v-model="telphoneNum"/>
         </li>
-        <li class="info">
+        <li class="wechat-view-info">
           <div v-show="telerror">
             请输入正确的手机号码
           </div>
@@ -236,7 +236,7 @@
     ul li {
       padding-bottom: 0.1rem;
       min-height: 0.4rem;
-      &.info {
+      &.wechat-view-info {
         color: #3872f4;
         font-size: 0.24rem;
         margin-left: 0.64rem;