charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity
Files
0515e9d48cd4c61f7e67279eb8f2ec79517d4316
frontend-app/pages/productInfo/productInfo.vue
T

902 lines
142 KiB
Vue
Raw Normal View History

增加新模块
2025-03-20 08:46:07 +08:00
<template>
<view class="product_info_warp">
<!-- 头部产品描述图 -->
<view class="product_info_header_warp">
<up-swiper
:list="swiperList"
height="280"
暂存code
2025-05-07 09:54:33 +08:00
@change="e => currentNum = e.current"
增加新模块
2025-03-20 08:46:07 +08:00
>
<template #indicator>
<view
class="indicator-num"
>
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
</view>
</template>
</up-swiper>
<view class="img_comm left_warp">
<up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00" @click="jumpLeft"></up-image>
</view>
<view class="img_comm right_warp">
<up-image src="/static/common/share_st.png" width="30" height="30" bgColor="#f1f6ff00" @click="jumpShare"></up-image>
</view>
</view>
<!-- 数据详情 -->
<view class="product_content_warp">
<!-- 标题，系列 -->
<view class="content_data">
<view class="content_data_price">
<text>￥</text>
暂存code
2025-05-07 09:54:33 +08:00
<text style="font-size: 60rpx;" v-if="orderInfo.minPrice && orderInfo.maxPrice">
{{orderInfo.minPrice}} - {{orderInfo.maxPrice}}
</text>
增加新模块
2025-03-20 08:46:07 +08:00
<text style="font-size: 60rpx;" v-else>{{orderInfo.minPrice}}</text>
<text class="price_o">￥{{orderInfo.adPrice}}</text>
</view>
<view class="content_data_title">
{{ orderInfo.name}}
</view>
<view class="content_data_series">
<!-- 暂时隐藏 -->
<view>
</view>
<!-- 销量还需要改 -->
暂存代码
2025-05-23 18:03:45 +08:00
<view>销量{{orderInfo.sales}}件</view>
增加新模块
2025-03-20 08:46:07 +08:00
</view>
</view>
<!-- 具体规格 -->
<view class="content_concrete">
<view class="concrete_item concrete_item_but" @click="checkSpecification(true)">
<view class="concrete_item_">
<view class="concrete_item_title">规格</view>
<view class="concrete_item_value">
{{selectSpecificationTempl.combTypes || '暂未选择规格'}}
</view>
</view>
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<view class="concrete_item">
<view class="concrete_item_">
<view class="concrete_item_title">发货地址</view>
<view class="concrete_item_value">
<view class="address_warp">
<up-image src="/static/common/address2.png" width="10" height="10" bgColor="#f1f6ff00"></up-image>
<view style="margin-left: 10rpx;">请填写地址</view>
</view>
<view class="address_72_warp">现货{{getValue(PRODUCT_DELIVERY_TIME,orderInfo.deliveryTime)}}</view>
</view>
</view>
<!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
</view>
<view class="concrete_item">
<view class="concrete_item_">
<view class="concrete_item_title">购物保障</view>
<view class="concrete_item_value concrete_item_bz">
<view class="concrete_item_bz concrete_item_bz_item">
<up-image src="/static/product/product_b.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
<view class="concrete_item_bz_item_left">品质严保</view>
</view>
<view class="concrete_item_bz">
<up-image src="/static/product/product_js.png" width="10" height="10" bgColor="#f1f6ff00"></up-image>
<view class="concrete_item_bz_item_left">极速退款</view>
</view>
</view>
</view>
<!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
</view>
</view>
<!-- 商品详情 -->
<view class="content_details">
<view class="content_details_title">商品详情</view>
<view v-html="orderInfo.detailInfo"></view>
</view>
</view>
<!-- 底部编辑按钮 -->
<view class="product_but_warp">
<view class="product_but_left">
<view class="left_item">
增加新功能
2025-03-23 20:36:06 +08:00
<up-image src="/static/product/home.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpOther('home')"></up-image>
增加新模块
2025-03-20 08:46:07 +08:00
<view>首页</view>
</view>
<view class="left_item">
添加代码
2025-05-30 18:44:14 +08:00
<up-image src="/static/product/kefu.png" width="20" height="20" bgColor="#f1f6ff00" @click="serviceShow=true;"></up-image>
增加新模块
2025-03-20 08:46:07 +08:00
<view>咨询</view>
</view>
增加新功能
2025-03-23 20:36:06 +08:00
<view class="left_item">
<up-image src="/static/product/cart.png" width="24" height="20" bgColor="#f1f6ff00" @click="jumpOther('cart')"></up-image>
<view>购物车</view>
</view>
增加新模块
2025-03-20 08:46:07 +08:00
</view>
<view class="product_but_right">
<view class="but_comm join_warp" @click="checkSpecification(true,'addCart')">加入购物车</view>
<view class="but_comm buy_warp" @click="checkSpecification(true,'buy')">立即购买</view>
</view>
</view>
<!-- 选择规格的弹框 -->
<up-popup
增加新功能
2025-03-23 20:36:06 +08:00
:show="specificationShow"
增加新模块
2025-03-20 08:46:07 +08:00
:round="10"
:closeOnClickOverlay="false"
:closeable="true"
暂存code
2025-05-07 09:54:33 +08:00
@close="specificationShow=false"
增加新模块
2025-03-20 08:46:07 +08:00
mode="bottom"
>
<view class="specification_warp">
<!-- 选择地址 -->
<view class="specification_adress_warp">
<view class="specification_adress_msg">10+刚刚抢购</view>
<!-- <view class="specification_adress_arr">
<up-image src="/static/common/address_st.png" width="30" height="30" bgColor="#f1f6ff00"></up-image>
<view class="address_title address_title_sel" v-if="orderInfo && orderInfo.addressObj">
<text style="font-size: 30rpx;margin-right: 20rpx;">{{orderInfo.addressObj.name}}</text>
<text>{{orderInfo.addressObj.address}}</text>
</view>
<view class="address_title" v-else>暂无收货地址，请添加收货地址！</view>
<view><up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00"></up-image></view>
</view> -->
</view>
<!-- 商品 -->
<view class="specification_product_warp">
<up-image :src="orderInfo.mainGraph" width="100" height="100" bgColor="#f1f6ff00"></up-image>
<view class="product_content">
<view class="price_warp">
<view class="price_content_warp">
<view>￥</view>
<text style="font-size: 50rpx;" v-if="selectSpecificationTempl && Object.keys(selectSpecificationTempl).length !==0">
{{selectSpecificationTempl.price}}
</text>
<view style="font-size: 50rpx" v-else>
暂存code
2025-05-07 09:54:33 +08:00
{{orderInfo.minPrice}}
<text v-if="orderInfo.maxPrice">- {{orderInfo.maxPrice}}</text>
增加新模块
2025-03-20 08:46:07 +08:00
</view>
<view class="price_content_coupon_warp" v-if="orderInfo.couponPrice && orderInfo.couponPrice !==0">优惠卷{{orderInfo.couponPrice}}</view>
</view>
<view class="oOrice_content_warp" >￥{{orderInfo.adPrice}}</view>
<view class="coupon_content_warp" v-if="orderInfo.couponPrice && orderInfo.couponPrice !==0">优惠卷已优惠￥{{orderInfo.couponPrice}}</view>
</view>
<view class="inventory_warp">
<view>库存</view>
<view>{{orderInfo.inventory || 0}}件</view>
</view>
</view>
</view>
<!-- 规格 -->
<view class="specification_list_warp">
<view v-for="(item,index) in specificationList" :key="item.id" class="list_warp">
<view class="list_title_warp">{{item.type}}</view>
<view class="specification_item_warp">
<view
:class="oItem.inventory === 0 ? 'item_Warp item_Warp_no_warp' : item.selectVal === oItem.n?'item_Warp item_Warp_yes_warp':'item_Warp' "
v-for="(oItem,oIndex) in item.items"
:key="oItem.n"
@click="clickSpecification(index,oItem)"
>
{{oItem.n}}
</view>
</view>
</view>
</view>
<!-- 购买数量 -->
<view class="specification_but">
<view class="specification_buy">
<view>数量</view>
<view class="shopping_info_quantity">
<view class="quantity_but" @click="quantityFun('minus')">-</view>
<view class="quantity_value">{{orderInfo.quantity}}</view>
<view class="quantity_but" @click="quantityFun('add')">+</view>
</view>
</view>
暂存code
2025-05-07 09:54:33 +08:00
<view v-if="specificationShowType === 'buy'" class="specification_buy_but" @click="addCart(true)">去支付</view>
<view v-else-if="specificationShowType === 'addCart'" class="specification_buy_but" @click="addCart(false)">加入购物车</view>
增加新模块
2025-03-20 08:46:07 +08:00
<view v-else class="product_but_right popup_but">
暂存code
2025-05-07 09:54:33 +08:00
<view class ='but_comm join_warp' @click="addCart(false)">加入购物车</view>
<view class="but_comm buy_warp" @click="addCart(true)">立即购买</view>
增加新模块
2025-03-20 08:46:07 +08:00
</view>
</view>
</view>
</up-popup>
添加代码
2025-05-30 18:44:14 +08:00
<!-- 我的客服 -->
<up-modal :show="serviceShow" :showConfirmButton = "false">
<view class="slot-content">
<view class="close_warp" @click="serviceShow = false;">
<up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<view class="content_">
<view class="content_1">{{source === "supply_chain" ?'云仓客服':'平台客服'}}</view>
<view class="content_3">{{source === "supply_chain" ?CLOUD_SERVICE_PHONE_NUMBER:CUSTOMER_SERVICE_PHONE_NUMBER}}</view>
</view>
<view class="but_">
<view class="but_copy" @click="copyMobile(source === 'supply_chain' ?CLOUD_SERVICE_PHONE_NUMBER:CUSTOMER_SERVICE_PHONE_NUMBER)">复制号码</view>
<view class="but_close" @click="serviceShow=false;">取消</view>
</view>
</view>
</up-modal>
<!-- 暂未开放 -->
<up-overlay :show="openShow" >
<view class="up_content open_Show" @tap.stop>
<view class="uni-banner">
<view class="banner_box">
<view class="title_">温馨提示</view>
<view class="msg_">
该商家暂未开通供应链权限，请联系供应链客服开通授权。
</view>
<view class="phone_">{{CLOUD_SERVICE_PHONE_NUMBER}}</view>
<view class="but_">
<view class="but_b" @click="copyMobile(CLOUD_SERVICE_PHONE_NUMBER)">立即联系</view>
</view>
</view>
</view>
</view>
</up-overlay>
增加新模块
2025-03-20 08:46:07 +08:00
</view>
</template>
<script>
import{ getGoodsDetail,addGoods,getGoodsSpecs } from '@/api/product.js';
添加代码
2025-05-30 18:44:14 +08:00
import { getValue,PRODUCT_DELIVERY_TIME} from '@/utils/enumUtils.js';
import { copyData } from '@/utils/index.js'
import { CUSTOMER_SERVICE_PHONE_NUMBER,CLOUD_SERVICE_PHONE_NUMBER } from '@/utils/config.js';
增加新模块
2025-03-20 08:46:07 +08:00
export default {
computed: {
PRODUCT_DELIVERY_TIME() {
return PRODUCT_DELIVERY_TIME;
},
添加代码
2025-05-30 18:44:14 +08:00
CUSTOMER_SERVICE_PHONE_NUMBER() {
return CUSTOMER_SERVICE_PHONE_NUMBER;
},
CLOUD_SERVICE_PHONE_NUMBER() {
return CLOUD_SERVICE_PHONE_NUMBER;
},
增加新模块
2025-03-20 08:46:07 +08:00
},
data() {
return {
id:0,
swiperList:[],
暂存code
2025-05-07 09:54:33 +08:00
currentNum:0,
增加新模块
2025-03-20 08:46:07 +08:00
specificationShow:false,
specificationShowType:'',// 弹框类型
增加新功能
2025-03-23 20:36:06 +08:00
orderInfo:{},
增加新模块
2025-03-20 08:46:07 +08:00
specificationList:[],//规格
selectSpecification:[],// 选择的规格
specificationTempl:[],// 规格模版数据
selectSpecificationTempl:{},// 选择规格模版数据
添加代码
2025-05-30 18:44:14 +08:00
serviceShow:false,// 联系客服弹框
openShow:false,
source:null,// 来源：供应链，自营
增加新模块
2025-03-20 08:46:07 +08:00
}
},
onLoad(options) {
const id = options.id;
添加代码
2025-05-30 18:44:14 +08:00
const source = options.source;
增加新模块
2025-03-20 08:46:07 +08:00
if(id && id !==0){
this.id = id ? parseInt(id,10) : 0;
添加代码
2025-05-30 18:44:14 +08:00
if(source && source === 'supply_chain'){
this.source = source;
this.getSupplyChainById();
}else{
this.getById();
}
增加新模块
2025-03-20 08:46:07 +08:00
}
},
methods: {
getValue,
添加代码
2025-05-30 18:44:14 +08:00
copyMobile(mobile){
copyData(mobile);
this.serviceShow = false;
this.openShow = false;
},
增加新模块
2025-03-20 08:46:07 +08:00
jumpLeft(){
uni.navigateBack({
delta: 1 // 返回的页面数，默认为1,返回到上一级
});
},
增加新功能
2025-03-23 20:36:06 +08:00
jumpOther(type){
if(type === 'home'){
uni.switchTab({// 首页
url: '/pages/home/home',
})
}else if(type === "share"){// 分享
uni.navigateTo({
url: '/pages/invite_friends/invite_friends',
})
}else if(type === "cart"){// 购物车
uni.switchTab({
url: '/pages/shopping_cart/shopping_cart',
})
}
增加新模块
2025-03-20 08:46:07 +08:00
},
/**
* 查询详细内容
*/
async getById(){
const params={
id:this.id,
}
const resp = await getGoodsDetail(params);
if(resp && resp.bizcode === 100){
const data = resp.data;
// 商品图
if(data.goodsGraph){
this.swiperList = data.goodsGraph.split(",");
}
data.addressObj={}// 收件人地址
data.quantity=1// 数量
data.inventory=0// 库存
this.orderInfo = data;
增加新功能
2025-03-23 20:36:06 +08:00
增加新模块
2025-03-20 08:46:07 +08:00
}
},
添加代码
2025-05-30 18:44:14 +08:00
/**
* 来自商城的订单
*/
getSupplyChainById(){
const params={
goods_id:this.id,
app_id:"2024111300164927",
sign_type:"MD5",
sign:"d04be0cedd49608e758458325faecf90",
}
uni.request({
url: "https://cyysc.gscm.top/outside/1/atm/goods/detail",
method:"get",
data:params,
header: {
},
success: (res) => {
const data = res.data;
if(data && data.result === 1){
const objData = data.data;
const content = objData.content.replace(/&amp;/g, '&')
.replace(/&lt;/g, "<")
.replace(/&gt;/g, ">")
.replace(/&quot;/g, "\'")
.replace(/&#39;/g, '\"')
.replace(/\n/g, "<br>");
const orderInfo={
detailInfo:content,
minPrice:objData.min_price,
// maxPrice:objData.max_price,
adPrice:objData.price,
sales:objData.virtual_sales,
}
const domain = "https://cyysc.gscm.top";
let currentThumb = objData.thumb;
if(objData.thumb.indexOf('https://') === -1 && objData.thumb.indexOf('http://') === -1){
currentThumb = domain + "/static/upload/"+objData.thumb;
}
this.swiperList=[currentThumb];// 封面图
this.orderInfo=orderInfo;
}
},
fail: (error) => {
console.log("error",error);
},
});
},
增加新功能
2025-03-23 20:36:06 +08:00
async checkSpecification(val,type){
添加代码
2025-05-30 18:44:14 +08:00
const source = this.source;
if(source && source === "supply_chain"){
this.openShow = true;
return;
}
增加新模块
2025-03-20 08:46:07 +08:00
// 需要查询一下最新的规格
if(val){
增加新功能
2025-03-23 20:36:06 +08:00
await this.querySpecification()
const data = this.orderInfo;
this.getSpecification(data.specs);
增加新模块
2025-03-20 08:46:07 +08:00
}else{
this.specificationList=[];//规格
this.selectSpecification=[];// 选择的规格
this.specificationTempl=[];// 规格模版数据
}
this.specificationShow = val;
this.specificationShowType = type;
},
// 拆解规格
getSpecification(specs){
const optionArr=[];
if(specs){
const arr = JSON.parse(specs);
arr.map(item=>{
optionArr.push({
type:item.type,
items:item.items,
selectVal:null,
})
})
}
this.specificationList = optionArr;
},
// 获取规格模版数据
async querySpecification(){
const params={
id:this.id,
}
const resp = await getGoodsSpecs(params);
if(resp && resp.bizcode === 100){
const data = resp.data;
let stock=0;
data.map(item=>{
stock = stock+item.stock;
})
this.specificationTempl = data;
this.orderInfo.inventory = stock;// 库存
}
},
//改变规格的样式
clickSpecification(pIndex,oItem){
// if(oItem.inventory<=0){
// return;
// }
this.specificationList[pIndex].selectVal = oItem.n;
// 计算规格的价格
this.selectSpecificationFun(pIndex,oItem);
},
// 选择规格
selectSpecificationFun(index,item){
const currentSelectSpecification = this.selectSpecification;
currentSelectSpecification[index] = item.n;
this.selectSpecification = currentSelectSpecification;
const oldLength = this.specificationList.length;
const newLength = this.selectSpecification.length;
// 开始做校验
if(oldLength === newLength){
const newLengthStr = this.selectSpecification.join("♧");
const specificationTempl = this.specificationTempl;
let selectTempl = {};
specificationTempl.map(item=>{
if(item.combNames === newLengthStr){
selectTempl = item
return;
}
});
this.selectSpecificationTempl = selectTempl;
this.orderInfo.inventory = selectTempl.stock;// 库存
}
},
// 改变数量
quantityFun(type){
let currentQuantity = this.orderInfo.quantity;// 当前数量
if(type === "minus"){
if(currentQuantity === 1){
this.$refs.uToastRef.show({
type: 'error',
message: "不能低于最低购买数量",
});
}else{
currentQuantity = currentQuantity - 1;
}
}else if(type === "add"){
// 需要判断一下库存
currentQuantity = currentQuantity + 1;
}
this.orderInfo.quantity = currentQuantity;
},
暂存code
2025-05-07 09:54:33 +08:00
增加新功能
2025-03-23 20:36:06 +08:00
// 加入购入车
暂存code
2025-05-07 09:54:33 +08:00
async addCart(isBy = false){
增加新模块
2025-03-20 08:46:07 +08:00
const selectTempl = this.selectSpecificationTempl;
if(!selectTempl || Object.keys(selectTempl).length ===0){
uni.showToast({
title: '请先选择规格',
icon: 'none', // 可选 success/loading/none
duration: 2000 // 持续时长，单位ms
});
return;
}
const params={
id:this.id,
specsId:selectTempl.id,// 规格ID
goodsNum:this.orderInfo.quantity,// 商品数量
}
const resp = await addGoods(params);
if(resp && resp.bizcode === 100){
暂存code
2025-05-07 09:54:33 +08:00
if(isBy){
uni.navigateTo({
url: '/pages/order_submit/order_submit?ids='+resp.data,
})
}else{
uni.showToast({
title: '成功加入购物车',
icon: 'success', // 可选 success/loading/none
duration: 2000 // 持续时长，单位ms
});
}
增加新模块
2025-03-20 08:46:07 +08:00
setTimeout(()=>{
this.checkSpecification(false,null);
},2000)
}
暂存code
2025-05-07 09:54:33 +08:00
},
// 跳转到分享页面
jumpShare(){
增加新模块
2025-03-20 08:46:07 +08:00
}
}
}
</script>
<style lang="scss" scoped>
.product_info_warp{
height: calc(100vh - 196rpx);
background-color: $app-bj;
}
.product_info_header_warp{
position: relative;
.img_comm{
position: absolute;
top: 140rpx;
}
.left_warp{
left: 40rpx;
}
.right_warp{
right: 40rpx;
}
}
.product_content_warp{
// background: linear-gradient(0deg, #F9F9F9 0%, #FFFFFF 100%);
border-radius: 30rpx 30rpx 0rpx 24rpx;
padding: 20rpx;
.content_data{
padding: 20rpx;
}
.content_data_price{
font-weight: bold;
font-size: 36rpx;
color: $app-bt-bj;
.price_o{
font-weight: 500;
font-size: 26rpx;
color: #999999;
text-decoration-line: line-through;
margin-left: 10rpx;
}
}
.content_data_title{
font-weight: bold;
font-size: 36rpx;
color: #111111;
margin-top: 10rpx;
}
.content_data_series{
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 24rpx;
color: #999999;
margin-top: 10rpx;
}
.content_concrete{
padding: 20rpx;
background: #FFFFFF;
border-radius: 30rpx;
margin-top: 20rpx;
.concrete_item{
display: flex;
justify-content: space-between;
font-size: 28rpx;
padding: 20rpx 0;
}
.concrete_item_{
display: flex;
width: 100%;
}
.concrete_item_but{
border-bottom: 1rpx solid #EEEEEEFF;
}
.concrete_item_title{
color: #808080;
width: 140rpx;
}
.concrete_item_value{
font-weight: 500;
color: #1A1A1A;
width: calc(100% - 140rpx);
.address_warp{
display: flex;
margin-bottom: 10rpx;
}
.address_72_warp{
font-size: 24rpx;
color: #808080;
}
}
.concrete_item_bz{
display: flex;
}
.concrete_item_bz_item{
margin-right: 20rpx;
}
.concrete_item_bz_item_left{
margin-left: 10rpx;
}
}
}
.content_details{
background: #FFFFFF;
border-radius: 24rpx;
padding: 10rpx 10rpx 30rpx;
margin-top: 30rpx;
.content_details_title{
padding: 20rpx 30rpx;
}
img,
img[alt] {
max-width: 100%;
}
}
.product_but_warp{
padding: 20rpx;
position: fixed;
bottom: 0;
height: 160rpx;
width: calc(100% - 40rpx);
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
.product_but_left{
display: flex;
justify-content: space-between;
增加新功能
2025-03-23 20:36:06 +08:00
width: 36%;
添加代码
2025-05-30 18:44:14 +08:00
margin-top: 6rpx;
增加新模块
2025-03-20 08:46:07 +08:00
.left_item{
width: 50%;
text-align: center;
font-weight: 500;
font-size: 20rpx;
color: #666666;
}
}
}
.product_but_right{
display: flex;
justify-content: center;
.but_comm{
text-align: center;
padding: 20rpx 40rpx;
color: #FFFFFF;
添加代码
2025-05-30 18:44:14 +08:00
height: 46rpx;
增加新模块
2025-03-20 08:46:07 +08:00
}
.join_warp{
background: #FFA64F;
border-radius: 16rpx 0rpx 0rpx 16rpx;
}
.buy_warp{
background: $app-bt-bj;
border-radius: 0rpx 16rpx 16rpx 0rpx;
}
}
.specification_warp{
background-color: $app-bj;
.specification_adress_warp{
padding: 30rpx;
background: #FFFFFF;
border-radius: 24rpx;
}
.specification_adress_msg{
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #808080;
margin: 0 10rpx 0 20rpx;
}
.specification_adress_arr{
display: flex;
align-items: center;
margin-top: 20rpx;
}
.address_title{
font-weight: 500;
font-size: 26rpx;
color: #BBBBBB;
margin-bottom: 10rpx;
margin-right: 20rpx;
width: 592rpx;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的文本 */
text-overflow: ellipsis; /* 使用省略号表示溢出的内容 */
}
.address_title_sel{
color: #333333;
}
.specification_product_warp{
display: flex;
background: #FFFFFF;
border-radius: 24rpx;
padding: 30rpx;
margin-top: 20rpx;
.product_content{
margin-left: 10rpx;
display: grid;
}
.price_content_warp{
// font-weight: bold;
font-size: 36rpx;
color: $app-bt-bj;
display: flex;
align-items: center;
}
.price_content_coupon_warp{
margin-left: 20rpx;
padding: 4rpx 10rpx;
text-align: center;
color: $app-bt-bj;
font-size: 22rpx;
font-weight: 500;
border: 1px solid $app-bt-bj;
border-radius: 6rpx;
}
.oOrice_content_warp{
font-size: 26rpx;
color: #808080;
line-height: 11rpx;
text-decoration-line: line-through;
margin-top: 10rpx;
}
.coupon_content_warp{
font-weight: 500;
font-size: 22rpx;
color: $app-bt-bj;
margin-top: 10rpx;
}
.inventory_warp{
display: flex;
font-weight: 500;
font-size: 24rpx;
color: #808080;
}
}
.specification_list_warp{
background: #FFFFFF;
border-radius: 24rpx;
padding: 30rpx;
margin-top: 20rpx;
.list_warp{
margin-bottom: 30rpx;
}
.list_title_warp{
font-weight: 500;
font-size: 30rpx;
color: #1A1A1A;
line-height: 48rpx;
}
.specification_item_warp{
// display: flex;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.item_Warp{
width: 48%;
background: $app-bj;
border-radius: 10rpx;
color: #333333;
text-align: center;
padding: 10rpx 0;
margin-top: 13rpx;
font-size: 26rpx;
font-weight: 500;
}
.item_Warp_no_warp{
background: #F5F5F5;
color: #999999;
text-decoration-line: line-through;
}
.item_Warp_yes_warp{
border: 1px solid $app-bt-bj;
color: $app-bt-bj;
background: #FFF1EB;
}
}
.specification_but{
background: #FFFFFF;
border-radius: 24rpx;
padding: 30rpx;
margin-top: 30rpx;
.specification_buy{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.specification_buy_but{
width: 100%;
padding: 20rpx 0;
text-align: center;
background-color: $app-bt-bj;
color: #FFFFFF;
margin-top: 20rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
border-radius: 16rpx;
}
}
}
.popup_but{
暂存code
2025-05-07 09:54:33 +08:00
background-color: #FFFFFF;
增加新模块
2025-03-20 08:46:07 +08:00
.but_comm{
width: 40%;
}
}
添加代码
2025-05-30 18:44:14 +08:00
.open_Show{
/* 弹出层形式的广告 */
.uni-banner {
display: flex;
align-items: center;
flex-direction: column;
position: fixed;
left: 50%;
top: 50%;
z-index: 1000;
transform: translate(-50%, -50%);
width: 80%;
background-image: url('data:image/png;base64,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
background-size: 100% 100%;
background-position: center; /* 将图片居中显示 */
height: 746rpx;
}
.banner_box {
margin-top:140rpx;
padding:40rpx;
width: 88%;
}
.title_{
font-size: 62rpx;
color: rgba(0,0,0,0.9);
margin-top: 30rpx;
}
.msg_{
font-size: 32rpx;
color: rgba(0,0,0,0.9);
line-height: 42rpx;
text-align: center;
margin-top: 50rpx;
}
.phone_{
background: rgba(216,216,216,0.16);
border-radius: 15rpx;
text-align: center;
width: 100%;
padding: 20rpx 0;
margin-top: 50rpx;
}
.but_{
display: flex;
justify-content: center;
margin-top: 50rpx;
.but_b{
background: #03AD27;
border-radius: 41rpx;
font-size: 32rpx;
color: #FFFFFF;
width: 70%;
text-align: center;
padding: 20rpx 0;
}
}
}
增加新模块
2025-03-20 08:46:07 +08:00
</style>
Reference in New Issue Copy Permalink