hwnc/pagesD/pages/mall/convert.vue

<template>
	<view :class="[AppTheme]" v-if="cache" class="all_box">
		<u-toast ref="uToast" :z-index="99999999999999" />
		<u-modal :show="show" :show-cancel-button="true" confirm-text="去添加" :content="'请先添加默认收货地址'" @confirm="goAdd">
		</u-modal>
		<view class="carousel">
			<swiper indicator-dots circular="true" duration="400">
				<swiper-item class="swiper-item" v-for="(item, index) in appalbum" :key="index">
					<view class="image-wrapper">
						<image :src=" item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="title-text">
			<p>{{ cache.name }}</p>
			<p class="text-primary">
				{{ cache.integral }} 积分
			</p>
		</view>
		<view class="title-text-cnent">
			<span>剩余: {{ cache.num }}</span>
			<span>单位: {{ cache.unit }}</span>
			<span>销量: {{ cache.dissells }}</span>
		</view>
		<view class="bottom_img">
			<p class="subtitle">商品详情</p>
			<u-parse :content="content" class="text" :lazy-load="true" :show-with-animation="true"></u-parse>
		</view>
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn ">
				<view class="">
					<u-icon :color="primary" labelSize="12" color="#909399" label="首页" labelPos="bottom"
						labelColor="#909399" size="25" name="home-fill"></u-icon>
				</view>
			</navigator>
			<div class=""></div>
			<view @click="opensharebox" class="p-b-btn " style="position: relative;">
				<u-icon labelSize="12" color="#909399" label="分享" labelPos="bottom" labelColor="#909399" size="25"
					name="share"></u-icon>
			</view>
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn bg-linear-gradient"
					@click="purchasing">立即兑换</button>
			</view>
			<!-- 分享 -->
			<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
		</view>
	</view>
</template>

<script>
	import api_address from '@/api/address/address.js';
	import api from '@/api/mall/index.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				sharedata: null,
				num: 0,
				shows: false,
				show: false,
				cache: '',
				apppic: '',
				appalbum: [],
				settingFile: getApp().globalData.siteinfo,
				id: '',
				content: '',
				addressData: '',
			};
		},
		onLoad(options) {
			this.$bindid.getbindid(options, this.$store);
			this.id = options.id;
			this.goods(options.id || "3");
		},
		onShow() {
			this.getAddressData()
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			return {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			}
		},
		methods: {
			opensharebox() {
				this.$refs.sbox.opensharebox(this.sharedata);
			},
			/* 去添加收货地址 */
			goAdd() {
				this.show = false;
				uni.navigateTo({
					url: '/pagesD/pages/address/address?source=1'
				})
			},
			getAddressData() {
				api_address.address().then(res => {
					if (res.status == 200) {
						let is_default = res.data.data.filter(item => item.is_default == 1);
						this.addressData = is_default[0];
						if (!this.addressData) {
							this.show = true;
						}
					}
				});
			},
			goods(id) {
				api.shoopgoods({
					id
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.data = res.data;
						this.cache = res.data.cache;
						this.apppic = res.data.apppic;
						this.appalbum = res.data.appalbum;
						this.sharedata = res.data.sharedata
						this.sharedata.title = res.data.cache.name;
						this.sharedata.path = '/pagesD/pages/mall/convert?pid=' + this
							.$getuid() + '&id=' + id;
						/* 处理富文本*/
						this.content = this.cache.content.replace(/\<img src="/gi,
							`<img style='width:100%;display:block' src="${this.settingFile.root_rich_img}`);
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
				});
			},
			purchasing() {
				this.go();
			},
			close() {

			},
			valChange(e) {
				console.log(e);
			},
			go() {
				console.log('this.addressData ',this.addressData )
				if (!this.addressData) {
					this.show = true;
					console.log('this.show ',this.show )
					return;
				}
				if (this.cache.num - this.num < 0) {
					this.$refs.uToast.show({
						title: '该产品库存不足！',
						type: 'error'
					});
					return;
				}
				const data = {
					sid: 0,
					goodstype: this.cache.type,
					goodsid: this.cache.id,
					num: this.num,
					isame: this.data.isame
				};
				console.log(data);

				api.fastbuys(data).then(res => {

					if (res.status == 200) {
						uni.showToast({
							icon: 'loading',
							title: '生成订单',
							duration: 2000
						})
						setTimeout(() => {
							this.$u.route('/pagesD/pages/order/integrals/integrals', {
								id: this.id,
								sid: 0,
								lasturl: this.data.lasturl
							});
						}, 2000);
					} else {
						this.$u.toast(res.msg);
					}
				});

			}
		}
	};
</script>

<style lang="scss">
	.all_box {
		.page-bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 95;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100upx;
			background: rgba(255, 255, 255, 0.9);
			box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);

			.p-b-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 19rpx;
				justify-content: center;
				font-size: $font-sm;
				color: $font-color-base;
				width: 96upx;
				height: 80upx;

				.yticon {
					font-size: 40upx;
					line-height: 48upx;
					color: $font-color-light;
				}

				&.active,
				&.active .yticon {
					color: $tab-color-1;
				}

				.icon-fenxiang2 {
					font-size: 42upx;
					transform: translateY(-2upx);
				}

				.icon-shoucang {
					font-size: 46upx;
				}
			}

			.action-btn-group {
				display: flex;
				height: 76upx;
				border-radius: 100px;
				overflow: hidden;
				box-shadow: 0 20upx 40upx -16upx $tab-color;
				// background: linear-gradient(to right, #ffac30);

				margin-left: 20upx;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					top: 50%;
					right: 50%;
					transform: translateY(-50%);
					height: 28upx;
					width: 0;
				}

				.action-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 400rpx;
					height: 100%;
					font-size: $font-base;
					padding: 0;
					border-radius: 0;
				}
			}
		}

		.box_top {
			height: 210rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			position: relative;
			border-bottom: 0.5rpx solid #efefef;

			.icon-close {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}

			.left_img {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.content_text {
				margin-left: 24rpx;
				height: 150rpx;
				width: 236rpx * 2;

				p:nth-child(1) {
					font-size: 30rpx;
					margin: 5rpx 0 15rpx 0;
					line-height: 40rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}

				p:nth-child(2) {
					font-size: 28rpx;
					color: #fe4535;
					margin: 0rpx 0 5rpx 0;
				}

				p:nth-child(3) {
					font-size: 24rpx;
					text-decoration: line-through;
					color: #999999;
					margin-left: 10rpx;
				}
			}
		}

		.box_bot {
			height: 144rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.pedometer {
				display: flex;
				align-items: center;
			}
		}

		.box_button {}
	}

	.text {
		background: #fff;
		padding: 20rpx 20rpx 50rpx 20rpx;
		line-height: 41rpx;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.title-text {
		padding: 30rpx;
		box-sizing: border-box;
		margin: 10rpx;
		// width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;

		p:nth-child(1) {
			width: 80%;
			font-size: 30rpx;
		}

		p:nth-child(2) {
			font-size: 32rpx;

			span {
				text-decoration: line-through;
				margin: 0 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.title-text-cnent {
		padding: 30rpx;
		box-sizing: border-box;
		margin: 10rpx;
		height: 90rpx;
		// width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #999999;
	}

	.detriment {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.bottom_img {
		.content-box {
			display: flex;
			justify-content: center;

			image {}
		}
	}

	.subtitle {
		position: relative;
		font-size: 0.24rem;
		color: #999999;
		height: 45px;
		line-height: 45px;
		text-align: center;
		font-size: 14px;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;

		&:before {
			content: '';
			position: absolute;
			width: 10%;
			height: 1px;
			top: 50%;
			background-color: #999999;
			left: 25%;
		}

		&:after {
			content: '';
			position: absolute;
			width: 10%;
			height: 1px;
			top: 50%;
			background-color: #999999;
			right: 25%;
		}
	}
</style>
<style>

</style>