six_uniapp_0001
This commit is contained in:
doudou201703
@@ -0,0 +1,82 @@
|
||||
<style lang="scss" scoped>
|
||||
// 商品详情图片列表组件
|
||||
.root-com {
|
||||
width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.images-list {
|
||||
width: 686rpx;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
//background: rgba(255, 255, 255, 0.1);
|
||||
padding: 22rpx 24rpx 26rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.images-item {
|
||||
margin-bottom: 10rpx;
|
||||
box-shadow: inset 0 0 0 1px red;
|
||||
|
||||
:deep(.customImage) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
//border: 1px dashed rgba(255, 255, 255, 0.6);
|
||||
|
||||
.customIcon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="root-com">
|
||||
<view class="images-list">
|
||||
<view
|
||||
v-for="(value,key) in xiaoMain.six_good?.goods_商品销售规格?.goods_sku?.goods_sku_list.at(0)?.goods_sku_详情图"
|
||||
:key="key" class="images-item">
|
||||
<wd-img custom-class="customImage" custom-image="customIcon" mode="widthFix"
|
||||
:src="value">
|
||||
<template #error>
|
||||
<view class="error-wrap">❌</view>
|
||||
</template>
|
||||
<template #loading>
|
||||
<view class="loading-wrap">
|
||||
<wd-loading :size="20" color="#fff" type="spinner"/>
|
||||
</view>
|
||||
</template>
|
||||
</wd-img>
|
||||
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||
|
||||
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-list-images"});
|
||||
let xiaoMain = useMainXiaoStore();
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
<style lang="scss" scoped>
|
||||
// 多行文本溢出显示...
|
||||
@mixin text-ellipsis-multi($line-clamp: 2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $line-clamp;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
|
||||
.root-com {
|
||||
width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.group_5 {
|
||||
width: 686rpx;
|
||||
margin: 0 auto;
|
||||
height: 270rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 22rpx;
|
||||
//background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20rpx;
|
||||
|
||||
.section_3 {
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.section_3_height {
|
||||
height: 58rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.text-wrapper_2 {
|
||||
.text_5 {
|
||||
color: #F55726;
|
||||
font-size: 22rpx;
|
||||
padding-right: 3rpx;
|
||||
padding-left: 5rpx;
|
||||
}
|
||||
|
||||
.text_6 {
|
||||
color: #F55726;
|
||||
font-size: 42rpx;
|
||||
padding-right: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.group_6 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.text_8 {
|
||||
width: 90rpx;
|
||||
height: 58rpx;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
//color: #CCCCCC;
|
||||
line-height: 68rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text_11 {
|
||||
height: 88rpx;
|
||||
//width: 686rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
//color: #FFFFFF;
|
||||
line-height: 44rpx;
|
||||
//text-align: justify;
|
||||
@include text-ellipsis-multi;
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
display: flex;
|
||||
height: 94rpx;
|
||||
align-items: center;
|
||||
|
||||
.text-wrapper_3 {
|
||||
width: 108rpx;
|
||||
height: 36rpx;
|
||||
background: #40AE36;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.text_12 {
|
||||
width: 88rpx;
|
||||
height: 32rpx;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 32rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.text_13) {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="root-com">
|
||||
<view class="group_5 flex-col">
|
||||
<view class="section_3 flex-row">
|
||||
<view class="section_3_height">
|
||||
<view class="text-wrapper_2">
|
||||
<text class="text_5">￥</text>
|
||||
<text class="text_6">{{ 会员价 }}</text>
|
||||
<text class="text_7"></text>
|
||||
</view>
|
||||
<view class="text_8">￥{{ 零售价 }}份</view>
|
||||
<view class="group_6 flex-col"></view>
|
||||
<wd-tag plain type="primary" v-if=" xiaoMain.six_good?.goods_商品标签.at(0) ">
|
||||
{{ xiaoMain.six_good?.goods_商品标签.at(0) }}
|
||||
</wd-tag>
|
||||
<view class="group_7 flex-col" style="width: 22rpx"></view>
|
||||
<wd-tag plain type="warning" v-if=" xiaoMain.six_good?.goods_商品标签.at(1) ">
|
||||
{{ xiaoMain.six_good?.goods_商品标签.at(1) }}
|
||||
</wd-tag>
|
||||
<view class="group_7 flex-col" style="width: 22rpx"></view>
|
||||
<wd-tag plain type="success" v-if=" xiaoMain.six_good?.goods_商品标签.at(2) ">
|
||||
{{ xiaoMain.six_good?.goods_商品标签.at(2) }}
|
||||
</wd-tag>
|
||||
<view class="group_7 flex-col" style="width: 22rpx"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text_11">
|
||||
<!-- 首发抢鲜 🔥东北黑土地孕育➕一年一季自然熟➕非转基因 低脂低糖0️⃣钠➕-->
|
||||
{{ xiaoMain.six_good?.goods_商品标题 }}
|
||||
</view>
|
||||
<view class="section_4 flex-row justify-between">
|
||||
<view class="text-wrapper_3 flex-col">
|
||||
<text class="text_12">{{ xiaoMain.six_good?.goods_商家推荐标签.at(0) }}</text>
|
||||
</view>
|
||||
<view class="line-widht-number" style="width: 10rpx"></view>
|
||||
<wd-tag type="warning" custom-class="space text_13"
|
||||
v-if="xiaoMain.six_good?.goods_商家推荐标签.at(1)">
|
||||
{{ xiaoMain.six_good?.goods_商家推荐标签.at(1) }}
|
||||
</wd-tag>
|
||||
<wd-tag type="warning" custom-class="space text_13"
|
||||
v-if=" xiaoMain.six_good?.goods_商家推荐标签.at(2) ">
|
||||
{{ xiaoMain.six_good?.goods_商家推荐标签.at(2) }}
|
||||
|
||||
</wd-tag>
|
||||
<wd-tag type="warning" custom-class="space text_13"
|
||||
v-if=" xiaoMain.six_good?.goods_商家推荐标签.at(3) ">
|
||||
{{ xiaoMain.six_good?.goods_商家推荐标签.at(3) }}
|
||||
</wd-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// Specs
|
||||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||
import {computed} from "vue";
|
||||
|
||||
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-params"});
|
||||
let xiaoMain = useMainXiaoStore();
|
||||
let 会员价 = computed(() => {
|
||||
const rawPrice = xiaoMain.six_good?.goods_商品销售规格?.会员价 ?? 0;
|
||||
|
||||
// 2. 除以 100
|
||||
// 3. (可选) 保留两位小数，例如 3.00
|
||||
return rawPrice / 100;
|
||||
});
|
||||
let 零售价 = computed(() => {
|
||||
const rawPrice = xiaoMain.six_good?.goods_商品销售规格?.零售价格 ?? 0;
|
||||
|
||||
// 2. 除以 100
|
||||
// 3. (可选) 保留两位小数，例如 3.00
|
||||
return rawPrice / 100;
|
||||
});
|
||||
console.log(xiaoMain.six_good?.goods_商品标题, "==============");
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,796 @@
|
||||
<style lang="scss" scoped>
|
||||
.root-com {
|
||||
width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
.goods-nav {
|
||||
width: 686rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 20rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.goods-left {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.left-item {
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
font-size: 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item-top {
|
||||
height: 50rpx;
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
line-height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 35rpx;
|
||||
|
||||
.title-imgimage_item {
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
box-sizing: border-box;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
//background-color: violet;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.goods-right {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.button-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
:deep(.button-left) {
|
||||
background: linear-gradient(90deg, #60F3FF, #088FEB);
|
||||
//background: linear-gradient(90deg, #ffd8bb, #ef8a01);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top-right-radius: 80rpx;
|
||||
border-bottom-right-radius: 80rpx;
|
||||
flex: 1;
|
||||
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||
|
||||
.xiaozizi {
|
||||
//color: #ff934c;
|
||||
font-size: 30rpx;
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:deep(.button-right) {
|
||||
//border-top-right-radius: 80rpx;
|
||||
//border-bottom-right-radius: 80rpx;
|
||||
background: linear-gradient(90deg, #0053B8, #1E83FF,);
|
||||
//background: linear-gradient(90deg, #1c8769, #f9e8fa,);
|
||||
border-top-left-radius: 80rpx;
|
||||
border-bottom-left-radius: 80rpx;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||
|
||||
.xiaozizi {
|
||||
color: #15ba11;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.action-sheet) {
|
||||
min-height: 900rpx;
|
||||
width: 720rpx;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
.product-header {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
//border-bottom: 1rpx solid #333;
|
||||
box-sizing: border-box;
|
||||
|
||||
.product-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 16rpx;
|
||||
//background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
margin-left: 30rpx;
|
||||
|
||||
.product-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
//color: #ffffff;
|
||||
margin-bottom: 12rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 28rpx;
|
||||
//color: #aaa;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.price-display {
|
||||
.current-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
color: #ff6b6b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-number {
|
||||
font-size: 48rpx;
|
||||
color: #ff6b6b;
|
||||
font-weight: 700;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.member-price {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
text-decoration: line-through;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-spec-text {
|
||||
font-size: 26rpx;
|
||||
color: #4dabf7;
|
||||
padding: 8rpx 16rpx;
|
||||
background-color: rgba(77, 171, 247, 0.1);
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 规格选择区域 */
|
||||
.spec-section {
|
||||
margin-bottom: 30rpx;
|
||||
/* 通用标题样式 */
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
//color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #333;
|
||||
|
||||
.title-text {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8rpx;
|
||||
left: 0;
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, #ff6b6b, #ff8e53);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff6b6b;
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.spec-option {
|
||||
padding: 12rpx 30rpx;
|
||||
//background-color: #2a2a2a;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #444;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
|
||||
&.spec-selected {
|
||||
border-color: #1E83FF;
|
||||
//background-color: #1E83FF;
|
||||
position: relative;
|
||||
//box-shadow: 0 4rpx 20rpx #1E83FF;
|
||||
|
||||
&::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-color: #1E83FF;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
//color: #ffffff;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.spec-price-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.spec-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.currency {
|
||||
font-size: 24rpx;
|
||||
color: #ff6b6b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-number {
|
||||
font-size: 36rpx;
|
||||
color: #ff6b6b;
|
||||
font-weight: 700;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.member-price-tag {
|
||||
font-size: 24rpx;
|
||||
//color: #888;
|
||||
text-decoration: line-through;
|
||||
padding: 6rpx 12rpx;
|
||||
background-color: rgba(136, 136, 136, 0.1);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spec-section-sku {
|
||||
/*选择*/
|
||||
/* 通用标题样式 */
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
//color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #333;
|
||||
|
||||
.title-text {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8rpx;
|
||||
left: 0;
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, #ff6b6b, #ff8e53);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff6b6b;
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-options-sku {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; //分成多少列 每一列的宽度 相对于父容器总宽度
|
||||
grid-template-rows: auto; // 分多少行, 每一行的高度, 相对于父容器的总高度
|
||||
justify-items: center; // 子元素: 控制每个网格项在其格子内水平居中
|
||||
align-items: center; // 子元素: 在每一行高度中的位置
|
||||
.spec-options-sku-items {
|
||||
padding: 13rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 购买数量 */
|
||||
.quantity-section {
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
//color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #333;
|
||||
|
||||
.title-text {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8rpx;
|
||||
left: 0;
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, #ff6b6b, #ff8e53);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff6b6b;
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30rpx;
|
||||
|
||||
.quantity-btn {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
//background-color: #2a2a2a;
|
||||
border: 2rpx solid #444;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover:not(.quantity-disabled) {
|
||||
border-color: #ff6b6b;
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
}
|
||||
|
||||
&.quantity-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border: 2rpx solid #444;
|
||||
border-radius: 12rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
//color: #ffffff;
|
||||
font-weight: 600;
|
||||
|
||||
&:focus {
|
||||
border-color: #ff6b6b;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.action-footer {
|
||||
//background-color: #1a1a1a;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
//border-top: 1rpx solid #333;
|
||||
margin: 0 -30rpx -30rpx;
|
||||
|
||||
|
||||
.total-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.total-label {
|
||||
font-size: 28rpx;
|
||||
//color: #ffffff;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
color: #ff6b6b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-number {
|
||||
font-size: 48rpx;
|
||||
color: #ff6b6b;
|
||||
font-weight: 700;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.add-cart {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
color: #ffffff;
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 12rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&.buy-now {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.3);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8rpx 25rpx rgba(255, 107, 107, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="root-com">
|
||||
<view class="goods-nav">
|
||||
<view class="goods-right">
|
||||
|
||||
<wd-button type="primary" icon="gouwuche" :block="true" classPrefix="xiaozizi"
|
||||
@click="打开支付弹窗" custom-class="button-left">
|
||||
加入购物车
|
||||
</wd-button>
|
||||
<wd-button icon="weixinzhifu" :block="true" classPrefix="xiaozizi"
|
||||
@click="打开支付弹窗" custom-class="button-right">
|
||||
立即购买
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
<wd-action-sheet v-model:modelValue="showRules" :lazyRender="true" :zIndex="99999" custom-class="action-sheet"
|
||||
title="选择规格" @close="关闭弹框">
|
||||
<view style="padding:15rpx">
|
||||
<!-- 内容区域-->
|
||||
<!-- 信息头部-->
|
||||
<view class="product-header">
|
||||
<image :src="goods_sku_list_item?.goods_sku_list.at(index_goods_sku_子元素)?.goods_sku_主图.at(0)"
|
||||
class="product-image"
|
||||
mode="aspectFill"></image>
|
||||
<view class="header-info">
|
||||
<view class="product-title">六果香洗衣液</view>
|
||||
<view class="product-desc">源自天然酵素，深层洁净衣物</view>
|
||||
<view class="price-display">
|
||||
<view class="current-price">
|
||||
<text class="currency">¥</text>
|
||||
<!-- 当前商品的会员价格-->
|
||||
<text class="price-number">
|
||||
{{
|
||||
(xiaoMain.six_good?.goods_商品销售规格?.会员价 ?? 0) / 100
|
||||
}}
|
||||
</text>
|
||||
<!-- 当前商品的正常售价-->
|
||||
<text
|
||||
v-if=" xiaoMain.six_good?.goods_商品销售规格?.零售价格"
|
||||
class="member-price">
|
||||
¥{{
|
||||
(xiaoMain.six_good?.goods_商品销售规格?.零售价格 ?? 0) / 100
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
<!-- 已选中的规格-->
|
||||
<view class="selected-spec-text">已选：{{
|
||||
xiaoMain.six_good?.goods_商品销售规格?.销售规格
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选取规格-->
|
||||
<view class="spec-section">
|
||||
<view class="section-title">
|
||||
<text class="title-text">选择规格</text>
|
||||
<text class="required">*</text>
|
||||
</view>
|
||||
<view class="spec-options">
|
||||
<view
|
||||
:class="{ 'spec-selected': true}" class="spec-option">
|
||||
<view class="spec-name">{{ xiaoMain.six_good?.goods_商品销售规格?.销售规格 }}</view>
|
||||
<view class="spec-price-info">
|
||||
<view class="spec-price">
|
||||
<text class="currency">¥</text>
|
||||
<text class="price-number">{{
|
||||
(xiaoMain.six_good?.goods_商品销售规格?.会员价 ?? 0) / 100
|
||||
}}
|
||||
</text>
|
||||
<!-- <text class="price-number">2222</text>-->
|
||||
</view>
|
||||
<view class="member-price-tag">
|
||||
零售价 ¥{{
|
||||
(xiaoMain.six_good?.goods_商品销售规格?.零售价格 ?? 0) / 100
|
||||
}}
|
||||
<!-- 零售价 ¥3333-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="spec-section-sku">
|
||||
<view class="section-title">
|
||||
<text class="title-text">{{ goods_sku_list_item?.goods_select_title }}</text>
|
||||
<text class="required">*</text>
|
||||
</view>
|
||||
<view class="spec-options-sku">
|
||||
<!-- sku的选项,比如可以选择香型,-->
|
||||
<view v-for="(spec, goods_sku_index) in goods_sku_list_item?.goods_sku_list"
|
||||
:key="goods_sku_index"
|
||||
:class="{ 'spec-selected': selectedSpecIndex === goods_sku_index }"
|
||||
class="spec-options-sku-items"
|
||||
@click="选取规则事件(goods_sku_index)">
|
||||
<wd-button :plain="index_goods_sku_子元素!==goods_sku_index"
|
||||
:type="index_goods_sku_子元素===goods_sku_index?'warning':'primary'"
|
||||
custom-class="custom-shadow">
|
||||
{{ spec.goods_sku_name }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 购买数量 -->
|
||||
<view class="quantity-section">
|
||||
<!-- 对购买的商品数量进行 加 和 减-->
|
||||
<view class="section-title">购买数量</view>
|
||||
<view class="quantity-control">
|
||||
<view :class="{ 'quantity-disabled': 2 <= 1 }" class="quantity-btn" @click="商品数量减">
|
||||
<text class="btn-icon">－</text>
|
||||
</view>
|
||||
<view class="quantity-input">{{ 当前选中商品的数量 }}</view>
|
||||
<view class="quantity-btn" @click="商品数量加">
|
||||
<text class="btn-icon">＋</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容区域-->
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="action-footer">
|
||||
<view class="total-section">
|
||||
<view class="total-label">合计：</view>
|
||||
<view class="total-amount">
|
||||
<text class="currency">¥</text>
|
||||
<text class="price-number">{{ 当前商品总金额 / 100 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-buttons">
|
||||
|
||||
<view class="action-btn buy-now" @click="立即购买">
|
||||
<wd-icon :size="20" classPrefix="wd-icon" name="qrcode"/>
|
||||
<text class="btn-text">立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, ref} from "vue";
|
||||
import type {ApiAxiosResponse} from "@/types/通用类型";
|
||||
import {useRequest} from "@uni-helper/uni-use";
|
||||
import {商城详情页_下单支付} from "@/hooks/接口API";
|
||||
import {useThrottleFn} from "@vueuse/shared";
|
||||
import type {card购物车商品类型} from "@/subPackages/homeSubPages/商城页面目录/商城商品类型";
|
||||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||
|
||||
let xiaoMain = useMainXiaoStore();
|
||||
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-pay-card"});
|
||||
|
||||
let showRules = ref(false);
|
||||
const selectedSpecIndex = ref<number>(0);// 这是一个默认值: 选中商品销售规格列表的第一个商品
|
||||
|
||||
const 当前选中商品的数量 = ref(1);
|
||||
const index_goods_sku_子元素 = ref(0);
|
||||
const goods_sku_list_item = computed(() => {
|
||||
return xiaoMain.six_good?.goods_商品销售规格?.goods_sku;
|
||||
});
|
||||
const goods_sku_current = computed(() => {
|
||||
return goods_sku_list_item.value?.goods_sku_list.at(index_goods_sku_子元素.value);
|
||||
});
|
||||
const six_goods_下单商品 = computed<card购物车商品类型>(() => {
|
||||
const spec = xiaoMain.six_good?.goods_商品销售规格;
|
||||
const sku = goods_sku_current.value;
|
||||
|
||||
return {
|
||||
goods_商品品牌: xiaoMain.six_good?.goods_商品品牌 ?? "",
|
||||
goods_商品标题: spec?.goods_商品标题 ?? "",
|
||||
零售价格: spec?.零售价格 ?? 0,
|
||||
会员价: spec?.会员价 ?? 0,
|
||||
销售规格: spec?.销售规格 ?? "",
|
||||
单个商品实际支付价格: spec?.单个商品实际支付价格 ?? 0,
|
||||
// ✅ 直接计算，不引用其他 computed
|
||||
单个商品订单总金额: (spec?.会员价 ?? 0) * 当前选中商品的数量.value,
|
||||
单个商品订单数量: 当前选中商品的数量.value,
|
||||
推荐积分: spec?.推荐积分 ?? {},
|
||||
// 商品条码: spec?.商品条码,
|
||||
商品条码: sku?.goods_sku_条形码 ?? "",
|
||||
商品ID: sku?.goods_sku_id ?? "",
|
||||
goods_sku_name: sku?.goods_sku_name ?? "",
|
||||
goods_sku_主图: sku?.goods_sku_主图?.at(0) ?? "",
|
||||
goods_sku_详情图: sku?.goods_sku_详情图 ?? []
|
||||
};
|
||||
});
|
||||
let 当前商品会员价 = computed<number>(() => {
|
||||
return six_goods_下单商品.value?.会员价 ?? 0;
|
||||
});
|
||||
|
||||
let 当前商品总金额 = computed(() => {
|
||||
return 当前商品会员价.value * 当前选中商品的数量.value;
|
||||
});
|
||||
|
||||
async function 打开支付弹窗(): Promise<void> {
|
||||
showRules.value = true;
|
||||
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||
}
|
||||
|
||||
async function 关闭弹框(): Promise<void> {
|
||||
showRules.value = false;
|
||||
}
|
||||
|
||||
async function 选取规则事件(goodsNumber: number,): Promise<void> {
|
||||
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||
当前选中商品的数量.value = 1; // 选完后需要恢默认值
|
||||
index_goods_sku_子元素.value = goodsNumber;
|
||||
}
|
||||
|
||||
|
||||
async function 商品数量减(): Promise<void> {
|
||||
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||
if (当前选中商品的数量.value <= 1) {
|
||||
当前选中商品的数量.value = 1;
|
||||
} else {
|
||||
当前选中商品的数量.value--;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function 商品数量加(): Promise<void> {
|
||||
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||
当前选中商品的数量.value++;
|
||||
six_goods_下单商品.value.单个商品订单数量 = 当前选中商品的数量.value;
|
||||
six_goods_下单商品.value.单个商品订单总金额 = 当前商品总金额.value;
|
||||
}
|
||||
|
||||
// 不支持购物车的支付方式
|
||||
|
||||
const 立即购买 = useThrottleFn(async () => {
|
||||
//执行时机: 点击后直接执行,但是在设置的时间范围内,不会再次执行
|
||||
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||
const order订单类型 = xiaoMain.six_good?.goods_商品销售场景 === "赢免单" ? "赢免单" : "商城订单";
|
||||
xiaoMain.card购物车列表数据 = [];
|
||||
xiaoMain.card购物车列表数据.push(six_goods_下单商品.value);
|
||||
let orderData = {
|
||||
self_mini_openid: xiaoMain.mini_openid,
|
||||
self_mini_unionid: xiaoMain.mini_unionid,
|
||||
order购物车商品数据: xiaoMain.card购物车列表数据, // 支付时商品
|
||||
share订单分享者ID: xiaoMain.superior_unionid,
|
||||
order订单类型: order订单类型,
|
||||
order用户配送地址: xiaoMain.addressCurrent当前默认地址,
|
||||
order购物车商品数量: 当前选中商品的数量.value,
|
||||
order购物车商品总价: 当前商品总金额.value,
|
||||
order商品ID: xiaoMain.six_good?.idKey,
|
||||
};
|
||||
try {
|
||||
let data = await useRequest<ApiAxiosResponse<Array<string>, WechatMiniprogram.RequestPaymentOption>>(商城详情页_下单支付, {
|
||||
method: "POST", data: orderData
|
||||
});
|
||||
await wx.requestPayment({...data.data.value!.resData.dictData});
|
||||
showRules.value = false; // 支付成功后,隐藏弹窗
|
||||
} catch (e) {
|
||||
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||
}
|
||||
}, 1300);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
<style lang="scss" scoped>
|
||||
// 多行文本溢出显示...
|
||||
@mixin text-ellipsis-multi($line-clamp: 1) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $line-clamp;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 浅色模式 */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.spces-div {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.5);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.5);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.div-items-left {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||
|
||||
//border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.div-items-right {
|
||||
//
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.spces-div {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.div-items-left {
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
}
|
||||
.div-items-right {
|
||||
//
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.root-com {
|
||||
width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.specs {
|
||||
width: 686rpx;
|
||||
//background-color: rgba(255, 255, 255, 0.1);
|
||||
margin: 0 auto;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.specs-title {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.specs-title-color {
|
||||
background-color: #f0883a;
|
||||
line-height: 100%;
|
||||
width: 15rpx;
|
||||
border-radius: 15rpx;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.specs-title-text {
|
||||
width: 112rpx;
|
||||
height: 50rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
//color: #FFFFFF;
|
||||
line-height: 50rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.spces-params {
|
||||
display: flex;
|
||||
|
||||
.spces-div {
|
||||
width: 648rpx;
|
||||
border-radius: 15rpx;
|
||||
//border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
|
||||
.div-items {
|
||||
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
|
||||
.div-items-left {
|
||||
box-sizing: border-box;
|
||||
padding-left: 28rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
//color: #FFFFFF;
|
||||
line-height: 70rpx;
|
||||
font-style: normal;
|
||||
//border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
//border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||
|
||||
//border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||
//border-right: 1px solid rgba(0, 0, 0, 0.5);
|
||||
|
||||
width: 150rpx;
|
||||
}
|
||||
|
||||
.div-items-right {
|
||||
box-sizing: border-box;
|
||||
padding-left: 28rpx;
|
||||
//border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
//border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||
width: 498rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
//color: #999999;
|
||||
line-height: 70rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
@include text-ellipsis-multi();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="root-com">
|
||||
<view class="specs">
|
||||
<view class="specs-title">
|
||||
<view class="line-widht-number" style="width: 18rpx"></view>
|
||||
<view class="specs-title-color">1</view>
|
||||
<view class="line-widht-number" style="width: 10rpx"></view>
|
||||
<view class="specs-title-text">规格信息</view>
|
||||
</view>
|
||||
<view class="spces-params">
|
||||
<view class="line-widht-number" style="width: 18rpx"></view>
|
||||
<view class="spces-div">
|
||||
<view v-for="(value,key) in xiaoMain.six_good?.goods_商品信息" :key="key"
|
||||
class="div-items">
|
||||
<view class="div-items-left">{{ key }}</view>
|
||||
<view class="div-items-right">{{ value }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line-widht-number" style="height: 22rpx"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||
|
||||
let xiaoMain = useMainXiaoStore();
|
||||
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-product_sales_specifications"});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
<style lang="scss" scoped>
|
||||
// 商品服务的组件信息
|
||||
.root-com {
|
||||
width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.service {
|
||||
width: 686rpx;
|
||||
height: 190rpx;
|
||||
padding: 20rpx 18rpx;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.service-item {
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
|
||||
.service-left {
|
||||
width: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #F55726;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.service-middle {
|
||||
width: 12rpx;
|
||||
}
|
||||
|
||||
.service-right {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="root-com">
|
||||
<view class="service">
|
||||
<view class="service-delivery service-item">
|
||||
<view class="service-left">配送</view>
|
||||
<view class="service-middle"></view>
|
||||
<view class="service-right">24H发货，第三方物流配送，满¥30免运</view>
|
||||
</view>
|
||||
<view class="service-serve service-item">
|
||||
<view class="service-left">服务</view>
|
||||
<view class="service-middle"></view>
|
||||
<view class="service-right">品质保证，损坏包赔</view>
|
||||
</view>
|
||||
<view class="service-preferential service-item">
|
||||
<view class="service-left">优惠</view>
|
||||
<view class="service-middle"></view>
|
||||
<view class="service-right">当前已优惠{{ 优惠金额 }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import {computed} from "vue";
|
||||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||
|
||||
let xiaoMain = useMainXiaoStore();
|
||||
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-service-params"});
|
||||
let 优惠金额 = computed(() => {
|
||||
const 价格 = xiaoMain.six_good?.goods_商品销售规格?.零售价格 ?? 0;
|
||||
const 会员价 = xiaoMain.six_good?.goods_商品销售规格?.会员价 ?? 0;
|
||||
return 价格 / 100 - 会员价 / 100;
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<view class="share-card">
|
||||
<!-- 左侧：信息与数据展示 -->
|
||||
<view class="card-left">
|
||||
|
||||
<!-- 核心卖点标签组 -->
|
||||
<view class="tags-container">
|
||||
<view class="highlight-tag">
|
||||
<text class="tag-icon">🎁</text>
|
||||
<text class="tag-text">无需下单</text>
|
||||
</view>
|
||||
<view class="sub-tag">
|
||||
<text class="tag-text">分享即得</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main-content">
|
||||
<text class="title">推荐给好友</text>
|
||||
<text class="subtitle">0门槛参与，好物积分</text>
|
||||
|
||||
<!-- 动态数据展示区 -->
|
||||
<view class="stats-row">
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">{{ xiaoMain.mini_user_积分数据?.share点击次数 }}</text>
|
||||
<text class="stat-label">累计点击</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-num highlight">{{ xiaoMain.mini_user_积分数据?.share总积分 }}</text>
|
||||
<text class="stat-label">累计获得积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tips-row">
|
||||
<text class="tips-icon">💰</text>
|
||||
<text class="tips-text">积分可直接在「我的 - 积分」提现</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：操作按钮 -->
|
||||
<view class="card-right">
|
||||
<button class="action-btn" openType="share" @click="分享事件">
|
||||
<text class="btn-text">好物推荐</text>
|
||||
<text class="btn-sub">赚积分</text>
|
||||
</button>
|
||||
|
||||
<view class="wallet-link" @click="去兑换进入积分页面">
|
||||
<text class="link-text">去兑换</text>
|
||||
<text class="link-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||
|
||||
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-share"});
|
||||
|
||||
async function 分享事件(): Promise<void> {
|
||||
await wx.vibrateShort({type: "light"});
|
||||
}
|
||||
|
||||
const 去兑换进入积分页面 = () => {
|
||||
wx.navigateTo({url: "/subPackages/homeSubPages/用户积分页面/用户积分页面"}).then().catch((error) => {
|
||||
console.log("捕获错误❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅", error);
|
||||
wx.reLaunch({url: "/pageTabBar/Home/Home"});
|
||||
});
|
||||
};
|
||||
let xiaoMain = useMainXiaoStore();
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 变量定义 */
|
||||
$primary-color: #FF9F43; // 橙色：收益
|
||||
$accent-color: #1DD1A1; // 绿色：无门槛/免费
|
||||
$text-main: #333333;
|
||||
$text-sub: #666666;
|
||||
$text-light: #999999;
|
||||
$bg-gradient: linear-gradient(135deg, #FFF9F0 0%, #FFECD1 100%);
|
||||
|
||||
.share-card {
|
||||
width: 686rpx;
|
||||
margin: 0 auto;
|
||||
height: 300rpx;
|
||||
background: $bg-gradient;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 10rpx 30rpx rgba(255, 159, 67, 0.12);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
/* 背景装饰 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -80rpx;
|
||||
right: -80rpx;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.card-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
z-index: 1;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.highlight-tag {
|
||||
background: rgba(29, 209, 161, 0.15); // 绿色背景强调无门槛
|
||||
border: 1rpx solid rgba(29, 209, 161, 0.3);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag-icon {
|
||||
font-size: 20rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 22rpx;
|
||||
color: $accent-color;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-tag {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.tag-text {
|
||||
font-size: 22rpx;
|
||||
color: $text-sub;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: $text-main;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 24rpx;
|
||||
color: $text-sub;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
backdrop-filter: blur(6px);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.8);
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.stat-num {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: $text-main;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
|
||||
|
||||
&.highlight {
|
||||
color: $primary-color;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 20rpx;
|
||||
color: $text-light;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
height: 32rpx;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
margin: 0 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tips-icon {
|
||||
font-size: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-size: 22rpx;
|
||||
color: $text-sub;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
width: 220rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
padding-left: 20rpx;
|
||||
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(90deg, $primary-color, #FF6B6B);
|
||||
padding-top: 20rpx;
|
||||
border-radius: 88rpx;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.35);
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
/* 按钮高光效果 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 重置按钮默认样式 */
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.btn-sub {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin-top: 6rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-size: 24rpx;
|
||||
color: $text-sub;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.link-arrow {
|
||||
font-size: 28rpx;
|
||||
color: $primary-color;
|
||||
margin-left: 4rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
<style lang="scss" scoped>
|
||||
.root-com {
|
||||
width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
.group_3 {
|
||||
width: 750rpx;
|
||||
//border-top: dashed 1px #828282;
|
||||
//border-bottom: dashed 1px #828282;
|
||||
height: 612rpx;
|
||||
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||
|
||||
:deep(.customImage) {
|
||||
width: 750rpx;
|
||||
height: 612rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||
|
||||
.customIcon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.error-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
|
||||
<view class="root-com">
|
||||
<view class="group_3 flex-col">
|
||||
<wd-img custom-class="customImage" custom-image="custom-image"
|
||||
:src="xiaoMain.six_good?.goods_商品销售规格?.goods_sku?.goods_sku_list.at(0)?.goods_sku_主图.at(0)">
|
||||
<template #error>
|
||||
<view class="error-wrap">❌</view>
|
||||
</template>
|
||||
<template #loading>
|
||||
<view class="loading-wrap">
|
||||
<wd-loading :size="20" color="#fff" type="spinner"/>
|
||||
</view>
|
||||
</template>
|
||||
</wd-img>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||
|
||||
let xiaoMain = useMainXiaoStore();
|
||||
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-swiper-images"});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,308 @@
|
||||
<style lang="scss" scoped>
|
||||
//@import "@/assets/demo.scss";
|
||||
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
|
||||
$xiaoBottomHeigh: 80rpx; // 滚动区域外,可以预留的高度
|
||||
/* 浅色模式 */
|
||||
|
||||
@mixin line-color {
|
||||
@keyframes gradientFlow {
|
||||
0%, 100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||
background-size: 400% 100%;
|
||||
animation: gradientFlow 5s ease infinite;
|
||||
}
|
||||
|
||||
.phone-screen {
|
||||
box-sizing: border-box;
|
||||
font-family: "xiaoFont", sans-serif;
|
||||
height: v-bind(pxScreenHeight);
|
||||
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||
background-size: 750rpx;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.error-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.root-container {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: v-bind(pxWindowHeight);
|
||||
|
||||
.status-wifi-nav {
|
||||
/*状态栏的高度 这里的值不能动*/
|
||||
box-sizing: border-box;
|
||||
height: v-bind(statusHeight);
|
||||
|
||||
:deep(.default-view-slot) {
|
||||
line-height: v-bind(meunHeight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: v-bind(meunHeight);
|
||||
text-align: center;
|
||||
|
||||
.default-view-slot-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.default-view-slot-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||
border-radius: calc(v-bind(meunHeight) / 2);
|
||||
|
||||
.title-imgimage_item {
|
||||
width: calc(v-bind(meunHeight) * 0.7);
|
||||
height: calc(v-bind(meunHeight) * 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.default-view-slot-right-text {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.scrollTopHeigh {
|
||||
/*在滚动区域内的, 可以自定义的高度*/
|
||||
box-sizing: border-box;
|
||||
height: $defaultTopHeight;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
|
||||
.scrollViewHeigh {
|
||||
/*滚动页面区域范围*/
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
|
||||
overflow: hidden;
|
||||
|
||||
:deep() {
|
||||
/*button按钮的 阴影样式可以直接使用*/
|
||||
.custom-shadow {
|
||||
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.scrollBottomHeigh {
|
||||
box-sizing: border-box;
|
||||
height: $xiaoBottomHeigh;
|
||||
//@include line-color();
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="phone-screen">
|
||||
<wd-config-provider :theme="theme">
|
||||
<view class="root-container">
|
||||
<view class="status-wifi-nav">
|
||||
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||
@homeRight="homeRight">
|
||||
<template v-slot:default>
|
||||
<view class="default-view-slot" @click="defaultSearchChange">
|
||||
<view class="default-view-slot-left"></view>
|
||||
<view class="default-view-slot-right">
|
||||
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||
src="https://hudie.xiao.band/search.png" webp/>
|
||||
<view class="default-view-slot-right-text">搜索</view>
|
||||
</view>
|
||||
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||
</view>
|
||||
</template>
|
||||
</ChildComScroll>
|
||||
</view>
|
||||
<!--分隔线,上面的是子组件-->
|
||||
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||||
<!-- 滚动区域开始-->
|
||||
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||
class="scrollViewHeigh">
|
||||
|
||||
<goods-com-swiper-images></goods-com-swiper-images>
|
||||
<goods-com-params></goods-com-params>
|
||||
<goods-com-share></goods-com-share>
|
||||
<view class="line-widht-number" style="height: 20rpx"></view>
|
||||
<goods-com-service-params></goods-com-service-params>
|
||||
<goods-com-product_sales_specifications></goods-com-product_sales_specifications>
|
||||
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||
<goods-com-list-images></goods-com-list-images>
|
||||
</scroll-view>
|
||||
<!--滚动区域结束-->
|
||||
<view class="scrollBottomHeigh"><!--底部预留区域-->
|
||||
<goods-com-pay-card></goods-com-pay-card>
|
||||
</view>
|
||||
<wd-toast selector="default-toast"/>
|
||||
<wd-message-box selector="default-message-box"/>
|
||||
|
||||
</view>
|
||||
</wd-config-provider>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||
import {ref} from "vue";
|
||||
import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
|
||||
import {onLoad, onShareAppMessage, onShareTimeline, onTabItemTap} from "@dcloudio/uni-app";
|
||||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||
import GoodsComSwiperImages from "@/subPackages/homeSubPages/商品详情页面/goods-com-swiper-images.vue";
|
||||
import GoodsComParams from "@/subPackages/homeSubPages/商品详情页面/goods-com-params.vue";
|
||||
import GoodsComShare from "@/subPackages/homeSubPages/商品详情页面/goods-com-share.vue";
|
||||
import GoodsComProduct_sales_specifications
|
||||
from "@/subPackages/homeSubPages/商品详情页面/goods-com-product_sales_specifications.vue";
|
||||
import GoodsComServiceParams from "@/subPackages/homeSubPages/商品详情页面/goods-com-service-params.vue";
|
||||
import GoodsComListImages from "@/subPackages/homeSubPages/商品详情页面/goods-com-list-images.vue";
|
||||
import GoodsComPayCard from "@/subPackages/homeSubPages/商品详情页面/goods-com-pay-card.vue";
|
||||
import {usePage, useRequest} from "@uni-helper/uni-use";
|
||||
import {
|
||||
分享_HOME页面分享到朋友圈, 分享_商品详情页面分享到朋友圈,
|
||||
分享_商品详情页面群或者好友, 积分_统计查询
|
||||
} from "@/hooks/接口API";
|
||||
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||
import {whenever} from "@vueuse/shared";
|
||||
|
||||
let xiaoMain = useMainXiaoStore();
|
||||
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||
let pxScreenHeight = ref(); // 手机高度
|
||||
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||
let pxScrollHeight = ref(); // 滚动区域高度
|
||||
let statusHeight = ref(); // 固定的顶部
|
||||
let meunHeight = ref();//插槽时要用的 高度
|
||||
const modelValue: GlobelsChildPropsType = {
|
||||
isShowLeft: {
|
||||
showCom: "icon",
|
||||
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 24},
|
||||
},
|
||||
isShowRight: {
|
||||
showCom: "icon",
|
||||
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||
iconTextRight: {classPrefix: "xiaozizi", name: "shangpinxiangqing", size: 19},
|
||||
},
|
||||
title_text: "六果泡泡", navIsShow: "default",
|
||||
};
|
||||
const homeLeft = () => {
|
||||
wx.vibrateShort({type: "heavy"});
|
||||
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||
|
||||
};
|
||||
|
||||
const homeRight = () => {
|
||||
wx.vibrateShort({type: "heavy"});
|
||||
console.log("右键按键");
|
||||
};
|
||||
let defaultSearchChange = async () => {
|
||||
console.log("搜索发起");
|
||||
};
|
||||
onTabItemTap(() => {
|
||||
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||
});
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
let page_path = usePage().value.route;
|
||||
uni.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ["shareAppMessage", "shareTimeline"], // 关键！明确启用哪些功能 "shareTimeline"
|
||||
});
|
||||
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: "群分享主题",
|
||||
path: page_path,
|
||||
desc: "描述",
|
||||
imageUrl: "/static/vite.png",
|
||||
promise: new Promise<Page.CustomShareContent>(async (resolve) => {
|
||||
try {
|
||||
let dataPostData = await useRequest<ApiAxiosResponse<Array<string>, Page.CustomShareContent>>(分享_商品详情页面群或者好友, {
|
||||
method: "POST", data: {
|
||||
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||
page_path: page_path, idKey: xiaoMain.six_good?.idKey
|
||||
}
|
||||
});
|
||||
resolve(dataPostData.data.value?.resData.dictData ?? {});
|
||||
} catch (e) {
|
||||
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||
}
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: "朋友圈分享测试", //自定义标题，即朋友圈列表页上显示的标题默认值为小程序的名称
|
||||
imageUrl: "https://oss.xiao.band/backhome.png",//imageUrl:自定义图片路径，可以是本地文件或者网络图片
|
||||
query: "superior_unionid=shareTimeline",
|
||||
path: page_path,
|
||||
promise: new Promise<Page.ShareTimelineContent>(async (resolve,) => {
|
||||
try {
|
||||
let dataPostData = await useRequest<ApiAxiosResponse<Array<string>, Page.CustomShareContent>>(分享_商品详情页面分享到朋友圈, {
|
||||
method: "POST", data: {
|
||||
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||
page_path: page_path, idKey: xiaoMain.six_good?.idKey
|
||||
}
|
||||
});
|
||||
resolve(dataPostData.data.value?.resData.dictData ?? {});
|
||||
} catch (e) {
|
||||
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||
}
|
||||
}),
|
||||
};
|
||||
});
|
||||
wx.onCopyUrl(() => {
|
||||
// return {query: `superior_unionid=${xiao_main.self_user_unionid}`};
|
||||
console.log("superior_unionid=" + xiaoMain.superior_unionid, "---------------");
|
||||
return {query: "superior_unionid=" + xiaoMain.mini_unionid};
|
||||
});
|
||||
// 用户点击了收藏按钮
|
||||
// onAddToFavorites((options: Page.AddToFavoritesOption) => {
|
||||
// console.log("webViewUrl: ", options.webviewUrl);
|
||||
// return {
|
||||
// title: "收藏",
|
||||
// imageUrl: "https://oss.xiao.band/backhome.png",
|
||||
// query: "name=xxx&age=xxx",
|
||||
// };
|
||||
// });
|
||||
});
|
||||
whenever(() => xiaoMain.mini_unionid, () => {
|
||||
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 demo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_value ",);
|
||||
xiaoMain.query_积分统计查询(积分_统计查询, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||
}, {immediate: true});
|
||||
</script>
|
||||
Reference in New Issue
Block a user