evaluate.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <template>
  2. <view class="wrap">
  3. <navbar :iSimmersive="false" title-color="#ffffff" background="#1b43c4" :placeholder="true" title="商品评价"></navbar>
  4. <info v-if="isError"></info>
  5. <view v-if="!isError">
  6. <view class="goods">
  7. <view class="title">
  8. <text>共{{order.item.length}}件商品</text>
  9. </view>
  10. <view class="goods-box">
  11. <view
  12. class="goods-item clear"
  13. v-for="(value,index) in order.item"
  14. :key="index"
  15. >
  16. <view class="goods-img">
  17. <image :src="value.thumb_image">
  18. </view>
  19. <view class="goods-info">
  20. <view class="t">
  21. <text>{{value.title}}</text>
  22. <text>¥{{value.sell_price}}</text>
  23. </view>
  24. <view class="b">
  25. <text>{{value.spec}}</text>
  26. <text>× {{value.nums}}</text>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="order">
  33. <view class="list clear">
  34. <view class="list-box clear">
  35. <view>商品金额:</view>
  36. <view>{{order.real_amount}}</view>
  37. </view>
  38. <view class="list-box clear">
  39. <view>运费金额:</view>
  40. <view>{{order.payable_freight}}</view>
  41. </view>
  42. <view class="list-box clear">
  43. <view>订单总额:</view>
  44. <view class="money">{{order.order_amount}}</view>
  45. </view>
  46. <view class="list-box clear">
  47. <view>商品评分:</view>
  48. <view><sx-rate :value="rate" @change="onChange" /></view>
  49. </view>
  50. <view class="list-box clear">
  51. <textarea @blur="bindTextAreaBlur" placeholder="请填写商品评价" maxlength="200"></textarea>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="btn">
  56. <view @click="onSubmit">提交</view>
  57. </view>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. import info from '@/components/tool/info.vue'
  63. export default {
  64. components:{
  65. info
  66. },
  67. data(){
  68. return {
  69. isError: false,
  70. isSubmit: false,
  71. orderId: 0,
  72. rate: 5,
  73. message: '',
  74. order:{
  75. item: []
  76. }
  77. };
  78. },
  79. onLoad(options) {
  80. this.isError = false;
  81. this.orderId = options.id;
  82. this.$http.getOrderEvaluate({
  83. id: this.orderId
  84. }).then((res)=>{
  85. if(res.status){
  86. this.order = res.data;
  87. }else{
  88. this.$utils.msg(res.info);
  89. }
  90. this.isError = false;
  91. }).catch((err)=>{
  92. this.isError = true;
  93. });
  94. },
  95. methods: {
  96. onChange(value){
  97. this.rate = value;
  98. },
  99. bindTextAreaBlur: function (e) {
  100. this.message = e.detail.value;
  101. },
  102. onSubmit(){
  103. if(this.isSubmit){
  104. return false;
  105. }
  106. this.$utils.showLoading();
  107. this.isSubmit = true;
  108. this.$http.sendOrderEvaluate({
  109. id: this.orderId,
  110. message: this.message,
  111. rate: this.rate
  112. }).then(res=>{
  113. this.$utils.hideLoading();
  114. if(res.status){
  115. this.$utils.redirectTo('order/detail',{
  116. id: this.orderId
  117. });
  118. }
  119. this.$utils.msg(res.info);
  120. this.isSubmit = false;
  121. }).catch(err=>{
  122. this.$utils.hideLoading();
  123. this.isSubmit = false;
  124. this.$utils.msg("网络出错,请检查网络是否连接");
  125. });
  126. }
  127. }
  128. }
  129. </script>
  130. <style lang="scss" scoped>
  131. .money{ color: #fc4141; }
  132. .goods{
  133. background-color: #fff;
  134. margin-top: 30rpx;
  135. padding-bottom: 20rpx;
  136. .title{
  137. width: 100%;
  138. margin: 0 auto;
  139. color: #666;
  140. font-size: 28rpx;
  141. height: 80rpx;
  142. line-height: 80rpx;
  143. border-bottom: 1px solid #eee;
  144. text {
  145. padding-left: 20rpx;
  146. }
  147. }
  148. .goods-box{
  149. padding: 0 30rpx;
  150. .goods-item {
  151. padding-top: 10px;
  152. .goods-img {
  153. width: 150rpx;
  154. height: 150rpx;
  155. display: inline-block;
  156. float: left;
  157. image {
  158. width: 100%;
  159. height: 100%;
  160. }
  161. }
  162. .goods-info {
  163. display: inline-block;
  164. width: 72%;
  165. font-size: 28rpx;
  166. float: right;
  167. .t {
  168. width: 100%;
  169. height: 90rpx;
  170. text:first-child{
  171. float: left;
  172. display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;
  173. -webkit-box-orient: vertical;
  174. width: 70%;
  175. }
  176. text:last-child{
  177. width: 30%;
  178. float: right;
  179. text-align: right;
  180. }
  181. }
  182. .b{
  183. width: 100%;
  184. height: 80rpx;
  185. font-size: 26rpx;
  186. text:first-child{
  187. float: left;
  188. color: #999;
  189. }
  190. text:last-child{
  191. float: right;
  192. color: #666;
  193. }
  194. }
  195. }
  196. }
  197. }
  198. }
  199. .order{
  200. background-color: #fff;
  201. margin-top: 30rpx;
  202. padding-bottom: 20rpx;
  203. .list {
  204. width: 100%;
  205. .list-box{
  206. width: 92%;
  207. height: auto !important;
  208. height: 80rpx;
  209. min-height: 80rpx;
  210. line-height: 80rpx;
  211. margin: 0 auto;
  212. font-size: 28rpx; color: #333;
  213. border-bottom: 1px solid #ebedf0;
  214. view{ display: inline-block; }
  215. view:first-child { float: left; }
  216. view:last-child { float: right; }
  217. textarea { height: 150rpx; }
  218. }
  219. }
  220. }
  221. .btn{
  222. width: 90%;
  223. margin: 40rpx auto;
  224. margin-top: 40rpx;
  225. view {
  226. background-color: #1b43c4;
  227. border: 1px solid #1b43c4;
  228. border-radius: 30rpx;
  229. font-size: 28rpx;
  230. text-align: center;
  231. height: 80rpx;
  232. line-height: 80rpx;
  233. color: #fff;
  234. }
  235. }
  236. </style>