liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(商品详情)：UI调整（缺资质信息，未对接，其余OK）

Browse Source
This commit is contained in:
modendeveloper
2024-09-08 17:27:25 +08:00
parent 22f2e9779a
commit e391b2fe9b
3 changed files with 116 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/shop/GoodsCon/index.vue
+108 -45
View File
@@ -14,21 +14,44 @@
<view class="wrapper">
<!-- 原模块 -->
<view class="change-section bg-white" v-if="source !== 'pre' && source !== 'day' && source !== 'kill' && source !== 'spe'">
<view class="introduce bold">{{ storeInfo.storeName }}</view>
<rich-text class="subInfo" :nodes="storeInfo.storeInfo" v-if="storeInfo.storeInfo"/>
<view class="share acea-row row-between row-middle" style="flex-wrap: nowrap;">
<view class="money font-color-lightred acea-row ai-end">
<text class="num">￥{{ attr.productSelect.price }}</text>
<text style="color: #999999;font-size: 24rpx;">￥</text>
<text style="color: #999999;font-size: 24rpx;text-decoration: line-through;">
{{ attr.productSelect.otPrice }}
</text>
<text v-if="storeInfo.vipPrice && storeInfo.vipPrice > 0" class="vip-price-tag">已享受会员价格</text>
<view>
<view class="share acea-row row-between row-middle" style="flex-wrap: nowrap;margin-top: 0;">
<view class="money font-color-lightred acea-row v12-align-center">
<view>
<text class="v12-font-22 v12-red-text">￥</text>
<text class=" v12-primary-text v12-font-44 v12-red-text">{{ attr.productSelect.price }}</text>
<text class="v12-ml-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">￥</text>
<text class="v12-mr-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">{{ attr.productSelect.otPrice }}</text>
<text v-if="storeInfo.vipPrice && storeInfo.vipPrice > 0" class="v12-white-text v12-red v12-font-22 v12-radius-40 v12-px-1 v12-font-weight-400">会员价</text>
</view>
</view>
<!-- <view style="flex-shrink:0;" class="acea-row row-middle" @click="listenerActionSheet">
<image :src="webUrl+'/20210806121714655368.png'" mode="" style="width: 36rpx;height: 36rpx;"></image>
</view> -->
</view>
<view style="flex-shrink:0;" class="acea-row row-middle" @click="listenerActionSheet">
<image :src="webUrl+'/20210806121714655368.png'" mode="" style="width: 36rpx;height: 36rpx;"></image>
<view class="v12-mt-1 v12-mb-3">
<view
v-if="couponListLimit2ToShow.length > 0"
class="cell flex jc-between ai-center"
@click="changeCoupons()"
>
<view
v-for="(item, index) in couponListLimit2ToShow"
:key="index"
class="v12-align-center"
>
<view class="v12-primary-text v12-primary-border v12-radius-6 v12-font-22 v12-px-1">券</view>
<view class="v12-primary-text v12-primary-border v12-radius-6 v12-font-22 v12-px-1">{{ item.couponTitle }}</view>
</view>
<view class="value value2 v12-font-24 v12-primary-text">
更多优惠
<uni-icons type="right" size="14" color="#707070"></uni-icons>
</view>
</view>
</view>
</view>
<view class="introduce bold">{{ storeInfo.storeName }}</view>
<rich-text class="subInfo" :nodes="storeInfo.storeInfo" v-if="storeInfo.storeInfo"/>
</view>
<!-- v4 特产 -->
@@ -154,7 +177,7 @@
<!-- v6服务项目开始 -->
<view class="service-section goods-section" v-if="storeInfo && storeInfo.isTickets!=1">
<view
<!-- <view
v-if="couponListLimit2ToShow.length > 0"
class="cell flex jc-between ai-center"
@click="changeCoupons()"
@@ -170,47 +193,64 @@
优惠详情
<uni-icons type="right" size="13" color="#707070"></uni-icons>
</view>
</view>
</view> -->
<view class="cell flex jc-between ai-center" @click="selecAttrTap">
<view class="flex ai-center">
<view class="after-title">规格</view>
<view class="title bold">{{ attrValue }}</view>
<view class="after-title v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/items.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-ml-1 v12-font-28">选择</text>
</view>
<view class="title attr-bg v12-primary-text">{{ attrValue }}</view>
</view>
<view class="value">库存：{{ attr.productSelect.stock }}
<uni-icons type="right" size="13" color="#707070"></uni-icons>
<view class="value v12-justify-end v12-align-center">
<text class=" v12-dark1-text v12-font-24">库存：{{ attr.productSelect.stock }}</text>
<uni-icons type="right" size="16" color="#707070"></uni-icons>
</view>
</view>
<view class="cell flex jc-between ai-center">
<view class="flex">
<view class="after-title">送至</view>
<view class="title bold" v-if="postAddress">{{ postAddress }}
<view class="sub-title flex ai-end">
<image class="icon-time" :src="webUrl+'/20230106150523489905.png'" mode="scaleToFill"/>
<view class="text">
<view class="flex v12-align-start">
<view class="after-title v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/car.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-ml-1 v12-font-28">送至</text>
</view>
<view class="title " v-if="postAddress">
<view class="address-wrap">
<image class="logo" :src="webUrl+'/orderIcon/地址.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-font-28 v12-secondary-dark-text">{{ postAddress }}</text>
</view>
<view class="sub-title flex ai-end" style="margin-top: 0;">
<view class="v12-font-20 v12-dark1-text address-wrap">
<image class="logo" :src="webUrl+'/orderIcon/地址.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx; opacity: 0;"/>
<text v-if="storeInfo.isFastPost == 1">预计48小时内发货</text>
<text v-if="storeInfo.isFastPost == 2">预计72小时内发货</text>
<text v-if="storeInfo.isFastPost == 0">{{ "预计发货时间：" + storeInfo.postTime }}</text>
</view>
</view>
</view>
<view class="title bold" @click="getAddress" v-else>无法获取定位信息，点击重新授权定位</view>
<view class="title v12-font-28 v12-secondary-dark-text" @click="getAddress" v-else>无法获取定位信息，点击重新授权定位</view>
</view>
</view>
<view class="cell flex jc-between ai-center">
<view class="flex ai-center">
<view class="after-title">快递</view>
<view class="title bold">{{ storeInfo.postage === 0 ? "免运费" : `￥${storeInfo.postage}` }}</view>
<view class="after-title v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/快递.png'" mode="" style="margin-right:0; width: 28rpx; height:28rpx"/>
<text class="v12-ml-1 v12-font-28">快递</text>
</view>
<view class="title v12-secondary-dark-text v12-font-28">{{ storeInfo.postage === 0 ? "免运费" : `￥${storeInfo.postage}` }}</view>
</view>
<!-- <view class="value red">销量：{{ storeInfo.sales }}</view> -->
</view>
<view class="cell flex jc-between ai-center" v-if="storeInfo.guarantee">
<view class="flex ai-center">
<view class="after-title flex-0">保障</view>
<view class="title bold">{{ storeInfo.guarantee }}</view>
<view class="after-title flex-0 v12-dark-text v12-font-28 v12-align-center">
<image class="logo" :src="webUrl+'/orderIcon/服务.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
<text class="v12-ml-1 v12-font-28">服务</text>
</view>
<view class="title v12-secondary-dark-text v12-font-28">{{ storeInfo.guarantee }}</view>
</view>
</view>
</view>
@@ -218,14 +258,17 @@
<view class="store-section goods-section" v-if="systemStore">
<view class="flex jc-between ai-center">
<view class="title bold flex ai-center">
<image class="logo" :src="systemStore.image" mode="scaleToFill"/>
<view>
<image class="logo" :src="systemStore.image" mode="" style="width: 72rpx; height:72rpx"/>
</view>
{{ systemStore.name }}
</view>
<view
class="flex ai-center store-btn"
class=" v12-btn v12-primary v12-white-text v12-primary-border v12-font-24"
style="height: 42rpx; line-height:42rpx"
@click="goStore"
>
进店逛逛
进店逛逛>
</view>
</view>
@@ -241,7 +284,12 @@
</view>
<view class="more-t bold">{{ item.storeName }}</view>
</view>
<view class="price bold">￥{{ item.price }}</view>
<view class="v12-justify-between">
<view class="price bold">￥{{ item.price }}</view>
<view class="">
<image class="logo" :src="webUrl+'/orderIcon/组 355.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
</view>
</view>
</view>
</view>
</view>
@@ -252,7 +300,7 @@
class="param-section goods-section"
v-if="Object.entries(storeInfo.exPropertiesData).length>0 && storeInfo.isTickets!==1"
>
<view class="bold">产品参数</view>
<view class="v12-font-24 v12-dark-text v12-font-weight-500">产品参数</view>
<view class="table">
<view
v-for="(item,index) in storeInfo.exPropertiesData.slice(0, exSliceEnd)"
@@ -260,26 +308,26 @@
class="row flex ai-center"
>
<view class="title tc">
<view class="title-cont">
<view class="title-cont v12-font-24 v12-text-right.">
{{ item.key }}
</view>
</view>
<view class="value tc bold">
<view class="value-cont">
<view class="value tc v12-font-weight-500">
<view class="value-cont v12-font-24 v12-text-left">
{{ item.value }}
</view>
</view>
</view>
<view
v-if="storeInfo.exPropertiesData.length > 3"
class="row btn tc"
class="row btn tc v12-font-22"
style="color:#666"
@click="changeExEnd"
>
<uni-icons
:type="exSliceEnd === 3 ? 'bottom' : 'top'"
size="13"
color="#707070"
size="14"
color="#666666"
></uni-icons>
点击{{ exSliceEnd === 3 ? '展开查看' : '折叠' }}更多参数
</view>
@@ -288,12 +336,16 @@
<!-- v6产品参数结束 -->
<!-- 用户评价开始 -->
<view class="userEvaluation" v-if="replyCount">
<!-- v-if="replyCount" -->
<view class="userEvaluation" v-if="replyCount" >
<view class="title acea-row row-between-wrapper">
<view>用户评价({{ replyCount }})</view>
<view>
<text class="v12-font-weight-500 v12-dark-text">商品评价</text>
<text class="v12-ml-2 v12-dark1-text">({{ replyCount }})</text>
</view>
<text @click="goEvaluateList(id)" class="praise">
<text class="font-color-red">{{ replyChance }}%</text>
好评率
<!-- <text class="font-color-red">{{ replyChance }}%</text>
好评率 -->
<text class="iconfont icon-jiantou"></text>
</text>
</view>
@@ -357,7 +409,7 @@
style="background: transparent !important;border-radius: 0 !important;"
>
<view
class="btn-car"
class="btn-car v12-primary-text v12-primary-border"
:class="{
'btn-car-disabled': (attr.productSelect.stock === 0 && attr.cartAttr) || storeInfo.stock === 0
}"
@@ -1882,4 +1934,15 @@ export default {
font-size: 28rpx;
margin-right: 40rpx;
}
.attr-bg{
background: rgba(197,39,51,0.1);
padding: 0rpx 5px;
height: 42rpx;
line-height: 42rpx;
border-radius: 12rpx
}
.address-wrap{
display: flex;
align-items: flex-end;
}
</style>