update

src/modules/offices/api/index.js

@@ -109,11 +109,11 @@ export function getGraduationOrderList(data) {
 }
 
 // 获取毕业典礼商品列表
-export function getGraduationGoodsList(data) {
+export function getGraduationProductList(data) {
   return httpRequest.get('/api/pay/v1/product/params-details', data)
 }
 
 // 多个商品合并为一个商品
-export function mergeGraduationGoods(data) {
+export function mergeGraduationProduct(data) {
   return httpRequest.post('/api/pay/v1/product/create-by-details', data)
 }

src/modules/offices/src/graduation/edit.vue

@@ -5,23 +5,25 @@
       <el-button type="text" @click="goBack">返回列表</el-button>
       <div class="main-form">
         <el-form label-width="100px" ref="ruleForm" :model="ruleForm" :rules="rules">
-          <el-form-item label="本人参与方式" prop="goodsId">
-            <el-radio-group v-model="ruleForm.goodsId" size="small">
+          <el-form-item label="本人参与方式" prop="product_id">
+            <el-radio-group v-model="ruleForm.product_id" size="small">
               <el-radio border>无</el-radio>
-              <el-radio border :label="item.id" v-for="item in selfGoodsList" :key="item.id">{{ item.name }}</el-radio>
+              <el-radio border :label="item.id" v-for="item in selfProductList" :key="item.id">{{
+                item.name
+              }}</el-radio>
             </el-radio-group>
             <el-popover placement="top-start" width="400" trigger="hover">
               <i class="el-icon-question" slot="reference"></i>
               <div>
                 <ol>
-                  <li v-for="item in selfGoodsList" :key="item.id">
+                  <li v-for="item in selfProductList" :key="item.id">
                     {{ item.name }}：{{ item.desc }} {{ item.price }}元
                   </li>
                 </ol>
               </div>
             </el-popover>
           </el-form-item>
-          <template v-if="ruleForm.goodsId">
+          <template v-if="ruleForm.product_id">
             <el-form-item label="姓名" prop="personal_name">
               <el-input v-model="ruleForm.personal_name" />
             </el-form-item>
@@ -46,22 +48,22 @@
               <i class="el-icon-error" @click="handleRemoveChild(index)"></i>
               <el-form-item
                 label="随同关系"
-                :prop="'children.' + index + '.goodsId'"
+                :prop="'children.' + index + '.product_id'"
                 :rules="{ required: true, message: '请选择', trigger: 'blur' }"
               >
-                <el-select v-model="child.goodsId">
+                <el-select v-model="child.product_id">
                   <el-option
                     :value="item.id"
                     :label="item.name"
                     :key="item.id"
-                    v-for="item in otherGoodsList"
+                    v-for="item in otherProductList"
                   ></el-option>
                 </el-select>
                 <el-popover placement="top-start" width="400" trigger="hover">
                   <i class="el-icon-question" slot="reference"></i>
                   <div>
                     <ol>
-                      <li v-for="item in otherGoodsList" :key="item.id">
+                      <li v-for="item in otherProductList" :key="item.id">
                         {{ item.name }}：{{ item.desc }} {{ item.price }}元
                       </li>
                     </ol>
@@ -92,6 +94,9 @@
               <el-radio :label="item.value" v-for="item in payList" :key="item.value">{{ item.label }}</el-radio>
             </el-radio-group>
           </el-form-item>
+          <el-form-item label="支付金额" prop="payment"
+            ><em class="price">￥</em>{{ formatValue(payPrice) }}
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" :disabled="disabled" @click="handleSubmit">立即支付</el-button>
           </el-form-item>
@@ -112,22 +117,22 @@ export default {
   components: { Pay },
   data() {
     return {
-      goodsList: [],
+      productList: [],
       ruleForm: {
-        goodsId: '',
+        product_id: '',
         personal_name: '',
         telephone: '',
         class_name: '',
         address: '',
         has_children: 0,
         payment: '2',
-        children: [{ goodsId: '', personal_name: '', telephone: '' }]
+        children: [{ product_id: '', personal_name: '', telephone: '' }]
       },
       rules: {
         personal_name: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
         telephone: [{ required: true, message: '请输入您的手机号', trigger: 'blur' }],
-        class_name: [{ required: true, message: '请输入您的班级', trigger: 'blur' }],
-        address: [{ required: true, message: '请输入邮寄地址', trigger: 'blur' }]
+        class_name: [{ required: true, message: '请输入您的班级', trigger: 'blur' }]
+        // address: [{ required: true, message: '请输入邮寄地址', trigger: 'blur' }]
       },
       payList: [
         { label: '微信支付', value: '2' },
@@ -142,17 +147,36 @@ export default {
     affairId() {
       return this.$route.query.id
     },
-    selfGoodsList() {
-      return this.goodsList.filter((item, index) => index < 3)
+    selfProductList() {
+      return this.productList.filter((item, index) => index < 3)
     },
-    otherGoodsList() {
-      return this.goodsList.filter((item, index) => index >= 3)
+    otherProductList() {
+      return this.productList.filter((item, index) => index >= 3)
     },
     disabled() {
-      return (!this.ruleForm.goodsId && !this.ruleForm.has_children) || this.submitDisabled
+      return (!this.ruleForm.product_id && !this.ruleForm.has_children) || this.submitDisabled
+    },
+    payPrice() {
+      let price = 0
+      if (this.ruleForm.product_id) {
+        const found = this.productList.find(item => item.id === this.ruleForm.product_id)
+        price += parseFloat(found.price)
+      }
+      if (this.ruleForm.has_children && this.ruleForm.children.length) {
+        this.ruleForm.children.forEach(item => {
+          if (item.product_id) {
+            const found = this.productList.find(product => product.id === item.product_id)
+            price += parseFloat(found.price)
+          }
+        })
+      }
+      return price
     }
   },
   methods: {
+    formatValue(value = 0) {
+      return value.toLocaleString()
+    },
     // 返回
     goBack() {
       this.$router.push({ path: '/app/offices', query: { id: this.affairId } })
@@ -164,19 +188,19 @@ export default {
         Object.assign(this.ruleForm, data)
       })
     },
-    getGoodsList() {
-      api.getGraduationGoodsList().then(response => {
+    getProductList() {
+      api.getGraduationProductList().then(response => {
         const { list = [] } = response
         const [first] = list
-        this.goodsList = list
+        this.productList = list
         if (first) {
-          this.ruleForm.goodsId = first.id
+          this.ruleForm.product_id = first.id
         }
       })
     },
     // 添加随同
     handleAddChild() {
-      this.ruleForm.children.push({ goodsId: '', personal_name: '', telephone: '' })
+      this.ruleForm.children.push({ product_id: '', personal_name: '', telephone: '' })
     },
     // 删除随同
     handleRemoveChild(index) {
@@ -184,44 +208,47 @@ export default {
     },
     // 提交
     handleSubmit() {
-      this.$refs.ruleForm.validate().then(this.mergeGoods)
+      this.$refs.ruleForm.validate().then(this.mergeProduct)
     },
     // 合并商品
-    mergeGoods() {
+    mergeProduct() {
       const params = []
       // 个人商品数据
-      if (this.ruleForm.goodsId) {
-        const goods = this.goodsList.find(goods => goods.id === this.ruleForm.goodsId)
+      if (this.ruleForm.product_id) {
+        const product = this.productList.find(product => product.id === this.ruleForm.product_id)
         params.push({
-          id: this.ruleForm.goodsId,
+          id: this.ruleForm.product_id,
           num: 1,
-          comment: `${goods.name}:${goods.desc}`,
-          other_param: JSON.stringify({
-            personal_name: this.ruleForm.personal_name,
-            telephone: this.ruleForm.telephone,
-            class_name: this.ruleForm.class_name,
-            address: this.ruleForm.address,
-            has_children: this.ruleForm.has_children,
-            is_self: 1,
-            goods
-          })
+          comment: `${product.name}:${product.desc}`,
+          personal_name: this.ruleForm.personal_name,
+          telephone: this.ruleForm.telephone,
+          class_name: this.ruleForm.class_name,
+          address: this.ruleForm.address,
+          has_children: this.ruleForm.has_children,
+          is_self: 1,
+          product: JSON.stringify(product)
         })
       }
       // 随同商品数据
       if (this.ruleForm.has_children && this.ruleForm.children.length) {
         this.ruleForm.children.forEach(item => {
-          const goods = this.goodsList.find(goods => goods.id === item.goodsId)
-          params.push({
-            id: item.goodsId,
-            num: 1,
-            comment: `${goods.name}:${goods.desc}`,
-            other_param: JSON.stringify(Object.assign({ goods }, item))
-          })
+          const product = this.productList.find(product => product.id === item.product_id)
+          params.push(
+            Object.assign(
+              {
+                id: item.product_id,
+                num: 1,
+                comment: `${product.name}:${product.desc}`,
+                product: JSON.stringify(product)
+              },
+              item
+            )
+          )
         })
       }
       this.submitDisabled = true
       api
-        .mergeGraduationGoods({ params })
+        .mergeGraduationProduct({ params })
         .then(response => {
           this.productId = response.product_id
           this.payVisible = true
@@ -239,7 +266,7 @@ export default {
   beforeMount() {
     // 获取学生信息
     this.getStudent()
-    this.getGoodsList()
+    this.getProductList()
   }
 }
 </script>
@@ -249,6 +276,11 @@ export default {
   max-width: 600px;
   margin: 0 auto;
 }
+.price {
+  font-style: normal;
+  color: #b80037;
+  font-size: 20px;
+}
 .children {
   position: relative;
   padding: 20px 0;

src/modules/offices/src/graduation/list.vue

@@ -8,8 +8,8 @@
           <el-form label-position="left" class="table-expand" v-if="props.row.others.length">
             <template v-for="(item, index) in props.row.others">
               <div class="table-expand-item" :key="index">
-                <el-form-item label="随同关系" v-if="item.goods">
-                  <span>{{ item.goods.name }}</span>
+                <el-form-item label="随同关系" v-if="item.product">
+                  <span>{{ item.product.name }}</span>
                 </el-form-item>
                 <el-form-item label="姓名">
                   <span>{{ item.personal_name }}</span>
@@ -23,7 +23,7 @@
         </template>
       </el-table-column>
       <el-table-column label="姓名" prop="personal.personal_name"></el-table-column>
-      <el-table-column label="参与方式" prop="personal.goods.name"></el-table-column>
+      <el-table-column label="参与方式" prop="personal.product.name"></el-table-column>
       <el-table-column label="手机号" prop="personal.telephone"></el-table-column>
       <el-table-column label="班级" prop="personal.class_name"></el-table-column>
       <el-table-column label="支付方式" prop="type">
@@ -64,7 +64,10 @@ export default {
         this.page.total = total
         this.list = list.map(item => {
           let list = JSON.parse(item.product_desc) || []
-          list = list.map(item => JSON.parse(item.other_param))
+          list = list.map(item => {
+            item.product = JSON.parse(item.product)
+            return item
+          })
           const [personal, ...others] = list
           item.personal = personal
           item.others = others || []