完成团购模块页面
This commit is contained in:
赵毅
parent
5b934ecd17
commit
ab21a6f441
@ -36,7 +36,7 @@ export default {
|
||||
name: '凯旋城东区',
|
||||
address: '衡水市,桃城-衡水市人民路与育才街交叉口西行100米路南',
|
||||
distance: '0 m',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
|
||||
|
||||
},
|
||||
{
|
||||
@ -44,35 +44,35 @@ export default {
|
||||
name: '岸芷庭蓝（一区）',
|
||||
address: '衡水市,河阳西路与中华南大街交叉口东220米',
|
||||
distance: '1000 m',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '滏阳锦苑',
|
||||
address: '衡水市,滏阳苑',
|
||||
distance: '2 km',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '隆兴小区',
|
||||
address: '衡水市,河北省衡水市高新区隆兴西路隆兴小区',
|
||||
distance: '5 km',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '紫金广场',
|
||||
address: '衡水市,衡水市桃城区人民西路与庆丰南街交叉口',
|
||||
distance: '894 km',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '万和瑞景',
|
||||
address: '衡水市,政通街46号',
|
||||
distance: '12249 km',
|
||||
image: 'http://localhost:8080/test_community.png'
|
||||
image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"after_sales_reason": "拍错商品/不想要了",
|
||||
"after_sales_type": 1,
|
||||
"application_description": "请尽快处理退款",
|
||||
"application_images": "http://localhost:8080/test.png",
|
||||
"application_images": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"is_need_process": 1,
|
||||
"process_status": 1,
|
||||
"refund_amount": 68.00,
|
||||
@ -23,7 +23,7 @@
|
||||
"goods_id": 8001,
|
||||
"goods_name": "澳洲牛排",
|
||||
"is_support_same_day": 1,
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"commodity_pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"sales_price": 68.00,
|
||||
"count": 1,
|
||||
"after_sales_status": 1
|
||||
@ -68,9 +68,9 @@
|
||||
"after_sales_reason": "商品质量问题",
|
||||
"after_sales_type": 2,
|
||||
"application_description": "商品包装破损",
|
||||
"application_images": "http://localhost:8080/test.png",
|
||||
"application_images": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"return_description": "已通过顺丰寄回",
|
||||
"return_images": "http://localhost:8080/test.png",
|
||||
"return_images": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"return_tracking_no": "SF1234567890",
|
||||
"return_logistics_company": "顺丰速运",
|
||||
"return_contact_phone": "13800138000",
|
||||
@ -125,7 +125,7 @@
|
||||
"applicant": "王五",
|
||||
"after_sales_reason": "商品发错型号",
|
||||
"application_description": "购买的是XL码，收到L码",
|
||||
"application_images": "http://localhost:8080/test.png",
|
||||
"application_images": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"is_need_process": 1,
|
||||
"process_status": 1,
|
||||
"after_sales_goods": "1@8006",
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
class="copy-icon" @click="copyRefundNo"/> -->
|
||||
</view>
|
||||
</view>
|
||||
<image src="http://localhost:8080/af_update_address.png" class="icon_2" />
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_update_address.png" class="icon_2" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
"order_id": 1001,
|
||||
"goods_id": 8001,
|
||||
"goods_name": "澳洲牛排",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"commodity_pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"goods_unit": "盒",
|
||||
"goods_spec": "200g/盒",
|
||||
"cost_price": 45.0,
|
||||
@ -45,7 +45,7 @@
|
||||
"id": 7002,
|
||||
"goods_id": 8002,
|
||||
"goods_name": "有机西兰花",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"commodity_pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"goods_unit": "份",
|
||||
"goods_spec": "500g/份",
|
||||
"cost_price": 8.0,
|
||||
@ -71,7 +71,7 @@
|
||||
"id": 7003,
|
||||
"goods_id": 8003,
|
||||
"goods_name": "精品榴莲",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"commodity_pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"sales_price": 152.0,
|
||||
"count": 1,
|
||||
"is_support_same_day": 1,
|
||||
@ -129,7 +129,7 @@
|
||||
"id": 7003,
|
||||
"goods_id": 8003,
|
||||
"goods_name": "冷冻虾仁",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"commodity_pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"sales_price": 152.0,
|
||||
"count": 3,
|
||||
"is_support_same_day": 1,
|
||||
@ -139,7 +139,7 @@
|
||||
"id": 7004,
|
||||
"goods_id": 8004,
|
||||
"goods_name": "精品榴莲",
|
||||
"commodity_pic": "http://localhost:8080/test.png",
|
||||
"commodity_pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"sales_price": 152.0,
|
||||
"count": 1,
|
||||
"is_support_same_day": 2,
|
||||
|
||||
@ -186,7 +186,7 @@
|
||||
<text> {{ merchantAddress }} </text>
|
||||
<view class="copy-icon" @click="copyRefundNo"></view>
|
||||
</view>
|
||||
<image src="http://localhost:8080/af_update_address.png" class="icon_2"></image>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_update_address.png" class="icon_2"></image>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="refund-item2">
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view>
|
||||
<image class="bottomImg" src="http://localhost:8080/secdBack_bottom.png" alt=""/>
|
||||
<image class="bottomImg" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/secdBack_bottom.png" alt=""/>
|
||||
</view>
|
||||
<button class="modify-btn" @click="modifyRefund">平台介入</button>
|
||||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||
|
||||
@ -16,15 +16,15 @@
|
||||
<view class="label">选择运营商</view>
|
||||
<view class="operator-list">
|
||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaMobile' }" @click="selectOperator('chinaMobile')">
|
||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_yidong.png" mode="aspectFit" />
|
||||
<image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_yidong.png" mode="aspectFit" />
|
||||
<text>移动</text>
|
||||
</view>
|
||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaUnicom' }" @click="selectOperator('chinaUnicom')">
|
||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_liantong.png" mode="aspectFit" />
|
||||
<image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_liantong.png" mode="aspectFit" />
|
||||
<text>中国联通</text>
|
||||
</view>
|
||||
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaTelecom' }" @click="selectOperator('chinaTelecom')">
|
||||
<image class="operator-icon" src="http://localhost:8080/payTheFees_dianxin.png" mode="aspectFit" />
|
||||
<image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_dianxin.png" mode="aspectFit" />
|
||||
<text>中国电信</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -138,11 +138,11 @@ export default {
|
||||
getOperatorIcon() {
|
||||
switch (this.selectedOperator) {
|
||||
case 'chinaMobile':
|
||||
return 'http://localhost:8080/payTheFees_yidong.png';
|
||||
return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_yidong.png';
|
||||
case 'chinaUnicom':
|
||||
return 'http://localhost:8080/payTheFees_liantong.png';
|
||||
return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_liantong.png';
|
||||
case 'chinaTelecom':
|
||||
return 'http://localhost:8080/payTheFees_dianxin.png';
|
||||
return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_dianxin.png';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
||||
209
packages/shop/groupPurchase/index.css
Normal file
209
packages/shop/groupPurchase/index.css
Normal file
@ -0,0 +1,209 @@
|
||||
.group-purchase-container {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
max-width: 750rpx;
|
||||
margin: 0 auto;
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 顶部横幅 */
|
||||
.banner {
|
||||
background: linear-gradient(to right, #fd8d3c, #fe4909);
|
||||
color: white;
|
||||
/* position: relative; */
|
||||
overflow: hidden;
|
||||
height: 350rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.banner image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
/* object-fit: cover; */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
.banner-content {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 18rpx;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 4rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.goods-list {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx 20rpx;
|
||||
margin-top: -50rpx;
|
||||
border-radius: 50rpx 50rpx 0 0;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
border-radius: 10rpx;
|
||||
padding: 15rpx;
|
||||
margin-bottom: 25rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.goods-image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.price-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.group-price {
|
||||
font-size: 28rpx;
|
||||
color: #e63946;
|
||||
margin-right: 10rpx;
|
||||
padding: 3rpx 8rpx;
|
||||
border-radius: 4rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.group-price1{
|
||||
width: 100rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
color: #ffffff;
|
||||
background-color: #fc5d15;
|
||||
border-radius: 15rpx 0 0 15rpx;
|
||||
}
|
||||
|
||||
.group-price2{
|
||||
width: auto;
|
||||
padding: 10rpx 15rpx;
|
||||
background: linear-gradient(to bottom, #fef6d6, #fee8a9);
|
||||
border-radius: 0 15rpx 15rpx 0;
|
||||
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
width: 250rpx;
|
||||
font-size: 22rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #fe2f01;
|
||||
position: absolute;
|
||||
top: 150rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.decrease-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #f5f5f5;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 50%;
|
||||
line-height: 33rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.increase-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #ff502a;
|
||||
border-radius: 50%;
|
||||
line-height: 33rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
margin: 0 15rpx;
|
||||
font-size: 24rpx;
|
||||
width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 购物车按钮 */
|
||||
.shop_car {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
position: fixed;
|
||||
right: 33rpx;
|
||||
bottom: 180rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.shop_car image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -10rpx;
|
||||
}
|
||||
101
packages/shop/groupPurchase/index.vue
Normal file
101
packages/shop/groupPurchase/index.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="group-purchase-container">
|
||||
<!-- 顶部横幅 -->
|
||||
<view class="banner">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gp_index_top.png"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-list">
|
||||
<!-- 商品项 -->
|
||||
<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
|
||||
<view class="goods-image">
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">{{ item.name }}</view>
|
||||
<view class="goods-desc">{{ item.desc }}</view>
|
||||
<view class="price-container">
|
||||
<view class="group-price">
|
||||
<view class="group-price1">团购价</view>
|
||||
<view class="group-price2">{{ item.groupPrice }}</view>
|
||||
</view>
|
||||
<view class="quantity-control">
|
||||
<view class="decrease-btn" @tap.stop="decreaseQuantity(index)">-</view>
|
||||
<view class="quantity">{{ item.quantity }}</view>
|
||||
<view class="increase-btn" @tap.stop="increaseQuantity(index)">+</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="original-price">单买价 {{ item.originalPrice }}</view>
|
||||
<view class="countdown">{{ item.countdown }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购物车按钮 -->
|
||||
<view class="shop_car" @click="shopCar">
|
||||
<u-badge numberType="limit" type="error" max="99" :value="carNum"></u-badge>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsList: [
|
||||
{
|
||||
id: 30,
|
||||
name: "泰国金枕榴莲泰国金枕榴莲",
|
||||
desc: "心形榴莲 软糯香甜",
|
||||
image: "/static/logo.png",
|
||||
groupPrice: "¥125.9/个",
|
||||
originalPrice: "¥200/个",
|
||||
countdown: "19天2小时10分钟后结束",
|
||||
quantity: 1
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
name: "泰国金枕榴莲泰国金枕榴莲",
|
||||
desc: "心形榴莲 软糯香甜",
|
||||
image: "/static/logo.png",
|
||||
groupPrice: "¥125.9/个",
|
||||
originalPrice: "¥200/个",
|
||||
countdown: "19天2小时10分钟后结束",
|
||||
quantity: 1
|
||||
}
|
||||
],
|
||||
carNum: 5,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toDetail(item) {
|
||||
console.log("🚀 ~ toDetail ~ toDetail:", '跳转......')
|
||||
NavgateTo(`/packages/shop/groupPurchaseDetail/index?item=${JSON.stringify(item)}`)
|
||||
},
|
||||
increaseQuantity(index) {
|
||||
this.goodsList[index].quantity++;
|
||||
this.cartCount++;
|
||||
},
|
||||
decreaseQuantity(index) {
|
||||
if (this.goodsList[index].quantity > 1) {
|
||||
this.goodsList[index].quantity--;
|
||||
this.cartCount--;
|
||||
}
|
||||
},
|
||||
goToCart() {
|
||||
// 跳转到购物车页面的逻辑
|
||||
uni.showToast({
|
||||
title: '跳转到购物车',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
971
packages/shop/groupPurchaseDetail/index.css
Normal file
971
packages/shop/groupPurchaseDetail/index.css
Normal file
@ -0,0 +1,971 @@
|
||||
page {
|
||||
background-color: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 750rpx;
|
||||
height: 243rpx;
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.searchBox_left {
|
||||
box-sizing: border-box;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 750rpx;
|
||||
width: 750rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper .NumDot {
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 27rpx;
|
||||
bottom: 180rpx;
|
||||
}
|
||||
|
||||
.box_15 {
|
||||
position: absolute;
|
||||
left: 0rpx;
|
||||
top: 600rpx;
|
||||
width: 750rpx;
|
||||
height: 150rpx;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gp_detail_top.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.section_2 {
|
||||
width: 221rpx;
|
||||
height: 116rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 10rpx 0 0 40rpx;
|
||||
}
|
||||
|
||||
.text-wrapper_4 {
|
||||
position: relative;
|
||||
width: 221rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.text_30 {
|
||||
width: 184rpx;
|
||||
height: 80rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1.000000);
|
||||
font-size: 60rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 80rpx;
|
||||
margin-left: 37rpx;
|
||||
}
|
||||
|
||||
.text_31 {
|
||||
position: absolute;
|
||||
left: 0rpx;
|
||||
top: 16rpx;
|
||||
width: 40rpx;
|
||||
height: 60rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1.000000);
|
||||
font-size: 40rpx;
|
||||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.text_32 {
|
||||
width: 203rpx;
|
||||
height: 32rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 185, 178, 1.000000);
|
||||
font-size: 28rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin: 4rpx 0 0 14rpx;
|
||||
}
|
||||
|
||||
.text_33 {
|
||||
width: 60rpx;
|
||||
height: 80rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1.000000);
|
||||
font-size: 40rpx;
|
||||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
line-height: 80rpx;
|
||||
margin: 16rpx 0 0 3rpx;
|
||||
}
|
||||
|
||||
.section_3 {
|
||||
width: 225rpx;
|
||||
height: 94rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 22rpx 39rpx 0 162rpx;
|
||||
}
|
||||
|
||||
.text_34 {
|
||||
width: 140rpx;
|
||||
height: 32rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 55, 11, 1.000000);
|
||||
font-size: 28rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin-left: 51rpx;
|
||||
}
|
||||
|
||||
.box_16 {
|
||||
position: relative;
|
||||
width: 225rpx;
|
||||
height: 39rpx;
|
||||
margin-top: 23rpx;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.text_35 {
|
||||
width: 60rpx;
|
||||
height: 32rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 55, 11, 1.000000);
|
||||
font-size: 28rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin-top: 3rpx;
|
||||
}
|
||||
|
||||
.text_36 {
|
||||
width: 28rpx;
|
||||
height: 32rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 55, 11, 1.000000);
|
||||
font-size: 28rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin: 3rpx 0 0 42rpx;
|
||||
}
|
||||
|
||||
.text_37 {
|
||||
width: 28rpx;
|
||||
height: 32rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 55, 11, 1.000000);
|
||||
font-size: 28rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin: 3rpx 0 0 33rpx;
|
||||
}
|
||||
|
||||
.text-wrapper_5 {
|
||||
background-color: rgba(255, 55, 11, 1.000000);
|
||||
border-radius: 10rpx;
|
||||
height: 39rpx;
|
||||
margin-left: -5rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 39rpx;
|
||||
}
|
||||
|
||||
.text_38 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1.000000);
|
||||
font-size: 28rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin: 5rpx 0 0 4rpx;
|
||||
}
|
||||
|
||||
.text-wrapper_6 {
|
||||
background-color: rgba(255, 55, 11, 1.000000);
|
||||
border-radius: 10rpx;
|
||||
height: 39rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 39rpx;
|
||||
position: absolute;
|
||||
left: 68rpx;
|
||||
top: 0rpx;
|
||||
}
|
||||
|
||||
.text_39 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1.000000);
|
||||
font-size: 28rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin: 5rpx 0 0 4rpx;
|
||||
}
|
||||
|
||||
.text-wrapper_7 {
|
||||
background-color: rgba(255, 55, 11, 1.000000);
|
||||
border-radius: 10rpx;
|
||||
height: 39rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 39rpx;
|
||||
position: absolute;
|
||||
left: 127rpx;
|
||||
top: 0rpx;
|
||||
}
|
||||
|
||||
.text_40 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1.000000);
|
||||
font-size: 28rpx;
|
||||
font-family: Arial-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin: 5rpx 0 0 4rpx;
|
||||
}
|
||||
|
||||
.Money {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
/* margin-top: 40rpx; */
|
||||
font-weight: bold;
|
||||
font-size: 80rpx;
|
||||
color: #FF370B;
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
|
||||
.MoneyMark {
|
||||
font-size: 60rpx;
|
||||
padding-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.MoneyUnit {
|
||||
font-size: 40rpx;
|
||||
font-weight: 400;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.oldMoney {
|
||||
font-size: 40rpx;
|
||||
color: #C7C7C7;
|
||||
margin-left: 30rpx;
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.GGBox {
|
||||
margin: 0 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.GG_rigth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.GG_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
/* 促销信息样式 */
|
||||
.promotions-container {
|
||||
padding: 15rpx;
|
||||
background-color: #FFF;
|
||||
border-radius: 10rpx;
|
||||
margin: 15rpx 0;
|
||||
}
|
||||
|
||||
.promotion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.promotion-tag {
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
background-color: #ffe8e5;
|
||||
color: #ff5029;
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 26rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.promotion-content {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.promotion-content1 {
|
||||
width: auto;
|
||||
padding: 5rpx 10rpx;
|
||||
text-align: center;
|
||||
background-color: #ff6749;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.GG_Item {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
background: #F6F7FB;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
white-space: nowrap;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.Tit {
|
||||
font-size: 36rpx;
|
||||
color: #222222;
|
||||
margin: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.Msg {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
margin: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.GoodsMsg {
|
||||
/* font-size: 30rpx; */
|
||||
color: #222222;
|
||||
margin: 0 20rpx;
|
||||
margin-top: 55rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
.Msg_Item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #EBEBEB;
|
||||
;
|
||||
}
|
||||
|
||||
.Msg_ItemTit {
|
||||
width: 120rpx;
|
||||
margin-right: 100rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
margin: 0 20rpx;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.Msg_ItemCon {
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Msg_ItemCon image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.GoosMsg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.GoosMsg image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.Car {
|
||||
width: 750rpx;
|
||||
height: 123rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.car_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.car_left image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.car_right {
|
||||
width: 470rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.cars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.share {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 36rpx;
|
||||
}
|
||||
|
||||
.u-badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -10rpx;
|
||||
}
|
||||
|
||||
.car_right .input {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
.shadow {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.shadowBox1 {
|
||||
height: 250rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.shadowBox1Item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.shadowBox1Item image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.shadowBox2 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.shadowBox_img {
|
||||
width: 600rpx;
|
||||
height: 945rpx;
|
||||
background: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.shadowBox_btn {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
width: 600rpx;
|
||||
height: 90rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
.boxshadow_tit {
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
text-align: center;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.boxshadow_img {
|
||||
width: 450rpx;
|
||||
height: 600rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 auto;
|
||||
width: 556rpx;
|
||||
height: 1rpx;
|
||||
border-bottom: 1rpx dashed #E9E9E9;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.shadowBoxInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 62rpx;
|
||||
margin-top: 11rpx;
|
||||
}
|
||||
|
||||
.shadowboxInfo_left {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
background: #EFEFEF;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 36rpx;
|
||||
}
|
||||
|
||||
.shadowboxInfo_right_1 {
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.shadowboxInfo_right_2 {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #FF370B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.priceInfo {
|
||||
height: 450rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.priceInfo-title {
|
||||
/* font-size: 30rpx; */
|
||||
font-weight: bolder;
|
||||
margin: 15rpx 0 20rpx 0;
|
||||
}
|
||||
|
||||
.priceInfo-content {
|
||||
font-size: 26rpx;
|
||||
color: #9c9c9c;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.priceInfo-content-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.fenge {
|
||||
width: 100%;
|
||||
height: 15rpx;
|
||||
background-color: #f5f7fb;
|
||||
}
|
||||
|
||||
/* 评价部分样式 */
|
||||
.reviews-section {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.reviews-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.reviews-header h3 {
|
||||
/* font-size: 32rpx; */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reviews-list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.review-item {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.review-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-purchase {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.review-content {
|
||||
font-size: 27rpx;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.review-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.review-img {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.review-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
padding-left: 80rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.popup-header-h3 {
|
||||
font-weight: bold;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.popup-header-view {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.temp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.temp1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #959595;
|
||||
margin: 20rpx 0 5rpx 0;
|
||||
}
|
||||
|
||||
.temp_img {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.temp_img1 {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin: 5rpx 5rpx 0 5rpx;
|
||||
}
|
||||
|
||||
.itemSize {
|
||||
width: 30%;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
background: #F6F7FB;
|
||||
border-radius: 40rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
white-space: nowrap;
|
||||
margin: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.itemSize_active {
|
||||
background: #FF370B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.itemSize-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid red;
|
||||
}
|
||||
|
||||
.itemSize_top {
|
||||
display: flex;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.itemSize_info {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.itemSize_name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.itemSize_price {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 10rpx;
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* 已购买区域样式 */
|
||||
.purchase-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.purchase-count {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.view-more {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buy-btn{
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 团购记录弹窗样式 */
|
||||
.purchase-popup {
|
||||
background-color: #fff;
|
||||
padding: 15rpx;
|
||||
}
|
||||
|
||||
.purchase-records {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.record-header {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.record-header-item {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
max-height: 500rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.record-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.record-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.buy-button {
|
||||
width: 180rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
685
packages/shop/groupPurchaseDetail/index.vue
Normal file
685
packages/shop/groupPurchaseDetail/index.vue
Normal file
@ -0,0 +1,685 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<view class="searchBox_left" @click="back">
|
||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper">
|
||||
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="changeIndex">
|
||||
<swiper-item v-for="(item, index) in currentGG.goods_carousel" :key="index">
|
||||
<image :src="picUrl + item"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="NumDot">
|
||||
{{ currentIndex }} /{{ currentGG.goods_carousel.length }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="box_15">
|
||||
<view class="section_2">
|
||||
<view class="text-wrapper_4">
|
||||
<text lines="1" class="text_30">255.99</text>
|
||||
<text lines="1" class="text_31">￥</text>
|
||||
</view>
|
||||
<text lines="1" decode="true" class="text_32">单买价 ￥300/箱</text>
|
||||
</view>
|
||||
<text lines="1" class="text_33">/箱</text>
|
||||
<view class="section_3">
|
||||
<text lines="1" class="text_34">距结束还剩</text>
|
||||
<view class="box_16">
|
||||
<text lines="1" class="text_35">68天</text>
|
||||
<text lines="1" class="text_36">：</text>
|
||||
<text lines="1" class="text_37">：</text>
|
||||
<view class="text-wrapper_5">
|
||||
<text lines="1" class="text_38">59</text>
|
||||
</view>
|
||||
<view class="text-wrapper_6">
|
||||
<text lines="1" class="text_39">24</text>
|
||||
</view>
|
||||
<view class="text-wrapper_7">
|
||||
<text lines="1" class="text_40">59</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="Money">
|
||||
<view class="MoneyMark">￥</view>
|
||||
{{ currentGG.sales_price }}
|
||||
<view class="MoneyUnit">/{{ currentGG.goods_unit }}</view>
|
||||
|
||||
<view class="oldMoney">￥{{ currentGG.market_price }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 规格 -->
|
||||
<!-- @click="changeGG2(item, index)" :class="index == currentGGIndex ? 'active' : ''"> -->
|
||||
<view class="GGBox">
|
||||
<view class="GG_left">
|
||||
<view class="GG_Item" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'active' : ''">
|
||||
{{ item.goods_spec }} / {{ item.goods_unit }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="GG_rigth">
|
||||
共{{ info.commodity_goods_info_list.length }}款<u-icon size="26rpx" name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="Tit">{{ currentGG.goods_name }}</view>
|
||||
<view class="Msg">{{ currentGG.commodity_brief }}</view>
|
||||
|
||||
<view class="fenge"></view>
|
||||
|
||||
<!-- 已购买区域 -->
|
||||
<view>
|
||||
<view class="purchase-area">
|
||||
<view class="purchase-count">6人已购买</view>
|
||||
<view class="view-more" @click="showPurchaseRecords">查看更多 ></view>
|
||||
</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(record, index) in purchaseRecords" :key="index">
|
||||
<view class="record-user">
|
||||
<image :src="record.avatar" class="user-avatar"></image>
|
||||
<view class="user-name">{{ record.username }}</view>
|
||||
</view>
|
||||
<view class="record-amount">
|
||||
7月17日买了一件
|
||||
</view>
|
||||
<view class="record-time">
|
||||
<button class="buy-btn" @click="goSubmit">去下单</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fenge"></view>
|
||||
|
||||
<h3 class="GoodsMsg">商品详情</h3>
|
||||
|
||||
<view class="Msg_Item">
|
||||
<view class="Msg_ItemTit">商品编号</view>
|
||||
<view class="Msg_ItemCon" @click="copys(currentGG.goods_no)">
|
||||
{{ currentGG.goods_no }}
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Msg_Item">
|
||||
<view class="Msg_ItemTit">规格说明</view>
|
||||
<view class="Msg_ItemCon">{{ currentGG.goods_spec }}</view>
|
||||
</view>
|
||||
<view class="Msg_Item">
|
||||
<view class="Msg_ItemTit">售卖单位</view>
|
||||
<view class="Msg_ItemCon">{{ currentGG.goods_unit }}</view>
|
||||
</view>
|
||||
|
||||
<view class="GoosMsg">
|
||||
<image v-for="item in currentGG.goods_detail_pic" :src="picUrl + item" :key="item" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="priceInfo">
|
||||
<h3 class="priceInfo-title">价格说明</h3>
|
||||
<view class="priceInfo-content">
|
||||
<view>
|
||||
<text class="priceInfo-content-title">划线价格：</text>
|
||||
指商品的厂商指导价、正品零售价、市面常见价或该商品曾经展示过的销售价等，并非原价。仅供参考。
|
||||
</view>
|
||||
<view>
|
||||
<text class="priceInfo-content-title">未划线价格：</text>
|
||||
指商品的实时价格，不因表述的差异改变性质，具体成交价格根据商品参加活动，或使用优惠券等发生变化最终以订单结算价格为准。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部购物车 -->
|
||||
<view class="Car">
|
||||
<view class="car_left">
|
||||
<view class="share" @click="share">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
|
||||
mode="widthFix"></image>
|
||||
分享
|
||||
</view>
|
||||
<view class="cars" @click="car">
|
||||
<u-badge numberType="limit" :type="type" max="99" :value="carNum"></u-badge>
|
||||
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png"
|
||||
mode="widthFix"></image>
|
||||
购物车
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="car_right" v-if="
|
||||
!info.commodity_goods_info_list[currentGGIndex].cart_count ||
|
||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count == 0
|
||||
" @click="addCar">
|
||||
加入购物车
|
||||
</view>
|
||||
|
||||
<view class="car_right" v-if="false" @click="addCar">
|
||||
已售罄
|
||||
</view>
|
||||
|
||||
<view class="car_right" v-if="false" @click="addCar">
|
||||
库存不足
|
||||
</view>
|
||||
|
||||
<view class="car_right" v-if="
|
||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0
|
||||
">
|
||||
<u-number-box v-model="info.commodity_goods_info_list[currentGGIndex].cart_count.count
|
||||
" @change="changeCar" min="0">
|
||||
<view slot="minus" class="minus">
|
||||
<u-icon name="minus" size="36" bold></u-icon>
|
||||
</view>
|
||||
<text slot="input" style="width: 200rpx; text-align: center" class="input">
|
||||
{{
|
||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count
|
||||
}}</text>
|
||||
<view slot="plus" class="plus">
|
||||
<u-icon name="plus" color="#FFFFFF" size="36" bold></u-icon>
|
||||
</view>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分享 -->
|
||||
<view class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
|
||||
<view class="shadowBox1">
|
||||
<view class="shadowBox1Item" @click="shareFriend">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||
mode="aspectFill"></image>
|
||||
微信好友
|
||||
</view>
|
||||
<view class="shadowBox1Item" @click="openSave">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
||||
mode="aspectFill"></image>
|
||||
生成海报
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 海报 -->
|
||||
<view class="shadow" @click="changeShadow2" v-if="boxshadow2">
|
||||
<view class="shadowBox2">
|
||||
<view class="shadowBox_img">
|
||||
<view class="boxshadow_tit">今日商品推荐</view>
|
||||
<view class="boxshadow_img">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="shadowBoxInfo">
|
||||
<view class="shadowboxInfo_left">二维码</view>
|
||||
<view class="shadowboxInfo_right">
|
||||
<view class="shadowboxInfo_right_1">正鲜生</view>
|
||||
<view class="shadowboxInfo_right_2">
|
||||
长按识别小程序 <br />
|
||||
数量有限马上抢购
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评价 查看详情 -->
|
||||
<!-- <u-popup :show="show" round="20rpx" mode="bottom" @close="close" @open="open" :z-index="10070">
|
||||
<view class="reviews-section">
|
||||
<view class="popup-header">
|
||||
<h3 class="popup-header-h3">评价</h3>
|
||||
<view class="popup-header-view" @click="close">取消</view>
|
||||
</view>
|
||||
<view class="temp">
|
||||
<view class="temp1">
|
||||
<img class="temp_img" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/pingjia.png" />
|
||||
为你展示真实评价
|
||||
</view>
|
||||
<view class="temp1" @click="showSizePopup">
|
||||
款式
|
||||
<img class="temp_img1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/kuanshi.png" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="reviews-list" v-if="comments.length > 0">
|
||||
<view class="review-item" v-for="(comment, index) in comments" :key="index">
|
||||
<view class="review-user">
|
||||
<image :src="comment.avatar" class="user-avatar"></image>
|
||||
<view class="user-info">
|
||||
<view class="user-name">{{ comment.username }}</view>
|
||||
</view>
|
||||
<view class="review-time">{{ comment.time }}</view>
|
||||
</view>
|
||||
<view class="user-purchase">已购 {{ comment.product }}</view>
|
||||
<view class="review-content">{{ comment.content }}</view>
|
||||
<view class="review-images" v-if="comment.images.length > 0">
|
||||
<image :src="img" class="review-img" v-for="(img, idx) in comment.images" :key="idx"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup> -->
|
||||
|
||||
<!-- 团购记录弹窗 -->
|
||||
<u-popup :show="showPurchase" round="20rpx" mode="bottom" @close="closePurchase" @open="open">
|
||||
<view class="purchase-popup">
|
||||
<view class="popup-header">
|
||||
<h3 class="popup-header-h3">团购记录</h3>
|
||||
<view class="popup-header-view" @click="closePurchase">取消</view>
|
||||
</view>
|
||||
<view class="purchase-records">
|
||||
<view class="record-header">
|
||||
<view class="record-header-item">买家</view>
|
||||
<view class="record-header-item">数量</view>
|
||||
<view class="record-header-item">购买时间</view>
|
||||
</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(record, index) in purchaseRecords" :key="index">
|
||||
<view class="record-user">
|
||||
<image :src="record.avatar" class="user-avatar"></image>
|
||||
<view class="user-name">{{ record.username }}</view>
|
||||
</view>
|
||||
<view class="record-amount">+{{ record.amount }}</view>
|
||||
<view class="record-time">{{ record.time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 选择款式 -->
|
||||
<u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize" @open="open">
|
||||
<view class="popup-header">
|
||||
<h3 class="popup-header-h3">选择款式</h3>
|
||||
<view class="popup-header-view" @click="closeSize">取消</view>
|
||||
</view>
|
||||
<view class="itemSize_top">
|
||||
<image :src="changeImg" class="itemSize-img"></image>
|
||||
<view class="itemSize_info">
|
||||
<view class="itemSize_name">{{ changeName }}</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/袋</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemSize" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'itemSize_active' : ''">
|
||||
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiArr } from "../../../api/shop";
|
||||
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
picUrl,
|
||||
top: "",
|
||||
localHeight: "",
|
||||
carNum: "",
|
||||
prevCarNum: "",
|
||||
currentNum: "0", //当前商品的数量
|
||||
type: "error",
|
||||
boxshadow1: false,
|
||||
boxshadow2: false,
|
||||
id: "",
|
||||
info: "",
|
||||
currentIndex: "1", //当前轮播图
|
||||
|
||||
currentGG: "", //当前选中规格
|
||||
currentGGIndex: "", //当前规格index
|
||||
|
||||
carOrderList: [],
|
||||
// 新增评论数据
|
||||
showReviewPopup: false,
|
||||
comments: [
|
||||
{
|
||||
avatar: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
username: "TP",
|
||||
product: "库尔勒香梨 10kg/箱",
|
||||
content:
|
||||
"踏入这家位于街角的餐厅，木质门框与暖黄灯光交织出温馨氛围，墙面上手绘的食材插画画透着文艺气息，开放式厨房的设计让食客能看见厨师处理食材的全过程，第一印象便给人以干净与安心。",
|
||||
images: ["https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png"],
|
||||
time: "2025-03-01 11:24:20",
|
||||
},
|
||||
{
|
||||
avatar: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
username: "TP",
|
||||
product: "库尔勒香梨 10kg/箱",
|
||||
content:
|
||||
"踏入这家位于街角的餐厅，木质门框与暖黄灯光交织出温馨氛围，墙面上手绘的食材插_draw着文艺气息，开放式厨房的设计让食客能看见厨师处理食材的全过程，第一印象便给人以干净与安心。",
|
||||
images: [
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
],
|
||||
time: "2025-03-01 11:24:20",
|
||||
},
|
||||
],
|
||||
show: false,
|
||||
showSize: false,
|
||||
showPurchase: false,
|
||||
purchaseRecords: [
|
||||
{
|
||||
avatar: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
username: "俏*莲",
|
||||
amount: 1,
|
||||
time: "2024-02-04 22:30:35"
|
||||
},
|
||||
{
|
||||
avatar: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test2.png",
|
||||
username: "高*",
|
||||
amount: 1,
|
||||
time: "2024-02-04 22:30:35"
|
||||
},
|
||||
{
|
||||
avatar: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
|
||||
username: "俏*莲",
|
||||
amount: 1,
|
||||
time: "2024-02-04 22:30:35"
|
||||
},
|
||||
{
|
||||
avatar: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test2.png",
|
||||
username: "高*",
|
||||
amount: 1,
|
||||
time: "2024-02-04 22:30:35"
|
||||
}
|
||||
],
|
||||
changeImg: "",
|
||||
changeName: "",
|
||||
changePrice: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 显示团购记录
|
||||
showPurchaseRecords() {
|
||||
this.showPurchase = true;
|
||||
},
|
||||
|
||||
// 关闭团购记录
|
||||
closePurchase() {
|
||||
this.showPurchase = false;
|
||||
},
|
||||
|
||||
//去下单
|
||||
goSubmit() {
|
||||
NavgateTo('/packages/shop/groupPurchaseSubmit/index')
|
||||
},
|
||||
|
||||
changeIndex(e) {
|
||||
this.currentIndex = e.detail.current + 1;
|
||||
},
|
||||
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
},
|
||||
// 分享微信
|
||||
shareFriend() {
|
||||
this.boxshadow2 = false;
|
||||
return;
|
||||
// uniapp 分享微信好友
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
type: "link",
|
||||
scene: "session",
|
||||
link: "https://uniapp.dcloud.net.cn/",
|
||||
title: "商品名称",
|
||||
imageUrl: "",
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "分享成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
this.boxshadow1 = false;
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("分享失败", err);
|
||||
this.boxshadow1 = false;
|
||||
},
|
||||
});
|
||||
},
|
||||
changeShadow() {
|
||||
this.boxshadow1 = false;
|
||||
},
|
||||
openSave() {
|
||||
this.boxshadow1 = false;
|
||||
this.boxshadow2 = true;
|
||||
},
|
||||
// 保存海报
|
||||
saveImg() {
|
||||
this.boxshadow2 = false;
|
||||
// 微信小程序保存图片
|
||||
uni.downloadFile({
|
||||
url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png",
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("保存失败", err);
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("下载失败", err);
|
||||
},
|
||||
});
|
||||
},
|
||||
changeShadow2() {
|
||||
this.boxshadow2 = false;
|
||||
},
|
||||
|
||||
// 点分享按钮
|
||||
share() {
|
||||
this.boxshadow1 = true;
|
||||
},
|
||||
//商品详情
|
||||
getGoodsInfo() {
|
||||
request(apiArr.getGoodsInfo, "POST", {
|
||||
id: this.id,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
|
||||
// 分割图片
|
||||
res.commodity_goods_info_list.forEach((item) => {
|
||||
item.goods_detail_pic = item.goods_detail_pic.split(",");
|
||||
item.goods_carousel = item.goods_carousel.split(",");
|
||||
item.commodity_pic = item.commodity_pic.split(",");
|
||||
});
|
||||
|
||||
//根据购物车列表 和 当前商品列表 来更新当前商品列表在购物车中的数量
|
||||
if (this.carOrderList) {
|
||||
this.carOrderList.forEach((items) => {
|
||||
res.commodity_goods_info_list.forEach((item) => {
|
||||
if (items.goods_id == item.id) {
|
||||
item.cart_count = { count: 0 };
|
||||
item.cart_count.count = items.count;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
this.info = res;
|
||||
this.currentGG = res.commodity_goods_info_list[0];
|
||||
this.currentGGIndex = 0;
|
||||
|
||||
this.changeImg = this.currentGG.commodity_pic[0]
|
||||
this.changeName = this.currentGG.goods_alias
|
||||
this.changePrice = this.currentGG.sales_price
|
||||
});
|
||||
},
|
||||
|
||||
copys(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 切换规格
|
||||
changeGG(item, index) {
|
||||
console.log("🚀 ~ changeGG ~ item:", item);
|
||||
this.currentGG = item;
|
||||
this.currentGGIndex = index;
|
||||
if (this.currentGG.cart_count) {
|
||||
this.currentNum = this.currentGG.cart_count.count;
|
||||
} else {
|
||||
this.currentGG.cart_count = { count: 0 };
|
||||
}
|
||||
this.changeImg = item.commodity_pic[0]
|
||||
this.changeName = item.goods_alias
|
||||
this.changePrice = item.sales_price
|
||||
},
|
||||
car() {
|
||||
NavgateTo("../shopCar/index");
|
||||
},
|
||||
|
||||
//获取购物车数量
|
||||
getShopCar() {
|
||||
request(apiArr.getCarCount, "POST", {}).then((res) => {
|
||||
this.carNum = res.total;
|
||||
this.prevCarNum = res.total;
|
||||
});
|
||||
},
|
||||
|
||||
getShopCarList() {
|
||||
request(apiArr.getCar, "POST", {}).then((res) => {
|
||||
this.carOrderList = res.commodity_cart_list;
|
||||
});
|
||||
},
|
||||
|
||||
addCar() {
|
||||
let that = this;
|
||||
//如果没有当前商品 直接添加一个
|
||||
let goods_id_and_count = [];
|
||||
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = {
|
||||
count: 1,
|
||||
};
|
||||
this.info.commodity_goods_info_list.forEach((item) => {
|
||||
console.log(item.cart_count);
|
||||
goods_id_and_count.push({
|
||||
goods_id: item.id,
|
||||
count: item.cart_count ? item.cart_count.count : 0,
|
||||
});
|
||||
});
|
||||
|
||||
console.log(goods_id_and_count);
|
||||
//因为是当前商品没有 调用update就是增加商品。增加商品之后再获取购物车数量
|
||||
request(apiArr.updateCar, "POST", {
|
||||
goods_id_and_count,
|
||||
}).then((res) => {
|
||||
that.getShopCar();
|
||||
that.getShopCarList();
|
||||
});
|
||||
},
|
||||
|
||||
// 购物车更改
|
||||
changeCar(newValue) {
|
||||
// // 修改当前商品在购物车中的数量
|
||||
// this.info.commodity_goods_info_list[this.currentGGIndex].cart_count.count = newValue.value
|
||||
// // 修改购物车列表中的数量
|
||||
// this.carOrderList.forEach(item => {
|
||||
// if (item.commodity_goods_info.id == this.info.commodity_goods_info_list[this.currentGGIndex].id) {
|
||||
// item.count = newValue.value
|
||||
// }
|
||||
// })
|
||||
// // 计算购物车数量
|
||||
// let carNum = 0
|
||||
// this.carOrderList.forEach(item => {
|
||||
// carNum += item.count
|
||||
// })
|
||||
// this.carNum = carNum
|
||||
//商品数量变化
|
||||
const params = {
|
||||
user_id: uni.getStorageSync("userId"),
|
||||
goods_id_and_count: [
|
||||
{
|
||||
goods_id:
|
||||
this.info.commodity_goods_info_list[this.currentGGIndex].id,
|
||||
count: newValue.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
request(apiArr.updateCar, "POST", params).then((res) => {
|
||||
console.log(res);
|
||||
this.getShopCarList();
|
||||
uni.showToast({
|
||||
title: "操作成功！",
|
||||
success() { },
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
showPopup() {
|
||||
this.show = true;
|
||||
},
|
||||
|
||||
showSizePopup() {
|
||||
this.showSize = true;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
|
||||
closeSize() {
|
||||
this.showSize = false;
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||
console.log("🚀 ~ onLoad ~ itemObj:", itemObj)
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
|
||||
this.id = itemObj.id;
|
||||
},
|
||||
onReachBottom() { },
|
||||
onShow() {
|
||||
this.getShopCarList();
|
||||
this.getGoodsInfo();
|
||||
this.getShopCar();
|
||||
},
|
||||
|
||||
//离开页面的时候直接更新购物车数量(目前接口是 传入商品id 数量。如果有当前商品就更新数量。如果没有就增加商品。如果删除某个商品 count 为0 就删除)
|
||||
onHide() {
|
||||
let goods_id_and_count = [];
|
||||
this.info.commodity_goods_info_list.forEach((item) => {
|
||||
goods_id_and_count.push({
|
||||
goods_id: item.id,
|
||||
count: item.cart_count ? item.cart_count.count : 0,
|
||||
});
|
||||
});
|
||||
|
||||
request(apiArr.updateCar, "POST", {
|
||||
goods_id_and_count,
|
||||
}).then((res) => {
|
||||
console.log("Cart updated on hide");
|
||||
});
|
||||
return;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
476
packages/shop/groupPurchaseSubmit/index.css
Normal file
476
packages/shop/groupPurchaseSubmit/index.css
Normal file
@ -0,0 +1,476 @@
|
||||
page {
|
||||
background-color: #f5f7fb;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 顶部切换栏 */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
width: 180rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
border-radius: 15rpx;
|
||||
margin: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background-color: #ff370b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.divider {
|
||||
height: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 公共标题样式 */
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
/* 收货地址区域 */
|
||||
.info-section {
|
||||
background: repeating-linear-gradient(to right,
|
||||
#fe5355,
|
||||
#fe5355 20px,
|
||||
#549aff 20px,
|
||||
#549aff 40px);
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.address-section {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.address-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.address-name-phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.address-arrow {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 商品信息区域 */
|
||||
.goods-section {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
border-radius: 10rpx;
|
||||
padding: 15rpx;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.goods-image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.price-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.group-price {
|
||||
font-size: 28rpx;
|
||||
color: #e63946;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 4rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.group-price1 {
|
||||
width: 100rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
color: #ffffff;
|
||||
background-color: #fc5d15;
|
||||
border-radius: 15rpx 0 0 15rpx;
|
||||
}
|
||||
|
||||
.group-price2 {
|
||||
width: auto;
|
||||
padding: 10rpx 15rpx;
|
||||
background: linear-gradient(to bottom, #fef6d6, #fee8a9);
|
||||
border-radius: 0 15rpx 15rpx 0;
|
||||
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
width: 250rpx;
|
||||
font-size: 22rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #fe2f01;
|
||||
position: absolute;
|
||||
top: 150rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.decrease-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #f5f5f5;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 50%;
|
||||
line-height: 33rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.increase-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #ff502a;
|
||||
border-radius: 50%;
|
||||
line-height: 33rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
margin: 0 15rpx;
|
||||
font-size: 24rpx;
|
||||
width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 运费和总金额区域 */
|
||||
.fee-section,
|
||||
.total-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.fee-name,
|
||||
.total-name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.fee-value,
|
||||
.total-value {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-weight: bold;
|
||||
color: #FF7658;
|
||||
}
|
||||
|
||||
/* 支付方式区域 */
|
||||
.payment-section {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.payment-item {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.payment-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.payment-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.payment-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.payment-name {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.payment-desc {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.payment-select {
|
||||
color: #FF7658;
|
||||
}
|
||||
|
||||
/* 立即支付按钮 */
|
||||
.pay-button {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 50rpx;
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
left: 15%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
/* 自提样式 */
|
||||
.pickup-info {
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pickup-address {
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.pickup-time {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.shadow {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.shadowBox2 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.shadowBox_img {
|
||||
width: 600rpx;
|
||||
height: 900rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.boxshadow_tit {
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
padding-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.boxshadow_tit_img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.boxshadow_img {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.boxbottom {
|
||||
width: 100%;
|
||||
margin-top: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line1 {
|
||||
width: 80rpx;
|
||||
height: 1rpx;
|
||||
margin: 0 10rpx;
|
||||
background: linear-gradient(to left, #333, #fff);
|
||||
}
|
||||
|
||||
.line2 {
|
||||
width: 80rpx;
|
||||
height: 1rpx;
|
||||
margin: 0 10rpx;
|
||||
background: linear-gradient(to right, #333, #fff);
|
||||
}
|
||||
|
||||
.shadowBox1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.shadowBox1Item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.shadowBox1Item image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.shadowBoxInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 62rpx;
|
||||
margin-top: 11rpx;
|
||||
}
|
||||
|
||||
.shadowboxInfo_left {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
background: #EFEFEF;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 36rpx;
|
||||
}
|
||||
|
||||
.shadowboxInfo_right_1 {
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.shadowboxInfo_right_2 {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.shadowBox_btn {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
width: 600rpx;
|
||||
height: 90rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
256
packages/shop/groupPurchaseSubmit/index.vue
Normal file
256
packages/shop/groupPurchaseSubmit/index.vue
Normal file
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 顶部切换栏 -->
|
||||
<view class="tab-bar">
|
||||
<view :class="{ active: activeTab === 'delivery' }" class="tab-item" @click="switchTab('delivery')">配送
|
||||
</view>
|
||||
<view :class="{ active: activeTab === 'pickup' }" class="tab-item" @click="switchTab('pickup')">自提</view>
|
||||
|
||||
</view>
|
||||
<!-- 分隔线 -->
|
||||
<view class="divider"></view>
|
||||
<!-- 配送/自提信息 -->
|
||||
<view class="info-section">
|
||||
<view v-if="activeTab === 'delivery'" class="address-section">
|
||||
<view class="section-title">收货地址</view>
|
||||
<view class="address-info" @click="editAddress">
|
||||
<view class="address-main">
|
||||
<view class="address-name-phone">
|
||||
<text class="name">李佳</text>
|
||||
<text class="phone">15901518415</text>
|
||||
</view>
|
||||
<view class="address-detail">北京北京市朝阳区珠江绿洲文化广场</view>
|
||||
</view>
|
||||
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="address-section">
|
||||
<view class="section-title">自提点</view>
|
||||
<view class="address-info" @click="editAddress">
|
||||
<view class="address-main">
|
||||
<view class="address-name-phone">
|
||||
<text class="name">李佳</text>
|
||||
<text class="phone">15901518415</text>
|
||||
</view>
|
||||
<view class="address-detail">北京北京市朝阳区珠江绿洲文化广场</view>
|
||||
</view>
|
||||
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分隔线 -->
|
||||
<view class="divider"></view>
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-item">
|
||||
<view class="goods-image">
|
||||
<image src="/static/logo.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">泰国金枕榴莲泰国金枕榴莲</view>
|
||||
<view class="goods-desc"> 心形榴莲 软糯香甜</view>
|
||||
<view class="price-container">
|
||||
<view class="group-price">
|
||||
<view class="group-price1">团购价</view>
|
||||
<view class="group-price2">￥125.9</view>
|
||||
</view>
|
||||
<view class="quantity-control">
|
||||
<view class="decrease-btn" @tap.stop="decreaseQuantity(index)">-</view>
|
||||
<view class="quantity">{{ quantity }}</view>
|
||||
<view class="increase-btn" @tap.stop="increaseQuantity(index)">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 运费 -->
|
||||
<view class="fee-section">
|
||||
<view class="fee-name">运费</view>
|
||||
<view class="fee-value">￥10</view>
|
||||
</view>
|
||||
<!-- 总金额 -->
|
||||
<view class="total-section">
|
||||
<view class="total-name">总金额</view>
|
||||
<view class="total-value">￥200</view>
|
||||
</view>
|
||||
<!-- 支付方式 -->
|
||||
<view class="payment-section">
|
||||
<view class="payment-item" @click="selectPayment('wechat')">
|
||||
<view class="payment-icon">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||
mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="payment-content">
|
||||
<view class="payment-name">微信支付</view>
|
||||
<view class="payment-desc"><text
|
||||
style="color: #f03d0e;margin-right: 15rpx;">可用优惠券</text>单笔支付限额:¥10000.00</view>
|
||||
</view>
|
||||
<view class="payment-select" v-if="selectedPayment === 'wechat'">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
||||
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||
</view>
|
||||
<view class="payment-select" v-else>
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
||||
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 立即支付按钮 -->
|
||||
<view class="pay-button" @click="submitPayment">立即支付 ¥4500.00</view>
|
||||
|
||||
<!-- 弹窗 - 支付成功 -->
|
||||
<view class="shadow" @click="changeShadow" v-if="boxshadow1">
|
||||
<view class="shadowBox2">
|
||||
<view class="shadowBox_img">
|
||||
<view class="boxshadow_tit">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_√.png"
|
||||
class="boxshadow_tit_img">
|
||||
</image>
|
||||
已支付成功
|
||||
</view>
|
||||
<view class="boxshadow_img">
|
||||
<view style="margin-bottom: 15rpx;">0230 7559 1358</view>
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="boxbottom">
|
||||
<view class="line1"></view>
|
||||
赶快邀请好友来下单吧
|
||||
<view class="line2"></view>
|
||||
</view>
|
||||
<view @click.stop="changeShadow">
|
||||
<view class="shadowBox1">
|
||||
<view class="shadowBox1Item" @click="shareFriend">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||
mode="aspectFill"></image>
|
||||
微信好友
|
||||
</view>
|
||||
<view class="shadowBox1Item" @click="shareFriend">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||
mode="aspectFill"></image>
|
||||
小程序链接
|
||||
</view>
|
||||
<view class="shadowBox1Item" @click="openSave">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
||||
mode="aspectFill"></image>
|
||||
二维码海报
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 海报 -->
|
||||
<view class="shadow" @click="changeShadow2" v-if="boxshadow2">
|
||||
<view class="shadowBox2">
|
||||
<view class="shadowBox_img">
|
||||
<view class="boxshadow_tit">今日商品推荐</view>
|
||||
<view class="boxshadow_img">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="shadowBoxInfo">
|
||||
<view class="shadowboxInfo_left">二维码</view>
|
||||
<view class="shadowboxInfo_right">
|
||||
<view class="shadowboxInfo_right_1">正鲜生</view>
|
||||
<view class="shadowboxInfo_right_2">
|
||||
长按识别小程序 <br />
|
||||
数量有限马上抢购
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'delivery', // 默认选中配送
|
||||
quantity: 1, // 商品数量
|
||||
selectedPayment: 'wechat',
|
||||
boxshadow1: false,
|
||||
boxshadow2: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
switchTab(tab) {
|
||||
this.activeTab = tab;
|
||||
},
|
||||
editAddress() {
|
||||
if (this.activeTab === 'delivery') {
|
||||
NavgateTo('../addAddress/index');
|
||||
} else {
|
||||
NavgateTo('../ztLocation/index');
|
||||
}
|
||||
},
|
||||
decreaseQuantity() {
|
||||
if (this.quantity > 1) {
|
||||
this.quantity--;
|
||||
}
|
||||
},
|
||||
increaseQuantity() {
|
||||
this.quantity++;
|
||||
},
|
||||
selectPayment(payment) {
|
||||
console.log("🚀 ~ selectPayment ~ payment:", payment)
|
||||
this.selectedPayment = payment;
|
||||
},
|
||||
submitPayment() {
|
||||
console.log('提交支付，金额：￥4500.00');
|
||||
this.boxshadow1 = true;
|
||||
},
|
||||
openSave() {
|
||||
this.boxshadow1 = false;
|
||||
this.boxshadow2 = true;
|
||||
},
|
||||
changeShadow() {
|
||||
this.boxshadow1 = false;
|
||||
},
|
||||
changeShadow2() {
|
||||
this.boxshadow2 = false;
|
||||
},
|
||||
// 保存海报
|
||||
saveImg() {
|
||||
this.boxshadow2 = false;
|
||||
// 微信小程序保存图片
|
||||
uni.downloadFile({
|
||||
url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png",
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("保存失败", err);
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("下载失败", err);
|
||||
},
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<view class="container">
|
||||
<!-- 顶部展开后的阴影 -->
|
||||
<div class="boxshadow" v-if="topShow"></div>
|
||||
<div class="header" :class="topShow ? 'op0' : ''">
|
||||
<div
|
||||
<view class="boxshadow" v-if="topShow"></view>
|
||||
<view class="header" :class="topShow ? 'op0' : ''">
|
||||
<view
|
||||
class="searchBox"
|
||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||
>
|
||||
<div class="searchBox_left" @click="back">
|
||||
<view class="searchBox_left" @click="back">
|
||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||
</div>
|
||||
<div class="searchBox_ipt" @click="searchPage">
|
||||
</view>
|
||||
<view class="searchBox_ipt" @click="searchPage">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<input disabled type="text" placeholder="输入商品名称" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="slide_con">
|
||||
<div
|
||||
</view>
|
||||
</view>
|
||||
<view class="slide">
|
||||
<view class="slide_con">
|
||||
<view
|
||||
v-for="(item, index) in CateList"
|
||||
:key="index"
|
||||
class="slide_conBox"
|
||||
@ -33,40 +33,40 @@
|
||||
></image>
|
||||
<text>{{ item.category_name }}</text>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="open" @click="topOpen" v-if="!topShow">
|
||||
<view class="open" @click="topOpen" v-if="!topShow">
|
||||
展 开
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 整体展开的顶部 -->
|
||||
<div class="header header2" v-if="topShow">
|
||||
<div
|
||||
<view class="header header2" v-if="topShow">
|
||||
<view
|
||||
class="searchBox"
|
||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||
>
|
||||
<div class="searchBox_left">
|
||||
<view class="searchBox_left">
|
||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||
</div>
|
||||
<div class="searchBox_ipt">
|
||||
</view>
|
||||
<view class="searchBox_ipt">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<input type="text" placeholder="输入商品名称" />
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="slide">
|
||||
<div class="slide_con">
|
||||
<div
|
||||
<view class="slide">
|
||||
<view class="slide_con">
|
||||
<view
|
||||
v-for="(item, index) in CateList"
|
||||
:key="index"
|
||||
class="slide_conBox"
|
||||
@ -78,18 +78,18 @@
|
||||
></image>
|
||||
<text>{{ item.category_name }}</text>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="hides" @click="topOpen">
|
||||
<view class="hides" @click="topOpen">
|
||||
收起 <u-icon name="arrow-up"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="Con">
|
||||
<div class="Con_left">
|
||||
<div
|
||||
<view class="Con">
|
||||
<view class="Con_left">
|
||||
<view
|
||||
class="CateItem"
|
||||
:class="item.id === currentLeftCateId ? 'CateItem_active' : ''"
|
||||
v-for="item in leftCateList"
|
||||
@ -104,12 +104,12 @@
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
|
||||
mode="aspectFill"></image> -->
|
||||
{{ item.category_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="Con_right">
|
||||
<div class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
|
||||
<div class="CateList" ref="cateListRef">
|
||||
<div
|
||||
</view>
|
||||
</view>
|
||||
<view class="Con_right">
|
||||
<view class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
|
||||
<view class="CateList" ref="cateListRef">
|
||||
<view
|
||||
class="CateList_Item"
|
||||
v-for="(item, index) in tagList"
|
||||
:key="item.id"
|
||||
@ -117,16 +117,16 @@
|
||||
@click="checkItem(index)"
|
||||
>
|
||||
{{ item.tag_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="more" @click="changeCateListShow">
|
||||
</view>
|
||||
</view>
|
||||
<view class="more" @click="changeCateListShow">
|
||||
<u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
|
||||
<u-icon v-if="cateListShow" name="arrow-up"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右下展开的内容 -->
|
||||
<div class="activeCateList" v-if="cateListShow">
|
||||
<div
|
||||
<view class="activeCateList" v-if="cateListShow">
|
||||
<view
|
||||
class="CateList_Item"
|
||||
v-for="(item, index) in tagList"
|
||||
:key="index"
|
||||
@ -134,22 +134,22 @@
|
||||
@click="checkItem(index)"
|
||||
>
|
||||
{{ item.tag_name }}
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右下阴影 -->
|
||||
<div class="boxshadow2" v-if="cateListShow"></div>
|
||||
<view class="boxshadow2" v-if="cateListShow"></view>
|
||||
|
||||
<div class="CateInfo" v-for="item in tagList" :key="item.id">
|
||||
<div class="CateInfo_tit">
|
||||
<view class="CateInfo" v-for="item in tagList" :key="item.id">
|
||||
<view class="CateInfo_tit">
|
||||
{{ item.tag_name }}
|
||||
</div>
|
||||
<div
|
||||
</view>
|
||||
<view
|
||||
class="CateInfo_Item"
|
||||
v-for="items in item.commodity_info_list"
|
||||
:key="items.id"
|
||||
>
|
||||
<div class="CateInfo_Item_Box">
|
||||
<div class="CateInfo_Item_left" @click="goods(items)">
|
||||
<view class="CateInfo_Item_Box">
|
||||
<view class="CateInfo_Item_left" @click="goods(items)">
|
||||
<view
|
||||
class="tag tag-img"
|
||||
v-if="
|
||||
@ -162,9 +162,9 @@
|
||||
:src="picUrl + items.commodity_pic"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</div>
|
||||
<div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
|
||||
<div class="CateInfo_Item_right_Tit" @click="goods(items)">
|
||||
</view>
|
||||
<view class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
|
||||
<view class="CateInfo_Item_right_Tit" @click="goods(items)">
|
||||
<view
|
||||
class="tag tag-text"
|
||||
v-if="
|
||||
@ -174,15 +174,15 @@
|
||||
>当日达</view
|
||||
>
|
||||
{{ items.commodity_name }}
|
||||
</div>
|
||||
<div class="CateInfo_Item_right_subtit" @click="goods(items)">
|
||||
</view>
|
||||
<view class="CateInfo_Item_right_subtit" @click="goods(items)">
|
||||
{{ items.commodity_intro }}
|
||||
</div>
|
||||
<div class="CateInfo_Item_Money">
|
||||
<div class="CateInfo_Item_Money_left">
|
||||
</view>
|
||||
<view class="CateInfo_Item_Money">
|
||||
<view class="CateInfo_Item_Money_left">
|
||||
{{ getPriceRange(items.commodity_goods_info_list) }}
|
||||
</div>
|
||||
<div
|
||||
</view>
|
||||
<view
|
||||
class="CateInfo_Item_Money_right"
|
||||
v-if="!(items.commodity_goods_info_list.length > 1)"
|
||||
>
|
||||
@ -208,10 +208,10 @@
|
||||
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
|
||||
</view>
|
||||
</u-number-box>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div
|
||||
<view
|
||||
class="gg"
|
||||
@click="chooseGG(items)"
|
||||
v-if="
|
||||
@ -224,9 +224,9 @@
|
||||
size="26rpx"
|
||||
color="#FF370B"
|
||||
></u-icon>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<div
|
||||
<view
|
||||
class="gg"
|
||||
@click="chooseGG(items)"
|
||||
v-if="
|
||||
@ -235,36 +235,36 @@
|
||||
>
|
||||
收起
|
||||
<u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="GGList" v-if="items.isShow">
|
||||
<div
|
||||
<view class="GGList" v-if="items.isShow">
|
||||
<view
|
||||
class="GGItem"
|
||||
v-for="ite in items.commodity_goods_info_list"
|
||||
:key="ite.id"
|
||||
@click="goods(items)"
|
||||
>
|
||||
<div class="GGItem_Image">
|
||||
<view class="GGItem_Image">
|
||||
<view class="tag tag-img" v-if="ite.is_same_day">当日达</view>
|
||||
<image
|
||||
:src="picUrl + ite.commodity_pic"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</div>
|
||||
<div class="GGItem_Con">
|
||||
<div class="GGItem_Con_Tit">
|
||||
</view>
|
||||
<view class="GGItem_Con">
|
||||
<view class="GGItem_Con_Tit">
|
||||
<view class="tag tag-text" v-if="ite.is_same_day"
|
||||
>当日达</view
|
||||
>
|
||||
{{ ite.goods_name }}
|
||||
</div>
|
||||
<div class="GGItem_Con_Msg">
|
||||
<div class="GGItem_Con_Msg_left">
|
||||
</view>
|
||||
<view class="GGItem_Con_Msg">
|
||||
<view class="GGItem_Con_Msg_left">
|
||||
<span>￥</span>{{ ite.sales_price }}
|
||||
</div>
|
||||
<div class="GGItem_Con_Msg_right">
|
||||
</view>
|
||||
<view class="GGItem_Con_Msg_right">
|
||||
<u-number-box
|
||||
v-model="ite.quantity"
|
||||
:min="0"
|
||||
@ -287,27 +287,27 @@
|
||||
></u-icon>
|
||||
</view>
|
||||
</u-number-box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<!-- <div class="btn">
|
||||
<!-- <view class="btn">
|
||||
查看全部商品
|
||||
<div class="cir">
|
||||
<view class="cir">
|
||||
<u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <nav-footer :current="3" /> -->
|
||||
|
||||
<div class="shop_car" @click="shopCar">
|
||||
<view class="shop_car" @click="shopCar">
|
||||
<u-badge
|
||||
numberType="limit"
|
||||
type="error"
|
||||
@ -318,8 +318,8 @@
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
|
||||
></image>
|
||||
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> -->
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
55
packages/shop/ztLocation/index.css
Normal file
55
packages/shop/ztLocation/index.css
Normal file
@ -0,0 +1,55 @@
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.fenge{
|
||||
height: 20rpx;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.location-container {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.location-list {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.location-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.location-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.location-address {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
/* 选中状态的样式 */
|
||||
.location-item .location-address {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.location-item .location-address.active {
|
||||
color: #fd631a;
|
||||
}
|
||||
|
||||
.location-select {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
63
packages/shop/ztLocation/index.vue
Normal file
63
packages/shop/ztLocation/index.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<view class="location-container">
|
||||
<view class="fenge"></view>
|
||||
<view class="location-list">
|
||||
<!-- 地址项 -->
|
||||
<view class="location-item" v-for="(item, index) in locationList" :key="index" @click="selectLocation(item)">
|
||||
<view class="location-info">
|
||||
<text :class="['location-address', { 'active': item.checked }]">{{ item.address }}</text>
|
||||
</view>
|
||||
<view class="location-select">
|
||||
<image
|
||||
v-if="!item.checked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
||||
mode="aspectFit"
|
||||
style="width: 40rpx; height: 40rpx;"
|
||||
></image>
|
||||
<image
|
||||
v-if="item.checked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
||||
mode="aspectFit"
|
||||
style="width: 40rpx; height: 40rpx;"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
locationList: [
|
||||
{
|
||||
id: 1,
|
||||
address: '上海市上海市浦东新区上海市浦东新区杨高中路2128号正大生活馆F2层',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
address: '上海市上海市浦东新区上海市浦东新区杨高中路2128号正大生活馆F2层',
|
||||
checked: false
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectLocation(item) {
|
||||
// 取消所有选中状态
|
||||
this.locationList.forEach(loc => {
|
||||
loc.checked = false;
|
||||
});
|
||||
// 设置当前选中项
|
||||
item.checked = true;
|
||||
console.log("🚀 ~ selectLocation ~ item.address:", item.address)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
@ -41,25 +41,35 @@ image {
|
||||
}
|
||||
|
||||
|
||||
.content{
|
||||
margin-top: 30rpx;
|
||||
height: 1100rpx;
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
.content {
|
||||
margin-top: 30rpx;
|
||||
height: 1100rpx;
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.iconStyle{
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
.iconStyle {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.nav_icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.grid-item {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 25rpx;
|
||||
background-color: #f6f6f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.nav_icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.community {
|
||||
@ -351,7 +361,7 @@ image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.boxshadowCon_Text{
|
||||
.boxshadowCon_Text {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
@ -361,7 +371,7 @@ image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.boxshadowCon_Text2{
|
||||
.boxshadowCon_Text2 {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
|
||||
@ -1,134 +1,146 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- <div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<div class="searchBox_add">
|
||||
<view class="container">
|
||||
<!-- <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<view class="searchBox_add">
|
||||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||
</div>
|
||||
</div> -->
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<div class="community">
|
||||
<div class="community_left">
|
||||
<view class="community">
|
||||
<view class="community_left">
|
||||
<image mode="aspectFill" src="../../../static/logo.png" alt="" />
|
||||
</div>
|
||||
<div class="community_right" @click="changeShow">
|
||||
<div class="community_right_text">
|
||||
<div class="community_right_text1">七个2锁城</div>
|
||||
<div class="community_right_text2">衡水市上海公馆6A</div>
|
||||
</div>
|
||||
<div class="community_right_more">
|
||||
</view>
|
||||
<view class="community_right" @click="changeShow">
|
||||
<view class="community_right_text">
|
||||
<view class="community_right_text1">七个2锁城</view>
|
||||
<view class="community_right_text2">衡水市上海公馆6A</view>
|
||||
</view>
|
||||
<view class="community_right_more">
|
||||
<u-icon bold color="#999999" size="30" name="arrow-right" @click="back"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="content">
|
||||
<view class="content">
|
||||
<view class="iconStyle">
|
||||
<u-grid col="6" :border="false" @click="click">
|
||||
<u-grid-item v-for="(item, index) in baseList" :key="index">
|
||||
<image class="nav_icon" :src="item.image" mode=""></image>
|
||||
<text class="grid-text">{{item.name}}</text>
|
||||
<u-grid col="6" :border="false">
|
||||
<u-grid-item v-for="(item, index) in baseList" :key="index" @click="click(item)">
|
||||
<view class="grid-item">
|
||||
<image class="nav_icon" :src="item.image" mode=""></image>
|
||||
</view>
|
||||
<text class="grid-text">{{ item.name }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
|
||||
<div class="boxshadow" v-if="show" @click="changeShow">
|
||||
<div class="boxshadowCon">
|
||||
<div class="boxshadowCon_Tit">
|
||||
<view class="boxshadow" v-if="show" @click="changeShow">
|
||||
<view class="boxshadowCon">
|
||||
<view class="boxshadowCon_Tit">
|
||||
请选择店铺
|
||||
</br>
|
||||
<br />
|
||||
<view class="boxshadowCon_Text">从以下列表中选择您的管理权限的店铺</view>
|
||||
<div class="cancel">确定</div>
|
||||
</div>
|
||||
<div class="lines"></div>
|
||||
<div class="communityList">
|
||||
<div class="boxshadowCon_Text2">您有n个店铺的管理权限</div>
|
||||
<div style="width: 100%;height: 200rpx;">
|
||||
<div class="communityItem" v-for="item in 8">
|
||||
<div class="community_left">
|
||||
<view class="cancel">确定</view>
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="communityList">
|
||||
<view class="boxshadowCon_Text2">您有n个店铺的管理权限</view>
|
||||
<view style="width: 100%;height: 200rpx;">
|
||||
<view class="communityItem" v-for="(item, index) in 8" :key="index">
|
||||
<view class="community_left">
|
||||
<image mode="aspectFill" src="../../../static/logo.png" alt="" />
|
||||
</div>
|
||||
<div class="community_right" @click="changeShow2">
|
||||
<div class="community_right_text">
|
||||
<div class="community_right_text1">七个2锁城</div>
|
||||
<div class="community_right_text2">衡水市上海公馆6A</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="communityItem_radio">
|
||||
</view>
|
||||
<view class="community_right" @click="changeShow2">
|
||||
<view class="community_right_text">
|
||||
<view class="community_right_text1">七个2锁城</view>
|
||||
<view class="community_right_text2">衡水市上海公馆6A</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="communityItem_radio">
|
||||
<radio></radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
request,
|
||||
picUrl,
|
||||
uniqueByField,
|
||||
menuButtonInfo,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
import {
|
||||
apiArr
|
||||
} from '../../../api/community';
|
||||
import {
|
||||
request,
|
||||
picUrl,
|
||||
uniqueByField,
|
||||
menuButtonInfo,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
import {
|
||||
apiArr
|
||||
} from '../../../api/community';
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: "",
|
||||
active: 1,
|
||||
show: false,
|
||||
show2: false,
|
||||
baseList: [{
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: "",
|
||||
active: 1,
|
||||
show: false,
|
||||
show2: false,
|
||||
baseList: [
|
||||
{
|
||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1568.png",
|
||||
name: "订单",
|
||||
url: "",
|
||||
}],
|
||||
}, {
|
||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gp_cancelAfterVerification.png",
|
||||
name: "到店核销",
|
||||
url: "",
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.active = index;
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
changeShow() {
|
||||
this.show = !this.show
|
||||
},
|
||||
changeShow2() {
|
||||
this.show2 = !this.show
|
||||
},
|
||||
click(item) {
|
||||
console.log("🚀 ~ click ~ item:", item)
|
||||
if(item.name === '到店核销'){
|
||||
NavgateTo('/packages/storeManagement/orderVerification/index')
|
||||
}else{
|
||||
NavgateTo('/packages/storeManagement/order/index')
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.active = index;
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
changeShow() {
|
||||
this.show = !this.show
|
||||
},
|
||||
changeShow2() {
|
||||
this.show2 = !this.show
|
||||
},
|
||||
click() {
|
||||
console.log('点击跳转订单页面')
|
||||
NavgateTo( '/packages/storeManagement/order/index')
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -44,7 +44,7 @@
|
||||
<view class="price">￥64.1</view>
|
||||
<view class="desc">确认退款后款项将自动原路返回消费者</view>
|
||||
<view class="remark">退款备注</view>
|
||||
<input type="text" :value="desc"placeholder="请输入备注内容" @input="headerInputClick" />
|
||||
<input type="text" :value="desc" placeholder="请输入备注内容" @input="headerInputClick" />
|
||||
</view>
|
||||
<view class="btn" @click="headerSubmitClick">确定</view>
|
||||
|
||||
|
||||
92
packages/storeManagement/orderVerification/index.css
Normal file
92
packages/storeManagement/orderVerification/index.css
Normal file
@ -0,0 +1,92 @@
|
||||
.verification-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 100%;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.verification-input {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border-bottom: 1rpx solid #ddd;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 100%;
|
||||
height: 98rpx;
|
||||
line-height: 98rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #FF5A34 0%, #FF370B 100%);
|
||||
border-radius: 49rpx;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 100rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.scan-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scan-icon {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #f8f8f8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.barcode-icon {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.scan-red-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #FF370B;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scan-red-icon::before {
|
||||
content: '';
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.scan-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
76
packages/storeManagement/orderVerification/index.vue
Normal file
76
packages/storeManagement/orderVerification/index.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<view class="verification-container">
|
||||
<view class="input-container">
|
||||
<input class="verification-input" type="text" v-model="verificationCode" placeholder="请输入核销码" />
|
||||
</view>
|
||||
|
||||
<button class="verify-btn" @click="verifyOrder">立即核销</button>
|
||||
|
||||
<view class="scan-container" @click="handleScan">
|
||||
<view class="scan-icon">
|
||||
<image class="barcode-icon"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gp_cancelAfterVerification.png"
|
||||
mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="scan-text">扫码核销</text>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
verificationCode: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
verifyOrder() {
|
||||
if (this.verificationCode.trim()) {
|
||||
console.log("🚀 ~ verifyOrder ~ this.verificationCode:", this.verificationCode)
|
||||
this.$refs.uToast.show({
|
||||
title: '核销成功',
|
||||
type: 'success',
|
||||
message: "订单核销成功",
|
||||
duration: 2000
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('请输入核销码');
|
||||
}
|
||||
},
|
||||
// 新增扫码核销处理方法
|
||||
handleScan() {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
this.$refs.uToast.show({
|
||||
title: '扫码成功',
|
||||
type: 'success',
|
||||
// icon: false,
|
||||
message: "扫码成功",
|
||||
duration: 2000
|
||||
})
|
||||
console.log('扫码结果:', res.result);
|
||||
this.verificationCode = res.result;
|
||||
},
|
||||
fail: (err) => {
|
||||
this.$refs.uToast.show({
|
||||
title: '扫码失败',
|
||||
type: 'error',
|
||||
message: "扫码失败 请重试",
|
||||
duration: 2000
|
||||
})
|
||||
console.error('扫码失败:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<view class="container">
|
||||
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<view class="searchBox_add" @click="addCommunity">
|
||||
<image class="top-image" src="http://localhost:8080/workOrder_community.png" mode="aspectFill"></image>
|
||||
<image class="top-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/workOrder_community.png" mode="aspectFill"></image>
|
||||
<view class="emptyCommunity">
|
||||
{{ communityVal }}
|
||||
</view>
|
||||
@ -10,7 +10,7 @@
|
||||
</view>
|
||||
<!-- 背景图片区域 -->
|
||||
<view class="bg-image-container">
|
||||
<image class="bg-image" src="http://localhost:8080/test.png" mode="aspectFill"></image>
|
||||
<image class="bg-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png" mode="aspectFill"></image>
|
||||
<!-- <input class="search-box" placeholder='输入工单号进入工单' confirm-type='search' @input="searchInput"
|
||||
@confirm="searchInput" :value="selectKeyWord" /> -->
|
||||
<!-- <view class="search-box">
|
||||
@ -21,7 +21,7 @@
|
||||
<view v-for="(item, index) in 9" :key="index">
|
||||
<view class="work-order-card" v-if="index == 0 && showWorkOrderSection"
|
||||
@click="navigateToWorkOrderDashboard">
|
||||
<image class="work-order-icon" src="http://localhost:8080/workOrder.png" mode="aspectFill" />
|
||||
<image class="work-order-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/workOrder.png" mode="aspectFill" />
|
||||
<text class="work-order-text">工单台</text>
|
||||
</view>
|
||||
<view class="work-order-card" v-else></view>
|
||||
|
||||
35
pages.json
35
pages.json
@ -606,6 +606,13 @@
|
||||
"navigationBarTitleText": "退款操作",
|
||||
"navigationBarBackgroundColor": "#F9F9F9"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "orderVerification/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单核销",
|
||||
"navigationBarBackgroundColor": "#F9F9F9"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -670,6 +677,34 @@
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "积分商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "groupPurchase/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "团购"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "groupPurchaseDetail/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "groupPurchaseSubmit/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "提交团单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "ztLocation/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "自提点"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user