Augcl
/
health-front
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat: page-comment;

fox
Fox-33 3 weeks ago
parent
e5bdaba0c6
commit
139ea9f557
6 changed files with 430 additions and 2 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      pages_order/comment/commentCard.vue
  2. +241
    -0
      pages_order/comment/commentWrite.vue
  3. +35
    -0
      pages_order/components/formInput.vue
  4. +44
    -0
      pages_order/components/formTextarea.vue
  5. +108
    -0
      pages_order/components/formUpload.vue
  6. BIN
      pages_order/static/comment/icon-plus.png

+ 2
- 2
pages_order/comment/commentCard.vue View File

@ -20,11 +20,11 @@
<view class="section score">
<view class="flex score-item">
<view class="score-item-label">产品服务度</view>
<uv-rate :value="data.productServeScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" readonly></uv-rate>
<uv-rate :value="data.productServeScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" readonly></uv-rate>
</view>
<view class="flex score-item">
<view class="score-item-label">问卷体验</view>
<uv-rate :value="data.questionExperienceScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" readonly></uv-rate>
<uv-rate :value="data.questionExperienceScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" readonly></uv-rate>
</view>
<view class="flex score-item">
<view class="score-item-label">物流速度</view>


+ 241
- 0
pages_order/comment/commentWrite.vue View File

@ -0,0 +1,241 @@
<template>
<view class="page__view">
<navbar :title="title" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
<view class="main form">
<uv-form
ref="form"
:model="form"
:rules="rules"
errorType="toast"
>
<view class="card info">
<view class="card-header">评价信息</view>
<view class="form-item">
<uv-form-item prop="content" :customStyle="formItemStyle">
<view class="form-item-label">评价内容</view>
<view class="form-item-content">
<formTextarea v-model="form.content"></formTextarea>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item prop="images" :customStyle="formItemStyle">
<view class="form-item-label">上传图片/视频（选填）</view>
<view class="form-item-content">
<formUpload v-model="form.images"></formUpload>
</view>
</uv-form-item>
</view>
</view>
<view class="card">
<view class="form-item">
<uv-form-item prop="productServeScore" :customStyle="formItemStyle">
<view class="flex row">
<view class="form-item-label">产品服务度</view>
<view class="form-item-content">
<uv-rate v-model="form.productServeScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
</view>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item prop="questionExperienceScore" :customStyle="formItemStyle">
<view class="flex row">
<view class="form-item-label">问卷体验</view>
<view class="form-item-content">
<uv-rate v-model="form.questionExperienceScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
</view>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item prop="deliverySpeedScore" :customStyle="formItemStyle">
<view class="flex row">
<view class="form-item-label">物流速度</view>
<view class="form-item-content">
<uv-rate v-model="form.deliverySpeedScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
</view>
</view>
</uv-form-item>
</view>
</view>
</uv-form>
</view>
<view class="bottom">
<button class="btn" @click="onSubmit">提交申请</button>
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
import formTextarea from '@/pages_order/components/formTextarea.vue'
import formUpload from '@/pages_order/components/formUpload.vue'
export default {
components: {
formTextarea,
formUpload,
},
data() {
return {
form: {
content: null,
images: [],
productServeScore: null,
questionExperienceScore: null,
deliverySpeedScore: null,
},
rules: {
'content': {
type: 'string',
required: true,
message: '请输入评价',
},
'productServeScore': {
type: 'number',
required: true,
message: '请为【产品服务度】打分',
},
'questionExperienceScore': {
type: 'number',
required: true,
message: '请为【问卷体验】打分',
},
'deliverySpeedScore': {
type: 'number',
required: true,
message: '请为【物流速度】打分',
},
},
formItemStyle: { padding: 0 },
}
},
computed: {
...mapState(['userInfo']),
},
methods: {
async onSubmit() {
try {
const res = await this.$refs.form.validate()
console.log('onSubmit res', res)
// todo
this.$utils.redirectTo(`/pages_order/comment/commentRecords?creator=${userInfo.id}`)
} catch (err) {
console.log('onSubmit err', err)
}
},
},
}
</script>
<style scoped lang="scss">
.page__view {
width: 100vw;
min-height: 100vh;
background-color: $uni-bg-color;
position: relative;
/deep/ .nav-bar__view {
position: fixed;
top: 0;
left: 0;
}
}
.main {
padding: calc(var(--status-bar-height) + 144rpx) 32rpx 236rpx 32rpx;
}
.card {
padding: 32rpx;
background: #FAFAFF;
border: 2rpx solid #FFFFFF;
border-radius: 32rpx;
& + & {
margin-top: 40rpx;
}
&-header {
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
line-height: 1.4;
color: #252545;
margin-bottom: 32rpx;
}
}
.form {
&-item {
border-bottom: 2rpx solid #EEEEEE;
&:last-child {
border: none;
}
& + & {
margin-top: 32rpx;
}
&-label {
font-family: PingFang SC;
font-weight: 400;
font-size: 26rpx;
line-height: 1.4;
color: #181818;
}
}
}
.info {
.form-item + .form-item {
margin-top: 40rpx;
}
.form-item-content {
margin-top: 16rpx;
}
}
.row {
justify-content: space-between;
}
.bottom {
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
height: 200rpx;
padding: 24rpx 40rpx;
background: #FFFFFF;
box-sizing: border-box;
.btn {
width: 100%;
padding: 16rpx 0;
box-sizing: border-box;
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
line-height: 1;
color: #FFFFFF;
background-image: linear-gradient(to right, #4B348F, #845CFA);
border-radius: 41rpx;
}
}
</style>

+ 35
- 0
pages_order/components/formInput.vue View File

@ -0,0 +1,35 @@
<template>
<uv-input
:value="value"
@input="$emit('input', $event)"
:placeholder="placeholder"
placeholderStyle="color: #C6C6C6; font-size: 32rpx; font-weight: 400;"
:customStyle="{
backgroundColor: 'transparent',
padding: '0',
boxSizing: 'border-box',
fontSize: '32rpx',
border: 'none',
transform: 'translateX(-4px)'
}"
></uv-input>
</template>
<script>
export default {
props: {
value: {
default: null
},
placeholder: {
type: String,
default: '请输入'
},
},
data() {
return {
}
},
}
</script>

+ 44
- 0
pages_order/components/formTextarea.vue View File

@ -0,0 +1,44 @@
<template>
<uv-textarea
:value="value"
@input="$emit('input', $event)"
:placeholder="placeholder"
height="230rpx"
border="none"
:customStyle="{
backgroundColor: 'transparent',
padding: 0,
}"
:placeholderStyle="{
color: '#C6C6C6',
fontSize: '32rpx',
}"
:textStyle="{
fontSize: '32rpx',
}"
></uv-textarea>
</template>
<script>
export default {
props: {
value: {
default: null
},
placeholder: {
type: String,
default: '请输入'
},
},
data() {
return {
}
},
methods: {
},
}
</script>
<style scoped lang="scss">
</style>

+ 108
- 0
pages_order/components/formUpload.vue View File

@ -0,0 +1,108 @@
<template>
<view>
<uv-upload
:fileList="displayFileList"
:accept="accept"
:maxCount="maxCount"
:width="width"
:height="height"
@afterRead="afterRead"
@delete="deleteFile"
>
<button class="flex btn">
<image class="btn-icon" src="@/pages_order/static/comment/icon-plus.png" mode="widthFix" />
</button>
</uv-upload>
</view>
</template>
<script>
export default {
props: {
value: {
type: Array,
default() {
return []
}
},
accept: {
type: String,
default: 'image' // all | media | image | file | video
},
width: {
type: Number | String,
default: 190,
},
height: {
type: Number | String,
default: 190,
},
maxCount: {
type: Number | String,
default: 100,
}
},
data() {
return {
}
},
computed: {
fileList: {
set(val) {
this.$emit('input', val)
},
get() {
return this.value
}
},
displayFileList() {
return this.fileList.map(url => ({ url }))
},
},
watch: {
fileList: {
handler(val) {
console.log('watch fileList', val)
},
deep: true,
},
displayFileList: {
handler(val) {
console.log('watch displayFileList', val)
},
deep: true,
},
},
mounted() {
console.log('form upload mounted')
},
methods: {
deleteFile(e){
console.log('deleteFile', e)
const fileList = [...this.fileList]
fileList.splice(e.index, 1)
this.fileList = fileList
},
afterRead(e){
this.$Oss.ossUpload(e.file.url).then(url => {
this.fileList = this.fileList.concat(url)
})
},
},
}
</script>
<style scoped lang="scss">
.btn {
width: 190rpx;
height: 190rpx;
background: #F3F2F7;
border-radius: 16rpx;
&-icon {
width: 61rpx;
height: auto;
}
}
</style>

BIN
pages_order/static/comment/icon-plus.png View File

Before After
Width: 31  |  Height: 31  |  Size: 287 B

Write Preview
Loading…
Cancel
Save