|
|
@@ -1,770 +1,1156 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <!-- 轮播图 -->
|
|
|
- <top-swiper :imgList="imgList"></top-swiper>
|
|
|
- <!-- 标题 -->
|
|
|
- <product-content :goodsObjact="goodsObjact" @callf="callf"></product-content>
|
|
|
-
|
|
|
- <!-- 拼货时间及优惠 -->
|
|
|
- <!-- <discounts @clickCoupon="Getcoupon" :Info="goodsObjact.store_info" :showCoupon="true"></discounts> -->
|
|
|
- <!-- 猜你喜欢 -->
|
|
|
- <!-- <guess-like @Addcar='Addcar' @clickNavTo='navToDetailPage' :goodList = 'good_list||[]'></guess-like> -->
|
|
|
- <!-- 评价 -->
|
|
|
- <estimate @navTo="navTo('/pages/product/reply?id=' + goodsid)" v-if="reply" :reply="reply" :list="list"></estimate>
|
|
|
- <!-- 规格信息 -->
|
|
|
- <fresh-detail :goodsObjact="goodsObjact"></fresh-detail>
|
|
|
- <!-- 图文详情 -->
|
|
|
- <content-text :description="description"></content-text>
|
|
|
- <!-- 底部高度撑开 -->
|
|
|
- <view class="contentBottomHeight"></view>
|
|
|
- <!-- 底部操作菜单 -->
|
|
|
- <product-bottom @buy="buy" :goodsObjact="goodsObjact" :goodsid="goodsid" @specOPne="specOPne" :showAdd="showAdd"></product-bottom>
|
|
|
- <!-- 规格-模态层弹窗 -->
|
|
|
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
|
|
|
- <!-- 遮罩层 -->
|
|
|
- <view class="mask"></view>
|
|
|
- <view class="layer attr-content" @click.stop="stopPrevent">
|
|
|
- <view class="a-t">
|
|
|
- <image :src="actionImage"></image>
|
|
|
- <view class="right">
|
|
|
- <text class="name clamp">{{ goodsObjact.store_name }}</text>
|
|
|
- <view class="price">
|
|
|
- <text>¥</text>
|
|
|
- {{ actionPrice * goodsNumber }}
|
|
|
- </view>
|
|
|
- <image src="../../static/icon/del.png" mode="" class="right-img" @click="close()"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-for="(item, index) in specList" :key="index" class="attr-list">
|
|
|
- <text>选择{{ item.attr_name }}分类</text>
|
|
|
- <view class="item-list">
|
|
|
- <text
|
|
|
- v-for="(childItem, childIndex) in item.attr_value"
|
|
|
- :key="childIndex"
|
|
|
- class="tit"
|
|
|
- :class="{ selected: childItem.check }"
|
|
|
- @click="selectSpec(childItem, item, index)"
|
|
|
- >
|
|
|
- {{ childItem.attr }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mun-box">
|
|
|
- <text>购买数量</text>
|
|
|
- <view class="num">
|
|
|
- <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <button class="btn" @click.stop="buy" v-show="buys_show">完成</button>
|
|
|
- <button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mask" v-if="show"><image @click="onTap" src="../../static/img/shareimg.png"></image></view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
|
|
|
-import { goodsDetail, cartAdd, seckillGoods } from '@/api/product.js';
|
|
|
-import { mapState } from 'vuex';
|
|
|
-import store from '@/store/index.js';
|
|
|
-import { saveUrl } from '@/utils/loginUtils.js';
|
|
|
-// #ifdef H5
|
|
|
-import { weixindata } from '@/utils/wxAuthorized';
|
|
|
-// #endif
|
|
|
-// 头部轮播图
|
|
|
-import topSwiper from './common/topSwiper.vue';
|
|
|
-// 标题
|
|
|
-import productContent from './common/productContent.vue';
|
|
|
-// 到货时间及优惠
|
|
|
-import discounts from './common/discounts.vue';
|
|
|
-// 规格信息
|
|
|
-import freshDetail from './common/freshDetail.vue';
|
|
|
-// 图文详情
|
|
|
-import contentText from './common/contentText.vue';
|
|
|
-// 底部按钮
|
|
|
-import productBottom from './common/productBottom.vue';
|
|
|
-// 猜你喜欢
|
|
|
-import guessLike from './common/guessLike.vue';
|
|
|
-// 评价
|
|
|
-import estimate from './common/estimate.vue';
|
|
|
-//增减数量
|
|
|
-import uniNumberBox from '@/components/uni-number-box.vue';
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- guessLike,
|
|
|
- topSwiper,
|
|
|
- productContent,
|
|
|
- discounts,
|
|
|
- freshDetail,
|
|
|
- contentText,
|
|
|
- productBottom,
|
|
|
- estimate,
|
|
|
- uniNumberBox
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- show: false,
|
|
|
- showAdd: true,
|
|
|
- isShare: false,
|
|
|
- goodsStore: 0, //选中库存
|
|
|
- specList: [],
|
|
|
- buys_show: true,
|
|
|
- buys_shows: false,
|
|
|
- specSelected: [], //选中的分类
|
|
|
- specClass: 'none', //显示隐藏弹窗
|
|
|
- many: 1, //1是单规格 2是多规格
|
|
|
- reply: '', //评论
|
|
|
- list: '', //商品详情的数据
|
|
|
- type: 1, //默认支付方式add为
|
|
|
- goodsType: 0,
|
|
|
- goodsNumber: 1, //购买数量
|
|
|
- goodsid: '', //商品id
|
|
|
- description: '', //商品描述
|
|
|
- goodsObjact: {
|
|
|
- percent: 1
|
|
|
- }, //保存商品数据
|
|
|
- //图片循环
|
|
|
- imgList: [],
|
|
|
- // 对比对象
|
|
|
- actionPrice: 0, //默认选中商品价格
|
|
|
- actionImage: '', //默认选中图片
|
|
|
- good_list: '', //猜你喜欢列表
|
|
|
- goodsNumberMax: 0, //最大可购买数量
|
|
|
- // 倒计时数据保存
|
|
|
- seckillObj: {
|
|
|
- stopTime: 0, //结束时间
|
|
|
- stop: false, //是否结束
|
|
|
- stopTimeH: 0, //小时
|
|
|
- stopTimeM: 0, //分钟
|
|
|
- stopTimeS: 0, //秒钟
|
|
|
- stopTimeD: 0, //天
|
|
|
- upTime: 0 //更新组件内部组件用
|
|
|
- },
|
|
|
- // 拼团数据保存
|
|
|
- pink: {
|
|
|
- id: '', //拼团编号
|
|
|
- uid: '', //用户编号
|
|
|
- people: '', //拼团人数
|
|
|
- price: '', //拼团价格
|
|
|
- stop_time: '', //拼团结束时间
|
|
|
- nickname: '', //团长昵称
|
|
|
- avatar: '', //团长头像
|
|
|
- count: '', //拼团剩余人数
|
|
|
- h: '', //时
|
|
|
- i: '', //分
|
|
|
- s: '' //秒
|
|
|
- },
|
|
|
- userInfo: '',
|
|
|
- is_drop: false, //是否上门安装
|
|
|
- showDrop: false //商品是否具有安装属性
|
|
|
- };
|
|
|
- },
|
|
|
- filters: {
|
|
|
- parseIntTo(percent) {
|
|
|
- percent = +percent * 100;
|
|
|
- if (percent % 1 === 0) {
|
|
|
- return percent;
|
|
|
- } else {
|
|
|
- percent = percent.toFixed(1);
|
|
|
- return percent;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- async onLoad(options) {
|
|
|
- let obj = this;
|
|
|
- obj.userInfo = uni.getStorageSync('userInfo');
|
|
|
- //保存商品id
|
|
|
- this.goodsid = options.id;
|
|
|
- if (options.type) {
|
|
|
- this.goodsType = options.type;
|
|
|
- }
|
|
|
- // 判断有无人邀请
|
|
|
- if (options.spread) {
|
|
|
- // 存储邀请人
|
|
|
- uni.setStorageSync('spread', options.spread);
|
|
|
- }
|
|
|
- saveUrl();
|
|
|
- this.goodsDetail();
|
|
|
- // 注册邀请信息
|
|
|
- // #ifdef H5
|
|
|
- let bool = uni.getStorageSync('weichatBrowser') || '';
|
|
|
- if (bool) {
|
|
|
- weixindata();
|
|
|
- }
|
|
|
- // #endif
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['weichatObj', 'baseURL', 'urlFile'])
|
|
|
- },
|
|
|
- // 分享
|
|
|
- onShareAppMessage(options) {
|
|
|
- // 设置菜单中的转发按钮触发转发事件时的转发内容
|
|
|
- let pages = getCurrentPages(); //获取加载的页面
|
|
|
- let currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|
|
- let url = currentPage.route; //当前页面url
|
|
|
- let item = currentPage.options; //如果要获取url中所带的参数可以查看options
|
|
|
- let shareObj = {
|
|
|
- title: this.goodsObjact.store_name + ' 价格：' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
|
|
|
- path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
|
|
|
- imageUrl: this.goodsObjact.image,
|
|
|
- success: function(res) {
|
|
|
- // 转发成功之后的回调
|
|
|
- if (res.errMsg == 'shareAppMessage:ok') {
|
|
|
- }
|
|
|
- },
|
|
|
- fail: function() {
|
|
|
- // 转发失败之后的回调
|
|
|
- if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
- // 用户取消转发
|
|
|
- } else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
- // 转发失败，其中 detail message 为详细失败信息
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- return shareObj;
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //选择是否上门安装
|
|
|
- dropClick(val) {
|
|
|
- if (val == 1) {
|
|
|
- this.is_drop = true;
|
|
|
- } else {
|
|
|
- this.is_drop = false;
|
|
|
- }
|
|
|
- },
|
|
|
- //选择数量
|
|
|
- numberChange(e) {
|
|
|
- console.log(e);
|
|
|
- this.goodsNumber = e.number;
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.specClass = 'none';
|
|
|
- },
|
|
|
- //选择规格
|
|
|
- selectSpec(item, arr, ind) {
|
|
|
- arr.attr_value.forEach(function(e) {
|
|
|
- e.check = false;
|
|
|
- });
|
|
|
- item.check = true;
|
|
|
- let obj = this;
|
|
|
- obj.specSelected[ind] = item.attr;
|
|
|
- let str = obj.specSelected.join(',');
|
|
|
- // 获取当前选中的对象
|
|
|
- if (obj.productValue[str]) {
|
|
|
- obj.buys_show = true;
|
|
|
- obj.buys_shows = false;
|
|
|
- obj.actionPrice = obj.productValue[str].price;
|
|
|
- obj.goodsNumberMax = obj.productValue[str].stock;
|
|
|
- obj.actionImage = obj.productValue[str].image;
|
|
|
- obj.uniqueId = obj.productValue[str].unique;
|
|
|
- obj.goodsStore = obj.productValue[str].stock;
|
|
|
- } else {
|
|
|
- (obj.buys_show = false), (obj.buys_shows = true);
|
|
|
- }
|
|
|
- if (obj.goodsStore == 0) {
|
|
|
- obj.buys_show = false;
|
|
|
- obj.buys_shows = true;
|
|
|
- }
|
|
|
- obj.specSelected[ind] = item.attr;
|
|
|
- },
|
|
|
- // 打開彈窗
|
|
|
- specOPne(type = 1) {
|
|
|
- let obj = this;
|
|
|
- obj.specClass = 'show';
|
|
|
- obj.type = type;
|
|
|
- },
|
|
|
- //规格弹窗开关
|
|
|
- toggleSpec(str) {
|
|
|
- if (this.specClass === 'show') {
|
|
|
- this.specClass = 'hide';
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none';
|
|
|
- }, 250);
|
|
|
- } else if (this.specClass === 'none') {
|
|
|
- this.specClass = 'show';
|
|
|
- }
|
|
|
- // 保存当前购买类型
|
|
|
- this.type = str;
|
|
|
- },
|
|
|
- //领取优惠券
|
|
|
- Getcoupon() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/coupon/getcoupon'
|
|
|
- });
|
|
|
- },
|
|
|
- //详情页
|
|
|
- navToDetailPage(item) {
|
|
|
- let id = item.id;
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/product?id=' + id
|
|
|
- });
|
|
|
- },
|
|
|
- // 跳转页面
|
|
|
- navTo(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/reply?id=' + this.goodsid
|
|
|
- });
|
|
|
- },
|
|
|
- //加入购物车
|
|
|
- Addcar(item) {
|
|
|
- let obj = this;
|
|
|
- cartAdd({
|
|
|
- cartNum: '1', //商品数量
|
|
|
- uniqueId: '', //商品标签
|
|
|
- new: 0, //商品是否新增加到购物车1为不加入0为加入
|
|
|
- mer_id: '',
|
|
|
- productId: item.id //商品编号
|
|
|
- })
|
|
|
- .then(function(e) {
|
|
|
- uni.showToast({
|
|
|
- title: '成功加入购物车',
|
|
|
- type: 'top',
|
|
|
- duration: 500,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
-
|
|
|
- obj.goodsDetail();
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- goodsDetail() {
|
|
|
- let obj = this;
|
|
|
- // 获取普通商品信息
|
|
|
- if (obj.goodsType == 0) {
|
|
|
- goodsDetail({}, this.goodsid).then(function({ data }) {
|
|
|
- obj.list = data;
|
|
|
- console.log(obj.list, '普通商品数据');
|
|
|
- obj.good_list = data.good_list; //保存猜你喜欢列表
|
|
|
- obj.reply = data.reply; //保存评论列表
|
|
|
- let goods = data.storeInfo;
|
|
|
- if (goods.is_drop == 1) {
|
|
|
- obj.showAdd = false;
|
|
|
- obj.showDrop = true;
|
|
|
- obj.is_drop = true;
|
|
|
- }
|
|
|
- obj.goodsObjact = goods;
|
|
|
- if (obj.goodsObjact.description != null) {
|
|
|
- obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
|
|
|
- } //小程序商品详情图超出屏幕问题
|
|
|
- obj.imgList = goods.slider_image; //保存轮播图
|
|
|
- obj.specList = data.productAttr; //保存分类列表
|
|
|
- if (Array.isArray(data.productValue) != true) {
|
|
|
- console.log('开始处理数据');
|
|
|
- obj.many = 2;
|
|
|
- obj.specList = data.productAttr; //保存产品属性
|
|
|
- obj.productValue = data.productValue; //保存属性值
|
|
|
- obj.specSelected = []; //初始化默认选择对象
|
|
|
- for (let i = 0; i < obj.specList.length; i++) {
|
|
|
- console.log('数据处理');
|
|
|
- // 设置默认数据
|
|
|
- const ls = obj.specList[i].attr_value;
|
|
|
- ls[0].check = true;
|
|
|
- obj.specSelected.push(ls[0].attr);
|
|
|
- // console.log('数据处理对象',ls);
|
|
|
- // for (let s = 0; s < ls.length; s++) {
|
|
|
- // console.log(s);
|
|
|
- // console.log('数据处理对象2',ls[s]);
|
|
|
- // if (ls[s].check) {
|
|
|
- // }
|
|
|
- // }
|
|
|
- }
|
|
|
- const str = obj.specSelected.join(','); //保存当前选中的默认对象
|
|
|
- console.log(str, 'str');
|
|
|
- // 设置默认值
|
|
|
- obj.actionPrice = obj.productValue[str].price;
|
|
|
- obj.goodsNumberMax = obj.productValue[str].stock;
|
|
|
- obj.actionImage = obj.productValue[str].image;
|
|
|
- obj.uniqueId = obj.productValue[str].unique;
|
|
|
- obj.goodsStore = obj.productValue[str].stock;
|
|
|
- } else {
|
|
|
- obj.many = 1;
|
|
|
- obj.productValue = data.productValue; //保存分类查询数据
|
|
|
- obj.actionPrice = goods.price; //保存默认选中商品价格
|
|
|
- obj.actionImage = goods.image_base; //保存默认选中商品图片
|
|
|
- obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
|
|
|
- }
|
|
|
- obj.shopId = data.mer_id; //保存商店id
|
|
|
- console.log('数据处理完毕');
|
|
|
- });
|
|
|
- }
|
|
|
- // 获取秒杀商品信息
|
|
|
- if (obj.goodsType == 1) {
|
|
|
- obj.showAdd = false;
|
|
|
- seckillGoods({}, this.goodsid).then(function({ data }) {
|
|
|
- obj.list = data;
|
|
|
- console.log(obj.list, '秒杀商品数据++++++++++');
|
|
|
- obj.reply = data.reply; //保存评论列表
|
|
|
- let goods = data.storeInfo;
|
|
|
- if (goods.is_drop == 1) {
|
|
|
- obj.showDrop = true;
|
|
|
- }
|
|
|
- obj.goodsNumberMax = goods.num;
|
|
|
- console.log(obj.seckillObj, '数据');
|
|
|
- obj.goodsObjact = goods;
|
|
|
- if (obj.goodsObjact.description != null) {
|
|
|
- obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
|
|
|
- } //小程序商品详情图超出屏幕问题
|
|
|
- obj.imgList = goods.images; //保存轮播图
|
|
|
- obj.specList = data.productAttr; //保存分类列表
|
|
|
- if (Array.isArray(data.productValue) != true) {
|
|
|
- console.log('多规格+++++++++++++');
|
|
|
- obj.many = 2;
|
|
|
- obj.specList = data.productAttr; //保存产品属性
|
|
|
- obj.productValue = data.productValue; //保存属性值
|
|
|
- obj.specSelected = []; //初始化默认选择对象
|
|
|
- for (let i = 0; i < obj.specList.length; i++) {
|
|
|
- // 设置默认数据
|
|
|
- let attrValue = obj.specList[i].attr_value[0];
|
|
|
- attrValue.check = true;
|
|
|
- obj.specSelected.push(attrValue.attr);
|
|
|
- }
|
|
|
- let str = obj.specSelected.join(',');
|
|
|
- console.log(str, 'str');
|
|
|
- // 设置默认值
|
|
|
- obj.actionPrice = obj.productValue[str].price;
|
|
|
- // obj.goodsNumberMax = obj.productValue[str].quota;
|
|
|
- // console.log(obj.goodsNumberMax,'obj.goodsNumberMax++++++++++++')
|
|
|
- obj.actionImage = obj.productValue[str].image;
|
|
|
- obj.uniqueId = obj.productValue[str].unique;
|
|
|
- obj.goodsStore = obj.productValue[str].stock;
|
|
|
- } else {
|
|
|
- console.log('单规格+++++++++++++');
|
|
|
- obj.many = 1;
|
|
|
- obj.productValue = data.productValue; //保存分类查询数据
|
|
|
- obj.actionPrice = goods.price; //保存默认选中商品价格
|
|
|
- obj.actionImage = goods.image_base; //保存默认选中商品图片
|
|
|
- // obj.goodsNumberMax = goods.quota; //保存默认选中最大可购买商品数量
|
|
|
- console.log(obj.goodsNumberMax, 'obj.goodsNumberMax---------------');
|
|
|
- obj.shopId = data.mer_id; //保存商店id
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 立即购买
|
|
|
- buy() {
|
|
|
- let obj = this;
|
|
|
- // 创建传值对象
|
|
|
- let data = {
|
|
|
- cartNum: obj.goodsNumber, //商品数量
|
|
|
- new: 1,
|
|
|
- productId: obj.goodsid, //商品编号
|
|
|
- uniqueId: obj.uniqueId,
|
|
|
- is_drop: obj.is_drop ? 1 : 0
|
|
|
- };
|
|
|
-
|
|
|
- if (obj.type == 2) {
|
|
|
- data.new = 0;
|
|
|
- }
|
|
|
- cartAdd(data)
|
|
|
- .then(function(e) {
|
|
|
- let da = e.data;
|
|
|
- if (obj.type == 1) {
|
|
|
- // 跳转到支付页
|
|
|
- let a = obj.is_drop ? 1 : 0;
|
|
|
- console.log(a);
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/order/createOrder?id=' + da.cartId + '&isdrop=' + a
|
|
|
- });
|
|
|
- }
|
|
|
- if (obj.type == 2) {
|
|
|
- uni.showToast({
|
|
|
- title: '成功加入购物车',
|
|
|
- type: 'top',
|
|
|
- duration: 2000,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- obj.goodsDetail();
|
|
|
- }
|
|
|
- obj.toggleSpec();
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- // 阻止触发上级事件
|
|
|
- stopPrevent() {},
|
|
|
- callf() {
|
|
|
- console.log('dianj');
|
|
|
- this.show = true;
|
|
|
- },
|
|
|
- onTap() {
|
|
|
- console.log(this.callf);
|
|
|
-
|
|
|
- if (!this.callf) return;
|
|
|
- this.closess();
|
|
|
- },
|
|
|
- closess() {
|
|
|
- this.show = false;
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-/* 弹出层 */
|
|
|
-.popup {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 99;
|
|
|
- &.show {
|
|
|
- display: block;
|
|
|
-
|
|
|
- .mask {
|
|
|
- animation: showPopup 0.2s linear both;
|
|
|
- }
|
|
|
-
|
|
|
- .layer {
|
|
|
- animation: showLayer 0.2s linear both;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.hide {
|
|
|
- .mask {
|
|
|
- animation: hidePopup 0.2s linear both;
|
|
|
- }
|
|
|
-
|
|
|
- .layer {
|
|
|
- animation: hideLayer 0.2s linear both;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.none {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 1;
|
|
|
- background-color: rgba(0, 0, 0, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .layer {
|
|
|
- position: fixed;
|
|
|
- z-index: 99;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- min-height: 20vh;
|
|
|
- border-radius: 10rpx 10rpx 0 0;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .btn {
|
|
|
- height: 66rpx;
|
|
|
- line-height: 66rpx;
|
|
|
- border-radius: 100rpx;
|
|
|
- background: $uni-color-primary;
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: #fff;
|
|
|
- margin: 30rpx auto 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes showPopup {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes hidePopup {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes showLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(120%);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- transform: translateY(0%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes hideLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- transform: translateY(120%);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-/* 规格选择弹窗 */
|
|
|
-.attr-content {
|
|
|
- padding: 25rpx 30rpx;
|
|
|
-
|
|
|
- .a-t {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 170rpx;
|
|
|
- height: 170rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-left: 24rpx;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-base;
|
|
|
- line-height: 42rpx;
|
|
|
- width: 75%;
|
|
|
- position: relative;
|
|
|
- .right-img {
|
|
|
- width: 37rpx;
|
|
|
- height: 37rpx;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 20rpx;
|
|
|
- // background-color: red;
|
|
|
- }
|
|
|
- .price {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- font-size: $font-lg;
|
|
|
- color: $uni-color-primary;
|
|
|
- margin: 10rpx 0rpx;
|
|
|
- font-size: 60rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #ef041f;
|
|
|
- text {
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- width: 350rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- height: 50rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- display: block;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #1d2023;
|
|
|
- }
|
|
|
-
|
|
|
- .selected-text {
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .attr-list {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-base;
|
|
|
- padding-top: 30rpx;
|
|
|
- padding-left: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .item-list {
|
|
|
- padding: 20rpx 0 0;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- text {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: #eee;
|
|
|
- margin-right: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- min-width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-dark;
|
|
|
- }
|
|
|
-
|
|
|
- .selected {
|
|
|
- background: #fceff1;
|
|
|
- color: #f35768;
|
|
|
- border: 1px solid #f35768;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//默认商品底部高度
|
|
|
-.goodsBottom {
|
|
|
- height: 160rpx;
|
|
|
-}
|
|
|
-page {
|
|
|
- background: #f0f0f0;
|
|
|
-}
|
|
|
-//秒杀、拼团底部高度
|
|
|
-.contentBottomHeight {
|
|
|
- background-color: #f8f8f8;
|
|
|
- height: 130rpx;
|
|
|
-}
|
|
|
-//默认商品底部高度
|
|
|
-.goodsBottom {
|
|
|
- height: 160rpx;
|
|
|
-}
|
|
|
-/deep/ .iconenter {
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: #888;
|
|
|
-}
|
|
|
-/deep/ .con_image {
|
|
|
- width: 130rpx;
|
|
|
- height: 130rpx;
|
|
|
- display: inline-block;
|
|
|
- padding: 15rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-/* 商品详情中限制图片大小 */
|
|
|
-/deep/ .rich-img {
|
|
|
- width: 100% !important;
|
|
|
- height: auto;
|
|
|
-}
|
|
|
-.mun-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 999;
|
|
|
- background-color: rgba(0, 0, 0, 0.4);
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
-}
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 轮播图 -->
|
|
|
+ <top-swiper :imgList="imgList"></top-swiper>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="introduce-section" v-if="goodsType == 0">
|
|
|
+ <button class="shareDate" style="border: none;" @click="callf()">
|
|
|
+ <image class="share-img" src="../../static/icon/share.png"></image>
|
|
|
+ </button>
|
|
|
+ <view class="price-box">
|
|
|
+ <text class="price-tip">¥</text>
|
|
|
+ <view class="price">
|
|
|
+ {{ goodsObjact.price }}
|
|
|
+ <text class="m-price">¥{{ goodsObjact.ot_price }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="title clamp2" v-if="goodsObjact.title">{{ goodsObjact.title }}</text>
|
|
|
+ <text class="title clamp2" v-else>{{ goodsObjact.store_name }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="introduce-section" v-if="goodsType == 2">
|
|
|
+ <button class="shareDate" style="border: none;" @click="callf()">
|
|
|
+ <image class="share-img" src="../../static/icon/share.png"></image>
|
|
|
+ </button>
|
|
|
+ <view class="price-box-jf">
|
|
|
+ <!-- <text class="price-tip">¥</text> -->
|
|
|
+ <view class="price">
|
|
|
+ <image src="../../static/icon/jf.png" mode=""></image>
|
|
|
+ <text>{{goodsObjact.integral}}</text><text class="jf">积分</text>
|
|
|
+ <text class="m-price">¥{{ goodsObjact.ot_price }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="title clamp2" v-if="goodsObjact.title">{{ goodsObjact.title }}</text>
|
|
|
+ <text class="title clamp2" v-else>{{ goodsObjact.store_name }}</text>
|
|
|
+ </view>
|
|
|
+ <!-- <product-content :goodsObjact="goodsObjact" v-if="!isSckill "></product-content> -->
|
|
|
+ <view class="good-title " v-if="isSckill">{{ goodsObjact.title }}</view>
|
|
|
+ <!-- 兑换说明 -->
|
|
|
+ <view class="dhsm" v-if="goodsType == 2">
|
|
|
+ <view class="title">
|
|
|
+ 兑换说明
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ 兑换说明详细介绍兑换说明详细介绍兑换兑换说明详细介绍兑换说明详细介绍兑换兑换说明详细介绍兑换说明
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 评价 -->
|
|
|
+ <estimate @navTo="navTo('/pages/product/reply?id=' + goodsObjact.product_id)" v-if="reply" :reply="reply"
|
|
|
+ :list="list"></estimate>
|
|
|
+ <!-- 规格信息 -->
|
|
|
+ <!-- <fresh-detail :goodsObjact="goodsObjact"></fresh-detail> -->
|
|
|
+ <!-- 图文详情 -->
|
|
|
+ <content-text :description="description"></content-text>
|
|
|
+ <!-- 底部高度撑开 -->
|
|
|
+ <view class="contentBottomHeight"></view>
|
|
|
+ <!-- 底部操作菜单 -->
|
|
|
+ <product-bottom @buy="buy" :goodsid="goodsid" @specOPne="specOPne" :showAdd="showAdd"></product-bottom>
|
|
|
+ <!-- 规格-模态层弹窗 -->
|
|
|
+ <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
|
|
|
+ <!-- 遮罩层 -->
|
|
|
+ <view class="mask"></view>
|
|
|
+ <view class="layer attr-content" @click.stop="stopPrevent">
|
|
|
+ <view class="a-t">
|
|
|
+ <image :src="actionImage"></image>
|
|
|
+ <view class="right">
|
|
|
+ <text class="name clamp">{{ goodsObjact.store_name }}</text>
|
|
|
+ <view class="price">
|
|
|
+ <text>¥</text>
|
|
|
+ {{ actionPrice * goodsNumber }}
|
|
|
+ </view>
|
|
|
+ <image src="../../static/icon/del.png" mode="" class="right-img" @click="closes()"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-for="(item, index) in specList" :key="index" class="attr-list">
|
|
|
+ <text>选择{{ item.attr_name }}分类</text>
|
|
|
+ <view class="item-list">
|
|
|
+ <text v-for="(childItem, childIndex) in item.attr_value" :key="childIndex" class="tit"
|
|
|
+ :class="{ selected: childItem.check }" @click="selectSpec(childItem, item, index)">
|
|
|
+ {{ childItem.attr }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mun-box">
|
|
|
+ <text>购买数量</text>
|
|
|
+ <view class="num">
|
|
|
+ <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax"
|
|
|
+ @eventChange="numberChange"></uni-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <button class="btn" @click.stop="buy" v-show="buys_show">完成</button>
|
|
|
+ <button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mask" v-if="show">
|
|
|
+ <image @click="onTap" src="../../static/img/shareimg.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ goodsDetail,
|
|
|
+ cartAdd,
|
|
|
+ seckillGoods,
|
|
|
+ getIntegraDetail
|
|
|
+ } from '@/api/product.js';
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+ import store from '@/store/index.js';
|
|
|
+ import {
|
|
|
+ saveUrl
|
|
|
+ } from '@/utils/loginUtils.js';
|
|
|
+ // #ifdef H5
|
|
|
+ import {
|
|
|
+ weixindata
|
|
|
+ } from '@/utils/wxAuthorized';
|
|
|
+ // #endif
|
|
|
+ // 头部轮播图
|
|
|
+ import topSwiper from './common/topSwiper.vue';
|
|
|
+ // 标题
|
|
|
+ import productContent from './common/productContent.vue';
|
|
|
+ // 到货时间及优惠
|
|
|
+ import discounts from './common/discounts.vue';
|
|
|
+ // 规格信息
|
|
|
+ import freshDetail from './common/freshDetail.vue';
|
|
|
+ // 图文详情
|
|
|
+ import contentText from './common/contentText.vue';
|
|
|
+ // 底部按钮
|
|
|
+ import productBottom from './common/productBottom.vue';
|
|
|
+ // 猜你喜欢
|
|
|
+ import guessLike from './common/guessLike.vue';
|
|
|
+ // 评价
|
|
|
+ import estimate from './common/estimate.vue';
|
|
|
+ import {
|
|
|
+ timeComputed
|
|
|
+ } from '@/utils/rocessor.js';
|
|
|
+ import uniNumberBox from '@/components/uni-number-box.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ guessLike,
|
|
|
+ topSwiper,
|
|
|
+ productContent,
|
|
|
+ discounts,
|
|
|
+ freshDetail,
|
|
|
+ contentText,
|
|
|
+ productBottom,
|
|
|
+ estimate,
|
|
|
+ uniNumberBox
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showAdd: true, //是否显示加入购物车
|
|
|
+ show: false,
|
|
|
+ isSckill: false, //是否为秒杀
|
|
|
+ goodsStore: 0, //选中库存
|
|
|
+ specList: [],
|
|
|
+ buys_show: true,
|
|
|
+ buys_shows: false,
|
|
|
+ specSelected: [], //选中的分类
|
|
|
+ specClass: 'none', //显示隐藏弹窗
|
|
|
+ many: 1, //1是单规格 2是多规格
|
|
|
+ reply: '', //评论
|
|
|
+ list: '', //商品详情的数据
|
|
|
+ type: 1, //默认支付方式add为
|
|
|
+ goodsType: 0, //商品类型 0：普通，1：秒杀 ，2：积分
|
|
|
+ goodsNumber: 1, //购买数量
|
|
|
+ goodsid: '', //商品id
|
|
|
+ description: '', //商品描述
|
|
|
+ goodsObjact: {
|
|
|
+ percent: 1
|
|
|
+ }, //保存商品数据
|
|
|
+ //图片循环
|
|
|
+ imgList: [],
|
|
|
+ // 对比对象
|
|
|
+ actionPrice: 0, //默认选中商品价格
|
|
|
+ actionImage: '', //默认选中图片
|
|
|
+ good_list: '', //猜你喜欢列表
|
|
|
+ goodsNumberMax: 0, //最大可购买数量
|
|
|
+ goodsNumberMin: 0, //最小可购买数量
|
|
|
+ // 倒计时数据保存
|
|
|
+ seckillObj: {
|
|
|
+ stopTime: 0, //结束时间
|
|
|
+ stop: false, //是否结束
|
|
|
+ stopTimeH: 0, //小时
|
|
|
+ stopTimeM: 0, //分钟
|
|
|
+ stopTimeS: 0, //秒钟
|
|
|
+ stopTimeD: 0, //天
|
|
|
+ upTime: 0 //更新组件内部组件用
|
|
|
+ },
|
|
|
+ // 拼团数据保存
|
|
|
+ pink: {
|
|
|
+ id: '', //拼团编号
|
|
|
+ uid: '', //用户编号
|
|
|
+ people: '', //拼团人数
|
|
|
+ price: '', //拼团价格
|
|
|
+ stop_time: '', //拼团结束时间
|
|
|
+ nickname: '', //团长昵称
|
|
|
+ avatar: '', //团长头像
|
|
|
+ count: '', //拼团剩余人数
|
|
|
+ h: '', //时
|
|
|
+ i: '', //分
|
|
|
+ s: '' //秒
|
|
|
+ },
|
|
|
+ userInfo: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ parseIntTo(percent) {
|
|
|
+ percent = +percent * 100;
|
|
|
+ if (percent % 1 === 0) {
|
|
|
+ return percent;
|
|
|
+ } else {
|
|
|
+ percent = percent.toFixed(1);
|
|
|
+ return percent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async onLoad(options) {
|
|
|
+ let obj = this;
|
|
|
+ obj.userInfo = uni.getStorageSync('userInfo');
|
|
|
+ //保存商品id
|
|
|
+ this.goodsid = options.id;
|
|
|
+ this.goodsType = options.type * 1;
|
|
|
+ if (this.goodsType == 2) {
|
|
|
+ this.showAdd = false
|
|
|
+ console.log('不显示', this.showAdd)
|
|
|
+ }
|
|
|
+ console.log(this.goodsType, 'this.goodsTypethis.goodsTypethis.goodsTypethis.goodsType')
|
|
|
+ if (options.type == 1) {
|
|
|
+ obj.isSckill = true
|
|
|
+ }
|
|
|
+ // 判断有无人邀请
|
|
|
+ if (options.spread) {
|
|
|
+ // 存储邀请人
|
|
|
+ uni.setStorageSync('spread', options.spread);
|
|
|
+ }
|
|
|
+ saveUrl();
|
|
|
+ this.goodsDetail();
|
|
|
+ // 注册邀请信息
|
|
|
+ // #ifdef H5
|
|
|
+ let bool = uni.getStorageSync('weichatBrowser') || '';
|
|
|
+ if (bool) {
|
|
|
+ weixindata();
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['weichatObj', 'baseURL', 'urlFile'])
|
|
|
+ },
|
|
|
+ // 分享
|
|
|
+ onShareAppMessage(options) {
|
|
|
+ // 设置菜单中的转发按钮触发转发事件时的转发内容
|
|
|
+ let pages = getCurrentPages(); //获取加载的页面
|
|
|
+ let currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|
|
+ let url = currentPage.route; //当前页面url
|
|
|
+ let item = currentPage.options; //如果要获取url中所带的参数可以查看options
|
|
|
+ let shareObj = {
|
|
|
+ title: this.goodsObjact.store_name + ' 价格：' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
|
|
|
+ path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
|
|
|
+ imageUrl: this.goodsObjact.image,
|
|
|
+ success: function(res) {
|
|
|
+ // 转发成功之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:ok') {}
|
|
|
+ },
|
|
|
+ fail: function() {
|
|
|
+ // 转发失败之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
+ // 用户取消转发
|
|
|
+ } else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
+ // 转发失败，其中 detail message 为详细失败信息
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return shareObj;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //选择规格
|
|
|
+ selectSpec(item, arr, ind) {
|
|
|
+ arr.attr_value.forEach(function(e) {
|
|
|
+ e.check = false;
|
|
|
+ });
|
|
|
+ item.check = true;
|
|
|
+ let obj = this;
|
|
|
+ obj.specSelected[ind] = item.attr;
|
|
|
+ let str = obj.specSelected.join(',');
|
|
|
+ // 获取当前选中的对象
|
|
|
+ if (obj.productValue[str]) {
|
|
|
+ obj.buys_show = true;
|
|
|
+ obj.buys_shows = false;
|
|
|
+ obj.actionPrice = obj.productValue[str].price;
|
|
|
+ // obj.goodsNumberMax = obj.productValue[str].quota;
|
|
|
+ obj.actionImage = obj.productValue[str].image;
|
|
|
+ obj.uniqueId = obj.productValue[str].unique;
|
|
|
+ obj.goodsStore = obj.productValue[str].stock;
|
|
|
+ } else {
|
|
|
+ (obj.buys_show = false), (obj.buys_shows = true);
|
|
|
+ }
|
|
|
+ if (obj.goodsStore == 0) {
|
|
|
+ obj.buys_show = false;
|
|
|
+ obj.buys_shows = true;
|
|
|
+ }
|
|
|
+ obj.specSelected[ind] = item.attr;
|
|
|
+ },
|
|
|
+ // 打開彈窗
|
|
|
+ specOPne(type = 1) {
|
|
|
+ let obj = this;
|
|
|
+ obj.specClass = 'show';
|
|
|
+ obj.type = type
|
|
|
+ },
|
|
|
+ //规格弹窗开关
|
|
|
+ toggleSpec(str) {
|
|
|
+ if (this.specClass === 'show') {
|
|
|
+ this.specClass = 'hide';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.specClass = 'none';
|
|
|
+ }, 250);
|
|
|
+ } else if (this.specClass === 'none') {
|
|
|
+ this.specClass = 'show';
|
|
|
+ }
|
|
|
+ // 保存当前购买类型
|
|
|
+ this.type = str;
|
|
|
+ },
|
|
|
+ //领取优惠券
|
|
|
+ Getcoupon() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/coupon/getcoupon'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //详情页
|
|
|
+ navToDetailPage(item) {
|
|
|
+ let id = item.id;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/product/product?id=' + id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 跳转页面
|
|
|
+ navTo(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //加入购物车
|
|
|
+ Addcar(item) {
|
|
|
+ let obj = this;
|
|
|
+ cartAdd({
|
|
|
+ cartNum: '1', //商品数量
|
|
|
+ uniqueId: '', //商品标签
|
|
|
+ new: 0, //商品是否新增加到购物车1为不加入0为加入
|
|
|
+ mer_id: '',
|
|
|
+ productId: item.id //商品编号
|
|
|
+ })
|
|
|
+ .then(function(e) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '成功加入购物车',
|
|
|
+ type: 'top',
|
|
|
+ duration: 500,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+
|
|
|
+ obj.goodsDetail();
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goodsDetail() {
|
|
|
+ let obj = this;
|
|
|
+ // 获取普通商品信息
|
|
|
+ console.log('获取商品信息++++++++++++++')
|
|
|
+ console.log(obj.goodsType)
|
|
|
+ if (obj.goodsType == 0) {
|
|
|
+ console.log('获取普通商品信息++++++++++++++')
|
|
|
+ goodsDetail({}, this.goodsid).then(function({
|
|
|
+ data
|
|
|
+ }) {
|
|
|
+ obj.list = data;
|
|
|
+ console.log(obj.list, '普通商品数据')
|
|
|
+ obj.good_list = data.good_list; //保存猜你喜欢列表
|
|
|
+ obj.reply = data.reply; //保存评论列表
|
|
|
+ let goods = data.storeInfo;
|
|
|
+ obj.goodsObjact = goods;
|
|
|
+ if (obj.goodsObjact.description != null) {
|
|
|
+ obj.description = obj.goodsObjact.description.replace(/\<img/gi,
|
|
|
+ '<img class="rich-img"');
|
|
|
+ } //小程序商品详情图超出屏幕问题
|
|
|
+ obj.imgList = goods.slider_image; //保存轮播图
|
|
|
+ obj.specList = data.productAttr; //保存分类列表
|
|
|
+ if (Array.isArray(data.productValue) != true) {
|
|
|
+ obj.many = 2;
|
|
|
+ obj.specList = data.productAttr; //保存产品属性
|
|
|
+ obj.productValue = data.productValue; //保存属性值
|
|
|
+ obj.specSelected = []; //初始化默认选择对象
|
|
|
+ for (let i = 0; i < obj.specList.length; i++) {
|
|
|
+ // 设置默认数据
|
|
|
+ let attrValue = obj.specList[i].attr_value[0];
|
|
|
+ attrValue.check = true;
|
|
|
+ obj.specSelected.push(attrValue.attr);
|
|
|
+ }
|
|
|
+ let str = obj.specSelected.join(',');
|
|
|
+ console.log(str, 'str');
|
|
|
+ // 设置默认值
|
|
|
+ obj.actionPrice = obj.productValue[str].price;
|
|
|
+ obj.goodsNumberMax = obj.productValue[str].stock;
|
|
|
+ obj.actionImage = obj.productValue[str].image;
|
|
|
+ obj.uniqueId = obj.productValue[str].unique;
|
|
|
+ obj.goodsStore = obj.productValue[str].stock;
|
|
|
+ } else {
|
|
|
+ obj.many = 1;
|
|
|
+ obj.productValue = data.productValue; //保存分类查询数据
|
|
|
+ obj.actionPrice = goods.price; //保存默认选中商品价格
|
|
|
+ obj.actionImage = goods.image_base; //保存默认选中商品图片
|
|
|
+ obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
|
|
|
+ obj.shopId = data.mer_id; //保存商店id
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (obj.goodsType == 1) {
|
|
|
+ seckillGoods({}, this.goodsid).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ obj.list = data;
|
|
|
+ console.log(obj.list, '秒杀商品数据++++++++++')
|
|
|
+ // obj.good_list = data.good_list; //保存猜你喜欢列表
|
|
|
+ obj.reply = data.reply; //保存评论列表
|
|
|
+ let goods = data.storeInfo;
|
|
|
+ obj.goodsNumberMax = goods.num
|
|
|
+ // console.log('obj.goodsNumberMin+++++++++',obj.goodsNumberMin)
|
|
|
+ const time = timeComputed(goods.stop_time * 1000);
|
|
|
+ obj.seckillObj = {
|
|
|
+ stop: time.tpye, //是否结束
|
|
|
+ stopTimeH: time.hours + time.day * 24, //小时
|
|
|
+ stopTimeM: time.minutes, //分钟
|
|
|
+ stopTimeS: time.seconds, //秒钟
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(obj.seckillObj, '数据');
|
|
|
+ // console.log(obj.seckillObj,'obj.seckillObj++++++++++++++++++++++')
|
|
|
+ obj.goodsObjact = goods;
|
|
|
+ if (obj.goodsObjact.description != null) {
|
|
|
+ obj.description = obj.goodsObjact.description.replace(/\<img/gi,
|
|
|
+ '<img class="rich-img"');
|
|
|
+ } //小程序商品详情图超出屏幕问题
|
|
|
+ obj.imgList = goods.images; //保存轮播图
|
|
|
+ obj.specList = data.productAttr; //保存分类列表
|
|
|
+ if (Array.isArray(data.productValue) != true) {
|
|
|
+ console.log('多规格+++++++++++++')
|
|
|
+ obj.many = 2;
|
|
|
+ obj.specList = data.productAttr; //保存产品属性
|
|
|
+ obj.productValue = data.productValue; //保存属性值
|
|
|
+ obj.specSelected = []; //初始化默认选择对象
|
|
|
+ for (let i = 0; i < obj.specList.length; i++) {
|
|
|
+ // 设置默认数据
|
|
|
+ let attrValue = obj.specList[i].attr_value[0];
|
|
|
+ attrValue.check = true;
|
|
|
+ obj.specSelected.push(attrValue.attr);
|
|
|
+ }
|
|
|
+ let str = obj.specSelected.join(',');
|
|
|
+ console.log(str, 'str');
|
|
|
+ // 设置默认值
|
|
|
+ obj.actionPrice = obj.productValue[str].price;
|
|
|
+ // obj.goodsNumberMax = obj.productValue[str].quota;
|
|
|
+ // console.log(obj.goodsNumberMax,'obj.goodsNumberMax++++++++++++')
|
|
|
+ obj.actionImage = obj.productValue[str].image;
|
|
|
+ obj.uniqueId = obj.productValue[str].unique;
|
|
|
+ obj.goodsStore = obj.productValue[str].stock;
|
|
|
+ } else {
|
|
|
+ console.log('单规格+++++++++++++')
|
|
|
+ obj.many = 1;
|
|
|
+ obj.productValue = data.productValue; //保存分类查询数据
|
|
|
+ obj.actionPrice = goods.price; //保存默认选中商品价格
|
|
|
+ obj.actionImage = goods.image_base; //保存默认选中商品图片
|
|
|
+ // obj.goodsNumberMax = goods.quota; //保存默认选中最大可购买商品数量
|
|
|
+ console.log(obj.goodsNumberMax, 'obj.goodsNumberMax---------------')
|
|
|
+ obj.shopId = data.mer_id; //保存商店id
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (obj.goodsType == 3) {
|
|
|
+ getIntegraDetail({}, this.goodsid).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ obj.list = data;
|
|
|
+ console.log(obj.list, '积分商品数据++++++++++')
|
|
|
+ // obj.good_list = data.good_list; //保存猜你喜欢列表
|
|
|
+ obj.reply = data.reply; //保存评论列表
|
|
|
+ let goods = data.storeInfo;
|
|
|
+ obj.goodsNumberMax = goods.num
|
|
|
+ // console.log('obj.goodsNumberMin+++++++++',obj.goodsNumberMin)
|
|
|
+ // obj.seckillObj = timeComputed( goods.stop_time*1000);
|
|
|
+
|
|
|
+ // console.log(obj.seckillObj,'obj.seckillObj++++++++++++++++++++++')
|
|
|
+ obj.goodsObjact = goods;
|
|
|
+ if (obj.goodsObjact.description != null) {
|
|
|
+ obj.description = obj.goodsObjact.description.replace(/\<img/gi,
|
|
|
+ '<img class="rich-img"');
|
|
|
+ } //小程序商品详情图超出屏幕问题
|
|
|
+ obj.imgList = goods.images; //保存轮播图
|
|
|
+ obj.specList = data.productAttr; //保存分类列表
|
|
|
+ if (Array.isArray(data.productValue) != true) {
|
|
|
+ obj.many = 2;
|
|
|
+ obj.specList = data.productAttr; //保存产品属性
|
|
|
+ obj.productValue = data.productValue; //保存属性值
|
|
|
+ obj.specSelected = []; //初始化默认选择对象
|
|
|
+ for (let i = 0; i < obj.specList.length; i++) {
|
|
|
+ // 设置默认数据
|
|
|
+ let attrValue = obj.specList[i].attr_value[0];
|
|
|
+ attrValue.check = true;
|
|
|
+ obj.specSelected.push(attrValue.attr);
|
|
|
+ }
|
|
|
+ let str = obj.specSelected.join(',');
|
|
|
+ console.log(str, 'str');
|
|
|
+ // 设置默认值
|
|
|
+ obj.actionPrice = obj.productValue[str].price;
|
|
|
+ // obj.goodsNumberMax = obj.productValue[str].quota;
|
|
|
+ // console.log(obj.goodsNumberMax,'obj.goodsNumberMax++++++++++++')
|
|
|
+ obj.actionImage = obj.productValue[str].image;
|
|
|
+ obj.uniqueId = obj.productValue[str].unique;
|
|
|
+ obj.goodsStore = obj.productValue[str].stock;
|
|
|
+ } else {
|
|
|
+ obj.many = 1;
|
|
|
+ obj.productValue = data.productValue; //保存分类查询数据
|
|
|
+ obj.actionPrice = goods.price; //保存默认选中商品价格
|
|
|
+ obj.actionImage = goods.image_base; //保存默认选中商品图片
|
|
|
+ // obj.goodsNumberMax = goods.quota; //保存默认选中最大可购买商品数量
|
|
|
+ console.log(obj.goodsNumberMax, 'obj.goodsNumberMax---------------')
|
|
|
+ obj.shopId = data.mer_id; //保存商店id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 立即购买
|
|
|
+ buy() {
|
|
|
+ let obj = this;
|
|
|
+ // 创建传值对象
|
|
|
+ let data = {
|
|
|
+ productId: obj.goodsid, //商品编号
|
|
|
+ cartNum: obj.goodsNumber, //商品数量
|
|
|
+ uniqueId: obj.uniqueId, //分类编号
|
|
|
+ new: 1,
|
|
|
+ secKillId: '',
|
|
|
+ integralId: '',
|
|
|
+ };
|
|
|
+ console.log(obj.goodsType, 'obj.goodsType77777777777777777777')
|
|
|
+ if (obj.goodsType == 1) {
|
|
|
+ data.secKillId = obj.goodsObjact.id
|
|
|
+ data.new = 1;
|
|
|
+ }
|
|
|
+ if (obj.goodsType == 2) {
|
|
|
+ data.new = 1;
|
|
|
+ data.integralId = obj.goodsObjact.id
|
|
|
+ }
|
|
|
+ cartAdd(data)
|
|
|
+ .then(function(e) {
|
|
|
+ let da = e.data;
|
|
|
+ if (obj.type == 1) {
|
|
|
+ // 跳转到支付页
|
|
|
+ console.log(obj.goodsType, 'this.goodsType456444444444444444')
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/order/createOrder?id=' + da.cartId + '&goodsType=' + obj.goodsType
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (obj.type == 2) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '成功加入购物车',
|
|
|
+ type: 'top',
|
|
|
+ duration: 2000,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ obj.goodsDetail();
|
|
|
+ }
|
|
|
+ obj.toggleSpec()
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 阻止触发上级事件
|
|
|
+ stopPrevent() {},
|
|
|
+ //选择数量
|
|
|
+ numberChange(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.goodsNumber = e.number
|
|
|
+ },
|
|
|
+ callf() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ onTap() {
|
|
|
+ console.log(this.callf);
|
|
|
+
|
|
|
+ if (!this.callf) return;
|
|
|
+ this.close();
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ closes() {
|
|
|
+ this.specClass = 'none';
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ /* 弹出层 */
|
|
|
+ .popup {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ &.show {
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ animation: showPopup 0.2s linear both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer {
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.hide {
|
|
|
+ .mask {
|
|
|
+ animation: hidePopup 0.2s linear both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer {
|
|
|
+ animation: hideLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.none {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 20vh;
|
|
|
+ border-radius: 10rpx 10rpx 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ height: 66rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background: #6EAB4E;
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: #fff;
|
|
|
+ margin: 30rpx auto 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes showPopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes hidePopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes showLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(120%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes hideLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(120%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 规格选择弹窗 */
|
|
|
+ .attr-content {
|
|
|
+ padding: 25rpx 30rpx;
|
|
|
+
|
|
|
+ .a-t {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: $font-color-base;
|
|
|
+ line-height: 42rpx;
|
|
|
+ width: 75%;
|
|
|
+ position: relative;
|
|
|
+ .right-img {
|
|
|
+ width: 37rpx;
|
|
|
+ height: 37rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 20rpx;
|
|
|
+ // background-color: red;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ font-size: $font-lg;
|
|
|
+ color: $uni-color-primary;
|
|
|
+ margin: 10rpx 0rpx;
|
|
|
+ font-size: 60rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ef041f;
|
|
|
+ text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 350rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ height: 50rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: block;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1d2023;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected-text {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .attr-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-base;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-list {
|
|
|
+ padding: 20rpx 0 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #eee;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ min-width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected {
|
|
|
+ background: #fceff1;
|
|
|
+ color: #f35768;
|
|
|
+ border: 1px solid #f35768;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //默认商品底部高度
|
|
|
+ .goodsBottom {
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ page {
|
|
|
+ background: #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ //秒杀、拼团底部高度
|
|
|
+ .contentBottomHeight {
|
|
|
+ height: 130rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ //默认商品底部高度
|
|
|
+ .goodsBottom {
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .iconenter {
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .con_image {
|
|
|
+ width: 130rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 15rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 商品详情中限制图片大小 */
|
|
|
+ /deep/ .rich-img {
|
|
|
+ width: 100% !important;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cho-num {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 83rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 29rpx 24rpx 30rpx 25rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606972;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .refund {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ padding-left: 128rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noRefund {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ padding-left: 128rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 120rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ padding-left: 128rpx;
|
|
|
+
|
|
|
+ &.payColor {
|
|
|
+ color: $color-red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconlocation {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-info {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ padding: 28rpx 24rpx 22rpx 16rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .shop-logo {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ // background-color: red;
|
|
|
+ // overflow: hidden;
|
|
|
+ image {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-base {
|
|
|
+ padding-left: 15rpx;
|
|
|
+ // width: 376rpx;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ .base-name {
|
|
|
+ padding-top: 14rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding-bottom: 16rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-dis {
|
|
|
+ padding-top: 31rpx;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #901b21;
|
|
|
+ // line-height: 140rpx;
|
|
|
+ right: 24rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ padding-right: 5rpx;
|
|
|
+ width: 21rpx;
|
|
|
+ height: 21rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .good-title {
|
|
|
+ background-color: #fff;
|
|
|
+ // height: 142rpx;
|
|
|
+ padding: 24rpx 19rpx 24rpx 34rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .introduce-section {
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ padding: 35rpx 0rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ padding-right: 34rpx;
|
|
|
+
|
|
|
+ .tip-o {
|
|
|
+ color: #ff3334;
|
|
|
+ padding-left: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shareDate {
|
|
|
+ position: absolute;
|
|
|
+ top: 25rpx;
|
|
|
+ right: 10rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #3d3f46;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-img {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ position: relative;
|
|
|
+ top: 5rpx;
|
|
|
+ left: 0;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding-bottom: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-box {
|
|
|
+ width: 260rpx;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ line-height: 10px;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 17rpx;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ top: 3rpx;
|
|
|
+ left: 15rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ height: 64rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #FF0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: $font-lg + 6rpx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ padding-left: 5rpx;
|
|
|
+ color: #b0b0b0;
|
|
|
+ font-size: 22rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-green {
|
|
|
+ color: #2dbd59;
|
|
|
+ font-size: 28rpx !important;
|
|
|
+
|
|
|
+ text {
|
|
|
+ background: #2dbd59;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0rpx 10rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ font-size: 22rpx !important;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .m-price {
|
|
|
+ margin: 0 12rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dhsm {
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 34rpx 104rpx 30rpx 24rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 32rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #8A8A8A;
|
|
|
+ line-height: 38rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box-jf {
|
|
|
+ color: #901b21;
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ height: 64rpx;
|
|
|
+ font-size: 50rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #FF0000;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 30rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jf {
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mun-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
