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

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>