1

README.md

@@ -8,14 +8,15 @@ uni-app项目开发模板,集成了u-view 2.0、基于uni-request封装、token
 常用css公共变量在 uni.scss和uni_modules\uview-ui目录下的theme.scss, 全局公共样式可以在theme.scss文件配置，也可以在static文件夹common.scss 配置
 全局样式包括但不限于内容布局、文字大小、颜色、公共组件css。
 常用css样式配置在common.scss文件中，常用flex布局、常用对齐方式、常用内边距、外边距
-#### 图片上传和拍照上传
+#### 图片/视频上传和拍照上传
 点击按钮上传文件
+image/video
 import uploadImage from '@/components/ossutil/uploadFile.js';
 	uni.chooseImage({
 				    count: 1, 
 				    success: function (res) {
 				        console.log(JSON.stringify(res.tempFilePaths));
-						uploadImage(res.tempFilePaths[0], 'appData/',
+						uploadImage('image',res.tempFilePaths[0], 'appData/',
 							result => {
 								// 上传成功
 								console.log('图片地址', result)

components/ossutil/uploadFile.js

@@ -1,6 +1,6 @@
 const env = require('./config.js'); //配置文件，在这文件里配置你的OSS keyId和KeySecret,timeout:87600;
 
-const base64 = require('./base64.js');//Base64,hmac,sha1,crypto相关算法
+const base64 = require('./base64.js'); //Base64,hmac,sha1,crypto相关算法
 require('./hmac.js');
 require('./sha1.js');
 const Crypto = require('./crypto.js');
@@ -11,82 +11,82 @@ const Crypto = require('./crypto.js');
  *@param - dir:表示要传到哪个目录下
  *@param - successc:成功回调
  *@param - failc:失败回调
- */ 
-const uploadFile = function (type,filePath, dir, successc, failc) {
-	console.log('type',type)
-  if (!filePath || filePath.length < 9) {
-    uni.showModal({
-      title: '图片错误',
-      content: '请重试',
-      showCancel: false,
-    })
-    return;
-  }
-   let aliyunFileKey=''
-  if(type){
-	     aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.mp4';
-  }else{
-	   aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
-  }
-  //图片名字 可以自行定义，     这里是采用当前的时间戳 + 150内的随机数来给图片命名的
-  // const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
-  
-  const aliyunServerURL = env.uploadImageUrl;//OSS地址，需要https
-  const accessid = env.OSSAccessKeyId;
-  const policyBase64 = getPolicyBase64();
-  const signature = getSignature(policyBase64);//获取签名
- 
-  uni.uploadFile({
-    url: aliyunServerURL,//开发者服务器 url
-    filePath: filePath,//要上传文件资源的路径
-    name: 'file',//必须填file
-    formData: {
-      'key': aliyunFileKey,
-      'policy': policyBase64,
-      'OSSAccessKeyId': accessid,
-      'signature': signature,
-      'success_action_status': '200',
-    },
-    success: function (res) {
+ */
+const uploadFile = function(type, filePath, dir, successc, failc) {
+	console.log('type', type)
+	if (!filePath || filePath.length < 9) {
+		uni.showModal({
+			title: '图片错误',
+			content: '请重试',
+			showCancel: false,
+		})
+		return;
+	}
+	let aliyunFileKey = ''
+	if (type == 'image') {
+		aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
+	} else {
+		aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.mp4';
+	}
+	//图片名字 可以自行定义，     这里是采用当前的时间戳 + 150内的随机数来给图片命名的
+	// const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
+
+	const aliyunServerURL = env.uploadImageUrl; //OSS地址，需要https
+	const accessid = env.OSSAccessKeyId;
+	const policyBase64 = getPolicyBase64();
+	const signature = getSignature(policyBase64); //获取签名
+
+	uni.uploadFile({
+		url: aliyunServerURL, //开发者服务器 url
+		filePath: filePath, //要上传文件资源的路径
+		name: 'file', //必须填file
+		formData: {
+			'key': aliyunFileKey,
+			'policy': policyBase64,
+			'OSSAccessKeyId': accessid,
+			'signature': signature,
+			'success_action_status': '200',
+		},
+		success: function(res) {
 			console.log(res);
-      if (res.statusCode != 200) {
-        failc(new Error('上传错误:' + JSON.stringify(res)))
-        return;
-      }
-       successc(aliyunServerURL+"/"+aliyunFileKey);
-    },
-    fail: function (err) {
-      err.wxaddinfo = aliyunServerURL;
-      failc(err);
-    },
-  })
+			if (res.statusCode != 200) {
+				failc(new Error('上传错误:' + JSON.stringify(res)))
+				return;
+			}
+			successc(aliyunServerURL + "/" + aliyunFileKey);
+		},
+		fail: function(err) {
+			err.wxaddinfo = aliyunServerURL;
+			failc(err);
+		},
+	})
 }
 
-const getPolicyBase64 = function () {
-  let date = new Date();
-  date.setHours(date.getHours() + env.timeout);
-  let srcT = date.toISOString();
-  const policyText = {
-    "expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
-    "conditions": [
-      ["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
-    ]
-  };
+const getPolicyBase64 = function() {
+	let date = new Date();
+	date.setHours(date.getHours() + env.timeout);
+	let srcT = date.toISOString();
+	const policyText = {
+		"expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
+		"conditions": [
+			["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
+		]
+	};
 
-  const policyBase64 = base64.encode(JSON.stringify(policyText));
+	const policyBase64 = base64.encode(JSON.stringify(policyText));
 	console.log(policyBase64);
-  return policyBase64;
+	return policyBase64;
 }
 
-const getSignature = function (policyBase64) {
-  const accesskey = env.AccessKeySecret;
+const getSignature = function(policyBase64) {
+	const accesskey = env.AccessKeySecret;
 
-  const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
-    asBytes: true
-  });
-  const signature = Crypto.util.bytesToBase64(bytes);
-// console.log(signature);
-  return signature;
+	const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
+		asBytes: true
+	});
+	const signature = Crypto.util.bytesToBase64(bytes);
+	// console.log(signature);
+	return signature;
 }
 
-module.exports = uploadFile;
+module.exports = uploadFile;

config/index.js

@@ -1,6 +1,6 @@
 const dev = {
-	// baseUrlNew: 'https://apitest.eliangeyun.com',
-	baseUrlNew: 'http://192.168.1.114:8099',
+	baseUrlNew: 'https://apitest.eliangeyun.com',
+	// baseUrlNew: 'http://192.168.1.114:8099',
 	h5Appid: 'wxb66b599f7f61b46f',
 	debug: false
 }

pages.json

@@ -412,7 +412,16 @@
 				"navigationBarTitleText": "开发中"
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/order/signContract",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "签订合同",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

pages/mine/cargoowner/addEnerprise.vue

@@ -131,7 +131,7 @@
 				this.pathArr = event;
 			},
 			uploadFilePromise(file,url) {
-				uploadImage(file,url, 'appData/',
+				uploadImage('image',file,url, 'appData/',
 					result => {
 						// 上传成功回调函数
 						console.log('图片地址', result)

pages/mine/cargoowner/editEnerprise.vue

@@ -124,7 +124,7 @@
 		},
 		methods: {
 			uploadFilePromise(file,url) {
-				uploadImage(file,url, 'appData/',
+				uploadImage('image',file,url, 'appData/',
 					result => {
 						// 上传成功回调函数
 						console.log('图片地址', result)

pages/mine/cargoowner/editpersonalinformation.vue

@@ -196,7 +196,7 @@
 			savePhoto(path) {
 				// 
 				this.imagesrc = path;
-				uploadImage(path, 'appData/',
+				uploadImage('image',path, 'appData/',
 					result => {
 						// 上传成功
 						console.log('图片地址', result)
@@ -276,7 +276,7 @@
 					count: 1,
 					success: function(res) {
 						console.log(JSON.stringify(res.tempFilePaths));
-						uploadImage(res.tempFilePaths[0], 'appData/',
+						uploadImage('image',res.tempFilePaths[0], 'appData/',
 							result => {
 								// 上传成功
 								console.log('图片地址', result)
@@ -297,7 +297,7 @@
 						sourceType: this.$helper.chooseImage.sourceType,
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)

pages/mine/company/addcompany.vue

@@ -447,7 +447,7 @@
 						sourceType: this.$helper.chooseImage.sourceType,
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)
@@ -476,7 +476,7 @@
 						sourceType: ['camera'],
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)

pages/mine/company/addcompanytwo.vue

@@ -99,7 +99,7 @@
 						sourceType: this.$helper.chooseImage.sourceType,
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)
@@ -115,7 +115,7 @@
 						sourceType: ['camera'],
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)

pages/mine/company/editcompany.vue

@@ -157,7 +157,7 @@
 						sourceType: this.$helper.chooseImage.sourceType,
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)
@@ -173,7 +173,7 @@
 						sourceType: ['camera'],
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)

pages/mine/company/editcompanytwo.vue

@@ -99,7 +99,7 @@
 						sourceType: this.$helper.chooseImage.sourceType,
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)
@@ -115,7 +115,7 @@
 						sourceType: ['camera'],
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功回调函数
 									console.log('图片地址', result)

pages/mine/driverCertification.vue

@@ -314,7 +314,7 @@
 			savePhoto(path) {
 				// 
 				this.imagesrc = path;
-				uploadImage(path, 'appData/',
+				uploadImage('image',path, 'appData/',
 					result => {
 						// 上传成功
 						console.log('图片地址', result)
@@ -344,7 +344,7 @@
 					count: 1,
 					success: function(res) {
 						console.log(JSON.stringify(res.tempFilePaths));
-						uploadImage(res.tempFilePaths[0], 'appData/',
+						uploadImage('image',res.tempFilePaths[0], 'appData/',
 							result => {
 								// 上传成功
 								console.log('图片地址', result)
@@ -364,7 +364,7 @@
 						sourceType: this.$helper.chooseImage.sourceType,
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 
 									// 上传成功

pages/mine/driverCertificationNext.vue

@@ -147,7 +147,7 @@
 			savePhoto(path) {
 				// 
 				this.imagesrc = path;
-				uploadImage(path, 'appData/',
+				uploadImage('image',path, 'appData/',
 					result => {
 						// 上传成功
 						console.log('图片地址', result)
@@ -176,7 +176,7 @@
 					count: 1,
 					success: function(res) {
 						console.log(JSON.stringify(res.tempFilePaths));
-						uploadImage(res.tempFilePaths[0], 'appData/',
+						uploadImage('image',res.tempFilePaths[0], 'appData/',
 							result => {
 								// 上传成功
 								console.log('图片地址', result)
@@ -195,7 +195,7 @@
 						sourceType: this.$helper.chooseImage.sourceType,
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功
 									console.log('图片地址', result)

pages/mine/manageVehicles/addVehicle.vue

@@ -31,7 +31,7 @@
 					count: 1,
 					success: function(res) {
 						console.log(JSON.stringify(res.tempFilePaths));
-						uploadImage(res.tempFilePaths[0], 'appData/',
+						uploadImage('image',res.tempFilePaths[0], 'appData/',
 							result => {
 								// 上传成功
 								console.log('图片地址', result)

pages/mine/manageVehicles/editVehicle.vue

@@ -31,7 +31,7 @@
 					count: 1,
 					success: function(res) {
 						console.log(JSON.stringify(res.tempFilePaths));
-						uploadImage(res.tempFilePaths[0], 'appData/',
+						uploadImage('image',res.tempFilePaths[0], 'appData/',
 							result => {
 								// 上传成功
 								console.log('图片地址', result)

pages/mine/settings/editAvatar.vue

@@ -49,7 +49,7 @@
 						sourceType: this.$helper.chooseImage.sourceType,
 						success: function(res) {
 							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
+							uploadImage('image',res.tempFilePaths[0], 'appData/',
 								result => {
 									// 上传成功
 									console.log('图片地址', result)

pages/order/index.vue

@@ -125,7 +125,9 @@
 						</view>
 						<view class="normal" @click.stop="stop(good)" v-if="good.cargoOwnerStatus=='未装车'">终止</view>
 						<!-- <view class="stop active" @click.stop="stop(good)">终止</view> -->
-						<view class="start normal" @click.stop="confirmLoading(good,3)"
+					
+						<!-- confirmLoading(good,3) -->
+						<view class="start normal" @click.stop="toDetail(good.id)"
 							v-if="good.cargoOwnerStatus=='待确认装车'">确认装车</view>
 						<!-- <view class="start normal" @click.stop="confirmLoading(good,1)">确认装车</view> -->
 						<view class="start normal" v-if="good.cargoOwnerStatus!='待接单'&&good.cargoOwnerStatus!='未装车'">

pages/order/orderDetails.vue

@@ -17,19 +17,33 @@
 			</view>
 			<!-- flex flex-space-between -->
 			<view class="item2">
-				<u-button class="btn" text="驳回" @click="stop" v-if="dataObj.cargoOwnerStatus=='待接单'"></u-button>
-				<u-button class="btn" text="接受" @click="stop" v-if="dataObj.cargoOwnerStatus=='待接单'"></u-button>
-				<u-button class="btn" text="终止" @click="stop" v-if="dataObj.cargoOwnerStatus=='未装车'"></u-button>
-				<u-button class="btn" text="签订合同" @click="stop" v-if="dataObj.cargoOwnerStatus=='待确认装车'"></u-button>
-				<u-button class="btn" text="驳回装车信息" @click="stop" v-if="dataObj.cargoOwnerStatus=='待确认装车'"></u-button>
-				<u-button class="btn" text="确认装车" @click="confirmLoading" v-if="dataObj.cargoOwnerStatus=='待确认装车'">
+
+				<u-button class="btn" text="驳回" @click="accept(2)" v-if="dataObj.cargoOwnerStatus=='待接单'">
+				</u-button>
+				<u-button class="btn" text="接受" @click="accept(1)" v-if="dataObj.cargoOwnerStatus=='待接单'">
+				</u-button>
+				<u-button class="btn" text="终止" @click="stop()" v-if="dataObj.cargoOwnerStatus=='未装车'">
+				</u-button>
+				<u-button class="btn" text="查看合同" @click="lookContract"></u-button>
+				<u-button class="btn" text="签订合同" @click="signContract"
+					v-if="dataObj.cargoOwnerStatus=='待确认装车'&&dataObj.cargoOwnerContract!='1'">
+				</u-button>
+
+				<u-button class="btn" text="驳回装车信息" @click="confirmLoading()" v-if="dataObj.cargoOwnerStatus=='待确认装车'">
+				</u-button>
+				<u-button class="btn" text="确认装车" @click="confirmLoading(3)"
+					v-if="dataObj.cargoOwnerStatus=='待确认装车'&&dataObj.cargoOwnerContract=='1'">
+				</u-button>
+				<u-button class="btn" text="驳回卸车信息" @click="confirmUnLoading" v-if="dataObj.cargoOwnerStatus=='待收货'">
 				</u-button>
-				<u-button class="btn" text="驳回卸车信息" @click="stop" v-if="dataObj.cargoOwnerStatus=='待收货'"></u-button>
 				<u-button class="btn" text="确认卸车" @click="confirmUnLoading" v-if="dataObj.cargoOwnerStatus=='待收货'">
 				</u-button>
 				<u-button class="btn" text="付款" @click="closed"
 					v-if="dataObj.cargoOwnerStatus=='待结算'||dataObj.cargoOwnerStatus=='已结算'"></u-button>
 				<u-button class="btn" text="还款" @click="stop" v-if="dataObj.cargoOwnerStatus=='待还款'"></u-button>
+				<u-button class="btn" text="联系客服"
+					v-if="dataObj.cargoOwnerStatus!='待接单'&&dataObj.cargoOwnerStatus!='未装车'">
+				</u-button>
 			</view>
 			<view class="item3 flex flex-space-between align-center">
 				<view class="left flex align-center">
@@ -227,18 +241,49 @@
 			</u--textarea>
 		</u-modal>
 		<u-toast ref="uToast"></u-toast>
+		<!-- 		<view v-if="lookAlert" class="look-contract" @click="lookAlert==false">
+			<u-button class="btn" text="查看合同" @click="lookContract"></u-button>
+			<u-button class="btn" text="签名"></u-button>
+			<view class="wrapper">
+				<view class="handBtn">
+					<image @click="selectColorEvent('black','#1A1A1A')"
+						:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
+						:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
+					<image @click="selectColorEvent('red','#ca262a')"
+						:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
+						:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
+					<button @click="retDraw" class="delBtn">重写</button>
+					<button @click="saveCanvasAsImg" class="saveBtn">保存</button>
+					<button @click="previewCanvasImg" class="previewBtn">预览</button>
+					<button @click="subCanvas" class="subBtn">完成</button>
+				</view>
+				<view class="handCenter">
+					<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
+						@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
+				</view>
+				<view class="handRight">
+					<view class="handTitle">请签名</view>
+				</view>
+			</view>
+		</view> -->
 	</view>
 </template>
 
 <script>
+	var that;
+	import uploadImage from '@/components/ossutil/uploadFile.js';
 	export default {
 		data() {
 			return {
+				type: null,
 				cyinfoStatus: '未装车',
 				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
 				isShowTerminationReason: false,
 				id: "",
-				dataObj: {},
+				dataObj: {
+					contractNo: '123'
+				},
+				type: null,
 				status1: false,
 				status2: false,
 				status3: false,
@@ -266,20 +311,81 @@
 				alertContent: "",
 				isShowAlert: false,
 				zcImgList: [],
-				xcImgList: []
+				xcImgList: [],
+				contractSrc: '',
+				canvasName: 'handWriting',
+				ctx: '',
+				startX: null,
+				startY: null,
+				canvasWidth: 0,
+				canvasHeight: 0,
+				selectColor: 'black',
+				lineColor: '#1A1A1A', // 颜色
+				lineSize: 5, // 笔记倍数
 			}
 
 		},
 		onLoad(options) {
+			that = this
 			this.id = options.id
+			// this.ctx = uni.createCanvasContext("handWriting");
+			// this.$nextTick(() => {
+			// 	uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
+			// 			this.canvasWidth = rect.width;
+			// 			this.canvasHeight = rect.height;
+			// 			/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
+			// 			this.setCanvasBg('#fff');
+			// 		})
+			// 		.exec();
+			// });
 		},
 		onShow() {
 			this.getList()
 		},
 		methods: {
+			lookContract() {
+				this.$request.baseRequest('get', '/orderInfo/setPdf', {}).then(res => {
+						if (res.code == 200) {
+							debugger
+							this.contractSrc = res.data
+							uni.downloadFile({
+								url: res.data,
+								success: function(res) {
+									var filePath = res.tempFilePath;
+									uni.openDocument({
+							 		filePath: filePath,
+							  	showMenu: true,
+							  	success: function(res) {
+							  		console.log('打开文档成功');
+										}
+									});
+								}
+							});
+							// this.$refs.uToast.show({
+							// 	type: 'success',
+							// 	message: "提交成功",
+							// 	complete() {
+							// 		that.upCallback({
+							// 			size: 10,
+							// 			num: 1
+							// 		})
+							// 	}
+							// })
+
+						}
+					})
+					.catch(res => {
+						uni.$u.toast(res.message);
+					});
+			},
+			signContract() {
+				// this.lookAlert = true
+				uni.$u.route('/pages/order/signContract', this.dataObj);
+
+			},
 			// 完结
 			closed() {
-				let item = this.dataDetails
+				let item = this.dataObj
 				let that = this
 				this.$request.baseRequest('post', '/orderInfo/api/editEnd', {
 						id: item.id,
@@ -302,55 +408,144 @@
 						uni.$u.toast(res.message);
 					});
 			},
-			confirmLoading() {
-				let item = this.dataDetails
-				uni.$u.route('/pages/order/confirmLoading', item);
+			accept(type) {
+				this.type = type
+				if (type == 1) {
+					this.alertTitle = '确定接受订单？'
+					this.confirmText = '确定'
+				} else if (type == 2) {
+					this.alertTitle = '确定拒绝订单？'
+					this.confirmText = '确定'
+				} else {
+					this.alertTitle = '确定终止订单？'
+					this.confirmText = '终止'
+				}
+				this.isShowAlert = true
+			},
+			confirmLoading(type) {
+				debugger
+				this.type = type
+				if (type == 3) {
+					this.alertTitle = '确认装车？'
+					this.confirmText = '确定'
+				} else if (type == 4) {
+					this.alertTitle = '确认卸车？'
+					this.confirmText = '确定'
+				}
+				this.isShowAlert = true
+				// uni.$u.route('/pages/order/confirmLoading', item);
 			},
 			confirmUnLoading() {
-				let item = this.dataDetails
+				let item = this.dataObj
 				uni.$u.route('/pages/order/confirmUnloading', item);
 			},
 			confirmClick() {
-				let that = this
-				console.log('终止')
-				if (this.radiovalue1 == '其他' && !this.value2) {
-					this.$refs.uToast.show({
-						type: 'error',
-						message: "请填写终止原因描述!",
-					})
-					return
-				}
-				let _terminationReason = ''
-				if (this.radiovalue1 == '已与货主协商') {
-					_terminationReason = 1
-				} else if (this.radiovalue1 == '货主原因终止') {
-					_terminationReason = 2
-				} else if (this.radiovalue1 == '司机个人原因终止') {
-					_terminationReason = 3
-				} else if (this.radiovalue1 == '其他') {
-					_terminationReason = 4
-				}
-				this.$request.baseRequest('post', '/orderInfo/api/end', {
-						id: this.id,
-						terminationReason: _terminationReason,
-						terminationReasonDescription: this.value2,
-						terminator: 1
-					}).then(res => {
-						console.log(res)
-						this.isShowAlert = false
-						// this.mescroll.resetUpScroll()
-						this.$refs.uToast.show({
-							type: 'success',
-							message: "提交成功！",
-							complete() {
-								that.getList()
+				debugger
+				that.isShowAlert = false
+				if (this.type == 1 || this.type == 2) {
+					let _title = ''
+					this.$request.baseRequest('post', '/orderInfo/api/orderReceiving', {
+							id: this.dataObj.id,
+							flag: this.type
+						}).then(res => {
+							if (res.code == 200) {
+								if (this.type == 1) {
+									_title = '接单成功'
+								} else {
+									_title = '拒绝接单成功'
+								}
+								this.$refs.uToast.show({
+									type: 'success',
+									message: _title,
+									complete() {
+										that.mescroll.resetUpScroll()
+									}
+								})
+							} else {
+								if (this.type == 1) {
+									_title = '接单失败'
+								} else {
+									_title = '拒绝接单失败'
+								}
+								this.$refs.uToast.show({
+									type: 'success',
+									message: _title,
+									complete() {
+										that.mescroll.resetUpScroll()
+									}
+								})
 							}
 						})
+						.catch(res => {
+							uni.$u.toast(res.message);
+						});
+				} else if (this.type == 3 || this.type == 4) {
+					debugger
+					let _flag = ''
+					if (this.type == 3) _flag = 1
+					if (this.type == 4) _flag = 2
+					this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
+							id: this.dataObj.id,
+							loadingFlag: _flag,
+							flag: 1
+						}).then(res => {
+							if (res.code == 200) {
+								this.$refs.uToast.show({
+									type: 'success',
+									message: "提交成功",
+									complete() {
+										this.getList()
+										// that.upCallback({
+										// 	size: 10,
+										// 	num: 1
+										// })
+									}
+								})
 
-					})
-					.catch(res => {
-						uni.$u.toast(res.message);
-					});
+							}
+						})
+						.catch(res => {
+							uni.$u.toast(res.message);
+						});
+				} else {
+					if (this.radiovalue1 == '其他' && !this.value2) {
+						this.$refs.uToast.show({
+							type: 'error',
+							message: "请填写终止原因描述!",
+						})
+						return
+					}
+					let _terminationReason = ''
+					if (this.radiovalue1 == '已与货主协商') {
+						_terminationReason = 1
+					} else if (this.radiovalue1 == '货主原因终止') {
+						_terminationReason = 2
+					} else if (this.radiovalue1 == '司机个人原因终止') {
+						_terminationReason = 3
+					} else if (this.radiovalue1 == '其他') {
+						_terminationReason = 4
+					}
+					this.$request.baseRequest('post', '/orderInfo/api/end', {
+							id: this.id,
+							terminator: 2,
+						}).then(res => {
+							if (res.code == 200) {
+								this.$refs.uToast.show({
+									type: 'success',
+									message: '终止订单成功',
+								})
+							} else {
+								this.$refs.uToast.show({
+									type: 'success',
+									message: '终止订单失败',
+								})
+							}
+							that.mescroll.resetUpScroll()
+						})
+						.catch(res => {
+							uni.$u.toast(res.message);
+						});
+				}
 			},
 			cancelClick() {
 				this.isShowAlert = false
@@ -400,14 +595,17 @@
 							this.status3 = true
 						}
 						if (res.data.carrierInfo) {
-							
-							let _zcList = res.data.carrierInfo.loadingImg.split(',')
-							let _xcList = res.data.carrierInfo.unloadingImg.split(',')
-							for (let i = 0; i < _zcList.length; i++) {
-								if (_zcList[i]) this.zcImgList.push(_zcList[i])
+							if (res.data.carrierInfo.loadingImg) {
+								let _zcList = res.data.carrierInfo.loadingImg.split(',')
+								for (let i = 0; i < _zcList.length; i++) {
+									if (_zcList[i]) this.zcImgList.push(_zcList[i])
+								}
 							}
-							for (let i = 0; i < _xcList.length; i++) {
-								if (_xcList[i]) this.xcImgList.push(_xcList[i])
+							if (res.data.carrierInfo.unloadingImg) {
+								let _xcList = res.data.carrierInfo.unloadingImg.split(',')
+								for (let i = 0; i < _xcList.length; i++) {
+									if (_xcList[i]) this.xcImgList.push(_xcList[i])
+								}
 							}
 						}
 					}
@@ -485,6 +683,7 @@
 
 		.btn {
 			width: 40%;
+			margin-top: 20rpx;
 		}
 
 		.item2 {
@@ -611,4 +810,157 @@
 	/deep/.u-modal__content {
 		flex-direction: column;
 	}
+
+	.look-contract {
+		padding-top: 1000rpx;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		background: #0000005e;
+		width: 100%;
+		height: 100vh;
+
+		.btn {
+			width: 70%;
+			margin-bottom: 20rpx;
+		}
+	}
+
+	.wrapper {
+		width: 100%;
+		height: 95vh;
+		margin: 30rpx 0;
+		overflow: hidden;
+		display: flex;
+		align-content: center;
+		flex-direction: row;
+		justify-content: center;
+		font-size: 28rpx;
+		position: relative;
+	}
+
+	.handWriting {
+		background: #fff;
+		width: 100%;
+		height: 95vh;
+	}
+
+	.handRight {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.handCenter {
+		border: 4rpx dashed #e9e9e9;
+		flex: 5;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.handTitle {
+		transform: rotate(90deg);
+		flex: 1;
+		color: #666;
+	}
+
+	.handBtn button {
+		font-size: 28rpx;
+	}
+
+	.handBtn {
+		height: 95vh;
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-content: space-between;
+		flex: 1;
+	}
+
+	.delBtn {
+		position: absolute;
+		top: 250rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.delBtn image {
+		position: absolute;
+		top: 13rpx;
+		left: 25rpx;
+	}
+
+	.subBtn {
+		position: absolute;
+		bottom: 52rpx;
+		left: -3rpx;
+		display: inline-flex;
+		transform: rotate(90deg);
+		background: #008ef6;
+		color: #fff;
+		margin-bottom: 30rpx;
+		text-align: center;
+		justify-content: center;
+	}
+
+	/*Peach - 新增 - 保存*/
+
+	.saveBtn {
+		position: absolute;
+		top: 375rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.previewBtn {
+		position: absolute;
+		top: 500rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.uploadBtn {
+		position: absolute;
+		top: 625rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	/*Peach - 新增 - 保存*/
+
+	.black-select {
+		width: 60rpx;
+		height: 60rpx;
+		position: absolute;
+		top: 30rpx;
+		left: 25rpx;
+	}
+
+	.black-select.color_select {
+		width: 90rpx;
+		height: 90rpx;
+		top: 100rpx;
+		left: 10rpx;
+	}
+
+	.red-select {
+		width: 60rpx;
+		height: 60rpx;
+		position: absolute;
+		top: 140rpx;
+		left: 25rpx;
+	}
+
+	.red-select.color_select {
+		width: 90rpx;
+		height: 90rpx;
+		top: 120rpx;
+		left: 10rpx;
+	}
 </style>

pages/order/signContract.vue

@@ -0,0 +1,559 @@
+<template>
+	<view class="content">
+		<view class="content1">
+			<view style='width:70px'>付款方式</view>
+			<u-radio-group v-model="dataDetails.advanceFreightService" placement="row">
+				<u-radio :customStyle="radioCustomStyle" v-for="(item, index) in radiolist1" :key="index"
+					:label="item.name" :name="item.name" @change="radioChange">
+				</u-radio>
+			</u-radio-group>
+			<!-- 		<view class="left">
+				付款方式
+			</view>
+			<view class="right">
+				<view class="left-text">平台垫付运费</view>
+					<u-switch @change="change" v-model="value" inactiveColor='#ABB0BB' size="20" ></u-switch>
+			</view> -->
+		</view>
+		<view class="content2">
+			<view class="title">
+				合同摘要
+			</view>
+			<view class='row-between'>
+				<view class="gray">发货单位</view>
+				<view class="">{{dataDetails.compName?dataDetails.compName:'个人货主'}}</view>
+			</view>
+			<view class='row-between'>
+				<view class="gray">发货地</view>
+				<view class="place">
+					{{dataDetails.sendPrivate}}{{dataDetails.sendCity}}{{dataDetails.sendArea}}{{dataDetails.sendDetailedAddress}}
+				</view>
+			</view>
+			<view class='row-between'>
+				<view class="gray">卸货地</view>
+				<view class=" place">
+					{{dataDetails.unloadPrivate}}{{dataDetails.unloadCity}}{{dataDetails.unloadArea}}{{dataDetails.unloadDetailedAddress}}
+				</view>
+			</view>
+			<view class='row-between'>
+				<view class="gray">货名</view>
+				<view class="">{{dataDetails.goodsName}}</view>
+			</view>
+			<view class='row-between'>
+				<view class="gray">距离</view>
+				<view class="">约{{dataDetails.distance}}公里</view>
+			</view>
+			<view class='row-between'>
+				<view class="gray">运费</view>
+				<view class="">{{dataDetails.freight}}{{dataDetails.illingMethod==0?'元/吨':'元/车'}}</view>
+				<!-- 				<view class="flex"><input type="text" placeholder="请输入运费" v-model="dataDetails.freight"
+						class="text-align-right yf-input">{{dataDetails.freight}}元/车</view> -->
+			</view>
+		</view>
+		<view class="wrapper content3">
+			<view class="qm-row">
+				<view class="handTitle">手写签名</view>
+				<image src="@/static/xiangpica@2x.png" mode="widthFix" @click="retDraw" class="retDraw-image"></image>
+				<!-- <button @click="retDraw" class="delBtn">重写</button> -->
+			</view>
+
+			<view class="handCenter">
+				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
+					@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
+			</view>
+			<view class="handRight">
+
+			</view>
+			<view class="handBtn">
+				<!-- 			<image @click="selectColorEvent('black','#1A1A1A')"
+					:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
+					:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
+				<image @click="selectColorEvent('red','#ca262a')"
+					:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
+					:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image> -->
+
+				<!-- <button @click="saveCanvasAsImg" class="saveBtn">保存</button> -->
+				<view @click="submit" class="saveBtn">提交</view>
+				<!-- <button @click="previewCanvasImg" class="previewBtn">预览</button> -->
+				<!-- <button @click="subCanvas" class="subBtn">完成</button> -->
+			</view>
+		</view>
+		<u-toast ref="uToast"></u-toast>
+	</view>
+</template>
+
+<script>
+	var that;
+	import uploadImage from '@/components/ossutil/uploadFile.js';
+	export default {
+		data() {
+			return {
+				isScaleStart: false,
+				radioCustomStyle: {
+					margin: '0 0 0 10rpx'
+				},
+				canvasName: 'handWriting',
+				ctx: '',
+				startX: null,
+				startY: null,
+				canvasWidth: 0,
+				canvasHeight: 0,
+				selectColor: 'black',
+				lineColor: '#1A1A1A', // 颜色
+				lineSize: 5, // 笔记倍数
+				value: true,
+				dataDetails: {},
+				radiolist1: [{
+						name: '平台垫付运费',
+						disabled: false
+					},
+					{
+						name: '无需平台垫付运费',
+						disabled: false
+					},
+				],
+			};
+		},
+		onLoad(options) {
+			that = this
+			console.log(options)
+			this.dataDetails = options
+			this.dataDetails.advanceFreightService = '平台垫付运费'
+			this.ctx = uni.createCanvasContext("handWriting");
+			this.$nextTick(() => {
+				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
+						this.canvasWidth = rect.width;
+						this.canvasHeight = rect.height;
+						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
+						this.setCanvasBg('#fff');
+					})
+					.exec();
+			});
+		},
+		methods: {
+			submit() {
+				if (!that.isScaleStart) {
+					that.$refs.uToast.show({
+						type: 'error',
+						message: "手写签名不能为空！",
+					})
+					return
+				}
+				// if (uni.$u.test.isEmpty(that.dataDetails.freight)) {
+				// 	that.$refs.uToast.show({
+				// 		type: 'error',
+				// 		message: "运费不能为空！",
+				// 	})
+				// 	return
+				// }
+				uni.canvasToTempFilePath({
+					canvasId: 'handWriting',
+					fileType: 'png',
+					quality: 1, //图片质量
+					success(res) {
+						console.log(res.tempFilePath, 'canvas生成图片地址');
+						uploadImage('image', res.tempFilePath, 'appData/',
+							result => {
+								// 上传成功
+								console.log('图片地址', result)
+								that.dataDetails.cargoOwnerAutograph = result
+
+
+								uni.showLoading({
+									title: '加载中',
+									mask: true
+								})
+
+								that.$request.baseRequest('get', '/orderInfo/setPdf', that.dataDetails).then(res => {
+										if (res.code == 200) {
+											debugger
+											// that.contractSrc = res.data
+											// uni.downloadFile({
+											// 	url: res.data,
+											// 	success: function(res) {
+											// 		var filePath = res.tempFilePath;
+											// 		uni.openDocument({
+								   //  		filePath: filePath,
+											// 			showMenu: true,
+								   // 			success: function(res) {
+											// 				console.log('打开文档成功');
+											// 			}
+											// 		});
+											// 	}
+											// });
+											// this.$refs.uToast.show({
+											// 	type: 'success',
+											// 	message: "提交成功",
+											// 	complete() {
+											// 		that.upCallback({
+											// 			size: 10,
+											// 			num: 1
+											// 		})
+											// 	}
+											// })
+
+										}
+									})
+									.catch(res => {
+										uni.$u.toast(res.message);
+									});
+							}
+						)
+
+					}
+				});
+			},
+			// change(e){
+			// 	if(this.value){
+			// 		this.$set(this.dataDetails,'advanceFreightService',1)
+			// 	}else{
+			// 		this.$set(this.dataDetails,'advanceFreightService',0)
+			// 	}
+			// },
+			// 笔迹开始
+			uploadScaleStart(e) {
+				this.isScaleStart = true
+				this.startX = e.changedTouches[0].x
+				this.startY = e.changedTouches[0].y
+				//设置画笔参数
+				//画笔颜色
+				this.ctx.setStrokeStyle(this.lineColor)
+				//设置线条粗细
+				this.ctx.setLineWidth(this.lineSize)
+				//设置线条的结束端点样式
+				this.ctx.setLineCap("round") //'butt'、'round'、'square'
+				//开始画笔
+				this.ctx.beginPath()
+			},
+			// 笔迹移动
+			uploadScaleMove(e) {
+				//取点
+				let temX = e.changedTouches[0].x
+				let temY = e.changedTouches[0].y
+				//画线条
+				this.ctx.moveTo(this.startX, this.startY)
+				this.ctx.lineTo(temX, temY)
+				this.ctx.stroke()
+				this.startX = temX
+				this.startY = temY
+				this.ctx.draw(true)
+			},
+			/**
+			 * 重写
+			 */
+			retDraw() {
+				this.ctx.clearRect(0, 0, 700, 730);
+				this.ctx.draw();
+				//设置canvas背景
+				this.setCanvasBg('#fff');
+			},
+			/**
+			 * @param {Object} str
+			 * @param {Object} color
+			 * 选择颜色
+			 */
+			selectColorEvent(str, color) {
+				this.selectColor = str;
+				this.lineColor = color;
+			},
+			//完成
+			subCanvas() {
+				uni.canvasToTempFilePath({
+					canvasId: 'handWriting',
+					fileType: 'png',
+					quality: 1, //图片质量
+					success(res) {
+						// console.log(res.tempFilePath, 'canvas生成图片地址');
+						uni.showToast({
+							title: '以保存'
+						});
+						//保存到系统相册
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success(res) {
+								uni.showToast({
+									title: '已成功保存到相册',
+									duration: 2000
+								});
+							}
+						});
+					}
+				});
+			},
+			//保存到相册
+			saveCanvasAsImg() {
+				uni.canvasToTempFilePath({
+					canvasId: 'handWriting',
+					fileType: 'png',
+					quality: 1, //图片质量
+					success(res) {
+						console.log(res.tempFilePath, 'canvas生成图片地址');
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success(res) {
+								uni.showToast({
+									title: '已保存到相册',
+									duration: 2000
+								});
+							}
+						});
+					}
+				});
+			},
+			//预览
+			previewCanvasImg() {
+				uni.canvasToTempFilePath({
+					canvasId: 'handWriting',
+					fileType: 'jpg',
+					quality: 1, //图片质量
+					success(res) {
+						uni.previewImage({
+							urls: [res.tempFilePath] //预览图片 数组
+						});
+					}
+				});
+			},
+			//设置canvas背景色  不设置  导出的canvas的背景为透明
+			//@params：字符串  color
+			setCanvasBg(color) {
+
+				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
+				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
+				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
+				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
+				// ctx.setFillStyle('red')
+				this.ctx.setFillStyle(color);
+				this.ctx.fill(); //设置填充
+				this.ctx.draw(); //开画
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background: #fbfbfb;
+		height: auto;
+	}
+
+	.content1 {
+		background: white;
+		border-radius: 20rpx;
+		margin: 20rpx;
+		padding: 30rpx 20rpx;
+		display: flex;
+		justify-content: space-between;
+
+		.right {
+			display: flex;
+		}
+	}
+
+	.content2 {
+		background: white;
+		border-radius: 20rpx;
+		margin: 20rpx;
+		padding: 30rpx 20rpx;
+
+		.title {
+			font-size: 36rpx;
+			font-weight: 700;
+			margin-bottom: 20rpx;
+		}
+
+		.row-between {
+			margin-bottom: 20rpx;
+		}
+
+		.left-text {
+			margin-right: 20rpx;
+		}
+
+		.yf-input {
+			padding-right: 10rpx;
+		}
+	}
+
+	.content3 {
+		background: white;
+		border-radius: 20rpx;
+		margin: 20rpx;
+		padding: 30rpx 20rpx;
+	}
+
+	.place {
+		width: 80%;
+		text-align: right;
+	}
+
+	.handCenter {
+		border: 4rpx dashed #e9e9e9;
+		overflow: hidden;
+		box-sizing: border-box;
+		height: 500rpx;
+	}
+
+	.handWriting {
+		background: #F9F9FB;
+		width: 100%;
+		height: 100%;
+	}
+
+	.handRight {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.handCenter {
+		border: 4rpx dashed #e9e9e9;
+		flex: 5;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.handTitle {
+		font-size: 36rpx;
+		color: #666;
+		font-weight: 700;
+		color: #333333;
+		margin-bottom: 20rpx;
+	}
+
+	.retDraw-image {
+		width: 50rpx;
+
+	}
+
+	.qm-row {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.saveBtn {
+		width: 80%;
+		background: #2772FB;
+		color: white;
+		text-align: center;
+		border-radius: 50rpx;
+		padding: 20rpx;
+	}
+
+	.handBtn {
+		display: flex;
+		justify-content: center;
+	}
+
+	/* 
+	.wrapper {
+		width: 100%;
+		height: 95vh;
+		margin: 30rpx 0;
+		overflow: hidden;
+		display: flex;
+		align-content: center;
+		flex-direction: row;
+		justify-content: center;
+		font-size: 28rpx;
+	}
+
+
+
+
+	.handBtn button {
+		font-size: 28rpx;
+	}
+
+	.handBtn {
+		height: 95vh;
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-content: space-between;
+		flex: 1;
+	}
+
+	.delBtn {
+		position: absolute;
+		top: 250rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.delBtn image {
+		position: absolute;
+		top: 13rpx;
+		left: 25rpx;
+	}
+
+	.subBtn {
+		position: absolute;
+		bottom: 52rpx;
+		left: -3rpx;
+		display: inline-flex;
+		transform: rotate(90deg);
+		background: #008ef6;
+		color: #fff;
+		margin-bottom: 30rpx;
+		text-align: center;
+		justify-content: center;
+	}
+
+
+
+	.saveBtn {
+		position: absolute;
+		top: 375rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.previewBtn {
+		position: absolute;
+		top: 500rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.uploadBtn {
+		position: absolute;
+		top: 625rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+
+
+	.black-select {
+		width: 60rpx;
+		height: 60rpx;
+		position: absolute;
+		top: 30rpx;
+		left: 25rpx;
+	}
+
+	.black-select.color_select {
+		width: 90rpx;
+		height: 90rpx;
+		top: 100rpx;
+		left: 10rpx;
+	}
+
+	.red-select {
+		width: 60rpx;
+		height: 60rpx;
+		position: absolute;
+		top: 140rpx;
+		left: 25rpx;
+	}
+
+	.red-select.color_select {
+		width: 90rpx;
+		height: 90rpx;
+		top: 120rpx;
+		left: 10rpx;
+	} */
+</style>