242 lines
6.7 KiB
Vue
242 lines
6.7 KiB
Vue
<template>
|
||
<!-- 多规格组件弹框 -->
|
||
<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
|
||
<view class="multiPopup">
|
||
<view class="shop_open_close" @click="OpenCoupon()">
|
||
<image src="../../static/order/close.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="multishop">
|
||
<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
|
||
<view class="multishop_text">
|
||
<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
|
||
<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="multishop_list">
|
||
<view class="multishop_list_title">颜色</view>
|
||
<view class="multishop_list_item">
|
||
<view class="multishop_list_name multishop_list_arver">沙漠色</view>
|
||
<view class="multishop_list_name">黑色</view>
|
||
<view class="multishop_list_name">原色</view>
|
||
<view class="multishop_list_name">白色</view>
|
||
</view>
|
||
</view>
|
||
<view class="multishop_list">
|
||
<view class="multishop_list_title">容量</view>
|
||
<view class="multishop_list_item">
|
||
<view class="multishop_list_name multishop_list_arver">256GB</view>
|
||
<view class="multishop_list_name">512GB</view>
|
||
<view class="multishop_list_name">1TB</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer_multi">
|
||
<view class="multishop_amount">
|
||
<view class="multishop_name_amount">选数量</view>
|
||
<view class="multishop_data_edit">
|
||
<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
|
||
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="multishop_data_number">22</view>
|
||
<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
|
||
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_multi_btn">确定</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { loads } from '@/utils/index.js'
|
||
import { frontproduct } from '@/server/api';
|
||
import { computed,ref,onMounted,defineEmits } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { skudetail,cartsave } from '@/server/api.js'
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const { token } = storeToRefs(counterStore);
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
//多规格
|
||
.multiPopup{
|
||
background-color: #FFFFFF;
|
||
border-top-left-radius: 25rpx;
|
||
border-top-right-radius: 25rpx;
|
||
max-height: 800rpx;
|
||
overflow-y: auto;
|
||
position: relative;
|
||
.shop_open_close{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.shop_open_close image{
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.multishop{
|
||
display: flex;
|
||
padding: 25rpx 25rpx 0rpx 25rpx;
|
||
.multishop_img{
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
.multishop_text{
|
||
width: 460rpx;
|
||
margin-left: 20rpx;
|
||
.multishop_title{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-top: 5rpx;
|
||
min-height: 115rpx;
|
||
}
|
||
.multishop_title text{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
.multishop_price{
|
||
font-size: 32rpx;
|
||
color: #FD3F3F;
|
||
font-weight: 500;
|
||
.multishop_name{
|
||
color: #999;
|
||
font-size: 23rpx;
|
||
text-decoration: line-through;
|
||
margin-left: 5rpx;
|
||
font-weight: 400;
|
||
}
|
||
.multishop_name::before{
|
||
content: "¥";
|
||
font-size: 20rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
.multishop_price::before{
|
||
content: "¥";
|
||
font-size: 24rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
.multishop_list{
|
||
padding: 25rpx 25rpx 0rpx 25rpx;
|
||
.multishop_list_title{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
.multishop_list_item{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.multishop_list_name{
|
||
padding: 12rpx 35rpx 12rpx 35rpx;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
background-color: #f6f6f6;
|
||
margin-right: 25rpx;
|
||
margin-bottom: 25rpx;
|
||
border:1px solid #f6f6f6;
|
||
}
|
||
.multishop_list_arver{
|
||
background-color: #FFD7D7;
|
||
border:1px solid #fd3f3f;
|
||
color: #fd3f3f;
|
||
}
|
||
|
||
}
|
||
}
|
||
.footer_multi{
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
width: 100%;
|
||
background-color: #FFFFFF;
|
||
border-top-left-radius: 20rpx;
|
||
border-top-right-radius: 20rpx;
|
||
.multishop_amount{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-left: 25rpx;
|
||
padding-right: 25rpx;
|
||
margin-top: 15rpx;
|
||
margin-bottom: 40rpx;
|
||
.multishop_name_amount{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
.multishop_data_edit{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.multishop_data_edit_img{
|
||
width: 55rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-top: 1px solid #E9E9E9;
|
||
border-bottom: 1px solid #E9E9E9;
|
||
.multishop_data_edit_imgurl{
|
||
width: 25rpx;
|
||
height: 25rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
.border_l{
|
||
border-left: 1px solid #E9E9E9;
|
||
border-top-left-radius: 50rpx;
|
||
border-bottom-left-radius: 50rpx;
|
||
}
|
||
.border_r{
|
||
border-right: 1px solid #E9E9E9;
|
||
border-top-right-radius: 50rpx;
|
||
border-bottom-right-radius: 50rpx;
|
||
}
|
||
}
|
||
.multishop_data_number{
|
||
width: 60rpx;
|
||
height: 50rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #E9E9E9;
|
||
}
|
||
}
|
||
.footer_multi_btn{
|
||
margin: 0 28rpx 0 28rpx;
|
||
height:84rpx;
|
||
background-color: #FD3F3F;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
</style> |