Skip to content

飞
飞鹤小程序
Commit b97e902b authored by tao.huang's avatar tao.huang
Browse files
Options

feat: 图片迁移oss

parent 36d02e9e
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 105 deletions
components/Layer.vue
View file @ b97e902b
......@@ -116,8 +116,8 @@ defineExpose({ open, close });
width: 100vw;
min-height: 20vh;
background: #f6f8fa;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
overflow: hidden;
display: flex;
flex-direction: column;
......
components/RegisterLayer.vue 0 → 100644
View file @ b97e902b
<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">{{ dateDisplay || '请选择宝宝的生日或预产期' }}</view>
</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">{{ genderDisplay || '请选择宝宝的性别' }}</view>
</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">{{ fetusDisplay || '请选择胎数' }}</view>
</view>
</PickerCustom>
<view class="register-baby-info-agreement">
<text>
我已阅读并同意
<text class="register-baby-info-link" @click="openAgreement"
>《星妈会敏感个人信息处理规则》</text
>
</text>
</view>
<view
class="register-baby-info-btn"
:disabled="!checked"
@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 chooseImage() {
uni.chooseImage({
count: 1,
success: (res) => {
imageUrl.value = res.tempFilePaths[0];
emit("update:value", imageUrl.value);
},
});
}
function removeImage() {
imageUrl.value = "";
emit("update:value", "");
}
function handleConfirm() {
emit("confirm", imageUrl.value);
visible.value = false;
}
function handleCancel() {
emit("cancel");
visible.value = false;
}
// 宝宝信息相关
const date = ref("");
const gender = ref("");
const fetus = ref("");
const checked = ref(false);
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(-1);
const genderDisplay = computed(() => gender.value);
function onGenderChange(idx) {
genderIndex.value = idx;
gender.value = genderOptions[idx];
}
// fetus picker
const fetusIndex = ref(-1);
const fetusDisplay = computed(() => fetus.value);
function onFetusChange(idx) {
fetusIndex.value = idx;
fetus.value = fetusOptions[idx];
}
function onLayerVisibleChange() {}
function handleBabyInfoConfirm() {
if (!checked.value) return;
emit("confirm", {
imageUrl: imageUrl.value,
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 0 0 0;
padding: 48rpx 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;
}
.register-baby-info-picker-value {
font-size: 32rpx;
color: #bdbfc3;
flex: 1;
text-align: center;
}
.register-baby-info-agreement {
display: flex;
align-items: flex-start;
font-size: 24rpx;
color: #888;
margin: 24rpx 0 32rpx 0;
width: 100%;
line-height: 1.7;
}
.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: 32rpx;
border: none;
box-shadow: 0 8rpx 32rpx 0 rgba(211,163,88,0.10);
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
components/TabBar.vue
View file @ b97e902b
......@@ -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 @ b97e902b
......@@ -2,12 +2,17 @@ import App from "./App";
import apiRequest from "@/api/request.js";
import * as Pinia from 'pinia';
const BASE_URL = 'https://yun.duiba.com.cn/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/person/person.vue
View file @ b97e902b
......@@ -2,26 +2,26 @@
<view class="person-page">
<image
class="icon-return"
src="/static/person/icon_return.png"
:src="$baseUrl + 'person/icon_return.png'"
mode="aspectFit"
@click="handleReturn"
/>
<image
class="banner_upload"
src="/static/person/customer.png"
:src="$baseUrl + 'person/customer.png'"
mode="aspectFit"
/>
<view class="person-header">
<image
class="banner_bg"
src="/static/person/banner.png"
:src="$baseUrl + 'person/banner.png'"
mode="aspectFill"
/>
<image
class="banner_cover"
src="/static/person/cover_white.png"
:src="$baseUrl + 'person/cover_white.png'"
mode="aspectFill"
/>
</view>
......@@ -40,7 +40,7 @@
<image
class="avatar-edit"
src="/static/person/icon_modify.png"
:src="$baseUrl + 'person/icon_modify.png'"
mode="aspectFit|aspectFill|widthFix"
lazy-load="false"
binderror=""
......@@ -98,7 +98,7 @@
}}</view>
<image
class="form-input-icon"
src="/static/person/icon_arrow_yellow_right.png"
:src="$baseUrl + 'person/icon_arrow_yellow_right.png'"
/>
</view>
</picker-custom>
......@@ -133,13 +133,13 @@
<image
v-if="pageStatus.formStatus == 1"
class="form-bottom-icon"
src="/static/person/icon_arrow_yellow_up.png"
:src="$baseUrl + 'person/icon_arrow_yellow_up.png'"
mode="aspectFit"
/>
<image
v-else
class="form-bottom-icon"
src="/static/person/icon_arrow_yellow_down.png"
:src="$baseUrl + 'person/icon_arrow_yellow_down.png'"
mode="aspectFit"
/>
</view>
......
views/My.vue
View file @ b97e902b
......@@ -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=""
......@@ -12,17 +12,13 @@
</view>
<!-- 用户信息区域 -->
<view class="user-info">
<view class="user-header">
<view class="user-header" @click="handleRegister">
<view class="avatar-container">
<image
class="avatar"
:src="userInfo.avatar"
mode="aspectFill"
/>
<image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
</view>
<image
class="avatar-modify"
src="/static/my/icon_modify.png"
:src="$baseUrl + 'my/icon_modify.png'"
mode="aspectFit"
lazy-load="false"
@click="handleEditProfile"
......@@ -74,15 +70,25 @@
<!-- 协议 -->
<view class="protocol-container">
<image src="/static/my/protocol.png" mode="aspectFit" />
<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,
......@@ -97,50 +103,37 @@ const babyDetail = ref([
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;
......@@ -174,30 +167,20 @@ const handleEditProfile = () => {
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
// #ifdef H5
window.open("YOUR_CUSTOMER_SERVICE_URL", "_blank");
// #endif
const handleRegister = () => {
// 判断是否已注册
if (!userInfo.value || JSON.stringify(userInfo.value) === "{}") {
showRegisterLayer.value = true;
}
return;
};
function onRegisterConfirm(imgUrl) {
// 这里可以处理图片上传后的逻辑
userInfo.value.avatar = imgUrl;
showRegisterLayer.value = false;
}
// 获取用户信息
const getUserInfo = async () => {
try {
......@@ -218,22 +201,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()
......
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