You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
550 lines
12 KiB
550 lines
12 KiB
<template>
|
|
<view class="warpper">
|
|
<view class="swiper-dot">
|
|
<uni-swiper-dot :info="info" :current="current" field="content" mode="indexes" style="height: 100%;">
|
|
<swiper class="swiper-box" @change="change" style="height: 100%;">
|
|
<swiper-item v-for="(item, index) in info" :key="index">
|
|
<view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</uni-swiper-dot>
|
|
</view>
|
|
<uGap></uGap>
|
|
<view class="info-box">
|
|
<view class="info">
|
|
<view class="price-row">
|
|
<text class="price">¥2300</text>
|
|
<text class="unit">/吨</text>
|
|
</view>
|
|
<view class="row">
|
|
<view class="name">
|
|
博汇朱雀白卡
|
|
</view>
|
|
<view class="value">
|
|
库存：9600张
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="label">
|
|
克重：
|
|
</view>
|
|
<view class="tag-box" v-for="(titme, tindex) in 4" :key="tindex">
|
|
<text>240g</text>
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="label" style="font-size: 24rpx;">
|
|
规格：
|
|
</view>
|
|
<view class="tag-box" v-for="(titme, tindex) in 2" :key="tindex">
|
|
<text>787*1092</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uGap></uGap>
|
|
<view class="other">
|
|
<view class="title">
|
|
商品卖点
|
|
</view>
|
|
<view class="desc">
|
|
月结30天价格，不加服务费！
|
|
</view>
|
|
</view>
|
|
<view class="other">
|
|
<view class="title">
|
|
商品描述
|
|
</view>
|
|
<view class="desc">
|
|
售价全部为含税价，支持先用后付，欢迎来电查询！近期价格波动较大，请下单前先咨询价格。
|
|
</view>
|
|
</view>
|
|
<view class="other">
|
|
<view class="title">
|
|
送货说明
|
|
</view>
|
|
<view class="desc">
|
|
分切纸不足重量的，另加调机费；低于送货重量或超出送货范围的，运费另计。
|
|
</view>
|
|
</view>
|
|
<view class="other" style="border: none;">
|
|
<view class="title">
|
|
其他说明
|
|
</view>
|
|
<view class="desc">
|
|
无其他说明。
|
|
</view>
|
|
</view>
|
|
<qn-footer fixed height="100rpx">
|
|
<view class="footer-row">
|
|
<view class="left">
|
|
<view class="">
|
|
<image class="icon" src="/static/imgs/paperDetails/shop-icon.png"></image>
|
|
<view class="label">
|
|
店铺
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image>
|
|
<view class="label">
|
|
购物车
|
|
</view>
|
|
</view>
|
|
<view class="" @tap='addShoppingTap'>
|
|
<image class="icon" src="/static/imgs/paperDetails/add-shopping-trolley.png"></image>
|
|
<view class="label">
|
|
加购物车
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="inquiry-btn">
|
|
立即询单
|
|
</view>
|
|
<view class="book-btn" @tap='addShoppingTap'>
|
|
立即订购
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</qn-footer>
|
|
<uni-popup ref="popup" type="bottom">
|
|
<view class="popup_modal">
|
|
<!-- <slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot> -->
|
|
<view class="card-box">
|
|
<view class="box">
|
|
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
|
|
<view class="right-box">
|
|
<view class="title-row">
|
|
<view class="name">
|
|
博汇朱雀白卡
|
|
</view>
|
|
<view class="close-icon" @tap="closeTap">
|
|
<uni-icons size="20" type="close" color="#888888"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="price">
|
|
¥7630.28
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="choose-box">
|
|
<view class="label">
|
|
请选择克重
|
|
</view>
|
|
<view class="tag-row">
|
|
<view
|
|
:class="['tag-box', kgActive === kIndex ? 'kg-select' : '']"
|
|
v-for="(kItem,kIndex) in weightList"
|
|
:key='kIndex'
|
|
@tap="weightTap(kItem, kIndex)">
|
|
{{kItem}}g
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="choose-box">
|
|
<view class="label">
|
|
请选择规格
|
|
</view>
|
|
<view class="tag-row">
|
|
<view
|
|
:class="['tag-box', ggActive === sIndex ? 'kg-select' : '']"
|
|
v-for="(sItem,sIndex) in specificationList"
|
|
:key='sIndex'
|
|
@tap="specificationTap(sItem, sIndex)">
|
|
{{sItem}}
|
|
</view>
|
|
</view>
|
|
<view class="input-row">
|
|
<view class="">
|
|
<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput>
|
|
</view>
|
|
<view class="symbol">
|
|
x
|
|
</view>
|
|
<view class="">
|
|
<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="quantity-row">
|
|
<view class="label">
|
|
购买数量(张)
|
|
</view>
|
|
<view class="">
|
|
<qnInputNumber @change="change"/>
|
|
</view>
|
|
</view>
|
|
<view class="ygzl-text">
|
|
预估重量：1.6346吨
|
|
</view>
|
|
<view class="popup-footer-row">
|
|
<view class="btn" @tap="confirm">
|
|
确认
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uGap from '@/components/u-gap/u-gap.vue'
|
|
import qnFooter from '@/components/qn-footer/qn-footer.vue'
|
|
import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue'
|
|
export default {
|
|
components: { uGap, qnFooter, qnInputNumber },
|
|
data() {
|
|
return {
|
|
info: [
|
|
{
|
|
content: '内容 A'
|
|
},
|
|
{
|
|
content: '内容 B'
|
|
},
|
|
{
|
|
content: '内容 C'
|
|
}
|
|
],
|
|
current: 0,
|
|
weightList: ['240', '250', '280'],
|
|
specificationList: ['正度', '大度', '特规分切'],
|
|
kgActive: 0,
|
|
ggActive: 0,
|
|
value: null,
|
|
|
|
}
|
|
},
|
|
methods:{
|
|
addShoppingTap() {
|
|
this.$refs.popup.open('bottom')
|
|
},
|
|
closeTap() {
|
|
this.$refs.popup.close()
|
|
},
|
|
// 重量切换
|
|
weightTap(item, index) {
|
|
this.kgActive = index
|
|
},
|
|
// 规格切换
|
|
specificationTap(item, index) {
|
|
this.ggActive = index
|
|
},
|
|
/**
|
|
* @param {Number} num
|
|
* 计数器返回值
|
|
*/
|
|
change(num) {
|
|
|
|
},
|
|
// 确定
|
|
confirm() {
|
|
this.$refs.popup.close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.warpper {
|
|
.swiper-dot {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
}
|
|
.image {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
}
|
|
.info-box {
|
|
height: 370rpx;
|
|
background: #FFFFFF;
|
|
.info {
|
|
padding: 0rpx 32rpx;
|
|
.price-row {
|
|
padding: 20rpx 0rpx;
|
|
}
|
|
.price {
|
|
font-size: 48rpx;
|
|
color: #F5222D;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
|
|
}
|
|
.unit {
|
|
font-size: 28rpx;
|
|
color: #F5222D;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 20rpx;
|
|
.name {
|
|
font-size: 34rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
.value {
|
|
font-size: 24rpx;
|
|
color: rgba(0,0,0,0.55);
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.list-box {
|
|
margin: 0rpx 32rpx;
|
|
height: 104rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-top: 2rpx solid rgba($color: #DDDDDD, $alpha: 0.8);
|
|
.label {
|
|
flex: 0 0 84rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
}
|
|
.tag-box {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
background: #F4F5F6;
|
|
border-radius: 4rpx;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
margin-right: 10rpx;
|
|
padding: 0rpx 17rpx;
|
|
}
|
|
}
|
|
}
|
|
.other {
|
|
padding: 0rpx 32rpx;
|
|
border-bottom: 2rpx solid #D8D8D8;
|
|
background: #FFFFFF;
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
padding: 24rpx 0rpx 16rpx 0rpx;
|
|
}
|
|
.desc {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
padding: 0rpx 0rpx 24rpx 0rpx;
|
|
}
|
|
}
|
|
.footer-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
// align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0rpx 32rpx;
|
|
.left {
|
|
flex: 0 0 294rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
padding-right: 24rpx;
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
.label {
|
|
font-size: 22rpx;
|
|
color: #555555;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
padding-top: 6rpx;
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
.inquiry-btn{
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background: #FAAB0C;
|
|
border-top-left-radius: 2002000rpx;
|
|
border-bottom-left-radius: 2002000rpx;
|
|
}
|
|
.book-btn{
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background: #EE0A24;
|
|
border-top-right-radius: 2002000rpx;
|
|
border-bottom-right-radius: 2002000rpx;
|
|
}
|
|
}
|
|
}
|
|
.popup_modal {
|
|
// height: 960rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
.card-box {
|
|
padding: 0rpx 32rpx;
|
|
.box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
// align-items: center;
|
|
// height: 240rpx;
|
|
background: #FFFFFF;
|
|
border-bottom: 2rpx solid #D8D8D8;
|
|
padding: 40rpx 0rpx;
|
|
.image {
|
|
flex: 0 0 160rpx;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 10px;
|
|
margin-right: 20rpx;
|
|
}
|
|
.right-box {
|
|
flex: 1;
|
|
width: 100%;
|
|
padding-top: 10rpx;
|
|
}
|
|
.title-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.name {
|
|
font-size: 34rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
.close-icon{
|
|
position: relative;
|
|
top: -20rpx;
|
|
}
|
|
}
|
|
.price{
|
|
font-size: 40rpx;
|
|
color: #F5222D;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.choose-box{
|
|
border-bottom: 2rpx solid #D8D8D8;
|
|
padding: 24rpx 32rpx;
|
|
.label{
|
|
font-size: 30rpx;
|
|
color: rgba(0,0,0,0.85);
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
padding: 0rpx 0rpx 20rpx 0rpx;
|
|
}
|
|
.tag-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.tag-box{
|
|
padding: 0rpx 47rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 8px;
|
|
margin-right: 12rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(0,0,0,0.75);
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
.kg-select {
|
|
background: #1890FF;
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
.input-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
.easyinput{
|
|
height: 64rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 8rpx;
|
|
}
|
|
.symbol{
|
|
padding: 0rpx 16rpx;
|
|
font-size: 32rpx;
|
|
color: rgba(0,0,0,0.85);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.quantity-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx 32rpx 0rpx 32rpx;
|
|
.label{
|
|
font-size: 30rpx;
|
|
color: rgba(0,0,0,0.85);
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.ygzl-text{
|
|
padding:20rpx 32rpx 0rpx ;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 24rpx;
|
|
color: rgba(0,0,0,0.50);
|
|
font-weight: 400;
|
|
}
|
|
.popup-footer-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
padding: 48rpx 32rpx 20rpx 32rpx;
|
|
.btn {
|
|
width: 686rpx;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
text-align: center;
|
|
background: #007AFF;
|
|
border-radius: 10rpx;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|