|
|
@@ -0,0 +1,277 @@
|
|
|
+<template>
|
|
|
+ <view class="address-page">
|
|
|
+ <view class="address-section">
|
|
|
+ <pub-list-scroll @next="onScrollTolower" :loaded="loaded" :text="loadText" :status="status">
|
|
|
+ <view class="no-data" v-if="!list || list.length == 0">
|
|
|
+ <image mode="heightFix" src="/static/image/no-data.png" />
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+ <view class="address-list" v-else>
|
|
|
+ <view v-for="(item,index) in list" :key="'cf'+index" class="address-item" @click="onClickItem(item.id)"
|
|
|
+ :class="item.id==curAddressId?'is-active':''">
|
|
|
+ <view class="row address-item-top">
|
|
|
+ <view>{{item.name}}</view>
|
|
|
+ <view>{{item.phone}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="">{{item.addr}}</view>
|
|
|
+ <view class="address-item-bottom">
|
|
|
+ <view class="row">
|
|
|
+ <text class="iconfont checkbox is-active" v-if="item.isDefault"></text>
|
|
|
+ <text class="iconfont checkbox" v-else></text>
|
|
|
+ 默认收件地址
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="row"><text class="iconfont"></text>编辑</view>
|
|
|
+ <view class="row next-btn"><text class="iconfont"></text>删除</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </pub-list-scroll>
|
|
|
+ </view>
|
|
|
+ <view class="pub-button is-bg large">新增地址</view>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <uni-popup ref="confirmPopup" type="dialog">
|
|
|
+ <uni-popup-dialog type="info" cancelText="取消" confirmText="确定" content="确定使用快递配送" @confirm="onApply"
|
|
|
+ @close="onCancel"></uni-popup-dialog>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { ref, onMounted } from 'vue'
|
|
|
+ import dlg from '@/lib/dlg'
|
|
|
+
|
|
|
+ const loaded = ref(false)
|
|
|
+ const loadText = ref('数据加载中...')
|
|
|
+ const status = ref('loading')
|
|
|
+ const list = ref() //处方列表
|
|
|
+ const queryParams = ref({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ status: 2
|
|
|
+ })
|
|
|
+ const confirmPopup = ref() // 弹出层
|
|
|
+
|
|
|
+
|
|
|
+ const curAddressId = ref()
|
|
|
+ const _list = [{
|
|
|
+ id: 1,
|
|
|
+ name: '沈国军',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋',
|
|
|
+ isDefault: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '沈国军1',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }, {
|
|
|
+ id: 3,
|
|
|
+ name: '沈国军2',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }, {
|
|
|
+ id: 4,
|
|
|
+ name: '沈国军3',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }, {
|
|
|
+ id: 5,
|
|
|
+ name: '沈国军4',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }, {
|
|
|
+ id: 6,
|
|
|
+ name: '沈国军5',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }, {
|
|
|
+ id: 7,
|
|
|
+ name: '沈国军6',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }, {
|
|
|
+ id: 8,
|
|
|
+ name: '沈国军7',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }, {
|
|
|
+ id: 9,
|
|
|
+ name: '沈国军8',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }, {
|
|
|
+ id: 10,
|
|
|
+ name: '沈国军9',
|
|
|
+ phone: '173****4682',
|
|
|
+ addr: '江苏省苏州市相城区元和街道尚景花苑11栋'
|
|
|
+ }]
|
|
|
+
|
|
|
+ const onSearch = (val) => {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const onSearchCancel = () => {
|
|
|
+
|
|
|
+ }
|
|
|
+ const onClickItem = (id : number) => {
|
|
|
+ curAddressId.value = id;
|
|
|
+ confirmPopup.value.open('center')
|
|
|
+ }
|
|
|
+
|
|
|
+ const onCancel = () => {
|
|
|
+ console.log("onCancel")
|
|
|
+ }
|
|
|
+ const onApply = () => {
|
|
|
+ console.log("onApply")
|
|
|
+ }
|
|
|
+
|
|
|
+ const getList = async () => {
|
|
|
+ try {
|
|
|
+ loaded.value = true;
|
|
|
+ let res = ''
|
|
|
+
|
|
|
+
|
|
|
+ if (!list.value) {
|
|
|
+ list.value = _list;
|
|
|
+ } else {
|
|
|
+ list.value = list.value.concat(_list);
|
|
|
+ }
|
|
|
+
|
|
|
+ // queryParams.value.total = res.total
|
|
|
+ // if (res.total && queryParams.value.pageNo >= queryParams.value.total / queryParams.value.pageSize) {
|
|
|
+ // status.value = "noMore"
|
|
|
+ // }
|
|
|
+ } catch (e) {
|
|
|
+ dlg.error(e)
|
|
|
+ } finally {
|
|
|
+ loaded.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //下一页
|
|
|
+ const onScrollTolower = async () => {
|
|
|
+ console.log("onScrollTolower")
|
|
|
+ if (!list.value || queryParams.value.pageNo > (queryParams.value.total / queryParams.value.pageSize)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (queryParams.value.pageNo < queryParams.value.total / queryParams.value.pageSize) {
|
|
|
+ status.value = "loading";
|
|
|
+ } else {
|
|
|
+ status.value = "noMore"
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ queryParams.value.pageNo++;
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+
|
|
|
+ const onUpdate = (isMasked : boolean) => {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getList()
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .address-page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .address-section {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-top: 16rpx;
|
|
|
+
|
|
|
+ .no-data {
|
|
|
+ margin-top: 160rpx;
|
|
|
+ @include flex-center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 320rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ color: $uni-text-color-light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-list {
|
|
|
+
|
|
|
+ .address-item {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding: 24rpx 32rpx 16rpx;
|
|
|
+ color: $uni-text-color-grey;
|
|
|
+ border: 1px solid #fff;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ @include flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-item-top {
|
|
|
+ font-size: $uni-font-size-lg;
|
|
|
+ line-height: $uni-line-height-lg;
|
|
|
+ color: $uni-text-color;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ >view+view {
|
|
|
+ margin-left: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-item-bottom {
|
|
|
+ border-top: 1px solid $uni-border-color;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ @include flex-between;
|
|
|
+ font-size: $uni-font-size-sm;
|
|
|
+ line-height: $uni-line-height-sm;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+
|
|
|
+ &.checkbox {
|
|
|
+ margin-right: 16rpx;
|
|
|
+ color: $uni-text-color-disable;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-active {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .next-btn {
|
|
|
+ margin-left: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-active {
|
|
|
+ border: 1px solid $uni-color-primary;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .scroll-view {
|
|
|
+ height: calc(100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pub-button {
|
|
|
+ margin-left: 32rpx;
|
|
|
+ margin-right: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
