Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(contact): 增加滚动到顶端的按钮

Browse Source
This commit is contained in:
ZF Sun
2025-12-23 09:36:49 +08:00
parent 66a58fd8e8
commit 8e2f8ef4e8
1 changed files with 290 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
pages/contact/contact.vue
View File

@@ -7,7 +7,8 @@
<view class="container">
<!-- #ifdef H5 -->
<view class="view_ul view_ul_one clearfix">
<view @click="tapMessage" class="view_li w50_li text-center" style="background: #1daa39;width: 100%;border-radius: 10rpx;">
<view @click="tapMessage" class="view_li w50_li text-center"
style="background: #1daa39;width: 100%;border-radius: 10rpx;">
<view class="bl bor" style="box-sizing: border-box;">
<image mode="heightFix" :src="$util.img('public/static/img/liuyan.png')"></image>
<view class="name bl line1" style="margin-top: 6rpx;">在线留言</view>
@@ -19,7 +20,8 @@
<!-- #ifdef MP-WEIXIN -->
<view class="view_ul view_ul_one clearfix">
<view class="view_li w50_li text-center">
<button class="bl bor" hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" style="margin: 0;">
<button class="bl bor" hoverClass="none" openType="contact" sessionFrom="weapp"
showMessageCard="true" style="margin: 0;">
<image mode="heightFix" :src="$util.img('public/static/img/kefu.png')"></image>
<view class="name bl line1">专属客服</view>
</button>
@@ -35,22 +37,36 @@
<view class="view_ul_100" v-for="(item, index) in dataList" style="margin-bottom: 20rpx;">
<view class="bl clearfix bor bg-white" :style="{backgroundImage:' url('+$util.img(personnel_bg)+')',backgroundSize:'100% 100%'}">
<view class="bl clearfix bor bg-white"
:style="{ backgroundImage: ' url(' + $util.img(personnel_bg) + ')', backgroundSize: '100% 100%' }">
<view class="fr">
<view class="text" style="font-size: 40rpx;font-weight: 600;color:#333">{{item.realname}}</view>
<view class="text" style="font-size: 40rpx;font-weight: 600;color:#333">
{{ item.realname }}</view>
<view class="text">{{ item.position }}</view>
<!-- <view class="text">{{item.mobile_text}}：{{item.mobile}}</view> -->
<view class="text" style="padding-bottom:20rpx;color:#0054a5">{{ item.address }}</view>
<view class="contact_name" style="padding-top:30rpx;padding-bottom:0rpx;border-top: solid 1px #eee;font-size:28rpx;display: flex;">
<image mode="widthFix" :src="$util.img('public/static/img/boda.png')" style="margin-top: 8rpx;margin-right: 10rpx;"></image>
<view class="contact_name"
style="padding-top:30rpx;padding-bottom:0rpx;border-top: solid 1px #eee;font-size:28rpx;display: flex;">
<image mode="widthFix" :src="$util.img('public/static/img/boda.png')"
style="margin-top: 8rpx;margin-right: 10rpx;"></image>
<view style="flex: 1;">{{ item.mobile }}</view>
<view style="margin-top: 0rpx;margin-left: 10rpx;font-size: 26rpx;color:rgba(71,71,71,.79)" @click="Tel(item.mobile)"><span style="background: #0054a5;color:#fff;padding: 10rpx 30rpx;font-size: 24rpx;border-radius: 50rpx;">一键拨打</span></view>
<view
style="margin-top: 0rpx;margin-left: 10rpx;font-size: 26rpx;color:rgba(71,71,71,.79)"
@click="Tel(item.mobile)"><span
style="background: #0054a5;color:#fff;padding: 10rpx 30rpx;font-size: 24rpx;border-radius: 50rpx;">一键拨打</span>
</view>
<view class="contact_name" style="padding-top:20rpx;padding-bottom:20rpx;font-size:28rpx;display: flex;">
<image mode="widthFix" :src="$util.img('public/static/img/emall.png')" style="margin-top: 8rpx;margin-right: 10rpx;"></image>
</view>
<view class="contact_name"
style="padding-top:20rpx;padding-bottom:20rpx;font-size:28rpx;display: flex;">
<image mode="widthFix" :src="$util.img('public/static/img/emall.png')"
style="margin-top: 8rpx;margin-right: 10rpx;"></image>
<view style="flex: 1;">{{ item.email }}</view>
<view style="margin-top: 0rpx;margin-left: 10rpx;font-size: 26rpx;color:rgba(71,71,71,.79)" @click="tomap()"><span style="background: #888;color:#fff;padding: 10rpx 30rpx;font-size: 24rpx;border-radius: 50rpx;">立即导航</span></view>
<view
style="margin-top: 0rpx;margin-left: 10rpx;font-size: 26rpx;color:rgba(71,71,71,.79)"
@click="tomap()"><span
style="background: #888;color:#fff;padding: 10rpx 30rpx;font-size: 24rpx;border-radius: 50rpx;">立即导航</span>
</view>
</view>
</view>
</view>
@@ -69,17 +85,12 @@
</view>
</view>
</view> -->
<map
v-if="shop.longitude>0 && shop.latitude >0 && ismessage == 0"
id="map"
style="width: 100%; height:400rpx"
scale="12"
:markers="markers"
bindupdated="bindupdated"
:longitude="shop.longitude"
:latitude="shop.latitude"
show-location>
<cover-view style="position:absolute;right:10px;bottom:30rpx;z-index:9;background:#4d83ff;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;" @click="tomap" ><cover-view style="font-size:24rpx">一键导航</cover-view>
<map v-if="shop.longitude > 0 && shop.latitude > 0 && ismessage == 0" id="map"
style="width: 100%; height:400rpx" scale="12" :markers="markers" bindupdated="bindupdated"
:longitude="shop.longitude" :latitude="shop.latitude" show-location>
<cover-view
style="position:absolute;right:10px;bottom:30rpx;z-index:9;background:#4d83ff;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;"
@click="tomap"><cover-view style="font-size:24rpx">一键导航</cover-view>
</cover-view>
</map>
</view>
@@ -108,20 +119,23 @@
<view class="fui-cell ">
<view class="fui-cell-label ">姓名</view>
<view class="fui-cell-info">
<input v-model="Form.realname" class="fui-input" placeholder="请输入您的姓名" value=""></input>
<input v-model="Form.realname" class="fui-input" placeholder="请输入您的姓名"
value=""></input>
</view>
</view>
<view class="fui-cell ">
<view class="fui-cell-label">联系方式</view>
<view class="fui-cell-info">
<input v-model="Form.mobile" class="fui-input" maxlength="11" placeholder="请输入您的手机号" type="number" ></input>
<input v-model="Form.mobile" class="fui-input" maxlength="11"
placeholder="请输入您的手机号" type="number"></input>
</view>
</view>
<view class="fui-cell ">
<view class="fui-cell-label" style="position: absolute;top:10px">留言内容</view>
<view class="fui-cell-info" style="margin-left: 160rpx;border: solid 2rpx #eee;">
<!-- <input v-model="Form.mailbox" class="fui-input" placeholder="请输入您的邮箱" type="text" ></input> -->
<textarea class="textarea" v-model="Form.remark" placeholder="请输入留言内容" style="font-size: 28rpx;padding: 10rpx;"></textarea>
<textarea class="textarea" v-model="Form.remark" placeholder="请输入留言内容"
style="font-size: 28rpx;padding: 10rpx;"></textarea>
</view>
</view>
</view>
@@ -131,15 +145,24 @@
</view>
</uni-popup>
</view>
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
</view>
<hover-nav></hover-nav>
<diy-bottom-nav></diy-bottom-nav>
</template>
<script>
import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js';
export default {
components: {
toTop
},
mixins: [scroll],
data() {
return {
minScrollTop: 100, // 设置回到顶端按钮显示要求，最小页面滚动距离
dataList: [],
ismessage: 0,
Form: {
@@ -280,6 +303,7 @@ export default {
// 留言
.liuyan-popup-layer {
height: 660rpx;
.free-tip {
min-width: 72rpx;
height: 36rpx;
@@ -295,32 +319,39 @@ export default {
color: var(--main-color);
background-color: var(--main-color-shallow);
}
.liuyan-body {
position: absolute;
left: 0;
right: 0;
height: 60%;
.item {
padding: $padding 0;
margin: 0 30rpx;
border-bottom: 1px solid $color-line;
.value {
margin-left: 20rpx;
}
&:last-child {
border-bottom: 0;
}
}
}
}
.popup-layer {
background: #fff;
.head-wrap {
font-size: $font-size-toolbar;
line-height: 100rpx;
height: 100rpx;
display: block;
text-align: center;
.iconfont {
position: absolute;
float: right;
@@ -328,34 +359,50 @@ export default {
font-size: $font-size-toolbar;
}
}
.button-box {
width: 100%;
position: absolute;
bottom: 0;
z-index: 1;
margin-bottom: 30rpx;
button {
height: 80rpx;
background-color: var(--goods-btn-color);
}
}
}
button, image, input, label, navigator, scroll-view, swiper, textarea, view {
button,
image,
input,
label,
navigator,
scroll-view,
swiper,
textarea,
view {
box-sizing: border-box;
}
.w100 {
width: 100%;
padding-bottom: 60rpx;
}
.bg {
/* background: #5dc2d0;*/
}
.border-top {
border-top: 1px solid rgba(78, 78, 78, .1);
}
.padding-top {
padding-top: 30rpx;
}
.container {
align-items: center;
box-sizing: border-box;
@@ -365,39 +412,49 @@ button, image, input, label, navigator, scroll-view, swiper, textarea, view {
padding: 0 30rpx;
width: 100% !important;
}
.clearfix {
zoom: 1;
overflow: hidden;
}
.text-center {
text-align: center;
}
.w50_li {
float: left;
margin-bottom: 20rpx;
width: 50%;
}
.w50_li:nth-child(odd) {
padding-right: 20rpx;
}
.bl {
display: block;
}
.bor {
border-radius: 10rpx;
}
image {
display: inline-block;
max-width: 100%;
position: relative;
z-index: 0;
}
image {
max-width: 100%;
}
.bl {
display: block;
}
.line1 {
overflow: hidden;
text-overflow: ellipsis;
@@ -414,7 +471,8 @@ image {
height: 60rpx;
}
.list_cotact .bor .name,.view_ul_100 .name {
.list_cotact .bor .name,
.view_ul_100 .name {
font-size: 32rpx;
line-height: 44rpx;
margin-top: 20rpx;
@@ -494,8 +552,6 @@ image {
width: 30rpx;
}
.message {
/* background-color: rgba(0,0,0,.8); */
border-radius: 50%;
@@ -508,4 +564,17 @@ image {
width: 90rpx;
z-index: 9999;
}
</style>
<style lang="scss" scoped>
/deep/ .mescroll-totop {
right: 27rpx!important;
/* #ifdef H5 */
bottom: 120rpx!important;
/* #endif */
/* #ifdef MP-WEIXIN */
bottom: 180rpx!important;
/* #endif */
}
</style>