1.在vant weapp官网找到相应的组件
2.在comment.json中引用相关组件
```
{
"usingComponents":
"van-field": "vant-weapp/field",
"van-rate": "vant-weapp/rate",
"van-button": "vant-weapp/button"
}
}
```
在comment.html中写入代码
```
< !--pages / comment / comment.wxml--><view class = '' > <view class = 'detail-container'style = 'background: url({{detail.image}}) no-repeat top/cover' > </view>
<view class='detail-mask'></view > <view class = 'detail-info' > <image src = "{{detail.image}}"class = 'detail-img' > </image>
<view class='detail'>
<view class='detail-nm'>{{detail.name}}</view > <view > {
{
detail.leader
}
} < /view>
<view class='detail.sc'>{{detail.score}}分</view > <view > kkkkk < /view>
<view>导演：xxxx</view > </view>
</view > <view class = 'desc' > {
{
detail.content
}
} < /view>
<!-- 评价 -->
<view class="comment-container">
<van-field value="{{ content }}" placeholder="写一些评价吧" bind:change="onContentChange" / > <text > \r\n < /text>
<van-rate value="{{ score }}" bind:change="onScoreChange" / > <text > \r\n < /text>
<van-button type="warning" bindtap="uploadImg">上传图片</van - button > <view >
</view>
<text>\r\n</text > <van - button size = "large"type = "danger"bindtap = "submit" > 提交评价 < /van-button>
</view > <!--评价end--></view>
/
```
重点部分：
```
~~~
<!-- 评价 -->
<view class="comment-container">
<van-field value="{{ content }}" placeholder="写一些评价吧" bind:change="onContentChange" / > <text > \r\n < /text>
<van-rate value="{{ score }}" bind:change="onScoreChange" / > <text > \r\n < /text>
<van-button type="warning" bindtap="uploadImg">上传图片</van - button > <view >
</view>
<text>\r\n</text > <van - button size = "large"type = "danger"bindtap = "submit" > 提交评价 < /van-button>
</view >
<!--评价end-->
~~~
```
在comment.js中写入相关初始数据以及函数
```
/**
* 页面的初始数据
*/
data: {
content: '', // 评价的内容
score: 5, // 评价的分数
images: [], // 上传的图片
detail:[],
},
onContentChange: function (event) {
},
onScoreChange: function (event) {
},
```
效果：
