超级会员

src/api/member/member.js

@@ -15,6 +15,22 @@ export function fetchCouponList(params) {
     params
   })
 }
+// 回显编辑超级会员优惠券
+export function svipCoupon(params) {
+  return request({
+    url: '/svip/member/svipCoupon',
+    method: 'get',
+    params
+  })
+}
+// 保存超级会员优惠券
+export function saveVipCoupon(data) {
+  return request({
+    url: '/svip/member/saveVipCoupon',
+    method: 'get',
+    data: data
+  })
+}
 // 关闭超级会员专属优惠券
 export function fetchCloseCoupon(id) {
   return request({
@@ -100,10 +116,11 @@ export function updateSort(params) {
     params
   })
 }
-export function saveSvipProduct(id) {
+export function saveSvipProduct(data) {
   return request({
-    url: '/svip/member/saveSvipProduct/' + id,
-    method: 'post'
+    url: '/svip/member/saveSvipProduct',
+    method: 'post',
+    data: data
   })
 }
 export function delSvipProduct(id) {
@@ -112,6 +129,12 @@ export function delSvipProduct(id) {
     method: 'post'
   })
 }
+export function editSvipProduct(id) {
+  return request({
+    url: '/svip/member/editSvipProduct/' + id,
+    method: 'post'
+  })
+}
 export function getAdsImage() {
   return request({
     url: '/svip/member/getAdsImage',

src/utils/request.js

@@ -12,7 +12,7 @@ const service = axios.create({
 
 // request interceptor
 service.interceptors.request.use(
-  config => {
+  (config) => {
     // do something before request is sent
 
     if (store.getters.token) {
@@ -23,7 +23,7 @@ service.interceptors.request.use(
     }
     return config
   },
-  error => {
+  (error) => {
     // do something with request error
     console.log(error) // for debug
     return Promise.reject(error)
@@ -42,7 +42,7 @@ service.interceptors.response.use(
    * Here is just an example
    * You can also judge the status by HTTP Status Code
    */
-  response => {
+  (response) => {
     const res = response.data
 
     // if the custom code is -1, it is judged as an error.
@@ -56,11 +56,15 @@ service.interceptors.response.use(
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
+        MessageBox.confirm(
+          'You have been logged out, you can cancel to stay on this page, or log in again',
+          'Confirm logout',
+          {
+            confirmButtonText: 'Re-Login',
+            cancelButtonText: 'Cancel',
+            type: 'warning'
+          }
+        ).then(() => {
           store.dispatch('user/resetToken').then(() => {
             location.reload()
           })
@@ -82,7 +86,7 @@ service.interceptors.response.use(
       return res
     }
   },
-  error => {
+  (error) => {
     console.log('err' + error) // for debug
     Message({
       message: error.msg || error.message,

src/views/member/coupon/components/good-dialog.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-dialog
+    title="添加商品"
+    :visible.sync="visible"
+    width="1100px"
+    :close-on-click-modal="false"
+    :show-close="false"
+  >
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>商品ID:</span>
+        <el-input
+          v-model="listQuery.productId"
+          placeholder="商品ID"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>商品名称:</span>
+        <el-input
+          v-model="listQuery.name"
+          placeholder="商品名称"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input
+          v-model="listQuery.shopName"
+          placeholder="供应商名称"
+          clearable
+          style="width:160px;"
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList">查询</el-button>
+      </div>
+    </div>
+    <el-table ref="table" v-loading="isLoading" :data="list" height="400px" border @select="handleSelect">
+      <el-table-column type="selection" width="50" />
+      <el-table-column prop="productId" label="商品ID" align="center" width="80" />
+      <el-table-column prop="coupon" label="商品图片" align="center" width="100">
+        <template v-if="row.productId" slot-scope="{ row }">
+          <el-popover
+            placement="top-start"
+            title=""
+            width="180"
+            trigger="hover"
+          >
+            <img :src="row.mainImage" alt="" style="width:100px;height:100px;">
+            <img slot="reference" :src="row.mainImage" alt="" style="width:50px;height:50px;">
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="商品名称" align="center" />
+      <el-table-column prop="shopName" label="供应商" align="center" width="250" />
+      <el-table-column prop="price" label="机构价" align="center" width="160">
+        <template slot-scope="{ row }">
+          ￥{{ row.price ? row.price : '0.00' }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+    <div slot="footer">
+      <el-button @click="handleCanle">取 消</el-button>
+      <el-button type="primary" :disabled="disabled" @click="handleAddProConfirm(productRadio)">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { fetchProductList } from '@/api/member/member'
+
+export default {
+  name: 'ProDialog',
+  filters: {
+    NumFormat(value) {
+      // 处理金额
+      return Number(value).toFixed(2)
+    }
+  },
+  data() {
+    return {
+      visible: true,
+      listQuery: {
+        productId: '', // 商品id
+        name: '', // 商品名称
+        shopName: '', // 供应商名称
+        pageNum: 1,
+        pageSize: 20
+      },
+      list: [],
+      total: 0,
+      productRadio: null,
+      isLoading: true
+    }
+  },
+  computed: {
+    disabled() {
+      return this.productRadio === null
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 商品列表
+    async getList() {
+      this.isLoading = true
+      const res = await fetchProductList(this.listQuery)
+      this.list = res.data.results
+      this.total = res.data.totalRecord
+      this.isLoading = false
+    },
+    // 选择商品
+    handleSelect(selection, row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+      this.productRadio = row.productId
+    },
+    handleAddProConfirm() {
+      // 确认选择商品
+      this.$emit('confirm', this.productRadio)
+    },
+    handleCanle() {
+      // 取消弹窗
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  thead .el-checkbox{display: none !important;}
+}
+</style>

src/views/member/coupon/components/shop-dialog.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-dialog title="选择供应商" :visible.sync="visible" width="1100px">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>供应商Id:</span>
+        <el-input
+          v-model="listQuery.shopId"
+          placeholder="供应商Id"
+          clearable
+        />
+      </div>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input
+          v-model="listQuery.name"
+          placeholder="供应商名称"
+          clearable
+        />
+      </div>
+      <div class="filter-control">
+        <span>供应商简称:</span>
+        <el-input
+          v-model="listQuery.sname"
+          placeholder="供应商简称"
+          clearable
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList">搜索</el-button>
+      </div>
+    </div>
+    <el-table ref="table" :data="list" height="350px" border @select="handleSelect">
+      <el-table-column type="selection" width="55" />
+      <el-table-column property="shopId" label="供应商ID" width="150" />
+      <el-table-column property="name" label="供应商名称" width="150" />
+      <el-table-column property="sname" label="供应商简称" width="200">
+        <template slot-scope="{ row }">
+          {{ row.sname ? row.sname : '---' }}
+        </template>
+      </el-table-column>
+      <el-table-column property="linkMan" label="联系人" />
+      <el-table-column property="contractMobile" label="手机号">
+        <template slot-scope="{ row }">
+          {{ row.contractMobile ? row.contractMobile : '---' }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <div slot="footer">
+      <el-button @click="handleCanle">取 消</el-button>
+      <el-button type="primary" :disabled="disabled" @click="handleAddProConfirm(shopRadio)">确 定</el-button>
+    </div>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { fetchFindShop } from '@/api/member/member'
+
+export default {
+  name: 'ShopDialog',
+  data() {
+    return {
+      visible: true,
+      listQuery: {
+        shopId: '', // 供应商id
+        name: '', // 供应商名称
+        sname: '', // 供应商简称
+        pageNum: 1,
+        pageSize: 20
+      },
+      list: [],
+      total: 0,
+      shopRadio: null,
+      isLoading: true
+    }
+  },
+  computed: {
+    disabled() {
+      return this.shopRadio === null
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取供应商列表
+    async getList() {
+      this.isLoading = true
+      const res = await fetchFindShop(this.listQuery)
+      this.list = res.data.results
+      this.total = res.data.totalRecord
+      this.isLoading = false
+    },
+    // 选择供应商
+    handleSelect(selection, row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+      this.shopRadio = row
+    },
+    handleAddProConfirm() {
+      // 确认选择商品
+      this.$emit('confirm', this.shopRadio)
+    },
+    handleCanle() {
+      // 取消弹窗
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  thead .el-checkbox{display: none !important;}
+}
+</style>

src/views/member/coupon/edit.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
+    <div v-if="editType === 'add'" class="filter-container">
+      <div class="filter-control">
+        <span style="color: red;">在本页面，对每三个月给超级会员自动发放的优惠券进行配置，配置完成后下一阶段才生效（最少配置1个，最多5个）。</span>
+        <el-button type="primary">新增优惠券</el-button>
+      </div>
+    </div>
+    <div v-else class="filter-container">
       <div class="filter-control">
         <span>优惠月份:</span>
         <el-date-picker
@@ -10,56 +16,51 @@
           start-placeholder="开始月份"
           end-placeholder="结束月份"
         />
-      </div>
-      <div class="filter-control">
-        <el-button type="primary">新增优惠券</el-button>
+        <el-button type="primary" style="margin-left: 30px;">新增优惠券</el-button>
       </div>
     </div>
-    <el-card class="box-card">
-      <el-form :model="form" label-width="100px">
-        <el-form-item label="优惠券:">
-          <el-radio-group v-model="form.radio">
+    <el-card v-for="(item,index) in formList" :key="item" class="box-card" style="position: relative;">
+      <el-form :model="item" label-width="100px">
+        <el-form-item label="优惠券:" style="margin-bottom: 10px;">
+          <el-radio-group v-model="item.radio">
             <el-radio :label="0">活动券</el-radio>
             <el-radio :label="1">品类券</el-radio>
             <el-radio :label="3">店铺券</el-radio>
           </el-radio-group>
-          <el-button class="delete_label" type="primary" size="mini">删除</el-button>
         </el-form-item>
-        <el-form-item label="供应商" :hidden="form.radio === 3 ? false : true">
-          <el-button type="text" :hidden="!hiddenItem" @click="findShopList()">选择供应商</el-button>
-          <el-table :data="shopData" border :hidden="hiddenItem">
-            <el-table-column prop="name" label="供应商名称" />
-            <el-table-column prop="sname" label="供应商简称" width="150px" />
-            <el-table-column prop="linkMan" label="联系人" />
-            <el-table-column prop="contractMobile" label="手机号" width="120px">
+        <el-form-item label="供应商" :hidden="item.radio === 3 ? false : true" style="margin-bottom: 10px;">
+          <el-button type="primary" :hidden="!hiddenItem" autofocussize="mini" size="mini" icon="el-icon-plus" @click="handleShopDialogVisible(index)">选择供应商</el-button>
+          <el-table :data="item.shopData" border :hidden="hiddenItem" width="1000">
+            <el-table-column prop="name" label="供应商名称" align="center" width="300" />
+            <el-table-column prop="sname" label="供应商简称" align="center" width="150" />
+            <el-table-column prop="linkMan" label="联系人" align="center" width="100" />
+            <el-table-column prop="contractMobile" label="手机号" align="center" width="120">
               <template slot-scope="{ row }">
                 {{ row.contractMobile ? row.contractMobile : '---' }}
               </template>
             </el-table-column>
-            <el-table-column label="操作">
+            <el-table-column label="操作" align="center" width="100">
               <template slot-scope="{ row }">
                 <el-button type="text" @click="deleteShop(row)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         </el-form-item>
-        <el-form-item label="优惠券金额:">
-          <el-input style="width: 150px" size="mini" />
+        <el-form-item label="优惠券金额:" style="margin-bottom: 10px;">
+          <el-input v-model="item.couponAmount" style="width: 150px" size="mini" />
         </el-form-item>
-        <el-form-item label="优惠条件:">
-          <span>订单商品总额满</span><el-input style="width: 150px" size="mini" />
+        <el-form-item label="优惠条件:" style="margin-bottom: 10px;">
+          <span>订单商品总额满：</span>
+          <el-input v-model="item.touchPrice" style="width: 150px" size="mini" />
         </el-form-item>
-        <el-form-item label="优惠商品:" :hidden="form.radio === 0 ? false : true">
-          <el-radio-group v-model="form.productType">
+        <el-form-item label="优惠商品:" :hidden="form.radio === 0 ? false : true" style="margin-bottom: 10px;">
+          <el-radio-group v-model="item.productType">
             <el-radio :label="1">全商城商品</el-radio>
             <el-radio :label="2">指定商品</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :hidden="form.productType === 2 && form.radio === 0 ? false : true">
-          <template>
-            <el-button @click="deleteProduct()">删除</el-button>
-            <el-button type="primary" @click="productList()">添加</el-button>
-          </template>
+        <el-form-item :hidden="item.productType === 2 && item.radio === 0 ? false : true" style="margin-bottom: 10px;">
+          <el-button type="primary" size="mini" @click="productList()">添加</el-button>
           <el-form-item :hidden="hiddenProduct">
             <el-table :data="productTable" border @select="handleSelect">
               <el-table-column type="selection" width="55" />
@@ -90,149 +91,46 @@
             </el-table>
           </el-form-item>
         </el-form-item>
-        <el-form-item label="优惠品类:" :hidden="form.radio === 1 ? false : true">
+        <el-form-item label="优惠品类:" :hidden="item.radio === 1 ? false : true" style="margin-bottom: 10px;">
           <template>
-            <el-radio v-model="form.categoryType" label="">产品</el-radio>
-            <el-radio v-model="form.categoryType" label="2">仪器</el-radio>
+            <el-radio v-model="item.categoryType" label="1">产品</el-radio>
+            <el-radio v-model="item.categoryType" label="2">仪器</el-radio>
           </template>
         </el-form-item>
       </el-form>
+      <el-button class="delete_label" icon="el-icon-delete" size="mini" type="danger">删除</el-button>
     </el-card>
     <!-- 供应商弹框 -->
-    <el-dialog title="选择供应商" :visible.sync="dialogTableVisible" width="50%">
-      <div class="filter-container">
-        <div class="filter-control">
-          <span>供应商Id:</span>
-          <el-input
-            v-model="shopForm.shopId"
-            placeholder="供应商Id"
-            clearable
-          />
-        </div>
-        <div class="filter-control">
-          <span>供应商名称:</span>
-          <el-input
-            v-model="shopForm.name"
-            placeholder="供应商名称"
-            clearable
-          />
-        </div>
-        <div class="filter-control">
-          <span>供应商简称:</span>
-          <el-input
-            v-model="shopForm.sname"
-            placeholder="供应商简称"
-            clearable
-          />
-        </div>
-        <div class="filter-control">
-          <el-button type="primary" @click="findShopList()">搜索</el-button>
-        </div>
-      </div>
-      <el-table ref="table" :data="shopTableData" height="350px" @select="handleSelect">
-        <el-table-column type="selection" width="55" />
-        <el-table-column property="shopId" label="供应商Id" width="150" />
-        <el-table-column property="name" label="供应商名称" width="150" />
-        <el-table-column property="sname" label="供应商简称" width="200">
-          <template slot-scope="{ row }">
-            {{ row.sname ? row.sname : '---' }}
-          </template>
-        </el-table-column>
-        <el-table-column property="linkMan" label="联系人" />
-        <el-table-column property="contractMobile" label="手机号">
-          <template slot-scope="{ row }">
-            {{ row.contractMobile ? row.contractMobile : '---' }}
-          </template>
-        </el-table-column>
-      </el-table>
-      <div slot="footer">
-        <el-button type="primary" @click="pushShop()">确定</el-button>
-        <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
-      </div>
-      <!-- 页码 -->
-      <pagination
-        :total="shopTotal"
-        :page-sizes="[20, 30, 50, 100]"
-        :page-size="20"
-        :page.sync="shopForm.pageNum"
-        :limit.sync="shopForm.pageSize"
-        @pagination="findShopList"
-      />
-    </el-dialog>
+    <shop-dialog v-if="dialogShopVisible" ref="shopDialog" @cancel="handleShopCancel" @confirm="handleShopConfirm" />
     <!-- 商品弹框 -->
-    <el-dialog title="选择商品" :visible.sync="dialogProductVisible" width="50%">
-      <div class="filter-container">
-        <div class="filter-control">
-          <span>商品Id:</span>
-          <el-input
-            v-model="productForm.productId"
-            placeholder="商品Id"
-            clearable
-          />
-        </div>
-        <div class="filter-control">
-          <span>商品名称:</span>
-          <el-input
-            v-model="productForm.name"
-            placeholder="商品名称"
-            clearable
-          />
-        </div>
-        <div class="filter-control">
-          <span>供应商:</span>
-          <el-input
-            v-model="productForm.shopName"
-            placeholder="供应商"
-            clearable
-          />
-        </div>
-        <div class="filter-control">
-          <el-button type="primary" @click="productList()">搜索</el-button>
-        </div>
-      </div>
-      <el-table ref="table" :data="productTableData" height="350px" @select="handleSelect">
-        <el-table-column type="selection" width="55" />
-        <el-table-column property="productId" label="商品Id" width="150" />
-        <el-table-column property="mainImage" label="商品图片" width="150">
-          <template slot-scope="{ row }">
-            <el-popover
-              placement="top-start"
-              title=""
-              width="180"
-              trigger="hover"
-            >
-              <img :src="row.mainImage" alt="" style="width:150px;height:150px;">
-              <img slot="reference" :src="row.mainImage" alt="" style="width:30px;height:30px;">
-            </el-popover>
-          </template>
-        </el-table-column>
-        <el-table-column property="name" label="商品名称" width="200" />
-        <el-table-column property="shopName" label="供应商" />
-      </el-table>
-      <div slot="footer">
-        <el-button type="primary" @click="pushProduct()">确定</el-button>
-        <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
-      </div>
-      <!-- 页码 -->
-      <pagination
-        :total="productTotal"
-        :page-sizes="[20, 30, 50, 100]"
-        :page-size="20"
-        :page.sync="productForm.pageNum"
-        :limit.sync="productForm.pageSize"
-        @pagination="productList"
-      />
-    </el-dialog>
+    <good-dialog v-if="dialogGoodVisible" ref="goodDialog" @cancel="handleGoodCancel" @confirm="handleGoodConfirm" />
   </div>
 </template>
 
 <script>
-import { fetchFindShop, fetchProductList } from '@/api/member/member'
 
+import goodDialog from './components/good-dialog'
+import shopDialog from './components/shop-dialog'
+const defaultForm = {
+  shop: {
+    shopId: 0
+  }, // 供应商信息
+  shopData: [],
+  radio: 0,
+  couponAmount: '',
+  touchPrice: '',
+  productType: 1,
+  categoryType: 1,
+  associateList: []// 指定商品信息
+}
 export default {
-  name: 'MemberDetail',
+  name: 'Edit',
+  components: { goodDialog, shopDialog },
   data() {
     return {
+      formList: [],
+      doctorId: '',
+      editType: 'add',
       time: '',
       form: {
         radio: 0,
@@ -242,42 +140,41 @@ export default {
       shopData: [],
       hiddenItem: true,
       dialogTableVisible: false,
-      shopForm: {
-        shopId: '', // 供应商id
-        name: '', // 供应商名称
-        sname: '', // 供应商简称
-        pageNum: 1,
-        pageSize: 20
-      },
       shopTotal: 0,
       rows: [],
       // 供应商列表
       shopTableData: [],
       // 商品列表
       dialogProductVisible: false,
-      productForm: {
-        productId: '', // 商品id
-        name: '', // 商品名称
-        shopName: '', // 供应商名称
-        pageNum: 1,
-        pageSize: 20
-      },
       hiddenProduct: true,
       productTable: [],
       productTableData: [],
-      productTotal: 0
+      productTotal: 0,
+      addShopIndex: 0,
+      dialogShopVisible: false,
+      dialogGoodVisible: false
     }
   },
   created() {
-
+    this.doctorId = parseInt(this.$route.query.id)
+    this.editType = this.$route.query.type || 'edit'
+    console.log('editType', this.editType)
+    this.initForm(this.editType)
+    console.log(this.editType)
   },
   methods: {
-    // 获取供应商列表
-    async findShopList() {
-      this.dialogTableVisible = true
-      const res = await fetchFindShop(this.shopForm)
-      this.shopTableData = res.data.results
-      this.shopTotal = res.data.totalRecord
+    initForm(type) {
+      if (type === 'add') {
+        this.formList.push(defaultForm)
+        console.log('formList', this.formList)
+      } else {
+        console.log('edit')
+      }
+    },
+    handleShopDialogVisible(index) {
+      // 显示选择供应商弹窗
+      this.addShopIndex = index
+      this.dialogShopVisible = true
     },
     // 选择供应商
     handleSelect(selection, row) {
@@ -298,13 +195,6 @@ export default {
       this.hiddenItem = true
       this.shopData = []
     },
-    // 商品列表
-    async productList() {
-      this.dialogProductVisible = true
-      const res = await fetchProductList(this.productForm)
-      this.productTableData = res.data.results
-      this.productTotal = res.data.totalRecord
-    },
     // 添加商品数据
     pushProduct() {
       this.productTable.push(this.rows)
@@ -316,6 +206,27 @@ export default {
     deleteProduct() {
       this.productTable = []
       this.hiddenProduct = true
+    },
+    handleShopConfirm(data) {
+      // 确认选择供应商
+      console.log('data', data)
+      this.formList[this.addShopIndex].shopData.push(data)
+      this.hiddenItem = false
+      this.handleShopCancel()
+    },
+    handleGoodConfirm(data) {
+      // 确认选择商品
+      console.log('data', data)
+    },
+    handleShopCancel() {
+      // 取消选择供应商
+      this.dialogShopVisible = false
+      this.$refs.shopDialog.visible = false
+    },
+    handleGoodCancel() {
+      // 取消编辑商品
+      this.dialogGoodVisible = false
+      this.$refs.goodDialog.visible = false
     }
   }
 }
@@ -323,6 +234,8 @@ export default {
 
 <style>
 .delete_label{
-  margin-left: 50px;
+  position: absolute;
+  right: 2%;
+  top: 20px;
 }
 </style>

src/views/member/coupon/list.vue

@@ -1,101 +1,94 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="activeName" type="border-card">
-      <el-tab-pane label="超级会员专属优惠券" name="first" />
-      <el-tab-pane label="专属优惠券配置" name="second" />
-      <template v-if="activeName === 'first'">
-        <div class="filter-container">
-          <div class="filter-control">
-            <span>优惠券类型:</span>
-            <el-select v-model="listQuery.couponType" style="width:120px;" clearable @change="getList">
-              <el-option value="" label="请选择" />
-              <el-option :value="0" label="活动券" />
-              <el-option :value="1" label="品类券" />
-              <el-option :value="1" label="店铺券" />
-            </el-select>
-          </div>
-          <div class="filter-control">
-            <span>优惠状态:</span>
-            <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
-              <el-option value="" label="请选择" />
-              <el-option :value="0" label="未生效" />
-              <el-option :value="1" label="已生效" />
-              <el-option :value="2" label="已关闭" />
-              <el-option :value="3" label="已失效" />
-            </el-select>
-          </div>
-          <div class="filter-control">
-            <span>优惠月份:</span>
-            <el-date-picker
-              v-model="time"
-              type="monthrange"
-              unlink-panels
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              value-format="yyyy-MM"
-              :picker-options="pickerOptions"
-              @change="getList"
-            />
-          </div>
-          <div class="filter-control">
-            <el-button type="primary" @click="getList">查询</el-button>
-          </div>
-        </div>
-        <el-table :data="tableData" height="550" border style="width: 100%">
-          <el-table-column label="优惠月份" align="center" width="180">
-            <template slot-scope="{ row }">
-              {{ row.useTime }} -- {{ row.endTime }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="coupon" label="优惠券" align="left" width="750">
-            <template slot-scope="{ row }">
-              <p v-for="(item,index) in row.couponList" :key="index">
-                优惠券
-                {{ index + 1 }} : <b>{{ item.couponType === 0 ? '活动券' : item.couponType === 1 ? '品类券' : '店铺券' }}</b>
-                ￥{{ item.couponAmount }}，满{{ item.touchPrice }}可用
-                {{ item.productType ? item.productType === '1' ? '，全商城商品通用' : '，仅可购买指定商品' : '' }}
-                {{ item.categoryType ? item.categoryType === '1' ? '，仅可购买产品类商品' : '，仅可购买仪器类商品' : '' }}
-                <span v-if="item.couponType === 3">，仅可购买店铺“{{ item.shopName }}”的商品</span>
-              </p>
-            </template>
-          </el-table-column>
-          <el-table-column prop="status" label="优惠状态" align="center" width="80">
-            <template slot-scope="{ row }">
-              <span v-if="row.status === '0'" class="el-span-zero">
-                未生效
-              </span>
-              <span v-else-if="row.status === '1'" class="el-span-one">
-                已生效
-              </span>
-              <span v-else-if="row.status === '2'" class="el-span-two">
-                已关闭
-              </span>
-              <span v-else class="el-span-three">
-                已失效
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template slot-scope="{ row }">
-              <el-button type="primary" size="mini">编辑</el-button>
-              <el-button type="danger" size="mini" :hidden="row.status !== 2 ? false : true" @click="handleCloseCoupon(row)">关闭</el-button>
-              <el-button type="primary" size="mini" :hidden="row.status === 2 ? false : true" @click="handleOpenCoupon(row)">开启</el-button>
-              <el-button type="danger" size="mini" @click="handleDeleteCoupon(row)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <!-- 页码 -->
-        <pagination
-          :total="total"
-          :page-sizes="[20, 30, 50, 100]"
-          :page-size="20"
-          :page.sync="listQuery.pageNum"
-          :limit.sync="listQuery.pageSize"
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>优惠券类型:</span>
+        <el-select v-model="listQuery.couponType" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="活动券" />
+          <el-option :value="1" label="品类券" />
+          <el-option :value="1" label="店铺券" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>优惠状态:</span>
+        <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="未生效" />
+          <el-option :value="1" label="已生效" />
+          <el-option :value="2" label="已关闭" />
+          <el-option :value="3" label="已失效" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>优惠月份:</span>
+        <el-date-picker
+          v-model="time"
+          type="monthrange"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM"
+          :picker-options="pickerOptions"
+          @change="getList"
         />
-      </template>
-      <template v-else>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList">查询</el-button>
+        <el-button type="primary" @click="handleEdit('add')">专属优惠券配置</el-button>
+      </div>
+    </div>
+    <el-table :data="tableData" height="550" border style="width: 100%">
+      <el-table-column label="优惠月份" align="center" width="180">
+        <template slot-scope="{ row }">
+          {{ row.useTime }} -- {{ row.endTime }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="coupon" label="优惠券" align="left" width="750">
+        <template slot-scope="{ row }">
+          <p v-for="(item,index) in row.couponList" :key="index">
+            优惠券
+            {{ index + 1 }} : <b>{{ item.couponType === 0 ? '活动券' : item.couponType === 1 ? '品类券' : '店铺券' }}</b>
+            ￥{{ item.couponAmount }}，满{{ item.touchPrice }}可用
+            {{ item.productType ? item.productType === '1' ? '，全商城商品通用' : '，仅可购买指定商品' : '' }}
+            {{ item.categoryType ? item.categoryType === '1' ? '，仅可购买产品类商品' : '，仅可购买仪器类商品' : '' }}
+            <span v-if="item.couponType === 3">，仅可购买店铺“{{ item.shopName }}”的商品</span>
+          </p>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="优惠状态" align="center" width="80">
+        <template slot-scope="{ row }">
+          <span :class="{
+            purple: row.status == '0',
+            green: row.status == '1',
+            red: row.status == '2',
+            orange: row.status == '3',
+          }"
+          >
+            {{ row.status | statusFilters }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" @click="handleEdit('edit',row.id)">编辑</el-button>
+          <el-button type="danger" size="mini" :hidden="row.status !== 2 ? false : true" @click="handleCloseCoupon(row)">关闭</el-button>
+          <el-button type="primary" size="mini" :hidden="row.status === 2 ? false : true" @click="handleOpenCoupon(row)">开启</el-button>
+          <el-button type="danger" size="mini" @click="handleDeleteCoupon(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20, 30, 50, 100]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+    />
+    <!-- <template v-else>
         <div class="coupon-content">
           <div class="coupon-title">
             <el-button type="primary" @click="handleAdd">新增优惠券</el-button>
@@ -116,21 +109,32 @@
             <el-button type="primary" @click="handleSubmit">保存</el-button>
           </div>
         </div>
-      </template>
-    </el-tabs>
+      </template> -->
   </div>
 </template>
 <script>
 import { fetchCouponList, fetchCloseCoupon, fetchOpenCoupon, fetchDeleteCoupon } from '@/api/member/member'
-
 const defaultCoupon = {
   type: '',
   money: '',
   total: ''
 }
 export default {
-
   name: 'MemberCoupon',
+  filters: {
+    statusFilters(value) {
+      console.log('value', value)
+      // 处理状态显示
+      const map = {
+        '0': '未生效',
+        '1': '已生效',
+        '2': '已关闭',
+        '3': '已失效'
+      }
+      return map[value]
+    }
+
+  },
   data() {
     const pickerOptions = {
       shortcuts: [
@@ -269,6 +273,10 @@ export default {
         })
       })
     },
+    handleEdit(type, id) {
+      // 跳转编辑页
+      this.$router.push({ path: '/member/coupon/edit', query: { type: type, id: id }})
+    },
     handleAdd() {
       // 新增优惠券
       this.couponList.push(defaultCoupon)
@@ -286,16 +294,16 @@ export default {
 </script>
 
 <style scoped>
-.el-span-zero {
+.purple {
   color: #800080;
 }
-.el-span-one {
+.green {
   color: #00CC66;
 }
-.el-span-two {
+.red {
   color: red;
 }
-.el-span-three {
+.orange {
   color: #FF6600;
 }
 </style>

src/views/member/meal/form.vue

@@ -1,46 +1,34 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <el-form :model="form" label-width="200px">
+    <div class="club-container" style="width: 100%;height: 600px;padding-top: 40px;">
+      <div class="filter-container">
         <div class="filter-control">
-          <div>
-            <label class="label_width">套餐1:</label>
-            <span>12个月超级会员，售价: </span>
-            <el-input v-model="form.price1" type="text" size="mini" style="width:150px">
-              <template slot="append">元</template>
-            </el-input>
-          </div>
-        </div><br>
-        <div class="filter-control">
-          <div>
-            <label class="label_width">套餐2:</label>
-            <span>3个月超级会员，售价</span>
-            <el-input v-model="form.price2" type="text" size="mini" style="width:150px">
-              <template slot="append">元</template>
-            </el-input>
-          </div>
-        </div><br>
-        <div class="filter-control">
-          <div>
-            <label class="label_width">采美豆兑换套餐:</label>
-            <span>采美豆兑换超会员套餐比例为</span>
-            <el-input v-model="form.proportion" size="mini" style="width:150px">
-              <template slot="append">:1</template>
-            </el-input>
-          </div>
+          <el-form :model="form" label-width="120px">
+            <el-form-item label="套餐1:">
+              <span>12个月超级会员，售价</span>
+              <el-input v-model="form.price1" style="width: 150px">
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="套餐2:">
+              <span>3个月超级会员，售价</span>
+              <el-input v-model="form.price1" style="width: 150px">
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="采美豆兑换套餐:">
+              <span>采美豆兑换超会员套餐比例为</span>
+              <el-input v-model="form.proportion" style="width: 150px">
+                <template slot="append">:1</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="updateMeal">保存</el-button>
+            </el-form-item>
+          </el-form>
         </div>
-      </el-form>
-      <div>
-        <el-button type="primary" size="mini" @click="updateMeal()">保存</el-button>
       </div>
     </div>
-    <el-dialog title="提示" :visible.sync="dialogTableVisible" width="50%">
-      <span>超级会员套餐以修改完成</span>
-      <div slot="footer">
-        <el-button type="primary" @click="renovate()">确定</el-button>
-        <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -63,8 +51,8 @@ export default {
     this.getList()
   },
   methods: {
-    // 获取超级会员套餐配置
     async getList() {
+      // 获取超级会员套餐配置
       const res = await fetchFindPackage()
       this.form.price1 = res.data.price1
       this.form.price2 = res.data.price2
@@ -72,15 +60,12 @@ export default {
     },
     // 修改超级会员套餐配置
     async updateMeal() {
-      const res = await updatePrice(this.form)
-      if (res.code === 1) {
-        this.dialogTableVisible = true
+      try {
+        await updatePrice(this.form)
+        this.$message.success('保存超级会员套餐成功')
+      } catch (error) {
+        console.log(error)
       }
-    },
-    // 提示信息确认刷新数据
-    renovate() {
-      this.dialogTableVisible = false
-      this.getList()
     }
   }
 }

src/views/member/product/components/pro-edit.vue

@@ -0,0 +1,153 @@
+<template>
+  <el-dialog
+    title="编辑商品"
+    :visible.sync="visible"
+    width="1100px"
+    :close-on-click-modal="false"
+    :show-close="false"
+  >
+    <div class="edit-container">
+      <el-form ref="goodsFrom" :model="product" label-width="150px">
+        <el-form-item label="商品ID:" prop="product" style="margin-bottom: 10px;">
+          <el-input v-model="product.productId" :disabled="true" style="width: 400px;" />
+        </el-form-item>
+        <el-form-item label="商品名称:" prop="product" style="margin-bottom: 10px;">
+          <el-input v-model="product.productName" :disabled="true" style="width: 400px;" />
+        </el-form-item>
+        <el-form-item label="供应商:" prop="product" style="margin-bottom: 10px;">
+          <el-input v-model="product.shopName" :disabled="true" style="width: 400px;" />
+        </el-form-item>
+        <el-form-item label="是否含税:" prop="product" style="margin-bottom: 10px;">
+          <el-input v-model="ncludedTaxtEXT" :disabled="true" style="width: 400px;" />
+        </el-form-item>
+        <el-form-item label="机构税率:" prop="product" style="margin-bottom: 10px;">
+          <el-input v-model="product.taxPoint" :disabled="true" style="width: 400px;" />
+        </el-form-item>
+        <el-form-item label="供应商税率:" prop="product" style="margin-bottom: 10px;">
+          <el-input v-model="product.supplierTaxPoint" :disabled="true" style="width: 400px;" />
+        </el-form-item>
+        <el-form-item label="排序:" style="margin-bottom: 10px;">
+          <el-input v-model="product.sort" style="width: 400px;" />
+        </el-form-item>
+        <el-form-item label="优惠状态:" style="margin-bottom: 10px;">
+          <el-select v-model="product.status" style="width:120px;" clearable>
+            <el-option :value="0" label="已上架" />
+            <el-option :value="1" label="已下架" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品信息:" prop="product">
+          <el-table row-key="title" :data="product.skus" border>
+            <el-table-column label="商品规格" prop="title" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.unit }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="机构价" prop="name" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.price | NumFormat }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="成本类型" prop="name" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.costCheckFlag === 1 ? '固定成本' : '比例成本' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="成本价/成本比例" prop="name" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.costCheckFlag === 1 ? row.costPrice : row.costProportional }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="会员折扣（%）" prop="name" align="center">
+              <template slot-scope="{row}">
+                <el-input v-model="row.discount" :disabled="row.discountPrice ? true : false">
+                  <template slot="append">%</template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="会员价" prop="name" align="center">
+              <template slot-scope="{row}">
+                <el-input v-model="row.discountPrice" :disabled="row.discount ? true : false" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer">
+      <el-button @click="handleCanle">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { editSvipProduct } from '@/api/member/member'
+
+export default {
+  name: 'ProEdit',
+  filters: {
+    NumFormat(value) {
+      // 处理金额
+      return Number(value).toFixed(2)
+    }
+  },
+  props: {
+    proId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      product: {},
+      productRadio: null
+    }
+  },
+  computed: {
+    ncludedTaxtEXT() {
+      // 是否含税文案
+      const taxMap = {
+        '0': '不含税',
+        '1': '含税',
+        '2': '未知'
+      }
+      const typrMap = {
+        '1': '开增值税专用发票',
+        '2': '开增值税普通发票',
+        '3': ''
+      }
+      let text = ''
+      if (typrMap) {
+        text = `${this.product.invoiceType ? typrMap[this.product.invoiceType] : '不能开票'}`
+      }
+      return `${taxMap[this.product.includedTax]}-${text}`
+    }
+  },
+  created() {
+    this.editSvipProduct(this.proId)
+  },
+  methods: {
+    async editSvipProduct(id) {
+      const res = await editSvipProduct(id)
+      this.product = res.data
+      this.visible = true
+    },
+    handleConfirm() {
+      // 确认选择商品
+      this.$emit('confirm', this.product)
+    },
+    handleCanle() {
+      // 取消弹窗
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .edit-container{
+    width: 100%;
+    height: 500px;
+    overflow-y: scroll;
+  }
+</style>

src/views/member/product/list.vue

@@ -68,7 +68,7 @@
           <el-table-column prop="price" label="机构价" align="center" />
           <el-table-column prop="discount" label="会员折扣" align="center">
             <template slot-scope="{ row }">
-              {{ row.priceType === 1 ? row.discount+'%' : '---' }} {{ row.priceType === 1 ? '%':'' }}
+              {{ row.priceType === 1 ? row.discount+'%' : '---' }}
             </template>
           </el-table-column>
           <el-table-column prop="discountPrice" label="会员价" align="center">
@@ -94,7 +94,7 @@
           <el-table-column prop="addTime" label="添加时间" align="center" width="100" />
           <el-table-column label="操作" align="center" width="180">
             <template slot-scope="{ row }">
-              <el-button type="primary" size="mini">编辑</el-button>
+              <el-button type="primary" size="mini" @click="handleEdit(row.id)">编辑</el-button>
               <el-button type="danger" size="mini" @click="handeleDelPro(row.id)">删除</el-button>
             </template>
           </el-table-column>
@@ -110,6 +110,8 @@
         />
         <!--  选择商品弹窗 -->
         <pro-dialog v-if="proDialogVisible" ref="proDialog" @confirm="handleAddProductConfirm" @cancel="handleCancel" />
+        <!-- 商品编辑弹窗 -->
+        <pro-edit v-if="proEditVisible" ref="proEdit" :pro-id="handleProId" @confirm="handleEditConfirm" @cancel="handleEditCancel" />
       </template>
       <template v-else>
         <div class="club-container" style="width: 100%;height: 650px;padding-top: 40px;">
@@ -149,10 +151,11 @@
 import { fetchFindProductList, updateSort, saveAdsImage, getAdsImage } from '@/api/member/member'
 import { delSvipProduct, saveSvipProduct } from '@/api/member/member'
 import UploadImage from '@/components/UploadImage'
-import ProDialog from './components/proDialog'
+import ProDialog from './components/pro-dialog'
+import ProEdit from './components/pro-edit'
 export default {
   name: 'MemberProduct',
-  components: { UploadImage, ProDialog },
+  components: { UploadImage, ProDialog, ProEdit },
   data() {
     return {
       activeName: 'first',
@@ -180,7 +183,9 @@ export default {
       total: 0,
       isLoading: true,
       tableData: [],
-      proDialogVisible: false
+      proDialogVisible: false,
+      proEditVisible: false,
+      handleProId: null
     }
   },
   computed: {
@@ -294,10 +299,10 @@ export default {
         console.log(error)
       }
     },
-    async handleAddProductConfirm(id) {
+    async handleAddProductConfirm(productId) {
       // 确认添加商品
       try {
-        await saveSvipProduct(id)
+        await saveSvipProduct({ productId: productId })
         this.$message.success('添加成功')
         this.handleCancel()
         this.getList()
@@ -309,6 +314,28 @@ export default {
       // 取消选择添加商品
       this.proDialogVisible = false
       this.$refs.proDialog.visible = false
+    },
+    handleEdit(id) {
+      // 编辑商品
+      this.handleProId = id
+      this.proEditVisible = true
+    },
+    handleEditCancel() {
+      // 取消编辑商品
+      this.proEditVisible = false
+      this.$refs.proEdit.visible = false
+    },
+    async handleEditConfirm(data) {
+      // 保存编辑商品
+      console.log('data', data)
+      try {
+        await saveSvipProduct(data)
+        this.$message.success('操作成功')
+        this.handleEditCancel()
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }