曲靖复制郫都 商品管理,订单管理,网格员积分

project/qujing/app/AppOrder/components/Detail.vue

@@ -0,0 +1,168 @@
+ <template>
+  <ai-detail v-loading="isLoading" class="detail">
+    <template slot="title">
+      <ai-title title="订单详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #right>
+          <el-button type="primary" v-if="info.orderStatus === '0'" @click="isShow = true">订单核销</el-button>
+        </template>
+        <template #content>
+          <ai-wrapper
+            label-width="120px">
+            <ai-info-item label="订单编号" :value="info.orderCode"></ai-info-item>
+            <ai-info-item label="订单状态" :value="dict.getLabel('merchandiseOrderStatus', info.orderStatus)"></ai-info-item>
+            <ai-info-item label="兑换人" :value="info.consumerName"></ai-info-item>
+            <ai-info-item label="兑换时间" :value="info.createTime"></ai-info-item>
+            <ai-info-item label="备注" isLine :value="info.remark"></ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+      <ai-card title="操作信息" v-if="info.orderStatus === '1'">
+        <template #content>
+          <ai-wrapper
+            label-width="120px">
+            <ai-info-item label="核销人" :value="info.auditUserName"></ai-info-item>
+            <ai-info-item label="核销时间" :value="info.auditTime"></ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+      <ai-card title="商品信息">
+        <template #content>
+          <ai-table
+            :tableData="tableData"
+            :isShowPagination="false"
+            :col-configs="colConfigs"
+            @getList="() => {}">
+            <el-table-column slot="goods" width="240px" label="商品" align="left">
+              <template slot-scope="{ row }">
+                <div class="goods">
+                  <img :src="row.imageUrl">
+                  <span>{{ row.merchandiseName }}</span>
+                </div>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </template>
+      </ai-card>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="590px"
+        title="订单核销"
+        @close="form.code = ''"
+        @onConfirm="onConfirm">
+        <el-form ref="form" :model="form" label-width="110px" label-position="right">
+          <el-form-item label="核销码" prop="code" :rules="[{required: true, message: '请输入核销码', trigger: 'blur'}]">
+            <el-input size="small" placeholder="请输入核销码" v-model="form.code"></el-input>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Detail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        info: {},
+        isShow: false,
+        currIndex: 0,
+        isLoading: false,
+        tableData: [],
+        form: {
+          code: ''
+        },
+        colConfigs: [
+          { slot: 'goods', label: '商品' },
+          { prop: 'merchandiseIntegral', align: 'center', label: '单价' },
+          { prop: 'merchandiseNumber', align: 'center', label: '数量' },
+          { prop: 'merchandiseIntegral', align: 'center', label: '小计' }
+        ],
+      }
+    },
+
+    created () {
+      this.isLoading = true
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.dict.load(['merchandiseOrderStatus']).then(() => {
+          this.getInfo(this.params.id)
+        })
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appintegralmerchandiseorder/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.tableData = [this.info]
+          }
+
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      onConfirm() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appintegralmerchandiseorder/writeOffOrder`, null, {
+              params: {
+                code: this.form.code,
+                id: this.params.id
+              }
+            }).then(res => {
+              if (res.code == 0) {
+                this.isShow = false
+                this.getInfo(this.params.id)
+                this.$message.success('核销成功')
+              }
+            })
+          }
+        })
+      },
+
+      cancel () {
+        this.$emit('change', {
+          type: 'List',
+          isRefresh: true
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .detail .goods {
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 80px;
+      height: 80px;
+      margin-right: 20px;
+    }
+
+    span {
+      flex: 1;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+</style>

project/qujing/app/AppOrder/components/List.vue

@@ -0,0 +1,300 @@
+<template>
+  <ai-list class="list">
+    <ai-title slot="title" title="订单管理" isShowBottomBorder>
+      <template #sub>
+        <span>可查看并核销网格员在积分超市中兑换的商品订单</span>
+      </template>
+    </ai-title>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template #left>
+          <ai-user-selecter v-model="user" :instance="instance" @change="onUserChange" :isMultiple="false">
+            <div class="userSelcet">
+              <span style="color: #606266;" v-if="search.consumerId">{{ name }}</span>
+              <span v-else>兑换人</span>
+              <i class="el-icon-arrow-up"  v-if="!search.consumerId"></i>
+              <i class="el-icon-circle-close" v-if="search.consumerId" @click.stop="user = [], search.consumerId = '', name = '', search.current = 1, getList()"></i>
+            </div>
+          </ai-user-selecter>
+          <ai-select
+            v-model="search.orderStatus"
+            clearable
+            placeholder="请选择订单状态"
+            :selectList="dict.getDict('merchandiseOrderStatus')"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          <el-date-picker
+            v-model="search.createTimeStart"
+            type="date"
+            size="small"
+            value-format="yyyy-MM-dd"
+            placeholder="选择兑换开始日期"
+            @change="search.current = 1, getList()">
+          </el-date-picker>
+          <el-date-picker
+            v-model="search.createTimeEnd"
+            type="date"
+            size="small"
+            value-format="yyyy-MM-dd"
+            placeholder="选择兑换结束日期"
+            @change="search.current = 1, getList()">
+          </el-date-picker>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.merchandiseName"
+            size="small"
+            placeholder="请输入商品名称"
+            clearable
+            v-throttle="() => {search.current = 1, getList()}"
+            @clear="search.current = 1, search.merchandiseName = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-search-bar style="margin-top: 12px" bottomBorder>
+        <template #left>
+          <!-- <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">订单核销</el-button> -->
+          <ai-download :instance="instance" url="/app/appintegralmerchandiseorder/export" :params="search" fileName="订单" :disabled="tableData.length == 0">
+            <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出订单</el-button>
+          </ai-download>
+        </template>
+        <template #right>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        v-loading="loading"
+        style="margin-top: 16px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="goods" width="240px" label="商品" align="left">
+          <template slot-scope="{ row }">
+            <div class="goods">
+              <ai-uploader
+                :instance="instance"
+                disabled
+                :value="[{url: row.imageUrl}]"
+                :limit="1">
+              </ai-uploader>
+              <span>{{ row.merchandiseName }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" v-if="row.orderStatus === '0'" @click="id = row.id, isShow = true">订单核销</el-button>
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="590px"
+        title="订单核销"
+        @close="form.code = '', id = ''"
+        @onConfirm="onConfirm">
+        <el-form ref="form" :model="form" label-width="110px" label-position="right">
+          <el-form-item label="核销码" prop="code" :rules="[{required: true, message: '请输入核销码', trigger: 'blur'}]">
+            <el-input size="small" placeholder="请输入核销码" v-model="form.code"></el-input>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          merchandiseName: '',
+          orderStatus: '',
+          consumerId: '',
+          createTimeStart: '',
+          createTimeEnd: ''
+        },
+        id: '',
+        form: {
+          code: ''
+        },
+        isShow: false,
+        user: [],
+        name: '',
+        info: {},
+        colConfigs: [
+          { slot: 'goods', label: '商品' },
+          { prop: 'merchandiseIntegral', align: 'center', label: '单价' },
+          { prop: 'merchandiseNumber', align: 'center', label: '数量' },
+          // {
+          //   prop: 'areaName', label: '活动地区', align: 'center' ,
+          //   render: (h, params) => {
+          //     return h('span', {
+          //     }, params.row.areaName)
+          //   }
+          // },
+          { prop: 'merchandiseIntegral', align: 'center', label: '消耗积分' },
+          { prop: 'consumerName', align: 'center', label: '兑换人' },
+          {
+            prop: 'createTime',
+            align: 'center',
+            label: '兑换时间'
+          },
+          {
+            prop: 'orderStatus',
+            align: 'center',
+            label: '状态',
+            format: v => this.dict.getLabel('merchandiseOrderStatus', v)
+          }
+        ],
+        ids: [],
+        tableData: [],
+        total: 0,
+        loading: false,
+        disabledLevel: 0
+      }
+    },
+
+    created () {
+      this.dict.load(['merchandiseOrderStatus']).then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      onUserChange (e) {
+        if (e.length) {
+          this.name = e[0].name
+          this.search.consumerId = e[0].id
+        } else {
+          this.search.consumerId = ''
+        }
+        this.search.current = 1
+
+        this.getList()
+      },
+
+      onConfirm() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appintegralmerchandiseorder/writeOffOrder`, null, {
+              params: {
+                code: this.form.code,
+                id: this.id
+              }
+            }).then(res => {
+              if (res.code == 0) {
+                this.isShow = false
+                this.getList()
+                this.$message.success('核销成功')
+              }
+            })
+          }
+        })
+      },
+
+      getList () {
+        this.instance.post(`/app/appintegralmerchandiseorder/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .list {
+    .goods {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 80px;
+        height: 80px;
+        margin-right: 20px;
+      }
+
+      span {
+        flex: 1;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .userSelcet {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 215px;
+      height: 32px;
+      line-height: 32px;
+      border-radius: 4px;
+      border: 1px solid #d0d4dc;
+      overflow: hidden;
+      cursor: pointer;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &:hover {
+        border-color: $placeholderColor;
+      }
+
+      i {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+        height: 100%;
+        line-height: 32px;
+        font-size: 14px;
+        text-align: center;
+        color: #d0d4dc;
+        transform: rotateZ(180deg);
+      }
+
+      .el-icon-circle-close:hover {
+        opacity: 0.6;
+      }
+
+      span {
+        flex: 1;
+        padding: 0 15px;
+        font-size: 12px;
+        color: $placeholderColor;
+      }
+    }
+  }
+</style>