update app pages

This commit is contained in:
全栈小学生 2023-10-23 17:24:36 +08:00
parent 00d1b6bf6b
commit bd3a03dc8f
23 changed files with 379 additions and 271 deletions

View File

@ -197,7 +197,6 @@ export function addAddress(params: Record<string, any>) {
/**
*
* @param id
* @param params
* @returns
*/

View File

@ -24,7 +24,7 @@
import useDiyStore from '@/app/stores/diy';
import { getWapIndexList } from '@/app/api/system';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
const diyComponent = computed(() => {
@ -48,7 +48,7 @@
const list = ref([])
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}

View File

@ -1,122 +0,0 @@
<template>
<view :style="warpCss">
<div class="flex flex-wrap justify-between">
<view class="w-[332rpx] bg-[#fff] box-border rounded-[10rpx] mb-[24rpx] overflow-hidden">
<u--image width="332rpx" height="332rpx" src="" model="aspectFill">
<template #error>
<u-icon name="photo" color="#999" size="50"></u-icon>
</template>
</u--image>
<view class="px-[16rpx] mt-[18rpx] h-[80rpx] leading-[40rpx] text-[28rpx] font-bold multi-hidden">
山茶花保湿美白淡斑补水乳护肤化妆品补水更高效
</view>
<view class="px-[16rpx] pb-[20rpx] flex justify-between items-end mt-[12rpx]" >
<text class="text-[28rpx] font-bold text-[#FF3223]">100.00</text>
<text class="text-[22rpx] text-[#888] leading-[31rpx]">已售100件</text>
</view>
</view>
</div>
</view>
</template>
<script setup lang="ts">
//
import { ref, computed, watch, onMounted } from 'vue';
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import { getWapIndexList } from '@/app/api/system';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const diyStore = useDiyStore();
const diyComponent = computed(() => {
if (diyStore.mode == 'decorate') {
return diyStore.value[props.index];
} else {
return props.component;
}
})
const warpCss = computed(() => {
var style = '';
if (diyComponent.value.componentBgColor) style += 'background-color:' + diyComponent.value.componentBgColor + ';';
if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
return style;
})
const list = ref([])
watch(
() => props.pullDownRefresh,
(newValue, oldValue) => {
//
}
)
onMounted(() => {
refresh();
//
if (diyStore.mode == 'decorate') {
watch(
() => diyComponent.value,
(newValue, oldValue) => {
if (newValue && newValue.componentName == 'AddonList') {
refresh();
}
}
)
}
});
const refresh = () => {
//
if (diyStore.mode == 'decorate') {
diyComponent.value.list.forEach((item : any, index) => {
if (item.icon == '') {
item.icon = 'static/resource/images/diy/figure.png';
}
if (item.title == '') {
item.title = '应用名称';
}
});
}
if (diyComponent.value.list.length == 0) {
getWapIndexList().then((res) => {
list.value = res.data;
})
} else {
list.value = diyComponent.value.list;
}
}
const toLink = (url : string) => {
redirect({ url })
}
</script>
<style lang="scss" scoped>
/* 单行超出隐藏 */
.using-hidden {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: break-spaces;
}
/* 多行超出隐藏 */
.multi-hidden {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>

View File

@ -1,7 +1,7 @@
<template>
<view :style="warpCss">
<view class="flex items-center justify-between py-[30rpx] px-[32rpx]">
<view v-if="diyComponent.navTitle" class="text-[30rpx]"
<view class="flex items-center justify-between py-[30rpx] px-[32rpx]" v-if="diyComponent.navTitle">
<view class="text-[30rpx]"
:style="{fontWeight: diyComponent.font.weight,color:diyComponent.font.color}">
{{diyComponent.navTitle}}
</view>
@ -14,28 +14,29 @@
<view v-if="diyComponent.layout == 'vertical'" class="graphic-nav">
<view class="graphic-nav-item" v-for="(item, index) in diyComponent.list" :key="item.id">
<app-link :data="item.link" class="flex items-center justify-between py-[30rpx] px-[32rpx]"
<app-link :data="item.link"
:class="[index == 0 ? 'border-t-0':'border-t']">
<view class="graphic-img relative flex items-center w-10 h-10 mr-[20rpx]"
v-if="diyComponent.mode != 'text'"
:style="{ width: diyComponent.imageSize * 2 + 'rpx', height: diyComponent.imageSize * 2 + 'rpx' }">
<image :src="img(item.imageUrl)" mode="aspectFill"
:style="{ maxWidth: diyComponent.imageSize * 2 + 'rpx', maxHeight: diyComponent.imageSize * 2 + 'rpx', borderRadius: diyComponent.aroundRadius * 2 + 'rpx' }">
</image>
<text v-if="item.label.control"
class="tag absolute -top-[10rpx] -right-[24rpx] text-white rounded-[24rpx] rounded-bl-none transform scale-80 py-1 px-2 text-xs"
:style="{ color: item.label.textColor, backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')' }">
{{ item.label.text }}
<view class="flex items-center justify-between py-[30rpx] px-[32rpx]">
<view class="graphic-img relative flex items-center w-10 h-10 mr-[20rpx]"
v-if="diyComponent.mode != 'text'"
:style="{ width: diyComponent.imageSize * 2 + 'rpx', height: diyComponent.imageSize * 2 + 'rpx'}">
<image :src="img(item.imageUrl)" mode="aspectFill"
:style="{ maxWidth: diyComponent.imageSize * 2 + 'rpx', maxHeight: diyComponent.imageSize * 2 + 'rpx', borderRadius: diyComponent.aroundRadius * 2 + 'rpx' }">
</image>
<text v-if="item.label.control"
class="tag absolute -top-[10rpx] -right-[24rpx] text-white rounded-[24rpx] rounded-bl-none transform scale-80 py-1 px-2 text-xs"
:style="{ color: item.label.textColor, backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')' }">
{{ item.label.text }}
</text>
</view>
<text v-if="diyComponent.mode != 'img'" class="graphic-text w-full truncate leading-normal"
:style="{ fontSize: diyComponent.font.size * 2 + 'rpx', fontWeight: diyComponent.font.weight, color: diyComponent.font.color }">
{{ item.title }}
</text>
<view><u-icon name="arrow-right" color="#CACACA"></u-icon></view>
</view>
<text v-if="diyComponent.mode != 'img'" class="graphic-text w-full truncate leading-normal"
:style="{ fontSize: diyComponent.font.size * 2 + 'rpx', fontWeight: diyComponent.font.weight, color: diyComponent.font.color }">
{{ item.title }}
</text>
<u-icon name="arrow-right" color="#CACACA"></u-icon>
</app-link>
</view>
@ -53,7 +54,6 @@
v-if="swiperCondition(index,numItem)" :style="{ width: 100 / diyComponent.rowCount + '%' }">
<app-link :data="item.link" class="flex flex-col items-center box-border py-2">
<view class="graphic-img relative flex items-center justify-center w-10 h-10"
v-if="diyComponent.mode != 'text'"
:style="{ width: diyComponent.imageSize * 2 + 'rpx', height: diyComponent.imageSize * 2 + 'rpx' }">
@ -91,9 +91,9 @@
<view class="graphic-nav-item" :class="{'flex-shrink-0' : diyComponent.showStyle == 'singleSlide'}"
v-for="(item, index) in diyComponent.list" :key="item.id"
:style="{ width: 100 / diyComponent.rowCount + '%' }">
<app-link :data="item.link" class="flex flex-col items-center box-border py-2">
<view class="graphic-img relative flex items-center justify-center w-10 h-10"
<view class="graphic-img relative flex items-center justify-center w-10 h-10 mx-[auto]"
v-if="diyComponent.mode != 'text'"
:style="{ width: diyComponent.imageSize * 2 + 'rpx', height: diyComponent.imageSize * 2 + 'rpx' }">
<image :src="img(item.imageUrl)" mode="aspectFill"
@ -131,7 +131,7 @@
import useDiyStore from '@/app/stores/diy';
import { useLogin } from '@/hooks/useLogin';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
@ -154,7 +154,7 @@
})
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}

View File

@ -7,11 +7,10 @@
left: 0;
right: 0;
bottom: 0;
border: 4rpx solid $u-primary;
border: 4rpx dotted $u-primary;
z-index: 10;
pointer-events: none;
cursor: move;
border-style: dotted;
}
&.selected:before {
content: '';

View File

@ -4,32 +4,32 @@
@click="diyStore.changeCurrentIndex(index, component)" class="draggable-element relative cursor-move"
:class="{ selected: diyStore.currentIndex == index,decorate : diyStore.mode == 'decorate' }" :style="component.pageStyle">
<template v-if="component.componentName == 'AddonList'">
<diy-addon-list :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-addon-list>
<diy-addon-list :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-addon-list>
</template>
<template v-if="component.componentName == 'GraphicNav'">
<diy-graphic-nav :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-graphic-nav>
<diy-graphic-nav :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-graphic-nav>
</template>
<template v-if="component.componentName == 'HorzBlank'">
<diy-horz-blank :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-horz-blank>
<diy-horz-blank :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-horz-blank>
</template>
<template v-if="component.componentName == 'HotArea'">
<diy-hot-area :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-hot-area>
<diy-hot-area :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-hot-area>
</template>
<template v-if="component.componentName == 'ImageAds'">
<diy-image-ads :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-image-ads>
<diy-image-ads :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-image-ads>
</template>
<template v-if="component.componentName == 'MemberInfo'">
<diy-member-info :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-member-info>
<diy-member-info :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-member-info>
</template>
<template v-if="component.componentName == 'Notice'">
<diy-notice :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-notice>
</template>
<template v-if="component.componentName == 'RubikCube'">
<diy-rubik-cube :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-rubik-cube>
<diy-rubik-cube :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-rubik-cube>
</template>
<template v-if="component.componentName == 'Text'">
<diy-text :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-text>
<diy-text :component="component" :index="index" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-text>
</template>
<template v-if="component.componentName == 'Notice'">
<diy-notice :component="component" :index="index" :pullDownRefresh="props.pullDownRefresh"></diy-notice>
</template>
</view>
<template v-if="diyStore.mode == '' && data.global.bottomTabBarSwitch">
<view class="pt-[20rpx]"></view>
@ -42,7 +42,7 @@
import { onMounted, nextTick, computed, ref,watch } from 'vue';
import Sortable from 'sortablejs';
import { range } from 'lodash-es';
const props = defineProps(['data','pullDownRefresh']);
const props = defineProps(['data','pullDownRefreshCount']);
const diyStore = useDiyStore();
const data = computed(() => {

View File

@ -8,7 +8,7 @@
import { computed, watch } from 'vue';
import useDiyStore from '@/app/stores/diy';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
@ -28,7 +28,7 @@
})
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}

View File

@ -25,7 +25,7 @@
import useDiyStore from '@/app/stores/diy';
import { img } from '@/utils/common';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
@ -72,7 +72,7 @@
}
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}

View File

@ -27,7 +27,7 @@
import { img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
@ -55,7 +55,7 @@
})
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}

View File

@ -72,7 +72,7 @@
import { wechatSync } from '@/app/api/system'
import useDiyStore from '@/app/stores/diy'
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
@ -100,7 +100,7 @@
})
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}

View File

@ -1,19 +1,19 @@
<template>
<view :style="warpCss" class="overflow-hidden">
<view class="flex items-center" @click="noticeClickFn">
<image v-if="diyComponent.iconType == 'system'" :src="img(`addon/shop/notice/${diyComponent.systemIcon}.png`)" class="h-[44rpx] max-w-[130rpx] -mr-[8rpx]" mode="heightFix"></image>
<view class="flex items-center pl-[28rpx] pr-[22rpx]" @click="noticeClickFn">
<image v-if="diyComponent.iconType == 'system'" :src="img(`addon/shop/diy/notice/${diyComponent.systemIcon}.png`)" class="h-[44rpx] max-w-[130rpx] -mr-[8rpx]" mode="heightFix"></image>
<image v-else :src="img(diyComponent.imageUrl || '')" class="w-[30rpx] h-[30rpx] -mr-[8rpx]" mode="aspectFit"></image>
<u-notice-bar :text="diyComponent.list.text" :color="diyComponent.textColor" :bgColor="diyComponent.componentBgColor" :fontSize="diyComponent.fontSize * 2 + 'rpx'" speed="50" icon="" :style="{'fontWeight': diyComponent.fontWeight}"></u-notice-bar>
<text class="iconfont iconxiangyoujiantou -ml-[8rpx]" :style="{'color': diyComponent.textColor,'fontSize': (diyComponent.fontSize * 2 + 'rpx'), 'fontWeight': diyComponent.fontWeight}"></text>
</view>
<u-popup :show="noticeShow" @close="noticeShow = false" :closeable="true" mode="center" :round="5">
<view class="py-[30rpx] text-sm leading-none border-solid border-b-[2rpx]">
<view class="py-[30rpx] text-sm leading-none border-0 border-solid border-b-[2rpx] border-[#eee]">
<text class="ml-[30rpx]">公告内容</text>
</view>
<scroll-view scroll-y="true" class="px-6 py-3 w-[600rpx] h-[500rpx] text-sm font-bold">
<scroll-view scroll-y="true" class="px-6 py-3 w-[600rpx] h-[500rpx] text-sm">
{{diyComponent.list.text}}
</scroll-view>
<u-button type="primary" @click="noticeShow = false" shape="circle" class="mx-[30rpx] mb-[40rpx] !w-auto">我知道了</u-button>
<button @click="noticeShow = false" class="!mx-[30rpx] !mb-[40rpx] !w-auto !h-[80rpx] text-sm leading-[80rpx] rounded-full text-white !bg-[#ff4500]">我知道了</button>
</u-popup>
</view>
</template>
@ -24,7 +24,7 @@
import { img, redirect } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
const noticeShow = ref(false);
@ -47,7 +47,7 @@
})
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}
@ -76,6 +76,7 @@
}
const noticeClickFn = ()=>{
if(diyStore.mode == 'decorate') return false;
if(diyComponent.value.showType == 'popup'){
noticeShow.value = true;
}else{

View File

@ -75,7 +75,7 @@
import useDiyStore from '@/app/stores/diy';
import { img } from '@/utils/common';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
@ -152,7 +152,7 @@
}
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}

View File

@ -42,7 +42,7 @@
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
const props = defineProps(['component', 'index', 'pullDownRefresh']);
const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
const diyComponent = computed(() => {
@ -64,7 +64,7 @@
})
watch(
() => props.pullDownRefresh,
() => props.pullDownRefreshCount,
(newValue, oldValue) => {
//
}

View File

@ -2,13 +2,13 @@
<view>
固定模板示例我也可以装修
<!-- 自定义模板渲染 -->
<diy-group :data="props.data" :pullDownRefresh="props.pullDownRefresh"></diy-group>
<diy-group :data="props.data" :pullDownRefreshCount="props.pullDownRefreshCount"></diy-group>
</view>
</template>
<script setup lang="ts">
import { computed, watch } from 'vue';
const props = defineProps(['data', 'pullDownRefresh']);
const props = defineProps(['data', 'pullDownRefreshCount']);
</script>
<style></style>

View File

@ -1,12 +1,12 @@
<template>
<view class="fixed-group">
<template v-if="props.data.global.component == 'demo-index'">
<fixed-demo-index :data="props.data" :pullDownRefresh="props.pullDownRefresh"></fixed-demo-index>
<fixed-demo-index :data="props.data" :pullDownRefreshCount="props.pullDownRefreshCount"></fixed-demo-index>
</template>
</view>
</template>
<script lang="ts" setup>
const props = defineProps(['data','pullDownRefresh']);
const props = defineProps(['data','pullDownRefreshCount']);
</script>
<style lang="scss" scoped>
@import './index.scss';

View File

@ -1,5 +1,6 @@
{
"address": "快递地址",
"locationAddress": "同城配送地址",
"createAddress": "新建收货地址"
"createAddress": "新建收货地址",
"default": "默认"
}

View File

@ -0,0 +1,14 @@
{
"name": "收货人",
"namePlaceholder": "请输入联系人姓名",
"mobile": "手机号码",
"mobilePlaceholder": "请输入手机号码",
"deliveryAddress":"收货地址",
"selectAddress":"选择地址",
"selectAddressPlaceholder":"请选择地址",
"address": "楼号门牌",
"addressPlaceholder": "详细地址如 1单元101",
"addressError": "请填写门牌号",
"defaultAddress": "设为默认地址",
"update": "修改"
}

View File

@ -2,24 +2,29 @@
<view>
<u-loading-page :loading="loading" loadingText="" bg-color="#f7f7f7"></u-loading-page>
<view v-show="!loading">
<view v-show="!loading">
<!-- 自定义模板渲染 -->
<view class="diy-template-wrap bg-index" v-if="data.pageMode != 'fixed'"
:style="{ backgroundColor: data.global.pageBgColor,minHeight: 'calc(100vh - 50px)',backgroundImage : data.global.bgUrl ? 'url(' + img(data.global.bgUrl) + ')' : '' }">
<diy-group :data="data" :pullDownRefresh="pullDownRefresh"></diy-group>
<diy-group :data="data" :pullDownRefreshCount="pullDownRefreshCount"></diy-group>
</view>
<!-- 固定模板渲染 -->
<view class="fixed-template-wrap" v-if="data.pageMode == 'fixed'">
<fixed-group :data="data" :pullDownRefresh="pullDownRefresh"></fixed-group>
<fixed-group :data="data" :pullDownRefreshCount="pullDownRefreshCount"></fixed-group>
</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<wx-privacy-popup ref="wxPrivacyPopup"></wx-privacy-popup>
<!-- #endif -->
</view>
</template>
@ -32,12 +37,9 @@
import { img, redirect } from '@/utils/common';
const { setShare, onShareAppMessage, onShareTimeline } = useShare()
onShareAppMessage()
onShareTimeline()
const loading = ref(true);
const diyStore = useDiyStore();
const pullDownRefresh = ref(0)
const pullDownRefreshCount = ref(0)
const id = ref(0)
const name = ref('')
@ -59,6 +61,10 @@
}
})
onShareAppMessage()
onShareTimeline()
//
onLoad(option => {
// #ifdef H5
//
@ -68,16 +74,11 @@
}
// #endif
id.value = option.id || '';
name.value = option.name || '';
template.value = option.template || '';
name.value = option.name;
});
//
onPullDownRefresh(() => {
pullDownRefresh.value++;
uni.stopPullDownRefresh();
})
//
onShow(() => {
//
if (diyStore.mode == 'decorate') {
@ -111,8 +112,9 @@
});
loading.value = false;
let share = res.data.share ? JSON.parse(res.data.share) : null;
let share = data.share ? JSON.parse(data.share) : null;
setShare(share);
} else if (data.mode == 'other') {
//
redirect({ url: data.page })
@ -122,13 +124,13 @@
}
});
//
onPullDownRefresh(() => {
pullDownRefreshCount.value++;
uni.stopPullDownRefresh();
})
</script>
<style lang="scss" scoped>
.bg-index {
width: 100%;
height: 100%;
box-sizing: border-box;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
@import '@/styles/diy.scss';
</style>

View File

@ -8,18 +8,23 @@
<view class="diy-template-wrap bg-index" v-if="data.pageMode != 'fixed'"
:style="{ backgroundColor: data.global.pageBgColor,minHeight: 'calc(100vh - 50px)',backgroundImage : data.global.bgUrl ? 'url(' + img(data.global.bgUrl) + ')' : '' }">
<diy-group :data="data" :pullDownRefresh="pullDownRefresh"></diy-group>
<diy-group :data="data" :pullDownRefreshCount="pullDownRefreshCount"></diy-group>
</view>
<!-- 固定模板渲染 -->
<view class="fixed-template-wrap" v-if="data.pageMode == 'fixed'">
<fixed-group :data="data" :pullDownRefresh="pullDownRefresh"></fixed-group>
<fixed-group :data="data" :pullDownRefreshCount="pullDownRefreshCount"></fixed-group>
</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<wx-privacy-popup ref="wxPrivacyPopup"></wx-privacy-popup>
<!-- #endif -->
</view>
</template>
@ -32,13 +37,11 @@
import { img, redirect } from '@/utils/common';
const { setShare, onShareAppMessage, onShareTimeline } = useShare()
setShare();
onShareAppMessage()
onShareTimeline()
const loading = ref(true);
const diyStore = useDiyStore();
const pullDownRefresh = ref(0)
const pullDownRefreshCount = ref(0)
const id = ref(0)
const name = ref('DIY_INDEX')
const template = ref('')
@ -58,6 +61,11 @@
}
})
setShare();
onShareAppMessage()
onShareTimeline()
//
onLoad(option => {
// #ifdef H5
//
@ -66,21 +74,18 @@
loading.value = false;
}
// #endif
id.value = option.id || '';
template.value = option.template || '';
});
//
onPullDownRefresh(() => {
pullDownRefresh.value++;
uni.stopPullDownRefresh();
})
//
onShow(() => {
//
if (diyStore.mode == 'decorate') {
diyStore.init();
} else {
getDiyInfo({
id: id.value,
name: name.value,
template: template.value
}).then((res : any) => {
@ -106,6 +111,7 @@
title: diyData.title
});
loading.value = false;
} else if (data.mode == 'other') {
//
redirect({ url: data.page })
@ -115,13 +121,13 @@
}
});
//
onPullDownRefresh(() => {
pullDownRefreshCount.value++;
uni.stopPullDownRefresh();
})
</script>
<style lang="scss" scoped>
.bg-index {
width: 100%;
height: 100%;
box-sizing: border-box;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
@import '@/styles/diy.scss';
</style>

View File

@ -1,34 +1,46 @@
<template>
<scroll-view scroll-y="true" v-if="!loading">
<view class="border-0 !border-b !border-[#eee] border-solid">
<view class="border-0 !border-b !border-[#eee] border-solid" v-if="!type">
<u-tabs :list="tabs" @click="switchTab" :current="current" itemStyle="width:50%;height:88rpx;box-sizing: border-box;"></u-tabs>
</view>
<view class="p-[30rpx]" v-show="current == 0">
<view v-for="item in addressList" class="border-0 !border-b !border-[#f5f5f5] border-solid pb-[30rpx] flex items-center">
<view class="flex-1">
<view class="text-xs text-gray-subtitle">{{ item.full_address.replace(item.address, '') }}</view>
<view class="font-bold my-[10rpx]">{{ item.address }}</view>
<view class="text-sm">{{ item.name }} <text class="text-[26rpx] text-gray-subtitle">{{ mobileHide(item.mobile) }}</text></view>
<uni-swipe-action>
<view class="p-[30rpx]" v-show="current == 0">
<uni-swipe-action-item :right-options="addressOptions" @click="swipeClick" v-for="item in addressList">
<view class="border-0 !border-b !border-[#f5f5f5] border-solid pb-[30rpx] flex items-center">
<view class="flex-1" @click="selectAddress(item)">
<view class="font-bold my-[10rpx] text-sm">{{ item.full_address }}</view>
<view class="text-sm flex items-center">
{{ item.name }}
<text class="text-[26rpx] text-gray-subtitle">{{ mobileHide(item.mobile) }}</text>
<view class="bg-primary text-white text-xs px-[10rpx] leading-none flex items-center h-[32rpx] ml-[10rpx] rounded" v-if="item.is_default == 1">{{ t('default') }}</view>
</view>
</view>
<text class="iconfont iconbianji" @click="editAddress(item.id)"></text>
</view>
</uni-swipe-action-item>
<view v-if="!addressList.length" class="pt-[20vh]">
<u-empty mode="address" :icon="img('static/resource/images/empty.png')"/>
</view>
<text class="iconfont iconbianji" @click="editAddress(item.id)"></text>
</view>
<view v-if="!addressList.length" class="pt-[20vh]">
<u-empty mode="address" :icon="img('/static/resource/images/empty.png')"/>
</view>
</view>
<view class="p-[30rpx]" v-show="current == 1">
<view v-for="item in locationAddressList" class="border-0 !border-b !border-[#f5f5f5] border-solid pb-[30rpx] flex items-center">
<view class="flex-1">
<view class="text-xs text-gray-subtitle">{{ item.full_address.replace(item.address, '') }}</view>
<view class="font-bold my-[10rpx]">{{ item.address }}</view>
<view class="text-sm">{{ item.name }} <text class="text-[26rpx] text-gray-subtitle">{{ mobileHide(item.mobile) }}</text></view>
<view class="p-[30rpx]" v-show="current == 1">
<uni-swipe-action-item :right-options="addressOptions" @click="swipeClick" v-for="item in locationAddressList">
<view class="border-0 !border-b !border-[#f5f5f5] border-solid pb-[30rpx] flex items-center">
<view class="flex-1" @click="selectAddress(item)">
<view class="font-bold my-[10rpx] text-sm">{{ item.full_address }}</view>
<view class="text-sm flex items-center">
{{ item.name }}
<text class="text-[26rpx] text-gray-subtitle">{{ mobileHide(item.mobile) }}</text>
<view class="bg-primary text-white text-xs px-[10rpx] leading-none flex items-center h-[32rpx] ml-[10rpx] rounded" v-if="item.is_default == 1">{{ t('default') }}</view>
</view>
</view>
<text class="iconfont iconbianji" @click="editAddress(item.id)"></text>
</view>
</uni-swipe-action-item>
<view v-if="!locationAddressList.length" class="pt-[15vh]">
<u-empty mode="address" :icon="img('static/resource/images/empty.png')"/>
</view>
<text class="iconfont iconbianji" @click="editAddress(item.id)"></text>
</view>
<view v-if="!locationAddressList.length" class="pt-[15vh]">
<u-empty mode="address" :icon="img('/static/resource/images/empty.png')"/>
</view>
</view>
</uni-swipe-action>
<u-tabbar :fixed="true" :safeAreaInsetBottom="true" :border="false">
<view class="p-[24rpx] pt-0 w-full">
<u-button type="primary" shape="circle" :text="t('createAddress')" @click="addAddress"></u-button>
@ -39,8 +51,9 @@
<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { redirect, img } from '@/utils/common'
import { getAddressList } from '@/app/api/member'
import { onLoad } from '@dcloudio/uni-app'
import { redirect, img, mobileHide } from '@/utils/common'
import { getAddressList, deleteAddress } from '@/app/api/member'
import { t } from '@/locale'
const loading = ref(true)
@ -51,6 +64,12 @@
])
const addressList = ref<object[]>([])
const locationAddressList = ref<object[]>([])
const type = ref('')
onLoad((data) => {
type.value = data.type || ''
if (data.type) current.value = data.type == 'address' ? 0 : 1
})
getAddressList({})
.then(({ data }) => {
@ -72,16 +91,46 @@
const addAddress = ()=> {
const url = `/app/pages/member/${tabs.value[ current.value ].key}_edit`
redirect({ url })
redirect({ url, param: { type: type.value } })
}
const editAddress = (id: number)=> {
const url = `/app/pages/member/${tabs.value[ current.value ].key}_edit`
redirect({ url, param: { id } })
redirect({ url, param: { id, type: type.value } })
}
const mobileHide = (mobile: string) => {
return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
const addressOptions = ref([
{
text: t('delete'),
style: {
backgroundColor: '#F56C6C'
}
}
])
const selectAddress = (data: object) => {
const selectAddress = uni.getStorageSync('selectAddressCallback')
if (selectAddress) {
selectAddress.address_id = data.id
uni.setStorage({
key: 'selectAddressCallback',
data: selectAddress,
success() {
redirect({url: selectAddress.back })
}
})
}
}
const swipeClick = (event: any) => {
const list = current.value ? locationAddressList : addressList
const data = list.value[event.index]
deleteAddress(data.id)
.then(()=>{
list.value.splice(event.index, 1)
}).catch()
}
</script>

View File

@ -41,7 +41,7 @@
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { redirect } from '@/utils/common'
import { t } from '@/locale'
@ -61,6 +61,10 @@
type: 'address'
})
const areaRef = ref()
const formRef = ref(null)
const type = ref('')
onLoad((data) => {
if (data.id) {
getAddressInfo(data.id)
@ -69,11 +73,9 @@
})
.catch()
}
type.value = data.type || ''
})
const areaRef = ref()
const formRef = ref(null)
const rules = computed(() => {
return {
'name': {
@ -124,7 +126,7 @@
const operateLoading = ref(false)
const save = ()=> {
const save = formData.id ? editAddress : addAddress
const save = formData.value.id ? editAddress : addAddress
formRef.value.validate().then(() => {
if (operateLoading.value) return
@ -134,6 +136,9 @@
save(formData.value).then((res) => {
operateLoading.value = false
setTimeout(()=> {
redirect({ url: '/app/pages/member/address', param: { type: type.value } })
}, 1000)
}).catch(() => {
operateLoading.value = false
})

View File

@ -8,14 +8,14 @@
<view class="diy-template-wrap bg-index" v-if="data.pageMode != 'fixed'"
:style="{ backgroundColor: data.global.pageBgColor,minHeight: 'calc(100vh - 50px)',backgroundImage : data.global.bgUrl ? 'url(' + img(data.global.bgUrl) + ')' : '' }">
<diy-group :data="data" :pullDownRefresh="pullDownRefresh"></diy-group>
<diy-group :data="data" :pullDownRefreshCount="pullDownRefreshCount"></diy-group>
</view>
<!-- 固定模板渲染 -->
<view class="fixed-template-wrap" v-if="data.pageMode == 'fixed'">
<fixed-group :data="data" :pullDownRefresh="pullDownRefresh"></fixed-group>
<fixed-group :data="data" :pullDownRefreshCount="pullDownRefreshCount"></fixed-group>
</view>
@ -33,7 +33,7 @@
const loading = ref(true);
const diyStore = useDiyStore();
const pullDownRefresh = ref(0)
const pullDownRefreshCount = ref(0)
const name = ref('DIY_MEMBER_INDEX')
//
@ -64,7 +64,7 @@
//
onPullDownRefresh(() => {
pullDownRefresh.value++;
pullDownRefreshCount.value++;
uni.stopPullDownRefresh();
})
@ -116,4 +116,7 @@
background-size: 100% !important;
background-repeat: no-repeat !important;
}
:deep(.u-tabbar__placeholder) {
display: none !important;
}
</style>

View File

@ -1,7 +1,158 @@
<template>
<view></view>
<scroll-view scroll-y="true" class="bg-page h-screen">
<!-- <view class="h-[88rpx]">
<u-navbar title="添加地址" @rightClick="rightClick" :autoBack="true"></u-navbar>
</view> -->
<view class="h-[30rpx]"></view>
<view class="m-[30rpx] mt-0 p-[30rpx] pt-[10rpx] rounded-md bg-white">
<u-form labelPosition="left" :model="formData" labelWidth="200rpx" errorType='toast' :rules="rules"
ref="formRef">
<view class="mt-[10rpx]">
<u-form-item :label="t('name')" prop="name" :border-bottom="true">
<u-input v-model="formData.name" border="none" clearable
:placeholder="t('namePlaceholder')"></u-input>
</u-form-item>
</view>
<view class="mt-[10rpx]">
<u-form-item :label="t('mobile')" prop="mobile" :border-bottom="true">
<u-input v-model="formData.mobile" border="none" clearable
:placeholder="t('mobilePlaceholder')"></u-input>
</u-form-item>
</view>
<view class="mt-[10rpx]">
<u-form-item :label="t('deliveryAddress')" prop="address_name" :border-bottom="true">
<view class="flex justify-between flex-1" @click="chooseLocation">
<view class="text-[#c3c4d5] text-[15px]">{{formData.area ? formData.address_name : t('selectAddressPlaceholder')}}</view>
<u-icon name="arrow-right" color="#c3c4d5"></u-icon>
</view>
</u-form-item>
</view>
<view class="mt-[10rpx]">
<u-form-item :label="t('address')" prop="address" :border-bottom="true">
<u-input v-model="formData.address" border="none" clearable
:placeholder="t('addressPlaceholder')"></u-input>
</u-form-item>
</view>
<view class="mt-[10rpx]">
<u-form-item :label="t('defaultAddress')" prop="name" :border-bottom="true" >
<u-switch v-model="formData.is_default" size="20" :activeValue="1" :inactiveValue="0"></u-switch>
</u-form-item>
</view>
<view class="mt-[40rpx]">
<u-button type="primary" shape="circle" :text="t('save')" @click="save" :loading="operateLoading"></u-button>
</view>
</u-form>
</view>
</scroll-view>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { redirect } from '@/utils/common'
import { t } from '@/locale'
import { addAddress, editAddress, getAddressInfo } from '@/app/api/member'
const type = ref('')
const formData = ref({
id: 0,
name: '',
mobile: '',
lat: '',
lng: '',
address: '',
address_name: '学府街学府街学府街',
full_address: '',
is_default: 0,
area: '',
type: 'location_address'
})
onLoad((data) => {
if (data.id) {
getAddressInfo(data.id)
.then(({ data }) => {
if (data) {
Object.assign(formData.value, data)
formData.value.area = formData.value.full_address.replace(formData.value.address, '').replace(formData.value.address_name, '')
}
})
.catch()
}
type.value = data.type || ''
})
const formRef = ref(null)
const rules = computed(() => {
return {
'address': {
type: 'string',
required: true,
message: t('addressError'),
trigger: ['blur', 'change'],
},
'name': {
type: 'string',
required: true,
message: t('namePlaceholder'),
trigger: ['blur', 'change'],
},
'mobile': [
{
type: 'string',
required: true,
message: t('mobilePlaceholder'),
trigger: ['blur', 'change'],
},
{
validator() {
return uni.$u.test.mobile(formData.value.mobile)
},
message: t('mobileError')
}
]
}
})
const operateLoading = ref(false)
const save = ()=> {
if (uni.$u.test.isEmpty(formData.value.area)) {
uni.showToast({ title: t('selectAddressPlaceholder'), icon: 'none' })
return
}
const save = formData.value.id ? editAddress : addAddress
formRef.value.validate().then(() => {
if (operateLoading.value) return
operateLoading.value = true
formData.value.full_address = `${formData.value.area}${formData.value.address_name}${formData.value.address}`
save(formData.value).then((res) => {
operateLoading.value = false
setTimeout(()=> {
redirect({ url: '/app/pages/member/address', param: { type: type.value } })
}, 1000)
}).catch(() => {
operateLoading.value = false
})
})
}
const chooseLocation = ()=> {
uni.chooseLocation({
success: (res) => {
res.latitude && (formData.value.lat = res.latitude)
res.longitude && (formData.value.lng = res.longitude)
res.address && (formData.value.area = res.address)
res.name && (formData.value.address_name = res.name)
}
});
}
</script>
<style lang="scss" scoped></style>