商城

packageA/market/detail.js

@@ -1,161 +1,205 @@
 const _Http = getApp().globalData.http;
 
 import {
-    fileList
+	fileList
 } from "../../utils/FormatTheAttachment";
 
 Page({
-    data: {
-        loading: true
-    },
-    onLoad(options) {
-        if (options.id) this.setData({
-            sa_itemgroupid: options.id,
-            itemno: options.itemno
-        })
-        this.setData({
-            userrole: wx.getStorageSync('userrole')
-        })
-        this.getDetail();
-    },
-    /* 获取详情 */
-    getDetail() {
-        _Http.basic({
-            "id": "20220926142403",
-            "content": {
-                "sa_itemgroupid": this.data.sa_itemgroupid,
-                // itemno: this.data.itemno
-            }
-        }).then(res => {
-            console.log("商品详情", res)
-            if (res.msg != '成功') return wx.showToast({
-                title: res.msg,
-                icon: "none"
-            })
-            if (res.data.length == 0) {
-                wx.showToast({
-                    title: '未查询到商品',
-                    icon: "none",
-                    mask: true
-                })
-                setTimeout(() => {
-                    wx.navigateBack();
-                }, 500)
-                return;
-            }
-            this.handleFiles(res.data[0].attinfos)
-            this.setData({
-                detail: res.data[0],
-                rows: res.data,
-                loading: false
-            })
-        })
-    },
-    /* 预览媒体 */
-    viewMedias(e) {
-        const {
-            index,
-            type
-        } = e.currentTarget.dataset;
-        wx.previewMedia({
-            current: index,
-            sources: type == 'image' ? this.data.files.viewImages : this.data.files.viewVideos,
-        })
-    },
-    /* 处理附件 */
-    handleFiles(arr) {
-        let files = {
-                images: [],
-                viewImages: [],
-                videos: [],
-                viewVideos: [],
-                files: []
-            },
-            list = fileList(arr);
-        list.forEach(v => {
-            switch (v.fileType) {
-                case "video":
-                    files.videos.push(v)
-                    files.viewVideos.push({
-                        url: v.url,
-                        type: "video",
-                        poster: v.subfiles[0].url
-                    })
-                    break;
-                case "image":
-                    files.images.push(v)
-                    files.viewImages.push({
-                        url: v.url,
-                        type: "image"
-                    })
-                    break;
-                default:
-                    files.files.push(v)
-                    break;
-            }
-        });
-        this.setData({
-            files
-        })
-    },
-    /* 切换产品 */
-    changeItemno(e) {
-        const {
-            item
-        } = e.currentTarget.dataset;
-        if (item.itemno == this.data.itemno) return;
-        this.handleFiles(item.attinfos)
-        this.setData({
-            detail: item,
-            itemno: item.itemno
-        })
-    },
-    clickBut() {
-        this.data.detail.tradefield.length >= 2 ? wx.showToast({
-            title: '请选择加入产品领域',
-            icon: "none",
-            duration: 3000
-        }) : this.handleStorage(0);
-    },
-    /* 选择领域 */
-    storage(e) {
-        this.handleStorage(e.detail.value)
-    },
-    handleStorage(index) {
-        let detail = this.data.detail;
-        _Http.basic({
-            "id": 20220924095102,
-            "content": {
-                "sa_brandid": detail.brand, //品牌id
-                "itemid": detail.itemid, //货品id
-                "qty": 1, //数量
-                "itemno": this.data.itemno, //货品编号
-                tradefield: detail.tradefield[index].tradefield
-            },
-        }).then(res => {
-            console.log("加入购物车", res)
-            if (res.msg != '成功') return wx.showToast({
-                title: res.msg,
-                icon: "none"
-            });
-            _Http.basic({
-                "id": 20220927093202,
-                "content": {}
-            }, false).then(res => {
-                console.log("购物车数量", res)
-                getApp().globalData.num = res.data.num;
-                if (this.data.userrole == '经销商') this.selectComponent("#Float").setNum(res.data.num)
-                setTimeout(() => {
-                    wx.showToast({
-                        title: '加入成功',
-                        icon: "none",
-                        icon: "none"
-                    });
-                }, 200);
-            });
-        })
-    },
-    onShow() {
-        if (this.data.userrole == '经销商') this.selectComponent("#Float").setNum(getApp().globalData.num)
-    },
+	data: {
+		loading: true
+	},
+	onLoad(options) {
+		if (options.id) this.setData({
+			sa_itemgroupid: options.id,
+			itemno: options.itemno
+		})
+		this.setData({
+			userrole: wx.getStorageSync('userrole')
+		})
+		this.getDetail();
+	},
+	/* 获取详情 */
+	getDetail() {
+		_Http.basic({
+			"id": "20220926142403",
+			"content": {
+				"sa_itemgroupid": this.data.sa_itemgroupid,
+				// itemno: this.data.itemno
+			}
+		}).then(res => {
+			console.log("商品详情", res)
+			if (res.msg != '成功') return wx.showToast({
+				title: res.msg,
+				icon: "none"
+			})
+			if (res.data.length == 0) {
+				wx.showToast({
+					title: '未查询到商品',
+					icon: "none",
+					mask: true
+				})
+				setTimeout(() => {
+					wx.navigateBack();
+				}, 500)
+				return;
+			}
+			this.handleFiles(res.data[0].attinfos)
+			this.setData({
+				detail: res.data[0],
+				rows: res.data,
+				loading: false
+			})
+		})
+	},
+	/* 预览媒体 */
+	viewMedias(e) {
+		const {
+			index,
+			type
+		} = e.currentTarget.dataset;
+		wx.previewMedia({
+			current: index,
+			sources: type == 'image' ? this.data.files.viewImages : this.data.files.viewVideos,
+		})
+	},
+	/* 处理附件 */
+	handleFiles(arr) {
+		let files = {
+				images: [],
+				viewImages: [],
+				videos: [],
+				viewVideos: [],
+				files: []
+			},
+			list = fileList(arr);
+		list.forEach(v => {
+			switch (v.fileType) {
+				case "video":
+					files.videos.push(v)
+					files.viewVideos.push({
+						url: v.url,
+						type: "video",
+						poster: v.subfiles[0].url
+					})
+					break;
+				case "image":
+					files.images.push(v)
+					files.viewImages.push({
+						url: v.url,
+						type: "image"
+					})
+					break;
+				default:
+					files.files.push(v)
+					break;
+			}
+		});
+		this.setData({
+			files
+		})
+	},
+	/* 切换产品 */
+	changeItemno(e) {
+		const {
+			item
+		} = e.currentTarget.dataset;
+		if (item.itemno == this.data.itemno) return;
+		this.handleFiles(item.attinfos)
+		this.setData({
+			detail: item,
+			itemno: item.itemno
+		})
+	},
+	clickBut() {
+		this.data.detail.tradefield.length >= 2 ? wx.showToast({
+			title: '请选择加入产品领域',
+			icon: "none",
+			duration: 3000
+		}) : this.handleStorage(0);
+	},
+	/* 打开文档 */
+	openDocument(e) {
+		const {
+			item
+		} = e.currentTarget.dataset;
+		console.log(item)
+		wx.showLoading({
+			title: '加载中...',
+			mask: true,
+		})
+		wx.downloadFile({
+			url: item.url,
+			success: function (res) {
+				const filePath = res.tempFilePath
+				wx.openDocument({
+					filePath: filePath,
+					showMenu: true,
+					fileType: item.postfix,
+					success: function (res) {
+						wx.hideLoading();
+						console.log('打开文档成功')
+					},
+					fail(e) {
+						console.log(e)
+						wx.showToast({
+							title: '打开失败',
+							icon: "error",
+							mask: true
+						})
+					}
+				})
+			},
+			fail(e) {
+				console.log(e)
+				wx.showToast({
+					title: '打开失败',
+					icon: "error",
+					mask: true
+				})
+			}
+		})
+
+
+	},
+	/* 选择领域 */
+	storage(e) {
+		this.handleStorage(e.detail.value)
+	},
+	handleStorage(index) {
+		let detail = this.data.detail;
+		_Http.basic({
+			"id": 20220924095102,
+			"content": {
+				"sa_brandid": detail.brand, //品牌id
+				"itemid": detail.itemid, //货品id
+				"qty": 1, //数量
+				"itemno": this.data.itemno, //货品编号
+				tradefield: detail.tradefield[index].tradefield
+			},
+		}).then(res => {
+			console.log("加入购物车", res)
+			if (res.msg != '成功') return wx.showToast({
+				title: res.msg,
+				icon: "none"
+			});
+			_Http.basic({
+				"id": 20220927093202,
+				"content": {}
+			}, false).then(res => {
+				console.log("购物车数量", res)
+				getApp().globalData.num = res.data.num;
+				if (this.data.userrole == '经销商') this.selectComponent("#Float").setNum(res.data.num)
+				setTimeout(() => {
+					wx.showToast({
+						title: '加入成功',
+						icon: "none",
+						icon: "none"
+					});
+				}, 200);
+			});
+		})
+	},
+	onShow() {
+		if (this.data.userrole == '经销商') this.selectComponent("#Float").setNum(getApp().globalData.num)
+	},
 })

packageA/market/detail.json

@@ -1,6 +1,5 @@
 {
   "usingComponents": {
-    "Float": "../shopping/modules/float",
-    "Yl_Files": "/components/Yl_Files/index"
+    "Float": "../shopping/modules/float"
   }
 }

packageA/market/detail.scss

@@ -2,168 +2,183 @@
 
 /* 轮播图 */
 swiper {
-	width: 100vw;
-	height: 464rpx;
+  width: 100vw;
+  height: 464rpx;
 
-	swiper-item {
-		width: 100%;
-		height: 100%;
-	}
+  swiper-item {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 /* 产品介绍 */
 .intr {
-	padding: 20rpx 30rpx;
-	background-color: #fff;
-
-	.title {
-		line-height: 42rpx;
-		font-size: 30rpx;
-		font-family: PingFang SC-Semibold, PingFang SC;
-		font-weight: 600;
-		color: #333333;
-		word-break: break-all;
-
-	}
-
-	.tags {
-		text {
-			display: inline-block;
-			height: 36rpx;
-			line-height: 36rpx;
-			padding: 0 15rpx;
-			background: #E7EEFF;
-			border-radius: 22rpx;
-			font-size: 20rpx;
-			color: #3874F6;
-			margin-right: 8rpx;
-			font-weight: 600;
-		}
-	}
-
-	.offer {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-		width: 100%;
-		height: 50rpx;
-		margin-top: 20rpx;
-
-		.price {
-			font-size: 36rpx;
-			color: #FF3B30;
-		}
-
-		.old-price {
-			font-size: 28rpx;
-			font-family: PingFang SC-Regular, PingFang SC;
-			color: #999999;
-			margin-left: 8rpx;
-			text-decoration-line: line-through;
-		}
-
-		.unit {
-			font-size: 24rpx;
-			color: #333333;
-		}
-	}
-
-	.else {
-		height: 34rpx;
-		line-height: 34rpx;
-		font-size: 24rpx;
-		color: #999999;
-		margin-top: 20rpx;
-
-		text {
-			margin-right: 20rpx;
-		}
-	}
+  padding: 20rpx 30rpx;
+  background-color: #fff;
+
+  .title {
+    line-height: 42rpx;
+    font-size: 30rpx;
+    font-family: PingFang SC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333333;
+    word-break: break-all;
+
+  }
+
+  .tags {
+    text {
+      display: inline-block;
+      height: 36rpx;
+      line-height: 36rpx;
+      padding: 0 15rpx;
+      background: #E7EEFF;
+      border-radius: 22rpx;
+      font-size: 20rpx;
+      color: #3874F6;
+      margin-right: 8rpx;
+      font-weight: 600;
+    }
+  }
+
+  .offer {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    width: 100%;
+    height: 50rpx;
+    margin-top: 20rpx;
+
+    .price {
+      font-size: 36rpx;
+      color: #FF3B30;
+    }
+
+    .old-price {
+      font-size: 28rpx;
+      font-family: PingFang SC-Regular, PingFang SC;
+      color: #999999;
+      margin-left: 8rpx;
+      text-decoration-line: line-through;
+    }
+
+    .unit {
+      font-size: 24rpx;
+      color: #333333;
+    }
+  }
+
+  .else {
+    height: 34rpx;
+    line-height: 34rpx;
+    font-size: 24rpx;
+    color: #999999;
+    margin-top: 20rpx;
+
+    text {
+      margin-right: 20rpx;
+    }
+  }
 
 }
 
 /* 选择产品 */
 .model {
-	width: 100vw;
-	background-color: #fff;
-	padding: 0 0 20rpx 30rpx;
-	box-sizing: border-box;
-	margin-top: 20rpx;
-
-	.label {
-		height: 90rpx;
-		line-height: 90rpx;
-		font-size: 28rpx;
-		font-weight: 600;
-		color: #333333;
-		width: 100%;
-		border-bottom: 1rpx solid #ddd;
-	}
-
-	.product-box {
-		display: flex;
-		flex-wrap: wrap;
-
-		.product {
-			height: 60rpx;
-			line-height: 60rpx;
-			font-size: 28rpx;
-			color: #333333;
-			margin-top: 20rpx;
-			margin-right: 20rpx;
-			padding: 0 20rpx;
-			background: #F4F5F7;
-			border-radius: 16rpx;
-		}
-
-		.active {
-			background: #E7EEFF;
-		}
-	}
+  width: 100vw;
+  background-color: #fff;
+  padding: 0 0 20rpx 30rpx;
+  box-sizing: border-box;
+  margin-top: 20rpx;
+
+  .label {
+    height: 90rpx;
+    line-height: 90rpx;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #333333;
+    width: 100%;
+    border-bottom: 1rpx solid #ddd;
+  }
+
+  .product-box {
+    display: flex;
+    flex-wrap: wrap;
+
+    .product {
+      height: 60rpx;
+      line-height: 60rpx;
+      font-size: 28rpx;
+      color: #333333;
+      margin-top: 20rpx;
+      margin-right: 20rpx;
+      padding: 0 20rpx;
+      background: #F4F5F7;
+      border-radius: 16rpx;
+    }
+
+    .active {
+      background: #E7EEFF;
+    }
+  }
 
 }
 
-
 .tabs {
-	margin-top: 20rpx;
-
-	.tab-box {
-		padding: 20rpx 30rpx;
-		background-color: #fff;
-		border-top: 2rpx solid #CCCCCC;
-		font-size: 28rpx;
-		color: #666666;
-
-		.row {
-			height: 40rpx;
-			line-height: 40rpx;
-			margin-bottom: 20rpx;
-		}
-
-		navigator {
-			color: #3874F6;
-		}
-	}
+  margin-top: 20rpx;
+
+  .tab-box {
+    padding: 20rpx 30rpx;
+    background-color: #fff;
+    border-top: 2rpx solid #CCCCCC;
+    font-size: 28rpx;
+    color: #666666;
+
+    .row {
+      height: 40rpx;
+      line-height: 40rpx;
+      margin-bottom: 20rpx;
+    }
+
+    navigator {
+      color: #3874F6;
+    }
+  }
 }
 
 .footer {
-	display: flex;
-	justify-content: center;
-	position: fixed;
-	bottom: 0;
-	width: 100vw;
-	min-height: 130rpx;
-	background-color: #fff;
-	box-shadow: rgba(0, 0, 0, 0.15) 0px 5rpx 15rpx 0px;
-
-	.but {
-		width: 690rpx;
-		height: 90rpx;
-		background: #FA8C16;
-		border-radius: 16rpx;
-		font-size: 28rpx;
-		font-weight: 600;
-		color: #FFFFFF;
-		margin-top: 10rpx;
-	}
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  bottom: 0;
+  width: 100vw;
+  min-height: 130rpx;
+  background-color: #fff;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 5rpx 15rpx 0px;
+
+  .but {
+    width: 690rpx;
+    height: 90rpx;
+    background: #FA8C16;
+    border-radius: 16rpx;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #FFFFFF;
+    margin-top: 10rpx;
+  }
 }
+
+.document-box {
+  width: 100vw;
+  box-sizing: border-box;
+  padding: 20rpx 30rpx;
+  background-color: #fff;
+
+  .document {
+    word-break: break-all;
+    white-space: pre-wrap;
+    font-size: 28rpx;
+    font-family: PingFang SC-Regular, PingFang SC;
+    color: #3874F6;
+    margin-bottom: 20rpx;
+  }
+}

packageA/market/detail.wxml

@@ -3,77 +3,79 @@
 <template is="skeleton" wx:if="{{loading}}" />
 <!-- 轮播图 -->
 <swiper indicator-dots circular indicator-active-color='#333'>
-	<swiper-item wx:for="{{files.images}}" wx:key="attachmentid" data-index="{{index}}" data-type='image' bindtap="viewMedias">
-		<van-image width="100vw" height="464rpx" fit="cover" src="{{item.cover}}" use-loading-slot use-error-slot lazy-load>
-			<van-loading slot="loading" type="spinner" size="20" vertical />
-			<text slot="error">加载失败</text>
-		</van-image>
-	</swiper-item>
+  <swiper-item wx:for="{{files.images}}" wx:key="attachmentid" data-index="{{index}}" data-type='image' bindtap="viewMedias">
+    <van-image width="100vw" height="464rpx" fit="cover" src="{{item.cover}}" use-loading-slot use-error-slot lazy-load>
+      <van-loading slot="loading" type="spinner" size="20" vertical />
+      <text slot="error">加载失败</text>
+    </van-image>
+  </swiper-item>
 </swiper>
 <!-- 产品介绍 -->
 <view class="intr">
-	<view class="title">
-		{{detail.itemname}}
-	</view>
-	<view class="tags">
-		<text wx:for="{{detail.brand}}" wx:key="sa_brandid">{{item.brandname}}</text>
-		<text wx:for="{{detail.tradefield}}" wx:key="index">{{item.tradefield}}</text>
-	</view>
-	<view class="offer">
-		<view>
-			<text class="price">￥{{detail.gradeprice}}</text>
-			<text class="old-price">￥{{detail.marketprice}}</text>
-		</view>
-		<text class="unit">单位/{{detail.unitname}}</text>
-	</view>
-	<view class="else">
-		<text>起订量：{{detail.orderminqty}}({{detail.unitname}})</text>
-		<text>库存：{{detail.stockstatus}}</text>
-	</view>
+  <view class="title">
+    {{detail.itemname}}
+  </view>
+  <view class="tags">
+    <text wx:for="{{detail.brand}}" wx:key="sa_brandid">{{item.brandname}}</text>
+    <text wx:for="{{detail.tradefield}}" wx:key="index">{{item.tradefield}}</text>
+  </view>
+  <view class="offer">
+    <view>
+      <text class="price">￥{{detail.gradeprice}}</text>
+      <text class="old-price">￥{{detail.marketprice}}</text>
+    </view>
+    <text class="unit">单位/{{detail.unitname}}</text>
+  </view>
+  <view class="else">
+    <text>起订量：{{detail.orderminqty}}({{detail.unitname}})</text>
+    <text>库存：{{detail.stockstatus}}</text>
+  </view>
 </view>
 <!-- 选择型号 -->
 <view class="model" wx:if="{{rows.length}}">
-	<view class="label">
-		选择商品
-	</view>
-	<view class="product-box">
-		<navigator url="#" class="product {{itemno===item.itemno?'active':''}}" wx:for="{{rows}}" wx:key="itemno" bindtap="changeItemno" data-item="{{item}}">{{item.model}}
-		</navigator>
-	</view>
+  <view class="label">
+    选择商品
+  </view>
+  <view class="product-box">
+    <navigator url="#" class="product {{itemno===item.itemno?'active':''}}" wx:for="{{rows}}" wx:key="itemno" bindtap="changeItemno" data-item="{{item}}">{{item.model}}
+    </navigator>
+  </view>
 </view>
 <van-tabs custom-class='tabs' title-active-color='var(--assist)' color='var(--assist)'>
-	<van-tab title="商品简介">
-		<view class="tab-box">
-			<view class="row">
-				商品编号：{{detail.itemno}}
-			</view>
-			<view class="row">
-				规格：{{detail.spec}}
-			</view>
-			<view class="row">
-				型号：{{detail.model}}
-			</view>
-			<view class="row">
-				材质：—
-			</view>
-		</view>
-	</van-tab>
-	<van-tab title="产品资料">
-		<Yl_Files files="{{files}}" />
-		<Yl_Empty wx:if="{{detail.attinfos.length==0}}" />
-	</van-tab>
+  <van-tab title="商品简介">
+    <view class="tab-box">
+      <view class="row">
+        商品编号：{{detail.itemno}}
+      </view>
+      <view class="row">
+        规格：{{detail.spec}}
+      </view>
+      <view class="row">
+        型号：{{detail.model}}
+      </view>
+      <view class="row">
+        材质：—
+      </view>
+    </view>
+  </van-tab>
+  <van-tab title="产品资料">
+    <Yl_Empty wx:if="{{detail.technicalinfo.length==0}}" />
+    <view wx:else class="document-box">
+      <navigator class="document" url="#" wx:for="{{detail.technicalinfo}}" wx:key="index" bindtap="openDocument" data-item="{{item}}">{{item.document}}</navigator>
+    </view>
+  </van-tab>
 </van-tabs>
 
 <block wx:if="{{userrole!='业务员'}}">
-	<!-- 底部 -->
-	<view style="height: 150rpx;" />
-	<view class="footer">
-		<picker wx:if="{{detail.tradefield.length>=2}}" range='{{detail.tradefield}}' range-key='tradefield' bindchange='storage'>
-			<van-button custom-class='but' bindtap="clickBut">加入购物车</van-button>
-		</picker>
-		<van-button wx:else custom-class='but' bindtap="clickBut">加入购物车
-		</van-button>
-	</view>
-	<!-- 购物车按钮 -->
-	<Float id="Float" />
+  <!-- 底部 -->
+  <view style="height: 150rpx;" />
+  <view class="footer">
+    <picker wx:if="{{detail.tradefield.length>=2}}" range='{{detail.tradefield}}' range-key='tradefield' bindchange='storage'>
+      <van-button custom-class='but' bindtap="clickBut">加入购物车</van-button>
+    </picker>
+    <van-button wx:else custom-class='but' bindtap="clickBut">加入购物车
+    </van-button>
+  </view>
+  <!-- 购物车按钮 -->
+  <Float id="Float" />
 </block>