evaluatePlan.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <view>
  3. <view
  4. class="selList"
  5. v-for="(item, index) in list" :key="index"
  6. >
  7. <view class="radios" @click="chooseItem(item)">
  8. <radio :checked="item.id == value" :value="item.name" />
  9. <text>{{item.name}}</text>
  10. </view>
  11. <view class="details" @click="viewDetail(item)">
  12. 详情 <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888"></u-icon>
  13. </view>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. list: [
  22. {
  23. id: '1232',
  24. name: '爱的街坊邻居爱上了对方加拉附件爱的街坊邻居爱上了对方加拉附件',
  25. },
  26. {
  27. id: '2223',
  28. name: 'banner',
  29. },
  30. {
  31. id: '3333',
  32. name: 'orange',
  33. }
  34. ],
  35. value: '',
  36. }
  37. },
  38. methods: {
  39. // 选中方案
  40. chooseItem(item) {
  41. this.value = item.id
  42. },
  43. // 查看详情
  44. viewDetail(item){
  45. uni.navigateTo({
  46. url:"/pages/evaluatePlan/planDetail?id="+item.id
  47. })
  48. }
  49. }
  50. }
  51. </script>
  52. <style lang="scss">
  53. .selList{
  54. width: 100%;
  55. border-bottom: 1px solid #eee;
  56. display: flex;
  57. align-items: center;
  58. .radios{
  59. display: flex;
  60. align-items: center;
  61. flex-grow: 1;
  62. width: 50%;
  63. padding: 26upx 20upx;
  64. &:active{
  65. background-color: #F8F8F8;
  66. }
  67. text{
  68. word-break: break-all;
  69. }
  70. }
  71. .details{
  72. color: #007AFF;
  73. padding-right: 20upx;
  74. &:active{
  75. color: #D9363E;
  76. }
  77. }
  78. }
  79. </style>