i

src/pages/admin/withdrawal/index.vue

@@ -1,15 +1,197 @@
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
+import {ref, h} from 'vue'
+import Taro from '@tarojs/taro'
+import {getWithdrawList, addWithdraw} from '@/api/admin'
 
-export default defineComponent({
-name: "index"
+const user_info = Taro.getStorageSync('userInfo')
+
+const row = ref(0)
+
+const basicData = ref({
+  num: ''
 })
+
+const showPreview = ref(false)
+
+const imgData = ref([{
+  src: ''
+}])
+
+const columns = ref([
+  {
+    title: '时间',
+    key: 'add_time',
+    align: 'center'
+  }, {
+    title: '提现金额',
+    key: 'integral',
+    align: 'center',
+    render: (row: { integral: number; }) => {
+      return h('view', {}, row.integral / 100)
+    }
+  },
+  {
+    title: '审核状态',
+    key: 'status',
+    align: 'center',
+    render: (row: { status: number; }) => {
+      return h('view', {
+        class: `tag ${row.status === 1 ? 'success' : row.status === 2 ? 'danger' : 'warning'}`
+      }, {
+        default: () => row.status === 1 ? '已打款' : row.status === 2 ? '已拒绝' : '待审核'
+      })
+    }
+  },
+  {
+    title: '备注',
+    key: 'img',
+    align: 'center',
+    render: (row: { status_img: string; }) => {
+      return h('img', {
+        class: 'image',
+        onClick: () => {
+          imgData.value[0].src = row.status_img
+          showPreview.value = true
+        },
+        src: row.status_img
+      })
+    }
+  }
+])
+
+const data = ref([])
+
+const pagination = ref({
+  page: 1,
+  itemsPerPage: 5,
+  showPageSize: 5,
+  totalItems: 0,
+  change: (page: number) => {
+    pagination.value.page = page
+    getData()
+  }
+})
+
+const hideFn = () => {
+  showPreview.value = false
+}
+
+Taro.useLoad(() => {
+  getData()
+})
+
+const getData = async () => {
+  try {
+    const res = await getWithdrawList({
+      PageNum: pagination.value.page,
+      PageSize: pagination.value.showPageSize,
+      Bid: user_info.bid
+    })
+    data.value = res.data.data || []
+    pagination.value.totalItems = res.data.total
+    row.value = res.data.integral || 0
+    console.log(res)
+  } catch (e) {
+    throw e
+  }
+}
+
+const add = async () => {
+  try {
+    if (Number(basicData.value.num) === 0) return Taro.showToast({
+      title: '提现积分需大于0',
+      icon: 'none'
+    })
+    const res = await addWithdraw({
+      Bid: user_info.bid,
+      Number: Number(basicData.value.num)
+    })
+    Taro.showToast({
+      title: res.msg,
+      icon: 'none'
+    })
+    await getData()
+  } catch (e) {
+    throw e
+  }
+}
 </script>
 
 <template>
-  $END$
+  <view>
+    <nut-form>
+      <nut-form-item label="提现积分：">
+        <nut-input v-model="basicData.num" class="nut-input-text" placeholder="请输入提现积分" type="text"/>
+      </nut-form-item>
+      <nut-form-item>
+        <view>
+          当前可提现积分：
+          <text class="text-red">{{ row }}</text>
+        </view>
+        <view style="margin-top: 10px">
+          实际到账：
+          <text class="text-red">{{ (row / 100).toFixed(2) }}</text>
+          元
+        </view>
+      </nut-form-item>
+      <nut-form-item>
+        <nut-button block type="primary" @click="add">立即提现</nut-button>
+      </nut-form-item>
+    </nut-form>
+    <view v-if="data.length > 0">
+      <view class="data">
+        <nut-table :columns="columns" :data="data"></nut-table>
+        <nut-pagination class="pagination" v-model="pagination.page" :total-items="pagination.totalItems"
+                        :items-per-page="pagination.itemsPerPage" :show-page-size="pagination.showPageSize"
+                        @change="pagination.change" :bordered="false"/>
+      </view>
+    </view>
+    <nut-empty v-else description="暂无提现记录"></nut-empty>
+    <!--    图片预览    -->
+    <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn"/>
+  </view>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 
+.text-red {
+  color: red;
+}
+
+.data {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #fff;
+  padding: 10px;
+
+  .pagination {
+    margin: 10px auto;
+  }
+}
+
+.tag {
+  width: 100%;
+  padding: 5px 8px;
+  color: white;
+  border-radius: 8px;
+  margin: 0 auto;
+}
+
+.success {
+  background-color: #4fc08d;
+}
+
+.danger {
+  background-color: #df3526;
+}
+
+.warning {
+  background-color: #f3812e;
+}
+
+.image {
+  width: 50px;
+  height: 50px;
+}
 </style>