139 lines
4.7 KiB
Vue
139 lines
4.7 KiB
Vue
<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'}">申请售后</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_view" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
|
||
<view class="cont" >
|
||
<textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="请填写您的退款理由～"></textarea>
|
||
</view>
|
||
<view class="cont cont_padding">
|
||
<view class="cont_item">
|
||
<view class="cont_item_l">
|
||
<image class="cont_item_img" src="../../static/ass/money.png" mode="widthFix"></image>
|
||
<view class="cont_item_text">退款金额</view>
|
||
</view>
|
||
<view class="cont_item_r"><input class="cont_item_input" type="digit" placeholder="请输入金额"/><text>元</text></view>
|
||
</view>
|
||
<view class="cont_border"></view>
|
||
<view class="cont_item">
|
||
<view class="cont_item_l">
|
||
<image class="cont_item_img" src="../../static/ass/phone.png" mode="widthFix"></image>
|
||
<view class="cont_item_text">联系方式</view>
|
||
</view>
|
||
<view class="cont_item_r"><input class="cont_item_input" type="number" placeholder="请输入电话号码"/></view>
|
||
</view>
|
||
<view class="cont_border"></view>
|
||
<view class="cont_item">
|
||
<view class="cont_item_l">
|
||
<image class="cont_item_img" src="../../static/ass/img.png" mode="widthFix"></image>
|
||
<view class="cont_item_text">照片</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_shop_text">请将菜品图上传</view>
|
||
<view class="cont_shop_edit">
|
||
<view class="cont_ul">
|
||
<view class="cont_li">
|
||
<view class="cont_upload_remove">
|
||
<image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image>
|
||
</view>
|
||
<image class="cont_li_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cont_li cont_upload">
|
||
<image class="cont_upload_img" src="../../static/ass/uploading.png" mode="widthFix"></image>
|
||
<view class="cont_upload_text">添加照片</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer">
|
||
<view class="footer_btn">提交</view>
|
||
</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);
|
||
const headShow = ref(false);
|
||
const showBack = ref(false);
|
||
const pageWidth = ref(0);
|
||
const opacity = ref(1);
|
||
const timeImg = ref('');
|
||
const isIos = ref(false);
|
||
const System = () =>{
|
||
const phone = wx.getSystemInfoSync();
|
||
if (phone.platform == 'ios') {
|
||
isIos.value = true
|
||
} else if (phone.platform == 'android') {
|
||
isIos.value = false
|
||
}
|
||
};
|
||
// 获取页面宽度
|
||
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',
|
||
});
|
||
}
|
||
};
|
||
onLoad((options) => {
|
||
System();
|
||
//初始化时判断是否显示返回按钮
|
||
showBack.value = getPages();
|
||
updatePageWidth();
|
||
});
|
||
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(()=>{})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |