2024-6-27

api/user.js

@@ -824,3 +824,6 @@ export function energyExchange(q) {
 	return request.post("money/transfer", q);
 }
 
+export function brokerageImport(q) {
+	return request.post("import/brokerage", q);
+}

index.html

@@ -17,6 +17,8 @@
 		</script>
 		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 		<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
+		<!-- 实名认证 -->
+		<script type="text/javascript" src="https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js" ></script>
 		<script>
 			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
 			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')

manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "人人益生121",
-    "appid" : "__UNI__3F43051",
+    "appid" : "__UNI__70BC0AE",
     "description" : "人人益生121",
     "versionName" : "3.0.0",
     "versionCode" : 301,
@@ -26,9 +26,7 @@
             "Share" : {},
             "OAuth" : {},
             "Payment" : {},
-            "Maps" : {},
             "LivePusher" : {},
-            "Geolocation" : {},
             "Barcode" : {},
             "Camera" : {}
         },

pages.json

@@ -689,6 +689,20 @@
 						}
 					}
 				},
+				{
+					"path": "user_payment/money",
+					"style": {
+						"navigationBarTitleText": "转佣金",
+						"navigationStyle": "custom",
+						"app-plus": {
+							// #ifdef APP-PLUS
+							"titleNView": {
+								"type": "default"
+							}
+							// #endif
+						}
+					}
+				},
 				{
 					"path": "user_pwd_edit/index",
 					"style": {

pages/index/index.vue

@@ -63,14 +63,15 @@
 					<follow v-if="item.name == 'follow'" :dataConfig="item"></follow>
 				</block>
 				<view class="goodsTitle" v-if="joinList.length>0">
-					<text class='borderBottom'>
+					<!-- <text class='borderBottom'>
 						抢购商品
-					</text>
+					</text> -->
+					<image class="bannerImg" src="../../static/img/indexGoods1.png" mode="aspectFill"></image>
 				</view>
 				<view class="goodsItem" v-if="joinList.length>0">
 					<view class="itemList" @click="addCartChange(item)" v-for="(item,index) in joinList">
 						<view class="itemImage">
-							<image class="imageBanner" :src="item.image" mode="widthFix"></image>
+							<image class="imageBanner" :src="item.image" mode="aspectFill"></image>
 						</view>
 						<view class="itemContent">
 							<view class="itemTitle">
@@ -89,14 +90,15 @@
 					</view>
 				</view>
 				<view class="goodsTitle" v-if="giveList.length>0">
-					<text class='borderBottom'>
+					<!-- <text class='borderBottom'>
 						爆单商品
-					</text>
+					</text> -->
+					<image class="bannerImg2" src="../../static/img/indexGoods2.png" mode="scaleToFill"></image>
 				</view>
 				<view class="goodsItem" v-if="giveList.length>0">
 					<view class="itemList" @click="addCartChange(item)" v-for="(item,index) in giveList">
 						<view class="itemImage">
-							<image class="imageBanner" :src="item.image" mode="widthFix"></image>
+							<image class="imageBanner" :src="item.image" mode="aspectFill"></image>
 						</view>
 						<view class="itemContent">
 							<view class="itemTitle">
@@ -106,9 +108,9 @@
 								<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
 								           ></baseMoney>
 							</view>
-							<view class="greenIn" v-if="item.give_award_range">
+							<view class="greenIn" v-if="item.green_integral">
 								<text class="greenText">
-								{{item.give_award_range}}
+								{{item.green_integral}}
 								</text>
 								绿积分
 							</view>
@@ -120,9 +122,36 @@
 						</view>
 					</view>
 				</view>
-				<block v-for="(item, index) in styleConfig" :key="index">
-					<!-- 商品列表 -->
-				</block>
+				<view class="goodsTitle" v-if="pjList.length>0">
+					<image class="bannerImg2" src="../../static/img/indexGoods3.png" mode="scaleToFill"></image>
+				</view>
+				<view class="goodsItem" v-if="pjList.length>0">
+					<view class="itemList" @click="addCartChange(item)" v-for="(item,index) in pjList">
+						<view class="itemImage">
+							<image class="imageBanner" :src="item.image" mode="aspectFill"></image>
+						</view>
+						<view class="itemContent">
+							<view class="itemTitle">
+								{{item.store_name}}
+							</view>
+							<view class="itemMoney">
+								<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
+								           ></baseMoney>
+							</view>
+							<!-- <view class="greenIn" v-if="item.green_integral">
+								<text class="greenText">
+								{{item.green_integral}}
+								</text>
+								绿积分
+							</view> -->
+							<view class="bottomCart">
+								<view class="flex-center cart-btn">
+									<text class="iconfont icon-ic_increase fs-26"></text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
 				<!-- 分类商品模块 -->
 				<!-- #ifndef  APP-PLUS -->
 				<view class="sort-product px-20" v-if="sortList.children && sortList.children.length">
@@ -379,6 +408,7 @@
 				pdHeight: 0, //自定义底部导航上下边距和
 				giveList: [], //爆单商品
 				joinList: [], //抢购商品
+				pjList: [], //平价商品
 			};
 		},
 		onLoad(options) {
@@ -483,18 +513,26 @@
 			getInitGoods() {
 				getProductslist({
 					page: 1,
-					limit: 1000,
+					limit: 10,
 					give_award_range: 1,
 				}).then(res => {
 					this.giveList = res.data
 				});
 				getProductslist({
 					page: 1,
-					limit: 1000,
+					limit: 10,
 					join_games: 1,
 				}).then(res => {
 					this.joinList = res.data
 				});
+				getProductslist({
+					page: 1,
+					limit: 10,
+					give_award_range: 0,
+					join_games: 0,
+				}).then(res => {
+					this.pjList = res.data
+				});
 			},
 			getCopyRight() {
 				copyRight().then(res => {
@@ -1046,9 +1084,17 @@
 
 	.goodsTitle {
 		font-size: 30rpx;
-		padding: 0rpx 30rpx;
-		line-height: 1;
-
+		// padding: 0rpx 30rpx;
+		line-height: 0;
+		text-align: center;
+		.bannerImg{
+			width: 100%;
+			height: 175rpx;
+		}
+		.bannerImg2{
+			width: 400rpx;
+			height: 36rpx;
+		}
 		.borderBottom {
 			border-bottom: 4px solid #e93323;
 		}
@@ -1061,10 +1107,11 @@
 		padding: 30rpx;
 
 		.itemList {
-			width: 48%;
+			width: 330rpx;
 			border-radius: 20rpx;
 			overflow: hidden;
 			background-color: #FFF;
+			margin-bottom: 30rpx;
 		}
 		.itemContent{
 			padding:  20rpx;
@@ -1072,6 +1119,10 @@
 			position: relative;
 			.itemTitle{
 				font-size: 28rpx;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+				
 			}
 			.itemMoney{
 				color: var(--view-theme);
@@ -1101,7 +1152,8 @@
 		.itemImage {
 			line-height: 0;
 			.imageBanner {
-				width: 100%;
+				width: 330rpx;
+				height: 330rpx;
 			}
 		}
 	}

pages/users/user_money/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 我的余额模块 -->
+	<!-- 我的余额模块 -->
 	<view :style="colorStyle">
 		<view class='my-account'>
 			<!-- #ifdef MP -->
@@ -21,8 +21,8 @@
 								<view class='money'>{{userInfo.now_money || 0}}</view>
 							</view>
 							<!-- #ifdef APP-PLUS || H5 -->
-							<navigator url="/pages/users/user_payment/index" hover-class="none"
-								class='recharge'>充值</navigator>
+							<navigator url="/pages/users/user_payment/index" hover-class="none" class='recharge'>充值
+							</navigator>
 							<!-- #endif -->
 							<!-- #ifdef MP -->
 							<view v-if="recharge_switch" @click="openSubscribe('/pages/users/user_payment/index')"
@@ -53,7 +53,8 @@
 					</view>
 				</view>
 				<view class="nav acea-row row-between-wrapper">
-					<navigator class='item acea-row row-between-wrapper' hover-class='none' url='/pages/users/user_bill/index?type=1'>
+					<navigator class='item acea-row row-between-wrapper' hover-class='none'
+						url='/pages/users/user_bill/index?type=1'>
 						<view class="left">
 							<view class="name">消费记录</view>
 							<view>赚积分抵现金</view>
@@ -62,7 +63,8 @@
 							<image src="../static/xiaofeijilu.png"></image>
 						</view>
 					</navigator>
-					<navigator class='item acea-row row-between-wrapper' hover-class='none' url='/pages/users/user_bill/index?type=2' v-if="recharge_switch">
+					<navigator class='item acea-row row-between-wrapper' hover-class='none'
+						url='/pages/users/user_bill/index?type=2' v-if="recharge_switch">
 						<view class="left">
 							<view class="name">充值记录</view>
 							<view>满减享优惠</view>
@@ -103,6 +105,11 @@
 			</view>
 			<recommend :hostProduct="hostProduct"></recommend>
 		</view>
+		<navigator url="/pages/users/user_payment/money">
+			<view class="brokerageMoney">
+				转佣金
+			</view>
+		</navigator>
 	</view>
 </template>
 
@@ -126,7 +133,7 @@
 	import recommend from '@/components/recommend/index';
 	import home from '@/components/home';
 	import colors from "@/mixins/color";
-  import {
+	import {
 		HTTP_REQUEST_URL
 	} from '@/config/app';
 	export default {
@@ -136,7 +143,7 @@
 		mixins: [colors],
 		data() {
 			return {
-                imgHost: HTTP_REQUEST_URL,
+				imgHost: HTTP_REQUEST_URL,
 				// #ifdef MP
 				getHeight: this.$util.getWXStatusHeight(),
 				// #endif
@@ -177,7 +184,7 @@
 			uni.removeStorageSync('form_type_cart');
 		},
 		methods: {
-			goarrow(){
+			goarrow() {
 				uni.navigateBack()
 			},
 			// #ifdef MP
@@ -240,39 +247,44 @@
 </script>
 
 <style scoped lang="scss">
-	/deep/.recommend{
+	/deep/.recommend {
 		padding: 40rpx 20rpx 0 20rpx;
 	}
-	.my-account{
-		.accountTitle{
+
+	.my-account {
+		.accountTitle {
 			background-color: var(--view-minorColorT);
 			position: fixed;
-			left:0;
-			top:0;
+			left: 0;
+			top: 0;
 			width: 100%;
 			z-index: 99;
-			.sysTitle{
+
+			.sysTitle {
 				width: 100%;
 				position: relative;
 				font-weight: 500;
 				color: #333333;
 				font-size: 30rpx;
-				.iconfont{
+
+				.iconfont {
 					position: absolute;
 					font-size: 36rpx;
-					left:11rpx;
+					left: 11rpx;
 					width: 60rpx;
 				}
 			}
 		}
-		.advert{
+
+		.advert {
 			width: 710rpx;
 			height: 332rpx;
 			background: #FFFFFF;
 			border-radius: 24rpx;
 			margin: 20rpx auto 0 auto;
 			padding: 0 32rpx;
-			.title{
+
+			.title {
 				font-size: 32rpx;
 				font-weight: 500;
 				color: #333333;
@@ -280,28 +292,34 @@
 				line-height: 108rpx;
 				border-bottom: 1px solid #eee;
 			}
-			.list{
+
+			.list {
 				margin-top: 34rpx;
-				.line{
+
+				.line {
 					height: 126rpx;
 					width: 1rpx;
 					background-color: #EEEEEE;
 				}
-				.item{
+
+				.item {
 					text-align: center;
 					font-weight: 400;
 					color: #999999;
 					font-size: 22rpx;
-					.pictrue{
+
+					.pictrue {
 						width: 66rpx;
 						height: 66rpx;
-						margin:  0 auto;
-						image{
+						margin: 0 auto;
+
+						image {
 							width: 100%;
 							height: 100%;
 						}
 					}
-					.name{
+
+					.name {
 						font-weight: 500;
 						color: #333333;
 						font-size: 28rpx;
@@ -311,6 +329,7 @@
 			}
 		}
 	}
+
 	.my-account .wrapper {
 		padding-top: 32rpx;
 		background: linear-gradient(180deg, var(--view-minorColorT) 0%, #f5f5f5 100%);
@@ -327,8 +346,8 @@
 		font-size: 24rpx;
 		position: relative;
 	}
-	
-	.my-account .wrapper .header .headerCon{
+
+	.my-account .wrapper .header .headerCon {
 		padding-top: 36rpx;
 	}
 
@@ -338,7 +357,8 @@
 		position: absolute;
 		right: 0;
 		bottom: 0;
-		image{
+
+		image {
 			width: 100%;
 			height: 100%;
 		}
@@ -360,7 +380,7 @@
 		width: 112rpx;
 		height: 56rpx;
 		border-radius: 50rpx;
-		background-color: rgba(255,255,255,0.8);
+		background-color: rgba(255, 255, 255, 0.8);
 		text-align: center;
 		line-height: 56rpx;
 		color: var(--view-theme);
@@ -370,7 +390,7 @@
 	.my-account .wrapper .header .headerCon .cumulative {
 		width: 100%;
 		height: 142rpx;
-		background: rgba(255,255,255,0.1);
+		background: rgba(255, 255, 255, 0.1);
 		margin-top: 62rpx;
 		padding-left: 32rpx;
 		position: absolute;
@@ -391,11 +411,11 @@
 		color: #fff;
 		margin-top: 12rpx;
 	}
-	
+
 	.my-account .wrapper .nav {
 		margin: 20rpx;
 	}
-	
+
 	.my-account .wrapper .nav .item {
 		font-size: 24rpx;
 		color: #999;
@@ -406,18 +426,20 @@
 		border: 4rpx solid #fff;
 		padding: 0 31rpx;
 		box-sizing: border-box;
-		.name{
+
+		.name {
 			font-size: 28rpx;
 			color: #333;
 			font-weight: 500;
 			margin-bottom: 8rpx;
 		}
 	}
-	
+
 	.my-account .wrapper .nav .item .pictrue {
 		width: 96rpx;
 		height: 96rpx;
-		image{
+
+		image {
 			width: 100%;
 			height: 100%;
 		}
@@ -482,4 +504,21 @@
 		background-color: #f2f2f2;
 		border-color: #f2f2f2;
 	}
-</style>
+
+	.brokerageMoney {
+		margin-right: 30rpx;
+		border-radius: 50rpx;
+		text-align: center;
+		font-weight: bold;
+		padding: 10rpx 30rpx;
+		line-height: 1;
+		position: absolute;
+		bottom: 30rpx;
+		width: 690rpx;
+		margin: 0 30rpx;
+		color: #FFF;
+		padding: 30rpx 30rpx;
+		font-size: 32rpx;
+		background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
+	}
+</style>

pages/users/user_payment/money.vue

@@ -0,0 +1,541 @@
+<template>
+	<view :style="colorStyle">
+		<!-- #ifdef MP -->
+		<view class="accountTitle">
+			<view :style="{height:getHeight.barTop+'px'}"></view>
+			<view class="sysTitle acea-row row-center-wrapper" :style="{height:getHeight.barHeight+'px'}">
+				<view>账户充值</view>
+				<text class="iconfont icon-ic_leftarrow" @click="goarrow"></text>
+			</view>
+		</view>
+		<view :style="{height:(getHeight.barTop+getHeight.barHeight)+'px'}"></view>
+		<!-- #endif -->
+		<form @submit="submitSub">
+			<view class="paymentCon">
+				<view class="payment-top">
+					<span class="name">我的余额</span>
+					<view class="money">{{ userinfo.now_money || 0 }}</view>
+					<view class="pictrue">
+						<image src="../static/chongzhi.png"></image>
+					</view>
+				</view>
+			</view>
+			<view class="payment">
+				<view class="tip">
+					<view class="title">转到佣金</view>
+					<view class='input acea-row row-middle'><text>￥</text><input @input='inputNum'
+							:maxlength="moneyMaxLeng" placeholder="请输入转到佣金金额" type='digit'
+							placeholder-class='placeholder' v-model="number" name="number"></input></view>
+				</view>
+				<button class='but bg-color' formType="submit">立即转佣金</button>
+			</view>
+		</form>
+		<!-- 确认框 -->
+		<tuiModal :show="showModal" title="温馨提示" content="确认是否转到佣金？" :maskClosable="false" @click="handleClick">
+		</tuiModal>
+	</view>
+</template>
+
+<script>
+	import {
+		getUserInfo,
+		brokerageImport,
+		getRechargeApi,
+		memberCardCreate
+	} from '@/api/user.js';
+	import tuiModal from "@/components/tui-modal/index.vue"
+	import {
+		toLogin
+	} from '@/libs/login.js';
+	import {
+		orderOfflinePayType
+	} from '@/api/order.js';
+	import {
+		mapGetters
+	} from "vuex";
+	import colors from "@/mixins/color";
+	import {
+		openPaySubscribe
+	} from '@/utils/SubscribeMessage.js';
+	export default {
+		components: {
+			tuiModal
+		},
+		mixins: [colors],
+		data() {
+			let that = this;
+			return {
+				// #ifdef MP
+				getHeight: this.$util.getWXStatusHeight(),
+				// #endif
+				now_money: 0,
+				navRecharge: ['账户充值', '佣金转入'],
+				active: 0,
+				number: '',
+				userinfo: {},
+				placeholder: "0.00",
+				from: '',
+				isAuto: false, //没有授权的不会自动授权
+				isShowAuth: false, //是否隐藏授权
+				picList: [],
+				activePic: 0,
+				money: "",
+				numberPic: '',
+				rechar_id: 0,
+				password: '',
+				goodsList: [],
+				pay_order_id: '',
+				payType: '',
+				totalPrice: '0',
+				formContent: '',
+				// #ifdef H5
+				isWeixin: this.$wechat.isWeixin(),
+				// #endif
+				type: '',
+				rechargeAttention: [],
+				moneyMaxLeng: 8,
+				showModal: false,
+				balanceStatus: 0
+			};
+		},
+		computed: mapGetters(['isLogin']),
+		watch: {
+			isLogin: {
+				handler: function(newV, oldV) {
+					if (newV) {
+						//#ifndef MP
+						this.getUserInfo();
+						this.getRecharge();
+						//#endif
+					}
+				},
+				deep: true
+			}
+		},
+		onLoad(options) {
+			if (this.isLogin) {
+				this.getUserInfo();
+				this.getRecharge();
+			} else {
+				toLogin();
+			}
+		},
+		onShow() {
+			uni.removeStorageSync('form_type_cart');
+		},
+		methods: {
+			allChange() {
+				this.number = this.userinfo.commissionCount;
+			},
+			goarrow() {
+				let pages = getCurrentPages();
+				let prevPage = pages[pages.length - 2];
+				if (prevPage) {
+					uni.navigateBack()
+				} else {
+					uni.reLaunch({
+						url: '/pages/index/index'
+					})
+				}
+			},
+			inputNum: function(e) {
+				let val = e.detail.value;
+				let dot = val.indexOf('.');
+				if (dot > -1) {
+					this.moneyMaxLeng = dot + 3;
+				} else {
+					this.moneyMaxLeng = 8
+				}
+			},
+			/**
+			 * 选择金额
+			 */
+			picCharge(idx, item) {
+				this.activePic = idx;
+				if (item === undefined) {
+					this.rechar_id = 0;
+					this.numberPic = "";
+				} else {
+					this.money = "";
+					this.rechar_id = item.id;
+					this.numberPic = item.price;
+				}
+			},
+
+			/**
+			 * 充值额度选择
+			 */
+			getRecharge() {
+				getRechargeApi().then(res => {
+					this.picList = res.data.recharge_quota;
+					if (this.picList[0]) {
+						this.rechar_id = this.picList[0].id;
+						this.numberPic = this.picList[0].price;
+					}
+					this.rechargeAttention = res.data.recharge_attention || [];
+					this.balanceStatus = res.data.user_extract_balance_status;
+				}).catch(res => {
+					this.$util.Tips({
+						title: res
+					})
+				});
+			},
+			navRecharges: function(index) {
+				this.active = index;
+			},
+			getUserInfo: function() {
+				let that = this;
+				getUserInfo().then(res => {
+					that.$set(that, 'userinfo', res.data);
+				})
+			},
+			handleClick(e) {
+					let data = {
+						money: this.number,
+					};
+					brokerageImport(data).then(res => {
+						this.$util.Tips({
+							title: res.msg
+						}, {
+							url: "/pages/users/user_money/index"
+						})
+					}).catch(err => {
+						return this.$util.Tips({
+							title: err
+						})
+					});
+				
+				this.showModal = false;
+			},
+			submitSub: function(e) {
+				let that = this
+				let value = e.detail.value.number;
+				// 转入余额
+				if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
+					return that.$util.Tips({
+						title: '请输入金额'
+					});
+				}
+				this.showModal = true;
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.bgcolor {
+		background-color: var(--view-theme)
+	}
+
+	.accountTitle {
+		background-color: var(--view-minorColorT);
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		z-index: 99;
+
+		.sysTitle {
+			width: 100%;
+			position: relative;
+			font-weight: 500;
+			color: #333333;
+			font-size: 30rpx;
+
+			.iconfont {
+				position: absolute;
+				font-size: 36rpx;
+				left: 11rpx;
+				width: 60rpx;
+			}
+		}
+	}
+
+	.payment {
+		position: relative;
+		width: 710rpx;
+		background-color: #fff;
+		border-radius: 32rpx;
+		margin: -176rpx auto 0 auto;
+		padding-bottom: 64rpx;
+	}
+
+	.payment .nav {
+		height: 96rpx;
+		line-height: 96rpx;
+		background-color: #f5f5f5;
+		border-radius: 32rpx 32rpx 0 0;
+	}
+
+	.payment .nav .item {
+		font-size: 30rpx;
+		color: #333;
+		width: 280rpx;
+		text-align: center;
+		padding-right: 40rpx;
+		position: relative;
+
+		&.on1 {
+			padding-right: 62rpx;
+			background-image: url('../static/titleLeft.png');
+
+			&::after {
+				margin-left: 150rpx;
+			}
+		}
+
+		&.on2 {
+			padding-left: 62rpx;
+			background-image: url('../static/titleRight.png');
+
+			&::after {
+				margin-left: 192rpx;
+			}
+		}
+
+		&.on3 {
+			padding-left: 62rpx;
+		}
+	}
+
+	.payment .nav .item.on {
+		font-weight: bold;
+		width: 407rpx;
+		height: 96rpx;
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		text-align: center;
+
+		&::after {
+			width: 38rpx;
+			height: 30rpx;
+			border: 2px solid var(--view-theme);
+			border-left: 2px solid transparent !important;
+			border-top: 2px solid transparent !important;
+			border-right: 2px solid transparent !important;
+			border-radius: 50%;
+			position: absolute;
+			content: ' ';
+			left: 0;
+			bottom: 10rpx;
+		}
+	}
+
+	.payment .input {
+		margin: 32rpx auto 0 auto;
+		font-size: 56rpx;
+		color: #333333;
+		background: #F5F5F5;
+		border-radius: 16rpx;
+		height: 114rpx;
+	}
+
+	.payment .input text {
+		padding-left: 26rpx;
+		font-weight: 600;
+	}
+
+	.payment .input input {
+		width: 520rpx;
+		height: 94rpx;
+		font-size: 60rpx;
+		margin-left: 24rpx;
+		font-family: 'SemiBold';
+	}
+
+	.payment .input .placeholder {
+		font-weight: 400;
+		color: #DDDDDD;
+		height: 100%;
+		line-height: 94rpx;
+		font-size: 32rpx;
+	}
+
+	.payment .tip {
+		font-size: 26rpx;
+		color: #888888;
+		padding: 30rpx 33rpx 0 33rpx;
+
+		.title {
+			font-weight: 400;
+			color: #333333;
+			font-size: 28rpx;
+		}
+	}
+
+	.payment .but {
+		color: #fff;
+		font-size: 28rpx;
+		width: 646rpx;
+		height: 88rpx;
+		border-radius: 50rpx;
+		margin: 50rpx auto 0 auto;
+		line-height: 88rpx;
+		font-weight: 500;
+		background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
+	}
+
+	.paymentCon {
+		background: linear-gradient(180deg, var(--view-minorColorT) 0%, #f5f5f5 100%);
+		padding-top: 32rpx;
+	}
+
+	.payment-top {
+		width: 710rpx;
+		height: 396rpx;
+		background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
+		margin: 0 auto;
+		border-radius: 32rpx 32rpx 0 0;
+		padding: 56rpx 60rpx;
+		box-sizing: border-box;
+		position: relative;
+
+		.name {
+			font-size: 28rpx;
+			color: rgba(255, 255, 255, 0.8);
+		}
+
+		.money {
+			font-size: 68rpx;
+			color: #fff;
+			font-family: 'SemiBold';
+			margin-top: 16rpx;
+		}
+
+		.pictrue {
+			width: 186rpx;
+			height: 186rpx;
+			position: absolute;
+			right: 60rpx;
+			top: 66rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+	.picList {
+		display: flex;
+		flex-wrap: wrap;
+
+		.pic-box {
+			width: 204rpx;
+			height: 144rpx;
+			border-radius: 20rpx;
+			padding: 28rpx 0 26rpx 0;
+			margin: 16rpx 16rpx 0 0;
+			box-sizing: border-box;
+			position: relative;
+
+			&:nth-child(3n) {
+				margin-right: 0;
+			}
+
+			.label {
+				position: absolute;
+				left: -2rpx;
+				top: -18rpx;
+				width: 118rpx;
+				height: 40rpx;
+				background: linear-gradient(270deg, #FAAD14 0%, #FF7D00 100%);
+				border-radius: 16rpx 0 16rpx 0;
+				color: #fff;
+				font-size: 22rpx;
+				text-align: center;
+				line-height: 40rpx;
+			}
+		}
+
+		.pic-box-color {
+			background-color: #F5F5F5;
+			color: #333;
+			border: 1px solid #F5F5F5;
+		}
+
+		.pic-number {
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #999999;
+			margin-top: 6rpx;
+		}
+
+		.pic-number-pic {
+			font-size: 36rpx;
+			font-weight: 500;
+			width: 100%;
+			text-align: center;
+
+			.money {
+				margin-left: 10rpx;
+			}
+		}
+
+		.pic-box-money {
+			height: 70rpx;
+			font-size: 32rpx;
+			text-align: center;
+			font-weight: 500;
+			line-height: 70rpx;
+		}
+
+		.placeholders {
+			color: #333333;
+		}
+
+		.pic-box-color-active {
+			background-color: var(--view-minorColorT) !important;
+			color: var(--view-theme) !important;
+			border: 1px solid var(--view-theme);
+
+			.pic-number,
+			.placeholders {
+				color: var(--view-theme) !important;
+			}
+		}
+	}
+
+	.tips-box {
+		margin-top: 48rpx;
+		width: 100%;
+		padding: 0 32rpx;
+		box-sizing: border-box;
+
+		.tips {
+			font-size: 32rpx;
+			color: #333333;
+			font-weight: 600;
+			margin-bottom: 24rpx;
+		}
+
+		.tips-samll {
+			font-size: 24rpx;
+			color: #999;
+			margin-bottom: 20rpx;
+
+			.drop {
+				width: 10rpx;
+				height: 10rpx;
+				background-color: var(--view-theme);
+				border-radius: 50%;
+				margin-top: 12rpx;
+			}
+
+			.info {
+				width: 620rpx;
+			}
+		}
+
+		.tip-box {
+			margin-top: 30rpx;
+		}
+	}
+
+	.tips-title {
+		margin-top: 32rpx;
+		font-size: 26rpx;
+		color: #333;
+	}
+</style>

utils/util.js

@@ -134,19 +134,20 @@ export default {
 	},
 	// 将网络图片转化为base64
 	getBase64Image: function(imageUrl) {
-	  return new Promise((resolve, reject) => {
-	    uni.request({
-	      url: imageUrl, // 服务器图片地址
-	      responseType: 'arraybuffer', // 设置响应类型为arraybuffer以接收二进制数据
-	      success: (res) => {
-	        let base64Image = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(res.data);
-	        resolve(base64Image);
-	      },
-	      fail: (err) => {
-	        reject(err);
-	      }
-	    });
-	  });
+		return new Promise((resolve, reject) => {
+			uni.request({
+				url: imageUrl, // 服务器图片地址
+				responseType: 'arraybuffer', // 设置响应类型为arraybuffer以接收二进制数据
+				success: (res) => {
+					let base64Image = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(res
+						.data);
+					resolve(base64Image);
+				},
+				fail: (err) => {
+					reject(err);
+				}
+			});
+		});
 	},
 	// 计算头部自定义导航高度；
 	getWXStatusHeight() {
@@ -620,9 +621,9 @@ export default {
 				ctx.fillRect(0, 0, w, h);
 				ctx.drawImage(arr2[1], 0, 0, w, h);
 				ctx.save();
-				
-				
-				ctx.drawImage(arr2[0], w-86, 386, 70, 70);
+
+
+				ctx.drawImage(arr2[0], w - 86, 386, 70, 70);
 				ctx.save();
 
 				ctx.setFontSize(16);
@@ -716,72 +717,99 @@ export default {
 	 */
 	uploadImageOne: function(opt, successCallback, errorCallback) {
 		let that = this;
-		if (typeof opt === 'string') {
-			let url = opt;
-			opt = {};
-			opt.url = url;
+		// #ifdef APP
+		let boolad = uni.getStorageSync("boolLoad") || false
+		// if (permision.isIOS) {
+		if (boolad) {
+			upimg()
+		} else {
+			let title = '申请相册权限';
+			let content = "是否允许访问相册用于上传图片？"
+			uni.showModal({
+				title,
+				content,
+				cancelText: '拒绝',
+				confirmText: '允许',
+				success: res => {
+					if (res.confirm) {
+						uni.setStorageSync("boolLoad", true)
+						upimg()
+					}
+				},
+			});
 		}
-		let count = opt.count || 1,
-			sizeType = opt.sizeType || ['compressed'],
-			sourceType = opt.sourceType || ['album', 'camera'],
-			is_load = opt.is_load || true,
-			uploadUrl = opt.url || '',
-			inputName = opt.name || 'pics',
-			fileType = opt.fileType || 'image';
-		uni.chooseImage({
-			count: count, //最多可以选择的图片总数  
-			sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有  
-			sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有  
-			success: function(res) {
-				//启动上传等待中...  
-				uni.showLoading({
-					title: '图片上传中',
-				});
-				uni.uploadFile({
-					url: HTTP_REQUEST_URL + '/api/' + uploadUrl,
-					filePath: res.tempFilePaths[0],
-					fileType: fileType,
-					name: inputName,
-					formData: {
-						'filename': inputName
-					},
-					header: {
-						// #ifdef MP
-						"Content-Type": "multipart/form-data",
-						// #endif
-						[TOKENNAME]: 'Bearer ' + store.state.app.token
-					},
-					success: function(res) {
-						uni.hideLoading();
-						if (res.statusCode == 403) {
-							that.Tips({
-								title: res.data
-							});
-						} else if (res.statusCode == 413) {
-							that.Tips({
-								title: '上传图片失败,请重新上传小尺寸图片'
-							});
-						} else {
-							let data = res.data ? JSON.parse(res.data) : {};
-							if (data.status == 200) {
-								successCallback && successCallback(data)
-							} else {
-								errorCallback && errorCallback(data);
+		// #endif
+		// #ifndef APP
+		upimg()
+		// #endif
+		function upimg() {
+			if (typeof opt === 'string') {
+				let url = opt;
+				opt = {};
+				opt.url = url;
+			}
+			let count = opt.count || 1,
+				sizeType = opt.sizeType || ['compressed'],
+				sourceType = opt.sourceType || ['album', 'camera'],
+				is_load = opt.is_load || true,
+				uploadUrl = opt.url || '',
+				inputName = opt.name || 'pics',
+				fileType = opt.fileType || 'image';
+			uni.chooseImage({
+				count: count, //最多可以选择的图片总数  
+				sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有  
+				sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有  
+				success: function(res) {
+					//启动上传等待中...  
+					uni.showLoading({
+						title: '图片上传中',
+					});
+					uni.uploadFile({
+						url: HTTP_REQUEST_URL + '/api/' + uploadUrl,
+						filePath: res.tempFilePaths[0],
+						fileType: fileType,
+						name: inputName,
+						formData: {
+							'filename': inputName
+						},
+						header: {
+							// #ifdef MP
+							"Content-Type": "multipart/form-data",
+							// #endif
+							[TOKENNAME]: 'Bearer ' + store.state.app.token
+						},
+						success: function(res) {
+							uni.hideLoading();
+							if (res.statusCode == 403) {
+								that.Tips({
+									title: res.data
+								});
+							} else if (res.statusCode == 413) {
 								that.Tips({
-									title: data.msg
+									title: '上传图片失败,请重新上传小尺寸图片'
 								});
+							} else {
+								let data = res.data ? JSON.parse(res.data) : {};
+								if (data.status == 200) {
+									successCallback && successCallback(data)
+								} else {
+									errorCallback && errorCallback(data);
+									that.Tips({
+										title: data.msg
+									});
+								}
 							}
+						},
+						fail: function(res) {
+							uni.hideLoading();
+							that.Tips({
+								title: '上传图片失败'
+							});
 						}
-					},
-					fail: function(res) {
-						uni.hideLoading();
-						that.Tips({
-							title: '上传图片失败'
-						});
-					}
-				})
-			}
-		})
+					})
+				}
+			})
+		}
 	},
 	/*
 	 * 单图上传压缩版
@@ -791,80 +819,110 @@ export default {
 	 */
 	uploadImageChange: function(opt, successCallback, errorCallback, sizeCallback) {
 		let that = this;
-		if (typeof opt === 'string') {
-			let url = opt;
-			opt = {};
-			opt.url = url;
+		// #ifdef APP
+		let boolad = uni.getStorageSync("boolLoad") || false
+		// if (permision.isIOS) {
+		if (boolad || plus.os.name == "iOS") {
+			upimg()
+		} else {
+			let title = '申请相册权限';
+			let content = "是否允许访问相册用于上传图片？"
+			uni.showModal({
+				title,
+				content,
+				cancelText: '拒绝',
+				confirmText: '允许',
+				success: res => {
+					if (res.confirm) {
+						uni.setStorageSync("boolLoad", true)
+						upimg()
+					}
+				},
+			});
 		}
-		let count = opt.count || 1,
-			sizeType = opt.sizeType || ['compressed'],
-			sourceType = opt.sourceType || ['album', 'camera'],
-			is_load = opt.is_load || true,
-			uploadUrl = opt.url || '',
-			inputName = opt.name || 'pics',
-			fileType = opt.fileType || 'image';
-		uni.chooseImage({
-			count: count, //最多可以选择的图片总数  
-			sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有  
-			sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有  
-			success: function(res) {
-				//启动上传等待中...  
-				let imgSrc
-				let objImg = res.tempFilePaths;
-				objImg.forEach(item => {
-					uni.getImageInfo({
-						src: item,
-						success(ress) {
-							uni.showLoading({
-								title: '图片上传中',
-							});
-							if (res.tempFiles[0].size <= 2097152) {
-								uploadImg(ress.path)
-								return
-							}
-							// uploadImg(canvasPath.tempFilePath)
-							let canvasWidth, canvasHeight, xs, maxWidth = 750
-							xs = ress.width / ress.height // 宽高比例
-							if (ress.width > maxWidth) {
-								canvasWidth = maxWidth // 这里是最大限制宽度
-								canvasHeight = maxWidth / xs
-							} else {
-								canvasWidth = ress.width
-								canvasHeight = ress.height
-							}
-							sizeCallback && sizeCallback({
-								w: canvasWidth,
-								h: canvasHeight
-							})
-							let canvas = uni.createCanvasContext('canvas');
-							canvas.width = canvasWidth
-							canvas.height = canvasHeight
-							canvas.clearRect(0, 0, canvasWidth, canvasHeight);
-							canvas.drawImage(ress.path, 0, 0, canvasWidth, canvasHeight)
-							canvas.save();
-							// 这里的画布drawImage是一种异步属性  可能存在未绘制全就执行了draw的问题  so添加延迟
-							setTimeout(e => {
-								canvas.draw(true, () => {
-									uni.canvasToTempFilePath({
-										canvasId: 'canvas',
-										fileType: 'JPEG',
-										destWidth: canvasWidth,
-										destHeight: canvasHeight,
-										quality: 0.7,
-										success: function(canvasPath) {
-											uploadImg(canvasPath
-												.tempFilePath)
-										}
-									})
+		// #endif
+		// #ifndef APP
+		upimg()
+		// #endif
+		function upimg() {
+			if (typeof opt === 'string') {
+				let url = opt;
+				opt = {};
+				opt.url = url;
+			}
+			let count = opt.count || 1,
+				sizeType = opt.sizeType || ['compressed'],
+				sourceType = opt.sourceType || ['album', 'camera'],
+				is_load = opt.is_load || true,
+				uploadUrl = opt.url || '',
+				inputName = opt.name || 'pics',
+				fileType = opt.fileType || 'image';
+			uni.chooseImage({
+				count: count, //最多可以选择的图片总数  
+				sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有  
+				sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有  
+				success: function(res) {
+					//启动上传等待中...  
+					let imgSrc
+					let objImg = res.tempFilePaths;
+					objImg.forEach(item => {
+						uni.getImageInfo({
+							src: item,
+							success(ress) {
+								uni.showLoading({
+									title: '图片上传中',
 								});
-							}, 200)
-
-
-						}
+								if (res.tempFiles[0].size <= 2097152) {
+									uploadImg(ress.path)
+									return
+								}
+								// uploadImg(canvasPath.tempFilePath)
+								let canvasWidth, canvasHeight, xs, maxWidth = 750
+								xs = ress.width / ress.height // 宽高比例
+								if (ress.width > maxWidth) {
+									canvasWidth = maxWidth // 这里是最大限制宽度
+									canvasHeight = maxWidth / xs
+								} else {
+									canvasWidth = ress.width
+									canvasHeight = ress.height
+								}
+								sizeCallback && sizeCallback({
+									w: canvasWidth,
+									h: canvasHeight
+								})
+								let canvas = uni.createCanvasContext('canvas');
+								canvas.width = canvasWidth
+								canvas.height = canvasHeight
+								canvas.clearRect(0, 0, canvasWidth, canvasHeight);
+								canvas.drawImage(ress.path, 0, 0, canvasWidth,
+									canvasHeight)
+								canvas.save();
+								// 这里的画布drawImage是一种异步属性  可能存在未绘制全就执行了draw的问题  so添加延迟
+								setTimeout(e => {
+									canvas.draw(true, () => {
+										uni.canvasToTempFilePath({
+											canvasId: 'canvas',
+											fileType: 'JPEG',
+											destWidth: canvasWidth,
+											destHeight: canvasHeight,
+											quality: 0.7,
+											success: function(
+												canvasPath
+												) {
+												uploadImg(
+													canvasPath
+													.tempFilePath
+												)
+											}
+										})
+									});
+								}, 200)
+							}
+						})
 					})
-				})
-			}
-		})
+				}
+			})
+		}
 
 		function uploadImg(filePath) {
 			uni.uploadFile({