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

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