li.shaoyi 3 роки тому
батько
коміт
6d89177a67

+ 49 - 1
src/packages/mobile/components/base/list/index.less

@@ -1 +1,49 @@
-.app-list {}
+.app-list {
+    background-color: #fff;
+    padding         : 0 .32rem;
+
+    &__table {
+        width     : 100%;
+        text-align: center;
+
+        th {
+            font-size  : .24rem;
+            font-weight: normal;
+            color      : #999;
+        }
+    }
+
+    &__row {
+        position: relative;
+
+        &::after {
+            content       : '';
+            position      : absolute;
+            bottom        : 0;
+            right         : 0;
+            left          : 0;
+            pointer-events: none;
+            border-bottom : 1px solid #eee;
+            transform     : scaleY(.5);
+        }
+    }
+
+    &__column {
+        padding: .16rem;
+
+        &:first-child {
+            text-align  : left;
+            padding-left: 0;
+        }
+
+        &:last-child {
+            text-align   : right;
+            padding-right: 0;
+        }
+    }
+
+    &__cell {
+        display       : flex;
+        flex-direction: column;
+    }
+}

+ 30 - 23
src/packages/mobile/components/base/list/index.vue

@@ -1,30 +1,35 @@
 <template>
     <div class="app-list">
-        <div class="app-list__header">
-            <ul class="app-list__row">
-                <li class="app-list__column" v-for="(column, n) in columns" :key="n">
-                    <slot :name="'column_' + column.prop" :column="column">
-                        {{ column.label }}
-                    </slot>
-                </li>
-            </ul>
-        </div>
-        <List class="app-list__body">
-            <template v-for="(row, index) in dataList" :key="index">
-                <ul class="app-list__row">
-                    <li class="app-list__column" v-for="(column, n) in columns" :key="n">
-                        <slot :name="'row_' + column.prop" :value="row[column.prop]" :row="row">
-                            {{ row[column.prop] }}
-                        </slot>
-                    </li>
-                </ul>
-            </template>
-        </List>
+        <table class="app-list__table" cellspacing="0" cellpadding="0">
+            <!-- <colgroup>
+                <col :width="colWidth" v-for="i in columns.length" :key="i" />
+            </colgroup> -->
+            <thead>
+                <tr class="app-list__row">
+                    <th class="app-list__column" v-for="(column, i) in columns" :key="i">
+                        <div class="app-list__cell">{{ column.label }}</div>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <template v-for="(row, i) in dataList" :key="i">
+                    <tr class="app-list__row">
+                        <td class="app-list__column" :class="column.className" v-for="(column, n) in columns"
+                            :key="i + n.toString()">
+                            <div class="app-list__cell">
+                                <slot :name="column.prop" :value="row[column.prop]" :row="row">{{ row[column.prop] }}
+                                </slot>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+        </table>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { List } from 'vant'
+import { PropType } from 'vue'
 
 defineProps({
     dataList: {
@@ -32,12 +37,14 @@ defineProps({
         required: true,
     },
     columns: {
-        type: Array,
+        type: Array as PropType<Model.TableColumn[]>,
         required: true,
     },
 })
+
+//const colWidth = computed(() => (100 / props.columns.length) + '%')
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 @import './index.less';
 </style>

+ 1 - 8
src/packages/mobile/components/base/pull-refresh/index.vue

@@ -2,9 +2,7 @@
     <PullRefresh class="app-pull-refresh" v-model="refreshing" @refresh="onRefresh">
         <slot name="header"></slot>
         <List ref="listRef" v-model:loading="loading" v-model:error="showError" :finished="finished" @load="onLoad">
-            <template v-for="(item, index) in dataList" :key="index">
-                <slot :item="item" :index="index"></slot>
-            </template>
+            <slot></slot>
             <template #finished>
                 <span>{{ finishedText }}</span>
             </template>
@@ -21,11 +19,6 @@ import { shallowRef, computed, nextTick, PropType } from 'vue'
 import { List, PullRefresh, ListInstance } from 'vant'
 
 const props = defineProps({
-    dataList: {
-        // eslint-disable-next-line
-        type: Array as PropType<any>,
-        required: true
-    },
     pageIndex: {
         type: Number,
         default: 1,

+ 3 - 0
src/packages/mobile/components/modules/echarts-line/index.less

@@ -0,0 +1,3 @@
+.app-echats-line {
+    height: 4rem;
+}

+ 5 - 1
src/packages/mobile/components/modules/echarts-line/index.vue

@@ -45,4 +45,8 @@ watch(() => props.loading, (status) => {
 }, {
     immediate: true
 })
-</script>
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

+ 25 - 54
src/packages/mobile/views/credit/statement/index.vue

@@ -4,31 +4,17 @@
             <app-navbar title="积分流水">
             </app-navbar>
         </template>
-        <app-pull-refresh class="credit-statement__container" :dataList="dataList" v-model:error="error"
-            v-model:pageIndex="pageIndex" :page-count="pageCount" @refresh="onRefresh">
-            <template #header>
-                <ul class="list list-row" v-if="dataList.length">
-                    <li class="list-column">
-                        <span>时间</span>
-                    </li>
-                    <li class="list-column">
-                        <span>操作类型</span>
-                    </li>
-                    <li class="list-column">
-                        <span>积分</span>
-                    </li>
-                </ul>
-            </template>
-            <template #default="{ item }">
-                <ul class="list list-row">
-                    <li class="list-column">
-                        <span>{{ formatDate(item.createtime, 'YYYY-MM-DD') }}</span>
-                        <span>{{ formatDate(item.createtime, 'HH:mm:ss') }}</span>
-                    </li>
-                    <li class="list-column">{{ getScoreConfigTypeName(item.scoreconfigtype) }}</li>
-                    <li class="list-column">{{ item.score }}</li>
-                </ul>
-            </template>
+        <app-pull-refresh v-model:error="error" v-model:pageIndex="pageIndex" :page-count="pageCount"
+            @refresh="onRefresh">
+            <app-list class="credit-statement__table" :columns="columns" :data-list="dataList">
+                <template #createtime="{ value }">
+                    <span>{{ formatDate(value, 'YYYY-MM-DD') }}</span>
+                    <span>{{ formatDate(value, 'HH:mm:ss') }}</span>
+                </template>
+                <template #scoreconfigtype="{ value }">
+                    {{ getScoreConfigTypeName(value) }}
+                </template>
+            </app-list>
         </app-pull-refresh>
     </app-view>
 </template>
@@ -39,11 +25,18 @@ import { formatDate } from '@/filters'
 import { getScoreConfigTypeName } from '@/constants/credit'
 import { useCreditStatementList } from '@/business/credit'
 import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+import AppList from '@mobile/components/base/list/index.vue'
 
 const { pageIndex, pageCount, getCreditStatementList } = useCreditStatementList()
 const dataList = shallowRef<Model.UserScoreLogRsp[]>([])
 const error = shallowRef(false)
 
+const columns: Model.TableColumn[] = [
+    { prop: 'createtime', label: '时间' },
+    { prop: 'scoreconfigtype', label: '操作类型' },
+    { prop: 'score', label: '积分' },
+]
+
 const onRefresh = (finish: () => void) => {
     getCreditStatementList().then((res) => {
         if (pageIndex.value === 1) {
@@ -60,40 +53,18 @@ const onRefresh = (finish: () => void) => {
 
 <style lang="less">
 .credit-statement {
-    &__container {
-        height: 100%;
-        overflow-y: auto;
-
-        .list {
-            display: flex;
-            align-items: center;
-            background-color: #fff;
-
-            &-row {
-                font-size: .32rem;
-                border-bottom: 1px solid #eee;
-                padding: .12rem .32rem;
-            }
-
-            &-column {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-                text-align: center;
-
-                &:first-child {
-                    text-align: left;
-                }
-
-                &:last-child {
-                    text-align: right;
-                }
-
+    &__table {
+        td.app-list__column {
+            &:first-child {
                 span:last-child {
                     color: #999;
                     font-size: .24rem;
                 }
             }
+
+            &:not(:first-child) {
+                font-size: .32rem;
+            }
         }
     }
 }

+ 4 - 0
src/packages/mobile/views/goods/details/index.less

@@ -11,6 +11,10 @@
                 .van-field {
                     padding: 0;
 
+                    &::after {
+                        content: none;
+                    }
+
                     input {
                         width: 100%;
                     }

+ 6 - 5
src/packages/mobile/views/goods/details/index.vue

@@ -61,11 +61,12 @@
                 <span>参考价(元/{{ getGoodsUnitName(details.goodsinfo?.unitid) }})</span>
                 <span>{{ selectedDate.unitprice }}</span>
             </div>
-            <Divider>历史价格走势</Divider>
-            <div class="chart">
-                <component :is="componentMap.get('chart')" :loading="loading" :data-list="chartData"
-                    style="height:200px" />
-            </div>
+            <template v-if="chartData.price.length">
+                <Divider>历史价格走势</Divider>
+                <div class="chart">
+                    <component :is="componentMap.get('chart')" :loading="loading" :data-list="chartData" />
+                </div>
+            </template>
             <Divider>商品详情</Divider>
             <div class="gallery">
                 <template v-for="(url, index) in goodsImages" :key="index">

+ 3 - 3
src/packages/mobile/views/home/components/purchase/index.vue

@@ -7,9 +7,9 @@
         </template>
       </app-navbar>
     </template>
-    <app-pull-refresh class="home-purchase__container" :dataList="dataList" v-model:error="error"
-      v-model:pageIndex="pageIndex" :page-count="pageCount" @refresh="onRefresh">
-      <template #default="{ item }">
+    <app-pull-refresh class="home-purchase__container" v-model:error="error" v-model:pageIndex="pageIndex"
+      :page-count="pageCount" @refresh="onRefresh">
+      <template v-for="(item, index) in dataList" :key="index">
         <Cell @click="$router.push({ name: 'goods-details', query: { wrstandardid: item.wrstandardid } })">
           <template #title>
             <img :src="getImageUrl(item.thumurls)" />

+ 1 - 1
src/packages/mobile/views/news/details/index.less

@@ -22,7 +22,7 @@
         }
 
         >p {
-            font-size  : .32rem;
+            font-size  : .28rem;
             line-height: .48rem;
 
             img {