You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
403 lines
10 KiB
403 lines
10 KiB
4 weeks ago
|
<template>
|
||
|
|
<!-- 发布订单评价 -->
|
||
|
|
<view class="page1">
|
||
|
|
<view class="title">
|
||
|
|
<view class="title-sreach">
|
||
|
|
<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
||
|
|
<uni-icons type="left" size="28"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
||
|
|
写评价
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="content">
|
||
|
|
<view class="box1">
|
||
|
|
<view style="width: 100%;line-height: 35px;font-size: 14px;font-weight: 700;">
|
||
|
|
竹仔园牛仔农庄(第六分店)
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;padding: 10px;background: rgba(247, 248, 248, 1);border-radius: 10px;">
|
||
|
|
<view class="goods-img">
|
||
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
||
|
|
</view>
|
||
|
|
<view class="goods-content">
|
||
|
|
<view class="goods-name">
|
||
|
|
牛仔农庄(医专店)
|
||
|
|
</view>
|
||
|
|
<view class="goods-content-center">
|
||
|
|
<view class="goods-deal1">
|
||
|
|
打分；不要啦
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="goods-content-bottom">
|
||
|
|
<view style="width: 50%;">
|
||
|
|
X1
|
||
|
|
</view>
|
||
|
|
<view class="pintuan-left-price">
|
||
|
|
￥90.00
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="box1" style="padding: 0;">
|
||
|
|
<view class="eval-title">
|
||
|
|
- 写下真实体验，帮助万千用户选店 -
|
||
|
|
</view>
|
||
|
|
<view class="eval-name">
|
||
|
|
<view class="eval-name1">
|
||
|
|
竹仔园牛仔农庄(第六分店)
|
||
|
|
</view>
|
||
|
|
<view class="eval-num">
|
||
|
|
<view class="eval-num1">
|
||
|
|
您对本次消费体验还满意吗？
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;">
|
||
|
|
<view v-for="(item,index) in evalNumList" :key="index" @tap="shopEvaluateNum = item.index" style="flex: 1;text-align: center;font-weight: 700;">
|
||
|
|
<img v-if="shopEvaluateNum >=item.index" :src="item.checked" alt="" class="eval-img" />
|
||
|
|
<img v-else :src="item.noChecked" alt="" class="eval-img" />
|
||
|
|
<view>{{item.name}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="eval-num">
|
||
|
|
<view class="eval-num1">
|
||
|
|
您对本次配送人员还满意吗？
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;">
|
||
|
|
<view v-for="(item,index) in evalNumList" :key="index" @tap="manEvaluateNum = item.index" style="flex: 1;text-align: center;font-weight: 700;">
|
||
|
|
<img v-if="manEvaluateNum >=item.index" :src="item.checked" alt="" class="eval-img" />
|
||
|
|
<img v-else :src="item.noChecked" alt="" class="eval-img" />
|
||
|
|
<view>{{item.name}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="eval-num" style="border: none;">
|
||
|
|
<textarea name="" id="" cols="30" rows="10" placeholder="有什么想说的吗？可以写下来，提交给我们" style="width: 100%;font-size: 14px;padding: 15px;height: 100px;"></textarea>
|
||
|
|
</view>
|
||
|
|
<view class="eval-num" style="border: none;padding: 0 15px;display: flex;">
|
||
|
|
<view class="upload-img" @tap="pictureAdd"
|
||
|
|
style="background: #eee;text-align: center;line-height: 160rpx;">
|
||
|
|
<uni-icons type="camera" size="28" color="#777"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view style="flex: 1;display: flex;">
|
||
|
|
<view v-if="orderPicture !=''"
|
||
|
|
:key="index" style="width: 160rpx;height: 160rpx;margin-left: 20rpx;">
|
||
|
|
<img :src="orderPicture" alt="" class="upload-img">
|
||
|
|
</view>
|
||
|
|
<view style="height: 80px;line-height: 20px;padding: 20px 0 0 10px;color: #777;">
|
||
|
|
发图/发视频能更有效地帮助他人哦~
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="border: none;padding: 0 15px;display: flex;height: 50px;line-height: 50px;">
|
||
|
|
<view v-if="selected == 'niming'" @tap="checkVoucher('shiming')" class="radio-check">
|
||
|
|
<uni-icons type="checkmarkempty" size="12"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="radio-no-check" @tap="checkVoucher('niming')" v-else></view>
|
||
|
|
<view style="font-size: 14px;font-weight: 700;color: #777;padding-right: 10px;">
|
||
|
|
匿名评价
|
||
|
|
</view>
|
||
|
|
<view style="font-weight: 700;color: #777;">
|
||
|
|
对商家和其他用户隐藏头像和昵称
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom">
|
||
|
|
<view class="bottom-btn">
|
||
|
|
发布
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
selected:'niming',
|
||
|
|
orderPicture:'',
|
||
|
|
menuButtonInfo: {},
|
||
|
|
shopEvaluateNum:0,
|
||
|
|
manEvaluateNum:0,
|
||
|
|
evalNumList:[{
|
||
|
|
name:'很糟糕',
|
||
|
|
checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/aa045ef1faca4130a9483688054e5620.png',
|
||
|
|
noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f224a2ef2cf44280a1eeaa7ccd76bf2b.png',
|
||
|
|
index:1
|
||
|
|
},{
|
||
|
|
name:'较差',
|
||
|
|
checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b0630e0ef7424214853ff4b1814e4607.png',
|
||
|
|
noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/66c7a64c17574d74997bf86d1e8ddf60.png',
|
||
|
|
index:2
|
||
|
|
},{
|
||
|
|
name:'一般',
|
||
|
|
checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c815fc9ca7e417b9f60ac6583251c8d.png',
|
||
|
|
noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b27134c1ec174ad0910349692d08df7a.png',
|
||
|
|
index:3
|
||
|
|
},{
|
||
|
|
name:'还可以',
|
||
|
|
checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8ab48411bf1a451097fdc4103b5ae44c.png',
|
||
|
|
noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8f705c0318e747e5b08c5099f04eb9ba.png',
|
||
|
|
index:4
|
||
|
|
},{
|
||
|
|
name:'超预期',
|
||
|
|
checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/90ef5af58d314c1bbabe8bd48aa49d22.png',
|
||
|
|
noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/c1cce0db39264c6ea9b533137153fc36.png',
|
||
|
|
index:5
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
checkVoucher(type) {
|
||
|
|
this.selected = type;
|
||
|
|
},
|
||
|
|
pictureAdd(id, huan) {
|
||
|
|
let that = this
|
||
|
|
uni.chooseMedia({
|
||
|
|
count: 1,
|
||
|
|
mediaType: ['image'],
|
||
|
|
sourceType: ['album'],
|
||
|
|
success(res) {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中...',
|
||
|
|
mask: true
|
||
|
|
})
|
||
|
|
for (let i = 0; i < res.tempFiles.length; i++) {
|
||
|
|
that.upLoadFile(res.tempFiles[i].tempFilePath)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
async upLoadFile(path) {
|
||
|
|
let that = this;
|
||
|
|
let hiver_token = uni.getStorageSync("hiver_token")
|
||
|
|
await uni.uploadFile({
|
||
|
|
url: that.tui.interfaceUrl() + '/upload/file',
|
||
|
|
filePath: path,
|
||
|
|
name: 'file',
|
||
|
|
header: {
|
||
|
|
"content-type": "multipart/form-data",
|
||
|
|
'accessToken': hiver_token
|
||
|
|
},
|
||
|
|
formData: {},
|
||
|
|
success: (uploadFileRes) => {
|
||
|
|
let pathData = JSON.parse(uploadFileRes.data)
|
||
|
|
this.orderPicture = pathData.result
|
||
|
|
that.$forceUpdate()
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
uni.hideLoading();
|
||
|
|
uni.showToast({
|
||
|
|
title: JSON.stringify(err),
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
await setTimeout(res => {
|
||
|
|
uni.hideLoading();
|
||
|
|
}, 1000)
|
||
|
|
},
|
||
|
|
back() {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100%;
|
||
|
|
font-size: 24rpx;
|
||
|
|
background: #F5F8F5;
|
||
|
|
color: #00231C;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page1 {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100vh;
|
||
|
|
font-size: 24rpx;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
flex-shrink: 0;
|
||
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/9c27a07c0b5b40d9b5b97cb466d74c6b.png') no-repeat;
|
||
|
|
background-size: 100%;
|
||
|
|
width: 100%;
|
||
|
|
height: 400rpx;
|
||
|
|
padding-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-sreach{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
height: 200rpx;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-btn{
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.title-name{
|
||
|
|
padding-top: 55px;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
flex: 1;
|
||
|
|
width: 95%;
|
||
|
|
overflow-y: auto;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
position: absolute;
|
||
|
|
top: 200rpx;
|
||
|
|
left: 2.5%;
|
||
|
|
}
|
||
|
|
.box1 {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto 20rpx;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
}
|
||
|
|
.goods-img {
|
||
|
|
width: 160rpx;
|
||
|
|
height: 160rpx;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
background-size: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.goods-content {
|
||
|
|
flex: 1;
|
||
|
|
padding-left: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-name {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-content-center {
|
||
|
|
display: flex;
|
||
|
|
margin: 16rpx 0;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
.goods-deal1 {
|
||
|
|
width: 60%;
|
||
|
|
}
|
||
|
|
.goods-content-bottom {
|
||
|
|
display: flex;
|
||
|
|
line-height: 28px;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
.pintuan-left-price {
|
||
|
|
width: 50%;
|
||
|
|
text-align: right;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
.eval-img{
|
||
|
|
width: 46px;
|
||
|
|
height: 46px;
|
||
|
|
background-size: 100%;
|
||
|
|
}
|
||
|
|
.eval-title{
|
||
|
|
height: 54px;
|
||
|
|
font-size: 14px;
|
||
|
|
text-align: center;
|
||
|
|
background: rgba(235, 255, 243, 1);
|
||
|
|
border-top-left-radius: 10px;
|
||
|
|
border-top-right-radius: 10px;
|
||
|
|
border-top: 1px solid rgba(178, 255, 208, 1);
|
||
|
|
border-left: 1px solid rgba(178, 255, 208, 1);
|
||
|
|
border-right: 1px solid rgba(178, 255, 208, 1);
|
||
|
|
z-index: 77;
|
||
|
|
line-height: 44px;
|
||
|
|
}
|
||
|
|
.eval-name{
|
||
|
|
margin-top: -10px;
|
||
|
|
border-top-left-radius: 10px;
|
||
|
|
border-top-right-radius: 10px;
|
||
|
|
z-index: 88;
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.eval-name1{
|
||
|
|
height: 54px;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 700;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
border-top-left-radius: 10px;
|
||
|
|
border-top-right-radius: 10px;
|
||
|
|
line-height: 54px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.eval-num{
|
||
|
|
padding-bottom: 15px;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
.eval-num1{
|
||
|
|
height: 20px;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 15px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.upload-img {
|
||
|
|
width: 160rpx;
|
||
|
|
height: 160rpx;
|
||
|
|
}
|
||
|
|
.radio-check {
|
||
|
|
background: linear-gradient(90deg, #e3ff96, #a6ffea);
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border-radius: 20px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 20px;
|
||
|
|
margin: 15px 10px 0 0;
|
||
|
|
}
|
||
|
|
.radio-no-check {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border-radius: 20px;
|
||
|
|
border: 1px solid #eee;
|
||
|
|
margin: 15px 10px 0 0;
|
||
|
|
}
|
||
|
|
.bottom-btn{
|
||
|
|
width: 95%;
|
||
|
|
height: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
text-align: center;
|
||
|
|
margin: 11px auto;
|
||
|
|
border-radius: 50px;
|
||
|
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.bottom{
|
||
|
|
overflow: hidden;
|
||
|
|
height: 86px;
|
||
|
|
background:#fff;
|
||
|
|
}
|
||
|
|
</style>
|