AI学做菜/客户服务主题页面代码编写
This commit is contained in:
邝军华
parent
83f266afb6
commit
96a9bd9514
@ -197,6 +197,12 @@
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "clientservedetail/clientservedetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "问题详情",
|
||||
"navigationBarBackgroundColor": "#f5f5f5"
|
||||
}
|
||||
},{
|
||||
"path": "feedback/feedback",
|
||||
"style": {
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
<scroll-view class="typescoll" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="scroll_view_li">
|
||||
<view class="scroll_view_banner">
|
||||
<image class="scroll_view_bannerimg" src="../../static/Intersect@2x.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_bannerimg" src="../../static/Intersect@2x.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop" @click="goDetail()">
|
||||
<view class="scroll_view_shop_l">
|
||||
@ -100,7 +100,7 @@
|
||||
</view>
|
||||
<view class="scroll_view_li">
|
||||
<view class="scroll_view_banner">
|
||||
<image class="scroll_view_bannerimg" src="../../static/image@2x.png" mode="widthFix"></image>
|
||||
<image class="scroll_view_bannerimg" src="../../static/image@2x.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="scroll_view_shop" @click="goDetail()">
|
||||
<view class="scroll_view_shop_l">
|
||||
@ -274,7 +274,7 @@
|
||||
<view style="height: 200rpx;"></view>
|
||||
<view class="footer">
|
||||
<view class="footer_cont">
|
||||
<view class="footer_cont_l">
|
||||
<view class="footer_cont_l" @click="goCarts()">
|
||||
<view class="footer_cont_cart">
|
||||
<view class="footer_cont_num">3</view>
|
||||
<image class="footer_cont_img" src="../../static/index/cart_img.png" mode="widthFix"></image>
|
||||
@ -337,6 +337,11 @@ const goAssList=()=>{
|
||||
url:`/order/assList/assList`
|
||||
})
|
||||
}
|
||||
const goCarts=()=>{
|
||||
uni.switchTab({
|
||||
url:`/pages/cart/cart`
|
||||
})
|
||||
}
|
||||
onLoad((options) => {
|
||||
|
||||
});
|
||||
|
||||
BIN
static/Intersect@2x.jpg
Normal file
BIN
static/Intersect@2x.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 855 KiB |
BIN
static/image@2x.jpg
Normal file
BIN
static/image@2x.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
BIN
static/userserve/197.png
Normal file
BIN
static/userserve/197.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 816 B |
@ -1,6 +1,72 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
|
||||
<view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
|
||||
<view class="head_cont" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||||
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||||
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="head_title" :style="{'width':pageWidth+'px','height':statusHeight+'px'}">AI学做菜</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
|
||||
<view class="content_greetings">
|
||||
<view class="content_greetings_l">
|
||||
<image class="content_greetings_img" :src="timeImg" mode="widthFix"></image>
|
||||
<view class="content_greetings_btn">
|
||||
<image class="content_greetings_btnimg" src="../../static/userserve/Chatting.png"></image>
|
||||
<text class="content_greetings_text">开始聊天</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="content_greetings_r" src="../../static/userserve/Robot.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="content_hot">
|
||||
<view class="content_hot_title">热门问题</view>
|
||||
<view class="content_hot_danmu">
|
||||
<view class="content_hot_danmu_li"
|
||||
v-for="(item,index) in danmuList"
|
||||
:key="index"
|
||||
:style="{ top: item.top + 'px', animationDuration: item.duration + 's' }"
|
||||
>
|
||||
<image class="content_hot_danmu_liimg" src="../../static/userserve/197.png" mode="widthFix"></image>
|
||||
<text class="content_hot_danmu_li_text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_list">
|
||||
<image class="content_list_img" src="https://i2.chuimg.com/cf03e5621d75418b8babb983415423aa_1080w_864h.jpg" mode="aspectFill"></image>
|
||||
<view class="content_list_script">
|
||||
<view class="content_list_title">甜口红烧肉做法</view>
|
||||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_list">
|
||||
<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
|
||||
<view class="content_list_script">
|
||||
<view class="content_list_title">甜口红烧肉做法</view>
|
||||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_list">
|
||||
<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
|
||||
<view class="content_list_script">
|
||||
<view class="content_list_title">甜口红烧肉做法</view>
|
||||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_list">
|
||||
<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
|
||||
<view class="content_list_script">
|
||||
<view class="content_list_title">甜口红烧肉做法</view>
|
||||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view style="height: 200px;"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -12,9 +78,161 @@ import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } fr
|
||||
const counterStore = useCounterStore(); // 使用 Store
|
||||
const { proxy } = getCurrentInstance();
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
|
||||
onLoad((options) => {});
|
||||
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
|
||||
const headShow = ref(false);
|
||||
const showBack = ref(false);
|
||||
const pageWidth = ref(0);
|
||||
const opacity = ref(1);
|
||||
const timeImg = ref('');
|
||||
const danmuList = ref([])
|
||||
// 获取页面宽度
|
||||
const updatePageWidth = () => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
pageWidth.value = systemInfo.windowWidth;
|
||||
};
|
||||
const searchWidth = computed(() => {
|
||||
return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
|
||||
});
|
||||
// 判断是否有上一页
|
||||
const getPages = () => {
|
||||
const pages = getCurrentPages();
|
||||
return pages.length > 1;
|
||||
};
|
||||
const handleBack = () => {
|
||||
if (getPages()) {
|
||||
// 如果有上一页，返回上一页
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
// 如果没有上一页，返回首页
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index',
|
||||
});
|
||||
}
|
||||
};
|
||||
const detail=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/clientservedetail/clientservedetail`
|
||||
})
|
||||
};
|
||||
const timeFun=()=>{
|
||||
// 获取当前时间
|
||||
const now = new Date();
|
||||
// 获取当前小时数（24 小时制）
|
||||
const hour = now.getHours();
|
||||
// 判断时间段
|
||||
let timePeriod;
|
||||
if (hour >= 0 && hour < 6) {
|
||||
timePeriod = '../../static/userserve/evening.png';//'凌晨';
|
||||
} else if (hour >= 6 && hour < 9) {
|
||||
timePeriod = '../../static/userserve/morning.png';//'早上';
|
||||
} else if (hour >= 9 && hour < 12) {
|
||||
timePeriod = '../../static/userserve/morning.png';//'上午';
|
||||
} else if (hour === 12) {
|
||||
timePeriod = '../../static/userserve/lunchtime.png';//'中午';
|
||||
} else if (hour > 12 && hour < 18) {
|
||||
timePeriod = '../../static/userserve/Afternoon.png';//'下午';
|
||||
} else if (hour >= 18 && hour < 24) {
|
||||
timePeriod = '../../static/userserve/evening.png';//晚上
|
||||
} else {
|
||||
timePeriod = '未知时间段';
|
||||
}
|
||||
timeImg.value = timePeriod;
|
||||
}
|
||||
const sendDanmu =()=> {
|
||||
// 生成弹幕数据
|
||||
const danmu = [
|
||||
{
|
||||
id: 1, // 唯一 ID
|
||||
text: '肉的做法', // 弹幕文本
|
||||
top: Math.random(), // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:2, // 唯一 ID
|
||||
text: '番茄滑肉煲｜肉片超级嫩滑！天冷来上一锅太暖了', // 弹幕文本
|
||||
top: Math.random() * 50, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:3, // 唯一 ID
|
||||
text: '蚂蚁上树——肉末粉条的完美结合', // 弹幕文本
|
||||
top: Math.random() * 100, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:3, // 唯一 ID
|
||||
text: '水煮肉片（肯定不翻车）', // 弹幕文本
|
||||
top: Math.random() * 150, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:4, // 唯一 ID
|
||||
text: '香菜拌牛肉', // 弹幕文本
|
||||
top: Math.random() * 200, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:5, // 唯一 ID
|
||||
text: '香煎五花肉', // 弹幕文本
|
||||
top: Math.random() * 250, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:6, // 唯一 ID
|
||||
text: '东北溜肉段（酸甜口，极简版）', // 弹幕文本
|
||||
top: Math.random() * 300, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:7, // 唯一 ID
|
||||
text: '绝绝子！甩饭店几条街的粉蒸肉（粉蒸排骨）', // 弹幕文本
|
||||
top: Math.random() * 350, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:8, // 唯一 ID
|
||||
text: '孩子爱吃的蒸肉饼', // 弹幕文本
|
||||
top: Math.random() * 400, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:9, // 唯一 ID
|
||||
text: '又香又嫩的小炒牛肉（巨好吃，手残党也能做）', // 弹幕文本
|
||||
top: Math.random() * 450, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
},
|
||||
{
|
||||
id:10, // 唯一 ID
|
||||
text: '湖南农家小炒肉', // 弹幕文本
|
||||
top: Math.random() * 500, // 随机 top 值（控制弹幕位置）
|
||||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||||
}
|
||||
];
|
||||
// 添加到弹幕列表
|
||||
danmuList.value = (danmu);
|
||||
}
|
||||
onLoad((options) => {
|
||||
//初始化时判断是否显示返回按钮
|
||||
showBack.value = getPages();
|
||||
updatePageWidth();
|
||||
timeFun();
|
||||
sendDanmu();
|
||||
});
|
||||
onShow(() => {});
|
||||
onPageScroll((e)=>{
|
||||
const top = e.scrollTop;
|
||||
// 导航条颜色透明渐变
|
||||
if (top <= 50) {
|
||||
headShow.value = false
|
||||
} else {
|
||||
if( 50 < top && top <= 200 ){
|
||||
opacity.value = top / 200
|
||||
}else{
|
||||
opacity.value = 1
|
||||
}
|
||||
headShow.value = true
|
||||
}
|
||||
}),
|
||||
onReady(()=>{})
|
||||
onPullDownRefresh(()=>{})
|
||||
onReachBottom(()=>{})
|
||||
|
||||
@ -2,5 +2,191 @@ page{
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.main{
|
||||
|
||||
}
|
||||
background: url(https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/user_bcg.png) #f6f6f6;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
.head{
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.head_cont{
|
||||
position: relative;
|
||||
.head_back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,.6);
|
||||
border: 1rpx solid rgba(0,0,0,.1);
|
||||
border-radius: 50rpx;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
.head_back_img{
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
.head_title{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: 30rpx;
|
||||
color: '#000000';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.head_show{
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
}
|
||||
.content{
|
||||
.content_greetings{
|
||||
margin: 38rpx 50rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.content_greetings_l{
|
||||
.content_greetings_img{
|
||||
width: 317rpx;
|
||||
height: 64rpx;
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.content_greetings_btn{
|
||||
margin-top: 32rpx;
|
||||
width: 226rpx;
|
||||
height: 69rpx;
|
||||
background: #4B5CBA;
|
||||
box-shadow: inset 0rpx 4rpx 4rpx 0rpx rgba(35,56,172,0.6), inset 0rpx -4rpx 4rpx 0rpx rgba(35,56,172,0.6), 4rpx 4rpx 20rpx 0rpx #95A6FF;
|
||||
border-radius: 35rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-animation: 3s scaleDr ease-in-out infinite;
|
||||
animation: 3s scaleDr ease-in-out infinite;
|
||||
.content_greetings_btnimg{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.content_greetings_text{
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_greetings_r{
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
-webkit-animation: 3s scaleDr ease-in-out infinite;
|
||||
animation: 3s scaleDr ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
.content_hot{
|
||||
margin: -30rpx 20rpx 20rpx 20rpx;
|
||||
padding: 0rpx 30rpx 30rpx 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
position: relative;
|
||||
.content_hot_title{
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
padding:30rpx 0;
|
||||
}
|
||||
.content_hot_danmu{
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.content_hot_danmu_li{
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
border: 1rpx solid #D9D9D9;
|
||||
font-size: 28rpx;
|
||||
color: #707070;
|
||||
// display: inline-block;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
animation: danmu-scroll linear infinite;
|
||||
background-color: #FFFFFF;
|
||||
.content_hot_danmu_liimg{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
.content_hot_danmu_li_text{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_list{
|
||||
margin: 30rpx 20rpx 20rpx 20rpx;
|
||||
padding: 25rpx 40rpx 25rpx 40rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.content_list_img{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
.content_list_script{
|
||||
width: 500rpx;
|
||||
.content_list_title{
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333
|
||||
}
|
||||
.content_list_desc{
|
||||
margin-top: 8rpx;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@keyframes scaleDr{
|
||||
0% {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
@keyframes danmu-scroll {
|
||||
from {
|
||||
transform: translateX(300%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,96 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
|
||||
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||||
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
|
||||
<view class="head_cont" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||||
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||||
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="head_title" :style="{'width':pageWidth+'px','height':statusHeight+'px'}">客户服务</view>
|
||||
</view>
|
||||
<view class="head_title" :style="{'width':pageWidth+'px','height':statusHeight+'px'}">客户服务</view>
|
||||
</view>
|
||||
<view style="height: 2000rpx;"></view>
|
||||
<view class="content" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
|
||||
<view class="content_head">
|
||||
<image class="content_img" src="../../static/userserve/u_bl.png" mode="widthFix"></image>
|
||||
<view class="content_text">很高兴为您提供帮助～</view>
|
||||
</view>
|
||||
<view class="content_menu">
|
||||
<view class="content_menu_item">
|
||||
<image class="content_menu_item_img" src="../../static/userserve/Invoice.png" mode="widthFix"></image>
|
||||
<view class="content_menu_item_title">退款/售后</view>
|
||||
</view>
|
||||
<view class="content_menu_item">
|
||||
<image class="content_menu_item_img" src="../../static/userserve/reminder.png" mode="widthFix"></image>
|
||||
<view class="content_menu_item_title">催单</view>
|
||||
</view>
|
||||
<view class="content_menu_item">
|
||||
<image class="content_menu_item_img" src="../../static/userserve/reviseorder.png" mode="widthFix"></image>
|
||||
<view class="content_menu_item_title">修改订单</view>
|
||||
</view>
|
||||
<view class="content_menu_item">
|
||||
<image class="content_menu_item_img" src="../../static/userserve/ass.png" mode="widthFix"></image>
|
||||
<view class="content_menu_item_title">开发票</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content_help">
|
||||
<view class="content_search">
|
||||
<image class="content_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||||
<input class="content_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
||||
</view>
|
||||
<view class="content_x">帮助中心</view>
|
||||
|
||||
<view class="class_scroll">
|
||||
<scroll-view
|
||||
:enhanced="true"
|
||||
:show-scrollbar="false"
|
||||
scroll-x="true"
|
||||
:scroll-with-animation="true"
|
||||
:scroll-left="ScrollLeft"
|
||||
class="class_scroll_ul">
|
||||
<view class="class_item class_item_active">热门问题</view>
|
||||
<view class="class_item">订单问题</view>
|
||||
<view class="class_item">配送问题</view>
|
||||
<view class="class_item">发票问题</view>
|
||||
<view class="class_item">售后问题</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="content_list" @click="detail()">
|
||||
<view class="content_l">催单</view>
|
||||
<view class="content_r"></view>
|
||||
</view>
|
||||
<view class="content_list" @click="detail()">
|
||||
<view class="content_l">怎么查询骑手电话</view>
|
||||
<view class="content_r"></view>
|
||||
</view>
|
||||
<view class="content_list" @click="detail()">
|
||||
<view class="content_l">如何取消订单</view>
|
||||
<view class="content_r"></view>
|
||||
</view>
|
||||
<view class="content_list" @click="detail()">
|
||||
<view class="content_l">商品需要售后</view>
|
||||
<view class="content_r"></view>
|
||||
</view>
|
||||
|
||||
<view class="content_list" @click="detail()">
|
||||
<view class="content_l">修改订单信息（收件人/时间/备注）</view>
|
||||
<view class="content_r"></view>
|
||||
</view>
|
||||
<view class="content_list" @click="detail()">
|
||||
<view class="content_l">订单已完成但未收到货</view>
|
||||
<view class="content_r"></view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 200px;"></view>
|
||||
<view class="footer">
|
||||
<view class="footer_tel">
|
||||
<image class="footer_telimg" src="../../static/userserve/tel.png"></image>
|
||||
<view class="footer_tel_text">热线电话</view>
|
||||
</view>
|
||||
<view class="footer_btn">在线客服<text class="footer_btn_text">（07:00-23:00</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -22,6 +106,7 @@ const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = store
|
||||
const headShow = ref(false);
|
||||
const showBack = ref(false);
|
||||
const pageWidth = ref(0);
|
||||
const opacity = ref(1);
|
||||
// 获取页面宽度
|
||||
const updatePageWidth = () => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
@ -46,6 +131,11 @@ const handleBack = () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
const detail=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/clientservedetail/clientservedetail`
|
||||
})
|
||||
};
|
||||
onLoad((options) => {
|
||||
//初始化时判断是否显示返回按钮
|
||||
showBack.value = getPages();
|
||||
|
||||
@ -14,32 +14,34 @@ page{
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.head_back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,.6);
|
||||
border: 1rpx solid rgba(0,0,0,.1);
|
||||
border-radius: 50rpx;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
z-index: 2;
|
||||
.head_back_img{
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 7px;
|
||||
.head_cont{
|
||||
position: relative;
|
||||
.head_back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,.6);
|
||||
border: 1rpx solid rgba(0,0,0,.1);
|
||||
border-radius: 50rpx;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
.head_back_img{
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
.head_title{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: 30rpx;
|
||||
color: '#000000';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.head_title{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: 34rpx;
|
||||
color: '#000000';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
@ -47,4 +49,215 @@ page{
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
.content_head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
.content_img{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin-left: 55rpx;
|
||||
-webkit-animation: 3s scaleDr ease-in-out infinite;
|
||||
animation: 3s scaleDr ease-in-out infinite;
|
||||
}
|
||||
.content_text{
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
}
|
||||
.content_menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
.content_menu_item{
|
||||
width: 25%;
|
||||
padding: 30rpx 0;
|
||||
.content_menu_item_img{
|
||||
margin: 0 auto;
|
||||
width: 77rpx;
|
||||
height: 77rpx;
|
||||
display: block;
|
||||
-webkit-animation: 3s scaleDr ease-in-out infinite;
|
||||
animation: 3s scaleDr ease-in-out i
|
||||
}
|
||||
.content_menu_item_title{
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_help{
|
||||
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding:20rpx 20rpx 0rpx 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
.content_search{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F6F6F6;
|
||||
height: 40px;
|
||||
border-radius: 50rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
justify-content: space-between;
|
||||
.content_search_img{
|
||||
width: 6%;
|
||||
height: 6%;
|
||||
margin-right: 13rpx;
|
||||
display: block;
|
||||
margin-left: 23rpx;
|
||||
}
|
||||
.content_search_input{
|
||||
width: 94%;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.content_x{
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
margin-top: 27rpx;
|
||||
}
|
||||
.class_scroll{
|
||||
white-space: nowrap;
|
||||
height: 90rpx;
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
border-top-left-radius: 30rpx;
|
||||
border-top-right-radius: 30rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 25rpx;
|
||||
.class_scroll_ul{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 90rpx;
|
||||
.class_item{
|
||||
padding: 0rpx 20rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
line-height: 50rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 15rpx;
|
||||
background: #F6F6F6;
|
||||
border: 1px solid #F6F6F6;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.class_item_active{
|
||||
background-color: #FCF0F2;
|
||||
border-radius: 50rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
color: #FF0000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #FF0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1rpx solid #D9D9D9;
|
||||
padding: 30rpx 0;
|
||||
.content_l{
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.content_r{
|
||||
position: relative;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.content_r::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate3d(0, -50%, 0) rotate(45deg);
|
||||
width: 13rpx;
|
||||
height: 13rpx;
|
||||
border-top: 3rpx solid #999999;
|
||||
border-right: 3rpx solid #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 160;
|
||||
background: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
border-top: 1rpx solid #efefef;
|
||||
.footer_tel{
|
||||
width: 100rpx;
|
||||
.footer_telimg{
|
||||
margin: 0 auto;
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
display: block;
|
||||
-webkit-animation: 3s scaleDr ease-in-out infinite;
|
||||
animation: 3s scaleDr ease-in-out i
|
||||
}
|
||||
.footer_tel_text{
|
||||
color: #666666;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
.footer_btn{
|
||||
width: 553rpx;
|
||||
height: 68rpx;
|
||||
text-align: center;
|
||||
line-height: 68rpx;
|
||||
border-radius: 43rpx;
|
||||
border: 1px solid #FD3F3F;
|
||||
color: #FD3F3F;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
.footer_btn_text{
|
||||
color: #999999;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes scaleDr{
|
||||
0% {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
31
userserve/clientservedetail/clientservedetail.vue
Normal file
31
userserve/clientservedetail/clientservedetail.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="main_title">如何取消订单</view>
|
||||
<view class="main_detail">
|
||||
<text>请点击在首页右下角【我的】-【查看全部订单】-【更多】-【取消订单】\n\n 订单配送前支持取消整单商品，不支持取消部分法恢复</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||
import { storeToRefs } from 'pinia';//实现解构付值
|
||||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||||
const counterStore = useCounterStore(); // 使用 Store
|
||||
const { proxy } = getCurrentInstance();
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
|
||||
|
||||
onLoad((options) => {
|
||||
|
||||
});
|
||||
onShow(() => {});
|
||||
onReady(()=>{})
|
||||
onPullDownRefresh(()=>{})
|
||||
onReachBottom(()=>{})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
20
userserve/clientservedetail/style.scss
Normal file
20
userserve/clientservedetail/style.scss
Normal file
@ -0,0 +1,20 @@
|
||||
page{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.main{
|
||||
margin: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
padding: 40rpx 20rpx;
|
||||
.main_title{
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.main_detail{
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user