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

156 lines
4.1 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<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>