|
|
@@ -0,0 +1,380 @@
|
|
|
+<template>
|
|
|
+ <view class="member-content">
|
|
|
+ <scroll-view class="sheet-content" :scroll-y="true" @scroll="handleContentScroll">
|
|
|
+ <!-- 导航栏 :leftIconColor="!isTop ? '#fff' : '#000'"-->
|
|
|
+ <u-navbar :placeholder="true" autoBack>
|
|
|
+ <view slot="center">
|
|
|
+ <view class="center" style="background-color: #fff;">商品详情</view>
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <!-- 主图 -->
|
|
|
+ <view class="mainImame">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <!-- 第一行text -->
|
|
|
+ <view class="firstRow">
|
|
|
+ <text class="priceClass">10元+1000积分</text>
|
|
|
+ <text class="deletePriceClass">100元</text>
|
|
|
+ <view class="productName"> 广誉源会员定制玻璃杯广誉源会员定制玻璃杯</view>
|
|
|
+ <view class="discribeClass">双层曲线杯身在隔热防烫</view>
|
|
|
+ <view class="serviceClass">
|
|
|
+ <ImageItem style="width: 24rpx;height: 24rpx;margin-right: 4rpx;" src="/static/points/Group4.png" />放心购
|
|
|
+ <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 24rpx;margin-right: 4rpx;"
|
|
|
+ src="/static/points/Group6.png" />假一赔三
|
|
|
+ <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 24rpx;margin-right: 4rpx;"
|
|
|
+ src="/static/points/Group2.png" /> 7天无理由退换
|
|
|
+ <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 24rpx;margin-right: 4rpx;"
|
|
|
+ src="/static/points/return7.png" /> 破损包退换
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 第二行text -->
|
|
|
+ <view class="seconedRow">
|
|
|
+ <view class="specClass">
|
|
|
+ <view style="display: flex;align-items: center;">
|
|
|
+ <text style="color: 666666;">规格</text>
|
|
|
+ <ImageItem class="imgClass" v-for="item in 3" src="/static/points/Group6.png" />
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;align-items: center;">
|
|
|
+ <text style="color: 666666;">已选：白色，大号</text>
|
|
|
+ <ImageItem style="width: 28rpx;height: 28rpx;margin-left: 8rpx;"
|
|
|
+ src="/static/points/Keyboard_arrow_rifht.png" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="arriveAddressClass">
|
|
|
+ <text style="color: 666666;margin-right: 24rpx;">送至</text>
|
|
|
+ <text>山西省太原市万柏林区</text>
|
|
|
+ <ImageItem style="width: 28rpx;height: 28rpx;position: absolute;right: 0;"
|
|
|
+ src="/static/points/Keyboard_arrow_rifht.png" />
|
|
|
+ </view>
|
|
|
+ <view class="seedAddressClass">
|
|
|
+ <text style="color: 666666;margin-right: 24rpx;">发货</text>
|
|
|
+ <text>山西省太原市小店区 | 免运费</text>
|
|
|
+ </view>
|
|
|
+ <view class="promiseSeedTime" style="margin-right: 104rpx;">
|
|
|
+ 下单后48小时内发货
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 第三行商品详情 -->
|
|
|
+ <view class="produceDateil">
|
|
|
+ <view style="font-weight: 800;font-size: 32rpx;color: #333333;">商品详情</view>
|
|
|
+ </view>
|
|
|
+ <!-- 兑换须知 -->
|
|
|
+ <view class="niticeClass">
|
|
|
+ <view class="title">
|
|
|
+ 兑换须知
|
|
|
+ <ImageItem @click="showPopup = true" style="width: 28rpx;height: 28rpx;position: absolute;right: 0;"
|
|
|
+ src="/static/points/Keyboard_arrow_rifht.png" />
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 1、会员可凭上述积分兑换“广誉源会员定制玻璃杯”一个； <br>
|
|
|
+ 2、双层曲线杯身在隔热防烫的同时，让您的手掌体验一次美妙的抓握感； <br>
|
|
|
+ 3、积分兑换商品不支持质量问题外的退换货服务，请您先确认后签收；<br>
|
|
|
+ 4、积分商城仅支持中国大陆地区的兑换邮寄服务，我们将在10个工作日内寄出；<br>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 平台须知 -->
|
|
|
+ <view class="niticeClass">
|
|
|
+ <view class="title">平台说明
|
|
|
+ <span style="position: absolute;right: 24rpx;">
|
|
|
+ <image style="width: 28rpx;height: 28rpx;" @click="clichFun"
|
|
|
+ src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 价格说明：划线价格：商品的专柜价、吊牌价、正品零售价、厂商指导价，并非原价，仅供参考未划线价格：商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动、或会员优惠、积分等发生变化，最终以订单结算页价格为准。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <u-popup :show="showPopup" mode="bottom" @close="showPopup = false" round="20">
|
|
|
+ <view class="popupClass">
|
|
|
+ <view class="niticeClass">
|
|
|
+ <view class="title">
|
|
|
+ 兑换须知
|
|
|
+ <ImageItem @click="showPopup = true" style="width: 28rpx;height: 28rpx;position: absolute;right: 0;"
|
|
|
+ src="/static/points/Keyboard_arrow_rifht.png" />
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 1、会员可凭上述积分兑换“广誉源会员定制玻璃杯”一个； <br>
|
|
|
+ 2、双层曲线杯身在隔热防烫的同时，让您的手掌体验一次美妙的抓握感； <br>
|
|
|
+ 3、积分兑换商品不支持质量问题外的退换货服务，请您先确认后签收；<br>
|
|
|
+ 4、积分商城仅支持中国大陆地区的兑换邮寄服务，我们将在10个工作日内寄出；<br>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="title">平台说明 </view>
|
|
|
+ <view class="text">
|
|
|
+ 价格说明：划线价格：商品的专柜价、吊牌价、正品零售价、厂商指导价，并非原价，仅供参考未划线价格：商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动、或会员优惠、积分等发生变化，最终以订单结算页价格为准。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ImageItem from "@/components/swiper/components/image.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { ImageItem },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isTop: 0,
|
|
|
+ showPopup: false
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(data) {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //console.log("滚动距离为：" + e.scrollTop);
|
|
|
+ this.isTop = e.scrollTop;
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ handleContentScroll(e) {
|
|
|
+ this.isTop = e.detail.scrollTop > 0
|
|
|
+ },
|
|
|
+ clichFun() {
|
|
|
+ console.log('5555')
|
|
|
+ this.showPopup = true
|
|
|
+ },
|
|
|
+
|
|
|
+ //导航栏返回按钮
|
|
|
+ leftClick() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `pages/member/center`
|
|
|
+ })
|
|
|
+ // /let str = uni.$u.queryParams(params);
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: `/packageA/pages/shop/coupon/couponDetail${str}`
|
|
|
+ // });
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.mainImame {
|
|
|
+ height: 456rpx;
|
|
|
+ border: 1px solid red
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ background-color: #F5F8F8;
|
|
|
+ padding: 24rpx 32rpx 0 32rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+
|
|
|
+ .firstRow {
|
|
|
+ background-color: #fff;
|
|
|
+ height: 288rpx;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ padding: 26rpx 24rpx 24rpx 24rpx;
|
|
|
+
|
|
|
+ .priceClass {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #F53E54;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none
|
|
|
+ }
|
|
|
+
|
|
|
+ .deletePriceClass {
|
|
|
+ margin-left: 24rpx;
|
|
|
+ width: 90rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-decoration-line: line-through;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .productName {
|
|
|
+ margin-top: 22rpx;
|
|
|
+ width: 638rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .discribeClass {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ width: 308rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 28rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .serviceClass {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 24rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .seconedRow {
|
|
|
+ height: 284rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 28rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+
|
|
|
+ .specClass {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .imgClass {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background: #D9D9D9;
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .arriveAddressClass {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addressTextClass {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seedAddressClass {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promiseSeedTime {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .produceDateil {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .niticeClass {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ width: 686rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 5;
|
|
|
+ /* 这里控制显示几行 */
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-break: break-all;
|
|
|
+ /* 长数字/英文自动换行 */
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.popupClass {
|
|
|
+ background-color: #F5F8F8;
|
|
|
+ padding: 24rpx 32rpx 0 32rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+
|
|
|
+ .niticeClass {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 28rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ width: 686rpx;
|
|
|
+ margin: 24rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xyh
