smart-tourism/smart-ui-app/pages/goods/detail.vue

<template>
	<view>
		<view class="top">
			<image :src="ip + item.pic" class="pic" mode="widthFix"></image>
			<view class="title">
				<text>{{ item.title }}</text>
			</view>
			<view class="price" v-if="item.price">
				<text>¥{{ item.price }}</text>
				<text class="day">/天</text>
			</view>
		</view>
		<view class="contents">
			<u-divider>服务介绍</u-divider>
			<u-parse :html="item.contents" style="margin-top: 15px;"></u-parse>
		</view>
		<view class="footer">
			<view class="lfx">
				<view class="f" style="flex:0.6;">
					<button class="kf" open-type="contact">
						<view class="icon">&#xe62a;</view>
						<view class="tag">客服</view>
					</button>
					<button class="kf" @click="car()">
						<view class="icon">&#xe65f;</view>
						<view class="tag">购物车</view>
					</button>
				</view>
				<view class="f" style="flex: 1;">
					<view class="lfx">
						<view class="f gwc" @click="add()">加入购物车</view>
						<view class="f gm" @click="buy()">立即租赁</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			item: {}
		};
	},
	onLoad(e) {
		this.$http.request({
			url: this.$http.urls.goods_detail + e.id,
			success: res => {
				this.item = res.data.data;
				this.item.contents = res.data.data.contents.replace(/\<img/gi, '<img style=width:100%;height:auto');
			}
		});
	},
	methods: {
		//购物车
		car() {
			uni.switchTab({
				url: 'shopcar'
			});
		},
		//添加购物车
		add() {
			this.$http.request({
				url: this.$http.urls.cart_add,
				method: 'POST',
				data: { goodsId: this.item.id, userId: this.$getUser().id },
				success: res => {
					uni.showToast({ title: '已加入购物车', icon: 'none' });
				}
			});
		},
		//直接购买服务
		buy() {
			let list = [{ goodsId: this.item.id, goods: { title: this.item.title, price: this.item.price, pic: this.item.pic } }];
			uni.navigateTo({ url: 'pay?list=' + JSON.stringify(list) });
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $page;
}
.top {
	background-color: white;
	.pic {
		width: 100%;
	}
	.title {
		font-size: 15px;
		font-weight: bold;
		padding: 10px 15px 0px 15px;
	}
	.price {
		font-size: 15px;
		text-align: left;
		color: $theme-color;
		padding: 5px 15px 10px 15px;
		.day {
			padding-left: 3px;
			color: #c7c0c0;
			font-size: 12px;
		}
	}
}
.contents {
	margin-top: 10px;
	padding: 10px 10px 55px 10px;
	background-color: white;
}
.footer {
	padding-top: 8px;
}
</style>