完成团购模块页面

This commit is contained in:
赵毅 2025-08-20 16:15:05 +08:00
parent 5b934ecd17
commit ab21a6f441
23 changed files with 3292 additions and 251 deletions

View File

@ -36,7 +36,7 @@ export default {
name: '凯旋城东区', name: '凯旋城东区',
address: '衡水市,桃城-衡水市人民路与育才街交叉口西行100米路南', address: '衡水市,桃城-衡水市人民路与育才街交叉口西行100米路南',
distance: '0 m', 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: '岸芷庭蓝(一区)', name: '岸芷庭蓝(一区)',
address: '衡水市,河阳西路与中华南大街交叉口东220米', address: '衡水市,河阳西路与中华南大街交叉口东220米',
distance: '1000 m', 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, id: 3,
name: '滏阳锦苑', name: '滏阳锦苑',
address: '衡水市,滏阳苑', address: '衡水市,滏阳苑',
distance: '2 km', 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, id: 4,
name: '隆兴小区', name: '隆兴小区',
address: '衡水市,河北省衡水市高新区隆兴西路隆兴小区', address: '衡水市,河北省衡水市高新区隆兴西路隆兴小区',
distance: '5 km', 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, id: 5,
name: '紫金广场', name: '紫金广场',
address: '衡水市,衡水市桃城区人民西路与庆丰南街交叉口', address: '衡水市,衡水市桃城区人民西路与庆丰南街交叉口',
distance: '894 km', 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, id: 6,
name: '万和瑞景', name: '万和瑞景',
address: '衡水市,政通街46号', address: '衡水市,政通街46号',
distance: '12249 km', distance: '12249 km',
image: 'http://localhost:8080/test_community.png' image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
} }
] ]
}; };

View File

@ -8,7 +8,7 @@
"after_sales_reason": "拍错商品/不想要了", "after_sales_reason": "拍错商品/不想要了",
"after_sales_type": 1, "after_sales_type": 1,
"application_description": "请尽快处理退款", "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, "is_need_process": 1,
"process_status": 1, "process_status": 1,
"refund_amount": 68.00, "refund_amount": 68.00,
@ -23,7 +23,7 @@
"goods_id": 8001, "goods_id": 8001,
"goods_name": "澳洲牛排", "goods_name": "澳洲牛排",
"is_support_same_day": 1, "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, "sales_price": 68.00,
"count": 1, "count": 1,
"after_sales_status": 1 "after_sales_status": 1
@ -68,9 +68,9 @@
"after_sales_reason": "商品质量问题", "after_sales_reason": "商品质量问题",
"after_sales_type": 2, "after_sales_type": 2,
"application_description": "商品包装破损", "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_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_tracking_no": "SF1234567890",
"return_logistics_company": "顺丰速运", "return_logistics_company": "顺丰速运",
"return_contact_phone": "13800138000", "return_contact_phone": "13800138000",
@ -125,7 +125,7 @@
"applicant": "王五", "applicant": "王五",
"after_sales_reason": "商品发错型号", "after_sales_reason": "商品发错型号",
"application_description": "购买的是XL码收到L码", "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, "is_need_process": 1,
"process_status": 1, "process_status": 1,
"after_sales_goods": "1@8006", "after_sales_goods": "1@8006",

View File

@ -59,7 +59,7 @@
class="copy-icon" @click="copyRefundNo"/> --> class="copy-icon" @click="copyRefundNo"/> -->
</view> </view>
</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> </view>
</view> </view>

View File

@ -32,7 +32,7 @@
"order_id": 1001, "order_id": 1001,
"goods_id": 8001, "goods_id": 8001,
"goods_name": "澳洲牛排", "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_unit": "盒",
"goods_spec": "200g/盒", "goods_spec": "200g/盒",
"cost_price": 45.0, "cost_price": 45.0,
@ -45,7 +45,7 @@
"id": 7002, "id": 7002,
"goods_id": 8002, "goods_id": 8002,
"goods_name": "有机西兰花", "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_unit": "份",
"goods_spec": "500g/份", "goods_spec": "500g/份",
"cost_price": 8.0, "cost_price": 8.0,
@ -71,7 +71,7 @@
"id": 7003, "id": 7003,
"goods_id": 8003, "goods_id": 8003,
"goods_name": "精品榴莲", "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, "sales_price": 152.0,
"count": 1, "count": 1,
"is_support_same_day": 1, "is_support_same_day": 1,
@ -129,7 +129,7 @@
"id": 7003, "id": 7003,
"goods_id": 8003, "goods_id": 8003,
"goods_name": "冷冻虾仁", "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, "sales_price": 152.0,
"count": 3, "count": 3,
"is_support_same_day": 1, "is_support_same_day": 1,
@ -139,7 +139,7 @@
"id": 7004, "id": 7004,
"goods_id": 8004, "goods_id": 8004,
"goods_name": "精品榴莲", "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, "sales_price": 152.0,
"count": 1, "count": 1,
"is_support_same_day": 2, "is_support_same_day": 2,

View File

@ -186,7 +186,7 @@
<text> {{ merchantAddress }} </text> <text> {{ merchantAddress }} </text>
<view class="copy-icon" @click="copyRefundNo"></view> <view class="copy-icon" @click="copyRefundNo"></view>
</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>
<view class="hr"></view> <view class="hr"></view>
<view class="refund-item2"> <view class="refund-item2">

View File

@ -83,7 +83,7 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="action-buttons"> <view class="action-buttons">
<view> <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> </view>
<button class="modify-btn" @click="modifyRefund">平台介入</button> <button class="modify-btn" @click="modifyRefund">平台介入</button>
<button class="cancel-btn" @click="cancelRefund">撤销申请</button> <button class="cancel-btn" @click="cancelRefund">撤销申请</button>

View File

@ -16,15 +16,15 @@
<view class="label">选择运营商</view> <view class="label">选择运营商</view>
<view class="operator-list"> <view class="operator-list">
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaMobile' }" @click="selectOperator('chinaMobile')"> <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> <text>移动</text>
</view> </view>
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaUnicom' }" @click="selectOperator('chinaUnicom')"> <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> <text>中国联通</text>
</view> </view>
<view class="operator-item" :class="{ 'active': selectedOperator === 'chinaTelecom' }" @click="selectOperator('chinaTelecom')"> <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> <text>中国电信</text>
</view> </view>
</view> </view>
@ -138,11 +138,11 @@ export default {
getOperatorIcon() { getOperatorIcon() {
switch (this.selectedOperator) { switch (this.selectedOperator) {
case 'chinaMobile': case 'chinaMobile':
return 'http://localhost:8080/payTheFees_yidong.png'; return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_yidong.png';
case 'chinaUnicom': case 'chinaUnicom':
return 'http://localhost:8080/payTheFees_liantong.png'; return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_liantong.png';
case 'chinaTelecom': case 'chinaTelecom':
return 'http://localhost:8080/payTheFees_dianxin.png'; return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_dianxin.png';
default: default:
return ''; return '';
} }

View 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;
}

View 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>

View 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;
}

View 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">单买价&nbsp;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">查看更多 &gt;</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>

View 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;
}

View 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>

View File

@ -1,26 +1,26 @@
<template> <template>
<div class="container"> <view class="container">
<!-- 顶部展开后的阴影 --> <!-- 顶部展开后的阴影 -->
<div class="boxshadow" v-if="topShow"></div> <view class="boxshadow" v-if="topShow"></view>
<div class="header" :class="topShow ? 'op0' : ''"> <view class="header" :class="topShow ? 'op0' : ''">
<div <view
class="searchBox" class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }" :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> <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div> </view>
<div class="searchBox_ipt" @click="searchPage"> <view class="searchBox_ipt" @click="searchPage">
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<input disabled type="text" placeholder="输入商品名称" /> <input disabled type="text" placeholder="输入商品名称" />
</div> </view>
</div> </view>
<div class="slide"> <view class="slide">
<div class="slide_con"> <view class="slide_con">
<div <view
v-for="(item, index) in CateList" v-for="(item, index) in CateList"
:key="index" :key="index"
class="slide_conBox" class="slide_conBox"
@ -33,40 +33,40 @@
></image> ></image>
<text>{{ item.category_name }}</text> <text>{{ item.category_name }}</text>
</view> </view>
</div> </view>
</div> </view>
<div class="open" @click="topOpen" v-if="!topShow"> <view class="open" @click="topOpen" v-if="!topShow">
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
mode="aspectFill" mode="aspectFill"
></image> ></image>
</div> </view>
</div> </view>
</div> </view>
<!-- 整体展开的顶部 --> <!-- 整体展开的顶部 -->
<div class="header header2" v-if="topShow"> <view class="header header2" v-if="topShow">
<div <view
class="searchBox" class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }" :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> <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div> </view>
<div class="searchBox_ipt"> <view class="searchBox_ipt">
<image <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<input type="text" placeholder="输入商品名称" /> <input type="text" placeholder="输入商品名称" />
</div> </view>
</div> </view>
<div class="slide"> <view class="slide">
<div class="slide_con"> <view class="slide_con">
<div <view
v-for="(item, index) in CateList" v-for="(item, index) in CateList"
:key="index" :key="index"
class="slide_conBox" class="slide_conBox"
@ -78,18 +78,18 @@
></image> ></image>
<text>{{ item.category_name }}</text> <text>{{ item.category_name }}</text>
</view> </view>
</div> </view>
</div> </view>
</div> </view>
<div class="hides" @click="topOpen"> <view class="hides" @click="topOpen">
收起 <u-icon name="arrow-up"></u-icon> 收起 <u-icon name="arrow-up"></u-icon>
</div> </view>
</div> </view>
<div class="Con"> <view class="Con">
<div class="Con_left"> <view class="Con_left">
<div <view
class="CateItem" class="CateItem"
:class="item.id === currentLeftCateId ? 'CateItem_active' : ''" :class="item.id === currentLeftCateId ? 'CateItem_active' : ''"
v-for="item in leftCateList" 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" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
mode="aspectFill"></image> --> mode="aspectFill"></image> -->
{{ item.category_name }} {{ item.category_name }}
</div> </view>
</div> </view>
<div class="Con_right"> <view class="Con_right">
<div class="CateList_Box" :class="cateListShow ? 'bgf' : ''"> <view class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
<div class="CateList" ref="cateListRef"> <view class="CateList" ref="cateListRef">
<div <view
class="CateList_Item" class="CateList_Item"
v-for="(item, index) in tagList" v-for="(item, index) in tagList"
:key="item.id" :key="item.id"
@ -117,16 +117,16 @@
@click="checkItem(index)" @click="checkItem(index)"
> >
{{ item.tag_name }} {{ item.tag_name }}
</div> </view>
</div> </view>
<div class="more" @click="changeCateListShow"> <view class="more" @click="changeCateListShow">
<u-icon v-if="!cateListShow" name="arrow-down"></u-icon> <u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
<u-icon v-if="cateListShow" name="arrow-up"></u-icon> <u-icon v-if="cateListShow" name="arrow-up"></u-icon>
</div> </view>
</div> </view>
<!-- 右下展开的内容 --> <!-- 右下展开的内容 -->
<div class="activeCateList" v-if="cateListShow"> <view class="activeCateList" v-if="cateListShow">
<div <view
class="CateList_Item" class="CateList_Item"
v-for="(item, index) in tagList" v-for="(item, index) in tagList"
:key="index" :key="index"
@ -134,22 +134,22 @@
@click="checkItem(index)" @click="checkItem(index)"
> >
{{ item.tag_name }} {{ item.tag_name }}
</div> </view>
</div> </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"> <view class="CateInfo" v-for="item in tagList" :key="item.id">
<div class="CateInfo_tit"> <view class="CateInfo_tit">
{{ item.tag_name }} {{ item.tag_name }}
</div> </view>
<div <view
class="CateInfo_Item" class="CateInfo_Item"
v-for="items in item.commodity_info_list" v-for="items in item.commodity_info_list"
:key="items.id" :key="items.id"
> >
<div class="CateInfo_Item_Box"> <view class="CateInfo_Item_Box">
<div class="CateInfo_Item_left" @click="goods(items)"> <view class="CateInfo_Item_left" @click="goods(items)">
<view <view
class="tag tag-img" class="tag tag-img"
v-if=" v-if="
@ -162,9 +162,9 @@
:src="picUrl + items.commodity_pic" :src="picUrl + items.commodity_pic"
mode="aspectFill" mode="aspectFill"
></image> ></image>
</div> </view>
<div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''"> <view class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
<div class="CateInfo_Item_right_Tit" @click="goods(items)"> <view class="CateInfo_Item_right_Tit" @click="goods(items)">
<view <view
class="tag tag-text" class="tag tag-text"
v-if=" v-if="
@ -174,15 +174,15 @@
>当日达</view >当日达</view
> >
{{ items.commodity_name }} {{ items.commodity_name }}
</div> </view>
<div class="CateInfo_Item_right_subtit" @click="goods(items)"> <view class="CateInfo_Item_right_subtit" @click="goods(items)">
{{ items.commodity_intro }} {{ items.commodity_intro }}
</div> </view>
<div class="CateInfo_Item_Money"> <view class="CateInfo_Item_Money">
<div class="CateInfo_Item_Money_left"> <view class="CateInfo_Item_Money_left">
{{ getPriceRange(items.commodity_goods_info_list) }} {{ getPriceRange(items.commodity_goods_info_list) }}
</div> </view>
<div <view
class="CateInfo_Item_Money_right" class="CateInfo_Item_Money_right"
v-if="!(items.commodity_goods_info_list.length > 1)" v-if="!(items.commodity_goods_info_list.length > 1)"
> >
@ -208,10 +208,10 @@
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon> <u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
</view> </view>
</u-number-box> </u-number-box>
</div> </view>
</div> </view>
<div <view
class="gg" class="gg"
@click="chooseGG(items)" @click="chooseGG(items)"
v-if=" v-if="
@ -224,9 +224,9 @@
size="26rpx" size="26rpx"
color="#FF370B" color="#FF370B"
></u-icon> ></u-icon>
</div> </view>
<div <view
class="gg" class="gg"
@click="chooseGG(items)" @click="chooseGG(items)"
v-if=" v-if="
@ -235,36 +235,36 @@
> >
收起 收起
<u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon> <u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
</div> </view>
</div> </view>
</div> </view>
<div class="GGList" v-if="items.isShow"> <view class="GGList" v-if="items.isShow">
<div <view
class="GGItem" class="GGItem"
v-for="ite in items.commodity_goods_info_list" v-for="ite in items.commodity_goods_info_list"
:key="ite.id" :key="ite.id"
@click="goods(items)" @click="goods(items)"
> >
<div class="GGItem_Image"> <view class="GGItem_Image">
<view class="tag tag-img" v-if="ite.is_same_day">当日达</view> <view class="tag tag-img" v-if="ite.is_same_day">当日达</view>
<image <image
:src="picUrl + ite.commodity_pic" :src="picUrl + ite.commodity_pic"
mode="aspectFill" mode="aspectFill"
></image> ></image>
</div> </view>
<div class="GGItem_Con"> <view class="GGItem_Con">
<div class="GGItem_Con_Tit"> <view class="GGItem_Con_Tit">
<view class="tag tag-text" v-if="ite.is_same_day" <view class="tag tag-text" v-if="ite.is_same_day"
>当日达</view >当日达</view
> >
{{ ite.goods_name }} {{ ite.goods_name }}
</div> </view>
<div class="GGItem_Con_Msg"> <view class="GGItem_Con_Msg">
<div class="GGItem_Con_Msg_left"> <view class="GGItem_Con_Msg_left">
<span></span>{{ ite.sales_price }} <span></span>{{ ite.sales_price }}
</div> </view>
<div class="GGItem_Con_Msg_right"> <view class="GGItem_Con_Msg_right">
<u-number-box <u-number-box
v-model="ite.quantity" v-model="ite.quantity"
:min="0" :min="0"
@ -287,27 +287,27 @@
></u-icon> ></u-icon>
</view> </view>
</u-number-box> </u-number-box>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
<!-- 按钮 --> <!-- 按钮 -->
<!-- <div class="btn"> <!-- <view class="btn">
查看全部商品 查看全部商品
<div class="cir"> <view class="cir">
<u-icon name="arrow-right" color="#fff" size="12px"></u-icon> <u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
</div> </view>
</div> --> </view> -->
</div> </view>
</div> </view>
</div> </view>
<!-- <nav-footer :current="3" /> --> <!-- <nav-footer :current="3" /> -->
<div class="shop_car" @click="shopCar"> <view class="shop_car" @click="shopCar">
<u-badge <u-badge
numberType="limit" numberType="limit"
type="error" type="error"
@ -318,8 +318,8 @@
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
></image> ></image>
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> --> <!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> -->
</div> </view>
</div> </view>
</template> </template>
<script> <script>

View 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;
}

View 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>

View File

@ -41,7 +41,7 @@ image {
} }
.content{ .content {
margin-top: 30rpx; margin-top: 30rpx;
height: 1100rpx; height: 1100rpx;
padding: 20rpx; padding: 20rpx;
@ -51,15 +51,25 @@ image {
display: flex; display: flex;
} }
.iconStyle{ .iconStyle {
width: 100%; width: 100%;
height: 200rpx; height: 200rpx;
} }
.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 { .nav_icon {
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
margin-bottom: 20rpx;
} }
.community { .community {
@ -351,7 +361,7 @@ image {
position: relative; position: relative;
} }
.boxshadowCon_Text{ .boxshadowCon_Text {
font-size: 20rpx; font-size: 20rpx;
color: #999999; color: #999999;
text-align: center; text-align: center;
@ -361,7 +371,7 @@ image {
position: relative; position: relative;
} }
.boxshadowCon_Text2{ .boxshadowCon_Text2 {
font-size: 20rpx; font-size: 20rpx;
color: #999999; color: #999999;
font-weight: 500; font-weight: 500;

View File

@ -1,87 +1,89 @@
<template> <template>
<div class="container"> <view class="container">
<!-- <div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"> <!-- <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<div class="searchBox_add"> <view class="searchBox_add">
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon> <u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
</div> </view>
</div> --> </view> -->
<div class="community"> <view class="community">
<div class="community_left"> <view class="community_left">
<image mode="aspectFill" src="../../../static/logo.png" alt="" /> <image mode="aspectFill" src="../../../static/logo.png" alt="" />
</div> </view>
<div class="community_right" @click="changeShow"> <view class="community_right" @click="changeShow">
<div class="community_right_text"> <view class="community_right_text">
<div class="community_right_text1">七个2锁城</div> <view class="community_right_text1">七个2锁城</view>
<div class="community_right_text2">衡水市上海公馆6A</div> <view class="community_right_text2">衡水市上海公馆6A</view>
</div> </view>
<div class="community_right_more"> <view class="community_right_more">
<u-icon bold color="#999999" size="30" name="arrow-right" @click="back"></u-icon> <u-icon bold color="#999999" size="30" name="arrow-right" @click="back"></u-icon>
</div> </view>
</div> </view>
</div> </view>
<div class="content"> <view class="content">
<view class="iconStyle"> <view class="iconStyle">
<u-grid col="6" :border="false" @click="click"> <u-grid col="6" :border="false">
<u-grid-item v-for="(item, index) in baseList" :key="index"> <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> <image class="nav_icon" :src="item.image" mode=""></image>
<text class="grid-text">{{item.name}}</text> </view>
<text class="grid-text">{{ item.name }}</text>
</u-grid-item> </u-grid-item>
</u-grid> </u-grid>
</view> </view>
</div> </view>
<div class="boxshadow" v-if="show" @click="changeShow"> <view class="boxshadow" v-if="show" @click="changeShow">
<div class="boxshadowCon"> <view class="boxshadowCon">
<div class="boxshadowCon_Tit"> <view class="boxshadowCon_Tit">
请选择店铺 请选择店铺
</br> <br />
<view class="boxshadowCon_Text">从以下列表中选择您的管理权限的店铺</view> <view class="boxshadowCon_Text">从以下列表中选择您的管理权限的店铺</view>
<div class="cancel">确定</div> <view class="cancel">确定</view>
</div> </view>
<div class="lines"></div> <view class="lines"></view>
<div class="communityList"> <view class="communityList">
<div class="boxshadowCon_Text2">您有n个店铺的管理权限</div> <view class="boxshadowCon_Text2">您有n个店铺的管理权限</view>
<div style="width: 100%;height: 200rpx;"> <view style="width: 100%;height: 200rpx;">
<div class="communityItem" v-for="item in 8"> <view class="communityItem" v-for="(item, index) in 8" :key="index">
<div class="community_left"> <view class="community_left">
<image mode="aspectFill" src="../../../static/logo.png" alt="" /> <image mode="aspectFill" src="../../../static/logo.png" alt="" />
</div> </view>
<div class="community_right" @click="changeShow2"> <view class="community_right" @click="changeShow2">
<div class="community_right_text"> <view class="community_right_text">
<div class="community_right_text1">七个2锁城</div> <view class="community_right_text1">七个2锁城</view>
<div class="community_right_text2">衡水市上海公馆6A</div> <view class="community_right_text2">衡水市上海公馆6A</view>
</div> </view>
</div> </view>
<div class="communityItem_radio"> <view class="communityItem_radio">
<radio></radio> <radio></radio>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</div> </view>
</template> </template>
<script> <script>
import { import {
request, request,
picUrl, picUrl,
uniqueByField, uniqueByField,
menuButtonInfo, menuButtonInfo,
NavgateTo NavgateTo
} from '../../../utils'; } from '../../../utils';
import { import {
apiArr apiArr
} from '../../../api/community'; } from '../../../api/community';
export default { export default {
data() { data() {
return { return {
top: "", top: "",
@ -89,11 +91,17 @@
active: 1, active: 1,
show: false, show: false,
show2: false, show2: false,
baseList: [{ baseList: [
{
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1568.png", image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1568.png",
name: "订单", name: "订单",
url: "", url: "",
}], }, {
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gp_cancelAfterVerification.png",
name: "到店核销",
url: "",
}
],
} }
}, },
onLoad(options) { onLoad(options) {
@ -119,16 +127,20 @@
changeShow2() { changeShow2() {
this.show2 = !this.show this.show2 = !this.show
}, },
click() { click(item) {
console.log('点击跳转订单页面') console.log("🚀 ~ click ~ item:", item)
NavgateTo( '/packages/storeManagement/order/index') if(item.name === '到店核销'){
NavgateTo('/packages/storeManagement/orderVerification/index')
}else{
NavgateTo('/packages/storeManagement/order/index')
}
} }
}, },
} }
</script> </script>
<style> <style>
@import url("./index.css"); @import url("./index.css");
</style> </style>

View File

@ -44,7 +44,7 @@
<view class="price">64.1</view> <view class="price">64.1</view>
<view class="desc">确认退款后款项将自动原路返回消费者</view> <view class="desc">确认退款后款项将自动原路返回消费者</view>
<view class="remark">退款备注</view> <view class="remark">退款备注</view>
<input type="text" :value="desc"placeholder="请输入备注内容" @input="headerInputClick" /> <input type="text" :value="desc" placeholder="请输入备注内容" @input="headerInputClick" />
</view> </view>
<view class="btn" @click="headerSubmitClick">确定</view> <view class="btn" @click="headerSubmitClick">确定</view>

View 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;
}

View 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>

View File

@ -2,7 +2,7 @@
<view class="container"> <view class="container">
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"> <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<view class="searchBox_add" @click="addCommunity"> <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"> <view class="emptyCommunity">
{{ communityVal }} {{ communityVal }}
</view> </view>
@ -10,7 +10,7 @@
</view> </view>
<!-- 背景图片区域 --> <!-- 背景图片区域 -->
<view class="bg-image-container"> <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" <!-- <input class="search-box" placeholder='输入工单号进入工单' confirm-type='search' @input="searchInput"
@confirm="searchInput" :value="selectKeyWord" /> --> @confirm="searchInput" :value="selectKeyWord" /> -->
<!-- <view class="search-box"> <!-- <view class="search-box">
@ -21,7 +21,7 @@
<view v-for="(item, index) in 9" :key="index"> <view v-for="(item, index) in 9" :key="index">
<view class="work-order-card" v-if="index == 0 && showWorkOrderSection" <view class="work-order-card" v-if="index == 0 && showWorkOrderSection"
@click="navigateToWorkOrderDashboard"> @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> <text class="work-order-text">工单台</text>
</view> </view>
<view class="work-order-card" v-else></view> <view class="work-order-card" v-else></view>

View File

@ -606,6 +606,13 @@
"navigationBarTitleText": "退款操作", "navigationBarTitleText": "退款操作",
"navigationBarBackgroundColor": "#F9F9F9" "navigationBarBackgroundColor": "#F9F9F9"
} }
},
{
"path": "orderVerification/index",
"style": {
"navigationBarTitleText": "订单核销",
"navigationBarBackgroundColor": "#F9F9F9"
}
} }
] ]
}, },
@ -670,6 +677,34 @@
"navigationBarBackgroundColor": "#fff", "navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "积分商城" "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": "自提点"
}
} }
] ]
}, },