RuoYi-Vue-Plus/mini-app/src/pages/mall/goods-detail.wpy

<style lang="less">


</style>

<wxs module="filters" lang="babel">
const parseImage = (imageKey) => {
return 'https://winery-1257413599.cos.ap-beijing.myqcloud.com/' + imageKey
}
module.exports.parseImage = parseImage;
</wxs>
<template>

  <nav-bar title="商品详情" />
  <div class="container">


    <van-loading v-if="!goodsItem" style="margin-top: 20px;" />

    <div v-else>

      <swiper indicator-dots="true" autoplay="true" interval="3000" style="height: 750rpx;">
        <block v-for="(item,index) in goodsImages" wx:key="index">
          <swiper-item>
            <view class="swiper-item">
              <image :src="filters.parseImage(item)" style="width: 100%;height: 750rpx;" mode="scaleToFill" />
            </view>
          </swiper-item>
        </block>
      </swiper>

      <van-cell :title="goodsItems.goodsName" value="内容能显示多长" label="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
                border="{{ false }}" />
      <van-cell title="选择规格" is-link @tap="onShowSpec" />

      <div style="margin: 10px 15px;">
        <span>商品详情</span>
        <div style="margin-top: 10px;">
          <rich-text :nodes="goodsItem.goodsDesc" />
        </div>
      </div>


      <van-popup
        :show="isShowSpec"
        closeable
        position="bottom"
        custom-style="height: 240px"
        bind:close="onCloseSpec"
      >
        <van-card
          :title="goodsSpec.specName"
          :desc="goods.specDesc"
          :price="goodsSpec.specPrice"
          :thumb="filters.parseImage(goodsSpec.specImg)"
        >
          <view slot="num" style="float:right;">
<!--            <div>{{'已优惠¥xx元'}}</div>-->
          </view>

        </van-card>

        <van-divider />

        <van-row>
          <van-col offset="1" span="8">
            <div style="display: flex; flex-direction: column;">
              <span>购买数量</span>
              <span style="font-size: 12px; color: #cccccc;">剩余:xx</span>
            </div>
          </van-col>
          <van-col offset="7" span="8">
            <van-stepper :value="count" bind:change="onChangeCount" />
          </van-col>
        </van-row>

        <van-button round type="danger" size="small" style="float:right;margin-top:10px;margin-right: 10px;">下一步
        </van-button>

      </van-popup>

      <van-goods-action>
        <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
        <van-goods-action-icon icon="shop-o" text="酒庄" />
        <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" @tap="onShowSpec" />
        <van-goods-action-button color="#7232dd" text="立即购买" @tap="onShowSpec" />
      </van-goods-action>
    </div>
  </div>

</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
import { mapActions } from '@wepy/x'
import mailApis from '../../apis/mailApis'

wepy.page({
  store,
  hooks: {},

  data: {
    detail: '<p style=\'color: #AC1630\'>富文本详情</p>',

    isShowSpec: false,
    count: 1,
    goodsItem: null,
    goodsSpec: null
  },

  computed: {

    goodsImages() {
      if (!this.goodsItem || !this.goodsItem.goodsImg) {
        return []
      }

      return this.goodsItem.goodsImg.split(',')
    }
  },

  methods: {
    ...mapActions([
      'setUserAction',
      'setFormAction'
    ]),
    handleViewTap() {
      console.log('handleVieTap clicked')
    },
    tap() {

    },

    onShowSpec() {
      this.isShowSpec = true
    },
    onCloseSpec() {
      this.isShowSpec = false
    },
    onChangeCount(e) {
      console.log(e)
    },

    callAppLaunch() {
    },
    async init(id) {
      const goodsReq = await mailApis.getGoodsById(id)
      this.goodsItem = goodsReq.data
      const ids = this.goodsItem.goodsSpec.split(',')
      console.log(ids)
      const goodsSpecReq = await mailApis.getGoodsSpecByIds(ids)

      this.goodsSpec = goodsSpecReq.rows[0]
    }
  },

  onLoad(options) {
    this.init(options.id)
  }


})
</script>
<config>
{
navigationBarTitleText: '',
usingComponents: {
"van-goods-action": "../../vant/goods-action/index",
"van-goods-action-icon": "../../vant/goods-action-icon/index",
"van-goods-action-button": "../../vant/goods-action-button/index"
}
}
</config>