root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 4 weeks ago
parent
6b0ede149b
commit
aa91bc7958
1 changed files with 159 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 306
      pages/index/index.vue

306
pages/index/index.vue
View File

@ -459,161 +459,35 @@
</view>
</view>
</uni-popup>
<uni-popup ref="productPopup" background-color="#fff">
<view class="popup-area-content" style="width: 700rpx;overflow: scroll;">
<view class="popup-area-title">
<text>订单详情</text>
<uni-popup ref="productPopup" background-color="transparent">
<view class="product-popup-content">
<view class="product-popup-header">
<view class="product-popup-title">商品详情</view>
<view class="product-popup-subtitle">请核对商品规格和数量</view>
</view>
<view>
<view class="box1">
<view style="height: 160rpx;line-height: 80rpx;">
<view style="flex: 1;color: #777;font-weight: 700;">
取货地址
</view>
<view style="color: #000;font-weight: 700;">
{{productData.shopAddress}}
</view>
</view>
<view style="height: 160rpx;line-height: 80rpx;">
<view style="flex: 1;color: #777;font-weight: 700;">
收货地址
</view>
<view style="color: #000;font-weight: 700;">
{{productData.receiverAddress}}
</view>
</view>
</view>
<view class="box1">
<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;display: flex;"
v-if="productData.shopName != null">
<text style="flex:1">{{productData.shopName}}</text>
<img @tap="makeCall(productData.shopPhone)"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
alt="" style="width: 40rpx;height: 40rpx;margin-top: 14rpx;" />
<view class="product-popup-list" v-if="productData.goodsList != null && productData.goodsList.length > 0">
<view class="product-popup-card" v-for="(item1,index1) in productData.goodsList" :key="index1">
<view class="product-popup-img">
<img :src="item1.productPicture" alt="">
</view>
<view v-for="(item1,index1) in productData.goodsList" :key="index1"
v-if="productData.goodsList != null && productData.goodsList.length > 0"
style="display: flex;padding: 20rpx;background: rgba(247, 248, 248, 0.6);border-radius: 20rpx;">
<view class="goods-img">
<img :src="item1.productPicture" alt="">
<view class="product-popup-info">
<view class="product-popup-name">
{{item1.productName}}
</view>
<view class="goods-content">
<view class="goods-name">
{{item1.productName}}
</view>
<view class="goods-content-center">
{{item1.specs | delNode}}
</view>
<view class="goods-content-bottom">
<view style="width: 50%;">
X{{item1.quantity}}
</view>
<view class="pintuan-left-price">
￥{{item1.price}}
</view>
</view>
<view class="product-popup-spec">
<text class="product-popup-label">规格</text>
<text class="product-popup-spec-text">{{item1.specs | delNode}}</text>
</view>
</view>
<view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;"
v-if="productData.packageFee != null && productData.packageFee > 0">
<view style="flex: 1;color: #777;font-weight: 700;">
打包费
</view>
<view style="color: #000;font-weight:700;">
￥{{productData.packageFee}}
</view>
</view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;"
v-if="productData.deliveryType == 1">
<view style="flex: 1;color: #777;font-weight: 700;">
配送费
</view>
<view style="color: #000;font-weight:700;">
￥{{productData.deliveryFee}}
</view>
</view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;"
v-if="productData.userCouponNum > 0">
<view style="flex: 1;color: #777;font-weight: 700;">
优惠券
</view>
<view style="color: #000;font-weight:700;">
-￥{{productData.userCouponNum}}
</view>
</view>
</view>
<view
style="display: flex;height: 80rpx;line-height: 100rpx;border-top: 1px solid #eee;font-size: 32rpx;font-weight: 700;">
<view style="flex: 1;">
实付
</view>
<view class="">
￥{{productData.totalAmount}}
</view>
</view>
</view>
<view class="box1">
<view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;"
v-if="productData.otherOrder == 1">
<view style="flex: 1;color: #777;font-weight: 700;">
取件地址
</view>
<view style="color: #000;font-weight: 700;">
{{productData.shopAddress}}
</view>
</view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;"
v-if="productData.otherOrder == 1">
<view style="flex: 1;color: #777;font-weight: 700;">
收件地址
</view>
<view style="color: #000;font-weight: 700;">
{{productData.receiverAddress}}
</view>
</view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;"
v-if="productData.otherOrder == 1">
<view style="flex: 1;color: #777;font-weight: 700;">
件数
</view>
<view style="color: #000;font-weight: 700;">
{{productData.deliveryInfo.allCount}}
</view>
</view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;"
v-if="productData.otherOrder == 1">
<view style="flex: 1;color: #777;font-weight: 700;">
服务类型
</view>
<view style="color: #000;font-weight: 700;">
快递/跑腿
</view>
</view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;"
v-if="productData.numberCode != null">
<view style="flex: 1;color: #777;font-weight: 700;">
订单号
</view>
<view style="color: #000;font-weight: 700;">
{{productData.numberCode}}
</view>
</view>
<view style="height: 80rpx;line-height: 80rpx;display: flex;">
<view style="flex: 1;color: #777;font-weight: 700;">
下单时间
</view>
<view style="color: #000;font-weight: 700;">
{{productData.createTime | formatHourMinute}}
</view>
</view>
<view class="product-popup-quantity">
<view class="product-popup-quantity-num">x{{item1.quantity}}</view>
<view class="product-popup-quantity-label">数量</view>
</view>
</view>
</view>
<view class="product-popup-empty" v-else>
暂无商品详情
</view>
</view>
</uni-popup>
@ -2486,6 +2360,144 @@
line-height: 38rpx;
}
.product-popup-content {
width: 680rpx;
max-height: 880rpx;
padding: 34rpx 28rpx 30rpx;
box-sizing: border-box;
overflow: scroll;
border-radius: 36rpx;
background:
radial-gradient(circle at 92% 4%, rgba(166, 255, 234, 0.38) 0, rgba(166, 255, 234, 0) 180rpx),
linear-gradient(180deg, #ffffff 0%, #f8fffc 100%);
box-shadow: 0 24rpx 56rpx rgba(0, 35, 28, 0.18);
}
.product-popup-header {
margin-bottom: 26rpx;
text-align: center;
}
.product-popup-title {
color: #143d35;
font-size: 36rpx;
font-weight: 900;
line-height: 48rpx;
}
.product-popup-subtitle {
margin-top: 8rpx;
color: #7b8a85;
font-size: 24rpx;
line-height: 34rpx;
}
.product-popup-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.product-popup-card {
display: flex;
align-items: center;
padding: 22rpx;
border: 1px solid rgba(166, 255, 234, 0.58);
border-radius: 28rpx;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06);
}
.product-popup-img {
width: 128rpx;
height: 128rpx;
flex-shrink: 0;
overflow: hidden;
border-radius: 22rpx;
background: #f0f5f3;
img {
width: 100%;
height: 100%;
background-size: 100%;
}
}
.product-popup-info {
flex: 1;
min-width: 0;
padding: 0 22rpx;
}
.product-popup-name {
color: #172f2a;
font-size: 30rpx;
font-weight: 900;
line-height: 42rpx;
}
.product-popup-spec {
display: flex;
align-items: flex-start;
margin-top: 16rpx;
}
.product-popup-label {
flex-shrink: 0;
height: 34rpx;
padding: 0 14rpx;
border-radius: 999rpx;
background: rgba(166, 255, 234, 0.72);
color: #126255;
font-size: 20rpx;
font-weight: 800;
line-height: 34rpx;
}
.product-popup-spec-text {
flex: 1;
margin-left: 12rpx;
color: #65736f;
font-size: 24rpx;
line-height: 34rpx;
word-break: break-all;
}
.product-popup-quantity {
width: 92rpx;
height: 92rpx;
flex-shrink: 0;
border-radius: 28rpx;
background: linear-gradient(135deg, #fff4ce 0%, #a6ffea 100%);
color: #103f36;
text-align: center;
box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.08);
}
.product-popup-quantity-num {
padding-top: 16rpx;
font-size: 30rpx;
font-weight: 900;
line-height: 34rpx;
}
.product-popup-quantity-label {
margin-top: 2rpx;
color: #52736b;
font-size: 20rpx;
line-height: 28rpx;
}
.product-popup-empty {
padding: 80rpx 20rpx;
border-radius: 28rpx;
background: rgba(247, 255, 251, 0.9);
color: #7b8a85;
font-size: 28rpx;
font-weight: 700;
text-align: center;
}
@keyframes stickyPanelIn {
0% {
opacity: 0.88;

Write Preview
Loading…
Cancel
Save