<template> <view class="container"> <!-- 消息提醒 --> <u-toast ref="uToast" /> <!-- end --> <view v-if="IsSkelttion"> <easy-skeleton :SkelttionType="SkelttionType"> </easy-skeleton> </view> <!-- 气泡弹窗 --> <view class="" v-else> <!--banner--> <view class="tui-banner-swiper"> <swiper :autoplay="true" style="min-height: 600rpx" :duration="1000" :circular="true" :style="{ height: scrollH + 'px' }" @change="bannerChange" > <block v-for="(item, index) in shopList.picArr" :key="index"> <swiper-item :data-index="index" style="min-height: 600rpx"> <u-image :src="item" :show-error="true" height="650" mode="widthFix" :style="{ minheight: scrollH + 'px' }" duration="450" > <!-- <view slot="error" style="font-size: 24rpx;"></view> --> </u-image> </swiper-item> </block> </swiper> <!-- 弹幕 --> <view class="barrageView"> <swiper :autoplay="true" :interval="3000" vertical="true" :duration="1500" :circular="true" :style="{ height: 45 + 'px' }" > <block v-for="(item, index) in list" :key="index"> <swiper-item :data-index="index"> <view class="barrview"> <image :src="item.avatar" class="barrviewImg"></image> <view class=""> {{ item.address }}{{ item.phone }}已抢购 </view> </view> </swiper-item> </block> </swiper> </view> <!-- 弹幕 --> <view class="tui-banner-tag"> <tui-tag padding="12rpx 18rpx" type="translucent" shape="circleLeft" :scaleMultiple="0.82" originRight >{{ bannerIndex + 1 }}/{{ picArrNum }}</tui-tag > </view> </view> <!--banner--> <!-- 特价标签 --> <view class="tui-pro-detail"> <view class=""> <view class="promBanner"> <view class="bannerContent"> <view class="col1"> <view class="contentse mt12" v-if="shopList.attributeArr != ''" ><span class="mr8" v-for="(item, index) in shopList.attributeArr" >{{ item.name }}</span ></view > <view class="price" ><span class="fz24" style="font-weight: normal">¥</span >{{ shopList.endprice }}<span class="original fz24" >¥{{ shopList.price }}</span ></view > </view> <view> <view class="status"> <view class="txt">正在抢购中</view> </view> </view> </view> </view> <!-- end --> </view> <!-- --> <view class="content"> <view class="baseInfo"> <view class="info"> <view class="name">{{ shopList.title }}</view> <button type="default" open-type="share" class="shareBtn"> <a class="J_ping share" id="anchorShareBtn2" @click="getshare" v-if="isWeiXinID != 1" >分享</a > </button> <view class="desc" v-if="shopList.introduceArr != ''" >推荐理由</view > </view> <view class="comment single-line"> </view> </view> <!-- <van-button plain type="primary">朴素按钮</van-button> --> <view class="rcmdBanner" v-if="shopList.introduceArr != ''"> <view class="angleTop"> <span class="angleContent"></span> </view> <view> <view class="li" v-for="(item, index) in shopList.introduceArr"> <view class="recommendReason"> <view class="key">{{ index + 1 }}</view >{{ item }} </view> </view> </view> </view> </view> <!-- cellView --> <view class="cellView" v-cloak> <view class="zgview"> <image src="" mode="widthFix" ></image> <!-- <img src="../../static/img/zgimg.jpg" /> --> </view> </view> <!-- cellView --> <view class="cellView" v-cloak> <!--已经选择属性 --> <view class="cellsect" @click="showPopup"> <view ><span style="font-weight: bolder; color: #fa3534; margin-right: 8rpx" >已选 </span> {{ skutext }} x {{ num }}</view > <view class="arrow-right"> <u-icon name="arrow-right" color="#999"></u-icon> </view> </view> <!-- <u-cell-item style="font-weight: bolder;color: color:#fa3534;" :title-style="{'color':'#fa3534;'}" title="优惠券" @click="couponShow=true"></u-cell-item> --> <u-cell-item style="font-weight: bolder; color: #333" title="备注偏远地区先联系售后服务>>" @click="tellshow = true" ></u-cell-item> <!-- 限制 --> <!-- <van-cell>限制:该商品不可使用优惠券</van-cell> --> <!-- 服务 --> <view class="Entry"> <view class="left" style="font-weight: bolder; color: #333" >服务：</view > <view class="right"> <view class="right-item-wraper"> <view class="right-item">不享受学生折扣</view> <view class="right-item">免费配送到家</view> </view> <view class="right-item-wraper"> <view class="right-item">30天无忧退换</view> <view class="right-item">不享受活动优惠</view> </view> <view class="right-item-wraper"> <view class="right-item">不可用券/红包</view> <view class="right-item">不享受企业折扣</view> </view> <view class="right-item-wraper"> <view class="right-item">国内部分地区不可配送</view> </view> </view ><i class="icon u-icon u-address-right"></i> </view> </view> <!-- end --> <!-- 评价模块 --> <view class="tui-cmt-box tui-mtop tui-radius-all"> <view class="tui-list-cell tui-last tui-between" v-if="evaluateList.length > 0" > <view class="tui-bold tui-cell-title">用户评价</view> </view> <view class="evaluate" v-if="evaluateList.length > 0" v-cloak> <view class="pjevaluateViews" v-for="(item, index) in evaluateList" :key="index" v-cloak > <view class="mdetail"> <view class="mdrainageEntry"> <header class=""> <view class="left"> <!-- <van-image class="avatar" :src="item.logo"> </van-image> --> <image class="avatar" :src="item.logo"></image> <span class="name">{{ item.name }}</span ><i class="u-icon u-icon-v6"></i> <view class="commentRate"> <u-rate active-color="#ffd21e" v-model="item.rate" ></u-rate> </view> </view> </header> <view class="extraInfo" ><span class="time">{{ item.dates }}</span> <p class="skus">{{ item.sku }}</p> </view> <view class="pjcontent"> <view class="inner">{{ item.content }}</view> </view> <view class="commentPics"> <view class="mcommentPics"> <ul class="uli"> <li class="item-wrap" v-for="(items, index) in item.listimgs" > <view class="itemes"> <img class="uimge" mode="widthFix" @click="getPrevew(items, index)" :src="items" /> <!-- <van-image class="uimge" @click="getPrevew(items,indexs)" :src="items"> </van-image> --> </view> </li> </ul> </view> </view> </view> </view> <!-- <van-image-preview v-model="shoe" :images="item.listimgs" @change="onChange"> <template v-slot:index>第{{ Positionindex }}页</template> </van-image-preview> --> </view> </view> <!-- end --> </view> <!-- 评价模块end --> <!-- /商品详情 --> <view class="evaluate"> <view class="cellsect" @click="showPopup"> <view ><span style="font-weight: bolder; color: #333; margin-right: 5rpx" >商品详情 </span> </view> </view> </view> <!-- /商品参数 --> <view class="dtsection"> <view class="m-attrCon"> <u-parse :html="shopList.details"></u-parse> </view> </view> <!-- end --> <!-- 常见问题 --> <!-- 常见问题问答 --> <view class="mquestion"> <view class="tt"> <view class="line"> </view><span class="text">常见问题</span> </view> <view class="list"> <view class="item"> <p class="qu"> <i class="u-icon u-detail-redNum"></i ><span>购买运费如何收取？</span> </p> <p class="an">全国包邮</p> </view> <view class="item"> <p class="qu"> <i class="u-icon u-detail-redNum"></i ><span>订单如何配送？</span> </p> <p class="an"> 根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。 </p> </view> <view class="item"> <p class="qu"> <i class="u-icon u-detail-redNum"></i ><span>如何申请退换货？</span> </p> <p class="an"> 1.支持无忧退换货的商品，自收到商品之日起在无忧退换货期限内，顾客可申请无忧退换货；食品、定作类商品、贴身衣物、积分兑换等特殊商品，无质量问题不支持退换货；<br />2.如果是退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；<br />3.退货流程：确认收 货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；<br />4.换货流程：确认收货-申请换货-客服审核通过-用户寄回商品-仓库签收验货-客服确认-换货完成；<br />5.质量问题和平台问题退换货运费由商家承担，个人原因退货运费由用户自行承担。上门取件费用由商家统一与快递服务商结算，顾客只需将退换货商品交给上门取件快递员寄回。如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，将以现金券形式为用户报销运费，不接受单方面到付件。 </p> </view> <view class="item"> <p class="qu"> <i class="u-icon u-detail-redNum"></i ><span>食品类商品什么情况下支持退换货？</span> </p> <p class="an"> 1. 为了维护消费者的权益，出售的食品一经售出非质量原因，不予退货，敬请谅解；<br />2. 生鲜食品及部分酒类产品不支持任何形式的拒签，因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，不在赔付范围内；<br />3. 请在签收后，第一时间检查商品。如果商品有腐坏、破损等情况请把商品和快递面单一起拍照并在24小时内联系客服申请理赔，不能提供符合要求的照片或未能在24小时内联系客服，将不予退货退款处理；<br />4. 因喜好不同，要求退货退款者将不予受理。 </p> </view> <view class="item"> <p class="qu"> <i class="u-icon u-detail-redNum"></i ><span>如何开具发票？</span> </p> <p class="an"> 1.请在下单时选择“我要开发票”并填写相关信息。开具增值税专用发票需在下单时填写增票资质信息。温馨提示：请确保增票资质信息与贵司税务登记证信息一致，避免因开票信息错误给贵司带来损失。 <br />2.可选开票内容：<br /> 依照国税总局开票法规，订单开具纸质发票、电子发票，开票内容为明细；礼品卡开票内容为预付卡；增值税专用发票开票内容为明细。 </p> </view> <view class="item"> <p class="qu"> <i class="u-icon u-detail-redNum"></i ><span>关于价格说明？</span> </p> <p class="an"> 1.划线价、指导价：商品展示的划线价或指导价可能是商品制造厂商的零售市场指导价、品牌专柜价、商品吊牌价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。<br />2.活动价：如无特殊说明，促销价是商家在划线价、指导价基础上给予的优惠价格。如有疑问，您可以在购买前与客服联系。 <br />4.会员价：在价的基础上给予不同类型会员用户的优惠价格，仅该类会员用户可以以会员价购买该商品。<br />5.价格异常：因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺利购物。 </p> </view> </view> </view> <!-- end --> </view> <!-- 特价标签end --> <!--底部操作栏--> <view class="tui-operation"> <view class="tui-operation-left tui-col-5"> <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="getIndex" > <u-icon name="home" :size="53"></u-icon> <view class="tui-operation-text tui-scale-small">首页</view> </view> <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="tellshow = true" > <u-icon name="kefu" custom-prefix="custom-icon" :class="[tellshow == true ? 'svg' : '']" ></u-icon> <view class="tui-operation-text tui-scale-small">客服</view> </view> <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" > <u-icon name="shoucanged" custom-prefix="custom-icon" :class="[collecId == 1 ? 'svg' : '']" v-if="collecId == 1" @click="getCollec(0)" ></u-icon> <u-icon name="shoucang" custom-prefix="custom-icon" v-if="collecId == 0" @click="getCollec(1)" ></u-icon> <view class="tui-operation-text tui-scale-small" v-if="collecId == 1" style="position: relative; bottom: 6rpx" @click="getCollec(0)" >{{ collecId == 1 ? "收藏" : "收藏" }}</view > <view class="tui-operation-text tui-scale-small" v-else @click="getCollec(1)" >{{ collecId == 1 ? "收藏" : "收藏" }}</view > <!-- <tui-badge type="red" absolute :scaleRatio="0.8" right="10rpx" top="-4rpx">9</tui-badge> --> </view> </view> <view class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4"> <view class="tui-flex-1" v-if="provider != '' && provider != 'weixin'" > <!-- <tui-button height="68rpx" :size="26" type="warning" shape="circle" @click="submit">去购买</tui-button> --> <!-- <u-button :custom-style="goStyle">去购买</u-button> --> <view class="shopbtn"> 去淘买 </view> </view> <view class="tui-flex-1"> <view class="gbtn" @click="getShop"> 立即购买 </view> <!-- <u-button :custom-style="customStyle">立即购买</u-button> --> <!-- <tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="showPopup">立即购买</tui-button> --> </view> </view> </view> <!--底部操作栏end ---> <!--底部选择层--> <!-- 拨打电话弹窗 --> <view class="tellView" v-if="tellshow"> <u-mask :show="tellshow" style="position: fixed; z-index: 999"> <view class="tellListView" :class="[tellshow == true ? 'tellshowactive' : '']" > <view class="teltextView"> <view class="tellList" v-for="(item, index) in tellList" :key="index" > <view @click="getTell(item, index)" >咨询客服{{ item.name }}：{{ item.tel }}</view > </view> <view class="tellLists" @click="tellshow = false" style="color: #999" @click.stop >取消</view > </view> </view> </u-mask> </view> <!-- 拨打电话弹窗end --> <!-- 选择规格属性 --> <u-popup v-model="popupShow" mode="bottom" :mask-close-able="false" :closeable="true" border-radius="25" width="100%" height="65%" > <view class="tui-popup-box"> <view class="tui-product-box tui-padding"> <image style="width: 200rpx; height: 200rpx" :src="picArrs"></image> <view class="tui-popup-price"> <view class="tui-amount tui-bold">价格：¥{{ moneys }}</view> <view class="tui-number">已选择：</view> <view class="tui-number" ><span class="it">{{ skutext }}</span></view > </view> </view> <scroll-view scroll-y class="tui-popup-scroll"> <view class="tui-scrollview-box"> <view class="tui-bold tui-attr-title">商品规格</view> <view class="tui-attr-box"> <view class="tui-attr-item" v-for="(item, index) in shopList.specslist" :key="index" @click="getActive(item, index)" :class="[item.active == true ? 'active' : '']" > {{ item.specs_name }}</view > </view> <view class="sktitleview"> <span>数量</span> </view> <!-- 输入框 --> <view style="margin-left: 0rpx"> <u-number-box v-model="num" :min="1" :max="10" @change="getnumber" ></u-number-box> </view> <view class="sumbu"> <view class="buttonget" @click="getShop">确认</view> </view> </view> </scroll-view> <view class="tui-right"> <tui-icon name="close-fill" color="#999" :size="20" @click="hidePopup" ></tui-icon> </view> </view> </u-popup> <!-- end --> <!-- 选择规格属性 --> <u-popup v-model="couponShow" mode="bottom" :mask-close-able="false" :closeable="true" border-radius="25" width="100%" height="65%" > <view class="speciatitle-view"> <span class="speciatitle-title">领取优惠券</span> <van-icon class="speciatitle-close" name="cross" @click="specialpup = false" ></van-icon> </view> <view class="specview" v-cloak> <!-- 数据 --> <view class="specList" v-for="(item, index) in shopCopunList" :key="index" > <img class="imglist" src="" /> <view class="imgname"><span>¥</span>{{ item.money }}</view> <view class="imgtypeview"> <view class="imgtitles">{{ item.title }}</view> <view class="imgdesc" v-if="item.dates != ''">{{ item.dates }}</view> </view> <view v-if="item.stats == 0"> <view class="receive" @click="getReceive(item, index)">领取</view> </view> <view v-if="item.stats == 1"> <img class="specslabel" src="" /> </view> </view> </view> </u-popup> <!-- end --> <!--底部选择层--> <u-back-top :scroll-top="scrollTop" :icon-style="iconStyle" :custom-style="bgStyle" icon="arrow-upward" ></u-back-top> </view> </view> </template> <script> import tRtPopup from "@/components/views/t-rt-popup/t-rt-popup"; import tuiTag from "@/components/thorui/tui-tag/tui-tag"; import uRate from "uview-ui/components/u-rate/u-rate"; import easySkeleton from "@/components/skeleton/skeleton.vue"; export default { components: { tRtPopup, tuiTag, uRate, easySkeleton, }, data() { return { couponShow: false, IsSkelttion: true, topShow: false, SkelttionType: "prouct", iconStyle: { fontSize: "32rpx", color: "#fff", }, bgStyle: { "background-color": "rgb(000,000,000,0.4)", }, provider: "", loading: true, evaluateList: [], scrollTop: 0, height: 64, //header高度 top: 100, //标题图标距离顶部距离 scrollH: 0, //滚动总高度 opcity: 0, iconOpcity: 0.5, picArrNum: 0, rbshow: false, // 商品详情数据 shopList: {}, shopCopunList: [], isWeiXinID: 0, listid: 0, itemList: [ { title: "首页", icon: "home", }, { title: "收藏", icon: "star", }, { title: "分享", icon: "partake", }, ], bannerIndex: 0, topMenu: [], popupShow: false, value: 1, collected: false, customStyle: { backgroundColor: "#FF0036!important", color: "#fff!important", fontSize: "13px", border: "0px!important", height: "100%!important", borderRadius: "0px!important", }, goStyle: { backgroundColor: "#FF9500!important", color: "#fff!important", fontSize: "13px", border: "0px!important", height: "100%!important", borderRadius: "0px!important", }, shopList: {}, picArrs: "", indicatorDots: true, autoplay: true, interval: 2000, moneys: 0, duration: 500, show: false, tellshow: false, // 登录弹窗状态 loginshow: false, skushow: false, ppmoney: 0, shopStats: 0, tellList: [ { name: "o文", tel: "176115925648", } ], sendShow: false, num: 1, index: 0, title: "", skutext: "", collecId: 0, // 弹幕 bottom: 120, left: 35, color: "#ffffff", current: 0, mode: "round", msec: 2000, list: [ { id: 1, username: "马修", avatar:"192455.jpg", phone: "135****5612", address: "北京用户", }, ], }; }, onLoad: function (options) { var that = this; console.log("options", options); /**商品详情**/ that.getBase(options.pid); that.shopid = options.pid; let obj = {}; // #ifdef MP-WEIXIN obj = wx.getMenuButtonBoundingClientRect(); // #endif // #ifdef MP-BAIDU obj = swan.getMenuButtonBoundingClientRect(); // #endif // #ifdef MP-ALIPAY my.hideAddToDesktopMenu(); // #endif setTimeout(() => { uni.getSystemInfo({ success: (res) => { this.width = obj.left || res.windowWidth; this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44; this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6; this.scrollH = res.windowWidth; }, }); }, 0); var that = this; uni.getProvider({ service: "oauth", success(res) { console.log("res", res); console.log("res", res.provider[0]); that.provider = res.provider[0]; }, }); /**商品详情**/ wx.getSetting({ sucsess: (res) => { //调用成功的回调函数 if (res.authSetting["scope.userInfo"]) { console.log("111"); } else { //没有授权 console.log("222"); } }, }); }, mounted() { var that = this; // that.articleBase(); // 判断商品是否收藏 that.initShopCollect(); // 获取优惠券 // that.getCoupon(); //调用初始化计算方法 // that.initShop(); // // 初始化验证用户是否登录 // that.getUserStats(1, {}); // that.getCoupon(1); wx.login({ success: function (res) { if (res.code) { //如果调用wx.login后获取到code console.error("res", res); } }, fail: function (res) {}, }); }, methods: { onGetuserinfo(e) { console.error("e", e); }, getUserProfile(e) { // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认 // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.error("res", res); this.setData({ userInfo: res.userInfo, hasUserInfo: true, }); }, }); }, /**拨打电话去**/ getTell(item, index) { // console.log("item",item); var that = this; uni.makePhoneCall({ phoneNumber: item.tel, }); // window.location.href = "tel:" + item.tel; that.tellshow = false; }, /**获取优惠券数据**/ getCoupon(type) { var that = this; var param = { pid: that.shopid, }; var provider; uni.getProvider({ service: "oauth", success: function (res) { provider = res.provider[0]; }, }); var openid = uni.getStorageSync("openid"); if (provider == "weixin") { param.openid = openid; } else if (provider == "alipay") { param.user_id = openid; } uni.request({ url: config.proccoupon, method: "post", data: param, success: (res) => { console.log("res", res); that.shopCopunList = res.data.shopCopunList; }, fail: (err) => { console.log("err", err); that.Toasts("网络异常,请稍后再试~"); }, }); }, /** * 点击收藏 * @params{type}1收藏 0取消 * **/ getCollec(type) { var that = this; var timestamp = Date.parse(new Date()); var param = {}; if (type == 1) { that.collecId = 1; param = { pid: that.shopid, // 1文章 2产品 // type: 2, // 1收藏 0取消 // stats: 1, }; } else { that.collecId = 0; param = { pid: that.shopid, // 1文章 2产品 // type: 2, // 1收藏 0取消 // stats: 0, }; } var provider; uni.getProvider({ service: "oauth", success: function (res) { provider = res.provider[0]; }, }); var openid = uni.getStorageSync("openid"); if (provider == "weixin") { param.openid = openid; } else if (provider == "alipay") { param.user_id = openid; } that.$http("", "POST", param, {}).then((res) => { console.log("数据", res); if (res.code ==200) { if (type == 1) { that.collecId = 1; that.showToast("已收藏~", "primary"); } else { that.showToast("已取消~", "primary"); that.collecId = 0; } } else { that.showToast(res.data.msg, "error"); } }); }, /**评论数据 * pid @param{产品ID} * nums @param{数量} * page @param{页数} * **/ articleBase() { var that = this; var page = 1; var num = 1; uni.request({ url: config.articleUrl + "?pid=" + that.shopid + "&nums=" + num + "&page=" + page, method: "post", data: {}, success: (res) => { if (res.data.code == 0) { var evaluateList = res.data.evaluateList; console.log("评论数据==》", res); for (var i in evaluateList) { evaluateList[i].rate = parseInt(evaluateList[i].rate); } that.evaluateList = evaluateList; } }, fail: (err) => {}, }); }, rtBubble() { this.$refs.rtBubble.toggle(); }, /**点击领取优惠券**/ getReceive(item, index) { console.log(item); var that = this; that.$forceUpdate(); // receivecoupon var param = { coupon_id: item.coupon_id, }; var provider; uni.getProvider({ service: "oauth", success: function (res) { provider = res.provider[0]; }, }); var openid = uni.getStorageSync("openid"); if (provider == "weixin") { param.openid = openid; } else if (provider == "alipay") { param.user_id = openid; } uni.request({ url: config.receivecoupon, method: "post", data: param, success: (res) => { if (res.data.code == 0) { that.shopCopunList[index].stats = 1; } else if (res.data.code == 6) { that.showToast(res.data.msg, "success"); } else { that.showToast(res.data.msg, "error"); } }, fail: (err) => { console.log("err", err); that.showToast("网络异常,请稍后再试~"); }, }); }, topBubble() { console.log("5454545454"); this.show = !this.show; }, itemClick(e) { let text = ["首页", "收藏", "分享"][e.index]; this.tui.toast(`您点击了：${text}`); }, onNavigationBarButtonTap(e) { if (e.index === 0) { this.$refs.rtBubble.toggle(); } }, /** * 回到首页 * @param {Object} e */ getIndex() { uni.navigateBack({}); }, /**加购商品**/ getnumber(e) { console.log(e.value); var that = this; var num = e.value; that.moneys = (that.ppmoney * num).toFixed(2); }, /**用户点击立即购买**/ getShop() { var that = this; var shopList = []; shopList.push({ num: that.num, price: that.ppmoney, moneys: that.moneys, pid: that.shopid, skutext: that.skutext, shopimg: that.picArrs, title: that.title, listid: that.listid, }); console.log("选中的商品->", shopList); uni.navigateTo({ url: "/pages/order/order?shopList=" + JSON.stringify(shopList), }); // this.$refs.uToast.show({ // title: that.num+"价格==>"+that.moneys, // type: 'success' // }) }, /**选中**/ getActive(item, index) { var that = this; var list = that.shopList.specslist; console.log(index); // 判断是否选中 list[index].selected = !list[index].selected; for (var i = 0; i < list.length; i++) { if (i != index) { list[i].active = false; } else { list[i].active = true; that.skutext = list[i].specs_name; that.listid = list[i].id; console.log(list[i]); that.moneys = (list[i].price * that.num).toFixed(2); that.ppmoney = list[i].price; } } this.$forceUpdate(); }, /**商品详情**/ getBase(shopid) { var that = this; var timestamp = Date.parse(new Date()); var that = this; that .$http( "" + "?t=" + timestamp, "POST", { pid: shopid }, {} ) .then((res) => { console.log("数据", res); console.log("获取商品详情数据==>", res); if (res.code == 0) { that.IsSkelttion = false; for (var i in res.detailsRow) { if (res.detailsRow.specslist != "") { res.detailsRow.specslist[0].active = true; } } that.skutext = res.detailsRow.specslist[0].specs_name; var prices = res.detailsRow.endprice; that.moneys = prices.toFixed(2); that.ppmoney = prices.toFixed(2); that.picArrs = res.detailsRow.picArr[0]; that.picArrNum = res.detailsRow.picArr.length; that.shopList = res.detailsRow; that.title = res.detailsRow.title; that.listid = res.detailsRow.specslist[0].id; } else { uni.showToast({ title: "接口异常！", icon: "none", duration: 2000, }); } }); }, /**轮播索引**/ bannerChange: function (e) { this.bannerIndex = e.detail.current; }, /**查询商品是否收藏**/ initShopCollect() { var that = this; var param = { pid: that.shopid, }; var provider; uni.getProvider({ service: "oauth", success: function (res) { provider = res.provider[0]; }, }); var openid = uni.getStorageSync("openid"); if (provider == "weixin") { param.openid = openid; } else if (provider == "alipay") { param.user_id = openid; } var that = this; that.$http("", "POST", param, {}).then((res) => { console.log("是否数据", res.data); if (res.code == 200) { that.collecId = 1; } else { that.collecId = 0; } }); }, /** * 点击轮播查看大图 * @param {Object} e */ previewImage: function (e) { let index = e.currentTarget.dataset.index; uni.previewImage({ current: this.shopList.picArr[index], urls: this.shopList.picArr, }); }, showPopup: function () { console.log("454545"); this.popupShow = true; }, hidePopup: function () { this.popupShow = false; }, btnTopMenu(index) { this.closeMenu(); if (index == 4) { uni.makePhoneCall({ phoneNumber: "10086", }); } else if (index == 6) { // #ifdef MP this.common(); // #endif // #ifndef MP this.onShare(); // #endif } else { let url = { 0: "../message/message", 1: "../mall/mall", 2: "../my/my", 3: "../shopcart/shopcart", 5: "/pages/my/feedback/feedback?page=mall", }[index]; url && this.tui.href(url); } }, submit() { this.popupShow = false; uni.navigateTo({ url: "../submitOrder/submitOrder", }); }, coupon() { uni.navigateTo({ url: "../coupon/coupon", }); }, showToast(msg, type) { this.$refs.uToast.show({ title: msg, type: type, }); }, getshare() { console.log("分享事件"); var that = this; // that.onShareAppMessage(); this.$u.mpShare = { title: "111", // 默认为小程序名称，可自定义 path: "", // 默认为当前页面路径，一般无需修改，QQ小程序不支持 // 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。 // 支持PNG及JPG，默认为当前页面的截图 imageUrl: "", }; return; }, }, // 这里如果写成onShareAppMessage: res => { ... }形式的箭头函数，在内部会无法获得this onShareAppMessage() { var that=this; return { title: that.title, path: "/pages/shopbase/shopbase?pid="+ that.shopid, }; }, onPageScroll(e) { this.scrollTop = e.scrollTop; }, }; </script> <style> @import url("../../static/css/shopbase.css"); @import url("../../static/css/tuibase.css"); @import url("../../static/css/all.css"); @import url("../../static/css/animation.css"); page { background-color: #f7f7f7; } .backTop { position: fixed; width: 60rpx; height: 60rpx; border-radius: 50%; background-color: rgba(000, 000, 000, 0.6); text-align: center; right: 30rpx; bottom: 10%; z-index: 3; line-height: 60rpx; } /* 弹幕 */ .barrageView { position: absolute; top: 100rpx; z-index: 3; left: 30rpx; width: 470rpx; height: 260rpx; } .shareBtn { position: absolute; width: 100rpx; right: 10rpx; height: 80rpx; top: 60rpx; background-color: #fff !important; line-height: 80rpx; border: 0px !important; } .shareBtn::after { border: 0px !important; } /* 优惠券样式 */ .speciatitle-view { position: relative; width: 95%; height: 50px; line-height: 50px; margin: 0 auto; border-bottom: 1px solid #f5f5f5; } .speciatitle-title { position: absolute; left: 0; font-size: 15px; } .speciatitle-close { position: absolute; right: 0; top: 15px; font-size: 22px; color: #777; } .specview { position: relative; width: 100%; height: 85%; margin-top: 9px; overflow: auto; /* padding-bottom: 88px; */ } .specList { position: relative; /* margin-bottom: 15px; */ width: 95%; height: 100px; margin: 0 auto; margin-bottom: 11px; } .specList .imglist { position: relative; width: 100%; height: 100%; } .imgname { position: absolute; left: 20px; z-index: 2; top: 23px; font-size: 38px; color: #dd1a21; } .imgname span { font-size: 13px; } .imgtypeview { position: absolute; z-index: 2; width: 156px; top: 22px; height: 50px; left: 106px; } .imgtitles { position: relative; width: 100%; color: #dd1a21; margin-bottom: 6px; font-size: 15px; text-align: left; display: -webkit-box; overflow: hidden; text-overflow: elipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .imgdesc { position: relative; width: 100%; color: #dd1a21; font-size: 12px; text-align: left; } .receive { position: absolute; /* width: 58px; */ color: #fff; height: 23px; line-height: 23px; text-align: center; z-index: 2; padding: 0px 8px; font-size: 13px; right: 17px; background-color: #dd1a21; top: 26px; border-radius: 30px; } .specslabel { position: absolute; right: 0; bottom: -4px; width: 50px; z-index: 1; transform: rotate(-26deg); height: 51px; overflow: hidden; } .radioShow { font-size: 28px; position: absolute; right: 20px; top: 32px; border-radius: 50%; color: #fff; background: #dd1a21; } .radioNone { font-size: 28px; position: absolute; right: 20px; top: 32px; border-radius: 50%; color: #fff; background: #999; } /* end */ </style>这两个页面用的UI组件库是uView - 多平台快速开发的UI框架 - uni-app UI框架
商品列表瀑布流页面
<template>
<view class="wrap">
<u-button @click="clear">清空列表</u-button>
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<view class="demo-title">
{{item.title}}
</view>
<view class="demo-price">
{{item.price}}元
</view>
<view class="demo-tag">
<view class="demo-tag-owner">
自营
</view>
<view class="demo-tag-text">
放心购
</view>
</view>
<view class="demo-shop">
{{item.shop}}
</view>
<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<view class="demo-title">
{{item.title}}
</view>
<view class="demo-price">
{{item.price}}元
</view>
<view class="demo-tag">
<view class="demo-tag-owner">
自营
</view>
<view class="demo-tag-text">
放心购
</view>
</view>
<view class="demo-shop">
{{item.shop}}
</view>
<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
</view>
</template>
</u-waterfall>
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
</view>
</template>
<script>
export default {
data() {
return {
loadStatus: 'loadmore',
flowList: [],
list: [
{
price: 35,
title: '北国风光，千里冰封，万里雪飘',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
},
{
price: 75,
title: '望长城内外，惟余莽莽',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
},
{
price: 385,
title: '大河上下，顿失滔滔',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
},
{
price: 784,
title: '欲与天公试比高',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
},
{
price: 7891,
title: '须晴日，看红装素裹，分外妖娆',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
},
{
price: 2341,
shop: '李白杜甫白居易旗舰店',
title: '江山如此多娇，引无数英雄竞折腰',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
},
{
price: 661,
shop: '李白杜甫白居易旗舰店',
title: '惜秦皇汉武，略输文采',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
},
{
price: 1654,
title: '唐宗宋祖，稍逊风骚',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 1678,
title: '一代天骄，成吉思汗',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 924,
title: '只识弯弓射大雕',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 8243,
title: '俱往矣，数风流人物，还看今朝',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
]
}
},
onLoad() {
this.addRandomData();
},
onReachBottom() {
this.loadStatus = 'loading';
// 模拟数据加载
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000)
},
methods: {
addRandomData() {
for(let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = JSON.parse(JSON.stringify(this.list[index]))
item.id = this.$u.guid();
this.flowList.push(item);
}
},
remove(id) {
this.$refs.uWaterfall.remove(id);
},
clear() {
this.$refs.uWaterfall.clear();
}
}
}
</script>
<style>
/* page不能写带scope的style标签中，否则无效 */
page {
background-color: rgb(240, 240, 240);
}
</style>
<style lang="scss" scoped>
.demo-warter {
border-radius: 8px;
margin: 5px;
background-color: #ffffff;
padding: 8px;
position: relative;
}
.u-close {
position: absolute;
top: 32rpx;
right: 32rpx;
}
.demo-image {
width: 100%;
border-radius: 4px;
}
.demo-title {
font-size: 30rpx;
margin-top: 5px;
color: $u-main-color;
}
.demo-tag {
display: flex;
margin-top: 5px;
}
.demo-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.demo-tag-text {
border: 1px solid $u-type-primary;
color: $u-type-primary;
margin-left: 10px;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
.demo-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 5px;
}
.demo-shop {
font-size: 22rpx;
color: $u-tips-color;
margin-top: 5px;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
