|
|
@@ -0,0 +1,332 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- #ifdef MP-ALIPAY -->
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品详情" leftIconSize="0">
|
|
|
+ </u-navbar>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-ALIPAY -->
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品详情"></u-navbar>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <view class="detail">
|
|
|
+ <view class="detail-swiper">
|
|
|
+ <u-swiper :list="picUrlArr" height="375" radius="0" :indicator="true" :circular="true"
|
|
|
+ indicatorMode="dot" indicatorActiveColor="#FA822C"></u-swiper>
|
|
|
+ </view>
|
|
|
+ <!-- 详情 -->
|
|
|
+ <view class="detail-info">
|
|
|
+ <view class="detail-info-left">
|
|
|
+ <view class="detail-info-left__title ells">{{ info.title }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="detail-infotwo flex">
|
|
|
+ <view class="detail-infotwo-num">
|
|
|
+ <view class="">￥{{ $numberFormat(info.value) }}</view>
|
|
|
+ <view class="txt" v-if="info.originPrice">￥<text>{{ info.originPrice }}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="detail-info-right">销量：30个</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="detail-goods">产品介绍</view>
|
|
|
+ <view class="detail-description">
|
|
|
+ <u-parse :content="description" :selectable="true"></u-parse>
|
|
|
+ </view>
|
|
|
+ <view style="detail-merchant" @click="toCompanyData" v-if="info.merchantInfo?true:false">
|
|
|
+ <view class="detail-merchant-warp">
|
|
|
+ <view class="detail-merchant-warp-one">商家信息</view>
|
|
|
+ <view class="detail-merchant-warp-two">
|
|
|
+ <view style="float: left;">前往查看</view>
|
|
|
+ <u-icon style="float: right;" name="arrow-right" size="18"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer-fixed">
|
|
|
+ <view class="footer-fixed-content flex">
|
|
|
+ <view class="footer-fixed-content__price" >
|
|
|
+ <button @click="exchange">立即购买</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 支付弹框组件 -->
|
|
|
+ <pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" v-if="payShow" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ import appId from '@/config/appId.js'
|
|
|
+ import { formatRichText } from '@/utils/util.js'
|
|
|
+ import PayPopup from '../../components/pay-popup/pay-popup.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ PayPopup,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ boxId: '',
|
|
|
+ picUrlArr: [],
|
|
|
+ info: {},
|
|
|
+ prizeList: [],
|
|
|
+ description: '',
|
|
|
+ goodsId: '',
|
|
|
+
|
|
|
+ payShow: false,
|
|
|
+ payInfo: {},
|
|
|
+ purchasePopupShow: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(opthios) {
|
|
|
+ this.getDetail(opthios.id)
|
|
|
+ this.goodsId = opthios.id
|
|
|
+ this.boxId = opthios.boxId
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetail(id) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/exchange/goods/detail', {
|
|
|
+ noToken: true,
|
|
|
+ goodsId: id
|
|
|
+ }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.info = res.data
|
|
|
+ let picUrlArr = res.data.picUrl.split(',')
|
|
|
+ picUrlArr.forEach(item => {
|
|
|
+ this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
|
|
|
+ })
|
|
|
+ // 处理富文本
|
|
|
+ // #ifndef MP-ALIPAY
|
|
|
+ const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
|
|
|
+ .replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
|
|
|
+ ".png?imageView2/2/w/750\"");
|
|
|
+ this.description = formatRichText(description);
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP-ALIPAY
|
|
|
+ res.data.description.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
|
|
|
+ res.data.description.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
|
|
|
+ res.data.description.split(".png\"").join(".png?imageView2/2/w/750\"")
|
|
|
+ this.description = formatRichText(res.data.description);
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ close() {
|
|
|
+ this.payShow = false
|
|
|
+ },
|
|
|
+ toProcess(id) {
|
|
|
+ this.payShow = false
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packagePrize/purchase/index?boxId=${ this.boxId }&orderId=${ id }&isTry=0`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ exchange() {
|
|
|
+ console.log(this.info);
|
|
|
+ let data = {
|
|
|
+ couponIds: [],
|
|
|
+ autoCoupon: 1,
|
|
|
+ boxId: this.boxId,
|
|
|
+ orderNum: 1,
|
|
|
+ appSource: appId
|
|
|
+ }
|
|
|
+ $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ let info = {
|
|
|
+ ...res.data,
|
|
|
+ ...this.info,
|
|
|
+ picUrl: env.filePublic + res.data.picUrl.split(',')[0],
|
|
|
+ }
|
|
|
+ this.payInfo = info
|
|
|
+ this.payShow = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ toCompanyData() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageGoods/goods/company?goodsId=${ this.goodsId }`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .detail {
|
|
|
+
|
|
|
+ // 商品轮播
|
|
|
+ &-swiper {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 详情
|
|
|
+ &-infotwo {
|
|
|
+ background-color: #fff;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &-num {
|
|
|
+ view {
|
|
|
+ display: inline-block;
|
|
|
+ color: #F9822C;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ margin-left: 14rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-weight: 400;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ &-info {
|
|
|
+ background-color: #fff;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 34rpx;
|
|
|
+ margin-bottom: 22rpx;
|
|
|
+
|
|
|
+ &-left {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ max-height: 80rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ // margin-bottom: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__coin {
|
|
|
+ display: flex;
|
|
|
+ line-height: 30rpx;
|
|
|
+ margin-bottom: 26rpx;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ color: #FA822C;
|
|
|
+ margin-right: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 34rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__price {
|
|
|
+ line-height: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-right {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-goods {
|
|
|
+ height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 90rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-description {
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-merchant {
|
|
|
+ height: 88rpx;
|
|
|
+ // text-align: center;
|
|
|
+ line-height: 88rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ &-warp {
|
|
|
+ height: 88rpx;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ &-one {
|
|
|
+ float: left;
|
|
|
+ margin: 20rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-two {
|
|
|
+ float: right;
|
|
|
+ margin: 20rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置ios刘海屏底部横线安全区域
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-fixed {
|
|
|
+ position: fixed;
|
|
|
+ bottom: var(--window-bottom);
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 11;
|
|
|
+ box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
|
|
|
+ background: #fff;
|
|
|
+ // 设置ios刘海屏底部横线安全区域
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 132rpx;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ &__price {
|
|
|
+
|
|
|
+ button {
|
|
|
+ line-height: 82rpx;
|
|
|
+ width: 420rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background: #F9822C;
|
|
|
+ border-radius: 20px;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
