lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>商品详情-商城-创业帮</title>
    <meta name="keywords" content="商品详情-商城-创业帮">
    <meta name="description" content="商品详情-商城-创业帮">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="apple-mobile-web-app-title" content="商品详情-商城-创业帮">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="./static/css/main.css">
    <style>
      /* 首页*/
      .banner .van-skeleton__title{height:3rem;border-radius:10px;}
      .banner1 .van-skeleton__title{height:5rem;border-radius:15px;}
      .indexicon{margin-top:50px;}
      .indexicon .van-skeleton__content{display:flex; justify-content:space-between;} 
      .indexicon .van-skeleton__content .van-skeleton__row{display:inline-block; width:1.2rem !important; height:1.2rem; margin-top:0 !important; border-radius:50%;}
      /* 商品详情*/
      .mall-skeleton-title .van-skeleton__title{height:9rem;border-radius:15px;}
      .mall-skeleton-text .van-skeleton__title{height:3rem;border-radius:15px;}
      .mall-skeleton .van-skeleton__title{height:10rem;border-radius:15px;}
    </style>
    <style>
      .mall-bottom{padding:0 .3733rem;height:54px;}
      .mall-bottom button{border-radius:999px !important; height:80% !important;}
      .van-sku-actions {padding:8px .3733rem 5px;}
      .van-button--large{height:43.2px !important; border-radius:999px !important;}
    </style>
  </head>
  <body class="bgcfff pt0" style="padding-top:0;">
    <div class="mall-detail" id="app">
      <van-skeleton class="mall-skeleton-title" title :row="0" title-width="100%" :loading="loading" style="margin-top:30px;"></van-skeleton>
      <van-skeleton class="mall-skeleton-text" title :row="0" title-width="100%" :loading="loading" style="margin-top:30px;"></van-skeleton>
      <van-skeleton class="mall-skeleton" title :row="0" title-width="100%" :loading="loading" style="margin-top:30px;"></van-skeleton>
      <div v-if="!loading">
        <van-sticky>
          <van-nav-bar class="user_rank_explan_title user_title_normal" title="商品详情" @click-left="goback" v-if="toptitleisshow" left-arrow>
            <template #left> <img src="./static/images/left.png" alt=""></template>
          </van-nav-bar>
        </van-sticky>
        <div class="mall-detail-img"><img class="fl" style="width:100%;" :src="product.DetailPicPath" fit="cover" v-cloak></div>
        <div class="pb16 pl16 pr16 bb8f7f7f7" v-cloak>
          <div class="f18 c333 b pb6">{{product.ProductName}}</div>
          <div class="f14 c999 pb8">{{product.Details}}</div>
          <div class="f18 more b">￥{{product.Price}}</div>
        </div>
        <div class="pt8 pb6 pl16 pr16">
          <div class="f12 b">商品详情</div>
        </div>
        <div class="mall-detail-c pl16 pr16" v-html="product.Contents"></div>
        <van-goods-action class="mall-bottom">
          <van-goods-action-button class="kxs-btn" type="default" color="#FFD500" style="color:#333;" text="立即购买" @click="onClickButton"></van-goods-action-button>
        </van-goods-action>
        <van-sku class="mall-sku-box" v-if="show" v-model="show" :start-sale-num="minbuycount" :sku="sku" ref="skuBox" :show-add-cart-btn="false" :goods="goods" :goods-id="goodsId" :quota="quota" :quota-used="quotaUsed" :hide-stock="sku.hide_stock" :message-config="messageConfig" :custom-stepper-config="customStepperConfig" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" @sku-selected="onSkuSelected">
          <template #sku-header-extra>
            <div class="sku-title f16 c333 b abs line2">{{product.ProductName}}</div>
          </template>
          <template #sku-header-price><span class="f16 more b">￥{{sku.price | tofixed2}}</span></template>
          <template #sku-messages>
            <div class="f12 c333 tr pr16">合计：<span class="f16 more b">￥{{totalPrice}}</span></div>
          </template>
        </van-sku>
      </div>
    </div> 
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/appfunc.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script src="./static/js/publicfn.js"></script>
    <script>
      function OnStart(){
      	app.getmalldetailinfo();
      };
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
      	el: '#app',
      	data() {
      		return {
      			//- browsernum:'',
      			loading:true,
      			minbuycount:1,
      			toptitleisshow,
      			show: false,
      			sku: {
      				tree: [
      					//- {
      					//-   k: '尺寸', // skuKeyName：规格类目名称
      					//-   k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      					//-   v: [
      					//-     {
      					//-       id: '1', // skuValueId：规格值 id
      					//-       name: 'S', // skuValueName：规格值名称
      					//-     },
      					//-     {
      					//-       id: '2',
      					//-       name: 'M',
      					//-     },
      					//-     {
      					//-       id: '3',
      					//-       name: 'L',
      					//-     },
      					//-     {
      					//-       id: '4',
      					//-       name: 'XL',
      					//-     },
      					//-     {
      					//-       id: '5',
      					//-       name: 'XXL',
      					//-     }
      					//-   ],
      					//-   //- largeImageMode: true, //  是否展示大图模式
      					//- },
      					//- {
      					//-   k: '颜色', // skuKeyName：规格类目名称
      					//-   k_s: 's2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      					//-   v: [
      					//-     {
      					//-       id: '1', // skuValueId：规格值 id
      					//-       name: '黑色', // skuValueName：规格值名称
      					//-       imgUrl: './temp/product1.png', // 规格类目图片，只有第一个规格类目可以定义图片
      					//-       previewImgUrl: './temp/product1.png', // 用于预览显示的规格类目图片
      					//-     },
      					//-     {
      					//-       id: '2',
      					//-       name: '白色',
      					//-       imgUrl: './temp/product2.png',
      					//-       previewImgUrl: './temp/product2.png',
      					//-     },
      					//-     {
      					//-       id: '3',
      					//-       name: '红色',
      					//-       imgUrl: './temp/product3.png',
      					//-       previewImgUrl: './temp/product3.png',
      					//-     }
      					//-   ],
      					//-   //- largeImageMode: true, //  是否展示大图模式
      					//- },
      				],
      				// 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
      				list: [
      					//- {
      					//-   id: 2259, // skuId
      					//-   s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s2: '1', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s3: '2',
      					//-   price: 200, // 价格（单位元）
      					//-   stock_num: 10 // 当前 sku 组合对应的库存
      					//- },
      					//- {
      					//-   id: 22329, // skuId
      					//-   s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s2: '2', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s3: '1',
      					//-   price: 200, // 价格（单位元）
      					//-   stock_num: 110 // 当前 sku 组合对应的库存
      					//- },
      					//- {
      					//-   id: 22329, // skuId
      					//-   s1: '5', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s2: '3', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   price: 200, // 价格（单位元）
      					//-   stock_num: 110 // 当前 sku 组合对应的库存
      					//- },
      					//- {
      					//-   id: 22329, // skuId
      					//-   s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s2: '1', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   price: 200, // 价格（单位元）
      					//-   stock_num: 110 // 当前 sku 组合对应的库存
      					//- },
      					//- {
      					//-   id: 22329, // skuId
      					//-   s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s2: '3', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   price: 200, // 价格（单位元）
      					//-   stock_num: 110 // 当前 sku 组合对应的库存
      					//- },
      					//- {
      					//-   id: 22329, // skuId
      					//-   s1: '3', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s2: '2', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   price: 100, // 价格（单位元）
      					//-   stock_num: 10 // 当前 sku 组合对应的库存
      					//- },
      					//- {
      					//-   id: 22329, // skuId
      					//-   s1: '3', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   s2: '1', // 规格类目 k_s 为 s1 的对应规格值 id
      					//-   price: 100, // 价格（单位元）
      					//-   stock_num: 0 // 当前 sku 组合对应的库存
      					//- }
      				],
      				price: '', // 默认价格（单位元）
      				stock_num: 227, // 商品总库存
      				collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
      				none_sku: false, // 是否无规格商品
      				//- messages: [
      				//-   {
      				//-     // 商品留言
      				//-     datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
      				//-     multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
      				//-     name: '留言', // 留言名称
      				//-     type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
      				//-     required: '1', // 是否必填 '1' 表示必填
      				//-     placeholder: '', // 可选值，占位文本
      				//-     extraDesc: ''  // 可选值，附加描述文案
      				//-   }
      				//- ],
      				hide_stock: true // 是否隐藏剩余库存
      			},
      			goodsId: 1,
      			quota: 0,
      			quotaUsed: 0,
      			goods: {
      				// 默认商品 sku 缩略图
      				picture: './static/images/payment-type-1.png',
      			},
      			messageConfig: {
      				//- // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
      				//- uploadImg: () => {
      				//-   return new Promise((resolve) => {
      				//-     setTimeout(() => resolve('https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
      				//-   });
      				//- },
      				//- // 可选项，自定义图片上传逻辑，使用此选项时，会禁用原生图片选择
      				//- customUpload: () => {
      				//-   return new Promise((resolve) => {
      				//-     setTimeout(() => {
      				//-       resolve('https://img01.yzcdn.cn/vant/leaf.jpg');
      				//-     }, 1000);
      				//-   });
      				//- },
      				//- // 最大上传体积 (MB)
      				//- uploadMaxSize: 3,
      				//- // placeholder 配置
      				//- placeholderMap: {
      				//-   text: 'xxx',
      				//-   tel: 'xxx',
      				//- },
      				//- // 初始留言信息
      				//- // 键：留言 name
      				//- // 值：留言内容
      				//- initialMessages: {
      				//-   留言: '留言信息'
      				//- }
      			},
      			customStepperConfig:{
      				// 自定义限购文案
      				//- quotaText: '每次限购xxx件',
      				// 自定义步进器超过限制时的回调
      				//- handleOverLimit: (data) => {
      				//-   const { action, limitType, quota, quotaUsed, startSaleNum } = data;
      				//-   if (action === 'minus') {
      				//-     vant.Toast(startSaleNum > 1  ? `${startSaleNum}件起售` : '至少选择一件商品');
      				//-   } else if (action === 'plus') {
      				//-     const { LIMIT_TYPE } = vant.Sku.skuConstants;
      
      				//-     if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
      				//-       let msg = `单次限购${quota}件`;
      				//-       if (quotaUsed > 0) msg += `，你已购买${quotaUsed}件`;
      				//-       vant.Toast(msg);
      				//-     } else {
      				//-       vant.Toast('库存不够了');
      				//-     }
      				//-   }
      				//- },
      				// 步进器变化的回调
      				handleStepperChange: currentValue => {
      					const data = this.$refs.skuBox.getSkuData().selectedSkuComb;
      					//- 根据是否有规格匹配单位（基准单位为分，强制更改为元）
      					if(this.sku.none_sku){
      						if(data){
      							this.totalPrice = ((data.price) * currentValue / 100).toFixed(2);
      						}else{
      							this.totalPrice = (this.sku.price * currentValue / 100).toFixed(2);
      						}
      					} else {
      						if(data){
      							this.totalPrice = ((data.price) * currentValue).toFixed(2);
      						}else{
      							this.totalPrice = (this.sku.price * currentValue).toFixed(2);
      						}
      					}
      					this.nowSelectedNum = currentValue;
      				},
      				// 库存
      				stockNum: 10000,
      				// 格式化库存
      				stockFormatter: stockNum => {},
      			},
      			product:{
      			},
      			totalPrice: 0,
      			nowSelectedNum: 0,
      			mallid:0,
      		};
      	},
      	created() {
      		//- this.browsernum = '1.5.0';
      		this.getmalldetailinfo();
      	},
      	methods: {
      		async getmalldetailinfo(){
      			const Id = PublicLib.getCookieInfo('malldetailId');
      			this.mallid = Id;
      			this.goodsId = Number(Id);
      			const res = await getRequest('api/v1/products/detail?t='+Math.random(6),JSON.stringify({Id}));
      			if(res.status !== '1') return tips('获取商品详情失败，请重试！');
      			res.data.DetailPicPath = res.data.DetailPicPath.length === 0 ? './static/images/payment-type-1.png' : res.data.DetailPicPath[0].Photo;
      			if(res.data.NormJson.none_sku){
      				res.data.NormJson.list =[];
      				res.data.NormJson.tree =[];
      			};
      			this.goods.picture = res.data.DetailPicPath;
      			this.product = res.data;
      			this.sku.price = res.data.Price;
      			this.sku = res.data.NormJson;
      			if(this.sku.tree.length !== 0){
      			this.sku.tree.forEach(item=>{
      				item.largeImageMode = false
      			});
      			};
      			//- 起购数量
      				if(this.mallid === '8' || this.mallid === '9' || this.mallid === '10'){
      					this.minbuycount = 1;
      				}else if(this.mallid === '11'){
      					this.minbuycount = 1;
      				}else if(this.mallid === '14'){
      					this.minbuycount = 2;
      				}else if(this.mallid === '20'){
      					this.minbuycount = 2;
      				}else if(this.mallid === '15' || this.mallid === '29'){
      					this.quota = 1;
      				}else if(this.mallid === '27' || this.mallid === '28'){
      					this.quota = 1;
      				};
      			//- 前端限制大小萌主
      			if(this.mallid === '12' || this.mallid === '13'){
      				if(res.data.NormJson.none_sku || res.data.NormJson.list[0].stock_num === 0){
      					this.getmalldetailinfo();
      				};
      			};
      			//- 骨架屏隐藏
      			this.loading = false;
      		},
      		onClickButton() {
      			if(this.mallid === '22'){
      				return tips('名额已满，下期再见！')
      			};
      			this.totalPrice = 0;
      			this.show = true;
      			//- 根据是否有规格进行总价显示判断
      			if(!this.nowSelectedNum){
      				this.totalPrice = this.sku.none_sku ? this.sku.price : 0;
      			};
      			//- 起购价格
      			//- if(this.browsernum !== '1.5.0'){
      			//- 	if(this.mallid === '8' || this.mallid === '9' || this.mallid === '10'){
      			//- 		this.totalPrice = 3 * this.sku.price;
      			//- 	}else if(this.mallid === '11'){
      			//- 		this.totalPrice = 2 * this.sku.price;
      			//- 	};
      			//- };
      			if(this.mallid === '14'){
      				this.totalPrice = 2 * this.sku.price;
      			}else if(this.mallid === '20'){
      				this.totalPrice = 2 * this.sku.price;
      			};
      		},
      		onSkuSelected(skuValue) {
      			console.log(skuValue);
      			if(this.mallid === '20' && this.nowSelectedNum < 2){
      					this.nowSelectedNum = 2;
      			}else{
      					this.nowSelectedNum = 1;
      			}
      			//- if(this.browsernum !== '1.5.0'){
      			//- 	if(this.mallid === '12'){
      			//- 	      this.minbuycount = 1;
      			//- 	      this.quota = 1;
      			//- 	      this.nowSelectedNum = 1;
      			//- 		if(skuValue.selectedSkuComb.price === 300){
      			//- 		    this.minbuycount = 50;
      			//- 		    this.quota = 50;
      			//- 		    this.nowSelectedNum = 50;
      			//- 		}else{
      			//- 		    this.minbuycount = 75;
      			//- 		    this.quota = 75;
      			//- 		    this.nowSelectedNum = 75;
      			//- 		};
      			//- 	}else 
      			//- 	if(this.mallid === '13'){
      			//- 		if(skuValue.selectedSkuComb.price === 300){
      			//- 		    this.minbuycount = 200;
      			//- 		    this.quota = 200;
      			//- 		    this.nowSelectedNum = 200;
      			//- 		}else if(skuValue.selectedSkuComb.price === 200){
      			//- 		    this.minbuycount = 300;
      			//- 		    this.quota = 300;
      			//- 		    this.nowSelectedNum = 300;
      			//- 		}else{
      			//- 		  this.nowSelectedNum = 1;
      			//- 		  setTimeout(() =>{
      			//- 		    this.quota = 1;
      			//- 		  },10)
      			//- 		}
      			//- 	};
      			//- }
      			//- 规格变化后，显示总价
      			const price = skuValue.selectedSkuComb !== null ? skuValue.selectedSkuComb.price: 0;
      			this.sku.price = price;
      			if(this.nowSelectedNum > 0){
      				this.totalPrice = price ? (price * this.nowSelectedNum).toFixed(2) : 0;
      			}else{
      				this.totalPrice = (price).toFixed(2);
      			};
      			setTimeout(()=>{
      				this.quota = 0;
      			},0);
      		},
      		//- 添加购物车（暂时没有该功能）
      		onAddCartClicked(){
      		},
      		//- 点击购买，跳转确认订单
      		onBuyClicked(mallinfo) {
      			console.log(mallinfo)
      			if(this.sku.none_sku){
      				mallinfo.selectedSkuComb.price = mallinfo.selectedSkuComb.price / 100;
      				mallinfo.selectedSkuComb.id = '';
      			}else{
      				mallinfo.selectedNum = this.nowSelectedNum;
      			};
      			//- 清除仓库Id
      			PublicLib.putCookieInfo('warehouseId', '');
      			//- 清除收货地址Id
      			PublicLib.putCookieInfo('addressId', '');
      			PublicLib.putCookieInfo('checkmallInfo', JSON.stringify(mallinfo));
      			if(this.mallid === '10' || this.mallid === '11' || this.mallid === '27' || this.mallid === '28' || this.mallid === '29' || this.mallid === '12' || this.mallid === '13' || this.mallid === '15' || this.mallid === '16' || this.mallid === '26'){
      				PublicLib.Goto({Url:'mall-deal-check-coupon'});
      			}else if(this.mallid === '8' || this.mallid === '9' || this.mallid === '7'){
      				PublicLib.Goto({Url:'mall-deal-check'});
      			}else{
      				PublicLib.Goto({Url:'mall-deal-check-other'});
      			};
      		},
      		goback(){
      			PublicLib.GoBack({Level:1});
      		}
      	}
      });
    </script>
  </body>
</html>