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) {
},
```
效果：
