【新增】支付弹窗和修复bug

src/components/LablesMember.vue

@@ -8,65 +8,128 @@
           <img src="../assets/images/avatar.png" />
           <div class="top-right">
             <div class="top-user">
-              <h2>用户：嫣然</h2>
+              <h2>用户：{{ $store.state.userInfo.name }}</h2>
-              <span>正式版</span>
+              <span></span>
             </div>
-            <p>开通SVIP，享黑胶VIP、数字专辑、有声书等特权</p>
+            <p>会员中心</p>
           </div>
         </div>
         <div class="middle">
-          <div class="left">
+          <div class="middle-top">
             <div class="tab">
-              <div @click="tabIndex = 0" :class="[tabIndex === 0 ? 'active' : '']">
+              <div @click="tabIndex = 0, currIndex = 0, getPriceList(1)" :class="[tabIndex === 0 ? 'active' : '']">
                 <span>金币充值</span>
               </div>
-              <div @click="tabIndex = 1" :class="[tabIndex === 1 ? 'active' : '']">
+              <div @click="tabIndex = 1, currIndex = 0" :class="[tabIndex === 1 ? 'active' : '']">
                 <span>基础功能</span>
               </div>
-              <div @click="tabIndex = 2" :class="[tabIndex === 2 ? 'active' : '']">
+              <div @click="tabIndex = 2, currIndex = 0, getPriceList(2)" :class="[tabIndex === 2 ? 'active' : '']">
                 <span>高级功能</span>
               </div>
             </div>
-            <div class="tab-content"
+            <div class="tab-content" v-if="tabIndex === 1">
-              :class="[tabIndex === index ? 'active' : '']"
+              <div class="title">金币充值</div>
-              v-for="(item, index) in 3"
+              <div class="tab-content__item--wrapper">
-              :key="index">
+                <el-form :model="form" label-position="top" ref="form" label-width="100px" class="form" style="width: 100%;">
-              <div
+                  <el-form-item
-                class="tab-content__item"
+                    prop="mallName"
-                :class="[currIndex === i ? 'active' : '']"
+                    label="当前绑定店铺"
-                v-for="(price, i) in priceList"
+                    style="width: 100%;"
-                :key="i"
+                    :rules="[{ required: true, message: '请先登录拼多多跨境卖家中心', trigger: 'blur' }]">
-                @click="currIndex = i, getQrcode(price)">
+                    <el-input readonly placeholder="请先登录拼多多跨境卖家中心" v-model="form.mallName"></el-input>
-                <h3>{{ price.remark }}</h3>
+                  </el-form-item>
-                <div class="price">
+                  <el-form-item
-                  <i>¥</i>
+                    prop="mallId"
-                  <span>{{ price.price }}</span>
+                    v-show="false"
+                    style="width: 100%;"
+                    :rules="[{ message: '请输入店铺ID', trigger: 'blur' }]">
+                    <el-input placeholder="请输入店铺ID" v-model="form.mallId"></el-input>
+                  </el-form-item>
+                  <el-form-item
+                    prop="code"
+                    label="激活码"
+                    :rules="[{ required: true, message: '请输入激活码', trigger: 'blur' }]">
+                    <el-input placeholder="请输入激活码" v-model="form.code"></el-input>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </div>
+            <div class="tab-content" v-if="tabIndex === 0">
+              <div class="title">基础功能</div>
+              <div class="tab-content__item--wrapper">
+                <div
+                  class="tab-content__item"
+                  :class="[currIndex === i ? 'active' : '']"
+                  v-for="(price, i) in priceList"
+                  :key="i"
+                  @click="currIndex = i, getQrcode(price)">
+                  <h3>{{ price.remark }}</h3>
+                  <div class="price">
+                    <i>¥</i>
+                    <span>{{ price.price }}</span>
+                  </div>
+                  <div class="original-price">
+                    <i>¥</i>
+                    <span>{{ price.originPrice }}</span>
+                  </div>
+                  <p>{{ price.coin }}金币</p>
                 </div>
-                <div class="original-price">
+              </div>
-                  <i>¥</i>
+            </div>
-                  <span>{{ price.originPrice }}</span>
+            <div class="tab-content" v-if="tabIndex === 2">
+              <div class="title">标签合成</div>
+              <div class="tab-content__item--wrapper">
+                <div
+                  class="tab-content__item"
+                  :class="[currIndex === i ? 'active' : '']"
+                  v-for="(price, i) in priceList"
+                  :key="i"
+                  @click="currIndex = i, getQrcode(price)">
+                  <h3>{{ price.remark }}</h3>
+                  <div class="price">
+                    <i>¥</i>
+                    <span>{{ price.price }}</span>
+                  </div>
+                  <div class="original-price">
+                    <i>¥</i>
+                    <span>{{ price.originPrice }}</span>
+                  </div>
+                  <p>{{ price.coin }}条/每年</p>
                 </div>
               </div>
             </div>
           </div>
-          <div class="right">
+          <div class="title" v-if="tabIndex !== 1">支付方式</div>
-            <div class="right-price">
+          <div class="bottom" v-if="tabIndex !== 1">
-              <i>¥</i>
+            <div class="bottom-left">
-              <span class="price">88</span>
+              <div class="code">
+                <vue-qr v-if="qrcode" :text="qrcode" :size="110" :margin="0" :logoSrc="wechatLogo"/>
+              </div>
+              <div class="paytype">
+                <svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12.11 0H.89A.89.89 0 0 0 0 .89v11.22c0 .491.399.89.89.89h11.22a.89.89 0 0 0 .89-.89V.89a.89.89 0 0 0-.89-.89zM6.5 10.65a5.592 5.592 0 0 1-1.848-.311c-.364.241-.975.639-1.215.75-.352.162-.25-.188-.25-.188L3.395 9.7C2.24 8.895 1.499 7.654 1.499 6.26c0-2.426 2.239-4.392 5-4.392 1.693 0 3.188.74 4.093 1.869l-4.905 2.27s-.4.152-.75-.062c-.35-.213-.813-.564-.813-.564s-.538-.458-.25.376l.751 1.756s.089.524.687.189c.468-.262 4.103-2.454 5.666-3.397a3.94 3.94 0 0 1 .523 1.954c0 2.425-2.239 4.391-5.001 4.391z" fill="#09BB07" fill-rule="nonzero"></path>
+                </svg>
+                <span>微信支付</span>
+              </div>
             </div>
-            <div class="code">
+            <div class="bottom-right">
-              <!-- <img src="../assets/code.png" /> -->
+              <div class="right-price">
-              <vue-qr v-if="qrcode" :text="qrcode" :size="120" :margin="8" :logoSrc="wechatLogo"/>
+                <i>¥</i>
+                <span class="price">{{ currGoods.price || '' }}</span>
+              </div>
+              <div class="pay-btn">
+                <el-button round size="mini" style="margin-right: 10px;" @click="isShow = false">取消支付</el-button>
+                <el-button round size="mini" type="warning" @click="$store.dispatch('getUserInfo'), isShow = false">我已支付</el-button>
+              </div>
             </div>
-            <div class="paytype">
+          </div>
-              <svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
+          <div class="bottom" v-else>
-                <path d="M12.11 0H.89A.89.89 0 0 0 0 .89v11.22c0 .491.399.89.89.89h11.22a.89.89 0 0 0 .89-.89V.89a.89.89 0 0 0-.89-.89zM6.5 10.65a5.592 5.592 0 0 1-1.848-.311c-.364.241-.975.639-1.215.75-.352.162-.25-.188-.25-.188L3.395 9.7C2.24 8.895 1.499 7.654 1.499 6.26c0-2.426 2.239-4.392 5-4.392 1.693 0 3.188.74 4.093 1.869l-4.905 2.27s-.4.152-.75-.062c-.35-.213-.813-.564-.813-.564s-.538-.458-.25.376l.751 1.756s.089.524.687.189c.468-.262 4.103-2.454 5.666-3.397a3.94 3.94 0 0 1 .523 1.954c0 2.425-2.239 4.391-5.001 4.391z" fill="#09BB07" fill-rule="nonzero"></path>
+            <div class="bottom-left">
-              </svg>
-              <span>微信支付</span>
             </div>
-            <div class="pay-btn">
+            <div class="bottom-right">
-              <el-button round size="mini" style="margin-right: 10px;" @click="isShow = false">取消支付</el-button>
+              <div class="pay-btn">
-              <el-button round size="mini" type="warning">我已支付</el-button>
+                <el-button round size="mini" type="warning" @click="onConfirm">确定</el-button>
+              </div>
             </div>
           </div>
         </div>
@@ -76,9 +139,19 @@
 </template>
 
 <script>
+  import VueQr from 'vue-qr'
   export default {
+    components: {
+      VueQr
+    },
+
     data() {
       return {
+        form: {
+          mallId: this.$store.state.mallId,
+          mallName: this.$store.state.mallName,
+          code: ''
+        },
         isShow: false,
         tabIndex: 0,
         currIndex: 0,
@@ -87,15 +160,30 @@
       }
     },
 
+    computed: {
+      wechatLogo: () => require(`../assets/wechat_logo.png`),
+
+      currGoods () {
+        if (!this.priceList.length || this.tabIndex === 1) {
+          return {}
+        }
+
+        return this.priceList[this.currIndex]
+      }
+    },
+
     mounted() {
-      this.getPriceList()
+      this.getPriceList(1)
     },
 
     methods: {
-      getPriceList() {
+      getPriceList(type) {
-        this.$http.post(`/api/priceConfig/page?module=2`).then(res => {
+        this.$http.post(`/api/priceConfig/page?module=${type}`).then(res => {
           if (res.code === 0) {
             this.priceList = res.data.records
+            if (res.data.records.length) {
+              this.getQrcode(res.data.records[0])
+            }
           }
         })
       },
@@ -121,6 +209,39 @@
 
       hide () {
         this.isShow = false
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.$http.post(`/api/coupon/getDetail`, null, {
+              params: {
+                code: this.form.code
+              }
+            }).then(res => {
+              if (res.code == 0) {
+                let msg = this.getMessage(res.data.type);
+                this.$confirm(msg, '温馨提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'info'
+                }).then(() => {
+                  this.$http.post(`/api/order/upgradeByCode`, null, {
+                    params: {
+                      ...this.form
+                    }
+                  }).then(res => {
+                    if (res.code == 0) {
+                      this.$message.success('激活成功')
+                      this.$store.dispatch('getUserInfo')
+                      this.isShow = false
+                    }
+                  })
+                })
+              }
+            })
+          }
+        })
       }
     }
   }
@@ -135,6 +256,15 @@
     width: 100%;
     height: 100%;
 
+    .title {
+      margin: 20px 0 10px 40px;
+      font-size: 16px;
+      text-align: left;
+      font-weight: 600;
+      color: #2a2b2e;
+      font-weight: normal;
+    }
+
     .mask {
       position: absolute;
       left: 0;
@@ -150,9 +280,9 @@
       top: 50%;
       left: 50%;
       z-index: 11;
-      width: 1100px;
+      min-width: 840px;
-      height: 560px;
+      // height: 620px;
-      padding: 40px 60px;
+      padding: 40px 40px;
       transform: translate(-50%, -50%);
       border-radius: 12px;
       overflow: hidden;
@@ -161,7 +291,7 @@
       .top {
         display: flex;
         align-items: center;
-        margin-bottom: 60px;
+        margin-bottom: 20px;
 
         img {
           width: 40px;
@@ -169,7 +299,6 @@
           margin-right: 10px;
         }
 
-
         p {
           color: #632e2e;
           opacity: 0.8;
@@ -210,22 +339,20 @@
       }
 
       .middle {
-        display: flex;
+        padding-bottom: 20px;
-        height: 380px;
+        border-radius: 20px;
+        overflow: hidden;
+        background-color: #fff;
+        box-shadow: 0 0 20px 0 hsla(0, 39%, 56%, .1), 0 0 16px 0 rgba(0, 0, 0, .08);
 
-        .left {
+        .middle-top {
           flex: 1;
           padding: 0 0;
-          border-radius: 20px;
-          overflow: hidden;
-          background-color: #fff;
-          box-shadow: 0 0 20px 0 hsla(0, 39%, 56%, .1), 0 0 16px 0 rgba(0, 0, 0, .08);
 
           .tab {
             display: flex;
             align-items: center;
             height: 50px;
-            margin-bottom: 40px;
             background: #fff3ee;
 
             div {
@@ -263,12 +390,17 @@
           }
 
           .tab-content {
-            display: none;
+            display: flex;
-            align-items: center;
+            flex-direction: column;
-            padding: 0 20px;
+            padding: 0 40px;
 
-            &.active {
+            .title {
+              margin-left: 0;
+            }
+
+            &__item--wrapper {
               display: flex;
+              align-items: center;
             }
 
             &__item {
@@ -276,9 +408,9 @@
               align-items: center;
               flex-direction: column;
               width: 140px;
-              height: 190px;
+              height: 170px;
               margin-right: 14px;
-              padding-top: 40px;
+              padding-top: 20px;
               background-color: #fff;
               border-radius: 10px;
               cursor: pointer;
@@ -299,6 +431,11 @@
                 font-weight: 600;
               }
 
+              p {
+                margin-top: 10px;
+                color: #d9451e;
+              }
+
               .original-price {
                 display: flex;
                 align-items: center;
@@ -323,17 +460,30 @@
           }
         }
 
-        .right {
+        .bottom {
           display: flex;
-          flex-direction: column;
           align-items: center;
-          justify-content: center;
+          justify-content: flex-end;
-          margin-left: 40px;
+          padding: 0 40px;
-          padding: 20px 0 20px 0;
+
+          .bottom-right {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          }
+
+          .bottom-left {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-right: 20px;
+          }
 
           .paytype {
             display: flex;
             align-items: center;
+            margin-top: 6px;
 
             span {
               margin-left: 8px;
@@ -364,9 +514,8 @@
           }
 
           .code {
-            width: 150px;
+            width: 110px;
-            height: 150px;
+            height: 110px;
-            margin: 14px 0;
           }
         }
       }

src/components/print/Print.vue

@@ -248,15 +248,10 @@
               "name": 1,
               "height": 200,
               "width": 200,
-              "paperHeader": 0,
-              "paperFooter": 547,
               "printElements": [],
-              "paperNumberLeft": 500,
-              "paperNumberTop": 530,
               "paperNumberDisabled": true,
               "paperNumberContinue": true,
               "fontFamily": "Microsoft YaHei",
-              "scale": 1,
               "watermarkOptions": {}
             }]
           }
@@ -586,8 +581,12 @@
 
       // js打印（不显示设计界面）
       toPrint (template, printData) {
-        this.hiprintTemplate.update(template)
+        this.hiprintTemplate = newHiprintPrintTemplate('temulables')
-        this.hiprintTemplate.print(printData)
+
+        setTimeout(() => {
+          this.hiprintTemplate.update(template)
+          this.hiprintTemplate.print(printData)
+        }, 100)
       },
 
       elementToString(el) {

src/store/index.js

@@ -15,7 +15,8 @@ export default new Vuex.Store({
     activeDlgShow: false,
     showSheinAlert: false,
     showTemuAlert: false,
-    userInfo: {}
+    userInfo: {},
+    labelInfo: {}
   },
 
   mutations: {
@@ -54,6 +55,9 @@ export default new Vuex.Store({
     },
     setTemuAlertShow(state, flag) {
       state.showTemuAlert = flag
+    },
+    setLabelInfo(state, info) {
+      state.info = info
     }
   },
 
@@ -66,8 +70,21 @@ export default new Vuex.Store({
             resolve(res.data)
           }
         })
+        this.getLabelInfo()
       })
     },
+
+    getLabelInfo(store) {
+      return new Promise(resolve => {
+        request.post('/api/userExtend/getLabelDetail').then(res => {
+          if (res.code === 0) {
+            store.commit('setLabelInfo', res.data)
+            resolve(res.data)
+          }
+        })
+      })
+    },
+
     SignOut(store, isClear) {
       if (isClear) {
         store.commit('logout')

src/view/lables/AddTemplate.vue

@@ -72,10 +72,10 @@
 
     mounted() {
       this.printData = {
-        labelCode: 96778555251,
+        labelCode: 123456789,
-        productSkuId: 6606980005,
+        productSkuId: `XXXXXXXXXXXXXX`,
-        skuExtCode: 'AAA1100mWh-orange',
+        skuExtCode: 'XXXXXXXXXXXXXX',
-        skuSpecName: '8pcs'
+        skuSpecName: 'XXXXX'
       }
 
       if (this.$route.query.id) {

src/view/lables/Print.vue

@@ -53,20 +53,6 @@
               clearable
               suffix-icon="iconfont iconSearch">
             </el-input>
-            <el-select
-              clearable
-              v-model="search.templateId"
-              placeholder="请选择模板"
-              size="small"
-              @change="getList"
-              style="margin-left: 10px;">
-              <el-option
-                v-for="item in templateList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-              </el-option>
-            </el-select>
             <el-button style="margin-left: 10px;" @click="getList" size="small" :loading="isLoading">查询</el-button>
           </div>
         </div>
@@ -93,7 +79,7 @@
         width="890px"
         @confirm="onConfirm">
         <el-form class="ai-form" :model="form" ref="form" label-width="100px">
-          <el-form-item label="标签名称" style="width: 100%;" prop="count" :rules="[{ required: true, message: '请输入打印数量', trigger: 'change' }]">
+          <el-form-item label="打印数量" style="width: 100%;" prop="count" :rules="[{ required: true, message: '请输入打印数量', trigger: 'change' }]">
             <el-input-number v-model="form.count" :min="1" :max="500" label="请输入打印数量"></el-input-number>
           </el-form-item>
         </el-form>
@@ -159,21 +145,12 @@
     },
 
     mounted() {
-      this.getTemplateList()
       this.$nextTick(() => {
         this.height = document.querySelector('.ai-list__content--right').clientHeight - 140
       })
     },
 
     methods: {
-      getTemplateList () {
-        this.$http.post('/api/template/getPage?size=-1').then(res => {
-          if (res.code === 0) {
-            this.templateList = res.data.records
-          }
-        })
-      },
-
       toPrint(row) {
         this.isLoading = true
         if (this.addType === '1') {
@@ -184,7 +161,6 @@
             }
 
             this.$http.post(`/api/template/detail?id=${res.data.records[0].id}`).then(res => {
-              this.isLoading = false
               if (res.code === 0) {
                 const params = JSON.parse(res.data.params)
                 const getValue = v => params.filter(e => e.fieldValue === v)[0].fieldName
@@ -194,7 +170,10 @@
                   }
                 })
 
+                this.isLoading = false
                 this.$refs.printRef.toPrint(JSON.parse(res.data.content), new Array(row.deliveryNum).fill(row))
+              } else {
+                this.isLoading = false
               }
             })
           })