jianbing/pages/shop/shop.vue

<template>
	<view>
		<view class="shop">
			<view>
				<u-swiper :list="goods.goods_image" name="uri" height="500" border-radius="0" mode="number" indicator-pos="bottomRight"></u-swiper>
			</view>
			
			<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
				<view class="nr">{{ goods.name }}</view>
				<view class="mt10 row u-row-between">
					<view class="row">
						<view class="primary">
							<price-format :price="goods.min_price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
						</view>
						<view class="sale u-text-center primary u-m-l-12">0折</view>
						<view class="primary u-m-l-12">
							<price-format :lineThrough="true" color="#999" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="goods.market_price"></price-format>
						</view>
					</view>
					<view class="text-999">已售66</view>
				</view>
				
				<view class="u-m-t-20 u-m-b-20">
					<u-line color="#eee" />
				</view>
				<view>
					<view>
						<text>须知</text>
						<text class="text-999 ml20">周一至周日可用</text>
					</view>
					
					<view class="row-between mt20">
						<view>
							<text>保障</text>
							<text class="text-999 ml20">随时退 过期自动退</text>
						</view>
						<view>
							<u-button @click="openSpec" hover-class="none" 
								:customStyle="{width: '116rpx', height: '46rpx', lineHeight: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}" 
								:hair-line="false" 
								shape="circle">
									选规格
							</u-button>
						</view>
					</view>
				</view>
			</view>
				
			<view class="u-m-t-24">
				<view class="u-m-l-48 nr">详情</view>
				<view class="bg-white mx24 px24 u-m-t-24 u-p-t-20 u-p-b-20 br24">
					<u-image :src="cloudPath + 'img/banner.png'" height="600"></u-image>
				</view>
			</view>
			
			<view class="u-m-t-24">
				<view class="u-m-l-48 nr">购买须知</view>
				<view class="bg-white mx24 px24 u-m-t-24 u-p-t-20 u-p-b-20 br24">
					这里是购买须知的内容
				</view>
			</view>
		</view>
		
		<view class="fixed bg-white row-between px48 u-p-t-20 u-p-b-20">
			<view class="column u-text-center">
				<view class="row-center">
					<u-image :src="cloudPath + 'img/icon_store.png'" width="48" height="48"></u-image>
				</view>
				<view>门店</view>
			</view>
			<view class="u-m-l-64 flex1">
				<u-button hover-class="none"  @click="showSpecFun"
					:customStyle="{height: '92rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx'}" 
					:hair-line="false" 
					shape="circle">
						立即购买
				</u-button>
			</view>
		</view>
		
		<shop-spec v-model="showSpec" :name="goods.name" :goods="goods" @close="showSpec = false" @confirm="confirmSpec" @buynow="onBuy"></shop-spec>
	</view>
</template>

<script>
	import {
		getGoodsDetail,
		addCart,
		getPoster,
		getCartNum
	} from '@/api/store'
	import {
		toLogin
	} from '@/utils/login'

	export default {
		data() {
			return {
				id: 0,
				showSpec: false,
				goods: [],
				spec: [],
				checkedGoods: {},
			}
		},

		onLoad(options) {
			this.id = options.id
		},

		onShow() {
			this.getGoodsDetailFun();
		},

		methods: {
			// 获取商品详情
			async getGoodsDetailFun() {
				const {
					data,
					code
				} = await getGoodsDetail({
					id: this.id
				});
				if (code == 1) {
					this.goods = data
					console.log(this.goods.goods_image);
					
				}
			},

			// 打开商品规格
			openSpec() {
				this.showSpec = true
			},

			// 获取选择的商品规格
			confirmSpec(data) {
				console.log("data>>>", data.spec);
				this.spec = data.spec
				this.showSpec = false
			},

			onChangeGoods(e) {
				console.log(e);
				this.checkedGoods = e.detail;
			},

			// 选择规格
			showSpecFun() {
				if (!this.isLogin) return toLogin();
				this.showSpec = true;
			},

			// 购买商品
			onBuy(e) {
				let {id, goodsNum} = e.detail
				let goods = [{item_id: id, num: goodsNum}]
				const params = {goods}
				this.showSpec = false
				uni.navigateTo({
					url: '/pages/order_now/order_now?data=' + encodeURIComponent((JSON.stringify(params)))
				})
			}
		}
	}
</script>

<style lang="scss">
	.shop {
		padding-bottom: 180rpx;
		.sale {
			background-color: #FEFBEA;
			width: 100rpx;
			height: 30rpx;
			line-height: 30rpx;
		}
	}
	
	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>