Skip to content

飞
飞鹤小程序
Commit bda7f085 authored by 张九刚's avatar 张九刚
Browse files
Options

feat: 更新页面组件，优化样式和资源路径，添加全局基础URL

parent 8e379ceb
Hide whitespace changes
Inline Side-by-side
Showing with 2659 additions and 897 deletions
App.vue
View file @ bda7f085
......@@ -12,7 +12,7 @@ export default {
};
</script>
<style lang="less">
<style lang="less">
@import '/wxcomponents/vant/common/index.wxss';
/*每个页面公共css */
::-webkit-scrollbar {
......@@ -21,4 +21,16 @@ export default {
height: 0;
color: transparent;
}
::-ms-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
::-moz-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
</style>
cfg.js 0 → 100644
View file @ bda7f085
export const PRIVACY_URL = "https://secret.feihe.com/secret.html";
export const MEMBER_URL = "https://secret.feihe.com/index.html";
components/Layer.vue 0 → 100644
View file @ bda7f085
<template>
<view class="Layer-custom">
<!-- 遮罩层 -->
<view v-if="visible" class="layer-mask" @click="onMaskClick"></view>
<!-- 底部弹出层 -->
<view v-if="visible" class="layer-popup">
<view class="layer-panel">
<!-- 头部插槽或默认头部 -->
<slot name="header">
<view class="layer-header" v-if="!customHeader">
<text v-if="showCancel" @click="onCancel" class="layer-cancel"
>取消</text
>
<text v-if="title" class="layer-title">{{ title }}</text>
<text v-if="showConfirm" @click="onConfirm" class="layer-confirm"
>确定</text
>
</view>
</slot>
<!-- 内容插槽 -->
<view class="layer-content">
<slot></slot>
</view>
<!-- 底部插槽 -->
<slot name="footer"></slot>
</view>
</view>
</view>
</template>
<script setup>
import { ref, watch, defineEmits, defineProps } from "vue";
const props = defineProps({
modelValue: { type: Boolean, default: false },
title: { type: String, default: "" },
showCancel: { type: Boolean, default: true },
showConfirm: { type: Boolean, default: true },
maskClosable: { type: Boolean, default: true },
customHeader: { type: Boolean, default: false },
});
const emit = defineEmits([
"update:modelValue",
"confirm",
"cancel",
"open",
"close",
]);
const visible = ref(props.modelValue);
watch(
() => props.modelValue,
(val) => {
visible.value = val;
if (val) emit("open");
else emit("close");
}
);
function open() {
visible.value = true;
emit("update:modelValue", true);
emit("open");
}
function close() {
visible.value = false;
emit("update:modelValue", false);
emit("close");
}
function onConfirm() {
emit("confirm");
close();
}
function onCancel() {
emit("cancel");
close();
}
function onMaskClick() {
if (props.maskClosable) {
onCancel();
}
}
defineExpose({ open, close });
</script>
<style lang="less" scoped>
.layer-mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 3999;
}
.layer-popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 4000;
display: flex;
flex-direction: column;
align-items: center;
animation: layer-up 0.3s;
}
@keyframes layer-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.layer-panel {
width: 100vw;
min-height: 20vh;
background: #f6f8fa;
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
overflow: hidden;
display: flex;
flex-direction: column;
}
.layer-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 140rpx;
box-sizing: border-box;
background: #f6f8fa;
padding: 0 32rpx;
.layer-cancel {
color: #6f6d67;
font-size: 28rpx;
width: 136rpx;
height: 74rpx;
border-radius: 20rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.layer-confirm {
color: #ffffff;
font-size: 28rpx;
width: 136rpx;
height: 74rpx;
border-radius: 20rpx;
background: #d3a358;
display: flex;
align-items: center;
justify-content: center;
}
.layer-title {
color: #222;
font-size: 32rpx;
font-weight: bold;
flex: 1;
text-align: center;
}
}
.layer-content {
flex: 1;
padding: 32rpx;
box-sizing: border-box;
}
</style>
\ No newline at end of file
components/PickerCustom.vue 0 → 100644
View file @ bda7f085
<template>
<view class="picker-custom">
<!-- 插槽内容，点击触发弹层 -->
<view @click="open">
<slot></slot>
</view>
<!-- 遮罩层 -->
<view v-if="show" class="picker-layer-mask" @click="close"></view>
<!-- 底部弹出层 -->
<view v-if="show" class="picker-layer-popup">
<view class="picker-layer-panel">
<!-- 可自定义头部 -->
<view class="picker-layer-header">
<text @click="close" class="picker-layer-cancel">取消</text>
<text @click="confirm" class="picker-layer-confirm">确定</text>
</view>
<view class="picker-layer-view-mask-top"></view>
<view class="picker-layer-view-mask-bottom"></view>
<!-- 多列picker-view -->
<picker-view
class="picker-layer-view"
mask-style="background: rgb(246, 248, 250); z-index: 0;"
indicator-style="border-radius: 10px; height: 50px;background:#ffffff; z-index:0"
:value="pickerValue"
@change="onChange"
>
<template v-if="mode === 'date'">
<picker-view-column>
<view v-for="(item, idx) in years" :key="idx" class="picker-layer-item">
{{ item }}年
</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, idx) in months" :key="idx" class="picker-layer-item">
{{ item }}月
</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, idx) in days" :key="idx" class="picker-layer-item">
{{ item === '请选择' ? item : `${item}日` }}
</view>
</picker-view-column>
</template>
<template v-else>
<picker-view-column v-for="(col, colIdx) in columns" :key="colIdx">
<view v-for="(item, idx) in col" :key="idx" class="picker-layer-item">
{{ item }}
</view>
</picker-view-column>
</template>
</picker-view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, computed, watch } from "vue";
const props = defineProps({
mode: {
type: String,
default: 'custom', // 'date' | 'custom'
},
range: {
type: Array,
default: () => [],
},
value: {
type: [Number, Array],
default: 0,
},
onPickerChange: {
type: Function,
default: () => {},
},
onLayerVisibleChange: {
type: Function,
default: () => {},
},
});
const show = ref(false);
// date模式相关
const currentYear = new Date().getFullYear();
const years = computed(() => {
const arr = [];
for (let i = 1970; i <= currentYear; i++) {
arr.push(i);
}
return arr;
});
const months = computed(() => {
const arr = [];
for (let i = 1; i <= 12; i++) {
arr.push(i);
}
return arr;
});
const days = computed(() => {
const [yearIdx, monthIdx] = pickerValue.value;
const year = years.value[yearIdx] || years.value[0];
const month = months.value[monthIdx] || months.value[0];
const dayCount = new Date(year, month, 0).getDate();
const arr = ['请选择'];
for (let i = 1; i <= dayCount; i++) {
arr.push(i);
}
return arr;
});
// custom模式相关
const columns = computed(() => {
if (Array.isArray(props.range[0])) {
return props.range;
} else {
return [props.range];
}
});
const defaultValue = computed(() => {
if (props.mode === 'date') {
// 默认选中今年1月1日
return [years.value.length - 1, 0, 0];
} else if (Array.isArray(props.value)) {
return props.value;
} else {
return [props.value];
}
});
const pickerValue = ref([...defaultValue.value]);
watch(
() => props.value,
(val) => {
if (props.mode === 'date') {
pickerValue.value = [...val];
} else if (Array.isArray(val)) {
pickerValue.value = [...val];
} else {
pickerValue.value = [val];
}
}
);
function open() {
pickerValue.value = [...defaultValue.value];
show.value = true;
props.onLayerVisibleChange(true);
}
function close() {
show.value = false;
props.onLayerVisibleChange(false);
}
function confirm() {
close();
if (props.mode === 'date') {
const [yIdx, mIdx, dIdx] = pickerValue.value;
if(dIdx === 0) {
props.onPickerChange('');
return;
}
const year = years.value[yIdx];
const month = months.value[mIdx];
const day = days.value[dIdx];
const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
props.onPickerChange(dateStr);
} else {
// 单列时只返回索引，否则返回数组
if (columns.value.length === 1) {
props.onPickerChange(pickerValue.value[0]);
} else {
props.onPickerChange([...pickerValue.value]);
}
}
}
function onChange(e) {
let val = e.detail.value;
if (props.mode === 'date') {
// 如果天数溢出，自动修正到最大天数
const maxDay = days.value.length;
if (val[2] >= maxDay) val[2] = maxDay - 1;
pickerValue.value = val;
} else {
pickerValue.value = val;
}
}
</script>
<style lang="less" scoped>
.picker-layer-mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 3999;
}
.picker-layer-popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 4000;
display: flex;
flex-direction: column;
align-items: center;
animation: picker-layer-up 0.3s;
}
@keyframes picker-layer-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.picker-layer-panel {
width: 100vw;
height: 50vh;
background: #f6f8fa;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
overflow: hidden;
display: flex;
flex-direction: column;
}
.picker-layer-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 140rpx;
box-sizing: border-box;
background: #f6f8fa;
padding: 0 32rpx;
.picker-layer-cancel {
color: #6f6d67;
font-size: 28rpx;
width: 136rpx;
height: 74rpx;
border-radius: 20rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.picker-layer-confirm {
color: #ffffff;
font-size: 28rpx;
width: 136rpx;
height: 74rpx;
border-radius: 20rpx;
background: #d3a358;
display: flex;
align-items: center;
justify-content: center;
}
.picker-layer-title {
color: #222;
font-size: 32rpx;
font-weight: bold;
}
}
.picker-layer-view {
flex: 1;
width: 100%;
}
.picker-layer-item {
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
color: #1d1e25;
}
.picker-layer-view-mask-top {
position: absolute;
top: 140rpx;
left: 0;
width: 100%;
height: calc(50% - 100rpx);
z-index: 1;
background: linear-gradient(
to bottom,
rgb(246, 248, 250) 0%,
rgba(255, 255, 255, 0.5) 100%
);
pointer-events: none;
}
.picker-layer-view-mask-bottom {
position: absolute;
bottom: 0rpx;
left: 0;
width: 100%;
height: calc(50% - 100rpx);
z-index: 1;
background: linear-gradient(
to top,
rgb(246, 248, 250) 0%,
rgba(255, 255, 255, 0.5) 100%
);
pointer-events: none;
}
</style>
\ No newline at end of file
components/RegisterLayer.vue 0 → 100644
View file @ bda7f085
<template>
<Layer
v-model="visible"
:customHeader="true"
@confirm="handleConfirm"
@cancel="handleCancel"
>
<view class="register-baby-info-content">
<view class="register-baby-info-title">选择宝宝的生日和预产期</view>
<view class="register-baby-info-desc">
为了提供更有价值的服务，我们会将宝宝信息关联科学分析，星妈会不会泄漏您的任何个人信息，请放心使用。
</view>
<PickerCustom
mode="date"
:value="dateValue"
:onPickerChange="onDateChange"
:onLayerVisibleChange="onLayerVisibleChange"
>
<view class="register-baby-info-picker">
<view
class="register-baby-info-picker-value"
:style="dateDisplay ? 'color: #1d1e25;' : ''"
>{{ dateDisplay || "请选择宝宝的生日或预产期" }}</view
>
<image
class="register-baby-info-picker-arrow"
:src="$baseUrl + 'registerLayer/icon_arrow_yellow.png'"
mode="aspectFit"
/>
</view>
</PickerCustom>
<PickerCustom
mode="selector"
:range="genderOptions"
:value="genderIndex"
:onPickerChange="onGenderChange"
:onLayerVisibleChange="onLayerVisibleChange"
>
<view class="register-baby-info-picker">
<view
class="register-baby-info-picker-value"
:style="genderDisplay ? 'color: #1d1e25;' : ''"
>{{ genderDisplay || "请选择宝宝的性别" }}</view
>
<image
class="register-baby-info-picker-arrow"
:src="$baseUrl + 'registerLayer/icon_arrow_yellow.png'"
mode="aspectFit"
/>
</view>
</PickerCustom>
<PickerCustom
mode="selector"
:range="fetusOptions"
:value="fetusIndex"
:onPickerChange="onFetusChange"
:onLayerVisibleChange="onLayerVisibleChange"
>
<view class="register-baby-info-picker">
<view
class="register-baby-info-picker-value"
:style="fetusDisplay ? 'color: #1d1e25;' : ''"
>{{ fetusDisplay || "请选择胎数" }}</view
>
<image
class="register-baby-info-picker-arrow"
:src="$baseUrl + 'registerLayer/icon_arrow_yellow.png'"
mode="aspectFit"
/>
</view>
</PickerCustom>
<view class="register-baby-info-agreement">
<image
class="register-baby-info-agreement-icon"
:src="$baseUrl + 'registerLayer/privacy_agree.png'"
mode="aspectFit"
/>
<image
class="register-baby-info-userInfo-icon"
:src="$baseUrl + 'registerLayer/user_agree.png'"
mode="aspectFit"
/>
<image
v-if="!checked.option1"
class="register-baby-info-agreement-checkbox checkbox-checked1"
:src="$baseUrl + 'registerLayer/circle_no.png'"
mode="aspectFit"
@click="checked.option1 = !checked.option1"
/>
<image
v-else
class="register-baby-info-agreement-checkbox checkbox-checked1"
:src="$baseUrl + 'registerLayer/circle_yes.png'"
mode="aspectFit"
@click="checked.option1 = !checked.option1"
/>
<image
v-if="!checked.option2"
class="register-baby-info-agreement-checkbox checkbox-checked2"
:src="$baseUrl + 'registerLayer/circle_no.png'"
mode="aspectFit"
@click="checked.option2 = !checked.option2"
/>
<image
v-else
class="register-baby-info-agreement-checkbox checkbox-checked2"
:src="$baseUrl + 'registerLayer/circle_yes.png'"
mode="aspectFit"
@click="checked.option2 = !checked.option2"
/>
</view>
<view class="register-baby-info-btn" @click="handleBabyInfoConfirm">
完成
</view>
</view>
</Layer>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import Layer from "./Layer.vue";
import PickerCustom from "./PickerCustom.vue";
const props = defineProps({
modelValue: Boolean,
});
const emit = defineEmits([
"update:modelValue",
"update:value",
"confirm",
"cancel",
]);
const visible = ref(props.modelValue);
const imageUrl = ref(props.value);
watch(
() => props.modelValue,
(val) => (visible.value = val)
);
watch(
() => visible.value,
(val) => emit("update:modelValue", val)
);
watch(
() => props.value,
(val) => (imageUrl.value = val)
);
function removeImage() {
imageUrl.value = "";
emit("update:value", "");
}
function handleConfirm() {
emit("confirm", imageUrl.value);
visible.value = false;
}
function handleCancel() {
emit("cancel");
visible.value = false;
}
const checked = ref({
option1: false,
option2: false,
});
// 宝宝信息相关
const date = ref("");
const gender = ref("");
const fetus = ref("");
const genderOptions = ["男", "女", "保密"];
const fetusOptions = ["单胎", "多胎"];
// date picker
const dateValue = ref([50, 0, 0]); // 默认选中今年1月1日
const dateDisplay = ref("");
function onDateChange(val) {
dateDisplay.value = val;
date.value = val;
}
// gender picker
const genderIndex = ref(0);
const genderDisplay = computed(() => gender.value);
function onGenderChange(idx) {
genderIndex.value = idx;
gender.value = genderOptions[idx];
}
// fetus picker
const fetusIndex = ref(0);
const fetusDisplay = computed(() => fetus.value);
function onFetusChange(idx) {
fetusIndex.value = idx;
fetus.value = fetusOptions[idx];
}
function onLayerVisibleChange() {}
function handleBabyInfoConfirm() {
if (!checked.value.option1 || !checked.value.option2) {
uni.showToast({
title: "请先阅读并同意协议",
icon: "none",
});
return;
}
console.log(date.value, gender.value, fetus.value);
if(!date.value) {
uni.showToast({
title: "请选择宝宝的生日或预产期",
icon: "none",
});
return;
}
if(!gender.value) {
uni.showToast({
title: "请选择宝宝的性别",
icon: "none",
});
return;
}
if(!fetus.value) {
uni.showToast({
title: "请选择胎数",
icon: "none",
});
return;
}
emit("confirm", {
date: date.value,
gender: gender.value,
fetus: fetus.value,
});
visible.value = false;
}
function openAgreement() {
// 跳转协议页面
uni.navigateTo({ url: "/pages/agreement/index" });
}
</script>
<style lang="less" scoped>
.register-baby-info-content {
margin: 0;
padding: 20rpx 32rpx 0 32rpx;
background: #f8fafc;
border-radius: 40rpx 40rpx 0 0;
display: flex;
flex-direction: column;
align-items: center;
}
.register-baby-info-title {
font-size: 40rpx;
font-weight: bold;
color: #222;
margin-bottom: 12rpx;
align-self: flex-start;
}
.register-baby-info-desc {
font-size: 26rpx;
color: #888;
margin-bottom: 36rpx;
text-align: left;
align-self: flex-start;
line-height: 1.6;
}
.register-baby-info-picker {
width: 654rpx;
background: #fff;
border-radius: 24rpx;
margin-bottom: 28rpx;
padding: 0 32rpx;
height: 94rpx;
box-sizing: border-box;
display: flex;
align-items: center;
box-shadow: 0 4rpx 24rpx 0 rgba(211, 163, 88, 0.04);
border: none;
margin-left: auto;
margin-right: auto;
position: relative;
}
.register-baby-info-picker-value {
font-size: 32rpx;
color: #bdbfc3;
flex: 1;
text-align: center;
}
.register-baby-info-picker-arrow {
position: absolute;
right: 49rpx;
top: 50%;
transform: translateY(-50%);
width: 20rpx;
height: 12rpx;
}
.register-baby-info-agreement {
display: flex;
align-items: flex-start;
font-size: 24rpx;
color: #888;
margin: 24rpx 0 32rpx 0;
width: 100%;
position: relative;
height: 109rpx;
.register-baby-info-agreement-icon {
width: 574rpx;
height: 55rpx;
display: block;
position: absolute;
top: 0;
left: 48rpx;
}
.register-baby-info-userInfo-icon {
width: 515rpx;
height: 23rpx;
display: block;
position: absolute;
bottom: 0rpx;
left: 48rpx;
}
.register-baby-info-agreement-checkbox {
width: 32rpx;
height: 32rpx;
display: block;
position: absolute;
top: 0;
left: 0;
}
.checkbox-checked1 {
left: 0rpx;
top: -2rpx;
}
.checkbox-checked2 {
left: 0;
top: 82rpx;
}
}
.register-baby-info-link {
color: #d3a358;
text-decoration: underline;
margin-left: 8rpx;
}
.register-baby-info-btn {
width: 654rpx;
background: #d3a358;
color: #fff;
border-radius: 46rpx;
font-size: 36rpx;
padding: 24rpx 0;
margin-bottom: 46rpx;
border: none;
box-shadow: 0 8rpx 32rpx 0 rgba(211, 163, 88, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
components/TabBar.vue
View file @ bda7f085
......@@ -19,34 +19,35 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, getCurrentInstance } from "vue";
const props = defineProps({
tabList: {
type: Array,
default: () => [
{
text: "首页",
iconPath: "/static/tabBar/icon_tab_home_normal.png",
selectedIconPath: "/static/tabBar/icon_tab_home_selected.png",
},
{
text: "品牌故事",
iconPath: "/static/tabBar/icon_tab_brand_normal.png",
selectedIconPath: "/static/tabBar/icon_tab_brand_selected.png",
},
{
text: "积分服务",
iconPath: "/static/tabBar/icon_tab_gift_normal.png",
selectedIconPath: "/static/tabBar/icon_tab_gift_selected.png",
},
{
text: "我的",
iconPath: "/static/tabBar/icon_tab_person_normal.png",
selectedIconPath: "/static/tabBar/icon_tab_person_selected.png",
},
],
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
const tabList = ref([
{
text: "首页",
iconPath: $baseUrl + "tabBar/icon_tab_home_normal.png",
selectedIconPath: $baseUrl + "tabBar/icon_tab_home_selected.png",
},
{
text: "品牌故事",
iconPath: $baseUrl + "tabBar/icon_tab_brand_normal.png",
selectedIconPath: $baseUrl + "tabBar/icon_tab_brand_selected.png",
},
{
text: "积分服务",
iconPath: $baseUrl + "tabBar/icon_tab_gift_normal.png",
selectedIconPath: $baseUrl + "tabBar/icon_tab_gift_selected.png",
},
{
text: "我的",
iconPath: $baseUrl + "tabBar/icon_tab_person_normal.png",
selectedIconPath: $baseUrl + "tabBar/icon_tab_person_selected.png",
},
]);
const props = defineProps({
curTabIndex: {
type: Number,
default: 0,
......
main.js
View file @ bda7f085
......@@ -2,12 +2,17 @@ import App from "./App";
import apiRequest from "@/api/request.js";
import * as Pinia from 'pinia';
const BASE_URL = 'https://duiba.oss-cn-hangzhou.aliyuncs.com/fh/';
// #ifndef VUE3
import Vue from "vue";
import "./uni.promisify.adaptor";
// 全局挂载后使用
Vue.prototype.$api = apiRequest.api;
Vue.prototype.$baseUrl = BASE_URL;
Vue.config.productionTip = false;
App.mpType = "app";
......@@ -24,6 +29,7 @@ export function createApp() {
const app = createSSRApp(App);
app.use(Pinia.createPinia());
app.config.globalProperties.$api = apiRequest.api;
app.config.globalProperties.$baseUrl = BASE_URL;
return {
app,
Pinia
......
pages.json
View file @ bda7f085
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
"navigationBarTitleText": "首页",
"navigationStyle": "custom"
}
},
{
"path": "pages/person/person",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/webview/webview",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/search/search",
"style": {
"navigationBarTitleText": ""
"navigationStyle": "custom"
}
},
{
"path" : "pages/product/product",
"style" :
{
"navigationBarTitleText": "商品详情",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
}
],
......@@ -18,10 +43,10 @@
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "custom",
"navigationStyle": "default",
"usingComponents": {
"van-tab": "wxcomponents/vant/tab/index",
"van-tabs": "wxcomponents/vant/tabs/index"
"van-tab": "wxcomponents/vant/tab/index",
"van-tabs": "wxcomponents/vant/tabs/index"
}
},
"uniIdRouter": {}
......
pages/index/index.vue
View file @ bda7f085
......@@ -18,7 +18,7 @@
export default {
data() {
return {
curTabIndex: 0,
curTabIndex: 3,
};
},
onLoad() {},
......
pages/person/person.vue 0 → 100644
View file @ bda7f085
<template>
<view class="person-page">
<image
class="icon-return"
:src="$baseUrl + 'person/icon_return.png'"
mode="aspectFit"
@click="handleReturn"
/>
<image
class="banner_upload"
:src="$baseUrl + 'person/customer.png'"
mode="aspectFit"
/>
<view class="person-header">
<image
class="banner_bg"
:src="$baseUrl + 'person/banner.png'"
mode="aspectFill"
/>
<image
class="banner_cover"
:src="$baseUrl + 'person/cover_white.png'"
mode="aspectFill"
/>
</view>
<!-- 头像 -->
<view class="person-avatar">
<view class="person-avatar-box">
<button
class="avatar-wrapper"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image class="person-avatar-img" :src="formData.avatarUrl"></image>
</button>
</view>
<image
class="avatar-edit"
:src="$baseUrl + 'person/icon_modify.png'"
mode="aspectFit|aspectFill|widthFix"
lazy-load="false"
binderror=""
bindload=""
/>
</view>
<form @submit="onSubmit">
<view class="person-info">
<block
v-for="(item, index) in formItems
.filter(formItemFilter)
.slice(
0,
formData.currentBaby == '已出生' && pageStatus.formStatus == 2
? 6
: formItems.length
)"
:key="item.name"
>
<view
class="form-row"
:style="{
'border-bottom':
pageStatus.formStatus == 0 &&
index == formItems.filter(formItemFilter).length - 1
? 'none'
: '1rpx solid #f2f2f2',
}"
>
<text class="form-label">
{{ item.label }}
<text v-if="item.required" class="required">*</text>
</text>
<!-- 输入框类型 -->
<input
v-if="item.type === 'input'"
class="form-input"
:name="item.name"
:placeholder="item.placeholder"
v-model="formData[item.name]"
/>
<!-- 选择器类型 -->
<picker-custom
v-else-if="item.type === 'picker'"
:mode="item.mode"
:range="item.range"
:value="getPickerIndex(item)"
:onPickerChange="(e) => onPickerChange(e, item.name)"
:onLayerVisibleChange="(e) => (pageStatus.btnStatus = !e)"
>
<view class="form-input-box">
<view class="form-input">{{
formData[item.name] || item.placeholder
}}</view>
<image
class="form-input-icon"
:src="$baseUrl + 'person/icon_arrow_yellow_right.png'"
/>
</view>
</picker-custom>
<!-- 单选类型 -->
<radio-group
v-else-if="item.type === 'radio'"
@change="(e) => onRadioChange(e, item.name)"
>
<label
v-for="opt in item.options"
:key="opt.value"
class="form-radio"
>
<radio
:value="opt.value"
:checked="formData[item.name] === opt.value"
/>
{{ opt.label }}
</label>
</radio-group>
</view>
</block>
<view
v-if="pageStatus.formStatus != 0"
class="form-bottom-btn"
@click="handleFormBottomBtn"
>
<text class="form-bottom-text">
{{ pageStatus.formStatus == 1 ? "收起" : "展开" }}
</text>
<image
v-if="pageStatus.formStatus == 1"
class="form-bottom-icon"
:src="$baseUrl + 'person/icon_arrow_yellow_up.png'"
mode="aspectFit"
/>
<image
v-else
class="form-bottom-icon"
:src="$baseUrl + 'person/icon_arrow_yellow_down.png'"
mode="aspectFit"
/>
</view>
</view>
<view class="form-bottom"></view>
<button v-if="pageStatus.btnStatus" form-type="submit" class="form-btn">
保存
</button>
</form>
</view>
</template>
<script setup>
import { ref, watch } from "vue";
import PickerCustom from "../../components/PickerCustom.vue";
const pageStatus = ref({
formStatus: 0, // 0: 隐藏 1: 展开, 2: 收起
btnStatus: true, // 是否显示提交按钮
});
const formData = ref({
currentBaby: "备孕",
nickName: "",
dateOfBirth: "",
gender: "",
babyIndex: "",
eatFunc: "",
contentLike: "",
productLike: "",
specialAttention: "",
channel: "",
avatarUrl: "",
});
const FormMap = {
备孕: ["currentBaby", "dateOfBirth", "specialAttention"],
孕中: [
"currentBaby",
"dateOfBirth2",
"yz",
"babyIndex",
"contentLike",
"specialAttention",
],
已出生: [
"currentBaby",
"nickName",
"dateOfBirth",
"babyIndex",
"gender",
"eatFunc",
"contentLike",
"productLike",
"specialAttention",
"channel",
],
};
const formItemFilter = (item) => {
return FormMap[formData.value.currentBaby].includes(item.name);
};
const formItems = [
{
label: "当前状态",
name: "currentBaby",
required: true,
placeholder: "请选择当前状态",
type: "picker",
range: ["已出生", "孕中", "备孕"],
},
{
label: "宝宝昵称",
name: "nickName",
required: true,
placeholder: "请输入宝宝昵称",
type: "input",
},
{
label: "宝宝出生日期",
name: "dateOfBirth",
required: true,
placeholder: "请选择出生日期",
type: "picker",
mode: "date",
},
{
label: "预产日期",
name: "dateOfBirth2",
required: true,
placeholder: "请选择预产日期",
type: "picker",
mode: "date",
},
{
label: "宝宝胎数",
name: "babyIndex",
required: true,
placeholder: "请选择胎数",
type: "picker",
range: ["单胎", "二胎", "多胎"],
mode: "custom",
},
{
label: "性别",
name: "gender",
required: true,
placeholder: "请选择性别",
type: "picker",
range: ["男", "女"],
mode: "custom",
},
{
label: "喂养方式",
name: "eatFunc",
required: false,
placeholder: "请选择喂养方式",
type: "picker",
range: ["纯母乳", "混合", "奶粉"],
mode: "custom",
},
{
label: "孕周",
name: "yz",
required: false,
placeholder: "请选择",
type: "input",
},
{
label: "内容偏好",
name: "contentLike",
required: false,
placeholder: "请选择内容偏好",
type: "input",
},
{
label: "产品使用偏好",
name: "productLike",
required: false,
placeholder: "请选择产品使用偏好",
type: "input",
},
{
label: "特殊关注信息",
name: "specialAttention",
required: false,
placeholder: "请输入特殊关注信息",
type: "input",
},
{
label: "常购买渠道",
name: "channel",
required: false,
placeholder: "请选择常购买渠道",
type: "picker",
range: ["电商", "母婴店", "超市"],
mode: "custom",
},
];
const getPickerIndex = (item) => {
const val = formData.value[item.name];
if (item.mode === "date") {
// val 形如 '2024-06-01'
if (typeof val === "string" && val.match(/^\d{4}-\d{2}-\d{2}$/)) {
const [year, month, day] = val.split("-").map(Number);
const currentYear = new Date().getFullYear();
const yearIdx = year - 1970;
const monthIdx = month - 1;
const dayIdx = day - 1;
return [yearIdx, monthIdx, dayIdx];
}
// 默认选中今年1月1日
const currentYear = new Date().getFullYear();
return [currentYear - 1970, 0, 0];
} else if (Array.isArray(item.range?.[0])) {
// 多列自定义选择
if (Array.isArray(val)) {
return val.map((v, col) => item.range[col].indexOf(v));
}
// 默认选中每列第一个
return item.range.map(() => 0);
} else {
// 单列自定义选择
return val ? item.range.indexOf(val) : 0;
}
};
const onPickerChange = (e, name) => {
const item = formItems.find((i) => i.name === name);
// 日期选择（mode="date"），e 为字符串
if (item.mode === "date") {
formData.value[name] = e;
} else if (Array.isArray(e)) {
// 多列自定义选择
formData.value[name] = e.map((idx, col) => item.range[col][idx]).join(" ");
} else {
// 单列自定义选择
formData.value[name] = item.range[e];
}
};
const onRadioChange = (e, name) => {
formData.value[name] = e.detail.value;
};
const onSubmit = (e) => {
// 校验与提交逻辑
console.log("提交数据", formData.value);
};
const handleReturn = () => {
uni.navigateBack();
};
const handleFormBottomBtn = () => {
pageStatus.value.formStatus = pageStatus.value.formStatus == 1 ? 2 : 1;
};
const onChooseAvatar = (e) => {
formData.value.avatarUrl = e.detail.avatarUrl;
};
watch(
() => formData.value.currentBaby,
(newVal) => {
if (newVal === "已出生") {
pageStatus.value.formStatus = 2;
} else {
pageStatus.value.formStatus = 0;
}
}
);
</script>
<style lang="less" scoped>
@import "@/common.less";
.person-page {
background-color: #f6f8fa;
min-height: 100vh;
.icon-return {
width: 20rpx;
height: 32rpx;
position: fixed;
top: 115rpx;
left: 48rpx;
z-index: 100;
}
.banner_upload {
width: 197rpx;
height: 68rpx;
position: absolute;
top: 200rpx;
right: 0;
z-index: 2;
}
.person-header {
position: relative;
height: 463rpx;
.banner_bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
}
.banner_cover {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
display: block;
}
}
.person-avatar {
position: absolute;
top: 269rpx;
left: 50%;
transform: translateX(-50%);
z-index: 2;
.person-avatar-box {
width: 128rpx;
height: 128rpx;
border-radius: 50%;
overflow: hidden;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
.avatar-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.person-avatar-img {
width: 126rpx;
height: 126rpx;
display: block;
}
}
.avatar-edit {
width: 78rpx;
height: 75rpx;
position: absolute;
bottom: -18rpx;
right: -16rpx;
display: block;
}
}
.person-info {
background: #fff;
border-radius: 32rpx;
margin: -20rpx auto 0;
padding: 10rpx 32rpx 10rpx 32rpx;
box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
width: 686rpx;
position: relative;
z-index: 2;
box-sizing: border-box;
.form-row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #f2f2f2;
height: 110rpx;
}
.form-line-hidden {
border-bottom: none;
}
.form-label {
width: 250rpx;
color: #222;
font-size: 28rpx;
.required {
color: #b88a3a;
margin-left: -4rpx;
}
}
.form-input {
flex: 1;
color: #6f6d67;
font-size: 28rpx;
background: none;
border: none;
outline: none;
text-align: right;
}
.form-input-icon {
width: 11rpx;
height: 19rpx;
margin-left: 16rpx;
display: block;
}
.form-input-box {
display: flex;
align-items: center;
justify-content: center;
}
.form-radio {
margin-right: 32rpx;
font-size: 28rpx;
}
}
.form-bottom-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80rpx;
.form-bottom-text {
font-size: 28rpx;
color: #6f6d67;
}
.form-bottom-icon {
width: 19rpx;
height: 12rpx;
margin-left: 13rpx;
display: block;
}
}
.form-bottom {
height: 300rpx;
width: 100%;
}
.form-btn {
width: 686rpx;
height: 94rpx;
border-radius: 46rpx;
background-color: #d3a358;
color: #ffffff;
font-size: 32rpx;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
}
</style>
pages/product/product.vue 0 → 100644
View file @ bda7f085
<template>
<view class="container">
<image mode="widthFix" class="productimg" :src="$baseUrl + 'brandpage/products/' + productId + '.jpg'"></image>
<view class="btnbox">
<image @tap="buyHandler" class="btnbuy" :src="$baseUrl + 'brandpage/btnbuy.png'"></image>
<button class="btnshare" open-type="share" style="background: none; border: none; padding: 0;">
<image class="btnshare" :src="$baseUrl + 'brandpage/btnshare.png'"></image>
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
productId: ''
}
},
onLoad(options) {
// options 就是跳转时传递的参数对象
console.log('页面参数:', options);
this.productId = options.id;
},
methods: {
buyHandler() {
uni.navigateToMiniProgram({
appId: 'wx1234567890abcdef',
path: 'pages/index/index',
envVersion: 'release',
success(res) {
console.log('跳转成功', res)
},
fail(err) {
console.error('跳转失败', err)
}
})
},
shareHandler() {
}
},
onShareAppMessage() {
return {
title: '商品详情',
path: '/pages/product/product?id=123',
imageUrl: 'https://你的图片链接.jpg'
}
},
}
</script>
<style lang="less" scoped>
.container {
.productimg {
width: 750rpx;
}
.btnbox {
position: fixed;
left: 0;
width: 100%;
bottom: 0;
height: 150rpx;
display: flex;
justify-content: space-between;
.btnbuy {
width: 350rpx;
height: 75rpx;
margin-left: 20rpx;
}
.btnshare {
width: 350rpx;
height: 75rpx;
}
}
}
</style>
pages/search/search.vue
View file @ bda7f085
<template>
<view class="container">
<view class="searchBar" :style="`top:${statusBarHeight}px`">
<image @tap="backHandler" class="btnback" :src="baseImgUrl+'/static/searchpage/btnback.png'"></image>
<image @tap="backHandler" class="btnback" :src="$baseUrl+'searchpage/btnback.png'"></image>
<view class="input-view">
<view class="flexinput">
<image class="icon_search_yellow" :src="baseImgUrl+'/static/searchpage/icon_search_yellow.png'">
<image class="icon_search_yellow" :src="$baseUrl+'searchpage/icon_search_yellow.png'">
</image>
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
<input confirm-type="search" maxlength="50" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
@confirm="confirm" />
</view>
</view>
</view>
<view class="topbox" :style="`margin-top:${statusBarHeight+10}px`">
<view v-if="step === 1" class="recentbox">
<image class="icon_trash" :src="baseImgUrl+'/static/searchpage/icon_trash.png'"></image>
<image class="icon_trash" :src="$baseUrl+'searchpage/icon_trash.png'"></image>
<view class="title">最近搜索</view>
<view class="tagbox">
<view :key="index" v-for="(item,index) in recentTagsList" class="tag">{{item}}</view>
<view @tap="searchHandler(item)" :key="index" v-for="(item,index) in recentTagsList" class="tag">{{item}}</view>
</view>
</view>
<view v-if="step === 1" class="recentbox">
<view class="title">大家都在搜</view>
<view class="tagbox">
<view :key="index" v-for="(item,index) in oftenTagsList" class="tag">{{item}}</view>
<view @tap="searchHandler(item)" :key="index" v-for="(item,index) in oftenTagsList" class="tag">{{item}}</view>
</view>
</view>
<view v-if="step !== 1" class="tabbox">
<van-tabs :color="`#d3a358`" :active="tabIndex" @click="onTabChange">
<van-tabs :color="`#d3a358`" line-width="15px" :active="tabIndex" @click="onTabChange">
<van-tab title="内容" name="a"></van-tab>
<van-tab title="工具" name="b"></van-tab>
<van-tab title="商品" name="c"></van-tab>
......@@ -37,7 +37,7 @@
</view>
<view v-if="step !== 1" class="cardbox">
<view class="card" v-for="(item,index) in resultList[tabIndex]" :key="index">
<image class="pic" :src="baseImgUrl+item.bgUrl"></image>
<image class="pic" :src="$baseUrl+item.bgUrl"></image>
<view class="desc">
{{item.desc}}
</view>
......@@ -52,7 +52,7 @@
</template>
<script>
const baseImgUrl = "";
const recentTagsList=[
"功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴"
]
......@@ -62,49 +62,49 @@
const resultList = [
[
{
bgUrl:"/static/searchpage/test.png",
bgUrl:"searchpage/test.png",
desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test.png",
bgUrl:"searchpage/test.png",
desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test.png",
bgUrl:"searchpage/test.png",
desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test.png",
bgUrl:"searchpage/test.png",
desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test.png",
bgUrl:"searchpage/test.png",
desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test.png",
bgUrl:"searchpage/test.png",
desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test.png",
bgUrl:"searchpage/test.png",
desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test.png",
bgUrl:"searchpage/test.png",
desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
timeStr:"2025-03-10",
link:"www.baidu.com"
......@@ -112,31 +112,31 @@
],
[
{
bgUrl:"/static/searchpage/test2.png",
bgUrl:"searchpage/test2.png",
desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test2.png",
bgUrl:"searchpage/test2.png",
desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test2.png",
bgUrl:"searchpage/test2.png",
desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test2.png",
bgUrl:"searchpage/test2.png",
desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test2.png",
bgUrl:"searchpage/test2.png",
desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
timeStr:"2025-03-10",
link:"www.baidu.com"
......@@ -144,31 +144,31 @@
],
[
{
bgUrl:"/static/searchpage/test3.png",
bgUrl:"searchpage/test3.png",
desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test3.png",
bgUrl:"searchpage/test3.png",
desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test3.png",
bgUrl:"searchpage/test3.png",
desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test3.png",
bgUrl:"searchpage/test3.png",
desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
timeStr:"2025-03-10",
link:"www.baidu.com"
},
{
bgUrl:"/static/searchpage/test3.png",
bgUrl:"searchpage/test3.png",
desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
timeStr:"2025-03-10",
link:"www.baidu.com"
......@@ -179,19 +179,19 @@
data() {
return {
baseImgUrl: baseImgUrl,
statusBarHeight: 38,
recentTagsList:recentTagsList,
oftenTagsList:oftenTagsList,
step:2,
step:1,
resultList:resultList,
tabIndex:0,
searchValue:''
}
},
mounted() {
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight || 38;
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
this.statusBarHeight = menuButtonInfo.top;
},
methods: {
backHandler() {
......@@ -202,10 +202,13 @@
this.tabIndex = evt.detail.index;
},
confirm(evt){
this.searchValue= evt.detail.value;
this.searchHandler(evt.detail.value);
},
searchHandler(){
searchHandler(_searchValue){
if(_searchValue){
this.searchValue=_searchValue;
}
this.step=2;
}
}
}
......@@ -215,6 +218,7 @@
@import '@/common.less';
:root{
--tab-font-size:28rpx;
--tabs-line-height:60rpx;
--tab-active-text-color:#1d1e25;
--tab-text-color:#a2a3a6;
}
......
pages/webview/webview.vue 0 → 100644
View file @ bda7f085
<template>
<web-view :src="src" />
</template>
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as CFG from "@/cfg";
const src = ref("");
onLoad((options) => {
let url = "";
if (options.type) {
const type = options.type;
url = CFG[type];
} else {
url = options.url || "";
}
src.value = url;
});
</script>
\ No newline at end of file
views/Brand.vue
View file @ bda7f085
......@@ -6,7 +6,8 @@
:indicator-color="indicatorColor" :indicator-active-color="indicatoractiveColor">
<swiper-item v-for="item in swiperList" :key="item.url">
<view class="swiper-item banneritem">
<image :data-link="item.link" @tap="jumpLink(item.link)" class="b-img" :src="item.url"></image>
<image :data-link="item.link" @tap="jumpLink(item.link)" class="b-img" :src="$baseUrl + item.url">
</image>
</view>
</swiper-item>
......@@ -14,33 +15,33 @@
<view class="swiperbox">
<view class="iconbox">
<image @tap="jumpSwiper(index)" class="icon"
:src="swiperIndex === index?icon.activeUrl:icon.baseUrl" v-for="(icon,index) in swiperIconList"
:key="index"></image>
:src="swiperIndex === index ? $baseUrl + icon.activeUrl : $baseUrl + icon.baseUrl"
v-for="(icon, index) in swiperIconList" :key="index"></image>
</view>
</view>
<view class="videoposterbox">
<image class="videoposter" :src="baseImgUrl+'/static/brandpage/videoposter.png'"></image>
<image class="videoposter" :src="$baseUrl + 'brandpage/videoposter.png'"></image>
</view>
<view class="productcontai">
<text class="maintitle">飞鹤产品家族</text>
<view class="listbox">
<view @tap="channelTabHandler(index)"
:class="channelTabIndex===index?'tabitem tabActive':'tabitem' "
v-for="(item,index) in productTabList" :key="index">
{{item}}
:class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
v-for="(item, index) in productTabList" :key="index">
{{ item }}
</view>
</view>
<view class="productbox">
<view class="infobox" :key="index" v-for="(infoItem,index) in productInfoList[channelTabIndex]"
<view class="infobox" :key="index" v-for="(infoItem, index) in productInfoList[channelTabIndex]"
@tap="jumpLink(infoItem.link)">
<view class="flexbox">
<view class="infotitle">
{{infoItem.title}}
{{ infoItem.title }}
</view>
<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
</view>
<view class="infodesc">{{infoItem.desc}}</view>
<view class="infodesc">{{ infoItem.desc }}</view>
</view>
</view>
......@@ -48,28 +49,28 @@
</view>
<view class="ipbox">
<image class="iphexiaofei" :src="baseImgUrl+'/static/brandpage/iphexiaofei.png'"></image>
<image class="iphexiaofei" :src="$baseUrl + 'brandpage/iphexiaofei.png'"></image>
<view class="ipcard">
<view class="title">
飞鹤品牌IP<view class="t1">鹤小飞一家</view>
</view>
<view class="desc">
{{ipDesc}}
{{ ipDesc }}
</view>
<view class="ipflex">
<view class="ipbg ip1">
<image src="/static/brandpage/ip1.png"></image>
<image @tap="showPopup(1)" :src="$baseUrl + 'brandpage/ip1.png'"></image>
</view>
<view class="ipright">
<view class="ipbg ip2">
<image src="/static/brandpage/ip2.png"></image>
<image @tap="showPopup(1)" :src="$baseUrl + 'brandpage/ip2.png'"></image>
</view>
<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
<view class="ipbg ip3">
<image src="/static/brandpage/ip3.png"></image>
<image @tap="showPopup(0)" :src="$baseUrl + 'brandpage/ip3.png'"></image>
</view>
<view class="ipbg ip4">
<image src="/static/brandpage/ip4.png"></image>
<image @tap="showPopup(2)" :src="$baseUrl + 'brandpage/ip4.png'"></image>
</view>
</view>
......@@ -83,627 +84,768 @@
<text class="subtitle">关注祖国下一代的营养、教育和陪伴</text>
<view class="channelscroll">
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem,index) in esgInfoList"
<view class="infobox" :key="index" v-for="(infoItem, index) in esgInfoList"
@tap="jumpLink(infoItem.link)">
<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
<view class="infotitle">{{infoItem.title}}</view>
<view class="infodesc">{{infoItem.desc}}</view>
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitle">{{ infoItem.title }}</view>
<view class="infodesc">{{ infoItem.desc }}</view>
</view>
</view>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
border-radius="48rpx">
<view v-if="this.popupIndex < 2" class="popup-content">
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
<view class="title">
{{ this.qrInfoList[this.popupIndex].title }}
</view>
<rich-text class="desc" :nodes="this.qrInfoList[this.popupIndex].desc">
</rich-text>
<image class="qrcode" :src="$baseUrl + this.qrInfoList[this.popupIndex].qrUrl"></image>
<image @tap="downloadHandler($baseUrl + this.qrInfoList[this.popupIndex].qrUrl)" class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"></image>
</view>
<view v-else class="popup-content" style="height: 899rpx;">
<image class="xingmahui" :src="$baseUrl + 'brandpage/hexiaofei.png'"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
const baseImgUrl = "";
const swiperList = [{
url: '/static/brandpage/Banner1.jpg',
link: 'www.baidu.com'
},
{
url: '/static/brandpage/Banner2.jpg',
link: 'www.baidu.com'
},
{
url: '/static/brandpage/Banner3.jpg',
link: 'www.baidu.com'
},
];
const swiperIconList = [{
baseUrl: "/static/brandpage/corn1.png",
activeUrl: "/static/brandpage/corn2.png"
},
{
baseUrl: "/static/brandpage/cattle1.png",
activeUrl: "/static/brandpage/cattle2.png"
},
{
baseUrl: "/static/brandpage/factory1.png",
activeUrl: "/static/brandpage/factory2.png"
}
];
const productTabList = ["全部", "母婴全阶", "功能营养", "儿童产品", "北纬47°"];
const productInfoList = [
[{
bgUrl: "/static/brandpage/pic_0_1.png",
title: "超凡 吸收",
desc: "星飞帆经典 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_2.png",
title: "顶配 脑育",
desc: "星飞帆卓睿 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_3.png",
title: "亲和 自护",
desc: "星飞帆卓耀 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_4.png",
title: " 4维 效力",
desc: "爱本跃动蛋白营养粉",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_5.png",
title: "高钙 爆脆",
desc: "高钙奶酪泡芙脆",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_6.png",
title: "软糯 Q弹",
desc: "北纬47度黄糯玉米",
link: "www.baidu.com"
},
],
[{
bgUrl: "/static/brandpage/pic_1_1.png",
title: "超凡 吸收",
desc: "星飞帆经典 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_2.png",
title: "顶配 脑育",
desc: "星飞帆卓睿 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_3.png",
title: "亲和 自护",
desc: "星飞帆卓耀 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_4.png",
title: "有机 A 2",
desc: "臻稚卓蓓 A2 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_5.png",
title: "高配 有机",
desc: "臻稚卓蓓 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_6.png",
title: "不止 有机",
desc: "淳芮有机奶粉 3段",
link: "www.baidu.com"
},
],
[{
bgUrl: "/static/brandpage/pic_2_1.png",
title: " 4维 效力",
desc: "爱本跃动蛋白营养粉",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_2.png",
title: "初乳 精华",
desc: "爱本牛初乳",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_3.png",
title: "每日 蛋白",
desc: "爱本每日蛋白营养糊",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_4.png",
title: "腰腹 燃脂",
desc: "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_5.png",
title: "药食 同源",
desc: "爱本参芝初乳肽",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_6.png",
title: "一夜 天亮",
desc: "爱本悦眠功能粉",
link: "www.baidu.com"
},
],
[{
bgUrl: "/static/brandpage/pic_3_1.png",
title: "高钙 高纤",
desc: "爱上吃菜乳酪",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_2.png",
title: "高钙 爆脆",
desc: "高钙奶酪泡芙脆",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_3.png",
title: "醇香 黑巧",
desc: "高纤黑巧乳酪",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_4.png",
title: "10倍 奶钙",
desc: "超新星水果奶酪",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_5.png",
title: "浓郁 爆浆",
desc: "厚切流心芝士片",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_6.png",
title: "洁净 配方",
desc: "嚼奶粉乳酪",
link: "www.baidu.com"
},
],
[{
bgUrl: "/static/brandpage/pic_4_1.png",
title: "含有 叶酸",
desc: "北纬47度白甜糯玉米",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_2.png",
title: "含花 青素",
desc: "北纬47度黑珍珠甜糯玉米",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_3.png",
title: "软糯 香甜",
desc: "北纬47度花甜糯玉米",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_4.png",
title: "开袋 即食",
desc: "北纬47度低GI水果玉米粒袋装",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_5.png",
title: "秘制 工艺",
desc: "北纬47度东北烧烤味玉米段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_6.png",
title: "轻卡 低GI",
desc: "N47°水果玉米汁",
link: "www.baidu.com"
},
]
]
const ipDesc = "鹤小飞一家是由鹤爸、鹤妈、鹤小飞（哥哥）、鹤小小（妹妹） 组成的一家。\n四口热爱生活、积极向上，是他们一家对生活的态度。"
const esgInfoList = [{
bgUrl: "/static/brandpage/esg1.png",
title: "中国飞鹤发布2024年ESG报告",
desc: "飞鹤践行低碳节能，打造绿色产业链；承担 龙头责任，引领行业创新发展；履行社会责 任，构建共富共享生态。",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/esg2.png",
title: "12亿元生育补贴计划",
desc: "中国飞鹤于2025年4月初在全国范围内启动 总规模为12亿元，为符合条件的孕期家庭提 供不少于1500元生育补贴的飞鹤生育补贴",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/esg3.png",
title: "教育公益",
desc: "百年大计，教育为本；教育大计，教师为本。 近三年来，飞鹤已投入超过6500万元开展专 项助教活动，惠及在职专任教师超过28万人",
link: "www.baidu.com"
}
const swiperList = [{
url: 'brandpage/Banner1.jpg',
link: 'www.baidu.com'
},
{
url: 'brandpage/Banner2.jpg',
link: 'www.baidu.com'
},
{
url: 'brandpage/Banner3.jpg',
link: 'www.baidu.com'
},
];
const swiperIconList = [{
baseUrl: "brandpage/corn1.png",
activeUrl: "brandpage/corn2.png"
},
{
baseUrl: "brandpage/cattle1.png",
activeUrl: "brandpage/cattle2.png"
},
{
baseUrl: "brandpage/factory1.png",
activeUrl: "brandpage/factory2.png"
}
];
const productTabList = ["全部", "母婴全阶", "功能营养", "儿童产品", "北纬47°"];
const productInfoList = [
[{
bgUrl: "brandpage/pic_0_1.png",
title: "超凡 吸收",
desc: "星飞帆经典 3段",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_0_2.png",
title: "顶配 脑育",
desc: "星飞帆卓睿 3段",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_0_3.png",
title: "亲和 自护",
desc: "星飞帆卓耀 3段",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_0_4.png",
title: " 4维 效力",
desc: "爱本跃动蛋白营养粉",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_0_5.png",
title: "高钙 爆脆",
desc: "高钙奶酪泡芙脆",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_0_6.png",
title: "软糯 Q弹",
desc: "北纬47度黄糯玉米",
link: "www.baidu.com"
},
],
[{
bgUrl: "brandpage/pic_1_1.png",
title: "超凡 吸收",
desc: "星飞帆经典 3段",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_1_2.png",
title: "顶配 脑育",
desc: "星飞帆卓睿 3段",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_1_3.png",
title: "亲和 自护",
desc: "星飞帆卓耀 3段",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_1_4.png",
title: "顶配 A 2",
desc: "星飞帆卓睿A2奶源",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_1_5.png",
title: "活性 有机",
desc: "臻稚卓蓓 3段",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_1_6.png",
title: "高端 乳铁",
desc: "臻爱倍护 3段",
link: "www.baidu.com"
},
],
[{
bgUrl: "brandpage/pic_2_1.png",
title: " 4维 效力",
desc: "爱本跃动蛋白营养粉",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_2_2.png",
title: "初乳 精华",
desc: "爱本牛初乳",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_2_3.png",
title: "每日 蛋白",
desc: "爱本每日蛋白营养糊",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_2_4.png",
title: "腰腹 燃脂",
desc: "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_2_5.png",
title: "药食 同源",
desc: "爱本参芝初乳肽",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_2_6.png",
title: "一夜 天亮",
desc: "爱本悦眠功能粉",
link: "www.baidu.com"
},
],
[{
bgUrl: "brandpage/pic_3_1.png",
title: "高钙 高纤",
desc: "爱上吃菜乳酪",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_3_2.png",
title: "高钙 爆脆",
desc: "高钙奶酪泡芙脆",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_3_3.png",
title: "醇香 黑巧",
desc: "高纤黑巧乳酪",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_3_4.png",
title: "10倍 奶钙",
desc: "超新星水果奶酪",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_3_5.png",
title: "浓郁 爆浆",
desc: "厚切流心芝士片",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_3_6.png",
title: "洁净 配方",
desc: "嚼奶粉乳酪",
link: "www.baidu.com"
},
],
[{
bgUrl: "brandpage/pic_4_1.png",
title: "含有 叶酸",
desc: "北纬47度白甜糯玉米",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_4_2.png",
title: "软糯 Q弹",
desc: "北纬47度黄糯玉米",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_4_3.png",
title: "开袋 即食",
desc: "北纬47度低GI水果玉米粒袋装",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_4_4.png",
title: "秘制 工艺",
desc: "北纬47度东北烧烤味玉米段",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_4_5.png",
title: "0乳糖 低GI",
desc: "N47°植物酵素乳",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/pic_4_6.png",
title: "轻卡 低GI",
desc: "N47°水果玉米汁",
link: "www.baidu.com"
},
]
export default {
data() {
return {
baseImgUrl: baseImgUrl,
swiperList: swiperList,
indicatorDots: false,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
channelTabIndex: 0,
productTabList: productTabList,
productInfoList: productInfoList,
swiperIconList: swiperIconList,
swiperIndex: 0,
ipDesc: ipDesc,
esgInfoList: esgInfoList
]
const ipDesc = "鹤小飞一家是由鹤爸、鹤妈、鹤小飞（哥哥）、鹤小小（妹妹） 组成的一家。\n四口热爱生活、积极向上，是他们一家对生活的态度。"
const esgInfoList = [{
bgUrl: "brandpage/esg1.png",
title: "中国飞鹤发布2024年ESG报告",
desc: "飞鹤践行低碳节能，打造绿色产业链；承担 龙头责任，引领行业创新发展；履行社会责 任，构建共富共享生态。",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/esg2.png",
title: "12亿元生育补贴计划",
desc: "中国飞鹤于2025年4月初在全国范围内启动 总规模为12亿元，为符合条件的孕期家庭提 供不少于1500元生育补贴的飞鹤生育补贴",
link: "www.baidu.com"
},
{
bgUrl: "brandpage/esg3.png",
title: "教育公益",
desc: "百年大计，教育为本；教育大计，教师为本。 近三年来，飞鹤已投入超过6500万元开展专 项助教活动，惠及在职专任教师超过28万人",
link: "www.baidu.com"
}
]
const qrInfoList = [{
title: "视频号",
desc: "扫码关注<span style='color:#D3A358;'>鹤小飞一家</span>视频号，看超多有爱的趣味故事",
qrUrl: "brandpage/qrhxf_sph.png"
},
{
title: "微信小店",
desc: "扫码进入<span style='color:#D3A358;'>鹤小飞一家</span>店铺，挑选精美限量周边",
qrUrl: "brandpage/qrhxf_wxxd.png"
}
]
export default {
data() {
return {
popType: 'bottom',
swiperList: swiperList,
indicatorDots: false,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
channelTabIndex: 0,
productTabList: productTabList,
productInfoList: productInfoList,
swiperIconList: swiperIconList,
swiperIndex: 0,
ipDesc: ipDesc,
esgInfoList: esgInfoList,
qrInfoList: qrInfoList,
popupIndex: 0,
}
}
},
methods: {
intervalChange(e) {
this.swiperIndex = e.target.current;
},
jumpSwiper(_index) {
this.swiperIndex = _index;
},
jumpLink(_link) {
// console.log(_link)
uni.navigateTo({
url: "/pages/product/product?id=1-1"
})
},
channelTabHandler(_index) {
this.channelTabIndex = _index;
},
methods: {
intervalChange(e) {
this.swiperIndex = e.target.current;
},
jumpSwiper(_index) {
this.swiperIndex = _index;
},
jumpLink(_link) {
console.log(_link)
},
channelTabHandler(_index) {
this.channelTabIndex = _index;
showPopup(_index) {
this.popupIndex = _index;
this.$refs.popup.open(this.popType);
},
closePop() {
this.$refs.popup.close();
},
downloadHandler(imgurl) {
uni.downloadFile({
url: imgurl,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
} else {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
});
}
}
}
}
</script>
<style lang="less" scoped>
@import '@/common.less';
@import '@/common.less';
.brand-container {
.content {
padding-bottom: 200rpx;
.brand-container {
.content {
padding-bottom: 200rpx;
.banner {
.banner {
height: 1250rpx;
.banneritem {
width: 750rpx;
height: 1250rpx;
.banneritem {
width: 750rpx;
height: 1250rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.b-img {
width: 100%;
height: 100%;
}
.swiperbox {
position: absolute;
top: 1002rpx;
width: 650rpx;
left: 50rpx;
.iconbox {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.icon {
width: 200rpx;
height: 200rpx;
}
}
.swiperbox {
position: absolute;
top: 1002rpx;
width: 650rpx;
left: 50rpx;
.iconbox {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.icon {
width: 200rpx;
height: 200rpx;
}
}
.videoposterbox {
width: 686rpx;
height: 384rpx;
margin-left: 32rpx;
margin-top: 32rpx;
.videoposter {
width: 686rpx;
height: 384rpx;
}
.videoposterbox {
width: 686rpx;
height: 384rpx;
margin-left: 32rpx;
margin-top: 32rpx;
}
.videoposter {
width: 686rpx;
height: 384rpx;
.productcontai {
margin-top: 32rpx;
margin-left: 32rpx;
}
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
}
.productcontai {
margin-top: 32rpx;
margin-left: 32rpx;
.listbox {
display: flex;
margin-top: 10rpx;
.maintitle {
.tabitem {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
background-color: #e9edf1;
padding: 15rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
}
.subtitle {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.listbox {
display: flex;
margin-top: 10rpx;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
}
.productbox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 686rpx;
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.infobox {
width: 330rpx;
height: 330rpx;
background-color: white;
border-radius: 24rpx;
margin-top: 32rpx;
.productbox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 686rpx;
.flexbox {
display: flex;
margin-top: 80rpx;
align-items: center;
justify-content: center;
.infotitle {
font-size: 36rpx;
font-weight: 400;
width: 75rpx;
color: @color-black-deep;
margin-left: 36rpx; //一点偏移量
text-align: center;
.infobox {
width: 330rpx;
height: 330rpx;
background-color: white;
border-radius: 24rpx;
margin-top: 32rpx;
.flexbox {
display: flex;
margin-top: 80rpx;
align-items: center;
justify-content: center;
.infotitle {
font-size: 36rpx;
font-weight: 400;
width: 75rpx;
color: @color-black-deep;
margin-left: 36rpx; //一点偏移量
text-align: center;
}
.infoimg {
width: 150rpx;
height: 150rpx;
}
}
.infodesc {
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: @color-black-deep;
width: 100%;
text-align: center;
height: 100rpx;
white-space: pre-wrap;
.infoimg {
width: 150rpx;
height: 150rpx;
}
}
.infodesc {
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: @color-black-deep;
width: 100%;
text-align: center;
height: 100rpx;
white-space: pre-wrap;
}
}
}
}
.ipbox {
width: 702rpx;
height: 734rpx;
position: relative;
left: 24rpx;
border-radius: 24rpx;
background-color: white;
top: 200rpx;
.iphexiaofei {
width: 374rpx;
height: 298rpx;
position: absolute;
top: -188rpx;
left: 165rpx;
}
.ipbox {
width: 702rpx;
height: 734rpx;
position: relative;
left: 24rpx;
border-radius: 24rpx;
background-color: white;
top: 200rpx;
.iphexiaofei {
width: 374rpx;
height: 298rpx;
position: absolute;
top: -188rpx;
left: 165rpx;
.ipcard {
position: absolute;
padding: 32rpx;
top: 110rpx;
.title {
display: flex;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
.t1 {
color: @color-gold-cover;
}
}
.ipcard {
position: absolute;
padding: 32rpx;
top: 110rpx;
.desc {
margin-top: 20rpx;
white-space: pre-wrap;
font-size: 24rpx;
color: @color-black-deep;
}
.title {
display: flex;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
.ipflex {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
.t1 {
color: @color-gold-cover;
}
.ipbg {
border-radius: 24rpx;
background-color: @color-gray-light;
display: flex;
justify-content: center;
align-items: center;
}
.desc {
margin-top: 20rpx;
white-space: pre-wrap;
font-size: 24rpx;
color: @color-black-deep;
}
.ip1 {
width: 288rpx;
height: 380rpx;
.ipflex {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
.ipbg {
border-radius: 24rpx;
background-color: @color-gray-light;
display: flex;
justify-content: center;
align-items: center;
image {
width: 195rpx;
height: 298rpx;
}
.ip1 {
width: 288rpx;
height: 380rpx;
}
image {
width: 195rpx;
height: 298rpx;
}
.ip2 {
width: 342rpx;
height: 196rpx;
image {
width: 271rpx;
height: 152rpx;
}
}
.ip2 {
width: 342rpx;
height: 196rpx;
.ip3 {
width: 160rpx;
height: 160rpx;
image {
width: 271rpx;
height: 152rpx;
}
image {
width: 70rpx;
height: 97rpx;
}
}
.ip3 {
width: 160rpx;
height: 160rpx;
.ip4 {
width: 160rpx;
height: 160rpx;
image {
width: 70rpx;
height: 97rpx;
}
image {
width: 88rpx;
height: 92rpx;
}
}
}
}
.ip4 {
width: 160rpx;
height: 160rpx;
image {
width: 88rpx;
height: 92rpx;
}
}
}
}
}
.esgbox {
margin-top: 248rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
}
.esgbox {
margin-top: 248rpx;
margin-left: 32rpx;
.listbox {
display: flex;
margin-top: 10rpx;
.maintitle {
.tabitem {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
background-color: #e9edf1;
padding: 15rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
}
.subtitle {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.listbox {
.channelscroll {
width: 718rpx;
overflow-x: scroll;
margin-top: 32rpx;
// margin-left: -32rpx;
.box {
display: flex;
margin-top: 10rpx;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
}
.infobox {
margin-left: 15rpx;
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.infoimg {
width: 500rpx;
height: 400rpx;
}
.channelscroll {
width: 718rpx;
overflow-x: scroll;
margin-top: 32rpx;
.infotitle {
color: @color-gold-main;
font-size: 32rpx;
text-align: left;
font-weight: bold;
margin-top: 10rpx;
}
// margin-left: -32rpx;
.box {
display: flex;
.infobox {
margin-left: 15rpx;
.infoimg {
width: 500rpx;
height: 400rpx;
}
.infotitle {
color: @color-gold-main;
font-size: 32rpx;
text-align: left;
font-weight: bold;
margin-top: 10rpx;
}
.infodesc {
font-size: 24rpx;
color: black;
margin-top: 10rpx;
}
.infodesc {
font-size: 24rpx;
color: black;
margin-top: 10rpx;
}
}
}
}
}
}
.popup-content {
width: 750rpx;
height: 812rpx;
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
position: relative;
.btnclose {
width: 70rpx;
height: 70rpx;
position: absolute;
top: 36rpx;
right: 32rpx;
}
.xingmahui {
width: 750rpx;
height: 100%;
position: absolute;
bottom: 0;
}
.title {
position: absolute;
top: 47rpx;
left: 32rpx;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
}
.desc {
position: absolute;
top: 108rpx;
left: 32rpx;
font-size: 28rpx;
color: @color-black-medium;
font-weight: bold;
}
.qrcode {
width: 340rpx;
height: 340rpx;
position: absolute;
top: 220rpx;
left: 205rpx;
}
.btndownload {
width: 286rpx;
height: 89rpx;
position: absolute;
top: 630rpx;
left: 232rpx;
}
}
}
</style>
\ No newline at end of file
views/Home.vue
View file @ bda7f085
......@@ -6,23 +6,24 @@
:indicator-active-color="indicatoractiveColor">
<swiper-item v-for="item in swiperList" :key="item.url">
<view class="swiper-item banneritem">
<image :data-link="item.link" @tap="jumpLink(item.link)" class="b-img" :src="item.url"></image>
<image :data-link="item.link" @tap="jumpLink(item.link)" class="b-img" :src="$baseUrl+item.url"></image>
</view>
</swiper-item>
</swiper>
<view class="barbox" :style="`top:${statusBarHeight}px;`">
<image class="btnlogo" :src="baseImgUrl+'/static/homepage/btnlogo.png'"></image>
<image class="btnsearch" @tap="goSearchHandler" :src="baseImgUrl+'/static/homepage/btnsearch.png'"></image>
<image class="btncustomer" :src="baseImgUrl+'/static/homepage/btncustomer.png'"></image>
<image class="btnlogo" :src="$baseUrl+'homepage/btnlogo.png'"></image>
<image class="btnsearch" @tap="goSearchHandler" :src="$baseUrl+'homepage/btnsearch.png'">
</image>
<image class="btncustomer" :src="$baseUrl+'homepage/btncustomer.png'"></image>
</view>
<view class="txtbox">
<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
<image class="icon_arrow_yellow" :src="baseImgUrl+'/static/homepage/icon_arrow_yellow.png'"></image>
<image class="icon_arrow_yellow" :src="$baseUrl+'homepage/icon_arrow_yellow.png'"></image>
</view>
<view class="cardScroller">
<view class="cardbox">
<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
<image class="bg" :src="baseImgUrl+cardData.bgUrl"></image>
<image class="bg" :src="$baseUrl+cardData.bgUrl"></image>
<text class="level">{{cardData.level}}</text>
<text class="subTitle">{{cardData.subTitle}}</text>
<view class="showCornerTxt" v-if="cardData.showCornerTxt&& cardData.showCornerTxt.length>0">
......@@ -30,7 +31,7 @@
</view>
<view v-if="cardData.btnTitle&&cardData.btnTitle.length>0" class="cardbtn"
:data-link="cardData.link" @tap="jumpLink(cardData.link)">
<image class="cardbtnbg" :src="baseImgUrl+'/static/homepage/btn_receive.png'"></image>
<image class="cardbtnbg" :src="$baseUrl+'homepage/btn_receive.png'"></image>
<text class="btnTitle">{{cardData.btnTitle}}</text>
<text class="btnSubTitle">{{cardData.btnSubTitle}}</text>
</view>
......@@ -38,9 +39,9 @@
</view>
</view>
<view class="contentbox">
<image class="contentbg" :src="baseImgUrl+'/static/homepage/contentbg.png'" alt="" />
<image class="contentbg" :src="$baseUrl+'homepage/contentbg.png'" alt="" />
<image class="contentitem" :key="index" :style="contentItem._style"
v-for="(contentItem,index) in contentImgList" :src="baseImgUrl+contentItem.bgUrl"
v-for="(contentItem,index) in contentImgList" :src="$baseUrl+contentItem.bgUrl"
@tap="jumpLink(contentItem.link)"></image>
</view>
<view class="channelbox">
......@@ -57,7 +58,7 @@
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem,index) in changelInfoList[channelTabIndex]"
@tap="jumpLink(infoItem.link)">
<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
<image class="infoimg" :src="$baseUrl+infoItem.bgUrl"></image>
<view class="infotitle">{{infoItem.title}}</view>
</view>
</view>
......@@ -74,7 +75,7 @@
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem,index) in childrenInfoList"
@tap="jumpLink(infoItem.link)">
<image class="infoimg2" :src="baseImgUrl+infoItem.bgUrl"></image>
<image class="infoimg2" :src="$baseUrl+infoItem.bgUrl"></image>
<view class="infotitle2">
<view class="infotitle">{{infoItem.title}}</view>
</view>
......@@ -88,30 +89,31 @@
</view>
</view>
<view class="bottomlink">
<image class="bottombg" :src="baseImgUrl+'/static/homepage/bottombg.png'"></image>
<image class="bottombg" :src="$baseUrl+'homepage/bottombg.png'"></image>
<view class="box">
<image class="icon" v-for="(icon,index) in bottomLinkList" :key="index" :src="baseImgUrl+icon.bgUrl"
<image class="icon" v-for="(icon,index) in bottomLinkList" :key="index" :src="$baseUrl+icon.bgUrl"
:style="icon._style" @tap="showPopup(index)"></image>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff" border-radius="48rpx" >
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
border-radius="48rpx">
<view v-if="this.popupIndex !== 3" class="popup-content">
<image class="btnclose" @tap="closePop" src="/static/homepage/btnclose.png"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl+'homepage/btnclose.png'"></image>
<view class="title">
{{this.qrInfoList[this.popupIndex].title}}
</view>
<rich-text class="desc" :nodes="this.qrInfoList[this.popupIndex].desc">
</rich-text>
<image class="qrcode" :src="baseImgUrl+this.qrInfoList[this.popupIndex].qrUrl"></image>
<image class="btndownload" :src="baseImgUrl+'/static/homepage/btn_download.png'"></image>
<image class="qrcode" :src="$baseUrl+this.qrInfoList[this.popupIndex].qrUrl"></image>
<image @tap="downloadHandler($baseUrl+this.qrInfoList[this.popupIndex].qrUrl)" class="btndownload" :src="$baseUrl+'homepage/btn_download.png'"></image>
</view>
<view v-else class="popup-content" style="height: 977rpx;">
<image class="xingmahui" :src="baseImgUrl+'/static/homepage/xingmahui.png'"></image>
<image class="btnclose" @tap="closePop" src="/static/homepage/btnclose.png"></image>
<image class="xingmahui" :src="$baseUrl+'homepage/xingmahui.png'"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl+'homepage/btnclose.png'"></image>
</view>
</uni-popup>
</view>
......@@ -120,17 +122,18 @@
<script>
const baseImgUrl = "";
const swiperList = [{
url: '/static/homepage/banner1.jpg',
url: 'homepage/banner1.jpg',
link: 'www.baidu.com'
},
{
url: '/static/homepage/banner2.jpg',
url: 'homepage/banner2.jpg',
link: 'www.baidu.com'
},
{
url: '/static/homepage/banner3.jpg',
url: 'homepage/banner3.jpg',
link: 'www.baidu.com'
},
];
......@@ -141,7 +144,7 @@
btnSubTitle: "立即领取",
showCornerTxt: "待领取",
link: "www.baidu.com",
bgUrl: "/static/homepage/cardbg1.png"
bgUrl: "homepage/cardbg1.png"
},
{
level: "北纬47°系列",
......@@ -150,7 +153,7 @@
btnSubTitle: "",
showCornerTxt: "",
link: "",
bgUrl: "/static/homepage/cardbg2.png"
bgUrl: "homepage/cardbg2.png"
},
{
level: "育儿宝典",
......@@ -159,26 +162,26 @@
btnSubTitle: "",
showCornerTxt: "",
link: "",
bgUrl: "/static/homepage/cardbg3.png"
bgUrl: "homepage/cardbg3.png"
},
]
const contentImgList = [{
bgUrl: '/static/homepage/content_1.png',
bgUrl: 'homepage/content_1.png',
link: 'www.baidu.com',
_style: 'width:311rpx;height: 324rpx;left: 40rpx;top: 0;'
},
{
bgUrl: '/static/homepage/content_2.png',
bgUrl: 'homepage/content_2.png',
link: 'www.baidu.com',
_style: 'width:263rpx;height: 324rpx;right: 40rpx;top: 400rpx;'
},
{
bgUrl: '/static/homepage/content_3.png',
bgUrl: 'homepage/content_3.png',
link: 'www.baidu.com',
_style: 'width:418rpx;height: 345rpx;left: 40rpx;top: 750rpx;'
},
{
bgUrl: '/static/homepage/content_4.png',
bgUrl: 'homepage/content_4.png',
link: 'www.baidu.com',
_style: 'width:263rpx;height: 324rpx;right: 40rpx;top: 1120rpx;'
}
......@@ -186,56 +189,56 @@
const channelTabList = ["凯叔讲故事", "哄睡故事", "知识科普", "安全意识", "社交能力"];
const changelInfoList = [
[{
bgUrl: "/static/homepage/channel_0_1.png",
bgUrl: "homepage/channel_0_1.png",
title: "凯叔·金子美铃童诗:【星星和蒲公英】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_0_1.png",
bgUrl: "homepage/channel_0_1.png",
title: "凯叔·金子美铃童诗:【天空和海】",
link: "www.baidu.com"
}
],
[{
bgUrl: "/static/homepage/channel_1_1.png",
bgUrl: "homepage/channel_1_1.png",
title: "凯叔-小睡仙:【睡吧睡吧，香香的】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_1_1.png",
bgUrl: "homepage/channel_1_1.png",
title: "凯叔-小睡仙:【睡觉仙气，3,2,1,】",
link: "www.baidu.com"
}
],
[{
bgUrl: "/static/homepage/channel_2_1.png",
bgUrl: "homepage/channel_2_1.png",
title: "教宝宝认识人体:【守护眼睛的睫毛】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_2_1.png",
bgUrl: "homepage/channel_2_1.png",
title: "教宝宝认识人体：【为什么肚子会咕咕叫？】",
link: "www.baidu.com"
}
],
[{
bgUrl: "/static/homepage/channel_3_1.png",
bgUrl: "homepage/channel_3_1.png",
title: "教宝宝不乱吃东西:【这个不能吃】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_3_1.png",
bgUrl: "homepage/channel_3_1.png",
title: "培养宝宝不摸插座的安全意识:【电线插座不好玩】",
link: "www.baidu.com"
}
],
[{
bgUrl: "/static/homepage/channel_4_1.png",
bgUrl: "homepage/channel_4_1.png",
title: "教会宝宝不嘲笑别人:【鹤鸟】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_4_1.png",
bgUrl: "homepage/channel_4_1.png",
title: "培养宝宝尊重别人的习惯:【爱嘲笑人的斑斑】",
link: "www.baidu.com"
}
......@@ -243,38 +246,38 @@
]
const childrenInfoList = [{
bgUrl: "/static/homepage/children_0.png",
bgUrl: "homepage/children_0.png",
title: "1+3 育儿妙招大揭秘，带娃从此不“蕉绿”",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/children_1.png",
bgUrl: "homepage/children_1.png",
title: "已有儿童中招，严重可瘫痪夏季防蜱虫最全指南速看",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/children_2.png",
bgUrl: "homepage/children_2.png",
title: "99% 家长忽略的脑发育关键动作",
link: "www.baidu.com"
}
]
const bottomLinkList = [{
bgUrl: "/static/homepage/iconwx.png",
bgUrl: "homepage/iconwx.png",
link: "www.baidu.com",
_style: "width:70rpx;height:109rpx;"
},
{
bgUrl: "/static/homepage/iconqw.png",
bgUrl: "homepage/iconqw.png",
link: "www.baidu.com",
_style: "width:95rpx;height:109rpx;"
},
{
bgUrl: "/static/homepage/iconsph.png",
bgUrl: "homepage/iconsph.png",
link: "www.baidu.com",
_style: "width:70rpx;height:109rpx;"
},
{
bgUrl: "/static/homepage/iconxhs.png",
bgUrl: "homepage/iconxhs.png",
link: "www.baidu.com",
_style: "width:88rpx;height:99rpx;"
}
......@@ -282,17 +285,17 @@
const qrInfoList = [{
title: "公众号",
desc: "扫码关注<span style='color:#D3A358;'>星妈会</span>公众号，了解更多专业育儿资讯",
qrUrl: "/static/homepage/qrcode_gzh.png"
qrUrl: "homepage/qrcode_gzh.png"
},
{
title: "企业微信",
desc: "扫码添加<span style='color:#D3A358;'>星妈管家</span>企微，了解更多专业育儿资讯",
qrUrl: "/static/homepage/qrcode_qw.png"
qrUrl: "homepage/qrcode_qw.png"
},
{
title: "视频号",
desc: "扫码关注<span style='color:#D3A358;'>星妈会</span>视频号，了解更多专业育儿资讯",
qrUrl: "/static/homepage/qrcode_sph.png"
qrUrl: "homepage/qrcode_sph.png"
},
]
......@@ -300,8 +303,8 @@
data() {
return {
popType: 'bottom',
statusBarHeight:38,
baseImgUrl: baseImgUrl,
statusBarHeight: 38,
swiperList: swiperList,
indicatorDots: true,
autoplay: true,
......@@ -322,9 +325,9 @@
}
},
mounted(){
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight=systemInfo.statusBarHeight || 38;
mounted() {
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
this.statusBarHeight = menuButtonInfo.top;
},
methods: {
changeIndicatorDots(e) {
......@@ -349,14 +352,49 @@
this.popupIndex = _index;
this.$refs.popup.open(this.popType);
},
closePop(){
closePop() {
this.$refs.popup.close();
},
goSearchHandler(){
goSearchHandler() {
uni.navigateTo({
url:"/pages/search/search"
url: "/pages/search/search"
})
},
downloadHandler(imgurl) {
uni.downloadFile({
url: imgurl,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
} else {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
});
}
}
}
......@@ -385,22 +423,26 @@
}
}
}
.barbox{
.barbox {
position: absolute;
top: 97rpx;
left: 32rpx;
display: flex;
align-items: center;
.btnlogo{
.btnlogo {
width: 184rpx;
height: 66rpx;
}
.btnsearch{
.btnsearch {
width: 150rpx;
height: 68rpx;
margin-left: 20rpx;
}
.btncustomer{
.btncustomer {
width: 70rpx;
height: 68rpx;
margin-left: 110rpx;
......@@ -684,12 +726,14 @@
top: 36rpx;
right: 32rpx;
}
.xingmahui{
.xingmahui {
width: 750rpx;
height: 100%;
position: absolute;
bottom: 0;
}
.title {
position: absolute;
top: 47rpx;
......
views/My.vue
View file @ bda7f085
......@@ -3,7 +3,7 @@
<view class="bg-container">
<image
class="bg-img"
src="/static/my/cover_white_bg.png"
:src="$baseUrl + 'my/cover_white_bg.png'"
mode="aspectFit"
lazy-load="false"
binderror=""
......@@ -11,104 +11,147 @@
/>
</view>
<!-- 用户信息区域 -->
<view class="user-info">
<view class="user-info" @click="handleRegister">
<view class="user-header">
<view class="avatar-container">
<image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
</view>
<image
class="avatar"
:src="userInfo.avatar || '/static/my/avatar.png'"
mode="aspectFill"
class="avatar-modify"
:src="$baseUrl + 'my/icon_modify.png'"
mode="aspectFit"
lazy-load="false"
@click="handleEditProfile"
/>
<view class="user-detail">
<text class="nickname">{{ userInfo.nickname || "未登录" }}</text>
<view class="user-level">
<image
class="level-icon"
src="/static/my/level.png"
mode="aspectFit"
/>
<text class="level-text">Lv.{{ userInfo.level || 1 }}</text>
<text class="nickname">{{ userInfo.nickname || "暂无昵称" }}</text>
<!-- 积分账户 -->
<view class="integral-account">
<text class="integral-account-text"> 积分账户： </text>
<text class="integral-account-value"> --- </text>
</view>
</view>
<view class="edit-btn" @tap="handleEditProfile">
<image src="/static/my/edit.png" mode="aspectFit" />
</view>
</view>
<!-- user desc -->
<view class="user-desc">
<text class="desc-text"> </text>
<view class="desc-top">
<text class="desc-title">宝宝变化</text>
<text class="desc-age">
{{ babyDetail[0].age }}
</text>
</view>
<view class="desc-content">
<text class="desc-text"
>{{
cfgStatus.openBabyCardDesc
? babyDetail[0].desc
: babyDetail[0].desc.slice(0, 46) + "..."
}}
</text>
<text
class="desc-more"
@click="cfgStatus.openBabyCardDesc = !cfgStatus.openBabyCardDesc"
>{{ cfgStatus.openBabyCardDesc ? "点击收起" : "点击展开" }}</text
>
</view>
</view>
</view>
<!-- 工具 -->
<view class="tool-container">
<text class="tool-title" selectable="false" space="false" decode="false">
工具
</text>
<view class="tool-list">
<view class="tool-item" v-for="item in toolList" :key="item.title">
<image class="tool-icon" :src="item.icon" mode="aspectFit" />
<text class="tool-title"> 工具 </text>
<view class="tool-list">
<view class="tool-item" v-for="item in toolList" :key="item.title">
<image class="tool-icon" :src="item.icon" mode="aspectFit" />
</view>
</view>
</view>
</view>
<!-- 协议 -->
<view class="protocol-container">
<image :src="$baseUrl + 'my/protocol.png'" mode="aspectFit" />
<view class="hot-member" @click="handleHot" data-type="member"></view>
<view class="hot-privacy" @click="handleHot" data-type="privacy"></view>
</view>
<RegisterLayer
v-model="showRegisterLayer"
:value="registerImageUrl"
@update:value="(val) => (registerImageUrl = val)"
@confirm="onRegisterConfirm"
/>
</view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, getCurrentInstance } from "vue";
import RegisterLayer from "../components/RegisterLayer.vue";
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
const cfgStatus = ref({
openBabyCardDesc: false,
});
const babyDetail = ref([
{
age: "2月龄",
desc: "宝宝开始对周围环境产生兴趣，喜欢看、听、摸，开始对玩具感兴趣，开始对妈妈的声音产生反应。宝宝开始对周围环境产生兴趣，喜欢看、听、摸，开始对玩具感兴趣，开始对妈妈的声音产生反应。宝宝开始对周围环境产生兴趣，喜欢看、听、摸，开始对玩具感兴趣，开始对妈妈的声音产生反应。",
},
]);
const toolList = ref([
{
icon: "/static/my/code.png",
icon: $baseUrl + "my/code.png",
title: "扫码积分",
url: "",
},
{
icon: "/static/my/suyuan.png",
icon: $baseUrl + "my/suyuan.png",
title: "产品溯源",
url: "",
},
{
icon: "/static/my/book.png",
icon: $baseUrl + "my/book.png",
title: "奶娃宝典",
url: "",
},
{
icon: "/static/my/doctor.png",
icon: $baseUrl + "my/doctor.png",
title: "医生问诊",
url: "",
},
{
icon: "/static/my/literature.png",
icon: $baseUrl + "my/literature.png",
title: "育儿百科",
url: "",
},
]);
// 用户信息
const userInfo = ref({
avatar: "",
nickname: "",
level: 1,
points: 0,
coupons: 0,
collects: 0,
});
const userInfo = ref({});
// 订单数量统计
const orderCounts = ref({
pending: 0,
shipping: 0,
receiving: 0,
comment: 0,
after: 0,
});
const showRegisterLayer = ref(false);
const registerImageUrl = ref("");
const handleHot = (e) => {
const type = e.currentTarget.dataset.type;
console.log("handleHot", type);
if (type === "member") {
navigateTo("/pages/webview/webview?type=MEMBER_URL");
} else if (type === "privacy") {
navigateTo("/pages/webview/webview?type=PRIVACY_URL");
}
};
// 页面跳转
const navigateTo = (url) => {
uni.navigateTo({
url,
animationDuration: 0,
fail: (err) => {
console.error("页面跳转失败:", err);
uni.showToast({
......@@ -121,33 +164,26 @@ const navigateTo = (url) => {
// 编辑个人资料
const handleEditProfile = () => {
navigateTo("/pages/user/profile");
if (!userInfo.value || JSON.stringify(userInfo.value) === "{}") {
return;
}
navigateTo("/pages/person/person");
};
// 联系客服
const handleContactService = () => {
// #ifdef MP-WEIXIN
uni.openCustomerServiceChat({
extInfo: { url: "YOUR_CUSTOMER_SERVICE_URL" },
corpId: "YOUR_CORP_ID",
success(res) {
console.log("打开客服会话成功");
},
fail(err) {
console.error("打开客服会话失败:", err);
uni.showToast({
title: "打开客服会话失败",
icon: "none",
});
},
});
// #endif
const handleRegister = () => {
// 判断是否已注册
if (!userInfo.value || JSON.stringify(userInfo.value) === "{}") {
showRegisterLayer.value = true;
}
// #ifdef H5
window.open("YOUR_CUSTOMER_SERVICE_URL", "_blank");
// #endif
return;
};
function onRegisterConfirm(data) {
console.log("onRegisterConfirm:", data);
showRegisterLayer.value = false;
}
// 获取用户信息
const getUserInfo = async () => {
try {
......@@ -168,22 +204,6 @@ const getUserInfo = async () => {
}
};
// 获取订单数量
const getOrderCounts = async () => {
try {
// TODO: 调用获取订单数量接口
const res = await uni.request({
url: "/api/order/counts",
method: "GET",
});
if (res.data.code === 0) {
orderCounts.value = res.data.data;
}
} catch (error) {
console.error("获取订单数量失败:", error);
}
};
// 页面加载
onMounted(() => {
// getUserInfo()
......@@ -195,7 +215,7 @@ defineExpose({});
</script>
<style lang="less" scoped>
@import '@/common.less';
@import "@/common.less";
.my-container {
min-height: 100vh;
background-color: #f5f5f5;
......@@ -219,10 +239,9 @@ defineExpose({});
.user-info {
background-color: @color-white-soft;
padding: 30rpx;
width: 686rpx;
height: 343rpx;
min-height: 343rpx;
box-sizing: border-box;
border-radius: 32rpx;
position: relative;
......@@ -233,16 +252,45 @@ defineExpose({});
display: flex;
align-items: center;
margin-bottom: 40rpx;
position: relative;
.avatar-container {
width: 100rpx;
height: 100rpx;
background-color: #f6f6f6;
overflow: hidden;
border-radius: 50%;
position: absolute;
left: 32rpx;
top: 32rpx;
z-index: 1;
.avatar {
width: 100%;
height: 100%;
display: block;
}
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
margin-right: 20rpx;
.avatar-modify {
width: 64rpx;
height: 64rpx;
position: absolute;
left: 80rpx;
top: 84rpx;
z-index: 1;
display: block;
}
.user-detail {
flex: 1;
display: flex;
flex-direction: column;
position: absolute;
left: 148rpx;
top: 48rpx;
z-index: 1;
.nickname {
font-size: 32rpx;
......@@ -251,19 +299,12 @@ defineExpose({});
margin-bottom: 10rpx;
}
.user-level {
.integral-account {
display: flex;
align-items: center;
.level-icon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.level-text {
font-size: 24rpx;
color: #666;
font-size: 24rpx;
color: #1d1e25;
.integral-account-text {
color: #1d1e25;
}
}
}
......@@ -301,157 +342,121 @@ defineExpose({});
.user-desc {
width: 100%;
height: 182rpx;
height: calc(100% - 161rpx);
background-color: #fff;
border-radius: 32rpx;
padding: 30rpx 32rpx;
padding: 32rpx 30rpx;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
}
}
margin-top: 161rpx;
.tool-container {
margin: 0 auto;
margin-top: 48rpx;
width: 686rpx;
.tool-list {
display: flex;
flex-wrap: wrap;
margin: 32rpx 0;
}
.tool-title {
font-size: 32rpx;
font-weight: 500;
color: @color-black-deep;
margin-left: 21rpx;
}
.tool-item {
width: 152rpx;
height: 152rpx;
margin-left: 26rpx;
margin-bottom: 24rpx;
.tool-icon {
width: 100%;
height: 100%;
display: block;
};
&:nth-child(4n+1) {
margin-left: 0;
}
}
}
.order-section {
background-color: #fff;
padding: 30rpx;
margin-bottom: 20rpx;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.desc-top {
display: flex;
align-items: center;
}
.title {
.desc-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
color: @color-black-deep;
}
.more {
.desc-age {
font-size: 24rpx;
color: @color-gold-cover;
background-color: #fef7f2;
padding: 7rpx 10rpx;
border-radius: 10rpx;
margin-left: 8rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.desc-text {
font-size: 24rpx;
line-height: 34rpx;
display: inline-block;
}
text {
font-size: 24rpx;
color: #666;
margin-right: 8rpx;
}
.desc-more {
font-size: 24rpx;
color: @color-gold-cover;
line-height: 34rpx;
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
}
image {
width: 32rpx;
height: 32rpx;
}
.desc-content {
margin-top: 32rpx;
position: relative;
}
}
}
.order-types {
.tool-container {
margin: 0 auto;
margin-top: 48rpx;
width: 686rpx;
.tool-title {
font-size: 32rpx;
font-weight: 500;
color: @color-black-deep;
margin-left: 21rpx;
}
.tool-list {
display: flex;
justify-content: space-between;
.type-item {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 48rpx;
height: 48rpx;
margin-bottom: 12rpx;
flex-wrap: wrap;
margin-top: 20rpx;
.tool-item {
width: 152rpx;
height: 152rpx;
margin-left: 26rpx;
margin-bottom: 24rpx;
.tool-icon {
width: 100%;
height: 100%;
display: block;
}
text {
font-size: 24rpx;
color: #666;
&:nth-child(4n + 1) {
margin-left: 0;
}
}
}
}
.function-list {
background-color: #fff;
padding: 0 30rpx;
.function-item {
display: flex;
align-items: center;
height: 100rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.protocol-container {
width: 360rpx;
height: 25rpx;
margin: 8rpx auto 130rpx;
position: relative;
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
display: block;
}
&.arrow {
width: 32rpx;
height: 32rpx;
margin-right: 0;
margin-left: auto;
}
}
.hot-member {
width: 142rpx;
height: 50rpx;
display: block;
position: absolute;
left: 53rpx;
top: -15rpx;
}
text {
font-size: 28rpx;
color: #333;
}
.hot-privacy {
width: 147rpx;
height: 50rpx;
display: block;
position: absolute;
left: 210rpx;
top: -15rpx;
}
}
}
.badge {
position: absolute;
top: -8rpx;
right: -8rpx;
background-color: #ff4d4f;
color: #fff;
font-size: 20rpx;
padding: 2rpx 8rpx;
border-radius: 16rpx;
min-width: 32rpx;
text-align: center;
}
.type-item {
position: relative;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment