no message

src/views/setting/personal/index.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="app-container">
-    <!-- <div class="setting_title">个人信息</div>
-    <el-divider></el-divider> -->
     <div v-if="!isRenew">
       <div class="userInfo">
         <el-row>
@@ -15,10 +13,6 @@
                 :limit="1"
                 @getFiles="getFiles"
               />
-              <!-- <el-image style="width: 100px;height: 100px;border-radius: 50%;" :src="userInfo.minLogo3"></el-image> -->
-              <!-- <div class="img">
-							<i class="el-icon-camera"></i>
-						</div> -->
             </div>
           </el-col>
           <el-col :span="8">

src/views/setting/personal/renew.vue

@@ -17,12 +17,55 @@
           <div class="tj" v-if="item.isFirst == 1">推荐</div>
           <div class="year">{{ item.normName }}</div>
           <div class="new">
-            <span style="font-size: 20px">￥</span>{{ (item.normAmount * 100 - item.discountAmount * 100) / 100 }}
+            <template v-if="item.id != '000'">
+              <span style="font-size: 20px">￥</span>{{ (item.normAmount * 100 - item.discountAmount * 100) / 100 }}
+            </template>
+            <template v-else>
+              <span style="font-size: 20px">￥</span
+              >{{
+                serviceProductList
+                  .filter(item => !!~formgengduode.serviceProductList.indexOf(item.dictCode))
+                  .map(item => item.price)
+                  .reduce((accumulator, currentValue) => accumulator + currentValue, 0) * formgengduode.year
+              }}
+            </template>
           </div>
-          <div class="old">￥{{ item.normAmount }}</div>
+          <div v-if="item.id != '000'" class="old">￥{{ item.normAmount }}</div>
           <div :class="goodsIndex == index ? 'bottom active' : 'bottom'">立省￥{{ item.discountAmount }}</div>
         </div>
       </div>
+      <div v-if="goodsId == '000'" style="margin: 20px 0">
+        <el-form ref="form" :model="formgengduode" label-width="160px">
+          <el-form-item
+            label="选择需要购买模块"
+            style="text-align: left"
+            prop="serviceProductList"
+            :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
+          >
+            <el-checkbox-group v-model="formgengduode.serviceProductList">
+              <el-checkbox v-for="(item, index) in serviceProductList" :key="index" :label="item.dictCode" name="type"
+                >{{ item.dictValue }}（￥{{ item.price }}）</el-checkbox
+              >
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item
+            label="选择需要购买年限"
+            style="text-align: left"
+            prop="year"
+            :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
+          >
+            <el-input-number
+              size="mini"
+              style="width: 200px"
+              v-model="formgengduode.year"
+              :min="1"
+              :max="100"
+              label="描述文字"
+            ></el-input-number
+            ><span style="font-size: 16px; margin-left: 10px">年</span>
+          </el-form-item>
+        </el-form>
+      </div>
       <div class="flex" style="justify-content: flex-start">
         <el-button style="margin-top: 30px" type="success" @click="confirmPay()">微信支付</el-button>
       </div>
@@ -35,18 +78,29 @@
       :modal-append-to-body="false"
       @close="close"
     >
-      <div class="pay" v-if="!isPaySuccess">
+      <div class="pay" v-if="!isPaySuccess && goodsList[goodsIndex]">
         <div style="font-weight: bold; font-size: 22px">扫码支付</div>
         <div class="ewm" ref="payQRCode" />
         <div>
           <div class="flex" style="align-items: center">
             <div>
-              实付: <span style="font-size: 20px; color: #ff6804">￥</span
-              ><span style="font-size: 36px; color: #ff6804; font-weight: bold">{{
-                (goodsList[goodsIndex].normAmount * 100 - goodsList[goodsIndex].discountAmount * 100) / 100
-              }}</span>
+              <template v-if="goodsId != '000'">
+                实付:<span style="font-size: 20px; color: #ff6804">￥</span
+                ><span style="font-size: 36px; color: #ff6804; font-weight: bold">{{
+                  (goodsList[goodsIndex].normAmount * 100 - goodsList[goodsIndex].discountAmount * 100) / 100
+                }}</span>
+              </template>
+              <template v-else>
+                实付:<span style="font-size: 20px; color: #ff6804">￥</span
+                ><span style="font-size: 36px; color: #ff6804; font-weight: bold">{{
+                  serviceProductList
+                    .filter(item => !!~formgengduode.serviceProductList.indexOf(item.dictCode))
+                    .map(item => item.price)
+                    .reduce((accumulator, currentValue) => accumulator + currentValue, 0) * formgengduode.year
+                }}</span>
+              </template>
             </div>
-            <div style="margin: 0 20px">
+            <div v-if="goodsId != '000'" style="margin: 0 20px">
               已优惠: <span style="font-size: 18px; color: #ff6804">￥</span
               ><span style="font-size: 20px; color: #ff6804">{{ goodsList[goodsIndex].discountAmount }}</span>
             </div>
@@ -67,15 +121,26 @@
           </div>
         </div>
       </div>
-      <div class="pay" v-else>
+      <div class="pay" v-else-if="goodsList[goodsIndex]">
         <img style="width: 60px; height: 60px" src="@/assets/common/weixin.png" alt="" />
         <div style="font-weight: bold; font-size: 22px; margin: 20px 0">支付成功</div>
         <div class="flex" style="align-items: center">
           <div style="font-size: 16px">
-            支付金额: <span style="font-size: 20px; color: #ff6804">￥</span
-            ><span style="font-size: 36px; color: #ff6804; font-weight: bold">{{
-              (goodsList[goodsIndex].normAmount * 100 - goodsList[goodsIndex].discountAmount * 100) / 100
-            }}</span>
+            <template v-if="goodsId != '000'">
+              支付金额: <span style="font-size: 20px; color: #ff6804">￥</span
+              ><span style="font-size: 36px; color: #ff6804; font-weight: bold">{{
+                (goodsList[goodsIndex].normAmount * 100 - goodsList[goodsIndex].discountAmount * 100) / 100
+              }}</span>
+            </template>
+            <template v-else>
+              支付金额: <span style="font-size: 20px; color: #ff6804">￥</span
+              ><span style="font-size: 36px; color: #ff6804; font-weight: bold">{{
+                serviceProductList
+                  .filter(item => !!~formgengduode.serviceProductList.indexOf(item.dictCode))
+                  .map(item => item.price)
+                  .reduce((accumulator, currentValue) => accumulator + currentValue, 0) * formgengduode.year
+              }}</span>
+            </template>
           </div>
         </div>
         <div style="margin: 50px 0; font-size: 18px">
@@ -94,6 +159,7 @@ import { mapGetters } from 'vuex'
 import { getUserInfo } from '@/api/setting'
 import QRCode from 'qrcodejs2'
 import request from '@/utils/request'
+import { serviceProductList } from '@/api/serviceProductConfig.js'
 export default {
   data() {
     return {
@@ -104,7 +170,12 @@ export default {
       timer: '',
       is_pay: false,
       is_submit: true,
-      isPaySuccess: false
+      isPaySuccess: false,
+      formgengduode: {
+        year: 1,
+        serviceProductList: []
+      },
+      serviceProductList: []
     }
   },
   computed: {
@@ -113,6 +184,13 @@ export default {
   created() {
     this.getUserInfo()
     this.getBuyList()
+    serviceProductList({
+      pageNum: 1,
+      pageSize: -1,
+      params: [{ param: 'a.status', compare: '=', value: 'true' }]
+    }).then(res => {
+      this.serviceProductList = res.data.records
+    })
   },
   destroyed() {
     this.clear()
@@ -139,7 +217,19 @@ export default {
         data: {}
       })
         .then(res => {
-          this.goodsList = res.data
+          this.goodsList = [
+            ...res.data,
+            {
+              discountAmount: 0,
+              id: '000',
+              isFirst: 0,
+              month: 0,
+              normAmount: 0,
+              normName: '自定义',
+              remark: '',
+              year: 0
+            }
+          ]
           this.goodsId = res.data[0].id
         })
         .catch(erro => {})
@@ -153,7 +243,6 @@ export default {
         this.is_submit = true
       }, 3000)
       this.getCode()
-      this.is_pay = true
     },
     checkPay(payId) {
       this.timer = setInterval(() => {
@@ -179,13 +268,24 @@ export default {
     clear() {
       clearInterval(this.timer)
     },
-    getCode() {
+    funcsss() {
       request({
         url: `/buy/service/generate/pay/code`,
         method: 'post',
-        params: {
+        data: {
           id: this.userInfo.buyCompanyInfo,
-          normId: this.goodsId
+          ...(() => {
+            if (this.goodsId == '000') {
+              return {
+                year: this.formgengduode.year,
+                serviceProductList: this.formgengduode.serviceProductList
+              }
+            } else {
+              return {
+                normId: this.goodsId
+              }
+            }
+          })()
         }
       })
         .then(res => {
@@ -205,6 +305,22 @@ export default {
           }
         })
         .catch(erro => {})
+    },
+    getCode() {
+      if (this.goodsId == '000') {
+        this.$refs.form.validate(valid => {
+          if (valid) {
+            this.funcsss()
+            this.is_pay = true
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      } else {
+        this.funcsss()
+        this.is_pay = true
+      }
     }
   }
 }