156 lines
4.1 KiB
Vue
156 lines
4.1 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>
|