H5-ThreeDoorder/pages/diy/commodity_home/commodity_home.vue

<template>
	<view class="content">
		<!-- 头部商品轮播图 -->
		<view class="content-Swiper">
			<u-skeleton rows="1" :title="false" :loading='loading' rowsHeight="585rpx">
				<u-swiper :list="InforData['goods_imgs']" height="585rpx" interval="2000" circular></u-swiper>
			</u-skeleton>
		</view>
		<!-- 商品介绍 -->
		<view class="content-Introduce">
			<u-skeleton rows="1" :title="false" :loading='loading' rowsHeight="40">
				<view class="content-Introduce-Title">
					{{InforData['goods_name']}}
				</view>
			</u-skeleton>
			<view class="content-Introduce-Price" >
				<view class="content-Introduce-Price-Subsidy" :class="[loading?'skeleton':'']" :style="{'--skeleton':'10px 0 0 0'}">
					补贴卡最高抵扣￥{{_amount(InforData['deduction_price'])}}
				</view>
				<view class="content-Introduce-Price-Pay" >
					<view class="Text1">
						原价：
					</view>
					<view class="Text2" :class="[loading?'skeleton':'']">
						<text class="moneyDi">￥</text>
						<text class="money">{{_amount(InforData['pay_price'])}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="Sales-Freight">
			<u-skeleton rows="1" :title="false" :loading='loading' rowsHeight="80" :style="{'margin-top': loading?'32rpx':''}">
				<u-cell-group :border="false">
					<u-cell icon="" title="销量" :value="`${InforData['sales_num']}份`"></u-cell>
					<u-cell :border="false" icon="" title="预估运费" :value="`¥${InforData['freight_price']}`"></u-cell>
				</u-cell-group>
			</u-skeleton>
		</view>
		
		<view class="info-Imgs">
			<view class="info-Imgs-Img">
				<template v-for="item,index in InforData['goods_info_imgs']">
					<image class="img" :src="item" style="width: 100%;" mode="widthFix" :key="index"></image>
				</template>
			</view>
		</view>
		
		<view style="width: 100%;height: 200rpx;"></view>
		
		<view class="customized">
			<button class="btn" @tap="customizedClick">确认定制</button>
			<b-Bottom-Fit></b-Bottom-Fit>
		</view>
	</view>
</template>

<script>
	import {goodsInfoAPI} from '@/request/diy/index.js';
	import mixin from "@/static/js/mixin/mixin.js";
	import {
		mapMutations
	} from 'vuex';
	export default {
		mixins:[mixin],
		data() {
			return {
				// 轮播图图片未初始化时的加载状态
				loading: true,
				// 轮播图图片列表
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				InforData:{}
			};
		},
		onLoad(parameters) {
			this['goods_id'] = parameters['goods_id'];
			this.GetInfor();
		},
		mounted() {
		},
		methods:{
			...mapMutations('diy',['SetGoodsInfor']),
			GetInfor(){
				goodsInfoAPI({id:this['goods_id']}).then(res=>{
					this['InforData'] = res['data'];
					this['loading'] = false;
					this.SetGoodsInfor(res['data']);
					
					
				})
			},
			customizedClick(){
				// uni.navigateTo({
				// 	url:'/pages/diy/pay-status/pay-status?order_sn=31ZC-DIY1668074299829723&state=2'
				// });
				// return
				const outProductId = this['InforData']['id'];
				const outSkuId = '';
				const reseller = 'reseller-bmxqfx';
				const outUserId = ''; 
				console.log(getApp().parameters,'parameters')
				// 正式版
				const callback = encodeURI(`https://jc.agrimedia.cn/privilege/pages/diy/orders/confirm_payment/confirm_payment?goods_id=${this['InforData']['id']}`)
				// 新版支付测试
				// const callback = encodeURI(`https://jc.laimaidi.com/privilegetest/pages/diy/orders/confirm_payment/confirm_payment?goods_id=${this['InforData']['id']}`)
				// window.location.href = `https://songzhaopian.com/${reseller}?outProductId=${outProductId}&outUserId=${outUserId}&callback=${callback}`
				window.location.href = `https://songzhaopian.com/${reseller}?outProductId=${outProductId}&outUserId=${outUserId}&callback=${callback}`
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-cell-group__wrapper{
		background-color: #ffffff;
		margin-top: 32rpx;
	}
	page {
		background-color: #F5F5F5;
	}
	.info-Imgs-Img{
		padding: 32rpx;
		background-color: #ffffff;
	}
	.content {
		&-Introduce {
			padding: 32rpx;
			background-color: #ffffff;

			/deep/ &-Title {
				font-size: 32rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-bottom: 30rpx;
			}

			&-Price {
				display: flex;
				justify-content: space-between;

				&-Pay {
					display: flex;
					align-items: flex-end;
					flex-direction: row;
					line-height: 30rpx;

					.Text1 {
						font-size: 24rpx;
					}
					.Text2 {
						color: #FF2A30;
						.moneyDi{
							font-size: 28rpx;
							margin-right: 5rpx;
						}
						.money{
							font-weight: 800; 
							font-size: 42rpx;
						}
					}
				}

				&-Subsidy {
					display: inline-block;
					font-size: 22rpx;
					color: #FFFFFF;
					background-color: #FF7700;
					border-radius: 10rpx;
					padding: 8rpx 30rpx;
					position: relative;
					// overflow: hidden;

					&::after {
						content: '';
						width: 20rpx;
						height: 20rpx;
						background-color: #FFFFFF;
						border-radius: 50rpx;
						position: absolute;
						left: -10rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					&::before {
						content: '';
						width: 20rpx;
						height: 20rpx;
						background-color: #FFFFFF;
						border-radius: 50rpx;
						position: absolute;
						right: -10rpx;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
		.Sales-Freight{
			color: #666666;
			font-size:28rpx;
		}
	}
	
	.customized{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		.btn{
			width: 90%;
			height: 80rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 80rpx;
			background: linear-gradient(180deg, #FFAF00 0%, #FF7700 100%);
		}
	}
</style>