1.修改商品规格中可能出现的sku判断，优化选择商品规格上下滑动。2.优化登录页面样式。3.优化购物车样式

components/m-buy/goods.vue

@@ -48,7 +48,7 @@
           </view>
         </view>
         <!-- 商品信息 -->
-        <view class="goods-skus-box">
+          <scroll-view class="goods-skus-box" :scroll-y="true">
           <!-- 规格 -->
           <view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
             <view class="skus-view-list">
@@ -65,7 +65,7 @@
               :input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
             </u-number-box>
           </view>
-        </view>
+          </scroll-view>
         <!-- 按钮 -->
         <view class="btns">
 
@@ -142,7 +142,7 @@ export default {
 
     /**点击规格 */
     handleClickSpec(val, index, specValue) {
-      this.$set(this.currentSelceted, index, specValue.value);
+       this.currentSelceted[index] = specValue.value;
       let selectedSkuId = this.goodsSpec.find((i) => {
         let matched = true;
         let specValues = i.specValues.filter((j) => j.specName !== "images");
@@ -156,6 +156,8 @@ export default {
           return i;
         }
       });
+      if (selectedSkuId?.skuId) {
+        this.$set(this.currentSelceted, index, specValue.value);
         this.selectSkuList = {
           spec: {
             specName: val.name,
@@ -169,6 +171,13 @@ export default {
           skuId: selectedSkuId.skuId,
           goodsId: this.goodsDetail.goodsId,
         });
+      } else {
+        uni.showToast({
+          title: "暂无该商品!",
+          duration: 2000,
+          icon: "none",
+        });
+      }
     },
 
     /**

components/verify-code/verify-code.vue

@@ -0,0 +1,278 @@
+<template>
+	<view class="xt__verify-code">
+		<!-- 输入框 -->
+		<input
+			id="xt__input"
+			:value="code"
+			class="xt__input"
+			:focus="isFocus"
+			:password="isPassword"
+			:type="inputType"
+			:maxlength="size"
+			@input="input"
+			@focus="inputFocus"
+			@blur="inputBlur"
+		/>
+
+		<!-- 光标 -->
+		<view
+			id="xt__cursor"
+			v-if="cursorVisible && type !== 'middle'"
+			class="xt__cursor"
+			:style="{ left: codeCursorLeft[code.length] + 'px', height: cursorHeight + 'px', backgroundColor: cursorColor }"
+		></view>
+
+		<!-- 输入框 - 组 -->
+		<view id="xt__input-ground" class="xt__input-ground">
+			<template v-for="(item, index) in size">
+				<view
+					:key="index"
+					:style="{ borderColor: code.length === index && cursorVisible ? boxActiveColor : boxNormalColor }"
+					:class="['xt__box', `xt__box-${type + ''}`, `xt__box::after`]"
+				>
+					<view :style="{ borderColor: boxActiveColor }" class="xt__middle-line" v-if="type === 'middle' && !code[index]"></view>
+					<text class="xt__code-text">{{ code[index] | codeFormat(isPassword) }}</text>
+				</view>
+			</template>
+		</view>
+	</view>
+</template>
+<script>
+/**
+ * @description 输入验证码组件
+ * @property {string} type = [box|middle|bottom] - 显示类型 默认：box -eg:bottom
+ * @property {string} inputType = [text|number] - 输入框类型 默认：number -eg:number
+ * @property {number} size = [4|6] - 支持的验证码数量 默认：6 -eg:6
+ * @property {boolean} isFocus - 是否立即聚焦 默认：true
+ * @property {boolean} isPassword - 是否以密码形式显示 默认false -eg:false
+ * @property {string} cursorColor - 光标颜色 默认：#cccccc
+ * @property {string} boxNormalColor - 光标未聚焦到的框的颜色 默认：#cccccc
+ * @property {string} boxActiveColor - 光标聚焦到的框的颜色 默认：#000000
+ * @event {Function(data)} confirm - 输入完成
+ */
+export default {
+	name: 'xt-verify-code',
+	props: {
+		value: {
+			type: String,
+			default: () => ''
+		},
+		type: {
+			type: String,
+			default: () => 'box'
+		},
+		inputType: {
+			type: String,
+			default: () => 'number'
+		},
+		size: {
+			type: Number,
+			default: () => 6
+		},
+		isFocus: {
+			type: Boolean,
+			default: () => true
+		},
+		isPassword: {
+			type: Boolean,
+			default: () => false
+		},
+		cursorColor: {
+			type: String,
+			default: () => '#cccccc'
+		},
+		boxNormalColor: {
+			type: String,
+			default: () => '#cccccc'
+		},
+		boxActiveColor: {
+			type: String,
+			default: () => '#000000'
+		}
+	},
+	model: {
+		prop: 'value',
+		event: 'input'
+	},
+	data() {
+		return {
+			cursorVisible: false,
+			cursorHeight: 35,
+			code: '', // 输入的验证码
+			codeCursorLeft: [] // 向左移动的距离数组
+		};
+	},
+	created() {
+		this.cursorVisible = this.isFocus;
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		/**
+		 * @description 初始化
+		 */
+		init() {
+			this.getCodeCursorLeft();
+			this.setCursorHeight();
+		},
+		/**
+		 * @description 获取元素节点
+		 * @param {string} elm - 节点的id、class 相当于 document.querySelect的参数 -eg: #id
+		 * @param {string} type = [single|array] - 单个元素获取多个元素 默认是单个元素
+		 * @param {Function} callback - 回调函数
+		 */
+		getElement(elm, type = 'single', callback) {
+			uni
+				.createSelectorQuery()
+				.in(this)
+				[type === 'array' ? 'selectAll' : 'select'](elm)
+				.boundingClientRect()
+				.exec(data => {
+					callback(data[0]);
+				});
+		},
+		/**
+		 * @description 计算光标的高度
+		 */
+		setCursorHeight() {
+			this.getElement('.xt__box', 'single', boxElm => {
+				this.cursorHeight = boxElm.height * 0.6;
+			});
+		},
+		/**
+		 * @description 获取光标在每一个box的left位置
+		 */
+		getCodeCursorLeft() {
+			// 获取父级框的位置信息
+			this.getElement('#xt__input-ground', 'single', parentElm => {
+				const parentLeft = parentElm.left;
+				// 获取各个box信息
+				this.getElement('.xt__box', 'array', elms => {
+					this.codeCursorLeft = [];
+					elms.forEach(elm => {
+						this.codeCursorLeft.push(elm.left - parentLeft + elm.width / 2);
+					});
+				});
+			});
+		},
+
+		// 输入框输入变化的回调
+		input(e) {
+			const value = e.detail.value;
+			this.cursorVisible = value.length !== this.size;
+			this.$emit('input', value);
+			this.inputSuccess(value);
+		},
+
+		// 输入完成回调
+		inputSuccess(value) {
+			if (value.length === this.size) {
+				this.$emit('confirm', value);
+			}
+		},
+		// 输入聚焦
+		inputFocus() {
+			this.cursorVisible = this.code.length !== this.size;
+		},
+		// 输入失去焦点
+		inputBlur() {
+			this.cursorVisible = false;
+		}
+	},
+	watch: {
+		value(val) {
+			this.code = val;
+		}
+	},
+	filters: {
+		codeFormat(val, isPassword) {
+			let value = '';
+			if (val) {
+				value = isPassword ? '*' : val;
+			}
+			return value;
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.xt__verify-code {
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+
+	.xt__input {
+		height: 100%;
+		width: 200%;
+		position: absolute;
+		left: -100%;
+		z-index: 1;
+	}
+	.xt__cursor {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		display: inline-block;
+		width: 2px;
+		animation-name: cursor;
+		animation-duration: 0.8s;
+		animation-iteration-count: infinite;
+	}
+
+	.xt__input-ground {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+		.xt__box {
+			position: relative;
+			display: inline-block;
+			width: 76rpx;
+			height: 112rpx;
+			&-bottom {
+				border-bottom-width: 2px;
+				border-bottom-style: solid;
+			}
+
+			&-box {
+				border-width: 2px;
+				border-style: solid;
+			}
+
+			&-middle {
+				border: none;
+			}
+
+			.xt__middle-line {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				width: 50%;
+				transform: translate(-50%, -50%);
+				border-bottom-width: 2px;
+				border-bottom-style: solid;
+			}
+
+			.xt__code-text {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				font-size:52rpx;
+				transform: translate(-50%, -50%);
+			}
+		}
+	}
+}
+
+@keyframes cursor {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+</style>

manifest.json

@@ -2,8 +2,8 @@
     "name" : "lili商城",
     "appid" : "__UNI__C100675",
     "description" : "",
-    "versionName" : "4.0.46",
+    "versionName" : "4.0.47",
-    "versionCode" : 4000046,
+    "versionCode" : 4000047,
     "transformPx" : false,
     "app-plus" : {
         "compatible" : {

pages/cart/payment/popup/goods.vue

@@ -48,7 +48,7 @@
           </view>
         </view>
         <!-- 商品信息 -->
-        <view class="goods-skus-box">
+          <scroll-view class="goods-skus-box" :scroll-y="true">
           <!-- 规格 -->
           <view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
             <view class="skus-view-list">
@@ -65,7 +65,7 @@
               :input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
             </u-number-box>
           </view>
-        </view>
+          </scroll-view>
         <!-- 按钮 -->
         <view class="btns">
 
@@ -142,7 +142,7 @@ export default {
 
     /**点击规格 */
     handleClickSpec(val, index, specValue) {
-      this.$set(this.currentSelceted, index, specValue.value);
+       this.currentSelceted[index] = specValue.value;
       let selectedSkuId = this.goodsSpec.find((i) => {
         let matched = true;
         let specValues = i.specValues.filter((j) => j.specName !== "images");
@@ -156,6 +156,8 @@ export default {
           return i;
         }
       });
+      if (selectedSkuId?.skuId) {
+        this.$set(this.currentSelceted, index, specValue.value);
         this.selectSkuList = {
           spec: {
             specName: val.name,
@@ -169,6 +171,13 @@ export default {
           skuId: selectedSkuId.skuId,
           goodsId: this.goodsDetail.goodsId,
         });
+      } else {
+        uni.showToast({
+          title: "暂无该商品!",
+          duration: 2000,
+          icon: "none",
+        });
+      }
     },
 
     /**

pages/passport/codeLogin.vue

@@ -1,250 +0,0 @@
-<template>
-  <div class="form">
-    <u-form :model="codeForm" ref="validateCodeForm">
-      <u-form-item class="cell" label-width="120" label="手机号" prop="mobile">
-        <u-input maxlength="11" v-model="codeForm.mobile" placeholder="请输入您的手机号" />
-      </u-form-item>
-
-      <u-form-item class="cell code" label-width="120" prop="code" label="验证码">
-        <div style="display:flex; width:100%;">
-          <u-input maxlength="6" v-model="codeForm.code" placeholder="请输入验证码" />
-          <u-verification-code keep-running unique-key="page-login" :seconds="seconds" @end="end" @start="start"
-            ref="uCode" @change="codeChange"></u-verification-code>
-          <view @tap="getCode" :style="{color:aiderLightColor}" class="text-tips">{{ tips }}</view>
-
-        </div>
-      </u-form-item>
-
-      <view class="submit bg-linear-gradient" @click="submit">登录</view>
-      <view :style="{color:aiderLightColor}" class="text-tips cell" @click="clickLogin">一键登录</view>
-      <myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification" business="LOGIN" />
-    </u-form>
-  </div>
-</template>
-
-<script>
-import { sendMobile, smsLogin } from "@/api/login";
-import { getUserInfo } from "@/api/members";
-import storage from "@/utils/storage.js"; //缓存
-import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
-import myVerification from "@/components/verification/verification.vue"; //验证码模块
-import uuid from "@/utils/uuid.modified.js"; // uuid
-export default {
-  components: {
-    myVerification,
-  },
-  props: ["status"], //是否勾选 《用户隐私》和《隐私政策》
-  data() {
-    return {
-      aiderLightColor: this.$aiderLightColor,
-      uuid,
-      flage: false, //是否验证码验证
-      codeFlag: true, //验证开关，用于是否展示验证码
-      codeForm: {
-        mobile: "", //手机号
-        code: "", //验证码
-      },
-      tips: "", //提示，点击发送验证码和重新发送时赋值
-      clientType: "", // 客户端类型
-      seconds: 60, //默认验证码等待时间
-      // 二维码登录验证规则
-      codeRules: {
-        // 手机号验证
-        mobile: [
-          {
-            validator: (rule, value, callback) => {
-              return this.$u.test.mobile(value);
-            },
-            message: "手机号码不正确",
-            trigger: ["blur"],
-          },
-        ],
-        // 验证码验证
-        code: [
-          {
-            min: 4,
-            max: 6,
-            required: true,
-            message: "请输入验证码",
-            trigger: ["blur"],
-          },
-        ],
-      },
-    };
-  },
-  // 必须要在onReady生命周期setRules，因为onLoad生命周期组件可能尚未创建完毕
-  mounted() {
-    this.$refs.validateCodeForm.setRules(this.codeRules);
-    /**
-     * 条件编译判断当前客户端类型
-     */
-    //#ifdef H5
-    this.clientType = "H5";
-    //#endif
-    //#ifdef APP-PLUS
-
-    this.clientType = "APP";
-    //#endif
-  },
-  watch: {
-    async flage(val) {
-      if (val) {
-        if (this.$refs.uCode.canGetCode) {
-          // 向后端请求验证码
-          uni.showLoading({
-            title: "正在获取验证码",
-          });
-
-          let res = await sendMobile(this.codeForm.mobile);
-
-          uni.hideLoading();
-          // 这里此提示会被this.start()方法中的提示覆盖
-          if (res.data.success) {
-            this.$refs.uCode.start();
-          } else {
-            uni.showToast({
-              title: res.data.message,
-              duration: 2000,
-              icon: "none",
-            });
-            this.flage = false;
-          }
-        } else {
-          this.$u.toast("请倒计时结束后再发送");
-        }
-      } else {
-        this.$refs.verification.hide();
-      }
-    },
-  },
-
-  methods: {
-    // 验证码验证
-    verification(val) {
-      this.flage = val == this.$store.state.verificationKey ? true : false;
-    },
-    //   登录
-    submit() {
-      if (!this.status) {
-        /**
-         * 用户必须了解
-         * 用户协议以及隐私政策
-         */
-        uni.showToast({
-          title: "请您阅读并同意用户协议以及隐私政策",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-      let _this = this;
-      this.$refs.validateCodeForm.validate((valid) => {
-        if (valid) {
-          /**
-           * 清空当前账号信息
-           */
-          storage.setHasLogin(false);
-          storage.setAccessToken("");
-          storage.setRefreshToken("");
-          storage.setUuid(this.uuid.v1());
-          storage.setUserInfo({});
-          /**
-           * 执行登录
-           */
-          smsLogin(this.codeForm, _this.clientType).then((res) => {
-            if (res.data.success) {
-              storage.setAccessToken(res.data.result.accessToken);
-              storage.setRefreshToken(res.data.result.refreshToken);
-
-              /**
-               * 登录成功后获取个人信息
-               */
-              getUserInfo().then((user) => {
-                if (user.data.success) {
-                  /**
-                   * 个人信息存储到缓存userInfo中
-                   */
-                  storage.setUserInfo(user.data.result);
-                  storage.setHasLogin(true);
-                  // 登录成功
-                  uni.showToast({
-                    title: "登录成功!",
-                    icon: "none",
-                  });
-
-                  /**
-                   * 计算出当前router路径
-                   * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
-                   * 2.都不满足返回跳转页面
-                   */
-                  whetherNavigate();
-                } else {
-                  uni.switchTab({
-                    url: "/pages/tabbar/home/index",
-                  });
-                }
-              });
-            }
-          });
-        }
-      });
-    },
-    // 跳转到一键登录
-    clickLogin() {
-      this.$emit("open", "click");
-      
-    },
-
-    /**点击验证码*/
-    codeChange(text) {
-      this.tips = text;
-    },
-    /** 结束验证码后执行 */
-    end() {},
-    /**获取验证码 */
-    getCode() {
-      if (this.tips == "重新获取") {
-        this.codeFlag = true;
-
-        uni.showLoading({
-          title: "加载中",
-        });
-        setTimeout(() => {
-          this.$refs.verification.hide();
-          uni.hideLoading();
-        }, 2000);
-      }
-
-      if (!this.$u.test.mobile(this.codeForm.mobile)) {
-        uni.showToast({
-          title: "请输入正确手机号",
-          icon: "none",
-        });
-
-        return false;
-      }
-      if (!this.flage) {
-        this.$refs.verification.error();
-        return false;
-      }
-    },
-
-    // 点击获取验证码
-    start() {
-      this.$u.toast("验证码已发送");
-      this.flage = false;
-
-      this.codeFlag = false;
-      this.$refs.verification.hide();
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-@import url("./login.scss");
-
-// #ifdef MP-WEIXIN
-@import url("./mp-codeLogin.scss");
-
-// #endif
-</style>

pages/passport/login.scss

@@ -1,68 +0,0 @@
-.sub-title {
-	font-size: 24rpx;
-	color: #999;
-}
-.cell {
-	margin: 40rpx 0;
-}
-.login-ball {
-	border-bottom-left-radius: 300rpx;
-	height: 400rpx;
-	position: relative;
-}
-
-/deep/ .u-form-item--right__content__slot {
-	width: 100%;
-	display: block;
-}
-
-.title {
-	font-size: 48rpx;
-	color: #000;
-	text-align: center;
-}
-.privacy {
-	font-size: 24upx;
-	color: #999;
-	text-align: center;
-	margin-top: 360rpx;
-	width: 100%;
-	display: flex;
-	justify-content: center;
-}
-span {
-	color: $aider-light-color;
-}
-.form {
-	padding: 0 72rpx;
-}
-.divider {
-	margin: 30rpx 0 !important;
-}
-.submit {
-	height: 80rpx;
-	line-height: 80rpx;
-	color: #fff;
-	text-align: center;
-	font-size: 30rpx;
-	border-radius: 100px;
-}
-.logo {
-	margin-top: 20rpx;
-	width: 200rpx;
-	height: 200rpx;
-	text-align: center;
-}
-.logo-cell {
-	text-align: center;
-}
-.text-tips {
-	text-align: center;
-}
-.tips {
-	position: absolute;
-	bottom: 10rpx;
-	width: 100%;
-
-	text-align: center;
-}

pages/passport/login.vue

@@ -1,113 +1,242 @@
 <template>
-  <view>
+  <div class="wrapper">
-    <!--  -->
+    <u-navbar :is-back="showBack" :border-bottom="false"></u-navbar>
-    <view v-if="codeLogin">
+    <div>
-      <!-- 背景 -->
+      <div class="title">{{loginTitleWay[current].title}}</div>
-      <view class="login-ball bg-linear-gradient small"></view>
+      <div :class="current == 1 ? 'desc-light':'desc'">{{loginTitleWay[current].desc}}<span
-
+          v-if="current == 1">{{mobile | secrecyMobile}}</span></div>
-      <view class="logo-cell">
+    </div>
-        <image class="logo" :src="config.logo" mode="aspectFit"></image>
+    <!-- 手机号 -->
-      </view>
+    <div v-show="current==0">
-      <view class="title">{{config.name}}</view>
+      <u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入手机号 (11位)"
-
+        class='mobile' focus v-model="mobile" type="number" maxlength="11" />
-      <!-- 验证码登录 -->
+      <div :class="!enabuleFetchCode ?'disable':'fetch'" @click="fetchCode" class=" btn">获取验证码</div>
-      <codeLogin @open="open" :status="value" v-if="login && loginData.code" />
+      <div class="flex">
-      <!-- 账号密码登录 -->
+        <u-checkbox-group :icon-size="24" width="45rpx">
-      <onClickLogin @open="open" :status="value" v-if="login && loginData.click" />
+          <u-checkbox shape="circle" v-model="enabulePrivacy" active-color="#FF5E00"></u-checkbox>
-      <view class="form"> </view>
+        </u-checkbox-group>
-
+        <div class="tips">未注册的手机号验证后将自动创建用户账号，登录即代表您已同意<span @click="navigateToPrivacy('privacy')">《使用条款及隐私协议》</span>
-      <!-- 隐私政策 -->
+        </div>
-      <div class="privacy">
+      </div>
-        <u-checkbox-group :icon-size="24" width="45rpx">
+
-          <u-checkbox v-model="value" :active-color="lightColor"></u-checkbox>
+    </div>
-
+    <!-- 输入验证码 -->
-        </u-checkbox-group>
+    <div v-show="current==1" class="box-code">
-        同意<span @click="handleClick('user')">《用户协议》</span>和<span @click="handleClick('privacy')">《隐私政策》</span>
+      <verifyCode type="bottom" @confirm="submit" boxActiveColor="#D8D8D8" v-model="code" isFocus
+        boxNormalColor="#D8D8D8" cursorColor="#D8D8D8" />
+
+      <div class="fetch-btn">
+        <u-verification-code change-text="验证码已发送（x）" end-text="重新获取验证码" keep-running unique-key="page-login"
+          :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
+        <span @tap="fetchCode" :style="{color:codeColor}"> {{tips}}</span>
+      </div>
+    </div>
+
+    <!-- 循环出当前可使用的第三方登录模式 -->
+    <div class="flex login-list">
+      <div :style="{background:item.color}" class="login-item" v-for="(item,index) in loginList" :key="index">
+        <u-icon v-if="item.title!='APPLE'" color="#fff" size="42" :name="item.icon" @click="navigateLogin(item)">
+        </u-icon>
+        <u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)" width="80"
+          height="80" />
+      </div>
+    </div>
+    <myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification" business="LOGIN" />
+
   </div>
-    </view>
-    <view v-if="wechatLogin">
-      <wechatH5Login />
-    </view>
-  </view>
 </template>
+
 <script>
-import codeLogin from "./codeLogin";
+import { openIdLogin ,loginCallback } from "@/api/connect.js";
-import onClickLogin from "./onClickLogin";
+import api from "@/config/api.js";
+import { sendMobile, smsLogin } from "@/api/login";
+import myVerification from "@/components/verification/verification.vue"; //验证码模块
+import uuid from "@/utils/uuid.modified.js"; // uuid
+import verifyCode from "@/components/verify-code/verify-code";
 import { getUserInfo } from "@/api/members";
-import storage from "@/utils/storage.js";
+import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
-import { loginCallback } from "@/api/connect.js";
+import storage from "@/utils/storage.js"; //缓存
-import { webConnect } from "@/api/connect.js";
+
-import config from "@/config/config";
-import wechatH5Login from "./wechatH5Login.vue";
 export default {
-  onShow() {
+  components: { myVerification, verifyCode },
-    //#ifdef H5
+
-    let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
-    if (isWXBrowser) {
-      webConnect("WECHAT").then((res) => {
-        let data = res.data;
-        if (data.success) {
-          window.location = data.result;
-        }
-      });
-    }
-    //#endif
-  },
   data() {
     return {
-      config,
+      uuid,
+      flage: false, //是否验证码验证
+      codeFlag: true, //验证开关，用于是否展示验证码
+      tips: "",
+      current: 0,
+      codeColor: "#999", //按钮验证码颜色
       lightColor: this.$lightColor,
-      wechatLogin: false, //是否加载微信公众号登录
+      seconds: 60, //默认验证码等待时间
-      codeLogin: false, //是否加载正常验证码登录
+      loginTitleWay: [
-      value: true, //隐私政策
+        {
-      loginData: {
+          title: "欢迎登录",
-        code: true, //验证码登录
+          desc: "登录后更精彩，美好生活即将开始",
-        click: false,
         },
-      login: true, //登录
+        {
+          title: "请输入验证码",
+          desc: "已经发送验证码至",
+        },
+      ],
+      showBack: false,
+      enabuleFetchCode: false,
+      enabulePrivacy: false, //隐私政策
+      mobile: "", //手机号
+      code: "", //验证码
+      inputStyle: {
+        height: "104rpx",
+        "border-bottom": "1rpx solid #D8D8D8",
+        "letter-spacing": "1rpx",
+        "font-size": "40rpx",
+        "line-height": "40rpx",
+        color: "#333",
+      },
+      placeholderStyle: "font-size: 32rpx;line-height: 32rpx;color: #999999;",
+      loginList: [
+        //第三方登录集合
+        {
+          icon: "weixin-fill",
+          color: "#00a327",
+          title: "微信",
+          code: "WECHAT",
+        },
+        {
+          icon: "qq-fill",
+          color: "#38ace9",
+          title: "QQ",
+          code: "QQ",
+        },
+        {
+          icon: "apple-fill",
+          color: "#000000",
+          title: "Apple",
+          code: "APPLE",
+        },
+      ],
     };
   },
-  watch: {},
-  components: {
-    codeLogin,
-    onClickLogin,
-    wechatH5Login,
-  },
   mounted() {
-    // #ifndef APP-PLUS
+    /**
-    //判断是否微信浏览器
+     * 条件编译判断当前客户端类型
-    var ua = window.navigator.userAgent.toLowerCase();
+     */
-    if (ua.match(/MicroMessenger/i) == "micromessenger") {
+    //#ifdef H5
-      this.wechatLogin = true;
+    this.clientType = "H5";
-      return;
+    //#endif
 
-    } else {
+    //#ifdef APP-PLUS
-      this.codeLogin = true;
+    this.clientType = "APP";
+    /**如果是app 加载支持的登录方式*/
+    let _this = this;
+    uni.getProvider({
+      service: "oauth",
+      success: (result) => {
+        _this.loginList = result.provider.map((value) => {
+          //展示title
+          let title = "";
+          //系统code
+          let code = "";
+          //颜色
+          let color = "#8b8b8b";
+          //图标
+          let icon = "";
+          //uni 联合登录 code
+          let appcode = "";
+          switch (value) {
+            case "weixin":
+              icon = "weixin-circle-fill";
+              color = "#00a327";
+              title = "微信";
+              code = "WECHAT";
+              break;
+            case "qq":
+              icon = "qq-circle-fill";
+              color = "#38ace9";
+              title = "QQ";
+              code = "QQ";
+              break;
+            case "apple":
+              icon = "apple-fill";
+              color = "#000000";
+              title = "Apple";
+              code = "APPLE";
+              break;
           }
+          return {
+            title: title,
+            code: code,
+            color: color,
+            icon: icon,
+            appcode: value,
+          };
+        });
+      },
+      fail: (error) => {
+        uni.showToast({
+          title: "获取登录通道失败" + error,
+          duration: 2000,
+          icon: "none",
+        });
+      },
+    });
+    //#endif
+
+    //特殊平台，登录方式需要过滤
+    // #ifdef H5
+    this.methodFilter(["QQ"]);
     // #endif
-    // #ifdef APP-PLUS
+
-    this.codeLogin = true;
+    //微信小程序，只支持微信登录
+    // #ifdef MP-WEIXIN
+    this.methodFilter(["WECHAT"]);
     // #endif
   },
+  watch: {
+    current(val) {
+      val ? (this.showBack = true) : (this.showBack = false);
+    },
+    mobile: {
+      handler(val) {
+        if (val.length == 11) {
+          this.enabuleFetchCode = true;
+        }
+      },
+    },
 
+    async flage(val) {
+      if (val) {
+        if (this.$refs.uCode.canGetCode) {
+          // 向后端请求验证码
+          uni.showLoading({});
+          let res = await sendMobile(this.mobile);
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          if (res.data.success) {
+            this.current = 1;
+            this.$refs.uCode.start();
+          } else {
+            uni.showToast({
+              title: res.data.message,
+              duration: 2000,
+              icon: "none",
+            });
+            this.flage = false;
+          }
+        } else {
+          this.$u.toast("请倒计时结束后再发送");
+        }
+      } else {
+        this.$refs.verification.hide();
+      }
+    },
+  },
    onLoad(options) {
     if (options && options.state) {
       this.stateLogin(options.state);
     }
   },
   methods: {
-    handleClick(val) {
-      uni.navigateTo({
-        url: "/pages/mine/help/tips?type=" + val,
-      });
-    },
-    // open 开启另一个模板
-    open(val) {
-      Object.keys(this.loginData).forEach((item) => {
-        this.$set(this.loginData, item, false);
-      });
-      this.$set(this.loginData, val, true);
-    },
     //联合信息返回登录
     stateLogin(state) {
       loginCallback(state).then((res) => {
@@ -134,9 +263,362 @@ export default {
         }
       });
     },
+    /** 根据参数显示登录模块 */
+    methodFilter(code) {
+      let way = [];
+      this.loginList.forEach((item) => {
+        if (code.length != 0) {
+          code.forEach((val) => {
+            if (item.code == val) {
+              way.push(item);
+            }
+          });
+        } else {
+          uni.showToast({
+            title: "配置有误请联系管理员",
+            duration: 2000,
+            icon: "none",
+          });
+        }
+      });
+      this.loginList = way;
+    },
+    //非h5 获取openid
+    async nonH5OpenId(item) {
+      let _this = this;
+      //获取各个openid
+      await uni.login({
+        provider: item.appcode,
+        // #ifdef MP-ALIPAY
+        scopes: "auth_user", //支付宝小程序需设置授权类型
+        // #endif
+        success: function (res) {
+          uni.setStorageSync("type", item.code);
+          //微信小程序意外的其它方式直接在storage中写入openid
+          // #ifndef MP-WEIXIN
+          uni.setStorageSync("openid", res.authResult.openid);
+          // #endif
+        },
+        fail(e) {
+          uni.showToast({
+            title: "第三方登录暂不可用！",
+            icon: "none",
+            duration: 3000,
+          });
+        },
+        complete(e) {
+          //获取用户信息
+          uni.getUserInfo({
+            provider: item.appcode,
+            success: function (infoRes) {
+              //写入用户信息
+              uni.setStorageSync("nickname", infoRes.userInfo.nickName);
+              uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
+
+              // #ifdef MP-WEIXIN
+              //微信小程序获取openid 需要特殊处理 如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id
+              _this.weixinMPOpenID(res).then((res) => {
+                //这里需要先行获得openid，再使用openid登录，小程序登录需要两步，所以这里特殊编译
+                _this.goOpenidLogin("WECHAT_MP");
+              });
+              // #endif
+
+              // #ifndef MP-WEIXIN
+              _this.goOpenidLogin("APP");
+              //#endif
+            },
+          });
+        },
+      });
+    },
+    //openid 登录
+    goOpenidLogin(clientType) {
+      // 获取准备好的参数，进行登录系统
+      let params = {
+        uuid: uni.getStorageSync("openid"), //联合登陆id
+        source: uni.getStorageSync("type"), //联合登陆类型
+        nickname: uni.getStorageSync("nickname"), // 昵称
+        avatar: uni.getStorageSync("avatar"), // 头像
+        uniAccessToken: uni.getStorageSync("uni_access_token"), //第三方token
+      };
+      openIdLogin(params, clientType).then((res) => {
+        if (!res.data.success) {
+          let errormessage = "第三方登录暂不可用";
+          uni.showToast({
+            // title: '未绑定第三方账号',
+            title: errormessage,
+            icon: "none",
+            duration: 3000,
+          });
+          return;
+        } else {
+          storage.setAccessToken(res.data.result.accessToken);
+          storage.setRefreshToken(res.data.result.refreshToken);
+          // 登录成功
+          uni.showToast({
+            title: "第三方登录成功!",
+            icon: "none",
+          });
+          // 执行登录
+          getUserInfo().then((user) => {
+            if (user.data.success) {
+              /**
+               * 个人信息存储到缓存userInfo中
+               */
+              storage.setUserInfo(user.data.result);
+              storage.setHasLogin(true);
+
+              /**
+               * 计算出当前router路径
+               * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
+               * 2.都不满足返回跳转页面
+               */
+              whetherNavigate();
+            } else {
+              uni.switchTab({
+                url: "/pages/tabbar/home/index",
+              });
+            }
+          });
+        }
+      });
+    },
+    //微信小程序获取openid
+    async weixinMPOpenID(res) {
+      await miniProgramLogin(res.code).then((res) => {
+        uni.setStorageSync("openid", res.data);
+      });
+    },
+    /**跳转到登录页面 */
+    navigateLogin(connectLogin) {
+      // #ifdef H5
+      let code = connectLogin.code;
+      let buyer = api.buyer;
+      window.open(buyer + `/connect/login/web/` + code, "_self");
+      // #endif
+      // #ifdef APP-PLUS
+      this.nonH5OpenId(connectLogin);
+      // #endif
+    },
+
+    // 提交
+    submit() {
+      /**
+       * 清空当前账号信息
+       */
+      storage.setHasLogin(false);
+      storage.setAccessToken("");
+      storage.setRefreshToken("");
+      storage.setUuid(this.uuid.v1());
+      storage.setUserInfo({});
+      /**
+       * 执行登录
+       */
+      smsLogin({ mobile: this.mobile, code: this.code }, this.clientType).then(
+        (res) => {
+          if (res.data.success) {
+            storage.setAccessToken(res.data.result.accessToken);
+            storage.setRefreshToken(res.data.result.refreshToken);
+
+            /**
+             * 登录成功后获取个人信息
+             */
+            getUserInfo().then((user) => {
+              if (user.data.success) {
+                /**
+                 * 个人信息存储到缓存userInfo中
+                 */
+                storage.setUserInfo(user.data.result);
+                storage.setHasLogin(true);
+                // 登录成功
+                uni.showToast({
+                  title: "登录成功!",
+                  icon: "none",
+                });
+
+                /**
+                 * 计算出当前router路径
+                 * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
+                 * 2.都不满足返回跳转页面
+                 */
+                whetherNavigate();
+              } else {
+                uni.switchTab({
+                  url: "/pages/tabbar/home/index",
+                });
+              }
+            });
+          }
+        }
+      );
+    },
+    // 验证码验证
+    verification(val) {
+      this.flage = val == this.$store.state.verificationKey ? true : false;
+    },
+    // 跳转
+    navigateToPrivacy(val) {
+      uni.navigateTo({
+        url: "/pages/mine/help/tips?type=" + val,
+      });
+    },
+    // 点击获取验证码
+    start() {
+      this.codeColor = "#999";
+      this.$u.toast("验证码已发送");
+      this.flage = false;
+      this.codeFlag = false;
+
+      this.$refs.verification.hide();
+    },
+    /**点击验证码*/
+    codeChange(text) {
+      this.tips = text;
+    },
+    /** 结束验证码后执行 */
+    end() {
+      this.codeColor = this.lightColor;
+
+      console.log(this.codeColor);
+    },
+    // 发送验证码
+    fetchCode() {
+      if (!this.enabulePrivacy) {
+        uni.showToast({
+          title: "请同意用户隐私",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+
+      if (!this.$u.test.mobile(this.mobile)) {
+        uni.showToast({
+          title: "请填写正确手机号",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+      if (this.tips == "重新获取验证码") {
+        uni.showLoading({
+          title: "加载中",
+        });
+        if (!this.codeFlag) {
+          this.codeFlag = true;
+
+          let timer = setInterval(() => {
+            if (this.$refs.verification) {
+              this.$refs.verification.error(); //发送
+            }
+            clearInterval(timer);
+          }, 100);
+        }
+        uni.hideLoading();
+      }
+      if (!this.flage) {
+        this.$refs.verification.error(); //发送
+
+        return false;
+      }
+    },
   },
 };
 </script>
-<style lang="scss" scoped>
+<style >
-@import url("./login.scss");
+page {
+  background: #fff;
+}
+</style>
+<style lang="scss" scoped>
+.wrapper {
+  padding: 0 80rpx;
+}
+.title {
+  padding-top: calc(104rpx);
+  font-style: normal;
+  line-height: 1;
+  font-weight: 500;
+  font-size: 56rpx;
+  color: #333;
+}
+.box-code {
+  margin-top: 78rpx;
+}
+.desc,
+.desc-light {
+  font-size: 32rpx;
+  line-height: 32rpx;
+  color: #333333;
+  margin-top: 40rpx;
+}
+.desc {
+  color: #333;
+}
+.desc-light {
+  color: #999999;
+  > span {
+    color: #333;
+    margin-left: 8rpx;
+  }
+}
+.mobile {
+  margin-top: 80rpx;
+}
+.disable {
+  background: linear-gradient(90deg, #ffdcba 2.21%, #ffcfb2 99.86%);
+}
+.fetch {
+  background: linear-gradient(57.72deg, #ff8a19 18.14%, #ff5e00 98.44%);
+}
+.btn {
+  border-radius: 100px;
+  width: 590rpx;
+  margin-top: 97rpx;
+  height: 80rpx;
+  font-size: 30rpx;
+  line-height: 80rpx;
+  text-align: center;
+  color: #ffffff;
+}
+.tips {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 32rpx;
+  width: 546rpx;
+  > span {
+    color: $light-color;
+  }
+}
+.fetch-btn {
+  width: 370rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  background: #f2f2f2;
+  border-radius: 100rpx;
+  font-size: 28rpx;
+  color: #999;
+
+  margin: 71rpx auto 0 auto;
+}
+
+.login-list {
+  display: flex;
+  width: 590rpx;
+  position: absolute;
+  bottom: 20px;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.login-item {
+  width: 80rpx;
+
+  border-radius: 10rpx;
+  height: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

pages/passport/mp-codeLogin.scss

@@ -1,8 +0,0 @@
-
-/deep/ .u-form-item {
-	margin: 40rpx 0 !important;
-	padding: 40rpx 0 !important;
-}
-.submit {
-	margin-top: 40rpx;
-}

pages/passport/onClickLogin.vue

@@ -1,296 +0,0 @@
-<template>
-  <div class="form">
-    <u-form ref="validateCodeForm">
-      <div class="login-list">
-        <!-- 循环出当前可使用的第三方登录模式 -->
-        <div :style="{background:item.color}" class="login-item" v-for="(item,index) in loginList" :key="index">
-          <u-icon v-if="item.title!='APPLE'" color="#fff" size="42" :name="item.icon" @click="navigateLogin(item)"></u-icon>
-           <u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)" width="80" height="80" />
-        </div>
-      </div>
-
-      <view :style="{color:aiderLightColor}" class="text-tips cell" @click="clickCodeLogin">账号密码登录</view>
-    </u-form>
-  </div>
-</template>
-
-<script>
-import { openIdLogin } from "@/api/connect.js";
-import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
-import { getUserInfo } from "@/api/members";
-import storage from "@/utils/storage.js";
-import api from "@/config/api.js";
-
-export default {
-  data() {
-    return {
-      aiderLightColor: this.$aiderLightColor,
-      loginList: [
-        {
-          icon: "weixin-fill",
-          color: "#00a327",
-          title: "微信",
-          code: "WECHAT",
-        },
-        {
-          icon: "qq-fill",
-          color: "#38ace9",
-          title: "QQ",
-          code: "QQ",
-        },
-        {
-          icon: "apple-fill",
-          color: "#000000",
-          title: "Apple",
-          code: "APPLE",
-        },
-      ],
-      tips: "",
-    };
-  },
-  props: ["status"],
-  mounted() {
-    //#ifdef APP-PLUS
-    /**如果是app 加载支持的登录方式*/
-    let _this = this;
-    uni.getProvider({
-      service: "oauth",
-      success: (result) => {
-        _this.loginList = result.provider.map((value) => {
-          //展示title
-          let title = "";
-          //系统code
-          let code = "";
-          //颜色
-          let color = "#8b8b8b";
-          //图标
-          let icon = "";
-          //uni 联合登录 code
-          let appcode = "";
-          switch (value) {
-            case "weixin":
-              icon = "weixin-circle-fill";
-              color = "#00a327";
-              title = "微信";
-              code = "WECHAT";
-              break;
-            case "qq":
-              icon = "qq-circle-fill";
-              color = "#38ace9";
-              title = "QQ";
-              code = "QQ";
-              break;
-               case "apple":
-              icon = "apple-fill";
-              color = "#000000";
-              title = "Apple";
-              code = "APPLE";
-              break;
-          }
-          return {
-            title: title,
-            code: code,
-            color: color,
-            icon: icon,
-            appcode: value,
-          };
-        });
-      },
-      fail: (error) => {
-        uni.showToast({
-          title: "获取登录通道失败" + error,
-          duration: 2000,
-          icon: "none",
-        });
-      },
-    });
-    //#endif
-
-    //特殊平台，登录方式需要过滤
-    // #ifdef H5
-    this.methodFilter(["QQ"]);
-    // #endif
-
-    //微信小程序，只支持微信登录
-    // #ifdef MP-WEIXIN
-    this.methodFilter(["WECHAT"]);
-    // #endif
-  },
-
-  methods: {
-    /** 根据参数显示登录模块 */
-    methodFilter(code) {
-      let way = [];
-      this.loginList.forEach((item) => {
-        if (code.length != 0) {
-          code.forEach((val) => {
-            if (item.code == val) {
-              way.push(item);
-            }
-          });
-        } else {
-          uni.showToast({
-            title: "配置有误请联系管理员",
-            duration: 2000,
-            icon: "none",
-          });
-        }
-      });
-      this.loginList = way;
-    },
-    /**跳转到登录页面 */
-    navigateLogin(connectLogin) {
-      if (!this.status) {
-        uni.showToast({
-          title: "请您阅读并同意用户协议以及隐私政策",
-          duration: 2000,
-          icon: "none",
-        });
-        return false;
-      }
-
-      // #ifdef H5
-      let code = connectLogin.code;
-      let buyer = api.buyer;
-      window.open(buyer + `/connect/login/web/` + code, "_self");
-      // #endif
-      // #ifdef APP-PLUS
-      this.nonH5OpenId(connectLogin);
-      // #endif
-    },
-
-    // 跳转到一键登录
-    clickCodeLogin() {
-      this.$emit("open", "code");
-    },
-
-    //非h5 获取openid
-    async nonH5OpenId(item) {
-      let _this = this;
-      //获取各个openid
-      await uni.login({
-        provider: item.appcode,
-        // #ifdef MP-ALIPAY
-        scopes: "auth_user", //支付宝小程序需设置授权类型
-        // #endif
-        success: function (res) {
-          uni.setStorageSync("type", item.code);
-          //微信小程序意外的其它方式直接在storage中写入openid
-          // #ifndef MP-WEIXIN
-          uni.setStorageSync("openid", res.authResult.openid);
-          // #endif
-        },
-        fail(e) {
-          uni.showToast({
-            title: "第三方登录暂不可用！",
-            icon: "none",
-            duration: 3000,
-          });
-        },
-        complete(e) {
-          //获取用户信息
-          uni.getUserInfo({
-            provider: item.appcode,
-            success: function (infoRes) {
-              //写入用户信息
-              uni.setStorageSync("nickname", infoRes.userInfo.nickName);
-              uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
-
-              // #ifdef MP-WEIXIN
-              //微信小程序获取openid 需要特殊处理 如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id
-              _this.weixinMPOpenID(res).then((res) => {
-                //这里需要先行获得openid，再使用openid登录，小程序登录需要两步，所以这里特殊编译
-                _this.goOpenidLogin("WECHAT_MP");
-              });
-              // #endif
-
-              // #ifndef MP-WEIXIN
-              _this.goOpenidLogin("APP");
-              //#endif
-            },
-          });
-        },
-      });
-    },
-    //openid 登录
-    goOpenidLogin(clientType) {
-      let _this = this;
-      // 获取准备好的参数，进行登录系统
-      let params = {
-        uuid: uni.getStorageSync("openid"), //联合登陆id
-        source: uni.getStorageSync("type"), //联合登陆类型
-        nickname: uni.getStorageSync("nickname"), // 昵称
-        avatar: uni.getStorageSync("avatar"), // 头像
-        uniAccessToken: uni.getStorageSync("uni_access_token"), //第三方token
-      };
-      openIdLogin(params, clientType).then((res) => {
-        if (!res.data.success) {
-          let errormessage = "第三方登录暂不可用";
-          uni.showToast({
-            // title: '未绑定第三方账号',
-            title: errormessage,
-            icon: "none",
-            duration: 3000,
-          });
-          return;
-        } else {
-          storage.setAccessToken(res.data.result.accessToken);
-          storage.setRefreshToken(res.data.result.refreshToken);
-          // 登录成功
-          uni.showToast({
-            title: "第三方登录成功!",
-            icon: "none",
-          });
-          // 执行登录
-          getUserInfo().then((user) => {
-            if (user.data.success) {
-              /**
-               * 个人信息存储到缓存userInfo中
-               */
-              storage.setUserInfo(user.data.result);
-              storage.setHasLogin(true);
-
-              /**
-               * 计算出当前router路径
-               * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
-               * 2.都不满足返回跳转页面
-               */
-              whetherNavigate();
-            } else {
-              uni.switchTab({
-                url: "/pages/tabbar/home/index",
-              });
-            }
-          });
-        }
-      });
-    },
-    //微信小程序获取openid
-    async weixinMPOpenID(res) {
-      await miniProgramLogin(res.code).then((res) => {
-        uni.setStorageSync("openid", res.data);
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-@import url("./login.scss");
-
-.login-list {
-  margin: 140rpx 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
-
-.login-item {
-  width: 80rpx;
-
-  border-radius: 10rpx;
-  height: 80rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>

pages/product/goods.vue

@@ -410,17 +410,7 @@ export default {
       routerVal: "",
     };
   },
-  // #ifdef MP-WEIXNI
+
-  shareAppMessage() {
-    return {
-      title: this.goodsDetail.goodsName,
-      type: 0,
-      query: `id=${this.routerVal.id}&goodsId=${this.routerVal.goodsId}`,
-      path: `/pages/product/goods`,
-      imageUrl: this.goodsDetail.goodsGalleryList[0],
-    };
-  },
-  // #endif
   watch: {
     isGroup(val) {
       if (val) {
@@ -483,7 +473,7 @@ export default {
       getMpScene(this.routerVal.scene).then((res) => {
         if (res.data.success) {
           let data = res.data.result.split(","); // skuId,goodsId,distributionId
-          console.warn(data)
+          console.warn(data);
           this.init(data[0], data[1], data[2]);
         }
       });
@@ -495,7 +485,19 @@ export default {
       );
     }
   },
+  // #ifdef MP-WEIXIN
+  onShareAppMessage(res) {
+    return {
+      path: this.share(),
+      title: `[好友推荐]${this.goodsDetail.goodsName}`,
+      imageUrl: this.goodsDetail.goodsGalleryList[0],
+    };
+  },
+  // #endif
   methods: {
+    share() {
+      return `/pages/product/goods?id=${this.routerVal.id}&goodsId=${this.routerVal.goodsId}`;
+    },
     /**
      * 导航栏列表栏
      */
@@ -521,12 +523,14 @@ export default {
     /**
      * 初始化信息
      */
-    async init(id, goodsId, distributionId="") {
+    async init(id, goodsId, distributionId = "") {
       this.isGroup = false; //初始化拼团
       this.productId = id; // skuId
       // 这里请求获取到页面数据  解析数据
 
       let response = await getGoods(id, goodsId);
+
+      console.log(response);
       if (!response.data.success) {
         setTimeout(() => {
           uni.navigateBack();
@@ -536,7 +540,7 @@ export default {
       if (distributionId || this.$store.state.distributionId) {
         let disResult = await getGoodsDistribution(distributionId);
         if (!disResult.data.success || disResult.statusCode == 403) {
-          console.log("绑定成功!")
+          console.log("绑定成功!");
           this.$store.state.distributionId = distributionId;
         }
       }

pages/product/product/popup/goods.vue

@@ -53,14 +53,14 @@
           </view>
         </view>
         <!-- 商品信息 -->
-        <view class="goods-skus-box">
+        <scroll-view class="goods-skus-box" :scroll-y="true">
           <!-- 规格 -->
           <view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
             <view class="skus-view-list">
               <view class="view-class-title">{{ spec.name }}</view>
               <view :class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item"
                 v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
-                @click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</view>
+                @click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }} </view>
             </view>
           </view>
           <!-- 数量 -->
@@ -71,7 +71,7 @@
               v-model="num">
             </u-number-box>
           </view>
-        </view>
+        </scroll-view>
         <!-- 按钮 -->
         <view class="btns">
 
@@ -86,6 +86,7 @@
 <script>
 import * as API_trade from "@/api/trade.js";
 import setup from "./popup";
+
 export default {
   data() {
     return {
@@ -148,7 +149,7 @@ export default {
 
     /**点击规格 */
     handleClickSpec(val, index, specValue) {
-      this.$set(this.currentSelceted, index, specValue.value);
+      this.currentSelceted[index] = specValue.value;
       let selectedSkuId = this.goodsSpec.find((i) => {
         let matched = true;
         let specValues = i.specValues.filter((j) => j.specName !== "images");
@@ -162,6 +163,8 @@ export default {
           return i;
         }
       });
+      if (selectedSkuId?.skuId) {
+        this.$set(this.currentSelceted, index, specValue.value);
         this.selectSkuList = {
           spec: {
             specName: val.name,
@@ -175,6 +178,13 @@ export default {
           skuId: selectedSkuId.skuId,
           goodsId: this.goodsDetail.goodsId,
         });
+      } else {
+        uni.showToast({
+          title: "暂无该商品!",
+          duration: 2000,
+          icon: "none",
+        });
+      }
     },
 
     /**
@@ -230,7 +240,7 @@ export default {
     },
     formatSku(list) {
       // 格式化数据
-
+      console.log(list);
       let arr = [{}];
       list.forEach((item, index) => {
         item.specValues.forEach((spec, specIndex) => {
@@ -238,6 +248,7 @@ export default {
           let values = {
             value: spec.specValue,
             quantity: item.quantity,
+            skuId: item.skuId,
           };
           if (name === "images") {
             return;
@@ -247,7 +258,9 @@ export default {
             if (
               arrItem.name == name &&
               arrItem.values &&
-              !arrItem.values.find((i) => i.value === values.value)
+              !arrItem.values.find((i) => {
+                return i.value === values.value;
+              })
             ) {
               arrItem.values.push(values);
             }
@@ -256,6 +269,7 @@ export default {
               return key.name;
             });
             if (!keys.includes(name)) {
+              console.log(name, values);
               arr.push({
                 name: name,
                 values: [values],
@@ -269,6 +283,7 @@ export default {
       this.formatList = arr;
 
       list.forEach((item) => {
+        // 默认选中
         if (item.skuId === this.goodsDetail.id) {
           item.specValues
             .filter((i) => i.specName !== "images")
@@ -286,13 +301,12 @@ export default {
       });
 
       this.skuList = list;
+      // console.log(" this.skuList", this.skuList)
     },
   },
 
   mounted() {
     this.formatSku(this.goodsSpec);
-
-    console.log(this.goodsDetail);
   },
 };
 </script>

pages/product/product/style.scss

@@ -71,7 +71,8 @@ page {
     font-size: 32rpx;
 }
 .-goods-desc {
-    padding: 36rpx 0 24rpx 0;
+    padding: 36rpx 0 0 0;
+    margin-bottom: 24rpx;
     font-size: 24rpx;
     color: #666;
     display: -webkit-box;

pages/tabbar/cart/cartList.vue

@@ -26,17 +26,17 @@
                 @change="checkboxChangeDP(item)"></u-checkbox>
               <!-- #endif -->
             </u-checkbox-group>
-            <span class="storeName store-line-desc" @click.stop="navigateToStore(item)">{{
+            <span class="store-name store-line-desc" @click.stop="navigateToStore(item)">{{
               item.storeName
             }}</span>
           </view>
-          <view class="right_Col" @click="navigateToConpon(item)">
+          <view class="right-col" @click="navigateToConpon(item)">
-            <div class="right_Line"></div>
+            <div class="right-line"></div>
             <span>领劵</span>
           </view>
         </view>
         <u-swipe-action :show="skuItem.selected" @open="openAction(skuItem)" :options="options" bg-color="#fff"
-          ref="swiperAction" class="cartItem" v-for="(skuItem, i) in item.skuList" :index="i" :key="skuItem.goodsSku.id"
+          ref="swiperAction" class="cart-item" v-for="(skuItem, i) in item.skuList" :index="i" :key="skuItem.goodsSku.id"
           @click="changeActionTab(skuItem)" @longpress="changeActionTab(skuItem)">
           <!-- 满减活动 -->
           <div v-if="skuItem.promotions" v-for="(fullDiscount,fullDiscountIndex) in skuItem.promotions"
@@ -64,8 +64,8 @@
                 </u-checkbox-group>
                 <span class="invalid" v-else style="font-size: 24rpx">失效</span>
               </view>
-              <u-image border-radius="20" :fade="true" @click="navigateToGoods(skuItem)" width="200rpx"
+              <u-image border-radius="10" :fade="true" @click="navigateToGoods(skuItem)" width="160rpx" height="160rpx"
-                height="200rpx" :src="skuItem.goodsSku.thumbnail"  />
+                :src="skuItem.goodsSku.thumbnail" />
             </view>
             <view class="goods-content">
               <!-- 商品名称 -->
@@ -76,7 +76,8 @@
               <p class="sp-type">{{skuItem.goodsSku.simpleSpecs}}</p>
               <p class="sp-number">
                 <view class="sp-price">
-                  <div class="default-color" :class="{'theme-color':skuItem.promotions.length <=0  }">
+                  <div class="default-color" :class="{'main-color':skuItem.promotions.length ==0  }">
+                    
                     ￥<span>{{ formatPrice(skuItem.goodsSku.price)[0] }}</span>
                     <span>.{{ formatPrice(skuItem.goodsSku.price)[1] }}</span>
                   </div>
@@ -101,11 +102,10 @@
                     font-size="24" :timestamp="getCountDownTime(seckill.endTime)">
                   </u-count-down>
                 </div>
-
               </div>
 
               <!-- 如果有活动 并且是选中的状态,显示预估到手价格 -->
-              <div class="priceDetail-flowPrice" :class="{'theme-color':skuItem.priceDetailDTO}"
+              <div class="priceDetail-flowPrice" :class="{'main-color':skuItem.priceDetailDTO}"
                 v-if="skuItem.priceDetailDTO && skuItem.invalid == 0  && skuItem.promotions.length!=0 && skuItem.checked && skuItem.checked">
                 预估到手价 ￥<span>{{ formatPrice(skuItem.priceDetailDTO.flowPrice)[0]}}</span>
                 <span>.{{ formatPrice(skuItem.priceDetailDTO.flowPrice)[1] }} </span>
@@ -137,7 +137,7 @@
               class="discountPrice">
               <span>优惠减:￥{{(cartDetail.priceDetailDTO.goodsPrice - cartDetail.priceDetailDTO.flowPrice) | unitPrice}}
               </span>
-              <span class="discountDetails" @click="discountDetails">优惠明细</span>
+              <span class="discount-details" @click="discountDetails">优惠明细</span>
             </div>
           </div>
         </span>
@@ -208,6 +208,7 @@ export default {
       WEIXIN_num: "", //购物车兼容微信步进器
     };
   },
+  
   mounted() {
     // #ifdef MP-WEIXIN
     // 小程序默认分享
@@ -542,6 +543,11 @@ export default {
 };
 </script>
 
+<style lang="scss">
+page {
+  background: #f2f2f2;
+}
+</style>
 <style scoped lang="scss">
 // #ifdef MP-WEIXIN
 @import "./mp-carui.scss";
@@ -566,7 +572,9 @@ export default {
     color: #fff;
   }
 }
-
+.default-color {
+  color: #333;
+}
 .goods-row {
   padding: 30rpx 0;
 
@@ -574,20 +582,18 @@ export default {
   align-items: center;
 }
 
-.storeName {
+.store-name {
   font-weight: bold;
 }
 .invalid {
   filter: grayscale(1);
 }
 
-.cartItem {
+.cart-item {
   border-radius: 0.4em;
   transition: 0.35s;
 }
 
-
-
 /* 空白页 */
 /deep/ .u-number-input {
   background: #fff !important;
@@ -660,16 +666,16 @@ export default {
 }
 
 .box2 {
-  border-radius: 30rpx;
+  border-radius: 20rpx;
-  padding: 32rpx 40rpx 32rpx;
+  padding: 0 16rpx 0;
-
+  margin: 0 16rpx 20rpx;
   .u-checkbox {
     display: flex;
     align-items: center;
     text-align: center;
   }
   background: #fff;
-  margin-bottom: 20rpx;
+
 }
 
 .wrapper {
@@ -689,11 +695,6 @@ export default {
   }
 }
 
-.allCheck {
-  // padding: 0 10rpx;
-  font-size: 24rpx;
-}
-
 .content {
   padding: 20rpx 0 20rpx 0;
   margin-bottom: 80rpx;
@@ -733,10 +734,10 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 30rpx 0;
+  padding: 30rpx 0 0 0;
 }
 
-.right_Col {
+.right-col {
   color: $light-color;
   font-size: 26rpx;
 
@@ -745,7 +746,7 @@ export default {
   }
 }
 
-.right_Line {
+.right-line {
   width: 3px;
   float: left;
   height: 40rpx;
@@ -782,7 +783,6 @@ export default {
   }
 }
 
-
 .sp-type {
   color: $u-light-color;
   padding: 10rpx 0;
@@ -794,9 +794,8 @@ export default {
   white-space: nowrap;
 }
 
-.default-color {
+
-  color: #333;
+.sp-number {
-}.sp-number {
   font-weight: bold;
 
   display: flex;
@@ -829,7 +828,7 @@ export default {
     color: rgb(201, 199, 199);
   }
 }
-.discountDetails {
+.discount-details {
   margin-left: 10px;
   color: #666;
   padding: 4rpx 10rpx;

pages/tabbar/cart/mp-carui.scss

@@ -1,5 +1,6 @@
 .box2 {
-    padding: calc(32rpx) 40rpx 32rpx !important;
+    padding: 0 16rpx 0;
+  margin: 0 16rpx 20rpx;
   
 }
 .uNumber{

uni.scss

@@ -61,7 +61,7 @@ $font-weight: 400;
 	color: $light-color;
 }
 .main-color {
-	color: $main-color;
+	color: $main-color !important;
 }
 .bg-light-color {
 	background-color: $light-color !important;