point-app/pagesHome/order/detail.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="one_1">

						</view>
						<view class="one_2">
							<text class="money_1" v-if="infospecs.leader_price"><text>团长价¥</text>{{infospecs.leader_price||0}}</text>
							<text class="money" v-if="infospecs.price"><text>特价¥</text>{{infospecs.price||0}}</text>
							<text class="money" v-if="!infospecs.price&&!infospecs.leader_price"><text>¥</text>{{infospecs.sell_money||0}}</text>
							<text class="money"><text>¥</text>{{infospecs.flow_money||0}}</text>
						</view>
						<view class="one_3" v-if="discount">
							<text v-if="discount.full_decrement&&discount.full_decrement.length>0" class="act" v-for="(item,index) in discount.full_decrement" :key="index">{{item}}</text>
							<text v-if="discount.full_fold&&discount.full_decrement.length>0" class="act" v-for="(item,index) in discount.full_fold" :key="index">{{item}}</text>
						</view>
						<view class="one_4">
							<text class="num">已售{{info.goods.sell_num||0}}件</text>
						</view>
						<view class="one_5">
							5
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="two">
				<uni-goods-nav :options="options" :button-group="buttonGroup" @click="toNavleft" @buttonClick="toNavright" />
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				// 底部菜单
				options: [{
						icon: 'shop',
						text: '店铺',
						type: 'shop',
						route: 'pagesHome/shop/index',
					},
					{
						icon: 'cart',
						text: '购物车',
						type: 'market',
						route: 'pages/market/index',
					},
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff',
						type: '0'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff',
						type: '1'
					}
				],
				// one_2
				// 商品价格
				infospecs: {},
				// one_3
				discount: {
					full_decrement: [
						'测试一'
					]
				}
			};
		},
		onLoad: function(e) {

		},
		onShow: function() {

		},
		onUnload: function() {

		},
		methods: {
			// 店铺,购物车
			toNavleft(e) {
				const that = this;
				if (e.content.type == 'shop') {
					that.toShop();
				} else if (e.content.type == 'market') {
					let obj = {
						route: e.content.route
					}
					that.toPath(obj)
				}
			},
			// 加入购物车,立即购买
			toNavright(e) {
				const that = this;
				that.$set(that, `popupShow`, '1');
				that.$set(that, `btn_type`, e.content.type);
				that.$refs.specShow.open();
			},

		},
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			flex-grow: 1;

			.one_2 {
				border-bottom: 0.5vw solid var(--f9Color);
				padding: 2vw;

				.money_1 {
					color: #23B67A;
					font-size: 20px;
					padding: 0 1vw 0 0;
					font-weight: bold;

					text {
						font-size: 14px;
					}
				}

				.money {
					font-size: 20px;
					padding: 0 1vw 0 0;
					color: #ff0000;
					font-weight: bold;

					text {
						font-size: 14px;
					}
				}

				.money:last-child {
					font-size: 16px;
					color: #858585;
					text-decoration: line-through;
				}
			}

			.one_3 {
				display: flex;
				flex-wrap: wrap;
				padding: 1vw;
				border-bottom: 0.5vw solid var(--f9Color);

				.act {
					font-size: 12px;
					border: 1px solid var(--fFB1Color);
					margin: 0 1vw 1vw 0;
					color: var(--fFB1Color);
					border-radius: 6px;
					padding: 0 1vw;
				}

				.num {
					font-size: 12px;
					color: #858585;
				}
			}

			.one_4 {
				display: flex;
				flex-wrap: wrap;
				padding: 1vw;
				border-bottom: 0.5vw solid var(--f9Color);

				.num {
					font-size: 12px;
					color: #858585;
				}

			}
		}

		.two {
			width: 100vw;
			height: 8vh;
			overflow: hidden;
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>