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

211
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>
@@ -33,24 +35,38 @@
</view> </view>
<!-- #endif --> <!-- #endif -->
<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">
<view class="text">{{item.position}}</view> {{ item.realname }}</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;">
<view style="flex: 1;">{{item.mobile}}</view> <image mode="widthFix" :src="$util.img('public/static/img/boda.png')"
<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> 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>
<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>
<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> </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>
@@ -97,31 +108,34 @@
<!--留言弹窗--> <!--留言弹窗-->
<view class="goods-sku"> <view class="goods-sku">
<uni-popup ref="informationPopup" type="bottom" @change="change"> <uni-popup ref="informationPopup" type="bottom" @change="change">
<view class="liuyan-popup-layer popup-layer" > <view class="liuyan-popup-layer popup-layer">
<view class="head-wrap" @click="closeinformationPopup()"> <view class="head-wrap" @click="closeinformationPopup()">
<text>在线留言</text> <text>在线留言</text>
<text class="iconfont icon-close"></text> <text class="iconfont icon-close"></text>
</view> </view>
<scroll-view scroll-y class="liuyan-body" > <scroll-view scroll-y class="liuyan-body">
<view style="padding: 0 30rpx;"> <view style="padding: 0 30rpx;">
<view class="fui-cell-group"> <view class="fui-cell-group">
<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,44 +145,53 @@
</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: {
realname:'', realname: '',
mobile:'', mobile: '',
remark:'' remark: ''
}, },
markers:[ markers: [
{ {
id:1, id: 1,
/* width:20, //宽度 /* width:20, //宽度
height:20, //高度*/ height:20, //高度*/
// iconPath: '../../static/goal_weizhi.png', //目标位置图标路径 // iconPath: '../../static/goal_weizhi.png', //目标位置图标路径
//这里的经纬度是 目的地 的经纬度 //这里的经纬度是 目的地 的经纬度
latitude:0, latitude: 0,
longitude:0, longitude: 0,
callout:{ callout: {
/* title:123, /* title:123,
content:'123' */ content:'123' */
} }
} }
], ],
landline:0, landline: 0,
shop:{ shop: {
latitude:0, latitude: 0,
longitude:0, longitude: 0,
}, },
personnel_bg:'' personnel_bg: ''
}; };
}, },
onLoad(option) { onLoad(option) {
@@ -180,12 +203,12 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.dataList = res.data this.dataList = res.data
this.shop = res.shop this.shop = res.shop
this.personnel_bg = res.set.personnel_bg?res.set.personnel_bg:'public/static/img/diy_view/member_info_bg.png' this.personnel_bg = res.set.personnel_bg ? res.set.personnel_bg : 'public/static/img/diy_view/member_info_bg.png'
this.markers = [{ this.markers = [{
id:1, id: 1,
//iconPath:'http://saas.cn//public/static/img/kefu.png', //iconPath:'http://saas.cn//public/static/img/kefu.png',
latitude:this.shop.latitude, latitude: this.shop.latitude,
longitude:this.shop.longitude longitude: this.shop.longitude
}] }]
} }
}, },
@@ -194,7 +217,7 @@ export default {
}); });
}, },
methods: { methods: {
test(){ test() {
// channelReady(function(bAvailable) { // channelReady(function(bAvailable) {
// alert('是否存在框架服务：' + bAvailable) // alert('是否存在框架服务：' + bAvailable)
// }) // })
@@ -211,10 +234,10 @@ export default {
// window.postMessage({ action: 'someAction', data: 'some data' }, '*'); // window.postMessage({ action: 'someAction', data: 'some data' }, '*');
// window.open('https://xcx10.5g-quickapp.com/test.php') // window.open('https://xcx10.5g-quickapp.com/test.php')
}, },
save(){ save() {
this.$api.sendRequest({ this.$api.sendRequest({
url: '/api/member/message', url: '/api/member/message',
data:this.Form, data: this.Form,
success: res => { success: res => {
this.$refs.informationPopup.close(); this.$refs.informationPopup.close();
this.$util.showToast({ this.$util.showToast({
@@ -225,29 +248,29 @@ export default {
} }
}); });
}, },
change(e){ change(e) {
console.log(e) console.log(e)
this.ismessage = e.show?1:0 this.ismessage = e.show ? 1 : 0
}, },
//留言打开 //留言打开
tapMessage(){ tapMessage() {
this.ismessage = 1 this.ismessage = 1
this.$refs.informationPopup.open(); this.$refs.informationPopup.open();
}, },
//留言关闭 //留言关闭
closeinformationPopup(){ closeinformationPopup() {
this.ismessage = 0 this.ismessage = 0
this.$refs.informationPopup.close(); this.$refs.informationPopup.close();
}, },
Tel(m){ Tel(m) {
uni.makePhoneCall({ uni.makePhoneCall({
phoneNumber:m+'', phoneNumber: m + '',
success(e) { success(e) {
console.log(e) console.log(e)
} }
}) })
}, },
copy(text){ copy(text) {
uni.setClipboardData({ uni.setClipboardData({
data: text, data: text,
success: function () { success: function () {
@@ -265,11 +288,11 @@ export default {
} }
}); });
}, },
tomap(){ tomap() {
uni.openLocation({ uni.openLocation({
latitude: parseFloat(this.shop.latitude), latitude: parseFloat(this.shop.latitude),
longitude: parseFloat(this.shop.longitude), longitude: parseFloat(this.shop.longitude),
name:"一键导航", name: "一键导航",
}) })
} }
} }
@@ -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;
@@ -363,41 +410,51 @@ button, image, input, label, navigator, scroll-view, swiper, textarea, view {
height: 100%; height: 100%;
justify-content: space-between; justify-content: space-between;
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,11 +471,12 @@ 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;
color:#fff color: #fff
} }
.list_cotact .view_ul_one .view_li:nth-child(1)>button { .list_cotact .view_ul_one .view_li:nth-child(1)>button {
@@ -449,7 +507,7 @@ image {
} }
.view_ul_100 .text { .view_ul_100 .text {
color: rgba(71,71,71,.79); color: rgba(71, 71, 71, .79);
font-size: 24rpx; font-size: 24rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
@@ -483,7 +541,7 @@ image {
} }
.contact_name { .contact_name {
color: rgba(71,71,71,.79); color: rgba(71, 71, 71, .79);
font-size: 24rpx; font-size: 24rpx;
line-height: 36rpx; line-height: 36rpx;
padding-left: 0rpx; padding-left: 0rpx;
@@ -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>