zhangdan 4 роки тому
батько
коміт
454e69b85d

+ 40 - 0
src/api/recoveryManage.js

@@ -157,3 +157,43 @@ export const changeSort = (params) => {
     method: 'post'
   })
 }
+
+// 商铺管理列表
+export const getShopList = params => {
+  const url = `customer/reserve/queryPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+
+// 新增/编辑保存商铺接口
+export const savShop = params => {
+  return axios({
+    url: 'customer/reserve/save',
+    data: params,
+    method: 'POST'
+  })
+}
+
+// 查询骑手列表
+export const riderData = params => {
+  return axios({
+    url: '/userExt/queryList',
+    data: {},
+    method: 'POST'
+  })
+}
+
+// 查询商铺详情
+export const shopDetails = (params) => {
+  const url = `customer/reserve/findById/${params.id}`
+  return axios({
+    url: url,
+    data: params,
+    method: 'get'
+  })
+}

+ 11 - 0
src/config/router.config.js

@@ -744,6 +744,17 @@ export const asyncRouterMap = [{
         icon: 'cluster',
         permission: 'M_recoveryPriceSet_list'
       }
+    },
+    {
+      path: '/recoveryManage/shopSet/shopList',
+      name: 'shopList',
+      component: () => import(/* webpackChunkName: "equipmentManage" */
+        '@/views/recoveryManage/shopSet/shopList.vue'),
+      meta: {
+        title: '店铺管理',
+        icon: 'cluster'
+        // permission: 'M_recoveryPriceSet_list'
+      }
     }
     ]
   },

+ 10 - 0
src/libs/getDate.js

@@ -75,5 +75,15 @@ export default {
     obj.starttime = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD')
     obj.endtime = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD')
     return obj
+  },
+  // 获取最近3个月的开始结束时间
+  getLastThreeMonthDays () {
+    const obj = {
+      starttime: '',
+      endtime: ''
+    }
+    obj.starttime = moment(new Date()).subtract(2, 'months').format('YYYY-MM-DD')
+    obj.endtime = moment(moment().valueOf()).format('YYYY-MM-DD')
+    return obj
   }
 }

+ 368 - 0
src/views/recoveryManage/shopSet/addShop.vue

@@ -0,0 +1,368 @@
+<template>
+  <a-modal
+    centered
+    class="addShop-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="modalTit"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="1000">
+    <a-form
+      id="addShop-form"
+      :form="form"
+      ref="form"
+      v-bind="formItemLayout"
+      @submit="handleSubmit">
+      <a-form-item label="店铺名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-input
+          id="addShop-name"
+          :maxLength="30"
+          v-decorator="[
+            'formData.name',
+            { initialValue: formData.name, getValueFromEvent: $filterEmpty, rules: [{ message: '请输入网点名称' }] }
+          ]"
+          placeholder="请输入店铺名称(最多30个字符)"
+          allowClear />
+      </a-form-item>
+      <a-form-item label="电话" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-input
+          id="addShop-mobile"
+          :maxLength="30"
+          :disabled="isEdit"
+          v-decorator="[
+            'formData.mobile',
+            { initialValue: formData.mobile, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入电话' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的骑手电话!'}] }
+          ]"
+          placeholder="请输入电话"
+          allowClear />
+      </a-form-item>
+      <a-form-item label="所属骑手" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-select
+          id="addShop-riderId"
+          placeholder="请选择"
+          allowClear
+          v-decorator="[
+            'formData.riderId',
+            { initialValue: formData.riderId}
+          ]"
+          :showSearch="true"
+          option-filter-prop="children"
+          :filter-option="filterOption"
+        >
+          <a-select-option v-for="item in lableData" :key="item.userId" :value="item.userId">{{ item.userName }}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="地址" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" style="margin: 0;">
+        <a-row :gutter="20">
+          <!-- 地址 -->
+          <a-col span="8">
+            <a-form-item>
+              <a-select id="addShop-provinceCode" @change="getCityList" v-decorator="['formData.reverseReceiveAddress.provinceCode', { initialValue: formData.reverseReceiveAddress.provinceCode}]" placeholder="请选择省">
+                <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col span="8">
+            <a-form-item prop="cityCode">
+              <a-select id="addShop-cityCode" v-decorator="['formData.reverseReceiveAddress.cityCode', { initialValue: formData.reverseReceiveAddress.cityCode}]" @change="getAreaList" placeholder="请选择市">
+                <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col span="8">
+            <a-form-item prop="districtCode">
+              <a-select id="addShop-districtCode" v-decorator="['formData.reverseReceiveAddress.districtCode', { initialValue: formData.reverseReceiveAddress.districtCode}]" @change="areaCharged" placeholder="请选择区/县">
+                <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form-item>
+      <a-form-item label="详细地址" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <a-input
+          id="addShop-receiveAddress"
+          :maxLength="30"
+          v-decorator="[
+            'formData.reverseReceiveAddress.receiveAddress',
+            { initialValue: formData.reverseReceiveAddress.receiveAddress, getValueFromEvent: $filterEmpty }
+          ]"
+          placeholder="请输入详细地址(最多30个字符)"
+          allowClear />
+      </a-form-item>
+      <a-row :gutter="30">
+        <a-col :span="10">
+          <a-form-item label="纬度" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+            <a-input
+              id="network-edit-lat"
+              v-decorator="[
+                'formData.reverseReceiveAddress.lat',
+                { initialValue: formData.reverseReceiveAddress.lat, rules: [
+                  { pattern: /^[\-\+]?([0-8]?\d{1}\.\d{1,8}|90\.0{1,8})$/, message: '请输入正确的纬度,整数部分为0~90,必须输入1到8位小数' }
+                ] }
+              ]"
+              placeholder="请输入纬度"
+              allowClear />
+          </a-form-item>
+        </a-col>
+        <a-col :span="10">
+          <a-form-item label="经度" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+            <a-input
+              id="network-edit-lng"
+              v-decorator="[
+                'formData.reverseReceiveAddress.lng',
+                { initialValue: formData.reverseReceiveAddress.lng, getValueFromEvent: $filterEmpty, rules: [
+                  { pattern: /^[\-\+]?(0?\d{1,2}\.\d{1,8}|1[0-7]?\d{1}\.\d{1,8}|180\.0{1,8})$/, message: '请输入正确的经度,整数部分为0~180,必须输入1到8位小数' }
+                ] }
+              ]"
+              placeholder="请输入经度"
+              allowClear />
+          </a-form-item>
+        </a-col>
+        <a-col :span="4">
+          <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">
+            <a-button type="primary" id="network-edit-search-jwd" style="margin-top: 8px;" size="small">查询坐标</a-button>
+          </a>
+        </a-col>
+      </a-row>
+      <a-form-item label="门头照" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+        <Upload
+          class="upload"
+          id="storeImage-headerImageList"
+          v-decorator="[ 'formData.reverseReceiveAddress.headerImageList', { initialValue: formData.reverseReceiveAddress.headerImageList } ]"
+          ref="storeImage"
+          :fileSize="0.25"
+          @change="getStoreImage"
+          listType="picture-card" ></Upload>
+      </a-form-item>
+      <a-form-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
+        <a-button type="primary" html-type="submit" id="addShop-submit" style="margin-right: 15px">保存</a-button>
+        <a-button @click="isShow=false" style="margin-left: 15px" id="addShop-close">取消</a-button>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
+import { savShop, riderData, shopDetails } from '@/api/recoveryManage.js'
+import { Upload } from '@/components'
+export default {
+  name: 'AddShop',
+  props: {
+    visible: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  watch: {
+	  //  父页面传过来的弹框状态
+	  visible (newValue, oldValue) {
+	    this.isShow = newValue
+	  },
+	  //  重定义的弹框状态
+	  isShow (newValue, oldValue) {
+	    if (!newValue) {
+	      this.$emit('close')
+	    } else {
+        this.pageInit()
+	    }
+	  },
+	  itemId (newValue, oldValue) {
+	    if (this.isShow && newValue) {
+        console.log(this.isShow && newValue)
+	      this.getDetails()
+	    } else {
+        this.isEdit = false
+      }
+	  }
+  },
+  components: { Upload },
+  data () {
+    return {
+      isShow: this.visible, //  是否打开弹框
+      form: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 16 }
+      },
+      formData: {
+        name: null, //  网点名称
+        mobile: '',
+        riderId: undefined,
+        reverseReceiveAddress: {
+          provinceCode: undefined, //  省
+          provinceName: '',
+          cityCode: undefined, // 市
+          cityName: '',
+          districtCode: undefined, // 区
+          districtName: '',
+          receiveAddress: '',
+          headerImageList: '',
+          lat: '',
+          lng: ''
+        }
+      },
+      isEdit: false, // 是否可编辑
+      goldExRuleNoList: [], //  兑换规则下拉数据
+      deliveryTimeRuleNoList: [], //  投递时间段下拉数据
+      addrProvinceList: [], //  省下拉
+      addrCityList: [], //  市下拉
+      addrDistrictList: [], //  区下拉
+      lableData: [] // 骑手数据
+    }
+  },
+  computed: {
+    modalTit () {
+      return this.itemId ? '编辑' : '新增'
+    }
+  },
+  mounted () {
+	  this.getRiderData() // 网点标签
+  },
+  methods: {
+    pageInit () {
+      this.getProvinceList()
+      this.form.resetFields()
+    },
+    getStoreImage (data) {
+      this.formData.photoPath = data
+    },
+    //  获取详情
+    getDetails () {
+      shopDetails({ id: this.itemId }).then(res => {
+        if (res.status == 200) {
+          this.isEdit = res.data.sourceTypeReserve == 'admin'
+          //  省市区
+          this.getCityList(res.data.reverseReceiveAddress && res.data.reverseReceiveAddress.provinceCode ? res.data.reverseReceiveAddress.provinceCode : undefined)
+          this.getAreaList(res.data.reverseReceiveAddress && res.data.reverseReceiveAddress.cityCode ? res.data.reverseReceiveAddress.cityCode : undefined)
+          this.form.setFieldsValue({ 'formData.name': res.data.name })
+          this.form.setFieldsValue({ 'formData.mobile': res.data.mobile })
+          this.form.setFieldsValue({ 'formData.riderId': res.data.riderId })
+          this.form.setFieldsValue({ 'formData.reverseReceiveAddress.provinceCode': res.data.reverseReceiveAddress.provinceCode })
+          this.form.setFieldsValue({ 'formData.reverseReceiveAddress.cityCode': res.data.reverseReceiveAddress.cityCode })
+          this.form.setFieldsValue({ 'formData.reverseReceiveAddress.districtCode': res.data.reverseReceiveAddress.districtCode })
+          this.form.setFieldsValue({ 'formData.reverseReceiveAddress.receiveAddress': res.data.reverseReceiveAddress.address })
+          this.form.setFieldsValue({ 'formData.reverseReceiveAddress.headerImageList': res.data.reverseReceiveAddress.headerImageList.join() })
+        }
+      })
+    },
+    // 保存
+    handleSubmit (e) {
+      e.preventDefault()
+      const _this = this
+      this.form.validateFields((err, values) => {
+        console.log(values, '------------')
+        if (!err) {
+          const formData = Object.assign(values.formData, { 'sourceTypeReserve': 'admin' })
+          console.log(formData, '-----参数')
+          formData.id = this.itemId || null
+          if (formData.reverseReceiveAddress.provinceName) {
+            formData.reverseReceiveAddress.provinceName = _this.addrProvinceList.find(item => item.id == formData.reverseReceiveAddress.provinceCode).name
+          }
+          if (formData.reverseReceiveAddress.cityName) {
+            formData.reverseReceiveAddress.cityName = _this.addrCityList.find(item => item.id == formData.reverseReceiveAddress.cityCode).name
+          }
+          if (formData.reverseReceiveAddress.districtName) {
+            formData.reverseReceiveAddress.districtName = _this.addrDistrictList.find(item => item.id == formData.reverseReceiveAddress.districtCode).name
+          }
+          if (formData.reverseReceiveAddress.headerImageList) {
+            formData.reverseReceiveAddress.headerImageList = formData.reverseReceiveAddress.headerImageList.split(',')
+          }
+          if ((formData.reverseReceiveAddress.lat == '' && formData.reverseReceiveAddress.lng == '') && formData.riderId == '') {
+            this.$message.error('所属骑手或经纬度至少选择一个')
+            return
+          }
+          savShop(formData).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              setTimeout(() => {
+                _this.$emit('refresh')
+                _this.isShow = false
+              }, 1000)
+            }
+          })
+        }
+      })
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 获取标签数据
+    getRiderData () {
+      riderData().then(res => {
+        if (res.status == 200) {
+          this.lableData = res.data || []
+        }
+      })
+    },
+    // 获取省列表
+    getProvinceList () {
+      getProvince().then(res => {
+        if (res.status == 200) {
+          this.addrProvinceList = res.data || []
+        } else {
+          this.addrProvinceList = []
+        }
+      })
+    },
+    // 获取城市列表
+    getCityList (val) {
+      this.addrCityList = []
+      this.addrDistrictList = []
+      this.form.setFieldsValue({ 'formData.cityCode': undefined })
+      this.form.setFieldsValue({ 'formData.districtCode': undefined })
+      this.form.setFieldsValue({ 'formData.address': '' })
+      this.getCityListRequest(val)
+    },
+    getCityListRequest (val) {
+      getCityByPro({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrCityList = res.data || []
+        } else {
+          this.addrCityList = []
+        }
+      })
+    },
+    // 获取区县列表
+    getAreaList (val) {
+      this.addrDistrictList = []
+      this.form.setFieldsValue({ 'formData.districtCode': undefined })
+      this.form.setFieldsValue({ 'formData.address': '' })
+      this.getAreaListRequest(val)
+    },
+    getAreaListRequest (val) {
+      getDistrictByCity({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrDistrictList = res.data || []
+        } else {
+          this.addrDistrictList = []
+        }
+      })
+    },
+    // 区县变更
+    areaCharged (val) {
+      this.form.setFieldsValue({ 'formData.address': '' })
+    }
+  }
+
+}
+</script>
+
+<style lang="less">
+  .addShop-modal{
+    .addShop-search-jwd{
+      margin-top: 8px;
+    }
+  }
+</style>

+ 262 - 0
src/views/recoveryManage/shopSet/shopList.vue

@@ -0,0 +1,262 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="6" :sm="24">
+            <a-form-model-item label="创建时间" >
+              <a-range-picker
+                id="shopList-time"
+                v-model="time"
+                style="width: 100%;"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="骑手信息">
+              <a-input
+                allowClear
+                v-model.trim="queryParam.queryWord"
+                placeholder="请输入骑手姓名/电话"
+                id="shopList-queryWord"
+                :maxLength="30"
+                @pressEnter="$refs.table.refresh(true)" />
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="24">
+            <a-form-item label="店铺名称">
+              <a-input
+                allowClear
+                v-model.trim="queryParam.name"
+                placeholder="请输入店铺名称"
+                :maxLength="11"
+                id="shopList-name"
+                @pressEnter="$refs.table.refresh(true)" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="注册方式">
+              <v-select code="SOURCE_TYPE_RESERVE" v-model="queryParam.sourceTypeReserve" allowClear placeholder="请选择注册方式" id="driverManage-sourceTypeReserve"></v-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="48">
+          <a-col :md="24" style="text-align: end;margin-top: 15px;">
+            <a-button type="primary" @click="$refs.table.refresh(true)" id="shopList-handSubmit" style="margin-right: 10px;">查询</a-button>
+            <a-button type="" @click="reset" id="shopList-reset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="table-operator">
+      <a-button
+        type="primary"
+        icon="plus"
+        @click="openModal()"
+        id="shopList-openModal"
+        v-hasPermission="'B_riderSet_add'"
+        style="margin-top:18px ;">新增</a-button>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 店铺信息 -->
+      <span slot="shop" slot-scope="text, record">
+        <p>{{ record.name }}</p>
+        <p>{{ record.mobile }}</p>
+      </span>
+      <!-- 骑手信息 -->
+      <span slot="rider" slot-scope="text, record">
+        <p>{{ record.userName }}</p>
+        <p>{{ record.userPhone }}</p>
+        <p v-if="!record.userName && !record.userPhone">--</p>
+      </span>
+      <span slot="action" slot-scope="text, record">
+        <a-icon
+          v-if="$hasPermissions('B_riderSet_edit')"
+          type="edit"
+          title="编辑"
+          class="actionBtn icon-blues"
+          @click="openModal(record)"
+        />
+        <span v-else>--</span>
+      </span>
+    </s-table>
+    <addShop :visible="showModal" @refresh="$refs.table.refresh(true)" :itemId="itemData" @close="showModal = false"></addShop>
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import addShop from './addShop.vue'
+import { getShopList } from '@/api/recoveryManage.js'
+import moment from 'moment'
+import getDate from '@/libs/getDate.js'
+export default {
+  name: 'RiderSet',
+  components: {
+    STable,
+    VSelect,
+    addShop
+  },
+  data () {
+    return {
+      // 查询参数
+      queryParam: {
+        name: '',
+        queryWord: '',
+        sourceTypeReserve: ''
+
+      },
+      time: [
+        moment(getDate.getLastThreeMonthDays().starttime, this.dateFormat),
+        moment(getDate.getLastThreeMonthDays().endtime, this.dateFormat)
+      ],
+      dateFormat: 'YYYY-MM-DD',
+      showModal: false,
+      itemData: '', // 编辑行id
+      // 表头
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createDate',
+        width: 120,
+        align: 'center'
+      },
+      {
+        title: '店铺信息',
+        dataIndex: 'shop',
+        width: 100,
+        align: 'center',
+        scopedSlots: {
+          customRender: 'shop'
+        }
+      },
+      {
+        title: '所属骑手信息',
+        dataIndex: 'rider',
+        width: 100,
+        align: 'center',
+        scopedSlots: {
+          customRender: 'rider'
+        }
+      },
+	  {
+        title: '注册方式',
+        dataIndex: 'sourceTypeReserveDictValue',
+        width: 100,
+        align: 'center'
+	  },
+      {
+        title: '操作',
+        width: 100,
+        align: 'center',
+        scopedSlots: {
+          customRender: 'action'
+        }
+      }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        const searchData = Object.assign(parameter, this.queryParam)
+        if (this.time && this.time.length) {
+          searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD 00:00:00')
+          searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD 23:59:59')
+        } else {
+          searchData.beginDate = null
+          searchData.endDate = null
+        }
+        return getShopList(searchData).then(res => {
+          const no = (res.data.pageNo - 1) * res.data.pageSize
+          for (let i = 0; i < res.data.list.length; i++) {
+            const _item = res.data.list[i]
+            _item.no = no + i + 1
+          }
+          return res.data
+        })
+      }
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      console.log(vm.time)
+      // vm.$refs.table.refresh()
+    })
+  },
+  methods: {
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.queryParam.beginDate = dateStrings[0]
+        this.queryParam.endDate = dateStrings[1]
+      }
+    },
+    // 刷新列表
+    refreshTable () {
+      this.$refs.table.refresh(true)
+    },
+    // 新建
+    openModal (row) {
+      if (row) {
+        this.itemData = row.id
+      } else {
+        this.itemData = ''
+      }
+      console.log(this.itemData, '-----------this.itemId')
+      this.showModal = true
+    },
+    // 重置
+    reset () {
+      this.queryParam.queryWord = ''
+      this.queryParam.name = ''
+      this.queryParam.sourceTypeReserve = ''
+      this.time = [
+        moment(getDate.getLastThreeMonthDays().starttime, this.dateFormat),
+        moment(getDate.getLastThreeMonthDays().endtime, this.dateFormat)
+      ]
+      this.refreshTable()
+    }
+  }
+}
+</script>
+<style scoped>
+	.table-page-search-wrapper .ant-form-inline .ant-form-item {
+		margin-bottom: 0;
+	}
+
+	.action-button {
+		line-height: 40px;
+		white-space: nowrap;
+		padding: 5px 10px;
+		background-color: #1890ff;
+		border-radius: 4px;
+		color: #fff;
+		margin-right: 5px;
+	}
+
+	.red-text {
+		background-color: red;
+	}
+
+	.reset-text {
+		background-color: #31b50b;
+	}
+</style>