Merge branch 'iteration-20240708-question' into ponline

src/views/goods-order/after-sale.tsx

@@ -1,420 +1,450 @@
-import ColHeader from '@/components/col-header'
-import ColResult from '@/components/col-result'
-import request from '@/helpers/request'
-import { state } from '@/state'
-import {
-  ActionSheet,
-  Button,
-  Cell,
-  CellGroup,
-  Dialog,
-  Field,
-  Image,
-  List,
-  Tab,
-  Tabs,
-  Toast
-} from 'vant'
-import { defineComponent } from 'vue'
-import Item from './item'
-import styles from './index.module.less'
-
-const returnState = {
-  0: '待处理',
-  1: '退货中',
-  2: '已完成',
-  3: '已拒绝'
-}
-type good = {
-  description: string
-  memberUsername: string
-  orderId: number
-  orderSn: string
-  productAttr: string
-  productBrand: string
-  productCount: number
-  productId: number
-  productName: string
-  productPic: string
-  productPrice: number
-  productRealPrice: number
-  proofPics: string
-  returnName: string
-  returnPhone: string
-  orderItemId: string
-}
-
-export default defineComponent({
-  name: 'after-sale',
-  data() {
-    return {
-      active: '0',
-      list: [],
-      dataShow: false, // 判断是否有数据
-      loading: false,
-      finished: false,
-      show: false,
-      kmsShow: false,
-      params: {
-        pageNum: 1,
-        pageSize: 20
-      },
-
-      returnGood: {} as good,
-      reason: '', // 退货原因
-      returnOrderSn: '', // 退货快递单号
-      returnGoodId: 0 // 退货申请服务单号
-    }
-  },
-  watch: {
-    active() {
-      this.init()
-      this.getList()
-    }
-  },
-  mounted() {
-    this.getList()
-  },
-  methods: {
-    init() {
-      this.params.pageNum = 1
-      this.finished = false
-      this.list = []
-    },
-
-    async getList() {
-      //避免重复请求
-      console.log(this.loading, this.finished)
-      if (this.loading && this.finished) {
-        return
-      }
-      this.loading = true
-      let res: any
-      if (this.active === '0') {
-        // 可退货列表
-        res = await this.getIsReturnOrderList()
-      } else {
-        // 退货申请列表
-        res = await this.getReturnList()
-      }
-      if (res && res.code === 200 && res.data.list) {
-        let data = res.data
-        if (Array.isArray(data.list)) {
-          let list = [] as any
-          // 过滤一个订单里面所有商品都申请了退货
-          for (let i = 0; i < data.list.length; i++) {
-            if (data.list[i].orderItemList) {
-              let isHave =
-                data.list[i].orderItemList.findIndex(n => n.returnStatus < 0) >
-                -1
-              if (isHave) {
-                list.push(data.list[i])
-              }
-            } else {
-              list.push(data.list[i])
-            }
-          }
-          this.list = this.list.concat(this.list, list)
-        }
-        // this.list = [].concat(this.list, res.data.list)
-
-        this.params.pageNum = res.data.pageNum + 1
-      }
-      this.finished = this.params.pageNum >= res?.data?.totalPage
-      this.loading = false
-    },
-
-    //获取可退货列表
-    async getIsReturnOrderList(): Promise<object> {
-      try {
-        let res = await request.get('/api-mall-portal/order/list', {
-          params: {
-            ...this.params,
-            status: '1,2,3'
-          }
-        })
-        return res
-      } catch (error) {}
-      return {}
-    },
-
-    // 获取退货申请
-    async getReturnList(): Promise<object> {
-      try {
-        let res = await request.post('/api-mall-portal/returnApply/list', {
-          data: {
-            ...this.params,
-            status: this.active === '1' ? '0,1' : '2,3'
-          }
-        })
-        return res
-      } catch (error) {}
-      return {}
-    },
-
-    // 设置退货参数
-    setReturnParams(item: any, n: any): void {
-      this.returnGood.memberUsername = state.user.data.username
-      this.returnGood.orderId = item.id
-      this.returnGood.orderSn = item.orderSn
-      this.returnGood.productAttr = n.productAttr
-      this.returnGood.productBrand = n.productBrand
-      this.returnGood.productCount = n.productQuantity
-      this.returnGood.productId = n.productId
-      this.returnGood.productName = n.productName
-      this.returnGood.productPic = n.productPic
-      this.returnGood.productPrice = n.productPrice
-      this.returnGood.productRealPrice = n.productPrice
-      this.returnGood.proofPics = ''
-      this.returnGood.returnName = item.receiverName
-      this.returnGood.returnPhone = item.receiverPhone
-      this.returnGood.orderItemId = n.id
-      console.log(this.returnGood)
-    },
-    // 退商品
-    async setReturnShop(): Promise<void> {
-      if (!this.reason) {
-        Toast('请填写退货原因!')
-        return
-      }
-      try {
-        let res = await request.post('/api-mall-portal/returnApply/create', {
-          data: {
-            ...this.returnGood,
-            reason: this.reason
-          }
-        })
-        if (res.code === 200) {
-          Toast({
-            message: '退货申请成功',
-            icon: 'success'
-          })
-          setTimeout(() => {
-            this.show = false
-            this.reason = ''
-            this.returnOrderSn = ''
-            this.active = '1'
-          }, 500)
-        }
-      } catch (error) {}
-      this.returnGood = {} as good
-    },
-
-    // 填写快递单号
-    async setReturnApplySn(): Promise<void> {
-      if (!this.returnOrderSn) {
-        Toast('请填写退货快递单号')
-        return
-      }
-
-      try {
-        let { code, data } = await request.post(
-          '/api-mall-portal/returnApply/deliverySn',
-          {
-            data: {
-              deliverySn: this.returnOrderSn,
-              id: this.returnGoodId
-            }
-          }
-        )
-        if (code === 200) {
-          this.returnOrderSn = ''
-          this.kmsShow = false
-          this.init()
-          this.getList()
-        }
-      } catch (error) {}
-    },
-    //撤销申请
-    deleteReturnApply(): void {
-      Dialog.confirm({
-        title: '提示',
-        message: '是否撤销退货申请?',
-        confirmButtonText: '撤销',
-        confirmButtonColor: 'var(--van-primary)'
-      }).then(async () => {
-        try {
-          let { code, data } = await request.post(
-            '/api-mall-portal/returnApply/delete/' + this.returnGoodId
-          )
-          if (code === 200) {
-            this.init()
-            this.getList()
-          }
-        } catch (err) {}
-      })
-    }
-  },
-  render() {
-    const tabs = [
-      { name: '0', title: '全部' },
-      { name: '1', title: '处理中' },
-      { name: '2', title: '已处理' }
-    ]
-    return (
-      <div class={styles.shopOrder}>
-        <ColHeader />
-
-        <Tabs
-          v-model:active={this.active}
-          color="var(--van-primary)"
-          lineWidth={28}
-          animated
-          swipeable
-        >
-          {tabs.map(tab => (
-            <Tab name={tab.name} title={tab.title}>
-              {this.list.length ? (
-                <List
-                  loading={this.loading}
-                  finished={this.finished}
-                  finishedText=" "
-                  class={[styles.goodsList]}
-                  onLoad={this.getList}
-                >
-                  {this.active === tab.name &&
-                    this.list.map((item: any) => (
-                      <>
-                        {item.orderItemList && item.orderItemList.length ? (
-                          item.orderItemList.map((n: any) => (
-                            <CellGroup class={styles.cellGroup}>
-                              <Item item={n} />
-                              <Cell
-                                center
-                                v-slots={{
-                                  default: () => (
-                                    <div class={styles.btnList}>
-                                      {this.active === '0' &&
-                                      n.returnStatus < 0 && (item.status == 3 ? (item.afterSale == 0) : true) ? (
-                                        <Button
-                                          size="small"
-                                          round
-                                          type="primary"
-                                          onClick={() => {
-                                            this.show = true
-                                            this.setReturnParams(item, n)
-                                          }}
-                                        >
-                                          退货申请
-                                        </Button>
-                                      ) : null}
-                                      {n.returnStatus >= 0 ? (
-                                        <div>{returnState[n.returnStatus]}</div>
-                                      ) : null}
-                                    </div>
-                                  )
-                                }}
-                              ></Cell>
-                            </CellGroup>
-                          ))
-                        ) : (
-                          <CellGroup class={styles.cellGroup}>
-                            <Cell
-                              title={item.createTime}
-                              titleClass={styles.payTime}
-                              value={returnState[item.status]}
-                              // valueClass={}
-                            ></Cell>
-                            <Item item={item} />
-                            <Cell
-                              center
-                              v-slots={{
-                                default: () => (
-                                  <div class={styles.btnList}>
-                                    {item.status === 1 && !item.deliverySn ? (
-                                      <Button
-                                        size="small"
-                                        round
-                                        onClick={() => {
-                                          this.returnGoodId = item.id
-                                          this.kmsShow = true
-                                        }}
-                                      >
-                                        填写退货快递单号
-                                      </Button>
-                                    ) : null}
-                                    {item.status <= 1 ? (
-                                      <Button
-                                        size="small"
-                                        round
-                                        type="primary"
-                                        onClick={() => {
-                                          this.returnGoodId = item.id
-                                          this.deleteReturnApply()
-                                        }}
-                                      >
-                                        撤销申请
-                                      </Button>
-                                    ) : null}
-                                    {item.status === 2 ? (
-                                      <div class={styles.returnDes}>
-                                        该商品金额已于 {item.handleTime}{' '}
-                                        原路退还
-                                      </div>
-                                    ) : item.status === 3 ? (
-                                      <div class={styles.returnDes}>
-                                        拒绝原因: {item.handleNote}
-                                      </div>
-                                    ) : null}
-                                  </div>
-                                )
-                              }}
-                            ></Cell>
-                          </CellGroup>
-                        )}
-                      </>
-                    ))}
-                </List>
-              ) : (
-                <ColResult
-                  btnStatus={false}
-                  classImgSize="SMALL"
-                  tips="暂无数据"
-                />
-              )}
-            </Tab>
-          ))}
-        </Tabs>
-
-        <ActionSheet v-model:show={this.show} title="退货原因">
-          <div style={{ paddingTop: '15px' }}>
-            <Field
-              class={[styles.field]}
-              placeholder="请输入退货原因"
-              type="textarea"
-              rows={3}
-              v-model={this.reason}
-            />
-          </div>
-          <div class={styles['btn-group']}>
-            <Button
-              type="primary"
-              block
-              round
-              onClick={() => this.setReturnShop()}
-            >
-              确定
-            </Button>
-          </div>
-        </ActionSheet>
-        <ActionSheet v-model:show={this.kmsShow} title="填写退货快递单号">
-          <Field
-            v-model={this.returnOrderSn}
-            class={[styles.field]}
-            placeholder="请输入退货快递单号"
-          />
-          <div class={styles['btn-group']}>
-            <Button
-              type="primary"
-              block
-              round
-              onClick={() => this.setReturnApplySn()}
-            >
-              确定
-            </Button>
-          </div>
-        </ActionSheet>
-      </div>
-    )
-  }
-})
+import ColHeader from '@/components/col-header'
+import ColResult from '@/components/col-result'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import {
+  ActionSheet,
+  Button,
+  Cell,
+  CellGroup,
+  Dialog,
+  Field,
+  Image,
+  List,
+  Tab,
+  Tabs,
+  Toast
+} from 'vant'
+import { defineComponent } from 'vue'
+import Item from './item'
+import styles from './index.module.less'
+
+const returnState = {
+  0: '待处理',
+  1: '退货中',
+  2: '已完成',
+  3: '已拒绝'
+}
+type good = {
+  description: string
+  memberUsername: string
+  orderId: number
+  orderSn: string
+  productAttr: string
+  productBrand: string
+  productCount: number
+  productId: number
+  productName: string
+  productPic: string
+  productPrice: number
+  productRealPrice: number
+  proofPics: string
+  returnName: string
+  returnPhone: string
+  orderItemId: string
+}
+
+export default defineComponent({
+  name: 'after-sale',
+  data() {
+    return {
+      active: '0',
+      list: [],
+      dataShow: false, // 判断是否有数据
+      loading: false,
+      finished: false,
+      show: false,
+      kmsShow: false,
+      params: {
+        pageNum: 1,
+        pageSize: 20
+      },
+
+      returnGood: {} as good,
+      reason: '', // 退货原因
+      returnOrderSn: '', // 退货快递单号
+      returnGoodId: 0 // 退货申请服务单号
+    }
+  },
+  watch: {
+    active() {
+      this.init()
+      this.getList()
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    init() {
+      this.params.pageNum = 1
+      this.finished = false
+      this.list = []
+    },
+
+    async getList() {
+      //避免重复请求
+      console.log(this.loading, this.finished)
+      if (this.loading && this.finished) {
+        return
+      }
+      this.loading = true
+      let res: any
+      if (this.active === '0') {
+        // 可退货列表
+        res = await this.getIsReturnOrderList()
+      } else {
+        // 退货申请列表
+        res = await this.getReturnList()
+      }
+      if (res && res.code === 200 && res.data.list) {
+        const data = res.data
+        if (Array.isArray(data.list)) {
+          const list = [] as any
+          // 过滤一个订单里面所有商品都申请了退货
+          for (let i = 0; i < data.list.length; i++) {
+            if (data.list[i].orderItemList) {
+              const isHave =
+                data.list[i].orderItemList.findIndex(n => n.returnStatus < 0) >
+                -1
+              if (isHave) {
+                list.push(data.list[i])
+              }
+            } else {
+              list.push(data.list[i])
+            }
+          }
+          this.list = this.list.concat(this.list, list)
+        }
+        // this.list = [].concat(this.list, res.data.list)
+
+        this.params.pageNum = res.data.pageNum + 1
+      }
+      this.finished = this.params.pageNum >= res?.data?.totalPage
+      this.loading = false
+    },
+
+    //获取可退货列表
+    async getIsReturnOrderList(): Promise<object> {
+      try {
+        const res = await request.get('/api-mall-portal/order/list', {
+          params: {
+            ...this.params,
+            status: '1,2,3'
+          }
+        })
+        return res
+      } catch (error) {}
+      return {}
+    },
+
+    // 获取退货申请
+    async getReturnList(): Promise<object> {
+      try {
+        const res = await request.post('/api-mall-portal/returnApply/list', {
+          data: {
+            ...this.params,
+            status: this.active === '1' ? '0,1' : '2,3'
+          }
+        })
+        return res
+      } catch (error) {}
+      return {}
+    },
+
+    // 设置退货参数
+    setReturnParams(item: any, n: any): void {
+      this.returnGood.memberUsername = state.user.data.username
+      this.returnGood.orderId = item.id
+      this.returnGood.orderSn = item.orderSn
+      this.returnGood.productAttr = n.productAttr
+      this.returnGood.productBrand = n.productBrand
+      this.returnGood.productCount = n.productQuantity
+      this.returnGood.productId = n.productId
+      this.returnGood.productName = n.productName
+      this.returnGood.productPic = n.productPic
+      this.returnGood.productPrice = n.productPrice
+      this.returnGood.productRealPrice = n.productPrice
+      this.returnGood.proofPics = ''
+      this.returnGood.returnName = item.receiverName
+      this.returnGood.returnPhone = item.receiverPhone
+      this.returnGood.orderItemId = n.id
+      console.log(this.returnGood)
+    },
+    // 退商品
+    async setReturnShop(): Promise<void> {
+      if (!this.reason) {
+        Toast('请填写退货原因!')
+        return
+      }
+      try {
+        const res = await request.post('/api-mall-portal/returnApply/create', {
+          data: {
+            ...this.returnGood,
+            reason: this.reason
+          }
+        })
+        if (res.code === 200) {
+          Toast({
+            message: '退货申请成功',
+            icon: 'success'
+          })
+          setTimeout(() => {
+            this.show = false
+            this.reason = ''
+            this.returnOrderSn = ''
+            this.active = '1'
+          }, 500)
+        }
+      } catch (error) {}
+      this.returnGood = {} as good
+    },
+
+    // 填写快递单号
+    async setReturnApplySn(): Promise<void> {
+      if (!this.returnOrderSn) {
+        Toast('请填写退货快递单号')
+        return
+      }
+
+      try {
+        const { code, data } = await request.post(
+          '/api-mall-portal/returnApply/deliverySn',
+          {
+            data: {
+              deliverySn: this.returnOrderSn,
+              id: this.returnGoodId
+            }
+          }
+        )
+        if (code === 200) {
+          this.returnOrderSn = ''
+          this.kmsShow = false
+          this.init()
+          this.getList()
+        }
+      } catch (error) {}
+    },
+    //撤销申请
+    deleteReturnApply(): void {
+      Dialog.confirm({
+        title: '提示',
+        message: '是否撤销退货申请?',
+        confirmButtonText: '撤销',
+        confirmButtonColor: 'var(--van-primary)'
+      }).then(async () => {
+        try {
+          const { code, data } = await request.post(
+            '/api-mall-portal/returnApply/delete/' + this.returnGoodId
+          )
+          if (code === 200) {
+            this.init()
+            this.getList()
+          }
+        } catch (err) {}
+      })
+    }
+  },
+  render() {
+    const tabs = [
+      { name: '0', title: '可退商品' },
+      { name: '1', title: '处理中' },
+      { name: '2', title: '已处理' }
+    ]
+    return (
+      <div class={styles.shopOrder}>
+        <ColHeader />
+
+        <Tabs
+          v-model:active={this.active}
+          color="var(--van-primary)"
+          lineWidth={28}
+          animated
+          swipeable
+        >
+          {tabs.map(tab => (
+            <Tab name={tab.name} title={tab.title}>
+              {this.list.length ? (
+                <List
+                  loading={this.loading}
+                  finished={this.finished}
+                  finishedText=" "
+                  class={[styles.goodsList]}
+                  onLoad={this.getList}
+                >
+                  {this.active === tab.name &&
+                    this.list.map((item: any) => (
+                      <>
+                        {item.orderItemList && item.orderItemList.length ? (
+                          item.orderItemList.map((n: any) => (
+                            <CellGroup class={styles.cellGroup}>
+                              <Cell
+                                title={item.createTime}
+                                titleClass={styles.payTime}
+                                // value={returnState[item.status]}
+                                // valueClass={}
+                              ></Cell>
+                              <Item item={n} />
+                              <Cell
+                                center
+                                class={styles.bottomCell}
+                                v-slots={{
+                                  title: () => <>订单编号：{n.orderSn}</>,
+                                  default: () => (
+                                    <div class={styles.btnList}>
+                                      {this.active === '0' &&
+                                      n.returnStatus < 0 &&
+                                      (item.status == 3
+                                        ? item.afterSale == 0
+                                        : true) ? (
+                                        <Button
+                                          size="small"
+                                          round
+                                          onClick={() => {
+                                            this.show = true
+                                            this.setReturnParams(item, n)
+                                          }}
+                                        >
+                                          退货申请
+                                        </Button>
+                                      ) : null}
+                                      {n.returnStatus >= 0 ? (
+                                        <div>{returnState[n.returnStatus]}</div>
+                                      ) : null}
+                                    </div>
+                                  )
+                                }}
+                              ></Cell>
+                            </CellGroup>
+                          ))
+                        ) : (
+                          <CellGroup class={styles.cellGroup}>
+                            <Cell
+                              title={item.createTime}
+                              titleClass={styles.payTime}
+                              value={returnState[item.status]}
+                              // valueClass={}
+                            ></Cell>
+                            <Item item={item} />
+                            <Cell
+                              center
+                              v-slots={{
+                                default: () => (
+                                  <div class={styles.sectionCell}>
+                                    {item.status !== 2 && item.status !== 3 && (
+                                      <div class={styles.orderSn}>
+                                        订单编号：{item.orderSn}
+                                      </div>
+                                    )}
+                                    <div class={styles.btnList}>
+                                      {item.status === 1 && !item.deliverySn ? (
+                                        <Button
+                                          size="small"
+                                          round
+                                          onClick={() => {
+                                            this.returnGoodId = item.id
+                                            this.kmsShow = true
+                                          }}
+                                        >
+                                          填写退货快递单号
+                                        </Button>
+                                      ) : null}
+                                      {item.status <= 1 ? (
+                                        <Button
+                                          size="small"
+                                          round
+                                          type="primary"
+                                          onClick={() => {
+                                            this.returnGoodId = item.id
+                                            this.deleteReturnApply()
+                                          }}
+                                        >
+                                          撤销申请
+                                        </Button>
+                                      ) : null}
+                                      {item.status === 2 ? (
+                                        <div class={styles.returnSection}>
+                                          <div class={styles.orderSn}>
+                                            订单编号：{item.orderSn}
+                                          </div>
+                                          <div class={styles.returnDes}>
+                                            <i class={styles.iconChecked}></i>
+                                            该商品金额已于 {
+                                              item.handleTime
+                                            }{' '}
+                                            原路退还
+                                          </div>
+                                        </div>
+                                      ) : item.status === 3 ? (
+                                        <div class={styles.returnSection}>
+                                          <div class={styles.orderSn}>
+                                            订单编号：{item.orderSn}
+                                          </div>
+                                          <div class={styles.returnDes}>
+                                            拒绝原因: {item.handleNote}
+                                          </div>
+                                        </div>
+                                      ) : null}
+                                    </div>
+                                  </div>
+                                )
+                              }}
+                            ></Cell>
+                          </CellGroup>
+                        )}
+                      </>
+                    ))}
+                </List>
+              ) : (
+                <ColResult
+                  btnStatus={false}
+                  classImgSize="SMALL"
+                  tips="暂无数据"
+                />
+              )}
+            </Tab>
+          ))}
+        </Tabs>
+
+        <ActionSheet v-model:show={this.show} title="退货原因">
+          <div style={{ paddingTop: '15px' }}>
+            <Field
+              class={[styles.field]}
+              placeholder="请输入退货原因"
+              type="textarea"
+              rows={3}
+              v-model={this.reason}
+            />
+          </div>
+          <div class={styles['btn-group']}>
+            <Button
+              type="primary"
+              block
+              round
+              onClick={() => this.setReturnShop()}
+            >
+              确定
+            </Button>
+          </div>
+        </ActionSheet>
+        <ActionSheet v-model:show={this.kmsShow} title="填写退货快递单号">
+          <Field
+            v-model={this.returnOrderSn}
+            class={[styles.field]}
+            placeholder="请输入退货快递单号"
+          />
+          <div class={styles['btn-group']}>
+            <Button
+              type="primary"
+              block
+              round
+              onClick={() => this.setReturnApplySn()}
+            >
+              确定
+            </Button>
+          </div>
+        </ActionSheet>
+      </div>
+    )
+  }
+})

src/views/goods-order/index.module.less

@@ -1,119 +1,165 @@
-.shopOrder {
-  --van-nav-bar-text-color: #666666;
-  :global {
-    .van-tab__panel {
-      min-height: calc(100vh - var(--van-tabs-line-height) - var(--van-nav-bar-height) - 45px);
-    }
-  }
-}
-
-.goodsList {
-  margin-top: 12px;
-}
-
-.payTime {
-  font-size: 13px;
-  color: #666666;
-}
-.payStatus {
-  color: #ff4e19;
-}
-.paySuccess {
-  color: var(--van-primary);
-}
-
-.cellGroup {
-  margin: 12px 14px;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.goodsImg {
-  width: 100px;
-  height: 100px;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.goodsContainer {
-  margin-left: 10px;
-}
-
-.goodsTitle {
-  font-size: 16px;
-  color: #333333;
-  line-height: 22px;
-}
-
-.model {
-  font-size: 14px;
-  color: #999999;
-  line-height: 20px;
-  padding: 6px 0 10px 0;
-}
-
-.goodsPrice {
-  display: flex;
-  justify-content: space-between;
-
-  .num {
-    font-size: 12px;
-    font-weight: 500;
-    color: #666666;
-    line-height: 17px;
-  }
-}
-
-.btnList {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  :global {
-    .van-button + .van-button {
-      margin-left: 10px;
-    }
-  }
-}
-
-.price {
-  color: #ff4e19;
-  font-size: 16px;
-  i {
-    font-size: 12px;
-    font-style: normal;
-  }
-}
-.coupon{
-  font-size: 12px;
-  color: #ff4e19;
-}
-
-.sureGoods {
-  padding-right: 12px;
-  font-size: 12px;
-  color: #999999;
-  line-height: 17px;
-}
-
-.field {
-  margin: 0 26px 13px;
-  border: 1px solid #dedede;
-  width: auto;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.btn-group {
-  padding: 0 15% 12px;
-}
-.returnDes {
-  color: #666;
-  font-size: 14px;
-  margin-right: auto;
-}
-
-.confirmReceipt{
-  font-size: 12px;
-  color: #999;
-  margin-right: 19px;
-}
+.shopOrder {
+  --van-nav-bar-text-color: #666666;
+
+  :global {
+    .van-tab__panel {
+      min-height: calc(100vh - var(--van-tabs-line-height) - var(--van-nav-bar-height) - 45px);
+    }
+  }
+}
+
+.goodsList {
+  margin-top: 12px;
+}
+
+.payTime {
+  font-size: 13px;
+  color: #666666;
+}
+
+.payStatus {
+  color: #ff4e19;
+}
+
+.paySuccess {
+  color: var(--van-primary);
+}
+
+.cellGroup {
+  margin: 12px 14px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.goodsImg {
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.goodsContainer {
+  margin-left: 10px;
+}
+
+.goodsTitle {
+  font-size: 16px;
+  color: #333333;
+  line-height: 22px;
+}
+
+.model {
+  font-size: 14px;
+  color: #999999;
+  line-height: 20px;
+  padding: 6px 0 10px 0;
+}
+
+.goodsPrice {
+  display: flex;
+  justify-content: space-between;
+
+  .num {
+    font-size: 12px;
+    font-weight: 500;
+    color: #666666;
+    line-height: 17px;
+  }
+}
+
+.btnList {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  :global {
+    .van-button+.van-button {
+      margin-left: 10px;
+    }
+  }
+}
+
+.price {
+  color: #ff4e19;
+  font-size: 16px;
+
+  i {
+    font-size: 12px;
+    font-style: normal;
+  }
+}
+
+.coupon {
+  font-size: 12px;
+  color: #ff4e19;
+}
+
+.sureGoods {
+  padding-right: 12px;
+  font-size: 12px;
+  color: #999999;
+  line-height: 17px;
+}
+
+.field {
+  margin: 0 26px 13px;
+  border: 1px solid #dedede;
+  width: auto;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.btn-group {
+  padding: 0 15% 12px;
+}
+
+.returnDes {
+  font-size: 13px;
+  color: #1FBD9F;
+  padding-top: 8px;
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.confirmReceipt {
+  font-size: 12px;
+  color: #999;
+  margin-right: 19px;
+}
+
+
+.bottomCell {
+  :global {
+    .van-cell__title {
+      font-size: 13px;
+      color: #AAAAAA;
+    }
+
+    .van-cell__value {
+      flex: 0 auto;
+    }
+  }
+}
+
+.sectionCell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .orderSn {
+    font-size: 13px;
+    color: #AAAAAA;
+  }
+
+  .iconChecked {
+    flex-shrink: 0;
+    background: url('@/common/images/icon_checkbox.png') no-repeat center;
+    background-size: contain;
+    width: 13px;
+    height: 13px;
+    margin-right: 4px;
+    display: inline-block;
+  }
+}

src/views/goods-order/index.tsx

@@ -1,232 +1,235 @@
-import ColHeader from '@/components/col-header'
-import ColResult from '@/components/col-result'
-import request from '@/helpers/request'
-import { Button, Cell, CellGroup, Dialog, Image, List, Tab, Tabs } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import { orderState } from '@/views/shop-mall/shop-mall'
-import { cartConfirm } from '@/views/cart/cart'
-import Item from './item'
-import AfterSaleBtns from './components/after-sale-btns'
-import { useEventTracking } from '@/helpers/hooks'
-
-export default defineComponent({
-  name: 'shop-order',
-  data() {
-    return {
-      active: 0,
-      list: [],
-      dataShow: true, // 判断是否有数据
-      loading: false,
-      finished: false,
-      params: {
-        search: '',
-        groupStatus: 'APPLY',
-        page: 1,
-        rows: 20
-      },
-      page: {
-        pageNum: 1,
-        pageSize: 20
-      },
-    }
-  },
-  watch: {
-    active(val) {
-      this.init()
-      this.getList()
-    }
-  },
-  mounted(){
-    useEventTracking('订单')
-  },
-  methods: {
-    init() {
-      this.page.pageNum = 1
-      this.finished = false
-      this.list = []
-      this.dataShow = true
-    },
-    async getList() {
-      if (this.loading || this.finished) {
-        return
-      }
-      this.loading = true
-      try {
-        let { code, data } = await request.get('/api-mall-portal/order/list', {
-          params: {
-            ...this.page,
-            status:
-              this.active === 0 ? '0,6' : this.active === 1 ? '1,2' : '3,4'
-          }
-        })
-
-        if (code === 200 && data.list) {
-          this.page.pageNum += 1
-          this.list = [].concat(this.list as any, data.list)
-        }
-        if (this.list.length >= data.total) {
-          this.finished = true
-        }
-
-        if (this.list.length === 0) {
-          this.dataShow = false
-        }
-      } catch (error) {
-        this.finished = true
-        this.dataShow = false
-      }
-      this.loading = false
-    },
-    onClickRight() {
-      this.$router.push('/afterSale')
-    },
-
-    async cancelOrder(item: any) {
-      let dialog = await Dialog.confirm({
-        title: '提示',
-        message: '确认取消订单?',
-        confirmButtonText: '取消订单',
-        confirmButtonColor: 'var(--van-primary)'
-      })
-      if (dialog === 'confirm') {
-        let { code, data } = await request.post(
-          '/api-mall-portal/order/cancelUserOrder',
-          { params: { orderId: item.id } }
-        )
-        if (code === 200) {
-          this.init()
-          this.getList()
-        }
-      }
-    },
-    payOrder(item: any) {
-      cartConfirm.orderInfo = item
-      this.$router.push({ path: '/cartConfirmAgin' })
-    },
-
-    // 再来一单
-    async onAginOrder(item: any) {
-      try {
-        let res = await request.post('/api-mall-portal/order/oneOrder', {
-          params: {
-            orderId: item.id
-          }
-        })
-        let { code, data } = res
-        if (code === 200) {
-          cartConfirm.calcAmount = data.calcAmount
-          cartConfirm.cartPromotionItemList = data.cartPromotionItemList
-          cartConfirm.memberReceiveAddressList = data.memberReceiveAddressList
-          this.$router.push({
-            path: '/cartConfirm'
-          })
-        }
-        console.log(res)
-      } catch (error) {
-      }
-    },
-
-    // 确认收货
-    async onConfirmReceipt(item: any) {
-      let dialog = await Dialog.confirm({
-        title: '提示',
-        message: '确认收货?',
-        confirmButtonText: '收货',
-        confirmButtonColor: 'var(--van-primary)'
-      })
-      if (dialog === 'confirm') {
-        let res = await request.post(
-          '/api-mall-portal/order/confirmReceiveOrder',
-          { params: { orderId: item.id } }
-        )
-        if (res.code === 200) {
-          this.init()
-          this.getList()
-        }
-      }
-    }
-  },
-  render() {
-    const tabs = [
-      { name: 0, title: '待支付' },
-      { name: 1, title: '待收货' },
-      { name: 2, title: '已完成' }
-    ]
-
-    return (
-      <div class={styles.shopOrder}>
-        <ColHeader
-          ref="colHeader"
-          class="header"
-          rightText="售后服务"
-          onClickRight={this.onClickRight}
-        />
-        <Tabs
-          v-model:active={this.active}
-          color="var(--van-primary)"
-          lineWidth={28}
-          animated
-          swipeable
-        >
-          {tabs.map(tab => (
-            <Tab name={tab.name} title={tab.title}>
-              {this.active === tab.name && this.dataShow ? (
-                <List
-                  loading={this.loading}
-                  finished={this.finished}
-                  finishedText=" "
-                  class={[styles.goodsList]}
-                  onLoad={this.getList}
-                >
-                  {this.list.map((item: any) => (
-                    <>
-                      <CellGroup
-                        class={styles.cellGroup}
-                        onClick={() => {
-                          this.$router.push({
-                            path: '/shopOrderDetail',
-                            query: { id: item.id }
-                          })
-                        }}
-                      >
-                        <Cell
-                          title={item.createTime}
-                          titleClass={styles.payTime}
-                          value={orderState[item.status]}
-                          valueClass={
-                            [0, 4, 5, 6].includes(item.status)
-                              ? styles.payStatus
-                              : styles.paySuccess
-                          }
-                        ></Cell>
-                        {item.orderItemList && item.orderItemList.length
-                          ? item.orderItemList.map((n: any) => (
-                              <Item item={n} />
-                            ))
-                          : null}
-                        <AfterSaleBtns
-                          item={item}
-                          onCancelOrder={this.cancelOrder}
-                          onPayOrder={this.payOrder}
-                          onConfirmReceipt={this.onConfirmReceipt}
-                          onAginOrder={this.onAginOrder}
-                        />
-                      </CellGroup>
-                    </>
-                  ))}
-                </List>
-              ) : (
-                <ColResult
-                  btnStatus={false}
-                  classImgSize="SMALL"
-                  tips="暂无订单"
-                />
-              )}
-            </Tab>
-          ))}
-        </Tabs>
-      </div>
-    )
-  }
-})
+import ColHeader from '@/components/col-header'
+import ColResult from '@/components/col-result'
+import request from '@/helpers/request'
+import { Button, Cell, CellGroup, Dialog, Image, List, Tab, Tabs } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import { orderState } from '@/views/shop-mall/shop-mall'
+import { cartConfirm } from '@/views/cart/cart'
+import Item from './item'
+import AfterSaleBtns from './components/after-sale-btns'
+import { useEventTracking } from '@/helpers/hooks'
+
+export default defineComponent({
+  name: 'shop-order',
+  data() {
+    return {
+      active: 0,
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        search: '',
+        groupStatus: 'APPLY',
+        page: 1,
+        rows: 20
+      },
+      page: {
+        pageNum: 1,
+        pageSize: 20
+      }
+    }
+  },
+  watch: {
+    active(val) {
+      this.init()
+      this.getList()
+    }
+  },
+  mounted() {
+    useEventTracking('订单')
+  },
+  methods: {
+    init() {
+      this.page.pageNum = 1
+      this.finished = false
+      this.list = []
+      this.dataShow = true
+    },
+    async getList() {
+      if (this.loading || this.finished) {
+        return
+      }
+      this.loading = true
+      try {
+        const { code, data } = await request.get(
+          '/api-mall-portal/order/list',
+          {
+            params: {
+              ...this.page,
+              status:
+                this.active === 0 ? '0,6' : this.active === 1 ? '1,2' : '3,4'
+            }
+          }
+        )
+
+        if (code === 200 && data.list) {
+          this.page.pageNum += 1
+          this.list = [].concat(this.list as any, data.list)
+        }
+        if (this.list.length >= data.total) {
+          this.finished = true
+        }
+
+        if (this.list.length === 0) {
+          this.dataShow = false
+        }
+      } catch (error) {
+        this.finished = true
+        this.dataShow = false
+      }
+      this.loading = false
+    },
+    onClickRight() {
+      this.$router.push('/afterSale')
+    },
+
+    async cancelOrder(item: any) {
+      const dialog = await Dialog.confirm({
+        title: '提示',
+        message: '确认取消订单?',
+        confirmButtonText: '取消订单',
+        confirmButtonColor: 'var(--van-primary)'
+      })
+      if (dialog === 'confirm') {
+        const { code, data } = await request.post(
+          '/api-mall-portal/order/cancelUserOrder',
+          { params: { orderId: item.id } }
+        )
+        if (code === 200) {
+          this.init()
+          this.getList()
+        }
+      }
+    },
+    payOrder(item: any) {
+      cartConfirm.orderInfo = item
+      this.$router.push({ path: '/cartConfirmAgin' })
+    },
+
+    // 再来一单
+    async onAginOrder(item: any) {
+      try {
+        const res = await request.post('/api-mall-portal/order/oneOrder', {
+          params: {
+            orderId: item.id
+          }
+        })
+        const { code, data } = res
+        if (code === 200) {
+          cartConfirm.calcAmount = data.calcAmount
+          cartConfirm.cartPromotionItemList = data.cartPromotionItemList
+          cartConfirm.memberReceiveAddressList = data.memberReceiveAddressList
+          this.$router.push({
+            path: '/cartConfirm'
+          })
+        }
+        console.log(res)
+      } catch (error) {}
+    },
+
+    // 确认收货
+    async onConfirmReceipt(item: any) {
+      const dialog = await Dialog.confirm({
+        title: '提示',
+        message: '确认收货?',
+        confirmButtonText: '收货',
+        confirmButtonColor: 'var(--van-primary)'
+      })
+      if (dialog === 'confirm') {
+        const res = await request.post(
+          '/api-mall-portal/order/confirmReceiveOrder',
+          { params: { orderId: item.id } }
+        )
+        if (res.code === 200) {
+          this.init()
+          this.getList()
+        }
+      }
+    }
+  },
+  render() {
+    const tabs = [
+      { name: 0, title: '待支付' },
+      { name: 1, title: '待收货' },
+      { name: 2, title: '已完成' }
+    ]
+
+    return (
+      <div class={styles.shopOrder}>
+        <ColHeader
+          ref="colHeader"
+          class="header"
+          rightText="售后服务"
+          onClickRight={this.onClickRight}
+        />
+        <Tabs
+          v-model:active={this.active}
+          color="var(--van-primary)"
+          lineWidth={28}
+          animated
+          swipeable
+        >
+          {tabs.map(tab => (
+            <Tab name={tab.name} title={tab.title}>
+              {this.active === tab.name && this.dataShow ? (
+                <List
+                  loading={this.loading}
+                  finished={this.finished}
+                  finishedText=" "
+                  class={[styles.goodsList]}
+                  onLoad={this.getList}
+                >
+                  {this.list.map((item: any) => (
+                    <>
+                      <CellGroup
+                        class={styles.cellGroup}
+                        border={false}
+                        onClick={() => {
+                          this.$router.push({
+                            path: '/shopOrderDetail',
+                            query: { id: item.id }
+                          })
+                        }}
+                      >
+                        <Cell
+                          title={item.createTime}
+                          titleClass={styles.payTime}
+                          value={orderState[item.status]}
+                          valueClass={
+                            [0, 4, 5, 6].includes(item.status)
+                              ? styles.payStatus
+                              : styles.paySuccess
+                          }
+                        ></Cell>
+                        {item.orderItemList && item.orderItemList.length
+                          ? item.orderItemList.map((n: any) => (
+                              <Item item={n} />
+                            ))
+                          : null}
+                        <AfterSaleBtns
+                          item={item}
+                          onCancelOrder={this.cancelOrder}
+                          onPayOrder={this.payOrder}
+                          onConfirmReceipt={this.onConfirmReceipt}
+                          onAginOrder={this.onAginOrder}
+                        />
+                      </CellGroup>
+                    </>
+                  ))}
+                </List>
+              ) : (
+                <ColResult
+                  btnStatus={false}
+                  classImgSize="SMALL"
+                  tips="暂无订单"
+                />
+              )}
+            </Tab>
+          ))}
+        </Tabs>
+      </div>
+    )
+  }
+})