feat:增加Empty 组件，自动占满屏幕且文字垂直水平居中

components/Empty/Empty.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="empty-container" :style="{ height: containerHeight }">
+    <text class="empty-text">{{ text }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "Empty",
+  props: {
+    text: {
+      type: String,
+      default: "暂无数据", // 默认文字
+    },
+  },
+  data() {
+    return {
+      topHeight: 0, // 到顶部的距离
+    };
+  },
+  computed: {
+    // 计算动态的容器高度
+    containerHeight() {
+      return `calc(100vh - ${this.topHeight}px)`;
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getElementTopDistance();
+    });
+  },
+  methods: {
+    getElementTopDistance() {
+      let _this = this;
+      const query = uni.createSelectorQuery().in(_this);
+      query
+        .select(".empty-container")
+        .boundingClientRect((data) => {
+          if (data) {
+            this.topHeight = data.top; // 记录到顶部的距离
+          }
+        })
+        .exec();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw; /* 占满屏幕宽度 */
+  background-color: #f5f5f5;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.empty-text {
+  color: #666;
+  font-size: 16px;
+}
+</style>

pages/addr/index.vue

@@ -1,500 +1,499 @@
 <template>
-	<view>
-		<view class="to_bottom" v-if="!addrList.length">-----还没有地址啦-----</view>
-		<view class="addr_list">
-			<view class="addr_item" v-for="(item, index) in addrList" :key="index">
-				<view class="contact_user" style="display: flex; justify-content: space-between; width: 100%">
-					<view style="display: flex">
-						<text class="contact_name">{{ item.contact_name }}</text>
-						<text class="contact_phone">{{ item.contact_phone }}</text>
-					</view>
-					<view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
-						<text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text>
-						{{ item.contact_shop }}
-					</view>
-				</view>
-				<view class="contact_addr">{{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }}</view>
-				<view class="contact_handler">
-					<view class="radio_label" @click="setDefault(index)">
-						<image class="radio_icon" :src="item.is_default ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
-						<text :class="item.is_default ? 'radioed_text' : ''">{{ item.is_default ? '已默认' : '设为默认' }}</text>
-					</view>
-					<view class="addr_right_btn" @click="removeAddr(index)">删除</view>
-					<view class="addr_right_btn" @click="openForm(item)">编辑</view>
-				</view>
-			</view>
-		</view>
-		<view class="create_box">
-			<button class="create_addr" @click="openForm()">新建收货地址</button>
-		</view>
-		<view class="to_bottom" v-if="isLast">-----到底啦-----</view>
-		<uni-popup ref="addrForm" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
-			<view class="contact_addr_form">
-				<!-- 地区代表表单 -->
-				<form class="info_form">
-					<view class="form_group">
-						<view class="group_title">收货人：</view>
-						<view class="group_box">
-							<input type="text" class="form_ctrl" placeholder="请输入收件人" maxlength="20" required="" v-model="addrRequest.contact_name" />
-						</view>
-					</view>
-					<view class="form_group">
-						<view class="group_title">手机号：</view>
-						<view class="group_box">
-							<input type="text" class="form_ctrl" placeholder="请输入手机号" maxlength="11" required="" v-model="addrRequest.contact_phone" />
-						</view>
-					</view>
-					<view class="form_group">
-						<view class="group_title">店铺名称：</view>
-						<view class="group_box">
-							<input type="text" class="form_ctrl" placeholder="请输入店铺名称" maxlength="20" required="" v-model="addrRequest.contact_shop" />
-						</view>
-					</view>
-					<view class="form_group">
-						<view class="group_title">终端类型：</view>
-						<view class="group_box">
-							<view class="terminalType_radio">
-								<view v-for="item in terminalType" :key="item.key">
-									<view style="display: flex; align-items: center" @click="handleRadioChange(item.key)">
-										<image
-											class="radio_icon"
-											:src="item.key === addrRequest.shop_type ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"
-										></image>
-										&nbsp;{{ item.label }}
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-					<view class="form_group">
-						<view class="group_title">所在地区：</view>
-						<view class="group_box">
-							<picker mode="multiSelector" class="form_ctrl" :range="cityArray" @columnchange="cityChange" @change="cityFinish">
-								<view class="area_text">
-									<text v-if="addrRequest.contact_province">{{ addrRequest.contact_province }}</text>
-									<text v-if="addrRequest.contact_city">/{{ addrRequest.contact_city }}</text>
-									<text v-if="addrRequest.contact_area">/{{ addrRequest.contact_area }}</text>
-								</view>
-							</picker>
-						</view>
-					</view>
-					<view class="form_group">
-						<view class="group_title">详细地址：</view>
-						<view class="group_box">
-							<input type="text" class="form_ctrl" placeholder="请输入详细地址:街道/小区/门牌号" maxlength="64" required="" v-model="addrRequest.contact_addr" />
-						</view>
-					</view>
-					<view class="form_group">
-						<view class="group_title">设为默认</view>
-						<view class="group_box">
-							<switch color="#E03519" style="transform: scale(0.6); float: right" @change="defaultSwitch" :checked="addrRequest.is_default ? true : false" />
-						</view>
-					</view>
-					<button class="submit_btn" @click="saveAddr">保存地址</button>
-				</form>
-			</view>
-		</uni-popup>
-	</view>
+  <view>
+    <view class="addr_list">
+      <view class="addr_item" v-for="(item, index) in addrList" :key="index">
+        <view class="contact_user" style="display: flex; justify-content: space-between; width: 100%">
+          <view style="display: flex">
+            <text class="contact_name">{{ item.contact_name }}</text>
+            <text class="contact_phone">{{ item.contact_phone }}</text>
+          </view>
+          <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
+            <text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text>
+            {{ item.contact_shop }}
+          </view>
+        </view>
+        <view class="contact_addr">{{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }}</view>
+        <view class="contact_handler">
+          <view class="radio_label" @click="setDefault(index)">
+            <image class="radio_icon" :src="item.is_default ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
+            <text :class="item.is_default ? 'radioed_text' : ''">{{ item.is_default ? "已默认" : "设为默认" }}</text>
+          </view>
+          <view class="addr_right_btn" @click="removeAddr(index)">删除</view>
+          <view class="addr_right_btn" @click="openForm(item)">编辑</view>
+        </view>
+      </view>
+    </view>
+    <view class="create_box">
+      <button class="create_addr" @click="openForm()">新建收货地址</button>
+    </view>
+    <Empty v-if="!addrList.length" text="----- 还没有地址啦 -----" />
+    <view class="to_bottom" v-if="isLast && addrList.length">-----到底啦-----</view>
+    <uni-popup ref="addrForm" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
+      <view class="contact_addr_form">
+        <!-- 地区代表表单 -->
+        <form class="info_form">
+          <view class="form_group">
+            <view class="group_title">收货人：</view>
+            <view class="group_box">
+              <input type="text" class="form_ctrl" placeholder="请输入收件人" maxlength="20" required="" v-model="addrRequest.contact_name" />
+            </view>
+          </view>
+          <view class="form_group">
+            <view class="group_title">手机号：</view>
+            <view class="group_box">
+              <input type="text" class="form_ctrl" placeholder="请输入手机号" maxlength="11" required="" v-model="addrRequest.contact_phone" />
+            </view>
+          </view>
+          <view class="form_group">
+            <view class="group_title">店铺名称：</view>
+            <view class="group_box">
+              <input type="text" class="form_ctrl" placeholder="请输入店铺名称" maxlength="20" required="" v-model="addrRequest.contact_shop" />
+            </view>
+          </view>
+          <view class="form_group">
+            <view class="group_title">终端类型：</view>
+            <view class="group_box">
+              <view class="terminalType_radio">
+                <view v-for="item in terminalType" :key="item.key">
+                  <view style="display: flex; align-items: center" @click="handleRadioChange(item.key)">
+                    <image class="radio_icon" :src="item.key === addrRequest.shop_type ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
+                    &nbsp;{{ item.label }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="form_group">
+            <view class="group_title">所在地区：</view>
+            <view class="group_box">
+              <picker mode="multiSelector" class="form_ctrl" :range="cityArray" @columnchange="cityChange" @change="cityFinish">
+                <view class="area_text">
+                  <text v-if="addrRequest.contact_province">{{ addrRequest.contact_province }}</text>
+                  <text v-if="addrRequest.contact_city">/{{ addrRequest.contact_city }}</text>
+                  <text v-if="addrRequest.contact_area">/{{ addrRequest.contact_area }}</text>
+                </view>
+              </picker>
+            </view>
+          </view>
+          <view class="form_group">
+            <view class="group_title">详细地址：</view>
+            <view class="group_box">
+              <input type="text" class="form_ctrl" placeholder="请输入详细地址:街道/小区/门牌号" maxlength="64" required="" v-model="addrRequest.contact_addr" />
+            </view>
+          </view>
+          <view class="form_group">
+            <view class="group_title">设为默认</view>
+            <view class="group_box">
+              <switch color="#E03519" style="transform: scale(0.6); float: right" @change="defaultSwitch" :checked="addrRequest.is_default ? true : false" />
+            </view>
+          </view>
+          <button class="submit_btn" @click="saveAddr">保存地址</button>
+        </form>
+      </view>
+    </uni-popup>
+  </view>
 </template>
 
 <script>
-import { getProvinces, getMyCity, getAreas } from '../../utils/city';
+import { getProvinces, getMyCity, getAreas } from "../../utils/city";
+import Empty from "@/components/Empty/Empty.vue";
+
 export default {
-	data() {
-		return {
-			// 产品列表
-			addrList: [],
-			// 请求参数
-			requestParam: {
-				page: 1,
-				status: 0
-			},
-			// 保存地址
-			addrRequest: {
-				id: 0,
-				contact_name: '',
-				contact_phone: '',
-				contact_province: '',
-				contact_city: '',
-				contact_area: '',
-				contact_addr: '',
-				contact_shop: '',
-				is_default: 0,
-				shop_type: 1
-			},
-			// 是否最后一页
-			isLast: false,
-			// 是否请求中
-			isReqing: false,
-			// 所在地区
-			cityArray: [[], [], []],
-			cityValue: [0, 0, 0],
-			// 自动弹出
-			autoShowForm: false,
-			// 异步通知
-			AddrEmit: false,
-			//终端类型
-			terminalType: [
-				{ key: 1, label: '单店' },
-				{ key: 2, label: '连锁' },
-				{ key: 3, label: '第三终端' }
-			]
-		};
-	},
-	onLoad(param) {
-		this.AddrEmit = param.notify == 'addr' ? true : false;
-		this.autoShowForm = param.type == 'create' ? true : false;
-		// 获取列表
-		this.getList();
-	},
-	onReady() {
-		if (this.autoShowForm) {
-			var that = this;
-			// 500毫秒后自动弹出
-			setTimeout(function () {
-				that.openForm();
-			}, 500);
-		}
-	},
-	onShow() {
-		// 替换对应的数据
-		this.cityArray.splice(0, 1, getProvinces());
-		this.cityArray.splice(1, 1, getMyCity(this.cityValue[0]));
-		this.cityArray.splice(2, 1, getAreas(this.cityValue[0], this.cityValue[1]));
-		// 默认地址
-		this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
-		this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
-		this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
-	},
-	methods: {
-		// 获取列表
-		getList() {
-			// 登录提示
-			if (!this.$checkAccess.alterLogin()) return;
-			// 判断数据
-			this.$http.request('api/custom_addr/get_list').then((callback) => {
-				// 获取成功
-				if (callback.code == 'success') {
-					this.addrList = callback.data;
-					// 通知地址变更
-					if (this.AddrEmit) uni.$emit('addr_list_change', { list: this.addrList });
-				}
-			});
-		},
-		// 打开弹窗
-		openForm(item) {
-			if (!item) {
-				this.addrRequest.id = 0;
-				this.addrRequest.contact_name = '';
-				this.addrRequest.contact_phone = '';
-				this.addrRequest.contact_shop = '';
-				this.addrRequest.contact_addr = '';
-				this.addrRequest.is_default = 0;
-			} else {
-				this.addrRequest = item;
-			}
-			// 显示下单弹出层
-			this.$refs.addrForm.open('bottom');
-		},
-		// 默认开关
-		defaultSwitch(e) {
-			this.addrRequest.is_default = e.detail.value ? 1 : 0;
-		},
-		// 弹出层
-		popupChange(e) {
-			// 禁止滚动穿透
-			this.show = e.show;
-		},
-		// 城市修改
-		cityChange(e) {
-			// 替换三个选项
-			this.cityValue.splice(e.detail.column, 1, e.detail.value);
-			// 下一级设置为0
-			if (e.detail.column == 0) {
-				this.cityValue.splice(1, 1, 0);
-				this.cityValue.splice(2, 1, 0);
-			}
-			if (e.detail.column == 1) {
-				this.cityValue.splice(2, 1, 0);
-			}
-			// 替换对应的数据
-			this.cityArray.splice(0, 1, getProvinces());
-			this.cityArray.splice(1, 1, getMyCity(this.cityValue[0]));
-			this.cityArray.splice(2, 1, getAreas(this.cityValue[0], this.cityValue[1]));
-		},
-		// 城市选择
-		cityFinish(e) {
-			this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
-			this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
-			this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
-		},
-		// 城市选中
-		cityFinish(e) {
-			this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
-			this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
-			this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
-		},
-		// 保存地址
-		saveAddr() {
-			// 判断姓名
-			if (!this.addrRequest.contact_name) {
-				uni.showToast({ icon: 'none', title: '请填写收件人' });
-				return;
-			}
-			if (this.addrRequest.contact_name.length < 2) {
-				uni.showToast({ icon: 'none', title: '请填写收件人完整姓名' });
-				return;
-			}
-			if (!this.addrRequest.contact_shop) {
-				uni.showToast({ icon: 'none', title: '请填写店铺名称' });
-				return;
-			}
-			if (!this.addrRequest.contact_phone) {
-				uni.showToast({ icon: 'none', title: '请填写收件人手机号' });
-				return;
-			}
-			if (!this.addrRequest.contact_addr) {
-				uni.showToast({ icon: 'none', title: '请填写联系地址' });
-				return;
-			}
-			if (this.addrRequest.contact_addr.length < 3) {
-				uni.showToast({ icon: 'none', title: '请填写可用联系地址' });
-				return;
-			}
-			// 请求状态
-			uni.showLoading({ mask: true });
-			// 请求路径
-			var url = this.addrRequest.id ? 'api/custom_addr/edit' : 'api/custom_addr/add';
-			// 授权成功以后，调用绑定
-			this.$http.request(url, this.addrRequest, 'post').then((re) => {
-				// 关闭
-				uni.hideLoading();
-				// 成功的话
-				if (re.code != 'success') {
-					// 跳转
-					uni.showToast({ title: re.msg, icon: 'none' });
-					return;
-				}
-				// 地址变动
-				this.getList();
-				// 显示下单弹出层
-				this.$refs.addrForm.close();
-			});
-		},
-		// 删除地址
-		removeAddr(index) {
-			// 授权成功以后，调用绑定
-			this.$http.request('api/custom_addr/del', { id: this.addrList[index].id }, 'post').then((re) => {
-				// 关闭
-				uni.hideLoading();
-				// 成功的话
-				if (re.code != 'success') {
-					// 跳转
-					uni.showToast({ title: re.msg, icon: 'none' });
-					return;
-				}
-				// 成功删除该项
-				this.addrList.splice(index, 1);
-				// 通知地址变更
-				if (this.AddrEmit) uni.$emit('addr_list_change', { list: this.addrList });
-			});
-		},
-		// 设置默认
-		setDefault(index) {
-			// 如果已经是默认状态
-			if (this.addrList[index].is_default) return;
-			// 授权成功以后，调用绑定
-			this.$http.request('api/custom_addr/set_default', { id: this.addrList[index].id }, 'post').then((re) => {
-				// 关闭
-				uni.hideLoading();
-				// 成功的话
-				if (re.code != 'success') {
-					// 跳转
-					uni.showToast({ title: re.msg, icon: 'none' });
-					return;
-				}
-				// 更新其他的默认项
-				for (let i in this.addrList) {
-					this.addrList[i].is_default = 0;
-				}
-				// 成功修改值
-				this.addrList[index].is_default = 1;
-				// 通知地址变更
-				if (this.AddrEmit) uni.$emit('addr_list_change', { list: this.addrList });
-			});
-		},
-		handleRadioChange(key) {
-			console.log(key);
-			this.addrRequest.shop_type = Number(key);
-		}
-	}
+  components: { Empty },
+  data() {
+    return {
+      // 产品列表
+      addrList: [],
+      // 请求参数
+      requestParam: {
+        page: 1,
+        status: 0,
+      },
+      // 保存地址
+      addrRequest: {
+        id: 0,
+        contact_name: "",
+        contact_phone: "",
+        contact_province: "",
+        contact_city: "",
+        contact_area: "",
+        contact_addr: "",
+        contact_shop: "",
+        is_default: 0,
+        shop_type: 1,
+      },
+      // 是否最后一页
+      isLast: false,
+      // 是否请求中
+      isReqing: false,
+      // 所在地区
+      cityArray: [[], [], []],
+      cityValue: [0, 0, 0],
+      // 自动弹出
+      autoShowForm: false,
+      // 异步通知
+      AddrEmit: false,
+      //终端类型
+      terminalType: [
+        { key: 1, label: "单店" },
+        { key: 2, label: "连锁" },
+        { key: 3, label: "第三终端" },
+      ],
+    };
+  },
+  onLoad(param) {
+    this.AddrEmit = param.notify == "addr" ? true : false;
+    this.autoShowForm = param.type == "create" ? true : false;
+    // 获取列表
+    this.getList();
+  },
+  onReady() {
+    if (this.autoShowForm) {
+      var that = this;
+      // 500毫秒后自动弹出
+      setTimeout(function () {
+        that.openForm();
+      }, 500);
+    }
+  },
+  onShow() {
+    // 替换对应的数据
+    this.cityArray.splice(0, 1, getProvinces());
+    this.cityArray.splice(1, 1, getMyCity(this.cityValue[0]));
+    this.cityArray.splice(2, 1, getAreas(this.cityValue[0], this.cityValue[1]));
+    // 默认地址
+    this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
+    this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
+    this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
+  },
+  methods: {
+    // 获取列表
+    getList() {
+      // 登录提示
+      if (!this.$checkAccess.alterLogin()) return;
+      // 判断数据
+      this.$http.request("api/custom_addr/get_list").then((callback) => {
+        // 获取成功
+        if (callback.code == "success") {
+          this.addrList = callback.data;
+          // 通知地址变更
+          if (this.AddrEmit) uni.$emit("addr_list_change", { list: this.addrList });
+        }
+      });
+    },
+    // 打开弹窗
+    openForm(item) {
+      if (!item) {
+        this.addrRequest.id = 0;
+        this.addrRequest.contact_name = "";
+        this.addrRequest.contact_phone = "";
+        this.addrRequest.contact_shop = "";
+        this.addrRequest.contact_addr = "";
+        this.addrRequest.is_default = 0;
+      } else {
+        this.addrRequest = item;
+      }
+      // 显示下单弹出层
+      this.$refs.addrForm.open("bottom");
+    },
+    // 默认开关
+    defaultSwitch(e) {
+      this.addrRequest.is_default = e.detail.value ? 1 : 0;
+    },
+    // 弹出层
+    popupChange(e) {
+      // 禁止滚动穿透
+      this.show = e.show;
+    },
+    // 城市修改
+    cityChange(e) {
+      // 替换三个选项
+      this.cityValue.splice(e.detail.column, 1, e.detail.value);
+      // 下一级设置为0
+      if (e.detail.column == 0) {
+        this.cityValue.splice(1, 1, 0);
+        this.cityValue.splice(2, 1, 0);
+      }
+      if (e.detail.column == 1) {
+        this.cityValue.splice(2, 1, 0);
+      }
+      // 替换对应的数据
+      this.cityArray.splice(0, 1, getProvinces());
+      this.cityArray.splice(1, 1, getMyCity(this.cityValue[0]));
+      this.cityArray.splice(2, 1, getAreas(this.cityValue[0], this.cityValue[1]));
+    },
+    // 城市选择
+    cityFinish(e) {
+      this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
+      this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
+      this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
+    },
+    // 城市选中
+    cityFinish(e) {
+      this.addrRequest.contact_province = this.cityArray[0][this.cityValue[0]];
+      this.addrRequest.contact_city = this.cityArray[1][this.cityValue[1]];
+      this.addrRequest.contact_area = this.cityArray[2][this.cityValue[2]];
+    },
+    // 保存地址
+    saveAddr() {
+      // 判断姓名
+      if (!this.addrRequest.contact_name) {
+        uni.showToast({ icon: "none", title: "请填写收件人" });
+        return;
+      }
+      if (this.addrRequest.contact_name.length < 2) {
+        uni.showToast({ icon: "none", title: "请填写收件人完整姓名" });
+        return;
+      }
+      if (!this.addrRequest.contact_shop) {
+        uni.showToast({ icon: "none", title: "请填写店铺名称" });
+        return;
+      }
+      if (!this.addrRequest.contact_phone) {
+        uni.showToast({ icon: "none", title: "请填写收件人手机号" });
+        return;
+      }
+      if (!this.addrRequest.contact_addr) {
+        uni.showToast({ icon: "none", title: "请填写联系地址" });
+        return;
+      }
+      if (this.addrRequest.contact_addr.length < 3) {
+        uni.showToast({ icon: "none", title: "请填写可用联系地址" });
+        return;
+      }
+      // 请求状态
+      uni.showLoading({ mask: true });
+      // 请求路径
+      var url = this.addrRequest.id ? "api/custom_addr/edit" : "api/custom_addr/add";
+      // 授权成功以后，调用绑定
+      this.$http.request(url, this.addrRequest, "post").then((re) => {
+        // 关闭
+        uni.hideLoading();
+        // 成功的话
+        if (re.code != "success") {
+          // 跳转
+          uni.showToast({ title: re.msg, icon: "none" });
+          return;
+        }
+        // 地址变动
+        this.getList();
+        // 显示下单弹出层
+        this.$refs.addrForm.close();
+      });
+    },
+    // 删除地址
+    removeAddr(index) {
+      // 授权成功以后，调用绑定
+      this.$http.request("api/custom_addr/del", { id: this.addrList[index].id }, "post").then((re) => {
+        // 关闭
+        uni.hideLoading();
+        // 成功的话
+        if (re.code != "success") {
+          // 跳转
+          uni.showToast({ title: re.msg, icon: "none" });
+          return;
+        }
+        // 成功删除该项
+        this.addrList.splice(index, 1);
+        // 通知地址变更
+        if (this.AddrEmit) uni.$emit("addr_list_change", { list: this.addrList });
+      });
+    },
+    // 设置默认
+    setDefault(index) {
+      // 如果已经是默认状态
+      if (this.addrList[index].is_default) return;
+      // 授权成功以后，调用绑定
+      this.$http.request("api/custom_addr/set_default", { id: this.addrList[index].id }, "post").then((re) => {
+        // 关闭
+        uni.hideLoading();
+        // 成功的话
+        if (re.code != "success") {
+          // 跳转
+          uni.showToast({ title: re.msg, icon: "none" });
+          return;
+        }
+        // 更新其他的默认项
+        for (let i in this.addrList) {
+          this.addrList[i].is_default = 0;
+        }
+        // 成功修改值
+        this.addrList[index].is_default = 1;
+        // 通知地址变更
+        if (this.AddrEmit) uni.$emit("addr_list_change", { list: this.addrList });
+      });
+    },
+    handleRadioChange(key) {
+      this.addrRequest.shop_type = Number(key);
+    },
+  },
 };
 </script>
 
 <style lang="less">
 .addr_list {
-	width: 730rpx;
-	display: block;
-	overflow: hidden;
-	margin: 0rpx auto;
-	.addr_item {
-		display: block;
-		font-size: 24rpx;
-		overflow: hidden;
-		line-height: 40rpx;
-		padding: 15rpx 10rpx;
-		border-radius: 15rpx;
-		padding-bottom: 0rpx;
-		margin-bottom: 10rpx;
-		background-color: #ffffff;
-		.contact_user {
-			display: block;
-			font-size: 24rpx;
-			line-height: 50rpx;
-			.contact_name {
-				font-size: 26rpx;
-				font-weight: bold;
-				margin-right: 16rpx;
-			}
-			.contact_shop {
-				float: right;
-			}
-		}
-		.contact_addr {
-			display: block;
-			font-size: 24rpx;
-			line-height: 30rpx;
-			padding: 10rpx 5rpx;
-			border-bottom: 2rpx solid #dddddd;
-		}
-		.contact_handler {
-			height: 60rpx;
-			display: block;
-			line-height: 60rpx;
-			font-size: 20rpx;
-			.radio_label {
-				float: left;
-				height: 60rpx;
-				line-height: 60rpx;
-				.radio_icon {
-					width: 40rpx;
-					height: 40rpx;
-					vertical-align: middle;
-				}
-				.radioed_text {
-					color: #e03519;
-				}
-			}
-			.addr_right_btn {
-				float: right;
-				height: 40rpx;
-				display: block;
-				line-height: 40rpx;
-				padding: 10rpx 35rpx;
-			}
-		}
-	}
+  width: 730rpx;
+  display: block;
+  overflow: hidden;
+  margin: 0rpx auto;
+  .addr_item {
+    display: block;
+    font-size: 24rpx;
+    overflow: hidden;
+    line-height: 40rpx;
+    padding: 15rpx 10rpx;
+    border-radius: 15rpx;
+    padding-bottom: 0rpx;
+    margin-bottom: 10rpx;
+    background-color: #ffffff;
+    .contact_user {
+      display: block;
+      font-size: 24rpx;
+      line-height: 50rpx;
+      .contact_name {
+        font-size: 26rpx;
+        font-weight: bold;
+        margin-right: 16rpx;
+      }
+      .contact_shop {
+        float: right;
+      }
+    }
+    .contact_addr {
+      display: block;
+      font-size: 24rpx;
+      line-height: 30rpx;
+      padding: 10rpx 5rpx;
+      border-bottom: 2rpx solid #dddddd;
+    }
+    .contact_handler {
+      height: 60rpx;
+      display: block;
+      line-height: 60rpx;
+      font-size: 20rpx;
+      .radio_label {
+        float: left;
+        height: 60rpx;
+        line-height: 60rpx;
+        .radio_icon {
+          width: 40rpx;
+          height: 40rpx;
+          vertical-align: middle;
+        }
+        .radioed_text {
+          color: #e03519;
+        }
+      }
+      .addr_right_btn {
+        float: right;
+        height: 40rpx;
+        display: block;
+        line-height: 40rpx;
+        padding: 10rpx 35rpx;
+      }
+    }
+  }
 }
 .create_box {
-	left: 0rpx;
-	width: 750rpx;
-	height: 140rpx;
-	display: block;
-	position: fixed;
-	bottom: var(--window-bottom);
-	.create_addr {
-		width: 700rpx;
-		height: 80rpx;
-		display: block;
-		color: #ffffff;
-		font-size: 30rpx;
-		overflow: hidden;
-		line-height: 80rpx;
-		padding: 0rpx 0rpx;
-		text-align: center;
-		margin: 0rpx auto;
-		margin-top: 20rpx;
-		border-radius: 40rpx;
-		background-color: #e03519;
-	}
+  left: 0rpx;
+  width: 750rpx;
+  height: 140rpx;
+  display: block;
+  position: fixed;
+  bottom: var(--window-bottom);
+  .create_addr {
+    width: 700rpx;
+    height: 80rpx;
+    display: block;
+    color: #ffffff;
+    font-size: 30rpx;
+    overflow: hidden;
+    line-height: 80rpx;
+    padding: 0rpx 0rpx;
+    text-align: center;
+    margin: 0rpx auto;
+    margin-top: 20rpx;
+    border-radius: 40rpx;
+    background-color: #e03519;
+  }
 }
 .popup {
-	.info_form {
-		display: block;
-		overflow: hidden;
-		padding: 20rpx 0rpx;
-		padding-top: 80rpx;
-		background: #ffffff;
-		.form_group {
-			display: block;
-			overflow: hidden;
-			line-height: 60rpx;
-			padding: 20rpx 35rpx;
-			.group_title {
-				float: left;
-				width: 160rpx;
-				display: block;
-				overflow: hidden;
-				font-size: 30rpx;
-				margin-right: 20rpx;
-			}
-			.group_box {
-				float: left;
-				width: 480rpx;
-				display: block;
-				.radio_icon {
-					width: 50rpx;
-					height: 50rpx;
-					vertical-align: middle;
-				}
-				.form_ctrl {
-					height: 56rpx;
-					font-size: 24rpx;
-					padding: 0rpx 20rpx;
-					line-height: 56rpx;
-					border: 2rpx solid #dddddd;
-				}
-				.area_text {
-					width: 446rpx;
-					font-size: 20rpx;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-				.group_image {
-					width: 200rpx;
-					height: 200rpx;
-				}
-				.choose_image {
-					display: block;
-					width: 200rpx;
-					height: 200rpx;
-					font-size: 38rpx;
-					text-align: center;
-					line-height: 200rpx;
-					border: 2rpx solid #dddddd;
-				}
-				.terminalType_radio {
-					display: flex;
-					justify-content: space-around;
-				}
-			}
-		}
-		.submit_btn {
-			width: 700rpx;
-			height: 80rpx;
-			display: block;
-			color: #ffffff;
-			font-size: 30rpx;
-			overflow: hidden;
-			line-height: 80rpx;
-			padding: 0rpx 0rpx;
-			text-align: center;
-			margin: 20rpx auto;
-			margin-top: 40rpx;
-			border-radius: 40rpx;
-			background-color: #e03519;
-		}
-	}
+  .info_form {
+    display: block;
+    overflow: hidden;
+    padding: 20rpx 0rpx;
+    padding-top: 80rpx;
+    background: #ffffff;
+    .form_group {
+      display: block;
+      overflow: hidden;
+      line-height: 60rpx;
+      padding: 20rpx 35rpx;
+      .group_title {
+        float: left;
+        width: 160rpx;
+        display: block;
+        overflow: hidden;
+        font-size: 30rpx;
+        margin-right: 20rpx;
+      }
+      .group_box {
+        float: left;
+        width: 480rpx;
+        display: block;
+        .radio_icon {
+          width: 50rpx;
+          height: 50rpx;
+          vertical-align: middle;
+        }
+        .form_ctrl {
+          height: 56rpx;
+          font-size: 24rpx;
+          padding: 0rpx 20rpx;
+          line-height: 56rpx;
+          border: 2rpx solid #dddddd;
+        }
+        .area_text {
+          width: 446rpx;
+          font-size: 20rpx;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .group_image {
+          width: 200rpx;
+          height: 200rpx;
+        }
+        .choose_image {
+          display: block;
+          width: 200rpx;
+          height: 200rpx;
+          font-size: 38rpx;
+          text-align: center;
+          line-height: 200rpx;
+          border: 2rpx solid #dddddd;
+        }
+        .terminalType_radio {
+          display: flex;
+          justify-content: space-around;
+        }
+      }
+    }
+    .submit_btn {
+      width: 700rpx;
+      height: 80rpx;
+      display: block;
+      color: #ffffff;
+      font-size: 30rpx;
+      overflow: hidden;
+      line-height: 80rpx;
+      padding: 0rpx 0rpx;
+      text-align: center;
+      margin: 20rpx auto;
+      margin-top: 40rpx;
+      border-radius: 40rpx;
+      background-color: #e03519;
+    }
+  }
 }
 </style>

pages/coupon/index.vue

@@ -1,296 +1,304 @@
 <template>
-	<view>
-		<!-- <view class="coupon_status_list">
+  <view>
+    <!-- <view class="coupon_status_list">
 			<view class="coupon_status_item" :class="requestParam.status==0?'active':''" @click="setStatus(0)"> 全部 </view>
 			<view class="coupon_status_item" :class="requestParam.status==1?'active':''" @click="setStatus(1)"> 待发货 </view>
 			<view class="coupon_status_item" :class="requestParam.status==2?'active':''" @click="setStatus(2)"> 已发货 </view>
 		</view> -->
-		<view class="to_bottom" v-if="!couponList.length"> -----还没有优惠券啦-----</view>
-		<view class="coupon_list">
-			<view class="coupon_item" v-for="(item,index) in couponList" :key="index" @click="toUse(item)">
-				<view class="box_left">
-					<view class="rebate" v-if="item.rebate_type == 1" > ￥{{item.rebate}}</view>
-					<view class="rebate" v-if="item.rebate_type == 2" > 打 {{item.rebate}} 折</view>
-					<view class="rebate" v-if="item.rebate_type == 3" > 赠 <text v-if="item.rebate_scope.length">
-							{{item.rebate_scope[0].product_name}}
-						</text> </view>
-					<view class="std_pay"> 满{{item.std_pay}}</view>
-				</view>
-				<view class="box_right">
-					<view class="coupon_title">
-						<view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
-						<view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
-						<view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
-						
-						<view class="coupon_status" v-if="item.status == 0">未使用</view>
-						<view class="coupon_status" v-if="item.status == 1">已使用</view>
-						<view class="coupon_status" v-if="item.status == 2">已暂停</view>
-						<view class="coupon_status" v-if="item.status == 3">已过期</view>
-						<view class="coupon_status" v-if="item.status == 4">已作废</view>
-					</view>
-					<view class="coupon_box">
-						<view class="product_scope">
-							<text class="" v-if="item.type_id == 1">限定商品可用</text>
-							<text class="" v-if="item.type_id == 2">全场可用</text>
-							<text class="" v-if="item.type_id == 3">部分商品不可用</text>
-						</view>
-						<view class="coupon_info">
-							<view class="coupon_exp">{{item.exp_time}} 到期</view>
-						</view>
-					</view>
-					<view class="to_use" v-if="item.status == 0">
-						<view class="use_btn" >去使用</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="to_bottom" v-if="isLast"> -----到底啦-----</view>
-	</view>
+    <!-- <view class="to_bottom" v-if="!couponList.length"> </view> -->
+    <view class="coupon_list" v-if="couponList.length">
+      <view class="coupon_item" v-for="(item, index) in couponList" :key="index" @click="toUse(item)">
+        <view class="box_left">
+          <view class="rebate" v-if="item.rebate_type == 1"> ￥{{ item.rebate }}</view>
+          <view class="rebate" v-if="item.rebate_type == 2"> 打 {{ item.rebate }} 折</view>
+          <view class="rebate" v-if="item.rebate_type == 3">
+            赠
+            <text v-if="item.rebate_scope.length">
+              {{ item.rebate_scope[0].product_name }}
+            </text>
+          </view>
+          <view class="std_pay"> 满{{ item.std_pay }}</view>
+        </view>
+        <view class="box_right">
+          <view class="coupon_title">
+            <view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
+            <view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
+            <view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
+
+            <view class="coupon_status" v-if="item.status == 0">未使用</view>
+            <view class="coupon_status" v-if="item.status == 1">已使用</view>
+            <view class="coupon_status" v-if="item.status == 2">已暂停</view>
+            <view class="coupon_status" v-if="item.status == 3">已过期</view>
+            <view class="coupon_status" v-if="item.status == 4">已作废</view>
+          </view>
+          <view class="coupon_box">
+            <view class="product_scope">
+              <text class="" v-if="item.type_id == 1">限定商品可用</text>
+              <text class="" v-if="item.type_id == 2">全场可用</text>
+              <text class="" v-if="item.type_id == 3">部分商品不可用</text>
+            </view>
+            <view class="coupon_info">
+              <view class="coupon_exp">{{ item.exp_time }} 到期</view>
+            </view>
+          </view>
+          <view class="to_use" v-if="item.status == 0">
+            <view class="use_btn">去使用</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <Empty v-if="!couponList.length" text="----- 还没有优惠券啦 -----" />
+    <view class="to_bottom" v-if="isLast && couponList.length"> -----到底啦-----</view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				// 产品列表
-				couponList:[],
-				// 请求参数
-				requestParam:{
-					page:1,
-					status:0,
-				},
-				// 是否最后一页
-				isLast:false,
-				// 是否请求中
-				isReqing:false,
-			};
-		},
-		onLoad() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 初始化页码为1
-			this.requestParam.page	= 1;
-			// 是否是最后一页
-			this.isLast			 	= false;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/custom_coupon/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.couponList = re.data.data;
-				}
-			});
-		},
-		onShow() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 没有数据的话，或者请求中，不允许刷新
-			if( this.couponList.length > 0 || this.isReqing ) return ;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/custom_coupon/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.couponList = re.data.data;
-				}
-			});
-		},
-		onPullDownRefresh() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 如果请求中，不允许请求，
-			if( this.isReqing )		return false;
-			// 初始化页码为1
-			this.requestParam.page	= 1;
-			// 是否是最后一页
-			this.isLast			 	= false;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/custom_coupon/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.couponList = re.data.data;
-				}
-			});
-			uni.stopPullDownRefresh();
-		},
-		onReachBottom() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 如果页码是0，避免第一页重复
-			if( this.requestParam.page < 1 ) return;
-			// 最后一页不请求
-			if( this.isLast ) 		return;
-			// 设置请求中
-			this.isReqing			= true;
-			// 增加一页
-			this.requestParam.page	= this.requestParam.page+1;
-			// 请求列表
-			this.$http.request('api/custom_coupon/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					// 追加数据
-					this.couponList.push(...re.data.data);
-				}
-			});
-		},
-		methods:{
-			toUse(item){
-				// 没有范围
-				if( item.type_id == 2 ){
-					uni.switchTab({url:"/pages/index/index"});
-					return;
-				}
-				// 只有一个商品，直接跳转到对应商品
-				if( item.product_scope.length == 1 ){
-					uni.navigateTo({
-						url:"/pages/product/index?product_id="+item.product_scope[0]
-					})
-					return;
-				}
-				// 没有范围
-				if( item.product_scope.length > 1 ){
-					uni.navigateTo({
-						url:"/pages/coupon/product?coupon_id="+item.coupon_id
-					});
-					return;
-				}
-			}
-		}
-	}
+import Empty from "@/components/Empty/Empty.vue";
+export default {
+  components: {
+    Empty,
+  },
+  data() {
+    return {
+      // 产品列表
+      couponList: [],
+      // 请求参数
+      requestParam: {
+        page: 1,
+        status: 0,
+      },
+      // 是否最后一页
+      isLast: false,
+      // 是否请求中
+      isReqing: false,
+    };
+  },
+  onLoad() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 初始化页码为1
+    this.requestParam.page = 1;
+    // 是否是最后一页
+    this.isLast = false;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/custom_coupon/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.couponList = re.data.data;
+      }
+    });
+  },
+  onShow() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 没有数据的话，或者请求中，不允许刷新
+    if (this.couponList.length > 0 || this.isReqing) return;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/custom_coupon/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.couponList = re.data.data;
+      }
+    });
+  },
+  onPullDownRefresh() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 如果请求中，不允许请求，
+    if (this.isReqing) return false;
+    // 初始化页码为1
+    this.requestParam.page = 1;
+    // 是否是最后一页
+    this.isLast = false;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/custom_coupon/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.couponList = re.data.data;
+      }
+    });
+    uni.stopPullDownRefresh();
+  },
+  onReachBottom() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 如果页码是0，避免第一页重复
+    if (this.requestParam.page < 1) return;
+    // 最后一页不请求
+    if (this.isLast) return;
+    // 设置请求中
+    this.isReqing = true;
+    // 增加一页
+    this.requestParam.page = this.requestParam.page + 1;
+    // 请求列表
+    this.$http.request("api/custom_coupon/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        // 追加数据
+        this.couponList.push(...re.data.data);
+      }
+    });
+  },
+  methods: {
+    toUse(item) {
+      // 没有范围
+      if (item.type_id == 2) {
+        uni.switchTab({ url: "/pages/index/index" });
+        return;
+      }
+      // 只有一个商品，直接跳转到对应商品
+      if (item.product_scope.length == 1) {
+        uni.navigateTo({
+          url: "/pages/product/index?product_id=" + item.product_scope[0],
+        });
+        return;
+      }
+      // 没有范围
+      if (item.product_scope.length > 1) {
+        uni.navigateTo({
+          url: "/pages/coupon/product?coupon_id=" + item.coupon_id,
+        });
+        return;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.coupon_status_list{
-		display: block;
-		height: 60rpx;
-		color: #666666;
-		line-height: 60rpx;
-		background: #FFFFFF;
-		padding: 10rpx 35rpx;
-		.coupon_status_item{
-			float: left;
-			font-size: 28rpx;
-			padding: 0rpx 20rpx;
-		}
-		.coupon_status_item.active{
-			color: #000000;
-			font-weight: bold;
-		}
-	}
-	.coupon_list{
-		display: block;
-		overflow: hidden;
-		margin: 10rpx auto;
-		.coupon_item{
-			height: 200rpx;
-			display: block;
-			background: #FFFFFF;
-			margin: 10rpx auto;
-			.box_left{
-				float: left;
-				width: 160rpx;
-				height: 160rpx;
-				font-size: 20rpx;
-				text-align: center;
-				margin-left: 35rpx;
-				line-height: 60rpx;
-				margin-top: 20rpx;
-				background: pink;
-				.rebate{
-					width: 120rpx;
-					height: 60rpx;
-					margin: 0rpx auto;
-					line-height: 60rpx;
-					margin-top: 20rpx;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-			}
-			.box_right{
-				float: left;
-				width: 485rpx;
-				margin-left: 35rpx;
-				padding-top: 20rpx;
-				overflow: hidden;
-				.coupon_title{
-					width: 485rpx;
-					max-height: 80rpx;
-					font-size: 30rpx;
-					overflow: hidden;
-					line-height: 40rpx;
-					padding: 0rpx 0rpx;
-					.coupon_name{
-						float: left;
-						height: 40rpx;
-						width: 380rpx;
-					}
-					.coupon_status{
-						width: 100rpx;
-						float: right;
-						color: #999999;
-						font-size: 24rpx;
-						text-align: center;
-					}
-				}
-				.coupon_box{
-					float: left;
-					width: 365rpx;
-					overflow: hidden;
-					.product_scope{
-						width: 365rpx;
-						height: 80rpx;
-						color: #999999;
-						font-size: 24rpx;
-						overflow: hidden;
-						line-height: 80rpx;
-					}
-					.coupon_info{
-						width: 365rpx;
-						max-height: 80rpx;
-						font-size: 30rpx;
-						overflow: hidden;
-						line-height: 40rpx;
-						padding: 0rpx 0rpx;
-						.coupon_exp{
-							float: left;
-							font-size: 20rpx;
-						}
-					}
-				}
-				.to_use{
-					float: right;
-					width: 100rpx;
-					margin-top: 75rpx;
-					overflow: hidden;
-					.use_btn{
-						color: #FFFFFF;
-						width: 100rpx;
-						height: 40rpx;
-						font-size: 24rpx;
-						line-height: 40rpx;
-						text-align: center;
-						border-radius: 20rpx;
-						background-color: #F59A23;
-					}
-				}
-			}
-		}
-	}
+.coupon_status_list {
+  display: block;
+  height: 60rpx;
+  color: #666666;
+  line-height: 60rpx;
+  background: #ffffff;
+  padding: 10rpx 35rpx;
+  .coupon_status_item {
+    float: left;
+    font-size: 28rpx;
+    padding: 0rpx 20rpx;
+  }
+  .coupon_status_item.active {
+    color: #000000;
+    font-weight: bold;
+  }
+}
+.coupon_list {
+  display: block;
+  overflow: hidden;
+  margin: 10rpx auto;
+  .coupon_item {
+    height: 200rpx;
+    display: block;
+    background: #ffffff;
+    margin: 10rpx auto;
+    .box_left {
+      float: left;
+      width: 160rpx;
+      height: 160rpx;
+      font-size: 20rpx;
+      text-align: center;
+      margin-left: 35rpx;
+      line-height: 60rpx;
+      margin-top: 20rpx;
+      background: pink;
+      .rebate {
+        width: 120rpx;
+        height: 60rpx;
+        margin: 0rpx auto;
+        line-height: 60rpx;
+        margin-top: 20rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+    .box_right {
+      float: left;
+      width: 485rpx;
+      margin-left: 35rpx;
+      padding-top: 20rpx;
+      overflow: hidden;
+      .coupon_title {
+        width: 485rpx;
+        max-height: 80rpx;
+        font-size: 30rpx;
+        overflow: hidden;
+        line-height: 40rpx;
+        padding: 0rpx 0rpx;
+        .coupon_name {
+          float: left;
+          height: 40rpx;
+          width: 380rpx;
+        }
+        .coupon_status {
+          width: 100rpx;
+          float: right;
+          color: #999999;
+          font-size: 24rpx;
+          text-align: center;
+        }
+      }
+      .coupon_box {
+        float: left;
+        width: 365rpx;
+        overflow: hidden;
+        .product_scope {
+          width: 365rpx;
+          height: 80rpx;
+          color: #999999;
+          font-size: 24rpx;
+          overflow: hidden;
+          line-height: 80rpx;
+        }
+        .coupon_info {
+          width: 365rpx;
+          max-height: 80rpx;
+          font-size: 30rpx;
+          overflow: hidden;
+          line-height: 40rpx;
+          padding: 0rpx 0rpx;
+          .coupon_exp {
+            float: left;
+            font-size: 20rpx;
+          }
+        }
+      }
+      .to_use {
+        float: right;
+        width: 100rpx;
+        margin-top: 75rpx;
+        overflow: hidden;
+        .use_btn {
+          color: #ffffff;
+          width: 100rpx;
+          height: 40rpx;
+          font-size: 24rpx;
+          line-height: 40rpx;
+          text-align: center;
+          border-radius: 20rpx;
+          background-color: #f59a23;
+        }
+      }
+    }
+  }
+}
 </style>

pages/orders/index.vue

@@ -1,373 +1,372 @@
 <template>
-	<view>
-		<view class="order_status_list">
-			<view class="order_status_item" :class="requestParam.status==0?'active':''" @click="setStatus(0)"> 全部 </view>
-			<view class="order_status_item" :class="requestParam.status==1?'active':''" @click="setStatus(1)"> 待跟进 </view>
-			<view class="order_status_item" :class="requestParam.status==4?'active':''" @click="setStatus(4)"> 已取消 </view>
-			<view class="order_status_item" :class="requestParam.status==8?'active':''" @click="setStatus(8)"> 已完成 </view>
-		</view>
-		<view class="to_bottom" v-if="!orderList.length"> -----还没有订单-----</view>
-		<view class="order_list">
-			<view class="order_item" v-for="(item,index) in orderList" :key="index" >
-				<view class="order_title">
-					<view class="business_name">{{item.business_name}}</view>
-					<view class="order_status">{{item.state}}</view>
-				</view>
-				<view  class="product_list" :class="item.contents_class?'active':''">
-					<view class="product_item" v-for="(product_info,k) in item.product_list" :key="k" >
-						<image class="product_img" :src="product_info.product_thumb" mode="" @click="navToProduct(product_info.product_id)"></image>
-						<view class="product_info">
-							<view @click="navToProduct(product_info.product_id)" class="product_name">
-							  <text v-if="product_info.is_rebate">【赠】</text>	{{product_info.product_name}}
-							</view>
-							<view  @click="navToProduct(product_info.product_id)" class="product_spec">
-								{{product_info.product_spec}}
-							</view>
-						</view>
-						<view class="buy_num">
-							x{{product_info.buy_num}}
-						</view>
-					</view>
-				</view>
-				<view class="show_more" v-if="item.product_list.length > 1" @click.stop="changeHeight(index)">
-					<uni-icons :type="item.contents_class?'up':'down'" ></uni-icons>
-				</view>
-				<view class="order_price">
-					<view class="pay_total">￥{{item.pay_total}}</view>
-				</view>
-				<view class="order_btn"v-if="item.status == 1">
-					<button class="order_cancel" @click="cancelOrder(index)">取消订单</button>
-					<button class="order_share" @click="toReceipt(item)">我已收货</button>
-				</view>
-        <view class="order_btn"v-if="item.status == 10">
+  <view>
+    <view class="order_status_list">
+      <view class="order_status_item" :class="requestParam.status == 0 ? 'active' : ''" @click="setStatus(0)"> 全部 </view>
+      <view class="order_status_item" :class="requestParam.status == 1 ? 'active' : ''" @click="setStatus(1)"> 待跟进 </view>
+      <view class="order_status_item" :class="requestParam.status == 4 ? 'active' : ''" @click="setStatus(4)"> 已取消 </view>
+      <view class="order_status_item" :class="requestParam.status == 8 ? 'active' : ''" @click="setStatus(8)"> 已完成 </view>
+    </view>
+    <view class="order_list" v-if="orderList.length">
+      <view class="order_item" v-for="(item, index) in orderList" :key="index">
+        <view class="order_title">
+          <view class="business_name">{{ item.business_name }}</view>
+          <view class="order_status">{{ item.state }}</view>
+        </view>
+        <view class="product_list" :class="item.contents_class ? 'active' : ''">
+          <view class="product_item" v-for="(product_info, k) in item.product_list" :key="k">
+            <image class="product_img" :src="product_info.product_thumb" mode="" @click="navToProduct(product_info.product_id)"></image>
+            <view class="product_info">
+              <view @click="navToProduct(product_info.product_id)" class="product_name"> <text v-if="product_info.is_rebate">【赠】</text> {{ product_info.product_name }} </view>
+              <view @click="navToProduct(product_info.product_id)" class="product_spec">
+                {{ product_info.product_spec }}
+              </view>
+            </view>
+            <view class="buy_num"> x{{ product_info.buy_num }} </view>
+          </view>
+        </view>
+        <view class="show_more" v-if="item.product_list.length > 1" @click.stop="changeHeight(index)">
+          <uni-icons :type="item.contents_class ? 'up' : 'down'"></uni-icons>
+        </view>
+        <view class="order_price">
+          <view class="pay_total">￥{{ item.pay_total }}</view>
+        </view>
+        <view class="order_btn" v-if="item.status == 1">
+          <button class="order_cancel" @click="cancelOrder(index)">取消订单</button>
+          <button class="order_share" @click="toReceipt(item)">我已收货</button>
+        </view>
+        <view class="order_btn" v-if="item.status == 10">
           <button class="order_cancel" @click="cancelOrderRegiment(index)">取消拼团</button>
         </view>
-			</view>
-		</view>
-		<view class="to_bottom" v-if="isLast"> -----到底啦-----</view>
-	</view>
+      </view>
+    </view>
+    <Empty text="----- 还没有订单 -----" v-if="!orderList.length" />
+    <view class="to_bottom" v-if="isLast && orderList.length"> -----到底啦-----</view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				// 产品列表
-				orderList:[],
-				// 请求参数
-				requestParam:{
-					page:1,
-					status:0,
-				},
-				// 是否最后一页
-				isLast:false,
-				// 是否请求中
-				isReqing:false,
-			};
-		},
-		onLoad() {
-			
-		},
-		onShow() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 没有数据的话，或者请求中，不允许刷新
-			if( this.isReqing )		return ;
-			// 初始化页码为1
-			this.requestParam.page	= 1;
-			// 是否是最后一页
-			this.isLast			 	= false;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/orders/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.orderList = re.data.data;
-				}
-			});
-		},
-		onPullDownRefresh() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 如果请求中，不允许请求，
-			if( this.isReqing )		return false;
-			// 初始化页码为1
-			this.requestParam.page	= 1;
-			// 是否是最后一页
-			this.isLast			 	= false;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/orders/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.orderList = re.data.data;
-				}
-			});
-			uni.stopPullDownRefresh();
-		},
-		onReachBottom() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 如果页码是0，避免第一页重复
-			if( this.requestParam.page < 1 ) return;
-			// 最后一页不请求
-			if( this.isLast )		return;
-			// 请求中，不再请求
-			if( this.isReqing )		return;
-			// 增加一页
-			this.requestParam.page	= this.requestParam.page+1;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/orders/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					// 追加数据
-					this.orderList.push(... re.data.data);
-				}
-			});
-		},
-		methods:{
-			setStatus(status){
-				// 登录提示
-				if( !this.$checkAccess.alterLogin() )  return ;
-				// 请求中，不再请求
-				if( this.isReqing ) 		return;
-				// 初始化页码为1
-				this.requestParam.page		= 1;
-				// 是否是最后一页
-				this.isLast			 		= false;
-				// 状态变更
-				this.requestParam.status	= status;
-				// 设置请求中
-				this.isReqing				= true;
-				// 请求列表
-				this.$http.request('api/orders/get_list',this.requestParam).then((re)=>{
-					// 设置非请求中
-					this.isReqing			= false;
-					// 成功结果
-					if( re.code == 'success' ){
-						if(re.data.last_page >= this.requestParam.page ) this.isLast = true;
-						this.orderList = re.data.data;
-					}
-				});
-			},
-			changeHeight(index){
-				this.orderList[index].contents_class  = this.orderList[index].contents_class ? 0:1;
-			},
-			// 取消订单
-			cancelOrder(index){
-				uni.showModal({
-					title:"确认取消该订单?",
-					success:res=>{
-						if (res.confirm) {
-							// 请求列表
-							this.$http.request('api/orders/cancel',{id:this.orderList[index].id}).then(re=>{
-								this.orderList[index].state  = '已取消';
-								this.orderList[index].status = 4;
-							});
-						}
-					}
-				})
-			},
-      // 取消拼团
-      cancelOrderRegiment(index){
-        uni.showModal({
-          title:"确认取消该订单?",
-          success:res=>{
-            if (res.confirm) {
-              // 请求列表
-              this.$http.request('api/orders/cancel_regiment',{id:this.orderList[index].id}).then(re=>{
-                this.orderList[index].state  = '已取消';
-                this.orderList[index].status = 4;
-              });
-            }
-          }
-        })
+import Empty from "@/components/Empty/Empty.vue";
+
+export default {
+  components: {
+    Empty,
+  },
+  data() {
+    return {
+      // 产品列表
+      orderList: [],
+      // 请求参数
+      requestParam: {
+        page: 1,
+        status: 0,
       },
-			navToProduct(id){
-				if( id ){
-					uni.navigateTo({
-						url:"/pages/product/index?product_id="+id
-					})
-				}
-			},
-			toReceipt(item){
-				uni.navigateTo({
-					url:"/pages/orders/receipt?order_id="+item.id
-				})
-			}
-		}
-	}
+      // 是否最后一页
+      isLast: false,
+      // 是否请求中
+      isReqing: false,
+    };
+  },
+  onLoad() {},
+  onShow() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 没有数据的话，或者请求中，不允许刷新
+    if (this.isReqing) return;
+    // 初始化页码为1
+    this.requestParam.page = 1;
+    // 是否是最后一页
+    this.isLast = false;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/orders/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.orderList = re.data.data;
+      }
+    });
+  },
+  onPullDownRefresh() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 如果请求中，不允许请求，
+    if (this.isReqing) return false;
+    // 初始化页码为1
+    this.requestParam.page = 1;
+    // 是否是最后一页
+    this.isLast = false;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/orders/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.orderList = re.data.data;
+      }
+    });
+    uni.stopPullDownRefresh();
+  },
+  onReachBottom() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 如果页码是0，避免第一页重复
+    if (this.requestParam.page < 1) return;
+    // 最后一页不请求
+    if (this.isLast) return;
+    // 请求中，不再请求
+    if (this.isReqing) return;
+    // 增加一页
+    this.requestParam.page = this.requestParam.page + 1;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/orders/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        // 追加数据
+        this.orderList.push(...re.data.data);
+      }
+    });
+  },
+  methods: {
+    setStatus(status) {
+      // 登录提示
+      if (!this.$checkAccess.alterLogin()) return;
+      // 请求中，不再请求
+      if (this.isReqing) return;
+      // 初始化页码为1
+      this.requestParam.page = 1;
+      // 是否是最后一页
+      this.isLast = false;
+      // 状态变更
+      this.requestParam.status = status;
+      // 设置请求中
+      this.isReqing = true;
+      // 请求列表
+      this.$http.request("api/orders/get_list", this.requestParam).then((re) => {
+        // 设置非请求中
+        this.isReqing = false;
+        // 成功结果
+        if (re.code == "success") {
+          if (re.data.last_page >= this.requestParam.page) this.isLast = true;
+          this.orderList = re.data.data;
+        }
+      });
+    },
+    changeHeight(index) {
+      this.orderList[index].contents_class = this.orderList[index].contents_class ? 0 : 1;
+    },
+    // 取消订单
+    cancelOrder(index) {
+      uni.showModal({
+        title: "确认取消该订单?",
+        success: (res) => {
+          if (res.confirm) {
+            // 请求列表
+            this.$http.request("api/orders/cancel", { id: this.orderList[index].id }).then((re) => {
+              this.orderList[index].state = "已取消";
+              this.orderList[index].status = 4;
+            });
+          }
+        },
+      });
+    },
+    // 取消拼团
+    cancelOrderRegiment(index) {
+      uni.showModal({
+        title: "确认取消该订单?",
+        success: (res) => {
+          if (res.confirm) {
+            // 请求列表
+            this.$http.request("api/orders/cancel_regiment", { id: this.orderList[index].id }).then((re) => {
+              this.orderList[index].state = "已取消";
+              this.orderList[index].status = 4;
+            });
+          }
+        },
+      });
+    },
+    navToProduct(id) {
+      if (id) {
+        uni.navigateTo({
+          url: "/pages/product/index?product_id=" + id,
+        });
+      }
+    },
+    toReceipt(item) {
+      uni.navigateTo({
+        url: "/pages/orders/receipt?order_id=" + item.id,
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.order_status_list{
-		display: block;
-		height: 60rpx;
-		color: #666666;
-		line-height: 60rpx;
-		background: #FFFFFF;
-		padding: 10rpx 35rpx;
-		.order_status_item{
-			float: left;
-			font-size: 28rpx;
-			padding: 0rpx 20rpx;
-		}
-		.order_status_item.active{
-			color: #000000;
-			font-weight: bold;
-		}
-	}
-	.order_list{
-		display:block;
-		overflow: hidden;
-		margin: 0rpx auto;
-		.order_item{
-			display: block;
-			background: #FFFFFF;
-			margin: 0rpx auto;
-			padding: 0rpx 35rpx;
-			margin-bottom: 10rpx;
-			.order_title{
-				width: 100%;
-				height: 60rpx;
-				display: block;
-				overflow: hidden;
-				line-height: 60rpx;
-				.business_name{
-					float: left;
-					font-size: 32rpx;
-				}
-				.order_status{
-					float: right;
-					color: #999999;
-					font-size: 24rpx;
-				}
-			}
-			.product_list{
-				display: block;
-			    height: 100rpx;
-				overflow: hidden;
-				margin: 15rpx auto;
-				.product_item{
-					display: block;
-					height: 100rpx;
-					overflow: hidden;
-					.product_img{
-						float: left;
-						width: 80rpx;
-						height: 80rpx;
-						display: block;
-						margin-top: 10rpx;
-						margin-right: 30rpx;
-					}
-					.product_info{
-						float: left;
-						width: 480rpx;
-						height: 100rpx;
-						display: block;
-						overflow: hidden;
-						.product_name{
-							display: block;
-							height: 60rpx;
-							display: block;
-							font-size: 28rpx;
-							line-height: 60rpx;
-							overflow: hidden;
-						}
-						.product_spec{
-							color: #999999;
-							height: 40rpx;
-							display: block;
-							font-size: 24rpx;
-							line-height: 40rpx;
-							overflow: hidden;
-						}
-					}
-					.buy_num{
-						float: right;
-						height: 100rpx;
-						color: #999999;
-						font-size: 26rpx;
-						text-align: right;
-						position: relative;
-						line-height: 100rpx;
-					}
-				}
-			}
-			.product_list.active{
-				height: auto !important;
-			}
-			.order_price{
-				display: block;
-				height: 60rpx;
-				overflow: hidden;
-				line-height: 60rpx;
-				.pay_total{
-					float: right;
-					height: 60rpx;
-					color: #E03519;
-					font-size: 28rpx;
-					line-height: 60rpx;
-				}
-			}
-			.show_more{
-				width: 100%;
-				height: 30rpx;
-				display: block;
-				font-size: 20rpx !important;
-				margin-top: -30rpx;
-				text-align: center;
-				position: relative;
-				background-color: rgba(0, 0, 0, 0.05);
-			}
-			.order_btn{
-				display: block;
-				height: 60rpx;
-				overflow: hidden;
-				.order_cancel{
-					float: left;
-					height: 50rpx;
-					color: #999999;
-					font-size: 24rpx;
-					padding: 0rpx 10rpx;
-					line-height: 50rpx;
-					margin-left: 10rpx;
-					border-radius: 25rpx;
-					border: 2rpx solid #999999;
-					background-color: transparent;
-				}
-				.order_cancel::after{
-					border: none;
-				}
-				.order_share{
-					float: right;
-					height: 50rpx;
-					color: #E03519;
-					font-size: 24rpx;
-					padding: 0rpx 10rpx;
-					line-height: 50rpx;
-					margin-left: 10rpx;
-					border-radius: 25rpx;
-					border: 2rpx solid #E03519;
-					background-color: transparent;
-				}
-				.order_share::after{
-					border: none;
-				}
-			}
-		}
-	}
+.order_status_list {
+  display: block;
+  height: 60rpx;
+  color: #666666;
+  line-height: 60rpx;
+  background: #ffffff;
+  padding: 10rpx 35rpx;
+  .order_status_item {
+    float: left;
+    font-size: 28rpx;
+    padding: 0rpx 20rpx;
+  }
+  .order_status_item.active {
+    color: #000000;
+    font-weight: bold;
+  }
+}
+.order_list {
+  display: block;
+  overflow: hidden;
+  margin: 0rpx auto;
+  .order_item {
+    display: block;
+    background: #ffffff;
+    margin: 0rpx auto;
+    padding: 0rpx 35rpx;
+    margin-bottom: 10rpx;
+    .order_title {
+      width: 100%;
+      height: 60rpx;
+      display: block;
+      overflow: hidden;
+      line-height: 60rpx;
+      .business_name {
+        float: left;
+        font-size: 32rpx;
+      }
+      .order_status {
+        float: right;
+        color: #999999;
+        font-size: 24rpx;
+      }
+    }
+    .product_list {
+      display: block;
+      height: 100rpx;
+      overflow: hidden;
+      margin: 15rpx auto;
+      .product_item {
+        display: block;
+        height: 100rpx;
+        overflow: hidden;
+        .product_img {
+          float: left;
+          width: 80rpx;
+          height: 80rpx;
+          display: block;
+          margin-top: 10rpx;
+          margin-right: 30rpx;
+        }
+        .product_info {
+          float: left;
+          width: 480rpx;
+          height: 100rpx;
+          display: block;
+          overflow: hidden;
+          .product_name {
+            display: block;
+            height: 60rpx;
+            display: block;
+            font-size: 28rpx;
+            line-height: 60rpx;
+            overflow: hidden;
+          }
+          .product_spec {
+            color: #999999;
+            height: 40rpx;
+            display: block;
+            font-size: 24rpx;
+            line-height: 40rpx;
+            overflow: hidden;
+          }
+        }
+        .buy_num {
+          float: right;
+          height: 100rpx;
+          color: #999999;
+          font-size: 26rpx;
+          text-align: right;
+          position: relative;
+          line-height: 100rpx;
+        }
+      }
+    }
+    .product_list.active {
+      height: auto !important;
+    }
+    .order_price {
+      display: block;
+      height: 60rpx;
+      overflow: hidden;
+      line-height: 60rpx;
+      .pay_total {
+        float: right;
+        height: 60rpx;
+        color: #e03519;
+        font-size: 28rpx;
+        line-height: 60rpx;
+      }
+    }
+    .show_more {
+      width: 100%;
+      height: 30rpx;
+      display: block;
+      font-size: 20rpx !important;
+      margin-top: -30rpx;
+      text-align: center;
+      position: relative;
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    .order_btn {
+      display: block;
+      height: 60rpx;
+      overflow: hidden;
+      .order_cancel {
+        float: left;
+        height: 50rpx;
+        color: #999999;
+        font-size: 24rpx;
+        padding: 0rpx 10rpx;
+        line-height: 50rpx;
+        margin-left: 10rpx;
+        border-radius: 25rpx;
+        border: 2rpx solid #999999;
+        background-color: transparent;
+      }
+      .order_cancel::after {
+        border: none;
+      }
+      .order_share {
+        float: right;
+        height: 50rpx;
+        color: #e03519;
+        font-size: 24rpx;
+        padding: 0rpx 10rpx;
+        line-height: 50rpx;
+        margin-left: 10rpx;
+        border-radius: 25rpx;
+        border: 2rpx solid #e03519;
+        background-color: transparent;
+      }
+      .order_share::after {
+        border: none;
+      }
+    }
+  }
+}
 </style>

pages/score/orders.vue

@@ -1,274 +1,279 @@
 <template>
-	<view>
-		<!-- <view class="order_status_list">
+  <view>
+    <!-- <view class="order_status_list">
 			<view class="order_status_item" :class="requestParam.status==0?'active':''" @click="setStatus(0)"> 全部 </view>
 			<view class="order_status_item" :class="requestParam.status==1?'active':''" @click="setStatus(1)"> 待跟进 </view>
 			<view class="order_status_item" :class="requestParam.status==8?'active':''" @click="setStatus(8)"> 已完成 </view>
 		</view> -->
-		<view class="to_bottom" v-if="!orderList.length"> -----还没有记录啦-----</view>
-		<view class="order_list">
-			<view class="order_item" v-for="(item,index) in orderList" :key="index">
-				<view class="box_left">
-					<image class="product_image" :src="item.product_thumb" mode=""></image>
-				</view>
-				<view class="box_right">
-					<view class="product_title">
-						<view class="product_name">{{item.product_name}}</view>
-						<view class="order_status">
-							{{item.state}}
-						</view>
-					</view>
-					<view class="spec_number">
-						<view class="product_spec">{{item.product_spec}}</view>
-						<view class="buy_num">共{{item.buy_num}}件</view>
-					</view>
-					<view class="pay_info">
-						<!-- 赠品信息 -->
-						<view class="coupon_info" v-if="item.is_rebate">赠品</view>
-  						<view class="pay_total">{{item.score_total}} 积分</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="to_bottom" v-if="isLast"> -----到底啦-----</view>
-	</view>
+    <view class="order_list" v-if="orderList.length">
+      <view class="order_item" v-for="(item, index) in orderList" :key="index">
+        <view class="box_left">
+          <image class="product_image" :src="item.product_thumb" mode=""></image>
+        </view>
+        <view class="box_right">
+          <view class="product_title">
+            <view class="product_name">{{ item.product_name }}</view>
+            <view class="order_status">
+              {{ item.state }}
+            </view>
+          </view>
+          <view class="spec_number">
+            <view class="product_spec">{{ item.product_spec }}</view>
+            <view class="buy_num">共{{ item.buy_num }}件</view>
+          </view>
+          <view class="pay_info">
+            <!-- 赠品信息 -->
+            <view class="coupon_info" v-if="item.is_rebate">赠品</view>
+            <view class="pay_total">{{ item.score_total }} 积分</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <Empty v-if="!orderList.length" text="----- 还没有记录啦 -----" />
+    <view class="to_bottom" v-if="isLast && orderList.length"> -----到底啦-----</view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				// 产品列表
-				orderList:[],
-				// 请求参数
-				requestParam:{
-					page:1,
-					status:0,
-				},
-				// 是否最后一页
-				isLast:false,
-				// 是否请求中
-				isReqing:false,
-			};
-		},
-		onLoad() {
-			// 初始化页码为1
-			this.requestParam.page	= 1;
-			// 是否是最后一页
-			this.isLast			 	= false;
-			// 设置请求中
-			this.isReqing			= true;
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 请求列表
-			this.$http.request('api/score_orders/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.orderList = re.data.data;
-				}
-			});
-		},
-		onShow() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 没有数据的话，或者请求中，不允许刷新
-			if( this.orderList.length > 0 || this.isReqing ) return ;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/score_orders/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.orderList = re.data.data;
-				}
-			});
-		},
-		onPullDownRefresh() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 如果请求中，不允许请求，
-			if( this.isReqing )		return false;
-			// 初始化页码为1
-			this.requestParam.page	= 1;
-			// 是否是最后一页
-			this.isLast			 	= false;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/score_orders/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.orderList = re.data.data;
-				}
-			});
-			uni.stopPullDownRefresh();
-		},
-		onReachBottom() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 如果页码是0，避免第一页重复
-			if( this.requestParam.page < 1 ) return;
-			// 最后一页不请求
-			if( this.isLast )		return;
-			// 请求中，不再请求
-			if( this.isReqing )		return;
-			// 增加一页
-			this.requestParam.page	= this.requestParam.page+1;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/score_orders/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					// 追加数据
-					this.orderList.push(... re.data.data);
-				}
-			});
-		},
-		methods:{
-			setStatus(status){
-				// 登录提示
-				if( !this.$checkAccess.alterLogin() )  return ;
-				// 请求中，不再请求
-				if( this.isReqing ) 		return;
-				// 初始化页码为1
-				this.requestParam.page		= 1;
-				// 是否是最后一页
-				this.isLast			 		= false;
-				// 状态变更
-				this.requestParam.status	= status;
-				// 设置请求中
-				this.isReqing				= true;
-				// 请求列表
-				this.$http.request('api/score_orders/get_list',this.requestParam).then((re)=>{
-					// 设置非请求中
-					this.isReqing			= false;
-					// 成功结果
-					if( re.code == 'success' ){
-						if(re.data.last_page >= this.requestParam.page ) this.isLast = true;
-						this.orderList = re.data.data;
-					}
-				});
-			}
-		}
-	}
+import Empty from "@/components/Empty/Empty.vue";
+
+export default {
+  components: {
+    Empty,
+  },
+  data() {
+    return {
+      // 产品列表
+      orderList: [],
+      // 请求参数
+      requestParam: {
+        page: 1,
+        status: 0,
+      },
+      // 是否最后一页
+      isLast: false,
+      // 是否请求中
+      isReqing: false,
+    };
+  },
+  onLoad() {
+    // 初始化页码为1
+    this.requestParam.page = 1;
+    // 是否是最后一页
+    this.isLast = false;
+    // 设置请求中
+    this.isReqing = true;
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 请求列表
+    this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.orderList = re.data.data;
+      }
+    });
+  },
+  onShow() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 没有数据的话，或者请求中，不允许刷新
+    if (this.orderList.length > 0 || this.isReqing) return;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.orderList = re.data.data;
+      }
+    });
+  },
+  onPullDownRefresh() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 如果请求中，不允许请求，
+    if (this.isReqing) return false;
+    // 初始化页码为1
+    this.requestParam.page = 1;
+    // 是否是最后一页
+    this.isLast = false;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.orderList = re.data.data;
+      }
+    });
+    uni.stopPullDownRefresh();
+  },
+  onReachBottom() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 如果页码是0，避免第一页重复
+    if (this.requestParam.page < 1) return;
+    // 最后一页不请求
+    if (this.isLast) return;
+    // 请求中，不再请求
+    if (this.isReqing) return;
+    // 增加一页
+    this.requestParam.page = this.requestParam.page + 1;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        // 追加数据
+        this.orderList.push(...re.data.data);
+      }
+    });
+  },
+  methods: {
+    setStatus(status) {
+      // 登录提示
+      if (!this.$checkAccess.alterLogin()) return;
+      // 请求中，不再请求
+      if (this.isReqing) return;
+      // 初始化页码为1
+      this.requestParam.page = 1;
+      // 是否是最后一页
+      this.isLast = false;
+      // 状态变更
+      this.requestParam.status = status;
+      // 设置请求中
+      this.isReqing = true;
+      // 请求列表
+      this.$http.request("api/score_orders/get_list", this.requestParam).then((re) => {
+        // 设置非请求中
+        this.isReqing = false;
+        // 成功结果
+        if (re.code == "success") {
+          if (re.data.last_page >= this.requestParam.page) this.isLast = true;
+          this.orderList = re.data.data;
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.order_status_list{
-		display: block;
-		height: 60rpx;
-		color: #666666;
-		line-height: 60rpx;
-		background: #FFFFFF;
-		padding: 10rpx 35rpx;
-		.order_status_item{
-			float: left;
-			font-size: 28rpx;
-			padding: 0rpx 20rpx;
-		}
-		.order_status_item.active{
-			color: #000000;
-			font-weight: bold;
-		}
-	}
-	.order_list{
-		display: block;
-		overflow: hidden;
-		margin: 10rpx auto;
-		.order_item{
-			height: 200rpx;
-			display: block;
-			background: #FFFFFF;
-			margin: 10rpx auto;
-			.box_left{
-				float: left;
-				width: 160rpx;
-				height: 200rpx;
-				margin-left: 35rpx;
-				.product_image{
-					width: 160rpx;
-					height: 160rpx;
-					margin: 20rpx 0rpx;
-					border-radius: 5rpx;
-				}
-			}
-			.box_right{
-				float: left;
-				width: 485rpx;
-				margin-left: 35rpx;
-				padding-top: 20rpx;
-				.product_title{
-					width: 485rpx;
-					max-height: 80rpx;
-					font-size: 30rpx;
-					overflow: hidden;
-					line-height: 40rpx;
-					padding: 0rpx 0rpx;
-					.product_name{
-						float: left;
-						height: 40rpx;
-						width: 380rpx;
-					}
-					.order_status{
-						width: 85rpx;
-						float: right;
-						color: #999999;
-						font-size: 24rpx;
-					}
-				}
-				.spec_number{
-					color: #999999;
-					height: 60rpx;
-					font-size: 24rpx;
-					overflow: hidden;
-					margin: 10rpx auto;
-					line-height: 60rpx;
-					.product_spec{
-						float: left;
-						color: #999999;
-					}
-					.buy_num{
-						float: right;
-						height: 40rpx;
-						color: #333333;
-						font-size: 20rpx;
-						text-align: right;
-					}
-				}
-				.pay_info{
-					width: 485rpx;
-					max-height: 80rpx;
-					font-size: 30rpx;
-					overflow: hidden;
-					line-height: 40rpx;
-					padding: 0rpx 0rpx;
-					.coupon_info{
-						color: gold;
-						float: left;
-						font-size: 20rpx;
-					}
-					.pay_total{
-						color: red;
-						width: 200rpx;
-						float: right;
-						text-align: right;
-						font-size: 30rpx;
-					}
-				}
-			}
-		}
-	}
+.order_status_list {
+  display: block;
+  height: 60rpx;
+  color: #666666;
+  line-height: 60rpx;
+  background: #ffffff;
+  padding: 10rpx 35rpx;
+  .order_status_item {
+    float: left;
+    font-size: 28rpx;
+    padding: 0rpx 20rpx;
+  }
+  .order_status_item.active {
+    color: #000000;
+    font-weight: bold;
+  }
+}
+.order_list {
+  display: block;
+  overflow: hidden;
+  margin: 10rpx auto;
+  .order_item {
+    height: 200rpx;
+    display: block;
+    background: #ffffff;
+    margin: 10rpx auto;
+    .box_left {
+      float: left;
+      width: 160rpx;
+      height: 200rpx;
+      margin-left: 35rpx;
+      .product_image {
+        width: 160rpx;
+        height: 160rpx;
+        margin: 20rpx 0rpx;
+        border-radius: 5rpx;
+      }
+    }
+    .box_right {
+      float: left;
+      width: 485rpx;
+      margin-left: 35rpx;
+      padding-top: 20rpx;
+      .product_title {
+        width: 485rpx;
+        max-height: 80rpx;
+        font-size: 30rpx;
+        overflow: hidden;
+        line-height: 40rpx;
+        padding: 0rpx 0rpx;
+        .product_name {
+          float: left;
+          height: 40rpx;
+          width: 380rpx;
+        }
+        .order_status {
+          width: 85rpx;
+          float: right;
+          color: #999999;
+          font-size: 24rpx;
+        }
+      }
+      .spec_number {
+        color: #999999;
+        height: 60rpx;
+        font-size: 24rpx;
+        overflow: hidden;
+        margin: 10rpx auto;
+        line-height: 60rpx;
+        .product_spec {
+          float: left;
+          color: #999999;
+        }
+        .buy_num {
+          float: right;
+          height: 40rpx;
+          color: #333333;
+          font-size: 20rpx;
+          text-align: right;
+        }
+      }
+      .pay_info {
+        width: 485rpx;
+        max-height: 80rpx;
+        font-size: 30rpx;
+        overflow: hidden;
+        line-height: 40rpx;
+        padding: 0rpx 0rpx;
+        .coupon_info {
+          color: gold;
+          float: left;
+          font-size: 20rpx;
+        }
+        .pay_total {
+          color: red;
+          width: 200rpx;
+          float: right;
+          text-align: right;
+          font-size: 30rpx;
+        }
+      }
+    }
+  }
+}
 </style>

pages/score/product.vue

@@ -1,15 +1,9 @@
 <template>
   <view>
-    <page-meta
-      :page-style="'overflow:' + (show ? 'hidden' : 'visible')"
-    ></page-meta>
+    <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
     <view>
       <view class="product_image_box">
-        <image
-          class="product_image"
-          :src="productInfo.thumb"
-          mode="heightFix"
-        ></image>
+        <image class="product_image" :src="productInfo.thumb" mode="heightFix"></image>
       </view>
       <view class="product_info">
         <view class="stock_price">
@@ -25,48 +19,23 @@
         <rich-text :nodes="productInfo.description"></rich-text>
       </view>
       <view class="order_car">
-        <button
-          class="show_order"
-          data-eventsync="true"
-          @click="showSpecPopup(1)"
-        >
-          立即兑换
-        </button>
+        <button class="show_order" data-eventsync="true" @click="showSpecPopup(1)">立即兑换</button>
       </view>
       <view class="to_bottom"> --- 到底了 --- </view>
-      <uni-popup
-        ref="specPopup"
-        :show="true"
-        type="bottom"
-        class="popup"
-        background-color="#FFFFFF"
-        @change="popupChange"
-      >
+      <uni-popup ref="specPopup" :show="true" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
         <view class="order_info">
           <view class="custom_addr" @click="showAddrPopup()">
             <view class="contact_user">
-              <text class="contact_none" v-if="!checkedAddr.id"
-                >请选择收货地址</text
-              >
+              <text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
               <text class="contact_name">{{ checkedAddr.contact_name }}</text>
               <text class="contact_phone">{{ checkedAddr.contact_phone }}</text>
               <text class="contact_more"> &gt;</text>
-              <view
-                class="contact_shop text-ellipsis"
-                style="width: 250rpx; text-align: end"
-              >
-                <text v-if="checkedAddr.shop_type"
-                  >({{
-                    $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type]
-                  }})&nbsp;</text
-                >
+              <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
+                <text v-if="checkedAddr.shop_type">({{ $CONSTANTS.SHOP_TYPES[checkedAddr.shop_type] }})&nbsp;</text>
                 {{ checkedAddr.contact_shop }}
               </view>
             </view>
-            <view class="contact_addr" style="display: flex">
-              {{ checkedAddr.contact_province }} {{ checkedAddr.contact_city }}
-              {{ checkedAddr.contact_area }} {{ checkedAddr.contact_addr }}
-            </view>
+            <view class="contact_addr" style="display: flex"> {{ checkedAddr.contact_province }} {{ checkedAddr.contact_city }} {{ checkedAddr.contact_area }} {{ checkedAddr.contact_addr }} </view>
           </view>
           <view class="car_item">
             <view class="box_left">
@@ -79,34 +48,12 @@
                   <text>{{ productInfo.score }} 积分</text>
                 </view>
                 <view class="product_quantity_box">
-                  <button
-                    class="product_quantity_sub"
-                    @click="changeQuantity(-1)"
-                    data-eventsync="true"
-                  >
-                    <image
-                      class="sub_icon"
-                      src="../../static/icon/sub_icon.png"
-                      mode=""
-                    ></image>
+                  <button class="product_quantity_sub" @click="changeQuantity(-1)" data-eventsync="true">
+                    <image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
                   </button>
-                  <input
-                    type="number"
-                    class="product_quantity"
-                    placeholder="数量"
-                    v-model="quantity"
-                    @blur="changeQuantity(0)"
-                  />
-                  <button
-                    class="product_quantity_add"
-                    @click="changeQuantity(+1)"
-                    data-eventsync="true"
-                  >
-                    <image
-                      class="add_icon"
-                      src="../../static/icon/add_icon.png"
-                      mode=""
-                    ></image>
+                  <input type="number" class="product_quantity" placeholder="数量" v-model="quantity" @blur="changeQuantity(0)" />
+                  <button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
+                    <image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
                   </button>
                 </view>
               </view>
@@ -118,71 +65,34 @@
           <view class="to_select_coupon"></view>
           <view class="order_price">合计： {{ priceTotal }} 积分</view>
           <view class="order_btn">
-            <button
-              class="to_order"
-              @click="createOrder()"
-              data-eventsync="true"
-            >
-              兑换
-            </button>
+            <button class="to_order" @click="createOrder()" data-eventsync="true">兑换</button>
           </view>
         </view>
       </uni-popup>
-      <uni-popup
-        ref="addrPopup"
-        type="bottom"
-        class="popup"
-        background-color="#FFFFFF"
-      >
+      <uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
         <view class="popup_title"
           >收货地址
-          <navigator url="/pages/addr/index?notify=addr" class="to_addr_page"
-            >管理</navigator
-          >
+          <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator>
         </view>
         <view class="addr_list">
-          <view
-            class="addr_item"
-            v-for="(item, index) in addrList"
-            :key="index"
-            @click="checkedAddrItem(item)"
-          >
+          <view class="addr_item" v-for="(item, index) in addrList" :key="index" @click="checkedAddrItem(item)">
             <view class="radio_label">
-              <image
-                class="radio_icon"
-                :src="
-                  item.id == checkedAddr.id
-                    ? '../../static/icon/radioed.png'
-                    : '../../static/icon/radio.png'
-                "
-              ></image>
+              <image class="radio_icon" :src="item.id == checkedAddr.id ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
             </view>
             <view class="contact_user">
               <text class="contact_name">{{ item.contact_name }}</text>
               <text class="contact_phone">{{ item.contact_phone }}</text>
               <text class="contact_default" v-if="item.is_default">默认</text>
-              <view
-                class="contact_shop text-ellipsis"
-                style="width: 250rpx; text-align: end"
-              >
-                <text v-if="item.shop_type"
-                  >({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text
-                >
+              <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
+                <text v-if="item.shop_type">({{ $CONSTANTS.SHOP_TYPES[item.shop_type] }})&nbsp;</text>
                 {{ item.contact_shop }}
               </view>
             </view>
-            <view class="contact_addr" style="display: flex">
-              {{ item.contact_province }} {{ item.contact_city }}
-              {{ item.contact_area }} {{ item.contact_addr }}
-            </view>
+            <view class="contact_addr" style="display: flex"> {{ item.contact_province }} {{ item.contact_city }} {{ item.contact_area }} {{ item.contact_addr }} </view>
           </view>
         </view>
         <view class="create_box">
-          <navigator
-            url="/pages/addr/index?notify=addr&type=create"
-            class="create_addr"
-            >新建收货地址</navigator
-          >
+          <navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
         </view>
       </uni-popup>
     </view>
@@ -254,15 +164,13 @@ export default {
     // 如果存在产品ID的话
     if (this.requestParam.id > 0) {
       // 请求详情
-      this.$http
-        .request("api/score_product/get_detail", this.requestParam)
-        .then((re) => {
-          // 成功渲染数据
-          if (re.code == "success") {
-            // 刷新数据
-            this.productInfo = re.data;
-          }
-        });
+      this.$http.request("api/score_product/get_detail", this.requestParam).then((re) => {
+        // 成功渲染数据
+        if (re.code == "success") {
+          // 刷新数据
+          this.productInfo = re.data;
+        }
+      });
     }
   },
   methods: {
@@ -383,8 +291,7 @@ export default {
             // 获取默认的
             for (let i in this.addrList) {
               // 如果是默认的
-              if (this.addrList[i].is_default)
-                this.checkedAddr = this.addrList[i];
+              if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
             }
             // 如果没有默认的话
             if (!this.checkedAddr.id) {

uni.scss

@@ -21,32 +21,32 @@ $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
 
 /* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color: #333; //基本色
+$uni-text-color-inverse: #fff; //反色
+$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
+$uni-text-color-disable: #c0c0c0;
 
 /* 背景颜色 */
-$uni-bg-color:#ffffff;
-$uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+$uni-bg-color: #ffffff;
+$uni-bg-color-grey: #f8f8f8;
+$uni-bg-color-hover: #f1f1f1; //点击状态颜色
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
 
 /* 边框颜色 */
-$uni-border-color:#c8c7cc;
+$uni-border-color: #c8c7cc;
 
 /* 尺寸变量 */
 
 /* 文字尺寸 */
-$uni-font-size-sm:12px;
-$uni-font-size-base:14px;
-$uni-font-size-lg:16px;
+$uni-font-size-sm: 12px;
+$uni-font-size-base: 14px;
+$uni-font-size-lg: 16px;
 
 /* 图片尺寸 */
-$uni-img-size-sm:20px;
-$uni-img-size-base:26px;
-$uni-img-size-lg:40px;
+$uni-img-size-sm: 20px;
+$uni-img-size-base: 26px;
+$uni-img-size-lg: 40px;
 
 /* Border Radius */
 $uni-border-radius-sm: 2px;
@@ -68,9 +68,9 @@ $uni-spacing-col-lg: 12px;
 $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
 /* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:20px;
+$uni-color-title: #2c405a; // 文章标题颜色
+$uni-font-size-title: 20px;
 $uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:26px;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$uni-font-size-subtitle: 26px;
+$uni-color-paragraph: #3f536e; // 文章段落颜色
+$uni-font-size-paragraph: 15px;