363 lines
8.6 KiB
Vue
363 lines
8.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="page flex flex-col">
|
|||
|
|
<view class="flex-1">
|
|||
|
|
<view class="title">对这款酒感觉如何？</view>
|
|||
|
|
<view class="content-box flex justify-between">
|
|||
|
|
|
|||
|
|
<textarea v-model="form.reviewContent" maxlength="100" placeholder="发布友好的评论..."
|
|||
|
|
class="textarea-box"></textarea>
|
|||
|
|
|
|||
|
|
<view class="flex align-center justify-center img-box" @click="handleUpload">
|
|||
|
|
|
|||
|
|
<image v-if="form.reviewImg" :src="form.reviewImg" style="width: 100%;height:100%"></image>
|
|||
|
|
|
|||
|
|
<text v-else class="upload-text">上传图片</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="num-box">
|
|||
|
|
<view class="tab-box">
|
|||
|
|
<view class="defTab" :class="{'active':currentTab == 1}" @click="changeTab(1)">快速评分</view>
|
|||
|
|
<view class="defTab" :class="{'active':currentTab == 2}" @click="changeTab(2)">细节评分</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="currentTab == 1" class="quick-box">
|
|||
|
|
<view class="num">{{compositeScore}}</view>
|
|||
|
|
<view class="rate">
|
|||
|
|
<uni-rate :touchable="false" :readonly="true" v-model="compositeScore" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="slider-box">
|
|||
|
|
<slider min="0" max="5" step="1" :value="compositeScore" @change="sliderAllChange"
|
|||
|
|
activeColor="#FEE034" backgroundColor="#f2f2f2" block-color="#FEE034" block-size="18" />
|
|||
|
|
</view>
|
|||
|
|
<view class="sub">滑动模块，给这款酒评分</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="currentTab == 2">
|
|||
|
|
<view class="item-label flex justify-between align-center">
|
|||
|
|
<text>颜色</text>
|
|||
|
|
<text>{{form.colorRating}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="slider-box">
|
|||
|
|
<slider min="0" max="5" step="1" :value="form.colorRating"
|
|||
|
|
@change="e => sliderChange(e,'colorRating')" activeColor="#FEE034" backgroundColor="#f2f2f2"
|
|||
|
|
block-color="#FEE034" block-size="18" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="item-label flex justify-between align-center">
|
|||
|
|
<text>香味</text>
|
|||
|
|
<text>{{form.aromaRating}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="slider-box">
|
|||
|
|
<slider min="0" max="5" step="1" :value="form.aromaRating"
|
|||
|
|
@change="e => sliderChange(e,'aromaRating')" activeColor="#FEE034" backgroundColor="#f2f2f2"
|
|||
|
|
block-color="#FEE034" block-size="18" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="item-label flex justify-between align-center">
|
|||
|
|
<text>口味</text>
|
|||
|
|
<text>{{form.tasteRating}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="slider-box">
|
|||
|
|
<slider min="0" max="5" step="1" :value="form.tasteRating"
|
|||
|
|
@change="e => sliderChange(e,'tasteRating')" activeColor="#FEE034" backgroundColor="#f2f2f2"
|
|||
|
|
block-color="#FEE034" block-size="18" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex justify-center">
|
|||
|
|
<button class="cu-btn btn2" @click="anonymous">
|
|||
|
|
<image src="@/static/clipboard-tick.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;"></image>
|
|||
|
|
匿名发布</button>
|
|||
|
|
<button class="cu-btn bg-zd btn" @click="submitForm">发布</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
addReview
|
|||
|
|
} from '@/api/bar.js'
|
|||
|
|
import {
|
|||
|
|
base_url
|
|||
|
|
} from '@/api/config.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
form: {
|
|||
|
|
beerId: '',
|
|||
|
|
reviewContent: '',
|
|||
|
|
reviewImg: '',
|
|||
|
|
aromaRating: 0, // 香味评分
|
|||
|
|
colorRating: 0, // 颜色评分
|
|||
|
|
tasteRating: 0, // 口味评分
|
|||
|
|
},
|
|||
|
|
compositeScore: 0,
|
|||
|
|
currentTab: 1,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.form.beerId = options.beerId
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 上传事件
|
|||
|
|
handleUpload() {
|
|||
|
|
// 读取 小程序已经授权的权限
|
|||
|
|
uni.getSetting({
|
|||
|
|
success:(res)=> {
|
|||
|
|
console.log(res)
|
|||
|
|
// 判断是否拥有此权限进行拉起授权 和 重新授权功能
|
|||
|
|
if (!res.authSetting['scope.camera']) {
|
|||
|
|
// 未授权此项权限 拉起授界面
|
|||
|
|
uni.authorize({
|
|||
|
|
scope: 'scope.camera',
|
|||
|
|
success:()=> {
|
|||
|
|
// 授权成功后 就可以执行 需要权限的 操作函数了
|
|||
|
|
this.startUpload()
|
|||
|
|
},
|
|||
|
|
fail:(err)=> {
|
|||
|
|
// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '是否重新授权拍照、相册的功能',
|
|||
|
|
success(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.openSetting({
|
|||
|
|
success() {
|
|||
|
|
console.log('开启权限成功');
|
|||
|
|
},
|
|||
|
|
fail() {
|
|||
|
|
console.log('开启权限失败');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.startUpload()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
startUpload() {
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 1,
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: base_url + '/bar/common/upload', //仅为示例，非真实的接口地址
|
|||
|
|
filePath: res.tempFilePaths[0],
|
|||
|
|
name: 'file',
|
|||
|
|
formData: {
|
|||
|
|
type: 'image'
|
|||
|
|
},
|
|||
|
|
success: (uploadFileRes) => {
|
|||
|
|
this.form.reviewImg = JSON.parse(uploadFileRes.data).url
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
changeTab(index) {
|
|||
|
|
this.currentTab = index
|
|||
|
|
},
|
|||
|
|
sliderChange(e, key) {
|
|||
|
|
this.form[key] = +e.detail.value
|
|||
|
|
},
|
|||
|
|
sliderAllChange(e) {
|
|||
|
|
this.compositeScore = +e.detail.value
|
|||
|
|
this.form.aromaRating = +e.detail.value
|
|||
|
|
this.form.colorRating = +e.detail.value
|
|||
|
|
this.form.tasteRating = +e.detail.value
|
|||
|
|
},
|
|||
|
|
submitForm() {
|
|||
|
|
addReview(this.form).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '评论成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 匿名发布
|
|||
|
|
anonymous() {
|
|||
|
|
this.form.anonymous = true
|
|||
|
|
addReview(this.form).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '评论成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
/deep/ slider {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .wx-slider-handle-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
height: 36rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
background-color: #f6f6f6;
|
|||
|
|
height: 100vh;
|
|||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
.title {
|
|||
|
|
font-family: Source Han Sans;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
margin: 32rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-box {
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
padding: 50rpx 30rpx;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
|
|||
|
|
.textarea-box {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-box {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
background: #D8D8D8;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num-box {
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
|
|||
|
|
.tab-box {
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
padding: 8rpx;
|
|||
|
|
margin: 0 32rpx 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.defTab {
|
|||
|
|
width: 50%;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-family: Source Han Sans;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
padding: 16rpx 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
background-color: #71F4B4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-label {
|
|||
|
|
font-family: Source Han Sans;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
padding: 0 34rpx;
|
|||
|
|
margin-bottom: 18rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slider-box {
|
|||
|
|
// background: #FEE034;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 34rpx;
|
|||
|
|
margin-bottom: 34rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-box {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
|
|||
|
|
.num {
|
|||
|
|
font-family: Source Han Sans;
|
|||
|
|
font-size: 72rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
color: #5F5F63;
|
|||
|
|
margin-bottom: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rate {
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slider-box {
|
|||
|
|
background-color: #FFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub {
|
|||
|
|
font-family: Source Han Sans;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #9E9E9E;
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
// width: 654rpx;
|
|||
|
|
width: 344rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
// margin: 30rpx auto;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
font-family: Roboto;
|
|||
|
|
font-weight: normal;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.btn2 {
|
|||
|
|
width: 240rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
font-family: Roboto;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
margin-right: 66rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|