<template> <block> <view class="info" > <view class="tInfo"> <view class="swWrape"> <swiper> <swiper-item class="iflex icenterY"> <image class="infoimg" :src="info.image"></image> </swiper-item> </swiper> <view class="bannerLength">1/1</view> </view> <view class="infoname"> <view class="infotitle"> <view> <text class="money"> {{ info.sales_price }} </text> <text class="jifen">积分</text> <!-- <text class="g-through">原价: {{info.good_price}}元</text> --> </view> <button class="shareBtn" open-type="share"> <image class="shareImg" src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/c767950ebad9cf6c70452c2994f452f9.png" mode="widthFix"></image> </button> </view> <view class="infocost">{{ info.title }}</view> <!-- <text class="g-describe" wx:if="{{info.good_info}}">{{info.good_info}}</text> --> <!-- <view class="iflex iwrap"> <view class="g-add" wx:if="{{info.Label}}" wx:for="{{info.Label}}" wx:key='index'> <text class="iconfont ico-moon icon-gou " style="color: white"></text> <text class="g-margin">{{item}}</text> </view> </view> --> <view class="g-num">已兑 {{ info.sales }} 份 / 仅剩 {{ info.stock - info.sales }} 份</view> <view class="gbTipWrap iflex"> <!-- <view class="tipItem icenterY"> <image src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/9ea4afd2b2c18539fa5abe6e1d547e9d.png" mode="widthFix"></image> <view>运费: {{ info.freight ? '¥' + info.freight : '免运费' }}</view> </view> --> <view class="tipItem icenterY"> <image src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/9ea4afd2b2c18539fa5abe6e1d547e9d.png" mode="widthFix"></image> <view>不与其他优惠叠加</view> </view> </view> </view> </view> </view> <view class="section"> <view class="sectioninfo"> <view class="nodesTip">商品介绍</view> <view class="width"> <rich-text :nodes="info.desc"></rich-text> </view> </view> <!-- <view class="comment"> <view class="nodesTip">购买须知</view> <view class="xzItem">1.本实物商品无质量问题不支持退换货。</view> <view class="xzItem">2.兑换结果以订单详情为准,可通过“我的兑换”查看订单状态。</view> <view class="xzItem">3. 同城线下兑换商品需持兑换券到实体店进行核销领取。</view> </view> --> <!-- <view class="comment" wx:if="{{nowIndex == 1}}"> --> </view> </view> <view class="foot"></view> <view class="footer iflex"> <view class="footbtn1"> <view class="goBtn1" @tap="toPage1('/pages/index/index')" > <image src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/0e26cf96bbf19ca8d369dc6743323a3c.png"> </image> <view>首页</view> </view> <view class="goBtn1" @tap="toPage" data-url="/pages/intergalShop/logs"> <image src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/2e5635d78681e5adfa44ec2ae5205614.png"> </image> <view>我的兑换</view> </view> </view> <!-- <button open-type="share" class="footbtn g-btn1">商品分享</button> --> <button @tap="duihuan" class="footbtn g-btn2" >马上兑换</button> </view> </view> <!-- 点击退出选择数量规格 --> <view @tap="emptyActive" :class="'fui-mask ' + active"></view> <!-- 选择规格 --> <view :class="'fui-modal2 picker-modal2 ' + slider" v-if="tempname == 'select-picker'"> <view class="option-picker"> <view class="option-picker-inner"> <view class="option-picker-cell goodinfo"> <view class="img"> <image class="thumb" :src="info.image" style="width: 100%; height: 100%"></image> </view> <view class="infoBox"> <view class="info info-price text-danger"> <span> <span class="price"> <text class="money" style="font-size: 36rpx"> {{ info.sales_price }} </text> <text class="jifen">积分</text> </span> </span> </view> <view class="info info-total" style="margin-top: 12rpx;font-weight: 700;"> {{info.title}} </view> </view> <image @tap="emptyActive" mode="widthFix" class="closePicker" src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/25554f20fb99ca391b862bf4a2269642.png"> </image> </view> </view> <view class="footBtn"> <view href="javascript:;" :data-id="info.id" @tap="goDetail" class="confirmbtn">确定兑换</view> </view> </view> </view> </view> </block> </template> <script> var app = getApp(); var running = false; export default { data() { return { id: 0, //弹框 slider: '', active: '', //蒙版层 specsTitle: '', tempname:'', info: { }, }; }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this; console.log(options) this.id = options.id; this.getinfo() }, /** * 生命周期函数--监听页面显示 */ onShow: function() {}, /** * 下拉刷新 */ onPullDownRefresh: function() { this.getinfo(); uni.stopPullDownRefresh(); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, onShareTimeline: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { }, methods: { /** *隐藏 选选数量、规格的 弹框 */ emptyActive: function() { this.active = '', this.slider = 'out' //showPicker: false, }, /** * 选择规格 */ change_sku(t) { let that = this; let idx = t.target.dataset.idx; let sku_name = t.target.dataset.name; let r = that.select_sku; let s = ''; r[idx] = sku_name; that.setData({ select_sku: r }); if (r.length == that.info.sku_val.length) { s = r.toString(); that.info.sku_data.forEach((v, i) => { if (s == v.sku_str) { that.setData({ 'info.price': v.price, 'info.integral': v.integral, 'info.sku_pic': v.img, 'info.kucun': v.kucun, sku_key: i }); } }); } return; }, //点击确定兑换 goDetail() { wx.navigateTo({ url: '/pages/intergalShop/confirm?id='+this.id }) }, changNav(e) { // 切换nav if (this.nowIndex != e.currentTarget.dataset.index) { this.setData({ nowIndex: e.currentTarget.dataset.index }); } }, async getinfo() { // 获取商品详情 let data = await this.$api.request('/product/detail','GET',{ id:this.id }); data.desc = data.desc.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"'); console.log(data) this.info = data; }, toPage(e) { app.globalData.toPage(e); }, toPage1(e) { uni.switchTab({ url:e }) }, duihuan: function() { this.active = 'active' this.slider = 'in' this.tempname = 'select-picker' }, } }; </script> <style> .option-picker .option-picker-cell.option { border-top: 1px solid #eee; } .option-picker .option-picker-cell { padding: 8rpx 20rpx 20rpx 20rpx; } .option-picker .option-picker-cell.option .select .nav { height: auto; width: auto; border: 0; float: left; margin: 16rpx 24rpx 0 0; padding: 4rpx 26rpx; } .option-picker .option-picker-cell.option .title { font-size: 29rpx; height: auto; overflow: hidden; float: left; color: #8f8f8f; margin-top: 32rpx; margin-right: 30rpx; } .option-picker .option-picker-cell.option .select { font-size: 29rpx; color: #666; height: auto; overflow: hidden; } .fui-navbar .confirmbtn { width: 100%; line-height: 90rpx; font-size: 30rpx; height: 100rpx; text-align: center; vertical-align: middle; display: table-cell; position: relative; } .option-picker .option-picker-cell.goodinfo .img { height: 132rpx; width: 132rpx; background: #fff; border: 1px solid #eee; border-radius: 10rpx; /* position: absolute; top: -65rpx; left: 20rpx; */ box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1); } .fui-mask { position: fixed; top: -1000rpx; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 120; display: none; width: 100%; } .option-picker .option-picker-cell.goodinfo .img image { height: 100%; width: 100%; border-radius: 10rpx; } .fui-mask.active { display: block; } .option-picker { height: auto; width: 100%; padding: 12rpx 0 50rpx; z-index: 1001; background: #fff; } .option-picker-inner { background: #fff; /* border-top: 2rpx solid #eee; */ box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1); padding-bottom: 40rpx; } .option-picker .option-picker-cell.goodinfo { /* padding-left: 225rpx; */ position: relative; display: flex; align-items: flex-start; } .option-picker .option-picker-options { margin: 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 600rpx; } .option-picker .option-picker-cell.option { position: relative; } .option-picker .option-picker-cell { padding: 8rpx 20rpx 20rpx 20rpx; } .option-picker .fui-navbar { text-shadow: none; } .fui-modal2 { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; z-index: 1001; } .confirmbtn { width: 674rpx; height: 96rpx; background: #FB4C6F; border-radius: 60rpx; display: flex; align-items: center; justify-content: center; color: #ffffff; margin: 50rpx auto 0; font-size: 35rpx; } .fui-cell-group02 .fui-cell02 { padding-top: 20rpx; } .fui-cell-label { width: 70rpx; margin-left: 22rpx; float: left; color: #8f8f8f; font-size: 29rpx; padding-top: 18rpx; margin-right: 20rpx; } .fui-cell-mask { width: 200rpx; margin-left: 0rpx; float: left; margin-bottom: 0.6rem; } .fui-number { -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 26rpx; margin: 0; height: 60rpx; width: 200rpx; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; border-radius: 16rpx; } .minus, .plus { width: 60rpx; height: 60rpx; font-size: 50rpx; font-weight: bold; color: #5e5e5e; position: relative; text-align: center; line-height: 55rpx; z-index: 99999999; } .fui-number .num { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 40rpx; color: #666; text-align: center; border: 0; width: 80rpx; font-size: 34rpx; } .plus { position: relative; width: 60rpx; background: url('http://ddfwz.sssvip.net/asmce/yigou/plus.png') center center no-repeat; background-size: 40rpx 40rpx; } .minus { position: relative; width: 60rpx; background: url('http://ddfwz.sssvip.net/asmce/yigou/minus.png') center center no-repeat; background-size: 40rpx 40rpx; } .fui-modal2.picker-modal2.in { -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fui-modal2.picker-modal2.out { bottom: -200rpx; -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } page { background: #f7f7f7; } .info { width: 100%; overflow-x: hidden; } .flex3 { display: flex; flex-direction: column; justify-content: center; align-items: center; } .header { width: 750rpx; height: 600rpx; } .swWrape { height: 730rpx; width: 730rpx; position: relative; } swiper { height: 730rpx; width: 730rpx; background: white; border-bottom: 1px solid #ececec; border-radius: 20rpx; } .bannerLength { position: absolute; width: 76rpx; height: 36rpx; background: rgba(0, 0, 0, 0.4); border-radius: 40rpx; color: #fff; font-size: 22rpx; text-align: center; line-height: 36rpx; bottom: 30rpx; right: 20rpx; } .infoimg { width: 100%; border-radius: 20rpx; height: 100%; } .infoname { background-color: white; padding: 16rpx 20rpx 30rpx 30rpx; margin: -10rpx 0 0rpx; border-radius: 0 0 20rpx 20rpx; } .infotitle { display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: white; font-size: 30rpx; letter-spacing: 0; padding-top: 10rpx; margin: 10rpx 0 12rpx; } .sysl { color: #ff5200; font-size: 28rpx; } .infocontent { color: #666; } .infocost { color: #333; font-size: 35rpx; /* margin-top: 10rpx; */ /* border-top: 1px solid #ececec; */ padding: 10rpx 0 10rpx; font-weight: 700; } .money { font-size: 46rpx; color: #FB4C6F; font-weight: bold; } .jifen { font-size: 28rpx; color: #FB4C6F; margin-left: 12rpx; } .g-through { text-decoration: line-through; font-size: 28rpx; color: #666; } .g-num { font-size: 26rpx; color: #000; margin-right: 100rpx; margin-bottom: 30rpx; } .g-describe { color: #ccc; font-size: 24rpx; width: 80%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; margin: 10rpx 0; } .g-add { font-size: 24rpx; color: #666; margin-top: 26rpx; flex-shrink: 0; min-width: 160rpx; } .g-add .iconfont { display: inline-block; background: red; height: 28rpx; width: 28rpx; text-align: center; line-height: 28rpx; border-radius: 50%; margin-right: 12rpx; } .g-navs { position: relative; padding: 34rpx 0 20rpx; } .g-navs text { width: 50%; text-align: center; color: #666; } .g-navs .active { color: #333; font-weight: 500; } .g-underLine { position: absolute; bottom: 0; height: 6rpx; width: 150rpx; background: #ea3f33; left: 0; transition: left 0.5s; } .g-btn1 { background: linear-gradient(to right, #ff7f15, #f64609); color: white; border-radius: 30px 0px 0px 30px; } .g-btn2 { background: #FB4C6F; color: white; width: 203rpx; height: 86rpx; border-radius: 30px; } .g-btn3 { background: grey; color: white; width: 223rpx; height: 86rpx; border-radius: 30px; } .money1 { font-size: 25rpx; margin-left: 20rpx; color: #999; text-decoration: line-through; } .section { /* background-color: white; */ margin: 0 18rpx 30rpx; border-radius: 20rpx; } .sectioninfo { font-size: 28rpx; color: #333; margin-top: 20rpx; padding: 0 20rpx; border-radius: 12rpx; background: #fff; } .foot { width: 100%; height: 120rpx; } .footer { background-color: white; padding: 20rpx; position: fixed; bottom: 0rpx; left: 0rpx; width: 100% ; z-index: 2; color: #666; font-size: 32rpx; justify-content: space-between; } .footbtn { font-size: 30rpx; line-height: 3em; text-align: center; padding: 0; } .footbtn:after { border: none; } .footbtn .shareicon { border-radius: 50%; height: 56rpx; width: 56rpx; line-height: 56rpx; background: #e6e6e6; color: #666; display: inline-block; margin-right: 14rpx; font-size: 32rpx; } .weui-cells { font-size: 30rpx; color: #333; } .weui-cell { padding: 5px 15px; } .weui-label { width: 160rpx; } .fg { width: 8rpx; height: 34rpx; background: #ff5200; margin-top: 5rpx; position: absolute; margin-left: 30rpx; } .details { margin: 30rpx 30rpx 0; } .red { color: red; } .comment { padding: 20rpx; font-size: 28rpx; margin-top: 30rpx; background: #fff; border-radius: 12rpx; } .tuxiang { width: 72rpx; height: 72rpx; border-radius: 50%; margin-left: 20rpx; } .comment_name { font-size: 30rpx; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comment_times { font-size: 22rpx; color: #999999; } .grade { width: 28rpx; height: 28rpx; float: left; margin-left: 5rpx; margin-top: 4px; } .param_content { display: block; margin-top: 16rpx; padding-left: 26rpx; font-size: 26rpx; color: #666; padding-right: 20rpx; } .comment_img { width: 100%; height: 200rpx; } .comment_time_shop { font-size: 24rpx; color: #999; height: 50rpx; position: absolute; right: 10px; margin-top: 19px; } .business_shop { display: block; font-size: 30rpx; color: gray; padding-right: 20rpx; padding-left: 26rpx; background: #e5e5e5; line-height: 31px; width: 90%; border-radius: 6px; } .wxParse-img { width: 100%; padding: 0; } .footbtn1 { display: flex; align-items: center; } .goBtn1 { display: flex; flex-direction: column; align-items: center; } .goBtn1>image { width: 47rpx; height: 47rpx; } .goBtn1>view { font-size: 25rpx; margin-top: 10rpx; color: #000; } .goBtn1:nth-child(1) { margin-left: 20rpx; padding-right: 30rpx; border-right: 1px solid #dcdcdc; } .goBtn1:nth-child(2) { margin-left: 35rpx; } .tInfo { width: 100%; padding: 10rpx 10rpx 0 10rpx; box-sizing: border-box; border-radius: 20rpx; } .gbTipWrap { margin-top: 20rpx; } .tipItem { margin-right: 40rpx; } .tipItem>view { font-size: 22rpx; color: #666; margin-left: 10rpx; } .tipItem>image { width: 24rpx; height: 24rpx; } .shopInfo { padding: 24rpx 24rpx 30rpx 24rpx; margin: 18rpx 20rpx; border-radius: 20rpx; } .shopTop-name { font-size: 28rpx; width: 500rpx; } .shopTop-btn { width: 83rpx; height: 35rpx; display: flex; justify-content: center; align-items: center; color: #fd6000; border: 1px solid #fd6000; border-radius: 30rpx; font-size: 25rpx; } .shopBot { margin-top: 30rpx; } .shopTD { flex: 1; display: flex; flex-direction: column; } .l-shopTime, .l-shopAddress { font-size: 25rpx; color: #666; line-height: 1; } .l-shopAddress { width: 410rpx; margin-top: 18rpx; } .shoploc:first-of-type { max-width: 104rpx; } .shoploc { font-size: 20rpx; color: #999; line-height: 1; } .shoploc image { width: 42rpx; height: 42rpx; margin-bottom: 12rpx; } .shopSu { height: 48rpx; width: 1rpx; background: #999999; margin: 0 38rpx; } .nodesTip { padding: 20rpx 0; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 35rpx; } .nodesTip>view:nth-child(1) { font-size: 35rpx; font-weight: 700; } .nodesTip>view:nth-child(2) { font-size: 25rpx; color: #fd6000; } .xzItem { font-size: 25rpx; color: #333; margin: 0rpx 0 20rpx; } .shareImg { width: 42rpx; } .shareBtn { padding-right: 10rpx; } button::after { border: none; } button { background: #fff; padding: 0; margin: 0; line-height: 1; } button { border-radius: 0; } .button-hover { background: none; } .commentInfWrap { display: flex; align-items: center; margin-top: 24rpx; } .commentTop { height: 88rpx; justify-content: center; margin-left: 21rpx; } .infoBox { margin-left: 20rpx; margin-top: 12rpx; } .closePicker { position: absolute; width: 24rpx; right: 20rpx; top: 20rpx; } .shopPickInfo { box-sizing: border-box; padding: 0 30rpx; margin-top: 12rpx; } .shopPickTip { font-size: 25rpx; color: #333333; } .shopPickAddress { display: flex; align-items: center; justify-content: space-between; margin: 18rpx 0 30rpx; } .shopPickAddressLeft { display: flex; align-items: center; } .shopPickAddressLeft>view { font-size: 25rpx; color: #333333; margin-left: 12rpx; } .shopPickAddressLeft>image { width: 20rpx; } .shopPickAddressRight { width: 30rpx; } .shopPickStatus { width: 182rpx; height: 58rpx; text-align: center; line-height: 58rpx; border-radius: 40rpx; color: #fd6000; background: #fff0e6; font-size: 28rpx; } .iflex { display: flex; } .icentery, .icenterY { display: flex; align-items: center; flex-direction: row; } </style>