123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <template>
- <div
- class="padding-bottom-94">
- <!--轮播图-->
- <Banner
- :arrBanner="goodsCarouselPictures"/>
- <!--价格信息-->
- <div class="main">
- <div class="header">
- <div class="price-wrap">
- <p class="price">
- <span>¥</span>
- <span>{{ goodsInfo.price && (goodsInfo.price * 1).toFixed(2) }}</span>
- </p>
- <p class="origin">券后价</p>
- </div>
- <div class="income">
- <span>预估收益 ¥</span>
- <span>{{ goodsInfo.commission && (goodsInfo.commission * 1).toFixed(2) }}</span>
- </div>
- </div>
- <p class="origin-price">原价¥ {{ goodsInfo.market_price && (goodsInfo.market_price * 1).toFixed(2) }}</p>
- <div
- class="name-wrap">
- <p>{{ goodsInfo.goods_name }}</p>
- </div>
- <div
- class="coupon-wrap"
- v-if="couponInfo.fav > 0">
- <div>
- <p class="amount">{{ couponInfo.fav }}元优惠券</p>
- <p class="expires">{{
- couponInfo.use_begin_time.replace(/\s\d{2}|:\d{2}/g, '').replace('-', '年').replace('-', '月') + '日'
- }}-{{
- couponInfo.use_end_time.replace(/\s\d{2}|:\d{2}/g, '').replace('-', '年').replace('-', '月') + '日'
- }}</p>
- </div>
- <van-button type="default">立即领券</van-button>
- </div>
- </div>
- <!--商品详情图片-->
- <div
- class="photo-list">
- <img
- v-lazy="str"
- alt=""
- v-for="(str, index) in goodsDetailPictures"
- :key="index">
- </div>
- <!--底部按钮-->
- <div class="footer">
- <a href="javascript:;">
- <span>分享赚</span>
- <span>¥{{ goodsInfo.commission }}</span>
- </a>
- <a href="javascript:;">
- <span>自购省</span>
- <span>券¥{{ couponInfo.fav }} + ¥{{ goodsInfo.commission }}</span>
- </a>
- </div>
- </div>
- </template>
- <script>
- import Banner from './child/banner'
- import { Button, Toast } from 'vant'
- import { apiGoodsDetail } from './api/api'
- export default {
- name: 'index',
- components: {
- Banner,
- 'van-button': Button
- },
- props: {
- source: {
- type: String,
- default: ''
- },
- goodsId: {
- type: [String, Number],
- default: ''
- }
- },
- data () {
- return {
- goodsInfo: {},
- couponInfo: {}, // 优惠券相关
- goodsCarouselPictures: [], // 商品轮播图
- goodsDetailPictures: [] // 商品详情图片
- }
- },
- created () {
- this.funInit()
- },
- methods: {
- async funInit () {
- try {
- const { status, data, msg } = await apiGoodsDetail(this.source, this.goodsId)
- if (status) {
- this.goodsInfo = data
- this.couponInfo = data.coupon_info
- if (Array.isArray(data.goods_carousel_pictures)) {
- this.goodsCarouselPictures = data.goods_carousel_pictures
- }
- if (Array.isArray(data.goods_detail_pictures)) {
- this.goodsDetailPictures = data.goods_detail_pictures
- }
- } else {
- Toast(msg)
- }
- } catch (e) {}
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .padding-bottom-94 {
- padding-bottom: 94px;
- }
- .main {
- width: 355px;
- margin: 0 auto;
- }
- .header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 12px;
- }
- .price-wrap {
- display: flex;
- align-items: center;
- }
- .price {
- margin-right: 15px;
- font-size: 0;
- span {
- &:nth-of-type(1) {
- margin-right: 3px;
- font-size: 16px;
- font-weight: bold;
- color: #EA483F;
- line-height: 24px;
- }
- &:nth-of-type(2) {
- font-size: 21px;
- font-weight: 800;
- color: #EA483F;
- line-height: 24px;
- }
- }
- }
- .origin {
- font-size: 11px;
- font-weight: 500;
- color: #EA483F;
- line-height: 18px;
- }
- .income {
- display: flex;
- align-items: center;
- span {
- &:nth-of-type(1) {
- font-size: 11px;
- font-weight: bold;
- color: #EA483F;
- line-height: 18px;
- }
- &:nth-of-type(2) {
- padding-top: 2px;
- font-size: 14px;
- font-weight: 500;
- color: #EA483F;
- line-height: 24px;
- }
- }
- }
- .origin-price {
- margin-top: 6px;
- font-size: 13px;
- text-decoration: line-through;
- color: #999999;
- line-height: 18px;
- }
- .name-wrap {
- margin: 10px 0 14px;
- overflow: hidden;
- img {
- width: 30px;
- height: 16px;
- margin-right: 4px;
- float: left;
- }
- p {
- font-size: 14px;
- font-weight: bold;
- color: #333333;
- line-height: 20px;
- }
- }
- .coupon-wrap {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- width: 359px;
- height: 84px;
- background: url("./image/ic_coupon_big.png") center center/100% 100% no-repeat;
- & > div {
- width: 227px;
- text-align: center;
- }
- .amount {
- font-size: 19px;
- font-weight: bold;
- color: #000000;
- line-height: 31px;
- }
- .expires {
- font-size: 11px;
- font-weight: bold;
- color: #BCA763;
- line-height: 18px;
- }
- ::v-deep .van-button--default {
- width: 86px;
- padding: 0;
- border: none;
- background: transparent;
- .van-button__text {
- font-size: 18px;
- font-weight: bold;
- color: #FFFFFF;
- }
- }
- }
- .footer {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 10;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- padding: 13px 0 30px;
- border-top: 1px solid #F1F1F1;
- background: #FFFFFF;
- a {
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 168px;
- height: 50px;
- border: none;
- border-radius: 25px;
- overflow: hidden;
- &:nth-of-type(1) {
- color: #fff;
- background: #000;
- }
- &:nth-of-type(2) {
- margin-left: 14px;
- color: #333333;
- background: #f8d548;
- }
- span {
- width: 100%;
- padding: 0 10px;
- font-size: 14px;
- font-weight: 500;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- text-align: center;
- }
- }
- }
- .photo-list {
- margin-top: 14px;
- img {
- display: block;
- width: 100%;
- max-width: 800px;
- margin: 0 auto;
- }
- }
- </style>
|