157 lines
4.2 KiB
Vue
157 lines
4.2 KiB
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> |