{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\marketing\\storeCouponIssue\\create.vue?vue&type=style&index=0&id=0b90723c&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\marketing\\storeCouponIssue\\create.vue","mtime":1761614939037},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouY29udGVudF93aWR0aCB7DQogIHdpZHRoOiA0MTRweDsNCn0NCg0KLmluZm8gew0KICBjb2xvcjogIzg4ODsNCiAgZm9udC1zaXplOiAxMnB4Ow0KfQ0KDQoucGljdHJ1ZSB7DQogIHdpZHRoOiA2MHB4Ow0KICBoZWlnaHQ6IDYwcHg7DQogIGJvcmRlcjogMXB4IGRvdHRlZCByZ2JhKDAsIDAsIDAsIDAuMSk7DQogIG1hcmdpbi1yaWdodDogMTVweDsNCiAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIGN1cnNvcjogcG9pbnRlcjsNCg0KICBpbWcgew0KICAgIHdpZHRoOiAxMDAlOw0KICAgIGhlaWdodDogMTAwJTsNCiAgfQ0KDQogIC5idG5kZWwgew0KICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICB6LWluZGV4OiAxOw0KICAgIHdpZHRoOiAyMHB4ICFpbXBvcnRhbnQ7DQogICAgaGVpZ2h0OiAyMHB4ICFpbXBvcnRhbnQ7DQogICAgbGVmdDogNDZweDsNCiAgICB0b3A6IC00cHg7DQogIH0NCn0NCg0KLnVwTG9hZCB7DQogIHdpZHRoOiA1OHB4Ow0KICBoZWlnaHQ6IDU4cHg7DQogIGxpbmUtaGVpZ2h0OiA1OHB4Ow0KICBib3JkZXI6IDFweCBkb3R0ZWQgcmdiYSgwLCAwLCAwLCAwLjEpOw0KICBib3JkZXItcmFkaXVzOiA0cHg7DQogIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC4wMik7DQogIGN1cnNvcjogcG9pbnRlcjsNCn0NCg0KLml2dS1pY29uLWlvcy1jbG9zZS1jaXJjbGUgew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIHRyYW5zZm9ybTogdHJhbnNsYXRlKDUwJSwgLTUwJSk7DQp9DQoNCi50aXAgew0KICBjb2xvcjogIzg4ODsNCiAgZm9udC1zaXplOiAxMnB4Ow0KICBsaW5lLWhlaWdodDogMTZweDsNCn0NCg=="},{"version":3,"sources":["create.vue"],"names":[],"mappings":";AA8cA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"create.vue","sourceRoot":"src/pages/marketing/storeCouponIssue","sourcesContent":["<template>\r\n  <div>\r\n    <pages-header\r\n      ref=\"pageHeader\"\r\n      :title=\"$route.params.id ? '编辑优惠券' : '添加优惠券'\"\r\n      :backUrl=\"$routeProStr + '/marketing/store_coupon_issue/index'\"\r\n    ></pages-header>\r\n    <el-card :bordered=\"false\" shadow=\"never\" class=\"mt16\">\r\n      <el-form :model=\"formData\" label-width=\"160px\">\r\n        <el-form-item label=\"优惠券名称：\">\r\n          <el-input\r\n            v-model=\"formData.coupon_title\"\r\n            maxlength=\"18\"\r\n            show-word-limit\r\n            placeholder=\"请输入优惠券名称\"\r\n            class=\"content_width\"\r\n          ></el-input>\r\n        </el-form-item>\r\n        <el-form-item label=\"优惠券面值：\">\r\n          <el-input-number\r\n            :controls=\"false\"\r\n            :min=\"1\"\r\n            :max=\"9999999999\"\r\n            v-model=\"formData.coupon_price\"\r\n            class=\"content_width input-number-unit-class\"\r\n            class-unit=\"元\"\r\n            :disabled=\"isEdit\"\r\n          ></el-input-number>\r\n        </el-form-item>\r\n        <el-form-item label=\"用户类型：\">\r\n          <el-radio-group v-model=\"formData.user_type\" :disabled=\"isEdit\" @input=\"changeUserType\">\r\n            <el-radio :label=\"1\">普通用户</el-radio>\r\n            <el-radio :label=\"2\">付费会员用户</el-radio>\r\n          </el-radio-group>\r\n          <div class=\"tip\">\r\n            普通用户：所有用户都能获取到的优惠券；<br />\r\n            付费会员用户：仅付费会员才能领取的优惠券；\r\n          </div>\r\n        </el-form-item>\r\n        <el-form-item label=\"发送方式：\" v-show=\"formData.user_type == 1\">\r\n          <el-radio-group v-model=\"formData.receive_type\" :disabled=\"isEdit\">\r\n            <el-radio :label=\"1\">用户领取</el-radio>\r\n            <el-radio :label=\"3\">系统赠送</el-radio>\r\n          </el-radio-group>\r\n          <div class=\"tip\">\r\n            用户领取：用户需要手动领取优惠券；<br />\r\n            系统赠送：1.后台发放指定用户。2.添加到商品里面用户购买该商品获得。3.设置新人礼页面新用户注册赠送优惠券；\r\n          </div>\r\n        </el-form-item>\r\n        <el-form-item label=\"优惠劵类型：\">\r\n          <el-radio-group v-model=\"formData.type\" :disabled=\"isEdit\">\r\n            <el-radio :label=\"0\">通用券</el-radio>\r\n            <el-radio :label=\"1\">品类券</el-radio>\r\n            <el-radio :label=\"2\">商品券</el-radio>\r\n            <!--                        <el-radio :label=\"3\">会员券</el-radio>-->\r\n          </el-radio-group>\r\n        </el-form-item>\r\n        <el-form-item v-show=\"formData.type === 2\">\r\n          <template>\r\n            <div class=\"acea-row\">\r\n              <div v-for=\"(item, index) in productList\" :key=\"index\" class=\"pictrue\">\r\n                <img v-lazy=\"item.image\" />\r\n                <i  v-if=\"formData.type == 2 && !formData.id\" class=\"el-icon-error btndel\" v-db-click @click=\"remove(item.product_id)\"></i>\r\n              </div>\r\n              <div v-if=\"formData.type == 2 && !formData.id\" class=\"upLoad acea-row row-center-wrapper\" v-db-click @click=\"modals = true\">\r\n                <i class=\"el-icon-goods\" style=\"font-size: 24px\"></i>\r\n              </div>\r\n            </div>\r\n          </template>\r\n        </el-form-item>\r\n        <el-form-item v-show=\"formData.type === 1\">\r\n          <el-cascader\r\n            v-model=\"formData.category_id\"\r\n            size=\"small\"\r\n            :options=\"categoryList\"\r\n            :props=\"{ multiple: true, emitPath: false, checkStrictly: true }\"\r\n            clearable\r\n            style=\"width: 320px\"\r\n            :disabled=\"isEdit\"\r\n          ></el-cascader>\r\n          <div class=\"info\">选择商品的品类</div>\r\n        </el-form-item>\r\n        <el-form-item label=\"使用门槛：\">\r\n          <el-radio-group v-model=\"isMinPrice\" :disabled=\"isEdit\">\r\n            <el-radio :label=\"0\">无门槛</el-radio>\r\n            <el-radio :label=\"1\">有门槛</el-radio>\r\n          </el-radio-group>\r\n        </el-form-item>\r\n        <el-form-item v-if=\"isMinPrice\">\r\n          <el-input-number\r\n            :controls=\"false\"\r\n            :min=\"0\"\r\n            :max=\"9999999999\"\r\n            v-model=\"formData.use_min_price\"\r\n            class=\"content_width input-number-unit-class\"\r\n            :disabled=\"isEdit\"\r\n            class-unit=\"元\"\r\n          ></el-input-number>\r\n          <div class=\"info\">填写优惠券的最低消费金额</div>\r\n        </el-form-item>\r\n        <el-form-item label=\"有效期：\">\r\n          <el-radio-group v-model=\"isCouponTime\" :disabled=\"isEdit\">\r\n            <el-radio :label=\"1\">天数</el-radio>\r\n            <el-radio :label=\"0\">时间段</el-radio>\r\n          </el-radio-group>\r\n        </el-form-item>\r\n        <el-form-item v-show=\"isCouponTime\" label=\"\">\r\n          <el-input-number\r\n            :controls=\"false\"\r\n            :min=\"0\"\r\n            v-model=\"formData.coupon_time\"\r\n            :precision=\"0\"\r\n            class=\"content_width input-number-unit-class\"\r\n            :disabled=\"isEdit\"\r\n            class-unit=\"天\"\r\n          ></el-input-number>\r\n          <div class=\"info\">领取后多少天内有效</div>\r\n        </el-form-item>\r\n        <el-form-item v-show=\"!isCouponTime\" label=\"\">\r\n          <el-date-picker\r\n            v-model=\"datetime1\"\r\n            :disabled=\"isEdit\"\r\n            clearable\r\n            :editable=\"false\"\r\n            type=\"datetimerange\"\r\n            value-format=\"yyyy-MM-dd HH:mm:ss\"\r\n            style=\"width: 380px\"\r\n            range-separator=\"-\"\r\n            start-placeholder=\"开始日期\"\r\n            end-placeholder=\"结束日期\"\r\n            @change=\"dateChange\"\r\n          ></el-date-picker>\r\n        </el-form-item>\r\n\r\n        <el-form-item label=\"领取时间：\" v-if=\"formData.receive_type != 2 && formData.receive_type != 3\">\r\n          <el-radio-group v-model=\"isReceiveTime\" :disabled=\"isEdit\">\r\n            <el-radio :label=\"1\">限时</el-radio>\r\n            <el-radio :label=\"0\">不限时</el-radio>\r\n          </el-radio-group>\r\n        </el-form-item>\r\n        <el-form-item v-show=\"isReceiveTime\" label=\"\">\r\n          <el-date-picker\r\n            clearable\r\n            v-model=\"datetime2\"\r\n            type=\"datetimerange\"\r\n            value-format=\"yyyy/MM/dd HH:mm:ss\"\r\n            style=\"width: 380px\"\r\n            range-separator=\"-\"\r\n            start-placeholder=\"开始日期\"\r\n            end-placeholder=\"结束日期\"\r\n            @change=\"timeChange\"\r\n            :disabled=\"isEdit\"\r\n          ></el-date-picker>\r\n        </el-form-item>\r\n        <el-form-item label=\"优惠券发布数量：\" v-show=\"formData.receive_type == 1\">\r\n          <el-radio-group v-model=\"formData.is_permanent\" :disabled=\"isEdit\">\r\n            <el-radio :label=\"0\">限量</el-radio>\r\n            <el-radio :label=\"1\">不限量</el-radio>\r\n          </el-radio-group>\r\n        </el-form-item>\r\n        <el-form-item v-show=\"!formData.is_permanent\" label=\"\">\r\n          <el-input-number\r\n            :controls=\"false\"\r\n            :min=\"isEdit ? formData.total_count : 1\"\r\n            :max=\"9999999999\"\r\n            v-model=\"formData.total_count\"\r\n            :precision=\"0\"\r\n            class=\"content_width input-number-unit-class\"\r\n            class-unit=\"张\"\r\n          ></el-input-number>\r\n          <div class=\"info\">填写优惠券的发布数量</div>\r\n        </el-form-item>\r\n        <el-form-item label=\"用户领取数量：\" v-if=\"formData.receive_type != 2 && formData.receive_type != 3\">\r\n          <el-input-number\r\n            :controls=\"false\"\r\n            :min=\"isEdit ? formData.receive_limit : 1\"\r\n            :max=\"9999999999\"\r\n            v-model=\"formData.receive_limit\"\r\n            :precision=\"0\"\r\n            class=\"content_width input-number-unit-class\"\r\n            class-unit=\"张\"\r\n          ></el-input-number>\r\n          <div class=\"info\">填写每个用户可以领取多少张</div>\r\n        </el-form-item>\r\n        <el-form-item label=\"状态：\">\r\n          <el-radio-group v-model=\"formData.status\">\r\n            <el-radio :label=\"1\">开启</el-radio>\r\n            <el-radio :label=\"0\">关闭</el-radio>\r\n          </el-radio-group>\r\n        </el-form-item>\r\n        <el-form-item>\r\n          <el-button type=\"primary\" v-db-click @click=\"save\" :disabled=\"disabled\">{{\r\n            isEdit ? '立即保存' : '立即创建'\r\n          }}</el-button>\r\n        </el-form-item>\r\n      </el-form>\r\n    </el-card>\r\n    <el-dialog :visible.sync=\"modals\" title=\"商品列表\" class=\"paymentFooter\" width=\"1000px\">\r\n      <goods-list ref=\"goodslist\" v-if=\"modals\" :ischeckbox=\"true\" @getProductId=\"getProductId\"></goods-list>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState } from 'vuex';\r\nimport goodsList from '@/components/goodsList/index';\r\nimport { couponSaveApi, couponDetailApi } from '@/api/marketing';\r\nimport { cascaderListApi } from '@/api/product';\r\nexport default {\r\n  name: 'storeCouponCreate',\r\n  components: {\r\n    goodsList,\r\n  },\r\n  data() {\r\n    return {\r\n      disabled: false,\r\n      formData: {\r\n        coupon_title: '',\r\n        coupon_price: 0,\r\n        type: 0,\r\n        use_min_price: 0,\r\n        coupon_time: 0,\r\n        start_use_time: 0,\r\n        end_use_time: 0,\r\n        start_time: 0,\r\n        end_time: 0,\r\n        user_type: 1,\r\n        receive_type: 1,\r\n        is_permanent: 1,\r\n        total_count: 1,\r\n        sort: 0,\r\n        status: 1,\r\n        product_id: '',\r\n        category_id: 0,\r\n        receive_limit: 1,\r\n      },\r\n      categoryList: [],\r\n      productList: [],\r\n      isMinPrice: 0,\r\n      isCouponTime: 1,\r\n      isReceiveTime: 0,\r\n      modals: false,\r\n      datetime1: ['2023-10-18 00:00:00', '2023-11-22 00:00:00'],\r\n      datetime2: [],\r\n    };\r\n  },\r\n  computed: {\r\n    ...mapState('media', ['isMobile']),\r\n    isEdit() {\r\n      return !!this.$route.params.edit;\r\n    },\r\n  },\r\n  created() {\r\n    this.getCategoryList();\r\n    if (this.$route.params.id) {\r\n      this.formData.id = (this.isEdit && Number(this.$route.params.id)) || 0;\r\n      this.getCouponDetail();\r\n    }\r\n  },\r\n  methods: {\r\n    changeUserType() {\r\n      if (this.formData.user_type == 2) {\r\n        this.formData.receive_type = 1;\r\n      }\r\n    },\r\n    // 品类\r\n    getCategoryList() {\r\n      cascaderListApi(1).then(async (res) => {\r\n        this.categoryList = res.data;\r\n      });\r\n    },\r\n    // 优惠券\r\n    getCouponDetail() {\r\n      couponDetailApi(this.$route.params.id)\r\n        .then((res) => {\r\n          let data = res.data;\r\n          this.formData.coupon_title = data.coupon_title;\r\n          this.formData.type = data.type;\r\n          this.formData.category_id = data.category_id;\r\n          this.formData.coupon_price = parseFloat(data.coupon_price);\r\n          this.formData.use_min_price = parseFloat(data.use_min_price);\r\n          if (this.formData.use_min_price) {\r\n            this.isMinPrice = 1;\r\n          }\r\n          this.formData.coupon_time = data.coupon_time;\r\n          this.formData.receive_type = data.receive_type;\r\n          this.formData.user_type = data.user_type;\r\n          this.formData.is_permanent = data.is_permanent;\r\n          this.formData.status = data.status;\r\n          this.formData.product_id = data.product_id;\r\n          this.formData.start_time = data.start_time;\r\n          this.formData.end_time = data.end_time;\r\n          this.formData.total_count = data.total_count;\r\n          this.formData.sort = data.sort;\r\n          this.formData.receive_limit = data.receive_limit;\r\n          if ('productInfo' in data) {\r\n            this.productList = data.productInfo;\r\n          }\r\n          if (!data.coupon_time) {\r\n            this.isCouponTime = 0;\r\n            this.datetime1 = [this.makeDate(data.start_use_time * 1000), this.makeDate(data.end_use_time * 1000)];\r\n            this.formData.start_use_time = this.makeDate(data.start_use_time * 1000);\r\n            this.formData.end_use_time = this.makeDate(data.end_use_time * 1000);\r\n          }\r\n          if (data.start_time) {\r\n            this.isReceiveTime = 1;\r\n            this.datetime2 = [data.start_time * 1000, data.end_time * 1000];\r\n            this.formData.start_time = this.makeDate(data.start_time * 1000);\r\n            this.formData.end_time = this.makeDate(data.end_time * 1000);\r\n          }\r\n        })\r\n        .catch((err) => {\r\n          this.$message.error(err.msg);\r\n        });\r\n    },\r\n    makeDate(data) {\r\n      let date = new Date(data);\r\n      let YY = date.getFullYear() + '-';\r\n      let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';\r\n      let DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();\r\n      let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';\r\n      let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';\r\n      let ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();\r\n      return YY + MM + DD + ' ' + hh + mm + ss;\r\n    },\r\n    // 创建\r\n    save() {\r\n      if (!this.formData.coupon_title) {\r\n        return this.$message.error('请输入优惠券名称');\r\n      }\r\n      if (this.formData.type === 2) {\r\n        if (!this.formData.product_id) {\r\n          return this.$message.error('请选择商品');\r\n        }\r\n      }\r\n      if (this.formData.type === 1) {\r\n        if (!this.formData.category_id) {\r\n          return this.$message.error('请选择品类');\r\n        }\r\n      }\r\n      if (this.formData.coupon_price <= 0) {\r\n        return this.$message.error('优惠券面值不能小于0');\r\n      }\r\n      if (!this.isMinPrice) {\r\n        this.formData.use_min_price = 0;\r\n      } else {\r\n        if (this.formData.use_min_price < 1) {\r\n          return this.$message.error('优惠券最低消费不能小于0');\r\n        }\r\n      }\r\n      if (this.isCouponTime) {\r\n        this.formData.start_use_time = 0;\r\n        this.formData.end_use_time = 0;\r\n        if (this.formData.coupon_time < 1) {\r\n          return this.$message.error('使用有效期限不能小于1天');\r\n        }\r\n      } else {\r\n        this.formData.coupon_time = 0;\r\n        if (!this.formData.start_use_time) {\r\n          return this.$message.error('请选择使用有效期限');\r\n        }\r\n      }\r\n      if (this.isReceiveTime) {\r\n        if (!this.formData.start_time) {\r\n          return this.$message.error('请选择领取时间');\r\n        }\r\n      } else {\r\n        this.formData.start_time = 0;\r\n        this.formData.end_time = 0;\r\n      }\r\n      // if (this.formData.receive_type == 2 || this.formData.receive_type == 3) {\r\n      //   this.formData.is_permanent = 1;\r\n      // }\r\n      if (this.formData.is_permanent) {\r\n        this.formData.total_count = 0;\r\n      } else {\r\n        if (this.formData.total_count < 1) {\r\n          return this.$message.error('发布数量不能小于1');\r\n        }\r\n      }\r\n      if (this.formData.receive_limit < 1) {\r\n        return this.$message.error('每个用户可以领取数量不能小于1');\r\n      }\r\n      if (this.formData.type == 0) {\r\n        this.formData.product_id = '';\r\n        this.formData.category_id = '';\r\n        this.productList = [];\r\n      } else if (this.formData.type == 1) {\r\n        this.formData.product_id = '';\r\n        this.productList = [];\r\n      } else if (this.formData.type == 2) {\r\n        this.formData.category_id = '';\r\n      }\r\n      if (this.disabled) return;\r\n      this.disabled = true;\r\n      couponSaveApi(this.formData)\r\n        .then((res) => {\r\n          this.$message.success(res.msg);\r\n          setTimeout(() => {\r\n            this.disabled = false;\r\n            this.$router.push({\r\n              path: this.$routeProStr + '/marketing/store_coupon_issue/index',\r\n            });\r\n          }, 1000);\r\n        })\r\n        .catch((err) => {\r\n          this.disabled = false;\r\n          this.$message.error(err.msg);\r\n        });\r\n    },\r\n    // 使用有效期--时间段\r\n    dateChange(time) {\r\n      this.formData.start_use_time = time[0];\r\n      this.formData.end_use_time = time[1];\r\n    },\r\n    // 限时\r\n    timeChange(time) {\r\n      this.formData.start_time = time[0];\r\n      this.formData.end_time = time[1];\r\n    },\r\n    //对象数组去重；\r\n    unique(arr) {\r\n      const res = new Map();\r\n      return arr.filter((arr) => !res.has(arr.product_id) && res.set(arr.product_id, 1));\r\n    },\r\n    // 选择的商品\r\n    getProductId(productList) {\r\n      this.modals = false;\r\n      this.productList = this.unique(this.productList.concat(productList));\r\n      this.formData.product_id = '';\r\n      this.productList.forEach((value) => {\r\n        if (this.formData.product_id) {\r\n          this.formData.product_id += `,${value.product_id}`;\r\n        } else {\r\n          this.formData.product_id += `${value.product_id}`;\r\n        }\r\n      });\r\n    },\r\n    cancel() {\r\n      this.modals = false;\r\n    },\r\n    // 删除商品\r\n    remove(productId) {\r\n      for (let index = 0; index < this.productList.length; index++) {\r\n        if (this.productList[index].product_id == productId) {\r\n          this.productList.splice(index, 1);\r\n        }\r\n      }\r\n      this.formData.product_id = '';\r\n      this.productList.forEach((value) => {\r\n        if (this.formData.product_id) {\r\n          this.formData.product_id += `,${value.product_id}`;\r\n        } else {\r\n          this.formData.product_id += `${value.product_id}`;\r\n        }\r\n      });\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.content_width {\r\n  width: 414px;\r\n}\r\n\r\n.info {\r\n  color: #888;\r\n  font-size: 12px;\r\n}\r\n\r\n.pictrue {\r\n  width: 60px;\r\n  height: 60px;\r\n  border: 1px dotted rgba(0, 0, 0, 0.1);\r\n  margin-right: 15px;\r\n  display: inline-block;\r\n  position: relative;\r\n  cursor: pointer;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  .btndel {\r\n    position: absolute;\r\n    z-index: 1;\r\n    width: 20px !important;\r\n    height: 20px !important;\r\n    left: 46px;\r\n    top: -4px;\r\n  }\r\n}\r\n\r\n.upLoad {\r\n  width: 58px;\r\n  height: 58px;\r\n  line-height: 58px;\r\n  border: 1px dotted rgba(0, 0, 0, 0.1);\r\n  border-radius: 4px;\r\n  background: rgba(0, 0, 0, 0.02);\r\n  cursor: pointer;\r\n}\r\n\r\n.ivu-icon-ios-close-circle {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  transform: translate(50%, -50%);\r\n}\r\n\r\n.tip {\r\n  color: #888;\r\n  font-size: 12px;\r\n  line-height: 16px;\r\n}\r\n</style>\r\n"]}]}