合同小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

316 lines
6.3 KiB

  1. <template>
  2. <view class="container">
  3. <!-- 顶部标题 -->
  4. <view class="header">
  5. <view class="header_info">
  6. <text class="header_texts" :title="title">{{title}}</text>
  7. <text class="header_info_icons">|</text>
  8. <view @click="change_text" class="header_change">
  9. <text >切换</text>
  10. <uni-icons type="right" size="30" color="#c2d4de" ></uni-icons>
  11. </view>
  12. </view>
  13. </view>
  14. <view class="swiper">
  15. <image class="swiper-image" src="/static/image/组 71699.png"></image>
  16. </view>
  17. <view class="order_Entry_container" @click="orderEntry">
  18. <image class="order_Entry_image" src="/static/image/组 71699_1@3x.png"></image>
  19. <text style="color: #115881;font-weight: bold;margin-left: 1rem;">录入订单</text>
  20. <uni-icons class="order_Entry_end" type="right" :size="25" color="#306e91"></uni-icons>
  21. </view>
  22. <view v-if="isshow" class="show_container">
  23. <view class="isshow-header">
  24. <uni-icons class=" isshow-header-content-icon" type="search" :size="20"></uni-icons>
  25. <uni-easyinput :inputBorder="false" @input="handleSearch" class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" />
  26. <text class="isshow-header-content-text" @click="searchName">搜索</text>
  27. </view>
  28. <view class="isshow-content" >
  29. <text class="isshow-content-text" v-for="(item, index) in textcontent" :key="index" @click="change_city(item.name)">{{item.name}}</text>
  30. </view>
  31. </view>
  32. <view v-if="isshow_1" class="show_container_1">
  33. <image class="show_container_1_image" src="/static/image/图层_6.png"></image>
  34. <view class="show_container_1_footer">
  35. <text>门店已经切换为{{title}}</text>
  36. <button class="show_container_1_footer_button" @click="close_view">好的</button>
  37. </view>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. export default {
  43. data() {
  44. return {
  45. ServiceName:'',
  46. title:"北京汽车有限公司",
  47. isshow:false,
  48. isshow_1:false,
  49. newListData:[],
  50. allMsg : [
  51. { name: "myhua", id: 1 },
  52. { name: "mp3", id: 2 },
  53. { name: "hello", id: 3 },
  54. { name: "world", id: 4 },
  55. { name: "warm weather", id: 5 },
  56. { name: "m3", id: 6 },
  57. { name: "hahaha", id: 7 }
  58. ],
  59. textcontent: [],
  60. };
  61. },
  62. mounted() {
  63. this.allMsg = [
  64. { name: "myhua", id: 1 },
  65. { name: "mp3", id: 2 },
  66. { name: "hello", id: 3 },
  67. { name: "world", id: 4 },
  68. { name: "warm weather", id: 5 },
  69. { name: "m3", id: 6 },
  70. { name: "hahaha", id: 7 }
  71. ];
  72. this.textcontent = this.allMsg;
  73. },
  74. methods: {
  75. change_text(){
  76. if(this.isshow){
  77. this.isshow=false;
  78. }else{
  79. this.isshow=true;
  80. console.log('111')
  81. }
  82. },
  83. orderEntry(){
  84. console.log('111');
  85. uni.navigateTo(
  86. { url: '/pages/views/dingDanCreate' }
  87. )
  88. },
  89. // 搜索城市名字
  90. searchName(){
  91. },
  92. change_city(name){
  93. this.title = name;
  94. this.change_text();
  95. this.isshow_1 = true;
  96. },
  97. close_view(){
  98. this.isshow_1 = false;
  99. },
  100. // 模糊匹配
  101. // 右上角搜索框--模糊查询
  102. handleSearch(event) {
  103. console.log(event);
  104. if(event){
  105. let queryStringArr = event.split("");
  106. let str = "(.*?)";
  107. this.textcontent = [];
  108. let regStr = str + queryStringArr.join(str) + str;
  109. let reg = RegExp(regStr, "i"); // 以mh为例生成的正则表达式为/(.*?)m(.*?)h(.*?)/i
  110. this.allMsg.map(item => {
  111. if (reg.test(item.name)) {
  112. this.textcontent.push(item);
  113. }
  114. });
  115. }else {
  116. this.textcontent=[];
  117. this.textcontent = this.allMsg;
  118. }
  119. }
  120. }
  121. };
  122. </script>
  123. <style>
  124. /* 订单录入 */
  125. .order_Entry_container{
  126. width: 90%;
  127. height: 8%;
  128. background-color: #d9e5eb;
  129. border-radius: 0.6rem;
  130. margin-left:5%;
  131. display: flex;
  132. flex-direction: row;
  133. align-items: center;
  134. margin-top: 10%;
  135. }
  136. .order_Entry_image{
  137. width: 10%;
  138. height: 70%;
  139. margin-left: 3%;
  140. }
  141. .order_Entry_end{
  142. margin-left: auto;
  143. margin-right: 7%;
  144. }
  145. /* 轮播图 */
  146. .swiper {
  147. height: 30%;
  148. width: 100%;
  149. display: flex;
  150. flex-direction: row;
  151. align-items: center;
  152. overflow: hidden;
  153. }
  154. .swiper-image {
  155. width: 100%;
  156. height: 100%;
  157. margin: 0 auto;
  158. }
  159. .form {
  160. flex: 1;
  161. padding: 1rem;
  162. }
  163. .submit-button {
  164. width: 100%;
  165. height: 3rem;
  166. background-color: #007aff;
  167. color: #fff;
  168. border: none;
  169. border-radius: 0.3rem;
  170. font-size: 1rem;
  171. }
  172. .footer {
  173. display: flex;
  174. justify-content: space-around;
  175. padding: 0.8rem;
  176. background-color: #fff;
  177. border-top: 1rem solid #ccc;
  178. }
  179. .nav-item {
  180. text-align: center;
  181. }
  182. .nav-item text {
  183. font-size: 0.9rem;
  184. }
  185. .icon-image{
  186. width: 30%;
  187. height: 10rem;
  188. margin: 0 auto;
  189. margin-top: 1rem;
  190. }
  191. /* 遮罩层 */
  192. .show_container{
  193. width: 60%;
  194. height: 36%;
  195. background-color: #ffffff;
  196. position: absolute;
  197. border-radius: 1rem;
  198. /* border: 1rem solid; */
  199. box-shadow: 0rem 0.2rem 0rem #e4e4e4;
  200. left:5%;
  201. top: 13%;
  202. z-index:999;
  203. display: flex;
  204. flex-direction: column;
  205. align-items: center;
  206. }
  207. .isshow-header{
  208. width: 90%;
  209. height: 30%;
  210. display: flex;
  211. justify-content: center;
  212. align-items: center;
  213. flex-direction: row;
  214. color: #3c7697;
  215. }
  216. .isshow-header-content-icon{
  217. width: 10%;
  218. height: 30%;
  219. }
  220. .isshow-header-content-input{
  221. width: 80%;
  222. height: 40%;
  223. margin: 0 1rem 0 1rem;
  224. border:none;
  225. outline:none;
  226. }
  227. .isshow-content{
  228. height: 70%;
  229. display: flex;
  230. flex-direction: column;
  231. align-items: center;
  232. overflow-y:scroll;
  233. }
  234. .isshow-content-text{
  235. color: #414141;
  236. height: 1.5rem;
  237. width: 100%;
  238. line-height: 1.5rem;
  239. margin: 1rem 0 1rem 0;
  240. font-size: 0.8rem;
  241. }
  242. .isshow-content::-webkit-scrollbar {
  243. display: none;
  244. }
  245. /* 提示框*/
  246. .show_container_1{
  247. width: 80%;
  248. height: 50%;
  249. background-color: #ffffff;
  250. position: absolute;
  251. border-radius: 1rem;
  252. /* border: 1rem solid; */
  253. box-shadow: 0rem 0.2rem 0rem #e4e4e4;
  254. left:10%;
  255. top:25%;
  256. z-index:999;
  257. display: flex;
  258. flex-direction: column;
  259. align-items: center;
  260. }
  261. .show_container_1_image{
  262. height: 40%;
  263. width: 60%;
  264. top: 5%;
  265. }
  266. .show_container_1_footer{
  267. height: 50%;
  268. width: 100%;
  269. color:#0b5583;
  270. display: flex;
  271. flex-direction: column;
  272. align-items: center;
  273. font-weight: bold;
  274. font-size: 0.7rem;
  275. }
  276. .show_container_1_footer text{
  277. margin-top: 10%;
  278. }
  279. .show_container_1_footer_button{
  280. background-color: #ffffff;
  281. color:#0b5583;
  282. height: 30%;
  283. border-radius: 1.8rem;
  284. width: 80%;
  285. margin-top: 5%;
  286. border: 0.1rem solid #0c547e;
  287. display: flex;
  288. justify-content: center;
  289. align-items: center;
  290. }
  291. </style>