jiazhipeng
11 months ago
16 changed files with 3428 additions and 3 deletions
@ -0,0 +1,159 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="service-top"> |
|||
<view class="title">{{detail.issue}}</view> |
|||
<view class="content" v-html="detail.answer"></view> |
|||
<view class="useful"> |
|||
<view>以上答案是否解决您的问题?</view> |
|||
<view class="operation" @click="setUseful(1)"> |
|||
<image v-show="is_useful==0" :src="showImg('/uploads/20241203/2e5b01e978f07b882f7da19ad60f53c4.png')"></image> |
|||
<image v-show="is_useful==1" :src="showImg('/uploads/20241203/7e87b3ae9b0c7b84317516010d4f3f31.png')"></image> |
|||
有用(99+) |
|||
</view> |
|||
<view class="operation" @click="setUseful(2)"> |
|||
<image v-show="is_useful==0" :src="showImg('/uploads/20241203/73cfb278be1e7d7ba0f7b55effbc2ea1.png')"></image> |
|||
<image v-show="is_useful==2" :src="showImg('/uploads/20241203/5f86738db034b23c63a069c553fc17c0.png')"></image> |
|||
没用(99+) |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="height: 20rpx;background: #F7F7F7;"></view> |
|||
|
|||
<view class="common-question"> |
|||
<view class="title">可能你还想问</view> |
|||
|
|||
<view class="question-list"> |
|||
<view class="item" v-for="(item,i) in questionList" :key="i" @click="viewDetail(item)"> |
|||
<view class="text-overflow" style="padding-right: 20rpx;">{{item.issue}}</view> |
|||
<uni-icons color="#999999" type="right" size="14"></uni-icons> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="more-question" @click="goBattle">没找到想要的答案？一键呼唤<text style="color: #DC2525;">人工客服</text></view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
questionList: [], |
|||
detail: {}, |
|||
is_useful: 0, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id |
|||
if (!this.id) { |
|||
this.goBack() |
|||
} else { |
|||
this.getDetail() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
getDetail () { |
|||
this.Post({id: this.id}, '/api/Answer/getAnswerDetail').then(res=>{ |
|||
this.detail = res.data |
|||
}) |
|||
}, |
|||
viewDetail(item) { |
|||
uni.navigateTo({ |
|||
url: `/subPackages/onlineService/detail?id=${item.id}` |
|||
}) |
|||
}, |
|||
setUseful (val) { |
|||
let value = val |
|||
if (this.is_useful == value) { |
|||
value = 0 |
|||
} |
|||
// this.Post({id: this.id, is_useful: value}, '').then(res=>{ |
|||
// this.is_useful = value |
|||
// }) |
|||
}, |
|||
goBattle() { |
|||
window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU1MzE2NQ==#wechat_redirect'); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
width: 100%; |
|||
min-height: calc(100vh - 44px); |
|||
background: #FFFFFF; |
|||
} |
|||
.service-top{ |
|||
padding: 20rpx 26rpx; |
|||
.title{ |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #96684F; |
|||
} |
|||
.content{ |
|||
padding: 28rpx 0 60rpx; |
|||
} |
|||
.useful{ |
|||
display: flex; |
|||
align-items: center; |
|||
color: #666666; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
} |
|||
.operation{ |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 29rpx; |
|||
image{ |
|||
width: 40rpx; |
|||
height: 50rpx; |
|||
margin-right: 4rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.common-question{ |
|||
padding: 26rpx 26rpx; |
|||
.title{ |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #333333; |
|||
padding-bottom: 26rpx; |
|||
border-bottom: 1px solid #D8D8D8;; |
|||
} |
|||
.question-list{ |
|||
.item{ |
|||
height: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
} |
|||
} |
|||
} |
|||
.more-question{ |
|||
width: 520rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
border-radius: 7rpx; |
|||
border: 1px solid #999999; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
margin: 54rpx auto 0; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,242 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="service-top"> |
|||
<view class="chat-top"> |
|||
<image :src="showImg('/uploads/20241202/2da555edc0420cfad68b0e7c6e90c99a.png')"></image> |
|||
<view class="content"> |
|||
<view class="info" style="margin-bottom: 8rpx;">你好，欢迎来到苏州市导游协会，您可点击以 下问题列表自助查询相关信息~</view> |
|||
<view class="info2"> |
|||
<view class="go-worker" @click="goBattle">前往在线人工 <uni-icons color="#96684F" type="right" size="14"></uni-icons></view> |
|||
<view class="flex-between"><text>客服热线：12345678912</text><text>工作时间：9:00-17:00</text></view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="tag-container no-scrollbar"> |
|||
<view class="tag" v-for="(item,i) in tagList" :key="i" @click="goSerachByTag(item)">{{item.name}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="common-question"> |
|||
<view class="title">常见问题</view> |
|||
<view class="tag-container type-container no-scrollbar"> |
|||
<view :class="['type',activeType==item.id?'active':'']" v-for="(item,i) in typeList" :key="i" |
|||
@click="changeType(item)"> |
|||
{{item.name}} |
|||
<view class="line" v-if="activeType==item.id"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="question-list"> |
|||
<view class="item" v-for="(item,i) in questionList" :key="i" @click="viewDetail(item)"> |
|||
<view class="text-overflow" style="padding-right: 20rpx;">{{item.issue}}</view> |
|||
<uni-icons color="#999999" type="right" size="14"></uni-icons> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="more-question" @click="goSearchByType()">更多景点问题 ></view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tagList: [], |
|||
typeList: [], |
|||
questionList: [], |
|||
activeType: null |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.getTags() |
|||
this.getTypes() |
|||
}, |
|||
|
|||
methods: { |
|||
getTags () { |
|||
this.Post({}, '/api/Answer/tag').then(res=>{ |
|||
this.tagList = res.data || [] |
|||
}) |
|||
}, |
|||
getTypes () { |
|||
this.Post({}, '/api/Answer/type').then(res=>{ |
|||
this.typeList = res.data || [] |
|||
if (this.typeList.length>0) { |
|||
this.activeType = this.typeList[0].id |
|||
this.getQuestionByTypeId() |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
getQuestionByTypeId () { |
|||
this.Post({type_id: this.activeType}, '/api/Answer/getAnswerByType').then(res=>{ |
|||
this.questionList = (res.data || []).slice(0,5) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
goSerachByTag (tag) { |
|||
uni.navigateTo({ |
|||
url: `/subPackages/onlineService/search?type=tag&id=${tag.id}` |
|||
}) |
|||
}, |
|||
changeType (type) { |
|||
this.activeType = type.id |
|||
this.getQuestionByTypeId() |
|||
}, |
|||
viewDetail(item) { |
|||
uni.navigateTo({ |
|||
url: `/subPackages/onlineService/detail?id=${item.id}` |
|||
}) |
|||
}, |
|||
goSearchByType() { |
|||
uni.navigateTo({ |
|||
url: `/subPackages/onlineService/search?type=type&id=${this.activeType}` |
|||
}) |
|||
}, |
|||
goBattle() { |
|||
window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU1MzE2NQ==#wechat_redirect'); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
width: 100%; |
|||
min-height: calc(100vh - 44px); |
|||
background: #FFFFFF; |
|||
|
|||
|
|||
} |
|||
.service-top{ |
|||
padding: 30rpx; |
|||
background-image: linear-gradient(180deg,#F1DDC9,#FFFFFF); |
|||
.chat-top{ |
|||
display: flex; |
|||
} |
|||
image{ |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.content{ |
|||
flex: 1; |
|||
width: 1rpx; |
|||
padding-left: 20rpx; |
|||
.info{ |
|||
padding: 25rpx; |
|||
width: 100%; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
background: white; |
|||
border-radius: 7rpx; |
|||
} |
|||
.info2{ |
|||
padding: 16rpx 25rpx; |
|||
font-weight: 500; |
|||
font-size: 23rpx; |
|||
color: #666666; |
|||
background: white; |
|||
border-radius: 7rpx; |
|||
} |
|||
.go-worker{ |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #96684F; |
|||
} |
|||
} |
|||
} |
|||
.tag-container{ |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
padding-top: 40rpx; |
|||
.tag{ |
|||
padding: 0 34rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
background: #96684F; |
|||
border-radius: 7rpx; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
margin-right: 13rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.type{ |
|||
padding: 0 34rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #666666; |
|||
position: relative; |
|||
line-height: initial; |
|||
flex-shrink: 0; |
|||
&.active { |
|||
font-weight: bold; |
|||
color: #96684F; |
|||
} |
|||
.line { |
|||
width: 40rpx; |
|||
height: 6rpx; |
|||
background: #96684F; |
|||
border-radius: 6rpx; |
|||
position: absolute; |
|||
bottom: -16rpx; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.common-question{ |
|||
padding: 20rpx 30rpx; |
|||
.title{ |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #333333; |
|||
padding-bottom: 38rpx; |
|||
} |
|||
.type-container{ |
|||
padding:0 0 44rpx; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
} |
|||
.question-list{ |
|||
.item{ |
|||
height: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
border-bottom: 1px solid #D8D8D8;; |
|||
} |
|||
} |
|||
} |
|||
.more-question{ |
|||
width: 300rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
border-radius: 7rpx; |
|||
border: 1px solid #999999; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
margin: 54rpx auto 0; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,165 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="top-box"> |
|||
<uni-icons color="#333333" type="left" size="18" @click.native="goBack()"></uni-icons> |
|||
<view class="search-box"> |
|||
<uni-icons color="#96684F" type="search" size="20" ></uni-icons> |
|||
<input type="text" class="input" placeholder="请输入搜索关键字" v-model="keywords" @confirm="search" /> |
|||
</view> |
|||
<view class="btn" @click="search()">搜索</view> |
|||
</view> |
|||
|
|||
<view class="common-question"> |
|||
<view class="question-list"> |
|||
<view class="item" v-for="(item,i) in questionList" :key="i" @click="viewDetail(item)"> |
|||
<view class="text-overflow" style="padding-right: 20rpx;">{{item.issue}}</view> |
|||
<uni-icons color="#999999" type="right" size="14"></uni-icons> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="more-question" @click="goBattle">没找到想要的答案？一键呼唤<text style="color: #DC2525;">人工客服</text></view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
keywords: '', |
|||
questionList: [], |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.keywords = "" |
|||
let type = options.type |
|||
let id = options.id |
|||
if (type == 'tag') { |
|||
this.getQuestionByTagId(id) |
|||
} else if (type == 'type') { |
|||
this.getQuestionByTypeId(id) |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
methods: { |
|||
getQuestionByTypeId (id) { |
|||
this.Post({type_id: id}, '/api/Answer/getAnswerByType').then(res=>{ |
|||
this.questionList = (res.data || []) |
|||
}) |
|||
}, |
|||
getQuestionByTagId (id) { |
|||
this.Post({tag_id: id}, '/api/Answer/getAnswerByTag').then(res=>{ |
|||
this.questionList = (res.data || []) |
|||
}) |
|||
}, |
|||
search () { |
|||
this.keywords = this.keywords.trim() |
|||
if (!this.keywords) { |
|||
uni.showToast({ |
|||
title:"请输入搜索关键词", |
|||
icon:"none" |
|||
}) |
|||
return |
|||
} |
|||
this.Post({name: this.keywords}, '/api/Answer/search').then(res=>{ |
|||
this.questionList = (res.data || []) |
|||
}) |
|||
|
|||
}, |
|||
viewDetail(item) { |
|||
uni.navigateTo({ |
|||
url: `/subPackages/onlineService/detail?id=${item.id}` |
|||
}) |
|||
}, |
|||
goBattle() { |
|||
window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU1MzE2NQ==#wechat_redirect'); |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: white; |
|||
position: relative; |
|||
padding: 0 24rpx 40rpx; |
|||
} |
|||
|
|||
.top-box { |
|||
height: 84rpx;; |
|||
padding: 12rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 24rpx; |
|||
right: 24rpx; |
|||
background: white; |
|||
.search-box{ |
|||
width: 493rpx; |
|||
height: 60rpx; |
|||
border: 1px solid #96684F; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 15rpx 19rpx; |
|||
.input { |
|||
flex: 1; |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
color: #666; |
|||
margin: 0 20rpx; |
|||
} |
|||
} |
|||
.btn { |
|||
width: 120rpx; |
|||
height: 60rpx; |
|||
background: #96684F; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.common-question{ |
|||
padding-top: 80rpx; |
|||
.question-list{ |
|||
.item{ |
|||
height: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
border-bottom: 1px solid #D8D8D8;; |
|||
} |
|||
} |
|||
} |
|||
.more-question{ |
|||
width: 520rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
border-radius: 7rpx; |
|||
border: 1px solid #999999; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
margin: 54rpx auto 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,164 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="input-box"> |
|||
<span>手机号:</span> |
|||
<input type="number" v-model="mobile" placeholder="请输入新手机号" maxlength="11" /> |
|||
</view> |
|||
<view class="input-box"> |
|||
<span>验证码:</span> |
|||
<input type="number" v-model="code" placeholder="请输入短信验证码" maxlength="6" /> |
|||
<view class="btn" @click="getCode">{{text}}</view> |
|||
</view> |
|||
<view class="btn bottom-btn" @click="save">保存</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "BindTel", |
|||
data: function() { |
|||
return { |
|||
mobile: '', |
|||
code: '', |
|||
sendFlag: true, |
|||
timer: null, |
|||
text: "获取验证码" |
|||
} |
|||
}, |
|||
mounted: function() { |
|||
// this.wxShare(); |
|||
}, |
|||
methods: { |
|||
save: function() { |
|||
if (!this.mobile || !this.IsTel(this.mobile)) { |
|||
uni.showToast({ |
|||
title: "请输入正确的手机号码", |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (!this.code) { |
|||
uni.showToast({ |
|||
title: "请输入验证码", |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
this.Post({ |
|||
code: this.code, |
|||
mobile: this.mobile |
|||
}, '/api/user/bindMobileCode').then(res => { |
|||
if (res.code == 1) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '保存成功！', |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.goBack() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
console.log('err:', err) |
|||
}) |
|||
}, |
|||
getCode: function() { |
|||
if (!this.sendFlag) return; |
|||
if (!this.mobile || !this.IsTel(this.mobile)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的手机号码', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
this.sendFlag = false; |
|||
this.Post({ |
|||
mobile: this.mobile |
|||
}, '/api/user/bindMobileSendMsm').then(res => { |
|||
if (res.code == 1) { |
|||
// 发送成功 |
|||
this.text = "发送成功"; |
|||
let time = 60; |
|||
// 需要倒计时 |
|||
this.timer = setInterval(() => { |
|||
time--; |
|||
this.text = time + "s后重新获取"; |
|||
if (time == 0) { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
this.text = "重新发送"; |
|||
this.sendFlag = true; |
|||
} |
|||
}, 1000); |
|||
} else { |
|||
this.text = "重新发送"; |
|||
this.sendFlag = true; |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
text-align: center; |
|||
} |
|||
|
|||
.input-box { |
|||
font-size: 32rpx; |
|||
margin: 0 30rpx; |
|||
height: 124rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid #CECECE; |
|||
} |
|||
|
|||
.input-box span { |
|||
margin-right: 20rpx; |
|||
flex-shrink: 0; |
|||
white-space: normal; |
|||
} |
|||
|
|||
.input-box input { |
|||
flex: 1; |
|||
display: block; |
|||
width: 100%; |
|||
font-size: 32rpx; |
|||
margin-right: 10rpx; |
|||
min-width: 100rpx; |
|||
text-align: left; |
|||
} |
|||
|
|||
.btn { |
|||
color: black; |
|||
width: 200rpx; |
|||
height: 53rpx; |
|||
line-height: 53rpx; |
|||
background: rgba(127, 212, 145, 1); |
|||
border-radius: 27rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.input-box .btn { |
|||
padding: 0 10rpx; |
|||
font-size: 26rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.bottom-btn { |
|||
color: black; |
|||
margin: 50rpx auto; |
|||
line-height: 80rpx; |
|||
position: relative; |
|||
font-size: 34rpx; |
|||
text-align: center; |
|||
width: 333rpx; |
|||
height: 80rpx; |
|||
background: #248BAA; |
|||
border-radius: 40rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="nickname-box"> |
|||
<input v-model="nickname" type="text" placeholder="请输入内容" /> |
|||
</view> |
|||
<view class="btn" @click="save">保存</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "changeNickname", |
|||
data: function() { |
|||
return { |
|||
nickname: "" |
|||
} |
|||
}, |
|||
methods: { |
|||
save: function() { |
|||
if (!this.nickname) { |
|||
uni.showToast({ |
|||
title: '请输入昵称', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
this.Post({ |
|||
nickname: this.nickname |
|||
}, '/api/user/profile').then(res => { |
|||
console.log(res) |
|||
if (res.code == 1) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '保存成功！', |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.goBack() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
padding-top: 50rpx; |
|||
} |
|||
|
|||
.nickname-box { |
|||
display: flex; |
|||
padding: 10rpx 0 30rpx; |
|||
margin: 0 30rpx; |
|||
align-items: center; |
|||
background: white; |
|||
margin-bottom: 100rpx; |
|||
font-size: 30rpx; |
|||
height: 70rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
} |
|||
|
|||
.nickname-box span { |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.nickname-box input { |
|||
flex: 1; |
|||
font-size: 30rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.btn { |
|||
color: black; |
|||
margin: 0 auto; |
|||
line-height: 80rpx; |
|||
position: relative; |
|||
font-size: 34rpx; |
|||
text-align: center; |
|||
width: 333rpx; |
|||
height: 80rpx; |
|||
background: #C3282E; |
|||
border-radius: 40rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,818 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
|
|||
<view class="user-other-info"> |
|||
<!-- // 景区 --> |
|||
<view class="scenic-container" v-if="valueType=='scenic_ids'"> |
|||
<view class="userinfo-item" v-for="(item,i) in scenicIds" :key="i" @click="changeSelection(item)"> |
|||
<span>{{item.name}}</span> |
|||
<view v-if="item.value.length>0" class="text-overflow" >{{item.valueStr}}</view> |
|||
<view v-else class="empty-value" >请选择</view> |
|||
</view> |
|||
</view> |
|||
<!-- 语言 --> |
|||
<view class="lingo-container" v-else-if="valueType=='lingo_ids'"> |
|||
<view class="userinfo-item" v-for="(item,i) in lingoIds" :key="i" @click="changeSelection(item)"> |
|||
<span>{{item.name}}</span> |
|||
<view v-if="item.value.length>0" class="text-overflow" >{{item.valueStr}}</view> |
|||
<view v-else class="empty-value" >请选择</view> |
|||
</view> |
|||
<view class="language-doc-container"> |
|||
<span>证明材料</span> |
|||
<view class="img-container"> |
|||
<view v-for="(file,i) in fileList" class="doc-image" :key="i"> |
|||
|
|||
<image :src="file" class="doc-image" ></image> |
|||
<view class="doc-del" @click.native="removeFile(i)">x</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view class="doc-image flex flex-center" @click="uploadImage()"> |
|||
<image class="upload-image" :src="showImg('/uploads/20241202/33e04a3b13241a6705616f6d6db315ce.png')"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 亮点 --> |
|||
<view class="scenic-container" v-else-if="valueType=='sparkle_text'"> |
|||
<view class="userinfo-item" v-for="(item,i) in speakText" :key="i"> |
|||
<span>{{i==0?'主亮点':`副亮点${i}`}}</span> |
|||
<view class="point"> |
|||
<input v-model="item.text" type="text" placeholder="请输入内容" /> |
|||
|
|||
<uni-icons v-if="i!=0" class="del-icon" type="trash" size="20" @click.native="delText(i)"></uni-icons> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="add-btn" @click="addText">+ 添加更多</view> |
|||
</view> |
|||
<!-- 视频 --> |
|||
<view class="video-container" v-else-if="valueType=='video_list'"> |
|||
<view class="top-del" style="text-align: right;padding-bottom: 15rpx;position: relative;"> |
|||
<uni-icons type="trash" size="19" @click.native="changeDeleteMode(true)"></uni-icons> |
|||
<view v-if="deleteIndex.length>0" class="del-num">{{deleteIndex.length}}</view> |
|||
</view> |
|||
<view class="video-upload-container"> |
|||
<view v-show="!deleteMode" class="video-upload-image flex flex-column flex-center" |
|||
@click="uploadVideo()" style="border: 1px dashed #ADADAD;"> |
|||
<image class="upload-image" style="margin-bottom: 12rpx;" :src="showImg('/uploads/20241202/33e04a3b13241a6705616f6d6db315ce.png')"></image> |
|||
上传视频 |
|||
</view> |
|||
|
|||
<view class="video-upload-image" v-for="(file,i) in fileList" :key="i"> |
|||
<video :src="file" class="video-upload-image" preload="metadata" |
|||
:controls="false" :show-progress="false" :show-fullscreen-btn="false" |
|||
:show-play-btn="false" :show-center-play-btn="false" :show-loading="false"></video> |
|||
|
|||
<view class="cover-div"> |
|||
<view class="cover-play" @click="playVideo(file)"> |
|||
<image style="width: 66rpx;height: 66rpx;" :src='showImg("/uploads/20241202/44b29b02b77b0a0342bb38c2d9282f49.png")'></image> |
|||
</view> |
|||
<view :class="['delete-container', deleteIndex.includes(i)?'selected':'']" v-if="deleteMode" @click.stop="changeDeleteIndex(i)"> |
|||
<image v-if="!deleteIndex.includes(i)" :src="showImg('/uploads/20241202/b6e64e71e01a6cfd8ade6c639583357b.png')" title="未选中"></image> |
|||
<image v-else :src="showImg('/uploads/20241202/21f56765ccdc74a07fbd3b30a72a87a0.png')" title="选中"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view class="nickname-box" v-else> |
|||
<input v-model="inputValue" type="text" placeholder="请输入内容" /> |
|||
</view> |
|||
|
|||
<!-- 底部保存 --> |
|||
<view class="btn-tao" @click="submit" v-if="!['scenic_ids','sparkle_text','video_list'].includes(valueType)">保存</view> |
|||
|
|||
<view class="bottom-btn" v-if="['scenic_ids','sparkle_text'].includes(valueType)"> |
|||
<view class="btn" @click="goBack()" >取消</view> |
|||
<view class="btn" @click="submit()" >保存</view> |
|||
</view> |
|||
|
|||
<view class="bottom-btn-fixed" v-if="['video_list'].includes(valueType)"> |
|||
<template v-if="!deleteMode"> |
|||
<view class="btn" @click="goBack()" >取消</view> |
|||
<view class="btn" @click="submit()" >保存</view> |
|||
</template> |
|||
<template v-else> |
|||
<view class="btn" @click="changeDeleteMode(false)" >取消删除</view> |
|||
<view class="btn" @click="confirmDelVideo()" >确认删除</view> |
|||
</template> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- 弹框 --> |
|||
<uni-popup ref="popup" type="bottom"> |
|||
<view class="popup-box"> |
|||
<view class="btn-top flex flex-between w-full"> |
|||
<view @click="$refs.popup.close()">取消</view> |
|||
<view @click="selectAll">全选</view> |
|||
</view> |
|||
<view class="popup-content"> |
|||
<view :class="['popup-item','flex-center',selection.value.includes(item.id)?'active':'']" |
|||
v-for="(item,index) in selection.arr" :key="index" @click="changeItemSelect(item)"> |
|||
{{item.name}} |
|||
|
|||
<uni-icons v-show="selection.value.includes(item.id)" class="active-img" type="checkmarkempty" size="23" color="#96684F"></uni-icons> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="popup-btns flex-center" @click="popSubmit"> |
|||
<view>确定</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
import {pathToBase64} from "@/static/js/mmmm-image-tools/index.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
valueType: '', |
|||
inputValue: '', |
|||
inputValueStr: '', |
|||
keyNames: [ |
|||
{key: 'nickname', value:'姓名'},{key: 'mobile', value:'手机号'}, |
|||
{key: 'certificate_number', value: '导游证号码'}, |
|||
{key: 'duration',value: '工作年限'}, |
|||
{key: 'bio',value: '个性签名'}, |
|||
{key: 'scenic_ids',value: '擅长景区'}, |
|||
{key: 'lingo_ids',value: '语言能力'}, |
|||
{key: 'sparkle_text', value: '核心亮点'}, |
|||
{key:'video_list', value: '讲解视频'} |
|||
], |
|||
lingoIds: [], |
|||
scenicIds: [], |
|||
speakText: [], |
|||
|
|||
selectionItem: null, // 景点选中更改的值 |
|||
selection: {arr: [], value: [], valueStr: ''}, //弹窗值 |
|||
|
|||
fileList: [], |
|||
deleteIndex: [], |
|||
|
|||
deleteMode: false, // 视频删除 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.initData(options) |
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
initData (options) { |
|||
uni.setNavigationBarTitle({title: ''}); |
|||
this.valueType = '' |
|||
this.inputValue = '' |
|||
this.inputValueStr = '' |
|||
this.deleteMode = false |
|||
this.fileList = [] |
|||
this.speakText = [] |
|||
if (options.inputValue && options.inputValue!='null' && options.inputValue!='undefined') { |
|||
this.inputValue = options.inputValue |
|||
} |
|||
if (options.valueType) { |
|||
this.valueType = options.valueType |
|||
let titleData = this.keyNames.find(v=>v.key == this.valueType) |
|||
if (titleData) { |
|||
uni.setNavigationBarTitle({title: titleData.value}); |
|||
} |
|||
if (this.valueType == 'lingo_ids') { |
|||
this.initLingoList() |
|||
} |
|||
if (this.valueType == 'scenic_ids') { |
|||
this.initScenicList() |
|||
} |
|||
if (this.valueType == 'sparkle_text') { |
|||
this.initSparkleText() |
|||
} |
|||
if (this.valueType == 'video_list') { |
|||
this.initVideo() |
|||
} |
|||
|
|||
} else { |
|||
this.goBack() |
|||
return |
|||
} |
|||
|
|||
|
|||
|
|||
}, |
|||
// 导游语言列表 |
|||
async initLingoList() { |
|||
|
|||
let res = await this.Post({},'/api/guide/getGuideLingoList') |
|||
let valueArr = [] |
|||
try { |
|||
valueArr = (this.inputValue || '').split(',').map(v=>{return Number(v)}) |
|||
} catch(e) {} |
|||
console.log(valueArr) |
|||
let param = [{arr: res.data||[],name:'语言能力'}] |
|||
this.lingoIds = param.map(v=>{ |
|||
let valueHave = v.arr.filter(x=>valueArr.includes(x.id)) |
|||
return {...v, value: valueHave.map(x=>x.id), valueStr: valueHave.map(x=>x.name).join(',')} |
|||
}) |
|||
try { |
|||
let fileList = uni.getStorageSync('userfileList') |
|||
this.fileList = JSON.parse(fileList) |
|||
console.log(this.fileList) |
|||
} catch(e) { |
|||
this.fileList = [] |
|||
} |
|||
|
|||
}, |
|||
// 景区列表 |
|||
async initScenicList() { |
|||
let res = await this.Post({},'/api/guide/getGuideScenicList') |
|||
let valueArr = [] |
|||
try { |
|||
valueArr = (this.inputValue || '').split(',').map(v=>{return Number(v)}) |
|||
} catch(e) {} |
|||
console.log(valueArr) |
|||
this.scenicIds = (res.data || []).map(v=>{ |
|||
let valueHave = v.arr.filter(x=>valueArr.includes(x.id)) |
|||
return {...v, value: valueHave.map(x=>x.id), valueStr: valueHave.map(x=>x.name).join(',')} |
|||
}) |
|||
}, |
|||
// 亮点 |
|||
initSparkleText () { |
|||
let arr = (this.inputValue||'').split(',').map(v=>{ |
|||
return {text: v} |
|||
}) |
|||
this.speakText = arr |
|||
}, |
|||
// 视频 |
|||
initVideo () { |
|||
try { |
|||
let fileList = uni.getStorageSync('userVideofileList') |
|||
this.fileList = JSON.parse(fileList) |
|||
console.log(this.fileList) |
|||
} catch(e) { |
|||
this.fileList = [] |
|||
} |
|||
}, |
|||
|
|||
addText () { |
|||
this.speakText.push({text:''}) |
|||
}, |
|||
delText (index) { |
|||
this.speakText.splice(index,1) |
|||
}, |
|||
|
|||
|
|||
changeSelection (item) { |
|||
this.selectionItem = item |
|||
this.selection = {arr: item.arr, value: JSON.parse(JSON.stringify(item.value)), valueStr: ''} |
|||
this.$refs.popup.open() |
|||
}, |
|||
// 单个选中 |
|||
changeItemSelect (item) { |
|||
let index = this.selection.value.findIndex(x=>x==item.id) |
|||
if (index>=0) { |
|||
this.selection.value.splice(index,1) |
|||
} else { |
|||
this.selection.value.push(item.id) |
|||
} |
|||
}, |
|||
selectAll() { |
|||
this.selection.value = this.selection.arr.map(x=>x.id) |
|||
}, |
|||
// 选项确定 |
|||
popSubmit () { |
|||
let tempSelect = JSON.parse(JSON.stringify(this.selection)) |
|||
let valueHave = tempSelect.arr.filter(x=>tempSelect.value.includes(x.id)) |
|||
if (['scenic_ids','lingo_ids'].includes(this.valueType)) { |
|||
this.selectionItem.value = tempSelect.value |
|||
this.selectionItem.valueStr = valueHave.map(x=>x.name).join(',') |
|||
} |
|||
this.$refs.popup.close() |
|||
}, |
|||
|
|||
uploadImage() { |
|||
let _this = this |
|||
let url = this.NEWAPIURL |
|||
// #ifdef H5 |
|||
url = '/api' |
|||
// #endif |
|||
url+='/api/Common/upload' |
|||
uni.chooseImage({ |
|||
count:1, |
|||
success: (res) => { |
|||
// for(let i =0 ;i<res.tempFilePaths.length;i++) { |
|||
// let param = {img:res.tempFilePaths[i], tempFile:res.tempFiles[i] } |
|||
// this.fileList.push(param) |
|||
// } |
|||
// console.log(this.fileList) |
|||
const tempFilePaths = res.tempFilePaths; |
|||
const uploadTask = uni.uploadFile({ |
|||
url: url, |
|||
filePath: tempFilePaths[0], |
|||
name: 'file', |
|||
header: {"token": '7e4bd097-8298-4cbe-8c75-535874a5c0e0'}, |
|||
success: (uploadFileRes) => { |
|||
try { |
|||
let res = JSON.parse(uploadFileRes.data) |
|||
if (res.code == 1) { |
|||
_this.fileList.push(res.data.fullurl) |
|||
} |
|||
} catch(e) {} |
|||
|
|||
|
|||
}, |
|||
fail:()=> { |
|||
uni.showToast({ |
|||
title:'上传失败', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
fail:()=> { |
|||
uni.showToast({ |
|||
title:'上传失败', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
uploadVideo() { |
|||
let _this = this |
|||
let url = this.NEWAPIURL |
|||
// #ifdef H5 |
|||
url = '/api' |
|||
// #endif |
|||
url+='/api/Common/upload' |
|||
uni.showLoading() |
|||
uni.chooseVideo({ |
|||
count:1, |
|||
success: (res) => { |
|||
|
|||
const tempFilePath = res.tempFilePath; |
|||
const uploadTask = uni.uploadFile({ |
|||
url: url, |
|||
filePath: tempFilePath, |
|||
name: 'file', |
|||
header: {"token": '7e4bd097-8298-4cbe-8c75-535874a5c0e0'}, |
|||
success: (uploadFileRes) => { |
|||
uni.hideLoading() |
|||
try { |
|||
let res = JSON.parse(uploadFileRes.data) |
|||
if (res.code == 1) { |
|||
_this.fileList.push(res.data.fullurl) |
|||
} |
|||
} catch(e) {} |
|||
|
|||
|
|||
}, |
|||
fail:()=> { |
|||
uni.hideLoading() |
|||
uni.showToast({ |
|||
title:'上传失败', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
fail:()=> { |
|||
uni.hideLoading() |
|||
uni.showToast({ |
|||
title:'上传失败', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
removeFile(index) { |
|||
this.fileList.splice(index,1) |
|||
}, |
|||
|
|||
playVideo (file) { |
|||
let url = encodeURIComponent(file) |
|||
uni.navigateTo({ |
|||
url: `/subPackages/video/index?url=${url}` |
|||
}) |
|||
}, |
|||
changeDeleteMode (value) { |
|||
this.deleteIndex = [] |
|||
this.deleteMode = value |
|||
}, |
|||
changeDeleteIndex (index) { |
|||
let i = this.deleteIndex.findIndex(v=>v==index) |
|||
if (i>=0) { |
|||
this.deleteIndex.splice(i,1) |
|||
} else { |
|||
this.deleteIndex.push(index) |
|||
} |
|||
console.log(this.deleteIndex) |
|||
}, |
|||
|
|||
confirmDelVideo () { |
|||
this.fileList = this.fileList.filter((v,i)=>!this.deleteIndex.includes(i)) |
|||
this.changeDeleteMode(false) |
|||
}, |
|||
|
|||
|
|||
// 校验和选择数据时的数据处理 |
|||
handleSubmitData() { |
|||
// 景点数据处理 |
|||
if (["scenic_ids","lingo_ids"].includes(this.valueType)) { |
|||
let data = [] |
|||
if (this.valueType == 'lingo_ids') { |
|||
data = this.lingoIds |
|||
} |
|||
if (this.valueType == 'scenic_ids') { |
|||
data = this.scenicIds |
|||
} |
|||
|
|||
let value = [] |
|||
data.forEach(v=>{ |
|||
if(Array.isArray(v.value) && v.value.length>0) { |
|||
value.push(v) |
|||
} |
|||
}) |
|||
this.inputValue = value.map(v=>v.value.join(',')).join(',') |
|||
this.inputValueStr = value.map(v=>v.valueStr).join(',') |
|||
console.log(this.inputValue,this.inputValueStr) |
|||
} |
|||
|
|||
if (this.valueType == 'sparkle_text') { |
|||
if (!this.speakText[0].text) { |
|||
uni.showToast({ |
|||
title: '主亮点必填', |
|||
icon:'none' |
|||
}) |
|||
return true |
|||
} |
|||
this.inputValue = this.speakText.filter(v=>v.text) |
|||
this.inputValueStr = this.inputValue.map(v=>v.text).join(',') |
|||
} |
|||
|
|||
if (this.valueType == 'video_list') { |
|||
this.inputValue = JSON.parse(JSON.stringify(this.fileList)) |
|||
this.inputValueStr = '' |
|||
} |
|||
}, |
|||
|
|||
submit() { |
|||
let res = this.handleSubmitData() |
|||
if (res) return |
|||
|
|||
uni.$emit("updateInfo", { |
|||
msgType: 'registerInfo', |
|||
data: { |
|||
valueType: this.valueType, |
|||
inputValue: this.inputValue, |
|||
inputValueStr: this.inputValueStr, |
|||
fileList: this.fileList |
|||
} |
|||
}) |
|||
this.goBack() |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
view { |
|||
box-sizing: content-box; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: white; |
|||
padding-bottom: 50rpx; |
|||
} |
|||
|
|||
.empty-value{ |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.nickname-box { |
|||
display: flex; |
|||
align-items: center; |
|||
background: white; |
|||
margin-bottom: 100rpx; |
|||
font-size: 30rpx; |
|||
height: 70rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
span { |
|||
flex-shrink: 0; |
|||
} |
|||
input { |
|||
flex: 1; |
|||
font-size: 30rpx; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
|
|||
.user-other-info { |
|||
padding:30rpx; |
|||
} |
|||
|
|||
.userinfo-item { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
position: relative; |
|||
span{ |
|||
flex-shrink: 0; |
|||
width: 120rpx; |
|||
} |
|||
&>view{ |
|||
flex: 1; |
|||
padding: 40rpx 10rpx 40rpx 0; |
|||
margin-left: 30rpx; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
} |
|||
} |
|||
.btn-tao { |
|||
width: 333rpx; |
|||
height: 80rpx; |
|||
background: #96684F; |
|||
border-radius: 40rpx; |
|||
text-align: center; |
|||
font-size: 30rpx; |
|||
line-height: 80rpx; |
|||
color: #FFFFFF; |
|||
margin: 68rpx auto 0; |
|||
} |
|||
|
|||
.popup-box { |
|||
border-radius: 0rpx; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
.btn-top{ |
|||
padding: 26rpx 26rpx 0 26rpx; |
|||
color: #999999; |
|||
font-size: 31rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.popup-content{ |
|||
max-height: 500rpx; |
|||
width: 100%; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.popup-item { |
|||
width: 697rpx; |
|||
height: 99rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #12293C; |
|||
margin: auto; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
position: relative; |
|||
} |
|||
.popup-item.active{ |
|||
color: #96684F; |
|||
} |
|||
.popup-item:last-of-type { |
|||
border: none; |
|||
} |
|||
.active-img{ |
|||
position: absolute; |
|||
right: 10rpx; |
|||
|
|||
} |
|||
|
|||
.popup-btns { |
|||
width: 100%; |
|||
height: 153rpx; |
|||
background: #FFFFFF; |
|||
color: #12293C; |
|||
border-top: 13rpx solid #F2F2F2; |
|||
box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25); |
|||
padding: 40rpx 26rpx; |
|||
box-sizing: border-box; |
|||
view{ |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 73.33rpx; |
|||
line-height: 73.33rpx; |
|||
background: #DC2525; |
|||
border-radius: 11rpx; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.del-num{ |
|||
position: absolute; |
|||
top: -5rpx; |
|||
right: -10rpx; |
|||
background: #E5131B; |
|||
color: white; |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
text-align: center; |
|||
line-height: 24rpx; |
|||
font-size: 20rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.language-doc-container{ |
|||
display: flex; |
|||
align-items: flex-start; |
|||
padding-top: 40rpx; |
|||
span{ |
|||
flex-shrink: 0; |
|||
width: 120rpx; |
|||
} |
|||
.img-container{ |
|||
flex:1; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding-left: 20rpx; |
|||
|
|||
.doc-image{ |
|||
width: 141rpx; |
|||
height: 151rpx; |
|||
border-radius: 13rpx; |
|||
margin: 0 40rpx 20rpx 0; |
|||
background: #F1F1F1; |
|||
position: relative; |
|||
} |
|||
.doc-del{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: black; |
|||
color: white; |
|||
position: absolute; |
|||
top: -10rpx; |
|||
right: -10rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.upload-image{ |
|||
width: 43rpx; |
|||
height: 41rpx; |
|||
} |
|||
} |
|||
} |
|||
.userinfo-item .point{ |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
input{ |
|||
font-size: 28rpx; |
|||
} |
|||
.del-icon{ |
|||
padding-left: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.add-btn{ |
|||
width: 343rpx; |
|||
height: 72rpx; |
|||
background: #F1F1F1; |
|||
border-radius: 13rpx; |
|||
line-height: 72rpx; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
margin: 55rpx auto 0; |
|||
} |
|||
|
|||
|
|||
.video-upload-container{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
.upload-image{ |
|||
width: 72rpx; |
|||
height: 68.67rpx; |
|||
} |
|||
.video-upload-image{ |
|||
width: 330rpx; |
|||
height: 330rpx; |
|||
background: #F1F1F1; |
|||
border-radius: 10rpx; |
|||
margin-bottom:20rpx; |
|||
position: relative; |
|||
overflow: hidden; |
|||
|
|||
.cover-div{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
.cover-play{ |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
position: absolute; |
|||
z-index: 5; |
|||
} |
|||
.delete-container{ |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
position: absolute; |
|||
z-index: 10; |
|||
padding: 20rpx; |
|||
image{ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
|
|||
} |
|||
} |
|||
.delete-container.selected{ |
|||
background: rgba(0,0,0,0.8); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.bottom-btn{ |
|||
padding: 66rpx 80rpx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.btn{ |
|||
width: 244rpx; |
|||
height: 81rpx; |
|||
border-radius: 40rpx; |
|||
border: 1px solid #000000; |
|||
line-height: 81rpx; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
font-size: 36rpx; |
|||
color: #010101; |
|||
} |
|||
.btn:last-of-type{ |
|||
background: #96684F; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
.bottom-btn-fixed{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
height: 133rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(102,102,102,0.24); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 92rpx; |
|||
box-sizing: border-box; |
|||
.btn{ |
|||
width: 244rpx; |
|||
height: 81rpx; |
|||
border-radius: 40rpx; |
|||
border: 1px solid #000000; |
|||
line-height: 81rpx; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
font-size: 36rpx; |
|||
color: #010101; |
|||
} |
|||
.btn:last-of-type{ |
|||
background: #96684F; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,154 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<image src="https://static.ticket.sz-trip.com/tongli/images/user/logout.png" class="logoutImg"></image> |
|||
<view class="title">用户注销协议</view> |
|||
<view class="text" v-html="formateRichText(content)"></view> |
|||
|
|||
<footer> |
|||
<view> |
|||
<!-- <view class="dui-box" :style="{backgroundImage: isTrue ? 'url(https://static.ticket.sz-trip.com/tongli/images/user/duis.png)' : '', |
|||
border: isTrue ? '' : '1rpx solid #515150'}" |
|||
@click="isTrue = !isTrue"></view> |
|||
您已经同意《用户注销协议》 --> |
|||
</view> |
|||
|
|||
<view class="flex-between"> |
|||
<view class="btn flex-center" @click="goBack">取消</view> |
|||
<view class="btn flex-center" v-if="time != 0">查看协议({{time}}s)</view> |
|||
<view class="btn btns flex-center" v-else @click="confirmLogout">确认注销</view> |
|||
</view> |
|||
</footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
content: '', |
|||
isTrue: false, |
|||
time: 8 |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.Post({ |
|||
id: 10274 |
|||
},'/api/article/getArticleById').then(res => { |
|||
if(res.code == 1) { |
|||
this.content = res.data.content |
|||
var countdown = setInterval(() => { |
|||
this.time -- |
|||
if(this.time == 0) { |
|||
clearInterval(countdown) |
|||
} |
|||
},1000) |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
confirmLogout() { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确认注销账号？', |
|||
success: successRes => { |
|||
if (successRes.confirm) { |
|||
this.Post({ |
|||
protocol: 1 |
|||
},'/api/user/user_logout').then(res => { |
|||
if(res.code == 1) { |
|||
uni.showToast({ |
|||
title: '注销成功', |
|||
icon: 'none' |
|||
}) |
|||
this.$store.commit('changeUserInfo', {}) |
|||
setTimeout(() => { |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}) |
|||
},1000) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background-color: #fff; |
|||
padding: 88rpx 0 250rpx; |
|||
} |
|||
|
|||
.logoutImg { |
|||
display: block; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 40rpx; |
|||
color: #000000; |
|||
margin: 60rpx auto 50rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.text { |
|||
padding: 0 40rpx; |
|||
} |
|||
|
|||
footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 0 68rpx; |
|||
width: 100%; |
|||
|
|||
.dui-box { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-right: 19rpx; |
|||
background-size: 100% 100%; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
&>view:first-child { |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
&>view:last-child { |
|||
margin: 53rpx 0 67rpx; |
|||
|
|||
.btn { |
|||
width: 267rpx; |
|||
height: 80rpx; |
|||
background: #BFBFBF; |
|||
border-radius: 40rpx; |
|||
font-weight: 500; |
|||
font-size: 36rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
&>view:nth-child(1) { |
|||
border: 3rpx solid #C3282E; |
|||
font-weight: 500; |
|||
color: #C3282E; |
|||
background: #fff; |
|||
} |
|||
|
|||
.btns { |
|||
background: #C3282E; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,207 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="list-forms"> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">姓名</view> |
|||
<view class="list-item-input"><input type="text" v-model="username" placeholder="请输入姓名" /></view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">手机号</view> |
|||
<view class="list-item-input"><input type="number" v-model="mobile" placeholder="请输入手机号" |
|||
maxlength="11" /></view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">身份证号</view> |
|||
<view class="list-item-input"><input type="text" v-model="idNumber" placeholder="请输入证件号" /></view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">设为默认</view> |
|||
<view class="list-item-switch"> |
|||
<switch style="transform:scale(0.7)" :checked="idDefault" @change="switchChange" color="#96684F"/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="btn" @click="submit">保存</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
username: '', |
|||
mobile: '', |
|||
idNumber: '', |
|||
|
|||
show: false, |
|||
|
|||
document_type: 'DAM01001', |
|||
id: '', |
|||
type: '', |
|||
idDefault: false, |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
if (option) { |
|||
this.id = option.id |
|||
} |
|||
if(option && option.type){ |
|||
this.type = option.type |
|||
} |
|||
}, |
|||
onShow() { |
|||
if (this.id) { |
|||
this.getDetail() |
|||
} |
|||
uni.setNavigationBarTitle({ |
|||
title: this.type == 'edit'?"修改出行人":"添加出行人" |
|||
}) |
|||
// var pages = getCurrentPages();//获取页面 |
|||
// var beforePage = pages[pages.length - 2];//上个页面 |
|||
// if(beforePage.route == 'subPackages/scenic/scenicOrder' || beforePage.route == 'subPackages/venue/venueOrder'){ |
|||
// uni.setStorageSync('route', 1) |
|||
// } |
|||
}, |
|||
methods: { |
|||
switchChange(e){ |
|||
this.idDefault = e.detail.value |
|||
}, |
|||
getDetail() { |
|||
this.Post({ |
|||
id: this.id |
|||
}, '/api/user/contactDetail').then(res => { |
|||
if (res.code === 1) { |
|||
res = res.data |
|||
if (res && res.id > 0) { |
|||
this.username = res.name |
|||
this.mobile = res.tel |
|||
this.idNumber = res.id_number |
|||
this.idDefault = res.is_default == 1 ? true : false |
|||
this.idcardType = res.idcard_type |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 提交 |
|||
submit() { |
|||
this.username = this.username.trim() |
|||
this.mobile = this.mobile.trim() |
|||
this.idNumber = this.idNumber.trim() |
|||
if (this.username.length < 1) { |
|||
uni.showToast({ |
|||
title: '请输入姓名', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!this.IsTel(this.mobile)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!this.idCardNumber(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的身份证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.Post({ |
|||
id: this.type == 'edit'?this.id:'', |
|||
id_number: this.idNumber, |
|||
name: this.username, |
|||
tel: this.mobile, |
|||
is_default: this.idDefault ? '1' : '0', |
|||
}, this.type=='edit'?'/api/user/editContact':'/api/user/addContact').then(res => { |
|||
if (res.code == 1) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '成功', |
|||
showCancel: false, |
|||
success: res => { |
|||
if (res.confirm) { |
|||
uni.navigateBack({}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.bg { |
|||
min-height: calc(100vh - 44px); |
|||
background-color: #FFFFFF; |
|||
position: relative; |
|||
} |
|||
|
|||
.list-forms { |
|||
padding: 0 33rpx; |
|||
|
|||
.list-item { |
|||
display: flex; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 30rpx 0; |
|||
height: 60rpx; |
|||
box-sizing: content-box; |
|||
align-items: center; |
|||
|
|||
.list-item-title { |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.list-item-switch { |
|||
display: flex; |
|||
flex: 1; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.list-item-input { |
|||
flex: 1; |
|||
|
|||
input { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
background-color: transparent; |
|||
line-height: 34rpx; |
|||
font-size: 28rpx; |
|||
text-align: right; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
input::placeholder { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: #96684F; |
|||
border-radius: 7rpx; |
|||
font-weight: 500; |
|||
font-size: 36rpx; |
|||
color: #FFFFFF; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
position: fixed; |
|||
bottom: 53rpx; |
|||
left: 26rpx; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="text" v-html="formateRichText(content)"> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
content:'' |
|||
}; |
|||
}, |
|||
onLoad(option){ |
|||
this.Post({ |
|||
id:option.id |
|||
},'/api/article/getArticleById').then(res => { |
|||
this.content = res.data.content |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.text{ |
|||
padding: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,407 @@ |
|||
<template> |
|||
<view v-if="info"> |
|||
<view class="user-other-info"> |
|||
<div class="info-avatar-top"> |
|||
<span>头像</span> |
|||
<view @click="uploadImg()"> |
|||
<image :src="showImg(info.avatar)" mode="aspectFill" |
|||
style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image> |
|||
</view> |
|||
</div> |
|||
<navigator url="/subPackages/user/changeNickname" tag="view" class="userinfo-item"> |
|||
<span>姓名</span> |
|||
<view>{{nickname}}</view> |
|||
</navigator> |
|||
<view class="userinfo-item" @click="showSexSelect = true"> |
|||
<span>性别</span> |
|||
<view @click="$refs.popup.open()">{{gender == 1 ? '男' : (gender == 2 ? '女' : '保密')}}</view> |
|||
</view> |
|||
<view class="userinfo-item"> |
|||
<span>手机号</span> |
|||
<view>{{info.mobile}}</view> |
|||
</view> |
|||
<view class="userinfo-item"> |
|||
<span>生日</span> |
|||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> |
|||
<view class="uni-input">{{birthday}}</view> |
|||
</picker> |
|||
</view> |
|||
<navigator url="/subPackages/user/logout" tag="view" class="userinfo-item"> |
|||
<span>注销账号</span> |
|||
<i>注销后账号无法恢复，请谨慎操作</i> |
|||
</navigator> |
|||
<view class="btn-tao" @click="submit">保存</view> |
|||
</view> |
|||
|
|||
<!-- 性别弹框 --> |
|||
<uni-popup ref="popup" type="bottom"> |
|||
<view class="popup-box"> |
|||
<view class="popup-item flex-center" v-for="(item,index) in sexes" :key="index" @click="changesex(index)">{{item.text}}</view> |
|||
<view class="popup-items flex-center" @click="$refs.popup.close()">取消</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {pathToBase64} from "@/static/js/mmmm-image-tools/index.js" |
|||
export default { |
|||
name: "Profile", |
|||
data() { |
|||
const currentDate = this.getDate({ |
|||
format: true |
|||
}) |
|||
return { |
|||
date: currentDate, |
|||
info: null, |
|||
showSexSelect: false, |
|||
sexes: [{ |
|||
value: '1', |
|||
text: '男' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
text: '女' |
|||
}, |
|||
{ |
|||
value: '0', |
|||
text: '保密' |
|||
} |
|||
], |
|||
today: null, |
|||
showCropper: false, |
|||
nickname: '', |
|||
gender: '', |
|||
birthday: '', |
|||
email: '', |
|||
fileList1: [], |
|||
startDate: '1900-1-1', |
|||
endDate: '2050-1-1' |
|||
} |
|||
}, |
|||
onShow() { |
|||
console.log(this.$store.state.user.userInfo,uni.getStorageSync('userInfo')) |
|||
this.getList() |
|||
}, |
|||
computed: { |
|||
// startDate() { |
|||
// return this.getDate('start'); |
|||
// }, |
|||
// endDate() { |
|||
// return this.getDate('end'); |
|||
// } |
|||
}, |
|||
methods: { |
|||
getFile(e) { |
|||
console.log(e) |
|||
}, |
|||
getList() { |
|||
let today = new Date(); |
|||
today = today.getFullYear() + "/" + (today.getMonth() + 1) + "/" + today.getDate(); |
|||
this.today = today; |
|||
this.Post({}, "/api/user/userInfo").then(res => { |
|||
if (!res.data.birthday) { |
|||
let date = new Date(); |
|||
res.data.birthday = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date |
|||
.getDate(); |
|||
} |
|||
this.info = res.data; |
|||
this.nickname = this.info.nickname |
|||
this.email = this.info.email |
|||
this.birthday = this.info.birthday |
|||
this.gender = this.info.gender |
|||
this.info.token = JSON.parse(uni.getStorageSync('userInfo')).token || this.$store.state.user.userInfo.token |
|||
console.log(this.info) |
|||
this.$store.commit('changeUserInfo', this.info) |
|||
}) |
|||
}, |
|||
uploadImg() { |
|||
uni.chooseImage({ |
|||
success: (chooseImageRes) => { |
|||
const tempFilePaths = chooseImageRes.tempFilePaths; |
|||
// // #ifdef MP-WEIXIN |
|||
// uni.getFileSystemManager().readFile({ |
|||
// filePath: tempFilePaths[0], |
|||
// encoding: 'base64', |
|||
// success: res => { |
|||
// this.Post({ |
|||
// method: 'POST', |
|||
// base64: 'data:image/png;base64,' + res.data |
|||
// }, '/api/common/base64').then(res => { |
|||
// if (res.data) { |
|||
// this.Post({ |
|||
// avatar: res.data |
|||
// }, '/api/user/profile').then(res => { |
|||
// uni.showModal({ |
|||
// title: '提示', |
|||
// content: res.msg, |
|||
// showCancel: false, |
|||
// success: res => { |
|||
// if (res.confirm) { |
|||
// this.getList() |
|||
// } |
|||
// } |
|||
// }) |
|||
// }) |
|||
// } |
|||
// }) |
|||
// } |
|||
// }) |
|||
// // #endif |
|||
|
|||
pathToBase64(tempFilePaths[0]).then(base64 => { |
|||
this.Post({ |
|||
method: 'POST', |
|||
base64: base64 |
|||
}, '/api/common/base64').then(res => { |
|||
if (res.data) { |
|||
this.Post({ |
|||
avatar: res.data |
|||
}, '/api/user/profile').then(res => { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.getList() |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
//生日 |
|||
bindDateChange: function(e) { |
|||
this.birthday = e.detail.value |
|||
}, |
|||
getDate(type) { |
|||
const date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
|
|||
if (type === 'start') { |
|||
year = year - 60; |
|||
} else if (type === 'end') { |
|||
year = year + 2; |
|||
} |
|||
month = month > 9 ? month : '0' + month; |
|||
day = day > 9 ? day : '0' + day; |
|||
return `${year}/${month}/${day}`; |
|||
}, |
|||
changesex(index) { |
|||
this.gender = this.sexes[index].value |
|||
this.$refs.popup.close() |
|||
}, |
|||
submit() { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确认修改您的信息？', |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.Post({ |
|||
nickname: this.nickname, |
|||
gender: this.gender, |
|||
birthday: this.birthday |
|||
}, '/api/user/profile').then(res => { |
|||
console.log(res) |
|||
if (res.code == 1) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.getList() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
view { |
|||
box-sizing: content-box; |
|||
} |
|||
.info-avatar-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 30rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 40rpx 0; |
|||
height: 48rpx; |
|||
color: #333; |
|||
align-items: center; |
|||
} |
|||
.info-avatar-top view{ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.info-avatar-top view:after{ |
|||
content: ""; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 6rpx; |
|||
background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png'); |
|||
background-size: 100% 100%; |
|||
} |
|||
.info-avatar-top img { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.change-avatar-btn { |
|||
color: #FFF; |
|||
width: 220rpx; |
|||
margin: 0 auto; |
|||
line-height: 70rpx; |
|||
border-radius: 20rpx; |
|||
background: #4C93FF; |
|||
position: relative; |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
.change-avatar-btn input { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.user-other-info { |
|||
margin: 30rpx; |
|||
} |
|||
|
|||
.userinfo-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 30rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 40rpx 30rpx 40rpx 0; |
|||
height: 48rpx; |
|||
color: #333; |
|||
position: relative; |
|||
} |
|||
|
|||
.info-avatar-top span { |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.userinfo-item span { |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
flex-shrink: 0; |
|||
color: #000; |
|||
} |
|||
|
|||
.userinfo-item i { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.userinfo-item { |
|||
& view::after { |
|||
content: ""; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 6rpx; |
|||
background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png'); |
|||
background-size: 100% 100%; |
|||
position: absolute; |
|||
right: 0; |
|||
margin: auto; |
|||
top: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.birthday-box { |
|||
text-align: right; |
|||
} |
|||
|
|||
.cropper { |
|||
width: auto; |
|||
height: 100%; |
|||
} |
|||
|
|||
.cropper-content { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.dialog-footer .change-avatar-btn { |
|||
position: fixed; |
|||
text-align: center; |
|||
bottom: 80rpx; |
|||
left: 50%; |
|||
margin-left: -110rpx; |
|||
} |
|||
|
|||
.btn-tao { |
|||
text-align: center; |
|||
font-size: 30rpx; |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: #C3282E; |
|||
border-radius: 40rpx; |
|||
line-height: 80rpx; |
|||
color: #FFFFFF; |
|||
position: fixed; |
|||
left: 26rpx; |
|||
bottom: 100rpx; |
|||
} |
|||
|
|||
.popup-box { |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
|
|||
.popup-item { |
|||
width: 697rpx; |
|||
height: 99rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #12293C; |
|||
margin: auto; |
|||
} |
|||
.popup-item:nth-child(2) { |
|||
border: none; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
border-top: 1rpx solid #D8D8D8; |
|||
} |
|||
|
|||
.popup-items { |
|||
width: 100%; |
|||
height: 99rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #12293C; |
|||
border-top: 13rpx solid #F2F2F2; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,649 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="header-tip">请填写您的信息，稍后平台工作人员会电话联系您~</view> |
|||
<view class="user-other-info"> |
|||
<view class="info-title">·基础信息</view> |
|||
<div class="info-avatar-top"> |
|||
<span>头像</span> |
|||
<view @click="uploadAvator()"> |
|||
<image v-if="info.avatar" :src="info.avatar" mode="aspectFill" |
|||
style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image> |
|||
<div v-else style="width: 80rpx;height: 80rpx;border-radius: 50%;background: #0B898E;"></div> |
|||
</view> |
|||
</div> |
|||
<view class="userinfo-item" @click="changeValue('nickname')"> |
|||
<span>姓名</span> |
|||
<view class="text-overflow" v-if="info.nickname">{{info.nickname}}</view> |
|||
<view v-else class="empty-value" >请填写</view> |
|||
</view> |
|||
<view class="userinfo-item" @click="selectSex"> |
|||
<span>性别</span> |
|||
<view class="text-overflow" v-if="info.genderStr">{{info.genderStr}}</view> |
|||
<view v-else class="empty-value" >请选择</view> |
|||
</view> |
|||
<view class="userinfo-item" @click="changeValue('mobile')"> |
|||
<span>手机号</span> |
|||
<view v-if="info.mobile">{{info.mobile}}</view> |
|||
<view v-else class="empty-value" >请填写</view> |
|||
</view> |
|||
|
|||
<view class="info-title" style="margin-top: 46rpx;">·工作相关</view> |
|||
<view class="userinfo-item" @click="selectRank"> |
|||
<span>导游等级</span> |
|||
<view v-if="info.group_idStr">{{info.group_idStr}}</view> |
|||
<view v-else class="empty-value">请选择</view> |
|||
</view> |
|||
<view class="userinfo-item" @click="changeValue('certificate_number')"> |
|||
<span>导游证号</span> |
|||
<view class="text-overflow" v-if="info.certificate_number">{{info.certificate_number}}</view> |
|||
<view v-else class="empty-value">请填写</view> |
|||
</view> |
|||
<view class="userinfo-item" @click="changeValue('duration')"> |
|||
<span>工作年限</span> |
|||
<view class="text-overflow" v-if="info.duration">{{info.duration}}</view> |
|||
<view v-else class="empty-value">请填写</view> |
|||
</view> |
|||
<view class="userinfo-item" @click="changeValue('lingo_ids')"> |
|||
<span>语言能力</span> |
|||
<view class="text-overflow" v-if="info.lingo_idsStr">{{info.lingo_idsStr}}</view> |
|||
<view v-else class="empty-value">请选择</view> |
|||
</view> |
|||
<view class="userinfo-item" @click="changeValue('scenic_ids')"> |
|||
<span>擅长景区</span> |
|||
<view class="text-overflow" v-if="info.scenic_idsStr">{{info.scenic_idsStr}}</view> |
|||
<view v-else class="empty-value">请选择</view> |
|||
</view> |
|||
<view class="userinfo-item" @click="changeValue('bio')"> |
|||
<span>个性签名</span> |
|||
<view class="text-overflowRows" v-if="info.bio">{{info.bio}}</view> |
|||
<view v-else class="empty-value">请填写</view> |
|||
</view> |
|||
<view class="userinfo-item" @click="changeValue('sparkle_text')"> |
|||
<span>核心亮点</span> |
|||
<view class="text-overflow" v-if="info.sparkle_textStr">{{info.sparkle_textStr}}</view> |
|||
<view v-else class="empty-value">请填写</view> |
|||
</view> |
|||
|
|||
<view class="info-title" style="margin-top: 46rpx;">·讲解视频</view> |
|||
<view class="userinfo-item" @click="changeValue('video_list')"> |
|||
<span>讲解视频</span> |
|||
<view class="text-overflow" v-if="info.video_list.length>0">{{info.video_list.length}}</view> |
|||
<view v-else class="empty-value">请选择</view> |
|||
</view> |
|||
|
|||
<view class="btn-tao" @click="submit" v-if="canEdit">我已填好</view> |
|||
</view> |
|||
|
|||
<uni-popup ref="popup" type="bottom"> |
|||
<view class="popup-box"> |
|||
<view class="popup-content"> |
|||
<view :class="['popup-item','flex-center',popData.value==item.id?'active':'']" |
|||
v-for="(item,index) in popData.selection" :key="index" @click="changeItemSelect(item)"> |
|||
{{item.name}} |
|||
<uni-icons v-show="popData.value==item.id" class="active-img" type="checkmarkempty" size="23" color="#96684F"></uni-icons> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="popup-btns flex-center" @click="popSubmit"> |
|||
<view>确定</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {pathToBase64} from "@/static/js/mmmm-image-tools/index.js" |
|||
export default { |
|||
data() { |
|||
|
|||
return { |
|||
canEdit: false, |
|||
status: null, // 2 重新修改 |
|||
info: { |
|||
nickname: '',mobile:'',avatar: '', |
|||
gender: null, genderStr: '', |
|||
group_id: null,group_idStr: '', |
|||
certificate_number: '',duration:'', |
|||
lingo_ids: null, lingo_idsStr:'',lingo_idsFileList: [], |
|||
scenic_ids: null, scenic_idsStr:'', |
|||
bio:'', video_list: [], |
|||
sparkle_text: [], |
|||
sparkle_textStr: '', |
|||
}, |
|||
|
|||
groupIds: [], // 导游等级 |
|||
|
|||
popData: { |
|||
selection: [], |
|||
value: null, |
|||
valueStr: '', |
|||
keyName: '', |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
uni.$on("updateInfo",this.updateInfo) |
|||
}, |
|||
beforeUnmount () { |
|||
console.log('触发off') |
|||
uni.$off("updateInfo",this.updateInfo) |
|||
}, |
|||
beforeDestroy () { |
|||
console.log('触发off') |
|||
uni.$off("updateInfo",this.updateInfo) |
|||
}, |
|||
|
|||
onLoad () { |
|||
this.getUserInfo() |
|||
this.initSelect() |
|||
}, |
|||
methods: { |
|||
//获取导游信息 |
|||
getUserInfo () { |
|||
this.canEdit = false |
|||
this.Post({}, '/api/guide/getGuideDetails').then(res => { |
|||
let resData = res.data |
|||
if (!resData) { |
|||
this.canEdit = true |
|||
// 未注册过 |
|||
this.info = { |
|||
nickname: '',mobile:'',avatar: '', |
|||
gender: null, genderStr: '', |
|||
group_id: null,group_idStr: '', |
|||
certificate_number: '',duration:'', |
|||
lingo_ids: null, lingo_idsStr:'',lingo_idsFileList: [], |
|||
scenic_ids: null, scenic_idsStr:'', |
|||
bio:'', video_list: [], |
|||
sparkle_text: [], |
|||
sparkle_textStr: '', |
|||
} |
|||
return |
|||
} |
|||
if (resData.status == 2) { |
|||
this.canEdit = true |
|||
this.status = 2 |
|||
} |
|||
|
|||
let lingo_idsFileList = [] |
|||
let video_list = [] |
|||
try { |
|||
lingo_idsFileList = (resData.lingo_image_list || '').split(',').filter(v=>v) |
|||
video_list = (resData.video_list || '').split(',').filter(v=>v) |
|||
} catch(e){} |
|||
|
|||
this.info = { |
|||
id: resData.id,avatar: resData.avatar, |
|||
nickname: resData.nickname, mobile: resData.mobile, |
|||
certificate_number: resData.certificate_number, |
|||
duration:resData.duration,bio:resData.bio, |
|||
gender: resData.gender, genderStr: resData.gender == 1?'男':'女', |
|||
group_id: resData.group_id,group_idStr: resData.group_data.name, |
|||
|
|||
lingo_ids: resData.lingo_data.lingo_id, |
|||
lingo_idsStr:resData.lingo_data.name, |
|||
lingo_idsFileList: lingo_idsFileList, |
|||
|
|||
scenic_ids: resData.scenic_data.scenic_id, |
|||
scenic_idsStr:resData.scenic_data.name, |
|||
|
|||
sparkle_text: (resData.sparkle_text || []), |
|||
sparkle_textStr:(resData.sparkle_text || []).map(v=>v.text).join(','), |
|||
|
|||
video_list: video_list, |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
initSelect () { |
|||
// 获取导游等级 |
|||
this.Post({}, '/api/guide/getGuideGroupList').then(res => { |
|||
this.groupIds = res.data |
|||
}) |
|||
}, |
|||
|
|||
// 上传头像 |
|||
uploadAvator () { |
|||
if (!this.canEdit) return |
|||
|
|||
let _this = this |
|||
let url = this.NEWAPIURL |
|||
// #ifdef H5 |
|||
url = '/api' |
|||
// #endif |
|||
url+='/api/Common/upload' |
|||
uni.chooseImage({ |
|||
count:1, |
|||
success: (res) => { |
|||
const tempFilePaths = res.tempFilePaths; |
|||
const uploadTask = uni.uploadFile({ |
|||
url: url, |
|||
filePath: tempFilePaths[0], |
|||
name: 'file', |
|||
header: {"token": '7e4bd097-8298-4cbe-8c75-535874a5c0e0'}, |
|||
success: (uploadFileRes) => { |
|||
try { |
|||
let res = JSON.parse(uploadFileRes.data) |
|||
if (res.code == 1) { |
|||
_this.info.avatar = res.data.fullurl |
|||
} |
|||
} catch(e) {} |
|||
|
|||
|
|||
}, |
|||
fail:()=> { |
|||
uni.showToast({ |
|||
title:'上传失败', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
fail:()=> { |
|||
uni.showToast({ |
|||
title:'上传失败', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
selectSex () { |
|||
if (!this.canEdit) return |
|||
this.popData = { |
|||
selection: [{id: 1, name: "男"}, {id: 2,name:"女"}], |
|||
value: this.info.gender, |
|||
valueStr: this.info.genderStr, |
|||
keyName:"gender" |
|||
} |
|||
this.$refs.popup.open() |
|||
|
|||
}, |
|||
selectRank () { |
|||
if (!this.canEdit) return |
|||
this.popData = { |
|||
selection: this.groupIds, |
|||
value: this.info.group_id, |
|||
valueStr: this.info.group_idStr, |
|||
keyName:"group_id" |
|||
} |
|||
this.$refs.popup.open() |
|||
}, |
|||
|
|||
// 单个选中 |
|||
changeItemSelect (item) { |
|||
if (this.popData.value == item.id) { |
|||
this.popData.value = null |
|||
} else { |
|||
this.popData.value = item.id |
|||
this.popData.valueStr = item.name |
|||
} |
|||
}, |
|||
popSubmit () { |
|||
this.info[this.popData.keyName] = this.popData.value |
|||
this.info[this.popData.keyName+"Str"] = this.popData.valueStr |
|||
this.$refs.popup.close() |
|||
}, |
|||
|
|||
// 跳转修改数据 |
|||
changeValue(valueType) { |
|||
if (!this.canEdit) return |
|||
let inputValue = this.info[valueType] |
|||
if (valueType == "lingo_ids") { |
|||
uni.setStorageSync("userfileList",JSON.stringify(this.info.lingo_idsFileList)) |
|||
} |
|||
if (valueType == 'video_list') { |
|||
uni.setStorageSync("userVideofileList",JSON.stringify(this.info.video_list)) |
|||
} |
|||
if (valueType == 'sparkle_text') { |
|||
inputValue = this.info.sparkle_textStr |
|||
} |
|||
|
|||
uni.navigateTo({ |
|||
url: `/subPackages/user/infoFilling?valueType=${valueType}&inputValue=${inputValue}` |
|||
}) |
|||
}, |
|||
|
|||
// 接受回调 |
|||
updateInfo(data) { |
|||
if (data.msgType == 'registerInfo') { |
|||
console.log(data.data) |
|||
let valueType = data.data.valueType |
|||
let valueTypeStr = valueType + 'Str' |
|||
let fileListStr = valueType+'FileList' |
|||
let inputValue = data.data.inputValue |
|||
let inputValueStr = data.data.inputValueStr |
|||
let fileList = data.data.fileList |
|||
this.info[valueType] = inputValue |
|||
if (this.info[valueTypeStr] !== undefined && inputValueStr) { |
|||
this.info[valueTypeStr] = inputValueStr |
|||
} |
|||
if (this.info[fileListStr] && fileList) { |
|||
this.info[fileListStr] = fileList |
|||
} |
|||
|
|||
console.log(this.info) |
|||
|
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
submit() { |
|||
// 校验 |
|||
if (!this.info.nickname) { |
|||
uni.showToast({title:"请输入姓名",icon:"none"}) |
|||
return |
|||
} |
|||
if(!this.info.avatar) { |
|||
uni.showToast({title:"请上传头像",icon:"none"}) |
|||
return |
|||
} |
|||
if (!this.info.gender) { |
|||
uni.showToast({title:"请选择性别",icon:"none"}) |
|||
return |
|||
} |
|||
if (!this.info.mobile || !this.IsTel(this.info.mobile)) { |
|||
uni.showToast({title: "请输入正确的手机号码",icon: 'none'}) |
|||
return; |
|||
} |
|||
if (!this.info.group_id) { |
|||
uni.showToast({title: "请选择导游等级",icon: 'none'}) |
|||
return; |
|||
} |
|||
if (!this.info.certificate_number) { |
|||
uni.showToast({title: "请输入导游证号",icon: 'none'}) |
|||
return; |
|||
} |
|||
if (!this.info.duration) { |
|||
uni.showToast({title: "请输入工作年限",icon: 'none'}) |
|||
return; |
|||
} |
|||
if (!this.info.lingo_ids || this.info.lingo_idsFileList.length<=0) { |
|||
uni.showToast({title: "请选择语言能力并上传证明材料",icon: 'none'}) |
|||
return; |
|||
} |
|||
if (!this.info.scenic_ids) { |
|||
uni.showToast({title: "请选择擅长景区",icon: 'none'}) |
|||
return; |
|||
} |
|||
if (!this.info.bio) { |
|||
uni.showToast({title: "请输入个性签名",icon: 'none'}) |
|||
return; |
|||
} |
|||
if (this.info.sparkle_text.length<=0) { |
|||
uni.showToast({title: "请输入核心亮点",icon: 'none'}) |
|||
return; |
|||
} |
|||
console.log(this.info) |
|||
|
|||
let param = { |
|||
...this.info, |
|||
lingo_image_list: this.info.lingo_idsFileList.join(','), |
|||
video_list: this.info.video_list.join(','), |
|||
sparkle_text: JSON.stringify(this.info.sparkle_text) |
|||
} |
|||
let api = "/api/guide/applyGuide" |
|||
if (this.status == 2) api = "/api/guide/updateGuideDetails" |
|||
|
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确认修改您的信息？', |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.Post(param, api).then(res => { |
|||
console.log(res) |
|||
if (res.code == 1) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.getUserInfo() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
view { |
|||
box-sizing: content-box; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: white; |
|||
padding-bottom: 50rpx; |
|||
} |
|||
.header-tip{ |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
color: #585858; |
|||
padding: 33rpx 0; |
|||
text-align: center; |
|||
} |
|||
.empty-value{ |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.info-avatar-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 28rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 40rpx 0; |
|||
height: 48rpx; |
|||
color: #333; |
|||
align-items: center; |
|||
} |
|||
.info-avatar-top view{ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.info-avatar-top view:after{ |
|||
content: ""; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 6rpx; |
|||
background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png'); |
|||
background-size: 100% 100%; |
|||
} |
|||
.info-avatar-top img { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.change-avatar-btn { |
|||
color: #FFF; |
|||
width: 220rpx; |
|||
margin: 0 auto; |
|||
line-height: 70rpx; |
|||
border-radius: 20rpx; |
|||
background: #4C93FF; |
|||
position: relative; |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
.change-avatar-btn input { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.user-other-info { |
|||
margin:0 30rpx; |
|||
.info-title{ |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.userinfo-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 40rpx 30rpx 40rpx 0; |
|||
height: 48rpx; |
|||
color: #333; |
|||
position: relative; |
|||
} |
|||
|
|||
.info-avatar-top span { |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.userinfo-item span { |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
flex-shrink: 0; |
|||
color: #000; |
|||
width: 200rpx; |
|||
} |
|||
|
|||
.userinfo-item i { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.userinfo-item { |
|||
& view::after { |
|||
content: ""; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-left: 6rpx; |
|||
background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png'); |
|||
background-size: 100% 100%; |
|||
position: absolute; |
|||
right: 0; |
|||
margin: auto; |
|||
top: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.birthday-box { |
|||
text-align: right; |
|||
} |
|||
|
|||
.cropper { |
|||
width: auto; |
|||
height: 100%; |
|||
} |
|||
|
|||
.cropper-content { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.dialog-footer .change-avatar-btn { |
|||
position: fixed; |
|||
text-align: center; |
|||
bottom: 80rpx; |
|||
left: 50%; |
|||
margin-left: -110rpx; |
|||
} |
|||
|
|||
.btn-tao { |
|||
text-align: center; |
|||
font-size: 30rpx; |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: #96684F; |
|||
border-radius: 40rpx; |
|||
line-height: 80rpx; |
|||
color: #FFFFFF; |
|||
margin-top: 55rpx; |
|||
} |
|||
|
|||
.popup-box { |
|||
border-radius: 0rpx; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
.btn-top{ |
|||
padding: 26rpx 26rpx 0 26rpx; |
|||
color: #999999; |
|||
font-size: 31rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.popup-content{ |
|||
max-height: 500rpx; |
|||
width: 100%; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.popup-item { |
|||
width: 697rpx; |
|||
height: 99rpx; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #12293C; |
|||
margin: auto; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
position: relative; |
|||
} |
|||
.popup-item.active{ |
|||
color: #96684F; |
|||
} |
|||
.popup-item:last-of-type { |
|||
border: none; |
|||
} |
|||
.active-img{ |
|||
position: absolute; |
|||
right: 10rpx; |
|||
|
|||
} |
|||
|
|||
.popup-btns { |
|||
width: 100%; |
|||
height: 153rpx; |
|||
background: #FFFFFF; |
|||
color: #12293C; |
|||
border-top: 13rpx solid #F2F2F2; |
|||
box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25); |
|||
padding: 40rpx 26rpx; |
|||
box-sizing: border-box; |
|||
view{ |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 73.33rpx; |
|||
line-height: 73.33rpx; |
|||
background: #DC2525; |
|||
border-radius: 11rpx; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,284 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view > |
|||
<view class="item" v-for="(item,index) in travelList" :key="index"> |
|||
<view class="name"> |
|||
<view class=""> |
|||
{{item.name}} |
|||
</view> |
|||
<view class=""> |
|||
{{item.tel}} |
|||
<span v-if="item.is_default==1">默认</span> |
|||
</view> |
|||
</view> |
|||
<view class="idcard"> |
|||
<view class=""> |
|||
{{item.document_type_text}}: |
|||
</view> |
|||
<view class=""> |
|||
{{item.id_number}} |
|||
</view> |
|||
</view> |
|||
<view class="item-btn"> |
|||
<view class="choice"> |
|||
<!-- <image src="https://static.ticket.sz-trip.com/yandu/images/user/dui.png" mode="aspectFill" |
|||
v-if="item.is_default==1"> |
|||
</image> |
|||
<view class="yuan" v-else @click.stop="defaultC(item)"> |
|||
|
|||
</view> |
|||
<view class=""> |
|||
默认出行人 |
|||
</view> --> |
|||
</view> |
|||
<view class="btn-list"> |
|||
<view class="btn-item" @click.stop="edit(item.id)"> |
|||
修改 |
|||
</view> |
|||
<view class="btn-item" @click.stop="delet(item)"> |
|||
删除 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="no-data" v-if="travelList.length<=0"> |
|||
<image :src="showImg('/uploads/20241203/6398b49184a0b2be61b92ad65e0f86cd.png')"></image> |
|||
<view>暂无常用出行人赶快去添加吧~</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="btn-box"> |
|||
<navigator url="/subPackages/user/myContactsAdd" class="btn">添加出行人</navigator> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "travelerList", |
|||
data() { |
|||
return { |
|||
travelList: [], |
|||
}; |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
init () { |
|||
// 出行人信息 |
|||
this.Post({}, "/api/user/contactList").then(res => { |
|||
if (res) this.travelList = res.data |
|||
}) |
|||
|
|||
|
|||
}, |
|||
delet(item) { |
|||
let that = this |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确定要删除该出行人吗?', |
|||
cancelText: "再想想", |
|||
confirmColor: "#000", |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
that.Post({ |
|||
id: item.id |
|||
}, "/api/user/delDetail").then(res => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
icon: "none", |
|||
title: res.msg |
|||
}) |
|||
} |
|||
that.init() |
|||
}) |
|||
} else if (res.cancel) { |
|||
console.log('用户点击取消'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
defaultC(item) { |
|||
this.Post({ |
|||
id: item.id, |
|||
is_default: 1 |
|||
}, "/api/user/editContact").then(res => { |
|||
if (res.code == 1) { |
|||
this.travelList.forEach(i => i.is_default = 0) |
|||
item.is_default = !item.is_default |
|||
} |
|||
}) |
|||
}, |
|||
// 修改出行人信息 |
|||
edit(id){ |
|||
let url = '' |
|||
if(this.showType) { |
|||
url = '/subPackages/user/myAddressAdd?id='+id |
|||
}else { |
|||
url = "/subPackages/user/myContactsAdd?type=edit&id="+id |
|||
} |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg { |
|||
position: relative; |
|||
background: #F5F5F5; |
|||
min-height: calc(100vh - 44px); |
|||
overflow-x: hidden; |
|||
padding-bottom: 200rpx; |
|||
} |
|||
|
|||
.item { |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 28rpx auto 0; |
|||
padding: 26rpx; |
|||
|
|||
.name, |
|||
.idcard { |
|||
display: flex; |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
|
|||
.name { |
|||
view:last-child{ |
|||
margin-left: 40rpx; |
|||
} |
|||
|
|||
span { |
|||
padding: 3rpx 9rpx; |
|||
background: #96684F; |
|||
border-radius: 7rpx; |
|||
font-weight: bold; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
margin-left: 15rpx; |
|||
} |
|||
} |
|||
|
|||
.idcard { |
|||
margin-top: 26rpx; |
|||
|
|||
view:last-child { |
|||
margin-left: 14rpx; |
|||
max-width: 492rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.item-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 40rpx; |
|||
|
|||
.choice { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
view:last-child { |
|||
margin-left: 20rpx; |
|||
|
|||
font-size: 27rpx; |
|||
|
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
|
|||
image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
.yuan { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: rgba(255, 200, 37, 0); |
|||
border: 1rpx solid #999999; |
|||
border-radius: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.btn-list { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
view { |
|||
width: 134rpx; |
|||
height: 54rpx; |
|||
background: #FFFFFF; |
|||
border: 1px solid #999999; |
|||
border-radius: 7rpx; |
|||
|
|||
|
|||
font-size: 27rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
line-height: 52rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
view:last-child { |
|||
margin-left: 14rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-box { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 160rpx; |
|||
padding: 26rpx; |
|||
background-color: #F5F5F5; |
|||
|
|||
.btn { |
|||
width: 100%; |
|||
line-height: 80rpx; |
|||
height: 80rpx; |
|||
background: #96684F; |
|||
border-radius: 7rpx; |
|||
font-weight: 500; |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.no-data{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding-top: 400rpx; |
|||
image{ |
|||
width: 372rpx; |
|||
height: 200.67rpx; |
|||
} |
|||
view{ |
|||
width: 185rpx; |
|||
height: 72rpx; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
margin-top: 78rpx; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue