修改

components/goods/goodsku.vue

@@ -21,9 +21,7 @@
 					</view>
 					<view class="amount">库存 {{ goodamount }} {{ g.unit }}</view>
 					<view class="sku">{{ skuObj ? '已选择' : '选择' }} {{ sku }}</view>
-					<view class="sku_close">
-						<u-icon name="cross" color="#9F9F9F" @click="cloGood()" size="40"/>
-					</view>
+					<view class="sku_close"><u-icon name="cross" color="#9F9F9F" @click="cloGood()" size="40" /></view>
 				</view>
 			</view>
 			<view class="sku-box">
@@ -175,8 +173,8 @@ export default {
 					this.g.attr_groups.forEach(x => {
 						if (!this.skuObj) {
 							//(x.checkId = 0), (x.checkName = x.attr_group_name);
-							  (x.checkId = 0), (x.checkName = x.attr_list[0].attr_name);
-							  x.checkId = x.attr_list[0].attr_id;
+							(x.checkId = 0), (x.checkName = x.attr_list[0].attr_name);
+							x.checkId = x.attr_list[0].attr_id;
 						} else {
 							let sign = `:${this.skuObj.sign_id}:`;
 							x.attr_list.forEach(y => {
@@ -204,7 +202,7 @@ export default {
 							GoodsId: this.skuObj.goods_id,
 							SpecificationSort: this.skuObj.sign_id,
 							Number: this.gc == 0 ? 1 : this.gc
-						},
+						}
 					},
 					res => {
 						uni.showToast({
@@ -225,38 +223,27 @@ export default {
 			}
 		},
 		buy() {
-			let ShoppingCartIdList=[];
+			let ShoppingCartIdList = [];
 			if (this.skuObj && this.skuObj.id) {
 				let good = {
 					DetailList: [],
 					Use_Integral: 0,
 					User_Coupon_Id: 0,
-					DeliveryMethod:0,
-					AddressId:0,
+					DeliveryMethod: 0,
+					AddressId: 0
 				};
 				let g = {
 					GoodsId: this.skuObj.goods_id,
 					Number: this.gc,
-					SpecificationSort: this.skuObj.sign_id,
+					SpecificationSort: this.skuObj.sign_id
 				};
 				good.DetailList.push(g);
-				// let g = {
-				// 	id: this.skuObj.goods_id,
-				// 	num: this.gc,
-				// 	cart_id: 0,
-				// 	goods_attr_id: this.skuObj.id,
-				// 	attr: []
-				// };
-				// this.skuObj.attr_list.forEach(x => {
-				// 	g.attr.push({
-				// 		attr_id: x.attr_id,
-				// 		attr_group_id: x.attr_group_id
-				// 	});
-				// });
-				// this.forms.list[0].goods_list.push(g);
-				// this.forms.list[0].mch_id = this.g.mch_id;
 				uni.navigateTo({
-					url: '/pages/order-submit/order-submit?formData=' + encodeURIComponent(JSON.stringify(good))+'&IsFormShoppingCart=2&ShoppingCartIdList='+JSON.stringify(ShoppingCartIdList),
+					url:
+						'/pages/order-submit/order-submit?formData=' +
+						encodeURIComponent(JSON.stringify(good)) +
+						'&IsFormShoppingCart=2&ShoppingCartIdList=' +
+						JSON.stringify(ShoppingCartIdList),
 					complete(res) {
 						console.log(res);
 					}
@@ -423,7 +410,7 @@ export default {
 	width: 1px;
 	position: relative;
 }
-.goodsku .chosen-info .sku_close{
+.goodsku .chosen-info .sku_close {
 	position: absolute;
 	right: 4px;
 	top: 5px;

components/goods/style1.vue

 <template>
-  <div
-    :style="{
-      'background-color': goodsInfo.backgroundColor,
-      'background-image': goodsInfo.backgroundPicUrl,
-      'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
-    }"
-  >
-    <div
-      v-for="(item, gli) in goodList"
-      :key="gli"
-      class="good-one"
-      @click="openGood(item)"
-      :style="{
-        border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
-        background:
-          goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : '',
-      }"
-    >
-      <div class="tips" v-if="goodsInfo.showGoodsTag">
-        <image
-          :src="goodsInfo.goodsTagPicUrl"
-          mode="widthFix"
-          style="width: 100%;"
-        />
-      </div>
-      <image
-        style="width: calc(100vw - 24px); height: 66vw;"
-        :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
-        :src="item.picUrl"
-        v-if="goodsInfo.goodsCoverProportion == '3-2'"
-      />
-      <image
-        style="
+	<div
+		:style="{
+			'background-color': goodsInfo.backgroundColor,
+			'background-image': goodsInfo.backgroundPicUrl,
+			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
+		}"
+	>
+		<div
+			v-for="(item, gli) in goodList"
+			:key="gli"
+			class="good-one"
+			@click="openGood(item)"
+			:style="{
+				border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
+				background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
+			}"
+		>
+			<div class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" /></div>
+			<image
+				style="width: calc(100vw - 24px); height: 66vw;"
+				:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
+				:src="item.picUrl"
+				v-if="goodsInfo.goodsCoverProportion == '3-2'"
+			/>
+			<image
+				style="
           width: calc(100vw - 24px);
           height: 100vw;
           border-radius: 10rpx 10rpx 0 0;
         "
-        v-if="goodsInfo.goodsCoverProportion == '1-1'"
-        :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
-        :src="item.picUrl"
-      />
-      <div class="good-info">
-        <div class="good-name" v-if="goodsInfo.showGoodsName">
-          {{ item.name }}
-        </div>
-        <div class="good-price-info">
-          <span class="price" :style="{ color: mainColor }">{{
-            goodsInfo.showGoodsPrice ? getPrice(item.price) : ""
-          }}</span>
-          <span class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
-            <u-icon
-              name="cart-o"
-              size="40"
-              :color="mainColor"
-              v-if="goodsInfo.buyBtn == 'cart'"
-            />
-            <u-icon
-              name="add-o"
-              size="40"
-              :color="mainColor"
-              v-else-if="goodsInfo.buyBtn == 'add'"
-            />
-            <u-button
-              type="primary"
-              size="mini"
-              :ripple="true"
-              :color="goodsInfo.buttonColor"
-              :custom-style="`backgroundColor:${goodsInfo.buttonColor},color:${
-                goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
-                  ? goodsInfo.buttonColor
-                  : '#FFF'
-              }`"
-              :plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
-              :shape="
-                goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4
-                  ? 'circle'
-                  : 'square'
-              "
-              v-else
-              >{{ goodsInfo.buyBtnText }}</u-button
-            >
-          </span>
-        </div>
-      </div>
-    </div>
-    <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
-  </div>
+				v-if="goodsInfo.goodsCoverProportion == '1-1'"
+				:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
+				:src="item.picUrl"
+			/>
+			<div class="good-info">
+				<div class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</div>
+				<div class="good-price-info">
+					<span class="price" :style="{ color: mainColor }">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</span>
+					<span class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
+						<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
+						<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
+						<u-button
+							type="primary"
+							size="mini"
+							:ripple="true"
+							:color="goodsInfo.buttonColor"
+							:custom-style="
+								`backgroundColor:${goodsInfo.buttonColor},color:${goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'}`
+							"
+							:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
+							:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
+							v-else
+						>
+							{{ goodsInfo.buyBtnText }}
+						</u-button>
+					</span>
+				</div>
+			</div>
+		</div>
+		<good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
+		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
+	</div>
 </template>
 
 <script>
-import goodSku from '../goods/goodsku'
+import goodSku from '../goods/goodsku';
+import auth from '@/components/auth/index.vue';
 export default {
-  components:{
-    goodSku
-  },
-  props: ["goodList", "goodsInfo"],
-  data() {
-    return {
-      mainColor: "",
-      activeKey: 0,
-      showSku:false,
-      sku:{}
-    };
-  },
-  created() {
-    this.mainColor = this.$uiConfig.mainColor;
-  },
-  methods: {
-    openGood(item) {
-       uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+item.id});
-    },
-    showSkuHandler(g){
-      this.sku=g
-      this.showSku=true
-    }
-  },
+	components: {
+		goodSku,
+		auth
+	},
+	props: ['goodList', 'goodsInfo'],
+	data() {
+		return {
+			mainColor: '',
+			activeKey: 0,
+			showSku: false,
+			sku: {},
+			showAuth: false,
+			u: {}
+		};
+	},
+	created() {
+		this.mainColor = this.$uiConfig.mainColor;
+	},
+	methods: {
+		openGood(item) {
+			uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
+		},
+		showSkuHandler(g) {
+			this.sku = g;
+			this.u = uni.getStorageSync('mall_UserInfo');
+			if (!this.u) {
+				this.u = {
+					nickName: '未登录',
+					avatarUrl: ''
+				};
+				this.showAuth = true;
+			} else {
+				this.showSku = true;
+			}
+		},
+		reloadUserinfo() {
+			this.u = uni.getStorageSync('mall_UserInfo');
+			this.showAuth = false;
+		},
+		//关闭登录窗口
+		gbAuth() {
+			this.showAuth = false;
+		}
+	}
 };
 </script>
 
 <style>
 .good-one {
-  margin: 12px;
-  position: relative;
-  border: 1rpx solid transparent;
-  border-radius: 10rpx;
-  padding-bottom: 10rpx;
-  overflow: hidden;
+	margin: 12px;
+	position: relative;
+	border: 1rpx solid transparent;
+	border-radius: 10rpx;
+	padding-bottom: 10rpx;
+	overflow: hidden;
 }
 .good-one .tips {
-  width: 64rpx;
-  height: 64rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 4;
+	width: 64rpx;
+	height: 64rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 4;
 }
 .good-one .guding {
-  position: relative;
+	position: relative;
 }
 .good-one .guding .img-box {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
 }
 .good-one .good-info {
-  padding: 12rpx;
-  padding-bottom: 0;
-  margin-top: -5px;
+	padding: 12rpx;
+	padding-bottom: 0;
+	margin-top: -5px;
 }
 .good-one .good-info .good-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin-bottom: 13px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	margin-bottom: 13px;
 }
 .good-one .good-info .good-price-info {
-  display: flex;
+	display: flex;
 }
 .good-one .good-info .good-price-info .price {
-  color: #ff4544;
-  font-size: 14px;
-  flex: 1;
+	color: #ff4544;
+	font-size: 14px;
+	flex: 1;
 }
 .good-one .good-info .good-price-info .buy {
-  width: 24px;
-  text-align: right;
+	width: 24px;
+	text-align: right;
 }
 </style>

components/goods/style2.vue

 <template>
-  <view
-    style="padding: 12px; padding-bottom: 0;"
-    :style="{
-      'background-color': goodsInfo.backgroundColor,
-      'background-image': goodsInfo.backgroundPicUrl,
-      'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
-    }"
-  >
-    <u-row gutter="24">
-      <u-col span="6" v-for="(item, gli) in goodList" :key="gli">
-        <view
-          class="good-two"
-          @click="openGood(item)"
-          :style="{
-            border:
-              goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
-            background:
-              goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2
-                ? '#FFF'
-                : '',
-          }"
-        >
-          <view class="tips" v-if="goodsInfo.showGoodsTag">
-            <image :src="goodsInfo.goodsTagPicUrl" mode="widthFix"  style="width:100%"  />
-          </view>
-          <view class="img-box">
-            <view class="img-show">
-              <image
-                style="
+	<view
+		style="padding: 12px; padding-bottom: 0;"
+		:style="{
+			'background-color': goodsInfo.backgroundColor,
+			'background-image': goodsInfo.backgroundPicUrl,
+			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
+		}"
+	>
+		<u-row gutter="24">
+			<u-col span="6" v-for="(item, gli) in goodList" :key="gli">
+				<view
+					class="good-two"
+					@click="openGood(item)"
+					:style="{
+						border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
+						background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
+					}"
+				>
+					<view class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width:100%" /></view>
+					<view class="img-box">
+						<view class="img-show">
+							<image
+								style="
                   width: 100%;
                   height: 100%;
                   border-radius: 10rpx 10rpx 0 0;
                 "
-                :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
-                :src="item.picUrl"
-              />
-            </view>
-          </view>
-          <view class="good-info">
-            <view class="good-name" v-if="goodsInfo.showGoodsName">
-              {{ item.name }}
-            </view>
-            <view class="good-price-info">
-              <view class="price" :style="{'color':mainColor}">{{
-                goodsInfo.showGoodsPrice ? getPrice(item.price) : ""
-              }}</view>
-              <view class="buy" v-if="goodsInfo.showBuyBtn">
-                 <u-icon
-                  name="cart-o"
-                  size="40"
-                  :color="mainColor"
-                  v-if="goodsInfo.buyBtn == 'cart'"
-                />
-                <u-icon
-                  name="add-o"
-                  size="40"
-                  :color="mainColor"
-                  v-else-if="goodsInfo.buyBtn == 'add'"
-                />
-                <u-button
-                  type="primary"
-                  size="mini"
-                  :ripple="true"
-                  :color="goodsInfo.buttonColor"
-                  :custom-style="`backgroundColor:${
-                    goodsInfo.buttonColor
-                  },color:${
-                    goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
-                      ? goodsInfo.buttonColor
-                      : '#FFF'
-                  }`"
-                  :plain="
-                    goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
-                  "
-                  :shape="
-                    goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4
-                      ? 'circle'
-                      : 'square'
-                  "
-                  v-else
-                  >{{ goodsInfo.buyBtnText }}</u-button
-                >
-              </view>
-            </view>
-          </view>
-        </view>
-      </u-col>
-    </u-row>
-  </view>
-</template>
+								:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
+								:src="item.picUrl"
+							/>
+						</view>
+					</view>
+					<view class="good-info">
+						<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
+						<view class="good-price-info">
+							<view class="price" :style="{ color: mainColor }">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</view>
+							<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
+								<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
+								<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
+								<u-button
+									type="primary"
+									size="mini"
+									:ripple="true"
+									:color="goodsInfo.buttonColor"
+									:custom-style="
+										`backgroundColor:${goodsInfo.buttonColor},color:${
+											goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'
+										}`
+									"
+									:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
+									:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
+									v-else
+								>
+									{{ goodsInfo.buyBtnText }}
+								</u-button>
+							</view>
+						</view>
+					</view>
+				</view>
+			</u-col>
+		</u-row>
 
+		<good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
+		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
+	</view>
+</template>
 <script>
+import goodSku from '../goods/goodsku';
+import auth from '@/components/auth/index.vue';
 export default {
-  props: ["goodList", "goodsInfo"],
-  data() {
-    return {
-      mainColor: "",
-      activeKey: 0,
-    };
-  },
-  created() {
-    this.mainColor = this.$uiConfig.mainColor;
-  },
-  methods: {
-    openGood(item) {
-       uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+item.id});
-    },
-  },
+	components: {
+		goodSku,
+		auth
+	},
+	props: ['goodList', 'goodsInfo'],
+	data() {
+		return {
+			mainColor: '',
+			activeKey: 0,
+			showSku: false,
+			sku: {},
+			showAuth: false,
+			u: {}
+		};
+	},
+	created() {
+		this.mainColor = this.$uiConfig.mainColor;
+	},
+	methods: {
+		openGood(item) {
+			uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
+		},
+		showSkuHandler(g) {
+			this.sku = g;
+			this.u = uni.getStorageSync('mall_UserInfo');
+			if (!this.u) {
+				this.u = {
+					nickName: '未登录',
+					avatarUrl: ''
+				};
+				this.showAuth = true;
+			} else {
+				this.showSku = true;
+			}
+		},
+		reloadUserinfo() {
+			this.u = uni.getStorageSync('mall_UserInfo');
+			this.showAuth = false;
+		},
+		//关闭登录窗口
+		gbAuth() {
+			this.showAuth = false;
+		}
+	}
 };
 </script>
 
 <style>
 .good-two {
-  position: relative;
-  margin-bottom: 12px;
-  border: 1rpx solid transparent;
-  border-radius: 10rpx;
-  overflow: hidden;
-  padding-bottom: 10rpx;
+	position: relative;
+	margin-bottom: 12px;
+	border: 1rpx solid transparent;
+	border-radius: 10rpx;
+	overflow: hidden;
+	padding-bottom: 10rpx;
 }
 .good-two .tips {
-  width: 64rpx;
-  height: 64rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 4;
+	width: 64rpx;
+	height: 64rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 4;
 }
 .good-two .img-box {
-  width: 100%;
-  height: 0;
-  padding-top: 100%;
-  position: relative;
+	width: 100%;
+	height: 0;
+	padding-top: 100%;
+	position: relative;
 }
 .good-two .img-box .img-show {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
 }
 .good-two .guding {
-  position: relative;
+	position: relative;
 }
 .good-two .guding .img-box {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
 }
 .good-two .good-info {
-  padding: 6rpx;
-  margin-top: -5px;
-  padding-bottom: 0;
+	padding: 6rpx;
+	margin-top: -5px;
+	padding-bottom: 0;
 }
 .good-two .good-info .good-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin: 3px 0;
-  font-size: 13px;
-  min-height:35px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	margin: 3px 0;
+	font-size: 13px;
+	min-height: 35px;
 }
 .good-two .good-info .good-price-info {
-  display: flex;
+	display: flex;
 }
 .good-two .good-info .good-price-info .price {
-  color: #ff4544;
-  flex: 1;
-  font-size: 14px;
+	color: #ff4544;
+	flex: 1;
+	font-size: 14px;
 }
 .good-two .good-info .good-price-info .buy {
-  width: 24px;
-  text-align: right;
+	width: 24px;
+	text-align: right;
 }
 </style>

components/goods/style3.vue

 <template>
-  <div
-    style="padding: 12px; padding-bottom: 0;"
-    :style="{
-      'background-color': goodsInfo.backgroundColor,
-      'background-image': goodsInfo.backgroundPicUrl,
-      'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
-    }"
-  >
-    <u-row gutter="24">
-      <u-col
-        span="4"
-        v-for="(item, gli) in goodList"
-        :key="gli"
-      >
-        <div class="good-three" @click="openGood(item)" :style="{
-            border:
-              goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
-            background:
-              goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2
-                ? '#FFF'
-                : '',
-          }">
-          <div class="tips" v-if="goodsInfo.showGoodsTag">
-            <image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width:100%" />
-          </div>
-          <div class="img-box">
-            <div class="img-show">
-              <image
-                style="
+	<div
+		style="padding: 12px; padding-bottom: 0;"
+		:style="{
+			'background-color': goodsInfo.backgroundColor,
+			'background-image': goodsInfo.backgroundPicUrl,
+			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
+		}"
+	>
+		<u-row gutter="24">
+			<u-col span="4" v-for="(item, gli) in goodList" :key="gli">
+				<div
+					class="good-three"
+					@click="openGood(item)"
+					:style="{
+						border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
+						background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
+					}"
+				>
+					<div class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width:100%" /></div>
+					<div class="img-box">
+						<div class="img-show">
+							<image
+								style="
                   width: 100%;
                   height: 100%;
                   border-radius: 10rpx 10rpx 0 0;
                 "
-                :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
-                :src="item.picUrl"
-              />
-            </div>
-          </div>
-          <div class="good-info">
-            <div class="good-name" v-if="goodsInfo.showGoodsName">
-              {{ item.name }}
-            </div>
-            <div class="good-price-info">
-              <view class="price" :style="{'color':mainColor}">{{
-                goodsInfo.showGoodsPrice ? getPrice(item.price) : ""
-              }}</view>
-              <view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
-                <u-icon
-                  name="cart-o"
-                  size="40"
-                  :color="mainColor"
-                  v-if="goodsInfo.buyBtn == 'cart'"
-                />
-                <u-icon
-                  name="add-o"
-                  size="40"
-                  :color="mainColor"
-                  v-else-if="goodsInfo.buyBtn == 'add'"
-                />
-                <u-button
-                  type="primary"
-                  size="mini"
-                  :ripple="true"
-                  :color="goodsInfo.buttonColor"
-                  :custom-style="`backgroundColor:${
-                    goodsInfo.buttonColor
-                  },color:${
-                    goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
-                      ? goodsInfo.buttonColor
-                      : '#FFF'
-                  }`"
-                  :plain="
-                    goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
-                  "
-                  :shape="
-                    goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4
-                      ? 'circle'
-                      : 'square'
-                  "
-                  v-else
-                  >{{ goodsInfo.buyBtnText }}</u-button
-                >
-              </view>
-            </div>
-          </div>
-        </div>
-      </u-col>
-    </u-row>
-    <good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
-  </div>
+								:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
+								:src="item.picUrl"
+							/>
+						</div>
+					</div>
+					<div class="good-info">
+						<div class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</div>
+						<div class="good-price-info">
+							<view class="price" :style="{ color: mainColor }">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</view>
+							<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
+								<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
+								<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
+								<u-button
+									type="primary"
+									size="mini"
+									:ripple="true"
+									:color="goodsInfo.buttonColor"
+									:custom-style="
+										`backgroundColor:${goodsInfo.buttonColor},color:${
+											goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'
+										}`
+									"
+									:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
+									:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
+									v-else
+								>
+									{{ goodsInfo.buyBtnText }}
+								</u-button>
+							</view>
+						</div>
+					</div>
+				</div>
+			</u-col>
+		</u-row>
+		<good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
+		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
+	</div>
 </template>
 
 <script>
-import goodSku from '../goods/goodsku'
+import goodSku from '../goods/goodsku';
+import auth from '@/components/auth/index.vue';
 export default {
-  components:{
-    goodSku
-  },
-  props: ["goodList", "goodsInfo"],
-  data() {
-    return {
-      mainColor: "",
-      activeKey: 0,
-      showSku:false,
-      sku:{}
-    };
-  },
-  created() {
-    this.mainColor = this.$uiConfig.mainColor;
-  },
-  methods: {
-    openGood(item) {
-       uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+item.id});
-    },
-    showSkuHandler(g){
-      this.sku=g
-      this.showSku=true
-    }
-  },
+	components: {
+		goodSku,
+		auth
+	},
+	props: ['goodList', 'goodsInfo'],
+	data() {
+		return {
+			mainColor: '',
+			activeKey: 0,
+			showSku: false,
+			sku: {},
+			showAuth: false,
+			u: {}
+		};
+	},
+	created() {
+		this.mainColor = this.$uiConfig.mainColor;
+	},
+	methods: {
+		openGood(item) {
+			uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
+		},
+		showSkuHandler(g) {
+			this.sku = g;
+			this.u = uni.getStorageSync('mall_UserInfo');
+			if (!this.u) {
+				this.u = {
+					nickName: '未登录',
+					avatarUrl: ''
+				};
+				this.showAuth = true;
+			} else {
+				this.showSku = true;
+			}
+		},
+		reloadUserinfo() {
+			this.u = uni.getStorageSync('mall_UserInfo');
+			this.showAuth = false;
+		},
+		//关闭登录窗口
+		gbAuth() {
+			this.showAuth = false;
+		}
+	}
 };
 </script>
 
 <style>
 .good-three {
-  position: relative;
-  margin-bottom: 12px;
-  border: 1rpx solid transparent;
-  border-radius: 10rpx;
-  overflow: hidden;
-  padding-bottom: 5px;
+	position: relative;
+	margin-bottom: 12px;
+	border: 1rpx solid transparent;
+	border-radius: 10rpx;
+	overflow: hidden;
+	padding-bottom: 5px;
 }
 .good-three .tips {
-  width: 64rpx;
-  height: 64rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 4;
+	width: 64rpx;
+	height: 64rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 4;
 }
 .good-three .img-box {
-  width: 100%;
-  height: 0;
-  padding-top: 100%;
-  position: relative;
+	width: 100%;
+	height: 0;
+	padding-top: 100%;
+	position: relative;
 }
 .good-three .img-box .img-show {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
 }
 .good-three .guding {
-  position: relative;
+	position: relative;
 }
 .good-three .guding .img-box {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
 }
 .good-three .good-info {
-  padding: 6rpx;
-  margin-top: -5px;
-  padding-bottom: 0;
+	padding: 6rpx;
+	margin-top: -5px;
+	padding-bottom: 0;
 }
 .good-three .good-info .good-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin: 3px 0;
-  font-size: 13px;
-  word-break:break-all;
-  min-height:34px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	margin: 3px 0;
+	font-size: 13px;
+	word-break: break-all;
+	min-height: 34px;
 }
 .good-three .good-info .good-price-info {
-  display: flex;
-  justify-items: center;
-  align-items: center;
+	display: flex;
+	justify-items: center;
+	align-items: center;
 }
 .good-three .good-info .good-price-info .price {
-  color: #ff4544;
-  flex: 1;
-  font-size: 14px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+	color: #ff4544;
+	flex: 1;
+	font-size: 14px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 .good-three .good-info .good-price-info .buy {
-  width: 24px;
-  text-align: right;
+	width: 24px;
+	text-align: right;
 }
 </style>

components/goods/style4.vue

 <template>
-  <view 
-    style="padding: 12px; padding-bottom: 0;width:100%;min-height:450rpx;"
-    :style="{
-      'background-color': goodsInfo.backgroundColor,
-      'background-image': goodsInfo.backgroundPicUrl,
-      'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
-    }"
-  >
-    <view
-      class="good-four"
-      v-for="(item, gli) in goodList"
-      :key="gli"
-      @click="openGood(item)"
-      :style="{
-        border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
-        background:
-          goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : '',
-      }"
-    >
-      <view class="tips" v-if="goodsInfo.showGoodsTag">
-        <image
-          :src="goodsInfo.goodsTagPicUrl"
-          mode="widthFix"
-          style="width: 100%;"
-        />
-      </view>
-      <view class="img-box">
-        <image
-          style="width: 100%; height: 100%;"
-          :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
-          :src="item.picUrl"
-        />
-      </view>
-      <view class="good-info">
-        <view class="good-name" v-if="goodsInfo.showGoodsName">{{
-          item.name
-        }}</view>
-        <view class="good-price-info">
-          <view class="price" :style="{'color':mainColor}">{{
-            goodsInfo.showGoodsPrice ? getPrice(item.price) : ""
-          }}</view>
-          <view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
-            <u-icon
-              name="cart-o"
-              size="40"
-              :color="mainColor"
-              v-if="goodsInfo.buyBtn == 'cart'"
-            />
-            <u-icon
-              name="add-o"
-              size="40"
-              :color="mainColor"
-              v-else-if="goodsInfo.buyBtn == 'add'"
-            />
-            <u-button
-              type="primary"
-              size="mini"
-              :ripple="true"
-              :color="goodsInfo.buttonColor"
-              :custom-style="`backgroundColor:${goodsInfo.buttonColor},color:${
-                goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
-                  ? goodsInfo.buttonColor
-                  : '#FFF'
-              }`"
-              :plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
-              :shape="
-                goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4
-                  ? 'circle'
-                  : 'square'
-              "
-              v-else
-              >{{ goodsInfo.buyBtnText }}</u-button
-            >
-          </view>
-        </view>
-      </view>
-    </view>
-    <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
-  </view>
+	<view
+		style="padding: 12px; padding-bottom: 0;width:100%;min-height:450rpx;"
+		:style="{
+			'background-color': goodsInfo.backgroundColor,
+			'background-image': goodsInfo.backgroundPicUrl,
+			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
+		}"
+	>
+		<view
+			class="good-four"
+			v-for="(item, gli) in goodList"
+			:key="gli"
+			@click="openGood(item)"
+			:style="{
+				border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
+				background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
+			}"
+		>
+			<view class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" /></view>
+			<view class="img-box"><image style="width: 100%; height: 100%;" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" /></view>
+			<view class="good-info">
+				<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
+				<view class="good-price-info">
+					<view class="price" :style="{ color: mainColor }">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</view>
+					<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
+						<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
+						<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
+						<u-button
+							type="primary"
+							size="mini"
+							:ripple="true"
+							:color="goodsInfo.buttonColor"
+							:custom-style="
+								`backgroundColor:${goodsInfo.buttonColor},color:${goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'}`
+							"
+							:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
+							:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
+							v-else
+						>
+							{{ goodsInfo.buyBtnText }}
+						</u-button>
+					</view>
+				</view>
+			</view>
+		</view>
+		<good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
+		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
+	</view>
 </template>
 
 <script>
-import goodSku from '../goods/goodsku'
+import goodSku from '../goods/goodsku';
+import auth from '@/components/auth/index.vue';
 export default {
-  components:{
-    goodSku
-  },
-  props: ["goodList", "goodsInfo"],
-  data() {
-    return {
-      mainColor: "",
-      activeKey: 0,
-      showSku:false,
-      sku:{}
-    };
-  },
-  created() {
-    this.mainColor = this.$uiConfig.mainColor;
-  },
-  methods: {
-    openGood(item) {
-	   uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+item.id});
-    },
-    showSkuHandler(g){
-      this.sku=g
-      this.showSku=true 
-    },
-	//格式化价格添加.00
-	// getPrice(value){
-	//   var html,_val;
-	//   value =Number(value).toFixed(2);
-	//   if(value==0){
-	//    value=0;
-	//    return html = "￥0";
-	//   }else if(value.split('.')[1].substring(1)==0){
-	//    value = Number(value).toFixed(2);
-	//   }
-	//   _val = value.split('.');
-	//   return html = '￥'+_val[0]+'.'+_val[1];
-	// }
-  },
+	components: {
+		goodSku,
+		auth
+	},
+	props: ['goodList', 'goodsInfo'],
+	data() {
+		return {
+			mainColor: '',
+			activeKey: 0,
+			showSku: false,
+			sku: {},
+			showAuth: false,
+			u: {}
+		};
+	},
+	created() {
+		this.mainColor = this.$uiConfig.mainColor;
+	},
+	methods: {
+		openGood(item) {
+			uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
+		},
+		showSkuHandler(g) {
+			this.sku = g;
+			this.u = uni.getStorageSync('mall_UserInfo');
+			if (!this.u) {
+				this.u = {
+					nickName: '未登录',
+					avatarUrl: ''
+				};
+				this.showAuth = true;
+			} else {
+				this.showSku = true;
+			}
+		},
+		reloadUserinfo() {
+			this.u = uni.getStorageSync('mall_UserInfo');
+			this.showAuth = false;
+		},
+		//关闭登录窗口
+		gbAuth() {
+			this.showAuth = false;
+		}
+		//格式化价格添加.00
+		// getPrice(value){
+		//   var html,_val;
+		//   value =Number(value).toFixed(2);
+		//   if(value==0){
+		//    value=0;
+		//    return html = "￥0";
+		//   }else if(value.split('.')[1].substring(1)==0){
+		//    value = Number(value).toFixed(2);
+		//   }
+		//   _val = value.split('.');
+		//   return html = '￥'+_val[0]+'.'+_val[1];
+		// }
+	}
 };
 </script>
 
 <style>
 .good-four {
-  position: relative;
-  margin-bottom: 14px;
-  display: flex;
-  height: 102px;
-  border: 1rpx solid transparent;
-  border-radius: 10rpx;
-  box-sizing: border-box;
-  padding: 0 1px 1px 0;
-  overflow: hidden;
+	position: relative;
+	margin-bottom: 14px;
+	display: flex;
+	height: 102px;
+	border: 1rpx solid transparent;
+	border-radius: 10rpx;
+	box-sizing: border-box;
+	padding: 0 1px 1px 0;
+	overflow: hidden;
 }
 .good-four .tips {
-  width: 64rpx;
-  height: 64rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 4;
+	width: 64rpx;
+	height: 64rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 4;
 }
 .good-four .img-box {
-  width: 100px;
-  height: 100px;
+	width: 100px;
+	height: 100px;
 }
 .good-four .good-info {
-  padding: 12px;
-  flex: 1;
-  width: 1rpx;
-  border: 10rpx;
-  padding-bottom: 0;
-  display: flex;
-  flex-direction: column;
-  /* width:20%; */
+	padding: 12px;
+	flex: 1;
+	width: 1rpx;
+	border: 10rpx;
+	padding-bottom: 0;
+	display: flex;
+	flex-direction: column;
+	/* width:20%; */
 }
 .good-four .good-info .good-name {
-  font-size: 13px;
-  height: 34px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+	font-size: 13px;
+	height: 34px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
 }
 .good-four .good-info .good-price-info {
-  display: flex;
-  justify-items: center;
-  align-items: flex-end;
-  height: 22px;
-  flex: 1;
-  padding-bottom: 10rpx;
+	display: flex;
+	justify-items: center;
+	align-items: flex-end;
+	height: 22px;
+	flex: 1;
+	padding-bottom: 10rpx;
 }
 .good-four .good-info .good-price-info .price {
-  color: #ff4544;
-  flex: 1;
-  font-size: 14px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+	color: #ff4544;
+	flex: 1;
+	font-size: 14px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 .good-four .good-info .good-price-info .buy {
-  width: 24px;
-  text-align: right;
+	width: 24px;
+	text-align: right;
 }
 </style>

components/goods/style5.vue

 <template>
-  <view
-    class="her-scoller"
-    :style="{
-      'background-color': goodsInfo.backgroundColor,
-      'background-image': goodsInfo.backgroundPicUrl,
-      'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
-    }"
-  >
-    <view
-      class="good-five"
-      @click="openGood(item)"
-      v-for="(item, gli) in goodList"
-      :key="gli"
-      :style="{
-          'border': goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
-          background:
-            goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2
-              ? '#FFF'
-              : '',
-        }"
-    >
-      <view class="tips" v-if="goodsInfo.showGoodsTag">
-        <image :src="goodsInfo.goodsTagPicUrl" mode="widthFix"  style="width:100%" />
-      </view>
-      <view class="img-box">
-        <view class="img-show">
-          <image
-            style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0;"
-            :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
-            :src="item.picUrl"
-          />
-        </view>
-      </view>
-      <view
-        class="good-info"
-      >
-        <view class="good-name" v-if="goodsInfo.showGoodsName">
-          {{ item.name }}
-        </view>
-        <view class="good-price-info">
-          <view class="price" :style="{'color':mainColor}">{{
-            goodsInfo.showGoodsPrice ? getPrice(item.price) : ""
-          }}</view>
-          <view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
-            <u-icon
-              name="cart-o"
-              size="40"
-              :color="mainColor"
-              v-if="goodsInfo.buyBtn == 'cart'"
-            />
-            <u-icon
-              name="add-o"
-              size="40"
-              :color="mainColor"
-              v-else-if="goodsInfo.buyBtn == 'add'"
-            />
-            <u-button
-              type="primary"
-              size="mini"
-              :ripple="true"
-              :color="goodsInfo.buttonColor"
-              :custom-style="`backgroundColor:${goodsInfo.buttonColor},color:${
-                goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
-                  ? goodsInfo.buttonColor
-                  : '#FFF'
-              }`"
-              :plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
-              :shape="
-                goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4
-                  ? 'circle'
-                  : 'square'
-              "
-              v-else
-              >{{ goodsInfo.buyBtnText }}</u-button
-            >
-          </view>
-        </view>
-      </view>
-    </view>
-    <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
-  </view>
+	<view
+		class="her-scoller"
+		:style="{
+			'background-color': goodsInfo.backgroundColor,
+			'background-image': goodsInfo.backgroundPicUrl,
+			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
+		}"
+	>
+		<view
+			class="good-five"
+			@click="openGood(item)"
+			v-for="(item, gli) in goodList"
+			:key="gli"
+			:style="{
+				border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
+				background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
+			}"
+		>
+			<view class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width:100%" /></view>
+			<view class="img-box">
+				<view class="img-show">
+					<image style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0;" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" />
+				</view>
+			</view>
+			<view class="good-info">
+				<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
+				<view class="good-price-info">
+					<view class="price" :style="{ color: mainColor }">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</view>
+					<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
+						<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
+						<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
+						<u-button
+							type="primary"
+							size="mini"
+							:ripple="true"
+							:color="goodsInfo.buttonColor"
+							:custom-style="
+								`backgroundColor:${goodsInfo.buttonColor},color:${goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'}`
+							"
+							:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
+							:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
+							v-else
+						>
+							{{ goodsInfo.buyBtnText }}
+						</u-button>
+					</view>
+				</view>
+			</view>
+		</view>
+		<good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
+		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
+	</view>
 </template>
 <script>
-import goodSku from '../goods/goodsku'
+import goodSku from '../goods/goodsku';
+import auth from '@/components/auth/index.vue';
 export default {
-  components:{
-	goodSku
-  },
-  props: ["goodList", "goodsInfo"],
-  data() {
-    return {
-      mainColor: "",
-      activeKey: 0,
-	  showSku:false,
-	  sku:{}
-    };
-  },
-  created() {
-    this.mainColor = this.$uiConfig.mainColor;
-  },
-  methods: {
-    openGood(item) {
-       uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+item.id});
-    },
-	showSkuHandler(g){
-	  this.sku=g
-	  this.showSku=true
+	components: {
+		goodSku,
+		auth
 	},
-  },
+	props: ['goodList', 'goodsInfo'],
+	data() {
+		return {
+			mainColor: '',
+			activeKey: 0,
+			showSku: false,
+			sku: {},
+			showAuth: false,
+			u: {}
+		};
+	},
+	created() {
+		this.mainColor = this.$uiConfig.mainColor;
+	},
+	methods: {
+		openGood(item) {
+			uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
+		},
+		showSkuHandler(g) {
+			this.sku = g;
+			this.u = uni.getStorageSync('mall_UserInfo');
+			if (!this.u) {
+				this.u = {
+					nickName: '未登录',
+					avatarUrl: ''
+				};
+				this.showAuth = true;
+			} else {
+				this.showSku = true;
+			}
+		},
+		reloadUserinfo() {
+			this.u = uni.getStorageSync('mall_UserInfo');
+			this.showAuth = false;
+		},
+		//关闭登录窗口
+		gbAuth() {
+			this.showAuth = false;
+		}
+	}
 };
 </script>
 
 <style>
 .her-scoller {
-  overflow-x: auto !important;
-  padding: 12px;
-  display: flex;
-  white-space: nowrap;
+	overflow-x: auto !important;
+	padding: 12px;
+	display: flex;
+	white-space: nowrap;
 }
 /* .her-scoller::after {
   clear: both;
@@ -124,78 +116,78 @@ export default {
   display: block;
 } */
 .her-scoller .good-five {
-  position: relative;
-  margin-right: 12px;
-  width: 30%;
-  border: 1rpx solid transparent;
-  border-radius: 10rpx;
-  padding-bottom: 10rpx;
-  /* float: left; */
+	position: relative;
+	margin-right: 12px;
+	width: 30%;
+	border: 1rpx solid transparent;
+	border-radius: 10rpx;
+	padding-bottom: 10rpx;
+	/* float: left; */
 }
 .her-scoller .good-five .tips {
-  width: 64rpx;
-  height: 64rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 4;
+	width: 64rpx;
+	height: 64rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 4;
 }
 .her-scoller .good-five .img-box {
-  width: 100%;
-  height: 0;
-  padding-top: 100%;
-  position: relative;
+	width: 100%;
+	height: 0;
+	padding-top: 100%;
+	position: relative;
 }
 .her-scoller .good-five .img-box .img-show {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  z-index: 2;
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	z-index: 2;
 }
 .her-scoller .good-five .guding {
-  position: relative;
+	position: relative;
 }
 .her-scoller .good-five .guding .img-box {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
 }
 .her-scoller .good-five .good-info {
-  padding: 6rpx;
-  padding-bottom: 0;
+	padding: 6rpx;
+	padding-bottom: 0;
 }
 .her-scoller .good-five .good-info .good-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin-bottom: 4rpx;
-  font-size: 13px;
-  width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: block;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	margin-bottom: 4rpx;
+	font-size: 13px;
+	width: 100%;
 }
 .her-scoller .good-five .good-info .good-price-info {
-  display: flex;
-  justify-items: center;
-  align-items: center;
+	display: flex;
+	justify-items: center;
+	align-items: center;
 }
 .her-scoller .good-five .good-info .good-price-info .price {
-  color: #ff4544;
-  flex: 1;
-  font-size: 14px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+	color: #ff4544;
+	flex: 1;
+	font-size: 14px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 .her-scoller .good-five .good-info .good-price-info .buy {
-  width: 24px;
-  text-align: right;
+	width: 24px;
+	text-align: right;
 }
 </style>

components/goods/style6.vue

 <template>
-  <view 
-    style="padding: 12px; padding-bottom: 0;width:100%;"
-    :style="{
-      'background-color': goodsInfo.backgroundColor,
-      'background-image': goodsInfo.backgroundPicUrl,
-      'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
-    }"
-  >
-    <view
-      class="good-four"
-      v-for="(item, gli) in goodList"
-      :key="gli"
-      @click="openGood(item)"
-      :style="{
-        border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
-        background:
-          goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : '',
-      }"
-    >
-      <view class="tips" v-if="goodsInfo.showGoodsTag">
-        <image
-          :src="goodsInfo.goodsTagPicUrl"
-          mode="widthFix"
-          style="width: 100%;"
-        />
-      </view>
-      <view class="img-box">
-        <image
-          style="width: 100%; height: 100%;"
-          :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
-          :src="item.picUrl"
-        />
-      </view>
-      <view class="good-info">
-        <view class="good-name" v-if="goodsInfo.showGoodsName">{{
-          item.name
-        }}</view>
-        <view class="good-price-info">
-          <view class="price" :style="{'color':mainColor}">{{
-            goodsInfo.showGoodsPrice ? getPrice(item.price) : ""
-          }}</view>
-          <view class="buy" v-if="goodsInfo.showBuyBtn">
-            <u-icon
-              name="cart-o"
-              size="40"
-              :color="mainColor"
-              v-if="goodsInfo.buyBtn == 'cart'"
-            />
-            <u-icon
-              name="add-o"
-              size="40"
-              :color="mainColor"
-              v-else-if="goodsInfo.buyBtn == 'add'"
-            />
-            <u-button
-              type="primary"
-              size="mini"
-              :ripple="true"
-              :color="goodsInfo.buttonColor"
-              :custom-style="`backgroundColor:${goodsInfo.buttonColor},color:${
-                goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
-                  ? goodsInfo.buttonColor
-                  : '#FFF'
-              }`"
-              :plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
-              :shape="
-                goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4
-                  ? 'circle'
-                  : 'square'
-              "
-              v-else
-              >{{ goodsInfo.buyBtnText }}</u-button
-            >
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
+	<view
+		style="padding: 12px; padding-bottom: 0;width:100%;"
+		:style="{
+			'background-color': goodsInfo.backgroundColor,
+			'background-image': goodsInfo.backgroundPicUrl,
+			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
+		}"
+	>
+		<view
+			class="good-four"
+			v-for="(item, gli) in goodList"
+			:key="gli"
+			@click="openGood(item)"
+			:style="{
+				border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
+				background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
+			}"
+		>
+			<view class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" /></view>
+			<view class="img-box"><image style="width: 100%; height: 100%;" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" /></view>
+			<view class="good-info">
+				<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
+				<view class="good-price-info">
+					<view class="price" :style="{ color: mainColor }">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</view>
+					<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
+						<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
+						<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
+						<u-button
+							type="primary"
+							size="mini"
+							:ripple="true"
+							:color="goodsInfo.buttonColor"
+							:custom-style="
+								`backgroundColor:${goodsInfo.buttonColor},color:${goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'}`
+							"
+							:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
+							:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
+							v-else
+						>
+							{{ goodsInfo.buyBtnText }}
+						</u-button>
+					</view>
+				</view>
+			</view>
+		</view>
+		<good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
+		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
+	</view>
 </template>
 
 <script>
+import goodSku from '../goods/goodsku';
+import auth from '@/components/auth/index.vue';
 export default {
-  props: ["goodList", "goodsInfo"],
-  data() {
-    return {
-      mainColor: "",
-      activeKey: 0,
-    };
-  },
-  created() {
-    this.mainColor = this.$uiConfig.mainColor;
-  },
-  methods: {
-    openGood(item) {
-       uni.navigateTo({ url: '/pages/goods/goods?GoodsId='+item.id});
-    },
-  },
+	components: {
+		goodSku,
+		auth
+	},
+	props: ['goodList', 'goodsInfo'],
+	data() {
+		return {
+			mainColor: '',
+			activeKey: 0,
+			showSku: false,
+			sku: {},
+			showAuth: false,
+			u: {}
+		};
+	},
+	created() {
+		this.mainColor = this.$uiConfig.mainColor;
+	},
+	methods: {
+		openGood(item) {
+			uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
+		},
+		showSkuHandler(g) {
+			this.sku = g;
+			this.u = uni.getStorageSync('mall_UserInfo');
+			if (!this.u) {
+				this.u = {
+					nickName: '未登录',
+					avatarUrl: ''
+				};
+				this.showAuth = true;
+			} else {
+				this.showSku = true;
+			}
+		},
+		reloadUserinfo() {
+			this.u = uni.getStorageSync('mall_UserInfo');
+			this.showAuth = false;
+		},
+		//关闭登录窗口
+		gbAuth() {
+			this.showAuth = false;
+		}
+	}
 };
 </script>
 
 <style>
 .good-four {
-  position: relative;
-  margin-bottom: 14px;
-  display: flex;
-  height: 102px;
-  border: 1rpx solid transparent;
-  border-radius: 10rpx;
-  box-sizing: border-box;
-  padding: 0 1px 1px 0;
-  overflow: hidden;
+	position: relative;
+	margin-bottom: 14px;
+	display: flex;
+	height: 102px;
+	border: 1rpx solid transparent;
+	border-radius: 10rpx;
+	box-sizing: border-box;
+	padding: 0 1px 1px 0;
+	overflow: hidden;
 }
 .good-four .tips {
-  width: 64rpx;
-  height: 64rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 4;
+	width: 64rpx;
+	height: 64rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 4;
 }
 .good-four .img-box {
-  width: 100px;
-  height: 100px;
+	width: 100px;
+	height: 100px;
 }
 .good-four .good-info {
-  padding: 12px;
-  flex: 1;
-  width: 1rpx;
-  border: 10rpx;
-  padding-bottom: 0;
-  display: flex;
-  flex-direction: column;
-  /* width:20%; */
+	padding: 12px;
+	flex: 1;
+	width: 1rpx;
+	border: 10rpx;
+	padding-bottom: 0;
+	display: flex;
+	flex-direction: column;
+	/* width:20%; */
 }
 .good-four .good-info .good-name {
-  font-size: 13px;
-  height: 34px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+	font-size: 13px;
+	height: 34px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
 }
 .good-four .good-info .good-price-info {
-  display: flex;
-  justify-items: center;
-  align-items: flex-end;
-  height: 22px;
-  flex: 1;
-  padding-bottom: 10rpx;
+	display: flex;
+	justify-items: center;
+	align-items: flex-end;
+	height: 22px;
+	flex: 1;
+	padding-bottom: 10rpx;
 }
 .good-four .good-info .good-price-info .price {
-  color: #ff4544;
-  flex: 1;
-  font-size: 14px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+	color: #ff4544;
+	flex: 1;
+	font-size: 14px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 .good-four .good-info .good-price-info .buy {
-  width: 24px;
-  text-align: right;
+	width: 24px;
+	text-align: right;
 }
 </style>