普兆健康管家前端代码仓库
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.

205 lines
3.9 KiB

  1. <template>
  2. <view class="flex card">
  3. <view>
  4. <uv-checkbox-group
  5. v-model="checkboxValue"
  6. shape="circle"
  7. @change="onChange"
  8. >
  9. <uv-checkbox
  10. size="36rpx"
  11. icon-size="36rpx"
  12. activeColor="#7451DE"
  13. :name="1"
  14. ></uv-checkbox>
  15. </uv-checkbox-group>
  16. </view>
  17. <view class="img-box">
  18. <image class="img" :src="data.url" mode="aspectFit"></image>
  19. </view>
  20. <view class="info">
  21. <view class="title">{{ data.name }}</view>
  22. <view class="desc">{{ data.desc }}</view>
  23. <view class="flex price-box">
  24. <view class="flex price">¥<text class="highlight">{{ data.price.toFixed(2) }}</text>/</view>
  25. <view class="price-origin">{{ `¥${data.originalPrice}/次` }}</view>
  26. </view>
  27. <view class="flex tool">
  28. <view class="flex count">规格<text class="highlight">{{ `x${data.count}` }}</text></view>
  29. <button class="flex btn" @click="jumpToProductDetail">详情</button>
  30. </view>
  31. </view>
  32. <view v-if="data.customized" class="sup customized">
  33. 定制组合
  34. </view>
  35. <view v-else-if="data.free" class="sup free">
  36. 自定组合
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. export default {
  42. props: {
  43. data: {
  44. type: Object,
  45. default() {
  46. return {}
  47. }
  48. },
  49. },
  50. data() {
  51. return {
  52. checkboxValue : []
  53. }
  54. },
  55. computed: {
  56. checked: {
  57. set(val) {
  58. this.checkboxValue = val ? [1] : []
  59. if (this.data.selected == val) {
  60. return
  61. }
  62. this.$emit('select', val)
  63. },
  64. get() {
  65. return this.checkboxValue[0] == 1 ? true : false
  66. }
  67. }
  68. },
  69. watch: {
  70. data: {
  71. handler(val) {
  72. this.checked = val.selected
  73. },
  74. immediate: true,
  75. deep: true,
  76. }
  77. },
  78. methods: {
  79. onChange(arr) {
  80. this.checked = arr[0] == 1 ? true : false
  81. },
  82. jumpToProductDetail() {
  83. this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.data.id}`)
  84. },
  85. },
  86. }
  87. </script>
  88. <style scoped lang="scss">
  89. .card {
  90. position: relative;
  91. height: 272rpx;
  92. padding: 0 32rpx;
  93. background-image: linear-gradient(#FAFAFF, #F3F3F3);
  94. border: 2rpx solid #FFFFFF;
  95. border-radius: 32rpx;
  96. box-sizing: border-box;
  97. column-gap: 24rpx;
  98. overflow: hidden;
  99. /deep/ .uv-checkbox__label-wra {
  100. padding: 0;
  101. }
  102. }
  103. .img {
  104. &-box {
  105. width: 144rpx;
  106. height: 144rpx;
  107. border-radius: 16rpx;
  108. overflow: hidden;
  109. }
  110. width: 100%;
  111. height: 100%;
  112. }
  113. .info {
  114. flex: 1;
  115. font-family: PingFang SC;
  116. font-weight: 400;
  117. line-height: 1.4;
  118. font-size: 26rpx;
  119. color: #8B8B8B;
  120. .title {
  121. font-weight: 600;
  122. font-size: 28rpx;
  123. color: #000000;
  124. }
  125. .desc {
  126. margin-top: 8rpx;
  127. line-height: 1.5;
  128. }
  129. .price {
  130. &-box {
  131. margin-top: 8rpx;
  132. justify-content: flex-start;
  133. column-gap: 20rpx;
  134. }
  135. font-weight: 600;
  136. font-size: 24rpx;
  137. color: #7451DE;
  138. .highlight {
  139. margin: 0 8rpx;
  140. font-size: 32rpx;
  141. }
  142. &-origin {
  143. font-size: 28rpx;
  144. line-height: 1;
  145. text-decoration: line-through;
  146. }
  147. }
  148. .tool {
  149. margin-top: 8rpx;
  150. justify-content: space-between;
  151. .count {
  152. .highlight {
  153. margin-left: 8rpx;
  154. color: #252545;
  155. }
  156. }
  157. .btn {
  158. padding: 8rpx 22rpx;
  159. font-size: 28rpx;
  160. color: #252545;
  161. border: 2rpx solid #252545;
  162. border-radius: 30rpx;
  163. }
  164. }
  165. }
  166. .sup {
  167. position: absolute;
  168. top: 28rpx;
  169. right: -60rpx;
  170. padding: 5rpx 52rpx;
  171. font-family: PingFang SC;
  172. font-weight: 400;
  173. font-size: 28rpx;
  174. line-height: 1.5;
  175. white-space: nowrap;
  176. transform: rotate(45deg);
  177. &.customized {
  178. color: #FFFFFF;
  179. background: #252545;
  180. }
  181. &.free {
  182. color: #252545;
  183. background: #D7D7FF;
  184. }
  185. }
  186. </style>