页面切图
This commit is contained in:
110
pages/home/feedback.vue
Normal file
110
pages/home/feedback.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<Cn-page :loading='loading'>
|
||||
<view slot='body'>
|
||||
<view class='index'>
|
||||
<view class="content" :key="index">
|
||||
<uni-forms>
|
||||
<!-- <uni-forms-item label="类型">
|
||||
<uni-data-select v-model="item.type" :localdata="range"></uni-data-select>
|
||||
</uni-forms-item> -->
|
||||
<uni-forms-item label="标题">
|
||||
<uni-easyinput type="text" v-model="formData.title" placeholder="请输入问题简要" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="描述">
|
||||
<uni-easyinput type="textarea" v-model="formData.des" placeholder="请输入详细描述" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="图片">
|
||||
<uni-file-picker :auto-upload="false" :fileList="formData.fileList" @change="fileChange" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn-wrap-item " @click="submit"> 提交 </view>
|
||||
</view>
|
||||
<navigator url="/pages/home/service" hover-class="none" class="fixed-btn">
|
||||
<image src="/static/service.png" style="height:66rpx;width:66rpx" />
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
formData: {
|
||||
title: '',
|
||||
des: '',
|
||||
fileList: []
|
||||
},
|
||||
range: [
|
||||
{ value: 0, text: "DVR" },
|
||||
{ value: 1, text: "APF" },
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.formData.push({
|
||||
type: '',
|
||||
address: '',
|
||||
})
|
||||
},
|
||||
submit () {
|
||||
console.log(this.formData)
|
||||
uni.navigateBack({ delta: 1 })
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.index {
|
||||
padding: 20rpx;
|
||||
|
||||
.content {
|
||||
margin-bottom: 20rpx;
|
||||
padding: 34rpx;
|
||||
background: $uni-theme-white;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn-wrap-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
background: $uni-theme-blue;
|
||||
color: #fff;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-btn {
|
||||
position: fixed;
|
||||
right: 80rpx;
|
||||
bottom: 200rpx;
|
||||
width: 126rpx;
|
||||
height: 126rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
|
||||
|
||||
image {
|
||||
height: 66rpx;
|
||||
width: 66rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
pages/home/service.vue
Normal file
105
pages/home/service.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<Cn-page :loading='loading'>
|
||||
<view slot='body'>
|
||||
<view class='index'>
|
||||
<!-- 客服页面 显示微信和电话 -->
|
||||
<view class="content">
|
||||
<view class="content-item">
|
||||
<view class="content-item-left">
|
||||
<image src="/static/phone.png" style="height: 40rpx;width: 40rpx" />
|
||||
</view>
|
||||
<view class="content-item-right">
|
||||
<view class="content-item-right-title">电话</view>
|
||||
<view class="content-item-right-des">10086</view>
|
||||
</view>
|
||||
<view class="content-item-operation" @click="call">拨打</view>
|
||||
</view>
|
||||
<view class="content-item mt60">
|
||||
<view class="content-item-left">
|
||||
<image src="/static/wechat.png" style="height: 40rpx;width: 40rpx" />
|
||||
</view>
|
||||
<view class="content-item-right">
|
||||
<view class="content-item-right-title">微信</view>
|
||||
<view class="content-item-right-des">10086</view>
|
||||
</view>
|
||||
<view class="content-item-operation" @click="copy">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
call () {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '10086'
|
||||
})
|
||||
},
|
||||
copy () {
|
||||
uni.setClipboardData({
|
||||
data: '10086',
|
||||
success: () => {
|
||||
this.$util.toast('复制成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.index {
|
||||
padding: 34rpx;
|
||||
|
||||
.content {
|
||||
margin-bottom: 20rpx;
|
||||
padding: 34rpx;
|
||||
background: $uni-theme-white;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.content-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.content-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.content-item-right {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.content-item-right-title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.content-item-right-des {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content-item-operation {
|
||||
padding: 8rpx 20rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: $uni-theme-blue;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user