Merge remote-tracking branch 'origin/dev' into dev

This commit is contained in:
aixianling
2024-06-11 11:36:38 +08:00
28 changed files with 1889 additions and 0 deletions

View File

@@ -0,0 +1,443 @@
<template>
<div class="AppResidentAssistant">
<u-navbar title="居民助手" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
<div class="service-content">
<div class="text-content">
<div class="text-left">
<div>你好呀</div>
<p>我是您的<span>专属助手</span></p>
<p>有什么问题都可以问我哟~</p>
</div>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/service.png" alt="" class="service-img">
</div>
</div>
<!-- <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll"> -->
<div class="list-content">
<div :class="item.userType == 1 ? 'item-left' : 'item-right'" v-for="(item, index) in messageList" :key="index">
<div class="item" :class="'item'+index">
<div class="img-div" v-if="item.sdkFileUrl">
<u-icon name="play-circle" :color="item.userType == 0 ? '#fff' : '#A8ADAE'" size="52" v-if="!item.isPlay" @click="play(item.sdkFileUrl, index)"></u-icon>
<u-icon name="pause-circle" :color="item.userType == 0 ? '#fff' : '#A8ADAE'" size="52" v-else @click="playStop(index)"></u-icon>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/recording-white.png" alt="" v-if="item.userType == 0">
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/recording-gray.png" alt="" v-else>
</div>
<p>{{item.content || ''}}</p>
</div>
</div>
</div>
<!-- </scroll-view> -->
<div class="fixed-bottom">
<div class="type-text" v-if="type == 'text'">
<u-input type="text" placeholder="输入您的问题…" height="80" input-align="left" :clearable="false" placeholder-style="color:#666;" v-model="content" @confirm="sendMsg"></u-input>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/send.png" alt="" v-if="content.length" @click="sendMsg">
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/microphone-btn.png" alt="" v-else @click="microPhone">
</div>
<div class="type-record" v-else>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/keyboard-btn.png" alt="" class="keyboard-btn" @click="keyboardClick">
<div v-if="!isStart" @click="startRecord">
<p>点击开始录音</p>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/record-btn.png" alt="" class="record-btn">
</div>
<div v-else @click="endRecord">
<p>正在录音中</p>
<div class="tips-text">点击下方停止录音</div>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/shengbo.gif" alt="" class="recording">
</div>
</div>
</div>
<AiLogin ref="login"/>
</div>
</template>
<script>
import {mapActions, mapState} from "vuex";
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
customNavigation: true,
enablePullDownRefresh: true,
name: 'AppResidentAssistant',
appName: '居民助手',
data() {
return {
backgroundNavbar: {
background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
backgroundSize: 'cover',
},
recorderManager: null,
type: 'text',
isStart: false,
content: '',
isFlag: false,
voiceUrl: '',
voiceId: '',
messageList: [
// {
// userType: 0,
// sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/output.mp3',
// isPlay: false
// }
],
current: 1,
pages: 2,
areaId: ''
}
},
computed: {
...mapState(['user', 'token']),
},
onLoad() {
this.autoLogin().then(() => {
this.getHistoryList()
uni.getLocation({
type: 'wgs84', // 返回可以用于uni.openLocation的经纬度默认为wgs84的gps坐标
success : (res) => {
let location = `${res.latitude}, ${res.longitude}`
this.$instance.post(`/admin/area/reverseGeocoding?location=${location}`).then(res => {
if(res && res.code == 0){
this.areaId = res.data.result.addressComponent.adcode + '000000'
}
})
},
fail: (error) => {
console.log('获取位置失败:', error);
}
});
})
recorderManager.onStop((res)=> {
this.upLoad(res.tempFilePath)
});
},
onPullDownRefresh() {
if(this.current > this.pages) {
return this.$u.toast('没有更多记录')
}
this.current = this.current + 1
this.getHistoryList()
},
methods: {
...mapActions(['autoLogin']),
startRecord() {
if(this.isFlag) return
this.isStart = true
uni.authorize({
scope: 'scope.record',
success() {
// const options = {
// duration: 10000,
// sampleRate: 44100,
// numberOfChannels: 1,
// encodeBitRate: 192000,
// format: 'aac',
// frameSize: 50
// }
const options = {
duration: 60000,
sampleRate: 16000,
format: 'mp3'
}
recorderManager.start(options);
},
fail(err) {
this.isStart = false
uni.showModal({
title: "提示",
content: "您的录音权限未开启",
})
}
})
},
endRecord() {
this.isStart = false
setTimeout(() => {
this.isFlag = false
}, 6000)
recorderManager.stop();
},
microPhone() {
this.type = 'voice'
this.isStart = false
},
keyboardClick() {
if(this.isStart) return
this.type = 'text'
this.content = ''
},
upLoad(filePath) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${this.$instance.defaults.baseURL}/admin/file/add`,
filePath,
fileType: 'audio',
name: 'file',
success: uploadFileRes => {
this.voiceUrl = JSON.parse(uploadFileRes.data).data[0].split(';')[0]
this.voiceId = JSON.parse(uploadFileRes.data).data[0].split(';')[1]
this.sendVoice()
resolve(uploadFileRes)
},
fail: err => {
reject(err)
}
})
})
},
sendMsg() {
this.$loading()
this.$instance.post("/app/appaigccopilotinfo/add", {content: this.content, appType: 0, areaId: this.areaId}).then(res => {
if(res.code == 0) {
this.content = ''
this.messageList.push(res.data[0])
this.messageList.push(res.data[1])
this.$nextTick(() => {
uni.pageScrollTo({
duration: 300,
selector: `.item${this.messageList.length-1}`
});
})
this.$hideLoading()
}
})
},
sendVoice() {
this.$loading()
this.$instance.post("/app/appaigccopilotinfo/add", {sdkFileUrl: this.voiceUrl, fileId: this.voiceId, appType: 0}).then(res => {
if(res.code == 0) {
this.voiceUrl = ''
this.voiceId = ''
res.data.map((item) => {
if(item.sdkFileUrl) {
item.isPlay = false
}
})
this.messageList.push(res.data[0])
this.messageList.push(res.data[1])
uni.pageScrollTo({
duration: 300,
selector: `.item${this.messageList.length-1}`
});
this.$hideLoading()
}
})
},
getHistoryList() {
this.$loading()
this.$instance.post(`/app/appaigccopilotinfo/list?current=${this.current}&size=10`).then(res => {
if(res.code == 0 && res.data.records.length) {
res.data.records.map((item) => {
if(item.sdkFileUrl) {
item.isPlay = false
}
})
this.messageList = this.current == 1 ? res.data.records : [...res.data.records, ...this.messageList]
var idPage = res.data.records.length-1
this.$nextTick(() => {
uni.pageScrollTo({
duration: 300,
selector: this.current == 1 ? `.item${this.messageList.length-1}` : `.item${idPage}`
});
})
this.pages = res.data.pages
this.$hideLoading()
}
})
},
play(src, index) {
innerAudioContext.stop();
this.messageList.map((item) => {
if(item.sdkFileUrl) {
item.isPlay = false
}
})
this.messageList[index].isPlay = true
innerAudioContext.src = src;
this.$nextTick(() => {
innerAudioContext.play();
})
innerAudioContext.onEnded(() => {
this.messageList[index].isPlay = false
})
},
playStop(index) {
innerAudioContext.stop();
innerAudioContext.onStop(() => {
this.messageList[index].isPlay = false
})
}
},
}
</script>
<style lang="scss" scoped>
@import "~dvcp-wui/common";
page {
height: 100%;
}
.AppResidentAssistant {
height: 100vh;
background-color: #fff;
.service-content {
width: 100%;
height: 420px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
background-size: 100vw;
background-repeat: no-repeat;
padding-top: 20px;
box-sizing: border-box;
.text-content {
margin: 0 0 0 32px;
width: 686px;
height: 260px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/service-content-bg.png");
background-size: 100vw;
background-repeat: no-repeat;
padding: 32px;
box-sizing: border-box;
border-radius: 32px;
display: flex;
justify-content: space-between;
.text-left {
width: calc(100% - 192px);
div {
line-height: 54px;
font-family: SourceHanSansCN-Bold;
font-weight: 700;
font-size: 36px;
background: linear-gradient(to bottom, #2A6EE9, #58A5F7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 16px;
}
p {
color: #222;
font-size: 28px;
font-family: SourceHanSansCN;
line-height: 44px;
span {
display: inline-block;
font-weight: 700;
}
}
}
.service-img {
display: inline-block;
width: 192px;
height: 170px;
}
}
}
.list-content {
padding: 0 32px 364px;
overflow: hidden;
margin-top: -112px;
background-color: #fff;
.item {
display: inline-block;
max-width: 600px;
border-radius: 24px 24px 0 24px;
padding: 24px 32px;
box-sizing: border-box;
margin-bottom: 32px;
.img-div {
margin-bottom: 4px;
img {
width: 136px;
height: 28px;
margin-left: 26px;
}
}
p {
word-break: break-all;
line-height: 48px;
font-family: SourceHanSansCN-Regular;
font-size: 32px;
}
}
.item-right {
display: flex;
justify-content: flex-end;
.item {
background-image: linear-gradient(-76deg, #569EF0 0%, #276FEC 100%);
}
p {
color: #fff;
}
}
.item-left {
.item {
background-color: #F1F4F8;
}
p {
color: #222;
}
}
}
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 64px;
border-top: 1px solid #eee;
background-color: #fff;
.type-text {
padding: 24px 0 24px 32px;
display: flex;
u-input {
width: calc(100% - 112px);
height: 80px;
background: #F4F6FA;
border-radius: 40px;
padding-left: 32px;
}
img {
width: 80px;
height: 80px;
padding: 0 16px;
}
}
.type-record {
position: relative;
text-align: center;
padding-top: 36px;
.keyboard-btn {
width: 48px;
height: 36px;
position: absolute;
top: 32px;
right: 32px;
}
p {
line-height: 58px;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 40px;
color: #222;
}
.record-btn {
width: 156px;
height: 156px;
margin-top: 24px;
}
.tips-text {
line-height: 40px;
font-family: SourceHanSansCN-Regular;
font-size: 28px;
color: #999;
margin-top: 16px;
}
.recording {
padding-top: 48px;
width: 204px;
height: 96px;
}
}
}
}
</style>

View File

@@ -0,0 +1,506 @@
<template>
<div class="AppDialogue">
<u-navbar title="Copilot小助理" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar" :is-back="false"></u-navbar>
<!-- <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll"> -->
<!-- <div class="service-content">
<div class="text-content">
<div class="text-left">
<div>你好呀</div>
<p>我是您的<span>Copilot小助理</span></p>
<p>有什么问题都可以问我哟~</p>
</div>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/service.png" alt="" class="service-img">
</div>
</div> -->
<div class="list-bg"></div>
<div class="list-content">
<div v-for="(item, index) in messageList" :key="index">
<div class="send-time">6-8 10:31</div>
<div :class="item.userType == 1 ? 'item-left' : 'item-right'">
<img src="./img/user-img.png" alt="" class="user-img" v-if="item.userType == 1">
<div class="item" :class="'item'+index">
<u-icon name="play-right-fill" color="#CCE2FF" size="20" v-if="item.userType != 1" class="u-icon-right"></u-icon>
<u-icon name="play-left-fill" color="#F3F5F7" size="20" v-if="item.userType == 1" class="u-icon-left"></u-icon>
<div class="voice-div" v-if="item.sdkFileUrl" @click="play(item.sdkFileUrl, index)">
<span>8</span>
<img src="./img/play-d.gif" alt="" v-if="item.isPlay">
<img src="./img/play-j.png" alt="" v-else>
</div>
<p v-if="!item.sdkFileUrl">{{item.content || ''}}</p>
</div>
<img src="./img/user-img.png" alt="" class="user-img" v-if="item.userType != 1">
</div>
</div>
</div>
<!-- </scroll-view> -->
<div class="fixed-bottom">
<div class="type-text" v-if="type == 'text'">
<u-input type="text" placeholder="输入您的问题…" height="80" input-align="left" :clearable="false" placeholder-style="color:#666;" v-model="content" @confirm="sendMsg"></u-input>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/send.png" alt="" v-if="content.length" @click="sendMsg">
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/microphone-btn.png" alt="" v-else @click="microPhone">
</div>
<div class="type-record" v-else>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/keyboard-btn.png" alt="" class="keyboard-btn" @click="keyboardClick">
<div v-if="!isStart" @click="startRecord">
<p>点击开始录音</p>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/record-btn.png" alt="" class="record-btn">
</div>
<div v-else @click="endRecord">
<p>正在录音中</p>
<div class="tips-text">点击下方停止录音</div>
<img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/shengbo.gif" alt="" class="recording">
</div>
</div>
</div>
<AiLogin ref="login"/>
</div>
</template>
<script>
import {mapActions, mapState} from "vuex";
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
customNavigation: true,
enablePullDownRefresh: true,
name: 'AppDialogue',
appName: 'Copilot小助理(对话)',
data() {
return {
backgroundNavbar: {
background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
backgroundSize: 'cover',
},
recorderManager: null,
type: 'text',
isStart: false,
content: '',
isFlag: false,
voiceUrl: '',
voiceId: '',
messageList: [
// {
// userType: 0,
// sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/output.mp3',
// isPlay: false
// }
],
current: 1,
pages: 2,
areaId: ''
}
},
computed: {
...mapState(['user', 'token']),
},
onLoad() {
this.autoLogin().then(() => {
this.getHistoryList()
// uni.getLocation({
// type: 'wgs84', // 返回可以用于uni.openLocation的经纬度默认为wgs84的gps坐标
// success : (res) => {
// let location = `${res.latitude}, ${res.longitude}`
// this.$instance.post(`/admin/area/reverseGeocoding?location=${location}`).then(res => {
// if(res && res.code == 0){
// this.areaId = res.data.result.addressComponent.adcode + '000000'
// }
// })
// },
// fail: (error) => {
// console.log('获取位置失败:', error);
// }
// });
})
recorderManager.onStop((res)=> {
this.upLoad(res.tempFilePath)
});
},
onPullDownRefresh() {
if(this.current > this.pages) {
return this.$u.toast('没有更多记录')
}
this.current = this.current + 1
this.getHistoryList()
},
methods: {
...mapActions(['autoLogin']),
startRecord() {
if(this.isFlag) return
this.isStart = true
uni.authorize({
scope: 'scope.record',
success() {
// const options = {
// duration: 10000,
// sampleRate: 44100,
// numberOfChannels: 1,
// encodeBitRate: 192000,
// format: 'aac',
// frameSize: 50
// }
const options = {
duration: 60000,
sampleRate: 16000,
format: 'mp3'
}
recorderManager.start(options);
},
fail(err) {
this.isStart = false
uni.showModal({
title: "提示",
content: "您的录音权限未开启",
})
}
})
},
endRecord() {
this.isStart = false
setTimeout(() => {
this.isFlag = false
}, 6000)
recorderManager.stop();
},
microPhone() {
this.type = 'voice'
this.isStart = false
},
keyboardClick() {
if(this.isStart) return
this.type = 'text'
this.content = ''
},
upLoad(filePath) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${this.$instance.defaults.baseURL}/admin/file/add`,
filePath,
fileType: 'audio',
name: 'file',
success: uploadFileRes => {
this.voiceUrl = JSON.parse(uploadFileRes.data).data[0].split(';')[0]
this.voiceId = JSON.parse(uploadFileRes.data).data[0].split(';')[1]
this.sendVoice()
resolve(uploadFileRes)
},
fail: err => {
reject(err)
}
})
})
},
sendMsg() {
this.$loading()
this.$instance.post("/app/appaigccopilotinfo/add", {content: this.content, appType: 0, areaId: this.areaId}).then(res => {
if(res.code == 0) {
this.content = ''
this.messageList.push(res.data[0])
this.messageList.push(res.data[1])
this.$nextTick(() => {
uni.pageScrollTo({
duration: 300,
selector: `.item${this.messageList.length-1}`
});
})
this.$hideLoading()
}
})
},
sendVoice() {
this.$loading()
this.$instance.post("/app/appaigccopilotinfo/add", {sdkFileUrl: this.voiceUrl, fileId: this.voiceId, appType: 0}).then(res => {
if(res.code == 0) {
this.voiceUrl = ''
this.voiceId = ''
res.data.map((item) => {
if(item.sdkFileUrl) {
item.isPlay = false
}
})
this.messageList.push(res.data[0])
this.messageList.push(res.data[1])
uni.pageScrollTo({
duration: 300,
selector: `.item${this.messageList.length-1}`
});
this.$hideLoading()
}
})
},
getHistoryList() {
this.$loading()
this.$instance.post(`/app/appaigccopilotinfo/list?current=${this.current}&size=10`).then(res => {
if(res.code == 0 && res.data.records.length) {
res.data.records.map((item) => {
if(item.sdkFileUrl) {
item.isPlay = false
}
})
this.messageList = this.current == 1 ? res.data.records : [...res.data.records, ...this.messageList]
var idPage = res.data.records.length-1
this.$nextTick(() => {
uni.pageScrollTo({
duration: 300,
selector: this.current == 1 ? `.item${this.messageList.length-1}` : `.item${idPage}`
});
})
this.pages = res.data.pages
this.$hideLoading()
}
})
},
play(src, index) {
innerAudioContext.stop();
if(this.messageList[index].isPlay) {
innerAudioContext.onStop(() => {
this.messageList[index].isPlay = false
})
return
}
this.messageList.map((item) => {
if(item.sdkFileUrl) {
item.isPlay = false
}
})
this.messageList[index].isPlay = true
innerAudioContext.src = src;
this.$nextTick(() => {
innerAudioContext.play();
})
innerAudioContext.onEnded(() => {
this.messageList[index].isPlay = false
})
},
playStop(index) {
innerAudioContext.stop();
innerAudioContext.onStop(() => {
this.messageList[index].isPlay = false
})
}
},
}
</script>
<style lang="scss" scoped>
@import "~dvcp-wui/common";
page {
height: 100%;
}
.AppDialogue {
height: 100vh;
background-color: #fff;
position: relative;
.service-content {
width: 100%;
height: 420px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
background-size: 100vw;
background-repeat: no-repeat;
padding-top: 20px;
box-sizing: border-box;
.text-content {
margin: 0 0 0 32px;
width: 686px;
height: 260px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/service-content-bg.png");
background-size: 100vw;
background-repeat: no-repeat;
padding: 32px;
box-sizing: border-box;
border-radius: 32px;
display: flex;
justify-content: space-between;
.text-left {
width: calc(100% - 192px);
div {
line-height: 54px;
font-family: SourceHanSansCN-Bold;
font-weight: 700;
font-size: 36px;
background: linear-gradient(to bottom, #2A6EE9, #58A5F7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 16px;
}
p {
color: #222;
font-size: 28px;
font-family: SourceHanSansCN;
line-height: 44px;
span {
display: inline-block;
font-weight: 700;
}
}
}
.service-img {
display: inline-block;
width: 192px;
height: 170px;
}
}
}
.list-bg {
width: 100%;
height: 420px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
position: fixed;
top: 184px;
left: 0;
z-index: 1;
background-size: 100vw;
background-repeat: no-repeat;
}
.list-content {
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 0 32px 364px;
.send-time {
display: block;
width: 100%;
line-height: 28px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 20px;
color: #999;
text-align: center;
margin-bottom: 28px;
}
.user-img {
display: inline-block;
width: 72px;
height: 72px;
vertical-align: top;
}
.item {
display: inline-block;
max-width: 440px;
border-radius: 8px;
padding: 18px;
box-sizing: border-box;
margin-bottom: 28px;
position: relative;
.voice-div {
img {
width: 26px;
height: 28px;
}
span {
display: inline-block;
color: #333;
font-size: 28px;
font-family: PingFangSC;
line-height: 28px;
margin-right: 68px;
}
}
p {
word-break: break-all;
line-height: 40px;
font-family: SourceHanSansCN-Regular;
font-size: 32px;
color: #333;
}
}
.item-right {
display: flex;
justify-content: flex-end;
.item {
background-color: #CCE2FF;
}
.user-img {
margin-left: 24px;
}
.u-icon-right {
position: absolute;
top: 12px;
right: -12px;
}
}
.item-left {
.item {
background-color: #F3F5F7;
}
.user-img {
margin-right: 24px;
}
.u-icon-left {
position: absolute;
top: 12px;
left: -12px;
}
}
}
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 64px;
border-top: 1px solid #eee;
background-color: #fff;
.type-text {
padding: 24px 0 24px 32px;
display: flex;
u-input {
width: calc(100% - 112px);
height: 80px;
background: #F4F6FA;
border-radius: 40px;
padding-left: 32px;
}
img {
width: 80px;
height: 80px;
padding: 0 16px;
}
}
.type-record {
position: relative;
text-align: center;
padding-top: 36px;
.keyboard-btn {
width: 48px;
height: 36px;
position: absolute;
top: 32px;
right: 32px;
}
p {
line-height: 58px;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 40px;
color: #222;
}
.record-btn {
width: 156px;
height: 156px;
margin-top: 24px;
}
.tips-text {
line-height: 40px;
font-family: SourceHanSansCN-Regular;
font-size: 28px;
color: #999;
margin-top: 16px;
}
.recording {
padding-top: 48px;
width: 204px;
height: 96px;
}
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 298 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -0,0 +1,145 @@
<template>
<div class="AppMy">
<u-navbar title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar" :is-back="false"></u-navbar>
<div class="my-bg"></div>
<div class="my-content">
<div class="user-info">
<div class="user-left">
<img src="./img/header-bg.png" alt="" class="user-img">
</div>
<div class="user-right">
<p>张总</p>
<div>党委书记</div>
</div>
</div>
<!-- <div class="app-list">
<div class="item">
<div class="item-left">
<img src="./img/icon1.png" alt="" class="icon-img">应用1
</div>
<div class="item-right">
<img src="./img/right-icon.png" alt="" class="right-img">
</div>
</div>
<div class="item">
<div class="item-left">
<img src="./img/icon2.png" alt="" class="icon-img">应用2
</div>
<div class="item-right">
<img src="./img/right-icon.png" alt="" class="right-img">
</div>
</div>
</div> -->
</div>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex'
export default {
name: 'AppDialogue',
appName: 'Copilot小助理个人中心',
customNavigation: true,
data() {
return {
backgroundNavbar: {
background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
backgroundSize: 'cover',
},
}
},
computed: {
...mapState(['user', 'token']),
},
onLoad() {
},
methods: {
...mapActions(['autoLogin']),
}
}
</script>
<style scoped lang="scss">
.AppMy {
.my-bg {
width: 100%;
height: 420px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
position: fixed;
top: 184px;
left: 0;
z-index: 1;
background-size: 100vw;
background-repeat: no-repeat;
}
.my-content {
.user-info {
display: flex;
padding: 76px 0 56px 48px;
.user-left {
.user-img {
display: inline-block;
width: 96px;
height: 96px;
border: 4px solid #FFF;
border-radius: 50%;
margin-right: 26px;
}
}
.user-right {
padding-top: 4px;
p {
height: 48px;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 34px;
color: #333;
margin-bottom: 4px;
}
div {
height: 36px;
font-family: PingFangSC-Regular;
font-size: 26px;
color: #8A929F;
}
}
}
.app-list {
width: calc(100% - 64px);
margin: 0 0 0 32px;
padding: 20px 32px;
box-sizing: border-box;
background-color: #fff;
border-radius: 16px;
.item {
display: flex;
justify-content: space-between;
padding: 26px 0 28px 0;
.item-left {
line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 30px;
color: #222;
.icon-img {
width: 40px;
height: 40px;
margin-right: 24px;
vertical-align: bottom;
}
}
.item-right {
.right-img {
width: 28px;
height: 28px;
}
}
}
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 563 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 599 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 854 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,131 @@
<template>
<div class="AppRecord">
<u-navbar title="Copilot小助理" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar" :is-back="false"></u-navbar>
<div class="list-bg"></div>
<div class="list-content">
<div class="item">
<p class="content">聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情</p>
<div class="bottom-flex">
<div class="time">2024-06-02 10:21:23</div>
<div class="view">
查看对话
<img src="./img/del-icon.png" alt="" class="del-img">
</div>
</div>
</div>
<div class="item">
<p class="content">聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情</p>
<div class="bottom-flex">
<div class="time">2024-06-02 10:21:23</div>
<div class="view">
查看对话
<img src="./img/del-icon.png" alt="" class="del-img">
</div>
</div>
</div>
<div class="item">
<p class="content">聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情聊天详情</p>
<div class="bottom-flex">
<div class="time">2024-06-02 10:21:23</div>
<div class="view">
查看对话
<img src="./img/del-icon.png" alt="" class="del-img">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex'
export default {
name: 'AppRecord',
appName: 'Copilot小助理(记录)',
customNavigation: true,
enablePullDownRefresh: true,
data() {
return {
backgroundNavbar: {
background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
backgroundSize: 'cover',
},
}
},
computed: {
...mapState(['user', 'token']),
},
onLoad() {
uni.setNavigationBarTitle({
title: 'Copilot小助理记录'
});
},
methods: {
...mapActions(['autoLogin']),
}
}
</script>
<style scoped lang="scss">
.AppRecord {
height: 100vh;
background-color: #fff;
position: relative;
.list-bg {
width: 100%;
height: 420px;
background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
position: fixed;
top: 184px;
left: 0;
z-index: 1;
background-size: 100vw;
background-repeat: no-repeat;
}
.list-content {
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 0 32px;
.item {
margin-bottom: 16px;
.content {
padding: 18px;
background: #CCE2FF;
border-radius: 8px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 28px;
color: #333;
line-height: 40px;
word-break: break-all;
margin-bottom: 34px;
}
.bottom-flex {
display: flex;
justify-content: space-between;
line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 24px;
.time {
color: #999;
}
.view {
color: #216AFD;
.del-img {
width: 40px;
height: 40px;
margin-left: 40px;
vertical-align: bottom;
}
}
}
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 679 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 795 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 806 B

View File

@@ -0,0 +1,664 @@
<template>
<div class="wrapper">
<div class="header" :class="[isFixed ? 'header-active' : '']">
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
<div class="nav-bar">
<h2>进村</h2>
</div>
</div>
<header>
<image src="/static/img/top-bg.png"/>
<div>
<AiAreaPicker :selectRoot="false" ref="area" :value="areaId" :name.sync="areaName" :areaId="$areaId"
@input="areaSelect">
<div class="ai-area__wrapper">
<span class="label" v-if="areaName">{{ areaName }}</span>
<span v-else>请选择</span>
<image src="/static/img/area-bottom.png"/>
</div>
</AiAreaPicker>
<div class="welcome">欢迎进入{{ areaName }}</div>
<div class="tag" v-if="user.homeArea === areaId">我的家乡</div>
<div class="tag1" @click="updateUserInfo" v-if="!user.homeArea && token">设为家乡</div>
</div>
</header>
<div class="card">
<div class="card-item" hover-class="text-hover" @click="$linkTo('/mods/AppVillagerInfo/AppVillagerInfo?type=0')">
<image src="/static/img/bcjj.png"/>
</div>
<div class="card-item" hover-class="text-hover" @click="$linkTo('/mods/AppVillagerInfo/AppVillagerInfo?type=4')">
<image src="/static/img/cgmy.png"/>
</div>
<div class="card-item" hover-class="text-hover"
@click="linkTo('/mods/AppCreditPoints/AppIntegralRanking', 'idNumber')">
<image src="/static/img/jfph.png"/>
</div>
<div class="card-item" hover-class="text-hover"
@click="linkTo('/mods/AppVillagerDiscussion/AppVillagerDiscussion', 'idNumber')">
<image src="/static/img/cmys.png"/>
</div>
</div>
<div class="banner" @click="linkTo('/mods/AppCreditPoints/AppCpSupermarket', 'idNumber')">
<image src="/static/img/jf-banner.png" class="banner"/>
</div>
<!-- <tempalte v-if="publicList.length">
<div class="title-wrap">
<span class="title">三务公开</span>
<div class="right" hover-class="text-hover"
@click="$linkTo(`/mods/AppContent/AppContent?names=三务公开&areaId=${areaId}`)">
<span class="title-more">更多专题</span>
<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
</div>
</div>
<div class="list-news">
<div class="news-wrap" v-for="(item,index) in publicList" :key="index"
@click="$linkTo('/mods/AppContent/contentDetail?id='+ item.id)">
<div class="news-title">{{ item.title }}</div>
<div class="news-bottom">
<div class="tag">{{ item.categoryName }}</div>
<div class="date">{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</div>
<div class="view">
<em>{{ item.viewCount }}</em>
人看过
</div>
</div>
</div>
</div>
</tempalte> -->
<div class="title-wrap" v-if="activityList.length">
<span class="title">居民活动</span>
<div class="right">
<span class="title-more" @click="$linkTo('/mods/AppVillageActivity/AppVillageActivity')">更多活动</span>
<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
</div>
</div>
<scroll-view :scroll-x="true" style="width: 100%" class="scroll-wrap" v-if="activityList.length">
<div
class="scroll-card"
@click="$linkTo('/mods/AppVillageActivity/ActivityDetail?id=' + item.id)"
hover-class="text-hover"
v-for="(item, index) in activityList"
:key="index">
<image :src="item.url" mode="aspectFill"/>
<div class="text">
<span>{{ item.title }}</span>
</div>
</div>
<AiEmpty v-if="!activityList.length"></AiEmpty>
</scroll-view>
<div class="title-wrap">
<span class="title">乡村相册</span>
</div>
<div class="album-list">
<div
class="album"
v-for="(item, index) in albumList"
hover-class="text-hover"
:key="index"
@click="$linkTo('/mods/AppPhotoAlbum/AppPhotoAlbum?type=' + item.type + '&name=' + item.name + '&url=' + item.coverImg)">
<image :src="item.coverImg"/>
<div class="total">{{ item.total }}</div>
<div class="desc">{{ item.name }}</div>
</div>
<AiEmpty style="width: 100%" v-if="!albumList.length"></AiEmpty>
</div>
<AiLogin ref="login"/>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex'
export default {
name: "AppEnteringVillage",
appName: "进村",
customNavigation: true,
data() {
return {
isFixed: false,
statusBarHeight: 20,
top: 0,
areaName: '',
areaId: '',
$areaId: '',
albumList: [],
activityList: [],
publicList: [],
moduleId: "",
isInit: false
}
},
onLoad() {
this.areaId = this.$mp.query.areaId || this.$areaId
this.areaName = this.$mp.query.areaName || this.$areaName
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
this.autoLogin()
this.$nextTick(() => {
this.getAlbumList()
this.getActiveList()
this.getName()
})
uni.$on('update', () => {
this.getAlbumList()
})
},
computed: {
...mapState(['user', 'token'])
},
onShow() {
this.$nextTick(() => {
this.token && this.getUserInfo()
})
if (this.user.homeArea) {
if (!this.isInit) {
this.areaId = this.user.homeArea
this.areaName = this.user.homeName
uni.setStorageSync('areaId', this.user.homeArea)
uni.setStorageSync('areaName', this.user.homeName)
this.isInit = true
}
} else if (!this.isInit && !this.user.homeArea) {
setTimeout(() => {
this.$dialog.alert({
content: '请选择您的家乡'
}).then(() => {
this.$refs.area?.handleJump()
this.isInit = true
})
}, 600)
}
},
methods: {
...mapActions(['autoLogin', 'getUserInfo']),
getName() {
this.$instance.post("/app/appcontentmoduleinfo/listByNames", null, {
params: {names: "三务公开"}
}).then(res => {
if (res.data && res.data.length) {
this.moduleId = res.data[0]["id"];
this.getPublicList();
}
})
},
updateUserInfo() {
if (this.areaId.endsWith('000')) {
this.$dialog.alert({
content: '请选择村'
}).then(() => {
})
return false
}
this.$instance.post("/app/appwechatuser/updateById", {
id: this.user.id,
homeArea: this.areaId,
homeName: this.areaName
}).then(res => {
if (res.code === 0) {
this.getUserInfo()
}
})
},
getPublicList() {
this.$instance.post("/app/appcontentinfo/list", null, {
params: {moduleId: this.moduleId, size: 3, areaId: this.areaId}
}).then(res => {
if (res?.data) {
this.publicList = res.data.records;
}
})
},
linkTo(url, type) {
if (type) {
if (this.token) {
if (type === 'idNumber') {
if (!this.user.residentId) {
this.$linkTo('/mods/AppAuth/AppAuth')
} else {
this.$linkTo(url)
}
}
} else {
this.$refs.login.show()
}
} else {
this.$linkTo(url)
}
},
areaSelect(v) {
this.areaId = v
this.isMore = false
this.current = 0
this.newsList = []
this.$nextTick(() => {
this.getActiveList()
this.getAlbumList()
this.getPublicList()
uni.setStorageSync('areaId', this.areaId)
uni.setStorageSync('areaName', this.areaName)
})
},
getAlbumList() {
this.$instance.post(`/app/appvillagepicturealbum/queryAlbumMenu?areaId=${this.areaId}`).then(res => {
if (res.code == 0) {
this.albumList = res.data.map(v => {
return {
...v,
coverImg: `${this.$cdn}/dvcp/album/album${v.type}.png`
}
})
}
})
},
getActiveList() {
this.$instance.post(`/app/appvillageactivityinfo/listUp`, null, {
params: {
current: 1,
size: 6,
areaId: this.areaId
}
}).then(res => {
if (res.code == 0) {
this.activityList = res.data.records.map(v => {
return {
...v,
url: v.url ? JSON.parse(v.url)[0].url : ''
}
})
}
})
}
},
onShareAppMessage() {
return {
title: '欢迎使用数字乡村治理服务一体化平台~',
path: `/pages/AppEnteringVillage/AppEnteringVillage`
}
},
onPageScroll(params) {
this.isFixed = params.scrollTop > 60;
}
}
</script>
<style scoped lang="scss">
.wrapper {
min-height: 100%;
background: #F3F6F9;
::v-deep .emptyImg {
margin-top: 0 !important;
}
.header {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100%;
opacity: 0;
transition: all 0.2s ease;
&.header-active {
z-index: 1111;
opacity: 1;
background: #4181FF;
}
.nav-bar {
position: relative;
height: 88px;
line-height: 88px;
color: #fff;
font-size: 32px;
text-align: center;
}
}
& > header {
position: relative;
height: 656px;
box-sizing: border-box;
padding-left: 32px;
& > div {
position: relative;
z-index: 11;
}
.ai-area__wrapper {
display: flex;
align-items: center;
padding-top: 100px;
span {
margin-right: 16px;
color: #FFFFFF;
font-size: 44px;
}
image {
width: 16px;
height: 8px;
}
}
& > image {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 656px;
}
.welcome {
font-size: 28px;
font-weight: 400;
color: #FFFFFF;
line-height: 40px;
margin-top: 20px;
}
.tag {
width: 120px;
height: 44px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 400;
color: #c0cae0;
margin-top: 16px;
}
.tag1 {
width: 120px;
height: 44px;
border: 1px solid #c0cae0;
background: rgba(0, 0, 0, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 400;
color: #c0cae0;
margin-top: 16px;
}
}
.card {
position: relative;
z-index: 1;
background: #FFFFFF;
border-radius: 32px 32px 0 0;
margin-top: -336px;
box-sizing: border-box;
padding: 32px 32px 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.card-item {
width: 332px;
height: 160px;
margin-bottom: 32px;
border-radius: 16px;
image {
width: 332px;
height: 160px;
}
}
}
.banner {
position: relative;
z-index: 2;
height: 200px;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F6F9 100%);
image {
display: block;
width: 692px;
height: 200px;
margin: 0 auto;
}
}
.title-wrap {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 48px 32px 32px;
.title {
font-size: 44px;
font-weight: 600;
color: #333333;
}
.right {
.title-more {
font-size: 28px;
font-weight: 400;
line-height: 40px;
color: #999999;
}
}
}
.list-news {
box-sizing: border-box;
padding: 0 32px;
.news-wrap {
height: 186px;
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
border-radius: 16px;
box-sizing: border-box;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
.news-title {
font-size: 36px;
font-weight: 600;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news-bottom {
display: flex;
align-items: center;
.tag {
width: 144px;
height: 48px;
background: #EEEEEE;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 400;
color: #999999;
}
.date {
font-size: 28px;
font-weight: 400;
color: #999999;
margin-left: 16px;
}
.view {
font-size: 28px;
font-weight: 400;
color: #999999;
margin-left: auto;
display: flex;
align-items: center;
& > em {
color: #4181FF;
font-style: normal;
}
}
}
}
}
.scroll-wrap {
box-sizing: border-box;
padding: 0 32px;
width: 100%;
white-space: nowrap;
.scroll-card {
display: inline-block;
width: 400px;
height: 332px;
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
border-radius: 16px;
margin-right: 32px;
font-size: 0;
& > image {
width: 400px;
height: 240px;
border-radius: 16px 16px 0 0;
}
.text {
height: calc(100% - 240px);
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 32px;
& > span {
font-size: 32px;
font-weight: 600;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&:last-child {
margin-right: 0;
}
}
}
.album-list {
box-sizing: border-box;
padding: 0 32px 32px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
.album {
position: relative;
width: 218px;
height: 240px;
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
border-radius: 16px;
overflow: hidden;
image {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.total {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
right: 8px;
top: 8px;
z-index: 2;
width: 74px;
height: 40px;
background: rgba(0, 0, 0, .6);
border-radius: 8px;
font-size: 22px;
font-weight: 400;
color: #FFFFFF;
}
.desc {
position: absolute;
bottom: 16px;
left: 0;
z-index: 2;
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 12px;
font-size: 32px;
text-align: center;
color: #FFFFFF;
font-weight: 600;
box-sizing: border-box;
}
}
}
::v-deep .AiArea {
padding-top: 64px;
height: 88px;
._img {
display: none;
}
.area-name {
font-size: 44px;
font-weight: 600;
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 970 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB