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> |