lineage-app/pages/shop/details/details.vue

<template>
	<view class="container">
		<!--banner-->
		<view class="tui-banner-swiper">
			<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" :style="{ height: scrollH + 'px' }" @change="bannerChange">
				<block v-for="(item, index) in banner" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage"><image :src="item" class="tui-slide-image" :style="{ height: scrollH + 'px' }" /></swiper-item>
				</block>
			</swiper>
			<view class="tui-banner-tag">
				<tui-tag padding="12rpx 18rpx" type="translucent" shape="circleLeft" :scaleMultiple="0.82" originRight>{{ bannerIndex + 1 }}/{{ banner.length }}</tui-tag>
			</view>
		</view>
		<!--banner-->
		<view class="tui-pro-detail">
			<view class="tui-product-title tui-border-radius">
				<view class="tui-pro-titbox"><view class="tui-pro-title">龙飞凤舞家族园地背景个性定制皮肤</view></view>
			</view>

			<view class="tui-discount-box tui-radius-all tui-mtop">
				<view class="tui-product-img tui-radius-all">
					内容详情
				</view>
			</view>

			<view class="tui-safearea-bottom"></view>
		</view>

		<!--底部操作栏-->
		<view class="tui-operation">
			<view class="tui-operation-left tui-right-flex tui-col-6 tui-btnbox-6" style="color: #ff6767;text-align: center;">￥69.00</view>
			<view class="tui-operation-right tui-right-flex tui-col-6 tui-btnbox-6" style="background: #ff6767 !important;color: #FFFFFF;" @click="service()">购买</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
			banner: ['../../../static/img/shop/1.jpg'],
			tabs: [
				{
					name: '商品详情'
				}
			],
		};
	},
	onLoad: function(options) {
	},
	methods: {
		back: function() {
			uni.navigateBack();
		},
		coupon() {
			uni.navigateTo({
				url: '../coupon/coupon'
			});
		},
	}
};
</script>

<style>
@import '../../../static/style/thorui.css';
page {
	background-color: #f7f7f7;
}
</style>