126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
Vue
<template>
|
|
<JyPopup type="bottom" ref="popup" title="立即支付" showSave @savePost="goto('/pages/shop/continue-pay/index')">
|
|
<!-- 收获地址卡片 -->
|
|
<view class="bj">
|
|
<JyCommodityAddress class="mt40"></JyCommodityAddress>
|
|
<!-- 商品图 价格 明细 数量 -->
|
|
<view class="jy-card-commodity-content df mtb40">
|
|
<!-- 商品图 -->
|
|
<image src="https://cdn.jsdelivr.net/gh/Jiuyi-team/jiuyi-uniapp-demo/static/images/commodity.png"
|
|
mode="widthFix"></image>
|
|
<!-- 价格 明细 数量 -->
|
|
<view class="content-info">
|
|
<!-- 价格 -->
|
|
<view class="content-info-price">￥ 999.00</view>
|
|
<!-- 明细 -->
|
|
<view class="content-info-num">查看明细</view>
|
|
<!-- 数量 - 1 + -->
|
|
<view class="w200">
|
|
<uni-number-box :value="1" :step="1" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 规格 类型 颜色 -->
|
|
<view class="content-spec">
|
|
<view class="mtb20" v-for="(item, index) in 2">
|
|
<!-- 标题 -->
|
|
<view class="content-spec-title">颜色</view>
|
|
<view class="content-spec-list">
|
|
<uni-tag class="mlr10 mtb20" :inverted="true" text="item123123"
|
|
:type="0 ? 'warning' : 'default'" v-for="(item, index) in 2">
|
|
</uni-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 订单备注 -->
|
|
<view class="content-remark mtb40 ">
|
|
<view class="content-remark-title">订单备注</view>
|
|
<view class="content-remark-input">
|
|
<uni-easyinput :inputBorder="false" type="textarea" placeholder="选填，如填写，我们会在订单备注中提示您" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</JyPopup>
|
|
</template>
|
|
<script setup>
|
|
import { ref, defineEmits } from 'vue'
|
|
import JyPopup from '@/components/public/jy-popup'
|
|
// 地址
|
|
import JyCommodityAddress from '@/components/public/jy-commodity-address'
|
|
const popup = ref(null)
|
|
|
|
const goto = (url) => {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
const open = () => {
|
|
// 显示
|
|
popup.value.open();
|
|
}
|
|
//暴露方法
|
|
defineExpose({
|
|
open
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.bj {
|
|
padding: 4rpx 24rpx;
|
|
|
|
}
|
|
|
|
.jy-card-commodity-content {
|
|
|
|
image {
|
|
background: #333333;
|
|
margin-right: 32rpx;
|
|
width: 164rpx;
|
|
height: 164rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.content-spec {
|
|
margin: 20rpx 0;
|
|
|
|
.content-spec-title {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.content-spec-list {
|
|
margin: 20rpx 0;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin: 24rpx 0;
|
|
|
|
.content-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.content-bottom {
|
|
.content-bottom-price {
|
|
border-radius: 10rpx;
|
|
opacity: 1;
|
|
|
|
/* 自动布局 */
|
|
padding: 20rpx 226rpx;
|
|
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
|
|
|
.t {
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.p {
|
|
font-size: 40rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
</style> |