Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 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"> <view class="container">
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<view class="view_ul view_ul_one clearfix"> <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;"> <view class="bl bor" style="box-sizing: border-box;">
<image mode="heightFix" :src="$util.img('public/static/img/liuyan.png')"></image> <image mode="heightFix" :src="$util.img('public/static/img/liuyan.png')"></image>
<view class="name bl line1" style="margin-top: 6rpx;">在线留言</view> <view class="name bl line1" style="margin-top: 6rpx;">在线留言</view>
@@ -19,7 +20,8 @@
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<view class="view_ul view_ul_one clearfix"> <view class="view_ul view_ul_one clearfix">
<view class="view_li w50_li text-center"> <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> <image mode="heightFix" :src="$util.img('public/static/img/kefu.png')"></image>
<view class="name bl line1">专属客服</view> <view class="name bl line1">专属客服</view>
</button> </button>
@@ -35,22 +37,36 @@
<view class="view_ul_100" v-for="(item, index) in dataList" style="margin-bottom: 20rpx;"> <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="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.position }}</view>
<!-- <view class="text">{{item.mobile_text}}：{{item.mobile}}</view> --> <!-- <view class="text">{{item.mobile_text}}：{{item.mobile}}</view> -->
<view class="text" style="padding-bottom:20rpx;color:#0054a5">{{ item.address }}</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;"> <view class="contact_name"
<image mode="widthFix" :src="$util.img('public/static/img/boda.png')" style="margin-top: 8rpx;margin-right: 10rpx;"></image> 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="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>
<view class="contact_name" style="padding-top:20rpx;padding-bottom:20rpx;font-size:28rpx;display: flex;"> </view>
<image mode="widthFix" :src="$util.img('public/static/img/emall.png')" style="margin-top: 8rpx;margin-right: 10rpx;"></image> <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="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> </view>
</view> </view>
@@ -69,17 +85,12 @@
</view> </view>
</view> </view>
</view> --> </view> -->
<map <map v-if="shop.longitude > 0 && shop.latitude > 0 && ismessage == 0" id="map"
v-if="shop.longitude>0 && shop.latitude >0 && ismessage == 0" style="width: 100%; height:400rpx" scale="12" :markers="markers" bindupdated="bindupdated"
id="map" :longitude="shop.longitude" :latitude="shop.latitude" show-location>
style="width: 100%; height:400rpx" <cover-view
scale="12" 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;"
:markers="markers" @click="tomap"><cover-view style="font-size:24rpx">一键导航</cover-view>
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> </cover-view>
</map> </map>
</view> </view>
@@ -108,20 +119,23 @@
<view class="fui-cell "> <view class="fui-cell ">
<view class="fui-cell-label ">姓名</view> <view class="fui-cell-label ">姓名</view>
<view class="fui-cell-info"> <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> </view>
<view class="fui-cell "> <view class="fui-cell ">
<view class="fui-cell-label">联系方式</view> <view class="fui-cell-label">联系方式</view>
<view class="fui-cell-info"> <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> </view>
<view class="fui-cell "> <view class="fui-cell ">
<view class="fui-cell-label" style="position: absolute;top:10px">留言内容</view> <view class="fui-cell-label" style="position: absolute;top:10px">留言内容</view>
<view class="fui-cell-info" style="margin-left: 160rpx;border: solid 2rpx #eee;"> <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> --> <!-- <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> </view>
</view> </view>
@@ -131,15 +145,24 @@
</view> </view>
</uni-popup> </uni-popup>
</view> </view>
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
</view> </view>
<hover-nav></hover-nav> <hover-nav></hover-nav>
<diy-bottom-nav></diy-bottom-nav> <diy-bottom-nav></diy-bottom-nav>
</template> </template>
<script> <script>
import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js';
export default { export default {
components: {
toTop
},
mixins: [scroll],
data() { data() {
return { return {
minScrollTop: 100, // 设置回到顶端按钮显示要求，最小页面滚动距离
dataList: [], dataList: [],
ismessage: 0, ismessage: 0,
Form: { Form: {
@@ -280,6 +303,7 @@ export default {
// 留言 // 留言
.liuyan-popup-layer { .liuyan-popup-layer {
height: 660rpx; height: 660rpx;
.free-tip { .free-tip {
min-width: 72rpx; min-width: 72rpx;
height: 36rpx; height: 36rpx;
@@ -295,32 +319,39 @@ export default {
color: var(--main-color); color: var(--main-color);
background-color: var(--main-color-shallow); background-color: var(--main-color-shallow);
} }
.liuyan-body { .liuyan-body {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
height: 60%; height: 60%;
.item { .item {
padding: $padding 0; padding: $padding 0;
margin: 0 30rpx; margin: 0 30rpx;
border-bottom: 1px solid $color-line; border-bottom: 1px solid $color-line;
.value { .value {
margin-left: 20rpx; margin-left: 20rpx;
} }
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
} }
} }
.popup-layer { .popup-layer {
background: #fff; background: #fff;
.head-wrap { .head-wrap {
font-size: $font-size-toolbar; font-size: $font-size-toolbar;
line-height: 100rpx; line-height: 100rpx;
height: 100rpx; height: 100rpx;
display: block; display: block;
text-align: center; text-align: center;
.iconfont { .iconfont {
position: absolute; position: absolute;
float: right; float: right;
@@ -328,34 +359,50 @@ export default {
font-size: $font-size-toolbar; font-size: $font-size-toolbar;
} }
} }
.button-box { .button-box {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
z-index: 1; z-index: 1;
margin-bottom: 30rpx; margin-bottom: 30rpx;
button { button {
height: 80rpx; height: 80rpx;
background-color: var(--goods-btn-color); 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; box-sizing: border-box;
} }
.w100 { .w100 {
width: 100%; width: 100%;
padding-bottom: 60rpx; padding-bottom: 60rpx;
} }
.bg { .bg {
/* background: #5dc2d0;*/ /* background: #5dc2d0;*/
} }
.border-top { .border-top {
border-top: 1px solid rgba(78, 78, 78, .1); border-top: 1px solid rgba(78, 78, 78, .1);
} }
.padding-top { .padding-top {
padding-top: 30rpx; padding-top: 30rpx;
} }
.container { .container {
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
@@ -365,39 +412,49 @@ button, image, input, label, navigator, scroll-view, swiper, textarea, view {
padding: 0 30rpx; padding: 0 30rpx;
width: 100% !important; width: 100% !important;
} }
.clearfix { .clearfix {
zoom: 1; zoom: 1;
overflow: hidden; overflow: hidden;
} }
.text-center { .text-center {
text-align: center; text-align: center;
} }
.w50_li { .w50_li {
float: left; float: left;
margin-bottom: 20rpx; margin-bottom: 20rpx;
width: 50%; width: 50%;
} }
.w50_li:nth-child(odd) { .w50_li:nth-child(odd) {
padding-right: 20rpx; padding-right: 20rpx;
} }
.bl { .bl {
display: block; display: block;
} }
.bor { .bor {
border-radius: 10rpx; border-radius: 10rpx;
} }
image { image {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
position: relative; position: relative;
z-index: 0; z-index: 0;
} }
image { image {
max-width: 100%; max-width: 100%;
} }
.bl { .bl {
display: block; display: block;
} }
.line1 { .line1 {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -414,7 +471,8 @@ image {
height: 60rpx; height: 60rpx;
} }
.list_cotact .bor .name,.view_ul_100 .name { .list_cotact .bor .name,
.view_ul_100 .name {
font-size: 32rpx; font-size: 32rpx;
line-height: 44rpx; line-height: 44rpx;
margin-top: 20rpx; margin-top: 20rpx;
@@ -494,8 +552,6 @@ image {
width: 30rpx; width: 30rpx;
} }
.message { .message {
/* background-color: rgba(0,0,0,.8); */ /* background-color: rgba(0,0,0,.8); */
border-radius: 50%; border-radius: 50%;
@@ -508,4 +564,17 @@ image {
width: 90rpx; width: 90rpx;
z-index: 9999; 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> </style>