templatePrice.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template name="cm-acttags">
  2. <!-- 楼层价格显示公共组件 -->
  3. <view>
  4. <template v-if="vipFlag == 1">
  5. <view class="title-none" v-if="goods.priceFlag === 1"> <text class="p big">¥未公开价格</text> </view>
  6. <view
  7. class="price tui-skeleton-rect"
  8. v-else
  9. :class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
  10. >
  11. <text class="p sm">¥</text>
  12. <text class="p big">{{
  13. (PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
  14. ? goods.originalPrice
  15. : goods.price) | NumFormat
  16. }}</text>
  17. </view>
  18. </template>
  19. <template v-else>
  20. <!-- 供应商查看商品价格 -->
  21. <template v-if="userIdentity == 3">
  22. <template v-if="goods.shopId == shopId">
  23. <view class="title-none" v-if="goods.priceFlag === 1">
  24. <text class="p big">¥未公开价格</text>
  25. </view>
  26. <view
  27. class="price tui-skeleton-rect"
  28. v-else
  29. :class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
  30. >
  31. <text class="p sm">¥</text>
  32. <text class="p big">{{
  33. (PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
  34. ? goods.originalPrice
  35. : goods.price) | NumFormat
  36. }}</text>
  37. </view>
  38. </template>
  39. <template v-else>
  40. <view class="no-price">
  41. <view class="p-stars">
  42. <text class="p-no">¥</text>
  43. <uni-grader :grade="Number(goods.priceGrade)" :margin="14"></uni-grader>
  44. </view>
  45. </view>
  46. </template>
  47. </template>
  48. <!-- 个人机构查看价格 -->
  49. <template v-else-if="userIdentity === 4">
  50. <view class="title-none" v-if="goods.priceFlag === 1"> <text class="p big">¥未公开价格</text> </view>
  51. <view class="title-none" v-if="goods.priceFlag === 2">
  52. <text class="p big">¥价格仅会员可见</text>
  53. </view>
  54. <view class="title-none" v-if="goods.priceFlag === 3">
  55. <text class="p big">¥仅医美机构可见</text>
  56. </view>
  57. <view
  58. class="price tui-skeleton-rect"
  59. v-if="goods.priceFlag === 0"
  60. :class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
  61. >
  62. <text class="p sm">¥</text>
  63. <text class="p big">{{
  64. (PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
  65. ? goods.originalPrice
  66. : goods.price) | NumFormat
  67. }}</text>
  68. </view>
  69. </template>
  70. <template v-else-if="userIdentity === 2">
  71. <view class="title-none" v-if="goods.priceFlag === 1"> <text class="p big">¥未公开价格</text> </view>
  72. <view class="title-none" v-if="goods.priceFlag === 3">
  73. <text class="p big">¥仅医美机构可见</text>
  74. </view>
  75. <view
  76. class="price tui-skeleton-rect"
  77. v-else
  78. :class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
  79. >
  80. <text class="p sm">¥</text>
  81. <text class="p big">{{
  82. (PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
  83. ? goods.originalPrice
  84. : goods.price) | NumFormat
  85. }}</text>
  86. </view>
  87. </template>
  88. <!-- 协销和会员机构查看价格 -->
  89. <template v-else>
  90. <view class="title-none" v-if="goods.priceFlag === 1"> <text class="p big">¥未公开价格</text> </view>
  91. <view
  92. class="price tui-skeleton-rect"
  93. v-else
  94. :class="PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1 ? 'none' : ''"
  95. >
  96. <text class="p sm">¥</text>
  97. <text class="p big">{{
  98. (PromotionsFormat(goods.promotions) || goods.svipProductFlag == 1
  99. ? goods.originalPrice
  100. : goods.price) | NumFormat
  101. }}</text>
  102. </view>
  103. </template>
  104. </template>
  105. </view>
  106. </template>
  107. <script>
  108. import { mapState, mapMutations } from 'vuex'
  109. import uniGrader from '@/components/uni-grade/uni-grade.vue'
  110. export default {
  111. name: 'cm-price',
  112. components: {
  113. uniGrader
  114. },
  115. props: {
  116. product: {
  117. type: Object
  118. }
  119. },
  120. data() {
  121. return {
  122. vipFlag: 0, // 是否是超级会员 0否 1是
  123. shopId: 0, // 是否是供应商
  124. userIdentity: 0, // 用户类型
  125. goods: {}
  126. }
  127. },
  128. filters: {
  129. NumFormat: function(text) {
  130. //处理金额
  131. return Number(text).toFixed(2)
  132. }
  133. },
  134. created() {
  135. this.initData(this.product)
  136. },
  137. computed: {
  138. ...mapState(['hasLogin', 'isWxAuthorize'])
  139. },
  140. watch: {
  141. pageData: {
  142. handler: function(el) {
  143. //监听对象的变换使用 function,箭头函数容易出现this指向不正确
  144. this.product = el
  145. this.initData(this.product)
  146. },
  147. deep: true
  148. }
  149. },
  150. methods: {
  151. async initData(data) {
  152. const userInfo = await this.$api.getStorage()
  153. this.shopId = userInfo.shopId ? userInfo.shopId : 0
  154. this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
  155. this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
  156. this.goods = data
  157. },
  158. isShowVipFlag(pros) {
  159. if (pros.priceFlag != 1) {
  160. if (this.userIdentity == 4 && this.vipFlag == 1) {
  161. return true
  162. } else if (this.userIdentity == 2) {
  163. return true
  164. }
  165. }
  166. },
  167. PromotionsFormat(promo) {
  168. //促销活动类型数据处理
  169. if (promo != null) {
  170. if (promo.type == 1 && promo.mode == 1) {
  171. return true
  172. } else {
  173. return false
  174. }
  175. }
  176. return false
  177. }
  178. }
  179. }
  180. </script>
  181. <style lang="scss">
  182. .price {
  183. color: #ff2a2a;
  184. line-height: 54rpx;
  185. &.none {
  186. text-decoration: line-through;
  187. color: #999999;
  188. }
  189. .sm {
  190. font-size: $font-size-24;
  191. }
  192. .big {
  193. font-size: $font-size-28;
  194. }
  195. }
  196. .title-none {
  197. font-size: $font-size-26;
  198. color: #ff2a2a;
  199. line-height: 54rpx;
  200. }
  201. </style>