| @ -0,0 +1,34 @@ | |||||
| .card { | |||||
| justify-content: flex-start; | |||||
| column-gap: 24rpx; | |||||
| padding: 40rpx 32rpx; | |||||
| font-family: PingFang SC; | |||||
| font-weight: 400; | |||||
| line-height: 1.4; | |||||
| background: #FFFFFF; | |||||
| border-radius: 32rpx; | |||||
| } | |||||
| .title { | |||||
| font-size: 32rpx; | |||||
| font-weight: 500; | |||||
| color: #181818; | |||||
| } | |||||
| .row { | |||||
| margin-top: 16rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: flex-start; | |||||
| column-gap: 4rpx; | |||||
| font-size: 28rpx; | |||||
| &-label { | |||||
| color: #8B8B8B; | |||||
| } | |||||
| &-content { | |||||
| color: #393939; | |||||
| } | |||||
| } | |||||
| @ -0,0 +1,82 @@ | |||||
| <template> | |||||
| <view class="flex card"> | |||||
| <view class="info"> | |||||
| <view class="title">绑定申请</view> | |||||
| <view class="row"> | |||||
| <view class="row-label">绑定人:</view> | |||||
| <view class="row-content">{{ data.name }}</view> | |||||
| </view> | |||||
| <view class="row"> | |||||
| <view class="row-label">申请人ID:</view> | |||||
| <view class="row-content">{{ data.userId }}</view> | |||||
| </view> | |||||
| <view class="row"> | |||||
| <view class="row-label">申请时间:</view> | |||||
| <view class="row-content">{{ data.createTime }}</view> | |||||
| </view> | |||||
| <view class="btns"> | |||||
| <button class="btn" @click="onReject">拒绝</button> | |||||
| <button class="btn" @click="onConfirm">同意</button> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| props: { | |||||
| data: { | |||||
| type: Object, | |||||
| default() { | |||||
| return {} | |||||
| } | |||||
| }, | |||||
| value: { | |||||
| type: String, | |||||
| default: null, | |||||
| }, | |||||
| showRadio: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| onReject() { | |||||
| // todo: fetch reject | |||||
| this.$emit('submitted') | |||||
| }, | |||||
| onConfirm() { | |||||
| // todo: fetch confirm | |||||
| this.$emit('submitted') | |||||
| }, | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| @import './card.scss'; | |||||
| .btns { | |||||
| margin-top: 16rpx; | |||||
| } | |||||
| .btn { | |||||
| padding: 10rpx 50rpx; | |||||
| font-family: PingFang SC; | |||||
| font-size: 28rpx; | |||||
| font-weight: 500; | |||||
| line-height: 1.4; | |||||
| color: #252545; | |||||
| border: 2rpx solid #252545; | |||||
| border-radius: 32rpx; | |||||
| & + & { | |||||
| margin-left: 24rpx; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,257 @@ | |||||
| <template> | |||||
| <view class="page__view"> | |||||
| <navbar title="绑定申请" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" /> | |||||
| <view class="main"> | |||||
| <view class="card"> | |||||
| <view class="card-header">绑定申请</view> | |||||
| <view class="form"> | |||||
| <uv-form | |||||
| ref="form" | |||||
| :model="form" | |||||
| :rules="rules" | |||||
| errorType="toast" | |||||
| > | |||||
| <view class="form-item"> | |||||
| <uv-form-item prop="id" :customStyle="formItemStyle"> | |||||
| <view class="form-item-label">绑定人ID</view> | |||||
| <view class="form-item-content"> | |||||
| <view class="flex search"> | |||||
| <uv-search | |||||
| v-model="keyword" | |||||
| placeholder="请输入" | |||||
| color="#181818" | |||||
| bgColor="transparent" | |||||
| :showAction="true" | |||||
| @custom="search" | |||||
| @search="search" | |||||
| > | |||||
| </uv-search> | |||||
| </view> | |||||
| </view> | |||||
| </uv-form-item> | |||||
| </view> | |||||
| <view class="form-item" v-for="item in list" :key="item.id"> | |||||
| <view | |||||
| :class="['flex', 'list-item', item.id === form.id ? 'is-active' : '']" | |||||
| @click="onSelect" | |||||
| > | |||||
| <view class="avatar"> | |||||
| <image class="img" :src="item.avatar" mode="scaleToFill"></image> | |||||
| </view> | |||||
| <view> | |||||
| <view class="title">{{ item.name }}</view> | |||||
| <view class="desc">{{ `ID:${item.id}` }}</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </uv-form> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="bottom"> | |||||
| <button class="btn" @click="onSubmit">提现</button> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import mixinsList from '@/mixins/list.js' | |||||
| import formInput from '@/pages_order/components/formInput.vue' | |||||
| export default { | |||||
| mixins: [mixinsList], | |||||
| components: { | |||||
| formInput, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| keyword: '', | |||||
| queryParams: { | |||||
| pageNo: 1, | |||||
| pageSize: 1000, | |||||
| title: '', | |||||
| }, | |||||
| // todo | |||||
| mixinsListApi: '', | |||||
| form: { | |||||
| id: null, | |||||
| }, | |||||
| rules: { | |||||
| 'id': { | |||||
| type: 'string', | |||||
| required: true, | |||||
| message: '请选择绑定人', | |||||
| }, | |||||
| }, | |||||
| formItemStyle: { padding: 0 }, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| search() { | |||||
| this.queryParams.title = this.keyword | |||||
| this.getData() | |||||
| }, | |||||
| onSelect(id) { | |||||
| this.form.id = id | |||||
| }, | |||||
| async onSubmit() { | |||||
| try { | |||||
| await this.$refs.form.validate() | |||||
| const { | |||||
| } = this.form | |||||
| const params = { | |||||
| } | |||||
| // todo: fetch | |||||
| // await this.$fetch('updateAddress', params) | |||||
| uni.showToast({ | |||||
| icon: 'success', | |||||
| title: '提交成功', | |||||
| }); | |||||
| setTimeout(() => { | |||||
| this.$utils.navigateBack() | |||||
| }, 800) | |||||
| } catch (err) { | |||||
| console.log('onSave err', err) | |||||
| } | |||||
| }, | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page__view { | |||||
| width: 100vw; | |||||
| min-height: 100vh; | |||||
| background: $uni-bg-color; | |||||
| position: relative; | |||||
| /deep/ .nav-bar__view { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| } | |||||
| } | |||||
| .main { | |||||
| padding: calc(var(--status-bar-height) + 160rpx) 32rpx calc(env(safe-area-inset-bottom) + 198rpx) 32rpx; | |||||
| } | |||||
| .card { | |||||
| min-height: calc(100vh - (var(--status-bar-height) + 160rpx) - calc(env(safe-area-inset-bottom) + 198rpx)); | |||||
| padding: 40rpx 32rpx; | |||||
| box-sizing: border-box; | |||||
| background: #FFFFFF; | |||||
| border: 2rpx solid #FFFFFF; | |||||
| border-radius: 32rpx; | |||||
| &-header { | |||||
| font-family: PingFang SC; | |||||
| font-weight: 500; | |||||
| font-size: 36rpx; | |||||
| line-height: 1.4; | |||||
| color: #252545; | |||||
| } | |||||
| } | |||||
| .form { | |||||
| padding: 8rpx 0 0 0; | |||||
| &-item { | |||||
| margin-top: 40rpx; | |||||
| border-bottom: 2rpx solid #EEEEEE; | |||||
| &:last-child { | |||||
| border: none; | |||||
| } | |||||
| &-label { | |||||
| font-family: PingFang SC; | |||||
| font-weight: 400; | |||||
| font-size: 26rpx; | |||||
| line-height: 1.4; | |||||
| color: #181818; | |||||
| } | |||||
| &-content { | |||||
| } | |||||
| } | |||||
| } | |||||
| .list-item { | |||||
| justify-content: flex-start; | |||||
| column-gap: 24rpx; | |||||
| padding: 10rpx; | |||||
| border: 2rpx solid #EEEEEE; | |||||
| border-radius: 24rpx; | |||||
| .avatar { | |||||
| width: 96rpx; | |||||
| height: 96rpx; | |||||
| border-radius: 50%; | |||||
| .img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .title { | |||||
| font-size: 32rpx; | |||||
| font-weight: 600; | |||||
| color: #000000; | |||||
| } | |||||
| .desc { | |||||
| margin-top: 8rpx; | |||||
| font-size: 24rpx; | |||||
| color: #939393; | |||||
| } | |||||
| &.is-active { | |||||
| background: #E9F8FF; | |||||
| border-color: #00A9FF; | |||||
| } | |||||
| } | |||||
| .bottom { | |||||
| position: fixed; | |||||
| left: 0; | |||||
| bottom: 0; | |||||
| width: 100vw; | |||||
| // height: 200rpx; | |||||
| padding: 32rpx 40rpx; | |||||
| padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx); | |||||
| background: #FFFFFF; | |||||
| box-sizing: border-box; | |||||
| .btn { | |||||
| width: 100%; | |||||
| padding: 14rpx 0; | |||||
| box-sizing: border-box; | |||||
| font-family: PingFang SC; | |||||
| font-weight: 500; | |||||
| font-size: 36rpx; | |||||
| line-height: 1.4; | |||||
| color: #FFFFFF; | |||||
| background: linear-gradient(to right, #21FEEC, #019AF9); | |||||
| border: 2rpx solid #00A9FF; | |||||
| border-radius: 41rpx; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,208 @@ | |||||
| <template> | |||||
| <view class="page__view"> | |||||
| <navbar title="成员管理" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="main"> | |||||
| <view class="tabs"> | |||||
| <uv-tabs | |||||
| :list="tabs" | |||||
| :current="current" | |||||
| :scrollable="false" | |||||
| lineColor="#00A9FF" | |||||
| lineWidth="48rpx" | |||||
| lineHeight="4rpx" | |||||
| :activeStyle="{ | |||||
| 'font-family': 'PingFang SC', | |||||
| 'font-weight': 500, | |||||
| 'font-size': '32rpx', | |||||
| 'line-height': 1.4, | |||||
| 'color': '#00A9FF', | |||||
| }" | |||||
| :inactiveStyle="{ | |||||
| 'font-family': 'PingFang SC', | |||||
| 'font-weight': 400, | |||||
| 'font-size': '32rpx', | |||||
| 'line-height': 1.4, | |||||
| 'color': '#181818', | |||||
| }" | |||||
| @click="clickTabs" | |||||
| ></uv-tabs> | |||||
| </view> | |||||
| <template v-if="current == 0"> | |||||
| <view class="list"> | |||||
| <view class="flex list-item" v-for="item in list" :key="item.id"> | |||||
| <memberApplyCard :data="item" @submitted="getData"></memberApplyCard> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <template v-else> | |||||
| <view class="list"> | |||||
| <view class="flex list-item" v-for="item in list" :key="item.id"> | |||||
| <memberCard :data="item" ></memberCard> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import mixinsList from '@/mixins/list.js' | |||||
| import memberCard from './memberCard.vue' | |||||
| import memberApplyCard from './memberApplyCard.vue' | |||||
| export default { | |||||
| mixins: [mixinsList], | |||||
| components: { | |||||
| memberCard, | |||||
| memberApplyCard, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| tabs: [ | |||||
| { name: '绑定申请' }, | |||||
| { name: '已绑定' }, | |||||
| ], | |||||
| // todo | |||||
| mixinsListApi: '', | |||||
| current: 0, | |||||
| } | |||||
| }, | |||||
| onShow() { | |||||
| console.log('onShow') | |||||
| }, | |||||
| onLoad(arg) { | |||||
| this.clickTabs({ index: arg.index || 0 }) | |||||
| }, | |||||
| methods: { | |||||
| // todo: delete | |||||
| getData() { | |||||
| this.list = [ | |||||
| { | |||||
| id: '001', | |||||
| name: '周小艺', | |||||
| userId: '15558661691', | |||||
| type: 0, | |||||
| createTime: '2025-04-28 08:14', | |||||
| }, | |||||
| { | |||||
| id: '002', | |||||
| name: '周小艺', | |||||
| userId: '15558661691', | |||||
| type: 0, | |||||
| createTime: '2025-04-28 08:14', | |||||
| }, | |||||
| { | |||||
| id: '003', | |||||
| name: '周小艺', | |||||
| userId: '15558661691', | |||||
| type: 1, | |||||
| createTime: '2025-04-28 08:14', | |||||
| }, | |||||
| { | |||||
| id: '004', | |||||
| name: '周小艺', | |||||
| userId: '15558661691', | |||||
| type: 0, | |||||
| createTime: '2025-04-28 08:14', | |||||
| }, | |||||
| { | |||||
| id: '005', | |||||
| name: '周小艺', | |||||
| userId: '15558661691', | |||||
| type: 0, | |||||
| createTime: '2025-04-28 08:14', | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| //点击tab栏 | |||||
| clickTabs({ index }) { | |||||
| console.log('clickTabs') | |||||
| this.current = index | |||||
| if (index == 0) { | |||||
| delete this.queryParams.status | |||||
| } else { | |||||
| this.queryParams.status = index - 1 | |||||
| } | |||||
| this.getData() | |||||
| }, | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .page__view { | |||||
| width: 100vw; | |||||
| min-height: 100vh; | |||||
| background-color: $uni-bg-color; | |||||
| position: relative; | |||||
| /deep/ .nav-bar__view { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| } | |||||
| } | |||||
| .main { | |||||
| padding: calc(var(--status-bar-height) + 244rpx) 32rpx 40rpx 32rpx; | |||||
| .tabs { | |||||
| position: fixed; | |||||
| top: calc(var(--status-bar-height) + 120rpx); | |||||
| left: 0; | |||||
| width: 100%; | |||||
| height: 84rpx; | |||||
| background: #FFFFFF; | |||||
| z-index: 1; | |||||
| /deep/ .uv-tabs__wrapper__nav__line { | |||||
| border-radius: 2rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .list { | |||||
| background: #FFFFFF; | |||||
| border-radius: 32rpx; | |||||
| overflow: hidden; | |||||
| &-item { | |||||
| margin-top: 16rpx; | |||||
| padding: 16rpx 32rpx; | |||||
| font-size: 28rpx; | |||||
| color: #333333; | |||||
| background: #FFFFFF; | |||||
| border-bottom: 2rpx solid #F1F1F1; | |||||
| justify-content: flex-start; | |||||
| column-gap: 24rpx; | |||||
| &:last-child { | |||||
| border: none; | |||||
| } | |||||
| .avatar { | |||||
| width: 72rpx; | |||||
| height: 72rpx; | |||||
| border-radius: 50%; | |||||
| overflow: hidden; | |||||
| .img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||