1
0

detail-price-share.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. <template>
  2. <view class="detail-price-share" :style="{paddingBottom: level_show !== 2 ? '20rpx' : 0}">
  3. <view class="goods-name">
  4. <view class="name">{{detail.name}}
  5. <view v-if="detail.sales" class="bd-sales">销量{{detail.sales}}{{detail.unit}}</view>
  6. </view>
  7. <view class="subtitle" v-if="detail.subtitle">{{detail.subtitle}}</view>
  8. </view>
  9. <view class="bd-tags">
  10. <div class="bd-tag-group">
  11. <view class="bd-tag">
  12. <image src="../../../static/image/icon/icon-zheng.png"></image>
  13. <text>正品保证</text>
  14. </view>
  15. <view class="bd-tag">
  16. <image src="../../../static/image/icon/icon-tui.png" style="width: 34rpx;"></image>
  17. <text>退换无忧</text>
  18. </view>
  19. </div>
  20. <view class="bd-tag bd-tag-share" @click="share_show" style="background: #ff3366">
  21. <image src="../../../static/image/icon/icon-share1.png"></image>
  22. <text style="background-color:#F84469;color: #fff;">分享商品</text>
  23. </view>
  24. </view>
  25. <view class="bottom">
  26. <view>
  27. <text class="des" :class="theme+'-m-text ' + theme" v-if="de_status === 0 && swell_status === 0">
  28. 定金¥{{de_price}}抵¥{{swell_price}}
  29. </text>
  30. <text class="des" :class="theme+'-m-text ' + theme" v-if="de_status === 1 && swell_status === 0">
  31. 定金¥{{de_price_min}}-{{de_price_max}}抵¥{{swell_price}}
  32. </text>
  33. <text class="des" :class="theme+'-m-text ' + theme" v-if="de_status === 1 && swell_status === 1">
  34. 定金¥{{de_price_min}}-{{de_price_max}}抵¥{{swell_price_min}}-{{swell_price_max}}
  35. </text>
  36. <text class="des" :class="theme+'-m-text ' + theme" v-if="de_status === 0 && swell_status === 1">
  37. 定金¥{{de_price}}抵¥{{swell_price_min}}-{{swell_price_max}}
  38. </text>
  39. </view>
  40. <view class="time">
  41. 尾款支付时间:{{set_time}}
  42. </view>
  43. </view>
  44. <view>
  45. <app-share-qr-code v-model="shareShow"
  46. :url="url"
  47. :has-poster-nav="hasPosterNav"
  48. :poster-config="posterConfig"
  49. :poster-generate="posterGenerate"
  50. ></app-share-qr-code>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
  56. import {mapGetters, mapState} from 'vuex';
  57. export default {
  58. name: "detail-price-share",
  59. data() {
  60. return {
  61. price: 0,
  62. status: 0,
  63. de_price: 0,
  64. de_status: 0,
  65. swell_price: 0,
  66. swell_status: 0,
  67. de_price_min: 0,
  68. de_price_max: 0,
  69. swell_price_min: 0,
  70. swell_price_max: 0,
  71. shareShow: false,
  72. member_price_min: 0,
  73. member_price_max: 0,
  74. member_price_status: 0,
  75. start_end: '',
  76. }
  77. },
  78. props: {
  79. price_min: Number,
  80. price_max: Number,
  81. attr: Array,
  82. original_price: String,
  83. url: String,
  84. level_show: Number,
  85. group_min_member_price: Number,
  86. group_max_member_price: Number,
  87. end_prepayment_at: String,
  88. pay_limit: Number,
  89. cats: Array,
  90. id: Number,
  91. discount: {
  92. type: String
  93. },
  94. is_vip_card_user: {
  95. type: Number,
  96. default() {
  97. return 0;
  98. }
  99. },
  100. theme: String,
  101. posterConfig: String,
  102. posterGenerate: String,
  103. hasPosterNav: {
  104. type: Boolean,
  105. default() {
  106. return false
  107. },
  108. },
  109. themeObject: Object,
  110. detail: Object,
  111. },
  112. mounted() {
  113. if (this.price_min === this.price_max) {
  114. this.status = 0;
  115. } else {
  116. this.status = 1;
  117. }
  118. let deposit = [];
  119. let swell_deposit = [];
  120. for (let i = 0; i < this.attr.length; i++) {
  121. deposit.push(this.attr[i].deposit);
  122. swell_deposit.push(this.attr[i].swell_deposit);
  123. }
  124. let max = Math.max.apply(null, deposit);
  125. let min = Math.min.apply(null, deposit);
  126. let swell_max = Math.max.apply(null, swell_deposit);
  127. let swell_min = Math.min.apply(null, swell_deposit);
  128. if (max === min) {
  129. this.de_price = min;
  130. this.de_status = 0;
  131. } else {
  132. this.de_status = 1;
  133. this.de_price_min = min;
  134. this.de_price_max = max;
  135. }
  136. if (swell_min === swell_max) {
  137. this.swell_price = swell_min;
  138. this.swell_status = 0;
  139. } else {
  140. this.swell_status = 1;
  141. this.swell_price_min = swell_min;
  142. this.swell_price_max = swell_max;
  143. }
  144. if (this.group_min_member_price === this.group_max_member_price) {
  145. this.member_price_status = 0;
  146. } else {
  147. this.member_price_status = 1;
  148. }
  149. },
  150. computed: {
  151. set_time() {
  152. if (this.pay_limit === -1) {
  153. return `${this.getDate(this.end_prepayment_at)} ~ 无期限`
  154. } else {
  155. this.addDate(this.end_prepayment_at, this.pay_limit);
  156. return `${this.getDate(this.end_prepayment_at)} ~ ${this.addDate(this.end_prepayment_at, this.pay_limit)}`
  157. }
  158. },
  159. ...mapGetters('mallConfig', {
  160. vip: 'getVip'
  161. }),
  162. ...mapState({
  163. mall: state => state.mallConfig.mall,
  164. isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
  165. })
  166. },
  167. methods: {
  168. addDate(date, days) {
  169. if (days == undefined || days == '') {
  170. days = 1;
  171. }
  172. var date = new Date(date.replace(/-/g, '/'));
  173. date.setDate(date.getDate() + days);
  174. let month = date.getMonth() + 1;
  175. let day = date.getDate();
  176. let mm = "'" + month + "'";
  177. let dd = "'" + day + "'";
  178. if (mm.length == 3) {
  179. month = "0" + month;
  180. }
  181. if (dd.length == 3) {
  182. day = "0" + day;
  183. }
  184. let hour = date.getHours();//得到小时
  185. let minu = date.getMinutes();//得到分钟
  186. let sec = date.getSeconds();//得到秒
  187. if (sec === 0) {
  188. sec = 59;
  189. if (minu === 0) {
  190. minu = 59;
  191. if (hour === 0) {
  192. hour = 23;
  193. day = '0' + Number(day) - 1;
  194. } else {
  195. hour = hour - 1;
  196. }
  197. } else {
  198. minu = minu - 1;
  199. }
  200. } else {
  201. sec = sec - 1;
  202. }
  203. sec = `${sec}`;
  204. minu = `${minu}`;
  205. hour = `${hour}`;
  206. if (hour.length === 1) {
  207. hour = `0${hour}`
  208. }
  209. if (minu.length === 1) {
  210. minu = `0${minu}`
  211. }
  212. if (sec.length === 1) {
  213. sec = `0${sec}`
  214. }
  215. let time = date.getFullYear() + "." + month + "." + day + ' ' + hour + ':' + minu + ':' + sec;
  216. return time;
  217. },
  218. getDate(end_prepayment_at) {
  219. let newDate = new Date(end_prepayment_at.replace(/-/g, '/'));
  220. newDate.setDate(newDate.getDate());
  221. let month = newDate.getMonth() + 1;
  222. let day = newDate.getDate();
  223. let mm = "'" + month + "'";
  224. let dd = "'" + day + "'";
  225. let hour = newDate.getHours();//得到小时
  226. let minu = newDate.getMinutes();//得到分钟
  227. let sec = newDate.getSeconds();//得到秒
  228. sec = `${sec}`;
  229. minu = `${minu}`;
  230. hour = `${hour}`;
  231. if (mm.length == 3) {
  232. month = "0" + month;
  233. }
  234. if (dd.length == 3) {
  235. day = "0" + day;
  236. }
  237. if (hour.length === 1) {
  238. hour = `0${hour}`
  239. }
  240. if (minu.length === 1) {
  241. minu = `0${minu}`
  242. }
  243. if (sec.length === 1) {
  244. sec = `0${sec}`
  245. }
  246. let time = newDate.getFullYear() + "." + month + "." + day + ' ' + hour + ':' + minu + ':' + sec;
  247. return time;
  248. },
  249. share_show() {
  250. if (this.$user.isLogin()) {
  251. this.shareShow = true;
  252. } else {
  253. this.$user.getInfo();
  254. }
  255. },
  256. },
  257. components: {
  258. 'app-share-qr-code': appShareQrCode
  259. }
  260. }
  261. </script>
  262. <style scoped lang="scss">
  263. .detail-price-share {
  264. background-color: #ffffff;
  265. width: 100%;
  266. padding: 20upx;
  267. margin-top: 16upx;
  268. .goods-name{
  269. .name{
  270. font-size: 30upx;
  271. color: #000000;
  272. line-height: 42upx;
  273. margin-top: 5upx;
  274. font-weight: 600;
  275. }
  276. .subtitle{
  277. margin-top: 23upx;
  278. font-size: 24upx;
  279. line-height: 34upx;
  280. color: #999999;
  281. }
  282. }
  283. .presale {
  284. font-size: #{56rpx};
  285. margin-right: #{16rpx};
  286. font-family: DIN;
  287. text-align: end;
  288. .symbol {
  289. font-size: #{32rpx};
  290. }
  291. }
  292. .title {
  293. font-size: #{28rpx};
  294. }
  295. .des {
  296. font-size: #{26rpx};
  297. line-height: #{26rpx};
  298. }
  299. .original-price {
  300. font-size: #{24rpx};
  301. color: #999999;
  302. margin-top: #{8rpx};
  303. text-decoration: line-through;
  304. }
  305. .share {
  306. margin-top: #{23rpx};
  307. width: #{50rpx};
  308. height: #{80rpx};
  309. padding: #{5rpx};
  310. > image {
  311. width: #{40rpx};
  312. height: #{40rpx};
  313. }
  314. > text {
  315. font-size: #{21rpx};
  316. color: #666666;
  317. white-space: nowrap;
  318. }
  319. }
  320. }
  321. .bd-sales {
  322. color: #999999;
  323. font-size: 30rpx;
  324. float: right;
  325. }
  326. .bd-tags{
  327. width: 100%;
  328. display: flex;
  329. margin-top: 24rpx;
  330. justify-content: space-between;
  331. }
  332. .bd-tag-group{
  333. flex: 1;
  334. display: flex;
  335. }
  336. .bd-tags .bd-tag{
  337. display: flex;
  338. align-items: center;
  339. margin-right: 10px;
  340. }
  341. .bd-tags .bd-tag image{
  342. width: 32rpx;
  343. height: 32rpx;
  344. }
  345. .bd-tags .bd-tag text{
  346. background: #FED2D5;
  347. color: #E73E67;
  348. padding: 5rpx 10rpx;
  349. border-radius: 10rpx;
  350. font-size: 26rpx;
  351. margin-left: 10rpx;
  352. }
  353. .bd-tag-share{
  354. background: #FED2D5;
  355. color: #E73E67;
  356. border-radius: 10rpx;
  357. padding: 5rpx 10rpx;
  358. }
  359. .bd-tag-share image{
  360. margin-right: -10rpx;
  361. }
  362. .bd-tag-share text{
  363. font-size: 30rpx;
  364. margin-left: 0;
  365. }
  366. .bd-vip{
  367. margin-top: 24rpx;
  368. }
  369. .bd-vip image{
  370. height: 72rpx;
  371. width: 100%;
  372. }
  373. .member-price {
  374. .symbol {
  375. font-size: #{23rpx};
  376. }
  377. .member {
  378. color: #f39800;
  379. font-family: DIN;
  380. .m-p {
  381. font-family: DIN;
  382. font-size: #{40rpx};
  383. }
  384. .logo {
  385. display: inline-block;
  386. font-size: #{20rpx};
  387. border: #{1rpx} solid;
  388. padding: #{2rpx 4rpx};
  389. margin-left: #{12rpx};
  390. border-radius: #{8rpx};
  391. margin-bottom: #{5rpx};
  392. }
  393. }
  394. .yushou {
  395. .p {
  396. font-size: #{26rpx};
  397. font-family: DIN;
  398. }
  399. .p-t {
  400. font-size: #{26rpx};
  401. margin-left: #{8rpx};
  402. }
  403. }
  404. .ori {
  405. text-decoration: line-through;
  406. color: #999999;
  407. font-size: #{24rpx};
  408. margin-left: #{16rpx};
  409. }
  410. }
  411. .time {
  412. font-size: #{22rpx};
  413. color: #999999;
  414. }
  415. </style>