Browse Source

选择订单行

zhaoxiaohai 2 years ago
parent
commit
08637b2476

+ 123 - 0
select/orderFormLine/index.js

@@ -0,0 +1,123 @@
+const _Http = getApp().globalData.http,
+	file = require("../../utils/FormatTheAttachment");
+Page({
+  data: {
+    loading: true,
+    params: {}, //请求体
+    result: [], //返回结果
+    radio: false, //是否为单选
+    idname: "sa_orderitemsid", //idkey
+    showName: "itemname"
+  },
+  onLoad(options) {
+    if (options.params) {
+      let params = JSON.parse(options.params);
+      if (!params.content.pageNumber || !params.content.pageTotal) {
+        params.content.pageNumber = 1;
+        params.content.pageTotal = 1;
+      };
+      this.setData({
+        params
+      });
+    }
+    this.setData({
+      radio: options.radio ? true : false,
+      idname: options.idname || this.data.idname,
+      showName: options.showName || this.data.showName,
+    });
+    this.getList();
+  },
+  getList(init = false) {
+    //init 用于初始化分页
+    if (init.detail != undefined) init = init.detail;
+    let params = this.data.params;
+    if (init) params.content.pageNumber = 1;
+    if (params.content.pageNumber > params.content.pageTotal) return;
+    _Http.basic(params).then(res => {
+      console.log("选择订单行列表", res)
+      this.selectComponent('#ListBox').RefreshToComplete();
+      if (res.msg != '成功') return wx.showToast({
+        title: res.msg,
+        icon: "none"
+      })
+      res.data = res.data.map(value => {
+        if (value.attinfos.length != 0) {
+          value.attinfos = file.fileList(value.attinfos)
+          let image = value.attinfos.find(v => v.fileType == "image");
+          value.cover = image ? image.cover : "";
+        }
+        value.gradeprice && (value.gradeprice = (value.gradeprice - 0).toFixed(2));
+        value.price && (value.price = (value.price - 0).toFixed(2));
+        value.oldprice && (value.oldprice = (value.oldprice - 0).toFixed(2));
+        return value;
+      })
+      this.setData({
+        'params.content.pageNumber': res.pageNumber + 1,
+        'params.content.pageTotal': res.pageTotal,
+        'params.content.total': res.total,
+        list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data),
+        loading: false
+      })
+    })
+  },
+  /* 选中 */
+  changeResult(e) {
+    let {
+      id
+    } = e.currentTarget.dataset, result = this.data.result;
+    if (this.data.radio) {
+      result = [id];
+    } else {
+      result.some(v => v == id) ? result = result.filter(v => v != id) : result.push(id)
+    }
+    this.setData({
+      result
+    });
+    if (this.data.radio) this.submit();
+  },
+  /* 提交 */
+  submit() {
+    let result = this.data.result,
+      obj = this.data.radio ? {
+        id: result,
+        item: this.data.list.find(value => value[this.data.idname] == result),
+        value: [this.data.list.find(value => value[this.data.idname] == result)[this.data.showName], result]
+      } : {
+        result,
+        list: result.map(v => this.data.list.find(value => value[this.data.idname] == v)),
+        value: [result.map(v => {
+          let data = this.data.list.find(value => value[this.data.idname] == v);
+          return data ? data[this.data.showName] : ""
+        }), result]
+      }
+    getApp().globalData.handleSelect && getApp().globalData.handleSelect(obj)
+  },
+  /* 开始搜索 */
+  startSearch({
+    detail
+  }) {
+    let condition = this.data.content ? this.data.content.where.condition : this.data.params.content.where.condition;
+    if (detail == condition) return;
+    this.setData({
+      'content.where.condition': detail,
+      'params.content.where.condition': detail
+    });
+    this.getList(true);
+  },
+  /* 取消搜索 */
+  onClear() {
+    this.setData({
+      'content.where.condition': "",
+      'params.content.where.condition': ""
+    });
+    this.getList(true);
+  },
+  onReady() {
+    this.selectComponent("#ListBox").setHeight(".total", this);
+  },
+  onUnload() {
+    //回收数据
+    getApp().globalData.handleSelect = null;
+    getApp().globalData.savePage = null;
+  }
+})

+ 3 - 0
select/orderFormLine/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

+ 145 - 0
select/orderFormLine/index.scss

@@ -0,0 +1,145 @@
+@import "./index.skeleton.wxss";
+page {
+	height: 100vh;
+	overflow: hidden;
+}
+
+.total {
+	height: 60rpx;
+	line-height: 60rpx;
+	font-size: 24rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	color: #666666;
+	padding-left: 30rpx;
+}
+
+.setclient-list-item {
+	width: 100vw;
+	padding: 0 30rpx;
+	background-color: #FFFFFF;
+	box-sizing: border-box;
+	border-bottom: 1rpx solid #DDDDDD;
+	margin-bottom: 20rpx;
+
+	.mian {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border-bottom: 1rpx solid #DDDDDD;
+		box-sizing: border-box;
+		padding: 20rpx 0;
+
+		.img {
+			flex-shrink: 0;
+			width: 128rpx;
+			height: 128rpx;
+			border-radius: 16rpx;
+			margin-right: 30rpx;
+			overflow: hidden;
+
+			.err {
+				display: flex;
+				width: 100%;
+				height: 100%;
+				align-items: center;
+				justify-content: center;
+				font-size: 22rpx;
+				border: 1px solid #ddd;
+				box-sizing: border-box;
+				color: #666;
+			}
+		}
+
+		.dec {
+			flex: 1;
+			width: 0;
+			min-height: 128rpx;
+			height: 100%;
+			font-size: 24rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			color: #999999;
+
+			.title {
+				height: 40rpx;
+				line-height: 40rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC-Semibold, PingFang SC;
+				font-weight: 600;
+				color: #333333;
+			}
+
+			.subfield {
+				margin-top: 6rpx;
+				height: 34rpx;
+				line-height: 34rpx;
+
+
+				text {
+					display: inline-block;
+					max-width: 250rpx;
+					min-width: 150rpx;
+				}
+			}
+
+			.price {
+				height: 40rpx;
+				line-height: 40rpx;
+				margin-top: 8rpx;
+
+				.num {
+					font-size: 28rpx;
+					color: #FF3B30;
+					font-weight: 600;
+				}
+
+				text {
+					color: #333333;
+				}
+			}
+		}
+	}
+
+	.bot {
+		font-size: 24rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		color: #999999;
+		height: 72rpx;
+		line-height: 72rpx;
+
+		text {
+			display: inline-block;
+			width: 50%;
+		}
+	}
+}
+
+.footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 30rpx;
+	position: fixed;
+	width: 100vw;
+	height: 130rpx;
+	background: #FFFFFF;
+	box-shadow: 0px -4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
+	bottom: 0;
+	box-sizing: border-box;
+
+	.count {
+		font-size: 28rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		color: #333333;
+	}
+
+	.but {
+		width: 156rpx;
+		height: 90rpx;
+		background: #3874F6;
+		border-radius: 8rpx;
+		font-size: 28rpx;
+		font-family: PingFang SC-Bold, PingFang SC;
+		font-weight: bold;
+		color: #FFFFFF;
+	}
+}

+ 142 - 0
select/orderFormLine/index.skeleton.wxml

@@ -0,0 +1,142 @@
+<!--
+此文件为开发者工具生成,生成时间: 2023/1/30下午1:28:47
+使用方法:
+在 E:\云链项目\e-wechat\select\orderFormLine\index.wxml 引入模板
+
+```
+<import src="index.skeleton.wxml"/>
+<template is="skeleton" wx:if="{{loading}}" />
+```
+
+在 E:\云链项目\e-wechat\select\orderFormLine\index.wxss 中引入样式
+```
+@import "./index.skeleton.wxss";
+```
+
+更多详细信息可以参考文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+-->
+<template name="skeleton">
+  <view class="sk-container">
+    <view is="miniprogram_npm/@vant/weapp/search/index" class="search">
+      <view class="van-search index--van-search " style="background: #ffffff">
+        <view class="van-search__content index--van-search__content van-search__content--round index--van-search__content--round">
+          <view is="miniprogram_npm/@vant/weapp/field/index" class="van-search__field index--van-search__field ">
+            <view is="miniprogram_npm/@vant/weapp/cell/index">
+              <view class="field-index--van-field van-cell cell-index--van-cell van-cell--borderless cell-index--van-cell--borderless sk-pseudo sk-pseudo-circle" hover-class="van-cell--hover hover-class" hover-stay-time="70" style="padding: 5px 10px 5px 0; background-color: transparent;">
+                <view is="miniprogram_npm/@vant/weapp/icon/index" class="van-cell__left-icon-wrap cell-index--van-cell__left-icon-wrap">
+                  <view class="cell-index--van-cell__left-icon van-icon icon-index--van-icon van-icon-search icon-index--van-icon-search sk-pseudo sk-pseudo-circle" style="true"></view>
+                </view>
+                <view class="van-cell__value cell-index--van-cell__value ">
+                  <view class="van-field__body field-index--van-field__body van-field__body--search field-index--van-field__body--search">
+                    <view class="van-field__control field-index--van-field__control sk-image" cursor="-1" maxlength="-1" placeholder="请输入搜索关键词" placeholder-class="van-field__placeholder" placeholder-style="true" selection-end="-1" selection-start="-1" type="search"
+                      value="true"></view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="total sk-transparent sk-text-30-0000-778 sk-text">共2个</view>
+    <view is="components/Yl_ListBox/index" id="ListBox">
+      <scroll-view scroll-y="true" class="ListBox-index--scroll-view" refresher-enabled="true" style="height: 640px;">
+        <navigator class="setclient-list-item" data-id="23">
+          <view class="mian">
+            <view is="miniprogram_npm/@vant/weapp/checkbox/index">
+              <view class="van-checkbox checkbox-index--van-checkbox ">
+                <view class="van-checkbox__icon-wrap checkbox-index--van-checkbox__icon-wrap">
+                  <view is="miniprogram_npm/@vant/weapp/icon/index" class="van-checkbox__icon checkbox-index--van-checkbox__icon van-checkbox__icon--square checkbox-index--van-checkbox__icon--square" style="font-size:14px">
+                    <view class="van-icon icon-index--van-icon van-icon-success icon-index--van-icon-success sk-pseudo sk-pseudo-circle" style="font-size:0.8em;line-height: 1.25em;"></view>
+                  </view>
+                </view>
+                <view class=" van-checkbox__label checkbox-index--van-checkbox__label van-checkbox__label--right checkbox-index--van-checkbox__label--right"></view>
+              </view>
+            </view>
+            <view class="img" data-file="[object Object],[object Object],[object Object],[object Object]">
+              <view is="miniprogram_npm/@vant/weapp/image/index">
+                <view class=" van-image image-index--van-image" style="width:100%;height:100%">
+                  <image class="van-image__img image-index--van-image__img sk-image" mode="scaleToFill" lazy-load="true"></image>
+                </view>
+              </view>
+            </view>
+            <view class="dec">
+              <view class="title line-1 sk-transparent sk-text-15-0000-687 sk-text">
+                测试新增
+              </view>
+              <view class="subfield line-1">
+                <text class="sk-transparent sk-text-14-7059-742 sk-text">标准订单:SO202211300014</text>
+              </view>
+              <view class="subfield line-1">
+                <text class="sk-transparent sk-text-14-7059-242 sk-text">数量:20</text>
+                <text class="sk-transparent sk-text-14-7059-438 sk-text">单价:10.00</text>
+              </view>
+              <view class="price line-1 sk-transparent">
+                可开票金额:
+                <text class="num sk-transparent sk-text-15-0000-691 sk-text">¥200元</text>
+              </view>
+            </view>
+          </view>
+          <view class="bot">
+            <text class="sk-transparent sk-text-33-3333-911 sk-text">型号:S</text>
+            <text class="sk-transparent sk-text-33-3333-308 sk-text">规格: --</text>
+          </view>
+        </navigator>
+        <navigator class="setclient-list-item" data-id="81">
+          <view class="mian">
+            <view is="miniprogram_npm/@vant/weapp/checkbox/index">
+              <view class="van-checkbox checkbox-index--van-checkbox ">
+                <view class="van-checkbox__icon-wrap checkbox-index--van-checkbox__icon-wrap">
+                  <view is="miniprogram_npm/@vant/weapp/icon/index" class="van-checkbox__icon checkbox-index--van-checkbox__icon van-checkbox__icon--square checkbox-index--van-checkbox__icon--square" style="font-size:14px">
+                    <view class="van-icon icon-index--van-icon van-icon-success icon-index--van-icon-success sk-pseudo sk-pseudo-circle" style="font-size:0.8em;line-height: 1.25em;"></view>
+                  </view>
+                </view>
+                <view class=" van-checkbox__label checkbox-index--van-checkbox__label van-checkbox__label--right checkbox-index--van-checkbox__label--right"></view>
+              </view>
+            </view>
+            <view class="img" data-file="[object Object],[object Object]">
+              <view is="miniprogram_npm/@vant/weapp/image/index">
+                <view class=" van-image image-index--van-image" style="width:100%;height:100%">
+                  <image class="van-image__img image-index--van-image__img sk-image" mode="scaleToFill" lazy-load="true"></image>
+                </view>
+              </view>
+            </view>
+            <view class="dec">
+              <view class="title line-1 sk-transparent sk-text-15-0000-536 sk-text">
+                暖通复合管
+              </view>
+              <view class="subfield line-1">
+                <text class="sk-transparent sk-text-14-7059-412 sk-text">标准订单:SO202301040009</text>
+              </view>
+              <view class="subfield line-1">
+                <text class="sk-transparent sk-text-14-7059-899 sk-text">数量:6</text>
+                <text class="sk-transparent sk-text-14-7059-60 sk-text">单价:900.36</text>
+              </view>
+              <view class="price line-1 sk-transparent">
+                可开票金额:
+                <text class="num sk-transparent sk-text-15-0000-835 sk-text">¥5402.16元</text>
+              </view>
+            </view>
+          </view>
+          <view class="bot">
+            <text class="sk-transparent sk-text-33-3333-633 sk-text">型号:DN20</text>
+            <text class="sk-transparent sk-text-33-3333-875 sk-text">规格: --</text>
+          </view>
+        </navigator>
+        <view style="height: 65px;"></view>
+        <view class="ListBox-index--safety"></view>
+      </scroll-view>
+    </view>
+    <view class="footer">
+      <view class="count sk-transparent sk-text-14-2857-413 sk-text">
+        已选:0
+      </view>
+      <view is="miniprogram_npm/@vant/weapp/button/index">
+        <button app-parameter="true" business-id="true" class="but van-button button-index--van-button van-button--default button-index--van-button--default van-button--normal button-index--van-button--normal van-button--disabled button-index--van-button--disabled van-button--unclickable button-index--van-button--unclickable sk-button sk-pseudo sk-pseudo-circle"
+          data-detail="null" form-type="true" hover-class="true" lang="true" open-type="true" send-message-img="true" send-message-path="true" send-message-title="true" session-from="true" style="true">
+          <view class="van-button__text button-index--van-button__text sk-transparent sk-text-15-0000-808 sk-text" style="background-position-x: 50%;">确定</view>
+        </button>
+      </view>
+    </view>
+  </view>
+</template>

+ 135 - 0
select/orderFormLine/index.skeleton.wxss

@@ -0,0 +1,135 @@
+/*
+此文件为开发者工具生成,生成时间: 2023/1/30下午1:28:48
+
+在 E:\云链项目\e-wechat\select\orderFormLine\index.wxss 中引入样式
+```
+@import "./index.skeleton.wxss";
+```
+
+更多详细信息可以参考文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+*/
+.sk-transparent {
+    color: transparent !important;
+  }
+.sk-text-30-0000-778 {
+    background-image: linear-gradient(transparent 30.0000%, #EEEEEE 0%, #EEEEEE 70.0000%, transparent 0%) !important;
+    background-size: 100% 60.0000rpx;
+    position: relative !important;
+  }
+.sk-text {
+    background-origin: content-box !important;
+    background-clip: content-box !important;
+    background-color: transparent !important;
+    color: transparent !important;
+    background-repeat: repeat-y !important;
+  }
+.sk-text-15-0000-687 {
+    background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-742 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-242 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-438 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-15-0000-691 {
+    background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-text-33-3333-911 {
+    background-image: linear-gradient(transparent 33.3333%, #EEEEEE 0%, #EEEEEE 66.6667%, transparent 0%) !important;
+    background-size: 100% 72.0000rpx;
+    position: relative !important;
+  }
+.sk-text-33-3333-308 {
+    background-image: linear-gradient(transparent 33.3333%, #EEEEEE 0%, #EEEEEE 66.6667%, transparent 0%) !important;
+    background-size: 100% 72.0000rpx;
+    position: relative !important;
+  }
+.sk-text-15-0000-536 {
+    background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-412 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-899 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-60 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-15-0000-835 {
+    background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-text-33-3333-633 {
+    background-image: linear-gradient(transparent 33.3333%, #EEEEEE 0%, #EEEEEE 66.6667%, transparent 0%) !important;
+    background-size: 100% 72.0000rpx;
+    position: relative !important;
+  }
+.sk-text-33-3333-875 {
+    background-image: linear-gradient(transparent 33.3333%, #EEEEEE 0%, #EEEEEE 66.6667%, transparent 0%) !important;
+    background-size: 100% 72.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-413 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-15-0000-808 {
+    background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-button {
+    color: #EFEFEF !important;
+    background: #EFEFEF !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+.sk-image {
+    background: #EFEFEF !important;
+  }
+.sk-pseudo::before, .sk-pseudo::after {
+      background: #EFEFEF !important;
+      background-image: none !important;
+      color: transparent !important;
+      border-color: transparent !important;
+    }
+.sk-pseudo-rect::before, .sk-pseudo-rect::after {
+      border-radius: 0 !important;
+    }
+.sk-pseudo-circle::before, .sk-pseudo-circle::after {
+      border-radius: 50% !important;
+    }
+.sk-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: transparent;
+  }

+ 59 - 0
select/orderFormLine/index.wxml

@@ -0,0 +1,59 @@
+<import src="index.skeleton.wxml"/>
+<template is="skeleton" wx:if="{{loading}}" />
+
+<van-search class="search" value="{{ params.content.where.condition }}" shape="round" placeholder="请输入搜索关键词" bind:search='startSearch' bind:clear='onClear' />
+<view class="total">共{{params.content.total}}个</view>
+
+<Yl_ListBox id='ListBox' bind:getlist='getList'>
+	<navigator class="setclient-list-item" url="#" wx:for="{{list}}" wx:key="itemno" data-id="{{item[idname]}}" bindtap="changeResult">
+		<view class="mian">
+			<van-checkbox wx:if="{{!radio}}" value="{{ handle.isCheck(item[idname],result) }}" shape="square" icon-size='28rpx' />
+			<view class="img" data-file="{{item.attinfos}}" catchtap="viewImage">
+				<van-image width="100%" height="100%" wx:if="{{item.cover}}" src="{{item.cover}}" use-loading-slot use-error-slot lazy-load>
+					<van-loading slot="loading" type="spinner" size="20" vertical />
+					<text slot="error" style="font-size: 24rpx;">暂无图片</text>
+				</van-image>
+				<text wx:else class="err">暂无图片</text>
+			</view>
+			<view class="dec">
+				<view class="title line-1">
+					{{item.itemname}}
+				</view>
+				<view class="subfield line-1">
+					<text>{{item.type}}:{{item.sonum||' --'}}</text>
+				</view>
+				<view class="subfield line-1">
+					<text>数量:{{item.qty||' --'}}</text>
+					<text>单价:{{item.price||' --'}}</text>
+				</view>
+				<view class="price line-1">
+					可开票金额:<text class="num">¥{{item.amount - item.invoiceamount}}元</text>
+				</view>
+			</view>
+		</view>
+		<view class="bot">
+			<text>型号:{{item.model||' --'}}</text>
+			<text>规格:{{item.spec||' --'}}</text>
+		</view>
+	</navigator>
+	<view wx:if="{{!radio}}" style="height: 130rpx;" />
+	<Yl_Empty wx:if="{{list.length==0}}" />
+</Yl_ListBox>
+
+<block wx:if="{{!radio}}">
+	<view class="footer">
+		<view class="count">
+			已选:{{result.length}}
+		</view>
+		<van-button custom-class='but' disabled='{{result.length==0}}' bind:click="submit">确定</van-button>
+	</view>
+	<wxs module="handle">
+		module.exports = {
+			isCheck: function (id, list) {
+				return list.some(function (v) {
+					return v == id
+				});
+			},
+		}
+	</wxs>
+</block>