jiuyiUniapp/jiuyi2/pages/shop/continue-pay/index.vue

<script setup>
	import {
		ref
	} from 'vue'
	// 地址
	import JyCommodityAddress from '@/components/public/jy-commodity-address'
	// 店铺信息
	import JyShopInformation from '@/components/public/jy-shop-information'
	// 商品信息
	import JyCommodityInformation from '@/components/public/jy-commodity-information'

	import {
		bottomSafeAreaHeight
	} from '@/components/public/Mixins.js'

	// 支付方式
	const paytype = ref('1')

	// 支付方式列表
	const paytypeList = [{
			name: '微信支付',
			value: '1',
			icon: '/static/shop-weixin-pay.png'
		},
		{
			name: '支付宝支付',
			value: '2',
			icon: '/static/shop-alipay-payment.png'
		},
		{
			name: '余额支付',
			value: '3',
			icon: '/static/shop-apply-pay.png'
		}
	]

	// 选择支付方式
	function handlePayment(ev) {
		// 
	}
</script>

<template>
	<view class="app">
		<view class="bfff p25">
			<!-- 地址 -->
			<JyCommodityAddress></JyCommodityAddress>
		</view>

		<!-- 店铺和商家信息 -->
		<view class="detail oh mtb20 plr30 bfff">
			<!-- 店铺 -->
			<view class="store mtb20 plr10 df aic">
				<image class="avaar wh60 cir" src="/static/qq.png" mode="aspectFill" />
				<view class="name ml10 c333 f28">店铺名称</view>
			</view>

			<!-- 商品信息 -->
			<view class="goods mtb20 plr10 df">
				<!-- 产品图 -->
				<image class="wh180 br10"
					src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
					mode="aspectFill"></image>
				<!-- 产品信息 -->
				<view class="f1 mlr10">
					<view class="name f30">靠枕 纯棉靠枕 车载居家 纯棉100% 卡通靠枕 人体工学</view>
					<view class="spec mt10 c999 f26">升级款 小熊</view>
				</view>
				<!-- 其他 -->
				<view class=" tar">
					<view class="price">
						<text class="f20">￥</text>
						<text class="f30">5.48</text>
					</view>
					<view class="c999 f28">x1</view>
				</view>
			</view>

			<!-- 积分抵扣 -->
			<view class="line df jcr aic ptb20 plr10">
				<text class="c333 f28">积分抵扣：</text>
				<text class="price f20 cFF9B27">-￥</text>
				<text class="price f32 cFF9B27">5.00</text>
			</view>
			<!-- 应付 -->
			<view class="line df jcr aic ptb20 plr10">
				<text class="c333 f28">应付：</text>
				<text class="price f20 cFF9B27">￥</text>
				<text class="price f32 cFF9B27">5.00</text>
			</view>
		</view>

		<!-- 支付方式选择 -->
		<radio-group class="payType mtb20 plr20 bfff" @change="handlePayment">
			<label class="item rows ptb20 plr10" v-for="(item, index) in paytypeList" :key="item.value">
				<image :src="item.icon" class="wh60" mode="aspectFit" />
				<view class="f1 mlr20 c333 f28">{{item.name}}</view>
				<radio class="radio" color="#4cd964" :value="item.value" :checked="item.value === paytype" />
			</label>
			<label class="item rows ptb20 plr10">
				<image src="/static/shop-bank-payment.png" class="wh60" mode="aspectFit" />
				<view class="f1 mlr20 c333 f28">添加银行卡</view>
				<uni-icons type="right" />
			</label>
		</radio-group>

		<!-- 订单备注 -->
		<view class="remark mtb20 ptb20 plr20 bfff">
			<view class="title f30">订单备注</view>
			<view class="txtarea mt10">
				<uni-easyinput :inputBorder="false" type="textarea" placeholder="选填" />
			</view>
		</view>

		<view class="fill" style="height: 210rpx;"></view>

		<!-- 提交订单 -->
		<view class="footer df jcr plr20 bfff">
			<view class="df aic">
				<text class="c333 f28">应付：</text>
				<text class="price f20 cFF9B27">￥</text>
				<text class="price f36 cFF9B27">5.48</text>
			</view>

			<view class="btn ti primary ml20 plr60">
				<text class="cfff f24">继续付款</text>
				<view class="df cfff aic f20">
					<text class="">剩余：</text>
					<uni-countdown splitorColor="#fff" color="#fff" :show-day="false" :hour="12" :minute="12"
						:second="12" />
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 详情
	.detail {
		.line {
			border-top: 2rpx solid #eee;
		}
	}

	// 支付方式
	.payType {
		.item+.item {
			border-top: 2rpx solid #eee;
		}

		// 
		.radio {
			transform: scale(.7);
		}
	}
</style>