会员设置

package.json

@@ -58,6 +58,7 @@
     "nprogress": "0.2.0",
     "obj-modal": "^1.2.2",
     "obj-table-plus": "^2.4.0",
+    "qrcodejs2": "^0.0.2",
     "qs": "^6.13.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

src/api/modules/marketing.js

@@ -16,6 +16,31 @@ export const marketing = {
       data: data,
     });
   },
+  //会员开通情况
+  getEffective: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberPackageUnitStatus/getEffective`,
+      method: "post",
+      data,
+    });
+  },
+  //有效套餐
+  memberPackageList: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberPackage/list`,
+      method: "post",
+      data,
+    });
+  },
+  //下单
+  placeOrder: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberPackageUnitOrder/placeOrder`,
+      method: "post",
+      data,
+    });
+  },
+  //会员用户
   marketingUserPage: (data) => {
     return $http.request({
       url: `/merchant-api/memberUnitUser/page`,
@@ -23,6 +48,27 @@ export const marketing = {
       params: data,
     });
   },
+  memberUnitUserDetail: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberUnitUser/detail`,
+      method: "post",
+      data,
+    });
+  },
+  changeMemberPoints: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberUnitUser/changeMemberPoints`,
+      method: "post",
+      data,
+    });
+  },
+  changeGrowthValue: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberUnitUser/changeGrowthValue`,
+      method: "post",
+      data,
+    });
+  },
   //积分列表
   integralList: (data) => {
     return $http.request({
@@ -31,4 +77,25 @@ export const marketing = {
       data,
     });
   },
+  reverseEnable: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberUnitMemberTask/reverseEnable`,
+      method: "post",
+      data,
+    });
+  },
+  integralTop: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberUnitMemberTask/top`,
+      method: "post",
+      data,
+    });
+  },
+  settingTaskDetail: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberUnitMemberTask/settingTaskDetail`,
+      method: "post",
+      data,
+    });
+  },
 };

src/utils/httpRequest.js

@@ -156,7 +156,7 @@ http.interceptors.response.use(
       router.push({ name: "login" });
       return Promise.resolve(response);
     } else if (response.data && response.data.code !=200 ) {
-      Message.closeAll();
+      // Message.closeAll();
       Message({
         message: response.data.msg||response.data.message,
         type: "error"
@@ -166,7 +166,7 @@ http.interceptors.response.use(
       //请求成功的情况
       //如果是开发模式下，都要弹出
       if (process.env.NODE_ENV !== "production") {
-        Message.closeAll();
+        // Message.closeAll();
         Message({
           message: response.data.msg||response.data.message,
           type: "success"
@@ -175,9 +175,9 @@ http.interceptors.response.use(
       // 生产环境下限制性弹出
       else {
         if (response.data.msg != "success" && response.data.msg != "查询成功" && Object.prototype.toString.call(response.data) === '[object Object]') {
-          Message.closeAll();
+          // Message.closeAll();
           Message({
-            message: response.data.msg,
+            message: response.data.msg||response.data.message,
             type: "success"
           });
         }

src/views/modules/marketing/level/index.vue

@@ -12,39 +12,36 @@
         24年3月，本商铺修改VIP2所需成长值为700，并新增会员生日优惠卷2；修改提交后,该用户会员等级保持VIP2不变且享有会员优惠卷1和会员优惠卷2；
       </div>
     </div>
-    <div>
+    <div v-if="storeList.length > 1">
-      <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="单位类型：">
+        <el-form-item label="摊铺：">
-          <el-select
+          <el-select v-model="formInline.shopId" placeholder="请选择摊铺：：">
-            v-model="formInline.unitType"
-            placeholder="请选择单位类型："
-          >
             <el-option
-              v-for="item in [
+              v-for="item in storeList"
-                { label: '市场', value: '1' },
+              :key="item.shopId"
-                { label: '摊主', value: '2' },
+              :label="item.shopName"
-                { label: '云店', value: '3' },
+              :value="item.shopId"
-              ]"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
             ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getData" type="primary">查询</el-button>
+          <el-button @click="getList" type="primary">查询</el-button>
-          <el-button @click="getData" type="primary">导出</el-button>
         </el-form-item>
-      </el-form> -->
+      </el-form>
     </div>
     <div class="tipsLevel">
       <div>
         <span style="margin-right: 30px">全部等级({{ list.length }})</span
-        ><el-button @click="add(null)" type="primary">+新增套餐</el-button>
+        ><el-button @click="add" type="primary">+新增套餐</el-button>
       </div>
       <div>
-        <!-- <span style="margin-right: 30px">会员快要到期了</span>
+        <span v-if="!form.effective" style="margin-right: 30px"
-        <el-button @click="add(null)" type="primary">购买工具</el-button> -->
+          >未开通会员</span
+        >
+        <span v-if="form.effective" style="margin-right: 30px"
+          >会员到期时间 {{ form.effectiveEndTime }}</span
+        >
+        <el-button @click="addSetMenu" type="primary">购买工具</el-button>
       </div>
     </div>
     <el-table :data="list" :border="true" style="width: 100%">
@@ -109,24 +106,29 @@
     </el-table>
     <!-- 添加 -->
     <addOrUpdate @getList="getList" ref="addOrUpdate"></addOrUpdate>
+    <!-- 添加套餐 -->
+    <set-menu @getList="getList" ref="setMenu"></set-menu>
   </div>
 </template>
 
 <script>
+import setMenu from "./popup/set-menu.vue";
 import addOrUpdate from "./popup/add-or-update.vue";
 import { mapState } from "vuex";
 export default {
   components: {
     addOrUpdate,
+    setMenu,
   },
   data() {
     return {
       list: [],
       formInline: {
-        unitType: "1",
+        unitType: "",
         marketId: "",
         shopId: "",
       },
+      form: {},
     };
   },
   created() {
@@ -151,59 +153,18 @@ export default {
     // },
     getList() {
       this.$api.marketing.marketingLevelPage(this.formInline).then((res) => {
-        this.list = res.data.data;
+        this.list = res.data.data ? res.data.data : [];
+      });
+      this.$api.marketing.getEffective(this.formInline).then((res) => {
+        console.log(res);
+        this.form = res.data.data;
       });
     },
     add() {
-      // this.$api.marketing
+      this.$refs.addOrUpdate.toggle().add(this.formInline);
-      //   .addMarketingLevel({
+    },
-      //     marketId: this.marketId,
+    addSetMenu() {
-      //     unitType: this.formInline.unitType,
+      this.$refs.setMenu.toggle().add(this.formInline);
-      //     levelList: [
-      //       {
-      //         levelName: "青铜级",
-      //         requiredGrowthValue: 0,
-      //         growthValueUpperLimit: 99,
-      //         enableMemberDiscount: true,
-      //         enablePointsRedemption: true,
-      //         enableBirthdayCoupons: true,
-      //         enableBirthdayReward: true,
-      //         discountRate: "9",
-      //         rewardEffectiveTimeType: 1,
-      //         memberLevelCouponsList: [
-      //           {
-      //             couponsName: "生日优惠券",
-      //             couponsThreshold: "10",
-      //             couponsMinus: 8,
-      //             couponsEffectiveTimeType: 2,
-      //           },
-      //         ],
-      //       },
-      //       {
-      //         levelName: "白银",
-      //         requiredGrowthValue: 100,
-      //         growthValueUpperLimit: 999999999,
-      //         enableMemberDiscount: true,
-      //         enablePointsRedemption: true,
-      //         enableBirthdayCoupons: true,
-      //         enableBirthdayReward: true,
-      //         discountRate: "8",
-      //         rewardEffectiveTimeType: 1,
-      //         memberLevelCouponsList: [
-      //           {
-      //             couponsName: "生日优惠券",
-      //             couponsThreshold: "20",
-      //             couponsMinus: 10,
-      //             couponsEffectiveTimeType: 2,
-      //           },
-      //         ],
-      //       },
-      //     ],
-      //   })
-      //   .then((res) => {
-      //     console.log(res);
-      //   });
-      this.$refs.addOrUpdate.toggle().add();
     },
     confirmEvent() {},
     cancelEvent() {},

src/views/modules/marketing/level/popup/add-coupon.vue

@@ -63,7 +63,7 @@ export default {
           } else {
             console.log("111");
             this.modalData = {
-              couponsName: "",
+              couponsName: "生日优惠卷",
               couponsThreshold: 0,
               couponsMinus: 0,
               couponsEffectiveTimeType: "1",

src/views/modules/marketing/level/popup/add-or-update.vue

@@ -28,7 +28,6 @@
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
 import addCoupon from "./add-coupon.vue";
 import { debounce, cloneDeep } from "lodash";
 export default {
@@ -111,8 +110,14 @@ export default {
         this.init(cloneDeep(e.row));
       }
       return {
-        add: () => {
+        add: (row) => {
-          this.modalData = {};
+          console.log(row);
+
+          this.modalData = {
+            marketId: row.marketId,
+            shopId: row.shopId,
+            unitType: row.unitType,
+          };
           this.queryTableData();
           this.isAdd = true;
         },
@@ -493,12 +498,6 @@ export default {
           label: this.isAdd ? "确认添加" : "确认修改",
           type: "primary",
           handle: debounce(() => {
-            this.modalData.marketId = this.marketId;
-            this.modalData.shopId = this.shopId;
-            this.modalData.unitType = JSON.parse(
-              sessionStorage.getItem("userInfo")
-            ).unitType;
-            console.log(this.modalData);
             this.$refs.modalForm.validate((valid) => {
               if (valid) {
                 this.$api.marketing
@@ -513,13 +512,6 @@ export default {
         },
       ];
     },
-    ...mapState("userData", [
-      "isMerchant",
-      "marketList",
-      "storeList",
-      "marketId",
-      "shopId",
-    ]),
   },
   asyncComputed: {},
 };

src/views/modules/marketing/level/popup/set-menu.vue

@@ -0,0 +1,245 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalCols="modalCols"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <template slot="dialog__after">
+        <el-form
+          label-width="150px"
+          :rules="rules"
+          :model="modalData"
+          ref="modalForm"
+        >
+          <el-form-item prop="packageId" label="选择套餐:">
+            <div class="card">
+              <div v-for="item in PackageList" :key="item.id">
+                <el-card class="box-card">
+                  <div style="font-size: 20px; font-weight: 600">
+                    {{ item.packageName }}
+                  </div>
+                  <div style="margin-top: 20px; font-size: 16px">
+                    ￥<span style="font-size: 20px; font-weight: 600">{{
+                      item.packagePrice
+                    }}</span
+                    >/{{ item.packageEffectiveTimeQuantity
+                    }}{{ item.packageEffectiveTimeUnit == 1 ? "年" : "月" }}
+                  </div>
+                </el-card>
+                <el-radio
+                  @change="changePackage"
+                  style="margin-bottom: 20px"
+                  v-model="modalData.packageId"
+                  :label="item.id"
+                  border
+                  >请选择</el-radio
+                >
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item prop="packageQuantity" label="购买数量:">
+            <el-input-number
+              style="width: 200px"
+              controls-position="right"
+              :precision="0"
+              v-model="modalData.packageQuantity"
+              :min="0"
+              label="请输入"
+            ></el-input-number>
+          </el-form-item>
+        </el-form>
+        <el-dialog
+          title="请扫描二维码"
+          :visible.sync="dialogVisible"
+          width="500px"
+          append-to-body
+          :before-close="handleClose"
+        >
+          <div v-if="isShow" class="qrcodeName">
+            <div class="qrcode" ref="qrCodeUrl"></div>
+            <div style="margin-top: 20px">请使用支付宝扫一扫，完成支付</div>
+          </div>
+        </el-dialog>
+      </template>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import QRCode from "qrcodejs2";
+import { debounce, cloneDeep } from "lodash";
+import { Divider } from "element-ui";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      dialogVisible: false,
+      isShow: false,
+      //表格属性
+      modalConfig: {
+        title: "添加优惠卷",
+        show: false,
+        width: "60%",
+        fullscreen: true,
+      },
+      modalData: {},
+      PackageList: [],
+      rules: {
+        packageId: [
+          {
+            required: true,
+            message: "请选择套餐",
+            trigger: ["blur", "change"],
+          },
+        ],
+        packageQuantity: [
+          {
+            required: true,
+            message: "请输入购买数量",
+            trigger: ["blur", "change"],
+          },
+        ],
+      },
+      userData: {},
+      qrcode: "",
+    };
+  },
+  watch: {
+    "modalConfig.show"(newVal) {
+      if (!newVal) {
+        //关闭弹窗清空校验
+        setTimeout(() => {
+          this.$refs.modalForm.resetFields();
+          this.$emit("getList");
+        });
+      }
+    },
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+        this.$api.marketing
+          .memberPackageList({ packageEnable: true })
+          .then((res) => {
+            console.log(res);
+            this.PackageList = res.data.data;
+            // this.modalData = res.data.data;
+          });
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: (row) => {
+          this.userData = {
+            marketId: row.marketId,
+            shopId: row.shopId,
+            unitType: row.unitType,
+            userId: JSON.parse(sessionStorage.getItem("userInfo")).userId,
+          };
+          this.modalData = {
+            packageId: "",
+            packageQuantity: "1",
+          };
+          this.modalConfig.title = "会员营销工具套餐";
+          this.isAdd = true;
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {},
+    changePackage() {
+      this.$refs.modalForm.validate();
+      // console.log(this.modalData.packageId);
+    },
+    creatQrCode(data) {
+      this.$nextTick(() => {
+        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
+          text: data.qr_pay_url, // 转换为二维码的内容
+          width: 300,
+          height: 300,
+          colorDark: "#000000",
+          colorLight: "#ffffff",
+          correctLevel: QRCode.CorrectLevel.H,
+        });
+      });
+    },
+    handleClose(done) {
+      done();
+      this.isShow = false;
+      this.qrcode.clear();
+      console.log("123");
+    },
+  },
+
+  computed: {
+    modalCols() {
+      return [];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: "确定购买",
+          type: "primary",
+          loading: this.isLoading,
+          submit: true,
+          handle: () => {
+            console.log(this.modalData, this.userData);
+            this.$refs.modalForm.validate((valid) => {
+              if (valid) {
+                this.$api.marketing
+                  .placeOrder({ ...this.userData, ...this.modalData })
+                  .then((res) => {
+                    console.log(res);
+                    this.dialogVisible = true;
+                    this.isShow = true;
+                    this.creatQrCode(res.data.data);
+                  });
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+.card {
+  width: 100%;
+  display: flex;
+  text-align: center;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+.box-card {
+  margin-bottom: 20px;
+  width: 300px;
+  text-align: center;
+}
+.qrcodeName {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+</style>

src/views/modules/marketing/points-setting/index.vue

@@ -4,7 +4,7 @@
       此页面数据在每日0点提交并生效;请勿频繁操作，以免影响用户体验。
     </div>
     <div class="tipsLevel">积分/成长值任务（9）</div>
-    <div class="tipsLevel" v-if="storeList.length > 0">
+    <div class="tipsLevel" v-if="storeList.length > 1">
       <el-select v-model="formInline.shopId" placeholder="请选择">
         <el-option
           v-for="item in storeList"
@@ -19,49 +19,64 @@
       >
     </div>
     <el-table :data="list" :border="true" style="width: 100%">
+      <el-table-column width="100" align="center" label="类型" prop="unitType">
+        <template v-slot="scope">
+          <span>{{ getUnitType(scope.row.unitType) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="任务名称" prop="taskName" />
-      <el-table-column align="center" label="任务描述" prop="taskConfigDetail" />
       <el-table-column
+        align="center"
+        label="任务描述"
+        prop="taskConfigDetail"
+      />
+      <el-table-column
+        width="100"
         align="center"
         label="排序"
         prop="taskSort"
       />
       <el-table-column
+        width="140"
         align="center"
         label="状态"
-        prop="packageEffectiveTimeUnit"
+        prop="taskEnable"
       >
         <template v-slot="scope">
-          <span>{{
+          <el-switch
-            scope.row.packageEffectiveTimeUnit == 1 ? "年" : "月"
+            @change="changeState(scope.row)"
-          }}</span>
+            v-model="scope.row.taskEnable"
+          >
+          </el-switch>
         </template>
       </el-table-column>
       <el-table-column align="center" label="操作" fixed="right" width="240">
         <template v-slot="scope">
-          <el-button @click="add(scope.row)" type="primary">编辑</el-button>
+          <el-button
-          <el-button @click="add(scope.row)" type="primary">转移</el-button>
+            v-show="scope.$index != 0"
-          <el-popconfirm
+            size="mini"
-            confirm-button-text="确定"
+            @click="addTop(scope.row)"
-            cancel-button-text="取消"
+            type="primary"
-            icon-color="#626AEF"
+            >置顶</el-button
-            title="确定删除吗?"
+          >
-            @confirm="confirmEvent(scope.row)"
+          <el-button size="mini" @click="addConfig(scope.row)" type="primary"
-            @cancel="cancelEvent"
+            >配置积分</el-button
           >
-            <template #reference>
-              <el-button type="danger">删除</el-button>
-            </template>
-          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
+    <!-- 配置积分 -->
+    <addOrUpdate @getList="getList" ref="addOrUpdate"></addOrUpdate>
   </div>
 </template>
 
 <script>
+import addOrUpdate from "./popup/add-or-update.vue";
 import { mapState } from "vuex";
 export default {
+  components: {
+    addOrUpdate,
+  },
   data() {
     return {
       list: [],
@@ -100,6 +115,85 @@ export default {
     add() {},
     confirmEvent() {},
     cancelEvent() {},
+    getUnitType(type) {
+      if (type == 1) {
+        return "市场";
+      } else if (type == 2) {
+        return "摊主";
+      } else if (type == 3) {
+        return "云店";
+      }
+    },
+    changeState(e) {
+      if (e.taskEnable) {
+        this.$confirm("是否要开启此任务, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.$api.marketing
+              .reverseEnable({
+                id: e.id,
+              })
+              .then((res) => {
+                this.getList();
+              })
+              .catch(() => {
+                this.getList();
+              });
+          })
+          .catch(() => {
+            this.getList();
+          });
+      } else {
+        this.$confirm("是否要关闭此任务, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.$api.marketing
+              .reverseEnable({
+                id: e.id,
+              })
+              .then((res) => {
+                this.getList();
+              })
+              .catch((err) => {
+                this.getList();
+              });
+          })
+          .catch(() => {
+            this.getList();
+          });
+      }
+    },
+    addTop(e) {
+      this.$confirm("是否要置顶, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$api.marketing
+            .integralTop({
+              id: e.id,
+            })
+            .then((res) => {
+              this.getList();
+            })
+            .catch(() => {
+              this.getList();
+            });
+        })
+        .catch(() => {
+          this.getList();
+        });
+    },
+    addConfig(e) {
+      this.$refs.addOrUpdate.toggle(e).add();
+    },
   },
   computed: {
     ...mapState("userData", [

src/views/modules/marketing/points-setting/popup/add-or-update.vue

@@ -0,0 +1,276 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalCols="modalCols"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <template slot="dialog__after">
+        <el-form
+          label-width="150px"
+          :rules="rules"
+          :model="modalData"
+          ref="modalForm"
+        >
+          <div style="font-size: 18px; font-weight: 600">每日积分设置</div>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="连续签到1天" prop="memberPoints">
+                <el-input-number
+                  style="width: 150px"
+                  controls-position="right"
+                  :precision="0"
+                  v-model="modalData.memberPoints"
+                  :min="0"
+                  label="请输入"
+                ></el-input-number> </el-form-item
+            ></el-col>
+            <el-col :span="6">
+              <el-form-item label="连续签到2天" prop="memberPoints">
+                <el-input-number
+                  style="width: 150px"
+                  controls-position="right"
+                  :precision="0"
+                  v-model="modalData.memberPoints"
+                  :min="0"
+                  label="请输入"
+                ></el-input-number> </el-form-item
+            ></el-col>
+            <el-col :span="6">
+              <el-form-item label="连续签到3天" prop="memberPoints">
+                <el-input-number
+                  style="width: 150px"
+                  controls-position="right"
+                  :precision="0"
+                  v-model="modalData.memberPoints"
+                  :min="0"
+                  label="请输入"
+                ></el-input-number> </el-form-item
+            ></el-col>
+            <el-col :span="6">
+              <el-form-item label="连续签到4天" prop="memberPoints">
+                <el-input-number
+                  style="width: 150px"
+                  controls-position="right"
+                  :precision="0"
+                  v-model="modalData.memberPoints"
+                  :min="0"
+                  label="请输入"
+                ></el-input-number> </el-form-item
+            ></el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="连续签到5天" prop="memberPoints">
+                <el-input-number
+                  style="width: 150px"
+                  controls-position="right"
+                  :precision="0"
+                  v-model="modalData.memberPoints"
+                  :min="0"
+                  label="请输入"
+                ></el-input-number> </el-form-item
+            ></el-col>
+            <el-col :span="6">
+              <el-form-item label="连续签到6天" prop="memberPoints">
+                <el-input-number
+                  style="width: 150px"
+                  controls-position="right"
+                  :precision="0"
+                  v-model="modalData.memberPoints"
+                  :min="0"
+                  label="请输入"
+                ></el-input-number> </el-form-item
+            ></el-col>
+            <el-col :span="6">
+              <el-form-item label="连续签到7天" prop="memberPoints">
+                <el-input-number
+                  style="width: 150px"
+                  controls-position="right"
+                  :precision="0"
+                  v-model="modalData.memberPoints"
+                  :min="0"
+                  label="请输入"
+                ></el-input-number> </el-form-item
+            ></el-col>
+          </el-row>
+          <div style="font-size: 18px; font-weight: 600; margin-bottom: 20px">
+            购买商品积分/成长配置
+          </div>
+          <el-form-item
+            :label="`当前用户成长值为${form.growthValue},修改为`"
+            prop="growthValue"
+          >
+            <el-input-number
+              style="width: 150px"
+              controls-position="right"
+              :precision="0"
+              v-model="modalData.growthValue"
+              :min="0"
+              label="请输入"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item
+            style="margin-top: 20px"
+            label="请输入确定"
+            prop="determine"
+          >
+            <el-input
+              style="width: 150px"
+              v-model="modalData.determine"
+              label="请输入"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </template>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+import { Divider } from "element-ui";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "",
+        show: false,
+        width: "700px",
+        fullscreen: true,
+      },
+      modalData: {},
+      form: {},
+      rules: {
+        memberPoints: [
+          {
+            required: true,
+            message: "请输入积分",
+            trigger: "blur",
+          },
+        ],
+        growthValue: [
+          {
+            required: true,
+            message: "请输入成长值",
+            trigger: "blur",
+          },
+        ],
+        determine: [
+          {
+            required: true,
+            message: "请输入确定",
+            trigger: "blur",
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (value !== "确定") {
+                callback(new Error("请输入确定"));
+              } else {
+                callback();
+              }
+            },
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    "modalConfig.show"(newVal) {
+      if (!newVal) {
+        //关闭弹窗清空校验
+        setTimeout(() => {
+          this.$refs.modalForm.resetFields();
+        });
+      }
+    },
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: (row) => {
+          this.modalConfig.title = "积分设置";
+          this.isAdd = true;
+        },
+        update: () => {
+          this.modalConfig.title = "修改成长值";
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      console.log(row);
+      this.modalData = row;
+      this.form = {
+        memberPoints: row.memberPoints,
+        growthValue: row.growthValue,
+      };
+    },
+  },
+  computed: {
+    modalCols() {
+      return [];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: "确认",
+          type: "primary",
+          handle: () => {
+            console.log(this.modalData);
+            this.$refs.modalForm.validate((valid) => {
+              console.log(valid);
+              if (valid) {
+                if (this.isAdd) {
+                  this.$api.marketing
+                    .changeMemberPoints({
+                      id: this.modalData.id,
+                      memberPoints: this.modalData.memberPoints,
+                    })
+                    .then((res) => {
+                      this.$emit("queryList");
+                      this.toggle();
+                    });
+                }
+              } else {
+                this.$api.marketing
+                  .changeGrowthValue({
+                    id: this.modalData.id,
+                    growthValue: this.modalData.growthValue,
+                  })
+                  .then((res) => {
+                    this.$emit("queryList");
+                    this.toggle();
+                  });
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/modules/marketing/user/index.vue

@@ -11,100 +11,8 @@
       :enableAutoQuery="false"
     >
       <template slot="tableTop">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form :inline="true" :model="form" class="demo-form-inline">
-          <el-form-item label="用户ID">
+          <el-form-item v-if="storeList.length > 1" label="店铺">
-            <el-input
-              placeholder="请输入用户ID"
-              v-model="formInline.name"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="用户昵称">
-            <el-input
-              placeholder="请输入用户昵称"
-              v-model="formInline.name"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="会员等级">
-            <el-select
-              @change="getData"
-              v-model="formInline.marketId"
-              placeholder="请选择会员等级"
-            >
-              <el-option
-                v-for="item in marketList"
-                :key="item.marketId"
-                :label="item.marketName"
-                :value="item.marketId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="手机号">
-            <el-input
-              placeholder="请输入手机号"
-              v-model="formInline.name"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="会员状态">
-            <el-select
-              @change="getData"
-              v-model="formInline.marketId"
-              placeholder="请选择会员状态"
-            >
-              <el-option
-                v-for="item in marketList"
-                :key="item.marketId"
-                :label="item.marketName"
-                :value="item.marketId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="注册时间">
-            <el-date-picker
-              v-model="value1"
-              type="datetimerange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            >
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="生日">
-            <el-date-picker
-              v-model="value1"
-              type="datetimerange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            >
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="会员性别">
-            <el-select
-              @change="getData"
-              v-model="formInline.marketId"
-              placeholder="全部"
-            >
-              <el-option
-                v-for="item in marketList"
-                :key="item.marketId"
-                :label="item.marketName"
-                :value="item.marketId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <!-- <el-form-item v-if="marketList.length > 0" label="菜市场">
-            <el-select
-              @change="getData"
-              v-model="formInline.marketId"
-              placeholder="请选择菜市场"
-            >
-              <el-option
-                v-for="item in marketList"
-                :key="item.marketId"
-                :label="item.marketName"
-                :value="item.marketId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="marketList.length > 0" label="店铺">
             <el-select v-model="formInline.shopId" placeholder="请选择店铺">
               <el-option
                 v-for="item in storeList"
@@ -113,34 +21,89 @@
                 :value="item.shopId"
               ></el-option>
             </el-select>
+          </el-form-item>
+          <el-form-item label="用户ID">
+            <el-input
+              placeholder="请输入用户ID"
+              v-model="form.userId"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="用户昵称">
+            <el-input
+              placeholder="请输入用户昵称"
+              v-model="form.username"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="会员等级id">
+            <el-input
+              placeholder="请输入会员等级id"
+              v-model="form.levelId"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input
+              placeholder="请输入手机号"
+              v-model="form.mobile"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="会员状态">
+            <el-select v-model="form.isMemberUser" placeholder="请选择会员状态">
+              <el-option
+                v-for="item in [
+                  { label: '是', value: 1 },
+                  { label: '否', value: 0 },
+                ]"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="注册时间">
+            <el-date-picker
+              @change="changeTime"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              v-model="value1"
+              type="datetimerange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <!-- <el-form-item label="生日">
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
           </el-form-item> -->
           <el-form-item>
             <el-button type="primary" @click="$refs.oTable.reload()"
               >查询</el-button
             >
-            <el-button type="primary" @click="$refs.oTable.reload()"
+            <el-button type="primary" @click="Reset">重置</el-button>
-              >重置</el-button
-            >
           </el-form-item>
         </el-form>
       </template>
     </obj-table-plus>
-    <!-- 添加或编辑 -->
+    <!-- 修改积分或成长值 -->
-    <!-- <add-or-update
+    <modifyPoints
       @queryList="$refs.oTable.reload()"
-      ref="addOrUpdate"
+      ref="modifyPoints"
-    ></add-or-update> -->
+    ></modifyPoints>
     <!-- 查看详情 -->
-    <!-- <viewDetails ref="viewDetails"></viewDetails> -->
+    <viewDetails ref="viewDetails"></viewDetails>
   </div>
 </template>
 
 <script>
-// import AddOrUpdate from "./popup/add-or-update.vue";
+import modifyPoints from "./popup/modify-points.vue";
-// import viewDetails from "./popup/view-details.vue";
+import viewDetails from "./popup/view-details.vue";
 import { mapState } from "vuex";
 export default {
-  //   components: { AddOrUpdate },
+  components: { viewDetails, modifyPoints },
   data() {
     return {
       dataList: [],
@@ -149,6 +112,7 @@ export default {
         shopId: "",
         unitType: "",
       },
+      form: {},
       tableProp: {
         "auto-resize": true,
         border: true,
@@ -165,30 +129,31 @@ export default {
     this.formInline = {
       unitType: JSON.parse(sessionStorage.getItem("userInfo")).unitType,
       marketId: this.marketId,
-      shopId: "",
+      shopId: this.shopId,
     };
     this.$nextTick(() => {
       this.$refs.oTable.reload();
     });
   },
   methods: {
-    getData() {
+    // getData() {
-      this.$api.mer_admin
+    //   this.$api.mer_admin
-        .storeList({ marketId: this.formInline.marketId })
+    //     .storeList({ marketId: this.formInline.marketId })
-        .then((res) => {
+    //     .then((res) => {
-          this.storeList = res.data.data;
+    //       this.storeList = res.data.data;
-          //   this.formInline.shopId = res.data.data[0].shopId;
+    //         this.formInline.shopId = res.data.data[0].shopId;
-          this.$nextTick(() => {
+    //       this.$nextTick(() => {
-            this.$refs.oTable.reload();
+    //         this.$refs.oTable.reload();
-          });
+    //       });
-        });
+    //     });
-    },
+    // },
     queryList(pageNo, pageSize) {
       this.$api.marketing
         .marketingUserPage({
           pageNumber: pageNo,
           pageSize: pageSize,
           ...this.formInline,
+          ...this.form,
         })
         .then((res) => {
           console.log(res);
@@ -201,6 +166,21 @@ export default {
           this.$refs.oTable.complete(false);
         });
     },
+    Reset() {
+      this.form = {};
+      this.$nextTick(() => {
+        this.$refs.oTable.reload();
+      });
+    },
+    changeTime(val) {
+      if (val) {
+        this.form.startRegistrationTime = val[0];
+        this.form.endRegistrationTime = val[1];
+      } else {
+        this.form.startRegistrationTime = "";
+        this.form.endRegistrationTime = "";
+      }
+    },
   },
   computed: {
     tableCols() {
@@ -210,81 +190,134 @@ export default {
         {
           title: "用戶ID",
           align: "center",
-          field: "name",
+          field: "userId",
         },
         {
           title: "用戶头像",
           align: "center",
-          field: "publisher",
+          field: "headUrl",
           type: "jsx",
           render: ({ row }) => {
-            if (row.publisher === "MERCHANT") {
+            return (
-              return <span>店铺</span>;
+              <el-image
-            } else if (row.publisher == "PLATFORM") {
+                style="width: 60px; height: 60px"
-              return <span>平台</span>;
+                src={row.headUrl}
-            }
+                preview-src-list={[row.headUrl]}
+              ></el-image>
+            );
           },
         },
         {
           title: "用戶昵称",
           align: "center",
-          field: "name",
+          field: "username",
         },
         {
           title: "手机号",
           align: "center",
-          field: "name",
+          field: "mobile",
+        },
+        // {
+        //   title: "进行中订单数",
+        //   align: "center",
+        //   field: "name",
+        // },
+        // {
+        //   title: "完成订单数",
+        //   align: "center",
+        //   field: "name",
+        // },
+        // {
+        //   title: "消费金额（元）",
+        //   align: "center",
+        //   field: "name",
+        // },
+        {
+          title: "会员等级id",
+          align: "center",
+          field: "levelId",
         },
         {
-          title: "进行中订单数",
+          title: "会员等级名称",
           align: "center",
-          field: "name",
+          field: "levelName",
-        },
-        {
-          title: "完成订单数",
-          align: "center",
-          field: "name",
-        },
-        {
-          title: "消费金额（元）",
-          align: "center",
-          field: "name",
-        },
-        {
-          title: "会员等级",
-          align: "center",
-          field: "money",
         },
         {
           title: "生日",
           align: "center",
-          field: "discount",
+          field: "birthday",
         },
         {
           title: "注册时间",
           align: "center",
-          field: "minPrice",
+          field: "registrationTime",
-        },
-        {
-          title: "限量",
-          align: "center",
-          field: "limitedNum",
         },
+        // {
+        //   title: "限量",
+        //   align: "center",
+        //   field: "limitedNum",
+        // },
         {
           title: "操作",
           fixed: "right",
           type: "jsx",
           align: "center",
-          width: "140px",
+          width: "280px",
-          render: (row) => {
+          render: ({ row }) => {
-            let edit = () => {
+            let viewDetails = () => {
-              //   this.$refs.viewDetails.toggle(row).update();
+              this.$api.marketing
+                .memberUnitUserDetail({
+                  ...this.formInline,
+                  userId: row.userId,
+                })
+                .then((res) => {
+                  console.log(res);
+                  this.$refs.viewDetails.toggle(res.data.data).add();
+                });
+            };
+            let points = () => {
+              this.$api.marketing
+                .memberUnitUserDetail({
+                  ...this.formInline,
+                  userId: row.userId,
+                })
+                .then((res) => {
+                  console.log(res);
+                  this.$refs.modifyPoints.toggle(res.data.data).add();
+                });
+            };
+            let growthValue = () => {
+              this.$api.marketing
+                .memberUnitUserDetail({
+                  ...this.formInline,
+                  userId: row.userId,
+                })
+                .then((res) => {
+                  console.log(res);
+                  this.$refs.modifyPoints.toggle(res.data.data).update();
+                });
             };
             return (
               <div>
-                <el-button size="mini" type="primary" onClick={edit}>
+                <el-button size="mini" type="primary" onClick={viewDetails}>
                   详情
                 </el-button>
+                <el-button
+                  v-show={!row.id}
+                  size="mini"
+                  type="primary"
+                  onClick={points}
+                >
+                  修改积分
+                </el-button>
+                <el-button
+                  v-show={!row.id}
+                  size="mini"
+                  type="primary"
+                  onClick={growthValue}
+                >
+                  修改成长值
+                </el-button>
               </div>
             );
           },

src/views/modules/marketing/user/popup/modify-points.vue

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalCols="modalCols"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <template slot="dialog__after">
+        <el-form
+          label-width="210px"
+          :rules="rules"
+          :model="modalData"
+          ref="modalForm"
+        >
+          <el-form-item
+            v-if="isAdd"
+            :label="`当前用户剩余积分${form.memberPoints},修改为`"
+            prop="memberPoints"
+          >
+            <el-input-number
+              style="width: 150px"
+              controls-position="right"
+              :precision="0"
+              v-model="modalData.memberPoints"
+              :min="0"
+              label="请输入"
+            ></el-input-number>
+          </el-form-item>
+          <el-alert
+            v-if="isAdd"
+            title="该操作无法撤回，请输入”确定“并提交，提交后会发送系统通知，通知该用户积分发生变化 "
+            :closable="false"
+            type="error"
+          >
+          </el-alert>
+          <el-form-item
+            v-if="!isAdd"
+            :label="`当前用户成长值为${form.growthValue},修改为`"
+            prop="growthValue"
+          >
+            <el-input-number
+              style="width: 150px"
+              controls-position="right"
+              :precision="0"
+              v-model="modalData.growthValue"
+              :min="0"
+              label="请输入"
+            ></el-input-number>
+          </el-form-item>
+          <el-alert
+            v-if="!isAdd"
+            title="该操作无法撤回，请输入”确定“并提交，提交后会发送系统通知，通知该用户成长值发生变化 "
+            :closable="false"
+            type="error"
+          >
+          </el-alert>
+          <el-form-item
+            style="margin-top: 20px"
+            label="请输入确定"
+            prop="determine"
+          >
+            <el-input
+              style="width: 150px"
+              v-model="modalData.determine"
+              label="请输入"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </template>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+import { Divider } from "element-ui";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "",
+        show: false,
+        width: "700px",
+      },
+      modalData: {},
+      form: {},
+      rules: {
+        memberPoints: [
+          {
+            required: true,
+            message: "请输入积分",
+            trigger: "blur",
+          },
+        ],
+        growthValue: [
+          {
+            required: true,
+            message: "请输入成长值",
+            trigger: "blur",
+          },
+        ],
+        determine: [
+          {
+            required: true,
+            message: "请输入确定",
+            trigger: "blur",
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (value !== "确定") {
+                callback(new Error("请输入确定"));
+              } else {
+                callback();
+              }
+            },
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    "modalConfig.show"(newVal) {
+      if (!newVal) {
+        //关闭弹窗清空校验
+        setTimeout(() => {
+          this.$refs.modalForm.resetFields();
+        });
+      }
+    },
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: (row) => {
+          this.modalConfig.title = "修改积分";
+          this.isAdd = true;
+        },
+        update: () => {
+          this.modalConfig.title = "修改成长值";
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      console.log(row);
+      this.modalData = row;
+      this.form = {
+        memberPoints: row.memberPoints,
+        growthValue: row.growthValue,
+      };
+    },
+  },
+  computed: {
+    modalCols() {
+      return [];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: "确认",
+          type: "primary",
+          handle: () => {
+            console.log(this.modalData);
+            this.$refs.modalForm.validate((valid) => {
+              console.log(valid);
+              if (valid) {
+                if (this.isAdd) {
+                  this.$api.marketing
+                    .changeMemberPoints({
+                      id: this.modalData.id,
+                      memberPoints: this.modalData.memberPoints,
+                    })
+                    .then((res) => {
+                      this.$emit("queryList");
+                      this.toggle();
+                    });
+                }
+              } else {
+                this.$api.marketing
+                  .changeGrowthValue({
+                    id: this.modalData.id,
+                    growthValue: this.modalData.growthValue,
+                  })
+                  .then((res) => {
+                    this.$emit("queryList");
+                    this.toggle();
+                  });
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/modules/marketing/user/popup/view-details.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalCols="modalCols"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <template slot="dialog__after">
+        <div style="padding: 20px">
+          <el-descriptions title="用户信息">
+            <el-descriptions-item label="头像">
+              <el-image
+                style="width: 60px; height: 60px"
+                :src="modalData.headUrl"
+                :preview-src-list="[modalData.headUrl]"
+              >
+              </el-image>
+            </el-descriptions-item>
+            <el-descriptions-item label="用户名">{{
+              modalData.username
+            }}</el-descriptions-item>
+            <el-descriptions-item label="ID">{{
+              modalData.userId
+            }}</el-descriptions-item>
+            <el-descriptions-item label="手机号">{{
+              modalData.mobile
+            }}</el-descriptions-item>
+            <!-- <el-descriptions-item label=""
+              >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
+            > -->
+          </el-descriptions>
+        </div>
+        <div
+          v-if="modalData.id"
+          style="margin-top: 20px; border-top: 1px solid #ccc; padding: 20px"
+        >
+          <el-descriptions title="会员信息">
+            <el-descriptions-item label="会员名称">{{
+              modalData.levelName
+            }}</el-descriptions-item>
+            <el-descriptions-item label="生日">{{
+              modalData.birthday
+            }}</el-descriptions-item>
+            <el-descriptions-item label="加入会员时间">{{
+              modalData.joinTime
+            }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </template>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+import { Divider } from "element-ui";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "用户详情",
+        show: false,
+        width: "60%",
+      },
+      modalData: {},
+    };
+  },
+  watch: {
+    "modalConfig.show"(newVal) {
+      if (newVal) {
+        //关闭弹窗清空校验
+        setTimeout(() => {
+          this.$refs.modal.resetFields();
+        });
+      }
+    },
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: () => {
+          this.modalConfig.title = "用户详情";
+          this.isAdd = true;
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      this.modalData = row;
+    },
+  },
+  computed: {
+    modalCols() {
+      return [];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认",
+          type: "primary",
+          loading: this.isLoading,
+          submit: true,
+          handle: () => {
+            console.log(JSON.parse(JSON.stringify(this.modalData)));
+            this.$emit(
+              "addCouponData",
+              JSON.parse(JSON.stringify(this.modalData))
+            );
+            this.toggle();
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>